@charset "UTF-8";
/* ==========================================================================
   GLOW WAY — interview.css
   /interview/ 以下の別サイト「HitoArk（ヒトアーク）」専用（GLOW WAY とは別デザイン）。
   読み込みは common.css → interview.css の2本だけ（page.css は使わない）。

   common.css から再利用するもの：:root のトークン / リセット / フォント /
   .inr / .btn 系 / .dq / .eyebrow / .inview / .sr-only / :focus-visible
   コーポレートの .head / .drawer / .footer 等は HTML に置いていない。

   参考：shishi-w.com/interview/interview-71/（1440px 実測）
   黒 → var(--charcoal) / 青 → var(--teal-strong) / 帯 #C3CED5 → --iv-band

   ------------------------------------------------------------------------
   目次
   ------------------------------------------------------------------------
   00. PAGE BASE    body.is-interview の上書き / ローカル変数 / スキップリンク
   01. HEADER       .iv-head（特設ヘッダー）
   02. HERO         .iv-fv（写真 771×524・1px 枠・角丸10px・ずらし色面）
   03. LEAD         .iv-lead（PROFILE のリード文）
   04. Q&A          .iv-qa（帯 + 枠付きカード + 番号円）
   05. STRENGTH     .iv-strength（提案資料 PROFILE の4項目）
   06. FOOTER       .iv-foot（特設フッター）
   07. RESPONSIVE   1200 / 1024 / 768 / 480（広い順 → 狭い順）
   08. PREFERENCES  prefers-reduced-motion / print
   ========================================================================== */


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

body.is-interview {
  --iv-band: #C8D9CF;          /* 名刺のセージ（参考 #C3CED5 の帯を名刺の色に置き換え） */
  --iv-line: var(--charcoal); /* 枠線（参考の黒） */
  --iv-head-h: 80px;
  --iv-shift: clamp(10px, 1.4vw, 20px);
  --iv-ls: .04em;

  padding-top: 0;
  background-color: var(--white);
  color: var(--charcoal);
}

/* common.css の main { padding-top: var(--head-h) } を打ち消す（特設ヘッダーは sticky） */
body.is-interview main {
  padding-top: 0;
}

:root:has(body.is-interview) {
  scroll-padding-top: calc(var(--iv-head-h, 80px) + 16px);
}

/* --- スキップリンク（フォーカス時のみ表示） ------------------------------ */
.iv-skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 18px;
  background-color: var(--charcoal);
  color: var(--white);
  border-radius: 999px;
  font-size: 14px;
  transform: translateY(-200%);
}

.iv-skip:focus,
.iv-skip:focus-visible {
  transform: none;
  color: var(--white);
}


/* ==========================================================================
   01. HEADER — .iv-head
   ========================================================================== */

.iv-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--white);
  border-bottom: 1px solid var(--line);
}

.iv-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--iv-head-h);
}

.iv-head__brand {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}


.iv-head__label {
  padding-left: 20px;
  border-left: 1px solid var(--line);
  color: var(--teal-strong);
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}

.iv-head__nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: none;
}

.iv-head__link {
  position: relative;
  color: var(--charcoal);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--iv-ls);
  white-space: nowrap;
}

.iv-head__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease);
}

.iv-head__link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.iv-head__cta {
  font-family: var(--font-base);
  font-size: 13px;
  letter-spacing: var(--iv-ls);
}


/* ==========================================================================
   02. HERO — .iv-fv
   参考の実測：コンテナ 1272px / 左列 480px（padding 70px 40px 90px）
   / 肩書 22.4px・500 / 氏名 67px・500 / データ行 15px・500・字間 .1em
   / パンくず 12px・500・字間 .04em / 写真 771×524・1px 枠・角丸 10px
   ========================================================================== */

.iv-fv {
  position: relative;
  padding-top: 40px;
  overflow: clip;
}

.iv-fv__inner {
  display: grid;
  grid-template-columns: 480px minmax(0, 1fr);
  column-gap: 21px;
  align-items: stretch;
}

/* --- 左列 ---------------------------------------------------------------- */
.iv-fv__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 70px 40px 90px;
}

.iv-fv__title {
  position: relative;
}

.iv-fv__dq {
  position: absolute;
  top: -34px;
  left: -40px;
  width: 37px;
  height: 27px;
  color: var(--teal-strong);
}

