@charset "utf-8";
#hero {
	width: 100%;
	height: auto;
	aspect-ratio: 1920 / 1080;
}
	.hero__inner {
		width: 100%;
		height: auto;
		overflow: hidden;
		position: relative;
	}
		.hero__steam_logo {
			width: 169px;
			height: auto;
			position: absolute;
			top: 40px;
			left: 40px;
			z-index: 2;
		}
			.hero__steam_logo img {
				width: 100%;
				height: auto;
			}
		.hero__image {
			width: 100%;
			height: auto;
			position: relative;
			z-index: 1;
		}
			.hero__image img {
				width: 100%;
				height: auto;
			}
		.hero__copy {
			height: auto;
			position: absolute;
			z-index: 2;
		}
		#ja .hero__copy {
			width: calc((235 / 1920) * 100%);
			top: calc((125.3 / 1080) * 100%);
			right: calc((42.2126 / 1920) * 100%);
		}
		#en .hero__copy {
			width: calc((465 / 1920) * 100%);
			top: calc((78 / 1080) * 100%);
			right: calc((7 / 1920) * -100%);
		}
		#zh .hero__copy {
			width: calc((233 / 1920) * 100%);
			top: calc((131 / 1080) * 100%);
			right: calc((41 / 1920) * 100%);
		}
			.hero__copy img {
				width: 100%;
				height: auto;
			}
		.hero__logo {
			height: auto;
			position: absolute;
			transform: translate(-50%,0%);
			z-index: 2;
		}
		#ja .hero__logo {
			width: calc((1000 / 1920) * 100%);
			bottom: calc((15 / 1080) * 100%);
			left: calc((979 / 1920) * 100%);
		}
		#en .hero__logo {
			width: calc((985.5 / 1920) * 100%);
			bottom: calc((10 / 1080) * -100%);
			left: calc((980 / 1920) * 100%);
		}
		#zh .hero__logo {
			width: calc((1000 / 1920) * 100%);
			bottom: calc((5.718 / 1080) * 100%);
			left: calc((940 / 1920) * 100%);
		}
			.hero__logo img {
				width: 100%;
				height: auto;
			}
		.hero__steam {
			width: calc((442 / 1920) * 100vw);
			height: calc((122 / 1920) * 100vw);
			border-radius: 9999px;
			padding: 2px;
			filter: drop-shadow(0px 0px 20px rgba(7,255,255,0.4));
			background: rgb(26,154,229);
			background: linear-gradient(180deg, rgba(26,154,229,1) 0%, rgba(29,57,113,1) 53%, rgba(0,20,50,1) 100%);
			position: absolute;
			bottom: calc((34.78 / 1920) * 100vw);
			right: calc((52.53 / 1920) * 100vw);
			z-index: 2;
		}
			.hero__steam_btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
				padding-top: 0.2vw;
				border-radius: calc(3.177083vw - 2px);
				background: rgb(26,154,229);
				background: linear-gradient(0deg, rgba(26,154,229,1) 0%, rgba(29,57,113,1) 53%, rgba(0,20,50,1) 100%);
			}
				.hero__steam_btn__txt {
					width: 10.97828125vw;
					height: auto;
					margin-right: 2.34375vw;
				}
				.hero__steam_btn__arrow {
					width: 1.375vw;
					height: auto;
				}
		.hero__lily_v_video {
			width: 20%;
			height: auto;
			box-shadow: 0px 4px 10px 0px var(--color--red);
			position: absolute;
			bottom: calc((34.78 / 1920) * 100vw);
			left: calc((52.53 / 1920) * 100vw);
			z-index: 3;
		}
			.hero_video_btn {
				display: block;
				width: 100%;
				height: auto;
				cursor: pointer;
			}
				.hero_video_btn img {
					width: 100%;
					height: auto;
				}

.section__heading {
	position: absolute;
	left: 63px;
}
.section__heading_01 {
	width: 54.6182px;
	height: auto;
}
.section__heading_02 {
	width: 53.0991px;
	height: auto;
}
.section__heading_03 {
	width: 53.8945px;
	height: auto;
}

