/* ============================================================
   Belgreen — sample04（FBリニューアル・新デザイン・1ページ / アコーディオン式）
   ※現行サイト(/)とは独立。素材は仮置き。
   ============================================================ */

:root{
  --white:#ffffff;
  --paper:#faf9f7;
  --gray-bg:#eeecea;      /* セクション地のグレー */
  --black:#111111;
  --ink:#1c1a19;
  --gray:#6f6d68;
  --line:#e2dfd9;
  --be-black:#231f20;
  --be-yellow:#ffe600;
  --be-red:#d41042;

  /* フォント統一：和文=Zen Kaku Gothic New／欧文=Montserrat */
  --serif:"Zen Kaku Gothic New","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  --sans:"Zen Kaku Gothic New","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  --en:"Montserrat","Zen Kaku Gothic New",sans-serif;

  --container:1080px;
  --gutter:clamp(1.25rem,5vw,2.5rem);
  --radius-blob:60px;     /* 角丸ブロブ写真（角Rをやや強めに） */
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--white);
  line-height:1.95;
  letter-spacing:.06em;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
.en{font-family:var(--en);letter-spacing:.1em}

.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:860px}

/* 国旗バー */
.flag{display:inline-block;width:70px;height:7px;
  background:linear-gradient(to right,var(--be-black) 0 33.4%,var(--be-yellow) 33.4% 66.7%,var(--be-red) 66.7%)}
.flag--sm{width:48px;height:5px}

