@charset "UTF-8";
/* ============================================================================
   The Layers of Light — Layout Clone
   骨組みのみ。テキスト・画像はすべてダミー。
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. TOKENS
------------------------------------------------------------------------------ */
:root{
  --bp-pc: 1480;

  /* colors */
  --c-black-01:var(--c-base, #000);
  --c-white-01:var(--c-text, #fff);
  --c-gray-01:#acabaa;
  --c-accent-01:var(--c-accent, #000);

  /* fonts */
  --font-cormorant:var(--font-head, "Cormorant Garamond",Georgia,"Times New Roman",serif);
  --font-eb-garamond:"EB Garamond",Georgia,serif;
  --font-playfair:var(--font-head, "Playfair Display",Georgia,"Times New Roman",serif); /* KV タイトル専用 */
  --font-jp:var(--font-body, "Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif);
  --font-inter:var(--font-body, "Inter","Helvetica Neue",Arial,sans-serif);

  /* spacing : max(N/1480*100vw, Npx) */
  --s-1:   max(calc(  1 / var(--bp-pc) * 100vw),   1px);
  --s-4:   max(calc(  4 / var(--bp-pc) * 100vw),   4px);
  --s-8:   max(calc(  8 / var(--bp-pc) * 100vw),   8px);
  --s-14:  max(calc( 14 / var(--bp-pc) * 100vw),  14px);
  --s-15:  max(calc( 15 / var(--bp-pc) * 100vw),  15px);
  --s-16:  max(calc( 16 / var(--bp-pc) * 100vw),  16px);
  --s-20:  max(calc( 20 / var(--bp-pc) * 100vw),  20px);
  --s-24:  max(calc( 24 / var(--bp-pc) * 100vw),  24px);
  --s-30:  max(calc( 30 / var(--bp-pc) * 100vw),  30px);
  --s-36:  max(calc( 36 / var(--bp-pc) * 100vw),  36px);
  --s-40:  max(calc( 40 / var(--bp-pc) * 100vw),  40px);
  --s-48:  max(calc( 48 / var(--bp-pc) * 100vw),  48px);
  --s-50:  max(calc( 50 / var(--bp-pc) * 100vw),  50px);
  --s-60:  max(calc( 60 / var(--bp-pc) * 100vw),  60px);
  --s-70:  max(calc( 70 / var(--bp-pc) * 100vw),  70px);
  --s-80:  max(calc( 80 / var(--bp-pc) * 100vw),  80px);
  --s-90:  max(calc( 90 / var(--bp-pc) * 100vw),  90px);
  --s-100: max(calc(100 / var(--bp-pc) * 100vw), 100px);
  --s-120: max(calc(120 / var(--bp-pc) * 100vw), 120px);
  --s-140: max(calc(140 / var(--bp-pc) * 100vw), 140px);
  --s-156: max(calc(156 / var(--bp-pc) * 100vw), 156px);
  --s-160: max(calc(160 / var(--bp-pc) * 100vw), 160px);
  --s-180: max(calc(180 / var(--bp-pc) * 100vw), 180px);
  --s-200: max(calc(200 / var(--bp-pc) * 100vw), 200px);
  --s-220: max(calc(220 / var(--bp-pc) * 100vw), 220px);
  --s-240: max(calc(240 / var(--bp-pc) * 100vw), 240px);
  --s-250: max(calc(250 / var(--bp-pc) * 100vw), 250px);
  --s-560: max(calc(560 / var(--bp-pc) * 100vw), 560px);
  --s-780: max(calc(780 / var(--bp-pc) * 100vw), 780px);

  /* font size : max(N/1480*100vw, (N/16)rem) */
  --f-12: max(calc( 12 / var(--bp-pc) * 100vw),  .75rem);
  --f-13: max(calc( 13 / var(--bp-pc) * 100vw), .8125rem);
  --f-14: max(calc( 14 / var(--bp-pc) * 100vw), .875rem);
  --f-16: max(calc( 16 / var(--bp-pc) * 100vw), 1rem);
  --f-20: max(calc( 20 / var(--bp-pc) * 100vw), 1.25rem);
  --f-24: max(calc( 24 / var(--bp-pc) * 100vw), 1.5rem);
  --f-30: max(calc( 30 / var(--bp-pc) * 100vw), 1.875rem);
  --f-32: max(calc( 32 / var(--bp-pc) * 100vw), 2rem);
  --f-40: max(calc( 40 / var(--bp-pc) * 100vw), 2.5rem);
  --f-44: max(calc( 44 / var(--bp-pc) * 100vw), 2.75rem);
  --f-48: max(calc( 48 / var(--bp-pc) * 100vw), 3rem);
  --f-70: max(calc( 70 / var(--bp-pc) * 100vw), 4.375rem);
  --f-86: max(calc( 86 / var(--bp-pc) * 100vw), 5.375rem);
  --f-200:max(calc(200 / var(--bp-pc) * 100vw), 12.5rem);

  /* ★ 唯一の基準ガター : SP 30px */
  --baseX: var(--s-30);

  --ease: cubic-bezier(.4,0,.2,1);
}

/* ★ PC ガター : 115px = 7.77% */
@media (min-width:1024px){
  :root{ --baseX: max(calc(115 / var(--bp-pc) * 100vw), 115px); }
}

/* ---------------------------------------------------------------------------
   2. RESET
------------------------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body{
  background:var(--c-black-01);
  color:var(--c-white-01);
  font-family:var(--font-jp);
  font-weight:400;
  line-height:2;            /* leading-loose */
  letter-spacing:.04em;
  overflow-x:hidden;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
h1,h2,h3{ font-weight:400; }

/* ダミー画像枠：object-cover 固定 */
.media{ position:relative; overflow:hidden; }
.media img{ width:100%; height:100%; object-fit:cover; }

/* ダミー動画（画像 + Ken Burns で代替）
   ※ 基準スケールを 1.05 にしてあるのは、リビール時の blur で
      画像の縁が透けるのを防ぐため（本家の scale-110 と同じ役割） */
.fauxvideo img{ animation:kenburns 18s ease-in-out infinite alternate; }
@keyframes kenburns{
  from{ transform:scale(1.05) translate(0,0); }
  to  { transform:scale(1.14) translate(-1.5%,1%); }
}

/* ---------------------------------------------------------------------------
   3. TYPOGRAPHY PRIMITIVES
------------------------------------------------------------------------------ */

/* 英字大見出し：Cormorant / 86 → 200 / 光学左マージン */
.ttl-en{
  font-family:var(--font-cormorant);
  font-size:var(--f-86);
  line-height:1.25;             /* leading-tight */
  overflow:hidden;
  margin-left:-.02em;
}
.ttl-en--select{ margin-left:-.055em; }   /* 文字列ごとに個別調整 */

/* 和文サブ：見出しの底へ食い込ませる */
.ttl-sub{
  font-size:var(--f-16);
  letter-spacing:0;
  margin-top:-.3em;
}
@media (min-width:1024px){
  .ttl-en{ font-size:var(--f-200); }
  .ttl-sub{ font-size:var(--f-20); margin-top:-1.5em; }
}

/* 行マスクリビール（M5）
   ※ 初期の「隠し」状態は .js（JS有効時のみ付与）配下に置く。
      JS が動かない環境ではコンテンツが常時可視になる。 */
.line{ display:block; overflow:hidden; }
.js .line > span{
  display:block;
  transform:translateY(110%);
  transition:transform .9s var(--ease);
}
.js .is-in .line > span{ transform:translateY(0); }
.js .is-in .line:nth-child(2) > span{ transition-delay:.08s; }
.js .is-in .line:nth-child(3) > span{ transition-delay:.16s; }
.js .is-in .line:nth-child(4) > span{ transition-delay:.24s; }
.js .is-in .line:nth-child(5) > span{ transition-delay:.32s; }

/* 汎用フェード */
.js [data-fade]{ opacity:0; transform:translateY(24px); transition:opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.js [data-fade].is-in{ opacity:1; transform:none; }

/* ★ 画像リビール（本家と同じ blur → 解除）
   本家は <img> の初期クラスが `blur-2xl scale-110`（= blur 40px / scale 1.1）で、
   スクロールインで blur(0) / scale(1) へ解ける。これが「ふわっと出る」正体。
   scale-110 は blur で縁が透けるのを隠すためのもので、blur と必ずセット。 */
.js [data-fade] img{
  filter:blur(40px);
  transform:scale(1.1);
  transition:filter 1.5s var(--ease), transform 1.7s var(--ease);
}
.js [data-fade].is-in img{
  filter:blur(0);
  transform:scale(1);
}

/* Ken Burns 中の画像は transform をアニメーションが握っているため、
   リビールは blur のみで行う（基準スケール 1.05 が縁を隠す） */
.js [data-fade].fauxvideo img{ transform:none; }

/* ---------------------------------------------------------------------------
   4. LOADER  (M1–M4)
------------------------------------------------------------------------------ */
.loader{ display:none; }          /* JS 無効時はローダーを出さない */
.js .loader{
  position:fixed; inset:0; z-index:100;
  background:var(--c-black-01);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .7s var(--ease), visibility .7s;
  /* ★ CSS 単体でも必ず退場させる（main.js が読めなくても画面を塞がない） */
  animation:loader-out .7s var(--ease) 1.6s forwards;
}
.js .loader.is-done{ opacity:0; visibility:hidden; }
@keyframes loader-out{ to{ opacity:0; visibility:hidden; } }
.loader__logo{ position:relative; width:var(--s-156); }
.loader__logo span{
  display:block;
  font-family:var(--font-cormorant);
  font-size:var(--f-24);
  letter-spacing:.34em;
  line-height:1;
  text-align:center;
  white-space:nowrap;
}
.loader__back { opacity:.3; }
/* M2 : 前面レイヤーを clip-path で左から展開（ワイプ） */
.loader__front{
  position:absolute; inset:0;
  clip-path:inset(0 100% 0 0);
  animation:logo-wipe .9s var(--ease) .25s forwards;
}
@keyframes logo-wipe{ to{ clip-path:inset(0 0% 0 0); } }

/* ---------------------------------------------------------------------------
   5. HEADER  (00)
------------------------------------------------------------------------------ */
.header{
  position:absolute; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  padding-top:var(--s-20);
}
.js .header{ opacity:0; animation:fade-in .8s var(--ease) 1.7s forwards; }
@keyframes fade-in{ to{ opacity:1; } }
@media (min-width:1024px){ .header{ padding-top:var(--s-36); } }

.header__logo{
  position:relative; width:var(--s-156);
  font-family:var(--font-cormorant);
  font-size:var(--f-16);
  letter-spacing:.34em; line-height:1;
  text-align:center; white-space:nowrap;
}

/* 言語スイッチ：SP 縦積み / PC 横並び */
.lang{
  position:absolute; right:var(--s-16); top:var(--s-20); z-index:50;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s-4);
  padding-inline:.75em;
  font-family:var(--font-inter); font-weight:300;
  font-size:var(--f-14); line-height:1.5;
}
.lang > span{ display:block; color:#fff; }
.lang > span:first-child{ opacity:1; }
.lang > span:nth-child(2){ opacity:.4; }
.lang__marker{
  position:absolute; top:0; left:0;
  width:100%; height:var(--s-20);
  border:1px solid #fff;
  pointer-events:none;
  transition:transform .5s var(--ease);
}
@media (min-width:1024px){
  .lang{
    right:var(--s-30); top:var(--s-36);
    flex-direction:row; padding-inline:0;
  }
  .lang > span{ padding-inline:.75em; }
  .lang__marker{ width:50%; }
}

/* ---------------------------------------------------------------------------
   6. KV  (01)
------------------------------------------------------------------------------ */
.kv{
  position:relative;
  display:flex; align-items:flex-end; justify-content:center;
  width:100%; height:100svh;
  padding-bottom:var(--s-30);
  overflow:hidden;
}
.kv__layer{ position:absolute; inset:0; z-index:10; pointer-events:none; }
.kv__layer img{ width:100%; height:100%; object-fit:cover; opacity:.62;
  animation:kenburns 26s ease-in-out infinite alternate; }
.kv__layer::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 60% at 50% 45%, rgba(0,0,0,.15) 0%, rgba(0,0,0,.72) 100%);
}
/* SP 7:3（3行組み） / PC 8:1（1行） */
.kv__title{
  position:relative; z-index:20;
  width:85%; max-width:85%; aspect-ratio:7/3;
  display:flex; align-items:center; justify-content:center;
  /* ★ KV タイトルのみ Playfair Display Italic */
  font-family:var(--font-playfair);
  font-style:italic;
  font-weight:400;
  /* SP は 3 行入るサイズに抑え、枠外へはみ出させない */
  font-size:clamp(1.75rem, 8.6vw, 6rem);
  line-height:1.12; letter-spacing:.06em;
  text-align:center;
  overflow-wrap:anywhere;      /* 万一の長語でも枠外へ出さない保険 */
}
.kv__br{ display:inline; }     /* SP のみ改行を有効化 */
.js .kv__title{ opacity:0; animation:fade-in 1.1s var(--ease) 1.85s forwards; }
@media (min-width:1024px){
  .kv__title{ width:94%; max-width:94%; aspect-ratio:8/1; font-size:clamp(3rem,6.4vw,7.5rem); }
  .kv__br{ display:none; }     /* PC は改行を無効化して 1 行に戻す */
}

/* ---------------------------------------------------------------------------
   7. MESSAGE  (02)  ★ 4枚散乱パネル
------------------------------------------------------------------------------ */
.message{
  position:relative; width:100%;
  background:var(--c-black-01);
  padding-top:var(--s-100);
}
@media (min-width:1024px){ .message{ padding-top:var(--s-160); } }

.message__lead{
  text-align:center; line-height:2;
  font-size:var(--f-14);
}
@media (min-width:1024px){
  .message__lead{ font-size:var(--f-24); line-height:2.4; }
}

/* --- SP : 絶対配置による散乱 --- */
.message__wrap{
  position:relative;
  margin-top:var(--s-48);
  margin-inline:0;
  aspect-ratio:3/5;
}
.message__panel{
  position:absolute;
  aspect-ratio:2/3;
  height:auto;
  overflow:hidden;
}
/* ① 右上・40% ・z10 */
.message__panel:nth-child(1){ top:0;             right:0;    width:40%;  z-index:10; }
/* ② 左・12% ・33.3% */
.message__panel:nth-child(2){ top:12%;           left:var(--s-20); width:33.3333%; }
/* ③ 右・底30% ・30% ・z30（④と重なる、手前） */
.message__panel:nth-child(3){ bottom:30%;        right:20%;  width:30%;  z-index:30; }
/* ④ 左20%・底0 ・50% */
.message__panel:nth-child(4){ bottom:0;          left:20%;   width:50%; }

/* --- PC : flex 1行 3:2:2:3 / 上端揃え → 下端が谷を描く --- */
@media (min-width:1024px){
  .message__wrap{
    display:flex;
    align-items:flex-start;      /* ★ 下端を波打たせる */
    justify-content:space-between;
    column-gap:4%;
    margin-top:0;                /* ★ SP の mt をリセット */
    margin-inline:2.5%;
    aspect-ratio:auto;
  }
  /* ★ SP の絶対配置を完全に解除する。
     :nth-child() は詳細度 0,2,0。@media は詳細度を上げないため、
     解除側も同じ詳細度で、かつ後方に書く必要がある。 */
  .message__panel:nth-child(n){
    position:relative;
    top:auto; right:auto; bottom:auto; left:auto;
    width:auto; margin-top:0;
  }
  .message__panel:nth-child(1){ flex:3; }
  .message__panel:nth-child(2){ flex:2; }
  .message__panel:nth-child(3){ flex:2; }
  .message__panel:nth-child(4){ flex:3; }
}

/* ---------------------------------------------------------------------------
   8. VIMEO  (03)  SP 全幅ブリード / PC 120px インセット
------------------------------------------------------------------------------ */
.vimeo{ position:relative; width:100%; margin-top:var(--s-140); }
.vimeo__inner{ position:relative; width:100%; margin-inline:0; aspect-ratio:16/9; }
@media (min-width:1024px){
  .vimeo{ margin-top:var(--s-200); }
  .vimeo__inner{ width:auto; margin-inline:var(--s-120); }
}

/* ---------------------------------------------------------------------------
   9. DESIGN  (04)  ★ 見出し × 映像の重なり
------------------------------------------------------------------------------ */
.design{
  position:relative; width:100%;
  background:var(--c-white-01);
  margin-top:var(--s-200);
}
@media (min-width:1024px){ .design{ margin-top:var(--s-250); } }

.design__overlap{ position:relative; }
.design__head{
  color:var(--c-black-01);
  padding-inline:var(--baseX);
  padding-top:5rem;
}
.design__media{
  margin-top:var(--s-30);
  width:100%; aspect-ratio:4/3;
  overflow:hidden;
}
@media (min-width:1024px){
  .design__overlap{
    display:flex; justify-content:flex-start; align-items:flex-end;   /* ★ 左下 */
    aspect-ratio:16/9;
    overflow:hidden;
    padding-bottom:var(--s-100);
  }
  .design__head{
    position:relative; z-index:20;
    color:var(--c-white-01);          /* ★ 黒 → 白へ反転 */
    padding:0;
    margin-left:var(--baseX);
  }
  .design__media{
    position:absolute; top:0; left:0;  /* ★ 背景レイヤー化 */
    margin-top:0;
    width:100%; height:100%;
    aspect-ratio:auto;
  }
  /* 本家は暗い実写映像。ダミー写真は明るいため、白見出しの可読性を
     揃える目的で輝度のみ落とす（レイアウトには影響しない） */
  .design__media img{ filter:brightness(.6); }
}

.design__body{
  color:var(--c-black-01);
  margin-top:3em;
  margin-inline:var(--baseX);
  font-size:4vw; line-height:2;
}
@media (min-width:1024px){ .design__body{ font-size:var(--f-24); } }

/* ★ SP : 左60px / 右ブリード   PC : w-2/3 右寄せ / 右80px */
.design__fig{
  position:relative;
  margin-top:var(--s-50);
  margin-left:var(--s-60);
  aspect-ratio:3/2;
  overflow:hidden;
}
@media (min-width:1024px){
  .design__fig{
    width:66.6667%;
    margin-top:var(--s-100);
    margin-left:auto;
    margin-right:var(--s-80);
  }
}

/* ---------------------------------------------------------------------------
   10. SELECT  (05)  ★ 右寄せ78%ヒーロー
------------------------------------------------------------------------------ */
.select{
  position:relative; width:100%;
  background:var(--c-white-01);
  color:var(--c-black-01);
  padding-top:var(--s-120);
}
/* ★ 左マージンのみ。右は開放してブリードさせる */
.select__head{ margin-left:var(--baseX); }

/* ★ PC : 右端密着 78% → 左に 22% の空白が"結果として"残る */
.select__hero{
  width:100%;
  margin-top:var(--s-30);
  aspect-ratio:4/3;
  overflow:hidden;
}
@media (min-width:1024px){
  .select__hero{
    width:78%;
    margin-left:auto;
    margin-top:var(--s-50);
    aspect-ratio:16/9;
  }
}

/* ★ 順序反転 + 左右マージン 1:2 + 比率 8:7 */
.select__row{
  display:flex; flex-direction:column;
  row-gap:var(--s-40);
  margin-top:var(--s-50);
  margin-inline:var(--baseX);
}
.select__row-text{ font-size:var(--f-16); line-height:2; }
.select__row-fig{ aspect-ratio:8/9; overflow:hidden; }
@media (min-width:1024px){
  .select__row{
    flex-direction:row-reverse;      /* ★ DOM順と視覚順を逆転 */
    align-items:center;
    column-gap:var(--s-140);
    margin-top:var(--s-100);
    margin-left:var(--s-70);         /* ★ 左 70 */
    margin-right:var(--s-140);       /* ★ 右 140 = 左の2倍 */
  }
  .select__row-text{ flex:7; font-size:var(--f-24); }
  .select__row-fig { flex:8; }
}

/* ---------------------------------------------------------------------------
   11. CRAFT  (06)  ★ sticky + 5工程
------------------------------------------------------------------------------ */
.craft{ position:relative; width:100%; }

.craft__intro{
  background:var(--c-white-01);
  color:var(--c-black-01);
  padding-top:var(--s-120);
  padding-bottom:var(--s-50);
  text-align:center;                 /* ★ ページ唯一の中央揃え見出し */
}
@media (min-width:1024px){ .craft__intro{ padding-top:var(--s-140); } }

.craft__area{ position:relative; background:var(--c-black-01); }

/* --- 固定メディア層 ---
   ★ 本家と同じ重ね順：映像 z:0 ／ コンテンツ列 z:20 ／ UI z:30

   注意：sticky 要素に負の margin を与えるとマージンボックスの高さが 0 になり、
   セクションを越えて貼り付き続けてしまう（次セクションに UI が残る）。
   そのため
     - 映像は「absolute でエリア全面 → 内側の sticky で画面固定」
     - UI  は「通常フローの sticky（負マージン無し）」
     - コンテンツ列だけを margin-top で引き上げる
   という構成にしている。 */
.craft__stage{
  position:absolute; inset:0; z-index:0;   /* エリア全体を覆う */
}
.craft__stage-in{
  position:sticky; top:0;
  width:100%; height:100dvh;
  overflow:hidden;
}
.craft__sticky{
  position:sticky; top:0; z-index:30;
  width:100%; height:100dvh;
  color:var(--c-white-01);
  pointer-events:none;              /* 背面のスクロールを阻害しない */
}
.craft__nav{ pointer-events:auto; } /* サムネイルのみ操作可能 */
.craft__stage img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .8s var(--ease);
  /* 本家は暗い実写映像。白文字の可読性を担保するため輝度を落とす */
  filter:brightness(.42);
}
.craft__stage img.is-active{ opacity:1; }
.craft__stage::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.65) 100%);
}

