/* ============================================================
   TopCapS / WEVENRY — サイト共通デザインシステム
   palette: 藍(製品ロゴ) × 橙 × 6色コーディング(油=黄/醤油=赤/酢=緑/料理酒・みりん=紫/合わせ調味料=橙/その他=グレー)
   type: Shippori Mincho(見出し) / Zen Kaku Gothic New(本文) / Space Grotesk(欧文)
   ============================================================ */
:root{
  --navy:#2F6DAE; --navy-deep:#1C4E7E; --navy-night:#12314F;
  --orange:#F08A3C; --orange-deep:#B7440B;
  --oil:#F2B705; --soy:#D9503F; --vinegar:#55A44E; --sake:#A15FB5;
  --bg:#FDFBF7; --soft:#FBEEDC; --paper:#FFFFFF;
  --ink:#1F2E3A; --body-c:#333F4D; --muted:#5C6670;
  --line:rgba(28,78,126,.18); --line-soft:rgba(28,78,126,.09);
  --line-white:rgba(255,255,255,.22);
  --band-warm:#FFE8CE;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--body-c); font-size:17px; line-height:2; font-weight:500;
  font-family:"Zen Kaku Gothic New",sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background-color:var(--bg);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.02 0.12' numOctaves='3' seed='11' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.35 0 0 0 0 0.28 0 0 0 0 0.12 0 0 0 0.03 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:300px;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0; color:var(--ink); font-family:"Shippori Mincho",serif; font-weight:700; line-height:1.5}
h1,h2,h3,.lead,.btn,summary{word-break:auto-phrase; text-wrap:balance}
::selection{background:var(--oil); color:var(--ink)}
.mono{font-family:"Space Grotesk",monospace; letter-spacing:.05em}
.wrap{width:min(1180px,calc(100% - 48px)); margin:0 auto}
.nb{display:inline-block}

/* eyebrow */
.eyebrow{
  font-family:"Space Grotesk",monospace; font-size:12px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--orange-deep); font-weight:700;
  display:inline-flex; gap:12px; align-items:center;
}
.eyebrow::before{content:""; width:30px; height:2px; background:var(--orange)}
.eyebrow.on-dark{color:var(--oil)}
.eyebrow.on-dark::before{background:var(--oil)}

