/* =========================================================
   ENOSHI — blue editorial
   参照: LATEXX longboards / Coup de Coeur Francophone /
         Louis Vuitton editorial (annmelq)
   白 × コバルト1色 × モノクロ写真(hoverで着彩) ×
   極太黒キャップス × 筆記体アクセント × 罫線エディトリアル
   ========================================================= */

:root{
  --paper:  #FFFFFF;
  --ink:    #111114;
  --blue:   #2B3FE8;
  --blue-lt:#6D7BFF;   /* 暗地用の明るいコバルト */
  --mute:   #77777E;
  --line:   rgba(17,17,20,.18);

  --pad:    clamp(20px, 5vw, 64px);

  --ff-head:   "Archivo Black", "Noto Sans JP", sans-serif;
  --ff-cond:   "Oswald", "Noto Sans JP", sans-serif;
  --ff-script: "Kaushan Script", cursive;
  --ff-jp:     "Noto Sans JP", sans-serif;
  --ease:      cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:hidden;
  overflow-x:clip;   /* リボン等の全幅装飾を横スクロールにしない */
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-jp);
  font-size:13px;
  line-height:1.9;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }

.wrap{ width:100%; max-width:1360px; margin-inline:auto; padding-inline:var(--pad); }

/* 小さな青キャップスのセクションラベル（LATEXX式・中央） */
.seclabel{
  margin:0 0 clamp(30px,4vw,52px);
  text-align:center;
  font-family:var(--ff-cond);
  font-weight:600;
  font-size:12px;
  letter-spacing:.44em;
  text-indent:.44em;
  text-transform:uppercase;
  color:var(--blue);
}

/* 画像は常時カラー */
.bw img{ transition:transform 1s var(--ease); }

/* =========================================================
   再生ボタン（サムネはクリックでYouTube再生）
   ========================================================= */
a.play{ cursor:pointer; }
a.card__media.play{ display:block; }
/* 丸い再生ボタンと暗幕は「サムネイル」のリンクだけに出す。
   `a.play` で書くと「再生する →」のようなテキストリンクにも付いてしまい、
   位置の基準になる親が無いぶん、遠い祖先の中央――ちょうど映像と文章の
   境目あたり――に青い丸が浮く。 */
a.card__media.play::before{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  background:rgba(17,17,20,0);
  transition:background .3s var(--ease);
}
a.card__media.play::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  z-index:2;
  width:clamp(46px,5vw,64px);
  aspect-ratio:1;
  margin:0;
  transform:translate(-50%,-50%) scale(.86);
  border-radius:50%;
  background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E") center/54% no-repeat;
  box-shadow:0 6px 26px rgba(17,17,20,.34);
  opacity:0;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
a.card__media.play:hover::before,
a.card__media.play:focus-visible::before{ background:rgba(17,17,20,.26); }
a.card__media.play:hover::after,
a.card__media.play:focus-visible::after{ opacity:1; transform:translate(-50%,-50%) scale(1); }
a.play:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

/* タッチ端末は常時うっすら表示（ホバーが無いため） */
@media (hover:none){
  a.card__media.play::after{ opacity:.9; transform:translate(-50%,-50%) scale(.9); }
}

/* =========================================================
   ライトボックス（YouTube 埋め込み再生）
   ========================================================= */
/* 開いた瞬間に確実に見える状態。opacity のアニメーションは
   一切かけない（描画が止まる環境で不可視のまま操作を塞ぐため）。
   動きは中身のスライドインだけで付ける。 */
.lb{
  position:fixed; inset:0; z-index:99;
  display:grid; place-items:center;
  padding:clamp(16px,4vw,48px);
  background:rgba(10,10,14,.92);
}
.lb[hidden]{ display:none; }
.lb__inner{ animation:lbIn .32s var(--ease) both; }
@keyframes lbIn{ from{ transform:translateY(14px); } to{ transform:none; } }
@media (prefers-reduced-motion: reduce){ .lb__inner{ animation:none; } }

