@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;
}

/* シェアボタン内部の整列（画像＋テキストをど真ん中に） */
.share-btn{
  display: inline-flex;         /* ボタン内をフレックス化 */
  align-items: center;          /* 縦中央 */
  justify-content: center;      /* 横中央 */
  gap: .5em;                    /* 画像と文字の間隔 */
}

/* フッター中央寄せ */
footer{
  text-align: center;
}
footer p{ margin: 0; }


/* ========== Header Nav：丸背景をなくして、イラスト＋文字のみ ========== */

/* a自体の“丸ボタン”化を上書きで解除 */
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;
  transition: transform .2s ease;
}

/* ホバー時はほんのり持ち上げる（丸枠は出さない） */
header nav ul li a:hover{
  transform: translateY(-2px);
}

/* アイコンを少し大きく・鮮やかに、でも“枠”は付けない */
header nav ul li a img{
  filter:
    drop-shadow(0 3px 8px rgba(231, 22, 144, 0.3))
    drop-shadow(0 0 6px rgba(255,255,255,.4))
    saturate(1.2) contrast(1.1);
}

@media (min-width:768px){
  header nav ul li a img{ width: 54px; }
}
header nav ul li a:hover img{
  filter: drop-shadow(0 5px 14px rgba(231, 22, 144, 0.3))
          saturate(1.25) contrast(1.15);
}
/* ラベル文字はそのまま使い、視認性だけ上げる */
header nav ul li a span{
  font-weight: 700;
  /* 背景が淡いグラデでも埋もれにくい白系のハイライト */
  text-shadow:
    0 1px 0 rgba(255,255,255,.85),
    0 0 8px rgba(255,255,255,.55);
}

.btn {
  background: linear-gradient(135deg, #ffd7f7, #e8d7ff, #d7f7ff);
  color: #5C3B34;
  border-radius: 50px;
  padding: 12px 28px;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(200,150,255,0.3);
}

.btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(200,150,255,0.5);
}


/* === レイヤー（クリックの邪魔をしない） === */
.sparkle-layer,
.cloud-layer{
  position: fixed; inset: 0;
  pointer-events: none;       /* ← ボタン操作を邪魔しない */
  z-index: 5;                 /* 必要なら数値を微調整 */
}

/* === ⭐ 星（キラキラ）=== */
/* 8角スター＋“ポップなアウトライン”を drop-shadow で多重に */
.sparkle {
  position: absolute;
  width: var(--s, 12px); height: var(--s, 12px);
  /* 星形クリップ（8角スター） */
  clip-path: polygon(50% 0%, 60% 35%, 100% 50%, 60% 65%, 50% 100%, 40% 65%, 0% 50%, 40% 35%);
  background: radial-gradient(circle at 50% 45%, #fff 0 40%, rgba(255,255,255,0) 70%);
  opacity: .95;
  /* ポップなアウトライン（淡い縁取りを重ねる） */
  filter:
    drop-shadow(0 0 2px var(--yume-white))
    drop-shadow(0 0 4px color-mix(in oklab, var(--yume-pink) 70%, transparent))
    drop-shadow(0 0 6px color-mix(in oklab, var(--yume-lav) 60%, transparent))
    drop-shadow(0 0 10px color-mix(in oklab, var(--yume-mint) 55%, transparent));
  animation: sparkleFloat var(--d, 9s) ease-in-out infinite,
             sparkleDrift calc(var(--d, 9s) * 1.1) ease-in-out infinite;
}

/* ふわ上下 */
@keyframes sparkleFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-16px) rotate(8deg); }
}
/* ゆる横ゆれ */
@keyframes sparkleDrift {
  0%,100% { margin-left: 0; }
  50%     { margin-left: 10px; }
}

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

/* === ☁️ 雲（SVGもCSSもOK）=== */
.cloud-puff{
  position: absolute;
  opacity: .9;
  animation: cloudFloat var(--cd, 8s) ease-in-out infinite;
  filter: drop-shadow(0 5px 10px rgba(242, 103, 255, 0.12));
}
@keyframes cloudFloat{
  0%,100% { transform: translateY(0) }
  50%     { transform: translateY(-12px) }
}
@media (prefers-reduced-motion: reduce){
  .cloud-puff{ animation: none; }
}

/* ☁️ 雲の透明・乗算スタイル改良 */
.cloud-puff {
  position: absolute;
  mix-blend-mode: multiply; /* ← 下の色と混ざる（乗算っぽく） */
  animation: cloudFloat var(--cd, 8s) ease-in-out infinite;
  pointer-events: none; /* ← クリックできるボタンを邪魔しない */
  transition: opacity .4s ease;
}

.cloud-puff svg path {
  fill: url(#cloudFill);
  stroke: color-mix(in oklab, var(--yume-lav) 50%, transparent);
  stroke-width: 1.6;
  opacity: 0.7;
}

/* ホバーでちょっと濃くして動きを強調（オプション） */
.cloud-puff:hover {
  opacity: 0.55;
}

/* === ゆめかわ背景（indexと同じ） === */
body {
  background:#fff
    var(--yume-white);
}

/* メインの白帯 */
.container {
  background:
  radial-gradient(60rem 40rem at -10% -10%, color-mix(in oklab, var(--yume-lav) 22%, #dcdaff) 0 40%, transparent 60%),
    radial-gradient(50rem 30rem at 110% 10%, color-mix(in oklab, var(--yume-mint) 22%, #fdffe1) 0 35%, transparent 60%),
    radial-gradient(70rem 50rem at 50% 120%, color-mix(in oklab, var(--yume-pink) 18%, #ffddfc) 0 60%, transparent 65%),
    var(--yume-white);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(180,130,255,.08);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(80rem 60rem at 50% 100%, rgba(255,247,255,0.6) 0 30%, transparent 70%);
  pointer-events: none;
}

/* さらに薄く＆下の色と自然に混ざる */
.cloud-puff{
  opacity: 0.3;              /* ← かなり薄め。0.18〜0.28がおすすめ */
  mix-blend-mode: multiply;   /* ← 乗算っぽいブレンドで透け感UP */
  position: absolute;
  pointer-events: none;
  /* 左右スライド（外側）＋ふわっと上下（内側 .cloud-body で付与） */
  animation: cloudSlide var(--slide, 28s) linear infinite alternate;
  filter: drop-shadow(0 3px 6px rgba(180,130,255,.08)); /* 影も控えめに */
  transition: opacity .3s ease;
}
/* 内側（SVG）が上下にゆらぐ：transformを分けて衝突しないようにするのがポイント */
.cloud-puff .cloud-body{
  animation: cloudFloat var(--cd, 18s) ease-in-out infinite;
}

/* 左右スライド用（外側でX方向だけ） */
@keyframes cloudSlide{
  from { transform: translateX(var(--from, -6vw)); }
  to   { transform: translateX(var(--to,    6vw)); }
}

/* 既存の上下ゆらぎ（Y方向だけ） */
@keyframes cloudFloat{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-12px); }
}


/* === ゆめかわ背景（全体にふんわり） === */
body {
  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;
}