/* Human Capital page */

@media (min-width: 768px) {
    .md\:hide {
        display: none;
    }
}

.l-main__inner + .l-main__inner {
	margin-top: 80px;
}

.mb16 {
  margin-bottom: 16px;
}

.mb40 {
  margin-bottom: 40px;
}

.hc-paragraph {
  font-size: 18px;
  line-height: 1.6;
  /* letter-spacing: 2.16px; */
  letter-spacing: 0.06em;
}

@media (max-width: 767.98px) {
  .hc-paragraph {
    font-size: 1.6rem;
  }
}

.hc-btn {
  color: #fff;
}

.hc-btn::after {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url('/img/common/icon/icon_arrow_w.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	transition: background-image 0.2s ease;
}

.hc-btn:hover {
	color: #000;
}

.hc-btn:hover::after {
	background-image: url('/img/common/icon/icon_arrow_b.svg');
}

.hc-img {
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center;
	margin-top: 40px;
}

/* 人材マネジメントポリシー: 黄色バナー見出し */
.hc-policy__heading {
  display: flex;
  padding: 12px 24px;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  background: var(--yellow-corp, #FFD700);
  margin-top: 32px;
  margin-bottom: 0;
  border-bottom: none;
  color: var(--black-corp, #212121);
  font-size: 24px;
  font-weight: 700;
  line-height: 120%;
  letter-spacing: 1.2px;
}

/* 人材マネジメントポリシー: 本文コンテナ（見出しと密着） */
.hc-policy__body {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  align-self: stretch;
  background: #FFFAE5;
}

/* hc-policy__body 内の hc-img（PC のみ表示の policy ダイアグラム）
   親の gap と二重にならないよう margin-top を打ち消す。SP では非表示 */
.hc-policy__body > .hc-img {
  margin-top: 0;
}

@media (max-width: 767.98px) {
  .hc-policy__body > .hc-img {
    display: none;
  }
}

/* ============================================================
   [一時クローン] ir-nav
   出典: feature/ir-individual の /css/ir-individual.css
   ※ ir-individual.css が main に乗ったら丸ごと削除する
============================================================ */
.ir-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ir-nav__item {
  width: calc(33.333% - 16px);
}

.ir-nav__link {
  display: block;
  position: relative;
  height: 100%;
  padding: 20px 24px;
  background: linear-gradient(151deg, #FFF 53.11%, #FFD700 100%);
  border: 2px solid #222;
  color: #000;
  text-decoration: none;
  box-sizing: border-box;
}

.ir-nav__link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(151deg, #FFD700 21.85%, #FFF 68.74%);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  z-index: 0;
}

.ir-nav__link:hover::before {
  opacity: 1;
}

.ir-nav__link > * {
  position: relative;
  z-index: 1;
}

.ir-nav__title {
  font-size: 2.0rem;
  font-weight: 700;
  line-height: 1.2;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

.ir-nav__title--en {
  font-size: 1.8rem;
}

.ir-nav__arrow {
  position: absolute;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  transition: transform 0.3s;
}

.ir-nav__link:hover .ir-nav__arrow {
  transform: translateX(16px);
}

@media (max-width: 767.98px) {
  .ir-nav {
    gap: 4vw;
  }
  .ir-nav__item {
    width: 100%;
  }
  .ir-nav__link {
    padding: 12px 12px 48px;
  }
  .ir-nav__title {
    font-size: 2.0rem;
  }
  .ir-nav__title--en {
    font-size: 1.8rem;
  }
  .ir-nav__arrow {
    bottom: 16px;
    right: 16px;
  }
}

/* ------------------------------------------------------------
   ir-nav--hc-policy: hc-policy__body 内専用モディファイア
   - 親が align-items: center のため width:100% で stretch
   - PC: gap とカード幅を % 連動にし、カード:gap の比率を維持
   - SP: 縦積みに切り替え、画像 li (.ir-nav__deco) を表示し、
     ul / 01-03 li に縦バー・横コネクタの疑似要素を載せる
   - 各カードの padding-bottom は padding-top と揃える
------------------------------------------------------------ */
.ir-nav--hc-policy {
  --hc-policy-gap: 2.1%;
  width: 100%;
  gap: var(--hc-policy-gap);
}

.ir-nav--hc-policy .ir-nav__item {
  width: calc((100% - 2 * var(--hc-policy-gap)) / 3);
}

/* 画像 li は PC では非表示（コードは共有、レイアウトのみ切替） */
.ir-nav__deco {
  display: none;
}

@media (max-width: 767.98px) {
  /* SP: 縦積み・gap 24px・縦バー用に position 起点を作る */
  .ir-nav--hc-policy {
    position: relative;
    overflow: hidden;
    flex-direction: column;
    gap: 24px;
  }

  /* 縦バー（ul ::before）: ul 配下の li たちより下に潜らせる */
  .ir-nav--hc-policy::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 0;
    width: 4px;
    height: 100%;
    background: #D0D0D0;
    border-radius: 4px;
    z-index: 0;
  }

  /* li は縦バーより前面。padding-left を加算するので box-sizing 固定 */
  .ir-nav--hc-policy > li {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
  }

  .ir-nav--hc-policy .ir-nav__item {
    width: 100%;
    padding-left: 24px;
  }

  .ir-nav--hc-policy .ir-nav__link {
    padding: 12px;
    padding-right: 2.2em;
  }

  .ir-nav--hc-policy .ir-nav__title {
    font-size: 1.8rem;
  }

  .ir-nav--hc-policy .ir-nav__arrow {
    right: 1.6rem;
  }

  /* 画像 li を表示 */
  .ir-nav__deco {
    display: block;
    width: 100%;
  }

  .ir-nav__deco img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
  }

  /* 01-03 のみ pl と 横コネクタ疑似要素を持つ。
     コネクタは画像より下に潜らせるため z-index: 0 (li 内のスタッキング) */
  .ir-nav__deco--01,
  .ir-nav__deco--02,
  .ir-nav__deco--03 {
    padding-left: 24px;
  }

  .ir-nav__deco--01::before,
  .ir-nav__deco--02::before,
  .ir-nav__deco--03::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 8px;
    width: 50%;
    height: 4px;
    background: #D0D0D0;
    border-radius: 4px;
    z-index: 0;
  }

  /* li 03 だけ ::after で ul 縦バーをマスク（top:21 以降を hc-policy__body の bg で覆い隠す） */
  .ir-nav__deco--03::after {
    content: "";
    position: absolute;
    top: 21px;
    left: 8px;
    width: 4px;
    height: 200%;
    background: #FFFAE5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ir-nav__link::before,
  .ir-nav__arrow {
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 767.98px) {
  .hc-img {
    margin-top: 12.8vw
  }
}

.hc-table {
  position: relative;
  margin-top: 12px;
  overflow-x: auto;
  /* リッチテキスト（data_editor_*）でテーブル後に追加された段落を注釈として表示 */
  p {
    font-size: 13px;
    margin-top: 24px;
  }
  table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    table-layout: fixed; /* 列幅を全テーブルで揃える */
    th {
      border: none;
    }
    th, td {
      padding: 10px 16px;
      font-size: 16px;
      line-height: 1.6;
      color: #212121;
      /* border-bottom: 1px solid #ccc; */
      letter-spacing: 0.06em;
    }
    /* 全行共通：1列目 */
    tbody tr td:first-child {
      text-align: left;
      font-weight: bold;
      width: 32%;
      white-space: normal;
      word-break: break-word;
    }
    /* ヘッダー行：全セル */
    tbody tr:first-child td {
      background: #d5d5d5;
    }
    /* ヘッダー行：2列目以降 */
    tbody tr:first-child td:not(:first-child) {
      font-weight: normal;
      width: 22.666% !important;
      text-align: center;
    }
    /* データ行：2列目以降 */
    tbody tr:nth-child(n+2) td:not(:first-child) {
      text-align: right;
      width: 22.666%;
    }
    /* 2列目以降：奇数セル */
    tbody tr:nth-child(n+2) td:nth-of-type(odd) {
      background: #fff;
    }
    /* 2列目以降：偶数セル */
    tbody tr:nth-child(n+2) td:nth-of-type(even) {
      background: #FAFAFA;
    }
    /* 2列目以降：最終セル */
    tbody tr:nth-child(n+2) td:last-child {
      background: #ffffd2;
    }
  }
}

@media (max-width: 767.98px) {
  .hc-table {
    table {
      min-width: 640px;
      th, td {
        padding: 12px;
        font-size: 14px;
      }
    }
    /* 横スクロールを視覚的に示す */
    &:after {
      content: "横にスクロールできます →";
      position: absolute;
      right: 12px;
      top: 8px;
      padding: 6px 10px;
      font-size: 12px;
      line-height: 1.4;
      color: #fff;
      background: rgba(0, 0, 0, 0.6);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
      border-radius: 4px;
      pointer-events: none;
      transition: opacity 0.2s ease, visibility 0.2s ease;
    }
    &.is-scrolled::after {
      opacity: 0;
      visibility: hidden;
    }
  }
  html[lang="en"] .hc-table::after {
    content: "Swipe to scroll →";
  }
}


/* ============================================================
   Human Capital 配下ページ共通
   body に .human-capital が付くページ全体（/human-capital/* の各サブページ）
   で共有するオーバーライド。新規サブページもこのスコープに揃える。
============================================================ */

/* タイトル h1: SP では Figma に合わせて 30px に縮小（共通 36px → 30px）。
   サブタイトル付きで 2 行になるページが多いため、SP の窮屈さを回避する。 */
@media (max-width: 767.98px) {
  .human-capital .c-pageTitle-md__inner h1 {
    font-size: 3.0rem;
  }
}


/* ============================================================
   Human Capital 下層詳細ページ 共通コンポーネント（hc-detail）
   ------------------------------------------------------------
   成長エコシステム / 成果とバリュー / 強みを活かし高め合う文化 の
   3 ページで共通利用する「サブ見出し + 本文ブロック + ダイアグラム画像」。
   ページ固有の要素は各ページ専用クラス（例: hc-growth-ecosystem__*）に残す。
============================================================ */

/* サブセクション（サブ見出し + 本文ブロック） */
.hc-detail__section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* サブ見出し（28px 太字 + 40×3 黒バー下線）
   グローバル h3（ir-custom.css）の border-bottom / margin-bottom を打ち消す */
.hc-detail__sub-heading {
  position: relative;
  padding-bottom: 24px;
  margin-bottom: 0;
  border-bottom: none;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.2;
  color: #000;
}

.hc-detail__sub-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background: #000;
}

@media (max-width: 767.98px) {
  .hc-detail__sub-heading {
    font-size: 2.2rem;
    padding-bottom: 20px;
  }
  .hc-detail__sub-heading::after {
    width: 10.67vw;
    height: 0.8vw;
  }
}

/* アコーディオン本文内 ダイアグラム画像 */
.hc-detail__diagram {
  display: block;
  width: 100%;
  height: auto;
}


/* ============================================================
   Human Capital / Eco（成長エコシステム）
   /human-capital/growth-ecosystem/ 専用スタイル
   ------------------------------------------------------------
   ※ 以下の「アコーディオン」「下部ボタン群」「テキストエリア」は
      別ブランチ（feature/ir-individual 系）の /css/ir-individual.css
      で実装済みのコンポーネントを暫定的にここにクローンしている。
      該当ブランチが main にマージされたら、このセクションを丸ごと
      削除し、`<link href="/css/ir-individual.css">` を head に追加
      するだけで OK（クラス名は同一）。
============================================================ */

/* 概要ダイアグラム画像（成長エコシステム全体図） */
.hc-growth-ecosystem__overview-img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 40px;
}

@media (max-width: 767.98px) {
  .hc-growth-ecosystem__overview-img {
    margin-top: 8vw;
  }
}

/* 概要画像とアコーディオン群の間 */
.hc-growth-ecosystem__overview-img + .ir-presentations-accordion {
  margin-top: 80px;
}

@media (max-width: 767.98px) {
  .hc-growth-ecosystem__overview-img + .ir-presentations-accordion {
    margin-top: 13.33vw;
  }
}

/* アコーディオン本文内 段落の本文テキスト（16px） */
.hc-growth-ecosystem__text {
  font-size: 1.6rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #000;
}

.hc-growth-ecosystem__text p + p {
  margin-top: 12px;
}

@media (max-width: 767.98px) {
  .hc-growth-ecosystem__text {
    font-size: 1.6rem;
  }
}

/* 次世代人材 2 カラムカード行（中身は ir-diagram-row__title / __text を使う） */
.hc-growth-ecosystem__card-row {
  display: flex;
  gap: 40px;
}

.hc-growth-ecosystem__card-row > * {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 767.98px) {
  .hc-growth-ecosystem__card-row {
    flex-direction: column;
    gap: 5.33vw;
  }
}


/* ============================================================
   ir-presentations-accordion のベーススタイルは /css/ir-custom.css に
   集約済み（HC ページは head で ir-custom.css を読み込む）。
   ここでは各ページ固有のオーバーライド（下記 .human-capital-eco /
   .human-capital-value / .human-capital-culture 配下）のみを持つ。
============================================================ */


/* ============================================================
   [一時クローン] ir-diagram-row__title / ir-diagram-row__text
   出典: feature/ir-individual の /css/ir-individual.css
   ※ eco では「テキストエリア」として 2 カラム配置で使う
============================================================ */
.ir-diagram-row__title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.55;
  background: #fff;
  border: 1px solid #222;
  padding: 5px 16px;
  margin: 0;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

* + .ir-diagram-row__title {
  margin-top: 29px;
}

.ir-diagram-row__text {
  font-size: 1.6rem;
  line-height: 1.85;
  padding: 0 16px;
  margin-top: 10px;
}


/* ============================================================
   eco ページ固有のオーバーライド
   （クローンしたコンポーネント CSS を eco デザインに合わせて調整）
============================================================ */

/* アコーディオンのタイトルを Figma の 28px に拡大（ベースは 20px） */
.human-capital-eco .ir-presentations-accordion__month {
  font-size: 2.8rem;
}

/* body-inner は intro / 画像 / 段落 を縦に積むので左寄せ + gap 28 + padding 32 に */
.human-capital-eco .ir-presentations-accordion__body-inner {
  align-items: stretch;
  gap: 28px;
  padding: 32px;
}

/* eco の本文は長いので max-height を拡張（800 → 4000） */
.human-capital-eco .ir-presentations-accordion__item.is-open .ir-presentations-accordion__body {
  max-height: 4000px;
}

@media (max-width: 767.98px) {
  .human-capital-eco .ir-presentations-accordion__month {
    font-size: 2.0rem;
  }
  .human-capital-eco .ir-presentations-accordion__body-inner {
    gap: 8vw;
    padding: 5.33vw;
  }
}


/* ============================================================
   Human Capital / Value（「成果とバリューの体現」に正しく応える）
   /human-capital/outcome-value/ 専用スタイル
   ------------------------------------------------------------
   アコーディオン本体は Eco セクションで一時クローン済みの ir-presentations-accordion、
   下部ボタンは ir-custom.css の ir-btn（timee_ir_button）を再利用する。
   サブ見出し / セクション / ダイアグラム画像は共通の hc-detail__* を使用。
   ここでは intro 余白と body class .human-capital-value のオーバーライドのみ。
============================================================ */

/* intro 段落とアコーディオンの間 */
.human-capital-value .hc-paragraph + .ir-presentations-accordion {
  margin-top: 64px;
}

@media (max-width: 767.98px) {
  .human-capital-value .hc-paragraph + .ir-presentations-accordion {
    margin-top: 10.67vw;
  }
}


/* ============================================================
   value ページ固有のオーバーライド（body.human-capital-value 配下）
============================================================ */

.human-capital-value .ir-presentations-accordion__month {
  font-size: 2.8rem;
}

/* body-inner は intro / 画像 / 目的 / 仕組み を縦に積む Figma p-32 gap-40 */
.human-capital-value .ir-presentations-accordion__body-inner {
  align-items: stretch;
  gap: 40px;
  padding: 32px;
}

.human-capital-value .ir-presentations-accordion__item.is-open .ir-presentations-accordion__body {
  max-height: 4000px;
}

@media (max-width: 767.98px) {
  .human-capital-value .ir-presentations-accordion__month {
    font-size: 2.0rem;
  }
  .human-capital-value .ir-presentations-accordion__header {
    padding: 16px;
  }
  .human-capital-value .ir-presentations-accordion__body-inner {
    gap: 8vw;
    padding: 4.27vw;
  }
}


/* ============================================================
   Human Capital / Culture（非連続的成長の土台 ──強みを活かし、高め合う文化）
   /human-capital/culture/ 専用スタイル
   ------------------------------------------------------------
   アコーディオン本体は Eco セクションで一時クローン済みの ir-presentations-accordion、
   下部ボタンは ir-custom.css の ir-btn（timee_ir_button）を再利用する。
   サブ見出し / セクション / ダイアグラム画像は共通の hc-detail__* を使用。
   ここでは intro 余白と body class .human-capital-culture のオーバーライドのみ。
============================================================ */

/* intro 段落とアコーディオンの間 */
.human-capital-culture .hc-paragraph + .ir-presentations-accordion {
  margin-top: 64px;
}

@media (max-width: 767.98px) {
  .human-capital-culture .hc-paragraph + .ir-presentations-accordion {
    margin-top: 10.67vw;
  }
}


/* ============================================================
   culture ページ固有のオーバーライド（body.human-capital-culture 配下）
============================================================ */

.human-capital-culture .ir-presentations-accordion__month {
  font-size: 2.8rem;
}

/* body-inner は intro / 画像 / 目的 / 仕組み を縦に積む Figma p-32 gap-40 */
.human-capital-culture .ir-presentations-accordion__body-inner {
  align-items: stretch;
  gap: 40px;
  padding: 32px;
}

.human-capital-culture .ir-presentations-accordion__item.is-open .ir-presentations-accordion__body {
  max-height: 4000px;
}

@media (max-width: 767.98px) {
  .human-capital-culture .ir-presentations-accordion__month {
    font-size: 2.0rem;
  }
  .human-capital-culture .ir-presentations-accordion__header {
    padding: 16px;
  }
  .human-capital-culture .ir-presentations-accordion__body-inner {
    gap: 8vw;
    padding: 4.27vw;
  }
}