#news {
	width: 100%;
	height: auto;
	min-height: 265px;
	padding: 65px 0 28px;
	background-color: var(--color--black);
	position: relative;
}
	#news .section__heading {
		top: 10.4%;
	}
	.news__inner {
		width: 90%;
		max-width: 960px;
		height: auto;
		margin: 0 auto;
	}
		.news__list {
			width: 100%;
			height: auto;
			margin: 0 auto 25px;
		}
			.news__item {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				width: 100%;
				height: auto;
			}
			.news__item:not(:last-of-type) {
				margin-bottom: 19px;
			}
				.news__item__date {
					width: 105px;
					height: auto;
					padding-top: 1px;
					font-size: 16px;
					font-weight: 700;
					line-height: 1.6;
					letter-spacing: -0.015em;
					color: var(--color--gold);
					order: 1;
				}
				.news__item::before {
					content: '';
					display: block;
					width: 33px;
					height: 1px;
					margin-top: 12px;
					margin-right: 21px;
					background-color: var(--color--gold);
					order: 2;
				}
				.news__item__ttl {
					flex: 1;
					font-size: 16px;
					font-weight: 400;
					line-height: 1.6;
					letter-spacing: 0.04em;
					color: var(--color--white);
					order: 3;
				}
		.news__more {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			width: 100%;
			height: auto;
		}
			.news__more_btn {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 16px;
				font-weight: 700;
				line-height: 1.4;
				letter-spacing: -0.015em;
				color: var(--color--gold);
			}
				.news__more_btn img {
					width: 75px;
					height: auto;
					margin-left: 37px;
					margin-bottom: 11px;
				}

