/* ===================================================
   インタビュー個別ページ — 本文スタイル
   セレクタ強度を最大化してグローバルCSSリセットに勝つ
=================================================== */

/* ===== レイアウト ===== */
body.single-post-type-interview main#single_interview #contents section,
main#single_interview #contents section {
  max-width: 1026px;
}
body.single-post-type-interview main#single_interview #contents section.header h1,
main#single_interview #contents section.header h1 {
  font-size: 28px !important;
  padding-bottom: 18.5px !important;
  border-bottom: 2px solid #DC2021 !important;
  line-height: 1.785 !important;
  margin-bottom: 24px !important;
}
main#single_interview #contents section.eyecatch {
  margin-bottom: 44px;
}
main#single_interview #contents section.eyecatch img {
  max-width: 850px;
}

/* ===== CONTACT（他ページ（single_type01 等）と共通のデザインに統一） ===== */
main#single_interview #contact {
  width: 100%;
}
main#single_interview #contact section {
  background: rgba(0, 0, 0, 0.85);
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(40px, 5.55556vw, 80px) 20px;
}
main#single_interview #contact section .contents {
  text-align: center;
}
main#single_interview #contact section .contents h2 {
  margin-bottom: clamp(20px, 2.77778vw, 40px);
  color: #fff;
}
main#single_interview #contact section .contents h2 span {
  color: #fff;
}
main#single_interview #contact section .contents > p {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(24px, 3.33333vw, 48px);
  width: clamp(360px, 50vw, 720px);
  color: #fff;
  text-align: left;
}
main#single_interview #contact section .contents > a {
  margin-left: auto;
  margin-right: auto;
}

/* ===== プロフィールボックス ===== */
.interview-profile {
  margin-bottom: 48px;
}
.interview-profile__inner {
  border: 2px solid #4D5173;
  border-radius: 4px;
  padding: 24px 32px;
  max-width: 1026px;
}
.interview-profile__label {
  font-size: 14px !important;
  font-weight: bold !important;
  color: #fff !important;
  background-color: #4D5173 !important;
  display: inline-block !important;
  padding: 4px 12px !important;
  margin-bottom: 16px !important;
  border-radius: 2px;
}
.interview-profile__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 !important;
}
.interview-profile__table th,
.interview-profile__table td {
  padding: 10px 16px !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  border-bottom: 1px solid #e0e0e0;
  text-align: left;
}
.interview-profile__table th {
  width: 180px;
  color: #4D5173 !important;
  font-weight: bold !important;
  white-space: nowrap;
}
.interview-profile__table a {
  color: #0E64A0 !important;
  word-break: break-all;
}
.interview-profile__table a:hover {
  opacity: 0.7;
}

/* ===== 本文エリア ===== */
main#single_interview #contents section.detail {
  max-width: 1026px !important;
  line-height: 1.9 !important;
  color: #333 !important;
}

/* ===== 段落 ===== */
main#single_interview #contents section.detail p,
main#single_interview #contents section.detail > p {
  font-size: 16px !important;
  line-height: 2 !important;
  margin-top: 0 !important;
  margin-bottom: 1.8em !important;
  color: #333 !important;
  padding: 0 !important;
  background: none !important;
}
main#single_interview #contents section.detail a {
  color: #0E64A0 !important;
  text-decoration: underline !important;
}
main#single_interview #contents section.detail a:hover {
  opacity: 0.7;
  color: #0E64A0 !important;
}

/* ===== 見出し h2 ===== */
main#single_interview #contents section.detail h2,
main#single_interview #contents section.detail > h2 {
  font-size: 22px !important;
  font-weight: bold !important;
  background-color: #F0F0F0 !important;
  padding: 14px 16px 14px 20px !important;
  margin-top: 56px !important;
  margin-bottom: 24px !important;
  line-height: 1.6 !important;
  position: relative !important;
  display: block !important;
  color: #000 !important;
  border: none !important;
  border-left: none !important;
}
main#single_interview #contents section.detail h2::before,
main#single_interview #contents section.detail > h2::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 6px !important;
  height: 100% !important;
  background-image: linear-gradient(to bottom, #DC2021 0%, #DC2021 50%, #0E64A0 50%, #0E64A0 100%) !important;
  background-color: transparent !important;
  border-radius: 2px 0 0 2px;
  display: block !important;
  aspect-ratio: unset !important;
  transform: none !important;
}
main#single_interview #contents section.detail h2::after,
main#single_interview #contents section.detail > h2::after {
  display: none !important;
}

