/* 案A「時間割」 — きどピアノ・電子オルガン教室／後藤歯科医院 試作 2026-10-03 */
:root{
  --ink:#1a1a1a;
  --white:#fff;
  --rule:#b8b2a8;      /* 鉛筆グレーの罫線 */
  --rule-thick:var(--ink);
  --display:"Klee One",serif;
  --body-font:"Hiragino Sans","Noto Sans JP",sans-serif;
  --tt-head-h:40px;
  --tt-row-h:58px;
}
body.kido{
  --accent-deep:#2f4a6b;
  --accent-mid:#44627f;
  --accent-pale:#d8dee6;
  --accent-paler:#eef1f5;
  --tt-row-h:56px;
}
body.goto{
  --accent-deep:#3b5e82;
  --accent-mid:#4f7399;
  --accent-pale:#dbe3ec;
  --accent-paler:#eef2f6;
  --tt-row-h:64px;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--body-font);
  font-weight:400;
  font-size:17px;
  line-height:1.9;
  -webkit-text-size-adjust:100%;
  overflow-wrap:break-word;
  overflow-x:hidden;
}
h1,h2,h3,p,ul,dl,dd,dt,table,th,td{margin:0;padding:0}
ul{list-style:none}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.room-name,.section-head,.site-head-name,.contact-phrase,.subj-name,.tt-subjects span{
  word-break:keep-all;
  overflow-wrap:normal;
}

