@charset "utf-8";

@media screen and (min-width: 721px) {



@font-face {
  font-family: "A-OTF-ShinMGoPro-Heavy";
  src: url("https://image.d-games-t-yoko.tokyo/data/genericImages/A-OTF-ShinMGoPro-Heavy.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "A-OTF-S2";
  src: url("https://image.d-games-t-yoko.tokyo/data/genericImages/A-OTF-S2.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/*基本レイアウト--------------------------*/

body{ 
	position:relative;
	z-index: -99999;
	margin: 0;
	padding: 0;
	background: #000;
}

img{
	max-width: 100%;
	border-width: 0;
}


.pc_header{
	margin: 0;
	padding: 0;
	background: #fff;
}

.header{
	display: none;
}

.wrapper{
	clear: both;
	width: 100%;
	margin: 0;
	padding: 0;
}

.sp_bg_blank{
	display: block;
}

.main{
	overflow: hidden;
	clear: both;
	width:100%;
	margin: 0 auto 0 auto;
	padding: 0;
}



/****背景動画 ****************************************/


.bg_box{
	overflow: hidden;
	position: fixed;
	top: 0;
	z-index: -10000;
	width: 100%;
	height: 100vh;
}

.bg_video{
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
  	-webkit-transform: translate(-50%, -50%);
  	-moz-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
}

.bg_wrap{display: none;}



/****hero ****************************************/

.pc_hero{
	overflow: hidden;
	position:relative;
	margin:  0;
	padding: 0;
}

.sp_hero{display: none;}

.pc_hero img{
	display: block;
	margin: 0;
	padding: 0;
}

.pc_hero .video-box{
	overflow: hidden;
	top: 0;
	z-index: 0;
	width: 100%;
}

.pc_hero .video{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
  	-webkit-transform: translate(-50%, -50%);
  	-moz-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
}



.pc_hero .hero_blank{
	position: relative;
	z-index: 30;
}

.pc_hero .hero_chara_airi,
.pc_hero .hero_chara_kanon,
.pc_hero .hero_chara_naoko,
.pc_hero .hero_chara_suzu,
.pc_hero .hero_chara_runa,
.pc_hero .hero_chara_natsu,
.pc_hero .hero_chara_saaya,
.pc_hero .hero_chara_miku{
	position: absolute;
	top: 0;
	left: 0;
}

.pc_hero .hero_in{z-index: 22;}
.pc_hero .hero_chara_airi{z-index: 21; bottom: -10;}
.pc_hero .hero_chara_kanon{z-index: 20; bottom: -10;}
.pc_hero .hero_chara_naoko{z-index: 19;}
.pc_hero .hero_chara_suzu{z-index: 18;}
.pc_hero .hero_chara_runa{z-index: 18;}
.pc_hero .hero_chara_natsu{z-index: 17;}
.pc_hero .hero_chara_saaya{z-index: 16;}
.pc_hero .hero_chara_miku{z-index: 15;}


.pc_hero .hero_in{
	position: absolute;
	z-index: 30;
	left: 50%;
	bottom: 30px;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	transform: translateX(-50%) ;
}

.pc_hero .hero_in .logo{
	width: 500px;
	margin: 0 auto 0 auto;
	padding: 0;
	text-align: center;
}


.pc_hero .hero_in .hero_text{
	width: 574px;
	margin: 0 auto 0 auto;
	padding: 0;
	text-align: center;
}


.pc_hero .hero_in .hero_entry{
	position: relative;
	box-sizing: border-box;
	width: 900px;
	margin: 0 auto 0 auto;
	padding: 15px;
	/*border-radius: 15px;*?
	/*border: 6px solid #ff0b6d;*/
	/*background: rgba(0,0,0,0.5);*/
}

.pc_hero .hero_in .hero_entry .hero_entry_btn{
	display: block;
	position: relative;
	z-index: 40;
	width: 256px;
	margin: 0 auto 0 auto;
	padding: 5px;
	border: 0;
	background: none;
}

.pc_hero .hero_in .hero_entry .entry_note{
	position: relative;
	z-index: 40;
	width: 400px;
	margin: 0 auto 0 auto;
	padding: 0;
	color: #fff;
}

.sp_hero .heroSlider{
	display: none !important;
}


/***about****************************************/

.about{
	overflow: hidden;
	position:relative;
	margin:  0;
	padding: 0;
}

.about img{
	display: block;
	margin: 0;
	padding: 0;
}

.about_h2{
	width: 989px;
	margin: 15px auto 15px auto;
	padding: 0;
	text-align: center;
}

.about .about_pc{
	width: 44%;
	margin: 0 auto 0 auto;
	padding: 0;
}


.about .about_bg_naoko,
.about .about_bg_natus{
	position: absolute;
	bottom: 0;
	left: 0;
}

.about .about_bg_naoko{z-index: 20;}
.about .about_bg_natus{z-index: 20;}


.about .entry_btn{
	display: block;
	position: relative;
	z-index: 40;
	width: 256px;
	margin: 0 auto 0 auto;
	padding: 0;
	border: 0;
	text-align: center;
	background: none;
}

.about .entry_note{
	position: relative;
	z-index: 40;
	width: 400px;
	margin: 5px auto 30px auto;
	padding: 0;
	color: #fff;
}

.about_sp{display: none;}


/***system****************************************/

.system{
	margin: 0 0 30px 0;
	padding: 0;
}

.system_h2{
	width: 583px;
	margin: 0 auto 0 auto;
	padding: 20px 0 20px 0;
}

.system_pic{
	overflow: hidden;
	width: 800px;
	margin: 0 10px 0 10px 0;
	padding: 0;
	border-radius: 30px;
}

.system_pic img{
	display: block;
	margin: 0;
	padding: 0;
}

.system .slick-initialized .slick-slide
{
    display: block;
    margin: 0 10px 0 10px;
}


.system .prev-arrow,
.system .next-arrow{
	width: 100px;
	margin: 0;
	padding: 0;
}


.system .slick-slide{
	position: relative;
}

.system .slick-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 30px;
	background: rgba(255,255,255,0.6); 
}

.system .slick-center::after {
	background: none !important;
}


.systemSlider2{
	display: none !important;
}


.system .entry_btn{
	display: block;
	position: relative;
	z-index: 40;
	width: 256px;
	margin: 30px auto 0 auto;
	padding: 0;
	border: 0;
	text-align: center;
	background: none;
}

.system .entry_note{
	position: relative;
	z-index: 40;
	width: 400px;
	margin: 5px auto 30px auto;
	padding: 0;
	color: #fff;
}


/***story****************************************/

.story{
	overflow: hidden;
	position:relative;
	margin:  0;
	padding: 0;
}

.story_h2{
	width: 583px;
	margin: 0 auto 0 auto;
	padding: 20px 0 20px 0;
}


.story_in{
	display: flex;
	position:relative;
	margin: 0;
	padding: 0;
	z-index: 30;
}

.story_in .story_note{
	box-sizing: border-box;
	width: 30.5%;
	height: 625px;
	margin: 0 30px 0 50px;
	padding: 15px;
	border: 7px solid #fe2ecf;
	border-radius: 15px;
	background: rgba(0,0,0,0.5);
	box-shadow: 0px 0px 30px 3px #5c18fb;
}


.story_in .story_note p{
	margin: 0 0 5px 0;
	padding: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 20px; 
	font-family: "A-OTF-ShinMGoPro-Heavy";
	color: #fff;
}

.story_in .story_note .promotion{
	width: 100%;
	margin: 30px auto 0 auto;
	padding: 0;
	color: #fff;
}

.story_in .story_note .promotion_movie{
 	width: 100%;
  	aspect-ratio: 4 / 3; 
  	height: auto;
  	display: block;
}


.story_in .manga{
	width: 475px;
	margin: 0;
	padding: 0;
}


.story .story_bg_kanon{
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 20;
}

.story .story_bg_kanon img{
	display: block;
	margin: 0;
	padding: 0;
}

/***character****************************************/

.character{
	overflow: hidden;
	position:relative;
	margin:  0;
	padding: 0;
}

.chara_h2{
	width: 858px;
	margin: 0 auto 0 auto;
	padding: 20px 0 0 0;
}

.character .charaSlider{
	width: 100%;
	margin: 0;
	padding: 0;
}

.character .charaSlider .chara_pic{
	margin: 0;
	padding: 0;
}

.character .charaSlider .chara_pic img{
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

.character .prev-arrow,
.character .next-arrow{
	width: 100px;
	margin: 0;
	padding: 0;
}


.character .chara_tab{
	overflow: hidden;
	width: 100%;
	margin: -5px 0 0 0;
	padding: 15px 0 15px 0;
	background: rgba(0,0,0,0.8);
}

.character .thumbnail .slick-slide{
	width: 100px !important;
}


.character .chara_tab .thumbnail {
	width: 800px;
	margin: 0 auto 0 auto;
	padding: 0;
}

.thumbnail .slick-track {
  transform: unset !important;
}

.character .chara_tab .thumbnail .sub{
	overflow: hidden;
	width: 70px !important;
	margin: 0;
	padding: 0;
	border: 3px solid #5c18fb;
	border-radius: 15px;
}


/****pickup チン凸機能****************************************/

.pickup{
	position:relative;
	margin: 0;
	padding: 0;
	text-align: center;
}

.pickup .pickup_h2{
	width: 83%;
	margin: 0 auto 0 auto;
	padding: 20px 0 0 0;
}

.pickup .pickup_pc{
	margin: 0;
	padding: 0;
}

.pickup .pickup_pc img{
	display: block;
	margin: 0;
	padding: 0;
}

.pickup .pickup_sp{display: none;}


/***gallery****************************************/

.gallery{
	overflow: hidden;
	position:relative;
	margin:  0;
	padding: 0;
}

.gallery .gallery_h2{
	width: 723px;
	margin: 0 auto 0 auto;
	padding: 20px 0 0 0;
}

.gallery .gallerySlider{
	margin: 0 0 30px 0;
	padding: 0;
}

.gallery .gallery_pic{
	position: relative;
	margin:  0 10px 0 10px;
	padding: 0;
	width: 438px;
	background: #fff;
}

.gallery .prev-arrow,
.gallery .next-arrow{
	width: 100px;
	margin: 0;
	padding: 0;
}


.gallery .slick-slide{
	position: relative;
}

.gallery .gallerySlider2{
	display: none !important;
}

/*.gallery .slick-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,255,0.6); 
}

.gallery .slick-center::after {
	background: none !important;
}*/

/***appeal****************************************/

.appeal{
	overflow: hidden;
	position:relative;
	margin:  0;
	padding: 0;
}

.appeal .appeal_h2{
	width: 83%;
	margin: 0 auto 0 auto;
	padding: 20px 0 0 0;
}


.appeal .appeal_pc{
	position: relative;
	z-index: 30;
	width: 900px;
	margin: 0 auto 0 auto;
	padding: 0;
}

.appeal .appeal_sp{display: none;}

.appeal .appeal_bg_runa,
.appeal .appeal_bg_miku{
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 20;
	margin: 0;
	padding: 0;
}

.appeal .appeal_bg_runa img,
.appeal .appeal_bg_miku img{
	display: block;
	margin: 0;
	padding: 0;
}


.appeal .appeal_entry{

	box-sizing: border-box;
	width: 900px;
	margin: 0 auto 30px auto;
	padding: 15px;

}

.appeal .appeal_entry_sp{display: none;}

.appeal .appeal_entry .appeal_entry_btn_dl{
	margin: 0;
	padding: 5px;
	border: 0;
	background: none;
}


.appeal .appeal_entry .appeal_entry_btn{
	display: block;
	position: relative;
	z-index: 40;
	width: 256px;
	margin: 0 auto 0 auto; 
	padding: 5px;
	border: 0;
	background: none;
}



.appeal .appeal_entry .entry_note{
	position: relative;
	z-index: 40;
	width: 400px;
	margin: 5px auto 30px auto;
	padding: 0;
	color: #fff;
}

.appeal .appeal_text_sp,
.appeal .entry_btn_sp,
.appeal .entry_note_sp{display: none;}

/***info****************************************/


.info{
	overflow: hidden;
	position:relative;
	margin:  0;
	padding: 0 0 50px 0;
}

.info .info_in{
	position:relative;
	z-index: 30;
	width: 900px;
	margin: 0 auto 0 auto;
	padding: 0;
}

.info .info_in .app_icon{
	float: left;
	overflow: hidden;
	width: 200px;
	margin: 50px 0 50px 50px;
	padding: 0;
	border-radius: 22%;
}

.info .info_in .app_icon img{
	display: block;
	margin: 0;
	padding: 0;
}

.info .info_in .logo{
	float: right;
	width: 600px;
	margin: 50px 0 50px 0;
	padding: 0;
	text-align: center;
}

.info .info_in .app_info{
	width: 100%;
	margin: 0 0 40px 0;
	padding: 0;
	border-collapse: collapse;
	border-spacing: 0;
	background: rgba(255,255,255,0.8);
}

.info .info_in .app_info tr{
	border: 3px solid #000;
}

.info .info_in .app_info th{
	width: 25%;
	margin: 0;
	padding: 5px 0 5px 0;
	border: 3px solid #000;
	font-size: 18px;
	text-align: center;
	vertical-align:middle;
	color: #000;
	/*background: #f0f0f0;*/
}

.info .info_in .app_info td{
	width: 75%;
	margin: 0;
	padding: 0 0 0 15px;
	border: 3px solid #000;
	font-size:  18px;
	text-align: left;
	vertical-align:middle;
	color: #000;

}

.info .info_bg_saaya,
.info .info_bg_airi{
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 20;
	margin: 0;
	padding: 0;
}

.info .info_bg_saaya img,
.info .info_bg_airi img{
	display: block;
	margin: 0;
	padding: 0;
}


.info .entry_btn{
	display: block;
	position: relative;
	z-index: 40;
	width: 256px;
	margin: 0 auto 0 auto;
	padding: 0;
	border: 0;
	text-align: center;
	background: none;
}

.info .entry_note{
	position: relative;
	z-index: 40;
	width: 400px;
	margin: 5px auto 30px auto;
	padding: 0;
	color: #fff;
}



/***スクローラー****************************************/


.marquee_wrap{
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0;
	/*border-radius: 100px;*/
	border-top: 5px solid #9e05ff;
	border-bottom: 5px solid #9e05ff;
	background: rgba(0,0,0,0.9);
}

.marquee{
	overflow:hidden;
	position:relative;
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 5px 0 15px 0;
	/*border-radius: 100px;*/
	color: #fe2ecf;
}

.marquee p:after {
content:"";
white-space:nowrap;
padding: 0 50px 0 0;
}

.marquee p {
	display:inline-block;
	margin:0;
	padding: 0 0 0 2000px;
	font-size: 50px;
	font-weight: 700;
	font-family: "A-OTF-S2";
	white-space:nowrap;
	-webkit-animation-name:marquee;
	-webkit-animation-timing-function:linear;
	-webkit-animation-duration:30s;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-name:marquee;
	-moz-animation-timing-function:linear;
	-moz-animation-duration:30s;
	-moz-animation-iteration-count:infinite;
	-ms-animation-name:marquee;
	-ms-animation-timing-function:linear;
	-ms-animation-duration:30s;
	-ms-animation-iteration-count:infinite;
	-o-animation-name:marquee;
	-o-animation-timing-function:linear;
	-o-animation-duration:30s;
	-o-animation-iteration-count:infinite;
	animation-name:marquee;
	animation-timing-function:linear;
	animation-duration:30s;
	animation-iteration-count:infinite;
}

@-webkit-keyframes marquee {
  from   { -webkit-transform: translate(0%);}
  99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
  from   { -moz-transform: translate(0%);}
  99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee {
  from   { -ms-transform: translate(0%);}
  99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee {
  from   { -o-transform: translate(0%);}
  99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee {
  from   { transform: translate(0%);}
  99%,to { transform: translate(-100%);}
}



/****ふわふわ ****************************************/

.fuwafuwa{
  animation: fuwafuwa 3s infinite;
}

@keyframes fuwafuwa{
  0% { transform: translateY(0) }
  50% { transform: translateY(-10px) }
  100% { transform: translateY(0) }
}

.fuwafuwa2{
  animation: fuwafuwa2 2s infinite;
}

@keyframes fuwafuwa2{
  0% { transform: translateY(0) }
  50% { transform: translateY(-15px) }
  100% { transform: translateY(0) }
  }

.fuwafuwa3{
  animation: fuwafuwa3 2s infinite;
}

@keyframes fuwafuwa3{
  0% { transform: translateY(20px) }
  50% { transform: translateY(30px) }
  100% { transform: translateY(20px) }
  }


.fuwafuwa4{
  animation: fuwafuwa3 3s infinite;
}

@keyframes fuwafuwa4{
  0% { transform: translateY(20px) }
  50% { transform: translateY(30px) }
  100% { transform: translateY(20px) }
  }


  
.fuwafuwa5{
  animation: fuwafuwa5 2s infinite;
}

@keyframes fuwafuwa5{
  0% { transform: translateY(10px) }
  50% { transform: translateY(30px) }
  100% { transform: translateY(10px) }
  }


  
.fuwafuwa6{
  animation: fuwafuwa3 3s infinite;
}

@keyframes fuwafuwa6{
  0% { transform: translateY(10px) }
  50% { transform: translateY(60px) }
  100% { transform: translateY(10px) }
  }


.fuwafuwa7{
  animation: fuwafuwa7 4s infinite;
}

@keyframes fuwafuwa7{
  0% { transform: translateY(-20px) }
  50% { transform: translateY(0px) }
  100% { transform: translateY(-20px) }
}


.fuwafuwa8{
  animation: fuwafuwa8 3s infinite;
}

@keyframes fuwafuwa8{
  0% { transform: translateY(-30px) }
  50% { transform: translateY(-15px) }
  100% { transform: translateY(-30px) }
}


.delay01{animation-delay: 0.5s;}
.delay02{animation-delay: 1.0s;}
.delay03{animation-delay: 1.5s;}
.delay04{animation-delay: 2.0s;}
.delay05{animation-delay: 2.5s;}
.delay06{animation-delay: 3.0s;}
.delay07{animation-delay: 3.5s;}


/****footer ****************************************/

.footer{
	overflow: hidden;
	clear: both;
	margin: 0;
	padding: 50px 0 50px 0;
	background: rgba(0,0,0,0.8);
}


.footer_in{
	clear: both;
	width: 960px;
	margin: 0 auto 0 auto;
	padding: 0;
}


.footer ul{
	list-style: none;
	display: flex;
	margin: 0;
	padding: 0;
}

.footer ul li{
	margin: 0;
	padding: 0;
	font-size: 1.8rem;
	font-family: "A-OTF-ShinMGoPro-Heavy";
	text-align: center;
}

.footer ul li a{
	display: block;
	margin: 0;
	padding: 15px;
	text-decoration: none;
	color: #fff;
}

.footer .copy{
	clear: both;
	margin: 0 0 0 0 ;
	padding: 0 0 30px 0;
	font-size: 30px;
	text-align: center;
	color: #fff;
}

}