/* ==========================================================================
   AIOスコア診断（/aio-score/ だけで読み込む）
   色・文字の大きさは app.css の変数を使う。ボタン・タグ・見出し・FAQ・濃紺の帯は app.css のもの。
   ========================================================================== */
.aio {
  --aio-card: var(--c-bg);
  --aio-navy-2: #0B2A38;
  --aio-navy-line: #1E3A4A;
  --aio-ng-bg: #FDE8E6;
  --aio-ng: #B42318;
  --aio-warn: #D97706;
  line-height: 1.5;
}
.aio [hidden] { display: none !important; }

/* 上部 */
.aio-trademark { max-width: 820px; margin-top: 10px; font-size: 12px; line-height: 1.7; color: var(--c-text-muted); }
.aio-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.aio-tags .tag { margin-right: 0; }
.aio-tool { display: flex; gap: 32px; align-items: stretch; margin-top: 36px; }

/* 入力フォーム */
.aio-form-card { flex: 1.15; min-width: 0; padding: 36px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: 28px; box-shadow: 0 20px 48px rgba(17, 20, 24, .1); scroll-margin-top: calc(var(--header-h) + 16px); }
.aio-form-card__label { margin-bottom: 14px; font-size: 13px; font-weight: 700; color: var(--c-teal); }
.aio-preparing { margin-bottom: 16px; padding: 14px 16px; border-radius: 10px; background: var(--c-cyan-pale); color: var(--c-navy-dark); font-size: 14px; font-weight: 700; line-height: 1.7; }
.aio-form__fields { min-width: 0; margin: 0; padding: 0; border: none; }
.aio-form__fields:disabled { opacity: .6; }

.seg { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: #EEF1F4; }
.seg label { position: relative; flex: 1; min-height: 24px; padding: 10px 12px; border-radius: 8px; text-align: center; font-size: 14px; font-weight: 700; color: var(--c-text-sub); cursor: pointer; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg label:has(input:checked) { background: var(--c-white); box-shadow: 0 2px 8px rgba(17, 20, 24, .1); color: var(--c-navy-dark); }
.seg label:has(input:focus-visible) { outline: 3px solid var(--c-cyan); outline-offset: 2px; }

.aio-label { display: block; margin: 24px 0 8px; font-size: 14px; font-weight: 700; }
.aio-label--sub { margin: 4px 0 8px; font-size: 13px; font-weight: 400; color: var(--c-text-sub); }
.field {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--c-border-strong);
  border-radius: 8px;
  background: var(--c-white);
  color: var(--c-text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
}
textarea.field { min-height: 180px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
.field:focus-visible { outline: 3px solid var(--c-cyan); outline-offset: 2px; }
.aio-more { margin-top: 16px; }
.aio-more summary { display: flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--c-teal); cursor: pointer; list-style: none; }
.aio-more summary::-webkit-details-marker { display: none; }
.aio-more summary::before { content: "＋"; margin-right: 8px; }
.aio-more[open] summary::before { content: "－"; }
.aio-hint { margin-top: 8px; font-size: 12px; line-height: 1.7; color: var(--c-text-muted); }
.aio-hint--strong { font-weight: 700; color: var(--c-text-sub); }
.aio-consent { margin-top: 22px; }
.aio-consent__label { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.7; color: var(--c-text-sub); cursor: pointer; }
.aio-consent__label input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--c-blue-deep); }
.aio-consent a, .aio-legal-links a { color: var(--c-teal); text-decoration: underline; text-underline-offset: 2px; }
.cf-turnstile { margin-top: 20px; }
.aio-submit { display: block; width: 100%; min-height: 52px; margin-top: 22px; padding: 17px 30px; border: none; border-radius: 4px; font-family: inherit; font-size: 16px; font-weight: 800; cursor: pointer; }
.aio-submit:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.aio-form > .aio-hint:first-of-type { margin-top: 14px; }
.aio-legal-links { margin-top: 10px; font-size: 12px; line-height: 1.8; color: var(--c-text-muted); }
.aio-status { min-height: 1.5em; margin-top: 12px; font-size: 14px; font-weight: 700; line-height: 1.7; }
.aio-status.is-busy { color: var(--c-text-sub); }
.aio-status.is-ok { color: var(--c-teal); }
.aio-status.is-error { color: var(--aio-ng); }

