/* ============================================================
   math-k.css ── 中高一貫 数学カスタマイズ（ikkan/math.html 専用・V15新設）
   出典: V15_数学カスタマイズ受け皿_設計.md
   素材: https://wild-frost-d1a6.tomi-6cf.workers.dev/（施主自作の国語・数学カスタマイズページ）
   思想: 「教科が増える」のではなく「教え方が同じ」。国語で培った
         "考えを言葉にさせ、白紙に書き直させる" 教え方を数学に適用している、と語る。
         幕の内弁当（総花）に見せないため、このページは数学だけに絞る。
   規範: 色・寸法は tokens.css の var() のみ（hex直書き禁止）。v6b.css の後に読み込む。
   ============================================================ */

/* --- 文節span。要素ごとに列挙すると書き漏れる（V14で実測）ため一括指定 --- */
.mk-page .w { display: inline-block; }
.mk-page .section-title .w + .w { margin-left: 0; }

/* --- 押せるものの統一様式（v6b/portfolio/news/regular と同一語彙） --- */
.golink {
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-sub);
  color: var(--alpe-red);
  transition: color .2s;
}
.golink::before {
  content: '◆';
  font-size: .5em;
  color: color-mix(in srgb, var(--alpe-gold) 90%, transparent);
  transform: translateY(-.2em);
}
.golink span { border-bottom: 1px solid color-mix(in srgb, var(--alpe-gold) 80%, transparent); padding-bottom: .15em; }
.golink:hover { color: var(--alpe-red-deep); }

/* ============ M1 ヒーロー ============ */
.mk-hero { background: var(--alpe-paper); border-bottom: var(--rule-gold); }
.mk-hero .container {
  max-width: 52rem;
  padding-top: clamp(132px, 16vh, 172px);
  padding-bottom: clamp(56px, 8vh, 80px);
}
.mk-hero .eyebrow {
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--alpe-gold);
}
.mk-hero h1 {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(23px, 3.6vw, 40px);
  line-height: 1.65;
  letter-spacing: var(--ls-head);
  color: var(--alpe-ink);
  margin: .55em 0 .7em;
}
.mk-hero h1 em { font-style: normal; color: var(--alpe-red); }
.mk-hero .lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--alpe-ink-soft);
  max-width: 38em;
}

/* セクション余白と見出し（regular/news-manabi と同率で統一） */
.mk-section { padding-block: clamp(64px, 9vh, 96px); }
.mk-section .section-title { font-size: clamp(24px, 3.8vw, 47px); }

/* ============ 共通の◆リスト ============ */
.mk-list { list-style: none; margin: 1.2em 0 0; padding: 0; display: flex; flex-direction: column; gap: .6em; max-width: 46em; }
.mk-list li {
  position: relative;
  padding-left: 1.2em;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--alpe-ink-soft);
}
.mk-list li::before {
  content: '◆';
  position: absolute;
  left: 0;
  top: .12em;
  font-size: .55em;
  color: color-mix(in srgb, var(--alpe-gold) 85%, transparent);
}

/* ============ M2 お悩み（番号つき） ============ */
.mk-concerns {
  list-style: none;
  margin: 1.8em 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: 2px clamp(20px, 3vw, 40px);
}
.mk-concerns li {
  display: flex;
  gap: 1em;
  align-items: flex-start;
  padding: 1.1em .2em;
  border-top: 1px solid color-mix(in srgb, var(--alpe-gold) 40%, transparent);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--alpe-ink-soft);
}
.mk-concerns li .n {
  flex: 0 0 auto;
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--alpe-gold);
  letter-spacing: .1em;
  padding-top: .05em;
}

/* ============ M3 教え方（3つの特徴） ============ */
.mk-features { margin-top: 2em; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(18px, 2.5vw, 28px); }
.mk-feature {
  border: 1px solid color-mix(in srgb, var(--alpe-gold) 45%, transparent);
  border-radius: var(--radius-card);
  background: var(--alpe-paper);
  padding: 1.8em 1.6em;
}
.mk-feature .en {
  display: block;
  font-family: var(--font-gothic);
  font-size: calc(var(--fs-small) * .88);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  color: var(--alpe-red);
  margin-bottom: .9em;
}
.mk-feature h3 {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.6;
  color: var(--alpe-ink);
  margin-bottom: .7em;
}
.mk-feature p { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--alpe-ink-soft); }

/* ============ M5 進路・出口 ============ */
.mk-paths { margin-top: 2em; }
.mk-path {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(12px, 2vw, 28px);
  padding: 1.4em .2em;
  border-bottom: 1px solid color-mix(in srgb, var(--alpe-gold) 40%, transparent);
}
.mk-path:first-child { border-top: var(--rule-gold); }
@media (max-width: 46em) { .mk-path { grid-template-columns: 1fr; gap: .5em; } }
.mk-path dt {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(16px, 1.9vw, 20px);
  color: var(--alpe-ink);
  letter-spacing: .04em;
}
.mk-path dd { margin: 0; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--alpe-ink-soft); }

