/* しのづか眼科サイト
   正本 = ../_design_system.md
   独自の色・数値・装飾を発明しない。値は必ず変数から取る。 */

/* ============ トークン ============ */
:root{
  /* 色は医院マスタ design.palette が正本。assets/theme.css に医院ごとに生成する。
     ここに色を書き足さない（1医院に固有の色がテンプレートに残ると他院で事故になる） */
  --caution-text:#8a3512;   /* 注意（全医院共通） */
  --caution-face:#fdf5f0;
  --white:#ffffff;      /* カードなど、地から浮かせる面 */
  --tap:44px; --tap-bar:52px; --mark-radius:2px; --step-indent:44px; --list-indent:1.25em;

  /* 書体 */
  /* 端末の日本語書体を優先する。WebフォントのNoto系は使わない */
  --font-sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","YuGothic",
    "Yu Gothic",Meiryo,system-ui,sans-serif;
  /* 見出しも本文もゴシック1系統。明朝の見出しは「作られた感」が出るのでやめた（2026-09-09）。
     --font-serif の名前は残し、中身をゴシックに寄せる（既存の参照をそのまま活かす） */
  --font-serif:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","YuGothic",
    "Yu Gothic",Meiryo,system-ui,sans-serif;

  /* タイプスケール（8段階。これ以外を作らない） */
  --fs-display:34px; --lh-display:1.35;
  --fs-h1:28px;      --lh-h1:1.4;
  --fs-h2:24px;      --lh-h2:1.45;
  --fs-h3:17px;      --lh-h3:1.45;
  --fs-body:17px;    --lh-body:1.9;
  --fs-sm:15px;      --lh-sm:1.7;
  --fs-xs:13px;      --lh-xs:1.7;
  --fs-num:22px;     --lh-num:1.2;

  /* 余白スケール */
  --s4:4px; --s8:8px; --s12:12px; --s16:16px; --s20:20px;
  --s24:24px; --s32:32px; --s40:40px; --s56:56px; --s80:80px;

  /* 角丸 */
  --r-btn:12px; --r-card:16px; --r-panel:20px; --r-pill:999px;

  /* 影（3つのみ） */
  /* --scrim / --sh-sm / --sh-md / --sh-bar も theme.css（医院マスタ）から */

  --maxw:960px; --maxw-read:760px;
}
@media(max-width:720px){
  :root{--fs-display:26px;--fs-h1:23px;--fs-h2:20px}
}

/* ============ 土台 ============ */
*{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-sans);
  font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:.01em;
  padding-bottom:0}
img{max-width:100%;display:block}
a{color:var(--brand-text)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--s20);padding-right:var(--s20)}
.wrap-read{max-width:var(--maxw-read)}

:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--brand-text);outline-offset:2px;border-radius:var(--r-btn)}

/* ============ 見出し ============ */
.nowrap{display:inline-block}
h1,h2{font-family:var(--font-serif);font-weight:600;letter-spacing:.04em}
.eyebrow-b{font-size:var(--fs-xs);font-weight:700;letter-spacing:.22em;color:var(--brand-text);
  margin:0 0 var(--s8)}
h2.sec{font-size:var(--fs-h2);line-height:var(--lh-h2);margin:0}
h2.sec::after{content:"";display:block;width:56px;height:3px;background:var(--brand);
  border-radius:var(--mark-radius);margin-top:var(--s16)}
/* 密: 見出しと直下の説明は離さない。離すと見出しが本文から切れて見える */
.sec-lead{color:var(--ink-2);font-size:var(--fs-sm);line-height:var(--lh-sm);
  margin:var(--s8) 0 var(--s24)}
h3{font-family:var(--font-sans);font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:700}

/* ============ セクション ============ */
section{padding:var(--s56) 0}
section.light{padding:var(--s56) 0}
section.face-brand{background:var(--brand-face)}
section.face-neutral{background:var(--neutral-face)}
/* 章が変わるところだけ余白を広く取る。全部同じ間隔だと強弱が出ない */
section.sec-wide{padding:var(--s80) 0}
/* 写真を主役にする面。地を落として写真を浮かせる */
section.face-photo{background:var(--neutral-face)}
@media(max-width:720px){
  section{padding:var(--s40) 0}
  section.light{padding:var(--s40) 0}
}

/* ============ 確認用（stg。本番では出さない） ============ */
#reviewbar{background:var(--neutral-face);color:var(--ink);font-size:var(--fs-xs);padding:var(--s8) 0}
#reviewbar .wrap{display:flex;gap:var(--s12);align-items:center;flex-wrap:wrap}
#reviewbar b{color:var(--ink)}
#reviewbar label{display:flex;gap:var(--s4);align-items:center;cursor:pointer}
#reviewbar .tag{background:var(--brand-face);padding:var(--s4) var(--s8);border-radius:var(--r-pill)}
#reviewbar a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--brand-text)}
.gated.stg,.note.stg{display:none}
body.review .gated.stg,body.review .note.stg{display:block}
body.review [data-c="site"]{background:var(--caution-face);box-shadow:0 0 0 2px var(--caution-text)}
body.review [data-c="unknown"]{background:var(--caution-face);box-shadow:0 0 0 2px var(--caution-text)}
body.review [data-c="provisional"]{background:var(--neutral-face);box-shadow:0 0 0 2px var(--ink-2)}

/* ============ ヘッダー ============ */
header.site{position:sticky;top:0;z-index:50;background:var(--ground);
  border-bottom:1px solid var(--line-soft);backdrop-filter:blur(8px)}
