/* =========================================================
   株式会社 本気の左 — 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%)} }


/* =========================================================
   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;
}

/* 意味のかたまり。この単位より内側では折り返さない。
   （日本語は単語の区切りが無いため、指定しないと «意味がな／い。» のように折れる） */
.ph{ display:inline-block; }

/* =========================================================
   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; }
  /* スマホはオブジェクトを【上半分】、文字を【下半分】に分けて重ならないようにする */
  .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; }


/* 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){
  .phd__slot{ width:34vw; right:-6%; }
  .svc2__stage .slot{ width:72%; }
  .vtxt{ font-size:12px; }
}

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

/* ※ ヒーローの3DCGオブジェクト（.hero__slot / .hero__sat）は
   2026-09-05 に廃止しました。背景動画のみの構成です。 */

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

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



/* =========================================================
   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){
  /* PCと同じく «左寄せ» のまま。中央に寄せると印象が変わるため揃えている */
  .rep__photo{ width:190px; }
}


/* =========================================================
   流れる帯（マーキー）
   社名の筆文字を横に流し続ける帯。
   同じ内容を «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 側で再生を止めている） */


/* =========================================================
   WORKS ①：入口のボックス（横型 / 縦型）
   ---------------------------------------------------------
   トップと実績トップに置く «2つの扉»。
   カーソルを合わせる／キーボードで選ぶと、少し浮き上がる。
   行きすぎてから戻る --ease-pop を使い、«コトッ» と
   持ち上がる手触りにしている（遊び心はここで出す）。

   注意：浮き上がりは transform で行うため、
         スクロールで出てくる .rv（こちらも transform を使う）とは
         «別の要素» に分けている。同じ要素に重ねると打ち消し合う。
   ========================================================= */
.wkg{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2.6vw,34px);
  margin-top:clamp(40px,5vw,72px);
}
.wkg__item{
  --accent:var(--c-red);
  position:relative; display:flex; flex-direction:column; height:100%;
  padding:clamp(30px,3.4vw,46px) clamp(24px,3vw,42px) clamp(26px,3vw,38px);
  background:var(--c-white);
  border:1px solid var(--c-line);
  transition:transform .55s var(--ease-pop),
             box-shadow .55s var(--ease),
             border-color .4s var(--ease);
}
.wkg__item--y{ --accent:var(--c-a2); }   /* 横型：深紅（映像） */
.wkg__item--t{ --accent:var(--c-a3); }   /* 縦型：金（SNS） */

/* 上辺を左から塗る線。浮き上がりと同時に走る */
.wkg__item::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
}
.wkg__item:hover,
.wkg__item:focus-visible{
  transform:translateY(-10px);
  box-shadow:0 22px 48px rgba(26,26,25,.15);
  border-color:rgba(26,26,25,.04);
  outline:none;
}
.wkg__item:hover::before,
.wkg__item:focus-visible::before{ transform:none; }
/* キーボードで選んだときは «いまここ» が分かるよう枠も足す */
.wkg__item:focus-visible{ box-shadow:0 22px 48px rgba(26,26,25,.15), 0 0 0 2px var(--accent); }
/* 押した瞬間は少し沈める */
.wkg__item:active{ transform:translateY(-3px); transition-duration:.12s; }

/* 画面の «形» をそのまま図にする。16:9 と 9:16 の違いが一目で分かる */
.wkg__fig{ display:flex; align-items:flex-end; gap:9px; height:58px; }
.wkg__frame{
  border:2px solid var(--accent); border-radius:2px;
  transition:transform .55s var(--ease-pop);
}
.wkg__frame--y{ width:92px; aspect-ratio:16/9; }
.wkg__frame--t{ width:33px; aspect-ratio:9/16; }
.wkg__item:hover .wkg__frame,
.wkg__item:focus-visible .wkg__frame{ transform:translateY(-5px); }
.wkg__item:hover .wkg__frame--t:nth-child(2),
.wkg__item:focus-visible .wkg__frame--t:nth-child(2){ transition-delay:.05s; }
.wkg__item:hover .wkg__frame--t:nth-child(3),
.wkg__item:focus-visible .wkg__frame--t:nth-child(3){ transition-delay:.1s; }