/* --- UI オーバーレイ : SP 上下 / PC 左レール --- */
.craft__ui{
  position:absolute; inset:0; z-index:20;
  display:flex; flex-direction:column; justify-content:space-between;
  padding-top:var(--s-60);
}
@media (min-width:1024px){
  .craft__ui{
    align-items:flex-start;
    width:fit-content;
    padding-block:var(--s-40);
    margin-left:var(--s-50);
    row-gap:var(--s-20);
  }
}
@media (min-width:1536px){ .craft__ui{ row-gap:var(--s-40); } }

/* 縦書きラベル */
.craft__label{
  display:flex; align-items:center;
  column-gap:var(--s-20);
  writing-mode:vertical-rl;          /* ★ 縦書き */
  align-self:flex-start;
  margin-left:var(--s-16);
}
.craft__label-en{ font-family:var(--font-cormorant); font-size:var(--f-40); line-height:1; }
.craft__label-jp{ font-size:var(--f-13); line-height:1; }
@media (min-width:1024px){
  .craft__label{ align-self:center; margin-left:0; column-gap:var(--s-40); }
  .craft__label-en{ font-size:var(--f-86); }
  .craft__label-jp{ font-size:var(--f-20); }
}

/* SP専用ぼかし帯 */
.craft__scrim{
  position:absolute; bottom:0; left:0; z-index:15;
  width:100%; height:var(--s-120);
  backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(to top, #000 50%, transparent 100%);
          mask-image:linear-gradient(to top, #000 50%, transparent 100%);
}
@media (min-width:1024px){ .craft__scrim{ display:none; } }

/* サムネイルナビ : SP 横帯 / PC 縦レール */
.craft__nav{
  position:relative; z-index:20;
  display:flex; align-items:stretch; justify-content:space-between;
  column-gap:var(--s-8);
  margin-inline:var(--s-8);
  padding-bottom:var(--s-20);
}
.craft__thumb{
  position:relative; flex:1;
  aspect-ratio:16/9;
  overflow:hidden; cursor:pointer; z-index:20;
}
.craft__thumb img{ width:100%; height:100%; object-fit:cover; opacity:.55; transition:opacity .4s, transform .4s; }
.craft__thumb.is-active img{ opacity:1; }
@media (hover:hover) and (min-width:1024px){
  .craft__thumb:hover img{ transform:scale(1.07); }   /* M8 */
}

/* 選択枠マーカー : SP translateX / PC translateY */
.craft__marker{
  position:absolute; left:0; top:0; z-index:10;
  width:calc((100% - var(--s-8) * 4) / 5);
  height:auto; aspect-ratio:16/9;
  transition:transform .6s ease-in-out;
}
.craft__marker::before{
  content:""; position:absolute; left:50%; top:50%;
  width:calc(100% + 2px); height:calc(100% + 2px);
  border:1px solid var(--c-white-01);
  transform:translate(-50%,-50%);
}
.craft__marker[data-pos="1"]{ transform:translateX(0); }
.craft__marker[data-pos="2"]{ transform:translateX(calc(100% + var(--s-8))); }
.craft__marker[data-pos="3"]{ transform:translateX(calc(200% + var(--s-8) * 2)); }
.craft__marker[data-pos="4"]{ transform:translateX(calc(300% + var(--s-8) * 3)); }
.craft__marker[data-pos="5"]{ transform:translateX(calc(400% + var(--s-8) * 4)); }

@media (min-width:1024px){
  .craft__nav{
    flex-direction:column;
    width:11.5vh;
    row-gap:var(--s-15); column-gap:0;
    margin-inline:0; padding-bottom:0;
  }
  .craft__marker{ width:100%; }
  .craft__marker[data-pos="1"]{ transform:translateY(0); }
  .craft__marker[data-pos="2"]{ transform:translateY(calc(100% + var(--s-15))); }
  .craft__marker[data-pos="3"]{ transform:translateY(calc(200% + var(--s-15) * 2)); }
  .craft__marker[data-pos="4"]{ transform:translateY(calc(300% + var(--s-15) * 3)); }
  .craft__marker[data-pos="5"]{ transform:translateY(calc(400% + var(--s-15) * 4)); }
}
@media (min-width:1536px){ .craft__nav{ width:10vh; } }

/* --- コンテンツ列 : 全て右寄せ、左は空ける --- */
.craft__list{
  position:relative; z-index:20;
  margin-top:-100dvh;                /* UI レイヤーぶんを引き上げて重ねる */
  display:grid; grid-template-columns:1fr;
  row-gap:var(--s-560);              /* ★ SP は固定 560px */
  margin-right:var(--s-20);          /* ★ 右マージンのみ */
  padding-bottom:var(--s-8);
  overflow:hidden;
  color:var(--c-white-01);
}
@media (min-width:1024px){
  .craft__list{
    row-gap:50vh;                    /* ★ PC は 50vh に単位系が変わる */
    margin-right:var(--s-90);
  }
}

.craft__item{ display:flex; flex-direction:column; row-gap:0; width:100%; }

/* タイトル部 : 右寄せ / SP 780px 固定 → PC 1画面 */
.craft__item-head{
  display:flex; flex-direction:column;
  justify-content:center; align-items:flex-end;   /* ★ 右寄せ */
  text-align:right;
  height:var(--s-780);
}
@media (min-width:1024px){ .craft__item-head{ height:100vh; } }

.craft__num{
  position:relative;
  font-family:var(--font-eb-garamond);
  font-size:var(--f-20);
  line-height:1;
}
.craft__num i{                                    /* M6 下線ドロー */
  position:absolute; left:0; bottom:-.25em;
  width:100%; height:var(--s-1);
  background:var(--c-white-01);
  transform:scaleX(0); transform-origin:bottom left;
  transition:transform .9s var(--ease);
}
.craft__item.is-in .craft__num i{ transform:scaleX(1); }

.craft__item-ttl{ margin-top:.5em; font-size:var(--f-32); }
@media (min-width:1024px){ .craft__item-ttl{ font-size:var(--f-48); } }

/* 説明ボックス : SP 70vw → PC 40vw ＋ 30vh 落とし込み */
.craft__desc{
  position:relative;
  width:70vw; height:auto;
  margin-left:auto;
  margin-right:var(--s-8);
  padding-block:var(--s-30);
  padding-inline:var(--s-20);
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(5px);
}
@media (min-width:1024px){
  .craft__desc{
    width:40vw;
    margin-top:30vh;               /* ★ 意図的な"間" */
    padding-block:var(--s-70);
    padding-inline:var(--s-60);
  }
}
/* ★ 8px 外側へずれた輪郭 */
.craft__desc::before{
  content:""; position:absolute;
  top:-8px; left:-8px;
  width:calc(100% + 16px); height:calc(100% + 16px);
  border:1px solid rgba(255,255,255,.2);
  pointer-events:none;
}
.craft__desc p{ position:relative; z-index:10; font-size:var(--f-13); line-height:2; }
@media (min-width:1024px){ .craft__desc p{ font-size:var(--f-16); } }

/* 末尾フェード */
.craft__fade{
  position:relative; z-index:30;
  height:150svh;
  background:linear-gradient(0deg, #000 0%, #000 33.33%, rgba(0,0,0,0) 100%);
}

/* ---------------------------------------------------------------------------
   12. DELIVERY  (07)  ★ sticky + h-px
------------------------------------------------------------------------------ */
.delivery{ position:relative; width:100%; }
.delivery__media{ position:relative; width:100%; }

.delivery__pin{
  position:relative;
  background:var(--c-black-01);
  width:100%; height:100vh;
  overflow:hidden;
}
@media (min-width:1024px){
  .delivery__pin{
    position:sticky; top:0;
    height:1px;                    /* ★ 高さを潰して後続を上に流す */
    overflow:visible;
  }
}
/* PC では親(.delivery__pin)が overflow:visible のため、拡大中の映像が
   横方向にはみ出して文書幅を広げてしまう。ここで自前にクリップする */
.delivery__video{ position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; }
@media (min-width:1024px){ .delivery__video{ height:100vh; } }
.delivery__video img{ width:100%; height:100%; object-fit:cover; opacity:.8; }

/* ★ 右側だけを暗くする非対称スクリム（PC のみ） */
.delivery__scrim{ display:none; }
@media (min-width:1024px){
  /* 親(.delivery__pin)が h:1px のため bottom 基準だと画面外に出る。
     右側のコピーを読ませるためのスクリムなので top 基準で映像に重ねる */
  .delivery__scrim{
    display:block;
    position:absolute; top:0; left:0; width:100%; height:100vh;
    background:linear-gradient(270deg, rgba(0,0,0,.40) 19.93%, rgba(0,0,0,0) 68.65%);
  }
}

/* ★ 見出しは DOM 上に2つ。SPは映像の内側 / PCは外側 */
.delivery__head{
  position:relative; z-index:20;
  color:var(--c-white-01);
  margin-top:var(--s-60);
  margin-left:var(--baseX);
}
.delivery__head--sp{ display:block; }
.delivery__head--pc{ display:none; }
@media (min-width:1024px){
  .delivery__head--sp{ display:none; }
  .delivery__head--pc{ display:block; }
}

/* ★ 5項目同時反転 */
.delivery__copy{
  position:relative;
  background:var(--c-white-01);
  color:var(--c-black-01);
  width:100%;
  padding-top:var(--s-50);
  padding-inline:var(--baseX);
  padding-bottom:var(--s-50);
}
.delivery__copy p{ font-size:var(--f-16); line-height:2; }
@media (min-width:1024px){
  .delivery__copy{
    background:transparent;
    color:var(--c-white-01);
    width:24vw;
    margin-top:var(--s-240);
    margin-left:auto;
    margin-right:var(--s-70);
    padding:0 0 var(--s-160);
  }
  .delivery__copy p{ font-size:var(--f-24); }
}

/* ---------------------------------------------------------------------------
   13. TALENT  (08)
------------------------------------------------------------------------------ */
.talent{
  position:relative; width:100%;
  background:var(--c-white-01);
  color:var(--c-black-01);
  padding-top:var(--s-120);
}
@media (min-width:1024px){ .talent{ padding-top:var(--s-180); } }

/* ★ 左右余白 14px と gap 14px が同値 = 正方モジュール */
.talent__inner{ margin-inline:var(--s-14); }
.talent__grid{
  display:grid; grid-template-columns:1fr;
  row-gap:14px;
}
.talent__grid > div{ width:100%; aspect-ratio:3/4; overflow:hidden; }  /* SP 縦長 */
@media (min-width:1024px){
  .talent__inner{ margin-inline:var(--s-80); }
  .talent__grid{ row-gap:var(--s-60); }
  .talent__grid > div{ aspect-ratio:3/2; }                              /* PC 横長 */
}

/* ★ 左寄せ縦積み → 右寄せ横並び */
.talent__cap{
  margin-left:var(--s-16);
  margin-top:var(--s-16);
}
.talent__cap h2{ font-family:var(--font-cormorant); font-size:var(--f-40); line-height:1.25; }
.talent__cap p { font-size:var(--f-13); line-height:2; margin-top:0; }
@media (min-width:1024px){
  .talent__cap{
    display:flex; align-items:center; justify-content:flex-end;
    column-gap:var(--s-24);
  }
  .talent__cap h2{ font-size:var(--f-70); }
  .talent__cap p { font-size:var(--f-16); margin-top:.5em; }   /* ★ わずかにずらす */
}

/* ---------------------------------------------------------------------------
   14. ABOUT  (09)
------------------------------------------------------------------------------ */
.about{
  position:relative; width:100%;
  background:var(--c-white-01);
  color:var(--c-black-01);
  padding-top:var(--s-140);
}
@media (min-width:1024px){ .about{ padding-top:var(--s-220); padding-inline:var(--s-120); } }

.about__cols{ display:flex; flex-direction:column; row-gap:var(--s-40); }
.about__fig { margin:0; }
.about__fig img{ width:100%; display:block; }
.about__text{ margin-inline:var(--baseX); }
@media (min-width:1024px){
  .about__cols{
    flex-direction:row-reverse;        /* ★ 順序反転 */
    align-items:center;
    justify-content:space-between;
  }
  .about__fig { width:58%; }           /* ★ 半々ではない */
  .about__text{ margin-inline:0; flex:1; }
}

.about__text h2{ font-family:var(--font-cormorant); font-size:var(--f-30); line-height:1; }
.about__text p { margin-top:1.5em; font-size:var(--f-14); line-height:2; white-space:pre-line; }
@media (min-width:1024px){
  .about__text h2{ font-size:var(--f-44); }
  .about__text p { font-size:var(--f-20); }
}

/* ★ em パディング / 角丸ゼロ / 3:1 の扁平矩形 */
.btn{
  display:inline-block;
  background:var(--c-black-01);
  color:var(--c-white-01);
  font-family:var(--font-inter);
  padding:.4em 1.2em;
  margin-top:var(--s-24);
  font-size:var(--f-14);
  letter-spacing:.08em;
  transition:opacity .3s var(--ease);
}
.btn:hover{ opacity:.7; }
@media (min-width:1024px){ .btn{ font-size:var(--f-16); } }

/* ★ 注釈は PC のみ右揃え（対角バランス） */
.about__note{
  font-size:var(--f-12); line-height:1.5;
  margin-top:4em;
  margin-inline:var(--baseX);
}
@media (min-width:1024px){
  .about__note{
    margin-left:auto; margin-right:0;
    text-align:right;
    font-size:var(--f-14);
  }
}

/* ---------------------------------------------------------------------------
   15. FOOTER  (10)
------------------------------------------------------------------------------ */
.footer{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  row-gap:var(--s-80);
  background:var(--c-white-01);
  color:var(--c-black-01);
  width:100%;
  padding-block:var(--s-60);
}
@media (min-width:1024px){
  .footer{
    padding-top:var(--s-200); padding-bottom:var(--s-120);
    padding-inline:var(--s-80);
    row-gap:0;
  }
}

/* ★ ロゴマークは複製。SP=最上部中央 / PC=最下部右端 */
.footer__mark{
  display:flex; flex-direction:column; align-items:center;
  row-gap:var(--s-20);
}
.footer__mark i{ display:block; width:var(--s-8); height:var(--s-8); border-radius:50%; background:currentColor; }
.footer__mark p{ font-family:var(--font-cormorant); font-size:var(--f-24); line-height:1; letter-spacing:.2em; }
.footer__mark--sp{ display:flex; }
.footer__mark--pc{ display:none; }
@media (min-width:1024px){
  .footer__mark--sp{ display:none; }
  .footer__mark--pc{
    display:flex;
    margin-top:calc(var(--s-24) * -1);   /* ★ ベースライン列から1つだけ上へ */
  }
}

.footer__body{ display:flex; flex-direction:column; row-gap:var(--s-30); }
@media (min-width:1024px){
  .footer__body{
    flex-direction:row;
    align-items:baseline;                /* ★ center → baseline へ基準変更 */
    justify-content:space-between;
    width:100%;
    column-gap:var(--s-80); row-gap:var(--s-16);
  }
}

.footer__brand{
  display:flex; flex-direction:column; align-items:center;
  row-gap:var(--s-16);
}
.footer__brand > a{ font-family:var(--font-cormorant); font-size:var(--f-20); letter-spacing:.24em; }
.footer__sns{ display:flex; align-items:center; justify-content:center; column-gap:var(--s-24); }
.footer__sns a{
  width:var(--s-30); height:var(--s-30);       /* ★ SP のほうが大きい */
  border:1px solid currentColor; border-radius:50%;
}
@media (min-width:1024px){
  .footer__brand{ row-gap:var(--s-24); }
  .footer__sns{ column-gap:var(--s-20); align-self:flex-start; justify-content:flex-start; }
  .footer__sns a{ width:var(--s-24); height:var(--s-24); }
}

.footer__bottom{
  display:flex; flex-direction:column; align-items:center;
  row-gap:var(--s-50);
}
@media (min-width:1024px){
  .footer__bottom{ flex-direction:row; width:100%; flex:1; justify-content:space-between; }
}
.footer__links{
  display:flex; align-items:center; justify-content:center;
  column-gap:var(--s-50);
  font-size:var(--f-14); font-family:var(--font-cormorant);
}
.footer__copy{ font-size:var(--f-14); font-family:var(--font-cormorant); }

/* ---------------------------------------------------------------------------
   16. GUIDE OVERLAY（検証用・任意）
------------------------------------------------------------------------------ */
.is-guide .message__panel,
.is-guide .design__fig,
.is-guide .select__hero,
.is-guide .select__row-fig,
.is-guide .craft__desc,
.is-guide .delivery__copy,
.is-guide .about__fig{ outline:1px dashed rgba(255,0,80,.8); outline-offset:-1px; }

.guide-toggle{
  position:fixed; left:12px; bottom:12px; z-index:90;
  font-family:var(--font-inter); font-size:11px; letter-spacing:.08em;
  background:rgba(0,0,0,.7); color:#fff; border:1px solid rgba(255,255,255,.4);
  padding:6px 10px; cursor:pointer;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}