.s-hero { overflow:hidden; background-color:#202327; background-image:linear-gradient(90deg, rgba(32,35,39,.98) 0%, rgba(32,35,39,.88) 29%, rgba(32,35,39,.48) 58%, rgba(32,35,39,.16) 100%), url('/img/hero-visual.png'); background-position:center center; background-size:cover; background-repeat:no-repeat; color:#fff; }
.s-hero-inner { position:relative; display:block; min-height:520px; }
.s-hero-copy { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; padding:55px 0 60px; }
.s-hero-copy h1 { margin:18px 0 20px; font-size:clamp(40px,5vw,66px); font-weight:700; letter-spacing:-.065em; line-height:1.07; }
.s-hero-copy h1 em { color:#f04a41; font-style:normal; }
.s-hero-desc { color:#c1c5ca; font-size:15px; line-height:1.75; }
.s-hero-actions { display:flex; align-items:center; gap:24px; margin-top:32px; }
.s-button-primary { color:#fff; background:var(--s-red); }
.s-button-primary:hover { background:#f1473e; }
.s-button-text { display:inline-flex; align-items:center; gap:7px; color:#fff; font-size:13px; font-weight:600; }
.s-button-text .material-symbols-rounded { font-size:17px; }
.s-hero-art { display:none; }
.s-hero-art::before { position:absolute; inset:0 -40% 0 0; background:radial-gradient(ellipse at 58% 48%, rgba(227,51,42,.30), transparent 45%), linear-gradient(115deg, transparent 20%, rgba(255,255,255,.04) 20%, transparent 21%); content:""; }
.s-hero-art img { position:absolute; right:-14%; bottom:0; width:122%; max-width:none; }
.s-hero-spec { position:absolute; right:0; bottom:45px; display:flex; align-items:flex-start; gap:10px; color:#9da3ab; font-family:'Barlow Condensed',sans-serif; font-size:12px; letter-spacing:.05em; line-height:1.2; }
.s-hero-spec strong { color:var(--s-red); font-size:26px; line-height:1; }
.s-section { padding:104px 0 100px; }
.s-category-section { background:transparent; }
.s-section-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:40px; }
.s-section-head h2 { margin-top:9px; color:var(--s-ink); font-size:34px; letter-spacing:-.06em; line-height:1.16; }
.s-section-head h2 strong { color:var(--s-red); font-weight:700; }
.s-inline-link { display:inline-flex; align-items:center; gap:7px; padding-bottom:4px; border-bottom:1px solid var(--s-ink); font-size:12px; font-weight:700; }
.s-inline-link .material-symbols-rounded { font-size:16px; }
.s-category-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.s-category-card { position:relative; display:flex; min-height:183px; flex-direction:column; padding:26px 22px; border:1px solid var(--s-line); background:#fff; transition:transform .2s ease, border-color .2s ease; }
.s-category-card:hover { border-color:var(--s-red); transform:translateY(-4px); }
.s-category-card > .material-symbols-rounded { margin-bottom:auto; color:var(--s-red); font-size:34px; }
.s-category-card strong { font-size:17px; letter-spacing:-.04em; }
.s-category-card small { margin-top:6px; color:var(--s-muted); font-size:11px; }
.s-category-card i { position:absolute; right:18px; bottom:19px; color:#a5a9ae; font-size:18px; font-style:normal; }
.s-category-card.s-category-dark { border-color:#202327; background:#202327; color:#fff; }
.s-category-card.s-category-dark small { color:#9da3ab; }
.s-products-section { background:var(--s-soft); }
.s-tab-list { display:flex; gap:4px; padding:3px; background:#e6e7e9; }
.s-tab-list button { min-width:76px; height:32px; color:#777; font-size:11px; }
.s-tab-list button.is-active { background:#fff; color:var(--s-ink); font-weight:700; box-shadow:0 2px 6px rgba(0,0,0,.06); }
.s-product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.s-product-card { position:relative; min-width:0; background:#fff; }
.s-product-image { position:relative; display:block; overflow:hidden; aspect-ratio:1/1; background:#eceeef; }
.s-product-mark { display:flex; width:100%; height:100%; align-items:center; justify-content:center; flex-direction:column; gap:12px; color:#767d84; background:linear-gradient(135deg,#e7e9ea,#d4d8da); }
.s-product-mark > .material-symbols-rounded { color:#596168; font-size:56px; }
.s-product-mark small { font-family:'Barlow Condensed',sans-serif; font-size:12px; letter-spacing:.16em; }
.s-product-image img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.s-product-card:hover .s-product-image img { transform:scale(1.04); }
.s-product-badge { position:absolute; top:14px; left:14px; z-index:1; padding:5px 8px; background:var(--s-red); color:#fff; font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700; letter-spacing:.08em; }
.s-badge-new { background:var(--s-ink); }
.s-badge-sale { background:#fff; color:var(--s-red); }
.s-product-info { position:relative; padding:20px 18px 22px; }
.s-product-brand { color:#999da2; font-family:'Barlow Condensed',sans-serif; font-size:11px; letter-spacing:.08em; }
.s-product-info h3 { min-height:42px; margin:7px 0 16px; font-size:14px; font-weight:600; letter-spacing:-.035em; line-height:1.5; }
.s-price { font-size:17px; }
.s-price del { margin-left:5px; color:#a7aaad; font-size:11px; font-weight:400; }
.s-cart { position:absolute; right:17px; bottom:20px; color:#92969a; }
.s-cart:hover { color:var(--s-red); }
.s-promo-section { padding:0 0 104px; background:var(--s-soft); }
.s-promo-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.s-promo-card { position:relative; display:block; min-height:250px; overflow:hidden; padding:35px 38px; }
.s-promo-card strong { display:block; margin:15px 0 27px; font-size:27px; letter-spacing:-.06em; line-height:1.2; }
.s-promo-card > span:last-of-type { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; }
.s-promo-card > span:last-of-type .material-symbols-rounded { font-size:16px; }
.s-promo-card img { position:absolute; right:0; bottom:0; width:46%; max-height:100%; object-fit:contain; }
.s-promo-red { color:#fff; background:var(--s-red); }
.s-promo-red .s-eyebrow { color:#ffb6b2; }
.s-promo-light { background:#dfe2e3; }
.s-promo-light img { width:39%; right:5%; }
.s-recommend-section { padding-top:0; }
.s-recommend-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.s-recommend-item { display:grid; grid-template-columns:100px 1fr 18px; align-items:center; gap:16px; padding:14px 18px 14px 14px; border:1px solid var(--s-line); }
.s-recommend-item img, .s-recommend-mark { width:100px; height:100px; object-fit:cover; background:var(--s-soft); }
.s-recommend-mark { display:grid; place-items:center; color:var(--s-red); }
.s-recommend-mark .material-symbols-rounded { font-size:38px; }
.s-recommend-item p { color:#999da2; font-family:'Barlow Condensed',sans-serif; font-size:10px; letter-spacing:.08em; }
.s-recommend-item strong { display:block; margin:7px 0 12px; font-size:13px; letter-spacing:-.04em; line-height:1.4; }
.s-recommend-item b { font-size:14px; }
.s-recommend-item > .material-symbols-rounded { color:#afb3b7; font-size:18px; }
.s-recommend-item:hover { border-color:var(--s-red); }
.s-footer { padding:60px 0 32px; background:var(--s-ink); color:#fff; }
.s-footer-top { display:grid; grid-template-columns:1fr 1.5fr 200px; align-items:start; gap:40px; padding-bottom:50px; border-bottom:1px solid #36393d; }
.s-logo-footer { filter:brightness(0) invert(1); }
.s-footer-links { display:flex; flex-wrap:wrap; gap:12px 27px; color:#c2c5c9; font-size:12px; }
.s-cs p, .s-cs a { color:#8e949b; font-size:11px; }
.s-cs strong { display:block; margin:8px 0 9px; font-family:'Barlow Condensed',sans-serif; font-size:27px; letter-spacing:.04em; }
.s-cs small { color:#8e949b; font-size:11px; line-height:1.6; }
.s-footer-bottom { padding-top:25px; color:#7f858c; font-size:10px; line-height:2; }
.s-footer-bottom span { margin:0 8px; color:#474b50; }
.s-footer-bottom small { display:block; margin-top:8px; color:#646a71; font-family:'Barlow Condensed',sans-serif; font-size:11px; letter-spacing:.05em; }
.jw-topbtn { position:fixed; right:24px; bottom:24px; z-index:20; display:grid; width:42px; height:42px; place-items:center; border:0; border-radius:50%; background:var(--s-red); color:#fff; opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .2s, transform .2s; }
.jw-topbtn.is-show { opacity:1; pointer-events:auto; transform:translateY(0); }
.s-member-page { min-height:640px; padding:80px 0; background:#f4f5f6; }
.s-member-panel { display:grid; grid-template-columns:1fr 1fr; max-width:920px; min-height:500px; margin:0 auto; background:#fff; box-shadow:0 18px 45px rgba(25,28,31,.08); }
.s-member-intro { display:flex; flex-direction:column; justify-content:center; padding:64px; background:#202327; color:#fff; }
.s-member-intro h1 { margin:18px 0; font-size:40px; letter-spacing:-.07em; line-height:1.15; }
.s-member-intro h1 strong { color:var(--s-red); }
.s-member-intro > p:last-child { color:#b9bec4; font-size:13px; line-height:1.7; }
.s-member-form-wrap { padding:56px 64px; }
.s-member-tabs { display:flex; gap:24px; margin-bottom:48px; border-bottom:1px solid var(--s-line); }
.s-member-tabs a { position:relative; padding-bottom:14px; color:#a0a4a8; font-size:14px; font-weight:700; }
.s-member-tabs a.is-active { color:var(--s-ink); }
.s-member-tabs a.is-active::after { position:absolute; right:0; bottom:-1px; left:0; height:2px; background:var(--s-red); content:""; }
.s-member-heading h2 { font-size:28px; letter-spacing:-.06em; }
.s-member-heading p { margin-top:8px; color:var(--s-muted); font-size:12px; }
.s-member-fields { display:flex; flex-direction:column; gap:8px; margin:30px 0 24px; }
.s-member-fields label { margin-top:10px; color:#555a60; font-size:11px; font-weight:700; }
.s-member-fields input { width:100%; height:44px; padding:0 12px; border:1px solid var(--s-line); background:#fff; font-size:13px; }
.s-member-fields input:focus { border-color:var(--s-red); }
.s-member-submit { width:100%; height:48px; background:var(--s-red); color:#fff; font-size:13px; font-weight:700; }
.s-member-notice { margin-top:18px; color:#9a9ea3; font-size:10px; line-height:1.5; }
.s-static-page { min-height:620px; padding:80px 0 110px; background:#f4f5f6; }
.s-static-container { width:min(calc(100% - 48px), 1040px); margin:0 auto; }
.s-static-heading h1 { margin-top:12px; color:var(--s-ink); font-size:42px; letter-spacing:-.07em; }
.s-static-heading > p:last-child { margin-top:12px; color:var(--s-muted); font-size:13px; }
.s-empty-panel { display:flex; min-height:360px; margin-top:44px; flex-direction:column; align-items:center; justify-content:center; background:#fff; text-align:center; }
.s-empty-panel > .material-symbols-rounded { color:var(--s-red); font-size:52px; }
.s-empty-panel h2 { margin-top:18px; font-size:20px; letter-spacing:-.05em; }
.s-empty-panel p { margin-top:9px; color:var(--s-muted); font-size:12px; }
.s-static-button { display:inline-flex; min-height:46px; align-items:center; justify-content:center; gap:8px; margin-top:25px; padding:0 22px; background:var(--s-red); color:#fff; font-size:12px; font-weight:700; }
.s-static-button:hover { background:#c92922; }
.s-static-button.is-full { width:100%; margin-top:26px; }
.s-static-button:disabled { background:#c8cdd1; color:#fff; cursor:not-allowed; }
.s-order-panel { display:grid; grid-template-columns:1fr 1fr; margin-top:44px; background:#fff; }
.s-order-form { padding:48px 56px; }
.s-order-form label { display:block; margin-top:18px; color:#555a60; font-size:11px; font-weight:700; }
.s-order-form label:first-child { margin-top:0; }
.s-order-form input { width:100%; height:46px; margin-top:8px; padding:0 13px; border:1px solid var(--s-line); background:#fff; font-size:13px; }
.s-order-form input:focus { border-color:var(--s-red); }
.s-static-notice { margin-top:17px; color:#9a9ea3; font-size:10px; line-height:1.5; }
.s-order-guide { display:flex; flex-direction:column; justify-content:center; padding:48px 56px; background:#202327; color:#fff; }
.s-order-guide > .material-symbols-rounded { color:var(--s-red); font-size:42px; }
.s-order-guide h2 { margin-top:28px; font-size:25px; letter-spacing:-.06em; }
.s-order-guide p { margin-top:12px; color:#b8bdc4; font-size:12px; line-height:1.7; }
.s-board-page, .s-faq-page { min-height:620px; padding:80px 0 110px; background:#f4f5f6; }
.s-board-container, .s-faq-container { width:min(calc(100% - 48px), 1040px); }
.s-board-panel { margin-top:44px; padding:36px; background:#fff; }
.s-board-panel .jw-board-list { width:100%; }
.s-faq-list { margin-top:44px; border-top:2px solid var(--s-ink); background:#fff; }
.s-faq-item { border-bottom:1px solid var(--s-line); }
.s-faq-question { display:flex; width:100%; min-height:74px; align-items:center; justify-content:space-between; gap:20px; padding:0 24px; color:var(--s-ink); text-align:left; font-size:15px; font-weight:700; }
.s-faq-question .material-symbols-rounded { color:var(--s-red); font-size:22px; transition:transform .2s ease; }
.s-faq-item.is-open .s-faq-question .material-symbols-rounded { transform:rotate(45deg); }
.s-faq-answer { display:none; padding:0 64px 25px 24px; color:var(--s-muted); font-size:13px; line-height:1.8; }
.s-faq-item.is-open .s-faq-answer { display:block; }
@media (max-width:900px) { .s-header-main { gap:20px; } .s-search { max-width:none; } .s-nav-list > li > a { padding:0 13px; } .s-category-grid { grid-template-columns:repeat(3,1fr); } .s-category-card:last-child { display:none; } .s-recommend-grid { grid-template-columns:1fr; } }
@media (max-width:640px) { .s-container { width:min(calc(100% - 32px), var(--s-max)); } .s-topbar { display:none; } .s-header-main { min-height:66px; gap:14px; } .s-logo img { width:119px; } .s-logo span { font-size:8px; } .s-search { order:3; flex-basis:100%; margin:0; } .s-header-main { flex-wrap:wrap; padding:12px 0 15px; } .s-header-tools { margin-left:auto; gap:12px; } .s-header-tools small { display:none; } .s-header-tools a .material-symbols-rounded { font-size:21px; } .s-mobile-menu { display:block; } .s-header { border-bottom:0; } .s-nav { display:none; } .s-nav.is-mobile-open { display:block; } .s-nav-inner { display:block; height:auto; padding:12px 0 16px; } .s-category-trigger { width:100%; height:43px; padding:0 14px; } .s-nav-list { display:block; height:auto; margin:8px 0 0; } .s-nav-list > li { display:block; } .s-nav-list > li > a { height:38px; padding:0 14px; border-bottom:1px solid var(--s-line); } .s-nav-sub { position:static; display:block; padding:0; border:0; box-shadow:none; } .s-nav-sub a { padding:7px 26px; background:#fafafa; } .s-nav-promo { margin:15px 14px 0; } .s-hero-inner { display:block; min-height:570px; } .s-hero-copy { min-height:365px; padding:53px 0 25px; } .s-hero-copy h1 { font-size:43px; } .s-hero-desc { font-size:13px; } .s-hero-actions { gap:16px; margin-top:25px; } .s-button-primary { min-height:42px; padding:0 15px; font-size:12px; } .s-button-text { font-size:11px; } .s-hero-art { position:absolute; right:-15%; bottom:0; width:115%; min-height:245px; } .s-hero-art img { right:0; width:115%; } .s-hero-spec { right:30px; bottom:19px; } .s-section { padding:65px 0; } .s-section-head { align-items:flex-start; flex-direction:column; gap:20px; margin-bottom:26px; } .s-section-head h2 { font-size:28px; } .s-inline-link { margin-left:auto; } .s-category-grid { grid-template-columns:repeat(2,1fr); gap:8px; } .s-category-card { min-height:150px; padding:18px 16px; } .s-category-card strong { font-size:15px; } .s-category-card small { font-size:10px; } .s-category-card:nth-child(5) { display:flex; } .s-product-grid { grid-template-columns:repeat(2,1fr); gap:10px; } .s-product-info { padding:14px 12px 18px; } .s-product-info h3 { min-height:55px; margin:6px 0 12px; font-size:12px; } .s-price { font-size:14px; } .s-cart { right:11px; bottom:16px; } .s-promo-section { padding-bottom:65px; } .s-promo-grid { grid-template-columns:1fr; gap:10px; } .s-promo-card { min-height:210px; padding:26px 24px; } .s-promo-card strong { font-size:23px; } .s-footer { padding:42px 0 28px; } .s-footer-top { grid-template-columns:1fr; gap:28px; padding-bottom:31px; } .s-footer-links { max-width:280px; } .s-cs { padding-top:10px; border-top:1px solid #36393d; } .s-footer-bottom { font-size:9px; } .s-footer-bottom span { margin:0 3px; } .jw-topbtn { right:16px; bottom:16px; } .s-member-page { padding:32px 0; } .s-member-panel { display:block; width:100%; } .s-member-intro { min-height:270px; padding:34px 25px; } .s-member-intro h1 { font-size:32px; } .s-member-form-wrap { padding:36px 25px; } .s-static-page { padding:45px 0 65px; } .s-static-container { width:min(calc(100% - 32px), 1040px); } .s-static-heading h1 { font-size:34px; } .s-empty-panel { min-height:300px; margin-top:30px; } .s-order-panel { grid-template-columns:1fr; margin-top:30px; } .s-order-form, .s-order-guide { padding:34px 25px; } .s-board-page, .s-faq-page { padding:45px 0 65px; } .s-board-panel { margin-top:30px; padding:18px 12px; overflow:hidden; } .s-faq-list { margin-top:30px; } .s-faq-question { min-height:64px; padding:0 16px; font-size:13px; } .s-faq-answer { padding:0 16px 20px; font-size:12px; } }
#sidebarMenu { display:none; }
#sidebarMenu.is-open { position:fixed; top:0; right:0; bottom:0; z-index:100; display:block; width:min(300px, 86vw); padding:20px; background:#202327; color:#fff; box-shadow:-12px 0 30px rgba(0,0,0,.2); }
#sidebarMenu.is-open nav { display:block; margin-top:60px; }
#sidebarMenu.is-open nav a { display:block; padding:15px 0; border-bottom:1px solid #3a3e43; font-size:14px; }
#sidebarMenu.is-open .sidebarMenu-close { display:flex; justify-content:flex-end; }
.sidebarMenu-close { display:none; }
.sidebarMenu-close button { color:#fff; }
.sidebarMenu-close .ic-close { --color:#fff; }
.main-header.s-header .container { max-width:none; }
.main-header.s-header .wrap { width:min(calc(100% - 48px), var(--s-max)); margin:0 auto; }
.s-category-trigger { background:transparent; color:var(--s-ink); }
.s-category-trigger:hover { background:transparent; color:var(--s-red); }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }