/*
Theme Name: SATOX FROZEN (satox-exp)
Description: 有限会社サトックス公式サイトの静的HTML(01_Web/satox-exp-website)からの移植テーマ。CSSはbase.css/top.css/motion.css/sub.cssを原文のまま連結している(調整はファイル末尾への追記のみ)。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.1
Text Domain: satox-exp
*/

/* ==========================================================================
   以下は移植元 assets/css/base.css を無変更で連結
   ========================================================================== */
/* ==========================================================
   base.css — 共通リセット・ユーティリティ（A〜D案共通）
   ========================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure {
  margin: 0;
}
ul, ol {
  padding: 0;
  list-style: none;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
address {
  font-style: normal;
}

/* キーボードフォーカス */
:focus-visible {
  outline: 2px solid #1030c0;
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 仮画像バッジ（生成画像の隅に重ねる。素材差し替え後に削除） */
.tmp-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 3px 9px;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(16, 48, 192, 0.85);
  border-radius: 100px;
  pointer-events: none;
}

/* 仮データバッジ（お知らせのサンプル項目1件ごとに、日付の前に表示する） */
.tmp-data {
  justify-self: start;
  padding: 2px 12px;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(16, 48, 192, 0.85);
  border-radius: 100px;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
/* ==========================================================================
   以下は移植元 assets/css/top.css を無変更で連結
   ========================================================================== */
/* ==========================================================================
   top.css — TOP ページ専用スタイル（spec-top-v5）
   読み込み順: base.css → top.css → motion.css（共通部品の見た目は motion.css が正）
   ========================================================================== */
:root {
  --blue: #1030c0;
  --sky: #5faddd;
  --ice: #e8f1f8;
  --navy: #0b1633;
  --ink: #111;
  --white: #fff;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-catch: "Klee One", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif;
  --font-en: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --header-h: 76px;
}

body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--white);
}

.container {
  width: min(1200px, 100% - 64px);
  margin-inline: auto;
}

.br-sp {
  display: none;
}

.en {
  font-family: var(--font-en);
}

/* --------------------------------------------------------------------------
   ヘッダー（headroom は motion.js。ネイビー転換後は body.is-theme-dark で色を切替）
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(16, 48, 192, 0.08);
}

body.is-theme-dark .site-header {
  color: var(--white);
  background: rgba(11, 22, 51, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--header-h);
  padding: 0 32px;
}

.site-logo {
  display: block;
  flex: 0 0 auto;
}

/* 新ロゴはフルカラー（写真入りの楕円＋黒文字）。旧ロゴ用の「白く反転」は色が飛んで白い塊になるため使わない。
   ダーク背景では白い角丸の台紙に載せて読めるようにする（余白は常に確保し、切り替えで位置がずれないようにする） */
.site-logo img {
  display: block;
  box-sizing: content-box;
  width: 112px;
  height: auto;
  padding: 3px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0);
  transition: background-color 0.5s ease-out, box-shadow 0.5s ease-out;
}

body.is-theme-dark .site-logo img {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 12px rgba(3, 12, 28, 0.25);
}

.site-footer__brand img {
  box-sizing: content-box;
  padding: 6px 12px;
  border-radius: 12px;
  background: #fff;
}

.g-nav {
  margin-left: auto;
}

.g-nav ul {
  display: flex;
  gap: 26px;
}

.g-nav a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.g-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}

.g-nav a:hover::after,
.g-nav a:focus-visible::after {
  transform: scaleX(1);
}

.header-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  font-family: var(--font-en);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.06em;
  border: 1px solid currentColor;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.4s ease-out, color 0.4s ease-out;
}

.header-tel__label {
  font-size: 15px;
  letter-spacing: 0.2em;
}

.header-tel:hover {
  color: var(--white);
  background: var(--blue);
  border-color: var(--blue);
}

.menu-trigger {
  display: none;
}

.sp-nav {
  display: none;
}

/* --------------------------------------------------------------------------
   ローダー: 結晶の6本腕が中心から伸び、全体が 180deg 回転（1.2s）。退場はフェード 0.4s
   -------------------------------------------------------------------------- */
.loader {
  --loader-bg: #fff;
  --loader-ink: var(--blue);
}

.loader__flake {
  width: 88px;
  height: 88px;
  overflow: visible;
}

.loader__spin {
  transform-origin: 40px 40px;
  transform: rotate(0deg);
}

.loader.is-active .loader__spin {
  animation: b4-flake-spin 0.9s var(--ease-out) forwards;
}

.loader__arm path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}

.loader.is-active .loader__arm path {
  animation: b4-arm-grow 0.7s var(--ease-out) forwards;
  animation-delay: calc(var(--arm-i, 0) * 0.06s);
}

.loader.is-active .loader__arm .loader__twig {
  animation-delay: calc(0.35s + var(--arm-i, 0) * 0.06s);
}

@keyframes b4-flake-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}

@keyframes b4-arm-grow {
  to {
    stroke-dashoffset: 0;
  }
}

/* --------------------------------------------------------------------------
   共通見出し・ピルボタン
   -------------------------------------------------------------------------- */
.sec-en {
  font-family: var(--font-en);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 700;
  letter-spacing: 0.32em;
  line-height: 1.2;
  color: var(--sky);
}

.sec-title {
  margin-top: 10px;
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

p.band {
  margin-top: 14px;
  font-family: var(--font-catch);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--sky);
}

.sec-sub {
  margin-top: 28px;
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 700;
  line-height: 1.7;
}

.sec-lead {
  max-width: 760px;
  margin-top: 18px;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

/* ピル: ホバーで rotateX(180deg) フリップして裏面（配色反転）を見せる */
.pill {
  display: inline-block;
  perspective: 700px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

.pill__in {
  position: relative;
  display: block;
  transform-style: preserve-3d;
  transition: transform 0.55s var(--ease-out);
}

.pill__f,
.pill__b {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 100%;
  padding: 9px 9px 9px 28px;
  color: var(--blue);
  background: var(--white);
  border: 1px solid var(--blue);
  border-radius: 999px;
  white-space: nowrap;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.pill__b {
  position: absolute;
  inset: 0;
  color: var(--white);
  background: var(--blue);
  transform: rotateX(180deg);
}

.pill__arrow {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue);
}

.pill__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--white);
  border-right: 1.5px solid var(--white);
  transform: translate(-60%, -50%) rotate(45deg);
}

.pill__b .pill__arrow {
  background: var(--white);
}

.pill__b .pill__arrow::before {
  border-color: var(--blue);
}

/* 塗りつぶし: 表が青、裏が白 */
.pill--fill .pill__f {
  color: var(--white);
  background: var(--blue);
}

.pill--fill .pill__f .pill__arrow {
  background: var(--white);
}

.pill--fill .pill__f .pill__arrow::before {
  border-color: var(--blue);
}

.pill--fill .pill__b {
  color: var(--blue);
  background: var(--white);
}

.pill--fill .pill__b .pill__arrow {
  background: var(--blue);
}

.pill--fill .pill__b .pill__arrow::before {
  border-color: var(--white);
}

/* ネイビー地用: 表は透明＋白枠、裏は白地 */
.pill--ghost .pill__f {
  color: var(--white);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.6);
}

.pill--ghost .pill__f .pill__arrow {
  background: var(--white);
}

.pill--ghost .pill__f .pill__arrow::before {
  border-color: var(--navy);
}

.pill--ghost .pill__b {
  color: var(--navy);
  background: var(--white);
  border-color: var(--white);
}

.pill--ghost .pill__b .pill__arrow {
  background: var(--navy);
}

.pill--lg {
  font-size: 17px;
}

.pill--lg .pill__f,
.pill--lg .pill__b {
  padding: 11px 11px 11px 32px;
}

.pill:hover .pill__in,
.pill:focus-visible .pill__in {
  transform: rotateX(180deg);
}

.text-link {
  border-bottom: 1px solid currentColor;
}

/* --------------------------------------------------------------------------
   ヒーロー: 写真4枚を6秒ごとにクロスフェード（opacity 1.2s）。初回だけズームアウト着地。
   重なり順: 写真(1) < shade(2) < mist(3) < snow(4) < content(5) < progress(6)
   写真の差し替え口: index.html の picture.hero__slide の src/srcset だけを変えれば済むよう、
   写真に依存する CSS は下の :nth-child 別 object-position（各スロット1行）のみに留めている
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  color: var(--white);
  background: var(--navy);
}

.hero__slides,
.hero__slide,
.hero__slide::after,
.hero__img,
.hero__shade,
.hero__mist,
.hero__snow {
  position: absolute;
  inset: 0;
}

.hero__slides {
  z-index: 1;
}

/* 写真上部に焼き込まれた見出しが固定ヘッダーの下に隠れないよう、写真はヘッダー直下から敷く（PC・SP共通）。
   ヘッダー裏は白地にして、写真に重なっていた時と同じ明るいヘッダーの見え方を保つ（2026-09-24） */
.hero {
  background: linear-gradient(var(--white) var(--header-h), var(--navy) var(--header-h));
}

.hero__slides {
  top: var(--header-h);
}

/* 写真に焼き込まれた見出し（上）とトラック（下）が画面サイズによって欠けないよう、
   ヒーローの高さは画面の高さではなく「ヘッダー＋写真を横幅いっぱいに置いた高さ」で決める
   （1画面に収まらず多少下にはみ出してもよい＝2026-09-24 ユーザー確認）。
   0.537 = PC写真6枚のうち最も横長な bridge-night（1712×919）の縦横比。
   これより縦長の写真は下端が最大4.6%（地面部分）だけ切れ、左右と上は切れない */
.hero {
  height: calc(var(--header-h) + 100vw * 0.537);
  min-height: 0;
}

.hero__slide {
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero__slide.is-active {
  opacity: 1;
}

/* 写真ごとの下端の締め（文字の可読性確保） */
.hero__slide::after {
  content: "";
  background: linear-gradient(180deg, rgba(6, 22, 51, 0.1) 0%, rgba(6, 22, 51, 0) 45%, rgba(3, 12, 28, 0.78) 100%);
  pointer-events: none;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* キャッチコピーが写真の左上に焼き込まれているため、横幅の狭いデスクトップ画面
     （例: 1440px、コンテナが写真より横に細長くなくても width クロップは起きる）でも
     見出しが欠けないよう左上寄せにする（2026-09-18 クライアント確定の6枚に差し替え） */
  object-position: left top;
  transform: scale(1);
}

/* 5・6枚目（bridge-night / fleet-dock-day）だけ見出しが写真の右上に焼き込まれているため右寄せにする */
.hero__slide:nth-child(5) .hero__img,
.hero__slide:nth-child(6) .hero__img {
  object-position: right top;
}

html.js .hero__slide.is-initial .hero__img {
  transform: scale(1.12);
}

html.js .hero.is-ready .hero__slide.is-initial .hero__img {
  animation: hero-zoom-out 2s var(--ease-out) forwards;
}

.hero__shade {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(6, 22, 51, 0.2) 0%, rgba(6, 22, 51, 0.02) 38%, rgba(4, 14, 32, 0.78) 100%),
    linear-gradient(90deg, rgba(4, 14, 32, 0.42) 0%, rgba(4, 14, 32, 0) 62%);
  pointer-events: none;
}