header.site .bar{display:flex;align-items:center;gap:var(--s16);padding-top:var(--s12);padding-bottom:var(--s12)}
.brand{text-decoration:none;color:inherit;line-height:1.35;min-width:0;flex:1 1 auto}
.brand .nm{display:block;font-family:var(--font-serif);font-size:var(--fs-num);font-weight:700;
  letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .sub{display:block;font-size:var(--fs-xs);color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header.site nav{display:flex;gap:var(--s4)}
header.site nav a{font-size:var(--fs-sm);text-decoration:none;color:var(--ink);padding:0 var(--s12);
  border-radius:var(--r-btn);display:inline-flex;align-items:center;min-height:var(--tap)}
header.site nav a:hover{background:var(--brand-face);color:var(--brand-text)}
/* ヘッダーの電話（番号は出さない。正本§5.11） */
.hd-call{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--s8);
  min-height:var(--tap);padding:0 var(--s16);border-radius:var(--r-btn);text-decoration:none;
  background:var(--brand-text);color:var(--white);font-size:var(--fs-sm);font-weight:700;white-space:nowrap;
  transition:background-color .15s}
.hd-call:hover{background:var(--brand-strong)}
.hd-call::before{content:"";width:15px;height:15px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.5.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.4 21 3 13.6 3 4.5c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.5.1.3 0 .7-.2 1l-2.3 1.8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.5.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.4 21 3 13.6 3 4.5c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.5.1.3 0 .7-.2 1l-2.3 1.8z'/%3E%3C/svg%3E") center/contain no-repeat}

.spnav{display:none;flex:none}
.spnav summary{list-style:none;cursor:pointer;padding:0 var(--s16);min-height:var(--tap);
  display:flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-btn);
  font-size:var(--fs-sm);font-weight:700;color:var(--brand-text)}
.spnav summary::-webkit-details-marker{display:none}
.spnav[open] summary{background:var(--brand-face)}
.spnav .items{position:absolute;left:0;right:0;background:var(--white);
  border-bottom:1px solid var(--line-soft);box-shadow:var(--sh-md);
  padding:var(--s8) var(--s20) var(--s16);z-index:70}
.spnav .items a{display:block;padding:var(--s16) var(--s4);border-bottom:1px solid var(--line-soft);
  text-decoration:none;color:var(--ink);font-size:var(--fs-h3)}

/* ============ ボタン ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s8);
  min-height:var(--tap-bar);padding:0 var(--s24);border-radius:var(--r-btn);text-decoration:none;
  font-size:var(--fs-h3);font-weight:700;transition:background-color .15s,transform .1s}
.btn.fill{background:var(--brand-text);color:var(--white);box-shadow:var(--sh-sm)}
.btn.fill:hover{background:var(--brand-strong)}
.btn.fill:active{transform:scale(.98)}
.btn.line{background:var(--white);color:var(--brand-text);border:1.5px solid var(--brand-text)}
.btn.line:hover{background:var(--brand-face)}
.btn.line:active{transform:scale(.98)}
.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn .num{font-family:var(--font-serif);font-size:var(--fs-num);letter-spacing:.04em}
.btn .ic{font-size:var(--fs-h3)}

/* ============ アイコン ============ */
.ic{display:inline-block;width:1em;height:1em;background:currentColor;flex:none;
  -webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}
.ic-clock{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E")}
.ic-pin{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E")}
.ic-tel{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.5.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.4 21 3 13.6 3 4.5c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.5.1.3 0 .7-.2 1l-2.3 1.8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.5.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.4 21 3 13.6 3 4.5c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.5.1.3 0 .7-.2 1l-2.3 1.8z'/%3E%3C/svg%3E")}
.ic-shield{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3l7 3v6c0 4-3 7.5-7 9-4-1.5-7-5-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3l7 3v6c0 4-3 7.5-7 9-4-1.5-7-5-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}
.ic-eye{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6-10-6-10-6z'/%3E%3Ccircle cx='12' cy='12' r='2.7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6-10-6-10-6z'/%3E%3Ccircle cx='12' cy='12' r='2.7'/%3E%3C/svg%3E")}
.ic-cal{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3.5v3M16 3.5v3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3.5v3M16 3.5v3'/%3E%3C/svg%3E")}

/* ============ 写真 ============ */
/* 枠の上限は仮画像の実解像度に合わせている（260×173 相当・3:2）。
   拡大率が1.5倍を超えるとぼやけるため、1枠340pxで止める（340/260=1.31倍）。
   高解像度の写真に差し替えたら max-width を上げてよい。 */
.photo{position:relative;background:var(--brand-face);overflow:hidden;
  border-radius:var(--r-card);border:1px solid var(--line-soft)}
.photo .spec{height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--s4);text-align:center;padding:var(--s16);color:var(--ink-2)}
.photo .spec b{font-size:var(--fs-sm);font-weight:700}
.photo .spec span{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.7}
.photo img{width:100%;height:100%;object-fit:cover}

/* 撮影前の枠は「画像の置き場」に見せる。淡い面の上にカメラの印、撮影の指示は下部のキャプションに。
   写真（src）が入ると .has-img になり、比率どおりに戻る。指示は content/photo_plan.json */
.th-photo .photo:not(.has-img),.photoband .photo:not(.has-img),
.photo-one .photo:not(.has-img){aspect-ratio:auto;max-width:none;width:100%;min-height:0}
.doc>.photo:not(.has-img){aspect-ratio:auto;width:320px}
.photo:not(.has-img){background:linear-gradient(160deg,var(--brand-face) 0%,var(--neutral-face) 100%);
  display:flex;flex-direction:column}
.photo:not(.has-img)::before{content:"";display:block;width:40px;height:40px;margin:var(--s24) auto var(--s16);
  background:var(--brand-text);opacity:.45;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center/contain no-repeat}
.photo:not(.has-img) .spec{height:auto;align-items:stretch;justify-content:flex-start;
  text-align:left;gap:var(--s8);background:var(--white);border-top:1px solid var(--line-soft);
  margin-top:auto;padding:var(--s12) var(--s16) var(--s16)}
.photo .spec b{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s8)}
.photo .spec dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--s4) var(--s8)}
.photo .spec dt{font-size:var(--fs-xs);line-height:1.7;color:var(--ink-3);white-space:nowrap}
.photo .spec dd{margin:0;font-size:var(--fs-xs);line-height:1.7;color:var(--ink-2)}
.photo .spec .pri{font-size:var(--fs-xs);font-weight:700;color:var(--brand-text);
  border:1px solid var(--line-soft);border-radius:var(--r-pill);
  padding:0 var(--s8);white-space:nowrap;flex:none}
.photo .spec .pri.opt{color:var(--ink-3)}
.photo-one{margin:0 0 var(--s24);max-width:520px}
/* 3枚組は1枠が狭い。見出しと中身を2列にすると折り返しが増えるので縦に積む */
.photoband .photo .spec dl{grid-template-columns:1fr;gap:var(--s8)}
.photoband .photo .spec dt{margin-bottom:0}
.photoband .photo .spec dd{margin-top:0}

/* ============ 1画面目 ============ */
/* 写真 → キャッチ → 今日行けるか＋電話 → 資格。写真が入ればキャッチは写真の上に幕を敷いて重ねる。
   撮影前（枠）のときは重ねず、枠の下に置く（読めなくなるため） */
.tophero{padding:0 0 var(--s40);background:linear-gradient(180deg,var(--brand-face) 0%,var(--ground) 100%)}
/* 写真は画面の端まで使う。1000pxに収めると「囲みの中の画像」に見えて主役にならない */
.hero-visual{position:relative;margin:0 auto;padding:0}
.th-photo .photo{width:100%;max-width:none;aspect-ratio:21/9;box-shadow:none;border-radius:0;border:0}
.th-photo .photo.has-img img{object-position:center 40%}
.hero-copy{padding:var(--s20) 0 0}
.hero-copy h1{font-size:var(--fs-h3);line-height:var(--lh-h3);margin:0;letter-spacing:.02em;font-weight:700;color:var(--ink-2)}
.hero-copy .catch{font-size:var(--fs-display);line-height:var(--lh-display);font-weight:700;
  letter-spacing:.02em;margin:var(--s4) 0 0}
.hero-copy .th-near{margin:var(--s8) 0 0;font-size:var(--fs-sm);color:var(--ink-2)}
/* 1画面目の写真の切り替え。1枚目が高さを作り、残りはその上に重ねてフェードで入れ替える */
.th-slides{position:relative}
.th-slides .slide{opacity:0;transition:opacity .7s ease}
.th-slides .slide:first-child{position:relative}
.th-slides .slide:not(:first-child){position:absolute;top:0;right:0;bottom:0;left:0}
.th-slides .slide.on{opacity:1}
.th-slides .slide .photo,.th-slides .slide img{height:100%}
.th-dots{position:absolute;left:0;right:0;bottom:var(--s16);display:flex;justify-content:center;
  gap:var(--s8);z-index:2}
.th-dots .dot{width:var(--s12);height:var(--s12);border-radius:50%;border:1px solid var(--white);
  background:none;padding:0;cursor:pointer}
.th-dots .dot.on{background:var(--white)}
@media(prefers-reduced-motion:reduce){.th-slides .slide{transition:none}}

/* ヘッダーのロゴ。医院マスタに画像があるときだけ出る */
header.site .brand{display:flex;align-items:center;gap:var(--s12)}
header.site .brand .txt{display:flex;flex-direction:column}
header.site .logo{width:auto;height:var(--s40);flex:none}
@media(max-width:820px){header.site .logo{height:var(--s32)}}

/* 写真が入ったとき: キャッチを写真の左下に重ねる */
.hero-visual:has(.photo.has-img) .hero-copy{position:absolute;left:0;right:0;bottom:0;
  padding:var(--s56) var(--s20) var(--s24);color:var(--white);
  /* 幕は文字が始まる前に濃さへ到達させる。60%だと文字の上半分が薄い面に乗って読めない
     （実測: 白文字とのコントラストが1.2〜3.5。SPで顕著） */
  background:linear-gradient(180deg,transparent 0%,var(--scrim) 20%);border-radius:0}
/* 重ねる文字は本文と同じ読み幅に揃える（画面幅いっぱいに散らさない） */
.hero-visual:has(.photo.has-img) .hero-copy>*{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.hero-visual:has(.photo.has-img) .hero-copy h1,
.hero-visual:has(.photo.has-img) .hero-copy .catch,
.hero-visual:has(.photo.has-img) .hero-copy .th-near{color:var(--white)}
/* 写真の下: 状態カードと資格を横に */
.th-below{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s24);align-items:center;margin-top:var(--s24)}
/* 中: 資格バッジは説明の続き */
.badges{display:flex;flex-wrap:wrap;gap:var(--s8);margin:0;padding:0;list-style:none}
.th-badges{margin:0}
.badges li{display:inline-flex;align-items:center;gap:var(--s8);background:var(--brand-face);
  border-radius:var(--r-pill);padding:var(--s8) var(--s16);font-size:var(--fs-xs);
  font-weight:700;color:var(--brand-text)}
.badges .ic{font-size:var(--fs-sm)}
/* 状態（今日行けるか）と行動（電話）は1枚のカードにまとめる。1画面目の主役 */
.th-near{margin:var(--s4) 0 0;font-size:var(--fs-sm);color:var(--ink-2)}
.statuscard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--sh-md);padding:var(--s20);margin:0}
.todaystrip{display:flex;flex-direction:column;gap:var(--s4);margin:0 0 var(--s16);
  padding:0 0 0 var(--s16);border-left:3px solid var(--go)}
