/* home.css — ページ種別固有スタイル。base.css と併用 */
/* ---------- 共通レイアウト ---------- */
.wrap{max-width:680px;margin:0 auto;padding:0 20px}
/* ---------- FV(ヒーロー) ---------- */
.hero{
  background:linear-gradient(160deg,#16324F 0%,#1E4468 60%,#245A7C 100%);
  color:#fff;padding:64px 0 104px;position:relative;overflow:hidden;
}
.hero::after{ /* 足あとのような点線の道 */
  content:"";position:absolute;left:-40px;right:-40px;bottom:38px;height:0;
  border-bottom:3px dashed rgba(255,255,255,.22);
  transform:rotate(-2deg);
}
.hero h1{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(27px,6vw,40px);line-height:1.45;letter-spacing:.02em;
}
.hero h1 .accent{color:var(--yellow)}
.hero .lede{margin-top:18px;font-size:14.5px;line-height:2;color:#d6e2ec;}
@media (max-width:560px){
  .hero{padding:44px 0 92px}
}
main.wrap{margin:60px auto 0;padding:0 20px 96px}
/* ---------- スタート質問 ---------- */
.panel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(22,50,79,.12);padding:30px 26px 26px;
}
@media (max-width:560px){
  .panel{padding:24px 18px 20px}
}
.start-panel .q-text{
  font-family:var(--font-display);font-weight:900;font-size:21px;color:var(--navy);
  margin-bottom:20px;line-height:1.6;
}
.start-panel .q-text::before{content:"Q.";color:var(--teal);margin-right:8px}
.opts{display:flex;flex-direction:column;gap:12px}
.opt-btn{
  display:block;text-decoration:none;position:relative;
  width:100%;text-align:left;background:#fff;border:2px solid var(--line);
  border-radius:12px;padding:15px 44px 15px 18px;font-size:15px;color:var(--ink);
  transition:border-color .15s ease, background .15s ease;
}
.opt-btn::after{
  content:"›";position:absolute;right:18px;top:50%;transform:translateY(-50%);
  font-family:var(--font-display);font-weight:900;font-size:20px;color:#B9C9D6;
  transition:color .15s ease, right .15s ease;
}
.opt-btn:hover{border-color:var(--teal);background:var(--teal-soft)}
.opt-btn:hover::after{color:var(--teal);right:14px}
.start-opt b{display:block;font-family:var(--font-display);font-size:16px;color:var(--navy)}
.start-opt span{display:block;font-size:12px;color:var(--sub);margin-top:3px;line-height:1.6}
/* ---------- ホームセクション共通 ---------- */
.home-sec{margin-top:64px}
.home-sec .sec-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px;
}
.home-sec h2{
  font-family:var(--font-display);font-weight:900;font-size:21px;color:var(--navy);line-height:1.5;
  padding-left:14px;border-left:4px solid var(--teal);
}
.sec-more{
  font-size:12.5px;font-weight:700;color:var(--teal);text-decoration:none;white-space:nowrap;
}
.sec-more:hover{text-decoration:underline}
.sec-desc{font-size:13px;color:var(--sub);margin-bottom:20px;padding-left:18px}
/* ---------- 記事カード ---------- */
.a-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:560px){.a-grid{grid-template-columns:1fr}}
.a-card{
  display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease;
}
a.a-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(22,50,79,.14)}
.a-card.soon{opacity:.72}
.a-card .thumb{
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--teal-soft),#D8E9F2);font-size:40px;
}
.a-card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.a-card .cat{
  align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  color:var(--teal);background:var(--teal-soft);border-radius:99px;padding:2px 10px;
}
.a-card .ttl{
  font-family:var(--font-display);font-weight:700;font-size:15.5px;
  color:var(--navy);line-height:1.55;
}
a.a-card:hover .ttl{color:var(--teal)}
.a-card .excerpt{
  font-size:12.5px;color:var(--sub);
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.a-card .meta{font-size:11px;color:var(--sub);margin-top:auto;padding-top:4px}
/* フッター余白の上書き(トップ/一覧のみ) */
.site-footer .ft-inner{max-width:960px;margin:0 auto;padding:44px 20px 32px}