/* ==========================================================================
   Style Sheet
   ページ固有 / コンポーネントスタイル
   ========================================================================== */

/* --------------------------------------------------------------------------
   サイトヘッダー
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  height: var(--header-height);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
  padding: 0 40px;
  max-width: 1720px;
  margin: 0 auto;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.site-header__logo img {
  height: 42px;
  width: auto;
  display: block;
}

/* PC ナビ */
.site-header__nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

.site-header__menu {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__menu-item {
  position: relative;
  white-space: nowrap;
}

.site-header__menu-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-jp);
  font-size: calc(var(--fz-sm) + 2px);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  text-decoration: none;
  padding: 8px 0;
  background: none;
  border: none;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: opacity var(--transition-speed) var(--easing);
}

.site-header__menu-link:hover {
  opacity: 0.7;
}

.site-header__menu-caret {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transition-speed) var(--easing);
}

.site-header__menu-item--has-dropdown:hover .site-header__menu-caret,
.site-header__menu-link[aria-expanded="true"] .site-header__menu-caret {
  transform: rotate(-135deg) translateY(2px);
}

/* ドロップダウン */
.site-header__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 220px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  padding: 12px 0;
  list-style: none;
  margin: 0;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-speed) var(--easing),
              visibility var(--transition-speed) var(--easing),
              transform var(--transition-speed) var(--easing);
}

/* 取扱製品：クロム系／ニッケル系／その他 を1列ずつに分けて縦に並べる。
   横に広がるため、中央寄せではなくメニュー項目の左端を基準に開く */
.site-header__dropdown--cols {
  left: 0;
  transform: translateY(8px);
  display: flex;
  align-items: flex-start;
  min-width: max-content;
  /* 右端は最終列の文字が枠に近づきすぎないよう少し余白を足す */
  padding: 12px 16px 12px 0;
}

.site-header__menu-item--has-dropdown:hover .site-header__dropdown,
.site-header__menu-item--has-dropdown:focus-within .site-header__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* --cols は左寄せで開くため、中央寄せ用の translateX を打ち消す */
.site-header__menu-item--has-dropdown:hover .site-header__dropdown--cols,
.site-header__menu-item--has-dropdown:focus-within .site-header__dropdown--cols {
  transform: translateY(0);
}

/* カテゴリ1列ぶんの並び */
.site-header__dropdown-col {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__dropdown li {
  margin: 0;
}

.site-header__dropdown a {
  display: block;
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  text-decoration: none;
  padding: 10px 20px;
  white-space: nowrap;
  transition: background var(--transition-speed) var(--easing),
              color var(--transition-speed) var(--easing);
}

.site-header__dropdown a:hover {
  background: var(--color-accent-light);
  color: var(--color-accent);
  opacity: 1;
}

/* CTA エリア（電話 + お問い合わせボタン） */
.site-header__cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.site-header__tel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-en);
  font-size: calc(var(--fz-md) + 3px);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.site-header__tel-icon {
  font-size: 1.1em;
}

.site-header__contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  color: var(--color-white);
  font-size: calc(var(--fz-sm) + 2px);
  font-weight: var(--fw-bold);
  text-decoration: none;
  padding: 10px 24px;
  border-radius:10px;
  letter-spacing: 0.04em;
  transition: background var(--transition-speed) var(--easing),
              transform var(--transition-speed) var(--easing);
}

.site-header__contact-btn:hover {
  background-color: var(--color-accent-hover);
  opacity: 1;
}

/* ハンバーガー（SPのみ表示） */
.site-header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.site-header__hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-white);
  border-radius: 2px;
  transition: transform var(--transition-speed) var(--easing),
              opacity var(--transition-speed) var(--easing);
}

.site-header__hamburger.is-open span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.site-header__hamburger.is-open span:nth-child(2) {
  opacity: 0;
}

.site-header__hamburger.is-open span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* SP ドロワー */
.site-drawer {
  display: none;
  position: fixed;
  top: var(--header-height-sp);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-white);
  z-index: 99;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--transition-speed) var(--easing);
}

.site-drawer.is-open {
  transform: translateX(0);
}

.site-drawer__menu {
  list-style: none;
  margin: 0;
  padding: 24px 0;
}

.site-drawer__menu li {
  border-bottom: 1px solid var(--color-border);
}

.site-drawer__menu a {
  display: block;
  font-size: var(--fz-base);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  text-decoration: none;
  padding: 18px 24px;
}

/* 取扱製品：PCのドロップダウンに相当する子項目リスト */
.site-drawer__group {
  padding: 16px 24px 6px;
}

/* グループ見出し（取扱製品／主なめっき工程）。通常のメニュー項目と同じ見た目に揃える */
.site-drawer__group-title {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
}

/* 見出しがページを持つ場合（主なめっき工程）。
   padding は .site-drawer__menu a の指定を打ち消す（グループ側で余白を持っているため） */
.site-drawer__group-title a {
  display: block;
  padding: 0;
}

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

.site-drawer__sublist li {
  border-bottom: none;
}

.site-drawer__sublist a {
  padding: 11px 0 11px 12px;
  font-size: var(--fz-sm);
}

.site-drawer__cta {
  background: var(--color-accent);
  color: var(--color-white) !important;
  text-align: center;
}

.site-drawer__tel a {
  color: var(--color-accent) !important;
  font-family: var(--font-en);
  font-weight: var(--fw-bold);
  text-align: center;
}

/* --------------------------------------------------------------------------
   ヒーロー（HERO / ファーストビュー）
   JOX 型: ネイビー全面背景 + 大写真（上部左）+ 小写真（下部右）+ テキスト（下部左）
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  background-color: var(--color-navy);
  color: var(--color-white);
  overflow: hidden;
}

/* 斜めモチーフ（背景装飾） */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-navy-dark);
  clip-path: polygon(72% 0, 100% 0, 100% 100%, 32% 100%);
  z-index: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   採用ページのヒーロー：トップ FV のレイアウトを流用した白背景版
   背景を白に、斜めモチーフをアクセント10%にし、文字は濃色へ反転する
   -------------------------------------------------------------------------- */
.hero--recruit {
  background-color: var(--color-white);
  color: var(--color-primary);
}

.hero--recruit::before {
  background: var(--color-sky-10);
}

.hero--recruit .hero__body,
.hero--recruit .hero__title,
.hero--recruit .hero__lead {
  color: var(--color-primary);
}

/* スクロールインジケータは SP のみ表示（PC では非表示）。
   白背景に合わせて文字・ラインはアクセントカラーにする */
.hero--recruit .hero__scroll {
  display: none;
  color: var(--color-accent);
}

.hero--recruit .hero__scroll-line {
  background: var(--color-gray-light);
}

.hero--recruit .hero__scroll-line::before {
  background: var(--color-accent);
}

/* メインコピー（筆文字画像）を 60px 下へ。
   狭い画面では下にはみ出さないよう max() で下限 8px を確保する */
.hero--recruit .hero__inner {
  bottom: max(8px, calc(clamp(40px, 6vw, 80px) - 60px));
}

/* メインコピーを筆文字画像に置き換えた見出し */
.hero__title--image {
  margin: 0;
}

/* picture は既定でインライン。img の幅指定が効くようブロックにする */
.hero__title--image picture {
  display: block;
}

.hero__title--image img {
  display: block;
  width: 100%;
  height: auto;
}

/* RECRUIT マークは下端がサブ写真の上端（下から 55%）に接する位置へ。
   幅は最大 680px（狭い画面では 53vw で追従） */
.hero--recruit .hero__mark {
  top: auto;
  bottom: 55%;
  width: clamp(400px, 53vw, 680px);
}

/* 写真共通 */
.hero__photo {
  position: absolute;
  overflow: hidden;
}

/* スライドショー：3枚の img を絶対配置で重ね、
   .is-current の付け替え（js/main.js）+ opacity transition でクロスフェードする。
   新画像のフェードインと旧画像のフェードアウトが同時進行し、瞬間切替にならない */
.hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 1.8s var(--easing);
}

.hero__photo img.is-current {
  opacity: 1;
}

/* メイン写真：上部左寄せ（ADACHI マークより手前） */
.hero__photo--main {
  top: 0;
  left: 0;
  width: 58%;
  height: 70%;
  z-index: 1;
}

/* サブ写真：下部右寄せ */
.hero__photo--sub {
  bottom: 0;
  right: 0;
  width: 40%;
  height: 55%;
  z-index: 1;
}

