/* =========================================================
   株式会社 本気の左 — HONKI HIDARI
   プロトタイプ スタイルシート
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
  --c-red:      #9A3534;   /* メイン：深紅 */
  --c-red-deep: #7E2A29;
  --c-gold:     #E6AC5A;   /* アクセント：ゴールド */
  --c-ink:      #1A1A1A;   /* テキスト：墨 */
  --c-white:    #FFFFFF;
  --c-off:      #F6F4F1;   /* オフホワイト */
  --c-black:    #0E0D0C;   /* 3DCG背景 */
  --c-line:     rgba(26,26,26,.14);
  --c-mute:     #6B6663;

  --f-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-sans:  "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --f-en:    "Cormorant Garamond", "Noto Serif JP", serif;

  --pad-x: clamp(24px, 6vw, 120px);
  --sec-y: clamp(88px, 13vw, 200px);
  --max:   1240px;

  --ease: cubic-bezier(.22,.61,.36,1);
  /* 行きすぎてから戻る「弾む」動き。遊び心はほぼこれで出る */
  --ease-pop: cubic-bezier(.34,1.42,.64,1);

  /* 事業ごとのアクセント色。
     深紅と金を軸にしたまま、彩度を抑えた5色で変化をつけている。
     ポップな原色にすると、映像制作会社の落ち着きが崩れるため使わない */
  --c-a1: #2F6C8F;   /* 01 3DCG：藍 */
  --c-a2: #9A3534;   /* 02 映像：深紅（ブランド色） */
  --c-a3: #C08A34;   /* 03 SNS：金（濃いめ） */
  --c-a4: #4E7A5A;   /* 04 販売：苔緑 */
  --c-a5: #6D5B9E;   /* 05 AI：紫 */

  --accent: var(--c-red);   /* 既定。カードごとに上書きする */
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--c-white); color:var(--c-ink);
  font-family:var(--f-sans); font-weight:400;
  font-size:16px; line-height:2; letter-spacing:.04em;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;

  /* 数字は「大文字数字」に統一する。
     見出しに使っている Cormorant Garamond は既定が「小文字数字」で、
     3・4・7・9 がベースラインより下に落ちて小さく見える。
     大文字と並ぶ「3DCG PRODUCTION」のような見出しで不揃いになるため、
     全体でライニング数字に切り替えている。
     日本語フォント側は小文字数字を持たないので影響はない。 */
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p,figure,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

/* ---------- Utilities ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad-x); }
.sec{ padding-block:var(--sec-y); }
.sec--off{ background:var(--c-off); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* 欧文セクションラベル（ゴールドの短い罫つき） */
.label{
  display:flex; align-items:center; gap:14px;
  font-family:var(--f-en); font-size:13px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
  margin-bottom:22px;
}
.label::before{ content:""; width:34px; height:1px; background:var(--accent); flex:none; opacity:.75; }
.label--light{ color:var(--c-gold); }
.label--center{ justify-content:center; }

/* 見出し */
.h-sec{
  font-family:var(--f-serif); font-weight:500;
  font-size:clamp(26px,3.4vw,42px); line-height:1.55; letter-spacing:.06em;
}
.lead{
  margin-top:26px; color:var(--c-mute);
  font-size:clamp(14px,1.15vw,16px); line-height:2.15;
}

/* ボタン */
.btn{
  display:inline-flex; align-items:center; gap:16px;
  padding:18px 34px; border:1px solid var(--c-ink);
  font-size:14px; letter-spacing:.14em;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.btn .arw{ width:26px; height:1px; background:currentColor; transition:width .5s var(--ease-pop); }
.btn{ transition:background .45s var(--ease), color .45s var(--ease),
                 border-color .45s var(--ease), transform .5s var(--ease-pop); }
.btn:hover{ background:var(--c-ink); color:var(--c-white); transform:translateY(-3px); }
.btn:hover .arw{ width:40px; }
.btn--light{ border-color:rgba(255,255,255,.55); color:#fff; }
.btn--light:hover{ background:#fff; color:var(--c-red); border-color:#fff; }

/* スクロール出現 */
.rv{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }

/* =========================================================
   Loader
   ========================================================= */
#loader{
  position:fixed; inset:0; z-index:9999; background:var(--c-white);
  display:grid; place-items:center;
  transition:opacity .8s var(--ease), visibility .8s var(--ease);
}
#loader.is-done{ opacity:0; visibility:hidden; }
#loader .mark{ width:min(28vw,150px); }
#loader .ring{
  fill:none; stroke:var(--c-red); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
  /* パス全長は実測でおよそ488。少し多めにとって、確実に «消えた» 状態から始める */
  stroke-dasharray:490; stroke-dashoffset:490;
  /* 書き出しはゆっくり、途中で伸びて、止め際でまた落ちる。筆の運びに近づけている。
     forwards なので、描き終わった線はそのまま残る（消えない） */
  animation:draw 1.5s cubic-bezier(.62,.03,.31,1) forwards;
}
#loader .txt{
  fill:var(--c-ink); font-family:var(--f-en); font-size:26px; letter-spacing:.16em;
  opacity:0; animation:fadeIn .6s var(--ease) 1.25s forwards;   /* 書き終えてから出す */
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fadeIn{ to{ opacity:1; } }

/* =========================================================
   Header
   ========================================================= */
.hd{
  position:fixed; inset:0 0 auto; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad-x); height:78px;
  color:var(--c-ink); transition:background .5s var(--ease), color .5s var(--ease), height .5s var(--ease);
}
.hd.is-solid{ background:rgba(255,255,255,.94); color:var(--c-ink); height:66px; backdrop-filter:blur(10px); }