/* ===== ヘッダー ===== */
.site-head{
  background:var(--white);
  height:52px;
  display:flex;
  align-items:center;
  padding:0 20px;
  border-bottom:1px solid #e4e4e4;
}
.site-head-name{
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===== 時間割の節 ===== */
.week{
  position:relative;
  background:var(--white);
}
.stage{
  padding:24px 16px;
}
html.js .week{height:200svh}
html.js .stage{position:sticky;top:0;height:100svh;overflow:hidden}

.room-name{
  font-family:var(--display);
  font-weight:600;
  font-size:44px;
  line-height:1.3;
  letter-spacing:.02em;
  color:var(--ink);
  margin:0;
}
.room-name span{display:block}
.tagline{
  font-family:var(--body-font);
  font-size:17px;
  font-weight:400;
  color:var(--ink);
  margin:10px 0 0;
}

/* 時間割テーブル */
.tt-wrap{
  position:relative;
  margin-top:20px;
  width:100%;
}
.tt-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  grid-template-rows:var(--tt-head-h) var(--tt-row-h) var(--tt-row-h);
  width:100%;
}
.tt-cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:2px 1px;
  font-family:var(--display);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.tt-head{
  font-size:20px;
  color:var(--ink);
}
.tt-cell.occ{
  font-size:14px;
  line-height:1.25;
  background:var(--accent-pale,#e5e5e5);
  opacity:1;
}
.tt-cell.occ span{display:block}
.tt-cell.off{
  font-family:var(--body-font);
  font-size:13px;
  color:#8a8a8a;
}
html.js .tt-cell.occ{opacity:0}

.tt-lines{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.ln-h{
  position:absolute;
  left:0;
  width:100%;
  height:1px;
  background:var(--rule);
  transform:scaleX(1);
  transform-origin:left;
}
.ln-v{
  position:absolute;
  top:0;
  width:1px;
  height:100%;
  background:var(--rule);
  transform:scaleY(1);
  transform-origin:top;
}
.ln-h.thick,.ln-v.thick{background:var(--rule-thick);height:1.5px}
.ln-v.thick{width:1.5px}
/* 表の外枠・曜日行の下（太い罫線）は最初から見える「もともとある時間割の枠」。
   内側の細い罫線（セルの仕切り）だけがスクロールで引かれる */
html.js .ln-h:not(.thick){transform:scaleX(0)}
html.js .ln-v:not(.thick){transform:scaleY(0)}

.tt-today{
  position:absolute;
  top:0;
  bottom:0;
  border:2px solid var(--accent-deep);
  box-sizing:border-box;
  opacity:0;
  pointer-events:none;
}
html:not(.js) .tt-today{display:none}

.tt-note{
  font-family:var(--body-font);
  font-size:15px;
  color:#8a8a8a;
  margin:14px 0 0;
}
.tt-subjects{
  display:flex;
  gap:20px;
  margin-top:18px;
  flex-wrap:wrap;
}
.tt-subjects span{
  font-family:var(--display);
  font-weight:600;
  font-size:40px;
  color:var(--ink);
  line-height:1.2;
}
.tt-hours-note{
  font-family:var(--body-font);
  font-size:17px;
  color:var(--ink);
  margin:14px 0 0;
}

/* JS無効・reduced-motion：完成状態で静止 */
@media (prefers-reduced-motion:reduce){
  html.js .week{height:auto}
  html.js .stage{position:static;height:auto;overflow:visible}
  html.js .ln-h{transform:scaleX(1)}
  html.js .ln-v{transform:scaleY(1)}
  html.js .tt-cell.occ{opacity:1}
  html.js .tt-today{opacity:1}
}

/* ===== 教えていること／診療内容 ===== */
.subjects{
  background:var(--white);
  padding:56px 16px;
}
.section-head{
  font-family:var(--display);
  font-weight:600;
  font-size:28px;
  color:var(--ink);
  margin:0 0 26px;
}
.subj-list{margin:0 0 32px}
.subj-item{
  padding:16px 0;
  border-bottom:1px solid var(--rule);
}
.subj-item:first-child{border-top:1px solid var(--rule)}
.small-photo{max-width:320px;margin:0 0 28px}
.subj-name{
  font-family:var(--display);
  font-weight:600;
  font-size:40px;
  line-height:1.2;
  color:var(--ink);
}
.sub-head{
  font-family:var(--body-font);
  font-size:18px;
  font-weight:700;
  color:var(--ink);
  margin:0 0 4px;
}
.fact-rows{margin:0}
.fact-row{
  font-size:17px;
  line-height:1.8;
  padding:14px 0;
  border-bottom:1px solid var(--rule);
}
.fact-row:first-child{border-top:1px solid var(--rule)}

/* ===== 流れ ===== */
.flow{
  background:var(--accent-paler,#f4f4f4);
  padding:56px 16px;
}
.flow-table{
  border-top:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink);
  margin-bottom:18px;
}
.flow-row{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:0 14px;
  padding:16px 0;
  border-bottom:1px solid var(--rule);
}
.flow-row:last-child{border-bottom:none}
.flow-num{
  font-family:var(--display);
  font-weight:600;
  font-size:20px;
  color:var(--accent-deep);
}
.step-text{
  font-size:17px;
  line-height:1.8;
}
.flow-foot{
  font-size:15px;
  color:#666;
  margin:0;
}
.carry{margin-top:28px}
.carry-head{
  font-family:var(--body-font);
  font-size:18px;
  font-weight:700;
  color:var(--ink);
  margin:0 0 8px;
}
.carry-line{
  font-size:16px;
  color:var(--ink);
  line-height:1.8;
}

/* ===== 教室情報／医院情報 ===== */
.office{
  background:var(--white);
  padding:56px 16px;
}
.info-table{margin:0 0 30px}
.info-row{
  display:grid;
  grid-template-columns:100px minmax(0,1fr);
  gap:4px 14px;
  padding:16px 0;
  border-bottom:1px solid var(--rule);
}
.info-row:first-child{border-top:1px solid var(--rule)}
.info-table dt{
  font-size:15px;
  color:#555;
  font-weight:400;
}
.info-table dd{
  font-size:17px;
  color:var(--ink);
}

.btn{
  display:inline-block;
  text-decoration:none;
  text-align:center;
  font-family:var(--body-font);
  cursor:pointer;
  border-radius:0;
  transition:background-color .15s ease,color .15s ease,transform .1s ease;
}
.btn:active{transform:translateY(2px)}
.btn:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}
.btn-outline{
  border:2px solid var(--accent-deep);
  background:var(--white);
  color:var(--accent-deep);
  font-size:17px;
  font-weight:700;
  padding:16px 28px;
}
.btn-outline:hover{background:var(--accent-paler)}

/* ===== 相談の窓口 ===== */
.contact{
  background:var(--accent-paler,#f4f4f4);
  padding:56px 16px;
}
.contact-phrase{
  font-family:var(--display);
  font-weight:600;
  font-size:36px;
  line-height:1.3;
  color:var(--ink);
  margin:0 0 20px;
}
.contact-lead{
  font-size:17px;
  margin:0 0 28px;
}
.btn-solid{
  width:100%;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--accent-deep);
  color:var(--white);
  font-size:17px;
  font-weight:700;
  letter-spacing:.02em;
  border:none;
}
.btn-solid:hover{background:var(--accent-mid)}
.btn-solid:active{transform:translateY(2px)}
.btn-solid:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.contact-demo-note{
  font-size:15px;
  color:#555;
  margin:14px 0 0;
}

/* ===== フッター ===== */
.site-foot{background:var(--white)}
.ft-note{
  padding:28px 16px;
  font-size:13px;
  line-height:1.8;
  color:#555;
}
.ft-note b{color:var(--ink)}
.made-by{
  text-align:center;
  font-size:12.5px;
  color:#999;
  padding:0 16px 28px;
}

/* ===== PC（1024px以上） ===== */
@media (min-width:1024px){
  .stage{padding:0 40px;display:flex;align-items:center;gap:60px}
  .stage-text{flex:0 0 38%}
  .stage-table{flex:1;min-width:0}
  .room-name{font-size:72px}
  .tagline{font-size:20px;margin-top:16px}
  .tt-grid{grid-template-rows:56px 72px 72px}
  .tt-head{font-size:24px}
  .tt-cell.occ{font-size:17px}
  .tt-subjects span{font-size:56px}

  .subjects,.flow,.office,.contact{
    max-width:1100px;
    margin:0 auto;
    padding:80px 40px;
  }
  .subjects-grid,.flow-grid,.office-grid,.contact-grid{display:flex;gap:60px}
  .subjects .section-head,.flow .section-head,.office .section-head{
    width:300px;
    flex:none;
    margin:0;
  }
  .contact-phrase{
    width:420px;
    flex:none;
    margin:0;
  }
  .subjects-body,.flow-body,.office-body,.contact-body{flex:1}
  .subj-name{font-size:56px}
}

/* 司令塔: きど（曜日未確認）は科目を表の上に置き、初画面に入れる */
.tt-subjects--top{margin:18px 0 6px}
.tt-subjects--top + .tt-wrap{margin-top:14px}

@media (min-width:1024px){ html.js .stage{align-items:flex-start;padding-top:72px} }

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