@charset "UTF-8";
/* ==========================================================================
   career_interview.scss
   キャリア採用「Interview（社員紹介）」単独ページ
   （wp-content/themes/original/page-career_interview.php）専用のスタイル。

   career.scssとは別ファイルとして新規作成。ビルドはpackage.jsonのbuild:css/watch:css
   に第2のsassターゲットとして追加済み（cmn/scss/career_interview.scss →
   cmn/css/career_interview.css）。読み込みはparts/career-head.php側で
   is_page_template('page-career_interview.php')の場合のみ、career.cssに
   加えてこのファイルの出力（career_interview.css）を追加読み込みする
   （page-career.php側の読み込みには一切影響しない）。

   このページの<div class="p-career p-career-wrapper">はcareer.scss側の
   共通スコープ（.p-career）をそのまま継承するため、CSS変数
   （--career-blue等）や共通コンポーネント（.p-career-secttl / .p-career-lead
   / .p-career__inner / .p-career-splittext__* の文字出現演出など）は
   career.css側の定義がそのまま効く。このファイルでは、このページに固有の
   新規コンポーネント（.p-interview-*）のみを追加する。

   [注意] トップページのInterviewティザー（.p-career-interview__*、
   career.scss側）とは名前空間を完全に分離している（.p-interview-*）。
   同じ「インタビュー」を扱うが、ティザーは3列の互い違いレイアウト、
   こちらは開閉式の1カラムカードリストで見た目・構造とも別物のため、
   クラス名を衝突させるとティザー側の既存スタイルに影響してしまう危険が
   あるため。 */
/* このファイル（career_interview.css）はis_page_template(
   'page-career_interview.php')の場合のみ読み込まれる（このファイル冒頭の
   コメント参照）ため、bodyへの指定でもインタビュー単独ページ以外
   （TOPページ含む）には一切影響しない。 */
body {
  background-color: #f5f5f5;
}

/* .p-career__innerは全ページ共通のクラス（career.scss側）で、box-sizing:
   border-box（.p-career *への共通リセット）のため、max-widthは「padding込みの
   外枠の幅」を表す。デフォルトはmax-width:1280px（--career-container）+
   左右paddingがfluid clamp（768px時2rem〜1280px時4rem）。
   このページ限定で外枠1344px（=中身1280px＋左右padding32pxずつ）、
   paddingは固定32pxに上書きするため、CSS変数--inner-max-width /
   --inner-padding-xをこのページのセクションラッパー側で再定義する
   （子孫の.p-career__innerに継承される。同じ手法を使っている既存例:
   career.scss内「921px = 32px + 857px + 32px」のコメント箇所を参照。
   あちらも同様に--inner-max-widthに「外枠の幅」を指定している）。
   career.scss自体は一切変更しないため、このページ以外（TOPページ含む）の
   見た目に影響はない。 */
.p-interview-mv,
.p-interview-list {
  --inner-max-width: 134.4rem; /* 1344px = 32px + 1280px(中身) + 32px */
  --inner-padding-x: 3.2rem; /* 32px */
}

/* --------------------------------------------------------------------
   MV（ページ見出し）
   -------------------------------------------------------------------- */
/* 1600px時点の見た目（ユーザー確認済み・変更禁止）と768px以下のSP値
   （既存の@media内、同じく変更禁止）の両端はそのまま維持しつつ、
   その間をclamp()+calc()による線形補間（fluid typography/spacingの
   一般的な手法）で滑らかに繋ぐ。
   計算式: clamp(小さい方の値, calc(768px時の値 + (1600px時の値-768px時の値)
   × (100vw - 768px) / 832px), 大きい方の値)
   → viewport幅が768pxのとき計算結果は768px時の値と一致し（＝直後の
   @media (max-width:768px)の値へシームレスに接続）、1600px以上では
   1600px時の値で頭打ちになる（＝ユーザー確認済みの1600px時の見た目を
   1600px超でも維持し、これ以上大きくしない）。
   このコメントは本ファイル内の同種のclamp()指定すべてに共通する説明の
   ため、以降は個別の説明を省略する。 */
.p-interview-mv {
  padding: clamp(8rem, 8rem + 7.6rem * (100vw - 768px) / 832px, 15.6rem) 0 clamp(4rem, 4rem + 4.1rem * (100vw - 768px) / 832px, 8.1rem);
}
@media only screen and (max-width: 768px) {
  .p-interview-mv {
    padding: 10.4rem 0 2.8rem;
  }
}

.p-interview-mv .p-career-secttl__en {
  line-height: 1;
}

.p-interview-mv .p-career-secttl__ja {
  margin-bottom: 0;
}

.p-interview-mv .p-career-secttl__ja {
  margin-bottom: 0;
}

.p-interview-mv .p-career-secttl {
  margin-bottom: 3rem;
}
@media only screen and (max-width: 768px) {
  .p-interview-mv .p-career-secttl {
    margin-bottom: 0;
  }
}

@media only screen and (max-width: 768px) {
  .p-interview-mv .p-career-lead {
    margin-top: 0;
    line-height: 1.6;
  }
}

/* --------------------------------------------------------------------
   カードリスト全体
   -------------------------------------------------------------------- */
.p-interview-list {
  position: relative;
}

