/* 案B「見渡す」v3 生成器 2026-10-03。土台＝directions/b/style.css。色は <head> で店ごとに上書き（write_style_vars） */
:root{
  --ink:#1a1a1a;
  --white:#fff;
  --sub:#555;
  --mute:#707070;
  --line:#cfd3d8;
  --store-deep:#2f4a6b;
  --store-mid:#44627f;
  --store-pale:#d8dee6;
  --store-pale2:#eef1f5;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:"Hiragino Sans","Noto Sans JP",sans-serif;
  font-size:17px;
  line-height:1.9;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:"BIZ UDPMincho","Hiragino Mincho ProN",serif;
  font-weight:400;
  letter-spacing:.04em;
  line-height:1.3;
  margin:0;
  color:var(--ink);
  word-break:keep-all;
}

img{max-width:100%;height:auto;display:block}

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

/* 見渡す節 */
.look{
  position:relative;
  background:var(--white);
}
html.js .look{height:220svh}
html.js .look.no-photo{height:auto}

.stage{
  background:var(--white);
}
html.js .stage{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr auto;
}
html.js .look.no-photo .stage{
  position:static;
  height:auto;
  overflow:visible;
  display:block;
}

.look .top{
  padding:20px 16px 12px;
}
@media (max-width:1023.98px){
  /* R2（Astra指摘3）：店ごとにHeroタイトルの左位置を変える（JSONのtitle_offset） */
  .look-head{margin-left:var(--title-offset,0px)}
}
.look-title{
  display:block;
  font-size:44px;
}
.look-title span{
  display:block;
}
.look-rule{
  width:48px;
  height:2px;
  background:var(--store-deep);
  margin:14px 0;
}
.look-line{
  margin:0;
  font-size:17px;
  color:var(--ink);
}

.pan{
  position:relative;
  min-height:0;
}
html.js .pan{
  overflow:hidden;
  height:100%;
}
.pan-img{
  width:100%;
  height:auto;
  display:block;
}
html.js .pan-img{
  width:auto;
  height:100%;
  max-width:none;
  will-change:transform;
}

.look .bottom{
  padding:12px 16px 20px;
}
html.js .look .bottom{
  padding:12px 16px calc(56px + 20px);
}
html.js .look.no-photo .bottom{
  padding:12px 16px 20px;
}
.look-more{
  margin:0;
  font-size:15px;
  color:var(--sub);
}

/* reduced-motion：完成状態＝静止した横長写真。sticky を切る */
@media (prefers-reduced-motion:reduce){
  html.js .look{height:auto}
  html.js .stage{position:static;height:auto;display:block}
  html.js .pan{overflow:visible;height:auto}
  html.js .pan-img{width:100%;height:auto;max-width:100%;transform:none !important;object-position:50% 50% !important}
  html.js .look .bottom{padding:12px 16px 20px}
}

/* 見渡す・中盤の再登場（Astra R1 指摘1：Hero＋中盤＋終盤＝合計3回）
   帯の幅・はみ出し量はJSから data-side / data-move と合わせて使う。 */
.look-mid{
  background:var(--white);
  border-top:1px solid var(--line);
  padding:40px 0;
}
.look-mid-crop{
  overflow:hidden;
  width:100%;
}
.look-mid-frame{
  position:relative;
}
.look-mid-img{
  display:block;
  width:100%;
  height:auto;
}
.look-mid-cap{
  padding:10px 16px 0;
}
.look-mid-cap .hk-photo-note{display:inline-block}
@media (prefers-reduced-motion:reduce){
  .look-mid-img{transform:none !important}
}
@media (min-width:1024px){
  .look-mid{padding:64px 0}
  .look-mid-cap{padding:12px 64px 0}
}

/* 教えていること／診療内容・時間割・流れ・お持ちいただくもの・情報 共通の節骨格
   R2（Astra指摘2）：情報部分の幅を3種類に（390で：大きな節=sec-feature 左右18px／本文=sec-text 30〜34px／小さな事実表=sec-table 左56px・右24px） */