.todaystrip .head{font-size:var(--fs-h2);font-weight:700;color:var(--go);
  font-family:var(--font-serif);letter-spacing:.01em;line-height:var(--lh-h2)}
.todaystrip .head.soon{color:var(--caution-text)}
.todaystrip .head.closed{color:var(--ink-2)}
.todaystrip.st-soon{border-left-color:var(--caution-text)}
.todaystrip.st-closed{border-left-color:var(--ink-3)}
.todaystrip .sub,.todaystrip .next{font-size:var(--fs-sm);color:var(--ink-2)}
.todaystrip .next b{color:var(--brand-text)}
.mainbtns{display:flex;flex-direction:column;gap:var(--s12);margin:0 0 var(--s8)}
.mainbtns .btn{width:100%}
.cvnote{font-size:var(--fs-xs);color:var(--ink-3);margin:0;text-align:center}

/* 情報カード */
.infocard{margin-top:var(--s32);background:var(--white);border:1px solid var(--line-soft);
  border-radius:var(--r-card);box-shadow:var(--sh-sm);overflow:hidden}
.infocard .row{display:flex;gap:var(--s16);padding:var(--s20);align-items:center}
.infocard .row+.row{border-top:1px solid var(--line-soft)}
.infocard .badge{width:42px;height:42px;flex:none;border-radius:50%;background:var(--brand-face);
  display:flex;align-items:center;justify-content:center;color:var(--brand-text);font-size:var(--fs-num)}
.infocard .k{font-size:var(--fs-xs);font-weight:700;color:var(--brand-text);letter-spacing:.08em;margin:0 0 var(--s4)}
.infocard .val{font-family:var(--font-serif);font-size:var(--fs-num);line-height:var(--lh-num);
  font-weight:700;color:var(--brand-text);margin:0}
.infocard .val a{color:inherit;text-decoration:none}
.infocard .sub{font-size:var(--fs-sm);color:var(--ink-2);margin:var(--s4) 0 0;line-height:1.7}

/* ============ 2画面目 迷いの除去 ============ */
.prepgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s16)}
.prep{background:none;border:0;border-top:3px solid var(--brand);border-radius:0;box-shadow:none;
  padding:var(--s16) 0 0}
.prep h3{display:flex;align-items:center;gap:var(--s8);margin:0 0 var(--s8)}
.prep h3 .ic{color:var(--brand-text);font-size:var(--fs-h3)}
.prep p{margin:0 0 var(--s8);font-size:var(--fs-sm);color:var(--ink-2)}
.prep ul{margin:0;padding-left:var(--list-indent);font-size:var(--fs-sm);line-height:1.7}
.prep li{margin-bottom:var(--s4)}

/* ============ 診療時間 ============ */
/* 診療時間の要約。時間を主役にして、曜日はその下のラベル、行けない日は注記に落とす。
   医院ごとに行数が変わるため、列は auto-fit で折り返す（1〜7行のどれでも同じ組み方） */
.godays{margin:0 0 var(--s24);padding:var(--s20) var(--s24);
  background:var(--brand-face);border-radius:var(--r-card)}
.gd-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s20) var(--s24)}
.gd-list li{margin:0;padding-left:var(--s16);border-left:3px solid var(--brand)}
.gd-time{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s16);margin:0;
  font-size:var(--fs-num);line-height:var(--lh-num);font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.gd-slot{white-space:nowrap}
.gd-to{color:var(--ink-3);font-weight:400;padding:0 var(--s4)}
.gd-days{margin:var(--s8) 0 0;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2)}
.gd-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s4) var(--s12);
  margin:var(--s8) 0 0;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2)}
.gd-list + .gd-note{margin-top:var(--s20);padding-top:var(--s16);
  border-top:1px solid var(--line-soft)}
.gd-lab{flex:none;font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;
  padding:var(--s4) var(--s12);border-radius:var(--r-pill);background:var(--white)}
.gd-closed .gd-lab{color:var(--caution-text)}
.gd-appt .gd-lab{color:var(--brand-text)}
.hours-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
table.hours{border-collapse:collapse;width:100%;font-size:var(--fs-sm);background:var(--white);table-layout:fixed}
table.hours th:first-child{width:4.5em}
table.hours th,table.hours td{border:1px solid var(--line);padding:var(--s12) var(--s8);text-align:center}
table.hours thead th{background:var(--brand-text);color:var(--white);font-weight:700;font-size:var(--fs-xs);
  line-height:1.4}
table.hours thead th span{display:block;font-weight:400;font-size:var(--fs-xs);opacity:.92;letter-spacing:.01em}
table.hours tbody th{background:var(--neutral-face);text-align:left;white-space:nowrap;
  font-weight:700;padding-left:var(--s12);font-size:var(--fs-sm)}
