/* ============================================================================
   MATERIAL RECRUITE SITE - style.css

   構成順序:
   1. Reset
   2. Base（:root変数 / html,body / タイポグラフィ基本）
   3. Layout（l-*：サイト全体の骨格。l-inner / l-section / l-header / l-footer）
   4. Component（c-*：ボタン・カード・タグ・スライダー等の小さな共通パーツ）
   5. Page：各ページ固有スタイル。p-*には統一せず、ページ名をそのままプレフィックスにする
      （top-* / system-* / figures-* / interview-* / member-* / jobs-* / news-* /
      what-* / not-found-* など）。WordPress化後のテンプレートファイル名
      （page-system.php 等）と対応が取れるようにするため。
      page-hero__* / section-heading__* は特定ページに属さない、固定ページ共通の
      見出しコンポーネント（c-*に近い位置づけ）としてページ名を付けていない。
   6. Hover Actions（PCのみ / min-width:1024px。:hoverを使う演出を集約）
   ============================================================================ */

/* フォント読み込み（Google Fonts）
   ・和文本文：Noto Sans JP
   ・欧文見出し／ナビゲーションメニュー／インタビューのイニシャル：Heebo
   ・「数字で見るマテリアル」の強調数字：Barlow Semi Condensed
   使用箇所は --font-base / --font-en / --font-number（:root変数）を参照。 */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700;800&family=Heebo:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;600;700;900&display=swap');

/* ============================================================================
   1. Reset
   ============================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
figure,
figcaption,
blockquote {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
  /* vertical-align: bottom; */
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  appearance: none;
}

button,
input,
textarea,
select {
  font-family: inherit;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ============================================================================
   2. Base
   ============================================================================ */
:root {

  /* ---- Color ---- */
  --color-primary: #B60005;
  --color-primary-light: #E0080E;
  --color-secondary: #DE4527;
  --color-secondary-light: #FF6A4D;

  --color-black: #000000;
  --color-white: #ffffff;

  --color-text: #282828;
  --color-text-2: #444444;
  --color-text-sub: #666666;
  --color-border-1: #DCDCDC;
  --color-border-2: #EEEEEE;
  --color-bg-gray: #F6F6F6;

  /* ---- Font ---- */
  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-en: "Heebo", var(--font-base);
  --font-number: "Barlow Semi Condensed", var(--font-base);

  --fs-10: 1.0rem;
  --fs-12: 1.2rem;
  --fs-13: 1.3rem;
  --fs-14: 1.4rem;
  --fs-15: 1.5rem;
  --fs-16: 1.6rem;
  --fs-18: 1.8rem;
  --fs-20: 2.0rem;
  --fs-22: 2.2rem;
  --fs-24: 2.4rem;
  --fs-26: 2.6rem;
  --fs-28: 2.8rem;
  --fs-32: 3.2rem;
  --fs-36: 3.6rem;
  --fs-40: 4.0rem;
  --fs-48: 4.8rem;
  --fs-56: 5.6rem;
  --fs-64: 6.4rem;

  /* ---- Spacing ----
     フォントサイズ（--fs-*）と同様、px数がそのまま分かるように --space-{px数} で命名する。
  ------------------------------------------------------------------------ */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-60: 60px;
  --space-64: 64px;
  --space-80: 80px;
  --space-88: 88px;
  --space-100: 100px;
  --space-120: 120px;

  --inner-width: 1280px;
  /* 共通インナー幅 */

}

html {
  font-size: 62.5%;
  /* 1rem = 10px 換算（--fs-* のフォントサイズ変数のみで使用） */
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  position: relative;
  font-family: var(--font-base);
  font-size: var(--fs-16);
  line-height: 1.8;
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 1023px) {

  html,
  body {
    overflow-x: hidden;
  }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.7;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, rgba(249, 249, 249, 1) 50%, rgba(249, 249, 249, 0) 100%);
}

body.is-locked {
  overflow: hidden;
  /* ドロワー表示中の背面スクロール制御用 */
}

.red-text {
  color: var(--color-primary);
}

.pc {
  display: block !important;
  ;
}

.sp {
  display: none !important;
}

.pc-fv {
  display: block !important;
  ;
}

.sp-fv {
  display: none !important;
}

@media (max-width: 1023px) {
  .sp-fv {
    display: block !important;
    ;
  }

  .pc-fv {
    display: none !important;
    ;
  }
}

@media (max-width: 768px) {
  .sp {
    display: block !important;
    ;
  }

  .pc {
    display: none !important;
    ;
  }
}

/* ============================================================================
   3. Layout（l-*）
   ============================================================================ */

/* 共通インナー幅 ------------------------------------------------------------ */
.l-inner {
  position: relative;
  width: 100%;
  max-width: var(--inner-width);
  margin: 0 auto;
  padding: 0 var(--space-40);
}

/* セクション共通の上下余白 --------------------------------------------------- */
.l-section {
  padding: var(--space-120) 0;
}

.l-lower-section {
  padding: var(--space-80) 0 var(--space-120);
}

@media (max-width: 1023px) {
  .l-section {
    padding: var(--space-80) 0;
  }
}

@media (max-width: 500px) {
  .l-inner {
    padding: 0 var(--space-24);
  }

  .l-section {
    padding: var(--space-40) 0;
  }

  .l-lower-section {
    padding: var(--space-48) 0;
  }
}

/* ============================================================================
   4. Component（c-*）
   ============================================================================ */

/* ----------------------------------------------------------------------------
   共通ボタン（.c-btn）
   ボタンはPHPパーツ化せず、HTMLに直接記述しCSSで見た目を共通化する。
---------------------------------------------------------------------------- */
.c-btn {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

/* ヘッダー内 ENTRYボタン */
.c-btn--entry {
  display: inline-flex;
  align-items: center;
  transition: opacity 0.2s ease;
  height: 100%;
  padding: 0 var(--space-24);
  gap: var(--space-16);
  background: var(--color-primary);
  color: var(--color-white);
}

.c-btn--entry .c-btn__text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.c-btn--entry .c-btn__en {
  font-family: var(--font-en);
  font-size: var(--fs-16);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.c-btn--entry .c-btn__ja {
  font-size: var(--fs-10);
}

/* 区切り線 */
.c-btn--entry .c-btn__divider {
  width: 1px;
  height: 29px;
  background: rgba(255, 255, 255, 0.5);
}

/* 「＋」アイコン（線で作成。ホバー時に「－」へ切り替える） */
.c-btn--entry .c-btn__icon {
  position: relative;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
}

.c-btn--entry .c-btn__icon::before,
.c-btn--entry .c-btn__icon::after {
  content: "";
  position: absolute;
  background: var(--color-white);
}

.c-btn--entry .c-btn__icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}

.c-btn--entry .c-btn__icon::after {
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
  transition: transform 0.2s ease;
}

/* ENTRYボタン＋ホバーメニューのラッパー */
.l-header__entry-wrap {
  position: relative;
  height: 100%;
}

/* ホバー時に開くENTRYメニュー（新卒/キャリア採用） */
.l-header__entry-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--color-primary);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.l-header__entry-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-16) var(--space-12);
  color: var(--color-white);
  font-size: var(--fs-14);
  white-space: nowrap;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.2s ease;
}

.l-header__entry-menu-arrow {
  flex-shrink: 0;
}

/* 下部CTAボタン（大） */
.c-btn--cta {
  width: 100%;
  padding: var(--space-24);
  color: var(--color-white);
  font-size: var(--fs-28);
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

.c-btn--cta::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 120px;
  height: 120px;
  clip-path: polygon(100% 100%, 100% 0, 0 100%);
  opacity: 0.3;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
  pointer-events: none;
}

/* ラベルは「ボタン左端〜ディバイダー」の間で左右中央にくるようにする */
.c-btn--cta .c-btn__label {
  flex: 1;
  text-align: center;
  display: inline-block;
  transition: transform 0.3s ease;
}

.c-btn--cta .c-btn__divider {
  margin-left: auto;
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.5);
}

.c-btn--cta .c-btn__arrow {
  margin-left: var(--space-16);
}

.c-btn--cta-new {
  background: var(--color-primary);
  height: 120px;
  justify-content: space-between;
}

.c-btn--cta-career {
  background: var(--color-secondary);
  height: 120px;
  justify-content: space-between;
}

/* 汎用の丸型ボタン（NEWS「一覧を見る」/ MESSAGE「ENTRYする」/
   WHAT MATERIALカード内リンク 等、複数箇所で使い回す） */
/* ----------------------------------------------------------------------------
   丸型ボタン（.c-btn--primary / --secondary / --outline）
   ・見た目（形・サイズ・余白・ラベル/矢印のホバー演出）は共通で、
     色（背景・文字色・枠線・区切り線の色）だけが異なる。
   ・そのため共通部分は3つのセレクタをまとめて1箇所に定義し、
     色に関わる部分だけを各モディファイアで個別に上書きする。
---------------------------------------------------------------------------- */
.c-btn--primary,
.c-btn--secondary,
.c-btn--outline {
  justify-content: space-between;
  padding: var(--space-4) var(--space-8);
  border-radius: 999px;
  font-size: var(--fs-15);
  font-weight: 500;
  transition: background-color 0.3s ease;
  min-width: 240px;
  min-height: 48px;
}

/* 外部サイトへのリンクを示すアイコン（新卒/キャリア採用エントリー等）
   ・mask-image + background-color:currentColor にすることで、
     テキストの色が変わればアイコンの色も自動的に追従。
   ・.c-btn__label の中（テキストの直後）に置くことで、ホバー時の
     transform（テキストが動く演出）にもそのまま一緒に追従。 */
.c-btn__external-icon {
  display: inline-block;
  width: 0.75em;
  height: 1.35em;
  margin-left: var(--space-4);
  vertical-align: -0.05em;
  background-color: currentColor;
  -webkit-mask-image: url('../images/common/icon-link.svg');
  mask-image: url('../images/common/icon-link.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.c-btn__r {
  display: flex;
  align-items: center;
  width: 40px;
}

.c-btn--primary .c-btn__label,
.c-btn--secondary .c-btn__label,
.c-btn--outline .c-btn__label {
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
  width: calc(100% - 40px);
  text-align: center;
}

.c-btn--primary .c-btn__divider,
.c-btn--secondary .c-btn__divider,
.c-btn--outline .c-btn__divider {
  width: 1px;
  height: 20px;
  transition: background-color 0.3s ease;
}

.c-btn--primary .c-btn__arrow,
.c-btn--secondary .c-btn__arrow,
.c-btn--outline .c-btn__arrow {
  width: 18px;
  margin-left: 11px;
}

/* ---- 色違い（primary） ---- */
.c-btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.c-btn--primary .c-btn__divider {
  background: rgba(255, 255, 255, 0.5);
}

/* ---- 色違い（secondary） ---- */
.c-btn--secondary {
  background: var(--color-secondary);
  color: var(--color-white);
}

.c-btn--secondary .c-btn__divider {
  background: rgba(255, 255, 255, 0.5);
}

/* ---- 色違い（outline） ---- */
.c-btn--outline {
  background: var(--color-white);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.c-btn--outline .c-btn__divider {
  background-color: var(--color-primary);
}

.c-btn--outline .c-btn__arrow::before {
  background-image: url("../images/common/btn-arrow.svg");
}

.c-btn--outline .c-btn__arrow::after {
  background-image: url("../images/common/btn-arrow_w.svg");
}

/* 矢印アイコン共通（.c-btn__arrow） */
.c-btn__arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 1em;
  height: 1em;
  color: transparent;
}

.c-btn__arrow::before,
.c-btn__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
  background-image: url("../images/common/btn-arrow_w.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 18px;
  height: 18px;
}

.c-btn__arrow::after {
  transform: translate(-220%, -50%);
}

/* ドロワー内 新卒/キャリア エントリーボタン */
.c-btn--drawer-entry {
  flex: 1;
  justify-content: center;
  text-align: center;
  padding: var(--space-24) var(--space-8);
  border-radius: 4px;
  background: var(--color-white);
  color: var(--color-primary);
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 1.4;
}

@media (max-width: 500px) {
  .c-btn--cta {
    font-size: min(4.8vw, var(--fs-18));
  }

  .c-btn--cta-new,
  .c-btn--cta-career {
    height: 72px;
  }

  .c-btn--outline {
    min-width: 210px;
  }

}

/* ----------------------------------------------------------------------------
   ヘッダー（→ header.php）
---------------------------------------------------------------------------- */
.l-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--color-white);
  z-index: 1000;
  border-bottom: 1px solid var(--color-border-2);
}

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 80px;
}

