/* ============================================================
   @project    安田工業株式会社 コーポレートサイト
   @status     project
   @requires   tokens.css / header-nav.css / scroll-fade.css
   @source     光和(縦書き・GSAP) / 髙笠(scroll-pin・dwg) / pine-grove(cursor・lightbox) / 大地(dark)
   世界観：コンクリート・グレー × 青焼き（ブループリント）。ダーク主体・和モダン。
   ============================================================ */

/* ============================================================
   1. リセット & ベース
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Lenis 使用時はネイティブ smooth を無効化（JS側で html.lenis を付与） */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--font-jp-sans);
  font-size: var(--font-size-body);
  line-height: 1.9;
  color: var(--color-text-light);
  background: var(--color-ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible { outline: 2px solid var(--color-accent-light); outline-offset: 3px; }

/* ============================================================
   2. レイアウト・ユーティリティ
   ============================================================ */
.container { width: min(100% - 10vw, var(--container)); margin-inline: auto; }
.container--wide { width: min(100% - 6vw, var(--container-wide)); margin-inline: auto; }

.section { padding-block: var(--spacing-4xl); position: relative; }
.section--dark  { background: var(--color-ink); }
.section--dark2 { background: var(--color-ink-2); }
.section--light { background: var(--color-bg-light); color: var(--color-text-dark); }
.section--white { background: var(--color-bg-white); color: var(--color-text-dark); }

/* セクション見出し（英字ラベル＋日本語） */
.sec-head { margin-bottom: var(--spacing-2xl); }
.sec-head--center { text-align: center; }
.sec-label {
  display: inline-block;
  font-family: var(--font-en-serif);
  font-size: var(--font-size-label);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--color-accent-light);
  margin-bottom: var(--spacing-sm);
}
.sec-label::before {
  content: "";
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--color-accent);
  vertical-align: middle;
  margin-right: 0.8em;
}
.sec-title {
  font-family: var(--font-jp-serif);
  font-weight: 600;
  font-size: var(--font-size-h2);
  line-height: 1.4;
  letter-spacing: 0.06em;
}
.section--light .sec-label,
.section--white .sec-label { color: #3E617D; }
.section--light .sec-title,
.section--white .sec-title { color: var(--color-text-dark); }

.lead { color: var(--color-text-mute); line-height: 2.05; }
.section--light .lead, .section--white .lead { color: #55606C; }

/* ============================================================
   3. ボタン
   ============================================================ */
.btn {
  --btn-fg: var(--color-text-light);
  --btn-bg: transparent;
  --btn-bd: var(--color-line-dark);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  white-space: nowrap;
  min-height: 52px;
  padding: 0 var(--spacing-xl);
  font-family: var(--font-jp-sans);
  font-size: var(--font-size-small);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  transition: color var(--transition-default), border-color var(--transition-default);
}
.btn__arrow { transition: transform var(--transition-default); }
.btn:hover .btn__arrow { transform: translateX(4px); }
/* 塗りつぶしスライドイン */
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--fill, var(--color-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-slow) var(--ease-out);
  z-index: -1;
}
.btn:hover { color: #fff; border-color: transparent; }
.btn:hover::after { transform: scaleX(1); }
.btn > * { position: relative; z-index: 1; }

.btn--primary { --btn-fg: #fff; --btn-bg: var(--color-accent); --btn-bd: var(--color-accent); --fill: #4A7396; }
.btn--warm    { --btn-bg: var(--color-warm); --btn-bd: var(--color-warm); --btn-fg: #fff; --fill: #A87038; }
.btn--ghost-dark { --btn-fg: var(--color-text-dark); --btn-bd: rgba(0,0,0,0.2); --fill: var(--color-accent); }
.btn--lg { min-height: 60px; padding-inline: var(--spacing-2xl); }

/* ============================================================
   4. ヘッダー（キット上書き：ダーク仕様）
   ============================================================ */
.header { padding: var(--spacing-sm) 5vw; }
.header.transparent { color: #fff; }
.header.scrolled {
  background: rgba(21, 24, 29, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line-dark);
  box-shadow: none;
  padding-block: 12px;
}
.header__logo { color: #fff; font-family: var(--font-jp-serif); letter-spacing: 0.08em; font-size: 20px; }
.header__logo small { display: block; font-family: var(--font-en-serif); font-size: 10px; letter-spacing: 0.3em; color: var(--color-accent-light); }
.header .nav-link { color: rgba(255,255,255,0.86); position: relative; }
.header .nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1px; background: var(--color-accent-light);
  transform: scaleX(0); transform-origin: right; transition: transform var(--transition-default);
}
.header .nav-link:hover { color: #fff; }
.header .nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
/* 現在ページ：白文字＋下線を常時表示 */
.header .nav-link.is-current { color: #fff; }
.header .nav-link.is-current::after { transform: scaleX(1); transform-origin: left; }
.header .nav-cta { background: var(--color-accent); color: #fff; }
.header .nav-cta::after { display: none; }
.header .hamburger span { background: #fff; }
/* ドロワーはヘッダー(z-index:1000)の階層内にあるため、背景オーバーレイを
   ヘッダーより下(990)に置く。これで背景だけ暗くなり、メニュー自体は暗くならない */
.mobile-overlay { z-index: 990; }

/* 下層ページ（home-page なし）は常にダーク背景ヘッダー */
body:not(.home-page) .header { background: rgba(21,24,29,0.92); border-bottom: 1px solid var(--color-line-dark); }

@media (max-width: 1024px) {
  .header-nav { background: var(--color-ink-2); }
  .header .nav-link { color: rgba(255,255,255,0.9); font-size: var(--font-size-body); }
}

/* ============================================================
   5. ヒーロー（①ファーストビュー）
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-ink);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* 動画未設定時のプレースホルダ（青焼きグリッド＋ダーク） */
.hero__placeholder {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(21,24,29,0.55) 0%, rgba(21,24,29,0.35) 40%, rgba(21,24,29,0.92) 100%),
    linear-gradient(120deg, #1b2634 0%, #12161c 60%);
}
.hero__grid {
  position: absolute; inset: 0; z-index: 1; opacity: 0.5;
  background-image:
    linear-gradient(var(--color-blueprint-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-blueprint-dim) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 30% 60%, #000 0%, transparent 75%);
}
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(21,24,29,0.35) 0%, rgba(21,24,29,0.15) 45%, rgba(21,24,29,0.9) 100%);
}
.hero__inner {
  position: relative; z-index: 2;
  width: min(100% - 10vw, var(--container-wide));
  margin-inline: auto;
  padding-bottom: clamp(48px, 9vh, 120px);
  padding-top: 140px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--spacing-2xl);
}
/* 縦書きキャッチ（メイン） */
.hero__catch {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--font-jp-serif);
  font-weight: 600;
  font-size: clamp(28px, 4.6vw, 58px);
  line-height: 1.7;
  letter-spacing: 0.1em;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,0.5);
}
/* 各行を折り返さないブロックにして「1行＝1列」に固定（はみ出し防止） */
.hero__catch .hero__line { display: block; white-space: nowrap; }
.hero__catch .accent { color: var(--color-accent-light); }
.hero__right { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-lg); max-width: 460px; }
.hero__sub {
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 2.1;
  color: rgba(255,255,255,0.9);
  border-left: 2px solid var(--color-accent);
  padding-left: var(--spacing-md);
}
.hero__btns { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
/* 並ぶ2ボタンを等幅・等高に統一 */
.hero__btns .btn { flex: 1 1 200px; justify-content: space-between; padding-inline: var(--spacing-lg); }
.hero__enlabel {
  font-family: var(--font-en-disp);
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.4em;
  color: var(--color-accent-light);
  text-transform: uppercase;
}
.scroll-indicator {
  position: absolute; left: 50%; bottom: 24px; z-index: 3;
  transform: translateX(-50%);
  font-family: var(--font-en-serif); font-size: 10px; letter-spacing: 0.3em;
  color: rgba(255,255,255,0.7);
  writing-mode: vertical-rl;
  transition: opacity var(--transition-default);
}
.scroll-indicator::after { content: ""; display: block; width: 1px; height: 48px; margin: 8px auto 0; background: linear-gradient(var(--color-accent-light), transparent); animation: scrollpulse 2s ease-in-out infinite; }
.scroll-indicator.hidden { opacity: 0; }
@keyframes scrollpulse { 0%,100% { transform: scaleY(0.4); opacity: 0.4; transform-origin: top; } 50% { transform: scaleY(1); opacity: 1; transform-origin: top; } }

/* ============================================================
   6. マーキー（KATAWAKU / 型枠）
   ============================================================ */
.marquee {
  overflow: hidden; padding-block: var(--spacing-lg);
  background: var(--color-ink-2);
  border-block: 1px solid var(--color-line-dark);
  white-space: nowrap;
}
.marquee__track { display: inline-flex; gap: 1.4em; animation: marquee 24s linear infinite; }
.marquee span {
  font-family: var(--font-en-disp);
  font-size: clamp(38px, 7vw, 84px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(127,178,214,0.4);
  text-transform: uppercase;
}
.marquee span.solid { -webkit-text-stroke: 0; color: rgba(233,236,239,0.08); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================
   7. 私たちについて（②About）
   ============================================================ */
.about { position: relative; }
.about__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--spacing-3xl); align-items: center; }
.about__title { font-family: var(--font-jp-serif); font-size: clamp(24px, 3vw, 40px); line-height: 1.5; letter-spacing: 0.05em; margin-bottom: var(--spacing-lg); font-weight: 600; }
.about__body p { color: var(--color-text-mute); margin-bottom: 1.4em; }
.about__body p:last-of-type { margin-bottom: var(--spacing-xl); }
.about__visual { position: relative; }
.about__visual .ph { aspect-ratio: 4/5; }
.about__visual .badge {
  position: absolute; left: -28px; bottom: 28px;
  background: var(--color-accent); color: #fff;
  padding: var(--spacing-md) var(--spacing-lg);
  writing-mode: vertical-rl; font-family: var(--font-jp-serif); letter-spacing: 0.14em;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

/* ============================================================
   8. 強み（現場で評価される3つの理由 / Reliability）＋青焼き
   ============================================================ */
.reliability { position: relative; overflow: hidden; background: var(--color-ink); }
.reliability__bp { position: absolute; inset: 0; z-index: 0; opacity: 0.5; pointer-events: none; }
.reliability__bp .grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--color-blueprint-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-blueprint-dim) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 10%, transparent 80%);
}
.reliability .container { position: relative; z-index: 1; }
.reliability__cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg); margin-top: var(--spacing-2xl);
}
.rcol {
  position: relative; min-height: 460px; overflow: hidden;
  border: 1px solid var(--color-line-dark);
  padding: var(--spacing-xl) var(--spacing-lg);
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(180deg, rgba(39,46,57,0.35), rgba(21,24,29,0.2));
  transition: border-color var(--transition-slow), transform var(--transition-slow);
}
.rcol:hover { border-color: var(--color-accent); transform: translateY(-6px); }
/* 背景画像（暗め）＋暗色オーバーレイ。画像が無ければグラデのみ表示 */
.rcol__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: 0.62; filter: grayscale(0.1) contrast(1.02);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.rcol:hover .rcol__bg { opacity: 0.8; transform: scale(1.05); }
.rcol::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,23,28,0.3) 0%, rgba(20,23,28,0.42) 50%, rgba(20,23,28,0.66) 100%);
}
.rcol > .rcol__no, .rcol > .rcol__title, .rcol > .rcol__body { position: relative; z-index: 2; }
.rcol__en { z-index: 2; }
.rcol__no { font-family: var(--font-en-disp); font-size: 13px; letter-spacing: 0.3em; color: var(--color-accent-light); }
.rcol__en {
  position: absolute; top: var(--spacing-xl); right: var(--spacing-md);
  writing-mode: vertical-rl;
  font-family: var(--font-en-serif); text-transform: uppercase;
  font-size: 12px; letter-spacing: 0.28em; color: rgba(127,178,214,0.5);
}
.rcol__title {
  writing-mode: vertical-rl;
  font-family: var(--font-jp-serif); font-weight: 600;
  font-size: clamp(22px, 2.4vw, 30px); letter-spacing: 0.16em; line-height: 1.7;
  color: #fff; margin: var(--spacing-lg) auto var(--spacing-xl);
  text-shadow: 0 2px 14px rgba(0,0,0,0.7);
}
/* 各行を折り返さないブロックに（縦書きの列崩れ防止） */
.rcol__title .rcol__line { display: block; white-space: nowrap; }
.rcol__body { color: var(--color-text-mute); font-size: var(--font-size-small); line-height: 2; }
.rcol__body strong { display: block; color: var(--color-accent-light); font-weight: 500; margin-bottom: 0.3em; font-family: var(--font-jp-serif); }

