/* ==========================================================================
   Samurai Brain — monitor.css
   実務モニター募集ページ（monitor.html）専用スタイル

   ── 前提 ──
   ・css/style.css の CSS変数（--ink-800 / --accent / --serif など）を継承する
   ・ヘッダーは position:fixed（.site-header 77px / .sp-header 60px）のため、
     ヒーローは padding-top でヘッダー分を確保する
   ・数値（01〜06 などの通し番号）は --didone を使わず、
     明朝600 ＋ tabular-nums で組む。
     ※Didone（Bodoni Moda）は「4」の斜線が極細で小サイズでは「1」に
       誤読されるため。README §0.0 ⑩・⑪ の修正方針に合わせています。
   ========================================================================== */

/* ---------- Hero ---------- */

.mnt-hero {
  position: relative;
  overflow: hidden;
  padding-top: 148px;
  padding-bottom: 56px;
  /* ※2026-11：配色を変更。
     旧：linear-gradient(118deg, #0f2547, #1a3668 52%, #274b83)
         → 右側へ向かって明るい青に抜けるため、PC で右半分が
           「色の抜けた余白」に見えていました。
     新：終点を #16305a に沈め、明度差を小さくして深い紺で面を保つ。
         色域はブランドの --ink-900（#08172e）～--ink-700 系に収めています。 */
  background: linear-gradient(112deg, #08172e 0%, #0d2140 46%, #16305a 100%);
  color: var(--paper);
}

/* 面に奥行きを出す装飾（写真は使わない）。
   右上に淡い真鍮の光、左下に青の照り返しを重ねる。
   ※旧実装は右上の円だけを絶対配置していたため、右側に色ムラが出ていました。 */
.mnt-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
      circle at 86% 10%,
      rgba(201, 162, 75, 0.2),
      transparent 48%
    ),
    radial-gradient(circle at 4% 98%, rgba(44, 92, 158, 0.26), transparent 54%);
  pointer-events: none;
}

.mnt-hero .inner {
  position: relative;
  z-index: 1;
}

/* 左：コピー列／右：募集要項の要点カード。
   ※2026-11：ご指示により中央寄せレイアウトへ変更したため、
     2カラムのグリッド指定は廃止しました。
     ヒーロー全体を text-align:center で中央に寄せ、要項は下部の横並び帯に置きます。
     （参照ページの「中央にコピーを置き、要点を横に並べる」組み方を参考） */
.mnt-hero__copy {
  min-width: 0;
  text-align: center;
}

/* ※2026-11-08：ご指示の構成へ刷新。
   旧・信頼バッジ3点（特許出願済／Authense税理士法人監修／会計事務所専用AI）と
   ピル型の「限定50社」帯は、下記の枠見出しと情報が重複するため削除しました。 */

/* 枠見出し（FVの第一情報）。白い細罫のボックスに限定50社の案内を組む。
   面は塗らず罫だけで四角く囲み、紺地の上で凛とした印象にする。
   角丸は付けない（矩形のまま）。 */
.mnt-hero__frame {
  max-width: 820px;
  margin: 0 auto;
  padding: 28px 40px 30px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  /* 細罫1本では紺地に埋もれるため、外側に淡い光をにじませて縁を立てる */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 18px 50px rgba(3, 12, 26, 0.28);
  text-align: center;
}

.mnt-hero__title {
  margin: 0 auto;
  font-family: var(--serif);
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--paper);
  text-wrap: balance;
}

/* 主コピー1行目。枠見出しの下で最も大きい本文 */
.mnt-hero__lead {
  margin: 30px auto 0;
  max-width: 30em;
  font-family: var(--serif);
  font-size: clamp(17px, 2.1vw, 26px);
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--paper);
  text-wrap: balance;
}

/* 主コピー2行目。1行目より一段小さいサイズで受け止める。
   優勢→補足の順序が視覚的に伝わるよう、サイズ差だけでは弱いので
   白の透過でわずかに明度も落とす */
.mnt-hero__tagline {
  margin: 12px auto 0;
  max-width: 32em;
  font-family: var(--serif);
  font-size: clamp(15px, 1.7vw, 21px);
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.9);
  text-wrap: balance;
}

/* CTAの配置枠。
   ※2026-11-08：ご指示により、ボタンを囲っていた枠（白の透過罫・淡い面・
     内側余白18/20・角丸4px）をすべて削除しました。ボタンだけが並びます。
     幅の制約（820px）は、ボタンが間延びしないよう配置枠として残しています。 */
.mnt-hero__cta {
  max-width: 820px;
  margin: 30px auto 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.mnt-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 0;
}

/* 主導線のボタン。文言が長いため、通常より横に広く取る。
   狭い幅では折り返すが、矢印は消さない */
.btn--wide {
  max-width: 100%;
  padding-inline: 30px;
  line-height: 1.5;
  text-align: left;
}