/* トップページ（career.scss）のStrengths/Company/Recruit等と同じ構成
   （<section>直下に__bg-img、セクション基準で配置）に合わせて
   .p-interview-list（セクション）側に配置している。
   z-index:-1で本文の後ろに回すため、セクション側にも明示的なz-index（0）を
   指定してスタッキングコンテキストを作る（Strengths等と同じ理由）。 */
.p-interview-list {
  z-index: 0;
}

/* Entryセクションを非表示（entry_section_visible OFF）にした場合、
   .p-interview-listがそのままフッターに接してしまい余白が詰まって見えるため、
   Entry本来のセクション下側の余白（career.scss .p-career-entryの
   padding-bottom）と同じ値を代わりに持たせる。Entry表示時はこのクラスが
   付かないため、既存のレイアウトに影響しない。 */
.p-interview-list--no-entry {
  padding-bottom: 12.7rem;
}
@media only screen and (max-width: 768px) {
  .p-interview-list--no-entry {
    padding-bottom: 5.2rem;
  }
}

.p-interview-list__bg-img {
  position: absolute;
  z-index: -1;
  top: clamp(-28rem, -5rem + -23rem * (100vw - 768px) / 832px, -5rem);
  left: clamp(-31rem, 2rem + -33rem * (100vw - 768px) / 832px, 2rem);
  width: clamp(32rem, 32rem + 88rem * (100vw - 768px) / 832px, 120rem);
  height: auto;
  max-width: none;
  pointer-events: none;
}
@media only screen and (max-width: 768px) {
  .p-interview-list__bg-img {
    top: -14rem;
    left: -8rem;
    width: 32rem;
  }
}

.p-interview-cards {
  display: flex;
  flex-direction: column;
  gap: clamp(2.4rem, 2.4rem + 1.6rem * (100vw - 768px) / 832px, 4rem);
}
@media only screen and (max-width: 768px) {
  .p-interview-cards {
    gap: 1.6rem;
  }
}

/* --------------------------------------------------------------------
   カード1件（summary=常時表示の要約部分 / body=開閉する詳細部分）
   -------------------------------------------------------------------- */
.p-interview-card {
  position: relative;
}

/* 表示時のスクロールインアニメーション。career.js側の
   initIndividualReveal(".p-interview-card__summary")と対になるスタイル。
   トップページのInterviewティザー（.p-career-interview__card、
   career.scss側）と同じtranslateY / duration / easingを採用し、
   サイト全体で見た目の統一感を保っている。
   [注意] 対象は.p-interview-card自体ではなく.p-interview-card__summary。
   transformを持つ要素は自分の子孫のposition:fixed要素のcontaining block
   になってしまう仕様があるため、position:fixedを使う子孫要素を追加する
   場合はこの点に注意。 */
.p-interview-card__summary.js-animate-init {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: none;
}

.p-interview-card__summary.js-animate-init.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 背景は1枚の画像（PC01〜03.jpg / SP01〜03.jpg、空のグラデーション背景込みで
   合成済み）をセクションの背景としてそのまま敷く構成。画像のアスペクト比
   自体で高さが決まるようaspect-ratioを指定（PC: 2560×928 / SP: 686×800、
   いずれも納品画像の実サイズ）。 */
/* summary領域全体（写真・引用文・名前・ボタン全て）をクリックトリガーに
   している（career.js側で.p-interview-card__summary自体にクリック
   イベントを付与）。それに合わせてcursor:pointerを付与。 */
.p-interview-card__summary {
  position: relative;
  overflow: hidden;
  padding: clamp(3.2rem, 3.2rem + 2.8rem * (100vw - 768px) / 832px, 6rem) clamp(2rem, 2rem + 2rem * (100vw - 768px) / 832px, 4rem) clamp(2.8rem, 2.8rem + 3.2rem * (100vw - 768px) / 832px, 6rem) clamp(2rem, 2rem + 2rem * (100vw - 768px) / 832px, 4rem);
  aspect-ratio: 2560/928;
  cursor: pointer;
}
@media only screen and (max-width: 768px) {
  .p-interview-card__summary {
    padding: 1.6rem;
    aspect-ratio: 686/800;
  }
}

.p-interview-card__summary-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* トップページのInterviewティザー（.p-career-interview__card:hover
   .p-career-interview__card-img img { transform: scale(1.06); }、
   career.scss参照）と同じ写真ズームを採用。summary側のoverflow:hiddenで
   拡大分ははみ出さずクリップされる。 */
.p-interview-card__summary-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.p-interview-card__summary:hover .p-interview-card__summary-media img {
  transform: scale(1.06);
}

/* 1600px時点のmax-width: 48rem（ユーザー確認済み・変更禁止）は維持しつつ、
   769px側の終端値を34rem（1600px比 約71%の縮小幅）とし、間をclamp()で
   線形補間。768px以下は既存のmax-width: none（SP時は幅いっぱい）を維持。 */
.p-interview-card__summary-content {
  position: relative;
  z-index: 1;
  max-width: clamp(34rem, 34rem + 14rem * (100vw - 768px) / 832px, 48rem);
}
@media only screen and (max-width: 768px) {
  .p-interview-card__summary-content {
    max-width: none;
  }
}