/* ============================================================
   Reveal（スクロール演出：トンマナ踏襲）
   ============================================================ */
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-l{transform:translateX(-34px)} .rv-r{transform:translateX(34px)}
[data-stag]>*{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-stag].in>*{opacity:1;transform:none}
[data-stag].in>*:nth-child(2){transition-delay:.1s}
[data-stag].in>*:nth-child(3){transition-delay:.2s}
[data-stag].in>*:nth-child(4){transition-delay:.3s}
[data-stag].in>*:nth-child(5){transition-delay:.4s}
[data-stag].in>*:nth-child(6){transition-delay:.5s}
/* 筆のインクリビール（豚線画） */
.ink{-webkit-mask-image:linear-gradient(115deg,#000 40%,transparent 62%);mask-image:linear-gradient(115deg,#000 40%,transparent 62%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;
  transition:-webkit-mask-position 1.7s var(--ease),mask-position 1.7s var(--ease)}
.ink.in{-webkit-mask-position:0 0;mask-position:0 0}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.floaty{animation:floaty 7s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  .rv,[data-stag]>*,.ink{opacity:1!important;transform:none!important;-webkit-mask-image:none!important;mask-image:none!important}
  .floaty{animation:none}
}

/* ============================================================
   Loader：筆で豚が一筆ずつ描かれるローディング（A案から移植）
   ============================================================ */
.loader{position:fixed;inset:0;z-index:2000;background:#f2f1ef;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;
  transition:opacity .6s var(--ease),visibility .6s}
.loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.loader__pig{width:min(210px,42vw);height:auto;display:block}
.loader__bar{opacity:0;animation:loaderFadeUp .5s ease .7s forwards}
.flag-bar{display:inline-block;width:72px;height:6px;
  background:linear-gradient(to right,var(--be-black) 0 33.4%,var(--be-yellow) 33.4% 66.7%,var(--be-red) 66.7% 100%)}
/* 筆描き：マスクの白ストロークを筆順に走らせる */
.pig-draw .stroke{stroke-dasharray:1;stroke-dashoffset:1;
  animation:brushDraw calc(var(--draw-dur,.4s) * var(--draw-speed,1)) cubic-bezier(.45,.05,.55,.95)
    calc(var(--draw-base,1.5s) + var(--draw-offset,0s) * var(--draw-speed,1)) forwards}
.pig-draw .s1{--draw-offset:0s;--draw-dur:.34s}
.pig-draw .s2{--draw-offset:.32s;--draw-dur:.26s}
.pig-draw .s3{--draw-offset:.58s;--draw-dur:.58s}
.pig-draw .s4{--draw-offset:1.18s;--draw-dur:.42s}
.pig-draw .s5{--draw-offset:1.6s;--draw-dur:.2s}
.pig-draw .s6{--draw-offset:1.78s;--draw-dur:.24s}
.pig-draw .s7{--draw-offset:2.02s;--draw-dur:.16s}
.pig-draw .s8{--draw-offset:2.18s;--draw-dur:.44s}
.pig-draw .s9{--draw-offset:2.62s;--draw-dur:.3s}
.pig-draw .s10{--draw-offset:2.92s;--draw-dur:.34s}
@keyframes brushDraw{to{stroke-dashoffset:0}}
/* ローダー用：高速再生（約1.75秒で描き切る） */
.pig-draw--loader{--draw-base:.12s;--draw-speed:.5}
@keyframes loaderFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
body.intro-lock{overflow:hidden}
@media(prefers-reduced-motion:reduce){.pig-draw .stroke{animation:none;stroke-dashoffset:0}.loader{display:none}}

/* ============================================================
   02 ファーストビュー（g + ロゴ + 豚 → 生産者写真）
   ※カンプ準拠：固定ヘッダーなし。ロゴは上部中央、豚はその下・右
   ============================================================ */
.fv{background:#f2f1ef;padding-top:clamp(1.5rem,4vw,3rem)}
.fv__lockup{position:relative;z-index:2;max-width:1000px;margin-inline:auto;padding:0 var(--gutter) clamp(1rem,3vw,2rem);
  min-height:clamp(360px,42vw,520px)}
.fv__herowrap{position:relative;z-index:1}
.fv__brand{text-align:center;padding-top:.5rem;position:relative;z-index:2}
.fv__brand .ruby{display:block;font-size:11px;letter-spacing:.42em;color:var(--ink);margin-bottom:.35rem}
.fv__brand img{height:clamp(38px,5vw,54px);width:auto;margin-inline:auto}
.fv__since{font-family:var(--en);font-size:11px;letter-spacing:.3em;color:var(--gray);margin-top:.5rem}
.fv__g{position:absolute;left:var(--gutter);top:8%;z-index:2}
.fv__g img{height:clamp(150px,20vw,224px);width:auto}
/* 豚：白地の右寄りに置き、下方向へずらして農家写真の上に敢えて掛ける（意図的なオーバーラップ） */
.fv__pig{position:absolute;right:8%;top:48%;width:min(360px,38vw);z-index:3}
/* FVキャッチ（縦組み）：ベルギーのおいしい水・空気・麦で育った豚肉 */
.fv__mid{display:contents}
.fv__catch{position:absolute;left:clamp(190px,22%,300px);top:52%;z-index:2;
  writing-mode:vertical-rl;white-space:normal;max-height:12em;
  font-family:var(--serif);font-weight:500;font-size:clamp(.85rem,1.4vw,1.05rem);letter-spacing:.16em;line-height:2.1}
.fv__catch span{display:block;white-space:nowrap}
/* 右端の縦組みトリコロール（PC・SP共通で表示） */
.fv__vtext{display:flex;flex-direction:column;gap:.5rem;position:absolute;top:9%;right:.5rem;z-index:3;align-items:flex-start}
.fv__vtext span{writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--en);font-size:9px;
  letter-spacing:.24em;text-transform:lowercase;line-height:1;font-weight:600}
.fv__vtext-k{color:#231f20}.fv__vtext-y{color:#e8c500}.fv__vtext-r{color:#d41042}
/* 農家写真：上下をトリミング（頭上に少し余白／足首でカット） */
.fv__hero{width:100%;aspect-ratio:12/5;object-fit:cover;object-position:center 58%;display:block}

/* リード（ひとくち食べれば）※中央そろえ */
.lead{text-align:center;padding-block:clamp(3rem,7vw,5.5rem)}
.lead__in{max-width:620px;margin-inline:auto}
.lead__ttl{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,3vw,2.05rem);line-height:1.75;letter-spacing:.09em}
.lead__body{margin-top:1.8rem;color:var(--ink);line-height:2.15;font-size:clamp(.95rem,1.4vw,1.06rem);font-weight:500}
/* リード：スクロールに合わせて1行ずつ表示 */
.lead .ln{display:block}
.lead__body .ln.gap{margin-top:1.5rem}
.lead__ttl .ln,.lead__body .ln{opacity:0;transform:translateY(16px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.lead__ttl .ln.in,.lead__body .ln.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.lead .ln{opacity:1!important;transform:none!important}}

/* ============================================================
   セクション区切り：大きなg + 国旗
   ============================================================ */
.gdiv{text-align:center;padding:clamp(2rem,5vw,3.5rem) 0 0;position:relative;z-index:2;margin-bottom:clamp(-6.5rem,-13vw,-4.5rem)}
.gdiv img{height:clamp(152px,24vw,214px);width:auto;margin-inline:auto}

/* ============================================================
   03/04 フィーチャーブロック（知る／食べる）
   ============================================================ */
.feat{background:var(--gray-bg);padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,7vw,5rem)}
.feat__ttl{text-align:center;font-family:var(--serif);font-weight:600;font-size:clamp(1.15rem,2.2vw,1.6rem);letter-spacing:.12em;margin-bottom:clamp(2rem,4vw,3rem)}
/* パネル見出し（Belgreen を知る／食べる）はカンプ準拠で下に一本線 */
.panel__in .feat__ttl::after{content:"";display:block;width:58px;height:1px;background:var(--ink);margin:1.1rem auto 0}
/* 知るリード見出し（2行）＋Belgreenロゴ */
.feat__ttl--lead{margin-top:0;margin-bottom:1.4rem;line-height:1.95}
/* Belgreen とは 導入ブロック */
.feat__toha{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:clamp(2.5rem,4.5vw,3.6rem)}
.feat__logo-in{height:clamp(36px,5.2vw,54px);width:auto}
.feat__toha span{font-family:var(--serif);font-weight:700;font-size:clamp(1.05rem,1.9vw,1.4rem);letter-spacing:.1em}
.feat__hl{display:table;margin:clamp(1.3rem,3vw,2rem) auto .5rem;padding:.1em .7em;
  background:linear-gradient(180deg,transparent 46%,var(--gray-bg) 46%)}
.feat__sub{text-align:center;color:var(--ink);font-weight:500;font-size:clamp(.9rem,1.4vw,1.04rem);line-height:1.95;letter-spacing:.03em;margin-bottom:clamp(2rem,4.5vw,3rem);padding-inline:var(--gutter)}
.feat__logo{display:block;height:clamp(46px,7vw,68px);width:auto;margin:clamp(1.6rem,4vw,2.6rem) auto clamp(2.6rem,5.5vw,3.8rem)}
.feat__stage{position:relative;display:grid;grid-template-columns:1fr auto;gap:clamp(1rem,2.5vw,1.8rem);align-items:center;max-width:600px;margin-inline:auto}
.blob-wrap{position:relative}
.feat__stage .blob{aspect-ratio:3/2}
.blob{position:relative;overflow:hidden;border-radius:var(--radius-blob);aspect-ratio:3/2}
.blob img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.blob:hover img{transform:scale(1.05)}
.badge{position:absolute;top:-18px;left:-16px;z-index:3;border-radius:18px;padding:.72rem 1.05rem;min-width:clamp(102px,13vw,132px);
  background:var(--black);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--serif);font-weight:700;font-size:clamp(13px,1.5vw,16px);letter-spacing:.08em;line-height:1.5;box-shadow:0 10px 26px rgba(0,0,0,.18)}