.wkg__en{
  font-family:var(--f-en); font-size:clamp(22px,2.4vw,32px);
  letter-spacing:.12em; line-height:1.3; margin-top:clamp(22px,2.4vw,32px);
  transition:color .4s var(--ease);
}
.wkg__item:hover .wkg__en,
.wkg__item:focus-visible .wkg__en{ color:var(--accent); }
.wkg__ja{
  font-family:var(--f-serif); font-weight:500;
  font-size:clamp(17px,1.6vw,21px); letter-spacing:.1em; margin-top:8px;
}
.wkg__txt{
  margin-top:14px; color:var(--c-mute);
  font-size:14px; line-height:2; flex:1 1 auto;
}
.wkg__meta{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-top:clamp(20px,2.4vw,30px);
  padding-top:16px; border-top:1px solid var(--c-line);
}
.wkg__count{ font-size:12px; letter-spacing:.14em; color:var(--c-mute); }
.wkg__arw{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-en); font-size:12px; letter-spacing:.18em; color:var(--accent);
}
.wkg__arw::after{
  content:""; width:24px; height:1px; background:currentColor;
  transition:width .5s var(--ease-pop);
}
.wkg__item:hover .wkg__arw::after,
.wkg__item:focus-visible .wkg__arw::after{ width:40px; }

@media (max-width:720px){
  .wkg{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .wkg__item, .wkg__frame, .wkg__arw::after{ transition:none; }
  .wkg__item:hover, .wkg__item:focus-visible{ transform:none; }
}


/* =========================================================
   WORKS ②：作品の一覧（サムネイル → YouTube）
   ---------------------------------------------------------
   横型は 16:9 を3列、縦型は 9:16 を6列（リールの «帯» に見せる）。
   未公開の枠は破線の «準備中» にして、本数の予定が伝わるようにしている。
   ========================================================= */
.wkv{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3vw,44px) clamp(20px,2.6vw,36px);
  margin-top:clamp(40px,5vw,72px);
}
.wkv--t{ grid-template-columns:repeat(6,1fr); gap:clamp(18px,2vw,26px); }

.wkv__card{ display:block; }
.wkv__thumb{
  position:relative; overflow:hidden; aspect-ratio:16/9;
  background:var(--c-black); border:1px solid var(--c-line);
}
.wkv--t .wkv__thumb{ aspect-ratio:9/16; }
.wkv__thumb img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease);
}
a.wkv__card:hover .wkv__thumb img,
a.wkv__card:focus-visible .wkv__thumb img{ transform:scale(1.055); }
a.wkv__card:focus-visible .wkv__thumb{ outline:2px solid var(--c-red); outline-offset:3px; }
a.wkv__card:focus{ outline:none; }