/* ヒーローの動画は場面ごとに明るさが変わるため、
   まだ白背景になっていない状態のヘッダーは «白のにじみ» で下敷きを作る。
   帯を敷くより軽く、動画を隠さない */
.hd:not(.is-solid){
  text-shadow:0 0 10px rgba(255,255,255,.95), 0 0 24px rgba(255,255,255,.75);
}
.hd:not(.is-solid) .hd__cta{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(6px);
  text-shadow:none;
}
.hd.is-solid .hd__line{ background:var(--c-line); }
.hd__logo{ display:flex; align-items:center; gap:12px; }
.hd__logo img{ width:34px; }
.hd__logo .lg-w{ display:none; }
.hd__logo .lg-b{ display:block; }
.hd__logo .n{ font-family:var(--f-en); font-size:15px; letter-spacing:.2em; }
.hd__nav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,38px); }
.hd__nav a{ font-family:var(--f-en); font-size:13px; letter-spacing:.18em; position:relative; }
.hd__nav a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background:var(--c-gold); transition:width .5s var(--ease-pop);
}
.hd__nav a:hover::after{ width:100%; }
.hd__cta{
  padding:11px 22px; border:1px solid currentColor;
  font-size:12px; letter-spacing:.14em;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.hd__cta:hover{ background:var(--c-red); border-color:var(--c-red); color:#fff; }
.hd__line{ position:absolute; left:0; right:0; bottom:0; height:1px; background:transparent; }
.hd__burger{ display:none; width:26px; height:14px; position:relative; }
.hd__burger span{ position:absolute; left:0; width:100%; height:1px; background:currentColor; transition:.4s var(--ease); }
.hd__burger span:nth-child(1){ top:0; }
.hd__burger span:nth-child(2){ bottom:0; }
body.nav-open .hd__burger span:nth-child(1){ top:6px; transform:rotate(45deg); }
body.nav-open .hd__burger span:nth-child(2){ bottom:7px; transform:rotate(-45deg); }

/* スマホメニュー */
.mnav{
  position:fixed; inset:0; z-index:99; background:var(--c-black); color:#fff;
  display:grid; place-items:center; gap:0;
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
body.nav-open .mnav{ opacity:1; visibility:visible; }
.mnav ul{ text-align:center; }
.mnav li{ margin:26px 0; }
.mnav a{ font-family:var(--f-en); font-size:20px; letter-spacing:.2em; }
.mnav .ja{ display:block; font-family:var(--f-sans); font-size:11px; letter-spacing:.14em; color:var(--c-gold); margin-top:4px; }

/* =========================================================
   HERO（A案：黒地に3DCG）
   ========================================================= */
.hero{
  position:relative; min-height:100svh; color:var(--c-ink);
  background:linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 62%, var(--c-off) 100%);
  display:flex; align-items:center; overflow:hidden;
}
.hero__cg{ position:absolute; inset:0; z-index:0; }
.hero__cg canvas{ display:block; width:100%; height:100%; }

/* ---- 背景の動画 ----
   «動画» と «筆文字» の両方を見せるのが最優先。
   そのため動画はぼかさず、彩度もほぼそのまま出す。
   文字の可読性は、下の «白いかぶせ» と «筆文字の白い縁» の2つで確保する。 */
.hero__bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.94) contrast(.98);
  pointer-events:none;
}

/* 白のかぶせ。左（文字がある側）だけを白く残し、右は動画をそのまま見せる。
   縦方向はヘッダーと、次のセクションへの繋ぎだけ。 */
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(95deg,
      rgba(255,255,255,.88) 0%, rgba(255,255,255,.66) 30%,
      rgba(255,255,255,.24) 52%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg,
      rgba(255,255,255,.58) 0%, rgba(255,255,255,0) 18%,
      rgba(255,255,255,0) 64%, rgba(255,255,255,.55) 88%, var(--c-off) 100%);
}

/* 動きを減らす設定の端末では、動画を止めて一枚絵にする */
@media (prefers-reduced-motion: reduce){
  .hero__bg{ display:none; }
  .hero{ background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.9)),
    url(../video/top-poster.jpg) center / cover no-repeat; }
}
.hero__inner{ position:relative; z-index:2; width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad-x); }
.hero__meta{
  font-family:var(--f-en); font-size:12px; letter-spacing:.28em; color:var(--c-red);
  display:flex; align-items:center; gap:14px; margin-bottom:clamp(28px,3.4vw,44px);
  text-shadow:0 0 10px rgba(255,255,255,.95), 0 0 22px rgba(255,255,255,.8);
}
.hero__meta::before{ content:""; width:44px; height:1px; background:var(--c-red); }
/* ヒーローの見出しは筆文字の画像。
   右にあるロゴモチーフのオブジェクトとぶつからない幅に抑えている。
   幅を広げるときは、必ずオブジェクト側との間隔も見ること */
