/* ==========================================================
   40 ALSTA RENTAL CAR – BLOG STYLESHEET（暫定LP踏襲版）
   home/archive/single/sidebar/search/404 共通
   明日デザイン確定後に Figma 準拠で更新予定
   ========================================================== */

/* ---------- 共通：メインラッパ ---------- */
.column-main {
  background: var(--black, #000);
  color: var(--white, #fff);
  min-height: 60vh;
  padding-top: 64px; /* fixed header 分 */
}

/* ---------- HERO ---------- */
.column-hero {
  background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
  padding: 80px 24px 60px;
  text-align: center;
  border-bottom: 1px solid rgba(212, 185, 107, 0.25);
}
.column-hero-tax {
  padding: 60px 24px 40px;
}
.column-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.column-hero-eyebrow {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 4px;
  color: var(--gold, #d4b96b);
  margin-bottom: 12px;
}
.column-hero-title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.4;
  color: var(--white);
  margin-bottom: 16px;
}
.column-hero-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: var(--gray-light, #c0c0c0);
}

/* HERO – ARCHIVE 専用（Figma 92:2699 PC：top:180px, container 1130px, hero h:160px, gap to cards:32px） */
.column-hero-archive {
  padding-top: 58.5px;          /* Figma: hero top:180 - breadcrumb top:109 - breadcrumb h:12.5 = 58.5 */
  padding-bottom: 32px;         /* Figma: ヒーローブロックとカードの gap-32 */
  padding-left: 0;
  padding-right: 0;
  text-align: left;
  position: relative;
  background: var(--black, #000);
  border-bottom: none;
}
.column-hero-archive .column-hero-inner {
  position: relative;
  max-width: 1130px;            /* Figma 実寸 */
  margin: 0 auto;
  padding: 0;                   /* Figma: content は left:0 で開始（padding なし） */
  min-height: 160px;            /* Figma: h-[160px] */
  display: block;
}
.column-hero-archive .column-hero-left {
  position: relative;
  z-index: 2;
}
.column-hero-archive .column-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: 'Shippori Mincho', serif !important;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 4px;
  line-height: 32px;
  color: var(--gold, #d4b96b);
  margin: 0;
  text-transform: uppercase;
}
.column-hero-archive .column-hero-eyebrow::before {
  content: '';
  display: block;
  width: 25px;
  height: 1px;
  background: var(--gold, #d4b96b);
}
.column-hero-archive .column-hero-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 54.4px;
  letter-spacing: 0;
  color: var(--white);
  margin: 0;
}
.column-hero-archive .column-hero-watermark {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 160px;
  line-height: 160px;
  letter-spacing: 0;
  color: rgba(192, 192, 192, 0.3);
  margin: 0;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  text-transform: uppercase;
}

/* ---------- パンくず ---------- */
.column-breadcrumb-wrap {
  padding: 45px 0 0;        /* Figma 92:2700 top:109 - header(64) = 45px / 左右 padding なし */
}
/* 上部breadcrumb：PC表示、SP非表示 / 下部breadcrumb：SP表示、PC非表示 */
.column-breadcrumb-bottom {
  display: none;
}
.column-breadcrumb-wrap .breadcrumb {
  max-width: 1130px;        /* ヒーローと同じ container 幅 */
  margin: 0 auto;
}
/* Figma ベース：Noto Sans JP Regular 11px / #e0ddd6 / gap 8px
   PC は実機で 11px だと読みづらいので 13px、SP は Figma 値 11px */
.breadcrumb {
  display: block !important;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: #e0ddd6;
  justify-content: flex-start !important;
  text-align: left;
}
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e0ddd6;
}
.breadcrumb-item a,
.breadcrumb-item > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;                     /* Figma 92:2700 親 gap-8 と統一 */
  color: #e0ddd6;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  /* critical.css の nav a{font-family:'Cormorant Garamond';font-weight:700;font-size:13px;letter-spacing:2px;text-shadow:...} を全部上書き */
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}
.breadcrumb-item a:hover {
  opacity: 0.8;
}
.breadcrumb-home-icon {
  width: 13.3px;           /* Figma 実寸 11.25 を 13px 文字に合わせて 1.18倍 */
  height: 14.8px;
  flex-shrink: 0;
  color: #e0ddd6;
  display: block;
}
.breadcrumb-sep {
  width: 6px;              /* Figma 実寸 5.076 を 1.18倍 */
  height: 10.4px;
  flex-shrink: 0;
  color: #e0ddd6;
  display: block;
}
.breadcrumb-item [aria-current="page"] {
  color: #e0ddd6;
  opacity: 0.7;
}

/* ---------- レイアウト（Figma 92:2699 PC: container 1130px / main 785 / aside 282 / gap 55） ---------- */
.column-layout {
  display: grid;
  grid-template-columns: minmax(0, 785px) 282px;
  gap: 55px;            /* Figma: aside left=840, main width=785 → 55 */
  max-width: 1130px;    /* Figma 実寸 */
  margin: 0 auto;
  padding: 0 0 80px;    /* 左右 padding なし（content は left:0 で開始） */
}

/* 個別記事：Figma 92:3056 article container top:174 - breadcrumb 92:2700 top:109 - breadcrumb h(11.25-12.5) ≒ 52px */
.column-single-main .column-layout {
  margin-top: 52px;
}

/* 検索結果 / カテゴリ / タグページ：hero→breadcrumb→layout の順なので、
   breadcrumb と記事カードの間に余白を追加 */
body.search .column-layout,
body.tax-column_category .column-layout,
body.tax-column_tag .column-layout {
  margin-top: 32px;
}
.column-list-wrap,
.column-article {
  min-width: 0;
}

/* ---------- 記事カード一覧 ---------- */
.column-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
/* Figma 92:2699 PC：3 cols × 240px image × gap 32px */
.column-list.column-list-grid {
  grid-template-columns: repeat(3, 240px);
  gap: 32px;
  justify-content: start;
}
.column-card {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.column-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  opacity: 0.92;
}
.column-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
/* Figma: PC は 240x170 (aspect 1.41), SP は 340x241 (aspect 1.41) — 同比率なので統一 */
.column-card-thumb {
  aspect-ratio: 240 / 170;       /* Figma 92:2699 PC実寸 */
  overflow: hidden;
  background: #2a2a2a;
  border-radius: 0;
}
.column-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.column-card:hover .column-card-thumb img {
  transform: scale(1.04);
}
.column-card-body {
  padding-top: 16px;            /* Figma: flex-wrap gap-16 between image and body */
  display: flex;
  flex-direction: column;
  gap: 8px;                     /* Figma: gap-8 between badge, title, date */
  align-items: flex-start;
}
.column-card-cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 5px 8px;
  border-radius: 2px;
  line-height: 1;
  margin: 0;
}
.column-card-title {
  width: 100%;                  /* Figma 92:2731: w-[240px] / w-[340px] = full card width */
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 30.4px;
  color: var(--white);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.column-card-date {
  font-family: 'Unbounded', sans-serif;
  font-weight: 600;
  font-size: 10px;
  line-height: 12px;
  color: #767676;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
}

/* ---------- ページネーション ---------- */
/* Figma 92:2699 PC: 32×32 #2a2a2a rounded 6px Inter Bold 12px gap 8px / current #d4b96b
   gap-48 above pagination per Figma 92:2723 outer flex-col gap-48 */
.column-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
}
.column-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: #2a2a2a;
  border: none;
  color: var(--white);
  text-decoration: none;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  transition: opacity 0.2s;
}
.column-pagination .page-numbers.current {
  background: #d4b96b;
  color: #000;
}
.column-pagination .page-numbers:hover {
  opacity: 0.85;
}

