/* ============================================================
   楽天ランキングサイト 共通スタイル
   モバイルファースト(375px基準)。デスクトップは768px以上で調整。
   構成: 変数 → リセット → レイアウト → 各コンポーネント → レスポンシブ
   ============================================================ */

:root{
  --c-main:#990011;
  --c-main-dark:#730009;
  --c-navy:#2F3C7E;
  --c-bg:#FCF6F5;
  --c-surface:#ffffff;
  --c-ink:#222;
  --c-ink-soft:#5a5a5a;
  --c-muted:#8a8a8a;
  --c-border:#e7dcd9;
  --c-border-soft:#efe6e4;
  --c-up:#c0392b;
  --c-down:#2c6bb0;
  --c-ok:#2e7d32;
  --radius-s:6px;
  --radius-m:10px;
  --radius-l:14px;
  --shadow-card:0 1px 3px rgba(50,20,20,.08);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,"Yu Gothic",system-ui,sans-serif;
  --maxw:760px;
}

/* ---------- リセット ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--c-ink);
  background:var(--c-bg);
  line-height:1.75;
  font-size:16px;
  word-break:break-word;
  overflow-wrap:anywhere;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--c-navy);text-decoration-thickness:1px;}
a:hover{text-decoration-thickness:2px;}
h1,h2,h3{line-height:1.4;color:var(--c-ink);}
h1{font-size:1.5rem;margin:.2em 0 .6em;}
h2{font-size:1.15rem;margin:1.6em 0 .7em;padding-bottom:.3em;border-bottom:2px solid var(--c-border);}
h3{font-size:1rem;margin:1em 0 .4em;}
p{margin:.6em 0;}
ul,ol{padding-left:1.3em;}
table{border-collapse:collapse;width:100%;}
th,td{text-align:left;padding:.5em .6em;}
code{font-family:ui-monospace,SFMono-Regular,Consolas,"Courier New",monospace;font-size:.92em;}
time{white-space:nowrap;}

/* ---------- レイアウト ---------- */
main{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 16px 48px;
}
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--c-navy);
  color:#fff;
  padding:10px 16px;
  z-index:100;
  border-radius:0 0 var(--radius-s) 0;
}
.skip-link:focus{left:0;}

/* ---------- ヘッダー ---------- */
.site-header{
  background:var(--c-surface);
  border-bottom:1px solid var(--c-border);
  padding:14px 16px 10px;
  text-align:center;
}
.site-name{margin:0;font-size:1.3rem;font-weight:700;}
.site-name a{color:var(--c-main);text-decoration:none;}
.pr-notice{
  margin:.4em 0 0;
  font-size:.72rem;
  color:var(--c-muted);
  letter-spacing:.01em;
}

/* ---------- パンくず ---------- */
.breadcrumbs{
  max-width:var(--maxw);
  margin:0 auto;
  padding:10px 16px 0;
  font-size:.78rem;
  color:var(--c-muted);
}
.breadcrumbs ol{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.3em;
  margin:0;
  padding:0;
}
.breadcrumbs li{display:flex;align-items:center;gap:.3em;}
.breadcrumbs li:not(:last-child)::after{content:"›";color:var(--c-border);margin-left:.3em;}
.breadcrumbs a{color:var(--c-ink-soft);text-decoration:none;}
.breadcrumbs a:hover{text-decoration:underline;}
.breadcrumbs [aria-current]{color:var(--c-ink-soft);}

/* ---------- 直答パッセージ・リード・根拠ボックス ---------- */
.direct-answer{
  background:#fff6f2;
  border:1px solid #f1d9d3;
  border-left:4px solid var(--c-main);
  border-radius:0 var(--radius-s) var(--radius-s) 0;
  padding:.8em 1em;
  font-size:.95rem;
  margin:1em 0;
}
.lead{font-size:1rem;color:var(--c-ink-soft);}
.value-prop h1{color:var(--c-main);}
.basis-box{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius-m);
  padding:.9em 1.1em;
  margin:1.2em 0;
}
.basis-box h2{margin-top:0;border-bottom:none;font-size:1rem;}
.basis-box ul{margin:.3em 0;padding-left:1.2em;}

