@charset "UTF-8";
/* ==========================================================
   column2.css  —  コラム記事（style2.css ベース / Bootstrap不使用）
   既存マークアップ（Bootstrapクラス付き）を変更せず適用する
   読み込み順： style2.css → column2.css
   scope : .section-anchor を持つ main = コラム記事テンプレートのみ
   ========================================================== */

main:has(.section-anchor) {
  /* インラインstyleの var(--bg-base) をここで解決する（!important 不要） */
  --bg-base: var(--soft);
}

/* ==========================================================
   0. 使用されているユーティリティの最小shim
   ========================================================== */
main:has(.section-anchor) .fw-black { font-weight: 900 }
main:has(.section-anchor) .fw-bold { font-weight: 700 }
main:has(.section-anchor) .fw-medium { font-weight: 500 }
main:has(.section-anchor) .small { font-size: .875em }
main:has(.section-anchor) .text-dark { color: var(--ink) }
main:has(.section-anchor) .text-sub { color: #44515c }
main:has(.section-anchor) .text-secondary { color: var(--muted) }
main:has(.section-anchor) .text-orange { color: var(--orange) }
main:has(.section-anchor) .text-decoration-none { text-decoration: none }
main:has(.section-anchor) .d-block { display: block }
main:has(.section-anchor) .w-100 { width: 100% }
main:has(.section-anchor) .h-100 { height: 100% }

/* ==========================================================
   1. 記事ヘッダー
   ========================================================== */
main:has(.section-anchor) .hero-section {
  padding: 0 0 3em;
  border-bottom: 1px solid var(--line);
}

main:has(.section-anchor) .hero-blob { display: none }

/* パンくずチャンク */
main:has(.section-anchor) .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--muted);
}

main:has(.section-anchor) .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  padding-right: 10px;
  color: var(--muted);
}

main:has(.section-anchor) .breadcrumb-item.active {
  color: var(--ink);
  font-weight: 700;
}

/* タグ（AI検索・GEO / 基礎解説） */
main:has(.section-anchor) .hero-section .d-flex.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 1.6em;
}

main:has(.section-anchor) .badge-custom {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: #fafaf8;
  color: #536366;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
}

/* タイトル */
main:has(.section-anchor) .hero-title {
  margin: 0 0 .5em;
  font-size: clamp(2.1em, 5vw, 3.4em);   /* 親サイズ基準の相対指定 */
  line-height: 1.25;
  letter-spacing: -.03em;
  color: var(--ink);
  text-wrap: balance;
}

/* リード文（インライン max-width を上書き） */
main:has(.section-anchor) .hero-section p.fs-5 {
  max-width: 46em !important;
  margin: 0 0 2em;
  font-size: 1.15em;
  line-height: 1.9;
  color: #34414c;
  text-wrap: pretty;
}

/* 公開日・カテゴリ・執筆 */
main:has(.section-anchor) .hero-section .border-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em 2em;
  padding-top: 1em;                       /* 文字サイズ連動 */
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

/* ==========================================================
   2. 本文レイアウト（.row → grid / サイドバー左）
   ========================================================== */
main:has(.section-anchor) .section-py { padding: 0 0 80px }

main:has(.section-anchor) .section-py > .container > .row {
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr);
  gap: 64px;
  padding-top: 56px;
}

main:has(.section-anchor) .section-py > .container > .row > .col-lg-4 { order: -1 }
main:has(.section-anchor) .section-py > .container > .row > .col-lg-8 { min-width: 0 }

/* ==========================================================
   3. カード（本文セクション）
   ========================================================== */
main:has(.section-anchor) .card {
  margin: 0 0 24px;
  padding: 28px 32px;
  background: #fff;
  border: 1px solid var(--line);
}

main:has(.section-anchor) .section-anchor { scroll-margin-top: 2em }

main:has(.section-anchor) .card > h2 {
  margin: 0 0 .7em;
  padding-left: .6em;                     /* 見出しサイズに追従 */
  font-size: 1.5em;
  line-height: 1.45;
  color: var(--ink);
  border-left: .18em solid var(--orange);
  text-wrap: balance;
}

main:has(.section-anchor) .card p {
  margin: 0 0 1.35em;
  line-height: 1.9;
  text-wrap: pretty;
}

main:has(.section-anchor) .card p:last-child,
main:has(.section-anchor) .card > div > p:last-child { margin-bottom: 0 }

