/* ======== ZOTY 診断ページ用 CSS ======== */

/* 共通リセット */
body {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", sans-serif;
  background-color: #fff;
  color: #333;
  overflow-x: hidden;
}

/* 共通ボタンデザイン */
.btn {
  display: inline-block;
  padding: 0.8rem 1.8rem;
  border-radius: 30px;
  border: 1px solid #333;
  text-decoration: none;
  color: #333;
  background: rgba(255,255,255,0.8);
  font-size: 16px;
  letter-spacing: 0.05em;
  transition: 0.3s;
}
.btn:hover {
  background: #333;
  color: #fff;
}

/* =====================
   各ページの背景設定
===================== */

/* トップ（診断をはじめる） */
body.stage--diag-index {
  min-height: 100vh;
  background: url("images/index-bg.png") center top / cover no-repeat;
}
.diag-start {
  position: absolute;
  left: 50%;
  top: 60vh;
  transform: translate(-50%, -50%);
}

/* Q1 */
body.stage--q1 {
  min-height: 100vh;
  background: url("images/q1-bg.png") center top / cover no-repeat;
}
.q1-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}


/* Q2A */
body.stage--q2a {
  min-height: 100vh;
  background: url("images/q2a-bg.png") center top / cover no-repeat;
}
.q2a-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Q2B */
body.stage--q2b {
  min-height: 100vh;
  background: url("images/q2b-bg.png") center top / cover no-repeat;
}
.q2b-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}


/* 結果ページ */
body.result--fire {
  min-height: 100vh;
  background: url("images/result_fire-bg.png") center top / cover no-repeat;
}
body.result--earth {
  min-height: 100vh;
  background: url("images/result_earth-bg.png") center top / cover no-repeat;
}
body.result--air {
  min-height: 100vh;
  background: url("images/result_air-bg.png") center top / cover no-repeat;
}
body.result--water {
  min-height: 100vh;
  background: url("images/result_water-bg.png") center top / cover no-repeat;
}

/* スマホ対応 */
@media (max-width: 640px) {
  .btn { font-size: 14px; padding: 0.6rem 1.4rem; }
  .q1-buttons, .q2a-buttons, .q2b-buttons { top: 62vh; flex-direction: column; gap: 12px; }
}
/* ===== Q画面の見出しを消す ===== */
.stage--q1 main h1,
.stage--q1 main h2,
.stage--q2a main h2,
.stage--q2b main h2 {
  display: none;
}
/* ===== ボタン並び（全質問共通） ===== */
.choices {
  display: flex;
  gap: 16px;
  justify-content: center;
}

/* 画面ごとの縦位置調整（見た目で微調整OK） */
.stage--q1  .choices { margin-top: 64px; }
.stage--q2a .choices,
.stage--q2b .choices { margin-top: 84px; }

/* もしスマホで間延びするなら軽く詰める */
@media (max-width: 640px) {
  .stage--q1  .choices { margin-top: 36px; }
  .stage--q2a .choices,
  .stage--q2b .choices { margin-top: 52px; }
}
/* ===== 質問ページの見出しを非表示 ===== */
.stage--q1 main h1,
.stage--q1 main h2,
.stage--q2a main h2,
.stage--q2b main h2 {
  display: none;
}

/* ===== ボタンの配置を中央に ===== */
.choices {
  display: flex;
  gap: 16px;
  justify-content: center;
}

/* 各ページで少し下げる */
.stage--q1  .choices { margin-top: 64px; }
.stage--q2a .choices,
.stage--q2b .choices { margin-top: 84px; }

@media (max-width: 640px) {
  .stage--q1  .choices { margin-top: 36px; }
  .stage--q2a .choices,
  .stage--q2b .choices { margin-top: 52px; }
}

/* ===== 診断ページ 共通 ===== */
.stage { position: relative; }

/* Q1/Q2 のテキストは画像側で出すので HTMLテキストは隠す */
.stage--q1 h1,
.stage--q1 h2,
.stage--q1 p,
.stage--q2a h1,
.stage--q2a h2,
.stage--q2a p,
.stage--q2b h1,
.stage--q2b h2,
.stage--q2b p {
  display: none !important;
}

/* ボタンをど真ん中に */
.diag-cta {
  min-height: 60vh;            /* 十分な高さを確保 */
  display: grid;
  place-items: center;         /* 中央寄せ（縦横） */
}

.diag-cta .choices {
  display: flex;
  gap: 16px;
}

