:root{--navy:#1d2a44;--bg:#fff;--ink:#222;--muted:#777;--line:#e6e1da;--accent:#7a1f2b;--card:#fff;--soft:#f0ece6;--ok:#3d6b4f}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;line-height:1.7}
a{color:inherit;text-decoration:none}
.shell{max-width:1272px;margin:0 auto;padding:0 16px}

/* header */
header{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);z-index:10}
.top{font-size:12px;color:#e3e7ef;background:var(--navy);padding:6px 0;letter-spacing:.05em}
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:80px}
.bar .search{display:flex;align-items:center;max-width:310px;border-bottom:1px solid #999}
.bar .search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:16px;padding:10px 8px;color:var(--ink);font-family:inherit}
.bar .search input::placeholder{color:#777}
.bar .search button{border:0;background:none;padding:6px 8px;color:#222;cursor:pointer;display:flex}
.logo{display:flex;flex-direction:column;align-items:center;line-height:1;font-family:"Times New Roman",Times,Georgia,serif}
.logo .l1{color:#2a4f96;font-size:31px;font-weight:500;letter-spacing:-.01em;transform:scaleX(.86)}
.logo .l2{color:#111;font-size:15px;letter-spacing:.08em;margin-top:10px}
.bar .menu{justify-self:end;visibility:hidden;border:0;background:none;padding:4px;color:#222;cursor:pointer;display:flex}
.navwrap{border-top:1px solid var(--line)}
.gnav{display:flex;justify-content:center;gap:38px;font-size:14px;font-weight:600;height:48px;align-items:center;overflow-x:auto;white-space:nowrap}
.gnav a:hover{color:var(--accent)}

/* section headings */
.heading{display:flex;align-items:flex-end;justify-content:space-between;margin:56px 0 24px;padding-bottom:4px}
.heading.lined{border-bottom:1px solid var(--line);padding-bottom:24px;margin-top:40px}
.heading .count{font-size:13px;color:#666}
.heading .en{font-size:13px;letter-spacing:.02em;color:#b0623a;font-weight:700;font-family:"Times New Roman",Georgia,serif;text-transform:uppercase}
.heading h2{margin:2px 0 0;font-size:28px;font-weight:400;color:var(--navy);font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif}
.heading a{font-size:13px;color:#333;border-bottom:1px solid #333;padding-bottom:2px}
.heading.center{display:block;text-align:center;border:0}

/* hero banner */
.hero{margin-top:24px}
.banner{display:flex;align-items:flex-start;justify-content:center;aspect-ratio:16/9;max-height:620px;width:100%;background:#2b1d16 center/contain no-repeat;color:#fff;text-decoration:none}
.banner h1{margin:7% 0 0;font-size:clamp(24px,4.4vw,58px);line-height:1.35;white-space:pre-line;text-align:center;font-weight:600;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;text-shadow:0 2px 12px rgba(0,0,0,.6)}

/* feature tiles */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:24px}
.tile{position:relative;aspect-ratio:1;background:#3a2e28 center/cover no-repeat;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;overflow:hidden}
.tile .ov{padding:0 16px 4px;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.tile .ov span{display:block;font-size:clamp(13px,1.4vw,18px);font-weight:700;letter-spacing:.08em}
.tile .ov b{display:block;font-size:clamp(22px,2.8vw,36px);line-height:1.1;letter-spacing:.04em;font-family:"Helvetica Neue",Arial,sans-serif}
.tile .cap{background:rgba(70,72,78,.95);text-align:center;font-size:14px;font-weight:700;letter-spacing:.08em;padding:10px 8px}
.tile:hover{opacity:.9}

/* icon menu */
.icons{display:flex;justify-content:center;flex-wrap:wrap;gap:24px 72px;margin-top:48px}
.icons a{display:flex;flex-direction:column;align-items:center;gap:12px;color:#666;font-size:14px;text-decoration:none}
.icons svg{width:72px;height:72px}
.icons a:hover{color:var(--accent)}

/* anchor strip */
.anchors{display:flex;justify-content:center;gap:12px;margin-top:32px;flex-wrap:wrap}
.anchors a{border:1px solid var(--line);background:#fff;padding:8px 20px;font-size:13px;border-radius:999px}

/* product grid & card */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.grid{row-gap:40px}
.card{display:flex;flex-direction:column;color:var(--ink)}
.card .img{position:relative;aspect-ratio:1;background:#fff center/contain no-repeat;background-origin:content-box;padding:14px;border:1px solid var(--line)}
.card .reveal{position:absolute;left:18%;right:18%;bottom:16px;background:var(--navy);color:#fff;font-size:13px;text-align:center;padding:10px 8px;opacity:0;transform:translateY(6px);transition:.2s}
.card:hover .reveal{opacity:1;transform:none}
.card .b{padding:18px 0 0;display:flex;flex-direction:column;gap:6px;flex:1}
.card .c{font-size:13px;color:#666;display:flex;align-items:center;gap:8px}
.card .c i{width:10px;height:10px;border-radius:50%;flex:none}
.card .n{font-weight:700;font-size:15px;line-height:1.55}
.card .n span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.card .s{color:#777;font-size:13px;line-height:1.75;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:12px}
.card .m{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto}
.card .p{color:#9b2335;font-size:18px;font-weight:700}
.card .st{font-size:12px;color:var(--ok)}.card .st.ask{color:#666}
.band{background:#f4f4f4;padding:8px 0 56px;margin-top:56px}
.band .heading{margin-top:48px}

/* category */
.cats{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);margin-bottom:72px}
.cat-item{position:relative;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 16px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif}
.dot{width:16px;height:16px;border-radius:50%;flex:none;margin-bottom:8px}
.cat-item b{font-size:15px;font-weight:500}.cat-item .cnt{font-size:11px;color:#888;letter-spacing:.05em}
.cat-item .arr{position:absolute;right:14px;bottom:14px;font-size:16px;color:#333}
.cat-item:hover b{color:var(--accent)}

/* footer */
footer{background:#212833;color:#aab0ba;padding:48px 0 24px;font-size:13px}
.fgrid{display:grid;grid-template-columns:1.2fr 1.4fr 1fr;gap:48px}
.flogo{display:inline-flex;flex-direction:column;align-items:center;background:#fff;padding:10px 18px 8px;margin-bottom:16px;line-height:1;font-family:"Times New Roman",Times,Georgia,serif}
.flogo .l1{color:#1f4682;font-size:24px;transform:scaleX(.86)}.flogo .l2{color:#111;font-size:12px;letter-spacing:.08em;margin-top:8px}
footer .two{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
footer h4{color:#fff;margin:0 0 8px;font-size:14px}
footer .links a{display:block;line-height:2}
.fbottom{text-align:center;border-top:1px solid #3a414c;margin-top:32px;padding-top:16px;font-size:12px}

/* product list */
.crumb{font-size:12px;color:#555;margin:20px 0 0;word-spacing:5px}
.crumb a:hover{color:var(--accent)}
.filter{display:grid;grid-template-columns:1.5fr 1fr 1fr auto;gap:20px;align-items:end;background:#f1f3f5;padding:28px 26px;margin:32px 0 56px}
.filter label span{display:block;font-size:12px;font-weight:700;margin-bottom:8px}
.filter input,.filter select{width:100%;height:46px;border:1px solid #c9ced6;background:#fff;padding:0 14px;font-size:16px;font-family:inherit;color:var(--ink);border-radius:2px}
.filter .inp{position:relative}.filter .inp svg{position:absolute;right:14px;top:16px;color:#555}
.filter button{height:46px;padding:0 24px;background:var(--navy);color:#fff;border:0;font-size:15px;font-weight:700;border-radius:2px;cursor:pointer}
.empty{text-align:center;color:#777;padding:48px 0}
.pager{display:flex;justify-content:center;align-items:center;gap:10px;margin:64px 0 96px}
.pager a{min-width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid #d5d9df;font-size:15px;border-radius:2px}
.pager a.on{background:var(--navy);border-color:var(--navy);color:#fff}
.pager span{color:#666}

/* product page */
.detail{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:72px;margin-top:48px}
.gallery{background:#fff;border:1px solid var(--line);aspect-ratio:1;padding:64px 56px;min-width:0;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.gallery{position:relative;overflow:hidden}
.gallery img{position:absolute;top:var(--gp-y,64px);bottom:var(--gp-y,64px);left:var(--gp-x,56px);right:var(--gp-x,56px);width:calc(100% - 2*var(--gp-x,56px));height:calc(100% - 2*var(--gp-y,64px));object-fit:contain;mix-blend-mode:multiply;filter:brightness(1.04) contrast(1.03)}
.info{padding-top:18px;min-width:0}
.media{min-width:0}
.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
.thumbs:empty{display:none}
.thumbs button{position:relative;aspect-ratio:1;background:#fff;border:1px solid var(--line);padding:0;cursor:pointer;border-radius:2px}
.thumbs button.on{border:2px solid var(--navy)}
.thumbs img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:contain}
.pcat{display:inline-block;font-size:13px;font-weight:700;color:#b0623a;border-bottom:2px solid #b0623a;padding-bottom:4px}
.detail h1{font-size:28px;line-height:1.6;margin:16px 0 6px;font-weight:500;letter-spacing:.08em;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif}
.sku{font-size:12px;color:#666}
.price{font-size:31px;color:#9b2335;margin:36px 0 0;line-height:1.2}
.tax{font-size:12px;color:#666;margin-top:6px}
.psum{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:24px 0 28px;padding:22px 0;font-size:14px;line-height:1.75;white-space:pre-line}
.stock{display:flex;align-items:center;gap:16px;background:#eef3ee;border-left:3px solid var(--ok);padding:16px 20px;color:#2f5a3e}
.stock b{display:block;font-size:14px}.stock span{display:block;font-size:12px;color:#466}
.same{display:block;text-align:center;border:1px solid var(--navy);color:var(--navy);font-weight:700;font-size:14px;padding:16px;margin-top:20px;border-radius:2px}
.same:hover{background:var(--navy);color:#fff}
.desc{margin:80px 0;border-top:1px solid var(--line);padding-top:24px}
.dtext{max-width:960px;margin:0 auto;font-size:14px;line-height:2.1;white-space:pre-line}


/* ===== 字体・颜色：与参考站一致 ===== */
:root{--ink:#1d2430;--muted:#6d7480;--line:#dfe2e5;--navy:#28476f;--navy-dark:#19334f;--orange:#c7683e;--red:#a23c3d;--ok:#4d7461}
*{letter-spacing:0}
body{color:var(--ink);font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,Arial,sans-serif;font-size:15px;line-height:1.7}
.top{background:var(--navy-dark);font-size:12px}
.logo{font-family:"Times New Roman",Times,serif}
.logo .l1{color:#1f4c8f;font-weight:700;transform:scaleX(.85);letter-spacing:-.02em;font-size:30px}
.logo .l2{font-weight:700;letter-spacing:.04em;font-size:14px;color:#1d2430}
.bar .search{border-bottom-color:#aeb4bb}
.gnav{font-size:13px;font-weight:600}.gnav a{color:#2f3540}
.heading .en{font-family:Georgia,"Times New Roman",serif;font-size:12px;font-weight:700;color:var(--orange);text-transform:uppercase}
.heading h2{font-family:Georgia,"Yu Mincho","YuMincho",serif;font-size:28px;font-weight:500;line-height:1.3;color:var(--navy)}
.heading a{border-bottom-color:var(--ink);font-size:13px}
.heading .count{font-size:12px;color:var(--muted)}
.crumb{font-size:11px;color:var(--muted);word-spacing:4px}
/* product cards */
.card .c{font-size:12px;color:var(--muted)}
.card .c i{background:var(--orange)!important}
.card .n{font-size:15px;font-weight:600;line-height:1.55;margin:4px 0 2px}
.card .n span{text-decoration:none;border-bottom:1px solid #cfd3d7}
.card .s{font-size:12px;line-height:1.65;color:var(--muted);margin-bottom:14px}
.card .p{color:var(--red);font-size:17px;font-weight:600}
.card .st{font-size:11px;color:var(--ok)}.card .st.ask{color:var(--muted)}
.card .img{border-color:#eceef0}
.card .reveal{background:#19334feb;font-size:12px}
/* list filters */
.filter{background:#f5f6f7;gap:18px;padding:24px}
.filter label span{font-size:11px;font-weight:600;color:var(--muted)}
.filter input,.filter select{border-color:#ccd1d6;border-radius:4px;font-size:15px}
.filter button{background:var(--navy);border-radius:4px;font-size:14px;font-weight:600}
.pager a{border-radius:4px;min-width:38px;height:38px;font-size:13px}
.pager a.on{background:var(--navy);border-color:var(--navy)}
/* product detail */
.detail{grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr)}
.pcat{font-size:12px;font-weight:700;color:var(--orange);border-bottom:1px solid var(--orange);padding-bottom:3px}
.detail h1{font-family:"Times New Roman","Yu Mincho","YuMincho",serif;font-size:31px;font-weight:500;line-height:1.45;margin:20px 0 7px;letter-spacing:0;color:var(--ink);font-variant-numeric:lining-nums}
.sku,.tax{font-size:11px;color:var(--muted)}
.price{color:var(--red);font-size:30px;font-weight:500;margin-top:34px}
.psum{color:#4e5660;font-size:14px;line-height:1.7;margin:28px 0}
.stock{background:#f1f6f2;border-left-color:var(--ok);color:var(--ok)}
.stock span{color:var(--ok)}
.same{border-color:var(--navy);color:var(--navy);font-size:13px;font-weight:600;border-radius:4px;padding:15px}
.same:hover{background:var(--navy)}
.gallery{--gp-y:28px;--gp-x:28px}
.thumbs button{border-radius:3px}
.thumbs img{inset:4px;width:calc(100% - 8px);height:calc(100% - 8px)}
.thumbs button.on{border:1px solid var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.dtext{color:#3f4751;font-size:14px;line-height:2;max-width:860px}
/* footer */
footer{background:#202833}
footer .links a{color:#cbd1d8;font-size:12px}
footer p{color:#bcc4cd;font-size:13px}
.fbottom{color:#9fa8b2;font-size:11px}

@media(max-width:860px){
  .features{gap:12px}.icons{gap:20px 32px}.icons svg{width:52px;height:52px}
  .features,.grid{grid-template-columns:repeat(2,1fr)}
  .detail{grid-template-columns:1fr;gap:24px}
  .fgrid{grid-template-columns:1fr}
  .bar .search{visibility:hidden}
  .bar .menu{visibility:visible}
  .bar{grid-template-columns:40px 1fr 40px;height:64px}.bar .search{display:none}.logo{grid-column:2}.logo .l1{white-space:nowrap}
  .hero{margin-top:0;padding:0}
  .banner{aspect-ratio:5/4;background-size:cover}
  .features{margin-top:16px}
  .icons{flex-wrap:nowrap;justify-content:space-between;gap:4px;margin-top:32px}
  .icons a{flex:1;font-size:10px;gap:6px;text-align:center;line-height:1.3}
  .icons svg{width:40px;height:40px}
  .grid{column-gap:12px}
  .card .s{display:none}
  .card .m{flex-direction:column;align-items:flex-start;gap:2px}
  .heading{margin:44px 0 16px}
  .cats{grid-template-columns:repeat(2,1fr)}
  .cat-item{min-height:112px}
  .gnav{display:none}.navwrap{border:0}
  header.open .gnav{display:flex;flex-direction:column;align-items:stretch;gap:0;height:auto;padding:0 16px 8px;font-size:15px}
  header.open .gnav a{padding:12px 4px;border-top:1px solid var(--line)}
  .top{font-size:11px;padding:5px 0}
  .heading h2{font-size:22px}
  .grid{row-gap:28px}
  .card .n{font-size:14px;font-weight:600}.card .p{font-size:17px}.card .b{padding:12px 0 0}
  .card .reveal{display:none}
  .filter{grid-template-columns:1fr;gap:14px;padding:20px 16px;margin:20px 0 32px}
  .detail{gap:24px;margin-top:20px}.detail h1{font-size:22px}.price{font-size:28px;margin-top:20px}.info{padding-top:0}
  .gallery{padding:20px;--gp-y:18px;--gp-x:18px}
  .thumbs{gap:8px;margin-top:10px}
  #productView .crumb{font-size:12px;word-spacing:2px;margin-top:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .detail h1{font-size:22px;letter-spacing:.02em}.pcat{font-size:12px}
  .logo .l1{font-size:22px}.logo .l2{font-size:11px;margin-top:7px}
}
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:#222;color:#fff;padding:10px 20px;font-size:14px;opacity:0;transition:.25s;pointer-events:none;z-index:20}
#toast.show{opacity:1;transform:translate(-50%,0)}
[hidden]{display:none!important}