@charset "UTF-8";

/* how to use */
#pageHeaderWrapper {
	&::after {
		background-image: url(../images/how_to_use/main_image.webp);
	}
}
.pageHeaderWrapper {
	&::after {
		content: none !important;
	}
}
@media screen and (max-width:768px) {
	#pageHeaderWrapper {
		.pageTitle {
			letter-spacing: -0.07em;
		}
	}
}

/* steps */
#steps {
	.column {
		& > li {
			position: relative;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			&:not(.noline)::before {
				content: "";
				display: block;
				width: 1px;
				height: 100%;
				position: absolute;
				top: 0;
				background-color: #b4b4b4;
			}
			&.notStep::before {
				content: "";
				display: block;
			}
			.step {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				text-align: center;
				aspect-ratio: 1 / 1;
				color: #b4b4b4;
				position: relative;
				z-index: 1;
				border: 1px solid #b4b4b4;
				background-color: #fff;
				border-radius: 50%;
				font-family: "Barlow Semi Condensed", sans-serif;
				font-weight: 500;
				line-height: 1;
				letter-spacing: 0;
				.num {
					display: block;
				}
			}
			.image { border: 1px solid #b4b4b4; }
			.text {
				dt { font-family: var(--sansSerif); }
				.icon_showkey {
					vertical-align: middle;
					margin: -0.2em 0.2em 0em 0.5em;
				}
			}
			&.notStep {
				.link {
					li.pdf {
						&::before {
							content: "";
							display: inline-block;
							vertical-align: middle;
							background: url(../images/icon_pdf.webp) no-repeat center center;
							background-size: 100%;
							aspect-ratio: 1 / 1;
						}
						a { text-decoration: underline; }
					}
				}
			}
		}
	}
	@media screen and (min-width:769px), print{
		display: flex;
		gap: 70px;
		margin-top: 200px;
		.column {
			width: calc(50% - 35px);
			& > li {
				padding-bottom: 60px;
				&:last-child { padding-bottom: 0; }
				&::before { left: 30px; }
				.step {
					width: 59px;
					font-size: 12px;
					.num {
						font-size: 20px;
					}
				}
				.box {
					width: calc(100% - 80px);
					.text {
						&:first-child { margin-top: -0.6em }
						dt { font-size: 16px; }
						dd {
							margin-top: 7px;
							letter-spacing: -0.05em;
						}
					}
					.image + .text { margin-top: 20px; }
				}
				&.notStep {
					.link {
						margin-top: 60px;
						li.pdf {
							&::before {
								width: 32px;
								margin-top: -0.5em;
								margin-right: 20px;
							}
						}
						li + li { margin-top: 30px; }
					}
				}
			}
		}
	}
	@media screen and (max-width:768px){
		padding-inline: 25px;
		.column {
			& > li {
				padding-bottom: 45px;
				&:not(.noline)::before { left: 25px; }
				.step {
					width: 49px;
					font-size: 10px;
					.num { font-size: 16.5px; }
				}
				.box {
					width: calc(100% - 68px);
					.text {
						&:first-child { margin-top: -0.6em; }
						&:is(.image + &) { margin-top: 17px; }
						dt { font-size: 13.5px; }
						dd { margin-top: 5px; }
					}
				}
				&.notStep {
					.link {
						margin-top: 45px;
						letter-spacing: -0.03em;
						li + li { margin-top: 14px; }
						.pdf {
							display: flex;
							align-items: center;
							&::before {
								width: 27.5px;
								flex-shrink: 0;
								margin-right: 18px;
							}
						}
					}
				}
			}
		}
	}
}

#check-in_counter {
	.title { font-family: var(--sansSerif); }
	@media screen and (min-width:769px), print{
		margin-top: 200px;
		.title {
			font-size: 16px;
			margin-bottom: 65px;
		}
	}
	@media screen and (max-width:768px){
		margin-bottom: 100px;
		padding-inline: 92px 25px;
		.title {
			font-size: 13.5px;
			margin-bottom: 20px;
		}
	}
}

#faq {
	dl {
		& > * {
			position: relative;
			&::before {
				display: block;
				position: absolute;
				font-family: "Barlow Semi Condensed", sans-serif;
				font-weight: 500;
				letter-spacing: 0;
			}
		}
		.q {
			font-family: var(--sansSerif);
			&::before {
				content: "Q";
				color: #b93797;
			}
		}
		.a {
			&::before {
				content: "A";
				color: #4782d5;
			}
			a { text-decoration: underline; }
		}
	}
	@media screen and (min-width:769px), print{
		margin-top: 90px;
		display: flex;
		gap: 70px;
		.column {
			width: calc(50% - 35px);
			& > li + li { margin-top: 55px; }
			dl {
				padding-left: 32px;
				& > *::before {
					top: -0.2em;
					left: -32px;
					font-size: 20px;
				}
				.q {
					font-size: 16px;
				}
				.a {
					margin-top: 5px;
					letter-spacing: -0.05em;
				}
			}
		}
	}
	@media screen and (max-width:768px){
		margin-top: 44px;
		padding-inline: 25px;
		.column + .column, li + li { margin-top: 36px; }
		dl {
			padding-left: 28px;
			& > *::before {
				top: -0.3em;
				left: -28px;
				font-size: 17px;
			}
			.q {
				font-size: 13.5px;
			}
			.a {
				margin-top: 3px;
			}
		}
	}
}