/* CSS Document */


html, body { /*height: 100%;*/ -webkit-overflow-scrolling: touch}

body{
	color: #000;
	background:#000;
	font-family:'YakuHanJP','Noto Sans Japanese', "游ゴシック", YuGothic, "Hiragino Maru Gothic W4 JIS2004", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size:14px;
	line-height: 2.4;
	margin: 0px;
	padding: 0px;
	position:relative;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	letter-spacing: 1px;
	
	background-image: url(../img/footer_bg.gif);
	background-repeat: repeat;
	background-position: left top;
}

img {
	max-width: 100%;
	height: auto;
    -webkit-backface-visibility: hidden;
	vertical-align: top;
}

a:link { 
	color: #FFF;
	text-decoration: none;
}
a:visited { 
	color: #FFF;
}
a:hover { 
	color: #ffd400;
}
a:active { 
	color: #FFF;
}

.inner{
	margin: 0 auto;
	padding: 0 20px;
	max-width: 980px;
}

/* ******************** header ******************** */

header{
	width: 100%;

	height: 85px;
	background: rgb(14,97,182);
	background: -webkit-linear-gradient(rgba(14,97,182,1) 0%, rgba(0,76,155,1) 100%);
	background: -o-linear-gradient(rgba(14,97,182,1) 0%, rgba(0,76,155,1) 100%);
	background: linear-gradient(rgba(14,97,182,1) 0%, rgba(0,76,155,1) 100%); 
	
	position: fixed;
	z-index: 10000000;
}


header article{
	position: relative;
}

header article h1{
	position: absolute;
	height: 30px;
	width: 210px;
	top: 28px;
}

header article h2{
	position: absolute;
	display: inline-block;
	color: #FFF;
	font-weight: 600;
	left: 240px;
	top: 28px;
	height: 32px;
	font-size: 20px;
	border-left: #FFF solid 1px;
	line-height: 1px;
	padding: 14px 18px 0px;
}


*::-ms-backdrop,header article h2{
	padding-top: 20px;
}


header article div{
	position: absolute;
	top:10px;
	right: 14px;
	text-align: right;
}

header article ul li{
	position: relative;
	display: inline-block;
	font-size: 12px;
	letter-spacing: -.2px;
	color: #FFF;
	padding: 2px 14px 3px 8px;
	border-right: #FFF dotted 1px;
	line-height: 1;
}

header article ul li:last-child{
	border-right: none;
}

header article ul li a i::before{
	position: absolute;
	font-size: 16px;
	line-height: 1;
	top: 1px;
}

header article ul li span{
	padding-left: 20px;
	font-weight: 600;
}

header article h3{
	font-family: 'Roboto', sans-serif;
	color: #FFF;
	font-weight: 500;
	text-align: right;
	font-size: 14px;
    padding: 0px 10px;
	line-height: 1;
}






/* ******************** /header ******************** */





section{
	background-color: #FFF;
	padding-top: 120px;
	padding-bottom: 200px;
}

section div#title{
	position: relative;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border: #ccc solid 1px;
	height: 200px;
	overflow: hidden;
}

section div#title h1{
	position: absolute;
	z-index: 10;
	font-size: 30px;
	font-weight: 600;
	color: #FFF;
	text-shadow: 0 0 12px #014e9d;
	width: 100%;
	text-align: center;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	line-height: 1.6;
}

section div#title img{
	position: absolute;
	z-index: 1;
	height: 220px;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}


section ul{
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	
	padding-top: 35px;
}

section ul li{
	width: 31%;
	float: left;
	margin-bottom: 2%;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	margin-right: 3.5%;
}

section ul li:last-child{
	margin-right: 0%;
}

