/* ================================================================
 * ir-individual.css
 * 個人投資家の皆さまへ ページ固有スタイル
 * 親ページ + 子ページ共通で使用
 * ================================================================ */

/* ----------------------------------------------------------------
 * ir-nav: ナビゲーションカードグリッド
 * PC: 3列 / SP: 1列
 * ---------------------------------------------------------------- */

.ir-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ir-nav__item {
  width: calc(33.333% - 16px); /* 3列 / gap:24px×2÷3 */
}

.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;
}

/* hover 時のグラデーションへ opacity でクロスフェード */
.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;
}

/* ::before の上に内容物を載せるための積み重ね順 */
.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__text {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.4;
  margin-top: 16px;
}

/* 矢印は通常フローから外し、カード右下に固定配置 */
.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);
}

/* ir-nav--image: 2列・画像背景バナー型 */
.ir-nav--image .ir-nav__item {
  width: calc(50% - 12px); /* 2列 / gap:24px÷2 */
}

.ir-nav--image .ir-nav__link {
  padding: 0;
  aspect-ratio: 16 / 7;
  background-color: #f0f0f0;
  background-size: cover;
  background-position: center;
}

.ir-nav--image .ir-nav__link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(151deg, rgba(255, 255, 255, 0.15) 53.11%, #FFD700 100%);
  /* 非 image 版の .ir-nav__link::before は opacity:0 がデフォルトなので、
     image 版はオーバーレイとして常時表示するために opacity:1 を明示 */
  opacity: 1;
  z-index: 0;
}

.ir-nav--image .ir-nav__title {
  position: absolute;
  bottom: 18px;
  left: 24px;
  right: 60px;
  z-index: 1;
}

.ir-nav--image .ir-nav__arrow {
  z-index: 1;
}

/* ----------------------------------------------------------------
 * ir-investor-hero: ヒーローカード（2枚横並び）
 * 左: CEOメッセージリンク / 右: よくわかるタイミーリンク
 * ---------------------------------------------------------------- */

.ir-investor-hero {
  display: flex;
  gap: 24px;
}

.ir-investor-hero__card {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 260px;
  padding: 32px 24px 24px;
  border: 2px solid #212121;
  box-sizing: border-box;
  text-decoration: none;
  color: #000;
  overflow: hidden;
}

.ir-investor-hero__card:hover {
  opacity: 0.8;
  transition: opacity 0.5s;
}

/* 左カード: CEO写真背景 */
.ir-investor-hero__card--ceo {
  background-color: #ffd700;
}

.ir-investor-hero__card--ceo .ir-investor-hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ir-investor-hero__card--ceo .ir-investor-hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s;
}

/* hover で背景画像をズーム（object-fit のおかげで translate なしで scale だけで OK） */
.ir-investor-hero__card:hover .ir-investor-hero__bg img {
  transform: scale(1.25);
}

.ir-investor-hero__card--ceo .ir-investor-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(167.73deg, rgba(255, 215, 0, 0) 59.83%, rgba(255, 215, 0, 0.4) 72.38%, rgba(255, 215, 0, 0.8) 84.93%);
  pointer-events: none;
}

