@charset "UTF-8";
/*========================================

  TOPページ

========================================*/




/* hero ---------------*/
#hero {
	width: 94%;
	margin: 0 auto;
	padding-top: 130px;
}

@media screen and (max-width: 767px) {
	#hero {
		width: 100%;
		padding-top: 16vw;
	}
}



/* sec001 ---------------*/
#sec001 .box {
	display: flex;
	justify-content: space-between;
	width: 1160px;
	margin: 0 auto;
	margin-top: 70px;
}

#sec001 .box .photo {
	width: 500px;
}

#sec001 .box .txt {
	position: relative;
	width: 600px;
	height: 540px;
	outline: 1px solid #ccc7a7;
	outline-offset: -10px;
	background-color: #f3f2ec;
	margin-top: -240px;
	z-index: 10;
}

#sec001 .box .txt h1 {
	font-size: 22px;
	letter-spacing: 2px;
	padding-top: 70px;
}

#sec001 .box .txt {
	font-size: 14px;
}

#sec001 .box .txt p {
	line-height: 1.8em;
	padding-top: 1.5em;
}

#sec001 .box .txt p strong {
	font-size: 16px;
}

#sec001 .box .txt .morebtn {
	display: none;
}

@media screen and (max-width: 767px) {
	#sec001 .box {
		flex-direction: column-reverse;
		width: 100%;
		margin-top: 6vw;
	}

	#sec001 .box .photo {
		width: 100%;
		margin-top: -10vw;
	}

	#sec001 .box .txt {
		width: 86%;
		margin: 0 auto;
		height: auto;
		margin-top: 0;
	}

	#sec001 .box .txt h1 {
		font-size: 6vw;
		padding-top: 10vw;
	}

	#sec001 .box .txt {
		font-size: 3.2vw;
		padding-bottom: 10vw;
	}

	#sec001 .box .txt p {
		line-height: 1.8em;
		padding-top: 1.5em;
	}

	#sec001 .box .txt p strong {
		font-size: 3.8vw;
	}

	#sec001 .box .txt .morebtn {
		display: inline-block;
		border: 1px solid #888;
		padding: .5em 1em;
		margin-top: 2em;
		cursor: pointer;
	}

	#sec001 .box .txt .morebtn span::after {
		content: "\f0d7";
		font-family: FontAwesome;
		margin-left: 1em;
	}

	#sec001 .box .txt .morebtn.active span::after {
		content: "\f0d8";
	}

	#sec001 .box .txt .moretxt {
		display: none;
	}
}


/* sec002 ---------------*/
#sec002 h2 {
	margin-top: 110px;
}

#sec002 .box {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 785px;
	margin: 0 auto;
	margin-top: 30px;
}

#sec002 .box dl {
	margin: 0;
	padding: 0;
	width: 370px;
	margin-top: 60px;
}

#sec002 .box dl dt img {
	width: 370px;
	border-radius: 10px;
}

#sec002 .box dl dd {
	width: 350px;
	margin: 0 auto;
}

#sec002 .box dl dd h3 {
	font-size: 20px;
	margin-top: 1em;
	margin-bottom: .8em;
}

#sec002 .box dl dd span {
	display: block;
	font-size: 14px;
	line-height: 1.8em;
	text-align: left;
}

#sec002 .box dl dd .more {
	margin-top: 20px;
}

#sec002 .box dl dd .more a {
	display: inline-block;
	color: #fff;
	font-size: 15px;
	letter-spacing: 2px;
	background-color: #333;
	padding: .3em 2em;
	transition: .3s;
}

#sec002 .box dl dd .more a::after {
	content: "\f105";
	font-family: FontAwesome;
	margin-left: .3em;
}

#sec002 .box dl dd .more a:hover {
	opacity: .7;
}

@media screen and (max-width: 767px) {
	#sec002 h2 {
		margin-top: 15vw;
	}

	#sec002 .box {
		flex-direction: column;
		width: 84%;
		margin-top: 0;
		padding-bottom: 15vw;
	}

	#sec002 .box .item {
		margin-top: 8vw;
	}

	#sec002 .box dl {
		width: 100%;
	}

	#sec002 .box dl dt img {
		width: 100%;
	}

	#sec002 .box dl dd {
		width: 96%;
	}

	#sec002 .box dl dd h3 {
		font-size: 5vw;
		margin-top: 1em;
		margin-bottom: .5em;
	}

	#sec002 .box dl dd span {
		font-size: 3.2vw;
	}

	#sec002 .box dl dd .more {
		margin-top: 15px;
	}

	#sec002 .box dl dd .more a {
		font-size: 3.5vw;
	}
}



#sec002 .box2 {
	position: relative;
	width: 900px;
	padding-bottom: 70px;
}

#sec002 .box2 dl {
	width: 400px;
}

#sec002 .box2 dl dt img {
	width: 220px;
}

#sec002 .box2 dl dd {
	width: 400px;
}

#sec002 .box2 dl dd span {
	width: 400px;
	text-align: justify;
	text-justify: inter-ideograph;
}

#sec002 .box dl dd h3 small {
	display: block;
	font-size: 12px;
	padding-bottom: .5em;
}

#sec002 .wrap_box {
	position: relative;
}

#sec002 .wrap_box::before {
	position: absolute;
	content: "";
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
	width: 100%;
	height: 450px;
	background-color: #f3f2ec;
}

@media screen and (max-width: 767px) {
	#sec002 .box2 {
		position: relative;
		width: 84%;
		padding-bottom: 15vw;
	}

	#sec002 .box2 dl {
		width: 100%;
	}

	#sec002 .box2 dl dt img {
		width: 55%;
		border-radius: 0;
	}

	#sec002 .box2 dl dd {
		width: 96%;
	}

	#sec002 .box2 dl dd span {
		width: 100%;
		margin: 0 auto;
	}

	#sec002 .box dl dd h3 small {
		font-size: 3vw;
	}

	#sec002 .wrap_box {
		position: relative;
		background-color: #f3f2ec;
	}

	#sec002 .wrap_box::before {
		display: none;
	}
}