/* ---------- ヒーロー下：募集要項の横並び帯 ---------- */

.mnt-hero__panel {
  position: relative;
  max-width: 1000px;
  margin: 40px auto 0;
  padding: 18px 8px 16px;
  border-top: 1px solid rgba(201, 162, 75, 0.34);
  border-bottom: 1px solid rgba(201, 162, 75, 0.34);
  /* 中央寄せのコピーの下に、薄い罫2本で区切った帯として置く。
     旧：右カラムの箱型カード（background あり・影あり）
     新：面を塗らず罫だけで区切り、中央のコピーを邪魔しない */
  background: transparent;
  text-align: center;
}

.mnt-hero__specs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
}

.mnt-hero__specs > div {
  padding: 0 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.mnt-hero__specs > div:first-child {
  border-left: 0;
}

.mnt-hero__specs dt {
  margin-bottom: 5px;
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
}

.mnt-hero__specs dd {
  margin: 0;
  min-width: 0;
}

.mnt-hero__specs strong {
  display: block;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.mnt-hero__specs dd span {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
}

/* ※2026-11-08：ご指示により要項帯の下の注記
   （クレジット共有／ご提出書類）を削除したため、
   .mnt-hero__panel-note のスタイルも撤去しました。 */

/* ---------- バナー（既存フォームへの誘導）— 廃止 ----------
   ※2026-11-08：ご指示により、ヒーロー直後のENTRYバナー
     （.mnt-band / .mnt-banner）を HTML ごと削除しました。
     未使用になる以下のスタイルも併せて削除しています：
       .mnt-band / .mnt-banner / :hover / :focus-visible /
       .mnt-banner__tag / __body / __title / __note /
       __note--calm / __go / __go svg / :hover __go svg
     応募の導線は、ヒーローの主ボタンとページ末尾の最終CTAで確保します。 */

/* ---------- レイアウト ----------
   ※2026-11：参照ページの設計言語（セクション見出しを中央に置き、
     その下に短いアクセント罫を1本入れる）を取り入れました。
     色は当サイトの真鍮（--accent-2）で組み、フォントも明朝のままです。 */

.mnt-main {
  width: min(1040px, 100%);
  margin-inline: auto;
  padding: 72px var(--pad-pc) 88px;
}

.mnt-sec + .mnt-sec {
  margin-top: 80px;
  padding-top: 76px;
  /* セクション間の罫は廃止。見出し下のアクセント罫で区切りを示すため、
     全幅の罫線を重ねると区切りが二重になる */
  border-top: 0;
}

.mnt-sec__head {
  margin-bottom: 40px;
  text-align: center;
}

.mnt-sec__num {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.mnt-sec__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(21px, 2.4vw, 29px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--ink-900);
}

/* 見出し下の短いアクセント罫（参照ページの sectionTitle:after に相当）。
   幅48px の真鍮ラインを中央に置き、見出しの下にリズムを作る */
.mnt-sec__title::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin: 18px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
}

.mnt-sec__lead {
  margin: 18px auto 0;
  max-width: 44em;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink-400);
}

.mnt-sec__lead strong {
  font-weight: 700;
  color: var(--ink-900);
}

/* ---------- 共通ブロック ---------- */

.mnt-block {
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.mnt-block + .mnt-block {
  margin-top: 18px;
}

.mnt-block__title {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-900);
}

.mnt-block__badge {
  display: inline-block;
  margin-right: 8px;
  color: var(--accent);
}

.mnt-block__note {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--ink-300);
}

/* ② ご負担（必須）の注記。
   ※2026-11-08：月次定例の一律強制参加がなくなったことを伝える重要な注記のため、
     .mnt-block__note の淡色（--ink-300）では弱すぎる。本文に近い色に上げ、
     左に真鍮の細罫を添えて「補足だが必読」であることを示す。 */
.mnt-block__note--must {
  padding-left: 10px;
  border-left: 2px solid rgba(201, 162, 75, 0.55);
  font-size: 12px;
  line-height: 1.85;
  color: var(--ink-400);
}

/* ---------- 目的（番号付き） ---------- */

.mnt-purpose {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: purpose;
}

.mnt-purpose > li {
  position: relative;
  padding-left: 38px;
  counter-increment: purpose;
}

.mnt-purpose > li::before {
  content: counter(purpose);
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(201, 162, 75, 0.55);
  border-radius: 50%;
  background: rgba(201, 162, 75, 0.09);
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.mnt-purpose strong {
  display: block;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-900);
}

.mnt-purpose p {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-500);
}

.mnt-purpose__opt {
  display: inline-block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--ink-300);
}

/* ---------- 募集要項（定義リスト） ---------- */

.mnt-facts {
  margin: 0;
}