table.hours tbody th span{display:block;font-weight:400;font-size:var(--fs-xs);color:var(--ink-3)}
table.hours td.o{color:var(--go);font-size:var(--fs-h3);font-weight:700}
table.hours td.x{color:var(--closed)}
table.hours td.tri{color:var(--caution-text);font-size:var(--fs-sm);font-weight:700}
.legend{display:flex;flex-wrap:wrap;gap:var(--s8) var(--s20);margin:var(--s12) 0 0;
  padding:0;list-style:none;font-size:var(--fs-sm);color:var(--ink-2)}
.legend li{display:flex;align-items:center;gap:var(--s8)}
.legend .mk{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  background:var(--neutral-face);border:1px solid var(--line);border-radius:var(--r-btn);
  font-weight:700;color:var(--ink);flex:none}
.hours-notes{margin:var(--s12) 0 0;padding:0;list-style:none;font-size:var(--fs-sm);color:var(--ink-2)}
.hours-notes li{padding-left:var(--list-indent);position:relative;margin-bottom:var(--s4)}
.hours-notes li::before{content:"※";position:absolute;left:0;color:var(--ink-3)}
.closed-line{margin-top:var(--s12);padding:var(--s12) var(--s16);background:var(--caution-face);
  border-left:3px solid var(--caution-text);border-radius:0 var(--r-btn) var(--r-btn) 0;
  font-size:var(--fs-sm)}
.reception-box{margin-top:var(--s20);font-size:var(--fs-sm)}
.reception-box h3{margin:0 0 var(--s8)}
.reception-box ul{margin:0;padding-left:var(--list-indent)}

/* ============ 診療内容 ============ */
.subjects{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:var(--r-card);overflow:hidden}
.subj{display:block;text-decoration:none;color:inherit;background:var(--white);
  padding:var(--s20);min-height:var(--tap);transition:background-color .15s,box-shadow .15s}
.subj:hover{background:var(--brand-face);box-shadow:var(--sh-md)}
.subj .t{display:block;font-weight:700;font-size:var(--fs-h3);color:var(--brand-text);
  margin-bottom:var(--s4)}
.subj .t::after{content:"";display:inline-block;width:6px;height:6px;margin-left:var(--s8);
  border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(45deg) translateY(-1px)}
.subj .d{display:block;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.7}
.subj.plain{background:var(--neutral-face);cursor:default;box-shadow:none}
.subj.plain:hover{background:var(--neutral-face);box-shadow:none}
.subj.plain .t{color:var(--ink);font-weight:600}
.subj.plain .t::after{display:none}
.subjgroup{margin-bottom:var(--s32)}
.subjgroup:last-child{margin-bottom:0}
.grp{display:flex;align-items:center;gap:var(--s12);margin:0 0 var(--s8);
  font-size:var(--fs-h3);color:var(--ink)}
.grp::before{content:"";width:4px;height:1.15em;background:var(--brand);border-radius:var(--mark-radius);flex:none}
.grp-lead{font-size:var(--fs-sm);color:var(--ink-2);margin:0 0 var(--s16);line-height:var(--lh-sm)}
.subj-more{margin-top:var(--s16);font-size:var(--fs-sm);color:var(--ink-2)}
.subj-more b{display:block;color:var(--ink);margin-bottom:var(--s8)}
.subj-more span{display:inline-block;margin:0 var(--s16) var(--s4) 0}

/* ============ 一般 ============ */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s24)}
.cols h3{margin:0 0 var(--s8)}
.cols ul{margin:0;padding-left:var(--list-indent);font-size:var(--fs-sm);color:var(--ink-2);line-height:1.7}
.note-s{font-size:var(--fs-xs);color:var(--ink-3);margin:var(--s8) 0 0}
.feelist{margin:0;padding:0;list-style:none;font-size:var(--fs-body)}
.feelist li{padding:var(--s16) 0;border-bottom:1px solid var(--line-soft)}
.feelist b{display:block;font-size:var(--fs-h3);color:var(--brand-text);margin-bottom:var(--s4)}
.mapbox{border:1px solid var(--line-soft);border-radius:var(--r-card);overflow:hidden;line-height:0}
.mapbox iframe{width:100%;height:340px;border:0;display:block}

/* ============ 医師 ============ */
.doc{display:flex;gap:var(--s32);align-items:flex-start;flex-wrap:wrap}
.doc>.photo{width:230px;aspect-ratio:3/4;flex:none}
.doc .body{flex:1 1 260px}
.doc .nm{font-family:var(--font-serif);font-size:var(--fs-h2);font-weight:700;margin:0;
  letter-spacing:.06em}
.doc .ro{font-size:var(--fs-sm);color:var(--ink-3);margin:var(--s4) 0 var(--s12)}
.quals{display:flex;gap:var(--s8);flex-wrap:wrap;margin:0 0 var(--s16);padding:0;list-style:none}
.quals li{background:var(--brand-face);color:var(--brand-text);font-size:var(--fs-xs);
  padding:var(--s4) var(--s12);border-radius:var(--r-btn);font-weight:700}
.career{font-size:var(--fs-sm);color:var(--ink-2);margin:0;padding:0;list-style:none}
.career li{display:flex;gap:var(--s16);padding:var(--s8) 0;border-bottom:1px dotted var(--line-soft)}
.career li span:first-child{color:var(--ink-3);min-width:7.5em;flex:none}
@media(max-width:480px){
  .career li{flex-direction:column;gap:var(--s4)}
  .career li span:first-child{min-width:0;font-size:var(--fs-xs)}
}

/* ============ お知らせ ============ */
/* 正本 §5.8 = 日付 --fs-xs --ink-3 ＋ 種別のピル ＋ 見出し --fs-h3。本文を1行添える */
.news{list-style:none;margin:0;padding:0}
/* 左の3pxは全行そろえて確保する。目立たせる行だけ字下げがずれるのを防ぐ */
.news li{display:flex;gap:var(--s20);padding:var(--s16) var(--s12);
  border-bottom:1px solid var(--line-soft);border-left:3px solid transparent;
  font-size:var(--fs-sm);flex-wrap:wrap;align-items:baseline}
.news .nmeta{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s8);width:12.5em;flex:none}
.news time{color:var(--ink-3);font-size:var(--fs-xs);flex:none;font-weight:700;white-space:nowrap}
.news .cat{font-size:var(--fs-xs);font-weight:700;color:var(--brand-text);
  background:var(--brand-face);border-radius:var(--r-pill);padding:0 var(--s8);white-space:nowrap}
.news .ntxt{flex:1 1 18em}
.news .nt{margin:0 0 var(--s4);font-size:var(--fs-h3);line-height:var(--lh-h3);color:var(--ink)}
.news .nb{margin:0;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2)}
/* 休診と診療時間の変更は注意の面（正本 §5.7）で目立たせる */
.news li.pin{background:var(--caution-face);border-left-color:var(--caution-text);
  border-radius:0 var(--r-btn) var(--r-btn) 0}
.news li.pin .cat{color:var(--caution-text);background:var(--white)}
.news li.pin .nt{color:var(--caution-text)}

/* ---- お知らせの記入例。医院の実データが入るまでの見本 ----
   未撮影の写真枠と同じ扱い。破線と面で「まだ中身ではない」と分かるようにし、
   本番ビルド（PROD=1）では残っていると検査で落とす。文面は content/news_examples.json */
.news-eg{margin-top:var(--s24);border:1px dashed var(--line);border-radius:var(--r-card);
  background:var(--neutral-face);padding:var(--s16)}
.news-eg .spec b{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s8);
  font-size:var(--fs-sm);color:var(--ink-2)}