#introduction {
	width: 100%;
	height: auto;
	padding: 150px 0;
	position: relative;
}
	#introduction::before,
	#introduction::after {
		content: '';
		display: block;
		width: 6px;
		height: 100%;
		border-left: solid 1px var(--color--gold);
		border-right: solid 1px var(--color--gold);
		position: absolute;
		top: 0;
	}
	#introduction::before {
		left: 2.0833%;
	}
	#introduction::after {
		right: 2.0833%;
	}
	#introduction .section__heading {
		top: 4.5%;
	}
	.introduction__ojb_txt {
		width: 48.8057px;
		height: auto;
		position: absolute;
		top: 2.3571%;
		right: 3.2291%;
	}
	.introduction__inner {
		width: 90%;
		max-width: 1126px;
		height: auto;
		margin: 0 auto;
	}
		.introduction__heading {
			width: 100%;
			height: auto;
			margin: 0 auto 92px;
			font-size: 27px;
			font-weight: 700;
			letter-spacing: 0.068em;
			text-align: center;
			color: var(--color--white);
		}
		#en .introduction__heading {
			font-weight: 600;
		}
		.introduction__contents {
			width: 100%;
			height: auto;
			position: relative;
		}
			.introduction__contents__logo_mark {
				width: 590px;
				height: auto;
				position: absolute;
				top: 47.8947%;
				left: 50%;
				transform: translate(-50%,-50%);
				z-index: 1;
			}
				.introduction__contents__logo_mark img {
					width: 100%;
					height: auto;
					-webkit-animation:rotateY 8s linear 0s infinite;
					-moz-animation:rotateY 8s linear 0s infinite;
					animation:rotateY 8s linear 0s infinite;
				}
				@-webkit-keyframes rotateY {
					0% {
						-webkit-transform:rotateY(0deg);
						transform:rotateY(0deg);
					}
					25% {
						-webkit-transform:rotateY(90deg);
						transform:rotateY(90deg);
					}
					50% {
						-webkit-transform:rotateY(180deg);
						transform:rotateY(180deg);
					}
					75% {
						-webkit-transform:rotateY(270deg);
						transform:rotateY(270deg);
					}
					100% {
						-webkit-transform:rotateY(360deg);
						transform:rotateY(360deg);
					}
				}
				@-moz-keyframes rotateY {
					0% {
						-moz-transform:rotateY(0deg);
						transform:rotateY(0deg);
					}
					25% {
						-moz-transform:rotateY(90deg);
						transform:rotateY(90deg);
					}
					50% {
						-moz-transform:rotateY(180deg);
						transform:rotateY(180deg);
					}
					75% {
						-moz-transform:rotateY(270deg);
						transform:rotateY(270deg);
					}
					100% {
						-moz-transform:rotateY(360deg);
						transform:rotateY(360deg);
					}
				}
				@keyframes rotateY {
					0% {
						-webkit-transform:rotateY(0deg);
						-moz-transform:rotateY(0deg);
						transform:rotateY(0deg);
					}
					25% {
						-webkit-transform:rotateY(90deg);
						-moz-transform:rotateY(90deg);
						transform:rotateY(90deg);
					}
					50% {
						-webkit-transform:rotateY(180deg);
						-moz-transform:rotateY(180deg);
						transform:rotateY(180deg);
					}
					75% {
						-webkit-transform:rotateY(270deg);
						-moz-transform:rotateY(270deg);
						transform:rotateY(270deg);
					}
					100% {
						-webkit-transform:rotateY(360deg);
						-moz-transform:rotateY(360deg);
						transform:rotateY(360deg);
					}
				}
			.introduction__contents__item {
				display: flex;
				justify-content: center;
				position: relative;
				z-index: 2;
			}
			.introduction__contents__item_01 {
				align-items: flex-start;
				width: 100%;
				height: auto;
				margin: 0 auto 5.4%;
			}
			.introduction__contents__item_02 {
				width: 0px;
				height: 145px;
				margin: 0 auto 5.4%;
			}
			.introduction__contents__item_03 {
				align-items: flex-end;
				width: 100%;
				height: auto;
				margin: 0 auto;
			}
				.introduction__contents__item__txt_wrap_01,
				.introduction__contents__item__txt_wrap_02 {
					width: 50%;
					height: auto;
				}
				.introduction__contents__item__txt_wrap_01 {
					padding-top: 24px;
					padding-right: 14px;
				}
				#en .introduction__contents__item__txt_wrap_01 {
					padding-top: 0;
				}
				.introduction__contents__item__txt_wrap_02 {
					padding-left: 14px;
				}
					.introduction__contents__item__txt_01,
					.introduction__contents__item__txt_02 {
						font-size: 20px;
						font-weight: 700;
						line-height: 2.775;
						letter-spacing: 0.1em;
						font-feature-settings: "palt";
						white-space: nowrap;
						color: var(--color--white);
					}
					#en .introduction__contents__item__txt_01,
					#en .introduction__contents__item__txt_02 {
						font-size: 18px;
						font-weight: 600;
					}
					.introduction__contents__item__txt_01 {
						text-align: right;
					}
					#en .introduction__contents__item__txt_01 {
						margin-top: 0%;
						line-height: 2;
						text-align: left;
						white-space: initial;
					}
					.introduction__contents__item__txt_02 {
						margin-bottom: -14px;
						text-align: left;
					}
					#en .introduction__contents__item__txt_02 {
						width: 115%;
						margin-bottom: -8%;
						line-height: 2;
						white-space: initial;
					}
						.introduction__contents__item__txt_01 .mid_br {
							display: none;
						}
				.introduction__contents__item__image_01 {
					display: flex;
					justify-content: flex-start;
					width: 50%;
					height: auto;
					padding-left: 21px;
				}
				.introduction__contents__item__image_02 {
					width: calc(45vw - 143px);
					max-width: 536px;
					height: auto;
					position: absolute;
					right: 27px;
					bottom: 0;
				}
				.introduction__contents__item__image_03 {
					width: calc(45vw - 143px);
					max-width: 536px;
					height: auto;
					position: absolute;
					top: 0;
					left: 27px;
				}
				.introduction__contents__item__image_04 {
					display: flex;
					justify-content: flex-end;
					width: 50%;
					height: auto;
					padding-right: 21px;
				}
					.introduction__contents__item__image_01__wrap,
					.introduction__contents__item__image_04__wrap {
						width: 30.460312vw;
						max-width: 100%;
						overflow: hidden;
					}
					.introduction__contents__item__image_02__wrap,
					.introduction__contents__item__image_03__wrap {
						width: 30.460312vw;
						max-width: 100%;
						height: 16.875vw;
						max-height: 281.8px;
						overflow: hidden;
					}
						.introduction__contents__item__image_01 img,
						.introduction__contents__item__image_04 img {
							width: 100%;
							height: auto;
						}
						.introduction__contents__item__image_02 img,
						.introduction__contents__item__image_03 img {
							width: 100%;
							height: auto;
						}

