/* ==========================================================
   Agri-Gio  新B案：クラフト紙×墨（ビンテージ）
   ベース  … 黒 / 白 / 金（装飾はすべて金の細罫）
   差し色  … 白（料理）／土色・生成り（丹波・農村）／深緑（農業・次世代）
             ＝ セクションの「面」として使う

   セクションは面ごとにトークンを切り替える。HTML側のクラス:
     .sec-light … 白い面（既定の明るい面）
     .sec-dark  … 黒い面
     .sec-veg   … 黒い面（野菜の帯）
     .sec-soil  … 生成りの面（土色ゾーン）
     .sec-green … 深緑の面（暗い）
   ヘッダー・ページヘッダー・ステートメント・締めCTA・フッターは常に黒。
   ========================================================== */
:root{
  /* ---- ブランド色 ---- */
  --gold:#B9925A;
  --gold-soft:#E4CA9C;      /* 黒地で使う金 */
  --gold-deep:#96762C;      /* 白地で使う金 */
  --black:#241B12;
  --paper:#FBFAF5;
  --cream:#F2EFE6;
  --soil:#C4A87B;
  --soil-2:#E0CBA4;
  --soil-deep:#6E5527;
  --soil-tint:#F2EADB;
  --soil-panel:#1A140C;
  --green:#2C5B3E;
  --green-a:#8FB07A;
  --green-deep:#17301F;
  --green-panel:#0B1811;

  /* ---- 面のトークン（既定＝黒） ---- */
  --surface:var(--black);
  --surface-2:#2E2318;
  --ink:#F2EFE6;
  --muted:rgba(242,239,230,0.62);
  --muted-2:rgba(242,239,230,0.40);
  --accent:var(--gold-soft);
  --accent-fg:#241B12;
  --line:rgba(201,162,74,0.30);
  --line-2:rgba(201,162,74,0.52);
  --hair:rgba(242,239,230,0.12);
  --shadow:0 30px 60px rgba(0,0,0,0.55);

  /* ---- ページ識別色（ページヘッダーの下線だけに使う） ---- */
  --theme:var(--soil-2);

  --serif:'Shippori Mincho','Noto Serif JP',serif;
  --eng:'Cormorant Garamond','EB Garamond',serif;
  --sans:'Noto Sans JP','Hiragino Sans',sans-serif;
}
body.t-white{--theme:#FFFFFF;}
body.t-soil {--theme:var(--soil-2);}
body.t-green{--theme:var(--green-a);}

/* ---- 明るい面 ---- */
.sec-light{
  --surface:var(--paper); --surface-2:#FFFFFF;
  --ink:#14140F;
  --muted:rgba(20,20,15,0.66);
  --muted-2:rgba(20,20,15,0.45);
  --accent:var(--gold-deep); --accent-fg:#FFFFFF;
  --line:rgba(150,118,44,0.34); --line-2:rgba(150,118,44,0.58);
  --hair:rgba(20,20,15,0.12);
  --shadow:0 24px 46px rgba(20,20,15,0.14);
}
/* ---- 生成りの面（土色ゾーン） ---- */
.sec-soil{
  --surface:var(--soil-tint); --surface-2:#FBF6EC;
  --ink:#2A2117;
  --muted:rgba(42,33,23,0.70);
  --muted-2:rgba(42,33,23,0.48);
  --accent:var(--soil-deep); --accent-fg:#FFFFFF;
  --line:rgba(110,85,39,0.34); --line-2:rgba(110,85,39,0.56);
  --hair:rgba(42,33,23,0.13);
  --shadow:0 24px 46px rgba(42,33,23,0.16);
}
/* ---- 深緑の面 ---- */
.sec-green{
  --surface:var(--green-panel); --surface-2:#10231A;
  --ink:#F2EFE6;
  --muted:rgba(242,239,230,0.74);
  --muted-2:rgba(242,239,230,0.48);
  --accent:var(--gold-soft); --accent-fg:#241B12;
  --line:rgba(201,162,74,0.28); --line-2:rgba(201,162,74,0.48);
  --hair:rgba(242,239,230,0.13);
  --shadow:0 28px 52px rgba(0,0,0,0.5);
}
/* ---- 黒い面（:root と同じ。明示用） ---- */
.sec-dark, .sec-veg{--surface:var(--black); --surface-2:#2E2318;}

*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--black); color:var(--cream);
  font-family:var(--sans); font-weight:300;
  line-height:1.95; letter-spacing:0.02em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img, video{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
::selection{background:var(--gold); color:#241B12;}
.tbl td, .tbl th, .f-links li, .veg-card, .prod-card{min-width:0; overflow-wrap:anywhere;}
.wrap{max-width:1180px; margin:0 auto; padding:0 40px;}
.wrap-n{max-width:900px; margin:0 auto; padding:0 40px;}
section{padding:130px 0; position:relative; background:var(--surface); color:var(--ink);}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.55; letter-spacing:0.04em; color:var(--ink);}
h1 em, h2 em, h3 em{font-style:normal; color:var(--accent);}

/* 細罫つきの小見出し */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--eng); font-size:13px; letter-spacing:0.28em;
  text-transform:uppercase; color:var(--accent); margin-bottom:20px;
}
.eyebrow::before{content:''; width:28px; height:1px; background:var(--accent); opacity:0.85; flex-shrink:0;}
.sec-head .eyebrow::before, .statement .eyebrow::before, .final .eyebrow::before{display:none;}
.rule{height:1px; background:var(--line); width:100%;}

