@charset "UTF-8";

/* ヒーローエリア */
.hero {
	background-image: url(../img/hero.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	height: 590px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 15px;
}

.hero .container {
	padding: 0px 30px;
}

.hero .container img.ttl {
	max-width: 396px;
	width: 100%;
	height: auto;
}

/* メインコンテンツ */
.front-main {
	margin-bottom: 50px;
}

.front-main .container {
	max-width: 1200px;
	margin: 0px auto;
}

.front-main .container article {
	padding: 5px;
}

.front-main .container article a {
	display: block;
	background: #CCCCCC;
	width: 100%;
	height: 400px;
}

.front-main .container article.no1 a {
	background: url(../img/front_photo1.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	padding-top: 10px;
	padding-left: 10px;
}

.front-main .container article.no2 a {
	background: url(../img/front_photo2.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}

.front-main .container article.no3 a {
	background: url(../img/front_photo3.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}

.front-main .container article.no4 a {
	background: url(../img/front_photo4.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}

.front-main .container article.no5 a {
	background: url(../img/front_photo5.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}

.front-main .container article.no6 a {
	background: url(../img/front_photo6.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	padding-top: 10px;
	padding-left: 10px;
}

.front-main .container article.no7 a {
	background: url(../img/front_photo7.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	padding-top: 10px;
	padding-left: 10px;
}

.front-main article.no8 {
	width: 100%;
	height: auto;
}

.front-main article.no8 img.ttl {
	display: block;
	margin-bottom: 30px;
}

.front-main article.no8 dl dt {
	font-weight: bold;
	margin-bottom: 10px;
}

.front-main article.no8 dl dd {
	border-bottom: 1px solid #707070;
	padding-bottom: 5px;
	margin-bottom: 20px;
}

.front-main article.no8 a.btn {
	display: block;
	background: #707070;
	color: #FFFFFF;
	font-size: 14px;
	text-align: center;
	padding: 10px 15px;
	margin-bottom: 30px;
	width: 240px;
	height: auto;
}

.front-main article.no8 dl dd img.arrow {
	display: inline-block;
	width: 14px;
	height: 16px;
	vertical-align: middle;
}


/* 大きい画面用の設定 */
@media(min-width:768px) {
	/* ヒーローエリア */
	.hero {
	height: 740px;
	}
	/* メインコンテンツ */
	.front-main article img {
	display: block;
	width: 100%;
	height: auto
	}
	.front-main article.no1 img {
	max-width: 281px;
	}
	.front-main article.no2 img {
	max-width: 261px;
	}
	.front-main article.no3 img {
	max-width: 233px;
	}
	.front-main article.no4 img {
	max-width: 173px;
	}
	.front-main article.no5 img {
	max-width: 298px;
	}
	.front-main article.no6 img {
	max-width: 178px;
	}
	.front-main article.no7 img {
	max-width: 167px;
	}
	.front-main article.no8 img {
	max-width: 189px;
	}
	.front-main .box-left,
	.front-main .box-right {
	display: flex;
	flex-wrap: wrap;
	}
	.front-main .box-left article.no1,
	.front-main .box-right article.no8 {
	flex: 1 1 100%;
	}
	.front-main .box-left article.no2,
	.front-main .box-left article.no3,
	.front-main .box-left article.no4,
	.front-main .box-left article.no5,
	.front-main .box-right article.no6,
	.front-main .box-right article.no7 {
	flex: 1 1 50%;
	}
}

@media(min-width:1024px) {
	.front-main .box {
	display: flex;
	}
	.front-main .box-left,
	.front-main .box-right {
	flex: 1;
	}
	.front-main article.no8 {
	height: 800px;
	}
}