#staff {
	width: 100%;
	height: auto;
	padding: 16vh 0 20vh;
	position: relative;
}
	#staff::before,
	#staff::after {
		content: '';
		display: block;
		width: 6px;
		height: 100%;
		border-left: solid 1px var(--color--gold);
		border-right: solid 1px var(--color--gold);
		position: absolute;
		top: 0;
	}
	#staff::before {
		left: 2.0833%;
	}
	#staff::after {
		right: 2.0833%;
	}
	#staff .section__heading {
		top: 8.156897%;
	}
	.staff__ojb_txt {
		width: 48.8057px;
		height: auto;
		position: absolute;
		top: 5.648269%;
		right: 3.2291%;
	}
	.staff__inner {
		width: 90%;
		max-width: 820px;
		height: auto;
		margin: 0 auto;
		position: relative;
	}
		.staff__logo_mark {
			width: 66.4008%;
			position: absolute;
			top: calc(51.3299% + 40px);
			left: 50%;
			transform: translate(-50%,-50%);
			z-index: 1;
			opacity: 0;
			-webkit-transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1), top 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
			transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1), top 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
		}
		.on_color .staff__logo_mark {
			top: 51.3299%;
			opacity: 1;
		}
			.staff__logo_mark img {
				width: 100%;
				height: auto;
				-webkit-animation:rotateY 8s linear 0s infinite;
				-moz-animation:rotateY 8s linear 0s infinite;
				animation:rotateY 8s linear 0s infinite;
			}
		.staff__list {
			width: 100%;
			height: auto;
			padding-left: 30px;
			position: relative;
			z-index: 2;
		}
			.staff_item {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				width: 100%;
				height: auto;
				position: relative;
				top: 20px;
				opacity: 0;
				-webkit-transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1), top 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
				transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1), top 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
			}
			.staff_item:not(:last-of-type) {
				margin-bottom: 25px;
			}
			.staff_item:nth-of-type(1) {
				-webkit-transition-delay: .3s;
				transition-delay: .3s;
			}
			.staff_item:nth-of-type(2) {
				-webkit-transition-delay: .35s;
				transition-delay: .35s;
			}
			.staff_item:nth-of-type(3) {
				-webkit-transition-delay: .4s;
				transition-delay: .4s;
			}
			.staff_item:nth-of-type(4) {
				-webkit-transition-delay: .45s;
				transition-delay: .45s;
			}
			.staff_item:nth-of-type(5) {
				-webkit-transition-delay: .5s;
				transition-delay: .5s;
			}
			.staff_item:nth-of-type(6) {
				-webkit-transition-delay: .55s;
				transition-delay: .55s;
			}
			.on_color .staff_item {
				top: 0;
				opacity: 1;
			}
				.staff_item__heading {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 280px;
					height: auto;
					margin-right: 15px;
					font-size: 18px;
					font-weight: 700;
					line-height: 58px;
					letter-spacing: 0.055em;
					color: var(--color--white);
					font-feature-settings: "palt";
				}
				#en .staff_item__heading {
					font-weight: 600;
				}
					.staff_item__heading::after {
						content: '';
						flex: 1;
						height: 1px;
						margin-left: 15px;
						background-color: var(--color--gold);
					}
				.staff_item__details {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: wrap;
					column-gap: 20px;
					flex: 1;
					height: auto;
					font-size: 24px;
					font-weight: 700;
					line-height: 58px;
					letter-spacing: 0.055em;
					color: var(--color--white);
					font-feature-settings: "palt";
				}
				#en .staff_item__details {
					font-weight: 600;
				}
					.staff_item__details__masterpiece {
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 0 22px;
						position: relative;
					}
						.staff_item__details__masterpiece::before,
						.staff_item__details__masterpiece::after {
							content: '';
							display: block;
							width: 11.0151px;
							height: 36px;
							position: absolute;
							top: 50%;
							transform: translate(0%,-50%);
						}
						.staff_item__details__masterpiece::before {
							background-image: url('../image/index/staff-masterpiece_left.svg');
							background-position: center left;
							background-repeat: no-repeat;
							background-size: 100% 100%;
							left: 0;
						}
						.staff_item__details__masterpiece::after {
							background-image: url('../image/index/staff-masterpiece_right.svg');
							background-position: center right;
							background-repeat: no-repeat;
							background-size: 100% 100%;
							right: 0;
						}
						.staff_item__details__masterpiece__txt {
							width: 100%;
							height: auto;
							font-size: 13px;
							font-weight: 400;
							line-height: 1.49;
							letter-spacing: 0.055em;
							font-feature-settings: "palt";
						}