/* ---------- 日本地図トグル ---------- */
.japan-map{
  margin:1.4em 0;
  border:1px solid var(--c-border);
  border-radius:var(--radius-m);
  background:var(--c-surface);
  padding:.2em .2em .8em;
}
.map-toggle-btn{
  cursor:pointer;
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:.4em;
  margin:.5em;
  padding:.6em 1em;
  background:var(--c-navy);
  color:#fff;
  border-radius:999px;
  font-weight:700;
  font-size:.92rem;
}
.map-toggle-btn::-webkit-details-marker{display:none;}
.map-toggle-btn:hover{background:#242f63;}
.map-panel{padding:.4em 1em 0;}
.map-note{font-size:.8rem;color:var(--c-muted);}
.map-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  margin:.6em 0 .3em;
}
.pref{
  display:block;
  text-align:center;
  font-size:.78rem;
  padding:.5em .2em;
  border-radius:var(--radius-s);
  border:1px solid var(--c-border);
  text-decoration:none;
}
.pref.is-available{
  background:#fff;
  color:var(--c-navy);
  font-weight:600;
  border-left:3px solid var(--c-navy);
}
.pref.is-available:hover{background:#f2f4fb;}
.pref.is-unavailable{
  color:#b9b9b9;
  background:#f4f4f4;
  border-color:#eee;
}
/* 地方ブロックの系統色(is-availableの左ボーダーのみ差し替え) */
.pref.block-block-hokkaido{border-left-color:#1976d2;}
.pref.block-block-tohoku{border-left-color:#2e7d32;}
.pref.block-block-kanto{border-left-color:var(--c-main);}
.pref.block-block-chubu{border-left-color:#f57f17;}
.pref.block-block-kinki{border-left-color:#6a1b9a;}
.pref.block-block-chugoku{border-left-color:#00838f;}
.pref.block-block-shikoku{border-left-color:#558b2f;}
.pref.block-block-kyushu-okinawa{border-left-color:#ef6c00;}

/* ---------- 比較表 ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:.6em 0;}
.summary-table table,.mini-ranking-table,.preset-table{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius-s);
  overflow:hidden;
  font-size:.9rem;
}
.summary-table th,.mini-ranking-table th,.preset-table th{
  background:#f7efee;
  white-space:nowrap;
  font-size:.82rem;
}
.summary-table td,.mini-ranking-table td,.preset-table td{
  border-top:1px solid var(--c-border-soft);
  white-space:nowrap;
}
.summary-table td.name,.mini-ranking-table td.name{white-space:normal;min-width:10em;}
.summary-table td.hensachi,.mini-ranking-table td.hensachi{
  font-weight:700;
  color:var(--c-main);
}
.num{font-variant-numeric:tabular-nums;font-weight:700;}
.badge-postage{
  display:inline-block;
  margin-left:.4em;
  padding:.05em .5em;
  font-size:.72rem;
  background:#e9f5ea;
  color:var(--c-ok);
  border-radius:999px;
}

/* ---------- ランキング商品カード ---------- */
.ranking-list{margin-top:1.6em;}
.item-card{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius-l);
  box-shadow:var(--shadow-card);
  padding:1em;
  margin:1em 0;
  scroll-margin-top:12px;
}
.item-head{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.5em;
  margin-bottom:.7em;
}
.item-rank{
  font-size:1.3rem;
  font-weight:800;
  color:var(--c-main);
}
.item-hensachi{
  margin-left:auto;
  background:var(--c-main);
  color:#fff;
  padding:.35em .8em;
  border-radius:999px;
  font-size:.95rem;
  font-weight:700;
}
.item-hensachi strong{font-size:1.15em;}
.rank-move{font-size:.82rem;font-weight:700;padding:.1em .5em;border-radius:999px;}
.rank-move.up{color:var(--c-up);background:#fbeceb;}
.rank-move.down{color:var(--c-down);background:#eaf1fa;}
.rank-move.keep{color:var(--c-muted);background:#f0f0f0;}
.rank-move.new{color:#fff;background:var(--c-navy);}

.item-body{display:flex;gap:1em;align-items:flex-start;flex-wrap:wrap;}
.item-body img{
  width:110px;height:110px;
  object-fit:contain;
  border:1px solid var(--c-border-soft);
  border-radius:var(--radius-s);
  background:#fff;
  flex-shrink:0;
}
.item-info{flex:1;min-width:180px;}
.item-name{font-size:1rem;margin:0 0 .3em;}
.item-shop{font-size:.8rem;color:var(--c-muted);margin:.2em 0;}
.item-price{font-size:.95rem;font-weight:700;margin:.2em 0 .6em;}

.metric-bars{margin:.6em 0;}
.metric-bar{display:flex;align-items:center;gap:.6em;margin:.35em 0;}
.metric-bar dt{
  flex:0 0 6.2em;
  font-size:.78rem;
  color:var(--c-ink-soft);
  margin:0;
}
.metric-bar dd{
  flex:1;
  display:flex;
  align-items:center;
  gap:.5em;
  margin:0;
  background:var(--c-border-soft);
  border-radius:999px;
  height:10px;
  position:relative;
}
.metric-bar dd .bar{
  display:block;
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--c-navy),var(--c-main));
}
.metric-bar dd .val{
  position:static;
  margin-left:.4em;
  font-size:.76rem;
  color:var(--c-ink-soft);
  white-space:nowrap;
}

.item-comment{
  font-size:.88rem;
  background:#f7f7f7;
  border-radius:var(--radius-s);
  padding:.6em .8em;
  color:var(--c-ink-soft);
}
.item-cta{margin:.8em 0 0;}
.btn-rakuten{
  display:block;
  text-align:center;
  background:var(--c-main);
  color:#fff !important;
  font-weight:700;
  font-size:1rem;
  padding:.9em 1em;
  border-radius:var(--radius-m);
  text-decoration:none;
  box-shadow:0 2px 0 var(--c-main-dark);
}
.btn-rakuten:hover{background:var(--c-main-dark);}
.btn-rakuten:active{box-shadow:none;transform:translateY(2px);}

/* ---------- FAQ ---------- */
.faq-item{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius-s);
  padding:.4em .9em;
  margin:.5em 0;
}
.faq-item summary{cursor:pointer;font-weight:600;padding:.4em 0;}
.faq-item p{margin:.2em 0 .7em;color:var(--c-ink-soft);}

/* ---------- 関連リンク ---------- */
.related{margin-top:1.8em;}
.related ul{padding-left:0;list-style:none;}
.related li{
  border-bottom:1px solid var(--c-border-soft);
}
.related a{
  display:block;
  padding:.6em .2em;
  text-decoration:none;
}
.related a:hover{text-decoration:underline;}

/* ---------- トップページ ---------- */
.top-page .value-prop{text-align:center;padding:.5em 0 .2em;}
.risers{margin-top:1.6em;}
.riser-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:.6em;}
.riser-card{
  display:flex;
  gap:.8em;
  align-items:center;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius-m);
  padding:.6em .8em;
}
.riser-card img{width:60px;height:60px;object-fit:contain;flex-shrink:0;border:1px solid var(--c-border-soft);border-radius:var(--radius-s);}
.riser-info{min-width:0;}
.riser-name{margin:0;font-size:.9rem;font-weight:600;}
.riser-meta{margin:.2em 0 0;font-size:.78rem;color:var(--c-ink-soft);}

.category-list{margin-top:1.8em;}
.cards{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}
.card{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius-m);
  box-shadow:var(--shadow-card);
}
.card a{
  display:block;
  padding:.9em .8em;
  text-decoration:none;
  color:var(--c-ink);
  font-weight:600;
  font-size:.92rem;
  text-align:center;
}
.card a:hover{color:var(--c-main);}

.how-to{margin-top:1.8em;}
.how-to-steps{padding-left:1.4em;}
.how-to-steps li{margin:.5em 0;}

/* ---------- 地域ハブ ---------- */
.genre-section{margin:1.6em 0;}
.genre-section h2{border-bottom:none;padding-bottom:0;}
.genre-section h2 a{text-decoration:none;color:var(--c-ink);}
.genre-section h2 a:hover{color:var(--c-main);}
.genre-more{text-align:right;font-size:.86rem;margin:.4em 0 0;}
.muted{color:var(--c-muted);font-size:.9rem;}

/* ---------- ガイド ---------- */
.guide-body{font-size:1rem;}
.guide-body h2{font-size:1.1rem;}
.guide-body img{border-radius:var(--radius-s);margin:.6em 0;}

/* ---------- 404 ---------- */
.not-found-page{text-align:center;padding:2em 0;}
.not-found-links{list-style:none;padding:0;display:inline-flex;flex-direction:column;gap:.4em;text-align:left;}

/* ---------- 固定ページ共通 ---------- */
.static-page h1{color:var(--c-main);}
.about-list{display:grid;grid-template-columns:7em 1fr;gap:.5em 1em;margin:1em 0;}
.about-list dt{font-weight:700;color:var(--c-ink-soft);}
.about-list dd{margin:0;}
.contact-email{font-size:1.1rem;font-weight:700;}
.contact-email a{color:var(--c-main);}

.formula-box{
  background:#fff8f5;
  border:1px dashed var(--c-main);
  border-radius:var(--radius-s);
  padding:.8em 1em;
  overflow-x:auto;
  margin:.6em 0;
}
.metric-defs{margin:.8em 0;}
.metric-defs dt{font-weight:700;margin-top:.6em;}
.metric-defs dd{margin:.1em 0 0;color:var(--c-ink-soft);}
.flow-steps li{margin:.5em 0;}
.note{font-size:.85rem;color:var(--c-ink-soft);background:#f7f7f7;padding:.6em .8em;border-radius:var(--radius-s);}
.preset-table th:first-child,.preset-table td:first-child{position:sticky;left:0;background:#fff;}
.preset-note{font-size:.85rem;color:var(--c-ink-soft);}

.score-note-list{list-style:none;padding:0;}
.score-note-entry{
  border-bottom:1px solid var(--c-border);
  padding:1em 0;
}
.score-note-entry:first-child{padding-top:0;}
.score-note-date{font-weight:700;margin-bottom:.3em;}
.score-note-diff{margin:.4em 0;padding-left:1.2em;font-size:.9rem;}
.score-note-change{font-size:.9rem;color:var(--c-ink-soft);}
.score-note-reason{font-size:.86rem;color:var(--c-ink-soft);}

/* ---------- フッター ---------- */
.site-footer{
  margin-top:2.5em;
  padding:1.4em 16px 2em;
  background:var(--c-surface);
  border-top:1px solid var(--c-border);
  font-size:.8rem;
  color:var(--c-ink-soft);
  text-align:center;
}
.site-footer nav ul{
  list-style:none;
  padding:0;
  margin:0 0 1em;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.3em 1em;
}
.site-footer nav a{color:var(--c-navy);text-decoration:none;}
.site-footer nav a:hover{text-decoration:underline;}
.data-source{font-size:.76rem;color:var(--c-muted);max-width:var(--maxw);margin:0 auto .5em;}
.rakuten-credit{margin:.3em 0;}
.rakuten-credit a{color:var(--c-ink-soft);}
.copyright{color:var(--c-muted);}

/* ============================================================
   デスクトップ調整(768px以上)
   ============================================================ */
@media (min-width:768px){
  body{font-size:16.5px;}
  main{padding:0 24px 64px;}
  .breadcrumbs{padding:14px 24px 0;}
  .site-header{padding:20px 16px 14px;}
  .site-name{font-size:1.5rem;}
  h1{font-size:1.9rem;}
  h2{font-size:1.3rem;}
  .map-grid{grid-template-columns:repeat(8,1fr);}
  .cards{grid-template-columns:repeat(3,1fr);}
  .item-body img{width:128px;height:128px;}
  .metric-bar dt{flex-basis:7.5em;}
  .btn-rakuten{max-width:320px;margin:0 auto;}
  .site-footer{padding:1.8em 24px 2.4em;}
}