.news-eg .spec .pri{font-size:var(--fs-xs);font-weight:700;color:var(--ink-3);
  border:1px solid var(--line-soft);border-radius:var(--r-pill);background:var(--white);
  padding:0 var(--s8);white-space:nowrap;flex:none}
.news-eg .eglead{margin:var(--s8) 0 0;font-size:var(--fs-xs);line-height:1.7;color:var(--ink-2)}
.news-eg .egrules{margin:var(--s8) 0 0;padding-left:var(--list-indent);
  font-size:var(--fs-xs);line-height:1.7;color:var(--ink-3)}
.news-eg .news{margin-top:var(--s12)}
.news-eg .news li{border-bottom:1px dashed var(--line-soft)}
.news-eg .news li:last-child{border-bottom:0;padding-bottom:0}



/* ============ 下層ページ ============ */
.pagehero{background:var(--neutral-face);border-bottom:1px solid var(--line-soft);
  padding:var(--s24) 0}
.pagehero h1{font-size:var(--fs-h1);line-height:var(--lh-h1);margin:var(--s8) 0 0}
.crumbs{font-size:var(--fs-xs);color:var(--ink-3);margin:0}
.pagehero-sub{margin:var(--s8) 0 0;font-size:var(--fs-sm);color:var(--ink-2)}
.crumbs a{color:var(--ink-3)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 276px;gap:var(--s40);
  padding-top:var(--s32);padding-bottom:var(--s56)}
.article h2{font-family:var(--font-serif);font-size:var(--fs-h2);line-height:var(--lh-h2);
  margin:var(--s40) 0 var(--s8);padding-bottom:var(--s8);border-bottom:2px solid var(--brand-face)}
.article h2:first-child{margin-top:0}
.article h3{margin:var(--s24) 0 var(--s8);color:var(--brand-text)}
.article p{margin:0 0 var(--s16)}
.article ul,.article ol{margin:0 0 var(--s16);padding-left:var(--list-indent)}
.article li{margin-bottom:var(--s4)}
.article table{border-collapse:collapse;width:100%;font-size:var(--fs-sm);margin:0 0 var(--s20)}
.article table th,.article table td{border:1px solid var(--line);padding:var(--s8) var(--s12);
  text-align:left}
.article table thead th{background:var(--neutral-face)}
.summary{background:var(--brand-face);border-radius:var(--r-panel);padding:var(--s24);
  margin:0 0 var(--s32)}
.summary h2{border:0;margin:0 0 var(--s12);padding:0;font-size:var(--fs-h3);
  color:var(--brand-text);font-family:var(--font-sans)}
.summary ul{margin:0;padding-left:var(--list-indent);font-size:var(--fs-h3);line-height:var(--lh-sm)}
.summary li{margin-bottom:var(--s8)}
.keyblock{margin:0 0 var(--s32)}
.keyblock h2{font-family:var(--font-serif);font-size:var(--fs-h2);margin:0 0 var(--s8);
  padding-bottom:var(--s8);border-bottom:2px solid var(--brand-face)}
.keyblock .plainlist{margin:0 0 var(--s16);padding-left:var(--list-indent);font-size:var(--fs-h3);line-height:var(--lh-sm)}
.steps{counter-reset:s;list-style:none;margin:0 0 var(--s16);padding:0}
.steps li{counter-increment:s;position:relative;padding:0 0 var(--s16) var(--step-indent);font-size:var(--fs-body)}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:29px;height:29px;
  background:var(--brand-text);color:var(--white);border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:var(--fs-sm);font-weight:700}
.steps li b{display:block;margin-bottom:var(--s4)}
.actnow{background:var(--caution-face);border-left:3px solid var(--caution-text);
  border-radius:0 var(--r-btn) var(--r-btn) 0;padding:var(--s16) var(--s20);
  margin:0 0 var(--s32);font-size:var(--fs-body)}
.actnow h3{margin:0 0 var(--s8);color:var(--caution-text)}
.actnow ul{margin:0;padding-left:var(--list-indent)}
details.more{border:1px solid var(--line-soft);border-radius:var(--r-card);
  margin:0 0 var(--s12);background:var(--white)}
details.more summary{list-style:none;cursor:pointer;padding:var(--s16) var(--s20);
  font-size:var(--fs-h3);font-weight:700;color:var(--brand-text);display:flex;
  align-items:center;justify-content:space-between;min-height:var(--tap)}
details.more summary::-webkit-details-marker{display:none}
details.more summary::after{content:"＋";font-size:var(--fs-h3);color:var(--ink-3);font-weight:400}
details.more[open] summary::after{content:"−"}
details.more[open] summary{border-bottom:1px solid var(--line-soft)}
details.more .body{padding:var(--s8) var(--s20) var(--s20)}
details.more .body h3{font-size:var(--fs-h3);margin:var(--s20) 0 var(--s8);color:var(--ink)}
details.more .body h3:first-child{margin-top:var(--s8)}
.faq-q{font-weight:700;margin:0 0 var(--s4);font-size:var(--fs-h3)}
.faq-a{margin:0 0 var(--s16);font-size:var(--fs-body);color:var(--ink-2)}
.ourcare{background:var(--brand-face);border-radius:var(--r-panel);padding:var(--s24);
  margin:var(--s40) 0}
.ourcare>h2{border:0;margin:0 0 var(--s4);padding:0;font-size:var(--fs-h2);color:var(--brand-text)}
.ourcare .note{font-size:var(--fs-xs);color:var(--ink-3);margin:0 0 var(--s16)}
.gated{background:var(--white);border:1px dashed var(--caution-text);border-radius:var(--r-btn);
  padding:var(--s12) var(--s16);font-size:var(--fs-sm);color:var(--caution-text);margin:var(--s12) 0}
.reviewed{border-top:1px solid var(--line-soft);margin-top:var(--s40);padding-top:var(--s20);
  font-size:var(--fs-sm);color:var(--ink-2)}
.reviewed .who{font-weight:700;color:var(--ink)}
.ph-inline{background:var(--brand-face);border:1px solid var(--line-soft);
  border-radius:var(--r-card);padding:var(--s24);text-align:center;color:var(--ink-3);
  font-size:var(--fs-xs);margin:0 0 var(--s20)}
aside .box{border:1px solid var(--line-soft);border-radius:var(--r-card);padding:var(--s20);
  margin-bottom:var(--s16);font-size:var(--fs-sm)}
aside .box h3{margin:0 0 var(--s12)}
aside .box.call{background:var(--brand-text);border-color:var(--brand-text);color:var(--white);
  text-align:center}
aside .box.call a{color:var(--white);text-decoration:none;font-family:var(--font-serif);
  font-size:var(--fs-num);font-weight:700;display:block;letter-spacing:.04em}
