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


:root {
	--paper: #3B9CC7;
	--mobile: #FF7025;

	--text: #024B64;
}

body {
	width: 100%;
}

ol {
	padding: 0;
}

* {
	letter-spacing: 0.03em;
}

/*root*/
/*------------------------------------------------------------*/
/* デジタルスタンプラリーのツール選びで確認したい6つのポイント                                   */
/*------------------------------------------------------------*/
.select_page h2::before {
	position: absolute;
	z-index: 5;
	content: "EXPERIENCE";
	font-size: 10rem;
	line-height: 10rem;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	color: #F0F0F0;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 700;
}

.select_page h2 {
	position: relative;
	z-index: 10;
	height: 100px;
	place-content: center;
}

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


section {
	width: 100vw;
	/* overflow-x: hidden; */

	h2,
	h3,
	h4,
	h5,
	h6,
	p {
		color: var(--text);
	}

	&.premise {
		background: linear-gradient(90deg, #05D3CB 0%, #09B4F3 60%, #0AADFC 100%);

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

		.premise_box {
			padding: 75px 0 140px;

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

			}

			@media screen and (max-width: 480px) {
				padding-bottom: 65px;

			}



			.title {
				text-align: center;

				h3 {

					span {
						position: relative;
						color: white;
						font-size: 3.2rem;
						font-weight: 600;
						letter-spacing: 0.01em;
						display: inline-block;

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

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

						strong {
							letter-spacing: 0.06em;

							margin-top: 6px;
							display: inline-block;
							background: white;
							color: var(--new-blue);
							padding: 1px 10px 5px;
							margin: 0 5px;
							font-size: 3.5rem;

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

							@media screen and (max-width: 480px) {
								padding: 3px 11px 5px;
								font-size: 6vw;
								display: inline-block;
							}
						}

						&::before,
						&::after {
							position: absolute;
							content: "";
							width: 68px;
							aspect-ratio: 68/71;
							bottom: -5px;
							margin: auto;
						}


						&::before {
							background: url(../img/effect/effect_left.svg) no-repeat;
							background-size: contain;
							right: 105%;
						}

						&::after {
							background: url(../img/effect/effect_right.svg) no-repeat;
							background-size: contain;
							left: 105%;
						}

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

							&::before,
							&::after {
								width: 40px;
								bottom: -20px;
							}

							&::before {
								right: auto;
								left: -20px;
							}

							&::after {
								left: auto;
								right: -20px;
							}

						}



					}
				}
			}


			.text {
				margin-top: 3em;

				p {
					text-align: center;
					color: white;
					font-weight: 500;
					font-size: 1.6rem;
					line-height: 3rem;

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

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

	}

	&.points {
		padding: 75px 0;
		position: relative;
		background: #EFFBFF;

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

		&::before,
		&::after {
			position: absolute;
			content: "";
			width: 50%;
			height: 125px;
			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);
		}

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

			&::before,
			&::after {
				height: 45px;
			}
		}

		.points_box {

			.title {

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

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

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

					span {
						color: var(--new-blue);
						font-size: 125%;
						font-family: var(--montserrat);
						font-weight: 700;

					}
				}
			}

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

				p {
					text-align: center;
					font-size: 1.6rem;
					font-weight: 500;
					letter-spacing: 0.04em;
					line-height: 3.4rem;

					@media screen and (max-width: 820px) {
						font-size: 1.4rem;
						line-height: 2.6rem;

						br {
							&.pc {
								display: none;
							}
						}
					}

					@media screen and (max-width: 480px) {
						text-align: left;
						font-size: 3.2vw;
						line-height: 6vw;
					}

				}
			}

			.points_list {
				margin-top: 3em;

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

				ol {
					width: 100%;
					display: flex;
					justify-content: space-between;
					padding: 0;
					flex-wrap: wrap;
					counter-reset: point;

					li {
						width: calc(100% / 3 - 0.75em);
						background: white;
						margin-bottom: 1.5em;
						border-radius: 10px;
						overflow: hidden;
						counter-increment: point;
						display: flex;
						flex-direction: column;

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

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

						.img {
							aspect-ratio: 7/3;
							overflow: hidden;
							display: block;
							width: 100%;

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

						.text {
							position: relative;
							z-index: 1;
							padding: 2em;
							flex-grow: 1;

							&::before {
								content: counter(point, decimal-leading-zero);

								position: absolute;
								top: calc(50% - 8rem);
								right: 0;
								left: 0;
								margin: auto;
								font-size: 16rem;
								font-weight: 600;
								line-height: 1;

								color: rgba(5, 172, 252, .1);
								font-family: var(--montserrat);
								z-index: -1;
							}

							* {
								position: relative;
								z-index: 2;
							}

							h4 {
								color: var(--new-blue);
								margin-bottom: 1.2em;
								font-size: 2.2rem;
								font-weight: 600F;

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

							p {
								text-align: left;
								font-size: 1.4rem;
								line-height: 2.4rem;

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

							}
						}
					}
				}
			}

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

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

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

					@media screen and (max-width: 480px) {
						font-size: 1.4rem;
						line-height: 2.56rem;
						text-align: left;
						margin-bottom: 0;
					}

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

					strong {
						font-size: 125%;

						@media screen and (max-width: 480px) {
							font-size: 105%;

							br {
								display: none;
							}
						}

						span {
							display: inline-block;
							background: white;
							padding: 0.5em;
							font-size: 110%;
							font-weight: 700;
							color: var(--new-blue);

							@media screen and (max-width: 480px) {
								font-size: 100%;
								display: inline;
								background: none;
								padding: 0;
							}

						}
					}
				}
			}
		}
	}

	&.function {
		padding: 75px 0 80px;
		position: relative;
		z-index: 3;
		background: #CFF4FC;

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

		&::before,
		&::after {
			position: absolute;
			content: "";
			width: 50%;
			height: 125px;
			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);
		}

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

			&::before,
			&::after {
				height: 45px;
			}
		}

		.function_box {

			.title {

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

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

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

					span {
						color: var(--new-blue);
						font-size: 125%;
						font-family: var(--montserrat);
						font-weight: 700;

					}
				}
			}

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

				p {
					text-align: center;
					font-size: 1.6rem;
					font-weight: 500;
					letter-spacing: 0.04em;
					line-height: 3.4rem;

					@media screen and (max-width: 820px) {
						font-size: 1.4rem;
						line-height: 2.6rem;

						br {
							&.pc {
								display: none;
							}
						}
					}

					@media screen and (max-width: 480px) {
						text-align: left;
						font-size: 3.2vw;
						line-height: 6vw;
					}

				}
			}

			.function_list {
				margin-top: 3em;

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

				ol {
					width: 100%;
					display: flex;
					justify-content: space-between;
					padding: 0;
					flex-wrap: wrap;

					li {
						width: 24%;
						background: white;
						border-radius: 10px;
						overflow: hidden;
						display: flex;
						flex-direction: column;

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

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

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

						.img {
							margin-top: 1.5em;
							aspect-ratio: 3/2;
							overflow: hidden;
							display: block;
							width: 100%;

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

						.text {
							position: relative;
							z-index: 1;
							padding: 1.5em;
							flex-grow: 1;

							h4 {
								color: var(--new-blue);
								margin-bottom: 1.2em;
								font-size: 1.6rem;
								font-weight: 600;
								margin-bottom: 1em;
							}

							p {
								text-align: left;
								font-size: 1.3rem;
								line-height: 2.4rem;
							}
						}
					}
				}
			}

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

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

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

					strong {
						font-size: 125%;

						span {
							display: inline-block;
							background: white;
							padding: 0.5em;
							font-size: 110%;
							font-weight: 700;
							color: var(--new-blue);
						}
					}
				}
			}
		}
	}



	&.matome {
		background: linear-gradient(90deg, #05D3CB 0%, #09B4F3 60%, #0AADFC 100%);
		padding: 75px 0;

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

		.matome_box {
			padding: 3em 4.5em 4.5em;
			background: white;
			border-radius: 16px;
			text-align: center;

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

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

			h3 {
				color: var(--new-blue);
				font-size: 3rem;

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

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

			}

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

				@media screen and (max-width: 820px) {
					margin-top: 2em;
					font-size: 1.4rem;
					line-height: 3rem;
				}

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

					text-align: left;

					br {
						display: none;

						&.sp {
							display: block;
						}
					}
				}

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

			h4 {
				margin-top: 2.6em;
				position: relative;



				&::after {
					position: absolute;
					content: "";
					height: 1px;
					width: 100%;
					top: 0;
					left: 0;
					bottom: 0;
					margin: auto;
					z-index: 1;
					border-top: 1px solid var(--new-blue);
				}

				span {
					font-size: 2.4rem;
					position: relative;
					z-index: 2;
					color: var(--new-blue);
					background: white;
					padding: 0 20px;

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

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

			}


		}

	}

}