/* ============================================================
   Total Work — style.css
   ------------------------------------------------------------
   目次
   1. CSS変数（デザイントークン）
   2. リセットCSS
   3. ベース
   4. 汎用ユーティリティ / 共通パーツ（btn, section）
   5. ヘッダー / ドロワーメニュー
   6. Hero
   7. About
   8. Business
   9. Strength
   9.5 Capability（対応領域）
   11. Company
   12. Recruit
   13. Contact
   13.5 Emblem（インタラクティブ3Dロゴ）
   14. Footer
   15. アニメーション（reveal / keyframes）
   16. レスポンシブ補助
   ------------------------------------------------------------
   命名規則: BEM（block__element--modifier）
   JSフック: js- プレフィックス（スタイルは当てない）
============================================================ */

/* ============================================================
   1. CSS変数（デザイントークン）
============================================================ */
:root {
  /* ----------------------------------------------------------
     Color — 名刺の世界観（アイボリー / ブロンズ / ネイビー黒 / 白）
     ------------------------------------------------------------
     ・純黒(#000)は不使用。青みのあるダークネイビーを“黒”として使用。
     ・ブロンズはアクセント専用（アイコン/ボタン/ライン/数字/ホバー）。
     ・実際の色は下の .theme-ivory / .theme-navy で文脈的に切り替える。
  ---------------------------------------------------------- */

  /* パレット定数（不変の原色） */
  --ivory:          #efe7d5;   /* アイボリー（名刺の地色） */
  --ivory-paper:    #f6f0e2;   /* アイボリー上のカード面（少し明るい） */
  --navy:           #12161f;   /* ネイビー寄りブラック（“黒”の代わり） */
  --navy-elevated:  #1a2029;   /* ネイビー上のカード面 */
  --navy-ink:       #1b222e;   /* アイボリー上の文字（濃紺インク） */
  --bronze:         #b0824c;   /* ブロンズ（アクセント） */
  --bronze-hover:   #c99b5f;   /* ブロンズ（ホバー時に明るく） */
  --white:          #ffffff;
  --paper-white:    #f4efe4;   /* ネイビー上の白文字（わずかに暖色） */
  --color-error:    #9c4a3c;   /* フォームのエラー表示専用（鮮やかなオレンジは使わない） */

  /* アクセント（全テーマ共通・ブロンズ） */
  --color-accent:        var(--bronze);
  --color-accent-hover:  var(--bronze-hover);

  /* 文脈カラー（既定はネイビー = 暗い側）
     → Hero / ヘッダー / ドロワー / ローダー / フッターはこの既定を使用。
     → セクションは .theme-ivory / .theme-navy で上書きする。 */
  --section-bg:          var(--navy);
  --color-bg:            var(--navy);
  --color-bg-elevated:   var(--navy-elevated);
  --color-text:          var(--paper-white);
  --color-text-muted:    #9e978a;
  --color-line:          rgba(244, 239, 228, 0.14);
  --color-overlay:       rgba(9, 12, 20, 0.55);   /* Hero暗幕（ネイビー） */

  /* Typography */
  --font-sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-en:    "Oswald", "Noto Sans JP", sans-serif;   /* 英字見出し用 */
  --font-serif:  "Cormorant Garamond", "Yu Mincho", Georgia, serif; /* 見出し等の明朝/セリフ */
  --font-script: "Kaushan Script", "Cormorant Garamond", cursive;    /* ロゴ社名（筆記体） */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --fs-2xl:  clamp(1.75rem, 1.2rem + 2vw, 2.75rem);   /* セクション見出し */
  --fs-hero: clamp(1.4rem, 0.7rem + 3.15vw, 3.15rem);  /* キャッチコピー（従来比 -30%） */

  /* Spacing — 余白は広く */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  6rem;
  --space-section: clamp(6rem, 4rem + 8vw, 11rem);    /* セクション上下 */

  /* Layout */
  --width-content: 1200px;
  --width-narrow:  840px;
  --header-height:          96px;   /* 仕様: 90〜100px */
  --header-height-scrolled: 76px;   /* スクロール時は少し引き締める */
  --header-height-sp:       68px;

  /* Motion */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --duration:  0.6s;

  /* Z-index 管理 */
  --z-header: 100;
  --z-drawer: 90;
}

/* ------------------------------------------------------------
   テーマ文脈（セクション単位で色を切り替える）
   ------------------------------------------------------------
   各 <section> に .theme-ivory / .theme-navy を付けるだけで、
   配下のコンポーネントが文脈カラーに追従する（個別CSSは不変）。
   スクロールで アイボリー⇄ネイビー が交互に切り替わりリズムを生む。
------------------------------------------------------------ */
.theme-ivory {
  --section-bg:        var(--ivory);
  --color-bg-elevated: var(--ivory-paper);
  --color-text:        var(--navy-ink);
  --color-text-muted:  #6e695e;
  --color-line:        rgba(27, 34, 46, 0.16);
}

.theme-navy {
  --section-bg:        var(--navy);
  --color-bg-elevated: var(--navy-elevated);
  --color-text:        var(--paper-white);
  --color-text-muted:  #9e978a;
  --color-line:        rgba(244, 239, 228, 0.14);
}

/* ============================================================
   2. リセットCSS
============================================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* 固定ヘッダー分だけアンカー位置を下げる */
  scroll-padding-top: var(--header-height);
}

body {
  -webkit-text-size-adjust: 100%;
}

ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img, video, iframe {
  max-width: 100%;
  display: block;
}

