/* 鯖江数学塾サイトの部品（ヘッダー、フッター、トップページの節）。数値は tokens.css の変数だけを使う */

/* ---------- ヘッダー ---------- */
.site-header { border-bottom: var(--bold); }
.site-header .grid {
  padding-block: var(--y1) calc(var(--y1) - 2px);
  row-gap: var(--y-half);
  align-items: baseline;
}
.logo {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--x1);
  text-decoration: none;
}
.logo-ja { font-size: var(--t1); font-weight: 500; letter-spacing: 0.08em; }
.logo:hover .logo-ja { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.site-nav { grid-column: 1 / -1; }
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--x2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a { text-decoration: none; color: var(--ink); }
.site-nav a:hover, .site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

/* ---------- 節 ---------- */
.section { padding-top: var(--y-section); }
.section-head {
  grid-column: 1 / -1;
  border-top: var(--bold);
  padding-top: calc(var(--y1) - 2px);
  margin-bottom: var(--y2);
}
.section-head .label { display: block; margin-bottom: var(--y-half); }

.more {
  display: inline-block;
  margin-top: var(--y1);
  font-family: var(--f-mono);
  font-size: var(--t-1);
}

/* ---------- 1. ヒーロー ---------- */
.hero { padding-top: var(--y3); }
.hero-text { grid-column: 1 / -1; }
.hero h1 { margin-block: var(--y-half) var(--y1); }
.hero-lead { max-inline-size: 30em; }
.hero-fig {
  grid-column: 1 / -1;
  margin: var(--y2) 0 0;
  max-inline-size: 12.5rem;
}

/* ---------- 2. 止まる時期 ---------- */
.stop-text { grid-column: 1 / -1; }
.stop-text h3 { margin-bottom: var(--y-half); }
.stop-text h3 ~ h3 { margin-top: var(--y2); }
.stop-text .conclusion { margin-top: var(--y2); font-weight: 500; }
.stop-fig { grid-column: 1 / -1; margin: var(--y2) 0 0; }
/* 図の文字の大きさは viewBox の単位。図の表示幅に合わせて、画面上でおよそ 15〜19px になるようにする */
.tl text { font-size: 30px; }
.tl .tl-stage { fill: var(--gray); }
.tl .tl-stop { fill: var(--fig); }

/* ---------- 3. 二つの入り口 ---------- */
.entry {
  grid-column: 1 / -1;
  border-top: var(--bold);
  padding-top: calc(var(--y1) - 2px);
}
.entry + .entry { margin-top: var(--y2); }
.entry .label { display: block; margin-bottom: var(--y-half); }
.entry h3 { margin-bottom: var(--y-half); }
.entry h3 a { text-decoration: none; }
.entry h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }

/* ---------- 4. 塾がやること（ラベルと説明の行） ---------- */
.rows { grid-column: 1 / -1; margin: 0; }
.row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  border-top: var(--hair);
  padding-block: calc(var(--y1) - 1px) var(--y1);
}
.row dt { grid-column: 1 / -1; margin-bottom: var(--y-half); }
.row dd { grid-column: 1 / -1; margin: 0; }
.row h3 { margin-bottom: var(--y-half); }

/* ---------- 5. 行き着く先 ---------- */
.big {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--t-h2);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.03em;
  font-feature-settings: "palt";
}
.big-after { grid-column: 1 / -1; }

/* ---------- 6. 授業と料金 ---------- */
.facts { grid-column: 1 / -1; margin: 0; }
.facts > div {
  display: grid;
  grid-template-columns: 6em minmax(0, 1fr);
  column-gap: var(--x1);
  align-items: baseline;
  border-top: var(--hair);
  padding-block: calc(var(--y-half) - 1px) var(--y-half);
}
.facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.facts-after { grid-column: 1 / -1; }

/* ---------- 7. 問い合わせへの導線 ---------- */
.cta-body { grid-column: 1 / -1; }
.cta-body h2 { margin-bottom: var(--y1); }
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--y-half) var(--x2);
  margin-top: var(--y1);
}

/* ---------- フッター ---------- */
.site-footer {
  margin-top: var(--y-section);
  border-top: var(--hair);
  font-size: var(--t-1);
  line-height: 1.75;
}
.site-footer .grid { padding-block: calc(var(--y2) - 1px) var(--y3); row-gap: var(--y1); }
.footer-info { grid-column: 1 / -1; }
.footer-info p { margin: 0; }
.footer-name { font-weight: 500; }
.footer-nav { grid-column: 1 / -1; }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--x2); margin: 0; padding: 0; list-style: none; }
.footer-copy { grid-column: 1 / -1; color: var(--gray); font-family: var(--f-mono); }

/* ---------- M: 768px から（8 段） ---------- */
@media (min-width: 48rem) {
  .hero-text { grid-column: 1 / span 5; }
  .hero-fig { grid-column: 6 / span 3; justify-self: end; margin-top: 0; max-inline-size: none; inline-size: 100%; }
  .entry { grid-column: span 4; }
  .entry + .entry { margin-top: 0; }
  .row dt { grid-column: 1 / span 2; margin-bottom: 0; }
  .row dd { grid-column: 3 / span 6; }
  .tl text { font-size: 18px; }
  .big { grid-column: 1 / span 7; }
  .facts { grid-column: 1 / span 7; }
  .cta-body { grid-column: 1 / span 6; }
  .footer-info { grid-column: 1 / span 4; }
  .footer-nav { grid-column: 5 / span 4; }
}

/* ---------- L: 1024px から（12 段） ---------- */
@media (min-width: 64rem) {
  .logo { grid-column: 1 / span 4; }
  .site-nav { grid-column: 5 / span 8; }
  .site-nav ul { justify-content: flex-end; }
  .hero-text { grid-column: 1 / span 8; }
  .hero-fig { grid-column: 9 / span 4; }
  .hero-lead { max-inline-size: 34em; }
  .stop-text { grid-column: 1 / span 5; }
  .stop-fig { grid-column: 6 / span 7; margin-top: 0; }
  .tl text { font-size: 20px; }
  .entry { grid-column: span 6; }
  .row dt { grid-column: 1 / span 3; }
  .row dd { grid-column: 4 / span 6; }
  .big { grid-column: 1 / span 9; }
  .big-after { grid-column: 1 / span 9; }
  .facts { grid-column: 1 / span 8; }
  .cta-body { grid-column: 1 / span 8; }
  .footer-info { grid-column: 1 / span 6; }
  .footer-nav { grid-column: 7 / span 6; }
  .footer-nav ul { justify-content: flex-end; }
}