.l-header__logo {
  padding-left: var(--space-24);
}

.l-header__logo-img {
  width: 128px;
  height: auto;
}

/* PCナビ＋ENTRYをまとめて右側に寄せるグループ */
.l-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-40);
  height: 100%;
}

/* PC用グローバルナビ -------------------------------------------------------- */
.l-header__nav {
  height: 100%;
}

.l-header__nav-list {
  display: flex;
  align-items: center;
  height: 100%;
  gap: var(--space-40);
}

.l-header__nav-item {
  height: 100%;
  display: flex;
  align-items: center;
}

.l-header__nav-link {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  gap: var(--space-4);
  font-family: var(--font-en);
  font-size: var(--fs-14);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.l-header__nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

/* 右側アクション（ENTRY + ハンバーガー）
   ※ 画面右端まで塗り足すため、こちら側には左側のような余白を付けない */
.l-header__action {
  display: flex;
  align-items: center;
  height: 100%;
}

.l-header__hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 80px;
  height: 100%;
  background-color: var(--color-black);
  color: var(--color-white);
}

.l-header__hamburger-line {
  display: block;
  width: 36px;
  height: 2px;
  background: var(--color-white);
}

.l-header__hamburger-label {
  font-family: var(--font-en);
  font-size: var(--fs-14);
  letter-spacing: 0.04em;
  line-height: 1;
}

/* タブレット・SP：ヘッダー高さを縮小し、PCナビ→ハンバーガーに切替 */
@media (max-width: 1023px) {
  .l-header__nav {
    display: none;
  }

  .l-header__hamburger {
    display: flex;
  }
}

@media (max-width: 500px) {
  .l-header__inner {
    height: 72px;
  }

  .l-header__entry-wrap {
    display: none;
  }
}

/* タブレット幅（501px〜1023px）：ENTRYメニューはホバーが使えないため、
   JS（js-entry-toggle）が付与する.is-openクラスで開閉する。
   PC（1024px以上）は下の@media (min-width:1024px)のhover演出を使う。 */
@media (max-width: 1023px) {
  .l-header__entry-wrap.is-open .c-btn--entry .c-btn__icon::after {
    transform: rotate(90deg);
  }

  .l-header__entry-wrap.is-open .l-header__entry-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* ----------------------------------------------------------------------------
   グローバルナビ ドロワー（SP/タブレット）（→ header.php 内に含める想定）
---------------------------------------------------------------------------- */
.l-header__drawer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  background: var(--color-primary);
  color: var(--color-white);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* ロゴ・CLOSEボタンの帯は常に画面幅いっぱいで固定表示（スクロールしない） */
.l-header__drawer-top {
  flex-shrink: 0;
}

.l-header__drawer-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.l-header__drawer.is-open {
  opacity: 1;
  pointer-events: all;
}

.l-header__drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.l-header__drawer-logo {
  width: 128px;
  margin-left: var(--space-24);
}

.l-header__drawer-close {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--fs-14);
  letter-spacing: 0.04em;
  width: 80px;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
}

.l-header__drawer-close-icon {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 16px;
}

.l-header__drawer-close-icon::before,
.l-header__drawer-close-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-white);
}

.l-header__drawer-close-icon::before {
  transform: rotate(15deg);
}

.l-header__drawer-close-icon::after {
  transform: rotate(-15deg);
}

.l-header__drawer-entry {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-40);
  padding: var(--space-32) min(12%, var(--space-24)) 0;
}

.l-header__drawer-nav {
  padding: var(--space-24) min(12%, var(--space-24));
}

.l-header__drawer-nav-list {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.l-header__drawer-nav-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.l-header__drawer-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-16) var(--space-8);
  font-family: var(--font-en);
  font-size: var(--fs-16);
  font-weight: 600;
  text-align: left;
  color: var(--color-white);
}

.l-header__drawer-nav-child {
  padding-left: var(--space-16);
}

.l-header__drawer-nav-child-link {
  display: block;
  padding: var(--space-8) var(--space-16);
  font-size: var(--fs-14);
  position: relative;
}

.l-header__drawer-nav-child:last-child .l-header__drawer-nav-child-link {
  padding-bottom: var(--fs-16);
}

.l-header__drawer-nav-child-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 1px;
  transform: translateY(-50%);
  background-color: var(--color-white);
}

@media (max-width: 500px) {
  .l-header__drawer-top {
    height: 72px;
  }
}

/* ----------------------------------------------------------------------------
   パンくず（→ breadcrumb.php）
---------------------------------------------------------------------------- */
.c-breadcrumb {
  padding-top: var(--space-40);
}

.c-breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.c-breadcrumb__item {
  display: flex;
  align-items: center;
  font-size: var(--fs-12);
  line-height: 1;
  color: var(--color-text-sub);
}

.c-breadcrumb__item:not(:first-child)::before {
  content: "—";
  margin: 0 var(--space-8);
  color: var(--color-text-sub);
}

.c-breadcrumb__link {
  font-family: var(--font-en);
  color: var(--color-text-sub);
  transition: color 0.3s ease;
}

.c-breadcrumb__link--home {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.c-breadcrumb__home-icon {
  height: 14px;
  width: auto;
  display: block;
}

.c-breadcrumb__link--home .c-breadcrumb__label {
  line-height: 14px;
}

@media (max-width: 500px) {
  .c-breadcrumb__list {
    justify-content: flex-start;
  }
}

/* ----------------------------------------------------------------------------
   下部CTA（→ cta.php）
   ・.c-cta と .c-cta-lower は同じCTAの見た目違いではなく、
     「直前に何が来るか」で上部余白だけを変えた意図的な2種類。
     - .c-cta      … 直前のセクションが既に十分な下余白を持っている場合（TOP / MEMBER / NEWS / INTERVIEW 等）
     - .c-cta-lower … 直前が .c-what-preview（WHAT MATERIAL導線）の場合。上に大きめの余白(space-120)を追加する
   　cta.php化する際もこの2クラスは統合せず、呼び出し側で出し分けること。
---------------------------------------------------------------------------- */
.c-cta {
  padding-bottom: var(--space-64);
}

/* FOLLOW USセクションを非表示にしている間、CTAの上に代わりの余白を
   補うためのクラス（front-page.php側でMATERIAL_SHOW_FOLLOW_USがfalseの
   時だけ付与される）。PC: 120px / SP: 48px。 */
.c-cta--top-gap {
  padding-top: var(--space-120);
}

@media (max-width: 768px) {
  .c-cta--top-gap {
    padding-top: var(--space-48);
  }
}

.c-cta-lower {
  padding: var(--space-120) 0 var(--space-64);
}

.c-cta__inner {
  display: flex;
  gap: var(--space-24);
}

@media (max-width: 1023px) {
  .c-cta__inner {
    flex-direction: column;
  }
}

/* ----------------------------------------------------------------------------
   フッター（→ footer.php）
---------------------------------------------------------------------------- */
.l-footer {
  position: relative;
  background: var(--color-black);
  color: var(--color-white);
  padding: var(--space-40) 0 var(--space-80);
}

.l-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-36);
}

.l-footer__logo-img {
  width: 55vw;
  max-width: 268px;
  height: auto;
}

.l-footer__pagetop {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  font-size: var(--fs-13);
  color: var(--color-white);
  transition: opacity 0.3s ease;
}

.l-footer__pagetop-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.5);
}

.l-footer__main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-40);
  padding: var(--space-48) 0 0;
  border-top: 1px solid rgba(128, 128, 128, 0.5);
  margin-bottom: var(--space-24);
}

.l-footer__nav a {
  transition: opacity 0.3s ease;
}

.l-footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-64);
}

.l-footer__nav-link {
  display: inline-block;
  font-family: var(--font-en);
  font-size: var(--fs-16);
  font-weight: 600;
}

.l-footer__nav-child {
  margin-top: var(--space-20);
}

.l-footer__nav-child-link {
  display: block;
  margin-left: 16px;
  margin-bottom: var(--space-20);
  font-size: var(--fs-13);
  position: relative;
}

.l-footer__nav-child-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -16px;
  width: 8px;
  height: 1px;
  transform: translateY(-50%);
  background-color: var(--color-white);
}

.l-footer__company {
  font-size: var(--fs-14);
  text-align: left;
}

.l-footer__company-address {
  margin-bottom: var(--space-32);
}

.l-footer__company-link {
  font-size: var(--fs-13);
  margin-bottom: var(--space-24);
  transition: opacity 0.3s ease;
}

.l-footer__company-link-a {
  display: flex;
  gap: var(--space-8);
}

.l-footer__privacy {
  font-size: var(--fs-13);
  transition: opacity 0.3s ease;
}

.l-footer__sns {
  display: flex;
  gap: var(--space-24);
  margin-top: var(--space-32);
  justify-content: flex-start;
}

.l-footer__sns-icon {
  height: 24px;
  width: auto;
}

@media (max-width: 1023px) {
  .l-footer__main {
    flex-direction: column;
  }
}

@media (max-width: 500px) {
  .l-footer__nav-list {
    flex-direction: column;
    align-items: center;
    gap: var(--space-36);
  }

  .l-footer__main {
    margin-bottom: 0;
    gap: var(--space-48);
  }

  .l-footer__company {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .l-footer__sns {
    justify-content: flex-start;
  }
}

/* ----------------------------------------------------------------------------
   カード（.c-card）
   member / jobs カードの土台。共通の見た目はここで管理し、
   投稿タイプごとの差分は modifier（c-card--member 等）で吸収する。
   ※ WordPress化時、member/jobsループ内の1カード分がこの単位に対応する。
   ※ カードの見た目もPHPパーツ化せず、HTML構造とCSSクラスで共通化する。
---------------------------------------------------------------------------- */
.c-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.c-card__thumb {
  background: var(--color-bg-gray);
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  height: auto;
}

.c-card__image {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.c-card__image-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.c-card__title {
  font-size: min(2.5vw, var(--fs-20));
  font-weight: 600;
  line-height: 1.6;
  position: absolute;
  left: -16px;
  bottom: -16px;
  transition: color 0.3s ease;
}

.c-card__title-line {
  background-color: var(--color-white);
  padding: var(--space-2) var(--space-8);
  width: fit-content;
  transition: background-color 0.3s ease;
}

.c-card__body {
  flex: 0 0 auto;
  padding: var(--space-40) 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.c-card__name {
  font-family: var(--font-en);
  font-size: var(--fs-18);
  font-weight: 600;
}

.c-card__type {
  font-size: var(--fs-16);
  font-weight: 400;
  color: var(--color-text-sub);
  margin-left: var(--space-8);
}

.c-card__dept {
  font-size: var(--fs-12);
}

/* memberカード：右下に丸い矢印リンクを重ねる */
.c-card--member {
  position: relative;
}

.c-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 20px;
  border-radius: 20px;
  background: var(--color-primary);
  position: relative;
  overflow: hidden;
}

.c-card__arrow::before,
.c-card__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
  background-image: url("../images/common/btn-arrow_w.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 18px;
  height: 18px;
}

.c-card__arrow::after {
  transform: translate(-240%, -50%);
}

@media (max-width: 500px) {
  .c-card__title {
    font-size: var(--fs-16);
  }
}

/* ----------------------------------------------------------------------------
   スライダー（.c-slider）
   WORK / MEMBER 共通の横スクロールスライダー。
   js-slider-group 単位でJSが前後ボタンのスクロールを制御する。
---------------------------------------------------------------------------- */
.c-slider {
  position: relative;
}

.c-slider__track {
  display: flex;
  gap: var(--space-64);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Firefox */
}

.c-slider__track::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

.c-slider__item {
  flex: 0 0 auto;
  width: 305px;
  scroll-snap-align: start;
  padding-left: var(--space-16);
}

.c-slider__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 32px;
  border-radius: 32px;
  background: var(--color-white);
  border: 1px solid var(--color-primary);
  font-size: var(--fs-18);
  color: var(--color-text);
}

@media (max-width: 500px) {
  .c-slider__track {
    gap: var(--space-16);
  }
}

/* ----------------------------------------------------------------------------
   NEWSリスト行（.c-news-list）
   ・タグ＋日付＋タイトル＋矢印の1行パターン。
   ・トップページのNEWSプレビュー（index.html）と、NEWS一覧ページ
     （news.html）の両方で使用する共通コンポーネント。
   ・行を囲むレイアウト（TOPの2カラム配置や、news.htmlのフィルタータブ等）
     は各ページ側で個別に用意し、ここでは行の中身だけを共通化する。
---------------------------------------------------------------------------- */
.c-news-list {
  border-top: 1px solid var(--color-border-1);
}

.c-news-list__item {
  border-bottom: 1px solid var(--color-border-1);
}

/* お知らせが1件も無い場合の空状態表示 */
.c-news-list__item--empty {
  padding: var(--space-24) var(--space-4);
  color: var(--color-text-sub);
}

/* WHAT MATERIAL関連導線（.c-what-preview）は、各セクションブロック
   （数字セクション／コンセプトセクション／アイコンセクション／福利厚生セクション）
   の「このセクションの最後にWHAT MATERIAL導線を表示する」がオンのとき、
   そのセクション自身の.l-innerの中に直接差し込まれる（別セクション化しない）。
   これにより背景色・下余白を含めて完全にそのセクションと共有され、
   .c-what-preview自身の上余白(80px)だけが自然に効く。 */

.c-news-list__link {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-24) var(--space-4) var(--space-16);
}

