@charset "utf-8";
/*------------------------*
 * SP
 *------------------------*/
@media screen and (max-width: 768px) {
	.character  {
		margin-top:80px !important;
		display:flex;
		flex-flow: column;
	}
	.character .character_image {
		width:100% !important;
	}
	.character .introduction {
		width:100% !important;
	}
	.character[data-id="louisa"] .character_image,
	.character[data-id="kakashi"] .character_image,
	.character[data-id="borane"] .character_image,
	.character[data-id="medis"] .character_image {
		order: 2 !important;
	}
	.character[data-id="louisa"] .introduction,
	.character[data-id="kakashi"] .introduction,
	.character[data-id="borane"] .introduction,
	.character[data-id="medis"] .introduction {
		order: 1 !important;
	}
	.character[data-id="killer"] .character_image,
	.character[data-id="pinka"] .character_image,
	.character[data-id="froid"] .character_image {
		order: 2 !important;
	}
	.character[data-id="killer"] .introduction,
	.character[data-id="pinka"] .introduction,
	.character[data-id="froid"] .introduction {
		order: 1 !important;
	}
	.character[data-id="louisa"] ,
	.character[data-id="killer"] ,
	.character[data-id="kakashi"] ,
	.character[data-id="pinka"] ,
	.character[data-id="borane"] ,
	.character[data-id="froid"] ,
	.character[data-id="medis"] {
		background-image:none !important;
	}

	.character-slider__text {
		width: 100% !important;
	}

	.character [data-aos="fade-right"],
	.character [data-aos="fade-left"] {
		transform:none !important;
		opacity:1 !important;
		transition:none !important;
	}
}

/*---------------------
 * frame
 *---------------------*/
.character {
	display:flex;
	gap:20px;
	margin-top:40px;
}
.character[data-id="louisa"] .character_image,
.character[data-id="kakashi"] .character_image,
.character[data-id="borane"] .character_image,
.character[data-id="medis"] .character_image {
	order: 1;
}
.character[data-id="louisa"] .introduction,
.character[data-id="kakashi"] .introduction,
.character[data-id="borane"] .introduction,
.character[data-id="medis"] .introduction {
	order: 2;
}
.character[data-id="killer"] .character_image,
.character[data-id="pinka"] .character_image,
.character[data-id="froid"] .character_image {
	order: 2;
}
.character[data-id="killer"] .introduction,
.character[data-id="pinka"] .introduction,
.character[data-id="froid"] .introduction {
	order: 1;
}
.character[data-id="kakashi"] .character_image img,
.character[data-id="borane"] .character_image img,
.character[data-id="medis"] .character_image img {
	transform: scale(-1, 1);
}
.character .character_image {
	width:30%;
}
.character .introduction {
	width:70%;
}
.character .character_image img {
	width:100%;
}

/*---------------------
 * character_name
 *---------------------*/
h3.character_name {
	position:relative;
	display:inline-block;
	margin:0 0 24px;
	padding:0 0 10px;
	font-size:38px;
	font-weight:700;
	letter-spacing:.08em;
	line-height:1;
	color:#fff;
}
h3.character_name::after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:3px;
	background:linear-gradient(90deg,#00d8ff 0%,#6d5cff 70%,transparent 100%);
	border-radius:999px;
}
/*---------------------
 * profile
 *---------------------*/
h4 {
	color:#fff000;
	font-weight:bold;
	margin-top:30px;
	font-size:24px;
}
h5 {
	color:#00f3ff;
	font-weight:bold;
	font-size:24px;
	text-align:center;
}


.character[data-id="louisa"] {
	background-image:url("/img/characters/bg/0_louisa.png");
	background-size: contain;
	background-position: 0px 0px;
	background-repeat:no-repeat;
}
.character[data-id="killer"] {
	background-image:url("/img/characters/bg/1_killer.png");
	background-size: contain;
	background-position: 0px 0px;
	background-repeat:no-repeat;
}
.character[data-id="kakashi"] {
	background-image:url("/img/characters/bg/2_kakashi.png");
	background-size: contain;
	background-position: 220px 0px;
	background-repeat:no-repeat;
}
.character[data-id="pinka"] {
	background-image:url("/img/characters/bg/3_pinka.png");
	background-size: contain;
	background-position: 0px 0px;
	background-repeat:no-repeat;
}
.character[data-id="borane"] {
	background-image:url("/img/characters/bg/4_borane.png");
	background-size: contain;
	background-position: 220px 0px;
	background-repeat:no-repeat;
}
.character[data-id="froid"] {
	background-image:url("/img/characters/bg/5_froid.png");
	background-size: contain;
	background-position: 0px 0px;
	background-repeat:no-repeat;
}
.character[data-id="medis"] {
	background-image:url("/img/characters/bg/6_medis.png");
	background-size: contain;
	background-position: 320px 0px;
	background-repeat:no-repeat;
}




/*---------------------
 * louisa slider
 *---------------------*/
.character-slider {
	margin-top:30px;
	display:grid;
	grid-template-columns:40px minmax(0, 800px) 40px;
	align-items:center;
	justify-content:center;
	gap:10px;
	width:100%;
}
.character-slider__contents {
	min-width:0;
}
.character-slider__item {
	display:none;
	grid-template-columns:200px minmax(0, 1fr);
	align-items:center;
	gap:10px;
}
.character-slider__item.is-active {
	display:grid;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}
.character-slider__image {
	width:200px;
	aspect-ratio:1 / 1;
	background:#000;
}
.character-slider__image img {
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
}
.character-slider__text {
	padding:12px 20px;
	background: rgba(10, 14, 20, 0.5);
	width:100%;
	max-width:540px;
	min-height: 200px;
}
.character-slider__text p.probability {
	border-bottom:2px solid #005257;
}
.character-slider__text p {
	margin-top:20px;
	font-size:20px;
	font-weight:bold;
	line-height:1.5;
	color:#b1ffba;
	overflow-wrap:anywhere;
}
.character-slider__arrow {
	display:flex;
	align-items:center;
	justify-content:center;
	width:40px;
	height:70px;
	padding:0;
	border:0;
	background:transparent;
	cursor:pointer;
}
.character-slider__arrow span {
	display:block;
	width:0;
	height:0;
	border-top:27px solid transparent;
	border-bottom:27px solid transparent;
}
.character-slider__arrow--prev span {
	border-right:28px solid #777;
}
.character-slider__arrow--next span {
	border-left:28px solid #777;
}
@media (max-width: 767px) {
	.character-slider {
		grid-template-columns:30px minmax(0, 1fr) 30px;
		gap:8px;
	}
	.character-slider__item {
		grid-template-columns:1fr;
		gap:20px;
	}
	.character-slider__image {
		width:min(200px, 100%);
		margin:0 auto;
	}
	.character-slider__text p {
		font-size:18px;
	}
	.character-slider__arrow {
		width:30px;
	}
	.character-slider__arrow span {
		border-top-width:20px;
		border-bottom-width:20px;
	}
	.character-slider__arrow--prev span {
		border-right-width:20px;
	}
	.character-slider__arrow--next span {
		border-left-width:20px;
	}
}