@charset "UTF-8";
/* ==========================================================================
   GLOW WAY — interview-list.css
   /interview/ HitoArk（いろいろな会社の経営者のインタビューを載せる別サイト）の一覧ページ専用。
   読み込みは common.css → interview.css → interview-list.css（page.css は使わない）。
   特設ヘッダー .iv-head / 特設フッター .iv-foot は interview.css のものをそのまま使う。

   参考：shishi-w.com/interview/（1440px 実測）
   グリッド 1290px・4列 × 285px・列間 50px・行ピッチ 539px（カード 488 + 行間 51）
   黒 → var(--charcoal) / 青 → var(--teal-strong) / #C3CED5 → var(--iv-band)
   / #888 → var(--ink-sub) / 括弧ラベルの赤 → var(--brand-ink)

   ------------------------------------------------------------------------
   目次
   ------------------------------------------------------------------------
   00. PAGE BASE    body.is-interview-list の上書き / ローカル変数
   01. HEADER       一覧ページだけの .iv-head 調整（現在ページの表示）
   02. FV           .ivl-fv（括弧ラベル・h1・パンくず・透かし）
   03. INTRO        .ivl-intro（リード .ivl-lead / 案内 .ivl-note）
   04. LIST         .ivl-body（斜めの帯）/ .ivl-list（グリッド）
   05. CARD         .ivl-card（影パネル・白パネル・枠・番号円・ピル）
   06. RESPONSIVE   1024 / 768 / 480（広い順 → 狭い順）
   07. PREFERENCES  prefers-reduced-motion / print
   ========================================================================== */


/* ==========================================================================
   00. PAGE BASE
   ========================================================================== */

body.is-interview-list {
  --ivl-gutter: clamp(20px, 5.2vw, 75px);  /* 1440px でグリッド左端 x=75 */
  --ivl-grid-w: 1290px;
  --ivl-col-gap: 50px;
  --ivl-row-gap: 51px;
  --ivl-slant: clamp(48px, 12.5vw, 180px); /* 帯の傾き（参考：1440px で約 180px） */

  background-color: var(--bg);
}


/* ==========================================================================
   01. HEADER — 一覧ページだけの調整
   リンク3本の収め方（768px 以下でコーポレートサイトを隠す等）は interview.css 側で
   記事ページと共通に行う。ここでは現在ページ（インタビュー一覧）の表示だけを足す。
   ========================================================================== */

/* 表示中のリンクは下線で示す（文字はチャコールのまま、下線を赤に） */
.is-interview-list .iv-head__link[aria-current="page"]::after {
  height: 2px;
  background-color: var(--teal-strong);
  transform: scaleX(1);
}


/* ==========================================================================
   02. FV — .ivl-fv
   参考：括弧ラベル 14px/500 を h1 の上・やや右 / h1 は左寄せ（x=84）で文字高 約59px
   / パンくずは右寄せで h1 のベースライン付近・12px / 右上にシンボルの大きな透かし
   ========================================================================== */

.ivl {
  position: relative;
  overflow: clip;
}

.ivl-fv {
  position: relative;
  padding-block: clamp(48px, 6.2vw, 90px) 0;
}


.ivl-fv__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
}

.ivl-fv__title {
  display: inline-grid;
  row-gap: clamp(8px, 1.2vw, 16px);
}

/* 括弧ラベル：h1 の右端に中心を合わせる（参考の配置） */
.ivl-fv__label {
  justify-self: end;
  font-size: 14px;
  font-weight: 500;
  transform: translateX(40%);
}

.ivl-fv__h1 {
  color: var(--charcoal);
  font-size: clamp(2.125rem, 4.03vw, 3.625rem); /* 1440px で 58px */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .06em;
  font-feature-settings: "palt" 1;
}

/* --- パンくず ------------------------------------------------------------ */
.ivl-fv__pan {
  padding-bottom: .9em;
}

.ivl-fv__pan-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.ivl-fv__pan-item {
  color: var(--charcoal);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .04em;
}

.ivl-fv__pan-item + .ivl-fv__pan-item::before {
  content: "—";
  margin-inline: .9em;
  color: var(--charcoal);
}

.ivl-fv__pan-item a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ivl-fv__pan-item--current {
  color: var(--ink-sub);
}


/* ==========================================================================
   03. INTRO — .ivl-lead / .ivl-note
   ========================================================================== */

.ivl-intro {
  position: relative;
  z-index: 1;
  padding-top: clamp(28px, 3.4vw, 48px);
}

.ivl-lead {
  max-width: 40em;
  color: var(--charcoal);
  font-size: clamp(0.9375rem, 1.25vw, 1.125rem);
  font-weight: 500;
  line-height: 2;
  letter-spacing: .04em;
  text-wrap: pretty;
}

/* 案内（目立つが控えめ）：白地・1px 枠・ピル型・ティールの丸 */
.ivl-note {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin-top: 20px;
  padding: 10px 22px;
  background-color: var(--white);
  border: 1px solid var(--charcoal);
  border-radius: 999px;
  color: var(--charcoal);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .04em;
}

.ivl-note::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background-color: var(--teal-strong);
  border-radius: 50%;
}


/* ==========================================================================
   04. LIST — .ivl-body / .ivl-list
   ========================================================================== */

.ivl-body {
  position: relative;
  padding-block: clamp(56px, 5.6vw, 80px) clamp(120px, 14vw, 200px);
}

/* 背景を斜めに横切る淡い帯（1段目のカードの中ほどから、左下がりに切れて終わる）。
   --iv-band の上では小さなティール文字が AA を下回るため、一段淡い --bg-deep を使う */