.c-news-list__meta {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.c-news-list__tag {
  flex-shrink: 0;
  display: flex;
  min-width: 80px;
  min-height: 20px;
  padding: var(--space-2) var(--space-4) 3px;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--color-white);
  background: var(--color-text-sub);
  line-height: 1;
  align-items: center;
  justify-content: center;
}

.c-news-list__tag--new {
  background: var(--color-primary);
}

.c-news-list__tag--career {
  background: var(--color-secondary);
}

.c-news-list__date {
  flex-shrink: 0;
  font-family: var(--font-en);
  font-size: var(--fs-13);
  color: var(--color-text-sub);
}

.c-news-list__content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.c-news-list__title {
  flex: 1;
  font-size: var(--fs-16);
  transform: translateX(0);
  transition: color 0.2s ease, transform 0.2s ease;
}

.c-news-list__arrow {
  flex-shrink: 0;
  color: var(--color-primary);
  width: 11px;
  height: 11px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.c-news-list__arrow::before,
.c-news-list__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
  background-image: url("../images/common/arrow.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 11px;
  height: 11px;
}

.c-news-list__arrow::after {
  transform: translate(-220%, -50%);
}

@media (max-width: 500px) {
  .c-news-list__link {
    flex-wrap: wrap;
    row-gap: var(--space-4);
  }

  .c-news-list__title {
    max-width: 92%;
  }
}

/* ============================================================================
   4.5 固定ページ共通テンプレート（page-hero / section-heading）
   ※ c-* ではない：ボタンやカードのような汎用小部品ではなく、
     「固定ページ上部の型」「本文内の見出しの型」という、より大きな単位のため。
   - page-hero        … 見出し／ヒーロー画像／リード文。固定ページ上部の共通テンプレート。
   - section-heading  … 本文（HTML流し込みエリア）内で繰り返す見出しパターン。
   ============================================================================ */

/* ----------------------------------------------------------------------------
   下層ページ共通の見出し（.page-hero__head）
   例：MEMBER / WHAT MATERIAL / 職種一覧 など、各下層ページ冒頭の
   「大見出し＋赤い小見出し」パターンをここで共通化する。
---------------------------------------------------------------------------- */
.page-hero__head {
  padding: var(--space-24) var(--space-40) 0;
}

.page-hero__title {
  font-size: var(--fs-56);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}

.member-page .page-hero__title,
.news-page .page-hero__title,
.what-page .page-hero__title {
  font-family: var(--font-en);
}

.page-hero__title--s {
  font-size: var(--fs-32);
}

.page-hero__subtitle {
  font-family: var(--font-en);
  font-size: var(--fs-14);
  color: var(--color-primary);
  margin-top: var(--space-24);
}

@media (max-width: 1023px) {
  .page-hero__title {
    font-size: var(--fs-48);
  }
}

@media (max-width: 500px) {
  .page-hero__head {
    padding: var(--space-24) var(--space-24) 0;
  }

  .page-hero__title {
    font-size: var(--fs-32);
    margin-top: var(--space-8);
  }

  .page-hero__title--s {
    font-size: var(--fs-22);
  }

  .page-hero__subtitle {
    margin-top: var(--space-12);
  }
}

/* ----------------------------------------------------------------------------
   下層固定ページ共通のヒーロー画像（.page-hero__image）
   ※ 職種一覧・働く環境など、固定ページ上部の「テンプレ化」対象パーツ。
     見出し(.page-hero__head)の直下に置く、幅広の1枚画像。
---------------------------------------------------------------------------- */
.page-hero__image {
  position: relative;
  max-width: none;
  margin-top: var(--space-56);
  margin-right: 0;
  margin-bottom: var(--space-56);
  margin-left: max(var(--space-40), calc((100vw - var(--inner-width)) / 2 + var(--space-40)));
  width: calc(100vw - max(var(--space-40), calc((100vw - var(--inner-width)) / 2 + var(--space-40))));
  padding: 0;
}

.page-hero__image-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ----------------------------------------------------------------------------
   下層固定ページ共通のリード文（.page-hero__intro）
   ※ こちらも「テンプレ化」対象。左に強調コピー、右に説明文の2カラム。
   例：「仕事は、ひとつじゃない。」「挑戦を、支える仕組み。」
---------------------------------------------------------------------------- */
.page-hero__intro-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-48);
  padding-bottom: var(--space-80);
  border-bottom: 1px solid var(--color-border-1);
}

.page-hero__intro-quote {
  position: relative;
  display: inline-block;
  font-size: var(--fs-32);
  font-weight: 600;
  line-height: 1.5;
  padding: 0.5em 1.6em;
  text-align: center;
}

.page-hero__intro-mark {
  /* かぎかっこは::before/::afterの線で描画するため、文字自体は視覚的に非表示にする
     （aria-hidden="true"のためアクセシビリティ上の影響はない） */
  display: none;
}

.page-hero__intro-quote::before,
.page-hero__intro-quote::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 32px;
  border: 2px solid var(--color-primary);
}

.page-hero__intro-quote::before {
  top: 0.5em;
  left: 0.3em;
  border-right: none;
  border-bottom: none;
}

.page-hero__intro-quote::after {
  bottom: 0.5em;
  right: 0.3em;
  border-left: none;
  border-top: none;
}

.page-hero__intro-accent {
  color: var(--color-primary);
}

.page-hero__intro-text {
  font-size: var(--fs-15);
}

@media (max-width: 500px) {

  .page-hero__intro-inner {
    padding-bottom: var(--space-48);
  }

  .page-hero__intro-quote {
    font-size: var(--fs-28);
  }

  .page-hero__intro-quote::before,
  .page-hero__intro-quote::after {
    width: 12px;
    height: 26px;
  }

  .page-hero__intro-text {
    font-size: var(--fs-14);
  }
}

/* ----------------------------------------------------------------------------
   固定ページ・流し込みエリア共通のセクション見出し（.section-heading）
   ※ テンプレより下（HTML流し込み想定エリア）で繰り返し使う見出しパターン。
   例：「― CONCEPT / HOW WE WORK」「― SECTION 01 / PAY FOR PERFORMANCE」
---------------------------------------------------------------------------- */
.section-heading__tag {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-family: var(--font-en);
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-12);
}

.section-heading__tag-line {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--color-primary);
}

.section-heading__title {
  font-family: var(--font-en);
  font-size: var(--fs-56);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.section-heading__title--small {
  font-size: var(--fs-28);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.section-heading__subtitle {
  font-size: var(--fs-28);
  font-weight: 600;
  margin-top: var(--space-12);
  line-height: 1.2;
}

.section-heading__text {
  font-size: var(--fs-14);
  line-height: 1.9;
  margin-top: var(--space-40);
}

@media (max-width: 500px) {
  .section-heading__title {
    font-size: var(--fs-36);
  }

  .section-heading__subtitle {
    font-size: var(--fs-16);
    margin-top: var(--space-8);
  }
}

/* ----------------------------------------------------------------------------
   流し込みエリア共通のコンセプトカード（.c-concept-card）
   ※ 番号＋タイトル＋説明文のカード。タグ一覧(__tags)は必要なページのみ使用。
   例：職種一覧「01/ Solution」、働く環境「01/ Pay for Performance」
---------------------------------------------------------------------------- */
.c-concept-card-list {
  display: grid;
  gap: var(--space-24);
  margin-top: var(--space-64);
}

.c-concept-card {
  border: 1px solid var(--color-primary);
  padding: var(--space-40) var(--space-36);
  background-color: var(--color-white);
  position: relative;
}

.c-concept-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 242, 242, 0.5) 50%, rgba(255, 242, 242, 0) 100%);
}

.c-concept-card>* {
  position: relative;
  z-index: 1;
}

.c-concept-card__number,
.system-icon-card__number {
  font-family: var(--font-en);
  font-size: var(--fs-24);
  font-weight: 600;
  line-height: 1;
  color: var(--color-primary);
  position: relative;
  width: 70px;
  margin-bottom: var(--space-36);
  text-align: left;
}

.c-concept-card__slash::before,
.system-icon-card__slash::before {
  content: "";
  position: absolute;
  top: 80%;
  right: 0;
  width: 56px;
  height: 1px;
  background-color: var(--color-primary);
  transform: rotate(-48deg);
  transform-origin: center;
}

.c-concept-card__slash,
.system-icon-card__slash {
  margin-left: 2px;
  font-weight: 400;
  width: 32px;
}

.c-concept-card__label {
  font-size: var(--fs-14);
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: var(--space-8);
}

.c-concept-card__title {
  font-size: var(--fs-24);
  font-weight: 600;
  line-height: 1;
  margin-bottom: var(--space-24);
}

.c-concept-card__title-ja {
  font-size: var(--fs-16);
  font-weight: 600;
  margin-bottom: var(--space-8);
}

.c-concept-card__title-en {
  font-family: var(--font-en);
  font-size: var(--fs-40);
  font-weight: 600;
  line-height: 1;
  color: var(--color-primary);
  margin-bottom: var(--space-8);
}

.c-concept-card__text {
  font-size: var(--fs-14);
}

.c-concept-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-16);
}

.c-concept-card__tag {
  padding: var(--space-4) var(--space-12);
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--color-white);
  background: var(--color-primary);
}

@media (max-width: 500px) {
  .c-concept-card {
    padding: var(--space-40) var(--space-20);
  }

  .c-concept-card__title {
    font-size: var(--fs-28);
    line-height: 1.2;
  }
}

/* ============================================================================
   5. Page（p-*）
   各下層ページ作成時に、ここへページ固有のスタイルを追記していく。
   ページ固有クラスは「ページ名-xxx」で統一する（例：トップページ = top-xxx）
   ============================================================================ */

main {
  margin: 0;
}

