@charset "utf-8";
/* CSS Document */
body{
	background-color: #000;
	font-family: 'Cormorant Garamond', serif;
}
a{text-decoration: none; color: #fff;}
.inner{
	position: relative;
	z-index: 1;
	width: 1020px;
	margin: 0 auto;
}
.inner_wide{
	position: relative;
	z-index: 1;
	width: 92vw;
	margin: 0 auto;
}
/*== COMMON SETTING */
.btn{
    position: relative;
  overflow: hidden;
  text-decoration: none;
  display: block;
    border: 2px solid #0dc4de;
	border-image: linear-gradient(to right, #7a83cc 0%, #0dc4de 100%);
    border-image-slice: 1;
    padding: 15px 50px;
    max-width: 368px;
    text-align: center;
    outline: none;
    font-size: 20px;
    transition: ease .2s;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.btn span {
  position: relative;
  z-index: 3;
    background: linear-gradient(to right, #7a83cc 0%, #0dc4de 100%);
    color: #0dc4de;
    font-weight: bold;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn:hover span{
    background:#fff;
    font-weight: bold;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  color:#fff;
}

.bgleft:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: linear-gradient(to right, #7a83cc 0%, #0dc4de 100%);
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}

.bgleft:hover:before{
  transform-origin:left top;
  transform:scale(1, 1);
}
.youtube_link a{
    margin: 0 auto;
}

/********************* side-menu *********************/
#side-menu {
  width: 300px;
  height: 100%;
  background-color:rgba(0, 0, 0, 0.9);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  transform: translateX(300px); 
  transition: all .5s; 
	padding: 20px 16px;
	
}
#side-menu_btn{
	background-color:#2FA5CB;
	border-radius: 10px 0 0 10px;
	width: 54px;
	height: 250px;
	position: absolute;
	left: -54px;
	top:120px;
	cursor: pointer;
	box-shadow: 0px 0px 5px 2px #000000;
}
#side-menu.open {
  transform: translateX(0); 
}
.side-menu-background {
  position: fixed;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 0;
  height: 0;
  z-index: 8888;
  opacity: 0; 
}
.side-menu-background.open {
  height: 100%;
  opacity: 1; 
}
#side-menu h2{
	color: #e8b54d;
	background-image: url("../images/icon_mekarusu.png");
	background-position: left center;
	background-size: 40px;
	background-repeat: no-repeat;
	padding: 0 0 0 40px;
	
}
#side-menu.easeInOut{
	transform: matrix(1, 0, 0, 1, 320, 0);
}

.info_campaign li{
	margin-bottom: 16px;
}


/********************* TOP *********************/
main{
	position: relative;
}
#top_bg_void{
	position: relative;
}
#top_bg_void:before{
	content: "";
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
	background-image: url("../images/bg_sky.jpg");
	background-position: center top;
    -webkit-animation: zoom 20s 0s linear infinite alternate;
    animation: zoom 20s 0s linear infinite alternate;
	z-index: 0;
}
#top{
	position: relative;
	z-index: 5;
	overflow: hidden;
}
.pararaxArea {
  position: relative;
  height: 1400px;
	overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items:flex-start;
}
.pararaxArea .pararaxItem {
  position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    width: 105vw;
}
.pararaxArea .pararaxItem:nth-child(1) {
	-webkit-transition: -webkit-transform 3s ease-out 0.008s;
    transition: -webkit-transform 3s ease-out 0.008s;
    transition: transform 3s ease-out 0.008s;
    transition: transform 3s ease-out 0.008s,
		-webkit-transform 3s ease-out 0.008s;
	background-image: url("../images/bg_tree.png");
	height: 1593px;
	background-position: center -160px;
}
.pararaxArea .pararaxItem:nth-child(2) {
	background-position: center top;
	-webkit-transition: -webkit-transform 1s ease-out 2ms;
    transition: -webkit-transform 1s ease-out 2ms;
    transition: transform 1s ease-out 2ms;
    transition: transform 1s ease-out 2ms,
		-webkit-transform 1s ease-out 2ms;
    background-image: url("../images/bg_chara.png");
	height: 1600px;
}
.pararaxArea .centerObj1 {
  position: absolute;
  z-index: 10;
	top: 110px;
    max-width: 480px;
}
.pararaxArea .centerObj1 ul{display: flex; justify-content: center;}
.pararaxArea .centerObj1 ul li{
    width: 200px;
    margin: 0 0.5rem;
    border-radius: 10px;
    border: 2px solid #9e9e9e;
    background-color: #000;
    overflow: hidden;
}
.pararaxArea .centerObj2 {
  position: absolute;
  z-index: 10;
	width: 892px;
	top: 1000px;
}
.pararaxArea .centerObj3{
    position: absolute;
    width: 100px;
    z-index: 10;
    left: 30px;
    top: 100px;
}
#main{
	padding-top:0;
	width:100%;
	background-color: rgba(0,0,0,0.9);
	background-position: center top;
	position: relative;
	z-index: 6;
}
.m_b_500{
    margin-bottom: 150px;
}
.jizen{
    border-top: 1px solid #10a6bc;
	border-image: linear-gradient(90deg, rgba(15,174,197,1) 0%, rgba(23,93,105,1) 20%, rgba(0,0,0,1) 50%, rgba(23,93,105,1) 80%, rgba(15,174,197,1) 100%);
  border-image-slice: 1;
}
.jizen_touroku{
    color: #fff;
    text-align: center;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.jizen_touroku p{
    margin:2rem 0 1rem;
    letter-spacing: 5px;
}
.jizen_touroku ul{
    display: flex;
    justify-content: center;
}

.jizen_touroku ul li{
    width: 45%;
    max-width: 300px;
    margin: 0 1vw;
    border-radius: 10px;
    border: 2px solid #9e9e9e;
    background-color: #000;
    overflow: hidden;
}
.jizen_touroku li a{
    display: flex;
    flex-direction:row;
    align-items: center;
}
.jizen__tokuten{position: relative;margin-bottom:60px; }
.jizen__title{width:80%; max-width: 840px; margin:-85px auto 0;}
.jizen_btn1{
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
	padding-top: 70px;
	padding-bottom: 70px;
}
.jizen_btn1 li a{
	transition: 1.0s ;
	display: block;
	max-width: 256px;
}
.jizen_btn1 li a:hover{
	opacity: 0.8;
}
.jizen_btn2{
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
	margin-top: -50px;
}
.jizen_btn2 li{
	margin: 0 64px;
    position: relative;
}
.jizen_notce{
    overflow-y: scroll;
    height: 15rem;
    color: #fff;
    border: 1px solid #0cbdd6;
    background-color: rgba(13,196,222,0.6);
    padding: 2rem 3rem;
    font-size: 14px;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    margin-bottom: 70px;
}
.jizen_notce h1{
    border-bottom: 2px dotted #fff;
    margin-bottom: 1rem;
    font-weight: bold;
    
}
.jizen_notce h2{
    font-weight: bold;
    font-size: 14px;
    margin-top: 1rem;
}
.jizen_notce2{
    height: 15rem;
    color: #fff;
    border: 1px solid #0cbdd6;
    background-color: rgba(13,196,222,0.6);
    padding: 2rem 3rem;
    font-size: 14px;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    margin-bottom: 70px;
}
.jizen_notce2 h1{
    border-bottom: 2px dotted #fff;
    margin-bottom: 1rem;
    font-weight: bold;

}
.jizen_notce2 h2{
    font-weight: bold;
    font-size: 14px;
    margin-top: 1rem;
}
.tokuten li{
    margin-bottom:60px ;
    position: relative;
}
.stars p{position: absolute;
}
.stars p:nth-child(1){left:120px; top:0; animation: star-anim 8s 0s infinite;}
.stars p:nth-child(2){left:50px; top:30px; animation: star-anim 6s 1s infinite;}
.stars p:nth-child(3){left:180px; top:120px; animation: star-anim 5s 2s infinite;}
.stars p:nth-child(4){left:80px; top:20%; animation: star-anim 7s 3s infinite;}
.stars p:nth-child(5){left:80%; top:30%; animation: star-anim 7s 4s infinite;}
.stars p:nth-child(6){left:120px; top:200px; animation: star-anim 4s 0s infinite;}
.stars p:nth-child(7){right:10%; top:50%; animation: star-anim 7s 1s infinite;}
.stars p:nth-child(8){right:200px; top:50%; animation: star-anim 8s 2s infinite;}
.stars p:nth-child(9){right:20px; top:85%; animation: star-anim 5s 3s infinite;}

.stars02 p{position: absolute;}
.stars02 p:nth-child(1){right:4%; top:20%; animation: star-anim 7s 1s infinite;}
.stars02 p:nth-child(2){right:20%; top:50%; animation: star-anim 8s 2s infinite;}

.stars03 p{position: absolute;}
.stars03 p:nth-child(1){right:3%; top:10%; animation: star-anim 4s 1s infinite;}
.stars03 p:nth-child(2){right:18%; top:20%; animation: star-anim 7s 3s infinite;}

@keyframes star-anim {
  0% {opacity:0;}
  5% {opacity:1;}
  10% {opacity:0;}
  55% {opacity:0;}
  60% {opacity:1;}
  95% {opacity:0;}
  100% {opacity:1;}
}
.campaign_wap{
    position: relative;
    background-image: url("../images/bg_campaign.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: 99;
}
.campaign_wap_inner{
    max-width: 1020px;
    margin: 0 auto;
    padding: 100px 0 100px;
}
.campaign_wap_inner ul{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 50px; 
    
}
.campaign_wap_inner ul li{
    width: 50%;
    max-width: 500px;
    text-align: center;
    overflow: hidden;
    position: relative;
}
#movie{
	padding-top: 100px;
	padding-bottom: 180px;
	color: #fff;
}
/******* swiper ******/
.swiper-slide {
  cursor: pointer;
}
.movie_swiper{
	margin-bottom: 60px;
}
.movie_swiper .swiper-container{
	width: 100%;
	margin: 0 auto;
	max-width: 1920px;
	position: relative;
	overflow: hidden;
}
.movie_swiper .swiper-slide-active:before{content: "";
	position: absolute;
	z-index: 1;
	background-image: url("../images/movie_f_000.png");
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 100%;
}
.movie_swiper .swiper-slide-prev,
.movie_swiper .swiper-slide-next{
	transform: scale(0.8);
	position: relative;
	pointer-events:none;
}
.movie_swiper .swiper-slide-prev:before,
.movie_swiper .swiper-slide-next:before{
	content: "";
	position: absolute;
	z-index: 1;
	background-color: rgba(0,0,0,0.7);
	width: 100%;
	height: 100%;
}
.movie_swiper .swiper-button-prev,
.movie_swiper .swiper-button-next {
	display: block;
}
.movie_swiper .swiper-button-prev{
	left: 21vw !important;
	transform: rotateY( 180deg );
}
.movie_swiper .swiper-button-next{
	right: 21vw !important;
}

/****** spec ******/
#spec{
	padding-top: 180px;
	padding-bottom: 100px;
	color: #fff;
	
}
#spec dl{
	display: flex;
	flex-wrap: wrap;
	line-height: 4;
	padding-top: 80px;
    padding-bottom: 50px;
	font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}
