@charset "UTF-8";

/* ===================================
    06｜社員インタビュー詳細（interview/<記事番号>/index.html）
    Figma: PC 3770-65871 / SP 3770-65765
    ★ このCSSは 01〜04 の全記事で共有する。
      記事ごとに変わるのは HTML の中身（氏名・肩書き・タグ名・本文・画像パス）だけ。
      記事ごとの出し分けクラス（.ivdHead--01 など）は作らないこと。
    ・赤い地色の上に白い角丸パネル1枚（KNOW / 人を知る一覧 / クロストーク詳細と同じ）
    ・Q&A の本数・セクションの本数は記事ごとに違ってよい（縦の gap で組んでいる）
=================================== */
.main--interview-detail {
  padding-top: var(--header-h);
  background: var(--color-main);
  overflow-x: clip;
}

.ivdPanel {
  width: 138rem;
  max-width: calc(100% - 6rem);
  margin-inline: auto;
  padding-bottom: 15rem;
  background: #fff;
  border-radius: 5rem;
  overflow: hidden;
}

/* ===================================
    記事タイトル（タグ / 見出し / 氏名・肩書き）
=================================== */
.ivdHead {
  padding: 10rem 25rem 5.4rem;
}

.ivdHead__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* 一覧の絞り込みタブと同じ表記にする（キャリア / 高卒・新卒 / 社員登用 / カムバック） */
.ivdHead__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.1rem;
  border: 0.05rem solid rgba(33, 33, 33, 0.18);
  border-radius: 999px;
  background: var(--color-main);
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.45;
  color: #fff;
}

.ivdHead__title {
  margin-top: 2rem;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 1.472;
  color: var(--color-text);
}

.ivdHead__person {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
  color: var(--color-text);
}

.ivdHead__name {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.45;
}

.ivdHead__role {
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.45;
}

/* パネル幅いっぱいの人物写真 */
.ivdHero {
  display: block;
  width: 100%;
  height: 62.8rem;
  object-fit: cover;
}

/* ===================================
    リード
=================================== */
.ivdLead {
  width: 88rem;
  margin: 7.5rem auto 0;
}

.ivdLead p {
  font-weight: 500; /* リードは Medium（Figma PC/SP とも。Q&A の回答・プロフィールは Regular） */
  font-size: 1.6rem;
  line-height: 2.1875;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

/* 段落のあいだは1行ぶん空ける（Figma の段落間隔 35px） */
.ivdLead p + p {
  margin-top: 3.5rem;
}

/* ===================================
    話し手プロフィール（グレー枠の中に白いカード）
=================================== */
.ivdProfile {
  width: 88rem;
  margin: 7.5rem auto 0;
  padding: 1.9rem;
  background: var(--color-gray);
  border-radius: 4rem;
}

.ivdProfile__inner {
  display: flex;
  align-items: center;
  gap: 3.7rem;
  padding: 4rem;
  background: #fff;
  border-radius: 2rem;
}

.ivdProfile__face {
  flex-shrink: 0;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  object-fit: cover;
}

.ivdProfile__body {
  flex: 1;
  min-width: 0;
  color: var(--color-text);
}

.ivdProfile__name {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.75;
  letter-spacing: 0.02em;
}

.ivdProfile__role {
  margin-top: 0.2rem;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.8125;
  letter-spacing: 0.02em;
}

.ivdProfile__text {
  font-weight: 400; /* 本文は Regular（太字は <strong> 側で 700） */
  margin-top: 1rem;
  font-size: 1.6rem;
  line-height: 2.1875;
  letter-spacing: 0.02em;
}

/* 注釈（Figma FIN 4183-36855：12px・Regular・行 35px。色は親の --color-text） */
.ivdProfile__note {
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 2.917;
}

/* ===================================
    本編（小見出し + 写真 + 質問&回答）
    セクションの数・1セクション内の Q&A の数は記事ごとに変わってよい
=================================== */
.ivdSecs {
  display: flex;
  flex-direction: column;
  gap: 15rem;
  width: 112rem;
  margin: 13rem auto 0;
}

.ivdSec {
  width: 88rem;
  margin-inline: auto;
}

.ivdSec__title {
  position: relative;
  padding-left: 3.4rem;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1.615;
  color: var(--color-text);
}

/* 見出し左の赤い縦棒 */
.ivdSec__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1.35rem;
  background: var(--color-main);
}

