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

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

  /* D案: 見出しも本文も同じUD書体。補足も18px以上で読む。 */
  --font-sans:"BIZ UDPGothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --font-serif:var(--font-sans);
  --fs-display:40px; --lh-display:1.45;
  --fs-h1:32px; --lh-h1:1.45;
  --fs-h2:28px; --lh-h2:1.45;
  --fs-h3:22px; --lh-h3:1.45;
  --fs-body:20px; --lh-body:1.9;
  --fs-sm:19px; --lh-sm:1.7;
  --fs-xs:18px; --lh-xs:1.7;
  --fs-num:28px; --lh-num:1.45;

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

  /* 角丸 */
  --r-btn:4px; --r-card:4px; --r-panel:4px; --r-pill:4px;

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

  --maxw:1200px; --maxw-read:800px;
}
@media(max-width:720px){
  :root{--fs-display:28px;--fs-h1:28px;--fs-h2:24px;--fs-h3:20px;--fs-num:24px}
}

/* ============ 土台 ============ */
*{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)}}

/* 写真の下: 状態カードと資格を横に */
.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-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)}
}

/* ============ 小さい仮写真のレイアウト（photo_plan.json layout=small） ============ */
/* 現行サイトの写真は 260×180（院内）・470×188（1画面目）・181×225（医師）。元の画素数より大きく出さない。
   撮影した写真に差し替えて layout を外せば、上の通常レイアウトに戻る */
/* 1画面目の写真の枠。既定は現行サイトの写真（470×188）。医院ごとの値は photo_plan.json hero_box から <html style> で上書き */
:root[data-photo="small"]{--hero-w:470px;--hero-ratio:470/188}
:root[data-photo="small"] .hero-visual:has(.photo.has-img){display:grid;grid-template-columns:minmax(0,1fr) var(--hero-w,470px);
  gap:var(--s32);align-items:center;max-width:var(--maxw);padding:var(--s32) var(--s20) 0}
:root[data-photo="small"] .hero-visual:has(.photo.has-img) .th-photo{order:2}
:root[data-photo="small"] .hero-visual:has(.photo.has-img) .th-photo .photo{aspect-ratio:var(--hero-ratio,470/188);
  border-radius:var(--r-card);border:1px solid var(--line-soft)}
:root[data-photo="small"] .hero-visual:has(.photo.has-img) .th-photo .photo.has-img img{object-position:center}
:root[data-photo="small"] .hero-visual:has(.photo.has-img) .hero-copy{position:static;background:none;padding:0;order:1}
:root[data-photo="small"] .hero-visual:has(.photo.has-img) .hero-copy>*{max-width:none;margin-left:0;margin-right:0}
:root[data-photo="small"] .hero-visual:has(.photo.has-img) .hero-copy h1,
:root[data-photo="small"] .hero-visual:has(.photo.has-img) .hero-copy .th-near{color:var(--ink-2)}
:root[data-photo="small"] .hero-visual:has(.photo.has-img) .hero-copy .catch{color:var(--ink)}
:root[data-photo="small"] .th-below{max-width:var(--maxw)}
:root[data-photo="small"] .bandfull{grid-template-columns:repeat(3,260px);justify-content:start;gap:var(--s12);
  max-width:var(--maxw);margin-left:auto;margin-right:auto;padding:0 var(--s20)}
:root[data-photo="small"] .photoband{grid-template-columns:repeat(3,minmax(0,260px));justify-content:start}
:root[data-photo="small"] .bandfull .photo,:root[data-photo="small"] .photoband .photo{border-radius:var(--r-card)}
:root[data-photo="small"] .doc>.photo{width:181px;aspect-ratio:181/225}
:root[data-photo="small"] .photo-one:empty{display:none}
@media(max-width:820px){
  :root[data-photo="small"] .hero-visual:has(.photo.has-img){grid-template-columns:1fr;gap:var(--s16);padding:var(--s16) var(--s20) 0}
  :root[data-photo="small"] .hero-visual:has(.photo.has-img) .th-photo{order:1;max-width:var(--hero-w,470px)}
  :root[data-photo="small"] .hero-visual:has(.photo.has-img) .hero-copy{order:2}
  :root[data-photo="small"] .bandfull,:root[data-photo="small"] .photoband{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s8)}
  :root[data-photo="small"] .doc>.photo{width:181px}
}