/* 右上：ADACHI マーク（大サイズ・メイン写真の背面・画面右に少しはみ出す） */
.hero__mark {
  position: absolute;
  top: calc(var(--header-height) + 80px);
  right: -1vw;
  width: clamp(400px, 55vw, 700px);
  max-width: none;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

/* テキストエリア：下部左寄せ */
.hero__inner {
  position: absolute;
  left: clamp(24px, 4vw, 20px);
  bottom: clamp(40px, 6vw, 80px);
  z-index: 2;
  max-width: 920px;
  padding-right: 20px;
}

.hero__body {
  color: var(--color-white);
}

.hero__title {
  font-family: var(--font-jp);
  font-size: clamp(40px, 3.5vw + 16px, 68px);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  letter-spacing: 0.04em;
  margin: 0 0 24px;
  color: var(--color-white);
}

.hero__lead {
  font-size: var(--fz-md);
  line-height: 2;
  color: var(--color-white);
  opacity: 0.9;
  margin: 0;
  max-width: 540px;
}

/* スクロールインジケータ：中央下部（縦書き + アニメーションライン）
   ※ 中央寄せは individual `translate` プロパティで行い、
     transform は出現アニメーション（fade-up）とホバー用に残す */
.hero__scroll {
  position: absolute;
  z-index: 3;
  bottom: 88px;
  left: 57.5%;
  translate: -50% 0;
  color: var(--color-white);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0.9;
  transition: opacity var(--transition-speed) var(--easing),
              transform var(--transition-speed) var(--easing);
}

.hero__scroll:hover {
  opacity: 1;
  transform: translateY(-4px);
}

.hero__scroll-text {
  font-family: 'Oswald', var(--font-en);
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.3em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.hero__scroll-line {
  position: relative;
  display: block;
  width: 1px;
  height: 60px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.hero__scroll-line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-white);
  transform-origin: top;
  animation: scroll-line 2.4s ease-in-out infinite;
}

@keyframes scroll-line {
  0%, 100% {
    transform: translateY(-100%);
  }
  50% {
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   FV 出現アニメーション（下からフェードイン）
   順序：画像（メイン→サブ→ADACHI）→ テキスト（タイトル→リード）→ スクロール
   -------------------------------------------------------------------------- */
@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__photo,
.hero__mark,
.hero__title,
.hero__lead,
.hero__scroll {
  opacity: 0;
  animation: hero-fade-up 1s var(--easing) both;
}

/* 画像を先に出す（ADACHI マークはメイン写真と同時発火） */
.hero__photo--main { animation-delay: 0.2s; }
.hero__mark        { animation-delay: 0.2s; }
.hero__photo--sub  { animation-delay: 0.45s; }

/* テキストを時間差で出す */
.hero__title       { animation-delay: 1.05s; }
.hero__lead        { animation-delay: 1.25s; }

/* スクロールインジケータは最後 */
.hero__scroll      { animation-delay: 1.55s; }

/* アニメーション終了後の状態（scroll は base で opacity:0.9 に戻す）*/
.hero__scroll {
  animation-fill-mode: forwards;
}

/* prefers-reduced-motion 対応 */
@media (prefers-reduced-motion: reduce) {
  .hero__photo,
  .hero__mark,
  .hero__title,
  .hero__lead,
  .hero__scroll {
    opacity: 1;
    animation: none;
    transform: none;
  }
  /* スライドショーは JS 側でも自動切替を停止。ここではクロスフェード用の
     transition を無効化し、現在の1枚のみ静止表示する */
  .hero__photo img {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   レスポンシブ（ヘッダー + ヒーロー）
   -------------------------------------------------------------------------- */
/* ヘッダー中間サイズ：ナビが窮屈になり始めるので gap と電話番号を先に調整 */
@media (max-width: 1500px) {
  .site-header__menu {
    gap: 22px;
  }
}

@media (max-width: 1400px) {
  .site-header__menu {
    gap: 18px;
  }
  .site-header__tel {
    font-size: calc(var(--fz-md) + 2px);
  }
}

/* 電話番号の数字は早めに隠す。
   これより狭いとヘッダーの中身が縮まなくなり、お問い合わせボタンが画面外にはみ出すため */
@media (max-width: 1380px) {
  .site-header__tel-num {
    display: none;
  }
}

@media (max-width: 1320px) {
  .site-header__menu {
    gap: 14px;
  }
  .site-header__inner {
    padding: 0 24px;
    gap: 16px;
  }
  .site-header__contact-btn {
    padding: 10px 20px;
  }
}

/* ハンバーガー切替（フォントが太くなったため 1240 → 1280 に引き上げ） */
@media (max-width: 1280px) {
  .site-header__nav,
  .site-header__cta {
    display: none;
  }
  .site-header__hamburger {
    display: flex;
  }
  .site-header {
    height: var(--header-height-sp);
  }
  .site-header__inner {
    padding: 0 20px;
  }
  .site-header__logo img {
    height: 38px;
  }
  .site-drawer {
    display: block;
  }
}

/* タブレット以下：写真の比率を調整 */
@media (max-width: 1024px) {
  .hero__photo--main {
    width: 65%;
    height: 55%;
  }
  .hero__photo--sub {
    width: 45%;
    height: 45%;
  }
}

/* スマートフォン：レイアウトを変更 */
@media (max-width: 768px) {
  .hero {
    min-height: 100svh;
  }
  /* メイン写真は上部全幅（縦幅少し狭く） */
  .hero__photo--main {
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
  }
  /* サブ写真は下部右寄せ・小さめ（縦幅少し狭く） */
  .hero__photo--sub {
    right: 0;
    bottom: 0;
    width: 80%;
    height: 32%;
  }
  /* テキストは上下の写真の間（隙間の中央）に配置
     メイン写真 0〜40% / サブ写真 68〜100% → 隙間 40〜68% の中央は 54% */
  .hero__inner {
    left: 24px;
    right: 24px;
    bottom: auto;
    top: 54%;
    transform: translateY(-50%);
    max-width: none;
    padding-right: 0;
  }
  .hero__title {
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1.5;
  }
  .hero__lead {
    font-size: var(--fz-sm);
    line-height: 1.8;
  }
  /* SP: スクロールインジケータはサブ写真の左（左下エリア）に配置 */
  .hero__scroll {
    left: 24px;
    bottom: 24px;
    top: auto;
    translate: 0 0;
  }
  .hero__scroll:hover {
    transform: translateY(-4px);
  }
  .hero__scroll-line {
    height: 80px;
  }
  /* SP: ADACHI マーク（右上にコンパクト・少しはみ出す） */
  .hero__mark {
    top: calc(var(--header-height-sp) + 12px);
    right: -6vw;
    width: clamp(200px, 60vw, 380px);
  }

  /* 採用ページ：SP では RECRUIT マークを表示しない */
  .hero--recruit .hero__mark {
    display: none;
  }

  /* 採用ページ：SP はコピーを 10px 下へ。
     PC 用に指定した bottom は解除し、SP の中央配置（top:54%）を基準にずらす */
  .hero--recruit .hero__inner {
    bottom: auto;
    top: calc(54% + 10px);
  }

  /* 採用ページ：SP は背景の斜めモチーフをより寝かせる（横の振れ幅 40% → 80%） */
  .hero--recruit::before {
    clip-path: polygon(90% 0, 100% 0, 100% 100%, 10% 100%);
  }

  /* 採用ページ：スクロールインジケータは SP でのみ表示する */
  .hero--recruit .hero__scroll {
    display: flex;
  }
}

/* --------------------------------------------------------------------------
   ABOUT US セクション（3カラム：左サブ写真 / 中央テキスト / 右メイン写真）
   -------------------------------------------------------------------------- */
.about {
  position: relative;
  background: var(--color-white);
  padding: clamp(0px, 0.5vw, 8px) 0 0;
  overflow: hidden;
}

/* 下部の横スクロール英字マーキー（サブ写真に一部かぶるよう上に引き寄せ） */
.about__marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 0 0 clamp(40px, 6vw, 96px);
  margin-top: calc(clamp(-40px, -10vw, -20px) - var(--about-lift, 40px));
  z-index: 2;
  pointer-events: none;
}

.about__marquee-track {
  display: flex;
  gap: clamp(48px, 6vw, 96px);
  width: max-content;
  animation: about-marquee-scroll 40s linear infinite;
}

.about__marquee-text {
  flex-shrink: 0;
  font-family: 'Oswald', var(--font-en);
  font-size: clamp(70px, 9vw, 150px);
  font-weight: var(--fw-medium);
  color: rgba(0, 32, 96, 0.15);
  white-space: nowrap;
  letter-spacing: -0.02em;
  line-height: 1;
}

@keyframes about-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .about__marquee-track {
    animation: none;
  }
}

.about__inner {
  position: relative;
  z-index: 1;
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(400px, 2.2fr) minmax(300px, 1.8fr);
  align-items: stretch;
  min-height:clamp(220px, 45vh, 300px);
}

/* 左カラム：サブ写真（下寄せ・左端に密着） */
.about__photo-sub {
  align-self: end;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 55%;
  overflow: hidden;
  margin-bottom: var(--about-lift, 40px);
}

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

/* 中央カラム：テキストコンテンツ */
.about__content {
  padding: clamp(60px, 7vw, 120px) clamp(32px, 5vw, 80px) clamp(60px, 8vw, 120px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 760px;
}

.about__label {
  display: block;
  font-family: 'Oswald', var(--font-en);
  font-size: calc(clamp(44px, 5vw, 72px) + 6px);
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.about__subtitle {
  font-family: var(--font-jp);
  font-size: calc(var(--fz-sm) + 2px);
  color: var(--color-gray);
  letter-spacing: 0.15em;
  margin: 0 0 clamp(32px, 4vw, 56px);
}

.about__title {
  font-family: var(--font-jp);
  font-size: clamp(20px, 1.5vw + 10px, 32px);
  font-weight: var(--fw-bold);
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  margin: 0 0 clamp(24px, 3vw, 40px);
}

.about__text {
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  line-height: 2;
  color: var(--color-primary);
  margin: 0 0 clamp(40px, 5vw, 64px);
}

/* CTA ボタン（左テキストエリア + 右アクセント色の矢印スクエア + 外枠下線） */
.about__button {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-width: 300px;
  min-height: 72px;
  color: var(--color-primary);
  text-decoration: none;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: calc(var(--fz-base) + 4px);
  letter-spacing: 0.1em;
  border-bottom: 1.5px solid var(--color-primary);
  transition: background var(--transition-speed) var(--easing),
              border-color var(--transition-speed) var(--easing),
              translate var(--transition-speed) var(--easing);
}

.about__button-label {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0 8px 0 12px;
}

.about__button-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: 'Oswald', var(--font-en);
  font-weight: var(--fw-regular);
  font-size: 1.2em;
  transition: background var(--transition-speed) var(--easing);
}

.about__button:hover {
  background: rgba(255, 255, 255, 0.4);
  border-color: var(--color-accent);
  translate: 8px 0;
  opacity: 1;
}

.about__button:hover .about__button-arrow {
  background: var(--color-accent-hover);
}

/* 右カラム：メイン写真エリア（2枚重ね：大 上部左寄り / 小 下部右寄せ） */
.about__photo-main {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  align-self: start;
  margin-top: clamp(80px, 10vw, 160px);
}

/* 大写真：上部左寄り（横長）※ top -10px 上へ / left -2% 左へ */
.about__photo-main-primary {
  position: absolute;
  top: -20px;
  left: 0%;
  width: 100%;
  aspect-ratio: 15 / 10;
  overflow: hidden;
}

/* 小写真：下部右寄せ（正方形・大写真の下部に重なる・少し下オフセット） */
.about__photo-main-secondary {
  position: absolute;
  bottom: -70%;
  right: 10%;
  width: 50%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

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

/* About Us 出現アニメーション（FV と同じスタイル：下からフェードイン）
   スクロールで .fade-up 要素が画面内に入ると .is-visible が付き、
   base.css の transition が発火。ここでは各要素の transition-delay を上書きして
   「画像 → テキスト」の順に時間差で表示する */
.about__photo-main-primary.fade-up,
.about__photo-main-secondary.fade-up,
.about__photo-sub.fade-up             { transition-delay: 0s; }
.about__photo-main-secondary.fade-up  { transition-delay: 0.2s; }
.about__label.fade-up       { transition-delay: 0.35s; }
.about__subtitle.fade-up    { transition-delay: 0.45s; }
.about__title.fade-up       { transition-delay: 0.55s; }
.about__text.fade-up        { transition-delay: 0.7s;  }

/* ボタンは独自の transition（background/border-color）が優先されて opacity/transform が効かないので
   CSS animation で発火させる（is-visible 付与時にトリガー）*/
.about__button.fade-up.is-visible {
  animation: about-button-fade-up 0.8s var(--easing) 0.85s both;
}

@keyframes about-button-fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* レスポンシブ：中間サイズ（サブ写真を少し小さく） */
@media (max-width: 1200px) {
  .about__inner {
    grid-template-columns: minmax(180px, 0.9fr) minmax(360px, 2fr) minmax(260px, 1.3fr);
    min-height: clamp(500px, 60vh, 700px);
  }
}

/* レスポンシブ：タブレット以下
   順序: テキスト → [左: サブ写真（下寄せ）| 右: メイン写真（縦長・上寄せ）] */
@media (max-width: 900px) {
  .about__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    min-height: 0;
    max-width: none;
    padding: 0 clamp(20px, 5vw, 40px) clamp(40px, 6vw, 80px);
    gap: clamp(10px, 2.5vw, 24px) 4%;
  }

  /* テキストは全幅（第1行） */
  .about__content {
    order: 1;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(60px, 8vw, 100px) 0 clamp(16px, 3vw, 28px);
  }
  
  /* 左：サブ写真（小さめ・下寄せ・軽い下オフセット） */
  .about__photo-sub {
    order: 2;
    width: 30%;
    height: auto;
    max-height: none;
    aspect-ratio: 3 / 4;
    align-self: flex-end;
    margin: 0;
    transform: translateY(clamp(12px, 2.5vw, 24px));
  }

  /* 右：メイン写真エリア（2枚重ね・SP用に比率調整） */
  .about__photo-main {
    order: 3;
    width: 65%;
    height: auto;
    aspect-ratio: 1 / 1;
    align-self: flex-end;
    margin-top: 0;
  }
  .about__photo-main-primary {
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 16 / 10;
  }
  .about__photo-main-secondary {
    width: 55%;
    aspect-ratio: 1 / 1;
    bottom: -5%;
    right: 5%;
  }


  /* SP時：英字マーキーをやや上へ引き上げる（写真に軽くかぶる程度） */
  .about__marquee {
    margin-top: calc(clamp(-60px, -4vw, -20px) - var(--about-lift, 40px));
  }
}

@media (max-width: 480px) {
  .about__button {
    min-height: 64px;
  }
  .about__button-label {
    padding: 0 24px;
  }
  .about__button-arrow {
    width: 64px;
    font-size: 1.2em;
  }
}

/* --------------------------------------------------------------------------
   PRODUCTS セクション
   ヘッダー（製品情報 / PRODUCTS / リード文 / VIEW MORE）
   + 4カラムカード（写真背景 + オーバーレイ + タイトル + 説明 + 円形アイコン）
   -------------------------------------------------------------------------- */
.products {
  position: relative;
  background: rgba(0, 0, 0, 0.03);
  padding: clamp(80px, 8vw, 140px) 0 clamp(80px, 8vw, 140px);
  overflow: hidden;
}

.products__inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 64px);
}

.products__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(24px, 4vw, 80px);
  padding-bottom: clamp(48px, 5vw, 80px);
}

/* VIEW MORE 単体幅を「詳しく見る」と同じ min-width 300px に固定 */
.products__view-more {
  width: 300px;
  justify-self: end;
  margin-bottom: clamp(8px, 1vw, 16px);
}

.products__title-group {
  display: flex;
  flex-direction: column;
}

/* PRODUCTS 見出し（About Us と同一のスタイル） */
/* ※ 採用ページのセクション見出し（.recruit-head__*）も同一デザインのため、
   スタイルを重複させずここでまとめて定義している */
.products__title,
.recruit-head__title {
  display: block;
  font-family: 'Oswald', var(--font-en);
  font-size: calc(clamp(44px, 5vw, 72px) + 6px);
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

/* 製品情報 サブ（About Us の 私たちについて と同一のスタイル） */
.products__label,
.recruit-head__label {
  font-family: var(--font-jp);
  font-size: calc(var(--fz-sm) + 2px);
  color: var(--color-gray);
  letter-spacing: 0.15em;
  margin: 0;
}

/* --------------------------------------------------------------------------
   採用：先輩社員インタビュー
   写真の左下を白い面で隠して切り欠きに見せ、そこにプロフィールを置く
   -------------------------------------------------------------------------- */
/* サイドナビのアンカー着地時に、固定ヘッダーの裏へ隠れないよう上オフセット */
.interview {
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.interview + .interview {
  margin-top: clamp(56px, 8vw, 100px);
}

/* サイドナビの開始位置を写真の上端に揃える。
   ずらす量は「先輩社員の声 番号の高さ（= 数字の font-size）＋ その下余白」と同じ式にしている */
.detail__aside--offset {
  margin-top: calc(clamp(42px, 4.6vw, 68px) + clamp(12px, 1.6vw, 20px));
}

/* 右上の「先輩社員の声01」 */
.interview__number {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: clamp(8px, 1vw, 14px);
  margin: 0 0 clamp(12px, 1.6vw, 20px);
  font-family: 'Oswald', var(--font-en);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-accent);
  /* 写真はプロフィール枠より clamp(24px, 3vw, 40px) 下げて置いている（.interview__media の top）。
     同じ量だけ番号を下へずらし、写真との隙間を詰める（見た目だけ動かし、周りの配置は変えない） */
  transform: translateY(clamp(24px, 3vw, 40px));
}

/* 「先輩社員の声」は日本語のため、親の英字フォント（Oswald）ではなく和文フォントで表示する */
.interview__number-label {
  font-family: var(--font-jp);
  font-size: clamp(15px, 1.3vw, 21px);
  letter-spacing: 0.06em;
}

.interview__number-figure {
  font-size: clamp(42px, 4.6vw, 68px);
  letter-spacing: -0.02em;
}

/* プロフィール枠（白いカード）の右側に、顔写真を重ねて配置する。
   HTML では写真を先に記述しているため、SP の縦積みでは写真が上にくる */
.interview__body {
  position: relative;
}

/* 写真はカード右側に重ね、上下に余白を残してカードの高さいっぱいに伸ばす */
.interview__media {
  position: absolute;
  top: clamp(24px, 3vw, 40px);
  right: 0;
  bottom: clamp(24px, 3vw, 40px);
  z-index: 1;
  width: clamp(180px, 45%, 430px);
}

/* 縦長の枠に収めるため、横方向のみトリミングして中央を見せる */
.interview__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* プロフィール枠。グレー背景のセクション上で白いカードとして見せる。
   右側は重なる写真のぶんだけ余白を空け、テキストが写真に潜り込まないようにする */
.interview__profile {
  width: 64%;
  padding: clamp(24px, 3vw, 40px);
  padding-right: clamp(56px, 13%, 130px);
  background-color: var(--color-white);
}

.interview__joined {
  margin: 0 0 clamp(4px, 0.6vw, 8px);
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--color-primary);
}

.interview__name {
  margin: 0;
  font-family: var(--font-jp);
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

.interview__name span {
  margin-left: 0.4em;
  font-size: clamp(13px, 1.1vw, 16px);
}

/* プロフィール項目。短い項目は「見出し｜内容」の横並び、
   長文の項目は全幅で縦積みにする */
.interview__facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: clamp(12px, 1.6vw, 24px);
  row-gap: clamp(6px, 0.8vw, 10px);
  margin: clamp(16px, 2vw, 24px) 0 0;
  padding-top: clamp(16px, 2vw, 24px);
  border-top: 1px solid var(--color-border);
}

.interview__term {
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-md);
  letter-spacing: 0.04em;
  color: var(--color-accent);
}

