/*
 * style.css
 * メインスタイル：レイアウト・コンポーネント・ページ別
 * 読み込み順: reset.css → common.css → style.css
 */

/* ==========================================================================
   1. レイアウト基盤
   ========================================================================== */
.main-content {
  
}

.category {
  /* overflow: hidden; 削除 - Lenisでスクロールバーを操作可能にする */
  width: 100%;
  height: auto;
  box-sizing: border-box;
  display: block;
  position: relative;
}

/* ===== V5: 固定メディアグリッド背景（グリッド・ズーム）=====
   .media-grid を画面全体に固定（z-index:0）。スクロールで scale/translate を GSAP が駆動し、
   「寄り（ヒーロー）→ 引き（20枚全体）→ 森タイルへズームイン」。
   前面のセクション（hero テキスト / #about / BUSINESS / NEWS）は背景透明で上を流れる。 */
body.index-page .media-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  transform-origin: center center;
  /* 初期はヒーロー拡大状態（中央窓＝旧 bento が画面いっぱいに見える）。JS が引き/森ズームを駆動 */
  transform: scale(2.5);
  will-change: transform, opacity;
  background-color: #fff;
  pointer-events: none;
}

body.index-page .media-grid__tile {
  position: absolute;
  overflow: hidden;
  background-color: #f0f0f0;
  /* 白い目地（scale2.5 時に約5px ≒ 旧 bento の 6px gap）。
     --tile-line: FV では 0（透明＝継ぎ目なしの1枚に見える）→ スクロールで引くと 1（白）へ。
     box-sizing:border-box なので幅は不変＝レイアウトはズレない（JS が --tile-line を補間）。 */
  /* 幅ごと 0 にする（色だけ透明にすると border 領域に background-color が出て薄い線が残るため）。
     box-sizing:border-box なのでタイルの外形は不変＝レイアウトはズレない。
     ※フォールバックは 0: initMediaGridZoom はオープニング完了後に走るため、
       既定を 1 にするとオープニング〜FV到達までの間だけ目地と角丸が出てしまう。 */
  border: calc(2px * var(--tile-line, 0)) solid #fff;
  /* 角丸も同じ進行度で連動（角丸が残ると角に白い隙間が見えて一体感が崩れるため） */
  border-radius: calc(var(--border-radius-sm) * var(--tile-line, 0));
  box-sizing: border-box;
  /* 目地が 0（FV）の間だけタイルを 0.8% 拡大して隣と重ね、境界の「白い淵」を消す。
     タイル同士は座標上ほぼ密着しているが、境界がサブピクセル位置（例 y=274.2657）に落ちると
     両側の縁が半透明にアンチエイリアスされ、その1px行だけ下地（.media-grid の白）が透ける。
     grid が scale(2.5) されているぶん誤差も拡大されるため、FV では特に目立つ。
     目地が出る（1 に近づく）ほど 0 に戻るので、引いた時のモザイクの座標・見た目は不変。
     ※浮遊演出（script.js）は p>0 でタイルに inline transform を書くが、
       その区間は --tile-line ≥ 0.02 で白い目地が出て継ぎ目を隠すため問題にならない。 */
  transform: scale(calc(1 + 0.008 * (1 - var(--tile-line, 0))));
}

