@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@700;900&display=swap");

/* =========================================================================
   J診断 — デザインシステム（スレッドA）
   style.css : 変数 / 土台 / 画面骨格 / 部品
   炎と山本さんの顔6段階は effects.css。必ず両方をこの順で読み込むこと。

     <link rel="stylesheet" href="assets/style.css">
     <link rel="stylesheet" href="assets/effects.css">

   CONTRACT.md で固定されたクラス名・変数名は変更しない。
   ========================================================================= */

/* ---------- 1. CSS変数 -------------------------------------------------- */
:root{
  color-scheme: dark;

  /* --- 契約で固定された6色（この名前は変更禁止） --- */
  --j-red:      #c41e2e;   /* 主色。深く沈んだ緋色 */
  --j-red-deep: #6b0f16;   /* 影に落ちた赤。面や境界に */
  --j-black:    #0a0708;   /* 背景。わずかに赤を含む黒 */
  --j-ink:      #171012;   /* 面（カード・入力欄）の黒 */
  --j-ash:      #9c9295;   /* 灰。副次テキスト */
  --j-gold:     #c9a44c;   /* 金。アクセントは必ず少量で */

  /* --- 派生・内部用（使ってもよいが契約外） --- */
  --j-ember:      #ff7a2f;   /* 熾火のオレンジ */
  --j-red-lit:    #e0323f;   /* 光が当たった赤 */
  --j-gold-lit:   #f0d38a;   /* 光が当たった金 */
  --j-text:       #f3eeee;
  --j-surface:    #120c0e;
  --j-line:       rgba(255,255,255,.10);
  --j-line-warm:  rgba(196,30,46,.30);
  --j-line-gold:  rgba(201,164,76,.34);

  --j-font:      "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",
                 system-ui,-apple-system,sans-serif;
  --j-font-head: "Zen Kaku Gothic New","Noto Sans JP","Hiragino Kaku Gothic ProN",
                 "Yu Gothic",system-ui,sans-serif;

  --j-radius:    14px;
  --j-radius-lg: 20px;
  --j-maxw:      620px;
  --j-ease:      cubic-bezier(.22,.9,.28,1);
  --j-shadow:    0 26px 60px -32px #000;
}