.interview__desc {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-lg);
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

.interview__term--block,
.interview__desc--block {
  grid-column: 1 / -1;
}

.interview__term--block {
  margin-top: clamp(8px, 1vw, 14px);
}

/* 設問と回答 */
.interview__qa {
  margin-top: clamp(32px, 4vw, 56px);
}

.interview__question {
  margin: 0 0 clamp(14px, 1.8vw, 22px);
  padding-left: clamp(24px, 3vw, 40px);
  font-family: var(--font-jp);
  font-size: var(--fz-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-sm);
  letter-spacing: 0.06em;
  color: var(--color-accent);
}

.interview__question::before {
  content: "—";
  margin-right: 0.35em;
}

.interview__answer {
  margin: 0;
  /* 左端をプロフィール枠のテキストに揃える（枠の左 padding と同じ値） */
  padding-left: clamp(24px, 3vw, 40px);
  /* 右側を少し詰めて一行の長さを抑える */
  max-width: 88%;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-lg);
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

/* 段落が分かれている回答（新入社員へのメッセージ等）は段落間に余白をとる */
.interview__answer + .interview__answer {
  margin-top: 1em;
}

/* 1日のスケジュール（時刻 ／ 縦線と○ ／ 内容）
   枠は同じ灰色背景セクションの「品質保証体制」カード（.quality-card）と同じ白地・余白。
   角丸はなし（角は四角）。左端は回答文にそろえる */
.interview__schedule {
  --schedule-gap: clamp(22px, 2.8vw, 40px);  /* 行と行の間隔。縦線はこの分だけ下へ伸ばして次の行とつなぐ */
  --schedule-rail: clamp(28px, 3.4vw, 48px); /* 時刻 → 縦線、縦線 → 内容 の距離（左右同じ） */
  --schedule-dot: clamp(11px, 1.2vw, 15px);  /* ○の直径（会社案内「沿革」と同じ） */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--schedule-rail);
  row-gap: var(--schedule-gap);
  max-width: 88%;
  margin: 0 0 0 clamp(24px, 3vw, 40px);
  padding: clamp(24px, 3vw, 44px);
  background-color: var(--color-white);
}

.interview__schedule-time {
  font-family: var(--font-en);
  font-size: var(--fz-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-lg);
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--color-accent);
}

/* 内容側の左端に縦線と○を描く。行の高さいっぱいに伸ばし、線が途切れないようにする */
.interview__schedule-desc {
  position: relative;
  align-self: stretch;
  margin: 0;
  padding-left: var(--schedule-rail);
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-lg);
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

/* 縦線：自分の○の中心から、行間を越えて次の行の○の中心まで引く
   （1行目の上・最終行の下にははみ出さない） */
.interview__schedule-desc::before {
  content: "";
  position: absolute;
  top: calc(var(--lh-lg) * 0.5em);
  bottom: calc(-1 * var(--schedule-gap) - var(--lh-lg) * 0.5em);
  left: 0;
  width: 2px;
  transform: translateX(-50%);
  background-color: var(--color-border);
}

.interview__schedule-desc:last-of-type::before {
  display: none;
}

/* ○：1行目の文字の高さの中央に置く */
.interview__schedule-desc::after {
  content: "";
  position: absolute;
  top: calc(var(--lh-lg) * 0.5em);
  left: 0;
  z-index: 1;
  width: var(--schedule-dot);
  height: var(--schedule-dot);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color-accent);
}

/* 項目名（出社・始業など）。続く説明文は改行して下に置く */
.interview__schedule-title {
  display: block;
  font-weight: var(--fw-bold);
}

/* 採用ページ：インタビューセクション上部の導入コピー
   左端は見出し・サイドナビと同じ位置に揃える。
   背景はセクション側に任せ、上余白もセクションの padding を使う */
.recruit-intro {
  margin: 0 0 clamp(56px, 7vw, 100px);
  padding: 0 clamp(24px, 5vw, 80px);
}

.recruit-intro__text {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fz-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-md);
  letter-spacing: 0.04em;
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   採用：募集要項
   表の枠組み・配色は設備ページの .spec-table をそのまま使い、
   募集要項として必要な差分（行見出しの幅・上揃え）だけをここで足す
   -------------------------------------------------------------------------- */
.req-wrap {
  padding: 0 clamp(24px, 5vw, 80px);
}

/* 左：サイドナビ ／ 右：本文（募集要項＋福利厚生）の2カラム
   ※ 先輩社員の声セクションのサイドナビと同じ左端位置に揃える */
.req-layout {
  display: grid;
  grid-template-columns: clamp(240px, 24vw, 320px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

/* 左カラムのサイドナビ。.detail__aside と同じくスクロールに追従させる。
   募集要項と福利厚生を同じセクションに入れているため、
   福利厚生を読んでいる間もナビが残る */
.req-side {
  position: sticky;
  top: calc(var(--header-height) + 24px);
}

/* サイドナビのアンカー着地時に、固定ヘッダーの裏へ隠れないよう上オフセット
   （セクションでもブロックでも、リンク先になる要素に付ける） */
.anchor-offset {
  scroll-margin-top: calc(var(--header-height) + 24px);
}

/* --------------------------------------------------------------------------
   パンくずリスト（WordPress 版の下層ページ・記事詳細で出力）
   -------------------------------------------------------------------------- */
.breadcrumb {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: clamp(12px, 1.6vw, 20px) var(--container-padding) 0;
}

/* 独自ヒーローを使うページ（採用情報）：上下に線を引いて前後のセクションと区切る */
.breadcrumb--bordered {
  max-width: none;
  padding: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.breadcrumb--bordered .breadcrumb__list {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: clamp(12px, 1.6vw, 20px) var(--container-padding);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-jp);
  font-size: var(--fz-sm);
  line-height: var(--lh-md);
  letter-spacing: 0.02em;
  color: var(--color-gray);
}

/* 項目の間に区切り記号を入れる（先頭には付けない） */
.breadcrumb__item + .breadcrumb__item::before {
  content: "›";
  margin-right: 8px;
  color: var(--color-gray-light);
}

.breadcrumb__item a {
  color: var(--color-gray);
}

.breadcrumb__item a:hover {
  color: var(--color-accent);
}

/* お知らせが1件も登録されていないときの文言（WordPress 版） */
.news__empty {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  line-height: var(--lh-lg);
  letter-spacing: 0.03em;
  color: var(--color-gray);
}

/* 項目名の列は内容の分量に差があるため、セルの上端で揃える
   ※ 後方の .spec-table th/td { vertical-align:middle } に勝つよう詳細度を上げる */
.spec-table.spec-table--req th,
.spec-table.spec-table--req td {
  vertical-align: top;
}

/* 職種 ／ 内容 の組（仕事内容・賃金）*/
.req-def {
  display: grid;
  gap: clamp(10px, 1.4vw, 16px);
  margin: 0;
}

.req-def__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 clamp(12px, 1.6vw, 20px);
}

.req-def__term {
  font-weight: var(--fw-bold);
  line-height: var(--lh-md);
  white-space: nowrap;
  color: var(--color-accent);
}

.req-def__desc {
  margin: 0;
  line-height: var(--lh-md);
}

/* 応募資格・福利厚生などの箇条書き */
.req-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.req-list li {
  position: relative;
  padding-left: 1em;
  line-height: var(--lh-md);
}

.req-list li + li {
  margin-top: clamp(4px, 0.6vw, 8px);
}

.req-list li::before {
  content: "・";
  position: absolute;
  left: 0;
}

/* 補足（※〜）は本文よりひとまわり小さく、色を落とす */
.req-note {
  display: block;
  margin: clamp(8px, 1.1vw, 12px) 0 0;
  font-size: var(--fz-sm);
  line-height: var(--lh-md);
  color: var(--color-gray);
}

/* セル内の途中に置く補足は、直前の行との間隔だけ詰める */
br + .req-note {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   採用：PDF資料への導線（職種別の募集要項／数字で見る足立工業）
   -------------------------------------------------------------------------- */
.doc-links {
  margin-top: clamp(28px, 3.6vw, 48px);
}

.doc-links__lead {
  margin: 0 0 clamp(12px, 1.6vw, 20px);
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-md);
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

.doc-links__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 1.6vw, 18px);
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 24px);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: border-color var(--transition-speed) var(--easing),
              background-color var(--transition-speed) var(--easing);
}

.doc-link:hover {
  border-color: var(--color-accent);
  background-color: var(--color-bg-alt);
  opacity: 1; /* base.css のリンク共通 hover（opacity:.7）を打ち消す */
}

/* ファイル種別のラベル */
.doc-link__tag {
  padding: 3px 8px;
  background-color: var(--color-accent);
  font-size: var(--fz-xs);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--color-white);
}

.doc-link__title {
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-md);
  letter-spacing: 0.04em;
  color: var(--color-primary);
}

/* 別ウィンドウで開くことを示す矢印（.page-link__arrow と同じ意匠） */
.doc-link__arrow {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background-color: var(--color-navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
  transition: transform var(--transition-speed) var(--easing);
}

.doc-link:hover .doc-link__arrow {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   目立たせる資料バナー（採用：数字で見る足立工業 ／ 会社案内：環境方針）
   ※ 見出しバナーがネイビー面のため、同色だと連続して見分けづらい。
      淡いブルー地＋左のアクセント帯で、別種の要素として目立たせる
   -------------------------------------------------------------------------- */
.doc-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  margin-bottom: clamp(32px, 4vw, 56px);
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3.2vw, 44px);
  border-left: 6px solid var(--color-accent);
  background-color: var(--color-accent-light);
  text-decoration: none;
  transition: background-color var(--transition-speed) var(--easing);
}

.doc-feature:hover {
  background-color: var(--color-accent-10);
  opacity: 1; /* base.css のリンク共通 hover（opacity:.7）を打ち消す */
}

/* 会社概要の一覧に続けて置く場合は上に余白をとる
   （採用ページではセクション先頭に置くため、上余白は付けない） */
.company-list + .doc-feature {
  margin-top: clamp(32px, 4vw, 56px);
}

.doc-feature__body {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.8vw, 10px);
}

/* 見出しと PDF ラベルを横並びにする */
.doc-feature__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(10px, 1.2vw, 16px);
}

.doc-feature__title {
  font-family: var(--font-jp);
  font-size: var(--fz-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-sm);
  letter-spacing: 0.04em;
  color: var(--color-accent);
}

.doc-feature__text {
  font-family: var(--font-jp);
  font-size: var(--fz-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-md);
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

.doc-feature__tag {
  padding: 4px 10px;
  background-color: var(--color-accent);
  font-size: var(--fz-xs);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--color-white);
}

.doc-feature__arrow {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background-color: var(--color-navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  transition: transform var(--transition-speed) var(--easing);
}

.doc-feature:hover .doc-feature__arrow {
  transform: translateX(6px);
}

/* --------------------------------------------------------------------------
   採用：福利厚生（名称 ／ 内容 の一覧）
   -------------------------------------------------------------------------- */
/* 福利厚生は募集要項と同じセクション・同じ右カラムに続けて置いている。
   募集要項との間隔は、先頭の見出しバナーに付く .section-banner--gap（2つ目以降の
   バナー共通の上余白）が担当するため、ここでは余白を持たせない */

/* 健康企業宣言：左カラムのサイドナビの下に配置。
   ナビと同じ塊に見えないよう、上に区切りの横線を引いて離す */
.benefits-health {
  margin-top: clamp(28px, 3.2vw, 40px);
  padding-top: clamp(24px, 2.8vw, 36px);
  border-top: 1px solid var(--color-border);
}

.benefits-health__logo {
  display: block;
  width: clamp(120px, 60%, 170px);
  height: auto;
  margin: 0 0 clamp(12px, 1.6vw, 18px);
}

/* 左カラム（240〜320px）に収める前提のサイズ */
.benefits-health__title {
  margin: 0 0 clamp(8px, 1vw, 12px);
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-md);
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

.benefits-health__text {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fz-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-lg);
  letter-spacing: 0.02em;
  color: var(--color-gray);
}

/* 右カラム先頭のリード文 */
.benefits-main__lead {
  margin: 0 0 clamp(40px, 5vw, 64px);
  font-family: var(--font-jp);
  font-size: var(--fz-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-md);
  letter-spacing: 0.04em;
  color: var(--color-primary);
}

/* 一覧の枠組み（グリッド・罫線・ラベル色）は .company-list とまとめて定義済み。
   ここでは福利厚生だけに必要な指定を追加する */

.benefits__body {
  margin: 0;
}

.benefits__note {
  display: block;
  margin: clamp(2px, 0.4vw, 6px) 0 0;
  font-family: var(--font-jp);
  font-size: var(--fz-sm);
  line-height: var(--lh-md);
  letter-spacing: 0.02em;
  color: var(--color-gray);
}

.benefits__list {
  display: grid;
  gap: clamp(8px, 1vw, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.benefits__list li {
  position: relative;
  padding-left: 1.1em;
}

.benefits__list li::before {
  content: "・";
  position: absolute;
  left: 0;
}

/* 採用ページ：見出しブロック（サイドナビの左端に揃える） */
.recruit-head {
  display: flex;
  flex-direction: column;
  padding: 0 clamp(24px, 5vw, 80px);
  margin: 0 0 clamp(32px, 4vw, 56px);
}

/* 見出し下の区切り線。flex アイテムとして padding の内側に入るため、
   線幅がコンテンツ幅（サイドナビ左端〜本文右端）とぴったり揃う */
.recruit-head::after {
  content: "";
  height: 1px;
  margin-top: clamp(20px, 2.4vw, 32px);
  background-color: var(--color-border);
}

.products__lead {
  font-family: var(--font-jp);
  font-size: calc(clamp(16px, 5vw, 20px) + 6px);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  margin: 0;
  padding-bottom: clamp(12px, 1.5vw, 20px);
}

/* VIEW MORE ボタン（About Us の「詳しく見る」と同一デザイン） */
.products__view-more {
  display: inline-flex;
  align-items: center;
  min-width: 300px;
  min-height: 72px;
  color: var(--color-primary);
  text-decoration: none;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: calc(var(--fz-base) + 4px);
  letter-spacing: 0.1em;
  border-bottom: 1.5px solid var(--color-primary);
  transition: background var(--transition-speed) var(--easing),
              border-color var(--transition-speed) var(--easing),
              translate var(--transition-speed) var(--easing);
}

.products__view-more-text {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0 8px 0 12px;
}

.products__view-more-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: 'Oswald', var(--font-en);
  font-weight: var(--fw-regular);
  font-size: 1.2em;
  transition: background var(--transition-speed) var(--easing);
}

.products__view-more:hover {
  border-color: var(--color-accent);
  translate: 8px 0;
  opacity: 1;
}

.products__view-more:hover .products__view-more-arrow {
  background: var(--color-accent-hover);
}

.products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(4px, 0.6vw, 12px);
  margin-bottom: clamp(24px, 3vw, 48px);
}