/* ============================================================
   9. 事業内容（④）
   ============================================================ */
.biz__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); margin-top: var(--spacing-xl); }
.biz-card {
  position: relative; overflow: hidden;
  min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--spacing-xl);
  border: 1px solid var(--color-line-dark);
  background: var(--color-ink-2);
}
.biz-card .ph { position: absolute; inset: 0; z-index: 0; opacity: 0.5; transition: opacity var(--transition-slow), transform var(--transition-slow); }
.biz-card:hover .ph { opacity: 0.7; transform: scale(1.04); }
.biz-card::after { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, transparent 20%, rgba(21,24,29,0.9) 100%); }
.biz-card > * { position: relative; z-index: 2; }
.biz-card__en { font-family: var(--font-en-disp); letter-spacing: 0.3em; font-size: 12px; color: var(--color-accent-light); text-transform: uppercase; }
.biz-card__title { font-family: var(--font-jp-serif); font-size: var(--font-size-h3); margin: 0.4em 0 var(--spacing-md); font-weight: 600; }
.biz-card__link { display: inline-flex; align-items: center; gap: 0.6em; color: var(--color-accent-light); font-size: var(--font-size-small); letter-spacing: 0.1em; }
.biz-card__link .btn__arrow { transition: transform var(--transition-default); }
.biz-card:hover .biz-card__link .btn__arrow { transform: translateX(5px); }