.hero__mist {
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 100% 40%, rgba(16, 48, 192, 0.6) 0%, rgba(16, 48, 192, 0) 70%),
    radial-gradient(50% 60% at 85% 90%, rgba(95, 173, 221, 0.45) 0%, rgba(95, 173, 221, 0) 70%),
    linear-gradient(180deg, rgba(10, 30, 80, 0.25) 0%, rgba(10, 30, 80, 0) 35%, rgba(10, 30, 80, 0.35) 100%);
}

html.js .hero__mist {
  opacity: 0;
  transform: translateX(6%);
}

html.js .hero.is-ready .hero__mist {
  animation: mist-drift 9s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}

html.js .hero.is-static .hero__mist {
  opacity: 1;
  transform: none;
}

.hero__snow {
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__progress {
  position: absolute;
  right: max(32px, calc((100% - 1200px) / 2));
  bottom: 58px;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(6, minmax(32px, 82px));
  gap: 10px;
  width: min(368px, calc(100% - 64px));
}

.hero__progress-bar {
  position: relative;
  height: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.42);
}

.hero__progress-bar span {
  position: absolute;
  inset: 0;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
}

.hero__progress-bar.is-active span {
  animation: hero-progress 6s linear forwards;
}

@keyframes hero-zoom-out {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}

@keyframes mist-drift {
  0% {
    opacity: 0;
    transform: translateX(6%);
  }
  35% {
    opacity: 1;
    transform: translateX(-1.5%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes hero-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   背景転換帯（100vh）: body の --bg が白 → ネイビーへ。H2 は fixed の最背面に 30%
   -------------------------------------------------------------------------- */
.turn {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 80px 24px;
}

.night {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: calc(var(--p, 0) * 0.3);
  pointer-events: none;
  will-change: opacity;
}

/* 下半分（車列）を少し沈めて、その上に載る本文・表の可読性を確保 */
.night::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 22, 51, 0) 35%, rgba(11, 22, 51, 0.65) 100%);
}

.night picture,
.night img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.turn__inner {
  position: relative;
  z-index: 1;
}

.turn__label {
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.34em;
  color: var(--sky);
}

.turn__catch {
  margin-top: 18px;
  font-family: var(--font-catch);
  font-size: clamp(30px, 4.6vw, 64px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   MESSAGE: スロット文字見出し＋読み進み本文（薄い文字 → 白文字が読み進む）
   -------------------------------------------------------------------------- */
.message {
  --rp: clamp(0, calc((var(--p, 0) - 0.2) / 0.36), 1);
  padding: clamp(60px, 8vw, 120px) 0 clamp(90px, 10vw, 150px);
}

.message__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(200px, 22vw, 320px);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}

.message__inner {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.message__title {
  margin-top: 12px;
  font-size: clamp(28px, 3.6vw, 52px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.message__lead {
  margin-top: 18px;
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 500;
  color: var(--sky);
}

.readmask {
  margin-top: 30px;
  line-height: 2.1;
  text-align: left;
}

.readmask .split-char {
  display: inline;
  opacity: calc(0.45 + 0.55 * clamp(0, calc((var(--rp) - var(--ci, 0)) * 14), 1));
}

.message .pill-row {
  justify-content: center;
}

.message__photo {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.06);
}

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

/* --------------------------------------------------------------------------
   英字帯: 袋文字マーキー＋中央の結晶。骨格・動き・一時停止は motion.css / motion.js。
   ネイビー区間に載るため、ここでは配色だけをダーク用に上書きする
   -------------------------------------------------------------------------- */
.en-band {
  position: relative;
  padding: clamp(24px, 4vw, 56px) 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.en-band .en-band__loop {
  --loop-duration: 48s;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.55);
}

.en-band .loop__word {
  padding-right: 0.5em;
  font-family: var(--font-en);
  font-size: clamp(56px, 8vw, 120px);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.en-band .loop__word em {
  font-style: normal;
  color: var(--sky);
}

/* 中央の結晶。背景は body の --bg（白→ネイビーの補間値）に合わせて文字を隠す */
.en-band__flake {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(72px, 7.4vw, 108px);
  height: clamp(72px, 7.4vw, 108px);
  color: var(--white);
  /* 縁をぼかして地の色に溶かす（帯の背景は body の --bg が透ける） */
  background: radial-gradient(closest-side, var(--bg, var(--navy)) 58%, transparent 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.en-band__flake svg {
  width: 48%;
  height: 48%;
  animation: flake-spin 24s linear infinite;
}

@keyframes flake-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   SERVICE: 見出しは通常配置。3ブロックは 300vh の擬似横スクロール（sticky 舞台）
   -------------------------------------------------------------------------- */
.service {
  padding-top: clamp(60px, 8vw, 120px);
}

.service__intro {
  padding-bottom: 20px;
}

.hscroll {
  height: 300vh;
}

.hscroll__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
}

.hscroll__meta {
  position: absolute;
  top: calc(var(--header-h) + 22px);
  left: 6vw;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
}

.hscroll__count {
  font-family: var(--font-en);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--white);
}

.hscroll__bar {
  position: relative;
  width: 160px;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.hscroll__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sky);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

.hscroll__track {
  display: flex;
  width: 300vw;
  height: 100%;
  transform: translate3d(calc(var(--p, 0) * -200vw), 0, 0);
  will-change: transform;
}

.panel {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 5vw;
  padding: calc(var(--header-h) + 70px) 6vw 60px;
}

.panel__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 24px;
}

.panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08) translate3d(calc((var(--p, 0) - var(--pi, 0)) * -6vw), 0, 0);
  will-change: transform;
}

.panel__num {
  font-family: var(--font-en);
  font-size: clamp(48px, 6vw, 96px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--sky);
  opacity: 0.7;
}

.panel h3 {
  margin-top: 8px;
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.panel__text > p:not(.panel__num) {
  margin-top: 18px;
}

.fleet,
.recruit__facts {
  margin-top: 22px;
  display: grid;
  gap: 8px;
}

.fleet > div,
.recruit__facts > div {
  display: grid;
  grid-template-columns: 8em 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.fleet dt,
.recruit__facts dt {
  font-weight: 700;
  color: var(--sky);
}

.rule-list {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rule-list li {
  padding: 6px 20px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   SAFETY: sticky カード重ね（白カード 24px 角丸）＋薄い結晶
   -------------------------------------------------------------------------- */
.safety {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0;
}

.safety__snow {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.safety__head,
.safety__stackwrap {
  position: relative;
  z-index: 1;
}

.safety__text {
  max-width: 820px;
  margin-top: 28px;
}

.safety__catch {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
}

.safety__note {
  margin-top: 6px;
  font-weight: 500;
  color: var(--sky);
}

.safety__text > p + p {
  margin-top: 12px;
}

.safety__stack {
  --stack-top: calc(var(--header-h) + 34px);
  --stack-gap: 28px;
  margin-top: 60px;
}

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 4vw, 56px);
  color: var(--ink);
  background: var(--white);
  border-radius: 24px;
}

.card:nth-child(even) .card__media {
  order: -1;
}

.card__num {
  font-family: var(--font-en);
  font-size: clamp(44px, 5.5vw, 80px);
  font-weight: 300;
  line-height: 1;
  color: var(--sky);
}

.card__en {
  margin-top: 10px;
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--blue);
}

.card h3 {
  margin-top: 14px;
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 16px;
  background: var(--ice);
}

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

.dots {
  position: fixed;
  right: 22px;
  top: 50%;
  z-index: 5;
  display: grid;
  gap: 12px;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.4s ease-out;
  pointer-events: none;
}

.dots.is-show {
  opacity: 1;
}

.dots li {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: transform 0.4s var(--ease-out), background 0.4s ease-out;
}

.dots li.is-active {
  background: var(--sky);
  transform: scale(1.5);
}

/* 安全カードは PC・SP とも重ねず、5枚を最初から縦に並べて固定する
   （2026-09-14 クライアント指摘: SP で指のスクロールが大変 → 同日 PC も同じ扱いに）。
   motion.css の .stack（sticky＋--stack-p による縮小・暗転）を詳細度で打ち消す。
   カードが重ならないので進行ドットも出さない */
.safety__stack .stack__item {
  position: static;
}

html.js .safety__stack .stack__item {
  transform: none;
  filter: none;
  will-change: auto;
}

.safety .dots {
  display: none;
}

/* --------------------------------------------------------------------------
   RECRUIT: 背景に巨大英字マーキー
   -------------------------------------------------------------------------- */
.recruit {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0;
  overflow: clip;
}

.recruit__bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 0;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.08);
}

.loop__word {
  font-family: var(--font-en);
  font-weight: 700;
}

.recruit__bg .loop__word {
  font-size: clamp(80px, 14vw, 220px);
  letter-spacing: 0.02em;
}

.recruit__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}

.recruit__catch {
  margin-top: 28px;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.7;
}

.recruit__text > p:not(.sec-en):not(.band):not(.recruit__catch) {
  margin-top: 16px;
}

.recruit__photo {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 24px;
}

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

/* --------------------------------------------------------------------------
   NEWS: 3列カード（仮データ）
   -------------------------------------------------------------------------- */
.news {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0;
}

.news__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.news-card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 28px;
  color: var(--ink);
  background: var(--white);
  border-radius: 24px;
  transition: transform 0.45s var(--ease-out);
}

.news-card:hover {
  transform: translateY(-4px);
}

.news-card__date {
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--blue);
}

.news-card__cat {
  justify-self: start;
  padding: 2px 14px;
  font-size: 15px;
  color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 999px;
}

