@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : character.css
Description :
===================================================================== */

/* =====================================================================
*    character
* =================================================================== */
.chara {
	padding: calc(160 / 750 * 100%) 0 calc(150 / 750 * 100%);
}

#dots_area .slick-dots {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	width: calc(690 / 630 * 100%);
	margin: 0 0 calc(120 / 630 * 100%) calc(-30 / 630 * 100%);
	position: relative;
	bottom: auto;
}

#dots_area .slick-dots li {
	display: block;
	width: calc(120 / 690 * 100%);
	height: auto;
	margin: 0 calc(22 / 690 * 100%) calc(22 / 690 * 100%) 0;
	border: 0;
}

#dots_area .slick-dots li:nth-child(5n),
#dots_area .slick-dots li:last-child {
	margin-right: 0;
}

#dots_area .slick-dots li::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: #fff;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
}

#dots_area .slick-dots li:nth-child(13)::before {
	background-color: #e1e1e1;
}

#dots_area .slick-dots li.slick-active::before {
	background-color: #fed429;
}

#dots_area .slick-dots li img {
	border-radius: 50%;
	border: calc(5 / 750 * 100vw) solid #fed429;
	overflow: hidden;
	z-index: 2;
}

.chara_slider {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.chara_slider .slick-arrow {
	height: calc(127 / 750 * 100vw);
	margin: calc(220 / 630 * 100%) 0 0;
	background-size: auto 100%;
}

.slick-arrow.prev {
	left: calc(-70 / 750 * 100vw);
}

.slick-arrow.next {
	right: calc(-70 / 750 * 100vw);
}

.chara_slider .slick-list {
	border-radius: 0;
}

.chara_name {
	width: calc(485 / 630 * 100%);
	margin: 0 auto;
	z-index: 2;
}

.chara_name.wave_y::before,
.chara_name.wave_y::after {
	padding-top: calc(7 / 485 * 100%);
}

.chara_name .cv {
	font-size: 1.8rem;
	padding: 0 0 0.7em;
}

.chara_img {
	margin: calc(-40 / 630 * 100%) 0 calc(20 / 630 * 100%);
	border-radius: calc(12 / 750 * 100vw);
	overflow: hidden;
}

.chara_txt {
	padding: calc(40 / 630 * 100%) calc(50 / 630 * 100%);
	background-color: #fff;
	border-radius: calc(12 / 750 * 100vw);
	overflow: hidden;
}

.chara_txt::before {
	content: "";
	display: block;
	width: calc(260 / 630 * 100%);
	padding-top: calc(260 / 630 * 100%);
	background: url(../images/common/bg_dot_g.png) repeat left bottom;
	background-size: calc(24 / 260 * 100%) auto;
	position: absolute;
	bottom: 0;
	right: 0;
}

.chara_txt::after {
	content: "";
	display: block;
	width: 100%;
	padding-top: calc(260 / 630 * 100%);
	-webkit-transform-origin: top right;
	transform-origin: top right;
	-webkit-transform: skewX(-45deg);
	transform: skewX(-45deg);
	background-color: #fff;
	position: absolute;
	bottom: 0;
	right: 0;
}

.chara_txt p {
	color: #cb1013;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.833;
	z-index: 2;
}

@media screen and (min-width: 768px) {
	.chara {
		padding: calc(130 / 1300 * 100%) 0;
	}

	#dots_area .slick-dots {
		width: calc(960 / 1000 * 100%);
		margin: 0 auto calc(70 / 1000 * 100%);
	}

	#dots_area .slick-dots li,
	#dots_area .slick-dots li:nth-child(5n) {
		width: calc(120 / 961 * 100%);
		margin: 0 calc(20 / 961 * 100%) calc(20 / 961 * 100%) 0;
		top: 0;
		-webkit-transition: 0.3s ease;
		transition: 0.3s ease;
	}

	#dots_area .slick-dots li:nth-child(7n),
	#dots_area .slick-dots li:last-child {
		margin-right: 0;
	}

	#dots_area .slick-dots li:not(.slick-active):hover {
		top: -0.77vw;
	}

	#dots_area .slick-dots li img {
		border-width: calc(5 / 1300 * 100vw);
	}

	.chara_slider {
		width: calc(600 / 1000 * 100%);
		margin: 0 auto;
	}

	.chara_slider .slick-arrow {
		height: calc(127 / 1300 * 100vw);
		margin: calc(210 / 600 * 100%) 0 0;
	}

	.slick-arrow.prev {
		left: calc(-112 / 1300 * 100vw);
	}

	.slick-arrow.next {
		right: calc(-112 / 1300 * 100vw);
	}

	.chara_name {
		width: calc(477 / 600 * 100%);
	}

	.chara_name.wave_y::before,
	.chara_name.wave_y::after {
		padding-top: calc(6 / 477 * 100%);
	}

	.chara_name span {
		padding: 0.5em;
		font-size: 2.2rem;
	}

	.chara_name .cv {
		font-size: 1.6rem;
	}

	.chara_img {
		margin: calc(-30 / 600 * 100%) 0 calc(20 / 600 * 100%);
		border-radius: calc(6 / 1300 * 100vw);
	}

	.chara_txt {
		padding: calc(30 / 600 * 100%) calc(30 / 600 * 100%);
		border-radius: calc(6 / 1300 * 100vw);
	}

	.chara_txt::before {
		width: calc(180 / 600 * 100%);
		padding-top: calc(180 / 600 * 100%);
		background-size: calc(16 / 180 * 100%) auto;
	}

	.chara_txt::after {
		padding-top: calc(180 / 600 * 100%);
	}

	.chara_txt p {
		font-size: 1.6rem;
		line-height: 1.969;
	}
}

@media screen and (min-width: 1300px) {
	.chara {
		padding: 130px 0;
	}

	#dots_area .slick-dots li:not(.slick-active):hover {
		top: -10px;
	}

	#dots_area .slick-dots li img {
		border-width: 5px;
	}

	.chara_slider .slick-arrow {
		height: 127px;
	}

	.slick-arrow.prev {
		left: -112px;
	}

	.slick-arrow.next {
		right: -112px;
	}

	.chara_img,
	.chara_txt {
		border-radius: 6px;
	}
}