/* ============ M6 教える人 ============ */
.mk-teacher { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 3vw, 40px); align-items: start; margin-top: 2em; }
@media (max-width: 46em) { .mk-teacher { grid-template-columns: 1fr; } }
.mk-photo-slot {
  aspect-ratio: 3 / 4;
  border: 1px dashed color-mix(in srgb, var(--alpe-gold) 55%, transparent);
  border-radius: var(--radius-card);
  background: var(--alpe-paper-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1em;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--alpe-ink-faint);
}
.mk-facts { list-style: none; margin: 1.4em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6em; }
.mk-facts li {
  font-family: var(--font-gothic);
  font-size: calc(var(--fs-small) * .92);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--alpe-ink-soft);
  border: 1px solid color-mix(in srgb, var(--alpe-gold) 50%, transparent);
  border-radius: 2em;
  padding: .45em 1.1em;
  background: var(--alpe-paper);
}

/* ============ M8 料金（V14の静音様式を踏襲） ============ */
.mk-fee { margin-top: 1.6em; max-width: 50em; border-top: var(--rule-gold); }
.mk-fee > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .4em 1.5em;
  padding: 1.1em .2em;
  border-bottom: 1px solid color-mix(in srgb, var(--alpe-gold) 40%, transparent);
}
.mk-fee dt { font-family: var(--font-gothic); font-size: var(--fs-small); font-weight: 700; color: var(--alpe-ink); letter-spacing: .04em; }
.mk-fee dt .sub {
  display: block;
  font-size: calc(var(--fs-small) * .9);
  font-weight: 400;
  color: var(--alpe-ink-faint);
  letter-spacing: .06em;
  margin-top: .3em;
}
.mk-fee dd { margin: 0; font-family: var(--font-mincho); font-weight: 700; font-size: var(--fs-body); color: var(--alpe-ink); letter-spacing: .04em; text-align: right; }
.mk-fee dd .sub {
  display: block;
  font-family: var(--font-gothic);
  font-size: calc(var(--fs-small) * .9);
  font-weight: 400;
  color: var(--alpe-ink-soft);
  margin-top: .3em;
}

/* ============ M9 体験の流れ ============ */
.mk-flow { margin-top: 2em; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 2px clamp(20px, 3vw, 40px); }
.mk-flow > div { display: flex; gap: 1em; align-items: flex-start; padding: 1.2em .2em; border-top: 1px solid color-mix(in srgb, var(--alpe-gold) 40%, transparent); }
.mk-flow .n { flex: 0 0 auto; font-family: var(--font-mincho); font-weight: 700; font-size: var(--fs-small); color: var(--alpe-gold); letter-spacing: .1em; padding-top: .15em; }
.mk-flow h3 { font-family: var(--font-mincho); font-weight: 700; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.6; color: var(--alpe-ink); margin-bottom: .4em; }
.mk-flow p { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--alpe-ink-soft); }

/* ============ M10 FAQ（detailsで簡素に） ============ */
.mk-faq { margin-top: 1.8em; max-width: 48em; }
.mk-faq details {
  border-bottom: 1px solid color-mix(in srgb, var(--alpe-gold) 40%, transparent);
  padding: 1.1em .2em;
}
.mk-faq details:first-of-type { border-top: var(--rule-gold); }
.mk-faq summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-left: 1.5em;
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: var(--lh-body);
  color: var(--alpe-ink);
}
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::before {
  content: 'Q';
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mincho);
  color: var(--alpe-gold);
}
.mk-faq details[open] summary { color: var(--alpe-red); }
.mk-faq .a {
  margin-top: .9em;
  padding-left: 1.5em;
  font-size: var(--fs-small);
  line-height: var(--lh-loose);
  color: var(--alpe-ink-soft);
}

/* ============ 理念署名のラベル（V13-F9様式） ============ */
.signature-line a .w { display: inline-block; }
.signature-line .sig-label {
  display: inline-block;
  font-family: var(--font-gothic);
  font-size: calc(var(--fs-small) * .92);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--alpe-gold);
  margin-right: .9em;
  padding-right: .9em;
  border-right: 1px solid color-mix(in srgb, var(--alpe-gold) 50%, transparent);
}
@media (max-width: 34em) {
  .signature-line .sig-label { display: block; margin: 0 0 .7em; padding: 0; border-right: none; }
}

/* ============ 320px級の微調整 ============ */
@media (max-width: 22em) {
  .mk-hero h1 { font-size: 20px; }
  .mk-section .section-title { font-size: 23px; }
  .consult .consult-title { font-size: 23px; }
}