.news-card__title {
  margin-top: 6px;
  font-weight: 500;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   COMPANY: 会社概要テーブル
   -------------------------------------------------------------------------- */
.company {
  padding: clamp(80px, 10vw, 140px) 0;
}

.company__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.company__table > div {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.company__table > div:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.company__table dt {
  font-weight: 700;
  color: var(--sky);
}

/* 会社概要のアクセス: Googleマップ埋め込み（表の下に全幅で表示） */
.access-map {
  grid-column: 1 / -1;
  margin-top: clamp(20px, 3vw, 32px);
}

.access-map__frame {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.access-map__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.access-map__link {
  display: inline-block;
  margin-top: 14px;
  color: var(--sky);
}

@media (max-width: 720px) {
  .access-map__frame {
    max-width: none;
    aspect-ratio: 4 / 3;
  }
}

/* --------------------------------------------------------------------------
   GROUP: グループ会社カード（山紀グループの他社紹介。/ と /business/ で共通）
   -------------------------------------------------------------------------- */
.group {
  padding: clamp(80px, 10vw, 140px) 0;
}

.group__lead {
  max-width: 640px;
  margin-top: 12px;
}

.group-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: clamp(32px, 4vw, 48px);
}

.group-card {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
}

.group-card__logo {
  display: block;
  height: 44px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 12px;
  /* ロゴは白背景前提の版が多いため、ダーク背景でも認識できるよう白台紙に載せる */
  background: #fff;
  padding: 6px 10px;
  border-radius: 8px;
}

.group-card__name {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.group-card__desc {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--sky);
}

.group-card__addr,
.group-card__tel {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
}

.group-card__tel {
  margin-top: 2px;
}

/* 住所のビル名を行の途中で分けない（例: 「山／紀ビル4階」を防ぐ） */
.group-card__bldg {
  display: inline-block;
}

.group-card__link {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  color: var(--sky);
}

@media (max-width: 1000px) {
  .group-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .group-cards {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   CONTACT: 左 S3、右 TEL/FAX/営業時間＋フリップピル
   -------------------------------------------------------------------------- */
.contact {
  padding: clamp(80px, 10vw, 140px) 0;
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}

.contact__photo {
  aspect-ratio: 3 / 2;
  border-radius: 24px;
}

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

.contact__body > p {
  margin-top: 18px;
}

.contact__tel {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-en);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.contact__meta {
  font-size: 17px;
}

/* --------------------------------------------------------------------------
   フッター: ネイビー、上部に C4 英文マーキー
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  padding: 0 0 28px;
  color: var(--white);
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__loop {
  padding: 24px 0;
  color: rgba(255, 255, 255, 0.12);
}

.site-footer__loop .loop__word {
  font-size: clamp(48px, 8vw, 120px);
  font-weight: 300;
  text-transform: none;
}

.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding: 24px 0 40px;
}

.site-footer__brand img {
  width: 116px;
  height: auto;
}

.site-footer__brand address {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.9;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 15px;
}

.site-footer__nav a {
  display: inline-block;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s ease-out;
}

.site-footer__nav a:hover {
  border-bottom-color: currentColor;
}

.site-footer__gmark {
  flex: 0 0 auto;
  max-width: 200px;
}

.site-footer__gmark img {
  display: block;
  width: 104px;
  height: auto;
  padding: 8px;
  border-radius: 6px;
  background: #fff;
}

.site-footer__gmark p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

.site-footer__copy {
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-align: center;
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   1130px 以下: ハンバーガー
   -------------------------------------------------------------------------- */
@media (max-width: 1130px) {
  .site-header__inner {
    padding: 0 20px;
  }

  .g-nav,
  .header-tel {
    display: none;
  }

  .menu-trigger {
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
    margin-left: auto;
  }

  .menu-trigger span {
    position: absolute;
    left: 10px;
    width: 24px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.35s var(--ease-out), opacity 0.3s ease-out, top 0.35s var(--ease-out);
  }

  .menu-trigger span:nth-child(1) { top: 13px; }
  .menu-trigger span:nth-child(2) { top: 21px; }
  .menu-trigger span:nth-child(3) { top: 29px; }
  .menu-trigger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
  .menu-trigger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-trigger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

  .sp-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 999;
    display: block;
    padding: 28px 24px 40px;
    overflow-y: auto;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.96);
  }

  body.is-theme-dark .sp-nav {
    color: var(--white);
    background: rgba(11, 22, 51, 0.96);
  }

  .sp-nav[hidden] {
    display: none;
  }

  .sp-nav li a {
    display: block;
    padding: 14px 0;
    font-size: 18px;
    font-weight: 500;
    border-bottom: 1px solid rgba(128, 144, 176, 0.3);
  }

  .sp-nav__tel {
    margin-top: 28px;
    font-size: 18px;
    font-weight: 500;
  }

  .sp-nav__tel small {
    font-size: 15px;
    font-weight: 400;
  }

  body.nav-open {
    overflow: hidden;
  }
}

/* --------------------------------------------------------------------------
   768px 以下: ヒーローは縦長写真＋文字を圧縮、SERVICE は縦積み
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --header-h: 64px;
  }

  body {
    font-size: 17px;
    line-height: 1.85;
  }

  .container {
    width: min(1200px, 100% - 40px);
  }

  .br-sp {
    display: inline;
  }

  .sp-hide {
    display: none;
  }

  .site-logo img {
    width: 88px;
  }

  /* SP写真（941×1671〜1672）も同様に、写真の縦横比で高さを決めて上下左右を切らない */
  .hero {
    height: calc(var(--header-h) + 100vw * 1.7757);
    min-height: 0;
  }

  /* SP専用画像（9:16）はキャッチコピーが左寄せで焼き込まれているため、
     center クロップだと375px幅で見出し左端が切れる。左に寄せつつ、
     行末の句点がギリギリ入るよう少しだけ右へ余白を残す（2026-09-18）。
     縦は上端基準にして、背の低い画面でも上部の見出しが削れないようにする（2026-09-24） */
  .hero__slides .hero__slide .hero__img {
    object-position: 15% top;
  }

  .hero__shade {
    background:
      linear-gradient(180deg, rgba(6, 22, 51, 0.58) 0%, rgba(6, 22, 51, 0.12) 42%, rgba(6, 22, 51, 0) 60%, rgba(4, 14, 32, 0.45) 100%);
  }

  .hero__progress {
    left: 20px;
    right: 20px;
    bottom: 72px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: auto;
  }

  .en-band {
    padding: 20px 0;
  }

  .en-band .loop__word {
    font-size: 52px;
  }

  .turn {
    overflow: clip;
  }

  .night {
    position: absolute;
    z-index: 0;
    opacity: 0.3;
  }

  .message__grid {
    grid-template-columns: 1fr;
  }

  .message__photo {
    width: 70vw;
    max-width: 320px;
    margin-inline: auto;
  }

  .hscroll {
    height: auto;
  }

  .hscroll__stage {
    position: static;
    height: auto;
    overflow: visible;
  }

  .hscroll__meta {
    display: none;
  }

  .hscroll__track {
    display: block;
    width: min(1200px, 100% - 40px);
    height: auto;
    margin-inline: auto;
    transform: none;
  }

  .panel {
    display: block;
    flex: none;
    width: auto;
    height: auto;
    padding: 36px 0 0;
  }

  .panel__media img {
    transform: none;
  }

  .panel__text {
    margin-top: 20px;
  }

  .fleet > div,
  .recruit__facts > div {
    grid-template-columns: 6.5em 1fr;
  }

  .safety__stack {
    --stack-top: calc(var(--header-h) + 20px);
    --stack-gap: 20px;
    margin-top: 40px;
  }

  .card {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 20px;
    padding: 24px;
  }

  .card:nth-child(even) .card__media {
    order: 0;
  }

  .dots {
    display: none;
  }

  .recruit__grid,
  .contact__grid,
  .company__grid {
    grid-template-columns: 1fr;
  }

  .recruit__photo {
    order: -1;
  }

  .news__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .news__grid {
    grid-template-columns: 1fr;
  }

  .company__table > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .site-footer__inner {
    flex-direction: column;
    gap: 28px;
  }

  .site-footer__nav {
    gap: 6px 18px;
  }
}

/* --------------------------------------------------------------------------
   prefers-reduced-motion: 演出を無効化し最終状態を即表示
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .loader.is-active .loader__spin,
  .loader.is-active .loader__arm path,
  .en-band__flake svg {
    animation: none;
  }

  /* ヒーロー: 1枚目固定・ズームと霧のドリフトを止める（.is-static は top.js が付与） */
  .hero__slide,
  .hero__img,
  .hero__mist,
  .hero__progress-bar span {
    animation: none;
    transition: none;
  }

  html.js .hero__slide.is-initial .hero__img {
    transform: scale(1);
  }

  .hero__mist {
    opacity: 1;
    transform: none;
  }

  .hero__progress-bar.is-active span {
    transform: scaleX(1);
  }

  .readmask .split-char {
    opacity: 1;
  }

  .pill__in {
    transition: none;
  }

  .pill:hover .pill__in,
  .pill:focus-visible .pill__in {
    transform: none;
  }

  .pill:hover .pill__f,
  .pill:focus-visible .pill__f {
    filter: brightness(1.08);
  }

  .hscroll {
    height: auto;
  }

  .hscroll__stage {
    position: static;
    height: auto;
    overflow: visible;
  }

  .hscroll__meta {
    display: none;
  }

  .hscroll__track {
    display: block;
    width: min(1200px, 100% - 64px);
    height: auto;
    margin-inline: auto;
    transform: none;
  }

  .panel {
    flex: none;
    width: auto;
    height: auto;
    padding: 48px 0 0;
  }

  .panel__media img {
    transform: none;
  }

  .stack__item {
    position: static;
  }

  .dots {
    display: none;
  }

  .news-card,
  .site-logo img {
    transition: none;
  }
}
/* ==========================================================================
   以下は移植元 assets/css/motion.css を無変更で連結
   ========================================================================== */
