/* はたらく相棒診断 — style.css
   命名: c-=共通部品 / top- q- tame- result- types- doc- =画面 / js-=JSのみ */

:root {
  color-scheme: light;
  --c-bg: #FFFBF5; --c-surface: #FFFFFF; --c-line: #E7E2DA;
  --c-text: #2B2A33; --c-text-sub: #5C5A66;
  --c-accent: #0F766E; --c-accent-soft: #E0F2EF;
  --c-cta: #C2410C; --c-cta-press: #9A3412;
  --c-pr: #5C5A66;
  --c-group: #0F766E; --c-group-soft: #E0F2EF;

  --font-head: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", system-ui, sans-serif;

  --fs-hero: clamp(1.625rem, 5vw + 0.5rem, 2.125rem);
  --fs-type: clamp(1.75rem, 5vw + 0.6rem, 2.25rem);
  --fs-h2: 1.25rem; --fs-q: 1.1875rem; --fs-body: 1rem; --fs-small: 0.8125rem; --fs-min: 0.75rem;
  --lh-body: 1.8; --lh-head: 1.4;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;
  --radius-s: 8px; --radius-m: 16px; --radius-l: 24px; --radius-pill: 999px;
  --shadow-card: 0 2px 8px rgb(43 42 51 / 0.08);
  --tap-min: 44px; --btn-h: 56px;
  --dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 400ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --w-max: 480px; --gutter: 20px;
}