/* 上部の結果サンプル（カード） */
.aio-hero-sample { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 22px; padding: 36px; border-radius: 28px; background: var(--c-navy-dark); color: var(--c-white); }
.aio-hero-sample:hover { color: var(--c-white); }
.aio-hero-sample__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; color: var(--c-text-faint); }
.aio-hero-sample__en { font-weight: 700; letter-spacing: .08em; color: var(--c-sky); }
.aio-hero-sample__main { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.aio-hero-sample__rank { display: flex; flex-direction: column; font-size: 13px; color: var(--c-text-faint); }
.aio-hero-sample__rank strong { font-size: 52px; font-weight: 800; line-height: 1.1; color: var(--c-sky); }
.aio-hero-sample__metrics { display: flex; gap: 12px; }
.aio-hero-sample__metrics > span { flex: 1; display: flex; flex-direction: column; padding: 16px; border-radius: 14px; background: var(--aio-navy-2); font-size: 12px; color: var(--c-text-faint); }
.aio-hero-sample__metrics strong { font-size: 26px; font-weight: 800; color: var(--c-white); }
.aio-hero-sample__metrics small { font-size: 12px; font-weight: 500; color: var(--c-text-faint); }
.aio-hero-sample__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--aio-navy-line); font-size: 13px; color: var(--c-mist); }
.aio-hero-sample__foot strong { color: var(--c-white); }
/* 実際の結果が出たら、上部のサンプルを隠して結果を見せる */
.aio-app:has(#aio-result:not([hidden])) .aio-hero-sample { display: none; }

/* 円グラフ（--aio-score を使う。値がないときは0） */
.aio-gauge,
.aio-metric-score .aio-metric-value {
  --aio-gauge-bg: var(--c-white);
  --aio-gauge-from: var(--c-cyan);
  --aio-gauge-to: var(--c-navy-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--aio-gauge-bg) 79%, transparent 80% 100%),
    conic-gradient(var(--aio-gauge-from), var(--aio-gauge-to) calc(var(--aio-score, 0) * 1%), var(--c-border) 0);
}
.aio-gauge { width: 132px; height: 132px; flex: none; box-shadow: 0 0 0 6px var(--c-white); }
.aio-gauge__value { font-size: 30px; font-weight: 800; line-height: 1; color: var(--c-navy-dark); }
.aio-gauge__unit { margin-top: 6px; font-size: 12px; color: var(--c-text-muted); }
[data-rank^="D"] .aio-gauge, [data-rank^="E"] .aio-gauge,
[data-rank^="D"] .aio-metric-score .aio-metric-value, [data-rank^="E"] .aio-metric-score .aio-metric-value { --aio-gauge-from: var(--aio-warn); --aio-gauge-to: var(--aio-ng); }

/* ==========================================================================
   診断結果（#aio-result はJSが作る。結果のイメージも同じクラスで描く）
   ========================================================================== */
.aio-result { display: flex; flex-direction: column; gap: 24px; margin-top: 40px; }
#aio-result { --aio-card: var(--c-white); scroll-margin-top: calc(var(--header-h) + 16px); }
.aio-sample-sec .aio-result { max-width: 1200px; margin: 48px auto 0; }

