@charset "utf-8";
/**
 * charaListsWrap
 */
.charaListsWrap {
	width: var(--common-incont-width);
	margin-right: auto;
	margin-left: auto;
}
@media screen and (max-width:767px){
	.charaListsWrap {
		margin-top: 30px;
	}
}

/* lists */
.charaLists {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

/* item */
.charaLists__item {
	width: calc(100% / 4);
	height: 80px;
	margin-bottom: 40px;
	position: relative;
	overflow: hidden;
}
@media screen and (max-width:767px){
	.charaLists__item {
		width: calc(100% / 3);
		height: 46px;
		margin-bottom: 28px;
	}
}

.charaLists__item__sub {
	width: calc(100% / 8);
	height: 80px;
	margin-bottom: 40px;
	position: relative;
	overflow: hidden;
}
.charaLists__item__sub.--thumbW2{
	width: calc(100% / 6);
}
@media screen and (max-width:767px){
	.charaLists__item__sub {
		width: calc(100% / 5);
		height: 46px;
		margin-bottom: 28px;
	}
	.charaLists__item__sub.--thumbW2{
		width: calc(100% / 4);
	}
}

/* a */
.charaLists__item > a {
	background-color: rgba(0,0,0,60%);
	clip-path: polygon(46px 0, 100% 0, calc(100% - 46px) 100%, 0% 100%);
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .2s ease;
	position: relative;
	z-index: 1;
}
@media screen and (max-width:767px){
	.charaLists__item > a {
		clip-path: polygon(28px 0, 100% 0, calc(100% - 28px) 100%, 0% 100%);
	}
}

.charaLists__item__sub > a {
	background-color: rgba(0,0,0,60%);
	clip-path: polygon(46px 0, 100% 0, calc(100% - 46px) 100%, 0% 100%);
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .2s ease;
	position: relative;
	z-index: 1;
}
@media screen and (max-width:767px){
	.charaLists__item__sub > a {
		clip-path: polygon(28px 0, 100% 0, calc(100% - 28px) 100%, 0% 100%);
	}
}

.charaLists__item > a:hover {
	background-color: rgb(var(--main-color-red));
}

.charaLists__item__sub > a:hover {
	background-color: rgb(var(--main-color-red));
}

/* img */
.charaLists__item > a:hover img {
	animation: .2s linear 0s flashAni;
}

.charaLists__item__sub > a:hover img {
	animation: .2s linear 0s flashAni;
}

/* line */
.charaLists__item:before,
.charaLists__item:after,
.charaLists__item__sub:before,
.charaLists__item__sub:after {
	content: '';
	background-color: #fff;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100%;
	mask-size: 100%;
	-webkit-mask-image: url(../img/common/corner_l.svg);
    mask-image: url(../img/common/corner_l.svg);
	display: block;
	width: 80px;
    height: 136px;
	position: absolute;
	pointer-events: none;
	z-index: 2;
}
@media screen and (max-width:767px){
	.charaLists__item:before,
	.charaLists__item:after,
	.charaLists__item__sub:before,
	.charaLists__item__sub:after {
		width: 94px;
    	height: 46px;
	}
}

.charaLists__item:before{
	top: 0;
	left: -33px;
}
.charaLists__item__sub:before{
	top: 0;
	left: -33px;
}
.charaLists__item:after{
	bottom: 0;
	right: -33px;
}
.charaLists__item__sub:after{
	bottom: 0;
	right: -33px;
}

/* img */
/* .charaLists__item > a img {
	width: 230%;
} */
@media screen and (max-width:767px){
	.charaLists__item > a img {
		width: 76vw;
	}
	.charaLists__item__sub > a img {
		width: 76vw;
	}
}


/**
 * modal
 */
.charaModal__in {
	width: 1200px;
}
@media screen and (max-width:767px){
	.charaModal__in {
		width: 100%;
		padding: 50px 20px;
	}
}

/* flex */
.charaModal__flex {
	display: flex;
}
@media screen and (max-width:767px){
	.charaModal__flex {
		display: block;
	}
}

/**
 * charaModal__imgWrap
 */
.charaModal__imgWrap {
	flex: none;
	width: 520px;
	position: relative;
}
@media screen and (max-width:767px){
	.charaModal__imgWrap {
		width: 100%;
	}
}

/* img */
.charaModal__imgWrap img {
	width: 100%;
	transition: opacity .3s ease;
}
.charaImg1 {
	opacity: 1;
}
.charaImg2 {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
}
.charaModal__imgWrap.is-change .charaImg1 {
	opacity: 0;
}
.charaModal__imgWrap.is-change .charaImg2 {
	opacity: 1;
}


/**
 * charaModal__textWrap
 */
.charaModal__textWrap {
	width: 100%;
}

/* name */
.charaModal__name {
	width: 142.86%;
	font-size: 56px;
	color: #fff;
	line-height: 1;
	-moz-transform: scale(0.7, 1);
	-webkit-transform: scale(0.7, 1);
	-ms-transform: scale(0.7, 1);
	transform: scale(0.7, 1);
	transform-origin: center left;
	display: block;
}
@media screen and (max-width:767px){
	.charaModal__name {
		font-size: 30px;
	}
}

/* detail */
.charaModal__detail {
	color: #fff;
	margin-top: 40px;
	font-size: 16px;
	line-height: 2;
}
@media screen and (max-width:767px){
	.charaModal__detail {
		margin-top: 30px;
		font-size: 12px;
	}
}

/**
 * charaModal__cv
 */
.charaModal__cv {
	display: flex;
	align-items: center;
	margin-top: 30px;
}
@media screen and (max-width:767px){
	.charaModal__cv {
		margin-top: 20px;
	}
}

/* in */
.charaModal__cv__in {
	display: inline-block;
	font-size: 20px;
	line-height: 1;
	background-color: rgb(var(--main-color-red));
	color: #fff;
	-moz-transform: scale(0.7, 1);
	-webkit-transform: scale(0.7, 1);
	-ms-transform: scale(0.7, 1);
	transform: scale(0.7, 1);
	transform-origin: center left;
}
@media screen and (max-width:767px){
	.charaModal__cv__in {
		font-size: 16px;
	}
}

.charaModal__cv__in__margin{
	display: inline-block;
	font-size: 20px;
	line-height: 1;
	color: #FFF;
	-moz-transform: scale(0.7, 1);
	-webkit-transform: scale(0.7, 1);
	-ms-transform: scale(0.7, 1);
	transform: scale(0.7, 1);
	transform-origin: center left;
	margin-left: -1em;
}
@media screen and (max-width:767px){
	.charaModal__cv__in__margin {
		font-size: 16px;
	}
}

/**
 * charaChangeBtn
 */
.charaChangeBtn{
	margin-top: 48px;
}
@media screen and (max-width:767px){
	.charaChangeBtn{
		margin-top: 0;
		position: absolute;
		top: 42%;
		right: 20px;
	}
}

/* a */
.charaChangeBtn a{
	width: 90px;
	height: 90px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-size: 12px;
	text-decoration: none;
	letter-spacing: 0;
	color: #fff;
}
@media screen and (max-width:767px){
	.charaChangeBtn a{
		width: 70px;
		height: 70px;
		font-size: 10px;
	}
}

.charaChangeBtn a:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/common/btn_change.svg) no-repeat center center / contain;
	transition: all .3s ease;
}
.charaChangeBtn a.is-active:after{
	transform: rotate(-180deg);
}


/*-----------------------------------------------
 * White ver. style
 * .bodyに「is-change」クラスを付与
-------------------------------------------------*/
body.body.is-change .charaLists__item:before,
body.body.is-change .charaLists__item:after,
body.body.is-change .charaLists__item__sub:before,
body.body.is-change .charaLists__item__sub:after {
	background-color: #000;
}

body.body.is-change .charaLists__item > a:hover,
body.body.is-change .charaLists__item__sub > a:hover {
	background-color: rgb(var(--main-color-lightblue));
}

body.body.is-change .charaModal__cv__in {
	background-color: rgb(var(--main-color-lightblue));
}

body.body.is-change .charaLists__item > a,
body.body.is-change .charaLists__item__sub > a {
	background-color: #fff;
}