@charset "UTF-8";
/* =========================================================
   page.css ｜ 下層ページ共通パーツ
   （パンくず／ページ見出し／要点ボックス／本文組／表／
     受診フロー図／FAQ／注記／要確認バッジ）
   ========================================================= */

/* ---- ページ見出し（下層のファーストビュー） ---- */
/* ページ見出し：写真の上にブラウンのオーバーレイを重ね、文字は白抜き。
   全ページがアイボリー基調でのっぺりするのを、この帯で断ち切る。
   濃度はCTA帯（rgba(64,58,48,.72)）と揃えてサイト内でトーンを統一 */
.phead{position:relative;overflow:hidden;background:#403A30}
.phead .ph{position:absolute;inset:0;background-size:cover;background-position:center 58%}
.phead .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(64,58,48,.78) 0%,rgba(64,58,48,.70) 55%,rgba(64,58,48,.80) 100%)}
.phead-in{position:relative;max-width:1200px;margin:0 auto;padding:66px 96px 58px;display:flex;flex-direction:column;gap:14px}
.phead .lbl{font-family:'Noto Serif JP',serif;font-weight:500;font-size:16px;letter-spacing:.24em;color:#EBD9AF}
.phead h1{font-family:'Noto Serif JP',serif;font-weight:400;font-size:38px;line-height:1.5;letter-spacing:.1em;color:#FFFFFF;word-break:keep-all;line-break:strict;text-wrap:pretty}
.phead .lead{font-size:16px;line-height:2;color:#E4DDD1;max-width:760px}

/* ---- アンカーで飛んだとき、追従ヘッダーに見出しが隠れないようにする ----
   ヘッダー実測：PC 通常174px／縮小112px、768〜1023px 縮小129px、SP 縮小60px。
   アンカー移動時は必ずスクロール済み＝縮小状態になるため、縮小時の高さ＋余白で確保する */
[id]{scroll-margin-top:132px}

/* ---- パンくず ---- */
.crumb{background:#FBF8F2;border-bottom:1px solid #EDE6DA}
.crumb ol{max-width:1200px;margin:0 auto;padding:12px 96px;list-style:none;display:flex;flex-wrap:wrap;gap:8px;font-size:16px;color:#8C8378}
.crumb li{display:flex;align-items:center;gap:8px}
.crumb li+li::before{content:"／";color:#C9BFAE}
.crumb a{color:#8C8378}
.crumb a:hover{color:#A98B4E}
.crumb [aria-current]{color:#403A30}

/* ---- セクション枠 ---- */
.sect{padding:72px 96px;max-width:1200px;margin:0 auto}
.sect.tight{padding-top:46px}
.sect.ivory{background:#FBF8F2;max-width:none}
.sect.white{background:#fff;max-width:none}
.sect.white>*,.sect.ivory>*{max-width:1008px;margin-left:auto;margin-right:auto}
.h2{font-family:'Noto Serif JP',serif;font-weight:400;font-size:28px;line-height:1.6;letter-spacing:.1em;color:#403A30;margin:0 0 8px;line-break:strict;text-wrap:pretty}
/* margin の左右を 0 にすると .sect.white>* / .sect.ivory>* の
   margin-left/right:auto（＝中央寄せ）を打ち消してしまうため auto を維持する */
.h2+.h2sub{font-size:16px;color:#8C8378;margin:0 auto 26px}
.h3{font-family:'Noto Serif JP',serif;font-weight:500;font-size:20px;line-height:1.7;letter-spacing:.06em;color:#403A30;margin:34px 0 10px;line-break:strict;text-wrap:pretty}

/* ---- 本文 ---- */
.prose p{font-size:16px;line-height:2.05;margin:0 0 18px;color:#403A30}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:500;color:#403A30;background:linear-gradient(transparent 66%,#F0E3C9 66%)}
.prose ul{margin:0 0 18px;padding-left:1.15em}
.prose li{font-size:16px;line-height:2;margin-bottom:6px}

/* ---- 要点ボックス（結論先出し。AI検索・拾い読み対策） ---- */
.keypoints{background:#fff;border:1px solid #E4DCCC;border-left:3px solid #B8985A;padding:26px 30px;margin:0 0 40px}
.keypoints .t{font-family:'Noto Serif JP',serif;font-size:16px;letter-spacing:.1em;color:#A98B4E;margin:0 0 12px}
.keypoints ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.keypoints li{font-size:16px;line-height:1.85;padding-left:26px;position:relative}
.keypoints li::before{content:"";position:absolute;left:4px;top:.72em;width:9px;height:9px;border:1px solid #B8985A;border-radius:50%}

/* ---- 表 ---- */
.tbl{width:100%;border-collapse:collapse;font-size:16px;background:#fff;border:1px solid #E4DCCC}
.tbl caption{caption-side:top;text-align:left;font-size:16px;color:#8C8378;padding:0 0 10px}
.tbl th,.tbl td{padding:14px 16px;border-bottom:1px solid #EDE6DA;text-align:left;vertical-align:top;line-height:1.75;
  text-wrap:pretty}                      /* 最終行に1文字だけ残る「ぶら下がり」を避ける（対応ブラウザのみ） */
/* 行見出しは短いラベルなので折り返さない（「内服による治／療」を防ぐ） */
.tbl tbody th{white-space:nowrap}
.tbl .sub{white-space:normal}
.tbl thead th{background:#F4EDE2;color:#6B6355;font-weight:400;font-size:16px;letter-spacing:.06em;white-space:nowrap}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-family:'Noto Serif JP',serif;font-size:17px;white-space:nowrap}
.tbl .nm{font-weight:500}
.tbl .sub{display:block;font-size:16px;color:#8C8378;margin-top:3px;line-height:1.7}
.tbl-wrap{position:relative}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* SPでのスクロール案内。PC/タブレットでは非表示 */
.tbl-hint{display:none}
.tbl-hint[hidden]{display:none!important}

/* ---- 注記 ---- */
.notebox{background:#F4EDE2;border:1px solid #E4DCCC;padding:22px 26px;font-size:16px;line-height:1.95;color:#6B6355;margin-top:22px}
.notebox .t{font-size:16px;color:#403A30;letter-spacing:.06em;margin:0 0 8px}
.notebox ul{margin:0;padding-left:1.15em}
.notebox li{margin-bottom:5px}
.notebox li:last-child{margin-bottom:0}

/* ---- 要確認バッジ（カンプ用。公開前に外す） ---- */
.todo{display:inline-block;vertical-align:middle;margin-left:6px;padding:2px 8px;border:1px dashed #D14343;border-radius:3px;
  font-size:16px;letter-spacing:.06em;color:#C62828;background:#FDECEC;white-space:nowrap;line-height:1.6;font-weight:400}

/* ---- 次のページへの導線 ---- */
.nextnav{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.nextnav a{background:#fff;border:1px solid #E4DCCC;padding:22px 24px;display:flex;flex-direction:column;gap:6px;color:#403A30;transition:border-color .25s,transform .3s}
.nextnav a:hover{border-color:#C9AE72;transform:translateY(-3px);color:#403A30}
.nextnav .en{font-size:16px;letter-spacing:.2em;color:#A98B4E}
.nextnav .ja{font-family:'Noto Serif JP',serif;font-size:17px;letter-spacing:.06em}

/* =========================================================
   受診フロー図（診療案内ページ）
   先生ご依頼：上から矢印でつなぐ／第1・第2…の段階表示／
   飛ばせる工程は2本目の矢印でスキップ可能に見せる
   ========================================================= */
.flow{display:flex;flex-direction:column}

/* カード：左から「目安時間の丸」「STEP番号＋見出し＋アイコン」「説明」の3カラム
   （先生ご依頼：横に丸で目安時間を入れる） */
.flow-step{display:grid;grid-template-columns:100px 270px minmax(0,1fr);gap:30px;align-items:start;
  background:#fff;border:1px solid #E4DCCC;border-radius:4px;padding:30px 36px}

/* 目安時間の丸 */
.fs-time{width:100px;height:100px;border-radius:50%;border:1px solid #C9AE72;background:#FBF8F2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:none}
/* 数字は大きく、単位（分）はその横に小さく。「ほど」は下の行 */
.fs-time .v{display:flex;align-items:baseline;gap:1px;
  font-family:'Noto Serif JP',serif;font-weight:400;font-size:28px;line-height:1;
  letter-spacing:.02em;color:#8B6F3E}
.fs-time .v .unit{font-family:'Noto Sans JP',sans-serif;font-size:16px;letter-spacing:0;color:#8B6F3E}
.fs-time .u{font-size:16px;line-height:1;letter-spacing:.04em;color:#8C8378}
/* A＝「数字＋見出し」の行、B＝アイコン。AとBを中央で揃える（左カラム内で中央寄せ）
   カードごとに見出しの長さが違うため、A自身の幅を基準にするとアイコンのX位置が
   カードごとにズレる。左カラムの中心に両方を置くことで、AとBの中心を一致させつつ
   全カードでアイコンのX位置も揃う */
.fs-head{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.fs-label{display:flex;align-items:baseline;justify-content:center;gap:14px;margin:0;min-height:38px}
/* 番号：明朝＋ゴールドの下線。数字だけを際立たせる */
/* 数字は字幅が一定でないため、欄の幅を固定して見出しの左端も揃える */
.fs-no{font-family:'Noto Serif JP',serif;font-weight:400;font-size:30px;line-height:1;color:#8B6F3E;
  border-bottom:2px solid #B8985A;padding-bottom:3px;min-width:24px;text-align:center}
.fs-ttl{font-family:'Noto Serif JP',serif;font-weight:500;font-size:20px;letter-spacing:.06em;
  line-height:1.6;color:#403A30;line-break:strict}
.fs-ico{width:52px;height:52px;color:#B8985A;flex:none}
.fs-txt{margin:0;padding-top:4px;font-size:16px;line-height:2;color:#4A4339}

/* ステップ間の矢印：小さめの▼で上品に */
.flow-arw{height:34px;display:flex;align-items:center;justify-content:center}
.flow-arw::after{content:"";width:0;height:0;
  border-left:9px solid transparent;border-right:9px solid transparent;border-top:11px solid #6B5B43}

/* スキップ用の2本目の矢印（右側を迂回して STEP をひとつ飛ばす）
   ボーダーの「⊃」字＋左向き三角で、本線と別ルートがあることを示す */
.flow-branch{position:relative;padding-right:252px}
.fb{position:absolute;right:162px;top:10px;bottom:10px;width:84px;
  border:1px solid #C9AE72;border-left:0;border-radius:0 12px 12px 0;pointer-events:none}
.fb::after{content:"";position:absolute;left:-7px;bottom:-5px;
  border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:7px solid #C9AE72}
.fb-cap{position:absolute;right:0;top:50%;transform:translateY(-50%);width:150px;margin:0;
  font-size:16px;line-height:1.8;color:#A98B4E}

/* 省略できる工程は破線＋バッジで示す */
.flow-step.skippable{border-style:dashed;border-color:#C9AE72}
/* ※ 本文16px以上ルールの例外。読み物ではなく状態を示すバッジのため小さくしている（ユーザー指示） */
.flow-step.skippable .fs-head::after{content:"省略できる場合があります";align-self:center;
  padding:3px 11px;border:1px solid #C9AE72;border-radius:2px;
  font-size:14px;letter-spacing:.04em;color:#A98B4E;white-space:nowrap;line-height:1.7}

/* =========================================================
   FAQ（アコーディオン）
   ========================================================= */
.faq-group{margin-bottom:44px}
.faq-group>.h3{margin-top:0}
.faq-item{background:#fff;border:1px solid #E4DCCC;margin-bottom:12px}
.faq-item summary{list-style:none;cursor:pointer;display:flex;gap:16px;align-items:flex-start;padding:20px 26px;
  font-size:16px;line-height:1.8;letter-spacing:.02em;color:#403A30;position:relative;padding-right:56px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:"Q";font-family:'Noto Serif JP',serif;font-size:17px;color:#B8985A;flex:0 0 auto;line-height:1.7}
.faq-item summary::after{content:"";position:absolute;right:26px;top:28px;width:10px;height:10px;
  border-right:1px solid #A98B4E;border-bottom:1px solid #A98B4E;transform:rotate(45deg);transition:transform .25s}
.faq-item[open] summary::after{transform:rotate(-135deg)}
.faq-a{display:flex;gap:16px;padding:0 26px 24px;border-top:1px solid #F0EADF;margin-top:-1px}
.faq-a::before{content:"A";font-family:'Noto Serif JP',serif;font-size:17px;color:#A98B4E;flex:0 0 auto;padding-top:18px;line-height:1.7}
.faq-a .bd{flex:1;padding-top:18px}
.faq-a p{font-size:16px;line-height:2;margin:0 0 12px;color:#4A4339}
.faq-a p:last-child{margin-bottom:0}
.faq-a ul{margin:0 0 12px;padding-left:1.15em;font-size:16px;line-height:1.95;color:#4A4339}

/* =========================================================
   予約ページ
   ========================================================= */
.resv-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:start}
.resv-grid>*{min-width:0}
.resv-card{background:#fff;border:1px solid #E4DCCC;padding:32px 34px;display:flex;flex-direction:column;gap:16px}
.resv-card .ttl{font-family:'Noto Serif JP',serif;font-size:21px;letter-spacing:.08em}
.resv-card p{font-size:16px;line-height:1.95;color:#4A4339;margin:0}
.resv-embed{height:300px;background:#F4EDE2;border:1px dashed #C9AE72;display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:16px;line-height:1.9;color:#8C8378;letter-spacing:.04em;padding:20px}
.resv-tel{flex-wrap:wrap;font-family:'Noto Serif JP',serif;font-size:32px;letter-spacing:.02em;color:#403A30;display:flex;align-items:center;gap:12px}

/* =========================================================
   医師紹介（当院について）
   ========================================================= */
.doctor{display:grid;grid-template-columns:340px minmax(0,1fr);gap:44px;align-items:start}
.doctor>*{min-width:0}
/* 院長写真の枠。3:4で固定し、img を入れれば枠いっぱいにトリミングされる */
.doctor-ph{aspect-ratio:3/4;background:#E4DCCC;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:16px;color:#8C8378;letter-spacing:.06em}
/* 枠の中に img を入れる場合：枠いっぱいに敷く */
.doctor-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%}
/* img を直接置く場合：枠と同じ 3:4 に自分でなる（height:100% にすると
   グリッド行の高さまで伸びて aspect-ratio が効かなくなるので height:auto にする） */
.doctor>img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center 30%;background:#E4DCCC}
.doctor .nm{font-family:'Noto Serif JP',serif;font-size:26px;letter-spacing:.1em;margin:0 0 4px}
.doctor .ro{font-size:16px;color:#8C8378;letter-spacing:.06em;margin:0 0 22px}

/* 外部サイトへのボタン（関連クリニックなど）。リンクと分かる見た目にする */
.btn-ext{display:inline-flex;align-items:center;gap:20px;margin-top:26px;
  padding:20px 30px;background:#fff;border:1px solid #C9AE72;border-radius:4px;color:#403A30;
  transition:background .25s,border-color .25s,transform .3s,box-shadow .3s}
.btn-ext:hover{background:#B8985A;border-color:#B8985A;color:#fff;transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(64,58,48,.16)}
.btn-ext .bd{display:flex;flex-direction:column;gap:5px;min-width:0}
.btn-ext .nm{font-family:'Noto Serif JP',serif;font-size:18px;letter-spacing:.06em;line-height:1.5}
.btn-ext .sb{font-size:16px;letter-spacing:.04em;color:#A98B4E;line-height:1.5}
.btn-ext:hover .sb{color:#F5E7C4}
.btn-ext .ico{flex:none;color:#B8985A}
.btn-ext:hover .ico{color:#fff}

/* 理念のリード（当院について） */
.credo{background:#fff;border:1px solid #E4DCCC;padding:48px 54px;text-align:center}
.credo .en{font-size:16px;letter-spacing:.24em;color:#A98B4E;margin:0 0 18px}
.credo .big{font-family:'Noto Serif JP',serif;font-weight:400;font-size:34px;line-height:1.7;letter-spacing:.1em;color:#403A30;margin:0;word-break:keep-all}
.credo .rule{margin:26px auto 22px}
.credo p{font-size:16px;line-height:2.1;color:#4A4339;margin:0;text-align:left}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:1279px){
  .todo{white-space:normal}
  .phead-in,.crumb ol,.sect{padding-left:40px;padding-right:40px}
  .phead h1{font-size:33px}
  .flow-step{grid-template-columns:88px 230px minmax(0,1fr);gap:22px;padding:26px 26px}
  .fs-time{width:88px;height:88px}
  .fs-time .v{font-size:25px}
  .flow-branch{padding-right:206px}
  .fb{right:134px;width:66px}
  .fb-cap{width:128px}
}
@media (max-width:1023px){
  [id]{scroll-margin-top:150px}   /* この帯はヘッダー縮小時 129px */
  .doctor{grid-template-columns:250px 1fr;gap:30px}
  .nextnav{grid-template-columns:1fr 1fr}
  .resv-grid{grid-template-columns:1fr}
  .credo{padding:40px 36px}
  .credo .big{font-size:28px}
}
@media (max-width:767px){
  [id]{scroll-margin-top:78px}    /* SPはナビが畳まれ、ヘッダー縮小時 60px */
  /* 注記バッジは nowrap のままだと狭い画面で最小幅を押し上げるため折り返す */
  .todo{white-space:normal;margin-left:0;margin-top:4px}
  .phead-in{padding:38px 20px 34px;gap:11px}
  .phead h1{font-size:24px;letter-spacing:.06em}
  .phead .lead{font-size:16px;line-height:1.95}
  .crumb ol{padding:10px 20px;font-size:16px}
  .sect{padding:48px 20px}
  /* 字間.1emのままだと12文字前後の見出しが320〜375pxで2文字だけぶら下がる。
     サイズと字間をわずかに詰めて1行に収める */
  .h2{font-size:21px;letter-spacing:.05em}
  .h3{font-size:18px;margin-top:28px}
  .prose p,.prose li{font-size:16px;line-height:1.95}
  .keypoints{padding:20px 20px;margin-bottom:30px}
  .keypoints li{font-size:16px;padding-left:22px}
  .keypoints li::before{width:8px;height:8px}
  /* 表はSPで縮めず、横スクロールさせる（セルが潰れて読めなくなるのを防ぐ） */
  .tbl{font-size:16px;min-width:620px}
  .tbl th,.tbl td{padding:11px 14px}
  /* 表の上に重ねるポップアップ。スクロールすると .is-off が付いて消える */
  .tbl-hint{display:flex;align-items:center;gap:8px;
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    padding:11px 20px;border-radius:999px;z-index:2;pointer-events:none;
    background:rgba(64,58,48,.88);color:#FBF8F2;
    font-size:16px;letter-spacing:.04em;line-height:1;white-space:nowrap;
    box-shadow:0 8px 22px rgba(64,58,48,.28);
    transition:opacity .35s ease,visibility .35s ease}
  .tbl-hint::after{content:"→";color:#EBD9AF}
  .tbl-hint.is-off{opacity:0;visibility:hidden}
  .tbl .num{font-size:16px}
  .nextnav{grid-template-columns:1fr;gap:10px}
  .nextnav a{padding:16px 18px}
  .doctor{grid-template-columns:1fr;gap:22px}
  .doctor-ph,.doctor>img{max-width:230px}
  .credo{padding:30px 22px}
  .credo .big{font-size:23px;letter-spacing:.06em}
  .credo p{font-size:16px;line-height:1.95}
  .resv-tel{font-size:26px}
  .resv-card{padding:24px 22px}
  .btn-ext{display:flex;width:100%;gap:14px;padding:18px 20px;margin-top:22px}
  .btn-ext .nm{font-size:17px}
  .faq-item summary{font-size:16px;padding:16px 46px 16px 20px;gap:12px}
  .faq-item summary::after{right:20px;top:24px}
  .faq-a{padding:0 20px 20px;gap:12px}
  .faq-a p,.faq-a ul{font-size:16px}

  /* フロー図：SPは1列。丸 → 番号＋見出し＋アイコン → 説明の順に中央寄せで積む */
  .flow-step{grid-template-columns:1fr;gap:14px;padding:24px 22px 24px;justify-items:center}
  .fs-time{width:78px;height:78px}
  .fs-time .v{font-size:23px}
  .fs-head{gap:14px}
  .fs-txt{justify-self:stretch}
  .fs-no{font-size:26px;min-width:21px}
  .fs-ttl{font-size:18px}
  .fs-ico{width:42px;height:42px}
  .fs-txt{font-size:16px;line-height:1.95}
  .flow-arw{height:26px}
  .flow-arw::after{border-left-width:8px;border-right-width:8px;border-top-width:10px}
  .flow-branch{padding-right:0}
  .fb{display:none}
  .fb-cap{position:static;transform:none;width:auto;margin:12px 0 0;
    border-left:2px solid #C9AE72;padding:8px 0 8px 14px;font-size:16px}
}

/* ---- 320〜360px 級の小型端末（375px 以上には当てない） ---- */
@media (max-width:360px){
  .resv-tel{font-size:23px;gap:9px}
  .doctor-ph,.doctor>img{max-width:200px}
  .credo .big{font-size:21px}
}