/* ラベル（CONTENTS / POINT / SUMMARY / RELATED ARTICLES / NEXT ACTION） */
main:has(.section-anchor) .tracking-widest {
  display: block;
  margin: 0 0 1em;
  color: var(--orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ==========================================================
   4. 目次
   ========================================================== */
main:has(.section-anchor) .d-flex.flex-column.gap-3.fw-bold {
  display: grid;
  gap: .9em;
  counter-reset: toc;
}

main:has(.section-anchor) .d-flex.flex-column.gap-3.fw-bold a {
  position: relative;
  padding-left: 1.1em;
  text-wrap: pretty;
  transition: color .2s;
}

main:has(.section-anchor) .d-flex.flex-column.gap-3.fw-bold a::before {
  content: "";
  position: absolute;
  top: .72em;
  left: 0;
  width: .45em;
  height: .45em;
  background: var(--orange);
}

main:has(.section-anchor) .d-flex.flex-column.gap-3.fw-bold a:hover { color: var(--orange) }

/* ==========================================================
   5. POINT ボックス（.btn-main を持たない border-brand-orange）
   ========================================================== */
main:has(.section-anchor) .card.border-brand-orange:not(:has(.btn-main)) {
  display: block;
  min-height: 8em;
  align-content: center;                  /* Flexboxを使わない垂直中央 */
  padding: 32px;
  background: #fff7f0;
  border: 1px solid #f0c5a8;
  border-left: 5px solid var(--orange);
}

main:has(.section-anchor) .card.border-brand-orange:not(:has(.btn-main)) > h2 {
  padding-left: 0;
  border-left: 0;
  font-size: 1.3em;
  line-height: 1.6;
}

/* ==========================================================
   6. 関連記事
   ========================================================== */
main:has(.section-anchor) .row-cols-1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

main:has(.section-anchor) .card-item {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--line);
  transition: border-color .2s, translate .2s;
}

main:has(.section-anchor) .card-item h3 {
  margin: 0;
  line-height: 1.55;
  text-wrap: pretty;
}

main:has(.section-anchor) .card-item:hover {
  border-color: var(--orange);
  translate: 0 -2px;
}

/* ==========================================================
   7. NEXT ACTION（.btn-main を含む card = CTA）
   ========================================================== */
main:has(.section-anchor) .card:has(.btn-main) {
  margin: 48px 0 0;
  padding: 48px;
  background: var(--navy);
  border: 0;
  color: #fff;
}

main:has(.section-anchor) .card:has(.btn-main) .tracking-widest { color: #f7aa7b }

main:has(.section-anchor) .card:has(.btn-main) h2 {
  margin: 0 0 .5em;
  padding-left: 0;
  border-left: 0;
  font-size: 1.7em;
  line-height: 1.45;
  color: #fff;
  text-wrap: balance;
}

main:has(.section-anchor) .card:has(.btn-main) p {
  margin: 0;
  color: #d8e0e6;
}

main:has(.section-anchor) .card:has(.btn-main) .row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

main:has(.section-anchor) .card:has(.btn-main) .col-lg-5 {
  display: grid;
  gap: 12px;
}

/* ボタン */
main:has(.section-anchor) .btn-main,
main:has(.section-anchor) .card:has(.btn-main) .btn-custom {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 14px 20px;
  border: 1px solid var(--line);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

main:has(.section-anchor) .btn-main.btn-orange {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

main:has(.section-anchor) .btn-main.btn-orange:hover { background: var(--orange-dark) }

main:has(.section-anchor) .card:has(.btn-main) .btn-custom {
  background: #fff;
  color: var(--navy);
}

/* ==========================================================
   8. サイドバー（.side-nav 相当の見た目へ）
   ========================================================== */
main:has(.section-anchor) aside.position-sticky {
  display: block;
  position: sticky;
  align-self: start;
  background: var(--soft);
  border-top: 4px solid var(--navy);
}

main:has(.section-anchor) aside .card {
  margin: 0;
  padding: 16px 18px 18px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
}

main:has(.section-anchor) aside .card:first-child { border-top: 0 }

main:has(.section-anchor) aside .tracking-widest {
  margin: 0 0 .9em;
  padding-bottom: .5em;
  border-bottom: 1px solid var(--line);
}

main:has(.section-anchor) aside ul {
  display: grid;
  gap: .7em;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.7;
}

main:has(.section-anchor) aside ul li {
  display: flex;
  align-items: flex-start;
  gap: .5em;
}

main:has(.section-anchor) aside ul li svg {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  margin-top: .3em;
  color: var(--orange);
}

main:has(.section-anchor) aside .d-grid {
  display: grid;
  gap: 8px;
}

main:has(.section-anchor) aside .btn-custom {
  display: block;
  padding: 11px 13px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  transition: border-color .2s, color .2s;
}

main:has(.section-anchor) aside .btn-custom:hover {
  border-color: var(--orange);
  color: var(--orange);
}

/* ==========================================================
   9. 初回表示のフェードイン（JS不要）
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {
  main:has(.section-anchor) article > .card,
  main:has(.section-anchor) article > section.card {
    transition: opacity .45s ease, translate .45s ease;
    transition-behavior: allow-discrete;
  }
  @starting-style {
    main:has(.section-anchor) article > .card,
    main:has(.section-anchor) article > section.card {
      opacity: 0;
      translate: 0 .75em;
    }
  }
}

/* ==========================================================
   10. レスポンシブ（style2.css のブレークポイントに合わせる）
   ========================================================== */
@media (max-width: 980px) {
  main:has(.section-anchor) .section-py > .container > .row {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 36px;
  }
  main:has(.section-anchor) .card:has(.btn-main) .row { grid-template-columns: 1fr }
}

@media (max-width: 800px) {
  main:has(.section-anchor) .section-py > .container > .row {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 36px;
  }
  main:has(.section-anchor) .section-py > .container > .row > .col-lg-4 { order: 0 }
  main:has(.section-anchor) aside.position-sticky { position: static }
  main:has(.section-anchor) .card { padding: 22px 20px }
  main:has(.section-anchor) .card.border-brand-orange:not(:has(.btn-main)) { padding: 24px 20px }
  main:has(.section-anchor) .card:has(.btn-main) { padding: 32px 24px }
  main:has(.section-anchor) .row-cols-1 { grid-template-columns: 1fr }
  main:has(.section-anchor) .hero-title { font-size: 2.1em }
}