#spec {
	width: 100%;
	height: auto;
	padding: 76px 0 50px;
	background-color: var(--color--white);
}
	.spec__inner {
		width: 90%;
		max-width: 970px;
		height: auto;
		margin: 0 auto;
	}
		.spec__container {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: auto;
			margin: 0 auto 25px;
		}
			.spec__logo {
				height: auto;
				padding-top: 7px;
			}
			#ja .spec__logo {
				width: calc((405.7291 / 1920) * 100vw);
				min-width: 405px;
			}
			#en .spec__logo {
				width: calc((421.0711 / 1920) * 100vw);
				min-width: 421px;
			}
			#zh .spec__logo {
				width: calc((418.7832 / 1920) * 100vw);
				min-width: 418px;
			}
				.spec__logo img {
					width: 100%;
					height: auto;
				}
			.spec__contents {
				width: 45.78862%;
				height: auto;
			}
				.spec__contents__heading {
					width: 100%;
					height: auto;
					margin: 0 auto 18px;
					font-size: 24px;
					font-weight: 700;
					line-height: 1;
					letter-spacing: 0.025em;
					color: var(--color--dark_purple);
				}
				#en .spec__contents__heading {
					font-weight: 600;
				}
				.spec__list {
					width: 100%;
					height: auto;
				}
					.spec__item {
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
						width: 100%;
						height: auto;
						font-size: 15px;
						font-weight: 400;
						line-height: 1.6;
						letter-spacing: 0.055em;
						color: var(--color--dark_purple);
						font-feature-settings: "palt";
					}
					.spec__item:not(:last-of-type) {
						margin-bottom: 9px;
					}
						.spec__item__heading {
							width: 149px;
							height: auto;
						}
						.spec__item__details {
							flex: 1;
							height: auto;
						}
		.spec__steam_link {
			width: 100%;
			height: auto;
			padding: 76px 0 0;
		}
			.spec__steam_widget {
				width: 90%;
				max-width: 600px;
				height: auto;
				margin: 0px auto 40px;
			}
				.spec__steam_widget iframe {
					width: 100%;
				}
			.spec__steam {
				width: 252px;
				height: 82px;
				margin: 0 auto;
				border-radius: 41px;
				padding: 2px;
				background: rgb(69,135,184);
				background: linear-gradient(180deg, rgba(69,135,184,1) 0%, rgba(29,57,113,1) 36%, rgba(0,20,50,1) 100%);
				position: relative;
			}
				.spec__steam_btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 100%;
					border-radius: 39px;
					background: rgb(69,135,184);
					background: linear-gradient(0deg, rgba(69,135,184,1) 0%, rgba(29,57,113,1) 36%, rgba(0,20,50,1) 100%);
				}
					.spec__steam_btn__txt {
						width: 140.5px;
						height: auto;
						margin-right: 20px;
					}
					.spec__steam_btn__arrow {
						width: 17.6px;
						height: auto;
					}

/* PC_large ================================================== */
@media all and (max-width:1400px){
/* introduction */
				#en .introduction__contents__item__txt_wrap_01 {
					padding-left: 10vw;
				}
					.introduction__contents__item__txt_01,
					.introduction__contents__item__txt_02 {
						font-size: 18px;
						letter-spacing: 0.05em;
					}
					#en .introduction__contents__item__txt_02 {
						width: 100%;
					}
}
@media all and (max-width:1280px){
/* introduction */
					.introduction__contents__item__txt_01,
					.introduction__contents__item__txt_02 {
						font-size: 16px;
						letter-spacing: 0.05em;
					}
					#en .introduction__contents__item__txt_01,
					#en .introduction__contents__item__txt_02 {
						font-size: 16px;
					}
}
@media all and (max-width:1280px){
/* introduction */
				#en .introduction__contents__item__txt_wrap_01 {
					padding-left: 9vw;
				}
}
@media all and (max-width:1130px){
					.introduction__contents__item__txt_01 .mid_br {
						display: inline-block;
					}
}
@media all and (max-width:1050px){
/* introduction */
					#en .introduction__contents__item__txt_01,
					#en .introduction__contents__item__txt_02 {
						font-size: 15px;
					}
}