.products__card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 4;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-white);
  isolation: isolate;
}

/* クロムめっき（1枚目）は全幅の横長カードで上部に配置 */
.products__card:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 3 / 1;
}

.products__card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.products__card-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--easing);
}

.products__card-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(80, 90, 105, 0.7) 0%,
              rgba(60, 70, 90, 0.7) 100%);
  z-index: 1;
}

.products__card:hover .products__card-bg img {
  transform: scale(1.06);
  opacity: 1;
}

.products__card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  padding: clamp(24px, 3vw, 40px);
  text-align: left;
}

.products__card-title {
  font-family: var(--font-jp);
  font-size: clamp(24px, 1.92vw, 30px);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  letter-spacing: 0.05em;
  margin: 0 0 clamp(24px, 3vw, 44px);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 10px;
}

.products__card-desc {
  font-family: var(--font-jp);
  font-size: calc(var(--fz-sm) + 4px);
  font-weight: var(--fw-medium);
  line-height: 1.9;
  color: var(--color-white);
  margin: 0;
}

/* ニッケル・銅・アルミの3カードで説明文の行数が揃わず、
   center 揃えのためタイトル位置がずれる問題への対策。
   カード内で単独 desc の場合は 2 行分の高さを確保して、コンテンツ全体の高さを揃える。
   ※ .products__card-content 内には h3.products__card-title が兄弟としているため、
     :only-child ではマッチしない。p 要素として単独かどうかを判定する :only-of-type を使う。 */
.products__card-desc:only-of-type {
  min-height: calc(1.9em * 2);
}

.products__card-desc + .products__card-desc {
  margin-top: 0.9em;
}

.products__card-icon {
  position: absolute;
  bottom: clamp(16px, 1.8vw, 24px);
  right: clamp(16px, 1.8vw, 24px);
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-speed) var(--easing);
}

.products__card-icon::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--color-white);
  border-right: 1.5px solid var(--color-white);
  transform: translateX(-2px) rotate(45deg);
}

.products__card:hover .products__card-icon {
  background: rgba(255, 255, 255, 0.15);
}

/* Products: fade-up 順序 */
.products__head.fade-up          { transition-delay: 0s;    }
.products__card.fade-up:nth-child(1) { transition-delay: 0.15s; }
.products__card.fade-up:nth-child(2) { transition-delay: 0.3s;  }
.products__card.fade-up:nth-child(3) { transition-delay: 0.45s; }
.products__card.fade-up:nth-child(4) { transition-delay: 0.6s;  }

/* レスポンシブ：タブレット（3カラム維持・カード比を少し調整） */
@media (max-width: 1024px) {
  .products__grid {
    gap: clamp(6px, 1vw, 12px);
  }
  .products__card:first-child {
    aspect-ratio: 5 / 2;
  }
}

/* レスポンシブ：SP（1カラム・全カード同じ縦幅） */
@media (max-width: 768px) {
  .products__head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: clamp(16px, 3vw, 24px);
  }
  .products__title,
  .recruit-head__title {
    font-size: clamp(48px, 14vw, 88px);
  }
  .products__lead {
    padding-bottom: 0;
  }
  .products__view-more {
    justify-self: start;
  }
  .products__grid {
    grid-template-columns: 1fr;
    gap: clamp(8px, 2vw, 16px);
  }
  .products__card,
  .products__card:first-child {
    aspect-ratio: 16 / 10;
    grid-column: auto;
  }
  .products__card:first-child {
    aspect-ratio: auto;
    min-height: clamp(320px, 92vw, 480px);
  }
  /* SP: カードタイトルを PC より 4px 小さく */
  .products__card-title {
    font-size: clamp(20px, 1.92vw, 26px);
  }
}

@media (max-width: 480px) {
  .products__card-title {
    font-size: 22px;
    margin-bottom: 16px;
  }
}

/* --------------------------------------------------------------------------
   STRENGTH セクション
   PRODUCTS と同じレイアウト。背景は暗色・テキスト白。
   -------------------------------------------------------------------------- */
.strength {
  position: relative;
  background-color: var(--color-bg-dark);
  background-image:
    linear-gradient(rgba(26, 26, 26, 0.80), rgba(26, 26, 26, 0.80)),
    url('../image/product-background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--color-white);
  /* overflow: hidden は position: sticky（.strength__stage）を無効化するため使わない */
}

/* .strength__stage 内の overflow: hidden は sticky に影響しないので、
   カード横方向のはみ出しはこちらで抑える */

.strength__inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 64px);
}

.strength__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(24px, 4vw, 80px);
  padding-bottom: clamp(20px, 3vw, 40px);
}

.strength__title-group {
  display: flex;
  flex-direction: column;
}

.strength__title {
  display: block;
  font-family: 'Oswald', var(--font-en);
  font-size: calc(clamp(44px, 5vw, 72px) + 6px);
  font-weight: var(--fw-medium);
  color: var(--color-white);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.strength__label {
  font-family: var(--font-jp);
  font-size: calc(var(--fz-sm) + 2px);
  color: var(--color-white);
  letter-spacing: 0.15em;
  margin: 0;
}

/* VIEW MORE ボタン（PRODUCTS の view-more と同じ形状。色は白 + アクセントに切替） */
.strength__view-more {
  display: inline-flex;
  align-items: center;
  width: 300px;
  min-width: 300px;
  min-height: 72px;
  justify-self: end;
  margin-bottom: clamp(8px, 1vw, 16px);
  color: var(--color-white);
  text-decoration: none;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: calc(var(--fz-base) + 4px);
  letter-spacing: 0.1em;
  border-bottom: 1.5px solid var(--color-white);
  transition: background var(--transition-speed) var(--easing),
              border-color var(--transition-speed) var(--easing),
              translate var(--transition-speed) var(--easing);
}

.strength__view-more-text {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0 8px 0 12px;
}

.strength__view-more-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--color-white);
  color: var(--color-primary);
  font-family: 'Oswald', var(--font-en);
  font-weight: var(--fw-regular);
  font-size: 1.2em;
  transition: background var(--transition-speed) var(--easing),
              color var(--transition-speed) var(--easing);
}

.strength__view-more:hover {
  border-color: var(--color-accent);
  translate: 8px 0;
  opacity: 1;
}

.strength__view-more:hover .strength__view-more-arrow {
  background: var(--color-accent);
  color: var(--color-white);
}

/* Strength: 見出しの fade-up */
.strength__head.fade-up { transition-delay: 0s; }

/* --- Strength カード（横長・番号タブ付き） --- */
.strength__cards {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 5vw, 72px);
  margin-top: clamp(56px, 6vw, 96px);
}

.strength-card {
  position: relative;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.18));
}

/* ==============================================================
   sticky + スクロール駆動のカード順次表示
   - .strength__reveal に十分な高さを持たせてスクロール距離を確保
   - .strength__stage を position: sticky で画面に留める
   - カードはグリッドで同位置にスタックし、.is-active の付与で表示切替
   - position: fixed を使わないため「透ける」構造問題は起きない
   ============================================================== */
.strength__reveal {
  position: relative;
  height: 400vh; /* 4 段階 × 100vh。総スクロール距離のチューニングポイント */
}

.strength__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(32px, 4vw, 64px);
  padding: clamp(60px, 6vw, 100px) 0;
  /* overflow: hidden はボタン hover 時の translate を切ってしまうため付けない */
}

.strength__stage .strength__head {
  flex-shrink: 0;
}

.strength__stage .strength__cards {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
}

.strength__cards {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  /* margin-top は .strength__stage 内では不要（縦中央寄せ済み） */
  margin-top: 0;
}

.strength-card {
  grid-column: 1;
  grid-row: 1;
  will-change: opacity, transform;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 非アクティブなカードは下に隠す。JS が .is-active を付与するまでこの状態 */
html.js .strength-card:not(.is-active) {
  opacity: 0;
  transform: translateY(60px);
}

/* アクセシビリティ：モーション控えめ設定は全カード常時表示 */
@media (prefers-reduced-motion: reduce) {
  html.js .strength-card:not(.is-active) {
    opacity: 1;
    transform: none;
  }
  .strength-card { transition: none; }
}

/* SP でも PC 版と同じ sticky + 順次フェードインアニメーションを有効にするため、
   従来ここにあった SP 用の無効化 override は撤去済み。 */

/* 番号タブ（カード上部左からはみ出す） */
.strength-card__number {
  position: absolute;
  bottom: 100%;
  left: 0;
  padding: clamp(8px, 1vw, 14px) clamp(56px, 6vw, 100px);
  text-align: center;
  background: var(--gradient-metal);
  color: var(--color-accent);
  font-family: 'Oswald', var(--font-en);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: 0.05em;
}

/* カード本体
   grid で列幅を明示（minmax(0,…) で intrinsic 拡張を封じる）し、
   4カード全てで本文開始位置を揃える。
   画像は align-self: start で行の高さに引き伸ばさず、aspect-ratio を維持する。 */
.strength-card__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 3vw, 48px);
  background: var(--color-white);
  padding: clamp(24px, 3vw, 40px);
}

.strength-card__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-bg-alt);
}

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

.strength-card__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(12px, 1.4vw, 20px);
  min-width: 0;
  padding: clamp(4px, 0.5vw, 8px) 0;
}

.strength-card__label {
  margin: 0;
  font-family: 'Oswald', var(--font-en);
  font-size: calc(var(--fz-sm) + 1px);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  letter-spacing: 0.05em;
}

.strength-card__title {
  margin: 0 0 clamp(4px, 0.6vw, 8px);
  font-family: var(--font-jp);
  font-size: clamp(20px, 2vw, 30px);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: 1.4;
  letter-spacing: 0.03em;
}

.strength-card__desc {
  margin: 0;
  padding-top: clamp(16px, 1.8vw, 26px);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-regular);
  color: var(--color-primary);
  line-height: var(--lh-lg);
  letter-spacing: 0.03em;
}

/* レスポンシブ：SP */
@media (max-width: 768px) {
  .strength__head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: clamp(16px, 3vw, 24px);
  }
  .strength__title {
    font-size: clamp(48px, 14vw, 88px);
  }
  .strength__view-more {
    justify-self: start;
  }
  .strength__cards {
    gap: clamp(40px, 8vw, 56px);
    margin-top: clamp(40px, 8vw, 64px);
  }
  .strength-card__inner {
    /* SP: 単列グリッドに切替えて画像を上・本文を下に縦積み
       height:100% でグリッド行（最も高いカード）に追従させ、
       全カードの縦幅を揃える */
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: clamp(16px, 3vw, 24px);
    padding: clamp(20px, 4vw, 28px);
    height: 100%;
  }
  .strength-card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .strength-card__number {
    left: 0;
    padding: 8px clamp(32px, 8vw, 48px);
    font-size: clamp(20px, 6vw, 28px);
  }
}

/* iPhone SE 等の極小画面（〜480px）：sticky 100vh 内にカードが収まるよう
   画像高さ・余白・文字サイズを更にタイトにする */
@media (max-width: 480px) {
  .strength__stage {
    gap: clamp(20px, 4vw, 28px);
    padding: clamp(32px, 5vw, 48px) 0;
  }
  .strength__title {
    font-size: clamp(40px, 12vw, 56px);
  }
  .strength-card__inner {
    gap: 12px;
    padding: 16px;
  }
  .strength-card__image {
    /* 画像は縦幅を viewport 基準で制限し、本文を圧迫しないようにする */
    aspect-ratio: auto;
    height: 24vh;
    max-height: 180px;
  }
  .strength-card__body {
    gap: 8px;
    padding: 0;
  }
  .strength-card__label {
    font-size: var(--fz-xs);
  }
  .strength-card__title {
    font-size: 16px;
    margin-bottom: 4px;
  }
  .strength-card__desc {
    padding-top: 10px;
    font-size: 13px;
    line-height: 1.65;
  }
  .strength-card__number {
    padding: 6px clamp(20px, 6vw, 32px);
    font-size: 18px;
  }
}

/* --------------------------------------------------------------------------
   RECRUIT
   参考: docs/references/TOP_recuruit.png のレイアウトを忠実再現
   （見出しはサイトのアクセントカラー、本文1行はユーザー指定）
   -------------------------------------------------------------------------- */
.recruit {
  position: relative;
  background-color: var(--color-bg);
  color: var(--color-primary);
  padding: 40px;
}

/* セクション全体を囲む外枠（アクセント色 10% 透明度・角丸）
   幅は .recruit の左右パディング（40px）を差し引いた全幅まで伸びる */
.recruit__frame {
  background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border-radius: clamp(20px, 2vw, 36px);
  padding: 0; /* 縦パディングは撤去（写真エリアがフレーム上下端まで届くようにするため） */
  overflow: hidden;
}

.recruit__inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 64px);
  display: grid;
  grid-template-columns: 1fr 38%;
  gap: clamp(40px, 6vw, 100px);
  align-items: stretch;
}

.recruit__image {
  width: 100%;
  height: 100%;
  position: relative;   /* .recruit__marquee-track の absolute 位置決めの基準 */
  overflow: hidden;
}

