:root{
  --bg:#f4f1ea;
  --paper:#ece7de;
  --ink:#151515;
  --muted:#746f68;
  --line:rgba(21,21,21,.13);
  --violet:#725df5;
  --pink:#ff8eaa;
  --lime:#dbff68;
  --cyan:#79d9cd;
  --yellow:#ffd76c;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#d7d4cf;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Yu Gothic",YuGothic,sans-serif;
  color:var(--ink);
}
a,button{font:inherit}

/* ===== 画像保護：右クリック・長押し・ドラッグによるDL防止 ===== */
.shell img {
  -webkit-touch-callout: none; /* iOS 長押しメニュー無効 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;     /* Safariでのドラッグ禁止 */
  pointer-events: none;        /* 右クリックイベント遮断 */
}
/* リンク付きタイルはa要素がクリックを処理するためimg側はnoneでOK */

.shell{
  width:min(100%,430px);
  min-height:100vh;
  margin:0 auto;
  background:var(--bg);
  overflow:hidden;
  box-shadow:0 0 44px rgba(0,0,0,.13);
}
.topbar{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:30;
}
.logo{
  font-weight:900;
  font-size:19px;
  letter-spacing:-.045em;
}
.logo b{color:var(--violet)}
.topbar a{
  color:var(--ink);
  text-decoration:none;
  font-size:10px;
  letter-spacing:.14em;
  border-bottom:1px solid var(--ink);
  padding-bottom:2px;
}
.kicker{
  font-size:9px;
  letter-spacing:.17em;
  color:var(--muted);
}
.hero{
  min-height:735px;
  padding:50px 22px 34px;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  width:260px;height:260px;border-radius:50%;
  right:-120px;top:120px;
  background:radial-gradient(circle,rgba(114,93,245,.18),rgba(114,93,245,0) 70%);
}
.hero h1{
  margin:14px 0 0;
  font-size:46px;
  line-height:1.06;
  letter-spacing:-.057em;
}
.hero p{
  margin:18px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.9;
}
.hero-copy-strong{
  margin-top:10px;
  display:inline-block;
  font-size:12px;
  font-weight:800;
}
.choice-stage{
  height:365px;
  position:relative;
  margin-top:44px;
}
.choice-label{
  position:absolute;top:0;left:0;
  display:flex;gap:10px;align-items:center;
  font-size:10px;letter-spacing:.12em
}
.choice-label::before{content:"";width:38px;height:1px;background:var(--ink)}
.choice{
  position:absolute;border:0;padding:0;background:none;cursor:pointer;transition:.35s ease;
}
.choice:active{transform:scale(.92)}
.shape1{
  width:116px;height:116px;border-radius:50%;
  left:12px;top:94px;
  background:radial-gradient(circle at 28% 27%,#fff 0 5%,transparent 7%),linear-gradient(145deg,#988cff,#725df5 60%,#5644dc);
  box-shadow:0 24px 50px rgba(114,93,245,.18);
}
.shape2{
  width:128px;height:82px;right:0;top:62px;
  border-radius:58% 42% 61% 39%/45% 62% 38% 55%;
  background:linear-gradient(135deg,#ffd6df,#ff8eaa);
  transform:rotate(-11deg);
}
.shape3{
  width:100px;height:148px;right:62px;bottom:10px;
  border:1px solid rgba(21,21,21,.25);border-radius:55px;
}
.shape3::before{
  content:"";position:absolute;inset:11px;border-radius:55px;
  background:linear-gradient(180deg,#d8f5ef,#79d9cd);
}
.shape4{width:142px;height:142px;left:24px;bottom:-2px}
.shape4::before,.shape4::after{content:"";position:absolute;background:rgba(21,21,21,.68)}
.shape4::before{width:130px;height:1px;left:2px;top:65px;transform:rotate(25deg)}
.shape4::after{width:1px;height:118px;left:68px;top:10px;transform:rotate(25deg)}
.shape5{
  width:82px;height:82px;right:10px;top:174px;
  background-image:radial-gradient(var(--ink) 1.5px,transparent 1.6px);
  background-size:12px 12px;opacity:.72;
}
.trace-layer{position:absolute;inset:0;pointer-events:none}
.trace{
  position:absolute;width:8px;height:8px;border-radius:50%;background:var(--ink);
  animation:trace .45s ease forwards;opacity:0;
}
.trace::after{
  content:"";position:absolute;width:110px;height:1px;left:4px;top:4px;
  background:linear-gradient(90deg,var(--ink),transparent);transform-origin:left center;
}
@keyframes trace{to{opacity:.8}}
.progress{display:flex;gap:8px;align-items:center}
.progress i{width:34px;height:3px;background:rgba(21,21,21,.1);border-radius:99px}
.progress i.on{background:var(--ink)}
.progress span{font-size:9px;color:var(--muted);margin-left:5px;letter-spacing:.1em}


/* ===== MORPHING PUZZLE HERO ===== */
.hero{
  min-height:820px;
  padding:42px 18px 34px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 12%, rgba(114,93,245,.10), transparent 30%),
    linear-gradient(180deg,#f7f4ee 0%,#f4f1ea 100%);
}
.hero-copy{
  position:relative;
  z-index:8;
  padding:4px 4px 0;
}
.hero-copy .kicker{
  display:block;
  margin-bottom:10px;
}
.hero-copy h1{
  margin:0;
  font-size:44px;
  line-height:1.04;
  letter-spacing:-.06em;
  max-width:310px;
}
.hero-copy p{
  margin:14px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.85;
}
.morph-wrap{
  margin-top:26px;
  position:relative;
  height:470px;
  touch-action:pan-y;
  user-select:none;
}
.morph-stage{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:30px;
}
.morph-tile{
  position:absolute;
  overflow:hidden;
  border-radius:24px;
  transition:
    left .68s cubic-bezier(.2,.8,.2,1),
    top .68s cubic-bezier(.2,.8,.2,1),
    width .68s cubic-bezier(.2,.8,.2,1),
    height .68s cubic-bezier(.2,.8,.2,1),
    transform .68s cubic-bezier(.2,.8,.2,1),
    border-radius .68s ease,
    opacity .4s ease,
    box-shadow .5s ease;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
  cursor:pointer;
  will-change:left,top,width,height,transform;
  background-size:cover;
  background-position:center;
}
.morph-tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.38));
}
.morph-tile .tag{
  position:absolute;
  left:12px;
  bottom:10px;
  z-index:2;
  color:#fff;
  font-size:8px;
  letter-spacing:.14em;
  font-weight:800;
}
.morph-tile .maybe{
  position:absolute;
  right:10px;
  top:10px;
  z-index:3;
  padding:6px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  color:#111;
  font-size:8px;
  font-weight:800;
  opacity:0;
  transform:translateY(-4px) scale(.95);
  transition:.25s ease;
}
.morph-tile.liked .maybe{
  opacity:1;
  transform:none;
}
.morph-tile.liked{
  box-shadow:0 24px 54px rgba(0,0,0,.18);
}
.morph-tile:nth-child(1){background:linear-gradient(155deg,#d7b8c4,#8b5f78 56%,#4b3648)}
.morph-tile:nth-child(2){background:linear-gradient(155deg,#d2e2ff,#6278dd 60%,#1f2441)}
.morph-tile:nth-child(3){background:linear-gradient(155deg,#d0efe7,#67bea9 60%,#2a514a)}
.morph-tile:nth-child(4){background:linear-gradient(155deg,#f7c4d2,#d96c8e 52%,#5e3448)}
.morph-tile:nth-child(5){background:linear-gradient(155deg,#ead9a8,#c39a52 56%,#44381f)}
.morph-guide{
  position:absolute;
  left:14px;
  right:14px;
  bottom:12px;
  z-index:9;
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
}
.morph-guide span{
  font-size:9px;
  letter-spacing:.13em;
  color:rgba(21,21,21,.56);
}
.morph-dots{
  display:flex;
  gap:5px;
}
.morph-dots i{
  width:18px;
  height:3px;
  border-radius:99px;
  background:rgba(21,21,21,.12);
}
.morph-dots i.on{background:var(--ink)}
.morph-prompt{
  position:absolute;
  left:50%;
  bottom:48px;
  transform:translate(-50%,12px);
  z-index:12;
  width:78%;
  border-radius:999px;
  background:#151515;
  color:#fff;
  padding:13px 16px;
  text-align:center;
  font-size:11px;
  font-weight:800;
  opacity:0;
  pointer-events:none;
  transition:.35s ease;
  box-shadow:0 18px 40px rgba(0,0,0,.16);
}
.morph-prompt.show{
  opacity:1;
  transform:translate(-50%,0);
}

.reveal{
  margin:0 12px 44px;padding:18px;background:#171717;border-radius:28px;color:white;display:none;
}
.reveal.show{display:block;animation:up .65s ease}
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.reveal h2{font-size:30px;line-height:1.3;letter-spacing:-.04em;margin:12px 0 24px}
.result{
  aspect-ratio:4/5;border-radius:20px;position:relative;overflow:hidden;
  background:
  radial-gradient(circle at 68% 26%,rgba(255,255,255,.9) 0 5%,transparent 6%),
  linear-gradient(160deg,#131a36,#5f4f91 44%,#f2af8b 69%,#f0d3b6);
}
.result::before{
  content:"";position:absolute;width:170%;height:54%;left:-34%;bottom:-15%;
  background:#22202a;border-radius:50%;transform:rotate(-8deg);
}
.result::after{
  content:"";position:absolute;width:110px;height:210px;left:50%;bottom:38px;
  transform:translateX(-50%);border-radius:80px 80px 18px 18px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.07));opacity:.34;
}
.result-foot{display:flex;justify-content:space-between;align-items:flex-end;padding:18px 5px 5px}
.result-foot strong{font-size:13px}
.result-foot span{font-size:10px;color:rgba(255,255,255,.55)}

.section{
  padding:82px 22px;
  position:relative;
  border-top:1px solid var(--line);
}
.section h2{
  font-size:35px;line-height:1.18;letter-spacing:-.05em;margin:12px 0 22px;
}
.section p{
  font-size:13px;line-height:1.95;color:var(--muted);margin:0;
}
/* ─── PROBLEM：全要素を画像フレーム内に集約 ─── */
.problem{
  background:#f0ede6;
  padding:28px 18px 28px;
  border-top:none;
}
.problem-frame{
  position:relative;
  overflow:hidden;
  margin:0 -22px;
  width:calc(100% + 44px);
}
.problem-bg{
  display:block;width:100%;
  aspect-ratio:3/4;object-fit:cover;object-position:center 28%;
}
.problem-frame-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.12) 42%,
    rgba(0,0,0,.55) 68%,
    rgba(0,0,0,.88) 100%
  );
}
.problem-frame-text{
  position:absolute;top:0;left:0;right:0;
  padding:28px 24px 0;
}
.problem-frame-bottom{
  position:absolute;bottom:0;left:0;right:0;
  padding:0 24px 28px;
}
.problem .kicker{
  color:rgba(255,255,255,.52);display:block;margin-bottom:12px;
}
.problem-headline{
  font-size:clamp(36px,9.5vw,50px);font-weight:900;
  line-height:1.0;letter-spacing:-.05em;
  color:#fff;margin:0;
  text-shadow:0 2px 16px rgba(0,0,0,.5);
}
.problem-lines{display:flex;flex-direction:column;}
.problem-line{
  display:flex;align-items:center;gap:12px;
  padding:11px 0;border-top:1px solid rgba(255,255,255,.18);
  font-size:13px;font-weight:700;color:rgba(255,255,255,.9);
  letter-spacing:-.01em;
}
.problem-line b{
  font-size:9px;letter-spacing:.1em;
  color:rgba(255,255,255,.38);flex-shrink:0;font-weight:500;
}
/* ─── STATEMENT：テキスト→画像ストリップ→テキスト ─── */
.statement{
  background:#fff;
  padding:56px 22px 60px;
  overflow:hidden;
}
.statement .kicker{
  color:rgba(0,0,0,.32);display:block;margin-bottom:20px;
}
.statement-h2{
  font-size:clamp(38px,10vw,52px);font-weight:900;
  line-height:1.0;letter-spacing:-.055em;
  color:#111;margin:0 0 32px;
}
.statement-strip{
  margin:0 -22px 32px;
  width:calc(100% + 44px);
  position:relative;
  border-left:none;
  border-right:none;
  border-top:2px solid #111;
  border-bottom:2px solid #111;
  padding:10px;
  background:#fff;
}
.statement-strip img{
  display:block;width:100%;
  aspect-ratio:4/3;object-fit:cover;object-position:center 38%;
}
.statement-strip-label{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 2px 0;
  font-size:9px;letter-spacing:.12em;color:rgba(0,0,0,.35);
  font-weight:500;
}
.statement-strip-label::after{
  content:"INTUITION";
  font-size:9px;letter-spacing:.12em;color:rgba(0,0,0,.3);
}
.statement-foot{margin-top:0;}
.statement-foot p{
  font-size:13px;line-height:1.85;color:rgba(0,0,0,.5);margin:0 0 14px;
}
.statement-foot strong{
  display:block;font-size:15px;font-weight:800;
  line-height:1.6;letter-spacing:-.02em;color:#111;
}

/* ─── LIKE MAYBE：映画ポスタースタイル ─── */
.like-maybe{
  position:relative;
  background:#000;
  overflow:hidden;
  padding:0;
}
.like-maybe-poster{
  display:block;
  width:calc(100% + 44px);
  margin-left:-22px;
  aspect-ratio:2/3;
  object-fit:cover;object-position:center 40%;
  opacity:.82;
}
.like-maybe-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,.70) 0%,
      rgba(0,0,0,.10) 30%,
      rgba(0,0,0,.05) 55%,
      rgba(0,0,0,.75) 100%
    );
}
.like-maybe-inner{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  justify-content:space-between;
  padding:40px 24px 36px;
  color:#fff;
}
.like-maybe-top .kicker{
  color:rgba(255,255,255,.45);
  letter-spacing:.2em;font-size:9px;
}
.like-maybe-top .poster-tagline{
  margin-top:20px;
  font-size:22px;font-style:italic;
  font-weight:700;color:rgba(255,255,255,.92);
  letter-spacing:-.01em;line-height:1.5;
  text-shadow:0 2px 16px rgba(0,0,0,.5);
}
.like-maybe-bottom{}
.like-maybe-title{
  font-size:clamp(32px,8.5vw,46px);
  font-weight:900;line-height:1.05;
  letter-spacing:-.05em;color:#fff;
  margin:0 0 20px;
  text-shadow:0 2px 24px rgba(0,0,0,.6);
}
.like-maybe-rule{
  width:40px;height:2px;background:#fff;
  margin-bottom:16px;opacity:.5;
}
.like-maybe-credits{
  font-size:10px;letter-spacing:.08em;
  color:rgba(255,255,255,.5);
  line-height:1.7;font-weight:400;
}
.like-maybe .quote,.like-note{display:none;}

.puzzle-wrap{
  padding:0 0 84px;
  background:var(--bg);
}
.topic{
  margin-top:40px;
  border-top:1px solid #e0ddd8;
  padding-top:0;
}
.topic:first-child{margin-top:0;border-top:none;}

/* ヘッダー：左にカテゴリ、右に VIEW ALL */
.topic-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 18px 16px;
}
.topic-head div{
  display:flex;align-items:baseline;gap:10px;
}
.topic-head div span{
  font-size:8px;
  letter-spacing:.18em;
  color:#bbb;
  text-transform:uppercase;
}
.topic-head h3{
  margin:0;
  font-size:22px;
  letter-spacing:-.05em;
  font-weight:900;
}
/* VIEW ALL：目立つタグ風 */
.topic-head a{
  display:inline-flex;align-items:center;gap:5px;
  color:#111;
  text-decoration:none;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  border:1.5px solid #111;
  border-radius:999px;
  padding:6px 14px;
  transition:background .18s,color .18s;
}
.topic-head a:hover{background:#111;color:#fff;}
.topic-head a::after{content:'\2192';font-weight:400;}

.puzzle{
  display:grid;
  gap:3px;
  overflow:hidden;
  border-radius:0;
  background:#dedad4;
}

/* ── P1: 左メイン縦長 + 右2枚 ──
   左タイル: ~215px幅 × 340px高 ≈ 9:14（ほぼ縦型待ち受け比率）
   右上・右下: 各170px */
.puzzle-p1{
  grid-template-columns:1.25fr 1fr;
  /* 行高はtb/tcのaspect-ratioが自動決定 */
  grid-template-areas:
    "a b"
    "a c";
}

/* ── P2: 右メイン縦長 + 左2枚（P1の左右反転）── */
.puzzle-p2{
  grid-template-columns:1fr 1.25fr;
  grid-template-areas:
    "b a"
    "c a";
}

/* ── P3: 縦3ストリップ（同サイズ3枚横並び）── */
.puzzle-p3{
  grid-template-columns:1fr 1fr 1fr;
  grid-template-areas:
    "a b c";
}

/* ── P4: 大縦長 + 4枚（2×2）──
   左: ~215px × 380px　右: 各160px × 188px */
.puzzle-p4{
  grid-template-columns:1.25fr 1fr;
  grid-template-rows:190px 190px;
  grid-template-areas:
    "a b"
    "a c";
  /* d,e は3行目で使う場合のみ追加 */
}
.tile{
  position:relative;
  overflow:hidden;
  min-height:0;
  display:flex;           /* 子imgが高さを確実に継承するため */
  text-decoration:none;
  background:#dedad4;
  align-self:stretch;
  justify-self:stretch;
}
.tile img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .4s ease;
}
.tile:hover img{transform:scale(1.05);}
.tile::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.22));
  pointer-events:none;
}
.tile span{display:none;} /* 番号は非表示 */
.ta{grid-area:a}.tb{grid-area:b}.tc{grid-area:c}.td{grid-area:d}.te{grid-area:e}

