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


:root {
	--paper: #11C6CE;
	--mobile: #02ACFD;
	--str-navy: #025AAD;
}


/*root*/
/*------------------------------------------------------------*/
/* 子供向けデジタルスタンプラリーはどんなものがいい？                                        */
/*------------------------------------------------------------*/

.for_kids_page {
	width: 100%;
	overflow: hidden;

	h2 {
		position: relative;
		z-index: 10;
		height: 100px;
		display: grid;
		place-content: center;

		&::before {
			position: absolute;
			z-index: 5;
			content: "STAMPRALLY FOR KIDS";
			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;
		}

		strong {
			font-size: 2.6rem;
			z-index: 10;
			line-height: 2.6rem;
			position: relative;

			@media screen and (max-width: 820px) {
				br {
					display: none;
				}
			}

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

section {
	&.for_kids {
		background: linear-gradient(-125deg, #0AADFC 0%, #09B4F3 40%, #05D3CB 100%);
		margin: 0 auto;
		padding: 72px 0 0;
		z-index: 2;
		position: relative;

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

		&::before,
		&::after {
			position: absolute;
			content: "";
			background: #EFFBFF;
			bottom: -1px;
			margin: auto;
			width: 50%;
			height: 145px;
		}

		&::before {
			clip-path: polygon(0 0, 100% calc(100% - 1px), 100% 100%, 0% 100%);
			left: 0;
		}

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

		h3 {
			text-align: center;

			span {
				color: white;
				position: relative;
				font-size: 2.4rem;

				&::after {
					position: absolute;
					content: "";
					background: url(../img/forkids/midashi1.png) no-repeat;
					background-size: contain;
					width: 17px;
					aspect-ratio: 17/21;
					left: 104%;
					top: -5px;
					margin: auto;
				}
			}
		}

		.for_kids_box {
			margin-top: 30px;
			background: white;
			border-radius: 15px;
			overflow: hidden;
			display: flex;
			justify-content: space-between;

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

			.list {
				width: 62%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				position: relative;

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

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

				&::before,
				&::after {
					position: absolute;
					content: "";
					height: 100%;
					width: 92%;
					background: #DBF6FC;
					background-size: cover;
				}


				&::after {
					clip-path: polygon(100% 50%, 0 0, 0 100%);
					width: 8%;
					aspect-ratio: 58/247;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
				}

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

					&::after {
						aspect-ratio: auto;
						width: 50px;
						height: 30px;
						top: 100%;
						right: 0;
						left: 0;
						bottom: auto;
						clip-path: polygon(50% 100%, 0 0, 100% 0);
					}
				}

				@media screen and (max-width: 820px) {
					&::after {
						width: 35px;
						height: auto;
						aspect-ratio: 2/1;
					}

				}

				ol {
					position: relative;
					z-index: 2;
					padding: 0;
					padding: 49px 70px;
					padding-right: 20px;
					list-style-type: none;
					text-align: left;
					width: calc(70% - 90px);

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

					@media screen and (max-width: 480px) {
						width: 100%;
						padding: 0;
						margin: 20px 0 30px;
					}

					li {
						display: flex;
						align-items: flex-start;
						margin-bottom: 25px;

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

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

						span {
							width: 26px;
							height: 26px;
							border-radius: 100px;
							font-size: 1.7rem;
							line-height: 3rem;

							color: white;
							background: var(--new-blue);
							display: flex;
							align-items: center;
							justify-content: center;
							margin-top: 0.3rem;
							margin-right: 10px;
							font-weight: 500;
							font-family: var(--montserrat);

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

						p {
							text-align: left;
							font-size: 1.8rem;
							line-height: 3rem;
							font-weight: 500;
							letter-spacing: 0.06em;

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

								br {
									display: none;
								}
							}

							@media screen and (max-width: 480px) {
								width: calc(100% - 40px);
								font-size: 3.8vw;
								line-height: 5.7vw;
							}
						}
					}
				}

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

					display: inline-block;
					width: 24%;
					height: 100%;

					@media screen and (max-width: 480px) {
						width: calc(100% - 80px);
						margin-top: 30px;
						margin-bottom: 10px;
					}

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

			.text {
				width: 38%;
				display: flex;
				align-items: center;

				@media screen and (max-width: 1200px) {
					width: 100%;
					padding: 60px 40px;
				}

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

				p {
					margin-left: 30px;
					font-size: 1.8rem;
					letter-spacing: 0.06em;
					line-height: 2.8rem;
					font-weight: 500;

					@media screen and (max-width: 1200px) {
						text-align: center;
						padding: 0;
						width: 100%;

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

					@media screen and (max-width: 480px) {
						margin: 0;
						font-size: 3.8vw;
						line-height: 5.6vw;
					}

					strong {
						display: inline-block;
						margin-top: 4px;
						font-size: 2.1rem;
						line-height: 3.4rem;
						font-weight: 600;

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

						span {
							color: var(--new-blue);
							display: inline-block;
							position: relative;

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

							&::before {
								position: absolute;
								content: "";
								width: 100%;
								height: 10px;
								background: #EBF9FF;
								bottom: 0;
								left: 0;
								right: 0;
								margin: auto;
							}

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

			}
		}

		.for_kids_info {
			margin-top: 50px;
			display: flex;
			position: relative;
			z-index: 2;

			@media screen and (max-width: 1200px) {
				margin-top: 35px;
				padding-bottom: 120px;
			}

			@media screen and (max-width: 480px) {
				flex-direction: column;
				padding-bottom: 0;
			}

			.text {
				flex-grow: 1;
				max-width: 75%;
				margin-top: 43px;

				@media screen and (max-width: 1200px) {
					max-width: 100%;
					margin-top: 0;
					text-align: center;
				}

				p {
					letter-spacing: 0.06em;
					font-weight: 600;
					font-size: 2rem;
					color: white;

					span {
						font-size: 2.2rem;
						position: relative;
						display: inline-block;

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

						&::before,
						&::after {
							position: absolute;
							content: "";
							width: 100%;
							height: 1px;
							background: white;
							bottom: -2px;
							left: 0;
							right: 0;
							margin: auto;
						}

						&::after {
							bottom: -5px;

						}

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

							&::after {
								bottom: 3px;
							}
						}
					}
				}

				h4 {
					margin-top: 20px;
					color: var(--new-blue);
					font-weight: 600;
					font-size: 2.6rem;
					letter-spacing: 0.06em;

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

					span {
						display: inline-block;
						padding: 4px 12px 6px;
						background: white;
						line-height: 4rem;

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

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

					}
				}
			}

			.img {
				width: 35%;
				margin-bottom: -50px;

				@media screen and (max-width: 1200px) {
					display: none;
				}

				@media screen and (max-width: 480px) {
					display: block;
					margin: 0 auto;
					margin-top: 20px;
					width: 80%;
				}

				img {
					filter: drop-shadow(20px 43px 46px rgba(0, 0, 0, 0.1));
					transform: translateZ(0);

				}

			}
		}
	}

	&.for_kids_plan {
		background: #EFFBFF;
		padding: 60px 0;
		position: relative;
		z-index: 1;

		.title {
			text-align: center;

			picture {
				margin: 0 auto;
				display: block;
				width: 276px;
				aspect-ratio: 276/124;

				@media screen and (max-width: 1200px) {
					width: 200px;
				}

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

			h3 {
				margin-top: 18px;
				display: inline-block;
				width: auto;
				font-size: 2.4rem;
				letter-spacing: 0.06em;
				font-weight: 600;
				position: relative;

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

				&::before,
				&::after {
					position: absolute;
					content: "";
					height: 3.5rem;
					width: 4px;
					border-radius: 2px;
					background: var(--new-blue);
					bottom: 0;
					margin: auto;
					transform-origin: bottom center;
				}

				&::before {
					right: calc(100% + 15px);
					transform: rotate(-40deg);
				}

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

					&::before {
						right: calc(100% + 5px);
					}

				}

				&::after {
					left: calc(99%);
					transform: rotate(40deg);
				}

				span {
					position: relative;
					color: var(--new-blue);

					@media screen and (max-width: 480px) {
						font-size: 2.3rem;
						margin-bottom: 5px;
						display: inline-block;
					}

					&::before {
						position: absolute;
						content: "";
						width: 100%;
						height: 8px;
						background: #CBEEFF;
						bottom: 0;
						left: 0;
						right: 0;
						margin: auto;
					}

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

		}

		.for_kids_plan_list {
			margin-top: 120px;

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

			ol {
				padding: 0;
				margin: 0;
				list-style-type: none;
				counter-reset: plan-counter;

				/* カウンター初期化 */
				li {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 100px;
					@media screen and (max-width: 480px) {
						margin-bottom: 50px;
					}
					&:nth-child(even) {
						flex-direction: row-reverse;
					}

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

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


					.img {
						/* background: #025AAD; */
						width: 43%;
						display: flex;
						align-items: center;

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

						picture {
							display: inline-block;
							width: 100%;
							aspect-ratio: 530/400;

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

					.text_box {
						background: white;
						width: 53.5%;
						border-radius: 29px;
						padding: 50px 65px 45px;
						position: relative;

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

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

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

						}

						.text {
							text-align: left;

							h4 {
								font-size: 2.2rem;
								font-weight: 600;
								letter-spacing: 0.04em;

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

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

							p {
								font-size: 1.4rem;
								font-weight: 500;
								line-height: 2.5rem;
								letter-spacing: 0.06em;
								margin-top: 30px;

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

							.buttons {
								margin-top: 45px;
								display: flex;
								justify-content: space-between;

								@media screen and (max-width: 1200px) {
									flex-direction: column;
									margin-top: 25px;
								}

								a {
									border-color: var(--new-blue);
									margin: 0;
									width: 48.5%;
									text-align: center;
									padding: 15px;
									padding-left: 35px;

									@media screen and (max-width: 1200px) {
										width: 100%;
										margin-bottom: 10px;
									}

									span {
										font-size: 1.6rem;
									}

								}
							}
						}
					}
				}

				>li {
					counter-increment: plan-counter;
					/* カウンター加算 */
					position: relative;
				}

				.num::before {
					content: counter(plan-counter, decimal-leading-zero);
					/* 01, 02 形式で表示 */
					font-weight: bold;
					display: inline-block;
					position: absolute;
					font-size: 5.8rem;
					line-height: 5.8rem;
					font-weight: 700;
					color: var(--new-blue);
					left: 0;
					top: -2.8rem;
					margin: auto;
					font-family: var(--montserrat);
					letter-spacing: 0.06em;
				}
			}
		}

	}


	&.attention {
		background: #CFF4FC;
		padding: 85px 0;

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

		.attention_content {
			position: relative;

			&::after {
				position: absolute;
				content: "";
				background: url(../img/forkids/attention.png) no-repeat;
				width: 100px;
				aspect-ratio: 1/1;
				background-size: contain;
				top: -55px;
				right: 55px;
				margin: auto;
			}

			@media screen and (max-width: 480px) {
				&::after {
					width: 55px;
					right: 20px;
					top: -20px;
				}

			}

			.title {
				border-radius: 15px 15px 0 0;
				background: white;

				padding: 60px 70px;
				text-align: center;

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

				h3 {
					display: inline-block;
					width: auto;
					font-size: 2.4rem;
					letter-spacing: 0.06em;
					line-height: 4rem;
					font-weight: 600;
					position: relative;

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

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

					&::before,
					&::after {
						position: absolute;
						content: "";
						height: 5rem;
						width: 4px;
						border-radius: 2px;
						background: var(--new-blue);
						bottom: 0;
						margin: auto;
						transform-origin: bottom center;
					}

					&::before {
						right: calc(100% + 15px);
						transform: rotate(-40deg);
					}

					&::after {
						left: calc(99%);
						transform: rotate(40deg);
					}


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

						&::before,
						&::after {
							height: 10vw;
							bottom: -4vw
						}

						&::before {
							right: auto;
							left: 30px;
						}

						&::after {
							left: auto;
							right: 30px;
						}

					}

					span {
						position: relative;
						color: var(--new-blue);

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

						}

						&::before {
							position: absolute;
							content: "";
							width: 100%;
							height: 8px;
							background: #CBEEFF;
							bottom: 0;
							left: 0;
							right: 0;
							margin: auto;
						}

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

				p {
					font-weight: 500;
					font-size: 1.6rem;
					margin-top: 35px;

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

			}

			.attention_text {
				padding: 50px;
				background: #F0FCFF;
				text-align: center;
				border-radius: 0 0 15px 15px;
				overflow: hidden;
				@media screen and (max-width: 480px) {
					padding: 30px 25px;
					text-align: left;
				}
				p {
					font-size: 1.6rem;
					font-weight: 500;
					line-height: 3.4rem;
					@media screen and (max-width: 480px) {
						font-size: 1.4rem;
						line-height: 3rem;
					}
				}
			}
		}

		/* .attention_list {
			margin-top: 100px;

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

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

			.attention_box {
				margin-bottom: 57px;

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

				h4 {
					font-weight: 600;
					letter-spacing: 0.06em;
					font-size: 2rem;
					line-height: 2.1rem;
					position: relative;
					padding-left: 15px;

					@media screen and (max-width: 480px) {
						font-size: 1.8rem;
						line-height: 3rem;
						padding-left: 0;
						text-align: center;

						&::before {
							display: none;
						}
					}

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

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

					&::before {
						position: absolute;
						content: "";
						background: var(--new-blue);
						height: 2.1rem;
						width: 5px;
						left: 0;
						top: 0;
						margin: auto;
					}
				}

				ul {
					margin-top: 20px;
					background: #EFFAFF;
					border-radius: 8px;
					display: flex;
					justify-content: space-between;

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

					li {
						width: calc(100% / 3);
						padding: 0 50px;
						margin: 40px 0;
						text-align: left;
						border-right: 1px solid #C3EBFF;

						@media screen and (max-width: 820px) {
							padding: 0;
							margin: 0 auto;
							padding: 40px 0;
							width: calc(100% - 100px);
							border: none;
							border-bottom: 1px solid #C3EBFF;

						}

						@media screen and (max-width: 480px) {
							width: calc(100% - 80px);
							padding: 30px 0;

						}

						&:last-child {
							border: none;
						}

						h5 {
							background: var(--new-blue);
							text-align: center;
							padding: 7px 12px 8px;
							border-radius: 4px;
							display: inline-block;
							width: auto;

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

							span {
								display: inline-block;
								color: white;
								font-size: 1.6rem;

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

						p {
							margin-top: 15px;
							font-size: 1.4rem;
							font-weight: 500;
							line-height: 2.5rem;
							letter-spacing: 0.06em;

							@media screen and (max-width: 820px) {
								br {
									display: none;
								}
							}

							@media screen and (max-width: 480px) {
								font-size: 1.4rem;
								line-height: 2.2rem;
							}
						}
					}
				}
			}
		} */

	}
}

.lightboxOverlay {
	z-index: 10001;
}

.lightbox {
	z-index: 10002;
}