/* =========================================================
   舞踏会ヒロイン診断 — ファーストビュー
   モックアップ（Vienna Ball）を忠実に再現 / スマートフォン最優先
   ========================================================= */

:root {
  --ivory:        #F6EDE1;   /* 背景アイボリー（ブラッシュ寄り） */
  --ivory-hi:     #FCF6EC;   /* 中央のわずかな明るみ */
  --ink:          #3A2E28;   /* 見出しの濃い墨（あたたかいチャコール） */
  --ink-soft:     #6E5D51;   /* リード・サブ */
  --gold:         #B8924A;
  --gold-soft:    #CBAA6A;
  --gold-line:    rgba(184, 146, 74, 0.55);
  --rose-btn:     #D07B92;   /* CTA ローズピンク（明・少し鮮やか） */
  --rose-btn-deep:#B85A76;   /* CTA ローズピンク（暗） */
  --champagne:    #E3C892;   /* シャンパンゴールドの縁取り */
  --champagne-lt: #F1DEB2;
  --rose-shadow:  rgba(176, 99, 122, 0.30);

  --rose-muted:   #9A5E70;   /* アイキャッチのローズ */
  --brown-title:  #4A362B;   /* 見出しのブラウン */

  /* 宝石箱の色彩（ローズ×シャンパンを中心に、ラベンダー・モーヴ・ペールブルー） */
  --rose:         #C77E92;   /* ローズピンク */
  --rose-deep:    #B15E74;
  --rose-accent:  #C06E86;   /* タイトルのローズアクセント */
  --lavender:     #B3A4D4;   /* ラベンダー */
  --lilac:        #CDBEE4;   /* ライラック */
  --mauve:        #9C7691;   /* モーヴ */
  --plum:         #7E5A72;   /* プラム */
  --pale-blue:    #AEC6E4;   /* ペールブルー */
  --ice-blue:     #CFE0EE;   /* アイスブルー */
  --apricot:      #E7B98C;   /* アプリコット */

  --font-jp:      "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --font-en:      "Cormorant Garamond", serif;
  --font-title:   "Zen Old Mincho", "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --font-display: "Hina Mincho", "Shippori Mincho", "Hiragino Mincho ProN", serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-jp);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

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

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- ファーストビュー（1枚画像版） ---------- */
/* 画像は幅いっぱいに表示し、高さは比率に応じて自動。
   「診断をはじめる」ボタンの位置に、画像に対する%指定で透明な当たり判定を重ねる */
.hero-flat__frame {
  position: relative;
  line-height: 0;
}
.hero-flat__img {
  display: block;
  width: 100%;
  height: auto;
}
.hero-flat__cta {
  position: absolute;
  left: 4.4%;
  top: 78.7%;
  width: 44%;
  height: 9.7%;
  display: block;
  border-radius: 999px;
  cursor: pointer;
}
.hero-flat__cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- ヒーロー全体（従来のHTML/CSS版。現在未使用・復元用に保持） ---------- */
/* 画面いっぱいの高さにはせず、コンテンツに合わせた高さに。
   余白・上下の装飾を本文とバランスさせるため */
.hero {
  position: relative;
  overflow: hidden;
  /* モックアップに忠実な、シンプルであたたかいアイボリー */
  background: radial-gradient(120% 82% at 32% 22%, var(--ivory-hi) 0%, var(--ivory) 62%);
  padding: clamp(1.5rem, 6vw, 2.2rem) clamp(1.6rem, 7vw, 2.5rem)
           clamp(2.2rem, 9vw, 3rem);
}

/* ---------- 左上・左下の金の唐草コーナー装飾 ---------- */
.hero__corner {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background: center / contain no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23B8924A' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M6 60 Q6 6 60 6'/%3E%3Cpath d='M6 42 Q6 26 20 20 Q30 16 34 6'/%3E%3Cpath d='M42 6 Q56 6 60 22'/%3E%3Ccircle cx='60' cy='6' r='2.2' fill='%23B8924A' stroke='none'/%3E%3Ccircle cx='6' cy='60' r='2.2' fill='%23B8924A' stroke='none'/%3E%3Cpath d='M13 15 q7 -7 15 -2 q-2 9 -11 11 q-7 2 -4 -9Z' fill='%23B8924A' stroke='none' opacity='.85'/%3E%3C/g%3E%3C/svg%3E");
}
.hero__corner--tl {
  top: 0;
  left: 0;
  width: clamp(64px, 20vw, 108px);
  height: clamp(64px, 20vw, 108px);
}
.hero__corner--bl {
  left: 0;
  bottom: clamp(1.4rem, 8vw, 2.6rem);
  width: clamp(70px, 22vw, 118px);
  height: clamp(70px, 22vw, 118px);
  transform: scaleY(-1);
}

/* ---------- 主役ヒロイン（右上に配置しアイボリーへとけこむ） ---------- */
.hero__heroine {
  position: absolute;
  top: 0;
  right: 0;
  width: 57%;
  max-width: 480px;
  height: auto;
  z-index: 0;
  pointer-events: none;
  /* 左端はやわらかくフェード。下端はドレスがボタン付近まで見えるよう、ずっと下でフェード */
  -webkit-mask-image:
    linear-gradient(to left,  #000 76%, transparent 100%),
    linear-gradient(to bottom, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to left,  #000 76%, transparent 100%),
    linear-gradient(to bottom, #000 90%, transparent 100%);
          mask-composite: intersect;
}

/* ---------- テキスト列 ---------- */
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

/* ロゴ（左のテキスト列に、内部は中央そろえ） */
.logo {
  text-align: center;
  width: min(230px, 58%);
  margin: 0 0 clamp(1.7rem, 7.5vw, 2.5rem);
}
.logo__crown {
  display: block;
  width: clamp(34px, 9vw, 44px);
  margin: 0 auto .5rem;
  color: var(--gold);
}
.logo__crown svg { width: 100%; height: auto; }
.logo__name {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(1.7rem, 8.4vw, 2.15rem);
  line-height: 1;
  letter-spacing: .04em;
  color: var(--gold);
  margin: 0;
  white-space: nowrap;
}
.logo__sub {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(.7rem, 3vw, .84rem);
  letter-spacing: .22em;
  color: var(--gold);
  margin: .5em 0 0 .2em;
}

/* ロゴ下の小さな唐草 */
.flourish {
  display: block;
  height: 14px;
  background: center / contain no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='14' viewBox='0 0 220 14'%3E%3Cg fill='none' stroke='%23B8924A' stroke-width='1' stroke-linecap='round'%3E%3Cline x1='6' y1='7' x2='92' y2='7'/%3E%3Cline x1='128' y1='7' x2='214' y2='7'/%3E%3Cpath d='M92 7 q10 -6 18 0 q-10 6 -18 0Z' fill='%23B8924A' stroke='none'/%3E%3Cpath d='M128 7 q-10 -6 -18 0 q10 6 18 0Z' fill='%23B8924A' stroke='none'/%3E%3Ccircle cx='110' cy='7' r='2.4' fill='%23B8924A' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}
.flourish--sm { width: min(180px, 62%); margin: .5rem auto 0; opacity: .9; }

/* メインコピー */
/* 小さな前置き（女性誌のようなアイキャッチ） */
.hero__eyebrow {
  font-family: var(--font-jp);
  font-weight: 500;
  max-width: 82%;
  font-size: clamp(.74rem, 3.1vw, .88rem);
  color: #7C4757;
  letter-spacing: .07em;
  white-space: nowrap;
  margin: 0 0 .5em;
}
/* メインタイトル（一行はモックアップどおり、色は以前のカラフルなグラデーションに戻す） */
.hero__title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.7rem, 7.4vw, 2.15rem);
  letter-spacing: .04em;
  line-height: 1.3;
  margin: 0 0 .75em;
  white-space: nowrap;
  /* ローズ→モーヴ→ラベンダー→シャンパンが自然につながる上品なグラデーション */
  background: linear-gradient(100deg,
    #C67C93 0%, #B06B94 34%, #9B86C0 66%, #BE9350 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, .8))
    drop-shadow(0 1px 9px rgba(255, 247, 235, .75))
    drop-shadow(0 0 18px rgba(210, 160, 184, .32));
}

.hero__lead {
  max-width: 78%;
  font-size: clamp(.76rem, 3.3vw, .9rem);
  line-height: 1.95;
  color: var(--ink-soft);
  margin: 0;
}

/* ボタン上の唐草（診断をはじめる、の上に余白をつくる）。
   ロゴ下の唐草と中心位置を揃え（ロゴ幅 min(230px,58%) の中心に合わせる）、
   意匠は線＋ひし形だけのシンプルな別デザインに */
.hero__copy .flourish {
  width: min(150px, 42%);
  height: 10px;
  margin-top: clamp(1.3rem, 5.5vw, 1.9rem);
  margin-bottom: clamp(1.5rem, 6vw, 2.1rem);
  margin-left: calc(min(230px, 58%) / 2 - min(150px, 42%) / 2);
  opacity: .9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='10' viewBox='0 0 150 10'%3E%3Cg stroke='%23B8924A' stroke-width='1' stroke-linecap='round'%3E%3Cline x1='4' y1='5' x2='62' y2='5'/%3E%3Cline x1='88' y1='5' x2='146' y2='5'/%3E%3C/g%3E%3Crect x='71' y='1' width='8' height='8' fill='%23B8924A' transform='rotate(45 75 5)'/%3E%3C/svg%3E");
}

/* CTA ボタン（単体・深いワインレッド） */
.cta {
  display: block;
  width: min(258px, 74%);
  padding: clamp(.85rem, 3.8vw, 1.05rem) 1.2rem;
  border-radius: 14px;
  text-align: center;
  /* 深いワインレッド＋ごく薄い光沢 */
  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);
  box-shadow:
    0 10px 22px var(--rose-shadow),
    inset 0 1px 0 rgba(255, 248, 242, .32);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(1.02rem, 4.6vw, 1.2rem);
  letter-spacing: .09em;
  color: #FFF7F1;
  position: relative;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, filter .2s ease;
}
/* 細いシャンパンゴールドの内枠 */
.cta::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(236, 213, 162, .78);
  border-radius: 10px;
  pointer-events: none;
}
.cta:hover { transform: translateY(-2px); filter: brightness(1.03); box-shadow: 0 13px 26px var(--rose-shadow); }
.cta:active { transform: translateY(1px); transition-duration: .1s; }

/* ボタン下の小さな補足（目立たせない） */
.cta-note {
  width: min(258px, 74%);
  text-align: center;
  font-size: clamp(.7rem, 3vw, .8rem);
  letter-spacing: .08em;
  color: var(--ink-soft);
  margin: .8em 0 0;
}

/* ---------- 少し広い画面での微調整 ---------- */
@media (min-width: 560px) {
  .hero__heroine { width: 50%; }
}

/* =========================================================
   あなたはどのヒロインタイプ？（4人のヒロイン）
   舞踏会の世界がそのまま続くように、淡いカラフルな光を敷く
   ========================================================= */
.types {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 12vw, 5rem) clamp(1.3rem, 6vw, 2.5rem) clamp(3.6rem, 12vw, 5.5rem);
  /* ローズ→ラベンダー→シャンパン→ペールブルー／モーヴがまざる舞踏会場の光（存在感は控えめ） */
  background:
    radial-gradient(66% 38% at 14% 8%,  rgba(226, 156, 182, .22), transparent 70%),
    radial-gradient(64% 42% at 90% 14%, rgba(196, 180, 224, .22), transparent 72%),
    radial-gradient(70% 44% at 82% 80%, rgba(232, 204, 148, .20), transparent 72%),
    radial-gradient(66% 42% at 16% 88%, rgba(174, 198, 228, .18), transparent 72%),
    radial-gradient(56% 36% at 50% 50%, rgba(200, 150, 178, .12), transparent 72%),
    linear-gradient(180deg, var(--ivory) 0%, #F2E8DC 48%, var(--ivory) 100%);
}

/* 舞踏会場のボケた光（シャンデリアのきらめきを暗示） */
.types__bokeh { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.types__bokeh span {
  position: absolute;
  border-radius: 50%;
  filter: blur(14px);
  opacity: .28;
}
.types__bokeh span:nth-child(1) { width: 90px;  height: 90px;  top: 4%;  left: 8%;  background: var(--champagne); }
.types__bokeh span:nth-child(2) { width: 60px;  height: 60px;  top: 10%; left: 78%; background: var(--rose); opacity: .22; }
.types__bokeh span:nth-child(3) { width: 120px; height: 120px; top: 30%; left: 90%; background: var(--lavender); opacity: .2; }
.types__bokeh span:nth-child(4) { width: 46px;  height: 46px;  top: 26%; left: 20%; background: #FFF6E6; opacity: .5; }
.types__bokeh span:nth-child(5) { width: 80px;  height: 80px;  top: 54%; left: 4%;  background: var(--pale-blue); opacity: .22; }
.types__bokeh span:nth-child(6) { width: 54px;  height: 54px;  top: 60%; left: 88%; background: var(--champagne); opacity: .26; }
.types__bokeh span:nth-child(7) { width: 34px;  height: 34px;  top: 46%; left: 52%; background: #FFF6E6; opacity: .45; }
.types__bokeh span:nth-child(8) { width: 100px; height: 100px; top: 82%; left: 70%; background: var(--rose); opacity: .18; }
.types__bokeh span:nth-child(9) { width: 70px;  height: 70px;  top: 88%; left: 14%; background: var(--lilac); opacity: .2; }
.types__bokeh span:nth-child(10){ width: 40px;  height: 40px;  top: 72%; left: 40%; background: var(--champagne); opacity: .3; }

.types__inner {
  position: relative;
  z-index: 1;
  max-width: 660px;
  margin: 0 auto;
}

/* 見出し */
.types__head { text-align: center; margin: 0 0 clamp(2rem, 8vw, 3rem); }
.types__eyebrow {
  display: block;
  font-family: var(--font-en);
  letter-spacing: .3em;
  text-transform: uppercase;
  font-size: clamp(.68rem, 2.9vw, .8rem);
  color: var(--gold);
  margin: 0 0 .9em;
}
.types__title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(1.5rem, 7vw, 2.15rem);
  letter-spacing: .06em;
  color: var(--brown-title);
  margin: 0;
}
.types__title span { color: var(--rose-accent); }
.types__head .flourish {
  width: min(180px, 52%);
  margin: clamp(.9rem, 4vw, 1.3rem) auto clamp(.8rem, 3.5vw, 1.1rem);
}
.types__sub {
  font-size: clamp(.8rem, 3.4vw, .94rem);
  color: var(--ink-soft);
  margin: 0;
}

/* カード群 */
.type-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.85rem, 3.4vw, 1.4rem);
}
@media (min-width: 760px) {
  .type-cards { grid-template-columns: repeat(4, 1fr); }
}

/* カードは枠・タイトル・説明文・クラウンまで焼き込み済みの1枚画像をそのまま使用 */
.type-card {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(96, 62, 76, .14);
  transition: transform .28s ease, box-shadow .28s ease;
}
.type-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(96, 62, 76, .2);
}
.type-card img {
  display: block;
  width: 100%;
  height: 100%;
  /* 4枚の画像でわずかに縦横比が異なるため、カードの大きさ・余白が揃って見えるよう統一する */
  aspect-ratio: 0.66;
  object-fit: cover;
  object-position: center;
}