img {
  height: auto;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button {
  cursor: pointer;
}

/* ============================================================
   3. ベース
============================================================ */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

/* メニュー展開中は背面スクロールを止める（JSで付与） */
body.is-menu-open {
  overflow: hidden;
}

::selection {
  background-color: var(--color-accent);
  color: var(--navy);
}

/* キーボード操作時のみ表示する統一フォーカスリング */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ============================================================
   4. 汎用ユーティリティ / 共通パーツ
============================================================ */
/* 表示切り替え */
.u-sp-only { display: none; }
.u-pc-only { display: inline; }

@media (max-width: 767px) {
  .u-sp-only { display: inline; }
  .u-pc-only { display: none; }
}

/* --- ボタン --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.9em 2.4em;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1;
  transition: background-color 0.3s var(--ease-out),
              color 0.3s var(--ease-out),
              border-color 0.3s var(--ease-out);
}

.btn--primary {
  background-color: var(--color-accent);
  color: var(--navy);   /* ブロンズ地に濃紺インク */
}

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

.btn--outline {
  border: 1px solid var(--color-line);
  color: var(--color-text);
}

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

.btn--navy {
  background-color: var(--navy);
  color: var(--paper-white);
  border-radius: 999px;
}

.btn--navy:hover {
  background-color: color-mix(in srgb, var(--navy) 92%, var(--bronze) 8%);
}

.btn--large {
  padding: 1.1em 4em;
  font-size: var(--fs-base);
}

/* --- セクション共通 --- */
/* 背景・文字色はテーマクラス（.theme-ivory / .theme-navy）が供給する */
.section {
  padding-block: var(--space-section);
  background-color: var(--section-bg);
  color: var(--color-text);
}

.section__inner {
  width: min(100% - 3rem, var(--width-content));
  margin-inline: auto;
}

.section__header {
  margin-bottom: var(--space-xl);
}

.section__label {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.section__title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

/* ============================================================
   4.5 ローディング画面
   ------------------------------------------------------------
   静かなブランド演出：ロゴがフェード＋わずかなスケール＋ブラー解除で
   浮かび上がり、黒幕ごとHeroへフェードする（JSが制御）
============================================================ */
/* 読み込み中は背面スクロールを止める */
body.is-loading {
  overflow: hidden;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;             /* 最前面 */
  display: grid;
  place-items: center;
  background-color: var(--color-bg);
  will-change: opacity;
}

/* ロゴ（エンブレム＋ワードマーク）。JSが初期状態と登場アニメーションを制御 */
.loader__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  will-change: opacity, filter, transform;
}

.loader__emblem {
  width: min(26vw, 112px);
  height: auto;
}

.loader__wordmark {
  font-family: var(--font-script);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--paper-white);
  white-space: nowrap;
}

/* JS非対応時：ローダーを隠し、スクロールロックも解除して骨組みを見せる */
.no-js .loader { display: none; }
html.no-js body.is-loading { overflow: visible; }

/* ============================================================
   5. ヘッダー / ドロワーメニュー
============================================================ */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-height);
  /* 透明スタート → スクロールで背景が滑らかに出現 */
  background-color: rgba(18, 22, 31, 0);
  border-bottom: 1px solid transparent;
  transition: background-color 0.5s var(--ease-out),
              backdrop-filter 0.5s var(--ease-out),
              -webkit-backdrop-filter 0.5s var(--ease-out),
              border-color 0.5s var(--ease-out),
              height 0.4s var(--ease-out);
}

/* スクロール後：半透明ダークネイビー＋ブラー＋細いブロンズライン。
   文字は明色のままで、下がアイボリー/ネイビーどちらでも視認性を確保。 */
.header.is-scrolled {
  height: var(--header-height-scrolled);
  background-color: rgba(18, 22, 31, 0.80);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border-bottom-color: rgba(176, 130, 76, 0.55);   /* ブロンズライン */
}

.header__inner {
  position: relative;
  width: min(100% - 3rem, 1440px);
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* --- ロゴ（エンブレム＋会社名） --- */
.header__logo {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-right: auto;
}

.header__logo-emblem {
  width: auto;
  height: 54px;
  /* 動画背景の上でも輪郭を保つ影（ホバーでは動かさない） */
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

.header__logo-name {
  font-family: var(--font-script);   /* ロゴの "Total Work" と同じ筆記体 */
  font-size: 1.9rem;                 /* 筆記体は視覚的に小さく見えるため大きめに */
  font-weight: 400;                  /* Kaushan Script は単一ウェイト */
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--paper-white);
  white-space: nowrap;
  transition: color 0.4s var(--ease-out);
}

.header__logo:hover .header__logo-name {
  color: var(--white);
}

/* --- PCナビ（横並び・単一行の日本語） --- */
.header__nav-list {
  display: flex;
  gap: clamp(1.25rem, 2.4vw, 2.75rem);
}

.header__nav-link {
  position: relative;
  display: inline-block;
  padding: 0.4rem 0.1rem;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--paper-white);
  transition: color 0.35s var(--ease-out);
}

/* 下線がスライドで伸びる（左→右） */
.header__nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--ease-out);
}

.header__nav-link:hover {
  color: var(--color-accent-hover);
}

.header__nav-link:hover::after {
  transform: scaleX(1);
}

/* --- お問い合わせボタン（ブロンズ・色変化のみの静かなホバー） --- */
.header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85em 2em;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--navy);
  background-color: var(--color-accent);
  border: 1px solid var(--color-accent);
  transition: background-color 0.35s var(--ease-out),
              border-color 0.35s var(--ease-out);
}

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

/* --- ハンバーガー（PCでは非表示） --- */
.header__burger {
  display: none;
  position: relative;
  width: 48px;
  height: 48px;
  z-index: calc(var(--z-drawer) + 1);
}

.header__burger-line {
  position: absolute;
  left: 50%;
  width: 26px;
  height: 1.5px;
  background-color: var(--paper-white);
  transform: translateX(-50%);
  transition: transform 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
}