/* ---------- 単独記事 ---------- */
.column-single-main {
  padding-bottom: 80px;
}
/* Figma 92:3061 更新版完全準拠：
   container relative w-full
   meta-left absolute left:0 top:0 w:785（フル幅）h:141 flex-col gap-8
   share absolute left:684 top:0 gap-24（右上にオーバーレイ）
   → タイトルが share と重ならず full width で広がる */
.column-article-header {
  position: relative;
  width: 100%;
  min-height: 141px;           /* Figma h-[141px] */
  margin-bottom: 48px;
}
.column-article-meta-left {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;                 /* Figma: w-785 = main column の full 幅 */
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* meta-row は share の左に収まる長さに（share は left:684 開始） */
.column-article-meta-row {
  max-width: 670px;            /* 684 - 余白(14) */
}
.column-article-meta-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.column-article-cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 5px 8px;
  border-radius: 2px;
  text-decoration: none;
  line-height: 1;
  margin: 0;
}
.column-article-date {
  font-family: 'Unbounded', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.13px;
  color: #c0c0c0;
}
.column-article-updated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Unbounded', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.13px;
  color: #c0c0c0;
}
.column-article-updated-icon {
  width: 17px;
  height: 17px;
  color: #c0c0c0;
}

/* Figma 92:3062 完全準拠：absolute left:684 top:0 gap-24
   ※787-684-17 = 86px 右に余白あり */