/* ----------------------------------------------------------------------------
   Top page（index.html）/ 各セクション共通の見出し
   ・NEWS / MESSAGE / WHAT MATERIAL / VALUE / WORK / MEMBER / FOLLOW US の
     「英語タイトル＋日本語リード」は全セクションで同じ文字スタイルのため、
     このクラスに統一する。
   ・左寄せ／中央寄せの違いは、各セクション側の見出しラッパー
     （.top-xxx__head 等）に text-align を指定して吸収しており、
     このクラス自体には左右の寄せを持たせない。
---------------------------------------------------------------------------- */
.top-section__title {
  font-family: var(--font-en);
  font-size: var(--fs-56);
  font-weight: 600;
  line-height: 1;
}

.top-section__lead {
  font-size: var(--fs-14);
  color: var(--color-primary);
  margin-top: var(--space-12);
}

.top-section__lead--on-dark {
  color: inherit;
}

@media (max-width: 500px) {
  .top-section__title {
    font-size: var(--fs-36);
  }

  .top-section__lead {
    font-size: var(--fs-12);
  }

  .top-follow__text {
    margin-top: var(--space-36);
  }
}

/* ----------------------------------------------------------------------------
   Top page（index.html）/ FV
   ・背景は4枚の写真をゆっくりズームしながらクロスフェードするスライダー
   ・テキストは写真の上に重ねるため、文字色は白ベースにしている
---------------------------------------------------------------------------- */
.top-fv {
  position: relative;
  /* overflow: hidden; */
  margin: 0;
  margin-top: var(--space-40);
  height: calc(100vh - 80px - 40px);
  /* ヘッダー高さ(80px)＋上の余白(40px)を差し引く */
  background: var(--color-white);
  color: var(--color-white);
}

/* 背景スライダー：画像の左だけ80px内側に入れる（見本デザイン仕様） -------- */
.top-fv__slider {
  position: absolute;
  top: 0;
  left: 80px;
  right: 0;
  bottom: 0;
  margin: 0;
  z-index: 0;
  background: var(--color-black);
  /* 画像切り替わりの隙間が見えないようにする保険 */
}

.top-fv__slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.5s ease;
}

.top-fv__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.top-fv__slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transform-origin: center;
}

@keyframes top-fv-zoom {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.1);
  }
}

.top-fv__slide-img.is-zoomed {
  animation: top-fv-zoom 7s ease-out forwards;
}

/* コンテンツ（写真の上に重ねる） ------------------------------------------ */
.top-fv__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: flex-start;
  margin-left: var(--space-80);
}

.top-fv__body {
  position: relative;
  width: 40%;
}

/* 斜めの赤いアクセントライン */
.top-fv__body::before {
  content: "";
  position: absolute;
  top: calc(-4.26vw + 3.4px);
  left: calc(22.02vw - 17.61px);
  /* ※ .top-fv__bodyの実際の幅は「40vw」ではなく「40vw − 32px」になる。
     .top-fv__inner に margin-left:80px（固定px）があり、.top-fv__body の
     width:40%はそのinnerの幅（100vw − 80px）に対する40%のため、
       .top-fv__body の幅 = 0.4 ×（100vw − 80px） = 40vw − 32px
     という、vwだけでは表せない固定px分のオフセットを含む式になる。
     そのため線側もvw単独ではなく、この「40vw − 32px」に対する比率として
     calc()でvwとpxを組み合わせている（1024px幅で検証済みの値から逆算）。
     top    = (40vw−32px) × -0.1064
     left   = (40vw−32px) × 0.5504
     height = (40vw−32px) × 1.0853 */
  width: 2px;
  height: calc(43.41vw - 34.73px);
  background: var(--color-primary);
  transform: rotate(45deg);
  transform-origin: top left;
  pointer-events: none;
}

/* キャッチコピー（画像） */
.top-fv__catch-img {
  margin-bottom: var(--space-40);
}

.top-fv__catch-img img {
  display: block;
  width: 100%;
  height: auto;
}

.top-fv__copy {
  margin-left: var(--space-64);
}

.top-fv__lead {
  font-size: var(--fs-14);
  line-height: 1.9;
  margin-bottom: var(--space-24);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* ブランドコピー（画像） */
.top-fv__brand-img {
  margin-bottom: var(--space-8);
}

.top-fv__brand-img img {
  display: block;
  height: 26px;
  width: auto;
}

.top-fv__tagline {
  font-size: var(--fs-12);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* 右下の装飾：白い三角形はCSS疑似要素で作成 -------------------------------- */
.top-fv__slider::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 180px;
  height: 180px;
  background: var(--color-white);
  clip-path: polygon(100% 100%, 100% 0, 0 100%);
  z-index: 2;
  pointer-events: none;
}

/* 右下の装飾：赤い斜めライン（画像・320×251pxの実画像に合わせたサイズ） */
.top-fv__deco-red {
  position: absolute;
  right: 0;
  bottom: -30px;
  width: 220px;
  height: auto;
  z-index: 3;
  pointer-events: none;
}

@media (max-width: 1023px) {
  .top-fv {
    height: calc(100vh - 60px - 40px);
  }

  .top-fv__inner {
    margin-left: var(--space-40);
  }

  .top-fv__slider {
    left: var(--space-40);
  }

  .top-fv__copy {
    margin-left: var(--space-32);
  }
}

@media (max-width: 768px) {
  .top-fv {
    background-color: initial;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .top-fv__slider {
    height: calc(65vh - 65px);
  }

  .top-fv__slide-img {
    object-position: 74% center;
  }

  .top-fv__inner {
    margin-left: var(--space-24);
    /* 画像側（.top-fv__slider）の左余白と合わせる */
    align-items: flex-end;
    height: calc(65vh - 65px);
  }

  .top-fv__body {
    max-width: 420px;
    width: auto;
    padding-right: 100px;
  }

  /* キャッチコピーの位置・レイアウトが変わる768px以下では、斜めの赤ラインも非表示にする */
  .top-fv__body::before {
    display: none;
  }

  .top-fv__copy {
    /* 親(.top-fv)のalign-itemsをflex-startに戻したため、この要素だけ
       align-selfで個別に中央寄せする（.top-fv__innerには影響しない）。 */
    align-self: center;
    margin-top: var(--space-24);
    margin-bottom: var(--space-16);
    margin-left: 0;
    width: 84%;
    text-align: left;
  }

  .top-fv__copy .top-fv__brand-img img {
    margin: 0;
  }

  .top-fv__slider {
    left: var(--space-24);
  }

  .top-fv__slider::after {
    width: 70px;
    height: 70px;
  }

  .top-fv__deco-red {
    width: 100px;
    right: -10px;
    bottom: -15px;
  }

  .top-fv__lead {
    font-size: var(--fs-14);
    font-weight: 600;
    line-height: 1.9;
    margin-bottom: var(--space-24);
    text-shadow: none;
    color: var(--color-text);
  }

  .top-fv__tagline {
    font-weight: 600;
    text-shadow: none;
    color: var(--color-text);
  }

  .top-fv__catch-img {
    margin-bottom: 0;
  }
}

/* ----------------------------------------------------------------------------
   Top page（index.html）/ NEWS
   ※ NEWSはWordPress化せず、既存/外部のお知らせ一覧への
     静的なリンクバナーとして実装する
   ※ 行の中身（タグ・日付・タイトル・矢印）は共通コンポーネント
     .c-news-list を使用し、ここでは外側のレイアウトのみ定義する。
---------------------------------------------------------------------------- */
.top-news__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.top-news__body {
  width: 70%;
  max-width: 840px;
}

.top-news__more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-40);
}

@media (max-width: 1023px) {
  .top-news__inner {
    align-items: center;
    flex-direction: column;
  }

  .top-news__body {
    width: 100%;
  }

  .top-news__head {
    margin-bottom: var(--space-48);
  }

  .top-section__lead {
    text-align: center;
  }
}

@media (max-width: 500px) {
  .top-news {
    padding-bottom: var(--space-48);
  }

  .top-news__head {
    margin-bottom: var(--space-36);
  }
}

/* ----------------------------------------------------------------------------
   Top page（index.html）/ MESSAGE
   ・画像は左端まで塗り足す（l-innerを適用しない）
   ・テキスト側の右端は、他セクション（l-inner）の右端と同じ位置で揃える
---------------------------------------------------------------------------- */
.top-message {
  padding-bottom: var(--space-120);
}

.top-message__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-64);
  width: 100%;
}

.top-message__image {
  flex: 1 1 45%;
}

.top-message__image-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.top-message__body {
  flex: 1;
  padding-right: max(40px, calc((100vw - 1280px) / 2 + 40px));
}

.top-message__head {
  margin-bottom: var(--space-40);
}

.top-message__content {
  margin-bottom: var(--space-40);
}

.top-message__text {
  font-size: var(--fs-14);
  margin-bottom: var(--space-24);
}

.top-message__catch {
  font-family: var(--font-en);
  font-size: var(--fs-32);
  font-weight: 700;
  color: var(--color-text-2);
}

.top-message__btn-group {
  display: flex;
  gap: var(--space-16);
}

@media (max-width: 1023px) {
  .top-message__inner {
    flex-direction: column;
  }

  .top-message__body {
    padding: 0 var(--space-40);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .top-message {
    padding-bottom: var(--space-80);
  }

  .top-message__image {
    width: 100%;
  }

  .top-message__catch {
    text-align: center;
  }

  .top-message__btn-group {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 500px) {
  .top-message__body {
    padding: 0 var(--space-24);
  }

  .top-message {
    padding-bottom: var(--space-48);
  }

  .top-message__catch {
    font-size: min(8vw, var(--fs-32));
  }
}

/* ----------------------------------------------------------------------------
   Top page（index.html）/ WHAT MATERIAL
   ・カード自体の見た目は共通コンポーネント（.what-hub__*）を使用する。
---------------------------------------------------------------------------- */
.top-what {
  background-color: var(--color-bg-gray);
}

.top-what__head {
  text-align: center;
  margin-bottom: var(--space-56);
}

@media (max-width: 500px) {
  .top-what__head {
    margin-bottom: var(--space-36);
  }
}

/* ----------------------------------------------------------------------------
   Top page（index.html）/ VALUE
---------------------------------------------------------------------------- */
.top-value {
  position: relative;
  color: var(--color-white);
}

/* 背景（赤いradial-gradient）だけをbody::beforeの手前に出し、乗算で重ねる。
   ・.top-valueにz-indexを指定しない（position:relativeのみ）ことで、
     新しいスタッキングコンテキストを作らないようにしている。
     これにより、この::beforeのmix-blend-modeが body::before（さらに背面）
     まで正しく透過して乗算される。
   ・中身のテキスト・カード側は.l-inner（position:relative）で
     ::beforeより後ろのDOM順になるため、::beforeの上（手前）に描画される。 */
.top-value::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#ff0000, #b60005 59%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.top-value__head {
  text-align: center;
  margin-bottom: var(--space-48);
}

.top-value__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--space-48);
}

.top-value__item {
  flex: 0 1 20%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--space-24);
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.top-value__item:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.5);
}

.top-value__icon {
  width: 80px;
  height: 80px;
  line-height: 1;
  margin-bottom: var(--space-16);
}

.top-value__name {
  font-family: var(--font-en);
  font-size: var(--fs-32);
  line-height: 1;
  font-weight: 600;
}

.top-value__text {
  font-size: var(--fs-12);
  line-height: 1.8;
  margin-top: var(--space-16);
  text-align: left;
}

.top-value__stats {
  display: flex;
  gap: var(--space-24);
  padding: var(--space-32);
  background-color: var(--color-white);
  color: var(--color-text);
}

.top-value__stat {
  flex: 1;
  text-align: center;
  position: relative;
}

.top-value__stat:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: -16px;
  height: 100%;
  border-right: 3px dotted rgba(138, 138, 138, 1);
}

.top-value__stat:last-child {
  padding-bottom: 0;
}

