/* ==========================================================
   玄米のマイセン Meta広告LP 見せ方 案C「通販の説明型」（2026-11-03）
   中身は v6 と同じ。見せ方だけを変える:
   斜めに切った濃い緑の見出し札／番号つきの帯と矢印／太い枠の価格箱と表／
   写真は大きく四角く。丸い白カードと小さな丸札はやめる
   色は v6 の色だけ（地の緑灰・茶・セージ・金）。セージの濃い側をはっきり使う
   JS（lp_v4.js）が触る名前: .hero .btn [data-slot] [data-blocks] [data-block] .sticky
   ========================================================== */
:root {
  --bg: #e9ecdf;
  --paper: #f2f3eb;
  --ink: #54452e;
  --brown: #7a6144;
  --brown-l: #a08a6c;
  --muted: #8d8574;
  --sage: #658e70;
  --sage-d: #4c7058;
  --sage-dd: #3f604a;
  --sage-l: #e2eadf;
  --gold-1: #f6ecd0;
  --gold-2: #dfc98f;
  --gold-3: #c19c52;
  --gold-4: #a8853d;
  --cream: #f6f1e2;
  --line: #d3d6c6;
  --serif: "Shippori Mincho", "Yu Mincho", "游明朝", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --col: 600px;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .38  0 0 0 0 .26  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --wave-cream: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'><path d='M0 40 L0 22 C90 4 200 2 290 12 C340 18 375 16 400 8 L400 40Z' fill='%23f6f1e2'/></svg>");
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background: #e2e5d8;
  font-family: var(--serif); font-size: 14.5px; line-height: 1.9; letter-spacing: .03em; font-weight: 400;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brown); }