/* P1/P2: b/cのaspect-ratioが行高を決定。aは自動でスパン分の高さになる */
.puzzle-p1 .tb,.puzzle-p1 .tc,
.puzzle-p2 .tb,.puzzle-p2 .tc{ aspect-ratio:8/16; }
/* P3: 3枚すべてaspect-ratio統一 */
.puzzle-p3 .ta,.puzzle-p3 .tb,.puzzle-p3 .tc{ aspect-ratio:8/16; }

/* ─── DISCOVERY：展覧会スタイル ─── */
.discovery{
  background:#f8f7f4;
  padding:60px 0 56px;
  overflow:hidden;
}
.discovery-header{
  padding:0 22px;
  margin-bottom:32px;
}
.discovery .kicker{color:rgba(0,0,0,.32);}
.discovery h2{
  font-size:clamp(36px,9vw,50px);
  font-weight:900;line-height:1.05;
  letter-spacing:-.055em;margin:12px 0 16px;color:#111;
}
.discovery-lead{
  font-size:13px;line-height:1.85;color:rgba(0,0,0,.48);
}
.discovery-canvas{
  position:relative;
  width:calc(100% + 44px);
  margin:0 -22px 28px;
}
.discovery-img{
  display:block;width:100%;
  aspect-ratio:4/3;
  object-fit:cover;object-position:center 45%;
}
.discovery-caption{
  padding:16px 22px 0;
  display:flex;justify-content:space-between;align-items:flex-start;
}
.discovery-note{
  font-size:11px;line-height:1.7;color:rgba(0,0,0,.4);
  max-width:240px;
}
.discovery-caption-tag{
  font-size:9px;letter-spacing:.14em;color:rgba(0,0,0,.28);
  white-space:nowrap;padding-top:2px;
}