.ivl-body::before {
  content: "";
  position: absolute;
  top: clamp(200px, 20vw, 290px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background-color: var(--bg-deep);
  clip-path: polygon(0 0, 100% var(--ivl-slant), 100% 100%, 0 calc(100% - var(--ivl-slant)));
  pointer-events: none;
}

.ivl-body__inner {
  position: relative;
  z-index: 1;
  width: min(100% - var(--ivl-gutter) * 2, var(--ivl-grid-w));
  margin-inline: auto;
}

.ivl-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ivl-row-gap) var(--ivl-col-gap);
}


/* ==========================================================================
   05. CARD — .ivl-card
   li 285×488 / a 275 幅（右下の影パネルぶん 10px 残す）/ 写真枠 275×394
   ========================================================================== */

.ivl-card {
  position: relative;
  min-width: 0;
  line-height: inherit;
}

.ivl-card__link {
  position: relative;
  display: block;
  width: calc(100% - 10px);
  color: var(--charcoal);
  border-radius: var(--radius);
}

.ivl-card__link:hover {
  color: var(--charcoal);
}

.ivl-card__link:focus-visible {
  outline-offset: 8px;
  border-radius: var(--radius);
}

/* --- 写真枠 -------------------------------------------------------------- */
.ivl-card__media {
  position: relative;
  display: block;
  aspect-ratio: 275 / 394;
}

/* 影パネル：右へ 10px・下へ 10px */
.ivl-card__media::before {
  content: "";
  position: absolute;
  inset: 10px -10px -10px 10px;
  background-color: var(--iv-band);
  border: 1px solid var(--charcoal);
  border-radius: var(--radius);
  transition: transform var(--dur) var(--ease);
}

/* 白パネル */
.ivl-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--white);
  border: 1px solid var(--charcoal);
  border-radius: var(--radius);
}

.ivl-card__figure {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: block;
  overflow: hidden;
  background-color: var(--sage-pale);
  border: 1px solid var(--charcoal);
  border-radius: var(--radius);
}

.ivl-card__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

/* サンプル表示（実在の記事と誤解されないように） */
.ivl-card__sample {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 3px 10px;
  background-color: var(--charcoal);
  border-radius: 4px;
  color: var(--white);
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* --- 番号円：写真の右上に重ねる（上へ 19px・右へ 11px はみ出す） -------- */
.ivl-card__num {
  position: absolute;
  top: -19px;
  right: -11px;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 71px;
  height: 71px;
  background-color: var(--white);
  border: 1px solid var(--charcoal);
  border-radius: 50%;
  color: var(--charcoal);
  font-family: var(--font-en);
  font-size: 13.4px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .04em;
}

/* --- 肩書ピル：左へ 15px はみ出し・下から 18px ----------------------------- */
.ivl-card__post {
  position: absolute;
  bottom: 18px;
  left: -15px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  height: 35px;
  padding: 0 10px;
  background-color: var(--teal-strong);
  border: 1px solid var(--charcoal);
  border-radius: 9999px;
  color: var(--charcoal);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .08em;
  white-space: nowrap;
}

/* --- テキスト ------------------------------------------------------------ */
.ivl-card__text {
  display: block;
  padding-top: 28px;
}

/* 氏名とローマ字は同じ行（間 10px） */
.ivl-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
}

.ivl-card__name {
  color: var(--charcoal);
  font-size: 22px;
  font-weight: 500;
  line-height: 33px;
  letter-spacing: .04em;
  transition: color var(--dur) var(--ease);
}

.ivl-card__eng {
  color: var(--ink-sub);
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .06em;
}

/* データ行：氏名の上端から約 42px 下 */
.ivl-card__data {
  display: block;
  margin-top: 9px;
  color: var(--ink-sub);
  font-size: 12px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: .04em;
}

/* --- hover --------------------------------------------------------------- */
.ivl-card__link:hover .ivl-card__figure img {
  transform: scale(1.05);
}

.ivl-card__link:hover .ivl-card__media::before {
  transform: translate(3px, 3px);
}

.ivl-card__link:hover .ivl-card__name {
  text-decoration: underline;
  text-decoration-color: var(--teal-strong);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}


/* ==========================================================================
   06. RESPONSIVE
   1025px 以上 4列 / 769〜1024px 3列 / 481〜768px 2列 / 480px 以下 1列
   ========================================================================== */

@media (max-width: 1200px) {
  body.is-interview-list {
    --ivl-col-gap: 36px;
  }
}

@media (max-width: 1024px) {
  body.is-interview-list {
    --ivl-col-gap: 40px;
    --ivl-row-gap: 56px;
  }

  .ivl-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  body.is-interview-list {
    --ivl-col-gap: 32px;
  }

  .ivl-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ivl-fv__label {
    justify-self: start;
    transform: none;
  }

  .ivl-fv__pan {
    padding-bottom: 0;
  }

  .ivl-card__name {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  body.is-interview-list {
    --ivl-row-gap: 60px;
  }

  .ivl-list {
    grid-template-columns: minmax(0, 320px);
    justify-content: center;
  }

  .ivl-fv__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .ivl-note {
    align-items: flex-start;
    padding: 12px 18px;
    border-radius: var(--radius);
  }

  .ivl-note::before {
    margin-top: .6em;
  }

  .ivl-card__name {
    font-size: 22px;
  }
}


/* ==========================================================================
   07. PREFERENCES
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ivl-card__figure img,
  .ivl-card__media::before,
  .ivl-card__name {
    transition: none;
  }

  .ivl-card__link:hover .ivl-card__figure img,
  .ivl-card__link:hover .ivl-card__media::before {
    transform: none;
  }

}

@media print {
  .ivl-body::before {
    display: none;
  }

  .ivl {
    overflow: visible;
  }
}