/* ============================================================
   精密審美会 採用サイト — メッセージ詳細（個別医師インタビュー）
   Figma: 医師メッセージ-PC (88:617) / SP (88:675)
   ============================================================ */

/* --- MVオーバーライド ---
   Figma: 135:887 Interview 1 (442×76) + 88:622 title (fs=38)
   ======================================= */
.secondary-mv--interview .secondary-mv__title-logo {
  max-width: 442px;
  margin-bottom: -41px;
  /* Figma: logo bottom y=-14, text top y=-55 → overlap 41px */
}

.secondary-mv--interview .secondary-mv__title-text {
  font-size: 38px;
  letter-spacing: 3.04px;
  line-height: 52px;
}

.secondary-mv__title-sub {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 1.6px;
  line-height: 1;
  /* 親のlh:52px継承を防止 — inline box膨張でテキスト位置がずれるのを回避 */
}


/* --- キャッチバナー ---
   Figma PC: Group 41 [89:1021] (1000×347)
     Rectangle 7: 1000×347, radii=[0,10,0,10], gradient 90deg #C6E1EE→#32A9E1
     matsumoto01: offset(+50,+34), 280×280 (IMAGE)
     Group 38: offset(+313,+108), 637×144
       Rectangle 61: 495×61 白背景 (1行目)
       Rectangle 62: 637×61 白背景 (2行目)
       TEXT: fs=32, lh=72, ls=2.56, color=#1556A6
   ======================================= */
.interview-hero {
  padding: 60px 0 0;
}

.interview-hero__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  /* base.css .inner の padding: 0 16px を上書き */
}