section ul li a{
	position: relative;
	transition: all 500ms 0s ease;
	display: block;
	padding: 6px;
	border: #d3d3d3 solid 5px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

section ul li div.nolink{
	position: relative;
	padding: 6px;
	border: #d3d3d3 solid 5px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	opacity: .5;
}

section ul li figure{
	overflow: hidden;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

section ul li h2 {
	padding: 10px 5px 0px;
	color: #0064aa;
	font-weight: 400;
}

section ul li div.nolink h2{
	color: #666;
}

section ul li h2 span{
	font-family:'YakuHanJP','Noto Sans Japanese';
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	padding-left: 5px;
}

section ul li p{
	padding: 0px 22px 0px;
	font-size: 13px;
	color: #666;
}

section ul li a:hover{
	border-color: #379dd3;
}


footer{
	font-family: 'Roboto', sans-serif;
	color: #FFF;
	font-weight: 500;
	text-align: center;
   
}

footer ul{
	display: none;
}

footer address{
	padding: 10px 10px 20px;
	font-size: 10px;
	line-height: 1.6;
}



.only_768,
.only_480{
	display: none;
}

.no_768,
.no_480{
	display: inline-block;
}



.errinner{
	margin: 40px auto;
	padding: 0 0px;
	width: 90%;
	max-width: 900px;
}

.errinner h1{
	font-size: 26px;
	padding-bottom: 20px;
	border-bottom: #004b9b solid 1px;
	line-height: 1.4;
}

.errinner ul{
	padding-bottom: 50px;
	padding-left: 25px;
}

.errinner li{
	display: list-item;
	width: 100%;
	list-style: disc;
	margin-bottom: 20px;
	line-height: 1.6;
	text-align:justify;
	text-justify:distribute;
}

.errinner div{
	background-color: rgba(0,76,155,1);
	font-weight: 600;
	padding: 15px 20px;
}

.errinner a{
	color: #FFF;
}


.errinner a:hover{
	color: #ffd400;
}


@media screen and (max-width: 840px) {
	
	
	section div#title h1{
		font-size: 3.6vw;
	}
	
	section ul li{
		width: 100%;
		float: none;
		margin-bottom: 5%;
		display: block;
		align-items: center;
		margin-right: 0%;
	}
	
	section ul li figure{
		width: 40%;
	}
	
	section ul li div.bttxt{
		position: absolute;
		width: 57%;
		right: 0%;
		top: 5px;
	}
	
	
	
	
	
}



@media screen and (max-width: 768px) {
	
	header{
		width: 100%;

		height: 60px;
		background: rgb(14,97,182);
		background: -webkit-linear-gradient(rgba(14,97,182,1) 0%, rgba(0,76,155,1) 100%);
		background: -o-linear-gradient(rgba(14,97,182,1) 0%, rgba(0,76,155,1) 100%);
		background: linear-gradient(rgba(14,97,182,1) 0%, rgba(0,76,155,1) 100%); 

		position: fixed;
		z-index: 10000000;
	}

	
	header article h1{
		position: absolute;
		height: 20px;
		width: 140px;
		top: 10px;
		left: 10px;
	}

	header article h2{
		position: absolute;
		display: inline-block;
		color: #FFF;
		font-weight: 600;
		left: 158px;
		top: 10px;
		height: 20px;
		font-size: 15px;
		border-left: #FFF solid 1px;
		line-height: 1px;
		padding: 9px 12px 0px;
	}
	
	header article div{
		position: absolute;
		top:38px;
		right: auto;
		left: 0px;
		text-align: left;
	}
	
	header article ul {
		display: none;
	}
	
	header article h3{
		font-family: 'Roboto', sans-serif;
		color: #FFF;
		font-weight: 500;
		text-align: right;
		font-size: 12px;
		padding: 0px 10px;
		line-height: 1;
	}
	
	
	section{
		background-color: #FFF;
		padding-top: -webkit-calc(5% + 60px);
		padding-top: calc(5% + 60px);
		padding-bottom: 20%;
	}
	
	
	footer ul{
		display: block;
		padding-top: 10px;
	}

	footer ul li{
		position: relative;
		display: inline-block;
		font-size: 12px;
		letter-spacing: -.2px;
		color: #FFF;
		padding: 2px 14px 3px 8px;
		border-right: #FFF dotted 1px;
		line-height: 1;
	}

	footer ul li:last-child{
		border-right: none;
	}

	footer ul li a i::before{
		position: absolute;
		font-size: 16px;
		line-height: 1;
		top: 1px;
	}

	footer ul li span{
		padding-left: 20px;
		font-weight: 600;
	}
	
	
	
	.errinner{
		margin: 20px auto 40px;
		padding: 0 0px;
		width: 90%;
		max-width: 900px;
	}
	
	.errinner h1{
		font-size: 20px;
		padding-bottom: 20px;
		border-bottom: #004b9b solid 1px;
		line-height: 1.4;
	}


}




@media screen and (max-width: 480px) {
	.inner{
		width: 100%;
		margin: 0 auto;
		padding: 0 5%;
		max-width: none;
	}
	
	header article h3{
		font-family: 'Roboto', sans-serif;
		color: #FFF;
		font-weight: 500;
		text-align: right;
		font-size: 10px;
		padding: 0px 10px;
		line-height: 1;
	}
	
	
	
	section div#title h1{
		font-size: 5.8vw;
	}
	
	section ul{
		padding-top: 8%;
	}
	
	section ul li figure{
		position: relative;
		width: 100px;
		height: 70px;
		overflow: hidden;
	}
	
	section ul li figure img{
		position: absolute;
		z-index: 1;
		width: auto;
		max-width: none;
		height: 80px;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
	}
	
	section ul li div.bttxt{
		position: absolute;
		width : -webkit-calc(100% - 110px) ;
		width : calc(100% - 110px) ;
		right: auto;
		left: 110px;
		top: 2px;
	}
	
	section ul li div h2::before{
		font-size: 13px;
	}
	
	section ul li h2 span{
		font-size: 16px;
		font-weight: 600;
		line-height: 1;
		padding-left: 5px;
	}

	section ul li p{
		padding: 0px 22px 0px;
		font-size: 12px;
		color: #666;
	}
	

	section ul li a{
		border: #d3d3d3 solid 3px;
	}

	section ul li div.nolink{
		border: #d3d3d3 solid 3px;
	}
	
	footer {
		text-align: left;
	}
	
	footer ul {
		padding-top: 0px;
	}
	
	footer ul li{
		position: relative;
		display: block;
		font-size: 12px;
		letter-spacing: -.2px;
		color: #FFF;
		padding: 0px;
		border-right: none;
		border-bottom: #809cb9 solid 1px;
		line-height: 1;
	}
	
	footer ul li a{
		display: block;
		padding: 14px 14px 14px 8px;
	}
	
	footer ul li a i::before{
		position: absolute;
		font-size: 16px;
		line-height: 1;
		top: 12px;
	}
	
	
	.only_480{
		display: inline-block;
	}
	
	.no_480{
		display: none;
	}

}


@media screen and (max-width: 360px) {
	
	section ul li figure{
		position: relative;
		width: 80px;
		height: 70px;
		overflow: hidden;
	}
	
	section ul li div.bttxt{
		position: absolute;
		width : -webkit-calc(100% - 90px) ;
		width : calc(100% - 90px) ;
		right: auto;
		left: 90px;
		top: 2px;
	}


	section ul li h2 span{
		font-size: 14px;
		font-weight: 600;
		line-height: 1;
		padding-left: 5px;
	}
	
	section ul li div h2::before{
		font-size: 11px;
	}
	

	section ul li p{
		padding: 0px 10px 0px 20px;
		font-size: 10px;
		color: #666;
	}



}













.clearfix:after {
  content: "";
  clear: both;
  display: block;
}