@charset "utf-8";

/*============================
年齢確認
============================*/
body.page-year {
	padding-top: 0;
	overflow: hidden;
}

.year_page {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.4rem 0.2rem;
	box-sizing: border-box;
}

.year_bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	background-image: linear-gradient(235deg, #A8d4b8 0%, #95c4dc 22%, #b8cff0 44%, #edd8b0 66%, #f0b0cc 88%, #e8d4b8 100%);
	background-size: 350% 350%;
	background-repeat: repeat;
	background-attachment: fixed;
	background-position: 40% 50%;
	animation: year_bg_gradient 5s ease-in-out infinite alternate;
}

@keyframes year_bg_gradient {
	0% {
		background-position: 30% 42%;
	}

	100% {
		background-position: 70% 58%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.year_bg {
		animation: none;
	}
}

body.page-year.is-leaving {
	pointer-events: none;
}

body.page-year.is-leaving .year_inner {
	opacity: 0;
	transform: translateY(0.12rem);
	filter: blur(0.04rem);
}

@media (prefers-reduced-motion: reduce) {
	body.page-year.is-leaving .year_inner {
		filter: none;
		transform: none;
		transition: none;
	}
}

.year_inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 7.2rem;
	text-align: center;
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
	/* テキストが消える時間はここと year.js をセットで変更 */
	--year-leave-duration: 1s;
	transition:
		opacity var(--year-leave-duration) cubic-bezier(0.4, 0, 0.2, 1),
		transform var(--year-leave-duration) cubic-bezier(0.4, 0, 0.2, 1),
		filter var(--year-leave-duration) cubic-bezier(0.4, 0, 0.2, 1);
}

.year_logo {
	margin-bottom: 0.4rem;
}

.year_logo img {
	display: block;
	width: 2.4rem;
	height: auto;
	margin: 0 auto;
}

.year_title {
	font-size: 0.42rem;
	font-weight: 700;
	line-height: 1.4;
	color: #1a1a1a;
}

.year_lead {
	margin-top: 0.3rem;
	font-size: 0.16rem;
	font-weight: 500;
	line-height: 2;
	color: #1a1a1a;
}

.year_question {
	margin-top: 0.4rem;
	font-size: 0.22rem;
	font-weight: 700;
	line-height: 1.6;
	color: #1a1a1a;
}

.year_btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	margin-top: 0.35rem;
}

.year_btns .btn_common {
	flex: 1;
	max-width: 2.4rem;
	min-width: 0;
	box-shadow: none;
}

.year_btns .btn_common.-white {
	border: 1px solid #1a1a1a;
}

@media screen and (max-width: 800px) {
	.year_page {
		padding: 0.3rem 0.15rem;
	}

	.year_logo {
		margin-bottom: 0.28rem;
	}

	.year_logo img {
		width: 1.8rem;
	}

	.year_title {
		font-size: 0.28rem;
	}

	.year_lead {
		margin-top: 0.2rem;
		font-size: 0.13rem;
		line-height: 1.9;
	}

	.year_question {
		margin-top: 0.28rem;
		font-size: 0.16rem;
	}

	.year_btns {
		flex-direction: column;
		gap: 0.12rem;
		margin-top: 0.24rem;
	}

	.year_btns .btn_common {
		width: 100%;
		max-width: 2.4rem;
	}
}