html * {
	/*outline: solid 1px red;*/
}

/* game
##################################### */
#bg_set .bg_pat {
	background-image: none;
}

#main_inner {
	padding: 0;
}

section {
	position: relative;
}

/**
*fv
*/
#fv {
	background-image: url("../img/game/bg_4.png");
	background-size: 100% auto;
	background-position: bottom -12.66666666666667% center;
	background-size: 100% auto;
}
#fv .kv__list {
	position: relative;
}
#fv .absolute.kv {
	width: 100%;
	top: 0;
	left: 0;
}
#fv .caption_1 {
	position: absolute;
	top: 5.333333333333333%;
	right: 0;
}
#fv .caption_2 {
	position: absolute;
}
#fv .detail__title {
	font-family: "Noto Serif JP", serif;
	color: #af252b;
	font-weight: 900;
	transform: skewX(-10deg);
	letter-spacing: 0.09em;
	line-height: 1;
}
#fv .search__button {
	font-family: "Noto Sans JP", sans-serif;
	background: #fff;
	border: solid 2px black;
	border-radius: 100vh;
	width: 100%;
	font-weight: 700;
	position: relative;
}
#fv .precautions {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
}
/**
*fv
*/

/**
*synopsis
*/
#synopsis {
	position: relative;
	background-size: 100% auto;
	background-position: top;
	background-repeat: no-repeat;
}

#synopsis .synopsis__text {
	font-family: "Shippori Mincho", serif;
	color: #755934;
}
/**
*synopsis
*/

/**
* character
*/
#char::before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgb(223, 198, 162);
	background: linear-gradient(
		0deg,
		rgba(223, 198, 162, 0.8) 88%,
		rgba(255, 255, 255, 0.6) 95%
	);
}
.char__list {
	align-items: flex-start;
	background-size: 100% auto;
	background-repeat: no-repeat;
}
.char__list-item {
	width: 100%;
	position: relative;
}
.illustration__main {
	position: absolute;
	top: 0;
	left: 0;
	left: 10%;
	z-index: 10;
}
.color__box {
	position: relative;
}
.color {
	position: absolute;
	content: "";
	width: 0%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #250d33;
}
.active .color {
	width: 100%;
}
.faerdinand .color {
	background-color: #250d33;
}
.lutz .color {
	background-color: #2b6812;
}
.damuel .color {
	background-color: #a98126;
}
.benno .color {
	background-color: #753950;
}
.sylvester .color {
	background-color: #1a3d77;
}
.next__prev-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: absolute;
	right: 0;
}
.next__prev-button .char_next:hover,
.next__prev-button .char_prev:hover {
	opacity: 0.55;
	transition: opacity 0.3s linear;
}
.next__prev-button .char_next.swiper-button-disabled,
.next__prev-button .char_prev.swiper-button-disabled {
	opacity: 0.55;
	transition: opacity 0.3s linear;
}
.next__prev-button button {
	position: relative;
	background: none;
	border: none;
	cursor: pointer;
	width: 30.76923076923077%;
	padding: 0;
}
.next__prev-button::before {
	position: absolute;
	content: "";
	background-color: #fff;
	height: 2px;
	width: 45%;
	transform: translateX(-50%);
	left: 50%;
	top: 32%;
}
.role-en {
	position: absolute;
	top: -9%;
	right: 0;
	opacity: 0.3;
	font-family: vdl-kuromincho, sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 50px;
	color: #fff;
	-webkit-text-stroke: 1px #716240;
	line-height: 1;
	letter-spacing: -0.05em;
	padding-right: 5.333333333333333%;
}
.char__label {
	padding: 13.33333333333333% 5.333333333333333%;
	font-family: "Noto Serif JP", serif;
	color: #755934;
}

.role-ja {
	position: relative;
	font-weight: 700;
	-webkit-text-stroke: 0.5px #fff;
	text-stroke: 1px #fff;
	text-shadow: 1px 1px 0 #cbb68e, -1px -1px 0 #cbb68e, -1px 1px 0 #cbb68e,
		1px -1px 0 #cbb68e, 0px 1px 0 #cbb68e, 0-1px 0 #cbb68e, -1px 0 0 #cbb68e,
		1px 0 0 #cbb68e;
	transform: skewX(-10deg);
}
.role-ja img {
	vertical-align: middle;
}
.role-ja::before {
	position: absolute;
	content: "";
	top: 0;
	background-image: url("../img/game/role_set.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
	height: 100%;
}
.name {
	font-size: 20px;
	transform: skewX(-10deg);
	font-weight: 900;
}
.char__dialogue {
	font-size: 18px;
	transform: skewX(-10deg);
	font-weight: 700;
	margin-top: 8.955223880597015%;
}
/**
* character
*/

/**
* gallery
*/
#gallery {
	position: relative;
	background-size: cover;
	background-position: center;
}