[data-group="g1"] { --c-group: #B4235A; --c-group-soft: #FCE4EC; }
[data-group="g2"] { --c-group: #8A5A00; --c-group-soft: #FFF1C2; }
[data-group="g3"] { --c-group: #1E6B3F; --c-group-soft: #DDF3E4; }
[data-group="g4"] { --c-group: #1D4ED8; --c-group-soft: #DCE8FB; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html { background: var(--c-bg); }
body {
  margin: 0 auto; background: var(--c-bg); color: var(--c-text);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body);
  overflow-wrap: anywhere; word-break: auto-phrase; text-wrap: pretty;
  min-height: 100dvh;
  overflow-x: clip; /* 念のための横はみ出し止め（sticky は効いたまま） */
}
/* グリッド・flex の子が中身の幅で押し広げないように */
.top-hero__charas > *, .types-grid > *, .share__grid > *, .links-row > *, .top-axes > * { min-width: 0; }
.mini-type > span { min-width: 0; }
/* PC：外側の地を少し濃くし、本文を1枚の「シート」として見せる */
@media (min-width: 768px) {
  :root { --w-max: 640px; --gutter: 40px; }
  html { background: #F1EADF; }
  body { max-width: var(--w-max); box-shadow: 0 0 0 1px #E7E2DA, 0 8px 32px rgb(43 42 51 / 0.08); }
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-accent); }
h1, h2, h3 { font-family: var(--font-head); line-height: var(--lh-head); letter-spacing: 0.01em; margin: 0; text-wrap: balance; }
.nowrap { display: inline-block; }
p { margin: 0 0 1em; }
ul { margin: 0; padding-left: 1.2em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.u-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.l-main { max-width: var(--w-max); margin: 0 auto; padding: 0 var(--gutter) var(--sp-12); }

/* ---------- header / footer ---------- */
.site-header { max-width: var(--w-max); margin: 0 auto; padding: var(--sp-3) var(--gutter); min-height: 56px; display: flex; align-items: center; }
.site-header__logo { font-family: var(--font-head); font-size: 1.125rem; color: var(--c-text); text-decoration: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); }
.site-header__sub { font-family: var(--font-body); font-size: var(--fs-min); color: var(--c-text-sub); font-weight: 400; }
.site-footer { max-width: var(--w-max); margin: 0 auto; padding: var(--sp-6) var(--gutter) calc(var(--sp-8) + env(safe-area-inset-bottom)); border-top: 1px solid var(--c-line); font-size: var(--fs-small); color: var(--c-text-sub); }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3); }
.site-footer__nav a { color: var(--c-text-sub); display: inline-flex; align-items: center; min-height: var(--tap-min); }
.site-footer__note, .site-footer__copy { margin: 0 0 var(--sp-2); }

/* ---------- buttons ---------- */
.c-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; min-height: var(--btn-h); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-pill); border: 2px solid transparent;
  font-weight: 700; font-size: 1rem; line-height: 1.4; text-align: center; text-decoration: none; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast);
}
.c-btn:active { transform: scale(0.98); }
.c-btn--cta { background: var(--c-cta); color: #fff; }
.c-btn--cta:hover, .c-btn--cta:active { background: var(--c-cta-press); }
.c-btn--ghost { background: var(--c-surface); color: var(--c-text); border-color: #CFC7BA; }
.c-btn--stack { flex-direction: column; gap: 0; }
.c-btn__pre { display: block; font-size: var(--fs-small); font-weight: 700; opacity: 0.9; }
.c-btn--ghost:hover { border-color: var(--c-text-sub); }
.c-btn--small { min-height: var(--tap-min); font-size: 0.9375rem; padding: var(--sp-2) var(--sp-4); width: auto; }
.c-btn__ext { font-size: var(--fs-small); font-weight: 400; }

.c-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
.c-chips li { background: var(--c-surface); color: var(--c-text); border: 1px solid #CFC7BA; font-weight: 700; font-size: 0.875rem; border-radius: var(--radius-pill); padding: 2px var(--sp-3); }
.c-chips li::before { content: "✓ "; color: var(--c-accent); }

.c-badge { display: inline-block; background: var(--c-group); color: #fff; font-size: var(--fs-min); font-weight: 700; border-radius: var(--radius-pill); padding: 2px var(--sp-3); line-height: 1.6; }

.c-card { background: var(--c-surface); border-radius: var(--radius-m); box-shadow: var(--shadow-card); padding: var(--sp-5); margin-bottom: var(--sp-4); }
.c-card__title { font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
.c-card ul li + li { margin-top: var(--sp-1); }
.c-note { font-size: var(--fs-small); color: var(--c-text-sub); line-height: 1.7; }

/* ---------- character image / fallback ---------- */
.char { position: relative; width: 100%; max-width: 320px; aspect-ratio: 1 / 1; margin: 0 auto; border-radius: var(--radius-l); background: var(--c-group-soft); overflow: hidden; }
.char img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-base); }
.char.is-loaded img { opacity: 1; }
.char.is-loaded .char__fallback { visibility: hidden; }
.char__fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--c-group); text-align: center;
  background:
    radial-gradient(circle at 22% 28%, color-mix(in srgb, var(--c-group) 10%, transparent) 0 18%, transparent 18.5%),
    radial-gradient(circle at 80% 72%, color-mix(in srgb, var(--c-group) 10%, transparent) 0 24%, transparent 24.5%),
    var(--c-group-soft);
}
.char__fallback-name { font-family: var(--font-head); font-size: clamp(2rem, 11vw, 3.25rem); line-height: 1.2; }
.char__fallback-code { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.15em; margin-top: var(--sp-1); }
.char--s { max-width: 96px; border-radius: var(--radius-m); box-shadow: inset 0 0 0 2px var(--c-group); }
/* 小さい表示は顔に寄せる（1.4倍まで。傘や旗が切れて見分けの手がかりが消えないように） */
.char--s img { transform: scale(1.4); transform-origin: var(--fx, 50%) var(--fy, 38%); }
.char--s.is-loaded::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--c-group); pointer-events: none; }
[data-code="BCDR"] { --fx: 49%; --fy: 38%; } [data-code="BCDM"] { --fx: 48%; --fy: 39%; }
[data-code="BCWR"] { --fx: 45%; --fy: 39%; } [data-code="BCWM"] { --fx: 48%; --fy: 44%; }
[data-code="ACDR"] { --fx: 49%; --fy: 35%; } [data-code="ACDM"] { --fx: 47%; --fy: 41%; }
[data-code="ACWR"] { --fx: 45%; --fy: 36%; } [data-code="ACWM"] { --fx: 55%; --fy: 37%; }
[data-code="BKDR"] { --fx: 50%; --fy: 38%; } [data-code="BKDM"] { --fx: 47%; --fy: 34%; }
[data-code="BKWR"] { --fx: 47%; --fy: 39%; } [data-code="BKWM"] { --fx: 50%; --fy: 45%; }
[data-code="AKDR"] { --fx: 50%; --fy: 34%; } [data-code="AKDM"] { --fx: 50%; --fy: 39%; }
[data-code="AKWR"] { --fx: 48%; --fy: 33%; } [data-code="AKWM"] { --fx: 54%; --fy: 32%; }
/* ため演出：判定したタイプのシルエット */
/* 画像の背景は不透明なので黒く塗りつぶさず、ぼかして「まだ見えない」感じにする */
.tame__silhouette { width: 160px; margin: 0 auto; }
.tame__silhouette .char { border-radius: 50%; }
.tame__silhouette .char img, .tame__silhouette .char.is-loaded img { filter: blur(10px) saturate(0.6); opacity: 0.7; transform: scale(1.1); }
.tame__silhouette .char__fallback-name, .tame__silhouette .char__fallback-code { visibility: hidden; }
.char--s .char__fallback { padding: var(--sp-1); }
.char--s .char__fallback-name { font-size: clamp(0.75rem, 3.6vw, 1rem); line-height: 1.3; }
.char--s .char__fallback-code { font-size: 0.625rem; letter-spacing: 0.05em; }