.hero__ttl{ margin:0; }
.hero__ttl img{
  width:min(45vw,600px); height:auto; display:block;
  /* 背景の動画は明るさが場面ごとに変わる。
     白いにじみを3枚重ねて «縁» を作り、どの絵の上でも黒が沈まないようにする。
     かぶせを濃くするより、動画を殺さずに可読性が上がる */
  filter:
    drop-shadow(0 0 8px  rgba(255,255,255,.95))
    drop-shadow(0 0 22px rgba(255,255,255,.85))
    drop-shadow(0 0 44px rgba(255,255,255,.60));
}
.hero__sub{
  margin-top:clamp(30px,3.4vw,46px); font-size:clamp(13px,1.2vw,16px);
  letter-spacing:.1em; color:var(--c-mute);
  text-shadow:0 0 10px rgba(255,255,255,.95), 0 0 22px rgba(255,255,255,.8);
}
.hero__scroll{
  position:absolute; left:var(--pad-x); bottom:38px; z-index:2;
  display:flex; align-items:center; gap:14px;
  font-family:var(--f-en); font-size:11px; letter-spacing:.3em; color:var(--c-mute);
}
.hero__scroll .bar{ position:relative; width:66px; height:1px; background:var(--c-line); overflow:hidden; }
.hero__scroll .bar::after{
  content:""; position:absolute; inset:0; background:var(--c-red);
  transform:translateX(-100%); animation:slide 2.4s var(--ease) infinite;
}
@keyframes slide{ 0%{transform:translateX(-100%)} 55%{transform:translateX(0)} 100%{transform:translateX(100%)} }

/* CG未読込時のフォールバック（ロゴモチーフを回す） */
.hero__fallback{
  position:absolute; z-index:0; right:12%; top:50%; transform:translateY(-50%);
  width:min(46vw,520px); aspect-ratio:1; opacity:.9;
  animation:spin 34s linear infinite;
}
@keyframes spin{ to{ transform:translateY(-50%) rotate(360deg); } }

/* =========================================================
   Intro
   ========================================================= */
.intro{ text-align:center; }
.intro__body{
  font-family:var(--f-serif); font-weight:400;
  font-size:clamp(16px,1.7vw,22px); line-height:2.5; letter-spacing:.09em;
  max-width:760px; margin-inline:auto;
}
.intro__body .big{
  display:block; font-size:clamp(22px,3vw,34px); margin-bottom:38px; letter-spacing:.08em;
}

/* =========================================================
   Service
   ========================================================= */
.svc__head{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:clamp(46px,6vw,86px); }
.svc__list{ border-top:1px solid var(--c-line); }
.svc__item{
  display:grid; grid-template-columns:96px minmax(0,340px) 1fr;
  gap:clamp(20px,4vw,60px); align-items:start;
  padding:clamp(30px,4vw,52px) 0; border-bottom:1px solid var(--c-line);
  transition:background .5s var(--ease), padding-inline .5s var(--ease);
}
.svc__item:hover{ background:var(--c-off); padding-inline:24px; }
.svc__no{ font-family:var(--f-en); font-size:clamp(28px,3vw,40px); color:var(--c-gold); line-height:1; padding-top:6px; }
.svc__ttl{ font-family:var(--f-serif); font-size:clamp(19px,1.9vw,25px); font-weight:500; letter-spacing:.07em; line-height:1.7; }
.svc__ttl .en{ display:block; font-family:var(--f-en); font-size:12px; letter-spacing:.22em; color:var(--c-mute); margin-bottom:10px; }
.svc__txt{ color:var(--c-mute); font-size:15px; }
.svc__txt .catch{ display:block; color:var(--c-ink); font-size:16px; margin-bottom:14px; letter-spacing:.05em; }

/* =========================================================
   Works
   ========================================================= */