aside .box.call .l{font-size:var(--fs-xs);color:var(--white)}
aside table.hours{min-width:0;font-size:var(--fs-xs)}
aside table.hours thead th{font-size:var(--fs-xs)}
aside table.hours thead th span{font-size:var(--fs-xs)}
aside table.hours th,aside table.hours td{padding:var(--s8) var(--s4)}
aside .stick{position:sticky;top:76px;max-height:calc(100vh - 92px);overflow-y:auto}
aside .godays{margin:0;padding:var(--s16)}
aside .gd-list{grid-template-columns:minmax(0,1fr);gap:var(--s16)}
aside .gd-time{gap:var(--s4) var(--s12)}
aside .sidemore{margin:var(--s12) 0 0;font-size:var(--fs-sm)}
/* 検査ごとの受付の締め切り。同じ言い回しを並べず表で読ませる */
.prep-cutoff{margin-top:var(--s40);border-top:3px solid var(--brand);padding-top:var(--s16)}
.prep-cutoff h3{display:flex;align-items:center;gap:var(--s8);margin:0 0 var(--s16)}
.prep-cutoff h3 .ic{color:var(--brand-text);font-size:var(--fs-h3)}
.tblwrap{overflow-x:auto}
table.cutoff{width:100%;border-collapse:collapse;font-size:var(--fs-sm);line-height:var(--lh-sm)}
table.cutoff th,table.cutoff td{padding:var(--s12);text-align:left;border-bottom:1px solid var(--line-soft)}
table.cutoff thead th{background:var(--brand);color:var(--white);font-size:var(--fs-xs);border-bottom:0}
table.cutoff tbody th{font-weight:700}
table.cutoff td{color:var(--ink-2)}
/* SPでは3列が入らない。横スクロールさせずに、検査ごとの塊に積み替える */
@media(max-width:560px){
  table.cutoff thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  table.cutoff tr{display:block;border-bottom:1px solid var(--line-soft);padding:var(--s12) 0}
  table.cutoff tbody th,table.cutoff td{display:block;border:0;padding:0}
  table.cutoff tbody th{font-size:var(--fs-sm);margin-bottom:var(--s4)}
  table.cutoff td::before{content:attr(data-h)"　";color:var(--ink-3)}
}
.note-line{margin:var(--s12) 0 0;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2)}

/* 院内の写真は画面の端まで使う。囲みも影も付けず、写真そのものを見せる */
.bandfull{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin:var(--s32) 0}
.bandfull .photo{border-radius:0;border:0;box-shadow:none;aspect-ratio:3/2}
.bandfull .photo img{width:100%;height:100%;object-fit:cover}
@media(max-width:820px){
  .bandfull{grid-template-columns:1fr;gap:var(--s4);margin:var(--s24) 0}
}

.photoband{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s12);margin:0 0 var(--s24)}
.photoband .photo{aspect-ratio:3/2}

/* ============ フッター ============ */
footer.site{background:var(--neutral-face);color:var(--ink-2);padding:var(--s40) 0;font-size:var(--fs-sm)}
footer.site a{color:var(--brand-text)}
footer.site .fcols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:var(--s32)}
footer.site .nm{font-family:var(--font-serif);font-size:var(--fs-h3);font-weight:700;
  color:var(--ink);margin:0 0 var(--s8);letter-spacing:.06em}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:var(--s8)}
footer.site .cp{border-top:1px solid var(--line-soft);margin-top:var(--s24);padding-top:var(--s16);
  font-size:var(--fs-xs);color:var(--ink-3)}

/* ============ SP固定バー（番号は出さない） ============ */
.spbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--white);border-top:1px solid var(--line-soft);
  box-shadow:var(--sh-bar);padding:var(--s8) var(--s12) calc(var(--s8) + env(safe-area-inset-bottom))}
.spbar .row{display:flex;gap:var(--s8)}
.spbar a{flex:1;display:flex;align-items:center;justify-content:center;text-decoration:none;
  border-radius:var(--r-btn);padding:var(--s12) var(--s4);font-size:var(--fs-sm);
  font-weight:700;min-height:var(--tap-bar)}
.spbar a.call{background:var(--brand-text);color:var(--white);flex:1.5}
.spbar a.call:active{transform:scale(.98)}
.spbar a.sub{background:var(--neutral-face);color:var(--brand-text);border:1px solid var(--line-soft)}

