@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*/
/*------------------------------------------------------------*/
/* デジタルスタンプラリーの費用は何で決まる？｜予算設計のポイントを解説                                   */
/*------------------------------------------------------------*/
.operation_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;
}

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

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

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

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

		.faq_tab_box {

			.title {
				margin-bottom: 1.5em;

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

				h3 {
					text-align: center;

					span {
						font-size: 3rem;
						letter-spacing: .03em;
						font-weight: 600;
						background: linear-gradient(120deg, #00C686 0%, #07B3DE 60%, #0079C6 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;

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

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

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

		.toc {
			margin-top: 3em;

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

			ul {
				justify-content: space-between;

				li {
					width: calc(100% / 7 - 8px);

					/* border: 4px solid var(--new-blue); */
					@media screen and (max-width: 820px) {
						width: calc(100% / 2 - 3px);
						margin-bottom: 0.5em;
					}

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

					a {
						display: block;
						width: 100%;
						height: 100%;
						font-size: 1.6rem;
						font-weight: 600;
						text-align: center;
						border-radius: 10px;
						background: white;
						transform: translateY(0);
						transition: all .1s;
						border: 2px solid var(--paper);
						box-shadow: 0 7px 0 var(--paper);
						color: var(--paper);

						@media screen and (max-width: 820px) {
							display: flex;
							align-items: center;
							padding: 0.3em 1em;
							box-shadow: 0 4px 0 var(--paper);
							border-radius: 5px;
						}

						&:hover {
							transform: translateY(6px);
							box-shadow: 0 1px 0 var(--paper);

							@media screen and (max-width: 820px) {
								transform: translateY(3px);

							}
						}

						.img {
							width: 100%;
							aspect-ratio: 2/1;
							padding: 1.2em 0.5em 0;

							@media screen and (max-width: 820px) {
								aspect-ratio: 1/1;
								padding: 0;
								width: 12%;
							}

							img {
								width: 100%;
								height: 100%;
								object-fit: contain;
								object-position: calc();


							}

						}

						span {
							display: inline-block;
							padding: 1em 1em;

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

								br {
									display: none;
								}
							}

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

					}
				}
			}
		}

	}

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

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

		.faq_box {
			.toc_list {
				list-style: none;
				margin: 0;
				counter-reset: toc;

				>li {

					counter-increment: toc;

					.paper {
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;
						margin-bottom: 1.5em;
						background: white;
						flex-direction: column;
						align-items: flex-start;
						position: relative;
						counter-increment: step;
						border-radius: 10px;
						border: 3px solid var(--paper);

						* {
							width: 100%;
							text-align: left;
						}

						.title {
							background: var(--paper);
							padding: 1.2em 2em;
							position: relative;
							display: flex;
							align-items: center;

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

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

							.img {
								width: 4%;
								background: white;
								aspect-ratio: 1/1;
								border-radius: 50%;
								padding: 10px;
								display: inline-block;
								margin-right: 15px;

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

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

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

							h3 {
								flex: auto;
								font-size: 2.6rem;
								text-align: left;
								color: white;

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

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


						.faq_list {
							padding: 0 3.5em;

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

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

							dl {
								dt {
									border-top: 1px solid #e0e0e0;
									padding-top: 2.5em;
									margin-bottom: 2em;

									@media screen and (max-width: 820px) {
										padding-top: 1.5em;
										margin-bottom: 1.2em;
									}

									&:first-child {
										border: none;
									}

									h4 {
										font-size: 2.2rem;
										display: flex;
										align-items: center;

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

										@media screen and (max-width: 480px) {
											align-items: flex-start;
											font-size: 1.4rem;
										}

										&::before {
											background: var(--text);
											color: white;
											display: flex;
											align-items: center;
											justify-content: center;
											border-radius: 50%;
											width: 2.8rem;
											height: 2.8rem;
											padding: 4px;
											content: "Q";
											font-size: 1.8rem;
											font-weight: 700;
											font-family: var(--montserrat);
											margin-right: 10px;
										}

										@media screen and (max-width: 820px) {
											&::before {
												width: 3rem;
												height: 3rem;
												font-size: 1.6rem;
												padding: 0;
											}
										}

										@media screen and (max-width: 480px) {
											&::before {
												height: 2em;
												font-size: 1.1rem;
												margin-right: 5px;
											}
										}
									}
								}

								dd {
									margin-bottom: 3.5em;
									padding: 2em 3em;
									background: #EFFBFF;
									color: #333;
									font-size: 1.4rem;
									font-weight: 500;

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

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

									p {
										color: #333;
										font-weight: 500;
										font-size: 1.5rem;
										line-height: 2.8rem;

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

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

									}

									ul {
										list-style-type: initial;
										padding-left: 1.6em;
										margin: 1em 0;

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

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

										li {
											line-height: 1.6;
											font-weight: 600;
											font-size: 1.5rem;
											color: var(--text);

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

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

					}
				}

			}

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

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

				strong {
					color: var(--text);
					font-size: 3.2rem;

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

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

					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: 115%;
							letter-spacing: 0.1em;
							padding: 5px 8px;
						}
					}
				}


			}

		}
	}


}