/* ---------- top ---------- */
.top-hero { padding-top: var(--sp-2); }
.top-hero__title { font-size: var(--fs-hero); margin-bottom: var(--sp-3); }
.top-hero__lead { margin-bottom: var(--sp-3); }
.top-hero__charas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); margin: 0 0 var(--sp-4); max-height: 30dvh; }
.top-hero__charas .char { max-width: 96px; border-radius: var(--radius-m); }
@media (min-width: 768px) { .top-hero__charas .char { max-width: 128px; } }
.top-section { margin-top: var(--sp-8); }
.top-section__title { font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
.top-axes { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
@media (min-width: 768px) { .top-axes { grid-template-columns: 1fr 1fr; } }
.top-axes li { background: var(--c-surface); border-radius: var(--radius-s); padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-card); }
.top-axes b { font-family: var(--font-head); display: block; margin-bottom: var(--sp-1); }
.top-axes__poles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); font-size: 0.875rem; line-height: 1.5; }
.top-axes__poles span { background: var(--c-bg); border-radius: var(--radius-s); padding: var(--sp-1) var(--sp-2); }
.top-axes__poles strong { display: block; }
.top-roster { display: grid; grid-auto-flow: column; grid-auto-columns: 72px; gap: var(--sp-2); overflow-x: auto; padding: var(--sp-1) 0 var(--sp-3); margin-bottom: var(--sp-3); list-style: none; scroll-snap-type: x mandatory; }
.top-roster li { scroll-snap-align: start; }
.top-roster a { display: block; text-decoration: none; color: var(--c-text); font-size: var(--fs-min); text-align: center; line-height: 1.4; }
.top-roster .char { margin-bottom: var(--sp-1); }
@media (min-width: 768px) { .top-roster { grid-auto-flow: row; grid-template-columns: repeat(8, 1fr); grid-auto-columns: auto; overflow: visible; } }
.top-hero__charas .char__fallback-code, .top-roster .char__fallback-code { display: none; }
.top-sticky { position: sticky; bottom: 0; padding: var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--c-bg) 70%, transparent); }