/* ---------- モバイル専用の可読性調整（PC/タブレットのCSSには影響しません） ----------
   ファイル末尾に置くことで、同じセレクタの既存ルールより確実に後勝ちさせる */
@media (max-width: 559px) {
  /* ヒロインをドレスの裾がリード文の終わりと近い高さまで見えるサイズに */
  .hero__heroine { width: 43%; }

  /* 「舞踏会ヒロイン診断」が写真にかからず1行で収まるよう、フォントサイズだけ調整
     （white-space:nowrapのため、幅ではなくフォントサイズで収める） */
  .hero__title { font-size: clamp(1rem, 4.95vw, 1.21rem); }

  /* 「まだ知らない、あなたの魅力に出会う」も1行で、写真にかからないサイズに */
  .hero__eyebrow { white-space: nowrap; font-size: clamp(.56rem, 2.55vw, .64rem); }

  /* CTAボタンをひとまわり小さく */
  .cta {
    width: min(216px, 62%);
    padding: clamp(.6rem, 2.8vw, .75rem) 1rem;
    font-size: clamp(.86rem, 3.9vw, 1rem);
  }
  .cta-note { width: min(216px, 62%); }

  /* 「あなたはどのヒロインタイプ？」が1行で収まるよう調整 */
  .types { padding-left: 1.1rem; padding-right: 1.1rem; }
  .types__title { font-size: clamp(1.15rem, 5.85vw, 1.45rem); letter-spacing: .02em; line-height: 1.35; }
}