.header__burger-line:nth-child(1) { top: 16px; }
.header__burger-line:nth-child(2) { top: 23px; }
.header__burger-line:nth-child(3) { top: 30px; }

/* 開いた状態 → ✕ に変形 */
.header__burger.is-active .header__burger-line:nth-child(1) {
  transform: translateX(-50%) translateY(7px) rotate(45deg);
}
.header__burger.is-active .header__burger-line:nth-child(2) {
  opacity: 0;
}
.header__burger.is-active .header__burger-line:nth-child(3) {
  transform: translateX(-50%) translateY(-7px) rotate(-45deg);
}

/* --- ドロワー（シネマティック・フルスクリーンメニュー） ---
   --drawer-fade（0→1）を GSAP が動かし、背景の濃さ・ブラー・演出レイヤーを
   まとめて補間する。GSAP 無し / reduced-motion 時は .is-open で即表示。
   基調は #0B0B0B。薄いガラス感（透過＋blur）＋銅アクセント。 */
.drawer {
  --drawer-fade: 0;
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  align-items: flex-start;         /* 映画タイトル風に左寄せ */
  justify-content: center;
  gap: var(--space-xl);
  padding: calc(var(--header-height) + var(--space-lg))
           clamp(2rem, 10vw, 8rem) var(--space-xl);
  text-align: left;
  overflow: hidden;                /* スモーク/ノイズ層をはみ出させない */
  background-color: rgb(11 11 11 / calc(0.92 * var(--drawer-fade)));
  backdrop-filter: blur(calc(18px * var(--drawer-fade))) saturate(1.05);
  -webkit-backdrop-filter: blur(calc(18px * var(--drawer-fade))) saturate(1.05);
  opacity: 0;
  visibility: hidden;
}

/* 背景演出①：薄いスモーク＋微かな銅グラデーション（ゆっくり漂う） */
.drawer::before,
.drawer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--drawer-fade);
}
.drawer::before {
  background:
    radial-gradient(80% 60% at 12% 8%,  rgba(176, 130, 76, 0.10), transparent 60%),
    radial-gradient(70% 60% at 90% 92%, rgba(176, 130, 76, 0.06), transparent 62%),
    radial-gradient(120% 90% at 50% 50%, rgba(32, 32, 36, 0.55), transparent 75%);
  will-change: transform;
  transform: translateZ(0);
  animation: drawer-smoke 26s ease-in-out infinite alternate;
}
/* 背景演出②：ほんの少しのノイズ感（SVGを一度だけ生成／画像リクエスト無し） */
.drawer::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  opacity: calc(0.05 * var(--drawer-fade));
  mix-blend-mode: overlay;
}

@keyframes drawer-smoke {
  from { transform: translate3d(-2%, -1%, 0) scale(1.06); }
  to   { transform: translate3d(2%, 2%, 0)  scale(1.12); }
}

/* コンテンツは演出レイヤーより前面に */
.drawer__nav,
.drawer__tel {
  position: relative;
  z-index: 1;
}

/* .is-open は --drawer-fade のフォールバック（GSAP はインラインで上書き＝優先）*/
.drawer.is-open { --drawer-fade: 1; }

/* GSAP 無し時のフォールバック遷移 */
.no-gsap .drawer {
  transition: opacity 0.4s var(--ease-out), visibility 0.4s var(--ease-out);
}
.no-gsap .drawer.is-open {
  opacity: 1;
  visibility: visible;
}

.drawer__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.1rem, 3.2vw, 1.9rem);
}

/* 大きめタイポ。ホバーで 銅色＋右へ数pxスライド＋左に細い銅ライン。 */
.drawer__link {
  display: inline-block;
  position: relative;
  padding: 0.08em 0 0.08em 1.1rem;   /* 左：銅ライン＋スライド用の余白 */
  font-size: clamp(2rem, 9vw, 3.4rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.12;
  color: var(--paper-white);
  transition: color 0.4s var(--ease-out),
              transform 0.4s var(--ease-out);
}

/* 左の細い銅ライン（ホバー/フォーカスで上下に伸びる） */
.drawer__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  background-color: var(--color-accent);
  transform: translateY(-50%);
  transition: height 0.4s var(--ease-out);
}

.drawer__link:hover,
.drawer__link:focus-visible {
  color: var(--color-accent-hover);
  transform: translateX(6px);
}
.drawer__link:hover::before,
.drawer__link:focus-visible::before {
  height: 76%;
}

.drawer__tel-link {
  font-family: var(--font-en);
  font-size: var(--fs-lg);
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

/* reduced-motion：スモークの漂い・矢印の上下揺れを停止（透明度フェードは維持） */
@media (prefers-reduced-motion: reduce) {
  .drawer::before { animation: none; }
  .hero__scroll-arrow { animation: none; }
}

/* ============================================================
   6. Hero（スクロール駆動・背景動画スクラブ）
============================================================ */
/* スクロール駆動領域：この高さぶんスクロールすると動画が最後まで進む。
   --hero-scroll を変えるだけで“動画の再生スピード感”を調整できる。 */
.hero {
  --hero-scroll: 340vh;   /* 動画スクラブに割り当てる総スクロール量 */
  position: relative;
  height: var(--hero-scroll);
  background-color: var(--navy);
}

/* 画面に固定される 100vh レイヤー（sticky） */
.hero__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;      /* 前景は下寄せ（画面中央下） */
  justify-content: center;
}

/* --- 背景動画レイヤー --- */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--navy);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* GPU 合成を促してスクラブを滑らかに */
  will-change: transform;
  transform: translateZ(0);
}

/* ネイビーのグラデーションオーバーレイ（上下を締めて中央の煙・火花を見せる）
   純黒は使わず、青みのある濃紺で陰影をつける。 */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(9, 12, 20, 0.66) 0%,
      rgba(9, 12, 20, 0.20) 22%,
      rgba(9, 12, 20, 0.16) 50%,
      rgba(9, 12, 20, 0.58) 78%,
      rgba(18, 22, 31, 0.94) 100%
    );
}

