@charset "UTF-8";
/* home.css — auto-split from style.css (home) */


/* ===================== hero ===================== */
/* 固定ヘッダーの下から画像を始める。
   ヒーロー画像は PC(2000×1100)・SP(780×900) とも上端近くまで意匠（金の枠線）が入っており、
   ヘッダーに重ねると枠の上辺が隠れてしまう。
   ヘッダーの高さは PC と SP で違うので、SP 側は下のブロックで --header-h-sp に差し替える。 */
.hero{position:relative;padding-top:var(--header-h);}
.hero__bg img{width:100%;height:auto;aspect-ratio:1500/754;object-fit:cover;}
.hero__title{
  /* 上余白を足した分ずれないよう、画像部分だけを基準に中央へ置く
     （top の % は padding を含む箱の高さ基準なので、余白を引いてから 47% を取る） */
  position:absolute;left:50%;top:calc(var(--header-h) + (100% - var(--header-h)) * 0.47);transform:translate(-50%,-50%);
  width:max-content;max-width:92%;
  font-family:var(--f-min);font-weight:500;
  font-size:clamp(28px,3.73vw,56px);
  line-height:1.6;letter-spacing:.02em;
  color:var(--c-ink);text-align:center;
}
.br-sp{display:none;}
.hero__title .ttl-sp{display:none;}   /* 既定(PC)＝PC用タイトルを表示 */
/* 標準フィールド：英字ラベル（既定ON）／サブタイトル。埋めた時だけ表示（既定は空＝非表示） */
.hero__label{margin:0;padding:20px 0 0;text-align:center;font-size:14px;letter-spacing:.12em;color:var(--c-green,#628b74);}
.hero__sub{margin:0;padding:8px 16px 0;text-align:center;font-family:var(--f-min);font-size:17px;line-height:1.6;color:var(--c-ink);}
.hero__sub-en{margin:0;padding:2px 16px 20px;text-align:center;font-size:13px;letter-spacing:.06em;color:var(--c-green,#628b74);}

/* ===================== concept ===================== */
.concept{padding:61px 0 133px;}
.concept__inner{
  position:relative;
  width:min(100%,1500px);
  margin:0 auto;
  aspect-ratio:1500/761;
  container-type:inline-size;
}
.concept__text{position:absolute;left:36.4%;top:17%;width:44%;}
.concept__text .label{margin-bottom:1.87cqw;font-size:1.07cqw;}
.concept__head{
  font-family:var(--f-min);font-weight:400;
  font-size:3.2cqw;line-height:1.5;color:var(--c-ink);white-space:nowrap;
}
.concept__lead{
  margin-top:3.5cqw;
  font-size:2.13cqw;line-height:1.56;color:var(--c-ink);white-space:nowrap;
}
/* 標準フィールド：サブタイトル（見出しの下）／サブタイトル英語（さらに下・小さめ） */
.concept__sub{margin-top:2.4cqw;font-family:var(--f-min);font-size:2.13cqw;line-height:1.56;color:var(--c-ink);white-space:nowrap;}
.concept__sub-en{margin-top:.6cqw;font-size:1.5cqw;letter-spacing:.06em;color:var(--c-green,#628b74);}
.concept__photos{position:absolute;inset:0;}
.concept__photo{position:absolute;object-fit:cover;}
.concept__photo--a{left:0;   top:7.75%; width:30.8%; height:91%;}     /* concept-1 462x693 @0,874 */
.concept__photo--b{left:80.7%;top:0;     width:19.3%; height:40.7%;}   /* concept-3 289x310 @1211,815 */
.concept__photo--c{left:56.2%;top:66%;   width:37.8%; height:34%;}     /* concept-2 567x259 @843,1317 */

/* concept 写真スライダー（枠は .concept__photo--a/b/c のまま。中身だけ横スライドで無限ループ） */
.concept-slider{overflow:hidden;}
.concept-slider__track{display:flex;width:100%;height:100%;}
.concept-slider__slide{flex:0 0 100%;width:100%;height:100%;object-fit:cover;display:block;}

/* ===================== message (帯) =====================
   帯の背景色は編集画面で選べる。section の inline style が
   --msg-bg / --msg-fg / --msg-icon-filter をセットする（inc/site-blocks.php）。
   未設定時のフォールバック＝従来の緑＋白文字なので、既存の見た目は変わらない。
   --msg-fg は背景とのコントラストで自動決定（白 or 本文色）。 */
.message{background:var(--msg-bg,var(--c-green));overflow:visible;margin-bottom:157px;}
/* 帯の高さ＝「Figma比率(1500:822)」と「本文の高さ」の高いほう。
   本文（下の ::before と同じグリッドセルに重ねる）が長くなると帯が縦に伸びるので、
   編集画面でどれだけ本文を足しても文字が帯からはみ出さない。 */
.message__inner{
  position:relative;
  width:min(100%,1500px);margin:0 auto;
  display:grid;
  container-type:inline-size;
}
/* 帯の最小高さを作る下敷き（1500:822 → 54.8%）。中身は空なので見た目には出ない */
.message__inner::before{content:"";grid-area:1/1;padding-top:54.8%;}
/* 医師写真: 元画像の比率(636:812)を保ったまま、Figma比 42.4% から10%縮小＝38.16%。
   帯の中で縦中央に置くので、本文が伸びて帯が高くなっても上下の余白が均等に保たれる
   （帯が最小＝Figma比率のときの上余白は約44px＝Figmaの59pxとほぼ同じ位置）。 */
.message__photo{
  position:absolute;right:2.8%;top:50%;transform:translateY(-50%);
  width:38.16%;aspect-ratio:636/812;
}
.message__photo picture,.message__photo img{width:100%;height:100%;display:block;}
.message__photo img{object-fit:cover;}
/* 下敷き(::before)と同じセルに重ねる。余白は % 指定＝帯の幅基準なので、
   高さが伸びても左位置・上下の余白は元のデザインどおりスケールする */
.message__body{
  grid-area:1/1;align-self:start;justify-self:start;
  margin:9.33% 0 5.6% 13%;width:28%;z-index:2;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  color:var(--msg-fg,var(--c-white));
}
.message__lead{display:flex;flex-direction:column;align-items:center;gap:0.53cqw;}
/* .label--light の色指定より詳細度を上げて帯の文字色に追従させる（罫線は currentColor） */
.message__lead .label{font-size:1.07cqw;color:var(--msg-fg,var(--c-white));}
.message__catch{
  font-family:var(--f-min);font-weight:400;
  font-size:2.27cqw;line-height:1.68;color:var(--msg-fg,var(--c-white));white-space:nowrap;
}
/* 標準フィールド：サブタイトル（キャッチの下）。埋めた時だけ表示 */
.message__sub{margin:0.8cqw 0 0;font-size:1.47cqw;line-height:1.5;color:var(--msg-fg,var(--c-white));}
.message__sub-en{margin:0.3cqw 0 0;font-size:1.07cqw;letter-spacing:.06em;color:var(--msg-fg,var(--c-white));opacity:.85;}
/* 本文は左揃え（長い日本語の中央揃えは行頭が揃わず読みにくいため）。
   ラベル・見出し・ボタンは中央のまま。
   align-self:stretch がないと align-items:center で本文が内容幅まで縮む */
.message__text{
  align-self:stretch;
  margin:5.27cqw 0 3.2cqw;
  font-size:1.33cqw;line-height:1.45;text-align:left;color:var(--msg-fg,var(--c-white));
}
/* ボタンは帯の反転（背景=文字色 / 文字=帯の背景色）＝どの背景色でも必ず読める。
   .btn--white より詳細度が高いので上書きされる。 */
.message .btn{
  width:22.67cqw;min-width:0;padding:1.07cqw 1.6cqw;
  font-size:1.33cqw;line-height:1.45;gap:1.6cqw;letter-spacing:.1em;
  background:var(--msg-fg,var(--c-white));color:var(--msg-bg,var(--c-green));
}
/* 矢印は緑固定の画像。暗いボタンに載る時だけ白へ飛ばす（PHPが filter を渡す） */
.message .btn__icon{width:2.13cqw;height:0.53cqw;filter:var(--msg-icon-filter,none);}

/* ===================== schedule (beige) ===================== */
.schedule{background:var(--c-beige);padding:90px 0 96px;}
.schedule__inner{width:min(100% - 48px,1132px);margin:0 auto;}
.schedule__head{margin-bottom:64px;display:flex;flex-direction:column;gap:8px;}
.schedule__grid{position:relative;}
.schedule__month{display:flex;align-items:center;gap:22px;margin-bottom:20px;}
.schedule__month-num{font-family:var(--f-lora);font-size:87px;line-height:1;letter-spacing:.05em;}
.schedule__slash{width:21px;height:51px;}
.schedule__month-en{display:flex;flex-direction:column;font-family:var(--f-lora);}
.schedule__year{font-size:25px;line-height:1.28;letter-spacing:.1em;}
.schedule__mon{font-size:36px;line-height:1.28;letter-spacing:.1em;}

.reception{
  position:absolute;right:0;top:0;
  display:flex;align-items:stretch;
  width:374px;height:98px;
  padding:16px 0;
  border:1px solid var(--c-ink);
}
.reception__label{
  display:flex;align-items:center;justify-content:center;
  width:128px;flex:none;
  background:var(--c-cal);
  font-family:var(--f-min);font-weight:500;font-size:24px;
}
.reception__times{
  flex:1;display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding:0 16px 0 21px;
}
.reception__row{display:flex;align-items:center;justify-content:space-between;}
.reception__jp{font-family:var(--f-min);font-weight:500;font-size:20px;letter-spacing:.1em;}
.reception__val{font-family:var(--f-lora);font-size:24px;letter-spacing:.1em;}

.calendar{margin-top:8px;border:1px solid var(--c-beige2);}
.calendar__weektitle,.calendar__body{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.calendar__weektitle{background:var(--c-beige2);border-bottom:2px solid var(--c-beige2);}
.cal-th{
  background:var(--c-beige);
  padding:12px 0 8px;text-align:center;
  font-family:var(--f-min);font-weight:600;font-size:22px;line-height:1;
}
.cal-th--sun{color:var(--c-sun);}
.cal-th--sat{color:var(--c-sat);}
.calendar__body{gap:2px;background:var(--c-beige2);padding-top:2px;}
.cal-day{
  background:var(--c-cal);
  min-height:110px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:10px;padding:10px 0;
}
.cal-day__date{font-family:var(--f-lora);font-size:22px;line-height:1.27;letter-spacing:.1em;}
.cal-day__text{font-family:var(--f-min);font-size:20px;line-height:1.45;letter-spacing:.1em;color:var(--c-ink);}
.cal-day--sun .cal-day__date{color:var(--c-sun);}
.cal-day--sat .cal-day__date{color:var(--c-sat);}
.cal-day--muted .cal-day__date,.cal-day--muted .cal-day__text{color:#000;opacity:.28;}

.schedule__btnwrap{display:flex;justify-content:flex-end;margin-top:56px;}
.schedule__btnwrap .btn{background:var(--c-cal);color:var(--c-ink);}

/* ===================== information ===================== */
.information{background:var(--c-white);padding:108px 0;}
.information__inner{width:min(100% - 48px,890px);margin:0 auto;}
.information__btnwrap{display:flex;justify-content:center;margin-top:81px;}
@media (max-width:1023px){
  .schedule__inner{width:min(100% - 40px,1132px);}
  .cal-th{font-size:16px;}
  .cal-day{min-height:88px;}
  .cal-day__date{font-size:18px;}
  .cal-day__text{font-size:14px;}
  .reception__label{font-size:20px;width:104px;}
  .reception__val{font-size:20px;}
}

@media (max-width:767px){

  /* hero — 大きめ画像(390:650)に見出しを重ねる（左・縦中央）Figma 4:10674 */
  /* 上余白はSPのヘッダー実高に差し替える（PCの112pxのままだと空きすぎる） */
  .hero{padding-top:var(--header-h-sp);}
  .br-sp{display:inline;}
  .hero__title .ttl-pc{display:none;}      /* スマホ＝PC用を隠しSP用を表示 */
  .hero__title .ttl-sp{display:inline;}
  .hero__bg img{aspect-ratio:390/475;height:auto;object-fit:cover;object-position:center;}   /* 画像本体は475px（白フェードは画像側でトリミング済）。下にグレー背景を出す */
  .hero__title{
    /* PCと同じ考え方。上余白を引いた「画像部分」の縦中央に置く */
    position:absolute;left:25px;top:calc(var(--header-h-sp) + (100% - var(--header-h-sp)) * 0.5);transform:translateY(-50%);
    text-align:left;font-size:45px;line-height:1.5;white-space:normal;width:auto;max-width:none;
  }

  /* concept — SP：写真A→見出し→リード＋写真B→写真C（Figma 4:10529 準拠） */
  .concept{padding:25px 0 60px;}   /* 上＝hero下のグレー背景（白フェード除去分を伸ばす） / 下＝次セクション60px */
  .concept__inner{position:static;aspect-ratio:auto;display:flex;flex-direction:column;container-type:normal;}
  .concept__text{position:static;width:auto;padding:0 25px;margin-top:31px;}   /* 写真A下→Conceptラベル：Figma実測 約31px */
  .concept__text .label{font-size:14px;margin-bottom:10px;}
  .concept__head{font-size:24px;line-height:1.42;white-space:normal;}
  /* リード／サブタイトルは写真Bの左側に収める（＝文字が写真に被らない）。
     Figma実測値(216px/196px)を上限に、「テキスト枠 − 写真Bの幅 − 余白」を超えないよう頭打ちにする。
     400px超では従来どおり実測値のまま。狭い画面でだけ自動的に細くなる。
     （--cpb-w / --cpb-gap は下の .concept で定義。写真Bの幅と共通の値） */
  .concept__lead{position:relative;z-index:1;margin-top:20px;font-size:18px;line-height:1.56;white-space:normal;max-width:min(216px, 100% - var(--cpb-w) - var(--cpb-gap));}
  .concept__sub{position:relative;z-index:1;margin-top:20px;font-size:18px;line-height:1.56;white-space:normal;max-width:min(196px, 100% - var(--cpb-w) - var(--cpb-gap));}
  .concept__photo{position:static;height:auto;object-fit:cover;display:block;}
  .concept__photo--a{width:223px;max-width:60%;aspect-ratio:223/293;margin-left:25px;}
  /* 写真Bの幅（テキスト幅の計算にも使うので変数で1か所に集約）
       〜400px : 35.25vw（＝400pxで141px）で画面幅に比例して縮小
       400〜500px: 141px 固定（Figma SP実測）
       500〜768px: 31px+22vw で 200px まで比例拡大
     拡大分だけ margin-top を引き上げ、下(photo--c)の位置を一定に保つ */
  .concept{--cpb-w:clamp(min(141px, 35.25vw), 31px + 22vw, 200px);--cpb-gap:12px;}
  .concept__photo--b{width:var(--cpb-w);max-width:none;aspect-ratio:141/151;align-self:flex-end;margin:clamp(-120px, 60px - 23.5vw, -58px) 25px 0 0;}
  .concept__photo--c{width:252px;max-width:68%;aspect-ratio:252/124;margin:18px 0 0 25px;}

  /* message */
  .message{margin-bottom:0;}
  .message__inner{container-type:normal;display:flex;flex-direction:column-reverse;padding-bottom:56px;}
  /* SPは縦積み。PC用の「最小高さの下敷き」は flex アイテムになって巨大な余白を作るので消す */
  .message__inner::before{display:none;}
  /* SPは横幅100%で、画像の原寸比のまま貼る（枠に合わせたトリミングをしない）。
     ・aspect-ratio:auto … PCの 636:812 と、以前の 390:498 の固定枠を両方打ち消す
     ・height:auto      … 下の共通指定 height:100% を戻す（これが残ると枠側の高さに潰れる）
     高さが画像で決まるので object-fit は効かなくなる＝上下も左右も切れない。
     PCの縦中央寄せ(translateY)も必ず戻す（static でも transform は効くため） */
  .message__photo{position:static;right:auto;top:auto;transform:none;width:100%;aspect-ratio:auto;}
  .message__photo picture,.message__photo img{height:auto;}
  .message__body{margin:56px auto 0;width:min(100% - 50px,340px);}
  .message__lead{gap:8px;}
  .message__lead .label{font-size:14px;}
  .message__catch{font-size:24px;line-height:1.42;}
  .message__text{font-size:17px;margin:28px 0 32px;}
  .message .btn{width:340px;padding:16px 24px;font-size:16px;line-height:1.45;gap:24px;}
  .message .btn__icon{width:32px;height:8px;}

  /* schedule */
  .schedule{padding:56px 0 64px;}
  .schedule__inner{width:min(100% - 50px,340px);}
  .schedule__head{margin-bottom:32px;}
  .schedule__month-num{font-size:56px;}
  .schedule__slash{height:34px;}
  .schedule__year{font-size:18px;}
  .schedule__mon{font-size:26px;}
  .reception{position:static;width:auto;height:auto;margin-bottom:16px;}
  .reception__label{width:90px;font-size:15px;padding:8px 0;}
  .reception__times{padding:8px 12px;}
  .reception__jp{font-size:14px;}
  .reception__val{font-size:15px;}
  .cal-th{font-size:11px;padding:6px 0 4px;}
  .cal-day{min-height:52px;gap:4px;padding:6px 0;}
  .cal-day__date{font-size:11px;}
  .cal-day__text{font-size:10px;}
  .schedule__btnwrap{justify-content:center;margin-top:40px;}

  /* information */
  .information{padding:64px 0;}
  .information__inner{width:min(100% - 50px,340px);}
  .information__btnwrap{margin-top:40px;}
  .information__btnwrap .btn{letter-spacing:.2em;}
}

@media (max-width:390px){
  .hero__title{font-size:11.5vw;left:6.4vw;}
}

/* Message 本文の段落(P)スペース（wpautop対応） */
.message__text p{margin:0;}
.message__text p + p{margin-top:1em;}

/* 診療スケジュール：当月写真 + 3ヶ月ポップアップ */
.schedule__photo-btn{display:block;position:relative;width:100%;padding:0;border:0;background:none;cursor:pointer;margin-top:8px;}
.schedule__photo{width:100%;height:auto;display:block;border:1px solid var(--c-beige2);}
.schedule__photo-zoom{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;background:rgba(19,33,25,.7);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1;}
.schedule__photo-btn:hover .schedule__photo-zoom{background:var(--c-green);}
.sch-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .32s ease;}
.sch-modal.is-open{opacity:1;pointer-events:auto;}
.sch-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.6);}
.sch-modal__inner{position:relative;background:#fff;border-radius:8px;max-width:820px;width:100%;max-height:90vh;overflow:auto;padding:56px 32px 32px;transform:translateY(12px);transition:transform .32s ease;}
.sch-modal.is-open .sch-modal__inner{transform:translateY(0);}
/* 閉じる✕：線は細く・アイコンは大きめ（CSS描画） */
.sch-modal__close{position:absolute;top:14px;right:16px;width:44px;height:44px;border:0;background:none;font-size:0;cursor:pointer;}
.sch-modal__close::before,.sch-modal__close::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:1.5px;background:var(--c-ink);border-radius:1px;}
.sch-modal__close::before{transform:translate(-50%,-50%) rotate(45deg);}
.sch-modal__close::after{transform:translate(-50%,-50%) rotate(-45deg);}
.sch-modal__grid{display:flex;flex-direction:column;gap:32px;}   /* 3ヶ月を縦並び */
.sch-modal__item{margin:0;}
.sch-modal__item figcaption{font-family:var(--f-min);font-weight:600;font-size:18px;margin-bottom:10px;color:var(--c-ink);}
.sch-modal__item img{width:100%;height:auto;display:block;}
.sch-modal__empty{display:flex;align-items:center;justify-content:center;aspect-ratio:1134/740;background:#f0f0f1;color:#999;font-family:var(--f-min);}
@media (max-width:767px){
  .sch-modal__inner{padding:48px 16px 20px;}
  .sch-modal__grid{grid-template-columns:1fr;gap:28px;}
  .message__text p + p{margin-top:.8em;}
}

/* 診療スケジュール：画像モード（背景＋画像） */
.schedule__image{margin:0 0 8px;}
.schedule__image img{width:100%;height:auto;display:block;}
@media (max-width:767px){
  .schedule__image{width:100vw;margin-left:calc(50% - 50vw);}   /* SPは全幅で少しでも大きく */
}