@media(max-width:900px){
  .layout{grid-template-columns:1fr;gap:0}
  aside .stick{position:static}
  footer.site .fcols{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  /* SP: 写真はヘッダー直下に横いっぱい。キャッチは写真の上（写真が無ければ下） */
  .hero-visual{padding:0}
  .th-photo .photo{aspect-ratio:4/3;border-radius:0;border:0;box-shadow:none}
  .hero-visual:has(.photo.has-img) .hero-copy{left:0;right:0;border-radius:0;padding:var(--s40) var(--s20) var(--s20)}
  .hero-copy{padding:var(--s16) var(--s20) 0}
  .th-below{grid-template-columns:1fr;gap:var(--s16);margin-top:var(--s16)}
  header.site .sub{display:none}
}
@media(max-width:720px){
  table.hours th,table.hours td{padding:var(--s12) var(--s4)}
  table.hours thead th{font-size:var(--fs-xs)}
  table.hours thead th span{font-size:var(--fs-xs)}
  table.hours tbody th{padding-left:var(--s8);font-size:var(--fs-xs)}
  header.site nav{display:none}
  .hd-call{display:none}
  .spnav{display:block}
  .spbar{display:block;transform:translateY(110%);transition:transform .25s ease}
  body.show-spbar .spbar{transform:none}
  /* ヘッダーの最寄りは1画面目の医院名の下と重複するのでSPでは出さない */
  header.site .sub .sub-near{display:none}
  .subjects{grid-template-columns:1fr}
  .photoband{grid-template-columns:1fr 1fr;gap:var(--s8)}
  .doc{gap:var(--s20)}
  .doc>.photo{width:100%;max-width:none;margin:0;aspect-ratio:4/3}
  .doc .body{flex:1 1 100%}
  .mapbox iframe{height:260px}
  footer.site .fcols{grid-template-columns:1fr}
  .tophero{padding:0 0 var(--s32)}
}
@media print{
  header.site,.spbar,#reviewbar,aside,.spnav,.photo,.photoband,.news-eg,
  .closing,.section-link,details.more{display:none!important}
  body{font-size:11pt;line-height:1.6;background:var(--white);color:#000}
  section{padding:12pt 0;break-inside:avoid}
  .wrap{max-width:none;padding:0}
  h1{font-size:18pt}h2.sec{font-size:14pt}
  h2.sec::after{display:none}
    table.hours{font-size:10pt}
  table.hours th,table.hours td{border:1px solid #666;padding:4pt}
  table.hours thead th{background:#eee!important;color:#000!important}
  .todaystrip{border:0;padding:0;background:none}
  .todaystrip .head{font-size:12pt}
  /* 印刷では電話番号を必ず紙に残す（番号はDOMの電話ボタンから。CSSに番号を書かない） */
  .mainbtns .btn{display:block;background:none;color:#000;border:1px solid #666;box-shadow:none;
    font-size:12pt;font-weight:700;padding:6pt}
  .statuscard{border:0;box-shadow:none;padding:0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
}


/* ---- 診療内容の中の、行える検査・手術・機器 ---- */
.capsblock{margin-top:var(--s40);padding-top:var(--s32);border-top:1px solid var(--line-soft)}
.capsblock .cols{gap:var(--s32)}
.capsblock h3{margin:0 0 var(--s12);font-size:var(--fs-h3);color:var(--brand-text)}
.capsblock ul{margin:0;padding-left:var(--list-indent);font-size:var(--fs-sm);color:var(--ink-2);line-height:var(--lh-sm)}

/* ---- 写真（実画像が入ったとき） ---- */
.photo.has-img{background:none;border:0}
.photo.has-img img{border-radius:var(--r-card)}
/* 全幅で見せる写真は角を丸めない（親の角丸を消しても画像側が丸いと四隅に地が見える） */
.th-photo .photo.has-img img,.bandfull .photo.has-img img{border-radius:0}

/* 共通の本文リズム。段落の余白はブラウザーの初期値に依存しない。 */
p,ul,ol{margin:0}
p + p{margin-top:var(--s16)}
li{line-height:var(--lh-sm)}
h3{margin:var(--s32) 0 var(--s8)}
h2.sec + :is(p,ul,.reception-box){margin-top:var(--s8)}
h2.sec + :is(.subjects,.prepgrid,.hours-wrap,.news,.doc,.feelist){margin-top:var(--s20)}
.page-content{display:flow-root}
.page-content > :is(p,ul,ol,table){margin-bottom:var(--s20)}
.page-content > h2.sec:not(:first-child){margin-top:var(--s40)}
.page-content > h3:first-child{margin-top:0}
.page-content > :is(ul,ol):not(.news){padding-left:var(--list-indent)}
.page-content > ul > li + li{margin-top:var(--s8)}
.page-content > p + p{margin-top:0}
.page-content table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);line-height:var(--lh-sm)}
.page-content th,.page-content td{border:1px solid var(--line);padding:var(--s12);text-align:left}
.page-content thead th{background:var(--neutral-face)}
.page-content .hours th,.page-content .hours td{text-align:center}
.page-content .hours thead th{background:var(--brand-text);border-color:var(--white)}
.cta-space{margin-top:var(--s40);clear:both}
.section-link{margin-top:var(--s32)}
.photo-space{margin-top:var(--s32)}
.photoband{margin-bottom:var(--s32)}
.doc h3{color:var(--ink);margin:var(--s32) 0 var(--s8)}
.doc .quals{margin-top:var(--s16)}
.doc .body > ul:last-child{margin-bottom:0}
.doc .ro{margin-bottom:0}
.prep p{line-height:var(--lh-sm)}
.infocard,details.more,aside .box{background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.subjects{gap:var(--s16);border:0;background:transparent;overflow:visible}
a.subj{border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-sm)}
.subj .d{margin-top:var(--s8);line-height:var(--lh-sm)}
.badges li,.quals li{background:var(--neutral-face);color:var(--ink-2)}
.pagehero{background:var(--brand-face);padding:var(--s32) 0}
.article h3,.feelist b,.capsblock h3{color:var(--ink)}
.article h2 + p{margin-top:0}
.summary li:last-child,.article li:last-child{margin-bottom:0}
table.hours{line-height:var(--lh-sm)}
table.hours thead th{border-color:var(--white)}
table.hours thead th span{opacity:1}
footer.site .fcols{gap:var(--s32)}
footer.site a,.crumbs a,.section-link a,.mapbox + p a,.closing .sub a,.reviewed a{display:inline-flex;align-items:center;min-height:var(--tap)}
footer.site li{margin:0}
footer.site .nm + p{margin-top:0}
.btn:focus-visible,.hd-call:focus-visible,.spbar a:focus-visible{outline-color:var(--ink)}
@media(max-width:900px){.layout{gap:var(--s40)}}
@media(max-width:720px){
  body{padding-bottom:calc(var(--s80) + env(safe-area-inset-bottom))}
  .doc{gap:var(--s32)}
  .photoband{grid-template-columns:1fr;gap:var(--s32)}
  .prepgrid{grid-template-columns:minmax(0,1fr)}
  /* 縦積みにすると flex-basis が高さになって空きが出る。SPでは基準を戻す */
  .news li{gap:var(--s8);flex-direction:column;align-items:stretch}
  .news .nmeta{width:auto}
  .news .ntxt{flex:0 1 auto}
}

.article a,.page-content a,aside .box a,.feelist + p a{display:inline-flex;align-items:center;min-height:var(--tap)}
aside .box.call a{display:flex;justify-content:center}

.article .faq-q{margin:0 0 var(--s4)}
.article .faq-a{margin:0 0 var(--s20)}
aside .box h3,.capsblock h3{margin-bottom:var(--s8)}

h2{line-height:var(--lh-h2)}
.subj .t{line-height:var(--lh-h3)}
.doc .ro,.news,.prep,.closing,.infocard,.subj,.reception-box,footer.site,.crumbs{line-height:var(--lh-sm)}
.face-neutral h2.sec::after,.grp::before{background:var(--brand-text)}

.article > .treatment-options{margin-top:var(--s40)}
.sec-lead + .photoband,.sec-lead + .doc{margin-top:var(--s32)}
.recruit-positions{list-style:none;padding:0}
.page-content > .recruit-positions{padding:0;margin-bottom:var(--s20)}
.recruit-positions li{padding:var(--s16) var(--s20);background:var(--neutral-face);border-radius:var(--r-btn)}
.recruit-positions h3{margin:0}
.recruit-positions p{margin-top:var(--s8)}
.wrap > p > a{display:inline-flex;align-items:center;min-height:var(--tap)}


/* ---- トップの診療内容の概要（説明文を出さず、項目名だけ並べる） ---- */
.outline{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s24) var(--s32)}
.ol-group h3{display:flex;align-items:center;gap:var(--s12);margin:0 0 var(--s8);
  font-size:var(--fs-h3);color:var(--ink)}
.ol-group h3::before{content:"";width:4px;height:1.1em;background:var(--brand);
  border-radius:var(--r-pill);flex:none}
.ol-group ul{margin:0;padding:0;list-style:none;font-size:var(--fs-sm);line-height:1.7}
.ol-group li{padding:var(--s4) 0 var(--s4) var(--s16);position:relative;color:var(--ink-2)}
.ol-group li::before{content:"";position:absolute;left:0;top:calc(0.85em);width:5px;height:5px;
  background:var(--line);border-radius:50%}
.ol-group li a{color:var(--brand-text);text-decoration:none;font-weight:600}
.ol-group li a:hover{text-decoration:underline}
.ol-group li:has(a)::before{background:var(--brand-text)}
.section-link{margin:var(--s32) 0 0}


/* ---- 押したときの反応（正本 §4「押下」）---- */
.subj:active,.symp a:active,.spnav summary:active,details.more summary:active{transform:scale(.99)}
.subj,.spnav summary,details.more summary{transition:background-color .15s,box-shadow .15s,transform .1s}
.spbar a:active,.hd-call:active{transform:scale(.98)}

/* ---- 開閉の動き（急に現れると読み手が置いていかれる）---- */
details.more[open] .body{animation:reveal .18s ease-out}
@keyframes reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  details.more[open] .body{animation:none}
  .subj:active,.symp a:active,.spbar a:active,.hd-call:active,
  .spnav summary:active,details.more summary:active{transform:none}
}

/* ---- 疾患ページのサイドバー（読んでいる途中の人に何を出すか）---- */
aside .box.call{position:relative}
aside .box h3{display:flex;align-items:center;gap:var(--s8)}
aside .box h3 .ic{color:var(--brand-text);font-size:var(--fs-h3)}
aside .sideguide{background:var(--brand-face);border:0;border-radius:var(--r-card);
  padding:var(--s20);margin-bottom:var(--s16);font-size:var(--fs-sm)}
aside .sideguide h3{margin:0 0 var(--s8);font-size:var(--fs-h3)}
aside .sideguide ul{margin:0;padding-left:var(--s20);line-height:1.7}
aside .sideguide li{margin-bottom:var(--s4)}


/* ---- 空の状態（正本 §4.1）---- */
.empty{font-size:var(--fs-sm);color:var(--ink-3);margin:0;padding:var(--s16) 0}
.empty b{display:block;color:var(--ink-2);font-weight:700;margin-bottom:var(--s4)}


/* ---- あわせてご覧ください（薄いページを行き止まりにしない） ---- */
.nextlinks{margin-top:var(--s40);padding-top:var(--s24);border-top:1px solid var(--line-soft)}
.nextlinks h2{font-family:var(--font-sans);font-size:var(--fs-h3);font-weight:700;
  margin:0 0 var(--s12);letter-spacing:0}
.nextlinks ul{display:flex;flex-wrap:wrap;gap:var(--s8);margin:0;padding:0;list-style:none}
.nextlinks a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s20);
  border:1px solid var(--line-soft);border-radius:var(--r-pill);background:var(--white);
  text-decoration:none;color:var(--brand-text);font-size:var(--fs-sm);font-weight:600}
