@charset "utf-8";
/* CSS Document */





html {
  overflow: auto;
  min-height: 100%;
  position: relative;
}
body {

  min-height: 100%;
font-family: 'Noto Serif JP', serif;
  	line-height:0;
	color:#434343;
	overflow-x: hidden;
	padding:0;
}


p{
	line-height:1.8;

	}	


	
a{
	color:#0e0e0e;
	text-decoration:underline;
	transition:0.6s ;
		}
a:hover{
	color:#A2E0F0;
	}
	
	
/* ---------------------------- フレーム ---------------------------------*/


#loader {
	text-align:center;
	width: 44px;
	height: 44px;
	position: fixed;
	_position: absolute; /* IE6対策 */
	top:0;
	bottom:0;
  left: 0;
  right: 0;
  margin:auto;
	z-index: 950;
}
#loader img{
	width:100%;
	height:auto;
	}
#fade {
	width: 100%;
	min-height:100%;
	height:100%;
	background-color:#767676;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 900;
}


/* ---------------------------- グロナビ -----------------------------------*/

.g-cont{
background-image:url("../images/silver_40.png");
padding:10px;
margin-top: 3%;
width: 100%;
  top: 0;
  left: 0;
}


.fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  margin-top:0;
}

ul#g-menu{
	position:relative;
	text-align:center;
	margin:auto;
	z-index:500;
	width:100%;
	max-width:1220px;
	}

	


ul#g-menu li{
	display:inline-block;
	margin:0 3px;
	width:18%;
	}	
	
ul#g-menu li a{
	text-decoration:none;
}
ul#g-menu li a:hover{
	  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: "alpha(opacity=60)";
}
	
ul.headlist{
float: left;
text-align: center;
  margin:0;
  padding:0;
  list-style:none;
  font-size:0;
}
ul.headlist li{
display:inline-block;
margin: 0 3px;

}
ul.headlist li img{
width:100%;
height: auto;
}
ul.headlist li:first-child{
width:57%;
}
ul.headlist li:last-child{
width:38%;
}

ul.headlist li a{
text-decoration: none;
margin: 0;
}
ul.headlist li a:hover{
  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: "alpha(opacity=60)";
}
.hb01 a{
background: #4c422d;
}
.hb02 a{
background: #4b4948;
}
.hb03 a{
background: #84682d;
}




/* ---------------------------- コンテンツ -----------------------------------*/

.cont1220{
max-width:1220px;
width:100%;
margin: 0 auto;
}

.cont927{
max-width:927px;
width:100%;
margin: 0 auto;
}

#main-Container{
	width:100%;
	line-height:0;
	max-width:1980px;
	margin: 0 auto;
	text-align:center;
	padding:0;

	}
	
#main-Container img{
width:100%;
height: auto;
}

#first-cont{
background-image:url("../images/bg_first.jpg") ;
background-repeat: no-repeat;
background-size:cover;
background-position: top center;
}
#first-cont h1{
width:100%;
max-width: 850px;
margin:0 auto 0 auto;
padding-top: 16%;
}
.movie_thumbnail{
width:100%;
max-width:350px;
margin:0 auto 0 auto;
padding-top:0;
}

#second-cont{
background-image:url("../images/bg_second.jpg") ;
background-repeat: no-repeat;
background-size:cover;

background-position: top center;
position: relative;
box-sizing: border-box;
padding:12% 0 30% 0;
}
.second-txt{
width:100%;
max-width: 600px;
margin: 0 auto;
box-sizing: border-box;
padding:12% 0 35% 0;
}
.intro-txt{
width:100%;
max-width: 800px;
margin: 0 auto;
box-sizing: border-box;
padding:12% 0 0 0;
}
@media screen and (max-width: 1580px) {
#second-cont{
background-size:110%;

}
.second-txt{
padding:12% 0 22% 0;
}

.intro-txt{
width:90%;
max-width: 700px;
}
}
@media screen and (max-width: 1380px) {
#second-cont{
background-size:120%;
}
}
@media screen and (max-width: 1150px) {
#second-cont{
background-size:130%;
}
}
@media screen and (max-width: 1080px) {
#second-cont{
background-size:140%;
}
.intro-txt{
max-width: 600px;
}
}
@media screen and (max-width: 880px) {
	
ul.headlist{
position:absolute;
top:0;
width:240px;
}
#first-cont{
padding-top: 140px;

}