/* 縦方向の無限スクロール（マーキー）
   - .recruit__image は viewport（3/4 縦長）
   - .recruit__marquee-track が 8 枚を縦に並べ、translateY で -50% ずつ動く
   - 4 枚の写真を 2 セット複製することで、-50% 到達時点で 2 セット目の頭が
     1 セット目と同じ位置に来て、継ぎ目のない無限ループになる
*/
.recruit__marquee-track {
  /* absolute 化して .recruit__image のサイズ計算に寄与させない
     （行高がマーキー写真8枚分の高さに引っ張られてしまうのを防ぐ） */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 28px; /* 最後の gap 分を追加し、-50% で継ぎ目が揃うようにする */
  animation: recruit-marquee 12s linear infinite;
}

.recruit__image .recruit__marquee-track img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* --marquee-x / --marquee-y は js/main.js が実測した img[0]→img[3] の距離を注入する。
   flex gap のサブピクセル丸め等で -50% と実距離がズレて視覚的なジャンプが出るのを防ぐ。
   JS 実行前・非対応時のフォールバックとして -50% を使う。 */
@keyframes recruit-marquee {
  from { transform: translateY(0); }
  to   { transform: translateY(var(--marquee-y, -50%)); }
}

/* SP 用の横スクロール keyframe */
@keyframes recruit-marquee-horizontal {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--marquee-x, -50%)); }
}

/* モーション控えめ設定：スクロールアニメーションを止める */
@media (prefers-reduced-motion: reduce) {
  .recruit__marquee-track {
    animation: none;
  }
}

.recruit__body {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 28px);
  /* フレーム側の縦パディングを撤去したので、代わりにテキスト側に持たせる */
  padding: clamp(48px, 6vw, 100px) 0;
}

/* 見出し（STRENGTH と同形状。白背景に合わせて色は primary） */
/* 見出しと採用情報ラベルの縦グループ（PRODUCTS と同構造） */
.recruit__title-group {
  display: flex;
  flex-direction: column;
}

.recruit__title {
  display: block;
  font-family: 'Oswald', var(--font-en);
  font-size: calc(clamp(44px, 5vw, 72px) + 6px);
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

/* サブラベル（STRENGTH と同形状。白背景に合わせて色は gray） */
.recruit__label {
  font-family: var(--font-jp);
  font-size: calc(var(--fz-sm) + 2px);
  color: var(--color-gray);
  letter-spacing: 0.15em;
  margin: 0;
}

.recruit__text {
  font-family: var(--font-jp);
  font-size: clamp(20px, 2vw, 30px);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  line-height: 1.7;
  margin: clamp(24px, 3vw, 48px) 0 0;
}

/* 説明文（キャッチコピー .recruit__text の下に配置される本文段落） */
.recruit__description {
  font-family: var(--font-jp);
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: var(--fw-regular);
  color: var(--color-primary);
  line-height: 1.9;
  margin: 0;
}

/* 「詳しく見る」ボタン（PRODUCTS の view-more と同一デザイン） */
.recruit__view-more {
  display: inline-flex;
  align-items: center;
  width: 300px;
  min-width: 300px;
  min-height: 72px;
  margin-top: clamp(20px, 2.5vw, 40px);
  color: var(--color-primary);
  text-decoration: none;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: calc(var(--fz-base) + 4px);
  letter-spacing: 0.1em;
  border-bottom: 1.5px solid var(--color-primary);
  /* opacity / transform も transition に含めることで .fade-up の出現アニメーションが効く */
  transition: background var(--transition-speed) var(--easing),
              border-color var(--transition-speed) var(--easing),
              translate var(--transition-speed) var(--easing),
              opacity var(--transition-slow) var(--easing),
              transform var(--transition-slow) var(--easing);
}

.recruit__view-more-text {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0 8px 0 12px;
}

.recruit__view-more-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: 'Oswald', var(--font-en);
  font-weight: var(--fw-regular);
  font-size: 1.2em;
  transition: background var(--transition-speed) var(--easing);
}

.recruit__view-more:hover {
  border-color: var(--color-accent);
  translate: 8px 0;
  opacity: 1;
}

.recruit__view-more:hover .recruit__view-more-arrow {
  background: var(--color-accent-hover);
}

/* Recruit: fade-up 順序（画像→見出し→ラベル→キャッチ→説明文→ボタン） */
.recruit__image.fade-up       { transition-delay: 0s; }
.recruit__title.fade-up       { transition-delay: 0.1s; }
.recruit__label.fade-up       { transition-delay: 0.2s; }
.recruit__text.fade-up        { transition-delay: 0.3s; }
.recruit__description.fade-up { transition-delay: 0.4s; }
.recruit__view-more.fade-up   { transition-delay: 0s; }   /* 他セクションのボタンと同じ出現タイミングに */

/* SP: 縦積みレイアウト */
@media (max-width: 768px) {
  .recruit {
    padding: clamp(16px, 3vw, 40px);
  }
  .recruit__inner {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 40px);
  }
  /* SP: マーキーを横スクロールにするため、コンテナは横長の帯に */
  .recruit__image {
    aspect-ratio: 2 / 1;
  }
  /* SP: マーキーを縦→横スクロールに切替。
     - 3枚 × 2セット複製で translateX(-50%) が継ぎ目のない無限ループになる
     - padding-right = gap にすることで、セット末尾とセット先頭の間隔が
       セット内の画像間隔と一致し、-50% 到達時に visual jump が発生しない */
  .recruit__marquee-track {
    flex-direction: row;
    right: auto;              /* PC は right:0 で固定していたのを解除 */
    bottom: 0;
    gap: 12px;
    padding-right: 12px;      /* gap と同値にして継ぎ目を揃える */
    padding-bottom: 0;
    /* animation を longhand で完全に上書きし、iteration-count と timing-function を明示 */
    animation-name: recruit-marquee-horizontal;
    animation-duration: 12s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: 0s;
    animation-direction: normal;
    animation-fill-mode: none;
  }
  .recruit__image .recruit__marquee-track img {
    width: auto;
    height: 100%;
    aspect-ratio: 4 / 3;      /* 横長。1 画面に複数枚見える */
    flex-shrink: 0;
  }
  /* SP: フレーム下端と写真の間に余白 */
  .recruit__frame {
    padding-bottom: clamp(24px, 6vw, 48px);
  }
  .recruit__title {
    font-size: clamp(44px, 12vw, 72px);
  }
  .recruit__text {
    font-size: clamp(16px, 4.2vw, 22px);
  }
  .recruit__button {
    width: 100%;
    min-height: 60px;
  }
}

/* --------------------------------------------------------------------------
   NEWS
   参考: docs/references/TOP_news.png のレイアウトを踏襲
   （見出しはサイトのアクセントカラー、ダミー3件、右上に「一覧を見る」）
   -------------------------------------------------------------------------- */
.news {
  position: relative;
  background-color: var(--color-bg);
  color: var(--color-primary);
  padding: clamp(54px, 5.3vw, 94px) 0 clamp(80px, 7.5vw, 130px);
}

/* お知らせ一覧ページ（下層）：ヒーロー下のリスト用コンテナ。項目は .news__* を流用 */
.news-archive {
  padding: clamp(56px, 8vw, 110px) 0;
  background-color: var(--color-bg);
}

.news-archive__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* ページネーション（一覧ページ共通で使えるコンポーネント） */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(6px, 1vw, 12px);
  margin-top: clamp(40px, 6vw, 72px);
}

.pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(38px, 4vw, 46px);
  height: clamp(38px, 4vw, 46px);
  padding: 0 0.4em;
  border: 1px solid var(--color-border);
  font-family: 'Oswald', var(--font-en);
  font-size: var(--fz-base);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  text-decoration: none;
  transition: background-color var(--transition-speed) var(--easing),
    color var(--transition-speed) var(--easing),
    border-color var(--transition-speed) var(--easing);
}

.pagination__item:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* 現在ページ：アクセント塗り＋白文字 */
.pagination__item.is-current {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
  pointer-events: none;
}

/* 無効（先頭ページの「前へ」等） */
.pagination__item.is-disabled {
  color: var(--color-gray-light);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   お知らせ詳細（記事）ページ
   -------------------------------------------------------------------------- */
.article {
  padding: clamp(56px, 8vw, 110px) 0;
  background-color: var(--color-bg);
}

.article__inner {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.article__header {
  padding-bottom: clamp(20px, 3vw, 32px);
  margin-bottom: clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--color-border);
}

.article__meta {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  margin-bottom: clamp(12px, 1.6vw, 18px);
}

.article__date {
  font-family: 'Oswald', var(--font-en);
  font-size: calc(var(--fz-sm) + 2px);
  font-weight: var(--fw-medium);
  letter-spacing: 0.05em;
  color: var(--color-accent-hover);
}

.article__title {
  margin: 0;
  font-family: var(--font-jp);
  font-size: clamp(22px, 1.6vw + 14px, 34px);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--color-black);
}

/* 記事本文（WordPress 投稿本文に出力されうる要素をあらかじめスタイリング） */
.article__body {
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  line-height: var(--lh-lg);
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

.article__body > * + * {
  margin-top: clamp(16px, 2vw, 24px);
}

/* 記事タイトルが h1 のため本文では h2 以下を使うが、
   管理画面のエディタから h1 が入っても崩れないよう定義しておく */
.article__body h1 {
  margin-top: clamp(36px, 5vw, 56px);
  font-size: clamp(24px, 1.4vw + 16px, 32px);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--color-navy);
}

.article__body h2 {
  margin-top: clamp(36px, 5vw, 56px);
  padding-bottom: clamp(8px, 1vw, 12px);
  border-bottom: 2px solid var(--color-accent);
  font-size: clamp(21px, 1vw + 15px, 27px);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--color-navy);
}

.article__body h3 {
  margin-top: clamp(28px, 4vw, 44px);
  font-size: clamp(18px, 0.6vw + 15px, 22px);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--color-navy);
}

.article__body h4 {
  margin-top: clamp(24px, 3vw, 36px);
  font-size: clamp(16px, 0.4vw + 14px, 19px);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--color-navy);
}

.article__body h5 {
  margin-top: clamp(20px, 2.5vw, 28px);
  font-size: var(--fz-base);
  font-weight: var(--fw-bold);
  line-height: 1.6;
  color: var(--color-primary);
}

/* リスト：reset.css で消している記号を、投稿本文の中だけ戻す
   （エディタから挿入された ul / ol にもそのまま効く） */
.article__body ul,
.article__body ol {
  padding-left: 1.4em;
}

.article__body ul {
  list-style: disc;
}

.article__body ol {
  list-style: decimal;
}

.article__body li + li {
  margin-top: 0.4em;
}

.article__body blockquote {
  margin-left: 0;
  padding: clamp(12px, 2vw, 20px) clamp(16px, 2.5vw, 24px);
  border-left: 4px solid var(--color-accent);
  background-color: var(--color-bg-alt);
  color: var(--color-gray);
}

.article__body a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* 表：コンテンツ幅に収まらない場合は横スクロール
   .table-wrap はテンプレートに手書きする場合用、
   .wp-block-table はエディタで表を挿入したときに付く figure */
.article__body .table-wrap,
.article__body .wp-block-table {
  margin-right: 0;
  margin-left: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.article__body table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: var(--fz-base);
}

.article__body th,
.article__body td {
  padding: clamp(10px, 1.4vw, 16px) clamp(12px, 1.6vw, 20px);
  border: 1px solid var(--color-border);
  text-align: left;
  line-height: 1.6;
  vertical-align: top;
}

.article__body th {
  background-color: var(--color-bg-alt);
  font-weight: var(--fw-bold);
  color: var(--color-navy);
  white-space: nowrap;
}

/* 画像：エディタから挿入すると figure.wp-block-image で囲まれる */
.article__body figure {
  margin-right: 0;
  margin-left: 0;
}

.article__body img {
  display: block;
  width: 100%;
  height: auto;
}

.article__body figcaption {
  margin-top: clamp(8px, 1vw, 12px);
  font-size: var(--fz-sm);
  line-height: 1.6;
  color: var(--color-gray);
}

/* 引用の出典 */
.article__body blockquote cite {
  display: block;
  margin-top: clamp(8px, 1vw, 12px);
  font-size: var(--fz-sm);
  font-style: normal;
}

/* 一覧へ戻るボタン */
.article__back {
  margin-top: clamp(40px, 6vw, 72px);
  text-align: center;
}

.article__back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: clamp(12px, 1.6vw, 16px) clamp(28px, 4vw, 48px);
  border: 1px solid var(--color-navy);
  background-color: var(--color-navy);
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-medium);
  color: var(--color-white);
  text-decoration: none;
  transition: opacity var(--transition-speed) var(--easing);
}

.article__back-link:hover {
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   お問い合わせ（フォーム）※ 静的マークアップ。CF7 化時にフォームタグへ置換
   -------------------------------------------------------------------------- */
.contact {
  padding: clamp(56px, 8vw, 110px) 0;
  background-color: var(--color-bg);
}

.contact__inner {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.contact__lead {
  margin: 0 0 clamp(28px, 4vw, 48px);
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  line-height: var(--lh-lg);
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

.form-row {
  margin-bottom: clamp(20px, 3vw, 28px);
}

.form-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(8px, 1vw, 12px);
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-medium);
  color: var(--color-navy);
}

/* 必須バッジ */
.form-label--required::after {
  content: "必須";
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background-color: var(--color-accent);
  color: var(--color-white);
  font-size: var(--fz-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: clamp(10px, 1.4vw, 14px) clamp(12px, 1.6vw, 16px);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  color: var(--color-primary);
  transition: border-color var(--transition-speed) var(--easing);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.form-textarea {
  min-height: 160px;
  line-height: var(--lh-lg);
  resize: vertical;
}

/* セレクト：ネイティブ矢印を消し、シェブロンを描画 */
.form-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right clamp(12px, 1.6vw, 16px) center;
  cursor: pointer;
}

/* 送信ボタン */
/* 送信ボタン前の注意書き（営業・売り込みのご連絡へのお断り） */
.form-note {
  margin: clamp(28px, 3.5vw, 40px) 0 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.2vw, 24px);
  background-color: var(--color-bg-alt);
  font-family: var(--font-jp);
  font-size: var(--fz-sm);
  line-height: var(--lh-lg);
  letter-spacing: 0.03em;
  color: var(--color-gray);
}

.contact-form__submit {
  margin-top: clamp(28px, 4vw, 44px);
  text-align: center;
}

.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(220px, 40vw, 320px);
  padding: clamp(14px, 2vw, 18px) clamp(40px, 6vw, 64px);
  border: none;
  border-radius: var(--radius-md);
  background-color: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-jp);
  font-size: calc(var(--fz-base) + 1px);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color var(--transition-speed) var(--easing);
}