body.index-page .media-grid__tile img,
body.index-page .media-grid__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* FV タイルのスライドショー（is-active がクロスフェード表示） */
body.index-page .media-grid__slide {
  opacity: 0;
  transition: opacity 1.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body.index-page .media-grid__slide.is-active {
  opacity: 1;
}

/* --- タイル配置（グリッド全体に対する %）: PC = 13枠（上4 / 中5 / 下4）---
   FVPC2 準拠。「上段は左が大きい／下段は右が大きい」対角の非対称リズム＋中段は両端を広く内側を狭く。
   縦は 29/40/29、中央列（p2 / fv3 / p8）は 39.5〜60.5% で縦に一直線。
   目地は border（--tile-line で FV では透明→引くと白）が担うため座標は隣接させる。 */
/* 中段 5 枚（fv・スライドショー。fv3 = 中央の主役。両端26%・内側13.5%の非対称） */
body.index-page .media-grid__tile--fv1 { left: 0%;     top: 30%; width: 26%;   height: 40%; }
body.index-page .media-grid__tile--fv2 { left: 26%;    top: 30%; width: 13.5%; height: 40%; }
body.index-page .media-grid__tile--fv3 { left: 39.5%;  top: 30%; width: 21%;   height: 40%; }
body.index-page .media-grid__tile--fv4 { left: 60.5%;  top: 30%; width: 13.5%; height: 40%; }
body.index-page .media-grid__tile--fv5 { left: 74%;    top: 30%; width: 26%;   height: 40%; }
/* 上段 4 枚（左が大 → 右を2分割） */
body.index-page .media-grid__tile--p1 { left: 0%;     top: 0%; width: 39.5%; height: 29%; }
body.index-page .media-grid__tile--p2 { left: 39.5%;  top: 0%; width: 21%;   height: 29%; }
body.index-page .media-grid__tile--p3 { left: 60.5%;  top: 0%; width: 19.5%; height: 29%; }
body.index-page .media-grid__tile--p4 { left: 80%;    top: 0%; width: 20%;   height: 29%; }
/* 下段 4 枚（左を2分割 → 右が大。p6=森・SUSTAINABILITY のズーム着地先なので必ず表示・大枠で画質も有利） */
body.index-page .media-grid__tile--p5 { left: 0%;     top: 71%; width: 19.5%; height: 29%; }
body.index-page .media-grid__tile--p7 { left: 19.5%;  top: 71%; width: 20%;   height: 29%; }
body.index-page .media-grid__tile--p8 { left: 39.5%;  top: 71%; width: 21%;   height: 29%; }
body.index-page .media-grid__tile--p6 { left: 60.5%;  top: 71%; width: 39.5%; height: 29%; }
/* PC で使わない枠（SP では p9/p10 を使う） */
body.index-page .media-grid__tile--p9,
body.index-page .media-grid__tile--p10 { display: none; }

/* --- モバイル（≤1024px）: SP = 13枠（上3 / 中央7 / 下3）---
   SPPC2 準拠。上部は左に大きな縦長＋右に2枚、下部は左に2枚＋右に大きな縦長（PCと同じ対角リズム）。
   中央の中列(横42%×縦41%)×2.5 ≒ 画面ぴったり ＝ FV は中列3枚（fv1 / fv3=主役 / fv2）が画面いっぱい。 */
@media (max-width: 1024px) {
  body.index-page .media-grid__tile { border-radius: calc(var(--border-radius-mid) * var(--tile-line, 0)); }
  /* 上部 3枚: 左に大きな縦長 ＋ 右に2枚 */
  body.index-page .media-grid__tile--p1 { left: 0%;  top: 0%;    width: 49%; height: 30%; }
  body.index-page .media-grid__tile--p2 { left: 49%; top: 0%;    width: 51%; height: 15%; }
  body.index-page .media-grid__tile--p3 { left: 49%; top: 15%;   width: 51%; height: 15%; }
  body.index-page .media-grid__tile--p4 { display: none; }
  /* 中央: 左列 2（FV では見えない枠 = fv1/fv5） */
  body.index-page .media-grid__tile--fv1 { left: 0%; top: 30%;   width: 29%; height: 20.5%; }
  body.index-page .media-grid__tile--fv5 { left: 0%; top: 50.5%; width: 29%; height: 20.5%; }
  /* 中央: 中列 3（FV で画面いっぱいになる主役列）。
     ※ PC の FV に見えるのは fv2 / fv3 / fv4 なので、SP も同じ3枚に揃える（1024以上に合わせる） */
  body.index-page .media-grid__tile--fv2 { left: 29%; top: 30%; width: 42%; height: 13%; }
  body.index-page .media-grid__tile--fv3 { left: 29%; top: 43%; width: 42%; height: 16%; }
  body.index-page .media-grid__tile--fv4 { left: 29%; top: 59%; width: 42%; height: 12%; }
  /* 中央: 右列 2 */
  body.index-page .media-grid__tile--p9  { left: 71%; top: 30%;   width: 29%; height: 20.5%; display: block; }
  body.index-page .media-grid__tile--p10 { left: 71%; top: 50.5%; width: 29%; height: 20.5%; display: block; }
  /* 下部 3枚: 左に2枚 ＋ 右に大きな縦長（p6=森） */
  body.index-page .media-grid__tile--p5 { left: 0%;  top: 71%;   width: 49%; height: 15%; display: block; }
  body.index-page .media-grid__tile--p7 { left: 0%;  top: 86%;   width: 49%; height: 14%; display: block; }
  body.index-page .media-grid__tile--p6 { left: 49%; top: 71%;   width: 51%; height: 29%; }
  body.index-page .media-grid__tile--p8 { display: none; }
}

/* 森全画面時に「スッと」かぶさる黒い半透明カバー（JS が autoAlpha 制御） */
body.index-page .media-grid__cover {
  position: absolute;
  inset: -2%;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
}

/* 森ズームアクション専用区間（透明スペーサー。スクロール距離が森ズーム＋黒カバーに使われる） */
/* lvh: dvh だと iOS のバー伸縮（上スクロール時）で全セクションが一斉にリフローし、
   コンテンツが跳ねて裏の黒レイヤーが一瞬露出 → Safari がステータスバー色として
   暗色をラッチする不具合の原因になる（デスクトップでは lvh=dvh で無影響） */
body.index-page .forest-act {
  height: 250lvh;
  background: transparent;
  pointer-events: none;
}

/* 導入アクト: hero テキスト / #about / BUSINESS は固定グリッドの上を透明で流れる */
body.index-page .top-act {
  position: relative;
  z-index: 1;
}
body.index-page .top-act .hero {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* FV のロゴの層: ピンの外なので viewport に真に固定される（中身は script.js の setupHeroLogo が足すロゴ） */
body.index-page .hero-flight {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}
/* #about の帯の語は exclusion をやめ、ソリッドの字に（.hero-word の既定は exclusion） */
body.index-page .about-eyebrow .hero-word,
body.index-page .about-eyebrow .hero-word::before,
body.index-page .about-eyebrow .hero-word::after {
  mix-blend-mode: normal;
}

/* ===== #about の帯「Create Value / & / Quality」の字（SVG） =====
   いただいた title.svg（2026-09-25）の字形パスをそのまま使う（script.js の HERO_SVG_WORDS）。
   色は #231815 の1色（銀のグラデーション・流れる光・斜めは 2026-09-25 に廃止）。
   2026-09-28：FV はロゴに決まり、字は帯だけ（FV の文字の飛行・横に流すマーキー・?fv=text の文字版は消した）。 */
body.index-page .about-eyebrow.fv-svg .hero-word::before,
body.index-page .about-eyebrow.fv-svg .hero-word::after { content: none; }
.hw-svg {
  --pan: 0;                  /* 1=未表示(下に隠れる) → 0=定位置（クリーンパンの進行。JS が 1→0） */
  display: block;
  height: 1.14em;            /* h1 / eyebrow の font-size に追従。大文字の高さ ≒ 0.79em（前の Jost 版に近い大きさ） */
  width: auto;
  overflow: visible;
  /* 登場: マスクの下からスッと上へスライド（クリーンパン）。--pan=0 で clip 全開＋定位置 */
  clip-path: inset(0 0 calc(var(--pan) * 100%) 0);
  transform: translateY(calc(var(--pan) * 0.32em));  /* いただいた字形は正体のまま（斜めにしない） */
}
/* ≤1024px: 一番長い「Create Value」が画面幅の 84% に収まる大きさ（FV・eyebrow とも 15vw の上） */
@media (max-width: 1024px) {
  .hw-svg { height: 1.05em; }
}
.hw-svg path { stroke-linejoin: round; stroke-linecap: round; }
/* 文字の色: #231815（いただいた title.svg の色）の1色。濃さは --rest-a（帯は下で 60%） */
.hw-svg .hw-rest {
  fill: rgb(35 24 21 / var(--rest-a, 1));
  stroke: none;
}
/* 帯（2026-09-28・C「O をくぐる」と一緒に入れた形。案のページで全案に共通にしたもの）:
   ・横に流さず、見出し・本文と同じ左の線にそろえて止める
   ・字は見出しの 0.56 倍・濃さ 60%（見出しより目立たせない。2026-09-25 のご指示）
   ・スクロールに合わせて一語ずつ下からせり上がる（--pan は script.js の renderDive が書く。1＝隠れている・0＝定位置）
   🔴 --pan 1 で、上のはみ出し分（.1em）まで切る。0.02em でも残すと、隠れているはずの字の頭が1列のぞく（案のページで実測） */
body.index-page .about-eyebrow.fv-svg {
  --rest-a: 0.6;
  gap: 0.3em;             /* 語の間＝いただいた形の語間（20単位）と同じ */
}
body.index-page .about-eyebrow.fv-svg .hw-svg {
  --pan: 1;
  clip-path: inset(-0.1em -0.1em calc(var(--pan) * (100% + 0.12em) - 0.02em) -0.1em);
}

/* ===== FV のロゴ（2026-09-28 ご決定：スクロールは C「ロゴに飛び込む」＝ROL の O の真ん中へまっすぐ進んでくぐり抜ける／2026-09-29 ご決定：重ね方は「すりガラス」） =====
   オープニングと同じロゴを FV の中央に置く（要素は script.js の setupHeroLogo が足す）。
   🔴 大きさはオープニングの canvas と同じ計算（script.js の startParticleOpening: Math.min(vw * 0.6, 420)・縦横比は C_LOGO_VIEWBOX）。
      ずれると、受け渡しの瞬間にロゴが動いて見える。
   2つの層で描く（どちらも script.js の setupHeroLogo が足す）：下が .hero-glass（すりガラス）、上が .hero-logo（字の塗りと縁の svg）。
   出すときの濃さは2つの両方に、ぼけは svg の中に、O をくぐる拡大は svg の transform とすりガラスの窓（renderDive）に書く。
   🔴 .hero-flight（2つの親）には opacity（1 未満）・filter・will-change・mix-blend-mode を付けない。
      付けると、そこが「すりガラスが透かす範囲の底」になり、後ろの写真が映らない（すりガラスが効かない）。
   h1（Create Value & Quality）は文書の見出しとして残し、画面には出さない。 */
body.index-page .hero-flight .hero-text { display: none; }
body.index-page .hero-flight .hero-logo {
  position: relative;       /* すりガラス（position 付き・先に置いた方）より上に重ねる */
  flex: none;
  height: min(60vw, 420px);
  aspect-ratio: 157.16 / 160.53;
}
body.index-page .hero-flight .hero-logo svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 59.18% 63.24%;   /* ROL の O の真ん中（script.js が O の穴の形から測った値で上書きする） */
  opacity: 0;               /* JS が出す（初回はオープニングから受け渡し／2回目以降はぼけ→合焦） */
  /* 🔴 will-change: transform は付けない。付けると最初の大きさで描いた絵を引き伸ばすので、O をくぐる数十倍の拡大で縁がぼける */
}
/* 字：白 60%＋内側の細い光の縁（縁の外側の半分は、svg の中の字の形の clipPath で切る） */
body.index-page .hero-flight .hero-logo path {
  fill: rgb(255 255 255 / 60%);
  stroke: rgb(255 255 255 / 95%);
  stroke-width: 0.75px;
  stroke-linejoin: round;
}
/* すりガラス（2026-09-29 ご決定。案のページの「ロゴの重ね方」の 6 番）：字の形の中だけ、後ろの写真をぼかして明るくする。
   窓の形はロゴの形（script.js が C_LOGO_PATH_D から作った SVG を --hero-logo-mask に置く）。
   層の位置と大きさ、窓の大きさと位置は script.js の placeHeroGlass が書く（拡大したロゴの箱と画面の重なり）。書くまでは大きさ 0。
   🔴 この層は transform で拡大しない。数十倍の層は GPU の上限を超えて描けず、画面全体が真っ白になる（2026-09-29 実測。setupHeroLogo の注記）。
      層は拡大しないので、ぼかしは 14px のままで画面の上のぼけ方が一定になる */
body.index-page .hero-flight .hero-glass {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;               /* JS が svg といっしょに出す */
  pointer-events: none;
  -webkit-backdrop-filter: blur(14px) brightness(1.9);
  backdrop-filter: blur(14px) brightness(1.9);
  -webkit-mask-image: var(--hero-logo-mask);
  mask-image: var(--hero-logo-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* O をくぐり抜けたら層ごと隠す。JS が付け外し */
body.index-page .hero-flight--logo.is-logo-out { visibility: hidden; }

body.index-page .top-act .hero-parallax-about,
body.index-page .top-act .oem {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* #about の帯（語は script.js が SVG にする）。
   字の大きさは見出し（h2 の --font-size-display）の 0.56 倍。帯と見出しは同じ入れ子の中なので、同じ基準の em で決まる。
   見出しとの間は案のページと同じ（パソコン 約21px・スマホ 約11px）。左は字の余白の分だけ出して、見出しの左の線にそろえる */
body.index-page .about-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  margin: 0 0 0.71em -0.028em;
  font-size: calc(var(--font-size-display) * 0.56);
  line-height: 1.3em;
  white-space: nowrap;
}
@media (max-width: 1024px) {
  body.index-page .about-eyebrow { margin-bottom: 0.6em; }
}
/* 字の外側を少し広めに切り抜く分（上の clip-path）が、語の箱（.hero-word の overflow: hidden）で切れないように */
body.index-page .about-eyebrow .hero-word {
  overflow: visible;
  white-space: nowrap;
}

/* NEWS もグリッドの上を流れる（前面・背景透明） */
body.index-page .links {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* SUSTAINABILITY: 背景 = 森全画面ズーム＋黒カバー（media-grid 側）なのでセクション自体は透明。
   可読性は media-grid__cover（黒 0.55）が担う（二重スクリムにしない） */
body.index-page .sustainability {
  position: relative;
  z-index: 1;
  background: transparent;
}
body.index-page .sustainability .container {
  position: relative;
  z-index: 1;
}

/* BRAND LIST: 2026-09-24 に BUSINESS の直後へ移した（ご指示）。
   BUSINESS・NEWS と同じく、背景はタイルフィールド（固定の media-grid）なので白地を外す。
   🔴 TOP だけ。.blandlist の本体（白地）は触らない（business/nb/index.php がボタンの部品を共用しているため） */
body.index-page .blandlist {
  background: transparent;
}

/* ===== Hero（5パネル・ベントグリッド） ===== */
.hero {
  position: relative;
  height: 100lvh; /* dvh はバー伸縮でリフローするため lvh（forest-act のコメント参照） */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /*background-color: #0a0a0a;*/
  background-color: #fff;
}

/* ※旧 .hero-media / .hero-bento 一式は削除（media-grid 方式へ全面移行済み・マークアップ/JSに参照なし） */

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  z-index: 2;
  opacity: 0;
}

/* 各単語のマスクアニメーション用スタイル（2026-09-28 から使うのは #about の帯の3語だけ。字は SVG・::before/::after は出さない） */
.hero-word {
  display: inline-block;
  position: relative;
  color: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: exclusion;
}

/* おしゃれな左から右へのフェードインアニメーション */
.hero-word::before {
  content: attr(data-word);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: var(--color-bg);
  mix-blend-mode: exclusion;
  opacity: 0;
  transform: translateX(-30px);
  filter: blur(2px);
  z-index: 2;
}

.hero-word::after {
  content: attr(data-word);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: var(--color-bg);
  mix-blend-mode: exclusion;
  opacity: 0.3;
  z-index: 1;
}

/* アニメーション中のスタイル */
.hero-word.animating {
  opacity: 1 !important;
  visibility: visible !important;
}

.hero-word.animating::before {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0px);
  transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ===== Heroパララックス（背景） ===== */
.hero-parallax {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-parallax::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-attachment: fixed;
  transform: var(--bg-transform, perspective(1000px) rotateY(0deg));
  transform-origin: var(--bg-transform-origin, top right);
  z-index: -1;
}

.hero-parallax>div {
  width: 100%;
  padding: var(--space-11);
}

.hero-parallax .hero-text {
  transform-origin: center center;
  position: relative;
  z-index: 2;
}

.hero-parallax h2.hero-text {
  font-size: var(--font-size-display);
  font-weight: 600;

  line-height: normal;
  margin: auto;
}

/* #about（ミッション）テキスト: 表示幅・見出しサイズ・padding は旧デザイン（.hero-parallax 既定 = font-size-display / >div padding: space-11）に準拠 */
.hero-parallax-about .hero-text,
.hero-parallax-about .hero-subtext,
.hero-parallax-about .hero-button {
  transform-origin: center center;
}
/* 見出しは「価値を創る。」「品質を造る。」の句ごとに、マスクの下からスッと上へ（0.5秒・2句目は 0.18秒あと）。本文は濃さだけ（0.8秒・見出しの 0.3秒後）。
   出すのは #about の is-head-in（script.js の renderDive が、帯の少しあと・見出しが画面の上から 72% に来たら付け、上へ戻ると外す）。
   句は inline-block＝スマホでも「…品質を造／る。」のように語の途中で割れない。
   🔴 隠れている間は、上のはみ出し分（.12em）まで切る（字の頭がのぞかない） */
body.index-page .hero-parallax-about h2.hero-text .ph {
  display: inline-block;
  clip-path: inset(-0.12em -0.12em calc(100% + 0.12em) -0.12em);
  transform: translateY(0.32em);
  transition: clip-path 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
body.index-page .hero-parallax-about.is-head-in h2.hero-text .ph {
  clip-path: inset(-0.12em -0.12em -0.12em -0.12em);
  transform: none;
}
body.index-page .hero-parallax-about.is-head-in h2.hero-text .ph + .ph { transition-delay: 0.18s; }
body.index-page .hero-parallax-about .hero-subtext {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
body.index-page .hero-parallax-about.is-head-in .hero-subtext {
  opacity: 1;
  transition-delay: 0.3s;
}

.hero-parallax h2.hero-subtext {
  font-size: var(--font-size-sm);

  margin-top: 20px;
  opacity: 0;
  transform: translateY(20px);
}


.hero-parallax .hero-subtext {
  font-size: var(--font-size-sm);
  padding-top: 2em;
  position: relative;
  z-index: 2;
}

/* ===== レイアウト・グリッド ===== */

/* ===== OEM ===== */
/* OEMセクション（中身パララックス対応） */
.oem {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /*height: 100dvh;*/
}

/* ===== 背景パララックス共通 =====
   縦方向のスクロール連動は --parallax-bg-pos-y（GSAP）。本体背景がある要素にも、*-bg::before にも同じ変数が効く。 */
.parallax-bg {
  --parallax-bg-pos-y: 0%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: var(--parallax-bg-pos-y);
  background-attachment: fixed;
  overflow: hidden;
  position: relative;
}

.parallax-bg>.container {
  position: relative;
  z-index: 1;
}

/* タッチ環境: fixed 背景が不安定なため scroll */
@media (max-width: 1024px) and (hover: none),
(hover: none) and (pointer: coarse) {

  .hero-parallax::before,
  .parallax-bg,
  .parallax-bg::before {
    background-attachment: scroll;
  }
}

/* ===== #about（ミッション）: i-ne 風 =====
   旧オーラ・光の輪・背景画像レイヤーは撤去。
   背景は透明（白ベース）。 */
.hero-parallax-about {
  /*height: 100dvh;*/
  position: relative;
  overflow: hidden;
  background: transparent;
}

/* 旧演出の残骸レイヤーは無効化（HTML に残っていても表示されない） */
.hero-parallax-about .white-overlay,
.hero-parallax-about .hero-overlay {
  display: none;
}

/* #about の上の余白（TOP）: 画面の高さの 18%（≤1024px は 22%）。
   前の 34vh／38vh は、FV から飛んでくる文字を画面の中ほどに着地させるための余白だった。
   2026-09-28 から文字は飛ばない（FV はロゴ・O をくぐる）ので、白いページになってすぐ帯と見出しが来るよう詰めた（案のページと同じ）。
   ≤1024px は `.hero-parallax>div{padding:0 5rem}` の上0を上書き（左右0 5remは維持）。 */
@media (min-width: 1025px) {
  body.index-page .hero-parallax-about > div {
    padding-top: 18vh;
  }
}
@media (max-width: 1024px) {
  body.index-page .hero-parallax-about > div {
    padding-top: 22vh;
  }
}


.sustainability {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100lvh; /* dvh はバー伸縮でリフローするため lvh（forest-act のコメント参照） */
}

.blandlist {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg);
}

.oem .container {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10%;
  align-items: center;
  margin: auto;
  padding: var(--space-11);
}

.oem-text {
  flex: 1;
}

.oem-text .oem-label {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-oswald);
  letter-spacing: var(--letter-spacing-tertiary);
  line-height: var(--line-height-primary);
  font-weight: 500;
  text-transform: uppercase;
  padding-top: 0;
  margin-bottom: 1rem;
}

.oem-text h2 {
  font-size: var(--font-size-title);
  font-weight: 600;
  line-height: 1.6;
}

.oem-text p {
  font-size: var(--font-size-sm);
  padding-top: 3.4rem;
}

.oem-button {
  margin-top: 2.5em;
  text-align: left;
  position: relative;
}

.oem-cta-button {
  transform: none;
  width: fit-content;
  height: 3.4em;
  border: 1px solid var(--color-primary, #333);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  z-index: 1;
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-primary, #333);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2px);
  opacity: 1;
  visibility: visible;
  padding: 0 2em;
  gap: 0.5em;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.oem-cta-button:hover {
  background: var(--brand-gradient);
  color: var(--color-bg, #fff);
  transition: all 0.3s ease;
}

.oem-cta-button .button-text {
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-primary, #333);
  margin-right: 1rem;
  display: inline-block;
}

.oem-cta-button .arrow {
  border-width: 0.4em 0 0.4em 0.6em;
  border-color: transparent transparent transparent var(--color-primary, #333);
  border-style: solid;
}

.oem-cta-button:hover .button-text {
  color: var(--color-bg, #fff);
}

.oem-cta-button:hover .arrow {
  border-left-color: var(--color-bg, #fff);
}

.oem-cta-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 1;
}

.oem-cta-button:hover::after {
  left: 100%;
}

.sustainability .container {
  display: flex;
  gap: 10%;
  align-items: center;
  margin: auto;
  padding: var(--space-11);
}

.sustainability-text {
  flex: 1;
}

.sustainability-text .sustainability-label {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-oswald);
  letter-spacing: var(--letter-spacing-tertiary);
  line-height: var(--line-height-primary);
  font-weight: 500;
  text-transform: uppercase;
  padding-top: 0;
  margin-bottom: 1rem;
  color: #fff;
}

.sustainability-text h2 {
  font-size: var(--font-size-title);
  font-weight: 600;
  line-height: 1.6;
  color: #fff;
}

.sustainability-text p {
  font-size: var(--font-size-sm);
  padding-top: 3.4rem;
  color: #fff;
}

.sustainability-button {
  margin-top: 2.5em;
  text-align: left;
  position: relative;
}

.sustainability-cta-button {
  transform: none;
  width: fit-content;
  height: 3.4em;
  border: 1px solid var(--color-bg);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  z-index: 1;
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-bg);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2px);
  opacity: 1;
  visibility: visible;
  padding: 0 2em;
  gap: 0.5em;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.sustainability-cta-button:hover {
  background: var(--brand-gradient);
  background-origin: border-box;
  border-color: transparent;
  transition: all 0.3s ease;
}

.sustainability-cta-button .button-text {
  font-weight: 500;
  white-space: nowrap;
  margin-right: 1rem;
  display: inline-block;
}

.sustainability-cta-button .arrow {
  border-width: 0.4em 0 0.4em 0.6em;
  border-color: transparent transparent transparent var(--color-bg);
  border-style: solid;
}

.sustainability-cta-button:hover .button-text {
}

.sustainability-cta-button:hover .arrow {
}

.sustainability-cta-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 1;
}

.sustainability-cta-button:hover::after {
  left: 100%;
}

.sustainability-image {
  flex: .8;
}

.sustainability-image img {
  border-radius: 16px;
  box-shadow: .75em .75em 1.5em rgba(0, 0, 0, 0.1);
}

/* ===== 会社情報セクション ===== */
.company {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg);
}

.company .container {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10%;
  align-items: center;
  margin: auto;
  padding: var(--space-22) var(--space-11) var(--space-11);
}

.company-text {
  flex: 1;
}

.company-text .company-label {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-oswald);
  letter-spacing: var(--letter-spacing-tertiary);
  line-height: var(--line-height-primary);
  font-weight: 500;
  text-transform: uppercase;
  padding-top: 0;
  margin-bottom: 1rem;
  color: #000;
}

.company-text h2 {
  font-size: var(--font-size-title);
  font-weight: 600;
  line-height: 1.6;
  color: #000;
}

.company-text p {
  font-size: var(--font-size-sm);
  padding-top: 3.4rem;
  color: #000;
}

.company-button {
  margin-top: 2.5em;
  text-align: left;
  position: relative;
}

.company-cta-button {
  transform: none;
  width: fit-content;
  height: 3.4em;
  border: 1px solid var(--color-primary, #333);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  z-index: 1;
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-primary, #333);
  background: transparent;
  opacity: 1;
  visibility: visible;
  padding: 0 2em;
  gap: 0.5em;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.company-cta-button:hover {
  background: var(--brand-gradient);
  border-color: var(--color-primary, #333);
  color: #fff;
  transition: all 0.3s ease;
}

.company-cta-button .button-text {
  font-weight: 500;
  white-space: nowrap;
  margin-right: 1rem;
  display: inline-block;
}

.company-cta-button:hover .button-text {
  color: #fff;
}

.company-cta-button .arrow {
  border-width: 0.4em 0 0.4em 0.6em;
  border-color: transparent transparent transparent var(--color-primary, #333);
  border-style: solid;
}

.company-cta-button:hover .arrow {
  border-left-color: #fff;
}

.company-cta-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 1;
}

.company-cta-button:hover::after {
  left: 100%;
}

.company-image {
  flex: .8;
}

.company-image img {
  border-radius: 16px;
  box-shadow: .75em .75em 1.5em rgba(0, 0, 0, 0.1);
}

/* ★ 2026-08-28 追加：背面の固定グリッドより必ず前に出す

   【何が起きていたか】
     TOP には .media-grid（position: fixed / z-index: 0）が画面全体に敷かれており、
     その中の .media-grid__cover は【黒 55%】の膜になっている。
     普段は JS が .media-grid を visibility: hidden にして隠している。

     ところが ScrollTrigger が測り直し（refresh）を行うと、
     ・固定していた採用セクションが一瞬もとの位置へ戻り（pin の巻き戻し）
     ・内部でスクロール位置が先頭へ戻って復帰する
     という動きが入る。この一瞬に画面が描かれると、
     【黒い膜が全画面に見えて、画面が下にずれたように感じる】。
     （同じ「refresh 中の pin 巻き戻し」は、このファイル内の別の箇所でも既知の不具合として
       コメントに残っている）

   【なぜこの3つだけ起きるか】
     .oem / .links / .sustainability は body.index-page .top-act 配下などで
     すでに z-index: 1 が付いており、黒い膜より前に出ることが保証されている。
     森アクトより後ろの .blandlist / .company / .recruit は .top-act の外にあるため、
     この指定が漏れて z-index: auto のままだった（実測で確認）。
     ※ .blandlist は 2026-09-24 に BUSINESS の直後（森アクトより前）へ移した。
       z-index: 1 は残しても害はないのでそのまま。

   ⚠️ .hero-flight は z-index: 2 なので、この 1 を付けても前後関係は変わらない。 */
.blandlist,
.company,
.recruit {
  z-index: 1;
}

/* ===== 採用情報セクション ===== */
.recruit {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100lvh; /* dvh はバー伸縮でリフローするため lvh（forest-act のコメント参照） */
  background-color: var(--color-bg);
}

.recruit .container {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10%;
  align-items: center;
  margin: auto;
  padding: 0;
  padding: var(--space-11);
}

.recruit-text {
  flex: 1;
}

.recruit-text .recruit-label {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-oswald);
  letter-spacing: var(--letter-spacing-tertiary);
  line-height: var(--line-height-primary);
  font-weight: 500;
  text-transform: uppercase;
  padding-top: 0;
  margin-bottom: 1rem;
  color: #000;
}

.recruit-text h2 {
  font-size: var(--font-size-title);
  font-weight: 600;
  line-height: 1.6;
  color: #000;
}

.recruit-text p {
  font-size: var(--font-size-sm);
  padding-top: 3.4rem;
  color: #000;
}

.recruit-button {
  margin-top: 2.5em;
  text-align: left;
  position: relative;
}

.recruit-cta-button {
  transform: none;
  width: fit-content;
  height: 3.4em;
  border: 1px solid var(--color-primary, #333);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  z-index: 1;
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-primary, #333);
  background: transparent;
  opacity: 1;
  visibility: visible;
  padding: 0 2em;
  gap: 0.5em;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.recruit-cta-button:hover {
  background: var(--brand-gradient);
  border-color: var(--color-primary, #333);
  color: #fff;
  transition: all 0.3s ease;
}

.recruit-cta-button .button-text {
  font-weight: 500;
  white-space: nowrap;
  margin-right: 1rem;
  display: inline-block;
}

.recruit-cta-button:hover .button-text {
  color: #fff;
}

.recruit-cta-button .arrow {
  border-width: 0.4em 0 0.4em 0.6em;
  border-color: transparent transparent transparent var(--color-primary, #333);
  border-style: solid;
}

.recruit-cta-button:hover .arrow {
  border-left-color: #fff;
}

.recruit-cta-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 1;
}

.recruit-cta-button:hover::after {
  left: 100%;
}

.recruit-image {
  flex: .8;
}

.recruit-image img {
  border-radius: 16px;
  box-shadow: .75em .75em 1.5em rgba(0, 0, 0, 0.1);
}

/* ===== TOP RECRUIT: 顔写真コラージュ（登場アクションは JS） ===== */
body.index-page .recruit-collage {
  position: relative;
  display: grid;
  /* デスクトップ: 9枚 = 3×3 */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  /*gap: 8px;*/
  /* company 画像（company.jpg 769×741）と同じ縦横バランスに合わせる */
  aspect-ratio: 769 / 741;
  /* 奥行き 3D 集合アクション用 */
  perspective: 1100px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}
body.index-page .recruit-collage__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  /*border-radius: 14px;*/
  box-shadow: .5em .5em 1.2em rgba(0, 0, 0, 0.12);
  transform-origin: center center;
  /* 3Dリング回転で奥側では裏面を見せる（billboard ではない） */
  backface-visibility: visible;
  /* 集合アクションは JS が transform を直接駆動（scrub）。初期は JS が設定 */
  will-change: transform, opacity;
}
/* 外周の4角の角丸（14px）は JS（script.js の採用のコラージュ・CORNER_R）が、
   その角のパネルの着地に合わせて書く（2026-09-30）。
   ここで .is-assembled に付けたり transition を足したりしない（書き手が2つになり、着地より遅れる） */
body.index-page .recruit-collage__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  box-shadow: none;
}
/* グリッド定位置は 4×3 均等（auto-flow）。transform は JS が列車モデルで駆動 */

/* モバイル（≤1024px）: 6枚（3×2）に間引き */
@media (max-width: 1024px) {
  body.index-page .recruit-collage {
    /* minmax(0,1fr) 必須: 回転中に JS が figure へ width:232px 等を与えても
       列がコンテンツ幅に引きずられて膨張しない（1fr の最小値は auto＝232px になるため）。
       これが 1fr のままだとグリッドが 714px に爆発し回転座標が全部ズレる */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    aspect-ratio: 769 / 741;
    gap: 6px;
  }
  body.index-page .recruit-collage__item--7,
  body.index-page .recruit-collage__item--8,
  body.index-page .recruit-collage__item--9 { display: none; }
  /* 3×2 の外周4角（1・3・4・6）の角丸も JS が並びから決めて書く */
  /* 5 番（ロビーのロゴの壁）は縦長のマスだと左右が切れ、文字の左端（M・X）が欠けるので写真を左へ寄せる（2026-09-30） */
  body.index-page .recruit-collage__item--5 img { object-position: 30% 50%; }
  /* 回転中の横長化は JS が figure の width/height を直接 morph（v7.18）。
     img はみ出し方式（overflow:visible）は昇格レイヤーで効かないため撤去。 */
}

.blandlist .container {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10%;
  align-items: center;
  margin: auto;
  padding: var(--space-11);
}

.blandlist-text {
  flex: 1;
}

.blandlist-text .blandlist-label {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-oswald);
  letter-spacing: var(--letter-spacing-tertiary);
  line-height: var(--line-height-primary);
  font-weight: 500;
  text-transform: uppercase;
  padding-top: 0;
  margin-bottom: 1rem;
  color: #000;
}

.blandlist-text h2 {
  font-size: var(--font-size-title);
  font-weight: 600;
  line-height: 1.6;
  color: #000;
}

.blandlist-text p:not(.blandlist-label) {
  font-size: var(--font-size-sm);
  padding-top: 3.4rem;
  color: #000;
}

.blandlist-button {
  margin-top: 2.5em;
  text-align: left;
  position: relative;
}

.blandlist-cta-button {
  transform: none;
  width: fit-content;
  height: 3.4em;
  border: 1px solid var(--color-primary, #333);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  z-index: 1;
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-primary, #333);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2px);
  opacity: 1;
  visibility: visible;
  padding: 0 2em;
  gap: 0.5em;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.blandlist-cta-button:hover {
  background: var(--brand-gradient);
  color: var(--color-bg, #fff);
  transition: all 0.3s ease;
}

.blandlist-cta-button .button-text {
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-primary, #333);
  margin-right: 1rem;
  display: inline-block;
}

.blandlist-cta-button .arrow {
  border-width: 0.4em 0 0.4em 0.6em;
  border-color: transparent transparent transparent var(--color-primary, #333);
  border-style: solid;
}

.blandlist-cta-button:hover .button-text {
  color: var(--color-bg, #fff);
}

.blandlist-cta-button:hover .arrow {
  border-left-color: var(--color-bg, #fff);
}

.blandlist-cta-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 1;
}

.blandlist-cta-button:hover::after {
  left: 100%;
}

.blandlist-image {
  flex: .8;
}

.blandlist-image img {
  border-radius: 16px;
}

/* ===== Hero CTA Button ===== */
.hero-button {
  margin-top: 2.5em;
  text-align: left;
  position: relative;
  z-index: 2;
}

.hero-cta-button {
  transform: none;
  width: fit-content;
  height: 3.4em;
  border: 1px solid var(--color-primary, #333);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  z-index: 1;
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-primary, #333);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2px);
  opacity: 1;
  visibility: visible;
  padding: 0 2em;
  gap: 0.5em;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.hero-cta-button:hover {
  background: var(--brand-gradient);
  color: var(--color-bg, #fff);
  transition: all 0.3s ease;
}

.hero-cta-button .button-text {
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-primary, #333);
  margin-right: 1rem;
  display: inline-block;
}

.hero-cta-button .arrow {
  border-width: 0.4em 0 0.4em 0.6em;
  border-color: transparent transparent transparent var(--color-primary, #333);
  border-style: solid;
}

.hero-cta-button:hover .button-text {
  color: var(--color-bg, #fff);
}

.hero-cta-button:hover .arrow {
  border-left-color: var(--color-bg, #fff);
}

.hero-cta-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 1;
}

.hero-cta-button:hover::after {
  left: 100%;
}

.oem-image {
  flex: .8;
}

.oem-image img {
  border-radius: 16px;
  box-shadow: .75em .75em 1.5em rgba(0, 0, 0, 0.1);
}

/* ※旧TOPの .pillars / .pillar / .categories 系は削除（現行マークアップ/JSに参照なし） */

/* .category の基本は先頭で定義済み。以下は .category の詳細スタイル */

.category .search-box {
  display: block;
  align-items: unset;
  width: 100%;
  position: relative;
  gap: unset;
}

.category .search-box form {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  gap: 1rem;
}

/* ※旧TOPの .achievements / .countup / .crown-item 系は削除（現行マークアップ/JSに参照なし） */

/* ===== 下部リンク ===== */
.links {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--space-11);
  margin: auto;
  flex-wrap: wrap;
  overflow-x: hidden;
}

.other-page .links {
  padding: var(--padding-block-xlwm);
  margin-bottom: var(--space-11);
}

/* CSR トップは旧 .csr-top-content-wrapper の左右余白を継承 */
.csr-page .links {
  padding: var(--padding-block-xl-top);
  margin-bottom: 0;
}


.links .news-label {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-oswald);
  letter-spacing: var(--letter-spacing-tertiary);
  line-height: var(--line-height-primary);
  font-weight: 500;
  text-transform: uppercase;
  padding-top: 0;
  margin-bottom: 1rem;
}

.links h2 {
  font-size: var(--font-size-title);
  font-weight: 600;
  line-height: 1.6;
  text-align: left;
  margin-bottom: 3.4rem;
}

.links .link-boxes {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  flex-wrap: wrap;
}


/* ==========================================================================
   お問い合わせCTA（business/nb・oem・overseas の #contact-cta）

   ★ 2026-08-27 追加。

   【なぜ必要か】
     .links はもともと【ニュース一覧】用の型で、
       ・見出しは左寄せ（.links h2 の text-align: left）
       ・見出しの下に 3.4rem の余白（下にグリッドが来る前提）
       ・ボタンはグリッドの下に 9em 空けて置く（.links .news-button の margin-top）
     という作りになっている。
     これを「見出し＋一文＋ボタン」だけの短いCTAに流用しているため、
     実測でこうなっていた（1280px 幅）:
       見出しの中心 640px ／ 本文の中心 640px ／ ボタンの中心 115px → ばらつき 525px
       見出しからボタンまで 133px も空く
       本文の文字が 9.4px（同じページの他の段落は 13.1px）
       本文の幅が 1280px（他の段落は 768px）＝ 画面端まで伸びて読みにくい

   【直し方】
     CTA用に「中央揃えの一枚もの」として整える。
     文字サイズ・行間・幅は、同じページの本文（.csr-section-content p / .csr-section）に合わせた。

   ⚠️ #contact-cta に限定している。TOP と CSR の .links#news には影響しない。
   ⚠️ 以前は HTML 側に style="text-align:center;" を直接書いて中央寄せしていたが、
     見た目の指定はこのファイルに集約した（3ファイルから削除ずみ）。
   ========================================================================== */
.links#contact-cta {
  width: 82rem;              /* 同じページの本文カラム（.csr-section）と同じ幅 */
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.links#contact-cta h2 {
  text-align: center;        /* .links h2 の左寄せを打ち消す */
  margin-bottom: var(--space-2_5);
}

.links#contact-cta > p {
  /* 同じページの他の段落（.csr-section-content p）と同じ見た目に揃える */
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-primary);
  max-width: 64rem;          /* 1行が長くなりすぎないように */
  margin: 0 auto;
}

.links#contact-cta .news-button {
  margin-top: var(--space-4);  /* 9em → 4rem。1行のCTAに9emは広すぎる */
  text-align: center;          /* ボタンは inline-flex なので、これで中央に来る */
}


/* 最後のスライドの余白設定 */
.swiper-slide.last-slide {
  margin-right: 11rem !important;
}

/* Swiperのデフォルト矢印を非表示 */
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  display: none !important;
}

/* Swiperボタンの位置を強制的に設定 */
.swiper-button-prev,
.swiper-button-next {
  position: absolute !important;
  width: auto !important;
  height: 2.8em !important;
  border-radius: 1.4em !important;
  background: transparent !important;
  border: 1px solid var(--color-primary, #333) !important;
  cursor: pointer !important;
  z-index: 200 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1em !important;
  color: var(--color-primary, #333) !important;
  opacity: 1 !important;
  visibility: visible !important;
  padding: 0 1em !important;
  gap: 0.5em !important;
  overflow: hidden !important;
}

/* Swiperボタンのhoverエフェクト */
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: var(--brand-gradient) !important;
  /* background ショートハンドは background-origin を初期化するので必ず後に指定。
     既定の padding-box のままだと border 1px 分にグラデの繰り返しが描かれ
     「下端だけ濃い線」に見えてしまう */
  background-origin: border-box !important;
  /* グラデ塗りのときオレンジ枠は対比が強すぎるので色だけ消す（border幅は残るので外形は不変） */
  border-color: transparent !important;
  color: var(--color-bg, #fff) !important;
  transform: scale(1.1) !important;
  transition: all 0.3s ease !important;
}

/* ホバー時のボタンのテキスト色 */
.swiper-button-prev:hover .button-text,
.swiper-button-next:hover .button-text {
  color: var(--color-bg, #fff) !important;
}

/* ホバー時の矢印の色 */
.swiper-button-prev:hover .arrow {
  border-right-color: var(--color-bg, #fff) !important;
}

.swiper-button-next:hover .arrow {
  border-left-color: var(--color-bg, #fff) !important;
}

.swiper-button-prev::before,
.swiper-button-next::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 1;
  border-radius: 1.4em;
}

.swiper-button-prev:hover::before,
.swiper-button-next:hover::before {
  left: 100%;
}


/* Swiperボタンのデフォルトスタイル（初期状態は無効として扱う） */
.swiper-button-prev,
.swiper-button-next {
  background: transparent !important;
  color: var(--color-primary, #333) !important;
  opacity: 0.85 !important;
  cursor: not-allowed !important;
}

/* ボタンのテキストと矢印の色を確実に設定 */
.swiper-button-prev .button-text,
.swiper-button-next .button-text {
  color: var(--color-primary, #333) !important;
  font-family: var(--font-family-oswald);
  letter-spacing: var(--letter-spacing-primary);
  font-weight: 500;
}

/* ★ 2026-08-28 追加：スライドが少なくて動かせないときは、ボタンごと隠す

   Swiper は「スクロールする必要がない」と判断すると、ボタンに
   swiper-button-lock というクラスを付けて隠そうとする（実測: isLocked=true）。
   ところが上の .swiper-button-prev / .swiper-button-next のルールが
   display: flex !important / visibility: visible !important を当てているため、
   その非表示が打ち消され、【押せないボタンが出たまま】になっていた。

   実際に起きていた例: /csr/ の「関連ニュース」は記事が1件しかなく、
   BACK も NEXT も押せないのに両方表示されていた（ローカル・テストサーバーとも）。

   ⚠️ 記事が増えて動かせるようになれば、このクラスは付かないので自動的に元に戻る。
   ⚠️ swiper-button-disabled（端まで来ただけ）とは別物。そちらは今までどおり表示する。 */
.swiper-button-prev.swiper-button-lock,
.swiper-button-next.swiper-button-lock {
  display: none !important;
}

/* 無効な状態（押せない時）のスタイル */
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  background: var(--brand-gradient) !important;
  /* 同上（ショートハンドの後に指定・枠は色だけ消す） */
  background-origin: border-box !important;
  border-color: transparent !important;
  color: var(--color-bg, #fff) !important;
  opacity: 0.85 !important;
  cursor: not-allowed !important;
}

/* 無効状態のボタンのテキスト色 */
.swiper-button-prev.swiper-button-disabled .button-text,
.swiper-button-next.swiper-button-disabled .button-text {
  color: var(--color-bg, #fff) !important;
}

/* 無効状態の矢印の色を白に設定 */
.swiper-button-prev.swiper-button-disabled div,
.swiper-button-next.swiper-button-disabled div {
  border-right-color: var(--color-bg, #fff) !important;
  border-bottom-color: var(--color-bg, #fff) !important;
  opacity: 0;
  visibility: hidden;
}

/* ニュースセクション内のボタンスタイル */
.links .news-button {
  margin-top: 9em;
  text-align: left;
  position: relative;
}

/* 🔴 ボタンはグリッドの下に 9em 空ける（サイト共通の決まり。上の設計コメント参照）。
   .links の中のボタンには上のルールが当たるが、.company-menu の中に置いたボタン
   （/business/nb/ の「すべてのブランドを見る」）には当たらず、実測で余白 0px だった。
   数値は新しく決めず、.links .news-button と同じ値を使う。 */
.company-menu .news-button {
  margin-top: 9em;
}

.links .news-cta-button {
  transform: none;
  width: fit-content;
  height: 3.4em;
  border: 1px solid var(--color-primary, #333);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  z-index: 1;
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-primary, #333);
  background: transparent;
  opacity: 1;
  visibility: visible;
  padding: 0 2em;
  gap: 0.5em;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  margin-left: auto;
}

.links .news-cta-button:hover {
  background: var(--brand-gradient);
  border-color: var(--color-primary, #333);
  color: var(--color-bg, #fff);
  transition: all 0.3s ease;
}

.links .news-cta-button .button-text {
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-primary, #333);
  margin-right: 1rem;
  display: inline-block;
  transition: color 0.3s ease;
}

.links .news-cta-button:hover .button-text {
  color: var(--color-bg, #fff);
}

.links .news-cta-button .arrow {
  border-width: 0.4em 0 0.4em 0.6em;
  border-color: transparent transparent transparent var(--color-primary, #333);
  border-style: solid;
  transition: border-color 0.3s ease;
}

.links .news-cta-button:hover .arrow {
  border-left-color: var(--color-bg, #fff);
}

.links .news-cta-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 1;
}

.links .news-cta-button:hover::after {
  left: 100%;
}

/* Swiperボタンのテキストと矢印のスタイル */
.swiper-button-prev .button-text,
.swiper-button-next .button-text {}

.swiper-button-prev .arrow,
.swiper-button-next .arrow {
  width: 0;
  height: 0;
  border-style: solid;
}

/* 前へボタンの矢印（左向き） */
.swiper-button-prev .arrow {
  border-width: 0.4em 0.6em 0.4em 0;
  border-color: transparent var(--color-primary, #333) transparent transparent;
}

/* 次へボタンの矢印（右向き） */
.swiper-button-next .arrow {
  border-width: 0.4em 0 0.4em 0.6em;
  border-color: transparent transparent transparent var(--color-primary, #333);
}

/* ホバー時の矢印の色 */
.swiper-button-prev:hover .arrow {
  border-right-color: var(--color-bg, #fff);
}

.swiper-button-next:hover .arrow {
  border-left-color: var(--color-bg, #fff);
}

/* 無効状態の矢印の色 */
.swiper-button-prev.swiper-button-disabled .arrow {
  border-right-color: var(--color-bg, #fff);
}

.swiper-button-next.swiper-button-disabled .arrow {
  border-left-color: var(--color-bg, #fff);
}

/* ===== パンくずリスト（共通・:root変数使用） ===== */
.breadcrumb {
  background: transparent;
  padding: 0;
  position: relative;
  z-index: 3;
}

.breadcrumb .container {
  padding: 0;
}

.breadcrumb-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-3) 0;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-text);

  font-weight: 400;
}

.breadcrumb-list li {
  display: flex;
  align-items: center;
}

.breadcrumb-list li:not(:last-child)::after {
  content: '>';
  margin: 0 var(--breadcrumb-gap);
  color: var(--color-text-light);
}

.breadcrumb-list a {
  text-decoration: none;

  transition: color var(--transition-fast);
}

.breadcrumb-list a:hover {
  color: var(--color-text-light);
}

.breadcrumb-list span {
  font-weight: 500;

}

.home-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  position: relative;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  overflow: visible;
  border-radius: 8px;
  padding: 0.2em;
}

.home-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.home-icon:hover {
  transform: scale(1.12);
}

.home-icon:hover img {
}

/* ===== COMPANYページ専用スタイル ===== */
/* パンくず・ヒーローは共通 .page-header + .breadcrumb-list に統一済み */

/* ページヒーロー（後方互換：.page-hero を使用するページ用） */
.page-hero {
  position: relative;
  padding: 6rem 11rem;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.page-hero .container {
  position: relative;
  z-index: 2;
  padding: 0;
}

.page-title {
  font-size: var(--font-size-display-lg);
  font-weight: 700;
  font-family: var(--font-family-heading);
  letter-spacing: 0.02em;
  margin: 0;
  line-height: 1.1;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.page-title::after {
  content: '';
  position: absolute;
  bottom: -1.5rem;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  width: 120px;
  height: 4px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  animation: scaleIn 1s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* セクションタイトル */
.section-title {
  font-size: var(--font-size-lead-lg);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: normal;
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 2rem;
}

/* ご挨拶セクション */
.company-greeting {
  position: relative;
  overflow: hidden;
}

.company-greeting-bg {
  background-image: none;
  background-color: transparent;
  background-blend-mode: normal;
}

.company-greeting-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../images/company-bg.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: var(--parallax-bg-pos-y, 0%);
  background-attachment: fixed;
  background-color: rgba(255, 255, 255, 0.95);
  background-blend-mode: lighten;
  pointer-events: none;
}

.company-greeting .container {
  display: flex;
  gap: 10%;
  align-items: center;
  margin: auto;
  padding: var(--space-11);
}

.greeting-wrapper {
  display: flex;
  gap: 10%;
  align-items: center;
  width: 100%;
}

.greeting-image {
  flex: 0.8;
}

.greeting-image img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.greeting-image:hover img {
  transform: scale(1.02);
}

.greeting-content {
  flex: 1;
}

.greeting-subtitle {
  font-size: 2.4em;
  font-weight: 700;
  font-family: var(--font-family-heading);
  margin-bottom: 3rem;

  letter-spacing: 0.02em;
  line-height: 1.3;
  position: relative;
}

.greeting-subtitle::before {
  content: '';
  position: absolute;
  top: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--brand-gradient);
  background-origin: border-box;
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.greeting-subtitle.visible::before {
  opacity: 1;
}

.greeting-text {
  font-size: 1.15em;
  line-height: 2;
  color: var(--color-text-light);
  font-weight: 400;
}

.greeting-text p {
  margin-bottom: 2rem;
  text-align: justify;
  text-justify: inter-ideograph;
}

.greeting-text p:last-child {
  margin-bottom: 0;
}

/* 会社案内メニュー */
.company-menu .container {
  padding: var(--padding-block-xl);
}

/* 事業内容TOP：ヒーロー直下のリード */
.business-page-intro .container {
  padding: var(--padding-block-xl-third);
}

.business-page-intro__inner {}

.business-page-intro__title {
  margin: 0 0 var(--space-5);
  font-size: var(--font-size-title);
  font-weight: 600;
  line-height: 1.55;
  color: var(--color-text, #333);
}

.business-page-intro__body {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  color: var(--color-text-light, #444);
}

.business-page-intro__body p {
  margin: 0 0 var(--space-3);
}

.business-page-intro__body p:last-child {
  margin-bottom: 0;
}

/* ===== PRODUCTSページ専用スタイル ===== */
/* パンくず・ヒーローは共通 .page-header + .breadcrumb-list に統一済み */

/* ブランドリストセクション */
.products-list {
}

.products-list .container {
  padding: var(--padding-block-xl);
}

.products-intro {
  width: 100%;
}

/* ブランド検索・フィルター（news と同じ見た目） */
.products-list .products-filter {
  padding-right: 0;
  padding-left: 0;
}

.products-list .products-filter .search-box {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.products-list .products-filter .search-box input {
  flex: 1;
  padding: 0.8rem 1.2rem;
  border-bottom: 1px solid var(--color-text);
  font-size: var(--font-size-text);
  margin-right: 1.75%;
  outline: none;
  transition: border-color 0.3s ease;
}

.products-list .products-filter .filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.products-text {
  font-size: var(--font-size-sm);
  line-height: 2;
  color: var(--color-text-light);
  font-weight: 400;
}

.brand-grid {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  flex-wrap: wrap;
  gap: var(--space-2_8);
  padding: 8.9rem 0;
}

.brand-item {
  width: calc((100% - var(--space-2_8) * 3) / 4);
  margin-bottom: 1rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  background: #fff;
  position: relative;
}

.brand-item:nth-child(4n) {
  margin-right: 0;
}

.brand-item a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.brand-image {
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
}

.brand-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-item:hover .brand-image img {
  transform: scale(1.1);
}

.brand-info {
  padding: 1.25rem 1.5rem 3rem;
}

.brand-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-family: var(--font-family-heading);
  line-height: normal;
  text-align: left;
  transition: color 0.3s ease;
}

.brand-name-jp {
  font-size: var(--font-size-mi);
  line-height: normal;
  color: var(--color-text-light);
  margin: 0;
  font-weight: 400;
}

.brand-item:hover .brand-name {
  color: var(--color-primary);
}

.brand-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 1;
}

.brand-item:hover::after {
  left: 100%;
}

.company-menu .link-boxes,
.company-menu .link-boxes-row--2col,
.company-menu .link-boxes-row--3col {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  flex-wrap: wrap;
  gap: 5rem;
}

.company-menu .link-boxes-row--2col .link-box {
  width: calc(50% - 4rem);
}


.company-menu .link-boxes-row--3col .link-box {
  width: calc(33.33333% - 4rem);
}

.company-menu .link-box {
  display: flex;
  flex-direction: column;
  width: calc(33.333% - 4rem);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  background: #fff;
  position: relative;
}

.company-menu .link-box:nth-child(3n) {
  margin-right: 0;
}

.company-menu .link-box a {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  text-decoration: none;
  color: inherit;
}

.company-menu .link-image {
  width: 100%;
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative;
}

.company-menu .link-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.company-menu .link-box:hover .link-image img {
  transform: scale(1.1);
}

.company-menu .link-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 3.5rem 0;
  min-height: 0;
}

.company-menu .link-desc {
  margin: 0 0 4.5rem;
  font-size: var(--font-size-sm);
  line-height: 1.7;
  font-weight: 400;
  flex-shrink: 0;
}

.company-menu .link-name {
  position: relative;
  display: inline-block;
  align-self: flex-start;
  margin: auto 0 0;
  padding-right: 7rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
  transition: color 0.3s ease;
}

.company-menu .link-name::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5rem;
  height: 5rem;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  transition: all var(--transition-fast);
  z-index: 2;
  background: transparent;
}

.company-menu .link-name::after {
  content: "";
  position: absolute;
  right: 2.3rem;
  top: 50%;
  width: .6rem;
  height: .6rem;
  border-right: 1.5px solid var(--color-primary);
  border-bottom: 1.5px solid var(--color-primary);
  transform: translateY(-50%) rotate(-45deg);
  transition: all var(--transition-fast);
  z-index: 3;
}

.company-menu .link-box:hover .link-name {
  color: var(--color-primary);
}

.company-menu .link-box:hover .link-name::before {
  background: var(--brand-gradient);
  background-origin: border-box;
  border-color: transparent;
  transform: translateY(-50%) scale(1.2);
}

.company-menu .link-box:hover .link-name::after {
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: translateY(-50%) rotate(-45deg) scale(1.2);
}

.company-menu .link-box::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 100%;
  width: 300%;
  height: 300%;
  background: linear-gradient(225deg,
      transparent 0%,
      transparent 30%,
      rgba(255, 255, 255, 0.12) 42%,
      rgba(255, 255, 255, 0.32) 50%,
      rgba(255, 255, 255, 0.12) 58%,
      transparent 70%,
      transparent 100%);
  transition: left 0.55s ease-out, top 0.55s ease-out;
  pointer-events: none;
  z-index: 1;
}

.company-menu .link-box:hover::after {
  left: -200%;
  top: 200%;
}

/* 事業概要セクション */
.company-business .container {
  padding: 6rem 11rem;
}

.business-intro {
  max-width: 1100px;
  margin: 0 auto 5rem;
  text-align: center;
}

.business-text {
  font-size: 1.25em;
  line-height: 2;
  color: var(--color-text-light);
  font-weight: 400;
}

.business-items {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin-bottom: 5rem;
}

.business-item {
  background: #fff;
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 10%;
  align-items: center;
  padding: 0;
}

.business-item-reverse {
  flex-direction: row-reverse;
}

.business-item-image {
  flex: 0.8;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.business-item-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(248, 75, 35, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}

.business-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px 0 0 16px;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 450px;
  display: block;
}

.business-item-reverse .business-item-image img {
  border-radius: 0 16px 16px 0;
}

.business-item:hover .business-item-image img {
  transform: scale(1.1);
}

.business-item-content {
  flex: 1;
  padding: 4rem;
}

.business-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
}

.business-item:hover::after {
  left: 100%;
}

.business-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--brand-gradient);
  background-origin: border-box;
  border-color: transparent;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.business-item:hover {
  /* 🔴 hover で上に浮かせないこと（サイト共通のルール）。
     反応は下の ::before（帯が横に伸びる）で見せているので、
     ここに transform は不要。 */
}

.business-item:hover::before {
  transform: scaleX(1);
}

.business-title {
  font-size: var(--font-size-lead);
  font-weight: 600;
  margin-bottom: 2rem;
  background: var(--brand-gradient);
  background-origin: border-box;
  border-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.01em;
  line-height: 1.3;
  position: relative;
  padding-bottom: 1.5rem;
}

.business-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: var(--brand-gradient);
  background-origin: border-box;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.business-item:hover .business-title::after {
  transform: scaleX(1);
}

.business-content p {
  font-size: 1.05em;
  line-height: 1.9;
  color: var(--color-text-light);
  margin-bottom: 2rem;
  font-weight: 400;
}

.business-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.business-features li {
  padding: 1rem 0;
  padding-left: 2.5rem;
  position: relative;
  font-size: 1em;
  line-height: 1.8;
  color: var(--color-text-light);
  transition: color 0.3s ease;
}

.business-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: var(--brand-gradient);
  background-origin: border-box;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.business-features li:hover::before {
  transform: translateY(-50%) scale(1.15);
}

.business-features li::after {
  content: '✓';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 0.75em;
  font-weight: bold;
  line-height: 1;
}

.business-diagram {
  text-align: center;
  margin-top: 6rem;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.business-diagram::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(248, 75, 35, 0.1) 0%, transparent 70%);
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.business-diagram img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}

.business-diagram:hover img {
  transform: scale(1.05);
}

/* 当社の特徴セクション */
.company-features {
  background: linear-gradient(to bottom, #fafafa 0%, #ffffff 100%);
}

.company-features .container {
  padding: var(--space-11);
}

.features-intro {
  max-width: 1100px;
  margin: 0 auto 5rem;
  text-align: center;
  width: 100%;
}

.features-text {
  font-size: 1.25em;
  line-height: 2;
  color: var(--color-text-light);
  font-weight: 400;
}

.company-features-bg {
  background-image: none;
  background-color: transparent;
  background-blend-mode: normal;
}

.company-features-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../images/factory-bg.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: var(--parallax-bg-pos-y, 0%);
  background-attachment: fixed;
  background-color: rgba(255, 255, 255, 0.95);
  background-blend-mode: lighten;
  pointer-events: none;
}

.features-items {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.feature-item {
  background: #fff;
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 10%;
  align-items: center;
  padding: 0;
}

.feature-item-reverse {
  flex-direction: row-reverse;
}

.feature-item-image {
  flex: 0.8;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.feature-item-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(248, 75, 35, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}

.feature-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px 0 0 16px;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 450px;
  display: block;
}

.feature-item-reverse .feature-item-image img {
  border-radius: 0 16px 16px 0;
}

.feature-item:hover .feature-item-image img {
  transform: scale(1.1);
}

.feature-item-content {
  padding: 0;
}

.feature-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
}

.feature-item:hover::after {
  left: 100%;
}

.feature-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--brand-gradient);
  background-origin: border-box;
  border-color: transparent;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-item:hover {
  /* 🔴 hover で上に浮かせないこと（サイト共通のルール）。
     反応は下の ::before（帯が横に伸びる）で見せているので、
     ここに transform は不要。 */
}

.feature-item:hover::before {
  transform: scaleX(1);
}

.feature-title {
  font-size: 2.2em;
  font-weight: 700;
  font-family: var(--font-family-heading);
  margin-bottom: 2rem;
  background: var(--brand-gradient);
  background-origin: border-box;
  border-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.01em;
  line-height: 1.3;
  position: relative;
  padding-bottom: 1.5rem;
}

.feature-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: var(--brand-gradient);
  background-origin: border-box;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-item:hover .feature-title::after {
  transform: scaleX(1);
}

.feature-content p {
  font-size: 1.05em;
  line-height: 1.9;
  color: var(--color-text-light);
  margin-bottom: 2rem;
  font-weight: 400;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  padding: 1rem 0;
  padding-left: 2.5rem;
  position: relative;
  font-size: 1em;
  line-height: 1.8;
  color: var(--color-text-light);
  transition: color 0.3s ease;
}

.feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: var(--brand-gradient);
  background-origin: border-box;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-list li:hover::before {
  transform: translateY(-50%) scale(1.15);
}

.feature-list li::after {
  content: '✓';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 0.75em;
  font-weight: bold;
  line-height: 1;
}

/* 社名の由来セクション */
.company-name {
  position: relative;
  overflow: hidden;
}

.company-name .container {
  padding: var(--space-11);
}

.name-content {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 6rem;
  align-items: center;
}

.name-logo {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.name-logo-inner {
  text-align: center;
  padding: 3rem;
  background: linear-gradient(135deg, rgba(248, 75, 35, 0.08) 0%, rgba(229, 90, 43, 0.08) 100%);
  border-radius: 16px;
  border: 1px solid rgba(248, 75, 35, 0.15);
}

.name-logo-image {
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
}

.name-logo-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.name-logo-image:hover img {
  transform: scale(1.05);
}

.company-name-large {
  font-size: 3.5em;
  font-weight: 700;
  font-family: var(--font-family-heading);
  background: var(--brand-gradient);
  background-origin: border-box;
  border-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.company-name-jp {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin: 0;
  font-weight: 500;
  letter-spacing: 1px;
}

.name-explanation {
  font-size: 1.1em;
  line-height: 2;
}

.name-title {
  font-size: 2em;
  font-weight: 700;
  font-family: var(--font-family-heading);
  margin-bottom: 2.5rem;

  letter-spacing: 0.01em;
  position: relative;
  padding-bottom: 1.5rem;
}

.name-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--brand-gradient);
  background-origin: border-box;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.name-title.visible::after {
  transform: scaleX(1);
}

.name-text p {
  color: var(--color-text-light);
  margin-bottom: 2rem;
  font-weight: 400;
  text-align: justify;
  text-justify: inter-ideograph;
}

.name-text p:last-child {
  margin-bottom: 0;
}

/* 会社概要セクション */
.company-overview {
  position: relative;
}

/* 会社概要・関連ページ共通の parallax 背景 */
.company-overview-bg {
  background-image: none;
  background-color: transparent;
}

.company-overview-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../images/company-bg.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: 50%;
  background-position-y: var(--parallax-bg-pos-y, 0%);
  background-attachment: fixed;
  pointer-events: none;
}

.company-overview .container {
  padding: var(--padding-inline-xl);
  position: relative;
  z-index: 1;
}

.overview-intro {
  margin: 0 auto var(--space-5);
}

.overview-text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  font-family: var(--font-family-primary);
  margin-top: var(--space-1_5);
}

/* 部門紹介ページなど：英字ラベル（採用サイト DIVISION 相当） */
.department-division-label {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-oswald, sans-serif);
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.4;
  color: var(--color-primary);
  text-transform: uppercase;
}

/* 部門紹介：大分類ごとの冒頭リード */
.department-overview-lead {
  margin: 0 0 var(--space-5);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
}

.department-overview .overview-list__row {
  align-items: flex-start;
}

.department-detail {
  margin-bottom: var(--space-6);
}

.department-detail:last-child {
  margin-bottom: 0;
}

.department-detail__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-nm);
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-primary);
}

.department-detail p {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
}

.overview-content {
  margin: 0 auto;
}

/* 会社概要リスト（dl形式・シンプルデザイン） */
.overview-list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border-top: 1px solid var(--border-color-muted);
}

.overview-list__row {
  display: grid;
  grid-template-columns: var(--space-16) 1fr;
  gap: var(--space-2);
  align-items: center;
  line-height: var(--line-height-loose);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-color-muted);
}

.overview-list__term {
  margin: 0;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-primary);
  font-weight: 600;
  color: var(--color-text);
  flex-shrink: 0;
}

.overview-list__desc {
  margin: 0;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-primary);
}

.overview-list__en {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-family-oswald);
  letter-spacing: var(--letter-spacing-tertiary);
  line-height: var(--line-height-primary);
  font-weight: 500;
  color: var(--color-primary);
}

.overview-list__block {
  display: block;
  margin-bottom: 1em;
}

.overview-list__block:last-child {
  margin-bottom: 0;
}

/* アクセスセクション（会社概要ページ） */
.access-section {
  background: var(--color-bg-light, #fafafa);
}

.access-section .container {
  padding: var(--padding-inline-xl);
  margin-bottom: 6rem;
}

.access-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
  align-items: start;
}

.access-block {
  width: 100%;
}

/* 本社：TOP .company .container と同系の左右フレックス（左テキスト・右写真） */
.access-block--split {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-6);
}

.access-block__flex {
  display: flex;
  gap: var(--space-6);
  align-items: center;
}

.access-block__text {
  flex: 1;
  min-width: 0;
}

.access-block__image {
  flex: 1;
  min-width: 0;
}

.access-block__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--border-radius);
  box-shadow: .75em .75em 1.5em rgba(0, 0, 0, 0.1);
}

.access-block__heading {
  font-size: var(--font-size-lead-lg);
  font-weight: 600;
  line-height: normal;
  margin: 0;
}

.access-address {
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-2);
}

.access-tel {
  font-size: var(--font-size-sm);
  padding: 0 0 var(--space-2);
}

/* 路線見出し（Googleマップ標準ピン風マーカー＋英字） */
.access-pin-heading {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin: var(--space-3) 0 var(--space-1);
  padding: 0;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-oswald);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-tertiary);
  line-height: var(--line-height-primary);
  text-transform: uppercase;
}

.access-pin-heading__label {
  padding-top: 0.06em;
}

/* Googleマップのロケーション・ピンに近い形（赤＋白の円＋先端） */
.access-pin-heading__marker {
  position: relative;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.375rem;
}

.access-pin-heading__marker::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-left: -0.5625rem;
  background-color: #ea4335;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
  box-shadow: 0 0.08em 0.12em rgba(0, 0, 0, 0.22);
}

.access-pin-heading__marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.34rem;
  width: 0.375rem;
  height: 0.375rem;
  margin-left: -0.1875rem;
  background: #fff;
  border-radius: 50%;
  z-index: 1;
}

.access-transport {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-sm);
}

.access-pin-heading+.access-transport {
  margin-top: var(--space-1);
}

.access-transport li {
  margin-bottom: 0.25em;
}

.access-map-wrap {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  background: var(--color-shadow-bg);
}

.access-map-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 従来のテーブル形式（他ページ用に維持） */
.overview-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(248, 75, 35, 0.1);
}