/* ════════════════════════════════
   DON'T THINK ゲーム CSS
════════════════════════════════ */
.special{background:#0d0d0d;}
.special>.kicker{color:rgba(255,255,255,.38);}
.special>h2{color:#fff;}
.special>p{color:rgba(255,255,255,.45);}

/* ─ ゲームコンテナ ─ */
.dt-game{
  margin-top:28px;
  border-radius:20px;
  overflow:hidden;
  background:#111;
  border:1px solid rgba(255,255,255,.08);
  position:relative;
}

/* ─ IDLE画面 ─ */
.dt-idle{
  padding:52px 24px 44px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  color:#fff;position:relative;overflow:hidden;
  min-height:440px;justify-content:center;
}
.dt-idle::before{
  content:"DON'T\ATHINK";white-space:pre;
  position:absolute;font-size:130px;font-weight:900;letter-spacing:-.08em;
  color:rgba(255,255,255,.03);line-height:.85;
  top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;
}
.dt-idle-kicker{
  font-size:9px;letter-spacing:.22em;color:rgba(255,255,255,.3);margin-bottom:20px;
  position:relative;z-index:1;
}
.dt-idle-title{
  font-size:72px;font-weight:900;letter-spacing:-.07em;line-height:.88;
  color:#fff;margin:0 0 14px;position:relative;z-index:1;
}
.dt-idle-sub{
  font-size:12px;color:rgba(255,255,255,.35);margin:0 0 44px;letter-spacing:.05em;
  position:relative;z-index:1;
}
.dt-idle-preview{
  display:flex;gap:22px;margin-bottom:44px;
  justify-content:center;flex-wrap:wrap;
  position:relative;z-index:1;
}
.dt-idle-sym{
  font-size:36px;color:rgba(255,255,255,.10);
  animation:dt-float 3.5s ease-in-out infinite;
}
.dt-idle-sym:nth-child(1){color:rgba(255,107,107,.2);animation-delay:0s;}
.dt-idle-sym:nth-child(2){color:rgba(255,217,61,.2);animation-delay:.5s;}
.dt-idle-sym:nth-child(3){color:rgba(107,203,119,.2);animation-delay:1s;}
.dt-idle-sym:nth-child(4){color:rgba(77,150,255,.2);animation-delay:1.5s;}
.dt-idle-sym:nth-child(5){color:rgba(199,125,255,.2);animation-delay:.8s;}
.dt-idle-sym:nth-child(6){color:rgba(255,159,67,.2);animation-delay:.3s;}
.dt-start-btn{
  width:100%;max-width:260px;
  padding:20px;border:1.5px solid rgba(255,255,255,.4);background:transparent;
  color:#fff;font-size:13px;font-weight:900;letter-spacing:.22em;
  border-radius:3px;cursor:pointer;
  transition:background .25s,color .25s,border-color .25s;
  position:relative;z-index:1;
}
.dt-start-btn:hover{background:#fff;color:#111;border-color:#fff;}
.dt-idle-note{
  margin-top:14px;font-size:9px;color:rgba(255,255,255,.22);letter-spacing:.06em;
  position:relative;z-index:1;
}
.dt-idle-flow{
  display:flex;align-items:center;gap:5px;justify-content:center;
  font-size:8px;letter-spacing:.14em;color:rgba(255,255,255,.26);
  margin:0 0 18px;position:relative;z-index:1;
}
.dt-flow-arr{color:rgba(255,255,255,.14);}

/* ─ PLAYING画面 ─ */
.dt-playing{
  height:520px;position:relative;display:flex;flex-direction:column;
}
.dt-timer-bar{
  height:2px;background:rgba(255,255,255,.1);flex-shrink:0;
}
.dt-timer-fill{
  height:100%;background:#fff;width:100%;
}
.dt-round-label{
  position:absolute;top:12px;left:0;right:0;
  text-align:center;font-size:9px;letter-spacing:.2em;color:rgba(255,255,255,.28);
}
.dt-stage{flex:1;position:relative;}
.dt-round-type{
  color:rgba(255,255,255,.55);letter-spacing:.15em;
}

/* ─ シンボル（Round 1）─ */
.dt-sym{
  position:absolute;
  display:flex;align-items:center;justify-content:center;
  /* デフォルトは各シンボルの固有色（--sc）でうっすら発光 */
  color:var(--sc, rgba(255,255,255,.7));
  text-shadow:
    0 0 16px var(--sc, rgba(255,255,255,.3)),
    0 0 40px var(--sc, rgba(255,255,255,.15));
  cursor:pointer;user-select:none;-webkit-user-select:none;
  animation:dt-float 3s ease-in-out infinite, dt-pulse 2.4s ease-in-out infinite;
  transition:color .18s,opacity .25s,filter .18s,text-shadow .22s,transform .18s;
  touch-action:manipulation;line-height:1;
}
/* 選択時：さらに強く光る */
.dt-sym.picked{
  color:#fff;
  text-shadow:
    0 0 20px var(--pc,#ffd93d),
    0 0 50px var(--pc,#ffd93d),
    0 0 90px var(--pc,#ffd93d);
  filter:brightness(1.4);
  transform:scale(1.18) !important;
  animation-play-state:paused;
}
.dt-sym.dimmed{opacity:.06;filter:blur(1.5px);}

/* 鼓動アニメーション（scale 1→1.06→1） */
@keyframes dt-pulse{
  0%,100%{filter:brightness(1);}
  50%{filter:brightness(1.3);}
}

/* ─ テクスチャ（Round 2）─ */
.dt-sym--tex{
  border:1px solid rgba(255,255,255,.1);
  animation:dt-float-y 3s ease-in-out infinite;
  transition:opacity .25s,filter .2s,outline .15s,box-shadow .15s;
}
.dt-sym--tex.picked{
  outline:2px solid var(--pc,#ffd93d);
  outline-offset:4px;
  box-shadow:0 0 24px var(--pc,#ffd93d);
  filter:brightness(1.25);
}
.dt-sym--tex.dimmed{opacity:.08;filter:blur(2px);}

/* ─ シーン断片（Round 3）─ */
.dt-sym--scene{
  background-repeat:no-repeat;
  overflow:hidden;
  animation:dt-float-y 3s ease-in-out infinite;
  transition:opacity .25s,filter .2s,outline .15s,box-shadow .15s,transform .2s;
  filter:grayscale(.35) brightness(.8);  /* 断片は少し暗め・脱色で何か分からなくさせる */
}
.dt-sym--scene.picked{
  outline:2px solid var(--pc,#ffd93d);
  outline-offset:4px;
  box-shadow:0 0 28px var(--pc,#ffd93d);
  filter:brightness(1.15) saturate(1.4) grayscale(0); /* タップで鮮明化 */
}
.dt-sym--scene.dimmed{opacity:.07;filter:blur(3px) grayscale(1) brightness(.5);}

@keyframes dt-float{
  0%,100%{transform:translateY(0) rotate(0deg);}
  33%{transform:translateY(-9px) rotate(2.5deg);}
  66%{transform:translateY(6px) rotate(-2deg);}
}
@keyframes dt-float-y{
  0%,100%{transform:translateY(0);}
  33%{transform:translateY(-8px);}
  66%{transform:translateY(5px);}
}

/* ─ 波紋 ─ */
.dt-ripple,.dt-ripple2{
  position:absolute;border-radius:50%;
  border:1px solid var(--rc,#ffd93d);
  box-shadow:0 0 6px var(--rc,#ffd93d);
  transform:translate(-50%,-50%);
  pointer-events:none;
  animation:dt-ripple-out .7s ease-out forwards;
}
.dt-ripple2{opacity:.4;animation-delay:.15s;}
@keyframes dt-ripple-out{
  0%{width:50px;height:50px;opacity:.9;}
  100%{width:180px;height:180px;opacity:0;}
}

/* ─ 暗転オーバーレイ ─ */
.dt-blackout{
  position:absolute;inset:0;background:#000;
  z-index:10;pointer-events:none;
  transition:opacity .45s ease;
}

/* ─ RESULT画面 ─ */
/* ── 結果画面 ── */
.dt-result{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;color:#fff;
  padding:0;
  animation:dt-result-in .55s cubic-bezier(.22,1,.36,1) both;
}
@keyframes dt-result-in{
  from{opacity:0;transform:translateY(20px);}
  to  {opacity:1;transform:translateY(0);}
}

/* 画像フレーム */
.dt-result-img{
  width:100%;
  aspect-ratio:3/4;
  border-radius:18px;
  overflow:hidden;
  background:#111;
  position:relative;
  box-shadow:0 28px 72px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.07);
}
.dt-result-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  animation:dt-img-reveal .9s ease both;
}
@keyframes dt-img-reveal{
  from{transform:scale(1.07);filter:brightness(.5);}
  to  {transform:scale(1);   filter:brightness(1);}
}
/* 画像上グラデーション：下70%から真っ黒に */
.dt-result-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,
    transparent 30%,
    rgba(0,0,0,.5) 58%,
    rgba(0,0,0,.92) 100%
  );
  pointer-events:none;
}
/* 画像内テキスト */
.dt-result-img-text{
  position:absolute;bottom:0;left:0;right:0;
  padding:24px 22px 26px;
  z-index:1;text-align:left;
}
.dt-result-label{
  display:inline-flex;align-items:center;gap:7px;
  font-size:8px;letter-spacing:.22em;
  color:rgba(255,255,255,.65);
  margin-bottom:10px;
}
.dt-result-label::before{
  content:'';display:block;width:14px;height:1px;
  background:rgba(255,255,255,.5);
}
.dt-result-copy{
  font-size:clamp(18px,5vw,22px);
  font-weight:800;letter-spacing:-.04em;
  color:#fff;margin:0;line-height:1.2;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}

/* ダウンロード訴求エリア */
.dt-result-action{
  width:100%;
  margin-top:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:18px 20px;
  text-align:left;
  display:flex;align-items:center;gap:14px;
}
.dt-result-action-icon{
  width:44px;height:44px;border-radius:10px;
  background:rgba(255,255,255,.1);
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
}
.dt-result-action-text{
  flex:1;
}
.dt-result-action-text strong{
  display:block;font-size:14px;font-weight:800;
  color:#fff;letter-spacing:-.02em;margin-bottom:3px;
}
.dt-result-action-text span{
  font-size:11px;color:rgba(255,255,255,.45);
  line-height:1.4;
}
.dt-result-action-btn{
  display:block;width:100%;
  margin-top:14px;
  background:#fff;color:#111;
  border:none;border-radius:10px;
  padding:14px;
  font-size:14px;font-weight:800;
  cursor:pointer;letter-spacing:-.02em;
  transition:opacity .15s;
}
.dt-result-action-btn:active{opacity:.8;}

/* もう一回ボタン */
.dt-result-btns{
  display:flex;gap:0;width:100%;
  margin-top:12px;
}
.dt-btn{
  flex:1;padding:14px;font-size:12px;font-weight:700;
  border-radius:10px;cursor:pointer;letter-spacing:.02em;border:none;
  transition:opacity .15s;
}
.dt-btn:active{opacity:.75;}
.dt-btn-replay{
  background:transparent;
  border:1.5px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.5);
  font-size:11px;
}
.dt-btn-view{display:none;}  /* viewはaction-btnに統合 */

/* ─ REGISTER促進 ─ */
.dt-register{
  padding:56px 24px 52px;
  text-align:center;color:#fff;
}
.dt-register-title{
  font-size:26px;font-weight:900;letter-spacing:-.04em;margin:0 0 8px;
}
.dt-register-sub{
  font-size:12px;color:rgba(255,255,255,.45);margin:0 0 28px;
}
.dt-register-cta{
  display:inline-block;padding:17px 36px;
  background:#fff;color:#111;border:none;
  border-radius:999px;font-size:14px;font-weight:900;cursor:pointer;
  text-decoration:none;
  box-shadow:0 8px 28px rgba(255,255,255,.12);
}
/* 料金表示（初月無料バージョン専用） */
.dt-register-price{
  margin:10px 0 0;
  font-size:11px;color:rgba(255,255,255,.38);letter-spacing:.03em;
}

.trace-section{background:#fffdf8}
/* ─── DEEP PIC 比較レイアウト ─── */

.deep{
  background:var(--violet);color:white;overflow:hidden;
}
.deep .kicker{color:rgba(255,255,255,.55)}
.deep p{color:rgba(255,255,255,.72)}

/* ─── MOST PICKED ─── */
.most-picked{background:#0e0e0e;color:white}
.most-picked .kicker{color:rgba(255,255,255,.45)}
.most-picked p{color:rgba(255,255,255,.55)}
.mp-grid{
  display:grid;
  grid-template-columns:2fr 1fr;   /* 右タイルの8:16が行高を自動決定 */
  gap:5px;
  margin:28px -22px 0;
  width:calc(100% + 44px);
  overflow:hidden;
}
.mp-tile{
  position:relative;
  display:block;
  overflow:hidden;
  text-decoration:none;
}
.mp-tile:hover .mp-img{transform:scale(1.05);}
.mp-first{grid-column:1;grid-row:1/3;}   /* 大タイル：高さは右列が決定 */
.mp-second{grid-column:2;grid-row:1;aspect-ratio:8/16;}
.mp-third{grid-column:2;grid-row:2;aspect-ratio:8/16;}
.mp-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .4s ease;
}
.mp-rank{
  position:absolute;bottom:10px;left:12px;z-index:2;
  font-size:10px;font-weight:800;letter-spacing:.08em;
  color:white;background:rgba(0,0,0,.45);
  padding:3px 8px;border-radius:99px;
}

/* ─── NEW PICKS ─── */
.new-picks{background:#f5f5f5}
.np-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:5px;
  margin:28px -22px 0;
  width:calc(100% + 44px);
  overflow:hidden;
}
.np-tile{
  position:relative;
  display:block;
  overflow:hidden;
  text-decoration:none;
}
.np-tile:hover .np-img{transform:scale(1.05);}
.np-large{grid-column:1;grid-row:1/3;}  /* 大タイル：高さは右列が決定 */
.np-med1{grid-column:2;grid-row:1;aspect-ratio:8/16;}
.np-med2{grid-column:2;grid-row:2;aspect-ratio:8/16;}
.np-sm1{display:none;}  /* 3タイル構成に統一 */
.np-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .4s ease;
}

/* ─── もっと見るボタン ─── */
.sec-more-btn{
  display:block;
  margin:22px auto 0;
  width:fit-content;
  padding:11px 32px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--ink);
  border:1.5px solid var(--ink);
  text-decoration:none;
  border-radius:99px;
  transition:background .2s,color .2s;
}
.sec-more-btn:hover{
  background:var(--ink);
  color:#fff;
}

/* ─── BENEFITS ─── */
.benefits{
  background:#fff;
  padding:0 0 64px !important;
  overflow:hidden;
}

/* ── ビジュアルブロック ── */
.ben-visual{
  position:relative;
  width:calc(100% + 44px);
  margin:0 -22px;
  aspect-ratio:5/4;
  overflow:hidden;
  background:#ece9e4;
}
.ben-visual-img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 28%;
  display:block;
}
.ben-visual-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(0,0,0,.05) 0%,
    rgba(0,0,0,.52) 100%
  );
  display:flex;flex-direction:column;
  justify-content:flex-end;
  padding:0 22px 26px;
}
.ben-visual-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:8px;letter-spacing:.24em;
  color:rgba(255,255,255,.88);margin-bottom:12px;
}
.ben-visual-kicker::before{
  content:'';display:block;width:20px;height:1px;
  background:rgba(255,255,255,.6);flex-shrink:0;
}
.ben-visual-h2{
  font-size:clamp(28px,8.5vw,38px);font-weight:900;
  letter-spacing:-.05em;line-height:1.05;
  color:#fff;margin:0;
}

/* ── ベネフィットリスト ── */
.ben-list{
  padding:0;
  margin-top:36px;
}
.ben-row{
  display:grid;
  grid-template-columns:1fr;
  padding:28px 22px;
  border-top:1px solid #e8e5e0;
  position:relative;
}
.ben-row:last-child{border-bottom:1px solid #e8e5e0;}


/* 上段：ナンバー＋タグを横並び */
/* お試し無料バナー */
.ben-trial-bar{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;
  margin-bottom:24px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:4px;
}
.ben-trial-tag{
  flex-shrink:0;
  display:inline-block;
  padding:3px 10px;
  font-size:11px;font-weight:700;letter-spacing:.06em;
  color:#000;background:#fff;
  border-radius:2px;
}
.ben-trial-bar p{
  margin:0;font-size:12px;color:rgba(255,255,255,.65);line-height:1.5;
}

.ben-row-head{
  display:flex;align-items:center;gap:10px;
  margin-bottom:12px;
}
.ben-num{
  font-size:9px;font-weight:900;letter-spacing:.12em;
  color:#bbb;
}
.ben-num::before{content:'\2014\00A0';}
.ben-tag-pill{
  font-size:7px;letter-spacing:.18em;font-weight:700;
  background:#111;color:#fff;
  border-radius:2px;padding:4px 10px;
}

.ben-content h3{
  font-size:20px;font-weight:800;letter-spacing:-.04em;
  line-height:1.25;color:#111;margin:0 0 8px;
}
.ben-content p{
  font-size:12px;line-height:1.8;color:#999;margin:0;
}

/* ── スパークル ── */
.final-spark{
  position:absolute;
  pointer-events:none;
  z-index:3;
  animation:spark-twinkle var(--dur,2s) var(--delay,0s) ease-in-out infinite;
}
/* 十字の縦軸・横軸（細め） */
.final-spark::before,
.final-spark::after{
  content:'';
  position:absolute;
  background:#fff;
  border-radius:999px;
  box-shadow:0 0 3px 1px rgba(255,220,120,.65);
}
.final-spark::before{
  width:1px;height:var(--sz,8px);
  left:50%;top:50%;
  transform:translate(-50%,-50%);
}
.final-spark::after{
  width:var(--sz,8px);height:1px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
}
/* 中心の丸（小さく） */
.final-spark-dot{
  position:absolute;
  width:2px;height:2px;
  border-radius:50%;
  background:#fff;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 4px 2px rgba(255,200,80,.65);
}
@keyframes spark-twinkle{
  0%,100%{opacity:0;transform:scale(0) rotate(0deg);}
  30%,70%{opacity:1;transform:scale(1) rotate(var(--rot,20deg));}
  50%    {opacity:.8;transform:scale(1.15) rotate(calc(var(--rot,20deg) + 10deg));}
}

/* ── FINAL CTA ── */
.final{
  background:#0a0a0a;
  padding:64px 0 72px;
  overflow:hidden;
  color:#fff;
}

/* 画像カードのラッパー（重ね合わせ用） */
.final-card-wrap{
  position:relative;
  margin:0 28px;
  padding:18px 18px 28px;
}
/* 背後に透けるカード2枚（::before / ::after） */
.final-card-wrap::before,
.final-card-wrap::after{
  content:'';
  position:absolute;
  inset:18px;
  border-radius:18px;
}
.final-card-wrap::before{
  background:#1e1e1e;
  transform:rotate(-5deg) translateY(12px) translateX(-6px);
  opacity:.7;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.final-card-wrap::after{
  background:#262626;
  transform:rotate(4deg) translateY(16px) translateX(8px);
  opacity:.5;
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}
/* メインカード */
.final-card{
  position:relative;z-index:1;
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:4/5;
  transform:rotate(-1.5deg);
  box-shadow:
    0 28px 72px rgba(0,0,0,.65),
    0 4px 16px rgba(0,0,0,.4);
}
.final-bg{
  width:100%;height:100%;
  object-fit:cover;object-position:50% 40%;
  display:block;
}
.final-card-grad{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,
    transparent 50%,
    rgba(0,0,0,.45) 100%
  );
}

/* テキストブロック */
.final-content{
  padding:0 22px;
}
/* 大きなディスプレイテキスト */
.final-display{
  font-size:clamp(76px,21vw,100px);
  font-weight:900;letter-spacing:-.07em;
  line-height:.88;
  color:#fff;
  margin:32px 0 0;
  position:relative;
}
.final-display-ghost{
  display:block;color:rgba(255,255,255,.12);
}
.final h2{
  font-size:clamp(22px,6vw,28px);
  line-height:1.2;letter-spacing:-.04em;
  margin:20px 0 14px;color:#fff;
}
.final-desc{
  font-size:13px;line-height:1.85;
  color:rgba(255,255,255,.45);
  margin:0 0 36px;
}

/* ヒーローと同じボタン — margin-topのみ上書き */
.final .hv8-cta{ margin-top:0; }

.cta-sub{
  margin-top:16px !important;
  text-align:center;
  font-size:10px !important;
  color:rgba(255,255,255,.28) !important;
  line-height:1.65 !important;
  letter-spacing:.04em;
}
.hidden-choice{opacity:.13;filter:blur(2px);pointer-events:none}

/* ===== V5 HERO OVERRIDES ===== */
.hero{
  min-height:760px;
  padding:0;
  position:relative;
  overflow:hidden;
  background:#111;
}
.morph-wrap{
  margin:0;
  height:760px;
  position:relative;
  touch-action:pan-y;
  user-select:none;
}
.morph-stage{
  position:absolute;
  inset:0;
  border-radius:0;
  overflow:hidden;
  background:#111;
}
.morph-stage::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.36) 0%,rgba(0,0,0,.06) 28%,rgba(0,0,0,.08) 58%,rgba(0,0,0,.48) 100%);
}
.morph-tile{
  filter:grayscale(1) contrast(1.05) brightness(.82);
  opacity:.86;
  border-radius:0!important;
  box-shadow:none;
  transition:
    left .95s cubic-bezier(.2,.8,.2,1),
    top .95s cubic-bezier(.2,.8,.2,1),
    width .95s cubic-bezier(.2,.8,.2,1),
    height .95s cubic-bezier(.2,.8,.2,1),
    transform .95s cubic-bezier(.2,.8,.2,1),
    filter .7s ease,
    opacity .7s ease;
}
.morph-tile.picked{
  filter:grayscale(0) contrast(1) brightness(1);
  opacity:1;
}
.morph-tile .tag,
.morph-tile .maybe{
  display:none;
}
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:30;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:86px 22px 34px;
  pointer-events:none;
}
.hero-overlay-inner{
  max-width:340px;
}
.hero-overlay .kicker{
  color:rgba(255,255,255,.62);
  margin-bottom:10px;
  display:block;
}
.hero-overlay h1{
  margin:0;
  color:#fff;
  font-size:48px;
  line-height:1.02;
  letter-spacing:-.065em;
  text-shadow:0 3px 24px rgba(0,0,0,.34);
}
.hero-overlay p{
  margin:16px 0 0;
  color:rgba(255,255,255,.78);
  font-size:12px;
  line-height:1.8;
}
.hero-register{
  pointer-events:auto;
  margin-top:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  border:0;
  border-radius:999px;
  background:#fff;
  color:#111;
  padding:17px 20px;
  font-size:13px;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 16px 36px rgba(0,0,0,.22);
}
.hero-register span{
  font-size:19px;
  font-weight:400;
}
.hero-free{
  margin-top:8px;
  font-size:9px;
  color:rgba(255,255,255,.56);
  text-align:center;
}
.hero-topbrand{
  position:absolute;
  left:20px;
  top:18px;
  z-index:35;
  color:#fff;
  font-size:19px;
  font-weight:900;
  letter-spacing:-.045em;
}
.hero-topbrand b{font-weight:900}
.hero-menu{
  position:absolute;
  right:18px;
  top:20px;
  z-index:35;
  width:34px;
  height:28px;
}
.hero-menu::before,
.hero-menu::after,
.hero-menu span{
  content:"";
  position:absolute;
  right:0;
  width:28px;
  height:1px;
  background:#fff;
}
.hero-menu::before{top:4px}
.hero-menu span{top:13px}
.hero-menu::after{top:22px}
.morph-guide{
  z-index:31;
  left:22px;
  right:22px;
  bottom:16px;
}
.morph-guide span{
  color:rgba(255,255,255,.55);
}
.morph-dots i{
  background:rgba(255,255,255,.2);
}
.morph-dots i.on{
  background:#fff;
}
.morph-prompt{
  display:none!important;
}