.aio-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.aio-metric { padding: 24px; border-radius: 20px; background: var(--aio-card); }
.aio-metric-label { font-size: 13px; font-weight: 700; color: var(--c-text-muted); }
.aio-metric-value { margin-top: 6px; font-size: 34px; font-weight: 800; line-height: 1.2; color: var(--c-text); }
.aio-metric-value.aio-small { font-size: 34px; }
.aio-metric-score { display: flex; flex-direction: column; align-items: center; text-align: center; }
.aio-metric-score .aio-metric-value { --aio-gauge-bg: var(--aio-card); width: 168px; height: 168px; margin-top: 14px; font-size: 40px; color: var(--c-navy-dark); }
.aio-metric-badge .aio-metric-value {
  font-size: 64px;
  line-height: 1.1;
  background: linear-gradient(135deg, var(--c-cyan), var(--c-navy-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-rank^="D"] .aio-metric-badge .aio-metric-value,
[data-rank^="E"] .aio-metric-badge .aio-metric-value { background-image: linear-gradient(135deg, var(--aio-warn), var(--aio-ng)); }

.aio-body { display: flex; flex-direction: column; gap: 24px; }
.aio-section { order: 5; min-width: 0; padding: 36px; border-radius: 28px; background: var(--aio-card); font-size: 14px; line-height: 1.9; color: var(--c-text-body); }
.aio-section:has([data-axis]) { order: 1; }
.aio-section:has(.aio-checks) { order: 2; }
.aio-section h3 { margin-bottom: 18px; font-size: 18px; font-weight: 800; line-height: 1.5; color: var(--c-text); }
.aio-section h4, .aio-section h5 { margin: 22px 0 10px; font-size: 14px; font-weight: 800; color: var(--c-text); }
.aio-section p + p { margin-top: 10px; }
.aio-section ul, .aio-section ol { margin: 0; padding-left: 20px; font-size: 13px; line-height: 2; }
.aio-section ol > li + li { margin-top: 12px; }
.aio-section ol strong { display: block; color: var(--c-text); }

/* AIによる内容評価（--aio-pct でバーの幅） */
.aio-section ul:has(> li[data-axis]) { display: flex; flex-direction: column; gap: 16px; padding: 0; list-style: none; }
.aio-section li[data-axis] { font-size: 12px; line-height: 1.7; color: var(--c-text-muted); }
.aio-section li[data-axis] strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
}
.aio-section li[data-axis] strong::after {
  content: "";
  display: block;
  height: 10px;
  margin-top: 6px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--c-cyan), var(--c-cyan-light)) 0 0 / calc(var(--aio-pct, 0) * 1%) 100% no-repeat,
    var(--c-border);
}

/* 構造チェック（data-result で ○× の色） */
.aio-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; padding: 0 !important; list-style: none; }
.aio-checks li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--c-border); font-size: 13px; line-height: 1.6; }
.aio-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.aio-checks li[data-result="ok"] .aio-mark, .aio-checks .is-ok .aio-mark { background: var(--c-cyan-pale); color: var(--c-teal); }
.aio-checks li[data-result="ng"] .aio-mark, .aio-checks .is-ng .aio-mark { background: var(--aio-ng-bg); color: var(--aio-ng); }

/* 競合との比較（サンプルの点数） */
.aio-compare { display: flex; gap: 16px; max-width: 420px; margin: 14px 0 6px; }
.aio-compare__score { flex: 1; padding: 18px; border-radius: 16px; background: var(--c-white); text-align: center; }
.aio-compare__score span { display: block; font-size: 12px; font-weight: 700; color: var(--c-text-muted); }
.aio-compare__score strong { font-size: 32px; font-weight: 800; }
.aio-compare__score.is-self strong { color: var(--c-teal); }
.aio-compare__score small { font-size: 13px; font-weight: 500; color: var(--c-text-muted); }

/* 修正コード */
.aio-code { margin: 12px 0; overflow: hidden; border-radius: 12px; background: var(--c-navy-dark); }
.aio-code-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.aio-code-lang { font-size: 12px; color: var(--c-text-faint); }
.aio-copy { padding: 6px 14px; border: none; border-radius: 4px; background: var(--c-cyan); color: var(--c-navy-dark); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.aio-code pre { margin: 0; padding: 20px; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.75; color: var(--c-sky-pale); }
.aio-code code { font-family: inherit; }
.aio-note { font-size: 12px; line-height: 1.8; color: var(--c-text-muted); }

/* 改善・実装の相談 */
.aio-consult { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; max-width: 1200px; margin: 28px auto 0; padding: 32px 36px; border-radius: 20px; background: var(--c-slate); color: var(--c-white); }
.aio-consult:hover { color: var(--c-white); }
.aio-consult__en { display: block; font-size: 13px; font-weight: 600; color: var(--c-text-faint); }
.aio-consult__title { display: block; margin-top: 6px; font-size: 20px; font-weight: 800; line-height: 1.6; }
.aio-consult__more { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--c-mist); }
.aio-consult__chip { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: var(--c-slate-2); }