p, h1, h2, h3, dl, dd, ul, ol, figure { margin: 0; }
h1, h2, h3 { font-weight: 600; }
ul, ol { list-style: none; padding: 0; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.ac { color: var(--sage-d); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-family: var(--sans); font-size: 11.5px; line-height: 1.75; color: var(--muted); letter-spacing: .02em; }

.sheet { max-width: var(--col); margin: 0 auto; padding-bottom: 76px; background: var(--bg) var(--grain); box-shadow: 0 0 30px rgba(60,50,30,.08); overflow: hidden; }

/* ヘッダー */
.head { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 14px 0 16px; background: #fff; }
.head .brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.head .brand img { width: 28px; opacity: .9; }
.head .brand span { font-size: 13px; letter-spacing: .2em; }
.head .fact { font-family: var(--sans); font-size: 10px; letter-spacing: .04em; color: var(--brown); white-space: nowrap; }

/* ===== 見出し札（斜めに切った濃い緑） =====
   位置と大きさはモック（幅390pxの画面）の座標から */
.sec-k { display: inline-block; background: #476d4f; color: #fff; font-family: var(--serif); font-size: 14px; letter-spacing: .14em; line-height: 26px; padding: 0 26px 0 22px; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.sec-head { position: relative; z-index: 2; padding: 0 14px; }
.sec-t { font-size: 21px; letter-spacing: .04em; line-height: 33px; margin-top: 10px; }
.sec-t::after { content: ""; display: block; width: 50px; height: 2px; margin-top: 8px; background: linear-gradient(90deg, var(--gold-3), var(--gold-2)); }
.lead { font-size: 10px; line-height: 12.5px; letter-spacing: .02em; color: var(--ink); margin-top: 8px; }
.sub-t { font-size: 15px; letter-spacing: .08em; line-height: 22px; text-align: center; }
.sub-t.tab { display: inline-block; text-align: left; color: #fff; background: #476d4f; font-size: 14px; line-height: 20px; padding: 0 30px 0 22px; clip-path: polygon(10px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); margin-left: 14px; }
.sub-t.tab.brown { background: linear-gradient(90deg, #6b5236, #664f34); }
.section { position: relative; padding: 0; overflow: hidden; }
.corner { position: absolute; right: 0; top: 0; width: 52%; height: 140px; object-fit: cover; z-index: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 35%), linear-gradient(180deg, #000 70%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 35%), linear-gradient(180deg, #000 70%, transparent 100%); mask-composite: intersect; }
.ear { position: absolute; width: 60px; height: 200px; color: var(--gold-2); opacity: .45; pointer-events: none; }

/* ===== ファーストビュー ===== */
.hero { position: relative; background: #fffcf3; }
.hero-img { position: relative; height: 208px; overflow: hidden; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 74%; }
.badge { position: absolute; left: 19px; top: 12px; width: 94px; height: 94px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #5e4626; line-height: 1.2; background: radial-gradient(circle at 32% 26%, #fbf3dc 0%, var(--gold-2) 46%, var(--gold-3) 82%, #e6d4a4 100%); box-shadow: 0 3px 10px rgba(80,60,20,.25), inset 0 0 0 2px rgba(255,255,255,.35); }
.badge b { font-size: 26px; font-weight: 600; line-height: 1.1; }
.badge span { font-size: 11px; letter-spacing: .06em; margin-top: 2px; }
.hero-text { position: relative; z-index: 3; margin-top: -38px; padding: 0 14px 12px 28px; text-align: left; }
.hero .kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .06em; color: var(--ink); line-height: 16px; margin-left: -2px; }
.hero .kicker::before, .hero .kicker::after { content: ""; width: 12px; height: 1px; background: currentColor; transform: rotate(55deg); }
.hero .kicker::after { transform: rotate(-55deg); }
.hero h1 { font-size: 29px; line-height: 34px; letter-spacing: .08em; margin-top: 4px; color: var(--ink); white-space: nowrap; }
.hero h1 .ac { display: inline-block; margin-left: 90px; }
.hero .sub { font-size: 11.5px; line-height: 18px; letter-spacing: .04em; color: var(--ink); margin: 6px 0 0 -14px; text-align: center; white-space: nowrap; }
.band { position: relative; padding: 4px 25px 14px; text-align: center; color: #fff; background: #466d4e var(--grain); }
.band .k { display: inline-block; background: #f6f1e2; color: #476d4f; font-size: 14.5px; letter-spacing: .12em; padding: 0 30px; line-height: 23px; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.band .name { font-size: 15.5px; letter-spacing: .06em; margin-top: 4px; line-height: 22px; }
.pricebox { margin: 6px auto 0; max-width: 340px; border: 1.5px solid #f2ebdc; padding: 2px 12px 4px; }
.pricebox .price { display: flex; justify-content: center; align-items: flex-start; gap: 3px; padding-bottom: 2px; border-bottom: 1px solid rgba(242,235,220,.8); margin: 0 12px; }
.pricebox .val { font-size: 41px; line-height: 44px; letter-spacing: 0; font-weight: 600; }
.pricebox .val small { font-size: 18px; margin-left: 2px; }
.pricebox .tax { writing-mode: vertical-rl; font-size: 9.5px; letter-spacing: .08em; margin-top: 4px; }
.pricebox .p2 { font-size: 12px; letter-spacing: .06em; margin-top: 3px; line-height: 18px; }

/* ボタン（両端を尖らせた札） */
.btn { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 11px auto 0; width: 100%; max-width: 340px; height: 40px; padding: 0 30px; background: #f6f1e2; color: #476d4f; text-decoration: none; font-size: 16px; letter-spacing: .1em; font-weight: 600; clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%); }
.btn svg { width: 20px; height: 13px; flex: none; }
.btn:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 3px; }
.btn-note { margin-top: 6px; font-family: var(--sans); font-size: 10.5px; letter-spacing: .04em; line-height: 15px; }

/* ===== P: お悩み ===== */
.problem { background: linear-gradient(180deg, #f0eee4, #e7eadc); padding: 10px 0 40px; }
.problem .corner { width: 50%; height: 145px; }
.problem .sec-head { padding: 0 10px; }
.problem .sec-k { padding-left: 24px; padding-right: 34px; }
.problem .sec-t { font-size: 21px; letter-spacing: .02em; line-height: 33px; margin-top: 12px; white-space: nowrap; }
.problem .sec-t .ac { color: #476d4f; }
.worries { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 8px; padding: 10px 7px 0 5px; }
.worries li { background: rgba(255,255,255,.75); border-radius: 6px; box-shadow: 0 2px 6px rgba(60,50,30,.06); }
.worries .hd { display: flex; align-items: center; gap: 7px; background: #436849; color: #fff; font-size: 14px; letter-spacing: .02em; line-height: 22px; padding: 0 22px 0 6px; margin: 0 12px 0 -2px; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); white-space: nowrap; width: fit-content; min-width: 70%; }
.worries .n { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #436849; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.worries .bd { display: grid; grid-template-columns: 110px 1fr; gap: 8px; align-items: center; padding: 8px 4px 6px 4px; }
.worries img { width: 110px; height: 104px; object-fit: cover; border-radius: 4px; }
.worries li:nth-child(1) img { object-position: 50% 72%; }
.worries li:nth-child(2) img { object-position: 40% 45%; }
.worries .bd p { font-size: 13.5px; line-height: 19px; letter-spacing: .02em; position: relative; padding-top: 12px; }
.worries li:nth-child(3) .bd p { font-size: 12.5px; letter-spacing: 0; white-space: nowrap; }
.worries .bd p::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 2px; background: var(--gold-3); }
.worries .bd b { color: inherit; font-weight: inherit; }
.problem .closing { position: relative; z-index: 2; margin: 16px 4px 0; padding: 10px 18px 8px; background: #436849; color: #fff; text-align: center; font-size: 13.5px; letter-spacing: .02em; line-height: 20px; clip-path: polygon(0 0, 100% 4px, calc(100% - 6px) 100%, 6px calc(100% - 3px)); }
.problem .closing::after { content: ""; display: block; height: 1px; background: rgba(255,255,255,.7); margin: 6px 4px 0; }

/* ===== A: わかります ===== */
.affinity .ph { position: relative; height: 181px; overflow: hidden; }
.affinity .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.affinity .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(95deg, rgba(240,238,228,.97) 0%, rgba(240,238,228,.9) 38%, rgba(240,238,228,.3) 58%, rgba(240,238,228,0) 72%); }
.affinity .sec-t { position: relative; z-index: 2; margin: 22px 0 0 25px; padding-left: 14px; border-left: 4px solid #a3b192; font-size: 20px; line-height: 23px; letter-spacing: .06em; font-weight: 700; }
.affinity .sec-t .big { display: block; font-size: 28px; line-height: 31px; margin-top: 6px; }
.affinity .sec-t .ac { font-size: inherit; color: #436849; }
.affinity .sec-t::after { display: none; }
.letter .l1 { display: grid; grid-template-columns: 156px 1fr; gap: 14px; align-items: start; padding: 8px 12px 8px 21px; background: #f6f3ea; }
.letter .l1 img { width: 156px; height: 103px; object-fit: cover; border-radius: 4px; }
.letter p { font-size: 9.6px; line-height: 15.2px; letter-spacing: .06em; white-space: nowrap; }
.letter .l2 { position: relative; overflow: hidden; background: #3d4e3c linear-gradient(90deg, #3f5a43, #4a6a4d); color: #fff; padding: 10px 20px 4px 33px; }
.letter .l2 p { position: relative; z-index: 2; font-size: 10.6px; line-height: 15.8px; letter-spacing: .03em; white-space: nowrap; }
.letter .sig { display: table; margin: 0 -12px 0 auto; background: #f6f1e2; color: var(--ink); font-size: 10.5px !important; padding: 0 20px; line-height: 19px !important; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.letter .ear { right: -6px; top: -20px; transform: rotate(18deg); opacity: .35; }
.proof-strip { display: block; text-align: center; padding: 8px 6px 8px; border-bottom: 1px solid #cdc7b4; margin: 0 12px; }
.proof-strip .l { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 13px; letter-spacing: .1em; line-height: 18px; }
.proof-strip .l::before, .proof-strip .l::after { content: ""; flex: 1; max-width: 105px; height: 1px; background: var(--brown-l); }
.proof-strip .n { display: block; font-size: 36px; font-weight: 700; letter-spacing: .02em; line-height: 36px; margin: 2px 0; color: var(--gold-4); }
.proof-strip .n small { font-size: 15px; margin-left: 6px; font-weight: 600; }
.proof-strip .s { display: block; font-family: var(--sans); font-size: 10.5px; color: var(--ink); letter-spacing: 0; line-height: 1.6; text-align: left; white-space: normal; margin: 6px 4px 0; }
.feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; margin: 10px 12px 14px; }
.feat li { padding: 0 8px; }
.feat li + li { border-left: 1px solid #cdc7b4; }
.feat svg { width: 32px; height: 32px; stroke: #436849; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin: 0 auto 2px; display: block; }
.feat b { display: block; font-size: 13.5px; letter-spacing: .06em; font-weight: 700; line-height: 20px; }
.feat span { display: block; font-family: var(--sans); font-size: 10px; letter-spacing: 0; line-height: 13px; color: var(--ink); margin-top: 2px; text-align: left; }

/* ===== S: 解決策 ===== */
.solution { padding-top: 4px; background: linear-gradient(180deg, #f0eee4, #e9ecdf); }
.solution .corner { height: 132px; width: 52%; object-position: 50% 62%; }
.solution .sec-head { padding: 0 10px; }
.solution .sec-k { padding-right: 30px; }
.solution .sec-t { font-size: 22px; line-height: 26px; margin-top: 6px; padding-left: 10px; }
.solution .sec-t .ac { font-size: inherit; color: #436849; }
.solution .sec-t::after { width: 150px; height: 2px; margin-top: 4px; }
.solution .lead { padding-left: 8px; margin-top: 6px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 9px; position: relative; z-index: 2; padding: 0 8px; }
.steps li { position: relative; text-align: center; padding: 0 8px; }
.steps li + li .pic::before { content: ""; position: absolute; left: -15px; top: 50%; width: 7px; height: 7px; border-top: 1.5px solid var(--gold-3); border-right: 1.5px solid var(--gold-3); transform: translateY(-50%) rotate(45deg); }
.steps .chev { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 -12px 4px; height: 25px; padding: 0 12px 0 18px; background: #476d4f; color: #fff; font-size: 13.5px; letter-spacing: .1em; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); }
.steps li:first-child .chev { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); margin-left: -8px; }
.steps .chev .n { width: 17px; height: 17px; border-radius: 50%; background: #fff; color: #476d4f; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; letter-spacing: 0; }
.steps .pic { position: relative; display: block; }
.steps img { width: 100%; height: 70px; object-fit: cover; border-radius: 4px; }
.steps li:nth-child(1) img { object-position: 50% 72%; }
.steps b { display: block; font-size: 14px; letter-spacing: .12em; margin-top: 3px; line-height: 20px; }
.steps .d { display: block; font-family: var(--serif); font-size: 9.5px; line-height: 12px; color: var(--ink); letter-spacing: 0; }
.steps-note { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 8px; height: 24px; padding: 0 12px; background: #476d4f; color: #fff; font-size: 13px; letter-spacing: .08em; }
.steps-note::before, .steps-note::after { content: ""; width: 40px; height: 1px; background: rgba(255,255,255,.7); }
.solution .sub-t { margin-top: 8px; font-size: 15px; white-space: nowrap; letter-spacing: .08em; }
.solution .sub-t .ac { color: #476d4f; }
.reasons { display: grid; gap: 6px; margin: 8px 7px 0 9px; padding-bottom: 8px; }
.reasons li { position: relative; display: grid; grid-template-columns: 141px 1fr; gap: 0 8px; background: rgba(255,255,255,.75); border-radius: 6px; overflow: hidden; padding: 0 6px 0 0; min-height: 66px; }
.reasons .rn { position: absolute; left: 0; top: 0; z-index: 2; display: flex; align-items: baseline; gap: 6px; padding: 0 24px 0 8px; line-height: 23px; background: linear-gradient(90deg, #8d6f45, var(--gold-4)); color: #fff; font-size: 9px; letter-spacing: .1em; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.reasons .rn b { font-size: 18px; font-style: italic; font-weight: 600; line-height: 1; letter-spacing: 0; }
.reasons .pic { position: relative; }
.reasons .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reasons li:nth-child(3) .pic img { object-position: 30% 35%; }
.reasons .temp { display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--sage-l), #d3dfd0); color: #3f604a; padding-top: 28px; }
.reasons .temp b { font-size: 30px; line-height: 1; font-weight: 600; }
.reasons .temp b small { font-size: 15px; }
.reasons .temp span { font-size: 10px; letter-spacing: .1em; margin-top: 2px; }
.reasons .body { padding: 6px 0 6px; min-width: 0; }
.reasons h3 { font-size: 13px; letter-spacing: .04em; line-height: 17px; white-space: nowrap; }
.reasons .body p { font-family: var(--serif); font-size: 9.5px; line-height: 11.5px; color: var(--ink); margin-top: 3px; letter-spacing: 0; }
.reasons .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reasons .tags span { font-family: var(--serif); font-size: 8.5px; line-height: 14px; color: #436849; background: #e2eadf; padding: 0 8px; border-radius: 20px; }

/* ===== O: ご提案 ===== */
.offer { padding-top: 0; background: linear-gradient(180deg, #f6f4ee, #e9ecdf); }
.offer .corner { height: 120px; width: 56%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%), linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 30%), linear-gradient(180deg, #000 70%, transparent 100%); }
.offer .corner.dark { object-position: 50% 100%; }
.offer .sec-head { padding: 0 18px; }
.offer .sec-k { font-size: 10px; line-height: 15px; padding: 0 18px 0 12px; letter-spacing: .1em; }
.offer .sec-t { font-size: 20.5px; line-height: 22px; margin-top: 0; padding-left: 6px; }
.offer .sec-t::after { display: none; }
.offer .lead { font-size: 9.5px; line-height: 12px; margin-top: 4px; }
.offerbox { position: relative; z-index: 2; margin: 4px 0 0; background: #f1efe4; border: 0; box-shadow: none; padding: 0 18px calc(var(--e-of-box-h) + 2px) 26px; }
.offerbox .tag { display: table; margin: 0 auto 4px; background: #476d4f; color: #fff; font-size: 12.5px; letter-spacing: .1em; padding: 0 26px; line-height: 20px; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); transform: translateX(-12px); }
.offerbox .prod { display: grid; grid-template-columns: 107px 1fr auto; grid-template-rows: auto; column-gap: 10px; align-items: start; }
.offerbox .prod img { width: 107px; height: 56px; object-fit: cover; border-radius: 0; margin-top: 4px; mix-blend-mode: multiply; transform: scale(1.35); -webkit-mask: radial-gradient(closest-side, #000 62%, transparent 100%); mask: radial-gradient(closest-side, #000 62%, transparent 100%); }
.offerbox .pname { font-size: 13.5px; line-height: 16px; letter-spacing: .04em; font-weight: 700; }
.offerbox .pname small { display: block; font-family: var(--serif); font-size: 9px; color: var(--ink); font-weight: 400; letter-spacing: 0; margin-top: 2px; }
.perks { display: grid; gap: 0; margin-top: 0; padding-left: 10px; border-left: 1px solid #b9ad92; font-family: var(--serif); font-size: 10.5px; color: var(--sage-dd); line-height: 15px; letter-spacing: .02em; white-space: nowrap; }
.perks span::before { content: "✓"; color: var(--gold-3); font-weight: 700; margin-right: 3px; }
.offerbox .pr { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 0 14px; margin-top: 4px; padding-top: 0; border-top: 0; }
.offerbox .price { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.offerbox .price .lbl { font-family: var(--sans); font-size: 9.5px; background: #664f34; color: #fff; padding: 0 9px; line-height: 17px; letter-spacing: .08em; }
.offerbox .price .val { font-size: 28px; line-height: 28px; font-weight: 700; color: var(--ink); }
.offerbox .price .val small { font-size: 12px; margin-left: 1px; }
.offerbox .price .tax { writing-mode: vertical-rl; font-size: 8px; letter-spacing: .06em; color: var(--brown); align-self: flex-start; }
.offerbox .p2 { font-family: var(--serif); font-size: 9px; color: var(--ink); letter-spacing: 0; line-height: 11px; width: 80px; }
.offerbox .btn { background: linear-gradient(180deg, #5f8566, #4e7356); color: #fff; clip-path: none; border-radius: 40px; max-width: 252px; height: 26px; margin-top: 6px; font-size: 13px; font-weight: 500; box-shadow: 0 3px 8px rgba(50,80,60,.25); }
.offerbox .btn svg { width: 15px; height: 10px; }
.offerbox .btn-note { text-align: center; color: var(--ink); font-size: 8.5px; line-height: 12px; margin-top: 3px; font-family: var(--serif); }
.offer .sub-t.tab { margin-top: 8px; }
.unit { margin: -6px 14px 0 17px; border: 1.5px solid #8ea082; border-radius: 6px; background: rgba(255,255,255,.7); outline: 1px solid #d7cfb6; outline-offset: -5px; padding: 5px 8px 3px; }
.unit .row { display: grid; grid-template-columns: 1fr 112px; align-items: stretch; border-bottom: 1px dashed #c9c4b0; }
.unit .row:last-child { border-bottom: 0; }
.unit .l { padding: 2px 4px 2px 8px; font-size: 10.5px; letter-spacing: .02em; line-height: 13px; }
.unit .l small { display: block; font-family: var(--serif); font-size: 8px; color: var(--ink); letter-spacing: 0; line-height: 10px; }
.unit .v { display: flex; align-items: center; justify-content: center; border-left: 1px solid #d7cfb6; font-size: 15px; font-weight: 700; color: #436849; white-space: nowrap; background: none; }
.unit .v small { font-size: 9px; margin-left: 1px; }
.note { margin: 5px 14px 0 25px; font-family: var(--serif); font-size: 8.5px; line-height: 11px; color: var(--ink); letter-spacing: .02em; }
.offer .sub-t.tab:not(.brown) { margin-top: 6px; }
.reco { margin: 4px 150px 0 28px; position: relative; z-index: 2; }
.reco li { position: relative; padding: 2px 0 2px 22px; border-bottom: 1px solid #d7d5c4; font-size: 10.5px; letter-spacing: .06em; line-height: 14.5px; white-space: nowrap; }
.reco li::before { content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #476d4f url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'><path d='M1 5l4 4 8-8' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 7px no-repeat; }
.offer .reco-ph { position: absolute; right: 0; bottom: 0; width: 46%; height: 130px; object-fit: cover; opacity: .65; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(180deg, transparent 0, #000 30%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(180deg, transparent 0, #000 30%); mask-composite: intersect; z-index: 0; }
.sublink { display: block; width: fit-content; margin: 6px auto 8px; font-size: 10px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding: 0 4px 1px; letter-spacing: .02em; line-height: 14px; position: relative; z-index: 2; }

/* ===== N: 限定 ===== */
.narrow { padding-top: 0; background: #f4f1e8; }
.narrow .ph { position: relative; height: 266px; overflow: hidden; background: #000; color: #fff; padding: 13px 14px 0; }
.narrow .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; transform: scale(1.12); transform-origin: 70% 100%; }
.narrow .ph > * { position: relative; z-index: 2; }
.narrow .sec-k { background: #476d4f; font-size: 15px; line-height: 25px; }
.narrow .sec-t { font-size: 25px; line-height: 35px; margin-top: 10px; padding-left: 8px; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.narrow .sec-t .ac { color: #fff; }
.narrow .sec-t::after { width: 250px; height: 22px; margin: -12px 0 0 -20px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 22' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' x2='1'><stop offset='0' stop-color='%23f3e3b4' stop-opacity='.25'/><stop offset='.4' stop-color='%23e8cf8e'/><stop offset='1' stop-color='%23c9a55c'/></linearGradient></defs><path d='M2 21 C40 12 100 6 160 4 C200 3 230 3 248 4 C226 5 196 6 160 8 C104 11 46 16 4 22Z' fill='url(%23g)'/></svg>") left / 100% 100% no-repeat; }
.facts2 { display: grid; gap: 11px; padding: 2px 10px 0; background: none; }
.facts2 li { display: grid; grid-template-columns: 90px 1fr; background: rgba(255,255,255,.75); border: 1px solid #d8c48d; border-radius: 5px; overflow: hidden; min-height: 94px; }
.facts2 li > b { display: contents; }
.facts2 b > small { grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; background: #476d4f; color: #fff; font-size: 16px; letter-spacing: .06em; font-weight: 500; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); margin-right: -14px; }
.facts2 .t small { display: inline; font-size: 13px; letter-spacing: 0; }
.facts2 .t { grid-column: 2; padding: 10px 6px 0 22px; font-size: 20px; white-space: nowrap; font-weight: 700; letter-spacing: .04em; line-height: 26px; }
.facts2 li > span { grid-column: 2; padding: 2px 10px 8px 22px; font-family: var(--serif); font-size: 12.5px; line-height: 16.5px; color: var(--ink); letter-spacing: .04em; }
.narrow .closing { position: relative; overflow: hidden; margin-top: 16px; padding: 10px 18px 20px; background: #436849; color: #fff; text-align: center; font-size: 16px; letter-spacing: .1em; line-height: 25px; }
.narrow .closing .ear { left: -4px; bottom: -40px; opacity: .3; transform: rotate(-26deg); }

/* ===== A: ご注文方法 ===== */
.action { padding-top: 6px; background: linear-gradient(180deg, #f0eee4, #e9ecdf); }
.action .corner { height: 105px; width: 56%; object-position: 50% 38%; }
.action .sec-head { padding: 0 8px; }
.action .sec-k { font-size: 13px; line-height: 24px; padding: 0 30px 0 22px; }
.action .sec-t { font-size: 22px; line-height: 26px; margin-top: 6px; padding-left: 6px; }
.action .sec-t .ac { color: #476d4f; }
.action .sec-t i { font-size: 26px; font-weight: 600; line-height: 1; }
.action .sec-t::after { width: 60px; margin-top: 6px; }
.flow { display: grid; gap: 10px; margin: 6px 7px 0 13px; position: relative; z-index: 2; }
.flow li { position: relative; display: grid; grid-template-columns: 125px 1fr; grid-template-rows: auto 1fr; column-gap: 0; background: rgba(255,255,255,.7); border-radius: 6px; overflow: visible; min-height: 61px; }
.flow li + li::before { content: ""; position: absolute; left: 66%; top: -9px; width: 7px; height: 7px; border-right: 1.5px solid var(--gold-3); border-bottom: 1.5px solid var(--gold-3); transform: rotate(45deg); }
.flow img { grid-row: 1 / span 2; width: 125px; height: 61px; object-fit: cover; align-self: stretch; }
.flow li:nth-child(1) img { object-position: 50% 70%; }
.flow li > img { border-radius: 6px 0 0 6px; }
.flow b { display: flex; align-items: center; gap: 6px; background: #476d4f; color: #fff; font-size: 11.4px; letter-spacing: 0; line-height: 25px; font-weight: 600; padding: 0 10px 0 0; margin: 2px 0 0 -6px; clip-path: polygon(10px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); white-space: nowrap; }
.flow b .n { flex: none; width: 40px; text-align: center; background: #5a8a5f; font-size: 22px; font-style: italic; color: #fff; line-height: 25px; padding-left: 4px; }
.flow li > span { font-family: var(--serif); font-size: 10px; line-height: 12px; color: var(--ink); padding: 5px 10px 5px 14px; letter-spacing: .02em; }
.sub-t.band-t { margin-top: 10px; line-height: 28px; padding: 0 16px; background: #476d4f; color: #fff; font-size: 17px; letter-spacing: .08em; clip-path: polygon(14px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); margin-left: 4px; margin-right: 4px; }
.qa { margin: 6px 7px 10px 8px; display: grid; gap: 6px; }
.qa li { display: block; background: none; border: 0; }
.qa details[open] > .a { background: rgba(255,255,255,.7); border: 1px solid #cfcab6; border-top: 0; }
.qa .q, .qa .a { position: relative; }
.qa .q { display: flex; align-items: center; gap: 7px; width: 100%; background: #436849; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0; line-height: 15px; padding: 6px 30px 6px 6px; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.qa details.faq-item > summary.q { display: flex; }
.qa details.faq-item > summary.q::after { color: #fff; right: 16px; }
.qa .q::before, .qa .a::before { flex: none; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 10px; font-weight: 700; }
.qa .q::before { content: "Q"; background: #e6d7a6; color: #436849; transform: skewX(-8deg); }
.qa .a { display: flex; gap: 8px; align-items: flex-start; padding: 5px 8px 5px 6px; font-family: var(--serif); font-size: 9.5px; line-height: 12px; color: var(--ink); letter-spacing: .02em; }
.qa .a::before { content: "A"; background: #f1e3bb; color: #8a6a2e; border: 0; margin-top: 1px; transform: skewX(-8deg); }

/* ===== 最後のCTA ===== */
.cta2 { padding: 0; background: #e9ecdf; }
.cta2 .ph { position: relative; height: 195px; overflow: hidden; background: #000; color: #fff; padding: 24px 14px 0; }
.cta2 .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; transform: scale(1.25); transform-origin: 85% 75%; }
.cta2 .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.25) 55%, rgba(0,0,0,0)); }
.cta2 .ph > *:not(img) { position: relative; z-index: 2; }
.cta2 .k { display: inline-flex; align-items: center; gap: 10px; background: #476d4f; font-size: 12.5px; letter-spacing: .12em; padding: 0 26px 0 18px; line-height: 25px; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.cta2 .k::before, .cta2 .k::after { content: ""; width: 26px; height: 1px; background: rgba(255,255,255,.8); }
.cta2 .name { font-size: 18px; letter-spacing: .06em; line-height: 24px; margin-top: 8px; padding-left: 4px; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
/* 枠はモックの形（角が内側へえぐれた額・外の白い縁・金と緑の二重線）。角を崩さず辺だけ伸ばすため border-image で描く */
.cta2 .pricebox { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; max-width: none; margin: -71px 15px 0 14px; background: none; border: 14px solid transparent; border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M7 0H33A7 7 0 0 0 40 7V33A7 7 0 0 0 33 40H7A7 7 0 0 0 0 33V7A7 7 0 0 0 7 0Z' fill='%23f1f2e6'/%3E%3Cpath d='M10.91 5H29.09A12 12 0 0 0 35 10.91V29.09A12 12 0 0 0 29.09 35H10.91A12 12 0 0 0 5 29.09V10.91A12 12 0 0 0 10.91 5Z' fill='%23f9f7ec' stroke='%2356774c' stroke-width='2'/%3E%3Cpath d='M9.6 3.2H30.4A10.2 10.2 0 0 0 36.8 9.6V30.4A10.2 10.2 0 0 0 30.4 36.8H9.6A10.2 10.2 0 0 0 3.2 30.4V9.6A10.2 10.2 0 0 0 9.6 3.2Z' fill='none' stroke='%23c9a85c' stroke-width='1.6'/%3E%3C/svg%3E") 14 fill / 14px stretch; padding: 0 4px 0 14px; filter: drop-shadow(0 6px 9px rgba(30,20,10,.28)); }
.cta2 .pricebox .price { border: 0; padding: 0; color: #5a3e20; margin: 0; }
.cta2 .pricebox .val { font-family: "Shippori Mincho B1", var(--serif); font-size: 58px; line-height: 66px; font-weight: 800; letter-spacing: -.01em; }
.cta2 .pricebox .val small { font-size: 25px; font-weight: 800; margin-left: 1px; }
.cta2 .pricebox .tax { color: #5a3e20; font-size: 10px; }
.cta2 .pricebox .p2 { margin: 0; padding-left: 12px; border-left: 1px solid #c9a85c; font-size: 13px; line-height: 18px; color: #4a3a26; font-weight: 600; letter-spacing: .06em; }
/* 上と下の写真の間は空けない（値段の枠の裏で写真どうしが接する） */
.cta2 .wide { display: block; width: 100%; height: 176px; object-fit: cover; object-position: 50% 74%; margin-top: -37px; }
.cta2 .band { padding: 10px 15px 10px; background: #5d7d63; }
.cta2 .btn { background: linear-gradient(180deg, #4f7556, #3f5f46); color: #fff; font-size: 20px; height: 55px; max-width: 360px; margin-top: 0; box-shadow: none; filter: drop-shadow(0 0 0 #c9b07a); outline: none; }
.cta2 .btn { background-image: linear-gradient(180deg, #4f7556, #3f5f46); box-shadow: inset 0 0 0 1.5px #d8c48d; }
.cta2 .btn-note { color: #fff; font-size: 11px; margin-top: 6px; }
.foot { padding: 12px 18px 18px; background: #ebede0; }
.foot .small { font-size: 10px; color: var(--brown); line-height: 16.5px; letter-spacing: 0; }
.foot .copy { margin-top: 6px; }
.foot .foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; }
.foot .foot-links a { color: var(--brown); text-decoration: underline; text-underline-offset: 2px; padding: 4px 0; }
/* 固定CTA */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(242,243,235,.96); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .25s ease; }
.sticky.show { transform: none; }
@media (prefers-reduced-motion: reduce) { .sticky { transition: none; } }
.sticky .btn { margin: 0; max-width: 560px; padding: 12px 26px; font-size: 15px; background: linear-gradient(180deg, var(--sage), var(--sage-dd)); color: #fff; }

/* モック注記（body.mock のときだけ） */
.mock-bar { position: sticky; top: 0; z-index: 30; background: #fff4d6; color: #5a4300; border-bottom: 1px solid #e8cf8a; font-family: var(--sans); font-size: 12px; letter-spacing: 0; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 14px; }
.mock-bar button { font: inherit; background: #fff; border: 1px solid #d8b75a; padding: 3px 10px; cursor: pointer; white-space: nowrap; flex: none; }
.mock-note, .mock-panel { display: none; }
body.mock .mock-bar { display: flex; }
body.mock .mock-note { display: block; position: relative; z-index: 4; background: #fff4d6; color: #5a4300; border: 1px dashed #d8b75a; font-family: var(--sans); font-size: 11.5px; letter-spacing: 0; line-height: 1.6; padding: 6px 10px; margin: 10px 16px; text-align: left; }
body.mock .mock-note::before { content: "MOCK注記　"; font-weight: 700; }
body.mock .mock-panel { display: block; background: #fff4d6; border-bottom: 1px solid #e8cf8a; padding: 12px 14px; font-family: var(--sans); font-size: 12.5px; letter-spacing: 0; color: #5a4300; }
.mock-panel h2 { font-size: 13px; margin-bottom: 6px; font-weight: 700; }
.mock-panel ol { list-style: decimal; padding-left: 1.4em; line-height: 1.7; }
.reasons .mock-note, .offerbox .mock-note { margin: 8px 0 0 !important; }

.offer .more-notes { margin-left: 17px; }