/* ===== V6 HERO AGGRESSIVE OVERLAP + IRREGULAR SHAPES ===== */
.hero-overlay{
  justify-content:center;
  padding:120px 20px 24px;
}
.hero-overlay-inner{
  max-width:355px;
  margin-top:58px;
}
.hero-overlay h1{
  font-size:50px;
  line-height:.98;
  max-width:330px;
  mix-blend-mode:normal;
}
.hero-overlay p{
  max-width:270px;
  margin-top:14px;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.hero-register{
  width:88%;
  margin-top:18px;
  margin-left:18px;
  transform:translateY(-2px);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
}
.hero-overlay::before{
  content:"";
  position:absolute;
  left:0;right:0;
  top:250px;
  height:350px;
  pointer-events:none;
  background:
    radial-gradient(circle at 43% 47%,rgba(0,0,0,.18),transparent 46%),
    linear-gradient(180deg,transparent,rgba(0,0,0,.08) 42%,rgba(0,0,0,.30));
}
.morph-tile{
  border-radius:0!important;
  clip-path:var(--clip, polygon(0 0,100% 0,100% 100%,0 100%));
}
.morph-tile:nth-child(1){--clip:polygon(0 9%,72% 0,100% 22%,84% 84%,26% 100%,0 72%)}
.morph-tile:nth-child(2){--clip:polygon(17% 0,100% 8%,86% 100%,0 82%,8% 28%)}
.morph-tile:nth-child(3){--clip:polygon(0 0,100% 16%,92% 77%,60% 100%,8% 88%,18% 42%)}
.morph-tile:nth-child(4){--clip:polygon(0 18%,38% 0,100% 12%,84% 100%,18% 90%)}
.morph-tile:nth-child(5){--clip:polygon(12% 0,92% 6%,100% 68%,78% 100%,0 86%,6% 22%)}

.morph-tile.shape-b{
  clip-path:polygon(10% 0,100% 10%,88% 52%,100% 100%,20% 90%,0 48%);
}
.morph-tile.shape-c{
  clip-path:polygon(0 12%,74% 0,100% 32%,86% 100%,18% 88%);
}
.morph-tile.shape-d{
  clip-path:polygon(15% 0,100% 0,90% 72%,58% 100%,0 88%,8% 24%);
}
.morph-tile.shape-e{
  clip-path:polygon(0 18%,34% 0,100% 12%,94% 78%,72% 100%,10% 88%);
}
.morph-tile.picked{
  transform:scale(1.015);
  box-shadow:0 28px 60px rgba(0,0,0,.24);
}
.hero-topbrand{
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}


/* ===== V7 FITTED TESSELLATED HERO ===== */
.morph-stage{
  inset:0;
  background:#111;
}
.morph-tile{
  border-radius:0!important;
  clip-path:none!important;
  box-shadow:none!important;
  filter:grayscale(1) contrast(1.05) brightness(.78);
  opacity:.94;
  overflow:hidden;
  transition:
    left .9s cubic-bezier(.2,.8,.2,1),
    top .9s cubic-bezier(.2,.8,.2,1),
    width .9s cubic-bezier(.2,.8,.2,1),
    height .9s cubic-bezier(.2,.8,.2,1),
    clip-path .9s cubic-bezier(.2,.8,.2,1),
    filter .65s ease,
    opacity .65s ease;
}
.morph-tile.picked{
  filter:grayscale(0) contrast(1) brightness(1);
  opacity:1;
}
/* outer frame stays continuous, internal seams tessellate */
.morph-stage{
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}
.hero-overlay{
  justify-content:center;
  padding:100px 20px 20px;
}
.hero-overlay-inner{
  margin-top:68px;
  max-width:355px;
}
.hero-overlay h1{
  font-size:50px;
  line-height:.98;
  max-width:320px;
}
.hero-register{
  margin-left:10px;
  width:92%;
  margin-top:16px;
}


/* ================================================================
   V8 HERO: TESSELLATED PUZZLE
   ── 完全差し替え用ヒーロー ──
   既存 .hero, .topbar は非表示にして .hero-v8 へ移行
   ================================================================ */

/* 既存ヘッダーを非表示（ロゴはヒーロー画像上に直接重ねる） */
.topbar { display: none !important; }

/* ─── Wrapper ─── */
.hero-v8 {
  position: relative;
  width: 100%;
  height: 720px;
  overflow: hidden;
  background: #0d0d0d;
  /* 既存 .hero を上書き */
  padding: 0 !important;
  min-height: unset !important;
}

/* ── ログイン後：スライダーを短く・CTAを非表示 ── */
.hero-v8--member {
  height: 460px;
}
.hero-v8--member .hv8-cta,
.hero-v8--member .hv8-note,
.hero-v8--member .hv8-sub {
  display: none;
}
.hero-v8--member .hv8-h1 {
  font-size: 38px;
  margin-bottom: 0;
}
.hero-v8--member .hv8-content {
  padding-bottom: 40px;
}

/* ─── Stage（テセレーションエリア） ─── */
.hv8-stage {
  position: absolute;
  inset: 0;
}

/*
 * ■ タイル設計
 * 全タイルが position:absolute; inset:0 でステージ全体を占有。
 * clip-path だけで各タイルの "担当エリア" を切り分ける。
 * → 全タイルの clip-path が同一座標系を参照するため
 *   隣接境界線が完全に一致するパズル面になる。
 */
.hv8-tile {
  position: absolute;
  inset: 0;
  /*
   * cover だと430×720pxに対してフィットし、タイルが超アップになる。
   * auto 55% = 高さを396pxに固定（幅はアスペクト比で自動）。
   * ポートレート2:3なら264×396px、ランドスケープ16:9なら704×396px。
   * いずれもタイルの担当エリア（最大約200×320px）をカバーでき、
   * かつ画像全体の文脈が見えるサイズになる。
   */
  /*
   * cover: タイルの bounding box（430×720px）を余白なく埋める。
   * 各画像に白いオーガニックマスク余白が入っているため、
   * auto XX% で縮小するとその余白まで見えてしまう。
   * cover にすることで中央クロップとなり余白が出ない。
   */
  background-size: cover;
  background-position: center;
  background-color: #1c1c1c;
  filter: grayscale(1) contrast(1.07) brightness(0.72);
  opacity: 0.90;
  /* GPU レイヤー強制昇格 → clip-path / filter のコンポジット処理 */
  transform: translateZ(0);
  backface-visibility: hidden;
  transition:
    clip-path 0.78s cubic-bezier(0.22, 0.80, 0.22, 1.00),
    filter     0.55s ease,
    opacity    0.55s ease;
  will-change: clip-path, filter, opacity;
}
/* 初回レンダリング時はトランジション無効（ポリゴン補間エラー防止） */
.hv8-stage.hv8-no-trans .hv8-tile {
  transition: none !important;
}

/* ★ ピック中の1枚だけカラーに戻す（animation 終了後の最終値） */
.hv8-tile.picked {
  filter: grayscale(0) contrast(1.04) brightness(1.20) saturate(1.15);
  opacity: 1;
  z-index: 4;
}

/*
 * 画像割り当て＋background-position（9枚・3×3グリッド）
 *
 * 全タイルが inset:0（430×720px）を占有。
 * background-position の % は「画像のどの点を
 * ステージのどの点に揃えるか」を制御する。
 * タイルの担当エリア中心に画像の主役が来るよう設定。
 *
 * 担当エリア中心座標（概算）:
 *   行1: y≈17%  行2: y≈50%  行3: y≈82%
 *   列L: x≈17%  列C: x≈51%  列R: x≈83%
 */

/*
 * 画像割り当て + background-position
 *
 * background-size: auto 55% との組み合わせ：
 *   0% / 50% / 100% は「画像のどの点をステージのどの点に合わせるか」
 *   を制御。タイルの担当エリアに画像の中身が来るよう、
 *   行・列の位置に合わせた値を設定する。
 *
 *   水平: 左列=0%, 中列=50%, 右列=100%
 *   垂直: 上行=0%, 中行=50%, 下行=100%
 */

/* 全タイル: background-position は center 固定 */
.hv8-tile[data-img="0"] {
  background-image: url(/images/s1.jpg);
  background-color: #6e4a60;
  background-position: 50% 50%;
}
.hv8-tile[data-img="1"] {
  background-image: url(/images/s2.jpg);
  background-color: #3b587e;
  background-position: 50% 50%;
}
.hv8-tile[data-img="2"] {
  background-image: url(/images/s3.jpg);
  background-color: #4a6e3a;
  background-position: 50% 50%;
}
.hv8-tile[data-img="3"] {   /* ザクロ（s9）: 中左 */
  background-image: url(/images/s9.jpg);
  background-color: #2e4a3e;
  background-position: 50% 50%;
}
.hv8-tile[data-img="4"] {   /* 幻想廃墟（s8）: アーチ・人物が中央寄り */
  background-image: url(/images/s8.jpg);
  background-color: #4a3828;
  background-position: 50% 38%;
}
.hv8-tile[data-img="5"] {   /* クラゲ（s6）: 中右へ移動 */
  background-image: url(/images/s6.jpg);
  background-color: #2a5260;
  background-position: 50% 42%;
}
.hv8-tile[data-img="6"] {
  background-image: url(/images/s7.jpg);
  background-color: #3e3050;
  background-position: 50% 50%;
}
.hv8-tile[data-img="7"] {   /* 犬（s10）: 下段中央へ移動 */
  background-image: url(/images/s10.jpg);
  background-color: #4a6030;
  background-position: 50% 50%;
}
.hv8-tile[data-img="8"] {   /* 猫（s4）: 下右 */
  background-image: url(/images/s4.jpg);
  background-color: #5a4882;
  background-position: 50% 50%;
}

/* ─── 可読性グラデーション（テキストの下地） ─── */
.hv8-grad {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.50) 0%,       /* ロゴ上部 */
      rgba(0,0,0,.06) 17%,
      rgba(0,0,0,.00) 36%,       /* 画像を最大限見せる中央帯 */
      rgba(0,0,0,.18) 52%,
      rgba(0,0,0,.64) 72%,       /* コピー〜CTA */
      rgba(0,0,0,.84) 100%
    );
}

