@charset "utf-8";

/* ==========================================================================
   HERO
   ========================================================================== */

/* 全画面の写真スライダー。素材は data/voices.json の hero から6枚 */

.p-hero {
  position: relative;
  /* svh 非対応のブラウザでヒーローが潰れないよう vh を先に置く */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

/* 下端を抜いて、地の質感（body::after）へそのまま繋ぐ */
.p-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent 100%);
}

/* 写真にも地と同じ光を通す。世界を1つにするため */
.p-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--grad-mesh);
  filter: saturate(1.5);
  mix-blend-mode: soft-light;
  opacity: .8;
}

.p-hero__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}

.p-hero__slide.is-active { opacity: 1; }

.p-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 人物が入る写真が多いので、中心より少し上を残す */
  object-position: 50% 34%;
  /* 写真の彩度を落として、黒地に馴染ませる */
  filter: saturate(.62) contrast(1.04) brightness(.86);
}

/* 表示中の1枚だけゆっくり寄る。止まった絵にしない */
.p-hero__slide.is-active img { animation: heroZoom 11s var(--ease) forwards; }

@keyframes heroZoom {
  from { transform: scale(1.005); }
  to   { transform: scale(1.075); }
}

/* 写真ごとの出典。小さく出しておくと「実在の取材」だと伝わる */
.p-hero__slide figcaption {
  position: absolute;
  right: var(--pad-side);
  top: calc(var(--header-h) + clamp(16px, 2.4vw, 34px));
  max-width: 46vw;
  padding-right: 14px;
  border-right: 1px solid rgba(255, 255, 255, .3);
  text-align: right;
  font-family: var(--f-go);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .82);
  /* 明るい写真に当たっても読めるようにする */
  text-shadow: 0 1px 14px rgba(0, 0, 0, .7);
}

/* 文字を乗せるための落とし。写真の明るさに関係なく可読を保つ */
.p-hero::before,
.p-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  pointer-events: none;
}

.p-hero::before {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 30%),
    linear-gradient(0deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, .42) 11%,
      rgba(0, 0, 0, .82) 24%,
      rgba(0, 0, 0, .55) 44%,
      rgba(0, 0, 0, .18) 64%,
      rgba(0, 0, 0, .06) 100%);
}

.p-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--w-max);
  margin-inline: auto;
  padding: 0 var(--pad-side) clamp(34px, 5vw, 62px);
}

/* ロゴは支給データをそのまま使う。組み直さない */
.p-hero__logo { margin: 0; }

/* 支給PNGが 771px 幅なので、拡大は等倍付近で止める。
   ヒーローをこれ以上大きく使うなら SVG か 2x/3x が要る */
.p-hero__logo img {
  width: 100%;
  max-width: 760px;
  height: auto;
}

.p-hero__lead {
  margin-top: clamp(22px, 3vw, 34px);
  max-width: 32em;
  font-size: clamp(12px, 1.3vw, 14px);
  line-height: 2.15;
  color: rgba(255, 255, 255, .74);
}

.p-hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  margin-top: clamp(28px, 4vw, 48px);
}

.p-hero__dots { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }

.p-hero__dots button {
  display: block;
  width: 34px;
  height: 2px;
  background: rgba(255, 255, 255, .26);
  transition: background-color .5s var(--ease);
}

.p-hero__dots button:hover { background: rgba(255, 255, 255, .55); }
.p-hero__dots button[aria-current="true"] { background-image: var(--grad-line); }

.p-hero__scroll {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-en);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--c-text-dim);
}

.p-hero__scroll::after {
  content: "";
  width: 62px;
  height: 1px;
  background-image: var(--grad-line);
}

@media (max-width: 640px) {
  .p-hero__slide figcaption { max-width: 62vw; top: calc(var(--header-h) + 14px); }
  .p-hero__dots button { width: 24px; }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */

/* 地の質感は body::after が全面に敷いている。
   ABOUT はそこから一段だけ持ち上げて、band として読ませる */
#about {
  position: relative;
  isolation: isolate;
}

#about::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(180deg,
      transparent 0,
      rgba(255, 255, 255, .05) 22%,
      rgba(255, 255, 255, .05) 78%,
      transparent 100%);
}

/* 見出し左・本文右の左右等分はやめて、段差で組む。
   写真を右に落として、下に空いていた面を埋める */
.p-about {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  align-items: start;
}

.p-about__eyebrow {
  grid-column: 1 / 7;
  grid-row: 1;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, .82);
}

/* 行ごとにマスクから立ち上げる */
.p-about__line {
  display: block;
  overflow: hidden;
  opacity: 1;
  transform: none;
}

.p-about__line i {
  display: block;
  font-style: normal;
  transform: translateY(105%);
  transition: transform 1.1s var(--ease) var(--d, 0ms);
}

