/* PHP 化のときに足した調整（デザインの CSS は書きかえていない）。外すときは front-page.php の <link> を1行消す。 */

/* 1. スマホ幅（430px 未満）で「勉強のこと、こんな風に思ってない？」が右にはみ出して切れるのを防ぐ。
      1行に固定する指定を、せまい画面でだけ外して、言葉の区切りで2行にする。 */
@media (max-width: 26.8rem) {
  .worries #worries-title { white-space: normal; }
  .worries #worries-title .section__chunk { display: inline-block; }
}

/* 2. よくある質問：閉じはじめたときに、右の「−」をすぐ「＋」に戻す（faq-smooth.js と組） */
.faq__item.is-closing .faq__toggle::after { rotate: 90deg; }

/* 3. 講師紹介の飾り（オレンジの星）が画面の右へ出て、スマホでページが横にゆれるのを止める。
      ほかの飾りつきの節（お悩み・つよみ・最後の案内）には同じ指定が入っていて、ここだけ抜けていた。 */
.section.teacher { overflow-x: clip; }

/* 4. 文字が小さすぎる所を 16px まで上げる（社内の決まり：スマホで 16px を下回らない）。
      ・ファーストビューの「（税込）」… 親の 0.5 倍の指定で、スマホでは 9px になっていた
      ・英単語帳の下の注記 … 12px */
.hv2-lead__price small { font-size: max(1rem, .5em); }
.words .words__note { font-size: 1rem; }

/* ===== ここから 2026-10-02 の文言の直しで足した分 ===== */

/* 5. ファーストビューの「リリース記念」の帯。
      front-page.php が settings.php を読んで、記念をやっているときだけ出す。
      色は LP のまま（深緑 #007652＝--c-deep ／ 黄 #ffe879＝--c-yellow）。
      幅は中身ぶんだけ（width: fit-content）。スマホはコピーが中央ぞろえなので、帯も中央に置く。 */
.mn-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-6) 0 0;
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--c-deep);
  color: var(--c-white);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .02em;
  box-shadow: 0 4px 12px rgb(0 118 82 / .18);
}
.mn-band__tag {
  flex: none;
  padding: .1em .85em;
  border-radius: var(--radius-pill);
  background: var(--c-yellow);
  color: var(--c-ink);
  font-size: 1rem;
  font-weight: 900;
  white-space: nowrap;
}
.mn-band__text { padding-right: .15em; }
/* スマホ・タブレットではコピーが中央ぞろえなので、帯も中央に置き、中身も中央にそろえる
   （幅がたりないと「リリース記念」と文の 2 行になるため） */
@media (max-width: 63.999rem) { .mn-band { margin-inline: auto; justify-content: center; } }
@media (min-width: 64rem) { .mn-band { font-size: 1.0625rem; } }

/* 6. ファーストビューの、まとめ払いの注記。長いので折り返す（1行に固定しない）。 */
.mn-fvnote {
  max-width: 32rem;
  margin: var(--space-3) 0 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.7;
  color: var(--c-muted);
  text-wrap: pretty;     /* 最後の行に 1〜2 文字だけ残るのを防ぐ（効かないブラウザでは無視されるだけ） */
}
@media (max-width: 63.999rem) { .mn-fvnote { margin-inline: auto; } }

/* 7. 料金を書いてある所の文字を 16px に上げる（デザインは 14px＝--fs-small）。
      社内の決まり（スマホで 16px を下回らない）に合わせる。戻すときはこの 3 行を消す。 */
.faq__a p { font-size: 1rem; }
.final-cta .final-cta__note { font-size: 1rem; }
#teacher .teacher__subjects { font-size: 1rem; }

/* 8. 「毎回、数字が変わる問題」のカードで、前の問題に変な線が刺さって見える件。
      カードの背景は 28px ごとのノート罫線。前の問題の打ち消し線（y=459）のすぐ
      8px 下（y=467）を罫線が通っていて、罫線はカードの端まで届くので、
      式に長い線が刺さっているように見えていた。
      前の問題の行にだけカードと同じ色の下じきを敷いて、その部分の罫線を隠す。
      打ち消し線（前の問題だと分かる印）と、ほかの場所の罫線はそのまま残す。
      親が text-align:start なので、inline-block ではなく
      width:fit-content ＋ margin-inline:auto で中央に置く。 */
