@charset "utf-8";

*{ box-sizing: border-box;}

/* =base
------------------------------------------------------------------------------------------*/
body {
	text-align: center;
	font-family: "游ゴシック","ヒラギノ角ゴ ProN",sans-serif;
    font-weight:600;
	font-size: 16px;
	line-height: 1.5em;
	color: rgb(255, 255, 255);
	margin: 0;
	min-height:100%; 
	overflow-x: hidden;
	background-color:#fff;
	font-feature-settings : "palt";

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

body:before{ content: ''; display: block; background-image: url("../images/main_bg.jpg");     background-repeat:no-repeat; 
    background-size:cover; position: fixed; z-index: -1; width: 100%; height: 100vh;
    background-position: center top; }

body.in:before{}

.container{ max-width: 1100px;width: 94%;margin: 0 auto;}

@media only screen and (max-width: 768px){
body:before{ background-image:url(../images/main_bg_sp.jpg); background-position:center top; background-size:cover; display:block; content:""; position:fixed; top:0; left:0; width:100%; height:100vh; z-index:-1;}

.sp_only{display: initial;}
.pc_only{display: none!important;}
}

html {overflow-y:scroll; height:100%;}
a {text-decoration: none;cursor: pointer;color: #ff0000;outline:none; transition: 0.2s;}
a:link {  text-decoration: none; }
a:hover {  opacity: 0.8;  text-decoration: none; transition: 0.2s;}
a:active {  text-decoration: none;}
a img { outline:none;}
a:hover img {  opacity: .8;  -webkit-opacity: .8;  -moz-opacity: .8;  filter: alpha(opacity=80);  -ms-filter: "alpha(opacity=80)"; transition:0.3s;}


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

/********************** header *******************************/
header{text-align:left;position:fixed;z-index:99;top:0;width:100%;height: 40px;background: url(../images/head_bg.jpg)center bottom no-repeat;background-size:cover;box-shadow: 0px 10px 20px #000;/*background: rgb(208,255,241);background: linear-gradient(90deg, rgba(208,255,241,0.01) 0%, rgba(208,255,241,0) 35%, rgba(181,255,233,0.6) 100%);*/}
header:after{
    position: absolute;
    content: "";
    background-image: url(../images/header_bottom.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 35px !important;
    bottom: -34px;
    left: 0;
    visibility: inherit !important;
    z-index: -1;
    }
header.top{ opacity:1; transition: 1s;}
header h1{float: left;margin: 6px 0 0 25px;width: 186px;}
header h1 img{ width: 100%;}


.toggle_nav{ float:right;}
.nav ul{ width: 100%; margin-right:1.5vw;}
.nav li {display:inline-block;  float: left; padding:0;}
.nav li a{display:block;line-height:1em;font-size: 16px;font-family: 'Oswald', sans-serif;font-style: italic;color: rgb(255, 255, 255);text-align:center;transition: all 0.3s ease;padding: 18px 17px 15px;font-weight: bold;position:relative;}
.nav li a:hover,
.nav li a.active{color: #ffffff;}
.nav li a.disactive {color: #353d41; pointer-events: none;}
.nav li.twittr{}
.nav li.twittr img{width: 26px;}
.nav li.twittr a{padding: 16px 10px 12px 20px!important;}

.nav li a span.btm{ position: absolute; bottom: 8px; left: 50%; width: 0%; background-image: url(../images/nav_arrow.png); transition: all 0.3s ease; transform: translateX(-50%);}
.nav li a:hover span.btm,
.nav li a.active span.btm{ width:90px; height:3px;}

.nav li.twittr a:hover,
.nav li.twittr a.active{ background:none; opacity:0.8;}

.nav_trigger{display: none;}

header.in_head{ background-image:url(../images/in_nav_bg.png); background-repeat:repeat-x; padding-bottom:30px; }
header.in_head .head_wrap{ width:95%; max-width:1000px; margin:0 auto; position:relative;}
header.in_head .nav li a{ color:#fff;}
header.in_head h1{padding: 12px 0 0 0;position: absolute; top: 0px; left: 0; width: 260px;}
header.in_head h1 img{width: 100%;}
header.in_head .nav{}
header.in_head .nav ul{ margin-right:0;}
header.in_head .nav li a{ font-size:18px; padding:15px 12px 12px; }
header.in_head .nav li.twittr a{ padding:5px 0px 10px 7px!important;}

header.in_head h1.smaller { width:150px; padding-top:10px; }



@media only screen and (max-width: 1050px){
header {top:0;height: 32px;}
header h1{margin: 6px 0 0 10px;width: 120px;line-height:0;}

header:after{height: 24px !important;bottom: -24px;}

header.in_head{ background-image:none;  }
header.in_head .head_wrap{ width:100%;}
header.in_head .nav li a{ color:#279abf;}
header.in_head h1{padding: 6px 0 0 2vw;;position: inherit;}
header.in_head h1 img{    width: 80px;}
header.in_head .nav li a{ font-size:18px; padding: 6vw 0; }
header.in_head .nav li a:hover,header.in_head .nav li a.active { background-color: rgba(44,171,212,0.9); color: #fff;}

.nav li a span.btm{ display:none;}

.global{
 width:100%;
 position:fixed;
 z-index:10;
 top:0;
 left:0;
 overflow-y: scroll;
 padding-top:0;
 height:0;
 background-color:rgba(0,0,0,0.7);
 box-sizing: border-box;
 -webkit-transition: 1s ease;
 -moz-transition: 0.5s ease;
 -o-transition: 0.5s ease;
 -ms-transition: 0.5s ease;
 transition:0.5s ease;
 }
.global li{width: 100%; display:inherit; background-color:rgba(0,0,0,0.7);}
.nav-active .global{height:100vh;padding-top: 45px;}
.nav li.sp_top{ display: inherit;}

.toggle_nav{ -webkit-transition: 0.2s ease;  -moz-transition: 0.2s ease;  -o-transition: 0.2s ease;  -ms-transition: 0.2s ease;  transition: 0.2s ease;}
.nav{ margin-bottom:0; width:100%; height:inherit;}
.nav li{ border-bottom:1px solid #d60e19;  padding-right: 0;}
.nav li a:hover,nav li a.at{  border-bottom: none;}
.nav li a{ width:100%; max-width:inherit; text-align:center; padding:6vw 0; color:#fff; font-weight:bold;}
.nav li a strong{ font-size:5vw; line-height:1em; margin-bottom:2vw; }
.nav li a.on{ border-bottom:none;}

.nav li a:hover,
.nav li a.active{ color:#fff; background-color:#d60e19;}

.nav .twittr{ width:100%; margin-top:0;}
.nav .twittr img{ width:10%;}
.nav li.twittr a{ padding:15px 12px 10px!important;}

/* Default navigation icon */
.nav_trigger {display: block;position: fixed;width: 30px;height: 25px;right:3vw;top: 12px;z-index: 200;line-height:1;}
.nav-active .nav_trigger { opacity: 0.7;}
.nav_icon { display: inline-block; position: relative; width: 30px; height: 2px; background-color: #ffffff; -webkit-transition-property: background-color, -webkit-transform; transition-property: background-color, -webkit-transform; transition-property: background-color, transform; transition-property: background-color, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms;}
.nav_icon:before,
.nav_icon:after { content: ''; display: block; width: 30px; height: 2px; position: absolute; background: #ffffff; -webkit-transition-property: margin, -webkit-transform; transition-property: margin, -webkit-transform; transition-property: margin, transform; transition-property: margin, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms;}
.nav_icon:before { margin-top: -9px;}
.nav_icon:after { margin-top: 9px;}
.nav-active .nav_icon { background: rgba(0, 0, 0, 0);}
.nav-active .nav_icon:before { margin-top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg);background:#ffffff;}
.nav-active .nav_icon:after { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); background:#ffffff;}

.nav li a:hover span.btm,
.nav li a.active span.btm{ display:none;}
.nav li a span.jp{ font-size:3vw;}
}


/* =foot
-----------------------------------------------------------------------------------------*/
footer{ padding:0 0 7vw; font-size: 14px; line-height: 1.5em; position:relative;color: #fff;font-family: "游ゴシック体", YuGothic ,"游ゴシック", "Yu Gothic";}
footer.top{padding: 60px 0;max-width: 1000px; margin: 0 auto;}
footer:before{content:"";position:absolute;background-image:url(../images/foot_bar.png);background-repeat:no-repeat;background-size:415px;width:415px;height:9px;top:0;left:50%;transform:translateX(-50%);display: none;}

footer .bnr_box{ margin-bottom: 34px; display: flex; justify-content: center; flex-wrap: wrap;}
footer .bnr_box li{ display: inline-block; margin: 0 2px; width: 18.2%;}
footer .bnr_box li img{ width:100%; max-width: 200px;}
footer .bnr_box li.bnr_top{ width: 100% !important; flex-grow: 1; margin: 0 auto 4px; display: block;}
footer .bnr_box li.bnr_top img{ max-width: 240px;}

footer.top .bnr_box li{ width: 20%;}

footer .sns{ margin-bottom: 40px;}
footer .sns .tit{ margin-bottom: 12px; font-size: 14px;}
footer .sns a{ display:inline-block; margin: 0 4px; line-height: 0; width:46px;}
footer .sns a img{ width:100%;}
footer .foot_nav{ margin-bottom: 40px;}
footer .foot_nav p{margin: .5em 0;}
footer .foot_nav .tit{ display:inline-block; margin-bottom: 0; font-size: 14px; font-weight: bold; line-height: 1.5em;}
footer .foot_nav .tit span{ font-size: 10px; position: relative; top: -3px; margin: 0 8px;}
footer .copy{ font-size: 12px; line-height: 1.8em;}

footer .s_ship{ margin-bottom: 6px;}
footer figure{ width: 5%; margin: 0 auto 12px;}
footer figure img{ width: 100%;}

@media only screen and (max-width: 768px){
footer.top{ padding: 0px 0 20px; width: 100%;}
footer:before{ background-size: 200px; width: 200px;}

footer .bnr_box{ flex-wrap: wrap; margin-bottom: 10px;}
footer .bnr_box li{ width:47%; margin-bottom: 4px;}

footer.top .bnr_box li{ width: 47%;}

footer .sns{ margin-bottom:20px;}
footer .sns .tit{ font-size: 16px;}
footer .sns a{  margin: 0 4px; width: 40px;}
footer .foot_nav{ margin-bottom:14px;}
footer .foot_nav .tit{ display:block; margin-bottom: 4px; margin-right: 0; text-align: center; font-size: 14px;}
footer .foot_nav a{ display: block; width: 100vw; position: relative; left: -3%; border: none; border-radius: 0; border-bottom: 1px solid #000; border-top: 1px solid #353d41; margin-right: 0; text-align:left;}
footer .foot_nav a:after{ font-size:10px; left:14px;}
footer .copy{ font-size:11px;}

footer figure{ width: 12%;}
}


/* =video
------------------------------------------------------ */
#bgvid {
 position: fixed; bottom: -30vh; left:0; width: 100%; z-index: -1; mix-blend-mode: screen; opacity: 0.7;
}
@media only screen and (max-width: 768px){
#bgvid { display:none;}
}

@media all and (-ms-high-contrast: none) {
#bgvid{ bottom: 0; opacity: 0.06;}
}


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