@charset "utf-8";


body {
	-webkit-text-size-adjust: 100%;
}

#contents{
	width: auto;
	padding: 0;
	background: #FFFEFA;
}

.l-main{
	padding: 0;
	width: auto;
	overflow: hidden;
}

.main__img{
	height: 650px;
}

.main__img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.breadcrumbs {
	background: #FFFEFA;
}
[class*="section__wrapper--"] {
	padding-block: 120px;
}
	[class*="section__inner--"] {
		width: 1140px;
		margin: 0 auto;
		position: relative;
		z-index: 1;
	}
		[class*="ttl__box--"] {
			display: flex;
			gap: 14px;
			margin-bottom: 50px;
			align-items: flex-end;
		}
			[class*="section__ttl--"] {
				color: #000;
				font-family: "Aref Ruqaa";
				font-size: 60px;
				font-weight: 400;
				line-height: 1;
				letter-spacing: 0.12em;
			}
			[class*="section__sub-ttl--"] {
				color: #000;
				font-family: "Zen Old Mincho";
				font-size: 16px;
				font-weight: 400;
				line-height: 1;
				letter-spacing: 0.12em;
			}
			.fade-in-text span {
				display: inline-block;
				font-family: "Aref Ruqaa";
				opacity: 0;
				transition: .3s;
			}
			[class*="section__sub-ttl--"].fade-in-text span {
				font-family: "Zen Old Mincho";
			}
			.fade-in-text span.active {
				opacity: 1;
				transform: translateX(0);
			}
			.section__btn {
				width: 212px;
				height: 60px;
				margin: 0 auto;
			}
				.section__link {
					display: flex;
					width: 100%;
					height: 100%;
					color: #202020;
					font-family: "Zen Old Mincho";
					font-size: 16px;
					font-weight: 400;
					line-height: 1.6;
					letter-spacing: 0.04em;
					position: relative;
					border: 1px solid #959595;
					align-items: center;
					justify-content: center;
				}
				.section__link::before {
					content: "";
					position: absolute;
					background: url(../images/section-arrow.svg) no-repeat center / cover;
					width: 13px;
					height: 3px;
					top: 0;
					bottom: 0;
					margin: auto;
					right: 18px;
					transition: all .4s;
				}
				.section__link::after {
					background: #202020;
					position: absolute;
					top: 0;
					left: 0;
					content: '';
					width: 100%;
					height: 100%;
					transform: scale(0, 1);
					transform-origin: left top;
					transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
					z-index: -1;
				}
				.section__link:hover {
					color: #FFFEFA;
					opacity: 1;
				}
				.section__link:hover::before {
					background: url(/images/top/contents__arrow-on.svg) no-repeat center / cover;
				}
				.section__link:hover::after {
					transform: scale(1, 1);
				}
				.fadein {
					transform: translate3d(0, 30px, 0);
					transition: 1s;
					opacity: 0;
				}
				.fadein.animated {
					transform: translate3d(0, 0, 0);
					opacity: 1;
				}

.section__wrapper--about {
	background: url(../images/about-bg.webp) no-repeat center / cover;
	position: relative;
	z-index: 0;
}
.section__wrapper--about::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(243, 242, 237, .6);
	z-index: 1;
}
	.section__inner--about::before {
		content: "";
		position: absolute;
		background: url(../images/about__h.webp) no-repeat center / cover;
		width: 394px;
		height: 485px;
		top: 12px;
		right: -50px;
	}
		.about__box {
			display: flex;
			flex-direction: column;
			gap: 33px;
			margin-bottom: 49px;
		}
			.about__text {
				color: #202020;
				font-family: "Zen Old Mincho";
				font-size: 16px;
				font-weight: 400;
				line-height: 1.99;
				letter-spacing: 0.04em;
			}
		.about__btn {
			width: 242px;
			height: 60px;
		}
			.about__btn .section__link::before {
				background: url(../images/about-arrow.svg) no-repeat center / cover;
				width: 13px;
				height: 13px;
				right: 18px;
			}
			.about__btn .section__link.section__link:hover::before {
				background: url(../images/about-arrow-on.svg) no-repeat center / cover;
			}
			 