.overview-table tr {
  transition: background-color 0.3s ease;
}

.overview-table tr:hover {
  background-color: rgba(248, 75, 35, 0.02);
}

.overview-table tr:not(:last-child) td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.overview-table th {
  padding: var(--space-2_8) 2.5rem;
  background: var(--brand-gradient);
  background-origin: border-box;
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  font-family: var(--font-family-heading);
  text-align: left;
  width: 240px;
  vertical-align: top;
  font-size: 1.1em;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.overview-table td {
  padding: var(--space-2_8) 2.5rem;
  color: var(--color-text-light);
  line-height: 2;
  font-size: 1.1em;
  font-weight: 400;
}

.overview-table .en-name {
  font-size: 0.95em;
  color: var(--color-text-muted);
  display: block;
  margin-top: 0.8rem;
  font-style: italic;
  letter-spacing: 0.02em;
}

/* ページヘッダーリード文（会社案内サブページ） */
.page-header-lead {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
  line-height: var(--line-height-loose);
}

/* 企業沿革セクション */
.company-history {
  position: relative;
}

.company-history .container {
  padding: var(--padding-inline-xl);
  position: relative;
  z-index: 1;
}

.history-intro {
}

.history-intro-text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
}

/* 企業沿革ボディ（1行に 年 | 点 | 月 | 出来事） */
.history__body {
  margin: var(--padding-block-xlwm);
}

.history__list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

/* 縦線：点の中央を通る（グリッドの gap を考慮） */
.history__list::before {
  content: '';
  position: absolute;
  left: calc(var(--space-6) + var(--space-4) + var(--space-3) / 2 - 1px);
  top: var(--space-m3);
  bottom: var(--space-m3);
  width: 2px;
  background: linear-gradient(to bottom, var(--border-color-light), var(--border-color-light));
  opacity: 0.25;
  border-radius: var(--border-radius-sm);
  pointer-events: none;
}

.history__row {
  display: grid;
  grid-template-columns: var(--space-9) var(--space-4) var(--space-6) 1fr;
  gap: var(--space-1);
  align-items: center;
  padding-bottom: var(--space-5);
  position: relative;
}

.history__row:last-child {
  padding-bottom: 0;
}

.history__year {
  letter-spacing: var(--letter-spacing-tight);
}

.history__year .num {
  font-size: var(--font-size-lead);
  font-weight: 500;
  font-family: var(--font-family-oswald);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.history__year .jp {
  font-size: var(--font-size-subtitle);
  margin-left: 0.05em;
  vertical-align: middle;
}

.history__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-3);
}

.history__dot::before {
  content: '';
  width: var(--spacing-xs-sm);
  height: var(--spacing-xs-sm);
  border-radius: 50%;
  background: var(--brand-gradient);
  background-origin: border-box;
  box-shadow: 0 0 0 var(--border-radius-sm) rgba(248, 75, 35, 0.15);
  flex-shrink: 0;
}

.history__month {

  letter-spacing: var(--letter-spacing-tight);
}

.history__month .num {
  font-size: var(--font-size-nm);
  font-weight: 500;
  font-family: var(--font-family-oswald);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.history__month .jp {
  font-size: var(--font-size-subtitle);
  margin-left: 0.05em;
  vertical-align: middle;
}

.history__event {
  font-size: var(--font-size-sm);
  margin: 0;
  min-width: 0;
}

/* グループ・関連企業セクション */
.company-group {
  position: relative;
}

.company-group .container {
  padding: var(--padding-inline-xl);
  position: relative;
  z-index: 1;
}

.group-intro {
  margin: 0 auto;
}

.group-intro-text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  /*margin-top: var(--space-1_5);*/
}

.group-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--space-2_8);
  margin: var(--padding-block-xlwm)
}

/* ★ 2026-08-28 整理：カード内の要素をそろえる

   【もとの状態】
     ロゴ画像に高さの指定が無く（width: 60% だけ）、絵柄の縦横比のまま並んでいた。
     実測（1280px・4枚）でロゴの高さが 52px / 182px / 57px / 259px と約5倍ばらつき、
     その下の見出し・本文・ボタンが最大 130px ずれていた。

   【直し方】
     ・ロゴを決まった高さの枠に入れ、object-fit: contain で中に収める
       → 絵柄は歪まず、4枚の起点がそろう
     ・カードを縦フレックスにして、ボタンを margin-top: auto で下端にそろえる
       → 本文の長さが違ってもボタンの位置が一致する */
.group-card {
  flex: 1 1 calc(50% - var(--space-2_8));
  display: flex;
  background: var(--color-bg);
  border-radius: var(--border-radius);
  border: var(--border-width-thin) solid var(--border-color-muted);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.group-card:hover {
  box-shadow: var(--shadow-lg);
}

.group-card-inner {
  display: flex;
  flex-direction: column;
  /* カードいっぱいに広がる。これが無いと下のボタン下端そろえが効かない */
  flex: 1 1 auto;
  padding: var(--space-2_8);
}

.group-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-1_5);
  padding: 0 0 var(--space-1_5) 0;
  border-bottom: var(--border-width-thin) solid var(--border-color-muted);
}

/* ロゴの置き場所。
   ⚠️ 画像は <picture> の中に入っているので、img だけを狙っても当たらない。
      （もとの .group-card-header>img はそのため一度も効いていなかった）
      picture と img の両方に指定し、img が直接置かれた場合も拾えるようにする。 */
.group-card-header>picture,
.group-card-header>img {
  width: 60%;
  /* 決まった高さの枠。4枚のロゴの起点をそろえるためのもの */
  height: 13rem;
  display: flex;
  align-items: center;
  padding: var(--space-1_5) 0;
  box-sizing: border-box;
}

.group-card-header>picture>img {
  width: 100%;
  height: 100%;
  /* contain なので絵柄は歪まず、枠の中に収まる */
  object-fit: contain;
  object-position: left center;
}

.group-card-header>img {
  object-fit: contain;
  object-position: left center;
}

.group-card-title {
  font-size: var(--font-size-lead);
  font-weight: 600;

  margin: 0;
  letter-spacing: var(--letter-spacing-tight);
}

.group-card-label {
  display: inline-block;
  font-size: var(--font-size-text);
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(248, 75, 35, 0.08);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 999px;
  letter-spacing: var(--letter-spacing-tight);
}

.group-card-desc {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
}

.group-card-link-wrap {
  /* auto でカードの下端へ押し下げる。本文の長さが違ってもボタンの高さがそろう */
  margin: var(--space-1_5) 0 0;
  margin-top: auto;
  padding-top: var(--space-1_5);
}

.group-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--space-1);
  font-size: var(--font-size-text);
  font-weight: 500;
  color: var(--color-primary);
  background: transparent;
  border: var(--border-width-thin) solid var(--color-primary);
  border-radius: var(--border-radius-sm);
  text-decoration: none;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.group-card-link:hover {
  background: var(--brand-gradient);
  background-origin: border-box;
  color: var(--color-bg);
  border-color: transparent;
}

.group-card-link .arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.4em 0 0.4em 0.6em;
  border-color: transparent transparent transparent currentColor;
}

/* ===== グループ・関連企業：会社情報ページと同じ link-box で見せる ===== */
/* HTML 側で <section class="company-group company-menu"> としているので、
   並び・余白・ホバー（画像拡大・丸矢印・光の帯）は .company-menu の定義がそのまま効く。
   ここでは【中身が写真ではなくロゴであること】に由来する差分だけを書く。
   🔴 .company-menu のルールをここにコピーしないこと（二重管理になる）。 */

