body.page {
	#main {
		margin-top: 100px;
		
		@media screen and (max-width: 767px) {
			margin-top: 60px;
		}
		
		#page-mv {
			.mv-inner {
				background-color: transparent;
			}
			
			.intro-box {
				column-gap: 40px;
				display: flex;
				justify-content: space-between;
				
				@media screen and (max-width: 767px) {
					flex-wrap: wrap;
					justify-content: space-between;
					row-gap: 30px;
				}
				
				.page-ttl-box {
					flex-shrink: 1;
					width: fit-content;
					
					&.image-none {
						max-width: none;
					}
					
					.sec-ttl {
						font-size: 3.8rem;
						
						@media screen and (max-width: 767px) {
							font-size: 2.6rem;
						}
					}
					
					.sec-sub-ttl {
						color: var(--main-color);
						font-size: 1.8rem;
						
						@media screen and (max-width: 767px) {
							font-size: 1.4rem;
						}
					}
				}
				
				.text-box {
					flex-shrink: 1;
					margin-right: 50px;
					max-width: 910px;
					width: fit-content;
					
					@media screen and (max-width: 767px) {
						margin-right: 0;
						max-width: unset;
					}
					
					p {
						& + p {
							margin-top: 1.5em;
						}
					}
				}
			}
			
			.image-box {
				aspect-ratio: 35 / 12;
				margin-top: 64px;
				
				@media screen and (max-width: 767px) {
					margin-top: 30px;
				}
				
				img {
					height: 100%;
					object-fit: cover;
					object-position: center;
				}
			}
		}
	}
}

