/* 清流デザイン（:8093/seiryu プロト由来）本体CSS */
:root{--primary:#5db078;--primaryd:#3f8f5c;--accent:#7ec8e3;--accentbg:#eaf6fb;--ink:#2c3531;--sub:#6b7771;--line:#e7ecea;--surface:#ffffff;--band:#f6fbf9;--headf:'Noto Sans JP',sans-serif;--headw:400;--headls:.14em;--radius:6px;--shadow:0 12px 30px rgba(60,120,90,.08);--navbg:rgba(255,255,255,.9);--footbg:#26302b}

*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:'Noto Sans JP',sans-serif;color:var(--ink);background:var(--surface);
  line-height:1.9;letter-spacing:.02em;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--headf);font-weight:var(--headw);letter-spacing:var(--headls);line-height:1.45;margin:0}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 1.1rem}
.eyebrow{color:var(--primary);font-size:.74rem;letter-spacing:.28em;font-weight:600;margin:0 0 .8rem}
.btn{display:inline-block;font-size:.9rem;letter-spacing:.06em;cursor:pointer;transition:.25s;
  border:1px solid var(--primary);color:var(--primary);background:transparent;padding:.72rem 1.8rem;border-radius:999px}
.btn:hover{background:var(--primary);color:#fff}
.btn-fill{background:var(--primary);color:#fff}.btn-fill:hover{filter:brightness(1.08)}
[data-r="2px"] .btn,[data-r="0px"] .btn{border-radius:var(--radius)}
[data-t="wamodern"] .btn{border-color:var(--accent);color:var(--primaryd)}[data-t="wamodern"] .btn:hover{background:var(--accent);color:#fff}
[data-t="dark"] .btn{border-color:var(--accent);color:var(--accent)}[data-t="dark"] .btn:hover{background:var(--accent);color:#15140f}
[data-t="minimal"] .btn{border-radius:0}
.center{text-align:center}

/* switch bar */
.themebar{position:sticky;top:0;z-index:130;background:#20241f;color:#eef2ea;font-size:.8rem;
  display:flex;align-items:center;justify-content:center;gap:.4rem;flex-wrap:wrap;padding:.45rem .6rem;border-bottom:1px solid #333}
.themebar b{opacity:.85;font-weight:400;margin-right:.35rem;letter-spacing:.05em}
.tsw{border:1px solid #5a5f56;color:#eef2ea;border-radius:999px;padding:.24rem .8rem;font-size:.8rem;transition:.2s}
.tsw:hover{border-color:#94cb61}.tsw.on{background:#5db078;border-color:#5db078;color:#fff}

/* header */
.hdr{position:sticky;top:0;z-index:110;background:var(--navbg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;max-width:1320px;margin:0 auto;padding:1.2rem 2.4rem;gap:1.4rem}
.brand img{height:50px}
.nav{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap}
.navlink{font-size:.85rem;color:var(--ink);padding:.2rem 0;white-space:nowrap}
.navlink:hover{color:var(--primary)}.navlink.active{color:var(--primary);font-weight:700}
.nav-r{display:flex;gap:.55rem;align-items:center}
.nav-r a{font-size:.8rem;border:1px solid var(--line);border-radius:999px;padding:.32rem .85rem;white-space:nowrap}
.nav-r a.cart{background:var(--primary);color:#fff;border-color:var(--primary)}
.navtoggle{display:none;border:0;background:none;font-size:1.5rem;color:var(--ink);cursor:pointer}
@media(max-width:1040px){.nav,.nav-r{display:none}.navtoggle{display:block}
  .hdr.open .nav{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--surface);flex-direction:column;
    align-items:flex-start;padding:1rem 1.4rem;border-bottom:1px solid var(--line);gap:.9rem}
  .hdr.open .nav-r{display:flex;position:absolute;top:100%;right:1rem;margin-top:.2rem}}

/* HERO variants */
.hero{position:relative;color:#fff}
.hfull .bg,.hmin .bg,.hdark .bg{width:100%;height:78vh;min-height:460px;object-fit:cover}
.hfull .bg{filter:brightness(1)}.hdark .bg{filter:brightness(.5)}
.hdark::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.05) 55%,rgba(0,0,0,.25))}
.hfull .hcap{background:radial-gradient(ellipse 40% 84% at 50% 49%,rgba(28,36,32,.5),rgba(28,36,32,.26) 50%,rgba(28,36,32,0) 80%)}
.hfull .hcap h1{text-shadow:0 1px 10px rgba(0,0,0,.5)}
.hfull .hcap p{text-shadow:0 1px 7px rgba(0,0,0,.55)}
.hfull .hcap .eyebrow{color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.5)}
@media(max-width:720px){.hfull .hcap{background:radial-gradient(ellipse 90% 80% at 50% 48%,rgba(28,36,32,.5),rgba(28,36,32,.3) 55%,rgba(28,36,32,0) 84%)}}
.hcap{position:absolute;left:0;right:0;bottom:16%;z-index:2;text-align:center;padding:0 1.2rem}
.hcap h1{font-size:clamp(1.9rem,4.4vw,3.3rem);color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hcap p{color:#fff;opacity:.95;margin:1rem auto 1.6rem;max-width:640px;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hcap .btn{border-color:#fff;color:#fff}.hcap .btn:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.hcap .btn-fill{background:var(--primary);border-color:var(--primary);color:#fff}
[data-t="dark"] .hcap .eyebrow{color:var(--accent)}[data-t="dark"] .hcap .btn-fill{background:var(--accent);border-color:var(--accent);color:#15140f}
/* split (wakaba) */
.hsplit{display:grid;grid-template-columns:1.08fr .92fr;min-height:74vh;color:var(--ink)}
.hsplit .hmedia img{width:100%;height:100%;object-fit:cover;min-height:420px}
.hsplit .hcopy{display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,6vw,5rem);background:var(--band)}
.hsplit h1{font-size:clamp(1.9rem,3.4vw,2.9rem)}.hsplit p{color:var(--sub);margin:1rem 0 1.6rem}
/* editorial (wamodern) */
.hedit{max-width:1160px;margin:0 auto;padding:clamp(2.4rem,6vw,5rem) 1.1rem;text-align:center;color:var(--ink)}
.hedit .hframe{overflow:hidden;border-radius:var(--radius)}
.hedit .hframe img{width:100%;height:58vh;min-height:380px;object-fit:cover}
.hedit .hcard{display:inline-block;background:var(--surface);margin-top:-3.4rem;position:relative;
  padding:2.2rem clamp(1.6rem,5vw,3.6rem);border-top:3px solid var(--accent)}
.hedit h1{font-size:clamp(1.9rem,3.6vw,2.9rem)}.hedit p{color:var(--sub);margin:.9rem 0 1.4rem}
/* minimal */
.hmin .hcap{text-align:left;left:clamp(1.2rem,5vw,4rem);right:auto;bottom:clamp(1.6rem,6vw,4rem)}
.hmin .hcap h1{max-width:15ch}

/* sections */
.sect{padding:clamp(3rem,7vw,5.6rem) 0}.band{background:var(--band)}
.sec-head{text-align:center;max-width:760px;margin:0 auto clamp(1.8rem,4vw,3rem)}
.sec-head h2{font-size:clamp(1.5rem,3vw,2.15rem);margin-bottom:1rem}.sec-head p{color:var(--sub);font-size:.98rem}
.statement{font-size:clamp(1.15rem,2.4vw,1.65rem);line-height:2;text-align:center;max-width:840px;margin:0 auto}
.statement b{color:var(--primary)}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:2.6rem}
.pillar{text-align:center;padding:2rem 1.1rem 1.7rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);position:relative;overflow:hidden;transition:transform .28s,box-shadow .28s,border-color .28s}
.pillar::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--accent))}
.pillar:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(63,143,92,.16);border-color:transparent}
.pillar .pi{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:var(--band);color:var(--primaryd);margin-bottom:1rem}
.pillar .pi svg{width:28px;height:28px}
.pillar h3{font-size:1.22rem;color:var(--primaryd);margin-bottom:.55rem}.pillar p{font-size:.83rem;color:var(--sub);line-height:1.75}
a.pillar{text-decoration:none;display:block}a.pillar .pi{background:var(--accentbg)}a.pillar:hover .pi{background:var(--primary);color:#fff}
.pi-more{display:inline-block;margin-top:.8rem;font-size:.75rem;font-weight:700;color:var(--primary)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:.6rem}
.fact{text-align:center;padding:1.9rem 1.1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);transition:transform .28s,box-shadow .28s}
.fact:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(63,143,92,.13)}
.fact .fico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--band);color:var(--primaryd);margin-bottom:.85rem}
.fact .fico svg{width:26px;height:26px}
.fact .big{font-size:1.3rem;color:var(--primaryd);font-family:var(--headf);font-weight:700;display:block;line-height:1.35;margin-bottom:.3rem}
.fact .lbl{font-size:.82rem;color:var(--sub);line-height:1.55}

/* big category buttons (shop) */
.catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.catbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.7rem;
  padding:2.4rem 1.2rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  box-shadow:var(--shadow);transition:.28s;min-height:200px}
.catbtn:hover{transform:translateY(-5px);border-color:var(--primary);background:var(--band)}
.catbtn .uc-ic{width:52px;height:52px;color:var(--primary)}
.catbtn h3{font-size:1.15rem}.catbtn .en{font-size:.7rem;letter-spacing:.22em;color:var(--primary);text-transform:uppercase}
.catbtn p{font-size:.82rem;color:var(--sub);margin:.2rem 0 0}
.catbtn .go{margin-top:.5rem;font-size:.82rem;color:var(--primary);font-weight:700}
.cattags{display:flex;flex-wrap:nowrap;justify-content:center;gap:.3rem;margin:.5rem 0 0}
.cattags span{font-size:.68rem;color:var(--primaryd);background:var(--accentbg);border-radius:999px;padding:.22rem .5rem;white-space:nowrap}

/* product grid */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;align-items:stretch}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow);transition:.3s;height:100%}
.card:hover{transform:translateY(-5px)}
.card .ph{aspect-ratio:1/1;overflow:hidden;background:var(--accentbg);display:block}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:.5s}.card:hover .ph img{transform:scale(1.05)}
.card .body{padding:1rem;display:flex;flex-direction:column;flex:1}
.card .pn{font-size:.88rem;line-height:1.55;margin:0 0 .5rem}
.card .pr{color:var(--primaryd);font-weight:700;margin:0 0 .9rem;font-size:.96rem}
[data-t="wamodern"] .card .pr{font-family:var(--headf)}
.card .buy{margin-top:auto;display:flex;gap:.5rem;align-items:center}
.qty{max-width:56px;padding:.32rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font-family:inherit}
.card .buy .btn{flex:1;text-align:center;padding:.55rem .4rem;font-size:.8rem;white-space:nowrap}

/* article / simple */
.pagehero{background:var(--band);padding:clamp(2.4rem,6vw,4rem) 0;text-align:center}
.pagehero .en{font-size:.72rem;letter-spacing:.3em;color:var(--primary);text-transform:uppercase}
.pagehero h1{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-top:.5rem}.pagehero p{color:var(--sub);margin-top:.7rem}
.article{max-width:820px;margin:0 auto}
.article h2{font-size:1.5rem;margin:2.4rem 0 1rem;padding-bottom:.5rem;border-bottom:2px solid var(--accentbg)}
.article h3{font-size:1.15rem;margin:1.8rem 0 .7rem;color:var(--primaryd)}
.article p{margin:0 0 1.1rem}.article ul{margin:0 0 1.2rem;padding-left:1.2rem}.article li{margin:.4rem 0}
.article .lead{font-size:1.06rem;color:var(--sub)}
.article .cta{background:var(--band);border-radius:var(--radius);padding:1.6rem;margin:2rem 0;text-align:center}
.article>img,.article .figimg{border-radius:var(--radius);margin:1.4rem 0;width:100%}
.two{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:center}
.two img{border-radius:var(--radius);width:100%;height:100%;object-fit:cover}
.imgcredit{display:block;font-size:.66rem;color:var(--sub);opacity:.7;margin-top:.4rem;text-align:right}.imgcredit a{color:inherit;text-decoration:underline}
.info-tbl{width:100%;border-collapse:collapse}
.info-tbl th,.info-tbl td{text-align:left;padding:.85rem .6rem;border-bottom:1px solid var(--line);font-size:.9rem;vertical-align:top}
.info-tbl th{width:34%;color:var(--primaryd);font-weight:700}

