@charset "UTF-8";
/* font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Shippori+Mincho:wght@400;500;700&family=Inter:wght@200;300;400;500;600;700;900&display=swap');

/*----------------------------------------------------
　reset
------------------------------------------------------*/
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {  
    margin:0; 
    padding:0; 
} 
table { 
    border-collapse:collapse; 
    border-spacing:0; 
} 
fieldset,img {  
    border:0; 
} 
address,caption,cite,code,dfn,em,th,var {
    font-style:normal; 
    font-weight:normal; 
}
strong {
    font-style:normal; 
    font-weight:bold;
}
li { 
    list-style:none; 
} 
caption,th { 
    text-align:left; 
} 
img{border:none; vertical-align:top;}
/*----------------------------------------------------
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Shippori Mincho', serif;
------------------------------------------------------*/
body {
  font-size: 16px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.7;
  color: #121212;
}
.container{
  width: 90%;
  max-width: 1620px;
}
@media screen and (max-width: 1600px) {
  body {
    font-size: 15px;
  }
}
@media screen and (max-width: 1280px) {
  body {
    font-size: 14px;
  }
}
@media screen and (max-width: 800px) {
  body {
    font-size: 13px;
  }
}
@media screen and (max-width: 480px) {
}
img {
  max-width: 100%;
  vertical-align: top;
}
ul, ol, dl {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {
  color: #005FA3;
  transition: all 0.1s ease;
  text-decoration: none;
}
a:hover {
  opacity: 0.7;
}


/* ------------------------------------

---------------------------------------　*/
div.pc{display: block;}
div.sp{display: none;}
img.pc,br.pc{display: inline;}
img.sp,br.sp{display: none;}
@media screen and (max-width: 900px) {
div.pc{display: none;}
div.sp{display: block;}
img.pc,br.pc{display: none;}
img.sp,br.sp{display: inline;}
}




/* ------------------------------------

---------------------------------------　*/
header{
display: block;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

header h1{
float: left;
text-align: left;
width: 15%;
min-width: 120px;
max-width: 220px;
margin: 30px 0 0 3%;
}


header .head-nav{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 5;
  width: 118px;
  overflow: hidden;
  min-height: 236px;
/*  display: none;*/
}
header .head-nav.open{
width: 100% !important;
height: 100% !important;
}


#head-gnav{
position: relative;
float: right;
overflow: hidden;
margin: 30px 118px 0 0;
width: 68%;
max-width:1200px;
}
#head-gnav li{
float: left;
margin:0 2em 0.5em 0;
}
#head-gnav li a{
color: #121212;
}




header .head-nav #gnav{
display: none;
}

@media (max-width: 1400px) {
#head-gnav li{
margin:0 1.2em 0.5em 0;
}
}
@media (max-width: 1000px) {
header h1{
margin: 10px 0 0 3%;
}
#head-gnav{
display: none;
}
header .head-nav{
  display: block;
  width: 60px;
  min-height: 120px;
}
header #gnav{
  display: block;
  width: 90%;
  margin: 0 auto;
  padding: 1.5em 0;
  text-align: left;
}
header #gnav li{
  float: none;
}
}


/*
----------------------------------------------*/

.navigation.open {
position: relative;
width: 100%;
min-height: 100%;
margin: 0;
color: #fff;
text-align: center;
background: rgba(0,95,163,.95);
	opacity: 1;
	visibility: visible !important;
	-moz-transition: opacity 0.9s;
	-o-transition: opacity 0.9s;
	-webkit-transition: opacity 0.9s;
	transition: opacity 0.9s;
}
.navigation a{
	color:#fff;
}
.navigation a:hover, .navigation a.active {
	color:#fff;
}
.nav-head-contact{
	position: absolute;
	right: 0;
  top:118px;
  width: 118px;
  height: 118px;
  display: block;
  background: #005FA3;
  text-align: center;
  vertical-align: middle;
}
.nav-head-contact img{
width: 71%;
margin-top: 20%;
}
.open .nav-head-contact{
display: none;
}

