@charset "UTF-8";

/* =========================================================
   「食べて痩せる！」お米生活診断 / common.css
   Tailwind(ビルド版)で賄えない装飾のみ定義
   ※ 読み込み順は tailwind.css → common.css（後勝ち）
   ========================================================= */

:root{
  --c-base:#FCFAF7;        /* オフホワイト・ペールベージュ */
  --c-card:#FFFFFF;        /* ピュアホワイト */
  --c-line:#EFE8DE;        /* 淡いベージュ（境界線） */
  --c-ink:#2C2523;         /* ダークブラウン */
  --c-rose:#D94B68;        /* プライマリ：ローズピンク／クリムゾン */
  --c-rose-l:#F0708C;      /* ローズ（グラデーション用の明るい側） */
  --c-orange:#EE7826;      /* アクセント：ウォームオレンジ */
  --c-orange-l:#F59B7C;    /* サーモンピンク */

  --g-rose:linear-gradient(90deg,var(--c-rose-l) 0%,var(--c-rose) 100%);
  --g-orange:linear-gradient(135deg,var(--c-orange-l) 0%,var(--c-orange) 100%);
}

/* ---------- base ---------- */
html{ -webkit-text-size-adjust:100%; }
body{
  background-color:var(--c-base);
  color:var(--c-ink);
  letter-spacing:.02em;
  overflow-x:hidden;
  /* スクロールバーは出さない（スクロール自体はできる） */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
html{ scrollbar-width:none; }
body::-webkit-scrollbar,
html::-webkit-scrollbar{ display:none; width:0; height:0; }
button{ -webkit-tap-highlight-color:transparent; }

/* 明朝の既定字間。Tailwindの tracking-* を付けた要素では上書きしない */
.font-mincho:not([class*="tracking-"]){ letter-spacing:.03em; }

/* 日本語見出しの折り返しを整える（未対応ブラウザでは無視される） */
h1,h2,h3,.btn-primary,.btn-line{
  word-break:auto-phrase;
  text-wrap:balance;
  line-break:strict;
}

/* =========================================================
   画面1：ヒーロー（素材合成／フルブリード）
   完成イメージ check_fv.png（1920×1100）と同じ座標に素材を重ねる。
   bg.png も 1920×1100 なので、ステージを同比率に固定したうえで
   left / top / width をすべて % 換算すれば、どの幅でも完成イメージと同じ絵になる。

     素材                  x     y     w×h        （1920×1100 内の実測値）
     copy_10.png          146   158   715×163
     copy_me.png          121   235   839×215
     copy_tabekata.png    175   396   728×288
     keiko.png            209   555   612×153   ※「食べ方」の背面
     copy2.png            157   672   728×123
     cta.png              143   776   742×229
     copy.png            1509   827   314×189
   ========================================================= */
/* 画面いっぱいに置き、ステージは縦センタリング（.screen.hidden は後勝ちで有効） */
.screen.hero{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:100svh;
}
.hero{
  width:100%;
  /* 背景は画面いっぱい。コピーの配置枠（.hero-stage）とは切り離す */
  background:#FBF2EE url("../img/bg.png") center center/cover no-repeat;
  background-image:image-set(url("../img/bg.webp") type("image/webp"), url("../img/bg.png") type("image/png"));
}

.hero-stage{
  position:relative;
  container-type:inline-size;
  /* 画面より縦に高くならないよう、高さ基準でも幅を抑える。
     これでFVが1画面に収まり、ページ自体がスクロールしなくなる */
  width:min(100%, 1920px, calc(100svh * 1920 / 1100));
  margin-inline:auto;
  aspect-ratio:1920/1100;             /* = bg.png / check_fv.png の実寸比 */
  overflow:hidden;
  background:none;                    /* 背景は .hero 側（画面いっぱい）に持たせる */
}

.hero-stage picture{ display:block; }
.hero-stage img{ display:block; width:100%; height:auto; }
.hero-l3,
.hero-cta-base{ width:100%; }

/* h1 自体は位置を持たない箱。子は .hero-stage 基準で絶対配置する */
.hero-h1{ margin:0; font-size:0; }

/* --- 146,158 / 715×163 --- */
.hero-l1{ position:absolute; z-index:1; left:7.6042%;  top:14.3636%; width:37.2396%; }
/* --- 121,235 / 839×215 --- */
.hero-l2{ position:absolute; z-index:1; left:6.3021%;  top:21.3636%; width:43.6979%; }

/* --- 175,396 / 728×288：「食べ方」＋背面の筆ストローク --- */
.hero-word{ position:absolute; z-index:1; left:9.1146%; top:36.0000%; width:37.9167%; display:block; }
.hero-l3{ position:relative; z-index:1; }
/* keiko.png 209,555 → 「食べ方」の箱を基準にすると left 4.67% / top 55.21% / width 84.07% */
.hero-brush{
  position:absolute; z-index:0;
  left:4.6703%; top:55.2083%; width:84.0659%;
}

/* --- 157,672 / 728×123 --- */
.hero-l4{ position:absolute; z-index:1; left:8.1771%;  top:61.0909%; width:37.9167%; }

/* --- 1509,827 / 314×189 --- */
.hero-script{ position:absolute; z-index:1; left:78.5938%; top:75.1818%; width:16.3542%; }

/* ---------- CTA：143,776 / 742×229。hover で cta02.png に差し替え ---------- */
.hero-cta{
  position:absolute; z-index:1;
  left:7.4479%; top:70.5455%; width:38.6458%;
  padding:0; border:0; background:none; cursor:pointer;
  transition:transform .18s ease;
}
.hero-cta-hover{
  position:absolute; left:0; top:0;
  width:100%; height:100%;
  opacity:0;
  transition:opacity .2s ease;
}
@media (hover:hover){
  .hero-cta:hover .hero-cta-hover{ opacity:1; }
}
.hero-cta:focus-visible .hero-cta-hover,
.hero-cta:active .hero-cta-hover{ opacity:1; }
.hero-cta:active{ transform:translateY(2px); }

/* 左上ラベル：bg.png からは除去したので常にテキストで描く。
   背景が画面いっぱい＝トリミングされても切れない。
   完成イメージ実測 ink (54,39)-(231,139) / 178×101 */
.hero-tag{
  display:block;
  position:absolute; z-index:4;
  left:2.8125%; top:3.5455%;
  margin:0;
  font-family:"Figtree",sans-serif;
  font-style:italic; font-weight:700;
  font-size:clamp(9px,1.042cqw,21px);
  line-height:2.18; letter-spacing:.65em;
  color:var(--c-rose);
}


/* =========================================================
   ヒーロー：SP・縦長タブレット
   SP完成イメージ _design/fv_sp.png（750×1600 = 375×800CSS）と
   同じ座標系に切り替える。PC と同じく left/top/width をすべて %
   換算しているので、端末幅が変わっても完成イメージの比率を保つ。

     素材                x     y     w×h      （750×1600 内の実測値）
     copy.png           356   525   314×189
     copy_10.png         52   739   608×139
     copy_me.png         31   804   713×183
     copy_tabekata.png   79   942   612×242
     keiko.png          106  1074   520×130   ※「食べ方」の背面
     copy2_sp.png       261  1176   414×182   ※SP専用の2行版
     cta.png             67  1365   616×190
   ========================================================= */
@media (max-width:767px), (max-width:1100px) and (max-aspect-ratio:1/1){
  /* 背景は画面いっぱい（.hero）に持たせる。
     コピー枠（.hero-stage）は画面が短いと幅が縮むため、
     そこに背景を載せると両サイドに余白が出てしまう。 */
  .hero{
    position:relative;
    background-color:#FAF4EF;
    background-image:url("../img/sp.png");
    background-image:image-set(url("../img/sp.webp") type("image/webp"), url("../img/sp.png") type("image/png"));
    background-size:cover;
    background-position:center top;
  }

  /* 白フェードも画面いっぱいに重ねてコピーの可読性を確保（写真は透けたまま残す） */
  .hero::after{
    content:"";
    position:absolute; inset:0; z-index:0;
    pointer-events:none;
    background:linear-gradient(180deg,
      rgba(253,248,244,0)   44%,
      rgba(253,248,244,.16) 56%,
      rgba(253,248,244,.42) 67%,
      rgba(253,248,244,.70) 77%,
      rgba(253,245,244,.86) 87%,
      rgba(251,238,239,.93) 100%);
  }

  .hero-stage{
    /* 画面が 750:1600 より縦に短い端末では、はみ出さないよう幅を詰めて全体を収める */
    width:min(100%, calc(100svh * 750 / 1600));
    aspect-ratio:750/1600;
    container-type:inline-size;
    background:none;                  /* 背景は .hero 側（画面いっぱい）へ */
    z-index:1;                        /* 白フェードより前面に置く */
  }
  .hero-stage::after{ content:none; }

  /* bg_sp.png にラベルが入っていないためテキストで再現 */
  .hero-tag{
    display:block;
    position:absolute; z-index:2;
    left:5.3333%; top:2.0625%;
    font-family:"Figtree",sans-serif;
    font-style:italic; font-weight:700;
    font-size:11px;
    font-size:2.93cqw;
    line-height:2.05; letter-spacing:.3em;
    color:var(--c-rose);
  }

  /* --- 356,525 / 314×189 --- */
  .hero-script{ left:47.4667%; top:32.8125%; width:41.8667%; }
  /* ---  52,739 / 608×139 --- */
  .hero-l1{ left:6.9333%;  top:46.1875%; width:81.0667%; }
  /* ---  31,804 / 713×183 --- */
  .hero-l2{ left:4.1333%;  top:50.2500%; width:95.0667%; }
  /* ---  79,942 / 612×242 --- */
  .hero-word{ left:10.5333%; top:58.8750%; width:81.6000%; }
  /* keiko.png 106,1074 → 「食べ方」の箱を基準に left 4.41% / top 54.55% / width 84.97% */
  .hero-brush{ left:4.4118%; top:54.5455%; width:84.9673%; }
  /* --- 261,1176 / 414×182（HTML側の media で2行版 copy2_sp に切り替わる） --- */
  .hero-l4{ left:34.8000%; top:73.5000%; width:55.2000%; }
  /* ---  67,1365 / 616×190 --- */
  .hero-cta{ left:8.9333%; top:85.3125%; width:82.1333%; }
}

/* 質問画面はセクション側に余白があるので容器の余白は不要（無駄なスクロールを消す） */
body.bg-question #screens{ padding-bottom:0; }

/* トップ表示中は、中身が空になる容器の余白を消してスクロールを出さない
   （JS無効でも効くよう :has() でも同じ指定をしておく） */
body.is-top #screens{ padding-bottom:0; }
#screens:not(:has(> .screen:not(.hidden))){ padding-bottom:0; }

/* ---------- screen 切替 ---------- */
.screen{ display:flex; }
.screen.hidden{ display:none; }           /* JS無効でもトップ画面だけは表示される構成 */
.screen.is-active{ animation:screenIn .5s ease both; }

/* translateY を入れるとその分スクロール領域が生まれるのでフェードのみにする */
@keyframes screenIn{
  from{ opacity:0; }
  to  { opacity:1; }
}

/* ---------- 共通カード（角丸ホワイトカード＋ドロップシャドウ） ---------- */
.card{
  background:var(--c-card);
  border:1px solid var(--c-line);
  border-radius:16px;                       /* rounded-2xl */
  box-shadow:0 6px 22px rgba(44,37,35,.10), 0 2px 5px rgba(44,37,35,.05);
}

/* ---------- ＼ 見出し ／ 装飾（手書き風の斜体） ---------- */
.slash-label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  font-family:"Yu Mincho",YuMincho,"Shippori Mincho","Hiragino Mincho ProN",serif;
  font-weight:700;
  font-style:italic;
  letter-spacing:.06em;
}
.slash-label::before,
.slash-label::after{
  font-style:normal;
  font-weight:400;
  opacity:.9;
  transform:translateY(-.06em);
}
.slash-label::before{ content:"＼"; }
.slash-label::after { content:"／"; }
.slash-label.slash-sm::before,
.slash-label.slash-sm::after{ font-size:.8em; }

