@charset "UTF-8";
/* CSS Document */
html{
min-height: 100%;
position: relative;
font-size: 62.5%;
}

body {
font-size: 1.6rem;  
font-family: 'Rounded Mplus 1c','YuGothic','ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
-webkit-text-size-adjust: none;
line-height: 1.6;
overflow-x: hidden;
}

sitemap
.clr{
clear:both;
width:1px;
height:1px;
}

header, nav, article, aside, section, footer {
display:block;
}

img{
border:none;
margin:0px;
padding:0px;
}

p{
margin:0px;
padding:0px;
/*line-height: 16px;*/
}

a{
overflow:hidden;
color:#065496;
text-decoration: none;
}

a:link{
text-decoration:none;
}

a:hover{
color:#0079df;
/*text-decoration:underline;*/

}
.wrapper {
	position: relative;
	width: 100%;
	height: 100%;

}
.container {
margin-right: auto;
margin-left: auto;
}

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

header{
margin-top: 0em;
width: 100%;
/*border: 1px solid #000;*/
}
h1,
h2{
float: left;
}
#navi{
width: 100%;
border-top: 1px solid #000;
margin-top: 0.5em;
padding-top: 0.5em;
margin-bottom: 2em;
}

#navi ul,
#gnav ul{
float: right;
}
#navi li,
#gnav li{
font-family: bely, serif;
font-weight: 400;
font-style: normal;
float: left;
margin-left: 1.5em;
}
#gnav ul{
margin-top: 0.2em;
}
#navi li{
font-size: 1.6rem;
line-height: 1.5;
}
#gnav li{
font-size: 1.3rem;
line-height: 1.5;
}

.site-header{
background: #fff;
display: inline-block;
justify-content: space-between;
width: 100%;
}
.header-c{
background: #DDD;
display: flex;
justify-content: space-between;
padding: 10px;
position: fixed;
top: -200px;
transition: .5s;
width: 100%;
left: 0;
}
.header-c.show{
top: 0;			
}
.header-c .gnav__menu__item a{
color: #fff;
text-decoration: none;
}

#logo_h{
height: 45px;
}

/*---------------------------------------------*/
#hm{
display: none;

}

#g-nav{
position:fixed;
z-index: 999;
top:-120%;
left:0;
width:100%;
height: 100vh;
background:#DDD;
/*動き*/
transition: all 0.6s;
}

#g-nav.panelactive{
    top: 0;
}
#g-nav.panelactive #g-nav-list{
position: fixed;
z-index: 999; 
width: 100%;
height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}

#g-nav ul {
position: absolute;
z-index: 999;
top:50%;
left:50%;
transform: translate(-50%,-50%);
margin-top: 1em;

}

#g-nav li{
list-style: none;
text-align: center;
font-family: bely, serif;
font-weight: 400;
font-style: normal;
font-size: 1.2rem;
line-height: 1.5;
}

#g-nav li:nth-child(3){
border-top: 1px solid #000;
margin-top: 1em;
padding-top: 0.5em;
}


#g-nav li a{
	color: #333;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}

/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
z-index: 9999;/*ボタンを最前面に*/
top:10px;
right: 10px;
cursor: pointer;
width: 50px;
height:50px;
}
	
/*×に変化*/	
.openbtn span{
display: inline-block;
transition: all .4s;
position: absolute;
left: 14px;
height: 3px;
border-radius: 2px;
background-color: #666;
width: 45%;
}

.openbtn span:nth-of-type(1) {
	top:15px;	
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

.openbtn.active span:nth-of-type(1) {
top: 18px;
left: 18px;
transform: translateY(6px) rotate(-45deg);
width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
top: 30px;
left: 18px;
transform: translateY(-6px) rotate(45deg);
width: 30%;
}
/*---------------------------------------------*/
section{
padding: 20px 0;
}

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

footer{
width: 100%;
height: 130px;
background-color: #273f4d;
}
.wrap_footer_l{
float: left;
width: 50%;
margin-top: 1em;
}
.wrap_footer_r{
font-family: bely, serif;
font-weight: 400;
font-style: normal;
font-size: 1.2rem;
line-height: 1.5;
float: right;
text-align: right;
margin-top: 1em;
}
.wrap_footer_r img{
padding-top: 0.5em;
}
.wrap_footer_r a{
color: #FFF;
}
.wrap_footer_r ul{
margin-top: 0.5em;
}
.wrap_footer_r li{
float: left;
margin-left: 1em;
}

.wrap_copy{
font-family: bely, serif;
font-weight: 400;
font-style: normal;
font-size: 0.8rem;
line-height: 1.5;
color: #FFF;
width: 100%;
margin-top: 0.5em;
float: left;
}


@media screen and (max-width: 479px) {
.container {
width: 100%;
}
header{
display: flex;
position: fixed;
/*position: relative;*/
margin-top:0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 1rem;
padding-right: 1rem;
}
h1{
width: 100%;
display: inline-block;
}
#logo_e_m{
width: 30%;
}
#logo_j_m{
width: 60%;
float: left;
}

#logo_e_m2{
width: 70%;
}
#logo_j_m2{
width: 90%;
}

h2{
margin-top: 0.3em;
right: 1.5%;
text-align: right;
}
#navi,
.header-c{
display: none;
}
#gnav li{
font-size: 1.2rem;
line-height: 1.5;
}

.site-header{
top: 0;			
}
#hm{
display: block;
z-index: 999;

}
.wrap_footer_l{
margin-left: 0.6em;
}
.wrap_footer_l img{
width: 70%;
}
.wrap_copy{
margin-left: 1em;
}
.wrap_footer_r{
display: none;
}
}

@media screen and (min-width: 480px) and (max-width: 767px){
.container {
width: 100%;
}
header{
position: relative;
margin-top: 0.8em;
padding-left: 1rem;
padding-right: 1.5rem;
}
#logo_e_m{
width: 45%;
}
#logo_j_m{
width: 70%;
}
h2{
position: absolute;
right: 1.5%;
text-align: right;
}
#logo_h{
height: 35px;
}
#navi{
margin-top: 0;
padding-left: 1rem;
padding-right: 1rem;
}
#gnav{
margin-right: 0.3em;
}



#navi li,
#gnav li{
float: left;
margin-left: 1em;
font-family: bely, serif;
font-weight: 400;
font-style: normal;
}
#navi li{
font-size: 1.4rem;
line-height: 1.5;
}
#gnav li{
font-size: 1.2rem;
line-height: 1.5;
}

.wrap_footer_l{
margin-left: 1em;
}
.wrap_copy{
margin-left: 1.8em;
}
.wrap_footer_r{
margin-right: 1em;
}
}

@media screen and (min-width: 768px) and (max-width: 999px) {
.container {
width: 100%;
}
header{
position: relative;
padding-left: 1rem;
padding-right: 1rem;
margin-top: 2em;
}
#logo_e_m{
width: 60%;
}
#logo_j_m{
width: 90%;
}

h2{
position: absolute;
top: 25%;
right: 1.5%;
text-align: right;
}


#gnav{
margin-right: 0.3em;
}

#navi{
padding-left: 1rem;
padding-right: 1rem;
}
.wrap_footer_l{
margin-left: 1em;
}
.wrap_copy{
margin-left: 1.8em;
}
.wrap_footer_r{
margin-right: 1em;
}
}

@media screen and (min-width: 1000px) {
.container {
width: 1000px;
}
header{
position: relative;
margin-top: 4em;
}
h2{
position: absolute;
top: 25%;
right: 0%;
}




}