.math-demo__previous {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-3);
  background: var(--c-paper);
  border-radius: var(--radius-sm);
}

/* 9. ファーストビューの主ボタンを「2択」にする（lp-assets/js/fv-choice.js と組）。
      ・自分ではじめる        … 公式LINEをひらく（リンク先はこれまでと同じ）
      ・友だちにおすすめする  … 友だち追加の QR をモーダルで大きく出す
      JS が動かないときは主ボタンが直リンクのまま働き、パネルは hidden のまま出ない。
   ※ 2026-10-05 に 2 択をやめて、主ボタンを直リンクに戻した（下の 12 番）。
      9-a〜9-d（2 択の見た目）は、いまはどこからも使っていない。2 択に戻すときのために残している。
      9-e（QR のモーダル）は、12 番の「すすめる」リンクから開くので、いまも使っている。 */

/* 9-a. 2択のいれもの。.hv2-actions のグリッドの 1 マスぶんを占める。
        中の「ボタン」と「開くところ」のすき間は、パネルの中（__inner）の padding で持たせる。
        外側の gap で持たせると、たたんだときに段の gap（1rem）だけが残り、
        最後のひとコマでガクンと動いてしまうため。 */
.mn-pick { display: grid; gap: 0; width: 100%; pointer-events: auto; }

/* 9-b. 開閉。動かしている間だけ overflow を隠す
        （ふだんは出しておく。隠したままだと focus の輪（outline-offset 5px）が切れる） */
.mn-pick__panel[hidden] { display: none; }
.mn-pick__panel--moving { overflow: hidden; }
/* 開いた2択が画面の下にはみ出していたら、fv-choice.js が見えるところまで寄せる。
   そのときに下へぴったり貼りつかないよう、すこし余白を取っておく。 */
.mn-pick__panel { scroll-margin-bottom: var(--space-6); }
.mn-pick__inner { display: grid; gap: var(--space-3); padding-top: var(--space-3); }

/* 9-c. 右の印。開くと上向きに返る。
        ※ hero-v2.css が transform: translateY(-50%) で縦中央にそろえているので、
          rotate だけを足すと掛かる順番のせいで位置がずれる。transform ごと書きなおす。 */
.mn-pick__trigger .button__arrow { transition: transform var(--motion); }
.mn-pick--open .mn-pick__trigger .button__arrow { transform: translateY(-50%) rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .mn-pick__trigger .button__arrow { transition: none; }
}

/* 9-d. 2択のボタン。中身は「見出し＋ひとこと」の 2 段。
        文字はどちらも 16px を下回らない（社内の決まり）。 */
.mn-pick__lead { font-size: 1rem; font-weight: 800; line-height: 1.6; text-align: start; }
.mn-pick__panel .button {
  min-height: 4.5rem;
  padding: var(--space-3) 4.25rem var(--space-3) var(--space-5);
  justify-content: flex-start;
  gap: var(--space-4);
  text-align: start;
}
/* 「友だちにおすすめする」は少数派の道なので、目立たせすぎない。
   hero-v2.css が .hv2-actions の中の button--secondary を黄色（＝「1問だけ試す」と同じ）に
   してしまうので、素の button--secondary（紙色＋ふち）に戻す。
   これで「自分ではじめる（緑）＞ 1問だけ試す（黄）＞ おすすめする（紙）」の順になる。 */
.mn-pick__share, .hv2-actions .mn-pick__share {
  padding-right: var(--space-5);
  background: var(--c-paper);
  color: var(--c-deep);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-clay);
}
.mn-pick__text { display: grid; min-width: 0; }
.mn-pick__text b { font-size: clamp(1rem, 1.8vw, 1.125rem); font-weight: 800; line-height: 1.5; }
.mn-pick__text small { font-size: 1rem; font-weight: 600; line-height: 1.5; }
.mn-pick__self .mn-pick__text small { color: rgb(255 255 255 / .92); }
.mn-pick__share .mn-pick__text small { color: var(--c-muted); }
.mn-pick__ico { flex: none; width: 1.75rem; height: 1.75rem; }