/* blog list */
.bloggrid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.bcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);box-shadow:var(--shadow);transition:.3s}
.bcard:hover{transform:translateY(-4px);border-color:var(--primary)}
.bcard .th{aspect-ratio:16/9;overflow:hidden}.bcard .th img{width:100%;height:100%;object-fit:cover;transition:.5s}
.bcard:hover .th img{transform:scale(1.04)}
.bcard .bbody{padding:1.3rem}
.bcard .btag{font-size:.72rem;color:var(--primaryd);background:var(--accentbg);border-radius:999px;padding:.2rem .7rem}
.bcard .bdate{font-size:.74rem;color:var(--sub);margin-left:.6rem}
.bcard h3{font-size:1.05rem;margin:.7rem 0 .5rem;line-height:1.5}
.bcard p{font-size:.84rem;color:var(--sub);margin:0}
.pager{display:flex;gap:.4rem;justify-content:center;margin-top:2.6rem}
.pager a,.pager span{border:1px solid var(--line);border-radius:var(--radius);padding:.4rem .8rem;font-size:.85rem;color:var(--sub)}
.pager .cur{background:var(--primary);color:#fff;border-color:var(--primary)}
.note{background:var(--accentbg);border-radius:var(--radius);padding:1rem 1.2rem;font-size:.82rem;color:var(--primaryd);margin-top:2rem}

/* form */
.formbox{max-width:440px;margin:0 auto;border:1px solid var(--line);border-radius:var(--radius);padding:2rem;background:var(--surface);box-shadow:var(--shadow)}
.formbox label{display:block;font-size:.85rem;margin:1rem 0 .3rem;color:var(--sub)}
.formbox input{width:100%;padding:.7rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font-family:inherit}
.formbox .btn{width:100%;margin-top:1.6rem;text-align:center}
.cart-row{display:flex;gap:1rem;align-items:center;border-bottom:1px solid var(--line);padding:1rem 0}
.cart-row img{width:84px;height:84px;object-fit:cover;border-radius:var(--radius)}

/* footer */
.foot{background:var(--footbg);color:#fff;padding:3rem 0 2.4rem;margin-top:2rem}
.foot .brandmark{height:46px;opacity:.95;margin:0 auto 1.2rem}   /* NO invert filter — proper logo */
.foot .fnav{display:flex;gap:1.3rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.1rem}
.foot .fnav a{font-size:.82rem;opacity:.85}.foot .fnav a:hover{opacity:1;color:var(--accent)}
.foot .cp{font-size:.74rem;opacity:.6;text-align:center;margin:0}
.tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tag{font-size:.74rem;color:var(--primaryd);background:var(--accentbg);border-radius:999px;padding:.22rem .7rem}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.in{opacity:1;transform:none}
/* home shop CTA banner */
.shopcta{background:url(../img/nino/miyazaki.jpg) center/cover no-repeat;padding:clamp(3rem,7vw,5rem) 0;color:#fff;position:relative}
[data-t="dark"] .shopcta{background:url(../img/nino/miyazaki.jpg) center/cover no-repeat}
.shopcta .wrap{max-width:920px;padding:clamp(2rem,4vw,3.2rem) clamp(1.4rem,5vw,4.5rem);background:radial-gradient(ellipse 52% 92% at 50% 50%,rgba(28,36,32,.50),rgba(28,36,32,.28) 52%,rgba(28,36,32,0) 82%)}
.shopcta .eyebrow,.shopcta h2,.shopcta p,.shopcta .btn{text-shadow:0 1px 8px rgba(0,0,0,.48)}
.shopcta .btn{background:rgba(20,28,24,.12);box-shadow:0 2px 10px rgba(0,0,0,.12)}
.shopcta .btn:hover{background:var(--primary);border-color:var(--primary);color:#fff}
@media(max-width:720px){.shopcta .wrap{background:radial-gradient(ellipse 88% 88% at 50% 50%,rgba(28,36,32,.52),rgba(28,36,32,.30) 58%,rgba(28,36,32,0) 88%)}}
/* process gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin:1.2rem 0}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius)}

/* ---------------- responsive ---------------- */
/* 用途カード: .cattags を常に1行に収めるため、幅が足りなくなる前に段数を落とす */
@media(max-width:1140px){.catgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.catgrid{grid-template-columns:1fr}}
@media(max-width:1040px){.themebar{font-size:.72rem}.tsw{padding:.2rem .6rem;font-size:.72rem}.hdr{top:0}.hdr-in{padding:.9rem 1.3rem}}
@media(max-width:900px){
  .pillars,.facts{grid-template-columns:repeat(2,1fr)}.pgrid{grid-template-columns:repeat(2,1fr)}
  .two,.hsplit,.bloggrid{grid-template-columns:1fr}
  .hsplit{min-height:0}.hsplit .hmedia img{height:50vh;min-height:0}
  .hedit .hframe img{height:44vh}.gallery{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){
  .wrap{padding:0 1rem}
  .pillars{grid-template-columns:1fr 1fr;gap:.7rem}.pillar{padding:1.1rem .7rem}.facts{grid-template-columns:1fr 1fr}
  .catbtn{min-height:0;padding:1.6rem 1.2rem;gap:.55rem}
  .catbtn .uc-ic{width:42px;height:42px;flex:none}.catbtn h3{font-size:1.08rem}
  .pgrid{grid-template-columns:1fr 1fr;gap:.8rem}
  .card .body{padding:.75rem}.card .pn{font-size:.8rem}.card .buy .btn{font-size:.72rem;padding:.5rem .25rem}.qty{max-width:46px}
  .hfull .bg,.hmin .bg,.hdark .bg{height:62vh;min-height:360px}
  .hcap h1,.hsplit h1,.hedit h1{font-size:clamp(1.5rem,7vw,2rem)}.hcap p,.hsplit p{font-size:.9rem}
  .hsplit .hcopy{padding:1.8rem 1.3rem}.hedit{padding:1.6rem 1rem}.hedit .hcard{margin-top:-2rem;padding:1.4rem 1.2rem}
  .statement{font-size:1.05rem;line-height:1.9}.gallery{grid-template-columns:repeat(2,1fr)}
  .sec-head h2,.pagehero h1{font-size:1.4rem}.sect{padding:2.6rem 0}
  .themebar b{display:none}.themebar{gap:.3rem;padding:.4rem .4rem}.tsw{padding:.2rem .55rem;font-size:.7rem}
  .info-tbl th{width:36%;font-size:.82rem}.info-tbl td{font-size:.82rem}.cart-row img{width:64px;height:64px}
  .article h2{font-size:1.3rem}.two{gap:1.4rem}}
@media(max-width:380px){.pgrid{grid-template-columns:1fr}}
/* ===== 追加: リッチフッター / フォーム / article内の表・リスト（全ページ用） ===== */
.foot-rich{text-align:left;padding:3rem 0 2rem}
.foot-rich .wrap{max-width:1320px}
.foot-grid{display:grid;grid-template-columns:190px 1fr;gap:1.6rem;text-align:left;align-items:start}
.foot-brand .brandmark{width:150px}
.foot-sns{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.1rem 0}
.foot-sns a{display:inline-block;padding:.35rem .85rem;border:1px solid rgba(255,255,255,.35);border-radius:999px;font-size:.78rem;color:#fff;opacity:.9}
.foot-sns a:hover{background:rgba(255,255,255,.12)}
.foot-company{font-size:.8rem;line-height:1.95;opacity:.82;margin:0}
.foot-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
.foot-cols dl{margin:0;min-width:0}
.foot-cols dt{font-weight:700;font-size:.82rem;white-space:nowrap;margin-bottom:.7rem;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.18);opacity:.95}
.foot-cols dd{margin:0;display:flex;flex-direction:column;gap:.4rem}
.foot-cols dd a{font-size:.72rem;opacity:.78;line-height:1.6;white-space:nowrap}
.foot-cols dd a:hover{opacity:1;text-decoration:underline}
.foot-rich .cp{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14);font-size:.76rem;opacity:.6;text-align:center}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr;gap:1.8rem}.foot-cols{grid-template-columns:repeat(2,1fr)}.foot-cols dt{white-space:normal}}
.article ul,.article ol{margin:1rem 0 1.4rem 1.4rem}
.article li{margin:.35rem 0;line-height:1.8}
.article table{width:100%;border-collapse:collapse;margin:1.2rem 0}
.article table th,.article table td{border:1px solid var(--line,#e7ecea);padding:.7rem .9rem;text-align:left;font-size:.92rem;vertical-align:top}
.article table th{background:var(--band,#f6fbf9);white-space:nowrap}
.article input[type=text],.article input[type=email],.article input[type=tel],.article input[type=password],.article textarea,.article select{
  width:100%;max-width:460px;padding:.6rem .8rem;border:1px solid var(--line,#e7ecea);border-radius:6px;font:inherit;background:#fff;margin:.2rem 0}
.article textarea{min-height:140px}
.article input[type=submit],.article button[type=submit],.article .btn{background:var(--primary,#5db078);color:#fff;border:0;border-radius:999px;padding:.7rem 2rem;font-weight:600;cursor:pointer;display:inline-block}
#guide-navi ul{list-style:none;margin-left:0}#guide-navi>ul{margin-bottom:1.4rem}

/* HOME hero: caption centered over the tree image + button spacing */
.hfull .hcap{top:50%;bottom:auto;transform:translateY(-50%)}
.hero-btns{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center;margin-top:.2rem}

/* ===== 会社概要（company）用 ===== */
.subnav-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem;padding-top:1.6rem}
.crumb{font-size:.8rem;color:var(--sub);margin:0}.crumb a{color:var(--primaryd)}
.subtabs{display:flex;gap:.5rem;flex-wrap:wrap}
.subtabs a{font-size:.84rem;padding:.42rem 1.15rem;border:1px solid var(--line);border-radius:999px;color:var(--sub)}
.subtabs a:hover{border-color:var(--primary);color:var(--primaryd)}
.subtabs a.active{background:var(--primary);border-color:var(--primary);color:#fff}
.greet{display:grid;grid-template-columns:300px 1fr;gap:2.2rem;align-items:start}
.greet .greet-photo{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
.greet .greet-body{color:var(--sub);line-height:2}.greet .greet-body p{margin:0 0 1.1rem}
.greet .sign{text-align:right;font-weight:700;color:var(--primaryd)}
.kusu-sect{background:url(../img/nino/company_bsck.jpg) center/cover;padding:clamp(3rem,7vw,5.5rem) 0}
.kusu-band{background:rgba(30,30,26,.66);border-radius:var(--radius);max-width:920px;margin:0 auto;padding:clamp(2.2rem,5vw,3.6rem);text-align:center}
.kusu-band .kusutitle{max-width:480px;margin:0 auto 1.6rem}
.kusu-band .kusu-text{color:#fff;opacity:.95;line-height:2.1;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.bridge-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(1.4rem,3.5vw,2.6rem);display:grid;grid-template-columns:160px 1fr;gap:1.8rem;align-items:start}
.bridge-logo img{width:100%;border-radius:var(--radius)}
.bridge-title{max-width:540px;margin:0}
.bridge-photo{width:100%;border-radius:var(--radius)}
.bridge-two{grid-template-columns:240px 1fr;gap:1.6rem;align-items:start}
@media(max-width:820px){.greet{grid-template-columns:1fr}.greet .greet-photo{max-width:280px;margin:0 auto}.bridge-card{grid-template-columns:1fr;text-align:center}.bridge-title{margin:0 auto}.bridge-two{grid-template-columns:1fr;text-align:left}}

/* ===== 社会的弱者支援（support）用 ===== */
.bridge-imgs{max-width:580px;margin:0 auto 1.8rem;align-items:center}
.bridge-imgs img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow)}
ul.steplist{list-style:none;display:flex;flex-wrap:nowrap;justify-content:center;gap:.8rem;margin:0 auto 1.7rem;padding:0}
.steplist li{display:inline-flex;align-items:center;margin:0;font-size:.85rem;color:var(--ink);white-space:nowrap}
.steplist li::before{content:"✓";display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.3em;height:1.3em;margin-right:.38rem;border-radius:50%;background:var(--primary);color:#fff;font-size:.72em;font-weight:700}
.approval{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.6rem;margin-top:1.6rem}
.approval h3{font-size:1rem;color:var(--primaryd);margin-bottom:.6rem}
.approval p{color:var(--sub);font-size:.92rem;margin:0;line-height:1.9}
.worksec{max-width:980px;margin:2.6rem auto 0;text-align:center}
.worktitle{font-size:1.15rem;display:inline-block;padding-bottom:.5rem;border-bottom:2px solid var(--primary);margin:0 auto .9rem}
.workdesc{color:var(--sub);line-height:1.9;margin:0 auto 1.3rem;max-width:680px}
.workgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.workgrid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
@media(max-width:640px){.workgrid{grid-template-columns:repeat(2,1fr)}}

.bridge-text{max-width:960px;text-align:center}
@media(max-width:880px){ul.steplist{flex-wrap:wrap;gap:.7rem 1.4rem}}

/* ===== プロダクトストーリー（products）用 ===== */
.story-head{text-align:center;margin:0 auto clamp(1.4rem,3vw,2.2rem)}
.story-head .leaficon{width:36px;height:auto;margin:0 auto .5rem;display:block}
.story-head h2{font-size:clamp(1.35rem,2.7vw,1.95rem)}
.story-sub{display:grid;grid-template-columns:300px 1fr;gap:2rem;align-items:start;max-width:980px;margin:2.2rem auto 0}
.story-sub .ss-img img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow)}
.story-sub .ss-body h3{font-size:1.12rem;color:var(--primaryd);margin:0 0 .8rem;padding-bottom:.5rem;border-bottom:2px solid var(--primary);display:inline-block}
.story-sub .ss-body p{color:var(--sub);line-height:2;margin:0}
.story-sub .src{font-size:.78rem;color:var(--sub);margin-top:.9rem}.story-sub .src a{color:var(--primaryd);word-break:break-all}
.distill{max-width:940px;margin:2.2rem auto 0;text-align:center}
.distill .ss-h3{font-size:1.12rem;color:var(--primaryd);margin:0 0 1rem;padding-bottom:.5rem;border-bottom:2px solid var(--primary);display:inline-block}
.distill-img{max-width:760px;width:100%;margin:0 auto 1.4rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1rem}
.stepgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;max-width:1040px;margin:2.6rem auto 0}
.stepcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;position:relative;display:flex;flex-direction:column}
.stepcard .stepno{position:absolute;top:.55rem;left:.55rem;width:27px;height:27px;background:var(--primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;z-index:2}
.stepcard img{width:100%;aspect-ratio:4/3;object-fit:cover}
.stepcard p{font-size:.8rem;color:var(--sub);padding:.75rem .85rem;line-height:1.65;margin:0}
@media(max-width:820px){.story-sub{grid-template-columns:1fr}.story-sub .ss-img img{max-width:360px;margin:0 auto}}
@media(max-width:640px){.stepgrid{grid-template-columns:repeat(2,1fr)}}

/* ===== 日向備長炭（sumi）用 ===== */
.bincenter{max-width:600px;margin:1.8rem auto 2.8rem}.bincenter img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow)}
.article h3{font-size:1.12rem;color:var(--primaryd);margin:1.9rem 0 .7rem;padding-bottom:.4rem;border-bottom:1px solid var(--line)}
.article h3:first-child{margin-top:0}
.article .note{display:block;background:none;padding:0;border-radius:0;font-size:.78rem;color:var(--sub);text-align:center;margin:.9rem auto 0;line-height:1.7}
.article .poem{text-align:center;color:var(--primaryd);line-height:2;margin-top:1.6rem}
.binbox{max-width:820px;margin:1.8rem auto 0;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:var(--radius);padding:1.4rem 1.6rem}
.binbox h3{text-align:center;color:var(--primaryd);font-size:1.05rem;margin:0 0 .7rem}
.binbox p{color:var(--sub);font-size:.9rem;line-height:1.9;margin:0}
.bingrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.4rem;max-width:1100px;margin:2rem auto 0}
.bincard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;position:relative}
.bincard img{width:100%;aspect-ratio:4/3;object-fit:cover}
.bincard .bno{position:absolute;top:.55rem;left:.55rem;width:28px;height:28px;background:var(--primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;z-index:2}
.bincard .bbody{padding:1rem 1.1rem}
.bincard h4{font-size:1rem;color:var(--primaryd);margin:0 0 .3rem}
.bincard .bsub{font-size:.76rem;color:var(--sub);margin:0 0 .55rem;line-height:1.5}
.bincard p{font-size:.82rem;color:var(--sub);line-height:1.7;margin:0}
.binref{text-align:center;font-size:.78rem;color:var(--sub);margin-top:1.6rem}
.c5msg{display:grid;grid-template-columns:38% 1fr;gap:1rem;max-width:760px;margin:1.4rem auto 0;align-items:start}
.c5-left{display:flex;flex-direction:column;gap:1rem}
.c5msg img{width:100%;border-radius:var(--radius);display:block}
@media(max-width:640px){.c5msg{grid-template-columns:1fr;max-width:340px}}

.notebox{display:block;max-width:1040px;margin:1rem auto 0;font-size:.78rem;color:var(--sub);text-align:center;line-height:1.7}

/* アンカー遷移が固定ヘッダーに隠れないように */
.sect[id]{scroll-margin-top:100px}

/* カートへ入れるボタン: やさしい緑（主張を抑える） */
.card .buy .btn-fill{background:#e6f4ec;color:var(--primaryd);border-color:#c2e2d0}
.card .buy .btn-fill:hover{background:#d5ece0;border-color:#a7d6bd;filter:none}

/* ===== お問い合わせフォーム ===== */
.article .infotable+*, .guide-wrap{max-width:760px;margin-left:auto;margin-right:auto}
.privacy-inbox{max-height:300px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.6rem;background:#fafcfb;margin:1rem auto 0;max-width:760px}
.privacy-inbox h2,.privacy-inbox .headline-2{font-size:1.02rem;color:var(--primaryd);margin:0 0 .8rem;border:0}
.privacy-inbox p,.privacy-inbox li,.privacy-inbox div{font-size:.85rem;line-height:1.85;color:var(--sub)}
.agree-line, .fs-18{text-align:center;margin:1.1rem auto 1.8rem}.agree-line label,.fs-18 label{font-size:.95rem;cursor:pointer}
.infotable{display:grid;grid-template-columns:170px 1fr;max-width:760px;margin:1.4rem auto 0;border-bottom:1px solid var(--line)}
.infotable dt{padding:1rem 1rem 1rem .2rem;border-top:1px solid var(--line);font-weight:700;font-size:.9rem;display:flex;align-items:center;background:var(--band)}
.infotable dt i{background:var(--primary);color:#fff;font-size:.66rem;font-style:normal;padding:.12rem .5rem;border-radius:3px;margin-left:.5rem;white-space:nowrap}
.infotable dd{padding:1rem;border-top:1px solid var(--line);margin:0;display:flex;flex-direction:column;gap:.4rem;justify-content:center}
.infotable .formbox-a{margin:0}
.infotable input[type=text],.infotable select,.infotable textarea{border:1px solid var(--line);border-radius:6px;padding:.5rem .7rem;font:inherit;background:#fff;max-width:100%}
.infotable input[name=last_name],.infotable input[name=first_name],.infotable input[name*=kana]{width:9em}
.infotable input[name*=post_code],.infotable input[name*=tel_]{width:5em}
.infotable input[name=mail],.infotable input[name=address],.infotable input[name=building]{width:100%;max-width:360px}
.infotable textarea{width:100%;min-height:130px}
.infotable .btn-gray,.infotable .btn-small{background:var(--band);border:1px solid var(--line);border-radius:6px;padding:.4rem .8rem;font-size:.8rem;cursor:pointer;color:var(--primaryd)}
.infotable .text-13{font-size:.72rem;color:var(--sub)}
.contact-submit{background:var(--primary);color:#fff;border:0;border-radius:999px;padding:.85rem 2.8rem;font-size:1rem;font-weight:600;cursor:pointer;margin-top:1.8rem}
.contact-submit:hover{filter:brightness(1.06)}
@media(max-width:600px){.infotable{grid-template-columns:1fr}.infotable dt{border-top:1px solid var(--line);padding:.7rem;font-size:.85rem}.infotable dd{border-top:0;padding-top:.4rem}}

/* ===== ご利用ガイド（カード化） ===== */
.guidegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;max-width:900px;margin:1rem auto 0}
.guidecard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.4rem 1.6rem}
.guidecard h3{font-size:1.1rem;margin:0 0 .9rem;padding-bottom:.6rem;border-bottom:2px solid var(--primary)}
.guidecard h3 a{color:var(--primaryd)}
.guidecard ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.guidecard li a{font-size:.85rem;color:var(--sub)}
.guidecard li a::before{content:"\203A";color:var(--primary);font-weight:700;margin-right:.45rem}
.guidecard li a:hover{color:var(--primaryd)}
.guide-misc{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;max-width:900px;margin:2rem auto 0}
.guide-misc a{font-size:.85rem;padding:.5rem 1.15rem;border:1px solid var(--line);border-radius:999px;color:var(--sub)}
.guide-misc a:hover{border-color:var(--primary);color:var(--primaryd)}
@media(max-width:700px){.guidegrid{grid-template-columns:1fr}}

/* ===== 返品・交換 ===== */
.return-body{max-width:760px;margin:0 auto}
.return-list{list-style:none;margin:0;padding:0}
.return-list li{position:relative;padding:1rem 0 1rem 1.5rem;border-bottom:1px solid var(--line);color:var(--sub);line-height:1.95;font-size:.92rem}
.return-list li:first-child{border-top:1px solid var(--line)}
.return-list li::before{content:"";position:absolute;left:0;top:1.35rem;width:7px;height:7px;border-radius:50%;background:var(--primary)}
.return-info{background:var(--band);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.4rem;margin:1.6rem auto 0;text-align:center}
.return-info p{margin:.3rem 0;color:var(--sub);line-height:1.8}
.return-info .ri-tel strong{font-size:1.2rem;color:var(--primaryd)}
.return-info .ri-tel span{font-size:.84rem}
.return-info .ri-ttl{font-weight:700;color:var(--primaryd);margin-bottom:.5rem;letter-spacing:.05em}

.ta-center{text-align:center}
.contact-submit{display:inline-block}

/* Product Story: wide image beneath Miyazaki camphor section */
.story-wide-photo{max-width:960px;margin:1.8rem auto 0;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow)}
.story-wide-photo img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 58%}
@media(max-width:820px){.story-wide-photo img{aspect-ratio:4/3;object-position:center 58%}}

/* =========================================================
   MOBILE LAYOUT REFINEMENT (320px baseline) - v11
   Desktop/tablet styles above are preserved; these rules only
   tighten the layout for narrow smartphones.
   ========================================================= */
@media(max-width:480px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{font-size:15px;line-height:1.8}
  .wrap{width:100%;max-width:100%;padding-left:14px;padding-right:14px}
  img,svg,video,canvas,iframe{max-width:100%;height:auto}
  h1,h2,h3,h4,p,li,dt,dd,a,span{overflow-wrap:anywhere}
  h1,h2,h3,h4{letter-spacing:.09em}
  .sect{padding:2.35rem 0}
  .sec-head{margin-bottom:1.55rem}
  .sec-head h2{font-size:1.34rem;line-height:1.55;margin-bottom:.7rem}
  .sec-head p{font-size:.9rem;line-height:1.8}
  .eyebrow{font-size:.67rem;letter-spacing:.22em;margin-bottom:.55rem}
  .btn{max-width:100%;padding:.65rem 1.15rem;font-size:.83rem;line-height:1.45;white-space:normal;text-align:center}

  /* header / mobile menu */
  .hdr-in{padding:.72rem .85rem;gap:.55rem;min-height:62px}
  .brand{display:flex;align-items:center;min-width:0}
  .brand img{height:38px;width:auto;max-width:170px}
  .navtoggle{display:flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px;padding:8px}
  .hdr.open .nav{position:fixed;top:62px;left:0;right:0;bottom:0;z-index:111;display:flex;flex-direction:column;align-items:stretch;gap:0;background:var(--surface);padding:1rem 1rem 5.8rem;overflow-y:auto;border-top:1px solid var(--line);border-bottom:0}
  .hdr.open .navlink{width:100%;padding:.72rem .2rem;border-bottom:1px solid var(--line);font-size:.9rem;white-space:normal}
  .hdr.open .nav-r{position:fixed;left:1rem;right:1rem;bottom:1rem;top:auto;z-index:112;display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin:0;padding:.6rem;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 26px rgba(0,0,0,.12)}
  .hdr.open .nav-r a{display:block;text-align:center;padding:.55rem .4rem;font-size:.78rem;white-space:normal}

  /* HOME hero */
  .hfull .bg,.hmin .bg,.hdark .bg{height:460px;min-height:460px;object-position:center center}
  .hcap{padding:0 14px}
  .hcap h1,.hsplit h1,.hedit h1{font-size:1.62rem;line-height:1.55;letter-spacing:.08em}
  .hcap p,.hsplit p{font-size:.86rem;line-height:1.8;margin:.75rem auto 1.15rem}
  .hcap p br{display:none}
  .hero-btns{flex-direction:column;align-items:center;gap:.65rem;margin-top:.15rem}
  .hero-btns .btn{width:min(230px,100%)}
  .hfull .hcap{background:radial-gradient(ellipse 105% 78% at 50% 49%,rgba(28,36,32,.52),rgba(28,36,32,.31) 56%,rgba(28,36,32,0) 86%)}

  /* common 2-column blocks and home cards */
  .two{grid-template-columns:1fr;gap:1.25rem}
  .two img{height:auto}
  .two [style*="white-space:nowrap"]{white-space:normal!important}
  .two .reveal h1{font-size:1.35rem!important;line-height:1.55}
  .two .reveal>p[style*="font-size:1.5rem"]{font-size:1.2rem!important}
  .two .reveal>div[style*="display:flex"]{flex-wrap:wrap!important;align-items:stretch!important;gap:.6rem!important}
  .two .reveal>div[style*="display:flex"] .qty{width:100%;max-width:none!important;flex:1 1 90px}
  .two .reveal>div[style*="display:flex"] .btn{flex:1 1 150px;padding:.7rem 1rem!important}
  .statement{font-size:1rem!important;line-height:1.85;padding:0 .15rem}
  .statement br{display:none}
  .pillars{grid-template-columns:1fr;gap:.8rem;margin-top:1.6rem}
  .pillar{padding:1.25rem 1rem}
  .pillar .pi{width:50px;height:50px;margin-bottom:.7rem}
  .pillar h3{font-size:1.08rem;margin-bottom:.35rem}
  .pillar p{font-size:.84rem;line-height:1.75;margin:.35rem 0}
  .facts{grid-template-columns:1fr;gap:.75rem}
  .fact{padding:1.25rem 1rem}
  .fact .fico{width:46px;height:46px;margin-bottom:.65rem}
  .fact .big{font-size:1.12rem;overflow-wrap:anywhere}
  .facts+p.center br{display:none}
  .facts+p.center{font-size:.92rem!important;line-height:1.9!important;padding:0 .1rem}

  /* page heading */
  .pagehero{padding:2.05rem 0}
  .pagehero .en{font-size:.65rem;letter-spacing:.22em}
  .pagehero h1{font-size:1.34rem;line-height:1.55;letter-spacing:.08em;margin-top:.35rem}
  .pagehero p{font-size:.86rem;line-height:1.75;margin-top:.45rem}

  /* shop category / product grids */
  .catgrid{grid-template-columns:1fr;gap:.9rem}
  .catbtn{padding:1.45rem 1rem;gap:.45rem;min-height:0}
  .catbtn .uc-ic{width:40px;height:40px}
  .catbtn h3{font-size:1.08rem}
  .catbtn p{font-size:.82rem;line-height:1.7}
  .catbtn p br{display:none}
  .cattags{flex-wrap:wrap;gap:.35rem .3rem;margin-top:.4rem}
  .cattags span{white-space:normal;font-size:.66rem;line-height:1.4;padding:.25rem .5rem}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
  .card{min-width:0}
  .card .body{padding:.68rem}
  .card .pn{font-size:.76rem;line-height:1.5;margin-bottom:.35rem}
  .card .pr{font-size:.8rem;margin-bottom:.55rem}
  .card .buy{display:grid;grid-template-columns:1fr;gap:.4rem;align-items:stretch}
  .card .buy .qty{width:100%;max-width:none;height:34px;font-size:.76rem}
  .card .buy .btn{width:100%;min-width:0;font-size:.7rem;line-height:1.35;padding:.48rem .3rem;white-space:normal}
  .card .ph{aspect-ratio:1/1}

  /* HOME shop CTA */
  .shopcta{padding:2.6rem 0;background-position:center center}
  .shopcta .wrap{padding:1.65rem .8rem;background:radial-gradient(ellipse 112% 88% at 50% 50%,rgba(28,36,32,.56),rgba(28,36,32,.32) 58%,rgba(28,36,32,0) 90%)}
  .shopcta h2{font-size:1.35rem!important;line-height:1.6;letter-spacing:.08em}
  .shopcta p{font-size:.84rem;line-height:1.75;padding:0 .15rem}
  .shopcta .btn{min-width:190px}

  /* sub navigation on company / support / products / sumi */
  .subnav-row{display:block;padding-top:1rem}
  .crumb{font-size:.74rem;margin-bottom:.7rem}
  .subtabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;width:100%;gap:.45rem;padding:0 0 .45rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .subtabs::-webkit-scrollbar{display:none}
  .subtabs a{flex:0 0 auto;font-size:.76rem;padding:.38rem .85rem;white-space:nowrap}

  /* company / support */
  .greet{gap:1.3rem}
  .greet .greet-photo{max-width:230px}
  .greet .greet-body{font-size:.9rem;line-height:1.9}
  .kusu-sect{padding:2.5rem 0}
  .kusu-band{padding:1.4rem 1rem}
  .kusu-band .kusutitle{max-width:260px;margin-bottom:1rem}
  .kusu-band .kusu-text{font-size:.86rem;line-height:1.9}
  .kusu-band .kusu-text br{display:none}
  .bridge-card{padding:1.15rem 1rem;gap:1rem}
  .bridge-logo img{max-width:150px;margin:0 auto}
  .bridge-title{width:100%;max-width:100%}
  .bridge-text{font-size:.88rem;line-height:1.85}
  ul.steplist{display:grid;grid-template-columns:1fr;gap:.45rem;margin-bottom:1.3rem}
  .steplist li{white-space:normal;font-size:.82rem;align-items:flex-start}
  .approval{padding:1.1rem 1rem}
  .worksec{margin-top:2rem}
  .worktitle{font-size:1rem}
  .workdesc{font-size:.84rem;line-height:1.8}
  .workdesc br{display:none}
  .workgrid{grid-template-columns:1fr 1fr;gap:.55rem}

  /* product story */
  .story-head{margin-bottom:1.25rem}
  .story-head .leaficon{width:30px}
  .story-head h2{font-size:1.28rem;line-height:1.6;letter-spacing:.07em}
  .story-sub{grid-template-columns:1fr;gap:1.1rem;margin-top:1.45rem}
  .story-sub .ss-img img{max-width:100%}
  .story-sub .ss-body h3{font-size:1rem;line-height:1.6}
  .story-sub .ss-body p{font-size:.88rem;line-height:1.9}
  .distill{margin-top:1.55rem}
  .distill .ss-h3{font-size:1rem;line-height:1.55}
  .distill-img{padding:.55rem;margin-bottom:1rem}
  .stepgrid{grid-template-columns:1fr;gap:.9rem;margin-top:1.6rem}
  .stepcard img{aspect-ratio:4/3;object-fit:cover}
  .stepcard p{font-size:.86rem;line-height:1.75;padding:.8rem .85rem}
  .story-wide-photo{margin-top:1.25rem;border-radius:4px}
  .story-wide-photo img{aspect-ratio:4/3;object-position:center 58%}

  /* charcoal page */
  .bincenter{margin:1.2rem auto 2rem}
  .binbox{padding:1.1rem 1rem}
  .binbox h3{font-size:.98rem}
  .binbox p{font-size:.85rem;line-height:1.8}
  .bingrid{grid-template-columns:1fr;gap:1rem;margin-top:1.4rem}
  .bincard .bbody{padding:.9rem}
  .c5msg{grid-template-columns:1fr;max-width:100%;gap:.8rem}
  .article .poem{font-size:.86rem;line-height:1.9}
  .notebox,.binref{font-size:.72rem;line-height:1.65}

  /* article / blog / guide pages */
  .article{width:100%;max-width:100%}
  .article h2{font-size:1.2rem;line-height:1.55;margin:1.8rem 0 .8rem}
  .article h3{font-size:1rem;line-height:1.6;margin:1.45rem 0 .6rem}
  .article p,.article li,.article dd{font-size:.88rem;line-height:1.85}
  .article .lead{font-size:.95rem;line-height:1.85}
  .article .cta{padding:1.1rem .9rem;margin:1.4rem 0}
  .article ul,.article ol{margin-left:1.1rem;padding-left:.45rem}
  .article a{overflow-wrap:anywhere;word-break:break-word}
  .article table{width:100%;max-width:100%;table-layout:auto;margin:1rem 0}
  .article table th,.article table td{padding:.55rem .5rem;font-size:.78rem;line-height:1.6;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
  .info-tbl,.info-tbl tbody,.info-tbl tr,.info-tbl th,.info-tbl td{display:block;width:100%}
  .info-tbl tr{border-bottom:1px solid var(--line);padding:.55rem 0}
  .info-tbl th{border:0;padding:.25rem 0;color:var(--primaryd);background:transparent}
  .info-tbl td{border:0;padding:.1rem 0 .2rem}
  .main-box.contents-block{width:100%!important;max-width:100%}
  .guide-wrap{width:100%;max-width:100%}
  .guidegrid{grid-template-columns:1fr;gap:.9rem}
  .guidecard{padding:1.15rem 1rem}
  .guidecard h3{font-size:1rem}
  .guide-misc{gap:.45rem}
  .guide-misc a{font-size:.76rem;padding:.45rem .8rem}
  .return-list li{padding:.85rem 0 .85rem 1.2rem;font-size:.86rem}
  .return-info{padding:1.05rem .9rem}
  .bloggrid{grid-template-columns:1fr;gap:1rem}
  .bcard .bbody{padding:1rem}
  .bcard h3{font-size:1rem}
  .pager{flex-wrap:wrap;margin-top:1.8rem}

  /* forms */
  .formbox{padding:1.25rem 1rem}
  .privacy-inbox{max-width:100%;max-height:260px;padding:1rem .9rem}
  .privacy-inbox p,.privacy-inbox li,.privacy-inbox div{font-size:.78rem;line-height:1.75}
  .infotable{grid-template-columns:1fr;width:100%;max-width:100%}
  .infotable dt{padding:.65rem .6rem;font-size:.82rem}
  .infotable dd{padding:.5rem .6rem .8rem;min-width:0}
  .infotable input[type=text],.infotable select,.infotable textarea{max-width:100%}
  .infotable input[name=last_name],.infotable input[name=first_name],.infotable input[name*=kana],.infotable input[name=mail],.infotable input[name=address],.infotable input[name=building]{display:block;width:100%!important;max-width:100%!important;margin:.25rem 0 .55rem}
  .infotable input[name*=post_code]{width:4.1em!important;display:inline-block}
  .infotable input[name*=tel_]{width:4.7em!important;display:inline-block}
  .infotable textarea{width:100%!important;height:auto!important;min-height:180px!important}
  .infotable .formbox-a{max-width:100%;overflow-wrap:anywhere}
  .contact-submit{width:100%;max-width:280px;padding:.8rem 1rem;font-size:.9rem}
  .agree-line label,.fs-18 label{font-size:.86rem}

  /* cart */
  .cart-row{gap:.7rem;align-items:flex-start;padding:.85rem 0}
  .cart-row img{width:68px;height:68px;flex:none}
  .cart-row>div{min-width:0}
  .cart-row p{overflow-wrap:anywhere}
  .article>div[style*="justify-content:space-between"]{flex-wrap:wrap!important;gap:.5rem!important;font-size:1rem!important}

  /* footer */
  .foot-rich{padding:2.2rem 0 1.5rem;margin-top:1rem}
  .foot-grid{grid-template-columns:1fr;gap:1.5rem}
  .foot-brand .brandmark{width:130px;height:auto;margin-left:0}
  .foot-sns{gap:.4rem}
  .foot-sns a{font-size:.72rem;padding:.32rem .65rem}
  .foot-company{font-size:.75rem;line-height:1.8}
  .foot-cols{grid-template-columns:1fr;gap:1.15rem}
  .foot-cols dt{font-size:.8rem;white-space:normal;margin-bottom:.5rem}
  .foot-cols dd{gap:.3rem}
  .foot-cols dd a{font-size:.74rem;line-height:1.55;white-space:normal;overflow-wrap:anywhere}
  .foot-rich .cp{margin-top:1.5rem;padding-top:1rem;font-size:.68rem;line-height:1.6}
}

@media(max-width:340px){
  .wrap{padding-left:12px;padding-right:12px}
  .hdr-in{padding-left:.7rem;padding-right:.7rem}
  .brand img{height:35px;max-width:155px}
  .hcap{padding-left:12px;padding-right:12px}
  .hcap h1{font-size:1.5rem}
  .hcap p{font-size:.82rem}
  .pagehero h1,.sec-head h2,.story-head h2{font-size:1.24rem}
  .btn{font-size:.8rem}
  .workgrid{grid-template-columns:1fr}
  .infotable input[name*=tel_]{width:4.35em!important}
  .foot-sns a{font-size:.69rem}
}

/* v11 narrow-screen finishing fixes */
@media(max-width:480px){
  .pagehero h1{font-size:1.34rem!important}
  .article>dt{margin:0;padding:.75rem .2rem .2rem;border-top:1px solid var(--line);font-size:.86rem;font-weight:700;color:var(--primaryd)}
  .article>dd{margin:0;padding:.05rem .2rem .75rem;font-size:.86rem;min-width:0}
  .article>dd p{margin-bottom:.75rem}
  .article .info-table-01,.article .info-table-02{table-layout:fixed}
  .article .info-table-01 th,.article .info-table-02 th{width:68%;font-weight:500}
  .article .info-table-01 td,.article .info-table-02 td{width:32%}
}
@media(max-width:340px){
  .pagehero h1{font-size:1.22rem!important}
}

/* v12: keep product listings in two columns on narrow smartphones */
@media(max-width:480px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.65rem}
}
@media(max-width:340px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.5rem}
  .card .body{padding:.58rem}
  .card .pn{font-size:.72rem;line-height:1.45}
  .card .pr{font-size:.76rem}
  .card .buy .btn{font-size:.66rem;padding:.45rem .2rem}
  .card .buy .qty{font-size:.72rem;height:32px}
}

/* v13: robust mobile hamburger menu */
@media (max-width:480px){
  .hdr{
    position:sticky;
    top:0;
    z-index:300;
    background:rgba(255,255,255,.97);
    border-bottom:1px solid var(--line);
  }
  .hdr-in{
    position:relative;
    height:62px;
    min-height:62px;
    padding:.6rem .85rem;
  }
  .brand{
    position:relative;
    z-index:304;
    max-width:calc(100% - 56px);
  }
  .brand img{
    display:block;
    height:38px;
    width:auto;
    max-width:160px;
  }
  .navtoggle{
    position:relative;
    z-index:304;
    display:flex!important;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    margin-left:auto;
    padding:8px;
    flex:0 0 42px;
    border:0;
    background:transparent;
  }
  .navtoggle svg{
    width:26px;
    height:26px;
    max-width:none;
    flex:none;
  }

  /* closed state */
  .hdr .nav,
  .hdr .nav-r{
    display:none!important;
  }

  /* full-screen menu under the header */
  .hdr.open .nav{
    display:flex!important;
    position:fixed!important;
    box-sizing:border-box;
    top:62px!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    height:calc(100dvh - 62px);
    margin:0!important;
    padding:14px 18px 104px!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    background:#fff!important;
    border:0!important;
    z-index:301!important;
  }
  .hdr.open .navlink{
    display:flex!important;
    align-items:center;
    width:100%!important;
    min-height:52px;
    box-sizing:border-box;
    margin:0!important;
    padding:13px 4px!important;
    border-bottom:1px solid var(--line)!important;
    color:var(--ink);
    font-size:.88rem!important;
    font-weight:400;
    line-height:1.55!important;
    text-align:left;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
  }
  .hdr.open .navlink.active{
    color:var(--primaryd)!important;
    font-weight:700!important;
  }

  /* login / cart actions pinned at bottom of the menu */
  .hdr.open .nav-r{
    display:grid!important;
    position:fixed!important;
    box-sizing:border-box;
    left:14px!important;
    right:14px!important;
    top:auto!important;
    bottom:max(12px, env(safe-area-inset-bottom))!important;
    width:auto!important;
    margin:0!important;
    padding:10px!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:8px!important;
    align-items:stretch!important;
    background:rgba(255,255,255,.98)!important;
    border:1px solid var(--line)!important;
    border-radius:14px!important;
    box-shadow:0 10px 30px rgba(26,48,38,.14)!important;
    z-index:303!important;
  }
  .hdr.open .nav-r a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box;
    min-width:0!important;
    min-height:42px;
    margin:0!important;
    padding:8px 6px!important;
    border:1px solid var(--line)!important;
    border-radius:999px!important;
    font-size:.76rem!important;
    font-weight:500;
    line-height:1.35!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:hidden;
  }
  .hdr.open .nav-r a.cart{
    color:#fff!important;
    background:var(--primary)!important;
    border-color:var(--primary)!important;
  }
}

@media (max-width:340px){
  .hdr-in{padding-left:.7rem;padding-right:.7rem}
  .brand img{height:35px;max-width:145px}
  .hdr.open .nav{padding-left:14px!important;padding-right:14px!important}
  .hdr.open .nav-r{left:10px!important;right:10px!important;padding:8px!important;gap:6px!important}
  .hdr.open .nav-r a{font-size:.72rem!important;padding-left:4px!important;padding-right:4px!important}
}


/* v14: mobile header actions stay visible + lock page scroll while menu is open */
@media (max-width:480px){
  body.menu-open{
    overflow:hidden!important;
    overscroll-behavior:none;
  }

  .hdr-in{
    display:grid!important;
    grid-template-columns:82px minmax(0,1fr) 38px;
    align-items:center!important;
    gap:6px!important;
    height:62px!important;
    min-height:62px!important;
    padding:8px 10px!important;
  }
  .brand{
    position:relative!important;
    z-index:304!important;
    display:flex!important;
    align-items:center!important;
    width:82px!important;
    max-width:82px!important;
    min-width:0!important;
  }
  .brand img{
    display:block!important;
    width:82px!important;
    max-width:82px!important;
    height:auto!important;
  }

  /* Login / cart remain in the header in both closed and open states */
  .hdr .nav-r,
  .hdr.open .nav-r{
    position:static!important;
    display:flex!important;
    grid-column:2!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    z-index:304!important;
  }
  .hdr .nav-r a,
  .hdr.open .nav-r a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    min-height:34px!important;
    margin:0!important;
    padding:5px 8px!important;
    border:1px solid var(--line)!important;
    border-radius:999px!important;
    font-size:.68rem!important;
    font-weight:500!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-align:center!important;
  }
  .hdr .nav-r a:first-child,
  .hdr.open .nav-r a:first-child{
    min-width:58px!important;
  }
  .hdr .nav-r a.cart,
  .hdr.open .nav-r a.cart{
    min-width:88px!important;
    color:#fff!important;
    background:var(--primary)!important;
    border-color:var(--primary)!important;
  }

  .navtoggle{
    position:relative!important;
    grid-column:3!important;
    z-index:304!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    margin:0!important;
    padding:6px!important;
    border:1px solid transparent!important;
    border-radius:6px!important;
    background:transparent!important;
  }
  .hdr.open .navtoggle{
    border-color:var(--ink)!important;
  }
  .navtoggle svg{
    width:24px!important;
    height:24px!important;
  }

  /* Only the navigation links belong to the opened hamburger panel */
  .hdr .nav{display:none!important;}
  .hdr.open .nav{
    display:flex!important;
    position:fixed!important;
    box-sizing:border-box!important;
    top:62px!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    height:calc(100dvh - 62px)!important;
    margin:0!important;
    padding:12px 18px 18px!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    background:#fff!important;
    border:0!important;
    z-index:301!important;
  }
}

@media (max-width:340px){
  .hdr-in{
    grid-template-columns:72px minmax(0,1fr) 36px!important;
    gap:4px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }
  .brand{width:72px!important;max-width:72px!important;}
  .brand img{width:72px!important;max-width:72px!important;}
  .hdr .nav-r,.hdr.open .nav-r{gap:4px!important;}
  .hdr .nav-r a,.hdr.open .nav-r a{
    min-height:32px!important;
    padding:4px 6px!important;
    font-size:.64rem!important;
  }
  .hdr .nav-r a:first-child,.hdr.open .nav-r a:first-child{min-width:52px!important;}
  .hdr .nav-r a.cart,.hdr.open .nav-r a.cart{min-width:82px!important;}
  .navtoggle{width:36px!important;height:36px!important;min-width:36px!important;padding:5px!important;}
}

/* v15: keep the site header fixed at the top on every viewport */
.hdr{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  z-index:300!important;
}
body{
  padding-top:89px;
}
[id]{
  scroll-margin-top:105px;
}

@media (max-width:1040px){
  body{padding-top:79px;}
  [id]{scroll-margin-top:95px;}
}

@media (max-width:480px){
  body{padding-top:62px!important;}
  [id]{scroll-margin-top:76px;}

  /* opened menu starts immediately below the permanently fixed header */
  .hdr.open .nav{
    top:62px!important;
    height:calc(100dvh - 62px)!important;
  }
}

/* Econoha commerce refresh v1 - scoped to legacy commerce templates. */
.econoha-commerce{--ec-green:#1f5d42;--ec-dark:#123d2b;--ec-soft:#edf5f0;--ec-ink:#26312b;--ec-muted:#69746e;--ec-line:#d9e2dc;background:#f7f9f7;color:var(--ec-ink)}
.econoha-commerce #contents,.econoha-commerce #contents-body,.econoha-commerce .contents-block,.econoha-commerce .main-box,.econoha-commerce .list-box{box-sizing:border-box;width:100%;max-width:1160px;margin-right:auto;margin-left:auto}
.econoha-commerce #contents-body,.econoha-commerce #section-products{float:none;width:100%}
.econoha-commerce #side,.econoha-commerce #side-left,.econoha-commerce #side-right,.econoha-commerce .side-box{display:none}
.econoha-commerce #section-products{padding:42px 24px 76px;background:transparent}
.econoha-commerce #section-title02{margin:0 0 30px;padding:0 0 18px;border:0;border-bottom:1px solid var(--ec-line);background:transparent;color:var(--ec-dark);font-family:"Noto Serif JP","Yu Mincho",serif;font-size:clamp(28px,4vw,42px);font-weight:600;line-height:1.35;text-align:left}
.econoha-commerce input[type=text],.econoha-commerce input[type=email],.econoha-commerce input[type=password],.econoha-commerce select,.econoha-commerce textarea{box-sizing:border-box;min-height:44px;padding:10px 12px;border:1px solid #cbd6cf;border-radius:6px;background:#fff;color:var(--ec-ink);font-size:16px}
.econoha-commerce input:focus,.econoha-commerce select:focus,.econoha-commerce textarea:focus{border-color:var(--ec-green);outline:3px solid rgba(31,93,66,.13)}
/* Online shop */
.shop-page #PageHead3{display:none}
.shop-page #OnlineShopTitle{margin:0;padding:78px 24px 26px;border:0;background:linear-gradient(135deg,#edf5f0 0%,#f8f5eb 100%);color:var(--ec-dark);font-family:Georgia,"Times New Roman",serif;font-size:clamp(42px,7vw,72px);font-weight:400;letter-spacing:.04em;line-height:1.1;text-align:center}
.shop-page #OnlineShopTitle:after{content:"オンラインショップ";display:block;margin-top:12px;color:var(--ec-green);font-family:"Noto Sans JP","Yu Gothic",sans-serif;font-size:13px;font-weight:600;letter-spacing:.2em}
.shop-page #category_navi{box-sizing:border-box;max-width:1160px;margin:0 auto;padding:28px 24px 10px;background:#fff}
.shop-page #category_navi .g-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.shop-page #category_navi .nav-item{float:none;width:auto;margin:0}
.shop-page #category_navi a{display:flex;min-height:62px;align-items:center;justify-content:center;padding:8px;border:1px solid var(--ec-line);border-radius:8px;background:#fff;transition:.2s}
.shop-page #category_navi a:hover{border-color:#8cab9a;box-shadow:0 8px 22px rgba(25,70,50,.1);transform:translateY(-2px)}
.shop-page #category_navi img{width:auto;max-width:100%;height:auto;max-height:46px}
.shop-page .main-box,.shop-page .list-box{padding:0;border:0;background:transparent}
.shop-page .main-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 18px;margin:0;padding:0;list-style:none}
.shop-page .main-products>li{box-sizing:border-box;float:none;width:auto!important;min-width:0;margin:0!important;padding:14px;border:1px solid var(--ec-line);border-radius:12px;background:#fff;box-shadow:0 5px 18px rgba(27,58,43,.06);transition:.2s}
.shop-page .main-products>li:hover{box-shadow:0 14px 30px rgba(27,58,43,.12);transform:translateY(-3px)}
.shop-page .main-products .photo,.shop-page .main-products .img-box{overflow:hidden;width:100%;border-radius:8px;background:#f2f4f1;aspect-ratio:1/1}
.shop-page .main-products .photo img,.shop-page .main-products .img-box img{width:100%;height:100%;object-fit:cover}
.shop-page #product-box{padding-top:15px}
.shop-page #product-box .name{height:auto!important;min-height:3.4em;padding:0 0 10px!important;color:var(--ec-ink);font-size:15px;font-weight:600;line-height:1.7}
.shop-page #product-box .name a{color:inherit;text-decoration:none}
.shop-page #product-box .price,.shop-page #product-box .price-box{color:var(--ec-dark);font-size:17px;font-weight:700}
.shop-page .pager,.shop-page .page-navi,.shop-page .pagination{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:30px 0}
.shop-page .pager a,.shop-page .page-navi a,.shop-page .pagination a,.shop-page .pager span,.shop-page .pagination span{display:inline-flex;min-width:38px;min-height:38px;align-items:center;justify-content:center;border:1px solid var(--ec-line);border-radius:999px;background:#fff;color:var(--ec-green);text-decoration:none}
/* Cart and login panels */
.cart-page .list-box,.login-page .list-box{padding:34px clamp(18px,4vw,48px) 46px;border:1px solid var(--ec-line);border-radius:14px;background:#fff;box-shadow:0 10px 30px rgba(24,58,42,.07)}
.cart-page .cart-wrap,.login-page .cart-wrap{width:100%;margin:0;color:var(--ec-ink)}
.cart-page .cart-wrap>a[name=carttop]+p.mb-30{margin:0 0 32px;padding:0;text-align:center}
.cart-page .cart-wrap>a[name=carttop]+p.mb-30 img.step{display:none}
.cart-page .cart-wrap>a[name=carttop]+p.mb-30:before{content:"1  カート確認　›　2  お客様情報　›　3  ご注文確認　›　4  完了";display:block;padding:17px 20px;border-radius:10px;background:var(--ec-soft);color:var(--ec-dark);font-size:14px;font-weight:700;letter-spacing:.04em}
.cart-page table{width:100%!important;border-collapse:separate;border-spacing:0;border:1px solid var(--ec-line);border-radius:10px;overflow:hidden;background:#fff}
.cart-page th{padding:13px 12px;border:0;border-bottom:1px solid var(--ec-line);background:var(--ec-soft);color:var(--ec-dark);font-weight:700}
.cart-page td{padding:15px 12px;border:0;border-bottom:1px solid #e7ece9;vertical-align:middle}
.cart-page tr:last-child td{border-bottom:0}
.cart-page .member,.cart-page .new_member,.cart-page .cart-water{box-sizing:border-box;margin:22px 0;border:1px solid var(--ec-line);border-radius:10px;background:#fbfcfb;overflow:hidden}
.cart-page .member_ttl,.cart-page .new_member_ttl{margin:0;padding:14px 18px;background:var(--ec-soft);color:var(--ec-dark);font-size:18px;font-weight:700}
.cart-page .member_box,.cart-page .cart-water{padding:20px}
.cart-page .cart_reg,.cart-page .cart_noreg,.cart-page .cart_login,.cart-page input[type=submit],.cart-page input[type=button]{box-sizing:border-box;display:inline-flex;min-height:48px;align-items:center;justify-content:center;margin:6px;padding:12px 24px;border:1px solid var(--ec-green);border-radius:999px;background:var(--ec-green);color:#fff;font-size:15px;font-weight:700;line-height:1.4;text-decoration:none;cursor:pointer}
.cart-page .cart_noreg{background:#fff;color:var(--ec-green)}
/* Member login */
.login-page .cart-wrap>.mb-40{margin:0 0 24px;padding:26px;border:1px solid var(--ec-line);border-radius:10px;background:#fbfcfb}
.login-page .headline-5{margin:0 0 20px;padding:0 0 12px;border:0;border-bottom:1px solid var(--ec-line);background:transparent;color:var(--ec-dark);font-size:20px;font-weight:700}
.login-page .login{float:none;display:grid;grid-template-columns:max-content minmax(180px,1fr);gap:12px 18px;align-items:center;width:min(100%,680px);line-height:1.5}
.login-page .login input{width:100%;max-width:420px}
.login-page a[href="javascript:func_submit();"]{display:inline-flex;min-width:160px;min-height:48px;align-items:center;justify-content:center;margin-top:18px;border-radius:999px;background:var(--ec-green);color:#fff;font-size:15px;font-weight:700;text-decoration:none}
.login-page a[href="javascript:func_submit();"] img{display:none}
.login-page a[href="javascript:func_submit();"]:after{content:"ログイン"}
.login-page a[href="member_benefit.php"]{display:inline-flex;min-width:250px;min-height:54px;align-items:center;justify-content:center;padding:0 24px;border:1px solid var(--ec-green);border-radius:999px;background:#fff;color:var(--ec-green);font-size:16px;font-weight:700;text-decoration:none}
.login-page a[href="member_benefit.php"] img{display:none}
.login-page a[href="member_benefit.php"]:after{content:"新規会員登録"}
@media(max-width:900px){.shop-page #category_navi .g-nav{grid-template-columns:repeat(3,minmax(0,1fr))}.shop-page .main-products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.econoha-commerce #section-products{padding:26px 14px 52px}.econoha-commerce #section-title02{margin-bottom:22px;font-size:28px}.shop-page #OnlineShopTitle{padding:48px 16px 20px;font-size:44px}.shop-page #category_navi{padding:18px 14px 6px}.shop-page #category_navi .g-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-page #category_navi a{min-height:52px}.shop-page .main-products{gap:14px 10px}.shop-page .main-products>li{padding:9px}.cart-page .list-box,.login-page .list-box{padding:22px 14px 30px;border-radius:10px}.cart-page .cart-wrap>a[name=carttop]+p.mb-30:before{content:"1 カート確認  ›  2 お客様情報  ›  3 ご注文確認";padding:13px 10px;font-size:11px}.cart-page table{display:block;overflow-x:auto;white-space:nowrap}.cart-page .member_box,.cart-page .cart-water,.login-page .cart-wrap>.mb-40{padding:17px 14px}.cart-page .cart_reg,.cart-page .cart_noreg,.cart-page .cart_login,.cart-page input[type=submit],.cart-page input[type=button]{width:100%;margin:6px 0}.login-page .login{display:block}.login-page .login input{display:block;width:100%;margin:7px 0 14px}}

/* Econoha commerce alignment v2 */
.reveal{opacity:1!important;transform:none!important;transition:none!important}
.econoha-commerce{background:#fff}
.econoha-commerce #page-image,
.econoha-commerce #page-image02{display:none!important}
.econoha-commerce .commerce-pagehero{box-sizing:border-box;width:100%;max-width:none;margin:0;padding:72px 24px 76px;background:var(--band,#f6fbf9);text-align:center}
.econoha-commerce .commerce-pagehero .wrap{max-width:1160px;margin:0 auto}
.econoha-commerce .commerce-pagehero .en{display:block;color:var(--primary,#5db078);font-size:12px;font-weight:600;letter-spacing:.3em}
.econoha-commerce .commerce-pagehero h1{margin:.55rem 0 0;color:var(--ink,#2c3531);font-family:var(--headf,"Noto Sans JP",sans-serif);font-size:clamp(30px,4vw,42px);font-weight:400;letter-spacing:.14em;line-height:1.45}
.econoha-commerce .commerce-pagehero p{margin:.75rem 0 0;color:var(--sub,#6b7771);font-size:15px;letter-spacing:.03em}
.shop-page .commerce-category-section{padding:72px 0;background:#fff}
.shop-page .commerce-category-section .wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.shop-page .commerce-category-section .sec-head{margin:0 auto 42px;text-align:center}
.shop-page .commerce-category-section .eyebrow{display:block;margin:0 0 12px;color:var(--primary,#5db078);font-size:12px;letter-spacing:.28em}
.shop-page .commerce-category-section h2{margin:0;color:var(--ink,#2c3531);font-family:var(--headf,"Noto Sans JP",sans-serif);font-size:clamp(26px,3vw,36px);font-weight:400;letter-spacing:.12em}
.shop-page .commerce-category-section .catgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.shop-page .commerce-category-section .catbtn{box-sizing:border-box;display:flex;min-height:220px;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:30px 20px;border:1px solid var(--line,#e7ecea);border-radius:8px;background:#fff;box-shadow:0 12px 30px rgba(60,120,90,.08);color:var(--ink,#2c3531);text-align:center;text-decoration:none;transition:.25s}
.shop-page .commerce-category-section .catbtn:hover{border-color:var(--primary,#5db078);background:var(--band,#f6fbf9);transform:translateY(-4px)}
.shop-page .commerce-category-section .uc-ic{width:48px;height:48px;color:var(--primary,#5db078)}
.shop-page .commerce-category-section .catbtn .en{color:var(--primary,#5db078);font-size:11px;letter-spacing:.18em}
.shop-page .commerce-category-section .catbtn h3{margin:0;color:var(--ink,#2c3531);font-size:18px;font-weight:500;letter-spacing:.04em}
.shop-page .commerce-category-section .catbtn p{margin:0;color:var(--sub,#6b7771);font-size:13px;line-height:1.7}
.shop-page .commerce-category-section .catbtn .go{margin-top:6px;color:var(--primary,#5db078);font-size:13px;font-weight:700}
.shop-page #PageHead3,
.shop-page .legacy-shop-nav,
.shop-page #category_navi,
.shop-page #PageNav,
.shop-page #ShippingCost,
.shop-page #OnlineShopTitle{display:none!important}
.shop-page #main{margin:0;background:var(--band,#f6fbf9)}
.shop-page #main-wrap{max-width:1160px!important;margin:0 auto!important;padding:70px 24px 84px!important}
.shop-page #section-products{padding:0}
.shop-page .list-box:before{content:"ALL ITEMS\Aすべての商品";display:block;margin:0 0 42px;color:var(--ink,#2c3531);font-family:var(--headf,"Noto Sans JP",sans-serif);font-size:32px;font-weight:400;letter-spacing:.12em;line-height:2.1;text-align:center;white-space:pre}
.shop-page .list-box:after{content:"";position:absolute}
.shop-page .main-products .thum_img{overflow:hidden;width:100%;height:auto;aspect-ratio:1/1;border-radius:8px;background:#f2f6f3}
.shop-page .main-products .thum_img img{display:block;width:100%!important;height:100%!important;object-fit:cover}
.shop-page .cart_box{height:auto;overflow:visible;white-space:normal}
.shop-page .goods_num{display:flex;height:auto;align-items:center;justify-content:center;gap:8px;margin:6px 0 8px}
.shop-page .goods_num select{min-width:58px;min-height:42px}
.shop-page a.cart-box{box-sizing:border-box;display:flex;width:100%;min-height:46px;align-items:center;justify-content:center;padding:10px 14px;border:1px solid var(--primary,#5db078)!important;border-radius:999px!important;background:var(--primary,#5db078)!important;color:#fff!important;font-size:14px;font-weight:700;text-decoration:none!important}
.shop-page a.cart-box:hover{filter:brightness(1.06)}
.cart-page #section-title02,
.login-page #section-title02{display:none!important}
.cart-page #main,
.login-page #main{background:#fff}
.cart-page #main-wrap,
.login-page #main-wrap{max-width:1160px!important;margin:0 auto!important;padding:0!important}
.cart-page #section-products,
.login-page #section-products{padding:70px 24px 86px}
.cart-page .list-box{max-width:960px;padding:0;border:0;background:#fff;box-shadow:none}
.cart-page .cart-wrap>a[name=carttop]+p.mb-30{margin-bottom:28px}
.cart-page .cart-wrap>a[name=carttop]+p.mb-30:before{border:1px solid var(--line,#e7ecea);background:var(--band,#f6fbf9);color:var(--primaryd,#3f8f5c)}
.login-page .list-box{max-width:820px;padding:0;border:0;background:#fff;box-shadow:none}
.login-page .cart-wrap>.mb-40{box-sizing:border-box;max-width:520px;margin:0 auto 28px;padding:32px;border:1px solid var(--line,#e7ecea);border-radius:8px;background:#fff;box-shadow:0 12px 30px rgba(60,120,90,.08)}
.login-page .cart-wrap>div:not(.mb-40){box-sizing:border-box;max-width:520px;margin:0 auto;padding:30px;border:1px solid var(--line,#e7ecea);border-radius:8px;background:var(--band,#f6fbf9)}
.login-page .headline-5{font-size:18px;letter-spacing:.04em}
.login-page a[href="javascript:func_submit();"],
.login-page a[href="member_benefit.php"]{border-radius:999px}
@media(max-width:900px){
.shop-page .commerce-category-section .catgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
.econoha-commerce .commerce-pagehero{padding:48px 18px 52px}
.econoha-commerce .commerce-pagehero h1{font-size:28px}
.econoha-commerce .commerce-pagehero p{font-size:13px}
.shop-page .commerce-category-section{padding:48px 0}
.shop-page .commerce-category-section .wrap{padding:0 14px}
.shop-page .commerce-category-section .sec-head{margin-bottom:28px}
.shop-page .commerce-category-section .catgrid{grid-template-columns:1fr;gap:14px}
.shop-page .commerce-category-section .catbtn{min-height:0;padding:24px 16px}
.shop-page #main-wrap{padding:48px 14px 64px!important}
.shop-page .list-box:before{margin-bottom:28px;font-size:25px}
.shop-page a.cart-box{min-height:44px;font-size:13px}
.cart-page #section-products,.login-page #section-products{padding:46px 14px 64px}
.login-page .cart-wrap>.mb-40,.login-page .cart-wrap>div:not(.mb-40){padding:22px 16px}
}

/* v3: keep legacy commerce wrappers inside the mobile viewport */
@media(max-width:640px){
.cart-page .main-box.contents-block,
.login-page .main-box.contents-block,
.cart-page .list-box,
.login-page .list-box,
.cart-page .cart-wrap,
.login-page .cart-wrap{box-sizing:border-box;width:100%!important;min-width:0!important;max-width:100%!important}
.login-page .cart-wrap>.mb-40,
.login-page .cart-wrap>div:not(.mb-40),
.login-page form,
.login-page .login{box-sizing:border-box;width:100%!important;min-width:0!important;max-width:100%!important}
.login-page .login input{box-sizing:border-box;width:100%!important;max-width:none!important}
.cart-page .cart-wrap>a[name=carttop]+p.mb-30:before{white-space:normal;line-height:1.8}
}

/* Shared header: legacy pages use a 14px root, while HOME uses 16px.
   Keep header dimensions independent of each page's root font size. */
#hdr{height:89px;font-family:'Noto Sans JP',sans-serif;font-size:16px;font-weight:400;line-height:1.9;letter-spacing:.32px}
#hdr .hdr-in{box-sizing:border-box;height:88px;min-height:0;padding:19.2px 38.4px;gap:22.4px}
#hdr .brand{flex-shrink:0}
#hdr .brand img{width:auto;height:50px}
#hdr .nav{gap:17.6px}
#hdr .navlink{font-size:13.6px;padding:3.2px 0}
#hdr .nav-r{gap:8.8px}
#hdr .nav-r a{font-size:12.8px;padding:5.12px 13.6px}
#hdr .navtoggle{font-size:24px}
@media(max-width:1040px){
  #hdr{height:79px}
  #hdr .hdr-in{height:78px;padding:14.4px 20.8px}
  #hdr.open .nav{padding:16px 22.4px;gap:14.4px}
  #hdr.open .nav-r{right:16px;margin-top:3.2px}
}
@media(max-width:480px){
  #hdr{height:62px;line-height:1.8;letter-spacing:.3px}
  #hdr .hdr-in{height:61px!important;min-height:0!important}
  #hdr .nav-r a,#hdr.open .nav-r a{font-size:10.88px!important}
  #hdr.open .navlink{font-size:14.08px!important}
}
@media(max-width:340px){
  #hdr .nav-r a,#hdr.open .nav-r a{font-size:10.24px!important}
}

/* Public CMS layouts: remove legacy fixed-width containers, not their content. */
body:has(#hdr) .main-box.contents-block{box-sizing:border-box;min-width:0!important;width:100%!important;max-width:1160px;margin-left:auto;margin-right:auto}
body:has(#hdr) .main-box.contents-block>.list-box,
body:has(#hdr) .main-box.contents-block>form,
body:has(#hdr) .main-box.contents-block form>.list-box{box-sizing:border-box;min-width:0;width:100%;max-width:100%}
body:has(#hdr) .ContentBox{box-sizing:border-box;width:100%;max-width:1160px;padding:64px 24px 0;margin-left:auto;margin-right:auto}
body:has(#hdr) :is(#CorpInfo,#CEOprofile){box-sizing:border-box;width:100%;max-width:1160px;padding-left:24px;padding-right:24px}
body:has(#hdr) :is(.ImgA,.TextA,.PArticleDL,.top_bin01,.top_bin02,.Text_bin,.bin_box,.bin_box p){box-sizing:border-box;max-width:100%}
body:has(#hdr) :is(.ContentBox,#CorpInfo,#CEOprofile) img{max-width:100%;height:auto}
body:has(#hdr) .c3img img{margin-left:auto;margin-right:auto}
body:has(#hdr) .bin_box{display:block;width:100%;max-width:945px}
body:has(#hdr) .bin_box p{width:100%}
body:has(#hdr) .BridgeLink{box-sizing:border-box;width:100%;max-width:945px;table-layout:fixed}
body:has(#hdr) .BridgeLink .Bcont{min-width:0}
body:has(#hdr) .BridgeLink img{max-width:100%;height:auto}
body:has(#hdr) .BridgeLink dl{width:100%;table-layout:fixed}
body:has(#hdr) .ImgCircle{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;width:100%;max-width:1120px}
body:has(#hdr) .ImgCircle>*{float:none;width:100%;height:auto;margin:0;padding:0}
body:has(#hdr) :is(#HowtoMake,#Howtobin,#Howtobin2){display:grid;width:100%;max-width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:0 auto}
body:has(#hdr) #Howtobin{grid-template-columns:repeat(2,minmax(0,1fr))}
body:has(#hdr) :is(#HowtoMake,#Howtobin,#Howtobin2)>dl{float:none;width:auto!important;min-width:0;margin:0;padding:0 0 16px}
body:has(#hdr) :is(#HowtoMake,#Howtobin,#Howtobin2)::after{content:none}
body:has(#hdr) :is(#HowtoMake,#Howtobin,#Howtobin2) dt{display:block;width:100%;min-height:50px;padding-left:60px}
body:has(#hdr) :is(#HowtoMake,#Howtobin,#Howtobin2) dt span{left:0;top:0;z-index:auto}
body:has(#hdr) #Howtobin .bin_ttl{float:none;width:auto}
body:has(#hdr) #Howtobin dl>div{float:none;width:100%;margin-bottom:16px}
body:has(#hdr) :is(#HowtoMake,#Howtobin,#Howtobin2) img{width:100%;height:auto;margin:0 auto}
body:has(#hdr) .top_bin02 dl dd img{margin-bottom:20px}
.shop-page .main-products{width:100%;max-width:100%}
.shop-page #main-wrap #products01.main-products{display:grid!important;width:100%!important;min-width:0!important;max-width:100%!important}
.shop-page #main-wrap #products01.main-products>li{display:block;float:none!important;width:auto!important;min-width:0!important;max-width:none!important;margin:0!important}
.shop-page .main-products::before,.shop-page .main-products::after{content:none}
.shop-page .main-products>li .opacity_box{display:flex;flex-direction:column;width:100%;height:100%}
.shop-page .main-products .thum_img{width:100%;aspect-ratio:1;overflow:hidden}
.shop-page .main-products .thum_img a{display:block;width:100%;height:100%}
.shop-page #main-wrap .main-products .thum_img img{display:block;width:100%;min-width:0!important;max-width:100%;height:100%;object-fit:contain;margin:0}
.shop-page .main-products #product-box{display:flex;flex-direction:column;flex:1;width:100%;min-width:0}
.shop-page .main-products .cart_box{margin-top:auto;width:100%;height:auto;overflow:visible;white-space:normal}
.shop-page .main-products .goods_num{display:flex;align-items:center;justify-content:flex-end;gap:8px;height:auto;margin:8px 0}
.shop-page #main-wrap #products01 #product-box .name{font-size:15px;line-height:1.65;text-align:left;letter-spacing:.02em}
.shop-page #main-wrap #products01 #product-box .name a{word-break:normal;overflow-wrap:normal}
.foot-rich .brandmark{width:150px;height:auto;object-fit:contain}
@media(max-width:1100px){
  body:has(#hdr) :is(#HowtoMake,#Howtobin2){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  body:has(#hdr) .main-box.contents-block{padding-left:16px;padding-right:16px}
  body:has(#hdr) :is(.ContentBox,#CorpInfo,#CEOprofile){padding-left:16px;padding-right:16px}
  body:has(#hdr) .ContentBox{padding-top:40px}
  body:has(#hdr) .ContentBox h2{font-size:23px;line-height:1.6;padding-bottom:32px;letter-spacing:.04em}
  body:has(#hdr) .ContentBox h2 span{padding-bottom:16px}
  body:has(#hdr) .ContentBox h2 span img{max-width:100px;margin:0 auto}
  body:has(#hdr) :is(.top_bin01,.Text_bin,.bin_box p){font-size:15px;line-height:1.9;text-align:left;overflow-wrap:anywhere}
  body:has(#hdr) .Text_bin h3{font-size:19px;line-height:1.6}
  body:has(#hdr) :is(#HowtoMake,#Howtobin,#Howtobin2){grid-template-columns:minmax(0,1fr);gap:24px}
  body:has(#hdr) :is(#HowtoMake,#Howtobin,#Howtobin2) dt{font-size:20px;line-height:1.5}
  body:has(#hdr) .ImgCircle{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:24px 0}
  body:has(#hdr) .BridgeLink{display:block;margin-bottom:40px}
  body:has(#hdr) .BridgeLink>*{display:block;width:100%}
  body:has(#hdr) .BridgeLink .Blogo{width:100px;margin:0 auto 16px;padding:0}
  body:has(#hdr) .BridgeLink .Bcont p{position:static;width:100%;margin:16px 0 0}
  body:has(#hdr) .BridgeLink dl{display:block}
  body:has(#hdr) .BridgeLink dl>*{display:block;width:100%;padding:0}
  body:has(#hdr) .BridgeLink dl dt img{max-width:160px;margin:0 auto 16px}
  body:has(#hdr) .top_bin02 dl dd img{float:none;max-width:100%;margin:0 auto 20px}
  body:has(#hdr) .guide-wrap{min-width:0;width:100%;max-width:100%}
  body:has(#hdr) .guide-wrap table{display:block;max-width:100%;overflow-x:auto}
  body:has(#hdr) :is(.info-table-01,.info-table-02){width:100%;table-layout:fixed;overflow-wrap:anywhere}
  body:has(#hdr) :is(.info-table-01,.info-table-02) :is(th,td){width:auto;min-width:0}
  body.econoha-commerce:has(#hdr) .main-box.contents-block{padding:0}
  .shop-page .main-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .shop-page .main-products>li{padding:10px}
  .shop-page #main-wrap #products01 #product-box .name{font-size:14px}
}

body:has(#hdr) #FlowArea>article{box-sizing:border-box;width:100%;max-width:1160px;padding-left:24px;padding-right:24px}
body:has(#hdr) #FlowArea .TableClum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;width:100%}
body:has(#hdr) #FlowArea .TableClum>*{display:block;min-width:0;width:100%;padding:0;margin:0}
body:has(#hdr) #FlowArea img{width:100%;height:auto;max-width:100%}
body:has(#hdr) #PageNav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 24px;width:100%;max-width:1000px;padding:0 20px 28px}
body:has(#hdr) #PageNav::after{content:none}
body:has(#hdr) #PageNav li{display:block;padding:0;font-size:15px;line-height:1.7;list-style:none}
@media(max-width:767px){
  body:has(#hdr) #FlowArea>article{padding-left:16px;padding-right:16px}
  body:has(#hdr) #FlowArea .TableClum{grid-template-columns:repeat(2,minmax(0,1fr))}
  body:has(#hdr) #PageNav{flex-direction:column;gap:0;padding:0 16px 20px}
  body:has(#hdr) #PageNav li{width:100%;font-size:14px}
  body:has(#hdr) #PageNav li a{display:block;padding:10px 0;line-height:1.65}
}
/* Switch to the compact navigation before the desktop links start wrapping. */
@media(min-width:481px) and (max-width:1200px){
  body:has(#hdr){padding-top:79px}
  #hdr{height:79px}
  #hdr .hdr-in{height:78px;padding:14px 24px;gap:16px}
  #hdr .nav{display:none}
  #hdr .nav-r,#hdr.open .nav-r{display:flex;position:static;margin:0 0 0 auto}
  #hdr .navtoggle{display:flex;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:42px;padding:8px}
  #hdr.open .nav{display:flex;position:fixed;top:79px;left:0;right:0;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0;margin:0;padding:16px 24px;max-height:calc(100dvh - 79px);overflow-y:auto;background:#fff;border-bottom:1px solid var(--line)}
  #hdr.open .navlink{display:flex;align-items:center;min-height:44px;padding:10px 4px;border-bottom:1px solid var(--line)}
}

/* Content-page corrections, 2026-10-07. Keep CMS content and reading order intact. */
body:has(#hdr) .breadcram{box-sizing:border-box;width:100%;max-width:1160px;margin-inline:auto;padding-inline:24px}
body:has(#hdr) #PageNav{box-sizing:border-box}
body:has(#hdr) #PageNav li{min-width:0;margin:0}
body:has(#hdr) #CorpInfo .da03>span{display:block;position:static;float:none;width:100%;max-width:100%;margin:0;padding:0;text-align:right}
body:has(#hdr) input[type="image"].check_submit{max-width:100%;height:auto}
body:has(#hdr) .pager>ul{display:flex;flex-wrap:wrap;justify-content:center;position:static;float:none;width:100%;margin:0;padding:0}
body:has(#hdr) .pager>ul>li{position:static;float:none;left:auto;right:auto}
body:has(#hdr) img[src$="/kusunoki_title.png"]{display:block;max-width:100%;height:auto;margin-inline:auto}
body:has(#hdr) #SupportIntoro>div{width:100%;margin-inline:auto}
body:has(#hdr) #SupportIntoro>div>img{display:block;width:min(100%,1364px);height:auto;margin-inline:auto}
body:has(#hdr) #FlowArea .TableClum img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center}
body:has(#hdr) .ContentBox>h2>span>img{display:block;margin-inline:auto;height:auto}
body:has(#hdr) .ContentBox>h2{text-wrap:balance}

/* The photograph fills exactly the height occupied by its neighbouring copy. */
body:has(#HowtoMake) #c3 .PArticleDL dd{box-sizing:border-box;position:relative;min-height:0;padding:0 0 0 calc(40% + 32px);font-size:17px;line-height:1.9;overflow-wrap:break-word}
body:has(#HowtoMake) #c3 .PArticleDL dd>img{position:absolute;inset:0 auto 0 0;float:none;width:40%;height:100%!important;max-height:none;margin:0;padding:0!important;object-fit:cover;object-position:center}
body:has(#HowtoMake) #c3 .PArticleDL dd::after{content:none}
body:has(#HowtoMake) #c4>.TextA{width:100%;max-width:935px;margin-inline:auto;text-align:left}
body:has(#HowtoMake) #c4 .PArticleDL{padding-bottom:40px}
body:has(#HowtoMake) #c4 .PArticleDL dd>img{max-width:43%;height:auto;margin:0 28px 16px 0}

/* Allow the charcoal title band to span the page, with constrained content below. */
/* The title band already includes its breadcrumb; remove the legacy spacer above it. */
body:has(#hdr):has(#Howtobin) :is(#page-image,#page-image02){display:none}
body:has(#hdr):has(#Howtobin) .cart-wrap:has(#PageHead){margin-top:0}
body:has(#hdr) .main-box.contents-block:has(#Howtobin){max-width:none;padding-inline:0}
body:has(#Howtobin) #PageHead{box-sizing:border-box;width:100%;max-width:none;margin-inline:0}
body:has(#Howtobin) #PageHead .breadcram{box-sizing:border-box;width:100%;max-width:1160px;margin-inline:auto;padding-inline:24px}

/* Each group shares its heading, image and copy rows, even when text wraps. */
body:has(#hdr) :is(#HowtoMake,#Howtobin,#Howtobin2)::before,
body:has(#hdr) :is(#HowtoMake,#Howtobin,#Howtobin2)::after{content:none;display:none}
body:has(#hdr) #HowtoMake{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px;row-gap:16px}
body:has(#hdr) #Howtobin{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;row-gap:16px}
body:has(#hdr) #Howtobin2{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:24px;row-gap:16px}
body:has(#hdr) :is(#HowtoMake,#Howtobin,#Howtobin2)>dl{box-sizing:border-box;display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:16px;padding:0 0 24px;align-content:start}
body:has(#hdr) #Howtobin2>dl{grid-column:span 2}
body:has(#hdr) #Howtobin2>dl:nth-of-type(4){grid-column:2/span 2}
body:has(#hdr) #Howtobin2>dl:nth-of-type(5){grid-column:4/span 2}
body:has(#hdr) :is(#HowtoMake,#Howtobin,#Howtobin2)>dl>dt{box-sizing:border-box;min-width:0;width:100%;min-height:48px;margin:0;padding:0 0 0 58px;line-height:1.5;letter-spacing:0;overflow-wrap:break-word}
body:has(#hdr) :is(#HowtoMake,#Howtobin,#Howtobin2)>dl>dt>span{width:42px;height:42px;line-height:42px;font-size:22px}
body:has(#hdr) :is(#HowtoMake,#Howtobin,#Howtobin2)>dl>div{float:none;width:100%;margin:0;padding:0;align-self:start}
body:has(#hdr) :is(#HowtoMake,#Howtobin,#Howtobin2)>dl>div>img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;margin:0;padding:0}
body:has(#hdr) :is(#HowtoMake,#Howtobin,#Howtobin2)>dl>dd{min-width:0;margin:0;padding:0;font-size:15px;line-height:1.85;text-align:left;word-break:normal;overflow-wrap:break-word}
body:has(#hdr) #Howtobin dt{font-size:23px}
body:has(#hdr) #Howtobin .bin_ttl{float:none;width:auto;padding-top:6px;font-size:15px;line-height:1.7}
body:has(#hdr) #Howtobin2 dt{font-size:19px}
body:has(#hdr) :is(.ContentBox,#SupportIntoro,#BridgePolicy,#FlowArea){overflow-wrap:break-word;word-break:normal}
body:has(#hdr) .ContentBox{scroll-margin-top:105px}
@media(max-width:999px){
  body:has(#hdr) #HowtoMake{grid-template-columns:repeat(2,minmax(0,1fr))}
  body:has(#hdr) #Howtobin2{grid-template-columns:repeat(4,minmax(0,1fr))}
  body:has(#hdr) #Howtobin2>dl:nth-of-type(4){grid-column:span 2}
  body:has(#hdr) #Howtobin2>dl:nth-of-type(5){grid-column:2/span 2}
  body:has(#HowtoMake) #c3 .PArticleDL dd{font-size:16px;padding-left:calc(40% + 24px)}
}
@media(max-width:767px){
  body:has(#hdr) #SupportIntoro{padding-bottom:64px}
  body:has(#hdr) #SupportIntoro :is(p,small){box-sizing:border-box;max-width:100%;padding-inline:16px;text-align:left;line-height:1.9}
  body:has(#hdr) #BridgePolicy{box-sizing:border-box;width:100%;max-width:735px;padding-inline:16px}
  body:has(#hdr) #BridgePolicy .TableClum{width:100%;max-width:590px;table-layout:fixed}
  body:has(#hdr) #BridgePolicy img{max-width:100%;height:auto;margin-inline:auto}
  body:has(#hdr) :is(.TextA,.TextB,#SupportIntoro p)>br{display:none}
  body:has(#hdr) #FlowArea>h2{padding-inline:16px;font-size:22px;line-height:1.7;letter-spacing:.03em}
  body:has(#hdr) #FlowArea h3{line-height:1.6;letter-spacing:.03em}
  body:has(#hdr) #PageTitle2{padding-inline:16px;font-size:26px;line-height:1.6;letter-spacing:.06em}
  body:has(#hdr) #PageTitle2 small{font-size:15px;letter-spacing:.02em}
  body:has(#Howtobin) #PageHead .breadcram{padding-inline:16px}
  body:has(#HowtoMake) #c3 .PArticleDL dd{min-height:0;padding:0;font-size:15px;line-height:1.9}
  body:has(#HowtoMake) #c3 .PArticleDL dd>img{position:static;float:none;width:100%;height:auto!important;aspect-ratio:4/3;margin:0 0 20px}
  body:has(#HowtoMake) #c4 .PArticleDL dd>img{float:none;max-width:100%;width:min(100%,480px);margin:0 auto 24px}
  body:has(#hdr) .ContentBox{scroll-margin-top:82px}
}
@media(max-width:599px){
  body:has(#hdr) :is(#HowtoMake,#Howtobin,#Howtobin2){grid-template-columns:minmax(0,1fr);gap:16px}
  body:has(#hdr) #Howtobin2>dl:nth-of-type(n){grid-column:auto}
  body:has(#hdr) #Howtobin dt{font-size:21px}
  body:has(#hdr) #BridgePolicy h2{font-size:26px;overflow-wrap:normal}
  body:has(#hdr) .ContentBox>h2{font-size:22px;letter-spacing:.02em}
}

/* Product rows, 2026-10-08: share the name/badge/price tracks without truncating copy. */
.shop-page #main-wrap #products01.main-products{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 18px;margin:0 0 24px}
.shop-page #main-wrap #products01.main-products>li:hover{transform:none}
.shop-page #main-wrap #products01 .opacity_box{opacity:1!important}
.shop-page #main-wrap #products01>li:not(:has(#product-box)){display:none!important}
.shop-page #main-wrap #products01 #product-box{box-sizing:border-box;min-width:0;padding-top:14px}
.shop-page #main-wrap #products01 #product-box>.name{box-sizing:border-box;min-width:0;min-height:0;margin:0!important;padding:0 0 8px!important;white-space:normal;overflow:visible;overflow-wrap:anywhere;word-break:normal}
.shop-page #main-wrap #products01 #product-box>.name a{overflow-wrap:anywhere;word-break:normal}
.shop-page #main-wrap #products01 #product-box>.icon-box{box-sizing:border-box;min-height:28px;height:auto;overflow:visible;margin:0;padding:0 0 5px}
.shop-page #main-wrap #products01 .icons{display:flex;flex-wrap:wrap;gap:4px;min-height:0}
.shop-page #main-wrap #products01 .icons::before,.shop-page #main-wrap #products01 .icons::after{content:none}
.shop-page #main-wrap #products01 .icons>div{float:none;margin:0;padding:3px 6px;line-height:1.5;font-size:11px;white-space:normal}
.shop-page #main-wrap #products01 #product-box>.price{box-sizing:border-box;min-width:0;width:100%;height:auto;margin:0!important;padding:0 0 10px!important;font-size:17px;line-height:1.7;font-weight:700;font-style:normal;text-align:right;letter-spacing:0;white-space:normal;overflow:visible}
.shop-page #main-wrap #products01 #product-box>.price :is(span,em){font:inherit;color:inherit;white-space:nowrap}
.shop-page #main-wrap #products01 .desc-box{height:auto;white-space:normal;overflow:visible;overflow-wrap:anywhere;font-size:13px;line-height:1.7}
.shop-page #main-wrap #products01 .cart_box{margin:0;align-self:start}
.shop-page #main-wrap #products01 .goods_num{box-sizing:border-box;min-height:44px;margin:0 0 8px;gap:6px;font-size:13px;white-space:nowrap}
.shop-page #main-wrap #products01 .goods_num select{box-sizing:border-box;min-width:50px;width:64px;max-width:100%;padding:6px;min-height:44px}
.shop-page #main-wrap #products01 :is(a.cart-box,.soldout){box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-width:0;width:100%;min-height:44px;margin:0;padding:10px 5px;line-height:1.5;font-size:13px;letter-spacing:0;text-align:center;white-space:normal}
.shop-page #main-wrap #products01 .soldout{border:1px solid var(--ec-line);border-radius:999px;background:#f5f7f5;color:var(--sub)}
@supports(grid-template-rows:subgrid){
  .shop-page #main-wrap #products01.main-products>li{display:grid;grid-template-rows:subgrid;grid-row:span 6;row-gap:0}
  .shop-page #main-wrap #products01>li>.opacity_box{display:grid;grid-template-rows:subgrid;grid-row:1/-1;row-gap:0;height:auto}
  .shop-page #main-wrap #products01 .opacity_box>.thum_img{grid-row:1;align-self:start}
  .shop-page #main-wrap #products01 .opacity_box>.clearfix{display:none}
  .shop-page #main-wrap #products01 #product-box{display:grid;grid-template-rows:subgrid;grid-row:2/span 5;row-gap:0}
  .shop-page #main-wrap #products01 #product-box>.name{grid-row:1}
  .shop-page #main-wrap #products01 #product-box>.icon-box{grid-row:2}
  .shop-page #main-wrap #products01 #product-box>.price{grid-row:3;align-self:start}
  .shop-page #main-wrap #products01 #product-box>.desc-box{grid-row:4}
  .shop-page #main-wrap #products01 #product-box>.cart_box{grid-row:5}
}
@media(max-width:900px){
  .shop-page #main-wrap #products01.main-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;margin-bottom:18px}
}
@media(max-width:480px){
  .shop-page #main-wrap #products01.main-products{column-gap:10px}
  .shop-page #main-wrap #products01.main-products>li{padding:8px}
  .shop-page #main-wrap #products01 #product-box>.name{font-size:13px;line-height:1.65}
  .shop-page #main-wrap #products01 #product-box>.price{font-size:clamp(12px,3.3vw,14px)}
  .shop-page #main-wrap #products01 :is(a.cart-box,.soldout){font-size:12px}
  .shop-page #main-wrap #products01 .goods_num{font-size:12px;gap:4px}
}

/* Product detail pages: readable copy and bounded photos on both CMS templates. */
body:has(#hdr):has(#product-box02) #main-wrap{box-sizing:border-box;width:100%;max-width:1160px;margin-inline:auto;padding:40px 24px 72px}
body:has(#hdr):has(#product-box02) #PageHead3{display:none}
body:has(#hdr):has(#product-box02) :is(.main-box,.products-box){box-sizing:border-box;float:none;width:100%;max-width:100%;margin:0;padding:0}
body:has(#hdr):has(#product-box02) #section-products{margin:0;padding:0}
body:has(#hdr) .products-box #section-title03{box-sizing:border-box;width:100%!important;max-width:900px;margin:0 auto 28px!important;padding:0;font-size:26px;line-height:1.65;letter-spacing:.03em;text-wrap:balance;text-align:center;border:0;background:none}
body:has(#hdr) .products-box :is(.slider,.bx-wrapper){box-sizing:border-box;max-width:680px!important;margin:0 auto 32px;padding:0;border:0;box-shadow:none}
body:has(#hdr) .products-box .slider img{display:block;max-width:100%;width:auto;height:auto;max-height:520px;margin-inline:auto;object-fit:contain}
body:has(#hdr) .products-box #product-center{box-sizing:border-box;float:none;width:100%;max-width:760px;margin:28px auto;padding:0}
body:has(#hdr) .products-box p#product-center:empty{display:none}
body:has(#hdr) .products-box #product-box02{box-sizing:border-box;width:100%;min-width:0;margin:0;padding:0;line-height:1.9;overflow-wrap:break-word;word-break:normal}
body:has(#hdr) #product-box02>.price{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 8px;width:100%;margin:16px 0;padding:0;font-size:18px;line-height:1.8;letter-spacing:0}
body:has(#hdr) #product-box02>.price>span{font-size:inherit;white-space:nowrap}
body:has(#hdr) #product-box02 select{box-sizing:border-box;min-width:64px;min-height:44px;padding:6px 10px;font-size:16px}
body:has(#hdr) #product-box02 :is(.products_cart_btn,.cart-box){box-sizing:border-box;width:100%;max-width:400px;margin:20px auto}
body:has(#hdr) #product-box02 .cart-box{display:flex;align-items:center;justify-content:center;min-height:48px;padding:12px 20px;border:1px solid var(--primary);border-radius:999px;background:var(--primary);color:#fff;font-size:16px;font-weight:700;text-decoration:none}
body:has(#hdr) #product-box02 #product-txt{box-sizing:border-box;width:100%;height:auto;margin:24px 0;padding:20px;border:1px solid var(--line);border-radius:8px;background:var(--band);font-size:15px;line-height:1.9;text-align:left;white-space:normal;overflow:visible}
body:has(#hdr):has(#product-box02) :is(.detail,#userVoice){box-sizing:border-box;width:100%;max-width:760px;margin:32px auto 0;line-height:1.9;overflow-wrap:anywhere}

/* Public forms and information pages keep comfortable gutters at narrow widths. */
body:has(#hdr):has(form[action*="password.php"]) #main-wrap,
body:has(#hdr):has(.kiyaku) #main-wrap{box-sizing:border-box;width:100%;max-width:960px;margin-inline:auto;padding:48px 24px 72px}
body:has(#hdr):has(form[action*="password.php"]) :is(.main-box,.list-box,.cart-wrap),
body:has(#hdr):has(.kiyaku) :is(.main-box,.list-box,.cart-wrap){box-sizing:border-box;float:none;width:100%;max-width:100%;margin:0;padding:0;line-height:1.9}
body:has(#hdr):has(form[action*="password.php"]) #section-title02,
body:has(#hdr):has(.kiyaku) #section-title02{margin:0 0 28px;padding:0 0 18px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font-size:26px;line-height:1.6;text-wrap:balance;text-align:center}
body:has(#hdr):has(form[action*="password.php"]) .login{display:flex;flex-wrap:wrap;align-items:center;gap:12px;float:none;width:100%;margin:24px 0}
body:has(#hdr):has(form[action*="password.php"]) #mail_address{box-sizing:border-box;flex:1 1 240px;width:100%;max-width:100%;min-width:0;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:6px;font-size:16px}
body:has(#hdr) :is(.kiyaku,.wrapper-privacy){box-sizing:border-box;max-width:100%;padding:20px;font-size:14px;line-height:1.9;overflow-wrap:break-word}
body:has(#hdr):has(.kiyaku) #step_sp{box-sizing:border-box;width:100%;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body:has(#hdr):has(.kiyaku) #step_sp>li{box-sizing:border-box;float:none;width:100%;height:auto;margin:0;padding:10px;font-size:12px;line-height:1.7}
body:has(#hdr) :is(.btn-send.btn-big,.btn-new.btn-big){box-sizing:border-box;width:100%;max-width:360px;min-height:48px;height:auto;margin:0;padding:12px 16px;border:1px solid var(--primary);border-radius:999px;background:var(--primary);color:#fff;font-size:15px;line-height:1.6;white-space:normal}
body:has(#hdr) .btn-new.btn-big{background:#fff;color:var(--primary)}
body:has(#hdr) :is(#PageTitle,#PageTitle2,.commerce-pagehero h1,.sec-head h2,#FlowArea h2){text-wrap:balance}
@media(max-width:767px){
  body:has(#hdr):has(#product-box02) #main-wrap,
  body:has(#hdr):has(form[action*="password.php"]) #main-wrap,
  body:has(#hdr):has(.kiyaku) #main-wrap{padding:32px 16px 48px}
  body:has(#hdr) .products-box #section-title03{font-size:21px;line-height:1.65;letter-spacing:.02em}
  body:has(#hdr) .products-box :is(.slider,.bx-wrapper){max-width:100%!important;margin-bottom:24px}
  body:has(#hdr) .products-box .slider img{max-height:400px}
  body:has(#hdr) .products-box #product-center{margin:24px auto}
  body:has(#hdr) #product-box02>.price{font-size:16px}
  body:has(#hdr) #product-box02 #product-txt{padding:16px}
  body:has(#hdr):has(form[action*="password.php"]) #section-title02,
  body:has(#hdr):has(.kiyaku) #section-title02{font-size:22px}
}
/* Join the CMS row groups so desktop /sp/ lists contain four real products per row. */
.shop-page #main-wrap #F1:has(>.main-products){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:18px;row-gap:0;width:100%;min-width:0}
.shop-page #main-wrap #F1>#products01.main-products{display:contents!important}
.shop-page #main-wrap #F1>#products01.main-products::before,.shop-page #main-wrap #F1>#products01.main-products::after{content:none!important}
.shop-page #main-wrap #F1>#products01.main-products>li{margin:0 0 24px!important}
@media(max-width:900px){
  .shop-page #main-wrap #F1:has(>.main-products){grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
  .shop-page #main-wrap #F1>#products01.main-products>li{margin-bottom:18px!important}
}
@media(max-width:640px){
  .shop-page #main-wrap #F1:has(>.main-products){column-gap:10px}
}

/* Override the legacy product rule's block layout so the cart label is centered. */
.shop-page #main-wrap #products01 #product-box a.cart-box{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 5px;
}