:root {
  --blue: #1769e8;
  --blue-dark: #0d4fc2;
  --blue-soft: #eef5ff;
  --ink: #122036;
  --muted: #667085;
  --line: #e4eaf2;
  --surface: #ffffff;
  --canvas: #f6f8fb;
  --red: #e5484d;
  --red-soft: #fff1f1;
  --green: #218768;
  --shadow: 0 14px 45px rgba(20, 44, 82, .09);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { min-height:100%; scroll-behavior: smooth; overflow-y: scroll; scrollbar-gutter: stable; }
body { display:flex; flex-direction:column; min-height:100vh; margin: 0; color: var(--ink); background: var(--canvas); font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body > main { flex:1 0 auto; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.site-header { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: minmax(220px, 300px) 1fr minmax(260px, 300px); align-items: center; min-height: 76px; padding: 0 4vw; background: #fff; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; min-width:0; gap: 12px; }
.header-logo { display:block; width:auto; height:42px; object-fit:contain; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 15px; letter-spacing: .02em; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.global-nav { display: flex; justify-self:center; gap: 30px; font-size: 13px; font-weight: 700; }
.global-nav a { transition: color .2s; }
.global-nav a:hover { color: var(--blue); }
.header-actions { display: flex; align-items: center; justify-self:end; gap: 10px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border: 1px solid transparent; border-radius: 10px; background: none; font-weight: 700; font-size: 13px; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: white; background: linear-gradient(135deg, #1c72ef, #0d55cf); box-shadow: 0 8px 20px rgba(23,105,232,.22); }
.button-primary:hover { box-shadow: 0 10px 24px rgba(23,105,232,.3); }
.button-ghost { background: white; border-color: var(--line); }
.button-large { min-height: 52px; padding: 0 24px; border-radius: 12px; }
.button-block { width: 100%; }
.icon-button { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.icon-button:hover { background: var(--blue-soft); color: var(--blue); }
.icon-button .dot { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border: 2px solid white; border-radius: 50%; background: var(--red); }
.mobile-menu { display: none; }
.mobile-nav { display:none; }

.view { display: none; }
.view.is-active { display: block; }
.hero { display: grid; grid-template-columns: 1.02fr .98fr; min-height: 520px; background-color: white; background-image: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.93) 39%, rgba(255,255,255,.12) 62%, rgba(255,255,255,0) 100%), url("../images/hero-appliances.png"); background-position: center, center; background-size: cover; border-bottom: 1px solid var(--line); overflow: hidden; }
.hero-copy { align-self: center; min-width: 0; max-width: 680px; padding: 76px 5vw 72px 7vw; }
.eyebrow, .section-kicker { color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; }
.eyebrow svg { width: 16px; height: 16px; }
.hero h1 { margin: 18px 0 20px; font-size: clamp(38px, 4.2vw, 62px); line-height: 1.2; letter-spacing: -.04em; }
.hero h1 span, .hero h1 em { display: block; white-space: nowrap; }
.hero h1 em { color: var(--blue); font-style: normal; }
.hero-copy > p { max-width: 570px; margin: 0; color: var(--muted); font-size: 16px; line-height: 2; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 30px; }
.text-link { display: inline-flex; align-items: center; gap: 4px; color: var(--blue); border: 0; background: none; font-size: 13px; font-weight: 800; cursor: pointer; }
.text-link svg { width: 16px; height: 16px; }
.member-summary { display:none; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; max-width:540px; margin-top:22px; }
.member-summary span { display:block; padding:14px 16px; background:white; border:1px solid var(--line); border-radius:14px; box-shadow:0 10px 28px rgba(20,44,82,.06); }
.member-summary small,.member-summary strong { display:block; }
.member-summary small { color:var(--muted); font-size:11px; font-weight:800; line-height:1.5; }
.member-summary strong { margin-top:4px; color:var(--blue); font-size:22px; line-height:1.2; letter-spacing:-.02em; }
.member-summary span:first-child strong { color:var(--red); }
body.is-logged-in .hero-actions { display:none; }
body.is-logged-in .member-summary { display:grid; }
.trust-row { display: flex; gap: 22px; margin-top: 27px; color: var(--muted); font-size: 11px; font-weight: 700; }
.trust-row span { display: inline-flex; align-items: center; gap: 5px; }
.trust-row svg { width: 14px; height: 14px; color: var(--green); }
.hero-art { position: relative; min-height: 520px; }

.search-panel { display: grid; grid-template-columns: 250px minmax(320px,1fr) auto; align-items: center; gap: 30px; max-width: 1180px; margin: -38px auto 0; padding: 25px 28px; position: relative; z-index: 3; background: white; border: 1px solid var(--line); border-radius: 17px; box-shadow: var(--shadow); }
.search-panel h2 { margin: 5px 0 0; font-size: 18px; }
.model-search { display: flex; align-items: center; height: 52px; padding-left: 16px; border: 1px solid #d6dfeb; border-radius: 11px; }
.model-search > svg { color: #8996a8; }
.model-search input { min-width: 0; flex: 1; height: 100%; padding: 0 14px; border: 0; outline: 0; }
.model-search .button { height: 42px; margin-right: 5px; }
.camera-link { display: inline-flex; align-items: center; gap: 7px; padding: 0; color: var(--blue); border: 0; background: transparent; font-size: 12px; font-weight: 800; cursor: pointer; }
.content-section { max-width: 1180px; margin: 0 auto; padding: 72px 0 0; }
.benefits { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; padding-top: 46px; }
.benefit-card { display: flex; gap: 15px; padding: 25px; background: white; border: 1px solid var(--line); border-radius: 16px; }
.benefit-card > span { display: grid; place-items: center; flex: 0 0 42px; height: 42px; color: var(--blue); background: var(--blue-soft); border-radius: 12px; }
.benefit-card h3 { margin: 0 0 7px; font-size: 14px; }
.benefit-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 25px; }
.section-heading h2 { margin: 6px 0 0; font-size: 27px; letter-spacing: -.025em; }
.category-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; }
.category-card { min-height: 166px; padding: 20px 10px; border: 1px solid var(--line); border-radius: 16px; background: white; cursor: pointer; transition: transform .2s, border-color .2s, box-shadow .2s; }
.category-card:hover, .category-card.featured { transform: translateY(-3px); border-color: #aacbfa; box-shadow: 0 12px 26px rgba(27,78,145,.1); }
.category-card strong, .category-card small { display: block; }
.category-card strong { margin-top: 14px; font-size: 13px; }
.category-card small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.img-note { display: block; margin-top: 12px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.product-gallery .img-note { text-align: center; }
.category-icon { display: block; width: 78px; height: 78px; margin: auto; border-radius: 12px; background-color: var(--blue-soft); background-image: url("../images/category-air-purifier.png"); background-repeat: no-repeat; background-position: center; background-size: 112%; }
.water-purifier-icon { background-image: url("../images/category-water-purifier.png"); background-size: 118%; }
.vacuum-icon { background-image: url("../images/category-vacuum.png"); background-size: 112%; }
.shaver-icon { background-image: url("../images/category-shaver.png"); background-size: 108%; }
.printer-icon { background-image: url("../images/category-printer.png"); background-size: 112%; }
.air-icon,
.air-purifier-icon,
.appliance-icon { background-image: url("../images/category-air-purifier.png"); background-size: 110%; }
.humidifier-icon { background-image: url("../images/category-humidifier.png"); background-size: 112%; }
.dehumidifier-icon { background-image: url("../images/category-dehumidifier.png"); background-size: 112%; }
.coffee-maker-icon { background-image: url("../images/category-coffee-maker.png"); background-size: 112%; }
.robot-vacuum-icon { background-image: url("../images/category-robot-vacuum.png"); background-size: 112%; }
.hair-clipper-icon { background-image: url("../images/category-hair-clipper.png"); background-size: 108%; }
.mixer-icon { background-image: url("../images/category-mixer.png"); background-size: 112%; }
.rice-cooker-icon { background-image: url("../images/category-rice-cooker.png"); background-size: 112%; }
.brush-icon,
.electric-toothbrush-icon { background-image: url("../images/category-electric-toothbrush.png"); background-size: 105%; }
.oral-irrigator-icon { background-image: url("../images/category-oral-irrigator.png"); background-size: 112%; }
.how-it-works { max-width: 1180px; margin: 75px auto 60px; }
.steps { display: grid; grid-template-columns: repeat(3,1fr); background: white; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.steps article { display: flex; align-items: center; gap: 17px; padding: 27px; border-right: 1px solid var(--line); }
.steps article:last-child { border: 0; }
.steps article > span { display:grid; place-items:center; flex:0 0 36px; height:36px; color:white; background:var(--blue); border-radius:50%; font-weight:800; }
.steps h3 { margin:0 0 5px; font-size:14px; }
.steps p { margin:0; color:var(--muted); font-size:10px; line-height:1.6; }
.final-cta { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:26px; padding:42px 46px; color:white; border-radius:22px; background:linear-gradient(120deg,#0b326e,#0b58c7 70%,#2d7bea); overflow:hidden; }
.final-cta h2 { margin:8px 0; font-size:28px; }
.final-cta p { margin:0; color:#c9dbf5; font-size:12px; }
.final-cta .eyebrow { color:#b9d7ff; }
.final-cta .button { color:var(--blue-dark); background:white; box-shadow:none; }

.guide-hero { display:grid; grid-template-columns:minmax(0,780px); align-items:center; min-height:430px; padding:70px max(7vw,calc((100vw - 1180px)/2)); color:white; background:linear-gradient(120deg,#092f69,#0b5bcf 72%,#2e7ce8); }
.guide-hero h1 { margin:17px 0; font-size:clamp(34px,3.7vw,52px); line-height:1.35; letter-spacing:-.035em; }
.guide-hero > div:first-child > p { max-width:680px; margin:0 0 28px; color:#d7e6f9; font-size:15px; line-height:2; }
.guide-hero .eyebrow { color:#bcd9ff; }
.guide-hero .button { color:var(--blue-dark); background:white; box-shadow:none; }
.guide-shell { max-width:1180px; margin:0 auto; padding:75px 0 80px; }
.guide-intro { margin-bottom:30px; }
.guide-intro h2 { margin:7px 0 8px; font-size:29px; }
.guide-intro p { margin:0; color:var(--muted); font-size:14px; }
.guide-steps { display:grid; gap:16px; }
.guide-steps article { position:relative; display:grid; grid-template-columns:74px 120px minmax(0,1fr); align-items:center; gap:25px; min-height:190px; padding:28px 34px; background:white; border:1px solid var(--line); border-radius:18px; }
.guide-number { position:absolute; top:20px; left:22px; display:grid; place-items:center; width:34px; height:34px; color:white; background:var(--blue); border-radius:50%; font-size:14px; font-weight:800; }
.guide-step-visual { grid-column:2; display:grid; place-items:center; width:110px; height:110px; color:var(--blue); background:var(--blue-soft); border-radius:20px; }
.guide-step-visual > svg { width:35px; height:35px; }
.guide-step-visual .product-mini { width:95px; height:95px; }
.guide-step-visual .part-visual { width:95px; height:95px; }
.guide-steps article > div:last-child { grid-column:3; }
.guide-steps h3 { margin:7px 0 9px; font-size:20px; }
.guide-steps p { max-width:690px; margin:0 0 10px; color:var(--muted); font-size:14px; line-height:1.85; }
.guide-points { padding-top:75px; }
.guide-point-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.guide-point-grid article { padding:27px; background:white; border:1px solid var(--line); border-radius:16px; }
.guide-point-grid article > span { display:grid; place-items:center; width:44px; height:44px; color:var(--blue); background:var(--blue-soft); border-radius:12px; }
.guide-point-grid h3 { margin:17px 0 8px; font-size:15px; }
.guide-point-grid p { margin:0; color:var(--muted); font-size:13px; line-height:1.85; }
.guide-faq { display:grid; grid-template-columns:260px 1fr; gap:55px; padding-top:75px; }
.guide-faq h2 { margin:8px 0; font-size:27px; }
.faq-list { display:grid; gap:10px; }
.faq-list details { padding:18px 21px; background:white; border:1px solid var(--line); border-radius:12px; }
.faq-list summary { cursor:pointer; font-size:14px; font-weight:800; }
.faq-list p { margin:13px 0 0; color:var(--muted); font-size:13px; line-height:1.85; }
.guide-cta { margin-top:65px; }

.signup-layout { display:grid; grid-template-columns:minmax(360px,42%) minmax(520px,58%); min-height:calc(100vh - 76px); background:white; }
.signup-benefits { position:relative; display:flex; flex-direction:column; padding:48px clamp(35px,5vw,80px); color:white; background:linear-gradient(145deg,#082d66,#0d58c6 65%,#2878e8); overflow:hidden; }
.signup-benefits:before,.signup-benefits:after { content:""; position:absolute; border:1px solid rgba(255,255,255,.14); border-radius:50%; }
.signup-benefits:before { width:520px; height:520px; right:-260px; top:40px; }
.signup-benefits:after { width:330px; height:330px; right:-145px; top:135px; border-style:dashed; }
.signup-brand { position:relative; z-index:1; align-self:flex-start; color:white; }
.signup-brand small { color:#c6daf7; }
.signup-message { position:relative; z-index:1; max-width:520px; margin:auto 0 35px; }
.signup-message .eyebrow { color:#c4ddff; }
.signup-message h1 { margin:17px 0 18px; font-size:clamp(34px,3.1vw,44px); line-height:1.4; letter-spacing:-.04em; }
.signup-message > p { margin:0; color:#d4e3f7; font-size:14px; line-height:2; }
.signup-benefit-list { position:relative; z-index:1; display:grid; gap:11px; margin-bottom:auto; }
.signup-benefit-list article { display:flex; align-items:center; gap:13px; padding:15px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.12); border-radius:13px; backdrop-filter:blur(8px); }
.signup-benefit-list article > span { display:grid; place-items:center; flex:0 0 38px; height:38px; color:#cbe2ff; background:rgba(255,255,255,.12); border-radius:10px; }
.signup-benefit-list strong,.signup-benefit-list small { display:block; }
.signup-benefit-list strong { font-size:12px; }
.signup-benefit-list small { margin-top:4px; color:#c8d9ef; font-size:10px; line-height:1.5; }
.signup-main { display:grid; place-items:center; padding:50px clamp(30px,6vw,90px); background:var(--canvas); }
.signup-card { width:min(100%,560px); padding:36px 42px; background:white; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); }
.signup-card[hidden] { display:none; }
.signup-progress { display:flex; align-items:flex-start; margin-bottom:34px; }
.signup-progress div { flex:0 0 105px; text-align:center; }
.signup-progress div > span { display:grid; place-items:center; width:32px; height:32px; margin:0 auto 8px; color:#657387; background:#e8edf3; border-radius:50%; font-size:12px; font-weight:800; }
.signup-progress div > span svg { width:15px; height:15px; }
.signup-progress div.active > span { color:white; background:var(--blue); box-shadow:0 6px 14px rgba(23,105,232,.24); }
.signup-progress div.complete > span { color:white; background:var(--green); }
.signup-progress div > strong { display:block; font-size:9px; white-space:nowrap; }
.signup-progress > i { flex:1; height:2px; margin-top:15px; background:#e0e6ee; }
.signup-progress > i.complete { background:var(--green); }
.signup-heading { text-align:center; }
.signup-heading h1,.signup-state h1 { margin:8px 0 9px; font-size:27px; }
.signup-heading p { margin:0; color:var(--muted); font-size:11px; }
.social-signup { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:27px; }
.social-button { display:flex; align-items:center; justify-content:center; gap:9px; min-height:46px; border:1px solid #d9e0e9; border-radius:10px; background:white; font-size:11px; font-weight:800; cursor:pointer; }
.social-button:hover { border-color:#aebdd0; background:#fafcff; }
.google-mark,.apple-mark { display:grid; place-items:center; width:22px; height:22px; font-weight:900; }
.google-mark { color:#4285f4; font-size:16px; }
.apple-mark { color:#101820; font-size:14px; }
.signup-divider { margin:22px 0; font-size:9px; }
.signup-form { display:grid; gap:16px; }
.signup-form label > span:first-child { display:block; margin-bottom:7px; font-size:11px; font-weight:800; }
.signup-input { display:flex!important; align-items:center; gap:10px; height:48px; padding:0 13px; border:1px solid #d6dfeb; border-radius:10px; transition:border-color .2s,box-shadow .2s; }
.signup-input:focus-within { border-color:#85b3f5; box-shadow:0 0 0 3px var(--blue-soft); }
.signup-input svg { flex:0 0 17px; color:#7c899a; }
.signup-input input { width:100%; min-width:0; height:100%; padding:0; border:0; outline:0; background:transparent; font-size:12px; }
.signup-form label > small { display:block; margin-top:6px; color:var(--muted); font-size:9px; }
.agreement { display:flex; align-items:flex-start; gap:9px; color:var(--muted); font-size:10px; line-height:1.6; }
.agreement input { width:16px; height:16px; margin:1px 0 0; accent-color:var(--blue); }
.agreement a { color:var(--blue); font-weight:800; }
.login-link { margin:22px 0 0; color:var(--muted); text-align:center; font-size:10px; }
.login-link button { padding:0; color:var(--blue); border:0; background:transparent; font-weight:800; cursor:pointer; }
.signup-state { text-align:center; }
.signup-state-icon { display:grid; place-items:center; width:72px; height:72px; margin:5px auto 22px; color:var(--blue); background:var(--blue-soft); border-radius:50%; }
.signup-state-icon svg { width:29px; height:29px; }
.signup-state-icon.success { color:var(--green); background:#eaf8f3; }
.signup-state > p { max-width:430px; margin:0 auto 22px; color:var(--muted); font-size:11px; line-height:1.9; }
.signup-state > p strong { color:var(--ink); }
.mail-help { margin-bottom:21px; padding:16px; text-align:left; background:var(--canvas); border-radius:11px; }
.mail-help strong,.mail-help span { display:block; }
.mail-help strong { font-size:10px; }
.mail-help span { margin-top:5px; color:var(--muted); font-size:9px; line-height:1.7; }
.signup-back { margin-top:17px; }
.next-step-card { display:flex; align-items:center; gap:17px; margin:22px 0; padding:17px; text-align:left; background:var(--canvas); border-radius:13px; }
.next-step-card > span { flex:0 0 58px; width:58px; height:58px; }
.next-step-card small,.next-step-card strong { display:block; }
.next-step-card small { color:var(--blue); font-size:9px; font-weight:800; }
.next-step-card strong { margin-top:4px; font-size:13px; }
.next-step-card p { margin:5px 0 0; color:var(--muted); font-size:9px; }
.signup-state .text-link:last-child { margin-top:17px; }

.login-layout { display:grid; grid-template-columns:minmax(520px,58%) minmax(360px,42%); min-height:calc(100vh - 76px); background:var(--canvas); }
.login-main { display:grid; place-items:center; padding:55px clamp(35px,7vw,110px); }
.login-card { width:min(100%,530px); padding:37px 42px; background:white; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); }
.login-heading { text-align:center; }
.login-heading h1 { margin:8px 0 9px; font-size:28px; }
.login-heading p { margin:0; color:var(--muted); font-size:11px; }
.login-social { margin-top:27px; }
.login-form { display:grid; gap:17px; }
.login-form label > span:first-child { display:block; margin-bottom:7px; font-size:11px; font-weight:800; }
.password-label { display:flex!important; align-items:center; justify-content:space-between; }
.password-label b { font-size:11px; }
.password-label button { padding:0; color:var(--blue); border:0; background:transparent; font-size:9px; font-weight:800; cursor:pointer; }
.remember-login { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:10px; }
.remember-login input { width:16px; height:16px; accent-color:var(--blue); }
.login-signup-link { margin:23px 0 0; color:var(--muted); text-align:center; font-size:10px; }
.login-signup-link button { padding:0; color:var(--blue); border:0; background:transparent; font-weight:800; cursor:pointer; }
.login-preview { position:relative; display:flex; flex-direction:column; justify-content:center; padding:60px clamp(35px,5vw,75px); color:white; background:linear-gradient(145deg,#082d66,#0e5bcb 68%,#2878e8); overflow:hidden; }
.login-preview:before { content:""; position:absolute; width:480px; height:480px; right:-240px; top:80px; border:1px solid rgba(255,255,255,.14); border-radius:50%; }
.login-preview-copy,.login-dashboard-preview,.login-security { position:relative; z-index:1; }
.login-preview-copy .eyebrow { color:#c4ddff; }
.login-preview-copy h2 { margin:15px 0 13px; font-size:38px; line-height:1.35; }
.login-preview-copy p { max-width:430px; margin:0; color:#d4e3f7; font-size:12px; line-height:1.9; }
.login-dashboard-preview { margin-top:32px; padding:18px; color:var(--ink); background:rgba(255,255,255,.97); border-radius:17px; box-shadow:0 24px 48px rgba(4,30,68,.25); }
.preview-header { display:flex; align-items:center; justify-content:space-between; padding:2px 3px 13px; border-bottom:1px solid var(--line); font-size:11px; font-weight:800; }
.preview-header b { color:var(--blue); font-size:15px; }
.login-dashboard-preview article { display:grid; grid-template-columns:45px 1fr auto; align-items:center; gap:11px; padding:12px 2px; border-bottom:1px solid var(--line); }
.login-dashboard-preview article:last-child { border:0; }
.login-dashboard-preview .product-mini { width:42px; height:42px; }
.login-dashboard-preview strong,.login-dashboard-preview small { display:block; }
.login-dashboard-preview strong { font-size:11px; }
.login-dashboard-preview small { margin-top:3px; color:var(--muted); font-size:9px; }
.login-dashboard-preview article > b { font-size:11px; }
.red-text { color:var(--red); }
.login-security { display:flex; align-items:center; gap:10px; margin-top:20px; color:#d8e7fa; }
.login-security svg { flex:0 0 20px; }
.login-security strong,.login-security small { display:block; }
.login-security strong { font-size:10px; }
.login-security small { margin-top:3px; color:#bdd3ef; font-size:9px; }

.flow-shell, .notice-shell, .product-shell { width: 100%; max-width: 1280px; margin: 0 auto; padding: 52px 32px 80px; }
.archive-shell { max-width: 1360px; padding-left: 40px; padding-right: 40px; }
.stepper { display:flex; align-items:flex-start; max-width:760px; margin:0 auto 58px; }
.stepper div { flex:0 0 105px; text-align:center; }
.stepper span { display:grid; place-items:center; width:37px; height:37px; margin:0 auto 10px; color:#657387; background:#e8edf3; border-radius:50%; font-weight:800; }
.stepper .active span { color:white; background:var(--blue); box-shadow:0 7px 16px rgba(23,105,232,.24); }
.stepper strong { display:block; font-size:10px; white-space:nowrap; }
.stepper i { flex:1; height:2px; margin-top:18px; background:#e0e6ee; }
.flow-heading { text-align:center; }
.flow-heading h1 { margin:9px 0 10px; font-size:28px; }
.flow-heading p { margin:0; color:var(--muted); font-size:13px; }
.identify-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:35px; }
.identify-card { position:relative; padding:32px; text-align:center; background:white; border:1px solid var(--line); border-radius:20px; box-shadow:0 10px 28px rgba(30,51,79,.055); }
.identify-card.recommended { border-color:#a9caff; }
.recommend-badge { position:absolute; top:0; left:50%; padding:5px 16px; color:white; background:var(--blue); border-radius:0 0 10px 10px; transform:translateX(-50%); font-size:9px; font-weight:800; }
.identify-icon { display:grid; place-items:center; width:56px; height:56px; margin:8px auto 18px; color:var(--blue); background:var(--blue-soft); border-radius:16px; }
.identify-card h2 { margin:0 0 10px; font-size:18px; }
.identify-card > p { max-width:390px; min-height:44px; margin:0 auto 23px; color:var(--muted); font-size:11px; line-height:1.8; }
.label-demo { position:relative; width:240px; height:135px; margin:0 auto 24px; padding:23px; text-align:left; color:#27323f; border:8px solid #292f38; border-radius:20px; background:#eef1f4; box-shadow:inset 0 0 0 5px #111820; }
.label-demo span,.label-demo strong,.label-demo small { display:block; margin-left:12px; }
.label-demo span { font-size:8px; letter-spacing:.12em; }
.label-demo strong { margin-top:4px; font-size:25px; }
.label-demo small { margin-top:8px; font-size:8px; }
.label-demo i { position:absolute; right:24px; top:28px; width:62px; height:62px; background:repeating-linear-gradient(90deg,#101820 0 2px,transparent 2px 4px); }
.field-label { display:block; margin-top:47px; text-align:left; font-size:11px; font-weight:800; }
.input-with-button { display:flex; margin-top:8px; padding:5px; border:1px solid #d6dfeb; border-radius:11px; }
.input-with-button input { flex:1; min-width:0; padding:0 12px; border:0; outline:0; }
.input-help { display:block; margin-top:11px; color:var(--muted); text-align:left; font-size:9px; }
.divider { display:flex; align-items:center; gap:16px; margin:33px 0 18px; color:var(--muted); font-size:11px; }
.divider:before,.divider:after { content:""; flex:1; height:1px; background:var(--line); }
.register-category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.register-category-grid .category-card { min-height:150px; }
.register-category-grid .category-icon { width:70px; height:70px; }
.register-category-grid .category-card.is-selected { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft), 0 12px 26px rgba(27,78,145,.1); }
.category-flow { display:grid; gap:14px; margin-top:18px; }
.category-flow[hidden] { display:none; }
.flow-panel { padding:24px; background:white; border:1px solid var(--line); border-radius:18px; box-shadow:0 12px 34px rgba(20,44,82,.06); }
.flow-panel[hidden] { display:none; }
.flow-panel .section-heading { margin-bottom:16px; }
.flow-panel h2 { margin:5px 0 0; font-size:21px; }
.flow-panel p { margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.8; }
.choice-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.choice-grid button { min-height:92px; padding:16px; text-align:left; border:1px solid var(--line); border-radius:14px; background:var(--canvas); cursor:pointer; transition:border-color .2s, box-shadow .2s, transform .2s, background .2s; }
.choice-grid button:hover,.choice-grid button.is-selected { transform:translateY(-2px); border-color:#9fc3f7; background:white; box-shadow:0 0 0 3px var(--blue-soft); }
.choice-grid strong,.choice-grid small { display:block; }
.choice-grid strong { font-size:14px; }
.choice-grid small { margin-top:6px; color:var(--muted); font-size:11px; line-height:1.6; }
.product-candidate-panel { border-color:#b9d5fb; background:linear-gradient(140deg,#fff,#f5f9ff); }
.product-candidate-panel[hidden] { display:none; }
.product-choice-grid { margin-top:18px; }
.product-selected-cta { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:16px; padding:16px; background:white; border:1px solid #cfe0fb; border-radius:14px; }
.product-selected-cta[hidden] { display:none; }
.product-selected-cta p { margin:0; }
.product-selected-cta strong { color:var(--blue); }
.help-link { margin-top:20px; }

.app-layout { display:grid; grid-template-columns:245px 1fr; min-height:calc(100vh - 76px); }
.sidebar { padding:30px 20px; background:white; border-right:1px solid var(--line); }
.user-card { display:flex; align-items:center; gap:12px; padding:15px; background:var(--canvas); border-radius:13px; }
.user-card > span { display:grid; place-items:center; width:38px; height:38px; color:white; background:var(--blue); border-radius:50%; font-weight:800; }
.user-card strong,.user-card small { display:block; }
.user-card strong { font-size:14px; }
.user-card small { margin-top:4px; color:var(--muted); font-size:10px; }
.sidebar nav { display:grid; gap:5px; margin-top:24px; }
.sidebar nav button { display:flex; align-items:center; gap:11px; min-height:46px; padding:0 13px; border:0; border-radius:10px; background:transparent; font-size:13px; font-weight:700; cursor:pointer; }
.sidebar nav button.active,.sidebar nav button:hover { color:var(--blue); background:var(--blue-soft); }
.sidebar nav svg { width:17px; height:17px; }
.sidebar-note { display:flex; gap:10px; margin-top:40px; padding:15px; color:var(--blue-dark); background:var(--blue-soft); border-radius:12px; }
.sidebar-note svg { flex:0 0 18px; }
.sidebar-note p { margin:0; }
.sidebar-note strong,.sidebar-note small { display:block; }
.sidebar-note strong { font-size:12px; }
.sidebar-note small { margin-top:6px; color:var(--muted); font-size:11px; line-height:1.6; }
.dashboard-main { padding:42px clamp(25px,5vw,70px) 80px; }
.page-heading { display:flex; align-items:end; justify-content:space-between; gap:25px; }
.page-heading h1 { margin:7px 0 8px; font-size:29px; }
.page-heading p { margin:0; color:var(--muted); font-size:14px; }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:29px; }
.stats-grid article { padding:22px; background:white; border:1px solid var(--line); border-radius:15px; }
.stats-grid article.urgent { border-color:#f3cccc; background:linear-gradient(140deg,#fff,#fff5f5); }
.stats-grid span { display:block; font-size:13px; font-weight:800; }
.stats-grid strong { display:block; margin:11px 0 6px; font-size:31px; }
.stats-grid .urgent strong { color:var(--red); }
.stats-grid strong small { margin-left:4px; font-size:13px; }
.stats-grid p { margin:0; color:var(--muted); font-size:12px; }
.appliance-list { display:grid; gap:11px; margin-top:25px; }
.appliance-row { display:grid; grid-template-columns:72px 55px minmax(220px,1fr) 185px 22px; align-items:center; gap:14px; padding:16px 18px; background:white; border:1px solid var(--line); border-radius:14px; cursor:pointer; transition:border-color .2s,transform .2s; }
.appliance-row:hover { transform:translateY(-2px); border-color:#b5cff4; }
.status-badge { padding:6px 8px; border-radius:6px; font-size:11px; font-weight:800; text-align:center; white-space:nowrap; }
.status-badge.red { color:var(--red); background:var(--red-soft); }
.status-badge.blue { color:var(--blue); background:var(--blue-soft); }
.status-badge.green { color:var(--green); background:#edfaf5; }
.product-mini { display:block; width:48px; height:48px; border-radius:9px; background-image:url("../images/appliance-sprite-source.png"); background-repeat:no-repeat; background-size:300% 200%; }
.vacuum-mini { background-position:50% 0; }
.air-mini { background-position:100% 0; }
.shaver-mini { background-position:0 0; }
.printer-mini { background-position:0 100%; }
.appliance-row div strong,.appliance-row div small { display:block; }
.appliance-row div strong { font-size:15px; }
.appliance-row div small { margin-top:6px; color:var(--muted); font-size:12px; }
.part-status { color:var(--muted); font-size:12px; text-align:right; }
.part-status strong { display:block; margin-top:5px; color:var(--ink); font-size:15px; }
.urgent-row .part-status strong { color:var(--red); }

.back-link { margin-bottom:16px; padding:0; color:var(--muted); border:0; background:transparent; font-size:11px; cursor:pointer; }
.notice-banner { display:flex; align-items:center; gap:11px; padding:14px 18px; color:var(--red); background:var(--red-soft); border:1px solid #f7d3d3; border-radius:12px 12px 0 0; }
.notice-banner svg { width:18px; }
.notice-banner strong,.notice-banner small { display:block; }
.notice-banner strong { font-size:11px; }
.notice-banner small { margin-top:3px; color:#946b6e; font-size:8px; }
.notice-hero { display:grid; grid-template-columns:1fr 320px; gap:30px; padding:34px; background:white; border:1px solid var(--line); border-top:0; border-radius:0 0 18px 18px; }
.notice-product { display:flex; align-items:center; gap:32px; }
.large-vacuum { display:block; width:150px; height:235px; flex:0 0 150px; border-radius:14px; background:url("../images/vacuum-product.png") center/cover no-repeat; }
/* 画像が無いスロットの「NO IMAGE」プレースホルダ（各スロット寸法に合わせる）。 */
.pn-noimage { display:flex; align-items:center; justify-content:center; text-align:center; box-sizing:border-box; padding:8px; background:#eef2f7; color:#97a4b6; font-weight:800; letter-spacing:.09em; }
.pn-noimage--product { width:100%; height:378px; border-radius:17px; font-size:15px; }
.pn-noimage--part-lp { width:100%; height:340px; border-radius:12px; font-size:15px; }
.pn-noimage--thumb { width:52px; height:52px; flex:none; border-radius:10px; font-size:8px; line-height:1.25; letter-spacing:.04em; }
.pn-noimage--archive { width:96px; height:96px; flex:none; border:1px solid var(--line); border-radius:12px; font-size:9px; line-height:1.3; }
.notice-product h1 { margin:8px 0 13px; font-size:28px; line-height:1.35; }
.notice-product p { max-width:500px; margin:0; color:var(--muted); font-size:11px; line-height:1.8; }
.countdown { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:8px 20px; padding:22px; background:var(--canvas); border-radius:14px; }
.countdown span { color:var(--muted); font-size:9px; }
.countdown strong { font-size:12px; }
.countdown i { grid-column:1/-1; height:1px; background:var(--line); }
.countdown b { color:var(--red); font-size:25px; }
.notice-grid { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:18px; margin-top:18px; }
.notice-grid > div { display:grid; gap:18px; }
.panel { padding:24px; background:white; border:1px solid var(--line); border-radius:16px; }
.section-heading.compact { align-items:center; margin-bottom:18px; }
.section-heading.compact h2 { font-size:18px; }
.section-heading.compact > small { color:var(--muted); font-size:8px; }
.period-tag { padding:7px 10px; color:var(--red); background:var(--red-soft); border-radius:7px; font-size:9px; font-weight:800; }
.part-row { display:grid; grid-template-columns:55px 1fr auto; align-items:center; gap:15px; padding:14px; background:var(--canvas); border-radius:12px; }
.part-visual,.battery-visual,.head-visual { display:inline-block; flex:none; width:48px; height:48px; border-radius:8px; background-image:url("../images/parts-sprite-source.png"); background-repeat:no-repeat; background-size:300% 100%; vertical-align:middle; }
.part-visual { background-position:0 0; }
.battery-visual { background-position:50% 0; }
.head-visual { background-position:100% 0; }
.part-row strong,.part-row small { display:block; }
.part-row strong { font-size:11px; }
.part-row small { margin-top:4px; color:var(--muted); font-size:8px; }
.part-row > span:last-child { text-align:right; }
.shop-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.shop-grid article { position:relative; display:flex; flex-direction:column; gap:7px; padding:18px; border:1px solid var(--line); border-radius:12px; text-align:center; }
.shop-grid article > strong { font-size:11px; }
.shop-grid b { font-size:18px; }
.shop-grid b.no-price { margin:5px 0; font-size:10px; }
.shop-grid small { color:var(--muted); font-size:8px; }
.shop-grid .button { margin-top:auto; color:white; }
.shop-rakuten { background:#bf1733; }
.shop-yahoo { background:#3267d6; }
.shop-amazon { color:#17202a!important; background:#f7b92b; }
.best-price { position:absolute; top:-9px; left:50%; padding:3px 9px; color:white; background:var(--red); border-radius:8px; transform:translateX(-50%); font-size:8px; font-weight:800; }
.support-panel { align-self:start; text-align:center; }
.support-icon { display:grid; place-items:center; width:48px; height:48px; margin:0 auto 15px; color:var(--blue); background:var(--blue-soft); border-radius:50%; }
.support-panel h2 { font-size:16px; }
.support-panel p { margin-bottom:22px; color:var(--muted); font-size:10px; line-height:1.8; }
.support-panel .button + .button { margin-top:9px; }

.breadcrumbs { display:flex; flex-wrap:nowrap; align-items:center; gap:8px; margin-bottom:20px; color:var(--muted); font-size:12px; }
.breadcrumbs > * { flex:0 0 auto; white-space:nowrap; }
.breadcrumbs > :last-child { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.breadcrumbs a { color:var(--blue); }
.product-layout { display:grid; grid-template-columns:340px minmax(0,1fr); gap:40px; align-items:start; }
.product-main-art { display:grid; place-items:center; min-height:420px; background:#f4f7fb; border:1px solid var(--line); border-radius:18px; }
.product-main-art .large-vacuum { width:100%; height:378px; border-radius:17px; }
.product-main-art .product-photo { width:100%; max-height:380px; object-fit:contain; border-radius:17px; padding:14px; }
.product-image-source { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; color:var(--muted); font-size:11px; line-height:1.6; }
.product-image-source span { display:inline-flex; align-items:center; gap:6px; min-height:26px; padding:0 10px; color:#0d55cf; background:var(--blue-soft); border-radius:999px; font-size:11px; font-weight:900; white-space:nowrap; }
.product-image-source span::before { content:""; width:7px; height:7px; background:var(--blue); border-radius:50%; }
.product-buy-panel { margin-top:14px; padding:16px; background:white; border:1px solid var(--line); border-radius:14px; }
.product-buy-button { display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:48px; padding:0 18px; color:white!important; background:linear-gradient(135deg,#1c72ef,#0d55cf); border-radius:9px; box-shadow:0 10px 22px rgba(23,105,232,.22); font-size:14px; font-weight:900; }
.product-buy-button span { margin-left:8px; }
.product-buy-panel p { display:flex; align-items:center; gap:8px; margin:12px 0 0; color:var(--muted); font-size:12px; font-weight:700; }
.product-buy-panel p strong { padding:2px 8px; color:#966b12; background:#fff7df; border-radius:999px; font-size:11px; }
.product-buy-panel > small { display:block; margin-top:8px; color:var(--muted); font-size:11px; line-height:1.7; }
.product-match-status { display:grid; gap:8px; margin-top:14px; padding:14px; color:var(--green); background:#effaf6; border-radius:12px; font-size:12px; font-weight:800; }
.product-match-status span { display:flex; align-items:center; gap:8px; }
.product-match-status span::before { content:"✓"; display:grid; place-items:center; flex:0 0 18px; width:18px; height:18px; color:white; background:var(--green); border-radius:50%; font-size:11px; line-height:1; }
.thumbs { display:flex; gap:9px; margin-top:11px; }
.thumbs button { display:grid; place-items:center; width:54px; height:54px; border:1px solid var(--line); border-radius:9px; background:white; cursor:pointer; }
.thumbs button.active { border-color:var(--blue); box-shadow:0 0 0 2px var(--blue-soft); }
.thumbs .product-mini,.thumbs .part-visual,.thumbs .battery-visual { transform:scale(.7); }
.category-pill { display:inline-block; padding:6px 10px; color:var(--blue); background:var(--blue-soft); border-radius:6px; font-size:12px; font-weight:800; }
.product-info { min-width:0; }
.product-info h1 { margin:12px 0 8px; font-size:28px; overflow-wrap:anywhere; }
.meta-row { display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--muted); font-size:13px; }
.meta-row span { min-width:0; overflow-wrap:anywhere; }
.favorite-button { display:inline-flex; align-items:center; gap:7px; margin-top:16px; padding:9px 12px; border:1px solid var(--line); border-radius:8px; background:white; font-size:13px; cursor:pointer; }
.favorite-button svg { width:15px; height:15px; color:var(--red); }
.verified { display:flex; align-items:center; gap:10px; margin-top:19px; padding:13px; color:var(--green); background:#effaf6; border-radius:10px; }
.verified svg { width:18px; }
.verified strong,.verified small { display:block; }
.verified strong { font-size:13px; }
.verified small { margin-top:4px; color:#5f7d74; font-size:11px; }
.tabs { display:flex; gap:4px; margin:23px 0; border-bottom:1px solid var(--line); }
.tabs a { padding:12px 13px; color:var(--muted); border-bottom:2px solid transparent; font-size:13px; font-weight:800; }
.tabs a.active { color:var(--blue); border-color:var(--blue); }
.tabs .tab { padding:12px 13px; color:var(--muted); background:none; border:0; border-bottom:2px solid transparent; font-size:13px; font-weight:800; font-family:inherit; cursor:pointer; }
.tabs .tab:hover { color:var(--ink); }
.tabs .tab.active { color:var(--blue); border-color:var(--blue); }
.tabs .tab:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.tab-panel > *:first-child { margin-top:0; }
.product-info.js-tabs .tab-panel { display:none; }
.product-info.js-tabs .tab-panel.is-active { display:block; }
.product-info > h2 { font-size:19px; }
.product-parts-heading { align-items:end; margin:26px 0 14px; padding:0; }
.product-parts-heading h2 { margin:4px 0 0; font-size:21px; }
.product-parts-heading small { max-width:290px; color:var(--muted); font-size:12px; line-height:1.7; text-align:right; }
.parts-table { overflow:hidden; border:1px solid var(--line); border-radius:12px; background:white; }
.parts-table > div { display:grid; grid-template-columns:minmax(220px,1.55fr) .72fr .82fr minmax(210px,1.05fr); align-items:center; min-height:74px; padding:12px 16px; border-bottom:1px solid var(--line); font-size:12px; line-height:1.55; }
.parts-table > div:last-child { border:0; }
.parts-table .table-head { min-height:35px; color:var(--muted); background:var(--canvas); font-weight:800; }
.parts-table > div > span:first-child { display:flex; align-items:center; gap:8px; }
.product-parts-table .part-row { transition:background .18s ease; }
.product-parts-table .part-row:hover { background:#fbfdff; }
.part-cell { min-width:0; }
.part-cell > span { min-width:0; }
.part-cell b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:13px; }
.parts-table i { transform:scale(.75); }
.part-thumb { width:52px; height:52px; flex:none; object-fit:contain; background:#fff; border-radius:10px; padding:3px; }
.parts-table span > small { display:block; margin-top:4px; color:var(--muted); font-size:11px; }
.cycle-cell { color:#39485f; font-weight:700; }
.price-cell { color:var(--ink); font-size:14px; font-weight:900; }
.price-cell small { font-weight:700; }
.parts-table a { color:var(--blue); font-weight:800; }
.buy-links,.part-actions { display:flex; align-items:center; }
.part-actions { justify-content:flex-end; gap:10px; }
.buy-cta { display:inline-flex; align-items:center; justify-content:center; min-width:122px; min-height:38px; padding:0 14px; color:white!important; background:linear-gradient(135deg,#1c72ef,#0d55cf); border:1px solid transparent; border-radius:9px; box-shadow:0 7px 16px rgba(23,105,232,.18); font-size:12px; font-weight:800; }
.detail-link { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:0 10px; color:var(--blue)!important; background:#fff; border:1px solid #d9e6f7; border-radius:9px; font-size:12px; font-weight:800; white-space:nowrap; }
.detail-link:hover { background:var(--blue-soft); }
.parts-table-note { margin:12px 0 0; color:var(--muted); font-size:12px; font-weight:600; line-height:1.75; }
/* 可読性向上: 公開ページの細い/小さすぎるテキストを底上げ（色は据え置き） */
.breadcrumbs,
.meta-row,
.img-note,
.product-image-source,
.product-buy-panel > small,
.product-parts-heading small,
.parts-table span > small,
.verified small { font-weight:600; }
.img-note,
.product-image-source,
.product-buy-panel > small,
.parts-table span > small,
.verified small { font-size:12px; }
.section-heading.compact > small,
.part-row small,
.shop-grid small { font-size:12px; font-weight:600; }
.archive-heading { align-items:flex-end; margin-bottom:28px; }
.archive-heading h1 { margin:8px 0 0; font-size:32px; }
.archive-heading p { max-width:640px; margin:14px 0 0; color:var(--muted); font-size:14px; line-height:1.85; }
.archive-filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin:0 0 18px; padding:16px; background:white; border:1px solid var(--line); border-radius:14px; }
.archive-filters label { display:grid; gap:7px; min-width:0; flex:1 1 170px; }
.archive-filters .archive-model-filter { flex:1.4 1 240px; }
.archive-filters span { color:var(--muted); font-size:11px; font-weight:900; }
.archive-filters select,.archive-filters input { width:100%; min-width:0; height:42px; padding:0 12px; border:1px solid #d6dfeb; border-radius:10px; background:#fff; color:var(--ink); outline:0; }
.archive-filters select:focus,.archive-filters input:focus { border-color:#85b3f5; box-shadow:0 0 0 3px var(--blue-soft); }
.archive-filters button[type="submit"] { flex:0 0 auto; height:42px; padding:0 24px; white-space:nowrap; }
.archive-filters .archive-filter-clear { flex:0 0 auto; align-self:flex-end; height:42px; display:inline-flex; align-items:center; font-size:13px; }
.pagination { margin:34px 0 8px; }
.pagination .screen-reader-text { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0; }
.pagination .nav-links { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; }
.pagination .page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px; border-radius:10px; color:var(--ink); font-size:14px; font-weight:800; line-height:1; text-decoration:none; transition:background .15s ease,color .15s ease; }
.pagination a.page-numbers:hover { background:var(--blue-soft); color:var(--ink); }
.pagination .page-numbers.current { background:#eef2f7; color:var(--ink); }
.pagination .page-numbers.dots { min-width:auto; padding:0 4px; color:var(--muted); }
.archive-list > div { grid-template-columns:minmax(260px,1.25fr) .64fr .64fr minmax(150px,.55fr); }
.product-catalog-list > div { grid-template-columns:64px .8fr .8fr .9fr minmax(150px,.55fr); }
.part-catalog-list > div { grid-template-columns:64px .86fr .68fr .68fr minmax(180px,1fr) .52fr .58fr minmax(130px,.48fr); }
.archive-list > div:not(.table-head)[hidden] { display:none; }
.archive-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:stretch; }
.archive-card { display:flex; flex-direction:column; padding:14px; background:#fff; border:1px solid var(--line); border-radius:14px; }
.archive-card-body { display:flex; gap:14px; align-items:flex-start; margin-bottom:13px; }
.archive-card .archive-thumb-cell { flex:none; display:block; }
.archive-thumb { width:96px; height:96px; flex:none; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:12px; padding:4px; }
.archive-thumb-fallback { display:block; width:96px; height:96px; flex:none; border:1px solid var(--line); border-radius:12px; background:var(--canvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23aab6c6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center/34px no-repeat; }
.archive-card-info { min-width:0; flex:1; display:flex; flex-direction:column; }
.archive-card-info .ac-line { color:#39485f; font-size:13px; line-height:1.55; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.archive-card-info .ac-model { margin-top:4px; color:var(--ink); font-size:19px; font-weight:800; line-height:1.3; word-break:break-word; }
.archive-card-info .ac-model .type-badge { margin-left:8px; vertical-align:3px; }
.archive-card-info .ac-meta { margin-top:7px; color:var(--ink); font-size:12px; font-weight:700; line-height:1.5; }
.archive-card-info .ac-meta .ac-k { color:var(--muted); font-weight:600; }
.archive-card-info .ac-date { margin-top:5px; color:#93a1b3; font-size:11px; }
.archive-card .buy-cta { margin-top:auto; width:100%; }
.archive-title-cell { min-width:0; }
.archive-title-cell b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); }
.archive-title-cell small { display:block; margin-top:5px; color:var(--muted); font-size:11px; }
.model-cell { color:#39485f; font-weight:800; }
.product-catalog-list > div > span:nth-child(2),
.product-catalog-list > div > span:nth-child(3) { color:#39485f; font-weight:600; }
.part-catalog-list > div > span:nth-child(3),
.part-catalog-list > div > span:nth-child(4),
.part-catalog-list > div > span:nth-child(7) { color:#39485f; font-weight:600; }
.type-badge { display:inline-flex; align-items:center; min-height:26px; padding:0 10px; color:#0d55cf; background:var(--blue-soft); border-radius:999px; font-style:normal; font-size:11px; font-weight:900; white-space:nowrap; }
.archive-empty { margin:14px 0 0; padding:16px; color:var(--muted); background:white; border:1px solid var(--line); border-radius:12px; font-size:13px; }
.product-aside { display:grid; gap:14px; }
.product-aside h3 { margin:0 0 16px; font-size:17px; }
.product-aside .button + .button { margin-top:8px; }
.purchase-panel { text-align:center; }
.purchase-panel p { color:var(--muted); font-size:13px; line-height:1.8; }
.purchase-panel > small { display:block; margin-top:10px; color:var(--muted); font-size:11px; }
.register-prompt { text-align:center; }
.register-prompt p { color:var(--muted); font-size:13px; line-height:1.8; }
.register-prompt > small { display:block; margin-top:10px; color:var(--muted); font-size:11px; }
.purchase-modal { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:24px; visibility:hidden; pointer-events:none; transition:visibility 0s linear .22s; }
.purchase-modal.is-open { visibility:visible; pointer-events:auto; transition-delay:0s; }
.purchase-backdrop { position:absolute; inset:0; opacity:0; background:rgba(9,22,43,.48); backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); transition:opacity .18s ease, backdrop-filter .18s ease, -webkit-backdrop-filter .18s ease; }
.purchase-modal.is-open .purchase-backdrop { opacity:1; backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); }
.purchase-dialog { position:relative; width:min(100%,720px); max-height:calc(100vh - 48px); overflow:auto; padding:28px; opacity:0; background:white; border:1px solid var(--line); border-radius:22px; box-shadow:0 28px 80px rgba(5,24,55,.28); transform:translateY(14px) scale(.98); transition:opacity .18s ease, transform .22s ease; }
.purchase-modal.is-open .purchase-dialog { opacity:1; transform:translateY(0) scale(1); }
.purchase-close { position:absolute; top:16px; right:16px; display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--line); border-radius:50%; background:white; color:var(--muted); font-size:22px; line-height:1; cursor:pointer; }
.purchase-dialog-head h2 { margin:7px 44px 8px 0; font-size:26px; }
.purchase-dialog-head p { margin:0; color:var(--muted); font-size:13px; }
.purchase-alert { display:flex; align-items:center; gap:10px; margin-top:18px; padding:13px 14px; color:#0d6b54; background:#eefaf6; border-radius:12px; font-size:13px; font-weight:700; }
.purchase-alert svg { flex:0 0 18px; width:18px; }
.shop-compare-list { display:grid; gap:12px; margin-top:18px; }
.shop-compare-card { position:relative; display:grid; grid-template-columns:1fr auto 170px; align-items:center; gap:14px; padding:16px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.shop-compare-card.best { border-color:#f4c7c7; background:linear-gradient(140deg,#fff,#fff8f8); }
.shop-compare-card strong,.shop-compare-card small { display:block; }
.shop-compare-card strong { font-size:15px; }
.shop-compare-card small { margin-top:4px; color:var(--muted); font-size:12px; }
.shop-compare-card b { font-size:20px; white-space:nowrap; }
.shop-compare-card .no-price { color:var(--muted); font-size:13px; }
.shop-compare-card .button { min-height:40px; padding:0 14px; font-size:12px; }
.purchase-foot { margin-top:15px; color:var(--muted); font-size:12px; text-align:right; }
.toast { position:fixed; left:50%; bottom:30px; z-index:50; max-width:calc(100% - 40px); padding:13px 20px; color:white; background:#172438; border-radius:10px; box-shadow:var(--shadow); opacity:0; transform:translate(-50%,15px); pointer-events:none; transition:.25s; font-size:12px; font-weight:700; }
.toast.show { opacity:1; transform:translate(-50%,0); }

/* 長い一覧の折りたたみ（対応機種が100件超になる部品がある）。
   全件はHTMLに出力済みで、ここでは視覚的に畳むだけ（クロール対象は維持）。 */
/* 全件をHTMLに出したまま <details> で視覚的に畳む。
   開いたときはトグルボタンを一覧の最下部へ移動して「閉じる」にする
   （flex order で並べ替え。ネイティブ details の開閉はそのまま活きる）。 */
.compat-more { margin-top: 10px; display: flex; flex-direction: column; }
.compat-more > summary {
  order: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 14px; border: 1px solid var(--line, #dbe3ee); border-radius: 10px;
  background: #f7f9fc; color: var(--blue, #1558b0); font-size: 13px; font-weight: 800;
  cursor: pointer; list-style: none; user-select: none;
}
.compat-more__more { display: inline-flex; align-items: center; gap: 8px; }
.compat-more > summary::-webkit-details-marker { display: none; }
.compat-more > summary:hover { background: #eef4fc; border-color: var(--blue, #1558b0); }
.compat-more > summary::after { content: "▼"; font-size: 10px; }
.compat-more[open] > summary::after { content: "▲"; }
.compat-more__list { order: 2; margin: 0; }
/* 開いたとき: 一覧を先に、ボタンを最下部へ。ラベルは「閉じる」に切替。 */
.compat-more[open] > summary { order: 3; margin-top: 10px; }
.compat-more__less { display: none; }
.compat-more[open] .compat-more__more { display: none; }
.compat-more[open] .compat-more__less { display: inline; }
.compat-more__count { color: #6b7a90; font-weight: 700; }

/* 製品詳細の関連製品ブロック: 2カラムのグリッド外に置くため上部余白を自前で持つ。 */
.product-related { margin-top: 28px; }

/* 固定ページ（page.php）: 長文の可読性のため本文幅を絞る。 */
.page-article { max-width: 760px; }
.page-article__title { margin: 8px 0 22px; font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--ink); line-height: 1.4; }

.partsnavi-entry-content { margin-top: 6px; color: #36435a; font-size: 14px; overflow-wrap: anywhere; word-break: break-word; }
.partsnavi-entry-content > *:first-child { margin-top: 0; }
.partsnavi-entry-content > p:first-of-type { font-size: 15.5px; line-height: 1.95; color: var(--ink); font-weight: 600; }
.partsnavi-entry-content p { margin: 16px 0; line-height: 1.95; }
.partsnavi-entry-content h2 {
    display: flex; align-items: center; gap: 11px;
    margin: 32px 0 14px; font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: .01em;
}
.partsnavi-entry-content h2::before {
    content: ""; flex: none; width: 4px; height: 19px;
    border-radius: 4px; background: linear-gradient(var(--blue), var(--blue-dark));
}
.partsnavi-entry-content h3 { margin: 22px 0 10px; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.partsnavi-entry-content ul {
    margin: 14px 0; padding: 0; list-style: none;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    overflow: hidden; box-shadow: 0 8px 22px rgba(16,38,73,.04);
}
.partsnavi-entry-content ul li {
    margin: 0; padding: 13px 18px; line-height: 1.7; border-top: 1px solid var(--line);
}
.partsnavi-entry-content ul li:first-child { border-top: 0; }
.partsnavi-entry-content a { color: var(--blue); font-weight: 700; text-decoration: none; word-break: break-all; }
.partsnavi-entry-content a:hover { text-decoration: underline; }

/* ===== ガイド記事（投稿 single.php）＝情報系検索の受け皿・回遊起点 ===== */
/* 記事ページはシェル自体を読みやすい幅に絞って中央寄せする（パンくず含め左右対称に）。
   一覧ハブ(.guides-hub)はカードグリッドのため絞らない。 */
.product-shell.guide-shell { max-width: 900px; }
.guide-article,.guide-related,.guide-eeat { max-width: 100%; }
.guide-article__head { margin-bottom: 14px; }
.guide-article__title { margin: 6px 0 10px; font-size: clamp(23px, 3.2vw, 33px); font-weight: 800; color: var(--ink); line-height: 1.45; }
.guide-article__meta { color: var(--muted); font-size: 12px; }
.guide-article__body { margin-top: 10px; }
/* ---- ガイド記事の見やすさ（写真なし・構造で強化） ---- */
/* アイキャッチ（自前のカテゴリアイコン画像）をタイトルの左横に並べる */
.guide-head-row { display: flex; align-items: center; gap: 14px; }
.guide-head-text { min-width: 0; }
.guide-head-text .guide-article__title { margin: 4px 0 0; }
.guide-eyecatch-icon { flex: none; width: 58px; height: 58px; margin: 0; border-radius: 14px; }
@media (max-width: 720px) { .guide-eyecatch-icon { width: 46px; height: 46px; } }
/* 目次（TOC） */
.guide-toc { margin: 18px 0 24px; padding: 16px 20px; background: #f7fafd; border: 1px solid var(--line); border-left: 4px solid var(--blue, #1558b0); border-radius: 12px; }
.guide-toc__title { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--ink); letter-spacing: .04em; }
.guide-toc ol { margin: 0; padding-left: 1.3em; }
.guide-toc li { margin: 6px 0; line-height: 1.6; }
.guide-toc a { color: var(--blue, #1558b0); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.guide-toc a:hover { text-decoration: underline; }
/* 見出しをセクションバナー風に。アンカー時にヘッダー下へ隠れないよう余白 */
.guide-article__body h2 { scroll-margin-top: 84px; margin: 34px 0 14px; padding: 10px 0 10px 14px; border-left: 5px solid var(--blue, #1558b0); border-bottom: 1px solid var(--line); font-size: clamp(18px, 2.2vw, 22px); font-weight: 800; color: var(--ink); }
.guide-article__body h2::before { content: none; }
.guide-article__body h3 { margin: 22px 0 10px; padding-left: 11px; border-left: 3px solid #9fc0e8; font-size: 15px; font-weight: 800; color: var(--ink); }
/* 早見表（h3メーカー＋リンクのリスト）を見やすく。品番リンクをチップ化 */
.guide-article__body ul { margin: 12px 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.guide-article__body ul li { padding: 12px 15px; border-top: 1px solid var(--line); line-height: 1.9; font-size: 13.5px; }
.guide-article__body ul li:first-child { border-top: 0; }
.guide-article__body ul li::before { content: none; }
.guide-article__body ul a { display: inline-block; margin: 2px 3px 2px 0; padding: 3px 10px; background: #eef4fc; color: var(--blue, #1558b0); border: 1px solid #d5e3f5; border-radius: 999px; font-weight: 700; font-size: 12.5px; text-decoration: none; word-break: break-all; }
.guide-article__body ul a:hover { background: var(--blue, #1558b0); color: #fff; border-color: var(--blue, #1558b0); }
.guide-related { margin-top: 26px; }
.guide-eeat { margin: 20px 0 0; padding: 14px 16px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 12px; }
.guide-eeat p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.85; }
/* ガイド一覧ハブ（page-guides.php） */
.guides-hub__head h1 { margin: 8px 0 10px; font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; color: var(--ink); line-height: 1.4; }
.guides-hub__intro { max-width: 760px; }
.guides-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 20px; }
.guide-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.guide-card:hover { box-shadow: 0 12px 28px rgba(16,38,73,.1); transform: translateY(-2px); }
.guide-card__link { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 18px; color: var(--ink); }
.guide-card__cat { align-self: flex-start; padding: 3px 9px; background: #eef4fc; color: var(--blue); border-radius: 999px; font-size: 11px; font-weight: 800; }
.guide-card__title { font-size: 16px; font-weight: 800; line-height: 1.5; }
.guide-card__excerpt { flex: 1; color: var(--muted); font-size: 12.5px; line-height: 1.8; }
.guide-card__meta { color: #9aa7b8; font-size: 11px; }
.guides-pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 26px; }
.guides-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--blue); font-weight: 700; font-size: 13px; }
.guides-pagination .page-numbers.current { background: var(--blue); color: #fff; border-color: var(--blue); }
.guides-pagination .page-numbers:hover:not(.current) { background: #eef4fc; }
@media (max-width: 1000px) { .guides-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px) { .guides-grid { grid-template-columns: 1fr; } }
.price-highlight { display: block; margin: 10px 0; color: var(--red); font-size: 20px; }
.part-lp-layout { display:grid; grid-template-columns:320px minmax(0,1fr); gap:40px; align-items:start; }
.part-lp-gallery { display:grid; gap:12px; }
.part-lp-art { display:grid; place-items:center; min-height:360px; background:#f4f7fb; border:1px solid var(--line); border-radius:18px; }
.part-lp-artlink { display:grid; place-items:center; width:100%; height:100%; padding:14px; }
.part-lp-art img { width:100%; max-height:340px; object-fit:contain; border-radius:12px; }
.part-lp-pills { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 4px; }
.part-lp-pills .category-pill { margin:0; }
.part-kind { display:inline-block; padding:3px 11px; border-radius:999px; font-size:11px; font-weight:800; line-height:1.7; white-space:nowrap; }
.part-kind--genuine { color:var(--green); background:#e3f5ee; }
.part-kind--generic { color:var(--blue-dark); background:var(--blue-soft); border:1px solid #d3e4fb; }
.part-kind--compat { color:var(--muted); background:var(--canvas); border:1px solid var(--line); }
.part-kind--unknown { color:#8a6a1f; background:#fbf2da; border:1px solid #ecdcae; }
.part-cell .part-kind { margin-top:5px; }
.part-lp-main h1 { margin:12px 0 8px; font-size:30px; line-height:1.35; letter-spacing:0; }
.part-lp-lead { max-width:760px; margin:20px 0 0; color:var(--muted); font-size:14px; line-height:1.9; }
.part-check-card,.part-compat-card,.part-purchase-section,.part-mini-faq,.part-guide-card { margin-top:24px; padding:22px; background:white; border:1px solid var(--line); border-radius:14px; }
.part-guide-card h2 { margin:4px 0 0; font-size:20px; }
.part-guide-list { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.part-guide-link { display:flex; align-items:center; gap:10px; padding:13px 15px; border:1px solid var(--line); border-radius:12px; background:#f7fbff; color:var(--ink); font-weight:700; font-size:13.5px; line-height:1.5; transition:background .15s ease,border-color .15s ease; }
.part-guide-link:hover { background:#eef4fc; border-color:var(--blue,#1558b0); }
.part-guide-link svg { flex:none; width:18px; height:18px; fill:none; stroke:var(--blue,#1558b0); stroke-width:2.4; }
.part-check-card { display:grid; grid-template-columns:180px 1fr; gap:18px; align-items:center; background:linear-gradient(135deg,#fff,#f8fbff); }
.part-check-card h2,.part-compat-card h2,.part-purchase-section h2,.part-mini-faq h2 { margin:4px 0 0; font-size:20px; }
.part-check-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.part-check-grid span { display:flex; align-items:center; gap:8px; min-height:48px; padding:10px 12px; color:#0d6b54; background:#effaf6; border-radius:10px; font-size:12px; font-weight:800; }
.part-check-grid svg { flex:0 0 16px; width:16px; }
.part-compat-card .section-heading { margin:0 0 12px; padding:0; }
.part-compat-list { display:grid; overflow:hidden; border:1px solid var(--line); border-radius:12px; }
/* 「先頭8件のリスト」と「<details>内の残り」を1つの外枠(.part-compat-box)に統合し、
   内側リストの枠線・角丸を消して“1枚の連続した表”に見せる。行間は各行の
   border-bottom で仕切り、トグルは枠内に溶け込むフルワイドのバーにする。 */
.part-compat-box { border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.part-compat-box .part-compat-list { border:0; border-radius:0; overflow:visible; }
.part-compat-box .part-compat-row { border-bottom:1px solid var(--line); }
/* 各内側リストの最終行(:last-child)も区切り線を残す＝先頭8件目とボタン/9件目の境界を繋ぐ。 */
.part-compat-box .part-compat-list .part-compat-row:last-child { border-bottom:1px solid var(--line); }
.part-compat-box .compat-more { margin-top:0; }
.part-compat-box .compat-more > summary { border:0; border-radius:0; }
.part-compat-box .compat-more[open] > summary { margin-top:0; }
.part-compat-row { display:grid; grid-template-columns:minmax(0,1.5fr) .75fr .55fr; gap:14px; align-items:center; min-height:68px; padding:12px 14px; color:var(--ink); border-bottom:1px solid var(--line); font-size:12px; }
.part-compat-row:last-child { border-bottom:0; }
.part-compat-row:hover { background:#fbfdff; }
.part-compat-row b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.part-compat-row small { display:block; margin-top:4px; color:var(--muted); font-size:11px; }
.part-compat-row em { justify-self:end; padding:4px 8px; color:#0d6b54; background:#effaf6; border-radius:999px; font-style:normal; font-weight:800; }
.part-compat-row--text { cursor:default; }
.part-compat-row--text:hover { background:transparent; }
.part-compat-row--text b { color:var(--muted); font-weight:700; }
.part-compat-row--text em.part-compat-row__tag { color:#5b6b7f; background:#eef1f5; font-weight:700; }
.part-purchase-section p { margin:8px 0 16px; color:var(--muted); font-size:13px; line-height:1.8; }
.part-shop-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.part-shop-card { position:relative; display:flex; flex-direction:column; gap:7px; min-height:146px; padding:18px; color:white!important; border-radius:12px; box-shadow:0 10px 24px rgba(16,38,73,.08); }
.part-shop-card--rakuten { background:#c61f2f; }
.part-shop-card--yahoo { background:#8d2d16; }
.part-shop-card--amazon { background:#2f3d52; }
.part-shop-card strong { font-size:14px; }
.part-shop-card b { font-size:20px; line-height:1.2; }
.part-shop-card b.no-price { font-size:14px; }
.part-shop-card small { color:rgba(255,255,255,.78); font-size:11px; }
.part-shop-card > span:last-child { display:inline-flex; align-items:center; justify-content:center; min-height:34px; margin-top:auto; padding:0 12px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); border-radius:9px; font-size:12px; font-weight:900; }
.part-mini-faq { display:grid; gap:10px; }
.part-mini-faq details { padding:15px 0; border-top:1px solid var(--line); }
.part-mini-faq details:first-of-type { border-top:0; }
.part-mini-faq summary { cursor:pointer; font-size:13px; font-weight:900; }
.part-mini-faq p { margin:10px 0 0; color:var(--muted); font-size:13px; line-height:1.8; }
.part-lp-aside { position:sticky; top:94px; display:grid; gap:14px; }
.empty-note { margin:0; color:var(--muted); font-size:13px; line-height:1.8; }
.partsnavi-footer { flex-shrink:0; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 32px; padding: 46px max(7vw, calc((100vw - 1180px) / 2)); color: #d8e5f7; background: #0d274f; }
.partsnavi-footer strong { display: block; color: #fff; font-size: 18px; }
.partsnavi-footer p { margin: 8px 0 0; color: #b8c7dc; font-size: 12px; }
.partsnavi-footer nav { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; font-weight: 800; }
.partsnavi-footer a:hover { color: #fff; }
.partsnavi-footer .ad-disclosure { flex-basis: 100%; margin: 8px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); color: #cddcf0; font-size: 13px; line-height: 1.9; }
.partsnavi-footer .api-credit { flex-basis: 100%; margin: 0; padding-top: 12px; color: #9fb4d0; font-size: 12px; line-height: 1.9; }
.partsnavi-footer .api-credit a { color: #cddcf0; text-decoration: underline; }
.partsnavi-footer .api-credit a:hover { color: #fff; }

@media (max-width: 1000px) {
  .archive-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .global-nav { display:none; }
  .hero { grid-template-columns:1fr; background-position:center, 65% center; }
  .hero-copy { padding:60px 7vw 20px; }
  .hero-art { min-height:400px; }
  .search-panel { grid-template-columns:1fr; margin:-40px 20px 0; }
  .content-section,.how-it-works { margin-left:20px; margin-right:20px; }
  .category-grid,.register-category-grid { grid-template-columns:repeat(3,1fr); }
  .choice-grid { grid-template-columns:repeat(2,1fr); }
  .product-layout,.part-lp-layout { grid-template-columns:280px minmax(0,1fr); gap:28px; }
  .guide-shell { margin-left:20px; margin-right:20px; }
  .signup-layout { grid-template-columns:1fr; }
  .signup-benefits { display:none; }
  .signup-main { min-height:calc(100vh - 76px); }
  .login-layout { grid-template-columns:1fr; }
  .login-preview { display:none; }
  .login-main { min-height:calc(100vh - 76px); }
}

@media (max-width: 720px) {
  .archive-cards { grid-template-columns:1fr; }
  html,body { max-width:100%; overflow-x:hidden; }
  .site-header { grid-template-columns:minmax(0,1fr) auto; min-height:66px; padding:0 15px; }
  .header-logo { height:34px; max-width:190px; }
  .brand small,.header-actions .button-ghost,.header-actions .button-primary { display:none; }
  .mobile-menu { display:grid !important; }
  .mobile-nav { position:absolute; left:12px; right:12px; top:calc(100% + 8px); display:grid; gap:6px; padding:10px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); opacity:0; transform:translateY(-8px); pointer-events:none; transition:.2s; }
  .site-header.is-menu-open .mobile-nav { opacity:1; transform:translateY(0); pointer-events:auto; }
  .mobile-nav a { display:flex; align-items:center; min-height:44px; padding:0 14px; border-radius:10px; font-size:14px; font-weight:800; }
  .mobile-nav a:hover { color:var(--blue); background:var(--blue-soft); }
  .hero,.hero-copy,.hero-actions { width:100%; max-width:100%; }
  .hero-copy { padding:45px 20px 10px; }
  .hero h1 { font-size:36px; }
  .hero h1 span,.hero h1 em { white-space:normal; }
  .hero-copy > p { max-width:100%; font-size:14px; overflow-wrap:break-word; }
  .hero-actions { align-items:stretch; flex-direction:column; gap:15px; }
  .hero-actions .button { width:calc(100vw - 40px); max-width:calc(100vw - 40px); }
  .member-summary { grid-template-columns:1fr; max-width:none; margin-top:18px; }
  .member-summary span { padding:13px 14px; }
  .trust-row { flex-wrap:wrap; gap:10px 18px; }
  .hero { background-image:none; }
  .hero-art { min-height:330px; background:url("../images/hero-appliances.png") 65% center/cover no-repeat; }
  .search-panel { margin:-54px 20px 0; padding:22px; }
  .model-search { display:grid; grid-template-columns:1fr; align-items:stretch; height:auto; padding:5px; }
  .model-search > svg { display:none; }
  .model-search input { height:44px; width:100%; padding-left:10px; }
  .model-search .button { width:100%; height:44px; margin:0; }
  .benefits,.steps,.identify-grid,.stats-grid,.shop-grid { grid-template-columns:1fr; }
  .category-grid,.register-category-grid { grid-template-columns:repeat(2,1fr); }
  .choice-grid { grid-template-columns:1fr; }
  .flow-panel { padding:20px; }
  .product-selected-cta { align-items:flex-start; flex-direction:column; }
  .content-section { padding-top:50px; }
  .steps article { border-right:0; border-bottom:1px solid var(--line); }
  .final-cta { align-items:flex-start; flex-direction:column; padding:30px 25px; }
  .stepper { margin-bottom:35px; overflow:hidden; }
  .stepper div { flex-basis:73px; }
  .stepper strong { font-size:8px; }
  .identify-card { padding:28px 20px; }
  .field-label { margin-top:20px; }
  .app-layout { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .dashboard-main { padding:30px 16px 60px; }
  .page-heading { align-items:flex-start; flex-direction:column; }
  .appliance-row { grid-template-columns:48px 45px 1fr 18px; gap:8px; padding:13px 10px; }
  .appliance-row .status-badge { grid-column:1; }
  .appliance-row .product-mini { grid-column:2; }
  .appliance-row div { grid-column:3; }
  .appliance-row > svg { grid-column:4; }
  .part-status { display:none; }
  .notice-shell,.product-shell,.flow-shell { padding:30px 15px 60px; }
  .archive-shell { padding-left:15px; padding-right:15px; }
  .notice-hero { grid-template-columns:1fr; padding:25px 18px; }
  .notice-product { align-items:flex-start; gap:10px; }
  .notice-product .large-vacuum { transform:scale(.7); transform-origin:center top; margin-right:-20px; }
  .notice-product h1 { font-size:23px; }
  .notice-grid { grid-template-columns:1fr; }
  .part-row { grid-template-columns:48px 1fr; }
  .part-row > span:last-child { grid-column:2; text-align:left; }
  .product-parts-table .part-row > .part-actions { grid-column:1; text-align:left; }
  .product-layout { grid-template-columns:1fr; }
  .product-gallery { max-width:320px; width:100%; margin:auto; }
  .product-image-source { align-items:flex-start; flex-direction:column; overflow-wrap:anywhere; }
  .product-buy-panel { border-radius:12px; }
  .product-match-status { border-radius:12px; }
  .product-info h1 { font-size:25px; line-height:1.42; }
  .product-parts-heading { flex-direction:column; align-items:flex-start; gap:8px; }
  .product-parts-heading small { max-width:none; text-align:left; }
  .product-aside { grid-column:auto; grid-template-columns:1fr; }
  .parts-table { display:grid; gap:12px; overflow:visible; border:0; background:transparent; }
  .parts-table .table-head { display:none; }
  .parts-table > div { grid-template-columns:1fr; min-width:0; min-height:0; gap:10px; padding:16px; border:1px solid var(--line); border-radius:14px; background:white; box-shadow:0 10px 24px rgba(16,38,73,.05); }
  .parts-table > div > span:first-child { gap:10px; }
  .part-cell b { white-space:normal; }
  .parts-table > div > span:nth-child(2),
  .parts-table > div > span:nth-child(3) { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:10px; border-top:1px solid var(--line); }
  .parts-table > div > span:nth-child(4) { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-top:12px; border-top:1px solid var(--line); }
  .parts-table > div > span:nth-child(2)::before { content:"交換目安"; color:var(--muted); font-weight:800; }
  .parts-table > div > span:nth-child(3)::before { content:"参考価格"; color:var(--muted); font-weight:800; }
  .parts-table > div > span:nth-child(4)::before { content:""; display:none; }
  .archive-heading { align-items:flex-start; margin-bottom:22px; }
  .archive-heading h1 { font-size:28px; }
  .archive-filters { flex-direction:column; align-items:stretch; gap:10px; padding:14px; }
  .archive-filters label,
  .archive-filters .archive-model-filter { flex:none; }
  .archive-filters button[type="submit"] { width:100%; }
  .archive-list > div { grid-template-columns:1fr; }
  .archive-list > div > span:nth-child(2)::before { content:"種別"; color:var(--muted); font-weight:800; }
  .archive-list > div > span:nth-child(3)::before { content:"更新日"; color:var(--muted); font-weight:800; }
  .archive-list > div > span:nth-child(4)::before { content:""; display:none; }
  .archive-thumb-cell { justify-content:center; padding-top:0; border-top:0; }
  .product-catalog-list > div > span:nth-child(2),
  .product-catalog-list > div > span:nth-child(3),
  .product-catalog-list > div > span:nth-child(4) { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:10px; border-top:1px solid var(--line); }
  .product-catalog-list > div > span:nth-child(2)::before,
  .product-catalog-list > div > span:nth-child(3)::before,
  .product-catalog-list > div > span:nth-child(4)::before { color:var(--muted); font-weight:800; }
  .product-catalog-list > div > span:nth-child(2)::before { content:"メーカー"; }
  .product-catalog-list > div > span:nth-child(3)::before { content:"カテゴリ"; }
  .product-catalog-list > div > span:nth-child(4)::before { content:"型番"; }
  .product-catalog-list > div > span:nth-child(5) { display:flex; grid-template-columns:none; padding-top:12px; border-top:1px solid var(--line); }
  .product-catalog-list > div > span:nth-child(5)::before { content:""; display:none; }
  .part-catalog-list > div > span:nth-child(2),
  .part-catalog-list > div > span:nth-child(3),
  .part-catalog-list > div > span:nth-child(4),
  .part-catalog-list > div > span:nth-child(5),
  .part-catalog-list > div > span:nth-child(6),
  .part-catalog-list > div > span:nth-child(7) { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:10px; border-top:1px solid var(--line); }
  .part-catalog-list > div > span:nth-child(2)::before,
  .part-catalog-list > div > span:nth-child(3)::before,
  .part-catalog-list > div > span:nth-child(4)::before,
  .part-catalog-list > div > span:nth-child(5)::before,
  .part-catalog-list > div > span:nth-child(6)::before,
  .part-catalog-list > div > span:nth-child(7)::before { color:var(--muted); font-weight:800; }
  .part-catalog-list > div > span:nth-child(2)::before { content:"交換部品型番"; }
  .part-catalog-list > div > span:nth-child(3)::before { content:"メーカー"; }
  .part-catalog-list > div > span:nth-child(4)::before { content:"カテゴリ"; }
  .part-catalog-list > div > span:nth-child(5)::before { content:"対象家電"; }
  .part-catalog-list > div > span:nth-child(6)::before { content:"種別"; }
  .part-catalog-list > div > span:nth-child(7)::before { content:"更新日"; }
  .part-catalog-list > div > span:nth-child(8) { display:flex; grid-template-columns:none; padding-top:12px; border-top:1px solid var(--line); }
  .part-catalog-list > div > span:nth-child(8)::before { content:""; display:none; }
  .archive-list .archive-title-cell b { white-space:normal; }
  .archive-list .buy-links { justify-content:stretch; }
  .archive-list .buy-cta { width:100%; }
  .part-actions .buy-cta,.part-actions .detail-link { width:100%; min-width:0; }
  .buy-links { justify-content:flex-end; }
  .parts-table-note { font-size:11px; }
  .purchase-modal { align-items:end; place-items:end stretch; padding:0; }
  .purchase-dialog { width:100%; max-height:86vh; padding:24px 18px 20px; border-radius:22px 22px 0 0; transform:translateY(100%); }
  .purchase-modal.is-open .purchase-dialog { transform:translateY(0); }
  .purchase-close { top:12px; right:14px; }
  .purchase-dialog-head h2 { font-size:22px; }
  .shop-compare-card { grid-template-columns:1fr; gap:10px; }
  .shop-compare-card b { font-size:18px; }
  .shop-compare-card .button { width:100%; }
  .purchase-foot { text-align:left; }
  .guide-hero { grid-template-columns:1fr; gap:30px; padding:45px 20px; }
  .guide-hero h1 { font-size:34px; }
  .guide-shell { padding:50px 0 60px; }
  .guide-steps article { grid-template-columns:1fr; gap:17px; padding:65px 22px 25px; }
  .guide-step-visual,.guide-steps article > div:last-child { grid-column:1; }
  .guide-point-grid,.guide-faq { grid-template-columns:1fr; }
  .guide-faq { gap:20px; }
  .part-lp-layout { grid-template-columns:1fr; }
  .part-lp-gallery { max-width:320px; width:100%; margin:auto; }
  .part-lp-art { min-height:260px; }
  .pn-noimage--part-lp { height:220px; }
  .part-lp-main h1 { font-size:30px; }
  .part-check-card { grid-template-columns:1fr; padding:18px; }
  .part-check-grid { grid-template-columns:1fr; }
  .part-compat-card,.part-purchase-section,.part-mini-faq { padding:18px; }
  .part-compat-list { gap:10px; overflow:visible; border:0; }
  .part-compat-row { grid-template-columns:1fr; gap:8px; min-height:0; padding:14px; border:1px solid var(--line); border-radius:12px; background:white; }
  .part-compat-row b { white-space:normal; }
  .part-compat-row em { justify-self:start; }
  /* モバイルは各行がカード表示なので、外枠は無くしてカードのまま見せる。 */
  .part-compat-box { border:0; border-radius:0; overflow:visible; }
  .part-compat-box .part-compat-row { border:1px solid var(--line); border-radius:12px; }
  .part-compat-box .compat-more > summary { border:1px solid var(--line); border-radius:12px; }
  .part-shop-grid { grid-template-columns:1fr; }
  .part-shop-card { min-height:126px; }
  .part-lp-aside { position:static; }
  .part-lp-aside .purchase-panel { text-align:left; }
  .signup-main { padding:28px 14px 55px; }
  .signup-card { width:100%; min-width:0; padding:28px 19px; border-radius:17px; overflow:hidden; }
  .signup-progress { width:100%; min-width:0; }
  .signup-progress div { flex:0 1 78px; min-width:68px; }
  .signup-progress > i { min-width:18px; }
  .signup-progress div > strong { font-size:8px; }
  .social-signup { grid-template-columns:1fr; }
  .signup-form,.signup-form label,.signup-input { min-width:0; width:100%; }
  .login-main { padding:28px 14px 55px; }
  .login-card { width:100%; min-width:0; padding:28px 19px; border-radius:17px; }
  .login-social { grid-template-columns:1fr; }
  .login-form,.login-form label { min-width:0; width:100%; }
  .password-label { align-items:flex-start; flex-direction:column; gap:5px; }
  .partsnavi-footer { flex-direction:column; padding:35px 20px; }
}