/* 9-e. QR のモーダル。問題のモーダル（.quiz）と同じ作りにそろえている。 */
.mn-qr {
  width: min(calc(100% - 2rem), 26rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--c-cream);
  color: var(--c-ink);
  overscroll-behavior: contain;
}
.mn-qr::backdrop { background: var(--c-overlay); backdrop-filter: blur(4px); }
.mn-qr__head { display: flex; align-items: start; justify-content: space-between; gap: var(--space-3); }
.mn-qr__title { font-size: clamp(1.125rem, 4vw, 1.375rem); line-height: 1.5; }
.mn-qr__close {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--radius-pill);
  background: var(--c-soft);
  font-size: 1.5rem;
  line-height: 1;
}
.mn-qr__lead { margin-top: var(--space-3); font-size: 1rem; line-height: 1.7; color: var(--c-muted); }
/* QR は読みとれることが最優先。白地のまま大きく出す（真ん中にロゴは入れていない） */
.mn-qr__code {
  width: min(100%, 16rem);
  margin: var(--space-5) auto 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-white);
}
.mn-qr__id { margin-top: var(--space-4); font-size: 1rem; font-weight: 700; text-align: center; }
.mn-qr__id b { font-size: 1.125rem; letter-spacing: .04em; }
.mn-qr__note { margin-top: var(--space-2); font-size: 1rem; line-height: 1.7; color: var(--c-muted); }
.mn-qr__foot { display: grid; margin-top: var(--space-5); }
.mn-qr__self { min-height: var(--tap); }

/* 10. ヘッダーを、いつも見えたままにする（下へスクロールしても隠さない）。
      本筋は main.js 側で site-header--away を付けるのをやめたこと（そちらで直してある）。
      ここはその保険：サーバーが JS を長くキャッシュするので、古い main.js が
      しばらく配られても、ヘッダーが隠れないようにしておく。
      節へ飛んだときに見出しがヘッダーに隠れない余白は、style.css の
      scroll-padding-top: calc(var(--header-height) + var(--space-4)) ＝ 88px で足りている
      （ヘッダーの実寸は PC 73px・スマホ 72px）ので、ここでは何も足していない。 */
.site-header.site-header--away { transform: none; }

/* ===== ここから 2026-10-05 「ノートでとく」の説明で足した分 ===== */

/* 11. 体験の1問：入力欄のすぐ上に「ノートでといて、答えを確かめてね」。
       ここでは確かめのために入力できるが、アプリでは入力しない（答えを見て ◎△ で自己チェック）。
       その違いで「アプリでも入力するんだ」と思わせないよう、ひとこと置く。入力欄そのものは残している。 */
.quiz__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--c-lemon-soft);
  border: 1px solid #eee3b2;
  color: var(--c-ink);
  font-size: 1rem;
  line-height: 1.6;
}
.quiz__note-icon { flex: none; width: 1.375rem; height: 1.375rem; margin-top: .15em; color: var(--c-deep); }
.quiz__note b { display: block; font-weight: 800; }
.quiz__note small { display: block; margin-top: var(--space-1); font-size: 1rem; font-weight: 500; color: var(--c-muted); }
.quiz__chunk { display: inline-block; }   /* 言葉の切れ目でだけ折る（「ね。」だけが次の行に落ちないように） */

/* ===== ここから 2026-10-05 ファーストビューの主ボタンを直リンクに戻した分 ===== */

/* 12. ファーストビューの主ボタン（#mn-main-cta）と、その下の小さな「すすめる」リンク（fv-choice.js と組）。
       主ボタンは、ほかの申し込みボタンと同じく 1 回で公式LINEへ行く。見た目は .hv2-actions .button のまま。
       「友だち・お子さまにすすめる（QRコードを出す）」は少数派の道なので、ボタンにせず下線のリンクにして、
       主ボタンのすぐ下にくっつける（段のすき間 1rem より近くして、主ボタンの添え書きに見えるように）。
       押せる高さは 44px（--tap）を取る。文字は 16px。 */
.mn-main { display: grid; width: 100%; pointer-events: auto; }
.mn-sub {
  justify-self: center;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  min-height: var(--tap);
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--c-deep);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  cursor: pointer;
}
/* 言葉の切れ目でだけ折る（「（QRコードを出す）」が途中で切れないように）。下線はそれぞれに引く */
.mn-sub__chunk { display: inline-block; text-decoration: underline; text-underline-offset: .25em; }