/* 案B「見渡す」 2026-10-03 */
:root{
  --ink:#1a1a1a;
  --white:#fff;
  --sub:#555;
  --mute:#707070;
  --line:#cfd3d8;
  --store-deep:#2f4a6b;
  --store-mid:#44627f;
  --store-pale:#d8dee6;
  --store-pale2:#eef1f5;
}
body.is-goto{
  --store-deep:#3b5e82;
  --store-mid:#4f7399;
  --store-pale:#dbe3ec;
  --store-pale2:#eef2f6;
}

*{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}

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

.look .top{
  padding:20px 16px 12px;
}
.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);
}
.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}
}

/* 教えていること／診療内容・診療時間・流れ・情報 共通の節骨格 */
.subjects,.hours,.flow,.office{
  background:var(--white);
  padding:56px 16px;
  border-top:1px solid var(--line);
}
.subjects h2,.hours h2,.flow 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,.office h2::before{
  content:"";
  display:block;
  width:24px;
  height:2px;
  background:var(--store-deep);
  order:-1;
}

/* 教えていること／診療内容 */
.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;
}
.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{
  margin:0;
  padding:0;
  list-style:none;
}
.sub-list li{
  border-top:1px solid var(--line);
  padding:14px 0;
  font-size:16px;
}
.sub-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{
  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}

/* 相談の窓口 */
.contact{
  background:var(--store-pale2);
  padding:56px 16px calc(56px + 56px + 16px);
  border-top:1px solid var(--line);
}
html.js .contact{padding-bottom:calc(56px + 16px)}
.contact-word{
  font-size:36px;
  margin:0 0 20px;
}
.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}
  .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,.office,.contact{
    padding:88px 64px;
  }
  .subjects .wrap,.hours .wrap,.flow .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,.office h2{margin-bottom:0}
  .contact{
    padding-bottom:calc(88px + 16px);
  }
  .contact-inner{max-width:640px;margin:0 auto}
  .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%}
}

/* 見比べ用の切り替えバー（デモだけ） */
.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} }