@charset "utf-8";

/***スマホCSS*********************************************************/



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

@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{ 
	margin: 0;
	padding: 0;
}

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


.pc_header{
	display: none;
}

.header{
	background: #fff;
}

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

.main{
	overflow: hidden;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}


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


.bg_box{
	display: none;
}

.bg_box video{
	display: none;
}


.bg_wrap{
	overflow: hidden;
	position: fixed;
	top: 0;
	z-index: -9999;
	width: 100%;
	min-height: 100dvh;
}

.bg_movie{
	object-fit: cover;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%);
}



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

.pc_hero{
	display:none;
}

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

.movie-box{
	position: relative;
	z-index: -1;
	top: 0;
	margin: 0;
	padding: 0;
}

.movie-box .movie{
	display: block;
	block-size: fit-content;
	object-fit: cover;
	width: 100%;
  	height: 100%;
	margin: 0;
	padding: 0;
}

.sp_hero .heroSlider{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 15;
	width: 100%;
}

.sp_hero .heroSlider .hero_pic{
	margin: 0;
	padding: 0;
}

.sp_hero .heroSlider .hero_pic img{
	display: block;
	margin: 0;
	padding: 0;
}

.sp_hero .sp_hero_text{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	margin: 0;
	padding: 0;
	width: 100%;
}

.sp_hero .sp_hero_shadow{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	margin: 0;
	padding: 0;
	width: 100%;
}

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

.sp_hero .entry_note{
	position: relative;
	z-index: 40;
	width: 96%;
	margin: 5px auto 15px auto;
	padding: 0;
}

.sp_hero .entry_note .checkbox{
	margin: 0;
	padding: 0;
}


.sp_hero .checkbox_text label{
	margin: 0;
	padding: 0;
	color: #fff;
}

.sp_hero .entry_note .dealer_name{
	margin: 0;
	padding: 0;
	color: #fff;
}

.pc_hero .hero_pic{
	display: none;
}

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

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

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

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

.about_pc{display: none;}

.about .about_sp{
	margin: 0;
	padding: 0;
}


.about .about_bg_naoko,
.about .about_bg_natus{
	display: none;
}

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


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

.about .entry_note{
	width: 96%;
	margin: 5px auto 15px auto;
	padding: 0;
	color: #fff;
}



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

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

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

.systemSlider{display: none !important;}


.system_pic{
	display: none;
	overflow: hidden;
	margin: 0 10px 0 10px 0;
	padding: 0;
	border-radius: 5%;
}

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

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


.system_photo{
	overflow: hidden;
	margin: 0 10px 0 10px 0;
	padding: 0;
	border-radius: 5%;
}

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

.system .entry_note{
	width: 96%;
	margin: 5px auto 15px auto;
	padding: 0;
	color: #fff;
}



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

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

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


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

.story_in .story_note{
	overflow: hidden;
	box-sizing: border-box;
	width: 96%;
	margin: 0 auto 5px auto;
	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;
	padding: 0;
	font-size: 1.0rem;
	font-weight: 700;
	font-family: "A-OTF-ShinMGoPro-Heavy";
	color: #fff;
}

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

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


.story_in .manga{
	width: 96%;
	margin: 0 auto 0 auto;
	padding: 0;
}


.story .story_bg_kanon{
	display: none;
	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: 80%;
	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: 40px;
	margin: 0;
	padding: 0;
}

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


.character .thumbnail .slick-list{padding: 0;}

.character .thumbnail .slick-slide{
	box-sizing: border-box;
	width: 24% !important;
	margin: 0 1% 0 0;
	padding: 0;
}


.character .chara_tab .thumbnail {
	margin: 0;
	padding: 0;
}

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

.character .chara_tab .thumbnail .sub{
	width: 100% !important;
	margin: 0;
	padding: 0;
}


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

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

.pickup .pickup_h2{
	display: none;
}


.pickup .pickup_pc{display: none;}


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

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

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

.gallery .gallerySlider{
	display: none !important;
	margin: 0 0 30px 0;
	padding: 0;
}

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

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

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

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

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

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

.appeal .appeal_h2{display: none;}

.appeal .appeal_bg_runa,
.appeal .appeal_bg_miku{display: none;}

.appeal .appeal_entry{display: none;}

.appeal_text_sp{
	margin: 30px 0 15px 0;
	padding: 0;
}

.appeal .appeal_entry_sp{
	margin: 0;
	padding: 0;
}

.appeal .entry_btn_sp{
	display: block;
	margin: 0 auto 0 auto;
	padding: 0;
	border: 0;
	text-align: center;
	background: none;
}


.appeal .entry_note_sp{
	clear: both;
	width: 96%;
	margin: 0  0 15px 0;
	padding: 0;
	color: #fff;
}

.appeal .appeal_pc{
	display: none;
}



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

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

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

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

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

.info .info_in .logo{
	width: 80%;
	margin: 0 auto 50px auto;
	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: 10px 0 10px 0;
	border: 3px solid #000;
	font-size: 1.0rem;
	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: 1.0rem;
	text-align: left;
	vertical-align:middle;
	color: #000;

}

.info .info_bg_saaya,
.info .info_bg_airi{
	display: none;
	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;
	width: 256px;
	margin: 0 auto 0 auto;
	padding: 0;
	border: 0;
	text-align: center;
	background: none;
}

.info .entry_note{
	width: 96%;
	margin: 0 auto 15px auto;
	padding: 0;
	color: #fff;
}



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


.marquee_wrap{
	overflow: hidden;
	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{
	position:relative;
	margin: 0 auto 0 auto;
	padding: 5px 0 5px 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;
	font-size: 1.2rem;
	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%);}
}

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

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


.footer_in{
	clear: both;
	width: 96%;
	margin: 0 auto 0 auto;
	padding: 0;
}


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

.footer ul li{
	width: 48%;
	margin: 0 0 5px 0;
	padding: 0;
	font-size: 1.0rem;
	font-family: "A-OTF-ShinMGoPro-Heavy";
	text-align: center;
}

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

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


}