/* PACKLAB 2026-10 リニューアル（黄色×黒の「探しやすい」デザイン）。旧 style.css は使わない */

/* ---------- トークン ---------- */
:root{
  --yellow:#FFF100;       /* ナビ帯・見出しの箱・ボタン */
  --yellow-pale:#FFFBCC;  /* セクションの帯 */
  --black:#1A1A1A;
  --white:#FFFFFF;
  --gray:#F5F5F5;
  --muted:#5C5C5C;
  --red:#E60012;          /* 差し色（無料サンプル・新着）だけ */
  --navy:#111E3D;         /* ロゴ色 */
  /* 書体は html に .wf が付いてから Noto Sans JP・Montserrat にする（それまでは端末の文字。lib/font-boot.js・js/site.js） */
  --font:"Hiragino Sans",sans-serif;
  --font-en:"Hiragino Sans",sans-serif;
  --hard:4px 4px 0 var(--black);
  --wrap:1100px;
  --gutter:clamp(16px,4vw,40px);
}
html.wf{
  --font:"Noto Sans JP","Hiragino Sans",sans-serif;
  --font-en:"Montserrat","Noto Sans JP",sans-serif;
}

/* ---------- ベース ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:130px}
/* 画面が広いとき（1350px以上）は、ブラウザの表示倍率を125%にしたのと同じ大きさで見せる。
   1350÷1.25＝1080px なので、拡大後の幅でもPC用の並び（下の max-width:1080px より広い側）のまま収まる。
   寸法はすべて px なので、rem の基準を変える方法では大きくならない。mv.js は zoom の倍率ぶん、写真の描画を細かくしている */
@media (min-width:1350px){html{zoom:1.25}}
/* 文章の最後に1〜2文字だけ残る行を減らす。見出し・短い説明は行の長さをそろえる（対応していないブラウザは今までどおり） */
p,li,dd{text-wrap:pretty}
h1,h2,h3,.st__ja,.phero__d,.cta__b,.merit__d,.data__s,.data__l,.pcard__n,.intro__b{text-wrap:balance}
.intro__t{word-break:keep-all;overflow-wrap:anywhere} /* 語の途中で切れないよう、HTML側の <wbr> の位置だけで折り返す */
body{margin:0;background:var(--white);color:var(--black);font-family:var(--font);font-weight:500;line-height:1.85;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,fieldset,legend{margin:0;padding:0}
fieldset{border:0}
ul,ol{list-style:none}
[hidden]{display:none!important}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:860px}
.center{text-align:center;margin-top:36px}
.center>.sqbtn,.center>.pillbtn{margin:6px}
.note{font-size:13px;color:var(--muted);margin-top:12px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--black);color:#fff;padding:8px 16px}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--black);outline-offset:3px;box-shadow:0 0 0 6px var(--yellow)}
.ic{width:1.1em;height:1.1em;flex:none}