.wk__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,34px); margin-top:clamp(40px,5vw,72px); }
.wk__card figure{ position:relative; overflow:hidden; aspect-ratio:16/10; background:#222; }
.wk__card .ph{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(135deg,#1c1a19,#2e2a27);
  color:rgba(255,255,255,.28); font-family:var(--f-en); font-size:13px; letter-spacing:.24em;
  transition:transform 1.1s var(--ease);
}
.wk__card:hover .ph{ transform:scale(1.06); }
.wk__card .cat{
  position:absolute; left:14px; top:14px; z-index:2;
  background:var(--c-red); color:#fff; font-size:10px; letter-spacing:.16em; padding:5px 11px;
}
.wk__card h3{ font-family:var(--f-serif); font-size:17px; font-weight:500; margin-top:18px; letter-spacing:.05em; line-height:1.7; }
.wk__card .meta{ font-size:12px; color:var(--c-mute); letter-spacing:.1em; margin-top:6px; }

/* =========================================================
   Strength
   ========================================================= */
.st__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,64px); margin-top:clamp(40px,5vw,72px); }
.st__no{ font-family:var(--f-en); font-size:14px; letter-spacing:.24em; color:var(--c-red); }
.st__ring{ width:52px; height:52px; margin:22px 0 24px; }
.st__ttl{ font-family:var(--f-serif); font-size:clamp(17px,1.6vw,21px); font-weight:500; line-height:1.85; letter-spacing:.06em; }
.st__txt{ margin-top:18px; color:var(--c-mute); font-size:14.5px; }

/* =========================================================
   Company
   ========================================================= */
.cp{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(34px,6vw,90px); align-items:start; }
.cp__tbl dl{ display:grid; grid-template-columns:170px 1fr; border-top:1px solid var(--c-line); }
.cp__tbl dt, .cp__tbl dd{ padding:20px 0; border-bottom:1px solid var(--c-line); font-size:14.5px; }
.cp__tbl dt{ letter-spacing:.1em; color:var(--c-mute); }

/* =========================================================
   CTA
   ========================================================= */