.column-article-share-top {
  position: absolute;
  left: 684px;             /* Figma 実値 */
  top: 0;
  display: flex;
  align-items: center;
  gap: 24px;
}
.column-article-share-top .share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.2s;
}
.column-article-share-top .share-icon:hover {
  opacity: 0.7;
}
.column-article-share-top .share-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.column-article-share-top .share-line {
  width: 18.672px;
  height: 17.79px;
}
.column-article-title {
  /* Figma 92:3090: Shippori Mincho SemiBold 32px white lh 54.4 */
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 54.4px;
  color: var(--white);
  margin: 0 0 18px;
}
.column-article-meta {
  display: flex;
  gap: 16px;
  align-items: center;
  font-family: 'Unbounded', sans-serif;
  font-size: 12px;
  color: var(--gray-light);
}
/* Figma 92:3060 アイキャッチ：aspect 1200/630 / 角丸なし / 下に gap-32 */
.column-article-eyecatch {
  width: 100%;
  aspect-ratio: 1200 / 630;
  margin: 0 0 32px;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  background: #2a2a2a;
}
.column-article-eyecatch img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
  margin: 0 !important;
  max-width: none !important;
}
@supports not (aspect-ratio: 1) {
  .column-article-eyecatch {
    height: 412px;             /* 785 × 630/1200 ≒ 412 */
  }
}

/* 記事本文：可読性重視のタイポグラフィ */
.column-article-body {
  /* Figma 92:3106: Noto Sans JP Regular 16px #c0c0c0 line-height 30.4 */
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 30.4px;
  color: #c0c0c0;
}
.column-article-body p {
  margin: 0 0 1.5em;
}
.column-article-body h2 {
  /* Figma 92:3105: Shippori Mincho Bold 22px white + 上に金色バー 30×4px (gap-16) */
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
  color: var(--white);
  margin: 2.5em 0 1em;
  padding: 0;
  border: none;
  position: relative;
}
.column-article-body h2::before {
  content: '';
  display: block;
  width: 30px;
  height: 4px;
  background: #d4b96b;
  margin-bottom: 16px;
}
.column-article-body h3 {
  /* H3 は Figma に明示なし、H2 の縮小版で類推：左に細めの金色バー */
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  color: var(--white);
  margin: 2em 0 0.8em;
  padding-left: 12px;
  border-left: 3px solid var(--gold);
}
.column-article-body h4 {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--white);
  margin: 1.5em 0 0.7em;
}
.column-article-body a {
  color: var(--gold);
  text-decoration: underline;
}
/* Figma 92:3107 記事内画像：w-full × h-300（PC785×300）
   figure ブロックを「アスペクト比固定の額」にして img を中で cover、
   WPのインライン style と衝突しないよう figure に強制適用 */
.column-article-body figure.wp-block-image {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 785 / 300;
  margin: 1.5em 0;
  overflow: hidden;
  position: relative;
  background: #2a2a2a;
  display: block;
}
.column-article-body figure.wp-block-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  position: absolute;
  inset: 0;
  margin: 0 !important;
  aspect-ratio: auto !important;       /* WPインラインの aspect-ratio をリセット */
  max-width: none !important;
}
.column-article-body figure.wp-block-image figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.6);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: #fff;
  text-align: center;
  line-height: 1.6;
  margin: 0;
}
/* figureに包まれていない素のimg（旧式エディタ用フォールバック） */
.column-article-body > img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5em 0;
}
/* aspect-ratio 非対応ブラウザ */
@supports not (aspect-ratio: 1) {
  .column-article-body figure.wp-block-image {
    height: 300px;
  }
}
.column-article-body ul,
.column-article-body ol {
  margin: 0 0 1.5em 1.5em;
  padding: 0;
}
.column-article-body li {
  margin-bottom: 0.5em;
}
.column-article-body blockquote {
  margin: 1.5em 0;
  padding: 16px 20px;
  background: #1a1a1a;
  border-left: 4px solid var(--gold);
  color: var(--gray-light);
  font-style: italic;
}
.column-article-body pre,
.column-article-body code {
  font-family: 'Monaco', 'Courier New', monospace;
  background: #0a0a0a;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.9em;
}
.column-article-body pre {
  padding: 16px;
  overflow-x: auto;
  margin: 1.5em 0;
}