/* 四隅を落とすビネット（映画的な締め） */
.hero__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 75% 65% at 50% 45%,
    transparent 55%,
    rgba(9, 12, 20, 0.55) 100%
  );
  pointer-events: none;
}

/* --- 前景コンテンツ（右下寄せ） ---
   左側の溶接工と重ならないよう、コンテンツを右側にまとめて右揃えにする。
   （上 右 下 左：左に約40%の余白を確保して溶接工エリアを避ける） */
.hero__content {
  position: relative;
  z-index: 2;
  text-align: right;
  padding: 0 clamp(2rem, 6vw, 6.5rem) clamp(5rem, 4rem + 6vw, 8rem) 40%;
  width: 100%;
}

/* 事業一覧（横並び・キャッチの上・右揃え・常に1行） */
.hero__services {
  display: flex;
  flex-wrap: nowrap;            /* PC/タブレットでも折り返さない */
  justify-content: flex-end;
  gap: 0.5rem 0;
  margin-bottom: var(--space-lg);
}

.hero__service {
  position: relative;
  /* 画面幅に合わせて縮小し、1行に収める */
  font-size: clamp(0.68rem, 1vw, 0.875rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 0.4em 1.1em;
  white-space: nowrap;
  color: var(--color-text);
  cursor: default;
  transition: transform 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

/* 触れた項目だけがごく僅かに拡大し、ブロンズへ色づく（マウスhover / タッチ両対応） */
.hero__service:hover,
.hero__service:active {
  transform: scale(1.12);
  color: var(--color-accent-hover);
}

/* 区切り線 */
.hero__service + .hero__service {
  border-left: 1px solid var(--color-line);
}

/* キャッチコピー（行マスク） */
.hero__catch {
  font-size: var(--fs-hero);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.35;
}

/* 各行：はみ出しを隠して内側を持ち上げる */
.hero__catch-line {
  display: block;
  overflow: hidden;
  padding-block: 0.06em;   /* ディセンダの見切れ防止 */
}

.hero__catch-inner {
  display: block;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6);
}

/* --- スクロールインジケーター（下中央） --- */
.hero__scroll {
  position: absolute;
  bottom: clamp(1.5rem, 3vh, 2.75rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.hero__scroll-text {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  color: var(--color-text-muted);
}

/* 下向き矢印：ゆっくり上下に揺れる */
.hero__scroll-arrow {
  width: 12px;
  height: 12px;
  border-right: 1.5px solid var(--color-accent);
  border-bottom: 1.5px solid var(--color-accent);
  transform: rotate(45deg);
  animation: scroll-bob 2.2s ease-in-out infinite;
}

/* ============================================================
   7. About
============================================================ */

/* --- Hero → About シーン転換（境界を溶かす空気感のディゾルブ）---
   Hero末尾の暗いネイビーを About 上端に引き継ぎ、
   縦フェード＋左右で高さの違うラジアル霞で直線的な境界を消して
   映画の場面転換のように #efe7d5 へ溶け込ませる。JSは不使用。 */
.about {
  position: relative;
  isolation: isolate;   /* 疑似要素の重なりをこのセクション内に閉じる */
}

.about::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(120px, 16vh, 220px);
  z-index: -1;          /* アイボリー地の上・本文の下に敷く */
  pointer-events: none;
  background:
    /* 左右で高さの違う霞：水平の直線を崩して有機的に */
    radial-gradient(140% 90% at 22% -12%,
      rgba(18, 22, 31, 0.85) 0%,
      rgba(18, 22, 31, 0) 46%),
    radial-gradient(150% 100% at 82% -20%,
      rgba(18, 22, 31, 0.7) 0%,
      rgba(18, 22, 31, 0) 52%),
    /* ネイビー → アイボリーへの縦フェード（Hero末尾の暗色を継いで境界を消す） */
    linear-gradient(to bottom,
      var(--navy) 0%,
      rgba(18, 22, 31, 0.72) 20%,
      rgba(18, 22, 31, 0.28) 48%,
      rgba(18, 22, 31, 0) 82%);
}

/* 背景のブランドロゴ透かし（約7%不透明度・5箇所へランダムに分散配置で壁紙のような質感。
   ロゴが主役にならないよう、あくまで質感づくりに留める） */
.about::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.07;
  background-image:
    url("assets/logo/logo-emblem.png"),
    url("assets/logo/logo-emblem.png"),
    url("assets/logo/logo-emblem.png"),
    url("assets/logo/logo-emblem.png"),
    url("assets/logo/logo-emblem.png");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position:
    -10% 6%,
    108% 24%,
    -12% 52%,
    90% 74%,
    6% 95%;
  background-size:
    clamp(200px, 27vw, 380px) auto,
    clamp(240px, 32vw, 460px) auto,
    clamp(180px, 24vw, 340px) auto,
    clamp(220px, 30vw, 420px) auto,
    clamp(160px, 22vw, 300px) auto;
}

/* ラベル＋罫線（About専用。他セクションの .section__label には影響しない） */
.about__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.about__label::after {
  content: "";
  width: 48px;
  height: 1px;
  background-color: rgba(176, 130, 76, 0.5);
}

/* 大きなキャッチコピー（Heroの世界観を継ぐ誌面の見出し。他セクションの
   .section__title には影響しないよう .about__title だけに適用） */
.about__title {
  margin-top: var(--space-sm);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.3rem + 3vw, 3.75rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
}

.about__lead {
  max-width: 38em;
  margin-bottom: var(--space-xl);
  font-size: var(--fs-lg);
  line-height: 2.2;
}

/* 代表メッセージ（写真・封筒演出は使わず、一枚の紙のような存在感だけで
   「手紙」を表現する。カード化はせず、余白・細罫線・控えめな陰影・
   タイポグラフィのみで構成する） */
.about__message {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 420px);
  gap: var(--space-lg);
  align-items: stretch;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
  padding: var(--space-xl) var(--space-lg);
  background-color: var(--color-bg-elevated);
  border: 1px solid rgba(176, 130, 76, 0.22);
  box-shadow: 0 1px 2px rgba(40, 30, 20, 0.08);
}