/* Shared motion layer for the TOP v3 concepts. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.site-header {
  will-change: transform;
  transition:
    transform 0.42s cubic-bezier(.16, 1, .3, 1),
    border-color 0.5s ease-out,
    background 0.5s ease-out;
}

.site-header.is-headroom-hidden {
  transform: translate3d(0, -105%, 0);
}

.nav-open .site-header,
.site-header:focus-within {
  transform: translate3d(0, 0, 0);
}

html.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 1.2s cubic-bezier(.16, 1, .3, 1),
    transform 1.2s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

html.js [data-reveal].is-in,
html.js .hero.is-ready [data-reveal],
html.js .hero.is-static [data-reveal] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

[data-split] .split-char {
  display: inline-block;
  white-space: pre;
}

html.js [data-split] .split-char {
  opacity: 0;
  transform: translate3d(0, 0.65em, 0);
  transition:
    opacity 0.82s cubic-bezier(.16, 1, .3, 1),
    transform 0.82s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--reveal-delay, 0s) + var(--split-delay, 0s));
  will-change: opacity, transform;
}

html.js .hero__vert[data-split] .split-char {
  transition-delay: calc(0.6s + var(--split-delay, 0s));
}

html.js [data-split].is-in .split-char,
html.js .hero.is-ready [data-split] .split-char,
html.js .hero.is-static [data-split] .split-char {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html.js .rv {
  clip-path: inset(18%);
  transition: clip-path 1.6s cubic-bezier(.16, 1, .3, 1);
  will-change: clip-path;
}

html.js .rv img {
  transform: scale(1.3);
  transition: transform 1.6s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

html.js .rv.is-in,
html.js .hero.is-ready .rv,
html.js .hero.is-static .rv {
  clip-path: inset(0);
}

html.js .rv.is-in img,
html.js .hero.is-ready .rv img,
html.js .hero.is-static .rv img {
  transform: scale(1);
}

.loop {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.loop__track {
  display: flex;
  width: max-content;
  animation: loop-slide var(--loop-duration, 45s) linear infinite;
  will-change: transform;
}

.loop__set {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.loop.is-paused .loop__track {
  animation-play-state: paused;
}

.loop--reverse .loop__track {
  animation-name: loop-slide-reverse;
}

.loop--phase .loop__track {
  animation-delay: -22.5s;
}

.loop--photos {
  --loop-duration: 45s;
}

.loop--photos .loop__set {
  gap: 16px;
  padding-inline: 8px;
}

.loop--photos .loop__item {
  flex: 0 0 auto;
  width: 220px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: #e8f1f8;
}

.loop--photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(.16, 1, .3, 1);
}

.loop--words {
  --loop-duration: 58s;
  color: rgba(16, 48, 192, 0.08);
  pointer-events: none;
  user-select: none;
}

.loop--words .loop__set {
  gap: 0.45em;
  padding-inline: 0.225em;
}

.loop__word {
  flex: 0 0 auto;
  font-family: "Poppins", sans-serif;
  font-size: clamp(64px, 9vw, 128px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-transform: uppercase;
}

@keyframes loop-slide {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes loop-slide-reverse {
  from {
    transform: translate3d(-50%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@media (hover: hover) {
  .loop:hover .loop__track {
    animation-play-state: paused;
  }

  .service-card,
  .news-item {
    transition:
      transform 0.4s cubic-bezier(.16, 1, .3, 1),
      box-shadow 0.4s cubic-bezier(.16, 1, .3, 1);
  }

  .service-card:hover,
  .news-item:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 22px 50px rgba(10, 30, 80, 0.16);
  }

  html.js .rv.is-in:hover img,
  .loop--photos .loop__item:hover img {
    transform: scale(1.04);
  }

  .btn {
    gap: 0.72em;
  }

  .btn::after {
    content: "";
    flex: 0 0 auto;
    width: 0.48em;
    height: 0.48em;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.4s cubic-bezier(.16, 1, .3, 1);
  }

  .btn:hover::after,
  .btn:focus-visible::after {
    transform: translateX(4px) rotate(45deg);
  }

  .text-link {
    position: relative;
    border-bottom: 0;
  }

  .text-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.1em;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(.16, 1, .3, 1);
  }

  .text-link:hover::after,
  .text-link:focus-visible::after {
    transform: scaleX(1);
  }
}

@media (max-width: 767px) {
  .loop--photos .loop__item {
    width: 160px;
  }

  .loop--photos .loop__set {
    gap: 12px;
    padding-inline: 6px;
  }

  .loop__word {
    font-size: clamp(52px, 18vw, 76px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }

  .site-header.is-headroom-hidden {
    transform: none;
  }

  html.js [data-reveal],
  html.js [data-split] .split-char,
  html.js .rv,
  html.js .rv img {
    opacity: 1;
    transform: none;
    clip-path: inset(0);
    transition: none;
  }

  .loop__track {
    animation: none;
    transform: translate3d(0, 0, 0);
  }
}

/* ==========================================================================
 * v4 汎用部品（spec-top-v4 §1.5）。使い方は assets/js/motion.js 冒頭コメント参照
 * ======================================================================== */

/* ---- .loader: 全画面ローダー（退場アニメは案 CSS が .loader.is-leaving で上書き） ---- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--loader-bg, #fff);
  color: var(--loader-ink, #1030c0);
}

.loader.is-leaving {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s ease-out,
    visibility 0s linear 0.4s;
}

.loader.is-done,
.loader.is-skipped,
html.no-js .loader {
  display: none !important;
}

body.is-loading {
  overflow: hidden;
}

/* ---- [data-lines]: 行マスク ---- */
.lines__mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.12em 0 0.12em;
  margin: -0.12em 0 -0.12em;
}

.lines__mask--block,
.lines__mask--block > .lines__line {
  display: block;
}

.lines__line {
  display: inline-block;
}

html.js [data-lines] .lines__line {
  transform: translate3d(0, 110%, 0);
  transition: transform 0.8s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--reveal-delay, 0s) + var(--line-delay, 0s));
  will-change: transform;
}

html.js [data-lines].is-in .lines__line {
  transform: translate3d(0, 0, 0);
}

/* ---- [data-float]: 文字ごとに霧の中から浮かび上がる ---- */
[data-float] .split-char {
  display: inline-block;
  white-space: pre;
}

html.js [data-float] .split-char {
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 0.9s ease-out,
    filter 0.9s ease-out,
    transform 0.9s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--reveal-delay, 0s) + var(--split-delay, 0s));
  will-change: opacity, transform;
}

html.js [data-float].is-in .split-char {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

/* ---- .rv--split: 窓（.rv__win）と内側 img が逆方向に開く画像リビール ---- */
html.js .rv.rv--split {
  overflow: hidden;
  clip-path: none;
  will-change: auto;
}

.rv__win {
  display: block;
  width: 100%;
  height: 100%;
}

html.js .rv.rv--split .rv__win {
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.8s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

html.js .rv.rv--split img {
  transform: translate3d(110%, 0, 0) scale(1.1);
  transition: transform 0.8s cubic-bezier(.16, 1, .3, 1);
}

html.js .rv.rv--split.is-in,
html.js .hero.is-ready .rv.rv--split,
html.js .hero.is-static .rv.rv--split {
  clip-path: none;
}

html.js .rv.rv--split.is-in .rv__win,
html.js .hero.is-ready .rv.rv--split .rv__win,
html.js .hero.is-static .rv.rv--split .rv__win {
  transform: translate3d(0, 0, 0);
}

html.js .rv.rv--split.is-in img,
html.js .hero.is-ready .rv.rv--split img,
html.js .hero.is-static .rv.rv--split img {
  transform: translate3d(0, 0, 0) scale(1);
}

@media (hover: hover) {
  html.js .rv.rv--split.is-in:hover img {
    transform: translate3d(0, 0, 0) scale(1.04);
  }
}

/* ---- .hex-mask: 六角形マスクの展開（--hex 0→1 は JS が書く。半径は短辺基準の %） ---- */
.hex-mask {
  --hex: 0;
  --hex-min: 14;
  --hex-max: 160;
  --hex-ax: 1;
  --hex-ay: 1;
  --hex-r: calc(var(--hex-min) + (var(--hex-max) - var(--hex-min)) * var(--hex));
  --hex-rx: calc(var(--hex-r) * var(--hex-ax));
  --hex-ry: calc(var(--hex-r) * var(--hex-ay));
  overflow: hidden;
  clip-path: polygon(
    50% calc(50% - var(--hex-ry) * 1%),
    calc(50% + var(--hex-rx) * 0.866%) calc(50% - var(--hex-ry) * 0.5%),
    calc(50% + var(--hex-rx) * 0.866%) calc(50% + var(--hex-ry) * 0.5%),
    50% calc(50% + var(--hex-ry) * 1%),
    calc(50% - var(--hex-rx) * 0.866%) calc(50% + var(--hex-ry) * 0.5%),
    calc(50% - var(--hex-rx) * 0.866%) calc(50% - var(--hex-ry) * 0.5%)
  );
  will-change: clip-path;
}

html.no-js .hex-mask,
.hex-mask.is-open {
  --hex: 1;
}

/* ---- [data-slot]: 3段リールの文字 ---- */
.slot-char {
  display: inline-block;
  height: 1.2em;
  line-height: 1.2;
  overflow: hidden;
  vertical-align: top;
}

.slot-reel {
  display: block;
  transform: translate3d(0, 0, 0);
  transition: transform 0.9s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--reveal-delay, 0s) + var(--slot-delay, 0s));
  will-change: transform;
}

.slot-row {
  display: block;
  height: 1.2em;
  line-height: 1.2;
  white-space: nowrap;
}

/* 仮の段は幅 0 にして、セル幅を最終文字（最後の段）に合わせる */
.slot-row:not(:last-child) {
  width: 0;
}

[data-slot].is-in .slot-reel,
html.no-js .slot-reel {
  transform: translate3d(0, -66.667%, 0);
}

/* ---- .stack: sticky カード重ね（--stack-p は JS が書く） ---- */
.stack {
  --stack-top: 96px;
  --stack-gap: 24px;
  position: relative;
}

.stack__item {
  position: sticky;
  top: var(--stack-top);
  transform-origin: 50% 0;
}

.stack__item + .stack__item {
  margin-top: var(--stack-gap);
}

html.js .stack__item {
  transform: scale(calc(1 - 0.06 * var(--stack-p, 0)));
  filter: brightness(calc(1 - 0.3 * var(--stack-p, 0)));
  will-change: transform, filter;
}

/* ---- .ring: CSS 3D 写真リング（--ring-* は JS が書く） ---- */
.ring {
  --ring-r: 320px;
  --ring-x: 0deg;
  --ring-y: 0deg;
  --ring-w: clamp(220px, 24vw, 360px);
  position: relative;
  min-height: 240px;
  perspective: 1200px;
  perspective-origin: 50% 50%;
}

.ring__stage {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--ring-x)) rotateY(var(--ring-y));
  will-change: transform;
}

.ring__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ring-w);
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  border-radius: var(--ring-radius, 12px);
  background: #e8f1f8;
  transform: translate(-50%, -50%) rotateY(calc(var(--ring-a, 0) * 1deg)) translateZ(var(--ring-r));
  filter: brightness(var(--ring-b, 1));
}

.ring__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(calc(1 - 2 * var(--ring-back, 0)));
}

/* 768px 以下: 弧状の横並び（JS が .ring--flat を付ける） */
.ring--flat {
  perspective: 900px;
}

.ring--flat .ring__stage {
  display: flex;
  gap: 12px;
  height: auto;
  padding: 8px 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  transform: none;
  transform-style: flat;
}

.ring--flat .ring__item {
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 auto;
  width: clamp(200px, 60vw, 280px);
  scroll-snap-align: center;
  transform: rotateY(calc((var(--ring-i, 0) - (var(--ring-n, 1) - 1) / 2) / max(1, (var(--ring-n, 1) - 1) / 2) * -35deg));
  filter: none;
}

.ring--flat .ring__item img {
  transform: none;
}

/* ---- .wave: 曲線ディバイダー（inline SVG を入れる） ---- */
.wave {
  --wave-h: clamp(40px, 8vw, 120px);
  position: relative;
  display: block;
  width: 100%;
  height: var(--wave-h);
  line-height: 0;
  overflow: hidden;
  pointer-events: none;
}

.wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wave--flip svg {
  transform: scaleY(-1);
}