/* ==========================================================================
   説明のセクション
   ========================================================================== */
.aio-sec { padding: 100px 0; background: var(--c-bg); }
.aio-sec--white { background: var(--c-white); }
.aio-sample-sec { padding: 104px 0; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.sec-head--center { text-align: center; }
.sec-head--center .sec-title, .sec-head--center .aio-sec-lead { margin-left: auto; margin-right: auto; }
.aio-sec-lead { max-width: 820px; margin-top: 16px; font-size: 14px; line-height: 2; color: var(--c-text-sub); }

/* 診断の流れ */
.aio-flow { background: var(--c-navy-dark); color: var(--c-white); }
.aio-flow__en { font-size: 48px; font-weight: 800; line-height: 1; }
.aio-flow__label { margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--c-sky); }
.aio-flow__label::before { content: "● "; }
.aio-flow__title { margin-top: 22px; font-size: 28px; font-weight: 800; line-height: 1.6; }
.aio-flow__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 48px 0 0; padding: 0; list-style: none; }
.aio-flow__step { padding: 30px; border: 1px solid var(--aio-navy-line); border-radius: 20px; background: var(--aio-navy-2); }
.aio-flow__no { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--c-sky); }
.aio-flow__step-title { margin: 12px 0 10px; font-size: 19px; font-weight: 800; }
.aio-flow__text { font-size: 13px; line-height: 1.95; color: var(--c-mist); }
.aio-flow__note { margin-top: 28px; font-size: 12px; line-height: 1.9; color: var(--c-text-faint); }

/* 配点 */
.aio-scoring { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.aio-scoring__card { padding: 40px; border: 1px solid var(--c-border); border-radius: 28px; background: var(--c-white); box-shadow: 0 20px 48px rgba(17, 20, 24, .06); }
.aio-scoring__head { display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 800; color: var(--c-teal); }
.aio-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--c-cyan-pale); color: var(--c-cyan); }
.aio-scoring__title { margin: 16px 0 18px; font-size: 21px; font-weight: 800; }
.aio-scoring__card ul { margin: 0; padding-left: 20px; font-size: 14px; line-height: 2.1; color: var(--c-text-body); }
.aio-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.aio-feature { padding: 26px; border: 1px solid var(--c-border); border-radius: 20px; background: var(--c-white); }
.aio-feature__title { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 15px; font-weight: 800; }
.aio-feature__title svg { flex: none; color: var(--c-cyan); }
.aio-feature p { font-size: 13px; line-height: 1.9; color: var(--c-text-sub); }

/* 用語集 */
.aio-glossary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 48px 0 0; }
.aio-glossary__item { padding: 28px; border: 1px solid var(--c-border); border-radius: 20px; background: var(--c-bg); }
.aio-glossary dt { font-size: 28px; font-weight: 800; color: var(--c-cyan); }
.aio-glossary dd { margin: 0; font-size: 13px; line-height: 1.95; color: var(--c-text-sub); }
.aio-glossary__alt { margin: 6px 0 14px; font-size: 12px; line-height: 1.6; color: var(--c-text-muted); }