/* PC ================================================== */
@media all and (min-width:992px){
/* news */
#news {
	min-height: 255px;
}
				.news__item__ttl {
					transition: .4s;
				}
				.news__item__ttl:hover {
					opacity: .7;
				}
				.news__more_btn img {
					position: relative;
					transition: .3s;
					left: 0;
				}
				.news__more_btn:hover img {
					left: 4px;
				}

/* characters */
				.characters__item__image {
					overflow: hidden;
				}
					.characters__item__image > img {
						transform: scale(1);
						-webkit-transition: 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
						transition: 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);	
					}
					.characters__item__image:hover > img {
						transform: scale(1.07);
					}

/* spec */
		.spec__steam {
			transition: .4s;
		}
		.spec__steam:hover {
			transform: scale(1.08);
		}

}

/* Tablet ================================================== */
@media all and (max-width:991px){
/* hero */
#hero {
	height: auto;
}
		.hero__steam_logo {
			width: 84.5px;
			top: 17px;
			left: 18px;
		}
		#ja .hero__copy {
			width: calc((586 / 750) * 100%);
			top: calc((92 / 954.5) * 100%);
			right: calc((80.9 / 750) * 100%);
		}
		#en .hero__copy {
			width: calc((645 / 750) * 100%);
			top: calc((81 / 954.5) * 100%);
			right: calc((48 / 750) * 100%);
		}
		#zh .hero__copy {
			width: calc((398 / 750) * 100%);
			top: calc((108.5 / 954.5) * 100%);
			right: calc((175 / 750) * 100%);
		}
		.hero__logo {
			transform: translate(0%,0%);
		}
		#ja .hero__logo {
			width: 100%;
			bottom: 0;
			left: 0;
		}
		#en .hero__logo {
			width: 100%;
			bottom: 0;
			left: 0;
		}
		#zh .hero__logo {
			width: 100%;
			bottom: 0;
			left: 0;
		}
		.hero__steam {
			width: calc((343.4842 / 750) * 100vw);
			height: calc((84.22 / 750) * 100vw);
			filter: drop-shadow(0px 0px 15px rgba(7,255,255,0.4));
			bottom: calc((26.7586 / 750) * 100vw);
			right: calc((31.7 / 750) * 100vw);
		}
			.hero__steam_btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
				border-radius: calc(6.865333vw - 2px);
				background: rgb(26,154,229);
				background: linear-gradient(0deg, rgba(26,154,229,1) 0%, rgba(29,57,113,1) 53%, rgba(0,20,50,1) 100%);
			}
				.hero__steam_btn__txt {
					width: calc((145.4917 / 343.4842) * 100%);
					margin-right: calc((28.71 / 750) * 100vw);
		}
				.hero__steam_btn__arrow {
					width: calc((18.2 / 750) * 100vw)
				}
		.hero__lily_v_video {
			display: none;
		}

.banner {
	width: 100%;
	height: auto;
	padding: 8.71384vw 4.72756vw;
	background-color: var(--color--black);
}
	.banner__lily_v_video {
		width: 100%;
		height: auto;
	}
		.hero_video_btn {
			width: 100%;
			height: auto;
			cursor: pointer;
		}
			.hero_video_btn img {
				width: 100%;
				height: auto;
			}

/* 共通 */
.section__heading {
	left: 3.8666%;
}
.section__heading_01 {
	width: 5.6374%;
}
.section__heading_02 {
	width: 5.4804%;
	height: auto;
}
.section__heading_03 {
	width: 5.5626%;
}

