/* 案C「入口の文字」 2026-10-03: ガラス戸に貼られた白い切り文字 */
:root{
  --ink:#1a1a1a;
  --paper:#fff;
  --line:#cfd3d8;
  --sub:#555;
  --sub2:#666;
}
body.t-kido{ --deep:#2f4a6b; --mid:#44627f; --pale:#d8dee6; --paler:#eef1f5; }
body.t-goto{ --deep:#3b5e82; --mid:#4f7399; --pale:#dbe3ec; --paler:#eef2f6; }

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Hiragino Sans","Noto Sans JP",sans-serif;
  font-size:17px;
  line-height:1.9;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{
  margin:0;
  font-family:"Murecho","Hiragino Sans","Noto Sans JP",sans-serif;
  font-weight:500;
  line-height:1.3;
  color:var(--ink);
}
/* 見出しの手動改行（名前・一枚の言葉など）は行ごとにブロック化した span/br で区切る。
   地の文の長い見出し（はじめての方へ・流れ…等）は自然な折り返みに任せ、keep-allで溢れさせない */
.contact-lead{word-break:keep-all}

/* ヘッダー */
.site-header{
  background:var(--paper);
  height:52px;
  display:flex;
  align-items:center;
  padding:0 20px;
  border-bottom:1px solid var(--line);
}
.site-header-name{
  margin:0;
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
  font-family:"Hiragino Sans","Noto Sans JP",sans-serif;
  color:var(--ink);
}

/* ガラス戸の節 */
.door{
  position:relative;
  height:220svh;
  background:var(--deep);
}
.door .stage{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  margin:0;
  background:var(--deep);
}
.door .room{position:absolute;inset:0;margin:0}
.door .room-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  will-change:transform;
}
.door .tint{
  position:absolute;
  inset:0;
  background:var(--deep);
  opacity:.35;
  z-index:2;
  pointer-events:none;
}
html.js .door .tint{opacity:.78}
/* 後藤歯科（受付写真）は明るい部分が多く.78でも実測コントラストがわずかに届かなかったため、医院側だけ少し濃くする */
html.js body.t-goto .door .tint{opacity:.84}
@media (prefers-reduced-motion:reduce){
  html.js .door .tint,html.js body.t-goto .door .tint{opacity:.35}
}
.door .frame{
  position:absolute;
  left:12px;
  top:0;
  bottom:0;
  width:2px;
  background:#fff;
  z-index:3;
  pointer-events:none;
}
.door .letters{
  position:absolute;
  left:12px;
  right:12px;
  top:24%;
  z-index:4;
  color:#fff;
  will-change:transform,opacity;
}
.ltr-name{font-size:44px;font-weight:700;letter-spacing:.03em}
.ltr-name span{display:block}
.ltr-rule{width:120px;height:1px;background:#fff;margin:18px 0;border:0}
.ltr-sub{margin:0;font-size:20px;font-weight:500;letter-spacing:.2em;white-space:nowrap}
body.t-goto .ltr-sub{letter-spacing:normal}
.ltr-loc{margin:10px 0 0;font-size:15px;font-weight:400;letter-spacing:.2em;white-space:nowrap;font-family:"Murecho","Hiragino Sans","Noto Sans JP",sans-serif}
.ltr-time-label{margin:14px 0 0;font-size:15px;font-weight:400;letter-spacing:.2em;white-space:nowrap;font-family:"Murecho","Hiragino Sans","Noto Sans JP",sans-serif}
.ltr-time{margin:4px 0 0;font-size:17px;font-weight:500;white-space:nowrap;font-family:"Murecho","Hiragino Sans","Noto Sans JP",sans-serif}
.ltr-time-note{margin:10px 0 0;font-size:15px;font-weight:400;white-space:nowrap}
.door .hk-photo-note.tr{z-index:5}

/* 節の骨格 */
.subjects,.hours,.flow,.office,.contact{padding:56px 20px}
.subjects{background:var(--paper)}
.hours{background:var(--paper);border-top:1px solid var(--line)}
.flow{background:var(--paper);border-top:1px solid var(--line)}
.office{background:var(--paler);border-top:1px solid var(--line)}
.contact{background:var(--paper);border-top:1px solid var(--line)}
.subjects h2,.hours h2,.flow h2,.office h2,.contact h2{
  font-size:28px;font-weight:500;letter-spacing:.08em;margin-bottom:28px;
}
.subjects h2 span,.hours h2 span,.flow h2 span,.office h2 span,.contact h2 span{display:block}

/* 教えていること／診療内容 */
.subj-row{border-bottom:1px solid var(--line);padding:18px 0}
.subj-row:first-of-type{border-top:1px solid var(--line)}
.subj-row h3{font-size:40px;font-weight:700;letter-spacing:.02em}
.subj-sub{margin-top:32px}
.subj-sub h4{font-size:18px;font-weight:500;margin-bottom:12px;font-family:"Hiragino Sans","Noto Sans JP",sans-serif}
.plain-list{margin:0;padding:0;list-style:none}
.plain-list li{border-top:1px solid var(--line);padding:14px 0;font-size:16px}
.plain-list li:last-child{border-bottom:1px solid var(--line)}

/* 診療時間 */
.hours-table{margin:0}
.h-row{display:grid;grid-template-columns:120px minmax(0, 1fr);gap:4px 16px;padding:14px 0;border-top:1px solid var(--line)}
.h-row:first-child{border-top:none}
.hours-table dt{margin:0;font-size:15px;color:var(--sub);font-weight:400}
.hours-table dd{margin:0;font-size:17px;font-weight:500}

/* 流れ */
.flow-steps{margin:0;padding:0}
.flow-step{display:grid;grid-template-columns:40px minmax(0, 1fr);gap:0 16px;padding:16px 0;border-top:1px solid var(--line);align-items:start}
.flow-step:first-child{border-top:none}
.flow-num{font-family:"Murecho","Hiragino Sans",sans-serif;font-size:22px;font-weight:700;color:var(--deep)}
.flow-text{font-size:16px;padding-top:2px}
.flow-note{margin-top:20px;font-size:15px;color:var(--sub)}
.flow-extra{margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.flow-extra h4{font-size:16px;font-weight:500;margin-bottom:10px;font-family:"Hiragino Sans","Noto Sans JP",sans-serif}
.flow-extra ul{margin:0;padding:0;list-style:none;font-size:15px;color:#333}
.flow-extra li{padding:6px 0}

/* 教室情報／医院情報 */
.office-table{margin:0 0 28px}
.office-table .row{display:grid;grid-template-columns:140px minmax(0, 1fr);gap:4px 16px;padding:16px 0;border-top:1px solid var(--line)}
.office-table .row:first-child{border-top:none}
.office-table dt{margin:0;font-size:15px;color:var(--sub);font-weight:400}
.office-table dd{margin:0;font-size:17px;font-weight:400}

.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;
  background:#fff;color:var(--ink);font-size:16px;font-weight:700;text-decoration:none;
  border:2px solid var(--ink);letter-spacing:.02em;border-radius:0;
}
.btn-outline:hover{background:#f2f2f2}
.btn-outline:active{transform:translateY(1px)}
.btn-outline:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* 相談の窓口 */
.contact-lead{
  font-family:"Murecho","Hiragino Sans",sans-serif;
  font-size:36px;font-weight:500;letter-spacing:.04em;margin:0 0 24px;color:var(--ink);
  word-break:keep-all;
}
.contact-lead span{display:block}
.contact-sub{font-size:17px;margin:0 0 28px;color:#333}
.btn-solid{
  display:flex;align-items:center;justify-content:center;min-height:56px;width:100%;
  background:var(--deep);color:#fff;font-size:16px;font-weight:700;text-decoration:none;
  border:2px solid var(--deep);border-radius:0;letter-spacing:.02em;cursor:pointer;
}
.btn-solid:hover{background:var(--mid);border-color:var(--mid)}
.btn-solid:active{transform:translateY(2px)}
.btn-solid:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.contact-note{margin:14px 0 0;font-size:15px;color:var(--sub2)}

/* フッター */
.site-footer{background:var(--paper);border-top:1px solid var(--line);padding:28px 20px calc(28px + 16px)}
.site-footer .ft-note{font-size:13px;line-height:1.7;color:#48484c}
.site-footer .ft-note p{margin:0 0 8px}
.site-footer .ft-note b{color:#1a1a1a;font-weight:700}
.site-footer .credit{margin:10px 0 0;font-size:12.5px;color:#767676}

/* 動きを止める（reduced-motion）：完成状態＝文字も部屋も見える */
@media (prefers-reduced-motion:reduce){
  .door .room-img,.door .letters{transform:none !important;opacity:1 !important}
}

/* PC（≥1024） */
@media (min-width:1024px){
  .door .letters{left:8vw;right:auto;max-width:760px}
  .ltr-name{font-size:88px}
  .ltr-sub{font-size:24px}
  .ltr-time-label{font-size:20px}
  .ltr-time{font-size:20px}
  .ltr-loc{font-size:17px}
  .ltr-time-note{font-size:16px}

  .subjects,.hours,.flow,.office,.contact{padding:96px 64px}
  .subjects .wrap,.hours .wrap,.flow .wrap,.office .wrap,.contact .wrap{
    max-width:1100px;margin:0 auto;display:grid;grid-template-columns:320px minmax(0, 1fr);gap:0 48px;
  }
  .subjects h2,.hours h2,.flow h2,.office h2,.contact h2{margin-bottom:0}
  .subj-row h3{font-size:56px}
  .contact-lead{font-size:48px}
}

/* 司令塔: 見出しの墨色指定より優先して、切り文字の名前を白に／戸の縁の線から離す */
.door .letters .ltr-name{color:#fff}
@media (max-width:1023px){ .door .letters{left:22px;right:6px} }

/* 見比べ用の切り替えバー（デモだけ） */
.hk-switch{position:fixed;top:0;left:0;right:0;z-index:9600;height:40px;display:flex;align-items:center;gap:6px;padding:0 10px;background:#111;color:#fff;font:600 13px/1 "Hiragino Sans","Noto Sans JP",sans-serif;letter-spacing:0}
.hk-switch span{color:#aaa;margin-right:4px;white-space:nowrap;font-weight:400}
.hk-switch a{flex:1;text-align:center;color:#fff;text-decoration:none;padding:8px 0;border:1px solid #666;white-space:nowrap}
.hk-switch a.on{background:#fff;color:#111;border-color:#fff}
.hk-switch a.kind{flex:0 0 auto;padding:8px 10px;border-color:#444;color:#ddd}
body{padding-top:40px}
html.js .stage{top:40px !important;height:calc(100svh - 40px) !important}
@media (prefers-reduced-motion:reduce){ html.js .stage{position:static !important;height:auto !important} }