/* ---------- quiz ---------- */
.q { min-height: calc(100dvh - 56px); display: flex; flex-direction: column; }
.q__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.q__bar > :first-child { justify-self: start; }
.q__back { min-width: var(--tap-min); height: var(--tap-min); border: 1px solid #CFC7BA; background: var(--c-surface); border-radius: var(--radius-pill); cursor: pointer; font-size: 0.875rem; font-weight: 700; color: var(--c-text); padding: 0 var(--sp-3); white-space: nowrap; }
.q__count { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; margin: 0; }
.progress { height: 6px; background: var(--c-line); border-radius: var(--radius-pill); overflow: hidden; margin: var(--sp-2) 0 var(--sp-6); position: relative; }
.progress__bar { height: 100%; background: var(--c-accent); width: 0; transition: width var(--dur-base) var(--ease-out); }
.progress::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, transparent calc(25% - 1px), var(--c-bg) calc(25% - 1px) 25%, transparent 25% calc(50% - 1px), var(--c-bg) calc(50% - 1px) 50%, transparent 50% calc(75% - 1px), var(--c-bg) calc(75% - 1px) 75%, transparent 75%); }
.q__hint { font-size: var(--fs-small); color: var(--c-text-sub); margin-bottom: var(--sp-2); }
.q__text { font-family: var(--font-body); font-size: var(--fs-q); font-weight: 700; line-height: 1.6; letter-spacing: 0; font-feature-settings: normal; margin-bottom: var(--sp-6); outline: none; }
.q__options { list-style: none; padding: 0; margin: auto 0 0; display: grid; gap: var(--sp-3); }
.q-option {
  width: 100%; min-height: var(--btn-h); padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface); border: 2px solid var(--c-line); border-radius: var(--radius-m);
  font-weight: 700; text-align: left; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3);
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.q-option::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--c-line); }
.q-option::before { border-color: #A8A096; }
.q-option { border-color: #DDD5C9; }
@media (hover: hover) { .q-option:hover { border-color: var(--c-accent); } }
.q-option[aria-pressed="true"] { border-color: var(--c-accent); background: var(--c-accent-soft); }
/* PCでは選択肢を下に寄せず、設問のすぐ下に置く */
@media (min-width: 768px) {
  .q { min-height: auto; padding-bottom: var(--sp-8); }
  .q__options { margin-top: 0; }
}
.q-option[aria-pressed="true"]::before { border-color: var(--c-accent); background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/14px no-repeat; }
.q__privacy { font-size: var(--fs-small); color: var(--c-text-sub); text-align: center; margin: var(--sp-5) 0 0; }
.q__stage { animation: q-in var(--dur-base) var(--ease-out); display: flex; flex-direction: column; flex: 1; }
@keyframes q-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* ---------- tame ---------- */
.tame { min-height: 70dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--sp-6); border: 0; background: none; width: 100%; cursor: pointer; }
.tame__dots { display: flex; gap: var(--sp-3); }
.tame__dots span { width: 40px; height: 40px; border-radius: 50%; background: var(--c-group-soft); border: 3px solid var(--c-group); opacity: 0.25; animation: tame-glow 1.2s var(--ease-out) infinite; }
.tame__dots span:nth-child(2) { animation-delay: 0.15s; } .tame__dots span:nth-child(3) { animation-delay: 0.3s; } .tame__dots span:nth-child(4) { animation-delay: 0.45s; }
.tame__text { font-family: var(--font-head); font-size: 1.25rem; }
@keyframes tame-glow { 50% { opacity: 1; transform: scale(1.08); } }

/* ---------- result ---------- */
.result-hero { background: var(--c-group-soft); margin: 0 calc(var(--gutter) * -1) var(--sp-6); padding: var(--sp-5) var(--gutter) var(--sp-6); text-align: center; }
.result-hero__you { font-size: 0.9375rem; font-weight: 700; color: var(--c-text-sub); margin: 0; }
.result-hero__name { font-size: var(--fs-type); color: var(--c-group); margin: var(--sp-1) 0; }
.result-hero__catch { font-weight: 700; margin: 0 0 var(--sp-4); }
/* 帯と同じ色にならないよう、キャラの枠は白地＋影で浮かせる（仮表示の円も枠の中に収まって見える） */
.result-hero .char { --c-group-soft: #FFFFFF; max-width: min(70vw, 280px); border: 6px solid #FFFFFF; box-shadow: 0 4px 16px rgb(43 42 51 / 0.10); animation: rise var(--dur-slow) var(--ease-out); }
.result-hero .char:not(.is-loaded) ~ .result-hero__code { display: none; } /* 仮表示の中にコードがあるので二重に出さない */
.result-hero__group { font-size: var(--fs-small); margin: 0 0 var(--sp-1); }
.speech__who { display: block; font-size: var(--fs-min); color: var(--c-group); }
.intro-more { background: var(--c-surface); border: 2px dashed var(--c-group); border-radius: var(--radius-m); padding: var(--sp-4); margin: var(--sp-5) 0 var(--sp-3); font-weight: 700; }
.intro-more p { margin: 0 0 var(--sp-3); }
@media (min-width: 768px) {
  .result-hero { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 var(--sp-6); text-align: left; align-items: center; }
  .result-hero > * { grid-column: 2; }
  .result-hero > .char { grid-column: 1; grid-row: 1 / span 8; margin: 0; }
  /* PCでは吹き出しのしっぽを左（キャラの方）に向ける */
  .result-hero .speech::before { top: 50%; left: -9px; transform: translateY(-50%) rotate(-45deg); }
}
.result-hero__buddy { margin: var(--sp-3) 0 var(--sp-2); font-weight: 700; }
.result-hero__buddy .c-badge { margin-right: var(--sp-2); vertical-align: 2px; }
.result-hero__code { font-size: var(--fs-small); color: var(--c-text-sub); letter-spacing: 0.15em; }
.speech { position: relative; display: inline-block; max-width: 100%; background: #fff; border: 2px solid var(--c-group); border-radius: var(--radius-m); padding: var(--sp-2) var(--sp-4); font-weight: 700; margin: var(--sp-2) 0 var(--sp-4); }
.speech::before { content: ""; position: absolute; top: -9px; left: 50%; width: 14px; height: 14px; background: #fff; border-left: 2px solid var(--c-group); border-top: 2px solid var(--c-group); transform: translateX(-50%) rotate(45deg); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.result-section { margin-bottom: var(--sp-12); scroll-margin-top: var(--sp-4); }
.result-section__title { font-size: 1.375rem; margin-bottom: var(--sp-4); }
.result-section__title::before { content: ""; display: block; width: 32px; height: 4px; border-radius: 2px; background: var(--c-group); margin-bottom: var(--sp-2); }
.c-card__title { font-size: 1.0625rem; }
.axis { padding: var(--sp-4) 0; border-top: 1px solid var(--c-line); }
.axis:first-of-type { border-top: 0; padding-top: 0; }
.axis__title { margin: 0 0 var(--sp-2); }
.axis__title b { font-family: var(--font-head); }
.axis__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); font-size: 0.875rem; font-weight: 700; color: var(--c-text-sub); }
.axis__row .is-win { color: var(--c-group); }
/* 真ん中が0の棒：勝った側へ伸びる */
.axis__bar { position: relative; height: 12px; border-radius: var(--radius-pill); background: var(--c-line); }
.axis__bar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--c-text-sub); border-radius: 1px; }
.axis__fill { position: absolute; top: 0; bottom: 0; background: var(--c-group); }
.axis__fill--left { right: 50%; border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.axis__fill--right { left: 50%; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.result-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-8); }
.result-nav a { display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--sp-3); border: 1px solid #CFC7BA; border-radius: var(--radius-pill); background: var(--c-surface); color: var(--c-text); text-decoration: none; font-size: 0.875rem; font-weight: 700; }
.axis__text { margin: var(--sp-1) 0 0; font-size: var(--fs-body); }
.quote { background: var(--c-surface); border-left: 4px solid var(--c-group); border-radius: 0 var(--radius-s) var(--radius-s) 0; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-body); }
.aruaru { font-family: var(--font-head); font-size: 1.125rem; line-height: 1.6; margin-bottom: var(--sp-3); }
.pitfall__tip { display: block; font-size: var(--fs-body); color: var(--c-text-sub); }
.pitfall__tip::before { content: "→ "; }