.cta{ background:var(--c-red); color:#fff; text-align:center; }
.cta__ttl{
  font-family:var(--f-serif); font-weight:500;
  font-size:clamp(21px,2.9vw,36px); line-height:1.85; letter-spacing:.07em;
}
.cta__contacts{ margin-top:38px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px 34px; font-size:14px; letter-spacing:.1em; color:rgba(255,255,255,.85); }
.cta__contacts a:hover{ color:var(--c-gold); }

/* =========================================================
   Footer
   ========================================================= */
.ft{ background:var(--c-black); color:rgba(255,255,255,.72); padding-block:clamp(56px,7vw,96px) 34px; }
.ft__top{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:44px; }
.ft__logo img{ width:74px; margin-bottom:22px; }
.ft__name{ font-family:var(--f-serif); font-size:17px; color:#fff; letter-spacing:.1em; }
.ft__en{ font-family:var(--f-en); font-size:12px; letter-spacing:.2em; color:var(--c-gold); margin-top:6px; }
.ft__addr{ font-size:13px; margin-top:22px; line-height:2.1; }
.ft h4{ font-family:var(--f-en); font-size:12px; letter-spacing:.22em; color:var(--c-gold); margin-bottom:20px; font-weight:500; }
.ft li{ margin-bottom:13px; font-size:13.5px; letter-spacing:.06em; }
.ft li a:hover{ color:var(--c-gold); }
.ft__btm{
  margin-top:clamp(44px,6vw,76px); padding-top:26px; border-top:1px solid rgba(255,255,255,.13);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:11.5px; letter-spacing:.12em; color:rgba(255,255,255,.45);
}

/* =========================================================
   下層ページ共通
   ========================================================= */
.phd{ background:var(--c-white); color:var(--c-ink); padding-block:clamp(140px,17vw,220px) clamp(56px,7vw,96px); border-bottom:1px solid var(--c-line); }
.phd__en{ font-family:var(--f-en); font-size:clamp(38px,6.4vw,84px); letter-spacing:.14em; line-height:1; color:var(--c-ink); }
.phd__ja{ font-family:var(--f-serif); font-size:clamp(15px,1.5vw,19px); letter-spacing:.16em; margin-top:20px; color:var(--c-red); }

.about__lead{
  font-family:var(--f-serif); font-weight:500;
  font-size:clamp(24px,4.2vw,52px); line-height:1.72; letter-spacing:.08em;
}
.about__body{ margin-top:44px; color:var(--c-mute); font-size:15.5px; max-width:660px; }

/* フォーム */
.form{ max-width:720px; }
.form__row{ margin-bottom:30px; }
.form__row label{ display:block; font-size:13px; letter-spacing:.12em; margin-bottom:11px; }
.form__row .req{ color:var(--c-red); font-size:11px; margin-left:8px; letter-spacing:.08em; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form select, .form textarea{
  width:100%; padding:15px 16px; border:1px solid var(--c-line); background:var(--c-white);
  font:inherit; font-size:15px; border-radius:0; transition:border-color .3s var(--ease);
}
.form input:focus, .form select:focus, .form textarea:focus{ outline:none; border-color:var(--c-red); }
.form textarea{ min-height:190px; resize:vertical; }
.form__check{ display:flex; gap:11px; align-items:flex-start; font-size:14px; margin:34px 0; }
.form__submit{
  width:100%; padding:22px; background:var(--c-red); color:#fff;
  font-size:15px; letter-spacing:.2em; transition:background .4s var(--ease);
}
.form__submit:hover{ background:var(--c-red-deep); }
.form__note{ margin-top:18px; font-size:12px; color:var(--c-mute); text-align:center; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:960px){
  .svc__head{ grid-template-columns:1fr; align-items:start; }
  .svc__item{ grid-template-columns:60px 1fr; }
  .svc__txt{ grid-column:2 / -1; }
  .wk__grid{ grid-template-columns:repeat(2,1fr); }
  .st__grid{ grid-template-columns:1fr; gap:44px; }
  .cp{ grid-template-columns:1fr; }
  .ft__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  body{ font-size:15px; line-height:1.95; }
  .hd__nav{ display:none; }
  .hd__burger{ display:block; }
  /* スマホはオブジェクトを【上半分】、文字を【下半分】に分けて重ならないようにする */
  .hero{ align-items:flex-end; }
  .hero__inner{ padding-top:0; padding-bottom:20vh; }
  .hero__fallback{ right:auto; left:50%; top:26%; transform:translate(-50%,-50%); width:56vw; opacity:.5; }
  @keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
  .wk__grid{ grid-template-columns:1fr; }
  .cp__tbl dl{ grid-template-columns:1fr; }
  .cp__tbl dt{ padding-bottom:0; border-bottom:0; }
  .ft__top{ grid-template-columns:1fr; gap:38px; }
}

/* モーション低減の設定を尊重 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; }
}

/* =========================================================
   3DCG オブジェクト（TSG方式：1枚のキャンバスに複数配置）
   ========================================================= */

/* 前面のWebGLキャンバス（各セクションのオブジェクト） */
.s3d{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  width:100vw; height:100vh;
}

/* 最背面のWebGLキャンバス（11点のサークル） */
.s3d-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  width:100vw; height:100vh;
}

/* オブジェクトの置き場所を示す透明な箱 */
.slot{ position:relative; z-index:0; aspect-ratio:1; width:100%; pointer-events:none; }
.slot__img{ width:100%; height:100%; object-fit:contain; }
/* WebGLが使えない環境ではロゴモチーフの薄いリングを出す */
.slot.is-fallback::after{
  content:""; position:absolute; inset:12%;
  border:1px solid var(--c-gold); border-radius:50%;
  border-bottom-color:transparent; opacity:.5;
}

/* 重ね順：html背景 → 背景サークル → セクション背景 → オブジェクト → 本文 */
.wrap, .hero__inner{ position:relative; z-index:3; }
.sec, .hero, .cta, .ft, .phd{ position:relative; z-index:1; }

/* 背景サークルを見せるため、body自体は透明にして html に白を敷く */
html{ background:var(--c-white); }
body{ background:transparent; }
/* 通常のセクションは白で塗りつぶし、背景サークルを隠す */
.sec{ background:var(--c-white); }
.sec--off{ background:var(--c-off); }
/* ⚠️ 独自の背景色を持つセクションは、上の .sec より後ろで宣言し直すこと
   （後から書いた方が勝つため。CTAの深紅が白に上書きされる不具合があった） */
.sec.cta{ background:var(--c-red); }

/* 縦組みのアクセント文（TSG風） */
.vtxt{
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:var(--f-serif); font-weight:500;
  font-size:clamp(13px,1.15vw,16px); line-height:2.1; letter-spacing:.18em;
  color:var(--c-ink); white-space:nowrap;
}

/* =========================================================
   SERVICE：オブジェクト付きグリッド（TSG のプロダクト一覧に相当）
   ========================================================= */
.svc2{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(40px,6vw,110px) clamp(30px,5vw,90px); margin-top:clamp(46px,6vw,90px); }
.svc2__item{ display:block; }
.svc2__stage{ display:flex; align-items:center; justify-content:center; gap:clamp(12px,2vw,30px); }
.svc2__stage .slot{ width:min(62%,300px); }
.svc2__body{ margin-top:clamp(20px,2.6vw,34px); }
.svc2__item:nth-child(1){ --accent:var(--c-a1); }
.svc2__item:nth-child(2){ --accent:var(--c-a2); }
.svc2__item:nth-child(3){ --accent:var(--c-a3); }
.svc2__item:nth-child(4){ --accent:var(--c-a4); }
.svc2__item:nth-child(5){ --accent:var(--c-a5); }

/* 番号：アクセント色の丸を連れて、ホバーで少し右へ弾む */
.svc2__no{
  font-family:var(--f-en); font-size:14px; letter-spacing:.24em; color:var(--accent);
  display:flex; align-items:center; gap:10px;
  transition:transform .55s var(--ease-pop);
}
.svc2__no::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--accent); flex:none;
  transition:transform .55s var(--ease-pop);
}
.svc2__item:hover .svc2__no{ transform:translateX(6px); }
.svc2__item:hover .svc2__no::before{ transform:scale(1.9); }