.btn-submit:hover {
  background-color: var(--color-accent-hover);
}

/* --------------------------------------------------------------------------
   送信完了（サンクス）ページ
   -------------------------------------------------------------------------- */
.thanks {
  padding: clamp(56px, 8vw, 110px) 0;
  background-color: var(--color-bg);
}

.thanks__inner {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  text-align: center;
}

.thanks__message {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fz-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-lg);
  color: var(--color-navy);
}

.thanks__note {
  margin: clamp(20px, 3vw, 28px) auto 0;
  max-width: 44em;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  line-height: var(--lh-lg);
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

.thanks__action {
  margin-top: clamp(36px, 5vw, 56px);
}

.btn-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(220px, 40vw, 300px);
  padding: clamp(14px, 2vw, 18px) clamp(40px, 6vw, 56px);
  border: 1px solid var(--color-navy);
  border-radius: var(--radius-md);
  background-color: var(--color-navy);
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-medium);
  color: var(--color-white);
  text-decoration: none;
  transition: opacity var(--transition-speed) var(--easing);
}

.btn-home:hover {
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   FAQ（よくあるご質問）アコーディオン
   参考デザイン（Qバッジ＋質問＋シェブロン / 展開でAバッジ＋回答）を当サイト配色に置換
   -------------------------------------------------------------------------- */
.faq {
  padding: clamp(56px, 8vw, 110px) 0;
  background-color: var(--color-bg);
}

.faq__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.faq__item {
  border-top: 1px solid var(--color-border);
}

.faq__item:last-child {
  border-bottom: 1px solid var(--color-border);
}

/* 質問行（summary） */
.faq__q {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
  padding: clamp(18px, 2.4vw, 28px) clamp(4px, 1vw, 12px);
  list-style: none;
  cursor: pointer;
}

.faq__q::-webkit-details-marker {
  display: none;
}

/* Q / A バッジ（角丸の四角） */
.faq__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(28px, 3vw, 34px);
  height: clamp(28px, 3vw, 34px);
  border-radius: var(--radius-sm);
  background-color: var(--color-accent);
  font-family: 'Oswald', var(--font-en);
  font-size: calc(var(--fz-base) + 1px);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-white);
}

/* A バッジは白抜き（枠線＋文字がアクセント） */
.faq__badge--a {
  background-color: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}

.faq__q-text {
  flex: 1 1 auto;
  font-family: var(--font-jp);
  font-size: clamp(15px, 0.5vw + 13px, 18px);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--color-black);
}

/* 開閉シェブロン（開いている項目は反転） */
.faq__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform var(--transition-speed) var(--easing);
}

.faq__item[open] .faq__icon {
  transform: rotate(180deg);
}

/* block-size の 0 ⇄ auto をなめらかに補間できるようにする（対応ブラウザのみ有効） */
:root {
  interpolate-size: allow-keywords;
}

/* 回答：details のコンテンツを ::details-content でネイティブになめらか開閉（JS不要）。
   非対応ブラウザではアニメーションなしの即時トグルにフォールバックする。 */
.faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size var(--transition-speed) var(--easing),
    content-visibility var(--transition-speed) var(--easing) allow-discrete;
}

.faq__item[open]::details-content {
  block-size: auto;
}

/* 回答本体 */
.faq__a {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.6vw, 20px);
  padding: 0 clamp(4px, 1vw, 12px) clamp(20px, 3vw, 32px);
}

/* --------------------------------------------------------------------------
   ご挨拶（代表メッセージ）
   参考デザインを忠実再現：グレー面に左メッセージ+氏名 / 右に人物写真、
   下に白いプロフィールカードを重ねる。色は当サイト配色（アクセント）に置換
   -------------------------------------------------------------------------- */
.greeting {
  position: relative;
  scroll-margin-top: calc(var(--header-height) + 24px);
}

/* グレーのステージ（相対配置。写真が上端からはみ出せるよう overflow は切らない） */
.greeting__stage {
  position: relative;
  min-height: clamp(300px, 34vw, 480px);
  background-color: var(--color-bg-alt);
}

/* 左：メッセージ・肩書き・氏名（上寄せ・写真より前面。左パディングを広めにして右寄りに配置） */
.greeting__lead {
  position: relative;
  z-index: 1;
  max-width: 64%;
  padding: clamp(40px, 6vw, 96px) clamp(24px, 3vw, 56px) clamp(40px, 6vw, 96px) clamp(72px, 8vw, 140px);
}

/* メインコピー：指定の改行位置以外で折り返さないようサイズ調整＋nowrap */
.greeting__catch {
  margin: 0 0 clamp(24px, 3.5vw, 44px);
  font-family: var(--font-jp);
  font-size: clamp(24px, 1.2vw + 14px, 36px);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--color-accent);
}

.greeting__role {
  margin: 0 0 clamp(2px, 0.4vw, 6px);
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  color: var(--color-accent);
}

.greeting__name {
  margin: 0;
  font-family: var(--font-jp);
  font-size: clamp(22px, 1vw + 16px, 32px);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  color: var(--color-black);
}

/* 右：人物写真（少し小さめ。グレー面の上端から頭部がはみ出す配置） */
.greeting__photo {
  position: absolute;
  right: clamp(16px, 6vw, 100px);
  top: clamp(-32px, -2.2vw, -16px);
  height: clamp(300px, 33vw, 440px);
  z-index: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.greeting__photo img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}

/* 白いプロフィールカード（左右中央・幅広め。ステージ下部に重ねる） */
.greeting__profile {
  position: relative;
  z-index: 2;
  width: min(88%, 940px);
  margin: clamp(-90px, -7vw, -40px) auto 0;
  padding: clamp(28px, 3.5vw, 52px) clamp(24px, 3vw, 56px);
  background-color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.greeting__bio {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-lg);
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   会社概要一覧（ラベル + 内容の2カラム）
   参考デザイン忠実再現：各行の上罫線を「ラベル列幅ぶんはアクセント色(2px)＋
   残りはライトグレー(1px)」の2トーンにする。色は当サイト配色に置換
   -------------------------------------------------------------------------- */
/* ※ 採用ページの福利厚生一覧（.benefits）も同じデザインのため、
   スタイルを重複させずここでまとめて定義している */
.company-list,
.benefits {
  --company-label-w: clamp(112px, 22%, 200px);
  margin: clamp(8px, 1.5vw, 16px) 0 0;
}

.company-list__row,
.benefits__row {
  display: grid;
  grid-template-columns: var(--company-label-w) 1fr;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(20px, 2.6vw, 32px) 0;
  background-image:
    linear-gradient(var(--color-accent), var(--color-accent)),
    linear-gradient(var(--color-border), var(--color-border));
  background-repeat: no-repeat;
  background-size: var(--company-label-w) 2px, 100% 1px;
  background-position: left top, left top;
}

.company-list__label,
.benefits__name {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-md);
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

.company-list__value,
.benefits__text,
.benefits__list li {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-lg);
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

/* 値の中のリンク（関連団体など）：リンクと分かるよう水色＋下線を常時表示 */
.company-list__value a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.company-list__value a:hover {
  text-decoration: underline;
  opacity: 0.75;
}

/* 工場敷地など、値の中の入れ子表（区分 / 名称 / 数値を列で揃える） */
.company-sublist {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: start;
  gap: clamp(2px, 0.6vw, 6px) clamp(16px, 2.4vw, 36px);
}

.company-sublist__cat {
  font-weight: var(--fw-medium);
  color: var(--color-navy);
}

/* --------------------------------------------------------------------------
   沿革（年号 + 内容のタイムライン）
   参考デザイン忠実再現：左に大きめの年号（アクセント色）／右に内容。
   各行の上罫線は年号列を除いた右側のみに引く。色は当サイト配色に置換
   -------------------------------------------------------------------------- */
.history {
  /* 縦線・ドットの基準X位置（年号列の幅と共有してズレを防ぐ） */
  --history-axis: clamp(110px, 13vw, 150px);
  margin: clamp(8px, 1.5vw, 16px) 0 0;
}

/* 中央の縦線を軸に、年号＝左半分（右寄せ）／内容＝右半分（左寄せ） */
.history__row {
  position: relative;
  display: grid;
  grid-template-columns: var(--history-axis) 1fr;
  align-items: baseline;
  padding: clamp(22px, 3vw, 40px) 0;
}

/* タイムライン縦線（左右中央。行の全高を貫くので連続した1本に見える） */
.history__row::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--history-axis);
  width: 2px;
  transform: translateX(-50%);
  background-color: var(--color-accent);
}

/* タイムラインのドット（左右中央・各行の年号の高さ付近） */
.history__row::after {
  content: "";
  position: absolute;
  top: calc(clamp(22px, 3vw, 40px) + 0.8em);
  left: var(--history-axis);
  width: clamp(11px, 1.2vw, 15px);
  height: clamp(11px, 1.2vw, 15px);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color-accent);
  z-index: 1;
}

/* 先頭行の縦線はドット位置から始める（ドットより上に飛び出させない） */
.history__row:first-child::before {
  top: calc(clamp(22px, 3vw, 40px) + 0.8em);
}

.history__year {
  margin: 0;
  text-align: left;
  font-family: var(--font-jp);
  font-size: clamp(15px, 0.7vw + 10px, 22px);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--color-accent);
}

.history__desc {
  margin: 0;
  /* 線→内容 の余白を 線→年号 の余白（約58px）に合わせる */
  padding-left: clamp(32px, 4vw, 58px);
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-lg);
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   会社案内：アクセス（Google マップ埋め込み）
   -------------------------------------------------------------------------- */
.access {
  margin-top: clamp(24px, 3vw, 40px);
}

.access__map {
  width: 100%;
  height: clamp(340px, 46vw, 460px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.access__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* アクセス情報（地図の下・本文サイズ） */
.access__info {
  margin-top: clamp(20px, 2.5vw, 28px);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(10px, 1.6vw, 24px);
  row-gap: clamp(10px, 1.4vw, 14px);
  align-items: baseline;
}

.access__info-label {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-md);
  color: var(--color-primary);
  white-space: nowrap;
}

.access__info-desc {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-lg);
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   設備（equipment.php）
   -------------------------------------------------------------------------- */
/* セクションのリード文（設備ページ・強みページで共通） */
.equip-lead,
.strength-lead,
.req-lead {
  margin: 0 0 clamp(28px, 4vw, 56px);
  font-family: var(--font-jp);
  font-size: var(--fz-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-lg);
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

/* 設備紹介の動画（コンテンツ幅の半分・左揃え。縦横比は動画に合わせる） */
.equip-video {
  max-width: 50%;
}

.equip-video video {
  display: block;
  width: 100%;
  height: auto;
  background-color: var(--color-bg-alt);
}

/* 工場の外観写真（見出しバナー直下・コンテンツ幅いっぱい）
   バナー側が margin-bottom を持つため、ここでは下余白のみ指定する */
.equip-photo {
  margin: 0 0 clamp(28px, 4vw, 48px);
}

.equip-photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* 小ブロック内（小見出しと表・リストの間）に置く写真は下余白を詰める */
.equip-photo--inner {
  margin-bottom: clamp(16px, 2.2vw, 28px);
}

/* 小ブロック内の写真を横並びで見せる（SP は responsive.css で縦積み） */
.equip-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin: 0 0 clamp(16px, 2.2vw, 28px);
}

.equip-photos img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* 工場セクション内の小ブロック（小見出し＋表 or リスト） */
.equip-block + .equip-block {
  margin-top: clamp(32px, 4.5vw, 56px);
}

.equip-block__title {
  margin: 0 0 clamp(12px, 1.8vw, 20px);
  padding-left: clamp(10px, 1.2vw, 14px);
  border-left: 4px solid var(--color-accent);
  font-family: var(--font-jp);
  font-size: var(--fz-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-sm);
  letter-spacing: 0.04em;
  color: var(--color-primary);
}

/* 設備一覧テーブル */
/* ※ .table-wrap の overflow-x:auto と表の min-width は base.css で定義済み */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  color: var(--color-primary);
}

.spec-table th,
.spec-table td {
  padding: clamp(10px, 1.3vw, 15px) clamp(12px, 1.6vw, 20px);
  border: 1px solid var(--color-border);
  text-align: left;
  line-height: var(--lh-md);
  vertical-align: middle;
}

.spec-table thead th {
  background-color: var(--color-navy);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  color: var(--color-white);
}

.spec-table tbody th {
  width: 1%;
  background-color: var(--color-bg-alt);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

/* 数値系セル（容量・基数・台数）は右寄せ
   ※ .spec-table th/td の text-align:left に勝つよう詳細度を上げる */
.spec-table .spec-table__num {
  text-align: right;
  white-space: nowrap;
}

/* 2カラムの表は横スクロール開始幅を下げる（base.css の min-width:600px を上書き） */
.table-wrap > .spec-table--narrow {
  min-width: 340px;
}

/* 部屋・施設など数量を持たない項目のリスト */
.equip-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(8px, 1.2vw, 12px) clamp(16px, 2.5vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.equip-list li {
  position: relative;
  padding-left: 18px;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  line-height: var(--lh-md);
  color: var(--color-primary);
}

.equip-list li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

.faq__a-text {
  margin: 0;
  padding-top: 3px;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-lg);
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

.news__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 64px);
}

.news__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(24px, 4vw, 80px);
  padding-bottom: clamp(40px, 4vw, 64px);
}

.news__title-group {
  display: flex;
  flex-direction: column;
}

