@charset "utf-8";
@font-face {
	font-family: 'Libre Baskerville';
	src: url('../fonts/LibreBaskerville-Bold.woff2') format('woff2'),
		 url('../fonts/LibreBaskerville-Bold.woff') format('woff'),
		 url('../fonts/LibreBaskerville-Bold.ttf') format('truetype'),
		 url('../fonts/LibreBaskerville-Bold.otf') format('opentype');
	font-weight: 700;
	font-style: normal;
}
:root {
	--color--black: #000000;
	--color--white: #ffffff;
	--color--gold: #B09A82;
	--color--red: #A80023;
	--color--purple: #505180;
	--color--dark_purple: #41415F;

	/* キャラクターカラー */
	--color--PRIMULA: #CDD2DA;
	--color--LILY: #5F6EEF;
	--color--SCARLET: #D21928;
	--color--GWYN: #CDD2DA;
}
body {
	min-height: 100vh;
	margin: 0px;
	padding: 0px;
	background-color: var(--color--red);
	scroll-behavior: smooth;
	text-rendering: optimizeSpeed;
	color: #000000;
	font-family: Noto Serif JP, serif;
	font-weight: 500;
	font-style: normal;
	line-height: 1.8;
	letter-spacing: 0.05em;
	position: relative;
	-webkit-transition: background-color 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
	transition: background-color 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
}
body#en {
	font-family: Noto Serif, serif;
	letter-spacing: 0.04em;
}
body#zh {
	font-family: Noto Serif SC, serif;
}
body.scroll-stop {
	overflow: hidden;
}

.ft_Libre {
	font-family: 'Libre Baskerville', serif;
}
.ft_notosans {
	font-family: 'Noto Sans JP', sans-serif;
}
#en .ft_notosans {
	font-family: 'Noto Sans', sans-serif;
}
#zh .ft_notosans {
	font-family: 'Noto Sans SC', sans-serif;
}

header {
	width: 100%;
	height: 0px;
	position: absolute;
	top: 0;
	left: 0;
}
	.header__inner {
		width: 90%;
		height: auto;
		margin: 0 auto;
		position: relative;
	}
		.header__steam_logo {
			width: auto;
			height: 51px;
			position: absolute;
			top: 40px;
			left: 0;
			z-index: 10;
			opacity: 0;
			transition: .8s;
		}
		.loaded .header__steam_logo {
			opacity: 1;
		}
			.header__steam_logo a img {
				width: auto;
				height: 100%;
			}
		.header__lang_switch {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			column-gap: 23px;
			font-size: 24px;
			font-weight: 700;
			line-height: 1.5;
			letter-spacing: 0.085em;
			position: absolute;
			top: 27px;
			right: 0;
			z-index: 10;
			opacity: 0;
			transition: .8s;
		}
		.loaded .header__lang_switch {
			opacity: 1;
		}
			.header__lang_switch__item {
				width: auto;
				height: auto;
				position: relative;
			}
				.header__lang_switch__item a {
					color: var(--color--black);
				}
				.header__lang_switch__item img {
					width: 45.63px;
					height: auto;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translate(-50%,0%);
					opacity: 0;
					pointer-events: none;
					transition: .25s;
				}
				.header__lang_switch__item.lang_active img,
				.header__lang_switch__item:hover img{
					opacity: 1;
					pointer-events: auto;
				}

footer {
	width: 100%;
	height: 150px;
	padding: 3px 0 0;
	background-color: var(--color--black);
}
	.footer__inner {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 90%;
		max-width: 1000px;
		height: 100%;
		margin: 0 auto;
	}
		.footer__aa_logo {
			width: 160.605px;
			height: auto;
			margin: 0 auto 17px;
		}
			.footer__aa_logo a {
				display: block;
				width: 100%;
				height: auto;
			}
				.footer__aa_logo a img {
					width: 100%;
					height: auto;
				}
		.footer__copyright {
			width: 100%;
			height: auto;
			font-size: 10px;
			font-weight: 400;
			line-height: 1.45;
			letter-spacing: .0.35em;
			color: var(--color--white);
			text-align: center;
		}

