@charset "UTF-8";

/* ===================================
    07｜クロストーク詳細（interview/talk/index.html）
    Figma FIN: PC 3770-62614 / SP 3770-62937
    ・赤い地色の上に白い角丸パネル1枚（KNOW / 人を知る一覧と同じ）
    ・SP のテキストは PC と同じ内容を使い、レイアウトだけ SP デザインに寄せている
=================================== */
.main--talk {
  padding-top: var(--header-h);
  background: var(--color-main);
  overflow-x: clip;
}

.tkPanel {
  width: 138rem;
  max-width: calc(100% - 6rem);
  margin-inline: auto;
  padding-bottom: 15rem;
  background: #fff;
  margin-top: 4rem; /* Figma FIN 3770-62614：パネル上端 y=120 */
  border-radius: 5rem;
  overflow: hidden;
}

/* ===================================
    記事タイトル
=================================== */
.tkHead {
  padding: 10rem 14.8rem 6rem;
}

.tkHead__logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tkHead__logo-en {
  width: 14.209rem;
  height: auto;
  margin-left: 5.095rem;
}

.tkHead__logo-main {
  width: 24.4rem;
  height: auto;
  margin-top: 0.869rem;
}

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

.tkHead__names {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 6rem;
  margin-top: 3rem;
}

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

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

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

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

/* ===================================
    リード
=================================== */
.tkLead {
  width: 88rem;
  margin: 7.5rem auto 0; /* Figma FIN：人物写真の下 75px（パネル内の各ブロック間と同じ） */
}

.tkLead p {
  font-weight: 500; /* クロストークの本文は Medium（プロフィール文だけ Regular） */
  font-size: 1.6rem;
  line-height: 2.1875;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

/* 段落のあいだは1行ぶん空ける（Figma PC/SP とも4段落を空行で区切る） */
.tkLead p + p {
  margin-top: 3.5rem;
}

/* ===================================
    話し手プロフィール
=================================== */
.tkProfiles {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  width: 88rem;
  margin: 7.5rem auto 0;
}

/* Figma FIN 3770-62614：灰色の枠 19px・白パネル 40px・写真 220px・写真と文字の間 37px */
.tkProfile {
  padding: 1.9rem;
  background: var(--color-gray);
  border-radius: 4rem;
}

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

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

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

.tkProfile__tag {
  /* 師匠／弟子（Figma FIN 3770-62624：赤い細枠のピル・高さ 28px・名前との間 10px） */
  display: inline-flex;
  align-items: center;
  height: 2.8rem;
  margin-bottom: 1rem;
  padding: 0 1.5rem;
  border-radius: 5rem;
  box-shadow: inset 0 0 0 0.1rem var(--color-main);
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-main);
}

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

.tkProfile__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;
}

.tkProfile__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） */
.tkProfile__note {
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 2.917;
}

/* ===================================
    テーマ別クロストーク
=================================== */
.tkQs {
  display: flex;
  flex-direction: column;
  gap: 10rem;
  width: 112rem;
  margin: 7.5rem auto 0;
}

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

.tkQ__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);
}

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

/* THEME 01 の表記は SP だけ */
.tkQ__no {
  display: none;
}

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

.tkQ__lead {
  margin-top: 4rem;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 2.059;
  letter-spacing: 0.02em;
  color: var(--color-main);
}

.tkQ__talks {
  display: flex;
  flex-direction: column;
  gap: 6.9rem;
  margin-top: 4rem;
}

/* ---- 発言（師匠は左、弟子は右） ---- */
.tkSay {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

.tkSay--apprentice {
  justify-content: flex-end;
}

.tkSay__person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.476rem;
  flex-shrink: 0;
}

.tkSay__face {
  width: 6.8rem;
  height: 6.8rem;
  border-radius: 50%;
  object-fit: cover;
}

.tkSay__name {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.43;
  letter-spacing: 0.04em;
  color: var(--color-text);
  white-space: nowrap;
}

.tkSay__bubble {
  font-weight: 500; /* クロストークの本文は Medium（プロフィール文だけ Regular） */
  padding: 2.6rem 3.2rem;
  background: var(--color-gray);
  border-radius: 1.6rem;
  font-size: 1.5rem;
  line-height: 2;
  color: #212121;
}

/* ===================================
    OTHER CROSS TALK
=================================== */
.tkOther {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 112rem;
  margin-inline: auto;
}

.tkOther__related {
  align-self: stretch;
}

.tkOther__related[hidden] {
  display: none;
}

/* 関連記事が無い（見出しと一覧を隠している）間は、戻るボタンだけを置く */
.tkOther__related[hidden] + .btn-more--back {
  margin-top: 0;
}

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

.tkOther__list {
  display: flex;
  gap: 3.1rem;
  width: 100%;
  margin-top: 4.4rem;
}

.tkOther__list > .card-cross {
  flex: 1;
  min-width: 0;
}

