/*!
 * 業務改善セルフチェック（/self-check）専用のスタイル。
 * page-self-check.php でだけ読み込む（functions.php の tailwind8_self_check_assets）。
 *
 * テーマ本体は Tailwind だが、この画面だけ手書きCSSにしている。
 * モック（mocks/diagnosis/index.html）で実機確認まで済ませた見た目をそのまま運ぶため。
 * Tailwind のクラスへ書き直すと、確認し直しになる。
 *
 * 全部 .sc の中に閉じ込めてある。.row / .step / .field のような一般名が
 * テーマ側とぶつからないようにするため。ラッパを外さないこと。
 *
 * 色の割り当て（飾りではなく意味に紐づける。増やすときもこの4本から外さない）:
 *   スカイ  … 作る側・これからやること（改善の方向性・考えられる方法・重い受け皿）
 *   グリーン… 作らない側・答え終わった設問・軽い受け皿
 *   パープル… 量の話（独自システムの必要性・規模・期間）
 *   アンバー… AIを使わないほうがいい部分
 *
 * 文字サイズの下限は 16px（1rem）。これより小さい font-size を書かない。
 * tests/test-diagnosis-ledger.php が走査して、16px 未満があれば落とす。
 */

.sc{
  /* theme/tailwind.config.js のトークンに合わせる */
  --primary:#0EA5E9; --primary-600:#0284C7; --primary-700:#0369A1; --primary-800:#075985; --primary-900:#0C4A6E;
  --primary-50:#F0F9FF; --primary-100:#E0F2FE; --primary-200:#BAE6FD; --primary-300:#7DD3FC;
  --secondary:#10B981; --secondary-50:#ECFDF5; --secondary-100:#D1FAE5;
  --secondary-600:#059669; --secondary-700:#047857;
  /* front-page.php がブログ／ポッドキャストの帯に使っている紫。同じ語彙から借りる */
  --purple-50:#FAF5FF; --purple-100:#F3E8FF; --purple-200:#E9D5FF; --purple-600:#9333EA; --purple-700:#7E22CE;
  --slate-900:#0F172A; --slate-800:#1E293B; --slate-700:#334155; --slate-600:#475569;
  --slate-500:#64748B; --slate-400:#94A3B8; --slate-300:#CBD5E1; --slate-200:#E2E8F0;
  --slate-100:#F1F5F9; --slate-50:#F8FAFC;
  --amber-50:#FFFBEB; --amber-100:#FEF3C7; --amber-200:#FDE68A; --amber-500:#F59E0B; --amber-800:#92400E;
  --page:#F4F8FB;
  --radius:.5rem; --radius-lg:.75rem;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06);
  --shadow-lg:0 12px 28px rgba(2,132,199,.14);

  background:var(--page); color:var(--slate-700); line-height:1.8; font-size:1rem;
}

/* ------------------------------------------------------------------
   文字サイズの下限は 16px（1rem）。これより小さい font-size を書かない。
   check.php が index.html を走査して、16px 未満があれば落とす。

   小さくできない代わりに、階層は「太さ・色・字間・余白」で作る。
   注記やラベルを 12〜14px に落とす癖がここでは使えないので、
   .row__label のように letter-spacing と色で弱めるか、
   .hours small のように行を分けて重さを下げる。
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   色は飾りではなく、意味に紐づける。増やすときもこの4本から外さない。

     スカイ（primary）… 作る側・これからやること（②③④・重い受け皿）
     グリーン（secondary）… 作らない側・答え終わった設問・軽い受け皿
     パープル（purple）… 量の話（⑤独自開発の必要性・⑥規模・⑧期間）
     アンバー（amber）… AIを使わないほうがいいところ

   結果ヘッダの色は means[].build で切り替える（作る／作らないが一目で分かる）。
   クラス名はJSで文字列連結せず、完成した名前を2つ用意して付け替える。
   ------------------------------------------------------------------ */
  margin:0; background:var(--page); color:var(--slate-700);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.8; font-size:1rem;
}
.sc h1, .sc h2, .sc h3, .sc h4{color:var(--slate-800);line-height:1.5;margin:0}
.sc a{color:var(--primary-600)}

/* header / footer — 本番の位置関係が分かる程度の簡略版 */