/* ============ D案: 読む場所・押す場所を明確にする ============ */
a[href]{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
a[href]:not(.subj){display:inline-flex;align-items:center;min-height:var(--tap)}
a[href]:hover{text-decoration-thickness:2px}
button{font:inherit}
h1,h2,h3{font-weight:700;letter-spacing:.01em}
header.site{position:relative;border-bottom:2px solid var(--line);backdrop-filter:none}
header.site nav a{padding:0 var(--s8);color:var(--brand-text)}
header.site .brand{min-height:var(--tap)}
.tophero{background:var(--white);padding:0 0 var(--s40)}
.hero-visual{max-width:none;padding:0}
.th-photo .photo{aspect-ratio:3/1}
.th-frames{position:relative}
.th-dots{position:static;background:var(--white);gap:var(--s8);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.th-dots .dot{display:grid;place-items:center;width:56px;height:56px;border:0;border-radius:var(--r-btn);background:var(--white)}
.th-dots .dot::before{content:"";width:12px;height:12px;border:2px solid var(--brand-text);border-radius:50%}
.th-dots .dot.on{background:var(--white)}
.th-dots .dot.on::before{background:var(--brand-text)}
.th-below{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s32);margin:var(--s32) auto 0;align-items:start}
.hero-copy{padding:var(--s16) 0 0}
.hero-copy .catch{word-break:auto-phrase;overflow-wrap:normal;text-wrap:pretty;margin-top:var(--s16)}
.hero-copy .th-near{margin-top:var(--s20)}
.statuscard{background:var(--brand-face);border:2px solid var(--brand-text);padding:var(--s24);box-shadow:none}
.mainbtns .btn{min-height:80px}
.th-badges{grid-column:1/-1;margin:0 auto;width:100%;border-top:1px solid var(--line);padding-top:var(--s20)}
.badges{gap:var(--s16) var(--s32)}
.badges li,.quals li{background:var(--white);padding:0;font-weight:400}
section.face-brand,section.face-neutral,section.face-photo,.pagehero{background:var(--white)}
section{border-top:2px solid var(--line)}
h2.sec{padding-bottom:var(--s20);margin-bottom:var(--s24);border-bottom:2px solid var(--line)}
h2.sec::after,.grp::before,.ol-group h3::before{display:none}
.infocard,details.more,aside .box,.factbar,.closing,a.subj,.btn.fill{box-shadow:none}
.prep,.topic,.prep-cutoff{border-top:2px solid var(--line)}
.ourcare,aside .sideguide,.godays{background:var(--white);border:1px solid var(--line)}
.news .cat{background:var(--white)}
.subj.plain{border:0;border-bottom:1px solid var(--line);border-radius:0}
.ha-grid{grid-template-columns:1fr;gap:var(--s40)}
.ha-access{display:grid;grid-template-columns:1fr 1fr;gap:var(--s12) var(--s32);align-items:start}
.ha-access .mapbox{grid-row:1/5}
.ha-access .mapbox iframe{height:300px}
.ha-addr,.ha-near,.ha-links{margin:0}
.ha-links a{display:flex;align-items:center}
table.hours{min-width:640px;font-size:var(--fs-body)}
table.hours th,table.hours td{border:2px solid var(--line);padding:var(--s20) var(--s8)}
table.hours thead th,.page-content .hours thead th{background:var(--white);color:var(--ink);border-color:var(--line);font-size:var(--fs-body)}
table.hours-h thead th:first-child{width:10em}
table.hours tbody th,table.hours-h tbody th{font-size:var(--fs-body);padding:var(--s20) var(--s12)}
table.hours tbody th span{font-size:var(--fs-xs)}
table.hours td.o,table.hours td.x{font-size:var(--fs-h2);font-weight:700}
.legend-h{font-size:var(--fs-sm);gap:var(--s12) var(--s32)}
.legend .mk{width:40px;height:40px;border:0;font-size:var(--fs-h2)}
.legend .mk:first-child{color:var(--ink)}
.hours-wrap:focus-visible{outline:3px solid var(--brand-text);outline-offset:2px}
.layout{grid-template-columns:minmax(0,1fr) 340px}
aside .stick{position:static;max-height:none;overflow:visible}
.article h2{border-bottom-color:var(--line)}
.nextlinks a,.ol-group a,.topic a,.fact-more a{display:inline-flex;align-items:center;min-height:var(--tap)}
footer.site{border-top:2px solid var(--line)}
aside .box.call h3,aside .box.call h3 .ic{color:var(--white)}
@media(max-width:1100px){
  header.site nav,.hd-call{display:none}
  .spnav{display:block}
  .layout{grid-template-columns:1fr}
}
@media(max-width:820px){
  .th-photo .photo{aspect-ratio:4/3}
  .th-below{grid-template-columns:1fr;gap:var(--s24);padding-left:var(--s20);padding-right:var(--s20)}
  .hero-copy{padding:0}
  .ha-access{grid-template-columns:1fr}
  .ha-access .mapbox{grid-row:auto}
  .statuscard{padding:var(--s20)}
  .th-badges{margin:0 auto}
  .badges{display:grid;gap:var(--s16)}
}

aside table.hours{min-width:640px}
/* 医院名とボタンには下線を付けない（下線は文中のリンクだけにする） */
.brand,.btn,.hd-call,.spbar a,header.site nav a,.spnav summary{text-decoration:none}
@media(max-width:720px){
  /* スマホは画面下の固定バーと1画面目の大きな電話ボタンで電話できる。ヘッダーの電話は医院名を押し出すので出さない */
  .hd-call{display:none}
  /* 診療時間の表は横スクロールさせず、9列を画面に収める（木〜祝が隠れるのを防ぐ） */
  table.hours,aside table.hours{min-width:0;font-size:var(--fs-sm)}
  table.hours th,table.hours td{border-width:1px;padding:var(--s12) var(--s4)}
  table.hours-h thead th:first-child{width:5.5em}
  table.hours tbody th,table.hours-h tbody th{font-size:var(--fs-sm);padding:var(--s12) var(--s8)}
  table.hours thead th,.page-content .hours thead th{font-size:var(--fs-sm)}
  table.hours td.o,table.hours td.x{font-size:var(--fs-h3)}
}
/* 上の2つの指定より強く効かせる（a[href] の下線と header 内の電話ボタン表示に勝つため） */
a[href].brand,a[href].btn,a[href].hd-call,.spbar a[href],header.site nav a[href]{text-decoration:none}
@media(max-width:720px){
  header.site a.hd-call{display:none}
  table.hours tbody th,table.hours-h tbody th{white-space:normal;width:5em}
  table.hours tbody th span{font-size:var(--fs-xs);line-height:1.4}
  table.hours-h thead th:first-child{width:5em}
}

/* ==== READING LAYER START ==== */
/* 診療ページの本文（.article）を読みやすくする層。5案共通。正本は design-patterns/goto-2026-10-09/READING_LAYER.css。
   本文の書体は各案の見た目より読みやすさを優先して BIZ UDPゴシック（ユニバーサルデザイン書体）にそろえる。
   眼科なので、見えにくい方・高齢の方が長い文章を読む前提で、大きさ・行間・区切りを決めている */
:root{
  --font-read:"BIZ UDPGothic","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","YuGothic",Meiryo,sans-serif;
  --fs-read:18px; --fs-read-lead:19px; --fs-read-h3:21px; --fs-read-h2:26px; --fs-read-badge:15px;
  --read-measure:40em;      /* 1行が長すぎると次の行頭を見失う。全角で40字前後に収める */
  --read-tap:56px;          /* 折りたたみの見出しは押す場所なので大きく */
  --read-badge:32px;        /* Q・A・手順の番号の丸 */
  --read-accent:var(--brand-text);  /* 白文字を載せる色（コントラスト4.5以上） */
  --read-mark:var(--brand);         /* 線と印だけに使う色（文字は載せない） */
}
@media(max-width:720px){
  :root{--fs-read:17px;--fs-read-lead:18px;--fs-read-h3:19px;--fs-read-h2:22px;--read-badge:28px}
}

/* 本文: 細い書体と広い字間をやめ、濃い文字・ゆったりした行間にする */
.layout>.article{font-family:var(--font-read);font-size:var(--fs-read);line-height:1.9;color:var(--ink);
  letter-spacing:.02em;font-feature-settings:normal}
.layout>.article :is(h2,h3,p,li,summary,strong,b,dt,dd,td,th){font-family:var(--font-read);letter-spacing:.02em}
.layout>.article p{margin:0 0 var(--s12);max-width:var(--read-measure);font-size:var(--fs-read);color:var(--ink)}
.layout>.article strong{font-weight:700;color:var(--ink)}

/* 大見出し（症状・検査・治療…の区切り）: 色の帯と太い線で、どこから次の話かを一目で分かるように */
.layout>.article .keyblock{margin:0 0 var(--s40);padding:0;background:none;border:0;box-shadow:none}
.layout>.article h2{font-size:var(--fs-read-h2);line-height:1.45;font-weight:700;color:var(--ink);
  margin:var(--s56) 0 var(--s20);padding:var(--s12) var(--s16);background:var(--brand-face);
  border:0;border-left:6px solid var(--read-mark);border-radius:0;text-align:left}
.layout>.article h2::before,.layout>.article h2::after{content:none;display:none}
/* 小見出し: 本文より一段大きく、下線で段落と分ける */
.layout>.article h3{font-size:var(--fs-read-h3);line-height:1.45;font-weight:700;color:var(--ink);
  margin:var(--s40) 0 var(--s12);padding:0 0 var(--s8);border:0;border-bottom:2px solid var(--line-soft);background:none}
.layout>.article h3::before{content:"";display:inline-block;width:var(--s8);height:1em;margin:0 var(--s8) 0 0;
  background:var(--read-mark);vertical-align:-.12em;border-radius:0}
.layout>.article h3::after{content:none}
/* 太字だけの行（「どんな手術か」など）は、本文の中の小さな見出しとして扱う */
.layout>.article p.lead-in{font-size:var(--fs-read-lead);font-weight:700;line-height:1.7;
  margin:var(--s32) 0 var(--s8);padding:0 0 0 var(--s12);border-left:4px solid var(--read-mark)}
/* 太字で始まる注意（「まず知っておいていただきたいこと」など）は囲みで目立たせる */
.layout>.article .key{margin:var(--s24) 0;padding:var(--s16) var(--s20);background:var(--white);
  border:2px solid var(--read-accent);border-radius:var(--r-card)}
.layout>.article .key p:last-child{margin-bottom:0}

/* 箇条書き: 行の間をあけ、印を色付きにして項目の頭をそろえる */
.layout>.article ul,.layout>.article ol{margin:0 0 var(--s20);padding:0 0 0 var(--list-indent);max-width:var(--read-measure)}
.layout>.article li{margin:0 0 var(--s8);padding:0 0 0 var(--s4);line-height:1.7;font-size:var(--fs-read);
  border:0;color:var(--ink)}
.layout>.article ul li::marker{color:var(--read-mark)}
.layout>.article ul.plainlist{list-style:disc;padding-left:var(--list-indent)}
.layout>.article ul.plainlist li{padding:0 0 0 var(--s4);border:0}
/* 手順（1. 2. 3.）: 丸数字と区切り線で、今どこを読んでいるか分かるように */
.layout>.article ol.steps{list-style:none;padding:0;counter-reset:st}
.layout>.article ol.steps li{counter-increment:st;position:relative;margin:0;
  padding:var(--s12) 0 var(--s12) var(--s56);border-bottom:1px solid var(--line-soft)}
.layout>.article ol.steps li::before{content:counter(st);position:absolute;left:0;top:var(--s12);
  width:var(--read-badge);height:var(--read-badge);border-radius:50%;background:var(--read-accent);color:var(--white);
  display:grid;place-items:center;font-size:var(--fs-read-badge);font-weight:700;line-height:1.35}

/* はじめの要点: 白地に色の枠。地の色と区別して「まずここを読む」場所にする */
.layout>.article .summary{background:var(--white);border:2px solid var(--read-accent);border-radius:var(--r-card);
  padding:var(--s24);margin:0 0 var(--s40);box-shadow:none}
.layout>.article .summary h2{margin:0 0 var(--s12);padding:0;background:none;border:0;font-size:var(--fs-read-h3)}
.layout>.article .summary ul{margin:0;font-size:var(--fs-read)}
.layout>.article .summary li{font-size:var(--fs-read);line-height:1.7}
/* 当院の対応: 一般論と分けて、この医院の話だと分かるように面を付ける */
.layout>.article .ourcare{background:var(--brand-face);border:0;border-radius:var(--r-card);padding:var(--s24);margin:var(--s40) 0}
.layout>.article .ourcare h2{margin:0 0 var(--s16);padding:0;background:none;border:0}

/* 折りたたみ: 押せることと、開いているかどうかを言葉で示す */
.layout>.article details.more{margin:var(--s16) 0 var(--s24);border:2px solid var(--line);border-radius:var(--r-card);
  background:var(--white);box-shadow:none}
.layout>.article details.more>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s12);
  min-height:var(--read-tap);padding:var(--s12) var(--s20);list-style:none;cursor:pointer;
  font-size:var(--fs-read);font-weight:700;line-height:1.45;color:var(--ink);background:none;border:0}
