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


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

	--text: #024B64;
}


/*root*/
/*------------------------------------------------------------*/
/* デジタルスタンプラリーで経済効果・費用対効果はあるの？                                     */
/*------------------------------------------------------------*/
.effect_page h2::before {
	position: absolute;
	z-index: 5;
	content: "STAMP RALLY EFFECT";
	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;
}

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

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

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

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

		.overview_box {
			.title {
				text-align: center;

				h3 {

					span {
						position: relative;
						color: white;
						font-size: 2.6rem;
						font-weight: 600;
						letter-spacing: 0.01em;

						@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 20px 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: calc(100% + 25px);
						}

						&::after {
							background: url(../img/effect/effect_right.svg) no-repeat;
							background-size: contain;
							left: calc(100% + 25px);
						}

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

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

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

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

						}



					}
				}
			}

		}

		.effect_box {
			margin-top: 60px;

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

			ul {
				display: flex;
				justify-content: center;
				gap: 4.5rem 2.45%;

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

				li {
					width: 31.7%;
					border-radius: 18px;
					background: white;
					overflow: hidden;

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

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

					picture {
						display: inline-block;
						width: 100%;
						aspect-ratio: 380/190;

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

					figcaption {
						padding: 25px;
						color: var(--text);

						h4 {
							font-weight: 600;
							font-size: 1.8rem;

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

						p {
							font-size: 2.7rem;
							line-height: 1rem;
							letter-spacing: 0.05em;
							vertical-align: bottom;
							font-weight: 500;

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

							span {
								display: inline-block;
								color: var(--new-blue);
								font-family: var(--montserrat);
								font-weight: bold;
								font-size: 4.8rem;
								line-height: 4.8rem;

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

								&.mini {
									font-size: 3.6rem;
									letter-spacing: -0.04em;

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

								small {
									font-size: 81%;
								}
							}
						}

						>small {
							display: inline-block;
							margin-top: 5px;
							font-weight: 600;
							font-size: 1.4rem;
						}
					}
				}
			}
		}
	}

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

		@media screen and (max-width: 820px) {
			padding-bottom: 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);
		}

		.point_box {
			ul.point_list {
				display: flex;
				justify-content: space-between;

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

				li {
					width: 31.6%;

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

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

					figure {
						position: relative;
						z-index: 2;

						figcaption {
							position: relative;
							line-height: 5.4rem;
							z-index: 2;

							.overlap-row {
								position: absolute;
								top: 0;
								bottom: 0;
								left: 0;
								right: 0;
								margin: auto;
								display: flex;
								justify-content: center;
								overflow: hidden;
								/* max-width: 110px; */

								img {
									width: auto;
									height: 54px;
									margin-left: -27px;

									/* 50% 重なり */
									@media screen and (max-width: 480px) {
										height: 4rem;
										margin-left: -2rem;
									}

									&:first-child {
										margin-left: 0;
									}
								}
							}

							h4 {
								position: relative;
								z-index: 2;
								font-size: 2.2rem;
								line-height: 5.4rem;
								letter-spacing: 0.06em;

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

								span {
									color: white;
								}
							}
						}

						picture {
							margin: 0 auto;
							max-width: 185px;
							aspect-ratio: 1/1;
							position: relative;
							z-index: 1;
							display: block;
							margin-top: -24px;

							img {
								width: 100%;
								height: 100%;
							}
						}
					}

					.text {
						position: relative;
						z-index: 1;
						background: white;
						width: 100%;
						padding: 125px 20px 35px;
						border-radius: 18px;
						margin-top: -100px;

						p {
							font-size: 1.8rem;
							font-weight: 600;
							letter-spacing: 0.06em;
							color: var(--text);
							margin-bottom: 10px;
							line-height: 4rem;

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

								br {
									display: none;
								}
							}

							@media screen and (max-width: 480px) {
								line-height: 3.2rem;
								margin-bottom: 20px;

								br {
									display: block;
								}
							}

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

							span {
								font-size: 2rem;

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

								&.price {
									background: linear-gradient(transparent 70%, #DEF7FF 0);
								}

								&.big {
									font-size: 122%;
								}

								&.num {
									font-family: var(--montserrat);
									font-weight: bold;

									&.blue {
										color: var(--new-blue);
									}
								}

								&.num1 {
									font-size: 3.2rem;

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

								&.num2 {
									font-size: 4.8rem;

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

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

			.point_text {
				margin-top: 55px;

				>p {
					text-align: center;

					span {
						font-size: 3.2rem;
						line-height: 4.2rem;
						position: relative;
						letter-spacing: 0.06em;
						color: var(--text);
						font-weight: 600;
						background: linear-gradient(transparent 80%, #CBEEFF 0);

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

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

						&::before,
						&::after {
							position: absolute;
							content: "";
							width: 29px;
							aspect-ratio: 29/32;
							bottom: 0;
							margin: auto;
						}


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

							&::before,
							&::after {
								width: 20px;
							}
						}

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

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

					}
				}

				.paper {
					margin-top: 35px;
					background: white;
					border-radius: 18px;
					overflow: hidden;

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

					h4 {
						background: var(--new-blue);
						color: white;
						text-align: center;
						padding: 18px;
						font-weight: 600;
						font-size: 2.4rem;
						letter-spacing: 0.06em;

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

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

						span {
							color: #FFFF73;

							.num {
								font-family: var(--montserrat);
								font-size: 3.5rem;

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

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

					ul {
						padding: 35px 130px 47px;

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

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

						li {
							text-align: left;
							margin-bottom: 20px;

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

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

							p {
								color: var(--text);
								font-size: 2.2rem;
								font-weight: 600;
								letter-spacing: 0.02em;

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

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

								>span {
									font-weight: 600;

									.blue,
									&.blue {
										color: var(--new-blue);
									}

									.num {
										font-size: 3.6rem;
										font-weight: 700;
										font-family: var(--montserrat);

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

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

			.point_caution {
				text-align: center;
				margin-top: 35px;
				font-size: 1.6rem;
				font-weight: 500;
				color: var(--text);
				letter-spacing: 0.06em;

				@media screen and (max-width: 820px) {
					font-size: 1.4rem;
					text-align: left;
					margin-top: 20px;
					line-height: 2.4rem;
				}

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

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

	&.ingenuity {
		padding: 95px 0;
		background: #CFF4FC;

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

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

		.ingenuity_box {
			padding: 50px 70px 45px;
			background: white;
			border-radius: 15px;
			position: relative;

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

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


			}

			&::after {
				position: absolute;
				content: "";
				background: url(../img/effect/ingenuity.png) no-repeat;
				width: 85%;
				max-width: 100px;
				aspect-ratio: 1/1;
				background-size: 100% 100%;
				top: -35px;
				right: 75px;
				margin: auto;
			}

			@media screen and (max-width: 820px) {
				&::after {
					right: 0;
					max-width: 80px;
				}
			}

			.title {
				text-align: center;

				h4 {
					font-size: 2.6rem;
					font-weight: 600;
					line-height: 4.2rem;

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

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

					>span {
						position: relative;
						display: inline-block;

						.line {
							padding-bottom: 3px;
							background: linear-gradient(transparent 70%, #CBEEFF 0);
						}

						.blue {
							color: var(--new-blue);
						}

						&::before,
						&::after {
							position: absolute;
							content: "";
							width: 61px;
							aspect-ratio: 61/64;
							bottom: 0;
							margin: auto;
							transform-origin: bottom center;
						}

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

							&::before,
							&::after {
								width: 25px;
							}


						}

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

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

			}

			.ingenuity_img {
				margin: 0 auto;
				margin-top: 45px;
				max-width: 980px;

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

			.ingenuity_list {
				margin-top: 45px;
				background: #EFFBFF;
				border-radius: 15px;
				padding: 40px 75px;

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

				@media screen and (max-width: 480px) {
					padding: 25px 20px;
					margin-top: 25px;
				}

				ul {
					width: 100%;

					li {
						text-align: left;
						font-size: 1.8rem;
						letter-spacing: 0.06em;
						line-height: 3.2rem;
						margin-bottom: 20px;
						background: url(../img/effect/check.png) no-repeat;
						background-size: 22px;
						background-position: left 5px;
						padding-left: 32px;
						font-weight: 500;

						@media screen and (max-width: 820px) {
							font-size: 1.6rem;
							line-height: 2.8rem;
							background-size: 18px;
							padding-left: 20px;
						}

						@media screen and (max-width: 480px) {
							font-size: 1.4rem;
							line-height: 2.4rem;
							padding-left: 25px;

						}

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

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

}