/* ===== 見出し h3 ===== */
main#single_interview #contents section.detail h3,
main#single_interview #contents section.detail > h3 {
  font-size: 19px !important;
  font-weight: bold !important;
  display: block !important;
  padding: 0 0 10px 0 !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: 2px solid #0E64A0 !important;
  border-left: none !important;
  margin-top: 44px !important;
  margin-bottom: 20px !important;
  line-height: 1.6 !important;
  color: #000 !important;
  background: none !important;
}
main#single_interview #contents section.detail h3::before,
main#single_interview #contents section.detail > h3::before {
  display: none !important;
}

/* ===== 見出し h4 ===== */
main#single_interview #contents section.detail h4,
main#single_interview #contents section.detail > h4 {
  font-size: 17px !important;
  font-weight: bold !important;
  padding: 0 0 0 12px !important;
  border-left: 4px solid #DC2021 !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  margin-top: 36px !important;
  margin-bottom: 16px !important;
  line-height: 1.6 !important;
  color: #000 !important;
  background: none !important;
}

/* ===== リスト ul ===== */
main#single_interview #contents section.detail ul,
main#single_interview #contents section.detail > ul {
  list-style: none !important;
  margin: 0 0 1.8em 0 !important;
  padding: 0 !important;
  border: none !important;
}
main#single_interview #contents section.detail ul li,
main#single_interview #contents section.detail > ul li {
  font-size: 16px !important;
  line-height: 1.9 !important;
  margin-bottom: 0.6em !important;
  color: #333 !important;
  padding-left: 20px !important;
  position: relative !important;
}
main#single_interview #contents section.detail ul li::before,
main#single_interview #contents section.detail > ul li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.7em !important;
  width: 8px !important;
  height: 8px !important;
  background: #DC2021 !important;
  background-color: #DC2021 !important;
  background-image: none !important;
  border-radius: 50% !important;
  display: block !important;
  aspect-ratio: unset !important;
  transform: none !important;
}
main#single_interview #contents section.detail ul::after {
  display: none !important;
  content: none !important;
}

/* ===== リスト ol ===== */
main#single_interview #contents section.detail ol,
main#single_interview #contents section.detail > ol {
  list-style: decimal !important;
  margin: 0 0 1.8em 0 !important;
  padding-left: 28px !important;
  border: none !important;
}
main#single_interview #contents section.detail ol li {
  font-size: 16px !important;
  line-height: 1.9 !important;
  margin-bottom: 0.6em !important;
  color: #333 !important;
}

/* ===== 引用 blockquote ===== */
main#single_interview #contents section.detail blockquote {
  margin: 2em 0 !important;
  padding: 20px 24px !important;
  background-color: #f8f8f8 !important;
  border-left: 5px solid #4D5173 !important;
  border-radius: 0 4px 4px 0;
  font-size: 15px !important;
  line-height: 1.9 !important;
  color: #555 !important;
}
main#single_interview #contents section.detail blockquote p {
  margin-bottom: 0 !important;
}

/* ===== 画像 ===== */
main#single_interview #contents section.detail img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 2em auto !important;
  border-radius: 4px;
}

/* ===== テーブル ===== */
main#single_interview #contents section.detail table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 2em 0 !important;
  font-size: 15px !important;
}
main#single_interview #contents section.detail table th {
  background-color: #4D5173 !important;
  color: #fff !important;
  padding: 12px 16px !important;
  text-align: left !important;
  font-weight: bold !important;
  line-height: 1.6 !important;
}
main#single_interview #contents section.detail table td {
  padding: 12px 16px !important;
  border-bottom: 1px solid #e0e0e0 !important;
  line-height: 1.8 !important;
  vertical-align: top !important;
  color: #333 !important;
}
main#single_interview #contents section.detail table tr:nth-child(even) td {
  background-color: #fafafa !important;
}

/* ===== 強調 strong / em ===== */
main#single_interview #contents section.detail strong {
  font-weight: bold !important;
  background: linear-gradient(transparent 60%, #EBB5B7 60%) !important;
}
main#single_interview #contents section.detail em {
  font-style: italic !important;
  color: #4D5173 !important;
}

/* ===== 区切り線 ===== */
main#single_interview #contents section.detail hr {
  border: none !important;
  border-top: 2px dashed #ddd !important;
  margin: 3em 0 !important;
}

/* ===== Q&A ブロック ===== */
main#single_interview #contents section.detail .qa-block {
  margin: 2.4em 0 !important;
}
main#single_interview #contents section.detail .qa-q {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: #DC2021 !important;
  line-height: 1.8 !important;
  padding-left: 0 !important;
}
main#single_interview #contents section.detail .qa-q::before {
  content: 'Q' !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  width: 32px !important;
  height: 32px !important;
  background-color: #DC2021 !important;
  background-image: none !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: bold !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  aspect-ratio: unset !important;
  transform: none !important;
  position: static !important;
  top: unset !important;
  left: unset !important;
}
main#single_interview #contents section.detail .qa-a {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
  color: #333 !important;
  padding-left: 0 !important;
}
main#single_interview #contents section.detail .qa-a::before {
  content: 'A' !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  width: 32px !important;
  height: 32px !important;
  background-color: #0E64A0 !important;
  background-image: none !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: bold !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  aspect-ratio: unset !important;
  transform: none !important;
  position: static !important;
  top: unset !important;
  left: unset !important;
}