/* 英字見出し：ホバーでほんの少しだけ持ち上がる */
.svc2__en{ transition:transform .55s var(--ease-pop), color .4s var(--ease); }
.svc2__item:hover .svc2__en{ transform:translateX(4px); color:var(--accent); }
.svc2__en{ font-family:var(--f-en); font-size:clamp(19px,2vw,27px); letter-spacing:.1em; margin-top:8px; line-height:1.35; }
.svc2__ja{ font-family:var(--f-serif); font-size:clamp(15px,1.3vw,18px); font-weight:500; letter-spacing:.08em; margin-top:6px; }
.svc2__txt{ margin-top:14px; color:var(--c-mute); font-size:14px; line-height:2; }
.svc2__line{ height:1px; background:var(--c-line); margin-top:20px; position:relative; overflow:hidden; }
.svc2__line::after{ content:""; position:absolute; inset:0; background:var(--accent); transform:translateX(-101%); transition:transform .7s var(--ease); }
.svc2__item:hover .svc2__line::after{ transform:none; }

/* WHY US をオブジェクト付きに */
.st__slot{ width:min(58%,190px); margin:0 auto 26px; }

/* HERO のオブジェクト置き場 */
.hero__slot{
  position:absolute; z-index:0; right:6%; top:50%; transform:translateY(-50%);
  width:min(46vw,540px);
}

/* INTRO / COMPANY / CTA のオブジェクト置き場 */
.intro__slot{ width:min(26vw,220px); margin:0 auto clamp(34px,4vw,56px); }
.cp__slot{ width:min(30vw,260px); margin-top:34px; }
.cta__slot{ width:min(24vw,190px); margin:0 auto clamp(26px,3vw,44px); }
.phd__slot{ position:absolute; right:4%; top:58%; transform:translateY(-50%); width:min(21vw,235px); z-index:0; }

