/* 案C「入口の文字」v3生成器テンプレート 2026-10-03: ガラス戸に貼られた白い切り文字
   :root の --deep/--mid/--pale/--paler/--tint-op は build.py が店ごとに書き換える（下のプレースホルダ値） */
:root{
  --ink:#1a1a1a;
  --paper:#fff;
  --line:#cfd3d8;
  --sub:#555;
  --sub2:#666;
  --deep:#2f4a6b;
  --mid:#44627f;
  --pale:#d8dee6;
  --paler:#eef1f5;
  --tint-op:0.78;
}

*{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);
  margin-bottom:52px; /* R2(指摘2): 完成写真の下に余白。戸の節が終わってすぐ次の節に詰まらないように */
}
.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:var(--tint-op)}
@media (prefers-reduced-motion:reduce){
  html.js .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;
}
/* 稽古日が2行以上など、行数が多い店は固定ボタンにかからないよう開始位置を上げる（SPEC: 字を1段小さく/行を減らす の代替） */
.door .letters.compact{top:16%}
.ltr-name{font-size:44px;font-weight:700;letter-spacing:.03em}
.ltr-name.one{font-size:48px}
.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}
.ltr-sub.two{white-space:normal;letter-spacing:.2em}
.ltr-sub.two span{display:block;white-space:nowrap}
.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 + .ltr-time{margin-top:2px}
.ltr-time-note{margin:10px 0 0;font-size:15px;font-weight:400;white-space:nowrap}
.door .hk-photo-note.tr{z-index:5}

/* ガラス帯（R2指摘1）：入口の文法（店の色の平らな面＋白い貼り文字）を中盤に2回だけ再登場させる。
   白い短線は Hero だけ。帯には入れない。文字の左位置は Hero（左22px）と少し変える */
.glass-band{
  min-height:76px;
  display:flex;
  align-items:center;
  padding:16px 20px 16px 32px;
}
.glass-band.v2{padding-left:28px}
.glass-band p{
  margin:0;
  color:#fff;
  font-family:"Murecho","Hiragino Sans","Noto Sans JP",sans-serif;
  font-weight:500;
  font-size:23px;
  letter-spacing:.2em;
  line-height:1.35;
  word-break:keep-all;
}

/* 節の骨格 */
.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-tag{margin:8px 0 0;font-size:15px;color:var(--sub);font-weight:400}
.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}
.hours-note{margin:16px 0 0;font-size:14px;color:var(--sub)}

/* 流れ */
.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}
.office-table dd a{color:var(--deep);overflow-wrap:anywhere;word-break:break-all}

.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}
.contact-buttons{display:flex;flex-direction:column;gap:12px}
.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） R2(指摘4): 別設計。文字群は写真の左12〜38%、写真の主役は逆側58〜88%へ。Heroの高さ720〜760px */
@media (min-width:1024px){
  .door .stage{height:760px}
  .door{height:1672px} /* stage(760px) の約2.2倍。モバイルの 220svh と同じ比率でスクロール距離を確保 */
  .door .room-img{object-position:75% 50%}
  .door .letters{left:12%;right:auto;width:auto;max-width:44%}
  .ltr-name span{white-space:nowrap} /* 大見出しは2行とも折り返さない。長い行は38%幅のガイドをやや超えて張り出す（報告に記載） */
  .ltr-name{font-size:88px}
  .ltr-name.one{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} }

/* 司令塔: JSなし・動きを減らす設定では戸の節を1画面ぶんに（色だけの長い空白を出さない） */
html:not(.js) .door{height:100svh}
@media (prefers-reduced-motion:reduce){ .door{height:100svh} }

/* 司令塔: JSなし・動きを減らす設定の静止状態でも、ガラスの濃さは通常と同じ（白文字 4.5:1 を保つ） */
.door .tint{opacity:var(--tint-op)}
@media (prefers-reduced-motion:reduce){ html.js .door .tint{opacity:var(--tint-op)} }

/* ===== 司令塔 R2（Astra 89.5）の条件 ===== */
/* 2本目のガラス帯は構図を変える：高く・下寄せ・左を深く・文字を一段小さく */
.glass-band.v2{min-height:104px;align-items:flex-end;padding:16px 20px 18px 38px}
.glass-band.v2 p{font-size:20px}
/* 長い屋号（1行8字以上）はスマホで約10%小さく */
@media (max-width:1023px){ .ltr-name.long{font-size:40px} }