/* ============================================================
   assets/home.css — トップページ専用レイアウト
   共通のものは styles.css、このページだけのものはここ
============================================================ */

/* ============================================================
   トップページ専用レイアウト（このページだけで使うもの）
   旧 .variant-a / .variant-b / .variant-c は全廃し、採用案のみ残しています
============================================================ */

/* --- ヒーロー --- */
.hero { background:#fff; border-bottom:1px solid var(--border); padding:44px 0 52px; }
.hero-inner {
  max-width:1160px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:1.15fr 1fr; gap:40px; align-items:center;
}
.hero-tag {
  display:inline-block; color:var(--primary-deep); font-size:13px; font-weight:700;
  margin-bottom:14px; padding-left:12px; border-left:3px solid var(--primary);
}
.hero h1 { font-size:33px; line-height:1.55; margin-bottom:18px; }
.hero h1 mark { background:transparent; color:var(--primary-deep); padding:0; }
.hero p { color:var(--text-sub); font-size:15.5px; margin-bottom:24px; line-height:1.95; }
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; }
.hero-img { aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; position:relative; }
.hero-img .decoration {
  position:absolute; top:-20px; right:-20px; width:120px; height:120px;
  background:var(--accent-bright); border-radius:50%; opacity:.18; z-index:1;
}

/* --- お悩み別に探す --- */
.topic-list {
  display:grid; grid-template-columns:repeat(4,1fr); margin:0 0 40px;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
}
.topic-list-item {
  padding:20px; border-right:1px solid var(--border); text-decoration:none; color:var(--text);
  display:block; transition:background .18s, transform .18s var(--ease);
}
.topic-list-item:last-child { border-right:none; }
.topic-list-item:hover { background:var(--primary-pale); text-decoration:none; }
.topic-list-item:active { transform:scale(.985); }
.topic-list-item .title { font-size:15.5px; font-weight:700; margin-bottom:4px; color:var(--text); }
.topic-list-item .desc { font-size:12.5px; color:var(--muted); line-height:1.6; }

/* --- お悩みブロック --- */
.worries { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:36px 40px; margin:40px 0; }
.worries h3 { text-align:center; font-size:20px; margin-bottom:24px; }
.worry-list { display:grid; grid-template-columns:repeat(2,1fr); gap:12px 28px; }
.worry-item { display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--text); }
.worry-item::before {
  content:"✓"; color:var(--primary); font-weight:700; font-size:18px;
  line-height:1; margin-top:5px; flex:0 0 auto;
}
.worries-note { text-align:center; margin:22px 0 0; font-size:14px; color:var(--text-sub); }

/* --- ランキング（縦リスト） --- */
.ranking-list { display:flex; flex-direction:column; gap:20px; margin-bottom:28px; }
.ranking-item {
  background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:24px;
  display:grid; grid-template-columns:auto 190px 1fr 190px; gap:24px; align-items:center;
  position:relative; transition:transform .22s var(--ease), box-shadow .22s, border-color .22s;
}
.ranking-item:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--primary-line); }
.ranking-item.top { border:2px solid var(--gold); padding-top:32px; }
.ranking-item.top::before {
  content:"編集部イチオシ"; position:absolute; top:-2px; left:-2px;
  background:var(--gold); color:#fff; font-size:11.5px; font-weight:700;
  padding:4px 12px; border-radius:var(--radius) 0 var(--radius) 0;
}
.ranking-thumb { aspect-ratio:4/3; border-radius:var(--radius-sm); overflow:hidden; }
.ranking-info h3 { font-size:20px; margin-bottom:6px; }
.ranking-info h3 a { text-decoration:none; }
.ranking-catch { color:#8E3512; font-size:13.5px; font-weight:700; margin-bottom:10px; line-height:1.7; }
.ranking-features { display:flex; flex-wrap:wrap; gap:0 8px; margin-bottom:10px; }
.feat-tag { font-size:12.5px; color:var(--text-sub); font-weight:500; }
.feat-tag::before { content:"・"; color:var(--muted); }
.ranking-detail {
  display:grid; grid-template-columns:auto 1fr; gap:4px 14px;
  font-size:12.5px; color:var(--text-sub); margin:0;
}
.ranking-detail dt { font-weight:700; color:var(--muted); }
.ranking-detail dd { margin:0; }
.ranking-actions { display:flex; flex-direction:column; gap:10px; }
.ranking-price { text-align:center; font-size:12.5px; color:var(--text-sub); line-height:1.6; }
.ranking-price strong { display:block; color:#8E3512; font-size:18px; font-weight:700; }
.ranking-more { text-align:center; margin-bottom:8px; }

/* --- 記事グリッド --- */
.article-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:8px; }

/* --- 免責 --- */
.disclaimer {
  margin:44px 0 0; font-size:12.5px; color:var(--muted); line-height:1.9;
  border-top:1px solid var(--border); padding-top:20px;
}

/* --- レスポンシブ --- */
@media (max-width:1024px) {
  .hero h1 { font-size:28px; }
  .ranking-item { grid-template-columns:auto 1fr; gap:16px 20px; }
  .ranking-thumb { display:none; }
  .ranking-actions { grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; }
  .article-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .hero { padding:28px 0 36px; }
  .hero-inner { grid-template-columns:1fr; gap:26px; }
  .hero h1 { font-size:24px; line-height:1.6; }
  .hero p { font-size:15px; }
  .hero-btns .btn-cta, .hero-btns .btn-secondary { flex:1 1 100%; }
  .topic-list { grid-template-columns:repeat(2,1fr); }
  .topic-list-item { border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
  .topic-list-item:nth-child(2n) { border-right:none; }
  .topic-list-item:nth-last-child(-n+2) { border-bottom:none; }
  .worries { padding:24px 20px; margin:28px 0; }
  .worries h3 { font-size:18px; }
  .worry-list { grid-template-columns:1fr; }
  .ranking-item { grid-template-columns:1fr; gap:14px; padding:20px 18px; }
  .ranking-item.top { padding-top:30px; }
  .ranking-info h3 { font-size:18px; }
  .ranking-actions { flex-direction:column; }
  .ranking-actions .btn-cta, .ranking-actions .btn-secondary { width:100%; }
  .article-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .topic-list { grid-template-columns:1fr; }
  .topic-list-item { border-right:none; }
  .topic-list-item:nth-last-child(-n+2) { border-bottom:1px solid var(--border); }
  .topic-list-item:last-child { border-bottom:none; }
}