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


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

	--text: #024B64;
}


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

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

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

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

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

		.about_box {
			.title {
				margin-bottom: 1.5em;

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

				h3 {
					text-align: center;

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

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


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


						&::before {
							background: url(../img/guide/guide_left.svg) no-repeat;
							background-size: contain;
							right: calc(100% + 15px);
						}

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

						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/guide/guide_left.svg) no-repeat;
							background-size: contain;
							right: calc(100% + 25px);
						}

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

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

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

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

							&::after {
								left: calc(100% + 10px);
							}


						}

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

							&::before,
							&::after {
								width: 35px;
								bottom: 0;
							}

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

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

						}



					}
				}
			}

			.about_content {
				background: white;
				border-radius: 28px;
				padding: 0;

				display: flex;
				justify-content: space-between;
				align-items: center;

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

					flex-direction: column-reverse;
					border-radius: 10px;
				}

				.img {
					width: 37%;
					aspect-ratio: 5/3;
					overflow: hidden;

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

					@media screen and (max-width: 480px) {
						aspect-ratio: unset;
						padding: 2em;
						width: 100%;
					}

					picture {
						display: block;
						width: 100%;
						height: 100%;
					}

					img {
						height: 100% !important;
						width: 100%;
						margin-bottom: 0;
						object-fit: cover;
						object-position: center bottom;

						@media screen and (max-width: 480px) {
							object-fit: cover;
							object-position: center center;
						}

					}

				}

				.text {
					width: 63%;
					text-align: left;
					padding: 2em;
					padding-left: 0;

					@media screen and (max-width: 820px) {
						width: 100%;
						padding: 3em;
						padding-bottom: 0;
					}

					p {
						font-size: 1.6rem;
						font-weight: 500;
						line-height: 3rem;
						position: relative;

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

				}


			}
		}

		.guide_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;
						}
					}
				}
			}
		}
	}

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

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

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

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

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

				p {
					margin-top: 2em;
					font-size: 1.6rem;
					line-height: 2.8rem;
					color: var(--text);

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

			.mechanism_content {
				margin-top: 3em;

				.list {

					margin-bottom: 2.5em;
					text-align: center;

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

					h4 {
						text-align: center;
						background: #EFFBFF;
						font-size: 2.4rem;
						position: relative;
						z-index: 2;
						display: inline-block;
						width: auto;
						padding: 0 20px;
						margin-bottom: 1.5em;

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

					ul {
						/* margin-top: -1em; */
						display: flex;
						justify-content: space-between;
						/* border: 4px solid var(--new-blue); */
						/* padding: 1.5em;
						padding-top: 2em; */
						border-radius: 20px;
						position: relative;
						z-index: 1;

						li {
							background: white;
							padding: 2.5em 3em;

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

								h5 {
									font-size: 1.7rem !important;
								}

								h6 {
									font-size: 1.4rem !important;
								}

								p {
									font-size: 1.3rem !important;
								}

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

							.text {
								margin-top: 1em;

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

								}

								p {
									text-align: left;
									line-height: 1.8;
								}
							}

						}
					}

					&.list1 {
						ul {
							li {
								border-radius: 10px;
								width: 49%;


								.img {
									img {
										width: 65%;
										max-width: 200px;
									}
								}

								.text {
									h5 {
										font-size: 2rem;
										margin-bottom: 10px;
									}

									h6 {
										font-size: 1.7rem;
										margin-bottom: 15px;
									}

									p {
										font-size: 1.4rem;
										letter-spacing: 0.01em;
									}
								}
							}
						}
					}

					&.list2 {
						ul {
							li {
								border-radius: 10px;
								padding: 2em 2.5em;
								width: 32.5%;
								flex-wrap: wrap;
								margin-bottom: 15px;

								.img {
									aspect-ratio: 230/76;
									width: 100%;
									display: flex;
									align-items: center;
									justify-content: center;

									img {
										width: 65%;
										max-width: 300px;
									}

									&.img2 {
										img {
											width: 100%;
										}
									}
								}

								.text {
									h5 {
										font-size: 1.8rem;
										margin-bottom: 10px;
									}

									h6 {
										font-size: 1.4rem;
										margin-bottom: 15px;
									}

									p {
										font-size: 1.3rem;
									}
								}


							}
						}
					}

					&.list3 {
						ul {
							li {
								border-radius: 10px;
								padding: 1.3em;
								width: 100%;
							}
						}
					}
				}
			}
		}
	}

	&.merit {
		padding: 75px 0;

		background: white;

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

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

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

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

				}

				p {
					margin-top: 2em;
					font-size: 1.6rem;
					line-height: 2.8rem;
					color: var(--text);

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

				}
			}

			.merit_content {
				margin-top: 40px;
				display: flex;

				justify-content: space-between;

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

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

				.box {
					width: 48.5%;
					border-radius: 10px;
					overflow: hidden;
					border: 1px solid #f0f0f0;

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

					.title {
						padding: 1em;

						h4 {
							line-height: 2rem;
							font-size: 2rem;
							text-align: center;
							color: white;

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

					}


					ul {
						display: flex;
						flex-direction: column;
						gap: 25px;
						padding: 2em;

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

					li {
						padding-bottom: 25px;
						border-bottom: 1px solid #f0f0f0;

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

					h5 {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						margin-bottom: 10px;
						font-size: 1.6rem;
						font-weight: 700;
						line-height: 1.5;

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

						i {
							margin-top: 0.2em;
							font-size: 1.4rem;
							color: #666;
							margin-right: 5px;

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

						/* span {
							flex: 1;
						} */
					}

					p {
						padding-left: 1.7em;
						text-align: left;
						margin-bottom: 0;
						font-size: 1.4rem;
						line-height: 1.9;
						color: #555;

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

					/* // メリット */
					&.merit {
						@media screen and (max-width: 820px) {
							margin-bottom: 1em;
						}

						.title {
							background: var(--new-blue);
						}

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

					/* // デメリット */
					&.demerit {

						.title {
							background: #d85c5c;
						}

						i {
							color: #d85c5c;
						}
					}
				}

			}
		}

	}




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

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

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

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

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

				}

				p {
					margin-top: 2em;
					font-size: 1.6rem;
					line-height: 2.8rem;
					color: var(--text);

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

				}
			}

			.case_content {
				margin-top: 3em;

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

				ul {
					gap: unset;

					li {
						margin: 0;
						background: white;
						width: 32%;
						padding: 2em;
						border-radius: 10px;
						margin-bottom: 25px;
						display: flex;
						justify-content: space-between;
						flex-direction: column;

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

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

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

							p {
								order: unset;
							}
						}

						.img {
							width: 100%;
							padding-bottom: 1em;

							.icon {
								/* background: url(../../img/top_renew/scene_mock.png) no-repeat;
								background-size: 100% 100%;
								width: 100%;
								aspect-ratio: 188 / 380;
								padding: 3.4% 4.5%;
								display: grid;
								place-content: center;
								transition: all 0.3s;
								transform: scale(1); */
								aspect-ratio: 1/1;
								width: 45%;
								max-width: 100px;
								margin: 0 auto;

								img {
									width: 100%;
								}
							}

						}

						.text {
							display: flex;
							flex-direction: column;
							width: 100%;
							flex-grow: 1;

							h4 {
								color: var(--new-blue);
								font-size: 1.8rem;
								margin-bottom: 1em;

							}

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

							a {
								padding-top: 2em;
								text-align: right;
								font-size: 1.3rem;
								margin-top: auto;

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

							}
						}
					}
				}

			}
		}

	}


	&.cost {
		padding: 75px 0;
		background: #CFF4FC;

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

		.cost_content {

			.paper {
				background: white;
				border-radius: 20px;
				overflow: hidden;

				.text_box {
					width: 100%;
					padding: 3em 5em 2.5em;

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

					.title {
						border-radius: 15px 15px 0 0;
						background: white;
						text-align: center;
						margin-bottom: 2em;

						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;
							}

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

								span {
									font-size: 5vw;

								}
							}

							&::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: 5rem;
									bottom: -0.5em;
									width: 3px;
								}

								&::before {
									right: 94%;
								}

								&::after {
									left: 94%;
								}


							}


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

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

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

								}
							}
						}
					}

					p {
						width: 100%;
						text-align: center;
						font-size: 1.6rem;
						font-weight: 500;
						line-height: 3.4rem;

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

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


				}

				.cost_list {
					background: #F0FCFF;
					padding: 3em 12em;
					position: relative;

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

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

					&::after {
						position: absolute;
						content: "";
						width: 25%;
						aspect-ratio: 1 / 1;
						right: 12em;
						bottom: 0;
						background: url(../../img/common/sub_top/ryoukin.png) no-repeat !important;
						background-size: contain !important;
					}

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

							width: 35%;
							right: 10%;
						}
					}

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

							width: 65%;
						}
					}

					p {
						font-size: 2rem;
						font-weight: 600;
						text-align: center;
						color: var(--text);
						margin-bottom: 2em;

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

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

					ul {
						display: block;

						li {
							text-align: left;
							font-weight: 500;
							line-height: 25px;
							font-size: 1.7rem;
							display: flex;
							align-items: center;
							margin-bottom: 25px;

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

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

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

							span {
								background: #025AAD;
								display: flex;
								align-items: center;
								justify-content: center;
								color: white;
								font-weight: 600;
								font-family: var(--montserrat);
								width: 25px;
								aspect-ratio: 1 / 1;
								border-radius: 50%;
								margin-right: 8px;

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

								i {
									font-size: 85%;
									margin: 0;
								}
							}
						}
					}
				}
			}
		}

	}
}