/* PR box */
/* 広告欄：本文のカードと見た目を分ける（地の色＋2pxの枠）。見出しは欄の中で上に貼りつく */
.pr-box { background: #F6F2EC; border: 2px solid #CFC7BA; border-radius: var(--radius-m); padding: 0 var(--sp-4) var(--sp-5); margin-bottom: var(--sp-12); scroll-margin-top: var(--sp-4); }
.pr-box__title { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 2; background: #F6F2EC; margin: 0 calc(var(--sp-4) * -1) var(--sp-2); padding: var(--sp-4) var(--sp-4) var(--sp-3); border-bottom: 1px solid #CFC7BA; border-radius: var(--radius-m) var(--radius-m) 0 0; font-size: var(--fs-h2); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pr-label { display: inline-block; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; line-height: 1; color: #fff; background: var(--c-pr); border-radius: 4px; padding: 4px 7px; letter-spacing: 0; }
.pr-box__sub { font-size: var(--fs-body); margin-bottom: var(--sp-2); }
.pr-box__lead { font-size: 0.9375rem; color: var(--c-text-sub); line-height: 1.7; margin-bottom: var(--sp-3); }
.offer { background: var(--c-surface); border-radius: var(--radius-m); padding: var(--sp-4); margin-top: var(--sp-3); box-shadow: var(--shadow-card); }
.c-btn--offer { background: var(--c-surface); color: var(--c-accent); border-color: var(--c-accent); }
.c-btn--offer:hover { background: var(--c-accent-soft); }
.offer__slot { font-size: var(--fs-small); font-weight: 700; color: var(--c-accent); margin: 0; }
.offer__name { font-size: 1.0625rem; margin: var(--sp-1) 0 var(--sp-1); font-family: var(--font-body); letter-spacing: 0; }
.offer__cat { font-size: var(--fs-small); color: var(--c-text-sub); margin-bottom: var(--sp-2); }
.offer__reason { font-size: var(--fs-body); margin-bottom: var(--sp-3); }
.offer .c-btn { flex-direction: column; gap: 0; border-radius: var(--radius-m); }
.offer .c-btn__svc { display: block; font-size: var(--fs-small); font-weight: 700; opacity: 0.9; }
.pr-box__notes { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px dashed var(--c-line); }

/* share */
.share__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.share__grid .c-btn { min-height: var(--tap-min); font-size: 0.9375rem; padding: var(--sp-2) var(--sp-3); }
.share__grid .c-btn--wide { grid-column: 1 / -1; }
.share-mini { display: inline-flex; width: auto; margin: var(--sp-2) 0 0; }
.links-row { display: grid; gap: var(--sp-3); }
@media (min-width: 400px) { .links-row--2 { grid-template-columns: 1fr 1fr; } }

/* intro (share) mode */
.intro-cta { margin: var(--sp-5) 0; }
.mini-type { display: flex; gap: var(--sp-3); align-items: center; background: var(--c-surface); border-radius: var(--radius-m); padding: var(--sp-3); box-shadow: var(--shadow-card); text-decoration: none; color: var(--c-text); margin-bottom: var(--sp-3); }
.mini-type .char { flex: none; width: 72px; margin: 0; }
.mini-type::after { content: "›"; margin-left: auto; font-size: 1.5rem; color: var(--c-text-sub); }
.mini-type__name { font-family: var(--font-head); font-size: 1.0625rem; color: var(--c-group); display: block; }
.mini-type__sub { font-size: var(--fs-small); color: var(--c-text-sub); }

/* ---------- types list ---------- */
.types-group { margin-bottom: var(--sp-8); }
.types-group__title { font-size: var(--fs-h2); margin-bottom: var(--sp-3); display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.types-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (min-width: 768px) { .types-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.types-group__desc { font-family: var(--font-body); font-size: var(--fs-small); color: var(--c-text-sub); font-weight: 400; width: 100%; }
.types-card { display: block; background: var(--c-surface); border-radius: var(--radius-m); padding: var(--sp-3); box-shadow: var(--shadow-card); text-decoration: none; color: var(--c-text); height: 100%; }
.types-card .char { margin-bottom: var(--sp-2); border-radius: var(--radius-s); }
.types-card .char__fallback-name { font-size: clamp(1.25rem, 6vw, 1.75rem); }
.types-card__name { font-family: var(--font-head); color: var(--c-group); font-size: 0.9375rem; line-height: 1.4; display: block; }
.types-card__sub { font-size: var(--fs-min); color: var(--c-text-sub); display: block; line-height: 1.5; margin-top: var(--sp-1); }
.types-card__catch { font-size: 0.875rem; color: var(--c-text); display: block; line-height: 1.5; margin-top: var(--sp-1); }
.types-card .char__fallback-code { display: none; }
.types-card__me { display: inline-block; margin-top: var(--sp-1); }

/* ---------- doc pages ---------- */
.doc__title { font-size: 1.5rem; margin: var(--sp-4) 0 var(--sp-6); }
.doc__section { margin-bottom: var(--sp-8); }
.doc__h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
.doc__list li + li { margin-top: var(--sp-1); }
.doc__faq { background: var(--c-surface); border-radius: var(--radius-s); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); box-shadow: var(--shadow-card); }
.doc__faq summary { font-weight: 700; cursor: pointer; min-height: var(--tap-min); display: flex; align-items: center; }
.doc__faq p { margin: var(--sp-2) 0 0; }
.doc__back { margin-top: var(--sp-8); }

.noscript { background: #FFF1C2; color: var(--c-text); padding: var(--sp-4); border-radius: var(--radius-s); margin: var(--sp-4) 0; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; /* 例外としてここだけ !important */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}