/* ================================================================
   ゴルタビ GCガイドブック 統合CSS gb-guidebook.css
   版: 20260816_v7 (18n=クロスフェード白フラッシュ修正を追加)
   ----------------------------------------------------------------
   これがCSSの唯一の実体(マスターファイル)です。
   構成: 1〜17(ベース+目次) / 18a-18b(第4章テーマ+トピック共通+アサイー)
         / 18c(ナイスビュー) / 18d(背景つなぎ目対策) / 18e(神コスパ)
         / 18f(カフェ英語) / 18g(章扉) / 18h(しくじり帖コラム)
   ----------------------------------------------------------------
   【運用ルール】
   ・各カスタムHTMLブロックのCSSタブには @import 1行だけを貼る:
     @import url("https://gold-coast-journey.com/wp-content/themes/swell_child/gb/gb-guidebook.css?v=20260816");
   ・このファイルを更新したら ?v= の日付を必ず上げる(キャッシュ対策)
   ・制作中の新セクションは、作業中ブロックのCSSタブで@importの下に
     直書き→確定したらこのファイル末尾に移す(2段構え運用)
   ================================================================ */

/* ================================================================
   CSSタブに貼る内容 ここから(全文を貼り直すこと)
   ================================================================ */

/* ---- 1. トークン + 章テーマ(海ブルー×オレンジ) ---- */
.gb-root{
  --gb-orange:#F2772E;
  --gb-dark:#333333;
  --gb-line:#D9D7D0;
  --gb-radius:14px;
  --gb-maxw:430px;   /* モバイル固定幅レイアウト:PCでもこの幅で表示(レスポンシブ分岐なし) */
  --gb-font-jp:'Noto Sans JP',sans-serif;
  --gb-font-en:'Montserrat',sans-serif;
  --gb-font-hand:'Yomogi',cursive;
  font-family:var(--gb-font-jp);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  position:relative;
  isolation:isolate;
}
.gb-root.gb-theme-spot{
  /* ▼背景画像はHTML側で指定できます:
     <div class="gb-root gb-theme-spot" style="--gb-bg-image:url('画像URL')"> のように書く。
     未指定ならグラデーション(--gb-bg-color)が使われます。 */
  --gb-bg-image:none;
  --gb-bg-color:linear-gradient(180deg,#CDE9F2 0%,#BFE0EE 45%,#CBE6EF 100%);
  --gb-bg-overlay:rgba(255,255,255,.10); /* 画像時の白ベール 0〜.35 */
  --gb-page-color:#FFFFFF;               /* PC時、誌面の外側(左右余白)の地色 */
  --gb-ink:#1F4258;
  --gb-accent:var(--gb-orange);
  --gb-btn-shadow:#1F4258;
  color:var(--gb-ink);
}
/* 誌面の外側の地色。PC(誌面幅超)でのみ見える。スマホでは誌面が画面いっぱいなので見えない */
.gb-root{position:relative;z-index:1;background:transparent;overflow-x:clip;}
.gb-root *,.gb-root *::before,.gb-root *::after{box-sizing:border-box;}
.gb-root img{max-width:100%;height:auto;display:block;}
/* SWELLの見出し装飾(オレンジ縦線・下線・::before/::after等)を全面無効化。
   このLPはSEO構成不要のため、gb独自デザインで統一する。 */
.gb-root h1,.gb-root h2,.gb-root h3,.gb-root h4,.gb-root h5,.gb-root h6{
  border:none!important;background:none!important;padding:0;margin:0;
  font-weight:inherit;line-height:inherit;
}
.gb-root h1::before,.gb-root h2::before,.gb-root h3::before,.gb-root h4::before,.gb-root h5::before,.gb-root h6::before,
.gb-root h1::after,.gb-root h2::after,.gb-root h3::after,.gb-root h4::after,.gb-root h5::after,.gb-root h6::after{
  content:none!important;display:none!important;
}
/* 誌面本体。背景はこの中だけに敷く=スマホ幅の紙面に見える */
.gb-wrap{
  position:relative;
  max-width:var(--gb-maxw);margin:0 auto;padding:32px 20px 72px;
  /* 背景は固定レイヤー(.gb-bg-fixed / JSがbody直下に生成)が担当 */
}
/* スマホ(〜480px):.gb-root自体をSWELL本文コンテナの左右余白の外へ引き出し、
   画面いっぱい(100vw)に広げる。基準を最外側の.gb-rootに置くことで、
   親(lp-content__postContent等)のpadding/max-widthが何であっても画面端まで確実に届く。
   境界を480pxにして、大型スマホでも誌面の左右に白余白・影が出ないようにする。 */
@media (max-width:480px){
  .gb-root{
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }
  .gb-wrap{max-width:none;}
}

/* ---- 2. 柱 ---- */
.gb-root .gb-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;}
.gb-root .gb-head-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:.06em;}
.gb-root .gb-head-brand small{border-left:1.5px solid currentColor;padding-left:10px;font-family:var(--gb-font-en);font-weight:600;font-size:9px;letter-spacing:.22em;line-height:1.5;opacity:.75;}
.gb-root .gb-head-ch{font-family:var(--gb-font-en);font-weight:700;font-size:12px;letter-spacing:.2em;color:var(--gb-accent);}

/* ---- 3. 章タイトル・語りテキスト ---- */
.gb-root .gb-ch-title{text-align:center;margin:8px 0 20px;}
.gb-root .gb-ch-title .en{font-family:var(--gb-font-en);font-weight:700;font-size:38px;letter-spacing:.08em;color:var(--gb-accent);line-height:1.2;margin:0;}
.gb-root .gb-ch-title .ja{font-size:16px;font-weight:700;margin-top:8px;letter-spacing:.12em;}
.gb-root .gb-op-text{font-size:15.5px;line-height:2.1;margin:22px 0;}
.gb-root .gb-op-text.em{font-weight:700;font-size:17.5px;}
.gb-root .gb-op-text .mk{background:linear-gradient(transparent 60%,rgba(242,119,46,.35) 60%);font-weight:700;}

/* ---- 4. 写真プレースホルダー ---- */
/* 使い方:
   ・写真なし(仮): <div class="gb-ph main">写真:〇〇</div>  … グレー枠のまま
   ・写真あり    : <div class="gb-ph main"><img src="画像URL" alt="説明"></div>
   imgを入れると、枠いっぱいに画像が収まります(角丸・トリミング込み)。 */