body.page-template-template-modelhouse {

	.section-highlight {
		position: relative;
		
		&::before {
			background-color: #ebebe5;
			content: "";
			display: block;
			bottom: 0;
			height: 45%;
			left: 0;
			position: absolute;
			width: 100%;
			z-index: -1;
		
			@media screen and (max-width: 1195px) {
				content: none;
			}
		}
		
		.sec-inner {
			padding-top: 0;
		}
		
		.content-box {
			@media screen and (max-width: 767px) {
				margin-top: 0;
			}
		}
		
		.highlight-content {
			column-gap: 20px;
			counter-reset: number 0;
			display: flex;
			justify-content: space-between;

			@media screen and (max-width: 1195px) {
				flex-wrap: wrap;
				justify-content: center;
				row-gap: 40px;
			}

			@media screen and (max-width: 767px) {
				flex-direction: column;
				gap: 40px;
			}

			.highlight-item {
				display: flex;
				flex-direction: column;
				max-width: 380px;
				width: 100%;

				@media screen and (max-width: 1195px) {
					max-width: unset;
					width: calc(50% - 10px);
				}

				@media screen and (max-width: 767px) {
					max-width: 100%;
					width: 100%;
				}

				h3 {
					align-items: center;
					color: var(--main-color);
					column-gap: 20px;
					font-size: clamp(1.19rem, calc(1.58vw + 0.82rem), 2.20rem);
					font-weight: 500;
					display: flex;
					line-height: 1.8;
					margin-top: 18px;

					@media screen and (max-width: 767px) {
						font-size: 1.9rem;
						line-height: 1.6;
					}
					
					&::before {
						align-items: center;
						border: 1px solid var(--main-color);
						border-radius: 50%;
						color: var(--main-color);
						counter-increment: number 1;
						content: counter(number);
						display: flex;
						flex-shrink: 0;
						font-family: "Aboreto", system-ui;
						font-size: 2.8rem;
						font-weight: 400;
						height: 54px;
						justify-content: center;
						letter-spacing: 0;
						line-height: 1;
						width: 54px;
						
						@media screen and (max-width: 767px) {
							font-size: 2.2rem;
							height: 30px;
							width: 30px;
						}
					}
				}

				.image-box {
					aspect-ratio: 10 / 13;
					margin-top: 24px;
					overflow: hidden;
				}

				.image-box img {
					display: block;
					height: 100%;
					object-fit: cover;
					width: 100%;
				}

				.text-box {
					margin-top: 20px;
				}

				.text-box p {
					line-height: 1.9;
				}
			}
		}
	}

	.section-gallery {
		overflow-x: hidden;

		#modelhouse-gallery-slider {
			.swiper {
				margin-left: calc(50% - 50vw);
				margin-right: calc(50% - 50vw);
				width: 100vw;
			}

			.swiper-wrapper {
				transition-timing-function: linear;
			}

			.swiper-slide {
				aspect-ratio: 4 / 3;
				overflow: hidden;
				width: 480px;

				@media screen and (max-width: 767px) {
					width: 280px;
				}
			}

			.swiper-slide img {
				display: block;
				height: 100%;
				object-fit: cover;
				width: 100%;
			}
		}

		.gallery-movie {
			aspect-ratio: 16 / 9;
			margin-inline: auto;
			margin-top: 200px;
			max-width: 1300px;
			overflow: hidden;
			width: 100%;

			@media screen and (max-width: 767px) {
				margin-top: 40px;
			}

			iframe {
				border: 0;
				display: block;
				height: 100%;
				width: 100%;
			}
		}
	}

	.section-featured {
		.sec-inner {
			padding-top: 0;
		}

		.image-box {
			position: relative;
		}

		.image-box img {
			display: block;
			height: auto;
			width: 100%;
		}

		.image-box .caption {
			background-color: var(--enji);
			bottom: 12px;
			color: var(--white);
			font-size: 1.3rem;
			left: 12px;
			letter-spacing: .05em;
			padding: 6px 14px;
			position: absolute;
		}
	}

	.section-recommend {
		background-color: var(--bg-color);

		.sec-ttl-box {
			text-align: center;
		}

		.sec-ttl-box .sec-ttl {
			font-size: 2.6rem;

			@media screen and (max-width: 767px) {
				font-size: 2.1rem;
			}
		}

		.content-box {
			margin-top: 80px;
			margin-inline: auto;
			width: fit-content;
			
			@media screen and (max-width: 767px) {
				margin-top: 40px;
			}
		}

		.check-list {
			display: flex;
			flex-direction: column;
			gap: 18px;
			list-style: none;
			padding: 0;
		}

		.check-list li {
			border-bottom: 1px solid #DBDBDB;
			font-size: 2rem;
			font-weight: 500;
			line-height: 1.8;
			padding-bottom: 18px;
			padding-left: 3.5em;
			padding-right: 20px;
			position: relative;

			@media screen and (max-width: 767px) {
				font-size: 1.4rem;
			}
		}

		.check-list li::before {
			background-color: #fff;
			border: 1px solid #9F9F9F;
			border-radius: 2px;
			content: "";
			height: 28px;
			left: 0;
			position: absolute;
			top: .35em;
			width: 28px;
		}

		.check-list li::after {
			background-image: url("../images/common/icon_check.svg");
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
			content: "";
			height: 32px;
			left: 2px;
			position: absolute;
			top: -2px;
			width: 46px;
			
			@media screen and (max-width: 767px) {
				height: 24px;
				left: 4px;
				top: 2px;
				width: 34px;
			}
		}
	}

	.section-spec {
		.sec-ttl-box .sec-ttl {
			font-size: 3rem;

			@media screen and (max-width: 767px) {
				font-size: 2.1rem;
			}
		}

		.spec-wrap {
			column-gap: 60px;
			display: flex;
			justify-content: space-between;
			margin-top: 90px;

			@media screen and (max-width: 767px) {
				flex-direction: column;
				gap: 40px;
				margin-top: 30px;
			}
		}

		.spec-info {
			max-width: 480px;
			width: 100%;

			@media screen and (max-width: 767px) {
				max-width: 100%;
			}
		}

		.spec-image {
			width: 100%;

			@media screen and (max-width: 767px) {
				max-width: 100%;
			}
		}

		.modelhouse-title {
			font-size: 2.2rem;
			font-weight: 500;
		}

		.c-spec-area dl {
			margin: 45px 0 0 0;

			& + dl {
				margin-top: 40px;
			}

			@media screen and (max-width: 767px) {
				flex-direction: column;
				gap: 8px;
				margin-top: 20px;
			}
		}

		.c-spec-area dt {
			flex-shrink: 0;
			font-size: 1.6rem;
			font-weight: 600;
			margin-bottom: 10px;
			width: 140px;

			@media screen and (max-width: 767px) {
				width: 100%;
			}
		}

		.c-spec-area dd {
			font-size: 1.5rem;
			line-height: 1.4;
			font-weight: 400;
			margin-left: 0;
		}
		
		.c-spec-area dd + dd {
			margin-top: .5em;
		}

		.spec-image .image-box {
			position: relative;
		}

		.spec-image .image-box img {
			display: block;
			height: auto;
			width: 100%;
		}

		.spec-image .image-box .caption {
			background-color: var(--enji);
			bottom: 12px;
			color: var(--white);
			font-size: 1.3rem;
			left: 12px;
			letter-spacing: .05em;
			padding: 6px 14px;
			position: absolute;
		}
	}

	.section-reservation {
		background-color: var(--bg-color);

		.sec-ttl-box {
			text-align: center;
		}

		.sec-ttl-box .sec-ttl {
			@media screen and (max-width: 767px) {
				font-size: 2.1rem;
			}
		}

		.content-box {
			margin-inline: auto;
			max-width: 1040px;
		}

		.reservation-lead {
			margin-bottom: 40px;
		}

		.reservation-lead .lead-ttl {
			color: var(--main-color);
			font-size: 1.8rem;
			font-weight: 500;
			margin-bottom: 16px;
			text-align: center;
		}

		.reservation-lead p {
			font-size: 1.5rem;
			line-height: 1.9;
			text-align: center;
			
			@media screen and (max-width: 767px) {
				text-align: left;
				width: fit-content;
			}
		}

		.reservation-lead p + p {
			margin-top: 1em;
		}

		.reservation-lead a {
			color: var(--main-color);
			text-decoration: underline;
		}
		
		.contact-box {
			background-color: var(--white);
		}
	}
}

