@charset "utf-8";
/* =====================================================================
   add.css ｜ 下層コンテンツ（お役立ち情報）用 追加スタイル
   既存 style.css を上書きせず、新規ページでのみ読み込んで使用します。
   ブランドカラー：#036490
   ===================================================================== */

/* --- 共通コンテナ（本文の最大幅は既存 con7-1 に合わせ 755px） --- */
.cwrap{
  width:100%;
  max-width:755px;
  margin:0 auto;
  padding:0 16px;
  box-sizing:border-box;
}

/* --- パンくず --- */
.bc{
  width:100%;
  max-width:755px;
  margin:0 auto;
  padding:18px 16px 0;
  box-sizing:border-box;
  font-size:12px;
  letter-spacing:0.04em;
  color:#666;
}
.bc a{ color:#036490; text-decoration:none; }
.bc a:hover{ text-decoration:underline; }

/* --- リード文（hero 直下の導入） --- */
.lead{
  font-size:15px;
  line-height:30px;
  letter-spacing:0.05em;
  color:#333;
  margin:28px 0 0;
}

/* --- 目次 --- */
.toc{
  background:#f3f7f9;
  border:1px solid #d8e4ea;
  border-radius:6px;
  padding:18px 22px;
  margin:34px 0 10px;
}
.toc p{ font-size:14px; font-weight:600; color:#036490; margin:0 0 10px; }
.toc ol{ margin:0; padding-left:20px; }
.toc li{ font-size:13px; line-height:26px; }
.toc a{ color:#036490; text-decoration:none; }
.toc a:hover{ text-decoration:underline; }

/* --- カードグリッド（ハブ一覧／関連記事） --- */
.cardgrid{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin:24px 0 10px;
}
.card{
  flex:1 1 calc(50% - 18px);
  min-width:240px;
  border:1px solid #dfe6ea;
  border-radius:8px;
  padding:20px 22px;
  background:#fff;
  box-sizing:border-box;
  transition:box-shadow .2s, transform .2s;
  text-decoration:none;
  display:block;
}
.card:hover{ box-shadow:0 6px 18px rgba(3,100,144,.12); transform:translateY(-2px); }
.card .tag{
  display:inline-block;
  font-size:11px;
  color:#fff;
  background:#036490;
  border-radius:3px;
  padding:2px 9px;
  margin-bottom:10px;
  letter-spacing:0.04em;
}
.card h3{ font-size:15px; color:#1a1a1a; line-height:24px; margin:0 0 8px; font-weight:600; }
.card p{ font-size:12px; color:#666; line-height:22px; margin:0; }

/* --- 比較表 --- */
.cmp{
  width:100%;
  border-collapse:collapse;
  margin:24px 0;
  font-size:13px;
}
.cmp th, .cmp td{
  border:1px solid #d8e0e5;
  padding:12px 10px;
  text-align:center;
  line-height:22px;
}
.cmp thead th{ background:#036490; color:#fff; font-weight:600; }
.cmp tbody th{ background:#f3f7f9; text-align:left; white-space:nowrap; }
.cmp .ok{ color:#0a7a3d; font-weight:600; }
.cmp .hit{ background:#eef7f1; }

/* --- チェックリスト --- */
.checklist{ list-style:none; margin:20px 0; padding:0; }
.checklist li{
  position:relative;
  padding:8px 0 8px 30px;
  font-size:14px;
  line-height:26px;
  border-bottom:1px dotted #cfd8dd;
}
.checklist li:before{
  content:"✓";
  position:absolute; left:4px; top:8px;
  color:#036490; font-weight:700;
}

/* --- FAQ --- */
.faq dt{
  font-size:15px; font-weight:600; color:#036490;
  padding:18px 0 8px 28px; position:relative; line-height:26px;
  border-top:1px solid #e2e8ec;
}
.faq dt:before{
  content:"Q"; position:absolute; left:0; top:16px;
  background:#036490; color:#fff; font-size:12px;
  width:20px; height:20px; line-height:20px; text-align:center; border-radius:3px;
}
.faq dd{
  margin:0 0 18px; padding:0 0 0 28px; position:relative;
  font-size:14px; line-height:28px; color:#333;
}
.faq dd:before{
  content:"A"; position:absolute; left:0; top:0;
  background:#e0eef4; color:#036490; font-size:12px;
  width:20px; height:20px; line-height:20px; text-align:center; border-radius:3px; font-weight:700;
}

/* --- CTA ボックス --- */
.ctabox{
  width:100%; max-width:755px; margin:50px auto 0; box-sizing:border-box;
  background:#036490; border-radius:10px; padding:34px 28px; text-align:center;
}
.ctabox .ctah{ color:#fff; font-size:19px; font-weight:600; line-height:30px; margin:0 0 10px; letter-spacing:0.04em; }
.ctabox .ctat{ color:#dcebf3; color:#e8f1f6; font-size:13px; line-height:24px; margin:0 0 22px; }
.ctabtn{
  display:inline-block; background:#fff; color:#036490; font-size:15px; font-weight:700;
  text-decoration:none; padding:14px 40px; border-radius:50px; letter-spacing:0.04em;
  transition:opacity .2s;
}
.ctabtn:hover{ opacity:.85; }

/* --- 関連記事 --- */
.related{ width:100%; max-width:755px; margin:46px auto 0; padding:0 16px; box-sizing:border-box; }
.related > p.ttl{ font-size:16px; font-weight:600; color:#036490; border-left:4px solid #036490; padding-left:10px; margin:0 0 16px; }

/* --- 本文補助 --- */
.body-note{ background:#f7f7f5; border-left:4px solid #036490; padding:14px 18px; font-size:13px; line-height:26px; margin:24px 0; color:#333; }
.sec-pad{ padding-bottom:60px; }

/* --- レスポンシブ --- */
@media only screen and (max-width:1015px){
  .card{ flex:1 1 100%; }
  .ctabox{ margin-top:36px; padding:28px 18px; }
  .ctabox .ctah{ font-size:17px; }
  .cmp{ font-size:12px; }
  .cmp th, .cmp td{ padding:9px 5px; }
}

/* =====================================================================
   トップページ上部：お役立ち情報ナビバンド（TOPICS統合）
   ===================================================================== */
.navband{ width:100%; }
.navband-in{
  width:92%; max-width:1000px; margin:-46px auto 0; position:relative; z-index:5;
  background:#fff; border-radius:14px; box-shadow:0 14px 36px rgba(3,100,144,.16);
  padding:26px 30px 24px; box-sizing:border-box; border-top:4px solid #036490;
}
.navband-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.nb-en{ font-size:13px; font-weight:700; letter-spacing:.18em; color:#036490; }
.nb-en:before{ content:""; display:inline-block; width:22px; height:2px; background:#036490; vertical-align:middle; margin-right:8px; }
.nb-ja{ font-size:15px; font-weight:600; color:#222; }
.navband-feat{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.nb-feat{
  flex:1 1 calc(50% - 14px); min-width:260px; display:flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,#036490,#0a86bd); color:#fff; text-decoration:none;
  border-radius:10px; padding:14px 16px; font-size:13.5px; font-weight:600; line-height:1.5;
  transition:transform .2s, box-shadow .2s;
}
.nb-feat:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(3,100,144,.3); }
.nb-badge{ flex:none; background:#ffd34d; color:#5a4500; font-size:11px; font-weight:700; border-radius:4px; padding:3px 8px; white-space:nowrap; }
.navband-links{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.navband-links a{
  font-size:13px; color:#036490; text-decoration:none; border:1px solid #cfe0e9;
  border-radius:50px; padding:7px 16px; background:#f7fbfd;
  transition:background .2s,color .2s,border-color .2s;
}
.navband-links a:hover{ background:#036490; color:#fff; border-color:#036490; }
.nb-more{ font-weight:700; background:#036490 !important; color:#fff !important; border-color:#036490 !important; margin-left:auto; }
.nb-more:hover{ opacity:.88; }
@media only screen and (max-width:1015px){
  .navband-in{ width:90%; margin-top:-26px; padding:20px 18px; border-radius:12px; }
  .nb-feat{ flex:1 1 100%; }
  .nb-more{ margin-left:0; width:100%; text-align:center; box-sizing:border-box; }
}