/* ---------- 2. リセットと土台 ------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100svh;
  font-family:var(--j-font);
  font-weight:400;
  font-size:16px;
  line-height:1.9;
  letter-spacing:.02em;
  color:var(--j-text);
  background-color:var(--j-black);
  /* 黒地に、上方の熾火と足元の残り火だけを置く。派手なグラデは使わない */
  background-image:
    radial-gradient(120% 62% at 50% -12%, rgba(196,30,46,.20), rgba(196,30,46,0) 62%),
    radial-gradient(90% 46% at 50% 108%, rgba(107,15,22,.34), rgba(107,15,22,0) 70%),
    linear-gradient(180deg,#0b0708 0%,#080506 52%,#0b0708 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg{ max-width:100%; height:auto; display:block; }

::selection{ background:var(--j-red); color:#fff; }

:focus-visible{
  outline:2px solid var(--j-gold);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- 3. タイポグラフィ -------------------------------------------
   他スレッドが素の h1/h2/p を書いても成立するよう、要素側にも当てておく。 */
h1,h2,h3,h4{
  font-family:var(--j-font-head);
  font-weight:900;
  line-height:1.34;
  letter-spacing:.01em;      /* 見出しは詰め気味 */
  margin:0 0 .6em;
  text-wrap:balance;
}
h1{ font-size:clamp(1.9rem,8.4vw,2.9rem); letter-spacing:-.005em; }
h2{ font-size:clamp(1.35rem,5.4vw,1.85rem); }
h3{ font-size:1.12rem; font-weight:700; letter-spacing:.03em; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
small{ font-size:.8125rem; color:var(--j-ash); }
a{ color:var(--j-gold); text-underline-offset:.25em; }
a:hover{ color:var(--j-gold-lit); }

/* 任意のヘルパー（契約外。使わなくても崩れない） */
.j-eyebrow{
  font-family:var(--j-font-head);
  font-size:.72rem; font-weight:700;
  letter-spacing:.34em; text-indent:.34em;
  color:var(--j-gold); margin:0 0 .9em;
}
.j-lead{ font-size:1rem; color:#d9d0d1; line-height:2; }
.j-note{ font-size:.8125rem; line-height:1.85; color:var(--j-ash); }
.j-center{ text-align:center; }

/* 数字は見出しフォントで太く。結果のパーセント表示など */
.j-score{
  font-family:var(--j-font-head);
  font-weight:900;
  font-size:clamp(4rem,22vw,7rem);
  line-height:1;
  letter-spacing:-.03em;
  margin:0;
  background:linear-gradient(180deg,#fff 0%,var(--j-gold-lit) 38%,var(--j-red) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.j-score small{
  font-size:.28em; font-weight:700; letter-spacing:.02em;
  color:var(--j-ash); -webkit-text-fill-color:var(--j-ash);
}

.j-divider{
  height:1px; border:0; margin:2rem 0;
  background:linear-gradient(90deg,transparent,var(--j-line-warm) 20%,var(--j-line-gold) 50%,var(--j-line-warm) 80%,transparent);
}

/* ボタンの並び。任意 */
.j-actions{
  display:flex; flex-wrap:wrap; gap:.75rem;
  margin-top:2rem;
}
.j-actions > .j-btn{ flex:1 1 12rem; }

/* ---------- 4. 画面骨格 .j-page -----------------------------------------
   JSで .is-active を付け替えて1画面ずつ表示する。 */
.j-page{
  display:none;
  position:relative;                 /* .j-flame の位置基準 */
  width:100%;
  max-width:var(--j-maxw);
  margin-inline:auto;
  padding:2.5rem 1.25rem 4rem;
  min-height:100svh;
}
.j-page.is-active{
  display:flex;
  flex-direction:column;
  animation:j-page-in .55s var(--j-ease) both;
}

@keyframes j-page-in{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}

/* 表紙 — 全身写真を沈めた背景の上に、中央寄せで置く */
.j-page--cover{
  text-align:center;
  padding-block:3rem 4rem;
  background-image:
    linear-gradient(180deg, rgba(10,7,8,.90) 0%, rgba(10,7,8,.74) 34%, rgba(10,7,8,.96) 78%, #0a0708 100%),
    radial-gradient(78% 46% at 50% 22%, rgba(196,30,46,.32), rgba(196,30,46,0) 70%),
    url("img/yamamoto.jpg");
  background-size:cover,cover,cover;
  background-position:50% 50%,50% 50%,50% 14%;
  background-repeat:no-repeat;
  background-blend-mode:normal,soft-light,normal;
}
.j-page--cover.is-active{ justify-content:center; }

/* 質問画面 — 上に進捗、下に設問。余白で呼吸させる */
.j-page--q{
  padding-top:1.25rem;
}
.j-page--q.is-active{ justify-content:flex-start; }

/* 結果画面 */
.j-page--result{ text-align:center; }
.j-page--result.is-active{ justify-content:flex-start; }

/* 質問画面の先頭に進捗が来たときの余白 */
.j-page--q > .j-progress:first-child{ margin-bottom:2.25rem; }

/* ---------- 5. カード .j-card ------------------------------------------- */
.j-card{
  position:relative;
  padding:1.5rem 1.25rem;
  border:1px solid var(--j-line);
  border-radius:var(--j-radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, var(--j-ink), var(--j-surface));
  box-shadow:var(--j-shadow), inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;               /* 中に .j-flame を置いても外へ漏らさない */
}
/* 上辺に一本だけ熱の線を通す */
.j-card::before{
  content:"";
  position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,var(--j-red) 22%,var(--j-gold) 50%,var(--j-red) 78%,transparent);
  opacity:.55;
  pointer-events:none;
}

/* ---------- 6. 設問 .j-qitem / 選択肢 .j-choice -------------------------- */
.j-qitem{
  position:relative;
  padding:1.35rem 0 1.5rem;
  border-bottom:1px solid var(--j-line);
}
.j-qitem:first-of-type{ padding-top:.25rem; }
.j-qitem:last-of-type{ border-bottom:0; padding-bottom:.5rem; }

/* 設問文（.j-qitem 直下の p / h3 / .j-qitem__text いずれでも効く） */
.j-qitem > p,
.j-qitem > h3,
.j-qitem__text{
  font-family:var(--j-font-head);
  font-weight:700;
  font-size:1.0625rem;
  line-height:1.72;
  letter-spacing:.005em;
  color:var(--j-text);
  margin:0 0 1.05rem;
}

/* 設問番号を出す場合の任意クラス */
.j-qitem__no{
  display:inline-block;
  font-family:var(--j-font-head);
  font-size:.7rem; font-weight:900; letter-spacing:.16em;
  color:var(--j-red-lit);
  margin-bottom:.55rem;
}

/* 選択肢は2つ横並びが既定。専用ラッパーが無くても :has で並べる */
.j-choices,
.j-qitem:has(> .j-choice),
.j-qitem *:has(> .j-choice){
  display:flex;
  gap:.625rem;
  flex-wrap:wrap;
}

.j-choice{
  -webkit-appearance:none; appearance:none;
  position:relative;
  flex:1 1 8rem;
  min-width:0;
  min-height:54px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.85em 1em;
  font-family:var(--j-font-head);
  font-size:1rem; font-weight:700; letter-spacing:.12em; text-indent:.12em;
  color:var(--j-ash);
  background-image:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0));
  background-color:rgba(255,255,255,.012);
  border:1px solid var(--j-line);
  border-radius:12px;
  cursor:pointer;
  user-select:none;
  transition:color .22s var(--j-ease), border-color .22s var(--j-ease),
             background-color .22s var(--j-ease), box-shadow .28s var(--j-ease),
             transform .12s var(--j-ease);
}
.j-choice:hover{
  color:var(--j-text);
  border-color:var(--j-line-warm);
  background-color:rgba(196,30,46,.07);
}
.j-choice:active{ transform:translateY(1px); }

.j-choice.is-selected,
.j-choice:has(> input:checked){
  color:#fff;
  border-color:rgba(201,164,76,.55);
  background-image:linear-gradient(180deg, var(--j-red) 0%, var(--j-red-deep) 100%);
  background-color:transparent;
  box-shadow:
    0 0 0 1px rgba(201,164,76,.22),
    0 14px 30px -16px rgba(196,30,46,.9),
    inset 0 1px 0 rgba(255,255,255,.22);
}
/* 選ばれた側に小さな熾火の点 */
.j-choice.is-selected::after,
.j-choice:has(> input:checked)::after{
  content:"";
  position:absolute; left:.9rem; top:50%;
  width:5px; height:5px; margin-top:-2.5px;
  border-radius:50%;
  background:var(--j-gold-lit);
  box-shadow:0 0 8px 1px rgba(240,211,138,.8);
}
/* ネイティブ radio / checkbox を .j-choice の中に隠して使う場合 */
.j-choice > input[type="radio"],
.j-choice > input[type="checkbox"]{
  position:absolute; opacity:0; pointer-events:none; margin:0;
}

/* ---------- 7. ボタン .j-btn -------------------------------------------- */
.j-btn{
  -webkit-appearance:none; appearance:none;
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:56px;
  padding:.95em 2em;
  font-family:var(--j-font-head);
  font-size:1rem; font-weight:900;
  letter-spacing:.14em; text-indent:.14em;
  line-height:1;
  text-align:center; text-decoration:none; white-space:nowrap;
  color:var(--j-text);
  background:transparent;
  border:1px solid var(--j-line);
  border-radius:999px;
  cursor:pointer;
  overflow:hidden;
  transition:color .22s var(--j-ease), border-color .22s var(--j-ease),
             background-color .22s var(--j-ease), box-shadow .3s var(--j-ease),
             transform .12s var(--j-ease), opacity .22s linear;
}
.j-btn:active{ transform:translateY(1px); }

/* 主ボタン：深い赤の面に、金の細い縁を一本 */
.j-btn--primary{
  color:#fff;
  border-color:rgba(201,164,76,.42);
  background:linear-gradient(180deg, var(--j-red) 0%, #8e1520 62%, var(--j-red-deep) 100%);
  box-shadow:
    0 16px 34px -18px rgba(196,30,46,.85),
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(0,0,0,.35);
}
/* 通過する光。周期を長くとって下品にしない */
.j-btn--primary::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 34%, rgba(255,232,190,.26) 50%, transparent 66%);
  transform:translateX(-120%);
  animation:j-btn-sheen 5.5s var(--j-ease) 1.2s infinite;
  pointer-events:none;
}
@keyframes j-btn-sheen{
  0%,70%  { transform:translateX(-120%); }
  88%,100%{ transform:translateX(120%); }
}
.j-btn--primary:hover{
  border-color:rgba(201,164,76,.7);
  box-shadow:
    0 20px 40px -16px rgba(196,30,46,.95),
    0 0 0 1px rgba(201,164,76,.18),
    inset 0 1px 0 rgba(255,255,255,.3);
}

/* 従ボタン：線だけ */
.j-btn--ghost{
  color:var(--j-ash);
  border-color:var(--j-line);
  background:rgba(255,255,255,.014);
}
.j-btn--ghost:hover{
  color:var(--j-text);
  border-color:var(--j-line-gold);
  background:rgba(201,164,76,.07);
}

/* 押せない状態。button / a / 任意要素のどれでも同じ見た目になるようにする */
.j-btn[disabled],
.j-btn:disabled,
.j-btn[aria-disabled="true"],
.j-btn.is-disabled{
  cursor:not-allowed;
  pointer-events:none;
  color:#6b6266;
  border-color:rgba(255,255,255,.07);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  box-shadow:none;
  opacity:.75;
  filter:saturate(.15);
  transform:none;
}
.j-btn[disabled]::after,
.j-btn:disabled::after,
.j-btn[aria-disabled="true"]::after,
.j-btn.is-disabled::after{ content:none; }

/* ---------- 8. 入力 .j-input （input と textarea の両方に当たる） -------- */
.j-input,
input.j-input,
textarea.j-input,
select.j-input{
  -webkit-appearance:none; appearance:none;
  display:block;
  width:100%;
  padding:.95em 1.1em;
  font-family:var(--j-font);
  font-size:1rem;          /* iOS の自動ズーム回避のため 16px を下回らせない */
  font-weight:500;
  line-height:1.7;
  letter-spacing:.03em;
  color:var(--j-text);
  background-image:linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.22));
  background-color:var(--j-ink);
  border:1px solid var(--j-line);
  border-radius:12px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.5);
  transition:border-color .22s var(--j-ease), box-shadow .28s var(--j-ease),
             background-color .22s var(--j-ease);
}
textarea.j-input{
  min-height:7.5em;
  line-height:1.85;
  resize:vertical;
}
.j-input::placeholder{ color:#6d6467; opacity:1; }
.j-input:hover{ border-color:rgba(255,255,255,.17); }
.j-input:focus{
  outline:none;
  border-color:rgba(196,30,46,.62);
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.5),
    0 0 0 3px rgba(196,30,46,.16);
}
.j-input:disabled,
.j-input[readonly]{
  color:#7a7174;
  background-color:#0f0b0c;
  border-color:rgba(255,255,255,.06);
  cursor:not-allowed;
}
.j-input[aria-invalid="true"]{
  border-color:var(--j-red-lit);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.5), 0 0 0 3px rgba(224,50,63,.2);
}
/* 表紙の名前欄。任意 */
.j-input--name{
  text-align:center;
  font-family:var(--j-font-head);
  font-weight:700;
  font-size:1.125rem;
  letter-spacing:.14em;
}
.j-input--name::placeholder{ letter-spacing:.1em; font-weight:400; }

