@charset "utf-8";


main{ width:100%; padding:0 1vw; overflow:hidden;}
.subtit{font-family:'Oswald'; font-weight:bold; color:#e8467f; font-size:7vw; line-height:1em; letter-spacing:0.02em; margin-bottom:1vw;}

@media only screen and (max-width: 768px){
main{  padding:0 2vw;}
.subtit{font-size:12vw; margin-bottom:10px; }
}

/********************** top *******************************/

.mainarea{ margin-bottom:14vw;}
.mainarea img{ width:100%;}

.mainarea figure{ width:40%; margin-left:3vw;}
.mainarea .main_r{ width:62%; position:absolute; top:9.5vw; right:0; text-align:center;}
.mainarea .main_r h1 img{ width:90%;}

.top_bnr{ position:absolute; width:18vw; top:35vw; left:1vw;}

@media only screen and (max-width: 768px){
.mainarea{ margin-bottom:10vw;}
.mainarea figure{ width:90%; margin-left:5%; padding-top:30px;}
.mainarea .main_r{ width:96%; position:relative; top:-14vw; right:0; margin:0 auto;}
}


/********************** main　*******************************/
.main_content{ background-image:url(../images/main_bg_loop.png); background-size:98vw; background-position:top; position:relative; width:98vw; }
.main_content:before{ background-image:url(../images/main_bg_head.png); background-size:98vw; background-repeat:no-repeat; content:""; display:block; height:19vw; width:98vw; position:absolute; top:-18.2vw;}

.content_wrap{ width:94%; max-width:1000px; margin:0 auto;}

@media only screen and (max-width: 768px){
.main_content{ width:96vw; background-size:96vw;}
}

/********************** ABOUT *******************************/
#about{ position:relative; width:100%; margin-bottom:0vw; top:-10vw;}

#about .about_catch{ padding:2vw 0 0vw;}
#about .about_catch img{ width:100%;}

#about figure{ float:left; width:40%; padding-right:8%;}
#about figure img{ width:100%;}

#about .about_txt{ float:right; width:60%; text-align:left; font-size:18px; font-weight:bold; line-height:1.7em; padding-top:1.5em;}
#about .about_last{ padding-top:0.5em;}

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

#about{ margin-bottom:20px;}

#about .about_last img{ width:100%;}

#about figure{ float:none; width:60%; padding-right:0; margin:0 auto;}
#about .about_txt{ float:none; width:100%; text-align:left; font-size:16px; line-height:1.7em;  }
#about .about_txt p{margin:0;}
}

/********************** RULE *******************************/
#rule{ position:relative; top:-4vw; margin-bottom:3vw;}

.rule01{ margin-bottom:60px;}
.rule01 h3 img{ width:100%;}
.rule01 ol{ padding-left:70px;}

