/* ============================================
know-vance.com — 共通スタイル（アップグレード版）
ブルー×オレンジ / 大手サイト水準の情報密度・階層
============================================ */
/* ---------- Reset & Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
font-size:16px;line-height:1.8;color:#0F172A;background:#fff;
font-feature-settings:"palt";
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .15s,opacity .15s}
a:hover{opacity:.85}
ul,ol{list-style:none}
button{font-family:inherit}
/* 数値フォント：ランク・価格・スコアに使う */
.num-font{font-family:"Manrope","Noto Sans JP",sans-serif;font-feature-settings:"tnum";letter-spacing:-0.01em}
/* ---------- Tokens (common fallback. Overridden by theme file) ---------- */
:root{
--color-main:#0B5FFF;
--color-main-dark:#003E99;
--color-main-light:#EAF1FF;
--color-cta:#FF6B1A;
--color-cta-hover:#E55100;
--color-cta-soft:#FFF2E8;
--c-text:#0F172A;
--c-text-2:#475569;
--c-text-3:#64748B;
--c-border:#E5EAF2;
--c-border-2:#EEF1F6;
--c-bg-1:#F7F9FC;
--c-bg-2:#F0F4FA;
--radius-s:6px;
--radius:10px;
--radius-l:16px;
--radius-xl:22px;
--shadow-sm:0 1px 2px rgba(15,23,42,.05), 0 1px 1px rgba(15,23,42,.03);
--shadow:0 4px 14px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
--shadow-md:0 10px 28px rgba(11,95,255,.10), 0 2px 6px rgba(15,23,42,.05);
--shadow-cta:0 8px 20px rgba(255,107,26,.28), 0 2px 4px rgba(255,107,26,.18);
--ring-main:0 0 0 3px rgba(11,95,255,.18);
}
/* ---------- Layout ---------- */
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.container--narrow{max-width:820px;margin:0 auto;padding:0 20px}
/* ---------- Header ---------- */
.site-header{
background:#fff;
border-bottom:1px solid var(--c-border);
position:sticky;top:0;z-index:100;
box-shadow:0 1px 0 rgba(15,23,42,.03);
}
.site-header__inner{
display:flex;align-items:center;justify-content:space-between;
height:64px;padding:0 20px;max-width:1120px;margin:0 auto;gap:16px;
}
.site-header__logo{
display:flex;align-items:center;gap:12px;
font-weight:800;letter-spacing:.02em;color:var(--c-text);
}
.site-header__logo-jp{
display:inline-flex;align-items:center;gap:6px;
padding:5px 10px;border-radius:6px;
background:linear-gradient(135deg,var(--color-main) 0%,var(--color-main-dark) 100%);
color:#fff;font-size:.8125rem;font-weight:800;letter-spacing:.04em;
box-shadow:0 2px 6px rgba(11,95,255,.25);white-space:nowrap;
}
.site-header__logo-jp::before{
content:"";width:5px;height:5px;border-radius:50%;background:#FFD54A;
box-shadow:0 0 0 2px rgba(255,213,74,.25);
}
.site-header__logo-brand{
display:flex;flex-direction:column;line-height:1.05;font-size:1rem;
}
.site-header__logo-brand strong{
font-weight:800;font-size:1rem;letter-spacing:.01em;
}
.site-header__logo-brand small{
font-size:.625rem;font-weight:700;color:var(--color-main);letter-spacing:.14em;margin-top:3px;
}
.site-header__logo-mark{
width:30px;height:30px;border-radius:8px;
background:linear-gradient(135deg,var(--color-main) 0%,var(--color-main-dark) 100%);
display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:900;font-size:.875rem;letter-spacing:0;
box-shadow:0 2px 6px rgba(11,95,255,.25);
}
.site-header__logo-text{display:flex;flex-direction:column;line-height:1.1}
.site-header__logo-text small{font-size:.625rem;font-weight:600;color:var(--c-text-3);letter-spacing:.1em}
.site-header__nav{display:flex;gap:22px;font-size:.875rem;align-items:center}
.site-header__nav a{color:var(--c-text-2);font-weight:600}
.site-header__nav a:hover{color:var(--color-main);opacity:1}
.site-header__back{
font-size:.8125rem;color:var(--color-main);font-weight:600;
white-space:nowrap;display:inline-flex;align-items:center;gap:4px;
padding:6px 10px;border-radius:999px;background:var(--color-main-light);
}
.site-header__back:hover{background:#DDE7FF;opacity:1}
/* ---------- Footer ---------- */
.site-footer{
background:#0B1220;color:#94A3B8;font-size:.8125rem;
padding:48px 20px 28px;margin-top:80px;
}
.site-footer__inner{max-width:1120px;margin:0 auto}
.site-footer__top{
display:flex;justify-content:space-between;align-items:flex-start;
gap:24px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid #1E293B;margin-bottom:24px;
}
.site-footer__brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800}
.site-footer__brand .site-header__logo-mark{width:28px;height:28px}
.site-footer__links{display:flex;flex-wrap:wrap;gap:14px 28px;margin-bottom:20px}
.site-footer__links a{color:#CBD5E1}
.site-footer__links a:hover{color:#fff;opacity:1}
.site-footer__copy{color:#64748B;font-size:.75rem}
/* ---------- Breadcrumb ---------- */
.breadcrumb{
font-size:.8125rem;color:var(--c-text-3);
padding:14px 0;border-bottom:1px solid var(--c-border);
margin-bottom:32px;background:#fff;
}
.breadcrumb__list{
display:flex;flex-wrap:wrap;gap:6px;align-items:center;
max-width:1120px;margin:0 auto;padding:0 20px;
}
.breadcrumb__item+.breadcrumb__item::before{content:"›";margin-right:6px;color:#CBD5E1}
.breadcrumb__item a{color:var(--c-text-3);text-decoration:none;border-bottom:1px dotted #CBD5E1}
.breadcrumb__item a:hover{color:var(--color-main);border-bottom-color:var(--color-main)}
.breadcrumb__item:last-child{color:var(--c-text);font-weight:600}
/* ---------- Promotion Notice ---------- */
.promotion-notice{
font-size:.75rem;color:var(--c-text-3);
background:var(--c-bg-1);border:1px solid var(--c-border);
border-radius:var(--radius-s);
padding:8px 14px;margin-bottom:24px;display:flex;align-items:center;gap:8px;
}
.promotion-notice::before{
content:"PR";font-weight:800;font-size:.625rem;
background:#fff;color:var(--c-text-3);padding:1px 6px;border-radius:3px;
border:1px solid var(--c-border);
}
/* ---------- Headings ---------- */
.section-title{
font-size:1.75rem;font-weight:800;color:var(--c-text);
margin-bottom:20px;padding-bottom:0;border:0;
display:flex;align-items:center;gap:12px;letter-spacing:-.01em;line-height:1.35;
}
.section-title::before{
content:"";flex-shrink:0;width:6px;height:26px;border-radius:3px;
background:linear-gradient(180deg,var(--color-main) 0%,var(--color-main-dark) 100%);
}
.section-title--center{
justify-content:center;text-align:center;flex-direction:column;gap:12px;margin-bottom:28px;
}
.section-title--center::before{
width:48px;height:4px;background:var(--color-cta);
}
.section-title__sub{
font-size:.8125rem;font-weight:700;color:var(--color-main);
letter-spacing:.15em;text-transform:uppercase;margin-bottom:-4px;
display:block;
}
.subsection-title{
font-size:1.1875rem;font-weight:800;color:var(--c-text);
margin-bottom:14px;padding-left:14px;
border-left:4px solid var(--color-main);
line-height:1.5;
}
/* ---------- Buttons ---------- */
.btn-cta{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
background:linear-gradient(180deg,#FF7A30 0%,var(--color-cta) 100%);
color:#fff;font-size:1rem;font-weight:800;
padding:15px 28px;border-radius:999px;
text-align:center;letter-spacing:.03em;
box-shadow:var(--shadow-cta);
transition:transform .15s,box-shadow .15s,background .15s;
border:0;cursor:pointer;line-height:1.2;
position:relative;white-space:nowrap;
}
.btn-cta::after{
content:"›";font-weight:900;font-size:1.25rem;margin-left:2px;transition:transform .15s;
}
.btn-cta:hover{
transform:translateY(-2px);opacity:1;
box-shadow:0 12px 28px rgba(255,107,26,.38);
background:linear-gradient(180deg,#FF8540 0%,#F26100 100%);
}
.btn-cta:hover::after{transform:translateX(3px)}
.btn-cta:active{transform:translateY(0)}
.btn-cta--full{display:flex;width:100%}
.btn-cta--large{font-size:1.125rem;padding:18px 36px}
.btn-cta--xl{font-size:1.25rem;padding:20px 42px}
.btn-secondary{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
background:#fff;color:var(--color-main);
font-size:.9375rem;font-weight:700;
padding:12px 24px;border-radius:999px;
border:1.5px solid var(--color-main);
transition:all .15s;
}
.btn-secondary:hover{background:var(--color-main);color:#fff;opacity:1;transform:translateY(-1px)}
/* ---------- Card ---------- */
.card{
background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);
overflow:hidden;transition:all .2s;
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:#C9D6EC}
.card__img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--c-bg-2)}
.card__body{padding:18px}
.card__title{font-size:1rem;font-weight:700;margin-bottom:8px;color:var(--c-text);line-height:1.55}
.card__meta{font-size:.8125rem;color:var(--c-text-3);margin-bottom:12px}
/* ---------- Grid ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
/* ---------- Ranking Card ---------- */
.ranking-card{
background:#fff;border:1px solid var(--c-border);
border-radius:var(--radius-l);overflow:hidden;
margin-bottom:28px;box-shadow:var(--shadow);
transition:box-shadow .2s,transform .2s;
position:relative;
}
.ranking-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.ranking-card__header{
display:flex;align-items:center;gap:14px;
padding:18px 22px 14px;
background:linear-gradient(180deg,#F7FAFF 0%,#fff 100%);
border-bottom:1px solid var(--c-border-2);
}
.ranking-badge{
display:flex;align-items:center;justify-content:center;flex-direction:column;
width:56px;height:56px;border-radius:14px;
font-weight:900;font-size:1.375rem;color:#fff;
flex-shrink:0;line-height:1;
font-family:"Manrope","Noto Sans JP",sans-serif;
box-shadow:0 4px 10px rgba(0,0,0,.12);
position:relative;
}
.ranking-badge::before{
content:"No.";font-size:.5rem;font-weight:700;letter-spacing:.05em;
margin-bottom:2px;opacity:.9;
}
.ranking-badge--1{background:linear-gradient(135deg,#F5C84B 0%,#D89A11 100%)}
.ranking-badge--2{background:linear-gradient(135deg,#C9D4E3 0%,#94A3B8 100%)}
.ranking-badge--3{background:linear-gradient(135deg,#D8A87A 0%,#A06F3F 100%)}
.ranking-badge--n{background:linear-gradient(135deg,#6E7F99 0%,#4A5668 100%)}
.ranking-card__store-name{font-size:1.25rem;font-weight:800;color:var(--c-text);line-height:1.35}
.ranking-card__store-meta{font-size:.8125rem;color:var(--c-text-3);margin-top:4px;display:flex;gap:10px;flex-wrap:wrap}
.ranking-card__store-meta span{display:inline-flex;align-items:center;gap:4px}
.ranking-card__body{padding:22px}
.ranking-card__img{
width:100%;aspect-ratio:16/9;object-fit:cover;
border-radius:var(--radius-s);margin-bottom:16px;background:var(--c-bg-2);
}
/* スコアバー */
.score-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 16px}
.score-bar{background:var(--c-bg-1);border-radius:8px;padding:10px 12px}
.score-bar__label{font-size:.6875rem;color:var(--c-text-3);font-weight:600;margin-bottom:4px}
.score-bar__value{
font-family:"Manrope",sans-serif;font-weight:800;font-size:1rem;
color:var(--c-text);line-height:1;display:flex;align-items:baseline;gap:2px;
}
.score-bar__value small{font-size:.6875rem;color:var(--c-text-3);font-weight:600}
.score-bar__track{height:4px;background:#E2E8F2;border-radius:2px;margin-top:6px;overflow:hidden}
.score-bar__fill{height:100%;background:linear-gradient(90deg,var(--color-main) 0%,var(--color-cta) 100%);border-radius:2px}
/* ---------- Info Table ---------- */
.info-table{
width:100%;border-collapse:collapse;font-size:.9375rem;
margin-bottom:24px;border-radius:var(--radius-s);overflow:hidden;
border:1px solid var(--c-border);
}
.info-table th{
background:var(--c-bg-1);color:var(--c-text-2);font-weight:700;
text-align:left;padding:12px 16px;width:32%;
border-bottom:1px solid var(--c-border);vertical-align:top;
}
.info-table td{padding:12px 16px;border-bottom:1px solid var(--c-border);vertical-align:top;background:#fff}
.info-table tr:last-child th,.info-table tr:last-child td{border-bottom:0}
/* ---------- Review Box ---------- */
.review-box{
background:#FFF8F2;border:1px solid #FFD7B5;
border-radius:var(--radius);padding:20px;margin-bottom:20px;
}
.review-box__score{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.review-stars{color:#FFB020;font-size:1.25rem;letter-spacing:3px}
.review-score-num{font-family:"Manrope",sans-serif;font-size:1.5rem;font-weight:800;color:#E56A00}
.review-box__text{font-size:.9375rem;color:var(--c-text-2);font-style:italic;line-height:1.8}
/* ---------- Highlight Box ---------- */
.highlight-box{
background:var(--color-main-light);border:1px solid #C9D9FF;
border-radius:var(--radius-s);padding:16px 20px;margin-bottom:24px;
}
.highlight-box--caution{background:#FFF8EC;border-color:#FFDDA0}
/* ---------- TOC ---------- */
.toc{
background:var(--c-bg-1);border:1px solid var(--c-border);
border-radius:var(--radius);padding:22px 26px;margin-bottom:40px;
position:relative;
}
.toc__title{
font-size:.9375rem;font-weight:800;color:var(--c-text);
margin-bottom:14px;display:flex;align-items:center;gap:8px;
}
.toc__title::before{
content:"";width:16px;height:16px;background:var(--color-main);border-radius:3px;
box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 5px var(--color-main);
}
.toc__list{list-style:none;padding:0;counter-reset:toc}
.toc__list li{
counter-increment:toc;font-size:.9375rem;margin-bottom:8px;padding-left:32px;position:relative;
}
.toc__list li::before{
content:counter(toc,decimal-leading-zero);
position:absolute;left:0;top:1px;
font-family:"Manrope",sans-serif;font-weight:800;font-size:.75rem;
color:var(--color-main);
background:#fff;border:1.5px solid var(--color-main);
width:22px;height:22px;border-radius:6px;
display:flex;align-items:center;justify-content:center;line-height:1;
}
.toc__list a{color:var(--c-text);text-decoration:none;font-weight:600}
.toc__list a:hover{color:var(--color-main);opacity:1}
/* ---------- Area Search ---------- */
.area-search{
background:linear-gradient(135deg,var(--color-main-dark) 0%,var(--color-main) 55%,#2476FF 100%);
padding:56px 20px;text-align:center;color:#fff;
position:relative;overflow:hidden;
}
.area-search::before,.area-search::after{
content:"";position:absolute;border-radius:50%;pointer-events:none;
background:radial-gradient(circle at center,rgba(255,255,255,.15) 0%,transparent 70%);
}
.area-search::before{width:500px;height:500px;top:-200px;left:-100px}
.area-search::after{width:400px;height:400px;bottom:-150px;right:-100px}
.area-search__inner{position:relative;z-index:1;max-width:720px;margin:0 auto}
.area-search__eyebrow{
display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.2em;
color:#FFB98A;margin-bottom:10px;
}
.area-search__title{
font-size:1.625rem;font-weight:800;margin-bottom:8px;letter-spacing:-.01em;line-height:1.4;
}
.area-search__subtitle{font-size:.9375rem;color:#C7D5EC;margin-bottom:28px}
.area-search__form{
display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;
background:#fff;padding:10px;border-radius:var(--radius);
box-shadow:0 20px 40px rgba(0,20,60,.35);
}
.area-search__select{
padding:14px 16px;border:1px solid var(--c-border);border-radius:var(--radius-s);
font-size:.9375rem;color:var(--c-text);background:#fff;
cursor:pointer;font-family:inherit;font-weight:600;
appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;
}
.area-search__select:focus{outline:0;border-color:var(--color-main);box-shadow:var(--ring-main)}
.area-search__btn{
background:linear-gradient(180deg,#FF7A30 0%,var(--color-cta) 100%);
color:#fff;border:0;padding:0 28px;border-radius:var(--radius-s);
font-size:1rem;font-weight:800;cursor:pointer;letter-spacing:.05em;
box-shadow:0 4px 12px rgba(255,107,26,.4);transition:all .15s;
display:flex;align-items:center;gap:6px;white-space:nowrap;
}
.area-search__btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(255,107,26,.5)}
.area-search__hint{margin-top:14px;font-size:.75rem;color:#AEC1E3;display:flex;justify-content:center;gap:16px;flex-wrap:wrap;align-items:center}
.area-search__hint b{color:#fff;font-weight:700}
.area-search__hint-link{color:#AEC1E3;text-decoration:none}.area-search__hint-link:hover b{color:#7EC8FF}
/* ---------- Hero (generic) ---------- */
.hero{padding:64px 20px;text-align:center;background:linear-gradient(135deg,var(--color-main-light) 0%,#fff 100%)}
.hero__title{font-size:2rem;font-weight:800;color:var(--c-text);line-height:1.4;margin-bottom:16px}
.hero__lead{font-size:1.0625rem;color:var(--c-text-2);max-width:640px;margin:0 auto 32px}
.section{padding:72px 0}
.section--gray{background:var(--c-bg-1)}
.section--tight{padding:48px 0}
/* ---------- Affiliate CTA Block ---------- */
.affiliate-cta{
background:
radial-gradient(ellipse at top right,rgba(255,107,26,.10),transparent 60%),
linear-gradient(180deg,#FFF5EC 0%,#fff 100%);
border:2px solid var(--color-cta);
border-radius:var(--radius-l);
padding:36px 28px;text-align:center;margin:40px 0;
position:relative;overflow:hidden;
}
.affiliate-cta__eyebrow{
display:inline-block;font-size:.6875rem;font-weight:800;letter-spacing:.2em;
color:var(--color-cta);padding:4px 12px;border:1.5px solid var(--color-cta);
border-radius:999px;margin-bottom:12px;background:#fff;
}
.affiliate-cta__title{font-size:1.375rem;font-weight:800;color:var(--c-text);margin-bottom:8px;letter-spacing:-.01em;line-height:1.4}
.affiliate-cta__desc{font-size:.9375rem;color:var(--c-text-2);margin-bottom:22px;line-height:1.7}
.affiliate-cta__meta{font-size:.75rem;color:var(--c-text-3);margin-top:14px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.affiliate-cta__meta span{display:inline-flex;align-items:center;gap:4px}
/* ---------- Page Main Title ---------- */
.page-main-title{font-size:1.875rem;font-weight:800;color:var(--c-text);line-height:1.4;margin-bottom:14px;letter-spacing:-.01em}
.page-main-lead{font-size:1rem;color:var(--c-text-2);line-height:1.9;margin-bottom:32px}
/* ---------- Area Intro Box ---------- */
.area-intro-box{
background:linear-gradient(135deg,var(--color-main-light) 0%,#F0F5FF 100%);
border:1px solid #D5E1FF;
border-radius:var(--radius-l);
padding:28px 32px;margin-bottom:36px;position:relative;
}
.area-intro-box__title{
font-size:1.375rem;font-weight:800;color:var(--color-main-dark);
margin-bottom:14px;padding-bottom:12px;border-bottom:2px solid rgba(11,95,255,.2);
display:flex;align-items:center;gap:10px;line-height:1.5;
}
.area-intro-box__title::before{
content:"📍";font-size:1.125rem;
}
.area-intro-box__text{font-size:.9375rem;color:var(--c-text);line-height:1.9;margin-bottom:16px}
.area-intro-box__features{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
.area-intro-box__features li{
background:#fff;border:1px solid var(--color-main);color:var(--color-main);
font-size:.8125rem;font-weight:700;padding:6px 14px;border-radius:999px;
}
/* エリアKPI */
.area-kpi{
display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
margin:16px 0 0;
}
.area-kpi__item{
background:#fff;border:1px solid #D5E1FF;border-radius:var(--radius-s);
padding:14px;text-align:center;
}
.area-kpi__label{font-size:.6875rem;color:var(--c-text-3);font-weight:700;letter-spacing:.05em}
.area-kpi__value{
font-family:"Manrope",sans-serif;font-weight:800;font-size:1.5rem;
color:var(--color-main-dark);line-height:1.1;margin-top:2px;
}
.area-kpi__value small{font-size:.75rem;color:var(--c-text-2);font-weight:600;margin-left:2px}
/* ---------- Store Card (Bページ) ---------- */
.store-card{
border:1px solid var(--c-border);border-radius:var(--radius-l);
overflow:hidden;margin-bottom:40px;background:#fff;
box-shadow:var(--shadow);
}
.store-card--rank-1{border-color:#F5C84B;box-shadow:0 10px 28px rgba(245,200,75,.2),0 1px 2px rgba(0,0,0,.05)}
.store-card__header{
display:flex;align-items:center;gap:16px;
padding:18px 24px;background:linear-gradient(180deg,#F7FAFF 0%,#fff 100%);
border-bottom:1px solid var(--c-border-2);
}
.store-card__header-info{flex:1;min-width:0}
.store-card__name{font-size:1.375rem;font-weight:800;color:var(--c-text);margin:0 0 4px;line-height:1.35;letter-spacing:-.01em}
.store-card__rating{
display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--c-text-3);
flex-wrap:wrap;
}
.store-card__rating b{font-family:"Manrope",sans-serif;color:#E56A00;font-size:1rem;font-weight:800}
.store-card__body{padding:24px}
.store-card__summary{
font-size:.9375rem;color:var(--c-text);line-height:1.85;margin-bottom:20px;
padding:16px 18px;background:var(--c-bg-1);border-radius:var(--radius-s);
border-left:4px solid var(--color-main);
}
.store-card__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;align-items:center}
.store-card__credit{font-size:.6875rem;color:#AAB2C0;margin-top:8px;margin-bottom:0}
.store-card__credit a{color:#AAB2C0;text-decoration:underline}
/* 2カラム */
.store-card__cols{
display:grid;grid-template-columns:44% 56%;gap:22px;margin:18px 0;align-items:start;
}
.store-card__img-col img{width:100%;border-radius:var(--radius-s);display:block;aspect-ratio:4/3;object-fit:cover}
.store-card__img-placeholder{
width:100%;aspect-ratio:4/3;border-radius:var(--radius-s);
background:#F4F6F8;
display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;
font-size:.8125rem;color:#8A96A8;text-align:center;padding:20px;line-height:1.7;
border:1px solid #DDE3EC;
}
.store-card__img-placeholder a{color:#6B7A8D;text-decoration:underline;font-size:.75rem}
.store-card__img-credit{font-size:.6875rem;color:#AAB2C0;margin-top:6px}
.store-card__img-credit a{color:#AAB2C0;text-decoration:underline}
/* チェックリスト */
.check-list{list-style:none;padding:0;margin:0}
.check-list li{
padding:10px 0 10px 28px;position:relative;
font-size:.9375rem;color:var(--c-text);
border-bottom:1px dashed var(--c-border-2);line-height:1.55;
}
.check-list li:last-child{border-bottom:none}
.check-list li::before{
content:"";position:absolute;left:0;top:14px;
width:18px;height:18px;border-radius:50%;
background:#E8F3EC url("data:image/svg+xml;utf8,") center/10px no-repeat;
}
/* ---------- Store Highlights ---------- */
.store-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.store-highlights__col{border-radius:var(--radius-s);padding:18px 16px}
.store-highlights__col--points{background:#EAF1FF;border:1px solid #C9D9FF}
.store-highlights__col--merit{background:#EAF8EF;border:1px solid #B7E5C3}
.store-highlights__col--demerit{background:#FFF0F0;border:1px solid #F9C9C9}
.store-highlights__col h4{font-size:.8125rem;font-weight:800;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.store-highlights__col--points h4{color:var(--color-main-dark)}
.store-highlights__col--merit h4{color:#258049}
.store-highlights__col--demerit h4{color:#B32D2D}
.store-highlights__col ul{padding:0;list-style:none}
.store-highlights__col li{font-size:.8125rem;color:var(--c-text);padding-left:18px;position:relative;margin-bottom:8px;line-height:1.65}
.store-highlights__col--points li::before{content:"◆";position:absolute;left:0;color:var(--color-main);font-size:.625rem;top:4px}
.store-highlights__col--merit li::before{content:"○";position:absolute;left:0;color:#258049;top:0}
.store-highlights__col--demerit li::before{content:"△";position:absolute;left:0;color:#B32D2D;top:0}
/* ---------- Recommended For ---------- */
.store-recommended{
background:#FFF8EC;border:1px solid #FFD999;
border-radius:var(--radius-s);padding:18px 22px;margin-bottom:24px;
}
.store-recommended h4{font-size:.9375rem;font-weight:800;color:#B37100;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.store-recommended h4::before{content:"👤"}
.store-recommended ul{list-style:none;padding:0}
.store-recommended li{font-size:.875rem;color:var(--c-text);padding-left:22px;position:relative;margin-bottom:6px;line-height:1.65}
.store-recommended li::before{content:"→";position:absolute;left:0;color:#C58200;font-weight:700}
/* ---------- Merit/Demerit Grid (Cページ) ---------- */
.merit-demerit-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.merit-box{border-radius:var(--radius-s);padding:22px 20px}
.merit-box{background:#EAF8EF;border:1px solid #B7E5C3}
.merit-box--demerit{background:#FFF0F0;border:1px solid #F9C9C9}
.merit-box__title{font-size:1rem;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.merit-box__title--merit{color:#258049}
.merit-box__title--merit::before{content:"";width:18px;height:18px;border-radius:50%;background:#258049 url("data:image/svg+xml;utf8,") center/10px no-repeat}
.merit-box__title--demerit{color:#B32D2D}
.merit-box__title--demerit::before{content:"";width:18px;height:18px;border-radius:50%;background:#B32D2D;color:#fff;font-size:.625rem;display:inline-flex;align-items:center;justify-content:center;font-weight:900}
.merit-box__title--demerit::after{content:"!";position:absolute;color:#fff;font-weight:900;font-size:.625rem;margin-left:-14px;margin-top:1px}
.merit-box__list{padding:0;list-style:none}
.merit-box__list li{font-size:.875rem;color:var(--c-text);padding-left:22px;position:relative;margin-bottom:10px;line-height:1.65}
.merit-box .merit-box__list li::before{content:"○";position:absolute;left:0;color:#258049;font-weight:700}
.merit-box--demerit .merit-box__list li::before{content:"△";position:absolute;left:0;color:#B32D2D;font-weight:700}
/* ---------- FAQ List ---------- */
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{
border:1px solid var(--c-border);border-radius:var(--radius-s);
overflow:hidden;background:#fff;
}
.faq-item__q{
background:var(--color-main-light);color:var(--color-main-dark);
font-weight:800;font-size:.9375rem;padding:16px 20px 16px 52px;margin:0;
position:relative;line-height:1.5;
}
.faq-item__q::before{
content:"Q";position:absolute;left:16px;top:50%;transform:translateY(-50%);
width:26px;height:26px;background:var(--color-main);color:#fff;
border-radius:50%;display:flex;align-items:center;justify-content:center;
font-family:"Manrope",sans-serif;font-weight:800;font-size:.875rem;
}
.faq-item__a{
font-size:.9375rem;color:var(--c-text);padding:16px 20px 16px 52px;margin:0;line-height:1.85;position:relative;
}
.faq-item__a::before{
content:"A";position:absolute;left:16px;top:16px;
width:26px;height:26px;background:var(--color-cta);color:#fff;
border-radius:50%;display:flex;align-items:center;justify-content:center;
font-family:"Manrope",sans-serif;font-weight:800;font-size:.875rem;
}
/* ---------- Top Hero ---------- */
.top-hero{
padding:84px 20px 72px;text-align:center;
background:
radial-gradient(ellipse 70% 60% at 30% 0%, rgba(255,107,26,.08), transparent 60%),
radial-gradient(ellipse 70% 60% at 90% 10%, rgba(11,95,255,.12), transparent 60%),
linear-gradient(180deg,#F5F8FF 0%,#fff 100%);
border-bottom:1px solid var(--c-border);
position:relative;overflow:hidden;
}
.top-hero__eyebrow{
display:inline-flex;align-items:center;gap:8px;
font-size:.75rem;font-weight:800;letter-spacing:.15em;color:var(--color-main);
background:#fff;padding:6px 16px;border-radius:999px;
border:1px solid #D5E1FF;margin-bottom:18px;
box-shadow:var(--shadow-sm);
}
.top-hero__eyebrow::before{
content:"";width:8px;height:8px;border-radius:50%;background:var(--color-cta);
box-shadow:0 0 0 3px rgba(255,107,26,.25);
}
.top-hero__title{
font-size:2.75rem;font-weight:900;color:var(--c-text);
line-height:1.3;margin-bottom:18px;letter-spacing:-.02em;
max-width:880px;margin-left:auto;margin-right:auto;
}
.top-hero__title em{font-style:normal;color:var(--color-main);position:relative;white-space:nowrap}
.top-hero__title em::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:10px;
background:rgba(255,107,26,.25);z-index:-1;
}
.top-hero__lead{font-size:1.0625rem;color:var(--c-text-2);max-width:640px;margin:0 auto 32px;line-height:1.85}
.top-hero__cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
/* 信頼バー */
.trust-bar{
display:flex;gap:24px;justify-content:center;flex-wrap:wrap;
padding-top:24px;border-top:1px solid var(--c-border);
max-width:720px;margin:32px auto 0;font-size:.8125rem;color:var(--c-text-3);
}
.trust-bar__item{display:flex;align-items:center;gap:8px;font-weight:600}
.trust-bar__item b{font-family:"Manrope",sans-serif;color:var(--c-text);font-size:1.125rem;font-weight:800}
/* ---------- Steps ---------- */
.steps{
display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;
align-items:stretch;margin-top:40px;
}
.step-item{
text-align:center;background:#fff;border:1px solid var(--c-border);
border-radius:var(--radius);padding:28px 20px 24px;
position:relative;transition:all .2s;
}
.step-item:hover{border-color:var(--color-main);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.step-item__num{
display:inline-flex;align-items:center;justify-content:center;
width:36px;height:36px;background:linear-gradient(135deg,var(--color-main) 0%,var(--color-main-dark) 100%);
color:#fff;border-radius:50%;font-weight:900;font-size:.9375rem;
margin-bottom:14px;font-family:"Manrope",sans-serif;
box-shadow:0 4px 10px rgba(11,95,255,.3);
}
.step-item__icon{font-size:2rem;margin-bottom:8px;line-height:1}
.step-item__title{font-size:1.0625rem;font-weight:800;color:var(--c-text);margin-bottom:6px}
.step-item__text{font-size:.8125rem;color:var(--c-text-2);line-height:1.65}
.step-item__arrow{
font-size:1.5rem;color:var(--color-main);flex-shrink:0;align-self:center;
font-weight:900;
}
/* ---------- Recommend Grid ---------- */
.recommend-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.recommend-item{
display:flex;align-items:flex-start;gap:12px;
background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-s);padding:18px 20px;
transition:all .2s;
}
.recommend-item:hover{border-color:var(--color-main);background:var(--color-main-light)}
.recommend-item__icon{
font-size:1rem;flex-shrink:0;width:24px;height:24px;border-radius:50%;
background:var(--color-main);color:#fff;display:flex;align-items:center;justify-content:center;
font-weight:800;margin-top:1px;
}
.recommend-item p{font-size:.9375rem;color:var(--c-text);line-height:1.7;margin:0;font-weight:600}
/* ---------- Price Overview ---------- */
.price-overview{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.price-overview__item{
background:#fff;border:1px solid var(--c-border);
border-radius:var(--radius);padding:22px 24px;text-align:center;
position:relative;overflow:hidden;
}
.price-overview__item::before{
content:"";position:absolute;top:0;left:0;right:0;height:4px;
background:linear-gradient(90deg,var(--color-main) 0%,var(--color-cta) 100%);
}
.price-overview__label{font-size:.8125rem;color:var(--c-text-3);margin-bottom:8px;font-weight:700;letter-spacing:.05em}
.price-overview__value{
font-family:"Manrope",sans-serif;font-size:1.75rem;font-weight:800;
color:var(--color-main-dark);line-height:1.2;
}
.price-overview__value small{font-size:.75rem;color:var(--c-text-2);font-weight:600;margin-left:2px}
.price-overview__desc{font-size:.9375rem;color:var(--c-text-2);line-height:1.85;margin:0}
/* ---------- Point List (Bページ 選び方) ---------- */
.point-list-styled{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.point-list-styled__item{
display:flex;gap:18px;align-items:flex-start;
background:#fff;border:1px solid var(--c-border);
border-radius:var(--radius-s);padding:20px 24px;
transition:all .2s;
}
.point-list-styled__item:hover{border-color:var(--color-main);box-shadow:var(--shadow)}
.point-list-styled__num{
display:flex;align-items:center;justify-content:center;
width:40px;height:40px;
background:linear-gradient(135deg,var(--color-main) 0%,var(--color-main-dark) 100%);
color:#fff;border-radius:12px;font-weight:900;font-size:1.125rem;
flex-shrink:0;font-family:"Manrope",sans-serif;
box-shadow:0 4px 10px rgba(11,95,255,.25);
}
.point-list-styled__item strong{display:block;font-size:1rem;color:var(--c-text);margin-bottom:4px;font-weight:800}
.point-list-styled__item p{font-size:.875rem;color:var(--c-text-2);margin:0;line-height:1.75}
/* ---------- Store Header ---------- */
.store-header{
background:linear-gradient(135deg,var(--color-main-light) 0%,#F0F5FF 100%);
border:1px solid #D5E1FF;
border-radius:var(--radius-l);padding:28px;margin-bottom:36px;
display:flex;gap:28px;align-items:flex-start;
}
.store-header__img{
width:240px;flex-shrink:0;border-radius:var(--radius-s);
object-fit:cover;aspect-ratio:4/3;background:var(--c-bg-2);
}
.store-header__info{flex:1;min-width:0}
.store-header__name{font-size:1.625rem;font-weight:800;color:var(--c-text);margin-bottom:6px;line-height:1.35;letter-spacing:-.01em}
.store-header__catchcopy{font-size:1rem;color:var(--color-main);font-weight:700;margin-bottom:14px}
.store-header__meta{display:flex;gap:14px;font-size:.8125rem;color:var(--c-text-2);flex-wrap:wrap;margin-bottom:14px}
.store-header__meta span{display:inline-flex;align-items:center;gap:4px}
.store-header-simple{
background:var(--color-main-light);border-radius:var(--radius-l);
padding:28px 32px;margin-bottom:32px;
}
.store-header-simple__info{flex:1}
.store-header-simple__name{font-size:1.5rem;font-weight:800;color:var(--c-text);margin-bottom:6px}
.store-header-simple__catchcopy{font-size:1rem;color:var(--color-main);font-weight:700;margin-bottom:12px}
.store-header--no-image{padding:28px}
/* ---------- Article Eyecatch ---------- */
.article-eyecatch{margin:0 0 40px;border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow)}
.article-eyecatch__img{width:100%;aspect-ratio:16/7;object-fit:cover;background:var(--c-bg-2)}
.article-eyecatch__caption{
font-size:.6875rem;color:var(--c-text-3);text-align:right;
padding:8px 14px;background:var(--c-bg-1);
}
.article-eyecatch__caption a{color:var(--c-text-3);text-decoration:underline}
/* ---------- Store Gallery ---------- */
.store-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:8px}
.store-gallery__img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-s);background:var(--c-bg-2)}
.store-gallery:has(.store-gallery__img:only-child){grid-template-columns:1fr}
.store-gallery:has(.store-gallery__img:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
.store-gallery__credit{font-size:.6875rem;color:#AAB2C0;margin-bottom:0}
.store-gallery__credit a{color:#AAB2C0;text-decoration:underline}
.store-gallery--empty{
font-size:.9rem;color:var(--c-text-3);background:var(--c-bg-1);
padding:28px;border-radius:var(--radius-s);text-align:center;border:1px dashed var(--c-border);
}
.store-gallery--empty a{color:var(--color-main);text-decoration:underline}
/* ---------- Capbox (キープ互換) ---------- */
.capbox{margin:16px 0;border-radius:var(--radius-s);overflow:hidden;border:1.5px solid #DDD}
.capbox__ttl{padding:12px 18px;font-weight:800;font-size:.9375rem;color:#fff;display:flex;align-items:center;gap:8px}
.capbox__body{padding:16px 20px}
.capbox__body ul{list-style:none;padding:0;margin:0}
.capbox__body li{padding:5px 0 5px 24px;position:relative;font-size:.9rem;line-height:1.7;color:var(--c-text)}
.capbox--point{border-color:var(--color-main)}
.capbox--point .capbox__ttl{background:var(--color-main)}
.capbox--point .capbox__body{background:var(--color-main-light)}
.capbox--point li::before{content:"◆";position:absolute;left:0;color:var(--color-main);font-size:.625rem;top:9px}
.capbox--merit{border-color:#2d9e5f}
.capbox--merit .capbox__ttl{background:#2d9e5f}
.capbox--merit .capbox__body{background:#EAF8EF}
.capbox--merit li::before{content:"○";position:absolute;left:0;color:#258049;top:5px}
.capbox--demerit{border-color:#c0392b}
.capbox--demerit .capbox__ttl{background:#c0392b}
.capbox--demerit .capbox__body{background:#FFF0F0}
.capbox--demerit li::before{content:"△";position:absolute;left:0;color:#B32D2D;top:5px}
.capbox--recommend{border-color:var(--color-cta)}
.capbox--recommend .capbox__ttl{background:var(--color-cta)}
.capbox--recommend .capbox__body{background:#FFF8EC}
.capbox--recommend li::before{content:"✓";position:absolute;left:0;color:#C58200;font-weight:800;top:5px}
.capbox-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0;align-items:stretch}
.capbox-row>.capbox{display:flex;flex-direction:column}
.capbox-row>.capbox .capbox__body{flex:1}
/* ---------- Map Embed ---------- */
.map-embed{margin:24px 0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--c-border)}
.map-embed iframe{display:block;width:100%;height:320px;border:0}
/* ---------- Review Balloon ---------- */
.review-balloon{
margin:14px 0;background:#F7F9FC;border-left:4px solid #CBD5E1;
border-radius:0 var(--radius) var(--radius) 0;padding:16px 20px;
}
.review-balloon--positive{border-color:#2d9e5f;background:#EAF8EF}
.review-balloon--neutral{border-color:var(--color-main);background:var(--color-main-light)}
.review-balloon--caution{border-color:var(--color-cta);background:#FFF5EC}
.review-balloon__text{font-size:.9375rem;color:var(--c-text);line-height:1.85;margin:0 0 8px}
.review-balloon__author{font-size:.8125rem;color:var(--c-text-3);margin:0;font-weight:600}
/* ---------- Score Box ---------- */
.store-score-box{
display:flex;align-items:center;gap:18px;
background:linear-gradient(135deg,var(--color-main-light) 0%,#F0F5FF 100%);
border:2px solid var(--color-main);border-radius:var(--radius);
padding:20px 24px;margin:20px 0 28px;
}
.store-score-box__num{
font-family:"Manrope",sans-serif;font-size:3rem;font-weight:800;
color:var(--color-main-dark);line-height:1;flex-shrink:0;letter-spacing:-.02em;
}
.store-score-box__num small{font-size:1rem;color:var(--c-text-3);font-weight:700}
.store-score-box__details{flex:1}
.store-score-box__stars{font-size:1.375rem;color:#FFB020;letter-spacing:2px}
.store-score-box__label{font-size:.8125rem;color:var(--c-text-2);margin-top:4px;font-weight:600}
/* ---------- Related Articles ---------- */
.related-articles{margin-top:64px;padding-top:40px;border-top:2px solid var(--color-main-light)}
.related-articles__list{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px;margin-top:16px}
.related-articles__link{
display:flex;align-items:center;gap:14px;padding:16px 20px;
background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-s);
transition:all .15s;text-decoration:none;
}
.related-articles__link:hover{background:var(--color-main-light);border-color:var(--color-main);opacity:1;transform:translateX(4px)}
.related-articles__label{
font-size:.6875rem;font-weight:800;color:#fff;
background:var(--color-main);padding:3px 10px;border-radius:4px;
flex-shrink:0;white-space:nowrap;letter-spacing:.05em;
}
.related-articles__title{font-size:.9375rem;color:var(--c-text);font-weight:700;line-height:1.5}
/* ---------- Sticky CTA (mobile) ---------- */
.sticky-cta{
position:fixed;left:0;right:0;bottom:0;z-index:90;
background:#fff;border-top:1px solid var(--c-border);
padding:10px 14px calc(10px + env(safe-area-inset-bottom));
box-shadow:0 -6px 20px rgba(15,23,42,.1);
display:none;
}
.sticky-cta .btn-cta{width:100%;padding:14px 20px;font-size:.9375rem}
/* ---------- Responsive ---------- */
@media (max-width:860px){
.hero__title{font-size:1.5rem}
.top-hero{padding:56px 20px 48px}
.top-hero__title{font-size:1.875rem}
.steps{grid-template-columns:1fr;gap:10px}
.step-item__arrow{transform:rotate(90deg);margin:2px auto;font-size:1.25rem}
.recommend-grid{grid-template-columns:1fr}
.price-overview{grid-template-columns:1fr}
.store-highlights{grid-template-columns:1fr}
.merit-demerit-grid{grid-template-columns:1fr}
.capbox-row{grid-template-columns:1fr}
.store-card__cols{grid-template-columns:1fr}
.store-score-box{gap:14px;padding:16px 18px}
.store-score-box__num{font-size:2.25rem}
.map-embed iframe{height:240px}
.grid-3,.grid-2{grid-template-columns:1fr}
.store-gallery{grid-template-columns:repeat(2,1fr)}
.section{padding:48px 0}
.area-search__form{grid-template-columns:1fr 1fr;gap:8px;padding:8px}
.area-search__btn{grid-column:1/-1;padding:14px}
.area-intro-box{padding:22px}
.area-kpi{grid-template-columns:repeat(3,1fr);gap:8px}
.area-kpi__value{font-size:1.125rem}
.store-header{flex-direction:column;padding:20px}
.store-header__img{width:100%}
.page-main-title{font-size:1.5rem}
.section-title{font-size:1.375rem}
.info-table,.info-table tbody,.info-table tr{display:block}
.info-table th,.info-table td{display:block;width:100%;border:0}
.info-table th{background:var(--c-bg-1);padding:10px 14px 4px;font-size:.8125rem}
.info-table td{padding:4px 14px 14px;border-bottom:1px solid var(--c-border)}
.info-table tr:last-child td{border-bottom:0}
.sticky-cta{display:block}
body.has-sticky-cta{padding-bottom:80px}
.ranking-card__body{padding:18px}
.score-bars{grid-template-columns:repeat(2,1fr)}
.site-header__nav{display:none}
}
@media (max-width:480px){
html{font-size:15px}
.btn-cta--full,.btn-cta--large{width:100%}
.top-hero__title{font-size:1.625rem}
.section-title::before{width:5px;height:22px}
}
/* ---------- Footer Categories ---------- */
.site-footer__cats{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;padding-top:16px;border-top:1px solid #1E293B}
.site-footer__cat-label{color:#64748B;font-size:.6875rem;font-weight:700;letter-spacing:.12em;width:100%;text-transform:uppercase}
.site-footer__cats a{color:#94A3B8;font-size:.8125rem}
.site-footer__cats a:hover{color:#fff;opacity:1}
.site-footer__cat-soon{color:#334155;font-size:.8125rem;cursor:default}