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


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

	--text: #024B64;
}


/*root*/
/*------------------------------------------------------------*/
/* デジタルスタンプラリーのよくある失敗例7選                                     */
/*------------------------------------------------------------*/
.failure_page h2::before {
	position: absolute;
	z-index: 5;
	content: "STAMP RALLY FAILERE";
	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;
}

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

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

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


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

		.paper {
			overflow: hidden;
			background: white;
			text-align: center;
			border-radius: 28px;

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

			.text_box {
				padding: 3.5em 6em;
				background: #EFFBFF;

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

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

				p {
					color: var(--black);
					font-size: 1.6rem;
					font-weight: 500;
					line-height: 3rem;
					color: var(--text);


					span {
						font-weight: 600;
						font-size: 2.2rem;
					}

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

						br {
							display: none !important;

							&.sp {
								display: block !important;
							}
						}

						span {
							font-size: 4.1vw;
						}
					}

				}

			}

			.failure_box {
				position: relative;
				padding: 4em 6em;

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

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

				&::after {
					position: absolute;
					content: "";
					clip-path: polygon(50% 100%, 0 0, 100% 0);
					width: 5%;
					height: 1.5em;
					right: 0;
					top: -1%;
					left: 0;
					bottom: auto;
					margin: auto;
					background: #EFFBFF;

				}

				&::before {
					position: absolute;
					content: "";
					background: url(../img/failure/failure.png) no-repeat;
					background-size: contain;
					background-position: right bottom;
					width: 18.5%;
					aspect-ratio: 1/1;
					bottom: -1%;
					right: 6em;
					margin: auto;

				}

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

				@media screen and (max-width: 820px) {
					&::before {
						right: 3em;
					}
				}


				ul {
					display: flex;
					flex-direction: column;
					width: 77%;

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



					li {
						text-align: left;
						margin-bottom: 1.5em;
						color: var(--new-blue);

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

							i {
								display: none;
							}

						}

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

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

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

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

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

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

						}
					}
				}
			}

		}

		.catch {
			text-align: center;
			margin-top: 3em;
			line-height: 3.4rem;
			color: var(--text);

			p {
				font-size: 1.8rem;
				font-weight: 500;

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

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

			h3 {
				margin-top: 2em;
				color: var(--new-blue);
				font-size: 3rem;
				line-height: 6.5rem;

				@media screen and (max-width: 820px) {
					margin-top: 1em;
					font-size: 2.2rem;
					line-height: 5rem;
				}

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


				span {
					font-size: 105%;
					background: linear-gradient(90deg, #05D3CB 0%, #09B4F3 60%, #0AADFC 100%);
					display: inline;
					margin: 0 4px;
					color: white;
					padding: 5px 10px 7px;

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

					&.white {
						background: white;
						color: var(--new-blue);
						font-size: 100%;
					}
				}
			}
		}

	}

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

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

		.example_box {
			h3 {
				font-size: 3.4rem;
				text-align: center;

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


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

			ol {
				margin-top: 3em;
				list-style-type: none;
				counter-reset: column_num;
				padding: 0;

				>li {
					background: white;
					text-align: left;
					counter-increment: column_num;
					position: relative;
					padding: 4em 5em 3.5em;
					border-radius: 15px;
					margin-bottom: 5em;

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

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

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

					&:before {
						position: absolute;
						top: -5rem;
						left: 0;
						margin: auto;
						content: counter(column_num, decimal-leading-zero) "";
						font-family: var(--montserrat);
						display: inline-block;
						font-size: 7rem;
						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: 820px) {
						&::before {
							font-size: 4rem;
							top: -2rem;
						}
					}


					@media screen and (max-width: 480px) {
						&::before {
							text-align: center;
							left: 0;
							right: 0;
							top: -3rem;
							font-size: 5rem;
							background-position: center center;
						}
					}



					.column_box {

						h4 {
							color: var(--text);
							font-size: 2.8rem;
							margin-bottom: 1.5em;
							line-height: 3rem;

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

							@media screen and (max-width: 480px) {
								font-size: 5vw;
								text-align: center;
								line-height: 2.8rem;
								margin-bottom: 1em;
							}
						}

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

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

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

						ul {
							margin: 1.5em 0;

							&.point_list,
							&.point_list2,
							&.point_list3 {
								li {

									font-size: 115%;
									color: #025AAD;
									font-weight: 600;

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

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

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

									}

								}
							}

							&.point_list {

								li {
									&::after {
										content: " / ";
									}

									&:last-child {
										&::after {
											display: none;
										}
									}
								}
							}

							&.point_list2 {
								display: block;

								li {
									text-align: left;
									margin-bottom: 0.5em;

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

									&::before {
										content: " ・ ";
									}

								}

							}

							&.point_list3 {
								display: block;

								li {
									text-align: left;
									margin-bottom: 0.5em;
									display: list-item;
									align-items: center;
									padding-left: 35px;
									position: relative;

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

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

									&::before {
										position: absolute;
										background: #025AAD;
										width: 26px;
										height: 26px;
										display: flex;
										align-items: center;
										justify-content: center;
										border-radius: 50%;
										content: "！";
										font-weight: 700;
										color: white;
										top: 0;
										left: 0;
										bottom: 0;
										margin: auto;
									}

									@media screen and (max-width: 820px) {
										&::before {
											width: 20px;
											height: 20px;
											font-size: 85%;
										}
									}

									@media screen and (max-width: 480px) {
										&::before {
											width: 15px;
											height: 15px;
											font-size: 1rem;
										}
									}
								}

							}

						}
					}

					.point_box {
						padding: 2em 3em 2.5em;
						margin-top: 3em;
						/* background: #CFF4FC; */
						border-radius: 10px;
						border: 3px solid var(--new-blue);

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

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

						h5 {
							text-align: center;

							margin-top: -3.8em;

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

							span {
								padding: 0 0.5em;
								color: var(--new-blue);
								font-size: 2.4rem;
								display: inline-block;
								background: white;

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

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

						p {
							color: var(--text);
							font-size: 1.6rem;
							line-height: 3rem;
							font-weight: 500;
							margin-top: 1.5em;

							@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: 2.2rem;
							}
						}

						ul {
							margin-top: 1.5em;
							flex-direction: column;
							align-items: flex-start;

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

							li {
								font-size: 110%;
								color: var(--new-blue);
								font-weight: 600;
								margin-bottom: 0.5em;
								background: url(../img/effect/check.png) no-repeat;
								padding-left: 30px;
								background-size: 22px;
								background-position: left;

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

								@media screen and (max-width: 480px) {
									font-size: 1.2rem;
									background-size: 16px;
									padding-left: 20px;
									background-position: left top;
									text-align: left;
								}
							}
						}

					}
				}
			}
		}
	}

	&.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: 2.4rem;
					line-height: 3.8rem;
				}

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

			}

			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;

					text-align: left;

					br {
						display: none;

						&.sp {
							display: block;
						}
					}
				}

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

			.point_box {
				margin-top: 3em;
				padding: 2em;
				border: 2px dotted var(--text);
				border-radius: 10px;

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


				h4 {
					position: relative;
					margin-top: -3.2em;
					margin-bottom: -1em;

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

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

					&::after {
						position: absolute;
						content: "";
						height: 1px;
						width: 100%;
						top: 0;
						left: 0;
						bottom: 0;
						margin: auto;
						z-index: 1;
					}

					span {
						font-size: 2.4rem;
						position: relative;
						z-index: 2;
						color: #025AAD;
						background: white;
						padding: 0 20px;

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

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

				}

				p {
					font-size: 1.6rem;
					color: var(--text);

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

					@media screen and (max-width: 480px) {
						font-size: 1.2rem;
						line-height: 2.2rem;
						margin-top: 1em;
					}
				}

			}

			.related_box {
				margin-top: 3em;

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

				p {
					color: var(--new-blue);
					font-size: 2.2rem;
					font-weight: 600;
					margin: 0;
					text-align: center;

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

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

						line-height: 2rem;
					}

					a {
						display: block;
						width: 100%;
						text-align: center;
						margin: 0 auto;
						margin-top: 1em;
						transition: all .1s;

						img {
							margin: 0 auto;
							width: 100%;
							max-width: 650px;
						}

						&:hover {
							opacity: .6;
						}
					}
				}
			}
		}

	}

}