/* オートフィルの青を殺す */
.j-input:-webkit-autofill,
.j-input:-webkit-autofill:hover,
.j-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--j-text);
  -webkit-box-shadow:0 0 0 1000px var(--j-ink) inset;
  caret-color:var(--j-text);
}

/* ---------- 9. 進捗 .j-progress ----------------------------------------- */
.j-progress{
  position:relative;
  width:100%;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
}
.j-progress__bar{
  position:relative;
  display:block;
  height:100%;
  width:0%;                     /* JS が inline style で % を入れる */
  max-width:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--j-red-deep) 0%, var(--j-red) 46%, var(--j-ember) 88%, var(--j-gold-lit) 100%);
  box-shadow:0 0 12px rgba(255,122,47,.5);
  transition:width .6s var(--j-ease);
}
/* 先端の熾火。0% のときだけ消す */
.j-progress__bar::after{
  content:"";
  position:absolute; right:-1px; top:50%;
  width:9px; height:9px; margin-top:-4.5px;
  border-radius:50%;
  background:var(--j-gold-lit);
  box-shadow:0 0 10px 2px rgba(255,140,60,.75), 0 0 22px 6px rgba(196,30,46,.4);
  transition:opacity .3s linear;
}
.j-progress__bar[style*="width: 0%"]::after,
.j-progress__bar[style*="width:0%"]::after,
.j-progress__bar:not([style])::after{ opacity:0; }

