@charset "utf-8";



.top-i-wrapper {
  width: 100%;
  display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.top-i-leftContents {
    height: 100%;
    width: calc( (100% - 400px) / 2 );
    position: fixed;
}

.top-i-rightContents {
    height: 100%;
    width: calc( (100% - 400px) / 2 );
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    position: fixed;    
    right: 0;
}



.top-i-leftContents .top-i-logoArea {
  position: absolute;
  width: 307px;
  top: 50%;      
  right: -15px;  
  transform: translateY(-50%); 
}

.top-i-leftContents .top-i-logoArea .top-i-logo {
	width: 204px;
	margin: 0 0 20px 62px;
}

.top-i-leftContents .top-i-copyright {
  position: absolute;
    font-size: 75%;
    line-height: 1;
    text-align: center;
    color: #bab0ff;
  bottom: 15px;       
  left: 20px;   
}

.top-i-rightContents .top-i-btnArea {
    position: absolute;
    width: min(calc( 360 / 1600 * 100vw), 360px);
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}






.top-i-rightContents .top-i-textNavArea{
  --nav-bg: #FFF;
  --nav-hit: min(calc(200 / 1600 * 100vw), 200px);
  position: absolute;
  width: min(calc(230 / 1600 * 100vw), 230px);
  top: 50%;
  left: 200px;
  transform: translate(-50%, -50%);
}

.top-i-rightContents .top-i-textNavArea li{
  position: relative;
  list-style: none;
  margin: 0 0 38px;
  padding-left: 2.1em;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}

.top-i-rightContents .top-i-textNavArea li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1em;
  height: 1.1em;
  background: url("/top/img/neon/heart_outline.svg") no-repeat center / contain;
  transition: background-image .25s ease;
}

.top-i-rightContents .top-i-textNavArea li:hover::before,
.top-i-rightContents .top-i-textNavArea li.top-i-is-active::before{
  background-image: url("/top/img/neon/heart_filled.svg");
}

.top-i-rightContents .top-i-textNavArea li a{
  position: relative;
  display: block;
  width: var(--nav-hit);
  color: #0c176b;
  text-decoration: none;
  transition: color .25s ease;
}
.top-i-rightContents .top-i-textNavArea li:hover a,
.top-i-rightContents .top-i-textNavArea li.top-i-is-active a{
  color: #0c176b;
}

.top-i-rightContents .top-i-textNavArea li a::after{
  content: "";
  position: absolute;
  left: -2.1em;
  bottom: -10px;
  width: calc(var(--nav-hit) + 2.1em);
  border-bottom: 1px solid #7b61f8;
  pointer-events: none;
  z-index: 1;
}

.top-i-rightContents .top-i-textNavArea li a::after{
  content: "";
  position: absolute;
  left: -2.1em;          
  right: 0;
  bottom: -10px;
  height: 3px;


  background-repeat: repeat-x;
  background-position: left center;

  -webkit-mask-image: linear-gradient(to right, #000 0, #000 100%);
  -webkit-mask-size: 0% 100%;   /* ← 幅0%：見えていない */
  -webkit-mask-repeat: no-repeat;

  mask-image: linear-gradient(to right, #000 0, #000 100%);
  mask-size: 0% 100%;
  mask-repeat: no-repeat;

  transition:
    -webkit-mask-size .45s cubic-bezier(.22,.61,.36,1),
    mask-size .45s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
  z-index: 1;
}

.top-i-rightContents .top-i-textNavArea li:hover a::after,
.top-i-rightContents .top-i-textNavArea li.top-i-is-active a::after,
.top-i-rightContents .top-i-textNavArea li a:focus-visible::after{
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}



@media (prefers-reduced-motion: reduce){
.top-i-rightContents .top-i-textNavArea li a::before{ transition: none; transform: translateX(102%); }
}




.top-i-rightContents .top-i-socialIcon {
    position: absolute;
    width: 380px;
    bottom: 48px;
    right: 10px;
}


.top-i-rightContents .top-i-socialIcon .top-i-btn1 { position: absolute; width: 92px;    top: 11px; left: 0px;}
.top-i-rightContents .top-i-socialIcon .top-i-btn2 { position: absolute; width: 22.5px;  top: 5.7px; left: 128px;}
.top-i-rightContents .top-i-socialIcon .top-i-btn3 { position: absolute; width: 20.7px;  top: 6.4px; left: 164.5px;}
.top-i-rightContents .top-i-socialIcon .top-i-btn4 { position: absolute; width: 22.5px;  top: 5.6px; left: 199px;}
.top-i-rightContents .top-i-socialIcon .top-i-btn5 { position: absolute; width: 133.3px; top: 0px; left: 245.7px;}












.top-i-mainContents{
    z-index: 2;
    position: relative;
    width: 400px;
    margin: 0 auto;
}

.top-i-mainContents .top-i-contentArea {
	background: #efecd3;
	width: 370px;
	margin: 20px auto 0 auto;
    box-shadow: 0px 5px 15px 0px rgba(153, 62, 0, 0.16);
	
}

.top-i-mainContents .top-i-contentAreaWra {
	margin: 0;
}

.top-i-mainContents .top-i-overAll {
	margin: 0 -15px 0 -15px;
}

.top-i-mainContents .top-i-overRight {
	margin: 0 -15px 0 0;
}

.top-i-mainContents .top-i-overLeft {
	margin: 0 0 0 -15px;
}
.top-i-mainContents #top-i-content1 {
	min-height: 500px;
}

.top-i-mainContents #top-i-content2 {
	min-height: 500px;
}

