@charset "utf-8";
body{background:url(/nyap/sp/img/main_bg.jpg);}

/* header */
header{background:url(/nyap/sp/img/header_bg.jpg) center center no-repeat; -moz-background-size:100% auto; background-size:100% auto; height: 570px; position: relative;}
.header_wp{background:url(/nyap/sp/img/header_bg2.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; width: 100%; max-width: 1000px;  -moz-background-size: 100% auto; background-size: 100% auto; margin: 0 auto; }
.header_img{width: 100%; max-width: 1000px; max-height: 585px; background:url(/nyap/sp/img/header_img.png) top center no-repeat; margin: 0 auto; -moz-background-size: 100% auto; background-size: 100% auto; padding-bottom: 43%;}

#nav-drawer{float: left;}
.tw_box{width: calc(20% - 10px); max-width: 87px; float: right; padding: 0 5px;}

@media screen and (max-width: 1200px) {
header{background:url(/nyap/sp/img/header_bg.jpg) top center no-repeat; -moz-background-size:110% auto; background-size:110% auto; height: auto;}
.header_img{width: 100%; max-width: 1000px; padding-bottom: 43%;}
}

@media screen and (max-width: 640px) {
.header_img{width: 100%; max-width: 1000px; max-height: 585px; background:url(/nyap/sp/img/header_img_sp.jpg) top center no-repeat; margin: 0 auto; -moz-background-size: 100% auto; background-size: 100% auto; padding-bottom: 90%;}
}

/* 動画 */
.character_list1{ width : 100%; background: url(/nyap/sp/img/character_list1.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.character_list2{ width : 100%; background: url(/nyap/sp/img/character_list2.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.character_list3{ width : 100%; background: url(/nyap/sp/img/character_list3.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.character_list4{ width : 100%; background: url(/nyap/sp/img/character_list4.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.character_list5{ width : 100%; background: url(/nyap/sp/img/character_list5.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.character_list6{ width : 100%; background: url(/nyap/sp/img/character_list6.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.character_list7{ width : 100%; background: url(/nyap/sp/img/character_list7.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.character_list8{ width : 100%; background: url(/nyap/sp/img/character_list8.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.character_list9{ width : 100%; background: url(/nyap/sp/img/character_list9.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }

.game_list1{ width : 100%; background: url(/nyap/sp/img/game_list1.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.game_list2{ width : 100%; background: url(/nyap/sp/img/game_list2.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.game_list3{ width : 100%; background: url(/nyap/sp/img/game_list3.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }

@media screen and (max-width: 640px) {
.character_list1{ width : 100%; background: url(/nyap/sp/img/character_list1_sp.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.character_list2{ width : 100%; background: url(/nyap/sp/img/character_list2_sp.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.character_list3{ width : 100%; background: url(/nyap/sp/img/character_list3_sp.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.character_list4{ width : 100%; background: url(/nyap/sp/img/character_list4_sp.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.character_list5{ width : 100%; background: url(/nyap/sp/img/character_list5_sp.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.character_list6{ width : 100%; background: url(/nyap/sp/img/character_list6_sp.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.character_list7{ width : 100%; background: url(/nyap/sp/img/character_list7_sp.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.character_list8{ width : 100%; background: url(/nyap/sp/img/character_list8_sp.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.character_list9{ width : 100%; background: url(/nyap/sp/img/character_list9_sp.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }

.game_list1{ width : 100%; background: url(/nyap/sp/img/game_list1_sp.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.game_list2{ width : 100%; background: url(/nyap/sp/img/game_list2_sp.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.game_list3{ width : 100%; background: url(/nyap/sp/img/game_list3_sp.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; }



}



/* cont2 */
.cont2_box_bg{background:#8dd1fe;}
.cont2_box_bg2{background:url(/nyap/sp/img/cont2_bg.jpg) center bottom repeat-x; width: 100%; margin: 0 auto;}
.cont2_box{width: 95%; max-width: 1000px; margin: 0 auto;}
.cont2_box_left{width: 90%; max-width: 619px; margin: 0 auto; /*  width: 37%; float: right; */ padding: 1% 0 5% 0; animation: horizontal 1s ease-in-out infinite alternate;}
.cont2_box_right{width: 100%; max-width: 600px; margin: 0 auto; /* float: left; */}

.cont2_btn{width: 95%; max-width: 290px; margin: 0 auto; padding-bottom: 10px;}


.fuwafuwa {
	-webkit-animation-name:fuwafuwa;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease;
	
	-moz-animation-name:fuwafuwa;
	-moz-animation-duration:2s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function:ease;
}

@-webkit-keyframes fuwafuwa {
	0% {-webkit-transform:translate(0, 0);}
	100% {-webkit-transform:translate(0, 50px);}
}
@-moz-keyframes fuwafuwa {
	0% {-moz-transform:translate(0, 0);}
	100% {-moz-transform:translate(0, 50px);}
}

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

}

@media screen and (max-width: 640px) {
.cont2_box_bg{background:#92d0fa;}
.cont2_box_left{width: 100%; max-width: 640px; float: none; padding: 1% 0 5% 0; margin: 0 auto;  overflow: hidden;}
.cont2_box_right{width: 95%; float: none; padding: 1% 0 5% 0;}
.cont2_box_bg2{background:url(/nyap/sp/img/cont2_bg_sp.jpg) 0 top no-repeat;  -moz-background-size: 100% auto; background-size: 100% auto; width: 100%; max-width: 1500px; margin: 0 auto;}


.cont2_btn{width: 60%;}
}


@media screen and (max-width: 640px) {
.cont2_box_bg2{background:url(/nyap/sp/img/cont2_bg_sp.jpg) top center no-repeat;  -moz-background-size: auto 120%; background-size: auto 120%; width: 100%; margin: 0 auto;}



}



/* swiperbox */
.swiperbox01{background:url(/nyap/sp/img/header_bg.jpg) top center no-repeat; -moz-background-size:150% auto; background-size:150% auto; height: auto; padding: 5% 0;}
.swiperbox02{background:url(/nyap/sp/img/header_bg.jpg) top center no-repeat; -moz-background-size:150% auto; background-size:150% auto; height: auto; padding: 5% 0;}
@media screen and (max-width: 1300px) {
.swiperbox01{background:url(/nyap/sp/img/header_bg.jpg) top center no-repeat; -moz-background-size:220% auto; background-size:220% auto; height: auto;}
.swiperbox02{background:url(/nyap/sp/img/header_bg.jpg) top center no-repeat; -moz-background-size:220% auto; background-size:220% auto; height: auto;}
}
.swiper-container{width: 95%; max-width: 1000px; margin: 0 auto; }

.swiperbox01 .main { margin-bottom: 10px;}
.swiperbox01 .thumbnail .swiper-slide { cursor: pointer; opacity: .5;}
.swiperbox01 .thumbnail .swiper-slide-active { opacity: 1;}
.swiperbox01 .thumbnail .swiper-wrapper{ margin-left: calc(-42% - 0px);}


.swiper-slide{text-align: center;}

.img_waku{border: solid 5px #fff; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; overflow: hidden;}


@media screen and (max-width: 640px) {
.swiperbox01 .thumbnail .swiper-wrapper{ margin-left: calc(-39% - 0px);}
.swiperbox01{background:url(/nyap/sp/img/header_bg.jpg) top center no-repeat; -moz-background-size:300% auto; background-size:300% auto; height: auto;}
.img_waku{ border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;}
.swiper-button-prev,
.swiper-button-next { position: absolute; top: auto !important; bottom: 40%; filter:alpha(opacity=50); -moz-opacity:0.50; -khtml-opacity:0.50; opacity:0.50;}
.swiper-button-prev:hover,
.swiper-button-next:hover { filter:alpha(opacity=1); -moz-opacity:1; -khtml-opacity:1; opacity:1;}


.swiperbox02{background:url(/nyap/sp/img/header_bg.jpg) top center no-repeat; -moz-background-size:auto 100%; background-size:auto 100%; height: auto;}

}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled{ filter:alpha(opacity=0) !important; -moz-opacity:0 !important; -khtml-opacity:0 !important; opacity:0 !important;}





hr.line{margin:0; padding:0;  height: 3px; border: 0;  background: rgb(241,181,74); background: -moz-linear-gradient(left,  rgba(241,181,74,1) 0%, rgba(254,254,254,1) 57%, rgba(35,74,217,1) 100%); background: -webkit-linear-gradient(left,  rgba(241,181,74,1) 0%,rgba(254,254,254,1) 57%,rgba(35,74,217,1) 100%); background: linear-gradient(to right,  rgba(241,181,74,1) 0%,rgba(254,254,254,1) 57%,rgba(35,74,217,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1b54a', endColorstr='#234ad9',GradientType=1 ); }


/*---------------------------------------------
  Hamburger Navigation
  ---------------------------------------------*/
.hamburger-nav-menu-btn{width: 19%; max-width: 152px; padding-top: 1%; padding-bottom:1%;  float: left;}
header button { padding: 0; border: none; background: transparent; width: 100%; max-width: 152px; cursor:pointer; display: block;}
header button img { }
.hamburger-nav-toggle-btn { margin: 0 2% 2% 2%;}
.hamburger-nav-list {
	display: none;
	list-style: none;
	padding: 0;
	background: #c9c9c9;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	width: 90%;
	max-width: 900px;
	background: #fef9eb;
	box-shadow: 0 0 0 4px #572f0f, 0 0 0 6px #f9f8df;
	 border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	overflow: hidden;
	padding: 5px 0;
	z-index: 999;
	

}
.hamburger-nav-list-wp{
	background: url(/nyap/sp/img/wv-bg-icon1.png) left top no-repeat,url(/nyap/sp/img/wv-bg-icon2.png) right top no-repeat
	,url(/nyap/sp/img/wv-bg-icon3.png) left bottom no-repeat,url(/nyap/sp/img/wv-bg-icon4.png) right bottom no-repeat;

}

.hamburger-nav-title{ width: 50%; max-width: 287px; margin: 0 auto;}
.hamburger-nav-icon{width: 95%; max-width: 800px; margin: 0 auto;}
.hamburger-nav-icon li{width: 25%; float: left;}

.nav-advance-banner{width: 95%; max-width: 640px; margin: 0 auto;}

.hamburger-nav-sns{width: 95%; max-width: 640px; margin: 0 auto;}

@media screen and (max-width: 640px) {
.hamburger-nav-toggle-btn { margin: 2% 2% 5% 2%;}
.hamburger-nav-icon li{width: 33%; float: left;}
}


/* ------------------------------ */

.tabimgbox{ width: 95%; max-width: 1000px; margin: 0 auto; display: none; }


/*タブを横並べに*/
.tabimgbox_btn_box {
  display: flex;
  justify-content: space-around;
   width: 95%; max-width: 1000px; margin: 0 auto;
}
/*通常時のタブ装飾*/
.tabimgbox_btn {
filter:alpha(opacity=65);
-moz-opacity:0.65;
-khtml-opacity:0.65;
opacity:0.65;
  border: none;
  padding: 0;
 cursor: pointer;
  display: inline-block;
  flex: 1;
  padding-bottom: 20px;
  padding-top: 20px;
  position: relative;
  transition: all .3s ease-in-out;
  vertical-align: middle;
background-color: transparent;
}
/*カレントとホバー時のタブ装飾*/
.tabimgbox_btn:hover,
.tabimgbox_btn.is-active {
filter:alpha(opacity=1);
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;

}





/* ------------------------------ */

.banner_right_box{width: 49%; margin: 0.5%;}
.banner_left_box{width: 48%; margin: 0.5%;}

.banner_left_box_wp{ background: url(/nyap/sp/img/start_banner.png) left top no-repeat; padding: 96.5% 0 3% 0; -moz-background-size:100% auto; background-size:100% auto; }


.banner_main_box{width: 95%; max-width: 1000px; padding: 15px 0; margin: 0 auto;}
.banner_main_box a{display:block; padding-bottom: 12px;}

.tw_list_box{width: 90%; max-width: 640px; padding: 5% 0; margin: 0 auto;}
.tw_list_title{width: 90%; max-width: 682px; padding: 5% 0; margin: 0 auto;}

@media screen and (max-width: 640px) {
.banner_right_box{width: 99%; margin: 0.5% 0;}
.banner_left_box{width: 99%; margin: 0.5% 0; }
}