.news__title {
  display: block;
  font-family: 'Oswald', var(--font-en);
  font-size: calc(clamp(44px, 5vw, 72px) + 6px);
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.news__label {
  font-family: var(--font-jp);
  font-size: calc(var(--fz-sm) + 2px);
  color: var(--color-gray);
  letter-spacing: 0.15em;
  margin: 0;
}

/* .news__lead は撤去（HTMLから削除済み） */

/* 「一覧を見る」ボタン（PRODUCTS の view-more と同一デザイン） */
.news__view-more {
  display: inline-flex;
  align-items: center;
  width: 300px;
  min-width: 300px;
  min-height: 72px;
  justify-self: end;
  margin-bottom: clamp(8px, 1vw, 16px);
  color: var(--color-primary);
  text-decoration: none;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: calc(var(--fz-base) + 4px);
  letter-spacing: 0.1em;
  border-bottom: 1.5px solid var(--color-primary);
  transition: background var(--transition-speed) var(--easing),
              border-color var(--transition-speed) var(--easing),
              translate var(--transition-speed) var(--easing);
}

.news__view-more-text {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0 8px 0 12px;
}

.news__view-more-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: 'Oswald', var(--font-en);
  font-weight: var(--fw-regular);
  font-size: 1.2em;
  transition: background var(--transition-speed) var(--easing);
}

.news__view-more:hover {
  border-color: var(--color-accent);
  translate: 8px 0;
  opacity: 1;
}

.news__view-more:hover .news__view-more-arrow {
  background: var(--color-accent-hover);
}

/* お知らせ一覧 */
.news__list {
  border-top: 1px solid var(--color-border);
}

.news__item {
  display: grid;
  grid-template-columns: 200px auto 1fr auto;
  gap: clamp(16px, 2.4vw, 40px);
  align-items: center;
  padding: clamp(20px, 2.4vw, 32px) clamp(8px, 1.5vw, 24px);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-primary);
  transition: background var(--transition-speed) var(--easing),
              opacity var(--transition-speed) var(--easing);
}

.news__item:hover {
  background: var(--color-bg-alt);
  opacity: 1;
}

.news__date {
  font-family: 'Oswald', var(--font-en);
  font-size: calc(var(--fz-sm) + 2px);
  font-weight: var(--fw-medium);
  color: var(--color-accent-hover);
  letter-spacing: 0.05em;
}

/* お知らせタグ（日付の右に表示するカテゴリラベル） */
.news__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 14px;
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent);
  font-family: var(--font-jp);
  font-size: var(--fz-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.news__item-title {
  font-family: var(--font-jp);
  font-size: calc(var(--fz-base) + 2px);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  line-height: 1.6;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent);
  font-family: 'Oswald', var(--font-en);
  font-size: 1.5em;
  line-height: 1;
  transition: translate var(--transition-speed) var(--easing);
}

.news__item:hover .news__arrow {
  translate: 4px 0;
}

/* News: fade-up 順序 */
.news__head.fade-up              { transition-delay: 0s; }
.news__item.fade-up:nth-child(1) { transition-delay: 0.1s; }
.news__item.fade-up:nth-child(2) { transition-delay: 0.2s; }
.news__item.fade-up:nth-child(3) { transition-delay: 0.3s; }

/* SP: レイアウト調整 */
@media (max-width: 768px) {
  .news__head {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vw, 32px);
    align-items: start;
  }
  .news__view-more {
    justify-self: start;
  }
  .news__item {
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas:
      "date  tag   .     arrow"
      "title title title arrow";
    row-gap: 6px;
    column-gap: clamp(8px, 2vw, 16px);
    padding: clamp(16px, 4vw, 24px) 0;
    align-items: center;
  }
  .news__date {
    grid-area: date;
  }
  .news__tag {
    grid-area: tag;
    padding: 3px 10px;
    font-size: calc(var(--fz-sm) - 1px);
  }
  .news__item-title {
    grid-area: title;
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
  }
  .news__arrow {
    grid-area: arrow;
  }
}

/* --------------------------------------------------------------------------
   SITE FOOTER
   参考: 添付画像のレイアウト（LOGO+住所+TEL / 事業内容 / 会社案内 / その他）
   背景色はサイトのアクセントカラー（--color-accent）
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-navy); /* HERO セクションと同じ濃紺 */
  color: var(--color-white);
  padding: clamp(60px, 6vw, 100px) 0 clamp(28px, 3vw, 44px);
}

.site-footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 64px);
}

.site-footer__grid {
  display: grid;
  /* 4列（ブランド／取扱製品／主なめっき工程＋会社案内／その他）。
     名称の長い列を広めに取る */
  grid-template-columns: 1.1fr 1.35fr 1.2fr 1fr;
  gap: clamp(24px, 3vw, 56px);
  padding-bottom: clamp(40px, 4vw, 60px);
}

/* 左：ブランド情報（ロゴ + 住所 + TEL） */
.site-footer__brand {
  display: flex;
  flex-direction: column;
}

.site-footer__logo {
  display: inline-block;
  margin-bottom: clamp(24px, 3vw, 44px);
  text-decoration: none;
}

.site-footer__logo img {
  display: block;
  height: auto;
  max-height: 80px;
  width: auto;
  max-width: 220px;
}

/* 旧プレースホルダー（logo_footer.png 導入前のフォールバック。現状は未使用） */
.site-footer__logo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 80px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Oswald', var(--font-en);
  font-size: 1.1em;
  font-weight: var(--fw-medium);
  letter-spacing: 0.2em;
}

.site-footer__address {
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-style: normal;
  color: var(--color-white);
  line-height: 1.85;
  margin: 0 0 6px;
}

.site-footer__tel,
.site-footer__fax {
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  color: var(--color-white);
  margin: 0;
}

/* 右：ナビ列 */
.site-footer__col {
  color: var(--color-white);
}

/* 1つの列に2ブロック（主なめっき工程＋会社案内）を縦に積む */
.site-footer__col--stack {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 44px);
}

.site-footer__heading {
  font-family: var(--font-jp);
  font-size: calc(var(--fz-base) + 4px);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  letter-spacing: 0.05em;
  margin: 0 0 clamp(20px, 2vw, 32px);
}

.site-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 20px);
}


.site-footer__list a {
  color: var(--color-white);
  text-decoration: none;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  transition: opacity var(--transition-speed) var(--easing);
}

.site-footer__list a:hover {
  opacity: 0.65;
}

/* 下部：区切り線 + コピーライト */
.site-footer__bottom {
  padding-top: clamp(24px, 2.5vw, 32px);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  text-align: center;
}

.site-footer__copyright {
  font-family: var(--font-en);
  font-size: var(--fz-sm);
  color: var(--color-white);
  letter-spacing: 0.05em;
  margin: 0;
  opacity: 0.9;
}

/* SP：見出し3つ（事業内容 / 会社案内 / その他）は縦積み、
   各リンク一覧の中身は2カラム表示 */
@media (max-width: 768px) {
  .site-footer {
    padding: clamp(40px, 10vw, 72px) 0 clamp(20px, 4vw, 32px);
  }
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 40px);
  }
  .site-footer__logo-placeholder {
    width: 140px;
    height: 64px;
  }
  .site-footer__heading {
    margin-bottom: clamp(14px, 3vw, 20px);
  }
  /* SP のみリンク一覧を 2 カラム grid に */
  .site-footer__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(16px, 4vw, 32px);
    row-gap: clamp(10px, 2.5vw, 14px);
  }
}

/* ==========================================================================
   ページタイトル帯（下層ページ共通ヒーロー）
   ネイビー全面背景 + 装飾写真（金属コイル）の薄いオーバーレイ + 中央に白テキスト
   固定ヘッダー（position:fixed）に被らないよう上パディングでヘッダー高さを確保する
   ========================================================================== */
.page-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(220px, 24vw, 360px);
  padding: calc(var(--header-height) + clamp(40px, 5vw, 72px)) 20px clamp(40px, 5vw, 72px);
  background-color: var(--color-navy);
  overflow: hidden;
  text-align: center;
}

/* 装飾写真：全面カバー（意味を持たない装飾のため alt 空・aria-hidden） */
.page-title__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ネイビーのオーバーレイ。右へ向けて僅かに濃くし、写真を右側へフェードさせる */
.page-title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-navy) 80%, transparent) 0%,
    color-mix(in srgb, var(--color-navy) 88%, transparent) 55%,
    color-mix(in srgb, var(--color-navy) 95%, transparent) 100%);
}

.page-title__inner {
  position: relative;
  z-index: 2;
}

/* 和文の大見出し（h1）。サイト共通の和文フォント（ゴシック）を使用 */
.page-title__jp {
  margin: 0;
  /* 大見出しは英字（Oswald）で表示 */
  font-family: 'Oswald', var(--font-en);
  font-size: clamp(28px, 2vw + 18px, 46px);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: 0.08em;
  /* letter-spacing 分の右アキを相殺し、光学的に中央へ寄せる */
  text-indent: 0.08em;
  color: var(--color-white);
  /* ハイフン等での折り返しを防ぎ1行固定（SPでヘッダーに食い込むのを防ぐ） */
  white-space: nowrap;
}

/* 英字サブ（既存セクション見出しと同じ Oswald 系） */
.page-title__en {
  margin: clamp(14px, 1.6vw, 22px) 0 0;
  /* 小見出しは和文フォントで表示 */
  font-family: var(--font-jp);
  font-size: clamp(15px, 0.4vw + 13px, 18px);
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  color: var(--color-white);
}

/* SP: 帯を低めにし、ヘッダー高さ・文字サイズ・字間を調整 */
@media (max-width: 768px) {
  .page-title {
    /* ヘッダー下に余裕をもって文字が収まるよう min-height を確保 */
    min-height: clamp(180px, 48vw, 240px);
    padding: calc(var(--header-height-sp) + clamp(28px, 8vw, 48px)) 20px clamp(28px, 8vw, 48px);
  }
  .page-title__jp {
    font-size: clamp(24px, 7vw, 34px);
    letter-spacing: 0.06em;
    text-indent: 0.06em;
  }
  .page-title__en {
    font-size: clamp(14px, 3vw, 16px);
    letter-spacing: 0.08em;
    text-indent: 0.08em;
  }
}

/* ==========================================================================
   強み・品質保証体制：強みの3カラム
   （番号バッジ + 見出しを1行に、その下に本文）
   ========================================================================== */
.strength-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
  /* 上辺からはみ出す丸数字の分だけ上に余白を確保する */
  margin: clamp(24px, 2.4vw, 32px) 0 0;
  padding: 0;
  list-style: none;
}

/* カードの背景（アクセントカラー10%）・角丸。外枠はなし
   上 padding は、はみ出した丸数字と本文が重ならない分を確保する */
.strength-point {
  position: relative;
  padding: clamp(36px, 3.8vw, 50px) clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 28px);
  border-radius: var(--radius-md);
  background-color: var(--color-accent-10);
}

.strength-point__title {
  margin: 0 0 clamp(10px, 1.4vw, 16px);
  /* 見出しと本文の区切り線 */
  padding-bottom: clamp(10px, 1.4vw, 16px);
  border-bottom: 1px solid var(--color-gray-light);
  font-family: var(--font-jp);
  font-size: var(--fz-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-sm);
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

/* 丸数字。カード上辺の左右中央に、半分はみ出す位置で配置する */
.strength-point__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(40px, 3.4vw, 50px);
  height: clamp(40px, 3.4vw, 50px);
  border-radius: 50%;
  background-color: var(--color-accent);
  font-family: var(--font-en);
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-white);
}

.strength-point__text {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-lg);
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   品質保証体制：カード（左に見出し + 本文、右に写真）
   色味は強みカードに合わせる（背景 = アクセント10% / 区切り線 = グレー）
   -------------------------------------------------------------------------- */
.quality-cards {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  margin: clamp(24px, 2.4vw, 32px) 0 0;
  padding: 0;
  list-style: none;
}

.quality-card {
  display: grid;
  grid-template-columns: 1fr clamp(260px, 32%, 380px);
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(24px, 3vw, 44px);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
}

/* HTML では写真を先に記述し、SP の縦積みで写真が上にくるようにしている。
   PC では明示配置で「左に本文・右に写真」に戻す */
.quality-card__body {
  grid-column: 1;
  grid-row: 1;
}

/* 写真。元画像に合わせた 3:2 でトリミングなし（読み込み前はグレーの下地） */
.quality-card__media {
  grid-column: 2;
  grid-row: 1;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--color-gray-light);
}

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

.quality-card__title {
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  padding-bottom: clamp(14px, 1.6vw, 20px);
  border-bottom: 1px solid var(--color-gray-light);
  font-family: var(--font-jp);
  font-size: var(--fz-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-sm);
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

.quality-card__text {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-lg);
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

/* 補足（※〜） */
.strength-point__note {
  margin: clamp(6px, 0.8vw, 10px) 0 0;
  font-family: var(--font-jp);
  font-size: var(--fz-sm);
  line-height: var(--lh-md);
  letter-spacing: 0.02em;
  color: var(--color-gray);
}

/* ==========================================================================
   製品詳細（左サイドナビ + 右本文の2カラム）
   ========================================================================== */
.detail {
  padding: clamp(56px, 8vw, 120px) 0;
  background-color: var(--color-bg);
}

/* 背景をグレーに切り替えるセクション（品質保証体制など） */
.detail--alt {
  background-color: var(--color-bg-alt);
}

.detail__inner {
  /* 参考画像に合わせ、中央寄せ(max-width)をやめてサイドナビを画面左端寄りに配置。
     ページ左右パディング内で全幅に広げ、ナビと本文の間隔を広くとって本文を右へ送る */
  margin: 0;
  padding: 0 clamp(24px, 5vw, 80px);
  display: grid;
  grid-template-columns: clamp(190px, 16vw, 240px) 1fr;
  gap: clamp(40px, 8vw, 140px);
  align-items: start;
}

/* サイドナビを持たないページ用。本文を1カラムにし、
   サイト標準のコンテナ幅（中央寄せ）に収める */
.detail__inner--single {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  grid-template-columns: 1fr;
}

/* サイドナビはスクロール中も追従（固定ヘッダー分オフセット） */
.detail__aside {
  position: sticky;
  top: calc(var(--header-height) + 24px);
}

/* 本文カラム。グリッドアイテムの既定 min-width:auto を打ち消す。
   これがないと、幅の広い中身（表など）の最小幅がトラックを押し広げ、
   SP で本文・写真・見出しが画面右にはみ出して見切れる */
.detail__main {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   サイドナビ（現在地に○＝アクセントカラー / 右に開閉キャレット）
   -------------------------------------------------------------------------- */
.side-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.side-nav__item + .side-nav__item {
  margin-top: clamp(20px, 2.4vw, 32px);
}

/* [○の枠][テキスト][キャレット] の3カラム。○枠は常に確保しテキスト開始位置を揃える */
.side-nav__link {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color-gray);
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  line-height: 1.4;
  transition: color var(--transition-speed) var(--easing);
}

/* ○（ドット）: 既定は非表示。アクティブ項目のみアクセントカラーで表示 */
.side-nav__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: transparent;
}