.vtxt{writing-mode:vertical-rl;font-family:var(--serif);font-weight:600;font-size:clamp(.95rem,1.6vw,1.2rem);letter-spacing:.24em;line-height:1.9}
.vtxt span{display:block;white-space:nowrap}
.brsp{display:none}
/* 日本語の行末調整：句割れ・孤立文字（1文字だけの改行）をなるべく防ぐ */
.lead__ttl,.feat__ttl,.feat__hl,.feat__sub,.akami__ttl,.qa__ttl,.point__txt,.dish__cap,.akami__more-txt{text-wrap:balance;line-break:strict;word-break:auto-phrase}
.lead__body,.feat__note,.bpg__body,.akami__lead,.akami__card p,.qa__a{text-wrap:pretty;line-break:strict;word-break:auto-phrase}
.nb{white-space:nowrap}
.feat__note{text-align:center;color:var(--gray);font-size:13.5px;font-weight:500;line-height:2;margin-top:clamp(1.2rem,3vw,2rem);max-width:620px;margin-inline:auto;padding-inline:var(--gutter)}
.feat__ttl{padding-inline:var(--gutter)}

/* くわしく／とじる トグル */
.more{display:flex;justify-content:center;margin-top:1.4rem}
.more__btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--serif);font-size:14px;letter-spacing:.16em;color:var(--ink);padding:.3rem .2rem}
.more__btn .ic{width:20px;height:20px;border:1px solid var(--ink);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;transition:transform .4s var(--ease),background .3s,color .3s}
.more__btn:hover .ic{background:var(--black);color:#fff}
.more__btn .ic::before{content:"+"}
.acc[open] .more__btn .ic::before{content:"−"}
.acc summary{list-style:none}.acc summary::-webkit-details-marker{display:none}
.panel{overflow:hidden;transition:height .55s var(--ease)}
.panel__in{padding-top:clamp(2rem,5vw,3.5rem)}

/* ============================================================
   POINT 1-4（知るパネル）
   ============================================================ */
.pointgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.4rem,5vw,3.6rem) clamp(1.5rem,5vw,3.2rem);max-width:720px;margin-inline:auto;margin-bottom:clamp(3rem,6vw,4.5rem)}
.point{text-align:center;position:relative;padding:1.5rem 1.4rem 1.7rem;isolation:isolate}
/* 白塗り（支給素材 paint-point.png）：本文3行に対して敷き、中央行が白背景の中央に来るよう文章基準で配置 */
.point__txt{position:relative;z-index:0}
.point__txt::before{content:"";position:absolute;left:-13%;right:-13%;top:-.95rem;bottom:-.95rem;z-index:-1;
  background:url("../img/paint-point.png") center/100% 100% no-repeat}
.point__no{font-family:var(--en);font-size:.95rem;font-weight:600;letter-spacing:.2em;position:relative}
.point__no b{font-family:var(--serif);font-size:2.6rem;font-weight:600;margin-left:.3em;vertical-align:-.18em}
.point__txt{font-family:var(--serif);font-size:clamp(1rem,1.6vw,1.15rem);line-height:2;letter-spacing:.08em;margin-top:.6rem}

/* 手描き風 吹き出し（波打つSVG輪郭＋文字を上に重ねる） */
.hbubble{position:relative;isolation:isolate;display:inline-block;padding:1.05rem 1.7rem 1.15rem;text-align:center;
  font-size:13.5px;line-height:1.85;letter-spacing:.04em;color:var(--ink)}