.section__wrapper--interview {
	background: #FFFEFA;
	padding-block: 120px 119px;
}
	.section__inner--interview::before,
	.section__inner--interview::after {
		content: "";
		position: absolute;
		width: 555px;
		height: 685px;
		z-index: -1;
	}
	.section__inner--interview::before {
		background: url(../images/interview-bg.svg) no-repeat center / cover;
		top: -120px;
		right: -390px;
	}
	.section__inner--interview::after {
		background: url(../images/interview-bg-bottom.svg) no-repeat center / cover;
		bottom: -119px;
		left: -390px;
	}
	.section__wrapper--interview .ttl__box--interview {
		justify-content: center;
	}
		.interview__list {
			display: flex;
			flex-direction: column;
			gap: 50px;
			margin-bottom: 50px;
		}
			[class*="interview__item--"] {
				display: flex;
				gap: 40px;
				align-items: center;
			}
			.interview__item--middle {
				flex-direction: row-reverse;
				gap: 38px;
			}
				.interview__img {
					flex-shrink: 0;
				}
				.interview__item--top .interview__img {
					width: 400px;
					height: 350px;
				}
				.interview__item--middle .interview__img {
					width: 380px;
					height: 250px;
				}
				.interview__item--bottom .interview__img {
					width: 360px;
					height: 350px;
				}
				.interview__text-box {
					display: flex;
					flex-direction: column;
					gap: 21px;
				}
					.interview__title {
						color: #202020;
						font-family: "Zen Old Mincho";
						font-size: 40px;
						font-weight: 400;
						line-height: 1.4;
						letter-spacing: 1.6px;
					}
					.interview__title-color {
						color: #B49E39;
						font-family: "Zen Old Mincho";
						font-size: 40px;
						font-weight: 400;
						line-height: 1.4;
						letter-spacing: 0.04em;
					}
					.interview__text {
						color: #202020;
						font-family: "Zen Old Mincho";
						font-size: 16px;
						font-weight: 400;
						line-height: 2;
						letter-spacing: 0.04em;
					}
		.recommend__box {
			width: 1140px;
			min-height: 481px;
			background: #F8F7F2;
			padding: 50px;
			margin-bottom: 51px;
		}
			.recommend__title {
				color: #202020;
				font-family: "Zen Old Mincho";
				font-size: 40px;
				font-weight: 400;
				line-height: 1.4;
				letter-spacing: 0.04em;
				text-align: center;
				margin-bottom: 20px;
			}
			.recommend__list {
				display: flex;
				gap: 20px;
				margin-bottom: 20px;
			}
				[class*="recommend__circle--"] {
					width: 245px;
					height: 245px;
					flex-shrink: 0;
					border-radius: 9999px;
					background: #FFF;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				[class*="recommend__circle--"]::before {
					content: "";
					position: absolute;
					width: 184px;
					height: 184px;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;
				}
				.recommend__circle--blue::before  {
					background: url(../images/circle-blue.svg) no-repeat center / cover;
				}
				.recommend__circle--red::before {
					background: url(../images/circle-red.svg) no-repeat center / cover;
				}
				.recommend__circle--green::before {
					background: url(../images/circle-green.svg) no-repeat center / cover;
				}
				.recommend__circle--yellow::before {
					background: url(../images/circle-yellow.svg) no-repeat center / cover;
				}
					.recommend__recommend-text {
						color: #202020;
						text-align: center;
						font-family: "Zen Old Mincho";
						font-size: 16px;
						font-weight: 400;
						line-height: 2.03;
						letter-spacing: 0.04em;
					}
				.recommend__bottom-text {
					color: #B49E39;
					font-family: "Zen Old Mincho";
					font-size: 20px;
					font-weight: 400;
					line-height: 2;
					letter-spacing: 0.04em;
					text-align: center;
				}