.iv-fv__dq::before,
.iv-fv__dq::after {
  width: 16px;
  height: 27px;
}

.iv-fv__post {
  color: var(--charcoal);
  font-size: 22.4px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--iv-ls);
}

.iv-fv__name {
  color: var(--charcoal);
  font-size: clamp(2.5rem, 4.66vw, 4.1875rem); /* 1440px で 67px */
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .04em;
}

/* ローマ字（参考：14px / 400。色はコントラストを確保するため --ink-sub） */
.iv-fv__eng {
  margin: .6em 0 0;
  color: var(--ink-sub);
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .08em;
}

.iv-fv__data {
  margin-top: 18px;
}

.iv-fv__data li {
  position: relative;
  padding-left: 30px;
  color: var(--charcoal);
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: .1em;
}

/* 小さな横長の丸（行頭記号） */
.iv-fv__data li::before {
  content: "";
  position: absolute;
  top: calc(1em - 3px);
  left: 0;
  width: 16px;
  height: 6px;
  background-color: var(--teal-strong);
  border-radius: 999px;
}

/* --- パンくず ------------------------------------------------------------ */
.iv-fv__pan {
  margin-top: auto;
  padding-top: 40px;
}

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

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

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

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

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

/* --- 右列：写真 ---------------------------------------------------------- */
.iv-fv__media {
  position: relative;
  padding: var(--iv-shift) var(--iv-shift) 0 0;
  margin-top: calc(var(--iv-shift) * -1);
  margin-right: calc(var(--iv-shift) * -1);
}


/* 右上方向にずらした色面（shift-bg） */
.iv-fv__media::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: var(--iv-shift);
  left: var(--iv-shift);
  z-index: 0;
  background-color: var(--iv-band);
  border-radius: var(--radius);
}

.iv-fv__figure {
  position: relative;
  z-index: 1;
  aspect-ratio: 771 / 524;
  overflow: hidden;
  background-color: var(--tint);
  border: 1px solid var(--iv-line);
  border-radius: var(--radius);
}

.iv-fv__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}


/* ==========================================================================
   03. LEAD — .iv-lead
   ========================================================================== */

.iv-lead {
  position: relative;
  padding-block: clamp(72px, 8vw, 120px) clamp(120px, 12vw, 180px);
  text-align: center;
}

.iv-lead__text {
  color: var(--charcoal);
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  font-weight: 500;
  line-height: 2.1;
  letter-spacing: var(--iv-ls);
  text-wrap: pretty;
}


/* ==========================================================================
   04. Q&A — .iv-qa
   参考の実測：帯 上 padding 65px / カード 白地・1px 枠・角丸 10px・padding 60px
   ・間隔 30px / 番号 70×70 の正円・ティール地・1px 枠・白 14px・-14px ずらし
   / 質問 左列 424px・26px/500/36px / 回答 右列 646px・16px/500/32px
   ========================================================================== */

.iv-qa {
  position: relative;
  padding-block: 65px clamp(96px, 9vw, 140px);
  background-color: var(--iv-band);
}

/* 上端の斜めカット（帯の外側に同色の三角形を足す） */
.iv-qa::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: clamp(40px, 5.6vw, 80px);
  background-color: var(--iv-band);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
}

.iv-qa__note {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 56px;
  padding: 12px 28px;
  background-color: var(--white);
  border: 1px solid var(--iv-line);
  border-radius: 999px;
  color: var(--charcoal);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: var(--iv-ls);
}

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

.iv-qa__list {
  display: grid;
  gap: 30px;
}

.iv-qa__item {
  position: relative;
  display: grid;
  grid-template-columns: 424px minmax(0, 1fr);
  column-gap: 40px;
  align-items: start;
  padding: 60px;
  background-color: var(--white);
  border: 1px solid var(--iv-line);
  border-radius: var(--radius);
}

.iv-qa__num {
  position: absolute;
  top: -14px;
  left: -14px;
  display: grid;
  place-content: center;
  justify-items: center;
  width: 70px;
  height: 70px;
  background-color: var(--teal-strong);
  border: 1px solid var(--iv-line);
  border-radius: 50%;
  color: var(--charcoal);
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .06em;
}