/* 「n/10問」の表示に使える任意クラス */
.j-progress-label{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1em;
  margin-bottom:.7rem;
  font-family:var(--j-font-head);
  font-size:.72rem; font-weight:700;
  letter-spacing:.22em;
  color:var(--j-ash);
}
.j-progress-label b{
  font-size:1.05rem; font-weight:900; color:var(--j-text);
  letter-spacing:.04em;
}

/* ---------- 10. 画面幅対応 ---------------------------------------------- */
@media (min-width:600px){
  body{ font-size:16.5px; }
  .j-page{ padding:3.5rem 2rem 5rem; }
  .j-card{ padding:2rem 1.85rem; }
  .j-qitem{ padding:1.6rem 0 1.75rem; }
  .j-qitem > p,
  .j-qitem > h3,
  .j-qitem__text{ font-size:1.125rem; }
  .j-choice{ min-height:58px; }
}
@media (min-width:960px){
  :root{ --j-maxw:680px; }
  .j-page{ padding-block:5rem 6rem; }
}

/* 375px 以下でも崩さない */
@media (max-width:380px){
  .j-page{ padding-inline:1rem; }
  .j-card{ padding:1.25rem 1rem; }
  .j-btn{ padding-inline:1.35em; letter-spacing:.1em; text-indent:.1em; }
  .j-choice{ flex:1 1 6.5rem; letter-spacing:.08em; text-indent:.08em; }
}

/* ---------- 11. モーション配慮 ------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .j-page.is-active{ animation:none; }
  .j-btn--primary::after{ animation:none; opacity:0; }
  .j-progress__bar{ transition:none; }
}

/* ---------- 12. 印刷（管理画面の一覧を刷る場合の最低限） ----------------- */
@media print{
  body{ background:#fff; color:#000; }
  .j-page{ display:block !important; min-height:0; }
}