/* ---------- マーカー風ハイライト ---------- */
.marker{
  background:linear-gradient(transparent 58%, rgba(245,155,124,.55) 58%);
  padding:0 .08em;
}

/* スコア数値の手書き風イタリック */
.score-italic{ font-style:italic; letter-spacing:.01em; }

/* ---------- ボタン（プライマリ／ローズ） ---------- */
.btn-primary{
  display:flex; align-items:center; justify-content:center;
  min-height:62px; padding:0 24px;
  font-family:"Yu Mincho",YuMincho,"Shippori Mincho","Hiragino Mincho ProN",serif;
  font-size:18px; font-weight:700; color:#fff;
  background:var(--g-rose);
  border-radius:999px;
  box-shadow:0 8px 20px rgba(217,75,104,.34);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover{ filter:brightness(1.05); }
.btn-primary:active{ transform:translateY(2px); box-shadow:0 2px 8px rgba(217,75,104,.3); }

/* ---------- ボタン（YES / NO） ---------- */
.btn-answer{
  min-height:84px;
  border-radius:14px;
  border:1.5px solid var(--c-line);
  background:#fff;
  color:var(--c-ink);
  box-shadow:0 2px 8px rgba(44,37,35,.05);
  transition:transform .15s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn-answer:active{ transform:scale(.96); }

.btn-yes{ border-color:var(--c-rose); color:var(--c-rose); background:rgba(217,75,104,.06); }
.btn-yes:hover{ background:var(--c-rose); color:#fff; }
.btn-no:hover{ background:#F5EFE7; border-color:#DCCFBE; }

.btn-answer.is-selected{ background:var(--c-rose); border-color:var(--c-rose); color:#fff; }

/* ---------- プログレスバー（ローズのグラデーション） ---------- */
/* 進捗カウンタ「1/10」は斜体に（Figtreeはイタリック字形が無いので合成斜体） */
#q-current,
#q-current + span{ font-style:italic; }

#progress-bar{ background:var(--g-rose); }
#loading-bar { background:var(--g-rose); transition:width 1.5s linear; }

/* =========================================================
   質問画面：背景ピンク（body にクラスを付けて全画面ブリード）
   ピンク地のため、カウンタとゲージは白に反転する
   ========================================================= */
body.bg-question{
  /* 下から写真がうっすら現れ、上に向かってピンクに溶けていく。
     写真は --q-bg で差し替え（JSが設問ごとにその設問の写真を入れる） */
  background-color:#D35B72;
  background-image:
    linear-gradient(180deg,
      #D35B72                 0%,
      rgba(211,91,114,.99)   28%,
      rgba(211,91,114,.94)   45%,
      rgba(211,91,114,.84)   62%,
      rgba(211,91,114,.71)   80%,
      rgba(211,91,114,.58)  100%),
    var(--q-bg, url("../img/q1.webp"));
  background-size:auto, cover;
  background-position:center, center bottom;
  background-repeat:no-repeat;
  background-attachment:fixed, fixed;   /* 短いスクロールで背景がずれないように */
}
body.bg-question #q-current{ color:#fff; }
body.bg-question #q-total,
body.bg-question #q-current + span{ color:rgba(255,255,255,.65); }
body.bg-question #progress-track{ background:rgba(255,255,255,.30); }
body.bg-question #progress-bar{ background:#fff; }
body.bg-question #btn-back{ color:rgba(255,255,255,.80); }
body.bg-question .card{ box-shadow:0 10px 30px rgba(120,30,50,.22); border-color:rgba(255,255,255,.6); }

/* ---------- 設問上の横長画像スペース ----------
   img/q1.jpg 〜 img/q10.jpg を置けば自動で表示される。
   未設置の間はスケルトン枠（ファイル名つき）を出す。 */
.ph{
  position:relative; display:block; margin:0;
  overflow:hidden; border-radius:12px;
  background:var(--c-line);
}
.ph picture{ display:block; width:100%; height:100%; }
.ph img{ display:block; width:100%; height:100%; object-fit:cover; }
.ph figcaption{ display:none; }

.ph.is-empty{
  background:repeating-linear-gradient(45deg,#F8F1EA 0 10px,#F2E8DE 10px 20px);
  border:1.5px dashed #DFCDB9;
}
.ph.is-empty picture{ display:none; }
.ph.is-empty figcaption{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  font-size:11px; line-height:1.6; letter-spacing:.03em;
  color:#A8937C; text-align:center; padding:8px;
}
.ph.is-empty figcaption::before{ content:"🖼"; font-size:19px; opacity:.55; }

.ph-16x9{ aspect-ratio:16/9; }

/* ---------- 質問文（改行指定を \n で受ける） ---------- */
#q-text{
  white-space:pre-line;                 /* JS側の \n を改行として描画 */
  font-size:clamp(15px, 4.7vw, 21px);
  min-height:5.6em;                     /* 最大3行ぶんを確保しカードの高さを固定 */
}

/* =========================================================
   質問画面：縦が短い画面でもカードが切れないよう、
   余白・写真・ボタン高さを画面高さに追従させる
   ========================================================= */
@media (max-height:900px){
  #screen-question{
    padding-top:clamp(10px,2.2svh,40px);
    padding-bottom:clamp(10px,2.2svh,40px);
  }

  #screen-question > .mb-7{ margin-bottom:clamp(8px,2svh,28px); }
  #q-current{ font-size:clamp(34px,6svh,58px); }
  #q-current + span{ font-size:clamp(17px,3svh,29px); }

  #q-card{
    padding-top:clamp(12px,2.6svh,36px);
    padding-bottom:clamp(12px,2.6svh,36px);
  }
  #q-photo{
    aspect-ratio:auto;
    height:clamp(110px,26svh,264px);
    margin-bottom:clamp(8px,2svh,20px);
  }
  #q-number{ margin-bottom:clamp(6px,1.7svh,20px); }
  #q-text{
    min-height:4.6em;
    font-size:clamp(14px,4.7vw,20px);
  }
  #q-card > .grid{ margin-top:clamp(10px,2.4svh,28px); }
  .btn-answer{ min-height:clamp(54px,8.6svh,84px); }
  #screen-question .mt-6{ margin-top:clamp(8px,1.8svh,24px); }
}

/* ---------- 質問カードの入替アニメーション ---------- */
#q-card{ transition:opacity .22s ease, transform .22s ease; }
#q-card.is-out{ opacity:0; transform:translateX(-22px); }
#q-card.is-in { opacity:0; transform:translateX(22px); }

/* ---------- 集計中アニメーション（お米粒） ---------- */
.grain{ display:flex; align-items:flex-end; gap:10px; height:46px; }
.grain span{
  display:block; width:13px; height:22px;
  border-radius:50% / 40%;
  background:linear-gradient(160deg,#fff 0%,var(--c-orange-l) 100%);
  box-shadow:0 2px 6px rgba(238,120,38,.35);
  animation:grainBounce 1.05s ease-in-out infinite;
}
.grain span:nth-child(2){ animation-delay:.16s; }
.grain span:nth-child(3){ animation-delay:.32s; }

@keyframes grainBounce{
  0%,100%{ transform:translateY(0) rotate(-6deg); opacity:.55; }
  45%    { transform:translateY(-16px) rotate(6deg); opacity:1; }
}

/* =========================================================
   診断結果（完成イメージ準拠）
   稲穂・波の装飾は A/B/C 共通。色はタイプごとに JS が上書きする
   ========================================================= */
.rs-head{ position:relative; text-align:center; margin-bottom:18px; }
.rs-head-ja{
  justify-content:center;
  font-size:21px;
  color:var(--c-rose);
}
.rs-head-en{
  margin-top:4px;
  font-size:11px; letter-spacing:.42em; text-indent:.42em;
  color:#C8A98D;
}
.rs-head-script{
  position:absolute; right:2px; top:-20px;
  font-family:"Parisienne",cursive;
  font-size:clamp(26px,8.6vw,40px); line-height:1;
  color:#F3E4D7;
  pointer-events:none; user-select:none;
  z-index:0;
}
.rs-head-ja,
.rs-head-en{ position:relative; z-index:1; }

/* ---------- カード ---------- */
.rs-card{
  position:relative;
  overflow:hidden;
  padding:30px 24px 34px;
  border-radius:22px;
  background:#FFFCF9 url("../img/result_wave.webp") left bottom/150% auto no-repeat;
  box-shadow:0 10px 34px rgba(148,108,70,.13), 0 2px 6px rgba(148,108,70,.06);
}
/* 右上の稲穂（左下へフェードアウト） */
.rs-rice{
  position:absolute; right:0; top:0;
  width:58%; aspect-ratio:1000/667;
  background:url("../img/result_rice.webp") center/cover no-repeat;
  opacity:.34;
  -webkit-mask-image:linear-gradient(210deg,#000 6%,rgba(0,0,0,.35) 40%,transparent 68%);
  mask-image:linear-gradient(210deg,#000 6%,rgba(0,0,0,.35) 40%,transparent 68%);
  pointer-events:none;
}
.rs-card > *:not(.rs-rice){ position:relative; z-index:1; }

/* ---------- タイプ ---------- */
.rs-type{ display:flex; align-items:center; gap:18px; }
.type-badge{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:84px; height:84px;
  border-radius:50%;
  font-family:"Yu Mincho",YuMincho,"Shippori Mincho",serif;
  font-size:40px; font-weight:700; font-style:italic;
  color:#fff;
  background:var(--g-orange);                /* JSでタイプ別に上書き */
  box-shadow:0 8px 20px rgba(238,120,38,.34);
}
.rs-type-body{ min-width:0; }
.rs-type-label{
  font-size:10.5px; letter-spacing:.34em; text-indent:.34em;
  color:var(--c-orange);
  margin-bottom:6px;
}
.rs-type-name{
  font-family:"Yu Mincho",YuMincho,"Shippori Mincho","Hiragino Mincho ProN",serif;
  font-weight:700;
  font-size:clamp(19px,5.4vw,25px);
  line-height:1.45;
  letter-spacing:.01em;
}
.rs-type-en{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.rs-type-rule{ flex:none; width:22px; height:1.5px; background:var(--c-orange); }
.rs-type-en em{
  font-style:normal;
  font-size:10.5px; letter-spacing:.24em;
  color:var(--c-orange);
}

/* ---------- スコアゲージ ---------- */
.rs-score{ text-align:center; margin-top:26px; }
.rs-gauge{ position:relative; display:inline-block; width:min(200px,54vw); }
.rs-gauge svg{ display:block; width:100%; height:auto; transform:rotate(-90deg); }
.rs-gauge-bg{ fill:none; stroke:#E9E2DA; stroke-width:11; }
.rs-gauge-arc{
  fill:none;
  stroke:url(#gauge-grad);
  stroke-width:11; stroke-linecap:round;
  transition:stroke-dashoffset 1.4s cubic-bezier(.22,.9,.3,1);
}
.rs-gauge-in{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.rs-score-label{
  font-size:11px; letter-spacing:.3em; text-indent:.3em;
  color:rgba(44,37,35,.5);
}
.rs-score-num{
  font-family:"Yu Mincho",YuMincho,"Shippori Mincho",serif;
  line-height:1; margin-top:2px;
}
.rs-score-num > span{ font-size:clamp(44px,13vw,60px); font-weight:700; }
.rs-score-num em{ font-style:normal; font-size:17px; margin-left:2px; }
.rs-score-cap{ font-size:12px; color:rgba(44,37,35,.55); margin-top:8px; }
.rs-score-rule{
  display:block; width:34px; height:1.5px; margin:12px auto 0;
  background:var(--c-orange); opacity:.55;
}

/* ---------- 解説 ---------- */
.rs-desc{
  margin-top:22px;
  padding:18px 18px 18px 20px;
  border-left:4px solid var(--c-orange);
  border-radius:0 12px 12px 0;
  background:rgba(253,238,225,.78);
  font-size:14.5px; line-height:2;
  color:rgba(44,37,35,.9);
}

/* ---------- 今日から整えたい3つのこと ---------- */
.rs-next{
  display:flex; align-items:center; gap:8px;
  margin-top:30px; padding-top:24px;
  border-top:1px solid rgba(201,162,74,.22);
}
/* 筆記体はマスクとして使い、塗りをタイプ色に連動させる */
.rs-next-script{
  flex:none; display:block;
  width:clamp(74px,22vw,104px);
  aspect-ratio:960/412;
  background-color:var(--c-orange);
  background-image:linear-gradient(100deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,0) 58%);
  -webkit-mask:url("../img/script_nextstep.png") center/contain no-repeat;
  mask:url("../img/script_nextstep.png") center/contain no-repeat;
  -webkit-mask-image:url("../img/script_nextstep.webp");
  mask-image:url("../img/script_nextstep.webp");
}
.rs-next-title{
  display:flex; align-items:center; gap:9px;
  font-family:"Yu Mincho",YuMincho,"Shippori Mincho",serif;
  font-weight:700; font-size:clamp(15px,4.2vw,19px);
  line-height:1.5;
}
.rs-next-dash{ flex:none; width:18px; height:2px; background:var(--c-orange); }

.rs-points{ list-style:none; margin:16px 0 0; padding:0; }
.rs-point{
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 0;
  border-top:1px solid rgba(201,162,74,.16);
}
.rs-point:first-child{ border-top:0; padding-top:4px; }
.rs-point-no{
  flex:none;
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(238,120,38,.10);
  font-family:"Yu Mincho",YuMincho,"Shippori Mincho",serif;
  font-size:16px; font-style:italic; font-weight:700;
  color:var(--c-orange);
}
.rs-point-body{ font-size:14.5px; line-height:1.95; color:rgba(44,37,35,.88); padding-top:5px; }

/* ---------- LINE CTA ---------- */
.cta-card{
  position:relative;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF4EC 100%);
  border:2px solid var(--c-orange);
  border-radius:16px;
  box-shadow:0 8px 26px rgba(238,120,38,.18);
}

/* 円形グラデーションバッジ（40分無料相談） */
.offer-badge{
  position:absolute;
  top:-38px; left:50%;
  transform:translateX(-50%) rotate(-7deg);
  width:108px; height:108px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px;
  border-radius:50%;
  background:var(--g-orange);
  color:#fff;
  font-family:"Yu Mincho",YuMincho,"Shippori Mincho",serif;
  font-weight:700;
  text-align:center;
  line-height:1.3;
  border:3px solid #fff;
  box-shadow:0 8px 20px rgba(238,120,38,.38);
}

.gift-item{
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 14px;
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:10px;
  box-shadow:0 1px 3px rgba(44,37,35,.05);
  font-size:14px; line-height:1.7;
}
.gift-no{
  flex:none;
  font-family:"Yu Mincho",YuMincho,"Shippori Mincho",serif;
  font-size:13px; font-weight:700; font-style:italic;
  letter-spacing:.04em;
  color:var(--c-orange);
  padding-top:2px;
}

/* 角丸オレンジボタン（最重要CTA） */
.btn-line{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:68px; padding:0 18px;
  font-size:16px; font-weight:700; color:#fff;
  background:var(--g-orange);
  background-color:var(--c-orange);
  border-radius:14px;
  box-shadow:0 8px 20px rgba(238,120,38,.38);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
  animation:ctaPulse 2.6s ease-in-out infinite;
}
.btn-line:hover{ filter:brightness(1.05); }
.btn-line:active{ transform:translateY(2px); box-shadow:0 2px 8px rgba(238,120,38,.32); animation:none; }

@keyframes ctaPulse{
  0%,100%{ box-shadow:0 8px 20px rgba(238,120,38,.38); }
  50%    { box-shadow:0 8px 30px rgba(238,120,38,.62); }
}

/* ---------- フォーカス可視化（アクセシビリティ） ---------- */
:where(button,a):focus-visible{
  outline:2px solid var(--c-rose);
  outline-offset:3px;
}

/* ---------- 動きを減らす設定への配慮 ---------- */
/* =========================================================
   FV 入場アニメーション
   .fv-anim は初期状態でHTMLに付与（JS無効でも表示される）。
   トップへ戻ったときは JS がクラスを付け直して再生する。
   ========================================================= */
@keyframes fvFadeUp{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:translateY(0); }
}
@keyframes fvFade{
  from{ opacity:0; }
  to  { opacity:1; }
}
/* 蛍光マーカーを左から引く */
@keyframes fvBrush{
  from{ clip-path:inset(0 100% 0 0); -webkit-clip-path:inset(0 100% 0 0); }
  to  { clip-path:inset(0 0 0 0);    -webkit-clip-path:inset(0 0 0 0); }
}

.fv-anim .hero-tag   { animation:fvFade   .9s ease                       .10s both; }
.fv-anim .hero-l1    { animation:fvFadeUp .75s cubic-bezier(.2,.7,.3,1)  .30s both; }
.fv-anim .hero-l2    { animation:fvFadeUp .75s cubic-bezier(.2,.7,.3,1)  .62s both; }
.fv-anim .hero-l3    { animation:fvFadeUp .80s cubic-bezier(.2,.7,.3,1)  .94s both; }
/* 「食べ方」が出きってから、マーカーを一気に引く */
.fv-anim .hero-brush { animation:fvBrush  .58s cubic-bezier(.62,.04,.30,1) 1.52s both; }
.fv-anim .hero-l4    { animation:fvFadeUp .75s cubic-bezier(.2,.7,.3,1)  2.06s both; }
.fv-anim .hero-cta   { animation:fvFade   .9s ease                      2.40s both; }
.fv-anim .hero-script{ animation:fvFade   .9s ease                      2.72s both; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ---------- 小型端末（iPhone SE 等） ---------- */
@media (max-width:359px){
  .btn-answer{ min-height:74px; }
  .btn-line{ font-size:14px; min-height:62px; }
  .offer-badge{ width:96px; height:96px; top:-34px; }
}