@charset "UTF-8";

/*CSSDocument*/


/* html body base
===============================================================*/

/*
html ----------------------------------------------------------*/


html,body{ height:100%; }


*{ margin:0px; padding:0px;}

body{
	color:#333333;
	margin:0;
	padding:0;
	background:#fff;
 font-family: 'Noto Sans JP','游ゴシック体', 'Yu Gothic', YuGothic,"ヒラギノ角ゴ Pro W3","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif" !important;
	-webkit-font-smoothing: antialiased;
	moz-osx-font-smoothing: grayscale;
	text-align:center;
	font-size:100%;
	-webkit-text-size-adjust: 100%;
	font-feature-setting : "palt"
}




a{ 
	color:#202085;
	text-decoration:underline;
	}
a:visited{ 
	color:#202085;
	text-decoration:underline;
	}
a:hover{ 
	color:#202085;
	text-decoration:	none;
	}
a:active{ 
	color:#202085;
	text-decoration:none;
	}

ul{ list-style:none;}

a:hover img {
	filter: alpha(opacity=70) !important;
	-moz-opacity:0.70 !important;
	opacity:0.70 !important;
	-webkit-transition: all .2s linear;
}

img{
	margin:0;
	padding:0;
	vertical-align:top;
 max-width: 100%;
 height: auto;
	}






.sp{
	display:none;
	}

.pc{
	display:block;
	}

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


img{
	max-width:100%;
	height:auto;
	}

.sp{
	display:block;
	}

.pc{
	display:none;
	}
	
		
}


/*
html ----------------------------------------------------------*/



/* body base
===============================================================*/		



/* header
===============================================================*/


header{
	height:auto;
	background:rgba(255,255,255,1);
	position:relative;
	width:100%;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	}

header .in{
	width:1500px;
	box-sizing:border-box;
	padding:1%;
	margin:0 auto;
	text-align:left;
	position:relative;
	}

header .logo{
	text-align:left;
	height:46px;
 width: auto;
	float:left;
 position: relative;
 padding: 2% 0 4%;
	}

header .logo img{
width:auto !important;
max-width:auto !important;
	height:100%;
	}


header nav#global{
 letter-spacing: -.4em;
 display: block;
 clear: both;
 
}
header nav#global li{
 width: calc(100% / 5);
 box-sizing: border-box;
 padding: 0 .5% 1%;
 letter-spacing: 2px;
 display: inline-block;
 text-align: center;
 font-size: 1.5em;
 
}
header nav#global li a{
 display: block;
 border-bottom: 3px solid #bbbbbc;
 padding-bottom: 5%;
 color: #000;
 transition: .3s all ease-in;
 text-decoration: none;
}
header nav#global li a:hover{
 display: block;
 border-bottom: 3px solid #0303b6;
 padding-bottom: 5%;
 text-decoration: none;
}
header nav#global li a.cr{
 display: block;
 border-bottom: 3px solid #0303b6;
 padding-bottom: 5%;
 text-decoration: none;
}


.h_menu{
 float: right;
 padding: 2% 0 4%;
 font-size: 1.1rem;
}
.h_menu div{
	display:inline-block;
}
.h_menu div.right{
	margin-left: .5em;
}
.h_menu div.right ul {
	display: flex;
}
.h_menu div.right ul img {
	display: inline-block;
	vertical-align: middle;
	width: 20px !important;
	height: 14px !important;
}
.h_menu div.left {
	margin-right: .5em;
}


.h_menu a.ja{
background:url(../images/ico_japan.png) no-repeat left 50%;
background-size:18px;
padding-left:1.7em;
}
.h_menu a.en{
background:url(../images/ico_usa.png) no-repeat left 50%;
background-size:18px;
padding-left:1.7em;
}

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

header .in{
	width:100%;
	}
 header .logo{
	height:40px;
	}
 
 
}


@media screen and (max-width: 1280px) {
 
header .logo{
	height:35px;
	}
header nav#global li{
 font-size: 1.2em;
}
 
}

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

 header .logo{
	height:30px;
	}
header nav#global li{
 font-size: 1em;
}
 
}

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


header .logo{
	padding-top:15px;
	height:20px;
	}
 header .logo img{
height:20px;
width:auto !important;
max-width:auto !important;
}
 
}


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

