@charset "utf-8";

@media screen and (max-width: 767px) {}
@media screen and (min-width: 768px) {}
@media screen and (min-width: 768px) and (max-width: 1024px) {}
/*-------------------------------------------------
レイアウト
-------------------------------------------------*/
body{
	text-align:left;
	font-size: 100%;
	line-height:1.6;
	letter-spacing:0.05em;
	color:#096b91;
	background:#ffffff;
	font-family:"Noto Sans JP","Noto Serif JP", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic",'ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo', sans-serif;
	font-variant: normal;
	padding-bottom:0px;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	}
html.is-open{ overflow-y: hidden;}
#wrap{ width: 100%; height: 100%; position: relative;}
.inner{ margin-right:auto; margin-left:auto;}
.inner:before{content:" ";display:table;}
.inner:after{ clear:both;}
/*ブラウザサイズ別指定*/
@media screen and (max-width: 767px) {
#wrap{}
.inner{ margin-right:20px; margin-left:20px;}
}
@media screen and (min-width: 768px) , print{
.inner{ max-width:1200px;}
.container{ margin-right:40px; margin-left:40px;}
}

/*-----------------------------------------------------
header
-----------------------------------------------------*/
#header_frame{ overflow: hidden;}
.header_title p{ -webkit-transition: all 0.3s ease;transition: all 0.3s ease;}

/*ブラウザサイズ別指定*/
@media screen and (max-width: 767px) {
	#header_frame{ padding: 10px;}
	.header_title h1{ width: 160px;}
	.header_title p{ font-size: 0.6em;}
}
@media screen and (min-width: 768px), print{
	#header_frame{ padding-top: 20px; margin-bottom: 20px;}
	.header_title{ float: left; width: 420px; margin-left: 40px;}
	.header_title h1{ float: left; width: 182px; margin-right: 20px;}
	.header_title p{ font-size: 0.7em; padding-top: 36px;}
}


/*-----------------------------------------------------
menu
-----------------------------------------------------*/	
/* ハンバーガー */
#menu-icon{ position: fixed; z-index: 9999; -webkit-transition: all 0.3s ease;transition: all 0.3s ease;}
#menu-icon span{ background: #ffffff; height: 2px; display:block; -webkit-transition: all 0.3s ease;transition: all 0.3s ease;}

#menu-icon{ display:inline; background: #096b91; cursor:pointer; text-align: center; border-radius: 50%;}
#menu-icon.active{background: #1f9fd1;}
#menu-icon.active .first{transform:rotate(45deg);-webkit-transform:rotate(45deg); margin-top:7px;}
#menu-icon.active .second{transform:rotate(135deg);-webkit-transform:rotate(135deg); position:relative;}
#menu-icon.active .third{ display: none;}

/* メニュー */
#menu{ padding-top: 10vh;}
#menu{ position: fixed; top: 0; left:0; width:100%; height: 100%; z-index: 8000; transform: translateY(-100%); background: rgba(9,107,145,0.9); -webkit-transition: all 0.6s ease;transition: all  0.6s ease; overflow-y: scroll;}
#menu.open { opacity: 1; transform: translateY(0);}
#menu::-webkit-scrollbar{ width: 6px;}
#menu ul li{ font-weight: bold; text-align: center;}
#menu ul li a{ display: block; color: #ffffff; height: 14vh;}
#menu ul li a:hover{ color: #ffff00;}

#header_menu ul li{ font-weight: bold;}
#header_menu ul li a{ display: block; color: #096b91;}
#header_menu ul li a:hover{ background: #096b91; color: #ffffff;}

/*ブラウザサイズ別指定*/
@media screen and (max-width: 767px) {
	/* ハンバーガー */
	#menu-icon{ right: 16px; top: 16px; width: 50px; height: 50px; padding: 17px 15px; border-radius: 30px;}
	#menu-icon span{ width: 20px; margin-bottom: 6px;}
	#menu-icon.active .second{ top:-8px;}

	/* メニュー */	
	#menu{ padding: 20px;}
	
	#header_menu{ display: none;}
	#menu ul li a{ font-size: 8vw; padding: 20px;}

	
}
@media screen and (min-width: 768px), print{
	/* ハンバーガー */
	#menu-icon{ right: 40px; top: 20px; width: 60px; height: 60px; padding: 22px 18px;}
	#menu-icon span{ width: 24px; margin-bottom: 5px;}
	#menu-icon.active .second{ top:-7px;}

	/* メニュー */
	#menu ul li a{ font-size: 3vw; padding: 20px;}

	#header_menu ul{ float: right; padding-top: 20px; margin-right: 120px;}
	#header_menu ul li{ margin: 0 2px;}
	#header_menu ul li a{ padding: 1px 14px; border-radius: 20px;}
	
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
	#header_menu{ display: none;}
}



/*-------------------------------------------------
共通指定
-------------------------------------------------*/
#main_contents{ clear: both;}

/* 分割 */
.list_01{ display:-webkit-flex;display: flex; -webkit-justify-content:flex-start;justify-content:flex-start; -webkit-flex-wrap: wrap;flex-wrap: wrap;}
.list_02{ display:-webkit-flex;display: flex; -webkit-justify-content:justify;justify-content: space-between; -webkit-flex-wrap: wrap;flex-wrap: wrap;}

/*-----------------------------------------------------
footer
-----------------------------------------------------*/
#footer_frame{ background: #fff; text-align: center; border-top: 1px solid #096b91;}
#footer_frame h1{ font-weight: bold;}
#footer_frame h1 img{ width: 64px; height: 64px;}

#copy{ clear: both; font-weight: bold;}


/*ブラウザサイズ別指定*/
@media screen and (max-width: 767px) {
	#footer_frame{ padding-top: 40px;}
	#footer_frame h1{ display: inline; font-size: 1.5em;}
	#footer_frame h1 img{ width: 40px; height: 40px; margin-right: 10px;}
	#footer_frame p.footer_info{ padding-top: 20px; font-size: 0.6em;}
	
	#copy{ padding: 40px 0; font-size: 0.6em;}
}
@media screen and (min-width: 768px), print{
	#footer_frame{ padding-top: 40px;}
	#footer_frame h1{ display: inline; font-size: 2.2em; margin-right: 40px;}
	#footer_frame h1 img{ margin-top: -6px; margin-right: 20px;}
	#footer_frame p.footer_info{ display: inline; padding-top: 20px;}
	
	#copy{ padding: 80px 0; font-size: 0.7em;}
}

/* page-top */
#page-top {
	position: fixed;
/*	font-size: 60%;*/
	margin-bottom:0px;
	line-height: 1.2;
	z-index:700;
}
#page-top span {
	text-decoration: none;
	color: #fff;
	text-align: center;
	font-weight: bold;
	display: block;
	background:#8fc2d6;
/*	border-radius:20px 20px 0 0;*/
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}
#page-top span img{
	opacity: 1;
	filter: alpha(opacity=100);
	-moz-opacity: 100;
}

#page-top span:hover {
	cursor: pointer;
	text-decoration: none;
	opacity: 0.6;
	filter: alpha(opacity=60);
	-moz-opacity: 60;
}

#page-top {	bottom: 10px; right: 10px;}
#page-top span { width: 45px; height: 45px; padding: 18px 15px;}
#page-top span img{ width:15px; height: 9px;}