.column-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 40px 0;
}
.column-article-tag {
  font-size: 12px;
  color: var(--gray-light);
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 5px 12px;
  border-radius: 999px;
  text-decoration: none;
}
.column-article-tag:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* 記事末尾CTA */
.column-article-cta {
  margin: 50px 0 40px;
  padding: 36px 28px;
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
  border: 1px solid rgba(212, 185, 107, 0.4);
  border-radius: 10px;
  text-align: center;
}

/* Figma 92:3114 リンクバナー：#1e1e1e h:120 + 左テキスト + 右ゴールドボタン */
.column-link-banner {
  background: #1e1e1e;
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 0 32px;
  margin: 40px 0;
  box-sizing: border-box;
}
.column-link-banner-text {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--white);
  margin: 0;
  line-height: 1.4;
}
.column-link-banner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(102.69deg, #d4b96b 1.67%, #bc8c00 100%);
  color: #0a0a0a;
  padding: 11.721px 32.233px;
  border-radius: 2.93px;
  text-decoration: none;
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 18.68px;
  letter-spacing: 0.7326px;
  min-width: 230px;
  box-sizing: border-box;
}

/* 区切り線（Figma 92:3126: 1px 線） */
.column-article-divider {
  border: none;
  border-top: 1px solid #2a2a2a;
  margin: 56px 0 24px;
}

/* 編集部カード（Figma 92:3127 h:60 左avatar+text / 右SNSシェア「でシェア」付き） */
.column-article-writer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0 0 56px;
}
.column-article-writer-info {
  display: flex;
  align-items: center;
  gap: 16px;
}
.column-article-writer-avatar {
  width: 60px;
  height: 60px;
  border-radius: 28px;
  overflow: hidden;
  background: #2a2a2a;
  flex-shrink: 0;
}
.column-article-writer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.column-article-writer-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 312px;
}
.column-article-writer-name {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--white);
  margin: 0;
}
.column-article-writer-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #c0c0c0;
  margin: 0;
}

/* SNSシェア（下：アイコン+「でシェア」テキスト） Figma 92:3133 gap-24 */
.column-article-share-bottom {
  display: flex;
  align-items: center;
  gap: 24px;
}
.share-bottom-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  text-decoration: none;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 13px;
  transition: opacity 0.2s;
}
.share-bottom-item:hover {
  opacity: 0.7;
}
.share-bottom-item svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.share-bottom-item.share-bottom-line svg {
  width: 18.672px;
  height: 17.79px;
}
.share-bottom-divider {
  width: 1px;
  height: 20px;
  background: #4a4a4a;
}

.column-article-cta-lead {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--gold);
  margin: 0 0 22px;
}
.column-article-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.column-article-cta-buttons a {
  flex: 1 1 auto;
  min-width: 140px;
  max-width: 240px;
}

/* btn-cta-tel for column page */
.btn-cta-tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 14px 20px;
  font-family: 'Unbounded', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s;
}
.btn-cta-tel:hover {
  background: var(--gold);
  color: var(--dark);
}

/* 関連記事 */
.column-related {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.column-related-title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--white);
  margin: 0 0 24px;
}
.column-related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.column-related-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.column-related-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: #0a0a0a;
  margin-bottom: 10px;
}
.column-related-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.column-related-name {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--white);
  margin: 0 0 4px;
}
.column-related-date {
  font-family: 'Unbounded', sans-serif;
  font-size: 11px;
  color: var(--gray);
}