@media (max-width:960px){
  .svc2{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .hero__slot{ right:auto; left:50%; top:26%; transform:translate(-50%,-50%); width:56vw; }
  .hero__ttl img{ width:min(86vw,520px); }
  .phd__slot{ width:34vw; right:-6%; }
  .svc2__stage .slot{ width:72%; }
  .vtxt{ font-size:12px; }
}

/* =========================================================
   白基調への転換にともなう追加（TSG方式）
   ========================================================= */

/* ヒーローの左右にオブジェクトを配置（TSGのように画面端で見切れさせる） */
.hero__sat{ position:absolute; z-index:0; pointer-events:none; }
.hero__sat--l{ left:-8%;  top:14%; width:min(21vw,255px); }
.hero__sat--r{ right:-9%; bottom:6%; width:min(17vw,205px); }

/* マウス追従中はカーソルを変える（触れることを示す） */
.hero{ cursor:crosshair; }

/* 下層ページのオブジェクトは白地に置かれるので少し小さく */
.phd{ position:relative; overflow:hidden; }

/* フッターは黒のまま（白基調の締め） */

@media (max-width:720px){
  .hero__sat{ display:none; }
  /* スマホは文字が画面幅いっぱいに来るので、左だけ白くする効き方が合わない。
     かぶせを «縦方向» に切り替えて、文字のある帯を白くする */
  .hero::after{
    background:linear-gradient(180deg,
      rgba(255,255,255,.52) 0%, rgba(255,255,255,.08) 20%,
      rgba(255,255,255,.26) 44%, rgba(255,255,255,.46) 68%,
      rgba(255,255,255,.44) 86%, var(--c-off) 100%);
  }
}


/* =========================================================
   SERVICE 下層ページ：オブジェクトの分散配置
   ・セクションごとに位置・大きさ・左右を変えてリズムを作る
   ・キャンバスは z-index:1、本文は .wrap の z-index:2 なので
     オブジェクトは常に文字の【後ろ】に描かれる
   ========================================================= */
.svc-obj{ position:absolute; z-index:0; pointer-events:none; }

/* 本文の左右にできる余白へ寄せ、画面端で見切れさせる（TSGと同じ手法）。
   こうすると文字にほとんど重ならないまま、3DCGの存在感だけが出る。 */
.svc-obj--r1{ right:-4%;  top:22%;    width:min(24vw,265px); }
.svc-obj--l1{ left:-5%;   bottom:12%; width:min(22vw,245px); }
.svc-obj--r2{ right:-5%;  bottom:18%; width:min(23vw,255px); }
.svc-obj--l2{ left:-6%;   top:42%;    width:min(21vw,235px); }
.svc-obj--r3{ right:-3%;  top:40%;    width:min(25vw,270px); }

@media (max-width:960px){
  .svc-obj{ width:min(30vw,210px) !important; }
  .svc-obj--r1{ right:-11%; top:10%; }
  .svc-obj--l1{ left:-12%;  bottom:6%; }
  .svc-obj--r2{ right:-12%; bottom:8%; }
  .svc-obj--l2{ left:-11%;  top:6%; }
  .svc-obj--r3{ right:-11%; top:28%; }
}
@media (max-width:720px){
  /* スマホは本文の幅いっぱいなので、大きく外へ逃がす */
  .svc-obj{ width:38vw !important; }
  .svc-obj--r1, .svc-obj--r2, .svc-obj--r3{ right:-16%; }
  .svc-obj--l1, .svc-obj--l2{ left:-16%; }
}


/* =========================================================
   CONTACT：左に連絡先、右にフォーム（スマホでは縦積み）
   ※ インラインstyleで組むとメディアクエリで上書きできないため、
     必ずクラスで指定すること
   ========================================================= */
.ct{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(34px,6vw,90px); align-items:start; }
@media (max-width:900px){
  .ct{ grid-template-columns:1fr; gap:clamp(40px,7vw,64px); }
  .form{ max-width:none; }
}

/* スマホでフォームが押しつぶされないように */
@media (max-width:720px){
  .form input[type=text], .form input[type=email], .form input[type=tel],
  .form select, .form textarea{ font-size:16px; }  /* iOSの自動ズームを防ぐ */
  .form__row{ margin-bottom:24px; }
  .form__check{ align-items:center; }
  /* 下層ページのヘッダーのオブジェクトを見出しから逃がす */
  .phd__slot{ width:30vw; right:-8%; top:auto; bottom:8%; transform:none; }
}

/* =========================================================
   スマホメニューを開いている間の調整
   ========================================================= */
body.nav-open{ overflow:hidden; }                 /* 背面のページをスクロールさせない */
body.nav-open .hd{ color:#fff; background:transparent; }
body.nav-open .hd__logo .lg-b{ display:none; }    /* 黒地なのでロゴを白文字版に */
body.nav-open .hd__logo .lg-w{ display:block; }
body.nav-open .hd__line{ background:transparent; }

/* =========================================================
   Coming Soon（実績ページ・TOPのWORKS）
   ========================================================= */
.soon{
  text-align:center;
  padding:clamp(56px,8vw,110px) clamp(20px,4vw,40px);
  border:1px solid var(--c-line);
  margin-top:clamp(40px,5vw,72px);
}
.soon__en{
  font-family:var(--f-en); font-size:clamp(26px,3.6vw,46px);
  letter-spacing:.22em; color:var(--c-red); line-height:1;
}
.soon__ja{
  margin-top:26px; font-family:var(--f-serif); font-weight:500;
  font-size:clamp(15px,1.5vw,19px); line-height:2.1; letter-spacing:.06em;
}
.soon__note{ margin-top:22px; font-size:14px; color:var(--c-mute); line-height:2.1; }

/* SNSリンクは、URLが未設定のあいだは非表示にする */
.ft li[hidden]{ display:none; }


/* =========================================================
   背景サークルが「たまに見える」帯
   ---------------------------------------------------------
   セクションとセクションのあいだに挟む透明の帯。
   上下は白のグラデーションでつないで、境目を目立たせない。
   ========================================================= */
.reveal-band{
  position:relative; z-index:1;
  height:clamp(320px,46vh,620px);
  background:transparent;
  pointer-events:none;
}
.reveal-band::before,
.reveal-band::after{ content:""; position:absolute; left:0; right:0; height:26%; }
.reveal-band::before{ top:0;    background:linear-gradient(180deg, var(--c-white), rgba(255,255,255,0)); }
.reveal-band::after { bottom:0; background:linear-gradient(0deg,   var(--c-white), rgba(255,255,255,0)); }

/* 上または下がオフホワイトのセクションのとき用 */
.reveal-band--off-top::before   { background:linear-gradient(180deg, var(--c-off), rgba(246,244,241,0)); }
.reveal-band--off-bottom::after { background:linear-gradient(0deg,   var(--c-off), rgba(246,244,241,0)); }

/* 帯の中央に置く小さな案内 */
.reveal-band__note{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--f-en); font-size:11px; letter-spacing:.3em;
  color:var(--c-mute); opacity:.5;
}

/* =========================================================
   SERVICEカード：ホバーとクリックの画面転換
   ========================================================= */
.svc2__item{ cursor:pointer; }
.svc2__item .slot{ transition:transform .5s var(--ease); }

/* クリック後：オブジェクト以外をフェードアウトさせる */
body.is-zooming{ overflow:hidden; }
body.is-zooming .hd,
body.is-zooming .wrap,
body.is-zooming .hero__inner,
body.is-zooming .s3d-bg,
body.is-zooming .ft{
  opacity:0;
  transition:opacity .45s var(--ease);
  pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
  body.is-zooming .hd, body.is-zooming .wrap, body.is-zooming .ft{ opacity:1; }
}

/* ページ遷移の受け：白い幕がフェードアウトする */
.page-in{
  position:fixed; inset:0; z-index:9997; background:var(--c-white);
  pointer-events:none; animation:pageInFade .55s var(--ease) forwards;
}
@keyframes pageInFade{ to{ opacity:0; visibility:hidden; } }
@media (prefers-reduced-motion:reduce){ .page-in{ display:none; } }


/* 代表プロフィールの顔写真（ABOUT）
   ※ 大きさはクラスで指定すること。インラインの style だと
      画面幅ごとの指定（@media）で上書きできなくなる */
.rep__photo{
  width:min(52vw,230px); aspect-ratio:1/1;
  margin:0 0 clamp(24px,3vw,32px);
  border-radius:50%; overflow:hidden;
  background:var(--c-white);
  box-shadow:0 12px 34px rgba(28,26,25,.12);
}
.rep__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:720px){
  .rep__photo{ width:190px; margin-left:auto; margin-right:auto; }
}