.top-value__stat-value {
  font-family: var(--font-number);
  font-size: var(--fs-64);
  font-weight: 600;
  color: var(--color-primary-light);
  line-height: 1;
}

.top-value__stat-value--small {
  font-size: var(--fs-36);
  font-weight: 600;
  color: var(--color-text);
}

.top-value__stat-label {
  font-size: var(--fs-20);
  font-weight: 600;
  margin-top: var(--space-8);
}

.top-value__stat-label--sub {
  font-size: var(--fs-14);
  font-weight: 400;
}

.top-value__stat-note {
  font-size: var(--fs-12);
  margin-top: var(--space-4);
}

@media (max-width: 1023px) {
  .top-value__item {
    flex: 0 1 33.3%;
  }

  .top-value__item:nth-child(4) {
    border-left: 1px solid rgba(255, 255, 255, 0.5);
  }

  .top-value__list {
    row-gap: var(--space-32);
  }
}

@media (max-width: 768px) {
  .top-value__head {
    margin-bottom: var(--space-36);
  }

  .top-value__item {
    flex: 0 1 100%;
    border: none;
  }

  .top-value__item:first-child {
    border-left: none;
  }

  .top-value__item:nth-child(4) {
    border-left: none;
  }

  .top-value__text {
    max-width: 400px;
  }

  .top-value__stats {
    flex-direction: column;
    gap: var(--space-40);
    padding: var(--space-24);
  }

  .top-value__stat:not(:last-child)::after {
    top: auto;
    right: 0;
    bottom: -24px;
    left: 0;
    width: 100%;
    height: 0;
    border-right: none;
    border-bottom: 3px dotted rgba(138, 138, 138, 1);
  }
}

/* ----------------------------------------------------------------------------
   Top page（index.html）/ WORK
---------------------------------------------------------------------------- */
.top-work__head {
  text-align: center;
  margin-bottom: var(--space-56);
}

/* 横長リンクバナー（見出しとボタンの間に設置） */
.top-work__banner {
  margin-bottom: var(--space-56);
}

.top-work__banner-link {
  display: block;
  position: relative;
  overflow: hidden;
  background-color: var(--color-text-sub);
}

.top-work__banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 200px;
}

.top-work__banner-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ----------------------------------------------------------------------------
   Top page（index.html）/ MEMBER
   ※ カードスライダーはWordPress化時、member投稿のループに置き換える。
     （現在はダミーカードを複数並べて表示している）
---------------------------------------------------------------------------- */
.top-member {
  background-color: var(--color-bg-gray);
}

.top-member__heading {
  text-align: center;
}

.top-member__head {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: var(--space-24);
  margin-bottom: var(--space-40);
}

.top-member__nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
  width: 100%;
  max-width: 1200px;
}

/* スライダー部分だけ、左はl-innerの開始位置に揃え、右は画面端まで伸ばす（横スクロールで先を覗かせる） */
.top-member__slider {
  margin-bottom: var(--space-80);
  padding-left: calc(var(--space-64) - 16px);
}

.top-member .c-slider__track {
  padding-left: 16px;
}

/* カードサイズ：376×510px（1440px幅で3枚と少し見える想定） */
.top-member .c-slider__item {
  width: 376px;
}

/* サムネイルの高さを幅から一定に固定する（member-listと同じ考え方）。 */
.top-member .c-card__thumb {
  flex: none;
  aspect-ratio: 45 / 53;
}

.top-member__more {
  display: flex;
  justify-content: center;
}

@media (max-width: 500px) {
  .top-member__slider {
    /* トラック側の+16px（安全マージン）を差し引き、画像の見た目の開始位置は16pxのまま変えない */
    padding-left: calc(var(--space-16) - 16px);
  }

  .top-member .c-slider__item {
    width: 300px;
  }

}

/* ----------------------------------------------------------------------------
   Top page（index.html）/ FOLLOW US
   ※ 投稿部分は仮カード。本番はSNS公式ウィジェット等への差し替えを想定。
---------------------------------------------------------------------------- */
.top-follow__inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-64);
}

.top-follow__head {
  min-width: max-content;
}

.top-follow__text {
  font-size: var(--fs-16);
  margin-top: var(--space-48);
}

.top-follow__embed {
  width: 100%;
  display: flex;
  justify-content: center;
}

.top-follow__card {
  width: 100%;
  max-width: 360px;
  border: 1px solid var(--color-border-1);
  border-radius: 8px;
  padding: var(--space-16);
}

/*
 * Twitter Feeds（Smash Balloonの「Custom Twitter Feeds」プラグイン）の
 * ショートコード出力を、上の .top-follow__card の見た目に近づけるための
 * 上書きスタイル。
 *
 * 注意：プラグイン側のクラス名（.ctf-*）はバージョンやフィードの
 * レイアウト設定（List / Carousel / Single 等）によって変わることがある。
 * 実際の画面に合わせて微調整が必要な場合は、ブラウザの検証ツールで
 * 出力されているクラス名を確認して以下のセレクタを調整するか、
 * プラグイン管理画面（Twitter Feeds > フィードを編集 > Customize）側の
 * 配色・レイアウト設定でも近い見た目に調整できる。
 */
.top-follow__twitter-feed {
  width: 100%;
  max-width: 360px;
}

.top-follow__twitter-feed #ctf,
.top-follow__twitter-feed .ctf {
  width: 100% !important;
  max-width: 100% !important;
}

.top-follow__twitter-feed .ctf-item,
.top-follow__twitter-feed .ctf-post {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid var(--color-border-1) !important;
  border-radius: 8px !important;
  padding: var(--space-16) !important;
  margin-bottom: 20px !important;
  background: #fff !important;
  box-shadow: none !important;
  /*
   * プラグイン標準デザインの背景装飾（斜めの三角形など）が
   * カードの角丸からはみ出して、枠線が欠けて見える現象を防ぐため、
   * カードの外形で確実にクリップする。
   */
  overflow: hidden !important;
}

/* カード内側にはみ出す装飾要素があっても角丸の外に出さない */
.top-follow__twitter-feed .ctf-item *,
.top-follow__twitter-feed .ctf-post * {
  box-sizing: border-box;
}

.top-follow__twitter-feed .ctf-txt-post,
.top-follow__twitter-feed .ctf-text {
  font-size: var(--fs-14) !important;
  line-height: 1.7 !important;
  color: var(--color-text-main) !important;
}

.top-follow__twitter-feed .ctf-date,
.top-follow__twitter-feed .ctf-date a {
  font-size: var(--fs-12) !important;
  color: var(--color-text-sub) !important;
}

.top-follow__twitter-feed .ctf-avatar,
.top-follow__twitter-feed .ctf-avatar-image {
  border-radius: 50% !important;
}

/* 「Follow on Twitter」等、プラグイン標準のフッターボタンは
   top-follow__head側に既に見出し・リード文があるため非表示にする。 */
.top-follow__twitter-feed .ctf-followbtn-container,
.top-follow__twitter-feed .ctf-more,
.top-follow__twitter-feed .ctf-footer,
.top-follow__twitter-feed .ctf-powered-by {
  display: none !important;
}

/* ヘッダー（アイコン＋アカウント名部分）の下に余白を作る */
.top-follow__twitter-feed #ctf .ctf-header {
  margin-bottom: 20px !important;
}

/*
 * プラグイン標準CSSが「#ctf .ctf-item:last-of-type { border-bottom: none !important; }」
 * で最後の投稿の下枠線を消しているため（1件だけ表示する運用だと、
 * これが「カード下部の枠線が欠ける」ように見える原因になっていた）、
 * ここで打ち消して他の辺と同じ下枠線を表示させる。
 * このセレクタは「.top-follow__twitter-feed」を含む分、プラグイン側の
 * 「#ctf .ctf-item:last-of-type」より詳細度が高いため上書きできる。
 */
.top-follow__twitter-feed #ctf .ctf-item:last-of-type {
  border-bottom: 1px solid var(--color-border-1) !important;
}

.top-follow__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-16);
}

.top-follow__card-avatar {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg-gray);
}

.top-follow__card-close {
  font-size: var(--fs-14);
  color: var(--color-text-sub);
}

.top-follow__card-image {
  aspect-ratio: 4 / 3;
  background: var(--color-bg-gray);
  border-radius: 4px;
  margin-bottom: var(--space-16);
}

.top-follow__card-text {
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--color-text-main);
  margin-bottom: var(--space-16);
  white-space: pre-wrap;
}

.top-follow__card-time {
  font-size: var(--fs-12);
  color: var(--color-text-sub);
  margin-bottom: var(--space-16);
}

.top-follow__card-actions {
  display: flex;
  gap: var(--space-24);
  font-size: var(--fs-14);
  color: var(--color-text-sub);
  margin-bottom: var(--space-16);
}

.top-follow__card-link {
  display: block;
  font-size: var(--fs-12);
  color: var(--color-primary);
  font-weight: 600;
}

@media (max-width: 1023px) {
  .top-follow__inner {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .top-follow__head {
    margin-bottom: var(--space-40);
  }
}

/* ============================================================================
   Page: member.html（メンバー一覧ページ）
   ※ このページは後でWordPressの archive-member.php に変換する。
   ※ .member-list 配下の .c-card 1枚が member投稿ループの1件分に対応する。
   ※ カードデザインはTOPページのMEMBERスライダーと共通コンポーネント
     （.c-card / .c-card--member）を使用しており、ここでは独自定義しない。
   ※ ページ見出しは共通コンポーネント .page-hero__head を使用する。
   ============================================================================ */

/* 一覧グリッド：PC3列 / タブレット2列 / SP1列 */
.member-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-32) var(--space-24);
  padding-bottom: var(--space-64);
}

@media (max-width: 1023px) {
  .member-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .member-list {
    grid-template-columns: 1fr;
    gap: var(--space-40);
  }

  .member-list .c-card__title {
    font-size: max(5vw, var(--fs-18));
  }
}

/* グリッドはカード幅が可変（スライダーは固定幅）のため、
   サムネイルはアスペクト比で高さを決める。カードの見た目・構造自体はTOPと同じ。 */
.member-list .c-card__thumb {
  flex: none;
  aspect-ratio: 45 / 53;
}

/* ============================================================================
   Page: interview.html（インタビュー詳細ページ）
   ※ このページは後でWordPressの single-member.php に変換する。
   ※ 各項目はACFフィールドに置き換える前提（クラス名はHTML側のコメントを参照）。
   ============================================================================ */

/* interview-hero：MVエリア（写真＋キャッチコピー等のオーバーレイ） --------- */
.interview-hero {
  position: relative;
  overflow: hidden;
  min-height: 440px;
  color: var(--color-white);
  margin-top: var(--space-24);
}

.interview-hero__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin-left: max(var(--space-40), calc((100vw - var(--inner-width)) / 2 + var(--space-40)));
  width: calc(100vw - max(var(--space-40), calc((100vw - var(--inner-width)) / 2 + var(--space-40))));
}

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

.interview-hero__body {
  position: relative;
  z-index: 2;
  width: calc(100vw - max(var(--space-40), calc((100vw - var(--inner-width)) / 2 + var(--space-40))));
  padding: var(--space-64) 0;
  display: flex;
  flex-direction: column;
  margin-left: max(var(--space-88), calc((100vw - var(--inner-width)) / 2 + var(--space-40) + var(--space-48)));
}

.interview-hero__number {
  display: inline-block;
  margin-bottom: var(--space-16);
  line-height: 1.2;
}

.interview-hero__number-label {
  display: block;
  font-family: var(--font-en);
  font-size: var(--fs-10);
  letter-spacing: 0.1em;
}

.interview-hero__number-value {
  display: block;
  font-family: var(--font-en);
  font-size: var(--fs-48);
}

.interview-hero__copy {
  display: inline;
  margin-bottom: var(--space-24);
}