#second-cont{
background-size:180%;
}
.second-txt{
width:85%;
}
#third-cont h2{
margin-top: 5%;
}
}


#cont{
line-height: 1.6;
color:#4c4948;
padding:60px 0;
box-sizing: border-box;
}

#cont img{
width:100%;
height: auto;
}


h2{
width:100%;
max-width:260px;
height: auto;
margin: 0 auto;
}

.third-cont{

}
.charaList {
background:url("../images/bg_chara_obi.jpg") repeat-x;
width:100%;
margin:4% 0;

}
.charaList ul{
text-align: center;
font-size: 0;
width:100%;
max-width:940px;
margin: 0 auto;
}
.charaList ul li{
display: inline-block;
margin: 0 1px;
width:32%;

}

.chara-cont{
background-image: url("../images/bg_chara.jpg");
background-repeat: no-repeat;
width:100%;
background-size: 35%;
background-position: top center;
line-height: 1.5;
}



/* ---------------------------- キャンペーン -----------------------------------*/	
#fourth-cont{
margin-top:6%;
background-image: url("../images/bg_campaign.jpg");
background-repeat: no-repeat;
background-position: top center;
background-size: 80%;
}
.camp_txt{
width:100%;
max-width:820px;
margin: 20px auto 0 auto;
}
ul.cam_List{
width:100%;
text-align: center;
margin: 25px 0;
}
ul.cam_List li{
vertical-align: top;
display: inline-block;
width:46%;
margin:8px 8px 15px 8px;
}
ul.cam_List .mid{
width: 100%;
background-image: url("../images/line_mid.jpg");
background-repeat:repeat-y;
background-size: 100%;
padding:0 30px;
box-sizing: border-box;
}
ul.cam_List h3{
color: #870002;
font-size:20px;
line-height: 1.5;
font-weight: bold;
}
.camImg{
width:100%;
max-width:90%;
margin:15px auto 25px auto;
}
.camImg img{
border:1px solid #6d141a;
}
.camTxt{
font-size:14px;
line-height: 1.6;
text-align: left;
margin: 0 auto;
color: #0D0D0D;
height: 100px;
}

.btn_detail{
width:100%;
max-width:160px;
margin: 25px auto 0 auto;
}
.btnCamp{
width:100%;
max-width:300px;
margin: 50px auto 0 auto;
}


@media screen and (max-width: 880px) {
#fourth-cont{
margin-top:10%;
background-size:160%;
}
ul.cam_List li{
width:47%;
margin:2px 2px 8px 2px;
}
ul.cam_List .mid{
padding:0 16px 0 15px;
}
.camImg{
max-width:98%;
margin:8px auto 13px auto;
}
ul.cam_List h3{

font-size:16px;

}
.camTxt{
font-size:12px;
height: auto;
padding-bottom: 10px;
}
.btn_detail{
max-width:130px;
margin: 10px auto 0 auto;
}
.btnCamp{
max-width:250px;
margin: 30px auto 70px auto;
}

}


/* ---------------------------- スペシャル -----------------------------------*/	

#fifth-cont{
margin-top:6%;

}

.bg_navy{
background-color: #17171e;
background-image: url("../images/maho.png");
background-repeat: no-repeat;
background-position: top center;
background-size: 35%;
padding-bottom: 5%;
}
.bg_azuki{
background-color: #6d141a;
background-image: url("../images/maho.png");
background-repeat: no-repeat;
background-position: top center;
background-size: 35%;
padding-bottom: 5%;
}
#fifth-cont h3{
margin:0 auto;
padding: 5% 0 3% 0;
width:100%;
max-width:210px;
}
ul.wallpaper-list{
text-align: center;
}
ul.wallpaper-list li{
display: inline-block;
width: 23%;
}
ul.wallpaper-list li p{
font-size: 16px;

}
ul.wallpaper-list li a{
color: #FFF;
}
ul.wallpaper-list li img{
border: 1px solid #FFF;
margin-bottom: 7px;
}
.massage{
width:100%;
max-width:750px;
margin: 0 auto;
}


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


#fifth-cont{
margin-top:10%;
}
.bg_navy{
background-size: 60%;
}
#fifth-cont h3{
padding:10% 0 5% 0;
max-width:160px;
}

ul.wallpaper-list li{
width:47%;
}
ul.wallpaper-list li p{
font-size: 14px;
}


}


/* ---------------------------- スワイパー -----------------------------------*/	

