@charset "utf-8";

*{ box-sizing: border-box;word-break : break-all;}

/* =base
------------------------------------------------------------------------------------------*/
body {
	text-align: center;
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
	font-size: 16px;
	font-weight:500;
	line-height: 1.5em;
	color: #fff;
	margin: 0;
	min-height:100%;
	overflow-x: hidden;
	background-color:#000; background-image:url(../images/bg.jpg); background-size:cover; background-attachment:fixed; background-repeat:no-repeat; background-position:center;
	font-feature-settings : "palt";
}

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

@media only screen and (max-width: 768px){
body{ background-image:none;}
.sp_only{display: block !important;}
.pc_only{display: none!important;}
}

html {overflow-y:scroll; height:100%;}
a {  text-decoration: none;  cursor: pointer;color:#a3988a; outline:none;  }
a:link {  text-decoration: none; }
a:active {  text-decoration: none;}
a img { outline:none;}
a:hover img {  opacity: 0.8; }


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


/********************** header *******************************/
header {text-align:left; position:fixed; z-index:200; width:100%;  color:#fff;transition: 1s; letter-spacing: 0.06em; background-image:url(../images/head_bg.png); background-repeat:no-repeat; background-size:100%; background-position:left bottom; padding-bottom:5.6vw;}

header .head_logo{ width:calc((70px + 5.6vw) * 1.48); position: fixed; line-height: 0; transition: all 0.3s ease; top: 4px; left: 2.5vw;}
header .head_logo img{ width:100%;}

header::after,
header ul::after { content: ""; clear: both; display: block; }


@media only screen and (max-width: 1000px){
header { padding-bottom:0; height: 70px; top:0; background-size:cover;}
header .head_logo{  left: 10px; width:100px;}

.head_wrap{  padding: 0 0;height:41px;}

/*
header h1{ max-width: inherit; width:auto; padding:9px 0 0 2%; margin-left:0;}
header h1 img{max-width:190px;margin-right:0px;}
*/
}

/* =global nav
------------------------------------------------------------------------------------------*/

.toggle_nav{ float:right; }

.nav{  font-weight:bold;}
.nav .global{ line-height:0;}
.nav a{ color:#fff;}
.nav .pages{ display: inline-block; padding-right:5px; float:left;}
.nav .pages ul{ width: 100%;  }
.nav .pages li {display:inline-block;  float: left;position:relative;margin-right:1px; }
.nav .pages li a{ display:block; font-family:Oswald; line-height:1em; font-size:12px; text-align:center;  padding:18px 2px 16px; position:relative; transition: 0.3s;}
.nav .pages li img{ height:35px;}
/*
.nav .pages li.lanav { padding-top: 16px; line-height: 0; margin-left: 10px;}
.nav .pages li.lanav a{ background-color: #ffff00; border-radius: 5px; padding: 10px 25px; }
.nav .pages li.lanav a img{ height: 15px;}
*/
/* sub nav */
.nav .pages li ul{  position:absolute; top:46px; background-color:#c00; width:200px; display:block;}
.nav .pages li ul li{ float:none; display:inherit;}
.nav .pages li ul li a{ transition:0.25s; overflow:hidden; line-height:0; padding:0 1em;text-align:left;}
.nav .pages li ul li a:hover{ background-color:#d65e5e;}
.nav .pages li:hover ul li a{ overflow:visible; padding:15px 1em; line-height:1.4em;}

.nav .pages li ul li:before{ display:none;}

.nav_trigger{display: none;}

.nav aside{ display: inline-block; padding-right:10px; float:right;position: absolute;top: 55px;right: 0;}
.nav aside li{ display:inline-block; float:left; padding:22px 5px 0px; transition: 0.3s; margin:0;}
.nav aside a{ display:block; width:24px; line-height:0; padding:0;}
.nav aside a img{ width:100%;}

.nav li a span.btm{ position: absolute; bottom: 0; left:0px; width: 0%; height: 4px; background: #cc0000;
    -webkit-transition: all 0.3s ease;
       -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
         -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
}
/*.nav li a:hover span.btm,*/
.nav li a.active span.btm{ width: 100%;}
.nav_trigger{display: none;}

nav.lang{ float:right; font-size:12px; line-height:1em; text-align:center; background-color:#cc0000; margin-right: 14px; border-radius: 0 0 5px 5px;}
nav.lang a{ margin:0; width:45px; line-height:68px; position:relative; height:58px; display:block; color: #fff; font-weight: bold;}
nav.lang a:hover{ opacity:0.8;}


@media only screen and (max-width: 1150px){
.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:#c00;}
.nav-active .global{ height:100vh;padding-top:48px;overflow-y: scroll;}

.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 #a60000;  padding-right: 0;}
.nav li a{ width:100%; max-width:inherit; text-align:center; padding:6vw 0; color:#fff; height:auto; line-height:1em; font-size:16px; border-top:1px solid #e50000;}

.nav .pages{ width:100%; margin:0; display:block; padding:0;}
.nav .pages li{ margin-right:0;}
.nav .pages li::before{ display:none;}
.nav .pages li a{ width:auto; font-size:14px;padding:2.5vw 0;}
.nav .pages li a img{ width: auto;}
.nav .pages li a.toggle_btn{}
.nav .pages li a.toggle_btn:after{ position: absolute; top: calc(50% - 6px); right: 19px; margin: auto; content: ""; vertical-align: middle; width: 6px; height: 6px; border-top: 1px solid #fff; border-right: 1px solid #fff; -webkit-transform: rotate(135deg); transform: rotate(135deg);}
.nav .pages li ul{ width:100%; position:inherit; top:0; display: none; background:none;}
.nav .pages li ul li{ background-color:#900; border-top: 1px solid #800; border-bottom:none;}
.nav .pages li ul li a{ overflow:visible; line-height:1em;padding:5vw 0; text-align:center;border-top: 1px solid #a00;}
/*
.nav .pages li.lanav { padding-top: 0; line-height: 0; margin-left: 00px;background-color: #ffff00;}
.nav .pages li.lanav a{  border-radius: 0; padding: 5vw 0; }
.nav .pages li.lanav a img{ height: 15px;}
*/
.nav aside{ width:100%; display:block; background-color:#c00; padding:0; float:none;}
.nav aside ul{ width:100%; margin:0 auto; padding:0 3%; text-align: center;}
.nav aside li{ display:inline-block; float:none; width:10%; margin:0; padding:0;}
.nav aside li a{ height:inherit; line-height:1em; padding:4vw 4px;}
.nav aside li a img{ width:100%;}

nav.lang{ float:none; font-size:12px;  height:41px; position:absolute; right:calc(3vw + 38px); margin-right: 0;}
nav.lang a{ height:41px; padding-left:0; line-height:41px; }

/* Default navigation icon */
.nav_trigger { display: block; position: fixed; width: 28px; height: 25px; right:3vw; top: 8px; z-index: 200;}
.nav-active .nav_trigger { opacity: 0.7;}
.nav_icon { display: inline-block; position: relative; width: 28px; 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: 28px; 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 span.btm,
.nav li a:hover span.btm,
.nav li a.active span.btm{ display:none;}
.nav li a span.jp{ font-size:3vw;}
}


/* =main
-----------------------------------------------------------------------------------------*/
main{ position:relative; z-index:5;}
main.top{ padding-top:0;}
main.top .inhead_link{
	margin: 30px auto 40px;
}
@media only screen and (max-width: 768px){
main{ background-image:none;}
main:before{content: ""; position: fixed; top: 0; left: 0; background-image: url(../images/bg_sp.jpg); background-position: center; background-size: 100%; background-repeat: no-repeat; width: 100%; height: 100%; z-index: -1;}
main.top{ padding-top:0; margin-top: 80px;}
}

/* =foot
-----------------------------------------------------------------------------------------*/
footer{ padding:20px 3% 60px; position:relative; overflow: hidden; z-index: 5;}
footer.top_foot{ padding:20px 3% 120px;}
footer small{ float:left; padding-top:20px;}
footer .foot_r{ float:right; width:70%; text-align:right;}
footer .foot_r a:hover{ opacity:0.8;}
footer .foot_r .foot_bnr{ display:inline-block;}
footer .foot_r .foot_bnr p{ display:inline-block;}
footer .foot_r .foot_bnr a{ margin-left: 12px; padding-left: 16px; border-left: 1px solid #fff; color:#ff0000;}
footer .foot_r .foot_bnr a:nth-child(4){ border-right: none; padding-right: 0;}
footer .foot_r .foot_bnr a img{ width: 80px; vertical-align: middle;}

@media only screen and (max-width: 768px){
footer{ padding:20px 2% 20px}
footer.top_foot{ padding:20px 3% 75px;}
footer .foot_r{ float:none; width:100%; text-align: center; line-height:0;}
footer .foot_r .foot_bnr{ text-align: center;}
footer .foot_r .foot_bnr p{ font-size: 12px;}
footer .foot_r .foot_bnr a{}
footer .foot_r .foot_bnr a:nth-child(4){ display:block; border-left:none; margin-top: 12px; margin-left: 0; padding-left: 0;}
footer small{ display:block; float: inherit; padding-top:20px; }
}


/* =ページトップ
------------------------------------------------------------------------------------------*/
.page_top{text-align: right;margin: 0;  width:80px;  text-align:center;position:fixed; right:30px; bottom:40px; font-size:10px; z-index:10; }
.page_top a{ background-image:url(../images/pagetop_icon.png); background-repeat:no-repeat;display:block;height:80px; width:80px; text-indent:-9999px;opacity:0.7;filter: alpha(opacity=70);}
.page_top a:hover{ opacity:1;filter: alpha(opacity=100);  -moz-transition: .5s;
  -webkit-transition: .5s;
  -o-transition: .5s;
  -ms-transition: .5s;
  transition: .5s;}

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


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