@charset "utf-8";

body {
line-height: 1.8;
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo','ＭＳ Ｐゴシック','sans-serif';
color:#fff;
overflow-X:hidden;
}

body:before{
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100vh;
background-size:cover;
}

.wrapper{
overflow-X:hidden;
}

@font-face{
font-family: "koz";
src: url(KozGoPr6N-Light.otf);
}

@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

@keyframes fade-in {
0% {
display: none;
opacity: 0;
}

1% {
display: block;
opacity: 0;
}

100% {
display: block;
opacity: 1;
}
}

@-moz-keyframes fade-in {
0% {
display: none;
opacity: 0;
}

1% {
display: block;
opacity: 0;
}

100% {
display: block;
opacity: 1;
}
}

@-webkit-keyframes fade-in {
0% {
display: none;
opacity: 0;
}

1% {
display: block;
opacity: 0;
}

100% {
display: block;
opacity: 1;
}
}

@keyframes fade-out {
0% {
display: block;
opacity: 1;
}

1% {
display: none;
opacity: 1;
}

100% {
display: none;
opacity: 0;
}
}

@-moz-keyframes fade-out {
0% {
display: block;
opacity: 1;
}

1% {
display: none;
opacity: 1;
}

100% {
display: none;
opacity: 0;
}
}

@-webkit-keyframes fade-out {
0% {
display: block;
opacity: 1;
}

1% {
display: none;
opacity: 1;
}

100% {
display: none;
opacity: 0;
}
}

.fadein_c {
opacity : 0;
transform : translate(0, 0);
transition : all 1500ms;
}
.fadein_c.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.fadein {
opacity : 0;
transform : translate(0, 50px);
transition : all 1500ms;
}
.fadein.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.fadein02 {
opacity : 0;
transform : translate(-150px, 0);
transition : all 1500ms;
}
.fadein02.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.fadein03 {
opacity : 0;
transform : translate(150px, 0);
transition : all 1500ms;
}
.fadein03.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.center{
text-align:center;
}

.pc{
display:block;
}

.sp{
display:none;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

img {
max-width:100%;
}

.cf:before,
.cf:after {
content: " "; 
display: table; 
}

.cf:after {
clear: both;
}

.cf {
*zoom: 1;
}

.fLft {
float:left;
}

.fRgt {
float:right;
}

.title{
float:left;
}

.blocklink {
display:block;
}

a{
	color: #F39207;
	text-decoration: underline;
}

a:hover{
	text-decoration: none;
}


a img{
transition: 0.3s ;
}

a:hover img{
opacity: 0.7 ;
}


/* headder */

#basicheader {
background: #000;
color: #FFF;
height: 35px;
font-size: 13px;
}

.contentsizer {
width:95%;
margin:0px auto;
padding:6px 0;
}

.header-right{
float:right;
width:305px;
}

a:hover img.overwhite{
cursor:pointer;
filter: alpha(opacity=80);        /* ie lt 8 */
-ms-filter: "alpha(opacity=80)";  /* ie 8 */
-moz-opacity:0.8;                 /* FF lt 1.5, Netscape */
-khtml-opacity: 0.8;              /* Safari 1.x */
opacity:0.8;
zoom:1;
}

h1{
margin: 0;
font-size: 12px;
font-weight: normal;
}

h2{
margin:0;
}

h2 img{
margin-bottom:10px;
}

h3{
margin:0 0 30px;
font-size: 50px;
font-weight: bold;
text-shadow: 3px 3px 7px #04147f; 
}

h4{
font-size: 30px;
	margin: 25px 0 45px;
	position:relative;
	line-height:2em;
	padding-left:3em;
	text-align: left;
}


h4:before{
	position:absolute;
	left:0;
	content:"";
	display:inline-block;
	width:2em;
	height:2em;
	background:url(../images/img_h4_icon.png) no-repeat;
	background-size:contain;
}

/* rought form styles for when JS is disabled */

#social_buttons {
max-height: 28px;
float:right;
}

.fb-like {
display:inline-block!important;
float:right;
margin:0px 18px;
}

.fb-like span{
height: 20px;
}

.fb_iframe_widget > span {
vertical-align: baseline !important;
}

/* main_area */

.main_area{
/* 表示画像の高さ ÷ 表示画像の幅 × 100 */
padding-top: 49.5%;
background: #000 url(../images/img_main_bg.jpg) repeat-x;
background-size: cover;
position:relative;
border-bottom: solid 5px #000;
}

.main_area_inner{
position:absolute;
top: 0px;
width:100%;
}

.img-main-01{
position: absolute;
right:33.5%;
width:33%;
margin-top:19.5%;
z-index:3;
opacity : 0;
transform : translate(0, -50px);
transition : all 1500ms;
}

.img-main-01.act{
opacity : 1;
transform : translate(0, 0);
}

.img-main-02{
position: absolute;
left:40%;
margin-top:42%;
width:20%;
z-index:1;
opacity : 0;
transform : translate(50px, 0px);
transition : all 1500ms;
}

