/* =========================================================
   才能の種診断 — スタイルシート
   MeDesignデザインシステム(アイボリー×チャコール×Zen Old Mincho)
   +本診断用アクセント(ダスティローズ/セージ/シャンパンゴールド)
   ---------------------------------------------------------
   カラーを変えたいときは、下の :root だけ編集すればOK。
   ========================================================= */

:root {
  /* 背景 */
  --c-bg:       #F8F5EF;  /* アイボリー */
  --c-bg-deep:  #F1EBE1;  /* 生成り */
  --c-card:     #FDFCF8;  /* カードのホワイト */

  /* メイン */
  --c-rose:      #C2929B; /* ダスティピンク */
  --c-rose-deep: #A2707B; /* くすみローズ(濃) */
  --c-rose-pale: #EFE2E2; /* ローズの淡い面 */

  /* サブ */
  --c-greige: #A69C8E;
  --c-sage:   #96A487;

  /* アクセント */
  --c-gold: #C3AC7C;      /* シャンパンゴールド */

  /* 文字 */
  --c-ink: #3B3833;       /* チャコールグレー */
  --c-sub: #7E786D;

  /* 書体 */
  --font-display: "Zen Old Mincho", serif;
  --font-body: "Zen Kaku Gothic New", sans-serif;

  --radius-card: 24px;
  --radius-pill: 999px;
  --shadow-card: 0 12px 40px rgba(59, 56, 51, 0.07);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--c-ink);
  background: var(--c-bg);
  line-height: 2;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- 背景の光(木漏れ日) ---------- */
.light {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(60px);
  opacity: 0.5;
}
.light-a {
  width: 380px; height: 380px;
  top: -120px; right: -100px;
  background: radial-gradient(circle, rgba(195, 172, 124, 0.28), transparent 70%);
  animation: breathe 9s ease-in-out infinite;
}
.light-b {
  width: 320px; height: 320px;
  bottom: -80px; left: -120px;
  background: radial-gradient(circle, rgba(194, 146, 155, 0.20), transparent 70%);
  animation: breathe 11s ease-in-out infinite reverse;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.45; }
  50%      { transform: scale(1.12); opacity: 0.65; }
}

/* ---------- 舞う花びら(ごく控えめに) ---------- */
.petal-float {
  position: fixed;
  top: -6vh;
  width: 14px; height: 18px;
  border-radius: 60% 60% 60% 4px;
  background: rgba(194, 146, 155, 0.22);
  pointer-events: none;
  z-index: 0;
  animation: petalFall linear infinite;
}
.petal-float.p1 { left: 16%; animation-duration: 26s; animation-delay: 0s; }
.petal-float.p2 { left: 62%; animation-duration: 32s; animation-delay: 9s; width: 11px; height: 14px; background: rgba(195, 172, 124, 0.18); }
.petal-float.p3 { left: 84%; animation-duration: 29s; animation-delay: 17s; width: 12px; height: 15px; }
@keyframes petalFall {
  0%   { transform: translateY(-6vh) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.8; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(108vh) rotate(300deg); opacity: 0; }
}

/* ---------- 画面の切り替え ---------- */
#app { position: relative; z-index: 1; }

.screen {
  display: none;
  min-height: 100svh;
  padding: 48px 24px 64px;
}
.screen.is-active {
  display: flex;
  justify-content: center;
  animation: screenIn 0.7s ease both;
}
@keyframes screenIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 共通パーツ ---------- */
.brand-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.42em;
  color: var(--c-gold);
  text-align: center;
  margin-bottom: 28px;
}

.btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.12em;
  border-radius: var(--radius-pill);
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
  text-decoration: none;
  text-align: center;
}
.btn-primary {
  background: var(--c-rose);
  color: #FFFDFA;
  font-size: 15px;
  padding: 18px 52px;
  box-shadow: 0 10px 28px rgba(162, 112, 123, 0.28);
}
.btn-primary:hover {
  background: var(--c-rose-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(162, 112, 123, 0.34);
}

/* ============================================
   オープニング
   ============================================ */
.screen-opening { align-items: center; text-align: center; }
.opening-inner { max-width: 480px; width: 100%; }

.hero-botanical { width: 110px; margin: 0 auto 8px; }

.sprout-svg { width: 100%; overflow: visible; }
.sprout-svg path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sprout-svg .soil  { stroke: var(--c-greige); stroke-width: 1.4; opacity: 0.7; }
.sprout-svg .stem  { stroke: var(--c-sage);   stroke-width: 1.8; }
.sprout-svg .leaf  { stroke: var(--c-sage);   stroke-width: 1.6; fill: rgba(150, 164, 135, 0.10); }
.sprout-svg .seed-dot { fill: var(--c-gold); opacity: 0.85; }
.sprout-svg .petal {
  stroke: var(--c-rose);
  stroke-width: 1.5;
  fill: rgba(194, 146, 155, 0.10);
}
.sprout-svg .flower-center { fill: var(--c-gold); opacity: 0.8; }
.sprout-svg .glow {
  fill: var(--c-gold);
  opacity: 0.16;
  animation: glowPulse 5s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.10; }
  50%      { opacity: 0.24; }
}