/* ─── ヘッダー（ロゴ＋メニュー） ─── */
.hv8-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 22px 0;
  pointer-events: none;
}
.hv8-logo {
  display: block;
  height: 26px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,.5));
  pointer-events: auto;
}
.hv8-menu {
  position: relative;
  width: 36px;
  height: 28px;
  cursor: pointer;
  pointer-events: auto;
}
.hv8-menu::before,
.hv8-menu::after,
.hv8-menu span {
  content: "";
  position: absolute;
  right: 0;
  height: 1.5px;
  background: #fff;
  border-radius: 2px;
  transition: opacity .25s ease;
}
.hv8-menu::before { width: 28px; top: 4px; }
.hv8-menu span    { width: 20px; top: 13px; }
.hv8-menu::after  { width: 28px; top: 22px; }

/* ── ハンバーガー OPEN 状態 ── */
.hv8-menu.is-open span { opacity: 0; }
.hv8-menu.is-open::before {
  top: 13px; width: 28px;
  transform: rotate(45deg);
  transition: top .2s ease, transform .2s .2s ease, opacity .25s ease;
}
.hv8-menu.is-open::after {
  top: 13px; width: 28px;
  transform: rotate(-45deg);
  transition: top .2s ease, transform .2s .2s ease, opacity .25s ease;
}
.hv8-menu::before,
.hv8-menu::after {
  transition: top .2s .2s ease, transform .2s ease, opacity .25s ease;
}