/* 業種別 */
.aio-business { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.aio-business__item { padding: 30px; border-top: 4px solid var(--c-cyan); border-radius: 20px; background: var(--c-white); }
.aio-business__item h3 { margin-bottom: 10px; font-size: 18px; font-weight: 800; }
.aio-business__item p { font-size: 13px; line-height: 1.95; color: var(--c-text-sub); }

/* 料金 */
.aio-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; margin-top: 48px; }
.aio-plan { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 32px 28px; border: 1px solid var(--c-border); border-radius: 24px; background: var(--c-bg); }
.aio-plan.is-featured { border: 2px solid var(--c-cyan); background: var(--c-navy-dark); color: var(--c-white); }
.aio-plan__badge { position: absolute; top: -13px; left: 28px; padding: 4px 12px; border-radius: 999px; background: var(--c-cyan); color: var(--c-navy-dark); font-size: 12px; font-weight: 800; }
.aio-plan__name { font-size: 15px; font-weight: 800; letter-spacing: .04em; }
.aio-plan__price span { font-size: 38px; font-weight: 800; }
.aio-plan__price small { margin-left: 4px; font-size: 13px; color: var(--c-text-sub); }
.aio-plan.is-featured .aio-plan__price small { color: var(--c-mist); }
.aio-plan__items { flex: 1; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.7; color: var(--c-text-sub); }
.aio-plan__items li::before { content: "✓ "; }
.aio-plan.is-featured .aio-plan__items { color: var(--c-mist); }
.aio-plan__btn { padding: 13px 20px; border-radius: 999px; background: var(--c-text); color: var(--c-white); font-size: 14px; font-weight: 800; text-align: center; white-space: normal; }
.aio-plan__btn:hover { color: var(--c-white); }
.aio-plan.is-featured .aio-plan__btn { background: var(--c-cyan); color: var(--c-navy-dark); }
.aio-plan-consult { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-top: 28px; padding: 28px 32px; border-radius: 20px; background: var(--c-cyan-pale); }
.aio-plan-consult__title { font-size: 17px; font-weight: 800; }
.aio-plan-consult__text { margin-top: 6px; font-size: 13px; line-height: 1.8; color: var(--c-text-sub); }
.aio-plan-consult__btn { padding: 14px 26px; border-radius: 999px; background: var(--c-navy-dark); color: var(--c-white); font-size: 14px; font-weight: 800; }
.aio-plan-consult__btn:hover { color: var(--c-white); }
.aio-plan-note { margin-top: 16px; font-size: 12px; color: var(--c-text-muted); }

/* ページ下部の注意書き */
.aio-bottom-note { padding: 0 0 40px; background: var(--c-bg); font-size: 12px; line-height: 1.9; color: var(--c-text-muted); }

/* 一番上の小見出しと、ボタンの下の文 */
.aio-kicker { display: block; width: fit-content; margin-bottom: 14px; padding: 6px 14px; border-radius: 999px; background: var(--c-cyan-pale); font-size: 13px; font-weight: 800; color: var(--c-teal); }
.aio-submit-note { margin-top: 10px; text-align: center; }

/* まず、AIに聞いてみてください（フォームの前） */
.aio-ask { margin-top: 36px; padding: 36px; border-radius: 28px; background: var(--c-white); border: 1px solid var(--c-border); }
.aio-ask__title { font-size: 22px; font-weight: 800; line-height: 1.5; }
.aio-ask__text { margin-top: 10px; font-size: 15px; line-height: 1.9; color: var(--c-text-sub); }
.aio-ask__questions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 20px 0 0; padding: 0; list-style: none; }
.aio-ask__question { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 20px; border-radius: 18px; background: var(--c-bg); }
.aio-ask__q { font-size: 15px; font-weight: 700; line-height: 1.8; color: var(--c-text); }
.aio-ask__copy { align-self: flex-start; padding: 6px 14px; border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-white); font: inherit; font-size: 12px; font-weight: 700; color: var(--c-text); cursor: pointer; }
.aio-ask__copy:hover { border-color: var(--c-cyan); color: var(--c-cyan); }
.aio-ask__copy:focus-visible { outline: 3px solid var(--c-cyan-light); outline-offset: 2px; }
.aio-ask__replace { margin-top: 14px; font-size: 13px; line-height: 1.8; color: var(--c-text-sub); }
.aio-ask__checks { display: flex; flex-direction: column; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.aio-ask__checks li { position: relative; padding-left: 28px; font-size: 15px; font-weight: 700; line-height: 1.8; }
.aio-ask__checks li::before { content: "?"; position: absolute; left: 0; top: 3px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: var(--c-navy-dark); font-size: 12px; line-height: 1; color: var(--c-white); }
.aio-ask__closing { margin-top: 18px; font-size: 14px; line-height: 1.9; color: var(--c-text-body); }
.aio-ask__note { margin-top: 8px; font-size: 12px; line-height: 1.8; color: var(--c-text-muted); }

/* チェックで分かること・直すと変わること */
.aio-learn .sec-head + * { margin-top: 40px; }
.aio-learn__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.aio-learn__card { padding: 30px; border-radius: 20px; background: var(--c-bg); }
.aio-learn__no { font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--c-cyan); }
.aio-learn__title { margin-top: 10px; font-size: 18px; font-weight: 800; line-height: 1.5; }
.aio-learn__text { margin-top: 10px; font-size: 14px; line-height: 1.95; color: var(--c-text-sub); }