/* 右側の余白に社屋写真を添える（文章より控えめに。枠線はカードと同系統） */
.about__message-figure {
  margin: 0;
  align-self: stretch;
}

.about__message-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;   /* 縦積み時のクロップで社屋・屋根を残し、手前を切る */
  border: 1px solid rgba(176, 130, 76, 0.22);
}

.about__message-body {
  max-width: 34em;
}

/* 「代表メッセージ」はキッカー扱い（section__label と同じ語彙で統一） */
.about__message-title {
  margin-bottom: var(--space-md);
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.about__message-body p {
  font-size: var(--fs-lg);
  line-height: 2;
}

/* 手紙の結びのように、本文の右下に自然に署名を置く */
.about__message-name {
  max-width: 34em;
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-line);
  text-align: right;
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.6;
}

.about__message-name span {
  display: block;
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  letter-spacing: 0.15em;
  color: var(--color-text-muted);
}

/* 強み3つ（情報パネル。線と余白で区切り、ホバーはごく僅かな質感変化のみ） */
.about__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.about__feature {
  padding: var(--space-md) var(--space-sm) var(--space-lg);
  border-top: 1px solid var(--color-line);
  transition: border-color 0.3s var(--ease-out),
              background-color 0.3s var(--ease-out);
}

li.about__feature:hover,
li.about__feature:active {
  border-color: rgba(176, 130, 76, 0.5);
  background-color: rgba(176, 130, 76, 0.03);
}

/* 各項目の英字キッカー（section__label と同じ語彙を項目単位に縮小適用） */
.about__feature-kicker {
  display: block;
  margin-bottom: var(--space-xs);
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.about__feature-title {
  font-size: var(--fs-xl);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-sm);
}

.about__feature-text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* 会社概要へ続く */
.about__next {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-line);
  text-align: center;
}

/* ============================================================
   8. Business
============================================================ */
/* リード：製作から施工までの一貫対応を一文で示す（唯一のまとまった本文） */
.business__lead {
  max-width: 34em;
  margin-top: var(--space-sm);
  font-size: var(--fs-lg);
  line-height: 2;
}

/* ------------------------------------------------------------
   施工写真ギャラリー：写真1枚 = 1カード
   ------------------------------------------------------------
   カードは PROJECT_ARCHITECTURE の「鉄板カード」語彙で組む。
   ・プレート面（navy-elevated）＋ ごく低透明度のブロンズ縁 ＋ 薄いマット余白
   ・番号は写真の左下を切り欠くように置き、図版番号のように読ませる
   ・カテゴリーからは Copper の細い罫線（測定線）が右へ伸びる
   グリッドは厳格（masonry にしない）。変化は 01/04/07・02/05/08・03/06/09 の
   3群で「番号／写真／見出し」のどれを一段強めるかだけに留める。
------------------------------------------------------------ */
.business__works {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg) var(--space-md);
}

/* 鉄板プレート。角丸は使わない（サイト全体の直角基調に揃える） */
.business__work {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-xs);
  background-color: var(--color-bg-elevated);
  border: 1px solid rgba(176, 130, 76, 0.26);   /* ブロンズ縁（低透明度） */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);   /* 重量感はごく僅かに */
}

/* 写真枠。マット分だけ内側に入り、額装されたプレートに見せる */
.business__work-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.business__work-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

/* 図版番号：写真の左下をプレート面で切り欠く */
.business__work-index {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.45rem 0.8rem 0 0;
  background-color: var(--color-bg-elevated);
  font-family: var(--font-en);
  font-size: 1.45rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--color-accent);
}

.business__work-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-sm) var(--space-xs) var(--space-xs);
}

/* 英字カテゴリー ＋ 右へ伸びる Copper の測定線 */
.business__work-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.business__work-rule {
  flex: 1;
  height: 1px;
  background-color: var(--color-accent);
  opacity: 0.4;
  transform: scaleX(0.55);
  transform-origin: left center;
  transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
}

.business__work-title {
  margin-top: var(--space-sm);
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: 0.1em;
}

.business__work-text {
  margin-top: var(--space-xs);
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--color-text-muted);
}

/* 右下の控えめな方向指示。行内でカード下端に揃う */
.business__work-arrow {
  position: relative;
  width: 22px;
  height: 6px;
  margin-top: var(--space-md);
  margin-left: auto;
  transition: transform 0.5s var(--ease-out);
}

.business__work-arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 2px;
  height: 1px;
  background-color: var(--color-text-muted);
}

.business__work-arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--color-text-muted);
  border-right: 1px solid var(--color-text-muted);
  transform: translateY(-50%) rotate(45deg);
}

/* --- 編集リズム：3群で強めるものを1つだけ変える --- */
.business__work--index .business__work-index {
  font-size: 1.7rem;
}

/* 写真をプレート端まで回す（マットを外す）*/
.business__work--image .business__work-frame {
  margin: calc(var(--space-xs) * -1) calc(var(--space-xs) * -1) 0;
}

.business__work--title .business__work-title {
  font-size: 1.28rem;
}

/* --- Reveal 初期状態（JS有効時のみ隠す。GSAP が復帰させる） --- */
.js .business__work {
  opacity: 0;
  transform: translateY(16px);
}