/* ---------- サイドバー ---------- */
/* Figma 92:2699 PC sidebar: w=282, gap=32 between sections, label Shippori Bold 16px */
.column-sidebar {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 282px;
}
.sidebar-block {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;        /* Figma: label → divider → list 全部 gap-24 */
}
.sidebar-title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.32px;
  color: #d4b96b;
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
  position: relative;
}
.sidebar-title::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #d4b96b;
  margin-top: 24px;     /* Figma: gap-24 between label and divider */
}

/* CTA box（Figma 92:2699 PC: 280×120 box + 280×48 LINE button, gap-16 between） */
.sidebar-cta {
  background: transparent;
  padding: 0;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sidebar-cta::after {
  display: none;        /* Figma にはラベルの後の divider なし */
}
.sidebar-cta-box {
  background: #242424;
  border-radius: 4px;
  padding: 22px 25px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 280px;                 /* Figma 92:2858 */
  height: 120px;                /* Figma 92:2858 */
  box-sizing: border-box;
}
.sidebar-cta-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--gold);
  margin: 0;
  text-align: center;
}
.sidebar-cta-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(105.85deg, #d4b96b 1.67%, #bc8c00 100%);
  color: #0a0a0a;
  padding: 11.72px 32.23px;
  border-radius: 2.93px;
  text-decoration: none;
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.7326px;
  line-height: 18.68px;
  width: 100%;
  box-sizing: border-box;
}
.sidebar-cta-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #06c755;
  color: #fff;
  padding: 13px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  width: 280px;                 /* Figma 92:2864 */
  height: 48px;                 /* Figma 92:2864 */
  box-sizing: border-box;
}
.sidebar-cta-line-icon {
  width: 18.67px;
  height: 17.79px;
  flex-shrink: 0;
}

/* 検索 (Figma 92:2893：340×40, #4b4b4b, rounded 4px, search icon right) */
.search-form-label.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.search-form {
  position: relative;
  background: #4b4b4b;
  border-radius: 4px;
  height: 40px;
}
.search-form-input {
  width: 100%;
  height: 40px;
  padding: 0 44px 0 18px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 40px;
  box-sizing: border-box;
}
.search-form-input::placeholder {
  color: #c0c0c0;
}
.search-form-input:focus {
  outline: 1px solid var(--gold);
  outline-offset: -1px;
}
.search-form-submit {
  position: absolute;
  right: 19px;                  /* Figma: icon left:243 in box w:280 → right offset = 280-243-18 = 19 */
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: none;
  color: #c0c0c0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* カテゴリ一覧（Figma 92:2699: Noto Sans JP Regular 16px #bfbfbf gap-16 lh-16） */
.sidebar-cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sidebar-cat-list li {
  border-bottom: none;
}
.sidebar-cat-list a {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 0;
  color: #bfbfbf;
  text-decoration: none;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  transition: color 0.2s;
}
.sidebar-cat-list a:hover {
  color: var(--gold);
}
.sidebar-cat-count {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  color: #bfbfbf;
}

/* 人気記事（Figma 92:2699 POPULAR: 番号 Unbounded Bold 16px、1=金 2=#b0b0b0 3=#d4806b、タイトル Noto Sans JP Regular 14px lh-30.4 白 257px） */
.sidebar-popular .sidebar-post-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sidebar-popular .sidebar-post-item {
  border: none;
}
.sidebar-popular .sidebar-post-link {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}
.sidebar-popular .sidebar-post-rank {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 30.4px;        /* Figma 92:2847 leading-[30.4px] */
  flex-shrink: 0;
  color: #b0b0b0;             /* default = 2位以降の色 */
}
.sidebar-popular .sidebar-post-item:nth-child(1) .sidebar-post-rank {
  color: #d4b96b;
}
.sidebar-popular .sidebar-post-item:nth-child(3) .sidebar-post-rank {
  color: #d4806b;
}
.sidebar-popular .sidebar-post-thumb {
  display: none;
}
.sidebar-popular .sidebar-post-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 30.4px;
  color: var(--white);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sidebar-popular .sidebar-post-date {
  display: none;        /* Figma にはなし */
}

/* 記事リスト（人気・最新） */
.sidebar-post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-post-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar-post-item:last-child {
  border-bottom: none;
}
.sidebar-post-link {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  text-decoration: none;
  color: inherit;
  align-items: center;
}
.sidebar-post-thumb {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;
  background: #0a0a0a;
}
.sidebar-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sidebar-post-body {
  flex: 1;
  min-width: 0;
}
.sidebar-post-title {
  font-size: 12px;
  line-height: 1.5;
  color: var(--white);
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sidebar-post-date {
  font-family: 'Unbounded', sans-serif;
  font-size: 10px;
  color: var(--gray);
}

/* ---------- 空・404 ---------- */
.column-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--gray-light);
}
.column-empty p {
  margin: 0 0 16px;
}

