@charset "utf-8";

body{
	background:#FFF;
}

h3, h4, h5, h6, p, li, .form-bt{
font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}

/* All
--------------------------------------------------------------------------*/

#wrap{
	width:100%;
}

#wrap, #header, #key-v, #contents, #footer{
	position:relative;
}

#header{ z-index:4; }
#key-v{ z-index:2; }
#contents{ z-index:1; }
#footer{ z-index:3; }


/* Header
--------------------------------------------------------------------------*/

#header{
	width:100%;
	position:fixed;
	top:0;
}

.header1{
	width:100%;
	background:#55afac;
	overflow:hidden;
	position:relative;
}

.hd-ttl{
	float:left;
	width:100%;
	max-width:382px;
	overflow:hidden;
	position:relative;

}

.header1 h1 img{
	width:100%;
}

.header1 ul{
	float:right;
	margin:17px 5px 0 0;
	width:194px;
}

.header1 li, .header2 li, .header3 li{
	float:left;
}

.header2{
	width:100%;
	background:#277673;
	overflow:hidden;
}

/*
ul#hd2-menu{
	width:980px;
	margin:0 auto;
}
*/


#hd2-menu li{
	width:14%;
}

#hd2-menu li:last-child, #hd2-menu li:first-child{
	width:15%;
}

#hd2-menu li a{
	display:block;
	font-size:90%;
	letter-spacing:0.1em;
	padding:8px 0;
	text-align:center;
	color:#FFF;
	background:#308784;
	border-right: solid 1px #246967;
	transition: background 0.8s ease 0s;
}

#hd2-menu li a:hover{
	background:#F30;
}

#hd2-menu li.in a{
	background:#44c2bc;
}

#toggle{ 
 display: none;
}


@media screen and (max-width:1050px) {

ul#hd2-menu{
	width:100%;
	margin:0 0;
}

}

@media screen and (max-width:640px) {

#header{
	position:relative;
}

.hd-ttl{
	float:none;
	margin:0 auto;
}

.header1 ul{
	float:none;
	margin:5px auto 10px auto;
	overflow:hidden;
}
	
#hd2-menu{
	display: none;
}

#hd2-menu li, #hd2-menu li:last-child, #hd2-menu li:first-child{
	width: 100%;	
}

#hd2-menu li a{
	display: block;
	background:#308784;
	border-right:none;
	border-bottom: solid 1px #246967;
}

#toggle{
	display: block;
	position:absolute;
	right:5px;
	width: 40px;
	height:40px;
	margin-top:-40px;
}

#toggle a{
	display: block;
	position: relative;
	padding:0px;
}


}

/* Key-v
--------------------------------------------------------------------------*/

#key-v{
	width:100%;
	padding-top:85px;
	background:#55afac;
}


#page-key-v{
	width:100%;
	height:250px;
	margin-top:85px;
	background:url(../img/cmn/title/page-ttl.jpg) center no-repeat;
	background-size:cover;	
}

#page-key-v .key-v-box{
	width:980px;
	margin:0 auto;
	position:relative;
	overflow:hidden;
}

#page-key-v h2{
	width:343px;
	margin:0 auto 0 auto;
	padding-top:85px;
}


@media screen and (max-width:1050px) {

#page-key-v .key-v-box{
	width:100%;
	margin:0;
}
}

@media screen and (max-width:640px) {

#key-v{
	width:100%;
	padding-top:0;
}

#page-key-v{
	height:160px;
	margin-top:0px;
}

#page-key-v h2{
	width:343px;
	margin:0 auto 0 auto;
	padding-top:55px;
}

}

@media screen and (max-width:480px) {

#page-key-v h2{
	width:250px;
	padding-top:60px;
}


#page-key-v h2 img{
	width:250px;
}

}


/* Contents
--------------------------------------------------------------------------*/

/*layout*/

#contents{
	width:980px;
	margin:50px auto 20px auto;
}

.cnt-box{
	clear:both;
	overflow:hidden;
}

.cnt-box-f{
	padding:0 0 40px 0;
	clear:both;
	overflow:hidden;
}