/* ===== レスポンシブ ===== */
@media screen and (max-width: 768px) {
  main#single_interview #contents section.header h1 {
    font-size: 22px !important;
    line-height: 1.5 !important;
  }
  main#single_interview #contents section.detail p {
    font-size: 15px !important;
    line-height: 1.9 !important;
    margin-bottom: 1.5em !important;
  }
  main#single_interview #contents section.detail h2 {
    font-size: 18px !important;
    padding: 12px 14px 12px 18px !important;
    margin-top: 40px !important;
  }
  main#single_interview #contents section.detail h3 {
    font-size: 16px !important;
    margin-top: 32px !important;
  }
  main#single_interview #contents section.detail h4 {
    font-size: 15px !important;
    margin-top: 28px !important;
  }
  main#single_interview #contents section.detail ul li,
  main#single_interview #contents section.detail ol li {
    font-size: 15px !important;
  }
  main#single_interview #contents section.detail table {
    font-size: 13px !important;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  main#single_interview #contents section.detail blockquote {
    padding: 14px 16px !important;
    font-size: 14px !important;
  }
  .interview-profile__inner {
    padding: 16px 20px;
  }
  .interview-profile__table th {
    width: 120px;
    font-size: 13px !important;
  }
  .interview-profile__table td {
    font-size: 13px !important;
  }
  main#single_interview #contact section {
    padding: 64px 24px 80px;
  }
  main#single_interview #contact section .contents h2 {
    margin-bottom: 24px;
  }
  main#single_interview #contact section .contents > p {
    width: 100%;
    margin-bottom: 48px;
  }
  main#single_interview #contact section .contents > a {
    max-width: 327px;
  }
}

/* ==========================================================================
   インタビュー個別ページ — ページ枠組みの補完
   #title / #back / #breadcrumbs と各 section の余白が未指定で、
   共通の `main article section` の上下パディング（上 64px / 下 120px）が
   そのまま乗り、中央寄せも効かず左端の固定 CTA バー（.follow_btn / 52px）と
   重なっていたため、single_type01（UPDATES 等）と同じ組み立てに揃える。
   ========================================================================== */

/* 共通 section の上下パディングを解除し、余白はブロックごとの margin で作る
   （#contact は自前の padding を持つため影響しない） */
main#single_interview article section {
  padding-block: 0;
}

/* ----- ページ見出し（INTERVIEW） ----- */
main#single_interview #title {
  margin-bottom: clamp(32px, 4.44444vw, 64px);
}
main#single_interview #title section {
  max-width: 1200px;
  padding-top: clamp(100px, 9.86111vw, 142px);
}

/* ----- 本文ブロック ----- */
main#single_interview #contents {
  margin-bottom: clamp(32px, 4.44444vw, 64px);
}
main#single_interview #contents section.header {
  margin-bottom: clamp(24px, 3.33333vw, 48px);
}
/* アイキャッチ未設定時に空の余白を残さない */
main#single_interview #contents section.eyecatch:not(:has(img)) {
  margin-bottom: 0;
}
/* 長い英数字・URL がカラムからはみ出さないように */
main#single_interview #contents section.detail {
  overflow-wrap: anywhere;
}

/* ----- 一覧に戻る ----- */
main#single_interview #back {
  margin-bottom: clamp(60px, 8.33333vw, 120px);
}
main#single_interview #back section {
  max-width: 596px;
}
main#single_interview #back section .link {
  display: flex;
  justify-content: center;
  align-items: center;
}
main#single_interview #back section .link .back {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.6em;
  font-weight: 500;
  letter-spacing: 0.04em;
}
main#single_interview #back section .link .back::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: block;
  width: 16px;
  aspect-ratio: 1 / 1;
  background: url("../image/icon/page_arrow.svg") no-repeat center / contain;
}

/* ----- パンくず ----- */
main#single_interview #breadcrumbs section {
  max-width: 1200px;
}

/* ----- SP ----- */
@media screen and (max-width: 768px) {
  main#single_interview #title section {
    padding-top: 100px;
  }
  main#single_interview #back {
    margin-bottom: 80px;
  }
}