.p-about__line.is-in i { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .p-about__line i { transform: none; }
}

.p-about__title {
  grid-column: 1 / 12;
  grid-row: 2;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
  font-family: var(--f-min);
  font-weight: 600;
  font-size: clamp(28px, 5.4vw, 74px);
  line-height: 1.45;
  letter-spacing: .03em;
}

/* 本文は見出しより1段下げ、さらに右へずらす */
.p-about__body {
  grid-column: 5 / 12;
  grid-row: 3;
  margin-top: clamp(40px, 6vw, 92px);
  padding-top: clamp(26px, 3vw, 40px);
  /* 面がグラデなので、罫はグラデにしない */
  border-top: 1px solid rgba(255, 255, 255, .22);
  font-size: 14px;
  line-height: 2.3;
  color: rgba(255, 255, 255, .78);
}

.p-about__body p + p { margin-top: 1.9em; }

/* ==========================================================================
   CARD ── スライダー
   ========================================================================== */

/* 中央送り。左右とも画面外まで流して、両端を見切れさせる。
   overflow: hidden なので手では動かせない。送りは JS の scrollLeft のみ */
.p-card__viewport {
  margin-inline: calc((100vw - min(100vw, var(--w-max))) / -2 - var(--pad-side));
  overflow: hidden;
}

/* 左右の余白は js/main.js が「先頭・末尾も中央に来る」値を入れる */
.p-card__track {
  display: flex;
  gap: clamp(2px, .4vw, 6px);
  padding-block: 44px;
  width: max-content;
}

.p-card__item {
  display: flex;
  width: clamp(216px, 21vw, 304px);
}

/* 見出しの行数が違ってもカード下端を揃える */
.p-card__link {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.p-card__person { margin-top: auto; }

/* 既定は企業ロゴ。支給ロゴが全点 白背景なので、面ごと白タイルにして馴染ませる */
.p-card__visual {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #FFFFFF;
}

.p-card__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity .6s var(--ease), transform 1.1s var(--ease);
}

.p-card__logo { object-fit: contain; }

/* 中央にきたカードとホバー中のカードは、人物写真に差し替える。写真はモノクロ */
.p-card__face {
  object-fit: cover;
  object-position: 50% 32%;
  filter: grayscale(1) contrast(1.06);
  opacity: 0;
  transform: scale(1.03);
}

.p-card__item.is-center .p-card__logo,
.p-card__link:hover .p-card__logo,
.p-card__link:focus-visible .p-card__logo { opacity: 0; }

.p-card__item.is-center .p-card__face,
.p-card__link:hover .p-card__face,
.p-card__link:focus-visible .p-card__face { opacity: 1; transform: scale(1); }

/* ホバーで下端に1本だけグラデを通す */
.p-card__visual::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background-image: var(--grad-line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--ease);
  z-index: 2;
}

/* 中央だけ大きく、それ以外は小さく。
   縮小分がそのままだと中央の両隣だけ隙間が狭くなるので、
   js/main.js が --tx（相殺のずらし量）を1枚ずつ入れて隙間を均す。
   scale と translate はどちらも transform なので、レイアウト幅は動かない
   ＝ 送りの計算（step / ループ / カウンター）に影響しない */
.p-voice {
  --sc-side: .84;
  --sc-center: 1.06;
}

.p-voice .p-card__item {
  transform: translateX(var(--tx, 0px)) scale(var(--sc-side));
  transform-origin: 50% 50%;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
  opacity: .42;
}

.p-voice .p-card__item.is-center {
  transform: translateX(0) scale(var(--sc-center));
  opacity: 1;
  z-index: 1;
}

/* ホバーで下端に1本だけグラデを通す */
.p-card__visual::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background-image: var(--grad-line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--ease);
  z-index: 2;
}

.p-card__link:hover .p-card__visual::after { transform: scaleX(1); }

.p-card__company {
  display: block;
  margin-top: 24px;
  font-family: var(--f-go);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .28em;
  color: var(--c-text-dim);
}

.p-card__headline {
  display: block;
  margin-top: 14px;
  font-family: var(--f-min);
  font-weight: 600;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.75;
  letter-spacing: .04em;
}

.p-card__lead {
  display: block;
  margin-top: 14px;
  font-size: 12px;
  line-height: 2;
  color: var(--c-text-mute);
}

.p-card__person {
  display: block;
  padding-top: 16px;
  margin-top: 20px;
  border-top: 1px solid var(--c-line);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--c-text-mute);
}

.p-card__person b {
  font-weight: 700;
  font-size: 13px;
  color: var(--c-text);
  margin-right: .7em;
}

/* ------------------------------------------------------------- VOICE 単位 */

.p-voice { position: relative; }

