@charset 'UTF-8';

#illusionalanimals_bg { background-color: #08102c ; background-color: #000000 ;  position: relative ; height: 90vh ; z-index: 0 ;}
#illusionalanimals { background-color: #000000 ;
background-image: url(https://www.gyokusendo.co.jp/okinawaworld/wp-content/uploads/2024/02/tp_bk4-1024x424.png) ;
background-image: url(https://www.gyokusendo.co.jp/okinawaworld/wp-content/uploads/2024/04/nanikore_main.png) ;
background-size: cover;
background-position: center ;
background-position: top ;
width: 100% ;
width: 90% ;
height:100%;
opacity: 0;
z-index: 5 ;
position: absolute ;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
  animation-name: animation_illusion;
  animation-delay: 5000ms;
  animation-duration: 4000ms;
  animation-iteration-count:1;
  animation-fill-mode:forwards;
  text-align: center;
}

#divflex { display: flex; flex-direction: column; height: 100%; }

#illsnlanmls-bgimg {}

#illsnlanmls-catchcopy {
  margin: 0 auto ;
  text-align: center;
opacity: 0;
z-index: 10;
height: 44% ;
padding: 2% 0 0 0 ;
  animation-name: animation_illusion;
  animation-duration: 2000ms;
  animation-delay: 1500ms;
  animation-iteration-count:1;
  animation-fill-mode:forwards;
}

#illsnlanmls-logo {
  margin: 0 auto ;
  text-align: center;
opacity: 0;
z-index: 20;
height: 46% ;
  animation-name: animation_illusion1;
  animation-duration: 1500ms;
  animation-delay: 3000ms;
  animation-iteration-count:1;
  animation-fill-mode:forwards;
transform-origin: center bottom;
}

#illsnlanmls-nanto_logo {
margin: 0 auto ;
opacity: 0;
z-index: 30;
height: 7% ;
  animation-name: animation_illusion;
  animation-duration: 1500ms;
  animation-delay: 8000ms;
  animation-iteration-count:1;
  animation-fill-mode:forwards;
}

@keyframes animation_illusion {
  0%{
  }
  30%{
opacity: 0.5;
  }
  100%{
opacity: 1;
  }
}
@keyframes animation_illusion1 {
    10% {
opacity: 0.3;
        /* 上から落ちてくる
        transform: translateY(0); */
    }
    15% {
opacity: 0.4;
        /* 落ちてきた衝撃で縦に少しつぶれる */
        transform: scale(1.7, 1.7);
    }
    20% {
opacity: 0.5;
        /* 落ちてきた衝撃で縦にさらに少しつぶれる */
        transform: scale(1.1, 0.8);
    }
    30% {
opacity: 0.6;
        /* 縦につぶれながらもつぶれた反動で少し横に伸びる */
        transform: scale(1.15, 0.7);
    }
    45% {
opacity: 1;
        /* 縦につぶれた反動で横に伸びる */
        transform: scale(1.2, 0.5);
    }
    50% {
opacity: 1;
        /* つぶれた反動で一気に縦に伸びる */
        transform: scale(0.85, 1.15);
    }
    60% {
opacity: 1;
        /* 伸びた反動で縦につぶれる */
        transform: scale(1.1, 0.9);
    }
    70% {
opacity: 1;
        /* つぶれた反動で縦に少し伸びる */
        transform: scale(0.95, 1.08);
    }
    90% {
opacity: 1;
        /* 伸びた反動でほんの少し縦につぶれる */
        transform: scale(0.98, 1.02);
    }
    100% {
opacity: 1;
        /* 通常のサイズになる */
        transform: scale(1, 1);
    }
}

#illsnlanmls-catchcopy img, #illsnlanmls-logo img, #illsnlanmls-nanto_logo img { width: auto ; height: 100% ; }


