@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*/
/*------------------------------------------------------------*/
/* デジタルスタンプラリーの費用は何で決まる？｜予算設計のポイントを解説                                   */
/*------------------------------------------------------------*/
.budget_page h2::before {
	position: absolute;
	z-index: 5;
	content: "BUDGET";
	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;
}

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

	&.introduction {
		background: white;
		padding: 75px 0;

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

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

		.introduction_box {
			--radius: 15px;
			--border: 5px;
			border-radius: var(--radius);
			padding: var(--border);
			background: linear-gradient(90deg, #05D3CB 0%, #09B4F3 60%, #0AADFC 100%);
			position: relative;

			.title {
				position: absolute;
				top: -1.3em;
				left: 0;
				right: 0;
				margin: auto;
				text-align: center;

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

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

				h3 {
					font-size: 3.2rem;
					font-weight: 700;
					background: white;
					display: inline-block;

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

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

					span {
						padding: 0 0.5em;
						background: linear-gradient(90deg, #05D3CB 0%, #09B4F3 60%, #0AADFC 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						background-clip: text;
						color: transparent;
						font-weight: 700;

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

					}
				}
			}

			.introduction_box__inner {
				background: #fff;
				border-radius: calc(var(--radius) - var(--border));
				padding: 4.5em 5em 4em;

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

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

					padding-top: 4.5em;
					flex-direction: column;
				}

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

				.text {
					width: 60%;

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

					p {
						font-weight: 500;
						font-size: 1.6rem;
						line-height: 2.8rem;

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

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

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

				.img {
					width: 37%;
					aspect-ratio: 100/94;

					@media screen and (max-width: 820px) {
						width: 65%;
						margin: 0 auto;
						margin-top: 2em;
					}

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

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

			}


		}


	}

	&.reason {
		padding: 75px 0;
		position: relative;
		background: #CFF4FC;

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

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

				h3 {
					position: relative;
					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;
					}

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

					}

				}
			}


			>.text {
				margin-top: 2em;

				p {
					text-align: center;
					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;
						text-align: left;

						br {
							display: none;
						}
					}
				}
			}

			.reason_list {
				margin-top: 3em;
				display: flex;
				justify-content: space-between;

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

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

				li {
					width: 32%;
					background: white;
					border-radius: 10px;

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

					.img {

						padding: 2em 4em 0;
						aspect-ratio: 1055/460;

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

					.text {

						padding: 1.5em 2.5em 2em;

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

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

						h5 {
							color: var(--new-blue);
							font-weight: 700;
							font-size: 2rem;

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

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

						p {
							margin-top: 1em;
							text-align: left;
							font-size: 1.6rem;
							line-height: 2.6rem;

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

					}
				}
			}

			.factor_box {
				margin-top: 1.5em;
				background: white;
				border-radius: 10px;
				padding: 1.5em;

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

				.factor_text {
					padding: 1em 0;
					font-size: 2rem;
					color: var(--text);
					font-weight: 600;
					text-align: center;

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

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

				.factor_list {
					display: flex;
					justify-content: space-between;

					li {
						width: 32.5%;
						background: #EFFBFF;
						border-radius: 10px;
						padding: 1.5em;
						margin-top: 1.5em;

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

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

						h5 {
							color: var(--new-blue);
							font-weight: 700;
							font-size: 1.8rem;

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

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

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

					}
				}
			}

		}

	}




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

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

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

				h3 {
					position: relative;
					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;
					}

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

					}

				}
			}


			>.text {
				margin-top: 2em;

				p {
					text-align: center;
					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;
						text-align: left;
					}
				}
			}



			ol {

				&.thinking_list {
					padding: 0;
					margin-top: 2em;
					list-style: none;

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

					counter-reset: step;

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

					li {
						width: 49%;
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;
						margin-bottom: 1.5em;
						background: white;
						flex-direction: row-reverse;
						padding: 2em 2.5em;
						position: relative;
						counter-increment: step;
						border-radius: 10px;
						border: 3px solid var(--new-blue);

						@media screen and (max-width: 820px) {
							padding: 1.2rem 1.8rem;
							border: 2px solid var(--new-blue);
						}

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

						&::before {
							content: counter(step, decimal-leading-zero);
							position: absolute;
							top: 15px;
							right: 20px;
							/* left: 0; */
							margin: auto;
							font-size: 10rem;
							font-weight: 700;
							line-height: 1;
							color: rgba(5, 172, 252, .1);
							font-family: var(--montserrat);
							z-index: 0;
							pointer-events: none;
						}

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

						h4 {
							width: 100%;
							color: var(--new-blue);
							font-size: 2.6rem;
							text-align: left;
							margin-bottom: 1em;

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

							small {
								font-weight: 500;
								color: #999;
								font-size: 60%;
								font-family: var(--montserrat);
							}
						}

						/* .img {
							width: 30%;
						} */

						.text {
							/* width: 65%; */
							border-radius: 5px;
							text-align: left;



							h5,
							p {
								padding-left: 4rem;
							}

							h5 {

								font-size: 2rem;
								position: relative;

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

								&::before {
									position: absolute;
									content: "";
									height: 1px;
									width: calc(4rem - 10px);
									background: #cecece;
									top: 0;
									bottom: 0;
									left: 0;
									margin: auto;
								}
							}

							p {
								font-size: 1.6rem;
								line-height: 2.6rem;
								margin-top: 1em;

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

				}
			}

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

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

				@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: 820px) {
						font-size: 1.6rem;
						line-height: 3rem;
					}

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

						br {
							display: none;

							&.sp {
								display: block;
							}
						}
					}

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

						}
					}
				}
			}

		}
	}


	&.summary {

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

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

		.summary_box {
			.paper {
				background: white;
				padding: 4em 4em 3.5em;
				border-radius: 16px;

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

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

				.title {
					text-align: center;

					h3 {
						position: relative;
						font-size: 3.2rem;
						font-weight: 600;
						letter-spacing: 0.01em;
						display: inline-block;
						color: var(--new-blue);

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

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

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

						}

					}
				}


				>.text {
					/* margin-top: 2em; */

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

						span {
							display: inline-block;
							line-height: 5rem;
							font-size: 2.6rem;
							color: var(--new-blue);
							position: relative;

							background: linear-gradient(transparent 70%, #dff4ff 0);

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

							@media screen and (max-width: 480px) {
								font-size: 1.3rem;
								line-height: 2rem;
								background: none;
								display: inline;
							}
						}

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

				.check_list {
					flex-direction: column;
					margin-top: 2em;

					li {
						border-radius: 10px;
						text-align: left;
						margin-bottom: 1em;
						background: white;
						padding: 1.5em 2em;

						h4 {
							font-size: 2rem;
							color: var(--new-blue);
						}

						p {
							margin-top: 1em;
							font-size: 1.6rem;
							font-weight: 500;
							line-height: 2.6rem;
						}

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

}