#gallery .game__image-list {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	overflow: hidden;
}
#gallery .game__image-item {
	position: absolute;
	transition: transform, z-index;
	transition-duration: 0.2s;
	transition-timing-function: linear;
}
#gallery .game__image-item:hover {
	z-index: 10;
	transform: scale(1.2);
	transition: transform, z-index;
	transition-duration: 0.2s;
	transition-timing-function: linear;
}
/**
* gallery
*/

/**
* common
*/
section .label {
	position: absolute;
	z-index: 10;
}
#btn_top {
	background-color: #9a1e23;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
#btn_top .btn {
	color: #fff;
	font-weight: 900;
	font-size: 15px;
}
#footer {
	position: relative;
	background-image: url("../img/game/footer_bg.png");
	background-size: cover;
}
#footer::before {
	background-image: none;
}
.semi {
	font-weight: 600;
}
.extra {
	font-weight: 800;
}
.red {
	color: #9a1e23;
}
.fw-black {
	font-weight: 900;
}
.opacity0 {
	opacity: 0;
}
.absolute {
	position: absolute;
}
i.bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
i.bg::before,
i.bg::after {
	pointer-events: none;
}
div.bg {
	position: relative;
}
.line_bg::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/game/line.png");
	background-position: bottom;
	background-repeat: repeat-x;
	background-size: auto 100%;
}
.bg2_bg::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/game/bg_2.png");
	background-position: top;
	background-repeat: repeat-x;
	background-size: 100% auto;
}
.search_icon::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/game/search_icon.png");
	background-position: center right 10%;
	background-repeat: no-repeat;
	background-size: auto 60%;
}
.bg.liner {
	background-image: url("../img/game/line_bg.png");
	background-position: bottom center;
	background-repeat: repeat-x;
	background-size: auto 100%;
}
/**
* common
*/