header nav#global{
 display: none;
}
 .h_menu{
  display: none;
 } 
 header .logo{
	height:25px;
	}
 
 
.sp_menu.close{
	display:block;
	top:1%;
 position: absolute;
	right:2px;
	z-index:10000;
	transition-property: right;
	transition-duration: .32s;
	transition-timing-function: ease-out;
	}

.sp_menu.open{
	display:block;
	position:fixed;
	top:1%;
	right:10px;
	z-index:10000;
	transition-property: right;
	transition-duration: .32s;
	transition-timing-function: ease-out;
	}	
	



/* Toggle Button */

.sp_menu.close #nav-toggle {
	position:absolute;
    display: block;
    right: 0;
    top: 0;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 202;
	padding:1%;
	box-sizing:border-box;
	 transition-property: background;
  transition-duration: .32s;
  transition-timing-function: liner;
}

.sp_menu.close #nav-toggle div {
    position: relative;
	display:block;
}
.sp_menu.close #nav-toggle a{
	display:block;
    width: 50px;
    height: 50px;
	}



.sp_menu.close #nav-toggle span {
    display: block;
    position: absolute;
    height: 1px;
    width: 50%;
    left: 0;
	right:0;
	margin:auto;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
.sp_menu.close #nav-toggle span:nth-child(1) {
    top: 13px;
}
.sp_menu.close #nav-toggle span:nth-child(2) {
    top: 22px;
}
.sp_menu.close #nav-toggle span:nth-child(3) {
    top: 31px;
}

.sp_menu.close #nav-toggle a span {
    background: #38372b;
	}
.sp_menu.close #nav-toggle a.navSecond span {
    background: #333;
	}
	
	
.sp_menu.open #nav-toggle {
	position:absolute;
    display: block;
    right: 0;
    top: 0;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 202;
	padding:1%;
	box-sizing:border-box;
	 transition-property: background;
  transition-duration: .32s;
  transition-timing-function: liner;
}

.sp_menu.open #nav-toggle div {
    position: relative;
	display:block;
}
.sp_menu.open #nav-toggle a{
	display:block;
    width: 50px;
    height: 50px;
	}
	

.sp_menu.open #nav-toggle span {
    display: block;
    position: absolute;
    height: 1px;
    width: 50%;
	right:15px;
	margin:auto;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}

.sp_menu.open #nav-toggle a span {
    background: #fff;
	}

 
	
.sp_menu.open  span:nth-child(1) {
	top: 22px;
	-webkit-transform: rotate(315deg);
	-moz-transform: rotate(315deg);
	transform: rotate(315deg);
}
.sp_menu.open  span:nth-child(2) {
	width: 0;    top: 22px;
	opacity:0;
	left: 50%;
}
.sp_menu.open  span:nth-child(3) {
	top: 22px;
	-webkit-transform: rotate(-315deg);
	-moz-transform: rotate(-315deg);
	transform: rotate(-315deg);
}



.sp_menu.open{
	right:0;
	}


}

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


.sp_menu.navSecond.close{
	top:5px;
	right:1%;
	}

.sp_menu.navSecond.open{
	top:5px;
	right:1%;
	}	
}	




/* nav
===============================================================*/

aside{
	width:280px; 
	position:fixed;
	top:0;
	right:-300px;
	opacity:0;
	height:100%;
	background:rgba(0,87,163,0.9);
	z-index:9999;
	box-sizing:border-box;
	 transition-property: right;
  transition-duration: .32s;
  transition-timing-function: ease-out;
	-webkit-transition: all .3s ease-in;
	transition: all .3s ease-in;
	}

aside.open{
	right:0;
	opacity:1;
	}





aside nav{
  padding-top:20px;
	display:block;
	text-align:left;
	width:100%;
	box-sizing:border-box;
	position:fixed;
	top:0;
	}
	
	
aside nav a{
	text-decoration:none;
	font-weight:normal;
	line-height:1;
 padding: 10px 8px 15px;
 margin: 0 10px;
	display:block;
 box-sizing: border-box;
 position: relative;
 color: #fff !important;
 border-bottom: 1px solid rgba(255,255,255,0.3);
	}
aside nav a:hover{
 margin-top: 0;
 text-decoration: none;
 box-sizing: border-box;
 color: #fff !important;
	}