.ivdSec__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 880 / 505;
  margin-top: 4rem;
  object-fit: cover;
  border-radius: 3rem;
}

/* 写真の下の注釈（※実際の業務中は〜） */
.ivdSec__caption {
  margin-top: 0.8rem;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.75;
  color: #757575;
}

.ivdSec__qas {
  display: flex;
  flex-direction: column;
  gap: 12rem;
  margin-top: 6rem;
}

/* 質問（——ではじまる聞き手の文） */
.ivdQa__q {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 2.059;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

/* 回答。強調は <strong>（Figma の太字部分） */
.ivdQa__a {
  font-weight: 400; /* 本文は Regular（太字は <strong> 側で 700） */
  margin-top: 4.5rem;
  font-size: 1.7rem;
  line-height: 2.059;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

/* 段落のあいだは1行ぶん空ける（Figma の段落間隔 35px） */
.ivdQa__a p + p {
  margin-top: 3.5rem;
}

.ivdQa__a strong {
  font-family: var(--font-sub);
  font-weight: 700;
}

/* ===================================
    OTHER INTERVIEW（他の記事への導線）
    ※ SP の Figma には無いが、記事間の回遊が無くなるため PC と同じ内容を残している
=================================== */
.ivdOther {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 112rem;
  margin: 15rem auto 0;
}

.ivdOther .sec-title {
  align-self: flex-start;
}

/* カード列はパネルの右端まで流す（Swiper・freeMode） */
.ivdOther__list {
  align-self: stretch;
  margin: 5.4rem -13rem 0;
  padding-inline: 13rem;
  overflow: hidden;
}

.ivdOther__list .card-interview {
  flex-shrink: 0;
  width: 22.4rem;
}

/* ===================================
    インタビューカード（縦長サムネ + 見出し + 氏名 + 所属）
    幅は使う側で指定する
=================================== */
.card-interview__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.93rem;
  color: var(--color-text);
}

.card-interview__img {
  width: 100%;
  height: auto;
  aspect-ratio: 250 / 286;
  object-fit: cover;
  border-radius: 2.19rem;
}

.card-interview__title {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.5;
}

.card-interview__name {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
}

.card-interview__role {
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 1.24rem;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.8);
}

/* ===================================
    Tablet（751〜1024px）
    PC のレイアウトのまま、左右の余白だけ詰める
=================================== */
@media screen and (max-width: 1024px) {
  .ivdPanel {
    width: auto;
    max-width: none;
    margin-inline: 3rem;
    padding-bottom: 10rem;
  }

  .ivdHead {
    padding: 7rem 5rem 4rem;
  }

  .ivdHero {
    height: auto;
    aspect-ratio: 1380 / 628;
  }

  .ivdLead,
  .ivdProfile,
  .ivdSecs,
  .ivdSec,
  .ivdOther {
    width: auto;
    margin-inline: 5rem;
  }

  .ivdSec {
    margin-inline: 0;
  }

  .ivdLead {
    margin-top: 8rem;
  }

  .ivdProfile {
    margin-top: 6rem;
    padding: 1.6rem;
  }

  .ivdProfile__inner {
    gap: 3rem;
    padding: 3rem;
  }

  .ivdProfile__face {
    width: 16rem;
    height: 16rem;
  }

  .ivdSecs {
    gap: 12rem;
    margin-top: 8rem;
  }

  .ivdOther {
    margin-top: 10rem;
  }

  .ivdOther__list {
    margin-inline: -5rem;
    padding-inline: 5rem;
  }
}