.iv-qa__num-q {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
}

.iv-qa__q {
  color: var(--charcoal);
  font-size: 26px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: var(--iv-ls);
}

.iv-qa__a {
  position: relative;
  padding-left: 40px;
}

.iv-qa__dq {
  position: absolute;
  top: 4px;
  left: 0;
  width: 25px;
  height: 20px;
  color: var(--teal-strong);
}

.iv-qa__dq::before,
.iv-qa__dq::after {
  width: 11px;
  height: 20px;
}

.iv-qa__a p,
.iv-qa__placeholder {
  color: var(--ink-mid);
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: var(--iv-ls);
}

/* ダミー回答（原稿差し替えまで）は一段淡く */
.iv-qa__a .iv-qa__placeholder {
  color: var(--ink-sub);
}


/* ==========================================================================
   05. STRENGTH — .iv-strength
   参考の枠付きカードと同じ言語（1px 枠・角丸 10px・番号円）
   ========================================================================== */

.iv-strength {
  padding-block: clamp(88px, 9vw, 140px);
  background-color: var(--white);
}

.iv-strength__head {
  margin-bottom: clamp(48px, 5vw, 72px);
  text-align: center;
}

.iv-strength__title {
  margin-top: 12px;
  color: var(--charcoal);
  font-size: clamp(1.625rem, 2.6vw, 2.25rem);
  font-weight: 500;
  letter-spacing: var(--iv-ls);
}

.iv-strength__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.iv-strength__item {
  position: relative;
  padding: 52px 44px 44px 60px;
  background-color: var(--white);
  border: 1px solid var(--iv-line);
  border-radius: var(--radius);
  line-height: inherit;
}

.iv-strength__num {
  position: absolute;
  top: -14px;
  left: -14px;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background-color: var(--teal-strong);
  border: 1px solid var(--iv-line);
  border-radius: 50%;
  color: var(--white);
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .06em;
}

.iv-strength__item-title {
  color: var(--charcoal);
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: var(--iv-ls);
}

.iv-strength__text {
  margin-top: 12px;
  color: var(--ink-mid);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.95;
  letter-spacing: var(--iv-ls);
}


/* ==========================================================================
   06. FOOTER — .iv-foot
   ========================================================================== */

.iv-foot {
  padding-block: clamp(88px, 9vw, 140px) 40px;
  background-color: var(--charcoal);
  color: var(--on-dark);
}

.iv-foot :focus-visible {
  outline-color: var(--white);
}

.iv-foot__cta {
  display: grid;
  justify-items: center;
  text-align: center;
}

.iv-foot__dq {
  margin-bottom: 20px;
}

.iv-foot__title {
  margin-top: 16px;
  color: var(--white);
  font-size: clamp(1.5rem, 2.8vw, 2.375rem);
  font-weight: 500;
  letter-spacing: var(--iv-ls);
}

.iv-foot__btn {
  margin-top: clamp(32px, 4vw, 48px);
  font-family: var(--font-base);
  font-size: 15px;
  letter-spacing: var(--iv-ls);
}

.iv-foot__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  margin-top: clamp(72px, 8vw, 120px);
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}

.iv-foot__logo img {
  width: 160px;
}

/* 名刺のキャッチコピー */
.iv-foot__tagline {
  margin: 12px 0 0;
  color: var(--on-dark);
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: .08em;
}

.iv-foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}

.iv-foot__links li {
  line-height: 1.7;
}

.iv-foot__links a {
  color: var(--on-dark);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--iv-ls);
}

.iv-foot__links a:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.iv-foot__copy {
  color: var(--on-dark);
  font-family: var(--font-en);
  letter-spacing: .06em;
}

.iv-foot__copy small {
  font-size: 11px;
}


/* ==========================================================================
   07. RESPONSIVE
   ========================================================================== */

@media (max-width: 1200px) {
  .iv-fv__inner {
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  }

  .iv-fv__body {
    padding: 60px 32px 72px;
  }

  .iv-fv__dq {
    left: -32px;
  }

  .iv-qa__item {
    grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
    padding: 56px 48px;
  }
}