/* 検索結果ページのメイン列内検索フォーム
   PC：サイドバーに検索があるので非表示
   SP：サイドバーが下に来るので main 列内に残す + パンくずから余白確保 */
.column-search-form-wrap {
  display: none;
}
@media (max-width: 980px) {
  .column-search-form-wrap {
    display: block;
    margin: 24px 0 30px;     /* breadcrumb と適切な間隔 */
    max-width: 480px;
  }
}

.error-404 {
  padding: 80px 24px 100px;
  text-align: center;
}
.error-404-inner {
  max-width: 720px;
  margin: 0 auto;
}
.error-404-num {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 120px;
  line-height: 1;
  color: var(--gold);
  margin: 0;
  text-shadow: 0 0 40px rgba(212, 185, 107, 0.3);
}
.error-404-title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--white);
  margin: 16px 0 24px;
}
.error-404-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: var(--gray-light);
  margin-bottom: 40px;
}
.error-404-search {
  max-width: 380px;
  margin: 0 auto 40px;
}
.error-404-links {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 60px;
}
.error-404-recent {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.error-404-recent-title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--white);
  margin: 0 0 20px;
}
.error-404-recent-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.error-404-recent-list a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.error-404-recent-list img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 8px;
}
.error-404-recent-list p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--white);
  margin: 0;
}

/* ---------- 目次 (TOC) ---------- */
/* Figma 92:3092 PC 目次：#242424 bg / padding left:32 top:29 / width 785
   title「目次」Noto Sans JP Bold 16px gold / items Noto Sans JP Regular 14px #bfbfbf gap-8 / 「1. xxx」
   critical.css の nav{display:flex} を無効化 */
.column-toc {
  display: block !important;
  background: #242424;
  border: none;
  border-radius: 0;
  padding: 29px 32px;
  margin: 0 0 48px;
  flex: none !important;
  justify-content: flex-start !important;
}
.column-toc-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  color: #d4b96b;
  margin: 0 0 16px;
  padding-bottom: 0;
  border-bottom: none;
}
.column-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc-counter;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.column-toc-item {
  position: relative;
  padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #bfbfbf;
}
.column-toc-item.column-toc-l2 {
  counter-increment: toc-counter;
}
.column-toc-item.column-toc-l2::before {
  content: counter(toc-counter) ". ";
  color: #bfbfbf;
  font-size: 14px;
  font-weight: 400;
}
.column-toc-item.column-toc-l3 {
  padding-left: 16px;
  font-size: 13px;
}
.column-toc-item.column-toc-l3::before {
  content: '– ';
  color: #bfbfbf;
}
.column-toc-item a {
  /* critical.css の nav a{ Cormorant Garamond 700 13px ls:2 text-shadow } を上書き */
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 400 !important;
  font-size: inherit !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  color: #bfbfbf;
  text-decoration: none;
}
.column-toc-item a:hover {
  color: #d4b96b;
  text-decoration: underline;
}