/* 導入文とカードの間の余白。
   企業沿革ページ（.history__body）と同じ変数を使い、ページをまたいで揃える。
   🔴 数値を直接書かないこと。--padding-block-xlwm は rem なので画面幅に連動し、
      実測で 116 / 103 / 118 / 62px と画面ごとに変わる。
   🔴 .company-menu 側を直接いじらないこと。会社情報・事業内容・CSR・採用にも波及する。 */
.company-group .link-boxes {
  margin: var(--padding-block-xlwm);
}

.company-group .link-image {
  /* 11:6 は他の link-box の写真（1980×1080）と同じ比率。
     🔴 ロゴは縦横比がバラバラ（実測 6.99 / 1.43 / 5.65 / 1.41）なので、
        枠の比率を固定しないとカードの高さがそろわない。 */
  aspect-ratio: 11 / 6;
  /* 会社情報ページの「企業沿革」「よくある質問」の地色と揃える。
     値はその実画像（faq/main-img）から採色したもの。 */
  background: linear-gradient(90deg, #f8fafb 0%, #e8eaee 50%, #d8dbe3 100%);
}

/* 🔴 <picture> は inline なので、中の img の height:100% が効かない。
   ブロックにして枠いっぱいに広げないと、ロゴが上寄りになる（実測 243px の枠に 128px）。 */
.company-group .link-image picture {
  display: block;
  width: 100%;
  height: 100%;
}

.company-group .link-image img {
  /* 写真ではなくロゴなので、切り取る cover ではなく全体を収める contain。
     余白は割合で持つ（固定 px だと画面幅でロゴの大きさが変わってしまう）。 */
  object-fit: contain;
  padding: 8% 10%;
}

/* 素材ごとの大きさのばらつきをならす。
   contain は【画像の枠】を枠に合わせるので、素材の内部余白や縦横比によって
   【実際に見えている絵の大きさ】は揃わない。実測したパネルに占める面積は
     cooscience 15.9% / 赤坂 20.7% / ローランドファーム 22.9% / クーインター 38.9%
   と、クーインターナショナルだけが約 1.8 倍大きかった（余白なしの切り抜き＋正方形に近いため）。
   🔴 値は割合（%）で持つこと。固定 px だと PC とスマホでバランスが崩れる。 */
.company-group .link-image img.logo-lg {
  padding: 13% 10%;
}

/* 背景の白が焼き込まれているロゴ（jpg、白地の svg/png）だけ、
   地の上に白い四角が浮くので multiply で白を抜く。
   🔴 透過ロゴには掛けないこと。地の色を掛け算されてブランド色がくすむ。
      付け外しは HTML 側の class="logo-on-white" で行う（素材そのものの性質なので）。 */
.company-group .link-image img.logo-on-white {
  mix-blend-mode: multiply;
}

/* グループカード用CTA（ブランドリストボタンと同じデザイン・アクション） */
.group-card-cta-button {
  transform: none;
  width: fit-content;
  height: 3.4em;
  border: 1px solid var(--color-primary, #333);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  z-index: 1;
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-primary, #333);
  background: transparent;
  padding: 0 2em;
  gap: 0.5em;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.group-card-cta-button:hover {
  background: var(--brand-gradient);
  color: var(--color-bg, #fff);
  border-color: var(--color-primary, #333);
  transition: all 0.3s ease;
}

.group-card-cta-button .button-text {
  font-weight: 500;
  white-space: nowrap;
  margin-right: 1rem;
  display: inline-block;
}

.group-card-cta-button .arrow {
  display: block;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-style: solid;
  border-width: 0.4em 0 0.4em 0.6em;
  border-color: transparent transparent transparent var(--color-primary, #333);
  flex-shrink: 0;
  box-sizing: content-box;
}

.group-card-cta-button:hover .button-text {
  color: var(--color-bg, #fff);
}

.group-card-cta-button:hover .arrow {
  border-left-color: var(--color-bg, #fff);
}

.group-card-cta-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 1;
}

.group-card-cta-button:hover::after {
  left: 100%;
}

/* ==========================================================================
   arrow付きCTAボタン 共通デザイン（旧: 白地＋オレンジ枠＋ベタ三角 を一括置換）
   ・色/艶: i-ne 準拠の 135deg グラデ塗り（::before）＝つややかなオレンジ
   ・形: .link-name 準拠の「円＋細い線シェブロン」
   ・動き（2026-09-25 決定「伸びる＋矢印の入れ替わり」）: hover で塗りの右端が 0.7em 伸び、
     円が白く塗られて同じだけ右へすべり、中のシェブロンが右へ抜けて左から次が入る。
     伸びるのは塗り（::before）だけで、ボタンの本当の幅は変えない＝周りを押さない。
     🔴 上に浮かせない（translateY を書かない）
   ※ 8クラスは同一デザインの重複定義。ここが後勝ちで全てに効く（マークアップ変更なし）
   ========================================================================== */
.oem-cta-button,
.sustainability-cta-button,
.company-cta-button,
.recruit-cta-button,
.blandlist-cta-button,
.hero-cta-button,
.links .news-cta-button,
.group-card-cta-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1.1em;
  width: fit-content;
  height: 4em;
  padding: 0 0.55em 0 2.2em;
  border: 0;
  border-radius: 999px;              /* ピル型（i-ne 準拠） */
  background: transparent;           /* 塗りは ::before のグラデが担当 */
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: visible;                 /* 円の拡大がクリップされないよう */
  isolation: isolate;                /* ::before を内部で背面に */
  /*box-shadow: 0 6px 18px rgba(248, 75, 35, 0.22);*/
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* 艶の本体: 135deg の暗→明グラデ（ブランドオレンジ #F84B23 を中心に） */
.oem-cta-button::before,
.sustainability-cta-button::before,
.company-cta-button::before,
.recruit-cta-button::before,
.blandlist-cta-button::before,
.hero-cta-button::before,
.links .news-cta-button::before,
.group-card-cta-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background: var(--brand-gradient);
  background-origin: border-box;
  transition: right 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 旧シャイン（白い帯が横切る ::after）は艶グラデと干渉するため無効化 */
.oem-cta-button::after,
.sustainability-cta-button::after,
.company-cta-button::after,
.recruit-cta-button::after,
.blandlist-cta-button::after,
.hero-cta-button::after,
.links .news-cta-button::after,
.group-card-cta-button::after {
  content: none;
}

.oem-cta-button .button-text,
.sustainability-cta-button .button-text,
.company-cta-button .button-text,
.recruit-cta-button .button-text,
.blandlist-cta-button .button-text,
.hero-cta-button .button-text,
.links .news-cta-button .button-text,
.group-card-cta-button .button-text {
  margin: 0;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}

/* arrow: ベタ三角 → .link-name と同じ「円＋細い線シェブロン」 */
.oem-cta-button .arrow,
.sustainability-cta-button .arrow,
.company-cta-button .arrow,
.recruit-cta-button .arrow,
.blandlist-cta-button .arrow,
.hero-cta-button .arrow,
.links .news-cta-button .arrow,
.group-card-cta-button .arrow {
  position: relative;
  flex: 0 0 auto;
  width: 2.9em;
  height: 2.9em;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: transparent;
  transform: none;
  overflow: hidden;                  /* 入れ替わるシェブロンを円の中だけに見せる */
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease, border-color 0.3s ease;
}

/* シェブロン: ::after が今の矢印、::before が次に入ってくる矢印（形は同じ） */
.oem-cta-button .arrow::after,
.sustainability-cta-button .arrow::after,
.company-cta-button .arrow::after,
.recruit-cta-button .arrow::after,
.blandlist-cta-button .arrow::after,
.hero-cta-button .arrow::after,
.links .news-cta-button .arrow::after,
.group-card-cta-button .arrow::after,
.oem-cta-button .arrow::before,
.sustainability-cta-button .arrow::before,
.company-cta-button .arrow::before,
.recruit-cta-button .arrow::before,
.blandlist-cta-button .arrow::before,
.hero-cta-button .arrow::before,
.links .news-cta-button .arrow::before,
.group-card-cta-button .arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5em;
  height: 0.5em;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: translate(-65%, -50%) rotate(-45deg);
  transition: left 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}

/* 次の矢印は、はじめ円の左の外に隠しておく。色は最初からオレンジ */
.oem-cta-button .arrow::before,
.sustainability-cta-button .arrow::before,
.company-cta-button .arrow::before,
.recruit-cta-button .arrow::before,
.blandlist-cta-button .arrow::before,
.hero-cta-button .arrow::before,
.links .news-cta-button .arrow::before,
.group-card-cta-button .arrow::before {
  left: -50%;
  border-right-color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* hover: 旧定義の hover（地のグラデ・枠）を打ち消す。🔴 transform: translateY は書き戻さない（上に浮かせない） */
.oem-cta-button:hover,
.sustainability-cta-button:hover,
.company-cta-button:hover,
.recruit-cta-button:hover,
.blandlist-cta-button:hover,
.hero-cta-button:hover,
.links .news-cta-button:hover,
.group-card-cta-button:hover {
  background: transparent;
  border: 0;
  color: #fff;
  /*transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(248, 75, 35, 0.32);*/
}

.oem-cta-button:hover .button-text,
.sustainability-cta-button:hover .button-text,
.company-cta-button:hover .button-text,
.recruit-cta-button:hover .button-text,
.blandlist-cta-button:hover .button-text,
.hero-cta-button:hover .button-text,
.links .news-cta-button:hover .button-text,
.group-card-cta-button:hover .button-text {
  color: #fff;
}

/* 円が白く塗られ、シェブロンはオレンジへ（マウス・キーボード・指で触れたとき） */
.oem-cta-button:hover .arrow,
.sustainability-cta-button:hover .arrow,
.company-cta-button:hover .arrow,
.recruit-cta-button:hover .arrow,
.blandlist-cta-button:hover .arrow,
.hero-cta-button:hover .arrow,
.links .news-cta-button:hover .arrow,
.group-card-cta-button:hover .arrow,
.oem-cta-button:focus-visible .arrow,
.sustainability-cta-button:focus-visible .arrow,
.company-cta-button:focus-visible .arrow,
.recruit-cta-button:focus-visible .arrow,
.blandlist-cta-button:focus-visible .arrow,
.hero-cta-button:focus-visible .arrow,
.links .news-cta-button:focus-visible .arrow,
.group-card-cta-button:focus-visible .arrow {
  background: #fff;
  border-color: #fff;
}

.oem-cta-button:hover .arrow::after,
.sustainability-cta-button:hover .arrow::after,
.company-cta-button:hover .arrow::after,
.recruit-cta-button:hover .arrow::after,
.blandlist-cta-button:hover .arrow::after,
.hero-cta-button:hover .arrow::after,
.links .news-cta-button:hover .arrow::after,
.group-card-cta-button:hover .arrow::after,
.oem-cta-button:focus-visible .arrow::after,
.sustainability-cta-button:focus-visible .arrow::after,
.company-cta-button:focus-visible .arrow::after,
.recruit-cta-button:focus-visible .arrow::after,
.blandlist-cta-button:focus-visible .arrow::after,
.hero-cta-button:focus-visible .arrow::after,
.links .news-cta-button:focus-visible .arrow::after,
.group-card-cta-button:focus-visible .arrow::after {
  border-right-color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* 動きはマウスのある端末だけ（スマホで触れたあとに、動いた途中の形が残らないように） */
@media (hover: hover) {
  /* 伸びる: 塗りの右端を 0.7em 伸ばし、円も同じだけ右へ。
     キーボードで選んだときは伸ばさない（フォーカスの枠から塗りがはみ出すため） */
  .oem-cta-button:hover::before,
  .sustainability-cta-button:hover::before,
  .company-cta-button:hover::before,
  .recruit-cta-button:hover::before,
  .blandlist-cta-button:hover::before,
  .hero-cta-button:hover::before,
  .links .news-cta-button:hover::before,
  .group-card-cta-button:hover::before {
    right: -0.7em;
  }

  .oem-cta-button:hover .arrow,
  .sustainability-cta-button:hover .arrow,
  .company-cta-button:hover .arrow,
  .recruit-cta-button:hover .arrow,
  .blandlist-cta-button:hover .arrow,
  .hero-cta-button:hover .arrow,
  .links .news-cta-button:hover .arrow,
  .group-card-cta-button:hover .arrow {
    transform: translateX(0.7em);
  }

  /* 矢印の入れ替わり: 今のシェブロンが右へ抜け、左から次のシェブロンが入る */
  .oem-cta-button:hover .arrow::after,
  .sustainability-cta-button:hover .arrow::after,
  .company-cta-button:hover .arrow::after,
  .recruit-cta-button:hover .arrow::after,
  .blandlist-cta-button:hover .arrow::after,
  .hero-cta-button:hover .arrow::after,
  .links .news-cta-button:hover .arrow::after,
  .group-card-cta-button:hover .arrow::after,
  .oem-cta-button:focus-visible .arrow::after,
  .sustainability-cta-button:focus-visible .arrow::after,
  .company-cta-button:focus-visible .arrow::after,
  .recruit-cta-button:focus-visible .arrow::after,
  .blandlist-cta-button:focus-visible .arrow::after,
  .hero-cta-button:focus-visible .arrow::after,
  .links .news-cta-button:focus-visible .arrow::after,
  .group-card-cta-button:focus-visible .arrow::after {
    left: 150%;
  }

  .oem-cta-button:hover .arrow::before,
  .sustainability-cta-button:hover .arrow::before,
  .company-cta-button:hover .arrow::before,
  .recruit-cta-button:hover .arrow::before,
  .blandlist-cta-button:hover .arrow::before,
  .hero-cta-button:hover .arrow::before,
  .links .news-cta-button:hover .arrow::before,
  .group-card-cta-button:hover .arrow::before,
  .oem-cta-button:focus-visible .arrow::before,
  .sustainability-cta-button:focus-visible .arrow::before,
  .company-cta-button:focus-visible .arrow::before,
  .recruit-cta-button:focus-visible .arrow::before,
  .blandlist-cta-button:focus-visible .arrow::before,
  .hero-cta-button:focus-visible .arrow::before,
  .links .news-cta-button:focus-visible .arrow::before,
  .group-card-cta-button:focus-visible .arrow::before {
    left: 50%;
  }
}

.group-note {
  max-width: 720px;
  margin: var(--space-4) auto 0;
  text-align: center;
}

.group-note p {
  margin: 0;
  font-size: var(--font-size-text);
  color: var(--color-text-muted);
  line-height: var(--line-height-loose);
}

/* 企業理念セクション */
.company-philosophy {
  position: relative;
}

/* 理念ページの背景画像は外した（2026-09）。
   rgba(255,255,255,0.98) を background-blend-mode: lighten で重ねていたため、
   実測で画素の差は最大 5/255（約2%）＝ 事実上見えていなかった。
   同じ画像を使っていた .company-name-bg も、どのページからも使われていなかったので削除。
   セクションの .parallax-bg は overflow:hidden / position:relative を持つので残してある。 */

.company-philosophy .container {
  /*padding: var(--padding-block-xl-third);
  position: relative;*/
  padding: var(--padding-inline-xl);
  position: relative;
  z-index: 1;
}

.philosophy-content {
  max-width: 100%;
  margin: 0 auto;
}

.philosophy-item-wrapper {
  display: flex;
  gap: 10%;
  align-items: center;
  margin-bottom: var(--space-6);
  border-radius: var(--border-radius);
  padding: 0;
  overflow: hidden;
}

.philosophy-item-reverse {
  flex-direction: row-reverse;
}

.philosophy-item-image {
  border-radius: var(--border-radius);
  flex: 1;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.philosophy-item-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(248, 75, 35, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}

.philosophy-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius);
  display: block;
}

.philosophy-item-reverse .philosophy-item-image img {
  border-radius: var(--border-radius);
}

.philosophy-item-content {
  flex: 1;
}

.philosophy-item {
  margin-bottom: 0;
  border: none;
  position: relative;
  overflow: hidden;
}

.philosophy-item>* {
  position: relative;
  z-index: 1;
}

.philosophy-item:last-child {
  margin-bottom: 0;
}

/* 🔴 MISSION / VISION / VALUE は【小さい英字ラベル】。大見出しにしないこと。
   見出しの役割は下の .philosophy-lead（理念の一文）が担う。
   policy/ の .policy-section-title や、TOP の .company-label などと同じ作りに揃えている。 */
.philosophy-title {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-oswald);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-tertiary);
  line-height: var(--line-height-primary);
  text-transform: uppercase;
  color: var(--color-text-mid);
  margin-bottom: var(--space-1);
  position: relative;
}

/* ミッション・ビジョンの一行（見出しの下、本文の上）。
   理念の核を一文で言い切る行なので、本文より大きく、見出しより小さく。 */
.philosophy-lead {
  font-size: var(--font-size-lead);
  font-weight: 600;
  line-height: var(--line-height-primary);
  margin-bottom: var(--space-1_5);
}

.philosophy-text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-primary);
  text-align: justify;
  text-justify: inter-ideograph;
}

/* 順理則裕（コスメテックスローランドグループの企業理念） */
.philosophy-item-junrisokuyu {
  padding: var(--padding-block-xl);
}

.philosophy-item-junrisokuyu .philosophy-text {
  margin-bottom: 1.5rem;
  text-align: center;
}

.philosophy-item-junrisokuyu .philosophy-text:last-of-type {
  margin-bottom: 0;
}

.philosophy-title-junri {
  font-size: var(--font-size-text);
  background: var(--brand-gradient);
  background-origin: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding: var(--space-1) var(--space-2) var(--space-1) 0;
  margin-bottom: var(--space-1_5);
  border-top: transparent 1px solid;
  border-bottom: transparent 1px solid;
  display: inline-block;
}

.philosophy-lead-junri {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 2.5rem;
  padding: 2rem 0;
}

.junri-kanji {
  font-size: var(--font-size-display-lg);
  font-weight: 700;
  font-family: var(--font-family-nm-mincho);
  line-height: var(--line-height-secondary);
}

.junri-reading {
  font-size: var(--font-size-text);
  font-weight: 500;
  font-family: var(--font-family-nm-mincho);
  line-height: var(--line-height-primary);
  color: var(--color-text-light);
  letter-spacing: var(--letter-spacing-tertiary);
}

.philosophy-values {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--space-2_8);
  margin-top: var(--space-1);
}

.value-item {
  flex: 1 1 calc(50% - var(--space-2_8));
  background: var(--color-bg-light);
  padding: var(--space-2_8);
  border-radius: var(--border-radius);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.value-item h3 {
  font-size: var(--font-size-lead);
  font-weight: 600;
  margin-bottom: var(--space-2_5);
  letter-spacing: 0.01em;
  position: relative;
  padding-left: var(--space-1_5);
  line-height: var(--line-height-tight);
}

.value-item h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 52.5%;
  transform: translateY(-50%);
  width: .14em;
  height: 1em;
  border-radius: 1.4em;
  background: var(--brand-gradient);
  background-origin: border-box;
}

.value-item img {
  width: 100%;
  border-radius: var(--border-radius);
  margin-bottom: var(--space-3);
}

.value-item p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-primary);
  color: var(--color-text-light);
  margin: 0;
  font-weight: 400;
  text-align: justify;
  text-justify: inter-ideograph;
}

/* ===== パンくず・ヒーロー共通（採用/オンラインストア/会社案内/事業内容/ブランドリスト等） ===== */
.page-header {
  position: relative;
  padding: var(--padding-block-xl-top);
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.page-header.under-hero {
  padding: var(--padding-block-xl-third);
}

.page-header.under-hero .page-header-page-title {
  font-size: var(--font-size-display);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-wide);
  margin: 0;
  line-height: var(--line-height-tight);
}

.page-header-content {
  position: relative;
  z-index: 2;
  text-align: left;
}

.page-header-content p {
  padding-top: var(--space-2);
}

.page-header h1 {
  font-size: var(--font-size-display);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-wide);
  margin: 0;
  line-height: var(--line-height-tight);
}

.page-header p {
  font-size: var(--font-size-sm);
  opacity: var(--opacity-muted);
}

/* 展示会個別記事スライダー用CSSは「外観＞カスタマイズ＞展示会スライダー 追加CSS」で管理 */

/* ===== POLICY専用スタイル ===== */
.policy-hero {
  position: relative;
  padding: var(--padding-block-xl);
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  min-height: var(--min-height-60);
}

.policy-hero-content {
  position: relative;
  z-index: 2;
  text-align: left;
  width: 100%;
}

.policy-hero-title {
  font-size: var(--font-size-display-lg);
  font-weight: 600;
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-2);

  letter-spacing: var(--letter-spacing-tight);
}

.policy-hero-subtitle {
  font-size: var(--font-size-subtitle);
  line-height: var(--line-height-loose);
  color: var(--color-text-light);
  font-weight: 400;
}

.policy-container {
  margin: 0 auto;
}

.policy-content-wrapper {
  padding: var(--padding-inline-xl);
}

.policy-mission {
  margin-bottom: var(--space-10);
}

.policy-section-title {
  font-size: var(--font-size-nm);
  font-family: var(--font-family-oswald);
  font-weight: 500;
  color: var(--color-text-mid);
  margin-bottom: var(--space-3);
}

.policy-mission-content {
  margin: 0 auto;
}

.policy-mission-content h3 {
  font-size: var(--font-size-lead-lg);
  font-weight: 600;
  line-height: var(--line-height-primary);
  margin-bottom: var(--space-3);

}

.policy-mission-content p {
  font-size: var(--font-size-sm);
  line-height: 2;
  color: var(--color-text-light);
  text-align: left;
}

.policy-policies {
  margin-top: var(--space-8);
}

.policy-section-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-bottom: var(--space-4);
  display: block;
}

.policy-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.policy-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  background: var(--color-shadow-bg);
  border-radius: var(--border-radius);
  transition: box-shadow var(--transition-fast);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.policy-item:hover {
  background: var(--color-bg);
  box-shadow: .25em .25em 2em rgba(0, 0, 0, 0.125);
}

.policy-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 1;
}

.policy-item:hover::after {
  left: 100%;
}

.policy-item-content {
  flex: 1;
  position: relative;
  z-index: 2;
}

.policy-item h3 {
  font-size: var(--font-size-lead);
  font-weight: 600;
  margin-bottom: var(--space-1_5);

  transition: color var(--transition-fast);
}

.policy-item:hover h2 {
}

.policy-item p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  color: var(--color-text-light);
}

.policy-item-arrow {
  width: 5rem;
  height: 5rem;;
  padding-right: 7rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.policy-item-arrow::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5rem;
  height: 5rem;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  z-index: 2;
  background: transparent;
}

.policy-item-arrow::after {
  content: "";
  position: absolute;
  right: 2.3rem;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  width: 0.6rem;
  height: 0.6rem;
  border-right: 1px solid var(--color-primary);
  border-bottom: 1px solid var(--color-primary);
  transition: all var(--transition-fast);
  z-index: 3;
}

.policy-item:hover .policy-item-arrow::before {
  background: var(--brand-gradient);
  background-origin: border-box;
  border-color: transparent;
  transform: translateY(-50%) scale(var(--scale-arrow));
}

.policy-item:hover .policy-item-arrow::after {
  border-right: 1px solid var(--color-bg);
  border-bottom: 1px solid var(--color-bg);
  transform: translateY(-50%) rotate(-45deg) scale(var(--scale-arrow));
}

.policy-content {
  padding: var(--padding-inline-xl);
  margin: 0 auto;
}

.policy-content>p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  padding-bottom: var(--space-3);
}

.policy-content h2 {
  font-size: var(--font-size-lead);
  font-weight: 600;
  margin-top: var(--space-4);
  margin-bottom: var(--space-3);
  border-bottom: var(--border-width-thick) solid var(--color-primary);
  padding-bottom: var(--space-1);
}

.policy-content h2:first-child {
  margin-top: var(--space-none);
}

/* ★ 2026-08-28 修正：CSSルールが当たっておらず、文字が読めない大きさになっていた箇所

   【共通の原因】
     このサイトは画面幅に応じて基準の文字サイズが変わる作りで、
     スマホ幅（375px）では html の文字サイズが【5.25px】になる。
     文字サイズのトークン（--font-size-sm など）は em 単位で親から受け継ぐため、
     ルールが1つも当たっていない要素は【5.25px のまま】になり、事実上読めない。

   【見つけ方】
     ヘッドレスChromeで25ページを実際に描画し、
     見えている要素の font-size を計測して 11px 未満を洗い出した。
     道具: scratchpad/cdp.js */

/* ① プライバシーポリシーの h3。
   .policy-content には p / h2 / ul li のルールがあるのに h3 だけ無く、
   実測で【本文 13.65px に対して見出しが 5.25px】と逆転していた（スマホ幅）。
   h2（--font-size-lead）と本文（--font-size-sm）の中間になる
   --font-size-subtitle を当てて、見出しらしい大きさに戻す。 */
.policy-content h3 {
  font-size: var(--font-size-subtitle);
  font-weight: 600;
  line-height: var(--line-height-primary);
  margin-top: var(--space-3);
  margin-bottom: var(--space-1);
}

.policy-content ul {
  margin: var(--space-block-2-0);
  padding-left: var(--space-2);
}

.policy-content ul li {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);

  margin-bottom: var(--space-1);
}

.policy-content a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.policy-content a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.policy-end {
  text-align: right;
  font-size: var(--font-size-sm);
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: var(--border-width-thin) solid var(--border-color-muted);
}

/* ===== SDGs専用スタイル ===== */
.sdgs-hero {
  position: relative;
  padding: var(--padding-block-xl);
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  min-height: var(--min-height-60);
}

.sdgs-hero-content {
  position: relative;
  z-index: 2;
  text-align: left;
  width: 100%;
}

.sdgs-hero-content h1 {
  font-size: var(--font-size-display-lg);
  font-weight: 600;
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-2);

  letter-spacing: var(--letter-spacing-tight);
}

.sdgs-container {
  margin: 0 auto;
}

.sdgs-content-wrapper {
  padding: var(--padding-block-xl);
  margin: 0 auto;
}