@media (max-width: 1024px) {
  body.is-interview {
    --iv-head-h: 72px;
  }

  .iv-head__brand {
    gap: 14px;
  }


  .iv-head__label {
    padding-left: 14px;
  }

  .iv-head__nav {
    gap: 20px;
  }

  .iv-fv__inner {
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    column-gap: 16px;
  }

  .iv-fv__body {
    padding: 56px 24px 56px 28px;
  }

  .iv-fv__post {
    font-size: 19px;
  }

  .iv-fv__data li {
    font-size: 14px;
  }

  .iv-qa__q {
    font-size: 22px;
    line-height: 34px;
  }

  .iv-strength__item {
    padding: 48px 32px 36px 48px;
  }
}

@media (max-width: 768px) {
  body.is-interview {
    --iv-head-h: 64px;
  }


  .iv-head__link {
    font-size: 13px;
  }

  /* ヒーロー：写真 → テキストの1カラム */
  .iv-fv {
    padding-top: 32px;
  }

  .iv-fv__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .iv-fv__media {
    order: -1;
  }


  .iv-fv__body {
    padding: 56px 0 8px 36px;
  }

  .iv-fv__dq {
    top: -30px;
    left: -36px;
  }

  .iv-fv__pan {
    padding-top: 24px;
  }

  /* Q&A：質問 → 回答の1カラム */
  .iv-qa__note {
    margin-bottom: 44px;
    padding: 12px 20px;
    border-radius: var(--radius);
    font-size: 13px;
  }

  .iv-qa__item {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
    padding: 56px 28px 36px;
  }

  .iv-qa__num {
    width: 60px;
    height: 60px;
    font-size: 13px;
  }

  .iv-qa__q {
    font-size: 20px;
    line-height: 32px;
  }

  .iv-qa__a {
    padding-left: 36px;
  }

  .iv-qa__a p,
  .iv-qa__placeholder {
    font-size: 15px;
    line-height: 30px;
  }

  .iv-strength__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .iv-foot__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .iv-head__label {
    display: none;
  }

  /* 1段に収めるため、シンボルと英字ラベルを隠してロゴタイプだけにする */
  .iv-head__inner {
    gap: 12px;
  }

  .iv-head__brand {
    gap: 0;
  }


  .iv-head__nav {
    gap: 10px;
  }

  .iv-head__link {
    font-size: 12px;
    letter-spacing: 0;
  }

  .iv-head__cta {
    min-height: 40px;
    padding: 0 14px;
    font-size: 12px;
    letter-spacing: 0;
  }

  .iv-head__cta .btn__arrow {
    display: none;
  }

  .iv-fv__body {
    padding-left: 32px;
  }

  .iv-fv__dq {
    left: -32px;
  }

  .iv-fv__post {
    font-size: 17px;
  }

  .iv-lead {
    text-align: left;
  }

  .iv-qa__item {
    padding: 52px 20px 32px;
  }

  .iv-qa__a {
    padding-left: 32px;
  }

  .iv-strength__item {
    padding: 48px 22px 30px 30px;
  }

  .iv-foot__title {
    font-size: 1.375rem;
  }

  .iv-foot__btn {
    padding-left: 36px;
  }
}


/* ==========================================================================
   08. PREFERENCES
   ========================================================================== */