.subjects,.hours,.flow,.bring,.office{
  background:var(--white);
  border-top:1px solid var(--line);
}
.sec-feature{padding:56px 18px}
.sec-text{padding:56px 32px}
.sec-table{padding:56px 24px 56px 56px}
.subjects h2,.hours h2,.flow h2,.bring h2,.office h2{
  font-size:28px;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:28px;
}
.subjects h2::before,.hours h2::before,.flow h2::before,.bring h2::before,.office h2::before{
  content:"";
  display:block;
  width:24px;
  height:2px;
  background:var(--store-deep);
  order:-1;
}
@media (max-width:1023.98px){
  /* R2（Astra指摘2）：全部ではなく2節だけ見出しを右へずらす */
  .flow h2{margin-left:40px}
  .office h2{margin-left:34px}
}

/* 教えていること／診療内容 */
.subject-list{margin:0 0 36px}
.subject-row{
  border-bottom:1px solid var(--line);
  padding:18px 0;
}
.subject-row:first-child{border-top:1px solid var(--line)}
.subject-name{
  font-size:40px;
  margin:0;
}
.subject-tag{
  margin:6px 0 0;
  font-size:15px;
  color:var(--sub);
}
.subject-extra-photo{margin:28px 0 0}

/* R2（Astra指摘4）：事実が少ない店（schedule無し・subjects2つ以下）は科目名を大きく余白で */
.subjects.sparse .subject-list{margin-bottom:40px}
.subjects.sparse .subject-row{border:0;padding:0;margin-bottom:72px}
.subjects.sparse .subject-row:first-child{border-top:0}
.subjects.sparse .subject-row:last-child{margin-bottom:0}
.subjects.sparse .subject-name{font-size:40px;letter-spacing:.03em}
.sub-heading{
  font-size:18px;
  font-weight:700;
  margin:0 0 16px;
  font-family:"Hiragino Sans","Noto Sans JP",sans-serif;
  letter-spacing:.02em;
}
.sub-list,.bring-list{
  margin:0;
  padding:0;
  list-style:none;
}
.sub-list li,.bring-list li{
  border-top:1px solid var(--line);
  padding:14px 0;
  font-size:16px;
}
.sub-list li:last-child,.bring-list li:last-child{border-bottom:1px solid var(--line)}

/* 時間割（診療時間／稽古日と時間） */
.hours-table{
  margin:0;
  display:grid;
  grid-template-columns:120px 1fr;
  gap:0;
}
.hours-table .row{
  display:grid;
  grid-template-columns:120px 1fr;
  grid-column:1 / -1;
  border-top:1px solid var(--line);
  padding:14px 0;
}
.hours-table .row:last-child{border-bottom:1px solid var(--line)}
.hours-table dt{
  margin:0;
  font-size:16px;
  color:var(--sub);
  font-weight:400;
}
.hours-table dd{
  margin:0;
  font-size:17px;
  font-variant-numeric:tabular-nums;
}
.hours-note{
  margin:14px 0 0;
  font-size:15px;
  color:var(--mute);
}

/* 流れ */
.flow-list{
  margin:0 0 20px;
  padding:0;
  list-style:none;
  counter-reset:flow;
}
.flow-row{
  display:grid;
  grid-template-columns:40px 1fr;
  gap:16px;
  align-items:start;
  border-top:1px solid var(--line);
  padding:16px 0;
}
.flow-list .flow-row:last-child{border-bottom:1px solid var(--line)}
.flow-num{
  font-family:"BIZ UDPMincho",serif;
  font-size:22px;
  color:var(--store-deep);
  line-height:1.3;
}
.flow-text{
  font-size:16px;
  padding-top:1px;
}
.flow-note,.bring-note{
  margin:0;
  font-size:15px;
  color:var(--mute);
}

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

.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 24px;
  background:transparent;
  color:var(--ink);
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  border:2px solid var(--ink);
  border-radius:0;
  letter-spacing:.02em;
  font-family:"Hiragino Sans","Noto Sans JP",sans-serif;
}
.btn-outline:hover{background:rgba(0,0,0,.05)}
.btn-outline:active{transform:translateY(1px)}
.btn-outline:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* 相談の窓口
   R2（Astra指摘5）：終わりを一場面に＝直前の写真(.look-end)→空間→ask_line(明朝)→ボタン類。背景色の箱にしない */