.nextlinks a:hover{background:var(--brand-face);border-color:var(--brand-text)}
.nextlinks a::after{content:"";width:6px;height:6px;margin-left:var(--s8);
  border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(45deg) translateY(-1px)}

.asof{font-size:var(--fs-sm);color:var(--ink-3);margin:var(--s8) 0 0}

/* ============ 1画面目の下の事実の帯 ============ */
/* いつ開いているか・どこにあるか・予約が要るか。1枚のカードを罫で3分割し、
   1画面目の状態カードより軽く見せる（主役を2つ作らない） */
.factbar{display:grid;grid-template-columns:repeat(3,1fr);margin:var(--s24) 0 0;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--sh-sm);overflow:hidden}
.fact{padding:var(--s20);border-left:1px solid var(--line-soft)}
.fact:first-child{border-left:0}
.fact-h{display:flex;align-items:center;gap:var(--s8);margin:0 0 var(--s12);
  font-weight:700;font-size:var(--fs-sm);color:var(--ink-2)}
.fact-h .ic{color:var(--brand-text);font-size:var(--fs-h3)}
.fact-lead{margin:0;font-size:var(--fs-body);font-weight:700}
.fact-sub{margin:var(--s4) 0 0;font-size:var(--fs-xs);color:var(--ink-2);line-height:1.7}
.fact-more{margin:var(--s12) 0 0;font-size:var(--fs-sm)}
.fact .godays{background:transparent;padding:0;border:0}
.fact .gd-list{gap:var(--s8)}
.fact .gd-list li{border-left-width:2px}
.fact .gd-time{font-size:var(--fs-h3)}
.fact .gd-note{margin-top:var(--s8)}
@media (max-width:900px){
  .photo:not(.has-img) .spec dl{display:none}
  .factbar{grid-template-columns:1fr}
  .fact{border-left:0;border-top:1px solid var(--line-soft)}
  .fact:first-child{border-top:0}
}

/* ============ 診療内容のカード ============ */
/* 箱を並べない。列の区切りと見出しの強さで読ませる（囲みが増えるほど「どれも同じ」になる） */
.topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s40) var(--s32)}
.topic{background:none;border:0;border-top:3px solid var(--brand);border-radius:0;
  box-shadow:none;padding:var(--s16) 0 0}
.topic-ic{display:none}
.topic-ic .ic{color:var(--brand-text);font-size:var(--fs-h2)}
.topic h3{margin:0 0 var(--s4);font-size:var(--fs-h2);line-height:var(--lh-h2)}
.topic-lead{margin:0 0 var(--s12);font-size:var(--fs-xs);color:var(--ink-2);line-height:1.7}
.topic ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-soft)}
.topic li{border-bottom:1px solid var(--line-soft)}
.topic li a,.topic li{display:block;padding:var(--s8) 0;font-size:var(--fs-sm);line-height:1.7}

/* ============ 診療時間とアクセス（トップ） ============ */
/* どこにあって・いつやっているかを1画面に。左に横型の表、右に地図 */
.ha-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s32);align-items:start}
.ha-access .mapbox{margin:0}
.ha-access .mapbox iframe{height:240px}
.ha-addr{margin:var(--s12) 0 0;font-size:var(--fs-sm);font-weight:700}
.ha-near{margin:var(--s4) 0 0;font-size:var(--fs-sm);color:var(--ink-2)}
.ha-links{margin:var(--s12) 0 0;font-size:var(--fs-sm)}
table.hours-h{table-layout:fixed}
table.hours-h thead th{padding:var(--s8) var(--s4);font-size:var(--fs-sm)}
table.hours-h thead th:first-child{width:7.5em}
table.hours-h tbody th{text-align:left;padding:var(--s12) var(--s8);font-size:var(--fs-sm);line-height:1.4}
table.hours-h tbody th span{display:block;font-weight:400;font-size:var(--fs-xs);color:var(--ink-3)}
table.hours-h td{padding:var(--s12) var(--s4);text-align:center}
.legend-h{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s16);margin:var(--s12) 0 0;padding:0;list-style:none;font-size:var(--fs-xs);color:var(--ink-2)}
.legend-h li{display:inline-flex;align-items:center;gap:var(--s4)}
.ha-hours .hours-notes{margin-top:var(--s8)}
.ha-hours .closed-line{margin-top:var(--s12)}
@media(max-width:900px){
  .ha-grid{grid-template-columns:1fr;gap:var(--s24)}
  table.hours-h thead th{font-size:var(--fs-xs);padding:var(--s8) 0}
  table.hours-h thead th:first-child{width:6.8em}
  table.hours-h tbody th{padding:var(--s8) var(--s4);font-size:var(--fs-xs);white-space:nowrap}
  table.hours-h tbody th span{letter-spacing:-.02em}
  table.hours-h td{padding:var(--s8) 0;font-size:var(--fs-sm)}
}

/* ============ 締め（ご予約・ご相談） ============ */
/* 左: 何ができるか＋かけられる時間。右: 行動（電話＝番号を読ませる／Web予約）。緑のベタ面は使わない */
.closing{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s24) var(--s32);align-items:start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-sm);
  padding:var(--s32)}
.closing h2{margin:0 0 var(--s8);font-size:var(--fs-h2);line-height:var(--lh-h2)}
.closing p{margin:0 0 var(--s16);font-size:var(--fs-sm);color:var(--ink-2)}
.closing .godays{background:transparent;padding:0;border:0}
.closing .gd-list li{border-left-width:2px}
.closing .gd-time{font-size:var(--fs-h3)}
.closing-act{display:flex;flex-direction:column;gap:var(--s12)}
/* 診療時間は上のセクションが正。ここは念のための1行なので小さく、2列にまたがせる */
.closing-hours{grid-column:1/-1;margin:0;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2);
  border-top:1px solid var(--line-soft);padding-top:var(--s16)}
@media(max-width:820px){.closing{grid-template-columns:1fr}}
.closing-act .btn{width:100%}
.closing-act .btn.call{flex-direction:column;gap:0;padding:var(--s16) var(--s20)}
.closing-act .btn.call .num{font-size:var(--fs-num);letter-spacing:.02em;line-height:1.35}
.closing-act .btn.call .lbl{font-size:var(--fs-xs);font-weight:400;opacity:.9;line-height:1.7}
.closing-act .btn.call .ic{display:none}
@media(max-width:820px){
  .closing{grid-template-columns:1fr;gap:var(--s20);padding:var(--s20)}
}