/* game pc
===================================== */
@media screen and (min-width: 821px) {
	#stage {
		min-width: 821px;
	}
	.sp_only {
		display: none;
	}
	#fv .caption_1 {
		width: 23.4325%;
	}
	#fv .caption_2 {
		display: flex;
		flex-direction: column-reverse;
		width: 50%;
		left: 0;
		bottom: 0;
		margin-bottom: 12%;
		padding-left: 3.125%;
	}
	#fv .caption_2 .date {
		width: 77.333333%;
	}
	#fv .caption_2 .logo {
		width: 59.5%;
		margin: 2.5% 0;
	}
	#fv .caption_2 .text {
		width: 50.166667%;
		margin-left: 4.166666666666667%;
	}
	#fv #detail {
		width: 50%;
		position: absolute;
		bottom: 0;
		left: 0;
		padding-left: 3.125%;
		margin: 3.125% 0;
	}
	#fv .detail__title {
		width: 50.83333333333333%;
		margin-bottom: 2%;
	}
	#fv .fv__logo {
		position: absolute;
		width: 89.33333333333333%;
		margin: 8.333333333333333% auto 0;
	}
	#fv .app__list {
		display: inline-flex;
		gap: 1vw;
		width: 50%;
	}
	#fv .search {
		display: inline-block;
		width: 46%;
		margin-left: 3%;
	}
	#fv .search__button {
		font-size: 27px;
		padding: 2% 10% 2% 0;
	}
	#fv .precautions {
		color: #935120;
		font-size: 0.781vw;
		position: absolute;
		bottom: -20%;
		left: 0;
		margin-left: 6%;
	}
	div.line_bg {
		padding-top: 3.90625%;
	}
	div.bg2_bg {
		padding-top: 0%;
		display: none;
	}
	#synopsis {
		background-image: url("../img/game/bg_2_PC.png");
		padding-top: 50%;
	}
	.synopsis__text {
		position: absolute;
		top: 10%;
		left: 50%;
		transform: translateX(-50%);
		font-size: 1.953vw;
		line-height: 1.8;
		text-align: center;
		width: 100%;
	}
	.synopsis__text .emphasis {
		font-size: 3.125vw;
		text-align: center;
		margin-bottom: 5px;
	}
	#synopsis .label {
		margin-top: 10.15625%;
	}
	.semi {
		position: relative;
	}
	.semi::before {
		position: absolute;
		content: "";
		width: 110px;
		height: 80px;
		background-image: url("../img/game/synopsis_set.png");
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		top: 70%;
		left: 75%;
	}
	#char .label {
		margin-top: 5.03125%;
	}
	.char__list {
		background-image: url("../img/game/char_faerdinand_theme_PC.png");
		background-position: top 0 center;
	}
	.char__list-item {
		padding-top: 7.8125%;
	}
	.illustration__main {
		width: 12.890625%;
		margin-top: 1.5625%;
		padding-top: 7.8125%;
		left: 67.1875%;
	}
	.lutz .illustration__main {
		margin-top: 14.0625%;
		width: 10.9375%;
	}
	.benno .illustration__main {
		width: 16.40625%;
		left: 64.84375%;
	}
	.sylvester .illustration__main {
		width: 18.75%;
		left: 65.1875%;
		margin-top: 1.5625%;
		padding-top: 7.8125%;
	}
	.illustration__bg {
		display: flex;
		flex-flow: row-reverse;
		align-items: flex-end;
		width: 64.0625%;
		margin: auto;
		padding: 0 2.439024390243902%;
		gap: 1.923076923076923%;
		box-sizing: border-box;
	}
	.bg__bg {
		width: 20.51282051282051%;
	}
	.bg__picture {
		width: 79.48717948717949%;
	}
	.color__box {
		padding-top: 7.8125%;
		margin-top: 6.25%;
	}
	.char__label {
		position: absolute;
		top: 0;
		left: 0;
		width: 80%;
		margin-top: 7.8125%;
		width: 49%;
		margin-left: 17.96875%;
		padding: 0 2.10077519379845%;
		box-sizing: border-box;
	}
	.role__wrap {
		padding-left: 9.016393442622951%;
	}
	.faerdinand .char__dialogue {
		width: 73.77049180327869%;
	}
	.lutz .char__dialogue {
		width: 81.9672131147541%;
	}
	.benno .char__dialogue {
		width: 76.22950819672131%;
	}
	.sylvester .char__dialogue {
		width: 81.9672131147541%;
	}
	.role-ja {
		line-height: 1;
		font-size: 3.90625vw;
	}
	.role-ja::before {
		left: -9.016393442622951%;
		width: 9.016393442622951%;
	}
	.role-en {
		font-size: 7.8125vw;
		left: 0;
		bottom: 0;
		transform: translate(3.125%, -24.125%);
	}
	.next__prev-button {
		bottom: 20.125%;
		width: 10.9375%;
		margin-right: 3.125%;
	}
	.bg.liner {
		padding-top: 12.890625%;
	}
	#gallery {
		background-image: url("../img/game/bg_1_PC.png");
		padding-top: 45.3125%;
	}
	#gallery .label {
		margin-top: 7.03125%;
	}
	.game__image-item.faerdinand {
		width: 20.3125%;
		top: 14.6551724137931%;
		left: 15.625%;
	}
	.game__image-item.benno {
		width: 23.828125%;
		top: 19.82758620689655%;
		left: 33.9375%;
		z-index: 5;
	}
	.game__image-item.kv {
		width: 33.984375%;
		left: 60.5%;
		top: 41.37931034482759%;
		z-index: 5;
	}
	.game__image-item.damuel {
		width: 25.78125%;
		top: 13.79310344827586%;
		left: 53.90625%;
	}
	.game__image-item.sylvester {
		width: 25.390625%;
		top: 46.55172413793103%;
		left: 19.484375%;
		z-index: 5;
	}
	.game__image-item.lutz {
		width: 18.75%;
		top: 58.62068965517241%;
		left: 45.421875%;
	}
	#btn_top {
		height: 60px;
	}
	section .label {
		width: 10%;
	}
	.label.left {
		top: 0%;
		left: 0%;
		margin-left: 3.125%;
	}
	.label.right {
		top: 0%;
		right: 0%;
		margin-right: 3.125%;
	}
	.bnr {
		width: 14.0625% !important;
		margin: 0 auto 1.5625% !important;
	}
}

