@charset "UTF-8";
/* =========================================================
   トップページ専用：メインビジュアルの演出（軽量化版）
   - index.html だけで読み込む（screen.css には書かない）
   - 面取り・光沢・押し出しは画像に焼き込み済み（img/lp/top01_*.png）
   - 動かすのは transform / opacity のみ（GPU合成で処理され、毎フレームの再描画なし）
   ========================================================= */
:root{
  --lp-pink:#e61b64;
  --lp-ease:cubic-bezier(.45,.05,.25,1);
}

/* ---------- 背景 ---------- */
#wrap.top{background:none;overflow-x:hidden}
.contener_bg{z-index:2}

.lp-bg{position:absolute;top:0;left:50%;width:1920px;height:1087px;margin-left:-960px;pointer-events:none;z-index:0;overflow:hidden}
.lp-bg-par,.lp-bg-drift{position:absolute;inset:-20px}
.lp-bg-drift{animation:lpDrift 22s var(--lp-ease) infinite alternate}
@keyframes lpDrift{from{transform:translate3d(6px,4px,0)}to{transform:translate3d(-6px,-4px,0)}}
.lp-bg-img{position:absolute;inset:20px;
  background:url(img/lp/main_bg.jpg) center top/1920px auto no-repeat;
  background-image:image-set(url(img/lp/main_bg.webp) type("image/webp"),url(img/lp/main_bg.jpg) type("image/jpeg"));
  animation:lpBreath 18s var(--lp-ease) infinite alternate}
@keyframes lpBreath{from{transform:scale(1)}to{transform:scale(1.02)}}

/* 光源のにじみ */
.lp-flare{position:absolute;width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);mix-blend-mode:screen}
.lp-flare .core{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.8) 6%,rgba(200,235,255,.4) 18%,rgba(140,200,255,.1) 40%,transparent 66%);
  animation:lpPulse 6.5s var(--lp-ease) var(--d,0s) infinite alternate}
.lp-flare .rays{position:absolute;inset:-35%;border-radius:50%;opacity:.55;
  background:repeating-conic-gradient(from 7deg,rgba(255,240,210,.4) 0deg .8deg,transparent .8deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 0%,rgba(0,0,0,.6) 18%,transparent 62%);mask:radial-gradient(circle,#000 0%,rgba(0,0,0,.6) 18%,transparent 62%);
  animation:lpSpin 140s linear infinite reverse}
@keyframes lpPulse{from{transform:scale(.82);opacity:.65}to{transform:scale(1.1);opacity:1}}
@keyframes lpSpin{to{transform:rotate(360deg)}}

/* グラフィックな光源：部品ごとの画像を回すだけ */
.lp-gflare{position:absolute;width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);mix-blend-mode:screen;
  animation:lpGfPulse 7s var(--lp-ease) var(--d,0s) infinite alternate}
.lp-gflare i{position:absolute;inset:-5%;background:center/100% 100% no-repeat}
.lp-gflare .r4{background-image:url(img/lp/gf_ray4.svg);animation:lpSpin 60s linear infinite}
.lp-gflare .r45{background-image:url(img/lp/gf_ray45.svg);animation:lpSpin 45s linear infinite reverse}
.lp-gflare .co{background-image:url(img/lp/gf_core.svg)}
.lp-gflare .rg{background-image:url(img/lp/gf_ring.svg);animation:lpRing 7s var(--lp-ease) infinite alternate}
.lp-gflare .rg2{background-image:url(img/lp/gf_ring2.svg);animation:lpSpin 80s linear infinite}
@keyframes lpGfPulse{from{transform:scale(.88);opacity:.8}to{transform:scale(1.06);opacity:1}}
@keyframes lpRing{from{transform:scale(.85);opacity:.4}to{transform:scale(1.15);opacity:1}}