/* スマホで折り返し */
@media (max-width: 640px) {
  .diag-cta { min-height: 55vh; }
  .diag-cta .choices { flex-direction: column; }
}
/* ========== 共通 ========== */
:root{
  --ink:#222; --muted:#777; --beige:#f6f4f1; --line:#e8e8e8;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--ink);background:#fff;font-family: "Yu Mincho","Hiragino Mincho ProN",serif;}
a{color:inherit;text-decoration:none}

/* 中央基準レイアウト */
.center{max-width:720px;margin:0 auto;padding:0 16px}

/* ボタン */
.btn{
  display:inline-block;
  padding:12px 20px;
  border:1px solid #bbb;
  border-radius:12px;
  background:#fff;
  color:#333;
  font-size:16px;
  line-height:1;
  transition:background .2s;
}
.btn:hover{ background:#f4f4f4; }

/* ========== 診断ページ基礎 ========== */
.stage{min-height:100vh; position:relative; background-color:var(--beige);}
.diag-start, .diag-cta{ display:flex; align-items:center; justify-content:center; min-height:100vh; }
.choices{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }

/* スマホでボタン少し大きめ */
@media (max-width:640px){
  .btn{ font-size:14px; padding:12px 16px; }
}

/* ========== 背景画像（それぞれのページ） ========== */
/* 入口 */

body {
  font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
}
/* ===== 全ページ共通の安定レイアウト ===== */

/* 1) 余白の基準値（全ページ同じリズムで） */
:root{
  --space-0: 0;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
}

/* 2) 予期せぬはみ出し防止 */
*,
*::before,
*::after { box-sizing: border-box; }

/* 3) セクションの基本骨格：見出し（有無OK）＋選択ボタン */
.step {
  display: grid;
  grid-template-rows: auto 1fr;    /* 上：見出し／下：選択肢 */
  row-gap: var(--space-4);
  justify-items: center;
  padding-inline: var(--space-4);
  margin: var(--space-6) auto;
  max-width: min(920px, 92vw);
}

/* 4) 見出しブロック：無くても崩れないよう最低高を確保 */
.step-header {
  min-height: 1.6em;               /* 文字が無くても高さを確保 */
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: var(--space-1);
}

/* 文字を“非表示だがレイアウト保持”にしたい時は .keep-space を付ける */
.keep-space { visibility: hidden; }

/* 完全に詰めたい場合は .no-space を付ける（詰める代わりに .choices 側で余白を管理） */
.no-space { display: none !important; }

/* 5) 選択肢の並び：幅が変わっても整列を維持 */
.choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-3); /* 縦×横のすきま */
  width: 100%;
}

/* 6) ボタンの見た目と可変幅 */
.choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7em 1.2em;
  border: 1px solid #dedede;
  border-radius: 999px;
  background: #fff;
  line-height: 1.2;
  white-space: nowrap;            /* 1行で保持（改行させたいなら削除） */
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: clamp(14px, 1.6vw, 16px);   /* 画面幅で自動調整 */
}

/* 7) セクション番号の見た目（任意） */
.step-number {
  opacity: .6;
  letter-spacing: .08em;
  margin-bottom: var(--space-1);
}

/* 8) ちいさい画面での微調整 */
@media (max-width: 480px){
  .step { row-gap: var(--space-3); }
  .choices { gap: var(--space-2); }
  .choice { padding: 0.6em 1em; font-size: clamp(13px, 3.6vw, 15px); }
}
/* ===== トップページ映像レイアウト修正 ===== */
.main-visual {
  position: relative;
  width: 100%;
  height: 100vh;              /* 画面全体の高さに合わせる */
  display: flex;
  justify-content: center;    /* 横中央寄せ */
  align-items: center;        /* 縦中央寄せ */
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.main-visual video,
.main-visual img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 完全中央寄せ */
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;          /* 画面いっぱいにトリミング */
}
/* === TOPモーション調整 === */
#top-motion {
  display: flex;
  justify-content: center;  /* 中央揃え */
  align-items: center;
  padding: 0;
}

#top-motion video {
  display: block;
  width: 100%;
  height: auto !important;  /* 元動画比率を維持 */
  object-fit: contain;      /* トリミングせずに全体を表示 */
  margin: 0 auto;
  max-width: 1100px;        /* ページ中央寄せ時の最大幅 */
}

/* もし video に高さ固定がある場合は削除（例: height: 400px; など） */

