@charset "UTF-8";

.page-banner {
	&:after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		width: 100rem;
		height: 60rem;
		background: url("../../img/page/about_maruishi/banner-img.png") no-repeat center left / contain;
		@media screen and (max-width: 767px) {
			width: 35.7rem;
			height: 21.4rem;
			top: unset;
			transform: unset;
			bottom: 0;
		}
	}
}

.page_container {
	width: 100%;
	position: relative;
	&:after {
		content: "";
		position: absolute;
		left: 0;
		top: 7.6rem;
		width: 57rem;
		height: 67.55rem;
		background: url("../../img/page/about_maruishi/ellipse-bg.png") no-repeat center / 100% auto;
		@media screen and (max-width: 767px) {
			display: none;
		}
	}
	.block1 {
		padding-top: 19rem;
		padding-bottom: 20rem;
		@media screen and (max-width: 767px) {
			padding-top: 6rem;
			padding-bottom: 6rem;
		}
		.contents-flex {
			display: flex;
			flex-direction: row-reverse;
			gap: 9.1rem;
			@media screen and (max-width: 767px) {
				flex-direction: column-reverse;
				gap: 1rem;
			}
			.text-container {
				flex: 1;
				& ul {
					display: flex;
					flex-direction: column;
					gap: 5.6rem;
					@media screen and (max-width: 767px) {
						gap: 4rem;
					}
					& li {
						& p {
							font-family: var(--zen);
							font-style: normal;
							font-weight: 400;
							font-size: 1.8rem;
							line-height: 180%;
							letter-spacing: 0.1em;
							color: #000000;
							@media screen and (max-width: 767px) {
								font-size: 1.4rem;
								line-height: 1.6;
							}
						}
					}
				}
			}
		}
	}
	.block2 {
		padding-bottom: 20rem;
		@media screen and (max-width: 767px) {
			padding-bottom: 6rem;
		}
		& ul {
			display: flex;
			flex-direction: column;
			gap: 4.8rem;
			.flexbox {
				display: flex;
				gap: 11.2rem;
				@media screen and (max-width: 767px) {
					flex-direction: column-reverse;
					gap: 2rem;
				}
				.text-container {
					width: 64.8rem;
					@media screen and (max-width: 767px) {
						width: 100%;
					}
					& p {
						font-family: var(--zen);
						font-style: normal;
						font-weight: 400;
						font-size: 1.8rem;
						line-height: 180%;
						letter-spacing: 0.1em;
						color: #000000;
						@media screen and (max-width: 767px) {
							font-size: 1.4rem;
							line-height: 1.6;
						}
					}
				}
				.img-container {
					width: 60rem;
					flex: 1;
					@media screen and (max-width: 767px) {
						width: 100%;
					}
					& img {
						width: 100%;
					}
				}
			}
		}
	}
	#strenghts {
		width: 100%;
		.gray-box {
			background-color: #f3f5f6;
			width: 100%;
			border-radius: 5rem;
			padding: 12rem 16rem;
			box-sizing: border-box;
			@media screen and (max-width: 767px) {
				padding: 4rem 2rem;
				border-radius: 2.5rem;
			}
			.flexwrap {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				gap: 3.2rem 2.7rem;
				@media screen and (max-width: 767px) {
					gap: 2rem;
				}
				.thumbnail {
					width: 100%;
					& img {
						width: 100%;
						vertical-align: top;
					}
				}
				.half {
					width: 49%;
					background-color: #fff;
					border-radius: 2rem;
					padding: 4rem;
					box-sizing: border-box;
					@media screen and (max-width: 767px) {
						width: 100%;
						padding: 2rem;
					}
					.thumbnail {
						width: 100%;
						margin-bottom: 2.4rem;
						@media screen and (max-width: 767px) {
							margin-bottom: 1rem;
						}
						& img {
							width: 100%;
							vertical-align: top;
						}
					}
					& p {
						font-family: var(--zen);
						font-style: normal;
						font-weight: 400;
						font-size: 1.8rem;
						line-height: 180%;
						letter-spacing: 0.1em;
						color: #000000;
						@media screen and (max-width: 767px) {
							font-size: 1.4rem;
							line-height: 160%;
						}
					}
				}
				.full {
					width: 100%;
					background-color: #fff;
					border-radius: 2rem;
					padding: 4rem;
					box-sizing: border-box;
					@media screen and (max-width: 767px) {
						padding: 2rem;
						.thumbnail {
							display: block;
							overflow-x: auto;
							-webkit-overflow-scrolling: touch;
							width: 100%;
							min-width: 0;
							& img {
								width: 85.2rem !important;
								max-width: none;
								vertical-align: top;
							}
						}
					}
				}
			}
		}
	}
	#values {
		width: 100%;
		padding-top: 20rem;
		padding-bottom: 20rem;
		@media screen and (max-width: 767px) {
			padding-top: 6rem;
			padding-bottom: 6rem;
		}
		.inner {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			flex-direction: row-reverse;
			gap: 4rem;

			&:before {
				content: "";
				position: sticky;
				top: 10rem;
				width: 44.3rem;
				height: 44.3rem;
				min-width: 44.3rem;
				background: url("../../img/page/about_maruishi/value-bg.png") no-repeat center / 100% auto;
				align-self: flex-start;
				@media screen and (max-width: 767px) {
					display: none;
				}
			}
			.text-container {
				width: 64.8rem;
				@media screen and (max-width: 767px) {
					width: 100%;
				}
				& ul {
					display: flex;
					flex-direction: column;
					gap: 4rem;
					margin-bottom: 6.4rem;
					@media screen and (max-width: 767px) {
						gap: 2rem;
						margin-bottom: 2rem;
					}
					& li {
						& p {
							font-family: var(--zen);
							font-style: normal;
							font-weight: 400;
							font-size: 1.8rem;
							line-height: 194%;
							letter-spacing: 0.07em;
							color: #000000;
							@media screen and (max-width: 767px) {
								font-size: 1.4rem;
								line-height: 1.6;
							}
						}
					}
				}
				.flex-items {
					display: flex;
					gap: 3rem;
					align-items: center;
					margin-bottom: 6.4rem;
					@media screen and (max-width: 767px) {
						flex-direction: column;
						gap: 2rem;
						margin-bottom: 2rem;
						align-items: flex-start;
					}
					.flex-item {
						display: flex;
						align-items: center;
						gap: 1.6rem;
						@media screen and (max-width: 767px) {
							gap: 1rem;
						}
						.ellipse {
							width: 9rem;
							height: 9rem;
							border-radius: 9rem;
							background: radial-gradient(80.79% 80.79% at 12.5% 72.76%, #ffc2c7 0%, #e00012 100%);
							display: flex;
							justify-content: center;
							align-items: center;
							font-family: var(--zen);
							font-style: normal;
							font-weight: 900;
							font-size: 2.6rem;
							line-height: 150%;
							letter-spacing: 0.1em;
							color: #ffffff;
							@media screen and (max-width: 767px) {
								width: 6rem;
								height: 6rem;
								border-radius: 6rem;
								font-size: 1.6rem;
							}
						}
						.text {
							font-family: var(--zen);
							font-style: normal;
							font-weight: 700;
							font-size: 2.4rem;
							line-height: 150%;
							letter-spacing: 0.1em;
							color: #000000;
							@media screen and (max-width: 767px) {
								font-size: 1.6rem;
							}
						}
					}
				}
				.bold-text {
					font-family: var(--zen);
					font-style: normal;
					font-weight: 500;
					font-size: 2rem;
					line-height: 180%;
					letter-spacing: 0.07em;
					color: #000000;
					margin-bottom: 2.4rem;
					@media screen and (max-width: 767px) {
						font-size: 1.4rem;
						line-height: 160%;
					}
				}
			}
			.logo-sp {
				width: 80%;
				margin: 0 auto 2rem;
				& img {
					width: 100%;
					vertical-align: top;
				}
			}
		}
	}

	#gallery {
		width: 100%;
		padding-bottom: 20rem;
		@media screen and (max-width: 767px) {
			padding-bottom: 6rem;
		}
		.inner {
			overflow: hidden;
			@media screen and (max-width: 767px) {
				overflow: visible;
			}
		}

		.slider-wrapper {
			margin-top: 4rem;
			position: relative;

			.gallery-slider {
				margin-bottom: 3.4rem;
				@media screen and (max-width: 767px) {
					margin-bottom: 2rem;
					position: relative;
					overflow: hidden;
				}

				.slide {
					outline: none;
					&.flex-contents {
						display: flex !important;
						gap: 4.8rem;
						@media screen and (max-width: 767px) {
							flex-direction: column;
							gap: 2.4rem;
						}

						.img-content {
							width: 88rem;
							@media screen and (max-width: 767px) {
								max-width: 100%;
							}

							.slide-img {
								width: 100%;
								border-radius: 2rem;
								overflow: hidden;
								aspect-ratio: 672 / 400;
								@media screen and (max-width: 767px) {
									border-radius: 1rem;
								}

								img {
									width: 100%;
									height: 100%;
									object-fit: cover;
								}
							}
						}

						.text-container {
							flex: 1;
							width: 44rem;
							display: flex;
							flex-direction: column;
							/* justify-content: center; */
							@media screen and (max-width: 767px) {
								max-width: 100%;
							}

							.title {
								font-family: var(--zen);
								font-style: normal;
								font-weight: 700;
								font-size: 2.4rem;
								line-height: 150%;
								letter-spacing: 0.1em;
								color: #e00012;
								margin-bottom: 1.6rem;
								@media screen and (max-width: 767px) {
									font-size: 1.6rem;
									margin-bottom: 1.2rem;
								}
							}

							p {
								font-family: var(--zen);
								font-style: normal;
								font-weight: 400;
								font-size: 1.8rem;
								line-height: 180%;
								letter-spacing: 0.1em;
								color: #000000;
								@media screen and (max-width: 767px) {
									font-size: 1.4rem;
									line-height: 160%;
								}
							}
						}
					}
				}
			}

			.slider-btns {
				position: absolute;
				top: 47rem;
				width: 15.2rem;
				pointer-events: none;
				z-index: 10;
				right: 28rem;
				@media screen and (max-width: 767px) {
					top: 8rem;
					left: 50%;
					transform: translateX(-50%);
					right: auto;
					width: 100%;
					display: flex;
					justify-content: space-between;
					gap: 1.6rem;
				}

				.prev,
				.next {
					position: absolute;
					width: 5.6rem;
					height: 5.6rem;
					cursor: pointer;
					pointer-events: all;
					transition: all 0.3s ease;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					background: rgba(255, 255, 255, 0.9);
					box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.1);

					@media screen and (max-width: 767px) {
						position: relative;
						width: 3.2rem;
						height: 3.2rem;
						left: auto;
						right: auto;
					}

					&:hover {
						background: rgba(255, 255, 255, 1);
						transform: scale(1.1);
					}

					img {
						width: 100%;
						vertical-align: middle;
					}
				}
				.prev {
					left: 0;
					@media screen and (max-width: 767px) {
						left: -1rem;
					}
					img {
						transform: rotate(180deg);
					}
				}
				.next {
					right: 0;
					@media screen and (max-width: 767px) {
						right: -1rem;
					}
				}
			}
			.preview-img-btns {
				width: 100%;
				@media screen and (max-width: 767px) {
					overflow: hidden;
				}

				.slick-slide {
					outline: none;
					padding: 0 2.4rem 0 0;
					@media screen and (max-width: 767px) {
						padding: 0 0.5rem 0 0;
					}
				}
				.slide-btn {
					width: 100%;
					/* width: 25.2rem;
				height: 13.4rem; */
					border-radius: 1rem;
					overflow: hidden;
					cursor: pointer;
					transition: all 0.3s ease;
					border: 0.3rem solid transparent;
					box-sizing: border-box;
					@media screen and (max-width: 767px) {
						width: 100%;
						border-radius: 0.5rem;
						border: 0.2rem solid transparent;
					}
					&:hover,
					&.active {
						border-color: #e00012;
					}
					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				.slick-list {
					@media screen and (max-width: 767px) {
						overflow: hidden;
					}
				}
			}
			.slick-list {
				overflow: visible;
				@media screen and (max-width: 767px) {
					overflow: hidden;
				}
			}
		}
	}
}