/* 360px 以下（小型スマホ）：ヘッダーを1段に収めるため、さらに詰める */
@media (max-width: 360px) {
  .iv-head__inner {
    gap: 8px;
  }


  .iv-head__nav {
    gap: 8px;
  }

  .iv-head__link {
    font-size: 11px;
  }

  .iv-head__cta {
    min-height: 36px;
    padding: 0 10px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iv-head__link::after,
  .iv-skip {
    transition: none;
  }

}

@media print {
  .iv-head {
    position: static;
  }

  .iv-skip,
  .iv-fv__media::before,
  .iv-qa::before {
    display: none;
  }

  .iv-qa,
  .iv-foot {
    background-color: transparent;
    color: var(--ink);
  }

  .iv-foot__title,
  .iv-foot__links a,
  .iv-foot__copy {
    color: var(--ink);
  }
}


/* ==========================================================================
   09. MEDIA ARTICLE — /interview/ の各記事（追記）
   .iv-notice（サンプルの案内）/ .iv-company（会社概要）/ .iv-pager（PREV・NEXT）
   / ヘッダーのリンク3本（インタビュー一覧・コーポレートサイト・お問い合わせ）の収め方
   参考：shishi-w.com/interview/interview-71/ の .qa_nav（1440px 実測）
   ピル 150×70・角丸 35px・間 10px・右寄せ / 文字 14px・500・字間 .12em・白
   / PREV #888 → var(--gray)（白文字 7.0:1）/ NEXT 黒 → var(--charcoal)
   ========================================================================== */

/* --- サンプルの案内 ------------------------------------------------------ */
.iv-notice {
  padding-top: clamp(40px, 4.4vw, 64px);
}

.iv-notice__text {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 12px 28px;
  background-color: var(--white);
  border: 1px solid var(--iv-line);
  border-radius: 999px;
  color: var(--charcoal);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: var(--iv-ls);
}

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

/* --- 会社概要 ------------------------------------------------------------ */
.iv-company {
  padding-block: clamp(88px, 9vw, 140px) 0;
  background-color: var(--white);
}

.iv-company__head {
  margin-bottom: clamp(40px, 4.4vw, 60px);
  text-align: center;
}

.iv-company__title {
  margin-top: 12px;
  color: var(--charcoal);
  font-size: clamp(1.625rem, 2.6vw, 2.25rem);
  font-weight: 500;
  letter-spacing: var(--iv-ls);
}

.iv-company__list {
  margin: 0;
  padding: 16px 60px;
  background-color: var(--white);
  border: 1px solid var(--iv-line);
  border-radius: var(--radius);
}

.iv-company__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  column-gap: 32px;
  padding-block: 24px;
}

.iv-company__row + .iv-company__row {
  border-top: 1px solid var(--line);
}

.iv-company__term {
  color: var(--charcoal);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: var(--iv-ls);
}

.iv-company__desc {
  margin: 0;
  color: var(--ink-mid);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: var(--iv-ls);
  overflow-wrap: anywhere;
}

.iv-company__desc a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* --- PREV / NEXT --------------------------------------------------------- */
.iv-pager {
  padding-block: clamp(64px, 6.4vw, 96px) clamp(88px, 9vw, 140px);
  background-color: var(--white);
}

.iv-pager__nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.iv-pager__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 150px;
  height: 70px;
  border-radius: 35px;
  color: var(--white);
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .12em;
}

.iv-pager__btn--prev {
  background-color: var(--gray);
}

.iv-pager__btn--next {
  background-color: var(--charcoal);
}

/* a:hover（0,1,1）の文字色を打ち消す */
/* ホバーは赤の面にチャコールの文字（赤の上の白文字は 3.2:1 で読みにくいため） */
.iv-pager__btn:hover {
  color: var(--charcoal);
  background-color: var(--teal-strong);
}

/* 矢印（17px の横棒 + 山形。PREV は左向き） */
.iv-pager__arrow {
  position: relative;
  flex: none;
  width: 17px;
  height: 8px;
  transition: transform var(--dur) var(--ease);
}

.iv-pager__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background-color: currentColor;
  transform: translateY(-50%);
}

.iv-pager__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.iv-pager__btn--prev .iv-pager__arrow {
  transform: scaleX(-1);
}

.iv-pager__btn--prev:hover .iv-pager__arrow {
  transform: scaleX(-1) translateX(4px);
}

.iv-pager__btn--next:hover .iv-pager__arrow {
  transform: translateX(4px);
}

.iv-pager__back {
  margin-top: clamp(56px, 6vw, 88px);
  text-align: center;
}

.iv-pager__back-btn {
  font-family: var(--font-base);
  font-size: 14px;
  letter-spacing: var(--iv-ls);
}