/* スムーススクロール用にh2/h3にスクロールマージン */
.column-article-body h2,
.column-article-body h3 {
  scroll-margin-top: 80px;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 980px) {
  .column-layout {
    grid-template-columns: 1fr;
    gap: 50px;
    padding: 0 24px 80px;       /* SP/タブレットは 24px 左右 */
  }
  .column-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .column-list.column-list-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .column-related-list,
  .error-404-recent-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  /* SP: sidebar 系を全要素 width:100%（中央配置） */
  .column-sidebar {
    width: 100%;
    max-width: 100%;
  }
  .sidebar-cta-box,
  .sidebar-cta-line {
    width: 100%;
  }

  .column-hero {
    padding: 60px 20px 40px;
  }
  .column-hero-title {
    font-size: 24px;
  }
  /* Figma 92:2893 から抽出：eyebrow=Shippori Mincho 600/13px/ls3.25/lh26,
     h1=26px/lh44.2, watermark=Cormorant 600/40px/lh64/rgba(192,192,192,0.3) */
  .column-hero-archive {
    padding: 20px 24px 0;       /* SP padding 24px (左右) */
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .column-hero-archive .column-hero-inner {
    min-height: 77px;            /* Figma h-[77px] */
    display: block;              /* SPは縦並びで上にeyebrow+h1、watermarkはabsolute */
    position: relative;
  }
  .column-hero-archive .column-hero-eyebrow {
    font-family: 'Shippori Mincho', serif !important;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 3.25px;
    line-height: 26px;
    gap: 16px;
    margin-bottom: 0;
    color: var(--gold);
  }
  .column-hero-archive .column-hero-eyebrow::before {
    width: 25px;
    background: var(--gold);
  }
  .column-hero-archive .column-hero-title {
    font-family: 'Shippori Mincho', serif;
    font-weight: 600;
    font-size: 26px;
    line-height: 44.2px;
    letter-spacing: 0;
    color: var(--white);
  }
  /* SP watermark：Figma 92:2920 完全準拠
     left:340 -translate-x-full = right:0 / top:39 -translate-y-1/2 = vertical center at y=39
     text-[40px] leading-64 color rgba(192,192,192,0.3) uppercase text-right */
  .column-hero-archive .column-hero-watermark {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 64px;
    letter-spacing: 0;
    color: rgba(192, 192, 192, 0.3);
    right: 0;
    top: 39px;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    text-align: right;
    text-transform: uppercase;
  }
  /* SP eyebrow+h1 は watermark より前面に（重なりを許容しつつh1視認性確保） */
  .column-hero-archive .column-hero-left {
    position: relative;
    z-index: 2;
  }

  .column-breadcrumb-wrap {
    padding: 14px 24px 0;       /* SP padding 24px */
  }
  /* SPでは上部breadcrumb非表示、下部のみ表示（Figma 92:3266） */
  .column-breadcrumb-top {
    display: none;
  }
  .column-breadcrumb-bottom {
    display: block;
    padding: 20px 0;            /* Figma 92:3266 py-[20px] */
  }
  .column-breadcrumb-wrap .breadcrumb {
    max-width: 100%;            /* SP は max-width 解除 */
  }
  /* SP も PC と同値（Figma で同じ 11px） */
  .column-list {
    grid-template-columns: 1fr;
    gap: 32px;          /* Figma 92:2893: 32px gap between cards on SP */
  }
  .column-list.column-list-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .column-toc {
    padding: 18px 18px 18px;
    margin-bottom: 28px;
  }
  .column-article-title {
    font-size: 24px;
    line-height: 36px;          /* 24×1.5 = SP用に行間タイトに（PC: 54.4px から縮小） */
    letter-spacing: 0;
  }
  .column-article-body {
    font-size: 15px;
    line-height: 1.85;
  }
  .column-article-body h2 {
    font-size: 19px;
  }
  .column-article-body h3 {
    font-size: 16px;
  }

  /* SP リンクバナー：text+button を縦スタック（横並びだと文字が1文字ずつ縦書きになる） */
  .column-link-banner {
    flex-direction: column;
    height: auto;
    padding: 24px 16px;
    gap: 16px;
  }
  .column-link-banner-text {
    text-align: center;
    font-size: 15px;
  }
  .column-link-banner-btn {
    min-width: 180px;
  }

  /* SP 編集部カード：avatar+text と share-bottom を縦スタック */
  .column-article-writer {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .column-article-writer-text {
    max-width: 255px;           /* Figma 92:3351 w-255 */
  }
  /* SP シェアボタン下部：折り返し許可 */
  .column-article-share-bottom {
    gap: 16px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .share-bottom-item {
    font-size: 12px;
  }
  .column-related-list,
  .error-404-recent-list {
    grid-template-columns: 1fr;
  }
  .error-404-num {
    font-size: 80px;
  }
  .column-article-cta-buttons {
    flex-direction: column;
  }
  .column-article-cta-buttons a {
    width: 100%;
    max-width: none;
  }
}