.layout>.article details.more>summary::-webkit-details-marker{display:none}
.layout>.article details.more>summary::before{content:none;display:none}
.layout>.article details.more>summary::after{content:"開く ＋";flex:none;position:static;transform:none;
  width:auto;height:auto;padding:var(--s4) var(--s12);border:2px solid var(--read-accent);border-radius:var(--r-pill);
  background:none;color:var(--read-accent);font-size:var(--fs-read-badge);font-weight:700;line-height:1.4}
.layout>.article details.more[open]>summary::after{content:"閉じる －"}
.layout>.article details.more[open]>summary{border-bottom:1px solid var(--line-soft)}
.layout>.article details.more>.body{padding:var(--s20);border:0}
.layout>.article details.more>.body>:first-child{margin-top:0}

/* よくあるご質問: 質問と答えを1組ずつの枠にし、Q と A の印を付ける */
.layout>.article .qa{margin:0 0 var(--s16);border:1px solid var(--line-soft);border-radius:var(--r-card);
  overflow:hidden;background:var(--white)}
.layout>.article .faq-q,.layout>.article .faq-a{position:relative;margin:0;max-width:none;
  padding:var(--s16) var(--s20) var(--s16) var(--s56)}
.layout>.article .faq-q{background:var(--brand-face);font-size:var(--fs-read-lead);font-weight:700;line-height:1.7;color:var(--ink)}
.layout>.article .faq-a{font-size:var(--fs-read);line-height:1.9;color:var(--ink)}
.layout>.article .faq-q::before,.layout>.article .faq-a::before{position:absolute;left:var(--s16);top:var(--s16);
  width:var(--read-badge);height:var(--read-badge);border-radius:50%;display:grid;place-items:center;
  font-size:var(--fs-read-badge);font-weight:700;line-height:1.35}