/* ゆっくり横切る光の帯（ぼかしフィルターを使わずグラデーションで表現） */
.lp-sweep{position:absolute;inset:0;overflow:hidden;mix-blend-mode:soft-light}
.lp-sweep::before{content:"";position:absolute;top:-30%;left:0;width:35%;height:160%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18) 30%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.18) 70%,transparent);
  transform:translateX(-114%) rotate(18deg);animation:lpSweep 40s var(--lp-ease) infinite}
@keyframes lpSweep{0%{transform:translateX(-114%) rotate(18deg)}60%,100%{transform:translateX(343%) rotate(18deg)}}

/* 海面の揺らぎ：縞模様を「動かす」だけ（描き直さない） */
.lp-shimmer{position:absolute;left:320px;top:630px;width:1460px;height:470px;overflow:hidden;mix-blend-mode:soft-light;opacity:.7;
  -webkit-mask:radial-gradient(ellipse 50% 60% at 50% 40%,#000 30%,transparent 75%);mask:radial-gradient(ellipse 50% 60% at 50% 40%,#000 30%,transparent 75%)}
.lp-shimmer i{position:absolute;left:0;right:0;top:-82px;bottom:0}
.lp-shimmer .a{background:repeating-linear-gradient(180deg,rgba(255,255,255,0) 0 9px,rgba(255,255,255,.55) 11px,rgba(255,255,255,0) 14px 23px);
  animation:lpShA 14s linear infinite}
.lp-shimmer .b{left:-30px;right:-30px;background:repeating-linear-gradient(176deg,rgba(255,255,255,0) 0 17px,rgba(255,255,255,.4) 19px,rgba(255,255,255,0) 22px 41px);
  animation:lpShB 14s linear infinite}
@keyframes lpShA{from{transform:translateY(0)}to{transform:translateY(46px)}}
@keyframes lpShB{from{transform:translateY(0)}to{transform:translateY(82px)}}

/* 背景のきらめき（光のにじみは画像に焼き込み済み） */
.lp-bg-glints img{position:absolute;opacity:0;mix-blend-mode:screen;transform:translate(-50%,-50%) scale(0);
  animation:lpTwinkleC var(--t,7s) var(--lp-ease) var(--d,0s) infinite}
.lp-canvas{position:absolute;left:20px;top:20px;width:1920px;height:1087px;mix-blend-mode:screen}

/* ---------- メニュー（PC） ---------- */
.menu{border-radius:0 0 8px 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 8px 24px rgba(0,30,90,.18)}
.menu .navi a{background:none}
.menu .nav-txt{overflow:hidden;padding:7px 10px 6px 27px;border-radius:6px;
  font-family:"M PLUS Rounded 1c",Meiryo,"メイリオ",sans-serif;font-weight:800;font-size:15px;line-height:1.1;letter-spacing:.01em;color:#1b2a6b;
  text-shadow:0 1px 0 #fff;
  background:linear-gradient(180deg,#fff 0%,#fff 46%,#edf3fb 54%,#dde8f6 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.7),0 2px 0 #b3c4dd,0 3px 6px rgba(0,30,80,.25);
  transition:transform .5s var(--lp-ease),box-shadow .5s var(--lp-ease),color .5s var(--lp-ease)}
.menu .nav-txt::before{inset:auto;left:8px;top:50%;width:13px;height:13px;margin:-6.5px 0 0;border:0;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M5 3.6 L9 6.5 L5 9.4Z' fill='%23fff'/%3E%3C/svg%3E") center/100% no-repeat,
             radial-gradient(circle at 35% 30%,#ff9cc4 0%,#f0397f 45%,#c80d58 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),0 1px 0 #8d0a3f,0 1px 3px rgba(120,0,50,.4);
  transition:transform .5s var(--lp-ease)}
/* ツヤの光：left ではなく transform で流す */
.menu .nav-txt::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:35%;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95),rgba(255,255,255,0));
  transform:translateX(-130%) skewX(-20deg);
  animation:lpNavSheen 16s var(--lp-ease) calc(9s + var(--i,0) * .14s) infinite}
@keyframes lpNavSheen{0%{transform:translateX(-130%) skewX(-20deg)}10%,100%{transform:translateX(375%) skewX(-20deg)}}
.menu .navi a:hover .nav-txt{transform:translateY(-1px);color:var(--lp-pink);background:linear-gradient(180deg,#fff 0%,#fff 46%,#edf3fb 54%,#dde8f6 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.7),0 3px 0 #b3c4dd,0 6px 10px rgba(0,30,80,.28)}
.menu .navi a:hover .nav-txt::before{transform:translateX(2px) scale(1.08)}
.menu .navi a:hover .nav-txt::after{animation:lpNavSheenHover .9s var(--lp-ease)}
@keyframes lpNavSheenHover{from{transform:translateX(-130%) skewX(-20deg)}to{transform:translateX(375%) skewX(-20deg)}}
.menu .navi a:active .nav-txt{transform:translateY(1px);box-shadow:inset 0 1px 0 #fff,0 1px 0 #b3c4dd,0 1px 2px rgba(0,30,80,.25)}
.menu .navi a:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:7px}
/* 現在のページ（HOME） */
.menu .navi#stay{background:none}
.menu .navi#stay .nav-txt{padding-left:12px;color:#fff;text-shadow:0 1px 1px rgba(120,0,40,.55);
  background:linear-gradient(180deg,#ff7ab0 0%,#f2458a 46%,#e3196a 54%,#c80d58 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(255,255,255,.2),0 2px 0 #8d0a3f,0 3px 6px rgba(120,0,50,.35)}
.menu .navi#stay .nav-txt::before{display:none}

/* ---------- メインビジュアル（PC） ---------- */
.con_r{perspective:1600px}
.lp-hero{position:relative;width:100%;aspect-ratio:951/910;line-height:0}
.lp-hero .lyr{position:absolute;left:0;top:0;width:101.2618%;height:101.3187%}  /* 焼き込み画像は影の分だけ右下に12px大きい */
.lp-hero .lyr img{display:block;width:100%;height:100%}
.lp-glow{opacity:.15;animation:lpGlow 7s var(--lp-ease) infinite alternate}
@keyframes lpGlow{to{opacity:.5}}

/* ワイプで現れる（初回のみ） */
.lp-logo,.lp-catch{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:250% 100%;mask-size:250% 100%}
.lp-logo{-webkit-mask-image:linear-gradient(90deg,#000 47%,transparent 53%);mask-image:linear-gradient(90deg,#000 47%,transparent 53%);
  -webkit-mask-position:85% 0;mask-position:85% 0;animation:lpWipeLogo 7s cubic-bezier(.45,.1,.45,1) .4s forwards}
@keyframes lpWipeLogo{to{-webkit-mask-position:36% 0;mask-position:36% 0}}
.lp-catch{-webkit-mask-image:linear-gradient(90deg,#000 48%,transparent 52%);mask-image:linear-gradient(90deg,#000 48%,transparent 52%);
  -webkit-mask-position:73% 0;mask-position:73% 0;animation:lpWipe 11s cubic-bezier(.45,.1,.45,1) 4s forwards}
@keyframes lpWipe{to{-webkit-mask-position:42% 0;mask-position:42% 0}}
/* ワイプ後に一度だけふわっと光る（フィルターではなく、ぼかした複製の不透明度で） */
.lp-catch .flash{position:absolute;inset:0;opacity:0;mix-blend-mode:screen;animation:lpFlash 3s var(--lp-ease) 15s both}
.lp-catch .flash img{-webkit-filter:blur(5px) brightness(2.2);filter:blur(5px) brightness(2.2)}
@keyframes lpFlash{0%,100%{opacity:0}35%{opacity:.9}}

/* 入場 */
.lp-in{opacity:0;animation:lpFadeIn 2s var(--lp-ease) var(--in,0s) forwards}
.lp-rb.lp-in{animation:lpFadeIn 2s var(--lp-ease) var(--in) forwards,lpFloat 9s var(--lp-ease) 2.4s infinite alternate}
@keyframes lpFadeIn{to{opacity:1}}
@keyframes lpFloat{from{transform:translateY(2px)}to{transform:translateY(-5px)}}

/* 文字の上を流れる光：文字の形の画像でマスクし、帯は transform で動かす */
.lp-shine{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.lp-shine i{position:absolute;left:0;top:-33%;width:33.2%;height:166%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.15) 42%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.15) 58%,rgba(255,255,255,0));
  transform:rotate(18deg) translateX(-219%);animation:lpBand 32s var(--lp-ease) 8s infinite}
@keyframes lpBand{0%{transform:rotate(18deg) translateX(-219%)}60%,100%{transform:rotate(18deg) translateX(469%)}}
.lp-logo .lp-shine{-webkit-mask-image:url(img/lp/mask_logo.png);mask-image:url(img/lp/mask_logo.png)}
.lp-data .lp-shine{-webkit-mask-image:url(img/lp/mask_data.png);mask-image:url(img/lp/mask_data.png)}
.lp-rb .lp-shine{-webkit-mask-image:url(img/lp/mask_rb.png);mask-image:url(img/lp/mask_rb.png)}
.lp-catch .lp-shine{-webkit-mask-image:url(img/lp/top01_catch.png);mask-image:url(img/lp/top01_catch.png)}
.lp-catch .lp-shine i{width:27%;transform:rotate(18deg) translateX(-192%);animation:lpBandC 26s var(--lp-ease) 14.8s infinite}
@keyframes lpBandC{0%{transform:rotate(18deg) translateX(-192%)}16%,100%{transform:rotate(18deg) translateX(500%)}}

/* きらめき（光のにじみ込みの画像を拡大縮小するだけ） */
.lp-glint{position:absolute;width:9.6%;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(0);
  animation:lpTwinkleC 6s var(--lp-ease) var(--d,0s) infinite}
.lp-glint.s{width:6%;animation-duration:8s}
@keyframes lpTwinkleC{0%,100%{transform:translate(-50%,-50%) scale(0) rotate(0deg);opacity:0}18%{opacity:1}
  35%{transform:translate(-50%,-50%) scale(1) rotate(45deg);opacity:1}60%{transform:translate(-50%,-50%) scale(0) rotate(90deg);opacity:0}}

/* 「未来へのステップ」の矢印の先で光がはじける */
.lp-burst{position:absolute;left:52.6%;top:32.3%;width:15%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;--t0:15.1s;--t1:20.1s}
.lp-burst>*{position:absolute;left:50%;top:50%;margin:0;opacity:0}
.lp-burst img{display:block;width:100%;height:100%}
.lp-burst .glow{width:70%;aspect-ratio:1;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.8) 12%,rgba(255,170,215,.35) 35%,transparent 70%);
  animation:lpBGlow 2.4s var(--lp-ease) var(--t0) both,lpBGlowIdle 10s var(--lp-ease) var(--t1) infinite}
.lp-burst .kira{width:160%;aspect-ratio:1;animation:lpKira 2.6s cubic-bezier(.2,.9,.3,1) var(--t0) both,lpKiraIdle 10s var(--lp-ease) var(--t1) infinite}
.lp-burst .kira2{width:99%;aspect-ratio:1;--r:45deg;animation:lpKira 2.2s cubic-bezier(.2,.9,.3,1) calc(var(--t0) + .12s) both,lpKiraIdle 10s var(--lp-ease) calc(var(--t1) + .1s) infinite}
.lp-burst .ring{width:40%;aspect-ratio:1;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 8px #fff,0 0 16px rgba(255,140,200,.8);
  animation:lpRingB 1.6s cubic-bezier(.1,.7,.3,1) calc(var(--t0) + .05s) both}
.lp-burst .line{width:700%;height:1.5px;
  background:linear-gradient(90deg,transparent,rgba(255,170,215,.8) 35%,#fff 50%,rgba(150,215,255,.8) 65%,transparent);
  box-shadow:0 0 6px 1px rgba(255,190,225,.55);
  animation:lpLine 2s var(--lp-ease) var(--t0) both,lpLineIdle 10s var(--lp-ease) var(--t1) infinite}
.lp-burst .sat{left:var(--x);top:var(--y);width:calc(var(--w,26%) * 1.6);aspect-ratio:1;
  animation:lpSat 1.1s cubic-bezier(.2,.9,.3,1) calc(var(--t0) + var(--dl)) both,lpSatIdle 10s var(--lp-ease) calc(var(--t1) + var(--dl)) infinite}
/* 中心合わせは transform に含める（translate プロパティを使わないので古いSafariでもずれない） */
@keyframes lpBGlow{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(.8)}}
@keyframes lpBGlowIdle{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.3)}12%{opacity:.8;transform:translate(-50%,-50%) scale(.8)}30%{opacity:0;transform:translate(-50%,-50%) scale(.6)}}
@keyframes lpKira{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(0) rotate(-45deg)}14%{opacity:1;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(1.7) rotate(0deg)}
  40%{opacity:1;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(1) rotate(8deg)}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(.2) rotate(20deg)}}