/* ===================================
    SP（〜750px）Figma 3770-65765
    ※ 本文は PC と同じ内容。レイアウトだけ SP デザインに合わせる
=================================== */
@media screen and (max-width: 750px) {
  .main--interview-detail {
    padding-top: calc(var(--header-h) + 1.6rem);
  }

  .ivdPanel {
    margin-inline: 0;
    padding: 0 1rem;
    border-radius: 3rem;
  }

  /* ---- 記事タイトル ---- */
  .ivdHead {
    padding: 6.3rem 2rem 5.5rem;
  }

  .ivdHead__title {
    margin-top: 1.6rem;
    font-size: 2.2rem;
    line-height: 1.545;
  }

  .ivdHead__person {
    align-items: baseline;
    gap: 0.4rem;
    margin-top: 1.6rem;
  }

  .ivdHead__name {
    font-size: 1.6rem;
  }

  .ivdHead__role {
    font-size: 1.2rem;
  }

  /* SP もパネル幅いっぱい・角丸なし（Figma 3770-65782） */
  .ivdHero {
    aspect-ratio: 370 / 260;
  }

  /* ---- リード ---- */
  .ivdLead {
    width: auto;
    margin: 3.2rem 0 0;
    padding-inline: 2rem;
  }

  .ivdLead p {
    font-size: 1.4rem;
    line-height: 1.714;
  }

  .ivdLead p + p {
    margin-top: 2.4rem;
  }

  /* ---- プロフィール（SP は縦積み・名前と肩書きは中央寄せ） ---- */
  .ivdProfile {
    width: auto;
    margin: 4rem 2rem 0;
    padding: 1rem;
    border-radius: 2rem;
  }

  .ivdProfile__inner {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 2.8rem 1.6rem;
    border-radius: 1.6rem;
  }

  .ivdProfile__face {
    width: 14.6rem;
    height: 14.6rem;
  }

  .ivdProfile__body {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .ivdProfile__name {
    font-size: 1.8rem;
    line-height: 1.556;
    text-align: center;
  }

  .ivdProfile__role {
    margin-top: 0.4rem;
    font-size: 1.4rem;
    line-height: 1.714;
    text-align: center;
    /* 「エリアマネージャ／ー」のように長音・小書きかなだけが行頭に落ちないようにする（Figma は「エリアマネー／ジャー」） */
    line-break: strict;
  }

  .ivdProfile__text {
    margin-top: 1.4rem;
    font-size: 1.4rem;
    line-height: 1.929;
  }

  /* ---- 本編 ---- */
  .ivdSecs {
    gap: 12rem;
    width: auto;
    margin: 5.6rem 0 0;
    padding-inline: 2rem;
  }

  .ivdSec {
    width: auto;
  }

  .ivdSec__title {
    padding-left: 2.1rem;
    font-size: 1.6rem;
    line-height: 1.625;
  }

  .ivdSec__title::before {
    width: 0.7rem;
  }

  .ivdSec__img {
    aspect-ratio: 330 / 189;
    margin-top: 2rem;
    border-radius: 1.2rem;
  }

  .ivdSec__caption {
    margin-top: 0.5rem;
    font-size: 1.1rem;
    line-height: 1.909;
  }

  .ivdSec__qas {
    gap: 9rem;
    margin-top: 3.2rem;
  }

  .ivdQa__q {
    font-size: 1.5rem;
    line-height: 1.8;
  }

  .ivdQa__a {
    margin-top: 3.5rem;
    font-size: 1.4rem;
    line-height: 1.929;
  }

  .ivdQa__a p + p {
    margin-top: 2.7rem;
  }

  /* ---- OTHER INTERVIEW（Swiper は破棄済み。素の縦積みに戻る） ---- */
  .ivdOther {
    width: auto;
    margin: 6rem 0 0;
    padding: 0 2rem 6rem;
  }

  /* 「OTHER INTERVIEW」は英字が長く、既定サイズだと SP でははみ出す */
  .ivdOther .sec-title__en {
    font-size: 2.8rem;
  }

  .ivdOther__list {
    margin: 2.8rem 0 0;
    padding-inline: 0;
    overflow: visible;
  }

  /* 縦長サムネのカードなので、SP は一覧ページと同じ2カラムに並べる */
  .ivdOther__list .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1.6rem;
    row-gap: 3.2rem;
  }

  .ivdOther__list .card-interview {
    width: auto;
  }

  .card-interview__img {
    aspect-ratio: 157 / 179;
    border-radius: 1.4rem;
  }

  .card-interview__title {
    font-size: 1.4rem;
    line-height: 1.643;
  }

  .card-interview__name {
    font-size: 1.3rem;
  }

  .card-interview__role {
    font-size: 1.1rem;
  }
}