/* --- ヘッダー：リンクが3本になったぶんの収め方 -------------------------- */
@media (max-width: 1024px) {
  .iv-head__nav:has(.iv-head__link + .iv-head__link) {
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .iv-head__nav:has(.iv-head__link + .iv-head__link) .iv-head__link + .iv-head__link {
    display: none;
  }

  .iv-company__list {
    padding: 8px 28px;
  }

  .iv-company__row {
    grid-template-columns: 120px minmax(0, 1fr);
    column-gap: 20px;
    padding-block: 20px;
  }

  .iv-company__term,
  .iv-company__desc {
    font-size: 14px;
  }

  .iv-pager__nav {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .iv-notice__text {
    padding: 12px 20px;
    border-radius: var(--radius);
    font-size: 13px;
  }

  .iv-company__list {
    padding: 4px 20px;
  }

  .iv-company__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
    padding-block: 18px;
  }

  .iv-company__term {
    color: var(--ink-sub);
    font-size: 13px;
  }

  .iv-pager__btn {
    width: 130px;
    height: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iv-pager__arrow {
    transition: none;
  }

  .iv-pager__btn--prev:hover .iv-pager__arrow {
    transform: scaleX(-1);
  }

  .iv-pager__btn--next:hover .iv-pager__arrow {
    transform: none;
  }
}

@media print {
  .iv-notice,
  .iv-pager {
    display: none;
  }
}


/* ==========================================================================
   10. STORY ARTICLE — 章立ての記事（/interview/hobo-densetsu/ ほか）
   .iv-story（冒頭の見出し・導入文）/ .iv-quote（写真付きの引用）
   / .iv-guide（目次・この記事のポイント）/ .iv-qa--story（章：左に番号と見出し、
   右に本文）/ .iv-tags（キーワード）
   ========================================================================== */

/* --- 冒頭：記事の見出しと導入文 ------------------------------------------ */
.iv-story {
  padding-block: clamp(72px, 8vw, 120px) clamp(56px, 6vw, 88px);
}

.iv-story__eyebrow {
  margin-bottom: 18px;
}

.iv-story__title {
  color: var(--charcoal);
  font-size: clamp(1.875rem, 3.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .04em;
  font-feature-settings: "palt" 1;
}

.iv-story__sub {
  margin-top: 16px;
  color: var(--ink-mid);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: var(--iv-ls);
}

.iv-story__body {
  margin-top: clamp(32px, 3.6vw, 52px);
}

.iv-story__body p,
.iv-chapter p {
  color: var(--ink-mid);
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: var(--iv-ls);
}

.iv-story__body p + p,
.iv-chapter p + p {
  margin-top: 1.2em;
}

/* 導入文の中の決めの一言（——「人間力」。） */
.iv-story__body .iv-story__key {
  margin-block: .9em;
  color: var(--charcoal);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .06em;
}

.iv-story__body .iv-quote {
  margin-top: clamp(36px, 4vw, 56px);
}

/* --- 写真付きの引用 ------------------------------------------------------ */
.iv-quote {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(120px, 13vw, 180px);
  align-items: center;
  gap: clamp(18px, 2.4vw, 32px);
  margin: 2em 0;
  padding: clamp(24px, 2.8vw, 36px) clamp(20px, 2.4vw, 32px) clamp(24px, 2.8vw, 36px) clamp(56px, 5.4vw, 76px);
  background-color: var(--tint);
  border: 1px solid var(--iv-line);
  border-radius: var(--radius);
}

.iv-quote__dq {
  position: absolute;
  top: clamp(24px, 2.8vw, 36px);
  left: clamp(18px, 2vw, 28px);
  width: 25px;
  height: 20px;
  color: var(--teal-strong);
}

.iv-quote__dq::before,
.iv-quote__dq::after {
  width: 11px;
  height: 20px;
}

.iv-quote__text {
  margin: 0;
}

.iv-chapter .iv-quote__text p,
.iv-story__body .iv-quote__text p,
.iv-quote__text p {
  color: var(--charcoal);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: .04em;
}

/* 写真の無い引用は1列 */
.iv-quote--text {
  grid-template-columns: minmax(0, 1fr);
}

.iv-quote__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: 50% 25%;
  border: 1px solid var(--iv-line);
  border-radius: 8px;
}

/* --- 目次とこの記事のポイント -------------------------------------------- */
.iv-guide {
  padding-bottom: clamp(88px, 9vw, 130px);
}

.iv-guide__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}

.iv-guide__box {
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--iv-line);
  border-radius: var(--radius);
}

/* 箱が1つ（目次のみ）のときは横幅いっぱい */
.iv-guide__box:only-child {
  grid-column: 1 / -1;
}

.iv-guide__title {
  margin-bottom: 18px;
  color: var(--charcoal);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: var(--iv-ls);
}

.iv-toc__list {
  counter-reset: none;
}

.iv-toc__list li + li {
  border-top: 1px solid var(--line);
}