.top-i-mainContents #top-i-content3 {
	min-height: 500px;
}

.top-i-mainContents #top-i-content4 {
	min-height: 500px;
}

.top-i-mainContents #top-i-content5 {
	min-height: 500px;
}







@media only screen and (max-width: 1000px)  { 
img { width: 100%;	}
.top-i-wrapper {
  width: 100%;
}


.top-i-leftContents {
    display: none;
}

.top-i-rightContents {
    display: none;
}





.top-i-mainContents{
    z-index: 2;
    position: relative;
     width: calc(400 / 400 * 100vw); 
    margin: 0 auto;
}

.top-i-mainContents .top-i-contentArea {
	background: #ffff00;
	 width: calc(370 / 400 * 100vw); 
	margin: 20px auto 0 auto;
    box-shadow: 0px 5px 15px 0px rgba(153, 62, 0, 0.16);
}

.top-i-mainContents .top-i-contentAreaWra {
	margin: 0;
}

.top-i-mainContents .top-i-overAll {
	margin: 0 calc(-15 / 400 * 100vw) 0 calc(-15 / 400 * 100vw);
}

.top-i-mainContents .top-i-overRight {
	margin: 0 calc(-15 / 400 * 100vw) 0 0;
}

.top-i-mainContents .top-i-overLeft {
	margin: 0 0 0 calc(-15 / 400 * 100vw);
}

.top-i-mainContents #top-i-content1 {
	min-height: 500px;
}

.top-i-mainContents #top-i-content2 {
	min-height: 500px;
}

.top-i-mainContents #top-i-content3 {
	min-height: 500px;
}

.top-i-mainContents #top-i-content4 {
	min-height: 500px;
}

.top-i-mainContents #top-i-content5 {
	min-height: 500px;
}



}










p {
    font-size: 0;
    line-height: 0;
}

ul.top-i-test {
    margin: 30px 0 0px 0;

}


ul.top-i-test li {
    margin: 0 0 20px 0;
    list-style-type: circle;
    list-style-position: inside;
    font-size: 12px;
}

div.top-i-sp p img {
    width: 100%;
}


div.top-i-sp p {   
    font-size: 0;
    line-height: 0;
}





header h1 {
    margin: calc( 500 / 375 * 55px) auto;
    width: calc( 500 / 375 * 270px);
}


@media only screen and (max-width: 1000px)  { 

header h1 {
    margin: 14.67vw auto;
    width: 73.87vw;
}





}

@media screen and (min-width: 600px) { 
.splide__track {
  height:auto;
}
}


















@keyframes slideInPoing {
  0%   { opacity: 0; transform: translate3d(120%, 0, 0); }  
  70%  { opacity: 1; transform: translate3d(-3px, 0, 0); } 
  100% { opacity: 1; transform: translate3d(0, 0, 0); }     
}