/* game sp
===================================== */
@media screen and (max-width: 820px) {
	#stage {
		min-width: 375px;
	}
	.pc_only {
		display: none;
	}
	#fv .caption_1 {
		width: 54.66666666666667%;
	}
	#fv .caption_2 {
		width: 100%;
		bottom: -3%;
		right: 0;
	}
	#fv .caption_2 .date {
		width: 89.33333333333333%;
		margin: auto;
	}
	#fv .caption_2 .logo {
		display: none;
	}
	#fv .caption_2 .text {
		width: 78.66666666666667%;
		margin: 5.333333333333333% auto 0;
	}
	#fv #detail {
		padding: 6.666666666666667% 5.333333333333333% 0;
	}
	#fv .fv__logo {
		width: 89.33333333333333%;
		margin: 8.333333333333333% auto 0;
	}
	#fv .app__list {
		position: relative;
		display: flex;
		gap: 2vw;
		margin: 7.462686567164179% 0;
	}
	#fv .search__button {
		font-size: 27px;
		padding: 2% 10% 2% 0;
	}
	#fv .detail__title {
		width: 100%;
	}
	#fv .precautions {
		color: #d6d6d6;
		font-size: 10px;
		position: absolute;
		bottom: -40%;
		left: 0;
	}
	.bg2_bg,
	.line_bg {
		height: 25px;
	}

	#synopsis {
		background-image: url("../img/game/bg_2.png");
		padding-top: 171%;
	}
	.synopsis__text {
		position: absolute;
		top: 0;
		right: 0;
		margin: 13.33333333333333% 5.333333333333333% 21.33333333333333%
			21.33333333333333%;
		font-size: 15px;
		line-height: 1.8;
	}
	.synopsis__text .emphasis {
		font-size: 30px;
		text-align: center;
		margin-bottom: 5px;
	}
	.char__list {
		background-image: url("../img/game/char_faerdinand_theme.png");
		background-position: right bottom;
	}
	.char__list-item {
		padding-top: 20%;
	}
	.illustration__bg {
		top: 0;
		right: 0;
		width: 86.66666666666667%;
		display: flex;
		align-items: flex-end;
		gap: 3.846153846153846%;
		margin-left: auto;
	}
	.illustration__main {
		position: absolute;
		top: 0;
		left: 0;
		width: 34.66666666666667%;
		left: 10%;
		z-index: 10;
		margin-top: 24%;
	}
	.lutz .illustration__main {
		position: absolute;
		top: 0;
		width: 32%;
		left: 15.33333333333333%;
		z-index: 10;
		margin-top: 60.33333333333333%;
	}
	.benno .illustration__main {
		position: absolute;
		top: 0;
		left: 5.333333333333333%;
		width: 42.66666666666667%;
		z-index: 10;
		margin-top: 24%;
	}
	.sylvester .illustration__main {
		position: absolute;
		top: 0;
		left: 8%;
		width: 49.66666666666667%;
		left: 5.333333333333333%;
		z-index: 10;
		margin-top: 22%;
	}
	.next__prev-button {
		bottom: 12%;
		width: 35.32394366197183%;
		margin-right: 5.333333333333333%;
	}
	.role__wrap {
		padding-left: 17.16417910447761%;
	}
	.role-en {
		opacity: 0.4;
	}
	.faerdinand .role-en {
		font-size: 45px;
	}
	.role-ja {
		font-size: 40px;
		letter-spacing: -0.15em;
	}
	.role-ja::before {
		left: -17.16417910447761%;
		width: 16%;
	}
	.color__box {
		padding-top: 38%;
		margin-top: 9.333333333333333%;
	}
	#gallery {
		background-image: url("../img/game/bg_1.png");
		padding-top: 156%;
	}
	.game__image-item.faerdinand {
		width: 45.33333333333333%;
		top: 8.620689655172414%;
		left: 22.66666666666667%;
	}
	.game__image-item.benno {
		width: 44%;
		top: 14.6551724137931%;
		left: 52.66666666666667%;
	}
	.game__image-item.kv {
		width: 66.66666666666667%;
		top: 30.17241379310345%;
		left: 26.66666666666667%;
		z-index: 5;
	}
	.game__image-item.damuel {
		width: 50%;
		top: 53.44827586206897%;
		left: 46.66666666666667%;
	}
	.game__image-item.sylvester {
		width: 48%;
		top: 61.20689655172414%;
		left: 3.333333333333333%;
		z-index: 5;
	}
	.game__image-item.lutz {
		width: 42.66666666666667%;
		top: 75.86206896551724%;
		left: 42%;
	}
	section .label {
		width: 16%;
	}
	.bg.liner {
		height: 75px;
	}
	#btn_top {
		height: 75px;
	}
	.label.left {
		top: 8.547008547008547%;
		left: 5.333333333333333%;
	}
	.label.right {
		top: 8.547008547008547%;
		right: 5.333333333333333%;
	}
}