.iv-toc__list a {
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr);
  align-items: baseline;
  padding: 12px 0;
  color: var(--charcoal);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: var(--iv-ls);
}

.iv-toc__list a:hover {
  color: var(--charcoal);
  text-decoration: underline;
  text-decoration-color: var(--teal-strong);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.iv-toc__num {
  color: var(--charcoal);
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
}

.iv-points__list li {
  position: relative;
  padding: 8px 0 8px 34px;
  color: var(--charcoal);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: var(--iv-ls);
}

/* チェックの丸 */
.iv-points__list li::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: var(--teal-strong);
  border-radius: 50%;
}

.iv-points__list li::after {
  content: "";
  position: absolute;
  top: 17px;
  left: 6px;
  width: 8px;
  height: 5px;
  border-bottom: 2px solid var(--charcoal);
  border-left: 2px solid var(--charcoal);
  transform: rotate(-45deg);
}

/* --- 章（.iv-qa の帯とカードを使う） -------------------------------------- */
.iv-qa--story .iv-qa__item {
  scroll-margin-top: calc(var(--iv-head-h) + 24px);
}

/* 章の見出しは本文を読むあいだ左に残す */
.iv-qa--story .iv-qa__head {
  position: sticky;
  top: calc(var(--iv-head-h) + 32px);
}

.iv-qa--story .iv-qa__q {
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.6;
}

/* 章の本文には引用符アイコンを置かないので、左の余白は不要 */
.iv-qa--story .iv-qa__a {
  padding-left: 0;
}

.iv-chapter > :first-child {
  margin-top: 0;
}

.iv-chapter .iv-quote:last-child {
  margin-bottom: 0;
}

/* --- 本文中の写真（取材後記など） ---------------------------------------- */
.iv-photo {
  margin: 2em 0 0;
}

.iv-photo img {
  width: min(100%, 560px);
  height: auto;
  border: 1px solid var(--iv-line);
  border-radius: 8px;
}

/* --- キーワード ---------------------------------------------------------- */
.iv-tags {
  padding-top: clamp(64px, 6.4vw, 96px);
}

.iv-tags__title {
  margin-bottom: 16px;
  color: var(--charcoal);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: var(--iv-ls);
}

.iv-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.iv-tags__list li {
  padding: 6px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-mid);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: var(--iv-ls);
}

/* --- レスポンシブ -------------------------------------------------------- */
@media (max-width: 1024px) {
  .iv-guide__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  /* 1列になるので見出しの追従はやめる */
  .iv-qa--story .iv-qa__head {
    position: static;
  }

  .iv-story__body p,
  .iv-chapter p {
    font-size: 15px;
    line-height: 1.95;
  }
}

@media (max-width: 480px) {
  /* 写真は引用文の下へ */
  .iv-quote {
    grid-template-columns: minmax(0, 1fr);
    padding: 56px 20px 24px;
  }

  .iv-quote__dq {
    top: 22px;
    left: 20px;
  }

  .iv-quote__photo {
    width: 60%;
    max-width: 200px;
  }
}


/* ==========================================================================
   11. HITOARK BRAND — /interview/ 以下は別サイト「HitoArk（ヒトアーク）」
   配色は HitoArk のバナーの参考画像に合わせる（common.css の --hk-*）:
     赤 #F1604D / サーモン #F2AA99 / 黄 #F1B33F / 淡いグレー #F0F0F0 / 文字はチャコール
   参考画像と同じく、文字はすべてチャコール（濃色）にし、赤・サーモン・黄は面と飾りに使う。
   （赤 #F1604D は白地で 3.2:1 のため小さな文字色にはしない。赤の面に乗せる文字もチャコール 5.1:1）
   GLOW WAY の共通部品は色トークンで塗っているので、ここでトークンを置き換えると
   このサイトの配色がまとめて切り替わる。
   ========================================================================== */