.sdgs-philosophy-section {
  text-align: left;
  margin-bottom: var(--space-7);
  padding: 0;
  position: relative;
  margin-left: 0;
  margin-right: auto;
}

.sdgs-philosophy-label {
  font-size: var(--font-size-sm);
  font-weight: 400;
  text-align: center;
  width: fit-content;
  padding: var(--space-2);
  margin-bottom: var(--space-2);

  background-color: var(--color-shadow-bg);
  font-family: var(--font-family-oswald);
  line-height: var(--line-height-primary);
}

.sdgs-philosophy-title {
  font-size: var(--font-size-display-lg);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-secondary);
  margin-bottom: var(--space-1);
  border-bottom: none;
  margin-top: 0;
  padding-bottom: 0;
  font-family: var(--font-family-oswald);
  text-transform: none;
  line-height: var(--line-height-relaxed);
}

.sdgs-philosophy-title ruby {
  ruby-align: space-around;
}

.sdgs-philosophy-title rt {
  font-size: var(--font-size-mi);
  font-weight: 400;
  color: var(--color-text-mid);
}

.sdgs-philosophy-subtitle {
  font-size: var(--font-size-text);
  font-weight: 400;
  color: var(--color-text-light);
  margin-bottom: 2rem;
  font-style: normal;
  letter-spacing: var(--letter-spacing-tight);
  padding-left: 0.5em;
  position: relative;
}

.sdgs-philosophy-subtitle::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.2rem;
  height: 1em;
  background: var(--brand-gradient);
  background-origin: border-box;
  border-color: transparent;
}

.sdgs-philosophy-description {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
  font-style: italic;
  font-weight: 400;
  line-height: 1.8;
  max-width: 100%;
  padding-left: var(--space-1_5);
  position: relative;
}

.sdgs-philosophy-description::before {
  content: '"';
  position: absolute;
  left: 0;
  top: 0;
  font-size: 2em;
  color: var(--color-primary);
  opacity: 0.3;
  font-family: serif;
  line-height: 1;
}

.sdgs-philosophy-section ul {
  border-left: 2px solid rgba(0, 0, 0, 0.1);
  padding-left: var(--space-1_5);
}

.sdgs-philosophy-text-title {
  font-size: var(--font-size-title);
  font-weight: 600;
  line-height: var(--line-height-primary);
  margin: 0 0 1.5rem;
}

.sdgs-philosophy-text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  max-width: 100%;
  margin-bottom: 0;
  padding-bottom: 0;
  position: relative;
  counter-increment: initiative-counter;
}

.sdgs-goals-section {
  margin-bottom: 8rem;
  text-align: left;
}

.sdgs-section-title {
  display: block;
  width: 34rem;
  height: auto;
  margin: 0 0 2.5rem;
  object-fit: contain;
  border-bottom: none;
  margin-top: 0;
  padding-bottom: 0;
}

.sdgs-goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.sdgs-goal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  background: var(--color-shadow-bg);
  border-radius: 12px;
}

.sdgs-goal-icon {
  width: 100%;
  object-fit: contain;
  margin-bottom: 1rem;
}

.sdgs-goal-text {
  font-size: var(--font-size-text);
  font-weight: 400;

  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.01rem;
}

.sdgs-intro-text {
  font-size: var(--font-size-sm);
  line-height: 2;
  color: var(--color-text-light);
  max-width: 100%;
  margin: 0;
  text-align: left;
  font-weight: 600;
}

.sdgs-initiatives-section {
  display: flex;
  flex-direction: column;
  gap: 6rem;
  counter-reset: initiative-counter;
}

.sdgs-initiative-item {
  padding: 0;
  background: transparent;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 0;
  padding-bottom: 6rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: visible;
}

.sdgs-initiative-item:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 6rem;
}

.sdgs-initiative-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sdgs-initiative-header-content {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-bottom: 4rem;
  align-items: start;
}

.sdgs-initiative-text {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.sdgs-initiative-image {
  width: auto;
  height: auto;
  overflow: hidden;
  padding: 2rem;
  margin: 0 6rem 0;
}

.sdgs-initiative-image img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  object-fit: cover;
  display: block;
}

.sdgs-initiative-title-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.sdgs-initiative-title-icon {
  width: 15%;
  flex-shrink: 0;
  object-fit: contain;
}

.sdgs-initiative-title {
  font-size: var(--font-size-title);
  font-weight: 600;
  margin: 0;

  line-height: 1.6;
  padding-bottom: 0;
  position: relative;
  padding: .25rem 4rem 4rem 6rem;
  counter-increment: initiative-counter;
}

.sdgs-initiative-title::before {
  content: counter(initiative-counter) "";
  position: absolute;
  left: 0;
  top: -5rem;
  font-size: var(--font-size-title);
  font-weight: 500;
  color: var(--color-primary);
  font-family: var(--font-family-oswald);
  display: inline-block;
}

.sdgs-initiative-subtitle {
  font-size: var(--font-size-sm);
  font-weight: 400;
  text-align: center;
  width: fit-content;
  padding: 2rem;
  margin: 0 6rem 4rem;

  background-color: var(--color-shadow-bg);
  font-family: var(--font-family-oswald);
  line-height: 1.6;
}

.sdgs-initiative-image-label {
  font-size: var(--font-size-text);
  color: var(--color-text-light);
  font-style: italic;
  margin-bottom: 1.5rem;
  font-family: var(--font-family-oswald);
  font-weight: 400;
}

.sdgs-initiative-description {
  font-size: var(--font-size-sm);
  line-height: 2;
  color: var(--color-text-light);
  font-weight: 600;
  padding: 3.4rem 6rem;
  margin: 3.4rem 6rem;
  margin-bottom: 0;
  border: 1px solid var(--border-color-light);
  text-align: center;
}

.sdgs-container-options {
  list-style: none;
  padding: 0;
  width: auto;
  margin: 2rem auto;
  display: flex;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.sdgs-container-options li {
  padding: 1.5rem;
  background: rgb(0 110 165 / 81%);
  border-radius: 8px;
  margin-bottom: 0;
  display: grid;
  align-items: center;
  text-align: center;
}

.sdgs-container-options li span {
  font-size: var(--font-size-text);
  font-weight: 400;
  color: var(--color-bg);
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.01rem;
}

.sdgs-container-icon {
  width: 100%;
  flex-shrink: 0;
  object-fit: contain;
  margin-bottom: 1rem;
}

.sdgs-goal-detail {
  padding: 3rem;
  background: var(--color-shadow-bg);
  margin-top: 4rem;
  transition: all 0.3s ease;
}

.sdgs-goal-title-wrapper {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.sdgs-goal-title-icon {
  width: 8rem;
  flex-shrink: 0;
  object-fit: contain;
}

.sdgs-goal-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin: 0;

  font-family: var(--font-family-oswald);
  line-height: 1.6;
  border-bottom: none;
  padding-bottom: 0;
  flex: 1;
}

.sdgs-goal-targets {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.sdgs-goal-target {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  padding: 2rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  margin-bottom: 0;
}

.sdgs-goal-target:last-child {
  margin-bottom: 0;
}

.target-number-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 3em;
  height: auto;
  background: transparent;
  border-radius: 0;
  flex-shrink: 0;
  padding-top: 0.2em;
}

.sdgs-goal-target .target-number {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-align: center;
  font-family: var(--font-family-oswald);
  margin: 0;
  line-height: 1.2;
  padding: 0.3em 0.5em;
  background: rgba(248, 75, 35, 0.1);
  border-radius: 4px;
  display: inline-block;
}

.sdgs-goal-target p {
  font-size: var(--font-size-sm);
  line-height: 2;
  flex: 1;
  margin: 0;
  font-weight: 400;
  padding-left: 2rem;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.sdgs-goal-target p strong {
  color: var(--color-primary);
  font-weight: 600;
}

/* ===== RECRUIT専用スタイル ===== */
.recruit-content {
  padding: var(--padding-block-xl);
  margin: 0 auto;
}

/* ===== 採用：オープニング（FV ＋ pin メッセージを recruit-bg で一体化） ===== */
/* 注意: 祖先の overflow:hidden は ScrollTrigger の pin（position:fixed）を壊すため、セクション本体は visible。背景だけ子でクリップ */
.recruit-page .recruit-opening {
  position: relative;
  isolation: isolate;
}

/* 手当てスクロール域（200lvh）：上 100lvh が FV、下 100lvh でメッセージが全面に。FV は sticky でコラージュ＋コピー列を維持 */
.recruit-page .recruit-opening__stack {
  position: relative;
  z-index: 1;
  min-height: 200lvh; /* dvh は iOS のバー伸縮で値が変わり、セクションが伸び縮みして ScrollTrigger の位置が古くなるため lvh */
  /* message 側 pin-spacer が伸びるため縦は切らない。横方向だけ抑える */
  overflow-x: clip;
  overflow-y: visible;
}

.recruit-page .recruit-opening__fv {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

/* FV (position: fixed) は pin 終了後も画面に残るため、Recruit Hero 以降のコンテンツを
   .recruit-after-opening でラップし、白背景 + z-index を付与して FV の上に乗せる。 */
.recruit-page .recruit-after-opening {
  position: relative;
  z-index: 2;
  background-color: #fff;
}

.recruit-page .recruit-opening__message {
  position: relative;
  /* FV と 1 画面分重ねて出現させる */
  z-index: 2;
  min-height: 100lvh; /* dvh は iOS のバー伸縮で値が変わり、セクションが伸び縮みして ScrollTrigger の位置が古くなるため lvh */
  margin-top: -100lvh; /* 🔴 上の min-height と必ず同じ単位にすること（FVと重ねる量の対になる値） */
}

/* オープニング中（body.opening-locked または body.opening-cover-transition）は
   FV だけ見せ、後続セクションが上に被らないよう非表示にする。
   - opening-locked: ロード初期〜（初回は typewriter 完了時に script.js:2181 で外れる）
   - opening-cover-transition: カバーフェード（1.5秒）中、初回・2回目以降の両方で付与される
   ※ .recruit-parallax-d__copy は下記 5267 の高具体度ルール
      (.recruit-page .recruit-parallax-d[data-recruit-parallax-pin] .recruit-parallax-d__copy)
      で visibility: visible が指定されているため、同パターン以上の具体度で上書きする */
body.opening-locked.recruit-page .recruit-opening__message,
body.opening-locked.recruit-page .recruit-parallax-d[data-recruit-parallax-pin] .recruit-parallax-d__copy,
body.opening-locked.recruit-page .page-header.under-hero,
body.opening-cover-transition.recruit-page .recruit-opening__message,
body.opening-cover-transition.recruit-page .recruit-parallax-d[data-recruit-parallax-pin] .recruit-parallax-d__copy,
body.opening-cover-transition.recruit-page .page-header.under-hero {
  visibility: hidden;
}

.recruit-page .recruit-opening__fv .recruit-fv--ine {
  position: relative;
  z-index: 0;
}

/* ===== 採用：多層パララックス・メッセージ（pin 3シーン） ===== */
.recruit-page .recruit-parallax-d {
  position: relative;
  /* pin 対象セクションは overflow:hidden にしない（ScrollTrigger pin 不具合の原因になる） */
  overflow-x: hidden;
  overflow-y: visible;
  min-height: clamp(28rem, 76lvh, 52rem); /* dvh は iOS のバー伸縮で値が変わり、セクションが伸び縮みして ScrollTrigger の位置が古くなるため lvh */
  display: flex;
  align-items: center;
  padding: var(--padding-block-xl);
  margin: 0 auto;
}

/* pin 体験：ビューポートいっぱいを基準に */
.recruit-page .recruit-parallax-d[data-recruit-parallax-pin] {
  min-height: 100lvh; /* dvh は iOS のバー伸縮で値が変わり、セクションが伸び縮みして ScrollTrigger の位置が古くなるため lvh */
  justify-content: center;
  overflow: hidden;
}

/* GSAP 制御時は CSS ループアニメを止め、初期位置は JS が上書き */
.recruit-parallax-d--pin-controlled .recruit-parallax-d__blob {
  animation: none !important;
}

.recruit-parallax-d--pin-controlled .recruit-parallax-d__mid {
  perspective: 1600px;
  transform-style: preserve-3d;
}

.recruit-parallax-d--pin-controlled .recruit-parallax-d__blobs {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
}

/* pin 用：コピーは常時表示。挙動はブロブ層中心に制御 */
.recruit-page .recruit-parallax-d[data-recruit-parallax-pin] .recruit-parallax-d__copy {
  opacity: 1;
  visibility: visible;
}

.recruit-parallax-d__mid {
  position: absolute;
  inset: -12% -6% -14%;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}

/* チームの「重なり」：リキッドブロブが中央付近で混ざり、離れるループ */
/* 🔴 isolation は外すこと。これがあると新しい合成グループになり、
   screen（光の足し算）が背後の写真まで届かない。
   届かないから光ではなく「上に色を置いただけ」に見えていた。 */
.recruit-parallax-d__blobs {
  position: absolute;
  inset: 0;
}

/* 大気のゆらぎとブルーム。光なので合成は screen（足し算）。
   輪郭を作らないため border / box-shadow / backdrop-filter は使わない。 */
.recruit-parallax-d__blob {
  position: absolute;
  display: block;
  border-radius: 45% 55% 48% 52% / 52% 48% 55% 45%;
  transform-origin: 50% 50%;
  will-change: transform, border-radius;
  mix-blend-mode: screen;
}

/* ブルー/シアン系：sky blue (35,169,248) と aqua (35,248,220) を中心に半透明を積層 */
.recruit-parallax-d__blob--1 {
  width: min(46vw, 30rem);
  height: min(42vw, 28rem);
  left: -6%;
  top: 4%;
  background: radial-gradient(ellipse 80% 75% at 38% 42%,
      rgba(255, 243, 214, 0.50) 0%,
      rgba(255, 232, 190, 0.20) 52%,
      transparent 74%);
  animation: recruit-parallax-d-blob-morph-1 22s ease-in-out infinite;
}

.recruit-parallax-d__blob--2 {
  width: min(40vw, 26rem);
  height: min(44vw, 29rem);
  right: -4%;
  top: 18%;
  background: radial-gradient(ellipse 78% 80% at 55% 48%,
      rgba(255, 246, 222, 0.40) 0%,
      rgba(255, 234, 196, 0.16) 52%,
      transparent 74%);
  animation: recruit-parallax-d-blob-morph-2 26s ease-in-out infinite;
}

.recruit-parallax-d__blob--3 {
  width: min(38vw, 24rem);
  height: min(36vw, 23rem);
  left: 18%;
  bottom: -2%;
  background: radial-gradient(ellipse 85% 70% at 45% 55%,
      rgba(255, 240, 208, 0.34) 0%,
      rgba(255, 230, 186, 0.14) 52%,
      transparent 74%);
  animation: recruit-parallax-d-blob-morph-3 20s ease-in-out infinite;
}

.recruit-parallax-d__blob--4 {
  width: min(34vw, 22rem);
  height: min(34vw, 22rem);
  left: 38%;
  top: 32%;
  background: radial-gradient(circle at 48% 45%,
      rgba(255, 245, 218, 0.40) 0%,
      rgba(255, 233, 194, 0.16) 52%,
      transparent 74%);
  animation: recruit-parallax-d-blob-morph-4 24s ease-in-out infinite;
}

/* ガラス質の層：重なりの「境界」を光で示す（クール系の青みでまとめる） */
.recruit-parallax-d__blob--glass {
  /* 🔴 以前は border:1px と backdrop-filter の「ガラス板」だった。
     画面上で 1px の円の輪郭がはっきり見え、光ではなくUI部品に見えていた。
     輪郭を持たないブルーム（光のにじみ）に置き換える。 */
  width: min(58vw, 40rem);
  height: min(54vw, 36rem);
  left: 6%;
  top: 4%;
  background: radial-gradient(circle at 42% 40%,
      rgba(255, 250, 236, 0.55) 0%,
      rgba(255, 240, 208, 0.22) 46%,
      transparent 72%);
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  mix-blend-mode: screen;
  animation: recruit-parallax-d-blob-glass 18s ease-in-out infinite;
}

@keyframes recruit-parallax-d-blob-morph-1 {

  0%,
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    border-radius: 45% 55% 48% 52% / 52% 48% 55% 45%;
  }

  35% {
    transform: translate(6%, 8%) scale(1.06) rotate(-2deg);
    border-radius: 55% 45% 52% 48% / 48% 55% 45% 52%;
  }

  65% {
    transform: translate(14%, 4%) scale(1.03) rotate(1deg);
    border-radius: 48% 52% 55% 45% / 55% 45% 48% 52%;
  }
}

@keyframes recruit-parallax-d-blob-morph-2 {

  0%,
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    border-radius: 52% 48% 50% 50% / 50% 50% 52% 48%;
  }

  40% {
    transform: translate(-10%, 6%) scale(1.05) rotate(3deg);
    border-radius: 44% 56% 48% 52% / 52% 44% 56% 48%;
  }

  70% {
    transform: translate(-16%, -4%) scale(1.02) rotate(-1deg);
    border-radius: 50% 50% 54% 46% / 46% 54% 50% 50%;
  }
}

@keyframes recruit-parallax-d-blob-morph-3 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
    border-radius: 50% 50% 45% 55% / 55% 45% 50% 50%;
  }

  50% {
    transform: translate(8%, -10%) scale(1.08) rotate(-2.5deg);
    border-radius: 46% 54% 52% 48% / 48% 52% 46% 54%;
  }
}

@keyframes recruit-parallax-d-blob-morph-4 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
    border-radius: 48% 52% 52% 48% / 48% 52% 48% 52%;
  }

  30% {
    transform: translate(-6%, 4%) scale(1.12);
    border-radius: 58% 42% 48% 52% / 52% 48% 58% 42%;
  }

  60% {
    transform: translate(4%, -6%) scale(0.96);
    border-radius: 42% 58% 55% 45% / 45% 55% 42% 58%;
  }
}

@keyframes recruit-parallax-d-blob-glass {

  0%,
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    border-radius: 42% 58% 55% 45% / 48% 52% 45% 55%;
    opacity: 0.88;
  }

  45% {
    transform: translate(3%, -2%) scale(1.04) rotate(1.5deg);
    border-radius: 55% 45% 42% 58% / 52% 48% 55% 45%;
    opacity: 1;
  }

  75% {
    transform: translate(-2%, 3%) scale(0.98) rotate(-1deg);
    border-radius: 48% 52% 58% 42% / 45% 55% 52% 48%;
    opacity: 0.92;
  }
}

/* ===== 左上から差し込む日差し =====
   考え方：光は「足し算」で、方向を持ち、輪郭を持たない。
   ・地の明るさ（下の linear-gradient）＝ 文字の読みやすさを担当。左上ほど白い
   ・::before ＝ かぶり（veiling glare）。光源まわりに広く薄い暖色の霞
   ・::after  ＝ 光の帯。左上から斜めに落ちる。両端は完全な透明で輪郭を作らない
   🔴 シアンを足さないこと。影が青く見えるのは暖色の光との対比で足りる。
   🔴 強さはこのCSSで決める。JS 側は不透明度を 0→1 で動かすだけ（単位を一本化）。 */
.recruit-parallax-d__shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  /* 左上（文字がある側）が最も明るく、右下へ落ちる。
     写真の暗部（スーツ・ベスト）に黒文字が乗っても読めるだけの白を左側に置く。 */
  /* 角度はほぼ水平（102deg）。窓が左にあるなら左の壁は上から下まで明るい。
     斜めにすると左下（本文がある場所）に光が届かず、実測でコントラスト比が
     2.30〜3.76:1 しか出なかった。方向感は下の ::before / ::after が担う。 */
  background: linear-gradient(102deg,
      rgba(255, 253, 248, 0.97) 0%,
      rgba(255, 252, 245, 0.94) 26%,
      rgba(255, 250, 241, 0.84) 48%,
      rgba(255, 248, 240, 0.56) 74%,
      rgba(255, 250, 244, 0.36) 100%);
}

/* 🔴 1024px 以下はコピーが画面幅いっぱいに広がるため、左寄りの勾配だけでは
   右端の文字が写真の暗部に乗って読めない（実測 2.30:1）。全体の下限を上げる。 */
@media (max-width: 1024px) {
  .recruit-parallax-d__shade {
    background: linear-gradient(102deg,
        rgba(255, 253, 248, 0.86) 0%,
        rgba(255, 252, 246, 0.81) 30%,
        rgba(255, 251, 243, 0.72) 60%,
        rgba(255, 250, 242, 0.62) 100%);
  }
}

/* かぶり：左上の光源まわりが白く飛び、そこから広く薄く回り込む */
.recruit-parallax-d__shade::before {
  content: '';
  position: absolute;
  inset: -25%;
  pointer-events: none;
  background: radial-gradient(58% 62% at 6% -8%,
      rgba(255, 247, 224, 0.92) 0%,
      rgba(255, 241, 206, 0.46) 32%,
      rgba(255, 240, 212, 0.14) 60%,
      transparent 78%);
  mix-blend-mode: screen;
}

/* 光の帯：幅も濃さも不揃いにする（等間隔だと人工的に見える）。
   ぼかしてから回転させ、端は完全な透明にして輪郭を消す。 */
.recruit-parallax-d__shade::after {
  content: '';
  position: absolute;
  inset: -45%;
  pointer-events: none;
  transform: rotate(-24deg);
  background: linear-gradient(90deg,
      transparent 0%,
      transparent 10%,
      rgba(255, 247, 226, 0.30) 16%,
      transparent 25%,
      transparent 33%,
      rgba(255, 247, 226, 0.19) 38%,
      transparent 47%,
      transparent 56%,
      rgba(255, 247, 226, 0.11) 60%,
      transparent 70%,
      transparent 100%);
  mix-blend-mode: screen;
  filter: blur(26px);
}

.recruit-parallax-d__inner {
  position: relative;
  z-index: 4;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
}

.recruit-parallax-d__inner--glass {
}

.recruit-parallax-d__title {
  font-size: var(--font-size-display);
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--color-text, #1a1a1a);
}

.recruit-parallax-d__body {
  font-size: var(--font-size-sm);
  line-height: 1.9;
  color: var(--color-text-light);
  margin-top: 2em;
}

.recruit-parallax-d__body p {
  margin: 0 0 1.75em;
}

.recruit-parallax-d__body p:last-child {
  margin-bottom: 0;
}

.recruit-intro {
  margin-bottom: 8rem;
}

.recruit-intro h2 {
  font-size: var(--font-size-title);
  font-weight: 600;
  margin-bottom: var(--space-2);

  line-height: var(--line-height-primary);
}

.recruit-intro p {
  font-size: var(--font-size-sm);
  line-height: 2;
  color: var(--color-text-light);
}

.recruit-section h2 {
  font-size: var(--font-size-lead-lg);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: normal;
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 2rem;
}

.section-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-bottom: 3rem;
}

.recruit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin-top: 3rem;
}

.recruit-item {
  padding: 2.5rem;
  background: var(--color-shadow-bg);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.recruit-item:hover {
  background: var(--color-bg);
  box-shadow: .25em .25em 2em rgba(0, 0, 0, 0.125);
}

.recruit-item h3 {
  font-size: 2em;
  font-weight: 600;
  margin-bottom: 1.5rem;

}

.recruit-item p {
  font-size: var(--font-size-sm);
  line-height: 1.8;
  color: var(--color-text-light);
}

/* オンラインストア等：recruit-links 横並びカード（採用トップは company-menu / link-box を使用） */
.recruit-links {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.recruit-link-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3rem;
  background: var(--color-shadow-bg);
  border-radius: var(--border-radius);
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.recruit-link-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 1;
}

.recruit-link-item:hover {
  background: var(--color-bg);
  box-shadow: .25em .25em 2em rgba(0, 0, 0, 0.125);
}

.recruit-link-item:hover::after {
  left: 100%;
}

.recruit-link-content {
  flex: 1.5;
  position: relative;
  z-index: 2;
}

.recruit-link-content:first-of-type {
  flex: 1;
  padding-right: 4rem;
}

.recruit-link-content .store-badge {
  display: inline-block;
  font-size: 0.9em;
  font-weight: 600;
  padding: 0.4em 0.8em;
  background: var(--brand-gradient);
  background-origin: border-box;
  color: #fff;
  border-radius: 4px;
}

.recruit-link-item h3 {
  font-size: var(--font-size-lead);
  font-weight: 600;
  text-align: left;
  margin-bottom: 1rem;

  transition: color 0.3s ease;
}

.recruit-link-item p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  color: var(--color-text-light);
}

.recruit-link-arrow {
  width: 5rem;
  height: 5rem;
  padding-right: 7rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.recruit-link-arrow::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5rem;
  height: 5rem;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  z-index: 2;
  background: transparent;
}

.recruit-link-arrow::after {
  content: "";
  position: absolute;
  right: 2.3rem;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  width: 0.6rem;
  height: 0.6rem;
  border-right: 1px solid var(--color-primary);
  border-bottom: 1px solid var(--color-primary);
  transition: all var(--transition-fast);
  z-index: 3;
}

.recruit-link-item:hover .recruit-link-arrow::before {
  background: var(--brand-gradient);
  background-origin: border-box;
  border-color: transparent;
  transform: translateY(-50%) scale(1.2);
}

.recruit-link-item:hover .recruit-link-arrow::after {
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: translateY(-50%) rotate(-45deg) scale(1.2);
}

/* 採用：求人・エントリー（事業内容ページの company-menu / link-box と同じブロック構造） */
.recruit-content .recruit-section.company-menu>.container {
  /* .recruit-content に横余白があるため、.company-menu .container のパディングは二重にならないよう打ち消し */
  padding: 0;
}

.recruit-section.company-menu h2.section-title {
  border-bottom: none;
}

.recruit-section.company-menu .link-boxes {
  flex-direction: column;
  gap: 5rem;
}

.recruit-section.company-menu .link-boxes-row {
  width: 100%;
}

.recruit-page .company-menu .recruit-entry-banner--mynavi {
  border: .8rem solid #02aae8;
  box-sizing: border-box;
}