.section__wrapper--volunteer {
	background: url(../images/volunteer-bg.webp) no-repeat center / cover;
	padding-block: 120px 119px;
}
		.ttl__box--volunteer {
			justify-content: center;
			margin-bottom: 51px;
		}
			.volunteer__top-text {
				color: #202020;
				text-align: center;
				font-family: "Zen Old Mincho";
				font-size: 16px;
				font-weight: 400;
				line-height: 2.02;
				letter-spacing: 0.04em;
				margin-bottom: 49px;
			}
			.volunteer__box {
				position: relative;
			}
				.volunteer__title {
					position: absolute;
					top: 1px;
					left: 0;
					color: #202020;
					font-family: "Zen Old Mincho";
					font-size: 41px;
					font-style: normal;
					font-weight: 400;
					line-height: 2;
					letter-spacing: 0.04em;
				}
				.volunteer__title-color {
					color: #B49E39;
					font-family: "Zen Old Mincho";
					font-size: 41px;
					font-weight: 400;
					line-height: 1.99;
					letter-spacing: 0.04em;
				}
				.volunteer__list {
					display: flex;
					gap: 36px;
					margin-bottom: 49px;
				}
					[class*="volunteer__item--"] {
						display: flex;
						flex-direction: column;
						gap: 16px;
					}
					.volunteer__item--left {
						padding-top: 100px;
					}
					.volunteer__item--middle {
						padding-top: 50px;
					}
						.volunteer__img {
							width: 356px;
							height: 450px;
							flex-shrink: 0;
						}
						.volunteer__text-box {
							display: flex;
							flex-direction: column;
							gap: 5px;
						}
							.volunteer__item-title {
								color: #202020;
								font-family: "Zen Old Mincho";
								font-size: 30px;
								font-weight: 400;
								line-height: 1.4;
								letter-spacing: 0.04em;
							}
							.volunteer__item-text {
								color: #202020;
								font-family: "Zen Old Mincho";
								font-size: 16px;
								font-weight: 400;
								line-height: 2;
								letter-spacing: 0.04em;
							}
		.section__wrapper--volunteer .recommend__box {
			min-height: 421px;
			background: #FFF;
		}
			.section__wrapper--volunteer .recommend__list {
				margin: 0;
			}
			.section__wrapper--volunteer [class*="recommend__circle--"] {
				background: #F7F5EE;
			}
				
				.section__wrapper--volunteer .recommend__circle--blue::before  {
					background: url(../images/circle-blue-bottom.svg) no-repeat center / cover;
				}
				.section__wrapper--volunteer .recommend__circle--red::before {
					background: url(../images/circle-red-bottom.svg) no-repeat center / cover;
				}
				.section__wrapper--volunteer .recommend__circle--green::before {
					background: url(../images/circle-green-bottom.svg) no-repeat center / cover;
				}
				.section__wrapper--volunteer .recommend__circle--yellow::before {
					background: url(../images/circle-yellow-bottom.svg) no-repeat center / cover;
				}

.section__wrapper--faq {
	background: #FFFEFA;
	padding-block: 120px 119px;
}
	.section__inner--faq::before,
	.section__inner--faq::after {
		content: "";
		position: absolute;
		width: 555px;
		height: 685px;
		z-index: -1;
	}
	.section__inner--faq::before {
		background: url(../images/faq-bg.svg) no-repeat center / cover;
		top: -120px;
		right: -390px;
	}
	.section__inner--faq::after {
		background: url(../images/faq-bg-bottom.svg) no-repeat center / cover;
		bottom: -119px;
		left: -390px;
	}
		.ttl__box--faq {
			justify-content: center;
		}
		.faq__list {
			display: flex;
			flex-direction: column;
			gap: 30px;
		}
			.faq__item {
				display: flex;
				flex-direction: column;
				gap: 10px;
				padding-bottom: 29px;
				border-bottom: 1px solid #E9E9E9;
			}
			.faq__item:last-child {
				border: none;
				padding: 0;
			}
				[class*="faq__box--"] {
					display: flex;
					gap: 10px;
				}
				.faq__english {
					font-family: "Zen Old Mincho";
					font-size: 14px;
					font-weight: 400;
					line-height: 1.6;
					letter-spacing: 0.04em;
					display: flex;
					width: 31px;
					height: 31px;
					flex-shrink: 0;
					border-radius: 9999px;
					justify-content: center;
					padding-top: 3px;
				}
				.faq__box--q .faq__english {
					color: #000;
					border: 1px solid #000;
				}
				.faq__box--a .faq__english {
					color: #FFF;
					background: #000;
				}
					.faq__text {
						color: #202020;
						font-family: "Zen Old Mincho";
						font-size: 18px;
						font-weight: 400;
						line-height: 1.58;
						letter-spacing: 0.04em;
						line-height: 1.628;
					}
					.faq__box--a .faq__text {
						font-size: 16px;
					}

		