/* ── ドロワー ── */
.hv8-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}
.hv8-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .35s ease;
}
.hv8-drawer-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(80vw, 320px);
  background: #0d0d0d;
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 72px 32px 48px;
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.22,1,.36,1);
  overflow-y: auto;
}
.hv8-drawer.is-open {
  pointer-events: auto;
}
.hv8-drawer.is-open .hv8-drawer-backdrop { opacity: 1; }
.hv8-drawer.is-open .hv8-drawer-panel    { transform: translateX(0); }

/* ドロワー内メニューリスト */
.hv8-drawer-logo {
  display: block;
  height: 22px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  margin-bottom: 48px;
}
.hv8-drawer-nav {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
  flex: 1;
}
.hv8-drawer-nav li {
  border-top: 1px solid rgba(255,255,255,.08);
}
.hv8-drawer-nav li:last-child { border-bottom: 1px solid rgba(255,255,255,.08); }
.hv8-drawer-nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
  font-size: 15px; font-weight: 700; letter-spacing: -.02em;
  color: #fff; text-decoration: none;
}
.hv8-drawer-nav a span { color: rgba(255,255,255,.3); font-size: 18px; font-weight: 300; }
.hv8-drawer-nav .nav-sub {
  font-size: 10px; font-weight: 400; letter-spacing: .08em;
  color: rgba(255,255,255,.35); margin-top: 2px; display: block;
}
/* ドロワー専用CTAボタン */
.hv8-drawer-cta {
  display: block;
  margin-top: 36px;
  position: relative;
  border-radius: 999px;
  padding: 3px;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
}
.hv8-drawer-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from var(--hv8-border-angle),
    #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #c77dff, #ff6b6b
  );
  animation: hv8-cta-spin 2.4s linear infinite;
}
.hv8-drawer-cta-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  background: #fff;
  border-radius: 996px;
  font-size: 14px;
  font-weight: 800;
  color: #111;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.hv8-drawer-close {
  position: absolute;
  top: 22px; right: 22px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s;
}
.hv8-drawer-close:hover {
  background: rgba(255,255,255,.14);
  color: #fff;
}
.hv8-drawer-foot {
  margin-top: 24px;
  font-size: 10px; color: rgba(255,255,255,.25);
  text-align: center; letter-spacing: .06em;
}