body.page-template-template-strengths {
	#main {
		#page-mv {
			.intro-box {
				
				.text-box {
					position: relative;
					p {
						& + p {
							margin-top: 0;
						}
					}
				}
			}
		}
	}

	
	
	.sec-ttl-box {
		align-items: center;
		display: flex;
		gap: 36px;

		@media screen and (max-width: 767px) {
			gap: 16px;
		}

		span {
			align-items: center;
			background-color: var(--white);
			border: 1px solid var(--main-color);
			border-radius: 50%;
			display: flex;
			flex-direction: column;
			flex-shrink: 0;
			font-size: 4rem;
			font-weight: 400;
			height: 106px;
			justify-content: center;
			margin: 0;
			row-gap: 3px;
			width: 106px;

			@media screen and (max-width: 767px) {
				font-size: 2.8rem;
				height: 72px;
				width: 72px;
			}

			&::before {
				content: "POINT";
				font-family: "Aboreto", system-ui;
				font-size: 1.8rem;
				font-weight: 400;

				@media screen and (max-width: 767px) {
					font-size: 1.2rem;
				}
			}
		}

		.sec-ttl {
			font-size: 3.2rem;
			line-height: 1.6;
			min-width: 0;
			text-decoration-color: var(--main-color);
			text-decoration-line: underline;
			text-decoration-skip-ink: none;
			text-decoration-thickness: 1px;
			text-underline-offset: 0.3em;
			width: fit-content;

			@media screen and (max-width: 767px) {
				font-size: 1.9rem;
			}
		}
	}
	
	.section-point {
		overflow: clip;
	}
	
	.sec-inner {
		background-color: var(--bg-color);
		padding: 75px 0;

		@media screen and (max-width: 767px) {
			padding: 45px 0;
		}

		& + .sec-inner {
			margin-top: 65px;

			@media screen and (max-width: 767px) {
				margin-top: 30px;
			}
		}
		
		&.point-1 {
			.image-box {
				position: relative;

				&::before {
					--board-width: clamp(200px, 36vw, 523px);
					aspect-ratio: 523 / 334;
					background-image: url("../images/strengths/point_board01.png");
					background-repeat: no-repeat;
					background-size: contain;
					content: "";
					display: block;
					position: absolute;
					right: calc(var(--board-width) * -0.457);
					top: calc(var(--board-width) * -0.333);
					width: var(--board-width);
					z-index: 0;
					
					@media screen and (max-width: 767px) {
						top: -15px;
					}
				}

				img {
					position: relative;
					z-index: 1;
				}
			}
		}
		
		&.point-2 {
			.image-box {
				position: relative;

				&::before {
					--board-width: clamp(270px, 50vw, 716px);
					aspect-ratio: 716 / 270;
					background-image: url("../images/strengths/point_board02.png");
					background-repeat: no-repeat;
					background-size: contain;
					content: "";
					display: block;
					position: absolute;
					left: calc(var(--board-width) * -0.080);
					top: calc(var(--board-width) * 0.324);
					width: var(--board-width);
					z-index: 0;
				}

				img {
					position: relative;
					z-index: 1;
				}
			}
		}

		&.point-3 {
			
			.content-box {
				align-items: flex-start;
				display: flex;

				.image-box {
					position: sticky;
					top: 150px;

					@media screen and (max-width: 767px) {
						position: relative;
						top: 0;
					}
					
					&::before {
						--board-width: clamp(160px, 18vw, 331px);
						aspect-ratio: 331 / 606;
						background-image: url("../images/strengths/point_board03.png");
						background-repeat: no-repeat;
						background-size: contain;
						content: "";
						display: block;
						position: absolute;
						right: calc(var(--board-width) * -0.5);
						top: calc(var(--board-width) * -0.15);
						width: var(--board-width);
						z-index: 0;
					}

					img {
						position: relative;
						z-index: 1;
					}
				}
			}
		}
	}
	
	.content-box {
		align-items: flex-end;
		display: flex;
		justify-content: space-between;
		gap: 37px;
		margin-top: 0;

		@media screen and (max-width: 767px) {
			align-items: stretch;
			flex-direction: column;
		}
		
		& + .content-box {
			margin-top: 150px;
			
			@media screen and (max-width: 767px) {
				margin-top: 50px;
			}
			
			.description {
				max-width: 710px;
				
				@media screen and (max-width: 767px) {
					max-width: unset;
				}
			}
		}
	}

	.description-box {
		max-width: 790px;
		position: relative;
		width: 100%;
		z-index: 2;

		.sec-ttl-box {
			& + .description {
				margin-top: 100px;

				@media screen and (max-width: 767px) {
					margin-top: 40px;
				}
			}
		}

		.description {
			max-width: 630px;
			width: 100%;
			
			@media screen and (max-width: 767px) {
				max-width: unset;
			}

			
			h3 {
				align-items: center;
				color: var(--main-color);
				column-gap: 14px;
				display: flex;
				font-size: 2.4rem;

				@media screen and (max-width: 767px) {
					font-size: 1.8rem;
				}

				&::before {
					background-image: url("../images/common/arrow_title.svg");
					background-repeat: no-repeat;
					background-size: contain;
					content: "";
					display: block;
					height: 14px;
					width: 21px;
				}
			}

			p {
				margin-top: 30px;

				@media screen and (max-width: 767px) {
					margin-top: 16px;
				}
			}

			& + .description {
				margin-top: 50px;

				@media screen and (max-width: 767px) {
					margin-top: 32px;
				}
			}
		}
		
		.image-box {
			max-width: 600px;
			width: 100%;
			
			img {
				width: auto;
			}
		}
	}
	
	.image-box {
		@media screen and (max-width: 767px) {
			aspect-ratio: 4 / 3;
			height: 100%;
			width: 100%;
		}
		
		img {
			@media screen and (max-width: 767px) {
				height: 100%;
				object-fit: cover;
				object-position: center;
				width: 100%;
			}
		}
	}

	.step-container {
		background-color: rgb(255 255 255 / .8);
		border-radius: 6px;
		margin-top: 60px;
		padding: 45px 40px;

		@media screen and (max-width: 767px) {
			margin-top: 40px;
			padding: 28px 20px;
		}
	}

	.step-item {
		column-gap: 30px;
		display: flex;
		position: relative;

		@media screen and (max-width: 767px) {
			column-gap: 15px;
		}

		&::before {
			border-left: 1px dashed var(--border-color);
			bottom: 0;
			content: "";
			height: 95%;
			left: 28px;
			position: absolute;
			top: 56px;
			translate: -50% 0;

			@media screen and (max-width: 767px) {
				left: 21px;
				top: 46px;
			}
		}

		&:last-child {
			&::before {
				display: none;
			}
			
			.step-text {
				border-bottom: none;
			}
		}
		
		.nubmer {
			padding-top: 2px;
			text-align: center;
			width: 70px;

			@media screen and (max-width: 767px) {
				width: 60px;
			}
			
			p {
				align-items: center;
				color: var(--main-color);
				display: flex;
				font-size: 1.8rem;
				line-height: 1;
			}

			span {
				color: var(--main-color);
				display: block;
				font-size: 2.3rem;

				@media screen and (max-width: 767px) {
					font-size: 1.8rem;
				}
			}
		}

		.step-text {
			border-bottom: 1px solid #EBDBC4;
			padding-bottom: 50px;
			width: calc(100% - 70px);

			@media screen and (max-width: 767px) {
				padding-bottom: 36px;
			}

			h3 {
				color: var(--main-color);
				font-size: 2rem;
				font-weight: 500;
				line-height: 1.8;

				@media screen and (max-width: 767px) {
					font-size: 1.7rem;
				}
			}

			.text-box {
				margin-top: 24px;

				@media screen and (max-width: 767px) {
					margin-top: 16px;
				}

				p {
					line-height: 2;

					& + p {
						margin-top: 24px;
					}
				}
			}

			.wrap-link {
				display: flex;
				justify-content: flex-end;
				margin-top: 28px;

				@media screen and (max-width: 767px) {
					margin-top: 20px;
				}
			}
		}
		
		& + .step-item {
			margin-top: 50px;
		}
	}

	.point-3 .content-box:has(.support-container) {
		display: block;
	}

	.support-container {
		display: flex;
		margin-top: 70px;

		@media screen and (max-width: 767px) {
			flex-direction: column;
			margin-top: 40px;
		}
	}

	.support-item {
		align-content: start;
		display: grid;
		flex: 1 1 0;
		grid-template-areas:
			"icon"
			"ttl"
			"text";
		padding-inline: 40px;
		text-align: center;

		@media screen and (max-width: 1023px) {
			padding-inline: 24px;
		}

		@media screen and (max-width: 767px) {
			align-items: center;
			column-gap: 20px;
			grid-template-columns: auto 1fr;
			grid-template-areas:
				"ttl  ttl"
				"icon text";
			padding-inline: 0;
			row-gap: 16px;
		}

		& + .support-item {
			border-left: 1px solid var(--main-color);

			@media screen and (max-width: 767px) {
				border-left: none;
				border-top: 1px solid var(--main-color);
				margin-top: 32px;
				padding-top: 32px;
			}
		}

		.support-icon {
			grid-area: icon;

			img {
				height: 96px;
				width: auto;

				@media screen and (max-width: 767px) {
					height: 80px;
				}
			}
		}

		.support-ttl {
			align-items: flex-start;
			color: var(--main-color);
			column-gap: 12px;
			display: flex;
			font-size: 1.8rem;
			font-weight: 500;
			grid-area: ttl;
			height: 60px;
			justify-content: flex-start;
			line-height: 1.5;
			margin-top: 20px;

			@media screen and (max-width: 767px) {
				font-size: 1.7rem;
				height: auto;
				margin-top: 0;
			}

			.num {
				align-items: center;
				background-color: var(--white);
				border: 1px solid var(--main-color);
				border-radius: 50%;
				color: var(--main-color);
				display: flex;
				flex-shrink: 0;
				font-size: 1.5rem;
				font-weight: 400;
				height: 32px;
				justify-content: center;
				width: 32px;
			}
			
			.text {
				color: var(--main-color);
				font-size: 2.2rem;
				display: block;
				line-height: 1.4;
				text-align: left;
				word-break: auto-phrase;
			}
		}

		p {
			grid-area: text;
			margin-top: 16px;
			text-align: left;

			@media screen and (max-width: 767px) {
				margin-top: 0;
			}
		}
	}
}