/* === TOPモーション：中央寄せと音量ボタン修正 === */
#top-motion.motion {
  position: relative;           /* ボタンの位置基準 */
  display: flex;
  justify-content: center;      /* 横中央 */
  align-items: center;          /* 縦中央 */
  margin-inline: auto;          /* ページ中央寄せ */
  width: min(1080px, 92vw);     /* 最大幅を指定して中央に */
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

/* 動画の縦比率を維持しつつ中央に */
#top-motion.motion video {
  display: block;
  width: 100%;
  height: auto !important;      /* 高さ固定を打ち消す */
  object-fit: contain !important;
  margin: 0 auto;
}

/* 音量ボタンの位置とデザイン */
#top-motion .unmute {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 10;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(5px);
  cursor: pointer;
  color: #333;
}
#top-motion .unmute.hide { display: none; }

body.stage--diag-index{ min-height:100vh; background:url("images/index-bg.png")  center top / cover no-repeat; }
body.stage--q1      { min-height:100vh; background:url("images/q1-bg.png")     center top / cover no-repeat; }
body.stage--q2a     { min-height:100vh; background:url("images/q2a-bg.png")    center top / cover no-repeat; }
body.stage--q2b     { min-height:100vh; background:url("images/q2b-bg.png")    center top / cover no-repeat; }
body.result--fire   { min-height:100vh; background:url("images/result_fire-bg.png")  center top / cover no-repeat; }
body.result--earth  { min-height:100vh; background:url("images/result_earth-bg.png") center top / cover no-repeat; }
body.result--air    { min-height:100vh; background:url("images/result_air-bg.png")   center top / cover no-repeat; }
body.result--water  { min-height:100vh; background:url("images/result_water-bg.png") center top / cover no-repeat; }

/* ===== Q1/Q2 を絶対にど真ん中にする最終パッチ ===== */
body.stage--q1  .diag-cta,
body.stage--q2a .diag-cta,
body.stage--q2b .diag-cta{
  min-height: 100vh !important;       /* 画面全高を確保 */
  display: flex !important;            /* フレックスで中央寄せ */
  align-items: center !important;      /* 縦中央 */
  justify-content: center !important;  /* 横中央 */
}

/* 余白で上にズレないよう margin を無効化 */
body.stage--q1  .choices,
body.stage--q2a .choices,
body.stage--q2b .choices{
  margin-top: 0 !important;
}

/* ===== 最終調整：Q1・Q2のボタン中央寄せ修正版 ===== */
body.stage--q1 main.diag-cta,
body.stage--q2a main.diag-cta,
body.stage--q2b main.diag-cta {
  display: flex !important;
  align-items: center !important;   /* 縦中央 */
  justify-content: center !important; /* 横中央 */
  min-height: 100vh !important;     /* 画面全体で中央化 */
  padding: 0 !important;
  margin: 0 !important;
}

/* 余白で上にズレるのを防止 */
.stage--q1 .choices,
.stage--q2a .choices,
.stage--q2b .choices {
  margin-top: 0 !important;
}
/* === 最終パッチ：診断ページのボタンを強制的にど真ん中へ === */
body.stage--q1  main.diag-cta,
body.stage--q2a main.diag-cta,
body.stage--q2b main.diag-cta{
  position: fixed !important;  /* 画面に固定して */
  inset: 0 !important;         /* 画面全体をカバー */
  display: flex !important;    /* フレックスで中央寄せ */
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;    /* 既存の高さ指定の影響を消す */
  background: transparent !important;
}

/* 余計なマージンでズレないように */
body.stage--q1  .choices,
body.stage--q2a .choices,
body.stage--q2b .choices{
  margin: 0 !important;
}