.interview-hero__copy-line {
  background: var(--color-white);
  color: var(--color-text);
  font-size: var(--fs-36);
  font-weight: 600;
  line-height: 1.6;
  padding: 0.15em 0.2em;
  width: fit-content;
}

.interview-hero__profile {
  display: flex;
  align-items: baseline;
  gap: var(--space-12);
  font-family: var(--font-en);
  font-size: var(--fs-26);
  font-weight: 600;
  margin-left: var(--space-16);
}

.interview-hero__join {
  font-size: var(--fs-16);
  font-weight: 400;
  padding-left: var(--space-12);
  border-left: 1px solid rgba(255, 255, 255, 0.6);
}

.interview-hero__department {
  font-size: var(--fs-14);
  font-weight: 400;
  margin-top: var(--space-4);
  margin-left: var(--space-16);
}

/* interview-content：本文エリア（Q&A＋画像） ------------------------------
   position指定が無いと、body::before（position:fixed）が描画順の都合で
   このセクションより手前（テキストの上）に来てしまうため、position:relative
   を指定して正しい重なり順にする（他のセクションが.l-innerで担保している
   のと同じ対応）。 */
.interview-content {
  position: relative;
  /* padding-top: var(--space-64); */
  padding-bottom: 0;
}

/* 画像＋質問回答を横並びにする行（interview-content__image と .interview-block の組） */
.interview-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-80);
  margin-bottom: var(--space-64);
  width: calc(100vw - max(var(--space-40), calc((100vw - var(--inner-width)) / 2 + var(--space-40))));
}

.interview-row:nth-child(odd) {
  margin-left: auto;
}

.interview-row:nth-child(even) {
  margin-right: auto;
}

.interview-row .interview-content__image,
.interview-row .interview-group {
  flex: 1 1 50%;
  min-width: 0;
}

/* 画像は .interview-row 内でのみ上部に固定表示させる。
   ・sticky の基準となる箱は「flexアイテムとしての .interview-content__image 自身」。
     行の高さ（＝2つの質問回答ブロックの合計）を超えて画像が留まり続けることはなく、
     行の下端まで来ると自動的に固定が解除されて次の行へ流れる（sticky標準の挙動）。
   ・1023px以下は画像→テキストの縦積みになるため、このstickyは不要（PC/タブレット横並び時のみ）。 */
@media (min-width: 1024px) {
  .interview-row .interview-content__image {
    position: sticky;
    top: calc(80px + var(--space-40));
    align-self: flex-start;
  }
}

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

/* 奇数番目の画像は右側に配置（DOM上は画像が先、表示だけ反転） */
.interview-row--reverse {
  flex-direction: row-reverse;
}

.interview-content__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* interview-block：質問／回答のセット（6セットともクラスは統一） ----------- */
.interview-block {
  margin-bottom: var(--space-64);
}

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

.interview-block__question {
  font-size: var(--fs-24);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-32);
}

.interview-block__answer {
  font-size: var(--fs-14);
}

.interview-block__value {
  font-size: var(--fs-18);
  font-weight: 600;
  margin-bottom: var(--space-16);
}

/* interview-related：その他のインタビュー（member-cardを再利用） ----------
   interview-contentと同じ理由でposition:relativeを指定 */
.interview-related {
  position: relative;
}

.interview-related__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-direction: column;
  gap: var(--space-24);
  margin-bottom: var(--space-40);
}

.interview-related__title {
  font-size: var(--fs-24);
  font-weight: 600;
  width: 100%;
  text-align: left;
}

.interview-related__nav {
  display: flex;
  gap: var(--space-8);
}

@media (max-width: 1023px) {
  .interview-hero {
    min-height: 360px;
  }

  .interview-hero__copy-line {
    font-size: var(--fs-28);
  }

  .interview-hero__body {
    max-width: 100%;
    padding: var(--space-40) 0;
  }

  .interview-row {
    width: 100%;
    padding: 0 var(--space-40);
  }

  .interview-row,
  .interview-row--reverse {
    flex-direction: column-reverse;
  }

}

@media (max-width: 768px) {
  .interview-hero {
    margin-top: var(--space-16);
    min-height: 0;
    overflow: visible;
  }

  .interview-hero__image {
    position: absolute;
    top: 0;
    left: var(--space-24);
    right: 0;
    height: 400px;
    margin: 0;
    width: auto;
  }

  .interview-hero__image img {
    object-position: center 20%;
  }

  .interview-hero::before {
    display: none;
  }

  .interview-hero__body {
    width: auto;
    margin: 0 var(--space-24);
    padding: 218px 0 0;
  }

  .interview-hero__number {
    margin-left: 24px;
  }

  .interview-hero__copy-line {
    font-size: var(--fs-20);
  }

  .interview-hero__profile,
  .interview-hero__department {
    color: var(--color-text);
  }

  .interview-hero__join {
    border-left-color: var(--color-border-1);
  }
}

@media (max-width: 500px) {
  .interview-row {
    padding: 0 var(--space-24);
    gap: var(--space-48);
  }

  .interview-block {
    margin-bottom: var(--space-40);
  }

  .interview-block__question {
    font-size: var(--fs-18);
    margin-bottom: var(--space-16);
  }
}

.interview-member__slider .c-card__title {
  font-size: var(--fs-18);
}

.interview-member__slider .c-slider__track {
  gap: var(--space-48);
}

/* サムネイルの高さを幅から一定に固定する（top-member / member-listと同じ考え方） */
.interview-member__slider .c-card__thumb {
  flex: none;
  aspect-ratio: 45 / 53;
}

/* ============================================================================
   what-hub（数字で見るマテリアル／働く環境／職種一覧の案内カード）
   ・what-material.html のハブページと、トップページ（index.html）の
     WHAT MATERIALセクションの両方で使用する共通コンポーネント。
   ============================================================================ */
.what-hub__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-36);
}

.what-hub__link {
  display: block;
  padding-bottom: var(--space-28);
  border-bottom: 1px solid var(--color-border-1);
  position: relative;
}

.what-hub__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.what-hub__image {
  aspect-ratio: 4 / 3;
  background: var(--color-bg-gray);
  overflow: hidden;
  margin-bottom: var(--space-24);
}

.what-hub__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.what-hub__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-22);
  font-weight: 600;
  transition: color 0.3s ease;
}

.what-hub__desc {
  font-size: var(--fs-14);
}

.what-hub__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 16px;
  border-radius: 20px;
  background: var(--color-primary);
  position: relative;
  overflow: hidden;
}

.what-hub__arrow::before,
.what-hub__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
  background-image: url("../images/common/btn-arrow_w.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 12px;
  height: 12px;
}

.what-hub__arrow::after {
  transform: translate(-280%, -50%);
}

@media (max-width: 1023px) {
  .what-hub__list {
    grid-template-columns: repeat(2, 1fr);
    gap: min(3vw, var(--space-24));
  }

  .what-hub__title {
    font-size: min(3.2vw, var(--fs-22));
  }
}

@media (max-width: 500px) {
  .what-hub__list {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .what-hub__title {
    font-size: var(--fs-22);
  }
}

/* ============================================================================
   下部CTA前の関連導線パーツ（.c-what-preview）
   ・WordPress化時はテンプレートパーツ（例：template-parts/what-preview.php）として
     繰り返し使う想定。セクションを分けず、各ページの最後のコンテンツセクション
     （.l-inner）の中にそのまま差し込んで使う「部品」としてのdiv構成にしている
     （<section>は持たない。背景色・上下の余白は差し込み先のセクション側に依存する）。
   ・「数字で見るマテリアル／働く環境（福利厚生）／職種一覧」の3項目のうち、
     現在ページ以外の項目をHTML側で選んで出力する想定（本ページでは2項目）。
   ・直後に置く下部CTA（.c-cta-lower）の上余白は、このパーツが直前にある前提で
     .c-cta-lower側に用意している。
   ・カード右側の丸い矢印は共通コンポーネント .what-hub__arrow を流用する。
   ============================================================================ */
.c-what-preview {
  margin-top: var(--space-80);
  border-top: 1px solid var(--color-border-1);
  padding-top: var(--space-64);
}

.c-what-preview__title {
  font-family: var(--font-en);
  font-size: var(--fs-40);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  margin-bottom: var(--space-48);
}

.c-what-preview__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-40);
}

.c-what-preview__link {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.c-what-preview__image {
  flex: 0 0 240px;
  overflow: hidden;
}

.c-what-preview__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.c-what-preview__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-width: 0;
  padding: 0 var(--space-24);
  background-color: var(--color-white);
}

.c-what-preview__item-title {
  font-size: var(--fs-20);
  font-weight: 600;
  transition: color 0.3s ease;
}

.c-what-preview__item-desc {
  font-size: var(--fs-14);
  color: var(--color-text-sub);
  margin-top: var(--space-8);
}

@media (max-width: 1023px) {
  .c-what-preview__list {
    grid-template-columns: 1fr;
    gap: var(--space-24);
  }

  .c-what-preview__image {
    flex: 0 0 min(35vw, 240px);
  }
}

@media (max-width: 500px) {
  .c-what-preview__title {
    font-size: var(--fs-28);
    margin-bottom: var(--space-32);
  }

  .c-what-preview__list {
    gap: var(--space-32);
  }

  .c-what-preview__link {
    flex-direction: column;
  }

  .c-what-preview__image {
    flex: none;
    width: 100%;
    aspect-ratio: 4 / 3;
  }

  .c-what-preview__body {
    padding: var(--space-16) 0 0;
    background-color: initial;
    border-bottom: 1px solid var(--color-border-1);
    padding-bottom: var(--space-24);
  }
}

/* ============================================================================
   Page: jobs.html（職種一覧ページ）
   ・後でWordPressの archive-jobs.php に変換する想定。
   ・.jobs-list__item 1件分が jobs投稿ループの1件分に対応する。
   ・ページ上部（見出し／ヒーロー画像／リード文）は固定ページ共通テンプレ
     （.page-hero__head / .page-hero__image / .page-hero__intro）を使用する。
   ・セクション見出しとコンセプトカードも共通コンポーネント
     （.section-heading / .c-concept-card）を使用する。
   ============================================================================ */

.jobs-concept__list {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1023px) {
  .jobs-concept__list {
    grid-template-columns: 1fr;
  }
}

/* JOB LIST --------------------------------------------------------------- */
.jobs-list {
  margin-top: var(--space-64);
}

.jobs-list__item {
  display: flex;
  margin-bottom: var(--space-40);
  background-color: var(--color-white);
}

.jobs-list__image {
  flex: 0 0 280px;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-gray);
  overflow: hidden;
}

.jobs-list__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jobs-list__body {
  flex: 1;
  min-width: 0;
  padding: var(--space-40);
}

.jobs-list__heading {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-bottom: var(--space-24);
}

.jobs-list__number {
  font-family: var(--font-en);
  font-size: var(--fs-40);
  color: var(--color-primary);
  flex-shrink: 0;
  line-height: 1;
}

.jobs-list__title-group {
  flex: 1;
  min-width: 0;
}

.jobs-list__title {
  font-size: min(2.8vw, var(--fs-36));
  font-weight: 600;
  line-height: 1;
}

.jobs-list__title-en {
  font-family: var(--font-en);
  font-size: var(--fs-12);
  color: var(--color-primary);
  margin-top: 4px;
}

.jobs-list__divider {
  width: 1px;
  height: 52px;
  background: var(--color-border-1);
}

.jobs-list__badge {
  flex-shrink: 0;
  padding: var(--space-8);
  font-family: var(--font-en);
  font-size: var(--fs-10);
  font-weight: 600;
  color: var(--color-white);
  background: var(--color-primary);
  line-height: 1;
}

.jobs-list__text {
  font-size: var(--fs-14);
  color: var(--color-text-sub);
  margin-bottom: var(--space-24);
}

.jobs-list__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.jobs-list__tag {
  padding: var(--space-4) var(--space-12);
  font-size: var(--fs-12);
  color: var(--color-text-sub);
  border: 1px solid var(--color-border-1);
  border-radius: 999px;
}

