@charset "utf-8";
/* CSS Document */


/* ----------------------------------------------------
   common setting
------------------------------------------------------- */

/* basic :
--------------------------------------------*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Noto Serif JP', serif;
	font-size: 110%;
	color: #3a3a3a;
	background-color: #fff;
	box-sizing: border-box;
	position: relative;
	line-height: 1.8em;
}

@media screen and (max-width: 1200px){
    body{font-size: 100%;}
}

@media screen and (max-width: 1000px){
    body{font-size: 95%;}
}

img {border: none;vertical-align: middle;}
ul,ol {list-style: none;}
em {font-style: normal;}
.clear {clear: both;}
.left {float: left;}
.right {float: right;}
.align_r {text-align: right;}
.align_l {text-align: left;}
.center {text-align: center;}
.clear_fix:after,
.outline:after {
	content:" ";
    display: block;
    height:0px;
    clear:both;
    visibility:hidden;
}
button {
	border: none;
    cursor: pointer;
	background-color: transparent;
	font-size: 100%;
}
.outline {
    max-width: 1200px;
    padding:  0 1em;
	margin: 0 auto;
}

a {
	text-decoration: none;
	color: #000;
}

a:focus {
	border-radius: 0;
	outline-width: 1px;
	outline-color: #C4C9C2;
	outline-style: solid;
}


#main a {
	text-decoration: underline;
	color: #274FA6;
}

#main a:hover {
	text-decoration: none;
}


/*---- block_skip ----*/

.block_skip a {
	display:block;
	height: 0;
	overflow: hidden;
	color: #fff;
	background: #383d44;
	font-size: 100%;
    text-align: center;
}

.block_skip a:focus {
	height: auto;
	line-height: 3em;
    padding: 0.2em;
}

.block_skip a:before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 2em;
    background: url("../img/common/arrow1.svg") no-repeat center;
    background-size: 0.6em;
    transform: rotateZ(90deg);
    vertical-align: middle;
    margin-right: 1em;
}


/* header :
--------------------------------------------*/


header#header:after {
	content:" ";
    display: block;
    height:0px;
    clear:both;
    visibility:hidden;
}

/*---- logo ----*/

header#header .logo {
    padding: 0.8em;
    float: left;
    width: 20%;
	font-size: 150%;
	margin: 0;
}

header#header .logo img {
	width: 100%;
	max-width: 320px;
}



/*---- nav search ----*/

header#header .right {
	width: 80%;
	text-align: right;
	padding: 2em 1em 1em;
}

header#header .nav,
header#header .nav li,
header#header #search,
header#header #search div,
header#header #search form  {
	display: inline;
	vertical-align: middle;
}

header#header .nav li {
	font-size: 90%;
	padding: 0.5em 3em 0.5em 2.5em;
}

header#header .nav li img,
header#header .nav li.search,
header#header .nav li.menu {display: none;}

header#header .nav li.sns {background: url("../img/common/icon_facebook.png") no-repeat left center;background-size: 2em;}
header#header .nav li.lang {background: url("../img/common/icon_lang.svg") no-repeat left center;background-size: 1.7em;}

header#header .nav a:hover {text-decoration: underline;}

header#header #search input {
	height: 3em!important;
	width: 15em;
    border: 1px solid #C4CAC2!important;
}

header#header #search input.btn {
	width: 3em;
	background: #274FA6 url("../img/common/icon_search.svg") no-repeat center;
	background-size: 20px;
	border: none!important;
	border-top: 1px solid #274FA6!important;
	color: #fff;
	overflow: hidden;
	text-indent: -10000px;
	cursor: pointer;
}

@media screen and (max-width: 1500px){
	
    header#header .right {
		padding: 1.5em 1em 1em;
	}
}

@media screen and (max-width: 1300px){
	
	header#header .logo {
		width: 25%;
	}
	
    header#header .right {
		width: 75%;
		padding: 1em 0.5em;
	}
}

/* glnav :
--------------------------------------------*/

/*---- nav ----*/

#glnav {
    font-size: 95%;
    font-weight: bold;
	background: #274FA6;
	padding: 0 0.5em;
	position: relative;
	z-index: 3
}

#glnav ul:after {
	content:" ";
    display: block;
    height:0px;
    clear:both;
    visibility:hidden;
}

#glnav > ul > li {
    display: inline;
	line-height: 1.8em;
}

#glnav > ul > li > a {
    display: block;
    float: left;
    text-align: center;
    padding: 1.8em 5px 1.7em;
	color: #fff;
	position: relative;
}


#glnav > ul > li > a:after {
	content:"";
    display: block;
    height:2px;
	width: 80%;
	background: #274FA6;
	position: absolute;
	bottom: 5px;
	left: 10%;
}