/* ---------- HEADER（常に黒） ---------- */
header{
  position:sticky; top:0; z-index:60;
  background:rgba(36,27,18,0.90);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(201,162,74,0.30);
  color:var(--cream);
}
.hbar{display:flex; align-items:center; justify-content:space-between; padding:15px 0;}
.brand{display:flex; align-items:center; gap:13px;}
.brand img{width:36px; height:auto;}
.brand .n{font-family:var(--eng); font-size:25px; font-style:italic; letter-spacing:0.06em; color:var(--cream); line-height:1;}
.brand .s{display:block; font-size:9px; letter-spacing:0.2em; color:var(--gold-soft); margin-top:5px; opacity:0.85;}
nav ul{display:flex; align-items:center; gap:30px; list-style:none;}
nav a{
  display:block; font-size:13px; color:rgba(242,239,230,0.82); letter-spacing:0.06em;
  line-height:1.35; padding-bottom:4px; border-bottom:1px solid transparent;
  transition:border-color .25s, color .25s;
}
nav a .en{
  display:block; font-family:var(--eng); font-size:9.5px; letter-spacing:0.18em;
  color:rgba(242,239,230,0.40); text-transform:uppercase; margin-top:2px;
}
nav a:hover, nav a.active{color:var(--gold-soft); border-color:var(--gold-soft);}
nav a:hover .en, nav a.active .en{color:var(--gold-soft); opacity:0.7;}
.nav-cta{
  border:1px solid var(--gold); color:var(--gold-soft)!important; background:transparent;
  padding:11px 22px; border-radius:2px; font-size:12px; letter-spacing:0.14em;
  transition:background .25s, color .25s;
}
.nav-cta:hover{background:var(--gold); color:#241B12!important; border-color:var(--gold)!important;}
.nav-cta .en{display:none;}
.burger, #navToggle, .scrim{display:none;}

/* ---------- BUTTONS ---------- */
.cta-row{display:flex; gap:16px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px; font-size:13px; letter-spacing:0.12em; border-radius:2px;
  transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-p{background:var(--accent); color:var(--accent-fg); font-weight:500;}
.btn-p:hover{filter:brightness(1.08);}
.btn-g{border:1px solid var(--line-2); color:var(--ink);}
.btn-g:hover{border-color:var(--accent); color:var(--accent);}
.btn-cream{background:var(--cream); color:#241B12; font-weight:500;}
.btn-cream:hover{background:#fff;}
.btn-outline{border:1px solid rgba(242,239,230,0.38); color:var(--cream);}
.btn-outline:hover{border-color:var(--gold-soft); color:var(--gold-soft);}
.more{
  display:inline-flex; align-items:center; gap:10px; margin-top:16px;
  font-size:12.5px; letter-spacing:0.12em; color:var(--accent);
  border-bottom:1px solid var(--accent); padding-bottom:5px;
  transition:gap .25s ease;
}
.more:hover{gap:18px;}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--eng); font-size:11.5px; font-style:italic; letter-spacing:0.06em;
  color:var(--accent); border:1px solid var(--line-2); border-radius:20px;
  padding:5px 14px;
}

/* ---------- HERO（エンブレム・常に深緑） ---------- */
.hero{
  position:relative; padding:0; overflow:hidden; background:var(--black); color:var(--cream);
  min-height:clamp(600px, calc(100vh - 76px), 900px);
  display:flex; align-items:center;
}
.hero-photo{position:absolute; inset:0; z-index:0;}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:72% 58%;}
.hero-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(96deg, rgba(36,27,18,0.94) 0%, rgba(36,27,18,0.86) 30%, rgba(36,27,18,0.52) 52%, rgba(36,27,18,0.14) 72%, rgba(36,27,18,0.06) 100%);
}
.hero-content{position:relative; z-index:5; width:100%; padding:60px 0;}
.hero-copy-in{max-width:640px;}
.hero-brand{margin-bottom:30px;}
.hero-brand .jp{display:block; font-size:12.5px; letter-spacing:0.34em; color:var(--gold-soft); margin-bottom:12px;}
.hero-brand .nm{
  display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
  font-family:var(--serif); font-weight:600; font-size:clamp(22px,2.5vw,30px);
  color:var(--cream); letter-spacing:0.1em; line-height:1.3;
}
.hero-brand .nm em{
  font-family:var(--eng); font-style:italic; font-weight:500;
  font-size:clamp(21px,2.4vw,29px); letter-spacing:0.06em; color:var(--gold-soft);
}
.hero-brand::after{content:''; display:block; width:62px; height:1px; background:var(--gold); margin-top:24px; opacity:0.9;}
.hero h1{
  font-size:clamp(34px,5vw,62px); font-weight:700; color:var(--cream);
  line-height:1.36; letter-spacing:0.03em; margin-bottom:26px;
  text-shadow:0 4px 30px rgba(0,0,0,0.6);
}
.hero h1 em{font-style:normal; color:var(--gold-soft);}
.hero p.lead{font-size:16px; color:rgba(242,239,230,0.86); line-height:2.05; margin-bottom:38px; max-width:520px;}

/* HERO エンブレム版（深緑ベース／2026-10） */
.hero.hero-emb{
  background:
    radial-gradient(ellipse 46% 62% at 73% 50%, rgba(236,214,176,0.55) 0%, rgba(36,27,18,0) 70%),
    linear-gradient(180deg, #241B12 0%, #1F170F 100%);
}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); align-items:center; gap:clamp(28px,5vw,80px);}
.hero-emb .hero-copy-in{max-width:560px;}
.hero-emb h1{text-shadow:none;}
.hero-emblem{display:flex; justify-content:center;}
.hero-emblem img{width:100%; max-width:600px; height:auto; display:block; filter:drop-shadow(0 18px 40px rgba(0,0,0,0.28));}
.geo-tag{
  position:absolute; right:40px; bottom:38px; z-index:6;
  font-family:var(--eng); font-size:12px; letter-spacing:0.1em;
  color:var(--gold-soft); text-align:right; line-height:1.7;
  border-right:1px solid var(--gold); padding-right:14px;
}

/* ---------- PAGE HEADER（常に黒） ---------- */
.phead{
  position:relative; padding:130px 0 106px; overflow:hidden;
  background:var(--black); color:var(--cream); border-bottom:2px solid var(--theme);
}
.phead::before{content:''; position:absolute; inset:0; background-size:cover; background-position:center 58%; opacity:0.55;}
.phead::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(36,27,18,0.42), rgba(36,27,18,0.90));}
.phead .wrap{position:relative; z-index:2;}
.phead .eyebrow{color:var(--theme);}
.phead .eyebrow::before{background:var(--theme);}
.phead h1{font-size:clamp(30px,4vw,50px); font-weight:700; color:var(--cream); margin-bottom:20px; text-shadow:0 3px 24px rgba(0,0,0,0.5);}
.phead p{font-size:15px; color:rgba(242,239,230,0.80); line-height:2.15; max-width:640px;}
.crumb{font-family:var(--eng); font-size:12px; color:rgba(242,239,230,0.45); letter-spacing:0.12em; margin-bottom:24px;}
.crumb a:hover{color:var(--gold-soft);}

/* ---------- STATEMENT（常に黒） ---------- */
.statement{
  background:var(--black); color:var(--cream); padding:118px 0; text-align:center;
  border-top:1px solid rgba(201,162,74,0.30); border-bottom:1px solid rgba(201,162,74,0.30);
}
.statement .eyebrow{color:var(--gold-soft); justify-content:center;}
.statement p{
  font-family:var(--serif); font-weight:500; color:var(--gold-soft);
  font-size:clamp(21px,2.7vw,34px); line-height:1.95; letter-spacing:0.06em;
  max-width:900px; margin:0 auto;
}
.statement .attribution{
  display:block; margin:34px auto 0; padding-top:30px; max-width:420px;
  border-top:1px solid rgba(201,162,74,0.30);
  font-family:var(--eng); font-size:12.5px; letter-spacing:0.18em; color:rgba(242,239,230,0.40);
}

/* ---------- SECTION HEAD ---------- */
.sec-head{text-align:center; margin-bottom:66px;}
.sec-head .eyebrow{justify-content:center;}
.sec-head h2{font-size:clamp(27px,3.4vw,42px); color:var(--ink); margin-bottom:18px;}
.sec-head p{font-size:14.5px; color:var(--muted);}
.sec-head.left{text-align:left;}
.sec-head.left .eyebrow{justify-content:flex-start;}
.sec-head.left .eyebrow::before{display:block;}

/* ---------- カード（3つの約束・特徴など） ---------- */
.p-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.p-card{
  position:relative; padding:46px 34px 100px; border-radius:2px;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface-2); border:1px solid var(--hair); color:var(--ink);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.p-card::before{content:''; position:absolute; left:0; top:0; width:100%; height:2px; background:var(--accent); opacity:0.7;}
.p-card:hover{transform:translateY(-8px); box-shadow:var(--shadow); border-color:var(--line);}
.p-card .num{
  font-family:var(--eng); font-style:italic; font-size:14px; letter-spacing:0.14em;
  color:var(--accent); margin-bottom:24px; padding-bottom:18px; border-bottom:1px solid var(--hair);
}
.p-card h3{font-size:23px; line-height:1.62; margin-bottom:18px; color:var(--ink);}
.p-card p{font-size:13.5px; line-height:2.05; color:var(--muted);}
.p-card .go{
  position:absolute; left:34px; bottom:40px; font-size:12px; letter-spacing:0.12em; color:var(--accent);
  display:inline-flex; align-items:center; gap:8px; border-bottom:1px solid currentColor; padding-bottom:4px;
}
/* 3色の出し分け（上の罫だけ差し色にする） */
.p-1::before{background:var(--ink); opacity:0.5;}
.p-2::before{background:var(--soil);}
.p-3::before{background:var(--green-a);}