.interview-hero__banner {
  position: relative;
  width: 1000px;
  /* Figma: Group 41 固定幅 */
  max-width: 100%;
  height: 347px;
  border-radius: 0 30px 0 30px;
  /* Figma(0,10,0,10)→30pxに拡大 */
  overflow: hidden;
  background: linear-gradient(90deg, #C6E1EE 0%, #32A9E1 100%);
}

/* 写真: Figma offset(+50,+34) 280×280 */
.interview-hero__banner-photo {
  position: absolute;
  left: 50px;
  top: 34px;
  width: 280px;
  height: 280px;
  object-fit: cover;
  display: initial;
  /* base.css img{display:block} を上書き */
}

/* テキストエリア: 行数に応じて垂直中央配置 */
.interview-hero__catch {
  position: absolute;
  left: 313px;
  top: 50%;
  transform: translateY(-50%);
  width: 637px;
}

/* テキスト: Figma基準 fs=32 → 実装 fs=30 に微調整（はみ出し防止）
   各行が独立した白矩形 (Figma: Rectangle 61/62)
   display:block + width:fit-content で白背景がテキスト幅に収まる */
.interview-hero__catch-line {
  display: block;
  width: fit-content;
  white-space: nowrap;
  height: 56px;
  /* 61→56: 4行時もコンパクトに収まる */
  line-height: 56px;
  /* テキスト縦中央 */
  margin-bottom: 10px;
  font-size: 30px;
  /* 32→30: 1行あたり約20文字に拡大 */
  font-weight: 400;
  letter-spacing: 2.4px;
  /* 2.56→2.4: fs比率維持 */
  color: #1556A6;
  background: #fff;
  padding: 0 10px;
}

.interview-hero__catch-line:last-child {
  margin-bottom: 0;
}

/* PC時: SP専用キャッチを非表示 */
.interview-hero__catch-line.sp-only {
  display: none;
}

/* --- 顔出しNGバナー（写真なし）---
   バナー高さは維持、写真は非表示。
   PC: キャッチを縦横中央寄せ
   SP: 縦中央寄せ（左寄せ） */
.interview-hero__banner--no-photo .interview-hero__catch {
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- プロフィールカード ---
   Figma: 89:750 (750×189, radius=10, white bg)
   130×130 circle + info
   ======================================= */
.interview-profile {
  padding: 40px 0;
}

.interview-profile__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.interview-profile__card {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 750px;
  margin: 0 auto;
  padding: 30px 40px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  /* Figma: Rectangle 63 枠線 */
}

.interview-profile__face {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #EAF0F4;
  /* Figma: Ellipse 9 fill（Ellipse 8を覆う） */
}

.interview-profile__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.interview-profile__info {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Figma: 各TEXTのline-height=30pxで間隔確保 */
}

/* Figma: fs=14 fw=400 color=#000 lh=30 */
.interview-profile__title {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.12px;
  line-height: 30px;
  color: #000;
}

/* Figma: fs=24 fw=400 ls=1.92 color=#000 lh=30 */
.interview-profile__name {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 1.92px;
  line-height: 30px;
  color: #000;
}

/* Figma: fs=16 fw=400 ls=1.28 color=#000 lh=30 */
.interview-profile__bio {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1.28px;
  line-height: 30px;
  color: #000;
  margin-top: 8px;
  /* 名前と経歴の間のスペース */
}


/* --- Q&A セクション ---
   Figma: 89:919 Frame 44
   レイアウト: テキストのみ1カラム
   ======================================= */
.interview-qa {
  padding: 20px 0;
}

.interview-qa__inner {
  max-width: 1000px;
  margin: 0 auto;
}

/* Q&A個別 */
.interview-qa__item {
  margin-bottom: 40px;
}

.interview-qa__item:last-child {
  margin-bottom: 0;
}

/* Question ラベル
   Figma: 89:839 Frame 43 (140×36)
   icon (31×16) + "Question1" fs=19 fw=400 ls=0.76 lh=36 color=#1556A6 */
.interview-qa__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.interview-qa__icon {
  width: 31px;
  height: 16px;
  object-fit: contain;
}

.interview-qa__number {
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.76px;
  line-height: 36px;
  color: #1556A6;
}

/* 質問文
   Figma: fs=24 fw=400 ls=0.96 lh=36 color=#000 */
.interview-qa__question {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.96px;
  line-height: 36px;
  color: #000;
  margin-bottom: 16px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 12px;
}

/* 回答文
   Figma: fs=16 fw=400 ls=0.64 lh=36 color=#000 */
.interview-qa__answer {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.64px;
  line-height: 36px;
  color: #000;
}


/* --- Last Question ---
   Figma: 89:1007 bg=#EEF7FF (1200×537) + 写真 + QA
   ======================================= */
.interview-last {
  padding: 60px 0;
}

.interview-last__bg {
  background: #EEF7FF;
  border-radius: 0 50px 0 50px;
  /* Figma: Rectangle 7 radii [0,50,0,50] 右上・右下のみ */
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 0;
}

.interview-last__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.interview-last__layout {
  display: grid;
  grid-template-columns: 1fr 416px;
  gap: 40px;
  align-items: center;
  /* テキスト・写真を縦中央揃え */
}

/* 顔出しNG: 写真カラムなし → テキスト全幅 */
.interview-last__layout--no-photo {
  grid-template-columns: 1fr;
}

.interview-last__content {
  /* Inherits QA styles */
}

.interview-last__photo img {
  width: 100%;
  border-radius: 8px;
}





/* ============================================================
   SP レスポンシブ — 430px基準
   Figma: 医師メッセージ-SP (88:675)
   ============================================================ */
@media (max-width: 768px) {

  /* MV */
  .secondary-mv--interview .secondary-mv__title-logo {
    max-width: 268px;
  }

  .secondary-mv--interview .secondary-mv__title-text {
    font-size: inherit;
    /* PC版38pxをリセット → 親 .secondary-mv__title の clamp(24px, 7vw, 30.4px) を継承 */
    letter-spacing: 2.43px;
    line-height: 1.36;
  }

  .secondary-mv__title-sub {
    display: block;
    font-size: 16px;
    margin-top: 4px;
  }

  /* キャッチバナー
     Figma SP: 387×519
       Rectangle 7: 387×519, gradient same
       matsumoto01: offset(+33,+40), 320×320
       Group 38: offset(+20,+325), 326×156
         3 white rectangles (322×46, 268×46, 177×46)
         TEXT: fs=21, lh=52, ls=1.68, color=#1556A6 */
  .interview-hero {
    padding: 40px 0 0;
  }

  .interview-hero__inner {
    padding: 0 22px;
  }

  .interview-hero__banner {
    height: auto;
    /* 固定519px → 内容に応じて可変 */
    padding-bottom: 20px;
    /* キャッチ下部の余白 */
  }

  .interview-hero__banner-photo {
    position: relative;
    /* absolute → relative: フロー内配置 */
    left: auto;
    top: auto;
    width: calc(100% - 66px);
    /* 左右33pxマージン */
    max-width: 320px;
    height: auto;
    aspect-ratio: 1 / 1;
    /* 正方形クロップ維持 */
    object-fit: cover;
    margin: 40px 0 0 33px;
    /* Figma: top:40px, left:33px */
  }

  .interview-hero__catch {
    position: relative;
    /* absolute → relative: 写真の下に配置 */
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    margin-top: -35px;
    /* Figma: 写真(bottom:360)にキャッチ(top:325)が35px被る */
    padding: 0 20px;
  }

  .interview-hero__catch-line {
    font-size: clamp(14px, 4.2vw, 18px);
    /* 430px→18px, 360px→15.1px — 1行約15文字 */
    letter-spacing: 1.68px;
    height: 40px;
    /* Figma SP白矩形 (PC 56px→SP 40px) */
    line-height: 40px;
    /* テキスト垂直中央 */
    margin-bottom: 6px;
    padding: 0 10px;
  }

  /* SP時: PC専用キャッチを非表示、SP専用を表示 */
  .interview-hero__catch-line.pc-only {
    display: none;
  }

  .interview-hero__catch-line.sp-only {
    display: block;
  }

  /* 顔出しNG: SP版 — 縦横中央寄せ */
  .interview-hero__banner--no-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 20px 0;
  }

  .interview-hero__banner--no-photo .interview-hero__catch {
    position: static;
    transform: none;
    margin-top: 0;
    width: auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* プロフィールカード */
  .interview-profile__inner {
    padding: 0 22px;
  }

  .interview-profile__card {
    flex-direction: column;
    text-align: center;
    padding: 24px;
    gap: 16px;
  }

  .interview-profile__face {
    margin: 0 auto;
  }

  .interview-profile__info {
    align-items: center;
  }

  /* Q&A */
  .interview-qa__inner {
    padding: 0 16px;
    /* 22→16: 21文字の質問が430pxで1行に収まる */
  }

  .interview-qa__layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .interview-qa--reverse .interview-qa__layout {
    grid-template-columns: 1fr;
  }

  .interview-qa--reverse .interview-qa__photo,
  .interview-qa--reverse .interview-qa__questions {
    order: unset;
  }

  .interview-qa__photo img {
    position: static;
    max-width: 320px;
    margin: 0 auto;
    display: block;
  }

  .interview-qa__question {
    font-size: clamp(14px, 4.1vw, 18px);
    /* 430px→17.6px, 360px→14.8px — 21文字が328pxに収まる */
    letter-spacing: 0.72px;
    line-height: 1.6;
  }

  .interview-qa__answer {
    font-size: clamp(13px, 3.3vw, 14px);
    /* 430px→14px, 360px→11.9→13px */
    letter-spacing: 0.56px;
    line-height: 1.8;
  }

  /* Last Question */
  .interview-last {
    padding: 40px 0;
  }

  .interview-last__bg {
    padding: 40px 0;
  }

  .interview-last__inner {
    padding: 0 22px;
  }

  .interview-last__layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .interview-last__photo img {
    max-width: 320px;
    margin: 0 auto;
    display: block;
  }

  /* 戻る */
  .interview-back {
    padding: 40px 0 60px;
  }
}