@charset "UTF-8";
 /*------------------------
    カスタムプロパティ
  ------------------------*/
  :root {
    --header-height-mobile: 70px;
    --header-height-desktop: 80px;
    --icon-size-mobile: 100px;
    --icon-size-desktop: 100px;
    --nav-gap-mobile: 8px;
    --nav-gap-desktop: 16px;
    --btn-radius: 12px;
  --yume-white:#fff;
  --yume-pink:#d7deff;
  --yume-lav:#d7deff;
  --yume-mint:#D7F7FF;
  --yume-brown:#5C3B34;


}



  

  /*------------------------
    リセット & グローバル
  ------------------------*/
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height-mobile);
  }
  @media (min-width: 768px) {
    html {
      scroll-padding-top: var(--header-height-desktop);
    }
  }
  

  /*------------------------
    中央コンテナ（白帯）
  ------------------------*/
.container {
  background-color: #FFFFFF;
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .container {
    width: 100%;
  }
}
  /*------------------------
    固定ヘッダー
  ------------------------*/
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height-mobile);
    background-color: #f2f2f2;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  @media (min-width: 768px) {
    header {
      height: var(--header-height-desktop);
    }
  }
 /* ナビを.container と同じ幅に */
header nav {
  /* もともとの高さ・内部レイアウトはそのまま */
  width: 90%;            /* .container と同じ */
  max-width: 800px;      /* .container の max-width と同じ */
  margin: 0 auto;        /* 中央寄せ */
  padding: 0;            /* 既存の左右 padding は不要になるのでリセット */
}

  @media (min-width: 768px) {
    header nav {
      padding: 0 var(--nav-gap-desktop);
    }
  }


/* ───────────────────────────────────────────────
   ヘッダーナビ：アイコンを大きく＆幅を均等に配置
──────────────────────────────────────────────── */

/* ① li を flex:1 で均等幅に */
header nav ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}
header nav ul li {
  flex: 1;                /* 各アイテムを等幅に */
  display: flex;
  justify-content: center;
}

/* ② a を大きく・正方形に */
header nav ul li a {
  width: 64px;            /* モバイル時のサイズ */
  height: 64px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
@media (min-width: 768px) {
  header nav ul li a {
    width: 80px;          /* デスクトップ時のサイズ */
    height: 80px;
  }
}

/* ③ アイコン画像を拡大 */
header nav ul li a img {
  width: 40px;            /* モバイル時 */
  height: auto;
}
@media (min-width: 768px) {
  header nav ul li a img {
    width: 40px;          /* デスクトップ時 */
  }
}

  /*------------------------
    セクション共通
  ------------------------*/
  section {
    padding: 2em 1em;
  }
 section#hero {
  /* 上下左右の余白を増やしてゆったり見せる */
  margin-top: 2em;       /* 上にマージン */
  padding: 7em 1em 2em;  /* 上:4em 右左:1em 下:3em */
}
  section#hero,
  section#hints,
  section#cards {
    text-align: center;
  }


       /* リセット＆本文中央寄せ */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    a { text-decoration: none; color: #daa0e9; }
    /* ボタン共通 */
    .btn {
      display: inline-block;
      background: linear-gradient(135deg, var(--celestial), var(--light-aqua), var(--powder-blue));
      color: #063547;
      border: none;
      border-radius: 50px;
      padding: 12px 28px;
      font-weight: bold;
      cursor: pointer;
      text-decoration: none;
      margin: 0.5em;
      transition: all 0.3s ease;
      box-shadow: 0 6px 20px rgba(102,153,180,0.10);
    }

    /* カード表示 */
    #cardContainer { max-width: 600px; margin: 0 auto 2em; text-align: center; }
    #cardTitle { font-size: 1.8em; margin-top: 0.5em; }
    #cardSubTitle { font-size: 1.2em; color: #666; margin-bottom: 0.5em; }
    #cardImg { display: block; margin: 0.5em auto; width: 80%; max-width: 300px; height: auto; }

    /* 詳細セクション：常に1列、中央揃え */
    .details { display: flex; flex-direction: column; gap: 1.5em; align-items: center; }
    .detail-section { text-align: center; max-width: 600px; }
    .detail-section p { line-height: 1.6; }

/* ―― A. 詳細セクションとボタン群のあいだを広げる ―― */
.details {
  margin-bottom: 2em;    /* 元は gap:1.5em だけだった箇所に、下部マージンを追加 */
}

/* ―― B. ナビゲーションボタン群 ―― */
.nav-buttons {
  display: flex;
  flex-direction: column; /* 縦並び */
  gap: 0.5em;             /* ボタン間の間隔 */
  align-items: center;
  margin-top: 1.5em;      /* 詳細→ナビボタンのすき間 */
}

/* ―― C. シェアボタンとの距離 ―― */
.share-buttons {
  margin-top: 2em;        /* ナビボタン群→シェアのすき間 */
  gap: 1em;               /* Flexbox の gap でボタン間 */
  display: flex;
  flex-direction: row;    /* 横並び */
  justify-content: center;
}

/* ―― D. 余分なマージン／ハイフンをリセット ―― */
.btn {
  margin: 0;              /* すべての .btn の余白リセット */
}

/* ―― E. 必要ならアイコンサイズを調整 ―― */
.share-btn img {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

/* ヒント三か条のスタイル */
section#hints {
  margin-top: 2em;               /* 上の要素（details）とのすき間 */
}
section#hints h2 {
  font-size: 1.4em;
  margin-bottom: 0.8em;
  color: #347;
}
.hints-list {
  list-style: decimal inside;
  display: inline-block;
  text-align: left;
  margin-bottom: 1em;
}
.hints-list li {
  margin-bottom: 0.5em;
}
/* ヒントと「やり方を見る」ボタンの間の余白 */
section#hints {
  margin-top: 13em;     /* details との隙間 */
  margin-bottom: 8em;  /* ボタン群との隙間を広めに */
}