/* 吹き出しは支給の手描き素材を使用（SVGは非表示） */
.hbubble__svg{display:none}
.hbubble{background-position:center;background-repeat:no-repeat;background-size:100% 100%}
.hbubble--wide{display:block;max-width:520px;margin:clamp(2.5rem,5vw,3.5rem) auto clamp(1.6rem,3vw,2.2rem);
  background-image:url("../img/bubble-eu.png");padding:1.2rem 2.2rem 2rem}
.eat__bubble{background-image:url("../img/bubble-good.png");padding:1.1rem 1.6rem 2.3rem}
.close__bubble{background-image:url("../img/bubble-emb.png");padding:1.1rem 1.5rem 2.3rem}
.hbubble--tail-b .tail{transform-origin:center}   /* 下向き（中央） */
.hbubble--tail-bl .tail{}                          /* 下・左寄り */

/* 認証テーブル + 写真 */
.certrow{max-width:760px;margin-inline:auto;background:#fff;border-radius:20px;padding:clamp(1.4rem,3.5vw,2.4rem)}
.certrow>*{min-width:0}
/* 精肉写真（表→吹き出し→画像 の順）円形・中央 */
.certphoto{max-width:clamp(300px,60vw,420px);margin:clamp(1.2rem,3vw,2rem) auto clamp(2rem,4.5vw,3rem);aspect-ratio:4/3;border-radius:22px;overflow:hidden}
.certphoto img{width:100%;height:100%;object-fit:cover;display:block}
.certtbl{width:100%;border-collapse:collapse;font-size:12px}
.certtbl th,.certtbl td{border-bottom:1px solid var(--line);padding:.7rem .6rem;text-align:left;vertical-align:top}
.certtbl th{font-family:var(--en);letter-spacing:.1em;color:var(--gray);white-space:nowrap;width:120px;font-weight:600;font-size:10.5px}
.certtbl .tbc{border-bottom:1px dashed var(--be-red)}

/* ============================================================
   食べるパネル（コラージュ + 特徴 + 商品カード）
   ============================================================ */
/* 箇条書き → その下に写真3点を横並び */
.eat__top{max-width:760px;margin-inline:auto}
.eat__list{margin-top:.5rem;max-width:600px;margin-inline:auto}
.eat__list li{font-family:var(--serif);font-size:clamp(.95rem,1.4vw,1.08rem);line-height:2.05;letter-spacing:.06em;
  position:relative;padding-left:1.25em;margin-bottom:.35em}
.eat__list li::before{content:"・";position:absolute;left:0;top:0}
.eat__bubble2{margin:1.4rem 0 -.6rem auto;max-width:200px;position:relative;z-index:2;
  background-image:url("../img/bubble-good.png");padding:1.1rem 1.6rem 2.3rem}
.eat__photos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.7rem,2vw,1.2rem);margin-top:clamp(1.4rem,3.5vw,2.2rem)}
.eat__photo{aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--gray-bg)}
.eat__photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   赤身の栄養（おいしさパネル）
   ============================================================ */
.akami{max-width:780px;margin:0 auto}
.akami__ttl{text-align:center;font-family:var(--serif);font-weight:700;font-size:clamp(1.3rem,2.8vw,2rem);letter-spacing:.08em;margin-bottom:clamp(1.6rem,4vw,2.6rem)}
.akami__cmp{display:flex;justify-content:center;align-items:flex-end;gap:clamp(1.2rem,4vw,2.8rem);margin-bottom:clamp(1.4rem,3.5vw,2rem)}
.akami__cmp-item{position:relative;text-align:center}
.akami__cap{font-family:var(--serif);font-weight:700;font-size:clamp(.95rem,1.6vw,1.15rem);margin-bottom:.5rem}
.akami__cap--sub{color:var(--gray);font-weight:500;font-size:.82rem}
.akami__ph{border-radius:16px;overflow:hidden;margin-inline:auto}
.akami__cmp-item--main .akami__ph{width:clamp(190px,27vw,286px);aspect-ratio:8/5}
.akami__cmp-item .akami__ph{width:clamp(140px,20vw,220px);aspect-ratio:8/5}
.akami__ph img{width:100%;height:100%;object-fit:cover;display:block}
.akami__flag{position:absolute;top:-1.7rem;left:-1.4rem;z-index:2;font-family:var(--serif);font-weight:700;font-size:clamp(.72rem,1.2vw,.82rem);letter-spacing:.04em;white-space:nowrap}
.akami__flag::after{content:"";position:absolute;left:.2em;top:100%;width:34px;height:26px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='26'%3E%3Cpath d='M2 2 C18 2 26 8 26 18 M26 18 L20 12 M26 18 L30 11' stroke='%23231f20' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat}
.akami__note{font-size:10px;color:var(--gray);margin-top:.35rem;text-align:right}
.akami__lead{text-align:center;font-size:clamp(.95rem,1.5vw,1.12rem);line-height:2;margin:clamp(1.4rem,3.5vw,2.2rem) auto;max-width:520px;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.akami__lead b{font-weight:700}
.akami__nutri{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,4vw,2.6rem);max-width:660px;margin:clamp(1.6rem,4vw,2.4rem) auto 0}
.akami__card{position:relative;z-index:0;padding:clamp(1rem,2.5vw,1.5rem) clamp(1rem,2.5vw,1.4rem) clamp(1.2rem,3vw,1.7rem)}
.akami__card::before{content:"";position:absolute;inset:-.4rem -8%;z-index:-1;background:url("../img/paint-point.png") center/100% 100% no-repeat}
.akami__card-ttl{font-family:var(--serif);font-weight:700;font-size:clamp(1.05rem,1.9vw,1.35rem);letter-spacing:.04em;margin-bottom:.55rem}
.akami__card-ttl b{font-size:1.15em;margin-left:.1em}
.akami__card p{font-size:clamp(.82rem,1.3vw,.94rem);line-height:1.85;color:var(--ink)}
.akami__more{text-align:center;margin:clamp(2.2rem,5vw,3.2rem) auto clamp(1.2rem,3vw,1.8rem)}
.akami__bubble{background:none;padding:.5rem 1.2rem .9rem;font-family:var(--serif);font-weight:700;font-size:clamp(.9rem,1.5vw,1.05rem);margin-bottom:.6rem}
.akami__bubble .hbubble__svg{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:-1;fill:#fff;stroke:var(--ink);stroke-width:2}
.akami__more-txt{font-family:var(--serif);font-weight:700;font-size:clamp(1.1rem,2.1vw,1.5rem);letter-spacing:.06em}
.dishes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,2.5vw,1.6rem);max-width:780px;margin:clamp(1.4rem,3.5vw,2rem) auto 0}
.dish{text-align:center}
.dish__cap{font-size:clamp(.8rem,1.35vw,.92rem);font-weight:500;line-height:1.65;margin-bottom:.7rem;min-height:2.7em}
.dish__ph{border-radius:16px;overflow:hidden;aspect-ratio:4/3}
.dish__ph img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   会社情報（Belgian Pork Group）
   ============================================================ */
