@charset "UTF-8";
/**
 *
 * page-about.scss
 *
 */
.about-main {
	position: relative;
	background-color: var(--color-main);
}

.about-main::after {
	content: '';
	display: block;
	width: 100%;
	height: 100px;
	background-color: var(--color-main);
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 0;
}

/* ------------------------------------------------------------
 about-container
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.about-container {
		padding: 0 0 13.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-container {
		padding: 0 0 9.6rem ;
	}
}

/* ------------------------------------------------------------
 about-hero
------------------------------------------------------------ */
.about-hero {
	container-type: inline-size;
	position: relative;
	padding-top: 0.1px;
}

@media screen and (min-width: 1024px) {
	.about-hero {
		height: 137.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-hero {
		height: 135.6rem ;
	}
}

.about-hero::before {
	content: '';
	display: block;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: var(--color-gradation2);
	pointer-events: none;
}

@media screen and (min-width: 1024px) {
	.about-hero::before {
		height: 105.7rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-hero::before {
		height: 51.5rem ;
	}
}

/* ----------------------------------------
 about-hero__contents
---------------------------------------- */
.about-hero__contents {
	z-index: 10;
}

@media screen and (min-width: 1024px) {
	.about-hero__contents {
		position: absolute;
		top: 29.2rem ;
		right: 8.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__contents {
		position: relative;
		color: var(--color-txt2);
		margin-top: 57.4rem ;
	}
}

.about-hero__catch {
	font-weight: 800;
	letter-spacing: 0.02em;
}

@media screen and (min-width: 1024px) {
	.about-hero__catch {
		font-size: var(--font-size26);
		--line-height: 1.76923;
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__catch {
		text-align: center;
		font-size: var(--font-size18);
		--line-height: 1.72222;
	}
}

@media screen and (min-width: 1024px) {
	.about-hero__txt {
		width: 32rem ;
		margin-top: 3rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__txt {
		width: 28.2rem ;
		margin-inline: auto;
		margin-top: 2.2rem ;
	}
}

/* ----------------------------------------
 about-hero__visual
---------------------------------------- */
/* ---------- about-hero__visual__chara ---------- */
/* ----- about-hero__visual__main ----- */
.about-hero__visual__main {
	position: absolute;
	z-index: 3;
	display: flex;
	justify-content: center;
}

@media screen and (min-width: 1024px) {
	.about-hero__visual__main {
		width: calc( var(--width) / 1500 * 100cqw);
		top: var(--top);
		left: calc( var(--left) / 1500 * 100cqw);
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__visual__main {
		width: calc( var(--width) / 400 * 100cqw * 0.4138618);
		top: calc( 21.1rem + var(--top) * 0.29872167);
		left: calc( var(--left) / 400 * 100cqw * 0.14658375);
	}
}

.about-hero__visual__main.is-active div {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.about-hero__visual__main div {
	position: relative;
	opacity: 0;
	-webkit-transform: scale(0);
	transform: scale(0);
	transition: var(--transition-slider-scale);
	transition-property: opacity transform;
	transition-delay: 200ms;
}

@media screen and (min-width: 1024px) {
	.about-hero__visual__main div {
		width: calc( var(--width) * 0.1rem);
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__visual__main div {
		width: calc( var(--width) * 0.1rem * 0.4138618);
	}
}

.about-hero__visual__main img:nth-of-type(2) {
	position: absolute;
	z-index: 1;
}

@media screen and (min-width: 1024px) {
	.about-hero__visual__main img:nth-of-type(2) {
		width: 11.1rem ;
		top: var(--top);
		left: var(--left);
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__visual__main img:nth-of-type(2) {
		width: 7.6rem ;
		top: calc( var(--top) * 0.04310465);
		left: calc( var(--left) * -0.14445405);
	}
}

.about-hero__visual__main.-unique1 {
	--width: 628;
	--top: 15.2rem ;
	--left: 393;
}

.about-hero__visual__main.-unique1 img:nth-of-type(2) {
	--top: 14.6rem ;
	--left: 5.7rem ;
}

.about-hero__visual__main.-unique2 {
	--width: 755;
	--top: 3.5rem ;
	--left: 407;
}

.about-hero__visual__main.-unique2 img:nth-of-type(2) {
	--top: 24.5rem ;
	--left: 6.3rem ;
}

@media screen and (max-width: 1023px) {
	.about-hero__visual__main.-unique2 img:nth-of-type(2) {
		left: 3rem ;
	}
}

.about-hero__visual__main.-unique3 {
	--width: 666;
	--top: 21.4rem ;
	--left: 448;
}

.about-hero__visual__main.-unique3 img:nth-of-type(2) {
	--top: 4rem ;
	--left: 41.1rem ;
}

@media screen and (max-width: 1023px) {
	.about-hero__visual__main.-unique3 img:nth-of-type(2) {
		left: 18rem ;
	}
}

/* ----- about-hero__visual__main ----- */
.about-hero__visual__sub {
	position: absolute;
	z-index: 1;
	display: flex;
	justify-content: center;
	opacity: 0;
	-webkit-transform: scale(0);
	transform: scale(0);
	transition: var(--transition-slider-scale);
	transition-property: opacity transform;
}

.about-hero__visual__sub.is-active {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

@media screen and (min-width: 1024px) {
	.about-hero__visual__sub {
		width: calc( var(--width) / 1500 * 100cqw);
		top: var(--top);
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__visual__sub {
		width: calc( var(--width) / 400 * 100cqw * 0.4138618);
		top: calc( var(--top) * 0.70708431);
	}
}

.about-hero__visual__sub.-left {
	transition-delay: 0ms;
}

@media screen and (min-width: 1024px) {
	.about-hero__visual__sub.-left {
		left: var(--side);
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__visual__sub.-left {
		left: calc( var(--side) * -0.04327996);
	}
}

.about-hero__visual__sub.-right {
	transition-delay: 400ms;
}

@media screen and (min-width: 1024px) {
	.about-hero__visual__sub.-right {
		right: var(--side);
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__visual__sub.-right {
		right: calc( var(--side) * -0.04327996);
	}
}

@media screen and (min-width: 1024px) {
	.about-hero__visual__sub img {
		width: calc( var(--width) * 0.1rem);
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__visual__sub img {
		width: calc( var(--width) * 0.1rem * 0.4138618);
	}
}

.about-hero__visual__sub.-unique1 {
	--width: 176;
	--top: 64.6rem ;
	--side: 5.33333cqw ;
}

.about-hero__visual__sub.-unique2 {
	--width: 171;
	--top: 64.1rem ;
	--side: 6cqw ;
}

.about-hero__visual__sub.-unique3 {
	--width: 170;
	--top: 66.7rem ;
	--side: 6.93333cqw ;
}

/* ---------- about-hero__visual__burst ---------- */
.about-hero__visual__burst {
	position: absolute;
	left: 0;
	z-index: 1;
	width: 100%;
	display: flex;
	justify-content: center;
	pointer-events: none;
	-webkit-animation: rotate var(--animation-rotate);
	animation: rotate var(--animation-rotate);
}

@media screen and (min-width: 1024px) {
	.about-hero__visual__burst {
		--width: 78rem ;
		top: 24.1rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__visual__burst {
		--width: 32.3rem ;
		top: 29.2rem ;
	}
}

.about-hero__visual__burst img {
	width: var(--width);
}

/* ----------------------------------------
 about-hero__bg
---------------------------------------- */
.about-hero__bg {
	pointer-events: none;
}

/* ---------- about-hero__bg__triangle ---------- */
.about-hero__bg__triangle {
	position: absolute;
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}

.about-hero__bg__triangle.-unique1 {
	background-image: url("../img/about/hero_triangle_1.webp");
	z-index: 1;
}

@media screen and (min-width: 1024px) {
	.about-hero__bg__triangle.-unique1 {
		width: 81.2cqw ;
		height: 65.2rem ;
		top: -6.5rem ;
		left: -2.73333cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__bg__triangle.-unique1 {
		width: 130.5cqw ;
		height: 41.2rem ;
		top: -11.2rem ;
		left: -9.75cqw ;
	}
}

.about-hero__bg__triangle.-unique2 {
	background-image: url("../img/about/hero_triangle_2.webp");
	z-index: 2;
}

@media screen and (min-width: 1024px) {
	.about-hero__bg__triangle.-unique2 {
		width: 40.13333cqw ;
		height: 93.9rem ;
		top: -8.6rem ;
		right: -2.73333cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__bg__triangle.-unique2 {
		width: 72.5cqw ;
		height: 43.6rem ;
		top: -1.3rem ;
		right: -6.75cqw ;
	}
}

.about-hero__bg__triangle.-unique3 {
	background-image: url("../img/about/hero_triangle_3.webp");
	z-index: 0;
}

@media screen and (min-width: 1024px) {
	.about-hero__bg__triangle.-unique3 {
		width: 34.33333cqw ;
		height: 96.5rem ;
		top: -13.5rem ;
		left: -3.33333cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__bg__triangle.-unique3 {
		width: 59.75cqw ;
		height: 44.8rem ;
		top: 7.8rem ;
		left: -4.75cqw ;
	}
}

/* ---------- about-hero__bg__fan ---------- */
.about-hero__bg__fan {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 2;
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}

@media screen and (min-width: 1024px) {
	.about-hero__bg__fan {
		width: 125cqw ;
		height: 65.3rem ;
		top: 72.3rem ;
		background-image: url("../img/about/hero_fan-pc.webp");
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__bg__fan {
		width: 332.5cqw ;
		height: 86.1rem ;
		top: 49.3rem ;
		background-image: url("../img/about/hero_fan-sp.webp");
	}
}

/* ---------- about-hero__bg__star ---------- */
.about-hero__bg__star {
	--z-index: 2;
}

@media screen and (min-width: 1024px) {
	.about-hero__bg__star.-unique1 {
		--width: 10.624;
		--height: 1.0364rem ;
		top: 6.0576rem ;
		left: 27.00153cqw ;
	}
	.about-hero__bg__star.-unique2 {
		--width: 13.455;
		--height: 1.3125rem ;
		top: 10.0671rem ;
		left: 17.6398cqw ;
	}
	.about-hero__bg__star.-unique3 {
		--width: 27.747;
		--height: 2.8684rem ;
		top: 13.3658rem ;
		left: 29.76067cqw ;
	}
	.about-hero__bg__star.-unique4 {
		--width: 13.872;
		--height: 1.434rem ;
		top: 18.7088rem ;
		left: 37.44407cqw ;
	}
	.about-hero__bg__star.-unique5 {
		--width: 13.877;
		--height: 1.3537rem ;
		top: 11.8298rem ;
		left: 57.85213cqw ;
	}
	.about-hero__bg__star.-unique6 {
		--width: 11.77;
		--height: 1.1481rem ;
		top: 13.9284rem ;
		left: 70.4772cqw ;
	}
	.about-hero__bg__star.-unique7 {
		--width: 13.325;
		--height: 1.2998rem ;
		top: 17.4827rem ;
		left: 82.7172cqw ;
	}
	.about-hero__bg__star.-unique8 {
		--width: 20.545;
		--height: 2.1238rem ;
		top: 29.5396rem ;
		left: 92.70493cqw ;
	}
	.about-hero__bg__star.-unique9 {
		--width: 18.543;
		--height: 1.9168rem ;
		top: 39.9477rem ;
		left: 88.13727cqw ;
	}
	.about-hero__bg__star.-unique10 {
		--width: 19.875;
		--height: 2.0546rem ;
		top: 54.9625rem ;
		left: 90.55867cqw ;
	}
	.about-hero__bg__star.-unique11 {
		--width: 14.115;
		--height: 1.4592rem ;
		top: 54.0726rem ;
		left: 97.7294cqw ;
	}
	.about-hero__bg__star.-unique12 {
		--width: 15.296;
		--height: 1.4921rem ;
		top: 33.4817rem ;
		left: 14.70313cqw ;
	}
	.about-hero__bg__star.-unique13 {
		--width: 11.77;
		--height: 1.1481rem ;
		top: 43.7029rem ;
		left: 0.84213cqw ;
	}
	.about-hero__bg__star.-unique14 {
		--width: 19.875;
		--height: 2.0546rem ;
		top: 47.1827rem ;
		left: 2.42533cqw ;
	}
	.about-hero__bg__star.-unique15 {
		--width: 13.325;
		--height: 1.2998rem ;
		top: 49.2619rem ;
		left: 20.62233cqw ;
	}
	.about-hero__bg__star.-unique16 {
		--width: 13.944;
		--height: 1.3603rem ;
		top: 58.8332rem ;
		left: 13.56093cqw ;
	}
	.about-hero__bg__star.-unique17 {
		--width: 27.747;
		--height: 2.8684rem ;
		top: 73.7187rem ;
		left: 16.11267cqw ;
	}
	.about-hero__bg__star.-unique18 {
		--width: 13.075;
		--height: 1.2755rem ;
		top: 95.4837rem ;
		left: 4.7092cqw ;
	}
	.about-hero__bg__star.-unique19 {
		--width: 26.863;
		--height: 2.777rem ;
		top: 99.2024rem ;
		left: 7.42133cqw ;
	}
	.about-hero__bg__star.-unique20 {
		--width: 18.03;
		--height: 1.8639rem ;
		top: 87.675rem ;
		left: 26.25447cqw ;
	}
	.about-hero__bg__star.-unique21 {
		--width: 13.944;
		--height: 1.3603rem ;
		top: 81.7183rem ;
		left: 28.31487cqw ;
	}
	.about-hero__bg__star.-unique22 {
		--width: 10.396;
		--height: 1.0142rem ;
		top: 91.5684rem ;
		left: 46.10267cqw ;
	}
	.about-hero__bg__star.-unique23 {
		--width: 18.365;
		--height: 1.8985rem ;
		top: 79.0872rem ;
		left: 96.84433cqw ;
	}
	.about-hero__bg__star.-unique24 {
		--width: 15.747;
		--height: 1.6278rem ;
		top: 84.5682rem ;
		left: 85.2784cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__bg__star.-unique1 {
		--width: 8.095;
		--height: 0.7897rem ;
		top: 1.6613rem ;
		left: 43.77375cqw ;
	}
	.about-hero__bg__star.-unique2 {
		--width: 7.849;
		--height: 0.7656rem ;
		top: 10.3571rem ;
		left: 10.8825cqw ;
	}
	.about-hero__bg__star.-unique3 {
		--width: 6.197;
		--height: 0.6046rem ;
		top: 8.0182rem ;
		left: 31.361cqw ;
	}
	.about-hero__bg__star.-unique4 {
		--width: 6.866;
		--height: 0.6697rem ;
		top: 7.7427rem ;
		left: 88.27075cqw ;
	}
	.about-hero__bg__star.-unique5 {
		--width: 7.773;
		--height: 0.7582rem ;
		top: 14.6828rem ;
		left: 73.358cqw ;
	}
	.about-hero__bg__star.-unique6 {
		--width: 11.594;
		--height: 1.1985rem ;
		top: 16.4435rem ;
		left: 85.54225cqw ;
	}
	.about-hero__bg__star.-unique7 {
		--width: 11.984;
		--height: 1.2389rem ;
		top: 21.716rem ;
		left: 95.206cqw ;
	}
	.about-hero__bg__star.-unique8 {
		--width: 10.816;
		--height: 1.1181rem ;
		top: 27.7873rem ;
		left: 85.21425cqw ;
	}
	.about-hero__bg__star.-unique9 {
		--width: 8.923;
		--height: 0.8704rem ;
		top: 24.0155rem ;
		left: 4.4585cqw ;
	}
	.about-hero__bg__star.-unique10 {
		--width: 16.186;
		--height: 1.6732rem ;
		top: 19.2996rem ;
		left: 21.191cqw ;
	}
	.about-hero__bg__star.-unique11 {
		--width: 8.092;
		--height: 0.8365rem ;
		top: 22.4163rem ;
		left: 37.9985cqw ;
	}
	.about-hero__bg__star.-unique12 {
		--width: 7.773;
		--height: 0.7582rem ;
		top: 33.2205rem ;
		left: 17.40675cqw ;
	}
	.about-hero__bg__star.-unique13 {
		--width: 8.134;
		--height: 0.7935rem ;
		top: 38.8038rem ;
		left: 1.96cqw ;
	}
	.about-hero__bg__star.-unique14 {
		--width: 16.186;
		--height: 1.6732rem ;
		top: 46.8252rem ;
		left: 14.7725cqw ;
	}
	.about-hero__bg__star.-unique15 {
		--width: 8.946;
		--height: 0.8727rem ;
		top: 42.92rem ;
		left: 91.861cqw ;
	}
	.about-hero__bg__star.-unique16 {
		--width: 10.517;
		--height: 1.0872rem ;
		top: 55.628rem ;
		left: 29.72675cqw ;
	}
	.about-hero__bg__star.-unique17 {
		--width: 6.064;
		--height: 0.5916rem ;
		top: 57.8992rem ;
		left: 73.1445cqw ;
	}
	.about-hero__bg__star.-unique18, .about-hero__bg__star.-unique19, .about-hero__bg__star.-unique20, .about-hero__bg__star.-unique21, .about-hero__bg__star.-unique22, .about-hero__bg__star.-unique23, .about-hero__bg__star.-unique24 {
		display: none;
	}
}

/* ----------------------------------------
 about-hero__next
---------------------------------------- */
.about-hero__next {
	position: absolute;
	z-index: 12;
}

@media screen and (min-width: 1024px) {
	.about-hero__next {
		right: 2.2cqw ;
		bottom: -4.1rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__next {
		left: 50%;
		bottom: 27.2rem ;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

.about-hero__next__illust {
	position: absolute;
	z-index: 0;
}

@media screen and (min-width: 1024px) {
	.about-hero__next__illust {
		width: 16.1rem ;
		top: -16.4rem ;
		right: 13rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__next__illust {
		width: 9.4rem ;
		top: -9.8rem ;
		right: 4.6rem ;
	}
}

/* ----------------------------------------
 about-hero__nav
---------------------------------------- */
.about-hero__nav {
	position: absolute;
	z-index: 12;
}

@media screen and (min-width: 1024px) {
	.about-hero__nav {
		width: 32rem ;
		left: 6cqw ;
		bottom: 5.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__nav {
		width: 24rem ;
		left: 50%;
		bottom: -0.7rem ;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

/* ---------- about-hero__nav__inner ---------- */
.about-hero__nav__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	background-color: var(--color-main);
}

@media screen and (min-width: 1024px) {
	.about-hero__nav__inner {
		--corner: 0.8rem ;
		padding: 4.2rem 3.4rem 3.6rem 3.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__nav__inner {
		--corner: 0.6rem ;
		padding: 3.2rem 2.6rem 2.7rem 2.8rem ;
	}
}

/* ----- about-hero__nav__title ----- */
.about-hero__nav__title {
	font-family: var(--font-sans-serif);
	padding-top: 0.1px;
	padding-bottom: 0.1px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.about-hero__nav__title::before, .about-hero__nav__title::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	font-size: inherit;
}

.about-hero__nav__title::before {
	margin-top: var(--font-sans-serif-top);
}

.about-hero__nav__title::after {
	margin-bottom: var(--font-sans-serif-bottom);
}

@media screen and (min-width: 1024px) {
	.about-hero__nav__title {
		font-size: var(--font-size18);
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__nav__title {
		font-size: var(--font-size14);
	}
}

/* ----- about-hero__nav__list ----- */
@media screen and (min-width: 1024px) {
	.about-hero__nav__list {
		width: 16rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__nav__list {
		width: 12rem ;
	}
}

.about-hero__nav__list li {
	border-bottom: var(--solid-current);
}

@media screen and (min-width: 1024px) {
	.about-hero__nav__list li:nth-of-type(1) {
		margin-top: -2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__nav__list li:nth-of-type(1) {
		margin-top: -1.5rem ;
	}
}

.about-hero__nav__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

@media screen and (min-width: 1024px) {
	.about-hero__nav__list a {
		padding: 2rem 1rem 1.6rem 0.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__nav__list a {
		padding: 1.5rem 0.8rem 1.2rem 0.3rem ;
	}
}

.about-hero__nav__list span {
	display: block;
	color: var(--color-txt2);
}

@media screen and (min-width: 1024px) {
	.about-hero__nav__list span {
		font-size: var(--font-size16);
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__nav__list span {
		font-size: var(--font-size12);
	}
}

/* ---------- about-hero__nav__illust ---------- */
.about-hero__nav__illust {
	position: absolute;
	z-index: 1;
}

@media screen and (min-width: 1024px) {
	.about-hero__nav__illust {
		width: 18.7rem ;
		left: -6rem ;
		bottom: -9rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-hero__nav__illust {
		width: 14.1rem ;
		left: -4.5rem ;
		bottom: -6.8rem ;
	}
}

/* ------------------------------------------------------------
 about-story

 about-storyのみ、階層が深く [about-story__hoge] とクラス名が長くなるので、
 story-fuga の形式を採用する
------------------------------------------------------------ */
/* ------------------------------------------------------------
 story-intro
------------------------------------------------------------ */
.story-intro {
	position: relative;
}

/* ----------------------------------------
 story-intro__heading
---------------------------------------- */
.story-intro__heading {
	position: relative;
	z-index: 10;
}

@media screen and (min-width: 1024px) {
	.story-intro__heading {
		height: 182.3rem ;
		margin-top: -21.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-intro__heading {
		height: 110.1rem ;
		margin-top: -10.9rem ;
	}
}

.story-intro__heading::before {
	content: '';
	display: block;
	height: 100%;
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

@media screen and (min-width: 1024px) {
	.story-intro__heading::before {
		width: 103.53333cqw ;
		background-image: url("../img/about/story_intro_bg-pc.webp");
		left: 50%;
	}
}

@media screen and (max-width: 1023px) {
	.story-intro__heading::before {
		width: 129.75cqw ;
		background-image: url("../img/about/story_intro_bg-sp.webp");
		left: 56%;
	}
}

/* ---------- story-intro__header ---------- */
.story-intro__header {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 1;
}

@media screen and (min-width: 1024px) {
	.story-intro__header {
		width: 99.1rem ;
		top: 64.9rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-intro__header {
		width: 33.3rem ;
		top: 40rem ;
	}
}

.story-intro__title {
	display: grid;
	gap: 1.9rem ;
}

.story-intro__title picture {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.story-intro__title picture {
		z-index: 3;
	}
}

@media screen and (max-width: 1023px) {
	.story-intro__title picture {
		width: 31.1rem ;
		margin-inline: auto;
		z-index: 0;
	}
}

.story-intro__title img {
	-webkit-filter: var(--shadow6);
	filter: var(--shadow6);
}

.story-intro__title > img {
	position: relative;
	z-index: 3;
}

.story-intro__illust {
	position: absolute;
	z-index: 2;
}

@media screen and (min-width: 1024px) {
	.story-intro__illust {
		width: 11.4rem ;
		top: 0.4rem ;
		right: -1.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-intro__illust {
		width: 8.2rem ;
		top: 2.8rem ;
		right: -1.7rem ;
	}
}

/* ---------- story-intro__episode ---------- */
.story-intro__episode {
	position: absolute;
	left: auto;
	z-index: 1;
	-webkit-filter: var(--shadow6);
	filter: var(--shadow6);
}

@media screen and (min-width: 1024px) {
	.story-intro__episode {
		width: 16.3rem ;
		top: 50.2rem ;
		right: 9.73333cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-intro__episode {
		width: 8.2rem ;
		top: 28.6rem ;
		right: 3.1rem ;
	}
}

/* ---------- story-intro__txt ---------- */
.story-intro__txt {
	position: absolute;
	z-index: 1;
	color: var(--color-txt11);
}

@media screen and (min-width: 1024px) {
	.story-intro__txt {
		top: 101rem ;
		left: 9.06667cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-intro__txt {
		top: 72.5rem ;
		left: 3.4rem ;
	}
}

.story-intro__en {
	-webkit-filter: var(--shadow6);
	filter: var(--shadow6);
	font-family: var(--font-sans-serif);
	padding-top: 0.1px;
	padding-bottom: 0.1px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.story-intro__en::before, .story-intro__en::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	font-size: inherit;
}

.story-intro__en::before {
	margin-top: var(--font-sans-serif-top);
}

.story-intro__en::after {
	margin-bottom: var(--font-sans-serif-bottom);
}

@media screen and (min-width: 1024px) {
	.story-intro__en {
		font-size: var(--font-size20);
		--line-height: 1.15;
	}
}

@media screen and (max-width: 1023px) {
	.story-intro__en {
		font-size: var(--font-size11);
		--line-height: 1.18182;
	}
}

@media screen and (min-width: 1024px) {
	.story-intro__loopbar {
		width: 22.5rem ;
		margin-top: 3.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-intro__loopbar {
		width: 13rem ;
		margin-top: 2rem ;
	}
}

/* ----------------------------------------
 story-intro__contents
---------------------------------------- */
.story-intro__contents {
	position: relative;
	z-index: 5;
	background-color: var(--pallet-purple2);
}

@media screen and (min-width: 1024px) {
	.story-intro__contents {
		height: 114.6rem ;
		margin-top: -67.2rem ;
		padding-top: 67.2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-intro__contents {
		height: 66.2rem ;
		margin-top: -22.3rem ;
		padding-top: 22.3rem ;
	}
}

.story-intro__contents::before {
	content: '';
	display: block;
	background-image: url("../img/about/story_intro_bg2.webp");
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
}

@media screen and (min-width: 1024px) {
	.story-intro__contents::before {
		width: 128.33333cqw ;
		height: 85.8rem ;
		right: -27.13333cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-intro__contents::before {
		width: 160.75cqw ;
		height: 28.6rem ;
		right: -52.75cqw ;
	}
}

@media screen and (min-width: 1024px) {
	.story-intro__txt2 {
		margin-top: 20.8rem ;
		margin-left: 11.73333cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-intro__txt2 {
		margin-top: 15.5rem ;
		margin-left: 4rem ;
	}
}

/* ---------- story-intro__heading__illust ---------- */
.story-intro__heading__illust {
	position: absolute;
	z-index: 1;
	display: flex;
	justify-content: center;
}

@media screen and (min-width: 1024px) {
	.story-intro__heading__illust {
		width: 73.6cqw ;
		left: 18.46667cqw ;
		bottom: -5.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-intro__heading__illust {
		width: 106.5cqw ;
		left: -0.5cqw ;
		bottom: -2.9rem ;
	}
}

@media screen and (min-width: 1024px) {
	.story-intro__heading__illust div {
		width: 110.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-intro__heading__illust div {
		width: 42.6rem ;
	}
}

/* ----------------------------------------
 story-intro__bg
---------------------------------------- */
.story-intro__bg__thunder,
.story-intro__bg__bug {
	--z-index: 10;
}

@media screen and (min-width: 1024px) {
	.story-intro__bg__thunder.-unique1 {
		--width: 34.625;
		--height: 6.5201rem ;
		top: 57.1243rem ;
		left: 8.34753cqw ;
	}
	.story-intro__bg__thunder.-unique2 {
		--width: 13.688;
		--height: 2.5776rem ;
		top: 49.3079rem ;
		left: 9.6578cqw ;
	}
	.story-intro__bg__thunder.-unique3 {
		--width: 34.625;
		--height: 6.5201rem ;
		top: 26.0835rem ;
		left: 25.71633cqw ;
	}
	.story-intro__bg__thunder.-unique4 {
		--width: 13.688;
		--height: 2.5776rem ;
		top: 31.5154rem ;
		left: 33.5184cqw ;
	}
	.story-intro__bg__thunder.-unique5 {
		--width: 49.9;
		--height: 9.3965rem ;
		top: 40.1856rem ;
		left: 44.1822cqw ;
	}
	.story-intro__bg__thunder.-unique6 {
		--width: 20.403;
		--height: 3.842rem ;
		top: 39.507rem ;
		left: 76.11493cqw ;
	}
	.story-intro__bg__thunder.-unique7 {
		--width: 34.625;
		--height: 6.5201rem ;
		top: 75.9375rem ;
		left: 91.64873cqw ;
	}
	.story-intro__bg__thunder.-unique8 {
		--width: 34.625;
		--height: 6.5201rem ;
		top: 122.6964rem ;
		left: 8.92653cqw ;
	}
	.story-intro__bg__thunder.-unique9 {
		--width: 13.688;
		--height: 2.5776rem ;
		top: 149.4001rem ;
		left: 24.18007cqw ;
	}
	.story-intro__bg__thunder.-unique10 {
		--width: 20.403;
		--height: 3.842rem ;
		top: 138.6043rem ;
		left: 29.28707cqw ;
	}
	.story-intro__bg__thunder.-unique11 {
		--width: 30.903;
		--height: 5.8193rem ;
		top: 113.8011rem ;
		left: 53.12707cqw ;
	}
	.story-intro__bg__thunder.-unique12 {
		--width: 28.391;
		--height: 5.3463rem ;
		top: 140.0914rem ;
		left: 60.7182cqw ;
	}
	.story-intro__bg__thunder.-unique13 {
		--width: 34.625;
		--height: 6.5201rem ;
		top: 115.2041rem ;
		left: 86.1772cqw ;
	}
	.story-intro__bg__thunder.-unique14 {
		--width: 13.688;
		--height: 2.5776rem ;
		top: 107.3877rem ;
		left: 87.48747cqw ;
	}
	.story-intro__bg__thunder.-unique15 {
		--width: 25.032;
		--height: 4.7137rem ;
		top: 188.4753rem ;
		left: 11.36893cqw ;
	}
	.story-intro__bg__thunder.-unique16 {
		--width: 13.688;
		--height: 2.5776rem ;
		top: 227.4385rem ;
		left: 14.32693cqw ;
	}
	.story-intro__bg__thunder.-unique17 {
		--width: 22.997;
		--height: 4.3305rem ;
		top: 219.8347rem ;
		left: 18.24607cqw ;
	}
	.story-intro__bg__thunder.-unique18 {
		--width: 20.403;
		--height: 3.842rem ;
		top: 190.7386rem ;
		left: 29.42147cqw ;
	}
	.story-intro__bg__thunder.-unique19 {
		--width: 22.997;
		--height: 4.3305rem ;
		top: 222.6472rem ;
		left: 45.6626cqw ;
	}
	.story-intro__bg__thunder.-unique20 {
		--width: 28.046;
		--height: 5.2813rem ;
		top: 205.1963rem ;
		left: 58.1206cqw ;
	}
	.story-intro__bg__thunder.-unique21 {
		--width: 28.046;
		--height: 5.2813rem ;
		top: 183.6965rem ;
		left: 59.47213cqw ;
	}
	.story-intro__bg__thunder.-unique22 {
		--width: 13.688;
		--height: 2.5776rem ;
		top: 216.6175rem ;
		left: 66.16373cqw ;
	}
	.story-intro__bg__thunder.-unique23 {
		--width: 13.688;
		--height: 2.5776rem ;
		top: 186.4536rem ;
		left: 78.83707cqw ;
	}
	.story-intro__bg__thunder.-unique24 {
		--width: 28.046;
		--height: 5.2813rem ;
		top: 184.7462rem ;
		left: 84.20233cqw ;
	}
	.story-intro__bg__thunder.-unique25 {
		--width: 28.046;
		--height: 5.2813rem ;
		top: 200.767rem ;
		left: 88.04893cqw ;
	}
	.story-intro__bg__thunder.-unique27 {
		--width: 13.688;
		--height: 2.5776rem ;
		top: 203.7284rem ;
		left: 97.30887cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-intro__bg__thunder.-unique1 {
		--width: 12.019;
		--height: 2.2633rem ;
		top: 24.4718rem ;
		left: 18.74825cqw ;
	}
	.story-intro__bg__thunder.-unique2 {
		--width: 17.321;
		--height: 3.2617rem ;
		top: 31.5578rem ;
		left: 31.472cqw ;
	}
	.story-intro__bg__thunder.-unique3 {
		--width: 4.751;
		--height: 0.8947rem ;
		top: 26.5495rem ;
		left: 32.6795cqw ;
	}
	.story-intro__bg__thunder.-unique4 {
		--width: 7.082;
		--height: 1.3336rem ;
		top: 14.4895rem ;
		left: 60.71475cqw ;
	}
	.story-intro__bg__thunder.-unique5 {
		--width: 12.019;
		--height: 2.2633rem ;
		top: 20.2707rem ;
		left: 85.94325cqw ;
	}
	.story-intro__bg__thunder.-unique8 {
		--width: 12.019;
		--height: 2.2633rem ;
		top: 86.8363rem ;
		left: 13.508cqw ;
	}
	.story-intro__bg__thunder.-unique9 {
		--width: 4.751;
		--height: 0.8947rem ;
		top: 96.6001rem ;
		left: 48.5495cqw ;
	}
	.story-intro__bg__thunder.-unique10 {
		--width: 10.727;
		--height: 2.02rem ;
		top: 69.4285rem ;
		left: 54.46775cqw ;
	}
	.story-intro__bg__thunder.-unique11 {
		--width: 7.082;
		--height: 1.3336rem ;
		top: 91.6227rem ;
		left: 57.6685cqw ;
	}
	.story-intro__bg__thunder.-unique12 {
		--width: 18.872;
		--height: 3.5537rem ;
		top: 81.1688rem ;
		left: 81.042cqw ;
	}
	.story-intro__bg__thunder.-unique15 {
		--width: 16.487;
		--height: 3.1046rem ;
		top: 138.1333rem ;
		left: 18.011cqw ;
	}
	.story-intro__bg__thunder.-unique16 {
		--width: 6.518;
		--height: 1.2273rem ;
		top: 134.4115rem ;
		left: 20.3505cqw ;
	}
	.story-intro__bg__thunder.-unique17 {
		--width: 23.76;
		--height: 4.4742rem ;
		top: 115.2345rem ;
		left: 29.43175cqw ;
	}
	.story-intro__bg__thunder.-unique18 {
		--width: 16.487;
		--height: 3.1046rem ;
		top: 137.5789rem ;
		left: 58.14925cqw ;
	}
	.story-intro__bg__thunder.-unique19 {
		--width: 9.715;
		--height: 1.8294rem ;
		top: 116.7617rem ;
		left: 63.17925cqw ;
	}
	.story-intro__bg__thunder.-unique20 {
		--width: 6.518;
		--height: 1.2273rem ;
		top: 140.1654rem ;
		left: 72.0805cqw ;
	}
	.story-intro__bg__thunder.-unique21 {
		--width: 16.487;
		--height: 3.1046rem ;
		top: 127.8664rem ;
		left: 87.4135cqw ;
	}
	.story-intro__bg__thunder.-unique6, .story-intro__bg__thunder.-unique7, .story-intro__bg__thunder.-unique13, .story-intro__bg__thunder.-unique14, .story-intro__bg__thunder.-unique22, .story-intro__bg__thunder.-unique23, .story-intro__bg__thunder.-unique24, .story-intro__bg__thunder.-unique25, .story-intro__bg__thunder.-unique26, .story-intro__bg__thunder.-unique27 {
		display: none;
	}
}

@media screen and (min-width: 1024px) {
	.story-intro__bg__bug.-unique1 {
		--width: 85.511;
		--height: 8.1696rem ;
		top: 138.879rem ;
		left: 6.8408cqw ;
	}
	.story-intro__bg__bug.-unique2 {
		--width: 59.364;
		--height: 5.6307rem ;
		top: 165.9051rem ;
		left: 7.46393cqw ;
	}
	.story-intro__bg__bug.-unique3 {
		--width: 58.137;
		--height: 5.7383rem ;
		top: 205.1295rem ;
		left: 5.06833cqw ;
	}
	.story-intro__bg__bug.-unique4 {
		--width: 59.601;
		--height: 5.7251rem ;
		top: 154.1786rem ;
		left: 35.21807cqw ;
	}
	.story-intro__bg__bug.-unique5 {
		--width: 42.137;
		--height: 4.1173rem ;
		top: 133.8114rem ;
		left: 45.36527cqw ;
	}
	.story-intro__bg__bug.-unique6 {
		--width: 47.505;
		--height: 5.0858rem ;
		top: 186.2981rem ;
		left: 51.3612cqw ;
	}
	.story-intro__bg__bug.-unique7 {
		--width: 86.433;
		--height: 8.6864rem ;
		top: 200.5399rem ;
		left: 67.9724cqw ;
	}
	.story-intro__bg__bug.-unique8 {
		--width: 34.76;
		--height: 3.402rem ;
		top: 105.8565rem ;
		left: 75.43547cqw ;
	}
	.story-intro__bg__bug.-unique9 {
		--width: 41.154;
		--height: 4.1174rem ;
		top: 138.3135rem ;
		left: 76.37667cqw ;
	}
	.story-intro__bg__bug.-unique10 {
		--width: 79.35;
		--height: 7.7744rem ;
		top: 172.3108rem ;
		left: 80.68987cqw ;
	}
	.story-intro__bg__bug.-unique11 {
		--width: 74.736;
		--height: 7.2721rem ;
		top: 140.354rem ;
		left: 88.16387cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-intro__bg__bug.-unique1 {
		--width: 45.626;
		--height: 4.359rem ;
		top: 96.1726rem ;
		left: 12.814cqw ;
	}
	.story-intro__bg__bug.-unique3 {
		--width: 31.02;
		--height: 3.0618rem ;
		top: 133.3426rem ;
		left: 6.138cqw ;
	}
	.story-intro__bg__bug.-unique4 {
		--width: 31.801;
		--height: 3.0547rem ;
		top: 141.3604rem ;
		left: 77.565cqw ;
	}
	.story-intro__bg__bug.-unique5 {
		--width: 22.483;
		--height: 2.1968rem ;
		top: 88.102rem ;
		left: 27.31075cqw ;
	}
	.story-intro__bg__bug.-unique6 {
		--width: 31.675;
		--height: 3.0043rem ;
		top: 113.0192rem ;
		left: 79.46275cqw ;
	}
	.story-intro__bg__bug.-unique7 {
		--width: 34.425;
		--height: 3.4596rem ;
		top: 146.2344rem ;
		left: 19.935cqw ;
	}
	.story-intro__bg__bug.-unique8 {
		--width: 18.547;
		--height: 1.8152rem ;
		top: 69.3583rem ;
		left: 81.3135cqw ;
	}
	.story-intro__bg__bug.-unique9 {
		--width: 21.958;
		--height: 2.1969rem ;
		top: 73.6532rem ;
		left: 72.25375cqw ;
	}
	.story-intro__bg__bug.-unique10 {
		--width: 42.339;
		--height: 4.1481rem ;
		top: 133.3413rem ;
		left: 82.9065cqw ;
	}
	.story-intro__bg__bug.-unique11 {
		--width: 39.877;
		--height: 3.8802rem ;
		top: 88.4638rem ;
		left: 72.49875cqw ;
	}
	.story-intro__bg__bug.-unique2 {
		display: none;
	}
}

/* ------------------------------------------------------------
 story-invasion
------------------------------------------------------------ */
.story-invasion {
	position: relative;
}

/* ----------------------------------------
 story-invasion__beacon
---------------------------------------- */
.story-invasion__beacon {
	container-type: inline-size;
	position: absolute;
	z-index: 10;
}

@media screen and (min-width: 1024px) {
	.story-invasion__beacon {
		width: 15.8rem ;
		top: -14.8rem ;
		right: 12cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-invasion__beacon {
		width: 7.8rem ;
		top: -7.4rem ;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

.story-invasion__beacon::before, .story-invasion__beacon::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: var(--color-main);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	-webkit-transform-origin: 50% 60%;
	transform-origin: 50% 60%;
}

.story-invasion__beacon::before {
	-webkit-animation: scale var(--animation-scale);
	animation: scale var(--animation-scale);
	-webkit-animation-delay: -620ms;
	animation-delay: -620ms;
}

.story-invasion__beacon::after {
	opacity: .15;
	-webkit-animation: scale2 var(--animation-scale);
	animation: scale2 var(--animation-scale);
}

.story-invasion__beacon > img {
	position: relative;
	z-index: 1;
}

.story-invasion__beacon div {
	position: absolute;
	z-index: 2;
	width: 13.92405cqw ;
	top: 51.26582cqw ;
	left: 36.70886cqw ;
	-webkit-animation: scale var(--animation-scale);
	animation: scale var(--animation-scale);
	-webkit-animation-delay: -200ms;
	animation-delay: -200ms;
}

.story-invasion__beacon div + div {
	left: auto;
	right: 36.70886cqw ;
	-webkit-animation-delay: -1200ms;
	animation-delay: -1200ms;
}

/* ----------------------------------------
 story-invasion__heading
---------------------------------------- */
.story-invasion__heading {
	position: relative;
	z-index: 10;
	color: var(--color-main);
}

@media screen and (min-width: 1024px) {
	.story-invasion__heading {
		padding: 9rem 0 10.2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-invasion__heading {
		padding: 5.6rem 0 4.5rem ;
	}
}

.story-invasion__heading::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	background-color: var(--color-bg2);
}

/* ---------- story-invasion__title ---------- */
.story-invasion__title {
	position: absolute;
	z-index: 2;
	border-bottom: var(--solid-current-bold3);
	font-family: var(--font-mincho);
	font-weight: 900;
	letter-spacing: -0.1em;
	-webkit-transform: scaleX(0.8);
	transform: scaleX(0.8);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}

@media screen and (min-width: 1024px) {
	.story-invasion__title {
		top: 2.7rem ;
		left: 3.4rem ;
		font-size: var(--font-size38);
		padding-bottom: 0.9rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-invasion__title {
		top: 1.3rem ;
		left: 1.2rem ;
		font-size: var(--font-size19);
		padding-bottom: 0.5rem ;
	}
}

/* ---------- story-invasion__ui ---------- */
.story-invasion__ui {
	position: absolute;
	z-index: 2;
	border-bottom: var(--solid-current-bold3);
}

@media screen and (min-width: 1024px) {
	.story-invasion__ui {
		width: 6.8rem ;
		padding-bottom: 1.6rem ;
		top: 3.7rem ;
		right: 3.7rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-invasion__ui {
		width: 4.3rem ;
		padding-bottom: 0.8rem ;
		top: 1.8rem ;
		right: 1.4rem ;
	}
}

/* ---------- story-invasion__contents ---------- */
.story-invasion__contents {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.story-invasion__title2 {
	border: var(--solid-current-bold3);
	font-family: var(--font-mincho);
	font-weight: 900;
	letter-spacing: -0.1em;
}

@media screen and (min-width: 1024px) {
	.story-invasion__title2 {
		font-size: var(--font-size56);
		padding: 0 0.2rem 0.4rem 0.2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-invasion__title2 {
		font-size: var(--font-size28);
		padding: 0 0.1rem 0.1rem ;
	}
}

.story-invasion__txt {
	display: grid;
}

@media screen and (min-width: 1024px) {
	.story-invasion__txt {
		gap: 1.6rem ;
		margin-top: 4.2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-invasion__txt {
		gap: 0.8rem ;
		margin-top: 2.1rem ;
	}
}

.story-invasion__txt span {
	display: block;
	font-weight: 700;
	letter-spacing: 0.02em;
}

@media screen and (min-width: 1024px) {
	.story-invasion__txt span {
		font-size: var(--font-size33);
	}
}

@media screen and (max-width: 1023px) {
	.story-invasion__txt span {
		font-size: var(--font-size16);
	}
}

@media screen and (min-width: 1024px) {
	.story-invasion__loopbar {
		width: 73.8rem ;
		margin-top: 4.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-invasion__loopbar {
		width: 32.7rem ;
		margin-top: 2.8rem ;
	}
}

@media screen and (min-width: 1024px) {
	.story-invasion__txt2 {
		margin-top: 4.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-invasion__txt2 {
		margin-top: 3rem ;
	}
}

.story-invasion__txt2 > span {
	display: block;
}

.story-invasion__txt2 > span:nth-of-type(1) {
	font-family: var(--font-sans-serif);
	padding-top: 0.1px;
	padding-bottom: 0.1px;
	font-weight: 800;
	letter-spacing: -0.04em;
}

.story-invasion__txt2 > span:nth-of-type(1)::before, .story-invasion__txt2 > span:nth-of-type(1)::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	font-size: inherit;
}

.story-invasion__txt2 > span:nth-of-type(1)::before {
	margin-top: var(--font-sans-serif-top);
}

.story-invasion__txt2 > span:nth-of-type(1)::after {
	margin-bottom: var(--font-sans-serif-bottom);
}

@media screen and (min-width: 1024px) {
	.story-invasion__txt2 > span:nth-of-type(1) {
		font-size: var(--font-size121);
	}
}

@media screen and (max-width: 1023px) {
	.story-invasion__txt2 > span:nth-of-type(1) {
		font-size: var(--font-size68);
		--line-height: 0.79412;
	}
}

.story-invasion__txt2 > span:nth-of-type(2) {
	font-family: var(--font-gothic2);
	font-weight: 800;
	letter-spacing: -0.08em;
}

@media screen and (min-width: 1024px) {
	.story-invasion__txt2 > span:nth-of-type(2) {
		font-size: var(--font-size13);
		margin-top: 1.7rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-invasion__txt2 > span:nth-of-type(2) {
		font-size: var(--font-size10);
		margin-top: 0.9rem ;
	}
}

/* ---------- story-invasion__illust ---------- */
.story-invasion__illust {
	position: absolute;
	z-index: -1;
}

@media screen and (min-width: 1024px) {
	.story-invasion__illust {
		width: 54.8rem ;
		right: 5.06667cqw ;
		bottom: -16rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-invasion__illust {
		width: 33.5rem ;
		left: 50%;
		bottom: -9.7rem ;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

/* ----------------------------------------
 story-invasion__main
---------------------------------------- */
.story-invasion__main {
	position: relative;
	background-color: var(--pallet-purple2);
}

@media screen and (min-width: 1024px) {
	.story-invasion__main {
		padding: 11.2rem 0 14.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-invasion__main {
		padding: 17.9rem 0 16.9rem ;
	}
}

/* ---------- story-invasion__txt3 ---------- */
@media screen and (min-width: 1024px) {
	.story-invasion__txt3 {
		margin-left: 11.73333cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-invasion__txt3 {
		margin-left: 4rem ;
	}
}

/* ---------- story-invasion__title3 ---------- */
.story-invasion__title3 {
	position: relative;
	z-index: 6;
	margin-inline: auto;
	-webkit-filter: var(--shadow7);
	filter: var(--shadow7);
}

@media screen and (min-width: 1024px) {
	.story-invasion__title3 {
		width: 39.2rem ;
		margin-top: 8.6rem ;
		-webkit-transform: translateX(4rem);
		transform: translateX(4rem);
	}
}

@media screen and (max-width: 1023px) {
	.story-invasion__title3 {
		width: 22.9rem ;
		margin-top: 3rem ;
		-webkit-transform: translateX(4.9rem);
		transform: translateX(4.9rem);
	}
}

/* ---------- story-invasion__title4 ---------- */
.story-invasion__title4 {
	position: relative;
	z-index: 6;
	margin-inline: auto;
}

@media screen and (min-width: 1024px) {
	.story-invasion__title4 {
		width: 123.7rem ;
		margin-top: -5.1rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-invasion__title4 {
		width: 36.6rem ;
		margin-top: 1.6rem ;
	}
}

/* ---------- story-invasion__list ---------- */
.story-invasion__list {
	position: relative;
	z-index: 6;
	margin-inline: auto;
}

@media screen and (min-width: 1024px) {
	.story-invasion__list {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		width: 120.7rem ;
		margin-top: -2.6rem ;
		-webkit-transform: translateX(1rem);
		transform: translateX(1rem);
	}
}

@media screen and (max-width: 1023px) {
	.story-invasion__list {
		width: 35.7rem ;
		margin-top: -3.3rem ;
		-webkit-transform: translateX(0.7rem);
		transform: translateX(0.7rem);
	}
}

@media screen and (min-width: 1024px) {
	.story-invasion__list li {
		width: 38.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-invasion__list li + li {
		margin-top: -7.4rem ;
	}
}

/* ---------- story-invasion__txt4 ---------- */
@media screen and (min-width: 1024px) {
	.story-invasion__txt4 {
		position: relative;
		z-index: 6;
		margin-top: 12.9rem ;
		margin-left: 11.73333cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-invasion__txt4 {
		display: none;
	}
}

/* ---------- story-invasion__bg ---------- */
.story-invasion__bg__star {
	--z-index: 5;
}

@media screen and (min-width: 1024px) {
	.story-invasion__bg__star.-unique1 {
		--width: 14.286;
		--height: 1.4768rem ;
		top: 11.5401rem ;
		left: 8.57453cqw ;
	}
	.story-invasion__bg__star.-unique2 {
		--width: 10.598;
		--height: 1.0338rem ;
		top: 34.5703rem ;
		left: 17.2438cqw ;
	}
	.story-invasion__bg__star.-unique3 {
		--width: 14.286;
		--height: 1.4768rem ;
		top: 15.4757rem ;
		left: 57.22493cqw ;
	}
	.story-invasion__bg__star.-unique4 {
		--width: 24.604;
		--height: 2.5434rem ;
		top: 25.5936rem ;
		left: 85.41333cqw ;
	}
	.story-invasion__bg__star.-unique5 {
		--width: 14.286;
		--height: 1.4768rem ;
		top: 57.0802rem ;
		left: 4.3722cqw ;
	}
	.story-invasion__bg__star.-unique6 {
		--width: 10.598;
		--height: 1.0338rem ;
		top: 66.5837rem ;
		left: 91.4448cqw ;
	}
	.story-invasion__bg__star.-unique7 {
		--width: 14.286;
		--height: 1.4768rem ;
		top: 144.2031rem ;
		left: 13.53547cqw ;
	}
	.story-invasion__bg__star.-unique8 {
		--width: 14.286;
		--height: 1.4768rem ;
		top: 158.0092rem ;
		left: 75.55487cqw ;
	}
	.story-invasion__bg__star.-unique9 {
		--width: 10.598;
		--height: 1.0338rem ;
		top: 153.5149rem ;
		left: 99.0344cqw ;
	}
	.story-invasion__bg__star.-unique11 {
		--width: 14.286;
		--height: 1.4768rem ;
		top: 20.8873rem ;
		left: 5.00193cqw ;
	}
	.story-invasion__bg__star.-unique12 {
		--width: 10.598;
		--height: 1.0338rem ;
		top: 31.4076rem ;
		left: 38.0266cqw ;
	}
	.story-invasion__bg__star.-unique13 {
		--width: 10.598;
		--height: 1.0338rem ;
		top: 17.6783rem ;
		left: 92.70427cqw ;
	}
	.story-invasion__bg__star.-unique14 {
		--width: 10.598;
		--height: 1.0338rem ;
		top: 68.7727rem ;
		left: 35.769cqw ;
	}
	.story-invasion__bg__star.-unique15 {
		--width: 24.604;
		--height: 2.5434rem ;
		top: 72.9179rem ;
		left: 43.66407cqw ;
	}
	.story-invasion__bg__star.-unique16 {
		--width: 14.286;
		--height: 1.4768rem ;
		top: 65.5644rem ;
		left: 97.0796cqw ;
	}
	.story-invasion__bg__star.-unique17 {
		--width: 10.598;
		--height: 1.0338rem ;
		top: 102.2432rem ;
		left: 3.23893cqw ;
	}
	.story-invasion__bg__star.-unique18 {
		--width: 14.286;
		--height: 1.4768rem ;
		top: 142.2183rem ;
		left: 60.894cqw ;
	}
	.story-invasion__bg__star.-unique19 {
		--width: 14.286;
		--height: 1.4768rem ;
		top: 148.6816rem ;
		left: 85.1894cqw ;
	}
	.story-invasion__bg__star.-unique20 {
		--width: 10.598;
		--height: 1.0338rem ;
		top: 164.3283rem ;
		left: 87.7294cqw ;
	}
	.story-invasion__bg__star.-unique21 {
		--width: 14.286;
		--height: 1.4768rem ;
		top: 19.8788rem ;
		left: 58.73873cqw ;
	}
	.story-invasion__bg__star.-unique22 {
		--width: 10.598;
		--height: 1.0338rem ;
		top: 67.1165rem ;
		left: 5.47993cqw ;
	}
	.story-invasion__bg__star.-unique23 {
		--width: 14.286;
		--height: 1.4768rem ;
		top: 64.6675rem ;
		left: 49.28727cqw ;
	}
	.story-invasion__bg__star.-unique24 {
		--width: 14.286;
		--height: 1.4768rem ;
		top: 76.177rem ;
		left: 92.3066cqw ;
	}
	.story-invasion__bg__star.-unique25 {
		--width: 10.598;
		--height: 1.0338rem ;
		top: 87.9325rem ;
		left: 1.86733cqw ;
	}
	.story-invasion__bg__star.-unique26 {
		--width: 10.598;
		--height: 1.0338rem ;
		top: 128.9186rem ;
		left: 4.83387cqw ;
	}
	.story-invasion__bg__star.-unique27 {
		--width: 10.598;
		--height: 1.0338rem ;
		top: 153.9764rem ;
		left: 5.01973cqw ;
	}
	.story-invasion__bg__star.-unique28 {
		--width: 10.598;
		--height: 1.0338rem ;
		top: 136.2558rem ;
		left: 47.20813cqw ;
	}
	.story-invasion__bg__star.-unique29 {
		--width: 24.604;
		--height: 2.5434rem ;
		top: 160.4991rem ;
		left: 69.7808cqw ;
	}
	.story-invasion__bg__star.-unique30 {
		--width: 14.286;
		--height: 1.4768rem ;
		top: 144.5024rem ;
		left: 90.61167cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-invasion__bg__star.-unique1 {
		--width: 14.113;
		--height: 1.4589rem ;
		top: 10.0066rem ;
		left: 18.7215cqw ;
	}
	.story-invasion__bg__star.-unique2 {
		--width: 8.194;
		--height: 0.8471rem ;
		top: 10.6053rem ;
		left: 84.74425cqw ;
	}
	.story-invasion__bg__star.-unique3 {
		--width: 6.079;
		--height: 0.593rem ;
		top: 28.7948rem ;
		left: 33.06725cqw ;
	}
	.story-invasion__bg__star.-unique4 {
		--width: 8.194;
		--height: 0.8471rem ;
		top: 39.4219rem ;
		left: 7.60725cqw ;
	}
	.story-invasion__bg__star.-unique5 {
		--width: 6.079;
		--height: 0.593rem ;
		top: 43.5702rem ;
		left: 63.23125cqw ;
	}
	.story-invasion__bg__star.-unique6 {
		--width: 8.194;
		--height: 0.8471rem ;
		top: 138.5066rem ;
		left: 36.78025cqw ;
	}
	.story-invasion__bg__star.-unique7 {
		--width: 6.079;
		--height: 0.593rem ;
		top: 135.9288rem ;
		left: 87.28375cqw ;
	}
	.story-invasion__bg__star.-unique10 {
		--width: 8.194;
		--height: 0.8471rem ;
		top: 15.4067rem ;
		left: 11.7365cqw ;
	}
	.story-invasion__bg__star.-unique11 {
		--width: 6.079;
		--height: 0.593rem ;
		top: 21.441rem ;
		left: 82.77125cqw ;
	}
	.story-invasion__bg__star.-unique12 {
		--width: 14.113;
		--height: 1.4589rem ;
		top: 27.0989rem ;
		left: 88.797cqw ;
	}
	.story-invasion__bg__star.-unique13 {
		--width: 6.079;
		--height: 0.593rem ;
		top: 37.5915rem ;
		left: 27.3315cqw ;
	}
	.story-invasion__bg__star.-unique14 {
		--width: 6.079;
		--height: 0.593rem ;
		top: 62.0716rem ;
		left: 7.9445cqw ;
	}
	.story-invasion__bg__star.-unique15 {
		--width: 8.194;
		--height: 0.8471rem ;
		top: 133.1564rem ;
		left: 57.50375cqw ;
	}
	.story-invasion__bg__star.-unique16 {
		--width: 6.079;
		--height: 0.593rem ;
		top: 142.1312rem ;
		left: 62.96725cqw ;
	}
	.story-invasion__bg__star.-unique21 {
		--width: 8.194;
		--height: 0.8471rem ;
		top: 13.1309rem ;
		left: 88.0005cqw ;
	}
	.story-invasion__bg__star.-unique22 {
		--width: 6.079;
		--height: 0.593rem ;
		top: 32.8761rem ;
		left: 9.3925cqw ;
	}
	.story-invasion__bg__star.-unique23 {
		--width: 8.194;
		--height: 0.8471rem ;
		top: 40.8975rem ;
		left: 55.48875cqw ;
	}
	.story-invasion__bg__star.-unique24 {
		--width: 8.194;
		--height: 0.8471rem ;
		top: 130.7593rem ;
		left: 69.16675cqw ;
	}
	.story-invasion__bg__star.-unique25 {
		--width: 14.113;
		--height: 1.4589rem ;
		top: 139.9348rem ;
		left: 24.3605cqw ;
	}
	.story-invasion__bg__star.-unique8, .story-invasion__bg__star.-unique9, .story-invasion__bg__star.-unique17, .story-invasion__bg__star.-unique18, .story-invasion__bg__star.-unique19, .story-invasion__bg__star.-unique20, .story-invasion__bg__star.-unique26, .story-invasion__bg__star.-unique27, .story-invasion__bg__star.-unique28, .story-invasion__bg__star.-unique29, .story-invasion__bg__star.-unique30 {
		display: none;
	}
}

/* ------------------------------------------------------------
 story-bug
------------------------------------------------------------ */
.story-bug {
	position: relative;
}

.story-bug::before {
	content: '';
	display: block;
	background: var(--color-gradation3);
	position: absolute;
	z-index: 0;
}

@media screen and (min-width: 1024px) {
	.story-bug::before {
		width: 104.13333cqw ;
		height: 145.7rem ;
		top: -52rem ;
		left: -2.06667cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug::before {
		width: 105.75cqw ;
		height: 90.7rem ;
		top: -15.6rem ;
		left: -3cqw ;
	}
}

/* ----------------------------------------
 story-bug__death
---------------------------------------- */
.story-bug__death {
	position: relative;
	z-index: 1;
	margin-left: auto;
	margin-right: 0;
}

@media screen and (min-width: 1024px) {
	.story-bug__death {
		width: 88.2cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__death {
		width: 93.75cqw ;
	}
}

/* ---------- story-bug__header ---------- */
.story-bug__header {
	width: 100%;
	background-color: var(--color-bg2);
}

@media screen and (min-width: 1024px) {
	.story-bug__header {
		--corner: 3.2rem ;
		height: 33.6rem ;
		padding: 3rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__header {
		--corner: 2rem ;
		height: 26.2rem ;
		padding: 1.8rem 2rem ;
	}
}

.story-bug__en {
	color: var(--color-main);
	font-family: var(--font-sans-serif);
	padding-top: 0.1px;
	padding-bottom: 0.1px;
	font-weight: 800;
	letter-spacing: -0.04em;
}

.story-bug__en::before, .story-bug__en::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	font-size: inherit;
}

.story-bug__en::before {
	margin-top: var(--font-sans-serif-top);
}

.story-bug__en::after {
	margin-bottom: var(--font-sans-serif-bottom);
}

@media screen and (min-width: 1024px) {
	.story-bug__en {
		font-size: var(--font-size36);
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__en {
		font-size: var(--font-size22);
		--line-height: 0.81818;
	}
}

.story-bug__ja {
	color: var(--color-txt12);
	font-weight: 800;
	letter-spacing: 0.02em;
	margin-top: 1rem ;
}

@media screen and (min-width: 1024px) {
	.story-bug__ja {
		font-size: var(--font-size12);
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__ja {
		font-size: var(--font-size9);
	}
}

/* ---------- story-bug__shape ---------- */
.story-bug__shape {
	position: absolute;
	z-index: 1;
}

@media screen and (min-width: 1024px) {
	.story-bug__shape {
		width: 30.4rem ;
		top: -9.2rem ;
		right: 5.13333cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__shape {
		width: 17rem ;
		top: -5.5rem ;
		right: -0.5rem ;
	}
}

/* ---------- story-bug__illust ---------- */
.story-bug__illust {
	position: absolute;
	z-index: 1;
}

@media screen and (min-width: 1024px) {
	.story-bug__illust {
		width: 109.3rem ;
		left: -4.9rem ;
		bottom: -5.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__illust {
		width: 45.2rem ;
		left: -4.6rem ;
		bottom: -2.5rem ;
	}
}

/* ----------------------------------------
 story-bug__intro
---------------------------------------- */
.story-bug__intro {
	position: relative;
	z-index: 1;
}

@media screen and (min-width: 1024px) {
	.story-bug__intro {
		padding: 18.2rem 0 21.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__intro {
		padding: 14.6rem 0 25.2rem ;
	}
}

@media screen and (min-width: 1024px) {
	.story-bug__txt {
		width: 39.53333cqw ;
		margin-left: auto;
		margin-right: 11.06667cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__txt {
		margin-left: 4rem ;
	}
}

/* ----------------------------------------
 story-bug__bg
---------------------------------------- */
.story-bug__bg__thunder,
.story-bug__bg__bug {
	--z-index: 5;
}

.story-bug__bg__thunder img {
	-webkit-transform: scale(-1, 1);
	transform: scale(-1, 1);
}

@media screen and (min-width: 1024px) {
	.story-bug__bg__thunder.-unique1 {
		--width: 28.046;
		--height: 5.2813rem ;
		top: 62.0427rem ;
		left: 0.83353cqw ;
	}
	.story-bug__bg__thunder.-unique2 {
		--width: 28.046;
		--height: 5.2813rem ;
		top: 46.0219rem ;
		left: 4.68013cqw ;
	}
	.story-bug__bg__thunder.-unique3 {
		--width: 13.688;
		--height: 2.5776rem ;
		top: 47.7293rem ;
		left: 11.0026cqw ;
	}
	.story-bug__bg__thunder.-unique4 {
		--width: 20.403;
		--height: 3.842rem ;
		top: 60.8556rem ;
		left: 18.21587cqw ;
	}
	.story-bug__bg__thunder.-unique5 {
		--width: 28.046;
		--height: 5.2813rem ;
		top: 44.9722rem ;
		left: 29.41027cqw ;
	}
	.story-bug__bg__thunder.-unique6 {
		--width: 13.688;
		--height: 2.5776rem ;
		top: 65.0433rem ;
		left: 40.79587cqw ;
	}
	.story-bug__bg__thunder.-unique7 {
		--width: 22.997;
		--height: 4.3305rem ;
		top: 80.183rem ;
		left: 51.4984cqw ;
	}
	.story-bug__bg__thunder.-unique8 {
		--width: 22.997;
		--height: 4.3305rem ;
		top: 72.1711rem ;
		left: 73.61333cqw ;
	}
	.story-bug__bg__thunder.-unique9 {
		--width: 13.688;
		--height: 2.5776rem ;
		top: 79.7748rem ;
		left: 78.15307cqw ;
	}
	.story-bug__bg__thunder.-unique10 {
		--width: 40.419;
		--height: 7.6112rem ;
		top: 49.817rem ;
		left: 95.56087cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__bg__thunder.-unique1 {
		--width: 9.715;
		--height: 1.8294rem ;
		top: 36.181rem ;
		left: 39.8705cqw ;
	}
	.story-bug__bg__thunder.-unique2 {
		--width: 23.76;
		--height: 4.4742rem ;
		top: 34.6538rem ;
		left: 70.1065cqw ;
	}
	.story-bug__bg__thunder.-unique3 {
		--width: 16.487;
		--height: 3.1046rem ;
		top: 56.3189rem ;
		left: 13.943cqw ;
	}
	.story-bug__bg__thunder.-unique4 {
		--width: 6.518;
		--height: 1.2273rem ;
		top: 59.5847rem ;
		left: 31.7685cqw ;
	}
	.story-bug__bg__thunder.-unique5 {
		--width: 16.487;
		--height: 3.1046rem ;
		top: 56.9983rem ;
		left: 43.2075cqw ;
	}
	.story-bug__bg__thunder.-unique6 {
		--width: 6.518;
		--height: 1.2273rem ;
		top: 53.8308rem ;
		left: 83.49825cqw ;
	}
	.story-bug__bg__thunder.-unique7 {
		--width: 16.487;
		--height: 3.1046rem ;
		top: 57.5526rem ;
		left: 83.34575cqw ;
	}
	.story-bug__bg__thunder.-unique8, .story-bug__bg__thunder.-unique9, .story-bug__bg__thunder.-unique10 {
		display: none;
	}
}

.story-bug__bg__bug {
	z-index: 6;
}

@media screen and (min-width: 1024px) {
	.story-bug__bg__bug.-unique1 {
		--width: 41.154;
		--height: 4.1174rem ;
		top: 8.9137rem ;
		left: 6.32633cqw ;
	}
	.story-bug__bg__bug.-unique2 {
		--width: 85.511;
		--height: 8.1696rem ;
		top: 55.4235rem ;
		left: 5.0482cqw ;
	}
	.story-bug__bg__bug.-unique3 {
		--width: 59.364;
		--height: 5.6307rem ;
		top: 82.4495rem ;
		left: 5.6714cqw ;
	}
	.story-bug__bg__bug.-unique4 {
		--width: 34.76;
		--height: 3.402rem ;
		top: 59.8184rem ;
		left: 18.93213cqw ;
	}
	.story-bug__bg__bug.-unique5 {
		--width: 59.601;
		--height: 5.7251rem ;
		top: 70.7231rem ;
		left: 33.42553cqw ;
	}
	.story-bug__bg__bug.-unique6 {
		--width: 42.137;
		--height: 4.1173rem ;
		top: 48.6061rem ;
		left: 35.51953cqw ;
	}
	.story-bug__bg__bug.-unique7 {
		--width: 47.505;
		--height: 5.0858rem ;
		top: 94.7967rem ;
		left: 61.50727cqw ;
	}
	.story-bug__bg__bug.-unique8 {
		--width: 86.433;
		--height: 8.6864rem ;
		top: 85.6707rem ;
		left: 72.94073cqw ;
	}
	.story-bug__bg__bug.-unique9 {
		--width: 74.736;
		--height: 7.2721rem ;
		top: 56.8984rem ;
		left: 86.37133cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__bg__bug.-unique2 {
		--width: 46.523;
		--height: 4.4448rem ;
		top: 29.2602rem ;
		left: 10.395cqw ;
	}
	.story-bug__bg__bug.-unique3 {
		--width: 32.298;
		--height: 3.0634rem ;
		top: 62.4762rem ;
		left: 11.5815cqw ;
	}
	.story-bug__bg__bug.-unique4 {
		--width: 22.925;
		--height: 2.24rem ;
		top: 31.8963rem ;
		left: 59.209cqw ;
	}
	.story-bug__bg__bug.-unique5 {
		--width: 32.427;
		--height: 3.1148rem ;
		top: 42.6482rem ;
		left: 90.72375cqw ;
	}
	.story-bug__bg__bug.-unique1, .story-bug__bg__bug.-unique6, .story-bug__bg__bug.-unique7, .story-bug__bg__bug.-unique8, .story-bug__bg__bug.-unique9 {
		display: none;
	}
}

/* ----------------------------------------
 story-bug__body
---------------------------------------- */
.story-bug__body {
	position: relative;
	background-color: var(--color-bg);
}

@media screen and (min-width: 1024px) {
	.story-bug__body {
		--right-width: 14.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__body {
		--right-width: 6.5rem ;
	}
}

/* ------------------------------
 story-bug__body__top
------------------------------ */
.story-bug__body__top {
	container-type: inline-size;
	position: relative;
	z-index: 1;
	width: calc( 100% - var(--right-width));
	border-bottom: var(--solid-bold-main);
	background-color: var(--color-bg2);
}

@media screen and (min-width: 1024px) {
	.story-bug__body__top {
		height: 12.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__body__top {
		height: 8.6rem ;
	}
}

/* ---------- story-bug__balloon ---------- */
.story-bug__balloon {
	position: absolute;
	z-index: 10;
}

@media screen and (min-width: 1024px) {
	.story-bug__balloon {
		width: 18.7rem ;
		top: -9.2rem ;
		left: 15.80502cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__balloon {
		width: 15.6rem ;
		top: -8.1rem ;
		left: 6.86567cqw ;
	}
}

/* ---------- story-bug__overflow ---------- */
.story-bug__overflow {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.story-bug__overflow img {
	position: absolute;
}

@media screen and (min-width: 1024px) {
	.story-bug__overflow img {
		min-width: 76.58789cqw ;
		width: 76.58789cqw ;
		top: -27.32644cqw ;
		left: -4.72674cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__overflow img {
		min-width: 164.1791cqw ;
		width: 164.1791cqw ;
		top: -58.80597cqw ;
		left: -29.25373cqw ;
	}
}

/* ------------------------------
 story-bug__body__right
------------------------------ */
.story-bug__body__right {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	width: var(--right-width);
	height: 100%;
	border-left: var(--solid-bold-main);
	background-color: var(--color-bg2);
	color: var(--color-txt12);
}

@media screen and (min-width: 1024px) {
	.story-bug__body__right {
		padding: 3.1rem 2.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__body__right {
		padding: 1.6rem 0.1rem 1.6rem 1.6rem ;
	}
}

/* ---------- story-bug__balloon2 ---------- */
.story-bug__balloon2 {
	position: absolute;
	z-index: 10;
}

@media screen and (min-width: 1024px) {
	.story-bug__balloon2 {
		width: 12.8rem ;
		top: -10.1rem ;
		right: 4.1rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__balloon2 {
		width: 8.3rem ;
		top: -6.7rem ;
		right: 1.7rem ;
	}
}

/* ---------- story-bug__thumbnail ---------- */
@media screen and (max-width: 1023px) {
	.story-bug__thumbnail {
		width: -webkit-fit-content;
		width: -moz-fit-content;
		width: fit-content;
	}
}

@media screen and (min-width: 1024px) {
	.story-bug__txt2 + .story-bug__thumbnail {
		margin-top: 7.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__txt2 + .story-bug__thumbnail {
		margin-top: 3.9rem ;
	}
}

.story-bug__thumbnail div {
	aspect-ratio: 1 / 1;
	position: relative;
	overflow: hidden;
	z-index: 0;
	border-radius: 50%;
	margin-inline: auto;
}

@media screen and (min-width: 1024px) {
	.story-bug__thumbnail div {
		width: 7.9rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__thumbnail div {
		width: 4.1rem ;
	}
}

.story-bug__thumbnail div:has([src*="noimage.svg"]) {
	border-radius: 0px;
}

.story-bug__thumbnail figcaption {
	display: block;
	text-align: center;
	font-family: var(--font-sans-serif);
	padding-top: 0.1px;
	padding-bottom: 0.1px;
	font-weight: 800;
	letter-spacing: -0.04em;
}

.story-bug__thumbnail figcaption::before, .story-bug__thumbnail figcaption::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	font-size: inherit;
}

.story-bug__thumbnail figcaption::before {
	margin-top: var(--font-sans-serif-top);
}

.story-bug__thumbnail figcaption::after {
	margin-bottom: var(--font-sans-serif-bottom);
}

@media screen and (min-width: 1024px) {
	.story-bug__thumbnail figcaption {
		font-size: var(--font-size16);
		margin-top: 0.7rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__thumbnail figcaption {
		font-size: var(--font-size8);
		margin-top: 0.4rem ;
	}
}

/* ---------- story-bug__txt2 ---------- */
.story-bug__txt2 {
	word-break: break-all;
}

@media screen and (min-width: 1024px) {
	.story-bug__txt2 {
		margin-top: 3rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__txt2 {
		margin-top: 1.5rem ;
	}
}

/* ---------- story-bug__noimage ---------- */
.story-bug__noimage {
	display: grid;
}

@media screen and (min-width: 1024px) {
	.story-bug__noimage {
		gap: 0.3rem ;
		margin-top: 6.5rem ;
		padding-left: 0.3rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__noimage {
		gap: 0.2rem ;
		margin-top: 3rem ;
		padding-left: 0.1rem ;
	}
}

/* ------------------------------
 story-bug__body__main
------------------------------ */
.story-bug__body__main {
	container-type: inline-size;
	position: relative;
	z-index: 1;
	width: calc( 100% - var(--right-width));
	background-color: var(--color-bg3);
}

@media screen and (min-width: 1024px) {
	.story-bug__body__main {
		height: 207.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__body__main {
		height: 201.5rem ;
	}
}

/* ---------- story-bug__bug ---------- */
.story-bug__bug {
	position: absolute;
	display: flex;
	align-items: flex-end;
}

@media screen and (min-width: 1024px) {
	.story-bug__bug {
		top: 16.6rem ;
		right: 7.7548cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__bug {
		top: 16.4rem ;
		right: 7.76119cqw ;
	}
}

.story-bug__bug__main {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.story-bug__bug__main {
		width: 6.7rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__bug__main {
		width: 3.2rem ;
	}
}

.story-bug__bug__balloon {
	position: absolute;
}

@media screen and (min-width: 1024px) {
	.story-bug__bug__balloon {
		width: 11.9rem ;
		top: -9.1rem ;
		left: 3.3rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__bug__balloon {
		width: 7.6rem ;
		top: -6rem ;
		left: 1.3rem ;
	}
}

.story-bug__bug__noimages {
	display: flex;
	gap: 0.2rem ;
}

@media screen and (min-width: 1024px) {
	.story-bug__bug__noimages {
		margin-left: 1.8rem ;
		margin-bottom: 1.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__bug__noimages {
		margin-left: 1.2rem ;
		margin-bottom: 0.9rem ;
	}
}

/* ---------- story-bug__help ---------- */
.story-bug__help {
	position: absolute;
	z-index: 1;
	display: flex;
	align-items: flex-start;
}

@media screen and (min-width: 1024px) {
	.story-bug__help {
		top: 28.2rem ;
		left: 11.74298cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__help {
		top: 27.8rem ;
		right: 14.32836cqw ;
	}
}

.story-bug__help > * {
	outline: var(--solid-bold-main);
	background-color: var(--color-bg);
}

@media screen and (min-width: 1024px) {
	.story-bug__help > *:nth-child(1) {
		width: 3.6rem ;
		margin-top: 7.1rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__help > *:nth-child(1) {
		width: 2.1rem ;
		margin-top: 4rem ;
	}
}

@media screen and (min-width: 1024px) {
	.story-bug__help > *:nth-child(2) {
		width: 8.6rem ;
		margin-top: 4rem ;
		margin-left: 3rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__help > *:nth-child(2) {
		width: 4.9rem ;
		margin-top: 2.3rem ;
		margin-left: 1.7rem ;
	}
}

@media screen and (min-width: 1024px) {
	.story-bug__help > *:nth-child(3) {
		width: 8.1rem ;
		margin-left: 2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__help > *:nth-child(3) {
		width: 4.6rem ;
		margin-left: 1.1rem ;
	}
}

.story-bug__help__balloon {
	position: absolute;
	outline: none;
	background: var(--pallet-transp);
}

@media screen and (min-width: 1024px) {
	.story-bug__help__balloon {
		width: 7.7rem ;
		top: -4.8rem ;
		right: 6.2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__help__balloon {
		width: 4.9rem ;
		top: -3rem ;
		right: 3.2rem ;
	}
}

/* ---------- story-bug__afterimage ---------- */
.story-bug__afterimage {
	position: absolute;
	left: 0;
	width: 100%;
	border-top: var(--solid-bold-main);
	border-bottom: var(--solid-bold-main);
	background-color: var(--color-bg);
}

@media screen and (min-width: 1024px) {
	.story-bug__afterimage {
		top: 38.2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__afterimage {
		top: 33.2rem ;
	}
}

@media screen and (min-width: 1024px) {
	.story-bug__afterimage__cell {
		min-width: 49.1rem ;
		width: 49.1rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__afterimage__cell {
		min-width: 34.4rem ;
		width: 34.4rem ;
	}
}

.story-bug__afterimage__balloon {
	position: absolute;
}

@media screen and (min-width: 1024px) {
	.story-bug__afterimage__balloon {
		width: 12.9rem ;
		top: -7.2rem ;
		right: 35.74594cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__afterimage__balloon {
		width: 8.5rem ;
		top: -4.6rem ;
		left: 10.14925cqw ;
	}
}

/* ---------- story-bug__bug2 ---------- */
.story-bug__bug2 {
	position: absolute;
}

@media screen and (min-width: 1024px) {
	.story-bug__bug2 {
		top: 66rem ;
		right: 34.34269cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__bug2 {
		top: 49.8rem ;
		right: 8.0597cqw ;
	}
}

.story-bug__bug2 > div {
	display: block;
}

@media screen and (min-width: 1024px) {
	.story-bug__bug2 > div:nth-of-type(1) {
		width: 5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__bug2 > div:nth-of-type(1) {
		width: 2.6rem ;
	}
}

.story-bug__bug2 > div:nth-of-type(2) {
	margin-top: -0.1rem ;
}

@media screen and (min-width: 1024px) {
	.story-bug__bug2 > div:nth-of-type(2) {
		width: 8.6rem ;
		margin-left: 3.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__bug2 > div:nth-of-type(2) {
		width: 4.5rem ;
		margin-left: 1.8rem ;
	}
}

/* ---------- story-bug__character ---------- */
.story-bug__character {
	position: absolute;
	left: 0;
	display: flex;
	align-items: flex-start;
}

@media screen and (min-width: 1024px) {
	.story-bug__character {
		top: 81.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__character {
		top: 57.8rem ;
	}
}

.story-bug__character div {
	outline: var(--solid-bold-main);
	background-color: var(--color-bg);
	margin-right: 2px;
}

@media screen and (min-width: 1024px) {
	.story-bug__character div {
		width: 14.6rem ;
		height: 12.6rem ;
		padding-top: 0.8rem ;
		padding-left: 0.9rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__character div {
		width: 8.5rem ;
		height: 7.3rem ;
		padding-top: 0.6rem ;
		padding-left: 0.6rem ;
	}
}

.story-bug__character > img {
	outline: var(--solid-bold-main);
	background-color: var(--color-bg);
}

@media screen and (min-width: 1024px) {
	.story-bug__character > img:nth-of-type(1) {
		width: 12.2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__character > img:nth-of-type(1) {
		width: 7.2rem ;
	}
}

@media screen and (min-width: 1024px) {
	.story-bug__character > img:nth-of-type(2) {
		width: 11.1rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__character > img:nth-of-type(2) {
		width: 6.6rem ;
	}
}

@media screen and (min-width: 1024px) {
	.story-bug__character > img:nth-of-type(3) {
		width: 13.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__character > img:nth-of-type(3) {
		width: 8rem ;
	}
}

.story-bug__character__balloon {
	position: absolute;
}

@media screen and (min-width: 1024px) {
	.story-bug__character__balloon {
		width: 10rem ;
		top: -8.5rem ;
		left: 10.3rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__character__balloon {
		width: 6.4rem ;
		top: -4.9rem ;
		left: 6.1rem ;
	}
}

/* ---------- story-bug__txt-block ---------- */
.story-bug__txt-block {
	position: absolute;
	left: 0;
}

@media screen and (min-width: 1024px) {
	.story-bug__txt-block {
		width: 51rem ;
		top: 98.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__txt-block {
		width: 33.4rem ;
		top: 66.8rem ;
	}
}

.story-bug__txt-block ul {
	display: grid;
}

@media screen and (min-width: 1024px) {
	.story-bug__txt-block ul {
		gap: 1.8rem ;
		margin-top: 4rem ;
		margin-left: 1.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__txt-block ul {
		gap: 1.3rem ;
		margin-top: 2.8rem ;
		margin-left: 1rem ;
	}
}

.story-bug__txt-block li {
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	display: flex;
	align-items: center;
	cursor: not-allowed;
}

@media screen and (min-width: 1024px) {
	.story-bug__txt-block li {
		gap: 0.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__txt-block li {
		gap: 0.6rem ;
	}
}

@media (hover: hover) {
	.story-bug__txt-block li:hover span {
		font-weight: 700;
		font-size: var(--font-size21);
	}
}

.story-bug__txt-block li::before {
	content: '';
	aspect-ratio: 1 / 1;
	display: block;
	border-radius: 50%;
	background-color: currentColor;
}

@media screen and (min-width: 1024px) {
	.story-bug__txt-block li::before {
		width: 0.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__txt-block li::before {
		width: 0.4rem ;
	}
}

.story-bug__txt-block li span {
	display: block;
	color: var(--color-txt13);
	text-decoration: underline;
	font-weight: 400;
	letter-spacing: 0.02em;
}

@media screen and (min-width: 1024px) {
	.story-bug__txt-block li span {
		font-size: var(--font-size17);
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__txt-block li span {
		font-size: var(--font-size12);
	}
}

/* ---------- story-bug__figure ---------- */
.story-bug__figure {
	position: absolute;
	z-index: -1;
	outline: var(--solid-bold-main);
}

@media screen and (min-width: 1024px) {
	.story-bug__figure {
		width: 67.1rem ;
		top: 81.4rem ;
		left: 45.27326cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__figure {
		width: 43.8rem ;
		top: 89.7rem ;
		left: -5.9rem ;
	}
}

/* ---------- story-bug__window ---------- */
.story-bug__window {
	position: absolute;
	z-index: 20;
}

@media screen and (min-width: 1024px) {
	.story-bug__window {
		top: 124.9rem ;
		left: 18.75923cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__window {
		left: 9.25373cqw ;
		bottom: 63.9rem ;
	}
}

.story-bug__window__cell {
	outline: var(--solid-bold-main);
	background-color: var(--color-bg);
}

@media screen and (min-width: 1024px) {
	.story-bug__window__cell {
		width: 50.8rem ;
		height: 16.5rem ;
		padding: 2.2rem 2.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__window__cell {
		width: 21.4rem ;
		height: 12.6rem ;
		padding: 1.5rem 1.6rem ;
	}
}

.story-bug__window__cell.is-hidden {
	opacity: 0;
	visibility: hidden;
}

.story-bug__window__cell:nth-of-type(2) {
	position: absolute;
	z-index: 1;
}

@media screen and (min-width: 1024px) {
	.story-bug__window__cell:nth-of-type(2) {
		top: 5rem ;
		left: 5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__window__cell:nth-of-type(2) {
		top: 2.9rem ;
		left: 2.9rem ;
	}
}

.story-bug__window__cell:nth-of-type(3) {
	position: absolute;
	z-index: 2;
}

@media screen and (min-width: 1024px) {
	.story-bug__window__cell:nth-of-type(3) {
		top: 10rem ;
		left: 10rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__window__cell:nth-of-type(3) {
		top: 5.8rem ;
		left: 5.8rem ;
	}
}

@media screen and (min-width: 1024px) {
	.story-bug__window__cell img {
		margin-left: 0.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__window__cell img {
		margin-left: 0.3rem ;
	}
}

.story-bug__window__cell p {
	color: var(--color-main);
	font-weight: 800;
	font-style: italic;
	letter-spacing: 0.02em;
}

@media screen and (min-width: 1024px) {
	.story-bug__window__cell p {
		font-size: var(--font-size25);
		--line-height: 1.68;
		margin-top: 1.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__window__cell p {
		font-size: var(--font-size17);
		--line-height: 1.41176;
		margin-top: 1.2rem ;
	}
}

.story-bug__window__cell button {
	aspect-ratio: 1 / 1;
	display: block;
	position: absolute;
}

@media screen and (min-width: 1024px) {
	.story-bug__window__cell button {
		width: 1.8rem ;
		top: 1.2rem ;
		right: 1.2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__window__cell button {
		width: 1.2rem ;
		top: 0.8rem ;
		right: 0.8rem ;
	}
}

.story-bug__window__cell button span {
	display: block;
	width: calc( 100% * var(--root2));
	height: 0.2rem ;
	background-color: var(--color-main);
	position: absolute;
	top: 50%;
	left: 50%;
}

.story-bug__window__cell button span:nth-of-type(1) {
	-webkit-transform: translate(-50%, -50%) rotate(45deg);
	transform: translate(-50%, -50%) rotate(45deg);
}

.story-bug__window__cell button span:nth-of-type(2) {
	-webkit-transform: translate(-50%, -50%) rotate(-45deg);
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* ---------- story-bug__comic ---------- */
.story-bug__comic {
	position: absolute;
	outline: var(--solid-bold-main);
}

@media screen and (min-width: 1024px) {
	.story-bug__comic {
		width: 32.3rem ;
		left: 9.37962cqw ;
		bottom: 21.7rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__comic {
		width: 16.1rem ;
		left: 16.41791cqw ;
		bottom: 30.2rem ;
	}
}

.story-bug__comic__balloon {
	position: absolute;
}

@media screen and (min-width: 1024px) {
	.story-bug__comic__balloon {
		width: 8rem ;
		top: -2.8rem ;
		left: -3.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__comic__balloon {
		width: 5.6rem ;
		top: -1.8rem ;
		left: -2.6rem ;
	}
}

.story-bug__comic__bug {
	position: absolute;
}

@media screen and (min-width: 1024px) {
	.story-bug__comic__bug {
		width: 5.8rem ;
		left: -3rem ;
		bottom: -2.7rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__comic__bug {
		width: 4rem ;
		left: -2rem ;
		bottom: -1.5rem ;
	}
}

/* ---------- story-bug__bug3 ---------- */
.story-bug__bug3 {
	position: absolute;
}

@media screen and (min-width: 1024px) {
	.story-bug__bug3 {
		width: 3.4rem ;
		left: 47.56278cqw ;
		bottom: 42.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__bug3 {
		width: 2.2rem ;
		right: 5.67164cqw ;
		bottom: 47.5rem ;
	}
}

/* ---------- story-bug__bug4 ---------- */
.story-bug__bug4 {
	position: absolute;
}

@media screen and (min-width: 1024px) {
	.story-bug__bug4 {
		width: 5.7rem ;
		left: 39.95569cqw ;
		bottom: 27.9rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__bug4 {
		width: 3.7rem ;
		right: 11.34328cqw ;
		bottom: 38rem ;
	}
}

.story-bug__bug4__balloon {
	position: absolute;
}

@media screen and (min-width: 1024px) {
	.story-bug__bug4__balloon {
		width: 9.9rem ;
		top: -7.2rem ;
		left: -5.2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__bug4__balloon {
		width: 6.4rem ;
		top: -4.6rem ;
		left: -3.3rem ;
	}
}

/* ---------- story-bug__burst ---------- */
.story-bug__burst {
	position: absolute;
}

@media screen and (min-width: 1024px) {
	.story-bug__burst {
		width: 59rem ;
		right: 8.78877cqw ;
		bottom: -0.3rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__burst {
		width: 35.1rem ;
		right: -3.9rem ;
		bottom: -6.3rem ;
	}
}

/* ---------- story-bug__lsize ---------- */
.story-bug__lsize {
	position: absolute;
	z-index: 10;
}

@media screen and (min-width: 1024px) {
	.story-bug__lsize {
		width: 136.3rem ;
		left: calc( 50% + 23.5rem);
		bottom: 37.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-bug__lsize {
		width: 89.1rem ;
		top: 68.6rem ;
		right: -64rem ;
	}
}

/* ------------------------------------------------------------
 story-defeat
------------------------------------------------------------ */
/* ----------------------------------------
 story-defeat__heading
---------------------------------------- */
.story-defeat__heading {
	position: relative;
	z-index: 5;
	background-color: var(--color-bg6);
	margin-top: calc( var(--slope-height) * -1);
	margin-bottom: calc( var(--slope-height) * -1);
	clip-path: polygon(0 var(--slope-height), 100% 0%, 100% calc(100% - var(--slope-height)), 0% 100%);
}

@media screen and (min-width: 1024px) {
	.story-defeat__heading {
		--slope-height: 25.5rem ;
		height: 117rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-defeat__heading {
		--slope-height: 6.8rem ;
		height: 57.6rem ;
	}
}

/* ---------- story-defeat__looptxt ---------- */
.story-defeat__looptxt {
	--slope-angle: atan2(var(--slope-height), 100vw);
	position: absolute;
	left: 0;
	z-index: 1;
	width: 100%;
	-webkit-transform: skewY(calc(var(--slope-angle) * -1));
	transform: skewY(calc(var(--slope-angle) * -1));
	/* ---------- -top ---------- */
	/* ---------- -bottom ---------- */
}

.story-defeat__looptxt > span > span {
	display: block !important;
	color: var(--color-main);
	font-family: var(--font-sans-serif);
	padding-top: 0.1px;
	padding-bottom: 0.1px;
	font-weight: 800;
	letter-spacing: -0.04em;
}

.story-defeat__looptxt > span > span::before, .story-defeat__looptxt > span > span::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	font-size: inherit;
}

.story-defeat__looptxt > span > span::before {
	margin-top: var(--font-sans-serif-top);
}

.story-defeat__looptxt > span > span::after {
	margin-bottom: var(--font-sans-serif-bottom);
}

@media screen and (min-width: 1024px) {
	.story-defeat__looptxt > span > span {
		font-size: var(--font-size140);
	}
}

@media screen and (max-width: 1023px) {
	.story-defeat__looptxt > span > span {
		font-size: var(--font-size70);
	}
}

.story-defeat__looptxt.-top {
	-webkit-transform-origin: 100% 0;
	transform-origin: 100% 0;
}

@media screen and (min-width: 1024px) {
	.story-defeat__looptxt.-top {
		top: 1.7rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-defeat__looptxt.-top {
		top: 0.8rem ;
	}
}

.story-defeat__looptxt.-bottom {
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

@media screen and (min-width: 1024px) {
	.story-defeat__looptxt.-bottom {
		bottom: 1.7rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-defeat__looptxt.-bottom {
		bottom: 0.8rem ;
	}
}

/* ---------- story-defeat__illust ---------- */
.story-defeat__illust {
	position: absolute;
	z-index: 1;
	display: flex;
	justify-content: center;
	width: calc( var(--width) / var(--base-width) * 100cqw);
}

@media screen and (min-width: 1024px) {
	.story-defeat__illust {
		--width: 866;
		top: 24.2rem ;
		left: 22.6cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-defeat__illust {
		--width: 388;
		top: 10.9rem ;
		left: 2cqw ;
	}
}

.story-defeat__illust > div {
	width: calc( var(--width) * 0.1rem);
}

/* ---------- story-defeat__fan ---------- */
.story-defeat__fan {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 0;
	background-image: url("../img/about/story_defeat_fan.webp");
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}

@media screen and (min-width: 1024px) {
	.story-defeat__fan {
		width: 106.53333cqw ;
		height: 74.9rem ;
		bottom: -19.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-defeat__fan {
		width: 198.5cqw ;
		height: 34.2rem ;
		bottom: -6rem ;
	}
}

.story-defeat__burst {
	position: absolute;
	left: 0;
	z-index: -1;
	width: 100%;
	display: flex;
	justify-content: center;
	pointer-events: none;
	-webkit-animation: rotate var(--animation-rotate);
	animation: rotate var(--animation-rotate);
}

@media screen and (min-width: 1024px) {
	.story-defeat__burst {
		--width: 65rem ;
		top: 30.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-defeat__burst {
		--width: 32.3rem ;
		top: 14.1rem ;
	}
}

.story-defeat__burst img {
	width: var(--width);
}

.story-defeat__bg__noimage {
	--z-index: 5;
}

@media screen and (min-width: 1024px) {
	.story-defeat__bg__noimage.-unique1 {
		--width: 25.997;
		--height: 3.5188rem ;
		top: 47.0948rem ;
		left: 19.69567cqw ;
	}
	.story-defeat__bg__noimage.-unique2 {
		--width: 25.997;
		--height: 3.5188rem ;
		top: 64.2003rem ;
		left: 12.94407cqw ;
	}
	.story-defeat__bg__noimage.-unique3 {
		--width: 25.997;
		--height: 3.5188rem ;
		top: 31.8457rem ;
		left: 81.43593cqw ;
	}
	.story-defeat__bg__noimage.-unique4 {
		--width: 25.997;
		--height: 3.5188rem ;
		top: 52.8226rem ;
		left: 83.94327cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-defeat__bg__noimage.-unique1 {
		--width: 12.927;
		--height: 1.7497rem ;
		top: 31.9054rem ;
		left: 8.23925cqw ;
	}
	.story-defeat__bg__noimage.-unique2 {
		--width: 12.927;
		--height: 1.7497rem ;
		top: 20.5756rem ;
		left: 7.7195cqw ;
	}
	.story-defeat__bg__noimage.-unique3 {
		--width: 12.927;
		--height: 1.7497rem ;
		top: 13.4468rem ;
		left: 62.60025cqw ;
	}
	.story-defeat__bg__noimage.-unique4 {
		--width: 12.927;
		--height: 1.7497rem ;
		top: 18.7793rem ;
		left: 95.0865cqw ;
	}
}

@media screen and (min-width: 1024px) {
	.story-defeat__bg__bug.-unique1 {
		--width: 53.028;
		--height: 5.6472rem ;
		top: 58.1899rem ;
		left: 21.34813cqw ;
	}
	.story-defeat__bg__bug.-unique2 {
		--width: 86.433;
		--height: 8.6864rem ;
		top: 38.6254rem ;
		left: 70.33227cqw ;
	}
	.story-defeat__bg__bug.-unique3 {
		--width: 70.943;
		--height: 6.7777rem ;
		top: 73.2268rem ;
		left: 64.0168cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-defeat__bg__bug.-unique1 {
		--width: 26.368;
		--height: 2.8081rem ;
		top: 26.4756rem ;
		left: 8.11575cqw ;
	}
	.story-defeat__bg__bug.-unique2 {
		--width: 42.979;
		--height: 4.3193rem ;
		top: 21.9592rem ;
		left: 80.41025cqw ;
	}
	.story-defeat__bg__bug.-unique3 {
		--width: 35.276;
		--height: 3.3702rem ;
		top: 41.2981rem ;
		left: 73.701cqw ;
	}
}

@media screen and (min-width: 1024px) {
	.story-defeat__bg__garbled.-unique1 {
		--width: 43.84;
		--height: 1.692rem ;
		top: 80.9663rem ;
		left: 12.67427cqw ;
	}
	.story-defeat__bg__garbled.-unique2 {
		--width: 57.664;
		--height: 1.6938rem ;
		top: 49.8466rem ;
		left: 75.8786cqw ;
	}
	.story-defeat__bg__garbled.-unique3 {
		--width: 44.6;
		--height: 1.6938rem ;
		top: 63.6121rem ;
		left: 86.0894cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-defeat__bg__garbled.-unique1 {
		--width: 21.8;
		--height: 0.8413rem ;
		top: 24.0107rem ;
		left: 2.92275cqw ;
	}
	.story-defeat__bg__garbled.-unique2 {
		--width: 28.674;
		--height: 0.8423rem ;
		top: 25.6229rem ;
		left: 89.6615cqw ;
	}
	.story-defeat__bg__garbled.-unique3 {
		--width: 22.176;
		--height: 0.8423rem ;
		top: 41.1809rem ;
		left: 96.537cqw ;
	}
}

/* ----------------------------------------
 story-defeat__main
---------------------------------------- */
.story-defeat__main {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.story-defeat__main {
		padding-top: 33.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-defeat__main {
		padding-top: 34.6rem ;
	}
}

/* ---------- story-defeat__txts ---------- */
.story-defeat__txts {
	display: grid;
}

@media screen and (min-width: 1024px) {
	.story-defeat__txts {
		gap: 9.7rem ;
		margin-left: 11.73333cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-defeat__txts {
		gap: 6rem ;
		margin-left: 4rem ;
	}
}

/* ---------- story-defeat__illust2 ---------- */
.story-defeat__illust2 {
	position: absolute;
	z-index: 1;
}

@media screen and (min-width: 1024px) {
	.story-defeat__illust2 {
		width: 106.3rem ;
		top: -18.6rem ;
		right: -16.9rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-defeat__illust2 {
		width: 59.2rem ;
		top: -11.4rem ;
		right: -13.8rem ;
	}
}

/* ---------- story-defeat__shape ---------- */
.story-defeat__shape {
	position: absolute;
	z-index: 0;
}

@media screen and (min-width: 1024px) {
	.story-defeat__shape {
		width: 44.4rem ;
		top: 14rem ;
		right: 8.2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-defeat__shape {
		width: 24.7rem ;
		top: 7.5rem ;
		right: 1.3rem ;
	}
}

/* ---------- story-defeat__bg__bug ---------- */
@media screen and (min-width: 1024px) {
	.story-defeat__bg__bug.-unique4 {
		--width: 40;
		top: 21.4rem ;
		right: 40.8cqw ;
	}
	.story-defeat__bg__bug.-unique5 {
		--width: 21.8;
		top: 28.6rem ;
		right: 27.53333cqw ;
	}
	.story-defeat__bg__bug.-unique6 {
		--width: 16;
		top: 44.6rem ;
		right: 9.26667cqw ;
	}
	.story-defeat__bg__bug.-unique7 {
		--width: 39.25;
		top: 42.7rem ;
		right: 4.33333cqw ;
	}
}

@media screen and (max-width: 1023px) {
	.story-defeat__bg__bug.-unique4 {
		--width: 22;
		top: 11.6rem ;
		right: 77.5cqw ;
	}
	.story-defeat__bg__bug.-unique5 {
		--width: 12;
		top: 15.6rem ;
		right: 49.5cqw ;
	}
	.story-defeat__bg__bug.-unique6 {
		--width: 9;
		top: 24.5rem ;
		right: 11.75cqw ;
	}
	.story-defeat__bg__bug.-unique7 {
		--width: 22;
		top: 23.5rem ;
		right: 1.5cqw ;
	}
}

/* ------------------------------------------------------------
 story-next
------------------------------------------------------------ */
.story-next {
	position: relative;
	margin-inline: auto;
}

@media screen and (min-width: 1024px) {
	.story-next {
		width: 96.13333cqw ;
		max-width: 160rem ;
		margin-top: 13.1rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-next {
		width: 95cqw ;
		margin-top: 18rem ;
	}
}

/* ----------------------------------------
 story-next__inner
---------------------------------------- */
.story-next__inner {
	position: relative;
	z-index: 1;
	background-color: var(--color-bg2);
	color: var(--color-txt11);
}

@media screen and (min-width: 1024px) {
	.story-next__inner {
		--corner: 3.1rem ;
		display: flex;
		align-items: flex-start;
		padding-top: 4.7rem ;
		padding-bottom: 5rem ;
		padding-left: 8.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-next__inner {
		--corner: 1.3rem ;
		padding-top: 2.7rem ;
		padding-bottom: 3rem ;
		padding-left: 3rem ;
	}
}

/* ---------- story-next__left ---------- */
@media screen and (min-width: 1024px) {
	.story-next__episode {
		width: 10.2rem ;
		margin-left: 0.3rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-next__episode {
		width: 5.7rem ;
		position: absolute;
		top: 2.7rem ;
		right: 2.7rem ;
	}
}

.story-next__en {
	color: var(--color-txt11);
	font-family: var(--font-sans-serif);
	padding-top: 0.1px;
	padding-bottom: 0.1px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.story-next__en::before, .story-next__en::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	font-size: inherit;
}

.story-next__en::before {
	margin-top: var(--font-sans-serif-top);
}

.story-next__en::after {
	margin-bottom: var(--font-sans-serif-bottom);
}

@media screen and (min-width: 1024px) {
	.story-next__en {
		font-size: var(--font-size14);
		--line-height: 1.14286;
		margin-top: 3.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-next__en {
		font-size: var(--font-size7);
		--line-height: 1.28571;
	}
}

@media screen and (min-width: 1024px) {
	.story-next__loopbar {
		width: 15.5rem ;
		margin-top: 1.9rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-next__loopbar {
		width: 8.6rem ;
		margin-top: 1rem ;
	}
}

/* ---------- story-next__right ---------- */
@media screen and (min-width: 1024px) {
	.story-next__right {
		margin-left: 6.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-next__right {
		margin-top: 2.1rem ;
	}
}

@media screen and (min-width: 1024px) {
	.story-next__coming {
		width: 19.1rem ;
		margin-top: 1.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-next__coming {
		width: 10.6rem ;
	}
}

/* ----- story-next__title ----- */
.story-next__title {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.story-next__title {
		width: 94.3rem ;
		margin-top: 4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-next__title {
		width: 32.2rem ;
		margin-top: 1.7rem ;
		margin-left: -0.2rem ;
	}
}

.story-next__title h2 {
	position: relative;
	z-index: 1;
}

.story-next__title__title {
	position: absolute;
	z-index: 0;
}

@media screen and (min-width: 1024px) {
	.story-next__title__title {
		width: 9.7rem ;
		top: -8.6rem ;
		right: 6.9rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-next__title__title {
		width: 5.3rem ;
		top: -1.2rem ;
		right: 3.7rem ;
	}
}

/* ----------------------------------------
 story-next__illust
---------------------------------------- */
.story-next__illust {
	position: absolute;
	z-index: 0;
}

@media screen and (min-width: 1024px) {
	.story-next__illust {
		width: 32.1rem ;
		top: -17.7rem ;
		right: 8.2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.story-next__illust {
		width: 24.1rem ;
		top: -13.3rem ;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		margin-left: 0.5rem ;
	}
}

/* ------------------------------------------------------------
 about-strength
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.about-strength {
		margin-top: 17.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-strength {
		margin-top: 8.4rem ;
	}
}

/* ----------------------------------------
 about-strength__header
---------------------------------------- */
@media screen and (min-width: 1024px) {
	.about-strength__header {
		padding: 0 2.2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-strength__header {
		padding: 0 4rem ;
	}
}

/* ----------------------------------------
 about-strength__list
---------------------------------------- */
.about-strength__illust {
	position: absolute;
}

@media screen and (min-width: 1024px) {
	.about-strength__illust {
		width: 16.9rem ;
		top: -0.4rem ;
		right: 9.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-strength__illust {
		width: 13rem ;
		top: -1.8rem ;
		right: 3.6rem ;
	}
}

/* ----------------------------------------
 about-strength__list
---------------------------------------- */
@media screen and (min-width: 1024px) {
	.about-strength__list {
		margin-top: 3.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-strength__list {
		margin-top: 2.5rem ;
		padding: 0 3rem ;
	}
}

.about-strength__item {
	position: relative;
}

/* ---------- about-strength__item__body ---------- */
.about-strength__item__body {
	position: relative;
	height: 100%;
	-webkit-filter: var(--shadow2);
	filter: var(--shadow2);
}

.about-strength__item__inner {
	height: 100%;
	background-color: var(--color-bg);
}

@media screen and (min-width: 1024px) {
	.about-strength__item__inner {
		--corner: 3.7rem ;
		padding: 6.7rem 0 30.3rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-strength__item__inner {
		--corner: 2.7rem ;
		padding: 4.2rem 0 22.2rem ;
	}
}

/* ---- about-strength__item__txt ----- */
.about-strength__item__txt {
	margin-inline: auto;
}

@media screen and (min-width: 1024px) {
	.about-strength__item__txt {
		width: 32.8rem ;
		margin-top: 3.7rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-strength__item__txt {
		width: 25rem ;
		margin-top: 3.3rem ;
	}
}

/* ---------- about-strength__item__illust ---------- */
.about-strength__item__illust {
	position: absolute;
	z-index: 10;
}

@media screen and (max-width: 1023px) {
	.about-strength__item__illust {
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

@media screen and (min-width: 1024px) {
	.about-strength__item__illust.-unique1 {
		width: 48.1rem ;
		left: 6.6rem ;
		bottom: 4.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-strength__item__illust.-unique1 {
		width: 33.5rem ;
		bottom: 3.3rem ;
		margin-left: 1.45rem ;
	}
}

@media screen and (min-width: 1024px) {
	.about-strength__item__illust.-unique2 {
		width: 44.9rem ;
		left: 7.5rem ;
		bottom: 6.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-strength__item__illust.-unique2 {
		width: 31rem ;
		bottom: 4.7rem ;
		margin-left: 0.9rem ;
	}
}

@media screen and (min-width: 1024px) {
	.about-strength__item__illust.-unique3 {
		width: 55.3rem ;
		left: 7rem ;
		bottom: 6.2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-strength__item__illust.-unique3 {
		width: 37.6rem ;
		bottom: 5.2rem ;
		margin-left: 3.3rem ;
	}
}

@media screen and (min-width: 1024px) {
	.about-strength__item__illust.-unique4 {
		width: 40.9rem ;
		left: 8.4rem ;
		bottom: 6.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-strength__item__illust.-unique4 {
		width: 26.8rem ;
		bottom: 4.9rem ;
		margin-left: 0.4rem ;
	}
}

/* ------------------------------------------------------------
 about-member
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.about-member {
		margin-top: 12rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-member {
		margin-top: 9.6rem ;
	}
}

/* ----------------------------------------
 about-member__list
---------------------------------------- */
.about-member__list {
	width: 100vw;
	position: relative;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

@media screen and (min-width: 1024px) {
	.about-member__list {
		margin-top: 3.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-member__list {
		margin-top: 3rem ;
	}
}

@media screen and (min-width: 1024px) {
	.about-member__list ul {
		gap: 0.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-member__list ul {
		gap: 0.4rem ;
	}
}

.about-member__item {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.about-member__item {
		min-width: 12.1rem ;
		width: 12.1rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-member__item {
		min-width: 10.6rem ;
		width: 10.6rem ;
	}
}

@media screen and (min-width: 1024px) {
	.about-member__item__figure {
		--corner: 1.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-member__item__figure {
		--corner: 1.6rem ;
	}
}

/* ---------- about-member__item__prefecture ---------- */
.about-member__item__prefecture {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: var(--theme-color);
	font-weight: 700;
	letter-spacing: 0.02em;
}

@media screen and (min-width: 1024px) {
	.about-member__item__prefecture {
		--corner: 0.5rem ;
		top: 13.1rem ;
		height: 2.1rem ;
		font-size: var(--font-size12);
		padding: 0 0.9rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-member__item__prefecture {
		--corner: 0.4rem ;
		top: 11.5rem ;
		height: 1.9rem ;
		font-size: var(--font-size10);
		padding: 0 0.9rem ;
	}
}

/* ---------- about-member__item__name ---------- */
.about-member__item__name {
	display: block;
	text-align: center;
	letter-spacing: 0.02em;
}

@media screen and (min-width: 1024px) {
	.about-member__item__name {
		font-size: var(--font-size14);
		margin-top: 0.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-member__item__name {
		font-size: var(--font-size12);
		margin-top: 0.7rem ;
	}
}

/* ----------------------------------------
 about-member__button
---------------------------------------- */
@media screen and (min-width: 1024px) {
	.about-member__button {
		position: absolute;
		top: 0;
		right: 0;
	}
}

@media screen and (max-width: 1023px) {
	.about-member__button {
		margin-top: 4rem ;
		margin-inline: auto;
	}
}

/* ------------------------------------------------------------
 about-outline
------------------------------------------------------------ */
.about-outline {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.about-outline {
		margin-top: 13rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-outline {
		margin-top: 9.8rem ;
	}
}

/* ----------------------------------------
 about-outline__main
---------------------------------------- */
.about-outline__main {
	position: relative;
	z-index: 1;
	-webkit-filter: var(--shadow2);
	filter: var(--shadow2);
}

.about-outline__inner {
	background-color: var(--color-bg);
	margin-inline: auto;
}

@media screen and (min-width: 1024px) {
	.about-outline__inner {
		--corner: 3.7rem ;
		width: 58.6rem ;
		padding: 6.1rem 6.2rem 8.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-outline__inner {
		--corner: 2.6rem ;
		padding: 5.4rem 3rem 7.7rem ;
	}
}

/* ---------- about-outline__table ---------- */
@media screen and (min-width: 1024px) {
	.about-outline__table {
		margin-top: 4.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-outline__table {
		margin-top: 4.1rem ;
	}
}

/* ----------------------------------------
 about-outline__loopslider
---------------------------------------- */
@media screen and (min-width: 1024px) {
	.about-outline__loopslider {
		position: absolute;
		top: 50%;
		left: 0;
		z-index: 0;
		width: 100%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
}

@media screen and (max-width: 1023px) {
	.about-outline__loopslider {
		margin-top: 6rem ;
	}
}

@media screen and (min-width: 1024px) {
	.about-outline__loopslider li {
		min-width: 70.8rem ;
		width: 70.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-outline__loopslider li {
		min-width: 41.1rem ;
		width: 41.1rem ;
	}
}

@media screen and (min-width: 1024px) {
	.about-outline__loopslider li.-y {
		min-width: 31.3rem ;
		width: 31.3rem ;
	}
}

@media screen and (max-width: 1023px) {
	.about-outline__loopslider li.-y {
		min-width: 18.2rem ;
		width: 18.2rem ;
	}
}