/* =====================================================================
   MASH UP（イベント）だけのデザイン
   コンセプト：ショーの熱気（全面ブラック、巨大な英字、ネオンのグラデーション）
   動き：文字が斜めに切り込んで出る／帯が流れる／カードが色で塗りつぶされる　3D：ミラーボールと照明
   ===================================================================== */
[data-biz="mashup"]{
  --paper:#08060b;--paper-2:#17111c;--white:#0f0b13;--ink:#f7f3f9;--ink-2:#b9aec2;
  --line:rgba(255,255,255,.16);--line-strong:rgba(255,255,255,.8);--r:2px;
  --accent:#ff5ce1;--grad-on-light:var(--grad);--grad-text:var(--grad);
  --f-en:"Bebas Neue","Zen Kaku Gothic New",sans-serif;--f-logo:"Bebas Neue",sans-serif;
}
[data-biz="mashup"] .logo__name{font-family:"Orbitron",sans-serif}
[data-biz="mashup"] .logo svg circle{fill:#fff}
[data-biz="mashup"] .logo__biz{font-family:"Titan One","Bebas Neue",sans-serif;font-size:15px;letter-spacing:.08em;white-space:nowrap}
@media (max-width:479px){[data-biz="mashup"] .logo__biz{font-size:12px;letter-spacing:.04em}}
[data-biz="mashup"] .header{background:rgba(8,6,11,.82)}
[data-biz="mashup"] .nav__list a{font-weight:700}
[data-biz="mashup"] ::selection{background:#ff5ce1;color:#08060b}

/* 3Dの表示場所（共通）：準備ができたら .is-on が付いて表示される */
.fx3d{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease);pointer-events:none}
.fx3d.is-on{opacity:1}
.fx3d canvas{display:block;width:100%;height:100%}

/* ---------- ボタン：角ばった形 ---------- */
[data-biz="mashup"] .btn{border-radius:0;letter-spacing:.1em}
[data-biz="mashup"] .btn__arrow{border-radius:0}
[data-biz="mashup"] .btn--ink{background:var(--grad);color:#08060b}
[data-biz="mashup"] .btn--ink:hover{background:#fff}
[data-biz="mashup"] .btn--ink .btn__arrow{background:rgba(8,6,11,.16)}
[data-biz="mashup"] .btn--light{background:#fff;color:#08060b}
[data-biz="mashup"] .btn--light .btn__arrow{background:#08060b;color:#fff}
[data-biz="mashup"] .btn--ghost{border-color:rgba(255,255,255,.5)}
[data-biz="mashup"] .btn--ghost:hover{background:#fff;color:#08060b;border-color:#fff}

/* ---------- ヒーロー ---------- */
.mu-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;align-items:end;min-height:min(92svh,880px);padding-block:clamp(48px,7vw,88px) clamp(40px,5vw,72px);
  background:radial-gradient(80% 60% at 72% 18%,#3d0d36 0%,transparent 60%),radial-gradient(60% 50% at 8% 92%,#3d1c05 0%,transparent 60%),#08060b}
.mu-hero__stage{position:absolute;inset:0;z-index:-1}
/* 3Dが使えないときの代わりの照明（CSS） */
.mu-hero__stage::before{content:"";position:absolute;inset:-20% -10% 0;opacity:.5;transform-origin:50% 0;animation:muSwing 7s ease-in-out infinite alternate;
  background:conic-gradient(from 160deg at 30% 0,transparent 0 8deg,rgba(255,92,225,.5) 12deg,transparent 18deg),conic-gradient(from 165deg at 70% 0,transparent 0 14deg,rgba(255,177,77,.45) 19deg,transparent 26deg)}
.mu-hero__stage.has-3d::before{display:none}
@keyframes muSwing{to{transform:rotate(6deg)}}
.mu-hero__eyebrow{font-family:var(--f-en);font-size:clamp(14px,1.5vw,18px);letter-spacing:.3em;color:var(--accent-bright)}
/* 「MASH UP」の大きな文字：かわいい丸い太字（Titan One）。別の書体にしたいときは、この行の font-family と index.html のフォント読み込みを変えます */
.mu-hero__logo{display:flex;flex-wrap:wrap;gap:0 .2em;margin:10px 0 0 -.02em;font-family:"Titan One","Bebas Neue",sans-serif;font-size:clamp(62px,15.4vw,224px);line-height:.98;letter-spacing:0}
.mu-hero__logo span{display:inline-block;animation:muIn 1.1s var(--ease) both}
.mu-hero__logo span:first-child{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* 「UP」：白く塗りつぶし、濃い色のふちと影を付けて、ミラーボールの上でも読めるようにする */
.mu-hero__logo span:last-child{color:#fff;-webkit-text-stroke:.035em #1a0b22;paint-order:stroke fill;animation-delay:.16s;rotate:-4deg;translate:0 -.04em;
  text-shadow:.045em .05em 0 #ff5ce1,.09em .1em 0 #1a0b22,0 0 .5em rgba(8,6,11,.85)}
.mu-hero__logo span:first-child{filter:drop-shadow(0 .03em .22em rgba(8,6,11,.85))}
@keyframes muIn{from{transform:translateY(55%) skewY(8deg);opacity:0}}
.mu-hero__title{margin-top:clamp(14px,2vw,24px);font-size:clamp(20px,2.7vw,36px);font-weight:900;line-height:1.5;text-shadow:0 2px 16px rgba(8,6,11,.95),0 0 4px rgba(8,6,11,.8)}
.mu-hero__title .line{display:inline-block;vertical-align:top}
.mu-hero__title .grad{text-shadow:none;filter:drop-shadow(0 2px 8px rgba(8,6,11,.9))}
/* スマホ：ミラーボールを文字の上に置くための空き */
@media (max-width:719px){.mu-hero{padding-top:calc(min(84vw,340px) + 52px)}}
.mu-hero__lead{margin-top:14px;max-width:34em;color:#d9d0e0;text-shadow:0 1px 12px rgba(8,6,11,.95),0 0 3px rgba(8,6,11,.9)}
/* 3つのUPの札 */
.mu-hero__ups{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:18px}
.mu-hero__ups li{display:inline-flex;align-items:baseline;gap:6px;padding:6px 16px 7px;border:1.5px solid rgba(255,255,255,.7);border-radius:999px;font-weight:900;font-size:15px;line-height:1.3;background:rgba(8,6,11,.45)}
.mu-hero__ups b{font-family:"Titan One",sans-serif;font-weight:400;font-size:14px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 流れる帯：グラデーションの斜めの帯 ---------- */
.mu-marquee{position:relative;z-index:2;padding-block:12px;background:var(--grad);color:#08060b;transform:rotate(-1.6deg) scale(1.04);margin-block:-14px 0}
.mu-marquee .marquee__item{font-family:"Titan One","Zen Kaku Gothic New",sans-serif;font-weight:400;font-size:clamp(24px,3.4vw,46px);letter-spacing:.02em}
.mu-marquee .marquee__item::after{background:#08060b}
.mu-marquee .marquee__item--outline{-webkit-text-stroke:1.5px #08060b}

/* ---------- 3つのUP：丸いカードに、大きな「UP」の文字 ---------- */
.mu-value{padding-bottom:0}
.mu-ups{display:grid;gap:18px}
@media (min-width:860px){.mu-ups{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}}
.mu-up{position:relative;overflow:hidden;padding:clamp(24px,2.6vw,36px);border:1.5px solid rgba(255,255,255,.28);border-radius:28px;background:linear-gradient(160deg,rgba(255,92,225,.12),rgba(255,177,77,.06) 60%,transparent);transition:transform .5s cubic-bezier(.34,1.56,.64,1),border-color .4s}
.mu-up:hover{transform:translateY(-8px) rotate(-1deg);border-color:var(--accent-bright)}
.mu-up__no{font-family:"Titan One",sans-serif;font-size:15px;color:var(--accent-bright)}
.mu-up__name{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .16em;margin-top:8px;font-weight:900;font-size:clamp(34px,3.8vw,52px);line-height:1.2}
.mu-up__up{display:inline-block;font-family:"Titan One",sans-serif;font-weight:400;font-size:1.25em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;rotate:-6deg;transition:translate .5s cubic-bezier(.34,1.56,.64,1)}
.mu-up:hover .mu-up__up{translate:0 -8px}
.mu-up__en{margin-top:2px;font-family:var(--f-en);font-size:17px;letter-spacing:.24em;color:var(--ink-2)}
.mu-up__desc{margin-top:14px;font-size:15px;line-height:1.9;color:var(--ink-2)}
/* 斜めに切り込む動きだと丸いカードの角が欠けるので、このカードだけ下からふわっと出す */
.js[data-biz="mashup"] .mu-ups .mu-up[data-reveal]{opacity:0;transform:translateY(30px) scale(.94);clip-path:none;transition:opacity .5s ease,transform .8s cubic-bezier(.34,1.56,.64,1)}
.js[data-biz="mashup"] .mu-ups .mu-up[data-reveal].is-in{opacity:1;transform:none;clip-path:none}
.js[data-biz="mashup"] .mu-ups .mu-up[data-reveal]:nth-child(2){transition-delay:.12s}
.js[data-biz="mashup"] .mu-ups .mu-up[data-reveal]:nth-child(3){transition-delay:.24s}

/* ---------- 見出し：英字を大きく ---------- */
[data-biz="mashup"] .sec-head__en{font-size:clamp(22px,2.6vw,34px);letter-spacing:.14em;color:var(--accent-bright)}
[data-biz="mashup"] .sec-head__en::before{width:40px;height:4px}
[data-biz="mashup"] .sec-head__ja{font-weight:900;font-size:clamp(28px,4.4vw,58px)}

/* ---------- コンテンツ：線で区切ったタイル。乗せると色で塗りつぶされる ---------- */
[data-biz="mashup"] .s-learn{display:block}
[data-biz="mashup"] .s-learn>div:first-child{display:grid;gap:24px;align-items:end;margin-bottom:clamp(28px,4vw,56px)}
@media (min-width:960px){[data-biz="mashup"] .s-learn>div:first-child{grid-template-columns:5fr 6fr;gap:56px}[data-biz="mashup"] .s-learn .sec-head{margin-bottom:0}}
[data-biz="mashup"] .s-learn__photo{max-width:none;aspect-ratio:16/9;border-radius:0;clip-path:polygon(5% 0,100% 0,95% 100%,0 100%)}
[data-biz="mashup"] .s-skills{display:grid;border:0}
@media (min-width:720px){[data-biz="mashup"] .s-skills{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){[data-biz="mashup"] .s-skills{grid-template-columns:repeat(3,minmax(0,1fr))}}
[data-biz="mashup"] .s-skills li{position:relative;isolation:isolate;overflow:hidden;display:block;margin:0 -1px -1px 0;padding:clamp(24px,2.6vw,36px);border:1px solid var(--line);transition:color .4s}
[data-biz="mashup"] .s-skills li::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad);transform:translateY(101%);transition:transform .55s var(--ease)}
[data-biz="mashup"] .s-skills li:hover::before{transform:none}
[data-biz="mashup"] .s-skills li:hover,[data-biz="mashup"] .s-skills li:hover p,[data-biz="mashup"] .s-skills li:hover .s-skills__no{color:#08060b}
[data-biz="mashup"] .s-skills__no{display:block;margin-bottom:10px;font-size:48px;line-height:1;color:var(--accent-bright);transition:color .4s}
[data-biz="mashup"] .s-skills h3{font-weight:900;font-size:clamp(19px,1.8vw,23px)}
[data-biz="mashup"] .s-skills p{transition:color .4s}
[data-biz="mashup"] .flow__en{font-size:clamp(44px,5.4vw,76px);letter-spacing:.04em;line-height:.9}
[data-biz="mashup"] .flow__no{font-size:16px;letter-spacing:.2em;color:var(--accent-bright)}
[data-biz="mashup"] .flow__dot{background:#08060b;border-color:#fff}

/* ---------- 実績：巨大な数字 ---------- */
[data-biz="mashup"] .band.dark{background:transparent}
[data-biz="mashup"] .s-stats{border:0;gap:0 24px}
[data-biz="mashup"] .s-stats li{padding:18px 0 22px;border:0;border-top:3px solid;border-image:var(--grad) 1}
[data-biz="mashup"] .s-stats__num{font-size:clamp(60px,8.4vw,124px);letter-spacing:.02em}
[data-biz="mashup"] .s-stats__num small{font-size:.2em}

/* ---------- 参加方法：斜めのカード ---------- */
[data-biz="mashup"] .s-courses{gap:20px}
[data-biz="mashup"] .s-course{background:transparent;border:1px solid var(--line-strong);border-radius:0;transform:skewX(-5deg);transition:background .4s,color .4s}
[data-biz="mashup"] .s-course>*{transform:skewX(5deg)}
[data-biz="mashup"] .s-course:hover{background:var(--grad);color:#08060b}
[data-biz="mashup"] .s-course:hover .s-course__copy,[data-biz="mashup"] .s-course:hover dd,[data-biz="mashup"] .s-course:hover .course__no{color:#08060b}
[data-biz="mashup"] .course__no{font-size:20px;letter-spacing:.14em;color:var(--accent-bright)}
[data-biz="mashup"] .s-course__name{font-weight:900}
@media (max-width:859px){[data-biz="mashup"] .s-course,[data-biz="mashup"] .s-course>*{transform:none}}

/* ---------- お問い合わせ：グラデーション一色 ---------- */
[data-biz="mashup"] .cta.panel.dark{margin-inline:0;border-radius:0;background:var(--grad);color:#08060b;--night-text:#08060b;--night-muted:#2c1024}
[data-biz="mashup"] .cta.panel::before{display:none}
[data-biz="mashup"] .cta .sec-head__en{color:#08060b}
[data-biz="mashup"] .cta .sec-head__en::before{background:#08060b}
[data-biz="mashup"] .cta__title{font-weight:900;font-size:clamp(32px,6vw,84px);line-height:1.2}
[data-biz="mashup"] .cta .grad{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#fff}
[data-biz="mashup"] .cta__lead{color:#2c1024;font-weight:700}
[data-biz="mashup"] .cta .btn--light{background:#08060b;color:#fff}
[data-biz="mashup"] .cta .btn--light .btn__arrow{background:#fff;color:#08060b}
[data-biz="mashup"] .cta .btn--ghost{border-color:#08060b;color:#08060b}
[data-biz="mashup"] .cta .btn--ghost:hover{background:#08060b;color:#fff}

/* ---------- 動き：見出しが斜めに切り込んで出る ---------- */
.js[data-biz="mashup"] [data-reveal]:not([data-reveal="lines"]){opacity:1;transform:translateX(-28px) skewX(-8deg);clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.js[data-biz="mashup"] [data-reveal].is-in:not([data-reveal="lines"]){transform:none;clip-path:inset(-20% -10% -20% -10%)}
.js[data-biz="mashup"] .s-course[data-reveal].is-in{transform:skewX(-5deg)}
@media (max-width:859px){.js[data-biz="mashup"] .s-course[data-reveal].is-in{transform:none}}
@media (prefers-reduced-motion:reduce){.js[data-biz="mashup"] [data-reveal]{clip-path:none!important}}

/* ===== 2026-10-09 追加：CUVEとは（社名の意味＋大切にしている4つのこと） ===== */
.mu-cuve{padding-bottom:0}
.mu-cuve__word{display:flex;flex-wrap:wrap;gap:.1em .45em;margin:clamp(10px,2vw,24px) 0 0;font-family:"Bebas Neue",var(--f-en),sans-serif;font-size:clamp(40px,7.5vw,104px);line-height:1;letter-spacing:.02em;color:rgba(255,255,255,.28)}
.mu-cuve__word b{font-weight:400;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mu-cuve__lead{max-width:40em;margin-top:clamp(20px,3vw,32px);font-size:clamp(15px,1.4vw,17px);line-height:2.1;color:var(--ink-2)}
@media (min-width:860px){.mu-ups--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.mu-ups--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mu-ups--4 .mu-up__name{font-size:clamp(26px,2.6vw,36px)}
.js[data-biz="mashup"] .mu-ups .mu-up[data-reveal]:nth-child(4){transition-delay:.36s}
/* 3つのステップの名前は少し小さく（「個性の発見」が1行に収まるように） */
#value .mu-up__name{font-size:clamp(30px,3.2vw,44px)}
@media (min-width:1200px){.mu-ups--4 .mu-up__name{font-size:clamp(24px,2.1vw,28px);white-space:nowrap}}