/* === Q1ページ専用：中央寄せテスト === */
body.stage--q1 main.diag-cta {
  all: unset;                    /* 既存スタイルを一旦リセット */
  position: fixed;               /* 画面中央に固定 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

body.stage--q1 .choices {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin: 0;
}
/* Didot（Mac標準）＋品の良いセリフ体フォールバック */
:root{
  --title-size: clamp(20px, 3.2vw, 32px); /* 既存より約80〜85% */
  --title-tracking: 0.05em;               /* ほんの少し広げて上品に */
}

.roulette-title{
  font-family: Didot, "Didot LT STD", "Bodoni 72", "Didot HTF",
               "Times New Roman", serif;
  font-size: var(--title-size);
  letter-spacing: var(--title-tracking);
  font-weight: 600;            /* Didotは細いので少しだけ太く */
  line-height: 1.2;
  text-align: center;
  margin: 16px 0 8px;
}

/* 注意書きをHTMLで消せない場合は隠す */
.note{ display:none !important; }

/* ボタンの英字を見やすく（任意） */
#spinBtn, #stopBtn{
  font-family: inherit;        /* サイト全体のフォントに合わせる */
  letter-spacing: 0.06em;
}
/* Fragrance Roulette / Element Diagnosis の大題のみ明朝に */
.zoty-select .card-title {
  font-family: "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP",
               "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: 0.03em;
}
/* 見出し（英語）だけ明朝に：最優先で当てる */
section.zoty-select article.card h3.card-title{
  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "YuMincho",
    "Noto Serif JP",
    "Hiragino Mincho Pro",
    "Hiragino Mincho Std",
    "游明朝体",
    "Times New Roman",
    Georgia,
    serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
}
.zoty-select .btn {
  display: inline-block;
  border: 1px solid #111;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 14px;
  text-decoration: none;
  color: #111;
  background: #fff;
  transition: transform .08s ease, background .15s ease;
}
.zoty-select .btn:hover { background:#FAFAFA; transform: translateY(-1px); }
.zoty-select .btn:active { transform: translateY(0); }
/* ===== ZOTY Selector : デザイン復元パッチ（HTML変更なし） ===== */

/* セクション導入（中央寄せ・小さめ） */
section.zoty-select .intro{ text-align:center !important; margin:14px 0 30px !important; }
section.zoty-select .intro-lead{ font-weight:600; font-size:15px; line-height:1.9; letter-spacing:.02em; }
section.zoty-select .intro-sub{ font-size:14px; line-height:1.9; color:#555; }

/* カードの箱（白・薄い影・淡い角の装飾） */
section.zoty-select .card{
  position:relative;
  text-align:center;
  max-width:720px; margin:18px auto; padding:28px 22px 26px;
  background:#fff; border:1px solid #EAEAEA; border-radius:18px;
  box-shadow:0 4px 10px rgba(0,0,0,.03);
  /* 左上＆右下に青い弧 */
  background:
    radial-gradient(100% 100% at 0 0, #6EA7FF 0 2px, transparent 2px) top left/26px 26px no-repeat,
    radial-gradient(100% 100% at 100% 100%, #6EA7FF 0 2px, transparent 2px) bottom right/26px 26px no-repeat,
    #fff;
}

/* 英語大題だけ明朝（Brand Concept合わせ） */
section.zoty-select .card-title{
  font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Times New Roman",serif;
  font-weight:600; letter-spacing:.03em;
  font-size:clamp(26px,3.2vw,32px); margin:2px 0 8px;
  -webkit-font-smoothing:antialiased;
}

/* 引用行／本文 */
section.zoty-select .card-quote{ margin:0 0 8px; font-size:15px; letter-spacing:.02em; }
section.zoty-select .card-copy{ margin:0 0 16px; font-size:14.5px; color:#555; line-height:1.9; }
section.zoty-select .card-tag{ margin:12px 0 0; font-size:13px; color:#666; letter-spacing:.04em; }

/* STARTボタン（枠＋角丸＋ホバーで少し浮く） */
section.zoty-select .btn{
  display:inline-block; border:1px solid #111; border-radius:6px;
  padding:6px 14px; font-size:14px; text-decoration:none;
  color:#111; background:#fff; transition:transform .08s ease, background .15s ease;
}
section.zoty-select .btn:hover{ background:#FAFAFA; transform:translateY(-1px); }
section.zoty-select .btn:active{ transform:translateY(0); }

/* 既存CSSに負けない最低限の保険（崩れ対策） */
section.zoty-select .intro, 
section.zoty-select .card,
section.zoty-select .btn{ all:unset; } /* ←一旦リセットは強すぎるのでコメントアウト可 */

/* ===== Fix: ZOTY Selector を中央＆箱デザインで強制適用 ===== */

/* セクション自体を中央に */
section.zoty-select{
  max-width: 980px !important;
  margin: 48px auto 64px !important;
  padding: 0 24px !important;
}

/* 導入テキストは中央寄せ */
section.zoty-select .intro{
  text-align: center !important;
  margin: 14px 0 30px !important;
}
section.zoty-select .intro-lead{
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
}
section.zoty-select .intro-sub{
  font-size: 14px !important;
  line-height: 1.9 !important;
  color: #555 !important;
}

/* ここが肝：.card を既存CSSより強く上書きして“白い箱”を復活 */
section.zoty-select article.card{
  position: relative !important;
  display: block !important;
  text-align: center !important;
  max-width: 720px !important;
  margin: 18px auto !important;
  padding: 28px 22px 26px !important;

  background:
    radial-gradient(100% 100% at 0 0, #6EA7FF 0 2px, transparent 2px) top left / 26px 26px no-repeat,
    radial-gradient(100% 100% at 100% 100%, #6EA7FF 0 2px, transparent 2px) bottom right / 26px 26px no-repeat,
    #fff !important;
  border: 1px solid #EAEAEA !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.03) !important;
}

/* タイトル（明朝）と本文の余白 */
section.zoty-select .card-title{
  font-family: "Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Times New Roman",serif !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  font-size: clamp(26px, 3.2vw, 32px) !important;
  margin: 2px 0 8px !important;
  -webkit-font-smoothing: antialiased;
}
section.zoty-select .card-quote{ margin: 0 0 8px !important; font-size: 15px !important; }
section.zoty-select .card-copy{ margin: 0 0 16px !important; font-size: 14.5px !important; color:#555 !important; line-height:1.9 !important; }
section.zoty-select .card-tag { margin:12px 0 0 !important; font-size:13px !important; color:#666 !important; letter-spacing:.04em !important; }

/* STARTボタンも強制適用 */
section.zoty-select .btn{
  display:inline-block !important;
  border:1px solid #111 !important;
  border-radius:6px !important;
  padding:6px 14px !important;
  font-size:14px !important;
  text-decoration:none !important;
  color:#111 !important;
  background:#fff !important;
  transition: transform .08s ease, background .15s ease !important;
}
section.zoty-select .btn:hover{ background:#FAFAFA !important; transform: translateY(-1px) !important; }

/* ================================
   ZOTY TOPページ 背景カラートーン統一
   ================================ */

/* Brand Story（動画含む） */
section#top-motion {
  background: #FFFFFF;
}

/* Brand Concept */
section#concept {
  background: #F8F7F5;
}

/* Fragrance Roulette & Element Diagnosis */
section#diagnosis {
  background: #FFFFFF;
}

/* 各カード（薄いベージュボックス） */
section.zoty-select article.card {
  position: relative;
  text-align: center;
  max-width: 720px;
  margin: 20px auto;
  padding: 28px 22px 26px;
  background:
    radial-gradient(100% 100% at 0 0, #D0C7B8 0 2px, transparent 2px) top left / 26px 26px no-repeat,
    radial-gradient(100% 100% at 100% 100%, #D0C7B8 0 2px, transparent 2px) bottom right / 26px 26px no-repeat,
    #F8F7F5; /* ←薄いベージュボックス */
  border: 1px solid #E5E2DE;
  border-radius: 18px;
  box-shadow: 0 4px 10px rgba(0,0,0,.03);
}

/* STARTボタン */
section.zoty-select .btn {
  display: inline-block;
  border: 1px solid #111;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 14px;
  text-decoration: none;
  color: #111;
  background: #FFFFFF; /* ←白ボタン */
  transition: transform .08s ease, background .15s ease;
}
section.zoty-select .btn:hover {
  background: #F4F3F1;
  transform: translateY(-1px);
}

/* Lineup */
section#lineup {
  background: #F8F7F5;
}
/* STARTボタンを薄いベージュ（#F8F7F5）に */
section.zoty-select .btn {
  display: inline-block;
  border: 1px solid #111;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 14px;
  text-decoration: none;
  color: #111;
  background: #F8F7F5; /* ←ここをベージュに変更 */
  transition: transform .08s ease, background .15s ease;
}

/* ホバー時（少し濃くする） */
section.zoty-select .btn:hover {
  background: #F0EFED; /* #F8F7F5より少し濃いトーン */
  transform: translateY(-1px);
}

/* クリック時 */
section.zoty-select .btn:active {
  transform: translateY(0);
}
/* STARTボタン：薄いベージュ固定 */
section.zoty-select .btn {
  display: inline-block;
  border: 1px solid #111;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 14px;
  text-decoration: none;
  color: #111;
  background: #F8F7F5 !important; /* ←確実にベージュ適用 */
  transition: transform .08s ease, background .15s ease;
}

section.zoty-select .btn:hover {
  background: #F0EFED !important; /* ←少し濃いトーン */
  transform: translateY(-1px);
}