.lb__inner{ width:min(1180px, 100%); }
.lb__frame{
  position:relative;
  aspect-ratio:16/9;
  background:#000;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}
.lb__frame iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
.lb__cap{
  margin:14px 0 0;
  font-family:var(--ff-cond);
  font-weight:500;
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.lb__close{
  position:absolute;
  top:clamp(12px,2.6vw,26px); right:clamp(12px,2.6vw,26px);
  width:42px; height:42px;
  display:grid; place-items:center;
  background:transparent;
  border:1px solid rgba(255,255,255,.45);
  border-radius:50%;
  color:#fff;
  font-size:15px;
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.lb__close:hover{ background:#fff; color:var(--ink); }

/* =========================================================
   HEADER
   ========================================================= */
.hd{ padding-top:20px; }

.hd__row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
}
.hd__tag{
  font-family:var(--ff-cond);
  font-weight:500;
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--mute);
}
.hd__logo{
  font-family:var(--ff-head);
  font-size:clamp(17px,2vw,21px);
  letter-spacing:.5em;
  text-indent:.5em;
  text-align:center;
  /* ホームへ戻るリンク。下線は出さず、色だけで反応させる
     （動かすと隣の要素まで再描画されてちらつく） */
  color:inherit;
  text-decoration:none;
  transition:color .25s var(--ease);
}
.hd__logo:hover{ color:var(--blue); }
.hd__logo:focus-visible{ outline:2px solid var(--blue); outline-offset:4px; border-radius:3px; }
.hd__logo b{ color:var(--blue); transition:color .25s var(--ease); }
.hd__logo:hover b{ color:var(--ink); }

/* CDCの日付ブロック（上下太罫） */
.hd__date{
  justify-self:end;
  font-family:var(--ff-cond);
  font-weight:600;
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1.6;
  border-block:3px solid var(--ink);
  padding:4px 2px;
  text-align:right;
}

/* CDCのタブナビ（上に太罫が立つ） */
.hd nav ul{
  display:flex; flex-wrap:wrap;
  justify-content:center;
  gap:0 clamp(16px,3vw,38px);
  margin-top:18px;
  border-bottom:1px solid var(--line);
}
.hd nav a{
  display:block;
  padding:9px 2px 13px;
  border-top:3px solid transparent;
  font-family:var(--ff-cond);
  font-weight:500;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.hd nav a:hover{ color:var(--blue); border-top-color:var(--ink); }

/* =========================================================
   HERO（フッターのカラー版: 暗地 × 作品スライドショー ×
         青筆記体。作品がフェードで入れ替わる）
   ========================================================= */
.hero{
  position:relative;
  background:#141418;
  color:#fff;
  overflow:hidden;
}

/* 右側にカラーの作品スライド。左は暗地に溶かす */
.hero__slides{
  position:absolute;
  top:0; right:0; bottom:0;
  width:62%;
  pointer-events:none;
  /* マスクは容器に1枚だけ。各動画に掛けると
     8枚ぶんのマスク付きレイヤーが常時合成されて、
     カーソル移動のたびに再描画が走りチラつく。 */
  -webkit-mask-image:linear-gradient(to left, #000 56%, transparent 100%);
          mask-image:linear-gradient(to left, #000 56%, transparent 100%);
}
.hero__slides img,
.hero__slides video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  /* クロスフェードは linear で。ease を掛けると2枚の不透明度の和が
     途中でへこみ、切り替わりの瞬間に背景が透けて暗く沈む。 */
  transition:opacity 1.2s linear;
  /* 表示中・消えていく途中・次に出す1枚だけを合成する */
  visibility:hidden;
}
.hero__slides img.is-on,
.hero__slides video.is-on,
.hero__slides video.is-out,
.hero__slides video.is-warm{ visibility:visible; }
.hero__slides img.is-on,
.hero__slides video.is-on{ opacity:1; }
/* 次に出す1枚。見えないまま先に回しておくのでフェード開始と同時に動いている */
.hero__slides video.is-warm{ opacity:0; }

.hero > .wrap{
  position:relative; z-index:2;
  padding-block:clamp(54px,7.5vw,104px) clamp(60px,7.5vw,104px);
}

.hero__kicker{
  margin:0 0 6px;
  font-family:var(--ff-cond);
  font-weight:500;
  font-size:11px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--blue-lt);
}

.hero__wrap{ position:relative; width:fit-content; max-width:100%; }

.hero__t{
  margin:0 0 0 -.03em;
  font-family:var(--ff-head);
  font-size:clamp(56px, 13.5vw, 178px);
  line-height:.95;
  letter-spacing:.002em;
  text-transform:uppercase;
  color:#fff;
  /* 動く映像の上で大きなぼかし影を出すと毎フレーム再計算されて重い。
     影は控えめにし、文字を独立レイヤーへ固定して再描画を切り離す。 */
  text-shadow:0 1px 8px rgba(0,0,0,.4);
  transform:translateZ(0);
}

/* タイトル右肩に筆記体（LATEXXの署名） */
.hero__script{
  position:absolute;
  right:-.5em; top:-.55em;
  font-family:var(--ff-script);
  font-size:clamp(24px, 3.4vw, 50px);
  line-height:1;
  color:var(--blue-lt);
  transform:rotate(-8deg);
  white-space:nowrap;
  pointer-events:none;
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}

.hero__tag{
  margin:clamp(18px,2.6vw,30px) 0 0;
  font-family:var(--ff-cond);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:#fff;
}
.hero__jp{
  margin:8px 0 0;
  font-size:13px;
  letter-spacing:.08em;
  color:rgba(255,255,255,.84);
}

/* 罫線で区切ったラベル列 */
.hero__labels{
  display:flex; flex-wrap:wrap; align-items:center;
  margin-top:clamp(22px,3vw,34px);
}
.hero__labels span{
  font-family:var(--ff-cond);
  font-weight:500;
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  padding:2px clamp(14px,2.4vw,26px);
  border-left:1px solid rgba(255,255,255,.24);
}
.hero__labels span:first-child{ border-left:0; padding-left:0; }

.hero__pill{
  display:inline-flex; align-items:center; gap:8px;
  margin-left:clamp(14px,2.4vw,26px);
  background:var(--blue);
  color:#fff;
  font-family:var(--ff-cond);
  font-weight:500;
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  padding:8px 18px;
  border-radius:999px;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.hero__pill:hover{ background:#fff; color:var(--blue); }

/* 再生中の作品名（右下） */
.hero__np{
  position:absolute; z-index:2;
  right:var(--pad); bottom:16px;
  margin:0;
  font-family:var(--ff-cond);
  font-weight:500;
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
  text-shadow:0 1px 10px rgba(0,0,0,.6);
}

/* =========================================================
   RAIL — 横スクロールのカード列
   （最近制作した動画 / おすすめの動画）
   ========================================================= */
.rail{ padding-top:clamp(46px,6vw,84px); }

.rail__head{
  display:flex; align-items:baseline; gap:14px;
  border-bottom:1px solid var(--line);
  padding-bottom:11px;
  margin-bottom:clamp(20px,2.6vw,32px);
}
.rail__head h2{
  margin:0;
  font-family:var(--ff-head);
  font-size:clamp(20px,2.8vw,34px);
  text-transform:uppercase;
  line-height:1;
}
.rail__jp{
  font-family:var(--ff-cond);
  font-weight:500;
  font-size:11.5px;
  letter-spacing:.2em;
  color:var(--mute);
}
.rail__nav{ margin-left:auto; display:flex; gap:8px; }
.rail__btn{
  width:34px; height:34px;
  display:grid; place-items:center;
  background:transparent;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--ink);
  font-size:13px;
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), opacity .25s var(--ease);
}
.rail__btn:hover:not(:disabled){ background:var(--blue); border-color:var(--blue); color:#fff; }
.rail__btn:disabled{ opacity:.28; cursor:default; }

/* 右端まで抜けさせて「まだ続く」ことを見せる */
.rail__track{
  display:flex;
  gap:clamp(14px,1.8vw,24px);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  padding:4px var(--pad) 8px 0;
  margin-right:calc(var(--pad) * -1);
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
  -webkit-overflow-scrolling:touch;
}
.rail__track::-webkit-scrollbar{ height:5px; }
.rail__track::-webkit-scrollbar-track{ background:transparent; }
.rail__track::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; }
.rail__track:hover::-webkit-scrollbar-thumb{ background:var(--blue); }

/* カード */
.rcard{
  flex:0 0 clamp(252px, 27vw, 344px);
  scroll-snap-align:start;
  margin:0;
}
/* カード自身は動かさない。動かすと浮いた拍子にカーソルが外れ、
   ホバーが入り切りを繰り返してチカチカする。
   判定は .rcard（不動）に置き、動くのは中の画像だけにする。 */
.rcard .card__media{
  aspect-ratio:16/9;
  box-shadow:0 0 0 rgba(17,17,20,0);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.rcard:hover .card__media{
  transform:translateY(-6px);
  box-shadow:0 14px 30px rgba(17,17,20,.18);
}
.rcard:hover .card__media img{ transform:scale(1.06); }

/* 左上の日付／PICK UP バッジ */
.rcard__badge{
  position:absolute;
  left:0; top:0;
  z-index:2;
  background:var(--ink);
  color:#fff;
  font-family:var(--ff-cond);
  font-weight:500;
  font-size:9.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding:5px 11px;
}
.rcard__badge--pick{ background:var(--blue); }

.rcard__body{ padding-top:11px; }
.rcard__t{
  margin:0;
  font-size:13.5px;
  font-weight:700;
  line-height:1.5;
}
.rcard__by{
  margin:4px 0 0;
  font-size:11px;
  color:var(--mute);
  line-height:1.6;
}
.rcard__role{
  margin:7px 0 0;
  font-family:var(--ff-cond);
  font-weight:500;
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--blue);
}

@media (prefers-reduced-motion: reduce){
  .rail__track{ scroll-behavior:auto; }
  .rcard, .rcard:hover{ transform:none; }
}

@media (max-width: 640px){
  .rail__nav{ display:none; }          /* スマホは指でスワイプ */
  .rcard{ flex-basis:78vw; }
}

/* =========================================================
   SELECTED WORKS（cloaplanetaria: 全幅スタック）
   ========================================================= */
.works{
  position:relative;
  border-top:1px solid var(--line);
  padding-top:clamp(46px,6vw,84px);
}

.card__media{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#EDEDEF;
}
.card__media img{ width:100%; height:100%; object-fit:cover; }

/* 写真に食い込む青バー（CDCのSPECTACLE） */
.card__bar{
  position:absolute;
  left:0; bottom:0;
  z-index:2;
  background:var(--blue);
  color:#fff;
  font-family:var(--ff-cond);
  font-weight:500;
  font-size:10px;
  letter-spacing:.26em;
  text-transform:uppercase;
  padding:6px 14px;
}

/* Selected Works: 3本を大きく、左右交互に配置。
   映像の隣に「こだわった点」を置いて、作品の説明を読ませる。 */
.works__grid{ display:block; }

.wk{
  position:relative;
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:clamp(24px,3.6vw,60px);
  align-items:center;
  margin:0 0 clamp(64px,8vw,120px);
}
/* 映像を画面端まで振り切って、左右交互の振り幅を大きくする */
.wk__fig{ margin-left:calc(var(--pad) * -1); }
.wk:nth-child(even){ grid-template-columns:1fr 1.5fr; }
.wk:nth-child(even) .wk__fig{
  margin-left:0;
  margin-right:calc(var(--pad) * -1);
}
/* 文字側は内側へ寄せて、映像との対比をつける */
.wk__note{ padding-inline:clamp(0px,1.5vw,26px); }
/* 最後の1本は下マージンを持たない。次のセクションの上余白と二重になる。 */
.works .wk:last-child{ margin-bottom:0; }
.wk:nth-child(even) .wk__fig{ order:2; }
.wk:nth-child(even) .wk__note{ order:1; }

.wk__fig{ position:relative; }
.wk:hover .card__media img{ transform:scale(1.04); }
.wk .card__media{
  box-shadow:0 6px 20px rgba(17,17,20,.12);
  transition:box-shadow .45s var(--ease);
}
.wk:hover .card__media{ box-shadow:0 26px 52px rgba(17,17,20,.26); }

/* 通し番号を大きく添える */
.wk__no{
  position:absolute;
  top:-.55em; left:-.12em;
  z-index:3;
  font-family:var(--ff-head);
  font-size:clamp(56px,7vw,116px);
  line-height:1;
  color:var(--blue);
  opacity:.16;
  pointer-events:none;
}
.wk:nth-child(even) .wk__no{ left:auto; right:-.12em; }

/* 右（または左）のコメント欄 */
.wk__note{ min-width:0; }
.wk__role{
  font-family:var(--ff-cond);
  font-weight:600;
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--blue);
}
.wk__note .wk__t{
  margin:8px 0 0;
  font-size:clamp(19px,2.2vw,27px);
  font-weight:700;
  line-height:1.4;
  letter-spacing:.005em;
}
.wk__client{
  margin:8px 0 0;
  font-size:12px;
  color:var(--mute);
  line-height:1.7;
}
.wk__point{
  margin:clamp(16px,2vw,24px) 0 0;
  padding-top:clamp(14px,1.8vw,20px);
  border-top:1px solid var(--line);
}
.wk__point dt{
  font-family:var(--ff-cond);
  font-weight:600;
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:6px;
}
.wk__point dd{
  margin:0;
  font-size:13px;
  line-height:2;
  color:#333;
}
.wk__tags{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:clamp(14px,1.8vw,20px);
}
.wk__tags span{
  border:1px solid var(--line);
  padding:4px 11px;
  font-family:var(--ff-cond);
  font-weight:500;
  font-size:10.5px;
  letter-spacing:.12em;
  color:var(--mute);
}
.wk__watch{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:clamp(16px,2vw,24px);
  font-family:var(--ff-cond);
  font-weight:600;
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--blue);
  border-bottom:1px solid rgba(43,63,232,.4);
  padding-bottom:3px;
  transition:gap .3s var(--ease), opacity .3s var(--ease);
}
.wk__watch:hover{ gap:14px; opacity:.65; }

.wk__meta{
  display:flex; align-items:baseline; gap:16px;
  margin-top:14px;
  padding-bottom:9px;
  border-bottom:1px solid var(--line);
  font-family:var(--ff-cond);
  font-weight:500;
  font-size:11.5px;
  letter-spacing:.12em;
  color:var(--mute);
}
.wk__meta .picks{ margin:0 0 0 auto; }

.wk__t{
  margin:11px 0 0;
  font-weight:700;
  font-size:16.5px;
  line-height:1.5;
  letter-spacing:.01em;
}

/* ピック列（CDCのギターピック） */
.picks{ display:flex; gap:5px; }
.picks svg{ width:11px; height:13px; fill:var(--ink); opacity:.8; }

/* =========================================================
   ARCHIVE（LV: 黒太罫見出し + 小サムネ列 + 青リボン）
   ========================================================= */
.arch{
  position:relative;
  padding-top:clamp(40px,5vw,72px);
}

/* 画面幅ちょうどに敷く。vw で余分に広げると viewBox からはみ出して
   右端が直線で切れる。 */
.ribbon{
  position:absolute;
  z-index:0;
  top:clamp(10px,2vw,30px);
  left:50%;
  /* 100vw はスクロールバー幅を含むため右にはみ出す。
     実際の表示幅（documentElement の幅）を使う。 */
  width:var(--vw, 100vw);
  transform:translateX(-50%);
  pointer-events:none;
  overflow:visible;
}
.ribbon path{
  fill:none;
  stroke:var(--blue);
  stroke-width:26;
  stroke-linecap:round;
}

.arch__head{
  position:relative; z-index:2;
  display:flex; align-items:baseline; gap:18px;
  margin:0 0 clamp(28px,3.6vw,44px);
  border-bottom:3px solid var(--ink);
  padding-bottom:12px;
  background:var(--paper);
}
.arch__head h2{
  margin:0;
  font-family:var(--ff-head);
  font-size:clamp(24px,3.6vw,44px);
  text-transform:uppercase;
  letter-spacing:.01em;
}
.arch__head .n{
  margin-left:auto;
  font-family:var(--ff-cond);
  font-weight:500;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--mute);
}

