/*-------------------------------------------
Mainvisual
-------------------------------------------*/

.mainvisual {
	height: 400px;
	margin: 60px auto 40px;
	position: relative;
}
.mainvisual .fade-img img {
	width: 100%;
	max-width: 1000px;
	height: 400px;
	object-fit: cover;
}
.mainvisual .fade-img li {
	/* width: 80%; */
	position: absolute;
	right: 0;
	opacity: 0;
	animation: fade 15s infinite;
}
.mainvisual .fade-img li:nth-child(1) {
	animation-delay: 0s;
}
.mainvisual .fade-img li:nth-child(2) {
	animation-delay: 5s;
}
.mainvisual .fade-img li:nth-child(3) {
	animation-delay: 10s;
}
@keyframes fade {
	0% {
			opacity: 0;
	}
	15% {
			opacity: 1;
	}
	30% {
			opacity: 1;
	}
	45% {
			opacity: 0;
	}
	100% {
			opacity: 0;
	}
}
.mainvisual .catchphrase {
	font-size: 50px;
	text-shadow: 0px 0px 4px #fff;
	position: absolute;
	top: 90px;
	left: 3%;
	line-height: 1.15;
}

/*-------------------------------------------
Photo
-------------------------------------------*/
.photo {
	margin-bottom: 120px;
	position: relative;
}
.photo::after {
	content: "";
	width: 70%;
	height: 300px;
	background-color: #fafafa;
	display: block;
	position: absolute;
	top: 6vw;
	right: 0;
	z-index: -10;
}
.photo .text {
	width: 70%;
	padding: 0 5%;
	margin-left: auto;
}
.photo .text .section-title {
	margin-bottom: 30px;
}
.photo .text .description {
	font-size: 15px;
	line-height: 1.8;
	margin-bottom: 60px;
}
.photo .photo-list-area {
	display: flex;
	margin-bottom: 40px;
	overflow-x: hidden;
}
.photo .photo-list-area .photo-list {
	display: flex;
	animation: slide-left 60s infinite linear both;
}
.photo .photo-list-area .photo-list li {
	width: calc(100vw / 4);
}
.photo .photo-list-area .photo-list li img {
	width: 100%;
}
@keyframes slide-left {
	0% {
			transform: translateX(0);
	}
	100% {
			transform: translateX(-100%);
	}
}
.photo .btn {
	margin: 0 auto;
}

.photo_box > div{
	margin:10px 0;
}

/*-------------------------------------------
Essay
-------------------------------------------*/
.essay {
	margin-bottom: 120px;
}
.essay .section-title {
	margin: 0 0 -5vw 4vw;
	position: relative;
	z-index: 10;
}
.essay .flex {
	display: flex;
	align-items: center;
}
.essay .flex .img {
	width: 65%;
}
.essay .flex .img img {
	width: 100%;
	height: 500px;
	object-fit: cover;
}
.essay .flex .text {
	width: 35%;
	background-color:rgba(255 255 255 / 96%);
	padding: 5% 0 5% 5%;
	margin-left: -8%;
	box-shadow: 5px 5px 10px rgb(102 102 102 / 30%);
}
.essay .text .title {
	font-family: 'Zen Old Mincho', serif;
	font-size: 24px;
	margin-bottom: 40px;
}
.essay .text .description {
	font-size: 15px;
	line-height: 1.8;
	margin-bottom: 40px;
}



/*-------------------------------------------
タブレット
-------------------------------------------*/
@media screen and (max-width: 1024px) {
	.mainvisual {
		background-color:#fff;
		height: 320px;
		margin-bottom: 20px;
	}
	.mainvisual .catchphrase {
		color: #fff;
		text-shadow: 1px 1px 1px #777;
	}
	.mainvisual .fade-img img {
		height: auto;
	}
	.mainvisual .fade-img li {
		width: 100%;
	}
	.photo .text {
		width: 100%;
	}
}

/*-------------------------------------------
スマートフォン
-------------------------------------------*/
@media screen and (max-width: 767px) {
	.section-title {
			font-size: 12vw;
	}

	/*-------------------------------------------
	Mainvisual
	-------------------------------------------*/
	.mainvisual {
		margin-top: 70px;
			height: 160px;
	}

	.mainvisual .fade-img img {
			height: 160px;
	}
	.mainvisual .fade-img li {
			width: 100%;
	}
	.mainvisual .catchphrase {
			color: #fff;
			text-shadow: 1px 1px 1px #777;
			font-size: 1.4rem;
			top:50px;
			left: 6%;
	}
	
  /*-------------------------------------------
  Essay
  -------------------------------------------*/
  .essay {
			margin-bottom: 60px;
	}
	.essay .section-title {
			margin: 0 0 -7vw;
			text-align: center;
	}
	.essay .flex {
			flex-direction: column;
	}
	.essay .flex .img {
			width: 100%;
	}
	.essay .flex .img img {
			height: 300px;
	}
	.essay .flex .text {
			width: 100%;
			margin-left: 0;
			padding: 20px 20px 0;
	}
	.essay .flex .text .title {
			font-size: 20px;
			margin-bottom: 20px;
	}
	.essay .flex .text .description {
			margin-bottom: 20px;
	}

}