/* 結果のあとの次の一歩（#aio-next。結果の外に置き、app.js が結果の表示を見て出す） */
.aio-next { margin-top: 32px; padding: 40px; border-radius: 28px; background: var(--c-white); border: 1px solid var(--c-border); }
.aio-next__en { font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--c-cyan); }
.aio-next__title { margin-top: 8px; font-size: 24px; font-weight: 800; line-height: 1.5; }
.aio-next__lead { margin-top: 10px; font-size: 15px; line-height: 1.9; color: var(--c-text-sub); }
.aio-next__retry { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.aio-next__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.aio-next__card { display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; border: 1px solid var(--c-border); border-radius: 20px; background: var(--c-bg); }
.aio-next__card.is-featured { border: 2px solid var(--c-cyan); background: var(--c-white); box-shadow: 0 12px 32px rgba(0, 150, 200, .12); }
.aio-next__card-title { font-size: 18px; font-weight: 800; line-height: 1.5; }
.aio-next__card-text { font-size: 13px; line-height: 1.9; color: var(--c-text-sub); }
.aio-next__card-price { font-size: 14px; font-weight: 800; line-height: 1.7; color: var(--c-teal); }
.aio-next__btn { margin-top: auto; justify-content: center; text-align: center; white-space: normal; }
.aio-next__note { margin-top: 16px; font-size: 12px; line-height: 1.8; color: var(--c-text-muted); }
.aio-next__plan { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; font-size: 13px; line-height: 1.8; }
.aio-next__plan a { font-weight: 700; color: var(--c-cyan); text-decoration: underline; text-underline-offset: 3px; }
.aio-next__plan span { font-size: 12px; color: var(--c-text-muted); }
.aio-next__feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--c-border); font-size: 13px; }
.aio-next__feedback-btns { display: flex; gap: 8px; }
.aio-next__feedback button { padding: 8px 16px; border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-white); font: inherit; font-size: 13px; font-weight: 700; color: var(--c-text); cursor: pointer; }
.aio-next__feedback button:hover { border-color: var(--c-cyan); color: var(--c-cyan); }
.aio-next__feedback button:focus-visible { outline: 3px solid var(--c-cyan-light); outline-offset: 2px; }
.aio-next__thanks { font-weight: 700; color: var(--c-teal); }

/* ==========================================================================
   スマホ（760px以下）
   ========================================================================== */
@media (max-width: 760px) {
  .aio-tool { flex-direction: column; gap: 20px; }
  .aio-form-card, .aio-hero-sample { padding: 28px 20px; }
  .aio-hero-sample__metrics { flex-direction: column; }

  .aio-head { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .aio-metric-score { grid-column: 1 / -1; }
  .aio-metric { padding: 18px; }
  .aio-metric-value, .aio-metric-value.aio-small { font-size: 26px; }
  .aio-metric-badge .aio-metric-value { font-size: 48px; }
  .aio-section { padding: 28px 20px; border-radius: 20px; }
  .aio-checks { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .aio-consult { padding: 28px 20px; }
  .aio-consult__title { font-size: 17px; }

  .aio-sec, .aio-sample-sec { padding: 72px 0; }
  .aio-flow__title { font-size: 24px; }
  .aio-flow__steps, .aio-scoring, .aio-features, .aio-glossary, .aio-business, .aio-plans { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .aio-scoring__card { padding: 28px 20px; }
  .aio-plans { gap: 28px; }
  .aio-plan-consult { padding: 24px 20px; }
  .aio-plan-consult__btn { white-space: normal; text-align: center; }
  .aio-next { padding: 28px 20px; border-radius: 20px; }
  .aio-next__title { font-size: 20px; }
  .aio-next__cards { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px; }
  .aio-ask { margin-top: 28px; padding: 28px 20px; border-radius: 20px; }
  .aio-ask__title { font-size: 19px; }
  .aio-ask__questions, .aio-learn__cards { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .aio-learn__card { padding: 24px 20px; }
}