@charset "utf-8";


/* Roba-Mimi Common */

.text-left{
text-align: left;
}

.text-center{
text-align: center;
}

.text-right{
text-align: right;
}

#robamimi-area{
background: #fff;
flex: 1;
}

/* robamimi reset*/
#robamimi-area div, #robamimi-area section, #robamimi-area ul, #robamimi-area li, #robamimi-area img, #robamimi-area nav,#robamimi-area p{
box-sizing: border-box;
}

#robamimi-area img{
vertical-align: middle;
}


/*** header ***/

#web-header{
width: 100%;
background-color: #ffffff;
position: fixed;
top: auto;
left: auto;
	z-index: 1000;
}

#web-header #header-h1{
display: flex;
align-items: center;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 4px 0;
}

#web-header #header-h1 #logo-roba{
margin: 0 20px 0 0;
}

#web-header #header-h1 h1{
font-size: 1em;
line-height: 150%;
font-weight: normal;
color: #004098;
flex-grow: 2;
}

#web-header #header-h1 #banner-web{
}

#web-header nav#header-nav{
width: 100%;
background-color: #0044A2;
}

#web-header nav#header-nav ul{
display: flex;
justify-content: flex-end;
width: 100%;
max-width: 1000px;
margin: 0 auto;
}

#web-header nav#header-nav ul li{
margin: 0 5px;
}

#web-header nav#header-nav ul li a{
display: block;
text-decoration: none;
color: #ffffff;
padding: 10px;
position: relative;
}

#web-header nav#header-nav ul li a::after{
content: "";
display: inline-block;
width: 0;
height: 3px;
margin: 0 auto;
position: absolute;
bottom: 4px;
left: 50%;
background-color: #26B17C;
transition: 1.0s;
}

#web-header nav#header-nav ul li:hover a::after{
width: 50%;
left: 25%;
}


/*** article ***/

#page-header{
text-align: center;
width: 100%;
margin: 0 auto;
background-color: #b6e4d2;
}

#page-header img{
width: 100%;
max-width: 1200px;
height: auto;
margin: 0 auto;
}

article{
font-size: 1em;
line-height: 160%;
color: #3f3f3f;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 20px 0;
}

.midashi{
text-align: center;
color: #26B17C;
font-size: 1.6em;
line-height: 160%;
padding: 20px 0;
border: solid 1px #26B17C;
border-radius: 10px;
}

.midashi p{
text-align: center;
}

h2{
display: inline-block;
font-size: 2em;
line-height: 120%;
font-weight: normal;
color: #0055aa;
margin: 1em 0;
border-bottom: solid 5px #0055aa;
}

h3{
font-size: 1.2em;
line-height: 120%;
color: #26B17C;
margin: 0.8em 0 0.5em 0;
}

h3:after{
content: "";
display: block;
width: 3em;
height: 2px;
background: #26B17C;
}

.links-official{
font-size: 1.2em;
}

.links-official a{
text-decoration: none;
display: inline-block;
color: #1FA27F;
margin: 0.5em 0;
padding: 0.5em 1em;
border: solid 1px #1FA27F;
border-radius: 0.5em;
transition: 0.7s;
}

.links-official a:hover {
color: #fff;
background: #1FA27F;
}


/*** footer ***/

#web-footer{
color: #ffffff;
width: 100%;
background-color: #0044A2;
position: fixed;
bottom: 0;
left: auto;
}

#web-footer #footer-area{
display: flex;
justify-content: space-between;
align-items: flex-end;
font-size: 0.85em;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0.5em;
}
	#web-header #header-h1 #logo-roba i {
		display: none;
}



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

#web-header #header-h1{
display: block;
max-width: 100%;
padding: 2vw 3vw;
	position: relative;
	box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.2);
}

#web-header #header-h1 #logo-roba{
margin: 0;
}
	
	#web-header #header-h1 #logo-roba p {
		width: 85%;
		display: inline-block;
		float: left;
	}
	
	#web-header #header-h1 #logo-roba i {
		display: inline-block;
		width: 13%;
		float: right;
		text-align: right;
		margin-top: 21px;
		color: #52BBB7;
	}
	
	#web-header #header-h1 #logo-roba i:before {
		font-size: 36px;
	}
	
	#web-header #header-h1 #logo-roba i.fa-arrow-circle-down.active:before {
    content: "\f0aa";
}



	
	

#web-header #header-h1 h1{
font-size: 0.9em;
flex-grow: 2;
}

#web-header #header-h1 #banner-web{
	display: none;
}

#web-header nav#header-nav{
width: 100%;
background-color: #0044A2;
	display: none;
}

#web-header nav#header-nav ul{
	display: block;
width: 100%;
	max-width: 100%;
margin: 0 auto;
}

#web-header nav#header-nav ul li{
	margin: 0;
	width: 49%;
	display: inline-block;
}
	
#web-header nav#header-nav ul li a{
display: block;
text-decoration: none;
color: #ffffff;
padding: 10px;
position: relative;
}
	
#web-header nav#header-nav ul li.sp a {
	padding: 0 0 10px 0;
	}
		
	
#web-header nav#header-nav ul li.sp a img {
	width: 32vw;
	height: auto;
	}
	

#web-header nav#header-nav ul li a::after{
content: "";
display: inline-block;
width: 0;
height: 3px;
margin: 0 auto;
position: absolute;
bottom: 4px;
left: 50%;
background-color: #26B17C;
transition: 1.0s;
}

#web-header nav#header-nav ul li:hover a::after{
width: 50%;
left: 25%;
}
	
	#robamimi-area article {
		padding: 4vw 3vw;
		box-sizing: border-box;
	}	
	
.midashi {
    font-size: 1.15em;
    line-height: 160%;
    padding: 4vw 2vw;
}	
	
	h2 {
		font-size: 1.3em;
	}	
	

	
	
}