@media (max-width: 767.98px){

  .top-i-sp-ui{
    position: fixed;
    inset: 0; pointer-events: none;
    z-index: 999; 
  }
.top-i-sp-ui__hamburger,
.top-i-sp-ui__login{
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  border: 0; padding: 0;
  opacity: 0;
  transform: translate3d(120%, 0, 0); 
  pointer-events: auto;
  will-change: transform, opacity;
}

.top-i-sp-ui__hamburger{ right: 0; top: 16px;  width: 35px;  height: 66px;  background-image: url('/top/img/neon/sp_btn_side1.svg'); }
.top-i-sp-ui__login   { right: 0; top: 86px;  width: 35px;  height: 133px; background-image: url('/top/img/neon/sp_btn_side2.svg'); }

body.top-i-is-ready .top-i-sp-ui__hamburger{
  animation: slideInPoing .65s cubic-bezier(.22,.61,.36,1) .05s both;
}
body.top-i-is-ready .top-i-sp-ui__login{
  animation: slideInPoing .70s cubic-bezier(.22,.61,.36,1) .12s both;
}

.top-i-sp-ui__register {
  position: absolute;
  left: 50%;
  bottom: 20px;
  width: 84vw; height: 56px;
  background: center / contain no-repeat url('/top/img/neon/sp_btn_foot.svg');
  border: 0; padding: 0;
  opacity: 0;
  transform: translate(-50%, 30px);
  transition: opacity .6s ease, transform .6s ease;
  pointer-events: auto;
}
body.top-i-is-ready .top-i-sp-ui__register {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: .25s;
}  
  #top-i-spDrawer{
    position: fixed; top: 0; right: 0; height: 100vh; width: 84vw;
    background: rgba(250, 250, 250, .96);
    color: #fff; overflow: auto;
    transform: translateX(100%); transition: transform .35s ease;
    z-index: 1000; padding: 20px 16px 40px;
  }
  #top-i-spDrawer.top-i-open{ transform: translateX(0); }

  #top-i-spDrawer::before{
    content:""; position: fixed; inset: 0; right: 84vw;  
    background: rgba(0,0,0,.25); opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  #top-i-spDrawer.top-i-open::before{ opacity: 1; pointer-events: auto; }

#top-i-spDrawer .top-i-textNavArea{
  --nav-bg: rgba(20,24,22,.96); 
  --nav-hit: calc(100% - 2.1em); 
          margin: 20px 0 0 30px;
}

#top-i-spDrawer .top-i-textNavArea li{
  position: relative;
  list-style: none;
  margin: 0 0 20px;
  padding-left: 2.1em;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}

#top-i-spDrawer .top-i-textNavArea li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1em;
  height: 1.1em;
  background: url("/top/img/neon/heart_filled.svg") no-repeat center / contain;
}

#top-i-spDrawer .top-i-textNavArea li a{
  position: relative;
  display: block;
  width: var(--nav-hit);
  color: #0c176b;
  text-decoration: none;
  padding: 10px 0;              
}

#top-i-spDrawer .top-i-textNavArea li a::after{
  content: "";
  position: absolute;
  left: -2.1em;
  bottom: -10px;
  width: calc(var(--nav-hit) + 2.1em);
  border-bottom: 1px solid #0c176b;
  pointer-events: none;
  z-index: 1;
}

#top-i-spDrawer .top-i-textNavArea li a::before{
  content: none;                 
}


#top-i-spDrawer .top-i-textNavArea li:hover a{ color: #fff; }
#top-i-spDrawer .top-i-textNavArea li:hover::before{ background-image: url("/top/img/neon/heart_outline.svg"); }


#top-i-spDrawer .top-i-textNavArea li a:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 3px;
}





@media (prefers-reduced-motion: reduce){
    .top-i-sp-ui__hamburger,.top-i-sp-ui__login,.top-i-sp-ui__register{ transition: none; opacity: 1; transform: none; }
    #top-i-spDrawer{ transition: none; }
  }
}


  #top-i-spOverlay{
  display: none;
}
@media (max-width: 767.98px){

#top-i-spOverlay{
  display: inherit;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.25);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
    z-index: 999; 
  }
  #top-i-spOverlay.top-i-open{ opacity: 1; pointer-events: auto; }

  #top-i-spDrawer{ z-index: 1000; } 
}



.top-i-videoPortal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 10000;
  pointer-events: none; 
}

.top-i-videoPortal.is-open {
  display: block;
}

.top-i-videoPortal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  pointer-events: none; /* ★クリック無効 */
}

.top-i-videoPortal__body {
  position: absolute;
  background: #000;
  border-radius: 24px;
  overflow: hidden;
  pointer-events: auto; 
}

.top-i-videoPortal__frame {
  width: 100%;
  height: 100%;
  background: #000;
}

.top-i-videoPortal__frame iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.top-i-videoPortal__close {
  display: none;
}

.top-i-modal__close {
  position: relative;
  z-index: 11000;
}

.top-i-modal__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.top-i-modal__video iframe,
.top-i-modal__video .top-i-youtube {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.top-i-youtube__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  padding: 12px 18px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #FFF;
}

.top-i-modal__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 24px; 
  overflow: hidden;
}

.top-i-mp4,
.top-i-mp4 video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.top-i-mp4 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-i-mp4__play {
  padding: 12px 18px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #FFF;
}

.top-i-spFotText1 {
	font-size: 75%!important;
    line-height: 1!important;
    text-align: center!important;
	margin-bottom: 20px;
}



@media (max-width: 1000px){

.top-i-spFotText1 {
	font-size: 100%!important;
    line-height: 1!important;
    text-align: center!important;
	margin-bottom: 20px;
}



.top-i-spFotText2 {
	font-size: 75%!important;
    line-height: 1!important;
    text-align: center!important;
	margin-bottom: 120px;
}


}