@charset "utf-8";
@import url("root.css");

:root {
	--old: #4390E9;
	--experience: #FFA927;
}

section {
	position: relative;

	padding: 10rem 0;

	@media screen and (max-width: 820px) {
		padding: 5rem 0;
	}




	&.about {
		padding-top: 7.5rem;
		background: var(--blue);
		padding-bottom: 0;


		&::before {
			width: 100%;
			aspect-ratio: 1920/120;
			background: url(../img/common/wave_lightblue.svg) no-repeat;
			background-size: 100% 100%;

			bottom: -1px;
			left: 0;
			right: 0;
			margin: auto;
			position: absolute;
			content: "";
		}

		.top_movie {

			position: relative;
			z-index: 100;
			margin-top: -6.5vw;

			@media screen and (max-width: 820px) {
				margin-top: -10vw;
			}

			@media screen and (max-width: 480px) {
				margin-top: -24vw;
			}

			.youtube-player-about {
				border-radius: 20px;
				cursor: pointer;
				background: white;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0;
				overflow: hidden;
				vertical-align: bottom;
				aspect-ratio: 560 / 315;
				max-width: 920px;
				margin: 0 auto;
				box-shadow: 0 .4rem 2.4rem 0 rgba(0, 0, 0, .15);
				border: 5px solid var(--light-blue);

				&:hover {
					img {
						transform: scale(1.03);
						opacity: 0.7;

					}

					.play {
						opacity: 0.7;
					}


				}

				@media screen and (max-width: 820px) {
					max-width: 475px;
				}

				@media screen and (max-width: 480px) {
					border-radius: 12px;
					border-width: 6px;
				}

				img,
				video,
				iframe {
					background: none;
					overflow: hidden;
					border-radius: 10px;
					margin: 0 auto;
					width: 100%;
					height: 100%;
					object-fit: cover;
					/* max-width: 560px !important; */
					/* max-width: 544px; */

					@media screen and (max-width: 480px) {
						overflow: hidden;
						border-radius: 8px;
						max-width: 100%;
					}
				}

				img {
					transition: all .3s;


				}

				/* 画像をコンテナに合わせて切り抜く */
				.play {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					font-size: 30px;
					padding: 12px 30px;
					border-radius: 10px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: white;
					background: #FF0000;
					transition: all .3s;

					@media screen and (max-width: 820px) {
						padding: 10px 20px;
						font-size: 2rem;
					}

					@media screen and (max-width: 480px) {
						font-size: 1.8rem;
						padding: 10px 20px;
					}
				}
			}

		}

		.about_box {
			margin-top: 4em;
			text-align: center;
			position: relative;
			z-index: 2;
			filter: drop-shadow(0 15px 45px rgba(0, 0, 0, .1));
			transform: translateZ(0);

			@media screen and (max-width: 820px) {
				margin-top: 2.5em;
			}

			@media screen and (max-width: 480px) {
				margin-top: 1.5em;
			}

			.about_text {
				background: white;
				padding: 3.5em 0 4.5em;
				border-radius: 50px;
				/* border: 10px solid var(--light-blue); */
				overflow: hidden;
				position: relative;

				@media screen and (max-width: 820px) {
					border-radius: 20px;
					padding: 3em 0 3.5em;
				}

				@media screen and (max-width: 480px) {
					margin-top: 1.5em;
					border-radius: 12px;
					padding: 2em 0;
				}

				&::before,
				&::after {
					position: absolute;
					content: "";
					height: 100%;
					width: 21%;
					background-size: contain;
					background-position: top;
					top: 0;
					margin: auto;
					z-index: 3;
				}

				@media screen and (max-width: 480px) {

					&::before,
					&::after {
						width: 15%;
					}
				}

				&::before {
					background: url(../img/top/about_left.svg)no-repeat;
					left: 0;
					background-size: contain;
					background-position: top;

				}

				&::after {
					background: url(../img/top/about_right.svg)no-repeat;
					right: 0;
					background-size: contain;
					background-position: top;

				}

				.title,
				p {
					position: relative;
					z-index: 3;

				}

				.title {
					display: flex;
					flex-direction: column;
					text-align: center;
					letter-spacing: 0.03em;

					margin-bottom: 2em;

					@media screen and (max-width: 480px) {
						margin-bottom: 1.5em;
					}

					p {
						font-family: var(--montserrat);
						font-weight: 600;
						color: #b6b6b6;
						font-size: 1.8rem;

						@media screen and (max-width: 820px) {
							font-size: 2vw;
						}

						@media screen and (max-width: 480px) {
							font-size: 3.5vw;
						}
					}

					h2 {
						font-weight: 700;
						font-size: 3.6rem;

						@media screen and (max-width: 820px) {
							font-size: 3.5vw;
						}

						@media screen and (max-width: 480px) {
							padding: 0;
							margin: 0;
							font-size: 5.5vw;
						}

						span {

							background: linear-gradient(135deg, #FF6B6B 0%, #FF8A5A 45%, #FF7A00 100%);
							-webkit-background-clip: text;
							background-clip: text;
							color: transparent;
							-webkit-text-fill-color: transparent;
						}

					}

				}

				p {
					font-weight: 500;
					font-size: 1.6rem;
					line-height: 3.2rem;
					color: var(--black);

					@media screen and (max-width: 820px) {
						font-size: 1.3vw;
						line-height: 2;
					}

					@media screen and (max-width: 480px) {
						padding: 0 4vw;
						font-size: 3.1vw;
						line-height: 1.8;
					}

					&.catch {
						margin-top: 2em;
						font-size: 2.8rem;
						font-weight: 600;
						color: var(--deep-blue);

						@media screen and (max-width: 820px) {
							font-size: 3.2vw;
							letter-spacing: 0.02em;
							line-height: 1.6;
						}

						@media screen and (max-width: 480px) {
							margin-top: 1.5em;
							font-size: 4.6vw;
						}

						strong {
							font-weight: 700;

							display: inline-block;
							background: linear-gradient(transparent 72%, rgba(255, 246, 145, 1) 72%);

							@media screen and (max-width: 820px) {
								background: linear-gradient(transparent 82%, rgba(255, 246, 145, 1) 82%);

							}

						}

					}
				}


			}


			.compare {
				position: relative;
				z-index: 2;
				display: block;
				margin-top: 6.5em;

				@media screen and (max-width: 820px) {
					margin-top: 0;
					padding-top: 3em;
				}

				@media screen and (max-width: 480px) {
					padding-top: 0;
					margin-top: 3em;
				}

				&::before {
					position: absolute;
					content: "";
					display: block;
					background: url(../img/top/about_wave.svg) no-repeat;
					width: 100%;
					aspect-ratio: 1267/253;
					background-size: 100% 100%;
					background-position: top;
					opacity: 0.65;
					left: 0;
					right: 0;
					bottom: calc(100% + 10em);
				}

				.compare_box {
					display: flex;
					justify-content: space-between;
					width: 96%;
					max-width: 925px;
					margin: 0 auto;

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

					@media screen and (max-width: 480px) {
						flex-direction: column;
						max-width: 90%;
					}

					.compare_content {
						width: 48.5%;
						border-radius: 30px;
						border: solid #bababa 4px;
						padding: 3em 1em 3em;
						background: white;
						position: relative;

						@media screen and (max-width: 820px) {
							border-radius: 16px;
							padding: 2em 0.5em 2em;
						}

						@media screen and (max-width: 480px) {
							border-radius: 10px;
							margin-bottom: 2em;
							width: 100%;

							padding: 3em 0.8em 2em;

							&:last-child {
								margin-bottom: 0;
							}
						}

						h3 {
							position: absolute;
							top: -0.9em;
							left: 0;
							right: 0;
							margin: auto;
							width: auto;
							display: inline-block;
							font-weight: 700;

							span {
								font-size: 2.2rem;
								color: white;
								padding: 6px 30px 8px;
								background: #bababa;
								border-radius: 100px;

								@media screen and (max-width: 820px) {
									font-size: 2vw;
									padding: 4px 12px 5px;
								}

								@media screen and (max-width: 480px) {
									font-size: 4vw;
									padding: 5px 18px 6px;

								}
							}
						}

						.img {
							width: 100%;
							aspect-ratio: 435/200;

							img {
								width: 100%;
								height: 100%;
								object-fit: contain;
								object-position: center center;
							}
						}

						.text {
							margin: 0 2em;
							text-align: center;

							@media screen and (max-width: 820px) {
								margin: 0 0.5em;
							}

							p {
								font-size: 2.2rem;
								line-height: 1.5;

								@media screen and (max-width: 820px) {
									font-size: 1.9vw;
								}

								@media screen and (max-width: 480px) {
									font-size: 4vw;
									padding: 0;
								}
							}

							ul {
								width: auto;
								margin: 0 auto;
								margin-top: 1.5em;
								display: flex;
								flex-direction: column;

								@media screen and (max-width: 820px) {
									margin-top: 1em;
								}

								li {
									line-height: 1.5rem;
									font-size: 1.5rem;
									display: inline-flex;
									align-items: center;
									margin-bottom: 1em;
									text-align: left;
									font-weight: 500;
									color: var(--gray);

									@media screen and (max-width: 820px) {
										font-size: 1.3vw;
									}

									@media screen and (max-width: 480px) {
										font-size: 3vw;
									}

									&:last-child {
										margin: 0;
									}

									i {
										font-size: 140%;
									}

								}
							}
						}

						&.old {
							border-color: var(--old);

							h3 {
								span {
									background: var(--old);

								}
							}

							.text {

								p,
								i {
									color: var(--old);
								}
							}

						}

						&.experience {
							border-color: var(--experience);

							h3 {
								span {
									background: var(--experience);

								}
							}

							.text {

								p,
								i {
									color: var(--experience);
								}
							}

						}
					}
				}
			}


		}


	}


	&.assignment {
		background: var(--light-blue);
		padding-top: 10rem;

		@media screen and (max-width: 820px) {
			padding-top: 5rem;
		}

		.title {
			text-align: center;
			display: block;

			@media screen and (max-width: 480px) {
				margin-bottom: 1em;
			}

			h2 {
				font-size: 2.8rem;
				font-feature-settings: "palt";
				letter-spacing: 0.1em;
				text-align: center;
				color: var(--black);
				line-height: 2;
				font-weight: 700;
				display: inline-block;

				position: relative;

				@media screen and (max-width: 820px) {
					font-size: 2.8vw;
				}

				@media screen and (max-width: 480px) {
					font-size: 5.3vw;
					line-height: 1.8;
				}

				&::before,
				&::after {
					content: "";
					position: absolute;
					width: 5px;
					height: 6rem;
					border-radius: 100px;
					background: var(--deep-blue);
					bottom: -0.5em;
					right: calc(100% + 1.5em);
					margin: auto;
					transform: rotate(-30deg);
				}

				@media screen and (max-width: 820px) {

					&::before,
					&::after {
						height: 6vw;
						width: 3px;
					}
				}

				&::after {
					right: auto;
					left: calc(100% + 1.5em);
					transform: rotate(30deg);
				}

				@media screen and (max-width: 480px) {

					&::before,
					&::after {
						height: 10vw;
						left: 0;
						right: auto;
					}

					&::after {
						left: auto;
						right: 0;
					}
				}

				>span {
					font-size: 110%;
					display: inline-block;
					background: white;
					padding: 0 0.2em 0.1em;
					font-weight: 800;
					margin-right: 0.3em;
					line-height: 1.6;

					span {
						background: linear-gradient(90deg,
								#0369A1 0%,
								#0284C7 45%,
								#38BDF8 100%);
						-webkit-background-clip: text;
						background-clip: text;
						-webkit-text-fill-color: transparent;
						color: transparent;
					}
				}
			}


			p {
				margin-top: 2.5em;
				font-size: 1.5rem;
				line-height: 2.5rem;
			}

		}



		.assignment_box {
			margin-top: 2em;

			overflow-x: hidden;
			position: relative;
			padding-top: 20px;

			@media screen and (max-width: 820px) {
				margin-top: 0;
				padding-top: 20px;
				overflow: visible;
			}

			.assignment_tab {

				position: relative;
				z-index: 1;
				display: flex;
				align-items: flex-end;
				margin: 0;

				justify-content: flex-start;
				list-style: none;
				flex-wrap: nowrap;
				position: relative;
				z-index: 2;
				width: calc(100%);


				li {
					position: relative;
					margin-left: 0;
					width: calc(25% + 15px);
					background: #f1f5f9;
					padding: 15px 40px;
					padding-bottom: 75px;
					margin-right: -20px;

					border-radius: 20px 20px 0 0;

					font-weight: bold;
					color: #fbfbfb;
					cursor: pointer;

					transition: transform .3s ease, background .3s ease;

					@media screen and (max-width: 820px) {
						padding: 10px 20px;
						padding-bottom: 71px;

						border-radius: 12px 12px 0 0;
						width: calc(25% + 9px);
						margin-right: -12px;

						span {
							font-size: 1.8vw;
						}
					}

					@media screen and (max-width: 480px) {
						width: calc(25% + 3px);
						margin-right: -4px;
						padding: 6px 10px;
						padding-bottom: 68px;
						line-height: 1.2;
						border-radius: 10px 10px 0 0;

						span {
							font-size: 3vw;
						}
					}

					&.active {
						@media screen and (max-width: 480px) {
							line-height: 1.5;
						}

						span {
							font-size: 135%;
							transform: translateY(2px);
							display: inline-block;


							@media screen and (max-width: 820px) {
								font-size: 1.9vw;
							}

							@media screen and (max-width: 480px) {

								font-size: 3.4vw;
							}


						}

						background: #61E4FA;
						color: white;
						transform: translateY(-7px);
						z-index: 5 !important;

					}

					&:nth-child(1) {
						background: #ffa927;
						z-index: 4;
					}


					&:nth-child(2) {
						background: #32c8f8;
						z-index: 3;
					}


					&:nth-child(3) {
						background: #36dc94;
						z-index: 2;
					}


					&:nth-child(4) {
						background: #66a9f6;
						z-index: 1;
					}

				}

			}

			.assignment_content_box {
				display: flex;

			}

			.assignment_content {
				width: 100%;
				/* aspect-ratio: 1200/450; */
				position: relative;
				z-index: 2;
				margin-top: -60px;
				border-radius: 0 0 25px 25px;
				position: relative;
				display: none;

				@media screen and (max-width: 1200px) {
					aspect-ratio: unset;
					border-radius: 0 0 16p 16px;
				}

				@media screen and (max-width: 480px) {
					border-radius: 0 0 10px 10px;
				}

				.assignment_inner {
					height: 100%;
					border-radius: 0 0 25px 25px;
					background: white;
					padding: 2.5em 0 3em;

					@media screen and (max-width: 820px) {
						padding: 1.8rem 0 2.5rem;
						border-radius: 0 0 16p 16px;

					}

					@media screen and (max-width: 480px) {
						border-radius: 0 0 10px 10px;
						padding-top: 2em;
					}

					h3 {
						color: var(--deep-blue);
						text-align: center;
						font-size: 2.2rem;

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

						@media screen and (max-width: 480px) {
							font-size: 4.5vw;
						}
					}

					ul {
						width: 100%;
						margin-top: 2.5em;
						display: flex;
						justify-content: space-between;

						@media screen and (max-width: 820px) {
							margin-top: 1.5rem;
						}

						@media screen and (max-width: 480px) {
							flex-direction: column;
							margin-top: 1.5em;
							align-items: center;
							padding: 0 2em 1em;
						}

						li {
							width: calc(100% / 3);
							position: relative;

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

							&:nth-child(2) {

								&::before,
								&::after {
									content: "";
									position: absolute;
									background: url(../img/top/assignment_dots.svg) repeat-y;
									width: 4px;
									height: 100%;
									top: 0;
									background-size: contain;
									margin: auto;
								}


								&::before {
									left: -2px;
								}


								&::after {
									right: -2px;
								}

								@media screen and (max-width: 480px) {
									padding: 1.5em 0;
									margin: 1.5em 0;

									&::before,
									&::after {
										content: "";
										position: absolute;
										background: #dcdbdb;
										left: auto;
										right: auto;
										width: 100%;
										height: 1px;
										left: 0;
										top: auto;
										bottom: auto;
										right: auto;
										background-size: contain;
										margin: auto;
									}

									&::before {
										top: 0;
									}

									&::after {
										bottom: 0;
									}
								}

							}

							figure {
								width: 100%;
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;


								.img {
									width: 60%;
									aspect-ratio: 3/2.4;

									@media screen and (max-width: 480px) {
										width: 50%;
									}
								}

								figcaption {
									margin-top: 1.5em;

									p {
										font-weight: 500;

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

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

				&.active {
					display: flex;
					flex-direction: column;
					z-index: 5 !important;
				}

				&:nth-child(1) {
					z-index: 4;
				}


				&:nth-child(2) {
					z-index: 3;
				}


				&:nth-child(3) {
					z-index: 2;
				}


				&:nth-child(4) {
					z-index: 1;
				}

			}

		}


	}


	&.planning {
		background: var(--white-blue);

		.container {
			max-width: 1330px;
		}

		.plan_box {
			.demo_list {
				margin-top: 4.5em;
				list-style-type: none;
				padding: 0;
				justify-content: space-between;
				display: flex;
				align-items: flex-start;
				flex-wrap: wrap;
				counter-reset: demo_num;

				@media screen and (max-width: 820px) {
					margin-top: 3em;
				}

				@media screen and (max-width: 480px) {
					margin-bottom: 2em;
				}

				>li {
					width: 49%;
					border-radius: 13px;
					background: white;
					margin-bottom: 3.5em;
					padding-bottom: 3em;
					counter-increment: demo_num;
					position: relative;

					@media screen and (max-width: 480px) {
						border-radius: 10px;
						width: 100%;
						padding-bottom: 3em;

						&:last-child {
							margin-bottom: 0;
						}
					}

					&:before {
						position: absolute;
						top: -4rem;
						left: 0;
						margin: auto;
						content: counter(demo_num, decimal-leading-zero) "";
						font-family: var(--montserrat);
						display: inline-block;
						font-size: 5.5rem;

						background: linear-gradient(135deg, #0369A1 0%, #0284C7 45%, #46adda 100%);
						-webkit-background-clip: text;
						background-clip: text;
						-webkit-text-fill-color: transparent;
						color: transparent;
						font-weight: 700;
					}

					@media screen and (max-width: 480px) {
						&:before {
							font-size: 5rem;
							top: -3.5rem;
						}
					}

					.demo_box {
						padding: 2.5em 2em 1.5em;

						display: flex;
						justify-content: space-between;

						@media screen and (max-width: 820px) {
							display: flex;
							flex-direction: column;
							align-items: center;
						}

						.demo_img {
							width: 36%;
							aspect-ratio: 1/1;

							@media screen and (max-width: 820px) {
								order: 0;
								width: 80%;
							}

							a {
								display: block;
								position: relative;
								transition: all .1s;

								&:hover {
									opacity: 0.6;

								}

								.play {
									position: absolute;
									background: red;
									width: 45px;
									text-align: center;
									height: 45px;
									display: flex;
									align-content: center;
									align-items: center;
									justify-content: center;
									color: white;
									font-size: 100%;
									border-radius: 50%;
									top: 0;
									left: 0;
									right: 0;
									bottom: 0;
									padding: 0;
									margin: auto;
								}
							}

						}

						.demo_text {
							width: 59%;
							text-align: left;

							@media screen and (max-width: 820px) {
								width: 100%;
								order: 1;
								margin-top: 1em;
							}


							h3 {
								color: var(--deep-blue);
								margin-bottom: 0.7em;
								font-size: 2.4rem;

								@media screen and (max-width: 820px) {
									font-size: 2.4vw;
									text-align: center;
								}

								@media screen and (max-width: 480px) {
									font-size: 5vw;
									margin-bottom: 1em;
								}



							}

							p {
								font-size: 1.5rem;
								text-align: left;
								line-height: 1.8;
								font-weight: 500;

								@media screen and (max-width: 820px) {
									font-size: 1.6vw;
								}

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

							small {
								display: inline-block;
								font-size: 70%;
								margin-top: 0.5em;
								color: #888;
								font-weight: 500;
							}
						}
					}

					.demo_sub {
						padding: 1em 2em 2em;
						display: none;

						/* border-top: 1px solid #bababa; */
						.feature_box {
							display: flex;
							justify-content: space-between;

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

							>div {
								border: 3px solid var(--blue);
								border-radius: 10px;
								width: 48.5%;

								padding: 1.7em 1.5em 1em;
								position: relative;

								@media screen and (max-width: 820px) {
									padding-top: 1.5vw;
									border-width: 2px;
									width: 100%;
									margin-bottom: 1.7em;

									&:last-child {
										margin: 0;
									}
								}

								@media screen and (max-width: 480px) {
									padding-top: 1.5em;
								}

								>p {
									font-size: 1.8rem;
									font-weight: 600;
									position: absolute;
									top: -0.7em;
									left: 0;
									right: 0;
									margin: auto;

									@media screen and (max-width: 820px) {
										font-size: 2vw;
									}

									@media screen and (max-width: 480px) {
										font-size: 4.5vw;
									}

									span {
										background: white;
										display: inline-block;
										padding: 0 0.6em;
									}
								}

								ul {
									flex-direction: column;

									li {
										width: 100%;
										text-align: left;
										color: var(--gray);
										font-weight: 500;
										font-size: 1.4rem;
										line-height: 1.6;

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

										@media screen and (max-width: 480px) {
											font-size: 3.5vw;
										}

										&::before {
											content: "・";
										}
									}
								}

								&.effect {
									border-color: var(--deep-blue);

									>p {
										color: var(--deep-blue);
									}
								}

								&.target {
									border-color: #38BDF8;

									>p {
										color: #38BDF8;
									}

								}

							}
						}


						.proposal_box {
							border-top: solid 1px #e7e7e7;
							margin-top: 2em;
							padding-top: 2em;
							text-align: left;

							h4 {
								margin-bottom: 1em;
								font-size: 1.8rem;

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

								@media screen and (max-width: 480px) {
									font-size: 3.6vw;
								}
							}

							.proposal_desc {
								p {
									font-size: 1.3rem;
									text-align: left;
									line-height: 1.6;
									font-weight: 500;

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

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

							.proposal {

								a {
									display: block;
									margin-top: 1.5em;
									transition: all .1s;

									&:hover {
										opacity: 0.6;

									}
								}

								.caution {
									font-weight: 500;
									color: #888;

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

						.buttons {
							margin: 0;
							margin-top: 1.5em;
							gap: 0.5em;
							width: 100%;
							overflow: hidden;
							display: inline-flex;

							@media screen and (max-width: 480px) {
								a {
									font-size: 1.3rem;
								}
							}
						}

					}

					.toggle {
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						margin-top: auto;
						margin-bottom: 0;
						border-radius: 0 0 13px 13px;
						overflow: hidden;
						width: 100%;

						button {
							cursor: pointer;
							width: 100%;
							border: none;
							outline: none;
							box-shadow: none;
							padding: 1.2em;
							transition: all .1s;
							flex: auto;
							text-decoration: none;
							border-radius: 0 0 13px 13px;
							background: linear-gradient(0deg, #0369A1 0%, #0284C7 45%, #38BDF8 100%);
							position: relative;

							span {
								color: white;
								font-weight: 600;
								font-size: 1.6rem;

							}

							::after {
								padding: 1.2em;

								font-family: FontAwesome;
								content: "\f067";
								font-weight: 200;
								color: white;
								position: absolute;
								height: 20px;
								font-size: 2rem;
								right: 0;
								top: 0;
								bottom: 0;
								margin: auto;
								transition: all .5s;
								display: grid;
								place-content: center;
							}

							&.on {
								background: var(--deep-blue);
								opacity: 0.8;

								::after {
									font-family: FontAwesome;
									content: "\f068";
								}
							}

							&:hover {
								opacity: 0.6;
							}

						}
					}
				}
			}
		}



		.video_box {
			margin-top: 6em;
			text-align: center;

			h3 {
				font-size: 3rem;
				text-align: center;

				@media screen and (max-width: 820px) {
					font-size: 3.2vw;
				}

				@media screen and (max-width: 480px) {
					font-size: 5.5vw;
				}

				span {
					color: var(--deep-blue);
				}
			}

			p.read {
				color: var(--gray);
				font-weight: 500;
				font-size: 1.6rem;
				line-height: 1.6;
				margin-top: 2em;

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

			}

			.slick-list,
			.container {
				overflow: visible !important;
			}


			.video_slider {
				margin-top: 2.5em;
				align-items: stretch !important;

				@media screen and (max-width: 480px) {
					margin-top: 1.5em;
				}

				.slick-track {
					display: flex;
				}

				.slick-slide {
					height: auto !important;
					display: flex;
					flex-direction: column;
				}

				.slide-arrow {

					&.prev-arrow,
					&.next-arrow {
						cursor: pointer;
						width: 3.5vw !important;
						height: 3.5vw;
						aspect-ratio: 1/1;
						border-radius: 50%;
						background: var(--deep-blue);
						border: 1px solid var(--deep-blue);
						box-shadow: 0 6px 10px rgba(0, 0, 0, .12);
						display: flex;
						align-items: center;
						justify-content: center;
						z-index: 10;
						transition: all .2s;

						@media screen and (max-width: 820px) {
							width: 8.5vw !important;
							height: 8.5vw;

						}

						@media screen and (max-width: 480px) {
							width: 10.5vw !important;
							height: 10.5vw;

						}

						i {
							font-weight: 900;
							color: white;
							font-size: 1.5vw;
							opacity: 1;

							@media screen and (max-width: 820px) {
								font-size: 4vw;
							}
						}

						&:hover {
							background: white;

							i {
								color: var(--deep-blue);
							}
						}

						&:active {
							box-shadow: none;
							transform: scale(0.95);

						}

						@media screen and (max-width: 480px) {
							&:hover {
								background: var(--deep-blue);

								i {
									color: white;
								}
							}

							&:active {
								background: white;
								transform: scale(0.95);

								i {
									color: var(--deep-blue);
								}

							}
						}


					}

				}

				li {

					a {
						margin: 0 1em;
						flex-grow: 1;
						background: white;
						display: flex;
						flex-direction: column;
						border-radius: 20px;
						overflow: hidden;
						text-decoration: none;
						text-align: left;
						border: 1px solid #cee3ed;
						box-shadow: 0 8px 0 #cee3ed;
						color: var(--black);
						transition: all .2s;
						position: relative;

						@media screen and (max-width: 480px) {
							margin: 0 0.5em;
							box-shadow: 0 5px 0 #cee3ed;
							border-radius: 12px;
						}

						&:hover {
							box-shadow: 0 1px 0 #cee3ed;
							opacity: 0.8;

							transform: translateY(7px);

							@media screen and (max-width: 480px) {
								transform: translateY(4px);

							}

							.video_img {

								img {
									transform: scale(1.05);
								}
							}
						}

						.play {
							position: absolute;
							background: red;
							width: 55px;
							text-align: center;
							height: 55px;
							display: flex;
							align-content: center;
							align-items: center;
							justify-content: center;
							color: white;
							font-size: 100%;
							border-radius: 50%;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							padding: 0;
							margin: auto;

							@media screen and (max-width: 480px) {
								width: 40px;
								height: 40px;
							}
						}

						.video_img {
							width: 100%;
							aspect-ratio: 16/9;
							overflow: hidden;
							border-radius: 12px;
							overflow: hidden;

							img {
								transition: all .2s;
								width: 100%;
								height: 100%;
								object-fit: cover;
								object-position: center ceneter;
							}
						}


					}
				}
			}

			.buttons {

				margin-top: 4.5em;

				@media screen and (max-width: 480px) {
					margin-top: 2em;
				}
			}

		}

	}

	&.scene {
		background: #ebfbfe;

		.scene_box {
			margin-top: 3em;

			@media screen and (max-width: 480px) {
				margin-top: 2em;
			}

			>ul {
				justify-content: space-between;

				>li {
					width: 23.5%;
					background: white;
					border-radius: 20px;
					overflow: hidden;

					@media screen and (max-width: 820px) {
						width: 48.5%;
						border-radius: 12px;
						margin-bottom: 1em;
					}

					@media screen and (max-width: 480px) {
						border-radius: 6px;
					}

					h3 {
						color: var(--deep-blue);
						font-size: 2rem;
						margin-bottom: 1em;
						letter-spacing: 0.05em;
						position: relative;

						@media screen and (max-width: 480px) {
							font-size: 4vw;
							letter-spacing: 0.01em;

						}

						span {
							background: linear-gradient(transparent 72%, rgba(255, 246, 145, 1) 72%);
						}
					}

					figure {
						figcaption {
							padding: 1em 1.5em;

							@media screen and (max-width: 480px) {
								padding: 0.9em;
							}

							.purpose,
							.recomend {
								text-align: left;
								margin-bottom: 1em;

								h4 {
									border-left: solid var(--deep-blue) 5px;
									font-size: 1.7rem;
									line-height: 1;
									padding-left: 10px;
									margin-bottom: 0.5em;

									@media screen and (max-width: 480px) {
										font-size: 3.6vw;
										padding-left: 5px;
										line-height: 1.4;
										border-left: solid var(--deep-blue) 3px;

									}
								}

								ul {
									display: block;
								}

								p,
								ul li {
									padding-left: 10px;
									width: 100%;
									text-align: left;
									font-size: 1.4rem;
									color: var(--gray);
									font-weight: 500;
									line-height: 1.8;

									@media screen and (max-width: 480px) {
										font-size: 2.8vw;
										padding-left: 5px;
										line-height: 1.4;

									}

								}

								li::before {
									content: "・";
								}


							}
						}
					}
				}
			}


			.scene_table {
				margin-top: 5em;

				@media screen and (max-width: 820px) {
					margin-top: 3em;
				}

				h3 {
					font-size: 2.6rem;
					text-align: center;

					@media screen and (max-width: 820px) {
						font-size: 3.2vw;
					}


					@media screen and (max-width: 480px) {
						font-size: 5.5vw;
					}



					span {
						color: var(--deep-blue);
					}
				}

				.content_table {
					margin-top: 2em;
					width: 100%;
					border-collapse: separate;
					border-spacing: 0;
					border-radius: 10px;
					overflow: hidden;

					th,
					td {
						padding: 20px 25px;
					}

					thead {
						background: linear-gradient(135deg, #0369A1 0%, #0284C7 45%, #46adda 100%);

						tr {
							th {
								width: 11.5%;
								text-align: center;
								color: white;
								padding: 20px 5px;
								border-left: 1px solid #f0f0f0;

								&:first-child {
									border: none;
									width: 16%;
								}

								&:last-child {
									width: auto;
								}
							}
						}
					}

					tbody {
						counter-reset: plan-no;

						tr {
							background: #fff;
							counter-increment: plan-no;

							td:first-child {
								&::before {
									content: counter(plan-no, decimal-leading-zero);
									margin: auto;
									font-family: var(--montserrat);
									display: inline-block;
									font-size: 135%;
									background: linear-gradient(90deg, #05D3CB 0%, #09B4F3 60%, #0AADFC 100%);
									-webkit-background-clip: text;
									-webkit-text-fill-color: transparent;
									background-clip: text;
									color: transparent;
									font-weight: 700;
									margin-left: -10px;
									margin-right: 5px;

								}
							}

							&:nth-child(even) {
								background: #f8fcfd;
							}

							&:last-child {

								td {
									&:first-child {
										border-radius: 0 0 0 10px;
									}

									&:last-child {
										border-radius: 0 0 10px 0;
									}
								}
							}
						}

						th {
							/* color: var(--deep-blue); */
							font-size: 1.6rem;
							white-space: nowrap;


							&::before {
								content: counter(plan-no, decimal-leading-zero);
								margin: auto;
								font-family: var(--montserrat);
								display: inline-block;
								font-size: 125%;
								background: linear-gradient(135deg, #0369A1 0%, #0284C7 45%, #46adda 100%);
								-webkit-background-clip: text;
								background-clip: text;
								-webkit-text-fill-color: transparent;
								color: transparent;
								font-weight: 700;
								margin-left: -10px;
								margin-right: 5px;
							}
						}

						td {
							border-left: 1px solid #f0f0f0;
							font-size: 1.5rem;
							color: inherit;
							padding: 12px 20px;
							text-align: center;

							&:first-child {
								font-weight: 500;
								color: var(--deep-blue);
							}

							.rating-star {
								display: inline-flex;
							}

							.rating-star .fa-star {
								color: #f5b400;
								font-size: 1.8rem;
								margin: 0 0.2em;
							}

							.rating-star .is-off {
								color: #d1d5db;
							}

							.rating-star i {
								font-size: 16px;
							}



							.visually-hidden {
								position: absolute;
								width: 1px;
								height: 1px;
								padding: 0;
								margin: -1px;
								overflow: hidden;
								clip: rect(0, 0, 0, 0);
								white-space: nowrap;
								border: 0;
							}

							ul {
								padding: 0 !important;
								margin: 0;
								display: block;
								text-align: left;

								li {
									width: 100%;
									line-height: 1.6;
									font-size: 1.4rem;
									text-align: left;

									&::before {
										content: "・";
									}
								}
							}
						}
					}

					@media screen and (max-width: 820px) {
						display: block;
						border: none;
						border-radius: 0;

						thead {
							display: none;
						}

						tbody {
							display: flex;
							justify-content: space-between;
							flex-wrap: wrap;
							width: 100%;
						}

						tr {
							width: 48.5%;
							display: block;
							margin-bottom: 1.5em;
							background: #fff;
							border-radius: 10px;
							overflow: hidden;
						}

						th,
						td {
							display: block;
							width: 100% !important;
							min-width: 0 !important;
							max-width: 100%;
							box-sizing: border-box;
						}

						th {
							display: block;
							color: white;
							background: linear-gradient(135deg, #0369A1 0%, #0284C7 45%, #46adda 100%);
							width: 100%;
							padding: 15px 25px;

							&::before {
								margin-left: 0 !important;
								margin-right: 12px !important;
								font-size: 100% !important;
								color: var(--light-blue) !important;
								-webkit-text-fill-color: unset !important;
							}
						}

						td {
							display: block;
							position: relative;
							width: 100%;
							border: none;
							border-bottom: 1px solid #eee;
							box-sizing: border-box;
							text-align: center;
							padding: 10px;
							padding-left: calc(40% + 30px) !important;
							border-left: none !important;
							text-align: center;

							&:last-child {
								border-bottom: none;
							}

							&::before {

								content: attr(data-label) !important;
								position: absolute;
								font-weight: bold;
								font-size: 1.7vw !important;
								line-height: 1.5;
								background: var(--white-blue) !important;
								color: var(--black) !important;
								display: flex !important;
								align-items: center;
								width: 38% !important;
								height: 100%;
								padding: 0 15px !important;
								left: 0;
								top: 0;
								margin: 0 !important;
							}

							.star_rating {
								font-size: 15px;
							}

							ul {
								li {
									text-align: center !important;
									font-size: 1.5vw !important;
								}
							}
						}
					}

					@media screen and (max-width: 480px) {
						tbody {
							display: flex;
							justify-content: space-between;
							flex-wrap: wrap;
							width: 100%;
						}

						tr {
							width: 100%;
							display: block;
							margin-bottom: 1em;
							background: #fff;
							border-radius: 10px;
							overflow: hidden;
						}


						th {
							padding: 10px 15px;
							font-size: 1.6rem !important;

						}

						td {
							&::before {
								font-size: 1.3rem !important;
							}

							ul {
								li {
									font-size: 1.2rem !important;

								}
							}
						}
					}
				}

				.info {
					line-height: 1.8;

					.rating-star {
						display: inline-flex;
					}

					.rating-star .fa-star {
						margin: 0;
						color: #f5b400;
						font-size: 1.2rem;
						margin: 0 1px;

					}

					.rating-star .is-off {
						color: #d1d5db;
					}

					.rating-star i {
						font-size: 16px;
					}


				}
			}
		}
	}

	&.case {
		background: white;
		overflow: hidden;

		.slick-list,
		.container {
			overflow: visible !important;
		}

		.case_box {
			margin-top: 3em;

			@media screen and (max-width: 480px) {
				margin-top: 2em;
			}

			.case_slider {
				align-items: stretch !important;


				.slick-track {
					display: flex;
				}

				.slick-slide {
					height: auto !important;
					display: flex;
					flex-direction: column;
				}

				.slide-arrow {

					&.prev-arrow,
					&.next-arrow {
						cursor: pointer;
						width: 3.5vw !important;
						height: 3.5vw;
						aspect-ratio: 1/1;
						border-radius: 50%;
						background: var(--deep-blue);
						border: 1px solid var(--deep-blue);
						box-shadow: 0 6px 10px rgba(0, 0, 0, .12);
						display: flex;
						align-items: center;
						justify-content: center;
						z-index: 10;
						transition: all .2s;

						@media screen and (max-width: 820px) {
							width: 8.5vw !important;
							height: 8.5vw;

						}

						@media screen and (max-width: 480px) {
							width: 10.5vw !important;
							height: 10.5vw;

						}

						i {
							font-weight: 900;
							color: white;
							font-size: 1.5vw;
							opacity: 1;

							@media screen and (max-width: 820px) {
								font-size: 4vw;
							}
						}

						&:hover {
							background: white;

							i {
								color: var(--deep-blue);
							}
						}

						&:active {
							box-shadow: none;
							transform: scale(0.95);

						}


						@media screen and (max-width: 480px) {
							&:hover {
								background: var(--deep-blue);

								i {
									color: white;
								}
							}

							&:active {
								background: white;
								transform: scale(0.95);

								i {
									color: var(--deep-blue);
								}

							}
						}

					}

				}

				li {

					a {
						margin: 0 1em;
						flex-grow: 1;
						background: white;
						display: flex;
						flex-direction: column;
						border-radius: 20px;
						text-decoration: none;
						text-align: left;
						border: 1px solid #cee3ed;
						box-shadow: 0 8px 0 #cee3ed;
						color: var(--black);
						transition: all .2s;

						@media screen and (max-width: 480px) {
							border-radius: 10px;
							margin: 0.5em;
							box-shadow: 0 5px 0 #cee3ed;

						}

						&:hover {
							box-shadow: 0 1px 0 #cee3ed;

							transform: translateY(7px);

							.works_img {
								img {
									opacity: 0.7;
									transform: scale(1.05);
								}
							}
						}

						.works_img {
							width: 100%;
							aspect-ratio: 27/19;
							overflow: hidden;
							border-radius: 20px 20px 0 0;

							@media screen and (max-width: 480px) {
								border-radius: 10px 10px 0 0;
							}

							img {
								transition: all .2s;
								width: 100%;
								height: 100%;
								object-fit: cover;
								object-position: center ceneter;
							}
						}

						.works_text {
							width: 100%;
							padding: 1em 1em;
							display: flex;
							flex-direction: column;
							flex-grow: 1;

							@media screen and (max-width: 480px) {
								padding: 1em 0.6em;
							}

							.post_date {
								font-size: 1.3rem;
								font-weight: 600;
								color: var(--gray);
								font-family: var(--montserrat);

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

							h3 {
								color: var(--deep-blue);
								font-size: 1.6rem;
								margin-top: 0.4em;

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

							h4 {
								font-size: 1.3rem;
								font-weight: 500;
								margin-top: 0.5em;

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

							}
						}

						.tag_box {
							margin-top: 1em;

							ul {
								li {
									font-size: 1.2rem;
									font-weight: 500;
									padding: 1px 6px 2px;
									border-radius: 2px;
									margin-right: 3px;
									margin-bottom: 3px;
									border: 1px solid var(--deep-blue);
									background: var(--deep-blue);
									color: white;

									@media screen and (max-width: 480px) {
										font-size: 1rem;
										padding: 0 3px 1px;
										margin-right: 2px;
										margin-bottom: 2px;
									}

									&.scene_tag {
										border-color: #28b5c8;
										background: #28b5c8;
									}

									&.pref {
										background: none;
										border-color: var(--orange);
										color: var(--orange);
									}

									&.experience_tag {
										border-color: var(--orange);
										background: var(--orange);
									}
								}
							}
						}


						.btn {
							padding-top: 0.5em;
							width: auto;
							text-align: right;
							margin-top: auto;
							font-size: 1.3rem;
							font-weight: 500;
							color: var(--gray);

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

							&::after {
								font-family: "Font Awesome 6 Free";
								font-weight: 900;
								content: "\f061";
								margin-left: .4em;
								font-size: .9em;
								transition: transform .3s ease;
								color: var(--orange);
							}
						}
					}
				}
			}
		}

		.buttons {
			margin-top: 4.5em;

			@media screen and (max-width: 480px) {
				margin-top: 2em;
			}

		}
	}

	&.reason {
		background: #F8FAFC;

		.reason_box {
			margin-top: 3.5em;

			@media screen and (max-width: 480px) {
				margin-top: 2.5em;
			}

			ol {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				list-style-type: none;
				padding: 0;
				counter-reset: feature;
				filter: drop-shadow(0 6px 15px rgba(2, 132, 199, .15));

				li {
					width: 48.5%;
					margin-bottom: 2em;
					background: white;
					border-radius: 12px;
					counter-increment: feature;
					overflow: hidden;

					@media screen and (max-width: 480px) {
						margin-bottom: 1em;
						border-radius: 10px;
						width: 100%;

						&:last-child {
							margin-bottom: 0;
						}
					}

					.img {
						width: 100%;
						aspect-ratio: 200/90;

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

					.text {
						padding: 2em 3em;
						text-align: left;
						position: relative;

						@media screen and (max-width: 820px) {
							padding: 2em;
						}

						&::before {
							content: counter(feature, decimal-leading-zero);
							position: absolute;
							top: 0;
							bottom: 0;
							margin: auto;
							font-family: var(--montserrat);
							right: 30px;
							font-size: 18rem;
							font-weight: 700;
							color: var(--deep-blue);
							line-height: 1;
							opacity: 0.07;
						}

						@media screen and (max-width: 820px) {
							&::before {
								font-size: 10rem;
							}
						}

						h3 {
							font-size: 2.4rem;

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

						h4 {
							font-size: 1.8rem;
							color: var(--deep-blue);
							margin-top: 0.2em;
							position: relative;
							padding-left: 30px;

							@media screen and (max-width: 820px) {
								font-size: 1.4rem;
								padding-left: 20px;
							}

							&::before {
								top: 0;
								left: 0;
								bottom: 0;
								margin: auto;
								position: absolute;
								content: "";
								width: 25px;
								height: 1px;
								background: var(--deep-blue);
							}

							@media screen and (max-width: 820px) {
								&::before {
									width: 15px;
								}
							}
						}

						p {
							margin-top: 1.5em;
							text-align: left;
							line-height: 1.6;
							font-size: 1.4rem;

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

			.reason_summary {
				text-align: center;
				margin-top: 2em;

				P {
					font-size: 2rem;
					font-weight: 500;
					line-height: 1.8;

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

					strong {
						color: var(--deep-blue);
					}

				}

				.summary_copy {
					margin-top: 2em;
					font-size: 3.2rem;
					font-weight: 700;

					@media screen and (max-width: 820px) {
						margin-top: 1em;
						font-size: 2.6vw;
					}

					@media screen and (max-width: 480px) {
						margin-top: 1.5em;
						font-size: 6vw;
					}

					span {
						color: white;
						font-size: 125%;
						background: linear-gradient(90deg, #05D3CB 0%, #09B4F3 60%, #0AADFC 100%);
						display: inline-block;
						margin: 0 auto;
						color: white;
						padding: 7px 15px 9px;

						@media screen and (max-width: 480px) {
							margin-top: 0.2em;
							padding: 5px 12px 6px;
						}
					}
				}
			}
		}
	}

	&.str_function {
		background: white;

		.str_function_box {
			margin-top: 3.5em;
			padding: 3.5em 3.5em;
			background: #fff;
			border-radius: 30px;
			box-shadow: 0 10px 34px rgba(2, 132, 199, .15);
			text-align: center;


			h3 {
				font-size: 3.2rem;

				span {
					color: var(--deep-blue)
				}
			}

			>p {
				color: var(--gray);
				font-weight: 500;
				font-size: 1.6rem;
				line-height: 1.6;
				margin-top: 2.5em;
			}

			.stamp-method-table {
				margin-top: 2.5em;
				width: 100%;
				border-collapse: separate;
				border-spacing: 0;
				border-radius: 10px;
				overflow: hidden;
				border: 1px solid #f0f0f0;

				th,
				td {
					padding: 10px 25px;
				}

				thead {
					background: linear-gradient(135deg, #0369A1 0%, #0284C7 45%, #46adda 100%);

					tr {
						th {
							text-align: center;
							color: white;
							padding: 20px 5px;
							border-left: 1px solid #f0f0f0;


						}
					}
				}

				tbody {
					counter-reset: plan-no;

					tr {
						background: #fff;
						counter-increment: plan-no;

						td:first-child {
							&::before {
								content: counter(plan-no, decimal-leading-zero);
								margin: auto;
								font-family: var(--montserrat);
								display: inline-block;
								font-size: 135%;
								background: linear-gradient(90deg, #05D3CB 0%, #09B4F3 60%, #0AADFC 100%);
								-webkit-background-clip: text;
								-webkit-text-fill-color: transparent;
								background-clip: text;
								color: transparent;
								font-weight: 700;
								margin-left: -10px;
								margin-right: 5px;

							}
						}

						&:nth-child(even) {
							background: #f8fcfd;
						}

						&:last-child {

							td {
								&:first-child {
									border-radius: 0 0 0 10px;
								}

								&:last-child {
									border-radius: 0 0 10px 0;
								}
							}
						}
					}

					th {
						/* color: var(--deep-blue); */
						font-size: 1.5rem;
						white-space: nowrap;

						.stamp-name {
							display: flex;
							align-items: center;

							picture {
								width: 85px;
								aspect-ratio: 1/1;
								margin-right: 15px;

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


						}
					}

					td {
						border-left: 1px solid #f0f0f0;
						font-size: 1.4rem;
						font-weight: 500;
						color: inherit;
						padding: 12px 20px;
						text-align: center;
						line-height: 1.8;


						.visually-hidden {
							position: absolute;
							width: 1px;
							height: 1px;
							padding: 0;
							margin: -1px;
							overflow: hidden;
							clip: rect(0, 0, 0, 0);
							white-space: nowrap;
							border: 0;
						}

						ul {
							padding: 0 !important;
							margin: 0;
							display: block;
							text-align: left;

							li {
								width: 100%;
								line-height: 1.6;
								font-size: 1.4rem;
								text-align: left;

								&::before {
									content: "・";
								}
							}
						}
					}
				}

				@media screen and (max-width: 820px) {

					display: block;
					border: none;
					border-radius: 0;

					thead {
						display: none;
					}

					tbody {
						display: block;
					}

					tr {
						display: block;
						margin-bottom: 20px;
						background: #fff;
					}

					td {
						display: block;
						position: relative;
						width: 100%;
						border: none;
						border-bottom: 1px solid #eee;
						box-sizing: border-box;
						text-align: center;
						padding: 10px;
						padding-left: 45%;
						border-left: none !important;

						&::before {
							content: attr(data-label) !important;
							position: absolute;
							font-weight: bold;
							font-size: 100% !important;
							line-height: 1.5;
							background: var(--new-blue) !important;
							color: white;
							display: flex !important;
							align-items: center;
							width: 30%;
							height: 100%;
							padding: 0 15px !important;
							left: 0;
							top: 0;
							margin: 0 !important;
							-webkit-text-fill-color: white !important;

							color: white !important;
						}

						.star_rating {
							font-size: 15px;
						}
					}
				}

				@media screen and (max-width: 480px) {

					th {
						.comparison_text {
							p {
								font-size: 1.2rem !important;
							}
						}
					}

					td {
						.comparison_text {
							p {
								font-size: 1.1rem !important;
								margin-left: 20px;
							}
						}
					}
				}
			}


		}

		.str_function_flex {
			margin-top: 2em;
			display: flex;
			justify-content: space-between;

			>div {
				padding: 2em;
				filter: drop-shadow(0 6px 15px rgba(2, 132, 199, .15));
				background: white;
				border-radius: 20px;
				width: 48.5%;

				>h3,
				>p {
					text-align: center;
				}

				h3 {
					font-size: 2.6rem;

					span {
						color: var(--deep-blue);

					}
				}

				>p {
					margin-top: 2em;
					font-size: 1.4rem;
					color: var(--gray);
					font-weight: 500;
					line-height: 1.6;
				}

				.function-table,
				.prize-table {
					margin-top: 1.5em;
					width: 100%;
					border-collapse: separate;
					border-spacing: 0;
					border-radius: 10px;
					overflow: hidden;
					border: 1px solid #f0f0f0;

					th,
					td {
						padding: 10px 12px;
					}

					thead {
						background: linear-gradient(135deg, #0369A1 0%, #0284C7 45%, #46adda 100%);

						tr {
							th {
								text-align: center;
								color: white;
								padding: 12px 5px;
								border-left: 1px solid #f0f0f0;


							}
						}
					}

					tbody {
						counter-reset: plan-no;

						tr {
							background: #fff;
							counter-increment: plan-no;

							td:first-child {
								&::before {
									content: counter(plan-no, decimal-leading-zero);
									margin: auto;
									font-family: var(--montserrat);
									display: inline-block;
									font-size: 135%;
									background: linear-gradient(90deg, #05D3CB 0%, #09B4F3 60%, #0AADFC 100%);
									-webkit-background-clip: text;
									-webkit-text-fill-color: transparent;
									background-clip: text;
									color: transparent;
									font-weight: 700;
									margin-left: -10px;
									margin-right: 5px;

								}
							}

							&:nth-child(even) {
								background: #f8fcfd;
							}

							&:last-child {

								td {
									&:first-child {
										border-radius: 0 0 0 10px;
									}

									&:last-child {
										border-radius: 0 0 10px 0;
									}
								}
							}
						}

						th {
							/* color: var(--deep-blue); */
							font-size: 1.4rem;
							white-space: nowrap;

							.stamp-name {
								display: flex;
								align-items: center;

								picture {
									width: 45px;
									aspect-ratio: 1/1;
									margin-right: 15px;

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


							}
						}

						td {
							border-left: 1px solid #f0f0f0;
							font-size: 1.2rem;
							font-weight: 500;
							color: inherit;
							padding: 12px 15px;
							text-align: left;
							line-height: 1.8;


							.visually-hidden {
								position: absolute;
								width: 1px;
								height: 1px;
								padding: 0;
								margin: -1px;
								overflow: hidden;
								clip: rect(0, 0, 0, 0);
								white-space: nowrap;
								border: 0;
							}

							ul {
								padding: 0 !important;
								margin: 0;
								display: block;
								text-align: left;

								li {
									width: 100%;
									line-height: 1.6;
									font-size: 1.4rem;
									text-align: left;

									&::before {
										content: "・";
									}
								}
							}
						}
					}

					@media screen and (max-width: 820px) {

						display: block;
						border: none;
						border-radius: 0;

						thead {
							display: none;
						}

						tbody {
							display: block;
						}

						tr {
							display: block;
							margin-bottom: 20px;
							background: #fff;
						}

						td {
							display: block;
							position: relative;
							width: 100%;
							border: none;
							border-bottom: 1px solid #eee;
							box-sizing: border-box;
							text-align: center;
							padding: 10px;
							padding-left: 45%;
							border-left: none !important;

							&::before {
								content: attr(data-label) !important;
								position: absolute;
								font-weight: bold;
								font-size: 100% !important;
								line-height: 1.5;
								background: var(--new-blue) !important;
								color: white;
								display: flex !important;
								align-items: center;
								width: 30%;
								height: 100%;
								padding: 0 15px !important;
								left: 0;
								top: 0;
								margin: 0 !important;
								-webkit-text-fill-color: white !important;

								color: white !important;
							}

							.star_rating {
								font-size: 15px;
							}
						}
					}

					@media screen and (max-width: 480px) {

						th {
							.comparison_text {
								p {
									font-size: 1.2rem !important;
								}
							}
						}

						td {
							.comparison_text {
								p {
									font-size: 1.1rem !important;
									margin-left: 20px;
								}
							}
						}
					}
				}

			}

		}

		.link_info {
			text-align: center;
			font-size: 1.8rem;
			font-weight: 500;
			line-height: 1.8;

			strong {
				color: var(--deep-blue);
			}
		}

		.link_info,
		.buttons {
			margin-top: 3em;
			position: relative;
			z-index: 2;
		}

		.compare_box {
			padding: 7.5rem 0;
			background: #EFFBFF;

			position: relative;
			z-index: 1;
			margin-top: 6em;

			h3 {
				font-size: 3rem;
				text-align: center;

				span {
					color: var(--deep-blue);
				}
			}

			&::before,
			&::after {
				position: absolute;
				content: "";
				width: 50%;
				height: 200px;
				clip-path: polygon(0 0, 100% calc(100% - 1px), 100% 100%, 0% 100%);
				background: #EFFBFF;
				bottom: calc(100% - 1px);
				margin: auto;
			}

			&::before {
				left: 0;
			}

			&::after {
				clip-path: polygon(0 0, 100% calc(100% - 1px), 100% 100%, 0% 100%);
				right: 0;
				left: auto;
				transform: scaleX(-1);
			}

		}

		.strengths_box {
			padding: 7.5rem 0;
			background: #EFFBFF;

			position: relative;
			z-index: 1;
			margin-top: 0;

			h3 {
				font-size: 3rem;
				text-align: center;

				span {
					color: var(--deep-blue);
				}
			}

			.strengths_content {

				>ul {
					justify-content: space-between;
					margin-top: 3em;
					filter: drop-shadow(0 6px 15px rgba(2, 132, 199, .15));

					>li {
						width: 32%;
						margin-bottom: 1.5em;
						background: white;
						border-radius: 12px;
						overflow: hidden;


						@media screen and (max-width: 820px) {
							width: 48.5%;
							border-radius: 15px;
						}

						@media screen and (max-width: 480px) {
							width: 100%;
							margin-bottom: 30px;
							border-radius: 12px;
						}

						.strengths_img {
							background: #f8fcfd;
							padding: 1em 1em 0;
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							aspect-ratio: 522/251;

							img {
								width: 100%;
								height: 100%;
								object-fit: contain;
								object-position: bottom center;
							}
						}

						.strengths_text {
							padding: 1.5em 2em 2em;

							@media screen and (max-width: 820px) {
								padding: 23px 20px 32px;
							}

							@media screen and (max-width: 480px) {
								padding: 20px 10px 30px;


							}

							h4 {
								text-align: center;
								font-size: 2rem;
								font-weight: 600;
								line-height: 1.6;

								@media screen and (max-width: 820px) {
									font-size: 1.6rem;
									line-height: 3rem;
								}

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

								span {
									color: var(--deep-blue);
								}
							}

							p {
								margin-top: 1.2em;
								font-size: 1.4rem;
								font-weight: 500;
								line-height: 1.8;
								text-align: left;
								color: var(--gray);

								@media screen and (max-width: 480px) {
									margin-top: 1.2em;
									text-align: left;
									font-size: 1.2rem;
									font-weight: 500;
									line-height: 2rem;
								}


							}

						}
					}
				}

			}
		}
	}


	&.str_function {
		background: white;
		padding-bottom: 0;

		.str_function_box {
			margin-top: 3.5em;
			padding: 3.5em 3.5em;
			background: #fff;
			border-radius: 30px;
			box-shadow: 0 10px 34px rgba(2, 132, 199, .15);
			text-align: center;

			@media screen and (max-width: 820px) {
				margin-top: 3em;
				padding: 2em;
				padding-bottom: 1em;
				border-radius: 21px;
			}

			@media screen and (max-width: 480px) {
				margin-top: 2em;
				border-radius: 12px;
				padding: 2em 1.2em;
			}

			h3 {
				font-size: 3.2rem;

				@media screen and (max-width: 820px) {
					font-size: 3.2vw;
				}

				@media screen and (max-width: 480px) {
					font-size: 5.5vw;
				}


				span {
					color: var(--deep-blue)
				}
			}

			>p {
				color: var(--gray);
				font-weight: 500;
				font-size: 1.6rem;
				line-height: 1.6;
				margin-top: 2.5em;

				@media screen and (max-width: 820px) {
					font-size: 1.6vw;
					margin-top: 1.5em;
				}

				@media screen and (max-width: 480px) {
					font-size: 1.2rem;
					text-align: left;

					br {
						display: none;
					}
				}
			}

			.stamp-method-table {
				margin-top: 2.5em;
				width: 100%;
				border-collapse: separate;
				border-spacing: 0;
				border-radius: 10px;
				overflow: hidden;
				border: 1px solid #f0f0f0;

				@media screen and (max-width: 480px) {
					margin-top: 2em;
				}

				th,
				td {
					padding: 10px 25px;
				}

				thead {
					background: linear-gradient(135deg, #0369A1 0%, #0284C7 45%, #46adda 100%);

					tr {
						th {
							text-align: center;
							color: white;
							padding: 20px 5px;
							border-left: 1px solid #f0f0f0;


						}
					}
				}

				tbody {
					counter-reset: plan-no;

					tr {
						background: #fff;
						counter-increment: plan-no;

						td:first-child {
							&::before {
								content: counter(plan-no, decimal-leading-zero);
								margin: auto;
								font-family: var(--montserrat);
								display: inline-block;
								font-size: 135%;
								background: linear-gradient(90deg, #05D3CB 0%, #09B4F3 60%, #0AADFC 100%);
								-webkit-background-clip: text;
								-webkit-text-fill-color: transparent;
								background-clip: text;
								color: transparent;
								font-weight: 700;
								margin-left: -10px;
								margin-right: 5px;

							}
						}

						&:nth-child(even) {
							background: #f8fcfd;
						}

						&:last-child {

							td {
								&:first-child {
									border-radius: 0 0 0 10px;
								}

								&:last-child {
									border-radius: 0 0 10px 0;
								}
							}
						}
					}

					th {
						/* color: var(--deep-blue); */
						font-size: 1.5rem;
						white-space: nowrap;

						.stamp-name {
							display: flex;
							align-items: center;

							picture {
								width: 85px;
								aspect-ratio: 1/1;
								margin-right: 15px;

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


						}
					}

					td {
						border-left: 1px solid #f0f0f0;
						font-size: 1.4rem;
						font-weight: 500;
						color: inherit;
						padding: 12px 20px;
						text-align: left;
						line-height: 1.8;

						.visually-hidden {
							position: absolute;
							width: 1px;
							height: 1px;
							padding: 0;
							margin: -1px;
							overflow: hidden;
							clip: rect(0, 0, 0, 0);
							white-space: nowrap;
							border: 0;
						}

						ul {
							padding: 0 !important;
							margin: 0;
							display: block;
							text-align: left;

							li {
								width: 100%;
								line-height: 1.6;
								font-size: 1.4rem;
								text-align: left;

								&::before {
									content: "・";
								}
							}
						}
					}
				}

				@media screen and (max-width: 820px) {

					display: block;
					border: none;
					border-radius: 0;

					thead {
						display: none;
					}

					tbody {
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;
						width: 100%;
					}

					tr {
						display: block;
						background: white !important;
						border-radius: 10px;
						border: solid 3px var(--light-blue);
						width: 48%;
						display: block;
						margin-bottom: 1em;
						border-radius: 10px;
						overflow: hidden;
					}

					th,
					td {
						display: block;
						width: 100% !important;
						min-width: 0 !important;
						max-width: 100%;
						box-sizing: border-box;
					}


					th {
						border-bottom: 1px solid #eee;
						padding: 5px 10px 5px 0 !important;

						.stamp-name {
							display: flex;
							align-items: center;

							picture {
								margin: 0 !important;
							}

							color: var(--deep-blue);
							font-size: 2vw !important;
						}
					}

					td {
						position: relative;
						border: none;
						border-bottom: 1px solid #eee;
						text-align: left !important;
						padding: 10px;
						border-left: none !important;
						font-size: 1.4vw !important;

						&:last-child {
							border-bottom: none;

						}

						&::before {
							position: inherit;
							content: attr(data-label) !important;
							font-weight: bold;
							font-size: 110% !important;
							line-height: 1.5;
							background: var(--new-blue) !important;
							display: flex !important;
							align-items: center;
							height: 100%;
							padding: 0 0 5px !important;
							left: 0;
							top: 0;
							margin: 0 !important;
							-webkit-text-fill-color: var(--deep-blue) !important;
							color: var(--deep-blue) !important;
						}

						.star_rating {
							font-size: 15px;
						}
					}
				}

				@media screen and (max-width: 480px) {
					tr {
						border-radius: 8px;
						width: 100%;

						&:last-child {
							margin-bottom: 0;
						}
					}

					th {
						.stamp-name {
							picture {
								width: 55px !important;
								margin: 0 10px !important;
							}

							span {
								font-size: 1.5rem !important;

							}
						}
					}

					td {
						&::before {
							width: 100% !important;
						}

						font-size: 1.1rem !important;
						margin-left: 0;
					}

				}
			}


		}

		.str_function_flex {
			margin-top: 2em;
			display: flex;
			justify-content: space-between;

			@media screen and (max-width: 480px) {
				margin-top: 1.5em;
				flex-direction: column;
			}

			>div {
				padding: 2em;
				filter: drop-shadow(0 6px 15px rgba(2, 132, 199, .15));
				background: white;
				border-radius: 20px;
				width: 48.5%;

				@media screen and (max-width: 480px) {
					width: 100%;
					border-radius: 12px;
					padding: 2em 1.2em;
					margin-bottom: 1.5em;

					&:last-child {
						margin: 0;
					}
				}

				>h3,
				>p {
					text-align: center;
				}

				h3 {
					font-size: 2.6rem;

					@media screen and (max-width: 820px) {
						font-size: 2.6vw;
					}

					@media screen and (max-width: 480px) {
						font-size: 5.5vw;
					}

					span {
						color: var(--deep-blue);

					}
				}

				>p {
					margin-top: 2em;
					font-size: 1.4rem;
					color: var(--gray);
					font-weight: 500;
					line-height: 1.6;

					@media screen and (max-width: 480px) {
						font-size: 1.2rem;
						text-align: left;

						br {
							display: none;
						}
					}
				}

				.function-table,
				.prize-table {
					margin-top: 1.5em;
					width: 100%;
					border-collapse: separate;
					border-spacing: 0;
					border-radius: 10px;
					overflow: hidden;
					border: 1px solid #f0f0f0;

					th,
					td {
						padding: 10px 12px;
					}

					thead {
						background: linear-gradient(135deg, #0369A1 0%, #0284C7 45%, #46adda 100%);

						tr {
							th {
								text-align: center;
								color: white;
								padding: 12px 5px;
								border-left: 1px solid #f0f0f0;


							}
						}
					}

					tbody {
						counter-reset: plan-no;

						tr {
							background: #fff;
							counter-increment: plan-no;

							td:first-child {
								&::before {
									content: counter(plan-no, decimal-leading-zero);
									margin: auto;
									font-family: var(--montserrat);
									display: inline-block;
									font-size: 135%;
									background: linear-gradient(90deg, #05D3CB 0%, #09B4F3 60%, #0AADFC 100%);
									-webkit-background-clip: text;
									-webkit-text-fill-color: transparent;
									background-clip: text;
									color: transparent;
									font-weight: 700;
									margin-left: -10px;
									margin-right: 5px;

								}
							}

							&:nth-child(even) {
								background: #f8fcfd;
							}

							&:last-child {

								td {
									&:first-child {
										border-radius: 0 0 0 10px;
									}

									&:last-child {
										border-radius: 0 0 10px 0;
									}
								}
							}
						}

						th {
							/* color: var(--deep-blue); */
							font-size: 1.4rem;
							white-space: nowrap;

							.stamp-name {
								display: flex;
								align-items: center;

								picture {
									width: 45px;
									aspect-ratio: 1/1;
									margin-right: 15px;

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


							}
						}

						td {
							border-left: 1px solid #f0f0f0;
							font-size: 1.2rem;
							font-weight: 500;
							color: inherit;
							padding: 12px 15px;
							text-align: left;
							line-height: 1.8;


							.visually-hidden {
								position: absolute;
								width: 1px;
								height: 1px;
								padding: 0;
								margin: -1px;
								overflow: hidden;
								clip: rect(0, 0, 0, 0);
								white-space: nowrap;
								border: 0;
							}

							ul {
								padding: 0 !important;
								margin: 0;
								display: block;
								text-align: left;

								li {
									width: 100%;
									line-height: 1.6;
									font-size: 1.4rem;
									text-align: left;

									&::before {
										content: "・";
									}
								}
							}
						}
					}

					@media screen and (max-width: 820px) {

						display: block;
						border: none;
						border-radius: 0;

						thead {
							display: none;
						}

						tbody {
							display: block;
						}

						tr {
							display: block;
							margin-bottom: 20px;
							background: #fff !important;
						}

						th,
						td {
							display: block;
							width: 100%;
							min-width: 0;
							max-width: 100%;
							box-sizing: border-box;
						}

						th {
							font-size: 1.6rem !important;
							color: var(--deep-blue) !important;
						}

						td {
							display: block;
							position: relative;
							width: 100%;
							border: none;
							border-bottom: 1px solid #eee;
							box-sizing: border-box;
							text-align: center;
							padding: 10px;
							padding-left: 45%;
							border-left: none !important;

							&::before {
								content: attr(data-label) !important;
								position: inherit;
								font-weight: bold;
								font-size: 110% !important;
								line-height: 1.5;
								background: var(--new-blue) !important;
								color: white;
								display: flex !important;
								align-items: center;
								padding: 0 0 5px !important;
								left: 0;
								top: 0;
								margin: 0 !important;
								-webkit-text-fill-color: var(--deep-blue) !important;

								color: var(--deep-blue) !important;
							}

							.star_rating {
								font-size: 15px;
							}
						}
					}

					@media screen and (max-width: 480px) {
						tr {
							display: block;
							background: white !important;
							border-radius: 8px;
							border: solid 3px var(--light-blue);
							display: block;
							margin-bottom: 1em;
							border-radius: 10px;
							overflow: hidden;

							&:last-child {
								margin-bottom: 0;
							}
						}

						th {
							border-bottom: 1px solid #eee;
							padding: 10px 10px 10px 0 !important;
							font-size: 1.5rem !important;

							picture {
								width: 45px !important;
								margin: 0 15px !important;
							}

						}

						td {
							border: none;
							padding: 12px 20px;

							&::before {
								width: 100% !important;
								font-size: 110% !important;
							}

							font-size: 1.1rem !important;
							margin-left: 0;
						}
					}
				}

			}

		}

		.link_info {
			text-align: center;
			font-size: 1.8rem;
			font-weight: 500;
			line-height: 1.8;

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

			strong {
				color: var(--deep-blue);
			}
		}

		.link_info,
		.buttons {
			margin-top: 3em;
			position: relative;
			z-index: 2;

			@media screen and (max-width: 480px) {
				margin-top: 2em;
			}
		}

		.compare_box {
			padding: 7.5rem 0;
			background: #EFFBFF;

			position: relative;
			z-index: 1;
			margin-top: 6em;

			@media screen and (max-width: 480px) {
				margin-top: 3em;
				padding-top: 5rem;
				padding-bottom: 5rem;
			}

			h3 {
				font-size: 3rem;
				text-align: center;

				@media screen and (max-width: 480px) {
					font-size: 5.5vw;
				}

				span {
					color: var(--deep-blue);
				}
			}

			&::before,
			&::after {
				position: absolute;
				content: "";
				width: 50%;
				height: 200px;
				clip-path: polygon(0 0, 100% calc(100% - 1px), 100% 100%, 0% 100%);
				background: #EFFBFF;
				bottom: calc(100% - 1px);
				margin: auto;
			}

			@media screen and (max-width: 480px) {

				&::before,
				&::after {
					height: 10rem;
				}
			}

			&::before {
				left: 0;
			}

			&::after {
				clip-path: polygon(0 0, 100% calc(100% - 1px), 100% 100%, 0% 100%);
				right: 0;
				left: auto;
				transform: scaleX(-1);
			}

			.compare-table {
				width: 100%;
				border-collapse: separate;
				border-spacing: 0;
				filter: drop-shadow(0 10px 24px rgba(2, 132, 199, .15));
				table-layout: fixed;
				margin-top: 3em;

				th,
				td {
					padding: 1.2em 0.5em;
					text-align: center;
					vertical-align: middle;
					border-right: 1px solid #e5e7eb;
					font-size: 1.4rem;
					line-height: 1.6;
					background: #fff;

				}

				thead {
					width: 100%;

					tr {
						width: 100%;
					}

					th {
						background: #0284C7;
						font-weight: 700;
						font-size: 1.6rem;
						margin-top: 1em;
						width: 17%;

						border: none;

						span {
							width: 100%;
							position: relative;
							z-index: 2;
							display: inline-block;
							color: white;
							font-size: 1.8rem;
						}

						&:first-child {
							visibility: hidden;
							width: auto;
						}

						&.pkb {
							width: 24%;
							background: none;
							color: #fff;
							position: relative;
							border-right: none;


							&::after {
								content: "";
								position: absolute;
								width: 100%;
								border-radius: 12px 12px 0 0;
								height: calc(100% + 12px);
								left: 0;
								right: 0;
								bottom: 0;
								background: linear-gradient(135deg, #FF6B6B 0%, #FF8A5A 45%, #FF7A00 100%);
							}

							span {
								font-size: 110%;
								transform: translateY(-6px);
							}
						}



						&:nth-child(3) {
							background: #32c8f8;
						}


						&:nth-child(4) {
							background: #36dc94;
						}


						&:last-child {
							background: #66a9f6;
							border: none;
							border-radius: 0 12px 0 0;
						}

					}
				}


				tbody {

					tr {

						&:nth-child(even) {

							th,
							td {
								background: #fafafa;
							}
						}

						th {
							font-weight: 700;
							color: var(--black);
							text-align: left;
							font-size: 1.6rem;
							padding: 10px 25px;
							min-height: 68px;
						}

						td {
							color: var(--gray);
							text-align: center;

							p {
								font-size: 1.4rem;
								padding: 0.5em 0;
							}

							span {
								display: flex;
								flex-direction: column;
								align-items: center;

								img {
									width: 100%;
									max-width: 30px;
									aspect-ratio: 1/1;

								}

							}

							small {
								display: inline-block;
								margin-top: 0.5em;
								font-size: 1.2rem !important;
								line-height: 1.4;
								display: inline-block;
							}

							&:last-child {
								border: none;
							}
						}

						td.pkb {
							border-left: 4px solid #FF7A00;
							border-right: 4px solid #FF7A00;
							font-weight: 600;
							font-size: 1.3rem;
							color: var(--black);

							small {
								color: var(--black);

							}
						}

						&:last-child {

							th,
							td {
								border-bottom: none;
							}

							td:nth-child(2) {
								border-bottom: 4px solid #FF7A00;
							}
						}
					}
				}



				small {
					display: inline-block;
					font-size: 1.1rem;
					line-height: 1.5;
					color: #64748B;
				}

				img {
					max-width: 180px;
					height: auto;
				}



			}

			p.info {
				line-height: 1;
				margin-top: 1.5em;

				>span {
					display: flex;
					align-self: center;

					>span {
						width: 15px;
						aspect-ratio: 1/1;
					}
				}
			}

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

				.compare-table {
					margin-top: 2em;

					&,
					tbody,
					tr,
					th,
					td {
						display: block;
						box-sizing: border-box;
					}

					thead {
						display: none;
					}

					tbody>tr {
						width: 100%;
						margin-bottom: 1em;
						border-radius: 10px;
						overflow: hidden;

						&:last-child {
							margin-bottom: 0;
						}

						>th {
							width: 100%;
							padding: 10px 25px;
							border: 0;
							background: linear-gradient(135deg, #FF6B6B 0%, #FF8A5A 45%, #FF7A00 100%) !important;
							text-align: left;
							display: flex;
							align-items: center;
							color: white;
							font-size: 1.8rem;

							br {
								display: none;
							}
						}

						>td {
							width: 100%;
							padding: 15px 25px;
							border: 0;
							border-bottom: 1px solid #eee !important;
							text-align: left;

							p {
								font-size: 1.2rem;
								padding: 0;
								padding-top: 0.5em;

								br {
									display: none;
								}
							}

							span {
								margin-top: 1em;
								display: flex;
								flex-direction: row;
								justify-content: flex-start;
								text-align: left;
								align-items: center;
								padding-left: 0.2em;

								img {
									width: 25px;
									margin-right: 10px;
								}

								small {
									margin: 0;
									font-size: 1.2rem;

									br {
										display: none;
									}
								}
							}

							&:last-child {
								border-bottom: 0;
							}

							&::before {
								content: attr(data-label);
								display: block;
								font-size: 1.5rem;
								left: 0;
								top: 0;
								bottom: 0;
								font-weight: bold;
								color: var(--deep-blue);
							}

							&.pkb {
								background: #f0fcff;
								border: none;
								border: 1px solid #FF7A00 !important;

								&::before {
									color: var(--orange);

								}
							}
						}
					}
				}
			}
		}

		.strengths_box {
			padding: 7.5rem 0;
			background: #EFFBFF;

			position: relative;
			z-index: 1;
			margin-top: 0;

			@media screen and (max-width: 820px) {
				padding: 2em 0;
			}

			@media screen and (max-width: 820px) {
				padding-top: 1em;
			}

			h3 {
				font-size: 3rem;
				text-align: center;

				@media screen and (max-width: 820px) {
					font-size: 3.2vw;
				}

				@media screen and (max-width: 480px) {
					font-size: 5.5vw;
				}

				span {
					color: var(--deep-blue);
				}
			}

			.strengths_content {

				>ul {
					justify-content: space-between;
					margin-top: 3em;
					filter: drop-shadow(0 6px 15px rgba(2, 132, 199, .15));

					@media screen and (max-width: 480px) {
						margin-top: 2em;
					}

					>li {
						width: 32%;
						margin-bottom: 1.5em;
						background: white;
						border-radius: 12px;
						overflow: hidden;


						@media screen and (max-width: 820px) {
							width: 48.5%;
							border-radius: 15px;
						}

						@media screen and (max-width: 480px) {
							width: 100%;
							margin-bottom: 1em;
							border-radius: 10px;

							&:last-child {
								margin-bottom: 0;
							}
						}

						.strengths_img {
							background: #f8fcfd;
							padding: 1em 1em 0;
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							aspect-ratio: 522/251;

							img {
								width: 100%;
								height: 100%;
								object-fit: contain;
								object-position: bottom center;
							}
						}

						.strengths_text {
							padding: 1.5em 2em 2em;

							@media screen and (max-width: 480px) {
								padding: 20px 10px 30px;


							}

							@media screen and (max-width: 480px) {
								padding: 1em 2em 2em;
							}

							h4 {
								text-align: center;
								font-size: 2rem;
								font-weight: 600;
								line-height: 1.6;

								@media screen and (max-width: 820px) {
									font-size: 1.8rem;
									line-height: 3rem;
								}

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

								span {
									color: var(--deep-blue);
								}
							}

							p {
								margin-top: 1.2em;
								font-size: 1.4rem;
								font-weight: 500;
								line-height: 1.8;
								text-align: left;
								color: var(--gray);

								@media screen and (max-width: 820px) {
									margin-top: 1.2em;
									text-align: left;
									font-size: 1.2rem;
									font-weight: 500;
									line-height: 2rem;
								}

								@media screen and (max-width: 480px) {
									font-size: 1.3rem;
									line-height: 1.8;
								}

							}

						}
					}
				}

			}
		}




		.support_flow {
			padding: 7.5rem 0;
			background: #EFFBFF;

			position: relative;
			z-index: 1;
			margin-top: 0;

			@media screen and (max-width: 820px) {
				padding: 2em 0 4em;
			}

			h3 {
				font-size: 3rem;
				text-align: center;

				@media screen and (max-width: 820px) {
					font-size: 3.2vw;
				}

				@media screen and (max-width: 480px) {
					font-size: 5.5vw;
				}

				span {
					color: var(--deep-blue);
				}
			}

			.strengths_content>p {
				text-align: center;
				color: var(--gray);
				font-weight: 500;
				font-size: 1.6rem;
				line-height: 1.6;
				margin-top: 2.5em;

				@media screen and (max-width: 820px) {
					font-size: 1.6vw;
				}

				@media screen and (max-width: 480px) {
					font-size: 1.2rem;
					text-align: left;
				}
			}

			.support_flow_list {
				display: flex;
				list-style: none;
				padding: 0;
				margin-top: 3em;
				justify-content: space-between;
				flex-wrap: wrap;
				counter-reset: support-step;

				@media screen and (max-width: 820px) {
					justify-content: flex-start;
				}

				@media screen and (max-width: 480px) {
					margin-top: 2em;
				}
			}

			.support_flow_item {
				width: calc(100% / 4 - 2em);
				position: relative;
				text-align: center;
				background: white;
				padding: 2em 2em 2em;
				border-radius: 14px;
				counter-increment: support-step;

				&:nth-child(-n+4) {
					margin-bottom: 2em;
				}

				@media screen and (max-width: 820px) {
					width: calc(100% / 2 - 3em);
					margin-right: 3em;

					&:nth-child(-n+3) {
						margin-bottom: 2em;
					}


				}


				&:not(:last-child)::after {
					content: "\f054";
					font-family: "Font Awesome 6 Free";
					font-weight: 900;

					position: absolute;
					top: 50%;
					right: -1em;

					font-size: 1.5em;
					color: #0284C7;

					transform: translateY(-50%);
				}

				@media screen and (max-width: 820px) {
					&:not(:last-child)::after {
						top: 50%;
						right: -1em;

						font-size: 2em;
						transform: translateY(-50%);
					}

				}

				@media screen and (max-width: 480px) {
					&:not(:last-child)::after {
						content: "\f078";
						top: calc(100% + 0.2em);
						right: 0;
						left: 0;
						margin: auto;
						text-align: center;
						font-size: 1.2em;
						transform: none;
					}


				}

			}

			.support_flow_icon {
				width: 8rem;
				aspect-ratio: 1/1;
				margin: 0 auto 15px;
				display: grid;
				place-items: center;
				border-radius: 50%;
				background: #eaf8fc;
				color: #0284C7;
				font-size: 4rem;

			}

			.support_flow_number {
				display: block;
				margin-bottom: 5px;
				font-size: 1.4rem;
				font-weight: 700;
				color: #0284C7;
				font-family: var(--montserrat);

				&::after {
					content: "STEP " counter(support-step, decimal-leading-zero);
				}

				@media screen and (max-width: 480px) {
					font-size: 1rem;
					margin-bottom: 0;
				}
			}

			.support_flow_item h4 {
				font-size: 1.6rem;

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

			.support_flow_item p {
				margin-top: 1.2em;
				color: var(--gray);
				text-align: left;
				font-weight: 500;
				font-size: 1.4rem;
				line-height: 1.6;

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

			.support_flow_summary {
				margin-top: 4em;

				text-align: center;

				@media screen and (max-width: 820px) {
					margin-top: 2.5em;
				}

				@media screen and (max-width: 480px) {
					margin-top: 2em;
				}

				h4 {
					font-size: 2.6rem;
					color: var(--deep-blue);

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

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

					span {
						background: linear-gradient(transparent 72%, rgba(255, 246, 145, 1) 72%);

						@media screen and (max-width: 480px) {
							display: inline-block;
							background: linear-gradient(transparent 80%, rgba(255, 246, 145, 1) 80%);

						}

					}
				}

				p {
					margin-top: 2em;
					font-size: 1.8rem;
					font-weight: 500;
					line-height: 1.8;

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

					@media screen and (max-width: 480px) {
						font-size: 3.7vw;
					}

				}
			}


			@media screen and (max-width: 480px) {

				.support_flow_list {
					grid-template-columns: 1fr;
					gap: 0;
				}

				.support_flow_item {
					width: 100% !important;
					border: none !important;
					border-radius: 10px;
					display: flex;
					margin: 0;
					margin-bottom: 3em !important;
					text-align: left;
					padding: 0;
					justify-content: space-between;

					&:last-child {
						margin-bottom: 0 !important;
					}

				}

				.support_flow_icon {
					background: none;
					margin: 0;
					width: 25%;
					border-radius: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 5rem;

					i {
						margin: 0;
					}
				}

				.support_flow_content {
					padding: 1em 1.5em;
					padding-left: 0;
					width: 75%;

				}


				.support_flow_content h3 {
					margin-bottom: 0;
				}

				.support_flow_item p {
					margin-top: 0.5em;
					font-size: 1.2rem;
				}
			}


		}


	}

	&.faq {
		background: white;

		.faq_box {
			margin-top: 3em;

			@media screen and (max-width: 480px) {
				margin-top: 2em;
			}

			.toc_list {
				list-style: none;
				margin: 0;
				counter-reset: toc;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 0;

				>li {

					width: 49.5%;
					counter-increment: toc;

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

					.paper {
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;
						margin-bottom: 0.8em;
						background: white;
						flex-direction: column;
						align-items: flex-start;
						position: relative;
						counter-increment: step;
						border-radius: 5px;
						overflow: hidden;
						cursor: pointer;

						@media screen and (max-width: 480px) {
							border-width: 2px;
							margin-bottom: 0.5em;
							border-radius: 6px;
						}

						&:hover {
							.title {
								opacity: .7;

							}

							@media screen and (max-width: 480px) {
								.title {
									opacity: 1;
								}
							}
						}

						@media screen and (max-width: 480px) {
							&:active {
								opacity: 0.7;
							}
						}

						* {
							width: 100%;
							text-align: left;
						}

						.title {
							margin: 0;
							background: var(--deep-blue);
							padding: 1em 1.2em;
							position: relative;
							display: flex;
							align-items: center;
							flex-direction: row;
						transition: all .1s;

							@media screen and (max-width: 820px) {
								padding: 1em 1.5em;
							}

							@media screen and (max-width: 480px) {
								padding: 1em 1em;
							}

							::after {
								padding: 1.2em;
								font-family: FontAwesome;
								content: "\f067";
								font-weight: 200;
								color: white;
								position: absolute;
								height: 20px;
								font-size: 2rem;
								right: 0;
								top: 0;
								bottom: 0;
								margin: auto;
								transition: all .5s;
								display: grid;
								place-content: center;
							}

							@media screen and (max-width: 480px) {
								::after {

									padding: 1em;
									font-size: 1.5rem;
									height: auto;
								}
							}

							&.on {
								::after {
									font-family: FontAwesome;
									content: "\f068";
								}
							}


							.img {
								width: 8%;
								background: white;
								aspect-ratio: 1/1;
								border-radius: 50%;
								padding: 6px;
								display: inline-block;
								margin-right: 15px;

								@media screen and (max-width: 820px) {
									width: 40px;
									height: 40px;
									padding: 5px;
								}

								@media screen and (max-width: 480px) {
									width: 30px;
									height: 30px;
									margin-right: 10px;
								}

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

							h3 {
								flex: auto;
								font-size: 2rem;
								text-align: left;
								color: white;

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

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


						.faq_list {
							padding: 0 2em;
							display: none;
							border: 3px solid var(--deep-blue);
							border-top: none;

							&.active {
								display: block;
							}

							@media screen and (max-width: 820px) {
								padding: 0 2em;
							}

							@media screen and (max-width: 480px) {
								padding: 0 1.2em;
							}

							dl {
								@media screen and (max-width: 480px) {
									padding: 0.5em 0;
								}

								dt {
									border-top: 1px solid #e0e0e0;
									padding-top: 2em;
									margin-bottom: 1.5em;

									@media screen and (max-width: 820px) {
										padding-top: 1.5em;
										margin-bottom: 1.2em;
									}

									@media screen and (max-width: 480px) {
										padding-top: 1.5em;
										margin-bottom: 0.5em;
									}

									&:first-child {
										border: none;
									}

									span {
										font-size: 1.6rem;
										display: flex;
										align-items: center;
										font-weight: 600;

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

										@media screen and (max-width: 480px) {
											align-items: flex-start;
											font-size: 1.2rem;
										}

										&::before {
											background: var(--deep-blue);
											color: white;
											display: flex;
											align-items: center;
											justify-content: center;
											border-radius: 50%;
											width: 2.2rem;
											height: 2.2rem;
											padding: 4px;
											content: "Q";
											font-size: 1.6rem;
											font-weight: 700;
											font-family: var(--montserrat);
											margin-right: 10px;
										}

										@media screen and (max-width: 820px) {
											&::before {
												width: 3rem;
												height: 3rem;
												font-size: 1.6rem;
												padding: 0;
											}
										}

										@media screen and (max-width: 480px) {
											&::before {
												height: 2rem;
												width: 2rem;
												font-size: 1.1rem;
												margin-right: 10px;
											}
										}
									}
								}

								dd {
									margin-bottom: 2em;
									padding: 1.5em 2em;
									background: #f8fcfd;
									color: var(--black);
									font-size: 1.4rem;
									font-weight: 500;

									@media screen and (max-width: 820px) {
										padding-bottom: 2em;
										margin-bottom: 2em;
									}

									@media screen and (max-width: 480px) {
										padding: 1em 1.5em;
										padding-left: 3rem;
										padding-top: 0;
										margin-bottom: 0;
									}

									p {
										color: var(--black);
										font-weight: 500;
										font-size: 1.4rem;
										line-height: 2.6rem;

										@media screen and (max-width: 820px) {
											font-size: 1.2rem;
											line-height: 2rem;
										}

										@media screen and (max-width: 480px) {
											font-size: 1.1rem;
											line-height: 2rem;
										}

									}

									ul {
										list-style-type: initial;
										padding-left: 1.6em;
										margin: 1em 0;

										@media screen and (max-width: 820px) {
											margin: 0.5em 0;
										}

										@media screen and (max-width: 820px) {
											padding-left: 1em;
										}

										li {
											line-height: 1.6;
											font-weight: 600;
											font-size: 1.5rem;
											color: var(--deep-blue);

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

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

					}
				}

			}

			.catch {
				text-align: center;
				margin-top: 3em;

				@media screen and (max-width: 480px) {
					margin-top: 2em;
				}

				p {
					font-size: 1.8rem;
					line-height: 3.4rem;
					margin-bottom: 2em;

					@media screen and (max-width: 820px) {
						font-size: 1.8rem;
						line-height: 3rem;
					}

					@media screen and (max-width: 480px) {
						font-weight: 500;
						line-height: 2;
						margin-bottom: 0;
					}

					span {
						font-weight: 600;
						color: var(--new-blue);
					}
				}

				strong {
					color: var(--deep-blue);
					font-size: 3.2rem;
					line-height: 1.6;

					@media screen and (max-width: 820px) {
						font-size: 3.2vw;
					}

					@media screen and (max-width: 480px) {
						font-size: 4.8vw;
					}

					span {
						font-size: 125%;
						background: linear-gradient(90deg, #05D3CB 0%, #09B4F3 60%, #0AADFC 100%);
						display: inline-block;
						margin: 0 auto;
						color: white;
						padding: 10px 15px 12px;
						margin-right: 5px;

						@media screen and (max-width: 820px) {
							display: inline-block;
							margin-top: 10px;
						}

						@media screen and (max-width: 480px) {
							font-size: 125%;
							letter-spacing: 0.1em;
							padding: 3px 12px 4px;
							margin: 0;
							margin-right: 2px;
						}
					}
				}


			}

		}

	}


	&.news {
		background: #F8FAFC;

		.news_box {
			max-width: 880px;
			margin: 0 auto;

			ul {
				display: block;

				li {
					width: 100%;
					display: grid;
					grid-template-columns: 85px 90px 1fr;
					align-items: center;
					column-gap: 10px;
					padding: 2em 0;
					border-bottom: 1px solid #e3e3e3;

					@media screen and (max-width: 480px) {
						display: flex;
						justify-content: flex-start;
						flex-wrap: wrap;
						padding: 1em 0;
					}

					&:last-child {
						border: none;
					}

					* {
						font-size: 1.5rem;
						font-weight: 500;

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

					span {
						background: var(--deep-blue);
						color: white;
						display: inline-block;
						border-radius: 2px;
						padding: 2px 6px 3px;
						font-size: 1.3rem;
						margin-right: 12px;

						@media screen and (max-width: 480px) {
							margin-right: 5px;
							font-size: 1rem;
						}

						&.news_category_case {
							background: var(--orange);
						}

						&.news_category_update {
							background: #2dc1d8;
						}
					}

					time {
						font-family: var(--montserrat);
						color: var(--gray);
						margin-right: 12px;
						text-align: left;

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

					a {
						font-size: 1.6rem;
						color: var(--black);
						text-align: left;
						text-decoration: underline;
						transition: all .1s;

						@media screen and (max-width: 480px) {
							width: 100%;
							display: block;
							margin-top: 5px;
							font-size: 1.3rem;
							line-height: 1.5;
						}

						&:hover {
							opacity: 0.7;
							color: var(--orange);
						}
					}
				}
			}
		}
	}

	&.request {
		background: var(--white-blue);

		.request_box {
			@media screen and (max-width: 480px) {
				margin-top: 2em;
			}

			ul {
				justify-content: flex-start;
				width: 100%;
				display: flex;

				@media screen and (max-width: 480px) {
					justify-content: space-between;
				}

				li {
					overflow: hidden;
					background: white;
					border-radius: 15px;
					width: calc(100% / 3 - 16px);
					margin-right: 24px;
					display: flex;
					flex-direction: column;

					&:nth-child(3n) {
						margin-right: 0;
					}

					@media screen and (max-width: 480px) {
						width: 49%;
						border-radius: 6px;
						margin: 0;
						margin-bottom: 0.5em;
					}

					.img {
						width: 100%;
						aspect-ratio: 2560/1809;
						border-bottom: 1px solid #e2e8f0;

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

					.text {
						flex-grow: 1;
						text-align: left;
						display: flex;
						flex-direction: column;
						padding: 1em 1.5em 1.5em;

						@media screen and (max-width: 480px) {
							padding: 1em;
						}

						h3 {
							font-size: 1.7rem;
							font-feature-settings: "palt";
							color: var(--deep-blue);

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

						p {
							font-size: 1.4rem;
							margin-top: 1.5em;

							@media screen and (max-width: 480px) {
								margin-top: 1em;
								font-size: 1.0rem;
							}
						}

						.buttons {
							padding-top: 1.5em;
							margin-top: auto;

							@media screen and (max-width: 480px) {
								padding-top: 1em;
							}

							a {
								display: block;
								height: 100%;
								width: 100%;

								@media screen and (max-width: 480px) {
									padding: 4px 5px 5px;

									span {
										font-size: 1.2rem;
									}
								}
							}
						}
					}
				}
			}
			.buttons{
				margin-top: 4em;
			}
		}
	}

	&.inquiry {
		background: var(--light-blue);

		.contact_box {
			margin-top: 3em;
			border-radius: 30px;
			display: block;
			padding: 4em 5em 5em;
			border-radius: 21px;
			position: relative;
			width: 100%;
			background: white;
			word-break: break-all;
			word-wrap: break-all;

			@media screen and (max-width: 480px) {

				margin-top: 2em;
				padding: 2em 2em 2em;
				border-radius: 12px;
			}

			form {

				table {

					border-collapse: collapse;
					width: 100%;
					table-layout: fixed;
					word-break: break-all;
					word-wrap: break-all;

					@media screen and (max-width: 820px) {
						display: block;
						box-sizing: border-box;

					}

					thead,
					tbody {
						@media screen and (max-width: 820px) {
							display: block;
							box-sizing: border-box;

						}
					}

					tr {
						@media screen and (max-width: 820px) {
							box-sizing: border-box;
							display: block;
						}

						&.options {

							td {

								>small {
									display: inline-block;
									margin-top: 10px;
								}

								input {
									margin-right: 10px;
								}

								label {

									display: flex !important;
									margin: 0 !important;
									padding: 8px 5px !important;
									line-height: 2rem;
									align-items: flex-start !important;

									img {
										margin-left: 5px;
										width: 18px;
										height: 100%;
									}

									small {
										color: #7c7c7c;
										font-weight: 500;
										font-size: 1.1rem;
										line-height: 1.6rem;
									}

									a:hover {
										opacity: .7;
									}

								}

							}

						}


						&:last-child {

							th,
							td {
								border: none;
							}

						}


						th,
						td {

							border-bottom: 1px solid #e3e3e3;
							padding: 15px 0;
							vertical-align: middle;

							@media screen and (max-width: 820px) {
								display: block;
								width: 100%;
								min-width: 0;
								max-width: 100%;
								box-sizing: border-box;

							}
						}


						td {

							&:nth-child(3) {
								width: 20%;
							}

							>span {
								display: inline-block;
								padding-left: 20px;
								font-size: 1.2rem;
								line-height: 2.1rem;
							}

							.small {
								width: 100%;
								display: inline-block;
							}

						}


						th {

							font-size: 1.5rem;
							letter-spacing: .05em;
							line-height: 2.5rem;
							font-weight: 700;
							width: 25%;
							margin-right: 20px;
							min-width: 350px;

							@media screen and (max-width: 820px) {
								width: auto;
								min-width: 0;
								font-size: 1.4rem;
							}

							div {

								display: flex;
								align-items: center;

								span {
									display: inline-block;
								}

							}


							em {

								font-style: normal;
								background: var(--deep-blue);
								color: white;
								font-size: 1.1rem;
								padding: 1px 10px 2px;
								border-radius: 5px;
								margin-right: 10px;
								font-weight: 700;
								letter-spacing: 0;
								display: inline-block;

							}

						}


					}

				}

			}

			input,
			textarea,
			select {

				float: none;
				width: 100%;
				max-width: 100%;
				margin: .5rem 0;
				padding: 15px 10px;
				border-radius: .3rem;
				background: #f6f6f6;
				font-weight: 500;
				outline: none;
				border: none;
				box-shadow: none;
				font-size: 1.6rem;
				transition: all .1s;
				color: #000;

			}


			select {
				width: auto;
			}


			textarea {
				width: 94% !important;
			}


			.on_focus {

				background: white;
				outline: var(--deep-blue) solid 2px;

			}


			input {

				&[type=radio],
				&[type=checkbox] {

					margin-right: 5px;
					width: auto;

					&.on_focus {
						background: none;
						outline: none;
					}

				}

			}


			input,
			textarea {

				&::placeholder {

					color: #9f9f9f;
					font-size: 1.4rem;

				}

			}


			.spotnum,
			.period,
			.people {

				input[type=text] {

					width: 5em;
					max-width: 100%;
					margin-right: 10px;
					height: 50px;

				}

			}


			.people {

				input[type=text] {
					margin-left: 10px;
				}

			}


			.spotnum,
			.term,
			.period {

				select {

					margin-right: 10px;
					height: 50px;

				}

			}


			.spotnum {

				select {
					width: auto;
				}

			}


			form#mailformpro {

				.term {

					td>div {

						display: flex;
						flex-wrap: wrap;

					}

				}


				.people,
				.term {

					label {

						display: flex;
						align-items: center;
						width: auto;
						margin-right: 5px;

					}

				}


				.period {

					label {

						&.mfp_not_checked,
						&.mfp_checked {

							padding: 15px 0;
							margin-left: 20px;

						}

					}

				}


				label {

					font-size: 1.5rem;
					margin: 0;
					display: block;


					&.mfp_not_checked,
					&.mfp_checked {

						padding: 3px 5px;
						border: none;

					}


					&.mfp_checked {

						background: none;
						box-shadow: none;

					}

				}

			}


			@media screen and (max-width: 820px) {

				form {
					table {

						tr {

							padding: 10px 0;


							th {

								margin-right: 0;
								width: 100%;
								border-bottom: none;
								margin-bottom: 0;
								padding: 15px 0 0;


								br {
									display: none;
								}

							}

						}

					}

				}
			}


			@media screen and (max-width: 480px) {

				form table tr {

					td {

						margin-bottom: 0;

						.small {
							margin-top: 10px;
						}

					}

				}


				form#mailformpro label {

					white-space: normal;

				}

			}


			.contact_buttons_box {
				margin-top: 1.5em;
				background: #EFFBFF;
				border-radius: 16px;
				padding: 3em 4.5em;
				text-align: center;

				@media screen and (max-width: 820px) {
					border-radius: 10px;
					padding: 2em 2.5em;
				}

				@media screen and (max-width: 480px) {
					margin-top: 1em;
					border-radius: 6px;
					padding: 1.5em 1.2em;
				}

				h3 {
					color: var(--deep-blue);
					font-size: 2.6rem;

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

					@media screen and (max-width: 480px) {
						font-size: 5vw;
					}
				}

				.contact_buttons_content {
					margin-top: 1.5em;

					>p {
						font-size: 2rem;

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

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

					.buttons {
						margin-top: 2em;
						display: flex;
						justify-content: space-between;
						gap: 1em;

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

						a {
							display: block;

							align-items: center;
							justify-content: center;
							gap: .6em;
							color: white;
							padding: 1em 1.5em;
							border-radius: 999px;

							background: linear-gradient(90deg, #0369A1 0%, #0284C7 45%, #38BDF8 100%);

							@media screen and (max-width: 480px) {
								gap: .3em;
							}

							span {
								font-size: 1.6rem;
							}
						}
					}

					.tel {
						margin-top: 2.5em;

						@media screen and (max-width: 480px) {
							margin-top: 1.5em;
						}

						p {
							font-size: 3.8rem;
							font-family: var(--montserrat);
							font-weight: 700;
							background-size: auto 70%;
							background-position: center left;
							display: inline-block;
							padding-left: 35px;
							margin-right: 20px;

							@media screen and (max-width: 480px) {
								padding-left: 0;
								margin-right: 0;
								font-size: 2.6rem;
							}

							i {
								font-size: 90%;
								color: var(--deep-blue);

							}

						}

						small {
							font-size: 1.4rem;
							font-weight: 600;
						}
					}
				}
			}

		}

	}

}