/* news */
#news {
	min-height: 255px;
	padding: 10.66666vw 0 8vw;
}
	#news .section__heading {
		top: 8.5%;
		left: 3.86%;
	}
	.news__inner {
		width: 84.2666%;
		padding-left: 9.0666%;
		max-width: initial;
	}
		.news__list {
			margin: 0 auto 20px;
		}
			.news__item {
				flex-wrap: wrap;
			}
			.news__item:not(:last-of-type) {
				margin-bottom: 24px;
			}
				.news__item__date {
					width: 80px;
					padding-top: 0px;
					font-size: 12px;
				}
				.news__item::before {
					width: 27px;
					margin-top: 8px;
					margin-right: 0px;
				}
				.news__item__ttl {
					width: 100%;
					height: auto;
					flex: initial;
					margin-top: 3px;
					font-size: 12px;
				}
			.news__more_btn {
				font-size: 12px;
			}
				.news__more_btn img {
					width: 37.5px;
					margin-left: 19px;
					margin-bottom: 5px;
				}

/* introduction */
#introduction {
	padding: 16vw 0 31.73333vw;
}
	#introduction::before,
	#introduction::after {
		width: 0.8vw;
	}
	#introduction::before {
		left: 1.73333%;;
	}
	#introduction::after {
		right: 1.73333%;;
	}
	#introduction .section__heading {
		top: 1.9653%;
		left: 3.86%;
	}
	.introduction__ojb_txt {
		width: 6.5074%;
		top: 2.0231%;
		right: 4.364187%;
	}
	.introduction__inner {
		width: 100%;
		max-width: initial;
	}
		.introduction__heading {
			margin: 0 auto 38px;
			font-size: 3.46666vw;
			position: relative;
			z-index: 2;
		}
			.introduction__contents__logo_mark {
				width: 78.6666%;
				top: 13.16166%;
			}
			.introduction__contents__item_01 {
				margin: 0 auto 5.4666vw;
			}
			.introduction__contents__item_02 {
				display: block;
				width: 100%;
				height: auto;
				margin: 0 auto 5.4666vw;
			}
			.introduction__contents__item_03 {
				align-items: flex-end;
				width: 100%;
				height: auto;
				margin: 0 auto;
			}
				.introduction__contents__item__txt_wrap_01,
				.introduction__contents__item__txt_wrap_02 {
					width: auto;
					position: absolute;
					z-index: 2;
				}
				.introduction__contents__item__txt_wrap_01 {
					padding: 0;
					left: 13.0666vw;
					bottom: 3.7333vw;
				}
				#en .introduction__contents__item__txt_wrap_01 {
					padding-left: 0vw;
					padding-right: 10vw;
				}
				.introduction__contents__item__txt_wrap_02 {
					padding: 0;
					top: 7.6vw;
					right: 8.8vw;
				}
				#en .introduction__contents__item__txt_wrap_02 {
					padding-left: 10vw;
				}
					.introduction__contents__item__txt_01,
					.introduction__contents__item__txt_02 {
						font-size: 2.6666vw;
					}
					.introduction__contents__item__txt_01 {
						text-align: left;
					}
					.introduction__contents__item__txt_02 {
						text-align: right;
					}
					#en .introduction__contents__item__txt_02 {
						margin-top: 22vw;
						text-align: left;
					}
					#en .introduction__contents__item__txt_01,
					#en .introduction__contents__item__txt_02 {
						font-size: 2.6666vw;
					}
						.introduction__contents__item__txt_01 .mid_br {
							display: none;
						}
				.introduction__contents__item__image_01 {
					display: block;
					width: 71.506133%;
					padding-left: 0;
					margin: 0 0 0 auto;
				}
				.introduction__contents__item__image_02 {
					width: 71.506133%;
					max-width: initial;
					margin: 0 auto 3.6vw 0;
					position: initial;
				}
				.introduction__contents__item__image_03 {
					width: 71.506133%;
					max-width: initial;
					margin: 0 0 0 auto;
					position: initial;
				}
				.introduction__contents__item__image_04 {
					display: block;
					width: 71.506133%;
					padding-right: 0;
					margin: 0 auto 0 0;
				}
					.introduction__contents__item__image_01__wrap,
					.introduction__contents__item__image_04__wrap {
						width: 71.506133vw;
						max-width: initial;
						height: 40.610667vw;
						max-height: initial;
					}
					.introduction__contents__item__image_02__wrap,
					.introduction__contents__item__image_03__wrap {
						width: 71.506133vw;
						max-width: initial;
						height: 40.610667vw;
						max-height: initial;
					}

