@charset "utf-8";
*{ box-sizing: border-box;}

/* =base
------------------------------------------------------------------------------------------*/
body {
	text-align: center;
	color: #333;
	font-family: "メイリオ","Meiryo","MS PGothic","Osaka",Arial,sans-serif;
	font-size: 14px;
	line-height: 1.5em;;
	height: 100%; background-image:url(../images/tickets_bg.png); background-repeat:no-repeat; background-size:98%; background-attachment:fixed; background-position:center;
}
html {overflow-y:scroll; height:100%;}

a {color: #c00;text-decoration: none; outline:none;}
a:hover {color: #e00;text-decoration: underline;}
a:hover img{opacity:0.8;filter: alpha(opacity=80);}

.pc_only{ display:block;}
.sp_only{ display:none;}


@media only screen and (max-width: 639px){
body { background-attachment:inherit; background-position:center 85vw;}
.pc_only{ display:none;}
.sp_only{ display:block;}
}


/* =fade
------------------------------------------------------------------------------------------*/


#js_fade2 {position : fixed;top : 0; left: 0;width: 100%; height : 100%;background-color: #c00;background-image : url( ../images/loader.svg );background-repeat : no-repeat; background-size:80px; background-position : 50% 50%; z-index:100;}


/* =video
------------------------------------------------------ */
video#bgvid {
 position: fixed; top: 0; left:50%;min-width:100%; min-height:100%; z-index: -100; opacity:0.2;
}


@media only screen and (max-width: 639px){
video#bgvid { display:none;}
}


/* =header
------------------------------------------------------------------------------------------*/
header{ background-image:url(../images/main_img01.png); background-repeat:no-repeat; background-position:right top; background-size:70%; padding-bottom:12.3vw; /*background-attachment:fixed;*/}

header.img2{background-image:url(../images/main_img02.png); background-size:60%;}

header h1{ width:48.5%; margin-left:3.5%; padding-top:3.1vw;}
header h1 img{ width:100%;}

header .share_area{ margin-left:3%; padding-top:2.8vw;}
header .share_area h2{ float:left; padding-right:5px;}
header .share_area ul{ float:left;}
header .share_area li {float:left;margin-right:5px;}
header .share_area li a{display: block;overflow: hidden;width: 66px;height:67px; background-size:100%; background-repeat:no-repeat; }
header .share_area li a span{ display:none;}
header .share_area li a:hover{ opacity:0.8;}
header .share_area li.fb a{ background-image:url(../images/icon_fb.png); }
header .share_area li.twt a{ background-image: url(../images/icon_tw.png);}

.top_bnr{ position:absolute; width:52%; right:1vw; top:calc(29.5vw + 55px); z-index:10;}
.top_bnr li{ float:left; width:49%; padding:0.2vw; line-height:0; position:relative; height:6.3vw;}
.top_bnr img{ width:100%;}



@media only screen and (max-width: 639px){
header{ background-image:url(../images/main_spbg01.jpg); background-size:100%; padding-bottom:1vw;}
header h1{ width:96%; margin:0 auto; padding-top:50vw;} 
header .share_area{ display:none;}

header.img2{background-image:url(../images/main_spbg02.jpg);background-size:100%; }

.top_bnr{ position:relative; width:96%; right: inherit; top: inherit; margin:0 auto 10vw;}
.top_bnr li{ float: none; width:100%; padding:0 0 4px; height:auto;}

}

/* =navi CSS
------------------------------------------------------------------------------------------*/


.sharearea{margin:0 auto; padding-top:0;text-align:left;  width:230px;  font-family:'Oswald'; }
.sharearea h3{ float: left;  font-weight:bold; font-size:20px; line-height:70px; padding-right:15px;}
.sharearea ul{padding:0;}
.sharearea li {float:left;margin-right:5px;}
.sharearea li a{display: block;overflow: hidden;width: 70px;height:71px; background-size:100%; background-repeat:no-repeat; }
.sharearea li a span{ display:none;}
.sharearea li a:hover{ opacity:0.8;}
.sharearea li.fb a{ background-image:url(../images/icon_fb.png); }
.sharearea li.twt a{ background-image: url(../images/icon_tw.png);}

@media only screen and (max-width: 639px){
.sharearea{ width:200px; padding-top:6vw;}
.sharearea h3{font-size:16px; line-height:60px; }
.sharearea li a{width: 60px;height:61px; }
}

/* =foot
-----------------------------------------------------------------------------------------*/
footer{ padding-top:2.5vw; position:relative; padding-bottom:4vw;}
footer p.copyright{ line-height:62px;font-family: "Oswald","メイリオ","Meiryo","MS PGothic","Osaka",Arial,sans-serif; font-size:18px; }

footer ul{ margin:0 auto; width:80vw; margin-bottom:3vw;}
footer li{ float:left;  padding-left:1%; width:50%;}
footer li img{width:100%;}

@media only screen and (max-width: 639px){
footer{ width:94%; margin:0 auto; padding-bottom:0; padding-top:4vw;}
footer p.copyright{ line-height:56px; font-size:16px;}
footer ul{ position:inherit; right:0; top:0; width:100%;}
footer li{  padding:0; width:100%; float:none; line-height:0; margin-bottom:5px;}
footer li img{width:100%;}
}

/* =ページトップ
------------------------------------------------------------------------------------------*/
.page_top{text-align: right;margin: 0;  width:80px;  text-align:center;position:fixed; right:30px; bottom:40px;  z-index:10}
.page_top a{background-color:#000; display:block;border-radius: 50%;height:80px; width:80px; line-height:80px; color:#fff; font-family: 'Oswald';font-size:12px;}
.page_top a:hover{background-color:#cc0000; text-decoration:none;}


@media only screen and (max-width: 639px){
.page_top{ display:none;}
}


/* =見出し
------------------------------------------------------------------------------------------*/
h1{margin:0;}
h2{margin:0;}
h3{margin:0;}
h4{margin:0;}
h5{margin:0;}

/* =clearfix
------------------------------------------------------------------------------------------*/
.clearfix:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}


/* font
------------------------------------------------------ */