.grid2{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(26px,3.4vw,44px) clamp(18px,2.6vw,32px);
}
/* 一覧はコンパクトに3列 */
.grid3{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px,2.4vw,30px) clamp(14px,1.8vw,22px);
}
.grid3 .thumb b{ font-size:12.5px; margin-top:9px; }
.grid3 .thumb small{ font-size:10.5px; }
.thumb{ margin:0; }
.thumb:hover .card__media img{ transform:scale(1.035); }
.thumb b{
  display:block;
  margin-top:11px;
  font-size:13.5px;
  font-weight:700;
  line-height:1.5;
}
.thumb small{
  display:block;
  font-size:11.5px;
  color:var(--mute);
}

/* 青い矩形ボタン（CDCの CHERCHER / +AJOUTER） */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:clamp(28px,3.6vw,42px);
  background:var(--blue);
  color:#fff;
  font-family:var(--ff-cond);
  font-weight:500;
  font-size:11.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding:11px 20px;
  transition:background .3s var(--ease);
}
.btn:hover{ background:var(--ink); }
.btn .cir{
  width:16px; height:16px;
  border:1.5px solid #fff;
  border-radius:50%;
  display:grid; place-items:center;
  font-size:8px;
}

/* =========================================================
   PROFILE（LV: 青ブロックを背負ったモノクロ図版）
   ========================================================= */