.p-interview-card__box {
  background: #fff;
  padding: clamp(2rem, 2rem + 1.4rem * (100vw - 768px) / 832px, 3.4rem) clamp(1rem, 2.2rem + -1.2rem * (100vw - 768px) / 832px, 2.2rem) clamp(2.2rem, 2.2rem + 1rem * (100vw - 768px) / 832px, 3.2rem) clamp(2.2rem, 2.2rem + 1rem * (100vw - 768px) / 832px, 3.2rem);
  transition: background-color 0.3s ease;
}
@media only screen and (max-width: 768px) {
  .p-interview-card__box {
    padding: 2rem 1.8rem 1.6rem;
  }
}

.p-interview-card__quote {
  font-size: clamp(1.7rem, 1.7rem + 1.1rem * (100vw - 768px) / 832px, 2.8rem);
  font-weight: 700;
  line-height: 1.6;
  color: var(--career-navy);
  transition: color 0.3s ease;
}
@media only screen and (max-width: 768px) {
  .p-interview-card__quote {
    font-size: 1.6rem;
  }
}

.p-interview-card__name {
  margin-top: clamp(1rem, 1rem + 0.3rem * (100vw - 768px) / 832px, 1.3rem);
  font-size: clamp(1.2rem, 1.2rem + 0.6rem * (100vw - 768px) / 832px, 1.8rem);
  font-weight: 700;
  color: var(--career-navy);
  transition: color 0.3s ease;
}
@media only screen and (max-width: 768px) {
  .p-interview-card__name {
    margin-top: 1rem;
    font-size: 1.3rem;
  }
}

/* 「法人保険部 T・T」（部署名+氏名）部分と「2014年入社」（入社年）部分で
   フォントサイズを分けるため、入社年部分だけpage-career_interview.php側で
   <span class="p-interview-card__name-year">に括り出し、そちらにだけ別
   サイズを指定している。 */
.p-interview-card__name-year {
  font-size: clamp(1.2rem, 1.2rem + 0.4rem * (100vw - 768px) / 832px, 1.6rem);
}
@media only screen and (max-width: 768px) {
  .p-interview-card__name-year {
    font-size: 1.2rem;
  }
}

/* 開く/閉じるトグルボタン（カード上部=box直下に1つ、詳細を開いた際は
   本文の一番下にも同じボタンをもう1つ表示する。career.jsが同じカード内の
   .p-interview-card__toggleを全てまとめて開閉する）。 */
.p-interview-card__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.8rem, 0.8rem + 0.4rem * (100vw - 768px) / 832px, 1.2rem);
  margin: clamp(1.8rem, 1.8rem + 1.4rem * (100vw - 768px) / 832px, 3.2rem) auto 0;
  font-size: clamp(1.2rem, 1.2rem + 0.8rem * (100vw - 768px) / 832px, 2rem);
  font-weight: 700;
  color: var(--career-navy);
}
@media only screen and (max-width: 768px) {
  .p-interview-card__toggle {
    margin-top: 1.8rem;
    font-size: 1.5rem;
    gap: 0.8rem;
  }
}

/* アイコンの向きは常に固定で、ホバー時にtranslateXでわずかに動くだけの
   シンプルな挙動に統一している（開閉の状態はボタンのラベル文言
   「インタビューを見る」⇔「インタビューを閉じる」で示す）。下部の閉じる
   ボタンのアイコンだけ常時180度回転（上向き）に固定している（下記
   .p-interview-card__close側のルール参照）。 */