.img-main-02.act{
opacity : 1;
transform : translate(0, 0);
}

.img-main-03{
position: absolute;
left:0%;
margin-top:18%;
width:100%;
z-index:1;
opacity : 0;
transform : translate(0px, 50px);
transition : all 1000ms;
}

.img-main-03.act{
opacity : 1;
transform : translate(0, 0);
}

.img-main-04{
position: absolute;
left:10%;
margin-top:20.5%;
width:15%;
z-index:10;
opacity : 0;
transform : translate(-50px, 0px);
transition : all 2000ms;
}

.img-main-04.act{
opacity : 1;
transform : translate(0, 0);
}


p{
font-size: 24px;
font-weight: bold;
}

/* content */

.content{
background: linear-gradient(#0518a3, #5b8af5,#0518a3);
}

.content_inner{
background: url(../images/img_bg_area_all.png) repeat;
	padding-bottom: 100px
}


/* area_00 */

.area_000{
	padding: 50px 0;
	position: relative;
	z-index: 0;
background-color: rgba( 0, 0, 0, 1 );
	}

.area_000  .survey a{
	color: #fff;
	text-align: center;
	font-size: 16px;
}


.area_000 .area_000_inner{
		position: relative;
		width: 1300px;
		margin: 0 auto;
			background-color: #fff;
			color: red;
			  border: 5px solid red;
		  box-sizing: border-box;
		}

.area_00{
padding: 50px 0;
position: relative;
z-index: 0;
}

.area_00 .area_00_inner{
position: relative;
width: 1200px;
	padding: 50px;
margin: 0 auto;
	background-color: #fff;
	color: red;
	  border: 5px solid red;
  box-sizing: border-box;
}

.area_00 .area_00_inner p{
	font-weight: normal;
	font-size: 18px;
}

.area_00 .area_00_inner p.hd {
	font-size:22px;
	text-align: center;
	font-weight: bold;
}


/* area_01 */

.area_01{
padding: 100px 0;
position: relative;
z-index: 0;
}

.area_01 .area_01_inner{
position: relative;
z-index: 100;
width: 1300px;
margin: 0 auto;
text-align: center;
}

.area_01,.area_02,.area_03 p{
text-shadow: 2px 2px 3px #04147f; 
}

.area_01 p img{
margin: 50px 0;	
}

.area_01 .bg_img_01{
z-index: 1;
position: absolute;
left:-5%;
top:5%;
width:35%;
}

/* area_02 */

.area_02{
padding: 0 0 100px;
position: relative;
z-index: 0;
}

.area_02_inner{
width: 1300px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 100;
}

.area_02 .bg_img_02{
z-index: 1;
position: absolute;
right:0%;
top:-5%;
width:37%;
}

.area_02 table{
width: 100%;
background-color: rgba( 0, 0, 0, 0.6 );
border: solid 3px #fff;
font-size: 24px;
margin-bottom: 100px;

}

.area_02 table th{
width: 30%;
border: solid 3px #fff;
padding: 20px 0;font-size: 28px;
color: #fff;
text-shadow: none;
background-color: rgba( 0, 0, 150, 0.3 );
}

.area_02 table td{
width: 30%;
border: solid 3px #fff;
padding: 20px 0;
}

/* area_03 */

.area_03{
padding: 0 0 100px;
}

.area_03_inner{
width: 1300px;
margin: 0 auto;
text-align: center;
}

.copy{
	width: 90%;
	margin: 0 5%;
	text-align: center;
	font-size: 14px;
}

.movie-wrap {
position: relative;
padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
height: 0;
overflow: hidden;
	margin-bottom: 50px;
}

.movie-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


.live_box{
	width: 94%;
background-color: rgba( 0, 0, 0, 0.6 );	
	padding: 3%;
	margin-bottom: 100px;
}

.live_box p{
font-size:18px;
	font-weight: normal;
	text-align: left;
}

.notice{
	background-color: rgba( 0, 0, 0, 0.6 );	
		padding: 3%;
	font-size: 16px;
	font-weight: normal;
	text-align: left;
}

.notice strong{
	margin: 20px 0;
}

/* sns */

.sns{
width:140px;
margin:0 auto 100px;
text-align:center;
}

.sns ul{
padding:0;
}

.sns li{
float:left;
}

.sns li:first-child{
margin-right:20px;
}

ul.bnr{
	padding: 0;
	margin: 0;
	width: 100%;
}

ul.bnr li{
float: left;
width: 30%;
}

ul.bnr li:first-child{
float: left;
width: 30%;
margin-right: 5%;
margin-left: 17.5%;
}

.area_03_txt{
	margin: 50px 0;
	text-align: left;
}


/* footer */

footer{
background:#000;
border-top:solid 1px #A39F80;
padding:20px 0;
}

footer .footer-inneer{
width:90%;
margin:0 auto;
display: flex;
justify-content: center;
align-items: center;
}

footer .footer-inneer .logo-left{
width:50%;
float:left;
}

footer .footer-inneer .logo-left ul{
padding:0;
width:50%;
}

footer .footer-inneer .logo-left ul li{
float:left;
}

.logo-right{
float:right;
width:50%;
text-align:right;
margin:0;
}

.livettl{
	text-align: left;
	padding: 15px 10px;
	font-size: 20px;
	font-weight: bold;
}

.livedate{
	background-color: #fff;
	color: #0000AA;
	padding: 5px 10px;;
}

/*PAGETOP */

#pageTop {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 1000;
line-height: .1;
cursor: pointer
}