/* =========================================================
   流れる帯（マーキー）
   社名の筆文字を横に流し続ける帯。
   同じ内容を «3組» 並べ、1組ぶん（-33.3333%）動かして継ぎ目なく回している。
   3組にしているのは、1組が画面幅より狭いと巻き戻る瞬間に «空白» が出るため。
   いまの作りで 3600px 幅までは空白が出ない。
   ========================================================= */
.mq{
  position:relative; z-index:1;
  overflow:hidden;
  padding:clamp(26px,4vw,48px) 0;
  border-top:1px solid var(--c-line);
  border-bottom:1px solid var(--c-line);
  background:var(--c-white);
  user-select:none;
}
.mq--off{ background:var(--c-off); }
.mq__row{ display:flex; width:max-content; animation:mq-move 38s linear infinite; }
.mq--rev .mq__row{ animation-direction:reverse; animation-duration:46s; }

/* 触ると止まる。仕掛けに気づいた人だけが得をする、くらいの遊び */
.mq:hover .mq__row{ animation-play-state:paused; }

.mq__set{
  display:flex; align-items:center; flex:none;
  gap:clamp(30px,4vw,64px); padding-right:clamp(30px,4vw,64px);
}
/* 社名の筆文字。高さで揃える（幅は成り行き） */
.mq__set img{
  height:clamp(38px,4.4vw,58px); width:auto; flex:none; display:block;
}
.mq__set i{
  flex:none; width:clamp(7px,.85vw,11px); aspect-ratio:1; border-radius:50%;
  background:var(--c-red);
}
.mq__set i:nth-of-type(5n+1){ background:var(--c-a1); }
.mq__set i:nth-of-type(5n+2){ background:var(--c-a2); }
.mq__set i:nth-of-type(5n+3){ background:var(--c-a3); }
.mq__set i:nth-of-type(5n+4){ background:var(--c-a4); }
.mq__set i:nth-of-type(5n+5){ background:var(--c-a5); }

@keyframes mq-move{ to{ transform:translateX(-33.3333%); } }

@media (prefers-reduced-motion: reduce){
  .mq__row{ animation:none; }
}


/* SERVICE 下層ページ：セクションごとに事業の色へ切り替える。
   --accent の既定は深紅なので、指定のない場所は今までどおり */
#svc01{ --accent:var(--c-a1); }
#svc02{ --accent:var(--c-a2); }
#svc03{ --accent:var(--c-a3); }
#svc04{ --accent:var(--c-a4); }
#svc05{ --accent:var(--c-a5); }


/* =========================================================
   全幅のイメージ帯
   3DCG制作会社のサイトを調べると、共通していたのは
   「画像を大きく出し、周りに何も足さない」ことだった。
   白基調のこのサイトでは、暗い画像を全幅の帯にして
   リズムの区切りに使う。
   ※ここは実績の掲載枠ではない。作品名・制作クレジットは載せないこと。
   ========================================================= */
.showcase{
  position:relative; z-index:1;
  height:clamp(400px,64vh,760px);
  background:#0B1416;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
/* 帯の中で流す動画。画面外にあるあいだは読み込まない（main.js が面倒を見る） */
.showcase__bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  pointer-events:none;
}
/* 下側だけ暗く落として、文字を読めるようにする */
.showcase::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(6,14,16,.84) 0%, rgba(6,14,16,.30) 36%, rgba(6,14,16,0) 64%);
}
.showcase__cap{
  position:relative; z-index:2; width:100%; max-width:var(--max);
  margin-inline:auto; padding:0 var(--pad-x) clamp(32px,5vw,64px); color:#fff;
}
.showcase__en{ font-family:var(--f-en); font-size:12px; letter-spacing:.3em; color:var(--c-gold); }
.showcase__ttl{
  font-family:var(--f-serif); font-weight:500; letter-spacing:.06em; line-height:1.65;
  font-size:clamp(19px,2.3vw,32px); margin-top:14px;
}
.showcase__note{ font-size:13px; color:rgba(255,255,255,.66); margin-top:12px; letter-spacing:.06em; }

/* 明るい写真の帯。暗い «水» の帯と役割を分けている。
   ・水  → 白が続いたあとの «区切り»。文章を1行のせる
   ・こちら → 後半で一度 «ひらく» ための帯。文字は地名だけ */
.showcase--light{
  background:var(--c-off);
  height:clamp(320px,52vh,600px);
  align-items:flex-start;
}
/* 文字を載せないので、暗くするかぶせも要らない。写真をそのまま見せる */
.showcase--light::after{ content:none; }

/* 動きを減らす設定の端末では «再生しない»。要素は残すので、
   poster に指定した一枚絵がそのまま表示される（main.js 側で再生を止めている） */


@media (max-width:720px){
  .showcase{ height:clamp(330px,52vh,460px); }
  .showcase--light{ height:clamp(240px,38vh,340px); }
}