.recruit-page .company-menu .recruit-entry-banner--rikunabi {
  border: .8rem solid #0069b7;
  box-sizing: border-box;
}

/* ===== INTERVIEW専用スタイル ===== */
.interview-content {
  padding: 13rem 26rem;
  margin: 0 auto;
}

.interview-intro {
  font-size: var(--font-size-sm);
  line-height: 2;

  margin-bottom: 6rem;
  text-align: center;
}

.interview-section {
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

.interview-item {
  padding: 4rem;
  background: var(--color-shadow-bg);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.interview-item:hover {
  background: var(--color-bg);
  box-shadow: .25em .25em 2em rgba(0, 0, 0, 0.125);
}

.interview-header {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid var(--color-primary);
}

.interview-header h2 {
  font-size: var(--font-size-lead-lg);
  font-weight: 600;
  margin-bottom: 0.5rem;

}

.interview-department {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  font-style: italic;
  font-family: var(--font-family-oswald);
}

.interview-body {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.interview-question {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.interview-answer {
  font-size: var(--font-size-sm);
  line-height: 2;
  padding-left: 2rem;
}

/* ===== CSR / business 詳細ページ 共通の目次 (csr-toc) ===== */
/* 仕様：section-01 が画面に入るまで非表示 → 入ってからフェードイン + 追従 */
/* デスクトップ = 右下フローティング固定 / モバイル = 上部フローティング固定 */

.csr-toc {
  /* 🔴 目次がどちらに寄っているかを CSS 側で宣言する。JS はこれを読むだけ。
     こうしておけば、ブレークポイントを変えても JS を直す必要がない。
     （getComputedStyle().top は固定要素だと auto ではなく解決後の px を返すため、
      top の値からは判定できない） */
  --toc-dock: top;
  /* デフォルトは非表示（JS で .is-active クラスが付いたら表示） */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}

.csr-toc.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0s;
}

.csr-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.csr-toc ul li a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-primary);
  line-height: 1.4;
  padding: 0.55rem 0.5rem;
  transition: color 0.3s ease, background-color 0.3s ease;
  border-radius: 4px;
}

.csr-toc ul li a > span {
  font-family: var(--font-family-oswald);
  font-size: 0.9em;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: var(--letter-spacing-tertiary);
  line-height: 1;
  min-width: 1.8em;
  transition: transform 0.3s ease;
}

.csr-toc ul li a:hover {
  color: var(--color-primary);
}

/* scroll-spy：現在ビュー内のセクションに対応する目次項目のハイライト */
.csr-toc ul li a.is-current {
  color: var(--color-primary);
  font-weight: 600;
}
.csr-toc ul li a.is-current > span {
  transform: scale(1.1);
}

/* ===== デスクトップ (≥1025px)：右下フローティング固定 ===== */
/*@media (min-width: 1025px) {*/
  .csr-toc {
    position: fixed;
    top: 26rem;
    right: 7rem;
    width: 30rem;
    overflow-y: auto;
    z-index: 3;
    padding: var(--space-2) var(--space-2);
    margin: 0;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    /*border-radius: var(--border-radius, 8px);*/
    border-radius: var(--border-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    /* 表示前は少し右にオフセット */
    transform: translateX(1rem);
  }

  .csr-toc.is-active {
    transform: translateX(0);
  }

/*}*/

/* ===== モバイル/タブレット (≤1024px)：csr-toc を画面下部の帯 + 横スクロールのチップに =====
   🔴 以前は画面【上部】に貼り付いた常時表示の帯だった。実測でこうなっていた:
        1024px 幅 → 高さ165px ＝ 画面の 21.5% を占有
        768px 幅  → 12.1% ／ 402px 幅 → 7.4%
      しかも隠していたのが「01 OEMで培った処方力」のような【節の見出し】で、
      いちばん読みたい所に重なっていた。

   直し方は2つ:
     1. 上 → 下へ。指が届く位置で、読み進める先（下方向の本文）を隠しにくい
     2. 【下へスクロール中（＝読んでいる）は隠し、上へスクロール（＝探している）で出す】
        ブラウザのツールバーと同じ振る舞いなので、利用者に学習を求めない。
        隠す/出すは JS が .is-tucked を付け外しする（script.js の csr-toc のブロック）。 */
@media (max-width: 1024px) {
  .csr-toc {
    --toc-dock: bottom;
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    /* iPhone のホームバーに潜り込まないよう、下だけ安全領域を足す */
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    margin: 0;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    /* 表示前は少し下にオフセット（下から出てくる） */
    transform: translateY(0.5rem);
    /* 影は上向きに（下端に接しているので下方向の影は見えない） */
    box-shadow: 0 -2px 14px rgb(0 0 0 / 18%);
  }

  .csr-toc.is-active {
    transform: translateY(0);
  }

  /* 下へスクロール中は画面外へ完全に逃がす。
     🔴 高さは端末で変わるので px ではなく自身の高さ(100%)で送り出す。
     安全領域のぶんも含めて確実に隠すため、少し多めに送る。

     🔴 .is-active を条件に入れないこと。
        入れると「隠している位置(110%)」と「非表示時の位置(0.5rem)」の間を
        transform が移動し、その道中で opacity が中途半端な値になって
        【一瞬ちらっと見えてしまう】。実測で 01 の手前(y=440〜520)と
        最終セクション通過後(y=2080〜2160)の2箇所で 27〜56px 見えていた。
        条件を外すと、隠れている間は表示/非表示が切り替わっても
        位置が動かないので、opacity だけが変化して見えない。 */
  .csr-toc.is-tucked {
    transform: translateY(110%);
    pointer-events: none;
  }

  .csr-toc ul {
    flex-direction: row;
    gap: var(--space-1);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
  }

  .csr-toc ul.is-grabbing {
    cursor: grabbing;
    user-select: none;
  }

  /* ドラッグ中はリンクの誤クリックを抑止 */
  .csr-toc ul.is-grabbing a {
    pointer-events: none;
  }

  .csr-toc ul::-webkit-scrollbar {
    display: none;
  }

  .csr-toc ul li {
    flex-shrink: 0;
  }

  .csr-toc ul li a {
    font-size: var(--font-size-text);
    gap: 0.5rem;
    padding: 0.9rem;
    border-radius: 999px;
    background: var(--color-shadow-bg, #f5f5f5);
    white-space: nowrap;
    line-height: 1.2;
  }

  .csr-toc ul li a:hover {
    transform: none;
  }

  .csr-toc ul li a > span {
    font-size: var(--font-size-sm);
    min-width: 1.4em;
  }

  /* モバイルのカレント：塗りつぶしで反転 */
  .csr-toc ul li a.is-current {
    background: var(--brand-gradient);
    background-origin: border-box;
    border-color: transparent;
    color: #fff;
  }
  .csr-toc ul li a.is-current > span {
    color: #fff;
    transform: none;
  }
}

/* セクション全体に SDGs 風の罫線+大余白 */
.csr-section {
  width: 82rem;
  padding: var(--space-6) 0;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  /* 目次リンククリック時、sticky ヘッダー分オフセットしてスクロール */
  scroll-margin-top: 9rem;
}

@media (max-width: 1024px) {
  .csr-section {
    width: auto;
    scroll-margin-top: 8rem;
  }
}

.csr-section:first-of-type {
  border-top: none;
  padding-top: var(--space-3);
}

.csr-section:last-of-type {
  border-bottom: none;
}

/* セクションヘッダー：番号を Oswald で大きく、タイトルを font-size-title (.sdgs-initiative-title と同じ) */
.csr-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.csr-section-header > span {
  font-family: var(--font-family-oswald);
  font-size: var(--font-size-display);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.05em;
  line-height: 1;
}

.csr-section-header h2 {
  font-size: var(--font-size-title);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: var(--line-height-primary);
  margin: 0;
}

/* セクション内のコンテンツ */
.csr-section-content {
  padding-top: 0;
}

/* h3：SDGs subtitle 風（背景色付きピル＋アイコン） */
.csr-section-content h3 {
  position: relative;
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-family: var(--font-family-oswald);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-primary);
  padding: var(--space-1_5) var(--space-2) var(--space-1_5) calc(1.6em + var(--space-2));
  margin: var(--space-4) 0 var(--space-2_5);
  background: var(--color-shadow-bg);
  color: var(--color-text);
}

.csr-section-content h3:first-child {
  margin-top: 0;
}

.csr-section-content h3::before {
  content: "";
  position: absolute;
  left: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  width: 1.2em;
  height: 1.2em;
  background: var(--brand-gradient);  /* was background-color（グラデはbackgroundで指定） */
  background-origin: border-box;
  border-color: transparent;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 3H7a2 2 0 0 0-2 2v16l7-3 7 3V5a2 2 0 0 0-2-2z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 3H7a2 2 0 0 0-2 2v16l7-3 7 3V5a2 2 0 0 0-2-2z'/></svg>");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* h4：.sdgs-goal-title-wrapper 風（下線+アイコン横並び） */
.csr-section-content h4 {
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-family: var(--font-family-oswald);
  line-height: var(--line-height-primary);
  letter-spacing: var(--letter-spacing-tight);
  padding-bottom: var(--space-1_5);
  margin: var(--space-3_4) 0 var(--space-2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--color-text);
}

.csr-section-content h4::before {
  content: "";
  flex-shrink: 0;
  width: 1.5em;
  height: 1.5em;
  background: var(--brand-gradient);  /* was background-color（グラデはbackgroundで指定） */
  background-origin: border-box;
  border-color: transparent;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm-1.41 14.59L6 12l1.41-1.41L10.59 13.76l5.999-6L18 9.17z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm-1.41 14.59L6 12l1.41-1.41L10.59 13.76l5.999-6L18 9.17z'/></svg>");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.csr-section-content h4:first-child {
  margin-top: 0;
}

/* h5：小見出し（プライマリ色の縦バー） */
.csr-section-content h5 {
  position: relative;
  font-size: var(--font-size-text);
  font-weight: 600;
  line-height: var(--line-height-primary);
  letter-spacing: var(--letter-spacing-tight);
  padding-left: var(--space-1_5);
  margin: var(--space-2_5) 0 var(--space-1);
  color: var(--color-text);
}

.csr-section-content h5::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 3px;
  background: var(--brand-gradient);
  background-origin: border-box;
  border-color: transparent;
}

/* 本文サイズを font-size-sm (1.4em) に揃え、SDGs ターゲット文と同じ密度に */
.csr-section-content p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-primary);
  margin: 0 0 var(--space-2_5);
}

.csr-section-content ul {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0;
}

.csr-section-content ul li {
  position: relative;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-primary);
  margin-bottom: var(--space-1);
  padding-left: var(--space-2);
}

.csr-section-content ul li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--color-primary);
}

.csr-section-content blockquote {
  background: var(--color-shadow-bg);
  padding: var(--space-3);
  margin: var(--space-4) 0;
  border-left: 4px solid var(--color-primary);
  border-radius: 8px;
  font-style: italic;
  color: var(--color-text-mid);
}

.csr-section-content blockquote h4 {
  font-size: var(--font-size-subtitle);
  font-weight: 600;
  margin: 0 0 var(--space-1);
  padding-left: 0;
  font-style: normal;
}

.csr-section-content blockquote h4::before {
  content: none;
}

.csr-section-content blockquote p {
  margin-bottom: var(--space-1);
}

.csr-section-content blockquote p:last-child {
  margin-bottom: 0;
}

/* h4 + 関連コンテンツのサブグループ */
.csr-section-group {
  margin: var(--space-4) 0;
}

.csr-section-group > h4 {
  margin-top: 0;
}

/* ===== business/ ヒーロー：強み循環図（上下にふわふわ揺れる） ===== */
/* ステージを container query の基準にして、リング・円・テキストを
   すべて cqi（コンテナ幅の 1%）で組む → 画像サイズに合わせて完全レスポンシブ */
.biz-hero-stage {
  position: relative;
  container-type: inline-size;
}

.biz-orbit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 2;
  color: #2a2a2a;
}

.biz-orbit__ring {
  position: relative;
  width: 52cqi;
  aspect-ratio: 1;
  /* 回転しない（静止） */
}

.biz-orbit__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8cqi;
  aspect-ratio: 1;
  margin: -4cqi 0 0 -4cqi;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  display: grid;
  place-items: center;
  /* sin/cos で円周上に静止配置（ふわふわ浮遊は廃止） */
  --angle: calc(var(--i) * 72deg);
  --radius: 19cqi;
  transform: translate(
    calc(var(--radius) * sin(var(--angle))),
    calc(var(--radius) * cos(var(--angle)) * -1)
  );
}

.biz-orbit__label {
  display: inline-block;
  font-size: 1.5cqi;
  font-weight: 500;
  color: currentColor;
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 1.25;
}

/* タブレット〜モバイル：画像の縦横比上、デスクトップより全体を大きく見せる */
@media (max-width: 1024px) {
  .biz-orbit__ring {
    width: 96cqi;
  }
  .biz-orbit__item {
    width: 18cqi;
    margin: -9cqi 0 0 -9cqi;
    --radius: 34cqi;
  }
  .biz-orbit__label {
    font-size: 3.6cqi;
  }
}

/* ===== TOP の OEM の図（2026-09-29：ご担当者の見本 oem_2.jpg のデザインに。5つの半透明の丸 → 6つの白い丸・オレンジの字と線） =====
   写真（oem-diagram）の上に SVG（index.php の .oem-orbit）を重ねる。SVG の座標は写真と同じ 770×741 なので、写真と一緒に伸び縮みする。
   丸の位置・大きさ・輪・つなぐ線の決まりは index.php の注記。事業内容のページの biz-orbit（上の 5つの丸）とは別の部品。
   ・字と線の色はサイトの基本色（--color-primary #F84B23）。見本の字の色（#F84923）と同じ
   ・線の太さは見本と同じ 1（写真が 770px のときの px）。字や丸と同じ比率で写真と一緒に縮む（パソコン 約 0.63px）。
     2026-09-29：画面の上で 1px に固定したら、見本より線だけ太く濃く見えた → 比率に戻した。箱が小さいとき（スマホ）は 0.6px を下限に
   ・字の大きさは見本と同じ 18.5（同じく 770px のときの px）。画面の上では「写真の幅 ÷ 770」倍になる。
     写真が小さいとき（スマホ）はそのままだと 8px ほどになるので、@container で約 11px まで上げる（丸に収まる大きさ） */
.biz-hero-stage--oem {
  border-radius: 16px;
}
.biz-hero-stage--oem picture,
.biz-hero-stage--oem .oem-image img,
.biz-hero-stage--oem img {
  display: block;
  width: 100%;
  height: auto;
}
.oem-orbit {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.oem-orbit__line {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1px;
}
.oem-orbit__disc {
  fill: #fff;
  filter: url(#oem-orbit-shadow);
}
.oem-orbit__label {
  fill: var(--color-primary);
  font-family: var(--font-family-primary);
  font-size: 18.5px;
  font-weight: 400;
}
/* 2字の行（海外・連携／品質・管理）は字間を空ける（見本どおり。中央へ戻す dx は index.php の tspan） */
.oem-orbit__label--wide {
  letter-spacing: 0.27em;
}
@container (max-width: 440px) {
  .oem-orbit__label {
    font-size: 22px;
  }
  /* 線は写真と一緒に縮めると 0.5px を切るので、画面の上の 0.6px で止める */
  .oem-orbit__line {
    stroke-width: 0.6px;
    vector-effect: non-scaling-stroke;
  }
}
@container (max-width: 380px) {
  .oem-orbit__label {
    font-size: 24px;
  }
}

/* 部門紹介ページなどで csr-section 内に写真を入れる時のラッパ */
.department-photo {
  margin: 0 0 var(--space-3);
  border-radius: var(--border-radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-shadow-bg, #f5f5f5);
}

.department-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.csr-section-group > .department-photo {
  margin-bottom: var(--space-3);
}

/* ===== お問い合わせページ ===== */
.contact-hero {
  position: relative;
  padding: 13rem 11rem 8rem;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.contact-hero-content {
  position: relative;
  z-index: 2;
  text-align: left;
  width: 100%;
}

.contact-hero-title {
  font-size: var(--font-size-display-lg);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 2rem;

  letter-spacing: 0.05em;
}

.contact-hero-subtitle {
  font-size: var(--font-size-sm);
  line-height: 2;
  color: var(--color-text-light);
  font-weight: 400;
}

.contact-container {
  margin: 0 auto;
}

.contact-content-wrapper {
  padding: var(--padding-inline-xl);
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: var(--space-3);
}

.other-page .contact-content-wrapper {
  display: block;
}

/* ===== お問い合わせフォーム ===== */
.contact-form-section {
  background-color: var(--color-bg-light);
  padding: var(--space-3);
  width: 50%;
}

.contact-form-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

.contact-form-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-bottom: var(--space-2);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.js_error_control {
  color: var(--color-primary-dark);
}

.form__block {
  display: grid;
  grid-template-columns: 1fr 2.9fr;
  gap: 1rem;
  margin-block-start: 3rem;
  margin-block-end: 3rem;
  border-top: 1px solid var(--border-color-light);
  padding-top: 3rem;
}

.form__block:last-child {
  border-bottom: 1px solid var(--border-color-light);
  padding-bottom: 3rem;
}

.form__name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.reqdMark {
  vertical-align: middle;
  margin-right: 1rem;
}

.reqdMark,
.form__reqdMark {
  font-size: var(--font-size-base);
  background: var(--brand-gradient);
  background-origin: border-box;
  color: #fff;
  min-width: 2.7rem;
  padding: 0.05rem 0.5rem 0.15rem;
  border-radius: var(--border-radius-sm);
}

/* 入力の誤りなどのお知らせ（フォームのいちばん上に出る帯）
   🔴 EasyMail のひな形は、この帯に「必須」バッジと同じ class（form__reqdMark）を付けてくる。
      そのままだと上の規則が当たり、橙のバッジが横いっぱいに伸びて白い極小文字になり読みにくい。
      ここで打ち消して、誤りのある欄と同じ薄桃色の地＋同じ赤文字にそろえる。
      #fff0f5 は emform が誤りの欄に付ける色と同じ値（新しい色は足していない）。
   お問合せフォーム（contact）と SDS の画面の両方で使う。 */
.list-group-item.form__reqdMark {
  display: block;
  min-width: 0;
  margin-bottom: 1.5rem;
  padding: 1.2rem 1.5rem;
  background: #fff0f5;
  border-left: var(--border-width-thick) solid var(--color-primary-dark);
  border-radius: 0;
  color: var(--color-primary-dark);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.8;
}

.form__inputArea {
  margin-inline-start: inherit;
  text-align: left;
}

.form__inputArea span {
  font-size: var(--font-size-small);
  line-height: 2;
  text-align: left;
}

.form__inputArea input,
.form__inputArea select,
.form__inputArea label,
.form__inputArea textarea {
  width: 100%;
  padding: 1rem 1.5rem;
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-primary);

  transition: all var(--transition-fast);
  box-sizing: border-box;
}

.form__inputArea input.InquiryItems3 {
  width: 1.5rem;
  height: 3rem;
  vertical-align: middle;
  line-height: 1.5rem;
  align-items: center;
  white-space: nowrap;
}

.contentHead {
  font-size: var(--font-size-sm);
}

/* 説明のかたまりが続くときは、間を空ける。
   （SDS のアカウント設定のように、1ページに複数の用件が並ぶ画面で効く） */
.contentHead + .contentHead {
  margin-top: var(--space-4);
}

.form__inputArea label._label {
  padding: 1rem 1.5rem 1rem 0;
}

.form__inputArea input.privacypolicy {
  width: 1.5rem;
  height: 3rem;
  vertical-align: middle;
  line-height: 1.5rem;
  align-items: center;
}

.form__inputArea input.termsofuse {
  width: 1.5rem;
  height: 3rem;
  vertical-align: middle;
  line-height: 1.5rem;
  align-items: center;
}

.form__inputArea input:focus,
.form__inputArea select:focus,
.form__inputArea label:focus,
.form__inputArea textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(248, 75, 35, 0.1);
}

.form__inputArea input::placeholder,
.form__inputArea label::placeholder,
.form__inputArea textarea::placeholder {
  color: var(--color-text-mid);
  opacity: 1;
}

.form__inputArea select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2rem center;
  background-size: 1.2em;
  padding-right: 4rem;
  cursor: pointer;
}

.form__inputArea textarea {
  resize: vertical;
  min-height: 200px;
  line-height: 1.8;
}

.form__block-checkbox {
  margin-top: 1rem;
}

.form-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  cursor: pointer;
  font-size: var(--font-size-sm);
  line-height: 1.8;
  color: var(--color-text-light);
}

.form-checkbox {
  width: 2rem;
  height: 2rem;
  margin-top: 0.2rem;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

.form-checkbox-text {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.form-checkbox-text a {
  color: var(--color-primary);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.form-checkbox-text a:hover {
  color: var(--color-primary-dark);
}

.formBtns__wrap {
  display: flex;
  justify-content: center;
  margin-top: 4rem;
  width: 25%;
}

.formBtns {
  display: flex;
  justify-content: space-evenly;
}

.formBtns__btn {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  padding: 1.8rem 4rem;
  background: var(--brand-gradient);
  background-origin: border-box;
  color: var(--color-bg);
  border: none;
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-family: var(--font-family-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.formBtns__btn:hover {
  /* 🔴 hover で上に浮かせないこと（サイト共通のルール）。
     反応は色・影・帯の動きで見せる。 */
  background: var(--brand-gradient);
  background-origin: border-box;
  border-color: transparent;
}

.formBtns__btn .arrow {
  width: 1.2em;
  height: 1.2em;
  position: relative;
  transition: transform var(--transition-fast);
}

.formBtns__btn .arrow::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.2em;
  height: 1.2em;
  border: 2px solid var(--color-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.formBtns__btn .arrow::after {
  content: "";
  position: absolute;
  right: 0.4em;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  width: 0.4em;
  height: 0.4em;
  border-right: 2px solid var(--color-bg);
  border-bottom: 2px solid var(--color-bg);
  transition: all var(--transition-fast);
}

.formBtns__btn:hover .arrow {
  transform: translateX(0.5rem);
}

.thanks-box h6 {
  font-size: var(--font-size-sm);

  text-align: center;
}

/* ===== お問い合わせTOPページ専用スタイル ===== */
.contact-hero-title-jp {
  display: block;
  font-size: 0.5em;
  font-weight: 400;
  margin-top: 0.5rem;
  letter-spacing: 0.1em;
}

.contact-faq-link {
  color: var(--color-primary);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.contact-faq-link:hover {
  color: var(--color-accent);
}

.contact-section-title {
  font-size: var(--font-size-title);
  font-weight: 600;
  margin-top: 8rem;
  margin-bottom: 3rem;

  letter-spacing: var(--letter-spacing-primary);
}

.contact-section-title:first-of-type {
  margin-top: 0;
}

.contact-privacy {
  margin-bottom: 8rem;
}

.contact-privacy-content {
  font-size: var(--font-size-sm);
  line-height: 2;
  color: var(--color-text-light);
}

.contact-privacy-content>p {
  margin-bottom: 2rem;
}

.contact-notice {
  background: var(--color-shadow-bg);
  padding: 3rem;
  border-radius: var(--border-radius);
  margin: 3rem 0;
}

.contact-notice-title {
  font-size: var(--font-size-sm);
  font-weight: 600;

  margin-bottom: 2rem;
}

.contact-notice-list {
  list-style: disc;
  padding-left: 2rem;
  margin: 0;
}

.contact-notice-list li {
  font-size: var(--font-size-sm);
  line-height: 2;
  color: var(--color-text-light);
  margin-bottom: 1rem;
}

.contact-privacy-manager {
  font-size: var(--font-size-sm);

  margin-top: 2rem;
  font-weight: 500;
}

.contact-privacy-inquiry {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border-color-light);
}

.contact-privacy-inquiry-title {
  font-size: var(--font-size-sm);
  font-weight: 600;

  margin-bottom: 1rem;
}

.contact-privacy-inquiry-content {
  font-size: var(--font-size-sm);
  line-height: 2;
  color: var(--color-text-light);
}

.contact-privacy-inquiry-content a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.contact-privacy-inquiry-content a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.contact-privacy-agree {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border-color-light);
}

.contact-privacy-checkbox {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--font-size-sm);

  cursor: pointer;
}

.contact-privacy-checkbox input[type="checkbox"] {
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  accent-color: var(--color-primary);
}

.contact-form-content {}

.contact-form-content>p {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
}

.contact-form-buttons {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.contact-form-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 1.8rem 4rem;
  background: var(--brand-gradient);
  background-origin: border-box;
  color: var(--color-bg);
  /* ★ hover で枠線が付いても大きさがズレないよう、最初から透明な枠を持たせる
     （border: none のままだと hover の瞬間に 1px 広がって文字が動く） */
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-fast);
  cursor: pointer;
  /* ★ 光が横切る演出（::after）を内側に収めるため */
  position: relative;
  overflow: hidden;
}

/* ★ 光が左から右へ横切る演出。フッターの .contact-button と同じ作り
   （common.css の .contact-button::after / :hover::after と同じ値）。 */
.contact-form-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 0;
}

.contact-form-button:hover::after {
  left: 100%;
}

/* ★ 2026-08-27 修正：hover すると文字が消えていた

   【原因】reset.css に全体ルールがある。
       @media (hover: hover) and (pointer: fine) { a:hover { color: var(--color-primary); } }
     このボタンは <a> なので、hover のとき文字色がブランドオレンジに変わる。
     背景も同じオレンジ系のグラデーションなので【同化して読めなくなっていた】。
     実測: hover 時の文字色 rgb(248,75,35) ＝ 背景グラデーションの中心色と完全に同じ。

   【なぜ前のルールで防げなかったか】
     詳細度では a:hover に勝っていたが、color を書いていなかったため上書きできていなかった。

   【直し方】フッターのお問い合わせボタン（common.css の .contact-button）に揃えた。
     オレンジ地・白文字 → 白地・オレンジ文字・オレンジ枠 ＋ 光が左から右へ横切る。
     ⚠️ reset.css 側は触らない（サイト全体に効くため）。ここで打ち消す。

   🔴 transform: translateY(...) で【上に浮かせることはしない】（2026-08-27 指示）。
     フッターの .contact-button には残っているが、こちらでは採用しない。
     動きは「色の反転」と「光が横切る」だけで表現する。 */
.contact-form-button:hover:not([disabled]) {
  background: var(--color-bg);
  background-origin: border-box;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.contact-form-button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.contact-form-button-secondary {
  background: var(--color-text-light);
}

.contact-form-button-secondary:hover {
  background: var(--color-text);
}

.contact-other-section {
  background-color: var(--color-bg-light);
  padding: var(--space-3);
  width: 50%;
}

.contact-other-content {}

.contact-other-select-wrapper {
  margin-bottom: var(--space-1_5)
}

.contact-other-select {
  width: 100%;
  padding: 1.5rem 2rem;
  border: 1px solid var(--border-color-light);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-primary);

  background: var(--color-bg);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2rem center;
  background-size: 1.2em;
  padding-right: 4rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.contact-other-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(248, 75, 35, 0.1);
}

.contact-other-form-wrapper {
  text-align: center;
}

.contact-faq-content {
  margin-top: 4rem;
}

.contact-faq-category {
  margin-bottom: 4rem;
}

.contact-faq-category:last-child {
  margin-bottom: 0;
}

.contact-faq-category-title {
  font-size: var(--font-size-lead);
  font-weight: 600;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-1);
  border-bottom: 2px solid var(--color-primary);
}

.contact-faq-item {
  margin-bottom: var(--space-5);
  padding: var(--space-3);
  background: var(--color-shadow-bg);
  border-radius: var(--border-radius);
}

.contact-faq-item:last-child {
  margin-bottom: 0;
}

.contact-faq-question {
  display: flex;
  gap: var(--space-2_5);
  margin-bottom: var(--space-3);
}

.contact-faq-q {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--color-text-mid);
  color: var(--color-bg);
  border-radius: 50%;
  font-size: var(--font-size-sm);
  font-weight: 600;
  flex-shrink: 0;
}

