/* 診断画面専用。既存LPのスタイルへ影響しないよう .quiz-shell 配下に限定する。 */
.quiz-shell {
  position: relative;
  min-height: 100svh;
  padding: clamp(3rem, 10vw, 5rem) clamp(1.3rem, 6vw, 2.5rem);
  background:
    radial-gradient(65% 45% at 10% 10%, rgba(226,156,182,.22), transparent 70%),
    radial-gradient(65% 45% at 90% 20%, rgba(196,180,224,.22), transparent 70%),
    radial-gradient(65% 45% at 70% 90%, rgba(232,204,148,.22), transparent 70%),
    var(--ivory);
}
.quiz-shell__inner { width: min(620px, 100%); margin: 0 auto; }
.quiz-progress { margin-bottom: clamp(2rem, 8vw, 3rem); }
.quiz-progress__label {
  margin: 0 0 .7rem;
  text-align: center;
  color: var(--gold);
  font-family: var(--font-en);
  font-size: .9rem;
  letter-spacing: .18em;
}
.quiz-progress__bar { height: 3px; overflow: hidden; background: rgba(184,146,74,.2); border-radius: 3px; }
.quiz-progress__bar span {
  display: block; width: 12.5%; height: 100%;
  background: linear-gradient(90deg, var(--rose), var(--lavender), var(--gold));
  transition: width .35s ease;
}
.quiz-question { text-align: center; animation: quizAppear .45s ease both; }
.quiz-question__text {
  margin: 0 auto clamp(1.2rem, 5vw, 1.7rem);
  color: var(--brown-title);
  font-family: var(--font-title);
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  font-weight: 600;
  line-height: 1.75;
  white-space: pre-line;      /* データ側の改行(\n)を反映（文末で改行） */
  word-break: auto-phrase;    /* 加えて文節単位で自然に折り返す */
}
/* 情景画像：横長比率を保ったまま、上品な縁取り＋ごく薄い影。8問とも同じ表示規格 */
.quiz-question__image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto clamp(1.6rem, 6vw, 2.2rem);
  border-radius: 16px;
  border: 1px solid var(--gold-line);
  box-shadow: 0 10px 26px rgba(96, 62, 76, .14);
}
.quiz-options { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.quiz-option {
  width: 100%;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(184,146,74,.42);
  border-radius: 14px;
  background: rgba(255,253,249,.86);
  box-shadow: 0 8px 22px rgba(96,62,76,.08);
  color: var(--ink);
  font: 500 clamp(.82rem, 3.4vw, .96rem)/1.75 var(--font-jp);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  white-space: pre-line;      /* データ側の \n を改行として反映（意味のまとまりで改行） */
  word-break: auto-phrase;    /* 対応ブラウザでは日本語を文節単位で自然に折り返す */
}
.quiz-option:hover { transform: translateY(-2px); border-color: var(--rose); box-shadow: 0 12px 26px rgba(96,62,76,.13); }
.quiz-option:active { transform: translateY(1px); }
.quiz-result { text-align: center; animation: quizAppear .55s ease both; }
.quiz-result__eyebrow {
  margin: 0 0 .5rem; color: var(--gold); font: 500 .85rem/1 var(--font-en); letter-spacing: .28em; text-transform: uppercase;
}
.quiz-result__heading {
  margin: 0 0 1.8rem; color: var(--brown-title); font: 600 clamp(1.4rem, 6vw, 2rem)/1.5 var(--font-title);
}
.result-card {
  padding: clamp(1.3rem, 5vw, 2rem);
  border: 1px solid rgba(184,146,74,.42);
  border-radius: 20px;
  background: rgba(255,253,249,.9);
  box-shadow: 0 16px 36px rgba(96,62,76,.12);
}
/* 新カード画像（枠・タイトル・クラウンまで焼き込み済み）をそのまま、
   4タイプ共通サイズ・トリミングなしで表示。結果名まで大きくスクロールしないよう幅を抑える */
.result-card__portrait {
  display: block;
  width: min(180px, 48%);
  height: auto;
  margin: 0 auto 1.3rem;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(96, 62, 76, .16);
}
.result-card__label, .result-card__keywords-title { color: var(--ink-soft); font-size: .8rem; letter-spacing: .1em; }
.result-card__name { margin: .25rem 0 0; color: var(--rose-deep); font: 600 clamp(1.1rem, 5.1vw, 2rem)/1.5 var(--font-title); white-space: nowrap; }
.result-card__name-en { margin: 0 0 1.1rem; color: var(--gold); font: italic 1rem/1.4 var(--font-en); }
.result-card__desc { color: var(--ink-soft); font-size: .9rem; line-height: 2; word-break: auto-phrase; }
/* スマホ専用改行 <br class="br-sp"> とPC専用読点 <span class="comma-pc">。PC=改行なし/読点あり、スマホ=改行あり/読点なし */
.br-sp { display: none; }
@media (max-width: 559px) {
  .br-sp { display: inline; }
  .comma-pc { display: none; }
  .result-card__desc { font-size: .84rem; }  /* スマホは約1px小さく */
}
.result-card__keywords { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: .7rem 0 1.4rem; }
.result-card__keywords span { padding: .35rem .7rem; border-radius: 999px; background: rgba(199,126,146,.12); color: var(--rose-deep); font-size: .78rem; }
.quiz-secondary, .quiz-restart {
  border: 1px solid var(--gold-line); border-radius: 12px; padding: .8rem 1.2rem;
  background: rgba(255,253,249,.85); color: var(--ink); font: 500 .88rem/1.5 var(--font-jp); cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
/* ホバーで軽く沈む（TOPボタンより浅め） */
.quiz-secondary:hover, .quiz-restart:hover { transform: translateY(2px); box-shadow: 0 3px 8px rgba(96, 62, 76, .14); }
.quiz-secondary:active, .quiz-restart:active { transform: translateY(3px); box-shadow: 0 1px 3px rgba(96, 62, 76, .12); }
@media (hover: none) { .quiz-secondary:hover, .quiz-restart:hover { transform: none; box-shadow: none; } }
.result-detail {
  margin-top: 1rem; padding: 1.3rem; text-align: left; border-radius: 16px;
  border: 1px solid rgba(184,146,74,.32); background: rgba(255,253,249,.72);
}
.result-detail__section + .result-detail__section { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(184,146,74,.24); }
.result-detail h3 {
  display: flex; align-items: baseline; gap: .6em;
  margin: 0 0 .7rem; color: var(--rose-deep); font-family: var(--font-title); font-size: 1rem;
}
.result-detail__no {
  font-family: var(--font-en); font-style: italic; font-size: .85rem;
  color: var(--gold); letter-spacing: .04em;
}
.result-detail li { margin-bottom: .45rem; }
.result-detail p { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.9; }
.result-detail ul { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); font-size: .9rem; line-height: 1.9; }

/* カギ付きプレビュー（登録前に「続き」を見せて興味を引く・試作） */
.result-locked {
  margin: 1.4rem 0 1.1rem;
  padding: 1.1rem 1.15rem 1.2rem;
  border: 1px solid rgba(184,146,74,.34);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,253,249,.92), rgba(246,237,225,.58));
  text-align: left;
}
.result-locked__head {
  margin: 0 0 .35rem;
  text-align: center;
  color: var(--rose-deep);
  font-family: var(--font-title);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.6;
  word-break: auto-phrase;   /* 「す。」だけの行落ちを防ぎ、文節できれいに折り返す */
}
.result-locked__sub {
  margin: 0 0 .95rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: .9rem;          /* 見出しより小さく、かつ下の項目名(.86rem)より小さくならない大きさ */
  letter-spacing: .05em;
  word-break: auto-phrase;
}
.result-locked__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .72rem; }
/* CTA①（上）：見出し直下のボタン。中央寄せ＋リストとの間に余白 */
.result-locked__cta-wrap { text-align: center; margin: .5rem 0 1.3rem; }
.locked-item { display: flex; align-items: flex-start; gap: .7rem; }
.locked-item__no {
  flex: none; width: 1.6em; margin-top: .05rem;
  font-family: var(--font-en); font-style: italic; font-size: .82rem; color: var(--gold);
}
.locked-item__body { flex: 1 1 auto; min-width: 0; }
.locked-item__title { margin: 0 0 .3rem; color: var(--ink); font-size: .86rem; font-weight: 500; }
/* ぼかしは2〜3行分（最後の行は短め＝段落が続く印象）で、中身のボリュームを感じさせる */
.locked-item__blur {
  display: block; height: 1.95rem;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(90deg, rgba(154,94,112,.30), rgba(154,94,112,.10)),
    linear-gradient(90deg, rgba(154,94,112,.26), rgba(154,94,112,.09)),
    linear-gradient(90deg, rgba(154,94,112,.22), rgba(154,94,112,.08));
  background-size: 97% .42rem, 90% .42rem, 55% .42rem;
  background-position: 0 .05rem, 0 .78rem, 0 1.5rem;
  filter: blur(2.6px);
}
/* 項目ごとに最終行の長さを少し変えて、より自然な“文章”感に */
.locked-item:nth-child(even) .locked-item__blur { background-size: 94% .42rem, 82% .42rem, 68% .42rem; }
.locked-item:nth-child(3n) .locked-item__blur { background-size: 96% .42rem, 87% .42rem, 42% .42rem; }
.locked-item__lock {
  flex: none; width: 20px; height: 20px; opacity: .8;
  background: center/contain no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8924A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

/* 詳細結果の締め：招待状への導線 */
.result-invite {
  margin-top: 1.8rem; padding-top: 1.8rem; border-top: 1px solid rgba(184,146,74,.32);
  text-align: center;
}
.result-invite__eyebrow {
  margin: 0 0 .8rem; color: var(--rose-deep); font-family: var(--font-title);
  font-size: 1.05rem; font-weight: 600;
}
.result-invite__body {
  margin: 0 0 1.4rem; color: var(--ink-soft); font-size: .88rem; line-height: 1.95;
}
.quiz-cta {
  display: inline-block; width: min(300px, 100%);
  padding: 1rem 1.3rem; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 44%), linear-gradient(180deg, #A8495C 0%, #8B3648 100%);
  border: 1px solid var(--champagne, #E3C892);
  box-shadow: 0 10px 22px rgba(150, 92, 104, .3);
  color: #FFF7F1; font-family: var(--font-title); font-weight: 600; font-size: 1.02rem; letter-spacing: .06em;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.quiz-cta:hover { transform: translateY(-2px); box-shadow: 0 13px 26px rgba(150, 92, 104, .34); }
/* 簡易結果カード内のLINE登録CTA（登録前の“主役”ボタン。シェア等の他ボタンより目立たせる）
   スマホ（既定）：<br class="cta-br"> で「詳しい診断結果を／LINEで受け取る」の2段表示 */
.result-card__cta { margin-top: .5rem; cursor: pointer; }
/* PC・タブレット（560px〜）：改行を無効化し、横幅を content に合わせて1行に収める */
@media (min-width: 560px) {
  .result-card__cta { width: auto; max-width: 100%; white-space: nowrap; padding-left: 1.9rem; padding-right: 1.9rem; }
  .result-card__cta .cta-br { display: none; }
}
/* 結果シェア（SNS中心） */
.quiz-share { margin-top: 1.7rem; text-align: center; }
.quiz-share__label { margin: 0 0 .75rem; color: var(--ink-soft); font-size: .8rem; letter-spacing: .12em; }
.quiz-share__row { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(184,146,74,.42);
  background: rgba(255,253,249,.92); color: var(--ink);
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease;
}
.share-btn svg { width: 20px; height: 20px; display: block; }
.share-btn:hover { transform: translateY(2px); box-shadow: 0 3px 9px rgba(96,62,76,.16); }
.share-btn:active { transform: translateY(3px); }
.share-btn--x { background: #14171a; border-color: #14171a; color: #fff; }
.share-btn--line { background: #06C755; border-color: #06C755; color: #fff; }
.share-btn--copy { color: var(--gold); }
/* コピー成功時に一瞬グリーンにして「押せた／コピーできた」を明確化 */
.share-btn--copy.is-copied { background: #06C755; border-color: #06C755; color: #fff; }
@media (hover: none) { .share-btn:hover { transform: none; box-shadow: none; } }

/* 結果画像でシェア（タイプ別カード画像をSNSへ／スマホはInstagram等に画像投稿できる） */
.share-img {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  margin: 1rem auto 0; padding: .72rem 1.35rem; border-radius: 999px;
  border: 1px solid var(--gold-line); background: rgba(255,253,249,.92);
  color: var(--rose-deep); font: 500 .88rem/1 var(--font-jp); cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.share-img svg { width: 18px; height: 18px; color: var(--gold); }
.share-img:hover { transform: translateY(2px); box-shadow: 0 3px 8px rgba(96,62,76,.14); }
.share-img:active { transform: translateY(3px); }
@media (hover: none) { .share-img:hover { transform: none; box-shadow: none; } }
.quiz-share__note { margin: .55rem 0 0; color: var(--ink-soft); font-size: .72rem; letter-spacing: .04em; }

.quiz-result__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.3rem; }
.quiz-restart { color: var(--rose-deep); }
.quiz-toast {
  position: fixed; z-index: 20; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1rem);
  width: min(90%, 420px); padding: .85rem 1rem; border-radius: 12px;
  background: rgba(58,46,40,.92); color: #fff; text-align: center; font: .82rem/1.5 var(--font-jp);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.quiz-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@keyframes quizAppear { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .quiz-question, .quiz-result { animation: none; }
}