/* MIEKATA 申し込みの区画（全ページ。2026-10-23 吉田さんの改修指示書 A9・細部の基準）
   - 入口は「無料で診断する」1つ（行き先は src/constants/miekataDiagnosis.ts）。LINE はアイコンと1行の説明だけ
   - 途中の区画（aside.mcta）：薄い地の箱。最後の区画（section.mcta-final）：紺の帯
   - ボタンは主ボタン（朱の塗り）：高さ 52px（スマホ 48px）・角丸 999px・ホバーで1段暗く・キーボード操作で 2px の輪郭
   - 中身は scripts/miekata-pages-2026-10-23.py・miekata-home-2026-10-23.py が入れる
   - 古い CSS（:not(#a255)×12 など）に負けないよう、:is(#m×13, *) で強くする */

:root {
  --mcta-ink: var(--ds-ink, #1b1e2b);
  --mcta-sub: var(--ds-sub, #4b5375);
  --mcta-blue: var(--ds-blue, #2448d8);
  --mcta-navy: var(--ds-navy, #102650);
  --mcta-cta: var(--ds-cta, #bf5139);
  --mcta-cta-hover: var(--ds-cta-dk, #a8452f);
  --mcta-line: var(--ds-line, #06c755);
  --mcta-pale: var(--ds-pale, #f4f7fc);
  --mcta-border: var(--ds-border, #dfe6f2);
  --mcta-white: #fff;
  --mcta-on-navy: #dfe6f2;
  --mcta-ease: cubic-bezier(.43, .05, .17, 1);
}

html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) :where(.mcta, .mcta-final) * { box-sizing: border-box; }
html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) :where(.mcta, .mcta-final) :where(h2, p) { margin: 0; padding: 0; }

/* 主ボタン */
html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) a.mcta-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 52px;
  min-width: 280px;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 28px 0 32px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--mcta-cta) !important;
  color: var(--mcta-white) !important;
  font: 700 16px/1 'Noto Sans JP', sans-serif !important;
  letter-spacing: .06em !important;
  text-decoration: none !important;
  text-shadow: none !important;
  white-space: nowrap;
  transition: background-color .2s var(--mcta-ease);
}
html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) a.mcta-btn:hover { background: var(--mcta-cta-hover) !important; }
html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) a.mcta-btn:focus-visible { outline: 2px solid var(--mcta-blue) !important; outline-offset: 3px !important; }
html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) a.mcta-btn .mcta-arrow { flex: none; transition: transform .2s var(--mcta-ease); }
html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) a.mcta-btn:hover .mcta-arrow { transform: translateX(3px); }

/* 途中の区画 */
html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) aside.mcta { display: block; margin: 0 !important; padding: 64px 0 !important; background: transparent !important; text-align: center !important; }
html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) .mcta-in { width: min(1200px, calc(100% - 48px)); margin: 0 auto; padding: 40px 24px; border: 1px solid var(--mcta-border); border-radius: 12px; background: var(--mcta-pale); text-align: center !important; }
html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) .mcta-title { font-size: 20px !important; font-weight: 700 !important; line-height: 1.6 !important; letter-spacing: .04em !important; color: var(--mcta-ink) !important; text-align: center !important; }
html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) .mcta-in a.mcta-btn { margin-top: 24px !important; }
html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) .mcta-after { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px !important; font-size: 14px !important; line-height: 1.6 !important; color: var(--mcta-sub) !important; text-align: left !important; }
html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) .mcta-line { flex: none; width: 24px; height: 24px; color: var(--mcta-line); }

/* 最後の区画 */
html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) section.mcta-final { display: block; margin: 0 !important; padding: 96px 0 !important; background: var(--mcta-navy) !important; text-align: center !important; }
html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) .mcta-final-in { width: min(800px, calc(100% - 48px)); margin: 0 auto; text-align: center !important; }
html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) .mcta-final .mcta-final-tag { margin: 0 0 16px !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .08em !important; color: var(--mcta-on-navy) !important; }
html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) .mcta-final h2 { font-size: 30px !important; line-height: 1.5 !important; letter-spacing: .04em !important; color: var(--mcta-white) !important; text-align: center !important; }
html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) .mcta-final p:not(.mcta-final-tag) { max-width: 680px; margin: 24px auto 0 !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.9 !important; color: var(--mcta-on-navy) !important; text-align: center !important; }
html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) .mcta-final a.mcta-btn { margin-top: 32px !important; }

@media (max-width: 767px) {
  html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) aside.mcta { padding: 48px 0 !important; }
  html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) .mcta-in { width: calc(100% - 40px); padding: 32px 20px; }
  html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) .mcta-title { font-size: 18px !important; }
  html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) a.mcta-btn { width: 100%; min-width: 0; height: 48px; }
  html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) .mcta-after { align-items: flex-start; }
  html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) section.mcta-final { padding: 64px 0 !important; }
  html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) .mcta-final-in { width: calc(100% - 40px); }
  html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) .mcta-final .mcta-final-tag { margin: 0 0 16px !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .08em !important; color: var(--mcta-on-navy) !important; }
html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) .mcta-final h2 { font-size: 24px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) a.mcta-btn, html body:is(#m#m#m#m#m#m#m#m#m#m#m#m#m, *) a.mcta-btn .mcta-arrow { transition: none !important; }
}