@charset "utf-8";

*{ box-sizing: border-box;}

/* =base
------------------------------------------------------------------------------------------*/
body {
	text-align: center;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: 500;
	font-size: 16px;
	line-height: 1.5em;
	color: #fff;
	margin: 0;
	min-height:100%; 
	overflow-x: hidden;
	background-color:#000;
	font-feature-settings : "palt";
	background-image:url(../images/pc_bg.jpg); background-repeat:no-repeat; background-size:cover; background-attachment:fixed; background-position: center top;
}

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

@media only screen and (max-width: 768px){
body{ background-image:none;}
body:before{ background-image:url(../images/sp_bg.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:#cccc33; outline:none;  }
a:link {  text-decoration: none; }
a:hover {  color: #cccc33;  text-decoration: none;}
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:48px; background-color: #fff;}
header:after{ position:absolute; content:""; background-image:url(../images/nav_after.png); background-repeat:no-repeat; background-size:cover; background-position: center; width:100%; height: 17px !important; bottom: -10px; left:0; visibility: inherit !important;}
header.top{ opacity:0;}
header h1{ float: left; margin: 12px 0 0 20px; width: 110px;}
header h1 img{ width:98px;}


.toggle_nav{ float:right;}
.nav ul{ width: 100%; margin-right:13px;}
.nav li {display:inline-block;  float: left; padding:0;}
.nav li a{ font-family: 'Roboto', sans-serif; display:block; line-height:1em; font-size:13px; letter-spacing:0em;  color:#284150; text-align:center; transition: all 0.3s ease;padding:18px 12px 15px; font-style: normal; font-weight: bold; position:relative;}
.nav li a:hover,
.nav li a.active{ color:#284150;}
.nav li.twittr{}
.nav li.twittr img{ width:21px;}
.nav li.twittr a{ padding:13px 12px 12px!important;}

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

.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: 900px){
header { top:0; height:46px; background-color:transparent;}
header:after{ display:none !important;}
header h1{ margin: 14px 0 0 18px; width: 90px; line-height:0;}

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: hidden; 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:#fff;}
.nav-active .global{ height:100vh;padding-top:46px;}
.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 #284150;  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:#284150; 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:#284150;}

.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: absolute; width: 30px; height: 25px; right:10px; 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: #fff; -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: #fff; -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:#fff;}
.nav-active .nav_icon:after { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); background:#fff;}

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

/* =google tranlate
/********************** fade *******************************/

.translated-ltr .top .mainimg{ margin-top: 142px;}
.translated-ltr .top .mainimg .main_bnr{ top: calc(142px + 25vw);}

.top .mainimg .main_bnr.active,
.translated-ltr .top .mainimg .main_bnr.active{ transition: 0.3s; top: 77vh; width: 20vh;}

.translated-ltr header{ top:38px;}
.translated-ltr .nav-active .global{ padding-top: 83px;}

#flags{ width: 147px !important; margin: 0 auto;}
#google_language_translator{ display: inline-block;}

#glt-translate-trigger{ background: transparent !important; box-shadow: none !important; left: inherit !important; right: 66px !important; top: 0px !important; bottom: inherit !important; opacity: 0 !important; padding: 0 !important; padding: 18px 12px 15px !important; width: 3em; height: 14px;}

.goog-te-banner-frame{}
.arrow{ left: 50% !important; right: 50% !important; transform: rotate(180deg) !important; top: -50% !important;}
.tool-container.tool-top{ left: inherit !important; right: 84px !important; top: 51px !important; bottom: inherit !important;}

.translated-ltr #glt-translate-trigger{ top: 52px !important;}
.translated-ltr .tool-container.tool-top{ top: 90px !important;}

@media only screen and (max-width: 900px){
.translated-ltr .top .mainimg{ margin-top: 85px;}
.translated-ltr .top .mainimg .main_bnr{ top: calc(85px + 140vw);}

.top .mainimg .main_bnr.active,
.translated-ltr .top .mainimg .main_bnr.active{ top: 87vh; left: 8px; width: 12vh;}

.lang{ float: right; position: relative; right: 52px; border-right: 1px solid #fff; padding-top: 5px; padding-right: 10px; margin-top: 8px;}
.lang p{ font-family: 'Roboto', sans-serif; font-size: 14px; margin-bottom: 4px;}

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

.lang_modal .close{ top: 52px; right: 8px; width: 32px;}
.translated-ltr .lang_modal .close{ top: 90px;}

#glt-translate-trigger{ right: 63px !important; top: 0px !important;}
.tool-container.tool-top{ right: 80px !important; top: 40px !important;}

.translated-ltr #glt-translate-trigger{ top: 44px !important;}
.translated-ltr .tool-container.tool-top{ top: 85px !important;}
}


/* =foot
-----------------------------------------------------------------------------------------*/
footer{ padding: 60px 0 7vw; font-size: 14px; line-height: 1.5em; position:relative;}

footer .bnr_box{ margin-bottom: 34px;}
footer .bnr_box li{ display: inline-block; margin: 0 2px; width:22%;}
footer .bnr_box li img{ width:100%; max-width: 200px;}

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{}
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{ padding: 30px 0;}
footer:before{ background-size: 200px; width: 200px;}

footer .bnr_box li{ width:47%;}

footer .sns{ margin-bottom:20px;}
footer .sns .tit{ font-size: 16px;}
footer .sns a{ padding:0 5px; margin: 0 4px;}
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
------------------------------------------------------ */
video#bgvid {
 width:100%; opacity:1; position:fixed; top:50%; left:50%;transform: translate3d(-50%,-50%,0) ;z-index: -1;
}
@media only screen and (max-width: 768px){
video#bgvid { display:none;}
}



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