.gb-root .gb-ph{position:relative;overflow:hidden;background:#E9EDEA;display:flex;align-items:center;justify-content:center;text-align:center;color:#9aa5a0;font-size:12px;letter-spacing:.06em;line-height:1.6;}
.gb-root .gb-ph.main{aspect-ratio:4/3;}
.gb-root .gb-ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* URL未入力(src="")の画像は非表示にして、下地のグレー枠(プレースホルダー)を見せる */
.gb-root .gb-ph>img[src=""],.gb-root .gb-ph>img:not([src]){display:none;}
.gb-root .gb-cap{font-size:12px;opacity:.65;margin:8px 2px 0;text-align:right;}

/* ---- 5. 装飾スロット(ディレクター作画の差し込み位置) ---- */
/* 使い方: 点線枠 <div class="gb-deco-slot ...">説明</div> の中身を
   <div class="gb-deco-slot ..."><img src="装飾画像URL" alt=""></div> に置き換える。
   画像(透過PNG/WebP)を入れると、点線枠・背景が消えて装飾だけが表示されます。 */
.gb-root .gb-deco-slot{border:2px dashed var(--gb-accent);border-radius:10px;color:var(--gb-accent);font-size:12px;letter-spacing:.06em;display:flex;align-items:center;justify-content:center;text-align:center;padding:14px;margin:16px auto;max-width:340px;background:rgba(255,255,255,.35);}
.gb-root .gb-deco-slot.map{max-width:none;aspect-ratio:4/5;font-size:14px;margin:26px 0;}
.gb-root .gb-deco-slot.arrow{max-width:150px;padding:20px 10px;}
/* 文字画像スロット(セリフや問いかけの文字画像。横幅いっぱい) */
.gb-root .gb-deco-slot.textimg{max-width:none;margin:18px 0;}
/* 画像が入ったら枠・背景・余白・説明文字を消して、透過装飾だけ見せる(src未入力時はプレースホルダーのまま) */
.gb-root .gb-deco-slot:has(img[src]:not([src=""])){border:none;background:none;padding:0;font-size:0;}
.gb-root .gb-deco-slot>img{width:100%;height:100%;object-fit:contain;display:block;}
.gb-root .gb-deco-slot>img[src=""]{display:none;}

/* ---- 6. メインビジュアル + 切り抜き写真 ---- */
/* 切り抜きの使い方: <div class="gb-cutout ..."><div class="gb-ph">切り抜き○○</div></div> の
   gb-ph の中身を <img src="透過画像URL" alt=""> に置き換える。
   透過PNG/WebPを入れると、円・点線が消えて切り抜きの形そのままで表示されます。 */
.gb-root .gb-hero{position:relative;margin:26px 0 14px;}
.gb-root .gb-cutout{position:absolute;z-index:3;pointer-events:none;filter:drop-shadow(0 5px 9px rgba(31,66,88,.22));transform:rotate(var(--r,0deg));transform-origin:center bottom;}
.gb-root .gb-cutout .gb-ph{aspect-ratio:1/1;border-radius:50%;background:rgba(255,255,255,.6);border:2px dashed var(--gb-accent);color:var(--gb-accent);font-size:9.5px;}
/* 画像が入ったら円マスク・点線・背景を解除(src未入力時は点線円のまま) */
.gb-root .gb-cutout .gb-ph:has(img[src]:not([src=""])){border-radius:0;background:none;border:none;aspect-ratio:auto;overflow:visible;font-size:0;}
.gb-root .gb-cutout .gb-ph:has(img[src]:not([src=""]))>img{position:static;width:100%;height:auto;object-fit:contain;}
.gb-root .gb-cut-tl{top:-14px;left:-4px;width:84px;--r:-8deg;}
.gb-root .gb-cut-tr{top:-12px;right:-2px;width:76px;--r:9deg;}
.gb-root .gb-cut-br{bottom:-16px;right:-4px;width:92px;--r:6deg;}
/* 被写体別アニメーション: sway=ゆらゆら(コアラ・木) flap=羽ばたき(鳥)
   hop=跳ねる(カンガルー) float=ふわふわ(雲・板) wobble=ぷるん(食べ物) */
@keyframes gbSway{0%,100%{transform:rotate(var(--r,0deg));}50%{transform:rotate(calc(var(--r,0deg) + 4deg));}}
@keyframes gbFlap{0%,100%{transform:rotate(var(--r,0deg)) translateY(0);}25%{transform:rotate(calc(var(--r,0deg) - 3deg)) translateY(-6px);}75%{transform:rotate(calc(var(--r,0deg) + 3deg)) translateY(-2px);}}
@keyframes gbHop{0%,60%,100%{transform:rotate(var(--r,0deg)) translateY(0);}30%{transform:rotate(var(--r,0deg)) translateY(-12px);}45%{transform:rotate(var(--r,0deg)) translateY(2px);}}
@keyframes gbFloat{0%,100%{transform:rotate(var(--r,0deg)) translate(0,0);}50%{transform:rotate(var(--r,0deg)) translate(4px,-9px);}}
@keyframes gbWobble{0%,100%{transform:rotate(var(--r,0deg)) scale(1,1);}30%{transform:rotate(var(--r,0deg)) scale(1.04,.96);}60%{transform:rotate(var(--r,0deg)) scale(.97,1.03);}}
.gb-root .gb-anim-sway{animation:gbSway 4.5s ease-in-out infinite;}
.gb-root .gb-anim-flap{animation:gbFlap 3s ease-in-out infinite;}
.gb-root .gb-anim-hop{animation:gbHop 3.4s ease-in-out infinite;}
.gb-root .gb-anim-float{animation:gbFloat 6s ease-in-out infinite;}
.gb-root .gb-anim-wobble{animation:gbWobble 3.8s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){.gb-root [class*="gb-anim-"]{animation:none!important;}}

/* ---- 7. キャラ吹き出し ---- */
/* キャラ画像の使い方: <div class="gb-chara-badge">コアラ画像</div> の中身を
   <div class="gb-chara-badge"><img src="キャラ画像URL" alt="コアラ"></div> に置き換える。 */
.gb-root .gb-chara{display:flex;align-items:center;gap:10px;margin:20px 0;}
.gb-root .gb-chara-badge{position:relative;overflow:hidden;width:52px;height:52px;border-radius:50%;background:#fff;border:1.5px solid var(--gb-ink);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:#8A8A8A;text-align:center;line-height:1.3;}
.gb-root .gb-chara-badge:has(img[src]:not([src=""])){font-size:0;}
.gb-root .gb-chara-badge>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.gb-root .gb-chara-badge>img[src=""]{display:none;}
/* ▼吹き出しの丸ごと画像差し替え:
   .gb-chara-img の src にURLを入れると、テキスト版(バッジ+吹き出し)が消えて
   画像だけが表示される。未入力なら従来のテキスト吹き出しのまま。 */
.gb-root .gb-chara-img{display:none;width:100%;height:auto;}
.gb-root .gb-chara:has(.gb-chara-img[src]:not([src=""])) .gb-chara-badge,
.gb-root .gb-chara:has(.gb-chara-img[src]:not([src=""])) .gb-chara-bubble{display:none;}
.gb-root .gb-chara:has(.gb-chara-img[src]:not([src=""])) .gb-chara-img{display:block;}


.gb-root .gb-chara-bubble{position:relative;background:#fff;border:1.5px solid var(--gb-ink);border-radius:14px;padding:10px 14px;font-size:13px;line-height:1.7;}
.gb-root .gb-chara-bubble::before{content:"";position:absolute;left:-8px;top:20px;width:12px;height:12px;background:#fff;border-left:1.5px solid var(--gb-ink);border-bottom:1.5px solid var(--gb-ink);transform:rotate(45deg);}

/* ---- 8. メインボタン(白地×オレンジ) ---- */
.gb-root .gb-enter{display:flex;justify-content:center;margin:34px 0 8px;}
.gb-root .gb-enter button{appearance:none;-webkit-appearance:none;cursor:pointer;font-family:var(--gb-font-jp);font-weight:700;font-size:16px;letter-spacing:.06em;color:var(--gb-accent);background:#fff;border:2px solid var(--gb-accent);border-radius:999px;padding:18px 36px;box-shadow:0 4px 0 var(--gb-btn-shadow);transition:transform .12s,box-shadow .12s;}
.gb-root .gb-enter button::after{content:" →";}
.gb-root .gb-enter button:active{transform:translateY(4px);box-shadow:0 0 0 var(--gb-btn-shadow);}


/* ---- 固定背景レイヤー(章のテーマカラー・画面に固定) ----
   .gb-root の最初の子として JS が生成。position:sticky + 負マージンで
   「スクロールしても画面に張り付く背景」を実現。
   章の変わり目では背景色が約0.8秒かけてふわっとクロスフェードする。
   章の色は .gb-root の data-gb-theme 属性で宣言(JSが読んで適用):
     <div class="gb-root" data-gb-theme="linear-gradient(180deg,#CDE9F2 0%,#BFE0EE 45%,#CBE6EF 100%)">
   単色なら data-gb-theme="#FBF3E4" のように色コードだけでもOK。 */
.gb-bg-fixed{
  position:sticky;top:0;
  height:100vh;height:100dvh;
  margin-bottom:-100vh;margin-bottom:-100dvh;
  z-index:-1;pointer-events:none;
  /* PC:誌面幅(430px)の帯として中央に。スマホ(480px以下):画面全幅 */
  width:100%;max-width:430px;
  margin-left:auto;margin-right:auto;
}
@media (max-width:480px){
  .gb-bg-fixed{max-width:none;}
}
/* 2枚の色レイヤーを重ね、opacityのクロスフェードで章の色を切り替える */
.gb-bg-fixed .gb-bg-layer{
  position:absolute;inset:0;
  background:linear-gradient(180deg,#CDE9F2 0%,#BFE0EE 45%,#CBE6EF 100%);
  opacity:1;transition:opacity .8s ease;
}
.gb-bg-fixed .gb-bg-layer.back{opacity:0;}

/* ---- 9. モーダル ---- */
.gb-modal{position:fixed;inset:0;z-index:9999;display:none;}
.gb-modal.is-open{display:block;}
/* オーバーレイは暗くしない(透明)。背景タップで閉じる機能だけ残す */
.gb-modal-ov{position:absolute;inset:0;background:transparent;}
/* パネル:画面のほぼ全面(上下左右に少し余白)。中身が短くても縮まない固定サイズ */
.gb-modal-panel{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:calc(100% - 28px);max-width:430px;
  height:calc(100vh - 48px);  /* dvh非対応ブラウザ用フォールバック */
  height:calc(100dvh - 48px); /* 上下24pxずつの対称余白 */
  background:#fff;border:1.5px solid #F2772E;border-radius:16px;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 10px 40px rgba(31,66,88,.18);
}
.gb-modal-bar{display:flex;align-items:center;justify-content:space-between;background:#F2772E;color:#fff;padding:10px 14px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;letter-spacing:.12em;flex-shrink:0;}
.gb-modal-x{appearance:none;-webkit-appearance:none;background:none;border:none;color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:2px 4px;}
.gb-modal-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px 18px 28px;color:#333333;}
.gb-modal-body h4{font-size:21px;font-weight:700;text-align:center;margin:2px 0 16px;}
.gb-modal-body p{font-size:15px;line-height:2.0;margin:14px 0;}
.gb-modal-body .gb-cap{text-align:left;font-style:italic;opacity:.7;}
/* データ箇条書き:文字小さめ・濃いグレー */
.gb-data-list{border-top:1px solid #D9D7D0;margin:20px 0 0;padding:14px 0 0;font-size:12.5px;line-height:1.95;color:#4a4a4a;}
.gb-data-list li{list-style:none;display:flex;gap:10px;}
.gb-data-list li b{flex-shrink:0;min-width:5.5em;font-weight:700;color:#4a4a4a;}
.gb-map-btn{display:flex;justify-content:center;margin:18px 0 4px;}
.gb-map-btn a{display:inline-block;text-decoration:none;font-weight:700;font-size:14px;color:#fff;background:#1F4258;border-radius:999px;padding:12px 34px;}
/* 前後矢印:モーダルの左右の縁に半分かかる四角ボタン(gb-modal直下・パネルの外) */
.gb-modal-arrow{
  position:absolute;top:50%;z-index:6;
  width:40px;height:48px;
  border:1.5px solid #F2772E;border-radius:6px;
  background:#fff;color:#F2772E;
  font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 3px 10px rgba(31,66,88,.2);
  appearance:none;-webkit-appearance:none;
  transform:translateY(-50%);
}
/* パネルの左右縁に半分かける:縁位置 = 50% ± パネル幅/2。そこから矢印幅の半分(20px)外へ */
.gb-modal-arrow.prev{left:max(calc(50% - min(100% - 28px, 430px) / 2 - 20px), 2px);}
.gb-modal-arrow.next{right:max(calc(50% - min(100% - 28px, 430px) / 2 - 20px), 2px);}
.gb-modal-arrow:active{transform:translateY(-50%) scale(.92);}
.gb-modal-arrow:disabled{opacity:0;pointer-events:none;}
/* 下部ナビ:スポット名のみ(SPOT文字なし) */
.gb-modal-nav{display:flex;justify-content:space-between;border-top:1px solid #D9D7D0;flex-shrink:0;}
.gb-modal-nav button{appearance:none;-webkit-appearance:none;background:#fff;border:none;cursor:pointer;font-family:'Noto Sans JP',sans-serif;font-size:12px;font-weight:700;color:#333333;padding:12px 14px;max-width:50%;line-height:1.4;text-align:left;}
.gb-modal-nav button:last-child{text-align:right;}
.gb-modal-nav button:disabled{opacity:.35;cursor:default;}
.gb-scroll-lock{overflow:hidden;}

/* ---- 10. 右下追従の目次ボタン(全章共通) ---- */
/* 目次ボタン(単独ブロック化・JSがbody直下へ移動するためroot非依存) */
.gb-fab{position:fixed;right:16px;bottom:20px;z-index:900;}
@media (min-width:768px){
  /* PC:誌面の右外に配置(誌面幅430px + 余白) */
  .gb-fab{right:calc(50% - 215px - 90px);bottom:40px;}
}
.gb-fab a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:62px;height:62px;border-radius:50%;text-decoration:none;background:#fff;border:2px solid #F2772E;color:#F2772E;box-shadow:0 4px 14px rgba(31,66,88,.28);}
.gb-fab .ic{font-size:17px;line-height:1;}
.gb-fab .tx{font-size:9.5px;font-weight:700;letter-spacing:.04em;}
.gb-fab a:active{transform:translateY(2px);}

/* ---- 14. 章末サムネイルグリッド ---- */
.gb-root .gb-grid-sec{margin:56px 0 20px;}
.gb-root .gb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.gb-root .gb-grid-cell{position:relative;cursor:pointer;border:none;padding:0;background:none;font-family:var(--gb-font-jp);display:flex;flex-direction:column;gap:4px;}
.gb-root .gb-grid-ph{position:relative;overflow:hidden;aspect-ratio:1/1;border-radius:10px;background:#E9EDEA;display:flex;align-items:center;justify-content:center;color:#9aa5a0;font-size:10px;border:1.5px solid transparent;transition:border-color .1s,transform .1s;}
/* グリッド写真:<span class="gb-grid-ph">写真<img src="URL"></span> のsrcにURLを入れると表示 */
.gb-root .gb-grid-ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.gb-root .gb-grid-ph>img[src=""],.gb-root .gb-grid-ph>img:not([src]){display:none;}
.gb-root .gb-grid-ph:has(img[src]:not([src=""])){color:transparent;}
.gb-root .gb-grid-cell:active .gb-grid-ph{transform:translateY(2px);border-color:var(--gb-accent);}
.gb-root .gb-grid-no{position:absolute;top:5px;left:6px;font-family:var(--gb-font-en);font-weight:700;font-style:italic;font-size:14px;color:#fff;text-shadow:0 1px 3px rgba(31,66,88,.6);}
.gb-root .gb-grid-name{font-size:10.5px;font-weight:700;color:var(--gb-ink);line-height:1.3;text-align:center;}

/* ---- 15. うーんゾーン(HONEST TALK)の園区切り ---- */
.gb-root .gb-honest-park{border-top:1px dashed var(--gb-line);padding-top:16px;margin-top:18px;}
.gb-root .gb-honest-park:first-of-type{border-top:none;padding-top:0;margin-top:0;}
.gb-root .gb-honest-name{font-size:17px;font-weight:700;color:var(--gb-dark);margin:0 0 10px;}

/* ---- 11. ヒーローコラージュ(章メインビジュアル・写真4枚+コアラバイク) ---- */
/* タイトル裏のヤシの木レイヤー */
.gb-root .gb-hero-title{position:relative;}
.gb-root .gb-palm{
  display:none;position:absolute;z-index:-1;
  top:-26px;right:-14px;width:150px;height:auto;
  transform-origin:bottom center;
  animation:gbPalmSway 5s ease-in-out infinite;
}
.gb-root .gb-palm[src]:not([src=""]){display:block;}
@keyframes gbPalmSway{0%,100%{transform:rotate(-1.6deg);}50%{transform:rotate(1.8deg);}}
.gb-root .gb-hero-title .en,.gb-root .gb-hero-title .ja{position:relative;z-index:1;}

/* コラージュ(1枚画像・誌面の左右端まで断ち落とし) */
.gb-root .gb-hero-collage{
  position:relative;
  margin:18px -20px 20px; /* .gb-wrapの左右padding(20px)を打ち消して端まで */
}
.gb-root .gb-collage-ph{width:100%;}
/* URL未入力時のプレースホルダー(参考カンプの縦横比) */
.gb-root .gb-collage-ph:not(:has(img[src]:not([src=""]))){aspect-ratio:100/106;}
/* 画像が入ったら:枠を消して画像そのまま(高さは画像の比率に従う) */
.gb-root .gb-collage-ph:has(img[src]:not([src=""])){background:none;font-size:0;overflow:visible;}
.gb-root .gb-collage-ph:has(img[src]:not([src=""]))>img{position:static;width:100%;height:auto;object-fit:unset;}

/* コアラ×バイクのイラスト(左下に重なる) */
.gb-root .gb-koala-rider{
  display:none;position:absolute;z-index:3;
  left:-7%;bottom:2%;width:46%;height:auto;
  filter:drop-shadow(0 6px 10px rgba(31,66,88,.25));
  animation:gbKoalaCruise 5s ease-in-out infinite;
}
.gb-root .gb-koala-rider[src]:not([src=""]){display:block;}
/* ゆっくり左右に走る(のんびりクルージング感) */
@keyframes gbKoalaCruise{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(9%);}
}

/* コラージュの登場:フェードでふわっと浮き出る(下から+透明→表示)。登場後は静止 */
.gb-reveal[data-reveal="collage"]{transform:none;transition:opacity .2s ease;}
.gb-reveal[data-reveal="collage"] .gb-collage-ph{opacity:0;transform:translateY(26px);transition:opacity 1s ease,transform 1s cubic-bezier(.22,.8,.35,1);}
.gb-reveal[data-reveal="collage"].is-in .gb-collage-ph{opacity:1;transform:translateY(0);}
/* コアラは画像が落ち着いてからふわっと */
.gb-reveal[data-reveal="collage"] .gb-koala-rider{opacity:0;transition:opacity .6s ease .8s;}
.gb-reveal[data-reveal="collage"].is-in .gb-koala-rider{opacity:1;}

@media (prefers-reduced-motion:reduce){
  .gb-root .gb-palm,.gb-root .gb-koala-rider{animation:none!important;}
  .gb-reveal[data-reveal="collage"],.gb-reveal[data-reveal="collage"] .gb-collage-ph,.gb-reveal[data-reveal="collage"] .gb-koala-rider{opacity:1!important;transform:none!important;transition:none!important;animation:none!important;}
}
@media print{
  .gb-reveal[data-reveal="collage"],.gb-reveal[data-reveal="collage"] .gb-collage-ph,.gb-reveal[data-reveal="collage"] .gb-koala-rider{opacity:1!important;transform:none!important;animation:none!important;}
}


/* ---- 12. 印刷(PDF特典):モーダル全展開・UI非表示 ---- */
@media print{
  .gb-bg-fixed{display:none!important;}
  .gb-root{background:#fff!important;}
  .gb-root .gb-wrap{background:#fff!important;box-shadow:none!important;max-width:none;}
  .gb-root .gb-enter,.gb-fab,.gb-root .gb-deco-slot{display:none!important;}
  .gb-modal-x,.gb-modal-nav,.gb-modal-arrow{display:none!important;}
  .gb-modal{display:block!important;position:static;}
  .gb-modal-ov{display:none;}
  .gb-modal-panel{position:static;inset:auto;transform:none;width:auto;height:auto;max-height:none;border:1px solid #ccc;margin:16px 0;page-break-inside:avoid;}
  .gb-modal-body{overflow:visible;}
}
/* ================================================================
   CSSタブに貼る内容 ここまで
   ================================================================ */

/* body直下に移動したモーダル内でも部品が効くよう、モーダル配下のスコープを追加 */
.gb-modal .gb-ph{position:relative;overflow:hidden;background:#E9EDEA;display:flex;align-items:center;justify-content:center;text-align:center;color:#9aa5a0;font-size:12px;letter-spacing:.06em;line-height:1.6;}
.gb-modal .gb-ph.main{aspect-ratio:4/3;}
.gb-modal .gb-ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.gb-modal .gb-ph>img[src=""],.gb-modal .gb-ph>img:not([src]){display:none;}
.gb-modal .gb-cap{font-size:12px;opacity:.65;margin:8px 2px 0;text-align:right;}
.gb-modal *,.gb-modal *::before,.gb-modal *::after{box-sizing:border-box;}
.gb-modal img{max-width:100%;height:auto;display:block;}
.gb-modal{font-family:'Noto Sans JP',sans-serif;line-height:1.9;-webkit-font-smoothing:antialiased;}
.gb-modal h4{border:none!important;background:none!important;padding:0;margin:0;}
.gb-modal h4::before,.gb-modal h4::after{content:none!important;display:none!important;}
/* うーんゾーンの園区切り(モーダル内) */
.gb-modal .gb-honest-park{border-top:1px dashed #D9D7D0;padding-top:16px;margin-top:18px;}
.gb-modal .gb-honest-park:first-of-type{border-top:none;padding-top:0;margin-top:0;}
.gb-modal .gb-honest-name{font-size:17px;font-weight:700;color:#333;margin:0 0 10px;}

/* ================================================================
   ---- 16. スクロール登場アニメーション(gb-reveal) ----
   JSが .gb-reveal 要素を監視し、画面に入ったら .is-in を付与する。
   data-reveal 属性で演出タイプを指定:
     fade-up(既定) / pop / zoom / marker / stagger(子要素を時間差で)
   data-reveal-delay="200" でミリ秒遅延も指定可。
   ================================================================ */
.gb-reveal{opacity:0;}
.gb-reveal.is-in{opacity:1;}

/* fade-up: 下からふわっと(既定) */
.gb-reveal[data-reveal="fade-up"],.gb-reveal:not([data-reveal]){transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.8,.35,1);}
.gb-reveal[data-reveal="fade-up"].is-in,.gb-reveal:not([data-reveal]).is-in{transform:translateY(0);}

/* pop: ポンッと弾んで登場(装飾・バッジ向け) */
.gb-reveal[data-reveal="pop"]{transform:scale(.6);transition:opacity .45s ease,transform .6s cubic-bezier(.34,1.56,.64,1);}
.gb-reveal[data-reveal="pop"].is-in{transform:scale(1);}

/* zoom: ゆっくりフェード+わずかに縮小から等倍へ(イラストマップ・写真向け) */
.gb-reveal[data-reveal="zoom"]{transform:scale(1.06);transition:opacity 1s ease,transform 1.2s cubic-bezier(.22,.8,.35,1);}
.gb-reveal[data-reveal="zoom"].is-in{transform:scale(1);}

/* marker: 文字のハイライトが左から引かれる(.mk と併用) */
.gb-reveal[data-reveal="marker"]{transform:none;transition:opacity .6s ease;}
.gb-reveal[data-reveal="marker"] .mk{background:linear-gradient(transparent 60%,rgba(242,119,46,.35) 60%);background-size:0% 100%;background-repeat:no-repeat;transition:background-size .8s cubic-bezier(.22,.8,.35,1) .35s;}
.gb-reveal[data-reveal="marker"].is-in .mk{background-size:100% 100%;}

/* stagger: 子要素(.gb-grid-cell等)を時間差で登場させる */
.gb-reveal[data-reveal="stagger"]{transform:none;transition:opacity .3s ease;}
.gb-reveal[data-reveal="stagger"]>*{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.8,.35,1);}
.gb-reveal[data-reveal="stagger"].is-in>*{opacity:1;transform:translateY(0);}
/* 時間差(最大12個まで) */
.gb-reveal[data-reveal="stagger"].is-in>*:nth-child(1){transition-delay:.05s;}
.gb-reveal[data-reveal="stagger"].is-in>*:nth-child(2){transition-delay:.12s;}
.gb-reveal[data-reveal="stagger"].is-in>*:nth-child(3){transition-delay:.19s;}
.gb-reveal[data-reveal="stagger"].is-in>*:nth-child(4){transition-delay:.26s;}
.gb-reveal[data-reveal="stagger"].is-in>*:nth-child(5){transition-delay:.33s;}
.gb-reveal[data-reveal="stagger"].is-in>*:nth-child(6){transition-delay:.40s;}
.gb-reveal[data-reveal="stagger"].is-in>*:nth-child(7){transition-delay:.47s;}
.gb-reveal[data-reveal="stagger"].is-in>*:nth-child(8){transition-delay:.54s;}
.gb-reveal[data-reveal="stagger"].is-in>*:nth-child(9){transition-delay:.61s;}
.gb-reveal[data-reveal="stagger"].is-in>*:nth-child(10){transition-delay:.68s;}
.gb-reveal[data-reveal="stagger"].is-in>*:nth-child(11){transition-delay:.75s;}
.gb-reveal[data-reveal="stagger"].is-in>*:nth-child(12){transition-delay:.82s;}

/* ボタンの浮遊(登場後もゆらゆら押したくなる動き) */
@keyframes gbBtnFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
.gb-root .gb-enter.gb-reveal.is-in button{animation:gbBtnFloat 2.8s ease-in-out .8s infinite;}
.gb-root .gb-enter button:active{animation:none;}

/* 動きを減らす設定の人には全アニメーション無効 */
@media (prefers-reduced-motion:reduce){
  .gb-reveal,.gb-reveal[data-reveal]{opacity:1!important;transform:none!important;transition:none!important;}
  .gb-reveal[data-reveal="stagger"]>*{opacity:1!important;transform:none!important;transition:none!important;}
  .gb-root .gb-enter.gb-reveal.is-in button{animation:none!important;}
}
/* 印刷時は全部表示 */
@media print{
  .gb-reveal,.gb-reveal[data-reveal],.gb-reveal[data-reveal="stagger"]>*{opacity:1!important;transform:none!important;}
}

/* ================================================================
   ---- 17. 巻頭テーマ(gb-theme-front)+目次(gb-toc) 追記(2026-08-09) ----
   目次ブロックを第3章と同じページの先頭に設置するための追加分。
   既存セクション1〜16は無変更。
   ================================================================ */

/* アンカーのスムーススクロール(仕様書の方針:JSではなくCSSで) */
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
#gb-toc,[id^="gb-ch"]{scroll-margin-top:0;}

/* 巻頭テーマ:白い扉(gb-theme-colors_20260809.md 準拠) */
.gb-root.gb-theme-front{
  --gb-bg-image:none;
  --gb-bg-color:linear-gradient(180deg,#FFFFFF 0%,#FDFBF6 60%,#FAF6EC 100%);
  --gb-bg-overlay:rgba(255,255,255,0);
  --gb-page-color:#FFFFFF;
  --gb-ink:#3A342B;
  --gb-accent:var(--gb-orange);
  --gb-btn-shadow:#3A342B;
  color:var(--gb-ink);
}

/* 写真3連(上端断ち落とし)+GCスタンプ */
.gb-root .gb-toc-photos{position:relative;display:flex;gap:2px;margin:-32px -20px 0;}
.gb-root .gb-toc-photos .gb-ph{flex:1 1 0;aspect-ratio:1/1;border-radius:0;}
.gb-root .gb-toc-stamp{position:absolute;right:10px;bottom:-34px;width:76px;height:76px;max-width:none;margin:0;transform:rotate(5deg);border-radius:8px;background:rgba(255,255,255,.85);font-size:9.5px;line-height:1.4;padding:6px;z-index:2;}
.gb-root .gb-toc-stamp:has(img[src]:not([src=""])){background:none;transform:rotate(5deg);}

/* ラベルとキャッチ */
.gb-root .gb-toc-label{text-align:center;margin:26px 0 0;font-family:var(--gb-font-en);font-weight:700;font-size:13px;letter-spacing:.34em;color:var(--gb-ink);}
.gb-root .gb-toc-catch{text-align:center;margin:20px 0 8px;font-size:19px;font-weight:700;line-height:1.75;letter-spacing:.06em;color:var(--gb-accent);}

/* 章カラー(白地用。gb-theme-colors_20260809.md 準拠/第6章のみ濃色変種) */
.gb-root .tc1{--tc-ac:#B5502E;}
.gb-root .tc2{--tc-ac:#D63A72;}
.gb-root .tc3{--tc-ac:#F2772E;}
.gb-root .tc4{--tc-ac:#D4402E;}
.gb-root .tc5{--tc-ac:#2E5FBF;}
.gb-root .tc6{--tc-ac:#E8503F;}
.gb-root .tc7{--tc-ac:#8A3E9C;}

/* 章セクション(タイムライン型) */
.gb-root .gb-toc{margin:30px 0 0;display:flex;flex-direction:column;gap:34px;}
.gb-root .gb-toc-sec{display:block;text-decoration:none;color:inherit;}
.gb-root .gb-toc-headrow{display:flex;align-items:center;gap:12px;}
.gb-root .gb-toc-badge{flex-shrink:0;font-family:var(--gb-font-en);font-weight:700;font-size:11px;letter-spacing:.1em;color:#fff;background:var(--tc-ac,var(--gb-accent));border-radius:5px;padding:4px 10px 3px;line-height:1.4;}
.gb-root .gb-toc-headrow h3{margin:0;font-size:17px;font-weight:700;letter-spacing:.05em;line-height:1.5;color:var(--tc-ac,var(--gb-ink));flex:1 1 auto;}
.gb-root .gb-toc-go{flex-shrink:0;color:var(--tc-ac,var(--gb-accent));font-size:13px;line-height:1;}
.gb-root .gb-toc-items{margin:12px 0 0 7px;padding:2px 0 2px 18px;border-left:2px solid color-mix(in srgb,var(--tc-ac,var(--gb-accent)) 45%,transparent);list-style:none;display:flex;flex-direction:column;gap:7px;}
.gb-root .gb-toc-items li{font-size:13.5px;font-weight:500;letter-spacing:.03em;line-height:1.7;color:var(--tc-ac,var(--gb-accent));list-style:none;}
.gb-root a.gb-toc-sec{transition:opacity .12s;}
.gb-root a.gb-toc-sec:active{opacity:.55;}

/* 準備中ピル(章カラーは常時表示。ステータスはピルのみで表現) */
.gb-root .gb-toc-soonpill{flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.14em;color:#A8A294;border:1.5px solid #CFC9BC;border-radius:999px;padding:2px 10px;line-height:1.6;background:#fff;}

/* 締めの一言+フッター */
.gb-root .gb-toc-note{margin:38px 0 0;text-align:center;font-size:12.5px;line-height:2.0;opacity:.75;}
.gb-root .gb-front-foot{text-align:center;margin-top:34px;font-family:var(--gb-font-en);font-weight:600;font-size:10px;letter-spacing:.22em;opacity:.5;}

/* 印刷 */
@media print{
  .gb-root .gb-toc-stamp{display:none;}
}
/* ---- 17. ここまで ---- */


/* ================================================================
   ---- 18. 第4章テーマ(gb-theme-eat)+トピックブロック部品 追記(2026-08-12) ----
   第4章はトピックごとに個別カスタムHTMLブロックで制作する方式。
   既存セクション1〜17は無変更。
   ================================================================ */

/* 第4章テーマ: 焼き色クリーム×トマト(gb-theme-colors_20260809.md 準拠) */
.gb-root.gb-theme-eat{
  --gb-bg-image:none;
  --gb-bg-color:linear-gradient(180deg,#FBEBD7 0%,#F8DFC0 50%,#FAE6CC 100%);
  --gb-bg-overlay:rgba(255,255,255,.10);
  --gb-page-color:#FFFFFF;
  --gb-ink:#5A3220;
  --gb-accent:#D4402E;
  --gb-btn-shadow:#5A3220;
  color:var(--gb-ink);
}

/* 章の中間ブロック用: 上下余白を圧縮(ブロック分割で余白が二重になるのを防ぐ) */
.gb-root.gb-mid .gb-wrap{padding-top:26px;padding-bottom:44px;}

/* トピック柱(TOPIC 01 — ACAI BOWLS など) */
.gb-root .gb-topic-head{text-align:center;margin:0 0 14px;}
.gb-root .gb-topic-head .en{font-family:var(--gb-font-en);font-weight:700;font-size:21px;letter-spacing:.16em;color:var(--gb-accent);margin:0;line-height:1.3;}
.gb-root .gb-topic-head .ja{font-size:22px;font-weight:700;letter-spacing:.08em;margin:8px 0 0;}
.gb-root .gb-ph.rounded{border-radius:var(--gb-radius);}

/* ---- モーダル章色修飾(.gb-modal--eat) ----
   モーダルはJSでbody直下へ移動するため章のCSS変数を継承しない。
   修飾クラスでモーダル自身に色を持たせる方式(他章も同様に増やす)。 */
.gb-modal--eat{--md-ac:#D4402E;--md-ink:#5A3220;}
.gb-modal--eat .gb-modal-bar{background:var(--md-ac);}
.gb-modal--eat .gb-modal-panel{border-color:#D4402E;}
.gb-modal--eat .gb-modal-arrow{border-color:#D4402E;color:#D4402E;}
.gb-modal--eat .gb-map-btn a{background:var(--md-ink);}
.gb-modal--eat .mk{background:linear-gradient(transparent 60%,rgba(212,64,46,.25) 60%);font-weight:700;}

/* モーダル内: サブタイトル(店名下のキャッチ) */
.gb-modal .gb-modal-catch{text-align:center;font-size:12.5px;font-weight:700;color:var(--md-ac,#F2772E);letter-spacing:.06em;margin:-8px 0 14px;}

/* モーダル内: ステップ見出し */
.gb-modal .gb-step-h{display:flex;align-items:center;gap:9px;font-size:15.5px;font-weight:700;margin:24px 0 8px;color:#333;}
.gb-modal .gb-step-h b{flex-shrink:0;font-family:'Montserrat',sans-serif;font-weight:700;font-size:10px;letter-spacing:.1em;color:#fff;background:var(--md-ac,#F2772E);border-radius:4px;padding:3px 8px;line-height:1.4;}

/* モーダル内: 選択肢リスト(四角ドット) */
.gb-modal .gb-pick{margin:10px 0;padding:0;}
.gb-modal .gb-pick li{list-style:none;position:relative;padding-left:18px;margin:8px 0;font-size:14px;line-height:1.85;}
.gb-modal .gb-pick li::before{content:"";position:absolute;left:2px;top:.72em;width:8px;height:8px;border-radius:2px;background:var(--md-ac,#F2772E);}

/* モーダル内: 番号付きリスト(丸数字) */
.gb-modal .gb-pick.num{counter-reset:gbpk;}
.gb-modal .gb-pick.num li{counter-increment:gbpk;padding-left:28px;}
.gb-modal .gb-pick.num li::before{content:counter(gbpk);width:19px;height:19px;border-radius:50%;top:.32em;background:var(--md-ac,#F2772E);color:#fff;font-family:'Montserrat',sans-serif;font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center;}

/* モーダル内: ここの豆知識 */
.gb-modal .gb-mame{position:relative;border:1.5px solid var(--md-ac,#F2772E);border-radius:12px;padding:16px 14px 12px;margin:22px 0 8px;font-size:13.5px;line-height:1.9;color:#333;}
.gb-modal .gb-mame .lbl{position:absolute;top:-10px;left:12px;background:#fff;color:var(--md-ac,#F2772E);font-weight:700;font-size:11px;letter-spacing:.08em;padding:0 8px;}
/* ---- 18. ここまで ---- */

/* ---- 18b. アサイートピック演出(2026-08-12追補) ---- */

/* 画像が入った写真枠は、グレー背景とラベル文字を自動で消す(透過PNG対応) */
.gb-modal .gb-ph:has(img[src]:not([src=""])){background:none;font-size:0;}
.gb-root .gb-ph:has(img[src]:not([src=""])){background:none;font-size:0;}

/* 縦長写真枠(タワー型アサイーなど縦の長さを見せたい時用) */
.gb-modal .gb-ph.tall{aspect-ratio:2/3;}
.gb-root .gb-ph.tall{aspect-ratio:2/3;}

/* 3層ヒーロー: 奥=太陽(回転) / 中=アサイー切り抜きPNG / 前=タイトル文字画像(浮き出る) */
.gb-root .gb-acai-hero{position:relative;aspect-ratio:3/4;margin:6px -6px 18px;}
.gb-root .gb-acai-hero .hl{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;border:2px dashed var(--gb-accent);border-radius:10px;color:var(--gb-accent);font-size:11px;line-height:1.5;background:rgba(255,255,255,.35);overflow:hidden;}
.gb-root .gb-acai-hero .hl img{display:none;width:100%;height:100%;object-fit:contain;}
.gb-root .gb-acai-hero .hl:has(img[src]:not([src=""])){border:none;background:none;}
.gb-root .gb-acai-hero .hl:has(img[src]:not([src=""])) img{display:block;}
.gb-root .gb-acai-hero .hl:has(img[src]:not([src=""])) .tx{display:none;}
.gb-root .gb-acai-hero .hl-sun{left:7%;top:-3%;width:34%;aspect-ratio:1/1;z-index:1;}
.gb-root .gb-acai-hero .hl-acai{left:0;right:0;bottom:0;top:14%;z-index:2;}
.gb-root .gb-acai-hero .hl-title{right:0;top:-2%;width:38%;height:76%;z-index:3;}
.gb-root .gb-acai-hero .hl-title img{object-position:top;}
/* 太陽: 画像が入ったらゆっくり回転 */
@keyframes gbSunSpin{to{transform:rotate(360deg);}}
.gb-root .gb-acai-hero .hl-sun:has(img[src]:not([src=""])) img{animation:gbSunSpin 48s linear infinite;}
/* タイトル: 表示領域に入ったら、ゆっくり浮き出る */
.gb-root .gb-acai-hero .hl-title img{opacity:0;transform:translateY(16px) scale(1.02);transition:opacity 1.8s ease .35s,transform 1.8s cubic-bezier(.22,.8,.35,1) .35s;}
.gb-root .gb-acai-hero.is-in .hl-title:has(img[src]:not([src=""])) img{opacity:1;transform:translateY(0) scale(1);}

/* 注文画面風チェックリスト(STEP 4) */
.gb-modal .gb-order{margin:12px 0;padding:0;}
.gb-modal .gb-order li{list-style:none;display:flex;align-items:center;gap:10px;border:1.5px solid #E4DED4;border-radius:10px;padding:10px 12px;margin:8px 0;font-size:14px;line-height:1.5;background:#fff;opacity:0;transform:translateX(-8px);transition:opacity .45s ease,transform .45s ease;}
.gb-modal .gb-order .cb{flex-shrink:0;width:20px;height:20px;border:2px solid var(--md-ac,#F2772E);border-radius:5px;position:relative;background:#fff;}
.gb-modal .gb-order .cb::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;background:var(--md-ac,#F2772E);border-radius:3px;transform:scale(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.gb-modal .gb-order .nm{flex:1;font-weight:700;color:#333;}
.gb-modal .gb-order .nm small{display:block;font-weight:400;font-size:11.5px;color:#777;margin-top:1px;}
.gb-modal .gb-order .tag{flex-shrink:0;font-family:'Montserrat',sans-serif;font-weight:700;font-size:9px;letter-spacing:.12em;color:var(--md-ac,#F2772E);border:1.5px solid var(--md-ac,#F2772E);border-radius:999px;padding:3px 8px;}
.gb-modal .gb-order.gb-reveal{transform:none;}
.gb-modal .gb-order.is-in li{opacity:1;transform:translateX(0);}
.gb-modal .gb-order.is-in li .cb::after{transform:scale(1);}
.gb-modal .gb-order.is-in li:nth-child(1){transition-delay:.05s;} .gb-modal .gb-order.is-in li:nth-child(1) .cb::after{transition-delay:.25s;}
.gb-modal .gb-order.is-in li:nth-child(2){transition-delay:.18s;} .gb-modal .gb-order.is-in li:nth-child(2) .cb::after{transition-delay:.38s;}
.gb-modal .gb-order.is-in li:nth-child(3){transition-delay:.31s;} .gb-modal .gb-order.is-in li:nth-child(3) .cb::after{transition-delay:.51s;}
.gb-modal .gb-order.is-in li:nth-child(4){transition-delay:.44s;} .gb-modal .gb-order.is-in li:nth-child(4) .cb::after{transition-delay:.64s;}
.gb-modal .gb-order.is-in li:nth-child(5){transition-delay:.57s;} .gb-modal .gb-order.is-in li:nth-child(5) .cb::after{transition-delay:.77s;}
.gb-modal .gb-order.is-in li:nth-child(6){transition-delay:.70s;} .gb-modal .gb-order.is-in li:nth-child(6) .cb::after{transition-delay:.90s;}

/* 制覇スタンプカード(CSSのみのチェックUI) */
.gb-root .gb-stamp{--acai-purple:#6C35A3;border:2px solid var(--gb-ink);border-radius:var(--gb-radius);background:#fff;padding:18px 14px 12px;margin:30px 0 4px;box-shadow:0 4px 0 var(--gb-btn-shadow);}
.gb-root .gb-stamp-ttl{text-align:center;margin:0 0 12px;font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--gb-ink);}
.gb-root .gb-stamp-ttl .en{display:block;font-family:var(--gb-font-en);font-weight:700;font-size:10px;letter-spacing:.3em;color:var(--gb-accent);margin-bottom:3px;}
.gb-root .gb-stamp-row{display:flex;justify-content:space-between;gap:6px;}
.gb-root .gb-stamp input{position:absolute;opacity:0;pointer-events:none;}
.gb-root .gb-stamp label{flex:1;aspect-ratio:1/1;max-width:62px;border:2px dashed #C9C2B4;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:8.5px;font-weight:700;color:#8A8478;text-align:center;line-height:1.2;cursor:pointer;position:relative;transition:transform .15s;user-select:none;-webkit-user-select:none;}
.gb-root .gb-stamp label i{font-style:normal;font-family:var(--gb-font-en);font-weight:700;font-size:11px;color:#B5AE9F;}
.gb-root .gb-stamp label:active{transform:scale(.92);}
.gb-root .gb-stamp input:checked+label{border:2.5px solid var(--acai-purple);color:var(--acai-purple);background:rgba(108,53,163,.07);transform:rotate(-7deg);}
.gb-root .gb-stamp input:checked+label i{color:var(--acai-purple);}
.gb-root .gb-stamp input:checked+label::after{content:"食べた!";position:absolute;inset:auto;font-family:var(--gb-font-hand);font-size:11px;color:#fff;background:var(--acai-purple);border-radius:999px;padding:2px 7px;bottom:-7px;}
.gb-root .gb-stamp-note{margin:14px 2px 0;font-size:10.5px;line-height:1.7;color:var(--gb-ink);opacity:.7;text-align:center;}

@media (prefers-reduced-motion:reduce){
  .gb-root .gb-acai-hero .hl-sun img{animation:none!important;}
  .gb-root .gb-acai-hero .hl-title img{opacity:1!important;transform:none!important;transition:none!important;}
  .gb-modal .gb-order li,.gb-modal .gb-order .cb::after{opacity:1!important;transform:none!important;transition:none!important;}
}
/* ---- 18b. ここまで ---- */

/* ================================================================
   ---- 18c. 第4章トピック②「ナイスビュー!なお店」用の追記 v3（2026-08-13） ----

   【貼り方】既存の gb-css-full_20260813_v7.css の【末尾】にそのまま追記してください。
   セクション1〜18bには一切変更がありません（純粋な追加のみ）。
   全文貼り替えは不要で、末尾に足すだけで安全に適用できます。

   ※v1（スタンプカードのナイスビュー版）を貼ってしまっている場合は、
     v1の 18c 区間を丸ごとこのv2に差し替えてください。

   追加するもの:
   1. パノラマ帯 .gb-pano
      → 登場時、双眼鏡を覗いたような丸い視界2つが広がってパノラマになる
      → その後ゆっくり横パン
   2. 高度メーター .gb-alt
      → 5店を「視点の高さが下がる順」に並べた縦一本のメーター。各行タップでモーダルが開く
   ================================================================ */

/* 双眼鏡の穴の大きさを持つカスタムプロパティ。
   @property を宣言することで数値としてトランジションできるようになる。
   非対応ブラウザでは瞬時に切り替わるだけで、最終状態は同じ（安全に劣化する）。 */
@property --gb-eye{
  syntax:'<percentage>';
  inherits:true;
  initial-value:15%;
}

/* ---- メインビジュアル（パノラマ帯 + ナイスビュー文字 + キャラクター）----

   構造（3レイヤー）:
     .gb-pano            … 位置の基準。はみ出しを許可するので overflow は切らない
       .gb-pano-frame    … 写真の窓。overflow:hidden でここだけ切り抜く
         .gb-pano-eye    … 双眼鏡マスク（2つの円 → 広がって全面へ）
           .gb-pano-track… 写真本体。ゆっくり横パン
       .gb-pano-copy     … 右側の「ナイスビュー!」文字イラスト（最前面・枠の外に少しはみ出す）
       .gb-pano-chara    … 左下のキャラクター（アニメーションなし）

   ▼位置とサイズはこの変数で微調整できます（.gb-pano に上書き指定してもOK）      */
.gb-root .gb-pano{
  --pano-ratio:20/17;        /* 写真の縦横比。数字を小さくするほど縦長になる */
  --pano-copy-w:15%;         /* 「ナイスビュー!」の幅 */
  --pano-copy-right:4%;      /* 同・右からの位置 */
  --pano-copy-top:-14px;     /* 同・上へのはみ出し量（マイナスで枠の外へ）*/
  --pano-chara-w:27%;        /* キャラクターの幅 */
  --pano-chara-left:2%;      /* 同・左からの位置 */
  --pano-chara-bottom:0px;   /* 同・下の位置 */
  --gb-eye:15%;
  position:relative;
  margin:20px -20px 22px;    /* .gb-wrapの左右padding(20px)を打ち消して端まで */
  /* ※transitionはショートハンド。opacityだけ書くと --gb-eye の補間が消えて
     双眼鏡が瞬間的に開いてしまうため、必ず両方を並べて書くこと。 */
  transition:opacity .25s ease, --gb-eye 1.7s cubic-bezier(.7,0,.3,1) .35s;
}
/* 登場は双眼鏡の広がりに任せる（gb-reveal既定のせり上がりは打ち消す） */
.gb-root .gb-pano.gb-reveal{transform:none;}
.gb-root .gb-pano.is-in{--gb-eye:105%;}

/* 写真の窓 */
.gb-root .gb-pano-frame{
  position:relative;
  aspect-ratio:var(--pano-ratio);
  overflow:hidden;
  background:rgba(255,255,255,.35);
}
/* 空スロット時の点線枠 */
.gb-root .gb-pano-frame:not(:has(.gb-pano-track img[src]:not([src=""]))){
  border-top:2px dashed var(--gb-accent);
  border-bottom:2px dashed var(--gb-accent);
}
/* 写真本体。横パンは track を横160%にし -37.5%（=枠幅の60%）動かすことで、
   画像の実寸に関わらず左端から右端まで見せきる。 */
.gb-root .gb-pano-track{
  position:absolute;inset:0;
  width:160%;height:100%;
  display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--gb-accent);font-size:11px;line-height:1.6;
}
.gb-root .gb-pano-track img{display:none;width:100%;height:100%;object-fit:cover;}
.gb-root .gb-pano-track:has(img[src]:not([src=""])) img{display:block;}
.gb-root .gb-pano-track:has(img[src]:not([src=""])) .tx{display:none;}
.gb-root .gb-pano-track:has(img[src]:not([src=""])){
  animation:gbPanoPan 30s ease-in-out infinite alternate;
}
@keyframes gbPanoPan{from{transform:translateX(0);}to{transform:translateX(-37.5%);}}

/* 双眼鏡マスク：2つの円だけを見せる → is-in で広がって融合し全面に。
   マスクを2レイヤー重ね、和集合（union）で「左目＋右目」を作る。 */
.gb-root .gb-pano-eye{
  position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:
    radial-gradient(circle at 31% 50%, #000 calc(var(--gb-eye) - 2%), transparent var(--gb-eye)),
    radial-gradient(circle at 69% 50%, #000 calc(var(--gb-eye) - 2%), transparent var(--gb-eye));
  mask-image:
    radial-gradient(circle at 31% 50%, #000 calc(var(--gb-eye) - 2%), transparent var(--gb-eye)),
    radial-gradient(circle at 69% 50%, #000 calc(var(--gb-eye) - 2%), transparent var(--gb-eye));
  -webkit-mask-composite:source-over;   /* Safari: 和集合 */
  mask-composite:add;                   /* 標準: 和集合 */
}
/* 双眼鏡の外側を埋める地色。
   ※z-indexは必ず 0（=マスクした写真より下）。1以上にすると写真の上に乗って
     双眼鏡の中身まで隠してしまう。 */
.gb-root .gb-pano-frame::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:#FBEBD7;
  opacity:1;transition:opacity 1.1s ease .75s;
}
.gb-root .gb-pano.is-in .gb-pano-frame::before{opacity:0;}
/* 空スロット時は演出しない（プレースホルダーを隠さない） */
.gb-root .gb-pano-frame:not(:has(.gb-pano-track img[src]:not([src=""]))) .gb-pano-eye{
  -webkit-mask-image:none;mask-image:none;
}
.gb-root .gb-pano-frame:not(:has(.gb-pano-track img[src]:not([src=""])))::before{display:none;}

/* 写真の上に敷く薄いベール（文字イラストの可読性確保） */
.gb-root .gb-pano-frame::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(90,50,32,.14) 0%,rgba(90,50,32,0) 40%,rgba(90,50,32,.16) 100%);
}
.gb-root .gb-pano-frame:not(:has(.gb-pano-track img[src]:not([src=""])))::after{background:none;}

/* 右側の「ナイスビュー!」文字イラスト（最前面）。パノラマが開ききってから出す */
.gb-root .gb-pano-copy{
  position:absolute;z-index:5;
  right:var(--pano-copy-right);
  top:var(--pano-copy-top);
  width:var(--pano-copy-w);
  text-align:center;color:var(--gb-accent);font-size:10px;line-height:1.5;
  filter:drop-shadow(0 3px 8px rgba(90,50,32,.28));
}
.gb-root .gb-pano-copy img{display:none;width:100%;height:auto;}
.gb-root .gb-pano-copy:has(img[src]:not([src=""])) img{display:block;}
.gb-root .gb-pano-copy:has(img[src]:not([src=""])) .tx{display:none;}
.gb-root .gb-pano-copy img{
  opacity:0;transform:translateY(-10px);
  transition:opacity .9s ease 1.75s,transform .9s cubic-bezier(.22,.8,.35,1) 1.75s;
}
.gb-root .gb-pano.is-in .gb-pano-copy:has(img[src]:not([src=""])) img{
  opacity:1;transform:translateY(0);
}

/* 左下のキャラクター（アニメーションなし・双眼鏡が開く前から居る） */
.gb-root .gb-pano-chara{
  position:absolute;z-index:4;
  left:var(--pano-chara-left);
  bottom:var(--pano-chara-bottom);
  width:var(--pano-chara-w);
  text-align:center;color:var(--gb-accent);font-size:10px;line-height:1.5;
  filter:drop-shadow(0 4px 8px rgba(90,50,32,.3));
  pointer-events:none;
}
.gb-root .gb-pano-chara img{display:none;width:100%;height:auto;}
.gb-root .gb-pano-chara:has(img[src]:not([src=""])) img{display:block;}
.gb-root .gb-pano-chara:has(img[src]:not([src=""])) .tx{display:none;}

/* ---- 高度メーター ----
   5店を高い順に並べた縦一本のメーター。各行がモーダルを開くボタンを兼ねる。 */
.gb-root .gb-alt{
  position:relative;
  border:2px solid var(--gb-ink);border-radius:var(--gb-radius);
  background:#fff;padding:20px 16px 14px;margin:30px 0 4px;
  box-shadow:0 4px 0 var(--gb-btn-shadow);
}
.gb-root .gb-alt-ttl{text-align:center;margin:0 0 18px;font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--gb-ink);}
.gb-root .gb-alt-ttl .en{display:block;font-family:var(--gb-font-en);font-weight:700;font-size:10px;letter-spacing:.3em;color:var(--gb-accent);margin-bottom:4px;}
.gb-root .gb-alt-list{position:relative;margin:0;padding:0;list-style:none;}
/* 縦の軸線（ドット列を貫く） */
.gb-root .gb-alt-list::before{
  content:"";position:absolute;z-index:0;
  left:54px;top:10px;bottom:10px;width:2px;
  background:linear-gradient(180deg,var(--gb-accent) 0%,rgba(212,64,46,.35) 100%);
}
.gb-root .gb-alt-row{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:0;
  width:100%;padding:9px 0;margin:0;
  background:none;border:none;cursor:pointer;
  font-family:var(--gb-font-jp);text-align:left;color:var(--gb-ink);
  appearance:none;-webkit-appearance:none;
  transition:transform .12s;
}
.gb-root .gb-alt-row:active{transform:translateX(3px);}
/* 高さ表記 */
.gb-root .gb-alt-h{
  flex:0 0 48px;text-align:right;padding-right:0;
  font-family:var(--gb-font-en);font-weight:700;font-size:12px;letter-spacing:.04em;
  color:var(--gb-accent);line-height:1.3;
}
.gb-root .gb-alt-h.ja{font-family:var(--gb-font-jp);font-size:10.5px;}
/* 軸線上のドット */
.gb-root .gb-alt-dot{
  flex:0 0 16px;height:12px;position:relative;
}
.gb-root .gb-alt-dot::after{
  content:"";position:absolute;left:1px;top:0;
  width:12px;height:12px;border-radius:50%;
  background:#fff;border:2.5px solid var(--gb-accent);
  transition:background .35s ease,transform .35s cubic-bezier(.34,1.56,.64,1);
}
/* 店名 */
.gb-root .gb-alt-name{
  flex:1;padding-left:12px;
  font-size:13.5px;font-weight:700;line-height:1.45;
}
.gb-root .gb-alt-name small{
  display:block;font-weight:400;font-size:11px;line-height:1.5;
  color:var(--gb-ink);opacity:.7;margin-top:1px;
}
/* 230mから2Fへの「落差」を余白で表現 */
.gb-root .gb-alt-drop{position:relative;height:34px;z-index:1;}
.gb-root .gb-alt-drop::after{
  content:"";position:absolute;left:54px;top:2px;bottom:2px;width:0;
  border-left:2px dotted var(--gb-accent);opacity:.55;
}
.gb-root .gb-alt-note{margin:14px 2px 0;font-size:10.5px;line-height:1.7;color:var(--gb-ink);opacity:.7;text-align:center;}

/* スクロールで上から順に点が灯る（gb-reveal の stagger を利用） */
.gb-reveal[data-reveal="stagger"] .gb-alt-row .gb-alt-dot::after{background:#fff;}
.gb-reveal[data-reveal="stagger"].is-in .gb-alt-row .gb-alt-dot::after{
  background:var(--gb-accent);transform:scale(1.12);
}

@media (prefers-reduced-motion:reduce){
  .gb-root .gb-pano-track{animation:none!important;}
  .gb-root .gb-pano-eye{-webkit-mask-image:none!important;mask-image:none!important;transition:none!important;}
  .gb-root .gb-pano-frame::before{display:none!important;}
  .gb-root .gb-pano-copy img{opacity:1!important;transform:none!important;transition:none!important;}
  .gb-root .gb-alt-dot::after{transition:none!important;}
}
@media print{
  .gb-root .gb-pano-track{animation:none!important;transform:none!important;}
  .gb-root .gb-pano-eye{-webkit-mask-image:none!important;mask-image:none!important;}
  .gb-root .gb-pano-frame::before{display:none!important;}
  .gb-root .gb-pano-copy img{opacity:1!important;transform:none!important;}
  .gb-root .gb-alt-dot::after{background:var(--gb-accent)!important;}
}
/* ---- 18c. ここまで ---- */

/* ================================================================
   ---- 18d. トピック分割ブロックの背景つなぎ目対策（2026-08-13） ----

   【貼り方】既存CSSの末尾に追記。セクション1〜18cは無変更。

   【問題】
   1章を複数のカスタムHTMLブロック（=複数の .gb-root）に分けると、
   ブロックごとに .gb-bg-fixed が生成される。この背景レイヤーは
   position:sticky + height:100vh なので、ブロックの切り替わりで
   「前のレイヤーが抜けて、次のレイヤーが入る」受け渡しが起きる。
   その瞬間、前ブロックのグラデーション下端の色と、次ブロックの
   グラデーション上端の色が隣り合うため、横一直線の段差が見える。

   実測（viewport 430px・ブロック境界）:
     現状  RGB(249,225,194) → (251,235,215)  色差33 = はっきり見える線
     対策後 RGB(248,223,192) → (248,223,192)  色差0  = 線なし

   【対策の考え方】
   背景レイヤー(.gb-bg-fixed)は「単色」にして、どこで受け渡しが
   起きても色が変わらないようにする。そのうえで、グラデーションの
   陰影は .gb-wrap 側に「上下端が透明・中央だけ明るい」左右対称の
   膜としてかける。上下端が必ず透明なので、ブロックの境目では
   どちらの側も必ず同じ単色になり、段差が生まれない。

   陰影の深さは現状とほぼ同等（画面内の色の振れ幅 現状B23 → 対策後B19）。

   【HTML側の変更】
   各ブロックの data-gb-theme をグラデーションから単色に変える。
     変更前: data-gb-theme="linear-gradient(180deg,#FBEBD7 0%,#F8DFC0 50%,#FAE6CC 100%)"
     変更後: data-gb-theme="#F8DFC0"
   ※章をまたぐクロスフェード（章ごとに色が変わる演出）はこれまで通り動く。
     単色どうしのクロスフェードになるだけ。
   ================================================================ */

/* 分割ブロック共通の陰影。上下端は必ず透明にすること（ここが対策の要）。 */
.gb-root.gb-mid .gb-wrap::before{
  content:"";
  position:absolute;z-index:-1;
  top:0;bottom:0;left:0;right:0;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,0)   0%,
    rgba(255,255,255,.30) 50%,
    rgba(255,255,255,0)   100%);
}

/* 章の先頭ブロック・末尾ブロックにも同じ扱いをしたい場合はこちらも付ける。
   （.gb-mid が付いていないブロック用。必要になったらコメントを外す）
.gb-root.gb-theme-eat .gb-wrap::before{ ...同上... }
*/

/* 印刷時は陰影を出さない（既存の印刷ルールに合わせて紙面は白） */
@media print{
  .gb-root.gb-mid .gb-wrap::before{display:none!important;}
}
/* ---- 18d. ここまで ---- */

/* ================================================================
   ---- 18e. 第4章トピック③「神コスパ5選」用の追記 v3（2026-08-14） ----

   【貼り方】既存CSSの末尾（18dの後）に追記。1〜18dは無変更。
   ※18e v1/v2を既に貼っている場合は、18e区間を丸ごとこのv3に差し替えてください。
     v3での変更: メインビジュアルを1列スライダーから「2列スライダー+タイトル文字
     オーバーレイ」(.gb-mv3)に変更。上段は左向き・下段は右向きに流れる。

   追加するもの:
   1. メインビジュアル .gb-mv3（2列の無限スライダー + 縦書きタイトルの重ね）
   2. レシート .gb-receipt（5店の看板価格の早見表。タップ機能なしの静的表示）
   3. 小さな注記 .gb-op-note（導入文末尾の価格注記用）
   ================================================================ */

/* ---- メインビジュアル: 2列スライダー + タイトル文字オーバーレイ ----

   構造:
     .gb-mv3                  … 全体。タイトルの位置基準
       .gb-mv3-ph             … 空スロット時のプレースホルダー
       .gb-mv3-row.a > track  … 上段。左向きに流れる
       .gb-mv3-row.b > track  … 下段。右向きに流れる
       .gb-mv3-title          … 最前面。縦書きタイトル文字画像(右寄せ・ほぼ全高)

   各段は切り抜き写真6枚 × 2周(計12枠)。同じURLを同じ順で2周入れるとループする。
   画面内に同時に約3枚見える幅(=1枚 約130px)に設定。

   ▼位置とサイズはこの変数で微調整できます */
.gb-root .gb-mv3{
  --mv3-item-w:130px;        /* 写真1枚の幅。430px÷3−隙間 ≒ 130px */
  --mv3-item-maxh:175px;     /* 写真の最大高さ */
  --mv3-gap:14px;            /* 写真どうしの隙間 */
  --mv3-row-gap:18px;        /* 上段と下段の隙間 */
  --mv3-title-right:4%;      /* タイトルの右からの位置 */
  --mv3-title-top:1%;        /* タイトルの上端 */
  --mv3-title-h:98%;         /* タイトルの高さ(画像はheight基準でwidth自動) */
  position:relative;
  margin:6px -20px 18px;     /* 誌面の左右いっぱいに断ち落とし */
  padding:12px 0;
}
.gb-root .gb-mv3-row{overflow:hidden;}
.gb-root .gb-mv3-row + .gb-mv3-row{margin-top:var(--mv3-row-gap);}
.gb-root .gb-mv3-track{
  display:flex;align-items:center;gap:var(--mv3-gap);
  width:max-content;
}
/* 上段=左向き / 下段=右向き。開始位置を変えた2本のキーフレームでループ */
.gb-root .gb-mv3-row.a .gb-mv3-track{animation:gbMvL 32s linear infinite;}
.gb-root .gb-mv3-row.b .gb-mv3-track{animation:gbMvR 36s linear infinite;}
@keyframes gbMvL{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes gbMvR{from{transform:translateX(-50%);}to{transform:translateX(0);}}
.gb-root .gb-mv3-track .it{
  flex:0 0 var(--mv3-item-w);
  display:flex;align-items:center;justify-content:center;
}
.gb-root .gb-mv3-track .it img{
  width:100%;height:auto;max-height:var(--mv3-item-maxh);object-fit:contain;display:block;
  filter:drop-shadow(0 5px 9px rgba(90,50,32,.20));
}
/* 空のimgは枠ごと詰める(gapが並ばないよう .it ごと非表示) */
.gb-root .gb-mv3-track .it:has(img[src=""]),
.gb-root .gb-mv3-track .it:has(img:not([src])){display:none;}
/* 写真が入っていない段はアニメーション停止 */
.gb-root .gb-mv3-row:not(:has(img[src]:not([src=""]))) .gb-mv3-track{animation:none;}
/* 全段が空のとき: プレースホルダー表示・段は畳む */
.gb-root .gb-mv3-ph{
  display:none;align-items:center;justify-content:center;text-align:center;
  border:2px dashed var(--gb-accent);border-radius:10px;
  color:var(--gb-accent);font-size:11px;line-height:1.7;
  height:150px;margin:0 20px;background:rgba(255,255,255,.35);
}
.gb-root .gb-mv3:not(:has(.gb-mv3-track img[src]:not([src=""]))) .gb-mv3-ph{display:flex;}

/* タイトル文字画像(最前面・右寄せ・縦にほぼ全高) */
.gb-root .gb-mv3-title{
  position:absolute;z-index:3;pointer-events:none;
  top:var(--mv3-title-top);right:var(--mv3-title-right);
  height:var(--mv3-title-h);
  display:flex;align-items:center;justify-content:flex-end;
  color:var(--gb-accent);font-size:11px;line-height:1.6;text-align:center;
}
.gb-root .gb-mv3-title img{display:none;height:100%;width:auto;object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(90,50,32,.18));}
.gb-root .gb-mv3-title:has(img[src]:not([src=""])) img{display:block;}
.gb-root .gb-mv3-title:has(img[src]:not([src=""])) .tx{display:none;}
.gb-root .gb-mv3-title:not(:has(img[src]:not([src=""]))){
  border:2px dashed var(--gb-accent);border-radius:10px;
  padding:14px 8px;background:rgba(255,255,255,.5);
  writing-mode:vertical-rl;pointer-events:none;
}

/* ---- 小さな注記（導入文末尾の価格注記） ---- */
.gb-root .gb-op-note{
  font-size:11px;line-height:1.8;opacity:.65;margin:14px 0 6px;text-align:center;
}

/* ---- レシート（5店の看板価格 早見表・静的表示） ----
   感熱紙レシート風。下端のギザギザは clip-path で再現。
   紙の質感=わずかな明暗ムラを repeating-linear-gradient で。 */
.gb-root .gb-receipt{
  max-width:300px;margin:30px auto 8px;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.012) 0 2px, transparent 2px 4px),
    #FFFDF6;
  padding:20px 18px 18px;color:#3d3d3d;
  font-family:'Courier New',monospace;font-size:12px;line-height:1.75;
  filter:drop-shadow(0 6px 12px rgba(90,50,32,.22));
  clip-path:polygon(0 0,100% 0,
    100% calc(100% - 6px),96% 100%,92% calc(100% - 6px),88% 100%,
    84% calc(100% - 6px),80% 100%,76% calc(100% - 6px),72% 100%,
    68% calc(100% - 6px),64% 100%,60% calc(100% - 6px),56% 100%,
    52% calc(100% - 6px),48% 100%,44% calc(100% - 6px),40% 100%,
    36% calc(100% - 6px),32% 100%,28% calc(100% - 6px),24% 100%,
    20% calc(100% - 6px),16% 100%,12% calc(100% - 6px),8% 100%,
    4% calc(100% - 6px),0 100%);
}
.gb-root .gb-receipt-h{margin:0 0 3px;text-align:center;font-size:13px;font-weight:700;letter-spacing:.15em;}
.gb-root .gb-receipt-sub{text-align:center;font-size:9.5px;opacity:.7;margin:0 0 8px;letter-spacing:.08em;}
.gb-root .gb-receipt-ln{border-top:1px dashed #999;margin:7px 0;}
.gb-root .gb-receipt-row{display:flex;justify-content:space-between;gap:8px;align-items:baseline;}
.gb-root .gb-receipt-row span:first-child{flex:1;}
.gb-root .gb-receipt-row b{font-weight:700;white-space:nowrap;}
.gb-root .gb-receipt-total{font-weight:700;font-size:13.5px;}
.gb-root .gb-receipt-total b{color:#D4402E;}
.gb-root .gb-receipt-thanks{text-align:center;font-size:10px;margin:9px 0 0;letter-spacing:.12em;}
/* レシートの登場: するすると印字される(下から出てくる)演出 */
.gb-reveal[data-reveal="fade-up"].gb-receipt{transition-duration:.9s;}

@media (prefers-reduced-motion:reduce){
  .gb-root .gb-mv3-track{animation:none!important;}
}
@media print{
  .gb-root .gb-mv3-track{animation:none!important;transform:none!important;}
  .gb-root .gb-receipt{filter:none;}
}
/* ---- 18e. ここまで ---- */

/* ================================================================
   ---- 18f. 第4章トピック④「カフェ英語・注文の流儀」用の追記 v4（2026-08-15） ----

   【貼り方】既存CSSの末尾（18eの後）にそのまま追記。1〜18eは無変更。

   追加するもの:
   1. 漫画スロット .gb-manga（メインビジュアル用。画像1枚のシンプル枠）
   2. 会話例の吹き出し風リスト .gb-talk（店員/あなたのやり取り用）
   ※どちらも既存の空スロット方式(URLを入れると枠が消える)と同じ作法
   ================================================================ */

/* ---- 漫画スロット ----
   縦横比は固定しない(漫画の実寸に従う)。空のうちは点線枠+ラベル。 */
.gb-root .gb-manga{
  position:relative;margin:6px 0 18px;
  text-align:center;color:var(--gb-accent);font-size:11px;line-height:1.7;
}
.gb-root .gb-manga img{display:none;width:100%;height:auto;border-radius:var(--gb-radius);}
.gb-root .gb-manga:has(img[src]:not([src=""])) img{display:block;}
.gb-root .gb-manga:has(img[src]:not([src=""])) .tx{display:none;}
.gb-root .gb-manga:not(:has(img[src]:not([src=""]))){
  border:2px dashed var(--gb-accent);border-radius:var(--gb-radius);
  padding:56px 16px;background:rgba(255,255,255,.35);
}

/* モーダル内のイラスト用(小さめ余白の派生。マークアップはgb-mangaと同じ) */
.gb-root .gb-manga--s{margin:2px 0 16px;}
.gb-root .gb-manga--s:not(:has(img[src]:not([src=""]))){padding:34px 14px;font-size:10.5px;}

/* ---- 会話例（吹き出し風の2話者リスト） ----
   <ul class="gb-talk">
     <li class="them"><i>店員</i>Hi there! How can I help you today?<small>ご注文は?</small></li>
     <li class="you"><i>あなた</i>Can I have a small flat white to go, please?<small>スモールの…</small></li>
   </ul> */
.gb-root .gb-talk{list-style:none;margin:14px 0;padding:0;}
.gb-root .gb-talk li{
  position:relative;max-width:86%;
  margin:0 0 10px;padding:9px 13px 8px;
  border-radius:14px;font-size:13.5px;line-height:1.7;
  border:1.5px solid var(--gb-ink);background:#fff;
}
.gb-root .gb-talk li i{
  display:block;font-style:normal;font-family:var(--gb-font-en);
  font-weight:700;font-size:9px;letter-spacing:.14em;opacity:.55;margin-bottom:1px;
}
.gb-root .gb-talk li small{
  display:block;font-size:11px;line-height:1.6;opacity:.72;margin-top:2px;
}
.gb-root .gb-talk li.them{margin-right:auto;border-bottom-left-radius:4px;}
.gb-root .gb-talk li.you{
  margin-left:auto;border-bottom-right-radius:4px;
  background:#FFF3E9;border-color:var(--gb-accent);
}
.gb-root .gb-talk li.you i{color:var(--gb-accent);opacity:.8;}

/* ---- メインビジュアル漫画の「ふわっと」登場 ----
   枠ごとのせり上がり(gb-reveal既定の fade-up)は打ち消し、
   画像そのものを長め(1.6s)のフェード+ごくわずかな沈み込みで浮かび上がらせる。
   モーダル内イラスト(.gb-manga--s)には適用しない(メインビジュアル専用)。 */
.gb-root .gb-manga:not(.gb-manga--s).gb-reveal{transform:none;}
.gb-root .gb-manga:not(.gb-manga--s) img{
  opacity:0;transform:translateY(12px) scale(1.015);
  transition:opacity 1.6s ease .1s,transform 1.6s cubic-bezier(.22,.8,.35,1) .1s;
}
.gb-root .gb-manga:not(.gb-manga--s).is-in:has(img[src]:not([src=""])) img{
  opacity:1;transform:translateY(0) scale(1);
}

/* ---- gb-orderの7項目対応 ----
   既存定義(トピック①ブロックの18b)はnth-child(6)までしかディレイがなく、
   7項目目だけ遅延ゼロで先に現れてしまうため、7項目目のディレイを追加。 */
.gb-modal .gb-order.is-in li:nth-child(7){transition-delay:.83s;}
.gb-modal .gb-order.is-in li:nth-child(7) .cb::after{transition-delay:1.03s;}

@media (prefers-reduced-motion:reduce){
  .gb-root .gb-manga:not(.gb-manga--s) img{opacity:1!important;transform:none!important;transition:none!important;}
}
@media print{
  .gb-root .gb-talk li{break-inside:avoid;}
  .gb-root .gb-manga:not(.gb-manga--s) img{opacity:1!important;transform:none!important;}
}
/* ---- 18f. ここまで ---- */

/* ================================================================
   ---- 18g. 第4章 章扉用の追記 v2（2026-08-15） ----
   【貼り方】章扉ブロックのCSSタブの中身を丸ごとこれに差し替え。

   v2での変更: 実装後の実機確認を受けて位置・サイズを調整
   - 右上のアサイーボウル: タイトル文字の裏 → サブタイトルの右横へ下げて縮小
     (タイトルより手前・文字よりは奥、の重なり順に変更)
   - 左下のカンガルー: 46% → 30% に縮小

   ▼位置とサイズは下の変数で微調整できます
   ================================================================ */

/* 待機アニメの差し替え(v1と同じ) */
.gb-root .gb-palm.gb-anim-wobble{animation:gbWobble 3.8s ease-in-out infinite;}
.gb-root .gb-koala-rider.gb-anim-hop{animation:gbHop 3.4s ease-in-out infinite;}

/* 右上の食べ物イラスト(アサイーボウル)の位置・サイズ */
.gb-root .gb-ch-title .gb-palm{
  --tobira-bowl-w:116px;     /* 大きさ */
  --tobira-bowl-top:64px;    /* 上端(数字を大きくすると下がる) */
  --tobira-bowl-right:-18px;  /* 右からの位置(マイナスで少し外へ) */
  width:var(--tobira-bowl-w);
  top:var(--tobira-bowl-top);
  right:var(--tobira-bowl-right);
  z-index:1;   /* コラージュより手前・タイトル文字よりは奥 */
}

/* 左下のカンガルーの位置・サイズ */
.gb-root .gb-hero-collage .gb-koala-rider{
  --tobira-chara-w:30%;      /* 大きさ(元は46%) */
  --tobira-chara-left:-3%;   /* 左からの位置 */
  --tobira-chara-bottom:2%;  /* 下からの位置 */
  width:var(--tobira-chara-w);
  left:var(--tobira-chara-left);
  bottom:var(--tobira-chara-bottom);
}
/* ---- 18g. ここまで ---- */

/* ============================================================
   18h. GCこぼれ話（コラム）— 原稿用紙風入口カード + コラムモーダル
   貼り付け先：トピック④「カフェ英語」ブロックのCSSタブ末尾
   ※コラム専用パレット（章テーマから独立・全章で使い回す）
      紙 #FBF6EA / 墨(セピア) #3E2A1E / 朱 #B23A2A
   ※フォント：Noto Serif JP をページ先頭のフォントlinkに追加すること
      → &family=Noto+Serif+JP:wght@500;700
   ============================================================ */

/* ---------- 入口：原稿用紙カード ---------- */
.gb-root .gb-col-sec{margin:48px 6px 14px;}
.gb-root .gb-col-card{appearance:none;-webkit-appearance:none;display:block;width:100%;text-align:left;position:relative;cursor:pointer;
  background:#FBF6EA;
  background-image:
    repeating-linear-gradient(90deg,transparent 0 27px,rgba(178,58,42,.12) 27px 28px),
    repeating-linear-gradient(180deg,transparent 0 27px,rgba(178,58,42,.12) 27px 28px);
  border:1.5px solid rgba(178,58,42,.45);border-radius:2px;
  box-shadow:0 6px 16px rgba(90,50,32,.15);
  padding:22px 18px 18px;transition:transform .15s,box-shadow .15s;}
.gb-root .gb-col-card:active{transform:translateY(3px);box-shadow:0 2px 8px rgba(90,50,32,.13);}
/* クリップ */
.gb-root .gb-col-clip{position:absolute;top:-12px;left:22px;width:16px;height:34px;border:3px solid #9A8B70;border-radius:8px 8px 6px 6px;border-bottom:none;background:transparent;}
.gb-root .gb-col-clip::after{content:"";position:absolute;left:2.5px;top:8px;width:5px;height:22px;border:2.5px solid #9A8B70;border-top:none;border-radius:0 0 4px 4px;}
/* ラベル・タイトル */
.gb-root .gb-col-label{display:block;font-family:'Noto Serif JP','Hiragino Mincho ProN',serif;font-size:14px;font-weight:700;letter-spacing:.26em;color:#9E2A1B;margin:0 0 10px 2px;}
.gb-root .gb-col-txt .ttl{display:block;font-family:'Noto Serif JP','Hiragino Mincho ProN',serif;font-size:25px;font-weight:700;letter-spacing:.1em;color:#3E2A1E;line-height:1.5;}
.gb-root .gb-col-txt .sub{display:block;font-family:'Noto Serif JP','Hiragino Mincho ProN',serif;font-size:13px;font-weight:500;color:#6B4A35;line-height:2.1;margin-top:8px;}
/* フッター：つづきを読む + カンガルー */
.gb-root .gb-col-foot{display:flex;align-items:flex-end;justify-content:space-between;margin-top:8px;}
.gb-root .gb-col-foot .more{display:inline-block;font-family:'Noto Serif JP','Hiragino Mincho ProN',serif;font-size:15px;font-weight:700;letter-spacing:.12em;color:#9E2A1B;border-bottom:1.5px solid #9E2A1B;padding-bottom:3px;margin-bottom:6px;}
.gb-root .gb-col-foot .more::after{content:" →";}
/* カンガルー画像スロット（空=枠+ラベル / URL挿入で枠が消える） */
.gb-root .gb-col-chara{width:74px;height:82px;position:relative;display:flex;align-items:center;justify-content:center;border:1.5px dashed #CBB289;border-radius:6px;background:rgba(255,255,255,.5);}
.gb-root .gb-col-chara::before{content:"【装飾】困り顔\A カンガルー";white-space:pre;text-align:center;font-size:9px;line-height:1.6;color:#A08760;font-family:var(--gb-font-jp,'Noto Sans JP',sans-serif);}
.gb-root .gb-col-chara img{display:none;}
.gb-root .gb-col-chara:has(img[src]:not([src=""])){border:none;background:none;}
.gb-root .gb-col-chara:has(img[src]:not([src=""]))::before{content:none;}
.gb-root .gb-col-chara:has(img[src]:not([src=""])) img{display:block;width:100%;height:100%;object-fit:contain;}

/* ---------- コラムモーダル（gb-modal--col） ----------
   ※body直下移動対応のため .gb-root を先祖に要求しない書き方 */
.gb-modal--col{--md-ac:#B23A2A;}
.gb-modal--col .gb-modal-panel{background:#FBF6EA;}
.gb-modal--col .gb-modal-bar{background:#4A3324;font-family:'Noto Serif JP','Hiragino Mincho ProN',serif;font-weight:700;letter-spacing:.2em;}
.gb-modal--col .gb-modal-body{color:#3E2A1E;font-family:'Noto Serif JP','Hiragino Mincho ProN',serif;padding:26px 22px 30px;}
/* 号数（其の◯）— 左右に細線 */
.gb-modal--col .gb-col-no{display:flex;align-items:center;gap:14px;font-size:12px;font-weight:700;letter-spacing:.5em;text-indent:.5em;color:#B23A2A;margin:2px 0 14px;}
.gb-modal--col .gb-col-no::before,.gb-modal--col .gb-col-no::after{content:"";flex:1;height:1px;background:#D9C39A;}
/* タイトル */
.gb-modal--col .gb-col-title{font-family:'Noto Serif JP','Hiragino Mincho ProN',serif;font-size:22px;font-weight:700;letter-spacing:.06em;line-height:1.7;text-align:center;margin:0 0 22px;}
/* エッセイ本文（一字下げ・ゆったり行間） */
.gb-modal--col .gb-col-essay p{font-size:15px;font-weight:500;line-height:2.3;letter-spacing:.03em;text-indent:1em;margin:0 0 1.7em;}
.gb-modal--col .gb-col-essay p:last-child{margin-bottom:0;}
/* カンガルー大スロット（モーダル内） */
.gb-modal--col .gb-col-chara-lg{width:170px;height:170px;margin:24px auto 8px;position:relative;display:flex;align-items:center;justify-content:center;border:1.5px dashed #CBB289;border-radius:8px;background:rgba(255,255,255,.5);}
.gb-modal--col .gb-col-chara-lg .tx{position:absolute;font-size:11px;line-height:1.7;color:#A08760;text-align:center;font-family:var(--gb-font-jp,'Noto Sans JP',sans-serif);}
.gb-modal--col .gb-col-chara-lg img{display:none;}
.gb-modal--col .gb-col-chara-lg:has(img[src]:not([src=""])){border:none;background:none;}
.gb-modal--col .gb-col-chara-lg:has(img[src]:not([src=""])) .tx{display:none;}
.gb-modal--col .gb-col-chara-lg:has(img[src]:not([src=""])) img{display:block;width:100%;height:100%;object-fit:contain;}
/* 今日の教訓（朱印風フレーム） */
.gb-modal--col .gb-col-lesson{position:relative;margin:30px 4px 10px;padding:24px 18px 18px;background:#fff;
  border:1px solid #B23A2A;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px #B23A2A;}
.gb-modal--col .gb-col-lesson .lbl{position:absolute;top:-13px;left:50%;transform:translateX(-50%) rotate(-2deg);
  background:#B23A2A;color:#FBF6EA;font-family:'Noto Serif JP','Hiragino Mincho ProN',serif;font-size:12px;font-weight:700;letter-spacing:.3em;text-indent:.3em;padding:4px 16px;white-space:nowrap;}
.gb-modal--col .gb-col-lesson p{font-family:'Noto Serif JP','Hiragino Mincho ProN',serif;font-size:16px;font-weight:700;line-height:2;text-align:center;text-indent:0;margin:0;}
/* 下部ナビ：閉じるのみ・中央寄せ */
.gb-modal--col .gb-modal-nav{justify-content:center;}
.gb-modal--col .gb-modal-nav button{font-family:'Noto Serif JP','Hiragino Mincho ProN',serif;color:#3E2A1E;letter-spacing:.2em;}
/* ============================================================ 18h ここまで */

/* ================================================================
   ---- 18i. 背景フラット化・境目ライン恒久対策（2026-08-16） ----

   【問題】18dはHTML属性(data-gb-theme)を単色化したが、CSS側に
   グラデーションの発生源が2つ残っていた:
     1. .gb-bg-layer の既定背景(青グラデ)…JSが色を入れる前・既定章で露出
     2. 章の陰影がgb-midブロックだけに適用され、章扉など非midブロックとの
        境目で「陰影あり/なし」の差がラインに見えていた
   【対策】背景は全章フラット。陰影(中央だけ白く明るい膜)を全gb-rootの
   .gb-wrapに統一適用。これでどのブロック境界でも両側が必ず同色になる。
   ※HTML側の変更(2箇所)とJSの変更(1箇所)もセット。移行手順書を参照。
   ================================================================ */

/* 1. レイヤー既定色をフラットに(巻頭章の青グラデ→単色) */
.gb-bg-fixed .gb-bg-layer{background:#C9E4EF;}

/* 2. 陰影の膜を全ブロックに統一適用(18dのgb-mid限定を全rootへ拡張) */
.gb-root .gb-wrap::before{
  content:"";
  position:absolute;z-index:-1;
  top:0;bottom:0;left:0;right:0;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,0)   0%,
    rgba(255,255,255,.30) 50%,
    rgba(255,255,255,0)   100%);
}
@media print{
  .gb-root .gb-wrap::before{display:none!important;}
}
/* ---- 18i. ここまで ---- */

/* ================================================================
   ---- 18j. 章末の余白(背景レイヤーのはみ出し)修正（2026-08-16） ----

   【問題】.gb-bg-fixed は「高さ100vh+margin-bottom:-100vh」のsticky方式
   のため、100vhより背が低いブロックではレイヤーがブロックの下へ
   はみ出して塗ってしまう。ページ途中では次のブロックに隠れるが、
   最終ブロック(現状はコラム)の後ろでは大きな余白として見える。

   【対策】背景が単色化(18i)された今、100vh方式の必要がなくなったので、
   レイヤーを「自ブロック全域だけを塗るabsolute方式」に変更する。
   はみ出しが構造的に起きなくなり、章間の受け渡しも消滅する。
   クロスフェード(JS)はレイヤーの色を変えるだけなのでそのまま動く。
   ================================================================ */
.gb-bg-fixed{
  position:absolute;top:0;bottom:0;left:0;right:0;
  height:auto;
  margin:0 auto;   /* stickyのマイナスマージンを打ち消し。左右autoで430px帯の中央寄せは維持 */
}

/* ブロック間の縦マージンをゼロに(誌面を隙間なく連続させる)。
   WordPressのブロックラッパー側とgb-root自身の両方に効かせる。 */
:where(.post_content, .lp-content__postContent, body) > :has(> .gb-root){margin-top:0!important;margin-bottom:0!important;}
.gb-root{margin-top:0!important;margin-bottom:0!important;}
/* ---- 18j. ここまで ---- */

/* ================================================================
   ---- 18k. 背景の完全単色化 + 第4章の余白調整（2026-08-16） ----

   【背景】18d/18iで入れていた「中央だけ白く明るい膜(縦グラデ)」が、
   ブロックの高さによって明るさの傾きが変わり、境目で色差に見えていた。
   このページに縦方向の色変化は不要とのディレクター判断により全廃し、
   背景は各章とも完全な単色にする。
   ================================================================ */

/* 1. 陰影の膜(18d・18i)を全廃 → 完全単色 */
.gb-root .gb-wrap::before,
.gb-root.gb-mid .gb-wrap::before{content:none!important;display:none!important;}

/* 2. 第4章 章扉の下余白を圧縮(矢印→トピック①の間隔) */
#gb-ch4 .gb-wrap{padding-bottom:14px;}

/* 3. トピック①: 柱(TOPIC 01)とメインビジュアルの間隔を広げる */
.gb-root .gb-acai-hero{margin-top:28px;}
/* ---- 18k. ここまで ---- */

/* ================================================================
   ---- 18l. WP編集画面プレビュー対策（2026-08-16） ----

   【問題】登場アニメ(gb-reveal)は「JSが .is-in を付けるまで透明」、
   背景レイヤーは「JSが生成」する設計のため、共通JSが動かない
   編集画面ではほぼ真っ白に見える。
   【対策】共通JSが起動したら html に .gb-js を付ける(JS側で1行追加)。
   .gb-js が無い環境(=編集画面)では、アニメを全て完成状態で表示し、
   背景色は章テーマごとの単色をCSSで直接敷く。
   公開ページでは .gb-js が付くので、これまで通りアニメが動く。
   ================================================================ */
html:not(.gb-js) .gb-reveal,
html:not(.gb-js) .gb-reveal *{opacity:1!important;transform:none!important;transition:none!important;}
html:not(.gb-js) .gb-root img{opacity:1!important;transform:none!important;transition:none!important;}
html:not(.gb-js) .gb-pano{--gb-eye:105%;}
html:not(.gb-js) .gb-pano-frame::before{display:none!important;}
html:not(.gb-js) .gb-reveal[data-reveal="marker"] .mk{background-size:100% 100%!important;}
/* 編集画面用の背景色(公開時はJS生成レイヤーが担当) */
html:not(.gb-js) .gb-root.gb-theme-front{background:#FCF8F0;}
html:not(.gb-js) .gb-root.gb-theme-spot{background:#C9E4EF;}
html:not(.gb-js) .gb-root.gb-theme-eat{background:#F8DFC0;}
/* ---- 18l. ここまで ---- */


/* ================================================================
   ---- 18n. 章クロスフェードの白フラッシュ修正（2026-08-16） ----
   【問題】章の変わり目で「一旦白くなって、パッと新色に切り替わる」。
   背面レイヤー(.back)がCSS初期値の opacity:0 のままで、前面のフェード
   アウト時に透けて見えるのが背面の新色ではなくページの白だった。
   【対策】背面レイヤーを常時 opacity:1 にする(前面の裏に隠れているため
   通常時は見えない)。フェード中だけ「旧色→新色」が直接ブレンドされ、
   白を経由しない滑らかな切り替わりになる。JSの変更は不要。
   ================================================================ */
.gb-bg-fixed .gb-bg-layer.back{opacity:1;}
/* ---- 18n. ここまで ---- */

/* ※18m(オフライン全展開)は2026-08-16のディレクター決定(オフライン保存を非推奨とする)により削除。欠番として扱う。次の新セクションは18n。 */