/* ===== Home v3（2026-09-16 差し戻し反映）===== */
/* hero: 全面動画 ＋ 強いコピー。板・ワードマーク無し */
.hero-v .slab{display:none}
.hero-v h1{font-family:var(--en);font-size:clamp(56px,10.5vw,148px);line-height:.92;letter-spacing:-.02em;text-transform:uppercase;font-weight:400;text-shadow:none}
.hero-v .copy1{font-size:clamp(18px,2vw,26px);font-weight:900;line-height:1.55;margin-top:28px;max-width:30em}
.hero-v .copy2{font-size:14px;font-weight:700;margin-top:10px;opacity:.85}
.hero-v .kicker{color:var(--white)}
.hero-v::after{background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.6))}

/* 出現アニメ: 行ごと（JS が data-row を付ける） */
.reveal{transition-delay:0s!important}
.reveal[data-row]{transition-delay:calc(var(--row,0) * .12s)!important}

/* about: 3 行のアイコン・マーキー */
.about .crowd{display:none}
.mqs{margin-top:44px;display:grid;gap:12px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq{overflow:hidden}
.mq .track{display:flex;gap:12px;width:max-content;animation:mqL 120s linear infinite;transform:translate3d(0,0,0);backface-visibility:hidden}
.mq.r1 .track{animation:mqR 140s linear infinite}
.mq.r2 .track{animation-duration:105s}
.mq img{width:96px;height:96px;border-radius:20px;object-fit:cover;background:#e9e9e9;flex:none;outline:1px solid rgba(0,0,0,.09);outline-offset:-1px} /* 透明背景・丸型のアイコンも同じ角丸四角に見せる（2026-09-18 不揃いの指摘） */
@keyframes mqL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes mqR{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
/* アイコン帯は「動きを減らす」設定でも流す（遅い等速の装飾。2026-09-18 スマホで止まって見えた件） */
.about .big{font-size:clamp(30px,4.6vw,54px)}
.about .lead{font-size:16px;font-weight:700;color:var(--ink)}

/* artworks: 変則グリッド */
.agrid2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:220px;gap:14px;margin-top:40px}
.aw{position:relative;display:block;overflow:hidden;border-radius:2px;background:#ddd}
.aw.big{grid-column:span 2;grid-row:span 2}
.aw img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease-out}
.aw:hover img{transform:scale(1.04)}
.aw span{position:absolute;inset:auto 0 0 0;padding:14px 16px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.75));color:#fff;opacity:0;transition:opacity .5s}
.aw:hover span{opacity:1}
.aw span b{display:block;font-size:14px;font-weight:800}
.aw span small{font-size:11px;font-weight:700;opacity:.85}

/* creators: アイコン主役の正方形カード */
.ccs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:14px;margin-top:40px}
.cc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;text-decoration:none;background:var(--white);border-radius:2px;padding:18px 10px 16px;transition:transform .6s ease-in-out}
.cc:hover{transform:translateY(-3px)}
.cc img{width:84px;height:84px;border-radius:50%;object-fit:cover;background:#ddd}
.cc b{font-size:13px;font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.cc small{font-family:var(--en-nav);font-weight:800;font-size:10px;letter-spacing:.06em;color:var(--ink-soft)}

/* news / articles 行: タグは題の上、右へ逃げない */
.item{grid-template-columns:112px minmax(0,1fr)}
.item .chip{display:inline-block;margin-bottom:6px}
.item .t{margin-top:0}
.item > span{min-width:0}

/* numbers: カウントアップ用（値は data-n） */
.numbers .n b{font-variant-numeric:tabular-nums}

/* learn: 斜め撤去 */
.wcard .mark{transform:none}

/* footer & mypage: グレー */
.band.bk#mypage{background:var(--page);color:var(--ink);border-top:1px solid var(--line)} .band.bk#mypage .en{color:var(--ink)}
.ft.bk{background:var(--black);color:var(--white)}
.ft.bk .logo .mark{background:var(--black)}

@media (max-width:960px){.ccs{grid-template-columns:repeat(4,minmax(0,1fr))}.agrid2{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:180px}}
@media (max-width:640px){.ccs{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-v h1{font-size:52px}.mq img{width:72px;height:72px;border-radius:16px}.agrid2{grid-auto-rows:150px}}

/* ===== 2026-09-17 差し戻し: My Page 帯は黒 / Artworks はフルワイドで大きく（Brave 型） ===== */
.band.bk#mypage{background:var(--black);color:var(--white);border-top:0} .band.bk#mypage .en{color:var(--white)} .band.bk#mypage .go{border-color:var(--white)}
.sec#works{padding-block:var(--pad-l) 0;background:var(--page)}
.sec#works > .wrap:first-child{margin-bottom:0}
.artrail{margin-top:44px;display:flex;gap:18px;width:max-content;animation:artmq 120s linear infinite;padding-bottom:var(--pad-l)}
.artrail:hover{animation-play-state:paused}
.artrail .aw{flex:none;height:min(62vh,560px);width:auto;border-radius:0}
.artrail .aw img{height:100%;width:auto;display:block}
.artrail .aw span{opacity:1;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.7))}
.artrail .aw span b{font-size:16px}.artrail .aw span small{font-size:12px}
.sec#works .more{padding-bottom:var(--pad-l);margin-top:0}
@keyframes artmq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (min-width:0) and (max-width:0){.artrail{animation:none;overflow-x:auto}}
@media (max-width:640px){.artrail{gap:10px}.artrail .aw{height:300px}}

/* ===== 2026-09-17 「もっとヌルヌル」: 出現は大きく・長く・弾む。ホバーはばね ===== */
.reveal{opacity:0;transform:translate3d(0,40px,0) scale(.985);filter:blur(6px);transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1),filter 1.1s cubic-bezier(.22,1,.36,1);will-change:opacity,transform,filter}
.reveal.in{opacity:1;transform:none;filter:blur(0)}
.reveal[data-row]{transition-delay:calc(var(--row,0) * .14s)!important}
.sec-title.reveal{transform:translate3d(0,24px,0)}
.hero-v .kicker,.hero-v h1,.hero-v .copy1,.hero-v .copy2,.hero-v .cta{animation:heroIn 1.3s cubic-bezier(.22,1,.36,1) both}
.hero-v h1{animation-delay:.12s}.hero-v .copy1{animation-delay:.32s}.hero-v .copy2{animation-delay:.44s}.hero-v .cta{animation-delay:.56s}
@keyframes heroIn{from{opacity:0;transform:translate3d(0,36px,0);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
.cc,.aw,.acard,.ccard,.wcard2,.feat,.stage,.work,.creator{transition-property:opacity,transform,filter,box-shadow}
.cc:hover,.acard:hover,.ccard:hover,.wcard2:hover,.feat:hover{transform:translate3d(0,-6px,0) scale(1.015);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.pill{transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .4s,color .4s}
.pill:hover{transform:translateY(-2px) scale(1.03)}
.artrail .aw:hover img{transform:scale(1.06);transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.mq .track{animation-timing-function:linear}
html{scroll-behavior:smooth}
@media (min-width:0) and (max-width:0){.reveal,.hero-v *{animation:none!important;transition:none!important;opacity:1!important;transform:none!important;filter:none!important}}

/* スマホの文字組み（2026-09-18 STΛCK「変な改行・長すぎるコピーはいらない」）: 句のまとまり（wbr）でだけ折る。見出しは balance */
.about .big,.sec-title .sub,.wcard .mark,.city h2{text-wrap:balance}
.about .lead,.city .lead,.band .note,.wcard .desc,.item .t{text-wrap:wrap}
.about .big{word-break:keep-all;overflow-wrap:anywhere}
.about .lead,.wcard .desc,.wcard .mark{word-break:keep-all;overflow-wrap:anywhere}
@media (max-width:640px){
  .about .big{font-size:30px;line-height:1.4;letter-spacing:-.01em}
  .about .big br.pc{display:none}
  .about .lead{font-size:15px;line-height:1.85;margin-top:18px;padding-inline:4px}
  .item{align-items:start}.item .chip{display:table;margin-bottom:8px}.item .t{font-size:14px;line-height:1.5}
  .wcard .mark{font-size:16px;line-height:1.5}.wcard .desc{font-size:15px;line-height:1.7}
  .city .lead{font-size:15px;line-height:1.8}
  .band .note{font-size:14px;line-height:1.7}
}

/* ===== 2026-09-19: Artworks = 縦スクロールで横に送るギャラリー（黒い壁）。自動では流さない ===== */
.awx{background:#0a0a0a;color:var(--white);position:relative}
.awx-pin{position:sticky;top:68px;height:calc(100vh - 68px);min-height:560px;display:flex;flex-direction:column;justify-content:center;gap:26px;overflow:hidden;padding-block:34px}
.awx-pin>.wrap{width:100%}
.awx-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.awx .sec-title .en{color:var(--white)}.awx .sec-title .sub{color:#bdbdbd}
.awx-side{display:flex;align-items:center;gap:26px}
.awx-count{font-family:var(--en);font-size:15px;color:#8a8a8a;letter-spacing:.04em}.awx-count b{font-size:44px;color:#C6F91F;line-height:1}
.awx .pill.hi{background:#C6F91F;color:#0a0a0a}
.awx-view{width:100%}
.awx-track{display:flex;gap:22px;width:max-content;padding-inline:max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)));will-change:transform}
.awx-it{position:relative;flex:none;height:min(58vh,560px);display:block;overflow:hidden;background:#1a1a1a;text-decoration:none;color:var(--white)}
.awx-it img{height:100%;width:auto;min-width:200px;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .5s;filter:saturate(.92)}
.awx-it:hover img{transform:scale(1.035);filter:none}
.awx-it .cap{position:absolute;inset:auto 0 0 0;padding:44px 18px 16px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.78));display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:end}
.awx-it .cap i{grid-row:span 2;font-style:normal;font-family:var(--en);font-size:26px;color:#C6F91F;line-height:1}
.awx-it .cap b{font-size:15px;font-weight:800;line-height:1.4}.awx-it .cap small{font-size:12px;font-weight:700;opacity:.8}
.awx-end{width:min(58vh,420px);display:grid;place-items:center;border:1px solid #333;background:transparent}
.awx-end b{display:block;font-family:var(--en);font-size:56px;color:#C6F91F;line-height:1}.awx-end small{display:block;margin-top:14px;font-size:13px;font-weight:800}
.awx-end:hover{background:#C6F91F;color:#0a0a0a;border-color:#C6F91F}.awx-end:hover b{color:#0a0a0a}
.awx-bar{height:2px;background:#2a2a2a;position:relative}.awx-bar i{position:absolute;inset:0 auto 0 0;width:0;background:#C6F91F}
/* スマホ・「動きを減らす」設定: 固定せず、指で横に送る */
.awx.swipe .awx-pin{position:static;height:auto;min-height:0;padding-block:64px}
.awx.swipe .awx-view{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}.awx.swipe .awx-view::-webkit-scrollbar{display:none}
.awx.swipe .awx-it{scroll-snap-align:center;height:min(62vh,440px)}
@media (max-width:640px){.awx-head{flex-direction:column;align-items:flex-start}.awx-count b{font-size:32px}.awx-track{gap:12px;padding-inline:16px}.awx-it img{min-width:160px}}
@media (max-width:640px){.awx-side{margin-top:4px;gap:18px}}

/* ===== 2026-09-19: トップの Creators = 代表作が表紙のカード＋その人の色 ===== */
.hcs{background:var(--page)}
.hc-find{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:28px;font-size:12px;font-weight:800}
.hc-find span{font-family:var(--en-nav);letter-spacing:.08em;color:var(--ink-soft);margin-right:6px}
.hc-g{border:2px solid var(--black);border-radius:999px;padding:7px 14px;text-decoration:none;font-size:13px;font-weight:700;transition:background .25s,color .25s}
.hc-g:hover{background:var(--black);color:#C6F91F}.hc-g.all{border-color:transparent;text-decoration:underline;text-underline-offset:4px}
.hc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:28px}
.hc[hidden]{display:none}
.hc{display:block;background:var(--white);text-decoration:none;overflow:hidden;position:relative;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.hc:hover{transform:translateY(-4px)}
.hc .cv{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:#ddd;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.hc:hover .cv{transform:scale(1.04)}
.hc-b{display:block;position:relative;padding:34px 16px 16px;background:var(--white)}
.hc .av{position:absolute;top:-30px;left:14px;width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid var(--white);background:#ddd}
.hc b{display:block;font-size:15px;font-weight:800;line-height:1.4;overflow-wrap:anywhere}
.hc small{display:block;font:800 10px/1 var(--en-nav);letter-spacing:.08em;color:var(--ink-soft);margin:6px 0 12px;text-transform:uppercase}
.hc em{display:block;font-style:normal;font-size:11px;font-weight:700;color:var(--ink-soft);margin-top:8px;line-height:1.5;min-height:2.9em}
.hc .dna{display:flex;height:6px;border-radius:3px;overflow:hidden}.hc .dna i{display:block;min-width:3px}
@media (max-width:960px){.hc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* ===== 2026-09-19 深夜: Artworks 作り直し（STΛCK「ださいかも」）。白地・写真は素のまま・題名は写真の下・黒丸の矢印で送る ===== */
.awg{background:var(--white);padding-block:var(--pad-l)}
.awg-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.awg-ctl{display:flex;align-items:center;gap:10px}
.awg-ar{width:52px;height:52px;border-radius:50%;border:2px solid var(--black);background:transparent;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .25s,color .25s,opacity .25s;color:var(--black);padding:0 0 3px}
.awg-ar:hover:not(:disabled){background:var(--black);color:#C6F91F}.awg-ar:disabled{opacity:.25;cursor:default}
.awg-ctl .pill{margin-left:10px}
.awg-view{margin-top:44px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding-left:max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)))}
.awg-view::-webkit-scrollbar{display:none}
.awg-track{display:flex;gap:28px;width:max-content;padding-inline:max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)))}
.awg-it{flex:none;display:block;text-decoration:none;color:var(--ink);scroll-snap-align:start}
.awg-it .im{display:block;height:min(52vh,480px);overflow:hidden;background:#e4e4e4;border-radius:14px}
.awg-it img{height:100%;width:auto;min-width:220px;object-fit:cover;object-position:50% 35%;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.awg-it:hover img{transform:scale(1.04)}
.awg-it .cap{display:block;margin-top:16px;width:0;min-width:100%;overflow-wrap:anywhere}  /* 札の幅は画像で決める。長い題名が札を広げて画像の横に灰色の余白が出ていた（2026-09-29 STΛCK） */
.awg-it .cap b{display:block;font-size:17px;font-weight:800;line-height:1.5}
.awg-it .cap small{display:block;margin-top:4px;font-size:12px;font-weight:700;color:var(--ink-soft)}
.awg-end{width:300px;height:min(52vh,480px);display:grid;place-items:center;border:2px solid var(--black);border-radius:14px;text-align:center;transition:background .3s,color .3s}
.awg-end b{display:block;font-family:var(--en);font-size:52px;line-height:1}.awg-end small{display:block;margin-top:12px;font-size:13px;font-weight:800}
.awg-end:hover{background:var(--black);color:#C6F91F}
.awg-bar{height:2px;background:var(--line);position:relative;margin-top:44px}.awg-bar i{position:absolute;inset:0 auto 0 0;width:8%;background:var(--black);transition:width .2s linear}
@media (max-width:640px){.awg-track{gap:14px}.awg-it .im,.awg-end{height:300px;border-radius:10px}.awg-ar{display:none}.awg-it .cap b{font-size:15px}.awg-end{width:220px}}

/* ===== 2026-09-19 深夜 3: News / Articles の行。タグは題名の上の行に分ける（横に並べない）・左揃え・余白を広げる ===== */
.twocol .item{grid-template-columns:224px 1fr;gap:24px;padding:24px 0;align-items:start}
.twocol .item img{width:224px;height:144px;border-radius:10px}
.twocol .item>span{display:flex;flex-direction:column;align-items:flex-start;gap:0;text-align:left}
.twocol .item .chip{display:inline-block;margin:2px 0 12px;padding:6px 11px;font-size:11px;line-height:1}
.twocol .item .t{display:block;font-size:16px;font-weight:800;line-height:1.7;margin-top:0;text-wrap:wrap}
.twocol .item .d{margin-top:10px;font-size:12px}
@media (max-width:640px){.twocol .item{grid-template-columns:140px 1fr;gap:14px;padding:18px 0}.twocol .item img{width:140px;height:79px}.twocol .item .t{font-size:14px}}

/* 2026-09-21: News と Articles の区切り線を左右で揃える（題名が 1 行でも 2 行でも行の高さを同じに） */
.twocol .item{height:190px;box-sizing:border-box;overflow:hidden}
.twocol .item .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:640px){.twocol .item{height:auto}}

/* ===== 2026-09-21: LEARN = メンバー限定の学習サイトで学べる 4 つ（画像・動画・音声・言語化） ===== */
.lrn{background:var(--white);color:var(--ink);padding-block:var(--pad-l)}
.lrn-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:end}
.lrn .sec-title .en{color:var(--ink)}
.lrn-lead{font-size:15px;line-height:2.05;font-weight:500}
.lrn-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:44px}
.lrn-t{position:relative;background:var(--page);border-radius:16px;padding:26px 24px 28px;display:flex;flex-direction:column;min-height:270px}
.lrn-t-no{font:400 15px/1 var(--en);color:var(--ink-soft)}
.lrn-t-en{font:400 30px/1 var(--en);text-transform:uppercase;margin-top:34px;letter-spacing:.01em}
.lrn-t b{font-size:17px;font-weight:900;margin-top:12px}
.lrn-t p{font-size:13.5px;line-height:1.95;color:var(--ink-soft);margin-top:10px;flex:1;text-wrap:balance}  /* 2〜4 行の短い説明。1〜2 文字だけ残る最終行を避ける（2026-09-28 幅検査の警告 4 件） */
.lrn-t-st{position:absolute;top:22px;right:20px;background:#0a0a0a;color:#fff;font:800 10.5px/1 var(--jp);padding:7px 10px;border-radius:999px}
.lrn-cta{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:40px}
.lrn-sub{font-size:13px;font-weight:800;text-underline-offset:5px}
@media (max-width:1020px){.lrn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lrn-head{grid-template-columns:1fr;gap:18px}}
@media (max-width:560px){.lrn-grid{grid-template-columns:1fr}.lrn-t{min-height:0}}
/* 2026-09-21: LEARN の見出しと説明文は上端を揃える（下揃えだと文が浮いて見える） */
.lrn-head{align-items:start}
.lrn-lead{margin-top:6px;max-width:40em}

/* 数字で見る（2026-09-22: City の欄の場所へ）。黒帯の中の見出しは白 */
.numbers .sec-title{color:var(--white);margin-bottom:40px}.numbers .sec-title .sub{color:#bdbdbd}
.numbers .n b{white-space:nowrap;font-size:clamp(34px,4.3vw,64px)}.numbers .n b i{font-size:.26em}
@media (max-width:760px){.numbers .grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}}

/* ===== トップの最初の画面 v2（2026-09-22 STΛCK が E1 を選択）: 積んだ 3 枚の板の形の窓に動画・粒の板の脇役。PC は右に窓／スマホは窓が上・文字が下 ===== */
.hero-v.fv2{background:#060606;overflow:hidden;display:flex;align-items:center}
.hero-v.fv2::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 78% 58%,rgba(198,249,31,.10),rgba(198,249,31,0) 62%)}
.hero-v.fv2::after{display:none}
.hero-v.fv2 .wrap{position:relative;z-index:5;max-width:none;padding-inline:clamp(20px,5vw,96px)}
.hero-v.fv2 .kicker{color:#C6F91F;font-size:clamp(12px,1.05vw,16px);letter-spacing:.26em}
.hero-v.fv2 h1{font-size:clamp(60px,8.8vw,160px);margin-top:20px}
.hero-v.fv2 .cta{margin-top:clamp(28px,3.2vw,48px);align-items:center;gap:18px}
.hero-v.fv2 .cta .pill{font-size:clamp(14px,1.1vw,17px);padding:16px 30px}
.hero-v.fv2 .cta .free{font-size:13px;font-weight:800;letter-spacing:.08em;color:#bdbdbd}
.hero-v.fv2 h1 .dot{color:#C6F91F}
.hero-v.fv2 .fvm{position:absolute;z-index:2;right:-6vw;bottom:-5%;width:clamp(620px,58vw,1400px);aspect-ratio:1000/880;
  -webkit-mask:url(/assets/fv/stack-mask.svg) center/100% 100% no-repeat;mask:url(/assets/fv/stack-mask.svg) center/100% 100% no-repeat;
  animation:fvIn 1.4s cubic-bezier(.22,1,.36,1) both}
.hero-v.fv2 .fvm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
.hero-v.fv2 .pl{position:absolute;height:auto;pointer-events:none;animation:fvFloat 9s ease-in-out infinite alternate}
.hero-v.fv2 .pl-a{z-index:1;right:-5vw;top:1%;width:31vw;--r:-9deg}
.hero-v.fv2 .pl-b{z-index:3;left:36vw;bottom:-3%;width:17vw;--r:7deg;animation-duration:11s;animation-delay:-3s}
.hero-v.fv2 .pl-c{z-index:3;left:3vw;top:7%;width:10vw;--r:-16deg;animation-duration:7s;animation-delay:-1.5s}
@keyframes fvIn{from{opacity:0;transform:translate3d(6vw,0,0)}to{opacity:1;transform:none}}
@keyframes fvFloat{from{transform:translate3d(0,-7px,0) rotate(var(--r,0deg))}to{transform:translate3d(0,8px,0) rotate(var(--r,0deg))}}
@media (max-width:900px){
  .hero-v.fv2{display:block;min-height:0;padding:0 0 40px}
  .hero-v.fv2 .wrap{padding:0 20px}
  .hero-v.fv2 h1{font-size:clamp(48px,16.4vw,96px)}
  .hero-v.fv2 .fvm{position:relative;right:auto;bottom:auto;width:min(118vw,760px);margin:0 auto 26px;left:50%;transform:translateX(-50%);margin-left:0;aspect-ratio:1000/900;animation:none}
  .hero-v.fv2 .pl-a{right:-14vw;top:14px;width:52vw}
  .hero-v.fv2 .pl-b{left:-9vw;bottom:auto;top:min(80vw,520px);width:min(40vw,260px);z-index:3}
  .hero-v.fv2 .pl-c{display:none}
  .hero-v.fv2 .cta{position:relative;z-index:6}
}
@media (min-width:0) and (max-width:0){.hero-v.fv2 .fvm,.hero-v.fv2 .pl{animation:none!important}.hero-v.fv2 .pl{transform:rotate(var(--r,0deg))!important}}

/* ===== トップの最初の画面 v3「文字が窓」（2026-09-22）。黒い面に白い文字を置いて映像に掛け合わせる → 白い文字の所だけ映像が残る ===== */
.fv3{--inout:cubic-bezier(.87,0,.13,1);--out:cubic-bezier(.215,.61,.355,1);--outq:cubic-bezier(.165,.84,.44,1);
  position:relative;height:100svh;min-height:600px;max-height:1080px;overflow:hidden;background:#000;color:#fff}
.fv3 video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.12) contrast(1.05) brightness(1.1)}
.fv3-knock{position:absolute;inset:0;background:#000;mix-blend-mode:multiply;display:flex;flex-direction:column;justify-content:center;padding:2vh clamp(16px,3vw,56px) 9vh}
.fv3-knock .w{display:block;font-family:var(--en);text-transform:uppercase;color:#fff;letter-spacing:-.035em;white-space:nowrap}
.fv3-knock .w1{font-size:min(clamp(72px,21.4vw,420px),36svh);line-height:.8}
.fv3-knock .fv3-row{display:flex;gap:3.6vw;margin-top:1.1vw}
.fv3-knock .fv3-row .w{font-size:min(clamp(48px,14.3vw,280px),24svh);line-height:.86}
.fv3-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
.fv3-kick{position:absolute;z-index:3;left:clamp(16px,3vw,56px);top:calc(68px + 2.6%);margin:0;font:800 clamp(11px,1.05vw,16px)/1 var(--en-nav);letter-spacing:.26em;color:#C6F91F}
.fv3-msg{position:absolute;z-index:3;left:clamp(16px,3vw,56px);bottom:5.2%;margin:0;font-weight:900;font-size:clamp(18px,2vw,32px);line-height:1.3;letter-spacing:.02em}
.fv3-msg .num{font-family:var(--en);font-weight:400;color:#C6F91F;margin-right:.18em}
.fv3-msg small{font-size:.62em;font-weight:700;margin-right:1em;letter-spacing:.06em}
.fv3-cta{position:absolute;z-index:3;right:clamp(16px,3vw,56px);bottom:4.4%;margin:0;display:flex;align-items:center;gap:16px}
.fv3-cta small{font-size:13px;font-weight:700;color:#cfcfcf;letter-spacing:.08em}
.fv3-btn{--x:50%;--y:50%;position:relative;display:flex;align-items:center;gap:18px;min-height:58px;padding:0 24px 0 28px;border-radius:6px;background:#C6F91F;color:#0a0a0a;text-decoration:none;
  font:800 15px/1 var(--en-nav);letter-spacing:.06em;overflow:hidden;isolation:isolate;transition:transform .5s var(--out),box-shadow .5s var(--out)}
.fv3-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;clip-path:circle(0% at var(--x) var(--y));transition:clip-path .55s var(--outq)}
.fv3-btn .ar{transition:transform .5s var(--out)}
.fv3-btn:hover,.fv3-btn:focus-visible{transform:translateY(-2px);box-shadow:0 14px 40px rgba(198,249,31,.28)}
.fv3-btn:hover::before,.fv3-btn:focus-visible::before{clip-path:circle(150% at var(--x) var(--y))}
.fv3-btn:hover .ar{transform:translateX(5px)}
.fv3-prog{position:absolute;z-index:3;right:clamp(16px,3vw,56px);top:calc(68px + 3%);display:flex;gap:6px}
.fv3-prog i{width:34px;height:2px;background:rgba(255,255,255,.28);position:relative;overflow:hidden}
.fv3-prog i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(var(--p,0));transform-origin:left}
.fv3-bar{position:relative;display:inline-block;overflow:hidden;vertical-align:top}
.fv3-bar>span{display:block}
.fv3-bar::after{content:"";position:absolute;inset:0;background:#C6F91F;transform:scaleX(0);transform-origin:left}
/* 段階的に出す（JS が動いているときだけ、初期状態で隠す） */
.fv3.is-js .fv3-knock .w{clip-path:inset(0 100% 0 0)}
.fv3.is-js .fv3-bar>span{opacity:0}
.fv3.is-js .fv3-cta{opacity:0;transform:translateY(10px);transition:opacity .7s var(--out),transform .7s var(--out)}
.fv3.is-js.s1 .fv3-knock .w1{clip-path:inset(0 0 0 0);transition:clip-path 1s var(--inout)}
.fv3.is-js.s2 .fv3-knock .fv3-row .w{clip-path:inset(0 0 0 0);transition:clip-path 1s var(--inout)}
.fv3.is-js.s2 .fv3-knock .fv3-row .w:nth-child(2){transition-delay:.12s}
.fv3.is-js.s4 .fv3-cta{opacity:1;transform:none}
.fv3.is-js .fv3-bar.in>span{animation:fv3Txt .01s linear .32s forwards}
.fv3.is-js .fv3-bar.in::after,.fv3.is-js .fv3-bar.out::after{animation:fv3Bar .64s var(--inout) forwards}
.fv3.is-js .fv3-bar.out>span{opacity:1;animation:fv3TxtOut .01s linear .32s forwards}
@keyframes fv3Txt{to{opacity:1}}@keyframes fv3TxtOut{to{opacity:0}}
@keyframes fv3Bar{0%{transform:scaleX(0);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}50.01%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
@media (max-width:900px){
  /* スマホ: 画面の高さ（svh）を基準にして、3 行の文字・言葉・ボタンが必ず 1 画面に収まるようにする（2026-09-22 STΛCK「見切れないように」） */
  .fv3{height:100svh;min-height:520px;max-height:900px}
  .fv3-knock{padding:14svh 14px 26svh;justify-content:center}  /* inset:0 のまま（黒い面が映像全体を覆う）。文字の置き場だけ padding で寄せる */
  .fv3-knock .w1,.fv3-knock .fv3-row .w{font-size:min(24.4vw,15svh);line-height:.84}
  .fv3-knock .fv3-row{display:block;margin-top:0}
  .fv3-kick{top:calc(68px + 10px)}.fv3-prog{top:calc(68px + 13px)}.fv3-prog i{width:22px}
  .fv3-msg{left:16px;right:16px;bottom:calc(24px + 58px + 30px);font-size:clamp(16px,4.6vw,22px)}
  .fv3-cta{left:16px;right:auto;bottom:max(24px,env(safe-area-inset-bottom,24px))}
}
@media (min-width:0) and (max-width:0){.fv3.is-js .fv3-knock .w{clip-path:none!important}.fv3.is-js .fv3-bar>span{opacity:1!important;animation:none!important}.fv3 .fv3-bar::after{display:none}.fv3.is-js .fv3-cta{opacity:1;transform:none}}

/* FV v4: 全画面の映像＋帯抜けの文字（参考: 企業サイトの収録。白い帯が伸びて、抜けた所に文字が残る） */
.fv4 .fv4-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 55%,rgba(0,0,0,.08) 100%),linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.4) 100%)}
.fv4 video{filter:saturate(1.08) contrast(1.04)}
.fv4 .fv4-in{position:absolute;z-index:3;left:clamp(16px,3vw,56px);right:clamp(16px,3vw,56px);top:0;bottom:0;display:grid;align-content:center;max-width:1100px}  /* 文字は膜（z-index:1）より前。反転をやめたので z-index を戻した（2026-09-22 STΛCK「白に戻ってない」） */
.fv4 .fv3-kick{position:static;margin:0 0 clamp(12px,1.2vw,18px)}
.fv4 .fv3-kick .fv3-bar{font-size:clamp(11px,1.05vw,16px);letter-spacing:.26em}
.fv4 .fv4-h1{margin:0;font-family:var(--en);font-weight:400;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(56px,8.6vw,138px);line-height:.94;color:#fff}
.fv4 .fv4-h1 .fv3-bar{display:block;width:max-content;max-width:100%;padding-right:.06em}
.fv4 .fv3-msg{position:static;margin:clamp(12px,1.4vw,20px) 0 0;font-size:clamp(18px,2.2vw,34px);font-weight:900}
.fv4 .fv3-cta{position:static;margin:clamp(18px,2vw,30px) 0 0;justify-content:flex-start}
.fv4 .fv3-btn{min-height:58px;padding:0 24px 0 28px;font-size:15px;border-radius:6px;gap:18px}
.fv4 .fv3-bar::after{background:#fff}
.fv4 .fv3-msg .fv3-bar::after,.fv4 .fv3-kick .fv3-bar::after{background:#C6F91F}
.fv4 .fv3-prog{top:auto;right:clamp(16px,3vw,56px);bottom:clamp(20px,3vh,36px);flex-direction:column;gap:6px}
.fv4 .fv3-prog i{width:2px;height:34px}.fv4 .fv3-prog i::after{transform:scaleY(var(--p,0));transform-origin:top}
.fv4 .fv4-scroll{position:absolute;z-index:3;left:50%;bottom:clamp(16px,2.6vh,30px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;text-decoration:none;font:700 11px/1 var(--en-nav);letter-spacing:.2em;opacity:0;transition:opacity .8s var(--out)}
.fv4 .fv4-scroll i{width:1px;height:28px;background:rgba(255,255,255,.7);position:relative;overflow:hidden}
.fv4 .fv4-scroll i::after{content:"";position:absolute;inset:0;background:#C6F91F;animation:fv4Scroll 1.8s var(--inout) infinite}
.fv4.s4 .fv4-scroll,.fv3:not(.is-js) .fv4-scroll{opacity:1}
@keyframes fv4Scroll{0%{transform:translateY(-100%)}55%{transform:translateY(0)}100%{transform:translateY(100%)}}
@media (max-width:900px){
  .fv4 .fv4-in{top:auto;transform:none;bottom:clamp(64px,11svh,110px);left:16px;right:16px}
  .fv4 .fv4-h1{font-size:min(19.5vw,15svh);line-height:.92}
  .fv4 .fv3-msg{font-size:clamp(16px,4.6vw,22px);margin-top:14px;left:auto;right:auto;bottom:auto}
  .fv4 .fv3-cta{margin-top:18px;left:auto;right:auto;bottom:auto}
  .fv4 .fv4-scroll{bottom:16px}
  .fv4 .fv3-prog{bottom:16px;right:16px}
}
@media (min-width:0) and (max-width:0){.fv4 .fv4-scroll{opacity:1}.fv4 .fv4-scroll i::after{animation:none}}

/* 見出しが日本語の段（楽しいを、積み上げろ。）は日本語の書体で少し小さく */
.fv4 .fv4-h1 .fv3-bar.jp{font-family:var(--jp);font-weight:900;font-size:.66em;letter-spacing:.01em;line-height:1.16}
.fv4 .fv4-h1 .fv3-bar.out>span{opacity:1}
/* 文字の位置を固定: 見出しは常に 2 行分、言葉は 2 行分の高さを取り、段が変わってもボタンが動かない（2026-09-22 STΛCK「ボタンが文字数で動く」） */
.fv4 .fv4-h1 .fv3-bar{height:1.02em;line-height:1.02em}
.fv4 .fv4-h1 .fv3-bar.jp{font-size:.66em;height:calc(1.02em / .66);line-height:calc(1.02em / .66)}
.fv4 .fv3-msg{min-height:2.6em}
.fv4 .fv3-btn{font-family:var(--jp);font-weight:800;letter-spacing:.02em}
/* スマホ: 映像は PC と同じく全面（主役は中央に寄せる）。文字は下 4 割に重ね、上下の暗がりで読ませる。文字は 1 画面に収まる大きさ（2026-09-22 STΛCK「SP の箱はださい」） */
@media (max-width:900px){
  .fv4 video{object-position:50% 50%}
  .fv4 .fv4-shade{background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 44%,rgba(0,0,0,.72) 66%,rgba(0,0,0,.9) 100%)}
  .fv4 .fv4-in{top:auto;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:16px;right:16px;max-width:none;display:block}
  .fv4 .fv3-kick{margin-bottom:12px}
  .fv4 .fv4-h1{font-size:min(16.5vw,9svh)}
  .fv4 .fv3-msg{font-size:clamp(15px,4.2vw,19px);margin-top:12px;min-height:2.7em}
  .fv4 .fv3-cta{margin-top:14px}
  .fv4 .fv3-btn{width:100%;justify-content:center;min-height:48px;padding:0 20px}
  .fv4 .fv4-scroll{display:none}
  .fv4 .fv3-prog{display:none}
}
@media (max-height:640px) and (max-width:900px){.fv4 .fv4-h1{font-size:min(15vw,8.4svh)}.fv4 .fv3-msg{min-height:0}}
/* 触る端末: マウスオーバーの代わりに押した瞬間に同じ動き */
@media (hover:none){.fv3-btn:active{transform:translateY(-2px)}.fv3-btn:active::before{clip-path:circle(150% at var(--x) var(--y))}}


/* 2026-09-22 STΛCK の指摘 5 点: 見出しと絞り込みの行間／View more／LEARN の上端そろえ／フッターの白文字／縦線を細く */
.hc-find{margin-top:28px}
.lrn-head .lrn-lead{margin-top:18px}


/* 2026-09-23 STΛCK「ここだけグレーに」: トップの CONTACT の帯だけ濃いグレー（JOIN は白のまま） */
.band.bk#mypage{background:#2A2A2A;color:#fff;border-top:0}.band.bk#mypage .en{color:#fff}.band.bk#mypage .go{border-color:#fff}

/* スマホのトップ ARTWORKS 見出し（2026-09-24 STΛCK「ここおかしい」）: 見出しと VIEW ALL を横並び・矢印なし */
@media (max-width:640px){
  .awg-head{flex-wrap:nowrap;align-items:flex-end;gap:12px}
  .awg-ctl{margin-left:auto}
  .awg-ctl .pill{margin-left:0;white-space:nowrap}
}

@media (max-width:560px){.lrn-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.lrn-t{padding:16px 14px}}  /* トップの Learn も 2 列（2026-09-24 STΛCK） */
@media (max-width:900px){
  .awg-head{flex-wrap:wrap;gap:14px}
  .awg-ctl{margin-left:0;width:100%;justify-content:flex-start}  /* VIEW ALL は見出しの下（2026-09-24 STΛCK） */
  .awg-ctl .pill{margin-left:0}
}

/* スマホ・iPad: VIEW ALL は作品の下（2026-09-24 STΛCK「作品の下な」） */
.awg-more{display:none}
@media (max-width:900px){
  .awg-head .awg-ctl{display:none}
  .awg-more{display:flex;justify-content:center;margin-top:18px}
}

/* トップ Learn の札の文: 細い列では文節改行をやめ、句読点を行頭に出さない（2026-09-24 STΛCK「改行おかしい」） */
@media (max-width:640px){
  .lrn-t p{word-break:normal;line-break:strict;overflow-wrap:anywhere;text-wrap:balance;font-size:12.5px;line-height:1.85}
  .lrn-t p wbr{display:none}
  .lrn-t-en{font-size:22px;margin-top:26px;word-break:keep-all;overflow-wrap:normal;letter-spacing:0}
  .lrn-t b{font-size:15px}
}

@media (max-width:640px){.fv3 video,.fv4 video{object-position:26% 50%}}  /* スマホは動画を少し左寄せ（2026-09-24 STΛCK） */

/* 記事・お知らせのサムネは切らない（2026-09-24 STΛCK「スマホで記事サムネが見切れる。100% で」）: 箱を 16:9 に。site.css より後に読むのでここに置く */
.item img,.twocol .item img{height:auto;aspect-ratio:16/9;object-fit:cover}

/* 2026-09-25 STΛCK: 札（SITE / AIニュース）の上端をサムネの上端に、日付の下端をサムネの下端に合わせる。画像は切らない（9/24「画像を見切らせない」）。
   行の高さは画像（16:9）で決め、右の文字の束を上下いっぱいに広げて「札＝上・題名＝中・日付＝下」に配る。題名が 1 行でも 2 行でも上下が合う。
   PC: 224×126。スマホ: 156×88、題名 13px */
.twocol .item{align-items:stretch;height:auto}
.twocol .item>span{justify-content:space-between}
.twocol .item .chip{margin:0}
.twocol .item .t{margin:0}
.twocol .item .d{margin:0}
@media (max-width:640px){
  .twocol .item{grid-template-columns:156px 1fr;gap:12px}
  .twocol .item img{width:156px}
  .twocol .item .t{font-size:13px;line-height:1.5}
}