.mnt-facts > div {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 0 20px;
  padding: 14px 0;
  border-top: 1px solid var(--ink-100);
}

.mnt-facts > div:first-child {
  padding-top: 0;
  border-top: 0;
}

.mnt-facts dt {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--ink-400);
}

.mnt-facts dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-800);
}

.mnt-facts dd strong {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.mnt-facts__sub {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-300);
}

/* ---------- モニター特典 ----------
   ※2026-11-08：ご指示により特典04を削除し、4枚 → 3枚になりました。
     3枚を横一列で並べるため、2列 → 3列に変更しています。
     （狭い幅では下のメディアクエリで1列に落とします） */

.mnt-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ※2026-11-08：カード下部の補足テキストを削除したぶん、カードが
   「本文のあとに大きな空白」を抱えた状態になっていたため、サイズを調整。
   ・上下の余白を 24/22 → 22/22 に詰め、上罫3pxと釣り合わせる
   ・番号・見出し・本文の行間（gap）を 10 → 9 に詰める
   グリッドの stretch は維持しているため、3枚の下端は揃ったままです。
   （1列に落ちる幅では、各カードが自分の内容に応じた高さになります） */
.mnt-benefit {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent-2);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-card);
}

.mnt-benefit__num {
  margin: 0;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.mnt-benefit__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-900);
}

.mnt-benefit__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-500);
}

/* ※2026-11-08：ご指示により、カード下部の補足テキスト
   （.mnt-benefit__note / __note strong / __note + __note）を削除したため、
   対応するスタイルも撤去しました。3枚のカードは見出し＋本文のみになります。 */

/* ---------- 6機能 ---------- */

.mnt-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mnt-features > li {
  padding: 14px 0 14px 16px;
  border-left: 2px solid var(--ink-100);
}

.mnt-feature__name {
  margin: 0;
  font-family: var(--serif);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-900);
}

.mnt-feature__text {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--ink-500);
}

/* 機能説明のうち「属人化解消・自走」に効く一節。
   長文の中でも拾い読みで伝わるよう、濃色の太字にする（色は変えない） */
.mnt-feature__text strong {
  font-weight: 700;
  color: var(--ink-800);
}

/* ---------- ご負担／ご協力 ---------- */

.mnt-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.mnt-duo .mnt-block {
  margin-top: 0;
}

.mnt-block--must {
  border-top: 3px solid var(--ink-800);
}

.mnt-block--any {
  border-top: 3px solid var(--ink-200);
}

.mnt-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.mnt-list > li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-500);
}

.mnt-list > li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-2);
}

/* ---------- 参加ステップ（縦タイムライン） ---------- */

.mnt-steps {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 左の縦罫。番号の円の中心（x=17px）に通す */
.mnt-steps::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 18px;
  left: 17px;
  width: 1px;
  background: var(--line);
}

.mnt-step {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0 20px;
  padding-bottom: 22px;
}

.mnt-step:last-child {
  padding-bottom: 0;
}

.mnt-step__num {
  grid-column: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border: 1px solid rgba(201, 162, 75, 0.55);
  border-radius: 50%;
  background: var(--paper);
  font-family: var(--serif);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.mnt-step__title {
  grid-column: 2;
  margin: 6px 0 0;
  font-family: var(--serif);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-900);
}

.mnt-step__text {
  grid-column: 2;
  grid-row: 2;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-500);
}

/* ステップ本文中の強調（「原則1ヶ月」「最大2ヶ月」など） */
.mnt-step__text strong {
  font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

/* ---------- セキュリティ ---------- */

.mnt-secure {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mnt-secure__item {
  padding: 22px 22px 20px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--ink-800);
  border-radius: var(--radius);
  background: var(--paper);
}

.mnt-secure__title {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-900);
}

.mnt-secure__text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--ink-500);
}

/* ---------- ご確認事項 ---------- */

.mnt-notes {
  margin: 0;
  padding: 20px 24px 20px 40px;
  border-radius: var(--radius);
  background: var(--chalk);
  list-style: decimal;
  display: grid;
  gap: 8px;
}

.mnt-notes > li {
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-500);
}

.mnt-notes > li::marker {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- 最終CTA ---------- */

.mnt-cta {
  margin-top: 64px;
  padding: 48px 32px 44px;
  border-radius: var(--radius);
  background: linear-gradient(118deg, #0f2547 0%, #1a3668 60%, #274b83 100%);
  text-align: center;
  color: var(--paper);
}

/* ※2026-11-08：最終CTAの見出し「記帳の値崩れに、まだ耐え続けますか。」を
   ご指示により削除したため、.mnt-cta__title の定義も削除しました。
   （セクションは aria-label="お申し込みのご案内" で名前を持つようにしています） */

/* 見出しが無くなったため、リード文がCTAの先頭になる。
   上余白は見出しがあった頃の名残を残さず 0 にする */
.mnt-cta__lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.76);
}

