/* ══════════════════════════════════════
   RESET / VARS
══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /*--bg:   #141414;
  --bg2:  #1a1917;*/
  --text: #ccc5bc;
  --dim:  #625e59;
  --line: #282420;
}

html { scroll-behavior: auto; overflow-x: hidden; }
body {
  background: #f6f4f2;
    background-image: url(images/bg.gif);
  color: var(--text);
  overflow-x: hidden;
  overscroll-behavior: none;
      font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* ══════════════════════════════════════
   SMOOTH SCROLL ROOT
   position:fixed + JS translateY で慣性スクロール
   body.height = root.scrollHeight でスクロールバー生成
══════════════════════════════════════ */
#smooth-root {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  will-change: transform;
  z-index: 5; /* bg-video(1) bg-overlay(2) より上、mask-shell(15) header(900) より下 */
}

/* ══════════════════════════════════════
   HEADER
══════════════════════════════════════ */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  padding: 30px 10px 30px 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 3.5%;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  /* スクロール連動アニメーション */
  transition:
    transform  0.45s cubic-bezier(0.16, 1, 0.3, 1),
    padding    0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 下スクロール：上に隠れる */
header.header-hidden {
  transform: translateY(-110%); /* border分も含め確実に隠す */
}

/*header.header-scrolled {
  padding: 22px 5px;
}*/
/* ロゴ画像のサイズ変化をスムーズに */
.logo-block img {
  display: block;
  width: 200px;
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
/*header.header-scrolled .logo-block img {
  width: 150px;
}*/

/* スクロール時 nav の上余白をリセット */
/*header.header-scrolled nav {
  padding-top: 0;
}*/
.logo-block { display: flex; flex-direction: column; gap: 3px; }
.logo-kana {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--dim);
}
.logo-jp {
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: #fff;
}
nav { display: flex; gap: 40px; }
nav a {
  font-size: 16px;
  letter-spacing: 0.15em;
  color: #000;
  text-decoration: none;
  transition: opacity .3s;
}
nav a:hover { opacity: .35; }

/* ══════════════════════════════════════
   LAYER STACK（すべて fixed, z-indexで管理）

   z-index:
     1  bg-video-layer   固定背景動画
     2  bg-overlay       暗転オーバーレイ
     10 smooth-root内コンテンツ (.sec)
     15 mask-shell       クリッピングマスク（heroビデオ）
     900 header
══════════════════════════════════════ */

/* ─ 動画レイヤー（Phase1クリップ＋Phase2ブラー共用）─
   ★ clip-path: inset() で中央から拡張するマスクを実現
   ★ mask-shell を廃止し 1要素・1動画 に統一 → ジャンプなし
   ★ z-index:1 → smooth-root(5)の下 → コンテンツは動画の上に来る
══════════════════════════════════════ */
#bg-video-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  /* clip-path は JS で毎フレーム更新 */
}
#bg-video-inner {
  width: 100%; height: 100%;
  transform-origin: center center;
  /* scale / blur は JS で制御 */
}
#bg-video-inner video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ─ 暗転オーバーレイ ─ */
#bg-overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
}

/* ══════════════════════════════════════
   HERO TEXT FIXED WRAPPER
   ・smooth-root の外に配置 → スクロールに追従しない
   ・フェードイン／退場はすべてJSで管理
   ・初期状態は opacity:0（JSがフレームごとに更新）
══════════════════════════════════════ */
#hero-text-fixed {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  padding: 0 7.3vw;
  pointer-events: none;
  opacity: 0;                    /* JS が制御するので初期は0 */
  will-change: opacity, transform;
}

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
#hero {
  position: relative;
  height: 100vh;
  z-index: 10;
}

