@charset "UTF-8";

#solution {
	width: 100%;
	background: linear-gradient(#FFF 330px, #11376b 330px);
}

.solution_comment {
	display: flex;
	justify-content: space-between;
	margin-bottom: 40px;
}

.solution_comment li {
	width: 32%;
	min-height: 150px;
	padding: 30px 0;
	background: var(--bg_color);
	border-radius: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: var(--main_color);
	line-height: 1.5;
	position: relative;
}

	.solution_comment li:after {
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -20px;
		border: 20px solid transparent;
		border-top: 20px solid var(--bg_color);
	}

.archievement {
	width: 93%;
	margin: 0 auto 35px auto;
}

	.archievement li {
		display: flex !important;
		justify-content: space-between;
		align-items: center;
		background: #FFF;
		margin: 0 20px;
		padding: 30px 35px;
		box-sizing: border-box;
		border-radius: 30px;
	}

		.archievement li .ach_l {
			width: auto;
			margin-right: 25px;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
		}

			.archievement li .ach_l strong {
				display: flex;
				justify-content: center;
				align-items: center;
				font: 600 1.2rem/1 var(--font_ja);
				color: var(--main_color);
				white-space: nowrap;
			}

				.archievement li .ach_l strong:before,
				.archievement li .ach_l strong:after {
					content: '';
					width: 1px;
					height: 24px;
					background-color: var(--main_color);
				}

				.archievement li .ach_l strong:before {
					margin-right: 10px;
					transform: rotate(-30deg)
				}

				.archievement li .ach_l strong:after {
					margin-left: 10px;
					transform: rotate(30deg)
				}

			.archievement li .ach_l .ach_mv01 {
				width: 100%;
			}

				.archievement li .ach_l iframe {
					width: 100%;
					height: auto;
					aspect-ratio: 16 / 9;
					margin: 10px 0;
				}

			.archievement li .ach_l h3 {
				font: 300 1.4rem/1.5 var(--font_ja);
				color: #000;
			}

		.archievement li p {
			font: 300 1.6rem/1.6 var(--font_ja);
		}



.slick-prev {
	left: -2%;
	z-index: 99;
}

.slick-next {
	right: -2%;
	z-index: 100;
}

.slick-prev,
.slick-next {
	width: 40px;
	height: 40px;
}

.slick-prev:before,
.slick-next:before {
	font-size: 40px;
	color: var(--sub_color);
}

.archievement .slick-prev {
	left: -3%;
}

.archievement .slick-next {
	right: -3%;
}





.service_list {
	display: flex;
	flex-direction: column;
	display: inline-block;
	text-align: left;
}

	.service_list dt {
		color: #a9e5ff;
		font: 300 2.8rem/1 var(--font_ja);
		margin-bottom: 10px;
		display: flex;
		align-items: center;
	}

		.service_list dt img {
			margin-right: 15px;
		}

	.service_list dd {
		margin-bottom: 20px;
		margin-left: 76px;
	}

#other_movies {
	width: 100%;
	background: url("../service/img/other_bg.png") center top / cover;
	padding: 70px 0 80px 0;
}

	.other_movies_inner {
		width: 100%;
		max-width: 1100px;
		margin: 0 auto;
		padding: 40px;
		box-sizing: border-box;
		background-color: rgba(255, 255, 255, 0.6);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border-radius: 30px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}

		.other_movies_inner h2 {
			width: 100%;
			font: 400 3.8rem/1.2 var(--font_ja);
			color: var(--main_color);
			text-align: center;
			margin-bottom: 25px;
		}

		.other_movies_inner ul {
			width: 100%;
			margin: 0;
			display: flex;
			justify-content: space-between;
		}

			.other_movies_inner ul li {
				width: 48%;
				margin: 0;
			}

			.other_movies_inner ul li h3 {
				width: 100%;
				margin: 0;
				padding: 10px 0 12px 0;
				font: 400 2.4rem/1 var(--font_ja);
				color: var(--main_color);
				text-align: center;
				background-color: rgba(255, 255, 255, 0.3);
				backdrop-filter: blur(5px);
				border-radius: 30px;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
			}

			.other_movies_inner ul li iframe {
				width: 100%;
				height: auto;
				aspect-ratio: 16 / 9;
				margin: 20px 0 10px 0;
			}

			.other_movies_inner ul li p {
				margin: 0;
				font: 400 1.4rem/1.5 var(--font_ja);
				text-align: center;
			}


details, .faq_box {
	background: #FFF;
	border-radius: 20px;
	margin-bottom: 20px;
	padding: 20px 30px 23px 30px;
}

summary, .accordion strong {
	cursor: pointer;
	position: relative;
	display: block;
	padding-left: 1.5em;
	padding-right: 1.5em;
	font: 300 2.4rem/1.5 var(--font_ja);
	color: var(--main_color);
}

	summary:before,
	.accordion strong:before {
		position: absolute;
		content: "Q";
		left: -5px;
		top: 1px;
		font: 300 3.6rem/1 var(--font_en);
		color: var(--sub_color);
	}

	summary:after {
		position: absolute;
		content: "＋";
		right: 0;
		top: 0;
		color: #999;
	}

	details[open] summary:after {
		content: "ー";
	}

.accordion-content p {
	margin: 10px 0 0 0;
	position: relative;
	padding-left: 1.5em;
	padding-right: 1.5em;
}

	.accordion-content p:before {
		position: absolute;
		content: "A";
		left: 0;
		top: 8px;
		font: 300 2.4rem/1 var(--font_en);
		color: var(--main_color);
	}

details[open] .accordion-content {
	animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}