.layout>.article .faq-q::before{content:"Q";background:var(--read-accent);color:var(--white)}
.layout>.article .faq-a::before{content:"A";background:var(--white);color:var(--read-accent);border:2px solid var(--read-accent)}
.layout>.article details.more .qa:last-child{margin-bottom:0}

/* 監修の表示とページ末の電話: 小さすぎる文字をやめ、番号と説明を別の行にする */
.layout>.article .reviewed{font-size:var(--fs-sm)}
.layout>.article .closing-act .btn{flex-direction:column;align-items:center;justify-content:center;gap:var(--s4)}
.layout>.article .closing-act .btn .num{display:block}
/* 右の案内欄も本文と同じ書体にし、13pxの文字をなくす */
.layout aside{font-family:var(--font-read)}
.layout aside :is(li,p,.gd-note,.gd-days,.sub){font-size:var(--fs-sm);letter-spacing:.02em}
/* ページ末の「ご予約・ご相談」は本文の大見出しではないので帯を付けない */
.layout>.article .closing h2{margin:0 0 var(--s8);padding:0;background:none;border:0;font-size:var(--fs-read-h3)}
/* 中身（費用の表）がまだ出せない見出しは、確認モード以外では出さない（見出しだけ残ると読み手が迷う） */
body:not(.review) .layout>.article h3:has(+ .gated.stg){display:none}