.jobs-list-section {
  background-color: var(--color-bg-gray);
}

.jobs-list-section__note {
  font-size: var(--fs-12);
  color: var(--color-text-sub);
  margin-top: var(--space-24);
}

@media (max-width: 1023px) {
  .jobs-list__item {
    flex-direction: column;
  }

  .jobs-list__image {
    flex-basis: auto;
    width: 100%;
    max-width: 542px;
    aspect-ratio: auto;
  }

  .jobs-list__heading {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .jobs-list__heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .jobs-list__body {
    padding: var(--space-20);
  }

  .jobs-list__divider {
    display: none;
  }

  .jobs-list__title {
    font-size: 4.5vw;
  }
}

@media (max-width: 500px) {
  .jobs-list__title {
    font-size: 24px;
    line-height: 1.4;
  }
}

/* ============================================================================
   Page: system.html（働く環境（福利厚生）ページ）
   ・後でWordPressの固定ページ（page-system.php 等）に変換する想定。
   ・上部（見出し／ヒーロー画像／リード文）は固定ページ共通テンプレ
     （.page-hero__head / .page-hero__image / .page-hero__intro）を使用する。
   ・セクション見出しとコンセプトカードも共通コンポーネント
     （.section-heading / .c-concept-card）を使用する。
   ============================================================================ */

/* FVヒーロー画像：右端は画面端まで、左端は他コンテンツ（.l-inner）に揃える ---
   共通コンポーネント .page-hero__image に対する本ページ限定の上書き。
   ・PC/タブレット：右は画面端に密着、左は .l-inner の左端に合わせて伸びる。
   ・SP：他コンテンツと同様に .l-inner 幅に収める（左右とも余白を持たせる）。 */

.system-hero .page-hero__image-img {
  height: auto;
  object-fit: cover;
}

@media (max-width: 500px) {
  .system-hero {
    margin: var(--space-48) 0 var(--space-32) var(--space-24);
    width: auto;
  }

  .system-hero .page-hero__image-img {
    height: auto;
  }
}

.system-section--gray {
  background-color: var(--color-bg-gray);
}

/* 2 CONCEPTS：カードは2列 ------------------------------------------------- */
.system-concept__list {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1023px) {
  .system-concept__list {
    grid-template-columns: 1fr;
  }
}

/* SECTION内の強調ノート（グレーの補足ボックス） --------------------------- */
.system-note {
  padding: var(--space-16) var(--space-36);
  font-size: var(--fs-15);
  margin-top: var(--space-64);
  border-top: 1px solid var(--color-primary);
  border-bottom: 1px solid var(--color-primary);
}

.system-note strong,
.system-note .red-text {
  color: var(--color-primary);
  font-size: var(--fs-20);
  font-weight: 600;
}

@media (max-width: 500px) {
  .system-note {
    padding: var(--space-16) 0;
    font-size: var(--fs-14);
  }
}

/* アイコンカード（SECTION 01 / SECTION 02で使用） ------------------------- */
.system-icon-card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
  margin-top: var(--space-64);
}

.system-icon-card-list--pink {
  padding: var(--space-24);
  background-color: #FFF2F2;
}

.system-icon-card-list--2col {
  grid-template-columns: repeat(2, 1fr);
}

.system-icon-card {
  background-color: var(--color-white);
  padding: var(--space-24) var(--space-36) var(--space-36);
  text-align: center;
}

.system-icon-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  margin: -40px auto var(--space-16);
}

.system-icon-card__title {
  font-size: var(--fs-22);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-primary);
  margin-bottom: var(--space-16);
}

.system-icon-card__text {
  font-size: var(--fs-12);
  text-align: left;
}

@media (max-width: 1023px) {

  .system-icon-card-list,
  .system-icon-card-list--2col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 500px) {

  .system-icon-card {
    padding: var(--space-24) var(--space-24) var(--space-36);
  }
}

/* ENRICH YOUR LIFE：福利厚生グループ一覧 ---------------------------------- */
.system-benefits {
  margin-top: var(--space-64);
}

.system-benefits__group {
  margin-bottom: var(--space-48);
}

.system-benefits__group:last-child {
  margin-bottom: 0;
}

.system-benefits__group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding: var(--space-8);
  border-top: 1px solid var(--color-border-1);
  border-bottom: 1px solid var(--color-border-1);
}

.system-benefits__group-title {
  font-size: var(--fs-24);
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.system-benefits__group-number {
  font-family: var(--font-en);
  color: var(--color-primary);
  font-size: var(--fs-32);
}

.system-benefits__group-en {
  font-family: var(--font-en);
  font-size: var(--fs-10);
  color: var(--color-text-sub);
  letter-spacing: 0.04em;
}

.system-benefits__group-note {
  font-size: var(--fs-20);
  font-weight: 600;
  margin-top: var(--space-36);
  text-align: center;
}

.system-benefits__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-36);
}

.system-benefits__item {
  padding: var(--space-32);
  background-color: var(--color-white);
}

.system-benefits__item-title {
  position: relative;
  padding-left: var(--space-16);
  font-size: var(--fs-20);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-12);
}

.system-benefits__item-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

.system-benefits__item-text {
  font-size: var(--fs-12);
  color: var(--color-text);
  line-height: 1.8;
}

@media (max-width: 1023px) {
  .system-benefits__list {
    grid-template-columns: repeat(2, 1fr);
    ;
    gap: 20px;
  }
}

@media (max-width: 500px) {
  .system-benefits__group-head {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: var(--space-16);
    row-gap: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .system-benefits__list {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .system-benefits__group-title {
    display: contents;
    font-size: var(--fs-20);
  }

  .system-benefits__group-number {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .system-benefits__group-title-text {
    grid-column: 2;
    grid-row: 1;
  }

  .system-benefits__group-en {
    grid-column: 2;
    grid-row: 2;
    margin-left: 0;
  }

  .system-benefits__item-title {
    line-height: 1.4;
  }
}

/* ============================================================================
   Page: figures.html（数字で見るマテリアル ページ）
   ・後でWordPressの固定ページ（page-figures.php 等）に変換する想定。
   ・上部（見出し／ヒーロー画像）は固定ページ共通テンプレ
     （.page-hero__head / .page-hero__image）を使用する。
     ※本ページはリード文（.page-hero__intro）は使用しない。
   ・セクション見出しの土台（タグ／タイトル）は共通コンポーネント .section-heading を、
     セクション背景の出し分けは system.html と共通の .system-section / .system-section--gray を、
     下部CTA前の導線は共通コンポーネント .c-what-preview を、それぞれ使い回す。
   ・本ページ固有のパーツ（.figures-*）は下記にまとめる。
     - .figures-hero        … FVのインフォグラフィック画像（赤枠・.l-inner幅に収める）
     - .figures-heading     … セクション見出し＋背景の大きな透かし英字＋右側の説明文
     - .figures-stat-list   … 数字カード一覧（SECTION 01 / 02 / 03 共通）
     - .figures-stat        … 数字カード本体。上部に赤いバッジ（.figures-stat__badge）が
                               カード枠にかぶるレイアウト。基本は縦積み（アイコン→数字）で、
                               バリエーションとして
                                 --row  … アイコンと数字を横並びにする（26歳／28歳など）
                                 --dual … 大きめアイコン＋2つの数字を横並びにする
                                          （男女比／新卒・キャリア入社比率など）
                               を用意している。
   ============================================================================ */

/* FVヒーロー画像：赤枠のインフォグラフィック。 -------------------- */
.figures-hero {
  padding-bottom: var(--space-120);
  overflow: hidden;
}

@media (max-width: 768px) {
  .figures-hero {
    padding-bottom: 0;
  }
}

@media (max-width: 500px) {
  .figures-hero {
    margin: var(--space-32) auto;
  }
}

/* セクション見出し：.section-heading（タグ／タイトル）＋ 背景の大きな透かし英字＋説明文 --
   PC/タブレットは横並び（左：タグ・タイトル・透かし英字／右：説明文）、
   1023px以下は縦並びに切り替える。 */
.figures-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-40);
}

.figures-heading__main {
  min-width: 0;
}

.figures-heading__watermark {
  font-family: var(--font-en);
  font-size: clamp(4.8rem, 8vw, 8.8rem);
  font-weight: 600;
  line-height: 1;
  color: rgba(128, 128, 128, 0.1);
  margin-top: var(--space-8);
  white-space: nowrap;
}

.figures-heading__watermark--white {
  font-family: var(--font-en);
  font-size: clamp(4.8rem, 8vw, 8.8rem);
  font-weight: 600;
  line-height: 1;
  color: var(--color-white);
  margin-top: var(--space-8);
  white-space: nowrap;
}

.figures-heading__text {
  flex-shrink: 0;
  max-width: fit-content;
  font-size: var(--fs-15);
  text-align: left;
}

@media (max-width: 1023px) {
  .figures-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .figures-heading__text {
    max-width: none;
    text-align: left;
    margin-top: var(--space-24);
  }
}

@media (max-width: 500px) {
  .figures-heading__watermark {
    font-size: clamp(3.6rem, 16vw, 6rem);
  }
}

/* 数字カード一覧（SECTION 01 / SECTION 02 / SECTION 03 共通） ------------- */
.figures-stat-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-12);
  margin-top: var(--space-64);
}

.figures-stat-list--3col {
  grid-template-columns: repeat(3, 1fr);
}

/* カード本体：上部に赤バッジ（.figures-stat__badge）がカード枠にかぶるレイアウト。
   デフォルトは縦積み（アイコン→数字→注釈）。 ------------------------------- */
.figures-stat {
  position: relative;
  background-color: var(--color-white);
  padding: var(--space-22) var(--space-20) var(--space-20);
  text-align: center;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
}

.figures-stat__badge {
  padding: var(--space-6) var(--space-8);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: var(--fs-16);
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 999px;
  margin-bottom: var(--space-24);
}

.figures-stat__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-16);
}

.figures-stat__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.figures-stat__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  font-family: var(--font-number);
  font-size: var(--fs-64);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.figures-stat__unit {
  font-size: var(--fs-24);
  font-weight: 600;
  color: var(--color-text);
  margin-left: var(--space-4);
}

.figures-stat__mark {
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--color-text-sub);
  margin-left: var(--space-4);
}

.figures-stat__note {
  font-size: var(--fs-12);
  color: var(--color-text-sub);
  margin-top: var(--space-12);
}

/* --row：アイコンと数字を横並びにするバリエーション（新卒最短管理職昇格／平均年齢など） */
.figures-stat--row .figures-stat__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
}

.figures-stat--row .figures-stat__icon {
  margin: 0;
  flex-shrink: 0;
}

/* --dual：ドーナツグラフ＋2つの数字を並べるバリエーション
   （男女比／新卒・キャリア入社比率など）。
   ・3列グリッド内で縦2マス分の高さを使い、隣り合う2枚の--rowカード
     （新卒最短管理職昇格／平均年齢）の合計と高さを揃える。
   ・2つの数字のうち大きい方を赤、もう一方をグレーで表示する想定。
     グレーにする方に.figures-stat__value--subを付与する。 --- */
.figures-stat-list--3col .figures-stat--dual {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ドーナツグラフ（.js-donutの円弧をJSで0%→目標%までカウントアップ描画する） --- */
.figures-donut {
  width: 120px;
  height: 120px;
  margin: 0 auto var(--space-20);
}

.figures-donut__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.figures-donut__track,
.figures-donut__value {
  fill: none;
  stroke-width: 22;
}

.figures-donut__track {
  stroke: var(--color-border-1);
}

.figures-donut__value {
  stroke: var(--color-primary);
}

.figures-stat__dual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-24);
}

.figures-stat__dual-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.figures-stat__dual-icon-label {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.figures-stat__dual-icon {
  width: 40px;
  height: 45px;
}

.figures-stat__dual-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.figures-stat__dual-name {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--color-text);
  margin-top: var(--space-4);
  white-space: nowrap;
}


