/* =========================================================
   札幌 みどりさんぽ手帖 — v2（カード1まで実装）
   設計：375px スマホファースト／FV〜カード1まで Figma忠実再現
   ========================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Zen Maru Gothic', system-ui, sans-serif;
  color: #282772;
  /* PC版: ページ周辺にもオーロラ背景（fixed） */
  background:
    url('images/webp/imgAdobeStock7666494931.webp') center center / cover no-repeat fixed,
    #ffffff;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 0;
  overflow-x: hidden;
  position: relative;
}
/* オーロラの上に白い透過ぼんやりレイヤー（モバイル版の .page-bg-overlay と同じ仕様） */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(252, 252, 252, 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
  z-index: 0;
}
/* page を背景レイヤーより手前に */
.page { position: relative; z-index: 1; }
/* PC版の追加演出 */
@media (min-width: 768px) {
  .page {
    box-shadow: 0 0 60px rgba(40, 39, 114, 0.15);
  }
}

/* ===================== スクロールフェードイン（共通） =====================
   既存の transform: rotate(...) と衝突しないよう translate プロパティで動かす */
.fade-in {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              translate 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-in.is-visible {
  opacity: 1;
  translate: 0 0;
}
/* 女の子＋ハート は少し遅らせて「セット感」を出す */
.fade-in--together { transition-delay: 0.2s; }

/* 左からシュッと（TRAVEL GUIDE本のような横入り） */
.fade-in-left {
  opacity: 0;
  translate: -50px 0;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              translate 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-in-left.is-visible {
  opacity: 1;
  translate: 0 0;
}

/* 下からふわっと（カードのような下入り）— ゆったり */
.fade-in-up {
  opacity: 0;
  translate: 0 18px;
  /* expo-out 系：ゆーっくり減速して止まる */
  transition: opacity 1.3s cubic-bezier(0.19, 1, 0.22, 1),
              translate 1.3s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: opacity, translate;
}
.fade-in-up.is-visible {
  opacity: 1;
  translate: 0 0;
}

/* 順次入場用のディレイ（写真→カードを密に） */
.fade-in-delay-1 { transition-delay: 0.0s; }
.fade-in-delay-2 { transition-delay: 0.1s; }
.fade-in-delay-3 { transition-delay: 0.2s; }
.fade-in-delay-4 { transition-delay: 0.23s; }   /* 写真の0.03秒後にすぐ続く */
.fade-in-delay-book2 { transition-delay: 0.13s; }   /* 本の2枚目用（写真の0.2sより少し前） */
/* ページ末尾の「楽しんでね→プロフィール→メッセージ」を1つずつしっかり時差で */
.fade-in-delay-late1 { transition-delay: 0.5s; }
.fade-in-delay-late2 { transition-delay: 1.0s; }

@media (prefers-reduced-motion: reduce) {
  .fade-in-left, .fade-in-up {
    opacity: 1; translate: 0 0; transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; translate: 0 0; transition: none; }
}

/* ===================== FV ロードイン アニメーション ===================== */
/* 女の子（fv-el-8）— 右からシュッと入ってくる */
@keyframes fv-girl-in {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
.fv-el-8 {
  animation: fv-girl-in 1.0s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

/* メインタイトル雲ロゴ（fv-el-7）— ふわっとフェードイン */
@keyframes fv-title-in {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.fv-el-7 {
  animation: fv-title-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}

/* リード文 — ゆっくりふわっとフェードイン */
@keyframes fv-soft-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fv__lead {
  animation: fv-soft-in 1.6s cubic-bezier(0.22, 1, 0.36, 1) 1.0s both;
}

@media (prefers-reduced-motion: reduce) {
  .fv-el-8, .fv-el-7, .fv__lead {
    animation: none;
  }
}

/* ===================== 風船だけふわふわアニメーション =====================
   translate プロパティを使えば既存の transform:rotate(...) を壊さない */
img[src*="ChatGptImage20266812030561"],
img[src*="ChatGptImage20266812030672"],
img[src*="ChatGptImage20266812030432"],
img[src*="ChatGptImage20266812030441"],
img[src*="ChatGptImage2026680910471"],
img[src*="ChatGptImage2026680925392"],
img[src*="ChatGptImage2026680925431"] {
  animation: balloon-float 5s ease-in-out infinite;
}
/* 揺らぎを自然にするため、要素ごとに少しずつズラす（タイミング） */
img[src*="ChatGptImage20266812030672"] { animation-duration: 6s;   animation-delay: -1.2s; }
img[src*="ChatGptImage20266812030432"] { animation-duration: 4.5s; animation-delay: -0.8s; }
img[src*="ChatGptImage20266812030441"] { animation-duration: 5.5s; animation-delay: -0.4s; }
/* 風船の束は少し大きくゆったり */
img[src*="ChatGptImage2026680910471"] { animation-duration: 6.5s; animation-delay: -0.6s; }
img[src*="ChatGptImage2026680925392"] { animation-duration: 7s;   animation-delay: -1.8s; }
img[src*="ChatGptImage2026680925431"] { animation-duration: 6.2s; animation-delay: -2.4s; }

@keyframes balloon-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -12px; }
}
@media (prefers-reduced-motion: reduce) {
  img[src*="ChatGptImage20266812030561"],
  img[src*="ChatGptImage20266812030672"],
  img[src*="ChatGptImage20266812030432"],
  img[src*="ChatGptImage20266812030441"] {
    animation: none;
  }
}

/* ===================== PC版・左右散りばめ装飾 ===================== */
.pc-deco {
  display: none;
  pointer-events: none;
}
.pc-deco__item {
  position: fixed;
  display: block;
  pointer-events: none;
  z-index: 0;
  opacity: 0.75;
  filter: drop-shadow(0 4px 12px rgba(40, 39, 114, 0.08));
}
@media (min-width: 768px) {
  .pc-deco { display: block; }

  /* === 左側散りばめ（page = 中央375px の左側、calc(50% - 187.5px) 基準） === */
  .pc-deco--l1 { top:  60px; left: calc(50% - 360px); width: 90px; transform: rotate(-12deg); }
  .pc-deco--l2 { top: 220px; left: calc(50% - 440px); width: 70px; transform: rotate(18deg); }
  .pc-deco--l3 { top: 340px; left: calc(50% - 290px); width: 110px; transform: rotate(-8deg); }
  .pc-deco--l4 { top: 520px; left: calc(50% - 480px); width: 80px; transform: rotate(25deg); }
  .pc-deco--l5 { top:  10px; left: calc(50% - 550px); width: 130px; transform: rotate(-20deg); }
  .pc-deco--l6 { top: 440px; left: calc(50% - 380px); width: 60px; transform: rotate(15deg); }
  .pc-deco--l7 { top: 660px; left: calc(50% - 420px); width: 55px; transform: rotate(-30deg); }
  .pc-deco--l8 { top: 140px; left: calc(50% - 280px); width: 100px; transform: rotate(8deg); opacity: 0.55; }

  /* === 右側散りばめ === */
  .pc-deco--r1 { top:  50px; left: calc(50% + 230px); width: 100px; transform: rotate(10deg); }
  .pc-deco--r2 { top: 190px; left: calc(50% + 360px); width: 130px; transform: rotate(-15deg); }
  .pc-deco--r3 { top: 330px; left: calc(50% + 280px); width: 60px; transform: rotate(28deg); }
  .pc-deco--r4 { top: 480px; left: calc(50% + 240px); width: 90px; transform: rotate(-10deg); }
  .pc-deco--r5 { top:  20px; left: calc(50% + 480px); width: 80px; transform: rotate(20deg); }
  .pc-deco--r6 { top: 600px; left: calc(50% + 340px); width: 70px; transform: rotate(-22deg); }
  .pc-deco--r7 { top: 410px; left: calc(50% + 440px); width: 95px; transform: rotate(12deg); }
  .pc-deco--r8 { top: 230px; left: calc(50% + 250px); width: 90px; transform: rotate(-8deg); opacity: 0.55; }
}
@media (min-width: 1280px) {
  /* もっと広い PC では装飾の距離を広げる */
  .pc-deco--l5 { left: calc(50% - 620px); }
  .pc-deco--l7 { left: calc(50% - 500px); }
  .pc-deco--r5 { left: calc(50% + 540px); }
  .pc-deco--r7 { left: calc(50% + 500px); }
}

.page {
  width: 375px;
  margin: 0 auto;
  position: relative;
  background: #fff;
  overflow: hidden;
}

/* ===================== ページ全体の背景（AdobeStock を 11箇所・交互シフト） ===================== */
.page-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.page-bg-img {
  position: absolute;
  width: 1909px;
  height: 764px;
  object-fit: cover;
}
/* 奇数（1,3,5...）= 大きく左にシフト → 画像の右側が見える */
.bg-1  { top:  -11px; left: -1022px; }
.bg-3  { top: 1516px; left: -1010px; }
.bg-5  { top: 3039px; left: -1010px; }
.bg-7  { top: 4567px; left: -1010px; }
.bg-9  { top: 6095px; left: -1011px; }
.bg-11 { top: 7623px; left: -1172px; }
/* 偶数（2,4,6...）= ほぼ左端 → 画像の左側が見える（鏡像のような効果） */
.bg-2  { top:  752px; left:   -13px; }
.bg-4  { top: 2279px; left:   -39px; }
.bg-6  { top: 3803px; left:   -56px; }
.bg-8  { top: 5331px; left:   -56px; }
.bg-10 { top: 6859px; left:   -34px; }
/* 全体に白霞オーバーレイ */
.page-bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(252, 252, 252, 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ===================== FV ===================== */
.fv {
  position: absolute;
  top: 0;
  left: 0;
  width: 375px;
  height: 800px;
  overflow: hidden;
  z-index: 2;
}

/* FV専用の白霞オーバーレイ（Figma 11:106 と同じ：rgba(252,252,252,0.4) + blur 3px） */
.fv__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;                  /* 背景の上、装飾より下 */
  background: rgba(252, 252, 252, 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
}

/* fv-el--bg はページ背景に移行したので非表示（重複防止） */
.fv-el--bg { display: none; }

.fv__lead {
  position: absolute;
  left: 0; right: 0;
  top: 413px;
  z-index: 10;
  text-align: center;
  color: #282772;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  pointer-events: none;
}
.fv__lead p { margin: 0; }

.fv-el {
  position: absolute;
  display: block;
  pointer-events: none;
}
.fv-el img { display: block; width: 100%; height: 100%; }

/* .fv-el--bg はページ背景に統合（display:none を上で指定済） */
.fv-el--rect {
  z-index: 3; object-fit: cover;
  box-shadow: 0 0 30px 2px #cfe1c3;
}
.fv-el--deco { z-index: 4; object-fit: contain; }
.fv-el--el { z-index: 4; overflow: visible; }
.fv-el--el img {
  transform: scale(var(--inset-scale, 1));
  transform-origin: center;
}
.fv-el--title { z-index: 9; object-fit: contain; }

.fv-el-1  { top: -59.0px; left: 249.0px; width: 186.0px; height: 247.0px; }
.fv-el-2  { top: -40.0px; left: -36.0px; width: 113.0px; height: 113.0px; }
.fv-el-3  { top: -25.0px; left: 225.0px; width:  83.0px; height:  83.0px; }
.fv-el-4  { top: -11.0px; left:-1022.0px; width:1909.0px; height: 764.0px; }
.fv-el-5  { top:  -5.0px; left: -20.0px; width:  83.0px; height:  83.0px; }
.fv-el-6  { top:   8.0px; left: 325.0px; width:  50.0px; height:  50.0px; }
.fv-el-7  { top:  29.0px; left:   6.0px; width: 229.0px; height: 129.0px; }
.fv-el-8  { top:  33.0px; left: 208.0px; width: 177.0px; height: 236.0px; }
.fv-el-9  { top:  36.0px; left: 309.0px; width:  31.0px; height:  31.0px; }
.fv-el-10 { top: 104.0px; left: 190.0px; width:  65.0px; height:  65.0px; }
.fv-el-11 { top: 116.0px; left: -43.0px; width: 138.0px; height: 138.0px; }
.fv-el-12 { top: 145.0px; left: -24.0px; width: 100.0px; height: 100.0px; --inset-scale: 1.103; }
.fv-el-13 { top: 145.0px; left: 188.0px; width: 187.0px; height: 187.0px; --inset-scale: 1.048; }
.fv-el-14 { top: 165.0px; left:   0.0px; width: 375.0px; height: 200.0px; }
.fv-el-15 { top: 169.0px; left:  18.0px; width: 100.0px; height: 100.0px; --inset-scale: 1.115; }
.fv-el-16 { top: 235.0px; left:   5.0px; width:  63.0px; height:  63.0px; --inset-scale: 1.146; }
.fv-el-17 { top: 279.0px; left: 282.0px; width: 103.0px; height: 103.0px; --inset-scale: 1.086; }
.fv-el-18 { top: 282.0px; left:  -6.0px; width: 100.0px; height: 100.0px; --inset-scale: 1.089; }
.fv-el-19 { top: 296.0px; left: -28.0px; width: 104.0px; height: 104.0px; }
.fv-el-20 { top: 308.0px; left: 261.0px; width:  51.0px; height:  51.0px; --inset-scale: 1.175; }
.fv-el-21 { top: 370.0px; left: 325.0px; width:  50.0px; height:  50.0px; }
.fv-el-22 { top: 640.0px; left: 295.0px; width:  83.0px; height: 111.0px; }
.fv-el-23 { top: 647.0px; left: -19.0px; width: 107.0px; height: 107.0px; }
.fv-el-24 { top: 679.0px; left: 135.0px; width: 105.0px; height: 140.0px; }
.fv-el-25 { top: 729.0px; left:  54.0px; width:  76.0px; height:  76.0px; }
.fv-el-26 { top: 742.0px; left:  45.0px; width:  51.0px; height:  51.0px; }
/* リード文左のピンクハート風船セット（右に少し寄せた：left -78 → -45） */
.fv-el-29 { top: 359.0px; left: -45.0px; width: 170.0px; height: 226.0px; transform: rotate(10.33deg); }
/* レインボーリボン（FV左、top:241） */
.fv-el-30 { top: 241.0px; left: -58.0px; width:  96.4px; height:  96.4px; transform: rotate(22.81deg); }
/* 右上の小装飾 */
.fv-el-31 { top:   8.0px; left: 194.0px; width:  51.0px; height:  51.0px; transform: rotate(-23.12deg); }
/* 右上のキラキラ装飾（右に少し寄せた：left 299.3 → 320） */
.fv-el-32 { top:  50.5px; left: 320.0px; width:  81.6px; height:  81.6px; transform: rotate(38.97deg); }
.fv-el-33 { top:  11.0px; left: 282.0px; width:  41.9px; height:  41.9px; transform: rotate(-17.77deg); }
.fv-el-34 { top: 432.6px; left: 296.1px; width: 124.3px; height: 165.8px; transform: rotate(-6.57deg); }
.fv-el-35 { top: 730.4px; left:  18.4px; width:  41.9px; height:  41.9px; transform: rotate(-17.77deg); }
.fv-el-36 { top: 577.3px; left:  14.3px; width:  52.1px; height:  52.1px; transform: rotate(10.45deg); }
.fv-el-37 { top: 785.9px; left: 243.9px; width:  57.0px; height:  57.0px; transform: rotate(-27.48deg); }

/* ===================== 目次セクション（Figmaコード py-26 pl-57 pr-130） ===================== */
.toc {
  position: absolute;
  top: 788px;
  left: 0;
  width: 375px;
  height: 184px;         /* Figma の Frame31 と同じ高さ */
  padding: 26px 130px 26px 57px;
  box-sizing: border-box;
  z-index: 5;
}
/* 目次帯：白格子の画像（imgFrame31・フラット化版） */
.toc__bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 184px;
  background-image: url('images/webp/imgFrame31.webp');
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid #595959;
  pointer-events: none;
}
.toc__list {
  position: relative;
  margin: 0; padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.0;            /* Figma leading-[0] 相当 */
  letter-spacing: 0.42px;
  color: #101010;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 188px;
}
.toc__list li { margin: 0; line-height: 1.4; }
.toc__num { font-weight: 700; margin-right: 4px; }
.toc__guidebook {
  position: absolute;
  /* page基準座標：top:814, left:250（女の子は目次の上＝top値が大きい方ではなく z-indexで手前） */
  left: 250px;
  top: 26px;
  width: 154px;
  height: 205px;
  object-fit: contain;
  pointer-events: none;
  z-index: 9;                  /* 目次の文字より手前に */
}

/* ===================== カードセクション（共通） ===================== */
.card-section {
  position: absolute;   /* page基準で絶対配置（pd-c1-* のtop値をpage基準にするため） */
  top: 0;
  left: 0;
  width: 375px;
}

/* ページ全体に絶対配置する周辺装飾 */
.page-deco {
  position: absolute;
  display: block;
  pointer-events: none;
  z-index: 6;
}
.page-deco--bg { z-index: 0; opacity: 0.5; }

/* カード1周辺装飾の座標（top基準＝page全体） */
.pd-c1-1  { top:  808.2px; left: 283.2px; width:  28.8px; height:  28.8px; transform: rotate(10.03deg); }
/* オレンジ&グリーンのTRAVEL GUIDE ポストカード — Figma準拠2層構造（wrapper + 中の画像が回転） */
.pd-c1-3-wrap {
  top: 978.0px; left: -3.0px;
  width: 175.227px; height: 218.145px;
  display: flex; align-items: center; justify-content: center;
  z-index: 6;
}
.pd-c1-3-inner {
  width: 150px; height: 200px;
  transform: rotate(7.63deg);
  border-radius: 10px;
  display: block;
  pointer-events: none;
}
.pd-c1-4-wrap {
  top: 998.0px; left: -55.0px;
  width: 196.653px; height: 232.008px;
  display: flex; align-items: center; justify-content: center;
  z-index: 6;
}
.pd-c1-4-inner {
  width: 150px; height: 200px;
  transform: rotate(15deg);
  border-radius: 10px;
  display: block;
  pointer-events: none;
}

/* ===================== カード2 周辺装飾 ===================== */
/* オレンジ&グリーンのポストカード（カード2 上） — Figma 2層構造 */
.pd-c2-1-wrap {
  top: 2467.0px; left: -15.0px;
  width: 175.753px; height: 218.505px;
  display: flex; align-items: center; justify-content: center;
  z-index: 6;
}
.pd-c2-1-inner {
  width: 150px; height: 200px;
  transform: rotate(7.8deg);
  border-radius: 10px;
  display: block;
  pointer-events: none;
}
.pd-c2-2-wrap {
  top: 2488.0px; left: -67.0px;
  width: 197.044px; height: 232.244px;
  display: flex; align-items: center; justify-content: center;
  z-index: 6;
}
.pd-c2-2-inner {
  width: 150px; height: 200px;
  transform: rotate(15.15deg);
  border-radius: 10px;
  display: block;
  pointer-events: none;
}

.pd-c2-3  { top: 2550.0px; left: 265.0px; width:  93.0px; height:  93.0px; }
.pd-c2-4  { top: 2668.0px; left: 122.0px; width: 104.0px; height: 104.0px; }
.pd-c2-5  { top: 2679.0px; left:  11.0px; width:  83.0px; height:  83.0px; }
.pd-c2-6  { top: 2720.0px; left: 298.0px; width:  52.1px; height:  52.1px; transform: rotate(10.4deg); }
.pd-c2-7  { top: 2894.0px; left: 287.0px; width:  50.0px; height:  50.0px; }
.pd-c2-8  { top: 2973.0px; left: 237.0px; width: 138.0px; height: 138.0px; }
.pd-c2-9  { top: 2982.0px; left:  37.7px; width:  31.0px; height:  31.0px; }
.pd-c2-10 { top: 2996.5px; left:  28.0px; width:  81.6px; height:  81.6px; transform: rotate(39deg); }
/* AdobeStock 背景は page-bg に統合済みなので非表示 */
.pd-c2-11 { display: none; }

/* ===================== カード2(残り) ・ カード3 ・ カード4 散りばめ装飾 ===================== */
.pd-c2-12 { top: 3188.0px; left: 268.0px; width: 93.0px; height: 93.0px; }
.pd-c2-13 { top: 3317.0px; left: 14.0px; width: 83.0px; height: 83.0px; }
.pd-c2-14 { top: 3358.0px; left: 301.0px; width: 52.1px; height: 52.1px; transform: rotate(10.45deg); }
.pd-c2-15 { top: 3459.0px; left: 158.0px; width: 50.0px; height: 50.0px; }
.pd-c2-16 { top: 3484.0px; left: 152.0px; width: 138.0px; height: 138.0px; }
.pd-c2-17 { top: 3532.0px; left: 290.0px; width: 50.0px; height: 50.0px; }
/* カード2下の猫ちゃん・ボール・リボン — カードより手前、文字とぶつからないよう60px下げ */
.pd-c2-18 { top: 3794.0px; left: 259.0px; width: 133.0px; height: 177.0px; z-index: 9; }
.pd-c2-19 { top: 3800.0px; left: -31.0px; width: 104.0px; height: 104.0px; z-index: 9; }
.pd-c2-20 { top: 3800.0px; left: 40.7px; width: 31.0px; height: 31.0px; z-index: 9; }
.pd-c2-21 { top: 3814.5px; left: 31.0px; width: 81.6px; height: 81.6px; transform: rotate(38.97deg); z-index: 9; }
/* カード3前のTRAVEL GUIDE本2枚 — 60px下げ＋角丸10px */
.pd-c2-22 { top: 3935.0px; left: -15.0px; width: 150.0px; height: 200.0px; transform: rotate(7.79deg); border-radius: 10px; }
.pd-c2-23 { top: 3956.0px; left: -67.0px; width: 150.0px; height: 200.0px; transform: rotate(15.00deg); border-radius: 10px; }
.pd-c3-1 { top: 4036.0px; left: 260.0px; width: 41.9px; height: 41.9px; transform: rotate(-17.77deg); }
.pd-c3-2 { top: 4040.0px; left: 301.0px; width: 76.0px; height: 76.0px; }
.pd-c3-3 { top: 4053.0px; left: 292.0px; width: 51.0px; height: 51.0px; }
.pd-c3-4 { top: 4089.0px; left: 158.0px; width: 83.0px; height: 83.0px; }
.pd-c3-5 { display: none; }
.pd-c3-6 { top: 4148.0px; left: 212.0px; width: 204.4px; height: 272.5px; transform: rotate(-8.49deg); }
.pd-c3-7 { top: 4163.0px; left: -55.0px; width: 96.4px; height: 96.4px; transform: rotate(22.81deg); }
.pd-c3-8 { top: 4218.0px; left: -25.0px; width: 104.0px; height: 104.0px; }
.pd-c3-9 { top: 4371.0px; left: 254.0px; width: 93.0px; height: 93.0px; }
.pd-c3-10 { top: 4489.0px; left: 111.0px; width: 104.0px; height: 104.0px; }
.pd-c3-11 { top: 4500.0px; left: 0.0px; width: 83.0px; height: 83.0px; }
.pd-c3-12 { top: 4541.0px; left: 287.0px; width: 52.1px; height: 52.1px; transform: rotate(10.45deg); }
.pd-c3-13 { top: 4715.0px; left: 276.0px; width: 50.0px; height: 50.0px; }
.pd-c3-14 { top: 4794.0px; left: 226.0px; width: 138.0px; height: 138.0px; }
.pd-c3-15 { top: 4803.0px; left: 26.7px; width: 31.0px; height: 31.0px; }
.pd-c3-16 { top: 4817.5px; left: 17.0px; width: 81.6px; height: 81.6px; transform: rotate(38.97deg); }
.pd-c3-17 { display: none; }
.pd-c3-18 { top: 5011.0px; left: 252.0px; width: 93.0px; height: 93.0px; }
/* カード3下の女の子とボールセット — 女の子と左ボールは手前、ハートと中央ボールはカードの裏 */
.pd-c3-19 { top: 5339.0px; left: 184.0px; width: 230.0px; height: 307.0px; z-index: 9; }   /* 女の子（手前） */
.pd-c3-20 { top: 5600.0px; left: 109.0px; width: 104.0px; height: 104.0px; z-index: 4; }   /* 水色バブル — 女の子の足元へ */
.pd-c3-21 { top: 5370.0px; left: -34.0px; width: 104.0px; height: 104.0px; z-index: 9; }   /* 左のボール（手前） */
.pd-c3-22 { top: 5380.0px; left:  -2.0px; width:  83.0px; height:  83.0px; z-index: 4; }   /* ハート（カードの裏） */
.pd-c3-23 { top: 5181.0px; left: 285.0px; width: 52.1px; height: 52.1px; transform: rotate(10.45deg); }
/* 小さい紫風船 — 女の子の足元（女の子 top:4919, h:307 → 足元 ≈ 5180） */
.pd-c3-24 { top: 5630.0px; left: 274.0px; width: 50.0px; height: 50.0px; }   /* 水色バブル — 女の子の足元へ */
.pd-c3-25 { top: 5599.0px; left: -16.0px; width: 150.0px; height: 200.0px; transform: rotate(8.18deg); border-radius: 10px; }
.pd-c3-26 { top: 5621.0px; left: -67.0px; width: 150.0px; height: 200.0px; transform: rotate(15.00deg); border-radius: 10px; }
.pd-c3-27 { top: 5434.0px; left: 224.0px; width: 138.0px; height: 138.0px; }
.pd-c3-28 { top: 5443.0px; left: 24.7px; width: 31.0px; height: 31.0px; }
.pd-c3-29 { top: 5457.5px; left: 15.0px; width: 81.6px; height: 81.6px; transform: rotate(38.97deg); }
.pd-c4-1 { display: none; }
.pd-c4-2 { top: 5954.0px; left: 268.0px; width: 93.0px; height: 93.0px; }
.pd-c4-3 { top: 6083.0px; left: 14.0px; width: 83.0px; height: 83.0px; }
.pd-c4-4 { top: 6124.0px; left: 301.0px; width: 52.1px; height: 52.1px; transform: rotate(10.45deg); }
.pd-c4-5 { top: 6225.0px; left: 158.0px; width: 50.0px; height: 50.0px; }
.pd-c4-6 { top: 6250.0px; left: 152.0px; width: 138.0px; height: 138.0px; }
.pd-c4-7 { top: 6298.0px; left: 290.0px; width: 50.0px; height: 50.0px; }
.pd-c4-8 { top: 6386.0px; left: 40.7px; width: 31.0px; height: 31.0px; }
.pd-c4-9 { top: 6400.5px; left: 31.0px; width: 81.6px; height: 81.6px; transform: rotate(38.97deg); }
.pd-c4-10 { top: 6578.0px; left: 260.0px; width: 93.0px; height: 93.0px; }
.pd-c4-11 { display: none; }
.pd-c4-12 { top: 6696.0px; left: 117.0px; width: 104.0px; height: 104.0px; }
.pd-c4-13 { top: 6707.0px; left: 6.0px; width: 83.0px; height: 83.0px; }
.pd-c4-14 { top: 6748.0px; left: 293.0px; width: 52.1px; height: 52.1px; transform: rotate(10.45deg); }
/* カード4下のセット（左ボール・女の子・プレゼント・足元ボール）— 165px下げ、カードの手前 */
.pd-c4-15 { top: 7083.0px; left: -31.0px; width: 104.0px; height: 104.0px; z-index: 9; }
.pd-c4-16 { top: 7088.0px; left: 200.0px; width: 214.0px; height: 285.0px; z-index: 9; }
.pd-c4-17 { top: 6922.0px; left: 282.0px; width: 50.0px; height: 50.0px; }
.pd-c4-18 { top: 7254.0px; left: 88.0px; width: 133.0px; height: 133.0px; z-index: 9; }
.pd-c4-19 { top: 7266.0px; left: 232.0px; width: 138.0px; height: 138.0px; z-index: 8; }  /* 女の子(9)の背後、カード(7)の手前 */
.pd-c4-20 { top: 7010.0px; left: 32.7px; width: 31.0px; height: 31.0px; }
.pd-c4-21 { top: 7024.5px; left: 23.0px; width: 81.6px; height: 81.6px; transform: rotate(38.97deg); }
.pd-c4-22 { top: 7278.0px; left: 268.0px; width: 93.0px; height: 93.0px; }
.pd-c4-23 { top: 7407.0px; left: 14.0px; width: 83.0px; height: 83.0px; }
.pd-c4-24 { display: none; }
.pd-c4-25 { top: 7448.0px; left: 301.0px; width: 52.1px; height: 52.1px; transform: rotate(10.45deg); }
.pd-c4-26 { top: 7549.0px; left: 158.0px; width: 50.0px; height: 50.0px; }
/* node 35:55178 紫風船・node 35:55172 紫透明バブル — カードより後ろ、ハートより後ろ */
.pd-c4-27 { top: 7820.0px; left: 152.0px; width: 138.0px; height: 138.0px; z-index: 4; }   /* 中央紫風船 */
/* pd-c4-28 = 左の紫風船。footer-deco-1 と重複するため非表示 */
.pd-c4-28 { display: none; }
.pd-c4-29 { top: 7860.0px; left: 320.0px; width:  50.0px; height:  50.0px; z-index: 10; }   /* 小さい紫風船 — ハート風船の右上、最前面で見える */
/* pd-c4-30 = ハート風船。footer-deco-3 と重複するため非表示 */
.pd-c4-30 { display: none; }
/* pd-c4-31 = 「楽しんでね」雲ロゴ。おまけセクションの裏に重複していたので非表示 */
.pd-c4-31 { display: none; }
/* node 35:55175 小さい星・35:55174 リボン — 「楽しんでね」雲ロゴの左上、雲ロゴの背後 */
.pd-c4-32 { top: 7950.0px; left: 40.7px; width: 31.0px; height: 31.0px; z-index: 5; }   /* 星 — 雲ロゴ周辺へ */
.pd-c4-33 { top: 7964.5px; left: 31.0px; width: 81.6px; height: 81.6px; transform: rotate(38.97deg); z-index: 5; }   /* リボン — 雲ロゴ周辺へ */
/* pd-c4-34 = グラデ画像。footer-gradient と重複するため非表示 */
.pd-c4-34 { display: none; }
.pd-c4-35 { display: none; }

/* プレゼントボックスの左側の星（Figma 元 top:6450 + プレゼントセットと同じシフト +295 = 6745） */
.pd-c4-star { top: 7325.0px; left: 32.71px; width: 31.0px; height: 31.0px; z-index: 9; }

/* ===================== おまけ：さんぽの持ち物メモ ===================== */
.extras {
  position: absolute;
  top: 7409.0px;       /* Figma top:6589 + 130 (カードセクションシフト) */
  left: 9px;
  width: 356px;
  padding: 32px 12px;
  border: 1px solid #595959;
  border-radius: 20px;
  background-size: 355px auto;
  background-position: top left;
  background-repeat: repeat-y;
  background-color: rgba(255,255,255,0.85);
  z-index: 7;
}
.extras__deco-1 {
  position: absolute;
  top: -40px; left: -36px;
  width: 113px; height: 113px;
  pointer-events: none;
  z-index: 2;
}
.extras__deco-2-wrap {
  position: absolute;
  top: -89.5px; left: 211px;
  width: 227.214px; height: 264.992px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  z-index: 2;
}
.extras__deco-2-inner {
  width: 170px; height: 226px;
  transform: rotate(-16.51deg);
  border-radius: 10px;
  display: block;
}
.extras__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.extras__hero {
  display: block;
  width: 280px;
  height: 120px;
  object-fit: contain;
}
.extras__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #101010;
  width: 100%;
}
.extras__lead {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.42px;
  margin: 0;
  line-height: 1.5;
}
.extras__list {
  margin: 0; padding: 0;
  list-style: none;
  font-size: 12px;
  letter-spacing: 0.36px;
  line-height: 1.8;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.extras__list li { margin: 0; }
.extras__bottom {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.42px;
  line-height: 1.5;
  text-align: center;
}

/* ===================== みおさん全身イラスト（大画像）— Figma位置・最前面 ===================== */
.enjoy-banner {
  position: absolute;
  top: 8131.0px;       /* Figma本来の位置（雲ロゴと少し重なる配置） */
  left: 0;
  width: 375px;
  height: 211px;
  object-fit: contain;
  object-position: center;
  z-index: 8;          /* 背景グラデ(z:4)より前 */
  pointer-events: none;
}

/* ===================== フッター装飾（復活：「楽しんでね」雲ロゴ＋紫風船＋キラキラ星） ===================== */
.footer-deco-1 {
  /* 左の紫風船（リボン付き）— カードの手前、一番上 */
  position: absolute;
  top: 7845.0px; left: -53px;
  width: 141px; height: 141px;
  z-index: 10;
  pointer-events: none;
}
.footer-deco-2-wrap {
  /* 「みどりのさっぽろを楽しんでね」雲ロゴ — 最前面 */
  position: absolute;
  top: 7966.0px; left: -15px;
  width: 319.062px; height: 217.784px;
  display: flex; align-items: center; justify-content: center;
  z-index: 11;
  pointer-events: none;
}
.footer-deco-2-inner {
  width: 293px; height: 165px;
  transform: rotate(-10.98deg);
  display: block;
}
.footer-deco-3 {
  /* ハート風船 — 紫風船・バブルより手前 */
  position: absolute;
  top: 7891.0px; left: 215px;
  width: 184px; height: 184px;
  z-index: 9;
  pointer-events: none;
}

.footer-gradient {
  /* 紫→ピンクのグラデ。上に上げて message セクションにピンクが広く広がるように */
  position: absolute;
  top: 8210.0px; left: -5px;
  width: 383px; height: 600px;
  object-fit: fill;
  z-index: 4;
  pointer-events: none;
}

/* ===================== プロフィールカード（グラスモーフィズム・透明感＋立体感） ===================== */
.profile {
  position: absolute;
  top: 8316.0px;
  left: 10px;
  width: 355px;
  padding: 32px 15px;
  border-radius: 30px;
  /* もっと透明に + すりガラス感を抑える */
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  /* 上のガラスの縁が光るような border */
  border: 1.2px solid rgba(255, 255, 255, 0.6);
  /* 立体感：外側に深い影 + 内側上端のハイライト + 下端のさりげない影 */
  box-shadow:
    0 14px 36px rgba(31, 38, 135, 0.18),
    0 4px 10px rgba(31, 38, 135, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2);
  overflow: hidden;
  z-index: 8;
}
.profile__main {
  display: flex;
  gap: 24px;
  align-items: center;
  width: 100%;
}
.profile__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 208px;
  color: #101010;
}
.profile__intro {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.3px;
  line-height: 1.8;
}
.profile__name {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.48px;
  line-height: 1;
}
.profile__role {
  margin: 0;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.33px;
  line-height: 1.5;
}
/* ===================== プロフィールカードのリンクボタン =====================
   案A: キラっと光が走る + 矢印が呼吸 + タップで矢印シュッ */
.profile__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 18px 4px 10px;
  border: 0.6px solid #595959;
  border-radius: 100px;
  color: #595959;
  text-decoration: none;
  font-size: 10px;
  letter-spacing: 0.3px;
  line-height: 1.8;
  white-space: nowrap;
  background: rgba(255,255,255,0.5);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* キラキラ（白い小さな点）が border の上を 3秒に1回プチっと光る */
.profile__btn::before,
.profile__btn::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow:
    0 0 4px #ffffff,
    0 0 8px rgba(255, 255, 255, 0.8);
  opacity: 0;
  pointer-events: none;
}
/* 1つ目: 上端右寄り。3秒周期で1回光る */
.profile__btn::before {
  top: -1.5px;
  left: 72%;
  animation: btn-sparkle 3s ease-in-out infinite;
}
/* 2つ目: 下端左寄り。タイミングをずらす */
.profile__btn::after {
  bottom: -1.5px;
  left: 28%;
  animation: btn-sparkle 3s ease-in-out 1.5s infinite;
}
@keyframes btn-sparkle {
  0%, 80%, 100% { opacity: 0; transform: scale(0.4); }
  85%, 92%      { opacity: 1; transform: scale(1.3); }
}

/* 矢印: 常時 ±2px の呼吸 */
.profile__btn-arrow {
  width: 12px; height: 12px;
  display: block;
  animation: btn-arrow-breath 2.4s ease-in-out infinite;
  /* ふーっとゆったり滑らかに右へ */
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes btn-arrow-breath {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(2px); }
}

/* hover時: ボタン全体が少し大きくなる + 矢印が右に動く */
.profile__btn:hover,
.profile__btn:focus-visible {
  transform: scale(1.06);
}
.profile__btn:hover .profile__btn-arrow,
.profile__btn:focus-visible .profile__btn-arrow {
  animation: none;
  transform: translateX(6px);
}

/* タップ時: ボタンは少し縮んで押し込み感 + 矢印はさらに右に */
.profile__btn:active {
  transform: scale(1.0);
}
.profile__btn:active .profile__btn-arrow {
  animation: none;
  transform: translateX(8px);
}

@media (prefers-reduced-motion: reduce) {
  .profile__btn::before, .profile__btn::after,
  .profile__btn-arrow { animation: none; }
}
.profile__avatar {
  width: 94px; height: 94px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ===================== Webデザイナーの仲間たちへ ===================== */
.message {
  position: absolute;
  top: 8507.5px;       /* プロフィールカード下端(7979.5) + 18px */
  left: 10px;
  width: 355px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #101010;
  z-index: 7;
}
.message__title {
  margin: 0;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.36px;
  line-height: 1.8;
}
.message__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 11px;
  letter-spacing: 0.33px;
  line-height: 1.8;
}
.message__body p { margin: 0; }
.pd-c1-5  { top: 1214.0px; left: 296.0px; width:  41.9px; height:  41.9px; transform: rotate(-17.77deg); }
.pd-c1-6  { top: 1218.0px; left: 337.0px; width:  76.0px; height:  76.0px; }
.pd-c1-7  { top: 1231.0px; left: 328.0px; width:  51.0px; height:  51.0px; }
.pd-c1-8  { top: 1267.0px; left: 194.0px; width:  83.0px; height:  83.0px; }
.pd-c1-9  { top: 1341.0px; left: -19.0px; width:  96.4px; height:  96.4px; transform: rotate(22.81deg); }
.pd-c1-10 { top: 1396.0px; left:  11.0px; width: 104.0px; height: 104.0px; }
.pd-c1-11 { top: 1480.0px; left: 265.0px; width:  93.0px; height:  93.0px; }
/* 旧 .pd-c1-12 はページ背景に統合されたので非表示 */
.pd-c1-12 { display: none; }

/* 女の子の左上のハート（fv-el-37 から移行・page基準絶対座標） */
.pd-heart-1 {
  top: 785.9px; left: 243.9px;
  width: 57px; height: 57px;
  transform: rotate(-27.48deg);
  z-index: 8;
}

/* 紫のTRAVEL GUIDE本（リード文の下、目次の手前） */
.pd-purple-book {
  position: absolute;
  top: 679px; left: 135px;
  width: 105px; height: 140px;
  z-index: 7;        /* .toc(5) より手前、女の子(.toc 内 z-index 9) より後ろ */
  pointer-events: none;
}

/* （pd-book-1, pd-book-2 は誤実装。削除済み・pd-c1-3, pd-c1-4 の元位置に戻した） */
.pd-c1-13 { top: 1609.0px; left:  11.0px; width:  83.0px; height:  83.0px; }
.pd-c1-14 { top: 1650.0px; left: 298.0px; width:  52.1px; height:  52.1px; transform: rotate(10.45deg); }
.pd-c1-15 { top: 1751.0px; left: 155.0px; width:  50.0px; height:  50.0px; }
.pd-c1-16 { top: 1776.0px; left: 149.0px; width: 138.0px; height: 138.0px; }
.pd-c1-17 { top: 1824.0px; left: 287.0px; width:  50.0px; height:  50.0px; }
.pd-c1-18 { top: 1912.0px; left:  37.7px; width:  31.0px; height:  31.0px; }
.pd-c1-19 { top: 1926.5px; left:  28.0px; width:  81.6px; height:  81.6px; transform: rotate(38.97deg); }
/* 右下の女の子と左下のボール — カードより手前のレイヤーに（文章とぶつからないよう40px下げ） */
.pd-c1-20 { top: 2252.0px; left: 205.0px; width: 214.0px; height: 285.0px; z-index: 9; }
.pd-c1-21 { top: 2357.0px; left: -33.0px; width: 104.0px; height: 104.0px; z-index: 9; }

/* ===================== カード本体 ===================== */
.card {
  position: absolute;
  left: 9px;
  width: 356px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.card--1 { top: 1045px; }
.card--2 { top: 2537.0px; }
.card--3 { top: 4005.0px; }
.card--4 { top: 5670.0px; }

.card__head {
  position: relative;
  width: 100%;
  height: 237px;             /* 銀杏並木の写真ヘッダー帯 */
  border-radius: 10px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  padding: 12px 12px 209px;  /* 左上にだけテキスト */
}
.card__head-label {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.3px;
  color: #ffffff;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
/* カード3（モエレ沼）の写真は空が明るいので、文字は #101010（本文と同色） */
.card--3 .card__head-label {
  color: #101010;
  text-shadow: none;
}

.card__body {
  position: relative;
  width: 100%;
  background-size: 355px auto;
  background-position: top left;
  background-repeat: repeat-y;
  background-color: rgba(255,255,255,0.85);
  border: 1.5px solid #595959;     /* スマホで1pxは消える場合があるので1.5pxに強化 */
  border-radius: 20px;
  padding: 12px;
  overflow: visible;
}

.card__corner {
  position: absolute;
  top: -59px; left: 240px;
  width: 186px; height: 247px;
  pointer-events: none;
  z-index: 2;
}
/* カード2用のキャラ装飾（rotateあり、サイズ違い） */
.card__corner--c2 {
  top: -93px; left: 226px;
  width: 198.939px; height: 265.252px;
  transform: rotate(-3.67deg);
}

/* カード3用のキャラ装飾（2層構造：rotate -8.49deg、ピンクハート風船） */
.card__corner-wrap {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.card__corner-inner {
  display: block;
  pointer-events: none;
}
.card__corner-wrap--c3 {
  top: -147px; left: 203px;
  width: 242.382px; height: 299.702px;
  display: flex; align-items: center; justify-content: center;
}
.card__corner-inner--c3 {
  width: 204.381px; height: 272.508px;
  transform: rotate(-8.49deg);
}

/* カード4用のキャラ装飾（2層構造：rotate -2.92deg） */
.card__corner-wrap--c4 {
  top: -95px; left: 234px;
  width: 207.132px; height: 268.48px;
  display: flex; align-items: center; justify-content: center;
}
.card__corner-inner--c4 {
  width: 194.191px; height: 258.921px;
  transform: rotate(-2.92deg);
}

/* page の最低高さを十分に確保（カード4まで実装に向けて） */
.page { min-height: 8686px !important; }  /* おまけ以降 +250px シフトに対応 */

.card__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 20px 12px;
}

.card__hero {
  display: block;
  width: 281px;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
}

.card__title {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.42px;
  color: #101010;
  margin: 0;
  align-self: stretch;
}

.card__body-text {
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.36px;
  color: #101010;
  margin: 0;
  align-self: stretch;
}

.card__block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
}
.card__block-text {
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.36px;
  color: #101010;
  margin: 0;
}
.card__block-text > p { margin: 0 0 6px; }
.card__block-text > p:last-child { margin-bottom: 0; }

.card__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.36px;
  color: #101010;
  border: 0.6px solid #595959;
  border-radius: 6px;
}
.card__badge--season { background: #e5dbfd; }
.card__badge--food   { background: #fedbd0; }
.card__badge--data   { background: #d0f3fe; }

.food-item { margin: 0 0 6px; }
.food-item strong { font-weight: 700; }
.food-item:last-child { margin-bottom: 0; }

.card__official {
  align-self: stretch;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.36px;
  color: #101010;
}
.card__official p { margin: 0; }
.card__official-label {
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.3px;
}
.card__official a {
  color: #282772;
  text-decoration: underline;
  word-break: break-all;
}

/* ===================== 仮置き ===================== */
.main-placeholder {
  position: absolute;
  top: 2400px;
  left: 0;
  width: 100%;
  padding: 40px 20px;
  text-align: center;
  color: #897f73;
  font-size: 14px;
  background: linear-gradient(180deg, #fff, #f5f1ea);
  z-index: 5;
}

/* page高さを稼ぐ（一時的・全カード実装で調整） */
.page { min-height: 2700px; }