/* ============================================================
   Dimensionworks — "ページ＝1本のリール"
   単色＋1アクセント / 非対称 / スクロール連動
   ============================================================ */

:root {
  --paper: #f3f1ea;     /* 紙白 */
  --paper-2: #eae7dd;   /* 一段沈めた紙 */
  --ink: #111110;       /* 墨 */
  --ink-soft: #6b6a64;
  --line: #d6d2c8;
  --dark: #0c0c0d;      /* 試写室 */
  --dark-soft: #8b8a86;
  --dark-line: #2a2a2b;
  --accent: #e0301e;    /* RECバーミリオン（唯一の差し色） */

  --display: "Anton", "Noto Sans JP", sans-serif;
  --sans: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --maxw: 1280px;
  --pad: clamp(1.2rem, 4vw, 3rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Lenis を使うので scroll-behavior は付けない */

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.lenis, html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { width: min(100% - calc(var(--pad) * 2), var(--maxw)); margin-inline: auto; }

/* ---------- 共通タイポ ---------- */
.label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.label .dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); margin-right: 0.6em; vertical-align: middle;
}
.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.section-no {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  color: var(--accent);
}

/* ---------- ヘッダ ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  mix-blend-mode: difference; /* 暗/明どちらの上でも読める */
  color: #fff;
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 74px;
  width: min(100% - calc(var(--pad) * 2), var(--maxw)); margin-inline: auto;
}
.brand {
  font-family: var(--display);
  font-size: 1.3rem; letter-spacing: 0.04em; line-height: 1;
  display: flex; align-items: baseline; gap: 0.5em;
}
.brand .rec {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  align-self: center;
}
.nav-links { display: flex; gap: clamp(1.1rem, 2.4vw, 2.4rem); align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-family: var(--mono);
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 0; position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: currentColor; transition: width 0.4s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: 100%; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; width: 30px; height: 22px; position: relative; }
.nav-toggle span { position: absolute; left: 0; right: 0; height: 2px; background: #fff; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.nav-toggle span:nth-child(1) { top: 2px; }
.nav-toggle span:nth-child(2) { top: 10px; }
.nav-toggle span:nth-child(3) { top: 18px; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-family: var(--mono);
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 1em 1.9em; border: 1.5px solid currentColor; background: transparent; color: var(--ink);
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--fill { background: var(--ink); color: var(--paper); }
.btn--fill:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--light { color: var(--paper); }
.btn--light:hover { background: var(--paper); color: var(--ink); }
.btn .arr { transition: transform 0.35s var(--ease); }
.btn:hover .arr { transform: translateX(5px); }

/* ============================================================
   試写室ヒーロー（pin + フレームスクラブ）
   ============================================================ */
.theater {
  position: relative;
  background: var(--dark);
  color: var(--paper);
  height: 100vh;
  overflow: hidden;
}
.theater__frames { position: absolute; inset: 0; }
.theater__frames .frame {
  position: absolute; inset: 0;
  background-position: center; background-size: cover;
  opacity: 0; will-change: opacity, transform;
}
.theater__frames .frame:first-child { opacity: 1; }
.theater::after { /* ヴィネット（グラデではなく一様減光） */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 240px 70px rgba(0,0,0,0.78);
  background: rgba(12,12,13,0.52);
}
.theater__grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.theater__inner {
  position: relative; z-index: 3; height: 100%;
  width: min(100% - calc(var(--pad) * 2), var(--maxw)); margin-inline: auto;
  display: grid; align-content: center;
}
.theater__tag { display: flex; align-items: center; gap: 0.8em; color: var(--paper); }
.theater__tag .dot { background: var(--accent); animation: blink 1.6s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.15; } }
.theater h1 {
  font-family: var(--display);
  font-size: clamp(3.4rem, 13.5vw, 12rem);
  line-height: 0.86; letter-spacing: 0.01em; text-transform: uppercase;
  margin: 0.18em 0 0;
  text-shadow: 0 2px 36px rgba(0,0,0,0.55);
}
.theater h1 .out {
  -webkit-text-stroke: 2px var(--paper); color: transparent; text-stroke: 2px var(--paper);
  text-shadow: none;
}
.theater .jp {
  margin-top: 1.4rem; max-width: 30ch; color: var(--dark-soft);
  font-size: clamp(0.95rem, 1.6vw, 1.1rem); line-height: 1.9;
}
/* タイムコード・レール（題材直結のSVG目盛り） */
.timecode {
  position: absolute; z-index: 4; right: var(--pad); bottom: 2rem;
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--paper);
  display: flex; align-items: center; gap: 0.8em;
}
.timecode .bar { width: clamp(90px, 18vw, 220px); height: 2px; background: var(--dark-line); position: relative; }
.timecode .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 8%; background: var(--accent); }
.theater__hint {
  position: absolute; left: var(--pad); bottom: 2rem; z-index: 4;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dark-soft);
}