/* 共通 */
.ruby {
	position: relative;
}
	.ruby .ruby_txt {
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 12px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0em;
		white-space: nowrap;
		position: absolute;
		bottom: 125%;
		left: 50%;
		transform: translate(-50%,0%);
	}
	#en .ruby .ruby_txt {
		font-family: 'Noto Sans', sans-serif;
	}
	#zh .ruby .ruby_txt {
		font-family: 'Noto Sans SC', sans-serif;
	}

/* PC ================================================== */
@media all and (min-width:992px){
.tablet,.sp {display: none;}
.pc {display: inline-block;}
.view_sp {display: none;}
.view_tablet {display: none;}
.view_pc {display: block;}
body {}
h1{}
h2{}
h3{}
h4{}
h5{}
}


/* Tablet ================================================== */
@media all and (max-width:991px){
.pc,.sp {display: none;}
.tablet {display: inline-block;}
.view_pc {display: none;}
.view_sp {display: none;}
.view_tablet {display: block;}
body {}
h1{}
h2{}
h3{}
h4{}
h5{}

footer {
	height: auto;
	padding: 6.34566vw 0;
}
	.footer__inner {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 90%;
		max-width: 1000px;
		height: 100%;
		margin: 0 auto;
	}
		.footer__aa_logo {
			width: 21.414vw;
			margin: 0 auto 3.2vw;
		}
		.footer__copyright {
			font-size: 1.333333vw;
		}

/* 共通 */
	.ruby .ruby_txt {
		font-size: 12px;
		bottom: 115%;
		left: 50%;
		transform: translate(-50%,0%) scale(0.5);
	}

/* クッキーバナー */
.cc-window {
	display: block !important;
	padding: 37px 0px 53px !important;
}
	.cc-message {
		width: 87%;
		max-width: initial !important;
		padding-right: 0px;
		margin: 0 auto 14px !important;
		font-size: 10px;
	}
		.cc-message br {
			display: none;
		}
	.cc-compliance {
		display: block !important;
		width: 245px;
		height: auto;
		margin: 0 auto;
		position: initial !important;
	}
		.cc-btn {
			width: 100%;
			height: 34px;
			margin: 0 0 8px !important;
			border-radius: 17px;
			font-size: 12px;
		}
		.cc-btn.cc-allow {
			margin: 0 !important;
		}
		.cc-detail {
			width: 100%;
		}
		.cc-close {
			width: 18px;
			height: 18px;
			margin: 0;
			position: absolute !important;
			top: 10px !important;
			right: 8px !important;
		}
			.cc-close::before,
			.cc-close::after {
				width: 20px;
				height: 1px;
			}
		.lang_switch {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			position: absolute;
			top: auto;
			right: auto;
			bottom: 14px;
			left: 21px;
			transform: translate(0%,0%);
		}
			.lang_switch svg {
				width: 15.6px;
				height: auto;
				margin-right: 5px;
				fill: var(--color--white);
			}
			.lang_switch_btn_wrap {
				font-size: 12px;
				font-weight: 500;
				pointer-events: none;
			}
				.lang_btn {
					padding: 1px 3px 0;
					margin: 0 3px;
					color: var(--color--white);
					cursor: pointer;
					pointer-events: auto;
				}
				.lang_btn.active {
					text-decoration: underline;
				}
}


/* SP ================================================== */
@media all and (max-width:575px){
.pc,.tablet {display: none;}
.sp {display: inline-block;}
.view_pc {display: none;}
.view_tablet {display: none;}
.view_sp {display: block;}
body {}
h1{}
h2{}
h3{}
h4{}
h5{}

/* header */
	.header__inner {
		width: 90%;
	}
		.header__steam_logo {
			height: 25.5px;
			top: 16px;
		}
		.header__lang_switch {
			column-gap: 14px;
			font-size: 16px;
			top: 13px;
		}
			.header__lang_switch__item {
				width: auto;
				height: auto;
				position: relative;
			}
				.header__lang_switch__item a {
					display: inline-block;
					text-indent: .15em;
				}
				.header__lang_switch__item img {
					width: 24px;
					height: auto;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translate(-50%,0%);
					opacity: 0;
					pointer-events: none;
				}
				.header__lang_switch__item.lang_active img {
					opacity: 1;
					pointer-events: auto;
				}
}