/* ここにこッ! MEDIA 営業ページ共通：配色B「アイスグラス」＋動きの型（2026-10-30）
   使う型：01 文字が立ち上がる見出し / 04 流れる帯 / 05 数字カウント / 07 左右から飛び込む / 08 光が一周するボタン / 10 順にひらくグリッド
   03（傾く動画カード）と 06（積み重なる画面）は各ページ側で実装 */
:root{
  --bg:#EEF4FB;--bg2:#F9FBFF;--ink:#0E1A2E;--mist:#5E6F88;--dim:#8A98B0;
  --c1:#12B8E8;--c2:#6D5CFF;--c3:#4FE1C1;--line:rgba(14,26,46,.10);
  --glass:rgba(255,255,255,.62);--shadow:0 18px 50px rgba(18,184,232,.16);
  --rose:var(--c2);--gold:var(--c2);   /* 旧トークン名を新配色に読み替え（既存CSSの互換用） */
  --jp:"Zen Kaku Gothic New",system-ui,-apple-system,sans-serif;--en:"Space Grotesk",var(--jp);
}
html{overflow-x:clip}
body{background:var(--bg);color:var(--ink);overflow-x:clip}
::selection{background:color-mix(in srgb,var(--c1) 30%,transparent)}

/* 08 光が一周するボタン：LINE色のまま、縁を光が回り、3秒に1回ツヤが走る */
.btn{position:relative;isolation:isolate;overflow:hidden;background:#06C755!important;color:#fff!important;box-shadow:0 14px 34px -14px rgba(6,199,85,.7)!important}
.btn::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:conic-gradient(from var(--a,0deg),transparent 0 62%,#fff 76%,transparent 90%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:btnspin 2.8s linear infinite;z-index:-1;pointer-events:none}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);transform:translateX(-120%);animation:btnshine 3.4s ease-in-out infinite;pointer-events:none}
.btn.chk,.btn.ghost{background:transparent!important;color:var(--ink)!important;box-shadow:none!important;border:1px solid var(--line)}
.btn.chk::before,.btn.ghost::before,.btn.chk::after,.btn.ghost::after{display:none}
.btn.chk{border-color:var(--c2);color:var(--c2)!important}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes btnspin{to{--a:360deg}}
@keyframes btnshine{0%,58%{transform:translateX(-120%)}88%,100%{transform:translateX(120%)}}

/* ヘッダー：白いガラス */
.top{background:linear-gradient(rgba(238,244,251,.92),rgba(238,244,251,0))!important}
.top.solid{background:var(--glass)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.mark{color:var(--ink)}
:focus-visible{outline:2px solid var(--c1)!important}

/* 01 文字が立ち上がる見出し */
.split .ch{display:inline-block;will-change:transform,opacity,filter}
.split.ready .ch{opacity:0;transform:translateY(.9em);filter:blur(6px)}

/* 04 斜めに流れる帯 */
.band{margin:44px calc(50% - 50vw) 0;padding:18px 0;overflow:hidden;transform:rotate(-2.5deg) scale(1.06);display:grid;gap:10px}
.band .row{display:flex;gap:10px;white-space:nowrap;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.band .trk{display:flex;gap:10px;animation:mq 26s linear infinite;will-change:transform}
.band .row.rev .trk{animation-direction:reverse;animation-duration:32s}
.band .chip{font-family:var(--en);font-weight:500;font-size:14px;padding:10px 16px;border-radius:999px;background:var(--bg2);border:1px solid var(--line);color:var(--ink)}
.band .chip.on{background:var(--ink);color:var(--bg)}
.band .chip.hl{background:linear-gradient(90deg,var(--c1),var(--c2));color:#fff;border-color:transparent}
@keyframes mq{to{transform:translateX(-50%)}}

/* 05 数字：線が伸びる */
.cnt-ln{height:3px;background:var(--line);border-radius:3px;margin-top:10px;overflow:hidden}
.cnt-ln i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--c1),var(--c3))}

/* 07 左右から飛び込む（data-fly を付けた要素） */
[data-fly]{will-change:transform,opacity}

/* 10 順にひらくグリッド */
.bento{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.cell{border-radius:16px;background:var(--bg2);border:1px solid var(--line);padding:14px;position:relative;overflow:hidden}
.cell.big{grid-column:span 2}
.cell b{display:block;font-size:14px;color:var(--ink)}
.cell small{display:block;font-size:12px;color:var(--mist);line-height:1.5;margin-top:4px}
.cell .glow{position:absolute;right:-30px;bottom:-30px;width:110px;height:110px;border-radius:50%;background:var(--c2);filter:blur(34px);opacity:.28;pointer-events:none}
.cell.k1 .glow{background:var(--c1)}.cell.k3 .glow{background:var(--c3)}
.cell .ico{font-family:var(--en);font-size:24px;font-weight:700;color:var(--c2);line-height:1;margin-bottom:6px}
.bento.ready .cell{clip-path:inset(0 100% 0 0 round 16px);opacity:.4}

/* ガラスのカード（共通） */
.glass{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow)}

/* 光の背景（02は不採用だが、うっすら奥行きだけ） */
.aura{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;filter:blur(60px);opacity:.55}
.aura i{position:absolute;border-radius:50%;width:60vw;max-width:520px;aspect-ratio:1}
.aura i:nth-child(1){background:var(--c1);left:-20vw;top:-10vh;opacity:.5}
.aura i:nth-child(2){background:var(--c2);right:-25vw;top:30vh;opacity:.35}
.aura i:nth-child(3){background:var(--c3);left:10vw;bottom:-30vh;opacity:.4}

@media (prefers-reduced-motion:reduce){
  .btn::before,.btn::after,.band .trk{animation:none!important}
  .split.ready .ch{opacity:1;transform:none;filter:none}
  .bento.ready .cell{clip-path:none;opacity:1}
}