@charset "utf-8";

/*********************
 main_top
*********************/
.main_top{
	position:relative;
	width:100%;
	padding:0;
}
.main_top img{
	display: block;
	height: 500px;
	object-fit: cover;
	aspect-ratio: 8 / 3;
	width:100%;
	object-position: right bottom;
}

/*********************
 message
*********************/
.message{
	width:100%;
	max-width:1100px;
	padding:100px 15px 50px;
	margin:0 auto;
}
.message h1{
	font-size: 1.2em;
	font-weight: normal;
	text-align:center;
	line-height:1.8em;
}
.message h1 span{
	color:#97b0c7;
}


/*********************
 listBox
*********************/
.listBox{
	width:100%;
	max-width:1100px;
	padding:50px 15px;
	margin:0 auto;
}
.listBox h1{
	font-size: 1em;
	font-weight: normal;
	margin-bottom:10px;
}
.listBox h1 span{
	display:inline-block;
	margin-right:-3px;
	color:#98a4b0;
	font-size: 1.5em;
	letter-spacing: .3em;
}
.listBox .listIcon{
	text-align:center;
}
.listBox .listIcon li{
	padding-left:40px;
}
.listBox .listIcon li:first-child{
	padding-left:0;
}
.listBox .listIcon li img{
	width:100%;
	aspect-ratio: 1 / 1;
	vertical-align: bottom;
}
.listBox .listIcon li a.radius img{
	border-radius:50%;
	width:calc(100% - 60px);
	margin:30px;
}
.listBox .listIcon li a.ontext{
	position: relative;
}
.listBox .listIcon li a{
	text-decoration:none;
}
.listBox .listIcon li a.ontext p{
	position: absolute;
	z-index:99;
	display:block;
	color:#666;
	font-size:0.9em;
	text-align:left;
	padding:5px 0 5px 15px;
	left: 0;
	bottom: 40px;
	transform: translate(0%,50%);
	width: 100%;
	background:rgba(255, 255, 255, 0.75);
}
.listBox .listIcon li a.radius p{
	color:#666;
	font-size:1em;
	margin-top:-20px;
}
.listBox .listIcon .moreBtn{
	display:inline-block;
	margin-top:50px;
	padding:5px 65px;
	font-size:0.9em;
	border:1px solid #98a4b0;
	letter-spacing: .4em;
	color:#666;
	text-decoration:none;
}

/*********************
 banner
*********************/
.banner{
	width:100%;
	max-width:1100px;
	padding:50px 15px;
	margin:0 auto;
}
.banner img{
	width:100%;
}
/*********************
 areaBox
*********************/
.areaBox{
	width:100%;
	max-width:1100px;
	padding:50px 15px;
	margin:0 auto;
}
.areaBox h1{
	font-size: 1em;
	font-weight: normal;
	margin-bottom:10px;
}
.areaBox h1 span{
	display:inline-block;
	margin-right:-5px;
	color:#98a4b0;
	font-size: 1.5em;
	letter-spacing: .3em;
}
.areaBox li{
	border:1px solid #98a4b0;
	margin-left:40px;
	text-align:center;
	width:calc(100% / 3);
}
.areaBox li:first-child{
	margin-left:0;
}
.areaBox li h1{
	background:#98a4b0;
	padding:5px 0;
	color:#fff;
	font-size: 1em;
	font-weight: normal;
	margin-bottom:10px;
}
.areaBox li h2{
	font-size: 0.9em;
	font-weight: normal;
	padding:15px 10px;
}