/* ─── テキストオーバーレイ（コピー・CTA） ─── */
.hv8-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  padding: 0 22px 50px;
  pointer-events: none;
}
.hv8-kicker {
  display: block;
  font-size: 9px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.60);
  margin-bottom: 11px;
}
.hv8-h1 {
  margin: 0;
  font-size: 50px;
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.065em;
  color: #fff;
  text-shadow:
    0 2px 0 rgba(0,0,0,.10),
    0 6px 32px rgba(0,0,0,.42);
}
@media (max-width: 390px) {
  .hv8-h1 { font-size: 44px; }
}
.hv8-sub {
  margin: 15px 0 0;
  font-size: 12px;
  line-height: 1.88;
  color: rgba(255,255,255,.76);
  max-width: 295px;
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
/* ─── CTAボタン（グラデーションボーダー） ─── */
.hv8-cta {
  pointer-events: auto;
  display: block;
  cursor: pointer;
  margin-top: 22px;
  position: relative;
  text-decoration: none;
  font-weight: 700;
  border-radius: 999px;
  overflow: hidden;
  padding: 3px;
  isolation: isolate;
  box-shadow:
    0 10px 0 rgba(0,0,0,.25),
    0 18px 48px rgba(0,0,0,.44);
  transform: translateY(0);
  animation: hv8-cta-float 2.8s ease-in-out infinite;
  transition: transform .15s ease, box-shadow .15s ease;
}
.hv8-cta:hover {
  transform: translateY(-4px) !important;
  animation-play-state: paused;
  box-shadow:
    0 14px 0 rgba(0,0,0,.22),
    0 28px 56px rgba(0,0,0,.48);
}
@keyframes hv8-cta-float {
  0%, 100% { transform: translateY(0);    box-shadow: 0 10px 0 rgba(0,0,0,.25), 0 18px 48px rgba(0,0,0,.44); }
  50%       { transform: translateY(-5px); box-shadow: 0 15px 0 rgba(0,0,0,.20), 0 26px 56px rgba(0,0,0,.38); }
}
@property --hv8-border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.hv8-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from var(--hv8-border-angle),
    #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #c77dff, #ff6b6b
  );
  animation: hv8-cta-spin 2.4s linear infinite;
}
@keyframes hv8-cta-spin {
  to { --hv8-border-angle: 360deg; }
}
.hv8-cta-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 20px 36px;
  background:
    linear-gradient(
      115deg,
      rgba(255,180,180,.18) 0%,
      rgba(255,240,160,.18) 20%,
      rgba(160,255,200,.18) 40%,
      rgba(160,200,255,.18) 60%,
      rgba(200,160,255,.18) 80%,
      rgba(255,180,180,.18) 100%
    ),
    radial-gradient(circle at 25% 35%, rgba(255,255,255,.9) 0%, transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #e4e4e4 100%);
  background-size: 300% 100%, 100% 100%, 100% 100%;
  animation: hv8-inner-shimmer 3s ease-in-out infinite alternate;
  color: #111;
  border-radius: 996px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,1),
    inset 0 -3px 0 rgba(0,0,0,.12);
}
@keyframes hv8-inner-shimmer {
  0%   { background-position: 0% 50%,   100% 100%, 0 0; }
  100% { background-position: 100% 50%, 0%   0%,   0 0; }
}
.hv8-cta-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.03em;
  color: #111;
}
.hv8-cta-arr {
  font-size: 22px;
  font-weight: 400;
}
.hv8-cta-sub {
  font-size: 11px;
  font-weight: 600;
  color: rgba(0,0,0,.62);
  letter-spacing: .05em;
}
.hv8-cta:active {
  transform: translateY(6px) !important;
  animation-play-state: paused;
  box-shadow:
    0 3px 0 rgba(0,0,0,.28),
    0 6px 20px rgba(0,0,0,.30);
}
.hv8-note {
  display: none;
}