/* ヒントリスト自体の下余白 */
.hints-list {
  margin-bottom: 2em;  /* リンクボタンまでの余白 */
}

/* 「別のカード」「トップに戻る」ボタン群との間 */
.nav-buttons {
  margin-top: 2.5em;   /* ヒント ↓ ナビボタン の間隔 */
  gap: 1em;            /* ボタン同士の間隔強調 */
}

/* Xシェアボタンとの間 */
.share-buttons {
  margin-top: 2.5em;   /* ナビボタン群 ↓ シェアボタン の間隔 */
  gap: 1em;
}

/* もし .btn の上下マージンが小さすぎる場合は上書き */
.nav-buttons .btn,
.share-buttons .btn {
  margin: 0.5em 0;     /* ボタン上下の余白を 0.5em に */
}


  /*―――― 5. タイトルをヘッダー下にずらす ――――*/
  #cardTitle,
  #cardSubTitle {
    margin-top: 1em;
  }


  

/* ===== Cloud Transition (共通) ===== */
.cloud-overlay{
  position:fixed; inset:0; overflow:hidden; z-index:9999;
  pointer-events:none; background:transparent;
}
.cloud{
  position:absolute; will-change:transform,opacity;
  opacity:0; filter: drop-shadow(0 2px 0 rgba(0,0,0,.06));
}
/* ゆめ可愛い雲の塗り＆アウトライン */
.cloud svg .fill{ fill:#fff7ff; }
.cloud svg .stroke{ stroke:#a8fffb; stroke-width:2; fill:none; }

/* 覆うとき（index → result 遷移前） */
@keyframes cloudIn {
  0%   { transform: translate(var(--tx),var(--ty)) scale(0.6) rotate(var(--rot)); opacity:0; }
  60%  { opacity:1; }
  100% { transform: translate(0,0) scale(1) rotate(0deg); opacity:1; }
}
/* 晴れていくとき（result で） */
@keyframes cloudOut {
  0%   { transform: translate(0,0) scale(1); opacity:1; }
  100% { transform: translate(var(--otx),var(--oty)) scale(1.1); opacity:0; }
}

/* 低速回線や簡易モーション配慮（必要なら） */
@media (prefers-reduced-motion: reduce){
  .cloud{ animation-duration:200ms !important; }
}



/* 晴れるまでは結果を見せない */
body:not(.show-result) .result-root {
  visibility: hidden;
  opacity: 0;
}
body.show-result .result-root {
  visibility: visible;
  opacity: 1;
  animation: resultFade .35s ease;
}
@keyframes resultFade { from{opacity:0} to{opacity:1} }

/* ナビが fixed で重なる場合の代替 */
@media (max-width: 640px) {
  .nav { position: sticky; top: 0; z-index: 1000; background: #fff; }
}

/* ==== モバイル時に固定ナビの下へ余白を作る ==== */
@media (max-width: 640px) {
  /* 固定ナビの高さ（あなたのナビの高さに合わせて調整） */
  :root { --nav-h: 88px; }  /* 80〜100pxの範囲で微調整してOK */

  /* ページのメイン領域（あなたの外側ラッパに合わせて選んでください）*/
  /* 例: .main-root や .result-root、.container の最上位など */
  .main-root,
  .result-root,
  body > .container {
    padding-top: var(--nav-h);
  }

  /* 見出しにアンカーで飛んだ時もナビに隠れないようにする */
  h1, h2, h3, [id^="sec-"] {
    scroll-margin-top: calc(var(--nav-h) + 8px);
  }
}



/* 詳細カードセクション */
.detail-section {
  background: linear-gradient(180deg, #fff, #f8f9ff);
  border-radius: 20px;
  padding: 1.2em;
  box-shadow: 0 3px 10px rgba(102,153,180,0.12); /* replaced purple -> blue */
}

/* フッター */
footer {
  color: #aa88cc;
  font-size: 0.9em;
  text-shadow: 1px 1px 3px rgba(255,255,255,0.6);
}

/* 雲の色味もゆめかわ寄りに調整 */
.cloud svg .fill { fill: #fffaff; }
.cloud svg .stroke { stroke: #b7f4ff; stroke-width: 2; fill: none; }


/* ==== 最終オーバーライド：タイトルが固定ナビに被らない ==== */

/* 背景（白地）はナビ直下まで伸ばすが、中身はナビ下から開始 */
.result-root{
  margin-top: 0 !important;
  padding-top: 0 !important;
  /* match index background: layered blue gradient + soft radial accents */
  background:
    linear-gradient(160deg,
      color-mix(in oklab, var(--powder-blue) 35%, #fff8ff) 0%,
      color-mix(in oklab, var(--celestial) 40%, #f7faff) 45%,
      color-mix(in oklab, var(--light-aqua) 30%, #faffef) 100%),
    radial-gradient(50rem 35rem at 15% 15%, rgba(225,245,250,.45) 0%, transparent 60%),
    radial-gradient(60rem 45rem at 80% 80%, rgba(210,240,250,.35) 0%, transparent 65%),
    var(--yume-white, #fff);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

/* コンテンツは“内側パディング”でナビ高さぶん＋少し下げる */
.container{
  margin-top: 0 !important; /* 上へ引き上げ禁止 */
  padding-top: calc(var(--header-height-mobile) + 14px) !important; /* ←必要に応じて +16px, +20px に微調整 */
}

/* PC幅も同様に */
@media (min-width:768px){
  .container{
    padding-top: calc(var(--header-height-desktop) + 18px) !important;
  }
}

/* モバイル用に別で足していたナビ下余白を打ち消す */
@media (max-width:640px){
  .main-root,
  .result-root,
  body > .container{
    padding-top: 0 !important;
  }
}

/* ハッシュで飛んだ時も見出しがナビに隠れないよう補正 */
#cardTitle, h1, h2, h3{
  scroll-margin-top: calc(var(--header-height-mobile) + 12px) !important;
}
@media (min-width:768px){
  #cardTitle, h1, h2, h3{
    scroll-margin-top: calc(var(--header-height-desktop) + 16px) !important;
  }
}

/* タイトルの上余白を控えめに */
#cardTitle{ margin-top: .25rem !important; }
#cardSubTitle{ margin-top: .25rem !important; }

/* 念のためヘッダーは最前面・高さ固定 */
header{
  position: fixed; top:0; left:0; width:100%;
  height: var(--header-height-mobile); z-index: 2000;
}
@media (min-width:768px){
  header{ height: var(--header-height-desktop); }
}


/* ② ゆめかわ配色のカスタムプロパティ（既存 :root に追記OK） */
:root{
  --yume-pink:#d7f2ff;
  --yume-lav:#d7e2ff;
  --yume-mint:#d7f7ff;
  --yume-yellow:#fff3c9;
  --yume-line:#d3ffed;
  --yume-brown:#4a2f2b;
}



/* ============ ゆめかわ背景（共通） ============ */
/* ほんのりグラデーションの“雲”を重ねる（本文は上・背景は下） */
.yume-hero,
.yume-soft-bg{
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* ヒーロー：ふわ雲＋光の粒（背景専用レイヤー） */
.yume-hero::before{
  content:"";
  position:absolute; inset:-10%;
  z-index:-1;
  /* パステル雲を複数の radial-gradient で重ねる */
  background:
    radial-gradient(60rem 40rem at 10% -10%, rgba(255,247,255,.95) 0 40%, transparent 60%) ,
    radial-gradient(40rem 28rem at 85% 20%,  rgba(232,215,255,.9) 0 35%, transparent 60%),
    radial-gradient(32rem 24rem at 20% 80%,  rgba(215,247,255,.9) 0 40%, transparent 65%),
    radial-gradient(50rem 36rem at 110% 90%, rgba(255,243,201,.85) 0 30%, transparent 60%);
  filter: blur(0.2px);
}

/* セクション共通：やさしい“もや”背景（cards/hints などに） */
.yume-soft-bg::before{
  content:"";
  position:absolute; inset:-6%;
  z-index:-1;
  background:
    radial-gradient(28rem 22rem at 8% 10%, rgba(232,215,255,.55) 0 45%, transparent 60%),
    radial-gradient(26rem 20rem at 90% 85%, rgba(255,215,247,.45) 0 45%, transparent 65%);
}

/* ============ きらめき（Sparkles） ============ */
.yume-sparkles{ position:relative; }
.yume-sparkles .sparkle{
  position:absolute; pointer-events:none;
  width:var(--s,10px); height:var(--s,10px);
  left:0; top:0; translate: var(--x,0) var(--y,0);
  opacity:.9;
  background: radial-gradient(circle, #fff 0 45%, rgba(255,255,255,0) 70%);
  filter: drop-shadow(0 2px 4px rgba(102,153,180,0.20)); /* replaced purple -> blue */
  border-radius:50%;
  animation: floatY var(--d,8s) linear infinite,
             driftX calc(var(--d,8s) * 1.2) ease-in-out infinite;
}
/* 星型（8角形） */
.yume-sparkles .sparkle.is-star{
  clip-path: polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  background: radial-gradient(circle at 50% 45%, #fff 0 35%, var(--c,#fff0) 36% 70%, transparent 71%);
}

/* ふわっと上下 */
@keyframes floatY{
  0%{ transform:translateY(0) }
  50%{ transform:translateY(-18px) }
  100%{ transform:translateY(0) }
}
/* 左右にゆらゆら */
@keyframes driftX{
  0%{ transform:translateX(0) }
  50%{ transform:translateX(10px) }
  100%{ transform:translateX(0) }
}

/* ホバー時はほんの少しだけ賑やかに（重くしない範囲） */
.yume-hero:hover .sparkle{ animation-duration: calc(var(--d,8s) * .8); }

/* 動きを苦手とする環境配慮 */
@media (prefers-reduced-motion: reduce){
  .yume-sparkles .sparkle{ animation-duration: .01ms; animation-iteration-count:1; }
}

/* ============ セクション間のウェーブ ============ */
.yume-wave{
  display:block; width:100%; height:64px; margin:-10px 0 0 0;
  filter: drop-shadow(0 -2px 6px rgba(102,153,180,0.18)); /* replaced purple -> blue */
}
.yume-wave path{ fill:#fff; } /* 下のセクションと自然につなぐ */



/* === Header/Nav を index の見た目に統一（上書き用） === */
:root{
  --yume-pink:#d7f6ff;
  --yume-brown:#5C3B34;
}



/* ナビ内の丸ボタンの見た目を統一（白地＋淡い枠＋軽い影） */


header nav ul li a:hover{
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(92,59,52,.18);
}

/* ラベル（span）の色をブラウンで統一 */
header nav ul li a span{
  color: var(--yume-brown) !important;
}

/* 幅合わせ（どちらのページでも同じレイアウト幅に） */
header nav{ width: 90%; max-width: 800px; margin: 0 auto; padding: 0; }



/* === index と同じフォント＆色に統一（result.html に追記） === */
:root{
  --yume-brown:#5C3B34; /* index 側の締め色に合わせる */
}


/* 見出し色をピンク(#b76cf5)からブラウンへ統一 */
h1, h2, h3{
  color: var(--yume-brown) !important;
  text-shadow: none; /* index 側に合わせて装飾は控えめに */
}

/* ナビのラベル色を統一 */
header nav ul li a span{
  color: var(--yume-brown) !important;
  font-weight: 600;
}

/* 詳細セクション見出しの局所色(#347)を統一 */
.detail-section h3{
  color: var(--yume-brown) !important;
}


/* 雲をちらすための “お部屋”（まんなかに固定） */
.cloud-stage{
  position:absolute;
  width:1200px;
  height:1000px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  pointer-events:none; /* クリックをじゃましない */
}


/* === 虹色グラデのヘッダー（共通・最後に入れる）=== */
header{
  /* 虹色の材料（やさしい夢かわトーン） */
  --r1:#ffd7f7; --r2:#ffe8d7; --r3:#fff3c9; --r4:#d7f7ff; --r5:#e8d7ff;
  background: linear-gradient(90deg, var(--r1), var(--r2), var(--r3), var(--r4), var(--r5), var(--r1)) !important;
  background-size: 400% 100%;
  animation: headerRainbow 18s ease-in-out infinite;
}

@keyframes headerRainbow{
  0%   { background-position:   0% 0; }
  50%  { background-position: 100% 0; }
  100% { background-position:   0% 0; }
}

/* 動きを苦手な人の設定を尊重（端末の“簡易アニメ”設定） */
@media (prefers-reduced-motion: reduce){
  header{ animation: none; background-position: 50% 0; }
}


/* ★ Kaisei Opti をページ全体で使う指定（result.html に追加） */
html, body, header, nav, section, article,
h1, h2, h3, h4, h5, h6,
p, a, li, button, input, textarea, .btn {
  font-family: "Kaisei Opti", "Hiragino Mincho ProN", "Yu Mincho",
               "Noto Serif JP", serif !important;
}

/* ★ 全体フォントを Zen Old Mincho に変更（result 用） */
html, body, header, nav, section, article,
h1, h2, h3, h4, h5, h6,
p, a, li, button, input, textarea, .btn {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho",
               "Noto Serif JP", serif !important;
}

/* ナビのラベル折り返し防止＆レスポンシブサイズ */
header nav ul li a span{
  white-space: nowrap;
  font-size: clamp(12px, 1.6vw, 14px);
  font-weight: 700;
  color: var(--yume-brown) !important;
}

/* inline SVG star: force white & add light-blue drop-shadow for contrast */
header nav ul li a svg {
  display: block;
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 2px 6px rgba(173,216,230,0.35));
  transition: transform .14s ease, filter .14s ease;
}
header nav ul li a svg path {
  fill: #ffffff !important;
}
header nav ul li a:hover svg {
  transform: translateY(-2px) scale(1.04);
  filter: drop-shadow(0 6px 14px rgba(173,216,230,0.45));
}

/* ensure section small title is centered on result as well */
.section-nav-title {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--yume-brown);
  margin: 0.6rem 0 0.4rem;
  scroll-margin-top: calc(var(--header-height-mobile) + 14px);
}
@media (min-width:768px){
  .section-nav-title { scroll-margin-top: calc(var(--header-height-desktop) + 18px); }
}

/* Make main result image rounded (keeps X icon and advice text unchanged) */
#cardImg {
  border-radius: 14px;
  overflow: hidden;
  display: block;
  margin: 0.5em auto;
  width: 80%;
  max-width: 300px;
  height: auto;
}

/* Blue palette (ensure same variables) */
:root{
  --powder-blue:   #B0E0E6;
  --sky-mist:      #A9C6CF;
  --celestial:     #C9DFEC;
  --pale-blue:     #B0C4DE;
  --pale-turq:     #AFEEEE;
  --blue-grey:     #B0C4D6;
  --light-aqua:    #A6D1E6;
  --ice-blue:      #AFCBEB;
  --aqua-haze:     #D9EFF9;

  --r1: var(--aqua-haze);
  --r2: var(--powder-blue);
  --r3: var(--celestial);
  --r4: var(--light-aqua);
  --r5: var(--ice-blue);
}

/* Page background — use blue atmosphere */
body {
  line-height: 1.8;
  letter-spacing: .02em;
  background:
    linear-gradient(160deg,
      color-mix(in oklab, var(--powder-blue) 35%, #fff8ff) 0%,
      color-mix(in oklab, var(--celestial) 38%, #f7faff) 45%,
      color-mix(in oklab, var(--light-aqua) 30%, #faffef) 100%),
    radial-gradient(50rem 35rem at 15% 15%, rgba(225,245,250,.6) 0%, transparent 60%),
    radial-gradient(60rem 45rem at 80% 80%, rgba(210,240,250,.45) 0%, transparent 65%),
    var(--yume-white, #fff);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

/* Loader (result) -> blue variants */
#first-visit-loader {
  background:
    radial-gradient(1200px 900px at 50% 40%, color-mix(in oklab, var(--aqua-haze) 38%, #fff) 0 50%, transparent 70%),
    linear-gradient(160deg, var(--aqua-haze), var(--celestial) 70%);
}

/* Cloud fills and strokes -> light blues */
.cloud svg .fill { fill: color-mix(in oklab, var(--aqua-haze) 60%, #fff); }
.cloud svg .stroke { stroke: var(--light-aqua); stroke-width: 1.6; }

/* Polka-dot overlay in cards -> blue */
section#cards::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .25;
  pointer-events: none;
  background-image: radial-gradient(currentColor 1px, transparent 1.5px);
  color: color-mix(in oklab, var(--celestial) 40%, var(--yume-white));
  background-size: 14px 14px;
  mix-blend-mode: multiply;
}

/* Decorative container backgrounds -> blue */
.toc-block,
.example-block,
.for_more_detail.tarot {
  background:
    radial-gradient(28rem 22rem at 8% 10%,  color-mix(in oklab, var(--celestial) 45%, transparent) 0 45%, transparent 60%),
    radial-gradient(26rem 20rem at 90% 85%, color-mix(in oklab, var(--light-aqua) 40%, transparent) 0 45%, transparent 65%),
    var(--yume-white);
  border: 1px solid color-mix(in oklab, var(--celestial) 40%, var(--yume-white));
}

/* Sparkles and star shadow -> white + blue drop-shadow */
header nav ul li a svg path { fill: #ffffff !important; }
header nav ul li a svg { filter: drop-shadow(0 3px 10px rgba(102,153,180,0.32)); }

/* Button style consistent */
.btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--celestial), var(--light-aqua), var(--powder-blue));
  color: #063547;
  border: none;
  border-radius: 50px;
  padding: 12px 28px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  margin: 0.5em;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(102,153,180,0.10);
}

/* Ensure header on result page equals index:
   - use the same blue gradient variables as style.css
   - reset nav <a> to inline icon+label (no circular white buttons) */
:root {
  /* re-declare blue palette (if not already present earlier) */
  --powder-blue:   #B0E0E6;
  --sky-mist:      #A9C6CF;
  --celestial:     #C9DFEC;
  --pale-blue:     #B0C4DE;
  --pale-turq:     #AFEEEE;
  --blue-grey:     #B0C4D6;
  --light-aqua:    #A6D1E6;
  --ice-blue:      #AFCBEB;
  --aqua-haze:     #D9EFF9;
}

/* make header use same stops as index */
header {
  --r1: var(--aqua-haze);
  --r2: var(--powder-blue);
  --r3: var(--celestial);
  --r4: var(--light-aqua);
  --r5: var(--ice-blue);
  /* keep existing header background rule from style.css (uses these vars) */
}

/* Reset nav buttons to match index (inline icon + label, transparent background) */
header nav {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
}
header nav ul { display:flex; padding:0; margin:0; list-style:none; }
header nav ul li { flex:1; display:flex; justify-content:center; }

/* override any earlier "circular button" rules */
header nav ul li a {
  width: auto !important;
  height: auto !important;
  padding: 4px 6px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  text-decoration: none !important;
  transition: transform .2s ease !important;
}

/* keep icon sizing consistent with index */
header nav ul li a img {
  width: 40px !important;
  height: auto !important;
}
@media (min-width:768px){
  header nav ul li a img { width: 54px !important; }
}

/* ensure span label styling like index */
header nav ul li a span {
  white-space: nowrap;
  font-size: clamp(12px, 1.6vw, 14px);
  font-weight: 700;
  color: var(--yume-brown) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 0 8px rgba(255,255,255,.55);
}

/* force SVG paths white + blue drop-shadow (index behavior) */
header nav ul li a svg path { fill: #ffffff !important; }
header nav ul li a svg { filter: drop-shadow(0 3px 10px rgba(102,153,180,0.32)); }

/* 詳細セクション：常に1列、中央揃え */
.details { display: flex; flex-direction: column; gap: 1.5em; align-items: center; }
.detail-section {
  text-align: center;
  width: 100%;
  max-width: 600px;
}
.detail-section p { line-height: 1.6; }

/* ===== ゆめかわ ふわふわ楕円 ===== */

#hints {
  position: relative;
  overflow: hidden;
}

/* 楕円たちをまとめる箱 */
.yume-blobs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* 楕円1つ1つ */
.yume-blobs .blob {
  position: absolute;
  width: 300px;
  height: 400px;
  background: linear-gradient(
    135deg,
    rgba(180, 240, 255, 0.7),
    rgba(190, 255, 230, 0.7)
  );
  border-radius: 60% 40% 55% 45%;
  filter: blur(2px);
  animation:
    float 12s ease-in-out infinite,
    morph 8s ease-in-out infinite;
}

/* それぞれ少しずつ位置と動きを変える */
/* それぞれ少しずつ位置と動きを変える（ランダム風） */
.yume-blobs .blob:nth-child(1) {
  top: 12%;
  left: 8%;
  animation-delay: -1.5s;
}

.yume-blobs .blob:nth-child(2) {
  top: 38%;
  left: 57%;
  animation-delay: -4.2s;
}

.yume-blobs .blob:nth-child(3) {
  top: 66%;
  left: 21%;
  animation-delay: -6.8s;
}

.yume-blobs .blob:nth-child(4) {
  top: 22%;
  left: 74%;
  animation-delay: -3.3s;
}

.yume-blobs .blob:nth-child(5) {
  top: 58%;
  left: 42%;
  animation-delay: -5.6s;
}


/* ふわふわ移動 */
@keyframes float {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(30px, -20px); }
  100% { transform: translate(0, 0); }
}

/* 形がくっついたり離れたりする感じ */
@keyframes morph {
  0% {
    border-radius: 60% 40% 55% 45%;
  }
  50% {
    border-radius: 40% 60% 35% 65%;
  }
  100% {
    border-radius: 60% 40% 55% 45%;
  }
}

/* 中の文字を前に出す */
#hints > * {
  position: relative;
  z-index: 1;
}
/* ヒント背景を少し透かして楕円を見せる */
#hints.yume-soft-bg {
  background-color: rgba(255, 255, 255, 0.85);
}
/* ヒントセクションだけ背景グラデーションを消す */
#hints.yume-soft-bg::before {
  content: none;
}
/* ヒントと次のセクションの間を広げる */
#hints {
  margin-bottom: 200em;
  margin-top: 200em;
}
#hints {
  padding-top: 200em;
  padding-bottom: 200em;
}
/* ===== hints の楕円：PC=5個 / スマホ=3個 ===== */

/* まず全体の基本サイズ（PC想定） */
#hints .yume-blobs .blob{
  width: 90px;
  height: 90px;
}

/* スマホ：4個目以降を消して、サイズも小さく */
@media (max-width: 767px){
  #hints .yume-blobs .blob{
    width: 64px;
    height: 64px;
  }

  /* 4個目以降を非表示 → 3個だけ残る */
  #hints .yume-blobs .blob:nth-child(n+4){
    display: none;
  }
}

/* ===== ヒント背景：バブル風（サイズ・位置・動きに個体差） ===== */

/* 共通：サイズは変数で決める */
#hints .yume-blobs .blob{
  width: var(--w, 90px);
  height: var(--h, 90px);
  opacity: var(--op, 0.55);
  filter: blur(2px);
  animation-duration: var(--floatD, 12s), var(--morphD, 8s);
}

/* 1〜5：PCで見える分（ランダム風の値） */
#hints .yume-blobs .blob:nth-child(1){
  --w: 120px; --h: 88px; --op: 0.55;
  top: 14%; left: 6%;
  animation-delay: -1.7s, -3.2s;
  --floatD: 13.4s; --morphD: 8.6s;
}
#hints .yume-blobs .blob:nth-child(2){
  --w: 74px; --h: 96px; --op: 0.48;
  top: 36%; left: 58%;
  animation-delay: -4.1s, -1.9s;
  --floatD: 11.2s; --morphD: 9.4s;
}
#hints .yume-blobs .blob:nth-child(3){
  --w: 98px; --h: 70px; --op: 0.52;
  top: 64%; left: 22%;
  animation-delay: -6.6s, -4.8s;
  --floatD: 14.6s; --morphD: 7.7s;
}
#hints .yume-blobs .blob:nth-child(4){
  --w: 62px; --h: 62px; --op: 0.44;
  top: 20%; left: 76%;
  animation-delay: -3.5s, -6.1s;
  --floatD: 10.8s; --morphD: 8.9s;
}
#hints .yume-blobs .blob:nth-child(5){
  --w: 132px; --h: 104px; --op: 0.50;
  top: 58%; left: 44%;
  animation-delay: -5.9s, -2.7s;
  --floatD: 15.1s; --morphD: 10.2s;
}

/* スマホ：3個だけ表示（既存ルールを維持）＋サイズもスマホ用に再ランダム */
@media (max-width: 767px){
  #hints .yume-blobs .blob:nth-child(n+4){
    display: none;
  }

  #hints .yume-blobs .blob:nth-child(1){
    --w: 86px; --h: 64px; --op: 0.55;
    top: 18%; left: 8%;
  }
  #hints .yume-blobs .blob:nth-child(2){
    --w: 58px; --h: 76px; --op: 0.48;
    top: 44%; left: 62%;
  }
  #hints .yume-blobs .blob:nth-child(3){
    --w: 92px; --h: 66px; --op: 0.52;
    top: 70%; left: 18%;
  }
}
/* ===== ヒント背景バブル：サイズを全体的に大きくする ===== */

#hints .yume-blobs .blob{
  width: calc(var(--w, 90px) * 2);
  height: calc(var(--h, 90px) * 2);
}