.ir-investor-hero__card--ceo .ir-investor-hero__blur {
  position: absolute;
  bottom: 0;
  left: -13px;
  width: 270px;
  height: 100px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
  mask-image:
    linear-gradient(to top, #000 30%, transparent),
    linear-gradient(to right, #000 30%, transparent);
  -webkit-mask-image:
    linear-gradient(to top, #000 30%, transparent),
    linear-gradient(to right, #000 30%, transparent);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

/* 右カード: よくわかるタイミー */
.ir-investor-hero__card--about {
  background: linear-gradient(169.44deg, #fff 47.32%, #ffd700 100%);
}

/* hover 時のグラデーションへ opacity でクロスフェード */
.ir-investor-hero__card--about::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #FFD700 12.19%, #FFF 64.88%);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  z-index: 0;
}

.ir-investor-hero__card--about:hover {
  opacity: 1; /* 共通カードの opacity hover を打ち消す */
}

.ir-investor-hero__card--about:hover::before {
  opacity: 1;
}

.ir-investor-hero__card--about .ir-investor-hero__icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* .ir-investor-hero__card--about .ir-investor-hero__icon-mascot {
  width: 72px;
  height: auto;
} */

/* テキスト（共通） */
.ir-investor-hero__text {
  position: relative;
  z-index: 1;
  font-size: 2.0rem;
  font-weight: 700;
  line-height: 1.2;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

/* 矢印（共通） */
.ir-investor-hero__arrow {
  position: absolute;
  bottom: 22px;
  right: 22px;
  z-index: 1;
  display: flex;
  align-items: center;
  transition: transform 0.3s;
}

/* hero カード hover 時に矢印を右に 16px シフト */
.ir-investor-hero__card:hover .ir-investor-hero__arrow {
  transform: translateX(16px);
}

/* ----------------------------------------------------------------
 * ページレイアウト: セクション間スペーシング・ボタン配置
 * ---------------------------------------------------------------- */

/* ヒーローカードとmidtitleセクションの間 */
.ir-investor__section + .ir-investor__section {
  margin-top: 80px;
}

/* ir__heading--h3 の margin-bottom をリセット（セクション間はmargin-topで制御） */
.ir-investor__section .ir__heading--h3 {
  margin-bottom: 0;
}

/* .ir__heading--h3 ベーススタイル
   ir-custom.css は IR 配下ページのみ読み込まれる。
   service/index.php など IR 外で .ir__heading--h3 を使う場合に備え、
   フォントウェイト等の基本値をここで定義しておく。
   font-size / padding-left / border-left は媒体クエリ側で上書きされる。 */
.ir__heading--h3 {
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.06em;
}

/* /ir/individual/ 配下のみ PC で ir__heading--h3 を強調表示（fs 24px / 疑似要素 w:8 × h:27）。
   ir-custom.css の PC ベース（fs 20px / border-left）を上書き。
   ir-custom.css の SP オーバーライドはこのファイルより前のセレクタ順なので、
   PC 専用に `@media (min-width: 768px)` で囲って SP に影響しないようにする。 */
@media (min-width: 768px) {
  .ir__heading--h3 {
    position: relative;
    font-size: 2.4rem;
    /* 疑似要素 (w:8, left:0) の右端から 12px のギャップ → padding-left: 8 + 12 = 20px */
    padding-left: 20px;
    border-left: none;
  }
  .ir__heading--h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 27px;
    background-color: #ffd700;
  }
}

/* midtitleとナビカードの間 */
.ir-investor__section .ir-nav {
  margin-top: 40px;
}

/* ボタン配置 */
.ir-investor__btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 80px;
}

/* ================================================================
 * ir-message-section コンポーネント群（子ページ: understanding/ で使用）
 *   - ir-yellow-banner : 黄色平行四辺形バナー
 *   - ir-text-image    : テキスト左+画像右の2カラム
 *   - ir-dash-heading  : ダッシュ付きサブ見出し
 *   - ir-diagram-row   : 図解+テキスト2カラム
 *   - ir-feature-box   : ボーダー付きテキストボックス
 * ================================================================ */

/* ----------------------------------------------------------------
 * ir-yellow-banner
 * ---------------------------------------------------------------- */
.ir-yellow-banner {
  position: relative;
  padding: 32px 80px;
  text-align: center;
  background: var(--corp-gradient-yellow, linear-gradient(76deg, #FDC707 0%, #FFEF4D 100%));
  clip-path: polygon(36px 0%, 100% 0%, calc(100% - 36px) 100%, 0% 100%);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12rem;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

.ir-yellow-banner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 100%;
  background: #FDC80A;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.ir-yellow-banner::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 36px;
  height: 100%;
  background: #FFEE4C;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* h3 (lh 1.1 fs 20 → 下 leading 1) → yellow-banner (lh 1.4 fs 24 → 上 4.8)
   Figma 32px - 1 - 4.8 = 26.2px */
* + .ir-yellow-banner {
  margin-top: 26px;
}

/* ----------------------------------------------------------------
 * ir-text-image
 * ---------------------------------------------------------------- */
.ir-text-image {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  /* yellow-banner (下 4.8) → ir-text-image__title (lh 1.55 fs 20 → 上 5.5)
     Figma 32px - 4.8 - 5.5 = 21.7px */
  margin-top: 22px;
}

.ir-text-image__body {
  flex: 1;
}

.ir-text-image__media {
  flex: 0 0 45%;
}

.ir-text-image__media img {
  width: 100%;
  height: auto;
  display: block;
}

.ir-text-image__title {
  font-size: 2.0rem;
  font-weight: 700;
  line-height: 1.55;
  border: none;
  padding: 0;
  margin-bottom: 0;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

.ir-text-image__text {
  font-size: 1.6rem;
  line-height: 1.85;
  /* title (下 leading 5.5) → text (上 leading 6.8)
     Figma 24px - 5.5 - 6.8 = 11.7px */
  margin-top: 12px;
}

/* Figma では同一テキストノード内の段落区切り（gap 0、line-height のみで行間を確保）
   CSS では <p> を分けるため margin-top: 0 で密着させ line-height で行間を出す */
.ir-text-image__text + .ir-text-image__text {
  margin-top: 0;
}

/* ----------------------------------------------------------------
 * ir-dash-heading
 * ---------------------------------------------------------------- */
.ir-dash-heading {
  font-size: 2.0rem;
  font-weight: 700;
  line-height: 1.55;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

/* yellow-banner (下 leading 4.8) → dash-heading (上 leading 5.5)
   Figma 32px - 4.8 - 5.5 = 21.7px（最も多いケース） */
* + .ir-dash-heading {
  margin-top: 22px;
}

/* diagram-row 直後の dash-heading は Figma 48px gap
   前 row 内 text (下 leading 6.8) → dash-heading (上 leading 5.5)
   48 - 6.8 - 5.5 = 35.7px */
.ir-diagram-row + .ir-dash-heading {
  margin-top: 36px;
}

.ir-dash-heading::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 2px;
  background-color: #212121;
  vertical-align: middle;
  margin-right: 8px;
}

/* dash-heading (下 leading 5.5) → diagram-row (image-first → 0 leading)
   Figma 32px - 5.5 = 26.5px */
* + .ir-diagram-row {
  margin-top: 27px;
}

/* ----------------------------------------------------------------
 * ir-feature-box
 * ---------------------------------------------------------------- */
.ir-feature-box {
  border: 1px solid #222;
  padding: 20px 24px;
}

.ir-feature-box + .ir-feature-box {
  margin-top: 16px;
}

.ir-feature-box__title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

.ir-feature-box__text {
  font-size: 1.4rem;
  line-height: 1.85;
  margin-top: 12px;
}

/* ----------------------------------------------------------------
 * ir-diagram-row
 *   親 1056px / image 508 (flex:1) / gap 40 / content 508 (Figma 25355:3091 w-508)
 *   text 領域(__text)は padding: 0 16px で実テキスト幅 = 508 - 32 = 476px
 * ---------------------------------------------------------------- */
.ir-diagram-row {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

.ir-diagram-row__media {
  flex: 1;
  max-width: 500px;
}

/* ir-text-image: 親が full 1056px のとき固定幅レイアウト
   media 500 + gap 40 + body 516 = 1056 で l-main__inner と一致
   l-main__inner の content 幅が 1056 になるのは viewport >= 1184 (1184 - padding 64*2) */
@media (min-width: 1184px) {
  .ir-text-image {
    gap: 40px;
  }
  .ir-text-image__media {
    flex: 0 0 500px;
  }
  .ir-text-image__body {
    flex: 0 0 516px;
  }
}

.ir-diagram-row__media img {
  width: 100%;
  height: auto;
  display: block;
}

.ir-diagram-row__content {
  flex: 0 0 508px;
}

.ir-diagram-row__title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.55;
  border: 1px solid #222;
  padding: 5px 16px;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

/* item-1 の text (下 leading 6.8) → item-2 の midTitle (上 leading 4.4)
   Figma 親 gap 40px - 6.8 - 4.4 = 28.8px */
* + .ir-diagram-row__title {
  margin-top: 29px;
}

.ir-diagram-row__text {
  font-size: 1.6rem;
  line-height: 1.85;
  padding: 0 16px;
  /* midTitle (lh 1.55 fs 16, padding ありで実テキスト下端は border 込み)
     → text (上 leading 6.8) のための補正値（ユーザー指示） */
  margin-top: 10px;
}

/* ================================================================
 * ir-presentations-accordion : 個人投資家向けIR活動 アコーディオン
 *   Figma: PC 24661:14342 / SP 25046:15934 （資料・動画ページで使用）
 *   - アイテム間 24px / header padding 24px / body は #ffffd2 黄色背景
 *   - body-inner: gap 24, padding 24 24 40 (PC) / 16 (SP)
 *   - リンクカード: 黄(#ffd700) bg, h 72, w 560 (PC) / w 100% (SP)
 * ================================================================ */
.ir-presentations-accordion__item + .ir-presentations-accordion__item {
  margin-top: 24px;
}

.ir-presentations-accordion__item {
  background: #fff;
  border-bottom: 2px solid #000;
}

.ir-presentations-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
}

.ir-presentations-accordion__month {
  font-size: 2.0rem;
  font-weight: 700;
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
  line-height: 1.2;
  color: #000;
}

/* トグルアイコン（+ / −）
   - 横棒・縦棒ともに 32px の正方形領域いっぱいまで描画
   - 開いたときは縦棒を rotate(90deg) で右に回転させ横棒に重ねる（横棒一本に見える） */
.ir-presentations-accordion__toggle {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.ir-presentations-accordion__toggle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 2px;
  background: #000;
  transform: translate(-50%, -50%);
}

.ir-presentations-accordion__toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 32px;
  background: #000;
  transform: translate(-50%, -50%);
  transition: transform 0.5s;
}

.ir-presentations-accordion__item.is-open .ir-presentations-accordion__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* コンテンツエリア外枠（高さ制御のみ） */
.ir-presentations-accordion__body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s;
}

.ir-presentations-accordion__item.is-open .ir-presentations-accordion__body {
  max-height: 3000px;
}

/* コンテンツエリア内枠（paddingとレイアウト） */
.ir-presentations-accordion__body-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  background: #ffffd2;
  padding: 24px 24px 40px;
}

/* リンクカード */
.ir-presentations-accordion__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 560px;
  max-width: 100%;
  min-height: 72px;
  padding: 0 24px;
  background: var(--yellow-corp, #ffd700);
  color: #000;
  text-decoration: none;
  box-sizing: border-box;
  gap: 16px;
}

.ir-presentations-accordion__link-text {
  font-size: 1.6rem;
  font-weight: 700;
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.ir-presentations-accordion__link-icon {
  flex-shrink: 0;
  display: block;
  /* height: 24px; */
  width: auto;
}

/* リンクカード: 折り返し許容モディファイア (長文タイトル用) */
.ir-presentations-accordion__link--wrap {
  padding-top: 8px;
  padding-bottom: 8px;
}

.ir-presentations-accordion__link--wrap .ir-presentations-accordion__link-text {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* ================================================================
 * documents__btn-wrap : 個人投資家向けIR活動ページ 下部CTAボタン群
 *   Figma 24693:14979 — items-start で左寄せ、ボタン2個を 24px 縦積み
 *   ボタン: 黒背景 / 白文字 16px / 矢印は左向き・テキスト左隣
 * ================================================================ */
.documents__btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-top: 80px;
}

.documents__btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 516px;
  max-width: 100%;
  height: 50px;
  padding: 16px 24px;
  background-color: #000;
  box-shadow: inset 0 0 0 1px #000;
  color: #fff;
  text-decoration: none;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  box-sizing: border-box;
  transition: background-color 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) 0s,
    color 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
}

/* c-btn と同じ「ゴールド帯が左からスライドイン → 背景が白に切替わる」演出 */
.documents__btn::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: gold;
  transform: translate3d(-100%, 0, 0);
  opacity: 1;
  transition: transform 0s cubic-bezier(0.77, 0, 0.275, 1),
    opacity 0s cubic-bezier(0.77, 0, 0.275, 1) 0.3s;
  pointer-events: none;
}

/* ::before の上に表示するために span を相対配置 */
.documents__btn-arrow,
.documents__btn-text {
  position: relative;
  z-index: 2;
}

/* 矢印（左向き）— icon_arrow_w.svg を 180度回転して再利用 */
.documents__btn-arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  width: 19px;
  height: 11.59px;
  background: url(/img/common/icon/icon_arrow_w.svg) no-repeat center / contain;
  transform: rotate(180deg);
  transition: background-image 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.documents__btn:hover {
  background-color: #fff;
  color: #000;
  transition: background-color 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) 0.1s,
    color 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.documents__btn:hover::before {
  transform: translate3d(0, 0, 0);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.77, 0, 0.275, 1),
    opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) 0.3s;
}

.documents__btn:hover .documents__btn-arrow {
  background-image: url(/img/common/icon/icon_arrow_b.svg);
}

/* ================================================================
 * understanding__ : よくわかるタイミー ページ固有スタイル
 * Figma: 24694:17083 (PC), 25046:13361 (SP)
 * ================================================================ */

/* ----------------------------------------------------------------
 * understanding__section: セクション間スペース
 *   Figma node 24694:17086 はセクション間 gap:64px
 *   前 section 末尾は text (lh 1.85 fs 16 → 下 leading 6.8)
 *   次 section 先頭は h3 (lh 1.1 fs 20 → 上 leading 1)
 *   64 - 6.8 - 1 = 56.2px
 * ---------------------------------------------------------------- */
.understanding__section + .understanding__section {
  margin-top: 56px;
}

.understanding__section .ir__heading--h3 {
  /* ir-custom.css の margin-bottom: 16px をリセットし、後続要素で mt を制御 */
  margin-bottom: 0;
}

/* h3 (下 leading 1) → 後続 (yellow-banner なら上 4.8 / diagram-row image-first なら 0)
   Figma 32px gap、yellow-banner ケース: 32 - 1 - 4.8 = 26.2px */
.understanding__section .ir__heading--h3 + * {
  margin-top: 26px;
}

/* h3 直後が ir-diagram-row（strategy セクション、image-first） の場合
   32 - 1 = 31px */
.understanding__section .ir__heading--h3 + .ir-diagram-row {
  margin-top: 31px;
}

/* ----------------------------------------------------------------
 * understanding__wide-figure: 全幅イラスト
 *   Figma 24843:17652 (1056×260) — BPR ノウハウ dash-heading 直後に配置
 *   Figma 親 25050:18659 gap-32px
 *   前 dash-heading (下 leading 5.5) → wide-figure (画像、leading 0)
 *   32 - 5.5 = 26.5px
 * ---------------------------------------------------------------- */
.understanding__wide-figure {
  position: relative;
  margin-top: 27px;
}

.understanding__wide-figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* BPR ワイド画像の上に重ねるキャプション（PC: 上下中央/right=24px, 文字右寄せ） */
.understanding-bpr-caption {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  font-size: 1.6rem;
  line-height: 2;
  color: #000;
  text-align: right;
  font-weight: 600;
  span {
    font-weight: 400;
  }
}

/* 成長戦略の画像（500×281）上のキャプション。.ir-diagram-row__media と
   組み合わせて使うので媒体側に position: relative を付ける（後述）。
   PC: 右下、文字右寄せ */
.understanding-strategy-media {
  position: relative;
}

.understanding-strategy-caption {
  position: absolute;
  bottom: 24px;
  right: 24px;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #000;
  text-align: right;
  font-weight: 600;
}

/* wide-figure (画像、leading 0) → ir-diagram-row（image-first なら 0、content-first なら midTitle 上 4.4）
   Figma 32px gap、image-first ケース: 32px / content-first ケース: 32 - 4.4 = 27.6px
   advantage 第2 row は content-first なので 28px が適切 */
.understanding__wide-figure + .ir-diagram-row {
  margin-top: 28px;
}

/* ----------------------------------------------------------------
 * understanding__heading-wrap: セクション見出しコンテナ
 *   midTitle の上に「individual」ラベルなど補助情報を置く余地を残すためのラッパー
 *   今回は単独で使用
 * ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
 * understanding__yellow-area: 全幅黄色背景エリア
 *   Figma node 24847:17736 (1440×2421.25)
 *   ミッションバナー・動画・サービス一覧を包む全幅コンテナ
 *   上端に対角線状の yellow トップ装飾、全体的に淡い黄色グラデーション背景
 *   l-main__inner の外側に配置する（全幅）
 * ---------------------------------------------------------------- */
.understanding__yellow-area {
  position: relative;
  padding: 200px 0 80px; /* 上端の装飾 + 内部 content の開始位置 */
  margin-top: 40px;
  overflow: hidden;
}

/* yellow-area 内の .l-main__inner には、yellow-area 専用の補助スタイルを当てる。
   .l-main__inner の共通スタイル（max-width:1184px / padding:0 64px）は維持し、
   over__line との z 重なり制御と、内側セクション間マージンだけ上書きする。
   ※ PC のコンテンツ幅は 1184 - 64*2 = 1056 で、旧 yellow-area__inner（1440 - 192*2 = 1056）と同じ。 */
.understanding__yellow-area > .l-main__inner {
  position: relative;
  z-index: 1;
}

/* yellow-area 内のセクション間マージン */
.understanding__yellow-area > .l-main__inner > * + * {
  margin-top: 80px;
}

/* over__line: about ページでは bottom: マイナス値で下端から覗かせる装飾だが、
   このページでは yellow-area の上端から流し込む見せ方にする。
   about.css の .over__line 系の bottom 指定をスコープ内で打ち消し、top: 0 に置き換える */
.understanding__yellow-area .over__line {
  top: -115px;
  bottom: auto;
  z-index: 2;
}

/* ----------------------------------------------------------------
 * understanding__mission: ミッションバナー
 *   Figma node 24847:17717 — Timee ロゴ + yellow banner + 説明文
 *   yellow-area の中に配置する
 * ---------------------------------------------------------------- */
.understanding__mission {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding-bottom: 24px;
  text-align: center;
}

.understanding__mission-logo {
  width: 320px;
  height: auto;
}

/* mission は flex gap 40px で logo / yellow-banner / mission-text を縦並び。
   yellow-banner と mission-text は line-height > 1 なので上下に leading が入り
   gap が見た目より広く見える。負 margin で leading を打ち消す
   （`.claude/rules/css-conventions.md` の flex gap + テキスト要素ルール参照） */
.understanding__mission .ir-yellow-banner {
  width: 100%;
  font-size: 2.4rem;
  /* (1.4-1)*24/2 = 4.8px */
  margin: -4.8px 0;
}

.understanding__mission-text {
  width: 640px;
  max-width: 100%;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.09rem;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  /* (1.8-1)*18/2 = 7.2px */
  margin: -7.2px 0;
}

/* ----------------------------------------------------------------
 * understanding__movie: 動画埋め込みセクション
 *   Figma node 24847:17894 (560×315 iframe)
 *   about__movie を中央寄せで配置
 * ---------------------------------------------------------------- */
.understanding__movie {
  display: flex;
  justify-content: center;
}

.understanding__movie .about__movie {
  margin-top: 0;
  max-width: 560px;
}

/* midTitle は中央寄せしたいので ir__heading--h3 を yellow-area 内ではフレキシブルに */
.understanding__yellow-area .ir__heading--h3 {
  margin-bottom: 32px;
}

/* ----------------------------------------------------------------
 * yellow-area 内サービスセクションの上マージン
 *   - .service (Timee 本体) は 32px
 *   .c-service-intro の上余白は service.css で 80px（PC）を定義済み
 *   ロゴバンド + サブタイトル付きの 2 カラムレイアウトも service.css の
 *   .c-service-intro で定義
 * ---------------------------------------------------------------- */
.understanding__yellow-area .service {
  margin-top: 32px;
}

/* c-btn2 が付くサービスボタン（c-service-intro 用）の上マージン */
.understanding__yellow-area .service__btn.c-btn.c-btn2 {
  margin-top: 16px;
}

/* ----------------------------------------------------------------
 * l-main__inner 直下の ir__heading--h3 初回マージンリセット
 * ---------------------------------------------------------------- */
.l-main__inner > .ir__heading--h3:first-child {
  margin-top: 0;
}

/* ----------------------------------------------------------------
 * SP
 * ---------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* ir-nav */
  .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__text {
    font-size: 1.4rem;
    margin-top: 2.66vw;
  }

  .ir-nav__arrow {
    bottom: 16px;
    right: 16px;
  }

  .ir-nav--image .ir-nav__item {
    width: 100%;
  }

  .ir-nav--image .ir-nav__link {
    aspect-ratio: 4 / 3;
  }

  .ir-nav--image .ir-nav__title {
    bottom: 16px;
    left: 16px;
    right: 52px;
  }

  /* ir-investor-hero */
  .ir-investor-hero {
    flex-direction: column;
    gap: 4.26vw;
  }

  .ir-investor-hero__card {
    flex: none;
    width: 100%;
    height: 200px;
    padding: 12px;
  }

  /* SP も PC と同じく中央配置 (横幅 100% / 上下中央)。
     SP 画像は 1029×600 (aspect ≒ 1.715)、カードは width:100% / height:200px なので
     PC と同じ式でほぼ過不足なく収まる。 */

  .ir-investor-hero__card--ceo .ir-investor-hero__overlay {
    background: linear-gradient(167.82deg, rgba(255, 215, 0, 0) 36.76%, rgba(255, 215, 0, 0.6) 58.86%, #ffd700 86.49%);
  }

  .ir-investor-hero__arrow {
    bottom: 14px;
    right: 14px;
  }

  .ir-investor-hero__text {
    font-size: 2.0rem;
  }

  .ir-investor-hero__card--about .ir-investor-hero__icon img {
    width: 112px;
    height: auto;
  }

  .ir-investor__section + .ir-investor__section {
    margin-top: 10.66vw;
  }

  .ir-investor__section .ir-nav {
    margin-top: 6.4vw;
  }

  .ir-investor__btn-wrap {
    margin-top: 10.66vw;
  }

  .ir-investor__btn-wrap .c-btn {
    width: 100%;
  }

  /* ir-yellow-banner */
  .ir-yellow-banner {
    padding: 24px 8vw;
    font-size: 2.0rem;
    line-height: 1.4;
    clip-path: polygon(24px 0%, 100% 0%, calc(100% - 24px) 100%, 0% 100%);
  }

  .ir-yellow-banner::before,
  .ir-yellow-banner::after {
    width: 24px;
  }

  * + .ir-yellow-banner {
    margin-top: 8vw;
  }

  /* ir-text-image */
  .ir-text-image {
    flex-direction: column;
    gap: 6.4vw;
    margin-top: 6.4vw;
  }

  .ir-text-image__media {
    flex: none;
    width: 100%;
    order: -1;
  }

  .ir-text-image__title {
    font-size: 2.0rem;
  }

  .ir-text-image__text {
    font-size: 1.6rem;
    margin-top: 4vw;
  }

  /* ir-dash-heading */
  .ir-dash-heading {
    position: relative;
    font-size: 2.0rem;
    line-height: 1.2;
    padding-left: 24px;
  }

  /* ::before を block + absolute で縦中央・左端に配置（PC は inline-block + 文字脇配置） */
  .ir-dash-heading::before {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    margin-right: 0;
  }

  * + .ir-dash-heading,
  .ir-diagram-row + .ir-dash-heading {
    margin-top: 24px;
  }

  * + .ir-diagram-row {
    margin-top: 6.4vw;
  }

  /* ir-feature-box */
  .ir-feature-box {
    padding: 4.27vw 4.27vw;
  }

  .ir-feature-box + .ir-feature-box {
    margin-top: 4vw;
  }

  .ir-feature-box__title {
    font-size: 1.5rem;
  }

  .ir-feature-box__text {
    margin-top: 3.2vw;
  }

  /* ir-diagram-row */
  .ir-diagram-row {
    flex-direction: column;
    gap: 6.4vw;
  }

  /* DOM 順に依らず常に media を上に */
  .ir-diagram-row__media {
    flex: none;
    width: 100%;
    max-width: none;
    order: -1;
  }

  .ir-diagram-row__title {
    line-height: 1.2;
    padding-top: 12px;
    padding-bottom: 12px;
  }

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

  .ir-diagram-row__text {
    padding-left: 0;
    padding-right: 0;
  }

  /* understanding */
  .understanding__section + .understanding__section {
    margin-top: 40px;
  }

  /* ir-individual.css を読み込んでいるページに限り、SP の c-pageTitle-md__inner の
     padding-bottom を 40px に縮める */
  .c-pageTitle-md__inner {
    padding-bottom: 40px;
  }

  /* SP: ir__heading--h3 を強調表示（fs 24px / border-left を ::before バー w:8 × h:100% に置換 / mt:40px）
     ir-custom.css は他ページから読まれるためそちらに書かず、このページ群限定でこちらに集約する */
  .ir__heading--h3 {
    position: relative;
    font-size: 2.4rem;
    padding-left: 16px;
    margin-top: 40px;
    border-left: none;
  }
  .ir__heading--h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 100%;
    background-color: #ffd700;
  }
  /* 親内の先頭要素のときは mt をリセット（section+section の mt と重複しないように） */
  .ir__heading--h3:first-child {
    margin-top: 0;
  }

  .understanding__section .ir__heading--h3 + * {
    margin-top: 6.4vw;
  }

  /* understanding__yellow-area */
  .understanding__yellow-area {
    padding: 32vw 0 13.33vw;
    margin-top: 40px;
  }

  .understanding__yellow-area::before {
    height: 34.66vw;
  }

  /* PC は top: -115px で yellow-area の上端から少しはみ出す装飾だが、
     SP は over__line の height (26.66vw ≒ 100px) が小さく、-115px だと
     yellow-area の overflow: hidden で完全に切れて見えなくなる。
     SP では top: 0 にして帯を yellow-area 内に表示する。 */
  .understanding__yellow-area .over__line {
    top: 0;
  }

  /* BPR ワイド画像キャプション SP: 下寄せ、左右 8px、文字右寄せ */
  .understanding-bpr-caption {
    top: auto;
    bottom: 8px;
    left: 0;
    right: 4px;
    transform: none;
    font-size: 1.3rem;
    line-height: 1.8;
    letter-spacing: -0.01em;
  }

  /* 成長戦略キャプション SP: 下寄せ、左右 16px、文字センター */
  .understanding-strategy-caption {
    bottom: 18px;
    left: 16px;
    right: 16px;
    font-size: 1.3rem;
    line-height: 1.8;
    text-align: center;
    letter-spacing: -0.01em;
  }

  /* yellow-area 内の l-main__inner は SP padding を 6.4vw に戻す（共通の 9.6vw を上書き） */
  .understanding__yellow-area > .l-main__inner {
    padding: 0 6.4vw;
  }

  .understanding__yellow-area > .l-main__inner > * + * {
    margin-top: 16vw;
  }

  /* understanding__mission */
  .understanding__mission {
    gap: 8vw;
    padding-bottom: 4vw;
  }

  .understanding__mission-logo {
    width: 320px;
  }

  .understanding__mission .ir-yellow-banner {
    font-size: 2.0rem;
    /* fs 20 / lh 1.4 → leading 4px。PC の -4.8px から更新 */
    margin: -4px 0;
  }

  .understanding__mission-text {
    width: 100%;
    font-size: 1.8rem;
    text-align: center;
    line-height: 1.8;
  }

  /* understanding__movie */
  .understanding__movie .about__movie {
    margin-top: 0;
  }

  .understanding__yellow-area .ir__heading--h3 {
    margin-bottom: 4vw;
  }

  /* yellow-area 内サービスセクション SP マージン */
  .understanding__yellow-area .service {
    margin-top: 32px;
  }

  .understanding__yellow-area .c-service-intro {
    margin-top: 32px;
  }

  /* service/index.php: .service.spotwork は DOM content → img なので
     service.css の SP の display: block では content が上に来てしまう。
     flex(column) + order:-1 で img を最前に並べる。 */
  .service.spotwork .service__inner {
    display: flex;
    flex-direction: column;
  }
  .service.spotwork .spotwork__img {
    order: -1;
  }

  /* documents__btn-wrap (SP) */
  .documents__btn-wrap {
    align-items: stretch;
    gap: 4vw;
    padding-top: 10.66vw;
    width: 100%;
  }

  .documents__btn {
    width: 100%;
    font-size: 1.4rem;
  }

  /* ir-presentations-accordion (SP) */
  .ir-presentations-accordion__item + .ir-presentations-accordion__item {
    margin-top: 4.267vw;
  }

  .ir-presentations-accordion__header {
    padding: 4.267vw;
  }

  .ir-presentations-accordion__month {
    font-size: 1.8rem;
  }

  .ir-presentations-accordion__body-inner {
    gap: 4.267vw;
    padding: 4.267vw;
  }

  .ir-presentations-accordion__link {
    width: 100%;
    min-height: 64px;
    padding: 0 4.267vw;
  }

  .ir-presentations-accordion__link-text {
    font-size: 1.4rem;
  }

  .ir-presentations-accordion__link-icon {
    /* height: 20px; */
  }
}