#thumbs {
    height: 10%;
    box-sizing: border-box;
    padding: 10px 0;
	margin-bottom: 4%;
}
#thumbs .swiper-slide {
    width:5%;
    height: auto;
    opacity: 0.5;
    cursor:pointer;
}
#thumbs .swiper-slide:active {
    cursor: grabbing;
}
#thumbs .swiper-slide-active {
    opacity: 1;
}



.swiper-slide img{
max-width:100% !important;
width:auto !important;
height: auto;
}
.swiper-slide h3{
width:100%;
text-align: left;
padding-left: 10px;
padding-bottom: 8px;
}
.bg_chara-obi{
width:100%;
background-color: #6c1319;
}
.chara-obi-inner{
position: relative;
max-width: 960px;
width:100%;
margin: 0 auto;
}
.bg_chara-obi .charZenshin{
position: absolute;
bottom:-150px;
right:0;
}
.bg_chara-obi .charTXT{
position: absolute;
bottom:8px;
left:10px;
}
.subInfo{
width:100%;
max-width:960px;
margin: 0 auto;
padding:15px 10px;
box-sizing: border-box;
}
.subInfo p{
text-align: left;
font-size: 15px;
line-height:2;
font-weight:bold;
}
.s_skil{
width:100%;
max-width: 400px;
margin-top: 15px;
}

ruby{
	line-height:1.2;
	}
.subInfo p rt{
	transform:scale(0.8) !important;
	}
@media screen and (max-width: 1340px) {
#thumbs .swiper-slide {
    width:8%;

}
}
@media screen and (max-width: 880px) {
#thumbs .swiper-slide {
    width:20%;

}



.bg_chara-obi{
background-color:inherit;
}
.bg_chara-obi .charZenshin{
position:relative;
bottom:0;
}
.swiper-slide h3{
width:73%;

}
.chara-obi-inner{
height: 350px;
}
.subInfo p{
font-size: 12px;
line-height:1.5;
}
.chara-cont{
background-image: none;

}

}
	
	
/* ---------------------------- /スワイパー -----------------------------------*/	


/* ---------------------------- フッター -----------------------------------*/	

#footer{
width:100%;
padding:45px 0;
	text-align:center;
	background-color: #e6e6e7;
	color: #595757;
	box-sizing: border-box;
	}
#footer p{
font-size: 14px;
}
#footer img{
	width:100%;
	height:auto;
	}


	
ul.sList {
text-align: center;
width:200px;
margin: 0 auto;
}
ul.sList li{
display: inline-block;
width:30%;
}
.or_banner{
width:100%;
max-width:200px;
margin:15px auto 0 auto;
}
.cr{
width:100%;
max-width:440px;
margin: 0 auto;
padding:15px 0 30px 0;
}

.footList{
text-align: center;
margin: 25px auto 10px auto;;
font-size: 0;
}
.footList li{
display: inline-block;
padding: 0 20px;
line-height: 1.5;
margin: 0;
}
.footList li a{
color: #1F1F1F;
text-decoration: none;
font-size: 14px;
}
.footList li:first-child{
border-right: 1px solid #4A4A4A;
}
	
	
	
	
.ds_pcOnly{
	display:block;
	}	
.ds_pc-inline{
	display:inline-block;
	}
.ds_pc{
	display:block;
	}
.ds_tab{
	display:none;
	}
.ds_sp{
		display:none;
		}



.btn_top_scrl{
	position:fixed;
	width:74px;
	height:72px;
	z-index: 100;
	bottom:40px;

	}



.maxImg img{

	width:100%;
	height:auto;
	}	
.maxSize{
max-width: 100%;
height: auto;
}



.alertTXT{
font-size: 13px;
}





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

	.ds_pcOnly{
	display:none;
	}	
	.ds_pc{
		display:block;
		}
	.ds_tab{
		display:block;
		}
	.ds_sp{
		display:none;
		}
	.ds_pc-inline{
	display:inline-block;
	}

		
}	

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



#main-Container{

	opacity: 1;
	}
.cont1220{
padding:0 10px;
box-sizing: border-box;
}

.g-cont{
position:fixed;
margin-top:0;
	top:0;
  left:0;
  margin:0;
  width: 100%;
  padding:50px 0 15px 0;
  -webkit-transform: translateY(-450px);
  transform: translateY(-450px);
  -webkit-transition:ease .5s;
  transition:ease .5s;
  z-index:300;
  box-sizing: border-box;
		}
		