/* ===================================
    Tablet（751〜1024px）
=================================== */
@media screen and (max-width: 1024px) {
  /* 「OTHER CROSS TALK」は英字が長く、Tab 幅でもパネルからはみ出す */
  .tkOther .sec-title__en {
    font-size: 5rem;
  }

  .tkPanel {
    width: auto;
    max-width: none;
    margin-inline: 3rem;
    padding-bottom: 10rem;
  }

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

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

  .tkLead,
  .tkProfiles,
  .tkQs,
  .tkQ,
  .tkOther {
    width: auto;
    margin-inline: 5rem;
  }

  .tkLead {
    margin-top: 8rem;
  }

  .tkProfiles,
  .tkQs {
    margin-top: 6rem;
  }

  .tkQ {
    margin-inline: 0;
  }

  .tkQs {
    gap: 7rem;
  }

  .tkProfile {
    padding: 3rem;
  }

  .tkProfile__face {
    width: 18rem;
    height: 18rem;
  }

  .tkOther__list {
    gap: 2.4rem;
  }
}

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

  /* 左右 10px 残して赤地を見せる白パネル（角丸 20px）。中身は左右 20px */
  .tkPanel {
    margin: 0 1rem;
    padding: 0;
    border-radius: 2rem;
  }

  /* ---- 記事タイトル ---- */
  .tkHead {
    padding: 4rem 2rem 3.2rem;
  }

  .tkHead__logo-en {
    width: 8.735rem;
    margin-left: 3.132rem;
  }

  .tkHead__logo-main {
    width: 15rem;
    margin-top: 0.534rem;
  }

  .tkHead__title {
    margin-top: 2rem;
    font-size: 2.2rem;
    line-height: 1.545;
  }

  .tkHead__names {
    gap: 0.8rem 2.4rem;
    margin-top: 1.6rem;
  }

  .tkHead__person {
    gap: 1rem;
  }

  .tkHead__person b {
    font-size: 1.5rem;
  }

  .tkHead__person span {
    font-size: 1.2rem;
  }

  /* パネル幅いっぱい・角丸なし */
  .tkHero {
    height: auto;
    aspect-ratio: 370 / 280;
  }

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

  .tkLead p {
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.867;
  }

  .tkLead p + p {
    margin-top: 2.8rem;
  }

  /* ---- 話し手プロフィール（灰枠 10px の中に白パネル・写真を中央に大きく） ---- */
  .tkProfiles {
    gap: 2rem;
    width: auto;
    margin: 3.2rem 0 0;
    padding-inline: 2rem;
  }

  .tkProfile {
    padding: 1rem;
    border-radius: 2rem;
  }

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

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

  .tkProfile__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
  }

  .tkProfile__tag {
    height: 2.8rem;
    margin-bottom: 1.4rem;
    padding: 0 1.5rem;
    font-size: 1.4rem;
  }

  .tkProfile__name {
    font-size: 1.8rem;
    line-height: 1.556;
  }

  .tkProfile__role {
    margin-top: 0.4rem;
    font-size: 1.4rem;
    line-height: 1.714;
  }

  .tkProfile__text {
    align-self: stretch;
    margin-top: 1.4rem;
    font-size: 1.4rem;
    line-height: 1.929;
    letter-spacing: 0;
    text-align: left;
  }

  /* 注釈も本文にそろえて左寄せ（プロフィールは SP で中央寄せのため） */
  .tkProfile__note {
    align-self: stretch;
    text-align: left;
  }

  /* ---- テーマ別クロストーク ---- */
  .tkQs {
    gap: 6.4rem;
    width: auto;
    margin: 5.6rem 0 0;
    padding-inline: 2rem;
  }

  .tkQ {
    width: auto;
  }

  /* SP は THEME 01 の表記（Figma） */
  .tkQ__title {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding-left: 0;
    font-size: 1.8rem;
    line-height: 1.556;
  }

  .tkQ__title::before {
    display: none;
  }

  .tkQ__no {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    font-family: var(--font-en);
    color: var(--color-main);
    letter-spacing: 0.04em;
  }

  .tkQ__no span {
    padding-left: 0.065rem;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.5;
  }

  .tkQ__no b {
    margin-top: -1.35rem;
    font-weight: 600;
    font-size: 3.6rem;
    line-height: 1.5;
  }

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

  .tkQ__lead {
    margin-top: 2.8rem;
    font-size: 1.5rem;
    line-height: 1.733;
  }

  .tkQ__talks {
    gap: 3.2rem;
    margin-top: 2.8rem;
  }

  .tkSay {
    gap: 1rem;
  }

  .tkSay__person {
    width: 8.2rem;
    gap: 0.6rem;
  }

  .tkSay__face {
    width: 5.2rem;
    height: 5.2rem;
  }

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

  .tkSay__bubble {
    flex: 1;
    min-width: 0;
    padding: 1.8rem;
    border-radius: 1.4rem;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.714;
  }

  /* ---- OTHER CROSS TALK ---- */
  /* .tkQs（gap 64px・左右 20px）の中にある。Figma：上 72px・下 72px */
  .tkOther {
    width: auto;
    margin: 0.8rem 0 0;
    padding: 0 0 7.2rem;
  }

  /* 関連が無いときは戻るボタンだけ（Figma：上 56px） */
  .tkOther__related[hidden] + .btn-more--back {
    margin-top: -1.6rem;
  }

  .tkOther .sec-title__en {
    font-size: 2.8rem;
  }

  .tkOther__list {
    flex-direction: column;
    gap: 3.2rem;
    margin-top: 2.8rem;
  }
}