@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*/
/*------------------------------------------------------------*/
/* デジタルスタンプラリーで経済効果・費用対効果はあるの？                                     */
/*------------------------------------------------------------*/
.experience_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;
}

.experience_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);
	}

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

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


		.onoff {
			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: 2.6rem;
						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 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: 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;
					}
				}
			}

		}



		.reason {
			position: relative;
			padding: 75px 0;
			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;
				}
			}

			.reason_box {
				.title {
					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);

						}
					}
				}

				.reason_list {
					margin-top: 5.5em;

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

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

					ol {
						list-style-type: none;
						display: flex;
						padding: 0;
						justify-content: space-between;
						counter-reset: reason;
						flex-wrap: wrap;

						>li {
							width: 31.6%;
							display: flex;
							flex-direction: column;
							position: relative;
							counter-increment: reason;

							@media screen and (max-width: 480px) {
								width: 100%;
								background: white;
								align-items: center;
								padding: 1.5em;
								border-radius: 10px;
								margin-bottom: 2em;
								padding: 2.5em;

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

							.reason_num {
								/* @media screen and (max-width: 480px) {
									position: absolute;
								} */

								&::before {
									content: counter(reason, decimal-leading-zero);
									/* 01, 02, 03 */
									font-family: var(--montserrat);
									background: #184183;
									width: 20%;
									color: white;
									font-size: 2.6rem;
									border-radius: 50%;
									max-width: 55px;
									display: flex;
									align-items: center;
									justify-content: center;
									aspect-ratio: 1/1;
									position: absolute;
									left: 0;
									right: 0;
									top: -50px;
									margin: auto;
									font-weight: bold;
									z-index: 3;
								}

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

										width: 2em;
										font-size: 1.6rem;
										top: 1em;
									}
								}
							}

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

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

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

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

								@media screen and (max-width: 480px) {
									width: 105%;
									margin: 0;
									margin-top: 1em;
									padding: 0;
									padding-left: 1em;
									background: none;
								}

								h5 {
									color: var(--new-blue);
									font-size: 2.4rem;
									line-height: 3.2rem;
									font-weight: 600;
									margin-bottom: 1em;

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

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

								ul li,
								p {
									display: block;
									width: 100%;
									text-align: center;
									margin: 0;
									font-size: 1.6rem;
									font-weight: 500;
									line-height: 2.4rem;

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

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

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

									text-align: center;

									strong {
										font-size: 1.8rem;
										color: var(--new-blue);

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

									}
								}
							}
						}
					}

				}
			}
		}


		.entertainment {

			padding: 75px 0 80px;
			background: #CFF4FC;

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

			.entertainment_box {
				position: relative;

				.title {
					h5 {
						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);

						}
					}
				}

				.entertainment_list {
					margin-top: 3em;

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

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

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

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


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

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

							.img {
								background: #EFFBFF;
								padding: 2em 1em;

								img {
									width: 30%;
									margin: 0 auto;
								}
							}

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

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

									padding: 1em 1.5em;
								}

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

								h6 {
									color: var(--new-blue);
									font-size: 1.8rem;

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

								p {
									padding-top: 1em;

									margin-top: 0;
									text-align: left;
									font-size: 1.4rem;
									line-height: 2.4rem;

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

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

								.buttons {
									padding-top: 1em;
									margin-top: auto;
									width: 100% !important;
									display: flex;
									flex-wrap: wrap;
									flex-direction: column;
									justify-content: space-between;
									align-items: center;

									.button {
										text-decoration: none;
										width: 100%;
										margin: 0;
										margin-bottom: 0.5em;
										text-align: center;
										cursor: pointer;
										padding: 12px 30px;
										border-radius: 100px;
										background: var(--deep-blue);
										border: 1px solid var(--deep-blue);
										color: white;
										display: flex;
										justify-content: center;
										align-items: center;
										transition: all .1s;
										font-size: 1.4rem;

										&:hover {
											background: white;
											color: var(--deep-blue);
										}

										&:last-child {
											margin: 0;
										}

										&.button_request {
											background: white;
											color: var(--deep-blue);

											&:hover {
												background: var(--deep-blue);
												color: white;
											}
										}

									}
								}

							}
						}

					}
				}

			}

		}



		.planning {
			padding: 75px 0 80px;
			position: relative;
			z-index: 3;
			background: #EFFBFF;




			&::before {
				position: absolute;
				content: "";
				top: 0;
				left: 0;
				right: 0;
				margin: auto;
				width: 10%;
				aspect-ratio: 1/1;
			}


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

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

			.planning_box {
				.title {
					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);

						}
					}
				}


				.planning_list {
					margin-top: 3em;

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

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

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

						li {
							width: calc(100% / 4 - 0.4em);
							margin-bottom: 0.8em;
							padding: 1em 1em;
							background: white;
							border-radius: 16px;
							border: 8px solid #CFF4FC;
							overflow: hidden;
							display: flex;
							flex-direction: column;


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

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

							h6 {
								color: var(--new-blue);
								font-size: 1.6rem;
								margin-bottom: 1em;
								display: flex;
								justify-content: center;
								align-items: center;

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

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

							.img {
								background: #EFFBFF;
								padding: 1em;

								width: 100%;
								aspect-ratio: 3/2;
								display: flex;
								align-items: center;
								justify-content: center;

								img {
									object-fit: contain;
									width: 75%;
									margin: 0 auto;
								}
							}

							.text {
								display: flex;
								flex-direction: column;
								flex-grow: 1;
								margin-top: 1em;

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

									padding: 1em 1.5em;
								}

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

								h5 {
									font-size: 1.7rem
								}


								p {
									padding-top: 1em;

									margin-top: 0;
									text-align: left;
									font-size: 1.3rem;
									line-height: 2rem;

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

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

								.buttons {
									padding-top: 1em;
									margin-top: auto;
									width: 100% !important;
									display: flex;
									flex-wrap: wrap;
									flex-direction: column;
									justify-content: space-between;
									align-items: center;

									.button {
										text-decoration: none;
										width: 100%;
										margin: 0;
										text-align: center;
										cursor: pointer;
										padding: 12px;
										margin-bottom: 0.5em;
										border-radius: 100px;
										background: var(--deep-blue);
										border: 1px solid var(--deep-blue);
										color: white;
										display: flex;
										justify-content: center;
										align-items: center;
										transition: all .1s;
										font-size: 1.4rem;

										&:hover {
											background: white;
											color: var(--deep-blue);
										}

										&:last-child {
											margin: 0;
										}

										&.button_request {
											background: white;
											color: var(--deep-blue);

											&:hover {
												background: var(--deep-blue);
												color: white;
											}
										}

									}
								}

							}
						}

					}
				}




			}
		}




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

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

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




			.immerse_box {
				.title {
					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);

						}
					}
				}


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


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

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

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

						strong {
							color: var(--new-blue);
							font-size: 105%;

						}
					}
				}

				.immerse_list {
					margin-top: 2.5em;
					text-align: center;

					ol {
						display: flex;
						list-style-type: none;
						justify-content: space-between;
						flex-wrap: wrap;

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

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

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

								margin-bottom: 1em;
							}

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

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

							.img {
								width: 100%;
								aspect-ratio: 16/7;
								overflow: hidden;

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

							.text {
								padding: 2em 3em;

								h5 {
									font-size: 2.1rem;

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

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

									span {
										font-size: 2.2rem;
										color: var(--new-blue);

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

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

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

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

										font-size: 1.2rem;
									}
								}
							}
						}

					}

					.catch {
						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-size: 1.2rem;
								font-weight: 500;
								line-height: 2.4rem;
							}

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

						h5 {
							color: var(--new-blue);
							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 {
								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: 820px) {
									display: inline-block;
									margin-top: 10px;
								}

								@media screen and (max-width: 480px) {
									font-size: 155%;
									letter-spacing: 0.1em;
								}
							}
						}


					}
				}
			}
		}


		.elements {
			padding: 75px 0 80px;
			background: #EFFBFF;

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

			.elements_box {

				background: white;
				padding: 50px 45px 45px;
				background: white;
				position: relative;
				border-radius: 16px;

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

				.title {
					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: 9vw;
						}

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

						}
					}
				}


				>.text {
					margin-top: 2em;

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

						margin-top: 1.5rem;
					}

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

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

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

						strong {
							color: var(--new-blue);
							font-size: 105%;

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

						}
					}
				}

				.elements_list {
					margin-top: 3.5em;

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

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

					ul {
						counter-reset: num;

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

						li {
							counter-increment: num;
							width: 24%;
							background: #EFFBFF;
							border-radius: 10px;
							padding: 1.5em 1.5em;


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

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

							.img {
								margin: 0 auto;
								aspect-ratio: 1/1;
								background: white;
								border-radius: 50%;
								display: flex;
								align-items: center;
								justify-content: center;
								width: 80%;

								img {
									width: 65%;
								}
							}

							.text {
								margin-top: 1.5em;

								h4 {
									font-size: 2.1rem;
									font-weight: 700;
									line-height: 3rem;
									color: var(--new-blue);
									display: flex;
									flex-direction: column;
									align-items: center;

									.elements_num::before {
										content: counter(num, decimal-leading-zero);
										font-family: var(--montserrat);
										color: var(--text);
										font-weight: 800;
										font-size: 120%;
									}


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

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

								p {
									font-size: 1.4rem;
									line-height: 2.4rem;
									font-weight: 500;
									margin-top: 15px;
									text-align: left;

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

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

										br {
											display: none;
										}
									}
								}
							}


						}
					}
				}
			}

		}



	}

	&.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: 3.4vw;
				}

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

			}

			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
				}

			}
		}

	}
}