/* =========================================
   不動産コラム（LP /columns） ─ 一覧カードブロック
   ========================================= */
#columns{
  --brand-navy:#0b214a; --brand-orange:#f59e0b;
  --line-color:#cbd5e1; --surface:#f8fafc;
  --ink-900:#111827; --ink-500:#6b7280;
  --shadow:0 6px 20px rgba(15,23,42,.06);
  --shadow-hover:0 10px 28px rgba(15,23,42,.12);
}
#columns{padding:64px 0;background:var(--surface);}
#columns .columns-inner{max-width:1120px;margin:0 auto;}

/* 見出し（左右罫線） */
#columns .heading-rails{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:40px;}
#columns .heading-rails::before,#columns .heading-rails::after{content:"";height:1px;flex:1;background:var(--line-color);}
#columns .heading-rails__title{margin:0;font-weight:800;font-size:clamp(24px,4.2vw,40px);line-height:1.2;text-align:center;white-space:nowrap;}
#columns .no-wrap-jp{white-space:nowrap!important;word-break:keep-all;line-break:strict;}
@media (max-width:480px){
  #columns .heading-rails__title,
  #columns .heading-rails__title .no-wrap-jp{white-space:normal!important;}
}

/* グリッド */
#columns .columns-grid{display:grid;gap:20px;margin:0 auto;max-width:1120px;grid-template-columns:repeat(1,minmax(0,1fr));}
@media (min-width:720px){#columns .columns-grid{grid-template-columns:repeat(2,1fr);max-width:960px;}}
@media (min-width:1080px){#columns .columns-grid{grid-template-columns:repeat(3,1fr);max-width:1120px;}}

/* カード */
#columns .column-card{position:relative;background:#fff;border:1px solid rgba(15,23,42,.06);border-radius:16px;overflow:clip;box-shadow:var(--shadow);transition:transform .08s ease,box-shadow .2s ease;}
#columns .column-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);}
#columns .column-card__thumb{display:block;aspect-ratio:16/9;background:#e5e7eb;}
#columns .column-card__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
#columns .column-card__ribbon{position:absolute;top:10px;right:10px;padding:4px 10px;font-size:12px;font-weight:700;color:#fff;background:#ef4444;border-radius:999px;box-shadow:0 6px 18px rgba(239,68,68,.3);}
#columns .column-card__body{padding:14px 14px 16px;}
#columns .column-card__title{margin:0 0 10px;font-size:clamp(15px,2.2vw,17px);line-height:1.5;font-weight:700;color:var(--ink-900);}
#columns .column-card__title a{color:inherit;text-decoration:none;}
#columns .column-card__title a:hover{text-decoration:underline;}
#columns .column-card__tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;}
#columns .tag{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;font-size:12px;font-weight:600;color:var(--brand-navy);background:#ffedd5;border:1px solid rgba(245,158,11,.33);border-radius:999px;}
#columns .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand-orange);}
#columns .tag--sub{color:#334155;background:#f1f5f9;border:1px solid #cbd5e1;}
#columns .tag--sub::before{background:#64748b;}
#columns .column-card__meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-500);}
#columns .meta__dot{opacity:.6;}
#columns .columns-more{display:flex;justify-content:flex-end;margin-top:8px;}
#columns .column-block__more{padding:8px 12px;font-size:14px;font-weight:600;color:var(--brand-navy);text-decoration:none;border:1px solid rgba(11,33,74,.12);border-radius:999px;transition:transform .06s ease,background-color .2s ease,box-shadow .2s ease;}
#columns .column-block__more:hover{color:#fff;background:var(--brand-navy);box-shadow:0 6px 18px rgba(11,33,74,.18);transform:translateY(-1px);}

/* タイトル3行固定高さ */
#columns{--title-lines:3;--title-lh:1.5;}
#columns .column-card__title a{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--title-lines);
  overflow:hidden;text-overflow:ellipsis;
  height:calc(1em * var(--title-lh) * var(--title-lines));
  block-size:calc(1em * var(--title-lh) * var(--title-lines));
  word-break:break-word;
}
@media (max-width:480px){#columns{--title-lines:2;}}

/* =========================================
   記事一覧ページ（/columns/list 等）
   ========================================= */
.articles-index .container{max-width:1080px;margin:0 auto;padding:24px 16px;}
.breadcrumbs ol{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 16px;}
.breadcrumbs a{text-decoration:none;}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:16px;}
.page-head h1 {
	max-width: 600px;
}


.page-title{font-size:clamp(20px,2.4vw,28px);margin:0;}
.sort-form select{padding:6px 10px;}
.cards .empty{padding:48px 0;text-align:center;color:#666;}
.card-grid{--gap:20px;display:grid;gap:var(--gap);grid-template-columns:repeat(3,1fr);}
@media (max-width:1024px){.card-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.card-grid{grid-template-columns:1fr;}}
.card{background:#fff;border-radius:16px;box-shadow:0 4px 14px rgba(0,0,0,.06);overflow:hidden;transition:transform .15s ease,box-shadow .15s ease;}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.1);}
.card-link{display:block;color:inherit;text-decoration:none;height:100%;padding-bottom:12px;}
.thumb{aspect-ratio:16/9;background:#f2f3f5;margin:0;}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.thumb--placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:#999;font-size:12px;}
.meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px 0 12px;}
.meta time{font-size:12px;color:#666;}
.tags{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.tag{font-size:11px;line-height:1;padding:4px 6px;border-radius:999px;background:#eef3ff;color:#2a4d8f;white-space:nowrap;}
.card-title{
  --lh:1.5;--lines:3;margin:8px 12px 10px;font-size:16px;line-height:var(--lh);
  display:-webkit-box;-webkit-line-clamp:var(--lines);-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(1em * var(--lh) * var(--lines));
}
.more{display:inline-flex;align-items:center;gap:6px;margin:0 12px;padding:6px 0;font-size:13px;color:#0d47a1;}
.more .bi{font-size:1rem;}
.pagination{display:flex;justify-content:center;align-items:center;gap:12px;margin:28px 0 8px;}
.pagination a{padding:6px 10px;border:1px solid #ddd;border-radius:8px;text-decoration:none;color:#333;}
.pagination a.disabled{pointer-events:none;opacity:.4;}

/* =========================================
   記事詳細ページ（/columns/{slug}）専用
   ========================================= */

/* コンテナ/パンくず */
#main.article-show .container{max-width:900px;margin:0 auto;padding:24px 16px;}
#main.article-show .breadcrumbs ol{display:flex;gap:8px;list-style:none;margin:0 0 16px;padding:0;flex-wrap:wrap;}
#main.article-show .breadcrumbs a{text-decoration:none;}

/* === Article Head：タイトル → メタ行（カテゴリ/公開日）を先に確定 === */
#main.article-show .article-head{
  position:relative;             /* z-index 有効化 */
  z-index:5;                     /* 画像より前面 */
  display:flow-root !important;  /* float 回り込み遮断 */
  padding-bottom:clamp(24px,3vw,56px) !important; /* 基本の下余白（相殺されない） */
  margin:0 !important;
  background:#fff;               /* 透け防止（任意） */
}
#main.article-show .article-head .title{
  margin:0;font-weight:800;font-size:clamp(24px,2.8vw,44px);line-height:1.25;
  white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;text-overflow:clip!important;
  text-wrap:balance;line-break:auto;
  -webkit-line-clamp:initial!important;-webkit-box-orient:initial!important;
}
/* サイト共通 header h1 の max-width を無効化 */
#main.article-show .article-head h1,
#main.article-show header.article-head h1{max-width:none!important;width:100%!important;display:block!important;}

@media (min-width:768px){
  #main.article-show .article-head .title{max-width:none!important;width:100%!important;text-wrap:normal;}
}
#main.article-show .article-head .meta-under{
  position:static!important;float:none!important;
  display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:16px;
  color:#667085;font-size:14px;margin-top:2px;
}
#main.article-show .article-head .tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;}
#main.article-show .article-head .tag{font-size:12px;line-height:1;padding:6px 10px;border-radius:999px;background:#eef3ff;color:#2a4d8f;white-space:nowrap;}
#main.article-show .article-head .pubdate{white-space:nowrap;}
@media (max-width:640px){
  #main.article-show .article-head .meta-under{grid-template-columns:1fr;row-gap:6px;}
  #main.article-show .article-head .pubdate{text-align:left;}
}

/* === アイキャッチ：引き上げ禁止＋上マージン（PC 基本値） === */
#main.article-show .article-head + .eyecatch,
#main.article-show .article-head + .article-visual,
#main.article-show .article-head + .article-image,
#main.article-show .article-head + .article-hero,
#main.article-show .article-head + figure{
  position:relative!important;z-index:1!important;top:auto!important;transform:none!important;float:none!important;clear:both!important;
  margin-top:clamp(28px, 3vw, 56px) !important; /* ← PC 基本 */
}
/* 画像自体 */
#main.article-show :is(.eyecatch,.article-visual,.article-image,.article-hero,figure) img{display:block;width:100%;height:auto;border-radius:12px;}

/* === モバイルで“狭いほど大きくなる”余白に上書き === */
@media (max-width:767px){
  #main.article-show .article-head{padding-bottom:clamp(32px,10vw,72px) !important;}
  #main.article-show .article-head + .eyecatch,
  #main.article-show .article-head + .article-visual,
  #main.article-show .article-head + .article-image,
  #main.article-show .article-head + .article-hero,
  #main.article-show .article-head + figure{
    margin-top:clamp(40px, calc(180px - 15vw), 120px) !important;
  }
}

/* === さらに広い画面で余白を増やす（任意） === */
@media (min-width:1200px){#main.article-show .article-head{padding-bottom:72px !important;}}
@media (min-width:1440px){#main.article-show .article-head{padding-bottom:96px !important;}}

/* === 本文（共通） === */
.article-body{font-size:16px;line-height:1.9;color:#222;margin-top:32px;}
.article-body h2{font-size:22px;margin:28px 0 12px;}
.article-body h3{font-size:18px;margin:22px 0 10px;}
.article-body p{margin:0 0 1em;}
.article-body ul,.article-body ol{padding-left:1.2em;margin:0 0 1em;}
.article-body table{width:100%;border-collapse:collapse;margin:18px 0;}
.article-body th,.article-body td{border:1px solid #e5e7eb;padding:10px 12px;}
.article-body img{max-width:100%;height:auto;}

/* 関連カード（必要なら） */
.related{margin:40px 0 10px;}
.related-title{font-size:18px;margin:0 0 14px;}
.related-grid{--gap:16px;display:grid;gap:var(--gap);grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){.related-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.related-grid{grid-template-columns:1fr;}}

/* =========================================
   会員限定 CTA（ロック時）
   ========================================= */
.article-body.is-locked .excerpt{white-space:pre-line;font-size:16px;line-height:1.9;color:#222;margin:0 0 18px;}
.locked-cta{max-width:640px;margin:32px auto;padding:24px 20px;text-align:center;background:#f7faff;border:1px solid #e2e8f5;border-radius:12px;}
.locked-cta__title{font-weight:700;margin-bottom:6px;font-size:16px;color:#1a2b6b;}
.locked-cta__desc{margin:0 0 12px;color:#4a5568;font-size:14px;}
.locked-cta__actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:20px;}
.locked-cta__notes{margin:20px 0 0;padding-left:1em;color:#6b7280;font-size:12px;}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;text-decoration:none;font-weight:600;font-size:14px;}
.btn-primary{background:#2a4d8f;color:#fff;border:1px solid:#2a4d8f;}
.btn-primary:hover{opacity:.92;}
.btn-outline{background:#fff;color:#2a4d8f;border:1px solid:#b9c7ea;}
.btn-outline:hover{background:#f4f6ff;}
@media (max-width:480px){.locked-cta{max-width:92%;}}


/* /columns/{slug} の会員CTAボタンを強制的に白文字に固定 */
#main.article-show .locked-cta .btn-primary,
#main.article-show .locked-cta .btn-primary:link,
#main.article-show .locked-cta .btn-primary:visited,
#main.article-show .locked-cta .btn-primary:hover,
#main.article-show .locked-cta .btn-primary:active,
#main.article-show .locked-cta .btn-primary:focus{
  color: #fff !important;
  -webkit-text-fill-color: #fff; /* iOS Safari 対策 */
  text-decoration: none;
}

/* 念のためボタンの背景/枠も明示（既に指定済みでもOK） */
#main.article-show .locked-cta .btn-primary{
  background: #2a4d8f !important;
  border-color: #2a4d8f !important;
}


/* /columns/{slug} の会員CTA：アウトラインボタンを見やすく */
#main.article-show .locked-cta .btn-outline{
  background: #fff;                         /* 白地を維持 */
  color: #1f3b7a;                           /* 濃い紺で可読性UP */
  border: 2px solid #7f93c9;                /* 濃いめ境界線でコントラストUP */
  box-shadow: 0 1px 0 rgba(0,0,0,.05),      /* うっすら段差 */
              0 0 0 0 rgba(42,77,143,0);    /* focus用の土台 */
  transition: background-color .15s ease,
              border-color .15s ease,
              box-shadow .15s ease,
              color .15s ease;
}

/* ホバー：うっすら塗り＆枠も濃く */
#main.article-show .locked-cta .btn-outline:hover{
  background: #eef2ff;                      /* 薄い藍色の面を追加 */
  border-color: #2a4d8f;                    /* ブランド紺へ */
  color: #1a2b6b;
}

/* キーボード操作の可視フォーカス */
#main.article-show .locked-cta .btn-outline:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(42,77,143,.22); /* 紺のフォーカスリング */
  border-color: #2a4d8f;
}

/* 押下時：わずかに沈ませる */
#main.article-show .locked-cta .btn-outline:active{
  transform: translateY(1px);
  box-shadow: 0 0 0 2px rgba(42,77,143,.18) inset;
}

/* スマホではもう少し塗りを強めて境界を明確化（任意） */
@media (max-width: 480px){
  #main.article-show .locked-cta .btn-outline{
    background: #f4f6ff;                    /* 面を少し濃く */
    border-color: #6f84c1;
  }
}








/* 1) デスクトップではタイトルの行長を一定に（約32字幅） */
@media (min-width: 1024px){
  #main.article-show .article-head .title{
    max-inline-size: 32em;     /* ← 32字幅程度に固定。28?36emで好み調整 */
    margin-inline: 0;          /* 左右余白は不要ならそのまま */
    text-wrap: balance;        /* 2) 行のバランスを保って再配置の揺れを低減 */
    word-break: keep-all;      /* 句読点規則を優先して不自然な分割を避ける */
    overflow-wrap: anywhere;   /* 長い英数トークンの保険 */
  }
}

/* 画面がすごく広い時は少しだけ広くしてもOK（任意） */
@media (min-width: 1440px){
  #main.article-show .article-head .title{
    max-inline-size: 34em;     /* ← 好みで 33?36em */
  }
}








/* =========================================================
   キャラ情報（アイコン右に名前/ジャンル、下に SVG 吹き出し）
   ・2行目は「左:avatar / 右:bubble」
   ・bubble を少しだけアバター側に“食い込ませる”
   ========================================================= */

.character-speech{
  --avatar: 56px;
  --gap: 12px;

  display: grid;
  grid-template-columns: var(--avatar) minmax(0,1fr);
  grid-template-areas:
    "avatar meta"
    "bubble bubble";           /* ← ここがポイント */
  column-gap: var(--gap);
  row-gap: 10px;
  align-items: start;
  margin: 16px 0 20px;
}

.character-speech .avatar{
  grid-area: avatar;
  width: var(--avatar); height: var(--avatar);
  border-radius: 50%; object-fit: cover;
  border: 1px solid #e5e7eb; background:#fff;
}

.character-speech .char-meta{ grid-area: meta; min-width:0; line-height:1.4; }
.char-name{
  font-weight:700;
  font-size:16px;
  color:#111827;
}
.char-genre{
  font-size:12px;
  font-weight:normal;
  color:#6b7280;
  margin-top:4px;
}


.character-speech .bubble-auto{
  grid-area: bubble;
  position: relative;
  display: block;
  width: 100%;
}

/* ---- SVG吹き出しの基本 ---- */
.bubble-auto{
  --pad: 14;     /* 内側余白(px) */
  --r: 12;       /* 角丸半径(px) */
  --stroke: 2;   /* 枠線太さ(px) */
  --tail-w: 28;  /* 尾の幅(px) */
  --tail-h: 14;  /* 尾の高さ(px) */
}


/* デフォルト（下向き）を使わないので bottom 用の余白はなし */
/* 上向き尾：SVGを上に突き出す＆本文と干渉しない余白調整 */
.bubble-auto[data-tail-side="top"]{
  margin-top: calc(var(--tail-h)*1px + 4px);
}
.bubble-auto[data-tail-side="top"] .bubble-auto__svg{
  position: absolute;
  inset: calc(-1 * var(--tail-h)*1px) 0 0 0; /* 上に尾をはみ出させる */
  width: 100%;
  height: calc(100% + var(--tail-h)*1px);
  pointer-events: none;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.08));
}

.bubble-auto__content{
  width: 100%;
  padding: calc(var(--pad)*1px);
  line-height: 1.75;
  color: #374151;
  word-break: break-word;
  font-weight:normal;
  font-size:14px;
}
.bubble-auto__path{
  fill:#fff;
  stroke:#e5e7eb;
  stroke-width: var(--stroke);
  vector-effect: non-scaling-stroke;
}


/* ▼ bubble を重ね順の“土台”に、SVGを背面、テキストを前面へ */
.character-speech .bubble-auto{
  position: relative;   /* 絶対配置SVGの基準にする */
  z-index: 0;           /* 新しいスタッキング文脈の底 */
}

.bubble-auto__svg{
  position: absolute;
  /* 上向き尾のとき（data-tail-side="top"）は上にはみ出す想定 */
  inset: calc(-1 * var(--tail-h, 14) * 1px) 0 0 0;
  width: 100%;
  height: calc(100% + var(--tail-h, 14) * 1px);
  pointer-events: none;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.08));
  z-index: 0;           /* 背面固定 */
}

.bubble-auto__content{
  position: relative;
  z-index: 1;           /* テキストを前面に固定（SVGより上） */
}

/* ▼ バブル全体を上に持ち上げる量（例：6px）を変数で管理 */
.character-speech{ --raise-bubble: 6px; }

/* 上向き尾（data-tail-side="top"）の余白から差し引いて上に寄せる */
.bubble-auto[data-tail-side="top"]{
  /* 既定: tail高さ + 4px から、--raise-bubble 分だけ引いて上げる */
  margin-top: calc(var(--tail-h, 14) * 1px + 4px - var(--raise-bubble, 0px));
}

/* （任意）行間自体も少し詰めたい場合は row-gap も連動させる */
.character-speech{
  row-gap: max(0px, calc(10px - var(--raise-bubble, 0px)));
}




/* ▼ 1) 1行目（avatar と meta）の縦位置を中央揃えに */
.character-speech{
  align-items: center; /* ← row1 内で avatar / char-meta を上下中央に */
}

/* ▼ 2) char-meta 自体も“中央化”を強める（複数行でも安定） */
.character-speech .char-meta{
  align-self: stretch;               /* 行の高さいっぱいに広げる */
  display: flex;                     /* 中の2行を縦方向に中央寄せ */
  flex-direction: column;
  justify-content: center;
  min-height: var(--avatar);         /* 行の最小高さ＝アバター高さ */
  transform: translateY(var(--meta-nudge, 0px)); /* 微調整用（任意） */
}

/* ▼ 3) 視覚的に少し上に見えるときの“微調整”（任意）
   例：-2px ～ +2px で目視合わせ */
.character-speech{ --meta-nudge: -1px; }






/* =========================
   カテゴリ説明ブロック
   ========================= */
.category-intro{
  max-width: 900px;          /* 記事幅に合わせる */
  margin: 28px auto 48px;    /* 上は少し広め、下は控えめ */
  padding: 16px 18px;
  background: #f8fafc;       /* 薄い面色 */
  border: 1px solid #e5e7eb; /* うっすら枠線 */
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
}

.category-intro__hd{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: #1f2a4d;
  letter-spacing: .02em;
}
.category-intro__hd .dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #f59e0b; /* brand orange */
  flex: 0 0 auto;
}