/* ---------- ボタン：黒い丸ボタン／黄色い四角ボタン（黒フチ＋硬い影） ---------- */
.pillbtn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:60px;padding:12px 40px;background:var(--black);color:#fff;border-radius:999px;font-weight:900;font-size:17px;text-decoration:none;transition:transform .15s,background .15s}
.pillbtn:hover{background:#3A3A3A;transform:translateY(-2px)}
.pillbtn small{display:block;font-size:12px;font-weight:700;opacity:.8;line-height:1.3}
.pillbtn span{display:flex;flex-direction:column;text-align:left;line-height:1.35}
.pillbtn--wide{width:100%;justify-content:space-between}
.sqbtn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:10px 32px;background:var(--yellow);color:var(--black);border:2px solid var(--black);box-shadow:var(--hard);font-weight:900;font-size:16px;text-decoration:none;cursor:pointer;font-family:inherit;transition:transform .12s,box-shadow .12s}
.sqbtn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--black)}
.sqbtn--ghost{background:#fff}
.sqbtn--sm{min-height:42px;padding:6px 14px;font-size:13.5px;box-shadow:3px 3px 0 var(--black)}
.sqbtn--wide{width:100%}
.tlink{display:inline-flex;align-items:center;gap:4px;font-weight:900;font-size:14px;text-decoration:none;border-bottom:3px solid var(--yellow)}
.tlink:hover{background:var(--yellow)}
.tlink{position:relative}
.tlink::after{content:"";position:absolute;inset:-6px -4px} /* 押せる範囲だけ広げる（見た目は変えない）。隣のリンク・ボタンとは重ならない広さに留める */

/* ---------- ヘッダー：白い上段＋黄色いナビ帯 ---------- */
.hd{position:sticky;top:0;z-index:50;background:#fff}
.hd__top{max-width:1200px;margin:0 auto;padding:10px var(--gutter);display:flex;align-items:center;gap:24px}
.hd__logo img{width:150px}
.hd__tag{font-size:13px;font-weight:700}
.hd__tel{margin-left:auto;font-family:var(--font-en);font-weight:700;font-size:14px;text-decoration:none}
.hd__nav{background:var(--yellow);display:flex;align-items:center;justify-content:center;gap:22px;padding:10px var(--gutter)}
.hd__nav ul{display:flex}
.hd__nav li+li{border-left:1px solid var(--black)}
.hd__nav ul a{display:block;padding:2px 18px;font-weight:700;font-size:14px;text-decoration:none}
.hd__nav ul a:hover{text-decoration:underline;text-underline-offset:5px}
.hd__pill{position:relative;display:inline-flex;align-items:center;gap:4px;background:var(--red);color:#fff;font-weight:900;font-size:14px;border-radius:999px;padding:4px 12px 4px 18px;text-decoration:none}
.hd__pill small{position:absolute;left:50%;top:-18px;transform:translateX(-50%);color:var(--black);font-size:11px;white-space:nowrap}
.hd__quote{min-height:36px;padding:4px 14px;box-shadow:2px 2px 0 var(--black);background:#fff}
.hd__toggle{display:none;margin-left:auto;width:48px;height:48px;border:2px solid var(--black);background:var(--yellow);padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.hd__toggle span{display:block;width:22px;height:2px;background:var(--black);transition:transform .2s,opacity .2s}
.nav-open .hd__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .hd__toggle span:nth-child(2){opacity:0}
.nav-open .hd__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- 黄色い箱の見出し（1行ずつ重ねる） ---------- */
.boxttl{display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:900;font-size:clamp(26px,3.6vw,46px);line-height:1.25;letter-spacing:.04em}
.boxttl span{display:inline-block;background:var(--yellow);padding:6px 20px;box-shadow:0 6px 18px rgba(0,0,0,.1)}

/* ---------- トップ：メインビジュアル ---------- */
/* 真ん中のメイン（.mv__stage）の左右に、前後のバナーが少し見えて、横にスライドする。はみ出す部分は .mv で切る */
.mv{position:relative;overflow:hidden}
.mv__stage{--gap:16px;position:relative;width:min(1000px,calc(100% - 2*clamp(28px,9vw,160px)));margin:0 auto;aspect-ratio:16/8;min-height:360px}
.mv__ph{position:absolute;inset:0}
.mv__ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(1.04)}
.mv__ph img[data-banner]{filter:none}
/* 画像は重ねて置き、JSなしでは1枚だけ見せる。js/mv.js が .mv--js を付けると、全部を横に並べてスライドさせる（位置は picture の transform）。
   2枚目以降は loading="lazy" で待たせ、1枚目が出てから mv.js が読み始める */
.mv__ph picture{position:absolute;inset:0;display:block}
.mv__ph picture+picture{display:none}
.mv--js .mv__ph picture{display:block;opacity:.5;transition:transform .6s cubic-bezier(.4,0,.2,1),opacity .6s ease}
.mv--js .mv__ph picture.is-cur{opacity:1}
.mv--js .mv__ph picture.is-jump{transition:none}
.mv--js .mv__ph picture{cursor:pointer}
.mv--js .mv__ph picture.is-cur{cursor:default}
.mv__copy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:24px;width:max-content;max-width:92%}
.mv__en{font-family:var(--font-en);font-weight:700;font-size:14px;letter-spacing:.2em;background:var(--black);color:var(--yellow);padding:2px 12px}
.mv__copy{transition:opacity .3s ease}
/* 前・次のボタン（js/mv.js が、JSが動くときだけ作る。バナーが出ている間も、消さない） */
.mv__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;background:#fff;color:var(--black);border:3px solid var(--black);box-shadow:0 4px 12px rgba(0,0,0,.2);cursor:pointer;transition:background .2s,transform .2s}
.mv__nav svg{width:20px;height:20px}
.mv__nav--prev{left:12px}
.mv__nav--next{right:12px}
@media (prefers-reduced-motion:reduce){.mv--js .mv__ph picture{transition:none}}
.mv__nav:hover{background:var(--yellow)}
.mv__nav:active{transform:translateY(-50%) scale(.94)}
.mv__nav:focus-visible{outline:3px solid var(--black);outline-offset:3px}
.badge{position:absolute;right:20px;bottom:20px;width:160px;height:160px;border-radius:50%;background:#fff;border:6px solid var(--yellow);box-shadow:0 0 0 2px var(--black),0 10px 24px rgba(0,0,0,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:900;font-size:24px;line-height:1.2;color:var(--navy);text-decoration:none;transition:transform .2s,opacity .3s ease}
.badge:hover{transform:rotate(-6deg) scale(1.04)}
/* 文字入りのバナー（1・2枚目）が出ている間は、重ねている見出し・ボタン・バッジを消す。mv.js が .mv--banner を付け外しする。
   見出し（h1）は opacity だけにして読み上げに残す。押せるもの（ボタン・バッジ）は、薄くなったあとで visibility:hidden にして、見えないリンクにTabで止まらないようにする。
   元に戻すときは、すぐ見えるようにする（transition の delay は、バナーの側だけに付ける） */
.mv--banner .mv__copy,.mv--banner .badge{opacity:0;pointer-events:none}
.mv--banner .mv__copy a{visibility:hidden;transition:visibility 0s linear .3s}
.mv--banner .badge{visibility:hidden;transition:transform .2s,opacity .3s ease,visibility 0s linear .3s}
/* バナーは完成した絵なので、写真用の色の補正（彩度・明るさ）は掛けない。JSなしの静止表示でも、窓が狭ければ切り取らず全体を見せる（余白は黄色） */
.mv__ph img[data-fit="contain"]{object-fit:contain;background:var(--yellow);filter:none}
/* 「動きを減らす」設定（mv.js が .mv--static を付ける）の静止表示は、バナーではなく、最初の写真（バナー2枚の次の、3枚目）と、見出し・ボタン・バッジ。バナーのままだと、これらが消えて押せなくなる */
.mv--static .mv__ph picture:nth-child(-n+2){display:none}
.mv--static .mv__ph picture:nth-child(3){display:block}
/* 同じ静止表示を、JSを待たずに、最初の描画から出す（mv.js は defer のため、待つと、バナーが一瞬見えてから写真に変わる）。JSなしは、head の noscript で同じ規則 */
@media (prefers-reduced-motion:reduce){
.mv .mv__ph picture:nth-child(-n+2){display:none}
.mv .mv__ph picture:nth-child(3){display:block}
.mv--banner .mv__copy,.mv--banner .badge{opacity:1;pointer-events:auto}
.mv--banner .mv__copy a,.mv--banner .badge{visibility:visible}
}
.badge__s{font-size:12px;color:var(--black);margin-bottom:2px}
.badge__ar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--yellow);margin-top:6px;font-size:14px;color:var(--black)}

.anchor{background:var(--gray);padding:14px var(--gutter)}
.anchor ul{display:flex;flex-wrap:wrap;justify-content:center}
.anchor li+li{border-left:1px solid var(--black)}
.anchor a{display:flex;flex-direction:column;align-items:center;padding:0 18px;font-weight:700;font-size:14px;text-decoration:none}
.anchor a:hover{color:var(--muted)}

.intro{padding:64px 0;text-align:center}
/* ABOUT は、すぐ下の「品質・環境・SNS」と同じ背景色にして、ひとつのセクションに見せる（間の余白は詰める） */
.intro.sec--pale{padding-bottom:0}
.intro.sec--pale + .sec--pale{padding-top:clamp(32px,4vw,48px)}
.intro__t{font-weight:900;font-size:clamp(22px,3vw,34px);letter-spacing:.04em}
.intro__b{margin:14px auto 0;max-width:46em;color:var(--muted)}
.intro__box{margin:36px auto 0;max-width:680px;border:1px solid var(--black);border-radius:8px;padding:20px 26px;text-align:left}
.intro__box h3{text-align:center;font-weight:900;font-size:17px;margin-bottom:8px;word-break:keep-all;overflow-wrap:anywhere}
.intro__box p{font-size:14px;color:var(--muted);margin-bottom:10px}

/* ---------- セクション：大きな英字＋小さな日本語 ---------- */
.sec{padding:clamp(56px,8vw,96px) 0}
.sec--tight{padding:clamp(40px,6vw,64px) 0}
.sec--yellow{background:var(--yellow-pale)}
.sec--pale{background:var(--gray)}
.sec--white{background:#fff}
.st{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:36px}
.st--left{align-items:flex-start;text-align:left}
.st__en{font-family:var(--font-en);font-weight:700;font-size:clamp(36px,5vw,58px);line-height:1.1}
.st__ja{font-weight:900;font-size:clamp(16px,1.8vw,20px);letter-spacing:.08em;margin-top:4px}
.lead-c{text-align:center;max-width:46em;margin:-12px auto 32px;color:var(--muted)}

/* ---------- 容器をさがす ---------- */
.finder{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
.fs legend{width:100%;text-align:center;font-weight:900;font-size:18px;margin-bottom:14px}
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:58px;background:#fff;border:2px solid var(--black);box-shadow:var(--hard);font-weight:900;font-size:16px;text-align:center;padding:8px 12px;line-height:1.35;transition:background .12s,transform .12s,box-shadow .12s}
.chip span small{font-size:12px;font-weight:700;color:var(--muted)}
.chip input:checked+span{background:var(--yellow);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--black)}
.chip input:checked+span::before{content:"✓";position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:18px}
.chip input:focus-visible+span{outline:3px solid var(--black);outline-offset:3px}
.finder__foot{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}
.finder__count{font-weight:900;font-size:18px}
.finder__count b{font-family:var(--font-en);font-size:40px;margin-right:4px;background:linear-gradient(transparent 60%,var(--yellow) 60%)}
.finder__empty{text-align:center;font-weight:700;margin-top:20px}

/* 容器カード（トップ） */
.pcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 20px}
.pcard{display:flex;flex-direction:column}
.pcard__ph{position:relative;aspect-ratio:1/1;border:1px solid var(--black);background:#fff;display:grid;place-items:center;padding:16%;overflow:hidden}
.pcard__ph img{position:relative;z-index:1;filter:drop-shadow(12px 10px 0 var(--yellow));max-height:100%;width:auto;object-fit:contain}
.pcard__tag{position:absolute;left:-1px;bottom:-1px;z-index:2;background:var(--yellow);border:1px solid var(--black);font-weight:900;font-size:13px;padding:3px 10px;max-width:96%;line-height:1.35}
.pcard__cat{font-size:12px;font-weight:700;color:var(--muted);margin-top:10px}
.pcard__n{font-weight:900;font-size:16px;line-height:1.45}
.pcard__spec{font-size:13px;margin:6px 0 12px}
.pcard__spec div{display:grid;grid-template-columns:3em 1fr;gap:6px;border-bottom:1px dotted #BDBDBD;padding:3px 0}
.pcard__spec dt{color:var(--muted);font-weight:700}
.pcard__spec dd b{font-family:var(--font-en);font-size:20px;font-weight:800;margin-right:2px}
.pcard__btns{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pcard__btns .sqbtn{padding:6px 8px}

/* 理由・データ */
.merits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.merit{background:#fff;border:2px solid var(--black);padding:20px 18px 22px;position:relative}
.merit__n{position:absolute;left:-2px;top:-18px;background:var(--yellow);border:2px solid var(--black);font-family:var(--font-en);font-weight:800;font-size:18px;padding:0 12px}
.merit__sm{font-size:13px;font-weight:700;color:var(--muted);margin-top:6px}
.merit__t{font-weight:900;font-size:20px;line-height:1.4;margin:6px 0}
.merit__d{font-size:14px}
.merit__d small{color:var(--muted)}
.data{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.data li{min-width:0;background:var(--yellow-pale);border-radius:16px;padding:20px 14px;text-align:center}
.data__l{font-weight:900;font-size:14px}
.data__v{font-weight:900;font-size:14px;margin:6px 0 2px;line-height:1.3}
.data__v b{font-family:var(--font-en);font-weight:800;font-size:clamp(24px,2.4vw,36px);margin:0 1px}
.data__s{font-size:12px;color:var(--muted)}

/* 無料サンプル */
.smp__in{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.smp__copy{text-align:center}
.smp__lead{font-weight:900;font-size:18px;margin-bottom:12px}
.smp__t span:first-child{font-size:1.4em;background:var(--black);color:var(--yellow)}
.smp__kinds{display:inline-block;margin-top:18px;font-weight:900;font-size:20px;border-bottom:4px solid var(--black)}
.smp__how{display:flex;flex-direction:column;gap:14px}
.smp__ph{display:flex;align-items:flex-end;justify-content:center;gap:10px}
.smp__ph img{width:46%;filter:drop-shadow(10px 8px 0 var(--yellow)) drop-shadow(0 0 1px var(--black))}

/* 流れ（トップ・下層の見出し用） */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.flow li{border:2px solid var(--black);padding:16px 16px 20px;background:#fff;position:relative}
.flow li:not(:last-child)::after{content:"";position:absolute;right:-14px;top:50%;transform:translateY(-50%);border-left:12px solid var(--black);border-top:10px solid transparent;border-bottom:10px solid transparent}
.flow__n{display:inline-block;background:var(--yellow);font-family:var(--font-en);font-weight:700;font-size:12px;padding:0 8px}
.flow__n b{font-size:20px;margin-left:4px}
.flow h3{font-weight:900;font-size:17px;margin:8px 0 4px}
.flow p{font-size:14px}
.flow--mini{margin-bottom:56px}
.flow--mini li{padding:12px 14px}

/* 品質・環境・SNS */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tbox{background:#fff;border:1px solid var(--black);padding:22px 22px 24px}
.tbox__t{font-weight:900;font-size:19px;line-height:1.45;margin-bottom:10px;padding-bottom:10px;border-bottom:4px solid var(--yellow)}
.tbox p{font-size:14px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tags li{background:var(--yellow);font-size:12.5px;font-weight:700;padding:2px 8px}
.feed{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0 16px}
.feed img{aspect-ratio:1;object-fit:cover;border:1px solid var(--black)}

/* FAQ */
.faq{max-width:860px;margin:0 auto;display:grid;gap:10px}
.qa{border:2px solid var(--black);background:#fff}
.qa summary{display:flex;align-items:center;gap:14px;padding:14px 16px;font-weight:900;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa__q,.qa__al{display:grid;place-items:center;width:34px;height:34px;flex:none;font-family:var(--font-en);font-weight:800}
.qa__q{background:var(--yellow);border:2px solid var(--black)}
.qa__al{background:var(--black);color:var(--yellow)}
.qa__ic{margin-left:auto;transition:transform .2s}
.qa[open] .qa__ic{transform:rotate(180deg)}
.qa__a{display:flex;gap:14px;padding:14px 16px 18px;border-top:1px dotted #BDBDBD}
.qa__a p{font-size:15px}
.qa__a strong{background:linear-gradient(transparent 60%,var(--yellow) 60%)}

/* ---------- 下層ページの見出し ---------- */
.phero{background:var(--yellow-pale);padding:28px 0 56px;text-align:center;border-bottom:1px solid var(--black)}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:18px;text-align:left}
.crumb a{display:inline-block;padding:7px 2px;text-decoration:none}.crumb a:hover{text-decoration:underline}
.crumb [aria-current]{color:var(--black)}
.phero__en{font-family:var(--font-en);font-weight:700;font-size:clamp(36px,5vw,58px);line-height:1.1;margin-bottom:12px}
.phero__d{margin:22px auto 0;max-width:40em;font-weight:700}

/* 製品一覧 */
.cathd{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;border-bottom:3px solid var(--black);padding-bottom:10px;margin:56px 0 28px;scroll-margin-top:120px}
.cathd:first-child{margin-top:0}
.cathd__t{font-weight:900;font-size:clamp(22px,2.6vw,30px);background:var(--yellow);padding:0 12px}
.cathd__l{font-weight:700;color:var(--muted)}
.cathd .tlink{margin-left:auto}
.pblock{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;padding:36px 0;border-bottom:1px dotted #BDBDBD;scroll-margin-top:120px}
.pblock--rev .pblock__media{order:2}
.pblock__main{border:2px solid var(--black);box-shadow:10px 10px 0 var(--yellow);background:#fff;aspect-ratio:4/3;overflow:hidden}
.pblock__main img{width:100%;height:100%;object-fit:cover}
.pblock__thumbs{display:flex;gap:8px;overflow-x:auto;margin-top:18px;padding-bottom:6px;scrollbar-width:thin;cursor:grab}
.pblock__thumbs button{flex:none;width:76px;padding:0;border:2px solid transparent;background:none;cursor:pointer}
.pblock__thumbs button.is-active{border-color:var(--black);box-shadow:3px 3px 0 var(--yellow)}
.pblock__thumbs img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pblock__code{font-size:13px;font-weight:700;color:var(--muted)}
.pblock__n{font-weight:900;font-size:clamp(22px,2.4vw,28px);line-height:1.4}
.pblock__cap{font-weight:900;margin:2px 0 10px}
.pblock__cap b{font-family:var(--font-en);font-size:40px;background:linear-gradient(transparent 60%,var(--yellow) 60%);margin-right:2px}
.pblock__d{font-size:15px}
.spec{margin:16px 0 20px;border-top:2px solid var(--black)}
.spec div{display:grid;grid-template-columns:7em 1fr;gap:12px;padding:8px 4px;border-bottom:1px dotted #BDBDBD;font-size:14px}
.spec dt{font-weight:900}
.spec--lg{background:#fff;border:2px solid var(--black);padding:6px 20px 10px}
.spec--lg div:last-child{border-bottom:0}
/* バガス製品カタログ：「容器をさがす」の吹き出し（.bubble）と、開くダイアログ（.bgv-dlg）。ページは横スクロール＋ページごとに止まる（scroll-snap）。JS はボタンと枚数だけ */
.finder__bubble{display:flex;justify-content:center;margin:-8px 0 -4px}
.bubble{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:10px 22px;background:var(--yellow);border:2px solid var(--black);border-radius:14px;box-shadow:4px 4px 0 var(--black);color:var(--black);text-decoration:none;font-size:14px;line-height:1.4;transition:transform .15s}
.bubble::before,.bubble::after{content:"";position:absolute;left:50%;border:solid transparent}
.bubble::before{bottom:100%;margin-left:-10px;border-width:0 10px 11px;border-bottom-color:var(--black)}
.bubble::after{bottom:calc(100% - 3px);margin-left:-8px;border-width:0 8px 9px;border-bottom-color:var(--yellow)}
.bubble b{font-weight:900}
.bubble__sp{display:none}
.bubble span{font-weight:700;border-bottom:2px solid var(--black)}
.bubble:hover{transform:translateY(-2px)}
.bubble:focus-visible{outline:3px solid var(--black);outline-offset:4px}
/* ボタンが縦にならぶ幅では、しっぽが一番下のボタン（PP）を指してしまうので、しっぽを出さない */
@media (max-width:700px){.bubble::before,.bubble::after{display:none}.finder__bubble{margin:6px 0 0}.bubble__pc{display:none}.bubble__sp{display:inline}}
.bgv-dlg{--bgv-w:1040px;width:min(96vw,var(--bgv-w));max-height:92vh;padding:0;border:2px solid var(--black);box-shadow:10px 10px 0 var(--yellow);background:#fff;color:var(--black);overflow:auto}
.bgv-dlg::backdrop{background:rgba(0,0,0,.6)}
/* 大きさ：幅は、画面の96%・1040px・（高さからの上限）のいちばん小さいもの。
   ・1350px以上は、サイト全体が1.25倍になる（上の html{zoom}）ので、幅の上限を75%（780px）に抑える
   ・高さからの上限は、ノートPCなどの低い画面で、ページ全体が縦に収まるようにする（画像の縦横比 1800:1272＝約1.415、画像以外の縦の分＝--bgv-chrome、左右の余白と枠＝64px）。
     スマホを横向きにした画面（高さ600px未満）では付けない（幅が狭くなりすぎるので、これまでどおり、ダイアログの中を縦にスクロールする）。dvh が使えないブラウザでも付けない（@supports）
   ・1350px以上は dvh が1.25倍にならないので、1.25で割って合わせる */
@supports (height:1dvh){.bgv-dlg{max-height:92dvh}}
@media (min-height:600px){@supports (height:1dvh){.bgv-dlg{--bgv-h:92dvh;--bgv-chrome:320px;width:min(96vw,var(--bgv-w),calc((var(--bgv-h) - var(--bgv-chrome)) * 1.415 + 64px))}}}
@media (min-width:1350px){.bgv-dlg{--bgv-w:780px}@supports (height:1dvh){.bgv-dlg{--bgv-h:calc(92dvh / 1.25);max-height:calc(92dvh / 1.25)}}}
.bgv-dlg__in{padding:20px clamp(14px,3vw,28px) 24px}
.bgv-dlg__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.bgv-dlg__t{font-weight:900;font-size:clamp(18px,2.4vw,24px);background:var(--yellow);padding:0 12px}
.bgv__lead{margin:0 0 16px;font-weight:700;font-size:14px}
.bgv__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;border:2px solid var(--black);background:#fff;scrollbar-width:none}
.bgv__track::-webkit-scrollbar{display:none}
.bgv__track:focus-visible{outline:3px solid var(--black);outline-offset:3px}
.bgv__page{flex:0 0 100%;scroll-snap-align:start;margin:0}
.bgv__page img{display:block;width:100%;height:auto}
.bgv__bar{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px}
.bgv__count{font-family:var(--font-en);font-weight:800;min-width:5em;text-align:center}
.bgv__bar .sqbtn:disabled{opacity:.35;cursor:default;pointer-events:none}
.spec.spec--p div{grid-template-columns:8em 1fr} /* 製品一覧：「耐冷・耐熱温度」（7文字）が、スマホ幅の6emでも折り返さないように */
.spec-notes{margin:-8px 0 20px;font-size:12px;line-height:1.7;color:var(--muted)}
.pblock__btns{display:flex;flex-wrap:wrap;gap:12px}
/* 新商品（商品名・サイズが決まるまでは、写真と種類だけのカード） */
.nhd{display:flex;align-items:center;gap:10px;font-weight:900;font-size:clamp(18px,2vw,22px);margin:44px 0 22px}
.nbadge{display:inline-block;background:var(--black);color:var(--yellow);font-family:var(--font-en);font-weight:800;font-size:.62em;letter-spacing:.06em;padding:3px 8px;line-height:1.2}
.ngrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px;padding-bottom:36px;border-bottom:1px dotted #BDBDBD}
.ncard{display:flex;flex-direction:column;scroll-margin-top:120px}
.ncard .pblock__main{box-shadow:6px 6px 0 var(--yellow)}
.ncard .pblock__thumbs{margin-top:12px}
.ncard .pblock__thumbs button{width:60px}
.ncard__cat{display:flex;align-items:center;gap:8px;font-weight:900;font-size:16px;margin-top:10px}
.ncard__cat .nbadge{font-size:11px}
.ncard__ask{font-size:13px;color:var(--muted);font-weight:700;margin:6px 0 14px;flex:1}

/* ご利用の流れ */
.fsteps{display:flex;flex-direction:column;gap:56px}
.fstep{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
.fstep--rev .fstep__img{order:-1}
.fstep__t{font-weight:900;font-size:clamp(22px,2.6vw,30px);margin:8px 0 10px}
.fstep__d{margin-bottom:18px}
.fstep__boxes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fbox{border:2px solid var(--black);background:#fff;padding:14px 16px;font-size:14px}
.fbox__h{font-weight:900;border-bottom:3px solid var(--yellow);margin-bottom:8px;padding-bottom:4px}
.fbox--pl{background:var(--yellow-pale)}
.fbox strong{background:linear-gradient(transparent 60%,var(--yellow) 60%)}
.frameimg img,.fstep__img img{border:2px solid var(--black);box-shadow:12px 12px 0 var(--yellow);width:100%;object-fit:cover}
.fstep__img img{aspect-ratio:4/3}

/* 会社概要 */
.mission{text-align:center}
.mission__t{margin-bottom:28px}
.mission__b{max-width:46em;margin:0 auto}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split__lead{font-weight:900;font-size:clamp(20px,2.4vw,28px);line-height:1.5;margin-bottom:14px;background:linear-gradient(transparent 62%,var(--yellow) 62%);display:inline}
.split p+p,.split p+.sqbtn{margin-top:16px}
.split .sqbtn{margin-top:20px}
.op{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:stretch}
.op__map{border:2px solid var(--black);min-height:320px}
.op__map iframe{width:100%;height:100%;border:0;display:block}

/* お知らせ（/js/news.js が描画するクラス） */
.news-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:32px}
.news-tab{font:inherit;font-weight:900;font-size:14px;background:#fff;border:2px solid var(--black);box-shadow:3px 3px 0 var(--black);padding:8px 16px;cursor:pointer}
.news-tab.active{background:var(--yellow);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--black)}
.news-list{border-top:2px solid var(--black)}
.news-row{display:grid;grid-template-columns:120px 1fr auto;gap:18px;align-items:center;padding:16px 4px;border-bottom:1px dotted #BDBDBD;text-decoration:none}
.news-row:hover .news-title{text-decoration:underline}
.news-thumb{aspect-ratio:4/3;background:var(--gray) center/cover;border:1px solid var(--black)}
.news-meta{display:flex;gap:10px;align-items:center;font-size:13px}
.news-date{font-family:var(--font-en);font-weight:700}
.news-title{font-weight:900}
.news-arw{width:20px;height:20px}
.news-tag{display:inline-block;font-size:12px;font-weight:900;padding:1px 10px;border:1px solid var(--black)}
.tag-info{background:#fff}.tag-new{background:var(--yellow)}.tag-event{background:var(--yellow-pale)}.tag-maint{background:var(--gray)}
.news-empty{text-align:center;padding:48px 0;font-weight:700;color:var(--muted)}
.news-pager{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:28px}
.pg-num,.pg-next{display:inline-grid;place-items:center;min-width:40px;height:40px;border:2px solid var(--black);font-weight:900;text-decoration:none;padding:0 10px}
.pg-num.active{background:var(--yellow)}
.pg-next{display:inline-flex;gap:4px}.pg-next svg{width:16px;height:16px}

/* お知らせ詳細 */
.nd .crumb{margin-bottom:24px}
.nd__meta{display:flex;gap:12px;align-items:center;font-family:var(--font-en);font-weight:700}
.nd__t{font-weight:900;font-size:clamp(22px,3vw,32px);line-height:1.5;margin:8px 0 24px}
.nd__hero{margin-bottom:28px}
.nd__b{margin-bottom:12px}
.bar{font-weight:900;font-size:20px;margin:36px 0 14px;padding-left:12px;border-left:8px solid var(--yellow)}
.checks{display:grid;gap:8px}
.checks li{position:relative;padding-left:32px;font-weight:700}
.checks li::before{content:"✓";position:absolute;left:0;top:2px;width:22px;height:22px;display:grid;place-items:center;background:var(--yellow);border:2px solid var(--black);font-size:13px;line-height:1}
.scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.scenes img{aspect-ratio:4/3;object-fit:cover;border:1px solid var(--black)}
.scenes span{display:inline-block;margin-top:6px;background:var(--yellow);font-weight:900;font-size:13px;padding:0 8px}
.nd__nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:40px;flex-wrap:wrap}

/* 規約・404 */
.legal p{margin-bottom:12px}
.legal-lead{font-weight:700;margin-bottom:28px!important}
.legal-block{margin-bottom:28px}
.legal-block h2{font-weight:900;font-size:18px;margin-bottom:10px;padding-left:12px;border-left:8px solid var(--yellow)}
.legal-block ul{list-style:disc;padding-left:1.4em}
.legal-block li{margin:4px 0}
.legal-block a{font-weight:700}
.legal-date{text-align:right;color:var(--muted);font-size:14px}

/* ---------- CTA・フッター ---------- */
.cta{background:var(--yellow);padding:clamp(56px,8vw,96px) 0;text-align:center}
.cta__t span{background:#fff}
.cta__b{margin:18px auto 0;max-width:40em;font-weight:700}
.cta__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:28px}
.ft{background:var(--black);color:#EEE;padding:48px 0 28px;font-size:14px}
.ft__in{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.ft__logo{width:170px;background:#fff;padding:8px 12px;margin-bottom:12px}
.ft__tag{font-weight:700;margin-bottom:10px}
.ft__nav{display:grid;grid-template-columns:repeat(2,1fr);gap:0 20px;align-content:start}
.ft__nav a,.ft__sns a{text-decoration:none}
.ft__nav a{display:block;padding:9px 0}
.ft__sns a{display:inline-block;padding:9px 0}
.ft a[href^="tel:"]{display:inline-block;padding:9px 0}
.legal-lead+.legal-block li a{display:inline-block;padding:7px 0}
.ft__nav a:hover,.ft__sns a:hover{color:var(--yellow)}
.ft__sns{display:flex;gap:16px;margin-top:18px;font-weight:700}
.ft__sns span{opacity:.5}
.ft__c{text-align:center;margin-top:28px;font-size:12px;opacity:.7}
.sticky{display:none}

/* ---------- お問い合わせフォーム（/contact・/thanks） ---------- */
.cform{display:flex;flex-direction:column}
.cform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.frow{display:grid;grid-template-columns:240px minmax(0,1fr);gap:12px 28px;padding:22px 0;border-bottom:2px dotted #BDBDBD}
.cform__hp+.frow{border-top:2px solid var(--black)} /* ハニーポットの次＝先頭の行 */
.frow__label{display:flex;align-items:center;gap:10px;align-self:start;font-weight:900;font-size:16px;line-height:1.5;padding-top:14px}
label.frow__label{cursor:pointer}
.fbadge{display:inline-block;flex:none;padding:0 8px;font-size:12px;font-weight:900;line-height:1.7;background:#fff;color:var(--black);border:2px solid var(--black)}
.fbadge--req{background:var(--red);border-color:var(--red);color:#fff}
.finput{width:100%;min-height:54px;padding:12px 16px;background:#fff;border:2px solid var(--black);border-radius:0;font:inherit;font-weight:500;font-size:16px;line-height:1.6;color:var(--black);box-shadow:inset 3px 3px 0 rgba(0,0,0,.06)}
.finput::placeholder{color:#9A9A9A}
.finput:focus{outline:none;background:var(--yellow-pale);box-shadow:var(--hard)}
.finput--short{max-width:420px}
textarea.finput{min-height:200px;resize:vertical;line-height:1.7}
.chips--form{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.chips--form .chip span{min-height:50px;font-size:15px;box-shadow:3px 3px 0 var(--black)}
.chips--form .chip input:checked+span{box-shadow:1px 1px 0 var(--black)}
.fnote{margin-top:6px;font-size:13px;color:var(--muted)}
.ferr{display:none;margin-top:8px;font-size:14px;font-weight:900;color:var(--red)}
.ferr.is-on{display:block}
.ferr--center{text-align:center}
.frow.is-error .finput{border-color:var(--red);background:#FFF5F5}
.frow.is-error .chip span,.cprivacy__agree.is-error .chip span{border-color:var(--red)}
.cprivacy{margin-top:28px;padding:28px 24px;background:var(--yellow-pale);border:2px solid var(--black);text-align:center}
.cprivacy__t{font-weight:900;font-size:17px}
.cprivacy__links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:16px 0 22px}
.cprivacy__agree{display:flex;justify-content:center}
.cprivacy__agree .chip{width:min(100%,280px)}
.fformerr{display:none;margin-top:20px;padding:12px 16px;background:#FFF5F5;border:2px solid var(--red);color:var(--red);font-weight:900;text-align:center}
.fformerr.is-on{display:block}
.cform__submit{margin-top:36px}
.sqbtn--lg{min-height:68px;padding:12px 64px;font-size:20px}
.sqbtn:disabled{opacity:.55;cursor:wait}
.sqbtn:disabled:hover{transform:none;box-shadow:var(--hard)}
.cthanks{text-align:center}
.cthanks__logo{display:block;margin:0 auto 28px;width:min(240px,70%);height:auto}
.cthanks__msg{font-weight:900;font-size:clamp(17px,2vw,20px);line-height:1.9}
.cthanks .note a{display:inline-block;padding:9px 2px} /* 本文中の電話番号も、押しやすい高さに */
@media (max-width:700px){
  .frow{grid-template-columns:1fr;gap:8px;padding:18px 0}
  .frow__label{padding-top:0}
  .finput--short{max-width:none}
  .cprivacy{padding:22px 16px}
  .sqbtn--lg{width:100%;padding:12px 24px}
}

/* ---------- タブレット ---------- */
@media (max-width:1080px){
  .hd__tag{display:none}
  .hd__nav{gap:12px}
  .hd__nav ul a{padding:2px 10px}
  .pcards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .merits{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px}
  .data{grid-template-columns:repeat(3,minmax(0,1fr))}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow li:nth-child(2)::after{display:none}
  .trio{grid-template-columns:1fr}
}
@media (max-width:900px){
  html{scroll-padding-top:80px}
  .hd__logo{display:inline-flex;align-items:center;min-height:44px}
  .anchor ul{display:grid;grid-template-columns:repeat(3,1fr);row-gap:10px}
  .anchor li+li{border-left:0}
  .anchor li:not(:nth-child(3n+1)){border-left:1px solid var(--black)}
  .anchor a{padding:0 4px;font-size:13px}
  .hd__tel{display:none}
  .hd__toggle{display:flex}
  .hd__nav{position:fixed;inset:68px 0 auto 0;flex-direction:column;align-items:stretch;gap:14px;padding:16px var(--gutter) 24px;transform:translateY(-130%);visibility:hidden;transition:transform .25s,visibility .25s}
  .nav-open .hd__nav{transform:none;visibility:visible}
  .hd__nav ul{flex-direction:column}
  .hd__nav li+li{border-left:0;border-top:1px solid rgba(0,0,0,.25)}
  .hd__nav ul a{padding:12px 4px;font-size:17px}
  .hd__pill{align-self:center;margin-top:16px}
  .hd__quote{align-self:center}
  .mv__stage{aspect-ratio:2/1;min-height:0}
  /* 枠が低い（幅の約41%）ので、見出し・ボタン・バッジを小さくして、枠に収める */
  .mv__copy{gap:10px}
  .mv__en{font-size:12px}
  .mv__copy .boxttl{font-size:clamp(17px,3.2vw,26px);gap:4px}
  .mv__copy .boxttl span{padding:3px 12px}
  .mv__copy .pillbtn{min-height:44px;padding:8px 28px;font-size:15px}
  .badge{width:104px;height:104px;font-size:16px;right:10px;bottom:10px;border-width:5px}
  .badge__s{font-size:11px}
  .badge__ar{width:22px;height:22px;margin-top:3px}
  .smp__in,.split,.op,.pblock,.fstep{grid-template-columns:minmax(0,1fr);gap:28px}
  .pblock--rev .pblock__media{order:0}
  .fstep--rev .fstep__img{order:0}
  .ngrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
}
/* ---------- スマホ ---------- */
@media (max-width:600px){
  .hd__logo img{width:124px}
  .mv__stage{--gap:10px;height:auto;aspect-ratio:6/7}
  .mv__nav{width:36px;height:36px;border-width:2px}
  .mv__nav svg{width:16px;height:16px}
  .mv__nav--prev{left:8px}
  .mv__nav--next{right:8px}
  .mv__copy{top:40%;gap:16px}
  .boxttl{font-size:clamp(20px,6.2vw,26px);gap:6px}
  .boxttl span{padding:4px 12px}
  .badge{width:112px;height:112px;font-size:17px;right:12px;bottom:12px;border-width:5px}
  .badge__s{font-size:11px}
  .badge__ar{width:22px;height:22px;margin-top:4px}
  .anchor a{font-size:12.5px}
  .intro{padding:44px 0}
  .pcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .pcard__n{font-size:14.5px}
  .pcard__spec{font-size:11.5px}
  .pcard__spec div{grid-template-columns:1fr;gap:0}
  .pcard__btns{grid-template-columns:1fr}
  .pcard__tag{font-size:11px}
  .merits,.flow{grid-template-columns:1fr}
  .flow li::after{display:none}
  .data{grid-template-columns:repeat(2,minmax(0,1fr))}
  .data li:last-child{grid-column:1/-1}
  .chips{grid-template-columns:1fr}
  .chips.chips--form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pillbtn,.sqbtn:not(.sqbtn--sm){width:100%}
  .center>.sqbtn,.center>.pillbtn{margin:6px 0}
  .cta__btns{flex-direction:column}
  .fstep__boxes,.scenes{grid-template-columns:1fr}
  .spec div{grid-template-columns:6em 1fr}
  .news-row{grid-template-columns:84px 1fr;gap:12px}
  .news-arw{display:none}
  .cathd .tlink{margin-left:0}
  .ngrid{gap:28px 12px}
  .ncard .pblock__main{box-shadow:4px 4px 0 var(--yellow)}
  .ncard .pblock__thumbs button{width:48px}
  .ncard__cat{font-size:14px}
  .ncard__ask{font-size:12px}
  .ncard .sqbtn{padding:6px 8px;font-size:12.5px}
  .nd__nav{justify-content:center}
  .ft{padding-bottom:96px}
  .ft__in{grid-template-columns:1fr}
  .sticky{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:#fff;border-top:2px solid var(--black)}
  .sticky .sqbtn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- お見積りリスト（/quote・製品一覧の「見積リストに入れる」・ヘッダーの件数） ---------- */
.hd__list{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 14px;border:2px solid var(--black);background:var(--yellow-pale);color:var(--black);font-weight:900;font-size:13.5px;text-decoration:none;box-shadow:2px 2px 0 var(--black)}
.hd__list:hover{background:#fff}
.hd__count{display:inline-block;min-width:24px;padding:0 6px;background:var(--red);color:#fff;border-radius:999px;font-family:var(--font-en);font-size:12px;line-height:20px;text-align:center}
.hd__count[hidden]{display:none}
.qadd{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;width:100%}
.qadd__lb{font-size:13px;font-weight:900}
.qstep{display:inline-flex;align-items:center;border:2px solid var(--black);background:#fff;box-shadow:3px 3px 0 var(--black)}
.qstep__b{width:42px;height:42px;border:0;background:var(--yellow);color:var(--black);font:inherit;font-weight:900;font-size:20px;line-height:1;cursor:pointer}
.qstep__b:disabled{opacity:.4;cursor:not-allowed}
.qstep__n{min-width:64px;padding:0 6px;text-align:center;font-weight:900;font-size:15px;font-variant-numeric:tabular-nums}
.chint{margin:0 0 20px;padding:12px 16px;background:var(--yellow-pale);border:2px solid var(--black);font-weight:700;font-size:14px}
.chint a{font-weight:900}
.qkits{margin-bottom:28px;padding:18px 20px;background:var(--yellow-pale);border:2px solid var(--black)}
.qkits__t{margin:0 0 10px;font-weight:900;font-size:17px}
.qkits__b{display:flex;flex-wrap:wrap;gap:10px}
.qnotice:empty{display:none}
.qfallback{visibility:hidden;animation:qfb 0s 2.5s forwards}
@keyframes qfb{to{visibility:visible}}
.qnotice{margin:0 0 20px;padding:12px 16px;background:#fff;border:2px solid var(--black);box-shadow:var(--hard);font-weight:700;font-size:14px}
.qempty{padding:28px 20px;text-align:center;border:2px dashed #BDBDBD}
.qempty__t{margin:0 0 6px;font-weight:900;font-size:18px}
.qlist{list-style:none;margin:0;padding:0;border-top:2px solid var(--black)}
.qitem{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:6px 20px;align-items:center;padding:18px 0;border-bottom:2px dotted #BDBDBD}
.qitem img{width:120px;height:auto;background:var(--gray)}
.qitem__code{margin:0;font-size:12px;color:var(--muted);font-weight:700}
.qitem__n{margin:0;font-weight:900;font-size:17px;line-height:1.5}
.qitem__spec,.qitem__sets{margin:0;font-size:13px;color:var(--muted)}
.qitem__sets{color:var(--black);font-weight:700}
.qitem__ctl{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.qitem__rm{border:0;background:none;padding:6px 2px;font:inherit;font-size:13px;color:var(--muted);text-decoration:underline;cursor:pointer}
.qsum{margin:14px 0 0;font-weight:900;font-size:17px;text-align:right}
.qtools{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.qpanel{margin:0 0 18px;padding:16px 18px;background:var(--yellow-pale);border:2px solid var(--black)}
.qpanel[hidden]{display:none}
.qcalc__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.qcalc__f{display:flex;flex-direction:column;gap:6px;font-weight:900;font-size:14px}
.qcalc__res{list-style:none;margin:10px 0 0;padding:0}
.qcalc__res li{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;border-top:1px dotted #BDBDBD;font-size:14px}
.qcalc__r{display:flex;align-items:center;gap:10px}
.qmini{padding:4px 12px;border:2px solid var(--black);background:var(--yellow);color:var(--black);font:inherit;font-weight:900;font-size:13px;cursor:pointer}
.qshare__row{display:flex;gap:10px;align-items:center}
.qshare__row .finput{min-width:0}
.qshare__row .sqbtn{flex:none;white-space:nowrap}
.qh{margin:36px 0 6px;padding-top:28px;border-top:2px solid var(--black);font-weight:900;font-size:clamp(20px,2.4vw,26px)}
.qradios{display:flex;gap:22px;margin-bottom:10px}
.qradios label{display:flex;align-items:center;gap:8px;font-weight:900;font-size:16px;cursor:pointer}
.qradios input{width:22px;height:22px;accent-color:var(--black)}
.qchip span{min-width:240px}
.qest{margin-top:12px;padding:12px 16px;background:var(--yellow-pale);border:2px solid var(--black);font-size:14px}
.qest[hidden]{display:none}
.qest p{margin:0}
.qest__t{font-weight:900;font-size:16px}
.qest__n{margin-top:4px;font-size:12.5px;color:var(--muted)}
.qtail{text-align:center}
@media (max-width:700px){
  .qitem{grid-template-columns:84px minmax(0,1fr);gap:6px 14px}
  .qitem img{width:84px}
  .qitem__ctl{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
  .qcalc__g{grid-template-columns:1fr}
  .qshare__row{flex-direction:column;align-items:stretch}
  .qtools .sqbtn{width:100%}
  .qchip span{min-width:0}
}

/* ---------- 「見積リストが作れます」のお知らせ（トップ・views/partials/quote-promo.ejs） ---------- */
.qpromo__t{font-weight:900;letter-spacing:.04em;line-height:1.3;word-break:keep-all;overflow-wrap:anywhere}
.qpromo__lead{font-weight:700;font-size:15px;line-height:1.8}
.qpromo__btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.qpromo__link{display:inline-flex;align-items:center;gap:6px;font-weight:900;font-size:15px;color:inherit}
.qpromo__badge{display:inline-flex;align-items:center;gap:10px;margin:0 0 10px;font-weight:900;font-size:15px}
.qpromo__badge span{background:var(--red);color:#fff;font-family:var(--font-en);font-weight:700;font-size:12px;letter-spacing:.06em;padding:2px 10px}
.qpromo__card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px 44px;align-items:center;background:var(--yellow);border:2px solid var(--black);box-shadow:8px 8px 0 var(--black);padding:clamp(24px,4vw,44px)}
.qpromo__badge span{border:2px solid var(--black)}
.qpromo__t{margin:0 0 14px;font-size:clamp(28px,3.6vw,42px)}
.qpromo__lead{margin:0 0 22px}
.qpromo__btns .sqbtn{background:#fff}
/* 見積リストの画面のイメージ */
.qpromo__mock{background:#fff;border:2px solid var(--black);padding:16px 18px}
.qpromo__mt{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-weight:900;font-size:15px}
.qpromo__mt span{display:inline-block;min-width:24px;padding:0 6px;background:var(--red);color:#fff;border-radius:999px;font-family:var(--font-en);font-size:12px;line-height:20px;text-align:center}
.qpromo__row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 0;border-top:2px dotted #BDBDBD;font-weight:700;font-size:14px}
.qpromo__row img{width:64px;height:auto}
.qpromo__row b{font-size:15px}
.qpromo__send{margin:10px 0 0;background:var(--yellow);border:2px solid var(--black);text-align:center;font-weight:900;font-size:14px;padding:8px}
@media (max-width:900px){
  .qpromo__card{grid-template-columns:1fr}
}
@media (max-width:700px){
  .qpromo__btns{flex-direction:column;align-items:stretch;text-align:center}
  .qpromo__btns .qpromo__link{justify-content:center}
}