/* --------- ベース設定 --------- */
:root{
  --bg:#ffffff;
  --fg:#222;
  --muted:#6b7280;
  --border:#e5e7eb;
  --accent:#0b8f5a;       /* 青系以外：視認性の高い深緑 */
  --accent-ink:#ffffff;
  --accent-weak:#dff3ea;
  --shadow:0 6px 20px rgba(0,0,0,.06);
  --radius:14px;
  --container: min(960px, 92vw);
  --lh:1.7;
}

html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{
  margin:0; color:var(--fg); background:var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  line-height:var(--lh); font-size:16px;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto;}

/* --------- 共通UI --------- */
.container{width:var(--container); margin-inline:auto; padding-inline:clamp(12px,2vw,20px);}
.visually-hidden{position:absolute!important; width:1px; height:1px; margin:-1px; border:0; padding:0; clip:rect(0 0 0 0); overflow:hidden;}
.skip-link{
  position:absolute; left:-9999px; top:auto;
}
.skip-link:focus{
  left:16px; top:16px; z-index:1000; background:var(--accent);
  color:var(--accent-ink); padding:8px 12px; border-radius:8px; box-shadow:var(--shadow);
}

.only-pc{ display: block; }
.only-sp{ display: none; }
@media screen and (max-width:767px){
	.only-pc{ display: none; }
	.only-sp{ display: block; }
}
/* --------- ヘッダー --------- */
.site-header{
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, #f8fbf9 0%, #fff 100%);
}

/* ← flexをやめて通常のブロックフローに戻す */
.site-header .container{
  padding-block:12px 2px;
  /* display:flex;  <-- 削除 */
}

/* ロゴ：左上に寄せ、小さめに */
.brand{
  display:block;
  width:max-content;   /* 画像幅に合わせる */
  margin:0;            /* 中央寄せ解除（左寄せ） */
}

.brand img{
  display:block;
  height:auto;         
  max-width:180px;     /* PC時の最大幅を小さく */
  width:100%;
}

/* スマホ時（768px以下） */
@media (max-width:768px){
  .brand img{
    max-width:120px;   /* スマホではさらに小さく */
  }
}

/* タイトルとリードも左寄せを明示して横並び化を防止 */
.page-title{
  margin:6px 0 8px;
  font-size:clamp(22px,3.4vw,36px);
  line-height:1.2;
  text-align:left;
}

.page-lead{
  margin:0;
  color:var(--muted);
  font-size:clamp(14px,2.2vw,16px);
  text-align:left;
}