/* ─── フッターバー（AUTO PICKING ラベル＋ドット） ─── */
.hv8-foot {
  position: absolute;
  left: 22px; right: 22px;
  bottom: 16px;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.hv8-auto-lbl {
  font-size: 8px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.38);
}
.hv8-dots {
  display: flex;
  gap: 5px;
  align-items: center;
}
.hv8-dot {
  width: 18px;
  height: 2px;
  border-radius: 99px;
  background: rgba(255,255,255,.18);
  transition: background .45s ease, width .45s ease;
}
.hv8-dot.on {
  background: rgba(255,255,255,.90);
  width: 28px;
}

/* ─── ピック瞬間フラッシュ ─── */
/*
 * brightness を高めに設定（2.4 → 1.2）して、
 * gradient が重なる下段タイル（T6-T8）でもカラー演出が見えるようにする。
 */
@keyframes hv8-pick-flash {
  0%   { filter: grayscale(0) brightness(2.4) saturate(0.2); }
  60%  { filter: grayscale(0) brightness(1.4) saturate(1.0); }
  100% { filter: grayscale(0) contrast(1.04) brightness(1.20) saturate(1.15); }
}
.hv8-tile.picked {
  animation: hv8-pick-flash 0.65s ease forwards;
}

/* ===== 追従CTA ===== */
/* ===== FLOATING CTA — エディトリアルバー ===== */
.float-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 900;
  transform: translateY(100%);
  transition: transform .48s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
  padding-bottom: env(safe-area-inset-bottom, 0px); /* iPhone ホームバー対応 */
}
.float-cta.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}

/* バー本体 */
.float-cta__inner {
  display: flex;
  align-items: stretch;
  height: 64px;
  background: #0a0a0a;
  border-top: 1px solid rgba(255,255,255,.18);
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* ── ミニタイル（左エリア）────────────────────────── */
.float-cta__tiles {
  display: flex;
  flex-shrink: 0;
  width: 90px;
  border-right: 1px solid rgba(255,255,255,.1);
}
.float-cta__tile {
  flex: 1;
  background-size: cover;
  background-position: center;
  filter: grayscale(1) brightness(.65);
}
/* ヒーローのpick演出をループ再現 */
.fct-a { animation: fct-pick 3.9s 0s   infinite; }
.fct-b { animation: fct-pick 3.9s 1.3s infinite; }
.fct-c { animation: fct-pick 3.9s 2.6s infinite; }
@keyframes fct-pick {
  0%, 22%  { filter: grayscale(0) brightness(1.15) saturate(1.2); }
  35%, 100% { filter: grayscale(1) brightness(.65); }
}

/* ── テキストエリア（中央）────────────────────────── */
.float-cta__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 14px;
  gap: 3px;
  overflow: hidden;
}
.float-cta__kicker {
  font-size: 9px;
  letter-spacing: .14em;
  color: rgba(255,255,255,.38);
  font-weight: 700;
  text-transform: uppercase;
}
.float-cta__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 矢印エリア（右）─────────────────────────────── */
.float-cta__arr {
  flex-shrink: 0;
  width: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: rgba(255,255,255,.7);
  border-left: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  transition: background .18s, color .18s, transform .18s;
}
.float-cta__inner:active .float-cta__arr {
  background: rgba(255,255,255,.12);
  color: #fff;
  transform: translateX(4px);
}

/* ===== FOOTER ===== */
.spic-footer {
  background: var(--bg);
  color: var(--muted);
  padding: 48px 24px 36px;
  border-top: 1px solid var(--line);
}
.spic-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 40px;
}
.spic-footer__logo {
  display: block;
  height: 20px;
  width: auto;
}
.spic-footer__badge {
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 4px 9px;
  border-radius: 2px;
}
.spic-footer__nav {
  margin-bottom: 36px;
}
.spic-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.spic-footer__item {
  border-top: 1px solid var(--line);
}
.spic-footer__item:last-child {
  border-bottom: 1px solid var(--line);
}
.spic-footer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: .02em;
  transition: color .2s;
}
.spic-footer__link::after {
  content: '\203A';
  font-size: 16px;
  color: var(--muted);
  opacity: .6;
}
.spic-footer__link:hover {
  color: var(--violet);
}
.spic-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin-bottom: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.spic-footer__legal-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .04em;
  transition: color .2s;
}
.spic-footer__legal-link:hover { color: var(--ink); }
.spic-footer__legal-sep {
  color: var(--line);
  font-size: 11px;
  margin: 0 8px;
}
.spic-footer__copy {
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--muted);
  opacity: .5;
}