.mnt-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 26px;
}

/* 最終CTAの安心文言（2026-11 追記）。
   紺地の上なので、白の透過で一段弱く見せ、本題（ボタン）を邪魔しない。
   1行目（押し売りなし）だけは不安を消す文言なので少し明るくする。 */
.mnt-cta__note {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.62);
}

.mnt-cta__note + .mnt-cta__note {
  margin-top: 4px;
}

.mnt-cta__note:first-of-type {
  color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   レスポンシブ（サイト本体と同じ 1200 / 1024 / 900 / 768 / 360 に合わせる）
   ========================================================================== */

@media (max-width: 1200px) {
  /* ※2026-11：中央寄せレイアウトへの変更に伴い、旧2カラム用の指定を撤去。
     要項帯は5列を維持しつつ、左右の余白だけを詰める。 */
  .mnt-hero__specs > div {
    padding: 0 12px;
  }

  /* リライトで要項の見出しが2行になる項目があるため、行間を確保する */
  .mnt-hero__specs dt {
    line-height: 1.4;
  }
}

@media (max-width: 1024px) {
  .mnt-secure {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .mnt-secure__item {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: 0 20px;
    align-items: baseline;
  }

  .mnt-secure__title {
    margin-bottom: 0;
  }
}

@media (max-width: 900px) {
  /* SPヘッダーは 60px。ヒーローの上余白を詰める */
  .mnt-hero {
    padding-top: 104px;
    padding-bottom: 40px;
  }

  /* ※2026-11-08：枠見出しは、狭い幅では内側の余白を詰めて
     文字の折り返しが窮屈にならないようにする。
     CTA はボタンを囲う枠を廃止したため、内側余白は 0 のままにします。 */
  .mnt-hero__frame {
    padding: 22px 22px 24px;
  }

  .mnt-hero__lead {
    margin-top: 24px;
  }

  .mnt-hero__cta {
    margin-top: 24px;
    padding: 0;
  }

  /* 要項帯が横5列では詰まるため、2列のグリッドに折り返す
     （罫はセル単位で付け直す）。 */
  .mnt-hero__panel {
    margin-top: 32px;
    padding: 16px 4px 14px;
  }

  .mnt-hero__specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 0;
  }

  .mnt-hero__specs > div {
    padding: 0 10px;
    text-align: left;
  }

  /* 2列に折り返すと「左罫」だけでなく「上罫」も必要になる。
     奇数番目（左列）は左罫を消し、3番目以降は上罫を足す。 */
  .mnt-hero__specs > div:nth-child(odd) {
    border-left: 0;
  }

  .mnt-hero__specs > div:nth-child(n + 3) {
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .mnt-main {
    padding-top: 48px;
    padding-bottom: 64px;
  }

  .mnt-sec + .mnt-sec {
    margin-top: 52px;
    padding-top: 48px;
  }

  .mnt-benefits,
  .mnt-duo,
  .mnt-features {
    grid-template-columns: minmax(0, 1fr);
  }

  .mnt-benefits,
  .mnt-duo {
    gap: 14px;
  }

  .mnt-secure__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .mnt-secure__title {
    margin-bottom: 8px;
  }
}

@media (max-width: 768px) {
  .mnt-main {
    padding-inline: var(--pad-sp);
  }

  .mnt-hero .inner {
    padding-inline: var(--pad-sp);
  }

  /* ※2026-11-08：ENTRYバナー（.mnt-band / .mnt-banner）を削除したため、
     それらを対象にしていた 768px の指定も撤去しました。 */

  .mnt-block {
    padding: 20px 18px;
  }

  .mnt-facts > div {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 0 14px;
  }

  .mnt-benefit {
    padding: 20px 18px 18px;
  }

  .mnt-notes {
    padding: 18px 18px 18px 34px;
  }

  .mnt-cta {
    margin-top: 48px;
    padding: 34px 20px 32px;
  }

  .mnt-cta__actions {
    gap: 12px;
  }
}

@media (max-width: 360px) {
  /* ※2026-11-08：旧「限定50社」帯（.mnt-hero__limit）の縮小指定は、
     ピル型バッジ自体を削除したため撤去しました。枠見出しの余白を
     さらに詰め、360px でも文字が窮屈にならないようにします。
     CTA はボタンを囲う枠を廃止したため、内側余白の指定はありません。 */
  .mnt-hero__frame {
    padding: 20px 16px 22px;
  }

  .mnt-hero__title {
    letter-spacing: 0.03em;
  }

  .mnt-facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .mnt-step {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 0 14px;
  }

  .mnt-step__num {
    width: 30px;
    height: 30px;
    font-size: 11.5px;
  }

  .mnt-steps::before {
    left: 15px;
  }
}