.p-interview-card__toggle-icon {
  width: clamp(2rem, 2rem + 0.2rem * (100vw - 768px) / 832px, 2.2rem);
  height: clamp(2rem, 2rem + 0.2rem * (100vw - 768px) / 832px, 2.2rem);
  flex-shrink: 0;
  border-radius: 0.6rem;
  background: var(--career-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
@media only screen and (max-width: 768px) {
  .p-interview-card__toggle-icon {
    width: 2rem;
    height: 2rem;
  }
}

.p-interview-card__toggle-icon::after {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-style: solid;
  border-color: #fff;
  border-width: 0 0.16rem 0.16rem 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* 閉じるボタンのアイコンは常に上向き（矢印を180度回転）に固定。 */
.p-interview-card__close .p-interview-card__toggle-icon {
  transform: rotate(180deg);
}

/* トップページのInterviewティザー（.p-career-interview__card:hover
   .p-career-interview__card-more-icon { transform: translateX(0.3rem); }、
   career.scss参照）と同じホバーを、下部の閉じるボタン単体のみに採用。
   上向き固定（rotate(180deg)）に画面上で右へ動く見た目のtranslateXを
   足すため、先にtranslateXしてから回転させる順番で指定している
   （rotate→translateXの順だと、回転後のローカル軸で動いてしまい斜めに
   ズレて見える）。 */
.p-interview-card__close:hover .p-interview-card__toggle-icon {
  transform: translateX(0.3rem) rotate(180deg);
}

/* --------------------------------------------------------------------
   詳細本文（開閉部分）
   -------------------------------------------------------------------- */
/* .p-interview-card__bodyは通常のフロー内要素とし、box-sizing:border-box
   + overflow:hidden + height:0 で閉状態を表現し、heightをJS側で
   scrollHeight→transitionさせて開閉アニメーションさせる（career.js参照）。
   border-boxの場合height:0でもpadding分の高さは残ってしまうため、
   本来.p-interview-card__body自身に持たせたい上側の余白は、直下の
   最初の子要素のmargin-topとして持たせている（overflow:hiddenな親では
   子のmargin-topが親の外へ抜けずに親の内側の余白として振る舞うため）。

   transition-durationはここに固定値を書かず、career.js側でカードごとに
   本文の実測の高さ（scrollHeight）から動的に算出してbody.style.
   transitionDurationにセットする方式にしている。「1秒あたりに動く距離
   （px/秒）」を固定することで、カードの長さによらず常に同じ速さで開閉する
   （計算式・速度の値はcareer.js内のHEIGHT_TRANSITION_VELOCITY参照）。

   左右paddingは.p-interview-card__summaryの左右paddingと同じ式
   （clamp(2rem, ..., 4rem) / SP:1.6rem）に統一している。デザイナー確認
   により「右側のマージンを全て揃えて欲しい」との指摘があり、以前は
   このbody側だけ独自にclamp(1.6rem, ..., 6.4rem)という別の値になって
   いたため、summary側（写真の右端）とbody側（Q&A・画像の右端）の
   右マージンがPC表示時にズレて見えていた（SPでは元々どちらも1.6remで
   一致していたため問題なし＝この不一致はPCのみの問題だった）。 */
.p-interview-card__body {
  box-sizing: border-box;
  overflow: hidden;
  height: 0;
  padding: 0 clamp(2rem, 2rem + 2rem * (100vw - 768px) / 832px, 4rem);
  transition-property: height;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  background-color: #fff;
}
@media only screen and (max-width: 768px) {
  .p-interview-card__body {
    padding: 0 1.6rem;
  }
}

.p-interview-card__body > *:first-child {
  margin-top: 1rem;
}

/* summaryのすぐ下・最初のblock（転職〜入社の頃について）の上に入れる
   注釈。.p-interview-card__body > *:first-childのfluid margin-topを
   そのまま利用するため、ここではmargin-topを個別指定しない。 */
.p-interview-card__note {
  text-align: right;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--career-gray);
  margin-bottom: 4rem;
}
@media only screen and (max-width: 768px) {
  .p-interview-card__note {
    font-size: 1rem;
    margin-bottom: 2rem;
  }
}

.p-interview-card__block:first-child {
  margin-top: 4rem;
}

.p-interview-card__block + .p-interview-card__block {
  margin-top: clamp(3.6rem, 3.6rem + 1.2rem * (100vw - 768px) / 832px, 4.8rem);
}
@media only screen and (max-width: 768px) {
  .p-interview-card__block + .p-interview-card__block {
    margin-top: 2.7rem;
  }
}

/* Figmaで実測（node-id 413:576、SPフレーム内のttl2/ttl3）:
   グラデーション背景 from-[#8baaf5] to-[#1b4ef1]（水平）、高さ30px、
   font-size 13px。 */
.p-interview-card__block-label {
  display: inline-block;
  background: linear-gradient(90deg, #8baaf5 0%, #1b4ef1 100%);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 700;
  padding: clamp(0.7rem, 0.7rem + 0.3rem * (100vw - 768px) / 832px, 1rem) clamp(1.2rem, 1.6rem + -0.4rem * (100vw - 768px) / 832px, 1.6rem);
}
@media only screen and (max-width: 768px) {
  .p-interview-card__block-label {
    padding: 0.8rem 1rem;
    font-size: 1.3rem;
  }
}

.p-interview-card__qa {
  margin-top: clamp(2rem, 2rem + 1.8rem * (100vw - 768px) / 832px, 3.8rem);
}
@media only screen and (max-width: 768px) {
  .p-interview-card__qa {
    margin-top: 1.6rem;
  }
}

.p-interview-card__block-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.6rem, 1.6rem + 3.6rem * (100vw - 768px) / 832px, 5.2rem);
  margin-top: clamp(3.6rem, 3.6rem + 1.2rem * (100vw - 768px) / 832px, 4.8rem);
}
@media only screen and (max-width: 768px) {
  .p-interview-card__block-row {
    flex-direction: column;
    gap: 2.7rem;
    margin-top: 2.7rem;
    margin-left: -1.6rem;
    margin-right: -1.6rem;
  }
}

@media only screen and (max-width: 768px) {
  .p-interview-card__block-row .p-interview-card__qa {
    margin: 0 1.6rem;
  }
}

/* 参考画像では画像の左右位置がブロックごとに交互（左/右）になっている。
   nth-of-typeで自動的に交互反転させる。 */
.p-interview-card__block:nth-of-type(even) .p-interview-card__block-row {
  flex-direction: row-reverse;
}
@media only screen and (max-width: 768px) {
  .p-interview-card__block:nth-of-type(even) .p-interview-card__block-row {
    flex-direction: column;
  }
}

.p-interview-card__block-row .p-interview-card__qa {
  margin-top: 0;
  flex: 1 1 auto;
  min-width: 0;
}

/* 1600px時点のmax-width: 53rem（ユーザー確認済み・変更禁止）は維持しつつ、
   769px側の終端値を38rem（1600px比 約72%の縮小幅）とし、間をclamp()で
   線形補間。画像が縮む分、隣接する.p-interview-card__qa（flex: 1 1 auto）
   側の幅は相対的に確保されやすくなる。768px以下は既存のmax-width: none
   （SP時は幅いっぱい・縦積み）を維持。 */
.p-interview-card__block-photo {
  flex: 0 0 auto;
  max-width: clamp(38rem, 38rem + 15rem * (100vw - 768px) / 832px, 53rem);
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .p-interview-card__block-photo {
    width: 100%;
    max-width: none;
  }
}

/* 1枚目（career_interview_card1_block1_photo.jpg）の納品画像実寸は
   1060×640px（@2x想定＝表示530px）、2枚目（block2_photo.jpg）は
   920×600px（@2x想定＝表示460px）と、納品画像自体の意図された表示
   サイズが異なる。共通クラスに一律max-width: 53rem（530px）のままだと
   2枚目が本来の460pxより一回り大きく引き伸ばされて表示されてしまう。
   1枚目はブロック内の奇数番目（nth-of-type(odd)）、2枚目は偶数番目
   （nth-of-type(even)）の.p-interview-card__blockに入っており、これは
   写真の左右交互配置（flex-direction: row-reverse、本ファイル上部
   「参考画像では画像の左右位置が...」参照）と同じ判定条件のため、
   その既存の奇数/偶数分岐に合わせて実サイズに応じて上書きしている。
   SP表示（768px以下）は両方ともmax-width: noneで幅いっぱいに広げる。
   1600px時点のmax-width: 46rem（ユーザー確認済み）は維持しつつ、769px側の
   終端値を33rem（約72%の縮小幅）とし、間をclamp()で線形補間。 */
.p-interview-card__block:nth-of-type(even) .p-interview-card__block-photo {
  max-width: clamp(33rem, 33rem + 13rem * (100vw - 768px) / 832px, 46rem);
}
@media only screen and (max-width: 768px) {
  .p-interview-card__block:nth-of-type(even) .p-interview-card__block-photo {
    max-width: none;
  }
}

.p-interview-card__block-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* Figmaで実測: 質問文の色 #0f43eeはサイト内既存の--career-numbers-value
   変数と同じ色のため、Q&Aの見出し強調色としてここでも使い回している。 */
.p-interview-card__q {
  font-size: clamp(1.6rem, 1.6rem + 0.2rem * (100vw - 768px) / 832px, 1.8rem);
  font-weight: 700;
  color: var(--career-numbers-value);
  line-height: 1.6;
}
@media only screen and (max-width: 768px) {
  .p-interview-card__q {
    font-size: 1.6rem;
  }
}

/* 回答本文の右端がガタガタして見える（改行位置がバラバラ）との指摘への
   対応。原因はtext-alignが未指定（ブラウザ既定の左揃え＝右側は自然な
   改行任せ）だったため。padding/margin側の余白は一切変更せず、テキスト
   自体の揃え方だけをtext-align: justify（両端揃え）に変更し、右端も
   .p-interview-card__bodyのpaddingで決まる箱の内側にきっちり揃うように
   した。text-justify: inter-characterは、日本語を1文字単位で均等割付
   させるための指定（これが無いと一部ブラウザで単語単位の割付になり、
   日本語では不自然な間延びが起きることがある）。
   なお仕様として、各段落の最終行だけは両端揃えの対象外になり、これまで
   通り左揃え（右は短いまま）になる（新聞・書籍の本文組でも同じ挙動で、
   一般的な仕様）。 */
.p-interview-card__a {
  margin-top: clamp(1rem, 1rem + 1rem * (100vw - 768px) / 832px, 2rem);
  font-size: clamp(1.4rem, 1.4rem + 0.2rem * (100vw - 768px) / 832px, 1.6rem);
  line-height: 1.8;
  color: var(--career-navy);
  text-align: justify;
  text-justify: inter-character;
}
@media only screen and (max-width: 768px) {
  .p-interview-card__a {
    margin-top: 0.6rem;
    font-size: 1.4rem;
    line-height: 1.8;
  }
}

/* --------------------------------------------------------------------
   1日のスケジュール（タイムライン）
   -------------------------------------------------------------------- */
.p-interview-card__schedule {
  margin-top: clamp(4rem, 4rem + 2.4rem * (100vw - 768px) / 832px, 6.4rem);
}
@media only screen and (max-width: 768px) {
  .p-interview-card__schedule {
    margin-top: 6.6rem;
  }
}

.p-interview-card__schedule-ttl {
  font-size: clamp(2.1rem, 2.1rem + 0.7rem * (100vw - 768px) / 832px, 2.8rem);
  font-weight: 700;
  color: var(--career-navy);
}
@media only screen and (max-width: 768px) {
  .p-interview-card__schedule-ttl {
    font-size: 2.1rem;
  }
}

.p-interview-card__schedule-inner {
  display: flex;
  align-items: flex-start;
  /* 900〜1600pxをclamp()で補間（900px以下は直後の@mediaで2.4rem固定の
     ため、900pxの時点で計算結果が2.4remに一致するよう起点をここだけ
     900pxにしている。他の指定は768px起点、詳細は.p-interview-mvの
     コメント参照）。 */
  gap: clamp(2.4rem, 2.4rem + 3.8rem * (100vw - 900px) / 700px, 6.2rem);
  margin-top: 5.3rem;
}
@media only screen and (max-width: 900px) {
  .p-interview-card__schedule-inner {
    flex-direction: column;
    gap: 2.8rem;
    margin-top: 2.4rem;
  }
}

.p-interview-card__schedule-list {
  flex: 1 1 auto;
  max-width: 620px;
  width: 100%;
}

/* HTML構造（li.schedule-item > span.time + p.item-ttl + p.item-txt）は
   変更せず、CSS Gridのみで「時刻列／ドット列／本文列」の3列レイアウトを
   実現している（時刻バッジとドットは1行目=タイトル行にのみ配置し、
   タイトルの折り返し行数に関わらず常にタイトルの中央に揃うようgrid-row内で
   align-self: centerさせる）。
   縦ラインは各li自身にposition:absoluteで「自分の上端〜下端」の線分を敷き、
   次のliの上端と隙間なくつながる（li同士の境界にmargin不使用のため）ことで
   複数項目にまたがる1本の線に見せている（最初/最後の項目の線の始端・終端は
   下記:first-child::before/:last-child::beforeを参照）。
   色は--career-blue-midではなく--career-numbers-value（career.scss内
   「In Numbers 数値カラー」#0f43ee）を使用。本文（item-txt）の文字色も
   --career-grayではなく--career-navyにしている。 */
/* CSS Gridのcolumn-gapは全ての列間に同じ値しか指定できない（左右で別の値を
   持たせられない）ため、column-gapは使わず、時刻列・ドット列・本文列の間に
   「余白専用の列」を1列ずつ明示的に挟む5列構成
   （時刻列／左余白1.2rem／ドット1.4rem／右余白3.2rem／本文1fr）にし、
   column-gapは0にしている。
   時刻列は6rem（60px）。.schedule-time自体もwidth:60pxを明示（下記参照）。 */
.p-interview-card__schedule-item {
  position: relative;
  display: grid;
  grid-template-columns: clamp(6rem, 6.2rem + -0.2rem * (100vw - 768px) / 832px, 6.2rem) clamp(0.8rem, 0.8rem + 0.4rem * (100vw - 768px) / 832px, 1.2rem) clamp(1.1rem, 1.1rem + 0.3rem * (100vw - 768px) / 832px, 1.4rem) clamp(0.8rem, 0.8rem + 2.4rem * (100vw - 768px) / 832px, 3.2rem) 1fr;
  column-gap: 0;
  row-gap: clamp(0.5rem, 0.6rem + -0.1rem * (100vw - 768px) / 832px, 0.6rem);
  padding-bottom: clamp(2rem, 2.2rem + -0.2rem * (100vw - 768px) / 832px, 2.2rem);
  /* SP幅では独立したドット（丸）は表示せず、縦の連結ラインが時刻バッジ
     （ピル）自体の中央を貫通する形で「バッジ＝タイムライン上のノード」に
     している。
     SP専用のgrid-template-columnsから「ドット列＋その両脇の余白列」
     （0.8rem＋1.1rem＋0.8rem）を廃止し、時刻列の直後に本文とのgapを1列
     （1.1rem）だけ挟む3列構成（時刻／gap／本文）にしている。
     ドット自体の非表示化・縦ラインの水平位置変更は下記::after／::beforeの
     SP用上書きで対応し、タイトル・本文（item-ttl/item-txt）は列番号が
     5→3に変わるためgrid-columnをSP専用に上書きしている（いずれもPC
     （769px以上）は列構成・ドット表示とも一切変更していない）。 */
}
@media only screen and (max-width: 768px) {
  .p-interview-card__schedule-item {
    grid-template-columns: 6.2rem 0 1fr;
    row-gap: 0.2rem;
    padding-bottom: 2.2rem;
  }
}

.p-interview-card__schedule-item:last-child {
  padding-bottom: 0;
}

/* ドット（下記::after）はグリッドの1行目（タイトル行）内でalign-self:
   centerにより縦中央揃えされるが、その中央位置は「時刻バッジ(.schedule-time)
   の高さ」で決まる1行目の実高さに依存し、rem換算で綺麗な数値にはならない
   （フォントメトリクス由来の半端な値になる）。実際にPlaywrightでドット
   中心のY座標を実測したところ、項目の上端からPC: 1.48rem、SP: 1.46remの
   位置に一致することを確認した（.schedule-timeのpadding/横幅を調整する
   たびに高さも変わりうるため、この値はその都度実測し直す前提）。
   最初の項目の線は「ドット中心から下端まで」、最後の項目の線は「上端から
   ドット中心まで」にしている（この値がズレると、最初/最後のドットの
   位置で線がはみ出す・届かないといった見た目のズレが生じる）。 */
.p-interview-card__schedule-item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* 上のgrid-template-columnsをclamp()化したのに合わせて、線の水平位置
     （時刻列+左余白+ドット半分＝7.9rem@1600px→7.55rem@768px）も同じ式で
     補間。両方とも同じ2点間の線形補間のため、どのビューポート幅でも
     ドット中心とズレない。 */
  left: clamp(7.55rem, 7.55rem + 0.35rem * (100vw - 768px) / 832px, 7.9rem);
  width: clamp(0.2rem, 0.2rem + 0.1rem * (100vw - 768px) / 832px, 0.3rem);
  background: var(--career-numbers-value);
  transform: translateX(-50%);
  /* 丸(ドット)と時刻の一体化対応（上のgrid-template-columnsのコメント参照）。
     SPでは縦ラインの水平位置を「ドット列の中心」から「時刻バッジ列の中心」に
     変更。.schedule-timeはSPではwidth: 4.8rem（下記.schedule-time参照）で
     時刻列（6.2rem）内の左詰めに配置されるため、バッジ中心は列の左端から
     4.8rem÷2＝2.4rem。バッジが縦ラインの上に重なって見えるよう、
     z-indexは変更せずDOM順（::beforeの後に.schedule-timeが続く）による
     自然な重なりに任せている。 */
}
@media only screen and (max-width: 768px) {
  .p-interview-card__schedule-item::before {
    left: 2.4rem;
    width: 0.2rem;
  }
}