#spec dt{
	width: 260px;
	color: #0eb3ca;
	position: relative;
	text-align: center;
	margin-right: 100px;
}
#spec dt:before{
	line-height: 4;
	content: "";
	position: absolute;
	top: 40%;
	left: 0;
margin       : auto;
  width        : 10px;
  height       : 10px;
  background   : #000000;
  transform    : rotate(45deg);
}
#spec dt:after{
	content: "";
	position: absolute;
	top: 40%;
	right: 0;
margin       : auto;
  width        : 10px;
  height       : 10px;
  background   : #000000;
  transform    : rotate(45deg);
}
#spec dd{
	width:calc(100% - 360px);
}
#spec dl .br_sp{
	display: none;
}
#spec dl a{
    background-color:#FFB600;
    color: #000;
    font-weight: bold;
    border-radius: 4px;
    margin-left: 1rem;
    padding: 5px 10px;
}
#media{
    position: relative;
    padding-bottom: 100px;
}
.media_link{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 80px; 
}
.media_link li{
    width: 50%;
    max-width: 500px;
    text-align: center;
}
.media_link a{
    display: block;
    background-color: #fff;
    border: 2px solid #0eb3ca;
    color: #0eb3ca;
    font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
    padding: 1rem 3rem;
    font-weight: bold;
    transition: 0.8s;
}
.media_link a:hover{opacity: 0.8;transition: 0.8s;}
.media_link a p{
    padding-top: 1rem;
}
/*.noise {*/
/*    background: url("../images/pattern_noise.png");*/
/*    animation: noise_anima 1s steps(10) infinite;*/
/*}*/
.noise{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
}
.noise_line {
    background: url("../images/pattern_line.png");
    animation: noise_anima 1s steps(10) infinite;
}
.noise_line{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}
    .none_pc{
        display: none;
    }
@keyframes noise_anima {
	from { background-position: 0 0; }
	to { background-position: 123px 456px; }
}
.flex_storelink{
    position: fixed;
    bottom: -140px;
    background-color: rgba(17,180,206,0.8);
    width: 100%;
    z-index: 999;
    padding: 0.5rem 0;
    transition: .8s;
}
.flex_storelink_title{max-width: 350px; margin: 0 auto;}
.flex_storelink ul{display: flex; justify-content: center;}
.flex_storelink ul li{width: 200px;margin: 0 0.5rem;
    border-radius: 10px;
    border: 2px solid #9e9e9e;
    background-color: #000;
    overflow: hidden;}
.p_b_142{padding-bottom: 142px;}
/********************* padding *********************/
.message_container,
.character_container,
.unit_list_container,
#system_top,
.gallery_container{
	padding: 264px 0 100px 0;
}
.message_title,
.character_title,
.unit_title,
.gallery_title{
	padding:  0 0 80px;
}