/* ---- [data-progress] / body[data-theme-switch] ---- */
[data-progress] {
  --p: 0;
}

body[data-theme-switch] {
  --p: 0;
  --bg-from: #fff;
  --bg-to: #0b1633;
  --ink-from: #111;
  --ink-to: #fff;
  --bg: color-mix(in srgb, var(--bg-to) calc(var(--p) * 100%), var(--bg-from));
  background-color: var(--bg);
  color: color-mix(in srgb, var(--ink-to) calc(var(--p) * 100%), var(--ink-from));
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  body[data-theme-switch] {
    --bg: var(--bg-from);
    background-color: var(--bg);
    color: var(--ink-from);
    transition:
      background-color 0.6s ease-out,
      color 0.6s ease-out;
  }

  body[data-theme-switch].is-theme-dark {
    --bg: var(--bg-to);
    background-color: var(--bg);
    color: var(--ink-to);
  }
}

/* ---- v4 reduced-motion: 最終状態を即時表示 ---- */
@media (prefers-reduced-motion: reduce) {
  .loader {
    display: none !important;
  }

  body.is-loading {
    overflow: visible;
  }

  html.js [data-lines] .lines__line,
  html.js [data-float] .split-char,
  html.js .rv.rv--split .rv__win,
  html.js .rv.rv--split img {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .slot-reel {
    transform: translate3d(0, -66.667%, 0);
    transition: none;
  }

  .hex-mask {
    --hex: 1;
    will-change: auto;
  }

  html.js .stack__item {
    transform: none;
    filter: none;
    will-change: auto;
  }

  .ring__stage {
    transition: none;
  }
}
/* ==========================================================================
   以下は移植元 assets/css/sub.css を無変更で連結
   ========================================================================== */
/* ==========================================================================
   sub.css — 下層ページ共通スタイル（spec-sub-v1 ＋ §13）
   読み込み順: base.css → top.css → motion.css → sub.css（最後に読ませて勝たせる / D1）
   演出はすべて motion.js の既存部品（data-slot / data-lines / data-float / data-reveal /
   .rv / .rv--split / .hex-mask / .wave / data-progress / data-snow）。ここは見た目だけを書く。
   下層では body[data-theme-switch] を使わない（§13 A1）。CTA は最初からネイビー地。

   ■ 共通クラス一覧
     main.sub                 下層の main
     .page-hero               ページヒーロー（__photo.rv / __shade / __snow / __body / __en / __title / __catch）
                              修飾: --flip（写真を左右反転）/ --business --safety --recruit --contact --news（写真位置）
     .breadcrumb              パンくず（.page-hero の下端。__list は ol.container）
     .page-hero__wave         ヒーロー直下の .wave（白で塗る）
     .sub-sec                 本文セクション（--ice: 薄水色地 / --dark: ネイビー地＋雪 / --tight: 余白小 / --join: 上余白なし）
     .sub-sec__bg / __snow / __inner   暗色セクションの背景写真（薄く）・雪 canvas・前面コンテナ
     .sub-wave--navy          暗色セクションの前後に置く .wave（後ろ側は .wave--flip）
     .sub-head (--center)     見出しブロック（.sec-en + .sec-title + .sec-lead）
     .sec-title--md           長い見出し用の一段小さい .sec-title
     .sub-prose               本文段落の間隔
     .num                     Outfit の番号（01〜）
     .photo-frame             角丸写真枠（.rv / .rv--split と併用）
     .flake-deco              写真に添える回転する雪の結晶 SVG
     .media-grid              本文＋写真の2カラム（__media）
     .card-grid / .feature-card (.num / __media.hex-mask / __title / __text)   3列カード
     .num-list / .num-item (__num / __word)   大型番号＋語の3列（線が伸びる）
     .creed-grid / .creed (__title / __lead / __lines / __list / __text / __sub)  暗色地の条文カード
     .chip-list               枠線ピルの横並びリスト
     .alt-rows / .alt-row (__media / __body / __num / __title)   写真と文の左右交互行
     .letter / .letter-grid (__title / __body)   罫線の便箋風ボックス
     .gmark (__badge / __title / __text)   認定マークのカード
     .split (__head)          左見出し（PC は sticky）＋右本文の2カラム
     .spec-table (--rise)     dl の表（div > dt + dd、行ごと data-reveal）。--rise は行が左から出て下線が伸びる
     .link-band               ピル1つだけの帯
     .news-list / .news-row (__date / __cat / __title)   お知らせ一覧
     .contact-tel (__lead / __nums / __item / __label / __hours)   電話・FAX の案内
     .form / .field (__label / __control / __input / __line / __error) / .req / .radio-group / .radio / .hp / .form-actions / .form-notice
     .cta                     CTA 帯（__night / __snow / __inner / __en / __title / __lead / __actions / __tel）
   ========================================================================== */

/* --------------------------------------------------------------------------
   共通: 見出しの改行（語中で折らない・短い見出しの孤立1文字を防ぐ）
   -------------------------------------------------------------------------- */
.sub h1,
.sub h2,
.sub h3,
.sub .sec-lead,
.page-hero__catch,
.breadcrumb {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

@supports (word-break: auto-phrase) {
  .sub h1,
  .sub h2,
  .sub h3,
  .sub .sec-lead,
  .page-hero__catch,
  .contact-tel__lead {
    word-break: auto-phrase;
  }
}

/* 現在ページのナビ（aria-current） */
.g-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.sp-nav a[aria-current="page"] {
  color: var(--blue);
}

.site-footer__logo {
  display: inline-block;
}

.num {
  font-family: var(--font-en);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--sky);
}

/* --------------------------------------------------------------------------
   ページヒーロー: 写真（.rv）＋左下からの ice グラデーション＋雪（light）
   写真はヘッダーの下から始める（人物の帽子・顔がヘッダーに近づきすぎないように）
   重なり順: photo(0) < shade(1) < snow(2) < body / breadcrumb(3)
   -------------------------------------------------------------------------- */
.page-hero {
  --hero-wave: clamp(40px, 8vw, 120px); /* 直下の .wave と同じ高さ（motion.css の --wave-h） */
  --hero-pos: center 10%;
  --hero-pos-sp: center center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* 高さは幅に比例させる（横長で低い画面でも写真の上下トリミングを幅によらずほぼ一定に保つ）。
     背の高い画面では 56vh を下限にする。min-height なので文字ブロックが入り切らなければヒーローが伸びる */
  min-height: clamp(500px, max(calc(var(--header-h) + 40vw), 56vh), 860px);
  /* 文字ブロックは下端（波＋72px）に置き、上はヘッダーの下に必ず余白を確保する（ヘッダーに潜らない） */
  padding-top: calc(var(--header-h) + 36px);
  padding-bottom: calc(var(--hero-wave) + 72px);
  overflow: hidden;
  isolation: isolate;
  color: var(--navy);
  background: var(--ice);
}

/* 写真の見せる位置（--hero-pos: 769px 以上／--hero-pos-sp: 768px 以下） */
.page-hero--business { --hero-pos: 62% 6%; --hero-pos-sp: 60% 0%; }
/* キャブの屋根〜しゃがんで点検する人物の足元までを波の上に収める */
.page-hero--safety { --hero-pos: 50% 66%; --hero-pos-sp: 62% 0%; }
/* recruit / contact は頭頂部に余白を足した派生画像（*-hero-v1）を上端合わせで使う */
.page-hero--recruit { --hero-pos: 55% 78%; --hero-pos-sp: 50% 74%; }
.page-hero--contact { --hero-pos: 50% 12%; --hero-pos-sp: 32% 0%; }
/* トラックのフロント（バンパー）を波より上に出すため下端合わせ */
.page-hero--news { --hero-pos: 60% 100%; --hero-pos-sp: 50% 0%; }

.page-hero__photo,
.page-hero__shade,
.page-hero__snow {
  position: absolute;
  inset: 0;
}

.page-hero__photo {
  top: var(--header-h);
  z-index: 0;
  overflow: hidden;
}

.page-hero__photo picture,
.page-hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
}

.page-hero__photo img {
  object-fit: cover;
  object-position: var(--hero-pos);
}

/* 着地後はごく弱い揺らぎ（拡大と横ずれ）を往復させる */
.page-hero.is-ready .page-hero__photo picture {
  transform-origin: 50% 30%;
  animation: sub-hero-drift 16s ease-in-out 1.8s infinite alternate;
}

@keyframes sub-hero-drift {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.05) translate3d(-1%, 0.6%, 0);
  }
}

.page-hero__shade {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(232, 241, 248, 0.94) 0%, rgba(232, 241, 248, 0.78) 30%, rgba(232, 241, 248, 0) 62%),
    linear-gradient(0deg, rgba(232, 241, 248, 0.9) 0%, rgba(232, 241, 248, 0) 45%);
}

.page-hero__snow {
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* 白い結晶を明るい地でも見えるよう、青い縁取りを薄く足す */
  filter: drop-shadow(0 0 1.5px rgba(16, 48, 192, 0.45));
}

/* 通常フロー（.page-hero の flex 下端寄せ）。位置は .page-hero の padding で決まる */
.page-hero__body {
  position: relative;
  z-index: 3;
}

.page-hero__en {
  font-family: var(--font-en);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.34em;
  color: var(--blue);
}

.page-hero__title {
  position: relative;
  display: inline-block;
  margin-top: 14px;
  padding-bottom: 20px;
  font-size: clamp(44px, 6.2vw, 92px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

/* 下線は absolute（行数に混ぜない）。ローダー退場後に左から伸びる */
.page-hero__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(100%, 220px);
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--sky));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease-out) 0.7s;
}

html.no-js .page-hero__title::after,
.page-hero.is-ready .page-hero__title::after,
.page-hero.is-static .page-hero__title::after {
  transform: scaleX(1);
}

.page-hero__catch {
  margin-top: 18px;
  font-family: var(--font-catch);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--blue);
}

/* パンくず: ヒーロー下端（wave の上） */
.breadcrumb {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--hero-wave) + 12px);
  z-index: 3;
  font-size: 15px;
  line-height: 1.6;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.breadcrumb__list li + li::before {
  content: "›";
  margin-right: 12px;
  color: var(--sky);
}

.breadcrumb a {
  font-family: var(--font-en);
  letter-spacing: 0.12em;
  color: var(--blue);
  border-bottom: 1px solid rgba(16, 48, 192, 0.35);
  transition: border-color 0.4s ease-out;
}

.breadcrumb a:hover {
  border-bottom-color: var(--blue);
}

/* 左右反転版（人物が左にいる写真を右へ寄せ、左の文字と重ねない。写真に文字は無い） */
.page-hero--flip .page-hero__photo {
  transform: scaleX(-1);
}

/* ヒーロー直下の波: ヒーローに重ねて白で塗る */
.page-hero__wave {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--wave-h));
  color: var(--white);
}