.nav-toggle {
	/*display: none;*/
	height: 118px;
	overflow: hidden;
	position: absolute;
	right: 0;
	text-indent: 100%;
	top: 0;
  background: #1DA0FF;
	white-space: nowrap;
	width: 118px;
	z-index: 9;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
header.fixed .nav-toggle {
	top: 18px;
}
.nav-toggle:before, .nav-toggle:after {
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	-webkit-transition-property: -webkit-transform;
	transition-property: transform;
}
.nav-toggle:before {
/*  background: rgba(222,239,233,1);*/
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-webkit-transform: scale(1);
	transform: scale(1);
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}
.nav-toggle:after {
  background: none;
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-webkit-transform: scale(0);
	transform: scale(0);
	-moz-transition-duration: 0s;
	-o-transition-duration: 0s;
	-webkit-transition-duration: 0s;
	transition-duration: 0s;
}
.nav-toggle span {
	background-color: #ffffff;
	bottom: auto;
	display: inline-block;
	height: 3px;
	left: 50%;
	position: absolute;
	right: auto;
	top: 50%;
	width: 25px;
	z-index: 10;
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
.nav-toggle span:before, .nav-toggle span:after {
	background-color: #ffffff;
	content: "";
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transition: -moz-transform 0.3s;
	-o-transition: -o-transform 0.3s;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}
.nav-toggle span:before {
  width: 30px;
	-moz-transform: translateY(-6px) rotate(0deg);
	-ms-transform: translateY(-6px) rotate(0deg);
	-webkit-transform: translateY(-6px) rotate(0deg);
	transform: translateY(-6px) rotate(0deg);
}
.nav-toggle span:after {
	width: 21px;
	-moz-transform: translateY(6px) rotate(0deg);
	-ms-transform: translateY(6px) rotate(0deg);
	-webkit-transform: translateY(6px) rotate(0deg);
	transform: translateY(6px) rotate(0deg);
}
.nav-toggle.close-nav:before {
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-webkit-transform: scale(0);
	transform: scale(0);
}
.nav-toggle.close-nav:after {
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-webkit-transform: scale(1);
	transform: scale(1);
}
.nav-toggle.close-nav span {
  width: 30px;
	background-color: rgba(255, 255, 255, 0);
  box-shadow:none;
}
.nav-toggle.close-nav span:before, .nav-toggle.close-nav span:after {
  width: 30px;
  background-color: #fff;
}
.nav-toggle.close-nav span:before {
	-moz-transform: translateY(0) rotate(45deg);
	-ms-transform: translateY(0) rotate(45deg);
	-webkit-transform: translateY(0) rotate(45deg);
	transform: translateY(0) rotate(45deg);
}
.nav-toggle.close-nav span:after {
	-moz-transform: translateY(0) rotate(-45deg);
	-ms-transform: translateY(0) rotate(-45deg);
	-webkit-transform: translateY(0) rotate(-45deg);
	transform: translateY(0) rotate(-45deg);
}

@media screen and (max-width: 1000px) {
.nav-head-contact{
	position: absolute;
	right: 0;
  top:60px;
  width: 60px;
  height: 60px;
}
.nav-toggle {
	display: block;
  width: 60px;
  height: 60px;
}

}
/*
----------------------------------------------*/
.navigation{
  float: right;
  width: 70%;
  margin-right: 5%;
  padding: 1.5em 0 0;
  text-align: right;
}

.navigation.open h2{
width: 30%;
margin: 0 auto 2em;
text-align: center;
}
.navigation.open #gnav{
display: block;
margin: 0 0 118px;
}
.navigation.open #gnav li{
margin: 0 0 1em;
text-align: center;
}
.navigation.open #head-contact-nav{
overflow: hidden;
width: 90%;
max-width: 840px;
margin: 0 auto;
}
.navigation.open #head-contact-nav li{
width: 48%;
max-width: 410px;
}
.navigation.open #head-contact-nav li:nth-child(1){
float: left;
}
.navigation.open #head-contact-nav li:nth-child(2){
float: right;
}

@media screen and (max-width: 1000px) {
.navigation {
float: none;
text-align: center;
}
.navigation ul{
  width: 90%;
  margin: 0 auto;
  padding-bottom:1em;
}
.navigation.open #gnav{
display: block;
margin: 0 auto 3em;
}
}
@media screen and (max-width: 640px) {
.navigation.open{
overflow-y: auto;
}
.navigation.open h2{
margin: 0 auto 0.5em;
}
.navigation.open #gnav{
display: block;
margin: 0 auto 0;
}
.navigation.open #gnav li{
margin: 0 0 1em;
font-size: 15px;
}
.navigation.open #head-contact-nav li{
float: none !important;
width: 78%;
max-width: 410px;
margin: 0 auto;
}
.navigation.open #head-contact-nav li:nth-child(1){
margin-bottom: 2em;
}
}


/* ------------------------------------

---------------------------------------　*/





/* ------------------------------------

---------------------------------------　*/
.mainimage{
clear: both;
margin: 0 0 60px;
text-align: center;
background: url("img/test/main_body.jpg") no-repeat center top;
}

@media screen and (max-width: 1920px) {
.mainimage{
background: none;
}
}

@media screen and (max-width: 1000px) {
.mainimage{
margin: 0 0 2em;
}
}

/* ------------------------------------

---------------------------------------　*/

#contents #main{
max-width: 690px;
margin: 0 auto 5em;
overflow: hidden;
}





/* ------------------------------------

---------------------------------------　*/

footer{
clear: both;
overflow: hidden;
padding: 2em 0 0;
text-align: center;
}
footer .cont{
width: 90%;
margin: 0 auto;
overflow: hidden;
padding: 3em 0;
background: #fff;
}

footer h2{}



footer #foot-nav{
clear: both;
overflow: hidden;
padding: 2.5em 0;
}
footer #foot-nav li{
display: inline-block;
margin: 0 1em;
}

footer #foot-nav li a{
color: #121212;
}




footer #copyright{
padding:3em 0.5em;
font-size: 81%;

}


@media (max-width: 60px) {

footer #foot-nav li{
}
}
/*
-------------------------------*/



/* ------------------------------------

---------------------------------------　*/
#link-area{
clear: both;
overflow: hidden;
padding: 80px 0 80px;
background: #005FA3;
}

#link-area ul{
overflow: hidden;
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
#link-area ul li{
width: 46%;
}
#link-area ul li:nth-child(1){
float: left;
}
#link-area ul li:nth-child(2){
float: right;
}


@media screen and (max-width: 1000px) {
#link-area{
padding: 2em 0 2em;
}
#link-area ul li{
width: 48%;
}
}


@media screen and (max-width: 640px) {
#link-area ul li{
float: none !important;
margin: 0 auto 1.7em;
width: 90%;
}
}


/* ------------------------------------

---------------------------------------　*/