/*LP2 start*/
.p_ills_catchcopy_b { text-shadow: 2px 2px 10px #4d9bc1, -2px 2px 10px #4d9bc1, 2px -2px 10px #4d9bc1, -2px -2px 10px #4d9bc1;
font-size: 8.5vw ;color: #ffffff; margin: 0 auto ; padding: 0 0; line-height: 11vw !important;}

.multiple-list  {position: relative; overflow:hidden; }
.multiple-list2  {position: relative; }

.text_vertical { -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; 
writing-mode: vertical-rl;
-webkit-text-orientation: upright; -moz-text-orientation: upright; /* 未実装 */ -ms-text-orientation: upright; text-orientation: upright;
}

.h4_catchcopy { width: 35%; margin: 6% auto 1% !important; padding: 1% 0;  color: #B00071 ; font-weight: bold ;
border-top: #B00071 double; border-bottom: #B00071 double;}

.h4_explanation { position: absolute; z-index: 3; color: #ffffff; font-size: 3.7vw !important; }

.p_name {
position: absolute; bottom: 10%; left: 50%;
z-index: 5;
color: #ffffff ; font-size: 2.1vw ;
margin: 0 !important;
}

.multiple-list { margin: 5% 0 ; }
.multiple-item-top { margin: 0 !important ; }
.h4_explanation-top { /*position: absolute; */z-index: 3; color: #ffffff; font-size: 1.7vw !important; margin: 0; }

.p_name-top {
/*position: absolute; bottom: 10%; left: 50%;*/
z-index: 5;
color: #ffffff ; font-size: 1.6vw ;
margin: 0 !important;
}

#div_emera > h4 { right: 8% ; top: 0% ;}
/*#div_emera p.multiple-item  { width: 80% ;}*/
#div_putiro > h4 { top: unset ; right: 9% ; bottom: 18% ;}
#div_dexipuro > h4 { top: 2%; right: 17%; }
#div_sinemisu > h4 { top: unset ; right: unset; left: 8% ; bottom: 16% ;}

#div_obitaiger > h4 { top: 27% ; right: 11% ;}
#div_obitaiger > .p_name { left: 26% ;}
#div_uesubato > h4 { top: unset ; right: unset; left: -30% ; bottom: -14% ;}
#div_uesubato > .p_name { left: unset ; right: 0; bottom: 0 ;}
#div_yamane > h4 { top: 17% ; right: -45% ;}
#div_yamane > .p_name { left: unset ; right: 0; bottom: -6% ;}
#div_teguu > h4 { top: unset ; bottom: 0% ; right: 10% ; }
#div_teguu > .p_name { left: 30% ;}

#div_emera { width:  20% ;}
#div_putiro { width:  16% ;}
#div_obitaiger { width:  24% ;}
#div_yamane { width:  24% ;}

#clickhere { text-align: right ; padding: 3% ; background-color: #ffff00 ; color: #000000 ; width: 25% ; margin: 0 0 5% 65% ; }
#clickhere a:hover { color : #ff0000 ; }

#div_revive { display: flex ; margin: 3% auto 0 ; padding: 0 0 0 ; width: 95% ; }
#div_firstlanding { width: 15% ; }
#p_firstlanding {z-index: 5 ; position: absolute ; top: 23% ; left: 28% ; font-size: 2vw ; line-height: 1.4em ;}
#div_firstlanding_txts {background-color: #08102c; margin-top: 0; width: 85% ; }

.eventflyer { display: flex ; margin: 5% auto 0 ; padding: 0 0 5% ; width: 70% ; gap: 5% 11% ; }
#eventflyer2 { display: flex ; margin: 5% auto 0 ; padding: 0 0 5% ; width: 95% ; gap: 5% 5% ; flex-wrap: wrap ; }

#leadtxt { color: #ffffff ; font-size: 2.4vw ; font-size: 24px ; line-height: 4.7vh ; line-height: 1.6em ; margin: 4% auto ; padding: 2% ; width: 75% ; }
#lastnotice {  width: 67% ; margin:5% auto 0 ; padding: 0 0 3% ; color: #ffffff ; text-align: left ;  }

.gwonly_solo { border-radius: 20px; margin: 2% 10% 2% 2% ; padding: 1% 4% ; background-color: #ffff00 ; color: #ff0000 ; font-size: 1.5em ; text-align: center ; vertical-align: middle ; width: 50% ; height: 2.5em ; line-height: 2.5em ; }


/**/
/* レイアウトや見た目のスタイル */
/* ---------------------------- */

.single-item + .single-item{
    margin-top: 80px;
}

/* アニメーションスタイル */
/* ---------------------------- */

/* アニメーション前 */
.u-fade-type-up{
    transform: translateY(50px);
    opacity: 0;
}

/* トリガー発火でis-activeを付与 */
.is-active .u-fade-type-up{
    transition: .6s;
    transform: translateY(0);
    opacity: 1;
}

.is-active .u-fade-type-up:nth-child(2){transition-delay: .4s;}
.is-active .u-fade-type-up:nth-child(3){transition-delay: .8s;}
.is-active .u-fade-type-up:nth-child(4){transition-delay: 1.2s;}
.is-active .u-fade-type-up:nth-child(5){transition-delay: 1.6s;}
.is-active .u-fade-type-up:nth-child(6){transition-delay: 2s;}


/* background color gradation */
.bg_gradation { margin: 0 auto ; width: 88% ;
background: linear-gradient(to bottom, #a6d900 0%, #ff4454 100%);
  opacity: 1;
  animation: huerotator 3s infinite alternate; }

.bg_gradation2 { margin: 0 auto ; width: 88% ;
background: linear-gradient(to bottom, #a6d900 0%, #ffff00 100%);
  opacity: 0.5 ;
  animation: huerotator 3s infinite alternate; }

@keyframes huerotator {
  0% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }

  100% {
    -webkit-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}



/* フェードイン */
/* .anim-box.fadein.is-animated {
.anim-box.fadein.is-active {*/
.is-active .fadein {
  animation: fadeIn 3.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* スライドイン */
/*.anim-box.slidein.is-animated {*/
.is-active .slidein {
/*  animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;*/
animation: slideIn 4s cubic-bezier(.11,.88,.69,.89) forwards 1;
}
@keyframes slideIn {
  0% {
    transform: translateX(180px);
/*    transform: translateX(0);*/
    opacity: 0;
  }
  100% {
    transform: translateX(0);
/*    transform: translateX(100px);*/
  }
  50%,100% {
    opacity: 1;
  }
}


/* スライドイン from right to left */
.is-active .slidein_frm_right {
/*  animation: slideIn_frm_right 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;*/
animation: slideIn_frm_right 4s cubic-bezier(.11,.88,.69,.89) forwards 1;
}
@keyframes slideIn_frm_right {
  0% {
    transform: translateX(-180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}


/* ズームイン */
.anim-box.zoomin.is-animated {
  animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ぽよよん */
.anim-box.poyoyon.is-animated {
  animation: poyoyon 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}
@keyframes poyoyon {
  0% {
    transform: translateX(140px);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(30px);
  }
  100% {
    transform: translateX(0);
  }
  20%,100% {
    opacity: 1;
  }
}

/**/


.animation_mv_rght {animation: moveRight 1.3s cubic-bezier(.22,1,.36,1) forwards 1s;}
.animation_mv_lft {animation: moveLeft 1.3s cubic-bezier(.22,1,.36,1) forwards 1s;}
/*LP2 end*/
#linktoline { background-color: #ffff00 ; width: 40% ; margin: 2%  auto ; padding: 2% ; font-size: 1.4em ; }

.gw-limited { width: 50% ;  margin: 1% auto !important ; line-height: 1.5 !important ; text-align: center ; font-size: 2.7vw ; color: #ffff00 ;}
.colored-bg {background-color: #752461 ; }
.p-expl { line-height: 1.5em !important ; text-align: center ; color: #ffffff ; }


@media screen and (max-width:750px) {
.lp_content .layer_image img { width: 60% !important; padding-bottom: 7% ; }
#illusionalanimals_bg { height: 90vh ; }
#leadtxt {  font-size: 16px ; line-height: 1.6em ; margin: 4% auto ; padding: 2% ; width: 85% ; text-align: left ; }
#lastnotice {  width: 95% ; font-size: 80% ;  }
#linktoline { width: 80% ; font-size: 1.0em ; }

#div_emera { width:  45% ;}
#div_putiro { width:  45% ;}
#div_obitaiger { width:  45% ;}
#div_yamane { width:  45% ;}

.h4_explanation-top { font-size: 2.7vw !important; }
.p_name-top { font-size: 2.6vw ; }

	#clickhere { text-align: center ; width: 50% ; margin: 2% auto ; }
	
#illusionalanimals { width: 100% ; }
.gwonly { width: 100% ; }
.gw-limited { width: 95% ; font-size: 4.0vw ;}
}