ul#g-menu{
font-size: 0;
text-align: center;
}
ul#g-menu li{
width:48%;
padding:4px 0;
box-sizing: border-box;
		}	

ul#g-menu li img{
width:100%;
height: auto;
}

h2{
max-width:220px;

}




.drbtn {
  position: fixed;
  top:10px;
  right: 10px;
  width: 41px;
  height: 41px;
  -webkit-transition:ease .5s;
  transition:ease .5s;
  cursor:pointer;
  align-items: flex-end;
  display: flex;
  justify-content: center;
  font-size: 10px;
background: #651806;
  z-index: 750;
}
	
.hambarg {
  position: absolute;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  height: 4px;
  width: 30px;
  background: #FFF;
  -webkit-transition: ease .5s;
  transition: ease .5s;
}
.hambarg:nth-child(1) {
    top: 30%;
    left: 50%;
}
.hambarg:nth-child(2) {
    top: 50%;
    left: 50%;
}
.hambarg:nth-child(3) {
    top: 70%;
    left: 50%;
	}	
	
	

.g-cont.action {
  -webkit-transform:translateX(0);
  transform:translateX(0);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
 




.drbtn.action .hambarg:nth-child(1) {
    top: 50%;
    -webkit-transform: translate(-50%,-50%) rotate(45deg);
    transform: translate(-50%,-50%) rotate(45deg);
  }
.drbtn.action .hambarg:nth-child(2) {
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    opacity: 0;
  }
.drbtn.action .hambarg:nth-child(3) {
    top: 50%;
    -webkit-transform: translate(-50%,-50%) rotate(-45deg);
    transform: translate(-50%,-50%) rotate(-45deg);
  }

.gaiyouList dt{
	width:100% !important;
	clear:both;
	float:none;
	margin-bottom:2px;
	padding-bottom:2px;
}
.gaiyouList dd{
	width:100% !important;
	float:none;
	padding-left:20px;

}	
	
#btnTicket{
	width:110px;
	height:110px;
	}	


		
	
	.ds_pcOnly{
	display:none;
	}	
	.ds_pc{
		display:none;
		}
	.ds_tab{
		display:none;
		}
	.ds_sp{
		display:block;
		}
	.ds_pc-inline{
	display:none;
	}
		
		
	}
	
@media screen and (max-width: 640px) {	

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

}
/* ---------------------------- リフレクション -----------------------------------*/

.reflection-img{
    position    :relative;
    overflow    :hidden;
}



.reflection {
    height      :100%;
    width       :10px;
    position    :absolute;
    top         :0;
    left        :0;
    background-color: #fff;
    opacity     :0;
    transform: rotate(45deg);
    animation: reflection 3s ease-in-out infinite;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 3s ease-in-out infinite;
    -moz-transform: rotate(45deg);
    -moz-animation: reflection 3s ease-in-out infinite;
    -ms-transform: rotate(45deg);
    -ms-animation: reflection 3s ease-in-out infinite;
    -o-transform: rotate(45deg);
    -o-animation: reflection 3s ease-in-out infinite;
}
 
@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; }
}






/* ---------------------------- animate.css -----------------------------------*/


.anim1{
  /*秒かけてアニメーションする */
  -webkit-animation-duration:1s;
  animation-duration:1s;
  -webkit-animation-duration:1s;
  animation-delay:0.6s;
}
.anim2{
  /*秒かけてアニメーションする */
  -webkit-animation-duration:1s;
  animation-duration:1s;
  -webkit-animation-duration:1s;
  animation-delay:0.8s;
}
.anim3{
  /*秒かけてアニメーションする */
  -webkit-animation-duration:1s;
  animation-duration:1s;
  -webkit-animation-duration:1s;
  animation-delay:1.0s;
}
.anim4{
  /*秒かけてアニメーションする */
  -webkit-animation-duration:1s;
  animation-duration:1s;
  -webkit-animation-duration:1s;
  animation-delay:1.2s;
}
.anim5{
  /*秒かけてアニメーションする */
  -webkit-animation-duration:1s;
  animation-duration:1s;
  -webkit-animation-duration:1s;
  animation-delay:1.4s;
}
.anim6{
  /*秒かけてアニメーションする */
  -webkit-animation-duration:1s;
  animation-duration:1s;
  -webkit-animation-duration:1s;
  animation-delay:1.6s;
}