/* Reveal 完了後は transform の所有権を CSS へ返す（hover と競合させない）。
   .is-shown は GSAP 非読込 / reduced-motion のフォールバック。 */
.business__work.is-revealed,
.business__works.is-shown .business__work {
  opacity: 1;
  transform: none;
}

/* --- Desktop hover：精度を感じる程度に留める --- */
@media (hover: hover) and (pointer: fine) {
  .business__work.is-revealed {
    transition: transform 0.5s var(--ease-out),
                border-color 0.5s var(--ease-out),
                background-color 0.5s var(--ease-out),
                box-shadow 0.5s var(--ease-out);
  }

  .business__work.is-revealed:hover {
    transform: translateY(-3px);
    background-color: #1e2530;                   /* ネイビー系のまま約2%明るく */
    border-color: rgba(176, 130, 76, 0.5);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
  }

  /* 写真はポインター位置へごく僅か（±3px）寄る。--px/--py は script.js が書く */
  .business__work:hover .business__work-frame img {
    transform: scale(1.02)
               translate(calc(var(--px, 0) * 6px), calc(var(--py, 0) * 6px));
  }

  .business__work:hover .business__work-rule {
    transform: scaleX(1);
    opacity: 0.75;
  }

  .business__work:hover .business__work-arrow {
    transform: translateX(3px);
  }
}

/* ============================================================
   9. Strength
============================================================ */
.strength__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg) var(--space-xl);
}

.strength__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-md);
  padding-top: var(--space-md);
}

/* 上部の細い罫線。GSAP が scaleX 0→1 で左から伸ばす */
.strength__line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-line);
  transform-origin: left center;
}

.strength__num {
  grid-row: 1 / 3;
  font-family: var(--font-en);
  font-size: var(--fs-2xl);
  font-weight: 300;
  line-height: 1;
  color: var(--color-accent);
}

.strength__title {
  font-size: var(--fs-xl);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-xs);
}

.strength__text {
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--color-text-muted);
}

/* --- Reveal 初期状態（JS有効時のみ隠す。GSAP が復帰させる） --- */
.js .strength__line {
  transform: scaleX(0);
}

.js .strength__num {
  opacity: 0;
  transform: translateY(12px);
}

.js .strength__title,
.js .strength__text {
  opacity: 0;
  transform: translateY(16px);
}

/* GSAP 非読込などのフォールバック：全表示に戻す */
.strength__list.is-shown .strength__line {
  transform: scaleX(1);
}

.strength__list.is-shown .strength__num,
.strength__list.is-shown .strength__title,
.strength__list.is-shown .strength__text {
  opacity: 1;
  transform: none;
}

/* Reveal 完了後：inline transform を消した num/title が初期値へ戻らないよう中立で固定。
   ここから先の transform はポインターモーション（script.js）が単独で所有する */
.strength__list.is-revealed .strength__num,
.strength__list.is-revealed .strength__title {
  opacity: 1;
  transform: none;
}

/* --- Desktop hover：情報に依存しない、触れるとごく微かに応答する反応 --- */
@media (hover: hover) and (pointer: fine) {
  .strength__line {
    transition: background-color 0.4s var(--ease-out);
  }

  .strength__num {
    /* transform は文字モーション（script.js の rAF + quickSetter）が制御するため transition 対象から除外 */
    transition: color 0.4s var(--ease-out);
  }

  .strength__item:hover .strength__line {
    background-color: var(--color-accent-hover);
  }

  .strength__item:hover .strength__num {
    color: var(--color-accent-hover);
  }
}

/* ============================================================
   9.5 Capability（対応領域）
   ------------------------------------------------------------
   STRENGTH の中身を仕様として並べる区画。罫線グリッドで
   「カタログの仕様表」の読み味にし、同じ番号付きでも
   STRENGTH のリストと別物に見せる。角丸・影は使わない。
============================================================ */
.capability__lead {
  margin-top: var(--space-md);
  font-size: var(--fs-base);
  line-height: 2.1;
  color: var(--color-text-muted);
}

/* 外周は上と左だけ引き、各セルが右と下を持つ（罫線の二重を防ぐ） */
.capability__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--color-line);
  border-left: 1px solid var(--color-line);
}

.capability__item {
  border-right: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: var(--space-md);
}

.capability__num {
  display: block;
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.capability__name {
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}

.capability__text {
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--color-text-muted);
}

/* ============================================================
   11. Company
============================================================ */
.company__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.company__row {
  display: grid;
  grid-template-columns: 8em 1fr;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-line);
}

.company__dt {
  font-weight: 500;
  color: var(--color-text-muted);
}

.company__map {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-line);
}

.company__map iframe {
  width: 100%;
  height: 100%;
  /* アイボリー背景に馴染む、彩度を抑えた落ち着いた地図（仮） */
  filter: grayscale(0.35) contrast(1.02) sepia(0.06);
}

/* ============================================================
   12. Recruit
============================================================ */
.recruit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.recruit__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-line);
}

.recruit__card-title {
  font-size: var(--fs-xl);
  letter-spacing: 0.1em;
}

.recruit__card-text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  flex-grow: 1;
}

/* ============================================================
   13. Contact
============================================================ */
.contact__layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-xl);
  align-items: start;
}

.contact__lead {
  margin-bottom: var(--space-md);
}

.contact__list-row {
  display: grid;
  grid-template-columns: 5em 1fr;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-line);
}

.contact__list-row dt {
  font-family: var(--font-en);
  letter-spacing: 0.15em;
  color: var(--color-text-muted);
}

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

/* --- フォーム --- */
.form__group {
  margin-bottom: var(--space-md);
}

.form__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  margin-bottom: var(--space-xs);
}

.form__required {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.1em 0.6em;
  font-size: var(--fs-xs);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.form__input,
.form__textarea {
  width: 100%;
  padding: 0.9em 1em;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-line);
  transition: border-color 0.3s var(--ease-out);
}

