@charset "utf-8";

/*================ ブレイクポイント ====================*/
/*
Extra small: 576pxまで
Small: 576px以上
Medium: 768px以上
Large: 992px以上
Extra large: 1200px以上
Extra extra large: 1400px以上
*/

:root {
	--main-color: #2C9A5E;
	--main-color02: #1E623A;
	--base-color: #F6FAEF;
	--base-color02: #333333;
	--base-color03: #FFFFFF;
	--accent-color: #9EC654;
	--sub-color: #F46CAA;
	--sub-color02: #707070;
	--sub-color03: #FCFCE8;
	--sub-color04: #EFEF8D;
	--sub-color05: #AD0B52;
	--leading-trim: calc((1em - 1lh) / 2);
}

/*====================================================
base（デフォルト）
====================================================*/
img { max-width: 100%; height: auto; vertical-align: bottom; }
body{ font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-size: 16px; overflow-x: hidden; }
:where(button, [type='button'], [type='reset'], [type='submit']) { touch-action: manipulation; }
:focus:not(:focus-visible) { outline: none; }
@media (min-width: 576px) {
	body { font-size: 19px; }
}

/*====================================================
media query（画面サイズの基準）
=====================================================*/
.xsm { display: block !important; }
.sm { display: none !important; }
.md { display: none !important; }
.lg { display: none !important; }
.xl { display: none !important; }
.xxl { display: none !important; }
@media (min-width: 576px) and (max-width: 767px)  {
	.xsm { display: none !important; }
	.sm { display: block !important; }
	.md { display: none !important; }
	.lg { display: none !important; }
	.xl { display: none !important; }
	.xxl { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
	.xsm { display: none !important; }
	.sm { display: none !important; }
	.md { display: block !important; }
	.lg { display: none !important; }
	.xl { display: none !important; }
	.xxl { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1999px) {
	.xsm { display: none !important; }
	.sm { display: none !important; }
	.md { display: none !important; }
	.lg { display: block !important; }
	.xl { display: none !important; }
	.xxl { display: none !important; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
	.xsm { display: none !important; }
	.sm { display: none !important; }
	.md { display: none !important; }
	.lg { display: none !important; }
	.xl { display: block !important; }
	.xxl { display: none !important; }
}
@media screen and (min-width: 1400px) {
	.xsm { display: none !important; }
	.sm { display: none !important; }
	.md { display: none !important; }
	.lg { display: none !important; }
	.xl { display: none !important; }
	.xxl { display: block !important; }
}

/*====================================================
layout（レイアウト）
====================================================*/
.l-wrapper { max-width: 1100px; padding-left: 4%; padding-right: 4%; margin: auto; }
@media screen and (min-width: 1200px) {
	.l-wrapper { padding-left: 0; padding-right: 0; }
}

/*====================================================
headline（見出し）
====================================================*/
.c-headline02 { font-size: 26px; font-weight: 700; text-align: center; }
.c-headline02::before { content: ""; display: block; width: 60px; height: 36px; margin: 0 auto 15px; background: url(images/common/icon.svg); }
.c-headline03 { padding-bottom: 20px; font-size: 22px; font-weight: 700; color: var(--main-color); border-bottom: 2px solid var(--accent-color); line-height: 1; }
@media (min-width: 992px) {
	.c-headline02 { font-size: 30px; }
	.c-headline03 { font-size: 26px; }
}

/*====================================================
button（ボタン）
====================================================*/
.c-button-typeA { position: relative; display: inline-block; max-width: 300px; width: 100%; padding: 20px; color: var(--sub-color); font-size: 1rem; border: 1px solid var(--sub-color); border-radius: 30px; text-align: left; transition: background 0.3s ease-in; }
.c-button-typeA::after { content: "arrow_right"; font-family: Material Symbols Rounded; position: absolute; top: 50%; right: 30px; transform: translateY(-50%); font-size: 36px; }
@media (any-hover: hover) {
	.c-button-typeA:hover { background: var(--sub-color03); }
}
.c-button-typeB { display: flex; justify-content: center; align-items: center; height: 100%; font-size: 21px; font-weight: 700; padding: 0.5rem 0.5rem; background: var(--base-color03); border: 2px solid var(--accent-color); border-radius: 20px; line-height: 1.2; transition: background 0.3s ease-in; text-align: center; }
@media (any-hover: hover) {
	.c-button-typeB:hover { background: var(--sub-color03); }
}
@media (min-width: 992px) {
	.c-button-typeB { padding: 2.1rem 1.05rem; }
}
/* トップへもどるボタン */
.c-topbutton { position: fixed; bottom: 40px; right: 10px; z-index: 10; }
.c-topbutton a { display: none; margin-bottom: 10px; padding: 5px; background-color: #009844; text-align: center; color: #ffffff; text-decoration: none; border-radius: 5px; opacity: 0.5; }
.c-topbutton a img { transition: 0.8s ease-out; }
.c-topbutton a:nth-last-of-type(1) { margin-bottom: 0; }
@media (any-hover :hover) {
	.c-topbutton a:hover { opacity: 1; }
}

/*====================================================
loading（ローディング画面）
====================================================*/
.c-loading { position: fixed; inset: 0; z-index: calc(infinity); display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: var(--base-color); opacity: 1; visibility: visible; transition: opacity 0.6s cubic-bezier(0.32, 0, 0.67, 0), visibility 0.6s cubic-bezier(0.32, 0, 0.67, 0); }
.c-loading.is-loaded { opacity: 0; visibility: hidden; }

/*====================================================
header（ヘッダー）
====================================================*/
.c-header { overflow: hidden; }
.c-header_content { display: flex; flex-direction: column-reverse; padding: 10px 0; }
.c-header_content__body__home { display: flex; justify-content: space-between; align-items: center; column-gap: 10px; margin-bottom: 10px; }
.c-header_content__body__home-icon { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 90px; padding: 5px 10px; color: var(--sub-color05); font-size: 0.9rem; font-weight: 700; border: 1px solid var(--sub-color05); border-radius: 10px; }
.c-header_content__body__info { display: grid; row-gap: 10px; }
.c-header_content__body__info-inner { text-align: center; }
.c-header_content__body__info-inner .note-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.c-header_content__body__info-inner .note-list .item { display: grid; place-content: center; padding: 5px 10px; background: var(--sub-color05); color: var(--base-color03); font-size: 1rem; font-weight: 700; border-radius: 20px; }
.c-header_content__body__info-inner .tel { margin-bottom: 10px; }
.c-header_content__address__text{ display: none; }
@media (min-width: 768px) {
	.c-header_content { padding: 10px 0 25px; }
	.c-header_content__body { display: grid; grid-template-columns: 2fr 1.5fr; column-gap: 10px; }
	.c-header_content__body__home { margin-bottom: 0; }
	.c-header_content__body__home-icon { max-width: 135px; padding: 10px 25px; font-size: 1rem; }
	.c-header_content__body__info { grid-template-columns: 1fr 1.5fr; column-gap: 20px; }
	.c-header_content__body__info-inner .note-list { grid-template-columns: 1fr; }
	.c-header_content__address__text { display: block; text-align: right; margin-bottom: 5px; font-size: 14px; }
}
@media (min-width: 992px) {
	.c-header_content__body__info-inner { text-align: left; }
}

/*====================================================
global（グローバル）
====================================================*/
.c-globalnav { padding: 30px 0; }
.c-globalnav_list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.c-globalnav_list__item:first-of-type { display: none; }
.c-globalnav_list__item a { display: grid; place-content: center; padding: 15px 5px; background: var(--main-color02); color: var(--base-color03); font-weight: 700; border-radius: 10px; text-transform: uppercase; }
@media (min-width: 768px) {
	.c-globalnav { position: sticky; top: 0; z-index: 90; width: 100vw; padding: 0; margin: 0 calc(50% - 50vw); background: var(--main-color02); }
	.c-globalnav_list { display: flex; justify-content: center; column-gap: 50px; margin: 0 auto; }
	.c-globalnav_list__item:first-of-type { display: block; }
	.c-globalnav_list__item a { min-width: 140px; }
}
@media (any-hover: hover) {
	.c-globalnav_list__item a:hover { color: var(--sub-color04); }
}

/*====================================================
kv（キービジュアル）
====================================================*/
.top-kv__image { text-align: center; }
.top-kv__image img { width: 100%; height: 100%; }

/*====================================================
news（お知らせ）
====================================================*/
.top-news { padding: 60px 0; }
.top-news_body { display: flex; flex-direction: column; row-gap: 30px; }
.top-news_body__notice { max-height: 480px; overflow-y: scroll; overscroll-behavior-block: contain; }
.top-news_body__notice #notice { padding: 0 15px; }
.top-news_body__notice #notice li { padding: 15px 0; border-bottom: 1px dotted #CCC; line-height: 1.7; }
.top-news_body__notice #notice li:nth-last-child(1) { border-bottom: none }
.top-news_body__notice #notice li strong { display: block; margin-bottom: -20px; }
@media (min-width: 992px) {
	.top-news_body { flex-direction: row; justify-content: space-between; }
	.top-news_body__notice { width: 73%; }
	.top-news_body__notice #notice { padding: 0 30px; }
	.top-news_body__notice #notice li { padding: 30px 0; }
}

/*====================================================
feature（当院の特徴）
====================================================*/
.top-feature { position: relative; padding: 60px 0 100px; }
.top-feature::after { content: ""; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: url(images/top/feature_bg.jpg) no-repeat bottom center; }
.top-feature_headline { margin-bottom: 60px; text-align: center; }
.top-feature_list { display: grid; grid-template-columns: 1fr; gap: 30px; }
.top-feature_list__item { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 20px; padding: 1.5rem; border-radius: 20px; background: var(--base-color03); }
.top-feature_list__item__title { font-size: 21px; font-weight: 700; color: var(--sub-color); line-height: 1.3; text-align: center; }
.top-feature_list__item__title::before { content: ""; display: block; width: 120px; height: 120px; margin: 0 auto 20px; text-align: center; }
.top-feature_list__item__title.one::before { background: url(images/top/feature_icon01.png) no-repeat center center / cover; }
.top-feature_list__item__title.two::before { background: url(images/top/feature_icon02.png) no-repeat center center / cover; }
.top-feature_list__item__title.three::before { background: url(images/top/feature_icon03.png) no-repeat center center / cover; }
.top-feature_list__item__text { word-break: break-word; line-height: 1.5; }
@media (min-width: 992px) {
	.top-feature_list { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; column-gap: 60px; }
}

/*====================================================
greeting（ご挨拶）
====================================================*/
.top-greeting { padding: 60px 0 100px; background: var(--base-color); }
.top-greeting_headline { margin-bottom: 60px; }
.top-greeting_incho__body { display: grid; grid-template-columns: 1fr; gap: 60px; margin-bottom: 60px; }
.top-greeting_incho__body__profile .title { font-style: normal; font-weight: 700; display: block; margin-bottom: 30px; color: var(--main-color); font-size: 26px; line-height: 1.5; }
.top-greeting_incho__body__profile .text { margin-bottom: 2rem; line-height: 1.7; }
.top-greeting_incho__body__profile .text:nth-last-of-type(1) { margin-bottom: 0; }
.top-greeting_incho__body__photo { text-align: center; }
.top-greeting_incho__body__photo .image { margin-bottom: 30px; }
.top-greeting_incho__career { display: flex; flex-direction: column; gap: 60px; margin-bottom: 60px; }
.top-greeting_incho__career__box { padding: 30px; background: var(--base-color03); border: 2px solid var(--accent-color); border-radius: 20px; }
.top-greeting_incho__career__box .headline { margin-bottom: 30px; font-size: 26px; font-weight: 700; color: var(--main-color); line-height: 1; letter-spacing: 0.05em; text-align: center; }
.top-greeting_incho__career__box .list__item { display: flex; gap: 20px; padding: 15px 0; border-bottom: 1px solid #EAEAEA; line-height: 1.75; }
.top-greeting_incho__career__box .list__item:nth-last-of-type(1) { border-bottom: none; }
.top-greeting_incho__career__box .list__item__title { min-width: 100px; }
.top-greeting_incho__career__box.right .list { margin-bottom: 60px; }
.top-greeting_incho__career__box.right .list:nth-last-of-type(1) { margin-bottom: 0; }
.top-greeting_hijokin { margin-bottom: 60px; }
.top-greeting_hijokin__headline { margin-bottom: 30px; }
.top-greeting_hijokin__profile { padding: 2.1rem 1.05rem; background: var(--base-color03); border: 2px solid var(--accent-color); border-radius: 20px; }
.top-greeting_hijokin__profile__name { margin-bottom: 20px; padding-bottom: 15px; font-size: 19px; font-weight: 700; border-bottom: 1px solid #888888; line-height: 1; }
.top-greeting_hijokin__profile__text { line-height: 1.5; }
.top-greeting_teikeisaki__headline { margin-bottom: 30px; }
.top-greeting_teikeisaki__panel { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 100px); column-gap: 15px; row-gap: 20px; }
.top-greeting_teikeisaki__panel > li { height: 100px; }
@media (min-width: 992px) {
	.top-greeting_incho__body { grid-template-columns: repeat(2, 1fr); }
	.top-greeting_incho__career { flex-direction: row; justify-content: space-between; }
	.top-greeting_incho__career__box { padding: 50px; }
	.top-greeting_incho__career__box.left { width: 65%; }
	.top-greeting_incho__career__box.right { width: 30%; margin-bottom: 100px; }
	.top-greeting_teikeisaki__panel { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); column-gap: 60px; row-gap: 30px; }
}

/*====================================================
medical（診療案内）
====================================================*/
.top-medical { padding: 60px 0; }
.top-medical_headline { margin-bottom: 60px; }
.top-medical_info { margin-bottom: 60px; }
.top-medical_info__body { display: flex; flex-direction: column; gap: 30px; }
.top-medical_info__body__jikanhyo .timetable { margin-bottom: 20px; }
.top-medical_info__body__jikanhyo .annotation { line-height: 1.7; }
.top-medical_info__body__jikanhyo .annotation__item.--critical { color: var(--sub-color05); }
.top-medical_info__body__note { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.top-medical_info__body__note .item { position: relative; height: 100px; background: var(--base-color03); border: 1px solid var(--main-color); text-align: center; }
.top-medical_info__body__note .item:nth-last-of-type(1) { margin-bottom: 0; }
.top-medical_info__body__note .item::before, .top-medical_info__body__note .item::after { position: absolute; inset: 0; content: ""; display: block; background: var(--base-color03); }
.top-medical_info__body__note .item::before { top: -1px; bottom: -1px; left: 10px; right: 10px; }
.top-medical_info__body__note .item::after { top: 10px; bottom: 10px; left: -1px; right: -1px; }
.top-medical_info__body__note .item span { position: absolute; top: 50%; left: 50%; z-index: 1; width: 100%; font-size: 19px; font-weight: 700; transform: translate(-50%, -50%); }
.top-medical_panel { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, 100px); column-gap: 15px; row-gap: 20px; }
.top-medical_panel > li { height: 100px; }
@media (min-width: 992px) {
	.top-medical_info__body { flex-direction: row; justify-content: space-between; gap: 50px; }
	.top-medical_info__body__note { grid-template-columns: 1fr; gap: 60px; width: 30%; }
	.top-medical_info__body__note .item { height: 100%; }
	.top-medical_info__body__note .item span { font-size: 21px; }
	.top-medical_panel { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); column-gap: 60px; row-gap: 30px; }
}

/*====================================================
treatment（診療一覧）
====================================================*/
.top-treatment { padding: 50px 0; background: var(--base-color); }
.top-treatment_main__card { margin-bottom: 60px; word-break: break-word; }
.top-treatment_main__card__headline { margin-bottom: 30px; }
.top-treatment_main__card__body { display: flex; flex-direction: column; gap: 60px; }
.top-treatment_main__card__body .text { line-height: 1.7; }
.top-treatment_main__card__body .image { text-align: center; }
.top-treatment_sub { display: grid; grid-template-columns: 1fr; gap: 60px; }
.top-treatment_sub__card { word-break: break-word; padding: 30px; background: var(--base-color03); border: 2px solid var(--accent-color); border-radius: 20px; }
.top-treatment_sub__card__headline { margin-bottom: 30px; }
.top-treatment_sub__card__text { line-height: 1.7; }
@media (min-width: 576px) {
	.top-treatment { padding: 100px 0; }
	.top-treatment_sub__card { padding: 40px; }
}
@media (min-width: 992px) {
	.top-treatment_main__card__body { flex-direction: row; justify-content: space-between; }
	.top-treatment_main__card__body .text { width: 65%; }
	.top-treatment_main__card__body .image { width: 328px; height: 250px; }
	.top-treatment_main__card__body .image img { width: 100%; height: 100%; object-fit: cover; }
	.top-treatment_sub { grid-template-columns: repeat(2, 1fr); }
}

/*====================================================
access（アクセス）
====================================================*/
.top-access { position: relative; padding: 0 0; }
.top-access::after { content: ""; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: url(images/top/access_bg.jpg) no-repeat top center; }
.top-access_headline { margin-bottom: 60px; }
.top-access_contents { padding: 30px 0; background: var(--base-color03); }
.top-access_contents__body { display: grid; grid-template-columns: 1fr; gap: 40px; }
.top-access_contents__body__address .map { margin-bottom: 20px; text-align: center; }
.top-access_contents__body__address .text { padding-left: 4%; padding-right: 4%; }
.top-access_contents__body__info { padding-left: 4%; padding-right: 4%; }
.top-access_contents__body__info .list__item { margin-bottom: 30px; }
.top-access_contents__body__info .list__item__title { margin-bottom: 20px; padding: 15px; color: var(--base-color03); font-size: 21px; background: var(--main-color); text-align: center; border-radius: 40px; line-height: 1; }
.top-access_contents__body__info .list__item__desc::before { content: "\025cf"; margin-right: 0.5em; color: var(--sub-color); }
.top-access_contents__body__info .button { text-align: center; }
@media (min-width: 576px) {
	.top-access_wrapper { max-width: 1100px; margin: auto; padding-left: 4%; padding-right: 4%; }
}
@media (min-width: 768px) {
	.top-access { padding: 100px 0; }
	.top-access_contents { padding: 40px 40px; border-radius: 20px; }
}
@media (min-width: 992px) {
	.top-access_contents__body { display: grid; grid-template-columns: repeat(2, 1fr); }
	.top-access_contents__body__address .text { padding-left: 0; padding-right: 0; }
	.top-access_contents__body__info { padding-left: 0; padding-right: 0; }
	.top-access_contents__body__info .button { text-align: left; }
}

/*====================================================
footer（フッター）
====================================================*/
.c-footer_contents { padding: 60px 0; background: var(--base-color); }
.c-footer_contents__body { display: flex; flex-direction: column; gap: 35px; }
.c-footer_contents__body__info .logo { margin-bottom: 20px; }
.c-footer_contents__body__info .tel { margin-bottom: 20px; }
.c-footer_contents__body__info .bar { margin-bottom: 20px; color: var(--base-color03); background: var(--sub-color05); border-radius: 30px; line-height: 1.5; text-align: center; }
.c-footer_contents__body__info .address { margin-bottom: 30px; line-height: 1.7; }
.c-footer_contents__body__info .cashless { padding: 15px; color: var(--base-color); font-weight: 700; background: var(--sub-color05); line-height: 1.5; text-align: center; }
.c-footer_contents__body__jikanhyo .timetable { margin-bottom: 30px; text-align: center; }
.c-footer_contents__body__jikanhyo .annotation { margin-bottom: 30px; }
.c-footer_contents__body__jikanhyo .annotation .--critical { color: var(--sub-color05); }
.c-footer_contents__body__jikanhyo .note { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.c-footer_contents__body__jikanhyo .note__item { position: relative; height: 100px; background: var(--base-color03); border: 1px solid var(--main-color); text-align: center; }
.c-footer_contents__body__jikanhyo .note__item::before, .c-footer_contents__body__jikanhyo .note__item::after { position: absolute; inset: 0; content: ""; display: block; background: var(--base-color03); }
.c-footer_contents__body__jikanhyo .note__item::before { top: -1px; bottom: -1px; left: 10px; right: 10px; }
.c-footer_contents__body__jikanhyo .note__item::after { top: 10px; bottom: 10px; left: -1px; right: -1px; }
.c-footer_contents__body__jikanhyo .note__item span { position: absolute; top: 50%; left: 50%; z-index: 1; width: 100%; font-size: 19px; font-weight: 700; transform: translate(-50%, -50%); }
.c-footer_copyright { padding: 1rem; color: var(--base-color03); background: var(--main-color02); text-align: center; }
@media (min-width: 992px) {
	.c-footer_contents__body { flex-direction: row; justify-content: space-between; }
	.c-footer_contents__body__info { width: 30%; }
	.c-footer_contents__body__jikanhyo { width: 65%; }
	.c-footer_contents__body__jikanhyo .note { gap: 60px; }
	.c-footer_contents__body__jikanhyo .note__item { height: 80px; }
	.c-footer_contents__body__jikanhyo .note__item span { font-size: 21px; }
}