/* --------------------------------------------------------------------------
   本文セクション
   -------------------------------------------------------------------------- */
.sub-sec {
  position: relative;
  padding-block: clamp(88px, 11vw, 160px);
  color: var(--ink);
}

.sub-sec--tight {
  padding-block: clamp(56px, 7vw, 96px);
}

.sub-sec--join {
  padding-top: 0;
}

.sub-sec--ice {
  background: var(--ice);
}

.sub-sec--dark {
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  background: var(--navy);
}

.sub-sec__bg,
.sub-sec__snow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sub-sec__bg {
  z-index: -1;
  opacity: 0.18;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}

.sub-sec__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sub-sec__snow {
  z-index: 0;
  width: 100%;
  height: 100%;
}

.sub-sec__inner {
  position: relative;
  z-index: 1;
}

.sub-wave--navy {
  color: var(--navy);
}

.sub-wave--navy:not(.wave--flip) {
  margin-bottom: -1px;
}

.sub-wave--navy.wave--flip {
  margin-top: -1px;
}

/* 見出しブロック */
.sub-head {
  margin-bottom: clamp(44px, 5vw, 76px);
}

.sub-head--center {
  text-align: center;
}

.sub-head--center .sec-lead {
  margin-inline: auto;
}

.sub-sec .sec-en {
  color: var(--blue);
}

.sub-sec--dark .sec-en {
  color: var(--sky);
}

.sec-title--md {
  font-size: clamp(26px, 3.2vw, 46px);
  line-height: 1.45;
}

.sub .sec-lead {
  margin-top: 26px;
  line-height: 2;
}

/* 長文リードの [data-float]: 文字を inline のままにして行頭禁則（「、」「。」）を効かせる */
.sub .sec-lead[data-float] .split-char {
  display: inline;
  white-space: normal;
}

.sub-prose > p {
  line-height: 2;
}

.sub-prose > p + p {
  margin-top: 1.1em;
}

/* 写真枠（.rv / .rv--split と併用） */
.photo-frame {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 24px;
  background: var(--ice);
}

.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 雪の結晶（ゆっくり回転。keyframes は top.css の flake-spin） */
.flake-deco {
  position: absolute;
  right: -28px;
  bottom: -52px;
  display: block;
  width: clamp(84px, 9vw, 140px);
  aspect-ratio: 1;
  color: var(--sky);
  pointer-events: none;
}

.flake-deco svg {
  width: 100%;
  height: 100%;
  animation: flake-spin 30s linear infinite;
}

/* 本文＋写真の2カラム */
.media-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}

.media-grid__media {
  position: relative;
}

.media-grid__media .photo-frame {
  aspect-ratio: 4 / 3.4;
}

/* --------------------------------------------------------------------------
   カード3列（写真は .hex-mask で展開）
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
  align-items: start;
}

/* 中央のカードだけ下げて、並びにリズムを出す */
.card-grid > :nth-child(3n + 2) {
  margin-top: 72px;
}

.feature-card {
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 24px 60px rgba(10, 30, 80, 0.08);
}

.feature-card > .num {
  font-size: clamp(40px, 4vw, 56px);
}

.feature-card__media {
  margin-top: 18px;
  aspect-ratio: 3 / 2;
  border-radius: 16px;
  background: var(--ice);
}

.feature-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

@media (hover: hover) {
  .feature-card:hover .feature-card__media img {
    transform: scale(1.05);
  }
}

.feature-card__title {
  margin-top: 20px;
  font-size: clamp(21px, 1.8vw, 25px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy);
}

.feature-card__text {
  margin-top: 18px;
  line-height: 1.95;
}

/* --------------------------------------------------------------------------
   大型番号＋語の3列（上線が左から伸びる）
   -------------------------------------------------------------------------- */
.num-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
}

.num-item {
  position: relative;
  padding-top: 32px;
  border-top: 1px solid rgba(16, 48, 192, 0.14);
}

.num-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--sky));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0s) + 0.2s);
}

html.no-js .num-item::before,
.num-item.is-in::before {
  transform: scaleX(1);
}

/* 袋文字の大型番号 */
.num-item__num {
  font-size: clamp(76px, 9vw, 140px);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--blue);
}

.num-item__word {
  margin-top: 18px;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   理念（暗色地の条文カード）
   -------------------------------------------------------------------------- */
.philosophy__label {
  margin-top: 26px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.78);
}

.philosophy__concept {
  margin-top: 6px;
  font-family: var(--font-catch);
  font-size: clamp(32px, 5.6vw, 80px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-shadow: 0 4px 40px rgba(3, 12, 28, 0.5);
}

.creed-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}

.creed {
  padding: clamp(28px, 3.4vw, 48px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.045);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.creed__title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--sky);
}

.creed__title::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}

.creed__lead {
  margin-top: 18px;
  font-family: var(--font-catch);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 600;
  line-height: 1.4;
}

.creed__lines {
  margin-top: 14px;
}

.creed__lines li {
  text-wrap: pretty;
  font-family: var(--font-catch);
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 600;
  line-height: 2.1;
}

.creed__list {
  margin-top: 16px;
}

.creed__list li {
  text-wrap: pretty;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.creed__list li:last-child {
  border-bottom: 0;
}

.creed__text {
  margin-top: 14px;
  line-height: 2;
}

.creed__sub {
  margin-top: 22px;
  font-weight: 700;
  color: var(--sky);
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.chip-list li {
  padding: 6px 22px;
  font-weight: 500;
  line-height: 1.6;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   写真と文の左右交互行（safety の主役: 各行の写真が .rv--split で開く）
   -------------------------------------------------------------------------- */
.alt-rows {
  display: grid;
  gap: clamp(80px, 10vw, 150px);
}

.alt-row {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(36px, 6vw, 96px);
}

.alt-row__media {
  position: relative;
  z-index: 0;
}

/* 写真の背後にずらした水色の板（偶数行は逆側） */
.alt-row__media::before {
  content: "";
  position: absolute;
  inset: 28px -28px -28px 28px;
  z-index: -1;
  border-radius: 24px;
  background: var(--ice);
}

.alt-row:nth-child(even) .alt-row__media {
  order: 2;
}

.alt-row:nth-child(even) .alt-row__media::before {
  inset: 28px 28px -28px -28px;
}

.alt-row__num {
  font-size: clamp(64px, 7vw, 112px);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--blue);
}

.alt-row__title {
  margin-top: 18px;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--navy);
}

.alt-row__body > p:not(.num) {
  margin-top: 20px;
  line-height: 2;
}

/* --------------------------------------------------------------------------
   便箋風ボックス（safety #family）
   -------------------------------------------------------------------------- */
.letter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
}

.letter {
  position: relative;
  padding: clamp(32px, 4.4vw, 64px);
  border: 1px solid rgba(16, 48, 192, 0.16);
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 30px 70px rgba(10, 30, 80, 0.08);
}

.letter__title {
  font-family: var(--font-catch);
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--navy);
}

/* 行間 2em に合わせた罫線 */
.letter__body {
  margin-top: 28px;
  line-height: 2;
  background-image: linear-gradient(180deg, transparent calc(2em - 1px), rgba(16, 48, 192, 0.1) calc(2em - 1px));
  background-size: 100% 2em;
}

.letter__body > p {
  line-height: 2;
}

.letter__body > p + p {
  margin-top: 2em;
}

.letter-grid__media {
  position: relative;
}

.letter-grid__media .photo-frame {
  aspect-ratio: 4 / 5;
}

/* --------------------------------------------------------------------------
   認定マーク（safety #gmark）
   -------------------------------------------------------------------------- */
.gmark {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  max-width: 960px;
  margin-inline: auto;
  padding: clamp(28px, 4vw, 56px);
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 24px 60px rgba(10, 30, 80, 0.08);
}

.gmark__badge {
  width: 200px;
  padding: 16px;
  border: 1px solid rgba(16, 48, 192, 0.12);
  border-radius: 16px;
  background: var(--white);
}

.gmark__badge img {
  width: 100%;
  height: auto;
}

.gmark__title {
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--navy);
}

.gmark__text {
  margin-top: 16px;
  line-height: 2;
}

/* --------------------------------------------------------------------------
   2カラム（左見出し sticky）＋ spec-table
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.split__head {
  position: sticky;
  top: calc(var(--header-h) + 40px);
  margin-bottom: 0;
}

.spec-table > div {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(16, 48, 192, 0.14);
}

.spec-table > div:first-child {
  border-top: 1px solid rgba(16, 48, 192, 0.14);
}

.spec-table dt {
  font-weight: 700;
  color: var(--blue);
}

.spec-table dd {
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* 会社概要のアクセス: Googleマップ埋め込み（.access-map の外枠は top.css 側、ここは明るい背景用の配色） */
.access-map__frame {
  border-color: rgba(16, 48, 192, 0.14);
  background: var(--ice, #eef3fb);
}

.access-map__link {
  color: var(--blue);
}

/* グループ会社カード（明るい背景用の配色。構造は top.css 側） */
.group-card {
  border-color: rgba(16, 48, 192, 0.14);
  background: var(--ice, #eef3fb);
}

.group-card__desc {
  color: var(--ink);
}

.group-card__link {
  color: var(--blue);
}

@supports (word-break: auto-phrase) {
  .creed__list li,
  .spec-table dd {
    word-break: auto-phrase;
  }
}

/* 行数が多い表は、行ごとの遅延を詰める（motion.js の 0.15s 刻みを 0.35 倍） */
html.js .spec-table > [data-reveal] {
  transition-delay: calc(var(--reveal-delay, 0s) * 0.35);
}

/* --rise: 行が左から出て、下線が左から伸びる（recruit の主役） */
.spec-table--rise > div {
  position: relative;
  border-bottom-color: transparent;
}

.spec-table--rise > div::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--blue), rgba(95, 173, 221, 0.35));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0s) * 0.35 + 0.25s);
}

html.no-js .spec-table--rise > div::after,
.spec-table--rise > .is-in::after {
  transform: scaleX(1);
}

html.js .spec-table--rise > [data-reveal] {
  transform: translate3d(-32px, 0, 0);
}

html.js .spec-table--rise > [data-reveal].is-in {
  transform: translate3d(0, 0, 0);
}

.sub-sec--dark .spec-table > div {
  border-color: rgba(255, 255, 255, 0.16);
}

.sub-sec--dark .spec-table dt {
  color: var(--sky);
}

/* ピル1つの帯 */
.link-band {
  display: flex;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   お知らせ一覧
   -------------------------------------------------------------------------- */
.news-list {
  border-top: 1px solid rgba(16, 48, 192, 0.14);
}

.news-row {
  display: grid;
  grid-template-columns: 8.5em auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 28px;
  padding: 30px 4px;
  border-bottom: 1px solid rgba(16, 48, 192, 0.14);
}

/* 仮データ表示時のみ、先頭に .tmp-data バッジ分の列を足す（WordPress実投稿の行は対象外） */
.news-row--tmp {
  grid-template-columns: auto 8.5em auto minmax(0, 1fr);
}

.news-row__date {
  font-family: var(--font-en);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--blue);
}