.pf{
  padding-top:clamp(56px,8vw,110px);
}
.pf__grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,5vw,72px);
  align-items:center;
}
.pf__h{
  margin:0 0 4px;
  font-family:var(--ff-head);
  font-size:clamp(34px,4.8vw,58px);
  text-transform:uppercase;
  line-height:1.02;
}
.pf__h b{ color:var(--blue); }
.pf__role{
  margin:0 0 22px;
  font-family:var(--ff-cond);
  font-weight:500;
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--mute);
}
.pf p.t{
  margin:0 0 15px;
  font-size:13px;
  line-height:2.05;
  max-width:33em;
}
.pf__links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.pf__links .btn{ margin-top:0; padding:8px 15px; font-size:10.5px; }

.pf__fig{ position:relative; }
/* 静止画を置く場合の青ブロック（デッキを入れた場合は下で無効化） */
.pf__fig::before{
  content:"";
  position:absolute;
  top:-18px; right:-18px;
  width:58%; height:58%;
  background:var(--blue);
}
.pf__fig::after{
  content:"";
  position:absolute;
  top:-16px; left:-16px;
  width:26%; height:26%;
  background:var(--blue);
  opacity:.24;
}
/* プロフィール写真（正方形）。青ブロックを背後に敷く */
.pf__fig--photo{ max-width:420px; margin-inline:auto; }
.pf__fig--photo::before{
  top:-16px; right:-16px;
  width:62%; height:62%;
}
.pf__fig--photo::after{
  top:auto; bottom:-14px; left:-14px;
  width:30%; height:30%;
}
.pf__photo{
  position:relative; z-index:1;
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border:1px solid var(--line);
}
.pf__fig .card__media{ position:relative; z-index:1; aspect-ratio:4/3; }
.pf__cap{
  position:relative; z-index:1;
  margin-top:12px;
  font-family:var(--ff-cond);
  font-weight:500;
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mute);
}

/* =========================================================
   CONTACT（コバルトの塗りパネル: CDC/LVの青ブロック）
   ========================================================= */
.ct{
  margin-top:clamp(64px,9vw,130px);
  background:var(--blue);
  color:#fff;
}
.ct .wrap{ padding-block:clamp(52px,7.5vw,96px); }

.ct__h{
  margin:0;
  text-align:center;
  font-family:var(--ff-head);
  font-size:clamp(38px,7vw,84px);
  text-transform:uppercase;
  line-height:1;
}
.ct__sub{
  margin:12px 0 clamp(34px,4.6vw,56px);
  text-align:center;
  font-family:var(--ff-cond);
  font-weight:500;
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
}

.ct__grid{
  max-width:860px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px,3.4vw,52px);
}
.ct h3{
  margin:0 0 12px;
  font-family:var(--ff-cond);
  font-weight:600;
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.42);
  padding-bottom:9px;
}
.ct li{
  position:relative;
  padding-left:15px;
  font-size:12.5px;
  line-height:2;
  color:rgba(255,255,255,.94);
}
.ct li::before{
  content:"";
  position:absolute; left:0; top:.9em;
  width:6px; height:6px;
  background:#fff;
}
.ct p{ margin:10px 0 0; font-size:12.5px; line-height:2; color:rgba(255,255,255,.94); }

.ct__mail{
  display:flex; width:fit-content;
  align-items:center; gap:12px;
  margin:clamp(34px,4.6vw,52px) auto 0;
  background:#fff;
  color:var(--blue);
  font-family:var(--ff-cond);
  font-weight:600;
  font-size:clamp(13px,1.7vw,17px);
  letter-spacing:.08em;
  padding:14px 30px;
  transition:transform .25s var(--ease);
}
.ct__mail:hover{ box-shadow:0 12px 26px rgba(0,0,0,.22); }
.ct__mail .cir{
  width:18px; height:18px;
  border:1.5px solid var(--blue);
  border-radius:50%;
  display:grid; place-items:center;
  font-size:9px;
}

/* =========================================================
   FOOTER（LATEXX: 暗地 × モノクロ写真 × 筆記体 Thank you）
   ========================================================= */