@keyframes lpKiraIdle{0%,100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(0) rotate(-20deg)}8%{opacity:1;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(1.15) rotate(0deg)}
  22%{opacity:0;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(.1) rotate(15deg)}}
@keyframes lpRingB{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}10%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(4.5)}}
@keyframes lpLine{0%{opacity:0;transform:translate(-50%,-50%) scaleX(0)}12%{opacity:1;transform:translate(-50%,-50%) scaleX(1)}100%{opacity:0;transform:translate(-50%,-50%) scaleX(.2)}}
@keyframes lpLineIdle{0%,100%{opacity:0;transform:translate(-50%,-50%) scaleX(0)}8%{opacity:.8;transform:translate(-50%,-50%) scaleX(.6)}22%{opacity:0;transform:translate(-50%,-50%) scaleX(.1)}}
@keyframes lpSat{0%{opacity:0;transform:translate(-50%,-50%) scale(0) rotate(-30deg)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.2) rotate(0deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(0) rotate(30deg)}}
@keyframes lpSatIdle{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(0)}6%{opacity:1;transform:translate(-50%,-50%) scale(1)}14%{opacity:0;transform:translate(-50%,-50%) scale(0)}}

/* ---------- 動画枠 ---------- */
.v-waku{background:linear-gradient(180deg,#bd3436,#ad2729 60%,#981f21)}

/* ---------- スマホ（screen.css と同じ 699px で切り替え） ---------- */
.lp-sm{position:relative;overflow:hidden}
.lp-sm picture,.lp-sm img{display:block;width:100%;height:auto}
.lp-sm .lp-band{position:absolute;inset:0;mix-blend-mode:soft-light;pointer-events:none}
.lp-sm .lp-band i{position:absolute;left:0;top:-40%;width:41%;height:188%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.15) 42%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.15) 58%,rgba(255,255,255,0));
  transform:rotate(18deg) translateX(-290%);animation:lpBandSm 32s var(--lp-ease) 3s infinite}
@keyframes lpBandSm{0%{transform:rotate(18deg) translateX(-290%)}60%,100%{transform:rotate(18deg) translateX(400%)}}

@media only screen and (max-width:699px){
  .lp-bg{display:none}
  #wrap.top{overflow-x:visible}
}

/* ---------- 動きを減らす設定の方には静止画で ---------- */
@media (prefers-reduced-motion:reduce){
  .lp-bg *,.lp-hero *,.lp-sm *,.menu .nav-txt,.menu .nav-txt::before,.menu .nav-txt::after{animation:none!important;transition:none!important}
  .lp-logo,.lp-catch{-webkit-mask:none!important;mask:none!important}
  .lp-in{opacity:1}
  .lp-glow{opacity:.3}
  .lp-canvas,.lp-bg-glints,.lp-shine,.lp-glint,.lp-burst,.lp-catch .flash,.lp-sm .lp-band,.menu .nav-txt::after{display:none}
}