/* 再生ボタン。YouTubeに飛ぶことが «見た瞬間に» 分かるように置く */
.wkv__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:clamp(52px,5vw,70px); aspect-ratio:1/1; border-radius:50%;
  background:rgba(255,255,255,.88);
  display:grid; place-items:center;
  transition:transform .5s var(--ease-pop), background .4s var(--ease);
}
.wkv__play::before{
  content:""; margin-left:4px;
  border-left:15px solid var(--c-ink);
  border-top:9px solid transparent; border-bottom:9px solid transparent;
}
a.wkv__card:hover .wkv__play,
a.wkv__card:focus-visible .wkv__play{ transform:translate(-50%,-50%) scale(1.14); background:#fff; }

.wkv__cat{
  position:absolute; left:0; top:0; z-index:1;
  background:var(--c-ink); color:var(--c-white);
  font-family:var(--f-en); font-size:11px; letter-spacing:.18em;
  padding:7px 13px;
}
.wkv__client{ margin-top:16px; font-size:12px; letter-spacing:.1em; color:var(--c-mute); }
.wkv__ttl{
  font-family:var(--f-serif); font-weight:500;
  font-size:clamp(15px,1.3vw,18px); letter-spacing:.05em;
  margin-top:7px; line-height:1.8;
}
.wkv__ext{
  display:inline-flex; align-items:center; gap:9px; margin-top:12px;
  font-family:var(--f-en); font-size:11px; letter-spacing:.16em; color:var(--c-red);
}
.wkv__ext::after{
  content:""; width:20px; height:1px; background:currentColor;
  transition:width .5s var(--ease-pop);
}
a.wkv__card:hover .wkv__ext::after,
a.wkv__card:focus-visible .wkv__ext::after{ width:34px; }

/* 準備中の枠 */
.wkv__card--soon .wkv__thumb{
  background:var(--c-off);
  border:1px dashed rgba(26,26,25,.22);
  display:grid; place-items:center;
}
.wkv__card--soon .wkv__num{
  font-family:var(--f-en); font-size:clamp(20px,2.4vw,30px);
  letter-spacing:.14em; color:rgba(26,26,25,.22); line-height:1;
}
.wkv__card--soon .wkv__client{
  font-family:var(--f-en); font-size:11px; letter-spacing:.2em;
  color:rgba(107,102,99,.8);
}
.wkv__card--soon .wkv__ttl{ color:var(--c-mute); }

/* 一覧の下に置く補足 */
.wkv__note{
  margin-top:clamp(32px,4vw,52px); font-size:13px;
  color:var(--c-mute); line-height:2.1;
}

@media (max-width:960px){
  .wkv{ grid-template-columns:repeat(2,1fr); }
  .wkv--t{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px){
  .wkv{ grid-template-columns:1fr; }
  .wkv--t{ grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion:reduce){
  .wkv__thumb img, .wkv__play, .wkv__ext::after{ transition:none; }
}


/* 帯の動画も、ヒーローと同じ理由で «横幅に合わせた高さ» にする。
   判定は画面幅ではなく «縦横比» で行う。
   縦長の画面（スマホ／タブレット縦持ち）はすべて同じ問題を起こすため。

   注意①：高さを固定したまま aspect-ratio を足すと、
          こんどは «高さ×比率» で «幅» が決まり、画面からはみ出す。
          必ず height:auto とセットで指定すること。
   注意②：この指定は、上の .showcase / .showcase--light より
          «後ろ» に置くこと（同じ強さなので、後ろが勝つ）。 */
@media (max-aspect-ratio: 1/1){
  .showcase,
  .showcase--light{ height:auto; aspect-ratio:16/9; }
}


/* =========================================================
   縦長の画面での、ヒーロー動画の置き方
   ---------------------------------------------------------
   動画は横長（16:9）、画面は縦長。
   そのまま画面いっぱいに広げると «高さに合わせて» 拡大されるため、
   左右が大きく切れて中央しか映らない。
   （iPhone 375×812 で約7割、iPad 768×1024 でも約6割が画面外）

   そこで «横幅に合わせて» 置き、上下を余白にする。
   判定は画面幅ではなく «縦横比» で行う。幅で切ると
   タブレットの縦持ちが漏れるため。

   ※ ファイルの最後に置いている。ヒーローの指定より後ろでないと効かない。
   ========================================================= */
@media (max-aspect-ratio: 4/5){
  /* PCと «同じ見え方» にする＝文字を動画の «上» にのせる。
     ただし縦長の画面で動画を全画面に広げると左右が切れるため、
     動画は横幅に合わせた帯（16:9）にし、その帯の中に文字を重ねる。
     ヒーローの高さは、帯の高さ＋ヘッダー分だけにする。 */
  .hero{
    min-height:auto;
    padding-top:66px;              /* ヘッダーの高さぶん */
    align-items:stretch;
  }

  /* 帯として «流れの中» に置く。ここがヒーローの高さを決める。
     4:3 まで縦に広げている。16:9 のままだと帯が薄く、動画が小さく見えるため。
     そのぶん左右は約25%切れるが、被写体は中央にあるので成立している。
     これ以上 «縦» にすると、切れる量が急に増える */
  .hero__bg{
    position:relative; inset:auto;
    width:100%; height:auto;
    aspect-ratio:4/3;
  }

  /* 文字は帯の上に重ねる（PCと同じ関係） */
  .hero__inner{
    position:absolute; left:0; right:0;
    top:66px; bottom:0;
    display:flex; flex-direction:column; justify-content:center;
    padding-top:0; padding-bottom:0;
  }
  /* 帯の中に収めるため、PCより一回り小さくする。
     上下に «逃げ» を残さないと、動画の縁に文字が貼りつく */
  .hero__meta{ margin-bottom:3.2vw; font-size:9.5px; letter-spacing:.18em; }
  .hero__meta::before{ width:22px; }
  .hero__ttl img{ width:min(50vw,300px); }   /* 画面のおよそ半分 */
  .hero__sub{
    margin-top:3.2vw; font-size:11px; letter-spacing:.06em;
    /* 動画の上にのるので、白いにじみを濃くして読ませる */
    text-shadow:0 0 8px rgba(255,255,255,1), 0 0 18px rgba(255,255,255,.95),
                0 0 30px rgba(255,255,255,.8);
  }
  .hero__meta{
    text-shadow:0 0 8px rgba(255,255,255,1), 0 0 18px rgba(255,255,255,.95);
  }

  /* 帯の «下側» だけ白く落として、次のセクションへつなぐ。
     文字は白い縁を持っているので、かぶせは薄くてよい */
  .hero::after{
    top:66px;
    background:linear-gradient(100deg,
      rgba(255,255,255,.72) 0%, rgba(255,255,255,.42) 34%,
      rgba(255,255,255,.12) 60%, rgba(255,255,255,0) 82%);
  }

  /* 動きを減らす設定のときの一枚絵も、同じ考え方で横幅に合わせる */
  .hero{ background-size:100% auto; background-position:center 66px; }

  .hero__scroll{ display:none; }
}