.category-intro p{
  margin: 0;
  color: #334155;
  line-height: 1.9;
  font-size: 15px;
}

/* 箇条書きにも対応したい場合（任意） */
.category-intro ul{
  margin: 8px 0 0;
  padding-left: 1.1em;
  color: #334155;
  line-height: 1.85;
  font-size: 15px;
}
.category-intro li{ margin: .2em 0; }

/* モバイル: 余白を少し詰める */
@media (max-width: 480px){
  .category-intro{ padding: 14px 14px; margin: 20px auto 12px; }
  .category-intro p, .category-intro ul{ font-size: 14.5px; }
}









/* =========================
   カテゴリリンク（ピル型）
   ========================= */
.category-links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 24px;
}

/* ボタン本体 */
.category-links a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;

  background: #f4f6ff;
  color: #2a4d8f;             /* ブランド紺 */
  border: 1px solid #b9c7ea;  /* 淡い枠線 */
  transition: background-color .15s ease,
              color .15s ease,
              border-color .15s ease,
              box-shadow .15s ease;
}

/* ホバー */
.category-links a:hover{
  background: #eef2ff;
  border-color: #2a4d8f;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}

/* 現在カテゴリ（強調） */
.category-links a.is-active,
.category-links a[aria-current="page"]{
  background: #2a4d8f;
  color: #fff;
  border-color: #2a4d8f;
  box-shadow: 0 6px 18px rgba(42,77,143,.22);
}

/* モバイル：横スクロールで扱いやすく（大量カテゴリ想定） */
@media (max-width: 480px){
  .category-links{
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;       /* スクロールバーの余白 */
  }
  .category-links a{
    flex: 0 0 auto;            /* 折り返さず横スクロール可能に */
    padding: 8px 12px;
    font-size: 13.5px;
  }
}

/* （任意）中央寄せしたいセクション用 */
.category-links--center{ justify-content: center; }

/* （任意）小さめバリエーション */
.category-links--sm a{ padding: 6px 10px; font-size: 13px; }


/* =========================
   PCでは1行固定＋幅に応じて縮小
   ========================= */
@media (min-width: 1024px){
  .category-links{
    flex-wrap: nowrap;          /* 改行させない */
    gap: 12px;
    white-space: nowrap;
    overflow: hidden;           /* はみ出し防止（必要なら可） */
    container-type: inline-size;/* 親幅に応じた調整を有効化 */
  }
  .category-links a{
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 14px;            /* 基準 */
    padding: 8px 14px;          /* 基準 */
    line-height: 1.25;
  }

  /* 親幅が狭くなるほど、文字・余白・隙間を詰める（段階的） */
  @container (max-width: 1200px){
    .category-links{ gap: 10px; }
    .category-links a{ font-size: 13.5px; padding: 7px 12px; }
  }
  @container (max-width: 1100px){
    .category-links{ gap: 8px; }
    .category-links a{ font-size: 13px; padding: 6px 11px; }
  }
  @container (max-width: 1000px){
    .category-links{ gap: 7px; }
    .category-links a{ font-size: 12.5px; padding: 6px 10px; }
  }
  @container (max-width: 920px){
    .category-links{ gap: 6px; letter-spacing: -0.01em; }
    .category-links a{ font-size: 12px; padding: 5px 9px; }
  }
  @container (max-width: 860px){
    .category-links{ gap: 6px; letter-spacing: -0.015em; }
    .category-links a{ font-size: 11.5px; padding: 4px 8px; }
  }
}

/* コンテナクエリ未対応ブラウザ向けのフォールバック（任意） */
@supports not (container-type: inline-size){
  @media (min-width:1024px) and (max-width:1200px){
    .category-links{ gap:10px; }
    .category-links a{ font-size:13.5px; padding:7px 12px; }
  }
  @media (min-width:1024px) and (max-width:1100px){
    .category-links{ gap:8px; }
    .category-links a{ font-size:13px; padding:6px 11px; }
  }
  @media (min-width:1024px) and (max-width:1000px){
    .category-links{ gap:7px; }
    .category-links a{ font-size:12.5px; padding:6px 10px; }
  }
  @media (min-width:1024px) and (max-width:920px){
    .category-links{ gap:6px; }
    .category-links a{ font-size:12px; padding:5px 9px; }
  }
  @media (min-width:1024px) and (max-width:860px){
    .category-links{ gap:6px; }
    .category-links a{ font-size:11.5px; padding:4px 8px; }
  }
}








:root{
  --brand-navy:   #0b214a;
  --brand-orange: #f59e0b;
}

/* ページ導入文 */
.page-intro{
  max-width: 880px;
  margin: 12px auto 28px;         /* H1 の直下→少し詰めて、その後は余白 */
  padding: 14px 18px;
  font-size: clamp(15px, 1.6vw, 16px);
  line-height: 1.9;
  color: #374151;                  /* 読みやすい濃グレー */
  background: #f8fafc;             /* うっすら面で区切る */
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

/* セクション見出し（下線＋アクセントドット） */
.section-title{
  position: relative;
  max-width: 1080px;
  margin: 32px auto 16px;          /* 導入文との間をしっかり空ける */
  padding-bottom: 10px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 800;
  color: var(--brand-navy);
  line-height: 1.3;
  border-bottom: 2px solid #e5e7eb;
}
.section-title::before{
  content:"";
  position: absolute;
  left: 0; bottom: -2px;
  width: 88px; height: 2px;        /* 下線の先頭だけブランド色で強調 */
  background: var(--brand-orange);
}

/* 余白の調整（モバイル時はややコンパクトに） */
@media (max-width: 640px){
  .page-intro{
    margin: 10px auto 22px;
    padding: 12px 14px;
    border-radius: 10px;
  }
  .section-title{
    margin: 26px auto 12px;
    padding-bottom: 8px;
  }
}




/* =========================
   記事検索ボックス
   ========================= */
.article-search{
  margin: 18px 0 20px;
}
.article-search__form{
  display: block;
}
.article-search__label{
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
  color: #2a4d8f;
}
.article-search__controls{
  display: flex;
  align-items: center;
  gap: 8px;
}
.article-search__input{
  flex: 1 1 auto;
  height: 42px;
  padding: 0 14px;
  border: 1px solid #b9c7ea;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.article-search__input:focus{
  border-color: #2a4d8f;
  box-shadow: 0 0 0 3px rgba(42,77,143,.15);
}
.article-search__submit{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #2a4d8f;
  background: #2a4d8f;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s ease, box-shadow .15s ease;
}
.article-search__submit:hover{
  opacity: .9;
  box-shadow: 0 6px 18px rgba(42,77,143,.22);
}
.article-search__clear{
  height: 42px;
  width: 42px;
  border-radius: 50%;
  border: 1px solid #b9c7ea;
  background: #f4f6ff;
  color: #2a4d8f;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.article-search__clear:hover{
  background: #eef2ff;
  border-color: #2a4d8f;
}
.article-search__help{
  margin-top: 6px;
  font-size: 12px;
  color: #667;
}
.article-search__result{
  margin-top: 8px;
  font-size: 13px;
  color: #444;
}

/* モバイル最適化 */
@media (max-width: 480px){
  .article-search{ margin: 14px 0 16px; }
  .article-search__controls{ gap: 6px; }
  .article-search__input{ height: 40px; font-size: 13.5px; }
  .article-search__submit{ height: 40px; padding: 0 12px; }
  .article-search__clear{ height: 40px; width: 40px; }
}

/* PCでカテゴリリンク1行表示を崩さないための微調整（既存を尊重） */
@media (min-width: 1024px){
  .category-links{ flex-wrap: nowrap; white-space: nowrap; }
  .category-links a{ white-space: nowrap; }
}





/* ===== Pager ===== */
.pager{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin:24px 0 40px;
  font-weight:600;
}
.pager__list{
  display:flex;
  gap:8px;
  padding:0;
  margin:0;
  list-style:none;
}
.pager a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:38px;
  padding:0 14px;
  border:1px solid #b9c7ea;
  border-radius:999px;
  text-decoration:none;
  color:#2a4d8f;
  background:#f4f6ff;
  transition:background-color .15s,color .15s,border-color .15s,box-shadow .15s;
}
.pager a:hover{
  background:#eef2ff;
  border-color:#2a4d8f;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.pager a.is-active,
.pager a[aria-current="page"]{
  background:#2a4d8f;
  color:#fff;
  border-color:#2a4d8f;
  box-shadow:0 6px 18px rgba(42,77,143,.22);
}
.pager a.is-disabled{
  opacity:.45;
  pointer-events:none;
}

/* スマホは少しコンパクトに */
@media (max-width:480px){
  .pager{ gap:8px; margin:18px 0 28px; }
  .pager a{ min-width:34px; height:34px; padding:0 12px; }
}