@charset "utf-8";

*{ box-sizing: border-box;
	--font1: "Noto Sans JP", sans-serif;
	--font_en:"League Gothic", "Noto Sans JP", sans-serif;
}

/* =base
------------------------------------------------------------------------------------------*/
body {
	text-align: center;
	font-family:var(--font1);
    font-weight: 500;
	font-size: 16px;
	line-height: 1.5em;
	color: #000;
	margin: 0;
	min-height:100%; 
	overflow-x: hidden;
	background-color:#ffcb21;
}
body:before{
	content:""; display: block; width: 100%; height: 100vh;  position: fixed; top: 0; left: 0; z-index: -2; 
	background-image:url("../images/bg.webp");
	background-repeat:no-repeat; 
	background-size:cover; 
	background-position: center;
	background-attachment:fixed; 
}


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

@media only screen and (max-width: 768px){
	body{ background-image:none;}
	body:before{ }

	.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;}


.youtube { overflow: hidden; padding-bottom: 56.25%; position: relative; height: 0px; width: 100%; }
.youtube iframe { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }



/********************** header *******************************/
header{ text-align:left; position:fixed;  z-index:99; top:0; width:100%; height:48px;}
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:1.5vw;}
.nav li {display:inline-block;  float: left; padding:0;}
.nav li a{ display:block; line-height:1em; font-size:13px; letter-spacing:0em;  color:#fff; text-align:center; transition: all 0.3s ease;padding:18px 12px 15px; font-style: normal; font-weight: 400; position:relative;}
.nav li a:hover,
.nav li a.active{ color:#fabe7e;}
.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; 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;}


@media only screen and (max-width: 850px){
	header { top:0; height:46px;}
	header h1{ margin: 10px 0 0 14px; width: 90px; line-height:0;}

	.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:rgba(0,0,0,0.7);}
	.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 #b68251;  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:#b68251;}

	.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: 11px; 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: #fabe7e; -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: #fabe7e; -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:#b68251;}
	.nav-active .nav_icon:after { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); background:#b68251;}

	.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: 60px 0 7vw; font-size: 14px; line-height: 1.5em; position:relative;}



@media only screen and (max-width: 768px){
footer{ padding: 30px 0 60px;}


}


/* =video
------------------------------------------------------ */
video#bgvid {
 position: fixed; top: 0; left:0; min-width:100%; min-height:100%; z-index: -100; opacity:0.5;
}
@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:".";}