/* 線が描かれるアニメーション(初回) */
.draw {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: drawLine 2.4s ease forwards;
}
.draw.leaf   { animation-delay: 0.9s; }
.draw.leaf-r { animation-delay: 1.4s; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

/* 芽の揺れ */
.hero-botanical svg { animation: sway 6s ease-in-out 2.6s infinite; transform-origin: 50% 90%; }
@keyframes sway {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(1.6deg); }
}

.site-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 8vw, 40px);
  line-height: 1.7;
  letter-spacing: 0.14em;
  margin-bottom: 18px;
}
.site-sub {
  font-size: 14px;
  color: var(--c-sub);
  letter-spacing: 0.1em;
  margin-bottom: 44px;
  white-space: pre-line;
}
.site-sub strong { font-weight: 500; color: var(--c-rose-deep); }

.opening-lead {
  font-size: 14.5px;
  color: var(--c-ink);
  margin-bottom: 48px;
}
.opening-lead p + p { margin-top: 22px; }

.opening-note {
  margin-top: 18px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--c-greige);
}

/* ============================================
   質問画面
   ============================================ */
.screen-question { align-items: flex-start; }
.question-inner { max-width: 520px; width: 100%; margin-top: 4vh; }

/* 進捗: 葉がひらいていく */
.progress {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 36px;
}
.progress-dot {
  width: 10px; height: 10px;
  border-radius: 50% 50% 50% 0;      /* 葉のかたち */
  transform: rotate(-45deg);
  background: transparent;
  border: 1.4px solid var(--c-greige);
  opacity: 0.55;
  transition: all 0.5s ease;
}
.progress-dot.is-done {
  background: var(--c-sage);
  border-color: var(--c-sage);
  opacity: 1;
}
.progress-dot.is-current {
  border-color: var(--c-rose);
  opacity: 1;
  transform: rotate(-45deg) scale(1.25);
}

.question-count {
  text-align: center;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.35em;
  color: var(--c-gold);
  margin-bottom: 14px;
}

.question-card {
  background: var(--c-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 40px 28px 32px;
}

.question-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 5vw, 21px);
  line-height: 1.9;
  letter-spacing: 0.08em;
  text-align: center;
  margin-bottom: 32px;
  white-space: pre-line;
}

.options { display: flex; flex-direction: column; gap: 14px; }

.option-btn {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--c-ink);
  background: var(--c-bg);
  border: 1px solid rgba(166, 156, 142, 0.35);
  border-radius: 18px;
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.option-btn:hover {
  background: var(--c-rose-pale);
  border-color: var(--c-rose);
  transform: translateY(-1px);
}
.option-btn:active { transform: scale(0.985); }

.btn-back {
  display: block;
  margin: 26px auto 0;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--c-greige);
  cursor: pointer;
}
.btn-back:hover { color: var(--c-sub); }
.btn-back.is-hidden { visibility: hidden; }

/* ============================================
   診断中演出
   ============================================ */
.screen-loading { align-items: center; text-align: center; }
.loading-botanical { width: 100px; margin: 0 auto 20px; }

.draw-loop {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: drawLoop 2.6s ease-in-out infinite;
}
.draw-loop.leaf   { animation-delay: 0.5s; }
.draw-loop.leaf-r { animation-delay: 0.9s; }
@keyframes drawLoop {
  0%   { stroke-dashoffset: 220; opacity: 0.9; }
  55%  { stroke-dashoffset: 0;   opacity: 1; }
  85%  { stroke-dashoffset: 0;   opacity: 0.25; }
  100% { stroke-dashoffset: 220; opacity: 0; }
}

.loading-text {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.18em;
  color: var(--c-sub);
  animation: loadingFade 2.6s ease-in-out infinite;
}
@keyframes loadingFade {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ============================================
   結果ページ
   ============================================ */
.screen-result { align-items: flex-start; }
.result-inner { max-width: 560px; width: 100%; }

.result-head {
  text-align: center;
  background: var(--c-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 44px 28px 38px;
  margin-bottom: 20px;
}

.result-icon { width: 96px; margin: 0 auto 14px; }
.result-icon svg { width: 100%; overflow: visible; animation: sway 7s ease-in-out infinite; transform-origin: 50% 88%; }
.result-icon path, .result-icon circle, .result-icon ellipse {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.result-period {
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--c-gold);
  margin-bottom: 8px;
}
.result-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 7vw, 32px);
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}
.result-catch {
  font-size: 13.5px;
  color: var(--c-sub);
  line-height: 2;
}

