/* =========================================================
   私辞書 ティザー専用CSS（SP優先）
   - 背景色: #FDF3E7
   - フォント: Noto Sans JP
   - 見出し=細め/字間広め、方眼なし
   - キャッチ/バッジの字間・サイズ調整
   - ヒーロー: vh/svh/dvh + safe-area フォールバック
   ======================================================= */

/* Google Fonts（細字含む） */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap");

/* 初期リセット（UA余白の影響をゼロに） */
html, body { margin: 0; height: 100%; }

/* アクセント色（季節でJSが上書き） */
:root { --accent: #06b6d4; }

/* -------------------- ページ全体 -------------------- */
body.teaser-page{
  background: #FDF3E7;
  color: #111827;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont,
               "Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo", system-ui, sans-serif;
  font-weight: 400;
}

/* =================== FV / First View =================== */

/* --- 初回イントロ制御（全画面マスク & スクロールロック） --- */
.intro-mask{
  position: fixed;
  inset: 0;
  background: #FDF3E7;        /* FVと同じ背景色で全面を覆う */
  z-index: 40;                 /* タイトル(center-stage)より一段下 */
  opacity: 1;
  transition: opacity .5s ease;
  pointer-events: none;
}
.intro-mask.is-hidden{ opacity: 0; }
html.intro-lock, body.intro-lock{ overflow: hidden; height: 100%; }

/* 本体：vh/dvhを使わない “Aパターン（コンテンツ主導）” */
.hero[data-hero]{
  box-sizing: border-box;
  padding-block: clamp(130px, 20vw, 200px) clamp(80px, 14vw, 96px);
  padding-inline: 20px;
  text-align: center;
  background-color: #FDF3E7;
  display: grid;
  place-content: start center;  /* 上寄せ */
}

/* 固定化（スタック） */
.hero-stack{
  display: grid;
  justify-items: center;
  align-content: start;
  row-gap: 8px;
  max-width: 38rem;
  margin: 0 auto;
}
.hero-stack.is-locked{ overflow: visible; }

/* 見出し（初回タイピング時に使う H1） */
.hero_title{
  font-family: inherit;
  font-weight: 300;
  letter-spacing: .36em;
  line-height: 1.12;
  font-size: clamp(24px, 9.2vw, 44px); /* タイピング＆モーフ時 */
  margin: 0 0 4px;
  transition: opacity .7s ease, transform .7s ease;
}
/* 中央の「私辞書」をフェードアウトさせる */
.hero_title.fade-out{
  opacity: 0;
  transform: translateY(-12px);
}

/* 再表示されるタイトル（最終配置用のクローン） */
.hero_title_clone{
  font-family: inherit;
  font-weight: 300;
  letter-spacing: .36em;
  line-height: 1.12;
  font-size: clamp(24px, 9.2vw, 44px);
  margin: 0 0 4px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .8s ease, transform .8s ease;
}
.hero_title_clone.is-shown{
  opacity: 1;
  transform: translateY(0);
}

/* 1文字ごとの“間” */
.char-grid{ display:inline-flex; gap:0; align-items:center; }
.char-grid.morphed{ gap: clamp(8px, 2.8vw, 16px); }
.cell{ display:flex; align-items:center; justify-content:center; height:1em; }
.cell-content{ display:inline-flex; align-items:baseline; }
.text{ font:inherit; line-height:1; letter-spacing:0; white-space:pre; }

/* キャレット */
.type-caret{
  display:inline-block; width:1px; height:1em;
  background: currentColor; animation: caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* リード文（詰め気味） */
.hero_lead{
  font-weight: 400; color:#4b5563;
  max-width: 32ch;
  margin: 8px auto 2px;
  font-size: clamp(16px, 6.8vw, 17px);
  line-height: 1.6; letter-spacing: .04em;
}

/* イラスト（実DOM） */
.hero_visual{
  margin: clamp(32px, 6vw, 48px) auto clamp(30px, 6vw, 36px);
  width: clamp(260px, 78vw, 600px);
}

.hero_visual img{ display:block; width:100%; height:auto; }

/* バッジはイラストの“直下” */
.badge{
  display:inline-block;
  margin-top: clamp(10px, 3vw, 18px);
  padding: 10px 18px;
  border-radius: 9999px;
  background: var(--accent);
  color:#fff; font-size:15px; font-weight:500; letter-spacing:.06em;
  text-decoration:none; line-height:1;
  transition: filter .2s ease, transform .06s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.badge:active{ transform: translateY(1px); }
.badge:hover{ filter: brightness(1.06); }

/* フェードイン制御（共通） */
.is-hidden{ opacity:0; transform:translateY(6px); pointer-events:none; }
.is-shown{  opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; }

/* SPだけ強制改行 */
.br-sp{ display:none; }
@media (max-width:480px){ .br-sp{ display:inline; } }

/* 動きを苦手な人向け */
@media (prefers-reduced-motion: reduce){
  .type-caret{ display:none; }
  .is-hidden{ opacity:1; transform:none; }
  .morphing{ animation:none; }
}

/* タイピング/モーフ中だけ、H1を画面中央に固定表示 */
.hero_title.center-stage{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;      /* ど真ん中 */
  margin: 0; padding: 0;
  z-index: 50;              /* マスクより上 */
  pointer-events: none;
  background: transparent;
}




/* ===== 固定ハンバーガーメニュー (right-bottom) ===== */
.fab-menu{
  position: fixed !important;

  /* 右下の安全域に追従（ホームインジケータ等で隠れない） */
  inset-inline-end: max(16px, calc(env(safe-area-inset-right) + 16px));
  inset-block-end:  max(16px, calc(env(safe-area-inset-bottom) + 16px));

  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;

  /* iOS Safari/Chrome の固定ズレ・ちらつき抑制 */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  contain: layout paint;

  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  z-index: 2147483647; /* 最前面固定（メニューより上でOKという現仕様に合わせる） */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  transition: transform .12s ease, filter .2s ease;
}

.fab-menu:active{ transform: translateY(1px) scale(.99); }
.fab-menu:hover{ filter: brightness(1.06); }

/* 三本線アイコン */
.fab-bars{
  display: inline-block;
  width: 24px;
  height: 18px;
  position: relative;
}
.fab-bars i{
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transition: transform .25s ease, opacity .25s ease, top .25s ease;
}
.fab-bars i:nth-child(1){ top: 0; }
.fab-bars i:nth-child(2){ top: 8px; }
.fab-bars i:nth-child(3){ top: 16px; }

/* 開いたとき：×に変化 */
.fab-menu.is-open .fab-bars i:nth-child(1){
  top: 8px;
  transform: rotate(45deg);
}
.fab-menu.is-open .fab-bars i:nth-child(2){
  opacity: 0;
}
.fab-menu.is-open .fab-bars i:nth-child(3){
  top: 8px;
  transform: rotate(-45deg);
}

/* ===== フルスクリーンメニュー (ハンバーガーメニュータップ後) ===== */
.mobile-menu {
  position: fixed;
  inset: 0;                         /* ← これだけで全画面化（vh不要） */

  background: var(--page-bg, #FDF3E7);
  color: #111;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}


.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu__inner {
  width: min(92vw, 560px);
  margin-inline: auto;
  padding: clamp(24px, 7vw, 40px) 0;
}

/* メニューリスト */
.mobile-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(14px, 4vw, 20px);
  text-align: center;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .28s ease .18s, transform .28s ease .18s;
}
.mobile-menu.is-open .mobile-menu__list {
  opacity: 1;
  transform: none;
}

/* リンク */
.mobile-menu__link {
  display: inline-block;
  color: #111;
  font-weight: 300;
  text-decoration: none;
  letter-spacing: .04em;
  font-size: clamp(18px, 6vw, 28px);
  padding: .2em .5em;
  transition: transform .06s ease, filter .2s ease;
}
.mobile-menu__link:active { transform: translateY(1px); }
.mobile-menu__link:hover { filter: brightness(.96); }

/* 背面スクロール抑止 */
html.is-menu-open,
body.is-menu-open {
  overflow: hidden;
  height: 100%; /* 念のため */
}




/* ===== リリースしたら教えて セクション ===== */
.notify {
  padding-top: clamp(36px, 7vw, 72px);
  padding-bottom: clamp(40px, 8vw, 80px);
}


/* 見出し：FVの雰囲気に合わせる（Noto Sans・細め・字間広め、中央） */
.notify_title{
  font-family: inherit;         /* bodyのNoto Sans JP を継承 */
  font-weight: 300;             /* 細め */
  letter-spacing: .26em;        /* FVより少し控えめ */
  line-height: 1.15;
  font-size: clamp(20px, 6.2vw, 34px);
  text-align: center;
  margin: 0 0 18px;
  color: #111827;
}

/* 本文は中央揃え。幅は読みやすい程度に絞る */
.notify_body{ margin-top: 6px; }
.notify_text{
  font-family: inherit;
  color: #4b5563;
  font-weight: 400;
  font-size: clamp(15px, 4.2vw, 18px);
  line-height: 1.9;
  letter-spacing: .02em;

  /* 横幅の制御 */
  max-width: 42ch;         /* 本文は1行あたり40字前後が読みやすい */
  margin: 0 auto 16px;     /* 中央寄せ（左右auto） */
  padding-inline: 20px;    /* スマホでも左右に余白を確保 */

  /* 配置 */
  text-align: center;      /* ← 左揃えから中央揃えに変更 */
}


/* ボタン：アクセントカラー／中央配置 */
.notify_cta{ text-align: center; margin-top: 10px; }

.btn-accent{
  display: inline-block;
  padding: 12px 20px;
  border: none; border-radius: 9999px;
  background: var(--accent);
  color: #fff; font-family: inherit;
  font-size: clamp(14px, 3.8vw, 16px);
  font-weight: 600; letter-spacing: .04em;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  cursor: pointer;
  transition: filter .2s ease, transform .06s ease;
}
.btn-accent:hover{ filter: brightness(1.06); }
.btn-accent:active{ transform: translateY(1px); }

/* 余白・レイアウトの微調整（大きめ画面） */
@media (min-width: 768px){
  .notify_title{ margin-bottom: 22px; }
  .notify_text{ margin-bottom: 18px; }
}

/* 将来フォーム用の占位（今は非表示） */
.notify_placeholder{ margin-top: 16px; }



/* ===== リリースしたら教えてボタンタップ モーダル（完全版） ===== */
/* iOSの自動文字サイズ調整を固定（ズーム抑止の一助） */
html { -webkit-text-size-adjust: 100%; }

.modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  background: rgba(0,0,0,.48);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  /* 画面端にベタ付かない余白（端末に応じて可変 & セーフエリア配慮） */
padding: clamp(16px, 4vw, 32px);
  padding-top:  max(clamp(16px, 4vw, 32px), calc(env(safe-area-inset-top) + 8px));
  padding-bottom:max(clamp(16px, 4vw, 32px), calc(env(safe-area-inset-bottom) + 8px));
  overscroll-behavior: contain; /* モーダル内スクロールで背面を巻き込まない */
}
.modal.is-open{
  opacity: 1;
  pointer-events: auto;
}
.modal__overlay{
  position: absolute;
  inset: 0;
  cursor: pointer; /* 背景タップで閉じられることを示唆 */
}

/* コンテンツカード */
.modal__content{
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 24px 20px;
  width: min(92vw, 520px);
  /* 余白を引いた実高内に収めて、長文でもはみ出さない */
  max-height: calc(100% - 2 * clamp(16px, 4vw, 32px));
  overflow: auto;
  text-align: left;
  box-shadow: 0 6px 24px rgba(0,0,0,.20), 0 1px 0 rgba(0,0,0,.04) inset;
  animation: modalPop .25s ease;
  -webkit-overflow-scrolling: touch; /* iOS慣性スクロール */
}
@keyframes modalPop{
  0%{ transform:scale(.9); opacity:.6; }
  100%{ transform:scale(1); opacity:1; }
}

/* タイトル・説明文 */
.modal__title{
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #111827;
}
.modal__desc{
  font-size: 15px;
  line-height: 1.6;
  color: #374151;
  margin-bottom: 16px;
}

/* 入力フォーム行（高さをコンパクトに揃える） */
.modal__form{
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 12px;
}
.modal__input{
  flex: 1;
  padding: 8px 12px;               /* ← 10px → 8px にして高さを詰める */
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  font-size: 16px;                 /* iOSの自動ズーム防止の閾値 */
  line-height: 1.2;                /* 高さを抑える */
  outline: none;
  -webkit-appearance: none;        /* iOSの既定高さを抑制 */
  transition: border-color .15s ease, box-shadow .15s ease;
}
.modal__input::placeholder{ color:#9ca3af; }
.modal__input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

.modal__submit{
  padding: 8px 14px;               /* ← 10px → 8px にして入力と高さを合わせる */
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 16px;                 /* 一貫して16px以上 */
  line-height: 1.2;
  cursor: pointer;
  transition: filter .2s ease, transform .06s ease;
}
.modal__submit:hover{ filter: brightness(1.05); }
.modal__submit:active{ transform: translateY(1px); }

/* 免責注記 */
.modal__note{
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
}

/* 閉じるボタン（×） */
.modal__close{
  position: absolute;
  top: 10px; right: 14px;
  font-size: 24px;
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  line-height: 1;
}
.modal__close:hover{ color: #000; }

/* 動きを減らす設定のユーザー配慮 */
@media (prefers-reduced-motion: reduce){
  .modal{ transition: none; }
  .modal__content{ animation: none; }
}

/* ===== About セクション ===== */
.section-about{
  background: var(--accent); /* アクセントカラーを背景に */
  color: #fff;              
  /* 上部余白を小さめに調整（40px〜80px） */
  padding: clamp(40px, 8vw, 80px) 20px clamp(60px, 12vw, 100px);
  text-align: center;
}

.about_title{
  font-family: inherit;
  font-weight: 300;          
  letter-spacing: .26em;
  font-size: clamp(22px, 6.2vw, 34px);
  margin-bottom: 20px; /* タイトル下の余白は少しだけ */
  color: #fff;
}

.about_text{
  font-family: inherit;
  font-size: clamp(15px, 4.2vw, 18px);
  line-height: 1.9;
  letter-spacing: .02em;
  margin: 0 auto 16px;
  max-width: 720px;
  color: #fff;
  text-align: left;  /* ← 左揃えに変更 */
}


/* ===== Howto セクション ===== */
.section-howto{
  background: #FDF3E7;
  /* 上 / 左右 / 下（下だけ詰める） */
  padding: clamp(60px, 12vw, 100px) 20px clamp(6px, 1.6vw, 12px);
}

/* HOWTO最下要素の余白を潰して段差を防ぐ（保険） */
.section-howto > *:last-child { margin-bottom: 0; }

.howto_title{
  font-family: inherit;
  font-weight: 300;                  
  font-size: clamp(22px, 6.2vw, 34px);
  letter-spacing: .26em;
  text-align: center;
  margin: 0 auto 40px;
  color: #111827;
  position: relative;
  display: block;
  padding: 12px 0;
}
.howto_title::before,
.howto_title::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background-color: var(--accent, #f59e0b); /* アクセントカラーに変更 */
}
.howto_title::before{ top: 0; }
.howto_title::after{ bottom: 0; }

.howto_block{ margin-bottom: 48px; }

/* h3 を h2 と同トンマナに */
.howto_subtitle{
  font-family: inherit;
  font-weight: 300;                  
  font-size: clamp(18px, 5vw, 24px); 
  letter-spacing: .26em;
  line-height: 1.4;
  text-align: center;                
  margin-bottom: 20px;
  color: #111827;
}

.howto_text{
  font-size: clamp(15px, 4.2vw, 17px);
  line-height: 1.9;
  color: #374151;
  margin: 0 auto 16px;
  text-align: left;
  max-width: 640px;
  padding-inline: 20px;
}

.howto_list{
  list-style-type: disc;
  margin: 0 auto 20px auto;
  padding-left: 1.5em;
  max-width: 640px;
  color: #374151;
  text-align: left;
}
.howto_list li{
  margin-bottom: 6px;
  line-height: 1.8;
}




 /* 画像追加 */
.howto_image {
  display: block;
  width: 50%;           /* 少し小さめに（横幅を全体の90%に） */
  max-width: 600px;     /* 最大幅を制限（調整可） */
  height: auto;
  margin: 0 auto 20px;  /* 中央寄せ＋下に余白 */
}
/* PCで“見た目を一回り小さく”する */
/* PCでは画像を小さめにする */
@media (min-width: 641px) {
  .howto_image {
    width: 28%;       /* ← スマホより小さく表示（お好みで20〜35%で調整） */
    max-width: 260px; /* ← 上限（任意、外してもOK） */
  }
}


 /* 画像追加ここまで */





/* ===== Examples（活用例） ===== */
.section-examples{
  background: #FDF3E7;                 /* HOWTOと同色で一体感 */
  /* 上だけ0にしてくっつける / 下は従来どおり */
  padding: 0 20px clamp(36px, 8vw, 72px);
}

/* Examples最上要素の上マージンを潰す（段差対策） */
.section-examples > *:first-child { margin-top: 0; }

/* カード：上に少しだけ間を残す（0〜8pxで好み調整） */
.examples_acc{
  max-width: 640px;
  margin: 6px auto clamp(24px, 6vw, 48px);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  overflow: clip;
}


/* 見出し行（summary） */
.examples_summary{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
}
.examples_summary::-webkit-details-marker{ display:none; }

.examples_title{
  font-family: inherit;
  font-weight: 300;
  letter-spacing: .26em;
  font-size: clamp(18px, 5.6vw, 22px);
  color: #111827;
}

/* + ボタン（開いたら − に）— アクセントカラー連動 */
.examples_plus{
  position: relative;
  width: 24px; height: 24px;
  flex: 0 0 24px;
}
.examples_plus::before,
.examples_plus::after{
  content:"";
  position:absolute; inset:0;
  margin:auto;
  width: 16px; height: 2px;
  background: var(--accent, #f59e0b);         /* アクセントカラー */
  transition: transform .2s ease, opacity .2s ease, background-color .2s ease;
}
.examples_plus::after{ transform: rotate(90deg); }

/* 開いたときは縦棒を消して「－」に */
.examples_acc[open] .examples_plus::after{
  opacity:0; transform: rotate(90deg) scaleX(0);
}

/* 本文エリア */
.examples_body{
  padding: 4px 18px 18px;
  border-top: 1px solid #e5e7eb;
  /* 中身はJSでheightを制御する */
  overflow: hidden;
  height: 0;
  transition: height 320ms ease;
}

.examples_list{
  list-style: disc;
  padding-left: 1.4em;
  margin: 10px 0 14px;
  color: #374151;
  line-height: 1.9;
  font-size: clamp(15px, 4.2vw, 17px);
}
/* マーカーをアクセントカラーに */
.examples_list li::marker {
  color: var(--accent, #f59e0b);
}
.examples_list li{ margin-bottom: 6px; }

.examples_note{
  color: #374151;
  font-size: clamp(14px, 3.8vw, 16px);
  line-height: 1.9;
}

/* キーボード操作時のフォーカスリング（アクセント色ベース） */
.examples_summary:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent);
  outline-offset: 2px;
}

/* 省モーション対応 */
@media (prefers-reduced-motion: reduce){
  .examples_body{ transition: none; }
}





/* ===== 開発のきっかけ（トンマナ統一・Safari透け対策版） ===== */

/* 元の見出し（セクション内） */
.wj-section-title {
  background: #FDF3E7;
  color: #111827;
  text-align: center;
  font-weight: 300;
  font-size: clamp(22px, 6.2vw, 34px);
  letter-spacing: .26em;
  padding: 16px 0;
  margin: 0 auto 36px;
  position: relative;
  z-index: 1; /* ← fixedはbody直下でz-indexを上げるのでここは1でOK */
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

/* 画面上に固定表示する複製タイトル（← body直下に置く版） */
.wj-section-title.fixed {
  position: fixed;
  top: 0;              /* URLバーの出入りに引きずられない */
  left: 0;
  right: 0;
  width: 100%;
  background: #FDF3E7;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%) translateZ(0); /* iOS 固定ズレ対策 */
  will-change: transform;
  z-index: 999;        /* 充分に前面へ */
  transition: transform 0.3s ease, opacity 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.wj-section-title.fixed.visible {
  opacity: 1;
  transform: translateY(0) translateZ(0);
  pointer-events: auto;
}

/* iPhone用：最上部の帯（body直下に置く） */
.safe-top-fill {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top, 20px);
  background: #FDF3E7;
  z-index: 998;
  display: none; /* デフォ非表示、bodyにフラグが立つと表示 */
}
/* 可視化トリガは「bodyにフラグ」方式に変更（兄弟セレクタ依存をやめる） */
body.is-fixed-title .safe-top-fill { display: block; }

/* プログレスバー（複製タイトル内） */
.wj-section-title .progress-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: var(--accent, #f59e0b);
  width: 0%;
  transition: width 0.2s ease;
}

/* 本文エリア */
.reason_body {
  font-family: inherit;
  font-weight: 300;
  font-size: clamp(16px, 4.5vw, 18px);
  line-height: 1.8;
  color: #111827;
  margin: 0 auto;
  padding: 0 20px;
  max-width: 720px;
  margin-top: 20px;
}

/* 固定見出しが出ている間だけ、そのセクションの本文トップに余白を足す */
/* （fixed要素をbody直下に出したので、セクションにフラグを立てる） */
.section-reason.is-fixed-active .reason_body {
  padding-top: 60px;
}



/* ===== Roadmap（私辞書の今後） ===== */
.section-roadmap {
  background: #FDF3E7;
  padding: clamp(56px, 12vw, 100px) 20px;
  color: #111827;
  font-weight: 300;
  text-align: center;
}

/* 見出し（h2） */
.roadmap-title {
  position: relative;
  text-align: center;
  font-size: clamp(24px, 6.5vw, 36px);
  letter-spacing: .06em;
  margin: clamp(60px, 14vw, 100px) auto clamp(36px, 6vw, 56px);
  font-weight: 300;
  padding: 12px 0;
}

/* 見出し上下のライン（Howtoと統一：変数対応） */
.roadmap-title::before,
.roadmap-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--accent, #f59e0b); /* ← CSS変数対応 */
}
.roadmap-title::before { top: 0; }
.roadmap-title::after  { bottom: 0; }

/* リスト全体 */
.roadmap-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(56px, 10vw, 80px);
}

/* 各アイテム */
.roadmap-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 520px;
  width: 100%;
  text-align: left;
}

/* ---------- サムネイル画像 ---------- */
.roadmap-thumb {
  margin: 0 auto 24px;
  display: block;
  max-width: 260px; /* item1基準サイズ */
  aspect-ratio: 1 / 1;
}

.roadmap-item:nth-of-type(2) .roadmap-thumb {
  max-width: 150px; /* item2サイズ */
  aspect-ratio: 1 / 1;
}

.roadmap-thumb img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: opacity .25s ease;
}

/* 季節切替時のフェード */
.seasonal-img.is-updating {
  opacity: 0.001;
}

/* ---------- コンテンツ（番号＋タイトル＋文章） ---------- */
.roadmap-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 番号 */
.roadmap-index {
  font-size: clamp(16px, 3vw, 20px);
  letter-spacing: .06em;
  color: rgba(17,24,39,.65);
  margin-bottom: 4px;
}

/* タイトル（h3） */
.roadmap-heading {
  font-size: clamp(21px, 4.8vw, 27px);
  font-weight: 300;
  letter-spacing: .05em;
  margin: 0 0 10px;
  color: #111827;
}

/* テキスト（本文） */
.roadmap-text {
  font-size: clamp(16px, 4vw, 18px);
  line-height: 1.9;
  color: #111827;
  margin: 0;
}

/* ---------- スマホ調整 ---------- */
@media (max-width: 640px) {
  .roadmap-item {
    max-width: 90%;
  }
  .roadmap-item:nth-of-type(1) .roadmap-thumb {
    width: 180px; /* 初期版リリース */
  }
  .roadmap-item:nth-of-type(2) .roadmap-thumb {
    width: 210px; /* 大型アップデート */
  }
}



/* ===== JS起動前の一瞬のチラ見え対策（FOUC防止） ===== */
/* スクロール禁止 */
.js-pending html, .js-pending body { overflow: hidden; height: 100%; }
/* 画面をFVの背景色で覆う（要素追加なし・疑似要素だけでOK） */
.js-pending body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: #FDF3E7;     /* FVと同じ背景色 */
  z-index: 9999;
}
/* ヒーローの中身は隠しておく（JSでcenter-stageを付けるまで見せない） */
.js-pending .hero-stack{ visibility: hidden; }