/* 案A「時間割」 v3生成器 — きどピアノ・電子オルガン教室／後藤歯科医院／静風館空手道場 ほか 2026-10-03
   directions/a/style.css がもと。body.kido/body.goto の色の固定を外し、
   build.py が <head> の :root インライン style で店ごとの色・枡の高さを入れる形にした（見た目は変えない）。*/
: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;
  /* 既定色（build.pyが毎ページ上書きする。ここは保険の既定値） */
  --accent-deep:#3b5e82;
  --accent-mid:#4f7399;
  --accent-pale:#dbe3ec;
  --accent-paler:#eef2f6;
}

*{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,minmax(0,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);
  display:block;
}
.subj-tag{
  display:block;
  font-family:var(--body-font);
  font-size:15px;
  color:#666;
  margin-top:4px;
}
.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);
  overflow-wrap:anywhere;
}

.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;
}
.contact-buttons{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.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;
}
.expired-view{min-height:80vh;display:grid;place-items:center;padding:24px;text-align:center;font-family:var(--body-font)}
.expired-box h1{font-size:20px;margin-bottom:12px}

/* ===== 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} }

/* 司令塔: 時刻は折らない */
.nw{white-space:nowrap}

/* ===== R1（Astra 84.6）の直し：時間割の文法を後半まで通す ===== */
/* 各節＝時間割の1行：見出しの下に墨の罫線、中身の左に鉛筆の縦罫線（時間割帳の余白線） */
.subjects .section-head,.flow .section-head,.office .section-head{position:relative;padding-bottom:14px}
.subjects .section-head::after,.flow .section-head::after,.office .section-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(26,26,26,.6)}
.subjects-body,.flow-body,.office-body{border-left:1px solid var(--rule);padding-left:14px}
/* 写真＝時間割帳に貼った資料写真：少し右へずらし、上に罫線1本、注記は写真の下 */
.small-photo{max-width:80%;margin:0 0 28px 24px;padding-top:10px;border-top:1px solid var(--ink)}
.small-photo .hk-photo-note.static{font-size:13px;margin-top:8px}
/* 空の時間割：注記の上を少し空ける */
.tt-note{margin-top:20px}
/* 今日の列＝書き終わりの一本：上下に 8px 突き出し、店の濃い色で */
.tt-today{top:-8px;bottom:-8px;border-width:2px;transition:opacity .24s ease}
@media (min-width:1024px){
  /* PC：店名と時間割を揃えない（店名は左7vw、時間割は少し下から始まる） */
  .stage{padding-left:7vw;padding-right:5vw}
  .stage-table{margin-top:12vh}
  .stage-table .tt-hours-note,.stage-table .tt-note{margin-left:46px}
  .subjects-body,.flow-body,.office-body{padding-left:40px}
  .small-photo{max-width:420px}
}

/* ===== R2（Astra 86.8）の直し：後半を「書き込まれた紙」に ===== */
/* 流れの節：淡い色の箱をやめ、白地に外枠と行の罫線だけ */
.flow{background:var(--white)}
.flow-table{border:1px solid var(--ink);border-left-width:1px;padding:0 14px}
.flow-num{font-size:16px}
.step-text{line-height:1.74}
/* 一般的な例の箇条書き：行間を少し締める */
.ex-list li,.examples li{line-height:1.65}
/* 空の時間割：注記を墨40%に、表の最下段の罫線を少し濃く */
.tt-note{color:rgba(26,26,26,.55)}
.week .tt-wrap .ln-h.thick:last-of-type{opacity:1}
/* サブコピー（町名＋種類）を少し小さく */
.tagline{font-size:16px}
@media (min-width:1024px){
  .tagline{font-size:19px}
  .stage-table{margin-top:calc(12vh + 32px)}
  .stage-table .tt-hours-note,.stage-table .tt-note{margin-left:64px}
  .tt-subjects span{font-size:46px}
  .small-photo{max-width:440px;margin-left:32px}
  .flow-table{margin-left:-24px}
}