html {
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
  word-wrap: break-word;
  font-size: 62.5%;
}

body {
	font-size: 1.6rem;
}
a {
    color: #1b84bb;
}
a:hover{
	text-decoration: none;
}

ul.button{
	display:flex;
	flex-wrap: wrap;
	margin-bottom:1.6rem;
}
ul.button.center{
	justify-content: center;
}
ul.button li{
	margin-bottom:10px;
}
ul.button li a{
	margin-right:10px;
	display:block;
	background-color:#333;
	line-height:40px;
	height:40px;
	padding:0 20px;
	text-decoration:none;
	color:#fff;
	border-radius: 4px;
}

.sp{
	display:none;
}
.pc{
	display:block;
}

header{
	background-image:url("./images/header_back.png");
}
header .inner{
	width: 1000px;
	margin: 0 auto;
	display:flex;
}
header h1{
}
header h1 a{
	display: block;
	width:210px;
	height:140px;
	background-image:url("./images/header_logo.png");
	text-indent:-9999px;
}

header .inner .info{
	flex: 1;
}
header .inner .info p{
	text-align:right;
	height:40px;
	line-height:40px;
	color:white;
}

header .inner .info ul{
	display:flex;
	justify-content:flex-end;
}
header .inner .info ul li{
	margin-left:18px;
	/*background-color:#eee;*/
}
header .inner .info ul li span{
	display:none;
}
header .inner .info ul li a{
	display:block;
	height:100px;
	background-image:url("./images/header_navi_1.png");
	background-repeat: no-repeat;
	background-position: 50% 7px;
	font-size: 1.3rem;
	color:#252627;
	text-decoration:none;
	font-weight:bold;
	box-sizing: border-box;
	padding-top:74px;
	text-align:center;
}
header .inner .info ul li.icon_1 a{
	width:120px;
}
header .inner .info ul li.icon_2 a{
	background-image:url("./images/header_navi_2.png");
	width:130px;
}
header .inner .info ul li.icon_3 a{
	background-image:url("./images/header_navi_3.png");
	width:110px;
}
header .inner .info ul li.icon_4 a{
	background-image:url("./images/header_navi_4.png");
	width:130px;
}
header .inner .info ul li.icon_5 a{
	background-image:url("./images/header_navi_5.png");
	width:80px;
}
header .inner .info ul li.icon_6 a{
	background-image:url("./images/header_navi_6.png");
	width:100px;
}
article{
	background-image:url("./images/article_back.png");
}

article > .inner{
	width: 1000px;
	margin: 0 auto;
	padding:40px 0;
}
article > .inner > section{
	margin-bottom:40px;
	background-color:white;
}
article > .inner > section:last-child{
	margin:0px;
}
article > .inner > section h2{
	background-color:#252627;
	height:50px;
	line-height:50px;
	padding-left:20px;
	color:white;
	font-weight:normal;
	font-size:2.0rem;
	letter-spacing: 2px;
}
article > .inner > section > .inner{
	padding: 14px;
}

footer .link{
	/*background-color:#cacaca;*/
	background-color: #fafafa;
	padding:20px 0;
}
footer .link ul{
	display: flex;
	justify-content: center;
	height:25px;
	line-height:25px;
}
footer .link ul li{
	padding:0 20px;
	border-right:1px solid #555758;
}
footer .link ul li:nth-child(2){
	border-right:0;
}
footer .link ul li a{
	color: #252728;
	text-decoration: none;
}
footer .copy{
	padding:30px 0;
	background-color:#252627;
}
footer .copy p{
	color: white;
	text-align: center;
}
#page_top{
	width: 50px;
	height: 50px;
	position: fixed;
	right: 0;
	bottom: 0;
	background-color: #3f98ef;
	/*opacity: 0.8;*/
}
#page_top a{
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-decoration: none;
}
#page_top a::before{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '▲';
	font-size: 30px;
	color: #fff;
	position: absolute;
	width: 50px;
	height: 50px;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}


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

	body {
		font-size: 1.4rem;
	}
	.sp{
		display:block;
	}
	.pc{
		display:none;
	}
	header{
		background-image: none;
		background-color: #252627;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 200;
		width:100%;
		height:56px;
	}
	header .inner{
		width: 100%;
		display:block;
	}

	header h1 a{
		position: absolute;
		top:3px;
		left:3px;
		background-image: url('./images/header_sp_logo.png');
		background-repeat: no-repeat;
		background-position: 50%;
		background-size:cover;
		width: 75px;
		height: 50px;
	}
	header .inner .info p{
		display: none;
	}
	header > .inner > .sp{
		position: absolute;
		top: 10px;
		right:15px;
		width: 40px;
		cursor:pointer;
		height: 30px;
		z-index: 201;
	}
	header > .inner > .sp span{
		height: 3px;
		position: absolute;
		display: block;
	    background: #fff;
	    width:30px;
	    right:5px;
	}
	header > .inner > .sp span:nth-child(1){ top: 3px; }
	header > .inner > .sp span:nth-child(2){ top: 10px; }
	header > .inner > .sp span:nth-child(3){ top: 10px; }
	header > .inner > .sp span:nth-child(4){ top: 17px; }

	header > .inner > .sp.active span:nth-child(1){ display: none; }
	header > .inner > .sp.active span:nth-child(2){ transform: rotate(-225deg); }
	header > .inner > .sp.active span:nth-child(3){ transform: rotate(45deg); }
	header > .inner > .sp.active span:nth-child(4){ display: none; }

	header > .inner > .sp p{
		margin:0;
		padding:0;
		width: 100%;
		position: absolute;
		top: 26px;
		font-size: 1.2rem;
		color: white;
		text-align:center;
	}
	header > .inner > .info{
		display: none;
		width: 100%;
		height: auto;
		box-sizing: border-box;
		position: absolute;
		top: 56px;
		left: 0;
		z-index: 100;
	}
	header .inner .info ul{
		background-color:white;
		flex-wrap: wrap;
	}
	header .inner .info ul li{
		margin: 0;
		padding: 0;
		width:33%;
	}
	header .inner .info ul li a{
		margin: 0;
		width:100%;
		/*background-size: 50% 50%;*/
		font-size:1.1rem;
		padding-top:70px;
	}
	
	header .inner .info ul li.icon_1 a{ width:100%; }
	header .inner .info ul li.icon_2 a{ width:100%; }
	header .inner .info ul li.icon_3 a{ width:100%; }
	header .inner .info ul li.icon_4 a{ width:100%; }
	header .inner .info ul li.icon_5 a{ width:100%; }
	header .inner .info ul li.icon_6 a{ width:100%; }
	
	
	article > .inner{
		padding-top: 100px;
		width: auto;
		margin:0 10px;
	}
	article > .inner > section > .inner{
		/*padding: 14px;*/
	}
	footer .link ul li:last-child{
		border-right:0;
	}
}