.form__input:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.form__textarea {
  resize: vertical;
}

.form__submit {
  text-align: center;
  margin-top: var(--space-lg);
}

.form__select {
  cursor: pointer;
}

/* ハニーポット（スパム対策）：視覚的にもスクリーンリーダーからも隠す */
.form__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -9999px;
}

/* 送信結果メッセージ（aria-live で通知） */
.form__status {
  margin-top: var(--space-md);
  font-size: var(--fs-sm);
  text-align: center;
  min-height: 1.5em;
}

.form__status.is-success {
  color: var(--color-accent);
}

.form__status.is-error {
  color: var(--color-error);
}

/* ============================================================
   13.5 Emblem（インタラクティブ3Dロゴ）
   ------------------------------------------------------------
   舞台は「ほぼ黒」。純黒は使わない方針のため、ネイビーを限界まで
   沈めた #080a0e を使う（Design System の色相を保ったまま黒に見せる）。
   主役はエンブレム。文字とヒントはその周りの余白に沈める。
============================================================ */
.emblem {
  --emblem-bg: #080a0e;
  --emblem-size: clamp(280px, 38vw, 560px);
  /* 映り込みが伸びる高さ。ヒントと重ならないよう余白の基準にも使う */
  --emblem-reflection: calc(var(--emblem-size) * 0.3);
  /* 上下の境目をぼかす高さ。上は Contact（アイボリー）、下は Footer（ネイビー） */
  --emblem-fade: clamp(90px, 12vh, 190px);

  position: relative;
  background-color: var(--emblem-bg);
  color: var(--paper-white);
  overflow: hidden;   /* ズーム時にエンブレムが横スクロールを生まないように */
}

/* 上下フェード：隣り合うセクションの地色から黒へ、境界線を出さずに沈める */
.emblem::before,
.emblem::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--emblem-fade);
  pointer-events: none;
}

.emblem::before {
  top: 0;
  background: linear-gradient(to bottom, var(--ivory), transparent);
}

.emblem::after {
  bottom: 0;
  /* 下はフッター（theme-navy）へ抜ける。アイボリーのままだと帯が残る */
  background: linear-gradient(to top, var(--navy), transparent);
}

/* 本文はフェードより前面に置く（見出しがアイボリーに溶けないように） */
.emblem > .section__inner {
  position: relative;
  z-index: 1;
}

.emblem__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.emblem__label {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 300;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(244, 239, 228, 0.38);   /* ラベルは主張させない */
  margin-bottom: var(--space-sm);
}

.emblem__title {
  font-family: var(--font-en);
  font-size: clamp(1.9rem, 1rem + 4vw, 4rem);
  font-weight: 300;
  letter-spacing: 0.3em;
  line-height: 1.2;
  text-indent: 0.3em;                 /* letter-spacing の右余りを中央に戻す */
}

.emblem__lead {
  margin-top: var(--space-md);
  font-size: var(--fs-sm);
  line-height: 2.2;
  letter-spacing: 0.08em;
  color: rgba(244, 239, 228, 0.62);
}

/* 舞台：中央にエンブレム、左右と下にヒント */
.emblem__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--emblem-size);
  /* 映り込みの下端より下に SCROLL ヒントを置く */
  padding-bottom: calc(var(--emblem-reflection) + var(--space-md));
  touch-action: pan-y;                /* 縦スワイプはページに渡す */
}

/* スクロール駆動のスケール（GSAP が触る層） */
.emblem__scroll {
  will-change: transform, opacity;
}

/* ユーザー操作のズーム・傾き（emblem.js が触る層） */
.emblem__object {
  will-change: transform;
}

.emblem__canvas {
  display: block;
  width: var(--emblem-size);
  height: var(--emblem-size);
  cursor: grab;
  touch-action: pan-y;   /* 横ドラッグは回転、縦スワイプはページに渡す */
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
  /* 床の映り込み。WebKit/Blink 以外では単に出ない（描画コストゼロの上乗せ） */
  -webkit-box-reflect: below -2px linear-gradient(transparent 72%, rgba(255, 255, 255, 0.14));
}

.emblem__canvas.is-ready {
  opacity: 1;
}

.js-emblem.is-grabbing .emblem__canvas {
  cursor: grabbing;
}

/* 空気感：エンブレムの背後にごく淡い光だまり */
.emblem__stage::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--emblem-size) * 1.9);
  height: calc(var(--emblem-size) * 1.9);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
              rgba(176, 130, 76, 0.07) 0%,
              rgba(176, 130, 76, 0.03) 32%,
              transparent 66%);
  pointer-events: none;
}

/* 操作ヒント：極力沈める */
.emblem__hint {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  color: rgba(244, 239, 228, 0.34);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out) 0.3s;
}

.js-emblem.is-ready .emblem__hint {
  opacity: 1;
}

.emblem__hint-icon {
  width: 34px;
  height: 34px;
}

.emblem__hint-icon svg {
  width: 100%;
  height: 100%;
}

.emblem__hint-en {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 300;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
}

.emblem__hint-ja {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: rgba(244, 239, 228, 0.26);
}

.emblem__hint--left   { left: 0;  top: 50%; transform: translateY(-50%); }
.emblem__hint--right  { right: 0; top: 50%; transform: translateY(-50%); }
.emblem__hint--bottom { bottom: 0; left: 50%; transform: translateX(-50%); }

/* ============================================================
   14. Footer
============================================================ */
.footer {
  background-color: var(--section-bg);
  color: var(--color-text);
  border-top: 1px solid var(--color-line);
  padding-block: var(--space-lg);
}

.footer__inner {
  width: min(100% - 3rem, var(--width-content));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer__logo-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy);
  background-color: var(--color-accent);
}