body.page-template-template-company {
	section:nth-child(even) {
		background-color: var(--bg-color);
	}

	.section-message {
		.sec-inner {
			padding-top: 0;
		}

		.content-box {
			display: flex;
			gap: 40px 50px;
			margin-right: 50px;
			margin-top: 30px;
			width: auto;
			
			@media screen and (max-width: 959px) {
				flex-wrap: wrap;
				margin-right: 0;
				width: 100%;
			}
			
			.wrap-message {
				background-color: var(--white);
				border: 1px solid var(--border-color);
				max-width: 800px;
				padding: 45px 50px;
				position: relative;
				width: 100%;

				@media screen and (max-width: 959px) {
					max-width: unset;
					padding: 30px 25px;
				}

				&::before,
				&::after {
					content: "";
					height: 24px;
					position: absolute;
					width: 24px;

					@media screen and (max-width: 959px) {
						height: 18px;
						width: 18px;
					}
				}

				&::before {
					border-left: 2px solid var(--main-color);
					border-top: 2px solid var(--main-color);
					left: -1px;
					top: -1px;
				}

				&::after {
					border-bottom: 2px solid var(--main-color);
					border-right: 2px solid var(--main-color);
					bottom: -1px;
					right: -1px;
				}
			}

			h3 {
				border-bottom: 2px solid var(--main-color);
				color: var(--main-color);
				font-size: 2.3rem;
				font-weight: 500;
				padding-bottom: 18px;

				@media screen and (max-width: 959px) {
					font-size: 1.8rem;
					padding-bottom: 14px;
				}
			}
			
			.message-box {
				margin-top: 40px;
				p {
					line-height: 2.2;
					
					& + p {
						margin-top: 1.5em;
						
						@media screen and (max-width: 959px) {
							margin-top: 1em;
						}
					}
				}
			}
			
			.profile-box {
				background-color: var(--bg-color);
				border: 1px solid var(--border-color);
				max-width: 550px;
				padding: 45px 40px;
				position: relative;
				width: 100%;

				@media screen and (max-width: 959px) {
					flex-wrap: wrap-reverse;
					max-width: unset;
					padding: 30px 25px;
				}

				&::before,
				&::after {
					content: "";
					height: 24px;
					position: absolute;
					width: 24px;

					@media screen and (max-width: 959px) {
						height: 18px;
						width: 18px;
					}
				}

				&::before {
					border-left: 2px solid var(--main-color);
					border-top: 2px solid var(--main-color);
					left: -1px;
					top: -1px;
				}

				&::after {
					border-bottom: 2px solid var(--main-color);
					border-right: 2px solid var(--main-color);
					bottom: -1px;
					right: -1px;
				}
				
				.text-box {
					margin-top: 30px;
					max-width: 650px;
					width: 100%;
					
					@media screen and (max-width: 959px) {
						max-width: unset;
					}
					
					.name {
						font-weight: 700;
						margin-bottom: 25px;
						width: fit-content;

						@media screen and (max-width: 959px) {
							margin-inline: auto;
						}
					}
					
					.profile {
						font-size: 1.5rem;
						
						@media screen and (max-width: 959px) {
							font-size: 1.3rem;
						}
					}
				}
				
				.image-box {
					margin-inline: auto;
					max-width: 370px;
					width: 100%;
					
					@media screen and (max-width: 959px) {
						max-width: 200px;
					}
					
					img {
						display: block;
						height: auto;
						width: 100%;
					}
				}
			}
		}
	}
	
	.section-contribution {
		.intro-box {
			margin-inline: auto;
			width: 90%;
		}
		
		.contribution-container {
			display: flex;
			flex-wrap: wrap;
			margin-top: 50px;
			
			@media screen and (max-width: 767px) {
				margin-top: 30px;
			}
			
			.contribution-item {
				display: grid;
				place-items: center;
				position: relative;
				width: 50%;
				
				@media screen and (max-width: 767px) {
					width: 100%;
				}
				
				.image-box {
					box-shadow: 0px 0px 15px -5px var(--main-text-color);
					position: relative;
					z-index: 2;
				}
				
				.text-box {
					margin-top: 30px;
					position: relative;
					z-index: 2;
					
					@media screen and (max-width: 767px) {
						margin-top: 20px;
					}
					
					h3 {
						color: var(--white);
						font-size: 2.5rem;
						font-weight: 700;
						
						@media screen and (max-width: 767px) {
							font-size: 1.8rem;
						}
					}
					
					p {
						color: var(--white);
						margin-top: 5px;
					}
				}
				
				&:nth-child(1)::before {
					background-image: url("../images/company/contribution01.png");
					background-position: center;
					content: "";
					display: block;
					opacity: .1;
					background-repeat: no-repeat;
					background-size: cover;
					height: 100%;
					position: absolute;
					width: 100%;
					z-index: 2;
				}
				
				&:nth-child(1)::after {
					background-color: #16370e;
					content: "";
					display: block;
					left: 0;
					opacity: 1;
					height: 100%;
					position: absolute;
					top: 0;
					width: 100%;
					z-index: 1;
				}
				
				&:nth-child(2)::before {
					background-image: url("../images/company/contribution02.png");
					background-position: center;
					content: "";
					display: block;
					opacity: .1;
					background-repeat: no-repeat;
					background-size: cover;
					height: 100%;
					position: absolute;
					width: 100%;
					z-index: 2;
				}
				
				&:nth-child(2)::after {
					background-color: #0f4355;
					content: "";
					display: block;
					left: 0;
					opacity: 1;
					height: 100%;
					position: absolute;
					top: 0;
					width: 100%;
					z-index: 1;
				}
				
				.wrap-contribution-item {
					height: auto;
					padding: 70px 20px;
					max-width: 570px;
					width: 100%;

					@media screen and (max-width: 767px) {
						padding: 40px 15px;
					}
				}
			}
		}
	}

	.section-sdgs {
		.sdgs-frame {
			border: 1px solid var(--main-color);
			border-radius: 1px;
			margin-inline: auto;
			max-width: 1000px;
			outline: 3px solid var(--main-color);
			outline-offset: 5px;
			padding: 70px;

			@media screen and (max-width: 767px) {
				outline-width: 2px;
				outline-offset: 4px;
				padding: 40px 20px;
			}
		}

		.sec-ttl-box {
			text-align: center;
		}

		.content-box {
			margin-top: 40px;

			@media screen and (max-width: 767px) {
				margin-top: 30px;
			}
		}

		.intro-box {
			margin-inline: auto;
			text-align: center;
			width: 90%;

			@media screen and (max-width: 767px) {
				text-align: left;
				width: 100%;
			}
		}

		.sdgs-container {
			margin-inline: auto;
			margin-top: 50px;
			max-width: 1000px;
			width: 100%;

			@media screen and (max-width: 767px) {
				margin-top: 30px;
			}
		}

		.sdgs-item {
			align-items: flex-end;
			column-gap: 40px;
			display: flex;
			padding: 40px 0;

			@media screen and (max-width: 767px) {
				column-gap: 20px;
				flex-wrap: wrap;
				padding: 30px 0;
			}

			& + .sdgs-item {
				border-top: 1px solid var(--main-color);
			}

			.icon-box {
				column-gap: 10px;
				display: flex;
				flex-shrink: 0;
				width: 220px;

				@media screen and (max-width: 767px) {
					column-gap: 8px;
					width: auto;
				}

				img {
					display: block;
					height: auto;
					width: 105px;

					@media screen and (max-width: 767px) {
						width: 80px;
					}
				}
			}

			.text-box {
				flex: 1;

				@media screen and (max-width: 767px) {
					flex-basis: 100%;
					margin-top: 20px;
				}

				h3 {
					font-size: 2rem;
					font-weight: 700;

					@media screen and (max-width: 767px) {
						font-size: 1.7rem;
					}
				}

				p {
					font-size: 1.5rem;
					line-height: 1.9;
					margin-top: 15px;

					@media screen and (max-width: 767px) {
						font-size: 1.3rem;
						margin-top: 10px;
					}
				}
			}
		}
	}

	.section-overview {
		.overview-wrap {
			column-gap: 60px;
			display: flex;
			justify-content: space-between;

			@media screen and (max-width: 1151px) {
				column-gap: 40px;
			}

			@media screen and (max-width: 767px) {
				flex-direction: column;
				row-gap: 40px;
			}
		}

		.left-col {
			max-width: 640px;
			width: 100%;
		}

		.right-col {
			display: flex;
			flex-direction: column;
			flex-shrink: 0;
			row-gap: 30px;
			max-width: 650px;
			width: 100%;

			@media screen and (max-width: 1151px) {
				max-width: 320px;
			}

			@media screen and (max-width: 767px) {
				max-width: unset;
				row-gap: 20px;
				width: 100%;
			}
		}

		.photo-box {
			aspect-ratio: 4 / 3;
			overflow: hidden;
		}

		.photo-box img {
			display: block;
			height: 100%;
			object-fit: cover;
			width: 100%;
		}

		.map-box {
			aspect-ratio: 3 / 2;
			overflow: hidden;
		}

		.map-box iframe {
			border: 0;
			display: block;
			height: 100%;
			width: 100%;
		}

		.info-box {
			margin-top: 50px;

			@media screen and (max-width: 767px) {
				margin-top: 30px;
			}
		}

		.info-box dl {
			margin: 0;
		}

		.info-box .row {
			border-bottom: 1px solid #DBDBDB;
			column-gap: 40px;
			display: grid;
			grid-template-columns: 100px 1fr;
			padding: 20px 0;

			@media screen and (max-width: 767px) {
				column-gap: 20px;
				grid-template-columns: 90px 1fr;
				padding: 15px 0;
			}

			&:first-child {
				border-top: 1px solid #DBDBDB;
			}
		}

		.info-box dt {
			font-weight: 500;
		}

		.info-box dd {
			line-height: 1.8;
			margin: 0;
		}
	}
}

