/* ========== Article Hero ========== */
  .article-hero {
    padding: 50px 20px 30px;
  }
  .article-hero__head {
    margin-bottom: 22px;
  }
  .article-hero__name {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 22px;
    color: var(--heading);
    letter-spacing: 0.05em;
    line-height: 1.5;
    margin: 0;
  }
  .article-hero__meta {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 13px;
    color: var(--gold);
    letter-spacing: 0.05em;
    margin-top: 8px;
  }
  .article-hero__image {
    position: relative;
    width: 100%;
    aspect-ratio: 335 / 220;
    background: var(--gray-400);
    margin-bottom: 22px;
  }
  .article-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ========== Article Body ========== */
  .article-body {
    padding: 0 20px 60px;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.95;
    color: var(--heading);
    letter-spacing: 0.03em;
  }
  .article-body p { margin: 0 0 1em; }
  .article-body h2,
  .article-body h3,
  .article-body h4 {
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--heading);
    letter-spacing: 0.03em;
    margin: 1.8em 0 0.6em;
  }
  .article-body h2 { font-size: 18px; color: var(--gold); }
  .article-body h3 { font-size: 16px; }
  .article-body h4 { font-size: 14px; }
  .article-body img {
    width: 100%;
    height: auto;
    display: block;
    margin: 1em 0;
  }
  .article-body ul,
  .article-body ol {
    padding-left: 1.4em;
    margin: 0.6em 0 1em;
  }
  .article-body li + li { margin-top: 4px; }
  .article-body blockquote {
    margin: 1.5em 0;
    padding: 0 1em;
    border-left: 3px solid var(--gold);
    font-style: italic;
    color: var(--heading);
  }

/* ==========================================================================
   Crosstalk 個別ページ フォーマット（本文 the_content に貼る HTML 用 / .ct-*）
   デザイン: Talk ラベル → 2行タイトル → ヒーロー画像 → NAME×NAME クロス →
            イントロ →【画像+番号見出し+小見出し+会話×2】×3〜4 → 末尾画像
   ========================================================================== */
.ct {
  padding: 48px 20px 64px;
  font-family: var(--font-sans);
  color: var(--heading);
}
.ct > *:first-child { margin-top: 0; }

/* Talk ラベル（書体は archive-crosstalk の .talk-card__label に合わせる） */
.ct-label {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--gold);
  letter-spacing: 0.06em;
  line-height: 1;
  margin: 0 0 12px;
}

/* 2行タイトル */
.ct-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--heading);
  margin: 0 0 26px;
}

/* 画像（ヒーロー / ブロック / 末尾） */
.ct-image {
  position: relative;
  margin: 0;
}
.ct-image img {
  width: 100%;
  height: auto;
  display: block;
}
/* 1枚目（ヒーロー）画像のみ 430:275 にトリミング＋横幅100%（.ct の左右padding 20px を打ち消し全幅）。
   .ct 直下の最初の .ct-image を自動指定。効かない場合は記事側で
   その画像要素に .ct-image--hero を付与しても同じ効果。 */
.ct > .ct-image:first-of-type,
.ct-image--hero {
  aspect-ratio: 430 / 275;
  margin-left: -20px;
  margin-right: -20px;
}
.ct > .ct-image:first-of-type img,
.ct-image--hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* NAME × NAME クロス */
.ct-cross {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 28px 0 24px;
}
.ct-cross__person {
  flex: 1 1 0;
  text-align: center;
}
.ct-cross__name {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: #bba171;
  margin: 0 0 8px;
}
.ct-cross__year,
.ct-cross__role {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin: 0;
}
.ct-cross__x {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0 4px;
  font-size: 0;          /* 元の✕グリフを隠し、CSSで細い線×を描画 */
  color: transparent;
}
.ct-cross__x::before,
.ct-cross__x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 1.5px;         /* ←線の太さ（細さ）。1px などに調整可 */
  background: var(--gold);
}
.ct-cross__x::before { transform: translate(-50%, -50%) rotate(45deg); }
.ct-cross__x::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* イントロ文 */
.ct-intro {
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: 0.04em;
  margin: 0;
}

/* 本文ブロック（繰り返し） */
.ct-block { margin-top: 56px; }
.ct-block .ct-image { margin-bottom: 28px; }

/* 番号見出し（金） */
.ct-block__heading {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--gold);
  margin: 0 0 24px;
}
/* 見出し冒頭の番号（例: 01.）だけに当てる。記事側で番号をこのspanで囲む */
.ct-block__heading-num {
  font-family: var(--font-serif);
}

/* 両側に線の入った小見出し */
.ct-block__subheading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--heading);
  margin: 0 0 28px;
}
.ct-block__subheading::before,
.ct-block__subheading::after {
  content: "";
  flex: 0 0 28px;
  height: 1px;
  background: var(--heading);
}

/* 会話（丸アバター + テキスト） */
.ct-talk {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 26px;
}
.ct-talk:last-child { margin-bottom: 0; }
.ct-talk__avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--gray-400);
}
.ct-talk__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ct-talk__text {
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.03em;
  margin: 0;
}

/* 末尾画像 */
.ct-end { margin-top: 48px; }

/* ==========================================================================
   最下部: 他のクロストーク記事への導線（カード: 画像背景 + TALK n + タイトル + View more）
   ========================================================================== */
.ct-others {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 8px 20px 60px;
}
.ct-other-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  aspect-ratio: 335 / 180;
  background-color: #7c7c7c;
  background-size: cover;
  background-position: center;
  padding: 24px;
  text-decoration: none;
  overflow: hidden;
}
/* 画像の上に文字を載せるための暗幕 */
.ct-other-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(40, 40, 46, 0.55);
}
/* ラベル「Talk」（書体は記事中の .ct-label と同じセリフ体に合わせる） */
.ct-other-card__label {
  position: relative;
  z-index: 1;
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin-bottom: 8px;
}
.ct-other-card__title {
  position: relative;
  z-index: 1;
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--white);
}
/* View more（トップページの .interview__more / .job-cat__more と同スタイル。バナー右下に配置） */
.ct-other-card__more {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 20px;
  border: 2px solid var(--gold);
  border-radius: 999px;
  background: var(--white);
  color: var(--gold);
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.1em;
}
.ct-other-card__more::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
  transform: rotate(45deg);
}
/* ==========================================================================
   ABOUT US リンクバナー（footer 直前 / ゴリラクリニックについて知る → /culture/）
   ========================================================================== */
.about-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - 40px);
  aspect-ratio: 335 / 189;
  margin: 80px auto 0;
  background-color: #7c7c7c;
  /* CULTURE バナー背景 title_culture.png ＋ 文字視認性確保の暗幕 */
  background-image:
    linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
    url(../images/title_culture.png);
  background-size: cover;
  background-position: center;
  box-shadow: 0 20px 14px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  text-align: center;
}
.about-link__en {
  font-family: var(--font-serif);
  font-weight: 200;
  font-size: 16px;
  color: var(--gold);
  letter-spacing: 0.1em;
  line-height: 1;
}
.about-link__ja {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--white);
  letter-spacing: 0.1em;
  line-height: 1.4;
}