.result-block {
  background: var(--c-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 30px 28px;
  margin-bottom: 16px;
}
.result-block-soft { background: var(--c-bg-deep); box-shadow: none; }

.block-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.28em;
  color: var(--c-rose-deep);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(195, 172, 124, 0.35);
}
.block-text { font-size: 14px; line-height: 2.1; }

.strength-list { list-style: none; }
.strength-list li {
  font-size: 14px;
  padding: 8px 0 8px 24px;
  position: relative;
}
.strength-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 17px;
  width: 8px; height: 8px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--c-sage);
}

/* ============================================
   LINE登録前の世界観メッセージ(季節のことば)
   ============================================ */
.season-message {
  text-align: center;
  padding: 52px 16px 44px;
}
.season-botanical { width: 64px; margin: 0 auto 18px; }
.mini-flower ellipse {
  fill: rgba(194, 146, 155, 0.12);
  stroke: var(--c-rose);
  stroke-width: 1.3;
}
.mini-flower .mini-center { fill: var(--c-gold); stroke: none; opacity: 0.8; }
.cta-line { fill: none; stroke: var(--c-greige); stroke-width: 1.1; opacity: 0.5; }

.season-lines p {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 2.2;
  letter-spacing: 0.12em;
  white-space: pre-line;
}
.season-lines p + p { margin-top: 22px; }

.season-lead {
  margin-top: 36px;
  font-size: 13.5px;
  line-height: 2.2;
  color: var(--c-sub);
  white-space: pre-line;
}

/* ============================================
   特典
   ============================================ */
.gifts { margin-bottom: 44px; }
.gifts-eyebrow {
  text-align: center;
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.28em;
  color: var(--c-gold);
  margin-bottom: 18px;
}
.gift-cards { display: flex; flex-direction: column; gap: 12px; }
.gift-card {
  background: var(--c-card);
  border: 1px solid rgba(166, 156, 142, 0.25);
  border-radius: 18px;
  padding: 18px 22px 17px;
}
.gift-label {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--c-rose-deep);
  margin-bottom: 7px;
}
.gift-body { display: flex; align-items: baseline; gap: 12px; }
.gift-num {
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--c-gold);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.gift-title {
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.9;
  white-space: pre-line;
}

/* ============================================
   LINE導線(CTA)
   ============================================ */
.cta {
  margin: 8px 0 28px;
  background: linear-gradient(160deg, var(--c-rose-pale), #F4E8E4);
  border-radius: var(--radius-card);
  padding: 44px 28px 40px;
  text-align: center;
}
.cta-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 5.2vw, 22px);
  line-height: 2;
  letter-spacing: 0.1em;
  margin-bottom: 26px;
  white-space: pre-line;
}
.btn-line { width: 100%; max-width: 340px; padding: 19px 24px; font-size: 15px; }
.cta-note {
  margin-top: 16px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--c-sub);
}

/* ============================================
   最後のメッセージ
   ============================================ */
.final-message {
  text-align: center;
  padding: 48px 14px 40px;
  border-top: 1px solid rgba(195, 172, 124, 0.4);
  margin-top: 28px;
  margin-bottom: 8px;
}
.final-message .season-botanical { width: 56px; margin-bottom: 14px; }
.final-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 5.2vw, 22px);
  line-height: 2;
  letter-spacing: 0.12em;
  margin-bottom: 26px;
  white-space: pre-line;
}
.final-lines p {
  font-size: 13.5px;
  line-height: 2.2;
  color: var(--c-sub);
  white-space: pre-line;
}
.final-lines p + p { margin-top: 18px; }

.btn-retry {
  display: block;
  margin: 0 auto 56px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--c-greige);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.btn-retry:hover { color: var(--c-sub); }

.site-footer { text-align: center; padding-bottom: 8px; }
.footer-brand {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.4em;
  color: var(--c-ink);
  margin-bottom: 6px;
}
.footer-concept { font-size: 11px; letter-spacing: 0.12em; color: var(--c-greige); }

/* ---------- アクセシビリティ ---------- */
.option-btn:focus-visible,
.btn:focus-visible,
.btn-back:focus-visible,
.btn-retry:focus-visible {
  outline: 2px solid var(--c-rose-deep);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 大きめの画面 ---------- */
@media (min-width: 720px) {
  .screen { padding-top: 72px; }
  .question-card { padding: 48px 44px 40px; }
  .result-block { padding: 34px 36px; }
}