/* VOICE 同士は余白だけで切る。罫は見出しの1本で足りている */
.p-voice + .p-voice { margin-top: clamp(90px, 11vw, 180px); }

/* --- 見出しの組みは forbesjapan.com/small_giants の tit-box-main に合わせる ---
   特大の英字 → 罫線 → 罫線の下に右寄せの日本語 */

.p-voice__head {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 40px);
  margin-bottom: clamp(30px, 3.6vw, 48px);
}

/* 記事ページからのアンカー移動でヘッダーに潜らせない */
.p-voice { scroll-margin-top: calc(var(--header-h) + 24px); }

.p-voice__en {
  flex: none;
  font-family: var(--f-en);
  font-weight: 600;
  font-size: clamp(28px, 4.6vw, 58px);
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* 下線ではなく、見出しとカウンターの間を埋める線として使う */
.p-voice__rule {
  flex: 1;
  min-width: 40px;
  height: 2px;
  background-image: var(--grad-line);
}

/* --- 送りの操作（矢印 ＋ 現在位置）。見出しの右端に置く --- */

.p-voice__count {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-en);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .18em;
  color: var(--c-text-mute);
}

.p-voice__count i { font-style: normal; padding: 0 2px; color: var(--c-text-dim); }
.p-voice__count .js-slider-current { color: var(--c-text); }

.p-voice__arrow {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--c-text-mute);
  transition: color .35s var(--ease), transform .35s var(--ease);
}

.p-voice__arrow:hover:not(:disabled) { color: var(--c-text); }
.p-voice__arrow:disabled { opacity: .26; cursor: default; }

.p-voice__arrow svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.2;
}

/* ==========================================================================
   下層ページ（CONTACT / POLICY）
   ========================================================================== */

.p-page__hero {
  padding: calc(var(--header-h) + clamp(64px, 9vw, 130px)) 0 clamp(46px, 6vw, 78px);
  border-bottom: 1px solid var(--c-line);
}

.p-page__en {
  /* グラデは背景ボックスの幅で切られる。文字幅に合わせないと色が出きらない */
  display: inline-block;
  font-family: var(--f-en);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 92px);
  line-height: 1;
  letter-spacing: .01em;
  background-image: var(--grad-line);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.p-page__jp {
  margin-top: 20px;
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--c-text-mute);
}

.p-doc { max-width: 760px; }

.p-doc h2 {
  margin-top: clamp(44px, 5vw, 68px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--f-min);
  font-weight: 600;
  font-size: clamp(17px, 1.8vw, 21px);
  letter-spacing: .06em;
}

.p-doc h2:first-child { margin-top: 0; }

.p-doc p, .p-doc li {
  margin-top: 1.4em;
  font-size: 14px;
  line-height: 2.2;
  color: var(--c-text-mute);
}

.p-doc ul { list-style: none; }

.p-doc li { position: relative; padding-left: 1.3em; }

.p-doc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 6px;
  height: 1px;
  background: var(--c-text-dim);
}

.p-form { max-width: 680px; }

.p-form__row { padding-block: clamp(22px, 2.6vw, 32px); border-bottom: 1px solid var(--c-line); }
.p-form__row:first-child { border-top: 1px solid var(--c-line); }

.p-form__label {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
}

.p-form__label em {
  font-style: normal;
  margin-left: .8em;
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--g-coral);
}

.p-form__row input,
.p-form__row textarea {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: 14px;
  color: var(--c-text);
  background: var(--c-base-deep);
  border: 1px solid var(--c-line);
  transition: border-color .4s var(--ease);
}

.p-form__row input:focus,
.p-form__row textarea:focus { border-color: var(--c-text-mute); outline: none; }

.p-form__row textarea { min-height: 190px; resize: vertical; }

.p-form__submit { margin-top: clamp(34px, 4vw, 48px); }

.p-article__othersTitle {
  display: flex;
  justify-content: flex-end;
  margin-top: -22px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1000px) {
  .p-about { grid-template-columns: 1fr; }
  .p-about__eyebrow,
  .p-about__title,
  .p-about__body { grid-column: 1; }
  .p-about__eyebrow { grid-row: 1; }
  .p-about__title { grid-row: 2; }
  .p-about__body { grid-row: 3; margin-top: 44px; }
}

@media (max-width: 860px) {
  /* SP は全画面まで引っ張らない。写真が読める高さで止める */
  .p-hero { min-height: 78vh; min-height: 78svh; }
  .p-hero__scroll { display: none; }

  .p-card__item { width: min(72vw, 300px); }

  /* SP は矢印を隠してスワイプのみ。位置表示は残す */
  .p-voice__arrow { display: none; }
}

/* ==========================================================================
   INTERVIEWS 一覧
   ========================================================================== */

.p-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(30px, 3.4vw, 52px) clamp(16px, 2vw, 28px);
}