/* ================================================================
 * ir-subheader : 既存 .l-header の直下に常時表示する固定サブナビ
 *
 * 既存ヘッダー仕様:
 *   PC: height 80px / SP: height 18.66667vw
 *   scroll-down → .l-header.is-hidden (transform: translateY(-110%))
 *   scroll-up   → .is-hidden 除去
 *   transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1)
 *
 * レイアウト:
 *   top: 0 でヘッダーと同じ起点から配置。
 *   padding-top: var(--_header-h) でコンテンツをヘッダー高さ分だけ下に押し下げる。
 *   z-index をヘッダーより1段低くすることで既存ヘッダーが上に重なる。
 *
 * アニメーション:
 *   .header-hidden 時は translateY(−ヘッダー高さ) でコンテンツをビューポート上端へ移動。
 *   背景がヘッダー裏まで伸びているため、ヘッダーの translateY(-110%) との
 *   8px のズレもサブヘッダー背景色が自然に埋める（隙間問題が発生しない）。
 *
 *   CSS カスタムプロパティ --_header-h でヘッダー高さを一元管理。
 * ================================================================ */
.ir-subheader {
  --_header-h: 80px;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: var(--_header-h);
  z-index: 99998; /* .l-header(100000) の下、SP メニュー .l-spMenu(99999) のさらに下 */
  background: #FFD700;
  /* 背後の .c-pageTitle-md__line の画像と乗算合成する。
     background-blend-mode は同一要素内の background レイヤー同士のブレンド
     なので背後の別要素には効かない → mix-blend-mode を使う必要がある。 */
  mix-blend-mode: multiply;
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  transform: translateY(0);
}