/********************* MESSAGE *********************/
.message_container::before {
  content: '';
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.message_inner{
	color: #ffffff;font-size: 18px;
	padding:70px 0 0; 
	font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}
.message_Sign{
	text-align: right;
	margin-top: 2rem;
}
.message_inner label {
    display: block;
	position: relative;
    margin: 0 0 1rem;
    padding : 13px 53px 13px 80px;
    cursor :pointer;
    transition: all 0.5s;
    font-size: 108.5%;
	border: 2px solid #0fb3ca;
	background-color: #000;
}
.message_inner label:before{
  padding-left: 19px;
  position: absolute;
  left: 42px;
  background: url(../images/arrow02.png) no-repeat;
  background-position:-68px 50%;
  width: 23px;
  height: 29px;
  content: '';
}
.message_inner label:after {
    padding-right: 24px;
	position: absolute;
	top: 25%;
	right: 27px;
	background: url(../images/arrow02.png) no-repeat;
	background-position:0 50%;
	width: 23px;
	height: 29px;
    content: '';
}
.message_inner label:hover {
    background: #0fb3ca;
}
.message_inner input {
    display: none;
}
.message_inner .int {
    height: 0;
    overflow: hidden;
    padding-right: 53px;
    padding-left: 80px;
    opacity: 0;
    transition: 0.8s;
	background: rgba(0, 0, 0, 0.5);
}
.accId:checked + label + .int {
    height: auto;
    margin: 5px 0 20px;
    padding-bottom: 30px;
	padding-top: 15px;
    opacity: 1;
}
.container .int a{
	text-decoration:underline;
	color:#33ccff;
}
.accId:checked + label:after {
	background-position:-34px 50%;
}
.accId:checked + label {
	background-color: #0fb3ca;
}

/********************* WORLD *********************/
#world_container{
	position: relative;
	overflow: hidden;
}
#story{
	background-image: url("../images/world/vg_story.jpg");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	height: 1080px;
}
#void{
	background-image:url("../images/world/bg_void.jpg");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	padding-top: 200px;
	height: 1080px;
}
#organization{
	background-image: url("../images/world/bg_organization.jpg");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	padding-bottom: 200px;
}

.story_inner{
	padding-top:266px;
	padding-bottom: 31vh;
	max-height: 1080px;
}

.void_inner{height: 625px;margin-bottom: 200px;}
.void_inner .title{position: relative;z-index: 1;}
.void_inner .title_sp{display: none;}
.void_inner .movie{
	position: absolute;
	left: 50%;
	top:90px;
	transform: translateX(-80px);
	width: 588px;
}
.void_inner .text01{
	position: absolute;
	width: 348px;
	left: 67px;
	top:260px;
}
.void_inner .text02{
	position: absolute;
	width: 517px;
	left: 67px;
	top:436px;
}
.void_inner .flame{
	position: absolute;
	top: 208px;
}

.organization_inner_title{
	padding-top: 200px;
	padding-bottom: 80px;
}
.organization_list{
	display: flex;
	list-style: none;
	padding: 10.8vh 0 0 0;
	justify-content: space-between;
	padding-bottom: 20vh;
	
}
.organization_swiper .swiper-container{
	overflow:scroll-non;
	position:static;
}

