@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:#FFD7F7;
  --yume-lav:#E8D7FF;
  --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;
      padding: 10px 20px;
      margin: 0.5em;
      background: #dbabf0;
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
      white-space: nowrap;
    }

    /* カード表示 */
    #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: 2em;     /* details との隙間 */
  margin-bottom: 3em;  /* ボタン群との隙間を広めに */
}

/* ヒントリスト自体の下余白 */
.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:#caa8ff; 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, #fef8ff);
  border-radius: 20px;
  padding: 1.2em;
  box-shadow: 0 3px 10px rgba(200, 150, 255, 0.15);
}

/* フッター */
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: #d6b7ff; stroke-width: 2; fill: none; }


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

/* 背景（白地）はナビ直下まで伸ばすが、中身はナビ下から開始 */
.result-root{
  /* 背景はヘッダーの下までかぶせたい場合は margin-top で上げない */
  margin-top: 0 !important;
  padding-top: 0 !important; /* まずリセット */
  background: #fff;
}

/* コンテンツは“内側パディング”でナビ高さぶん＋少し下げる */
.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:#ffd7f7;
  --yume-lav:#e8d7ff;
  --yume-mint:#d7f7ff;
  --yume-yellow:#fff3c9;
  --yume-line:#ead3ff;
  --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(180,130,255,.25));
  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(200,150,255,.18));
}
.yume-wave path{ fill:#fff; } /* 下のセクションと自然につなぐ */



/* === Header/Nav を index の見た目に統一（上書き用） === */
:root{
  --yume-pink:#FFD7F7;
  --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;
}

/* Make result page background match index (uses same vars as style.css) */
body {
  line-height: 1.8;
  letter-spacing: .02em;
  background:
    linear-gradient(160deg,
      color-mix(in oklab, var(--yume-pink) 35%, #fff8ff) 0%,
      color-mix(in oklab, var(--yume-lav) 40%, #f7e5ff) 45%,
      color-mix(in oklab, var(--yume-mint) 30%, #faffef) 100%),
    radial-gradient(50rem 35rem at 15% 15%, rgba(255,200,255,.4) 0%, transparent 60%),
    radial-gradient(60rem 45rem at 80% 80%, rgba(200,255,255,.35) 0%, transparent 65%),
    var(--yume-white);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}