/* ---- 色を濃くする（2026-10-11 指摘「色のトンマナが薄い」）。高齢の方が読む前提で、淡い色に頼らない ---- */
:root{
  --read-ink:#1c1c1c;          /* 本文の文字。白地で16.9 */
  --read-tint:#e2eefa;         /* 濃い色の薄め。面に使う（文字は --read-ink か --read-accent） */
  --read-line:#8fb0cf;         /* 枠と区切り線 */
  --read-marker:#ffe680;       /* 大事な文の下線マーカー */
  --read-warn-face:#fff4d6;    /* 注意の囲みの面 */
  --read-warn-line:#c77800;    /* 注意の囲みの線（文字には使わない） */
}
.layout>.article,.layout>.article p,.layout>.article li{color:var(--read-ink)}
.layout>.article strong{color:var(--read-ink);background:linear-gradient(transparent 62%,var(--read-marker) 62%)}
/* 大見出し: 濃い色の帯に白文字 */
.layout>.article h2{background:var(--read-accent);color:var(--white);border:0;border-radius:var(--r-btn);
  padding:var(--s16) var(--s20)}
/* 小見出し: 色の文字と太い線 */
.layout>.article h3{color:var(--read-accent);border-bottom:3px solid var(--read-accent)}
.layout>.article h3::before{background:var(--read-accent);width:var(--s8)}
.layout>.article p.lead-in{color:var(--read-accent);border-left:6px solid var(--read-accent)}
.layout>.article ul li::marker{color:var(--read-accent)}
.layout>.article ol.steps li{border-bottom:2px solid var(--read-line)}
/* はじめの要点・当院の対応: 色の面と太い枠 */
.layout>.article .summary{background:var(--read-tint);border:3px solid var(--read-accent)}
.layout>.article .summary h2{background:none;color:var(--read-accent);padding:0;border-radius:0}
.layout>.article .ourcare{background:var(--read-tint);border:3px solid var(--read-accent)}
.layout>.article .ourcare h2{background:none;color:var(--read-accent);padding:0;border-radius:0}
/* 注意の囲み: 黄色の面と橙の太い線（注意だと一目で分かる色） */
.layout>.article .key{background:var(--read-warn-face);border:0;border-left:8px solid var(--read-warn-line);border-radius:var(--r-btn)}
.layout>.article .key strong{background:none}
/* 折りたたみ: 濃い色の太い枠、「開く」は塗りのボタン */
.layout>.article details.more{border:3px solid var(--read-accent)}
.layout>.article details.more>summary{color:var(--read-accent)}
.layout>.article details.more>summary::after{background:var(--read-accent);color:var(--white);border-color:var(--read-accent)}
.layout>.article details.more[open]>summary{background:var(--read-tint);border-bottom:2px solid var(--read-accent)}
/* よくあるご質問: 質問は色の面と色の文字、枠は太く */
.layout>.article .qa{border:2px solid var(--read-accent)}
.layout>.article .faq-q{background:var(--read-tint);color:var(--read-accent);border-bottom:2px solid var(--read-line)}
.layout>.article .faq-a::before{border-width:3px}
/* ページ末の「ご予約・ご相談」は帯にしない */
.layout>.article .closing h2{background:none;color:var(--read-ink);padding:0;border-radius:0}
/* 角の丸みは案ごとの値に頼らず小さく固定（大きい丸みだと囲みが丸い形に崩れる） */
:root{--r-read:8px}
.layout>.article h2,.layout>.article .key{border-radius:var(--r-read)}
.layout>.article .summary,.layout>.article .ourcare,.layout>.article details.more,.layout>.article .qa{border-radius:var(--r-read)}
/* 黄色のマーカーは文の中の強調だけ。手順や箇条書きの頭の太字は太字だけにする（付けすぎると目立たなくなる） */
.layout>.article li strong{background:none}
:root{--fs-read:20px;--fs-read-lead:21px;--fs-read-h3:23px;--fs-read-h2:28px}
@media(max-width:720px){:root{--fs-read:19px;--fs-read-lead:20px;--fs-read-h3:21px;--fs-read-h2:24px}}
/* ==== READING LAYER END ==== */