#glnav > ul > li > a:focus:after,
#glnav > ul > li > a:hover:after,
#glnav > ul > li.on > a:after,
#glnav > ul > li > a.current:after {
	background: #fac028;
}

#glnav.open > ul > li.on:nth-child(1) > a:after,
#glnav.open > ul > li.on:nth-child(2) > a:after,
#glnav.open > ul > li.on:nth-child(3) > a:after,
#glnav.open > ul > li.on:nth-child(4) > a:after,
#glnav.open > ul > li.on:nth-child(5) > a:after,
#glnav.open > ul > li.on:nth-child(6) > a:after,
#glnav.open > ul > li.on:nth-child(7) > a:after,
#glnav.open > ul > li.on:nth-child(8) > a:after {
	background: #fac028!important;
}

#glnav.open > ul > li > a:after,
#glnav.open > ul > li > a.current:after {background: #274FA6;}


#glnav > ul > li:nth-child(1) > a {width: 6%;}
#glnav > ul > li:nth-child(2) > a {width: 17%;}
#glnav > ul > li:nth-child(3) > a {width: 17%;}
#glnav > ul > li:nth-child(4) > a {width: 8%;}
#glnav > ul > li:nth-child(5) > a {width: 17%;}
#glnav > ul > li:nth-child(6) > a {width: 8%;}
#glnav > ul > li:nth-child(7) > a {width: 19%; padding: 0.9em 5px 0.8em;}
#glnav > ul > li:nth-child(8) > a {width: 8%;}


@media screen and (max-width: 960px){
	#glnav {
		padding: 0;
	}
	#glnav > ul > li > a {
		padding-left: 1px!important;
		padding-rigth: 1px!important;
	}
	#glnav > ul > li > a:focus:after,
	#glnav > ul > li > a:hover:after,
	#glnav > ul > li.on > a:after {
		width: 98%;
		left: 1%;
	}
}


/* サブメニュー */

#glnav > ul > li > ul {
    width: 100%;
    position: absolute;
    left: 0;
    padding: 3em 2em 7em;
	z-index: 999;
	display: none;
    font-size: 100%;
	background: rgba(39,79,166,0.95);
	top: 80px;
}


#glnav > ul > li > ul > li {
	float: left;
	width: 31.33%;
	margin-left: 3%;
	margin-bottom: 3em;
}


#glnav > ul > li > ul > li > a {
    display: block;
    padding: 1em 0.5em 1em 2.5em;
    background: url("../img/common/arrow4.svg") no-repeat;
    background-position: top 1.5em left 0.5em;
    background-size: 1.2em;
	color: #fff;
	border: 1px solid #fff;
    transition: all 300ms 0s ease;
}

#glnav > ul > li > ul > li > a:hover,
#glnav > ul > li > ul > li > a:focus {background-color: rgba(255,255,255,0.1);}

#glnav > ul > li > ul > li:nth-child(3n + 1) {
	clear: both;
	float: left;
	margin-left: 0;
}

#glnav ul ul ul {
    margin: 1em;
    font-size: 95%;
}

#glnav ul ul ul li span,
#glnav ul ul ul li a {
	font-weight: normal;
	display: inline-block;
	color: #fff;
	padding: 0.3em 0.5em 0.3em 2em;
}

#glnav ul ul ul li a {
	text-decoration: underline;
	background: url("../img/common/arrow2.svg") no-repeat;
    background-position: top 1em left 0;
    background-size: 1.2em;
} 

#glnav ul ul ul li a:hover {text-decoration: none;}



/* 閉じる */

#glnav ul li.close {
	float: none;
    max-width: 100%;
	width: 100%;
	position: absolute;
	bottom: 0;
	margin: 0;
    left: 0;
	text-align: center;
}

#glnav ul li.close a {
    border: none;
    background-image: none;
    position: relative;
	margin: 0;
	padding: 1.2em;
	background: #383d44;
	text-align: center;
    transition: all 300ms 0s ease;
}

#glnav ul li.close a:hover,
#glnav ul li.close a:focus {background: #4c5157;}

#glnav ul li.close a:before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background: url("../img/common/icon_close.svg") no-repeat;
    background-size: 1em;
    vertical-align: middle;
    margin-right: 0.5em;
}

.overlay {
    position: fixed;
    z-index: 2;
    background: rgba(56,61,68,0.7);
    width: 100%;
    height: 100%;
	display: none;
}


/* footer :
--------------------------------------------*/

#footer {
    background: #383d44;
    padding: 2em 0 0;
    text-align: center;
    color: #fff;
}

#footer a {color: #fff;}

#footer .logo img {
    width: 8em;
}

#footer address {
    margin: 1.5em 0;
    font-style: normal;
}

#footer address a {text-decoration: underline;}