.p-interview-card__schedule-item:first-child::before {
  top: clamp(1.46rem, 1.46rem + 0.02rem * (100vw - 768px) / 832px, 1.48rem); /* 実測したドット中心のY座標（項目上端から） */
}
@media only screen and (max-width: 768px) {
  .p-interview-card__schedule-item:first-child::before {
    top: 1.46rem; /* 実測したドット中心のY座標（SP・項目上端から） */
  }
}

.p-interview-card__schedule-item:last-child::before {
  bottom: auto;
  height: clamp(1.46rem, 1.46rem + 0.02rem * (100vw - 768px) / 832px, 1.48rem); /* 実測したドット中心のY座標（項目上端から） */
}
@media only screen and (max-width: 768px) {
  .p-interview-card__schedule-item:last-child::before {
    height: 1.46rem; /* 実測したドット中心のY座標（SP・項目上端から） */
  }
}

/* ドット（タイトル行の中央に配置される実グリッドアイテム） */
/* 丸(ドット)と時刻の一体化対応（上のgrid-template-columnsのコメント参照）。
   SPでは独立したドットを表示せず、縦ラインが時刻バッジを貫通する見た目に
   一本化するため、SP専用にdisplay: noneで非表示にしている（PC（769px以上）
   はドット表示のまま変更していない）。 */