/* アニメーション・opacity は JS管理。CSSは見た目のみ定義 */
.hero-h1 {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(26px, 3.4vw, 45px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.95;
  color: black;
  /* 動画背景でも読めるようにシャドウを追加 */
}
.hero-en-tag {
  position: absolute;
  right: 9vw;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: black;
}

/* ══════════════════════════════════════
   SPACER（hero の後ろでマスク拡張 + BG フェードに使う）
   hero: 100vh
   spacer: Phase1(1vh分) + Phase2(beliefまで) を吸収
   ※実際のPhase2終端はJSでsec-belief.bottomから算出
══════════════════════════════════════ */
#hero-spacer { height: 200vh; }

/* ══════════════════════════════════════
   SECTIONS
══════════════════════════════════════ */
.sec { position: relative; z-index: 10; overflow: hidden;
  font-family: "Noto Serif JP", serif; }

/* §1 WATCH */
#sec-watch {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 9vw;
  gap: 4vw;
}
.watch-img-col { width: 50%; flex-shrink: 0; will-change: transform; margin-top: -800px; }
.watch-img-col img {
  width: 100%; display: block;
  filter: grayscale(10%) contrast(1.08) brightness(.95);
}
.watch-copy-col { flex: 1; will-change: transform; padding-left: 6vw; margin-top: 500px; }
/* ウォッチコピーのみ黒文字（動画フェード後に背景が明るくなるため） */
.watch-copy-col .big-copy { color: #1a1a1a; }

/* §2 CANT LET GO */
#sec-cant {
  min-height: 55vh;
  display: flex;
  align-items: center;
  padding: 140px 9vw;
}
.cant-copy { width: 50%; will-change: transform; margin-left: 60px;margin-top: 50px;} 
.cant-img-block {
  position: absolute;
  right: 0; top: -50%;
  width: 40vw; height: 22vw;
  will-change: transform;
}
.cant-img-block img {
    width: 100%;
    height: auto;
}
.cant-img-block video {
    width: 125%;
}

/* §3 BELIEF */
#sec-belief {
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 9vw;
}
.belief-img-block {
  position: absolute;
  left: 5%; top: 30%;
  width: 40%;
  will-change: transform;
}
.belief-copy {  position: relative; z-index: 2;top: -50px; }