aside nav dt{
	margin-bottom:0;
 font-size: 10px;
	display:block;
	padding:0 5px;
	vertical-align:middle;
	text-align:left;
 color: #fff !important;
	}
aside nav dt span{
	font-size:16px;
 font-family: 'EB Garamond' !important;
	font-weight:normal;
	letter-spacing:2px;
 padding-bottom: 3px;
 display: block;
	}


aside nav dd .button {
    color: #0057a3 !important;
    text-decoration: none;
    text-align: center;
    position: relative;
    z-index: 10;
    display: block;
 width: 200px;
 height: 40px;
 line-height: 40px;
 border-radius: 20px;
 font-size: 20px;
 font-weight: bold;
 letter-spacing: 5px;
 margin-top: 15px;
}
aside nav dd a .button { 
    color: #0057a3 !important;
}

aside nav dd .button::before {
    content: '';
    background-color: #fff;
    display: block;
    position: absolute;
 width: 200px;
 height: 40px;
 line-height: 40px;
 border-radius: 20px;
    z-index: -1;
    box-shadow:
        0 0 0 0 #fff,
        0 0 0 0 #0057a3;
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
}




/* body
===============================================================*/








/* footer
===============================================================*/
	
#gototop a{
	background:#e6eaf1;
	padding:24px 0 30px;
	text-align:center;
	width:100%;
	display:block;
	}
	
	
#gototop a:hover{
	background:#dce3ed;
	padding:24px 0 30px;
	text-align:center;
	-webkit-transition: background-color .2s linear;  
	}


footer{
	background:#e3e3e3;
	width:calc(100%);
	position:relative;
	clear:both;
 padding: 3% 0;
 overflow: hidden;
 text-align: center;
	}

footer .in{
 width: 1500px;
 margin: 0 auto;
}

.fleft{
 width: 50%;
 float: left;
 text-align: left;
}
.fright{
 width: 50%;
 float: right;
 text-align: right;
}

footer ul{
 margin-bottom: 3%;
 
}

footer li{
 display: inline-block;
 font-size: 12px;
 padding: 0 3%;
 position: relative;

}
footer li a{
color:#000;
}
footer li:after{
 content: "";
 border-right: 1px solid #000;
 position: absolute;
 right: 3%;
 top: 0;
}



.flogo{
 height: 30px;
 width: auto;
 margin: 0 0 2% 0;
}
.flogo img{
 height: 30px;
 width: auto;
 max-width: auto;
}
.fleft p{
 line-height: 2;
 letter-spacing: 1px;
 
}

.f_btn{
 margin-bottom: 3%;
}

.f_btn a{
 background: #000;
 width: 60%;
 height: 60px;
 border-radius: 30px;
 line-height: 60px;
 text-align: center;
 color: #fff;
 font-size: 18px;
 display: inline-block;
 transition: .4s all ease-out;
 text-decoration: none;
}
.f_btn a:hover{
 background: rgba(0,0,0,0.7);
 text-decoration: none;
}


#copyright{
 text-align: right;
	}

#copyright small{
	font-size:12px;
	letter-spacing:1px;
	}





@media screen and (max-width: 1500px) {
 
 footer .in{
 width: 100%;
  padding: 3% 5%;
  box-sizing: border-box;
}
 
}

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

}


@media screen and (max-width: 768px) {
 
 .fleft{
 width: 100%;
 float: none;
 text-align: left;
}
.fright{
 width: 100%;
 float: none;
 text-align: center;
 margin-bottom: 7%;
}
 #copyright{
  padding-top: 4%;
 text-align: center;
	}
 
}

@media screen and (max-width: 480px) {
 
footer li{
 font-size: 11px;
 width: auto;
padding: 1.5% 3%;
 box-sizing: border-box;
 text-align: left;
}

 .f_btn a{
 width: 90%;
 height: 50px;
 border-radius: 25px;
 line-height: 50px;
 font-size: 14px;
}
 
 
.flogo{
 width: 70%;
} 
 .fleft p{
  font-size: 10px;
 line-height: 1.5;
 letter-spacing: 1px;
}
#copyright small{
	font-size:10px;
	letter-spacing:1px;
	} 
 
 
}