@charset "utf-8";
.subMain__cont {
	width:840px;
	padding:0 40px;
}
@media screen and (max-width:768px){
	.subMain__cont {
		width:100%;
		padding:0;
	}
}
/**
 * scCont
 */
.scCont {
	width: 100%;
	min-height: 100vh;
	display: flex;
	align-items: center;
}
.scCont__inner {
	width: 100%;
	padding: 40px 0 25px;
}
@media screen and (max-width:768px){
	.scCont {
		min-height: auto;
		padding-top: 40px;
		padding-bottom: 80px;

	}
	.scCont__inner {
		padding: 0 60px;
	}
}

/* title */
.scCont__title {
	display: none;
}
@media screen and (max-width:768px){
	.scCont__title {
		color: #fff;
		display: block;
		font-size: 24px;
		font-style: italic;
		letter-spacing: 0.4em;
		margin-bottom: 40px;
		text-align: center;
	}
}

/* character */
.character #subCont { background: #64c3d5; }
.characterCont {
	height:555px;
	position: relative;
	color:#FFF;
}
@media screen and (max-width:768px){
	.characterCont {
		height:auto;
	}
}
.character__mainimg {
	display:flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left:70px;
	top:0;
	right:0;
	bottom:0;
	transform:translateY(20px);
	opacity:0;
	transition: all 0.8s ease;
}
@media screen and (max-width:768px){
	.character__mainimg {
		justify-content: flex-start;
		position: relative;
		left:unset;
		top:unset;
		right:unset;
		bottom:unset;
	}
}
.characterCont.a .character__mainimg {
	opacity:1;
	transform:translateY(0);
}
.character__mainimg img {
	display: block;
	max-height:100%;
	width:auto;
}
@media screen and (max-width:768px){
	.character__mainimg img {
		height:837px;
		width:auto;
		max-height: unset;
	}
}
.character__subimgs {
	position: absolute;
	right:0;
	top:0;
	bottom:0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
@media screen and (max-width:768px){
	.character__subimgs {
		position: absolute;
		right:0;
		top:210px;
		bottom:0;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}
}
.character__subimgs li {
	width:170px;
	height:170px;
	margin:10px 0;
	border:4px solid #FFF;
	border-radius: 50%;
	background:#FFF;
	overflow: hidden;
	opacity:0;
	transform:translateY(20px);
	transition: all 0.6s ease-in-out;
}
.character__subimgs li:nth-child(1){
	transition-delay: 0.1s;
}
.character__subimgs li:nth-child(2){
	transition-delay: 0.2s;
}
.characterCont.a .character__subimgs li {
	opacity:1;
	transform:translateY(0);
}
.character__subimgs li img {
	width:100%;
	height:100%;
	object-fit: contain
}
@media screen and (max-width:768px){
	.character__subimgs li {
		width:256px;
		height:256px;
		margin:14px 0;
		border:6px solid #FFF;
	}
}
.character1 .character__subimgs li {
	border-color:#fabfc7;
}
.character2 .character__subimgs li {
	border-color:#667ea5;
}
.character3 .character__subimgs li {
	border-color:#fff;
}
.character4 .character__subimgs li {
	border-color:#fff;
}
.character5 .character__subimgs li {
	border-color:#fff;
}
.character__texts {
	padding-top:237px;
	width:310px;
	position: relative;
}
@media screen and (max-width:768px){
	.character__texts {
		padding-top:50px;
		width:unset;
		display: table;
		margin:0 auto;
	}
}
.character__texts h3 {
	font-size:32px;
	height:40px;
	line-height: 1.25;
	transform:translateY(20px);
	transition:all 0.6s ease;
	opacity:0;
}
@media screen and (max-width:768px){
	.character__texts h3 {
		font-size:44px;
		height:60px;
		line-height: 1.25;
	}
}
.character__cv {
	line-height:1.6;
	padding-top:10px;
	margin-bottom:20px;
	transform:translateY(20px);
	transition:all 0.6s ease;
	opacity:0;
}
@media screen and (max-width:768px){
	.character__cv {
		font-size:26px;
		padding-top:10px;
		margin-bottom:30px;
	}
}
.character__commentBtn {
	display: inline-block;
	width:23px;
	height:22px;
	background:url(../img/common/icon/icon_comment.png) no-repeat center center / contain;
	margin-left:6px;
	vertical-align: bottom;
	margin-bottom:5px;
}
@media screen and (max-width:768px){
	.character__commentBtn {
		width:40px;
		height:38px;
		margin-left:10px;
		margin-bottom:10px;
	}
}
.character__description {
	font-size:14px;
	line-height:2;
	letter-spacing: 0.08em;
	transform:translateY(20px);
	transition:all 0.6s ease;
	opacity:0;
}
@media screen and (max-width:768px){
	.character__description {
		font-size:24px;
	}
}
.character__cv{
	transition-delay: 0.05s;
}
.character__description{
	transition-delay: 0.15s;
}
.characterCont.a .character__texts h3,
.characterCont.a .character__cv,
.characterCont.a .character__description {
	opacity:1;
	transform:translateY(0);
}
.character__select {
	position: absolute;
	right:20px;
	bottom:20px;
	display: flex;
}
@media screen and (max-width:768px){
	.character__select {
		position: relative;
		right:unset;
		bottom:unset;
		display: flex;
		justify-content: center;
		margin-bottom: 9.6vw;
		flex-wrap: wrap;
	}
}
.character__select li {
	width:48px;
	height:48px;
	margin-left:6px;
}
@media screen and (max-width:768px){
	.character__select li {
		width:15.1562vw;
		height:15.1562vw;
		margin:0 1vw 2vw;
	}
}
.character__select li a {
	display: block;
	height:48px;
	transition: all 0.3s ease;
	background:#82cddb;
	border-radius: 50%;
	overflow: hidden;
}
@media screen and (max-width:768px){
	.character__select li a {
		height:15.1562vw;
	}
}
@media screen and (min-width:769px){
	.character__select li a:hover {
		transform:scale(1.1);
	}
}
.character__select li a img {
	display: block;
	width:100%;
	height:100%;
}
.character__select li a.is-active {
	background:#f18e43;
	pointer-events: none;
}