.p-interview-card__schedule-item::after {
  content: "";
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  width: clamp(1.1rem, 1.1rem + 0.3rem * (100vw - 768px) / 832px, 1.4rem);
  height: clamp(1.1rem, 1.1rem + 0.3rem * (100vw - 768px) / 832px, 1.4rem);
  border-radius: 50%;
  background: var(--career-numbers-value);
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 768px) {
  .p-interview-card__schedule-item::after {
    display: none;
  }
}

/* .schedule-time側にwidth: 60pxを明示し、grid-column内でのデフォルトの
   stretchに頼らず確実に60px幅になるようにしている。 */
.p-interview-card__schedule-time {
  grid-column: 1;
  grid-row: 1;
  /* タイトル（item-ttl）が2行以上に折り返すと1行目の高さでは収まらず
     グリッド行自体の高さが伸びるため、align-self: centerのままだと
     バッジがタイトル全体（複数行）の中央に沈み込み、1行目の頭よりも
     下がって見えてしまう。startにして行の先頭（＝タイトル1行目）に
     揃える。タイトルが1行に収まる通常時は行の高さ自体がバッジの高さと
     ほぼ一致するため、center/startどちらでも見た目に差はない。 */
  align-self: start;
  width: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.2rem, 0.5rem + -0.3rem * (100vw - 768px) / 832px, 0.5rem) clamp(0.2rem, 0.8rem + -0.6rem * (100vw - 768px) / 832px, 0.8rem);
  border-radius: 999px;
  background: var(--career-numbers-value);
  color: #fff;
  font-family: var(--career-numeral);
  font-size: clamp(1.2rem, 1.2rem + 0.4rem * (100vw - 768px) / 832px, 1.6rem);
  font-weight: 700;
  line-height: 1.6;
  /* SPで丸(ドット)と時刻を一体化した際（上のgrid-template-columns等の
     コメント参照）、縦ライン（::before、position:absolute）が時刻バッジの
     真上を通るようになったが、.schedule-time自体はposition未指定
     （非配置要素）のため、CSSの重なり順のルール上「非配置要素は先に描画され、
     position指定のある要素は非配置要素より後＝手前に描画される」という
     挙動により、DOM順としては::beforeの方が先に書かれていても、実際には
     ::before（position:absolute）の方が.schedule-time（非配置）より手前に
     描画されてしまい、線がバッジの上に乗って見えていた。
     同じ理由で、隣接するドット（::after）には元々position:relative;
     z-index:1;が指定されていたため線より手前に出ていたが、.schedule-time
     には同様の指定が無かった。ドットと同様にposition:relative; z-index:1;
     をSP限定で追加し、バッジを縦ラインより手前に出した（PC（769px以上）は
     この重なり自体が発生しない配置のため変更していない）。 */
}
@media only screen and (max-width: 768px) {
  .p-interview-card__schedule-time {
    padding: 0.2rem 0 0;
    width: 4.8rem;
    font-size: 1.3rem;
    position: relative;
    z-index: 1;
  }
}

