:root { color-scheme: light; --navy:#17385f; --navy2:#0f2745; --blue:#2d65a0; --orange:#c86100; --ink:#172033; --muted:#66748a; --line:#dbe4ef; --paper:#f4f7fb; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif; }
button,input,a { font:inherit; }
a { color:inherit; }
.site-header { height:82px; padding:0 max(24px,calc((100vw - 1160px)/2)); display:flex; align-items:center; justify-content:space-between; color:#fff; background:linear-gradient(135deg,var(--navy2),var(--navy)); }
.brand { color:#fff; text-decoration:none; }
.brand span { display:block; color:#8dd6ff; font-size:11px; font-weight:800; letter-spacing:.18em; }
.brand strong { display:block; margin-top:2px; font-size:19px; letter-spacing:.035em; }
.header-label { padding:7px 12px; border:1px solid rgba(255,255,255,.28); border-radius:999px; color:#dbeaff; font-size:12px; font-weight:700; }
main { width:min(1160px,calc(100% - 40px)); margin:0 auto; }
.hero { display:grid; grid-template-columns:.88fr 1.12fr; gap:56px; align-items:center; min-height:445px; padding:58px 0 44px; }
.eyebrow,.section-heading span,.panel-heading > div > span { color:var(--blue); font-size:11px; font-weight:850; letter-spacing:.14em; }
.hero h1 { margin:12px 0 18px; font-size:clamp(40px,5vw,66px); line-height:1.08; letter-spacing:-.035em; }
.hero h1 em { color:var(--orange); font-style:normal; }
.hero-copy > p { max-width:470px; margin:0; color:var(--muted); font-size:16px; line-height:1.9; }
.search-panel { padding:24px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 20px 55px rgba(25,52,86,.12); }
.panel-heading,.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.panel-heading h2,.section-heading h2 { margin:4px 0 0; font-size:24px; }
.status { padding:5px 9px; border-radius:999px; color:#1d644c; background:#e8f7f0; font-size:11px; font-weight:800; }
.code-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
label { color:var(--muted); font-size:12px; font-weight:750; }
.input-copy { display:grid; grid-template-columns:1fr auto; margin-top:6px; }
input { width:100%; height:45px; padding:0 12px; border:1px solid #c9d4e2; border-radius:8px; color:var(--ink); background:#fff; font-size:15px; font-weight:700; outline:none; }
.input-copy input { border-radius:8px 0 0 8px; }
input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(45,101,160,.12); }
.input-copy button { min-width:62px; border:1px solid #bcd0e5; border-left:0; border-radius:0 8px 8px 0; color:var(--blue); background:#edf5ff; font-size:12px; font-weight:800; cursor:pointer; }
.keyword-label { display:block; margin-top:13px; }
.keyword-label input { margin-top:6px; }
.refresh-button { width:100%; min-height:45px; margin-top:14px; border:0; border-radius:9px; color:#fff; background:var(--navy); font-size:14px; font-weight:850; cursor:pointer; }
.comparison { padding:48px 0; border-top:1px solid #dce4ed; }
.section-heading > p { margin:0; color:var(--muted); font-size:13px; }
.associate-disclosure { margin:15px 0 0; color:#6f5837; font-size:11px; line-height:1.6; }
.associate-disclosure b { display:inline-block; margin-right:6px; padding:2px 7px; border-radius:999px; color:#fff; background:#9b5b00; font-size:10px; }
.shop-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-top:24px; }
.shop-card { display:flex; flex-direction:column; min-height:260px; padding:18px; border:1px solid var(--line); border-top:4px solid var(--shop); border-radius:13px; background:#fff; box-shadow:0 8px 24px rgba(26,49,77,.07); }
.shop-card.amazon { --shop:#ff9900; }.shop-card.rakuten { --shop:#bf0000; }.shop-card.yahoo { --shop:#db183f; }.shop-card.kitamura { --shop:#1570b8; }
.shop-top { display:flex; align-items:center; gap:11px; }
.shop-mark { width:42px; height:42px; display:grid; place-items:center; flex:0 0 auto; border-radius:11px; color:#fff; background:var(--shop); font-size:16px; font-weight:900; }
.shop-top small { color:var(--muted); font-size:10px; font-weight:750; }
.shop-top h3 { margin:1px 0 0; font-size:16px; }
.shop-card p { margin:16px 0; color:var(--muted); font-size:12px; line-height:1.7; }
.shop-card a { display:flex; align-items:center; justify-content:space-between; min-height:42px; margin-top:auto; padding:0 12px; border-radius:8px; color:#fff; background:var(--shop); text-decoration:none; font-size:13px; font-weight:850; }
.shop-card a.is-disabled { opacity:.45; pointer-events:none; }
.guide { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; overflow:hidden; margin:8px 0 44px; border:1px solid var(--line); border-radius:13px; background:var(--line); }
.guide > div { display:flex; align-items:center; gap:12px; padding:18px; background:#fff; }
.guide strong { width:32px; height:32px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; color:#fff; background:var(--navy); }
.guide p { display:grid; gap:2px; margin:0; }.guide b { font-size:13px; }.guide span { color:var(--muted); font-size:11px; }
.notice { margin-bottom:48px; padding:18px 20px; border-left:4px solid #e4a33d; border-radius:0 8px 8px 0; background:#fff8e9; }
.notice h2 { margin:0 0 5px; font-size:14px; }.notice p { margin:0; color:#745a34; font-size:11px; line-height:1.7; }
footer { min-height:105px; padding:24px max(24px,calc((100vw - 1160px)/2)); display:flex; align-items:center; justify-content:space-between; color:#d4e1f0; background:var(--navy2); }
footer div { display:grid; gap:3px; } footer strong { color:#fff; font-size:14px; } footer span { font-size:11px; }
footer nav { display:flex; gap:18px; } footer a { color:#d4e1f0; font-size:11px; text-decoration:none; }
.legal-page { margin:48px 0; line-height:1.8; }
.legal-page h1 { margin:0 0 26px; font-size:30px; }
.legal-page h2 { margin:28px 0 6px; font-size:17px; }
.legal-page p { color:#526176; font-size:14px; }
.operator-list { margin:0; border-top:1px solid var(--line); }
.operator-list > div { display:grid; grid-template-columns:150px 1fr; padding:14px 5px; border-bottom:1px solid var(--line); }
.operator-list dt { color:var(--muted); font-size:13px; font-weight:750; }
.operator-list dd { margin:0; font-size:14px; font-weight:700; }
.operator-list a,.legal-page p a { color:var(--blue); }
.back-link { margin-top:32px; }
@media (max-width:900px) { .hero { grid-template-columns:1fr; gap:30px; padding-top:40px; }.hero-copy br { display:none; }.shop-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { main { width:min(100% - 24px,1160px); }.site-header { height:72px; padding:0 14px; }.header-label { display:none; }.hero { min-height:0; padding:34px 0; }.hero h1 { font-size:38px; }.code-grid,.shop-grid,.guide { grid-template-columns:1fr; }.panel-heading,.section-heading { align-items:flex-start; flex-direction:column; gap:8px; }.search-panel { padding:17px; }.shop-card { min-height:220px; }.guide { gap:1px; }.operator-list > div { grid-template-columns:1fr; gap:3px; } footer { align-items:flex-start; flex-direction:column; gap:18px; padding:24px 16px; } }