@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;900&display=swap');


main {
	min-width:1160px;
	line-height: 2;
	letter-spacing: .1em;
}
main img { max-width: 100%;}
main .naviBox { color: #222;}
main .inner { max-width: 1160px; margin: 0 auto;}
main .animated { opacity: 0;}

main h4 {
	position: relative;
	padding: 0 0 1em 1.5em;
	margin-bottom: 1em;
	font-size: 23px;
	font-weight: 700;
	line-height: 1.4;
	border-bottom: 1px solid #231815;
}
main h4::before {
	content: '■';
	position: absolute;
	left: 0;
	top: 0;
}

@media only screen and (max-width:767px){
	main .inner { padding: 20px 10px;}
	main h4 {
		padding-bottom: .3em;
		font-size: 18px;
	}
}

#main {
	position: relative;
	margin: 0 auto 100px;
	text-align: center;
	z-index: 1;
}
#main p {
	padding: 0;
	margin-bottom: 80px;
}
#main h2 {
	position: relative;
	padding-bottom: .5em;
	text-align: center;
	font-size: 50px;
	font-weight: 700;
}
#main h2::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 180px;
	height: 10px;
	margin-left: -90px;
	background-color: #000;
}

@media only screen and (max-width:767px){
	#main { margin-bottom: 30px;}
	#main p {	margin-bottom: 20px;}
	#main h2 { font-size: 24px;}
	#main h2::after { height: 5px;}
}

#area1 {
	width: 1160px;
	margin: 0 auto;
	padding: 0 0 140px;
	font-size: 18px;
	overflow: hidden;
}
#area1 h3 {
	max-width: 590px;
	margin: 0 auto 50px;
	padding: .5em 0;
	text-align: center;
	font-size: 26px;
	border: 1px solid #000;
}
#area1 .aC { text-align: center; }
#area1 .img1 {
	display: flex;
	width: 1014px;
	gap: 8%;
	margin: 50px auto 100px;
}
#area1 .img1 li { width: 46%;}

#area1 ol {
	display: flex;
	gap: 5%;
	margin: 0 auto 60px;
}

#area1 ol li {
	width: 30%;
}
#area1 ol dl dt {
	padding-bottom: 5px;
	margin-bottom: 10px;
	border-bottom: 1px solid #000;
}

#area1 .box1 {
	margin-bottom: 60px;
}
#area1 .box1 .list {
	color: #d0121b;
	margin-top: .5em;
}
#area1 .box1 .list li {
	position: relative;
	padding-left: 1.5em;
	margin-top: 5px;
}
#area1 .box1 .list li::before {
	content: '●';
	position: absolute;
	left: 0;
	top: 0;
}
#area1 .box1 .list li:nth-child(1) { margin-top: 0;}
#area1 .box2 { float: left; width: 360px;}
#area1 .box3 { float: right; width: 745px;}

@media only screen and (max-width:767px){
	#area1 {
		width: auto;
		padding: 0 10px 30px;
		font-size: 14px;
	}
	#area1 h3 {
		font-size: 20px;
		max-width: 280px;
		margin-bottom: 20px;
	}
	#area1 .aC { text-align: left; }
	#area1 .img1 {
		display: block;
		width: auto;
		margin: 20px auto;
	}
	#area1 .img1 li {
		width: auto;
	}
	#area1 .img1 li:nth-child(1) { margin-bottom: 10px;}
	
	#area1 ol {
		margin-bottom: 30px;
		flex-direction: column;
		gap: 10px;
	}
	#area1 ol li { width: 100%;}
	#area1 ol dl img { height: 60px;}

	#area1 .box1 { margin-bottom: 20px;}
	#area1 .box2 { float: none; width: auto; margin-bottom: 20px;}
	#area1 .box3 { float: none; width: auto}
}

#area2 {
	background-color: #eeeeef;
	font-size: 18px;
}
#area2 .inner {
	padding: 100px 0 90px;
}
#area2 h3 {
	position: relative;
	margin-bottom: 50px;
	padding-bottom: .5em;
	text-align: center;
	font-size: 28px;
	font-weight: 700;
}
#area2 h3::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	background-color: #000;
	width: 480px;
	height: 4px;
	margin-left: -240px;
}
#area2 h3 span {
	display: block;
	font-size: 23px;
}
#area2 .img1 { text-align: center; padding: 0; margin-bottom: 120px;}
#area2 ol li { margin-top: .5em;}
#area2 ol li:first-child { margin-top: 0;}
#area2 dl dt {
	position: relative;
	padding-left: 2em;
}
#area2 dl dt span {
	position: absolute;
	left: 0;
	top: 0;
}
#area2 dl dd {
	margin-left: 2em;
	color: #d0121b;
}
@media only screen and (max-width:767px){
	#area2 {
		font-size: 14px;
	}
	#area2 .inner {
		width: auto;
		padding: 30px 10px;
	}
	#area2 h3 { font-size: 20px; margin-bottom: 20px;}
	#area2 h3 span { font-size: 16px;}
	#area2 h3::after { width: 200px; margin-left: -100px;}
	#area2 .img1 { margin-bottom: 30px;}
}

main .link { margin: 180px 0; }
main .link a {
	display: block;
	text-align: center;
}
@media only screen and (max-width:767px){
	main .link { margin: 30px 10px;}
}