/* ----- プロフィールボックス（本文の下に配置）の前後余白 ----- */
main#single_interview #contents section.interview-profile {
  margin-top: clamp(24px, 3.33333vw, 48px);
  margin-bottom: 0;
}

/* ==========================================================================
   装飾背景（global_bg）の上に直接テキストが乗ると読みにくいため、
   本文パーツに薄い白の下地を敷く
   ========================================================================== */
main#single_interview #contents section.header,
main#single_interview #contents section.detail {
  background: rgba(255, 255, 255, 0.82);
  padding: 40px;
}
main#single_interview #contents section.eyecatch:has(img) {
  background: rgba(255, 255, 255, 0.82);
  padding: 40px;
}
.interview-profile__inner {
  background: rgba(255, 255, 255, 0.82);
}

@media screen and (max-width: 768px) {
  main#single_interview #contents section.header,
  main#single_interview #contents section.detail,
  main#single_interview #contents section.eyecatch:has(img) {
    padding: 24px 20px;
  }
}

/* ==========================================================================
   記事下 CTA
   ========================================================================== */
main#single_interview #contents section.interview-cta {
  background: rgba(0, 0, 0, 0.85);
  margin-top: clamp(32px, 4.44444vw, 64px);
  padding: 40px;
}
main#single_interview #contents section.interview-cta .interview-cta__lead {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6em;
  letter-spacing: 0.04em;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid #DC2020;
}
main#single_interview #contents section.interview-cta .interview-cta__text {
  color: #fff;
  font-size: 15px;
  line-height: 1.9em;
  margin: 0 0 28px;
}
main#single_interview #contents section.interview-cta .interview-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 360px;
  height: 64px;
  margin-inline: auto;
  background: #fff;
  color: #000;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: opacity 0.3s;
}
main#single_interview #contents section.interview-cta .interview-cta__btn:hover {
  opacity: 0.7;
}

@media screen and (max-width: 768px) {
  main#single_interview #contents section.interview-cta {
    padding: 24px 20px;
  }
  main#single_interview #contents section.interview-cta .interview-cta__lead {
    font-size: 17px;
  }
  main#single_interview #contents section.interview-cta .interview-cta__text {
    font-size: 14px;
  }
  main#single_interview #contents section.interview-cta .interview-cta__btn {
    height: 56px;
    font-size: 15px;
  }
}

/* ==========================================================================
   記事ヘッダーの業種タグと日付
   .category_label はテーマ側に指定が無く、タグ同士・日付との余白も
   無かったため、single_type01 と同じ「バッジ＋日付」の並びにそろえる
   ========================================================================== */
main#single_interview #contents section.header .info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 20px;
}
main#single_interview #contents section.header .info .category_label {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  background: #4D5173;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
}
main#single_interview #contents section.header .info .data {
  font-family: din-alternate, sans-serif;
  font-size: 14px;
  color: #65604E;
  margin: 0;
}

@media screen and (max-width: 768px) {
  main#single_interview #contents section.header .info {
    gap: 8px 10px;
    margin-top: 16px;
  }
  main#single_interview #contents section.header .info .category_label {
    height: 24px;
    padding: 0 10px;
    font-size: 12px;
  }
}

/* ==========================================================================
   写真（アイキャッチ・本文中）
   img に width / height 属性が入るため、height: auto を指定しないと
   縦横比が崩れる（850px 幅に対して高さが元のままになる）
   ========================================================================== */
main#single_interview #contents section.eyecatch img {
  /* 850px 固定だとサイドナビ導入後の本文カラム（804px）をはみ出すため、
     カラム幅を上限にする */
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/* 本文カラム内の画像は、いかなる場合もカラム幅を超えない */
main#single_interview #contents .column-layout__main img {
  max-width: 100%;
  height: auto;
}

main#single_interview #contents section.detail figure.interview-photo {
  margin: 2.4em 0;
}
main#single_interview #contents section.detail figure.interview-photo img {
  width: 100%;
  height: auto;
  display: block;
}
main#single_interview #contents section.detail figure.interview-photo figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7em;
  color: #65604E;
}

/* ==========================================================================
   プロフィール枠のロゴ（カスタムフィールド interview_logo_id）
   ========================================================================== */
.interview-profile__logo {
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #E5E5E5;
}
/* 本文カラム内の画像共通ルール（max-width:100%）より後に、
   同等以上の詳細度で上書きする */
main#single_interview #contents .interview-profile__logo img {
  display: block;
  width: auto;
  max-width: 240px;
  max-height: 72px;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

@media screen and (max-width: 768px) {
  .interview-profile__logo {
    margin-bottom: 16px;
    padding-bottom: 16px;
  }
  main#single_interview #contents .interview-profile__logo img {
    max-width: 180px;
    max-height: 56px;
  }
}