.figures-stat__value--sub {
  color: var(--color-text-sub);
}

/* SECTION 03「生成AI活用率」カードに関する補足脚注（カード一覧の下に1つだけ表示） ---- */
.figures-note {
  font-size: var(--fs-12);
  color: var(--color-text-sub);
  margin-top: var(--space-16);
}

@media (max-width: 1280px) {

  .figures-stat-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .figures-stat-list--3col {
    grid-template-columns: repeat(2, 1fr);
  }

  .figures-stat-list--3col .figures-stat--dual {
    grid-row: auto;
  }

  /* 2列時は「--row 2枚を1行目」「--dual 2枚を2行目」に並べ直す
     （DOM順は 新卒最短管理職昇格／男女比／新卒キャリア入社比率／平均年齢） */
  .figures-stat-list--3col>*:nth-child(1) {
    order: 1;
  }

  .figures-stat-list--3col>*:nth-child(2) {
    order: 3;
  }

  .figures-stat-list--3col>*:nth-child(3) {
    order: 4;
  }

  .figures-stat-list--3col>*:nth-child(4) {
    order: 2;
  }
}

@media (max-width: 1023px) {

  .figures-stat-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {

  .figures-stat-list,
  .figures-stat-list--3col {
    grid-template-columns: 1fr;
  }

  .figures-stat {
    padding: var(--space-32) var(--space-20) var(--space-24);
  }

  .figures-stat__dual {
    gap: var(--space-16);
  }
}

/* ============================================================================
   Page: news.html（NEWS一覧ページ）
   ・後でWordPressの archive-news.php に変換する想定。
   ・.c-news-list__item 1件分が news投稿ループの1件分に対応する。
   ・行全体を<a>で囲んでおり、hrefはWordPress化時にthe_permalink()へ
     置き換える想定（現在は仮でnews-post.htmlを指定）。
   ・行の中身（タグ・日付・タイトル・矢印）は共通コンポーネント
     .c-news-list を使用し、ここではフィルタータブのみ定義する。
   ============================================================================ */

/* フィルタータブ（新卒採用／キャリア採用等のカテゴリータクソノミー想定） */
.news-filter {
  display: flex;
  align-items: center;
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--color-border-1);
}

.news-filter__icon {
  flex-shrink: 0;
  display: flex;
  color: var(--color-text-sub);
}

/* 並び替えドロップダウン（三本線アイコンをクリックすると開く） */
.news-sort {
  position: relative;
  flex-shrink: 0;
}

.news-sort>summary {
  list-style: none;
  cursor: pointer;
}

.news-sort>summary::-webkit-details-marker {
  display: none;
}

.news-sort>summary::marker {
  content: "";
}

.news-sort__menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--space-8);
  padding: var(--space-8) 0;
  background-color: var(--color-white);
  border: 1px solid var(--color-border-1);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  min-width: 120px;
  z-index: 10;
}

.news-sort__link {
  display: block;
  padding: var(--space-8) var(--space-16);
  font-size: var(--fs-13);
  white-space: nowrap;
}

.news-sort__link.is-active {
  color: var(--color-primary);
  font-weight: 600;
}

.news-filter__list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.news-filter__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-8);
  font-size: var(--fs-13);
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
  height: 26px;
  position: relative;
  margin: 0 var(--space-16);
  flex-shrink: 0;
  white-space: nowrap;
}

.news-filter__link::before {
  content: "";
  position: absolute;
  top: 0;
  right: -16px;
  width: 1px;
  height: 100%;
  background-color: var(--color-border-2);
}

.news-filter__list li:last-child .news-filter__link::before {
  content: none;
}

.news-filter__link.is-active {
  color: var(--color-primary);
  background: #FFF2F2;
}

@media (max-width: 500px) {
  .news-filter {
    gap: var(--space-4);
  }

  .news-filter__icon {
    flex-shrink: 0;
  }

  .news-filter__list {
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-width: 0;
  }

  .news-filter__list::-webkit-scrollbar {
    display: none;
  }

  .news-filter__link {
    font-size: var(--fs-13);
    margin: 0 2vw;
  }

  .news-filter__link::before {
    right: -2vw;
  }
}

/* ============================================================================
   Page: news-post.html（NEWS詳細ページ）
   ・後でWordPressの single-news.php に変換する想定。
   ・タイトル／日付／カテゴリーはWordPress標準機能で対応でき、ACF不要
     （the_title() / the_date() / カテゴリータクソノミー）。
   ・本文（.news-detail__content）は the_content() をそのまま出力する
     想定の汎用タイポグラフィ（見出し・段落・リストのみ）。
   ============================================================================ */
.news-detail__head {
  padding-top: var(--space-48);
}

.news-detail__meta {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.news-detail__title {
  font-size: var(--fs-28);
  font-weight: 700;
  line-height: 1.5;
}

.news-detail__divider {
  border: none;
  border-top: 1px solid var(--color-border-1);
  margin: var(--space-16) 0 var(--space-32);
}

/* 本文（the_content()）の基本タイポグラフィ */
.news-detail__content {
  max-width: 960px;
  font-size: var(--fs-16);
  line-height: 1.9;
}

.news-detail__content p {
  margin-bottom: var(--space-24);
}

.news-detail__content p:last-child {
  margin-bottom: 0;
}

.news-detail__content h2 {
  font-size: var(--fs-22);
  font-weight: 700;
  margin: var(--space-48) 0 var(--space-24);
}

.news-detail__content ul {
  margin-bottom: var(--space-24);
  padding-left: var(--space-24);
}

.news-detail__content li {
  list-style: disc;
  margin-bottom: var(--space-8);
}

.news-detail__content li:last-child {
  margin-bottom: 0;
}

.news-detail__content a {
  color: var(--color-primary);
  text-decoration: underline;
}

.news-detail__content a:hover {
  text-decoration: none;
}

.news-detail__nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-16);
  padding-bottom: var(--space-64);
}

.news-detail__nav-side--prev {
  grid-column: 1;
  justify-self: start;
}

.news-detail__nav-list-btn {
  grid-column: 2;
  justify-self: center;
}

.news-detail__nav-side--next {
  grid-column: 3;
  justify-self: end;
}

.news-detail__nav-side {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--color-text);
  transition: color 0.2s ease;
}

.news-detail__nav-arrow {
  color: var(--color-primary);
}

@media (max-width: 500px) {
  .news-detail__title {
    font-size: var(--fs-22);
  }
}

/* ============================================================================
   Page: 404.html（404エラーページ）
   ・後でWordPressの 404.php に変換する想定。
   ============================================================================ */

.not-found__body {
  text-align: center;
}

.not-found__title {
  font-family: var(--font-en);
  font-size: var(--fs-56);
  line-height: 1;
  margin-bottom: var(--space-16);
}

.not-found__lead {
  font-size: var(--fs-16);
  margin-bottom: var(--space-32);
  font-weight: 600;
}

.not-found__text {
  font-size: var(--fs-14);
}

@media (max-width: 500px) {
  .not-found__title {
    font-size: var(--fs-36);
    margin-bottom: var(--space-8);
  }

  .not-found__lead {
    margin-bottom: var(--space-24);
  }
}

/* ============================================================================
   6. Hover Actions（PCのみ / min-width:1024px）
   ・SP/タブレット（タッチ操作）ではタップ後もhoverが残ってしまうため、
     :hoverによる演出は全てここに集約し、PC（1024px以上）でのみ有効にする。
   ・各ルールの実体は元々ここにあったのではなく、l-header・c-btn・c-card・
     what-hub・c-what-preview・news 等、各コンポーネント／ページのセクション内に
     直接書かれていたものをこの1ブロックに集約している。
     hoverの演出を編集・追加する際は、まずここを確認すること。
   ============================================================================ */
@media (min-width: 1024px) {

  /* ENTRYメニューが開いている間は「＋」を「－」に見せる */
  .l-header__entry-wrap:hover .c-btn--entry .c-btn__icon::after {
    transform: rotate(90deg);
  }

  .l-header__entry-wrap:hover .l-header__entry-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .l-header__entry-menu-link:hover {
    background: var(--color-primary-light);
    padding-left: var(--space-24);
  }

  .c-btn--cta:hover .c-btn__label {
    transform: translateX(var(--space-8));
  }

  .c-btn--cta-new:hover {
    background: var(--color-primary-light);
  }

  .c-btn--cta-career:hover {
    background: var(--color-secondary-light);
  }

  /* WORKバナー：バナーのどこにマウスを乗せても、中央のボタンにホバー効果を出す */
  .top-work__banner-link:hover .top-work__banner-btn {
    background: var(--color-primary-light);
  }

  .top-work__banner-link:hover .top-work__banner-btn .c-btn__label {
    transform: translateX(var(--space-8));
  }

  .c-btn--primary:hover .c-btn__label,
  .c-btn--secondary:hover .c-btn__label,
  .c-btn--outline:hover .c-btn__label {
    transform: translateX(var(--space-8));
  }

  .c-btn--primary:hover {
    background: var(--color-primary-light);
  }

  .c-btn--secondary:hover {
    background: var(--color-secondary-light);
  }

  .c-btn--outline:hover {
    background: var(--color-primary);
  }

  .c-btn--outline:hover .c-btn__label {
    color: var(--color-white);
  }

  .c-btn--outline:hover .c-btn__divider {
    background-color: var(--color-white);
  }

  .c-btn:hover .c-btn__arrow::before {
    transform: translate(220%, -50%);
  }

  .c-btn:hover .c-btn__arrow::after {
    transform: translate(-50%, -50%);
  }

  .l-header__nav-link:hover {
    color: var(--color-primary);
  }

  .l-header__nav-link:hover::after {
    transform: scaleX(1);
  }

  .c-breadcrumb__link:hover {
    color: var(--color-primary);
  }

  .l-footer__pagetop:hover {
    opacity: 0.5;
  }

  .l-footer__nav a:hover {
    opacity: 0.5;
  }

  .l-footer__company-link:hover,
  .l-footer__privacy:hover {
    opacity: 0.5;
  }

  .c-card--member:hover .c-card__image .c-card__image-img {
    transform: scale(1.1);
  }

  .c-card--member:hover .c-card__title {
    color: var(--color-white);
  }

  .c-card--member:hover .c-card__title-line {
    background-color: var(--color-primary);
  }

  .c-card--member:hover .c-card__body .c-card__arrow::before {
    transform: translate(240%, -50%);
  }

  .c-card--member:hover .c-card__body .c-card__arrow::after {
    transform: translate(-50%, -50%);
  }

  .c-news-list__link:hover .c-news-list__title {
    color: var(--color-primary);
    transform: translateX(var(--space-8));
  }

  .c-news-list__link:hover .c-news-list__arrow::before {
    transform: translate(220%, -50%);
  }

  .c-news-list__link:hover .c-news-list__arrow::after {
    transform: translate(-50%, -50%);
  }

  .what-hub__link:hover::after {
    transform: scaleX(1);
  }

  .what-hub__link:hover .what-hub__image img {
    transform: scale(1.05);
  }

  .what-hub__link:hover .what-hub__title {
    color: var(--color-primary);
  }

  .what-hub__link:hover .what-hub__arrow::before {
    transform: translate(280%, -50%);
  }

  .what-hub__link:hover .what-hub__arrow::after {
    transform: translate(-50%, -50%);
  }

  .c-what-preview__link:hover .c-what-preview__image img {
    transform: scale(1.05);
  }

  .c-what-preview__link:hover .what-hub__arrow::before {
    transform: translate(280%, -50%);
  }

  .c-what-preview__link:hover .what-hub__arrow::after {
    transform: translate(-50%, -50%);
  }

  .c-what-preview__link:hover .c-what-preview__item-title {
    color: var(--color-primary);
  }

  .news-filter__link:hover {
    color: var(--color-primary);
  }

  .news-detail__nav-side:hover {
    color: var(--color-primary);
  }

}