/* hero — 濃い青の帯。ここだけ地色を反転させて、下の白いカード群を浮かせる */
.sc .hero{
  background:
    radial-gradient(120% 140% at 88% 0%,rgba(56,189,248,.38),transparent 60%),
    linear-gradient(135deg,var(--primary-700),var(--primary-800) 55%,var(--primary-900));
  padding:3rem 0 2.5rem;color:#fff
}
.sc .eyebrow{color:var(--primary-200);font-weight:700;font-size:1rem;letter-spacing:.12em;margin:0 0 .5rem}
.sc .hero h1{color:#fff;font-size:1.875rem;font-weight:700;margin-bottom:.75rem}
.sc .hero .lede{color:var(--primary-100);margin:0 0 1.25rem}
.sc .callout{background:#fff;border-left:4px solid var(--secondary);border-radius:0 var(--radius) var(--radius) 0;padding:1.15rem 1.35rem;font-size:1rem;color:var(--slate-600);box-shadow:0 14px 30px rgba(12,74,110,.22)}
.sc .callout p{margin:0}
.sc .callout p + p{margin-top:.6rem}

.sc__main{padding:2.5rem 0}

/* form — 未回答はスカイ、回答済みはグリーン。8枚の進み具合が色で分かる */
.sc .step{
  border:1px solid var(--slate-200);border-left:5px solid var(--primary-300);
  border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:1.25rem;background:#fff;
  box-shadow:var(--shadow);transition:border-color .15s,background .15s
}
.sc .step:has(input:checked){border-left-color:var(--secondary);background:linear-gradient(100deg,var(--secondary-50),#fff 42%)}
.sc .step:has(input:checked) .step__no{background:linear-gradient(135deg,var(--secondary),var(--secondary-600))}
.sc .step > legend{padding:0;margin-bottom:.25rem}
.sc .step__no{display:inline-block;background:linear-gradient(135deg,var(--primary),var(--primary-600));color:#fff;font-weight:700;font-size:1rem;line-height:1.4;border-radius:999px;padding:.1rem .75rem;margin-right:.6rem}
.sc .step__q{font-weight:700;color:var(--slate-800);font-size:1.125rem}
.sc .step__hint{color:var(--slate-500);font-size:1rem;margin:.35rem 0 1rem}
.sc .opts{display:grid;gap:.5rem;margin:0;padding:0;border:0}
.sc .opt{display:flex;gap:.6rem;align-items:flex-start;border:1px solid var(--slate-200);border-radius:var(--radius);padding:.75rem .9rem;cursor:pointer;background:#fff;transition:border-color .12s,background .12s}
.sc .opt:hover{border-color:var(--primary);background:var(--primary-50)}
.sc .opt input{margin:.5rem 0 0;accent-color:var(--primary);flex-shrink:0}
.sc .opt input:checked{accent-color:var(--secondary-600)}
.sc .opt span{font-size:1rem;color:var(--slate-700);line-height:1.7}
/* 選択肢は「見出し＋どういう状態か」の2行。16px 下限なので下段は色で弱める */
.sc .opt__label{display:block;color:var(--slate-800)}
.sc .opt__note{display:block;color:var(--slate-500);font-size:1rem;line-height:1.6}
.sc .opt:has(input:checked){border-color:var(--secondary);background:var(--secondary-50);box-shadow:inset 0 0 0 1px var(--secondary-100)}
.sc .opt:has(input:checked) .opt__label{color:var(--slate-800);font-weight:700}

.sc .actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:1.5rem}
.sc .btn{display:inline-block;border:0;border-radius:var(--radius);font-weight:700;font-size:1rem;padding:.85rem 1.6rem;cursor:pointer;text-decoration:none;text-align:center;transition:background .15s,box-shadow .15s,transform .05s}
.sc .btn:active{transform:translateY(1px)}
.sc .btn--primary{background:linear-gradient(135deg,var(--primary),var(--primary-600));color:#fff;box-shadow:0 6px 16px rgba(2,132,199,.28)}
.sc .btn--primary:hover{background:linear-gradient(135deg,var(--primary-600),var(--primary-700))}
/* 軽い受け皿（レポート）のボタン。重い受け皿＝青と色で分ける */
.sc .btn--accent{background:linear-gradient(135deg,var(--secondary),var(--secondary-600));color:#fff;box-shadow:0 6px 16px rgba(5,150,105,.28)}
.sc .btn--accent:hover{background:linear-gradient(135deg,var(--secondary-600),var(--secondary-700))}
/* 色帯の上に置くボタン */
.sc .btn--on-dark{background:#fff;color:var(--primary-700);box-shadow:0 8px 20px rgba(12,74,110,.3)}
.sc .btn--on-dark:hover{background:var(--primary-50)}
.sc .btn--ghost{background:#fff;color:var(--slate-700);border:1px solid var(--slate-300)}
.sc .btn--ghost:hover{border-color:var(--slate-400);background:var(--slate-50)}
.sc .btn--sm{padding:.55rem 1.1rem;font-size:1rem}
.sc .err{color:#B91C1C;font-size:1rem;margin-top:.75rem}
.sc .err[hidden]{display:none}

/* result */
.sc .result{margin-top:2.5rem}
.sc .result[hidden]{display:none}
.sc .result__head{border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:1.5rem 1.5rem 1.65rem;color:#fff}
/* 作る側は青、作らない側は緑。JSは完成したクラス名を付け替えるだけ */
.sc .result__head--build{background:linear-gradient(135deg,var(--primary-600),var(--primary-900))}
.sc .result__head--keep{background:linear-gradient(135deg,var(--secondary-600),#065F46)}
.sc .result__head p{margin:0;color:rgba(255,255,255,.78);font-size:1rem;letter-spacing:.08em}
.sc .result__head h2{color:#fff;font-size:1.5rem;margin:.35rem 0 0}
.sc .result__body{border:1px solid var(--slate-200);border-top:0;border-radius:0 0 var(--radius-lg) var(--radius-lg);padding:1.35rem;background:var(--slate-50)}
/* 行はカード。左の色帯で「現状／これからやること／量の話」を分ける */
.sc .row{background:#fff;border:1px solid var(--slate-200);border-left:4px solid var(--slate-300);border-radius:var(--radius);padding:1.15rem 1.25rem;margin-bottom:.75rem;box-shadow:var(--shadow)}
.sc .row--now{border-left-color:var(--slate-400)}
.sc .row--now .row__label{color:var(--slate-600)}
.sc .row--how, .sc .row--step, .sc .row--means{border-left-color:var(--primary)}
.sc .row--size, .sc .row--need, .sc .row--term{border-left-color:var(--purple-600)}
.sc .row--size .row__label, .sc .row--need .row__label, .sc .row--term .row__label{color:var(--purple-700)}
/* ⑦と「使わないほうがいいところ」は中の箱そのものが色を持つので、枠を二重にしない */
.sc .row--hours, .sc .row--notai{background:transparent;border:0;padding:0;box-shadow:none}
.sc .row[hidden]{display:none}
/* 16px 下限なので、ラベルは小ささではなく字間と色で弱める */
.sc .row__label{font-size:1rem;font-weight:700;color:var(--primary-600);letter-spacing:.1em;margin:0 0 .5rem}
.sc .row__value{margin:0;color:var(--slate-700)}
.sc .row__value strong{color:var(--slate-800)}
.sc .row__sub{margin-top:.5rem;color:var(--slate-500)}
.sc .row__note{margin-top:.85rem;color:var(--slate-600)}
/* 業種別の例示。判定は変えず、読み手が自分の話だと分かるためだけの1行 */
.sc .row__example{margin-top:.75rem;padding:.6rem .9rem;background:var(--primary-50);border-left:3px solid var(--primary-300);border-radius:0 var(--radius) var(--radius) 0;color:var(--slate-600)}
.sc .row__example[hidden], .sc .row__note[hidden]{display:none}
/* 「今のところは低めです」「中規模」「1〜3か月程度」。v3 で丸バッジをやめ、
   読める文にした。色は残す（key → 完成したクラス名。JSで組み立てない） */
.sc .verdict{margin:0 0 .4rem;font-size:1.25rem;font-weight:700;line-height:1.5;color:var(--slate-800)}
.sc .verdict--none{color:var(--slate-600)}
.sc .verdict--low{color:var(--secondary-700)}
.sc .verdict--mid{color:var(--amber-800)}
.sc .verdict--high{color:#B91C1C}
.sc .row--size .verdict, .sc .row--term .verdict{color:var(--purple-700)}
.sc ul.plain{margin:.5rem 0 0;padding-left:1.35rem}
.sc ul.plain li{margin-bottom:.4rem}
.sc .method__main{margin:.5rem 0 0;padding:.75rem 1rem;background:var(--primary-50);border:1px solid var(--primary-100);border-radius:var(--radius)}
.sc .method__main strong{color:var(--primary-800)}
/* ⑦ 数字が主役の箱。ここだけ反転させて視線を集める */
.sc .hours{background:linear-gradient(135deg,var(--primary-600),var(--primary-900));border-radius:var(--radius);padding:1.35rem;box-shadow:var(--shadow-lg)}
.sc .hours .row__label{color:var(--primary-200)}
.sc .hours__lead{margin:0;color:var(--primary-100)}
.sc .hours .big{font-size:1.875rem;font-weight:700;color:#fff;display:block;line-height:1.4;margin-top:.25rem}
.sc .hours__after{margin:0;color:#fff}
.sc .hours small{display:block;color:var(--primary-200);font-size:1rem;line-height:1.7;margin-top:.5rem;border-top:1px solid rgba(255,255,255,.25);padding-top:.6rem}
.sc .notai{background:linear-gradient(135deg,var(--amber-50),var(--amber-100));border:1px solid var(--amber-200);border-left:4px solid var(--amber-500);border-radius:var(--radius);padding:1.15rem 1.35rem}
.sc .notai .row__label{color:var(--amber-800)}
.sc .notai ul.plain li{color:#78350F}
/* 軽い受け皿（レポート）。重い受け皿＝青に対して、こちらは緑 */
.sc .lead{margin-top:1.5rem;border:1px solid var(--secondary-100);border-top:4px solid var(--secondary);border-radius:var(--radius-lg);padding:1.75rem 1.5rem;background:linear-gradient(160deg,var(--secondary-50),#fff 55%);box-shadow:var(--shadow)}
/* 入力 → 結果 → 資料。済み＝グリーン、いまここ＝スカイ、この先＝グレー

   接頭辞は flow。step は上の設問カード（.step / .step__no）が使っているので流用しない。
   一度 .step で書いて、8枚の設問カードを後ろから上書きしてしまった
   （左帯が5px→1px、Q1バッジが丸くなって文字が欠けた）。
   Step 2 でテーマへ移すとき、設問カードと進行表示は別テンプレートに分かれるので、
   名前は今のうちに離しておく。 */
.sc .flow{list-style:none;display:grid;gap:.5rem;margin:0 0 1.5rem;padding:0}
@media (min-width:720px){.sc .flow{grid-template-columns:repeat(3,1fr);gap:.6rem}}
.sc .flow__step{display:flex;gap:.65rem;align-items:flex-start;background:#fff;border:1px solid var(--slate-200);border-top:3px solid var(--slate-300);border-radius:var(--radius);padding:.85rem .9rem}
.sc .flow__no{flex-shrink:0;width:1.75rem;height:1.75rem;border-radius:999px;background:var(--slate-200);color:var(--slate-600);font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.sc .flow__label{margin:0;font-weight:700;color:var(--slate-800);line-height:1.5}
.sc .flow__note{margin:.25rem 0 0;color:var(--slate-500);line-height:1.6}
.sc .flow__state{margin:.35rem 0 0;font-weight:700;letter-spacing:.08em}
.sc .flow__state[hidden]{display:none}
/* JS はクラス名を組み立てず、完成した名前を3つ付け替える */
.sc .flow__step--done{border-top-color:var(--secondary);background:var(--secondary-50)}
.sc .flow__step--done .flow__no{background:var(--secondary);color:#fff}
.sc .flow__step--done .flow__state{color:var(--secondary-700)}
.sc .flow__step--here{border-top-color:var(--primary);box-shadow:0 0 0 2px var(--primary-100)}
.sc .flow__step--here .flow__no{background:var(--primary);color:#fff}
.sc .flow__step--here .flow__state{color:var(--primary-700)}
.sc .flow__step--next{opacity:.85}
.sc .lead h3{font-size:1.25rem;margin:0 0 .6rem}
.sc .lead__text{margin:0 0 .6rem;color:var(--slate-700)}
.sc .lead__topics{margin:.25rem 0 .6rem;padding-left:1.35rem;color:var(--slate-700)}
.sc .lead__topics li{margin-bottom:.2rem}
.sc .lead__promise{margin:0 0 1.25rem;color:var(--secondary-700);font-weight:700}
.sc .lead__report-label{margin:0 0 .35rem;color:var(--slate-600);letter-spacing:.1em;font-weight:700}
.sc .lead__report{margin:0 0 1.25rem;padding:.75rem 1rem;background:#fff;border:1px solid var(--secondary-100);border-radius:var(--radius);color:var(--secondary-700);font-weight:700}
.sc .lead__note{margin:.6rem 0 0;color:var(--slate-500);font-size:1rem;line-height:1.7}
.sc .field{margin-bottom:1.15rem}
.sc .field > label{display:block;font-weight:700;color:var(--slate-800);margin-bottom:.35rem}
.sc .req, .sc .opt-tag{display:inline-block;font-size:1rem;font-weight:700;border-radius:.25rem;padding:0 .5rem;margin-left:.5rem;vertical-align:1px}
.sc .req{background:#FEF2F2;color:#B91C1C}
.sc .opt-tag{background:var(--slate-100);color:var(--slate-500)}
.sc .field input, .sc .field select, .sc .field textarea{
  width:100%;font-size:1rem;font-family:inherit;line-height:1.7;color:var(--slate-800);
  border:1px solid var(--slate-300);border-radius:var(--radius);padding:.7rem .9rem;background:#fff
}
.sc .field input:focus, .sc .field select:focus, .sc .field textarea:focus{outline:2px solid var(--secondary);outline-offset:1px;border-color:var(--secondary)}
.sc .field textarea{min-height:6rem;resize:vertical}
.sc .field .hint{margin:.3rem 0 0;color:var(--slate-500);font-size:1rem}
.sc .check{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.6rem;cursor:pointer}
.sc .check input{margin:.5rem 0 0;accent-color:var(--secondary-600);flex-shrink:0;width:1.05rem;height:1.05rem}
.sc .check span{font-size:1rem;color:var(--slate-700);line-height:1.7}
.sc .lead__done h3{font-size:1.25rem;color:var(--secondary-700);margin-bottom:.6rem}
.sc .lead__done[hidden]{display:none}

/* 重い受け皿（30分の相談）。結果の締めなので色帯にする */
.sc .cta{
  margin-top:1.5rem;border-radius:var(--radius-lg);padding:1.75rem 1.5rem;text-align:center;
  background:
    radial-gradient(90% 140% at 12% 0%,rgba(125,211,252,.35),transparent 62%),
    linear-gradient(135deg,var(--primary-600),var(--primary-800));
  box-shadow:var(--shadow-lg)
}
.sc .cta p{margin:0;color:rgba(255,255,255,.92);font-size:1rem}
.sc .cta__limit{padding-bottom:1.15rem;margin-bottom:1.35rem!important;border-bottom:1px solid rgba(255,255,255,.28);text-align:left}
.sc .cta__label{color:#fff!important;font-size:1.5rem;font-weight:700;line-height:1.4}
.sc .cta__sub{color:var(--primary-200)!important;font-weight:700;letter-spacing:.08em;margin-bottom:.6rem!important}
.sc .cta__text{margin-bottom:.35rem!important}
.sc .cta__note{margin-bottom:1.35rem!important;color:var(--primary-100)!important}
.sc .disclaimer{margin-top:1.15rem;font-size:1rem;color:var(--slate-500);text-align:center;line-height:1.7}

/* FAQ */
.sc .faq{margin-top:3rem;background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius-lg);padding:1.75rem 1.5rem;box-shadow:var(--shadow)}
.sc .faq h2{font-size:1.375rem;margin-bottom:1rem}
.sc .faq dl{margin:0}
.sc .faq dt{font-weight:700;color:var(--slate-800);margin-top:1.25rem;padding-left:.9rem;border-left:4px solid var(--primary-200)}
.sc .faq dd{margin:.35rem 0 0;padding-left:.9rem;border-left:4px solid var(--slate-100);color:var(--slate-600);font-size:1rem}

@media (min-width:768px){.sc .hero h1{font-size:2.25rem}}
/* 送信を任せる CF7 のフォーム。画面には出さない。
   display:none にすると一部ブラウザで送信されないことがあるので、
   画面外へ追い出して隠す（クリックも拾わせない）。 */
.sc .sc__cf7{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;pointer-events:none}