.contact{
  background:var(--white);
  padding:56px 0 calc(56px + 56px + 16px);
  border-top:1px solid var(--line);
}
html.js .contact{padding-bottom:calc(56px + 16px)}
.contact-end{
  padding:0 16px;
  text-align:center;
}
.contact-end .look-end{
  width:74vw;
  margin:0 auto;
  display:block;
}
.contact-end .hk-photo-note{display:inline-block;margin-top:10px}
.contact-inner{
  padding:0 16px;
  margin-top:108px;
}
.contact-word{
  font-size:32px;
  margin:0 0 20px;
  font-family:"BIZ UDPMincho","Hiragino Mincho ProN",serif;
  font-weight:400;
  letter-spacing:.04em;
  line-height:1.4;
}
.contact-text{
  font-size:17px;
  margin:0 0 28px;
  color:var(--ink);
}
.btn-solid{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  width:100%;
  background:var(--store-deep);
  color:var(--white);
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  border:2px solid var(--store-deep);
  border-radius:0;
  letter-spacing:.02em;
  cursor:pointer;
  font-family:"Hiragino Sans","Noto Sans JP",sans-serif;
}
.btn-solid:hover{background:var(--store-mid);border-color:var(--store-mid)}
.btn-solid:active{transform:translateY(2px)}
.btn-solid:focus-visible{outline:2px solid var(--store-deep);outline-offset:2px}
.contact-note{
  margin:14px 0 0;
  font-size:15px;
  color:var(--sub);
}

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

/* PC（≥1024） */
@media (min-width:1024px){
  .site-header{padding:0 64px}

  html.js .stage{display:block;position:sticky;top:0;height:100svh;overflow:hidden}
  html.js .look.no-photo .stage{position:static;height:auto;overflow:visible;display:block}
  .look .top{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:end;
    gap:0 48px;
    padding:48px 64px 24px;
    max-width:1200px;
    margin:0 auto;
  }
  .look-head{grid-column:1}
  .look-line{grid-column:2}
  .look-title{font-size:72px}
  .look-rule{margin:20px 0}
  .pan{height:62vh}
  html.js .pan{height:62vh}
  .pan-img{width:100%;height:100%;object-fit:cover;object-position:0% 50%}
  html.js .pan-img{width:100%;height:100%;max-width:100%;object-fit:cover}
  .look .bottom{max-width:1200px;margin:0 auto;padding:12px 64px 20px}
  html.js .look .bottom{padding:12px 64px calc(56px + 20px)}

  .subjects,.hours,.flow,.bring,.office,.contact{
    padding:88px 64px;
  }
  .subjects .wrap,.hours .wrap,.flow .wrap,.bring .wrap,.office .wrap{
    max-width:1100px;
    margin:0 auto;
    display:grid;
    grid-template-columns:280px 1fr;
    gap:0 48px;
  }
  .subjects h2,.hours h2,.flow h2,.bring h2,.office h2{margin-bottom:0}
  .contact{
    padding-bottom:calc(88px + 16px);
  }
  .contact-end{padding:0}
  .contact-end .look-end{width:38vw;max-width:520px}
  .contact-inner{max-width:640px;margin:88px auto 0}
  .btn-solid{width:auto;padding:0 40px}
}

@media (min-width:1024px) and (prefers-reduced-motion:reduce){
  html.js .stage{position:static;height:auto;overflow:visible}
  html.js .pan{height:auto}
  html.js .pan-img{height:auto;object-fit:none;width:100%}
}

/* 司令塔: 手動改行した行は折らない */
.nw{white-space:nowrap}

/* ===== 司令塔 R2（Astra 86）の直し ===== */
/* 中盤の写真をもう一段大胆に：前の節から96px、次の見出しまで64px */
.look-mid{padding:96px 0 64px;border-top:0}
/* 事実が少ない店の科目語：さらに大きく、間を広く、2語目を右へずらす */
.subjects.sparse .subject-name{font-size:46px}
.subjects.sparse .subject-row{margin-bottom:88px}
.subjects.sparse .subject-row:nth-child(2){margin-left:36px}
/* 終わりの余韻：一文からボタンまで40px、ボタンの下88px */
.contact-word{margin-bottom:40px}
.contact-inner{padding-bottom:88px}
@media (min-width:1024px){
  .subjects.sparse .subject-name{font-size:64px}
  .subjects.sparse .subject-row:nth-child(2){margin-left:120px}
}