.contact-faq-question p {
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin: 0;
  flex: 1;
}

.contact-faq-answer {
  display: flex;
  gap: var(--space-2_5);
}

.contact-faq-a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--brand-gradient);
  background-origin: border-box;
  color: var(--color-bg);
  border-radius: 50%;
  font-size: var(--font-size-sm);
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.contact-faq-answer p {
  font-size: var(--font-size-sm);
  line-height: 2;
  color: var(--color-text-light);
  margin: 0;
  flex: 1;
}

/* ===== SDS（安全データシート）=====
   🔴 2026-09-12：枠（見出し帯・内側の余白）は【サイト標準】に戻した。
      以前ここにあった .sds-hero / .sds-hero-content / .sds-hero h1 / .sds-hero p /
      .sds-container / .sds-content は、.page-header / .page-header-content /
      .page-header h1 / .page-header p / .contact-container / .contact-content-wrapper を
      名前だけ変えて写したもので、中身は同じだった。
      違っていたのは折り返しの幅だけ（SDS は 768px、サイト標準は 1024px）で、
      タブレットで SDS だけ余白が残り「別サイト」に見えていた。
      枠を足したくなったら、まず既存のクラスで足りないかを確かめること。
   ここに残すのは SDS の【中身】の見た目だけ（.sds-doc の中の文字・表・入口ボタン）。 */
.sds-doc>p {
  font-size: var(--font-size-sm);

  margin-bottom: var(--space-3);
}

.sds-doc h2 {
  font-size: var(--font-size-lead);
  font-weight: 600;
  margin-top: var(--space-4);
  margin-bottom: var(--space-2_8);

  border-bottom: var(--border-width-thick) solid var(--color-primary);
  padding-bottom: var(--space-1);
}

.sds-doc h2:first-of-type {
  margin-top: 0;
}

/* --- SDS：すでにアカウントをお持ちの方の入口 -------------------------------
   再訪のお客様にとっての主要動線。
   🔴 .pdf-link を流用しないこと。あれは .listTable の中でしか定義がなく、
      表の外では見た目が何も付かず、ただの文字リンクになる。
   🔴 hover で浮かせないこと（このサイトの決まり）。
      色の入れ替えだけで押せることを伝える。 */
.sds-login-cta {
  margin: var(--space-4) auto 0;
  text-align: center;
}

.sds-login-cta > a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .2em;
  min-width: 18rem;
  padding: .9em 2.4em;
  color: var(--color-primary);
  font-size: var(--font-size-text);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-primary);
  text-decoration: none;
  background: var(--color-background);
  border: var(--border-width-thin) solid var(--color-primary);
  border-radius: 2px;
  transition: background var(--transition-normal), color var(--transition-normal);
}

.sds-login-cta > a > span {
  font-size: var(--font-size-small);
  font-weight: 400;
  letter-spacing: 0;
}

@media (hover: hover) and (pointer: fine) {
  .sds-login-cta > a:hover {
    background: var(--color-primary);
    color: #fff;
  }
}

.sds-login-cta > a:focus-visible {
  outline: 3px solid rgb(248 75 35 / 45%);
  outline-offset: 3px;
}

/* 入口が2つ（ログイン／ご利用申請）並ぶときの箱。
   同じ幅・同じ高さにそろえる。狭い画面では縦に積む（下の @media で a が width:100% になる）。 */
.sds-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.sds-cta-row > .sds-login-cta {
  flex: 1 1 18rem;
  max-width: 22rem;
  margin: 0;
  display: flex;
}
.sds-cta-row > .sds-login-cta > a {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}
/* .sds-request の中では「div は全部、枠付きの箱」というルールが効く（上の section.sds-request div）。
   入口を並べるための箱にはその見た目を付けない。 */
section.sds-request div.sds-cta-row {
  max-width: none;
  margin: var(--space-4) auto 0;
  padding: 0;
  background: transparent;
  border: 0;
  /* 🔴 文字の大きさを引き継ぐ（em の掛け算を止める）。
        これが無いと section.sds-request div の 2.2em がもう一度掛かり、
        中のボタンが 58px まで膨らんで枠からあふれる。 */
  font-size: inherit;
}
section.sds-request div.sds-cta-row::before { content: none; }
section.sds-request .sds-cta-row > .sds-login-cta { margin: 0; }

@media (max-width: 1024px) {
  /* 狭い画面では縦に積んで、横幅いっぱいにする（指で押しやすくするため）。
     🔴 a を width:100% にするだけでは積まれない。
        .sds-cta-row は flex の横並びで、flex-basis 18rem が効いて2つ並んだままになり、
        中身が入りきらず重なっていた（2026-09-14 に実機で発覚）。
        縦に積むことは前からの意図だったが、指定が足りていなかった。 */
  .sds-cta-row {
    flex-direction: column;
    align-items: center;
  }

  .sds-cta-row > .sds-login-cta {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  .sds-login-cta > a { display: flex; min-width: 0; width: 100%; }
}

.sds-doc .listTable {
  width: 100%;
  margin: var(--spacing-lg) auto;
  border-collapse: collapse;
  -webkit-box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.15);
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.15);
  background: var(--color-bg);
}

.sds-doc .listTable tr {
  border: var(--border-width-thin) solid #d7d7d7;
  border-width: var(--border-width-thin) 0;
}

.sds-doc .listTable th {
  color: #fff;
  background: var(--brand-gradient);
  background-origin: border-box;
  border-color: transparent;
  font-weight: 600;
}

.sds-doc .listTable th,
.sds-doc .listTable td {
  padding: 1.5rem 2rem;
  font-size: var(--font-size-sm);
  text-align: left;
}

.sds-doc .listTable th,
.sds-doc .listTable tr>td:nth-of-type(2),
.sds-doc .listTable tr>td:nth-of-type(3) {
  text-align: center;
}

.sds-doc .listTable tr>td:not(:first-of-type) {
  border-left: var(--border-width-thin) dashed #d7d7d7;
}

.sds-doc .listTable tr:nth-of-type(2n + 1) {
  background: #f8f8f8;
}

.sds-doc .listTable tr:hover {
  background: #f0f0f0;
}

.sds-doc .listTable a {
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition-fast);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.sds-doc .listTable a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.sds-doc .listTable .pdf-link .pdf-icon {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  background-image: url(https://www.c-roland.co.jp/img/csr/pdf.svg);
  background-size: contain;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  flex-shrink: 0;
}

.email::before {
  content: attr(data-domain) "@" attr(data-user);
  unicode-bidi: bidi-override;
  direction: rtl;
}

/* 申請案内ページの枠。.sds-doc の中に置く前提。
   🔴 先頭に来たときは上の余白を殺すこと。内側の枠のパディング（約116px）と
      この margin が重なって 200px の空きになり、一覧ページ（byroland）と揃わなくなる。 */
.sds-doc > .sds-request:first-child > div {
  margin-top: 0;
}

section.sds-request div {
  position: relative;
  max-width: 1080px;
  margin: var(--space-8) auto;
  padding: var(--space-8);
  background: var(--color-bg);
  border: var(--border-width-thin) solid #ccc;
  /* 🔴 ここに font-size を置かないこと。
        置くと、中の見出し（.sds-doc h2 の 3.5em）に掛け算されて、
        ページのほかの見出しの倍以上に膨らむ（2026-09-14 に実機で発覚）。
        文字の大きさは下の p（段落）に持たせる。 */
}

section.sds-request div::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  border: var(--border-width-thin) solid #ddd;
  -webkit-transform: rotate(-0.5deg);
  transform: rotate(-0.5deg);
}

section.sds-request div h1 {
  margin: 0 auto var(--space-4);
}

section.sds-request div p {
  margin: 1.5em auto;
  /* 箱の本文の大きさ。箱そのものではなく段落に持たせる（上のコメント参照） */
  font-size: var(--font-size-text);
}

section.sds-request div ul {
  margin: 0 0 0 5rem;
}

section.sds-request div ul li {
  margin: var(--spacing-xs) 0;
}

section.sds-request div .cta {
  font-size: var(--font-size-nm);
  text-align: center;
  margin: var(--space-4) auto;
  font-weight: 700;
}

/* SDS 一覧ページの「ログイン中の帯」（以前は _lib/ui.php のインライン CSS にあった。値は既存の変数のみ） */
.sds-session-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .6em 1.5em;
  margin-bottom: var(--space-4);
  padding: .9em 1.2em;
  font-size: var(--font-size-sm);
  background: var(--color-bg-light);
  border-left: var(--border-width-thick) solid var(--color-primary);
}
.sds-session-bar__who { font-weight: 700; }
.sds-session-bar__meta { color: var(--color-text-light); }
.sds-session-bar__meta strong { color: var(--color-primary); }
.sds-session-bar__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5em;
}

.sds-session-bar__nav [aria-current="page"] {
  color: var(--color-text-light);
}

.sds-session-bar a { color: var(--color-primary); }

/* --- 状態を表すチップ ----------------------------------------------------
   🔴 新しく設計したものではない。SDS 管理画面（admin/_shell.php）に前からある
      .badge と【同じ規則】をここへ写したもの。管理画面とお客様の画面で
      同じ見た目・同じ言い方にそろえるため。片方だけ変えないこと。
   🔴 色だけに頼らない。記号（✓ … × !）を data-mark で渡し、
      印刷したときや色の見分けがつきにくい方にも伝わるようにしている。
      記号は本文と同じ書体で出るものだけを選んである（2026-09-12 に描画幅を実測）。
      ◷ や ⟳ は別のフォントに落ちて並びが崩れるので使わない。 */
.badge {
  display: inline-block;
  padding: .15em .8em;
  /* 🔴 固定の変数を使わない。親の文字に対する割合で持つこと。
        --font-size-text などは狭い画面で値が切り替わり、402px でチップから文字がはみ出した。 */
  font-size: .85em;
  font-weight: 500;
  letter-spacing: .04em;
  border-radius: 999px;
  white-space: nowrap;
  border: var(--border-width-thin) solid;
  vertical-align: middle;
}

.badge::before {
  content: attr(data-mark);
  margin-right: .4em;
  font-weight: 700;
}

.badge--ok   { color: var(--state-ok);   border-color: var(--state-ok-line);   background: var(--state-ok-bg); }
.badge--warn { color: var(--state-warn); border-color: var(--state-warn-line); background: var(--state-warn-bg); }
.badge--stop { color: var(--state-stop); border-color: var(--state-stop-line); background: var(--state-stop-bg); }
.badge--off  { color: var(--state-off);  border-color: var(--state-off-line);  background: var(--state-off-bg); }
.badge + .badge { margin-left: .3em; }

/* チップの下に添える一言（「通常1〜3営業日以内」「お電話ください」など）。
   新しい色は使わず、既存の薄い文字色のみ。 */
.sds-doc .listTable .badge-note {
  display: block;
  margin-top: .5em;
  font-size: .8em;
  color: var(--color-text-mid);
  line-height: var(--line-height-tight);
}

/* ブランド名の読み仮名。index.php と home.php で使っているのに、
   ここ（.sds-doc の中）では何も当たっていなかった。 */
/* 折り返させたくないセル（日付など）。狭い画面で1文字ずつ折り返すのを防ぐ */
.sds-doc .listTable td.nowrap { white-space: nowrap; }

.sds-doc .reading {
  font-size: .85em;
  color: var(--color-text-mid);
}

/* ==========================================================================
   ローランドファーム（roland-farm）専用 - csr/index.php を参考にデザイン
   単体移行時はこのブロックを roland-farm.css に切り出して読み込む
   ========================================================================== */

.roland-farm-page .roland-farm-container {
  margin: 0 auto;
}

.roland-farm-page .roland-farm-content-wrapper {
  padding: var(--padding-block-xl-sec);
  margin: 0 auto;
}

/* イントロ（画像多め） */
.roland-farm-page .rf-intro-section {
  margin-bottom: var(--space-8);
}

.roland-farm-page .rf-intro-visual {
  text-align: center;
  padding: var(--padding-block-xl-four);
}

.roland-farm-page .rf-intro-visual .rf-intro-main-img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

.roland-farm-page .rf-intro-visual .rf-intro-text-img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  border-radius: var(--border-radius);
}

.roland-farm-page .rf-intro-grid {
  align-items: center;
  margin-bottom: var(--space-4);
}

.roland-farm-page .rf-intro-image {
  width: 100%;
}

.roland-farm-page .rf-intro-image img {
  width: 100%;
  max-width: 18rem;
  height: auto;
  border-radius: var(--border-radius);
  object-fit: contain;
  display: block;
}

.roland-farm-page .rf-intro-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-2);
}

.roland-farm-page .rf-intro-icons img {
  width: 100%;
  max-width: 8rem;
  height: auto;
  object-fit: contain;
}

.roland-farm-page .rf-intro-content h2 {
  font-size: var(--font-size-display);
  font-weight: 500;
  margin-bottom: var(--space-2);

  line-height: var(--line-height-secondary);
}

.roland-farm-page .rf-intro-content p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  margin-bottom: var(--space-2);
}

.roland-farm-page .rf-intro-content p:last-child {
  margin-bottom: 0;
}

/* セクション（縦並び1カラム・見やすく） */
.roland-farm-page .rf-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.roland-farm-page .rf-section-block {
  width: 100%;
  padding: var(--space-4) 0;
}

.roland-farm-page .rf-section-block:last-child {
  border-bottom: 0;
}

.roland-farm-page .rf-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.roland-farm-page .rf-section-header-img {
  flex-shrink: 0;
}

.roland-farm-page .rf-section-header-img img {
  width: 4rem;
  height: auto;
  max-height: 4rem;
  object-fit: contain;
  display: block;
}

.roland-farm-page .rf-section-header-text .rf-section-card-title {
  font-size: var(--font-size-sm);
  font-family: var(--font-family-oswald);
  letter-spacing: var(--letter-spacing-tertiary);
  line-height: var(--line-height-primary);
  font-weight: 500;
  text-transform: uppercase;
  margin: 0 0 var(--space-1);
}

.roland-farm-page .rf-section-header-text h3 {
  font-size: var(--font-size-title);
  font-weight: 600;
  margin: 0;

  line-height: var(--line-height-secondary);
}

.roland-farm-page .rf-section-body .rf-section-lead {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  margin-bottom: var(--space-3);
}

.roland-farm-page .rf-section-card-link {
  margin-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.roland-farm-page .rf-section-card-link:hover {
  opacity: 0.85;
}

.roland-farm-page .rf-section-card-link span:last-child {
  font-size: var(--font-size-sm);
}

/* 栽培リスト・ポイント・品種カード・会社概要・アクセス */
.roland-farm-page .rf-crop-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--space-2_8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.roland-farm-page .rf-crop-list li {
  flex: 1 1 calc(33.33333% - var(--space-2_8));
  padding: var(--space-2);
  background: var(--color-bg-light);
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);

}

/* さつまいも作り：県別生産量・TOP4・出典 */
.roland-farm-page .rf-ranking-block {
  display: flex;
  flex-wrap: wrap;
  justify-content: stretch;
  align-items: center;
  gap: var(--space-2_8);
  margin: var(--space-4) 0;
}

.roland-farm-page .rf-ranking-block>div {
  flex: 1 1 calc(50% - var(--space-2_8));
}

.roland-farm-page .rf-graph-wrap {}

.roland-farm-page .rf-graph-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--border-radius);
  margin: var(--space-2_8) auto;
  padding: var(--space-2_8) var(--space-6);
}

.roland-farm-page .rf-top4 {
  padding: var(--space-2_8);
  background: var(--color-bg-light);
  border-radius: var(--border-radius);
  border: var(--border-width-thin) solid var(--border-color-muted);
}

.roland-farm-page .rf-top4-ttl {
  font-size: var(--font-size-subtitle);
  font-weight: 600;
  margin: 0 0 var(--space-1);

}

.roland-farm-page .rf-top4-list {
  list-style: none;
  margin: 0 0 var(--space-1);
  padding: 0;
  font-size: var(--font-size-sm);
}

.roland-farm-page .rf-top4-list li {
  padding: var(--spacing-xs) 0;
}

/* ③ 出典の表記。0.9em は「親の0.9倍」なので、親が 5.25px のスマホ幅では
   実測【4.7px】になり読めなかった。サイト共通の
   「本文より一段小さい」トークンに置き換える（約11px以上になる）。 */
.roland-farm-page .rf-top4-source {
  margin: 0;
  font-size: var(--font-size-text);
}

/* さつまいも作り：栽培へのこだわり・さつまいもの種類（サブセクション） */
.roland-farm-page .rf-subsection {
  margin-top: var(--space-6);
}

.roland-farm-page .rf-subsection-title {
  font-size: var(--font-size-subtitle);
  font-weight: 600;
  margin: 0 0 var(--space-2);

}

.roland-farm-page .rf-point-bg-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2_8);
  align-items: center;
  margin: var(--space-3) 0 var(--space-4);
  padding: var(--space-3);
  background: var(--color-bg-light);
  border-radius: var(--border-radius);
}

.roland-farm-page .rf-point-bg-img {
  width: 100%;
  overflow: hidden;
  border-radius: var(--border-radius);
}

.roland-farm-page .rf-point-bg-img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.roland-farm-page .rf-point-bg-text {
}

.roland-farm-page .rf-point-bg-text p {
  font-size: var(--font-size-sm);
  margin: 0;
}

.roland-farm-page .rf-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-3);
  padding: var(--space-4) 0;
}

.roland-farm-page .rf-point {
  padding: var(--space-2_8);
  background: var(--color-bg-light);
  border-radius: var(--border-radius);
}

.roland-farm-page .rf-point-title {
  font-size: var(--font-size-subtitle);
  margin: 0 0 var(--space-1);

}

.roland-farm-page .rf-point p {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-primary);
}

.roland-farm-page .rf-varieties {
  margin-top: var(--space-4);
}

.roland-farm-page .rf-subtitle {
  font-size: var(--font-size-subtitle);
  margin: 0 0 var(--space-2);

}

/* さつまいも品種カード（group-card デザイン流用・画像付き） */
.roland-farm-page .rf-variety-cards {
  margin-top: var(--space-2);
}

/* カード全体のホバーはなし（ボタンのみホバー） */
.roland-farm-page .group-card:hover {
  box-shadow: var(--shadow-md);
}