/* ============================================================
   セクション共通
   ============================================================ */
section { position: relative; }
.block { padding-block: clamp(4.5rem, 11vw, 11rem); }
.block--paper2 { background: var(--paper-2); }
.block--dark { background: var(--dark); color: var(--paper); }

.head {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2.4rem);
  align-items: end; margin-bottom: clamp(2.4rem, 6vw, 5rem);
  border-bottom: 1.5px solid var(--ink); padding-bottom: 1.3rem;
}
.block--dark .head { border-color: var(--dark-line); }
.head h2 {
  font-family: var(--display); font-size: clamp(2.2rem, 8vw, 6rem);
  line-height: 0.9; letter-spacing: 0.01em; text-transform: uppercase; margin: 0;
}
.head .meta { justify-self: end; text-align: right; align-self: end; }

/* ---------- リール（作品グリッド・非対称） ---------- */
.reel { display: grid; gap: clamp(1rem, 2.4vw, 2rem); grid-template-columns: repeat(12, 1fr); }
.reel .work { grid-column: span 4; }
.reel .work.is-wide { grid-column: span 8; }
.reel .work.is-feature { grid-column: span 6; }
@media (max-width: 900px) { .reel .work, .reel .work.is-wide, .reel .work.is-feature { grid-column: span 6; } }
@media (max-width: 600px) { .reel .work, .reel .work.is-wide, .reel .work.is-feature { grid-column: span 12; } }

.work { display: flex; flex-direction: column; }
.yt {
  position: relative; aspect-ratio: 16/9; background: #161616; overflow: hidden; cursor: pointer;
}
.work.is-wide .yt, .work.is-feature .yt { aspect-ratio: 16/9; }
.yt img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease), filter 0.6s var(--ease); filter: grayscale(28%) contrast(1.02); }
.yt:hover img { transform: scale(1.045); filter: grayscale(0%); }
.yt::before { /* 上映枠の角トンボ風 */
  content: ""; position: absolute; inset: 10px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(255,255,255,0); transition: border-color 0.4s var(--ease);
}
.yt:hover::before { border-color: rgba(243,241,234,0.35); }
.yt .play {
  position: absolute; left: 18px; bottom: 18px; z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; background: var(--accent);
  display: grid; place-items: center; transition: transform 0.35s var(--ease);
}
.yt:hover .play { transform: scale(1.12); }
.yt .play::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; margin-left: 2px; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.work .ttl { font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.5; margin: 0.9rem 0 0.2rem; }
.work .cat { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.block--dark .work .cat { color: var(--dark-soft); }

/* ---------- サービス（フィルムストリップ・非対称） ---------- */
.strip { border-top: 1.5px solid var(--ink); }
.strip .row {
  display: grid; grid-template-columns: 5rem 1fr auto; gap: clamp(1rem, 4vw, 3rem);
  align-items: baseline; padding: clamp(1.6rem, 4vw, 2.8rem) 0; border-bottom: 1.5px solid var(--line);
  transition: padding-left 0.4s var(--ease), background 0.4s var(--ease);
}
.strip .row:hover { padding-left: 1.2rem; }
.strip .row .no { font-family: var(--mono); color: var(--accent); font-size: 0.85rem; letter-spacing: 0.12em; }
.strip .row h3 { font-family: var(--display); font-size: clamp(1.5rem, 4.4vw, 3rem); letter-spacing: 0.02em; text-transform: uppercase; margin: 0; line-height: 1; }
.strip .row h3 small { display: block; font-family: var(--sans); font-weight: 500; font-size: 0.92rem; letter-spacing: 0.04em; text-transform: none; color: var(--ink); margin-top: 0.5rem; }
.strip .row p { margin: 0; max-width: 34ch; color: var(--ink-soft); font-size: 0.9rem; justify-self: end; }
@media (max-width: 760px) {
  .strip .row { grid-template-columns: 3rem 1fr; }
  .strip .row p { grid-column: 2; justify-self: start; margin-top: 0.6rem; }
}

/* ---------- ステートメント ---------- */
.statement { font-family: var(--sans); font-weight: 500; letter-spacing: 0.02em; line-height: 1.7; font-size: clamp(1.5rem, 4.6vw, 3.2rem); max-width: 20ch; }
.statement .em { color: var(--accent); }
.statement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: end; }
@media (max-width: 820px) { .statement-grid { grid-template-columns: 1fr; } }
.statement-sub { color: var(--dark-soft); font-size: 0.95rem; max-width: 40ch; }
.block--dark .statement-sub { color: var(--dark-soft); }

/* 指標（具体の数字／盛らない） */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--dark-line); margin-top: clamp(2.4rem, 6vw, 4rem); }
.facts .f { padding: 1.6rem 0; border-bottom: 1px solid var(--dark-line); }
.facts .f .n { font-family: var(--display); font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1; }
.facts .f .n .u { font-family: var(--sans); font-weight: 500; font-size: 0.9rem; margin-left: 0.3em; color: var(--dark-soft); }
.facts .f .l { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dark-soft); margin-top: 0.7rem; }
@media (max-width: 700px) { .facts { grid-template-columns: repeat(2, 1fr); column-gap: 1.5rem; } }