.p-list .p-card__item { width: auto; }

/* ==========================================================================
   ARTICLE
   現行サイト（challengersvoice.com）の post_page と同じ並び。
     .title       → hero（記事見出し）
     .company_info → profile（社名・役職／氏名／プロフィール／企業サイト／写真）
     .post_content → body（heading / text / image / image-text[.is-reverse]）
   HTML は article.html 1枚だけ。中身は js/article.js が描く
   ========================================================================== */

/* 記事は 900px の1列に収める（タイトル・プロフィール・本文で幅を揃える）。
   下の OTHER INTERVIEWS は .p-article の外なので広いまま */
.p-article .l-inner { max-width: calc(900px + var(--pad-side) * 2); }

.p-article__hero {
  padding-top: calc(var(--header-h) + clamp(48px, 7vw, 96px));
  padding-bottom: clamp(38px, 5vw, 64px);
}

.p-article__eyebrow { margin-bottom: 22px; }

.p-article__title {
  font-family: var(--f-min);
  font-weight: 600;
  font-size: clamp(26px, 4.2vw, 56px);
  line-height: 1.45;
  letter-spacing: .04em;
  /* 幅を詰めて、行が2〜3本で決まるようにする */
  max-width: 17em;
  /* 「総合診療かか／りつけ医」のような文節の途中で折らない。
     未対応ブラウザは既定の禁則にフォールバックする */
  word-break: auto-phrase;
}

/* ------------------------------------------------------------- プロフィール */

.p-article__profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: clamp(30px, 4vw, 56px);
  align-items: start;
  padding-block: clamp(38px, 5vw, 64px);
  border-top: 1px solid transparent;
  border-image: var(--grad-line) 1;
}

.p-article__company {
  font-family: var(--f-en);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--c-text-mute);
}

/* 役職は社名の下に落とす。長い部署名でも折り返しで崩れない */
.p-article__company i {
  display: block;
  margin-top: 8px;
  font-family: var(--f-go);
  font-style: normal;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--c-text-dim);
}

.p-article__name {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
}

.p-article__name b {
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 27px);
  letter-spacing: .08em;
  line-height: 1.5;
}

/* 現行は Caveat の手書き。リニューアル案では EN ラベルの書体に寄せる */
.p-article__name span {
  font-family: var(--f-en);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.p-article__bio {
  margin-top: clamp(20px, 2.4vw, 30px);
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--c-line-soft);
  font-size: 13px;
  line-height: 2.15;
  color: var(--c-text-mute);
}

.p-article__site {
  margin-top: 24px;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.p-article__visual img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }

/* --------------------------------------------------------------------- 本文 */

.p-article__body {
  padding-block: clamp(44px, 6vw, 84px);
  border-top: 1px solid transparent;
  border-image: var(--grad-line) 1;
}

.p-article__h {
  margin-top: clamp(52px, 6vw, 86px);
  font-family: var(--f-min);
  font-weight: 600;
  font-size: clamp(19px, 2.1vw, 26px);
  line-height: 1.8;
  letter-spacing: .05em;
}

.p-article__h:first-child { margin-top: 0; }

.p-article__h::before {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  background-image: var(--grad-line);
  margin-bottom: 22px;
}

/* 現行の .post_content p と同じく改行をそのまま出す */
.p-article__text p {
  margin-top: 1.7em;
  font-size: 14.5px;
  line-height: 2;
  white-space: pre-line;
  color: rgba(255, 255, 255, .78);
}

.p-article__figure { margin-top: clamp(38px, 4.4vw, 60px); }

.p-article__figure img {
  display: block;
  width: 100%;
}

/* 現行の .image-text-wrapper。reverse で画像が右に来る */
.p-article__split {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(24px, 2vw, 44px);
  align-items: start;
  margin-top: clamp(38px, 4.4vw, 60px);
}

.p-article__split.is-reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
.p-article__split.is-reverse .p-article__splitVisual { order: 2; }

.p-article__splitVisual { position: sticky; top: calc(var(--header-h) + 24px); }

.p-article__splitVisual img {
  display: block;
  width: 100%;
}

.p-article__split .p-article__text p:first-child { margin-top: 0; }

.p-article__others { margin-top: 34px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1000px) {
  .p-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .p-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; }

  .p-article__profile { grid-template-columns: 1fr; }
  .p-article__visual { order: -1; }

  /* SP は画像を上、テキストを下に積む。reverse でも並びは変えない */
  .p-article__split,
  .p-article__split.is-reverse { grid-template-columns: 1fr; }
  .p-article__split.is-reverse .p-article__splitVisual { order: 0; }
  .p-article__splitVisual { position: static; }
}

@media (max-width: 480px) {
  .p-list { grid-template-columns: 1fr; }
}