/* 丸(ドット)と時刻の一体化対応（上のgrid-template-columnsのコメント参照）。
   SPはgrid-template-columnsが5列→3列に変わり、本文列が5列目→3列目になる
   ため、grid-columnをSP専用に3へ上書きしている（PC（769px以上）は
   grid-column: 5のまま変更していない）。 */
.p-interview-card__schedule-item-ttl {
  grid-column: 5;
  grid-row: 1;
  align-self: center;
  font-size: clamp(1.4rem, 1.4rem + 0.4rem * (100vw - 768px) / 832px, 1.8rem);
  font-weight: 700;
  color: var(--career-navy);
}
@media only screen and (max-width: 768px) {
  .p-interview-card__schedule-item-ttl {
    grid-column: 3;
    font-size: 1.5rem;
  }
}

.p-interview-card__schedule-item-txt {
  grid-column: 5;
  grid-row: 2;
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--career-navy);
  font-weight: 500;
}
@media only screen and (max-width: 768px) {
  .p-interview-card__schedule-item-txt {
    grid-column: 3;
    line-height: 1.6;
    font-size: 1.4rem;
  }
}

/* 1600px時点のmax-width: 475px（ユーザー確認済み）は維持しつつ、769px側の
   終端値を340px（1600px比 約72%）とし、間をclamp()で線形補間。900px以下
   （横並びに切替）・768px以下（縦積みに復帰）のflex-direction切替は変更
   なし（コンテナ自体がwidth: 100%側で決まる幅の狭いスマホ帯では実質影響
   しないため、既存の@media側にmax-widthの上書きは追加していない）。 */