/* --------- パンくず --------- */
.breadcrumbs{
margin: 14px 0 0;
}
.breadcrumbs .container{
display:flex; gap:4px; flex-wrap:wrap; padding-block:1px; font-size:12px;
}
.breadcrumbs a{color:var(--muted); text-decoration:none;}
.breadcrumbs li{list-style:none;}
.breadcrumbs li+li::before{content:">"; margin-inline:4px; color:#9ca3af;}
/* --------- フォントサイズ --------- */
.size-s{
  font-size:0.8em;
}

.size-xs{
  font-size:0.6em;
}

.size-l{
  font-size:1.2em;
}

.fw-bold{
  font-weight:700;
}

.fw-light{
  font-weight:300;
}

/* 小さくて細い */
.size-s-light{
  font-size:0.9em;
  font-weight:300;
}

/* 小さくて太い */
.size-s-bold{
  font-size:0.9em;
  font-weight:700;
}

.list-head {
  font-weight:700;   /* 太字 */
  color:#333;        /* 色を変えてもOK */
  margin-right:4px;
}

/* --------- 本文 --------- */
.article-meta{
  color: var(--muted);
  font-size: .95rem;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  justify-content: flex-end; /* ← 追加 */
}

.container.content p.article-meta {
  margin: 6px 0 12px;
  font-size: 0.8em;
  color: #999;
}

.content h2 {
  font-size: clamp(22px, 3vw, 30px);
  margin: 32px 0 18px;
  line-height: 1.3;
  padding: 14px 16px;
  background: #eef6ff;                  /* 明るめの青系背景 */
  border-left: 6px solid var(--accent); /* 太めのライン */
  border-radius: 6px;
  font-weight: 700;
}

.content h3 {
  font-size: clamp(19px, 2.6vw, 24px);
  margin: 26px 0 14px;
  padding: 8px 12px;
  border-left: 4px solid var(--accent);
  background: color-mix(in oklab, var(--accent) 6%, #fff);
  font-weight: 650;
}

.content h4{
  font-size: clamp(18px, 2.3vw, 22px);
  margin: 22px 0 10px;
  padding: 6px 10px 6px 14px;
  border-left: 3px solid color-mix(in oklab, var(--accent) 55%, #9ca3af);
  background: #f9f9f9;   /* H4より少し濃い背景 */
  border-radius: 4px;
  font-weight: 650;
  color: #374151;
}

.content h5{
  font-size: clamp(16px, 2vw, 20px);
  margin: 16px 0 8px;
  color: color-mix(in oklab, var(--accent) 65%, #111);
  font-weight: 650;
  padding-bottom: 2px;
  border-bottom: 1.5px solid #e5e7eb;
}

.container.content p {
  margin: 1.6em 0;
}

/* Fallback（color-mix非対応ブラウザ向け） */
@supports not (color: color-mix(in oklab, white, black)) {
  .content h4{ border-left-color: #9ca3af; background: #f9fafb; }
  .content h5{ color: var(--accent); }
}

.keypoints{padding-left:1.2em;}
.keypoints li{margin:.2em 0;}
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:12px; background:#fff;}
.table-wrap table{ min-width:560px; }
.steps{counter-reset:step;}
.steps li{margin:.5em 0; padding-left:.4em;}

.summary{
  margin-top:28px; padding:18px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--accent-weak);
}
.cta{margin-top:16px;}
.btn-primary{
  display:inline-block; padding:12px 18px; border-radius:999px;
  background:var(--accent); color:var(--accent-ink);
  text-decoration:none; font-weight:700; box-shadow:var(--shadow);
}
.btn-primary:hover{opacity:.92}

/* ===== 目次（Table of Contents） ===== */
.toc { margin: 12px auto 24px; }
.toc details{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
}
.toc summary{
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.toc summary::after{
  content: "▼";
  font-size: 0.9em;
  transform: rotate(0deg);
  transition: transform .2s ease;
  opacity: .7;
}
.toc details[open] summary::after{ transform: rotate(-180deg); }

.toc ol{
  margin: 0;
  padding: 0 16px 14px 38px;
}
.toc li{ margin: .35em 0; }
.toc a{
  color: #111;
  text-decoration: none;
  border-bottom: 1px dashed rgba(0,0,0,.25);
}
.toc a:hover{
  color: var(--accent);
  border-bottom-color: transparent;
}

/* アンカー到達時の見出しを少し目立たせる */
.content :target{
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* アンカー位置のズレ軽減（ヘッダー等がある場合） */
.content h2, .content h3, .content h4, .content h5{
  scroll-margin-top: 80px; /* 必要に応じて調整 */
}

/* ===== 横スクロールなし・幅いっぱいのフィットテーブル ===== */
.table-fit { margin: 16px 0; }

/* 基本：テーブルのまま。固定レイアウト＋折返しで収める */
.fit-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;           /* 列幅を均等/固定計算にして収める */
  background: #fff;
  border-radius: 12px;
}
.fit-table caption{
  text-align:left; padding:12px 14px;
  color: var(--muted); font-weight: 600;
}
.fit-table th{
  background:#f7f7f7;
}
.fit-table th, .fit-table td{
  padding:12px 14px;
  border:1px solid #ccc;
  text-align:center;
  vertical-align: middle;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.6;
  font-size:0.9em;
}
/* 横方向の中央寄せ用クラス */
.fit-table .left {
  text-align: left;
}

/* 横方向の右寄せ用クラス（オプション） */
.fit-table .right {
  text-align: right;
}
/* .fit-table tbody tr:nth-child(even){ background:#fcfcfc; } */

/* 1列目をやや広く（任意） */
.fit-table col.col-wide{ width: 32%; }

/* スマホ最適化 */
@media (max-width: 640px){
  .fit-table{ font-size: 14px; }
  .fit-table th, .fit-table td{ padding:10px 10px; }
  .fit-table col.col-wide{ width: 36%; }   /* ラベル列を少し広げる */
  /* ヘッダーの改行用 <br class="br-sm"> を有効化 */
  .br-sm{ display: inline; }
}
/* PCでは <br class="br-sm"> を無効化（1行表示） */
.br-sm{ display:none; }

/* 省略表示を避けたい場合に強制折返し（任意で付与） */
.fit-table .wrap{ white-space: normal; }

/* ---- オプション：どうしても列が多く潰れる場合の“低優先列”制御 ---- */
/* 低優先列に .col-opt を付けると極小幅で非表示にできる（必要時のみ） */
@media (max-width: 480px){
  .fit-table .col-opt{ display: none; }
}

/* --------- FAQ --------- */
.faq details{
  border:1px solid var(--border); border-radius:12px; background:#fff;
  padding:12px 14px; margin:10px 0;
}
.faq summary{cursor:pointer; font-weight:600;}
.faq .answer{margin-top:8px; color:#374151;}

/* --------- 関連リンク --------- */
.related-links ul{display:grid; gap:10px; padding-left:1.2em;}
.related-links li{margin:.2em 0;}
.related-title {
  font-size: 1.25rem;            /* 20px前後 */
  font-weight: 700;
  margin: 24px 0 12px;
  padding: 10px 14px;
  background: #f9fafb;           /* 薄いグレー背景 */
  border-left: 4px solid #3b82f6;/* 青のライン */
  border-radius: 4px;
  line-height: 1.4;
}


/* --------- 参照元 --------- */
.ref-box {
  margin: 1.5em 0;
  padding: 1em;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fafafa;
}
.ref-title {
  font-weight: bold;
  margin-bottom: .5em;
  font-size: 1rem;
  color: #333;
}
.ref-box ul {
  margin: 0;
  padding-left: 1.2em;
}
.ref-box li {
  margin-bottom: .4em;
  line-height: 1.5;
}
.ref-box a {
  color: #0f5cc0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ref-box a:hover {
  color: #0a46a0;
}
/* --------- フッター --------- */
.site-footer{
  border-top:1px solid var(--border); background:#f8fbf9; margin-top:28px;
}
.footer-grid{padding-block:24px;}
.footer-nav{
  display:flex; flex-wrap:wrap; gap:14px 18px; padding:0; margin-bottom: 40px;; list-style:none;
}
.footer-nav a{color:#374151; text-decoration:none;}
.footer-nav a:hover{color:var(--accent);}
copyright, .copyright{display:block; margin-top:40px; color:var(--muted); font-size:.9rem;}

.footer-note {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.6;
}
/* --- フッターメモ間のマージン --- */
.footer-note + .footer-note {
  margin-top: 20px;
}

/* ===== Back to Top ===== */
.back-to-top{
  position: fixed;
  right: max(16px, env(safe-area-inset-right) + 12px);
  bottom: max(16px, env(safe-area-inset-bottom) + 12px);
  z-index: 1000;

  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: var(--shadow); cursor: pointer;

  /* 初期は非表示（アニメしながら出す） */
  opacity: 0; transform: translateY(12px) scale(.96);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.back-to-top.is-visible{
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto;
}
.back-to-top:hover{ opacity: .92; }
.back-to-top:focus-visible{
  outline: 2px solid rgba(0,0,0,.25);
  outline-offset: 2px;
}

/* スマホで少し小ぶりに */
@media (max-width: 640px){
  .back-to-top{ width: 44px; height: 44px; }
}

/* ===== Card Loan Box（PC維持 / SP: [バナー] 説明 → 縦4行テーブル → CTA） ===== */
:root{
  --loan-accent: var(--accent, #0b8f5a);
  --loan-cta: #e11d48; --loan-cta-ink:#fff;
  --loan-border:#e5e7eb; --loan-muted:#6b7280;
  --loan-shadow: 0 8px 24px rgba(0,0,0,.06);
  --loan-banner-w-pc: 300px;             /* 300×250 */
}

/* --- PC / 共通 --- */
.loan-box{
  display:grid; grid-template-columns: 1fr var(--loan-banner-w-pc);
  gap:20px; padding:18px; border:1px solid var(--loan-border);
  border-radius:16px; background:#fff; box-shadow:var(--loan-shadow); color:#111;
}
/* --- ボックス間のマージン --- */
.loan-box + .loan-box {
  margin-top: 20px;
}
.loan-box__content{ min-width:0; }
.loan-box__title{
  margin:0 0 6px; line-height:1.25; font-size:clamp(22px,2.6vw,24px); font-weight:bold;
  border-left:4px solid var(--loan-accent); padding-left:.6em;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.loan-box__badge{ font-size:0.9rem; color:#d32f2f; font-weight:bold;
  background:#fff176; padding:.2em .6em; border-radius:999px; }
.loan-box__note {
  font-size: 18px;
  font-weight:bold;
  margin: 10px 0 6px;
}

.loan-box__lead{ margin:0; color:var(--loan-muted); }

/* PCの4ボックス（ul/li版） */
.loan-box__specs{
  list-style:none; padding:0; margin:14px 0 14px;
  display:grid; gap:10px; grid-template-columns:repeat(4,minmax(0,1fr));
}
.loan-box__spec{ border:1px solid var(--loan-border); border-radius:12px; background:rgba(59,130,246,0.05); padding:10px 12px; }
.loan-box__label{ display:block; margin:0 0 4px; font-weight:700; font-size:0.8rem; color:#374151; }
.loan-box__value{ display:block; margin:0; font-size:1rem; overflow-wrap:anywhere; }

.loan-box__cta{ margin:6px 0 0; }
.loan-box__btn{
  display:inline-block; width:100%; text-align:center; text-decoration:none; font-weight:800;
  padding:14px 18px; border-radius:999px; background:var(--loan-cta); color:var(--loan-cta-ink);
  box-shadow:var(--loan-shadow);
}
.loan-box__btn:hover{ opacity:.92; }

.loan-box__banner{ display:flex; justify-content:center; }
.loan-box__banner img{
  width:100%; max-width:var(--loan-banner-w-pc); height:auto; aspect-ratio:6/5;
  object-fit:cover; border-radius:12px; border:1px solid var(--loan-border); background:#fff;
}

/* PCではスマホ用テーブルは非表示／補助行は非表示 */
.loan-box__spectable{ display:none; }

/* --- PC：バナー縦中央 --- */
@media (min-width:769px){
  .loan-box{ grid-auto-rows:min-content; }
  .loan-box__banner{
    grid-column:2; grid-row:1 / -1;
    align-self:center; display:flex; align-items:center; justify-content:center;
  }
}

/* --- SP（768px）：[バナー] 説明 → 縦4行テーブル → CTA --- */
@media (max-width:768px){
  :root{ --loan-sp-banner-w:130px; --loan-sp-font:13px; }

  .loan-box{
    grid-template-columns:min(var(--loan-sp-banner-w),40vw) 1fr;
    grid-template-areas:
      "title  title"
      "note   note"
      "banner lead"
      "specs  specs"
      "cta    cta";
    gap:10px 12px; padding:12px;
  }

  /* ヘッダーの子要素を親グリッドに直接配置 */
  .loan-box__content, .loan-box__header{ display:contents; }
  .loan-box__title{ grid-area:title; }

  /* 任意の1行メモ（入れなければ行は高さ0で影響なし） */
  .loan-box__note {
    display: block;
    grid-area: note;
    margin: 0;
    color: var(--loan-muted);
    font-weight: bold;
    line-height: 1.6;
    font-size: 18px;
    font-weight:bold;
  }
  
  /* [バナー] 説明（横並び） */
  .loan-box__banner{
    grid-area:banner; align-self:center;
    display:flex; align-items:center; justify-content:center;
  }
  .loan-box__banner img{
    width:var(--loan-sp-banner-w); max-width:40vw; height:auto; aspect-ratio:6/5; object-fit:cover;
  }
  .loan-box__lead{ grid-area:lead; margin:0; font-size:14px; line-height:1.6; }

  /* 縦4行テーブル（PC用ボックスは隠す） */
  .loan-box__specs{ display:none; }
  .loan-box__spectable{
    grid-area:specs; display:table; width:100%;
    border-collapse:separate; border-spacing:0;
    font-size:var(--loan-sp-font); line-height:1.5; margin-top:2px;
  }
  .loan-box__spectable th,
  .loan-box__spectable td{
    padding:10px 12px; text-align:left; vertical-align:middle;
    border:1px solid var(--loan-border); background:#fff;
    word-break:break-word; overflow-wrap:anywhere;
  }
  .loan-box__spectable th{ width:6em; font-weight:700; color:#374151; white-space:nowrap; background: var(--loan-head-bg, #f3f4f6); }
  .loan-box__spectable tr:first-child th{ border-top-left-radius:12px; }
  .loan-box__spectable tr:first-child td{ border-top-right-radius:12px; }
  .loan-box__spectable tr:last-child  th{ border-bottom-left-radius:12px; }
  .loan-box__spectable tr:last-child  td{ border-bottom-right-radius:12px; }

  .loan-box__cta{ grid-area:cta; margin-top:6px; }
  .loan-box__btn{ padding:12px 14px; }

  /* バナーが無い（広告ブロック等）場合は1カラムに回帰 */
  .loan-box:not(:has(.loan-box__banner img)){
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "note"
      "lead"
      "specs"
      "cta";
  }
}

/* ===== Sitemap ===== */
.sitemap-header{
  margin: 8px 0 16px;
}
.sitemap-header h1{
  font-size: clamp(20px, 3.2vw, 28px);
  margin: 0 0 6px;
}
.sitemap-desc{
  margin: 0;
  color: var(--muted, #6b7280);
  font-size: 14px;
}

/* 既存の sitemap-grid を“常に1カラム”に固定 */
.sitemap-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr; /* ← auto-fit をやめて1列に */
}

.sitemap-section{
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: var(--shadow, 0 4px 16px rgba(0,0,0,.04));
  padding: 12px 14px;
}

.sitemap-heading{
  display: block;
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.4;
  border-left: 4px solid var(--accent, #0b8f5a);
  padding-left: .6em;
}

.sitemap-list{
  margin-bottom: 30px;
  padding-left: 1.2em;  /* デフォのディスクを活かす */
  list-style: disc;
}
.sitemap-list > li{
  margin: .4em 0;
}
.sitemap-list a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(0,0,0,.25);
}
.sitemap-list a:hover{
  color: var(--accent, #0b8f5a);
  border-bottom-color: transparent;
}

/* 入れ子UL（小さめ・インデント） */
.sitemap-list ul{
  margin: .3em 0 .2em;
  padding-left: 1.2em;
  list-style: circle;
  font-size: 0.95em;
}

/* モバイルの余白微調整（あなたのサイト方針に合わせてタイトめ） */
@media (max-width: 640px){
  .sitemap-section{ padding: 10px 12px; }
  .sitemap-heading{ font-size: 15px; }
  .sitemap-list{ padding-left: 1.1em; }
}

/* ===== Author Box ===== */
:root{ --author-avatar: 80px; } /* 画像サイズはここで調整 */

.author-box{
  display: grid;
  grid-template-columns: auto 1fr;   /* 画像 | 文章 */
  align-items: center;
  gap: 14px 16px;
  padding: 14px;
  margin: 40px 0;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow, 0 4px 16px rgba(0,0,0,.04));
}

.author-box__avatar{
  width: var(--author-avatar);
  height: var(--author-avatar);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 999px;
  border: 1px solid var(--border, #e5e7eb);
  background: #fff;
}

.author-box__body{ min-width: 0; }
.author-box__title{
  margin: 0 0 4px;
  font-size: 24px;
  line-height: 1.4;
  border-left: 4px solid var(--accent, #0b8f5a);
  padding-left: .6em;
}
.author-box__text{
  margin: 0;
  color: var(--muted, #6b7280);
  line-height: 1.7;
}
.author-box__text a{
  color: inherit; text-decoration: underline;
  text-underline-offset: 2px;
}

/* スマホ微調整（必要に応じて） */
@media (max-width: 640px){
  :root{ --author-avatar: 72px; }              /* 画像を少し小さく */
  .author-box{ padding: 12px; gap: 12px; }
  .author-box__title{ font-size: 18px; }
  .author-box__text{ font-size: 14px; }
}

/* さらに狭い端末では縦積み（任意） */
@media (max-width: 360px){
  .author-box{
    grid-template-columns: 1fr;                /* 縦並び */
    text-align: center;
  }
  .author-box__avatar{ margin-inline: auto; }
  .author-box__title{ justify-self: center; }
}

/* アイキャッチ画像 */
.eyecatch{
  text-align:center;   /* 中央寄せ */
}

.eyecatch img{
  display:inline-block;
  height:auto;
  max-width:100%;      /* スマホ時は親要素幅に合わせる */
}

/* --- 引用ボックス --- */
.quote-box{
  margin:1.5em auto;
  padding:1em 1.5em;
  border-radius:6px;
  background:#f9f9f9;
  font-style:italic;
  color:#333;
}
.quote-box p{
  margin:0;
}
.quote-box cite{
  display:block;
  margin-top:0.5em;
  font-size:0.9em;
  font-style:normal;
  color:#666;
  text-align:right;
}

/* --- パターン1：左線付きシンプル --- */
.quote-box{
  border-left:4px solid #4CAF50; /* お好みの色に変更 */
}

/* --- パターン2：上下に細線を入れる --- */
.quote-box.alt{
  border-left:none;
  border-top:1px solid #ddd;
  border-bottom:1px solid #ddd;
}

/* --- パターン3：背景のみ（枠なし） --- */
.quote-box.bg{
  border:none;
  background:#f0f5ff;
}

/* ラッパー */
.link-cards{
  display:grid;
  gap:12px;
}

/* カード本体：常に横並び */
.link-card{
  display:flex;
  flex-direction:row;       /* PC/スマホとも横並び */
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:10px;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  max-width:100%;
}
.link-card:hover{
  border-color:#cbd5e1;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  transform: translateY(-1px);
}

/* サムネイル：比率3:2 (600x400) を維持 */
.link-card__thumb{
  flex:0 0 20%;             /* 常に幅の40%を確保 */
  aspect-ratio:3/2;
  border-radius:6px;
  overflow:hidden;
  background:#f3f4f6;
}
.link-card__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 本文部分 */
.link-card__body{
  flex:1;
  display:flex;              /* grid → flex に変更 */
  flex-direction:column;     /* タイトル・本文・ボタンを縦積み */
  gap:4px;
}
.link-card__label {
  font-size:16px;
  font-weight:600;
  color:#2563eb;            /* アクセント色（例:青） */
  margin:0 0 4px 0;
  text-transform:uppercase; /* 任意：小文字→大文字変換 */
  letter-spacing:0.5px;     /* 少し間隔を空けてラベル感 */
}
.link-card__title{
  font-size:25px;
  line-height:1.3;
  margin:0;
  font-weight:600;
  color:#111827;
}
.link-card__excerpt{
  margin:0;
  line-height:1.5;
  color:#4b5563;
}
.link-card__button{
  align-self:flex-end;       /* 右寄せ */
  margin-top:4px;
  display:inline-block;
  padding:2px 16px;           /* コンパクトに */
  font-size:16px;
  border:1px solid #d1d5db;
  border-radius:6px;
  background:#f9fafb;
  color:#374151;
}

/* スマホ表示時：一文を非表示 */
@media (max-width:640px){
  .link-card__excerpt{
    display:none;
  }
  .link-card__thumb{
    flex:0 0 40%;             /* 常に幅の40%を確保 */
    aspect-ratio:3/2;
    border-radius:6px;
    overflow:hidden;
    background:#f3f4f6;
  }
  .link-card__title{
    font-size:14px;
    line-height:1.3;
    margin:0;
    font-weight:600;
    color:#111827;
  }
  .link-card__button{
    margin-top: 2px;
    font-size:14px;
  }
}

/* 情報ボックス */
.info-box {
  background: #f9fafb;  /* 淡いグレー */
  border-left: 4px solid #3b82f6;  /* アクセントライン */
  padding: 0.2em 0.9em;
  margin: 1.2em 0;
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1.6;
}

.alert-box {
  display: flex;
  align-items: center;   /* 複数行時も中央揃え */
  background: #fff7ed;
  border: 1px solid #fdba74;
  padding: 0.8em 1em;
  margin: 1.5em 0;
  border-radius: 6px;
}

.alert-icon-css {
  display: inline-block;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  margin-right: 0.6em;
  font-size: 0.9rem;
  line-height: 1.6em;      /* 高さと同じ値で縦中央 */
  text-align: center;      /* 横中央 */
  flex-shrink: 0;
  background: #f97316;
  color: #fff;
  font-weight: bold;
  position: relative;
}

.alert-icon-css::before {
  content: "!";
}
  
.alert-box p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}


.point-box {
  background: #eef6ff;
  border: 1px solid #93c5fd;
  padding: 1em;
  margin: 1.5em 0;
  border-radius: 6px;
}
.point-box div {
  margin-top: 0;
  font-size: 1rem;
  color: #1d4ed8;
}
.point-box ul {
  margin: 0.5em 0 0 1em;
  padding: 0;
}
.point-box li {
  margin-bottom: 0.3em;
  font-size: 0.95rem;
}

.tip-box {
  border: 1px dashed #9ca3af;  /* 点線で軽さを演出 */
  padding: 0.2em 0.9em;
  margin: 1.5em 0;
  border-radius: 4px;
  background: #ffffff;
  font-size: 0.95rem;
}

.data-box {
  background: #f0fdf4;  /* 薄いグリーン */
  border: 1px solid #86efac;
  padding: 0.2em 0.9em;
  margin: 1.5em 0;
  border-radius: 6px;
  font-size: 0.95rem;
}
.data-box strong {
  color: #15803d;  /* 緑系で強調 */
}

/* --------- 横スクロールボックス --------- */


/* スマホ最適化 */
@media screen and (max-width: 767px) {
  .hsb-spec { font-size: 0.8em; }
  .hsb-spec th { width: 36%; }
}

/* PC時に少し締まった見た目に */
@media screen and (min-width: 768px) {
  .hsb-spec { font-size: 1em; }
}

/* --------- 横スクロールボックス（共通） --------- */
.hsb-wrap{ display:block; }

.hsb-track{
  display:flex;
  overflow-x:auto;
  gap:12px;
  padding:10px;
  margin:0 10px;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}

.hsb-card{
  flex:0 0 85%;
  scroll-snap-align:start;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  overflow:hidden;
}

/* ------ カード上部（グラデ＆ロゴ＆キャッチ） ------ */
.hsb-card__head{
  background:linear-gradient(180deg,#ffe9d9 0%, #fff3ea 55%, #fff 100%);
  padding:14px 4px 2px;
}

.hsb-brand{
  display:flex;
  justify-content:center; /* 添付の中央寄せロゴ */
  align-items:center;
  margin-bottom:10px;
}

.hsb-catch{
  margin:0;
  text-align:center;
  font-size:.95rem;
  color:#374151;
  font-weight:600;
  line-height: 1.2;
}

/* ------ 3指標（PC横3 / SP縦3） ------ */
.hsb-metrics{
  display:grid;
  grid-template-columns:1fr;   /* SP：縦3段 */
  gap:10px;
}

.hsb-metric{
  border:1px solid #edf2f7;
  background:#f9fbfd;
  border-radius:12px;
  padding:8px 12px;
  margin: 0 10px;
  display:flex;
  flex-direction:column;
  min-height:auto;
}

.metric-label{
  font-size:.78rem;
  color:#6b7280;
  font-weight:600;
  line-height:1.2;
}

.metric-value{
  margin-top:4px;
  font-size:1.15rem;
  font-weight:800;
  color:#111827;
  line-height:1.25;
}

/* 融資時間だけ淡いピンク背景（添付の雰囲気） */
.metric-accent{
  background:#fff7f7;
  border-color:#ffe2e2;
}

/* ------ CTA（赤グラデ／大きめ丸ボタン） ------ */
.hsb-cta{
  display:block;
  margin:16px 14px 16px;
  text-align:center;
  text-decoration:none;
  color:#fff;
  font-weight:800;
  font-size:1.05rem;
  padding:16px 18px;
  border-radius:999px;
  background:linear-gradient(180deg,#ff6a63, #e53935);
  box-shadow:0 6px 14px rgba(229,57,53,.25);
}

/* ------ ドット ------ */
.hsb-dots{ text-align:center; margin-top:8px; }
.hsb-dot{
  display:inline-block; width:10px; height:10px; margin:0 5px;
  background:#d1d5db; border-radius:50%;
}
.hsb-dot.is-active{ background:#374151; }

/* ===== PC（768px～）：横3カード・幅は従来踏襲 ===== */
@media screen and (min-width:768px){
  .hsb-track{
    display:flex;
    justify-content:center;
    gap:20px;
    overflow-x:visible;
    padding:20px;
    margin:0 auto;
    flex-wrap:wrap;
  }
  .hsb-card{
    /* 既存と同等の幅レンジ（横幅は変えない方針） */
    flex:1 1 30%;
    max-width:300px;
    min-width:200px;
  }

/* PC表示（768px以上）では 3指標を縦並びにする */
@media screen and (min-width: 768px){
  .hsb-metrics{
    grid-template-columns: 1fr;  /* ← ここを1列に */
    gap: 10px;                    /* 余白はそのまま */
  }
}

  /* ドットはPCで非表示 */
  .hsb-dots{ display:none; }
}

/* 文字サイズの微調整（小さめ端末） */
@media screen and (max-width:767px){
  .metric-value{ font-size:1rem; }
}

/* パターン2：左右ライン＋中央タイトル（Flexで確実に中央寄せ） */
.hsb-sec-title.deco-line{
  display: flex;
  align-items: center;
  justify-content: center;  /* ← 中央寄せの主役 */
  gap: 12px;
  width: 100%;              /* 親幅いっぱいで中央配置 */
  font-size: 1.6rem;
  font-weight: 700;
  color: #333;
  text-align: center;       /* 念のため */
}

/* タイトル文字 */
.hsb-sec-title.deco-line .deco-line__text{
  display: inline-block;
  padding: 0 2px;          /* 文字周りの余白（調整可） */
}

/* 左右のライン（固定長にしたい場合） */
.hsb-sec-title.deco-line::before,
.hsb-sec-title.deco-line::after{
  content: "";
  height: 2px;
  width: 40px;              /* ← ライン固定長（調整可） */
  background: #ff0000;
  border-radius: 1px;
}

/* 伸縮ラインにしたい場合は ↑の width を消し、下を使う
.hsb-sec-title.deco-line::before,
.hsb-sec-title.deco-line::after{
  content:"";
  height:2px;
  flex: 1 1 40px;           // 画面幅に応じて伸びる
  background:#e5e7eb;
  border-radius:1px;
}
*/

@media (max-width: 640px){
  .hsb-sec-title.deco-line{
    font-size: 1.2rem;
  }
}

.btn-red {
  display: inline-block;
  background-color: #e60023; /* 鮮やかな赤 */
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 10px;
  border-radius: 6px;
  text-align: center;
  transition: background-color 0.3s ease;
  font-size: 0.95rem;
}

@media (max-width: 640px){
  .btn-red {
    font-size: 0.8rem;
    padding: 6px 2px;
  }
}

.btn-red:hover {
  background-color: #cc001f; /* 少し濃い赤 */
}

/* --------- レスポンシブ微調整 --------- */
@media (min-width: 768px){
  .page-lead{max-width:70ch;}
}
@media (max-width: 640px){
  .content.container{ padding-inline: 2px; }
}