.rule01 ol li{ background-color:#fff; border:3px solid #000; position:relative; margin-bottom:35px; text-align:left; padding:20px 20px 20px 80px; font-weight:bold; font-size:20px; line-height:1.5em;}

.rule01 ol li:nth-child(4){ margin-bottom:45px;}
.rule01 ol li:nth-child(5){ background-color:#e84c80; border:none; color:#fff; font-size:24px; padding:30px 24% 30px 100px; position:relative;}
.rule01 ol li .clearimg{ display:block; position: absolute; right:2%; top:50%; width:22%;transform: translate3d(0,-50%,0);}
.rule01 ol li .clearimg img{ width:100%;}


.rule01 ol li:before{ background-size:100%; background-repeat:no-repeat; width:120px; height:120px; display:block; content:""; position:absolute; left:-70px; top:-22px;}
.rule01 ol li:nth-child(1):before{ background-image:url(../images/rule01.png);}
.rule01 ol li:nth-child(2):before{ background-image:url(../images/rule02.png);}
.rule01 ol li:nth-child(3):before{ background-image:url(../images/rule03.png);}
.rule01 ol li:nth-child(4):before{ background-image:url(../images/rule04.png);}
.rule01 ol li:nth-child(5):before{ background-image:url(../images/rule05.png); width:150px; height:150px; }

.rule01 .touroku{ display:block; border:2px solid #e84c80; text-align:center; padding:8px 0; margin-top:15px;}

.rule02{ background-color:#fff; border:5px solid #e84c80; text-align:left; padding: 15px 35px 40px; font-weight:bold;}

.rule02 h3{ margin-bottom:5px;}
.rule02 h3 img{ width:90%;}
.rule02 .lead{ margin-bottom:50px;}

.rule02 .add_block{ background-color:#f3f3f3; padding:20px 40px; line-height:1.7em; position:relative;}
.rule02 .add_block p{ margin:0;}
.rule02 .add_block figure{ position:absolute; right:5%; top:50%; width:25%;transform: translate3d(0,-50%,0);}
.rule02 .add_block figure img{ width:100%;}

@media only screen and (max-width: 768px){
.rule01{ margin-bottom:20px;}
.rule01 h3 { margin-bottom:5px;}

.rule01 ol{ padding-left:15px;}
.rule01 ol li{ border:3px solid #000;  margin-bottom:10px;  padding:10px 10px 10px 30px; font-size:16px; line-height:1.4em;}
.rule01 ol li:before{ background-size:100%; background-repeat:no-repeat; width:50px; height:50px; display:block; content:""; position:absolute; left:-25px; top:-15px;}

.rule01 ol li:nth-child(4){ margin-bottom:20px;}
.rule01 ol li:nth-child(5){ font-size:18px; padding:10px 10px 10px 30px;}
.rule01 ol li:nth-child(5):before{  width:50px; height:50px; left:-23px; }
.rule01 ol li .clearimg{ position: inherit; right:0; top:0%; width:100%;transform: none; margin:0 auto; padding:10px 0 0 0;}


.rule01 .touroku{padding:5px 0; margin-top:10px;}

.rule02{  border:2px solid #e84c80; padding: 10px 10px 15px;}
.rule02 h3 img{ width:100%;}
.rule02 .lead{ margin-bottom:10px;}
.rule02 .add_block{ padding:10px 15px; }
.rule02 .add_block figure{ position: inherit; right:0; top:0; width:100%;transform: none; padding-top:10px;}

}


/********************** MAP *******************************/
#map{ position:relative; padding-bottom:5vw;}
#map h2{ margin-bottom:2vw;}
#map img{ width:100%;}

#map ul{ text-align:right; padding-top:1vw;} 
#map li{ width:25%; display:inline-block;}

#shop_list{ padding:30px;background-image:url(../images/main_bg_loop.png); background-size:100%; background-position:top; }
#shop_list .detail_box{ width:49%; float:left; padding: 20px 8px; border:6px solid #e8467f; margin-bottom:2%; margin-right:2%; background-color:#fff;}
#shop_list .detail_box:nth-child(2n){ margin-right:0;}
#shop_list .detail_box h3{ font-size:18px; font-weight:bold; line-height:1.5em; margin-bottom:16px;}
#shop_list .detail_box p{ font-size:14px; line-height:1.4em; margin-bottom:12px;}
#shop_list .detail_box .official{ color:#e8467f; font-size:14px; line-height:1.5em; padding:5px 0; border:1px solid #e8467f; border-radius: 5px; margin: 0 auto 8px; display: block; text-align: center; width: 60%;}
#shop_list .detail_box .g_map{ color:#000; font-size:14px; font-weight:bold; line-height:1.5em; text-align:center; background-color:#f8b71c; border-radius: 5px; display: block; padding: 10px 0; width:60%; margin:0 auto;}



@media only screen and (max-width: 768px){
#map h2{ margin-bottom:10px;}
#map ul:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}
#map li{ width:50%; float:left;}

#shop_list{ padding:0; background:none; background-color:#e8467f;}
#shop_list .detail_box{ width:100%; float:none; padding: 8px; margin-bottom:6px; text-align:left; border:none;}
#shop_list .detail_box h3{ font-size: 14px; margin-bottom: 8px;}
#shop_list .detail_box p{ font-size:13px; margin-bottom: 8px;}
#shop_list .detail_box .official{ display: inline-block; width: 50%; font-size: 10px; margin-right: 2px; border-radius: 4px;}
#shop_list .detail_box .g_map{ display: inline-block; width: 48%; font-size: 10px; border-radius: 3px; padding: 6px;}

}


/********************** ANIME *******************************/
#anime{ padding:6vw 0 8vw 0; }
#anime img{ width:100%;}

#anime .content_wrap{position:relative;}

#anime:hover img{ opacity:1;}

#anime .link_yt{ position:absolute; display:block; width:53%; height:20%; right:3%; top:60%; }
#anime .link_tw{ position:absolute; display:block; width:53%; height:8%;  right:3%; top:80%; }

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


/********************** GAME *******************************/
#game{ padding:5vw 0; background-image:url(../images/game_bg.png);}
#game img{ width:100%;}


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




/********************** GOODS *******************************/
#goods{ padding:6vw 0 8vw 0;}
#goods img{ width:100%;}

#goods h2{ margin-bottom:3vw;}

#goods ul:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}
#goods li{ width:100%; float:left; text-align:left; margin-right:0%; margin-bottom:20px;}
#goods li:nth-child(2n){ margin-right:0;}

#goods .goods_block{  background-color:#fff; border-radius:10px; padding:20px;}

#goods li h3{ font-weight:bold; margin-bottom:0.5em;}
#goods li p{ margin:0;}
#goods li p.txt{ font-size:14px; line-height:1.5em;}
#goods li p.price{ font-weight:bold; text-align:right;}


#goods .store{ background-color:#FFF; padding:20px 0;}

@media only screen and (max-width: 768px){
	
#goods li{ width:100%; float:none; margin-right:0; margin-bottom:5px;}	
#goods .goods_block{ border-radius:10px; padding:10px;}
#goods .goods_block figure{ float:left; width:40%; padding:0 10px 10px 0;}	
#goods li p.txt{ font-size:12px; line-height:1.5em;}
}



/********************** EVENT *******************************/
#event{ padding:6vw 0 8vw 0;background-image:url(../images/main_bg_loop.png); background-size:100%; background-position:top; text-align:left; }
#event h2{ text-align:center; margin-bottom:3vw;}
#event h3{  width:100%; margin:0 auto 3vw; max-width:800px;}
#event h3 img{ width:100%;}

#event .event_lead{ background-color:#fff2f8; padding:25px 50px; color:#e8467f; font-weight:bold; margin-bottom:2vw; position:relative;}
#event .event_lead .event_txt{ width:70%; line-height:1.7em;}
#event .event_lead span{ display:block; width:25%; position:absolute; right:3%; top:50%;transform: translate3d(0,-50%,0);}
#event .event_lead span img{ width:100%;}

#event ul{ margin-bottom:2vw;}
#event li{ font-weight:bold; margin-bottom:1em;}
#event li span{ font-weight: initial; display:block; font-size:0.8em; line-height:1.7em;}
#event li span a{ font-weight:bold;}

#event .notice{ background-color:#f1f1f1; padding:30px 40px; font-size:14px; line-height:1.5em;}

@media only screen and (max-width: 768px){
#event h2{  margin-bottom:20px;}
#event h3{  width:100%; margin:0 auto 20px;}
#event .event_lead{  padding:10px 15px; margin-bottom:10px;}
#event li{ font-weight:bold; margin-bottom:0.5em;}
#event .notice{padding:10px 15px; font-size:14px;}

#event .event_lead .event_txt{ width:100%; line-height:1.5em;}
#event .event_lead span{ display:block; width:100%; position: inherit; right:0; top:0;transform: none;}
}




/*lightbox*/

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}
/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#e8467f;}
#colorbox{outline:none;}
   /* #cboxContent{margin-bottom:60px; overflow:visible;}*/
    #cboxContent{margin-right:60px; overflow:visible; margin-bottom:0;}
        .cboxIframe{background:#000;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:#fff;}
        #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#fff;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
        #cboxSlideshow, #cboxClose{text-indent:-9999px; width:40px; height:100%; position:absolute; top:0;background:url(../images/controls2.png) no-repeat 0 0;}
		
        #cboxClose{background-position:7px 0; right:-50px; border:0; outline:none;}
        #cboxClose:hover{background-position:-40px 0;}


@media screen and (max-width: 768px) {
#cboxContent{ margin-right:0; margin-bottom:50px;}
#cboxClose{ right:0; top:inherit; bottom:-35px; height: 22px;}
}