.ir-subheader.header-hidden {
  transform: translateY(calc(-1 * var(--_header-h)));
  transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

/* .c-pageTitle-md の下端より subheader の top が下にあるとき（=タイトル域を
   スクロールで通り過ぎたとき）、背後にページ内の様々な色が来て multiply が視認性を
   損なうので blend を切る。JS が is-past-pageTitle クラスをトグルする。
   mix-blend-mode は transition 不可（discrete property）のため瞬間切替。 */
.ir-subheader.is-past-pageTitle {
  mix-blend-mode: normal;
}

.ir-subheader__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 64px;
  height: 44px;
}

.ir-subheader__label {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  color: #000;
}

.ir-subheader__nav {
  display: flex;
  align-items: center;
}

.ir-subheader__link {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}

.ir-subheader__link:hover {
  text-decoration: underline;
}

/* ダイヤセパレータ: 4×4px の正方形を 45° 回転して菱形に。最後のリンクには付けない */
.ir-subheader__link:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background: currentColor;
  transform: rotate(45deg);
  vertical-align: middle;
  margin-left: 8.5px;
  margin-right: 8.5px;
  flex-shrink: 0;
}

/* .ir-subheader を持つページでは c-pageTitle-md の上余白に subheader の visible 高さを加算。
   --ir-subheader-h は JS（/js/ir/individual/index.js）が実測してセットする。 */
.ir-subheader ~ .l-main .c-pageTitle-md__inner {
  padding-top: calc(170px + var(--ir-subheader-h, 0px));
}

@media (max-width: 767.98px) {
  .ir-subheader ~ .l-main .c-pageTitle-md__inner {
    padding-top: calc(44.26667vw + var(--ir-subheader-h, 0px));
  }
}

@media (max-width: 767.98px) {
  .ir-subheader {
    --_header-h: 18.66667vw;
  }

  .ir-subheader__inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.06667vw; /* 4px @375 */
    padding: 1.6vw 7.46667vw; /* 上下 6px @375 */
    height: auto;
  }

  .ir-subheader__label {
    font-size: 1.3rem;
    line-height: 1.2;
    letter-spacing: 0.04em;
  }

  .ir-subheader__nav {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 1.06667vw; /* 4px @375 */
  }

  .ir-subheader__link {
    font-size: 1.2rem;
    line-height: 1.2;
    letter-spacing: 0.04em;
  }
}