#bottom-banner {
	width: 100%;
	height: 62.1rem;
	background: url("../../img/page/about_maruishi/bottom-banner-bg.png") no-repeat center / 100% 100%;
	padding-top: 19.8rem;
	margin-bottom: 20rem;
	@media screen and (max-width: 767px) {
		height: auto;
		padding: 6rem 2rem;
		background: radial-gradient(128.55% 331.8% at 0% -115.3%, rgba(255, 177, 183, 0.8) 0%, rgba(230, 0, 18, 0.8) 100%);
		margin-bottom: 6rem;
	}
	.center-contents {
		width: 100%;
		display: flex;
		justify-content: center;
		.white-card {
			width: 100%;
			max-width: 128.6rem;
			background-color: #ffffff;
			border-radius: 2rem;
			padding: 6.4rem;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			@media screen and (max-width: 767px) {
				padding: 4rem 2rem;
				flex-direction: column-reverse;
			}
			.text-container {
				width: 73rem;
				@media screen and (max-width: 767px) {
					width: 100%;
				}
				.title {
					font-family: var(--zen);
					font-style: normal;
					font-weight: 700;
					font-size: 3rem;
					line-height: 150%;
					letter-spacing: 0.15em;
					color: #e60012;
					margin-bottom: 2.4rem;
					@media screen and (max-width: 767px) {
						font-size: 1.8rem;
						margin-bottom: 1rem;
					}
				}
				& p {
					font-family: var(--zen);
					font-style: normal;
					font-weight: 500;
					font-size: 2rem;
					line-height: 180%;
					letter-spacing: 0.07em;
					color: #000000;
					@media screen and (max-width: 767px) {
						font-size: 1.4rem;
						line-height: 1.6;
					}
				}
			}
			.img-container {
				width: 39.8rem;
				@media screen and (max-width: 767px) {
					width: 100%;
					margin-bottom: 1rem;
				}
				& img {
					width: 100%;
					vertical-align: top;
				}
			}
		}
	}
}

@media screen and (max-width: 767px) {
	.scroll-content {
		position: relative;
		width: 100%;
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.scroll-content:before {
		content: "←";
		position: absolute;
		right: 0;
		top: 0;
		animation: moveArrow 3s linear infinite;
		font-size: 20px;
		color: #e60012;
		border: 4px solid #e60012;
		border-radius: 50%;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: opacity 0.3s ease-in-out;
		opacity: 1;
	}
	.scrolling:before {
		opacity: 0;
	}
}

@keyframes moveArrow {
	0% {
		right: 0;
	}
	100% {
		right: 100%;
	}
}