/* 流れる出演者名（スクロール速度連動） */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.2rem 0; }
.marquee__track { display: inline-flex; white-space: nowrap; gap: 2.4rem; will-change: transform; }
.marquee__track span { font-family: var(--display); font-size: clamp(1.6rem, 4vw, 2.8rem); text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); }
.marquee__track span .sep { color: var(--accent); margin-left: 2.4rem; }

/* ---------- CTA ---------- */
.cta { text-align: left; }
.cta h2 { font-family: var(--display); font-size: clamp(2.6rem, 11vw, 9rem); line-height: 0.9; text-transform: uppercase; margin: 0 0 2rem; }
.cta h2 .out { -webkit-text-stroke: 1.5px var(--ink); color: transparent; }
.block--dark .cta h2 .out { -webkit-text-stroke-color: var(--paper); }

/* ---------- 下層ページ・ヒーロー ---------- */
.page-hero { padding-block: clamp(7rem, 14vw, 11rem) clamp(2rem, 5vw, 3.4rem); border-bottom: 1.5px solid var(--ink); }
.page-hero h1 { font-family: var(--display); font-size: clamp(3rem, 12vw, 9rem); line-height: 0.86; text-transform: uppercase; margin: 0.3em 0 0; }

/* ---------- 写真 ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; }
.photo-grid figure { margin: 0; overflow: hidden; grid-column: span 3; aspect-ratio: 1/1; }
.photo-grid figure.tall { grid-column: span 3; aspect-ratio: 3/4; }
.photo-grid figure.wide { grid-column: span 6; aspect-ratio: 3/2; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(20%); transition: transform 0.9s var(--ease), filter 0.6s var(--ease); }
.photo-grid figure:hover img { transform: scale(1.06); filter: grayscale(0%); }
@media (max-width: 760px) { .photo-grid figure, .photo-grid figure.tall { grid-column: span 6; } .photo-grid figure.wide { grid-column: span 12; } }

/* ---------- 会社概要 ---------- */
.about-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }
.ptable { width: 100%; border-collapse: collapse; }
.ptable th, .ptable td { text-align: left; vertical-align: top; padding: 1.1rem 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.ptable th { width: 34%; font-weight: 500; letter-spacing: 0.06em; font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; color: var(--ink-soft); padding-top: 1.4rem; }
.ptable td { color: var(--ink); }

/* ---------- お問い合わせ ---------- */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.field { margin-bottom: 1.7rem; }
.field label { display: block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.6rem; }
.field input, .field textarea, .field select { width: 100%; border: none; border-bottom: 1.5px solid var(--ink); background: transparent; padding: 0.7rem 0; font: inherit; font-size: 0.98rem; color: var(--ink); border-radius: 0; }
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); }
.contact-info dt { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 1.6rem; }
.contact-info dd { margin: 0.3rem 0 0; font-size: 1.05rem; }
.form-note { font-size: 0.78rem; color: var(--ink-soft); margin-top: 1rem; line-height: 1.7; }

/* ---------- フッタ ---------- */
.site-footer { background: var(--dark); color: var(--paper); padding-block: clamp(3.4rem, 8vw, 6rem); }
.footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2rem; align-items: flex-end; }
.footer-brand { font-family: var(--display); font-size: clamp(2.4rem, 9vw, 6rem); line-height: 0.9; text-transform: uppercase; }
.footer-nav { display: grid; gap: 0.5rem; }
.footer-nav a { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dark-soft); }
.footer-nav a:hover { color: var(--paper); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--dark-soft); border-top: 1px solid var(--dark-line); padding-top: 1.5rem; margin-top: clamp(2.4rem, 6vw, 4rem); }

/* ---------- リビール（既定は可視。JS/GSAPがある時だけ隠す） ---------- */
html.has-motion .reveal { opacity: 0; transform: translateY(28px); }
html.has-motion .reveal.in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }

/* ---------- レスポンシブ：ナビ ---------- */
@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: 74px 0 auto 0; flex-direction: column; gap: 0;
    background: var(--dark); padding: 0.5rem var(--pad) 1.6rem; transform: translateY(-130%);
    transition: transform 0.45s var(--ease); mix-blend-mode: normal;
  }
  body.nav-open .nav-links { transform: translateY(0); }
  .nav-links li { width: 100%; border-bottom: 1px solid var(--dark-line); }
  .nav-links a { display: block; padding: 1.1rem 0; font-size: 0.95rem; color: var(--paper); }
}

/* ---------- reduced-motion：全演出オフ・静的表示 ---------- */
@media (prefers-reduced-motion: reduce) {
  html.has-motion .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .theater__tag .dot { animation: none; }
  .marquee__track { transform: none !important; }
}