.bpg{max-width:720px;margin:0 auto;text-align:center}
.bpg__logo{height:clamp(30px,4.6vw,48px);width:auto;margin:0 auto clamp(1.4rem,3.5vw,2.2rem)}
.bpg__map{display:block;width:100%;max-width:640px;height:auto;margin:0 auto clamp(1.2rem,4vw,2.2rem)}
.bpg__card{position:relative;background:var(--white);border-radius:24px;padding:clamp(1.6rem,4vw,2.6rem);text-align:left;box-shadow:0 14px 34px rgba(0,0,0,.07)}
.bpg__body{font-size:clamp(.9rem,1.4vw,1rem);line-height:2.05;color:var(--ink);font-weight:500}
.bpg__stats{margin-top:clamp(1.2rem,3vw,1.8rem);display:flex;flex-direction:column;gap:.55rem}
.bpg__stats>div{display:flex;gap:.5rem;font-size:clamp(.85rem,1.35vw,.96rem);line-height:1.7}
.bpg__stats dt{position:relative;flex:0 0 auto;min-width:7em;font-weight:700;padding-left:1.1em}
.bpg__stats dt::before{content:"";position:absolute;left:0;top:.55em;width:.5em;height:.5em;border-radius:50%;background:var(--be-red)}
.bpg__stats dd{color:var(--ink)}
.bpg__stats b{font-family:var(--en);font-weight:700;font-size:1.1em;margin:0 .12em}
/* オーナー（カンプ準拠）：吹き出しを上、その下に切り抜き写真。4代目/5代目の点線矢印付き */
.bpg__owner{margin-top:clamp(1.2rem,3vw,1.8rem);text-align:center}
.bpg__bubble{display:inline-block;position:relative;z-index:2;max-width:min(280px,82%);margin:0 auto -.4rem;text-align:center;
  background-image:url("../img/bubble-good.png");background-size:100% 100%;background-repeat:no-repeat;
  padding:1.1rem 1.6rem 2.2rem;font-family:var(--serif);font-weight:700;font-size:clamp(.85rem,1.4vw,1rem);line-height:1.6}
.bpg__ownerph{position:relative;display:block;width:min(360px,94%);margin:.2rem auto 0}
.bpg__ownerph>img{display:block;width:100%;height:auto}
.bpg__gen{position:absolute;z-index:3;display:flex;align-items:center;gap:.1rem;
  font-family:var(--serif);font-weight:700;font-size:clamp(.72rem,1.35vw,.86rem);letter-spacing:.03em;color:var(--ink);white-space:nowrap}