#staff {
	padding: 16vw 0 11.86666vw;
}
	#staff::before,
	#staff::after {
		width: 0.8vw;
	}
	#staff::before {
		left: 1.73333%;
	}
	#staff::after {
		right: 1.73333%;
	}
	#staff .section__heading {
		top: 4.15439%;
		left: 3.86%;
	}
	.staff__ojb_txt {
		width: 6.507426%;
		top: 4.196519%;
		right: 4.37418%;
	}
	.staff__inner {
		width: 86.062133%;
		max-width: initial;
		padding-left: 5.87913vw;
	}
		.staff__logo_mark {
			width: 84.35564%;
			top: calc(0.933333vw + 30px);
			transform: translate(-50%,0%);
		}
		.on_color .staff__logo_mark {
			top: 0.933333vw;
		}
		.staff__list {
			padding-left: 0px;
		}
			.staff_item {
				display: block;
			}
			.staff_item:not(:last-of-type) {
				margin-bottom: 4.66666vw;
			}
				.staff_item__heading {
					width: 100%;
					margin-right: 0;
					margin-bottom: 0.66666vw;
					font-size: 4vw;
					line-height: 1.6;
				}
					.staff_item__heading::after {
						display: none;
					}
				.staff_item__details {
					justify-content: flex-start;
					align-items: flex-start;
					padding-left: 4vw;
					flex-wrap: wrap;
					font-size: 3.46666vw;
					line-height: 1.6;
					position: relative;
				}
					.staff_item__details::before {
						content: '';
						display: block;
						width: 1.5vw;
						height: 1px;
						background-color: var(--color--gold);
						position: absolute;
						top: 3.1vw;
						left: 1vw;
					}
					.staff_item__details__masterpiece {
						padding: 0 2.93333vw;
						margin-top: 1vw;
						position: relative;
					}
						.staff_item__details__masterpiece::before,
						.staff_item__details__masterpiece::after {
							width: 1.46868vw;
							min-height: 100%;
						}
						.staff_item__details__masterpiece__txt {
							width: 100%;
							font-size: 1.6vw;
							white-space: nowrap;
						}
						#zh .staff_item__details__masterpiece__txt {
							white-space: initial;
						}

#spec {
	padding: 10.133333vw 0 9.066666vw;
}
	.spec__inner {
		width: 87%;
		max-width: initial;
	}
		.spec__container {
			display: block;
			width: 100%;
			margin: 0 auto;
		}
			.spec__logo {
				min-width: initial !important;
				padding-top: 0px;
				margin: 0 auto 8.633333vw;
			}
			#ja .spec__logo {
				width: calc((405.7291 / 750) * 100vw);
			}
			#en .spec__logo {
				width: calc((421.0711 / 750) * 100vw);
			}
			#zh .spec__logo {
				width: calc((418.7832 / 750) * 100vw);
			}
			.spec__contents {
				width: 100%;
				margin: 0 auto;
			}
				.spec__contents__heading {
					margin: 0 auto 4vw;
					font-size: 4.8vw;
				}
					.spec__item {
						font-size: 3.2vw;
					}
					.spec__item:not(:last-of-type) {
						margin-bottom: 4vw;
					}
						.spec__item__heading {
							width: 26vw;
						}
		.spec__steam_link {
			padding: 10.1333vw 0 0;
		}
			.spec__steam_widget {
				width: 100%;
				margin: 0px auto 30px;
			}
			.spec__steam {
				width: 320px;
				height: 70px;
				border-radius: 35px;
				padding: 2px;
			}
				.spec__steam_btn {
					padding-top: 3px;
					border-radius: 33px;
				}
					.spec__steam_btn__txt {
						width: 125px;
						margin-right: 20px;
					}
					.spec__steam_btn__arrow {
						width: 24px;
					}
}

/* SP ================================================== */
@media all and (max-width:575px){
/* news */
#news {
	min-height: 210px;
}

/* spec */
			.spec__steam {
				width: 210px;
				height: 52px;
				border-radius: 26px;
			}
				.spec__steam_btn {
					padding-top: 2px;
					border-radius: 24px;
				}
					.spec__steam_btn__txt {
						width: 95px;
						margin-right: 15px;
					}
					.spec__steam_btn__arrow {
						width: 15px;
					}
}