.ft{
  position:relative;
  background:#141418;
  color:#fff;
  overflow:hidden;
}
.ft__bg{
  position:absolute;
  top:0; right:0; bottom:0;
  width:52%;
  background-size:cover;
  background-position:center;
  opacity:.30;
  -webkit-mask-image:linear-gradient(to left, #000 55%, transparent 100%);
          mask-image:linear-gradient(to left, #000 55%, transparent 100%);
}
.ft .wrap{ position:relative; z-index:1; padding-block:clamp(44px,6vw,72px) 26px; }

.ft__cols{
  display:flex; flex-wrap:wrap;
  gap:28px clamp(36px,6vw,84px);
}
.ft__cols h4{
  margin:0 0 10px;
  font-family:var(--ff-cond);
  font-weight:600;
  font-size:10px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.ft__cols a{
  display:block;
  font-size:11.5px;
  line-height:2.1;
  color:rgba(255,255,255,.88);
  transition:color .25s var(--ease);
}
.ft__cols a:hover{ color:var(--blue-lt); }

.ft__ty{
  margin-left:auto;
  align-self:center;
  font-family:var(--ff-script);
  font-size:clamp(44px,6vw,74px);
  line-height:1.2;
  color:var(--blue-lt);
  transform:rotate(-6deg);
}

.ft__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px;
  margin-top:clamp(34px,4.6vw,52px);
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.18);
  font-family:var(--ff-cond);
  font-weight:500;
  font-size:10px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.ft__bottom a:hover{ color:#fff; }

/* =========================================================
   REVEAL
   ========================================================= */
.reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:calc(var(--d,0) * 80ms);
}
.reveal.is-in{ opacity:1; transform:none; }
.no-js .reveal{ opacity:1; transform:none; transition:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .bw img, .card__media img{ transition:none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px){
  .pf__grid{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  /* 長い作品名で見切れないよう、幅を取って末尾を省略 */
  .hero__np{
    left:var(--pad); right:var(--pad);
    text-align:right;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  /* スライドを全面に敷き、上に暗幕をかけて文字を立てる */
  .hero__slides{ width:100%; }
  .hero__slides img{ -webkit-mask-image:none; mask-image:none; }
  .hero__slides::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(to right,
      rgba(20,20,24,.94) 0%, rgba(20,20,24,.72) 55%, rgba(20,20,24,.45) 100%);
  }
}
@media (max-width: 640px){
  .hd__row{ grid-template-columns:1fr; justify-items:center; row-gap:8px; }
  .hd__tag, .hd__date{ display:none; }
  .hd nav ul{ gap:0 14px; }
  .hd nav a{ font-size:11px; letter-spacing:.14em; }
  .hero__script{ position:static; display:inline-block; margin-top:10px; transform:rotate(-6deg); }
  .grid2{ grid-template-columns:1fr; }
  .wk__meta{ flex-wrap:wrap; gap:8px 14px; }
  .ct__grid{ grid-template-columns:1fr; }
  .ft__ty{ margin:8px auto 0; }
  .ft__bg{ width:100%; opacity:.14; -webkit-mask-image:none; mask-image:none; }
}

/* =========================================================
   スマホ最適化
   ========================================================= */
@media (hover:none){
  /* デッキは hover が無いので最初から開いておく */
}

@media (max-width: 640px){
  /* ヘッダー: ロゴと日付を1行にまとめ、ナビは横スクロールさせる */
  .hd nav ul{
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    scrollbar-width:none;
    gap:0 18px;
    padding-inline:2px;
  }
  .hd nav ul::-webkit-scrollbar{ display:none; }
  .hd nav a{ white-space:nowrap; }

  /* ヒーロー: 文字を詰めて写真とのコントラストを確保 */
  .hero > .wrap{ padding-block:44px 52px; }
  .hero__t{ font-size:clamp(48px,15vw,72px); }
  .hero__tag{ font-size:11px; letter-spacing:.18em; }
  .hero__labels{ gap:6px 0; }
  .hero__labels span{ font-size:9.5px; padding:2px 10px; }
  .hero__labels span:first-child{ padding-left:0; }
  .hero__pill{ margin:10px 0 0; }

  /* デッキはスマホでも見せ場になるよう少し大きく */

  /* Contact / Footer の詰め */
  .ct .wrap{ padding-block:46px; }
  .ct__mail{ width:100%; justify-content:center; padding:14px 18px; font-size:14px; }
  .ft__cols{ gap:22px 30px; }

  /* 進捗バーは細く */
}

@media (max-width: 400px){
  .rcard{ flex-basis:84vw; }
  .hero__script{ font-size:22px; }
}

/* ---------- スマホ: 見切れの修正 ---------- */
@media (max-width: 640px){
  /* ナビは横スクロールさせるので、右端をフェードして
     「まだ続く」ことを示す */
  .hd nav{
    -webkit-mask-image:linear-gradient(to right, #000 86%, transparent 100%);
            mask-image:linear-gradient(to right, #000 86%, transparent 100%);
  }
  /* PLAY REEL はラベル列と同じ行に入らないので、改行して独立させる */
  .hero__labels{ row-gap:12px; }
  .hero__pill{
    flex:0 0 auto;
    margin:2px 0 0;
  }
  .hero__labels::after{ content:""; flex-basis:100%; height:0; order:1; }
  .hero__pill{ order:2; }
}

/* =========================================================
   ORDER — 依頼のための情報（料金 / 流れ）
   「いくら」「どれくらい」「どう進む」を先に見せて、
   問い合わせの心理的なハードルを下げる。
   ========================================================= */
.order{ position:relative; padding-top:clamp(56px, 8vw, 116px); }

/* ---- 料金プラン ---- */
.plans{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(24px,3vw,38px);
}
.plan{
  position:relative;
  border:1px solid var(--line);
  padding:clamp(18px,2vw,26px);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.plan:hover{
  border-color:var(--ink);
  box-shadow:0 16px 32px rgba(17,17,20,.14);
}
.plan--pick{
  border-color:var(--blue);
  border-width:2px;
  background:#F7F8FF;
}
.plan__tag{
  position:absolute; top:-11px; left:clamp(18px,2vw,26px);
  background:var(--blue); color:#fff;
  font-family:var(--ff-cond); font-weight:600;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  padding:4px 10px;
}
.plan__name{
  margin:0;
  font-family:var(--ff-cond);
  font-weight:600; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute);
}
.plan__price{
  margin:8px 0 0;
  font-family:var(--ff-head);
  font-size:clamp(22px,2.4vw,30px);
  line-height:1.1;
  letter-spacing:-.01em;
}
.plan__price small{
  font-family:var(--ff-cond);
  font-size:12px; font-weight:500; letter-spacing:.06em;
  color:var(--mute);
  margin-left:4px;
}
.plan__desc{ margin:12px 0 0; font-size:12px; line-height:1.9; color:#333; }
.plan__note{
  margin:clamp(20px,2.4vw,30px) 0 0;
  font-size:11.5px; color:var(--mute); line-height:1.9;
}

/* ---- 制作の流れ ---- */
.flow{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:clamp(10px,1.4vw,18px);
  margin-top:clamp(24px,3vw,38px);
  counter-reset:flow;
}
.flow li{
  counter-increment:flow;
  position:relative;
  padding-top:34px;
  font-size:12px;
  line-height:1.8;
}
.flow li::before{
  content:counter(flow,decimal-leading-zero);
  position:absolute; top:0; left:0;
  font-family:var(--ff-head);
  font-size:18px;
  color:var(--blue);
}
.flow li::after{
  content:"";
  position:absolute; top:9px; left:34px; right:8px;
  height:1px; background:var(--line);
}
.flow li:last-child::after{ display:none; }
.flow b{ display:block; font-size:13px; margin-bottom:4px; }
.flow span{ color:var(--mute); font-size:11.5px; }

/* ---- 応答の目安 ---- */
.pledge{
  display:flex; flex-wrap:wrap; gap:10px 26px;
  margin-top:clamp(24px,3vw,36px);
  padding-top:18px;
  border-top:1px solid var(--line);
}
.pledge div{ font-size:12px; }
.pledge b{
  display:block;
  font-family:var(--ff-cond);
  font-weight:600; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue);
  margin-bottom:2px;
}

/* ---- Contact の窓口を並べる ---- */
.ways{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.6vw,20px);
  max-width:860px; margin:clamp(30px,4vw,46px) auto 0;
}
.way{
  display:block;
  border:1px solid rgba(255,255,255,.45);
  padding:18px 20px;
  transition:background .28s var(--ease), color .28s var(--ease), box-shadow .28s var(--ease);
}
.way:hover{ background:#fff; color:var(--blue); box-shadow:0 12px 26px rgba(0,0,0,.20); }
.way b{
  display:block;
  font-family:var(--ff-cond);
  font-weight:600; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:5px;
}
.way span{ font-size:11.5px; opacity:.86; line-height:1.7; display:block; }
.way--main{ background:#fff; color:var(--blue); border-color:#fff; }
.way--main:hover{ box-shadow:0 12px 26px rgba(0,0,0,.20); opacity:.92; }

@media (max-width: 820px){
  /* 縦積みに。番号とコメントは映像の下へ */
  .wk, .wk:nth-child(even){ grid-template-columns:1fr; gap:18px; }
  .wk__fig, .wk:nth-child(even) .wk__fig{
    margin-left:calc(var(--pad) * -1);
    margin-right:calc(var(--pad) * -1);
  }
  .wk__note{ padding-inline:0; }
  .wk:nth-child(even) .wk__fig{ order:0; }
  .wk:nth-child(even) .wk__note{ order:0; }
  .wk__no{ top:-.42em; left:-.06em; font-size:44px; }
  .wk:nth-child(even) .wk__no{ left:-.06em; right:auto; }
}
@media (max-width: 900px){
  .plans{ grid-template-columns:repeat(2,1fr); }
  .flow{ grid-template-columns:repeat(2,1fr); }
  .flow li::after{ display:none; }
  .ways{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .plans{ grid-template-columns:1fr; }
  .flow{ grid-template-columns:1fr; }
}

/* =========================================================
   COVER FLOW（New / Pick Up）
   参照コード: framer-motion 版 CardCoverFlow を素のCSS/JSへ移植。
   中央のカードだけ正面を向き、左右は Y軸に ±38° 傾いて奥へ下がる。
   ========================================================= */
.cflow{
  --cardw: clamp(300px, 46vw, 760px);          /* カード幅 */
  --cardh: calc(var(--cardw) * 0.5625);        /* 16:9 の高さ */
  position:relative;
  padding:0;
  user-select:none;
}

/* 高さはカードから決める。固定値にすると枠だけ大きくなって
   上下に無駄な余白（＝押しても何も起きない領域）ができる。 */
.cflow__stage{
  position:relative;
  height:calc(var(--cardh) * 1.40);
  /* perspective はここに置き、preserve-3d は使わない。
     preserve-3d だと z-index が無視されて 3D 空間で交差し、
     回転したカードの手前側の辺が中央カードを突き抜ける。 */
  perspective:1600px;
  perspective-origin:50% 50%;
}

.fcard{
  position:absolute;
  /* 位置決めはレイアウトで完結させる。transform に頼ると、
     遷移が走らない環境で中央に来ず、枠との間に押しても
     反応しない空白ができる。 */
  top:calc(var(--cardh) * 0.05);
  left:0; right:0;
  margin-inline:auto;
  width:var(--cardw);
  height:var(--cardh);
  transform-origin:50% 50%;
  /* 連打しても付いてくる速さにする。強いオーバーシュート（.62s の
     cubic-bezier(.28,1.2,.4,1)）だと、揺り戻しの途中に次の操作が重なって
     位置が定まらず、送っている感じが出ない。 */
  transition:transform .34s cubic-bezier(.2,.85,.3,1), opacity .3s var(--ease);
  will-change:transform;
  cursor:pointer;
}
.fcard .card__media{
  aspect-ratio:16/9;
  border-radius:10px;
  overflow:hidden;
  background:#0d0d12;
  box-shadow:0 10px 26px rgba(17,17,20,.22);
  transition:box-shadow .5s var(--ease);
}
.fcard.is-active .card__media{ box-shadow:0 26px 60px rgba(17,17,20,.42); }
.fcard img{ width:100%; height:100%; object-fit:cover; }

/* 中央のカードだけ縁を光らせる */
.fcard::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius:12px;
  border:1.5px solid var(--blue);
  opacity:0;
  transition:opacity .45s var(--ease);
  pointer-events:none;
}
.fcard.is-active::after{ opacity:.55; }

/* 中央以外は少し沈ませ、再生ボタンも出さない */
.fcard:not(.is-active) .card__media::before{
  content:"";
  position:absolute; inset:0;
  z-index:4;
  background:rgba(12,12,18,.42);
  transition:background .45s var(--ease);
}
.fcard:not(.is-active) a.play::after,
.fcard:not(.is-active) a.play::before{ display:none; }
/* 中央以外はリンクを殺す。押しても遷移せず、寄せるだけにする。 */
.fcard:not(.is-active) a.play{ pointer-events:none; }
.fcard .card__media{ height:100%; }

/* 水面のような映り込み（Cover Flow らしさ） */
.fcard__mirror{
  position:absolute;
  left:0; right:0; top:100%;
  height:34%;
  margin-top:2px;
  border-radius:10px;
  overflow:hidden;
  opacity:.30;
  transform:scaleY(-1);
  -webkit-mask-image:linear-gradient(to top, #000, transparent 78%);
          mask-image:linear-gradient(to top, #000, transparent 78%);
  pointer-events:none;
}
.fcard__mirror img{ width:100%; height:auto; }

/* 中央カードの見出し */
.cflow__cap{
  margin:clamp(22px,2.6vw,34px) 0 0;
  text-align:center;
  /* 見出し2行 + 作者 + バッジ の高さを常に確保する。
     縮むと下のドットと矢印が動いて、送りづらくなる。 */
  min-height:86px;
}
/* バッジが無い作品でも、場所だけ取っておく */
.cflow__cap em.is-blank{ visibility:hidden; }
.cflow__cap b{
  display:block;
  font-size:clamp(15px,1.7vw,19px);
  font-weight:700;
  line-height:1.5;
}
.cflow__cap span{
  display:block;
  margin-top:4px;
  font-size:11.5px;
  color:var(--mute);
}
.cflow__cap em{
  display:block;
  margin-top:6px;
  font-family:var(--ff-cond);
  font-style:normal;
  font-weight:600;
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blue);
}

/* 送り操作 */
.cflow__nav{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:clamp(14px,1.8vw,20px);
}
.cflow__btn{
  width:36px; height:36px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent;
  color:var(--ink);
  font-size:13px;
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), opacity .25s var(--ease);
}
.cflow__btn:hover:not(:disabled){ background:var(--blue); border-color:var(--blue); color:#fff; }
.cflow__btn:disabled{ opacity:.25; cursor:default; }

.cflow__dots{ display:flex; align-items:center; gap:5px; }
.cflow__dot{
  height:4px; width:4px;
  border-radius:99px;
  background:var(--line);
  border:0; padding:0;
  cursor:pointer;
  /* 見た目は 4px のままだが、指やカーソルで押せる範囲は上下左右に広げる。
     4px 四方だと狙いが外れて「押したのに進まない」ことになる。 */
  position:relative;
  transition:width .3s var(--ease), background .3s var(--ease);
}
.cflow__dot::before{
  content:"";
  position:absolute;
  inset:-10px -5px;
}
.cflow__dot:hover{ background:var(--blue-lt); }
.cflow__dot.is-active{ width:18px; background:var(--blue); }
.cflow__dot:focus-visible{ outline:2px solid var(--blue); outline-offset:6px; }

@media (prefers-reduced-motion: reduce){
  .fcard{ transition:none; }
}
@media (max-width: 640px){
  .cflow{ --cardw:min(86vw, 360px); }
  .fcard__mirror{ display:none; }
}

/* =========================================================
   演出の追加（参照: amicro.vercel.app）
   いずれも「ホバー対象そのものを動かさない」方針で実装。
   ========================================================= */

/* スクロール進捗バー */
.progress{
  position:fixed; top:0; left:0; z-index:80;
  height:2px; width:100%;
  transform:scaleX(var(--p,0));
  transform-origin:0 50%;
  background:linear-gradient(90deg, var(--blue), #7C89FF);
  pointer-events:none;
}

/* 見出しのワイプ表示 */
/* 既定は素のまま（＝必ず見える）。演出は is-in が付いたときだけ走らせる。
   待機状態を「隠す」にすると、IntersectionObserver が発火しない場面で
   見出しが永久に消えたままになる。 */
.wipe.is-in{ animation:wipeIn .9s var(--ease) both; }
@keyframes wipeIn{
  from{ clip-path:inset(0 100% 0 0); }
  to  { clip-path:inset(0 0 0 0); }
}

/* ボタンの光沢スイープ */
.btn, .hero__pill, .ct__mail, .cflow__btn{ position:relative; overflow:hidden; isolation:isolate; }
.btn::after, .hero__pill::after, .ct__mail::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  transform:translateX(-101%) skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  transition:transform .65s var(--ease);
}
.btn:hover::after, .hero__pill:hover::after, .ct__mail:hover::after{
  transform:translateX(101%) skewX(-18deg);
}

/* 中央カードの再生ボタンに広がる輪 */
.fcard.is-active a.play .ring{
  position:absolute;
  left:50%; top:50%;
  z-index:2;
  width:clamp(46px,5vw,64px);
  aspect-ratio:1;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.85);
  transform:translate(-50%,-50%) scale(.86);
  opacity:0;
  pointer-events:none;
}
.fcard.is-active a.play:hover .ring{ animation:ringPulse 1.5s var(--ease) infinite; }
@keyframes ringPulse{
  0%   { opacity:.85; transform:translate(-50%,-50%) scale(.86); }
  70%  { opacity:0;   transform:translate(-50%,-50%) scale(1.5); }
  100% { opacity:0;   transform:translate(-50%,-50%) scale(1.5); }
}

@media (prefers-reduced-motion: reduce){
  .progress{ display:none; }
  .wipe.is-in{ animation:none; }
  .btn::after, .hero__pill::after, .ct__mail::after{ display:none; }
  .fcard.is-active a.play:hover .ring{ animation:none; }
}

/* =========================================================
   ボタンの動き（参照: amicro.vercel.app / Buttons）
   Slide Arrow ＝ 2層を入れ替える。片方を opacity:0 + 横ずらしで
   待機させ、ホバーで入れ替わる。要素自身は動かさない。
   ========================================================= */

/* ---- Slide Arrow：矢印が滑り、もう1本が追いかけて入る ---- */
.btn .cir, .ct__mail .cir{
  position:relative;
  overflow:hidden;
  transition:transform .38s var(--ease);
}
.btn:hover .cir, .ct__mail:hover .cir{ transform:translateX(3px); }

/* 待機している2本目の矢印 */
.arrow2{
  display:inline-block;
  margin-left:-1em;
  opacity:0;
  transform:translateX(-10px);
  transition:opacity .38s var(--ease), transform .38s var(--ease);
  pointer-events:none;
}
.btn:hover .arrow2,
.more:hover .arrow2,
.wk__watch:hover .arrow2{
  opacity:1;
  transform:translateX(0);
}
/* 1本目は前へ抜けていく */
.arrow1{
  display:inline-block;
  transition:opacity .38s var(--ease), transform .38s var(--ease);
}
.btn:hover .arrow1,
.more:hover .arrow1,
.wk__watch:hover .arrow1{
  opacity:0;
  transform:translateX(10px);
}

/* ---- Morph：ラベルが上へ抜け、下から別のラベルが出る ---- */
.morph{ position:relative; overflow:hidden; display:inline-grid; }
/* .way span など既存の指定に負けないよう、詳細度を上げておく */
.morph .morph__a, .morph .morph__b{
  grid-area:1 / 1;
  opacity:1;
  transition:transform .4s var(--ease), opacity .4s var(--ease);
}
.morph .morph__b{ transform:translateY(110%); opacity:0; }
.morph:hover .morph__a,
a:hover .morph .morph__a{ transform:translateY(-110%); opacity:0; }
.morph:hover .morph__b,
a:hover .morph .morph__b{ transform:translateY(0); opacity:1; }

/* ---- Pulse：メールボタンから輪が広がる ---- */
.way--main{ position:relative; }
.way--main .pulse{
  position:absolute; inset:0;
  border-radius:inherit;
  border:1.5px solid rgba(255,255,255,.9);
  opacity:0;
  pointer-events:none;
}
.way--main:hover .pulse{ animation:btnPulse 1.5s var(--ease) infinite; }
@keyframes btnPulse{
  0%   { opacity:.8; transform:scale(1); }
  70%  { opacity:0;  transform:scale(1.14); }
  100% { opacity:0;  transform:scale(1.14); }
}

/* ---- Ring：送りボタンの縁が広がる ---- */
.cflow__btn{ position:relative; }
.cflow__btn .pulse{
  position:absolute; inset:-1px;
  border-radius:50%;
  border:1.5px solid var(--blue);
  opacity:0;
  pointer-events:none;
}
.cflow__btn:hover:not(:disabled) .pulse{ animation:btnPulse 1.3s var(--ease) infinite; }

@media (prefers-reduced-motion: reduce){
  .arrow1, .arrow2, .morph__a, .morph__b{ transition:none; }
  .way--main:hover .pulse, .cflow__btn:hover .pulse{ animation:none; }
}

/* =========================================================
   クライアント名の流れる帯
   ========================================================= */

/* ---- クライアント名の流れる帯 ---- */
.credits{
  margin-top:clamp(40px,5vw,72px);
  padding:clamp(16px,2vw,24px) 0;
  border-block:1px solid var(--line);
  overflow:hidden;
}
.credits__label{
  display:block;
  margin-bottom:12px;
  font-family:var(--ff-cond);
  font-weight:600;
  font-size:10px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--blue);
}
.credits__track{
  display:flex;
  width:max-content;
  animation:creditFlow 46s linear infinite;
}
.credits__track span{
  padding-right:2.4em;
  font-size:12.5px;
  color:var(--mute);
  white-space:nowrap;
}
.credits__track span i{
  font-style:normal;
  color:var(--blue);
  margin-right:.5em;
}
.credits:hover .credits__track{ animation-play-state:paused; }
@keyframes creditFlow{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

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

/* 流れる帯の左右をフェードさせて、唐突に切れないようにする */
.credits{ position:relative; }
.credits::before,
.credits::after{
  content:""; position:absolute; top:0; bottom:0; width:clamp(40px,7vw,110px);
  pointer-events:none; z-index:2;
}
.credits::before{ left:0;  background:linear-gradient(to right, var(--paper), transparent); }
.credits::after { right:0; background:linear-gradient(to left,  var(--paper), transparent); }


/* =========================================================
   作品の絞り込み（All Works）
   ========================================================= */
.filt{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0 0 clamp(24px,3vw,40px);
}
.filt__b{
  font:inherit;
  font-family:var(--ff-cond);
  font-weight:600;
  font-size:12px;
  letter-spacing:.08em;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 15px;
  border:1px solid var(--line);
  border-radius:99px;
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
  transition:border-color .25s var(--ease), color .25s var(--ease),
             background .25s var(--ease);
}
.filt__b em{
  font-style:normal;
  font-size:10px;
  letter-spacing:0;
  color:var(--mute);
  transition:color .25s var(--ease);
}
.filt__b:hover{ border-color:var(--blue); color:var(--blue); }
.filt__b.is-on{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}
.filt__b.is-on em{ color:rgba(255,255,255,.72); }
.filt__b:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.filt__n{
  margin:0 0 0 auto;
  font-family:var(--ff-cond);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--mute);
}
/* 絞り込みで外れたものは場所ごと畳む */
.thumb[hidden]{ display:none; }

@media (max-width:700px){
  .filt{ gap:6px; }
  .filt__b{ padding:7px 12px; font-size:11px; }
  .filt__n{ width:100%; margin:2px 0 0; }
}


/* =========================================================
   右下の常設ボタン（依頼への導線 / 上へ戻る）
   ========================================================= */
.fab{
  position:fixed;
  right:clamp(16px,2.2vw,30px);
  bottom:clamp(16px,2.2vw,30px);
  z-index:60;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
}
.fab__b{
  display:inline-flex;
  align-items:center;
  gap:11px;
  height:62px;
  padding:0 28px;
  border:0;
  border-radius:99px;
  font:inherit;
  font-family:var(--ff-cond);
  font-weight:700;
  font-size:16px;
  letter-spacing:.06em;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(17,17,20,.26);
  /* 動かすのは影と色だけ。位置を動かすと、押そうとした瞬間に
     ボタンが逃げて押しづらくなる。 */
  transition:box-shadow .28s var(--ease), background .28s var(--ease),
             color .28s var(--ease), opacity .28s var(--ease);
}
.fab__b--main{
  background:var(--blue);
  color:#fff;
}
.fab__b--main:hover{ box-shadow:0 16px 40px rgba(43,63,232,.48); }
.fab__b--top{
  width:62px;
  padding:0;
  justify-content:center;
  background:var(--paper);
  color:var(--ink);
  /* 白いボタンは背景に溶けるので、輪郭をはっきり取る */
  border:2px solid var(--ink);
  box-shadow:0 8px 24px rgba(17,17,20,.18);
}
.fab__b--top:hover{ box-shadow:0 16px 34px rgba(17,17,20,.26); color:var(--blue); border-color:var(--blue); }
.fab__b--top[hidden]{ display:none; }
.fab__b:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
/* アイコンは SVG。絵文字だと端末ごとに形も大きさも変わる。 */
.fab__i{ width:22px; height:22px; display:block; flex:0 0 auto; }
.fab__b--top .fab__i{ width:24px; height:24px; }

@media (max-width:640px){
  /* 縮めても「何のボタンか」は残す。丸だけにすると押す理由が伝わらない。 */
  .fab{ right:12px; bottom:12px; gap:10px; }
  .fab__b{ height:56px; font-size:15px; padding:0 22px; }
  .fab__b--top{ width:56px; padding:0; }
  .fab__i{ font-size:19px; }
}
@media (max-width:380px){
  .fab__b{ height:52px; font-size:14px; padding:0 18px; gap:8px; }
  .fab__b--top{ width:52px; }
}
@media print{ .fab{ display:none; } }


/* ---- 右下ボタンの手応え ----------------------------------
   押した「今」が返ってくることを最優先にする。
   ・押した瞬間に沈む（transition ではなく即座に）
   ・離すと少しだけ跳ねて戻る
   ・押した場所から波紋が広がる
   ・アイコンが役割どおりに動く（矢印は上へ抜ける／封筒は送り出す）
   置き場所は動かさない。押す前に動くと的が逃げる。 */
.fab__b{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.fab__b:active{ transform:scale(.93); transition:transform .06s linear; }
.fab__b.is-pop{ animation:fabPop .42s cubic-bezier(.2,1.5,.4,1); }
@keyframes fabPop{
  0%   { transform:scale(.93); }
  45%  { transform:scale(1.055); }
  75%  { transform:scale(.985); }
  100% { transform:scale(1); }
}

/* 押した場所から広がる波紋 */
.fab__wave{
  position:absolute;
  z-index:0;
  width:14px; height:14px;
  margin:-7px 0 0 -7px;
  border-radius:50%;
  background:currentColor;
  opacity:.34;
  pointer-events:none;
  animation:fabWave .58s cubic-bezier(.2,.7,.3,1) forwards;
}
.fab__b--main .fab__wave{ background:#fff; opacity:.38; }
@keyframes fabWave{
  from{ transform:scale(1);  opacity:.38; }
  to  { transform:scale(22); opacity:0; }
}
/* 文字とアイコンは波紋より前に置く */
.fab__i, .fab__t{ position:relative; z-index:1; }

/* 上へ戻る：矢印が上へ抜けて、下から次の矢印が入る */
.fab__b--top .fab__i{
  display:block;
  transition:transform .3s cubic-bezier(.3,.9,.3,1);
}
.fab__b--top:hover .fab__i{ transform:translateY(-2px); }
.fab__b--top.is-fly .fab__i{ animation:arrowFly .52s cubic-bezier(.3,.8,.3,1); }
@keyframes arrowFly{
  0%   { transform:translateY(0);     opacity:1; }
  42%  { transform:translateY(-26px); opacity:0; }
  43%  { transform:translateY(22px);  opacity:0; }
  100% { transform:translateY(0);     opacity:1; }
}
/* 戻っている間だけ、輪郭を光らせて「効いている」ことを見せる */
.fab__b--top.is-going{ box-shadow:0 0 0 3px rgba(43,63,232,.18), 0 14px 30px rgba(17,17,20,.24); }

/* ご依頼：封筒が送り出される */
.fab__b--main .fab__i{
  display:block;
  transition:transform .3s cubic-bezier(.3,.9,.3,1);
}
.fab__b--main:hover .fab__i{ transform:translateX(2px) rotate(-8deg); }
.fab__b--main.is-send .fab__i{ animation:mailSend .55s cubic-bezier(.3,.8,.3,1); }
@keyframes mailSend{
  0%   { transform:translateX(0) rotate(0);        opacity:1; }
  38%  { transform:translateX(26px) rotate(-16deg); opacity:0; }
  39%  { transform:translateX(-20px) rotate(0);     opacity:0; }
  100% { transform:translateX(0) rotate(0);         opacity:1; }
}

/* 出てくるときも、下からすっと現れる */
.fab__b--top{ animation:fabIn .34s cubic-bezier(.2,1.1,.4,1); }
@keyframes fabIn{
  from{ transform:translateY(14px) scale(.9); opacity:0; }
  to  { transform:translateY(0)    scale(1);  opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .fab__b:active{ transform:none; }
  .fab__b.is-pop,
  .fab__b--top.is-fly .fab__i,
  .fab__b--main.is-send .fab__i,
  .fab__b--top{ animation:none; }
  .fab__wave{ display:none; }
  .fab__b--top:hover .fab__i,
  .fab__b--main:hover .fab__i{ transform:none; }
}