.cnt-box-l{
	float:left;
}

.cnt-box-r{
	float:right;
}

.cbw8{ width:79%; }
.cbw7{ width:69%; }
.cbw6{ width:59%; }
.cbw5{ width:49%; }
.cbw4{ width:39%; }
.cbw3{ width:29%; }
.cbw2{ width:19%; }

@media screen and (max-width:1050px) {

#contents{
	width:90%;
	margin:50px 5% 0 5%;
}

}

@media screen and (max-width:640px) {

#contents{
	width:90%;
	margin:30px 5% 0 5%;
}

.cnt-box-f{
	padding:0 0 30px 0;
}

.cnt-box-l{
	float:none;
}

.cnt-box-r{
	float:none;
}

.cbw8, .cbw7, .cbw6, .cbw5, .cbw4, .cbw3, .cbw2{
	width:100%;
}
	
}


/*text*/

.cnt-box h3{
	font-size:180%;
	line-height:120%;
	color:#307f79;
	margin:0 7px 40px 7px;
}

.cnt-box h4{
	font-size:120%;
	padding:12px 15px;
	margin:0 0 40px 0;
	
	color:#FFF;
	
	border-top: solid 1px #5fbfbb;
	border-left: solid 1px #5fbfbb;
	border-bottom: solid 1px #45a4a0;
	border-right: solid 1px #45a4a0;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #4eafab;
	behavior: url(/PIE.htc);
	position:relative;
	clear:both;
}

.cnt-box h5{
	font-size:140%;
	color:#37add3;
	margin:0 15px 30px 15px;
}

.cnt-box h6{
	font-size:100%;
	color:#4c4c4c;
	margin:0px 15px 20px 15px;
	padding:0 0 0 12px;
	border-left: solid 3px #4eafab;
}

.cnt-box p{
	font-size:90%;
	letter-spacing:0.2em;
	line-height:160%;
	color:#333;
	margin:0 15px 20px 15px;
}

.tx-sub-t{
	font-size:80%;
	font-weight:bold;
	line-height:0;
	letter-spacing:0.2em;
	margin:0 7px;
}

.c-fw1{
	color:#acd9d7;
}

@media screen and (max-width:640px) {

.cnt-box h3{
	font-size:120%;
	line-height:130%;
	margin:0 7px 20px 7px;
}

.cnt-box h4{
	font-size:90%;
	line-height:120%;
	padding:10px;
	margin:0 0 20px 0;
}

.cnt-box h5{
	font-size:100%;
	line-height:120%;
	margin:0 15px 20px 15px;
}

.cnt-box h6{
	font-size:90%;
	line-height:140%;
	margin:0px 15px 10px 15px;
}

.cnt-box p{
	font-size:80%;
	letter-spacing:0.1em;
	line-height:180%;
}
	
}


/*Image*/

.cnt-box .img-box-f{
	width:80%;
	margin:0 10% 20px 10%;
}

@media screen and (max-width:640px) {

.cnt-box .img-box-f{
	width:100%;
	margin:0 0;
}
	
}


/*List box*/

.list4, .list2{
	margin:0 0 20px 0;
	position:relative;
	overflow:hidden;
}

.list4 li{
	float:left;
	width:25%;
	position:relative;
}

.list4 li img, .list2 li img, .list1 li img{
	width:245px;
}

.list2 li{
	float:left;
	width:25%;
	position:relative;
}

.list2 li:first-child{
	margin-left:25%;
}

.list2 li:last-child{
	margin-right:25%;
}

.list1 li{
	float:left;
	width:25%;
	margin:0 37% 0 38%;
	position:relative;
}

@media screen and (max-width:1050px) {

.list4 li{
	width:50%;
}

.list4 li img, .list2 li img, .list1 li img{
	width:100%;
}

.list2 li{
	width:50%;
}

.list2 li:first-child{
	margin-left:0%;
}

.list2 li:last-child{
	margin-right:0%;
}

.list1 li{
	width:50%;
	margin:0 25% 0 25%;
}

}

