@charset "utf-8";

/* =base
------------------------------------------------------------------------------------------*/
*{box-sizing: border-box;}

body {
	text-align: center;
	color: #333;
	font-family:  'Noto Sans JP', "メイリオ","Meiryo","MS PGothic","Osaka",Arial,sans-serif;
	font-size: 14px;
	line-height: 1.5em;;
	height: 100%;
	background-color: #fffa73;
}
html {overflow-y:scroll; height:100%;
	overflow-x: hidden;
}

a {color: #FFFA73;text-decoration: none; outline:none;}
a:hover {color: #FFFA73;text-decoration: none;}
a:hover img{opacity:0.8;filter: alpha(opacity=80);}

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

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

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

/* =header
------------------------------------------------------------------------------------------*/
/*header{position: fixed;top: 0;width: 100%;z-index: 99999;}

.header-logo{height: 30px; position: fixed;left: 2vw;top: 2vw;z-index: 99999;}
.header_nav{position: absolute;right: 2vw;top: 1vw; display: flex;align-items: center;}
.header_nav li {list-style: none;}
.header_nav li a {font-size: 14px; color:rgb(48, 77, 123);padding: 1vw 1.5vw;margin-right: 0.5vw; display: inline-block;}
.header_nav li a img {height: 30px; padding: 0;}
.nav_text{position: relative;display: inline-block;text-decoration: none;}
.nav_text::after {position: absolute;bottom: -4px;left: 0;content: '';width: 100%;height: 2px;background: rgb(48, 77, 123);opacity: 0;visibility: hidden;transition: .3s;}
a:hover::after {bottom: 0px;opacity: 1;visibility: visible;}

@media only screen and (max-width: 900px){
.header-logo{height: 30px;}
	
}*/

/********************** header *******************************/
header{  width:96vw; margin:1vw auto 0; position:fixed; top:0; left:2vw; z-index:999;transition: 1s; }

header h1{ line-height:0;  transition: 0.3s; position:absolute; left:0; top:8px;}
header h1 img{ width:115px;}
header h1.active{ top:-100px;}

.toggle_nav{ float:right;}

.nav nav{ display:inline-block}
.nav ul{ width: 100%; padding-right:10px;}
.nav li {display:inline-block;  float: left; margin-right:0.5em;}
.nav li a{ display:block;  font-weight:600; font-size:14px; color:#1f3364; transition: all 0.3s ease; width:8em; height:36px; line-height:34px; position:relative;}

.nav li a span.btm{ position: absolute; bottom: 0; left:0px; width: 0%; height: 2px; background: #1f3364;
    -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;}

aside.sns-wrap{ display: inline-block; padding-right:1vw;}
aside.sns-wrap li{ display:inline-block; /*float:left;*/ margin-right:7px;}
aside.sns-wrap a{ width:30px;  padding:0; display:block;height:38px; line-height:30px;}
aside.sns-wrap img{ width:100%; vertical-align:middle;}

.archive .nav li a{ color:#1f3364;}
.archive .nav li a span.btm{ background-color:#1f3364;}


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

header{ padding:4px 2%;}
header h1{ padding:6px 0 0 0; left:2%; }
header h1 img{ width:75px;}
	
.global{width:100%; position:fixed; z-index:10; top:0; left:0; overflow-y: hidden; padding-top:0; height:0; background-color:rgba(255,255,255,0.9); 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;}
.nav-active .global{ height:100vh;padding-top:50px;}
.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 ul{ padding-right:0;}
.nav li{ border-bottom:1px solid #1f3364;  margin-right: 0; float:none;}
.nav li:first-child{ border-top:1px solid #1f3364;}
.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; height:auto; line-height:inherit; }
.nav li a strong{ font-size:5vw; line-height:1em; margin-bottom:2vw; }
.nav li a.on{ border-bottom:none;}

.nav nav{ width:100%;}
aside.sns-wrap{ display:block; padding-right:0;}
aside.sns-wrap li{ width:33.33%; margin-right:0; border:none;}
aside.sns-wrap li:first-child{ border:none;}
aside.sns-wrap li a{ padding:3vw 0;}
aside.sns-wrap li img{ width:40%;}

/* Default navigation icon */
.nav_trigger { display: block; position: fixed; width: 30px; height: 25px; right:4vw; top: 10px; z-index: 200;}
.nav-active .nav_trigger { opacity: 0.7;}
.nav_icon { display: inline-block; position: relative; width: 30px; height: 2px; background-color: #1f3364; -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: #1f3364; -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: -8px;}
.nav_icon:after { margin-top: 8px;}
.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);}
.nav-active .nav_icon:after { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}

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


.archive .nav li a{ color:#1f3364;}
}

/* =navi CSS
------------------------------------------------------------------------------------------*/

/* =foot
-----------------------------------------------------------------------------------------*/
footer{
	border-top: 1px solid #ea5d97;
	padding: 3vw 0;
	font-size: 12px; line-height: 1.5em;
}
footer .oe img{width: 220px;}
footer .footbnr{ margin-bottom: 1em;}
footer .footbnr li{ display: inline-block; line-height: 0;}
footer .footbnr li img{ width: 150px;}

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

footer{ padding: 3vw;}
footer .oe img{ width: 60%;}
footer .footbnr li{ width: 45%;}
footer .footbnr li img{ width: 100%;}

	
}

/* =ページトップ
------------------------------------------------------------------------------------------*/
.page_top{text-align: right;margin: 0;  width:80px;  text-align:center;position:fixed; right:30px; bottom:40px;  z-index:10}
.page_top a{background-color:#000; display:block;border-radius: 50%;height:80px; width:80px; line-height:80px; color:#fff; font-family: 'Oswald';font-size:12px;}
.page_top a:hover{background-color:#cc0000; text-decoration:none;}


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



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


/* font
------------------------------------------------------ */