/* ============================================================
   10. 施工実績（③Gallery）スライダー＋カウントアップ
   ============================================================ */
.works { background: var(--color-ink-2); }
.works__stats { display: flex; flex-wrap: wrap; gap: var(--spacing-2xl); margin: var(--spacing-xl) 0 var(--spacing-2xl); }
.stat__num { font-family: var(--font-en-disp); font-size: clamp(44px, 6vw, 72px); line-height: 1; color: #fff; }
.stat__num .unit { font-size: 0.4em; color: var(--color-accent-light); margin-left: 0.2em; letter-spacing: 0.1em; }
.stat__label { font-size: var(--font-size-small); color: var(--color-text-mute); letter-spacing: 0.1em; margin-top: 0.6em; }

.slider { position: relative; }
.slider__viewport { overflow: hidden; }
.slider__track { display: flex; transition: transform 0.6s var(--ease-out); }
.slide { flex: 0 0 clamp(260px, 42%, 480px); margin-right: var(--spacing-lg); }
.slide__frame { position: relative; overflow: hidden; border: 1px solid var(--color-line-dark); cursor: pointer; }
.slide__frame .ph { aspect-ratio: 4/3; transition: transform var(--transition-slow); }
.slide__frame:hover .ph { transform: scale(1.05); }
.slide__cap { position: absolute; left: 0; bottom: 0; z-index: 2; padding: var(--spacing-sm) var(--spacing-md); background: linear-gradient(transparent, rgba(21,24,29,0.9)); width: 100%; }
.slide__cap .name { font-family: var(--font-jp-serif); font-size: var(--font-size-body); color:#fff; }
.slide__cap .term { font-size: var(--font-size-label); color: var(--color-text-mute); letter-spacing: 0.08em; }
.slider__ctrl { display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-lg); }
.slider__btn { width: 52px; height: 52px; border: 1px solid var(--color-line-dark); background: transparent; color: #fff; display: grid; place-items: center; transition: background var(--transition-base), border-color var(--transition-base); }
.slider__btn:hover { background: var(--color-accent); border-color: var(--color-accent); }
.works__tags { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-top: var(--spacing-xl); }
.works__tags span { font-size: var(--font-size-small); letter-spacing: 0.1em; color: var(--color-text-mute); border: 1px solid var(--color-line-dark); padding: 0.5em 1.2em; border-radius: 100px; }

/* ============================================================
   11. 協力会社募集（④Partners）暖色
   ============================================================ */
.partners { position: relative; overflow: hidden; }
.partners__media { position: absolute; inset: 0; z-index: 0; }
.partners__media .ph { width:100%; height:100%; }
/* 写真を明るく見せる軽いスクリム（下部だけ少し濃く）。可読性は見出しの text-shadow で確保 */
.partners::after { content:""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(18,14,10,0.22) 0%, rgba(18,14,10,0.12) 45%, rgba(18,14,10,0.5) 100%); }
.partners .container { position: relative; z-index: 2; text-align: center; padding-block: var(--spacing-3xl); }
.partners__label { color: var(--color-warm-light); }
.partners__label::before { background: var(--color-warm); }
.partners__title { font-family: var(--font-jp-serif); font-size: clamp(24px, 3.4vw, 44px); line-height: 1.6; color: #fff; letter-spacing: 0.06em; margin-bottom: var(--spacing-md); font-weight: 600; text-shadow: 0 2px 18px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.5); }
.partners__lead { color: #fff; margin-bottom: var(--spacing-xl); text-shadow: 0 1px 12px rgba(0,0,0,0.6); }
.partners__label { text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.partners__pts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-2xl); }
.partners__pts li { font-size: var(--font-size-small); letter-spacing: 0.08em; color:#fff; border: 1px solid rgba(216,166,103,0.5); padding: 0.5em 1.3em; border-radius: 100px; }

/* ============================================================
   12. 採用（⑤Recruit・小さめ）
   ============================================================ */
.recruit { background: var(--color-ink-2); overflow: hidden; }
.recruit__grid { display: grid; grid-template-columns: 1fr 0.8fr; gap: var(--spacing-2xl); align-items: center; }
.recruit__title { font-family: var(--font-jp-serif); font-size: clamp(28px, 4vw, 52px); color:#fff; letter-spacing: 0.05em; margin-bottom: var(--spacing-md); font-weight: 600; }
.recruit__title .en { display:block; font-family: var(--font-en-disp); font-size: 0.32em; letter-spacing: 0.3em; color: var(--color-accent-light); margin-bottom: 0.4em; }
.recruit__body { color: var(--color-text-mute); margin-bottom: var(--spacing-lg); }
.recruit__body .tags { display:flex; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); flex-wrap: wrap; }
.recruit__body .tags span { color: var(--color-accent-light); font-size: var(--font-size-small); letter-spacing: 0.08em; }
.recruit__note { font-size: var(--font-size-label); color: var(--color-text-mute); margin-top: var(--spacing-md); }
.recruit__visual { position: relative; align-self: stretch; display:flex; align-items:flex-end; justify-content:center; }
.recruit__visual .ph { aspect-ratio: 3/4; width: 100%; }
.recruit__vcatch {
  position: absolute; right: 8px; top: 8px;
  writing-mode: vertical-rl; font-family: var(--font-jp-serif);
  font-size: clamp(16px, 2vw, 22px); letter-spacing: 0.14em; color: rgba(255,255,255,0.9);
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

/* ============================================================
   13. CTA帯
   ============================================================ */
.cta {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, #12161c, #1c2632);
  border-top: 1px solid var(--color-line-dark);
}
.cta__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); }
.cta-card {
  border: 1px solid var(--color-line-dark);
  padding: var(--spacing-2xl) var(--spacing-xl);
  display: flex; flex-direction: column; gap: var(--spacing-md);
  transition: background var(--transition-slow), border-color var(--transition-slow);
}
.cta-card:hover { border-color: var(--color-accent); background: rgba(94,139,176,0.08); }
.cta-card__en { font-family: var(--font-en-disp); letter-spacing: 0.28em; font-size: 12px; color: var(--color-accent-light); text-transform: uppercase; }
.cta-card__title { font-family: var(--font-jp-serif); font-size: var(--font-size-h3); color:#fff; font-weight: 600; }
.cta-card__body { color: var(--color-text-mute); font-size: var(--font-size-small); }
.cta__contactbar { display:flex; flex-wrap: wrap; align-items:center; justify-content: space-between; gap: var(--spacing-lg); margin-top: var(--spacing-2xl); padding-top: var(--spacing-xl); border-top: 1px solid var(--color-line-dark); }
.cta__tel { display:flex; align-items: baseline; gap: var(--spacing-sm); }
.cta__tel .label { font-size: var(--font-size-label); letter-spacing: 0.2em; color: var(--color-text-mute); }
.cta__tel .num { font-family: var(--font-en-disp); font-size: clamp(28px, 4vw, 40px); color:#fff; letter-spacing: 0.04em; }

/* ============================================================
   14. フッター
   ============================================================ */
.footer { background: #0F1216; padding-block: var(--spacing-3xl) var(--spacing-xl); border-top: 1px solid var(--color-line-dark); }
.footer__top { display:flex; flex-wrap: wrap; justify-content: space-between; gap: var(--spacing-2xl); margin-bottom: var(--spacing-2xl); }
.footer__brand .name { font-family: var(--font-jp-serif); font-size: var(--font-size-h3); color:#fff; letter-spacing: 0.08em; }
.footer__brand .en { font-family: var(--font-en-serif); font-size: 11px; letter-spacing: 0.3em; color: var(--color-accent-light); margin-top: 0.4em; }
.footer__brand .addr { color: var(--color-text-mute); font-size: var(--font-size-small); margin-top: var(--spacing-md); line-height: 1.9; }
.footer__nav { display:none; }
.footer__nav a { color: rgba(255,255,255,0.8); font-size: var(--font-size-small); letter-spacing: 0.08em; transition: color var(--transition-base); }
.footer__nav a:hover { color: var(--color-accent-light); }
.footer__bottom { display:flex; justify-content: space-between; align-items:center; padding-top: var(--spacing-lg); border-top: 1px solid var(--color-line-dark); color: var(--color-text-mute); font-size: var(--font-size-label); letter-spacing: 0.06em; }

/* 右下 縦書き浮遊CTA */
.float-cta {
  position: fixed; right: 0; bottom: 0; z-index: 900;
  display: flex; flex-direction: column;
}
.float-cta a {
  writing-mode: vertical-rl;
  padding: var(--spacing-md) 12px;
  min-height: 156px;               /* 上下2ボタンを等高に統一 */
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-jp-serif); letter-spacing: 0.2em; font-size: 14px;
  color:#fff; background: var(--color-accent);
  transition: background var(--transition-base);
}
.float-cta a.warm { background: var(--color-warm); }
.float-cta a:hover { background: #4A7396; }
.float-cta a.warm:hover { background: #A87038; }
@media (max-width: 768px) { .float-cta { display: none; } }

/* ============================================================
   15. プレースホルダ（画像・動画・地図の差替枠）
   ============================================================ */
.ph {
  position: relative; width: 100%;
  background:
    repeating-linear-gradient(45deg, rgba(127,178,214,0.05) 0 12px, transparent 12px 24px),
    var(--color-ink-3);
  border: 1px dashed var(--color-line-dark);
  display: grid; place-items: center; overflow: hidden;
  color: var(--color-text-mute);
}
.ph::after {
  content: attr(data-ph);
  font-family: var(--font-en-serif); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(127,178,214,0.6);
  text-align: center; padding: 1em;
}
.ph--light { background: repeating-linear-gradient(45deg, rgba(94,139,176,0.06) 0 12px, transparent 12px 24px), #E9ECEF; border-color: #d3d7db; }

/* 実画像を枠に収める（プレースホルダ差し替え後） */
.about__visual img { aspect-ratio: 4/5; width: 100%; object-fit: cover; display: block; }
.biz-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; transition: opacity var(--transition-slow), transform var(--transition-slow); }
.biz-card:hover img { opacity: 0.78; transform: scale(1.04); }
.slide__frame img { aspect-ratio: 4/3; width: 100%; object-fit: cover; display: block; transition: transform var(--transition-slow); }
.slide__frame:hover img { transform: scale(1.05); }
.partners__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recruit__visual img { aspect-ratio: 3/4; width: 100%; object-fit: cover; display: block; }

/* ============================================================
   16. カスタムカーソル（pine-grove / 光和 由来）
   ============================================================ */
.cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; mix-blend-mode: difference; }
.cursor__dot { position: fixed; width: 7px; height: 7px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); }
.cursor__ring { position: fixed; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.7); border-radius: 50%; transform: translate(-50%, -50%); transition: width var(--transition-base), height var(--transition-base), opacity var(--transition-base); }
.cursor.is-hover .cursor__ring { width: 58px; height: 58px; opacity: 0.6; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } body.has-cursor { cursor: auto; } }

/* ============================================================
   16b. ライトボックス（施工実績の拡大表示）
   ============================================================ */
.lightbox__inner { width: min(680px, 88vw); max-height: 86vh; }
.lightbox__inner img {
  width: 100%; height: auto; max-height: 74vh;
  object-fit: contain; display: block; border-radius: 2px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
/* クローン内のキャプションは絶対配置を解除して画像下に中央表示 */
.lightbox__inner .slide__cap { position: static; width: auto; background: none; padding: var(--spacing-md) 0 0; text-align: center; }
.lightbox__inner .slide__cap .name { font-family: var(--font-jp-serif); font-size: var(--font-size-body); color: #fff; }
.lightbox__inner .slide__cap .term { font-size: var(--font-size-small); color: var(--color-text-mute); }

/* ============================================================
   17. reveal（GSAP無し環境フォールバック／GSAP有効時はJSで制御）
   ============================================================ */
.reveal { opacity: 0; transform: translateY(42px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .marquee__track, .scroll-indicator::after { animation: none !important; }
}

/* ============================================================
   18. レスポンシブ
   ============================================================ */
@media (max-width: 1024px) {
  .reliability__cols { grid-template-columns: 1fr; }
  .rcol { min-height: auto; flex-direction: row; align-items: center; gap: var(--spacing-lg); }
  .rcol__title { height: auto; }
}
@media (max-width: 900px) {
  .about__grid, .recruit__grid, .cta__grid, .biz__grid { grid-template-columns: 1fr; gap: var(--spacing-2xl); }
  .about__visual { order: -1; }
  .recruit__visual .ph { aspect-ratio: 16/10; }
}
@media (max-width: 768px) {
  .hero__inner { flex-direction: column; align-items: flex-start; gap: var(--spacing-xl); }
  .hero__catch { writing-mode: horizontal-tb; text-orientation: mixed; height: auto; font-size: clamp(30px, 8vw, 44px); }
  .rcol { flex-direction: column; align-items: flex-start; }
  .rcol__title, .rcol__en { writing-mode: horizontal-tb; height: auto; }
  .rcol__en { position: static; margin-bottom: 0.6em; }
  .footer__bottom { flex-direction: column; gap: var(--spacing-sm); align-items: flex-start; }
  .btn { width: 100%; justify-content: center; }
  .hero__btns { width: 100%; }
}