.roland-farm-page .group-card-img-wrap {
  width: 100%;
  margin-bottom: var(--space-2_8);
  overflow: hidden;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.roland-farm-page .group-card-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.roland-farm-page .overview-table {
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.roland-farm-page .overview-table th,
.roland-farm-page .overview-table td {
  padding: var(--space-1_5) var(--space-2);
  border-bottom: var(--border-width-thin) solid var(--border-color-muted);
  text-align: left;
}

.roland-farm-page .overview-table th {
  width: 8rem;
  font-weight: 500;
}

.roland-farm-page .overview-table td {}

.roland-farm-page .rf-address {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);

}

.roland-farm-page .rf-map-wrap {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  border-radius: var(--border-radius);
  border: var(--border-width-thin) solid var(--border-color-muted);
}

.roland-farm-page .rf-map-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* レスポンシブ対応 */
@media (min-width: 1025px) and (max-width: 1450px) {
  .category .mv01 .slide-media {
    height: 590px;
  }

  .category .mv01 .slide-title {
    font-size: 4rem;
    line-height: 1.6;
    right: 5rem;
    bottom: 15%;
    margin-left: 16rem;
  }

  .category .mv01 .swiper-pagination {
    left: 2.2rem;
  }

  .category .mv01 .swiper-pagination-bullet {
    width: 3px;
    height: 3rem;
  }
}

@media (max-width: 1024px) {
  .access-pin-heading__marker {
    width: 2.7rem;
    height: 3.3rem;
  }

  .access-pin-heading__marker::before {
    width: 2.7rem;
    height: 2.7rem;
    margin-left: -1.35rem;
  }

  .access-pin-heading__marker::after {
    top: 0.82rem;
    width: 0.9rem;
    height: 0.9rem;
    margin-left: -0.45rem;
  }

  .home-icon {
    width: 3.8rem;
    height: 3.8rem;
  }

  /* TOP hero の背景画像は media-grid（タイル）へ移行したため廃止（hero-bg*.webp は未使用） */

  /* #about は i-ne 風再設計で背景画像レイヤー廃止 */

  /* パディングの調整 */
  .oem .container,
  .sustainability .container,
  .company .container,
  .recruit .container {
    /* 🔴 縦の余白は【画面の高さ】に対する割合で上限をかける。
       rem は画面幅連動（この幅では 1.4vw）なので、19rem だけだと
       上下の余白が【画面幅の 26.6%】になり、幅が広く高さの低い
       タブレット横向きで異常に膨らむ。
       実測: 1024px 幅で上下 272px（画面高の30%）、
       セクション自体が 1725〜2794px になっていた。
       lvh を使うこと（dvh は iOS のバー伸縮で値が変わりリフローする）。 */
    padding: min(19rem, 12lvh) 3rem;
  }

  .blandlist .container {
    padding: 0 3rem min(19rem, 12lvh);
  }

  .company .container {
    padding: min(19rem, 12lvh) 3rem 0;
  }

  .links {
    padding: 0 3rem;
  }

  .breadcrumb {}

  .breadcrumb-container {
    padding: var(--space-3) 0 var(--space-7);
  }

  .page-header {}

  .page-hero {
    padding: 6rem 4rem 5rem;
  }

  .page-title {
    font-size: 4.5em;
  }

  .section-title {
    margin-bottom: 4rem;
  }

  .company-greeting,
  .company-business,
  .company-features,
  .company-name,
  .company-history,
  .company-group,
  .other-page .contact-content-wrapper,
  .policy-container {
    padding: 6rem 3rem;
  }


  .contact-container {
    padding: 6rem 0;
  }

  .company-overview,
  .access-section {
    padding: 0 3rem;
  }

  .greeting-wrapper {
    flex-direction: column;
    gap: 4rem;
  }

  .greeting-image {
    flex: 1;
  }

  .greeting-subtitle {
    font-size: 2.2em;
  }

  .business-item,
  .feature-item {
    flex-direction: column;
  }

  .business-item-reverse,
  .feature-item-reverse {
    flex-direction: column;
  }

  .business-item-image,
  .feature-item-image {
    flex: 1;
  }

  .business-item-image img,
  .feature-item-image img {
    border-radius: 20px 20px 0 0;
    min-height: 300px;
  }

  .business-item-reverse .business-item-image img,
  .feature-item-reverse .feature-item-image img {
    border-radius: 20px 20px 0 0;
  }

  .business-items,
  .features-items {
    gap: 3rem;
  }

  .philosophy-values {
    flex-direction: column;
  }

  .name-content {
    gap: 4rem;
  }

  .company-overview-bg::before {
    background-image: url('../images/company-bg-1024.webp');
  }

  .company-name-large {
    font-size: 3.2em;
  }

  .company-menu .link-boxes-row--2col,
  .company-menu .link-boxes-row--3col {
    flex-direction: column;
  }

  .company-menu .link-boxes-row--3col .link-box,
  .company-menu .link-boxes-row--2col .link-box,
  .company-menu .link-box {
    width: 100%;
  }

  .company-menu .link-name {
    padding-right: 9.5rem;
  }

  .company-menu .link-name::before {
    width: 7rem;
    height: 7rem;
  }

  .company-menu .link-name::after {
    right: 3.15rem;
    width: .9rem;
    height: .9rem;
  }

  /* 共通パーツ（ヘッダー・ナビ・言語・ハンバーガー）は common.css に移行済み */

  /* 以下は style.css の 1024px 用ページ固有スタイル */

  .hero-parallax>div {
    padding: 0 5rem;
  }

  /* OEMセクションの調整
     height:100% は親に確定した高さが無いと解釈がブレ、ScrollTrigger の start/end と実レイアウトがずれてパララックスがカクつく。
     最小高さはビューポート基準（dvh）に固定し、中身が溢れたら auto で伸ばす。 */
  /*.oem,*/
  .sustainability,
  /*.company,*/
  .recruit
  /*.blandlist*/ {
    min-height: 100lvh; /* dvh はバー伸縮でリフローするため lvh */
    height: auto;
  }

  .oem .container,
  .sustainability .container,
  .company .container,
  .recruit .container,
  .blandlist .container {
    flex-direction: column;
  }

  .access-block__flex {
    flex-direction: column;
    align-items: flex-start;
  }

  .access-block__image {
    width: 100%;
    order: -1;
  }

  .oem-image {
    order: 1;
    width: 100%;
  }

  .oem-text,
  .sustainability-text,
  .company-text,
  .recruit-text,
  .blandlist-text {
    order: 2;
    padding-top: var(--space-6);
  }

  .oem-text h2,
  .sustainability-text h,
  .company-text h2,
  .recruit-text h2 {}

  .sustainability-image,
  .company-image,
  .recruit-image {
    width: 100%;
  }

  .recruit-intro {
    padding-top: var(--space-6);
  }

  .recruit-link-item {
    flex-wrap: wrap;
  }

  .recruit-link-content:first-of-type {
    width: 100%;
    flex: auto;
    padding-right: 0;
    margin-bottom: 2rem;
  }

  .recruit-section h2 {
    margin-bottom: 4rem;
  }

  .recruit-link-arrow,
  .policy-item-arrow {
    width: 7rem;
    height: 7rem;
    padding-right: 9.5rem;
  }

  .recruit-link-arrow::before,
  .policy-item-arrow::before {
    width: 7rem;
    height: 7rem;
  }

  .recruit-link-arrow::after,
  .policy-item-arrow::after {
    right: 3.15rem;
    width: .9rem;
    height: .9rem;
  }

  .blandlist-image {
    width: 100%;
  }

  .brand-item {
    width: calc((100% - var(--space-2_8) * 1) / 2);
  }

  /*.company-philosophy .container {
    padding: var(--space-6) 0;
  }*/
  .company-philosophy {
    padding: 0 3rem;
  }

  .philosophy-item-junrisokuyu {
    padding: var(--padding-block-xl-four);
  }

  .access-grid {}

  .sdgs-philosophy-text {
    margin-bottom: var(--space-1_5);
  }

  /* タイトル本体を flex に切り替え、番号(::before)とテキストを縦中央揃え */
  .sdgs-initiative-title {
    display: flex;
    align-items: center;
    padding-left: 0;
    gap: 1rem;
  }

  .sdgs-initiative-title::before {
    position: static;
    transform: none;
    top: auto;
    font-size: var(--font-size-text);
  }

  /* ===== Lenis仮想スクロールバーのスタイル ===== */
  .lenis {
    position: relative;
  }

  .lenis__scrollbar {
    z-index: 9999;
  }

  /* ニュースの調整 */
  .links .page-header h1 {
    font-size: 4em;
  }

  .links .news-button,
  .company-menu .news-button {
    margin-top: 12em;
  }

  .swiper-button-prev,
  .swiper-button-next {
    font-size: 2em !important;
  }

  .contact-hero {
    padding: 8rem 2rem 4rem;
  }

  .company-menu .link-box {
    width: 100%;
    margin-right: 0 !important;
  }

  .contact-hero-title {}

  .contact-hero-subtitle {
    font-size: var(--font-size-sm);
  }

  .contact-content-wrapper {
    display: block;
  }

  .contact-form-section {
    width: 100%;
  }

  .contact-form-wrapper {}

  .contact-form-note {}

  .contact-form {}

  .form__inputArea input,
  .form__inputArea select,
  .form__inputArea label,
  .form__inputArea textarea {
    padding: 1.2rem 1.5rem;
    font-size: var(--font-size-text);
  }

  .form__block {
    grid-template-columns: none;
  }

  .form__inputArea textarea {
    min-height: 150px;
  }

  .reqdMark,
  .form__reqdMark {
    font-size: var(--font-size-mi);
    padding: 0.5rem 1.5rem;
  }

  .form-checkbox-label {
    font-size: var(--font-size-text);
  }

  .form-checkbox {
    width: 1.8rem;
    height: 1.8rem;
  }

  .formBtns__wrap {
    width: 33.33%;
  }

  .formBtns__btn {
    padding: 1.5rem 3rem;
    font-size: var(--font-size-sm);
    width: 100%;
    justify-content: center;
  }

  .contact-hero-title-jp {
    font-size: 0.6em;
  }

  .contact-section-title {}

  .contact-privacy {
    margin-bottom: 4rem;
  }

  .contact-notice {
    padding: 2rem;
  }

  .contact-form-buttons {
    gap: 1.5rem;
  }

  .contact-form-button {
    padding: 1.5rem 3rem;
    font-size: var(--font-size-text);
  }

  .contact-other-section {
    width: 100%;
    margin-top: var(--space-3);
  }

  .contact-faq-content {
    margin-top: 2rem;
  }

  .contact-faq-category {
    margin-bottom: 3rem;
  }

  .contact-faq-category-title {}

  .contact-faq-item {}

  .contact-faq-q,
  .contact-faq-a {
    width: 3.75rem;
    height: 3.75rem;
  }

  .contact-faq-q {
    margin-top: .75rem;
  }

  .contact-faq-a {
    margin-top: 1rem;
  }

  .roland-farm-page .roland-farm-content-wrapper {
    padding: var(--space-6) var(--space-2) var(--space-8);
  }

  .roland-farm-page .rf-intro-visual .rf-intro-main-img {
    max-width: 14rem;
  }

  .roland-farm-page .rf-intro-visual .rf-intro-text-img {
    max-width: 18rem;
  }

  .roland-farm-page .rf-intro-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .roland-farm-page .rf-intro-image {
    order: -1;
  }

  .roland-farm-page .rf-intro-image img {
    max-width: 12rem;
    margin: 0 auto;
  }

  .roland-farm-page .rf-intro-icons img {
    max-width: 6rem;
  }

  .roland-farm-page .rf-intro-content h2 {
    font-size: var(--font-size-lead);
  }

  .roland-farm-page .rf-section-header {
    flex-wrap: wrap;
  }

  .roland-farm-page .rf-sections {
    gap: var(--space-6);
  }

  .roland-farm-page .rf-points {
    grid-template-columns: 1fr;
  }

  .roland-farm-page .group-card-img-wrap {
    margin: calc(var(--space-2) * -1) calc(var(--space-1_5) * -1) var(--space-1_5);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
  }

  .roland-farm-page .rf-point-bg-wrap {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-2);
  }

  .roland-farm-page .rf-point-bg-img {
    order: -1;
  }

  .roland-farm-page .rf-point-bg-text {
    padding: 0;
  }

  .oem-button {
    margin-top: 3em;
  }

  .philosophy-item-wrapper {
    flex-direction: column;
  }

  .philosophy-item-content {
    padding: var(--space-3_4) 0;
  }

  .group-list {
    flex-direction: column;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .category .mv01 .slide-media {
    height: 400px;
  }

  .category .mv01 .slide-title {
    font-size: 3rem;
    line-height: 1.5;
    right: 4rem;
    bottom: 15%;
    margin-left: 16rem;
  }

  .category .mv01 .swiper-pagination {
    left: 2.2rem;
  }

  .category .mv01 .swiper-pagination-bullet {
    width: 3px;
    height: 3rem;
  }
}

@media (max-width: 768px) {
  .category .mv01 {
    margin-bottom: 0;
  }

  .category .mv01 .slide-media {
    /* 🔴 dvh 禁止（iOS のバー伸縮でリフロー）。実際には 61vw が常に勝つが、
       紛らわしいので単位を揃える。 */
    height: max(10lvh, 61vw);
  }

  .category .mv01 .slide-title {
    font-size: 2.6rem;
    line-height: 1.5;
    right: 1.6rem;
    bottom: 14%;
    margin-left: 6rem;
  }

  .category .mv01 .swiper-pagination {
    left: 1.2rem;
  }

  .category .mv01 .swiper-pagination-bullet {
    width: 3px;
    height: 6vw;
  }

  /* スマホでのナビゲーションスクロール強化 - フリック・スライド対応 */
  .nav-scroll-container {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
    overscroll-behavior-x: none !important;
    scroll-behavior: smooth !important;
  }

  /* スマホ用のスクロールバーのスタイル */
  .nav-scroll-container::-webkit-scrollbar {
    width: 4px !important;
  }

  .nav-scroll-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05) !important;
    border-radius: 2px !important;
  }

  .nav-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 2px !important;
    transition: background 0.2s ease !important;
  }

  .nav-scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4) !important;
  }

  /* ナビゲーション内の要素のタッチ操作を有効化 */
  .nav-scroll-container * {
    pointer-events: auto !important;
    touch-action: pan-y !important;
  }

  /* Productsページのレスポンシブ（パンくず・ヒーローは .page-header に統一済み） */
  .products-list .container {
    padding: 5rem 3rem;
  }

  .page-hero {
    padding: 5rem 3rem 4rem;
  }

  .page-title {
    font-size: 3.5em;
  }

  .greeting-subtitle {
    font-size: 2em;
  }

  .name-content {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .name-logo-inner {
    padding: 2.5rem;
  }

  .company-name-large {
    font-size: var(--font-size-lead-lg);
  }

  .business-items,
  .features-items {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .history__year {
  }

  .history__month {
  }

  .history__event {
  }

  .group-card-inner {}

  .group-card-title {
    font-size: var(--font-size-lead);
  }

  .business-diagram {
    padding: 2.5rem;
  }

  .business-item-image,
  .feature-item-image {
    flex: 1;
  }

  .business-item-image img,
  .feature-item-image img {
    border-radius: 20px 20px 0 0;
    min-height: 250px;
  }

  .business-item-reverse .business-item-image img,
  .feature-item-reverse .feature-item-image img {
    border-radius: 20px 20px 0 0;
  }

  .business-item-content,
  .feature-item-content {
    padding: 2.5rem;
  }

  .business-items,
  .features-items {
    gap: 2.5rem;
  }

  .business-diagram {
    padding: 2rem;
    margin-top: 3rem;
  }

  .greeting-wrapper {
    flex-direction: column;
    gap: 3rem;
  }

  .greeting-image {
    flex: 1;
  }

  .business-item,
  .feature-item {
    flex-direction: column;
  }

  .business-item-reverse,
  .feature-item-reverse {
    flex-direction: column;
  }

  .business-item-image,
  .feature-item-image {
    flex: 1;
  }

  .business-item-image img,
  .feature-item-image img {
    border-radius: 20px 20px 0 0;
    min-height: 200px;
  }

  .business-item-reverse .business-item-image img,
  .feature-item-reverse .feature-item-image img {
    border-radius: 20px 20px 0 0;
  }

  .business-item-content,
  .feature-item-content {
    padding: 2rem;
  }

  .sds-doc .listTable th,
  .sds-doc .listTable td {
    padding: 1rem 1.5rem;
    font-size: var(--font-size-text);
  }
}

@media (max-width: 599px) {
  .category .mv01 .slide-title {
    font-size: 2.2rem;
    right: 1.6rem;
    bottom: 13%;
    margin-left: 6rem;
  }
}

@media (max-width: 480px) {
  /* モバイル向け */
  /* より小さなスマートフォン向けの追加スタイル */

}

/*
 * iOS（WebKit）: 背景パララックス
 * - background-attachment: fixed は iOS で不安定／非表示になりやすいため scroll に統一
 * - position: fixed の擬似要素 + clip-path は新しい WebKit で背景が消える事例があるため使わない。
 *   ベースの absolute + inset:0 をそのまま使い、--parallax-bg-pos-y（GSAP）で縦位置だけ連動させる。
 */
@supports (-webkit-touch-callout: none) {

  .hero-parallax::before,
  .parallax-bg,
  .parallax-bg::before {
    background-attachment: scroll;
  }

  /*.oem,*/
  .sustainability,
  /*.blandlist,
  .company,*/
  .recruit {
    min-height: 100lvh; /* dvh はバー伸縮でリフローするため lvh */
    height: auto;
  }

  .parallax-bg,
  .parallax-bg::before,
  .company-greeting-bg::before,
  .company-features-bg::before,
  .company-philosophy-bg::before,
  .company-overview-bg::before {
    -webkit-background-position-x: 50%;
    -webkit-background-position-y: var(--parallax-bg-pos-y, 0%);
    background-position-x: 50%;
    background-position-y: var(--parallax-bg-pos-y, 0%);
  }
}

/* ==========================================================================
   採用ページ：ファーストビュー（I-ne 採用トップ参考／全面コラージュ背景＋コピー重ね＋Information）
   参考: https://i-ne.co.jp/recruit/
   ========================================================================== */

.recruit-page .recruit-fv--ine {
  position: relative;
  min-height: 100lvh; /* dvh は iOS のバー伸縮で値が変わり、セクションが伸び縮みして ScrollTrigger の位置が古くなるため lvh */
  /* scale(1.8) のクリップを避けるため軸別指定（横は body 溢れ抑制、縦は scale 表示のため visible） */
  overflow-x: hidden;
  overflow-y: visible;
  /* コラージュを背景レイヤーとして使用 */
  background: transparent;
  color: #111;
  isolation: isolate;
}

.recruit-page .recruit-fv__shell {
  position: relative;
  z-index: 0;
  margin: 0 auto;
  width: 100%;
  min-height: 100lvh; /* dvh は iOS のバー伸縮で値が変わり、セクションが伸び縮みして ScrollTrigger の位置が古くなるため lvh */
  padding: var(--padding-block-xl);
  display: block;
}

.recruit-page .recruit-fv__column--copy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.recruit-page .recruit-fv__title {
  font-family: var(--font-family-nm-mincho), "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  font-weight: 600;
  font-size: var(--font-size-display);
  color: var(--color-bg);
}

.recruit-page .recruit-fv__title-line {
  display: block;
  line-height: normal;
}

.recruit-page .recruit-fv__information {
  margin: 0;
  padding: 0;
  max-width: 38rem;
}

.recruit-page .recruit-fv__information-label {
  margin: 0 0 0.65rem;
  padding: 0 0 0.5rem;
  border-bottom: 1px solid #111;
  font-family: var(--font-family-oswald);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
}

.recruit-page .recruit-fv__information-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.recruit-page .recruit-fv__information-list li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.recruit-page .recruit-fv__information-link {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1rem 1.25rem;
  align-items: baseline;
  padding: 0.85rem 0;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .recruit-page .recruit-fv__information-link:hover {
    opacity: 0.65;
  }
}

.recruit-page .recruit-fv__information-date {
  font-family: var(--font-family-oswald);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #333;
}

.recruit-page .recruit-fv__information-text {
  font-size: 0.875rem;
  line-height: 1.65;
  color: #222;
}

.recruit-page .recruit-fv__column--media {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: 100vw;
  max-width: none;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  pointer-events: none;
  /* 🔴 overflow は【必ず両方】書くこと。
     CSS の仕様で、片方が hidden でもう片方が visible の場合、
     visible は auto に計算される。以前は overflow-y だけ書いていたため
     overflow-x が auto になり、中のコラージュが scale(1.8) で拡大されたときに
     【この要素自身に横スクロールバーが出ていた】。
     実測: y=900 で中身 2239px / 表示 1600px = 639px のはみ出し。
     この要素は FV 全体を覚うため、バーは画像の一番下に出る。 */
  overflow-x: hidden;
  overflow-y: hidden;
}

/* 🔴 着地で 2×2 をぴったり出すための土台。
   拡大（scale）では 2×2 にできない：拡大率 S で見えるのは
   【横 列数/S・縦 行数/S】なので、2×2 には 列数=行数 が必要。
   ここは 4列×3行 のままにしたいので、scale ではなく
   【幅と高さを伸ばす】方式にする（幅200% 高さ150% → 1マスが画面の半分）。
   画像は object-fit: cover なので、マスが伸びても変形せず切り直される。
   中心基準で伸ばすため left/top 50% + transform で置く（初期値は JS で set）。 */
.recruit-page .recruit-fv__collage {
  position: absolute;
  /* 🔴 transform ではなく left/right:0 + margin-inline:auto で中央寄せにする。
     GSAP の xPercent/yPercent は他のトゥイーンや refresh で上書きされ得るため、
     位置を transform に任せない。実際、以前は xPercent が消えて横がずれた。
     ・幅が 200% に伸びても margin:auto のおかげで中央のまま → 2列目・3列目 が見える
     ・高さは top:0 基準で下へ伸びる → 1行目・2行目 が見える */
  top: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 0;
  pointer-events: none;
  /* 🔴 着地時の大きさ。マス1つが画面の半分になれば 2×2 がぴったり収まる。
        幅 = 列数 × 50%、高さ = 行数 × 50%。ここは 4列×3行 なので 200% / 150%。
     【値は必ずグリッドの列数・行数と揃えること】。
        グリッドを変えたらこの2行も必ず直す。JS はこの変数を読むだけ。 */
  --collage-land-w: 200%;
  --collage-land-h: 150%;
  /*
   * 4列×3行のセル座標（列・行はいずれも 1 始まり）。
   * 画像の表示位置を入れ替えるときは、下の a〜l の --collage-*-col / --collage-*-row の数値だけ入れ替える。
   * 既定は読み順: 1行目 a b c d / 2行目 e f g h / 3行目 i j k l
   */
  --collage-a-col: 1;
  --collage-a-row: 1;
  --collage-b-col: 2;
  --collage-b-row: 1;
  --collage-c-col: 3;
  --collage-c-row: 1;
  --collage-d-col: 4;
  --collage-d-row: 1;
  --collage-e-col: 1;
  --collage-e-row: 2;
  --collage-f-col: 2;
  --collage-f-row: 2;
  --collage-g-col: 3;
  --collage-g-row: 2;
  --collage-h-col: 4;
  --collage-h-row: 2;
  --collage-i-col: 1;
  --collage-i-row: 3;
  --collage-j-col: 2;
  --collage-j-row: 3;
  --collage-k-col: 3;
  --collage-k-row: 3;
  --collage-l-col: 4;
  --collage-l-row: 3;
  --recruit-fv-overlay-alpha: 0.35;
}

.recruit-page .recruit-fv__collage::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 黒い半透明のレイヤー */
  background-color: rgba(0, 0, 0, var(--recruit-fv-overlay-alpha, 0.35));
  z-index: 1;
  /* 画像より上に表示 */
}

.recruit-page .recruit-fv__photo {
  margin: 0;
  min-height: 0;
  overflow: hidden;
  background: #f4f4f4;
  border-radius: 0;
  pointer-events: auto;
}

.recruit-page .recruit-fv__photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* page-cover 後：オープニング（data-fv-intro 1〜5・--fv-intro-delay は script.js が付与）※種類ごと振幅を分けて差をはっきり */
.recruit-page .recruit-fv__collage:not(.recruit-fv__collage--intro-done):not(.recruit-fv__collage--intro-run) .recruit-fv__photo img {
  transform: scale(1.18);
  transform-origin: center center;
}

.recruit-page .recruit-fv__collage:not(.recruit-fv__collage--intro-done):not(.recruit-fv__collage--intro-run) .recruit-fv__photo[data-fv-intro="1"] img {
  transform: scale(1.22);
  transform-origin: center center;
}

.recruit-page .recruit-fv__collage:not(.recruit-fv__collage--intro-done):not(.recruit-fv__collage--intro-run) .recruit-fv__photo[data-fv-intro="2"] img {
  transform: translateY(5.5%) scale(1.18);
  transform-origin: center center;
}

.recruit-page .recruit-fv__collage:not(.recruit-fv__collage--intro-done):not(.recruit-fv__collage--intro-run) .recruit-fv__photo[data-fv-intro="3"] img {
  transform: translateX(-6.5%) scale(1.16);
  transform-origin: center center;
}

.recruit-page .recruit-fv__collage:not(.recruit-fv__collage--intro-done):not(.recruit-fv__collage--intro-run) .recruit-fv__photo[data-fv-intro="4"] img {
  transform: scale(1.24);
  transform-origin: 88% 18%;
}

.recruit-page .recruit-fv__collage:not(.recruit-fv__collage--intro-done):not(.recruit-fv__collage--intro-run) .recruit-fv__photo[data-fv-intro="5"] img {
  opacity: 0.5;
  transform: scale(1.14);
  transform-origin: center center;
}

.recruit-page .recruit-fv__collage--intro-run .recruit-fv__photo[data-fv-intro="1"] img {
  animation: recruitFvIntro1 2.35s cubic-bezier(0.22, 1, 0.36, 1) var(--fv-intro-delay, 0s) forwards;
}

.recruit-page .recruit-fv__collage--intro-run .recruit-fv__photo[data-fv-intro="2"] img {
  animation: recruitFvIntro2 2.35s cubic-bezier(0.22, 1, 0.36, 1) var(--fv-intro-delay, 0s) forwards;
}

.recruit-page .recruit-fv__collage--intro-run .recruit-fv__photo[data-fv-intro="3"] img {
  animation: recruitFvIntro3 2.35s cubic-bezier(0.22, 1, 0.36, 1) var(--fv-intro-delay, 0s) forwards;
}

.recruit-page .recruit-fv__collage--intro-run .recruit-fv__photo[data-fv-intro="4"] img {
  transform-origin: 88% 18%;
  animation: recruitFvIntro4 2.35s cubic-bezier(0.22, 1, 0.36, 1) var(--fv-intro-delay, 0s) forwards;
}

.recruit-page .recruit-fv__collage--intro-run .recruit-fv__photo[data-fv-intro="5"] img {
  animation: recruitFvIntro5 2.35s cubic-bezier(0.22, 1, 0.36, 1) var(--fv-intro-delay, 0s) forwards;
}

.recruit-page .recruit-fv__collage--intro-done .recruit-fv__photo img {
  transform: scale(1);
  transform-origin: center center;
  opacity: 1;
}

@keyframes recruitFvIntro1 {
  from {
    transform: scale(1.22);
  }

  to {
    transform: scale(1);
  }
}

@keyframes recruitFvIntro2 {
  from {
    transform: translateY(5.5%) scale(1.18);
  }

  to {
    transform: translateY(0) scale(1);
  }
}

@keyframes recruitFvIntro3 {
  from {
    transform: translateX(-6.5%) scale(1.16);
  }

  to {
    transform: translateX(0) scale(1);
  }
}

@keyframes recruitFvIntro4 {
  from {
    transform: scale(1.24);
  }

  to {
    transform: scale(1);
  }
}

@keyframes recruitFvIntro5 {
  from {
    opacity: 0.5;
    transform: scale(1.14);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.recruit-page .recruit-fv__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (hover: hover) and (pointer: fine) {
  .recruit-page .recruit-fv__collage--intro-done .recruit-fv__photo img {
    transition: transform 1.3s cubic-bezier(0.33, 1, 0.68, 1);
  }

  .recruit-page .recruit-fv__collage--intro-done .recruit-fv__photo:hover img {
    transform: scale(1.1);
  }
}

.recruit-page .recruit-fv__photo--a {
  grid-column: var(--collage-a-col) / span 1;
  grid-row: var(--collage-a-row) / span 1;
}

.recruit-page .recruit-fv__photo--b {
  grid-column: var(--collage-b-col) / span 1;
  grid-row: var(--collage-b-row) / span 1;
}

.recruit-page .recruit-fv__photo--c {
  grid-column: var(--collage-c-col) / span 1;
  grid-row: var(--collage-c-row) / span 1;
}

.recruit-page .recruit-fv__photo--d {
  grid-column: var(--collage-d-col) / span 1;
  grid-row: var(--collage-d-row) / span 1;
}

.recruit-page .recruit-fv__photo--e {
  grid-column: var(--collage-e-col) / span 1;
  grid-row: var(--collage-e-row) / span 1;
}

.recruit-page .recruit-fv__photo--f {
  grid-column: var(--collage-f-col) / span 1;
  grid-row: var(--collage-f-row) / span 1;
}

.recruit-page .recruit-fv__photo--g {
  grid-column: var(--collage-g-col) / span 1;
  grid-row: var(--collage-g-row) / span 1;
}

.recruit-page .recruit-fv__photo--h {
  grid-column: var(--collage-h-col) / span 1;
  grid-row: var(--collage-h-row) / span 1;
}

.recruit-page .recruit-fv__photo--i {
  grid-column: var(--collage-i-col) / span 1;
  grid-row: var(--collage-i-row) / span 1;
}

.recruit-page .recruit-fv__photo--j {
  grid-column: var(--collage-j-col) / span 1;
  grid-row: var(--collage-j-row) / span 1;
}

.recruit-page .recruit-fv__photo--k {
  grid-column: var(--collage-k-col) / span 1;
  grid-row: var(--collage-k-row) / span 1;
}

.recruit-page .recruit-fv__photo--l {
  grid-column: var(--collage-l-col) / span 1;
  grid-row: var(--collage-l-row) / span 1;
}

@media (max-width: 1024px) {
  .recruit-page .recruit-fv__column--copy {
    width: 80%;
    ;
  }

  .recruit-page .recruit-fv__collage {
    min-height: 100%;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, minmax(0, 1fr));
    /* 3列×4行 なので 幅 3×50% = 150% / 高さ 4×50% = 200% */
    --collage-land-w: 150%;
    --collage-land-h: 200%;
    gap: 0;
    /*
     * 3列×4行（列・行は 1〜3 / 1〜4）。PCとは独立して並べ替え可能。
     * 既定: 1行目 a b c / 2行目 d e f / 3行目 g h i / 4行目 j k l
     */
    --collage-a-col: 1;
    --collage-a-row: 1;
    --collage-b-col: 2;
    --collage-b-row: 1;
    --collage-c-col: 3;
    --collage-c-row: 1;
    --collage-d-col: 1;
    --collage-d-row: 2;
    --collage-e-col: 2;
    --collage-e-row: 2;
    --collage-f-col: 3;
    --collage-f-row: 2;
    --collage-g-col: 1;
    --collage-g-row: 3;
    --collage-h-col: 2;
    --collage-h-row: 3;
    --collage-i-col: 3;
    --collage-i-row: 3;
    --collage-j-col: 1;
    --collage-j-row: 4;
    --collage-k-col: 2;
    --collage-k-row: 4;
    --collage-l-col: 3;
    --collage-l-row: 4;
  }

  .recruit-page .recruit-fv__information-link {
    grid-template-columns: 4.75rem minmax(0, 1fr);
    gap: 0.75rem 1rem;
  }
}