#pageTop img {
opacity: .4;
filter: alpha(opacity=40)
}

#pageTop img:hover {
opacity: 1;
filter: alpha(opacity=100)
}

#pageTop {
display: none
}

.sm{
display: none;
}

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

footer .footer-inneer{
width:90%;
}

}

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

/* area_00 */


.area_00 .area_00_inner{
width: 950px;
	padding: 25px;
}

	
/* area_01 */

.area_01 .area_01_inner{

width: 1000px;
margin: 0 auto;
}

.area_01 .bg_img_01{
left:-12%;
top:7%;
width:50%;
}

/* area_02 */

.area_02_inner{
width: 90%;
margin: 0 5%;
}

.area_02 .bg_img_02{
z-index: 1;
position: absolute;
right:0%;
top:0%;
width:50%;
}

/* area_03 */

.area_03_inner{
width: 1000px;
margin: 0 auto;
}

p{
font-size: 18px;
font-weight: bold;
}

/* footer */

footer .footer-inneer{
width:90%;
margin:0 auto;
display: inherit;
justify-content: center;
align-items: center;
}

}

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

.title span.first{
display:none;
}

}

@media screen and (max-width: 800px) {
.title span{
display:none;
}

}

/*SP*/

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

.main_area{
/* 表示画像の高さ ÷ 表示画像の幅 × 100 */
padding-top: 150%;
background: url((../images/img_main_bg_sp.jpg) 0 no-repeat #000;
background-size: cover;
position:relative;
}

.img-main-01{
position: absolute;
right:5%;
width:90%;
margin-top:64%;
z-index:3;
opacity : 0;
transform : translate(0, 50px);
transition : all 1500ms;
}

.img-main-02{
position: absolute;
left:20%;
margin-top:128%;
width:60%;
z-index:1;
opacity : 0;
transform : translate(50px, 0px);
transition : all 1500ms;
}


.img-main-03{
position: absolute;
left:0%;
margin-top:60%;
width:100%;
z-index:1;
opacity : 0;
transform : translate(0px, 50px);
transition : all 1000ms;
}

.img-main-03.act{
opacity : 1;
transform : translate(0, 0);
}

/* area_01 */

.area_01 {
padding: 50px 0;
}

/* area_00 */

.area_00{
padding: 50px 0;
}

.area_00 .area_00_inner{
position: relative;
width: 90%;
	padding: 5%;
margin: 0 auto;
	background-color: #fff;
	color: red;
	  border: 5px solid red;
  box-sizing: border-box;
}

.area_00 .area_00_inner p{
	font-weight: normal;
	font-size: 18px;
}

.area_00 .area_00_inner p.hd {
	font-size:22px;
	text-align: center;
	font-weight: bold;
}
	
.area_01 .area_01_inner{
width: 90%;
margin: 0 5%;
}

.area_01 .bg_img_01{
left:-48%;
top:20%;
width:85%;
}

/* area_02 */

.area_02{

padding: 50px 0;
}

.area_02 table th,td{
font-size: 14px;
}

.area_02 table th{
width: 12%;
}

.area_02 .bg_img_02{
right:-32%;
top:-10%;
width:83%;
}

/* area_03 */

.area_03{
padding: 50px 0;
}

.area_03_inner{
width: 90%;
margin: 0 5%;
}

h3{
font-size: 35px;
}


	
	h4{
font-size: 20px;
	line-height:2em;
	padding-left:4em;
}


h4:before{
	position:absolute;
	left:0;
	content:"";
	display:inline-block;
	width:3em;
	height:3em;
	background:url(../images/img_h4_icon.png) no-repeat;
	background-size:contain;
}

	
.movie-wrap {
	margin-bottom: 0px;
}

	
.pc{
display:none;
}

.sp{
display:block;
}

#pageTop {
width: 50px
}

#basicheader {
height: auto
}

span.title {
display: none
}



ul.bnr{
	padding: 0;
	margin: 0;
	width: 100%;
}

ul.bnr li{
float: none;
width: 100%;
}

ul.bnr li:first-child{
float: none;
width: 100%;
margin-right: 0%;
margin-left: 0%;
	margin-bottom: 5%;
}

	
}

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

.title{
float:none;
text-align:center;
margin-bottom:10px;
font-size:12px;
}

#social_buttons {
float:none;
margin-bottom:10px;
}

.fb-like {
display:inline-block!important;
margin:0px 10px;
}

.header-right{
width:260px;
margin:0 auto;
float:none;
text-align:center;
}

}

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

/* content_04 */

.sm{
display: block;
}

}