body#contact {
	.section-contact {
		.content-width {
			width: min(100%, calc(1020px + var(--container-padding) * 2));
		}
	}
	
	#main #page-mv .intro-box {
		justify-content: center;
		
		.page-ttl-box {
			text-align: center;
		}
	}
	
	.section-contact {
		.content-box {
			margin-inline: auto;
			margin-top: 0;
			max-width: 1040px;
			width: 100%;
		}
		
		.contact-lead {
			margin-bottom: 40px;
			margin-top: 40px;
			width: 100%
		}
	}
}

body#contact .section-faq {
	.content-width {
		width: min(100%, calc(1020px + var(--container-padding) * 2));
	}
	
	.sec-inner {
		padding-bottom: 0;
		padding-top: 40px;
	}
	
	.content-box {
		width: 100%;
	}
}

body#contact .section-faq .content-box {
	
}

@media screen and (max-width: 767px) {
	body#contact .section-faq .content-box {
		width: 100%;
	}
	
	body#contact .section-faq .content-box .sec-inner {
		padding-top: 0;
	}
}

body#contact .section-faq .faq-item {
	border-bottom: 1px solid var(--border-color);
}

body#contact .section-faq .faq-item:first-child {
	border-top: 1px solid var(--border-color);
}

body#contact .section-faq .question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30px 0 30px 10px;
	background-color: var(--white);
	color: var(--white);
	cursor: pointer;
}