body.is-interview {
  --brand: var(--charcoal);        /* 見出し・ボタンの文字と枠線 */
  --brand-ink: var(--charcoal);    /* 括弧ラベル */
  --teal-strong: var(--hk-red);    /* ピル・番号の丸・行頭の印・引用符 */
  --teal: var(--hk-red);
  --on-teal: var(--charcoal);
  --mint: var(--hk-salmon);
  --mint-light: var(--hk-salmon);  /* 濃色のフッター上の括弧ラベル・引用符 */
  --tint: var(--hk-gray);          /* 引用の地・写真の地 */
  --sage-pale: var(--hk-gray);
  --bg-deep: var(--hk-gray);
  --line: #E4E4E4;
  --iv-band: var(--hk-gray);
  --btn-dark: var(--charcoal);     /* 塗りボタンは黒。ホバーで赤（下記） */
  --btn-dark-hover: var(--hk-red);
}

/* 共通の a:hover（赤い文字になる）とフォーカスリングを、このサイト用にチャコールへ。
   :where() で詳細度を共通ルールと同じにし、個別の指定（ボタン・フッター等）は上書きしない */
:where(body.is-interview) a:hover {
  color: var(--charcoal);
}

:where(body.is-interview) :focus-visible {
  outline-color: var(--charcoal);
}

/* 塗りボタンのホバー：赤の面にチャコールの文字 */
body.is-interview .btn--dark:hover,
body.is-interview .btn--dark:hover .btn__label {
  background-color: var(--hk-red);
  color: var(--charcoal);
}

/* 記事冒頭の写真の後ろにずらした面は赤（参考画像の斜めの面） */
.iv-fv__media::before {
  background-color: var(--hk-red);
}

/* --- ロゴ（斜めの赤い面のマーク + HitoArk） ------------------------------ */
.hk-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  color: var(--charcoal);
  text-decoration: none;
}

.hk-logo:hover {
  color: var(--charcoal);
}

.hk-logo__mark {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 7px;
  background-color: var(--hk-gray);
  box-shadow: inset 0 0 0 1px #E2E2E2;
}

.hk-logo__mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--hk-red);
  clip-path: polygon(62% 0, 100% 0, 100% 100%, 30% 100%);
}

/* 左上の短い帯と斜線 */
.hk-logo__mark::after {
  content: "";
  position: absolute;
  top: 22%;
  left: 14%;
  width: 34%;
  height: 12%;
  background-color: var(--hk-yellow);
}

.hk-logo__name {
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
}

.hk-logo--light,
.hk-logo--light:hover {
  color: var(--white);
}

.hk-logo--light .hk-logo__mark {
  box-shadow: none;
}

/* ヘッダーのキャッチ（英字ラベル用の大文字・広い字間を打ち消す） */
.iv-head__label {
  color: var(--ink-sub);
  font-family: var(--font-base);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: none;
}

/* --- 一覧ページの見出し -------------------------------------------------- */
.hk-h1 {
  font-family: var(--font-en);
  letter-spacing: .04em;
}

.hk-h1__ja {
  margin-left: .2em;
  font-family: var(--font-base);
  font-size: .36em;
  font-weight: 500;
  letter-spacing: .08em;
  vertical-align: .35em;
}

.ivl-fv__catch {
  padding-bottom: .9em;
  color: var(--ink-mid);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .06em;
}

/* --- フッター ------------------------------------------------------------ */
.iv-foot__lead {
  margin-top: 14px;
  color: var(--on-dark);
  font-size: 14px;
  line-height: 1.9;
  text-align: center;
}

.iv-foot__brand {
  display: grid;
  gap: 8px;
}

.iv-foot__brand .iv-foot__tagline {
  margin: 4px 0 0;
}

.iv-foot__operator {
  color: var(--on-dark);
  font-size: 13px;
  letter-spacing: .06em;
}

.iv-foot__operator a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.iv-foot__operator a:hover {
  color: var(--hk-salmon);
}

/* ヘッダーのキャッチは、メニューと重ならない幅でだけ出す
   （狭い画面では一覧ページの見出しの下とフッターに同じキャッチがある） */
@media (max-width: 840px) {
  .iv-head__label {
    display: none;
  }
}

@media (max-width: 768px) {
  .hk-logo__mark {
    width: 30px;
    height: 30px;
  }

  .hk-logo__name {
    font-size: 19px;
  }
}

@media (max-width: 480px) {
  .hk-logo {
    gap: 8px;
  }

  .hk-logo__mark {
    width: 26px;
    height: 26px;
    border-radius: 6px;
  }

  .hk-logo__name {
    font-size: 17px;
  }
}