@charset "utf-8";
/* ==========================================================================
   ヨドラム工業 — LOADER / HERO
   完全中央配置。社名をサイト内で最も大きく見せる。
   ========================================================================== */

/* --------------------------------------------------------------------------
   LOADER — イントロ（全体で約2秒）
   JS 無効時は表示しない（画面を覆わないように）
   -------------------------------------------------------------------------- */
.loader { display: none; }

.js .loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: grid;
  place-items: center;
  background: var(--c-navy);
  clip-path: inset(0 0 0 0);
  will-change: clip-path;
}
.loader__mark {
  width: clamp(52px, 7vw, 76px);
  opacity: 0;
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  isolation: isolate;
  background: var(--c-navy);
  overflow: hidden;
}

/* --- 背景スライド（Full Bleed） ------------------------------------------ */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  will-change: opacity, clip-path;
}
.hero__slide:first-child { opacity: 1; clip-path: inset(0 0 0 0); }

/* <picture> は既定で inline のため領域いっぱいに広げる */
.hero__slide picture {
  position: absolute;
  inset: 0;
  display: block;
}
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 画像ごとの寄せ位置は data.js から --focus / --focus-sp で渡す */
  object-position: var(--focus, 50% 50%);
  will-change: transform;
}
@media (max-width: 700px) {
  .hero__slide img { object-position: var(--focus-sp, var(--focus, 50% 50%)); }
}

/* --- Overlay -------------------------------------------------------------
   画像を暗くしすぎず、中央のコピー周辺だけ自然に沈ませる
   -------------------------------------------------------------------------- */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* 1. コピーの背後だけを落とす楕円（写真全体は暗くしない） */
    radial-gradient(64% 36% at 50% 46%,
      var(--c-veil-focus) 0%,
      rgba(7,24,44,.34) 56%,
      rgba(7,24,44,0) 100%),
    /* 2. 画面全体のごく浅い均し */
    radial-gradient(108% 82% at 50% 46%,
      rgba(7,24,44,.14) 0%,
      rgba(7,24,44,.28) 70%,
      rgba(7,24,44,.42) 100%),
    /* 3. 上下 — ヘッダーと SCROLL の可読性 */
    linear-gradient(180deg,
      var(--c-veil-top) 0%,
      var(--c-veil-mid) 28%,
      rgba(7,24,44,.18) 60%,
      var(--c-veil-bottom) 100%);
}

/* --- 工業的な縦罫（デスクトップのみ） ------------------------------------ */
.hero__frame {
  position: absolute;
  inset: 0;
  z-index: -1;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  pointer-events: none;
}
.hero__frame::before,
.hero__frame::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--bd-w);
  background: linear-gradient(180deg,
    transparent,
    rgba(255,255,255,.16) 22%,
    rgba(255,255,255,.16) 78%,
    transparent);
}
.hero__frame::before { left: var(--gutter); }
.hero__frame::after  { right: var(--gutter); }

/* --------------------------------------------------------------------------
   中央のコピー — Eyebrow / H1 / Catch Copy の3要素のみ
   -------------------------------------------------------------------------- */
.hero__body {
  position: relative;
  width: 100%;
  padding:
    calc(var(--header-h) + var(--sp-5))
    var(--gutter)
    clamp(88px, 13vh, 140px);
  display: grid;
  justify-items: center;
  gap: clamp(10px, 1.4vw, 18px);
  text-align: center;
  color: var(--c-white);
}

.hero__eyebrow {
  font-size: clamp(.72rem, 1.4vw, .95rem);
  font-weight: var(--fw-medium);
  letter-spacing: .52em;
  text-indent: .52em;          /* 字間ぶんの右寄りを補正 */
  line-height: 1.6;
  color: var(--c-on-navy);
}

/* 社名の上を締める細い黄色ライン */
.hero__rule {
  width: var(--bd-w);
  height: clamp(22px, 4vh, 40px);
  background: linear-gradient(180deg, var(--c-yellow), rgba(255,212,0,0));
  transform-origin: top;
}

/* H1 — サイト内最大 */
.hero__name {
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 13.4vw, 8.6rem);
  font-weight: 800;
  letter-spacing: .06em;
  text-indent: .06em;
  line-height: 1.06;
  white-space: nowrap;         /* 2行にしない */
  text-shadow: 0 8px 44px rgba(7, 24, 44, .5);
}

.hero__tagline {
  font-size: clamp(.9rem, 2.1vw, 1.3rem);
  font-weight: var(--fw-medium);
  letter-spacing: .2em;
  text-indent: .2em;
  line-height: 1.8;
  color: var(--c-on-navy);
}

/* --------------------------------------------------------------------------
   SCROLL INDICATOR
   -------------------------------------------------------------------------- */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(22px, 4vh, 44px);
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-en);
  font-size: .6rem;
  font-weight: var(--fw-bold);
  letter-spacing: .32em;
  text-indent: .32em;
  color: rgba(255, 255, 255, .78);
}
.hero__scroll-line {
  position: relative;
  width: var(--bd-w);
  height: clamp(34px, 6vh, 62px);
  background: rgba(255, 255, 255, .24);
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-yellow);
  transform-origin: top;
  animation: scroll-drop 2.4s var(--ease-io) infinite;
}
@keyframes scroll-drop {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@media (max-width: 1000px) {
  .hero__frame { display: none; }
}
@media (max-width: 420px) {
  .hero__eyebrow { letter-spacing: .3em;  text-indent: .3em; }
  .hero__tagline { letter-spacing: .12em; text-indent: .12em; }
}

/* --------------------------------------------------------------------------
   MOTION — イントロの初期状態（JS 有効時のみ）
   -------------------------------------------------------------------------- */
.js .hero__body .reveal-line > span { transform: translateY(105%); }
.js .hero__rule   { transform: scaleY(0); }
.js .hero__scroll { opacity: 0; }
.js .header__inner { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* 継続的な動き（スローズーム・スクロール矢印のループ）は停止。
     ※ 全 transition を殺すブランケット指定は使わない（やわらかいフェードを残すため） */
  .hero__slide img { transform: none !important; animation: none !important; }
  .hero__scroll-line::after { animation: none; transform: scaleY(1); }

  /* HERO は演出を省略し、コピーをやわらかくフェード表示 */
  .js .hero__body .reveal-line > span,
  .js .hero__rule { transform: none !important; }
  .js .hero__body { animation: rm-hero-fade .8s ease .1s both; }
  .js .hero__scroll { animation: rm-hero-fade .8s ease .5s both; }
  .js .header__inner { opacity: 1 !important; }

  .loader, .js .loader { display: none !important; }
}

@keyframes rm-hero-fade { from { opacity: 0; } to { opacity: 1; } }

/* 法人格は小さく、屋号を最大に見せる */
.hero__corp {
  display: block;
  font-size: clamp(.68rem, 1.5vw, 1.1rem);
  font-weight: var(--fw-bold);
  letter-spacing: .34em;
  text-indent: .34em;
  line-height: 1.4;
  margin-bottom: .35em;
  color: rgba(255, 255, 255, .9);
}