.news-row__cat {
  justify-self: start;
  padding: 2px 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 999px;
}

.news-row__title {
  font-weight: 500;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   お問い合わせ: 電話・FAX
   -------------------------------------------------------------------------- */
.contact-tel {
  text-align: center;
}

.contact-tel__lead {
  max-width: 820px;
  margin-inline: auto;
  line-height: 2;
  text-wrap: pretty;
}

.contact-tel__nums {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 64px;
  margin-top: 28px;
}

.contact-tel__item {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-en);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--navy);
  transition: color 0.4s ease-out;
}

a.contact-tel__item:hover {
  color: var(--blue);
}

.contact-tel__label {
  font-size: 15px;
  letter-spacing: 0.24em;
  color: var(--blue);
}

.contact-tel__hours {
  margin-top: 14px;
  font-size: 16px;
  color: #444;
}

/* --------------------------------------------------------------------------
   フォーム: 下線入力（フォーカスで --blue の線が左から伸びる）＋必須バッジ
   -------------------------------------------------------------------------- */
.form {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  padding: clamp(28px, 5vw, 72px);
  border-radius: 28px;
  background: var(--white);
  box-shadow: 0 30px 80px rgba(10, 30, 80, 0.08);
}

.field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field + .field {
  margin-top: 36px;
}

.field__label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--navy);
}

.req {
  display: inline-block;
  padding: 1px 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--white);
  background: var(--blue);
  border-radius: 999px;
}

.field__control {
  position: relative;
  margin-top: 6px;
}

.field--short .field__control {
  max-width: 180px;
}

.field__input {
  display: block;
  width: 100%;
  padding: 12px 2px;
  font: inherit;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(16, 48, 192, 0.28);
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* outline:none で消えたキーボードフォーカスを戻す（マウス操作時は出さない） */
.field__input:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

textarea.field__input {
  min-height: 200px;
  margin-top: 8px;
  padding: 14px 16px;
  resize: vertical;
  border: 1px solid rgba(16, 48, 192, 0.28);
  border-radius: 12px;
}

.field__line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--sky));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
  pointer-events: none;
}

textarea.field__input + .field__line {
  left: 12px;
  right: 12px;
}

.field__input:focus + .field__line {
  transform: scaleX(1);
}

.field.is-invalid .field__input {
  border-color: #c62828;
}

.field__error {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: #c62828;
}

.field__error:empty {
  margin-top: 0;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px 10px 16px;
  font-size: 17px;
  line-height: 1.4;
  border: 1px solid rgba(16, 48, 192, 0.28);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s ease-out, border-color 0.3s ease-out;
}

.radio input {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--blue);
  border-radius: 50%;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.radio input::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue);
  transform: scale(0);
  transition: transform 0.3s var(--ease-bounce);
}

.radio input:checked::before {
  transform: scale(1);
}

.radio:has(input:checked) {
  border-color: var(--blue);
  background: var(--ice);
}

/* ハニーポット（人には見せない・フォーカスもさせない） */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  margin-top: 48px;
  text-align: center;
}

button.pill {
  padding: 0;
  font-family: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.form-notice {
  font-weight: 500;
  line-height: 1.8;
  color: var(--navy);
  text-align: center;
}

.form-notice:not(:empty) {
  margin-top: 28px;
  padding: 18px 22px;
  border-radius: 14px;
  background: var(--ice);
}

/* --------------------------------------------------------------------------
   CTA 帯: 最初からネイビー地。帯自身の --p（data-progress="view"）で夜の車列が透け、
   スクロールでゆっくり引いていく（§13 A1）
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(120px, 14vw, 200px);
  color: var(--white);
  text-align: center;
  background-color: var(--navy);
}

.cta__night {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: calc(clamp(0, (var(--p, 0) - 0.05) * 1.6, 1) * 0.55);
  pointer-events: none;
}

.cta__night picture,
.cta__night img {
  display: block;
  width: 100%;
  height: 100%;
}

.cta__night img {
  object-fit: cover;
  object-position: center 60%;
  transform: scale(calc(1.16 - var(--p, 0) * 0.16));
  will-change: transform;
}

.cta__night::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 22, 51, 0.7) 0%, rgba(11, 22, 51, 0.15) 45%, rgba(11, 22, 51, 0.75) 100%);
}

.cta__snow {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cta__inner {
  position: relative;
  z-index: 1;
}

.cta__en {
  font-family: var(--font-en);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.34em;
  color: var(--sky);
}

.cta__title {
  margin-top: 18px;
  font-family: var(--font-catch);
  font-size: clamp(28px, 5.2vw, 76px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-shadow: 0 4px 40px rgba(3, 12, 28, 0.5);
}

.cta__lead {
  margin-top: 18px;
  font-size: clamp(17px, 1.4vw, 20px);
  color: rgba(255, 255, 255, 0.9);
}

.cta__actions {
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}

.cta__tel {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 36px;
  font-family: var(--font-en);
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.06em;
  transition: color 0.4s ease-out;
}

.cta__tel-label {
  font-size: 15px;
  letter-spacing: 0.24em;
  color: var(--sky);
}

.cta__tel:hover {
  color: var(--sky);
}

/* --------------------------------------------------------------------------
   ページヒーロー写真のリビールはローダー退場（.page-hero.is-ready）まで待つ
   （.hero を使わないため motion.js の hero 待ちが効かない分を CSS で補う）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .page-hero:not(.is-ready):not(.is-static) .rv.is-in {
    clip-path: inset(18%);
  }

  html.js .page-hero:not(.is-ready):not(.is-static) .rv.is-in img {
    transform: scale(1.3);
  }
}

/* --------------------------------------------------------------------------
   1130px 以下
   -------------------------------------------------------------------------- */
@media (max-width: 1130px) {
  .card-grid {
    gap: 18px;
  }

  .card-grid > :nth-child(3n + 2) {
    margin-top: 40px;
  }

  .spec-table > div {
    grid-template-columns: 140px minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   768px 以下
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .page-hero {
    min-height: clamp(420px, max(calc(var(--header-h) + 64vw), 56vh), 520px);
    padding-top: calc(var(--header-h) + 28px);
    padding-bottom: calc(var(--hero-wave) + 52px);
  }

  .page-hero__photo img {
    object-position: var(--hero-pos-sp);
  }

  .page-hero__shade {
    background:
      linear-gradient(90deg, rgba(232, 241, 248, 0.8) 0%, rgba(232, 241, 248, 0.35) 70%, rgba(232, 241, 248, 0.1) 100%),
      linear-gradient(0deg, rgba(232, 241, 248, 0.96) 0%, rgba(232, 241, 248, 0.7) 40%, rgba(232, 241, 248, 0) 72%);
  }

  .page-hero__title {
    margin-top: 10px;
    padding-bottom: 14px;
    font-size: clamp(34px, 10.2vw, 44px);
    letter-spacing: 0.02em;
  }

  .page-hero__title::after {
    height: 3px;
    width: min(100%, 140px);
  }

  .page-hero__catch {
    margin-top: 12px;
    font-size: 19px;
    letter-spacing: 0.02em;
  }

  .breadcrumb {
    bottom: calc(var(--hero-wave) + 6px);
  }

  .media-grid,
  .card-grid,
  .num-list,
  .creed-grid,
  .alt-row,
  .letter-grid,
  .gmark,
  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .flake-deco {
    right: -6px;
    bottom: -40px;
    width: 80px;
  }

  .card-grid > :nth-child(3n + 2) {
    margin-top: 0;
  }

  .num-list {
    gap: 44px;
  }

  .creed {
    padding: 28px 22px;
  }

  .creed__lines li {
    font-size: 17px;
    letter-spacing: 0.02em;
  }

  .alt-rows {
    gap: 80px;
  }

  .alt-row {
    gap: 40px;
  }

  .alt-row:nth-child(even) .alt-row__media {
    order: 0;
  }

  .alt-row__media::before,
  .alt-row:nth-child(even) .alt-row__media::before {
    inset: 16px -8px -16px 16px;
  }

  .letter {
    padding: 28px 22px;
  }

  .letter-grid__media .photo-frame {
    aspect-ratio: 3 / 2;
  }

  .gmark {
    justify-items: center;
    text-align: center;
  }

  .gmark__badge {
    width: 180px;
  }

  .split__head {
    position: static;
  }

  .spec-table > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 14px 0;
  }

  .news-row {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 24px 2px;
  }

  .news-row__title {
    grid-column: 1 / -1;
  }

  .contact-tel__nums {
    flex-direction: column;
    align-items: center;
  }

  .form {
    padding: 28px 20px;
    border-radius: 20px;
  }

  .cta__tel {
    gap: 10px;
  }
}

/* --------------------------------------------------------------------------
   prefers-reduced-motion: 最終状態を即表示・ループ停止
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .page-hero.is-ready .page-hero__photo picture,
  .flake-deco svg {
    animation: none;
  }

  .page-hero__title::after,
  .num-item::before,
  .spec-table--rise > div::after,
  .field__line,
  .radio input::before {
    transition: none;
  }

  .page-hero__title::after,
  .num-item::before,
  .spec-table--rise > div::after {
    transform: scaleX(1);
  }

  html.js .spec-table--rise > [data-reveal] {
    transform: none;
  }

  .feature-card__media img,
  .cta__tel,
  .breadcrumb a,
  .contact-tel__item,
  .radio {
    transition: none;
  }

  .cta__night img {
    transform: none;
    will-change: auto;
  }
}

/* ==========================================================================
   WordPress化での追記(以下は移植元CSSに存在しない新規スタイル)。
   根拠:
   - .news-card__stretched-link / .news-row__stretched-link:
     お知らせカード/行はWordPress化前は仮データで非クリッカブルだったが、
     .news-card:hover(top.css)が既に定義されており「将来クリック可能にする」
     設計意図が読み取れたため、記事詳細へのリンクをストレッチリンクパターンで追加。
     grid内の子要素(time/span/p)の構造・順序は変更していない。
   - .news-empty: 投稿が0件のときの空状態文言(移植元に無いUIなので新規)。
   - .pagination(the_posts_pagination()の出力): WordPress標準クラスに、
     サイトの配色(--blue)だけを当てている(新規UI)。
   - .article-content 見出し等: single.php の the_content() が出力しうる
     h2〜h4/ul/ol/blockquoteの最低限の可読性を確保(移植元に記事詳細の前例が無いため新規)。
   ========================================================================== */
.news-card,
.news-row {
  position: relative;
}

/* タイトル文字は元の位置に残し、クリック範囲だけ ::after でカード/行全体に広げる
   （リンク自体を absolute にするとタイトルがセルから外れて左上に重なる） */
.news-card__stretched-link,
.news-row__stretched-link {
  color: inherit;
  text-decoration: none;
}

/* お知らせタイトルは運用で自由に入るため、末尾1文字だけの行（例「〜しまし／た」）や単語途中の改行を避ける。
   pretty は日本語の短い見出しで効かなかったため balance、auto-phrase で文節改行（非対応ブラウザは従来どおり）。
   文節が長すぎる場合のはみ出し防止に overflow-wrap を併用 */
.news-card__title,
.news-row__title {
  text-wrap: balance;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

.news-card__stretched-link::after,
.news-row__stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.news-card__stretched-link:focus-visible,
.news-row__stretched-link:focus-visible {
  outline: none;
}

.news-card__stretched-link:focus-visible::after,
.news-row__stretched-link:focus-visible::after {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.news-empty {
  padding: 40px 0;
  color: var(--ink);
  text-align: center;
}

/* the_posts_pagination() が出力する <nav class="navigation pagination"> をそのまま対象にする
   (「news-pagination」という独自クラスは実際の出力に付かないため .pagination を使う) */
.pagination.navigation .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  color: var(--blue);
  text-decoration: none;
  border: 1px solid rgba(16, 48, 192, 0.2);
  border-radius: 999px;
  transition: background 0.3s ease-out, color 0.3s ease-out;
}

.pagination .page-numbers.current {
  color: var(--white);
  background: var(--blue);
  border-color: var(--blue);
}

.pagination .page-numbers.dots {
  border: none;
}

.pagination a.page-numbers:hover {
  background: var(--ice);
}

.sub-prose h2,
.sub-prose h3,
.sub-prose h4 {
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  font-weight: 700;
  line-height: 1.5;
}

.sub-prose ul,
.sub-prose ol {
  margin: 1em 0;
  padding-left: 1.4em;
}

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

.sub-prose img {
  max-width: 100%;
  height: auto;
  margin: 1.4em 0;
  border-radius: 12px;
}

.sub-prose a {
  color: var(--blue);
  text-decoration: underline;
}

.sub-prose blockquote {
  margin: 1.4em 0;
  padding: 0.8em 1.2em;
  color: var(--ink);
  border-left: 4px solid var(--sky);
  background: var(--ice);
}

/* ===== プライバシーポリシー＋フォーム同意欄（2026-09-24 追加） ===== */
.policy {
  max-width: 880px;
}

.policy__intro {
  line-height: 2;
}

.policy__item {
  margin-top: 48px;
}

.policy__item h2 {
  padding-left: 14px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  border-left: 4px solid var(--blue);
}

.policy__item p {
  margin-top: 14px;
  line-height: 2;
}

.policy__item ul {
  margin-top: 14px;
  padding-left: 1.4em;
  list-style: disc;
}

.policy__item li {
  line-height: 1.9;
}

.policy__item li + li {
  margin-top: 0.3em;
}

.policy__item a,
.consent a {
  color: var(--blue);
  text-decoration: underline;
}

.policy__date {
  margin-top: 48px;
  text-align: right;
}

.consent {
  text-align: center;
}

.consent__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  line-height: 1.6;
  cursor: pointer;
}

.consent__label input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
}