/* 右端の開閉キャレット（下向き） */
.side-nav__caret {
  justify-self: end;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0.55;
}

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

/* アクティブ：○をアクセントカラーで表示し、テキストを主要色＋太字に */
.side-nav__item.is-active .side-nav__dot {
  background-color: var(--color-accent);
}

.side-nav__item.is-active .side-nav__link {
  color: var(--color-primary);
  font-weight: var(--fw-bold);
}

/* --------------------------------------------------------------------------
   セクション見出しバナー（左：ネイビー面にEN大見出し+JP見出し / 右：写真をブルー基調に）
   -------------------------------------------------------------------------- */
.section-banner {
  position: relative;
  /* flex にすることで、ネイビー面（パネル）が align-items:stretch でバナー高さいっぱいに伸び、
     min-height がパネルの中身より高くても青背景が下で切れない。写真は position:absolute で背面全面 */
  display: flex;
  /* 写真を背面全面に置き、前面のネイビー面（左）の右辺を斜めにクリップして境界を斜線にする */
  min-height: clamp(100px, 10vw, 150px);
  margin-bottom: clamp(40px, 6vw, 80px);
  overflow: hidden;
  /* サイドナビのアンカー着地時に、固定ヘッダーの裏に見出しが隠れないよう上オフセット */
  scroll-margin-top: calc(var(--header-height) + 24px);
}

/* 前セクションとの区切り用に上部余白を追加するバナー（例：6価クロムめっき） */
.section-banner--gap {
  margin-top: 100px;
}

/* 左：ネイビー面（テキストは左寄せ・上下中央） */
.section-banner__panel {
  position: relative;
  z-index: 1;
  width: 56%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background-color: var(--color-navy);
  padding: clamp(18px, 2.8vw, 30px) clamp(24px, 5vw, 80px);
  /* 右辺を斜めにクリップ（上辺は右いっぱい・下辺は 72px 内側）＝境界が斜線に */
  clip-path: polygon(0 0, 100% 0, calc(100% - 72px) 100%, 0 100%);
}

.section-banner__en {
  margin: 0;
  font-family: 'Oswald', var(--font-en);
  font-size: clamp(22px, 3vw, 40px);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-white);
  /* 見出しは1行固定（改行させない） */
  white-space: nowrap;
}

.section-banner__jp {
  margin: clamp(3px, 0.6vw, 6px) 0 0;
  font-family: var(--font-jp);
  font-size: clamp(14px, 0.6vw + 12px, 18px);
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  color: var(--color-white);
}

/* 右：写真をブルー基調に着色（ネイビーを乗算オーバーレイ） */
.section-banner__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* パンで隙間が出ても背景がネイビーになるよう保険 */
  background-color: var(--color-navy);
}

.section-banner__media img {
  /* 絶対配置にして画像アスペクトがバナー高さに影響しないようにする */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 光沢面が中心に来るよう、水平は中央・垂直はやや上を基準に切り出す */
  object-position: 50% 40%;
  display: block;
  /* 右へ大きくパン（scale で覆う余白を確保しつつ translateX で右移動） */
  transform: scale(1.0) translateX(12%);
  transform-origin: 50% 40%;
}

/* 写真を寄せ/パンなしの中央フィルにする変種（フィルする範囲で最大限に引く＝切り取り最小） */
.section-banner--fit .section-banner__media img {
  object-position: 50% 50%;
  transform: none;
}

.section-banner__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* ヒーロー（.page-title::after）と同じネイビーのグラデーションオーバーレイ */
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-navy) 80%, transparent) 0%,
    color-mix(in srgb, var(--color-navy) 88%, transparent) 55%,
    color-mix(in srgb, var(--color-navy) 95%, transparent) 100%);
}

/* --------------------------------------------------------------------------
   製品ブロック（左：写真 / 右：見出し + 品名 + 説明）
   -------------------------------------------------------------------------- */
.product-block {
  display: grid;
  grid-template-columns: minmax(0, 44%) 1fr;
  gap: clamp(28px, 4vw, 56px);
  /* テキストを写真の高さに対して上下中央に揃える */
  align-items: center;
}

/* 製品ブロックを縦に並べたときの間隔 */
.product-block + .product-block {
  margin-top: clamp(48px, 7vw, 100px);
}

.product-block__media {
  overflow: hidden;
}

.product-block__media img {
  width: 100%;
  height: auto;
  display: block;
}

/* 大見出し + 環境バッジ */
.product-block__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  font-family: var(--font-jp);
  font-size: clamp(22px, 0.9vw + 16px, 30px);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--color-primary);
}

.product-block__badge {
  flex-shrink: 0;
  padding: 4px 12px;
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  font-size: var(--fz-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  color: var(--color-gray);
}

/* 品名（○付き）+ 説明 */
.product-variant {
  margin-top: clamp(20px, 2.4vw, 32px);
}

.product-variant__title {
  margin: 0 0 clamp(10px, 1.2vw, 16px);
  font-family: var(--font-jp);
  font-size: clamp(16px, 0.5vw + 14px, 19px);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

/* ○ マーク（本文色の小さな円。参考画像の品名頭の○を再現） */
.product-variant__title::before {
  content: "○";
  margin-right: 0.3em;
  font-weight: var(--fw-regular);
}

.product-variant__desc {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-lg);
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

.product-variant__desc + .product-variant__desc {
  margin-top: clamp(12px, 1.5vw, 20px);
}

/* --------------------------------------------------------------------------
   製品スペック（■付きラベル + 本文。製品説明の下に配置）
   -------------------------------------------------------------------------- */
/* 製品の種類別説明（写真なし。ヘッダー／フッターのアンカーリンク先） */
.product-types {
  margin-top: clamp(28px, 3.4vw, 48px);
  border-top: 1px solid var(--color-border);
}

.product-type {
  padding: clamp(20px, 2.4vw, 32px) 0;
  border-bottom: 1px solid var(--color-border);
}

.product-type__title {
  margin: 0 0 clamp(6px, 0.8vw, 10px);
  font-family: var(--font-jp);
  font-size: clamp(16px, 0.5vw + 14px, 20px);
  font-weight: var(--fw-bold);
  line-height: var(--lh-md);
  color: var(--color-navy);
}

.product-type__desc {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-lg);
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

/* アンカーで着地したとき、固定ヘッダーの裏に隠れないようにする */
.section-banner,
.product-type,
.tech-item {
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.product-spec {
  margin-top: clamp(8px, 1.1vw, 14px);
}

.product-spec__label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 clamp(2px, 0.4vw, 5px);
  font-family: var(--font-jp);
  font-size: clamp(15px, 0.5vw + 13px, 18px);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

/* ラベル頭の黒い四角（■） */
.product-spec__label::before {
  content: "";
  width: 0.8em;
  height: 0.8em;
  flex-shrink: 0;
  background-color: var(--color-black);
}

.product-spec__body {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-lg);
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   主なめっき工程：工程フロー（番号バッジ + 見出し + 説明 + 写真のカードを縦積み）
   参考デザインを忠実再現。色は当サイト配色に置換（バッジ＝アクセント / 見出し＝ネイビー /
   背景＝bg-alt のグレー面に白カード）
   -------------------------------------------------------------------------- */
.process-flow {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--gradient-metal);
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.process-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr clamp(220px, 26vw, 320px);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(24px, 3vw, 44px);
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

/* フロー縦線：カード間の中央に、次のカードへ繋ぐコネクタ（最後のカードは無し）。
   高さは .process-flow の gap と同値にして、カード間の隙間をちょうど埋める */
.process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: clamp(20px, 2.4vw, 32px);
  /* 直線（実線）+ 少し薄いグレー（--color-gray を白と混色） */
  border-left: 4px solid color-mix(in srgb, var(--color-gray) 75%, var(--color-white));
}

.process-step__head {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 18px);
  margin-bottom: clamp(12px, 1.5vw, 20px);
}

/* 番号バッジ：青丸（アクセント塗り＋白文字）。単一番号は円、複数表記はピル型に自動でなる */
.process-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: clamp(36px, 5vw, 50px);
  height: clamp(36px, 5vw, 50px);
  padding: 0 0.5em;
  border-radius: 999px;
  background: var(--color-accent);
  font-family: 'Oswald', var(--font-en);
  font-size: clamp(16px, 3vw, 20px);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--color-white);
}

.process-step__title {
  margin: 0;
  font-family: var(--font-jp);
  font-size: clamp(19px, 1vw + 14px, 26px);
  font-weight: var(--fw-bold);
  line-height: 1.35;
  color: var(--color-navy);
}

.process-step__desc {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-lg);
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

.process-step__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   技術・設備紹介アイテム（左アクセントバー付きラベル + 大見出し + 全幅写真 + 説明）
   参考デザインを忠実再現。色は当サイト配色に置換（ラベル/バー＝アクセント）
   -------------------------------------------------------------------------- */
.tech-item {
  margin-top: clamp(28px, 4vw, 56px);
}

/* ラベル+見出しを左のアクセントバーでまとめる */
.tech-item__head {
  border-left: 4px solid var(--color-accent);
  padding-left: clamp(16px, 2vw, 28px);
}

.tech-item__label {
  margin: 0;
  font-family: var(--font-en);
  font-size: clamp(14px, 0.4vw + 12px, 16px);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

.tech-item__title {
  margin: clamp(8px, 1vw, 14px) 0 0;
  font-family: var(--font-jp);
  font-size: clamp(26px, 2vw + 16px, 30px);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--color-black);
}

.tech-item__media {
  margin-top: clamp(20px, 3vw, 40px);
}

.tech-item__media img {
  display: block;
  width: 100%;
  aspect-ratio: 12 / 5;
  object-fit: cover;
}

.tech-item__desc {
  margin: clamp(16px, 2vw, 28px) 0 0;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-lg);
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

/* クロムめっきの安全性：本文（コンテンツ幅いっぱいに表示） */
.detail-body {
  max-width: none;
}

.detail-body p {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-lg);
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

.detail-body p + p {
  margin-top: clamp(8px, 1.2vw, 16px);
}

/* 主な生産部品：部品リスト（アクセントの四角マーカー付き。PC2カラム／SP1カラム） */
.detail-body .parts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px) clamp(24px, 5vw, 64px);
}

.detail-body .parts-list li {
  position: relative;
  padding-left: 1.5em;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  line-height: var(--lh-md);
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

.detail-body .parts-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background-color: var(--color-accent);
}

/* リスト直後の締め文に上余白 */
.detail-body .parts-list + p {
  margin-top: clamp(20px, 3vw, 32px);
}

/* SP: 1カラムに積み、サイドナビは追従を解除して上部に置く */
@media (max-width: 768px) {
  .detail__inner {
    grid-template-columns: 1fr;
    gap: clamp(24px, 6vw, 40px);
  }
  /* SP版ではサイドナビを非表示にする */
  .detail__aside {
    display: none;
  }
  /* 見出しバナーは縦積み（ネイビー面の上に写真） */
  /* SP: 縦積み（ネイビー面の上に写真）に戻し、斜めクリップは解除 */
  .section-banner {
    min-height: 0;
  }
  .section-banner__panel {
    width: 100%;
    clip-path: none;
  }
  /* SP: 見出しは写真をなくし、ネイビー面＋テキストのみにする */
  .section-banner__media {
    display: none;
  }
  /* 製品ブロックも縦積み（写真が上・テキストが下） */
  .product-block {
    grid-template-columns: 1fr;
    gap: clamp(20px, 5vw, 32px);
  }
}

/* ==========================================================================
   ページ下部：関連ページリンク（写真 + タイトル + READ MORE を2カラム）
   ========================================================================== */
.page-links {
  padding-bottom: clamp(56px, 8vw, 110px);
  background-color: var(--color-bg);
}

/* 横線はコンテンツ幅に合わせて inner に付与。少し長くするため container より広めに設定 */
.page-links__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 110px) var(--container-padding) 0;
  border-top: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
}

.page-link {
  display: grid;
  grid-template-columns: minmax(0, 45%) 1fr;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  text-decoration: none;
  color: var(--color-primary);
}

/* 写真プレースホルダー（後日差し替え・現状グレーアウト） */
.page-link__media {
  aspect-ratio: 3 / 2;
  background-color: var(--color-bg-alt);
  overflow: hidden;
}

.page-link__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-speed) var(--easing);
}

/* hover：写真をわずかにズーム */
.page-link:hover .page-link__media img {
  transform: scale(1.05);
}

.page-link__body {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 22px);
}

.page-link__title {
  font-family: var(--font-jp);
  font-size: clamp(18px, 0.8vw + 14px, 24px);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--color-primary);
}

/* READ MORE + 横長矢印 */
.page-link__more {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'Oswald', var(--font-en);
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.15em;
  color: var(--color-primary);
  /* READ MORE + 矢印をまとめて動かすためのトランジション */
  transition: transform var(--transition-speed) var(--easing);
}

/* 矢印：ネイビーの正方形に白い右向き矢印（添付画像デザイン） */
.page-link__arrow {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background-color: var(--color-navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
}

/* hover：READ MORE と矢印を揃えて右へ動かす */
.page-link:hover .page-link__more {
  transform: translateX(6px);
}

/* SP: カードを縦に積む（カード内は写真左・テキスト右のまま） */
@media (max-width: 768px) {
  .page-links__inner {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 48px);
  }
}

/* SP: サンクスページのボタン下マージン */
@media (max-width: 767px) {
  .thanks__action {
    padding-bottom: 8rem;
  }
}