@charset "utf-8";

/* =========================================================
   column.css ｜ コラム（SEO記事）専用スタイル ─ デザイン案B「ボールド」
   style.css を読み込んだ後に読み込むこと
   ========================================================= */

:root{
  /* 面 */
  --b-bg:        #F2F4F7;   /* ページ背景 */
  --b-surface:   #FFFFFF;   /* カード・本文面 */
  --b-surface-2: #F7F9FB;   /* 表の交互行 */

  /* 文字 */
  --b-ink:    #0A1420;      /* 見出し */
  --b-ink-2:  #2C3742;      /* 本文 */
  --b-muted:  #66727F;      /* 補助 */
  --b-muted-2:#93A0AE;      /* 日付など */

  /* ダーククローム */
  --b-navy:      #0A1A2B;
  --b-navy-deep: #061220;
  --b-on-navy:   #D3DEE9;
  --b-on-navy-2: #9DB0C4;
  --b-on-navy-3: #7E93A9;

  /* アクセント */
  --b-orange:      #FF6A00;
  --b-orange-hov:  #E85F00;
  --b-orange-lt:   #FF9A4D;  /* 濃紺の上に置く文字 */
  --b-orange-deep: #C24E06;  /* 白の上に置く文字 */
  --b-orange-bg:   #FFF0E4;
  --b-marker:      #FFD9BC;

  /* 罫線 */
  --b-line:   #DCE2EA;
  --b-line-2: #EDF1F5;

  /* 寸法 */
  --b-max:      1320px;  /* ヘッダー・一覧の最大幅 */
  --b-max-art:  1108px;  /* 記事の最大幅（本文720 + 68 + サイドバー320） */
  --b-side:     320px;
  --b-gap:      68px;
  --b-head-h:   56px;    /* ヘッダー高さ（SP） */

  /* 書体 */
  --b-gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --b-latin:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --b-body:   "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

@media (min-width: 1024px){
  :root{ --b-head-h: 72px; }
}

/* -------------------- 土台 -------------------- */
body.column-page{
  background: var(--b-bg);
  color: var(--b-ink-2);
  font-family: var(--b-body);
  -webkit-font-smoothing: antialiased;
}
.column-page .wrapper{ max-width: none; background: transparent; box-shadow: none; }

.col-inner{ width: 100%; max-width: var(--b-max); margin: 0 auto; padding: 0 18px; }
@media (min-width: 1024px){ .col-inner{ padding: 0 40px; } }

.col-inner--article{ max-width: var(--b-max-art); }

/* -------------------- ヘッダー -------------------- */
.col-header{
  position: sticky; top: 0; z-index: 100;
  background: var(--b-navy);
}
.col-header__inner{
  max-width: var(--b-max); margin: 0 auto; padding: 0 18px;
  height: var(--b-head-h);
  display: flex; align-items: center; gap: 14px;
}
.col-header__brand{
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; flex-shrink: 0;
}
.col-header__bar{ width: 4px; height: 26px; background: var(--b-orange); flex-shrink: 0; }
.col-header__name{
  display: flex; flex-direction: column; gap: 1px;
}
.col-header__name b{
  font-family: var(--b-gothic);
  font-size: 14px; font-weight: 900; letter-spacing: .02em; color: #fff; line-height: 1.2;
}
.col-header__name small{
  font-family: var(--b-latin);
  font-size: 8.5px; font-weight: 600; letter-spacing: .2em; color: #6E8299;
}

.col-header__nav{ display: none; }
.col-header__nav a{
  font-family: var(--b-gothic);
  font-size: 13px; color: #93A8BC; text-decoration: none; white-space: nowrap;
}
.col-header__nav a:hover{ color: #fff; }
.col-header__nav a[aria-current]{ color: #fff; font-weight: 700; }

.col-header__spacer{ flex-grow: 1; }

.col-header__tel{ display: none; }
.col-header__tel b{
  font-family: var(--b-latin);
  font-size: 21px; font-weight: 700; letter-spacing: .02em; color: #fff; line-height: 1.15;
}
.col-header__tel small{ font-size: 10px; color: var(--b-on-navy-3); }

.col-header__cta{
  display: flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 15px;
  background: var(--b-orange); color: #fff; text-decoration: none;
  font-family: var(--b-gothic); font-size: 12px; font-weight: 700; white-space: nowrap;
  transition: background .18s ease;
}
.col-header__cta:hover{ background: var(--b-orange-hov); }

@media (min-width: 1024px){
  .col-header__inner{ padding: 0 40px; gap: 26px; }
  .col-header__bar{ width: 5px; height: 34px; }
  .col-header__name b{ font-size: 17px; }
  .col-header__name small{ font-size: 9px; letter-spacing: .22em; }
  .col-header__nav{ display: flex; align-items: center; gap: 24px; }
  .col-header__tel{ display: flex; flex-direction: column; gap: 1px; align-items: flex-end; text-decoration: none; }
  .col-header__cta{ height: 48px; padding: 0 26px; font-size: 14px; font-weight: 900; }
}

/* -------------------- 読了プログレスバー -------------------- */
.col-progress{
  position: sticky; top: var(--b-head-h); z-index: 99;
  height: 3px; background: var(--b-line);
}
.col-progress__fill{ height: 100%; width: 0; background: var(--b-orange); }
@media (min-width: 1024px){ .col-progress{ height: 4px; } }

/* -------------------- パンくず -------------------- */
.breadcrumb{
  padding: 12px 0 0;
  font-size: 10px; color: #8A97A5;
  overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.breadcrumb::-webkit-scrollbar{ display: none; }
.breadcrumb ol{ list-style: none; margin: 0; padding: 0; display: inline-flex; gap: 7px; align-items: center; }
.breadcrumb a{ color: #8A97A5; text-decoration: none; }
.breadcrumb a:hover{ color: var(--b-orange-deep); text-decoration: underline; }
.breadcrumb li:not(:last-child)::after{ content: "›"; margin-left: 7px; opacity: .7; }
.breadcrumb li[aria-current]{ color: #AEB9C5; }
@media (min-width: 1024px){ .breadcrumb{ padding: 20px 0 0; font-size: 11px; } }

/* -------------------- ヒーロー -------------------- */
.col-hero{ background: var(--b-navy); padding: 36px 0 32px; }
.col-hero__grid{ display: grid; gap: 26px; }
.col-hero h1{
  font-family: var(--b-gothic);
  font-size: clamp(27px, 8vw, 33px); font-weight: 900;
  line-height: 1.38; letter-spacing: -.01em; color: #fff;
  margin: 0 0 20px; text-wrap: pretty;
}
.col-hero h1 em{ font-style: normal; color: var(--b-orange-lt); }
.col-hero p{
  font-size: 12.5px; line-height: 1.95; color: var(--b-on-navy-2);
  margin: 0; text-wrap: pretty;
}

.eyebrow{
  display: inline-flex; align-items: center;
  padding: 5px 11px; margin-bottom: 22px;
  background: rgba(255,106,0,.14); border-left: 2px solid var(--b-orange);
  font-family: var(--b-latin);
  font-size: 9.5px; font-weight: 800; letter-spacing: .22em; color: var(--b-orange-lt);
}

.col-stats{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: rgba(255,255,255,.12);
}
.col-stats div{ background: var(--b-navy); padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; }
.col-stats b{
  font-family: var(--b-latin);
  font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: #fff; line-height: 1;
}
.col-stats b span{ font-size: .55em; }
.col-stats b.is-accent{ color: var(--b-orange-lt); }
.col-stats small{ font-size: 9.5px; letter-spacing: .06em; color: var(--b-on-navy-3); }

@media (min-width: 1024px){
  .col-hero{ padding: 76px 0 72px; }
  .col-hero__grid{ grid-template-columns: minmax(0, 1fr) 520px; gap: 90px; align-items: center; }
  .eyebrow{ padding: 6px 13px; margin-bottom: 28px; font-size: 11px; letter-spacing: .24em; border-left-width: 3px; }
  .col-hero h1{ font-size: 54px; line-height: 1.34; letter-spacing: -.018em; margin-bottom: 26px; }
  .col-hero p{ font-size: 14.5px; line-height: 2.05; max-width: 600px; }
  .col-stats div{ padding: 28px 16px; gap: 7px; }
  .col-stats b{ font-size: 38px; letter-spacing: -.02em; }
  .col-stats small{ font-size: 11px; }
}

/* -------------------- カテゴリバー -------------------- */
.cat-bar{ background: var(--b-surface); border-bottom: 1px solid var(--b-line); }
.cat-bar__inner{
  max-width: var(--b-max); margin: 0 auto; padding: 16px 18px;
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.cat-bar__inner::-webkit-scrollbar{ display: none; }
.cat-tab{
  flex: 0 0 auto;
  border: 0; border-radius: 0;
  background: #EDF1F6; color: #4A5766;
  font-family: var(--b-gothic); font-size: 11.5px; font-weight: 500;
  padding: 8px 13px; cursor: pointer; white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.cat-tab:hover{ background: #DFE6EE; }
.cat-tab[aria-selected="true"]{ background: var(--b-navy); color: #fff; font-weight: 700; }
.cat-bar__count{
  margin-left: auto; flex: 0 0 auto;
  font-family: var(--b-latin); font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #8A97A5;
  padding-left: 12px;
}
@media (min-width: 1024px){
  .cat-bar__inner{ padding: 0 40px; height: 68px; gap: 8px; overflow: visible; }
  .cat-tab{ font-size: 13px; padding: 10px 18px; }
  .cat-bar__count{ font-size: 12px; }
}

/* -------------------- 記事カード一覧 -------------------- */
.col-list{ padding: 18px 0 26px; }
.col-list h2.visually-hidden{ margin: 0; }
.card-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 768px){ .card-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px){
  .col-list{ padding: 44px 0 64px; }
  .card-list{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

.card{
  background: var(--b-surface);
  border-top: 4px solid var(--b-navy);
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover{ box-shadow: 0 10px 26px rgba(10,26,43,.12); transform: translateY(-2px); }
.card > a, .card__inner{
  display: flex; flex-direction: column; gap: 10px; height: 100%;
  padding: 18px 18px 20px; color: inherit; text-decoration: none;
}
.card__meta{ display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.card__cat{
  font-family: var(--b-gothic);
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 8px; background: #EDF1F6; color: #4A5766;
}
.card__date{
  font-family: var(--b-latin);
  font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--b-muted-2);
}
.card__title{
  font-family: var(--b-gothic);
  font-size: 16px; font-weight: 900; line-height: 1.58; letter-spacing: -.005em;
  color: var(--b-ink); margin: 0;
}
.card > a:hover .card__title{ color: var(--b-orange-deep); }
.card__excerpt{ font-size: 11.5px; line-height: 1.85; color: var(--b-muted); margin: 0; text-wrap: pretty; }
.card__more{
  margin-top: auto; display: flex; align-items: center; gap: 6px;
  font-family: var(--b-latin); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--b-orange);
}
.card__more svg{ flex-shrink: 0; }

@media (min-width: 1024px){
  .card > a, .card__inner{ padding: 26px 26px 28px; gap: 13px; }
  .card__cat{ font-size: 10.5px; padding: 4px 10px; }
  .card__date{ font-size: 11px; }
  .card__title{ font-size: 19px; }
  .card__excerpt{ font-size: 12.5px; line-height: 1.95; }
  .card__more{ font-size: 11px; }
}

/* 記事の1本目を強調（一覧の先頭） */
.card--lead{ border-top-color: var(--b-orange); }
@media (min-width: 1024px){ .card--lead .card__title{ font-size: 21px; } }

/* カテゴリ色 */
.card[data-cat="jisha-loan"]{ border-top-color: #FF6A00; }
.card[data-cat="jisha-loan"] .card__cat{ background: #FFF0E4; color: #C24E06; }
.card[data-cat="shinsa"]{ border-top-color: #1156C4; }
.card[data-cat="shinsa"] .card__cat{ background: #E8F0FC; color: #0B44A0; }
.card[data-cat="keiei"]{ border-top-color: #2E7D5B; }
.card[data-cat="keiei"] .card__cat{ background: #E4F2EC; color: #1F5F43; }
.card[data-cat="houmu"]{ border-top-color: #7A4A9E; }
.card[data-cat="houmu"] .card__cat{ background: #F0E9F7; color: #5A3579; }
.card[data-cat="jirei"]{ border-top-color: #0A1A2B; }
.card[data-cat="jirei"] .card__cat{ background: #E8ECF1; color: #2C3742; }

/* 準備中カード（公開時に通常カードへ差し替える） */
.card--soon{ opacity: .58; }
.card--soon:hover{ box-shadow: none; transform: none; }
.card--soon .card__badge{
  font-family: var(--b-gothic);
  font-size: 9.5px; font-weight: 700; color: var(--b-muted-2);
  border: 1px dashed #C3CCD6; padding: 2px 8px;
}

/* -------------------- 記事レイアウト -------------------- */
.article-head{ padding: 16px 0 26px; }
.article__meta{ display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; }
.article__cat{
  font-family: var(--b-gothic);
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 9px; background: var(--b-orange-bg); color: var(--b-orange-deep);
}
.article__date{
  font-family: var(--b-latin);
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; color: var(--b-muted-2);
}
.article-head h1{
  font-family: var(--b-gothic);
  font-size: clamp(23px, 6.4vw, 27px); font-weight: 900;
  line-height: 1.46; letter-spacing: -.012em; color: var(--b-ink);
  margin: 0 0 20px; text-wrap: pretty;
}
.article-head h1 mark{
  background: linear-gradient(transparent 62%, var(--b-marker) 62%);
  color: inherit;
}
.article__lead{
  padding: 18px 18px 20px; background: var(--b-surface);
  border-left: 4px solid var(--b-navy);
  font-size: 12.5px; line-height: 2; color: #3A454F; margin: 0; text-wrap: pretty;
}
.article__lead strong{ font-weight: 900; color: var(--b-ink); }

@media (min-width: 1024px){
  .article-head{ padding: 30px 0 46px; }
  .article__meta{ gap: 11px; margin-bottom: 22px; }
  .article__cat{ font-size: 11px; padding: 5px 11px; }
  .article__date{ font-size: 11.5px; }
  .article-head h1{ font-size: 42px; line-height: 1.42; letter-spacing: -.018em; margin-bottom: 28px; max-width: 900px; }
  .article__lead{ padding: 24px 28px 26px; border-left-width: 5px; font-size: 14px; line-height: 2.1; max-width: 900px; }
}

.article-layout{
  display: grid; gap: 32px;
  grid-template-areas: "aside" "body";
  padding-bottom: 40px;
}
@media (min-width: 1024px){
  .article-layout{
    grid-template-columns: minmax(0, 1fr) var(--b-side);
    grid-template-areas: "body aside";
    column-gap: var(--b-gap); gap: 0;
    align-items: start;
    padding-bottom: 70px;
  }
}
.article-body{ grid-area: body; min-width: 0; }
.article-aside{ grid-area: aside; display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 1024px){
  .article-aside{ position: sticky; top: calc(var(--b-head-h) + 24px); }
}

/* -------------------- 本文タイポグラフィ -------------------- */
.article-body h2{
  display: flex; align-items: stretch; gap: 12px;
  margin: 40px 0 20px; scroll-margin-top: calc(var(--b-head-h) + 20px);
  font-family: var(--b-gothic);
  font-size: clamp(19px, 4.6vw, 20px); font-weight: 900;
  line-height: 1.5; letter-spacing: -.01em; color: var(--b-ink);
  background: none; padding: 0; border-radius: 0;
}
.article-body h2:first-child{ margin-top: 0; }
.article-body h2 .h2-num{
  display: flex; align-items: center; justify-content: center;
  width: 38px; flex-shrink: 0; background: var(--b-orange);
  font-family: var(--b-latin); font-size: 15px; font-weight: 800; color: #fff;
}
.article-body h2 .h2-num--dark{ background: var(--b-navy); font-size: 13px; }
.article-body h2 .h2-text{ padding: 6px 0; text-wrap: pretty; }

.article-body h3{
  font-family: var(--b-gothic);
  font-size: clamp(16px, 4vw, 18px); font-weight: 900; line-height: 1.6;
  color: var(--b-ink); margin: 32px 0 14px;
  padding-left: 12px; border-left: 4px solid var(--b-orange);
  scroll-margin-top: calc(var(--b-head-h) + 20px);
}
.article-body h4{
  font-family: var(--b-gothic);
  font-size: 15px; font-weight: 700; color: var(--b-navy); margin: 24px 0 10px;
}
/* 本文の基本タイポグラフィ。
   :where() で詳細度を 0 にしているのは、この後に定義する部品（CTAボックス・
   装飾ボックス・著者欄など）のスタイルを本文中でも確実に優先させるため。
   :where() を外すと .article-body p が .cta-box__title に勝ってしまい、
   濃紺背景のCTA内で文字が黒くなって読めなくなる。 */
.article-body :where(p){ font-size: 13px; line-height: 2.05; color: var(--b-ink-2); margin: 0 0 20px; text-wrap: pretty; }
.article-body :where(a){ color: #1156C4; text-decoration: underline; text-underline-offset: 2px; }
.article-body :where(a):hover{ color: #0B3E92; }
.article-body strong{ font-weight: 900; color: var(--b-ink); }
.article-body mark{ background: linear-gradient(transparent 62%, var(--b-marker) 62%); color: inherit; font-weight: 700; }

.article-body :where(ul, ol){ margin: 0 0 22px; padding-left: 1.4em; }
.article-body :where(li){ font-size: 13px; line-height: 1.95; margin-bottom: 8px; }

.article-body img{ max-width: 100%; height: auto; display: block; margin: 0 auto 8px; }
.article-body figure{ margin: 0 0 24px; }
.article-body figcaption{ font-size: 11.5px; color: var(--b-muted); text-align: center; }

@media (min-width: 1024px){
  .article-body h2{ margin: 52px 0 24px; gap: 16px; font-size: 28px; line-height: 1.48; letter-spacing: -.014em; }
  .article-body h2 .h2-num{ width: 52px; font-size: 21px; }
  .article-body h2 .h2-num--dark{ font-size: 16px; }
  .article-body h2 .h2-text{ padding: 10px 0; }
  .article-body h3{ font-size: 21px; margin: 40px 0 16px; }
  .article-body :where(p){ font-size: 14px; line-height: 2.15; margin-bottom: 22px; }
  .article-body :where(li){ font-size: 14px; line-height: 2.05; }
}

/* -------------------- 表 -------------------- */
.table-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 32px; }
.article-body table{
  width: 100%; min-width: 520px; border-collapse: collapse;
  font-size: 12px; background: var(--b-surface);
}
.article-body thead th{
  background: var(--b-navy); color: var(--b-on-navy-2);
  font-family: var(--b-gothic); font-weight: 700; font-size: 11px;
  padding: 13px 12px; text-align: left; white-space: nowrap;
}
.article-body thead th.is-accent{ color: var(--b-orange-lt); font-weight: 900; }
.article-body tbody th{
  background: transparent; color: var(--b-muted);
  font-family: var(--b-gothic); font-weight: 700; font-size: 11px;
  padding: 13px 12px; text-align: left; line-height: 1.6; white-space: nowrap;
}
.article-body tbody td{
  padding: 13px 12px; color: var(--b-ink-2); line-height: 1.6; vertical-align: top;
}
.article-body tbody tr:nth-child(even){ background: var(--b-surface-2); }
.article-body td.is-accent{ background: #FFF8F2; }
.article-body tbody tr:nth-child(even) td.is-accent{ background: #FFF3E9; }
.article-body td.is-accent strong{ color: var(--b-orange-deep); }

@media (min-width: 1024px){
  .article-body table{ font-size: 13px; min-width: 0; }
  .article-body thead th, .article-body tbody th{ font-size: 12px; padding: 14px 13px; }
  .article-body tbody td{ padding: 14px 13px; }
}

/* -------------------- ボックス -------------------- */
.box{ padding: 20px 18px 22px; margin: 0 0 30px; }
.box .box__title{
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px;
  font-family: var(--b-gothic); font-size: 13px; font-weight: 900; letter-spacing: .04em;
}
.box .box__title::before{ content: ""; width: 3px; height: 14px; flex-shrink: 0; }
.box p:last-child, .box ul:last-child, .box ol:last-child{ margin-bottom: 0; }
.box p, .box li{ font-size: 12.5px; line-height: 1.9; }

/* 要点（濃紺・反転） */
.box--point{ background: var(--b-navy); }
.box--point .box__title{ color: #fff; }
.box--point .box__title::before{ background: var(--b-orange); }
.box--point p, .box--point li{ color: var(--b-on-navy); }

/* 注意（赤） */
.box--caution{ background: var(--b-surface); border-left: 4px solid #D93025; }
.box--caution .box__title{ color: #B3261E; }
.box--caution .box__title::before{ background: #D93025; }

/* 補足（青） */
.box--info{ background: var(--b-surface); border-left: 4px solid #1156C4; }
.box--info .box__title{ color: #0B44A0; }
.box--info .box__title::before{ background: #1156C4; }

@media (min-width: 1024px){
  .box{ padding: 28px 30px 30px; margin-bottom: 40px; }
  .box .box__title{ font-size: 16px; margin-bottom: 20px; }
  .box .box__title::before{ width: 4px; height: 17px; }
  .box p, .box li{ font-size: 13.5px; line-height: 1.95; }
}

/* チェックリスト */
.checklist{ list-style: none; padding-left: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.checklist li{ position: relative; padding-left: 24px; margin: 0; }
.checklist li::before{
  content: ""; position: absolute; left: 3px; top: .5em;
  width: 6px; height: 11px; border: solid var(--b-orange); border-width: 0 2.2px 2.2px 0;
  transform: rotate(45deg);
}
.box--point .checklist li::before{ border-color: var(--b-orange-lt); }
@media (min-width: 1024px){ .checklist{ gap: 13px; } .checklist li{ padding-left: 26px; } }

/* -------------------- 目次 -------------------- */
.toc{ background: var(--b-surface); }
.toc__head{
  display: flex; align-items: center; gap: 9px; padding: 14px 18px;
  background: var(--b-navy);
}
.toc__head span{
  font-family: var(--b-latin); font-size: 10.5px; font-weight: 800; letter-spacing: .2em; color: #fff;
}
.toc ol{ list-style: none; margin: 0; padding: 6px 18px 14px; counter-reset: toc; }
.toc > ol > li{ counter-increment: toc; border-bottom: 1px solid var(--b-line-2); }
.toc > ol > li:last-child{ border-bottom: 0; }
.toc > ol > li > a{
  display: flex; gap: 12px; align-items: baseline; padding: 11px 0;
  font-family: var(--b-gothic); font-size: 12px; font-weight: 500; line-height: 1.65;
  color: #5B6875; text-decoration: none;
}
/* 01, 02 … 10, 11 と2桁ゼロ詰め（未対応ブラウザでは 1, 2 … と表示） */
@counter-style toc-pad{ system: extends decimal; pad: 2 "0"; }
.toc > ol > li > a::before{
  content: counter(toc, toc-pad);
  font-family: var(--b-latin); font-size: 12px; font-weight: 800; color: #C3CCD6;
  min-width: 17px; flex-shrink: 0;
}
.toc > ol > li > a:hover{ color: var(--b-orange-deep); }
.toc > ol > li > a:hover::before,
.toc > ol > li > a.is-active::before{ color: var(--b-orange); }
.toc > ol > li > a.is-active{ color: var(--b-ink); font-weight: 700; }
.toc ol ol{ padding: 0 0 10px 29px; }
.toc ol ol li{ margin-bottom: 6px; }
.toc ol ol a{ font-size: 11.5px; color: var(--b-muted); text-decoration: none; }
.toc ol ol a::before{ content: "－ "; }
.toc ol ol a:hover{ color: var(--b-orange-deep); }

@media (min-width: 1024px){
  .toc__head{ padding: 15px 20px; }
  .toc ol{ padding: 6px 20px 16px; }
}

/* -------------------- FAQ -------------------- */
.faq{ margin: 0 0 30px; display: flex; flex-direction: column; gap: 8px; }
.faq details{ background: var(--b-surface); }
.faq summary{
  display: flex; gap: 11px; align-items: flex-start;
  padding: 15px 15px 14px; cursor: pointer; list-style: none;
  font-family: var(--b-gothic); font-size: 12.5px; font-weight: 700; line-height: 1.7; color: var(--b-ink);
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::before{
  content: "Q"; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; background: var(--b-navy); color: #fff;
  font-family: var(--b-latin); font-size: 11px; font-weight: 800;
}
.faq__q{ flex-grow: 1; }
.faq__chev{
  flex-shrink: 0; margin-top: 6px;
  width: 11px; height: 11px;
  border: solid var(--b-orange); border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] .faq__chev{ transform: rotate(-135deg); margin-top: 9px; }
.faq__a{
  display: flex; gap: 11px; align-items: flex-start;
  padding: 14px 15px 16px; background: var(--b-surface-2);
}
.faq__a::before{
  content: "A"; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; background: var(--b-orange); color: #fff;
  font-family: var(--b-latin); font-size: 11px; font-weight: 800;
}
.faq__a > div{ font-size: 12px; line-height: 1.9; color: #3A454F; text-wrap: pretty; }
.faq__a p{ margin: 0 0 12px; font-size: inherit; line-height: inherit; color: inherit; }
.faq__a p:last-child{ margin-bottom: 0; }

@media (min-width: 1024px){
  .faq{ gap: 10px; margin-bottom: 40px; }
  .faq summary{ padding: 20px 22px 18px; gap: 13px; font-size: 14px; line-height: 1.8; }
  .faq summary::before, .faq__a::before{ width: 26px; height: 26px; font-size: 13px; }
  .faq__chev{ width: 13px; height: 13px; margin-top: 9px; }
  .faq details[open] .faq__chev{ margin-top: 12px; }
  .faq__a{ padding: 18px 22px 22px; gap: 13px; }
  .faq__a > div{ font-size: 13.5px; line-height: 2; }
}

/* -------------------- CTA -------------------- */
.cta-box{ background: var(--b-navy); padding: 32px 18px 34px; margin: 32px 0; }
.cta-box .cta-box__title{
  font-family: var(--b-gothic);
  font-size: clamp(20px, 5.4vw, 24px); font-weight: 900;
  line-height: 1.5; letter-spacing: -.01em; color: #fff;
  margin: 0 0 14px; text-wrap: pretty;
}
.cta-box .cta-box__text{ font-size: 12px; line-height: 1.95; color: var(--b-on-navy-2); margin: 0 0 22px; text-wrap: pretty; }
.cta-box .cta-box__points{
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: rgba(255,255,255,.12);
}
.cta-box .cta-box__points li{
  display: flex; align-items: center; gap: 7px;
  padding: 11px 12px; background: var(--b-navy); margin: 0;
  font-family: var(--b-gothic); font-size: 11.5px; font-weight: 700; color: #fff;
}
.cta-box .cta-box__points li::before{
  content: ""; flex-shrink: 0;
  width: 6px; height: 11px; border: solid var(--b-orange-lt); border-width: 0 2.2px 2.2px 0;
  transform: rotate(45deg); margin-bottom: 3px;
}
.cta-box .cta-box__btn{
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 58px; background: var(--b-orange); color: #fff; text-decoration: none;
  font-family: var(--b-gothic); font-size: clamp(15px, 4.2vw, 17px); font-weight: 900; letter-spacing: .02em;
  margin-bottom: 12px; transition: background .18s ease;
}
.cta-box .cta-box__btn:hover{ background: var(--b-orange-hov); }
.cta-box .cta-box__tel{
  display: flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; border: 1px solid rgba(255,255,255,.26);
  color: #fff; text-decoration: none;
}
.cta-box .cta-box__tel b{ font-family: var(--b-latin); font-size: 18px; font-weight: 700; letter-spacing: .02em; }
.cta-box .cta-box__tel small{ font-size: 10px; color: var(--b-on-navy-3); }
.cta-box .cta-box__tel:hover{ background: rgba(255,255,255,.06); }

@media (min-width: 1024px){
  .cta-box{ padding: 40px 40px 42px; margin: 44px 0; }
  .cta-box .cta-box__title{ font-size: 28px; line-height: 1.48; letter-spacing: -.014em; }
  .cta-box .cta-box__text{ font-size: 13px; line-height: 2; margin-bottom: 28px; }
  .cta-box .cta-box__points{ grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 28px; }
  .cta-box .cta-box__points li{ padding: 14px 12px; font-size: 12px; }
  .cta-box .cta-box__actions{ display: flex; gap: 14px; align-items: center; }
  .cta-box .cta-box__btn{ height: 64px; padding: 0 34px; font-size: 18px; margin-bottom: 0; }
  .cta-box .cta-box__tel{ height: 64px; padding: 0 26px; }
  .cta-box .cta-box__tel b{ font-size: 22px; }
}

/* ページ末（一覧ページ）用の大きいCTA */
.cta-section{ background: var(--b-navy); padding: 34px 0 36px; }
.cta-section .cta-box{ background: none; padding: 0; margin: 0; }
@media (min-width: 1024px){
  .cta-section{ padding: 66px 0 70px; }
  .cta-section .cta-grid{ display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 90px; align-items: center; }
  .cta-section .cta-box__actions{ flex-direction: column; align-items: stretch; gap: 14px; }
  .cta-section .cta-box__btn{ height: 70px; font-size: 21px; }
  .cta-section .cta-box__tel{ flex-direction: column; gap: 4px; height: auto; padding: 16px 0; }
  .cta-section .cta-box__tel b{ font-size: 27px; }
}

/* 文中インライン誘導 */
.cta-inline{
  background: var(--b-surface); border-left: 4px solid var(--b-orange);
  padding: 16px 18px; margin: 0 0 28px;
  font-size: 12.5px; line-height: 1.95; color: var(--b-ink-2); text-wrap: pretty;
}
.cta-inline a{ font-weight: 900; color: var(--b-orange-deep); }
@media (min-width: 1024px){ .cta-inline{ padding: 20px 24px; font-size: 13.5px; line-height: 2.05; } }

/* サイドバーCTA（PCのみ表示） */
.aside-cta{ display: none; }
@media (min-width: 1024px){
  .aside-cta{ display: block; background: var(--b-navy); padding: 24px 22px 26px; }
  .aside-cta .eyebrow{ margin-bottom: 16px; font-size: 9.5px; letter-spacing: .22em; }
  .aside-cta__title{
    font-family: var(--b-gothic); font-size: 19px; font-weight: 900;
    line-height: 1.55; letter-spacing: -.01em; color: #fff; margin: 0 0 18px; text-wrap: pretty;
  }
  .aside-cta ul{ list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .aside-cta li{
    display: flex; align-items: center; gap: 9px; margin: 0;
    font-family: var(--b-gothic); font-size: 12px; font-weight: 700; color: var(--b-on-navy);
  }
  .aside-cta li::before{
    content: ""; flex-shrink: 0;
    width: 6px; height: 11px; border: solid var(--b-orange-lt); border-width: 0 2.2px 2.2px 0;
    transform: rotate(45deg); margin-bottom: 3px;
  }
  .aside-cta__btn{
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 54px; background: var(--b-orange); color: #fff; text-decoration: none;
    font-family: var(--b-gothic); font-size: 15px; font-weight: 900; margin-bottom: 14px;
    transition: background .18s ease;
  }
  .aside-cta__btn:hover{ background: var(--b-orange-hov); }
  .aside-cta__tel{ display: flex; flex-direction: column; align-items: center; gap: 3px; color: #fff; text-decoration: none; }
  .aside-cta__tel b{ font-family: var(--b-latin); font-size: 21px; font-weight: 700; letter-spacing: .02em; }
  .aside-cta__tel small{ font-size: 10px; color: var(--b-on-navy-3); }
}

/* -------------------- 著者 -------------------- */
.author{
  background: var(--b-surface); border-left: 4px solid var(--b-navy);
  padding: 18px 18px 20px; margin: 32px 0 0;
}
.author .author__label{
  font-family: var(--b-latin); font-size: 9.5px; font-weight: 800; letter-spacing: .2em;
  color: var(--b-muted-2); margin: 0 0 8px;
}
.author .author__name{ font-family: var(--b-gothic); font-size: 14px; font-weight: 900; color: var(--b-ink); margin: 0 0 8px; }
.author .author__desc{ font-size: 12px; line-height: 1.9; color: #4A5766; margin: 0; text-wrap: pretty; }
@media (min-width: 1024px){
  .author{ padding: 24px 26px 26px; margin-top: 44px; }
  .author .author__name{ font-size: 16px; }
  .author .author__desc{ font-size: 13px; line-height: 2; }
}

/* -------------------- 関連記事 -------------------- */
.related{ background: var(--b-navy); padding: 30px 0 34px; }
.related h2{
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-family: var(--b-gothic); font-size: 17px; font-weight: 900; color: #fff;
}
.related h2::before{ content: ""; width: 4px; height: 17px; background: var(--b-orange); flex-shrink: 0; }
.related ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.related a{
  display: block; background: var(--b-surface); padding: 15px 16px;
  color: var(--b-ink); text-decoration: none;
  font-family: var(--b-gothic); font-size: 13px; font-weight: 700; line-height: 1.65;
  transition: color .18s ease, box-shadow .18s ease;
}
.related a:hover{ color: var(--b-orange-deep); box-shadow: 0 6px 16px rgba(0,0,0,.2); }
@media (min-width: 1024px){
  .related{ padding: 54px 0 58px; }
  .related h2{ font-size: 21px; margin-bottom: 24px; }
  .related ul{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .related a{ padding: 20px 22px; font-size: 14px; height: 100%; }
}

/* -------------------- フッター -------------------- */
.column-page .site-footer{
  background: var(--b-navy-deep); border-top: 0; color: var(--b-on-navy-3);
}
.column-page .site-footer__inner{ max-width: var(--b-max); padding: 22px 18px 28px; }
.column-page .site-footer__links a{ color: var(--b-on-navy-3); font-size: 11px; }
.column-page .site-footer__links a:hover{ color: #fff; }
.column-page .site-footer__copy{
  font-family: var(--b-latin); font-size: 9.5px; letter-spacing: .06em; color: #56697D;
}
@media (min-width: 1024px){
  .column-page .site-footer__inner{
    display: flex; align-items: center; padding: 30px 40px 36px; text-align: left;
  }
  .column-page .site-footer__copy{ order: -1; margin-top: 0; margin-right: auto; font-size: 10.5px; }
  .column-page .site-footer__links{ gap: 24px; }
  .column-page .site-footer__links a{ font-size: 12px; }
  .column-page .site-footer__links .sep{ display: none; }
}

/* -------------------- フローティングCTA（SPのみ） -------------------- */
.col-float{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: rgba(255,255,255,.97); border-top: 1px solid var(--b-line);
  box-shadow: 0 -4px 16px rgba(10,26,43,.12);
  padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.col-float__inner{
  max-width: 560px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; align-items: center;
}
.col-float__tel, .col-float__cta{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; text-decoration: none; padding: 10px 6px; min-height: 50px;
  font-family: var(--b-gothic); font-size: clamp(12px, 3.4vw, 15px); font-weight: 900; line-height: 1.25;
}
.col-float__tel{ background: #fff; color: var(--b-navy); border: 2px solid var(--b-navy); }
.col-float__cta{ background: var(--b-orange); color: #fff; }
.col-float__cta:hover{ background: var(--b-orange-hov); }
.col-float small{ font-size: 9.5px; font-weight: 400; opacity: .85; }
.col-float-spacer{ height: 82px; }

@media (min-width: 1024px){
  .col-float{ display: none; }
  .col-float-spacer{ height: 0; }
}

/* -------------------- 共通 -------------------- */
.visually-hidden{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce){
  .card, .cta-box__btn, .related a, .faq__chev, .col-progress__fill{ transition: none; }
  .card:hover{ transform: none; }
}