.organization_swiper .swiper-button-prev{
	left:-9vw !important;
	transform: rotateY( 180deg );
}
.organization_swiper .swiper-button-next{
	right:-9vw !important;
}
.organization_swiper .swiper-button-prev,
.organization_swiper .swiper-button-next{
	display: none;
}
.organization_swiper .swiper-slide .back{
	display: block;
	transition:all 1s ease-in-out;
}
.organization_swiper .swiper-slide .front{
	opacity: 0;
	position: absolute;
	top: 0;
	transition:all 1s ease-in-out;
}
.organization_swiper .swiper-slide:hover .back{
	opacity: 0;
	position: absolute;
	top: 0;
	transition:all 1s ease-in-out;
}
.organization_swiper .swiper-slide:hover .front{
	display:block;
	opacity: 1;
	transition:all 1s ease-in-out;
}
.orgnaization_img_sp{
	display: none;
}
/***** organization swiper *****/
.organization_swiper .swiper-slide{

}
#discovery .inner{
	padding-bottom: 100px;
	padding-top: 10vh;
}
/********************* SYSTEM *********************/
#system_container{
	position: relative;
	overflow: hidden;
}
#system_top{
	background-image: url("../images/system/bg_system-top_pc.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: auto auto;
	height: 1080px;
}
#battle_dungeon{
	background-image:url("../images/system/bg_voidmap.jpg");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	padding-top:200px; 
}
#housing{
	background-image: url("../images/system/bg_housing.jpg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: cover;
	padding-top:200px; 
}
.loop_wap{
	margin-top: 124px;
    position: relative;
    width: 100%;
    height: 252px;
    background-image: url('../images/system/system_loop.png');
    background-repeat: repeat-x;
    background-size: cover;
    background-position: 0 0;
    animation-name: slide_img;
    animation-duration: 300s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes slide_img {
    100% {
        background-position: -10000px 0;
         }
} 
.battle_inner{height: 625px;margin-bottom: 200px;}
.battle_inner .title{position: relative;z-index: 2;}
.battle_inner .title_sp{display: none;}
.battle_inner .movie{
	position: absolute;
	left: 50%;
	top:90px;
	transform: translateX(-80px);
	width: 588px;
	cursor: pointer;
	z-index:1;
}
.battle_inner .text01{
	position: absolute;
	width: 348px;
	left: 67px;
	top:260px;
}
.battle_inner .text02{
	position: absolute;
	width: 517px;
	left: 67px;
	top:436px;
}
.battle_inner .flame{
	position: absolute;
	top: 208px;
}
.dungeon_inner{height: 625px;margin-bottom: 200px}
.dungeon_inner .title{position: relative;z-index: 2;}
.dungeon_inner .movie{
	position: absolute;
	right: 50%;
	top:90px;
	transform: translateX(80px);
	width: 588px;
	cursor: pointer;
	z-index:1;
}
.dungeon_inner .text01{
	position: absolute;
	width: 348px;
	top:260px;
	right: 67px;
}
.dungeon_inner .text02{
	position: absolute;
	width: 348px;
	top:436px;
	right: 67px;
}
.dungeon_inner .flame{
	position: absolute;
	top: 208px;
	right: 0;
	transform: scale(-1, 1);
}
.housing_inner{height: 625px;}
.housing_inner .title{position: relative;z-index: 2;}
.housing_inner .movie{
	position: absolute;
	left: 50%;
	top:90px;
	transform: translateX(-80px);
	width: 588px;
	cursor: pointer;
	z-index:1;
}
.housing_inner .text01{
	position: absolute;
	width: 348px;
	left: 67px;
	top:260px;
}
.housing_inner .text02{
	position: absolute;
	width: 396px;
	left: 67px;
	top:436px;
}
.housing_inner .flame{
	position: absolute;
	top: 208px;
}
.housing_icon{
	padding-top: 70px;
	padding-bottom: 70px;
}
/********************* CHARACTER *********************/
.zoom_bg_void{
	position: relative;
}
.zoom_bg_void:before{
	content: "";
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
	background-image: url("../images/world/vg_story.jpg");
	background-position: center top;
    -webkit-animation: zoom 30s 0s linear infinite alternate;
    animation: zoom 30s 0s linear infinite alternate;
}
.zoom_bg_void::after {
  content: '';
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes zoom {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
.npc01 .voice,.npc02 .voice,.npc03 .voice,.npc04 .voice,.npc05 .voice{
    display: flex;
    flex-wrap: nowrap;
    width:  23.52941176470588%;
}
.npc01 .voice li,.npc02 .voice li,.npc03 .voice li,.npc04 .voice li,.npc05 .voice li{
    cursor: pointer;
}
.npc01 .voice{position: absolute;top:29.66207759699625%;left:67.64705882352941%;}
.npc02 .voice{position: absolute;top:31.5035799522673%;left:22.54901960784314%;}
.npc03 .voice{position: absolute;top:31.78973717146433%;left:67.64705882352941%;}
.npc04 .voice{position: absolute;top:32.50311332503113%;left:22.54901960784314%;}
.npc05 .voice{position: absolute;top:28.74449339207048%;left:67.64705882352941%;}
/********************* UNIT *********************/
.unit_list_container,
.unit_container{
	position: relative;
}
.unit_list_container:before,
.unit_container:before{
	content: "";
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
	background-image: url("../images/bg_normal.jpg");
	background-position: center top;
    -webkit-animation: zoom 30s 0s linear infinite alternate;
    animation: zoom 30s 0s linear infinite alternate;
}
.unit_container:after{
  content: '';
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.unitlist_box{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(305px, 1fr));
	grid-gap: 20px;
}
.unitlist_box li{
	overflow: hidden;
	border-radius: 4px;
}
.unitlist_box a{
	display: block;
	overflow: hidden;
	transition:0.6s all;
}
.unitlist_box a:hover{
	transform:scale(1.1,1.1);
	transition:0.6s all;
}
/********************* UNITdetail *********************/
.unit_container{
}
.unit_swiper .swiper-container{
	padding: 40px 0;
	width: 100%;
	background-color: rgba(0,0,0,0.8);
}
.unit_box{
	position: relative;
	min-width: 1200px;
}
.unit_bar{
	position: absolute;
	right: 0;
	left: 10vw;
	top:13.79310344827586%;
	z-index: 7;
	height: 21.19021134593993%;
}
.unit_table{
	position: absolute;
	left: 10vw;
	top: 47.27474972191324%;
	z-index: 9;
	width: 26.26vw;
	max-width: 520px;
	min-width: 390px;
}
.unit_img{
	position:relative;
	z-index: 8;
	min-width: 1020px
}
.unit_table .voice {
    display: flex;
	padding: 10px 0;
	cursor: pointer;
}
.unit_table .voice li{
    max-width: 110px;
}
.void_img{
	position: relative;
}
.youtube-link,
.void_img{
	position: relative;
	cursor: pointer;
}
.void_img .movie_f,
.youtube-link .movie_f{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.unit_arrow{
	position: absolute;
	display: flex;
	z-index: 10;
	top:70vh;
	width: 100%;
}
.unit_arrow li{
	width: 61px;
	height: 124px;
	position: absolute;
}
.unit_arrow li:first-child{
	transform: scale(-1, 1);
	left: 0;
}
.unit_arrow li:last-child{
	right: 0;

}
.keyframe2{
    animation-name: anim_h;
}

@keyframes anim_h {
    0% {
        transform: translate(0px, 0);
    }
    100% {
        transform: translate(15px, 0);
    }
}

/********************* ユニットツイッター *********************/
.unit_twitter{
	display: block;
	text-align: center;
	color: #fff;
	background: rgb(0,144,255);
background: linear-gradient(90deg, rgba(0,144,255,1) 0%, rgba(0,110,244,1) 100%);
	border-radius: 4px;
	max-width:500px ;
	min-width: 380px;
	width: 26.26vw;
	line-height: 2;
	font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
	margin: 2rem 0;
}
/********************* gallery *********************/
#gallery{

}
.gallery_container{
	background-image: url("../images/world/vg_story.jpg");
	background-size: cover;
	background-position: center center;
	 height: 100%;
	position: relative;
}
.gallery_container::before {
  content: '';
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
	display: block;
}

.grid_gallery{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	grid-gap: 20px;
}
.grid_gallery a{
	display: block;
	overflow: hidden;
	transition:0.6s all;
}
.grid_gallery a:hover{
	transform:scale(1.1,1.1);
	transition:0.6s all;
}
.grid_gallery .gallery_text{
	display: none;
}
.lg-img-wrap .gallery_text{
	display: block;
}

/********************* footer *********************/
#page-top {
	    background: url(../images/pagetop.png) no-repeat center center;
    display: block;
    position: fixed;
    text-indent: -9999px;
    z-index: 2;
    bottom: -90px;
    left: 10px;
    width: 81px;
    height: 80px;
    transition: .5s;
    background-size: cover;
    background-position: right;
	z-index: 7777;
}
footer{
	position: relative;
	z-index: 1;
	padding:0;
	background-color: #000;
	font-size: 12px;
	padding-bottom: 30px;
	width: 100%;
	min-width: 1020px;
	font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}
.footer_shere{
	border-top: 1px solid #404040;
	color: #fff;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	padding: 24px 0;
}
.footer_shere div{
	width: 40px;
	height: 40px;
	margin-left: 40px;
}
.footer_nav{
	border-top: 1px solid #404040;
	color: #fff;
	display: flex;
	justify-content: center;
	padding: 24px 0;
}
.footer_nav li{
	border-right: 1px solid #fff;
	padding: 0 3rem;
}
.footer_nav li:first-child{
	border-left: 1px solid #fff;
}
.footer_copy{
	color: #fff;
	display: flex;
	justify-content:center;
	align-items: center;
}
/********************* 
ipad、medium screen
*********************/
@media screen and (max-width: 844px) {
	body {
    min-width: initial;
  }
	.inner{
		position: relative;
		z-index: 1;
		width:100%;
		margin: 0 auto;
	}
	.inner_wide{
		position: relative;
		z-index: 1;
		width: auto;
		margin: 0 9.33vw;
	}
	/********************* padding *********************/
	.message_container,
	.character_container,
	.unit_list_container,
	#system_top,
	.gallery_container{
		padding: 16vh 0 8vh 0;
	}
	.message_title,
	.character_title,
	.unit_title,
	.gallery_title{
		padding:  0 0 80px;
	}
	#main{
		padding-top:0;
		width:100%;
		background-color: rgba(0,0,0,0.9);
		background-position: center top;
		position: relative;
		z-index: 1;
	}
	/********************* sidemenu *********************/
	#side-menu_btn{
	background-color:#2FA5CB;
	border-radius: 10px 0 0 10px;
	width: 30px;
	height: 140px;
	position: absolute;
	left: -30px;
	top:120px;
	cursor: pointer;
}

	/********************* TOP *********************/

	#top_bg_void{
	position: relative;
	}
	#top_bg_void:before{
		content: "";
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-image: url("../images/bg_sky_sp.jpg");
		background-position: center top;
		-webkit-animation: zoom 20s 0s linear infinite alternate;
		animation: zoom 20s 0s linear infinite alternate;
		z-index: -1;
	}
	.pararaxArea {
	  position: relative;
	  height:auto;
	  width: 100%;
	  display: flex;
	  justify-content: center;
	  align-items:flex-start;
	}
	.pararaxArea .pararaxItem {
	  position: relative;
		background-repeat: no-repeat;
		background-size: cover;
		width: 105vw;
	}
	.pararaxArea .pararaxItem:nth-child(1) {
		-webkit-transition: -webkit-transform 3s ease-out 0.008s;
		transition: -webkit-transform 3s ease-out 0.008s;
		transition: transform 3s ease-out 0.008s;
		transition: transform 3s ease-out 0.008s,
			-webkit-transform 3s ease-out 0.008s;
		background-image: url("../images/bg_chara_sp.png");
		height: 100vh;
		width: 100%;
		background-size: cover;
		background-position: center center;
	}
	.pararaxArea .pararaxItem:nth-child(2) {
		display: none;
	}
	.pararaxArea .centerObj1 {
	  position: absolute;
	  z-index: 10;
		top: 15vh;
		width:65%;
		max-width: 350px;
	}
	.pararaxArea .centerObj2 {
	  position: absolute;
	  z-index: 10;
		width: 70%;
		top: 80%;
	}
    .pararaxArea .centerObj3 {
    position: absolute;
    width: 100px;
    z-index: 10;
    left: 0px;
    top: 80px;
}
	
	#jizen{
	position: relative;
	}
    .jizen__title{width:80%; max-width: 840px; margin:-60px auto 0;}
	.jizen_btn1{
		display: flex;
		flex-wrap: wrap;
		justify-content:center;
		padding-top: 5vh;
        padding-bottom: 5vh;
	}
	.jizen_btn1 li{
		margin: 0 1vw;
		width: 30%;
	}
	.jizen_btn2{
		display: flex;
		flex-wrap: wrap;
		justify-content:center;
		margin-top: -1vh;
	}
	.jizen_btn2 li{
		margin: 0 1vw;
		width: 30%;
	}
    .tokuten{width: 95%; margin: 0 auto;}
    .tokuten li{ margin-bottom: 3vh;}
    .stars p{width: 30px;}
    .stars p:nth-child(1){left:120px; top:60%; animation: star-anim 8s 0s infinite;}
    .stars p:nth-child(2){left:50px; top:230px; animation: star-anim 6s 1s infinite;}
    .stars p:nth-child(3){left:180px; top:220px; animation: star-anim 5s 2s infinite;}
    .stars p:nth-child(4){left:20%; top:70%; animation: star-anim 7s 3s infinite;}
    .stars p:nth-child(5){left:80%; top:80%; animation: star-anim 7s 4s infinite;}
    .stars p:nth-child(6){left:120px; top:300px; animation: star-anim 4s 0s infinite;}
    .stars p:nth-child(7){right:10%; top:70%; animation: star-anim 7s 1s infinite;}
    .stars p:nth-child(8){left:10%; top:90%; animation: star-anim 8s 2s infinite;}
    .stars p:nth-child(9){right:20px; top:90%; animation: star-anim 5s 3s infinite;}
    .stars p:nth-child(10){right:20px; top:80%; animation: star-anim 6s 1s infinite;}
    
    .stars02 p, .stars03 p{width: 20px;}
    .stars02 p:nth-child(1){right:2%; top:10%; animation: star-anim 7s 1s infinite;}
    .stars02 p:nth-child(2){right:18%; top:45%; animation: star-anim 8s 2s infinite;}

    .stars03 p:nth-child(1){right:3%; top:10%; animation: star-anim 4s 1s infinite;}
    .stars03 p:nth-child(2){right:18%; top:20%; animation: star-anim 7s 3s infinite;}
    
    .jizen_notce{
        overflow-y: scroll;
        height: 10rem;
        width: 95%;
        color: #fff;
        border: 1px solid #0cbdd6;
        background-color: rgba(13,196,222,0.6);
        padding: 1rem 1rem;
        font-size: 10px;
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        margin:0 auto 8vh;
    }
    .jizen_notce h2{font-size: 10px;}
    .flex_storelink{padding: 0.5rem 9.33vw;}
    
    .campaign_wap_inner{
        max-width: 1020px;
        margin: 0 9.33vw;
        padding: 5vh 0 ;
    }
    .campaign_wap_inner ul{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-top: 3vh;  
    }
    .campaign_wap_inner ul li{
        width: 100%;
        max-width: 100%;
        text-align: center;
    }
    .campaign_wap_inner ul li:first-child {margin-bottom: 1rem;}
	#movie{
		padding-top: 5vh;
		padding-bottom: 8vh;
		color: #fff;
	}
	.movie_swiper {
		position: relative;
		margin-bottom: 3vh;
	}
    .movie_swiper .swiper-container{
        width: 100%;
        margin: 0 auto;
        max-width: 1920px;
        position: relative;
        overflow: hidden;
    }
	.movie_swiper .swiper-slide-prev,
	.movie_swiper .swiper-slide-next{
		transform: scale(1);
		position: relative;
		pointer-events:none;
	}
	.movie_swiper .swiper-button-prev{
		position: absolute;
		left: 0 !important;
		transform: rotateY( 180deg );

	}
	.movie_swiper .swiper-button-next{
		right: 0 !important;
	}

	/****** spec ******/
	#spec {
    padding-top: 10vh;
    padding-bottom: 8vh;
    color: #fff;
}
	#spec dl{
		display: flex;
		flex-wrap: wrap;
		line-height: 2;
		padding-top: 5vh;
		justify-content: center;
        font-size: 14px;
	}
	#spec dt{
		width: 50%;
		color: #0eb3ca;
		position: relative;
		text-align: center;
		margin-right:0;
	}
	#spec dt:before{
		line-height: 4;
		content: "";
		position: absolute;
		top: 40%;
		left: 0;
	margin       : auto;
	  width        : 10px;
	  height       : 10px;
	  background   : #000000;
	  transform    : rotate(45deg);
	}
	#spec dt:after{
		content: "";
		position: absolute;
		top: 40%;
		right: 0;
	margin       : auto;
	  width        : 10px;
	  height       : 10px;
	  background   : #000000;
	  transform    : rotate(45deg);
	}
	#spec dd{
		width:100%;
		text-align: center;
		margin-bottom: 2vh;
	}
	#spec dl span{
		display: none;
	}
	#spec dl .br_sp{
	display:inline-block;
}
	#media{
        position: relative;
        padding-bottom: 8vh;
    }
    .media_link{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: 5vh;
        margin: 0 9.33vw;
    }
    .media_link li{
        width: 100%;
        text-align: center;
        max-width: 100%;
    }
    .media_link li:first-child{
        margin-bottom: 1rem;
    }
    .media_link a{
        display: block;
        background-color: #fff;
        border: 2px solid #0eb3ca;
        color: #0eb3ca;
        font-family: "Helvetica Neue",
        Arial,
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        Meiryo,
        sans-serif;
        padding: 0.5rem;
        font-weight: normal;
        transition: 0.8s;
        font-size: 12px;
    }
    .media_link a:hover{opacity: 0.8;transition: 0.8s;}
    .media_link a p{
        padding-top: 0.5rem;
    }
	.zoom_bg_void{
	position: relative;
	}
	.zoom_bg_void:before{
		content: "";
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-image: url("../images/world/bg_story_sp.jpg");
		background-position: center top;
		
		background-size: cover;
		-webkit-animation: zoom 30s 0s linear infinite alternate;
		animation: zoom 30s 0s linear infinite alternate;
	}
	.unit_list_container:before,
	.unit_container:before{
		content: "";
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-image: url("../images/bg_norml_sp.jpg");
		background-position: center center;
		-webkit-animation: zoom 30s 0s linear infinite alternate;
		animation: zoom 30s 0s linear infinite alternate;
	}
	/********************* MESSAGE *********************/
	.message_inner{
	color: #ffffff;
		font-size: 14px;
	padding:0 0 50px;
		margin: 0 9.33vw;
		width: auto;
		text-align: justify;
}
	/* リスト */
	.message_inner label {
		display: block;
		position: relative;
		margin: 0 0 1rem;
		padding : 13px 53px 13px 20px;
		cursor :pointer;
		transition: all 0.5s;
		font-size: 108.5%;
		border: 2px solid #0fb3ca;
		background-color: #000;
	}
	.message_inner label:after {
		padding-right: 24px;
		position: absolute;
		top: 50%;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
		right: 20px;
		background: url(../images/arrow02.png) no-repeat;
		background-position:0 50%;
		width: 23px;
		height: 29px;
		content: '';
	}
	.message_inner .int {
		height: 0;
		overflow: hidden;
		padding-right: 20px;
		padding-left: 20px;
		opacity: 0;
		transition: 0.8s;
		background: rgba(0, 0, 0, 0.5);
	}
	.accId:checked + label + .int {
		height: auto;
		margin: 5px 0 20px;
		padding-bottom: 30px;
		padding-top: 15px;
		opacity: 1;
	}
	/********************* WORLD *********************/
	#story{
		background-image: url("../images/world/bg_story_sp.jpg");
		background-repeat: no-repeat;
		background-position: bottom center;
		background-size: cover;
		height: auto;
	}
	#void{
		background-image:url("../images/world/bg_void_sp.jpg");
		background-repeat: no-repeat;
		background-position: top center;
		background-size: cover;
		padding-top: 16vh;
		height: auto;
	}
	#organization{
		background-image: url("../images/world/bg_organization_sp.jpg");
		background-repeat: no-repeat;
		background-position: top center;
		background-size: cover;
		padding-bottom: 20vh;
	}
	/********************* UNIT *********************/

	/********************* UNITdetail *********************/
	.unit_box{
		position: relative;
		min-width: 100%;
}
	.unit_container{
		min-width: 100%;
	}
	.unit_swiper .swiper-container{
		padding: 40px 0;
		width: 100%;
		background-color: rgba(0,0,0,0.8);
	}
	.unit_bar{
		position: absolute;
		right: 0;
		left: 0;
		top:17.59vh;
		max-width: 100%;
		min-width: 100%;
		z-index: 7;
	}
	.unit_bgname{
		display: none;
	}
	.unit_table{
		position: absolute;
		left: auto;
		top: auto;
		bottom: 0;
		z-index: 9;
		width: auto;
		max-width: auto;
		min-width: auto;
		margin: 0 9.33vw;
		padding-bottom:50px;
	}
	.unit_table .voice{
		padding: 20px 0;
	}
    .unit_table .voice li{
        
    }
	.unit_img{
		position:relative;
		z-index: 8;
		min-width: 100%;
		padding-top: 50px;
	}
	.unit_arrow{
		position: absolute;
		display: flex;
		z-index: 9;
		top:50vh;
		width: 100%;
	}
	.unit_arrow li{
		width: 7.5vw;
		height: auto;
		position: absolute;
	}
	.unit_arrow li:first-child{
		transform: scale(-1, 1);
		left: 0;
	}
	.unit_arrow li:last-child{
		right: 0;

	}
	.unit_twitter{
		display: block;
		text-align: center;
		color: #fff;
		background: rgb(0,144,255);
	background: linear-gradient(90deg, rgba(0,144,255,1) 0%, rgba(0,110,244,1) 100%);
		border-radius: 4px;
		max-width:auto ;
		min-width: auto;
		width: auto;
		line-height: 2;
		font-family: "Helvetica Neue",
		Arial,
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		Meiryo,
		sans-serif;
		margin: 2rem 0;
	}
	/********************* SYSTEM *********************/
	#system_container{
		position: relative;
		overflow: hidden;
	}
	#system_top{
		background-image: url("../images/system/bg_system_sp.jpg");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	}
	#housing{
		background-image: url("../images/system/bg_housing.jpg");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		padding-top:200px; 
	}
	/****** バトル *****/
	.character_title{margin: 0 9.33vw;width: auto;}
	.unit_title{margin: 0 9.33vw;width: auto;}
	.story_inner{
		margin: 0 9.33vw;
		width: auto;
		padding-top:20vh;
		padding-bottom: 20vh;
	max-height: 2000px;}
	.system_top_inner{margin: 0 9.33vw;width: auto;}
	.battle_inner{height:auto;margin-bottom: 5rem;position: relative;}
	.void_inner{height: auto; padding-bottom: 16vh;}
	.organization_inner_title{
		padding-top: 16vh;
		padding-bottom: 8vh;
	}

	.battle_inner .title{display: none;}
	.void_inner .title{display: none;}
	
	.battle_inner .title_sp{margin-bottom: 1rem;display: block;}
	.void_inner .title_sp{margin-bottom: 1rem;display: block;}
	
	.dungeon_inner .title,
	.housing_inner .title{
		margin-bottom: 1rem;
	}
	
	.battle_inner .movie,
	.dungeon_inner .movie,
	.housing_inner .movie,
	.void_inner .movie{
		position:relative;
		cursor: pointer;
		z-index:1;
		margin: 0 9.33vw;
		width: auto;
		transform: translateX(0);
		right: auto;
		left: auto;
		top:auto;
		margin-bottom: 5vh;
	}
	.battle_inner .text01,
	.dungeon_inner .text01,
	.housing_inner .text01,
	.void_inner .text01{
		position:relative;
		width:auto;
		left: auto;
		right: auto;
		top:auto;
		margin: 0 9.33vw;
		margin-bottom: 5vh;
	}
	.battle_inner .text02,
	.dungeon_inner .text02,
	.housing_inner .text02,
	.void_inner .text02{
		position:relative;
		width:auto;
		left: auto;
		right: auto;
		top:auto;
		margin: 0 9.33vw;
	}
	.battle_inner .flame,
	.dungeon_inner .flame,
	.housing_inner .flame,
	.void_inner .flame{
		display: none;
	}
	.housing_icon{
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
	/********************* character *********************/
	.character_list_inner{
		position: relative;
		width: 100%;

	}
   .npc01 .voice{position: absolute;top:58.38509316770186%;right:8.8%;left: auto; width:40.8%;}
	.npc02 .voice,.npc03 .voice{position: absolute;top:67%;right:8.8%;left: auto;width:40.8%;}
	.npc04 .voice{position: absolute;top:64.5%;right:8.8%;left: auto;width:40.8%;}
	.npc05 .voice{position: absolute;top:66%;right:8.8%;left: auto;width:40.8%;}


	.organization_swiper{
		margin: 0 9.33vw;
	}
	.organization_swiper .swiper-button-prev,
	.organization_swiper .swiper-button-next{
		display: block;
	}
	
	.orgnaization_img_sp{
		display: block;
	}
	.organization_swiper .swiper-slide .back{
	display: none;
	transition:all 1s ease-in-out;
}
.organization_swiper .swiper-slide .front{
	display: none;
	opacity: 0;
	position: absolute;
	top: 0;
	transition:all 1s ease-in-out;
}
.organization_swiper .swiper-slide:hover .back{
	display: none;
	opacity: 0;
	position: absolute;
	top: 0;
	transition:all 1s ease-in-out;
}
.organization_swiper .swiper-slide:hover .front{
	display: none;
	opacity: 1;
	transition:all 1s ease-in-out;
}
	#discovery .inner{
		padding-top: 5vh;
		padding-bottom: 5vh;
	}
	#discovery a{
	margin: 0 9.33vw;
    display: block;
	}
	/********************* footer *********************/
	#page-top {
	    background: url(../images/pagetop.png) no-repeat center center;
    display: block;
    position: fixed;
    text-indent: -9999px;
        z-index: 7777;
    bottom: -75px;
    left: 10px;
    width: 41px;
    height: 40px;
    transition: .5s;
    background-size: cover;
    background-position: right;
}
	footer{
		position: relative;
		z-index: 1;
		padding:0;
		background-color: #000;
		font-size: 12px;
		padding-bottom: 30px;
		min-width: 100%;
	}
	.footer_nav li{
		border-right: 1px solid #fff;
		padding: 0 1rem;
	}
}
@media screen and (max-width: 411px) {
    	.pararaxArea .centerObj2 {
	  position: absolute;
	  z-index: 10;
		width: 100%;
		top: 80%;
	}
    .pararaxArea .centerObj3 {
        display: none;
    position: absolute;
    width: 50px;
    z-index: 10;
    left: 5px;
    top: 50px;
}
    .jizen_touroku{
        margin: 0 9.33vw;
    }
    .jizen__title {
    width: 100%;
    max-width: 840px;
    margin: 3rem auto 0;
}
    .m_b_500 {
    margin-bottom: 3rem;
}
    .youtube_link{
        margin: 0 9.33vw;
    }
}
@keyframes move {
	0% {
		box-shadow: 0 0 10px rgba(26, 194, 235, 1);
		opacity: 1;
	}
	100% {
		border-radius: 10px;
		transform: translate3d(0, 0, 1px) rotate(360deg) scaleX(0.5);
		box-shadow: 0 0 50px rgba(26, 194, 235, 1);
		opacity: 0.1;
	}
}
.square {
	position: fixed;
	width: 100vw;
	height: 100%;
	font-size: 0;
	top: 0;
	left: auto;
	right: auto;
	overflow: hidden;
	z-index: 1;
    
}
.square span {
	width: 5px;
	height: 5px;
	backface-visibility: hidden;
	position: absolute;
	animation: move;
	animation-duration: 45;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.square span:nth-child(0) {
	background: rgba(166, 251, 255, 0.7);
	top: 22%;
	left: 53%;
	animation-duration: 20s;
	animation-delay: -46s;
	transform-origin: 17vw -21vh;
}
.square span:nth-child(1) {
	background: rgba(90, 216, 215, 0.8);
	top: 68%;
	left: 52%;
	animation-duration: 37s;
	animation-delay: -24s;
	transform-origin: 23vw -19vh;
}
.square span:nth-child(2) {
	background: rgba(90, 216, 215, 0.8);
	top: 9%;
	left: 13%;
	animation-duration: 8s;
	animation-delay: -28s;
	transform-origin: 12vw 9vh;
}
.square span:nth-child(3) {
	background: rgba(90, 216, 215, 0.8);
	top: 51%;
	left: 7%;
	animation-duration: 30s;
	animation-delay: -22s;
	transform-origin: -5vw -22vh;
}
.square span:nth-child(4) {
	background: rgba(90, 216, 215, 0.8);
	top: 60%;
	left: 15%;
	animation-duration: 30s;
	animation-delay: -34s;
	transform-origin: 13vw -13vh;
}
.square span:nth-child(5) {
	background: rgba(255, 255, 255, 0.6);
	top: 40%;
	left: 15%;
	animation-duration: 22s;
	animation-delay: -9s;
	transform-origin: -23vw -12vh;
}
.square span:nth-child(6) {
	background: rgba(255, 255, 255, 0.6);
	top: 100%;
	left: 28%;
	animation-duration: 11s;
	animation-delay: -23s;
	transform-origin: 17vw 20vh;
}
.square span:nth-child(7) {
	background: rgba(90, 216, 215, 0.8);
	top: 21%;
	left: 56%;
	animation-duration: 32s;
	animation-delay: -38s;
	transform-origin: 19vw -7vh;
}
.square span:nth-child(8) {
	background: rgba(255, 255, 255, 0.6);
	top: 95%;
	left: 89%;
	animation-duration: 25s;
	animation-delay: -22s;
	transform-origin: -16vw 25vh;
}
.square span:nth-child(9) {
	background: rgba(255, 255, 255, 0.6);
	top: 91%;
	left: 53%;
	animation-duration: 36s;
	animation-delay: -25s;
	transform-origin: 15vw 10vh;
}
.square span:nth-child(10) {
	background: rgba(166, 251, 255, 0.7);
	top: 6%;
	left: 86%;
	animation-duration: 40s;
	animation-delay: -22s;
	transform-origin: 6vw -8vh;
}
.square span:nth-child(11) {
	background: rgba(90, 216, 215, 0.8);
	top: 33%;
	left: 55%;
	animation-duration: 34s;
	animation-delay: -7s;
	transform-origin: -1vw 15vh;
}
.square span:nth-child(12) {
	background: rgba(255, 255, 255, 0.6);
	top: 37%;
	left: 59%;
	animation-duration: 31s;
	animation-delay: -2s;
	transform-origin: 14vw 4vh;
}
.square span:nth-child(13) {
	background: rgba(90, 216, 215, 0.8);
	top: 55%;
	left: 79%;
	animation-duration: 20s;
	animation-delay: -23s;
	transform-origin: -3vw 2vh;
}
.square span:nth-child(14) {
	background: rgba(166, 251, 255, 0.7);
	top: 33%;
	left: 26%;
	animation-duration: 6s;
	animation-delay: -24s;
	transform-origin: -7vw 13vh;
}
.square span:nth-child(15) {
	background: rgba(90, 216, 215, 0.8);
	top: 28%;
	left: 61%;
	animation-duration: 44s;
	animation-delay: -38s;
	transform-origin: -1vw -5vh;
}
.square span:nth-child(16) {
	background: rgba(255, 255, 255, 0.6);
	top: 12%;
	left: 10%;
	animation-duration: 35s;
	animation-delay: -18s;
	transform-origin: -24vw -16vh;
}
.square span:nth-child(17) {
	background: rgba(166, 251, 255, 0.7);
	top: 63%;
	left: 31%;
	animation-duration: 25s;
	animation-delay: -9s;
	transform-origin: -8vw 5vh;
}
.square span:nth-child(18) {
	background: rgba(90, 216, 215, 0.8);
	top: 98%;
	left: 63%;
	animation-duration: 15s;
	animation-delay: -37s;
	transform-origin: 12vw 23vh;
}
.square span:nth-child(19) {
	background: rgba(90, 216, 215, 0.8);
	top: 48%;
	left: 66%;
	animation-duration: 25s;
	animation-delay: -17s;
	transform-origin: 19vw 2vh;
}
.square span:nth-child(20) {
	background: rgba(90, 216, 215, 0.8);
	top: 75%;
	left: 67%;
	animation-duration: 6s;
	animation-delay: -21s;
	transform-origin: -20vw 9vh;
}
.square span:nth-child(21) {
	background: rgba(90, 216, 215, 0.8);
	top: 8%;
	left: 31%;
	animation-duration: 18s;
	animation-delay: -33s;
	transform-origin: -4vw 19vh;
}
.square span:nth-child(22) {
	background: rgba(90, 216, 215, 0.8);
	top: 8%;
	left: 13%;
	animation-duration: 16s;
	animation-delay: -46s;
	transform-origin: -23vw -23vh;
}
.square span:nth-child(23) {
	background: rgba(90, 216, 215, 0.8);
	top: 79%;
	left: 53%;
	animation-duration: 27s;
	animation-delay: -10s;
	transform-origin: -14vw 15vh;
}
.square span:nth-child(24) {
	background: rgba(90, 216, 215, 0.8);
	top: 81%;
	left: 34%;
	animation-duration: 35s;
	animation-delay: -50s;
	transform-origin: -12vw 16vh;
}
.square span:nth-child(25) {
	background: rgba(166, 251, 255, 0.7);
	top: 81%;
	left: 86%;
	animation-duration: 43s;
	animation-delay: -32s;
	transform-origin: 3vw -4vh;
}
.square span:nth-child(26) {
	background: rgba(255, 255, 255, 0.6);
	top: 77%;
	left: 9%;
	animation-duration: 25s;
	animation-delay: -45s;
	transform-origin: -18vw 7vh;
}
.square span:nth-child(27) {
	background: rgba(90, 216, 215, 0.8);
	top: 34%;
	left: 72%;
	animation-duration: 13s;
	animation-delay: -49s;
	transform-origin: -6vw 19vh;
}
.square span:nth-child(28) {
	background: rgba(255, 255, 255, 0.6);
	top: 22%;
	left: 13%;
	animation-duration: 49s;
	animation-delay: -9s;
	transform-origin: -23vw -5vh;
}
.square span:nth-child(29) {
	background: rgba(255, 255, 255, 0.6);
	top: 47%;
	left: 9%;
	animation-duration: 17s;
	animation-delay: -2s;
	transform-origin: -16vw 10vh;
}
.square span:nth-child(30) {
	background: rgba(90, 216, 215, 0.8);
	top: 92%;
	left: 72%;
	animation-duration: 19s;
	animation-delay: -34s;
	transform-origin: -8vw -8vh;
}
.square span:nth-child(31) {
	background: rgba(255, 255, 255, 0.6);
	top: 69%;
	left: 77%;
	animation-duration: 19s;
	animation-delay: -3s;
	transform-origin: 13vw 19vh;
}
.square span:nth-child(32) {
	background: rgba(90, 216, 215, 0.8);
	top: 34%;
	left: 16%;
	animation-duration: 46s;
	animation-delay: -2s;
	transform-origin: 24vw 11vh;
}
.square span:nth-child(33) {
	background: rgba(90, 216, 215, 0.8);
	top: 69%;
	left: 37%;
	animation-duration: 44s;
	animation-delay: -40s;
	transform-origin: -9vw 23vh;
}
.square span:nth-child(34) {
	background: rgba(255, 255, 255, 0.6);
	top: 12%;
	left: 81%;
	animation-duration: 17s;
	animation-delay: -16s;
	transform-origin: -3vw 19vh;
}
.square span:nth-child(35) {
	background: rgba(255, 255, 255, 0.6);
	top: 92%;
	left: 87%;
	animation-duration: 21s;
	animation-delay: -35s;
	transform-origin: 25vw -6vh;
}
.square span:nth-child(36) {
	background: rgba(166, 251, 255, 0.7);
	top: 69%;
	left: 19%;
	animation-duration: 15s;
	animation-delay: -49s;
	transform-origin: -19vw 8vh;
}
.square span:nth-child(37) {
	background: rgba(90, 216, 215, 0.8);
	top: 76%;
	left: 82%;
	animation-duration: 30s;
	animation-delay: -17s;
	transform-origin: 7vw -16vh;
}
.square span:nth-child(38) {
	background: rgba(90, 216, 215, 0.8);
	top: 76%;
	left: 54%;
	animation-duration: 7s;
	animation-delay: -7s;
	transform-origin: 10vw 17vh;
}
.square span:nth-child(39) {
	background: rgba(90, 216, 215, 0.8);
	top: 60%;
	left: 64%;
	animation-duration: 30s;
	animation-delay: -10s;
	transform-origin: 3vw 6vh;
}
.square span:nth-child(40) {
	background: rgba(90, 216, 215, 0.8);
	top: 2%;
	left: 64%;
	animation-duration: 45s;
	animation-delay: -40s;
	transform-origin: 4vw 19vh;
}
.square span:nth-child(41) {
	background: rgba(255, 255, 255, 0.6);
	top: 89%;
	left: 99%;
	animation-duration: 20s;
	animation-delay: -43s;
	transform-origin: 25vw 17vh;
}
.square span:nth-child(42) {
	background: rgba(255, 255, 255, 0.6);
	top: 35%;
	left: 5%;
	animation-duration: 53s;
	animation-delay: -49s;
	transform-origin: 6vw 20vh;
}
.square span:nth-child(43) {
	background: rgba(255, 255, 255, 0.6);
	top: 56%;
	left: 83%;
	animation-duration: 30s;
	animation-delay: -6s;
	transform-origin: 8vw 8vh;
}
.square span:nth-child(44) {
	background: rgba(166, 251, 255, 0.7);
	top: 46%;
	left: 98%;
	animation-duration: 33s;
	animation-delay: -8s;
	transform-origin: -20vw 12vh;
}
/*********  ********************/
.reflection {
    height      :100%;
    width       :30px;
    position    :absolute;
    top         :-180px;
    left        :0;
    background-color: #fff;
    opacity     :0;
    transform: rotate(45deg);
    animation: reflection 5s ease-in-out 3;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 5s ease-in-out 3;
    -moz-transform: rotate(45deg);
    -moz-animation: reflection 5s ease-in-out 3;
    -ms-transform: rotate(45deg);
    -ms-animation: reflection 5s ease-in-out 3;
    -o-transform: rotate(45deg);
    -o-animation: reflection 5s ease-in-out 3;
}
 
@keyframes reflection {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { transform: scale(4) rotate(45deg); opacity: 1; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
    0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection {
    0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
    0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}
/********* トップキャッチ ****************/
.reveal-text,
.reveal-text::after {
  -webkit-animation-delay: var(--animation-delay, 5s);
          animation-delay: var(--animation-delay, 2s);
  -webkit-animation-iteration-count: var(--iterations, 1);
          animation-iteration-count: var(--iterations, 1);
  -webkit-animation-duration: var(--duration, 800ms);
          animation-duration: var(--duration, 800ms);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
          animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}

.reveal-text {
  --animation-delay: var(--delay, 800ms);
  --animation-duration: var(--duration, 800ms);
  --animation-iterations: var(--iterations, 1);
  position: relative;
  -webkit-animation-name: clip-text;
          animation-name: clip-text;
  white-space: nowrap;
  cursor: default
  
}

.reveal-text::after {
    content: "";
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    transform: scaleY(0);
    transform-origin: 50% 0;
    pointer-events: none;
    -webkit-animation-name: text-revealer;
            animation-name: text-revealer;
  }


@-webkit-keyframes clip-text {
  from {
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}


@keyframes clip-text {
  from {
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}


@-webkit-keyframes text-revealer {
  
  0%, 50% {
    transform-origin: 50% 0;
  }
  
  60%, 100% {
    transform-origin: 50% 100%;   
  }

  
  60% {
    transform: scaleY(1);
  }
  
  100% {
    transform: scaleY(0);
  }
}


@keyframes text-revealer {
  
  0%, 50% {
    transform-origin: 50% 0;
  }
  
  60%, 100% {
    transform-origin: 50% 100%;   
  }

  
  60% {
    transform: scaleY(1);
  }
  
  100% {
    transform: scaleY(0);
  }
}