@media (max-width: 768px) {
  .policy__item {
    margin-top: 36px;
  }

  .policy__item h2 {
    font-size: 19px;
  }
}

/* ===== Contact Form 7 対応（WordPress専用・2026-09-24 追加） =====
   静的プレビュー（contact/index.html）は自前フォームなので assets/css には入れない。
   CF7 は各入力を <span class="wpcf7-form-control-wrap"> で包むため、兄弟セレクタ（input + .field__line）が
   効かなくなる分と、CF7 標準の見た目（応答枠・ラジオ・エラー文）を既存デザインに合わせ直す。 */
.form .wpcf7-form-control-wrap {
  display: block;
}

.form .wpcf7-form-control-wrap:has(.field__input:focus) + .field__line {
  transform: scaleX(1);
}

.form .wpcf7-form-control-wrap:has(textarea) + .field__line {
  left: 12px;
  right: 12px;
}

.form .field__input.wpcf7-not-valid {
  border-color: #c62828;
}

/* エラー文は入力欄の直下（欄間の余白36px内）に絶対配置する。
   CF7 は入力欄から離れた瞬間（change）にエラー文を消すため、高さを持たせると
   送信ボタンが押下中に上へずれてクリックが空振りする */
.form .wpcf7-not-valid-tip {
  position: absolute;
  top: 100%;
  left: 0;
  width: max-content;
  max-width: 100%;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: #c62828;
}

/* 性別: CF7 の list-item を既存の .radio 見た目に。
   CF7 の [radio] は常に必須になるため、任意項目の性別は [checkbox exclusive]（1つだけ選べる）で作っている */
.form .radio-group .wpcf7-form-control-wrap,
.form .radio-group .wpcf7-form-control {
  display: contents;
}

.form .radio-group .wpcf7-list-item {
  margin: 0;
}

.form .radio-group .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px 10px 16px;
  font-size: 17px;
  line-height: 1.4;
  border: 1px solid rgba(16, 48, 192, 0.28);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s ease-out, border-color 0.3s ease-out;
}

.form .radio-group .wpcf7-list-item input {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--blue);
  border-radius: 50%;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.form .radio-group .wpcf7-list-item input::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue);
  transform: scale(0);
  transition: transform 0.3s var(--ease-bounce);
}

.form .radio-group .wpcf7-list-item input:checked::before {
  transform: scale(1);
}

.form .radio-group .wpcf7-list-item label:has(input:checked) {
  border-color: var(--blue);
  background: var(--ice);
}

/* 同意欄 */
.form .consent .wpcf7-list-item {
  margin: 0;
}

.form .consent .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  line-height: 1.6;
  cursor: pointer;
}

.form .consent .wpcf7-list-item input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
}

/* 同意チェック前は送信ボタン無効（CF7の仕様） */
.form .wpcf7-submit[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 送信中スピナーはボタンの位置をずらさない */
.form .form-actions {
  position: relative;
}

.form .form-actions .wpcf7-spinner {
  position: absolute;
  top: 50%;
  left: calc(50% + 130px);
  margin: 0;
  transform: translateY(-50%);
}

/* 送信結果の応答枠（.form-notice と同じ見た目） */
.form .wpcf7 form .wpcf7-response-output {
  margin: 28px 0 0;
  padding: 18px 22px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--navy);
  text-align: center;
  background: var(--ice);
  border: 0;
  border-radius: 14px;
}

.form .wpcf7 form.init .wpcf7-response-output,
.form .wpcf7 form .wpcf7-response-output:empty {
  display: none;
}

.form .wpcf7 form.invalid .wpcf7-response-output,
.form .wpcf7 form.unaccepted .wpcf7-response-output,
.form .wpcf7 form.failed .wpcf7-response-output,
.form .wpcf7 form.aborted .wpcf7-response-output,
.form .wpcf7 form.spam .wpcf7-response-output {
  color: #c62828;
  background: #fdecea;
}

/* ===== お問い合わせ: 確認画面・完了ページ（2026-09-24 追加） ===== */
.form-sec {
  scroll-margin-top: 96px;
}

.form [hidden] {
  display: none !important;
}

.confirm:focus {
  outline: none;
}

.confirm__title {
  margin: 0 0 0.8em;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--navy);
}

.confirm__lead {
  margin: 0 0 1.8em;
  font-size: 16px;
  line-height: 1.9;
}

.confirm__list {
  margin: 0;
  border-top: 1px solid rgba(16, 48, 192, 0.18);
}

.confirm__list > div {
  display: grid;
  grid-template-columns: 13em 1fr;
  gap: 1em;
  align-items: baseline;
  padding: 1.3em 0;
  border-bottom: 1px solid rgba(16, 48, 192, 0.18);
}

.confirm__list dt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--navy);
}

.confirm__list dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.confirm__list dd.is-empty {
  color: rgba(10, 30, 80, 0.5);
}

.confirm__note {
  margin: 1.6em 0 0;
  font-size: 15px;
  line-height: 1.8;
  text-align: center;
  color: rgba(10, 30, 80, 0.7);
}

.confirm__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 2.4em;
}

.confirm__actions .pill {
  min-width: 13em;
}

.confirm__actions .pill[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 完了ページ（/contact/thanks/） */
.thanks {
  max-width: 820px;
  text-align: center;
}

.thanks__title {
  margin: 0 0 1.4em;
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--navy);
}

.thanks__text {
  margin: 0 0 1.4em;
  font-size: 17px;
  line-height: 2.1;
}

.thanks__note {
  margin: 0 0 2.4em;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(10, 30, 80, 0.7);
}

.thanks__note a {
  color: var(--blue);
  text-decoration: underline;
}

.thanks__actions {
  display: flex;
  justify-content: center;
}

@media (max-width: 768px) {
  .confirm__list > div {
    grid-template-columns: 1fr;
    gap: 0.4em;
    padding: 1.1em 0;
  }

  .confirm__actions .pill {
    width: 100%;
  }
}

/* 完了ページの見出し: フレーズの途中（「お問い／合わせ」等）で折り返さない */
.thanks__ph {
  display: inline-block;
}

/* 求人情報（TOP）: 16:9 の写真を見切れずに全体表示（2026-09-24 追加） */
.recruit__photo--wide {
  aspect-ratio: 1672 / 941;
}

/* ===== 求人: 焼き込み文言入りバナーの全体表示・16:9写真の全体表示（2026-09-24 追加） ===== */
/* ヒーロー: バナー（1946×808）を縦横比どおりに全体表示し、見出し・パンくずはその下に置く */
.page-hero--banner {
  justify-content: flex-start;
  min-height: 0;
  padding-top: var(--header-h);
}

.page-hero--banner .page-hero__photo {
  position: relative;
  inset: auto;
  flex: none;
  width: 100%;
  aspect-ratio: 1946 / 808;
}

.page-hero--banner .page-hero__photo img {
  object-position: 50% 50%;
}

/* 拡大の揺らぎと白いぼかしは使わない（写真全体をそのまま見せる） */
.page-hero--banner.is-ready .page-hero__photo picture {
  animation: none;
}

.page-hero--banner .page-hero__shade {
  display: none;
}

.page-hero--banner .page-hero__body {
  margin-top: clamp(28px, 4vw, 56px);
}

/* 16:9 の写真を見切れずに全体表示 */
.photo-frame--wide,
.media-grid__media .photo-frame--wide {
  aspect-ratio: 1672 / 941;
}

/* MESSAGE: 丸い写真を削除（2026-09-25・ユーザー指示）→ 文章を1列・中央に */
.message__grid {
  grid-template-columns: minmax(0, 1fr);
}