@media screen and (max-width:640px) {

.list4 li{
	width:90%;
	margin:0 5%;
}

}


/*Table*/

.cnt-box table {
	margin:0 0 40px 0;
	background:#CCC;
	}

.cnt-box th{
	background-color:#eaecef;
	text-align:left;
	padding: 7px 10px;
	border-spacing: 1px !important;
	}

.cnt-box td{
	background-color:#FFF;
	padding: 7px 10px;
	border-spacing: 1px !important;
	}


/* TOP
--------------------------------------------------------------------------*/

/* whats new */

.top-message{
	width:100%;
	padding:25px 0;
	margin:0;
	background:#f6f6f6;
	overflow:hidden;
}

.top-message-box{
	width:930px;
	margin:8px auto 10px auto;
	background: url(../img/top/top-news-ttl.png) 15px center no-repeat;
}

#top-info{
	width:70%;
	padding:0 0 0 30%;
}

#top-info li{
	width:auto;
	color:#333;
	margin-bottom:8px;
	font-size:85%;
	letter-spacing:0.1em;
	}

@media screen and (max-width:1050px) {

.top-message-box{
	width:100%;
	margin:8px 0 10px 0;
}

}

@media screen and (max-width:640px) {

.top-message-box{
	background: url(../img/top/top-news-ttl.png) center 0px no-repeat;
}

#top-info{
	width:90%;
	padding:50px 5% 0px 5%;
}
	
}


/* banner */

.top-bnr{
	width:100%;
	padding:40px 0;
	background:#e5e5e5;
	overflow:hidden;
}

.top-bnr ul{
	width:980px;
	padding:0;
	margin:0 auto;
}

.top-bnr li{
	float:left;
	width:42%;
	margin:0 4%;
}

/* menu */

.top-menu{
	width:100%;
	background:#FFF;
	padding:20px 0;
}

.top-menu ul{
	width:960px;
	margin:0 auto;
}

.top-menu li{
	position:relative;
	overflow:hidden;
	width:50%;
	float:left;
}

.top-menu li a{
	margin:0;
}

.top-menu li img{
	width:100%;
	
}

@media screen and (max-width:1050px) {

.top-menu ul{
	width:94%;
	margin:0 3%;
}

}

@media screen and (max-width:500px) {

.top-menu li{
	width:100%;
	float:none;
}

}


/* Footer
--------------------------------------------------------------------------*/

#footer-tx{
	width:100%;
	padding:30px 0 10px 0;
	background:#EDEDED;
	overflow:hidden;
}

.ftr-cnt-box{
	width:980px;
	margin:0 auto;
	padding:0;
}

.ftr-cnt-box h6{
	font-size:120%;
	color:#277673;
	margin:0px 15px 10px 15px;
	padding:0;
	border-left:none;
}

#footer{
	width:100%;
	background:#277673;
	overflow:hidden;

}

#footer p{
	text-align:right;
	color:#FFF;
	font-size:70%;
	padding:7px;
}

@media screen and (max-width:1050px) {

#footer-tx{
	width:90%;
	padding:30px 5% 0 5%;
}

}


/* form
--------------------------------------------------------------------------*/

.form-bt{
	padding:10px 30px;
	font-size:140%;
	cursor: pointer;
}


/* Other
--------------------------------------------------------------------------*/

#pagetop {
	display: none;
	z-index:1000;
	position: fixed;
	bottom: 40px;
	right: 24px;
	cursor: pointer;
	color: #fff;
}

.a-center{ text-align:center; }
.a-right{ text-align:right; }
.a-left{ text-align:left; }

.tx-xs{ font-size:55% !important;}
.tx-s{ font-size:75% !important;}
.tx-m{ font-size:120% !important;}
.tx-l{ font-size:150% !important;}
.tx-xl{ font-size:250% !important;}

.tx-c-red{color:#eb0000 !important;}

.no-boder{
	border:none !important;
}


/* Clear
--------------------------------------------------------------------------*/

.clear:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clear{display:inline-table;}
/* \*/
* html .clear{height:1%;}
.clear{display:block;}
/* */