#footer address a:hover {text-decoration: none;}

/*---- contact ----*/

#footer .contact {
	margin: 1em 0;
}

#footer .contact li {
	display: inline-block;
	background: url("../img/common/icon_mail.svg") no-repeat;
	background-position: left 2em center;
	background-size: 2em;
}
#footer .contact li a {
	display: inline-block;
	margin: 1em;
	text-align: left;
	padding: 1em 1em 1em 4em;
	border: 1px solid #C4CAC2;
	background: url("../img/common/arrow3.svg") no-repeat;
	background-position: right 0.5em bottom 0.5em!important;
    background-size: 1em!important;
	min-width: 20em;
	border-radius: 1px;
    transition: all 300ms 0s ease;
}

#footer .contact li a:focus,
#footer .contact li a:hover {background-color: rgba(255,255,255,0.1);}


/*---- footer nav ----*/

#footer {overflow: hidden;}

#footer .nav {
    margin: 1em 0 0;
    font-size: 90%;
	padding: 1em 0;
	border-top: 1px dotted #C4CAC2;
	border-bottom: 1px dotted #C4CAC2;
}

#footer .nav li {
    text-align: center;
    display: inline;
    margin-left: 1.2em;
    padding-left: 1.2em;
    border-left: 1px solid #fff;
}

#footer .nav li:first-child {
	border: none;
	margin-left: 0;
    padding-left: 0;
}

#footer .nav li a:hover {text-decoration: underline;}


/*---- copy ----*/

#copy {
    padding: 1em 3em 1em 1em;
	letter-spacing: 0.1em;
	position: relative;
}

#copy a#page_top {
	display: block;
	position: absolute;
	right: 0;
	top: 0.9em;
}

#copy a#page_top:hover,
#copy a#page_top:focus {background-color: rgba(255,255,255,0.1);}

#copy #page_top img {
    width: 2em;
	height: 2em;
	border: 1px solid #C4CAC2;
	padding: 8px;
	transform: rotate(-90deg);
	border-radius: 1px;
}

/* element :
--------------------------------------------*/

/*---- btn ----*/

.btn1,
.btn2 {
    text-align: center;
    margin: 3em auto;
}

.btn1 a,
.btn2 a {
    display: inline-block;
	width: 15em;
    text-align: center;
    padding: 0.8em 1em;
    color: #fff!important;
    background: url("../img/common/arrow3.svg") no-repeat;
	background-position: left 1em center!important;
    background-size: 1em!important;
	border: 1px solid #C4CAC2;
    text-decoration: none!important;
	border-radius: 1px;
    transition: all 300ms 0s ease;
}

.btn2 a {
    color: #fff;
	padding: 1em;
	border: none;
    background: #274FA6 url("../img/common/arrow3.svg") no-repeat;
}
.btn1 a:hover,
.btn1 a:focus {background-color: rgba(255,255,255,0.1);}
.btn2 a:hover,
.btn2 a:focus {background-color: #3d61af;}


@media screen and (max-width: 1200px){
	.btn1 a,
	.btn2 a {
		display: inline-block;
		width: 13em;
		padding: 0.6em 0.5em;
		background-position: left 0.8em center!important;
		background-size: 0.8em!important;
	}
}


/*---- icon ----*/


img.icon {
    width: 1.2em;
    margin: 0 5px;
	vertical-align: middle;
}


/* frexible grid system :
--------------------------------------------*/

.grid_system:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.grid_system img,
img.flex_img {
	max-width: 100%;
	height: auto;
}

.grid_1_4,
.grid_3_4,
.grid_1_3,
.grid_2_3,
.grid_1_2 { 
	display: block;
	float: left;
	margin-left: 3%;
}

.grid_1_3:first-child,
.grid_1_3:nth-child(3n + 1),
.grid_1_4:first-child,
.grid_3_4:first-child,
.grid_2_3:first-child,
.grid_1_2:first-child {
	margin-left: 0;
	clear: both;
	float: left;
}

.grid_1_4 { width: 22.75%; }
.grid_3_4 { width: 68.25%; }
.grid_1_3 { width: 31.33%; }
.grid_2_3 { width: 64%; }
.grid_1_2 { width: 48.5%; }









/* IE11 :
--------------------------------------------*/

@media all and (-ms-high-contrast:none){
	*::-ms-backdrop, header#header .nav li.lang {background-size: 75px;padding-left: 4em;}
	*::-ms-backdrop, .btn1 a,.btn2 a {background-size: 32px!important;}
	*::-ms-backdrop, #footer .contact li {background-size: 80px;background-position: left 20px center;}
	*::-ms-backdrop, #footer .contact li a {background-size: 60px!important;background-position: right 0px bottom 0.5em!important;}
}