/* トップの「3つの約束」だけ、3色をそのまま面で見せる */
.p-grid.promise .p-card{padding-top:44px;}
.p-grid.promise .p-1{background:#FFFFFF; border-color:rgba(150,118,44,0.34); color:#14140F;}
.p-grid.promise .p-1 .num{color:var(--gold-deep); border-bottom-color:rgba(20,20,15,0.12);}
.p-grid.promise .p-1 h3{color:#14140F;}
.p-grid.promise .p-1 p{color:rgba(20,20,15,0.66);}
.p-grid.promise .p-1 .go{color:var(--gold-deep);}
.p-grid.promise .p-2{background:var(--soil-tint); border-color:rgba(110,85,39,0.34); color:#2A2117;}
.p-grid.promise .p-2 .num{color:var(--soil-deep); border-bottom-color:rgba(42,33,23,0.14);}
.p-grid.promise .p-2 h3{color:#2A2117;}
.p-grid.promise .p-2 p{color:rgba(42,33,23,0.70);}
.p-grid.promise .p-2 .go{color:var(--soil-deep);}
.p-grid.promise .p-3{background:var(--green-deep); border-color:rgba(201,162,74,0.30); color:var(--cream);}
.p-grid.promise .p-3::before{background:var(--gold-soft); opacity:0.8;}
.p-grid.promise .p-3 .num{color:var(--gold-soft); border-bottom-color:rgba(242,239,230,0.16);}
.p-grid.promise .p-3 h3{color:var(--cream);}
.p-grid.promise .p-3 p{color:rgba(242,239,230,0.76);}
.p-grid.promise .p-3 .go{color:var(--gold-soft);}

/* ---------- GRID ユーティリティ ---------- */
.g2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.g3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.p-grid.cols2{grid-template-columns:repeat(2,1fr);}
.p-grid.cols3{grid-template-columns:repeat(3,1fr);}
.stat-row.cols2{grid-template-columns:repeat(2,1fr);}

/* ---------- BLOCK（写真は額装する） ---------- */
.block{display:grid; grid-template-columns:1fr 1fr; gap:78px; align-items:center;}
.block.rev .b-photo{order:2;}
.b-photo{
  position:relative; border-radius:2px; overflow:hidden; background:#000;
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.b-photo img{width:100%; aspect-ratio:4/3; object-fit:cover;}
.b-photo.tall img{aspect-ratio:3/4; object-position:50% 56%;}
.b-photo.wide img{aspect-ratio:3/2;}
.b-photo .cap{
  position:absolute; left:0; right:0; bottom:0; padding:28px 22px 16px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
  font-size:11.5px; color:rgba(242,239,230,0.86); letter-spacing:0.05em;
}
.b-text h2{font-size:clamp(26px,3.2vw,40px); color:var(--ink); margin-bottom:26px;}
.b-text p{font-size:15px; color:var(--muted); line-height:2.15; margin-bottom:18px;}

/* ---------- COMING SOON ---------- */
.soon{
  position:relative; background:var(--surface-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--accent); text-align:center; gap:8px; border:1px dashed var(--line-2);
}
.soon .lb{font-family:var(--eng); font-style:italic; font-size:12.5px; letter-spacing:0.14em;}
.soon .sb{font-size:11px; color:var(--muted-2); letter-spacing:0.04em; line-height:1.7; padding:0 14px;}
.soon-1x1{aspect-ratio:1/1;}
.soon-4x3{aspect-ratio:4/3;}
.soon-16x9{aspect-ratio:16/9;}
.soon-note{
  display:inline-flex; align-items:center; gap:8px; margin-top:8px;
  font-family:var(--eng); font-style:italic; font-size:11.5px; letter-spacing:0.06em;
  color:var(--accent); border:1px solid var(--line-2); border-radius:20px; padding:6px 15px;
}
.soon-panel{background:var(--surface-2); border:1px dashed var(--line-2); border-radius:2px; padding:40px 30px; text-align:center;}
.soon-panel .lb{font-family:var(--eng); font-style:italic; font-size:12.5px; letter-spacing:0.14em; color:var(--accent); margin-bottom:12px;}
.soon-panel h3{font-size:19px; color:var(--ink); margin-bottom:10px;}
.soon-panel p{font-size:13px; color:var(--muted);}
.tbd{color:var(--accent); font-family:var(--eng); font-style:italic; font-size:12.5px; letter-spacing:0.18em;}
.origin{background:var(--soil-tint); border:1px solid rgba(110,85,39,0.30); border-radius:2px; padding:38px 34px; color:#2A2117;}
.origin h3{font-size:20px; color:#2A2117; margin-bottom:16px;}
.origin p{font-size:14px; color:rgba(42,33,23,0.74); line-height:2.05;}
.origin .word{font-family:var(--eng); font-style:italic; font-size:16px; letter-spacing:0.08em; color:var(--soil-deep);}

/* ---------- 野菜（1pxの格子で組む） ---------- */
.sec-veg{border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.veg-row{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.veg-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.veg-card{background:var(--surface-2); display:block; position:relative; color:var(--ink); transition:transform .28s ease, box-shadow .28s ease;}
.veg-card:hover{transform:translateY(-5px); box-shadow:var(--shadow); z-index:2;}
.veg-card .ph{position:relative; overflow:hidden;}
.veg-card img{width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .55s ease;}
.veg-card:hover img{transform:scale(1.06);}
.veg-card .no{
  position:absolute; left:11px; top:11px; z-index:2;
  font-family:var(--eng); font-style:italic; font-size:12px; letter-spacing:0.08em;
  background:rgba(36,27,18,0.62); color:var(--gold-soft);
  border:1px solid rgba(201,162,74,0.50); padding:3px 10px; border-radius:20px;
}
.veg-card .b{padding:18px 17px 22px;}
.veg-card .nm{font-family:var(--serif); font-size:16px; color:var(--ink); margin-bottom:7px; line-height:1.5;}
.veg-card .se{font-family:var(--eng); font-style:italic; font-size:12px; color:var(--accent); letter-spacing:0.06em; margin-bottom:9px;}
.veg-card .ht{font-size:11.5px; color:var(--muted); line-height:1.85;}
.veg-foot{text-align:center; margin-top:52px;}
.series-tag{
  display:inline-block; margin-top:20px; font-family:var(--eng); font-style:italic;
  font-size:12.5px; letter-spacing:0.08em;
  border:1px solid var(--line-2); color:var(--accent); padding:7px 17px; border-radius:20px;
}

/* ---------- LOOP ---------- */
.loop-steps{display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:16px; position:relative;}
.loop-steps::before{
  content:''; position:absolute; top:53px; left:10%; right:10%; height:1px;
  background:repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 16px); opacity:0.5;
}
.loop-step{position:relative; z-index:2; text-align:center; padding:30px 16px; background:var(--surface-2); border:1px solid var(--hair); border-radius:2px;}
.loop-step .circle{
  width:52px; height:52px; margin:0 auto 18px; border-radius:50%;
  border:1px solid var(--accent); background:var(--surface-2); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--eng); font-style:italic; font-size:18px;
}
.loop-step .t{font-family:var(--eng); font-size:12px; letter-spacing:0.18em; color:var(--accent); margin-bottom:8px;}
.loop-step .d{font-size:12.5px; color:var(--muted); line-height:1.8;}
.loop-note{
  margin-top:56px; padding-top:36px; border-top:1px solid var(--line); text-align:center;
  font-family:var(--serif); font-size:19px; color:var(--accent); line-height:1.95;
}
.loop-note span{display:block; margin-top:12px; font-family:var(--sans); font-size:13px; color:var(--muted);}

/* ---------- TABLE ---------- */
.tbl{width:100%; border-collapse:collapse; font-size:14px; background:var(--surface-2); border:1px solid var(--line);}
.tbl th, .tbl td{padding:19px 22px; text-align:left; border-bottom:1px solid var(--hair); vertical-align:top;}
.tbl tr:last-child th, .tbl tr:last-child td{border-bottom:none;}
.tbl th{width:32%; font-weight:500; color:var(--accent); font-family:var(--serif);}
.tbl td{color:var(--muted); line-height:2;}

/* ---------- VIDEO ---------- */
.vid{display:block; position:relative; border-radius:2px; overflow:hidden; background:#000; cursor:pointer; aspect-ratio:16/9; border:1px solid var(--line); box-shadow:var(--shadow);}
.vid img{width:100%; height:100%; object-fit:cover; opacity:0.6; transition:opacity .35s ease, transform .5s ease;}
.vid:hover img{opacity:0.78; transform:scale(1.03);}
.vid iframe{width:100%; height:100%; border:0; display:block;}
.vid .play{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; pointer-events:none;}
.vid .pbtn{
  width:78px; height:78px; border-radius:50%;
  border:1px solid var(--gold-soft); background:rgba(36,27,18,0.42); color:var(--gold-soft);
  display:flex; align-items:center; justify-content:center; font-size:22px; transition:transform .3s ease;
}
.vid:hover .pbtn{transform:scale(1.08);}
.vid .ptxt{color:var(--cream); font-family:var(--serif); font-size:16px; letter-spacing:0.08em; text-shadow:0 1px 8px rgba(0,0,0,0.7);}
.vid .pmeta{font-family:var(--eng); font-style:italic; color:rgba(242,239,230,0.7); font-size:12px; letter-spacing:0.08em;}
.video-note{display:flex; align-items:center; gap:16px; margin-top:28px; padding:17px 20px; background:var(--surface-2); border:1px solid var(--hair); border-radius:2px;}
.video-note .ic{width:40px; height:40px; flex-shrink:0; border-radius:50%; border:1px solid var(--accent); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:13px;}
.video-note .t{font-size:13px; color:var(--ink); font-family:var(--serif);}
.video-note .d{font-size:11.5px; color:var(--muted);}

/* ---------- QUOTE / PRODUCERS / STATS ---------- */
.quote{
  border-left:2px solid var(--accent); padding:6px 0 6px 26px; margin:32px 0;
  font-family:var(--serif); font-size:17px; color:var(--ink); line-height:1.95;
}
.quote .who{display:block; margin-top:14px; font-family:var(--sans); font-size:12px; color:var(--muted-2);}
.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.prod-card{background:var(--surface-2); border:1px solid var(--hair); border-radius:2px; overflow:hidden; color:var(--ink); transition:transform .3s ease, border-color .3s ease;}
.prod-card:hover{transform:translateY(-6px); border-color:var(--line-2);}
.prod-card .ph{position:relative; overflow:hidden;}
.prod-card .ph img, .prod-card .ph .soon{width:100%; aspect-ratio:1/1;}
.prod-card .b{padding:22px 20px 26px;}
.prod-card .nm{font-family:var(--serif); font-size:19px; color:var(--ink); margin-bottom:5px;}
.prod-card .ro{font-family:var(--eng); font-style:italic; font-size:12px; color:var(--accent); letter-spacing:0.08em; margin-bottom:13px;}
.prod-card .tx{font-size:12.5px; color:var(--muted); line-height:1.9;}
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:38px; padding-top:30px; border-top:1px solid var(--line);}
.stat .v{font-family:var(--eng); font-style:italic; font-size:38px; line-height:1.15; color:var(--accent);}
.stat .l{font-size:11.5px; letter-spacing:0.08em; color:var(--muted-2); margin-top:4px;}
.on-green .stat .v{color:var(--gold-soft);}
.on-cream .stat .v{color:var(--accent);}

/* ---------- 面ごとの微調整 ---------- */
.sec-light + .sec-light, .sec-dark + .sec-dark{border-top:1px solid var(--line);}
.sec-soil{border-top:1px solid rgba(110,85,39,0.24); border-bottom:1px solid rgba(110,85,39,0.24);}
.sec-green{border-top:1px solid rgba(201,162,74,0.26); border-bottom:1px solid rgba(201,162,74,0.26);}
.sec-dark{border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

/* ---------- FINAL CTA（常に黒） ---------- */
.final{
  position:relative; padding:160px 0 130px; overflow:hidden; text-align:center;
  background:var(--black); color:var(--cream);
}
.final::before{content:''; position:absolute; inset:0; background-size:cover; background-position:center 60%; z-index:0; opacity:0.55;}
.final::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(36,27,18,0.72), rgba(36,27,18,0.94)); z-index:2;}
.final .bgvid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; opacity:0.55;}
.final .wrap{position:relative; z-index:3;}
.final .eyebrow{color:var(--gold-soft); justify-content:center;}
.final h2{font-size:clamp(30px,4.2vw,54px); font-weight:700; color:var(--cream); margin-bottom:28px; line-height:1.48; text-shadow:0 3px 24px rgba(0,0,0,0.5);}
.final h2 em{color:var(--gold-soft);}
.final p{font-size:15px; color:rgba(242,239,230,0.80); line-height:2.15; margin-bottom:44px;}
.final .cta-row{justify-content:center;}
.final .soon-note{background:rgba(36,27,18,0.5); color:rgba(242,239,230,0.78); border-color:rgba(242,239,230,0.22); margin-top:28px;}
.vidblock{position:relative; border-radius:2px; overflow:hidden; background:#000; border:1px solid var(--line); box-shadow:var(--shadow);}
.vidblock video{width:100%; aspect-ratio:16/9; object-fit:cover; display:block;}
.vidblock .cap{position:absolute; left:0; right:0; bottom:0; padding:30px 22px 16px; background:linear-gradient(180deg, transparent, rgba(0,0,0,0.82)); font-size:11.5px; color:rgba(242,239,230,0.86); letter-spacing:0.05em;}

/* ---------- FORM ---------- */
.form{background:var(--surface-2); border:1px solid var(--line); border-radius:2px; padding:46px 42px;}
.fld{margin-bottom:26px;}
.fld label{display:block; font-size:13px; color:var(--ink); margin-bottom:10px; letter-spacing:0.08em;}
.fld .req{color:#B4573F; font-size:11px; margin-left:6px;}
.fld input, .fld select, .fld textarea{
  width:100%; font-family:var(--sans); font-size:14px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:2px;
  padding:14px 15px; transition:border-color .25s;
}
.fld input::placeholder, .fld textarea::placeholder{color:var(--muted-2);}
.fld input:focus, .fld select:focus, .fld textarea:focus{outline:none; border-color:var(--accent);}
.fld textarea{min-height:150px; resize:vertical; line-height:1.9;}
.fld .hint{font-size:11.5px; color:var(--muted-2); margin-top:8px;}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:22px;}

/* ---------- FOOTER（常に黒） ---------- */
footer{background:#1B140D; color:rgba(242,239,230,0.62); padding:76px 0 34px; font-size:13px; border-top:1px solid rgba(201,162,74,0.30);}
.f-top{display:grid; grid-template-columns:1.25fr 1.15fr; gap:52px; padding-bottom:46px; border-bottom:1px solid rgba(242,239,230,0.12);}
.f-links{display:grid; grid-template-columns:1fr 1fr; gap:0 30px;}
.f-logo img{width:136px; margin-bottom:22px;}
.f-logo p{font-size:12.5px; line-height:2;}
.f-top h4{font-family:var(--eng); font-size:12.5px; font-style:italic; color:var(--gold-soft); letter-spacing:0.18em; margin-bottom:18px; font-weight:400;}
.f-top ul{list-style:none;}
.f-top li{margin-bottom:10px;}
.f-top a:hover{color:var(--gold-soft);}
.f-bot{display:flex; justify-content:space-between; padding-top:28px; font-family:var(--eng); font-size:12px; letter-spacing:0.1em; color:rgba(242,239,230,0.40);}

/* ---------- REVEAL ---------- */
.rv{opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.16,.84,.44,1), transform .9s cubic-bezier(.16,.84,.44,1);}
.rv.on{opacity:1; transform:none;}
.rvg > *{opacity:0; transform:translateY(22px); transition:opacity .75s cubic-bezier(.16,.84,.44,1), transform .75s cubic-bezier(.16,.84,.44,1);}
.rvg.on > *{opacity:1; transform:none;}
.rvg.on > *:nth-child(1){transition-delay:.04s;}
.rvg.on > *:nth-child(2){transition-delay:.10s;}
.rvg.on > *:nth-child(3){transition-delay:.16s;}
.rvg.on > *:nth-child(4){transition-delay:.22s;}
.rvg.on > *:nth-child(5){transition-delay:.28s;}
.rvg.on > *:nth-child(6){transition-delay:.34s;}
.rvg.on > *:nth-child(7){transition-delay:.40s;}
.rvg.on > *:nth-child(n+8){transition-delay:.46s;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1180px){
  .wrap, .wrap-n{padding:0 30px;}
  nav ul{gap:20px;}
  nav a{font-size:12px;}
  nav a .en{font-size:8.5px; letter-spacing:0.14em;}
  .nav-cta{padding:10px 16px; font-size:11px; letter-spacing:0.1em;}
  .brand .n{font-size:22px;}
  .brand img{width:32px;}
}
@media (max-width:1000px){
  .wrap, .wrap-n{padding:0 26px;}
  section{padding:86px 0;}
  .hero{min-height:clamp(520px, calc(100vh - 68px), 760px);}
  .hero-content{padding:48px 0;}
  .hero-copy-in{max-width:none;}
  .hero-grid{grid-template-columns:1fr; gap:34px;}
  .hero-emblem{order:-1;}
  .hero-emblem img{max-width:min(78vw,420px);}
  .hero-emb .hero-copy-in{max-width:none; text-align:center;}
  .hero-emb p.lead{margin-left:auto; margin-right:auto;}
  .hero-emb .cta-row{justify-content:center;}
  .hero.hero-emb{background:radial-gradient(ellipse 80% 44% at 50% 30%, rgba(236,214,176,0.55) 0%, rgba(36,27,18,0) 72%), linear-gradient(180deg,#241B12 0%,#1F170F 100%);}
  .hero-photo::after{background:linear-gradient(174deg, rgba(36,27,18,0.90) 0%, rgba(36,27,18,0.80) 34%, rgba(36,27,18,0.60) 60%, rgba(36,27,18,0.34) 100%);}
  .geo-tag{display:none;}
  .phead{padding:86px 0 74px;}
  .p-grid, .p-grid.cols2, .p-grid.cols3{grid-template-columns:1fr; gap:16px;}
  .g2, .g3{grid-template-columns:1fr; gap:16px;}
  .p-card{padding:34px 26px 86px;}
  .p-card .go{left:26px; bottom:32px;}
  .block{grid-template-columns:1fr; gap:34px;}
  .block.rev .b-photo{order:0;}
  .b-photo.tall img{aspect-ratio:4/5;}
  .veg-row{grid-template-columns:repeat(2,1fr);}
  .veg-row .veg-card:nth-child(5){display:none;}
  .veg-grid{grid-template-columns:repeat(2,1fr);}
  .prod-grid{grid-template-columns:repeat(2,1fr); gap:14px;}
  .loop-steps{grid-template-columns:1fr; gap:10px;}
  .loop-steps::before{display:none;}
  .loop-step{display:flex; align-items:center; gap:18px; text-align:left; padding:18px 20px;}
  .loop-step .circle{margin:0; flex-shrink:0; width:44px; height:44px; font-size:15px;}
  .loop-step .tx{flex:1;}
  .loop-step .t{margin-bottom:3px;}
  .stat-row{grid-template-columns:1fr; gap:14px;}
  .final{padding:104px 0 88px;}
  .final .bgvid{display:none;}
  .f-top{grid-template-columns:1fr; gap:32px;}
  .f-links{grid-template-columns:1fr 1fr; gap:0 20px;}
  .f-bot{flex-direction:column; gap:8px;}
  .form{padding:30px 22px;}
  .f2{grid-template-columns:1fr; gap:0;}
  .tbl th{width:38%;}

  /* backdrop-filter があると子の position:fixed がヘッダー内に閉じ込められるため解除 */
  header{background:var(--black); backdrop-filter:none; -webkit-backdrop-filter:none;}
  nav{
    position:fixed; inset:0; width:100%; max-width:none; height:100dvh;
    background:#1B140D; padding:96px 26px 40px; z-index:80;
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transform:translateY(-14px);
    transition:opacity .32s ease, transform .38s cubic-bezier(.5,0,.2,1), visibility .32s;
  }
  nav ul{flex-direction:column; align-items:stretch; gap:0; width:100%; max-width:340px;}
  nav li{border-bottom:1px solid rgba(242,239,230,0.14);}
  nav li:first-child{border-top:1px solid rgba(242,239,230,0.14);}
  nav a{color:var(--cream); font-size:17px; display:block; padding:17px 4px; border-bottom:none; text-align:center; letter-spacing:0.08em;}
  nav a .en{font-size:10px; letter-spacing:0.2em; margin-top:3px;}
  nav a:hover, nav a.active{color:var(--gold-soft); border-color:transparent;}
  nav li:last-child{border-bottom:none; margin-top:26px;}
  .nav-cta{width:100%; display:block; padding:17px 20px; font-size:15px; text-align:center;}
  .burger{display:flex; flex-direction:column; justify-content:center; gap:6px; width:42px; height:42px; cursor:pointer; z-index:90; position:relative;}
  .burger span{display:block; height:1.5px; background:var(--cream); transition:transform .35s ease, opacity .25s ease, background .25s ease;}
  .scrim{display:none;}
  #navToggle:checked ~ .hbar nav{opacity:1; visibility:visible; transform:translateY(0);}
  body:has(#navToggle:checked){overflow:hidden;}
  #navToggle:checked ~ .hbar .burger span{background:var(--cream);}
  #navToggle:checked ~ .hbar .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
  #navToggle:checked ~ .hbar .burger span:nth-child(2){opacity:0;}
  #navToggle:checked ~ .hbar .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
}
@media (max-width:600px){
  .wrap, .wrap-n{padding:0 20px;}
  section{padding:66px 0;}
  .phead{padding:66px 0 58px;}
  .phead h1{font-size:28px;}
  .phead p{font-size:14px;}
  .crumb{margin-bottom:16px;}
  .hero{min-height:clamp(460px, calc(100vh - 62px), 620px);}
  .hero.hero-emb{min-height:0;}
  .hero-emblem img{max-width:min(74vw,320px);}
  .hero h1{font-size:31px; line-height:1.45;}
  .hero p.lead{font-size:14.5px;}
  .btn{padding:15px 24px; font-size:13px; width:100%;}
  .cta-row{flex-direction:column;}
  .statement{padding:72px 0;}
  .statement p{font-size:18px; line-height:1.95;}
  .eyebrow{font-size:11.5px; letter-spacing:0.2em;}
  .eyebrow::before{display:none!important;}
  .sec-head{margin-bottom:40px;}
  .veg-grid, .veg-row{grid-template-columns:1fr 1fr;}
  .veg-card .b{padding:13px 12px 16px;}
  .veg-card .nm{font-size:14px;}
  .veg-card .ht{font-size:11px;}
  .prod-grid{grid-template-columns:1fr;}
  .final{padding:88px 0 72px;}
  .final h2{font-size:27px;}
  .final p{font-size:14px;}
  .final p br{display:none;}
  .tbl th, .tbl td{display:block; width:100%;}
  .tbl th{border-bottom:none; padding-bottom:0;}
  .quote{padding-left:18px; font-size:15.5px;}
  .origin{padding:28px 22px;}
  .soon .sb{font-size:10.5px;}
  .video-note{gap:12px; padding:14px 16px;}
  .vid .pbtn{width:60px; height:60px; font-size:18px;}
  .vid .ptxt{font-size:13.5px;}
}
@media (max-width:430px){
  .wrap, .wrap-n{padding:0 16px;}
  .brand .n{font-size:21px;}
  .brand .s{font-size:8px; letter-spacing:0.14em;}
  .brand img{width:30px;}
  .hero h1{font-size:27px;}
  .phead h1{font-size:25px;}
  .statement p{font-size:17px;}
  .veg-grid, .veg-row{grid-template-columns:1fr;}
  .veg-row .veg-card:nth-child(n+4){display:none;}
  .stat-row.cols2{grid-template-columns:1fr; gap:12px;}
  .sec-head h2, .b-text h2{font-size:24px;}
  .p-card h3{font-size:20px;}
}
@media (prefers-reduced-motion: reduce){
  .rv, .rvg > *{opacity:1!important; transform:none!important; transition:none!important;}
  html{scroll-behavior:auto;}
}


/* ==========================================================
   B案テーマ：クラフト紙 × 墨 × 煉瓦色（2026-10）
   ロゴ（クラフト紙に墨一色の版画調）に合わせた配色。
   紙の面 … クラフト(#C9A478) / 生成りの紙(#F1E6D0) / 淡いクラフト(#E2CFAA)
   暗い面 … エスプレッソ茶(#241B12)＝ページヘッダー・締めCTA・フッター／オリーブ(#3A3F26)
   差し色 … 煉瓦色(#7E2A1A)
   ========================================================== */
:root{
  --kraft:#C9A478; --kraft-2:#D6B88F; --kraft-3:#BC9567;
  --sumi:#211910; --brick:#7E2A1A; --olive:#3A3F26; --espresso:#241B12;
  --paper:#F1E6D0; --cream:#F3E8D2;
  --soil:#8A6A3C; --soil-2:#E2C79A; --soil-deep:#5B4424; --soil-tint:#E2CFAA;
  --green:#4E5A2E; --green-a:#9AA36A; --green-deep:#3A3F26; --green-panel:#33381F;
  --gold-deep:#7E2A1A;
  --black:var(--kraft);
  --surface:var(--kraft); --surface-2:var(--kraft-2);
  --ink:var(--sumi);
  --muted:rgba(33,25,16,0.78); --muted-2:rgba(33,25,16,0.56);
  --accent:var(--brick); --accent-fg:#F3E8D2;
  --line:rgba(33,25,16,0.30); --line-2:rgba(33,25,16,0.55);
  --hair:rgba(33,25,16,0.16);
  --shadow:0 22px 40px rgba(60,40,15,0.28);
  --theme:var(--soil-2);
}
body.t-white, .t-white{--theme:#F3E8D2;}
body.t-soil, .t-soil{--theme:#E2C79A;}
body.t-green, .t-green{--theme:#9AA36A;}
.sec-dark, .sec-veg{--surface:var(--kraft); --surface-2:var(--kraft-2);}
.sec-light{
  --surface:var(--paper); --surface-2:#FAF3E3;
  --ink:var(--sumi); --muted:rgba(33,25,16,0.74); --muted-2:rgba(33,25,16,0.52);
  --accent:var(--brick); --accent-fg:#F3E8D2;
  --line:rgba(33,25,16,0.26); --line-2:rgba(33,25,16,0.50); --hair:rgba(33,25,16,0.13);
  --shadow:0 20px 38px rgba(60,40,15,0.18);
}
.sec-soil{
  --surface:var(--soil-tint); --surface-2:#EDDFC2;
  --ink:var(--sumi); --muted:rgba(33,25,16,0.76); --muted-2:rgba(33,25,16,0.54);
  --accent:var(--soil-deep); --accent-fg:#F3E8D2;
  --line:rgba(91,68,36,0.36); --line-2:rgba(91,68,36,0.60); --hair:rgba(33,25,16,0.14);
  --shadow:0 20px 38px rgba(60,40,15,0.20);
}
.sec-green{
  --surface:var(--green-panel); --surface-2:#3F4528;
  --ink:#F3E8D2; --muted:rgba(243,232,210,0.80); --muted-2:rgba(243,232,210,0.55);
  --accent:#E4CA9C; --accent-fg:#241B12;
  --line:rgba(228,202,156,0.32); --line-2:rgba(228,202,156,0.55); --hair:rgba(243,232,210,0.15);
  --shadow:0 24px 44px rgba(0,0,0,0.38);
}
.sec-soil{border-color:rgba(33,25,16,0.22);}
.sec-green{border-color:rgba(33,25,16,0.4);}

::selection{background:var(--brick); color:#F3E8D2;}
body{color:var(--sumi);}
.btn, .nav-cta, .p-card, .form, .tbl{border-radius:0;}

/* HEADER（クラフト） */
header{background:rgba(201,164,120,0.94); color:var(--sumi); border-bottom:3px double rgba(33,25,16,0.75);}
.brand img{width:auto; height:46px;}
.brand .n{color:var(--sumi); font-style:normal; font-weight:600; letter-spacing:0.04em;}
.brand .s{color:var(--sumi); opacity:0.75;}
nav a{color:rgba(33,25,16,0.86);}
nav a .en{color:rgba(33,25,16,0.52);}
nav a:hover, nav a.active{color:var(--brick); border-color:var(--brick);}
nav a:hover .en, nav a.active .en{color:var(--brick);}
.nav-cta{border:1px solid var(--sumi); color:var(--sumi)!important;}
.nav-cta:hover{background:var(--sumi); color:#F3E8D2!important; border-color:var(--sumi)!important;}

/* HERO（クラフト紙にロゴを刷る） */
.hero{color:var(--sumi);}
.hero.hero-emb{background:radial-gradient(ellipse 50% 64% at 73% 50%, rgba(232,208,168,0.55) 0%, rgba(201,164,120,0) 72%), linear-gradient(180deg, #CBA77B 0%, #C29C6E 100%);}
.hero h1{color:var(--sumi); text-shadow:none;}
.hero h1 em{color:var(--brick);}
.hero p.lead{color:rgba(33,25,16,0.84);}
.hero-emblem img{filter:none; max-width:620px;}
.geo-tag{color:var(--sumi); border-right-color:var(--sumi);}

/* STATEMENT */
.statement{background:var(--kraft-2); color:var(--sumi); border-top:3px double rgba(33,25,16,0.7); border-bottom:3px double rgba(33,25,16,0.7);}
.statement .eyebrow{color:var(--brick);}
.statement p{color:var(--sumi);}
.statement .attribution{border-top-color:rgba(33,25,16,0.35); color:rgba(33,25,16,0.6);}

/* 見出しの下に二重罫 */
.sec-head h2::after{content:''; display:block; width:56px; height:5px; margin:20px auto 0; border-top:1px solid currentColor; border-bottom:1px solid currentColor; opacity:0.55;}
.sec-head.left h2::after{margin-left:0;}

/* 暗い面（写真の上に茶を重ねる）：ページヘッダー・締めCTA */
.phead, .final{background:var(--espresso); color:var(--cream);}
.phead::before, .final::before, .final .bgvid{filter:sepia(0.45) saturate(0.85);}
.phead{border-bottom:3px double var(--theme);}
.phead h1 em, .phead .eyebrow{color:var(--gold-soft);}
.phead .eyebrow::before{background:var(--gold-soft);}

/* 3つの約束 */
.p-grid.promise .p-1{background:#FAF3E3; border-color:rgba(33,25,16,0.30); color:var(--sumi);}
.p-grid.promise .p-1 h3{color:var(--sumi);}
.p-grid.promise .p-1 p{color:rgba(33,25,16,0.74);}
.p-grid.promise .p-1 .num{border-bottom-color:rgba(33,25,16,0.14);}
.p-grid.promise .p-2{background:var(--kraft); border-color:rgba(33,25,16,0.34); color:var(--sumi);}
.p-grid.promise .p-2 h3{color:var(--sumi);}
.p-grid.promise .p-2 p{color:rgba(33,25,16,0.78);}
.p-grid.promise .p-2 .num, .p-grid.promise .p-2 .go{color:var(--sumi);}
.p-grid.promise .p-3{border-color:rgba(33,25,16,0.5);}
.p-1::before{background:var(--brick); opacity:0.8;}

/* 写真は紙焼きのように縁を付ける */
.b-photo{background:#F6EDDA; padding:9px; border:1px solid rgba(33,25,16,0.35);}

/* FOOTER */
footer{border-top:3px double rgba(228,202,156,0.55);}
.f-logo img{width:210px;}

/* クラフト紙の質感：ロゴ画像の地（無地部分）から取り出した実物の紙目を、紙の面に敷く */
:root{--tex:url('assets/img/kraft-grain.png'); --paper:#EBDDC2;}
/* 紙目はグレーの画像1枚をソフトライトで地色に重ねる。どの色の面でも同じ紙の質感になる（元画像のロゴ表示サイズに合わせた細かさ・強さ） */
body, section, header, .statement, footer{background-image:var(--tex); background-size:512px 512px; background-blend-mode:soft-light;}
.hero.hero-emb{background:var(--tex) 0 0/512px 512px, #C9A478; background-blend-mode:soft-light;}
.phead, .final{background-image:none;}
.sec-light{--surface-2:#F5ECD9;}
.p-grid.promise .p-1{background-color:#F5ECD9;}

/* メニューを読みやすく */
header{background-color:#AE895C;}
nav a{color:var(--sumi); font-weight:500; font-size:13.5px;}
nav a .en{color:rgba(33,25,16,0.80); font-weight:400;}
.nav-cta{background:var(--sumi); color:#F3E8D2!important; border-color:var(--sumi); font-weight:500;}
.nav-cta:hover{background:var(--brick); border-color:var(--brick)!important; color:#F3E8D2!important;}

@media (max-width:1000px){
  header{background:var(--kraft);}
  .brand img{height:38px;}
  nav{background:#D6B88F;}
  nav li, nav li:first-child{border-color:rgba(33,25,16,0.22);}
  nav a{color:var(--sumi);}
  nav a:hover, nav a.active{color:var(--brick);}
  .burger span, #navToggle:checked ~ .hbar .burger span{background:var(--sumi);}
  header{background-color:#AE895C;}
  nav{background-color:#E6D5B4; background-image:var(--tex); background-size:512px 512px;}
  nav a{font-size:17px; font-weight:500;}
  nav li .nav-cta{color:#F3E8D2!important;}
}

/* 濃茶ヘッダー＋生成りの文字（2026-10・中井さん指示）。この塊を消せばクラフト色のヘッダーに戻る（その場合 HTML の mark-kraft.png → mark-ink.png も戻す） */
header{background-color:#2A1F15; color:#F3E8D2; border-bottom:3px double rgba(228,202,156,0.60);}
.brand .n, .brand .s{color:#F3E8D2;}
.brand .s{opacity:0.78;}
nav a{color:#F3E8D2;}
nav a .en{color:rgba(243,232,210,0.66);}
nav a:hover, nav a.active{color:#E4CA9C; border-color:#E4CA9C;}
nav a:hover .en, nav a.active .en{color:#E4CA9C;}
.nav-cta{background:#F3E8D2; color:#211910!important; border-color:#F3E8D2;}
.nav-cta:hover{background:#E4CA9C; border-color:#E4CA9C!important; color:#211910!important;}
@media (max-width:1000px){
  header{background-color:#2A1F15;}
  nav{background-color:#2A1F15; background-image:var(--tex); background-size:512px 512px; background-blend-mode:soft-light;}
  nav li, nav li:first-child{border-color:rgba(243,232,210,0.18);}
  nav a{color:#F3E8D2;}
  nav a:hover, nav a.active{color:#E4CA9C;}
  nav li .nav-cta{color:#211910!important;}
  .burger span, #navToggle:checked ~ .hbar .burger span{background:#F3E8D2;}
}

/* ==========================================================
   基本3色に整理（2026-10-06・中井さん指示）
   面の色は クラフト #C9A478 ／ 生成り #EBDDC2 ／ オリーブ #33381F の3色だけ。
   ヘッダーとフッターだけは別枠で濃茶。差し色の煉瓦色は廃止（強調はオリーブ）。
   ========================================================== */
:root{
  --brick:#3A3F26; --gold-deep:#3A3F26; --soil-deep:#3A3F26;
  --kraft-2:#EBDDC2; --soil-tint:#C9A478;
  --surface-2:#EBDDC2; --accent:#3A3F26;
}
.sec-dark, .sec-veg{--surface:var(--kraft); --surface-2:#EBDDC2;}
.sec-light{--accent:#3A3F26;}
/* 旧・淡いクラフトの面 → クラフトに統一 */
.sec-soil{
  --surface:var(--kraft); --surface-2:#EBDDC2; --accent:#3A3F26;
  --line:rgba(33,25,16,0.30); --line-2:rgba(33,25,16,0.55);
}
::selection{background:#3A3F26; color:#F3E8D2;}
.fld .req{color:#3A3F26;}
.p-1::before{background:#3A3F26;}

/* トップの見出し「一皿の記憶」だけは基本3色の対象外（中井さん指示）。活版の朱赤 */
.hero h1 em{color:#9C2F1C; text-shadow:none;}
/* HEROのボタンも同じ朱赤（HEROだけの特別色。他のボタンはオリーブのまま） */
.hero .btn-p{background:#9C2F1C; color:#F3E8D2;}
.hero .btn-g{border-color:#9C2F1C; color:#9C2F1C;}
.hero .btn-g:hover{background:#9C2F1C; border-color:#9C2F1C; color:#F3E8D2;}
.btn-p:hover{filter:brightness(1.18);}

/* ステートメント帯 → オリーブ */
.statement{background-color:#33381F; color:#F3E8D2; border-top:3px double rgba(228,202,156,0.55); border-bottom:3px double rgba(228,202,156,0.55);}
.statement .eyebrow{color:#E4CA9C;}
.statement p{color:#F3E8D2;}
.statement .attribution{border-top-color:rgba(243,232,210,0.30); color:rgba(243,232,210,0.60);}

/* 3つの約束 ②はクラフト、枠と文字は墨 */
.p-grid.promise .p-2{background-color:var(--kraft);}

/* 写真に重ねる暗い面（ページヘッダー・締めCTA）は濃茶 → オリーブ */
.phead, .final{background-color:#262A16;}
.phead::after{background:linear-gradient(180deg, rgba(38,42,22,0.46), rgba(38,42,22,0.90));}
.final::after{background:linear-gradient(180deg, rgba(38,42,22,0.72), rgba(38,42,22,0.94));}
.final .soon-note{background:rgba(38,42,22,0.5);}
.phead::before, .final::before, .final .bgvid{filter:saturate(0.85);}
.btn-cream{color:#262A16;}

/* 3色から外れていた残りを整理（2026-10-06 下層ページ点検） */
:root{--soil:#3A3F26;}                                   /* 旧・黄土色の文字（お問い合わせの注記、.p-2 の罫）→ オリーブ */
.veg-card .no{background:#33381F; color:#F3E8D2; border-color:rgba(243,232,210,0.45);}   /* 野菜図鑑の番号札：濃茶＋金の縁 → オリーブ＋生成り */
.origin{border-color:rgba(33,25,16,0.30); color:var(--sumi);}
.origin h3{color:var(--sumi);}
.origin p{color:rgba(33,25,16,0.78);}

/* 野菜図鑑：行の端数を埋める空きマス（格子の罫が塗りつぶしに見えないように）。2026-10-06 */
.veg-card.veg-fill{pointer-events:none;}
.veg-card.veg-fill:hover{transform:none; box-shadow:none;}
@media (max-width:1000px){ .veg-card.veg-fill.w4{display:none;} }
@media (max-width:430px){ .veg-card.veg-fill{display:none;} }

/* 野菜カードの説明文を読みやすく（文字色を濃く）。2026-10-06 */
.veg-card .ht{color:rgba(33,25,16,0.92);}

/* ヘッダーをA案の作りに揃える（2026-10-06・中井さん指示）。色は濃茶＋生成りのまま。
   マークはA案と同じ mark-cream.png、社名は欧文イタリック、お問い合わせは線だけの枠、下線は細い1本。 */
header{border-bottom:1px solid rgba(228,202,156,0.40);}
.brand img{width:36px; height:auto;}
.brand .n{font-style:italic; font-weight:400; letter-spacing:0.06em;}
.brand .s{color:#E4CA9C; opacity:0.85;}
nav a{font-weight:400; font-size:13px; color:rgba(243,232,210,0.86);}
nav a .en{color:rgba(243,232,210,0.45);}
.nav-cta{background:transparent; border:1px solid #B9925A; color:#E4CA9C!important; font-weight:400;}
.nav-cta:hover{background:#B9925A; border-color:#B9925A!important; color:#241B12!important;}
@media (max-width:1180px){ .brand img{width:32px; height:auto;} }
@media (max-width:1000px){
  .brand img{width:32px; height:auto;}
  nav a{font-size:17px; color:#F3E8D2;}
  nav li .nav-cta{color:#E4CA9C!important;}
}
@media (max-width:600px){ .brand img{width:30px; height:auto;} }

/* ヘッダーの社名はロゴ（エンブレム）の「Agri-gio」の文字をそのまま画像で使う。2026-10-06 */
.brand .n{display:block; line-height:0;}
.brand img.wm{width:auto; height:25px; display:block;}
@media (max-width:1180px){ .brand img.wm{width:auto; height:22px;} }
@media (max-width:1000px){ .brand img.wm{width:auto; height:22px;} }
@media (max-width:600px){ .brand img.wm{width:auto; height:21px;} }

/* ページ上部の写真（.phead）は茶系に戻す（緑がかって見えるとの指摘）。2026-10-06。締めCTA（.final）はオリーブのまま */
.phead{background-color:#241B12;}
.phead::after{background:linear-gradient(180deg, rgba(36,27,18,0.42), rgba(36,27,18,0.90));}
.phead::before{filter:sepia(0.45) saturate(0.85);}

/* ヘッダーのSNSアイコン（Instagram／LINE）。2026-10-06。公式ロゴではなく汎用の線画アイコン */
nav li.sns{display:flex; align-items:center; gap:14px;}
nav li.sns a{display:flex; padding:0; border:0; line-height:0; opacity:0.85; transition:opacity .2s;}
nav li.sns a:hover{opacity:1; border:0;}
nav li.sns svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
@media (max-width:1180px){ nav li.sns{gap:10px;} nav li.sns svg{width:20px; height:20px;} }
@media (max-width:1000px){
  nav li.sns{justify-content:center; gap:34px; padding:20px 0;}
  nav li.sns a{padding:0;}
  nav li.sns svg{width:28px; height:28px;}
}

/* SNSアイコンを公式素材に差し替え（2026-10-06）。Instagram: IG_brand_asset_pack_2023 の White Glyph（SVG・無加工）、LINE: LINE_Brand_icon.png（縮小のみ・色は変えない）。
   各社ガイドラインの最小サイズ（Instagram 29px／LINE PC20px超・モバイル40px超）と余白を守ること */
nav li.sns{gap:20px; padding:0 4px;}
nav li.sns a{opacity:1;}
nav li.sns a:hover{opacity:0.82;}
.brand img, nav li.sns img{flex-shrink:0;}
nav li.sns img{display:block; width:30px; height:30px;}
@media (max-width:1180px){ nav li.sns{gap:16px;} nav li.sns img{width:29px; height:29px;} }
@media (max-width:1000px){ nav li.sns{gap:40px; padding:22px 0;} nav li.sns img{width:44px; height:44px;} }

/* メンバー紹介：得意分野（2026-10-13・先方資料「THE GROWERS」より） */
.prod-card .ro{margin-bottom:12px;}
.prod-card .sp{font-family:var(--serif); font-size:13px; font-weight:600; color:var(--ink); line-height:1.6; padding-bottom:11px; margin-bottom:11px; border-bottom:1px solid var(--hair);}
.prod-card .tx{color:var(--ink); opacity:0.82;}

/* ===== 2026-10-15 先方修正（足立さんメール） ===== */
/* 1. 説明文を少し太く・濃く */
body{font-weight:400;}
:root{--muted:rgba(33,25,16,0.88); --muted-2:rgba(33,25,16,0.66);}
.sec-light{--muted:rgba(33,25,16,0.86); --muted-2:rgba(33,25,16,0.64);}
.sec-soil{--muted:rgba(33,25,16,0.86); --muted-2:rgba(33,25,16,0.64);}
.sec-green{--muted:rgba(243,232,210,0.90); --muted-2:rgba(243,232,210,0.68);}
.phead p{color:rgba(242,239,230,0.90);}

/* 2. 先方修正案で追加されたブロック（3項目の並び）。見出しは既存の .sec-head を使用 */
.cycle-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:8px;}
.cycle-item{background:var(--surface-2); border:1px solid var(--hair); border-top:3px double var(--line-2); padding:30px 28px 34px;}
.cycle-item .no{display:block; font-family:var(--eng); font-style:italic; font-size:13px; letter-spacing:0.1em; color:var(--accent); margin-bottom:14px;}
.cycle-item h3{font-size:20px; line-height:1.6; color:var(--ink); margin-bottom:12px;}
.cycle-item p{font-size:13.5px; line-height:2; color:var(--muted);}
.cycle-note{font-size:12.5px; color:var(--muted); text-align:center; margin:30px 0 6px;}
@media (max-width:1000px){ .cycle-grid{grid-template-columns:1fr; gap:16px;} }

/* 3. お問い合わせ：フォームの代わりに LINE・メールの案内 */
.contact-actions{text-align:center; background:var(--surface-2); border:1px solid var(--hair); padding:46px 28px 50px;}
.contact-actions h2{font-size:clamp(22px,2.6vw,30px); margin-bottom:12px;}
.contact-actions p{font-size:14.5px; color:var(--muted); margin-bottom:26px;}
.contact-actions .cta-row{justify-content:center;}

/* お問い合わせ：公式LINE（シェフ用）のQR（2026-10-20） */
.line-qr{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:30px; padding-top:26px; border-top:1px solid var(--hair);}
.line-qr img{width:150px; height:150px; background:#fff; padding:8px; border:1px solid var(--hair);}
.line-qr span{font-size:13px; line-height:1.9; color:var(--muted); text-align:left;}
@media (max-width:600px){ .line-qr{flex-direction:column; gap:10px;} .line-qr span{text-align:center;} }