/* ── 共通コピースタイル ── */
.big-copy {
  font-size: clamp(19px, 2.2vw, 32px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 2;
  color: #000;
}

/* §4 SERVICE */
#sec-service { padding: 160px 9vw; border-top: 1px solid var(--line); }

.sec-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 64px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.sec-label::after { content: ''; width: 60px; height: 1px; background: var(--dim); }

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
}
.service-item {
  background: var(--bg);
  padding: 52px 44px;
  transition: background .4s;
}
.service-item:hover { background: var(--bg2); }
.service-num { font-family: 'Cormorant Garamond', serif; font-size: 11px; letter-spacing: .25em; color: var(--dim); margin-bottom: 28px; }
.service-title { font-size: clamp(15px,1.4vw,22px); font-weight: 300; letter-spacing: .15em; color: #fff; margin-bottom: 22px; line-height: 1.8; }
.service-desc { font-size: 12px; letter-spacing: .08em; line-height: 2.1; color: var(--dim); }

/* §5 FLOW */
#sec-flow { padding: 160px 9vw; border-top: 1px solid var(--line); }
.flow-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px 10vw; align-items: start; }
.flow-heading { grid-column: 1 / -1; }
.flow-heading h2 { font-size: clamp(22px,2.6vw,40px); font-weight: 300; letter-spacing: .14em; line-height: 1.8; color: #fff; }
.flow-heading p { margin-top: 24px; font-size: 12px; letter-spacing: .1em; line-height: 2.2; color: var(--dim); max-width: 560px; }
.flow-steps { display: flex; flex-direction: column; }
.flow-step { display: flex; gap: 32px; padding: 36px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.flow-step:first-child { padding-top: 0; }
.step-num { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 300; color: var(--line); line-height: 1; flex-shrink: 0; padding-top: 4px; min-width: 44px; }
.step-name { font-size: 14px; font-weight: 400; letter-spacing: .15em; color: #fff; margin-bottom: 10px; }
.step-note { font-size: 12px; letter-spacing: .08em; line-height: 2; color: var(--dim); }
.flow-img-col { position: relative; align-self: stretch; min-height: 480px; background: #242220; overflow: hidden; }
.flow-img-col img { width:100%; height:100%; object-fit:cover; filter:grayscale(20%) brightness(.8); display:block; }

/* §6 VOICE */
#sec-voice { border-top: 1px solid var(--line); background: var(--bg2); }
.voice-head { padding: 160px 9vw 0; }
.voice-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); margin-top: 64px; }
.voice-card { background: var(--bg2); padding: 56px 48px; position: relative; }
.voice-card::before { content: '\201C'; position: absolute; top: 36px; left: 44px; font-family: 'Cormorant Garamond',serif; font-size: 80px; line-height:1; color: var(--line); pointer-events:none; }
.voice-text { font-size: clamp(14px,1.2vw,18px); font-weight:300; letter-spacing:.1em; line-height:2.4; color:var(--text); padding-top:40px; }
.voice-meta { margin-top:32px; font-size:11px; letter-spacing:.16em; color:var(--dim); display:flex; align-items:center; gap:16px; }
.voice-meta::before { content:''; width:32px; height:1px; background:var(--dim); }

/* §7 RECRUIT */
#sec-recruit { padding: 120px 9vw; border-top: 1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:60px; }
.recruit-copy h2 { font-size:clamp(22px,2.4vw,38px); font-weight:300; letter-spacing:.14em; line-height:1.8; color:#fff; margin-bottom:20px; }
.recruit-copy p { font-size:12px; letter-spacing:.1em; line-height:2.2; color:var(--dim); max-width:420px; }
.btn-outline { display:inline-flex; align-items:center; gap:20px; padding:18px 44px; border:1px solid var(--dim); font-family:'Cormorant Garamond',serif; font-size:11px; letter-spacing:.35em; color:var(--text); text-decoration:none; transition:border-color .35s,color .35s; flex-shrink:0; white-space:nowrap; }
.btn-outline::after { content:'→'; font-size:14px; transition:transform .35s; }
.btn-outline:hover { border-color:#fff; color:#fff; }
.btn-outline:hover::after { transform:translateX(6px); }

/* §8 CONTACT */
#sec-contact { padding:160px 9vw; border-top:1px solid var(--line); text-align:center; }
#sec-contact h2 { font-size:clamp(22px,2.8vw,44px); font-weight:300; letter-spacing:.16em; line-height:1.9; color:#fff; margin-bottom:16px; }
#sec-contact .sub { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:13px; letter-spacing:.1em; color:var(--dim); margin-bottom:60px; }
.cta-wrap { display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; }
.btn-fill { display:inline-flex; align-items:center; gap:18px; padding:22px 56px; background:#fff; font-size:12px; font-family:'Shippori Mincho',serif; letter-spacing:.28em; color:#141414; text-decoration:none; transition:opacity .35s; }
.btn-fill:hover { opacity:.75; }
.btn-fill::after { content:'→'; font-size:14px; }
.tel-block { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.tel-num { font-family:'Cormorant Garamond',serif; font-size:34px; font-weight:300; letter-spacing:.1em; color:#fff; }
.tel-note { font-size:10px; letter-spacing:.18em; color:var(--dim); }

/* FOOTER */
footer { padding:64px 9vw; border-top:1px solid var(--line); }
.footer-inner { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:52px; }
.footer-logo-jp { font-size:16px; font-weight:300; letter-spacing:.2em; color:#fff; margin-bottom:8px; }
.footer-logo-en { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:10px; letter-spacing:.14em; color:var(--dim); margin-bottom:28px; }
.footer-addr { font-size:11px; letter-spacing:.1em; line-height:2; color:var(--dim); }
.footer-nav { display:flex; gap:52px; }
.footer-nav-col { display:flex; flex-direction:column; gap:18px; }
.footer-nav-col a { font-family:'Cormorant Garamond',serif; font-size:11px; letter-spacing:.28em; color:var(--dim); text-decoration:none; transition:color .3s; }
.footer-nav-col a:hover { color:#fff; }
.footer-bottom { border-top:1px solid var(--line); padding-top:28px; display:flex; justify-content:space-between; align-items:center; }
.copy { font-family:'Cormorant Garamond',serif; font-size:10px; letter-spacing:.14em; color:var(--dim); }

/* ══════════════════════════════════════
   SCROLL REVEAL
   ふわっと登場：下から上へ移動しながらアルファ 0→100%
══════════════════════════════════════ */
.js-reveal {
  opacity: 0;
  transform: translateY(48px);
  transition:
    opacity  4.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 4.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.js-reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.js-reveal[data-delay="1"] { transition-delay: 0.12s; }
.js-reveal[data-delay="2"] { transition-delay: 0.24s; }
.js-reveal[data-delay="3"] { transition-delay: 0.36s; }
.js-reveal[data-delay="4"] { transition-delay: 0.48s; }
.js-reveal[data-delay="5"] { transition-delay: 0.60s; }