body#contact .section-faq .question .question-text {
	align-items: anchor-center;
	display: flex;
	font-size: 1.8rem;
	font-weight: 700;
	gap: 20px;
	line-height: 1.5;
	vertical-align: middle;
	width: calc(100% - 60px);
	
	@media screen and (max-width: 767px) {
		font-size: 1.6rem;
		width: calc(100% - 50px);
	}
}

body#contact .section-faq .question .question-text::before {
	color: var(--main-color);
	content: 'Q';
	font-family: "Aboreto", system-ui;
	font-weight: 700;
	font-size: 3rem;
}

body#contact .section-faq .question .icon {
	margin-right: 15px;
	position: relative;
}

body#contact .section-faq .question .icon::before {
	background-color: var(--main-color);
	border-radius: 90px;
	content: '';
	display: block;
	height: 20px;
	transition: rotate .3s;
	width: 2px;
}
body#contact .section-faq .question.active .icon::before {
	rotate: 90deg;
}

body#contact .section-faq .question .icon::after {
	background-color: var(--main-color);
	border-radius: 90px;
	content: '';
	display: block;
	height: 2px;
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	width: 20px;
}

body#contact .section-faq .answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
}

body#contact .section-faq .answer .wrap-answer-content {
	padding-bottom: 30px;
}

body#contact .section-faq .answer .answer-content {
	background-color: var(--bg-color);
	border-radius: 10px;
	padding: 30px 40px;
}

body#contact .section-faq .answer .answer-content p {
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.75;
	
	@media screen and (max-width: 767px) {
		font-size: 1.4rem;
	}
}

body#contact .section-faq .answer .answer-content p a {
	color: #0066cc;
	text-decoration: underline;
}

@media screen and (max-width: 767px) {
	body#contact .section-faq .question .question-text {
		line-height: 1.2;
	}
	
	body#contact .section-faq .answer .answer-content {
		padding: 20px;
	}
}