.p-interview-card__schedule-photos {
  flex: 0 0 auto;
  width: 100%;
  max-width: clamp(340px, 340px + 135px * (100vw - 768px) / 832px, 475px);
  display: flex;
  flex-direction: column;
  gap: 6.4rem;
}
@media only screen and (max-width: 900px) {
  .p-interview-card__schedule-photos {
    flex-direction: row;
    width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  .p-interview-card__schedule-photos {
    flex-direction: column;
    gap: 1.6rem;
    max-width: 100%;
  }
}

.p-interview-card__schedule-photos img {
  width: 100%;
  max-width: clamp(206px, 280px + 120px * (100vw - 768px) / 832px, 400px);
  height: auto;
  display: block;
}

/* コンテナ（475px）より画像（400px）の方が狭いぶん左右に75pxの余りが
   できるので、1枚目は右寄せ・2枚目は左寄せにすることで左右交互（ジグザグ）
   に配置している。
   縦積み（flex-direction: column）のときのみ意味を持つ指定のため、900px
   以下で横並び（flex-direction: row）に切り替わる中間ブレークポイントでは、
   align-selfがそのまま縦方向の寄せに読み替えられて不自然にならないよう、
   その範囲だけ元に戻す（768px以下では再び縦積みに戻るためこのリセットも
   解除され、左右交互指定が復活する）。 */
.p-interview-card__schedule-photos img:first-child {
  align-self: flex-end;
}
@media only screen and (max-width: 768px) {
  .p-interview-card__schedule-photos img:first-child {
    align-self: flex-start;
  }
}

.p-interview-card__schedule-photos img:last-child {
  align-self: flex-start;
}
@media only screen and (max-width: 768px) {
  .p-interview-card__schedule-photos img:last-child {
    align-self: flex-end;
  }
}

@media only screen and (max-width: 900px) and (min-width: 769px) {
  .p-interview-card__schedule-photos img:first-child,
  .p-interview-card__schedule-photos img:last-child {
    align-self: auto;
  }
}
/* --------------------------------------------------------------------
   下部の「インタビューを閉じる」
   -------------------------------------------------------------------- */
.p-interview-card__close {
  margin-top: clamp(3.6rem, 3.6rem + 2rem * (100vw - 768px) / 832px, 5.6rem);
  padding-bottom: clamp(4rem, 4rem + 2rem * (100vw - 768px) / 832px, 6rem);
  display: flex;
  justify-content: center;
}
@media only screen and (max-width: 768px) {
  .p-interview-card__close {
    margin-top: 3.6rem;
    padding-bottom: 4rem;
  }
}

/* --------------------------------------------------------------------
   reduced motion対応
   -------------------------------------------------------------------- */
/* career.scss側には既存の共通prefers-reduced-motionブロックがあるが、
   career.scssとは分離する方針に合わせ、このページ固有クラス
   （.p-interview-*）分の無効化ルールはcareer.scss側を編集せずこちらに
   個別に用意している。 */
@media (prefers-reduced-motion: reduce) {
  .p-interview-card__summary.js-animate-init {
    opacity: 1;
    transform: none;
  }
  .p-interview-card__summary.js-animate-init.is-visible {
    transition: none;
  }
  .p-interview-card__body {
    transition: none;
  }
}
.p-career-entry {
  background-color: #f5f5f5;
  position: relative;
  /* 背景画像（.p-career-entry__bg-img）をz-index:-1で本文の後ろに配置する
     ために、このセクション自身に明示的なz-index（0）を指定してスタッキング
     コンテキストを作る（Our Strengths/Interview等と同じ理由。詳細は
     career.scss側の.p-career-strengthsのコメント参照）。 */
  z-index: 0;
}
@media only screen and (max-width: 768px) {
  .p-career-entry {
    padding: 6rem 0 5.2rem;
  }
}

/* .p-career-entryはTOP（page-career.php）とInterview
   （page-career_interview.php）で共有のマークアップ・クラスだが、<img>タグは
   Interviewページのテンプレート側にのみ追加し、CSSもこのファイル
   （career_interview.scssはInterviewページにしか読み込まれない）に限定して
   配置しているため、TOP側の見た目は変化しない。 */
.p-career-entry .p-career-entry__bg-img {
  position: absolute;
  z-index: -1;
  /* .p-career img { max-width:100%; } のリセット打ち消し（詳細はcareer.scss側
     .p-career-strengths__bg-imgのコメント参照）。 */
  max-width: none;
  right: -23rem;
  bottom: -62rem;
  width: 140rem;
  height: auto;
  pointer-events: none;
}
@media only screen and (max-width: 768px) {
  .p-career-entry .p-career-entry__bg-img {
    width: 60rem;
    height: auto;
    right: -24rem;
    bottom: -27rem;
  }
}