.bpg__gen svg{width:clamp(40px,7.5vw,56px);height:auto;overflow:visible}
.bpg__gen .d{fill:none;stroke:var(--ink);stroke-width:3.6;stroke-linecap:round;stroke-dasharray:.1 8.5}
.bpg__gen .h{fill:none;stroke:var(--ink);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.bpg__gen--5{bottom:40%;right:4%}
.bpg__gen--4{bottom:18%;right:24%}

.prodgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,1.5rem);margin-top:clamp(2.5rem,5vw,3.5rem)}
.prod{background:#fff;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 6px 20px rgba(0,0,0,.05)}
.prod__img{position:relative;aspect-ratio:1;background:var(--gray-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;color:var(--gray)}
.prod__img img{width:60px;opacity:.2}
.prod__img span{font-size:11px;letter-spacing:.08em}
.prod__tags{position:absolute;top:.6rem;left:.6rem;display:flex;gap:.35rem}
.tag{font-size:10px;font-weight:600;padding:.12rem .5rem;border-radius:5px;border:1px solid;letter-spacing:.04em}
.tag--c{color:#0b6e99;border-color:#0b6e99}
.tag--f{color:#2456a6;border-color:#2456a6;background:#f0f5fc}
.prod__body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;flex:1}
.prod__part{font-family:var(--en);font-size:10px;font-weight:600;letter-spacing:.16em;color:var(--gray);text-transform:uppercase}
.prod__name{font-family:var(--serif);font-size:1.15rem;font-weight:600;margin-top:.2rem}
.prod__desc{font-size:12px;color:var(--gray);margin-top:.5rem;line-height:1.8;flex:1}
.prod__spec{margin-top:.8rem;font-size:11.5px}
.prod__spec div{display:flex;gap:.6rem;padding:.35rem 0;border-bottom:1px dashed var(--line)}
.prod__spec dt{color:var(--gray);white-space:nowrap}
.prod__spec dd{margin-left:auto;text-align:right}
.prod__act{display:flex;gap:.5rem;margin-top:.9rem}
.prod__act a{flex:1;text-align:center;font-size:11px;font-weight:600;padding:.5rem;border-radius:7px;letter-spacing:.04em}
.prod__act .b-out{border:1px solid var(--black)}
.prod__act .b-fill{background:var(--black);color:#fff}

/* ============================================================
   Q & A
   ============================================================ */
.qa{padding:clamp(3rem,7vw,5.5rem) 0}
.qa__ttl{text-align:center;font-family:var(--en);font-weight:700;font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:.14em;margin-bottom:clamp(2rem,4vw,3rem)}
.qa__list{max-width:820px;margin-inline:auto;background:var(--gray-bg);border-radius:14px;padding:.4rem clamp(1rem,3vw,2rem)}
.qa__item{border-bottom:1px solid var(--line)}
.qa__item:last-child{border-bottom:none}
.qa__q{display:flex;align-items:center;gap:.9rem;padding:1.15rem .3rem;font-weight:600;font-size:14px;cursor:pointer;list-style:none}
.qa__q::-webkit-details-marker{display:none}
.qa__q::before{content:"Q";font-family:var(--en);font-weight:700;color:var(--be-red)}
.qa__q::after{content:"+";margin-left:auto;font-family:var(--en);font-size:1.2rem;font-weight:300;transition:transform .35s var(--ease)}
.qa__item[open] .qa__q::after{transform:rotate(45deg)}
.qa__a{display:flex;gap:.9rem;padding:0 .3rem 1.2rem;color:var(--gray);font-size:13px;line-height:1.9;
  overflow:hidden;transition:height .42s var(--ease)}
.qa__a::before{content:"A";font-family:var(--en);font-weight:700;color:var(--black)}

/* ============================================================
   緑バンド（自然 + ロゴ）
   ============================================================ */
/* 湖の写真はセクション背景として全面ベタ（余白なし・左右いっぱい） */
.green{position:relative;width:100%;min-height:min(66vw,660px);display:flex;align-items:center;justify-content:center;overflow:hidden;background:#1f3f28}
.green__ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.green::after{content:"";position:absolute;inset:0;background:radial-gradient(130% 100% at 50% 45%,transparent 40%,rgba(0,0,0,.28))}
.green__logo{position:relative;z-index:2;text-align:center}
.green__mark{width:min(340px,62%);height:auto;margin-inline:auto}
.green__ph-note{position:absolute;bottom:8px;left:10px;z-index:3;font-size:10px;color:rgba(255,255,255,.6)}

/* ============================================================
   料理サムネイル横並び
   ============================================================ */
.thumbs{padding:clamp(1.8rem,4vw,2.8rem) 0;overflow:hidden}
.marquee{overflow:hidden;width:100%}
.marquee__track{display:flex;gap:clamp(.7rem,2.4vw,1.4rem);width:max-content;
  animation:marq 48s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track img{flex:0 0 auto;width:clamp(150px,38vw,190px);aspect-ratio:4/3;object-fit:cover;border-radius:16px}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ============================================================
   クロージングCTA
   ============================================================ */
/* ============================================================
   05.5 お問い合わせフォーム（トンマナはページに準拠）
   ============================================================ */
.cform{padding:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,6vw,2.75rem) clamp(3rem,7vw,5rem)}
.cform__ttl{text-align:center;font-family:var(--en);font-weight:700;font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:.14em;margin-bottom:.8rem}
.cform__lead{text-align:center;color:var(--gray);font-size:13.5px;letter-spacing:.1em;margin-bottom:clamp(1.8rem,4vw,2.8rem)}
.cform__form{max-width:760px;margin-inline:auto;display:flex;flex-direction:column;gap:clamp(1rem,2.2vw,1.4rem)}
.cform__row{display:flex;gap:clamp(1rem,2.2vw,1.4rem)}
.cform__row .cform__field{flex:1;min-width:0}
.cform__field{display:flex;flex-direction:column;gap:.5rem}
.cform__label{font-size:12.5px;letter-spacing:.08em;color:var(--ink);font-weight:600;display:inline-flex;align-items:center;gap:.5rem}
.cform__label em{font-style:normal;font-size:10px;font-weight:600;color:#fff;background:var(--be-red);border-radius:4px;padding:.15em .5em;letter-spacing:.06em}
.cform__label i{font-style:normal;font-size:10px;font-weight:500;color:var(--gray);border:1px solid var(--line);border-radius:4px;padding:.15em .5em;letter-spacing:.06em}
.cform__field input,.cform__field select,.cform__field textarea{
  width:100%;font-family:var(--sans);font-size:14px;color:var(--ink);letter-spacing:.04em;
  background:var(--white);border:1px solid var(--line);border-radius:12px;padding:.85rem 1rem;line-height:1.7;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.cform__field textarea{resize:vertical;min-height:140px}
.cform__field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236f6d68' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.4rem}
.cform__field input:focus,.cform__field select:focus,.cform__field textarea:focus{outline:none;border-color:var(--be-red);box-shadow:0 0 0 3px rgba(212,16,66,.1)}
.cform__submit{text-align:center;margin-top:.6rem}
.cform__submit .pill{min-width:220px}
.cform__done{max-width:760px;margin-inline:auto;text-align:center;background:var(--gray-bg);border-radius:16px;padding:clamp(2rem,5vw,3rem);color:var(--ink);font-weight:600;letter-spacing:.08em;line-height:1.9}

.close{text-align:center;padding:clamp(2.5rem,5vw,4rem) 0 clamp(2rem,4vw,3rem)}
.close__lead{font-weight:600;line-height:2;font-size:clamp(.95rem,1.5vw,1.05rem);letter-spacing:.14em}
.close__sub{color:var(--gray);font-size:13px;margin-top:1.3rem;line-height:2.1;letter-spacing:.1em}
.pill{display:inline-flex;align-items:center;justify-content:center;margin-top:1.8rem;min-height:54px;padding:.8rem 2.4rem;
  background:transparent;color:var(--ink);border:1px solid var(--ink);border-radius:999px;font-weight:500;letter-spacing:.1em;
  transition:background .35s,color .35s,transform .35s var(--ease)}
.pill:hover{background:var(--black);color:#fff;transform:translateY(-2px)}
.close__win{margin-top:2.4rem;font-size:12px;color:var(--gray);letter-spacing:.06em}
.close__win strong{display:block;font-size:15px;color:var(--ink);margin-top:.3rem;letter-spacing:.1em}
.close__addr{margin-top:.7rem;font-size:11.5px;color:var(--gray);line-height:1.9;letter-spacing:.06em}
.close__marks{margin-top:clamp(4.8rem,11vw,6rem);position:relative;display:inline-flex;align-items:flex-end;justify-content:center;gap:clamp(1.6rem,4vw,2.4rem)}
.close__marks img.em{height:clamp(112px,15vw,140px)}
.close__gpwrap{position:relative;display:inline-flex;flex-direction:column;align-items:center}
.close__marks img.gp{height:clamp(96px,13vw,124px)}
.close__bubble{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-28%);
  max-width:170px;font-size:12px;padding:.75rem 1.05rem;line-height:1.7;white-space:nowrap}

/* ============================================================
   フッター
   ============================================================ */
.ft{background:var(--paper)}
.ft__info{max-width:1000px;margin-inline:auto;padding:clamp(1.5rem,4vw,2.5rem) var(--gutter);
  display:flex;flex-direction:column;align-items:center;gap:1.4rem;text-align:center}
.ft__addr{font-size:10.5px;color:var(--gray);line-height:1.8;letter-spacing:.04em}
/* フッターロゴは区切り線なし・支給画像そのまま */
.ft__logos{display:flex;align-items:center;justify-content:center;gap:clamp(1.4rem,4vw,2.6rem)}
.ft__logoset{width:min(440px,82%);height:auto}
/* フッター最下部：ベルギー国旗の三色を背景に（文字は暗色ピルで可読性を確保） */
.ft__bottom{background:linear-gradient(to right,var(--be-black) 0 33.4%,var(--be-yellow) 33.4% 66.7%,var(--be-red) 66.7% 100%);text-align:center;padding:.9rem 1rem}
.ft__bottom p{display:inline-block;margin:0;padding:.5rem 1.15rem;border-radius:999px;background:rgba(17,17,17,.72);
  font-family:var(--en);font-size:11px;letter-spacing:.08em;color:#fff}
.ft__bottom b{color:#fff;font-weight:600}

/* ============================================================
   レスポンシブ（SP：縦再構成）
   ============================================================ */
@media(max-width:820px){
  /* SPはカンプ準拠：ロゴ→g→国旗→[縦キャッチ左＋豚右]→写真。右端に縦組トリコロール */
  .fv{padding-top:2rem}
  .cform__row{flex-direction:column;gap:1rem}
  .fv__lockup{position:relative;min-height:0;display:flex;flex-direction:column;align-items:center;
    padding:0 var(--gutter) 0}
  .fv__brand{padding-top:0}
  .fv__brand img{height:44px}
  .fv__g{position:static;margin-top:2.2rem;display:flex;flex-direction:column;align-items:center}
  .fv__g img{height:154px}
  .fv__mid{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;
    gap:.6rem;margin-top:1.8rem;width:100%}
  .fv__mid{overflow:visible;position:relative;justify-content:flex-start}
  .fv__catch{position:static;writing-mode:vertical-rl;white-space:normal;max-height:12.5em;
    font-size:1.06rem;letter-spacing:.14em;line-height:2;margin-top:.2rem;z-index:2}
  /* 豚は縦書きに被らないよう右寄せ＋絶対配置（floatyのtransformと両立）。下端は農家写真に少し掛ける */
  .fv__pig{position:absolute;right:14%;top:auto;bottom:-.4rem;z-index:3;width:min(182px,47vw);margin:0}
  .fv__vtext{display:flex;flex-direction:column;gap:.55rem;position:absolute;top:.4rem;right:var(--gutter);
    z-index:3;align-items:flex-start}
  .fv__vtext span{writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--en);font-size:8px;
    letter-spacing:.24em;text-transform:lowercase;line-height:1;font-weight:600}
  .fv__vtext-k{color:#231f20}
  .fv__vtext-y{color:#e8c500}
  .fv__vtext-r{color:#d41042}
  .fv__herowrap{padding:0 var(--gutter);margin-top:0;position:relative;z-index:1}
  .fv__hero{aspect-ratio:4/5;object-position:center 34%;border-radius:2px}
  .lead{padding-block:2.4rem 2.8rem}
  .lead__in{margin-left:0;padding-inline:var(--gutter);max-width:none}
  /* 知る／食べる：カンプ準拠。縦組みタグライン（2列）を写真の右上に、写真はその下 */
  .brsp{display:inline}
  .feat__stage{display:flex;flex-direction:column-reverse;gap:1rem;max-width:none;padding-inline:var(--gutter)}
  .feat__stage .blob{aspect-ratio:4/3}
  /* 縦組み2列：単一要素の自然な折り返しで（各句は不可分＝句間のみ改列）。センター配置 */
  .vtxt{align-self:center;margin:0 auto;writing-mode:vertical-rl;white-space:normal;
    max-height:13em;font-size:.98rem;letter-spacing:.16em;line-height:2}
  .vtxt span{white-space:nowrap}
  .feat__note{letter-spacing:.04em;line-height:2.1;max-width:none}
  .feat__ttl{letter-spacing:.08em;line-height:1.85}
  .pointgrid{grid-template-columns:1fr;gap:3rem;max-width:340px}
  /* 緑バンド：画像のみ。下は料理写真との間にスペースを設ける */
  .green{min-height:0;aspect-ratio:3/4;margin-bottom:clamp(1.6rem,5vw,2.6rem)}
  .cform{padding-bottom:clamp(1.4rem,4vw,2.2rem)}
  .certtbl th{width:112px;font-size:10px}
  .eat__top{grid-template-columns:1fr}
  .eat__left,.eat__right{max-width:420px;margin-inline:auto;width:100%}
  /* カンプ準拠：SPは箇条書きを写真より上に */
  .eat__left{display:flex;flex-direction:column}
  .eat__left .eat__list{order:-1;margin-top:0;margin-bottom:1.6rem}
  .eat__right{padding-top:0}
  .eat__bubble{margin:0 auto -1rem}
  .eat__soup{width:52%}
  /* 赤身セクション SP */
  .akami__nutri{grid-template-columns:1fr;gap:1.3rem;max-width:360px}
  .dishes{grid-template-columns:1fr;gap:1.3rem;max-width:320px}
  .dish__cap{min-height:0}
  /* SP：赤身比較はカンプ準拠で縦積み（ベルグリーンを大きく、国産を下に小さく） */
  .akami__cmp{flex-direction:column;align-items:center;gap:1.5rem}
  .akami__cmp-item--main .akami__ph{width:min(300px,80%);aspect-ratio:8/5}
  .akami__cmp-item .akami__ph{width:min(216px,58%);aspect-ratio:8/5}
  .akami__flag{left:-.4rem;top:-1.5rem}
  .akami__note{text-align:center}
  /* SPは商品カードを横並び（横スクロール） */
  .prodgrid{display:flex;grid-template-columns:none;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--gutter));padding:.2rem var(--gutter) .6rem;scrollbar-width:none}
  .prodgrid::-webkit-scrollbar{display:none}
  .prod{flex:0 0 72%;scroll-snap-align:start}
  .prod__img{aspect-ratio:1}
  .close__marks img.em{height:104px}
  .close__marks img.gp{height:92px}
}
@media(max-width:480px){
  .thumbs__row img{width:150px}
}