/* キャップチップ（署名モチーフ＝製品の丸キャップ） */
.cap{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--paper); color:var(--ink);
  font-family:"Shippori Mincho",serif; font-weight:700; flex:none;
}
.cap-s{width:30px;height:30px;font-size:13px;border:4px solid}
.cap-m{width:48px;height:48px;font-size:20px;border:5px solid}
.cap-l{width:78px;height:78px;font-size:32px;border:7px solid; box-shadow:0 4px 14px rgba(38,49,59,.16)}
.cap.oil{border-color:var(--oil)}
.cap.soy{border-color:var(--soy)}
.cap.vinegar{border-color:var(--vinegar)}
.cap.navy{border-color:var(--navy)}
.cap.sake{border-color:var(--sake)}
.cap.mix{border-color:var(--orange)}
.cap.other{border-color:#9aa3aa}
.cap-trio{display:inline-flex; gap:7px; vertical-align:middle}
/* /feature/ のカラーコーディング一覧（6色・2026-08-31）*/
.color-caps-6{display:flex; flex-wrap:wrap; gap:22px 12px; margin-top:26px; max-width:560px}
.color-caps-6 .cap-item{flex:0 0 calc(33.333% - 8px); display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:13px; font-weight:700; text-align:center; line-height:1.6; word-break:auto-phrase}
@media(max-width:700px){
  .color-caps-6{gap:20px 10px}
  .color-caps-6 .cap-item{flex:0 0 calc(33.333% - 7px); font-size:11.5px}
  .color-caps-6 .cap-l{width:64px; height:64px; font-size:26px; border-width:6px}
}

/* ボタン */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:16px 36px; border-radius:999px; overflow:hidden;
  font-weight:700; font-size:15.5px; letter-spacing:.05em; cursor:pointer; text-decoration:none;
  transition:transform .35s cubic-bezier(.22,.85,.3,1), box-shadow .35s ease, background-color .35s ease, color .35s ease, border-color .35s ease;
  border:none; font-family:inherit; -webkit-tap-highlight-color:transparent;
}
.btn::after{
  content:"\2192"; font-family:"Space Grotesk",monospace; font-weight:700; font-size:1.05em; line-height:1;
  transition:transform .35s cubic-bezier(.22,.85,.3,1);
}
.btn:hover::after{transform:translateX(5px)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0); transition-duration:.15s}
.btn:focus-visible{outline:3px solid var(--orange); outline-offset:3px}
.btn-primary{background:var(--navy); color:#fff; box-shadow:0 14px 28px -14px rgba(18,49,79,.55)}
.btn-primary::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg, transparent 32%, rgba(255,255,255,.4) 50%, transparent 68%);
  transform:translateX(-130%);
}
.btn-primary:hover::before{transform:translateX(130%); transition:transform .75s ease}
.btn-primary:hover{background:var(--navy-deep); box-shadow:0 20px 36px -14px rgba(18,49,79,.6)}
.btn-ghost{background:transparent; color:var(--navy-deep); border:1.5px solid var(--navy)}
.btn-ghost:hover{background:var(--navy); color:#fff}
.btn-white{background:#fff; color:var(--navy-deep)}
.btn-white:hover{background:#EAF1F8; color:var(--navy-deep)}
.btn-orange{background:#E06714; color:#fff; box-shadow:0 14px 28px -14px rgba(183,68,11,.55)}
.btn-orange:hover{background:var(--orange-deep); color:#fff; box-shadow:0 20px 36px -14px rgba(183,68,11,.6)}
.btn .ar{font-family:"Space Grotesk",monospace; font-weight:500}
@media (prefers-reduced-motion: reduce){
  .btn, .btn::after, .btn-primary::before{transition:none}
  .btn:hover{transform:none}
  .btn:hover::after{transform:none}
  .btn-primary:hover::before{transform:translateX(-130%)}
}

/* ヘッダー */
.header{
  position:sticky; top:0; z-index:200;
  background:rgba(253,251,247,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.header::before{content:""; display:block; height:3px; background:linear-gradient(90deg,#F2B705 0 33.4%,#D9503F 33.4% 66.7%,#55A44E 66.7% 100%)}
.header-in{
  width:min(1320px,calc(100% - 40px)); margin:0 auto;
  display:flex; align-items:center; gap:28px; padding:14px 0;
}
.brand{display:flex; align-items:center; gap:11px}
.brand .cap-s{box-shadow:none}
.brand-name{font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:21px; color:var(--ink); letter-spacing:.01em}
.brand-name .o{color:var(--orange-deep)}
/* ロゴ画像（2026-08-31 堀内さん支給のTCSロゴ＋TopCapS文字ロゴに差し替え） */
.brand-mark{width:38px; height:38px; object-fit:contain; display:block; flex:none}
.brand-wordmark{display:block; width:226px; height:auto}
.brand-wordmark-footer{width:300px; height:auto}
.brand-sub{display:block; font-size:10px; color:var(--muted); letter-spacing:.08em}
.gnav{display:flex; gap:26px; margin-left:auto}
.gnav a{font-size:14px; font-weight:500; color:var(--ink); position:relative; padding:6px 0}
.gnav a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--orange); transition:width .25s}
.gnav a:hover::after{width:100%}
.header .btn{min-height:44px; padding:10px 22px; font-size:13px}
.header .btn::after{display:none}
.menu-btn{display:none}
@media(max-width:520px){
  .brand-sub{display:none}
  .brand-wordmark{width:min(230px,54vw)}
  .brand-mark{width:34px; height:34px}
}
@media(max-width:960px){
  .gnav, .header .btn-primary{display:none}
  .menu-btn{
    display:flex; flex-direction:column; gap:5px; margin-left:auto;
    background:none; border:none; padding:12px; cursor:pointer;
  }
  .menu-btn span{width:26px; height:2px; background:var(--ink); transition:.25s}
  .drawer.open{transform:none}
}
.drawer{
  position:fixed; inset:0; z-index:300; background:var(--navy-night);
  color:#fff; padding:80px 36px 40px; transform:translateX(100%);
  transition:transform .35s ease; display:flex; flex-direction:column; gap:4px;
}
.drawer a{padding:13px 0; font-size:17px; font-weight:600; border-bottom:1px solid var(--line-white); color:#fff}
.drawer .close{position:absolute; top:18px; right:18px; background:none; border:none; color:#fff; font-size:30px; cursor:pointer; padding:10px}
.drawer .btn{margin-top:22px}

/* 下層ページ共通ヒーロー */
.page-hero{padding:76px 0 52px; position:relative; overflow:hidden}
.page-hero h1{font-size:34px; margin:14px 0 12px}
.page-hero .lead{font-size:16px; color:var(--body-c); max-width:640px}
.page-hero .deco-ring{
  position:absolute; right:-90px; top:-70px; width:300px; height:300px;
  border:38px solid var(--soft); border-radius:50%; z-index:-1;
}
@media(min-width:900px){.page-hero{padding:100px 0 64px}.page-hero h1{font-size:46px}}

/* セクション骨格 */
.sec{padding:80px 0}
@media(min-width:900px){.sec{padding:110px 0}}
.sec-paper{background:var(--paper)}
.sec-navy{background:var(--navy-deep); color:rgba(255,255,255,.85)}
.sec-navy h2,.sec-navy h3{color:#fff}
.sec-head{margin-bottom:40px}
.sec-head h2{font-size:30px; margin-top:14px}
@media(min-width:900px){.sec-head h2{font-size:40px}}
.lead{font-size:16.5px; line-height:2.1}

/* 雑誌型 罫線インデックス */
.index-row{
  display:flex; align-items:baseline; gap:24px; padding:22px 6px;
  border-top:1px solid var(--line);
}
.index-row:last-child{border-bottom:1px solid var(--line)}
.index-no{font-family:"Space Grotesk",monospace; font-size:13px; font-weight:700; color:var(--orange-deep); min-width:2.4em}
.index-t{font-weight:700; color:var(--ink); font-size:17px}
.index-d{font-size:14.5px; color:var(--muted); margin-left:auto; text-align:right; line-height:1.8}
@media(max-width:640px){
  .index-row{flex-wrap:wrap; gap:6px 16px}
  .index-d{margin-left:calc(2.4em + 16px); text-align:left; width:100%}
}

/* 特大数字の編集リスト */
.ed-item{display:grid; grid-template-columns:auto 1fr; gap:20px 28px; padding:34px 0; border-top:1px solid var(--line)}
.ed-num{
  font-family:"Space Grotesk",monospace; font-weight:700; line-height:.85;
  font-size:64px; color:transparent; -webkit-text-stroke:1.5px var(--navy);
}
.ed-item h3{font-size:21px; margin-bottom:10px}
@media(min-width:900px){
  .ed-num{font-size:96px}
  .ed-item h3{font-size:24px}
}

/* カード・図版 */
.figure{background:var(--paper); border:1px solid var(--line); padding:16px}
.fig-cap{font-size:13px; color:var(--muted); margin-top:10px; display:flex; gap:10px; line-height:1.8}
.fig-cap::before{content:""; width:18px; height:1px; background:var(--orange); flex:none; margin-top:.8em}

/* FAQ */
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none; display:flex; gap:18px; align-items:baseline;
  padding:24px 6px; cursor:pointer; font-weight:700; color:var(--ink); font-size:16.5px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-q{font-family:"Space Grotesk",monospace; color:var(--orange-deep); font-weight:700; flex:none}
.faq-item summary::after{content:"+"; margin-left:auto; font-family:"Space Grotesk",monospace; font-size:22px; color:var(--muted); transition:transform .25s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 6px 26px 0; display:flex; gap:18px}
.faq-a .a-mark{font-family:"Space Grotesk",monospace; color:var(--navy); font-weight:700; flex:none}
.faq-a p{max-width:62em}
/* 2026-09-03 堀内さん支給のQ&Aに差し替え。答えが複数段落・箇条書きになったので受け皿を用意
   （.faq-a は display:flex なので、答えは必ず .faq-body 1枚にまとめてから入れる） */
.faq-a .faq-body{max-width:62em}
.faq-a .faq-body > p + p{margin-top:1em}
.faq-list{list-style:none; margin:1em 0; padding:0}
.faq-list li{position:relative; padding-left:1.4em}
.faq-list li + li{margin-top:.7em}
.faq-list li::before{content:"■"; position:absolute; left:0; top:.02em; font-size:.72em; color:var(--orange-deep)}
/* ジャンル分け（2026-08-31 堀内さんご要望：製品／購入／代表） */
.faq-nav{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px}
.faq-nav a{
  font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--navy-deep);
  border:1px solid var(--line); border-radius:999px; padding:9px 18px; background:#fff;
  min-height:44px; display:inline-flex; align-items:center; transition:background-color .25s,color .25s,border-color .25s;
}
.faq-nav a:hover{background:var(--navy-deep); border-color:var(--navy-deep); color:#fff}
.faq-cat + .faq-cat{margin-top:64px}
.faq-cat-h{
  display:flex; align-items:baseline; gap:14px; font-size:21px; margin:0 0 12px; scroll-margin-top:90px;
}
@media(min-width:900px){.faq-cat-h{font-size:24px}}
.faq-cat-no{font-family:"Space Grotesk",monospace; font-size:12px; letter-spacing:.2em; color:var(--orange-deep); font-weight:700}
.faq-cat{scroll-margin-top:90px}

/* フッター */
.footer{background:var(--navy-night); color:rgba(255,255,255,.72); font-size:13.5px}
.footer-in{width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:64px 0 40px}
.footer-grid{display:grid; gap:36px; grid-template-columns:1fr}
@media(min-width:800px){.footer-grid{grid-template-columns:1.2fr 1fr 1fr}}
.footer .brand-name{color:#fff}
.footer .brand-wordmark-footer{margin-bottom:4px}
.footer-brand{display:block; width:fit-content}
.footer-tag{margin-top:10px; font-size:12.5px; line-height:2; color:rgba(255,255,255,.72)}
.footer h4{font-family:"Space Grotesk",monospace; font-size:11px; letter-spacing:.24em; color:var(--oil); margin:0 0 14px; font-weight:700}
.footer-nav{display:flex; flex-direction:column; gap:9px}
.footer-nav a{color:rgba(255,255,255,.78)}
.footer-nav a:hover{color:#fff}
.footer-bottom{
  margin-top:44px; padding-top:20px; border-top:1px solid var(--line-white);
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  font-size:12px; color:rgba(255,255,255,.72);
}

/* パンくず */
.crumb{font-size:12px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap}
.crumb a{color:var(--muted); text-decoration:underline; text-underline-offset:3px}

/* リビール（JS有効時のみ隠す） */
.j .rv{opacity:0; transform:translateY(18px)}
.j .rv.done{opacity:1; transform:none; transition:opacity .8s ease, transform .8s ease}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .j .rv{opacity:1; transform:none}
}

/* ブログ本文 */
.article{background:var(--paper); border:1px solid var(--line-soft); padding:36px 26px}
@media(min-width:800px){.article{padding:64px 72px}}
.article h2{font-size:24px; margin:2.2em 0 .8em; padding-bottom:.4em; border-bottom:2px solid var(--soft); position:relative}
.article h2::after{content:""; position:absolute; left:0; bottom:-2px; width:64px; height:2px; background:var(--orange)}
.article h3{font-size:19px; margin:1.8em 0 .6em}
.article p{margin:0 0 1.4em}
.article ul{margin:0 0 1.4em; padding-left:1.4em}
.article li{margin-bottom:.5em}
.article .point{
  background:var(--bg); border-left:4px solid var(--oil);
  padding:18px 22px; margin:0 0 1.6em; font-size:15px;
}
.article-meta{display:flex; gap:14px; align-items:center; font-size:12.5px; color:var(--muted); margin:14px 0 30px}
.article-meta .tag{border:1px solid var(--line); border-radius:999px; padding:2px 12px}
.article a{color:var(--navy); text-decoration:underline; text-underline-offset:4px; font-weight:600}
.article a:hover{color:var(--orange-deep)}

/* ── ブログ：2カラム＋サイドバー ── */
.blog-layout{display:grid; gap:44px; grid-template-columns:1fr; align-items:start}
@media(min-width:980px){.blog-layout{grid-template-columns:minmax(0,1fr) 320px; gap:56px}}
.featured{border-radius:16px; overflow:hidden; border:1px solid var(--line-soft); margin-bottom:36px}
.sidebar{display:flex; flex-direction:column; gap:22px; position:sticky; top:96px}
.sb-card{background:var(--paper); border:1px solid var(--line-soft); border-radius:14px; padding:24px 24px 26px}
.sb-card h3{font-size:13px; font-weight:700; letter-spacing:.18em; color:var(--muted); font-family:"Space Grotesk",monospace; margin:0 0 16px}
.sb-prof{text-align:center}
.sb-prof img{width:96px; height:96px; object-fit:cover; object-position:center top; border-radius:50%; margin:0 auto 14px; border:3px solid var(--soft)}
.sb-name{font-family:"Shippori Mincho",serif; font-weight:700; font-size:17px; color:var(--ink)}
.sb-role{font-size:12px; color:var(--muted); margin-bottom:10px}
.sb-bio{font-size:13px; line-height:1.9; color:var(--body-c); text-align:left}
.sb-prof a{display:inline-block; margin-top:12px; font-size:13px; font-weight:700; color:var(--navy); text-decoration:underline; text-underline-offset:3px}
.sb-post{display:flex; gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--line-soft); color:var(--ink)}
.sb-post:first-of-type{border-top:none; padding-top:0}
.sb-post img{width:86px; border-radius:8px; flex:none}
.sb-post span{font-size:13px; font-weight:600; line-height:1.7}
.sb-post:hover span{color:var(--orange-deep)}
.sb-cat{display:flex; flex-direction:column}
.sb-cat a{padding:9px 2px; font-size:14px; color:var(--body-c); border-top:1px solid var(--line-soft); display:flex; gap:10px; align-items:baseline}
.sb-cat a:first-of-type{border-top:none; padding-top:0}
.sb-cat a::before{content:"—"; color:var(--orange); font-weight:700}
.sb-cat a:hover{color:var(--orange-deep)}
.sb-cta{text-align:center; background:var(--soft); border:none}
.sb-cta img{border-radius:8px; margin-bottom:14px}
.sb-cta p{font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:14px; line-height:1.8}

/* ── ブログ：この記事を書いた人（著者ボックス・2026-08-17） ── */
.author-box{margin-top:44px; background:var(--paper); border:1px solid var(--line-soft); border-radius:16px; padding:30px 26px 32px; position:relative; overflow:hidden}
.author-box::before{content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 55%,var(--orange) 100%)}
@media(min-width:800px){.author-box{padding:36px 40px 38px}}
.ab-label{display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:700; letter-spacing:.14em; color:var(--orange-deep); margin:0 0 22px}
.ab-label::before{content:""; width:26px; height:2px; background:var(--orange)}
.ab-grid{display:grid; grid-template-columns:1fr; gap:22px; align-items:start}
@media(min-width:640px){.ab-grid{grid-template-columns:132px minmax(0,1fr); gap:32px}}
.ab-photo{width:120px; height:120px; border-radius:50%; object-fit:cover; object-position:center top; border:4px solid var(--soft); display:block; margin:0 auto; background:#eee}
@media(min-width:640px){.ab-photo{width:132px; height:132px; margin:0}}
.ab-name{font-family:"Shippori Mincho",serif; font-weight:700; font-size:21px; color:var(--ink); line-height:1.5; margin:0}
.ab-name small{font-family:"Zen Kaku Gothic New",sans-serif; font-size:12.5px; font-weight:500; color:var(--muted); margin-left:10px; letter-spacing:.06em}
.ab-role{font-size:13px; color:var(--navy-deep); font-weight:700; margin:6px 0 14px}
.ab-bio{font-size:14.5px; line-height:2; color:var(--body-c)}
.ab-bio p{margin:0 0 .8em}
.ab-bio p:last-child{margin-bottom:0}
.ab-facts{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; padding:0; list-style:none}
.ab-facts li{font-size:12.5px; font-weight:600; color:var(--navy-deep); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:5px 13px; line-height:1.6}
.ab-links{display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; margin-top:18px}
.ab-links a{font-size:13.5px; font-weight:700; color:var(--navy); text-decoration:underline; text-underline-offset:4px}
.ab-links a:hover{color:var(--orange-deep)}
@media(max-width:639px){
  .ab-name,.ab-role{text-align:center}
  .ab-name small{display:block; margin:4px 0 0}
  .ab-facts,.ab-links{justify-content:center}
}
.blog-cards{display:grid; gap:26px; grid-template-columns:1fr}
@media(min-width:700px){.blog-cards{grid-template-columns:1fr 1fr}}
.b-card{background:var(--paper); border:1px solid var(--line-soft); border-radius:16px; overflow:hidden; display:block; transition:transform .2s, box-shadow .2s}
.b-card:hover{transform:translateY(-3px); box-shadow:0 14px 40px rgba(31,46,58,.1)}
.b-card img{width:100%}
.b-card .b-body{padding:22px 26px 26px}
.b-card h2,.b-card h3{font-size:18px; line-height:1.8; margin:8px 0 10px}
.b-card p{font-size:13.5px; color:var(--muted); line-height:1.9}
.b-card .mono{font-size:12px; color:var(--orange-deep)}
/* 記事本文（WP入稿対象＝.entry の中身） */
.entry{background:var(--paper); border:1px solid var(--line-soft); border-radius:16px; padding:34px 26px}
@media(min-width:800px){.entry{padding:52px 56px}}
.entry h2{font-size:23px; margin:2.2em 0 .8em; padding-bottom:.4em; border-bottom:2px solid var(--soft); position:relative}
.entry h2::after{content:""; position:absolute; left:0; bottom:-2px; width:64px; height:2px; background:var(--orange)}
.entry h2:first-child{margin-top:0}
.entry h3{font-size:18px; margin:1.8em 0 .6em}
.entry p{margin:0 0 1.5em}
.entry ul{margin:0 0 1.5em; padding-left:1.4em}
.entry li{margin-bottom:.5em}
.entry .point, .entry .is-style-point{background:var(--bg); border-left:4px solid var(--oil); padding:18px 22px; margin:0 0 1.6em; font-size:15px}
.entry a{color:var(--navy); text-decoration:underline; text-underline-offset:4px; font-weight:600}
.entry a:hover{color:var(--orange-deep)}
.entry img{border-radius:12px; margin:0 0 1.5em}

/* 追従購入ボタン（右下・ふわふわ） */
.float-buy{
  position:fixed; right:20px; bottom:20px; z-index:400;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  text-decoration:none; animation:fb-bob 3.4s ease-in-out infinite;
  filter:drop-shadow(0 12px 24px rgba(18,49,79,.3));
}
@keyframes fb-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.fb-bubble{
  position:relative; background:var(--navy); color:#fff; font-weight:700; font-size:13px;
  letter-spacing:.05em; padding:9px 15px; border-radius:999px; white-space:nowrap;
  transition:background-color .3s ease;
}
.fb-bubble::after{
  content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  border:7px solid transparent; border-top-color:var(--navy); border-bottom:0;
  transition:border-top-color .3s ease;
}
.float-buy img{
  width:62px; height:62px; background:#fff; border-radius:50%;
  border:3px solid var(--orange); padding:8px; box-sizing:border-box; display:block;
  object-fit:contain;
}
.float-buy:hover .fb-bubble{background:var(--orange-deep)}
.float-buy:hover .fb-bubble::after{border-top-color:var(--orange-deep)}
@media(max-width:600px){
  .float-buy{right:14px; bottom:14px}
  .float-buy img{width:54px; height:54px; padding:7px}
  .fb-bubble{font-size:12px; padding:8px 13px}
}
@media (prefers-reduced-motion: reduce){.float-buy{animation:none}}

/* ============================================================
   12個セットの中身ピッカー（products.html #buy）
   2026-08-16 堀内さん指示「デフォルトでチェックが入っていて、そのページ上でオンオフ」
   ============================================================ */
.pick-box{margin-top:18px; border:1px solid var(--line); background:#fff; padding:22px 20px}
.pick-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px}
.pick-head strong{font-size:15px; color:var(--ink)}
.pick-count{margin-left:auto; font-family:"Space Grotesk",monospace; font-weight:700; font-size:17px; color:var(--navy)}
.pick-count.is-over{color:var(--soy)}
.pick-presets{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.pick-preset{
  font:inherit; font-size:13px; font-weight:700; line-height:1; padding:10px 15px;
  border:1px solid var(--navy); border-radius:999px; background:#fff; color:var(--navy); cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
.pick-preset:hover{background:var(--navy); color:#fff}
.pick-g{margin-top:20px}
.pick-g h4{font-size:12.5px; font-weight:700; color:var(--muted); letter-spacing:.06em; margin:0 0 10px}
.pick-list{display:flex; flex-wrap:wrap; gap:8px}
/* 系統ごとの小見出し（油系・醤油系・酢系・合わせ調味料系・その他）— 2026-08-17 堀内さん指示 */
.pick-fam{margin-top:10px}
.pick-fam:first-of-type{margin-top:0}
.pick-fam-h{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--body-c); margin:0 0 7px}
.pick-fam-h i{display:inline-block; width:11px; height:11px; border-radius:50%; border:1px solid rgba(0,0,0,.08)}
.pick-item{
  display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:500;
  border:1px solid var(--line); border-radius:999px; padding:8px 14px; background:#fff;
  cursor:pointer; user-select:none; transition:border-color .2s ease,background-color .2s ease;
}
.pick-item input{width:15px; height:15px; margin:0; accent-color:var(--navy)}
.pick-item.is-on{border-color:var(--navy); background:#EDF3FA; font-weight:700; color:var(--ink)}
.pick-msg{margin-top:14px; font-size:13px; color:var(--soy); font-weight:700; min-height:1.2em}
.pick-note{margin-top:10px; font-size:12.5px; color:var(--muted); line-height:1.9}
@media(max-width:600px){
  .pick-box{padding:18px 14px}
  .pick-item{font-size:12.5px; padding:7px 11px}
}

/* ============================================================
   カート・ご購入手続き（WooCommerce）をサイトの見た目に合わせる
   2026-08-16。テーマの woocommerce.php と対。WooCommerce標準CSSの後に読ませている
   ============================================================ */
.tc-shop{font-size:15.5px; line-height:1.9}
.tc-shop h2,.tc-shop h3{font-family:"Shippori Mincho",serif; color:var(--ink); letter-spacing:.02em}
.tc-shop h2{font-size:21px; margin:0 0 18px}
.tc-shop h3{font-size:17px; margin:0 0 14px}
.tc-shop a{color:var(--navy); text-decoration:underline; text-underline-offset:3px}

/* 表（カートの明細・ご注文内容） */
.tc-shop table.shop_table{
  border:1px solid var(--line); border-radius:0; border-collapse:collapse;
  background:var(--paper); width:100%; margin:0 0 26px;
}
.tc-shop table.shop_table th,
.tc-shop table.shop_table td{
  border-top:1px solid var(--line-soft); border-left:0; border-right:0;
  padding:16px 14px; font-size:14.5px; vertical-align:middle;
}
.tc-shop table.shop_table thead th{
  background:var(--soft); font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700;
  font-size:13px; letter-spacing:.04em; color:var(--ink); border-top:0;
}
.tc-shop table.shop_table tfoot th{font-weight:700}
.tc-shop table.shop_table td.product-name{font-weight:700; color:var(--ink)}
.tc-shop table.shop_table .product-name dl.variation,
.tc-shop table.shop_table .product-name .wc-item-meta{
  margin:8px 0 0; font-weight:500; font-size:12.5px; color:var(--muted); line-height:1.8;
}
.tc-shop table.shop_table .product-name dl.variation dt,
.tc-shop table.shop_table .product-name .wc-item-meta li strong{font-weight:700; color:var(--body-c)}
.tc-shop table.shop_table .product-name dl.variation dd,
.tc-shop table.shop_table .product-name dl.variation dd p{margin:0 0 4px}
.tc-shop .woocommerce-Price-amount{font-family:"Space Grotesk",monospace; font-weight:700; color:var(--ink)}
.tc-shop .order-total .woocommerce-Price-amount{font-size:19px; color:var(--orange-deep)}
.tc-shop td.product-remove a.remove{
  color:var(--muted); background:none; font-size:22px; line-height:1;
}
.tc-shop td.product-remove a.remove:hover{color:var(--soy); background:none}

/* 数量 */
.tc-shop .quantity input.qty{
  width:66px; height:44px; text-align:center; border:1px solid var(--line); background:#fff;
  font-family:"Space Grotesk",monospace; font-weight:700; font-size:16px; color:var(--ink);
}

/* ボタン（サイトの .btn と同じピル型） */
.tc-shop .button,
.tc-shop button.button,
.tc-shop input.button,
.tc-shop a.button,
.tc-shop .checkout-button,
.tc-shop #place_order{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 30px; border:0; border-radius:999px; cursor:pointer;
  font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:15.5px; line-height:1;
  background:var(--navy); color:#fff; text-decoration:none; letter-spacing:.02em;
  transition:background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.tc-shop .button:hover,
.tc-shop button.button:hover,
.tc-shop input.button:hover,
.tc-shop a.button:hover,
.tc-shop .checkout-button:hover,
.tc-shop #place_order:hover{
  background:var(--navy-deep); color:#fff; transform:translateY(-2px); box-shadow:0 10px 24px rgba(28,78,126,.22);
}
.tc-shop .button:disabled,
.tc-shop .button.disabled{opacity:.45; transform:none; box-shadow:none}
.tc-shop .checkout-button,
.tc-shop #place_order{width:100%; min-height:60px; font-size:17px}
.tc-shop button[name="update_cart"]{background:#fff; color:var(--navy); border:1px solid var(--navy)}
.tc-shop button[name="update_cart"]:hover{background:var(--navy); color:#fff}
.tc-shop .return-to-shop .button{background:#fff; color:var(--navy); border:1px solid var(--navy)}

/* 入力欄 */
.tc-shop .form-row{padding:0 0 16px; margin:0}
.tc-shop .form-row label{
  display:block; font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:7px; letter-spacing:.02em;
}
.tc-shop .required{color:var(--soy); text-decoration:none; border:0}
.tc-shop .form-row input.input-text,
.tc-shop .form-row textarea,
.tc-shop .form-row select,
.tc-shop .select2-container .select2-selection--single{
  width:100%; min-height:52px; padding:12px 14px; border:1px solid var(--line); border-radius:0;
  background:#fff; font-family:"Zen Kaku Gothic New",sans-serif; font-size:16px; color:var(--body-c);
}
.tc-shop .form-row textarea{min-height:110px; line-height:1.8}
.tc-shop .form-row input.input-text:focus,
.tc-shop .form-row textarea:focus,
.tc-shop .form-row select:focus{outline:2px solid var(--navy); outline-offset:1px; border-color:var(--navy)}
.tc-shop .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:28px; padding-left:0}
.tc-shop .select2-container--default .select2-selection--single .select2-selection__arrow{height:50px}

/* 見出しブロック・注文内容・お支払い */
.tc-shop .woocommerce-billing-fields > h3,
.tc-shop #order_review_heading,
.tc-shop .woocommerce-additional-fields > h3{
  margin-top:34px; padding-bottom:10px; border-bottom:2px solid var(--ink);
}
.tc-shop .woocommerce-checkout-review-order{
  background:var(--bg); border:1px solid var(--line); padding:26px 22px; margin-top:6px;
}
.tc-shop .woocommerce-checkout-review-order table.shop_table{background:transparent; border:0; margin-bottom:18px}
.tc-shop #payment{background:transparent; border-radius:0}
.tc-shop #payment ul.payment_methods{border-bottom:1px solid var(--line); padding:0 0 16px; margin:0 0 16px}
.tc-shop #payment ul.payment_methods li{list-style:none; margin:0 0 10px}
.tc-shop #payment ul.payment_methods li label{font-weight:700; color:var(--ink); font-size:15px}
.tc-shop #payment div.payment_box{
  background:#fff; border:1px solid var(--line); color:var(--body-c); font-size:13.5px; line-height:1.9;
  padding:16px 18px; margin:12px 0 0; border-radius:0;
}
.tc-shop #payment div.payment_box::before{display:none}
.tc-shop .woocommerce-terms-and-conditions-wrapper{font-size:13px; color:var(--muted)}

/* お知らせ・エラー */
.tc-shop .woocommerce-message,
.tc-shop .woocommerce-info,
.tc-shop .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error{
  border-top:0; border-left:4px solid var(--navy); background:var(--soft); color:var(--ink);
  font-size:14px; line-height:1.9; padding:16px 18px; margin:0 0 24px; border-radius:0; list-style:none;
}
.tc-shop .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-error{border-left-color:var(--soy); background:#FDEDEB}
.tc-shop .woocommerce-message::before,
.tc-shop .woocommerce-info::before,
.tc-shop .woocommerce-error::before,
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-error::before{display:none}

/* ご注文完了 */
.tc-shop .woocommerce-order-overview{
  display:flex; flex-wrap:wrap; gap:18px 34px; border:1px solid var(--line);
  background:var(--paper); padding:22px; margin:0 0 28px; list-style:none;
}
.tc-shop .woocommerce-order-overview li{border:0; font-size:12.5px; color:var(--muted); font-weight:700; letter-spacing:.04em}
.tc-shop .woocommerce-order-overview li strong{display:block; font-size:16px; color:var(--ink); margin-top:5px; letter-spacing:0}

/* クーポン欄は当面使わないので隠す（使うときはこの2つのセレクタを消す） */
.tc-shop .coupon,
.tc-shop .woocommerce-form-coupon-toggle{display:none}

@media(max-width:600px){
  .tc-shop table.shop_table th,.tc-shop table.shop_table td{padding:12px 10px; font-size:13.5px}
  .tc-shop .woocommerce-checkout-review-order{padding:20px 14px}
  .tc-shop .checkout-button,.tc-shop #place_order{font-size:16px}
}

/* 単品ピッカーのチップ（種類ごとに個数）— 2026-08-16 */
.pick-item.pick-num{padding:4px 7px; gap:2px; cursor:default}
.pick-num .pn-btn{
  width:30px; height:30px; border:0; border-radius:50%; background:none; cursor:pointer;
  font:inherit; font-size:17px; line-height:1; color:var(--navy);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background-color .18s ease;
}
.pick-num .pn-btn:hover{background:rgba(47,109,174,.12)}
.pick-num .pn-name{padding:0 3px}
.pick-num .pn-qty{
  font-family:"Space Grotesk",monospace; min-width:18px; text-align:center;
  font-size:14px; font-weight:700; color:var(--ink);
}
@media(max-width:600px){
  .pick-num .pn-btn{width:28px; height:28px; font-size:16px}
}

/* WooCommerce標準CSSより詳細度を上げた上書き（.woocommerce a.button.alt 等に勝たせる）
   2026-08-16。カートの「ご注文手続きへ進む」が紫のままだったため追加 */
.tc-shop .woocommerce a.button,
.tc-shop .woocommerce button.button,
.tc-shop .woocommerce input.button,
.tc-shop .woocommerce a.button.alt,
.tc-shop .woocommerce button.button.alt,
.tc-shop .woocommerce input.button.alt,
.tc-shop .woocommerce a.checkout-button,
.tc-shop .woocommerce button#place_order,
.tc-shop .woocommerce #respond input#submit{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 30px; border:0; border-radius:999px; cursor:pointer;
  font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:15.5px; line-height:1;
  background:var(--navy); color:#fff; text-decoration:none; letter-spacing:.02em;
}
.tc-shop .woocommerce a.button:hover,
.tc-shop .woocommerce button.button:hover,
.tc-shop .woocommerce input.button:hover,
.tc-shop .woocommerce a.button.alt:hover,
.tc-shop .woocommerce button.button.alt:hover,
.tc-shop .woocommerce input.button.alt:hover,
.tc-shop .woocommerce a.checkout-button:hover,
.tc-shop .woocommerce button#place_order:hover{
  background:var(--navy-deep); color:#fff; transform:translateY(-2px); box-shadow:0 10px 24px rgba(28,78,126,.22);
}
.tc-shop .woocommerce a.checkout-button,
.tc-shop .woocommerce button#place_order{width:100%; min-height:60px; font-size:17px}
.tc-shop .woocommerce button.button[name="update_cart"],
.tc-shop .woocommerce button.button:disabled[name="update_cart"]{
  background:#fff; color:var(--navy); border:1px solid var(--navy);
}
.tc-shop .woocommerce button.button[name="update_cart"]:hover{background:var(--navy); color:#fff}
.tc-shop .woocommerce .return-to-shop a.button{background:#fff; color:var(--navy); border:1px solid var(--navy)}

/* カートの合計ブロック */
.tc-shop .cart-collaterals .cart_totals{width:100%; float:none}
.tc-shop .cart-collaterals{width:100%; float:none; display:flex; justify-content:flex-end}
.tc-shop .cart-collaterals > *{width:min(430px,100%)}
.tc-shop .cart_totals h2{font-size:18px}
.tc-shop .cart_totals .shipping td{font-size:13.5px; line-height:1.9}
.tc-shop .cart_totals .woocommerce-shipping-destination{color:var(--muted); font-size:12.5px}

/* 商品写真（2026-08-16に仮画像を登録。実写が届いたら差し替えるだけ） */
.tc-shop table.shop_table td.product-thumbnail{width:82px}
.tc-shop table.shop_table td.product-thumbnail img{
  width:70px; height:70px; object-fit:contain; border:1px solid var(--line-soft); background:#fff;
}
@media(max-width:600px){
  .tc-shop table.shop_table td.product-thumbnail{width:56px}
  .tc-shop table.shop_table td.product-thumbnail img{width:48px; height:48px}
}

@media(max-width:600px){
  .tc-shop .cart-collaterals{display:block}
  .tc-shop .cart-collaterals > *{width:100%}
}

/* 購入手続きは1カラムに（お届け先 → 注文メモ → ご注文の内容 の順に読ませる）
   2026-08-16。標準は2カラムで「注文メモ」が右上に浮いて読みにくかった */
.tc-shop .woocommerce .col2-set .col-1,
.tc-shop .woocommerce .col2-set .col-2{width:100%; float:none; margin:0}
.tc-shop .woocommerce .col2-set .col-2{margin-top:26px}
.tc-shop .woocommerce-additional-fields{margin-top:26px}
.tc-shop .woocommerce form .form-row-first,
.tc-shop .woocommerce form .form-row-last{width:48.5%}

/* カート・購入手続き・マイページでは追従購入ボタンを出さない（入力欄に重なるため） */
body.woocommerce-cart .float-buy,
body.woocommerce-checkout .float-buy,
body.woocommerce-account .float-buy{display:none}

/* ============================================================
   YouTubeのファサード（クリックするまで読み込まない）2026-08-16
   ============================================================ */
.yt-facade{
  position:absolute; inset:0; width:100%; height:100%; cursor:pointer;
  background:#000; overflow:hidden; border:0; display:block;
}
.yt-facade img{width:100%; height:100%; object-fit:cover; display:block; opacity:.86; transition:opacity .3s ease, transform .6s ease}
.yt-facade:hover img{opacity:1; transform:scale(1.02)}
.yt-facade iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.yt-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:86px; height:60px; border:0; border-radius:14px; cursor:pointer;
  background:rgba(20,20,22,.72); display:flex; align-items:center; justify-content:center;
  transition:background-color .25s ease, transform .25s ease;
}
.yt-facade:hover .yt-play{background:#E0281E; transform:translate(-50%,-50%) scale(1.06)}
.yt-play span{
  width:0; height:0; margin-left:5px;
  border-left:20px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent;
}
.yt-note{
  position:absolute; left:0; right:0; bottom:0; padding:11px 12px 9px;
  background:linear-gradient(transparent, rgba(0,0,0,.55) 45%, rgba(0,0,0,.82));
  color:#fff; font-size:11.5px; letter-spacing:.02em; text-align:center; pointer-events:none;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}
@media(max-width:600px){
  .yt-play{width:70px; height:50px}
  .yt-play span{border-left-width:17px; border-top-width:10px; border-bottom-width:10px}
  .yt-note{font-size:10.5px}
}
@media (prefers-reduced-motion: reduce){
  .yt-facade img, .yt-facade:hover img, .yt-facade:hover .yt-play{transition:none; transform:none}
}

/* ── 開発者の想い（長編・2026-08-17）── */
.st-hero .lead{font-family:"Shippori Mincho",serif; font-size:19px; color:var(--ink); line-height:2.1; max-width:720px}
@media(min-width:900px){.st-hero .lead{font-size:23px}}
.st-sub{font-size:13.5px; color:var(--muted); margin-top:14px; letter-spacing:.04em}
.st-intro-grid{display:grid; gap:40px; grid-template-columns:1fr; align-items:start}
@media(min-width:900px){.st-intro-grid{grid-template-columns:320px minmax(0,1fr); gap:72px}}
.st-portrait{max-width:320px}
.st-portrait img{width:100%; height:auto; border-radius:16px; box-shadow:0 18px 50px rgba(31,46,58,.14); display:block}
.st-prof-h{
  font-family:"Space Grotesk",monospace; font-size:11px; letter-spacing:.24em; font-weight:700;
  color:var(--orange-deep); margin:0 0 6px; display:flex; align-items:center; gap:12px;
}
.st-prof-h::after{content:""; flex:1; height:1px; background:var(--line)}
.st-prof .index-row{padding:18px 6px}
.st-prof .index-d{font-size:14px; margin-left:0; text-align:left; flex:1}
@media(min-width:641px){.st-prof .index-row{display:grid; grid-template-columns:2.4em 6em minmax(0,1fr); gap:16px; align-items:baseline}}
.st-intro-note{margin-top:30px; font-family:"Shippori Mincho",serif; font-size:16px; line-height:2.3; color:var(--ink)}
.st-chap-head{display:flex; align-items:flex-end; gap:22px; margin-bottom:44px}
.st-chap-head h2{font-size:27px; margin:0 0 6px}
@media(min-width:900px){.st-chap-head h2{font-size:36px}}
.st-cols{display:grid; gap:44px; grid-template-columns:1fr; align-items:start}
@media(min-width:960px){.st-cols{grid-template-columns:minmax(0,1fr) 340px; gap:80px}}
.st-body{font-family:"Shippori Mincho",serif; font-size:17px; line-height:2.6; color:var(--ink); max-width:38em}
.st-body p{margin:0 0 1.9em}
.st-body p:last-child{margin-bottom:0}
.st-strong{font-size:1.15em; font-weight:700; letter-spacing:.02em}
.st-side{display:flex; flex-direction:column; gap:30px}
@media(min-width:960px){.st-side{position:sticky; top:96px}}
.st-fig{margin:0}
.st-fig img{width:100%; height:auto; border-radius:14px; border:1px solid var(--line-soft); display:block}
.st-fig .fig-cap{margin-top:12px}
.st-quote{
  margin:0; padding:22px 24px 22px 26px; border-left:3px solid var(--orange); background:var(--soft);
  font-family:"Shippori Mincho",serif; font-size:19px; line-height:1.9; font-weight:700; color:var(--ink); border-radius:0 12px 12px 0;
}
@media(min-width:900px){.st-quote{font-size:21px}}
.st-wide{margin-top:64px}
.st-video-wrap{position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; border:1px solid var(--line-soft); background:#000}
.st-timeline-sec{background:var(--soft)}
.st-timeline{list-style:none; margin:0; padding:0; max-width:820px}
.st-timeline li{display:grid; grid-template-columns:78px 1fr; gap:18px; padding:18px 0; border-top:1px solid var(--line)}
.st-timeline li:last-child{border-bottom:1px solid var(--line)}
.st-year{font-family:"Space Grotesk",monospace; font-weight:700; font-size:20px; color:var(--navy-deep); line-height:1.6}
.st-ev{font-size:15px; line-height:2; color:var(--body-c)}
@media(min-width:700px){.st-timeline li{grid-template-columns:110px 1fr; gap:26px; padding:22px 0}.st-year{font-size:24px}}
.st-cta{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:36px}
.st-btn-ghost{color:#fff; border-color:rgba(255,255,255,.6)}
.st-btn-ghost:hover{background:#fff; color:var(--navy-deep)}
.st-cta-note{text-align:center; font-size:13px; color:rgba(255,255,255,.7); margin-top:18px; line-height:2}
.st-cta-note a{color:#fff; text-decoration:underline}

/* ── トップ：ブログ（最新記事3本・2026-08-17）── */
.blog-cards.cols3{grid-template-columns:1fr}
@media(min-width:700px){.blog-cards.cols3{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.blog-cards.cols3{grid-template-columns:repeat(3,1fr)}}
.blog2 .sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap}
.blog2 .sec-head p{font-size:15px; color:var(--muted); line-height:1.9; margin:0}

/* ── 注文パネルの行（6個／12個／24個セット・2026-08-17）── */
.ord-row{align-items:center}
.ord-price{font-family:"Space Grotesk",monospace; font-size:22px; color:var(--orange-deep); font-weight:700}
.ord-yen{font-size:13px}
.ord-tag{font-size:12px; color:var(--muted); font-weight:700; margin-left:10px}
.ord-tag.ord-free{color:var(--vinegar)}
.ord-sub{display:block; font-size:12.5px; color:var(--muted); font-weight:500; margin-top:2px}
.ord-qty{margin-left:auto; display:flex; align-items:center; gap:0; border:1px solid var(--line); background:#fff; flex:none}
.ord-qty > button{width:48px; height:48px; border:none; background:none; font-size:22px; cursor:pointer; font-family:inherit; color:var(--ink); line-height:1}
.ord-qty > span{min-width:44px; text-align:center; font-family:"Space Grotesk",monospace; font-weight:700; font-size:18px}
.ord-qty-toggle > button{width:auto; height:48px; padding:0 18px; font-size:14px; font-weight:700; color:var(--navy)}
.ord-qty-toggle > span{min-width:52px; border-left:1px solid var(--line); height:48px; display:flex; align-items:center; justify-content:center}
.ord-reco{background:linear-gradient(90deg, rgba(47,109,174,.07), rgba(47,109,174,0) 75%)}
.ord-badge{display:inline-block; background:var(--orange-deep); color:#fff; font-size:11px; font-weight:700; letter-spacing:.08em; padding:3px 9px; border-radius:999px; margin-right:8px; vertical-align:2px}
@media(max-width:640px){.index-row.ord-row{flex-wrap:wrap; gap:10px 16px} .ord-row .index-t{flex:1 1 calc(100% - 3.2em)} .ord-qty{margin-left:calc(2.4em + 16px)}}

/* ── Fluent Forms をサイトの見た目に合わせる（2026-08-17）── */
/* 共通 */
.tc-form .fluentform{margin:0}
.tc-form .fluentform .frm-fluent-form{margin:0}
.tc-form .fluentform .ff-el-group{margin-bottom:18px}
.tc-form .fluentform .ff-el-input--label{margin-bottom:8px}
.tc-form .fluentform .ff-el-input--label label{font-weight:700; color:var(--ink); font-size:15px}
.tc-form .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after{content:"必須"; color:var(--soy); font-size:12px; margin-left:8px; font-weight:700}
.tc-form .fluentform .ff-el-input--label .ff-el-required-asterisk, .tc-form .fluentform .ff-el-is-required label .text-danger{display:none}
.tc-form .fluentform .ff-el-form-control{
  display:block; width:100%; min-height:54px; padding:0 18px; border:1px solid var(--line); border-radius:0;
  background:var(--bg); font-size:16px; font-family:inherit; color:var(--ink); box-shadow:none; line-height:1.6;
}
.tc-form .fluentform textarea.ff-el-form-control{min-height:180px; padding:14px 18px; line-height:1.8}
.tc-form .fluentform select.ff-el-form-control{padding-right:40px}
.tc-form .fluentform .ff-el-form-control:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(47,109,174,.15); background:#fff}
.tc-form .fluentform .ff-el-form-control::placeholder{color:#9AA3AA}
.tc-form .fluentform .ff-el-is-error .ff-el-form-control{border-color:var(--soy)}
.tc-form .fluentform .text-danger, .tc-form .fluentform .error-text{color:var(--soy) !important; font-size:12.5px; margin-top:6px; display:block}
.tc-form .fluentform .ff-btn-submit{
  display:inline-flex !important; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:16px 36px !important; border-radius:999px !important; border:none !important;
  font-weight:700 !important; font-size:15.5px !important; letter-spacing:.05em; cursor:pointer; font-family:inherit;
  background:var(--navy) !important; color:#fff !important; box-shadow:0 14px 28px -14px rgba(18,49,79,.55);
  transition:transform .35s cubic-bezier(.22,.85,.3,1), box-shadow .35s ease, background-color .35s ease;
}
.tc-form .fluentform .ff-btn-submit::after{content:"\2192"; font-family:"Space Grotesk",monospace; font-weight:700; font-size:1.05em; line-height:1}
.tc-form .fluentform .ff-btn-submit:hover{background:var(--navy-deep) !important; transform:translateY(-2px)}
.tc-form .fluentform .ff-btn-submit:disabled{opacity:.6; transform:none}
.tc-form .fluentform .ff-message-success{
  background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:22px 24px; margin-top:8px;
  font-size:15.5px; line-height:2; color:var(--ink); font-weight:600;
}
.tc-form .fluentform .ff-errors-in-stack, .tc-form .fluentform .ff-message-error{color:var(--soy); font-size:13.5px; margin-top:12px}
.tc-form-fallback{font-size:14.5px; line-height:2; color:var(--body-c)}
.tc-form-fallback a{color:var(--navy); text-decoration:underline}
/* お問い合わせページ */
.tc-form-contact .ff_submit_btn_wrapper{margin-top:6px}
/* トップのメール登録（紺の帯・横並び） */
.notify .tc-form{max-width:640px; margin:34px auto 0}
.notify .fluentform .frm-fluent-form > fieldset{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:flex-start}
.notify .fluentform .ff-el-group{margin:0; flex:1 1 240px; text-align:left}
.notify .fluentform .ff-el-group.ff_submit_btn_wrapper{flex:0 0 auto}
.notify .fluentform .ff-el-input--label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.notify .fluentform .ff-el-form-control{min-height:56px; padding:0 22px; border-radius:999px; border:none; background:#fff; color:var(--ink)}
.notify .fluentform .ff-el-form-control:focus{box-shadow:0 0 0 3px rgba(255,255,255,.35); border:none}
.notify .fluentform .ff-btn-submit{background:#fff !important; color:var(--navy-deep) !important; box-shadow:none}
.notify .fluentform .ff-btn-submit:hover{background:#EAF1F8 !important; color:var(--navy-deep) !important}
.notify .fluentform .text-danger, .notify .fluentform .error-text{color:#FFD9A8 !important; text-align:left; padding-left:22px}
.notify .fluentform .ff-message-success{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28); color:#fff; text-align:center; max-width:560px; margin:34px auto 0}
.notify .tc-form-fallback{color:rgba(255,255,255,.85); margin-top:24px}
.notify .tc-form-fallback a{color:#fff}

/* 購入手続き：KOMOJUカードの説明はラベル内に出す・空の説明枠は畳む（2026-08-17） */
.tc-shop .tc-pay-note{display:block; font-size:12.5px; color:var(--muted); font-weight:500; line-height:1.9; margin-top:6px}
.tc-shop .payment_box.payment_method_komoju_credit_card{display:none !important}

/* ── 購入手続き・カートの表示調整（2026-08-17）── */
/* 国は日本だけ（allowed_countries=JP）なので行ごと隠す。住所i18nのJSが行を出し直すので !important＋クラス */
.tc-shop #billing_country_field, .tc-shop #shipping_country_field, .tc-shop .form-row.tc-hide{display:none !important}
/* カート：配送先の文言（「長野県 に配送します」）は出さない＝住所で送料が変わらないため */
.tc-shop .woocommerce-shipping-destination{display:none}
/* カートのサムネイル（仮画像あり） */
.tc-shop table.cart img{width:64px; height:64px; object-fit:cover; border-radius:10px; border:1px solid var(--line-soft)}
/* スマホのカート：右寄せをやめて読み物として整える＋サムネを出す */
@media(max-width:768px){
  .tc-shop table.shop_table_responsive tr.cart_item td.product-name{text-align:left !important}
  .tc-shop table.shop_table_responsive tr.cart_item td.product-name::before{display:none}
  .tc-shop table.shop_table_responsive tr.cart_item td.product-thumbnail{display:block; text-align:left !important; padding-bottom:0}
  .tc-shop table.shop_table_responsive tr.cart_item td.product-thumbnail::before{display:none}
  .tc-shop table.shop_table_responsive tr.cart_item dl.variation{text-align:left}
  .tc-shop table.shop_table_responsive tr.cart_item td.product-remove{text-align:right !important}
}
/* セットの中身（dl.variation）を読みやすく */
.tc-shop dl.variation{margin:6px 0 0; font-size:12.5px; color:var(--muted); line-height:1.9}
.tc-shop dl.variation dt{font-weight:700; float:left; margin-right:6px; clear:both}
.tc-shop dl.variation dd{margin:0}

/* ============================================================
   2026-08-23 スマホの横はみ出し対策
   本文中の画像は inline の max-width を min(NNNpx,100%) にして、
   親（.wrap＝100%-48px／.ed-item の本文列）を突き抜けないようにした。
   .ed-item は 1fr 列の下限が min-content（＝画像の実幅）になるため、
   minmax(0,1fr) にして縮めるようにする。PCの見た目は変わらない。
   ============================================================ */
.ed-item{grid-template-columns:auto minmax(0,1fr)}


/* 本文中リンク（歩みの年表・一覧行）— 2026-09-03 追加。
   全体は a{color:inherit;text-decoration:none} なので、明示しないとリンクに見えない */
.st-ev a, .index-d a, .ed-item p a, .faq-body a, .u-link{color:var(--navy); text-decoration:underline; text-underline-offset:3px; font-weight:700}
.st-ev a:hover, .index-d a:hover, .ed-item p a:hover, .faq-body a:hover, .u-link:hover{color:var(--navy-deep)}


/* ===== index.html inline <style>（FV・トップ専用セクション） ===== */

/* ============ sample17系：静けさ・余白・細い罫線 ============ */
.sec{padding:104px 0}
@media(min-width:900px){.sec{padding:150px 0}}
.sec-head{margin-bottom:56px}

/* ── FV：全幅リッチアニメーション ── */
.fv3{
  position:relative; overflow:hidden; background:var(--navy-night);
  min-height:82vh; display:flex; flex-direction:column; justify-content:center; align-items:center;
}
@media(min-width:900px){.fv3{min-height:92vh}}
.fv3-bg{position:absolute; inset:0; overflow:hidden}
.fv3-bg img{
  width:100%; height:115%; object-fit:cover; will-change:transform;
  animation:fv3-ken 16s cubic-bezier(.19,.6,.32,1) forwards;
}
@keyframes fv3-ken{from{transform:scale(1.14) translateY(-1.5%)}to{transform:scale(1.02) translateY(0)}}
.fv3-shade{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(18,49,79,.84) 0%, rgba(18,49,79,.38) 32%, rgba(18,49,79,.02) 56%),
    linear-gradient(270deg, rgba(18,49,79,.5) 0%, rgba(18,49,79,0) 32%),
    linear-gradient(180deg, rgba(18,49,79,.18) 0, rgba(18,49,79,0) 22%);
}
.fv3-in{
  position:relative; z-index:3; width:100%; min-height:inherit; padding:120px clamp(24px,4.5vw,72px) 72px; color:#fff;
  display:flex; align-items:stretch; justify-content:space-between; gap:28px;
}
.fv3-left{max-width:520px; align-self:flex-end}
.fv3-title{opacity:0; animation:fv3-fade .9s ease .25s forwards; margin:0}
.fv3-title .tn{
  display:block; font-family:"Space Grotesk","Zen Kaku Gothic New",sans-serif; font-weight:700;
  font-size:38px; letter-spacing:.02em; color:#fff; text-shadow:0 2px 16px rgba(18,49,79,.75); line-height:1.2;
}
.fv3-title .tn b{color:var(--orange); font-weight:700}
.fv3-logo{width:420px; height:auto; filter:drop-shadow(0 2px 14px rgba(18,49,79,.85))}
.fv3-title .td{
  display:block; margin-top:10px; font-size:14.5px; font-weight:700; letter-spacing:.14em;
  color:rgba(255,255,255,.92); text-shadow:0 2px 10px rgba(18,49,79,.75);
}
.fv3-v{
  margin:0; writing-mode:vertical-rl; color:#fff; font-weight:800;
  font-size:min(clamp(36px,4.6vw,58px), calc((92vh - 250px) / 9.6)); letter-spacing:.14em; line-height:1.22; flex:none; align-self:center;
}
.fv3-v .vl{display:block; overflow:hidden; padding:.08em; margin:-.08em}
.fv3-v .vl + .vl{margin-right:.5em}
.fv3-v .vl-in{
  display:inline-block; transform:translateY(-108%);
  animation:fv3-vrise .95s cubic-bezier(.22,.85,.3,1) forwards,
            fv3-vmark .9s cubic-bezier(.5,0,.2,1) forwards;
  text-shadow:0 4px 26px rgba(18,49,79,.6);
  background:linear-gradient(to left, rgba(242,183,5,.85) 34%, transparent 34%) no-repeat right top;
  background-size:100% 0%;
  padding:.1em .04em;
}
.fv3-v .vl:nth-child(1) .vl-in{animation-delay:.45s,1.6s}
.fv3-v .vl:nth-child(2) .vl-in{animation-delay:.62s,1.85s}
.fv3-v .vl:nth-child(3) .vl-in{animation-delay:.79s,2.1s}
@keyframes fv3-vrise{to{transform:translateY(0)}}
@keyframes fv3-vmark{to{background-size:100% 100%}}
@media(max-width:700px){
  .fv3-in{flex-direction:column; align-items:stretch; padding:104px 22px 84px; gap:0}
  .fv3-left{display:contents}
  .fv3-title{order:1}
  .fv3-title .tn{font-size:29px}
  .fv3-logo{width:340px}
  .fv3-v{order:2; align-self:flex-end; margin:26px 2px 6px 0; font-size:min(31px, calc((92vh - 320px) / 9.6)); letter-spacing:.08em}
  .fv3-sub{order:3; margin-top:20px}
  .fv3-hint{order:4}
  .fv-ctas{order:5}
  .fv3 .fv-ctas .btn{min-height:50px; padding:14px 26px; font-size:14px}
  .fv3-scroll{order:6; margin-top:34px}
}
.fv3-sub{
  margin-top:32px; font-family:"Shippori Mincho",serif; font-size:17px; font-weight:600;
  color:rgba(255,255,255,.94); text-shadow:0 2px 14px rgba(18,49,79,.7); letter-spacing:.05em;
  opacity:0; animation:fv3-fade 1s ease 1.5s forwards;
}
@media(min-width:900px){.fv3-sub{font-size:20px}}
.fv3 .fv-ctas{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-top:36px;
  opacity:0; transform:translateY(14px);
  animation:fv3-up .8s cubic-bezier(.22,.85,.3,1) 1.95s forwards;
}
.fv3-scroll{
  margin-top:46px; display:flex; align-items:center; gap:14px;
  font-family:"Space Grotesk",monospace; font-size:11px; letter-spacing:.3em;
  color:rgba(255,255,255,.75);
  opacity:0; animation:fv3-fade 1s ease 2.4s forwards;
}
.fv3-scroll .sbar{position:relative; width:72px; height:2px; background:rgba(255,255,255,.25); overflow:hidden}
.fv3-scroll .sbar::after{
  content:""; position:absolute; left:0; top:0; height:100%; width:34%;
  background:var(--oil); animation:fv3-slide 1.8s cubic-bezier(.6,0,.3,1) 2.4s infinite;
}
@keyframes fv3-slide{0%{left:-34%}60%,100%{left:100%}}
.fv3-lens{
  position:absolute; width:240px; height:240px; border-radius:50%;
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 12px 44px rgba(18,49,79,.55), inset 0 0 0 1px rgba(255,255,255,.18);
  display:none; pointer-events:none; z-index:2;
  background-repeat:no-repeat; background-image:url('../images/fv_drawer_hd.jpg');
}
@media(pointer:coarse){.fv3-lens{display:none !important}}
.fv3-hint{
  margin-top:14px; font-size:13.5px; letter-spacing:.08em; color:rgba(255,255,255,.78);
  text-shadow:0 2px 10px rgba(18,49,79,.7);
  opacity:0; animation:fv3-fade 1s ease 1.75s forwards;
  display:none;
}
@media(pointer:fine){.fv3-hint{display:block}}
@keyframes fv3-rise{to{transform:translateY(0)}}
@keyframes fv3-fade{to{opacity:1}}
@keyframes fv3-up{to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){
  .fv3-bg img,.fv3-title,.fv3-v .vl-in,.fv3-sub,.fv3-hint,.fv3 .fv-ctas,.fv3-scroll,.fv3-scroll .sbar::after{
    animation:none; opacity:1; transform:none; background-size:100% 100%;
  }
}
/* 信頼チップ：FV直下の静かな一列 */
.proof2{margin-top:72px; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.proof2-in{
  width:min(1180px,calc(100% - 48px)); margin:0 auto;
  display:flex; flex-wrap:wrap;
}
.proof2-item{
  flex:1 1 220px; padding:26px 26px 26px 0; margin-right:26px;
  border-right:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:3px;
}
.proof2-item:last-child{border-right:none; margin-right:0}
.proof2-num{font-family:"Space Grotesk",monospace; font-weight:700; font-size:17.5px; color:var(--ink)}
.proof2-label{font-size:12.5px; color:var(--muted)}
@media(max-width:760px){
  .proof2-item{flex:1 1 100%; border-right:none; margin-right:0; padding:16px 0; border-bottom:1px solid var(--line-soft)}
  .proof2-item:last-child{border-bottom:none}
}

/* ── 答え：静かな中央ブロック ── */
.answer2{text-align:center}
.answer2 .wrap{max-width:820px}
.answer2 h2{font-size:26px; line-height:2}
.answer2 h2 .strong{display:block; font-size:1.32em; margin-bottom:6px}
.answer2 h2 .strong .acc{color:var(--orange-deep)}
@media(min-width:900px){.answer2 h2{font-size:33px}}
.cap-row{display:flex; gap:28px; justify-content:center; flex-wrap:wrap}
@media(max-width:640px){
  .cap-row{gap:18px 10px}
  .cap-row .cap-item{max-width:60px}
  .cap-row .cap-l{width:56px; height:56px; font-size:23px; border-width:5px}
  .cap-row .cap-name{margin-top:8px; font-size:11px; line-height:1.5; word-break:auto-phrase}
}
@media(max-width:430px){
  .cap-row{gap:20px 8px}
  .cap-row .cap-item{flex:0 0 calc(33.333% - 6px); max-width:none}
  .cap-row .cap-l{width:54px; height:54px; font-size:22px}
  .cap-row .cap-name{font-size:11px}
}
.answer2 .cap-row{margin-top:44px}
.cap-name{margin-top:10px; font-size:13.5px; font-weight:700}
.cap-item{display:flex; flex-direction:column; align-items:center}
.answer2 .rule-en{
  margin-top:52px; font-family:"Space Grotesk",monospace; font-size:11.5px;
  letter-spacing:.3em; color:var(--muted);
  display:flex; align-items:center; justify-content:center; gap:18px;
}
.answer2 .rule-en::before,.answer2 .rule-en::after{content:""; width:56px; height:1px; background:var(--line)}
.tv-embed{margin-top:44px}
.tv-note{font-family:"Shippori Mincho",serif; font-size:16.5px; font-weight:700; color:var(--ink); margin-bottom:16px}
.tv-frame{position:relative; max-width:720px; margin:0 auto; aspect-ratio:16/9; border-radius:14px; overflow:hidden; box-shadow:0 18px 50px rgba(31,46,58,.16); background:#000}
.tv-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ── リード：縦マーキー×手紙（sec-gallery-08型） ── */
.lead2{background:var(--soft); position:relative; overflow:hidden}
.lead2 .wrap{max-width:1140px}
.lead-grid{display:grid; gap:44px; grid-template-columns:1fr; align-items:center}
@media(min-width:880px){.lead-grid{grid-template-columns:.86fr 1.14fr; gap:76px}}
.lead-flow{
  display:grid; grid-template-columns:1fr; height:min(72vh,620px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
}
.lead-flow .vcol{overflow:hidden}
.lead-flow .vtrack{display:flex; flex-direction:column; will-change:transform; animation:lead-up 40s linear infinite}
.lead-flow .vcol.rev .vtrack{animation:lead-down 36s linear infinite}
@keyframes lead-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes lead-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.lead-flow .vtrack img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; flex:none; border-radius:12px; margin-bottom:16px}
.lead-flow:hover .vtrack{animation-play-state:paused}
@media(max-width:879px){.lead-flow{order:2; height:46vh}}
@media (prefers-reduced-motion: reduce){.lead-flow .vtrack,.lead-flow .vcol.rev .vtrack{animation:none}}
.lead2 .lead-copy{font-family:"Shippori Mincho",serif; font-size:16.5px; line-height:2.55; color:var(--ink); max-width:34em}
.lead2 .lead-copy p{margin-bottom:2em}
.lead2 .beat{color:var(--body-c)}
.lead2 .lead-final{
  font-size:19px; font-weight:700; line-height:2.3; color:var(--ink);
  padding-top:1.8em; border-top:1px solid rgba(31,46,58,.18); margin-bottom:0;
}
@media(min-width:900px){.lead2 .lead-final{font-size:22px}}

/* ── 結果：WORRIES型（sample17 c-intro） ── */
.result2{position:relative; padding:0}
.res-split{display:grid; grid-template-columns:1.05fr 1fr; align-items:stretch; min-height:min(78vh,780px)}
.res-photo{position:relative; overflow:hidden; border-radius:18px; margin:clamp(28px,4vw,56px)}
.res-photo::after{content:""; position:absolute; inset:14px; border:1px solid rgba(240,138,60,.6); pointer-events:none; z-index:2; border-radius:12px}
.res-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.res-num{position:absolute; top:18px; left:18px; z-index:3; font-family:"Space Grotesk",monospace; font-size:11px; letter-spacing:.2em; color:#fff; background:var(--orange-deep); padding:6px 12px; border-radius:3px}
.res-copy{display:flex; flex-direction:column; justify-content:center; padding:80px clamp(28px,4vw,64px); position:relative}
.res-mark{font-family:"Space Grotesk",monospace; font-weight:700; letter-spacing:.2em; color:var(--orange-deep); font-size:12px}
.res-catch{font-family:"Shippori Mincho",serif; font-weight:700; font-size:clamp(23px,2.6vw,33px); line-height:1.7; color:var(--ink); margin:22px 0 24px; letter-spacing:.03em}
.res-sub{color:var(--muted); font-size:14.5px; max-width:30em; margin:0 0 26px}
.res-list{display:grid; border-top:1px solid var(--line); margin:0; padding:0; list-style:none}
.res-item{display:grid; grid-template-columns:38px 1fr; gap:16px; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--line)}
.res-item .ck{font-family:"Space Grotesk",monospace; font-size:13px; color:var(--orange-deep)}
.res-item p{margin:0; font-family:"Shippori Mincho",serif; font-size:clamp(15.5px,1.7vw,18.5px); font-weight:600; line-height:2; color:var(--ink); transition:color .6s ease}
.j .res-item:not(.is-lit) p{color:rgba(31,46,58,.26)}
.res-closer{margin-top:28px; font-family:"Shippori Mincho",serif; font-size:clamp(17px,2vw,22px); font-weight:700; line-height:1.8; color:var(--ink)}
.res-closer .hl{background:linear-gradient(transparent 62%, rgba(242,183,5,.55) 62%); padding:0 .05em}
@media(max-width:860px){
  .res-split{grid-template-columns:1fr; min-height:0}
  .res-photo{aspect-ratio:4/3; border-radius:14px; margin:22px}
  .res-photo::after{inset:10px; border-radius:9px}
  .res-copy{padding:56px 28px 64px}
}
@media (prefers-reduced-motion: reduce){
  .j .res-item:not(.is-lit) p{color:var(--ink)}
}

/* ── 実証：POINT型（sample17 c-reasons） ── */
.why2{background:var(--soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.why2 .wrap{max-width:1080px}
.wr-head{text-align:center; margin-bottom:64px}
.wr-head .eyebrow{justify-content:center}
.wr-head h2{font-size:clamp(26px,4vw,44px); line-height:1.5}
.wr-head h2 .mk2{background:linear-gradient(transparent 62%, rgba(242,183,5,.55) 62%); padding:0 .04em}
.wr-list{display:grid; gap:72px}
.wr-row{display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center}
.wr-row:nth-child(even) .wr-pic{order:2}
.wr-row:nth-child(even) .wr-bd{order:1}
.wr-pic{position:relative; z-index:1}
.wr-pic img{width:100%; aspect-ratio:1/1; height:auto; object-fit:cover; border-radius:14px; display:block}
.wr-pic img.contain{object-fit:contain; background:#fff; border:1px solid var(--line-soft)}
.wr-bd{position:relative; z-index:2}
.wr-band{
  display:inline-flex; align-items:center; gap:14px; position:relative; z-index:3;
  margin-left:-100px; background:linear-gradient(90deg,var(--navy),rgba(47,109,174,0));
  color:#fff; padding:12px 80px 12px 22px; border-radius:4px;
  box-shadow:0 14px 28px -14px rgba(18,49,79,.45);
}
.wr-row:nth-child(even) .wr-band{margin-left:0; margin-right:-100px; flex-direction:row-reverse; padding:12px 22px 12px 80px; background:linear-gradient(270deg,var(--navy),rgba(47,109,174,0))}
.wr-band .lab{font-family:"Space Grotesk",monospace; font-size:13px; letter-spacing:.16em}
.wr-band .bn{position:absolute; right:8px; top:-14px; font-family:"Shippori Mincho",serif; font-weight:700; font-size:56px; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.65); line-height:1}
.wr-row:nth-child(even) .wr-band .bn{right:auto; left:8px}
.wr-bd h3{font-family:"Shippori Mincho",serif; font-weight:700; font-size:clamp(20px,2.6vw,28px); line-height:1.7; margin:22px 0 12px}
.wr-bd h3 .ac{color:var(--orange-deep)}
.wr-bd p{color:var(--body-c); font-size:14.5px; line-height:2.1; margin:0 0 14px}
.wr-vs{display:inline-block; font-family:"Space Grotesk",monospace; font-size:11px; letter-spacing:.06em; color:var(--orange-deep); border:1px solid var(--orange); padding:5px 13px; background:rgba(255,255,255,.5)}
/* 6色になったので3列×2段（PC・スマホ共通）*/
.color-caps{display:flex; flex-wrap:wrap; gap:18px 12px; margin:18px 0 14px}
.color-caps .cap-item{flex:0 0 calc(33.333% - 8px); font-size:12.5px; font-weight:700; gap:8px; text-align:center; line-height:1.55; word-break:auto-phrase}
@media(max-width:640px){.color-caps{gap:16px 8px} .color-caps .cap-item{font-size:11.5px}}
@media(max-width:820px){
  .wr-row,.wr-row:nth-child(even){grid-template-columns:1fr; gap:24px}
  .wr-row:nth-child(even) .wr-pic,.wr-row:nth-child(even) .wr-bd{order:0}
  .wr-band,.wr-row:nth-child(even) .wr-band{margin-left:0; margin-right:0}
  .wr-pic img{aspect-ratio:4/3}
}

/* ── 41種：ダイナミック斜め（sample17 c-craft型） ── */
.lineup2{position:relative; overflow:hidden; background:var(--paper); padding:0}
.lu-dyn{position:relative; display:grid; grid-template-columns:1.02fr 1fr; align-items:center; min-height:min(76vh,760px)}
.lu-left{padding:96px clamp(28px,5vw,72px); position:relative; z-index:2; max-width:660px; width:100%; justify-self:end}
.lu-dots{display:flex; gap:11px; margin-bottom:22px}
.lu-dots i{width:12px; height:12px; border-radius:50%}
.lu-dots i:nth-child(1){background:var(--oil)}
.lu-dots i:nth-child(2){background:var(--soy)}
.lu-dots i:nth-child(3){background:var(--vinegar)}
.lu-dots i:nth-child(4){background:var(--orange)}
.lu-h2{font-family:"Shippori Mincho",serif; font-weight:700; font-size:clamp(30px,4.4vw,50px); color:var(--ink); margin:0 0 28px; line-height:1.4; letter-spacing:.03em}
.lu-h2 .ac{color:var(--orange-deep)}
.lu-eyebrow{font-family:"Space Grotesk",monospace; letter-spacing:.22em; color:var(--orange-deep); font-size:12.5px; font-weight:700; margin:12px 0 26px}
.lu-fill{display:inline-block; background:var(--navy); color:#fff; font-family:"Shippori Mincho",serif; font-weight:700; font-size:clamp(16px,2.2vw,22px); padding:.3em .6em; border-radius:8px; margin-bottom:8px}
.j .lu-fills .lu-fill{clip-path:inset(0 100% 0 0 round 8px)}
.j .lu-fills.done .lu-fill{clip-path:inset(0 0 0 0 round 8px); transition:clip-path 1s cubic-bezier(.7,0,.25,1)}
.j .lu-fills.done .lu-fill:nth-of-type(2){transition-delay:.18s}
.j .lu-fills.done .lu-fill:nth-of-type(3){transition-delay:.36s}
.lu-body{color:var(--body-c); font-size:15px; margin:22px 0 0; max-width:30em; line-height:2.1}
.lu-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:18px 22px; margin-top:30px; max-width:560px}
.lu-scell{border-top:1px solid var(--line); padding-top:12px; min-width:0}
.lu-scell b{font-family:"Space Grotesk",monospace; font-weight:700; font-size:clamp(30px,3.4vw,44px); color:var(--orange-deep); line-height:.9; display:block}
.lu-scell b small{font-size:.45em; letter-spacing:.05em}
.lu-scell span{display:block; margin-top:8px; font-size:12px; line-height:1.7; color:var(--muted)}
@media(max-width:560px){.lu-stats{grid-template-columns:1fr 1fr}}
.lu-right{position:absolute; right:0; top:0; bottom:0; width:50%; clip-path:polygon(20% 0,100% 0,100% 100%,0 100%); overflow:hidden; z-index:1}
.lu-right img{width:100%; height:100%; object-fit:cover}
.lu-right::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(18,49,79,.36),rgba(18,49,79,.06))}
.lu-cut{position:absolute; left:51%; bottom:7%; width:min(320px,28vw); height:auto; border-radius:14px; border:6px solid var(--paper); box-shadow:0 26px 50px -22px rgba(18,49,79,.45); z-index:3; background:#fff}
@media(max-width:880px){
  .lu-dyn{grid-template-columns:1fr; min-height:0}
  .lu-right{position:relative; width:100%; height:56vw; clip-path:polygon(0 8%,100% 0,100% 100%,0 100%)}
  .lu-left{padding:64px 24px 44px; justify-self:start}
  .lu-cut{width:200px; left:6%; bottom:4%}
}
@media (prefers-reduced-motion: reduce){.j .lu-fills .lu-fill{clip-path:inset(0 0 0 0 round 8px); transition:none}}

/* ── シーン ── */
.scene2 .wrap{max-width:980px}

/* ── 開発者：明るい間 ── */
.story2{background:var(--paper); position:relative; overflow:hidden}
.story2 .deco-ring{
  position:absolute; right:-140px; top:120px; width:380px; height:380px;
  border:1.5px solid var(--line-soft); border-radius:50%;
}
.story2 .wrap{max-width:1040px}
.story-grid{display:grid; gap:48px; grid-template-columns:1fr; align-items:start}
@media(min-width:940px){.story-grid{grid-template-columns:.6fr 1.4fr; gap:88px}}
.story-photo{max-width:300px}
.story-photo img{border-radius:16px; box-shadow:0 18px 50px rgba(31,46,58,.14)}
.story-photo .photo-cap{font-size:12.5px; color:var(--muted); margin-top:12px; line-height:1.9}
.story-txt{font-family:"Shippori Mincho",serif; font-size:17px; line-height:2.6; max-width:36em; color:var(--ink)}
.story-txt p{margin-bottom:1.9em}
.story-close{font-size:20px; font-weight:700}
.story-career{
  margin-top:10px; padding-top:20px; border-top:1px solid var(--line-soft);
  font-family:"Zen Kaku Gothic New",sans-serif; font-size:13px; color:var(--muted);
}

/* ── 声：カードマーキー2段（sec-voice-03型・仮） ── */
.voice2{overflow:hidden}
.voice2 .wrap{max-width:760px; text-align:center}
.v-marquee{
  position:relative; margin-top:6px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.v-rows{display:grid; gap:22px}
.v-row{display:flex; width:max-content}
.v-row.r1{animation:vflow1 42s linear infinite}
.v-row.r2{animation:vflow2 48s linear infinite}
@keyframes vflow1{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes vflow2{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.v-marquee:hover .v-row{animation-play-state:paused}
.vchip{flex:0 0 auto; width:340px; margin-right:22px; background:var(--paper); border:1px solid var(--line-soft); border-radius:14px; padding:22px 26px 20px; text-align:left}
.vchip .qm{font-family:"Shippori Mincho",serif; font-size:34px; line-height:1; color:var(--orange); display:block}
.vchip p{margin:8px 0 14px; font-size:14.5px; line-height:1.9; color:var(--muted); min-height:4em}
.vchip .who{display:flex; align-items:center; gap:10px; font-family:"Space Grotesk",monospace; font-size:11px; letter-spacing:.14em; color:var(--muted)}
.vchip .who::before{content:""; width:26px; height:1px; background:var(--orange)}
.voice-note{margin-top:36px; font-size:13.5px; color:var(--muted)}
.voice-note .serif{display:block; font-family:"Shippori Mincho",serif; font-size:17px; color:var(--ink); line-height:2.1; margin-bottom:10px}
@media(max-width:680px){.vchip{width:280px}}
@media (prefers-reduced-motion: reduce){.v-row.r1,.v-row.r2{animation:none}}

/* ── メディア ── */
.media2 .wrap{max-width:900px}

/* ── FAQ：白カードのアコーディオン ── */
.faq2 .wrap{max-width:860px}
.faq2 .faq-item{
  border:1px solid var(--line-soft); border-radius:12px; background:var(--paper);
  margin-bottom:14px;
}
.faq2 .faq-item:last-of-type{border-bottom:1px solid var(--line-soft)}
.faq2 .faq-item summary{padding:22px 24px}
.faq2 .faq-a{padding:0 24px 24px 0; margin-left:24px}

/* ── クロージング：静かな山場 ── */
.closing{background:var(--band-warm); text-align:center}
.closing-in{width:min(760px,calc(100% - 48px)); margin:0 auto; padding:130px 0}
.closing h2{color:var(--ink); font-size:29px; letter-spacing:.08em; line-height:2}
@media(min-width:900px){.closing h2{font-size:40px}}
.closing .body{
  margin:44px auto 0; font-size:16.5px; line-height:2.5; color:var(--body-c);
  font-family:"Shippori Mincho",serif; max-width:32em; text-align:left;
}
.closing .btn{margin-top:52px; background:var(--navy); color:#fff}
.closing .btn:hover{background:var(--navy-deep)}

/* ── 追伸：手紙×写真（sec-cta-13型） ── */
.ps2{background:var(--bg); overflow:hidden; padding-bottom:0}
.ps2 .wrap{max-width:1080px}
.ps-grid{display:grid; grid-template-columns:1fr; gap:52px; align-items:center}
@media(min-width:980px){.ps-grid{grid-template-columns:.82fr 1.18fr; gap:clamp(40px,6vw,84px)}}
.ps-photo{position:relative; justify-self:center; transform:rotate(-2.4deg); background:var(--paper); border:1px solid var(--line-soft); padding:12px 12px 16px; box-shadow:0 34px 66px -44px rgba(31,46,58,.55); width:min(320px,80%); margin:0}
.ps-photo img{display:block; width:100%; height:auto}
.ps-photo figcaption{text-align:center; font-family:"Shippori Mincho",serif; font-size:13.5px; color:var(--muted); padding-top:12px; letter-spacing:.08em}
.ps-photo::before{content:""; position:absolute; top:-14px; left:50%; transform:translateX(-50%) rotate(1.5deg); width:96px; height:26px; background:rgba(242,183,5,.3); border-left:1px dashed rgba(183,68,11,.35); border-right:1px dashed rgba(183,68,11,.35)}
.ps-eyebrow{font-family:"Shippori Mincho",serif; font-size:14px; letter-spacing:.3em; color:var(--orange-deep); font-weight:700}
.ps-h2{font-family:"Shippori Mincho",serif; font-weight:700; font-size:clamp(26px,4vw,42px); line-height:1.6; margin:16px 0 0}
.ps-u{position:relative; z-index:0; white-space:nowrap}
.ps-u i{position:absolute; left:0; right:0; bottom:5px; height:.32em; background:rgba(240,138,60,.28); z-index:-1; display:block; transform-origin:left center}
.j .ps-copy.rv .ps-u i{transform:scaleX(0); transition:transform .9s cubic-bezier(.5,0,.2,1) .55s}
.j .ps-copy.rv.done .ps-u i{transform:scaleX(1)}
.ps-body{font-family:"Shippori Mincho",serif; color:var(--ink); font-size:15.5px; line-height:2.4; margin:24px 0 0; max-width:38em}
.ps-body p{margin:0 0 1.6em}
.ps-body p:last-child{margin-bottom:0}
.ps-actions{margin-top:34px}
.ps-strip{margin-top:80px; border-top:1px solid var(--line-soft); background:var(--soft)}
.ps-strip-in{width:min(1080px,calc(100% - 56px)); margin:0 auto; display:grid; grid-template-columns:1fr; gap:10px; padding:24px 0}
@media(min-width:720px){.ps-strip-in{grid-template-columns:repeat(3,1fr); gap:18px; padding:26px 0}}
.ps-strip-item{display:flex; align-items:center; gap:12px; font-size:13.5px; font-weight:500; margin:0}
@media(min-width:720px){.ps-strip-item{justify-content:center}}
.ps-strip-item svg{width:18px; height:18px; flex:0 0 auto}
.ps-strip-item b{font-weight:700}
@media(max-width:620px){.ps-u{white-space:normal}}
@media (prefers-reduced-motion: reduce){.j .ps-copy.rv .ps-u i{transform:scaleX(1); transition:none}}

/* ── メール登録 ── */
.notify{background:var(--navy-night); color:#fff}
.notify-in{width:min(860px,calc(100% - 48px)); margin:0 auto; padding:110px 0; text-align:center}
.notify h2{color:#fff; font-size:25px; margin:16px 0 14px}
@media(min-width:900px){.notify h2{font-size:32px}}
.notify p{color:rgba(255,255,255,.85); font-size:15px}
.notify-form{margin:34px auto 0; display:flex; gap:12px; flex-wrap:wrap; max-width:560px; justify-content:center}
.notify .btn-primary{background:#fff; color:var(--navy-deep); box-shadow:none}
.notify .btn-primary:hover{background:#EAF1F8; color:var(--navy-deep)}
.notify-form input[type=email]{
  flex:1 1 280px; min-height:56px; padding:0 22px; border-radius:999px;
  border:none; font-size:16px; font-family:inherit;
}
.notify-note{font-size:12px; color:rgba(255,255,255,.72); margin-top:16px}

/* ── 不便事例カード ── */
.trouble2 .wrap{max-width:1080px}
.trouble-grid{display:grid; gap:22px; grid-template-columns:1fr}
@media(min-width:820px){.trouble-grid{grid-template-columns:repeat(3,1fr)}}
.t-card{background:var(--paper); border:1px solid var(--line-soft); border-radius:16px; overflow:hidden}
.t-card img{aspect-ratio:4/3; object-fit:cover; width:100%}
.t-card .t-body{padding:22px 24px 26px}
.t-card h3{font-size:17.5px; line-height:1.8; margin-bottom:8px}
.t-card p{font-size:14px; color:var(--muted); line-height:1.9}
/* ── 使用シーン：横流れマーキー（sample17 c-gallery型） ── */
.scene2{overflow:hidden}
.scene-marquee{
  overflow:hidden; width:100%; margin-top:10px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.scene-track{display:flex; width:max-content; will-change:transform; animation:scene-flow 46s linear infinite}
@keyframes scene-flow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.scene-marquee:hover .scene-track{animation-play-state:paused}
.scene-track figure{margin:0 18px 0 0; flex:0 0 auto; position:relative; overflow:hidden; border-radius:12px}
.scene-track img{width:340px; height:230px; object-fit:cover; display:block}
.scene-track figcaption{
  position:absolute; left:0; bottom:0; background:rgba(18,49,79,.82); color:#fff;
  font-size:11.5px; letter-spacing:.06em; padding:6px 13px; border-radius:0 10px 0 0;
}
@media(max-width:680px){.scene-track img{width:240px; height:160px}}
@media (prefers-reduced-motion: reduce){.scene-track{animation:none}}
.scene-note{width:min(1140px,calc(100% - 48px)); margin:14px auto 0; text-align:right; color:var(--muted); font-size:12px}