.footer__logo-text {
  font-family: var(--font-en);
  letter-spacing: 0.2em;
}

.footer__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.75rem;
}

.footer__link {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  transition: color 0.3s var(--ease-out);
}

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

.footer__copy {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
}

/* ============================================================
   15. アニメーション
============================================================ */
/* スクロール連動の出現（JSが .is-visible を付与） */
.js-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* スクロールインジケーターの矢印：ゆっくり上下に揺れる */
@keyframes scroll-bob {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50%      { transform: rotate(45deg) translate(4px, 4px); }
}

/* モーション低減設定のユーザーにはアニメーションを止める */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js-reveal {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  /* Business: モーション低減時はアニメに依存せず全表示 */
  .js .business__work {
    opacity: 1;
    transform: none;
  }

  /* Strength: モーション低減時はアニメに依存せず全表示 */
  .js .strength__line {
    transform: scaleX(1);
  }

  .js .strength__num,
  .js .strength__title,
  .js .strength__text {
    opacity: 1;
    transform: none;
  }

  .hero__scroll-arrow {
    animation: none;
  }

  /* Emblem: 出現・慣性・スクロール連動は emblem.js 側で停止。
     CSS 側もフェードを切り、最初から確定した状態で見せる。 */
  .emblem__canvas {
    opacity: 1;
    transition: none;
  }

  .emblem__hint {
    opacity: 1;
    transition: none;
  }
}

/* ============================================================
   16. レスポンシブ
   ブレイクポイント: 1024px（タブレット） / 767px（スマホ）
============================================================ */
@media (max-width: 1024px) {
  /* モバイル: 左ロゴ / 中央 会社名 / 右 ハンバーガー */
  .header__nav,
  .header__cta {
    display: none;
  }

  .header__burger {
    display: block;
    margin-left: auto;   /* 右端へ */
  }

  /* 会社名をヘッダー中央に配置（エンブレムは左のまま） */
  .header__logo-name {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.7rem;
  }
  .header__logo:hover .header__logo-name {
    /* 中央配置を保ったままホバー色のみ変化 */
    transform: translate(-50%, -50%);
  }

  .business__works,
  .capability__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about__features {
    grid-template-columns: repeat(2, 1fr);
  }

  .company__layout,
  .contact__layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* タブレット・スマホ: 縦積みにして写真を文章の上へ回す */
  .about__message {
    grid-template-columns: 1fr;
  }

  .about__message-figure {
    order: -1;
    /* 幅に応じて高さもスケールさせ、自然なランドスケープ比率を保つ
       （幅広の1024px付近で約16:9強〜スマホで正方形寄りへ。帯状の潰れを防ぐ） */
    height: clamp(250px, 49vw, 500px);
  }

  /* タブレット: 左余白を少し詰める（画面幅に合わせて調整） */
  .hero__content {
    padding-left: 30%;
  }

  /* タブレット: エンブレムは少し小さく。余白は削らない */
  .emblem {
    --emblem-size: clamp(300px, 46vw, 440px);
  }

  .emblem__hint-icon {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 767px) {
  html {
    scroll-padding-top: var(--header-height-sp);
  }

  .header {
    height: var(--header-height-sp);
  }

  .header.is-scrolled {
    height: var(--header-height-sp);
  }

  .header__logo-emblem {
    height: 42px;
  }

  .header__logo-name {
    font-size: 1.5rem;
  }

  .about__message {
    padding: var(--space-lg) var(--space-md);
  }

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

  /* スマホ: 施工写真は1列に積む */
  .business__works {
    grid-template-columns: 1fr;
  }

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

  .capability__item {
    padding: var(--space-sm) var(--space-sm) var(--space-md);
  }

  .strength__list {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

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

  .company__row,
  .contact__list-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  /* --- Emblem（スマホ） ---
     エンブレムは主役のまま画面内に収め、ヒント3つはその下に一列で敷く。
     （左右に置くと本体を圧迫するため、絶対配置をやめてグリッドに載せる） */
  .emblem {
    --emblem-size: min(78vw, 340px);
  }

  .emblem__stage {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "obj  obj  obj"
      "drag pinch scroll";
    row-gap: calc(var(--emblem-reflection) + var(--space-sm));
    padding-bottom: 0;
  }

  .emblem__scroll        { grid-area: obj; }
  .emblem__hint--left    { grid-area: drag; }
  .emblem__hint--right   { grid-area: pinch; }
  .emblem__hint--bottom  { grid-area: scroll; }

  .emblem__hint {
    position: static;
    transform: none;
    gap: 0.5rem;
  }

  .emblem__hint-icon {
    width: 24px;
    height: 24px;
  }

  .emblem__hint-en {
    letter-spacing: 0.22em;
    text-indent: 0.22em;
  }

  .emblem__hint-ja {
    font-size: 0.625rem;
    letter-spacing: 0.08em;
  }

  /* --- Hero（スマホ） --- */
  /* 動画スクラブは負荷が高いためスクロール量を短くして軽快に */
  .hero {
    --hero-scroll: 270vh;
  }

  /* スマホは溶接工が画面上部に来るため、中央揃えに戻す */
  .hero__content {
    text-align: center;
    padding: 0 var(--space-sm) clamp(4.5rem, 12vh, 6rem);
  }

  .hero__services {
    justify-content: center;
    flex-wrap: nowrap;                    /* 6項目を1行に固定 */
    gap: 0;
    margin-bottom: var(--space-md);
  }

  .hero__service {
    font-size: clamp(0.5rem, 2.5vw, 0.72rem); /* 画面幅に合わせて縮小 */
    letter-spacing: 0.02em;
    padding: 0.25em 0.55em;
  }

  .hero__catch {
    letter-spacing: 0.08em;
  }
}