@charset "utf-8";
/*-----------------------------------------------
 * Index
 * Modal
-------------------------------------------------*/
/*-----------------------------------------------
 * Index
-------------------------------------------------*/
/**
 * charaLists
 */
.charaLists__item:not(:first-child) {
	margin-top: 80px;
}
.charaLists__link {
	display: flex;
	position: relative;
	text-decoration: none;
}
@media screen and (max-width:767px){
	.charaLists__item:not(:first-child) {
		margin-top: 10.66666vw;
	}
	.charaLists__link {
		flex-direction: column;
	}
}

/* thumbArea */
.charaLists__thumbArea {
	flex: none;
	width: 50vw;
	max-width: 600px;
	position: relative;
}
.charaLists__thumbWrap {
	width: 100%;
	aspect-ratio: 300 / 169;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
@media screen and (max-width:767px){
	.charaLists__thumbArea {
		width: 100%;
		max-width: 100%;
		padding-bottom: 6.5vw;
	}
}

.charaLists__thumb {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 0;
	transition: transform .6s cubic-bezier(0.25, 1, 0.5, 1);
}
.charaLists__link:hover .charaLists__thumb {
	transform: scale(1.15);
}

/* deco */
.charaLists__thumbWrap:before {
	content: "";
	border: 1px solid #fff;
	box-sizing: border-box;
	width: calc(100% - 16px);
	height: calc(100% - 16px);
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}
.charaLists__thumbWrap:after {
	content: "";
	background: url(../img/common/deco/deco_frame1.svg) no-repeat center / 100%;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}

/* name */
.charaLists__name {
	font-size: min(2.66666vw, 32px);
	line-height: 1;
	margin-top: 24px;
	position: relative;
	z-index: 3;
}
.charaLists__name--en {
	color: rgb(var(--color-gold));
	display: inline-block;
	font-size: min(16vw, 120px);
	line-height: .7;
	position: absolute;
	right: -30px;
	bottom: -12px;
	text-align: right;
	z-index: 2;
}
@media screen and (max-width:767px){
	.charaLists__name {
		display: none;
	}
	.charaLists__name--en {
		font-size: 16vw;
		right: 0;
	}
}

/* castArea */
.charaLists__castArea {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
}
.charaLists__castPhoto {
	width: 13.33333vw;
	max-width: 160px;
	overflow: hidden;
	position: relative;
}
.charaLists__castPhoto img {
	width: 100%;
	position: relative;
	z-index: 0;
	transition: transform .6s cubic-bezier(0.25, 1, 0.5, 1);
}
.charaLists__link:hover .charaLists__castPhoto img {
	transform: scale(1.15);
}
@media screen and (max-width:767px){
	.charaLists__castArea {
		flex-direction: initial;
		justify-content: flex-start;
		width: 100%;
		margin-top: 4vw;
		padding-left: 12vw;
	}
	.charaLists__castPhoto {
		width: 26.33333vw;
		margin-right: 6.5vw;
	}
}

/* deco */
/* .charaLists__castPhoto:before {
	content: "";
	border: 1px solid #fff;
	box-sizing: border-box;
	width: calc(100% - 16px);
	height: calc(100% - 16px);
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}
.charaLists__castPhoto:after {
	content: "";
	background: url(../img/common/deco/deco_frame1_tate.svg) no-repeat 0 0 / 100%;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
} */

/* castnameWrap */
@media screen and (max-width:767px){
	.charaLists__cast__nameWrap {
		display: flex;
		flex-direction: column;
	}
}

/* charaLists__cast__name--chara */
.charaLists__cast__name--chara {
	display: none;
}
@media screen and (max-width:767px){
	.charaLists__cast__name--chara {
		color: #fff;
		display: block;
		font-size: 5.33333vw;
	}
}

/* castname */
.charaLists__cast__name {
	color: #fff;
	font-size: min(2vw, 24px);
	margin-top: 10px;
}
.charaLists__cast__name--cv {
	font-size: 60%;
	margin-right: 8px;
}
@media screen and (max-width:767px){
	.charaLists__cast__name {
		font-size: 4.26666vw;
		margin-top: 0;
	}
	.charaLists__cast__name--cv {
		margin-right: 4px;
	}
}

/* more */
.charaLists__more {
	color: #fff;
    align-items: center;
    display: flex;
    justify-content: center;
	font-size: 16px;
	line-height: 1;
	position: absolute;
	right: 0;
	bottom: 0;
	transition: transform 0.3s ease;
}
.charaLists__link:hover .charaLists__more {
	transform:translateX(10px);
}
.charaLists__more:after {
	background: url(../img/common/deco/deco_side_right.svg) no-repeat 0 0 / 100%;
	content: '';
	display: block;
	height: 40px;
	width: 21px;
	margin-left: 10px;
}
@media screen and (max-width:767px){
	.charaLists__more {
		font-size:3.2vw;
	}
	.charaLists__more:after {
		height: 6.4vw;
    	width: 3.2vw;
	}
}

/**
 * subChara
 */
.subChara {
	margin-top: 80px;
	padding-top: 20px;
	position: relative;
}
@media screen and (max-width:767px){
	.subChara {
		margin-top: 12vw;
		padding-top: 2.66666vw;
	}
}

/**
 * subChara__title
 */
.subChara__title {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: relative;
}

/* ja */
.subChara__title--ja {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size: min(2.66666vw, 32px);
	line-height: 1;
}
.subChara__title--ja:after {
	content: "";
	background: url(../img/common/deco/deco_line.svg) no-repeat center / contain;
	width: 100%;
	height: 8px;
	margin: 30px 0;
}
@media screen and (max-width:767px){
	.subChara__title--ja {
		font-size: 4.26666vw;
	}
	.subChara__title--ja:after {
		height: 1.2vw;
		margin: 4vw 0;
	}
}

/* en */
.subChara__title--en {
	font-size: min(1.66666vw, 20px);
	line-height: 1;
}
@media screen and (max-width:767px){
	.subChara__title--en {
		font-size: 3.7777vw;
	}
}

/* logo */
.subChara__logo {
	width: min(12vw, 144px);
	position: absolute;
	top: 0;
	left: 0;
}
.subChara__logo img {
	width: 100%;
}
@media screen and (max-width:767px){
	.subChara__logo {
		width: 17.33333vw;
	}
}

/**
 * subCharaLists
 */
.subCharaLists {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
	margin-top: 60px;
}
.subCharaLists__item {
	width: min(14.66666vw, 176px);
}
@media screen and (max-width:960px){
	.subCharaLists {
		gap: 5.33333vw;
		margin-top: 6vw;
	}
	.subCharaLists__item {
		width: calc(50% - 5.33333vw);
	}
}
.subCharaLists__link {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	text-decoration: none;
}

/* thumb */
.subCharaLists__thumbWrap {
	aspect-ratio: 1 / 1;
	width: 100%;
	margin-bottom: 10px;
	overflow: hidden;
	position: relative;
}
.subCharaLists__thumb {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 0;
	transition: transform .6s cubic-bezier(0.25, 1, 0.5, 1);
}
.subCharaLists__link:hover .subCharaLists__thumb {
	transform: scale(1.15);
}

/* deco */
.subCharaLists__thumbWrap:before {
	content: "";
	background: url(../img/common/deco/deco_frame2.svg) no-repeat 0 0 / 100%;
	width: 100%;
	height: 100%;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}

/* name */
.subCharaLists__name,
.subCharaLists__castname {
	color: #fff;
	font-size: min(1.33333vw, 16px);
	letter-spacing: 0.01em;
	text-align: center;
	white-space: nowrap;
	margin: 8px 0 0;
}
.subCharaLists__castname--cv {
	font-size: 80%;
	margin-right: 8px;
}
@media screen and (max-width:767px){
	.subCharaLists__name,
	.subCharaLists__castname {
		font-size: 3.2vw;
	}
}

/**
 * br
 */
.listsBr {
	display: block;
}


/*-----------------------------------------------
 * Modal
-------------------------------------------------*/
.modalBox {
	background: url(../img/common/bg/modal_bg.jpg) no-repeat center / cover;
}
@media screen and (max-width:767px){
	.modalBox {
		background-image: url(../img/common/bg/modal_bg_sp.jpg);
	}
}

/**
 * charaDetail
 */
@media screen and (max-width:767px){
	.charaDetailWrap {
		overflow: hidden;
	}
}
.charaDetail {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	width: 100vw;
	max-width: 1120px;
	min-height: 640px;
	opacity: 0;
	pointer-events: none;
	padding: 80px 40px;
	transition: opacity .3s ease;
}
.charaDetail.is-active {
	opacity: 1;
	pointer-events: auto;
}
@media screen and (max-width:767px){
	.charaDetail {
		min-height: auto;
		padding: 60px 24px;
	}
}

.charaDetail__flex {
	display: flex;
	width: 100%;
}
@media screen and (max-width:767px){
	.charaDetail__flex {
		flex-direction: column;
	}
}

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

/* imgWrap */
.charaDetail__imgWrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.charaDetail__imgWrap img {
	max-width: 100%;
}

/* logo */
.charaDetail__logo {
	width: 12vw;
	max-width: 144px;
	position: absolute;
	top: -60px;
	left: 0;
}
.charaDetail__logo img {
	width: 100%;
}
@media screen and (max-width:767px){
	.charaDetail__logo {
		width: 22.93333vw;
		max-width: 172px;
		top: -30px;
	}
}

/* enname */
.charaDetail__enname {
	color: rgb(var(--color-gold));
	font-size: min(16vw, 120px);
    line-height: .7;
	position: absolute;
	bottom: 0;
	left: -80px;
}
@media screen and (max-width:767px){
	.charaDetail__enname {
		right: -24px;
		left: auto;
		text-align: right;
	}
}

/**
 * textArea
 */
.charaDetail__textArea {
	width: 50%;
}
@media screen and (max-width:767px){
	.charaDetail__textArea {
		width: 100%;
		margin-top: 6vw;
	}
}

/* name */
.charaDetail__name {
	color: rgb(var(--color-gold));
	font-size: min(3.33333vw, 40px);
	font-weight: 700;
	letter-spacing: 0.01em;
	margin-bottom: 10px;
}
@media screen and (max-width:767px){
	.charaDetail__name {
		font-size: 5.33333vw;
		margin-bottom: 0;
	}
}

/* cv */
.charaDetail__cvWrap {
	display: flex;
	align-items: center;
	margin-bottom: 30px;
}
.charaDetail__cv {
	font-size: min(2vw, 24px);
}
.charaDetail__cv__in {
	font-size: 70%;
}
@media screen and (max-width:767px){
	.charaDetail__cvWrap {
		align-items: flex-start;
		flex-direction: column;
		margin-bottom: 30px;
	}
	.charaDetail__cv {
		font-size: 3.73333vw;
	}
}

/* commentBtn */
.charaDetail__commentBtn {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
}
.charaDetail__commentBtn.is-on {
	margin-top: 2px;
	margin-left: 16px;
	width: 140px;
	height: 34px;
	overflow: auto;
}
@media screen and (max-width:767px){
	.charaDetail__commentBtn.is-on {
		width: 32vw;
		height: 34px;
		margin-top: 0;
		margin-left: 0;
	}
}

/* post */
.charaDetail__post {
	display: inline-block;
	color: rgb(var(--color-red));
	font-size: min(1.33333vw, 16px);
	margin-bottom: 30px;
}
.charaDetail__magic {
	display: inline-block;
	font-size: min(1.33333vw, 16px);
	margin-left: 10px;
	margin-bottom: 30px;
}
@media screen and (max-width:767px){
	.charaDetail__post {
		font-size: 12px;
	}
	.charaDetail__magic {
		font-size: 12px;
	}
}

/* text */
.charaDetail__text {
	font-size: min(1.33333vw, 16px);
	line-height: 2;
}
@media screen and (max-width:767px){
	.charaDetail__text {
		font-size: 12px;
	}
}

/**
 * charaPager
 */
.charaPager {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 100vh;
	margin: auto;
	position: absolute;
	top: 0;
}
.charaPager.is-prev {
	left: 40px;
}
.charaPager.is-next {
	right: 40px;
}
@media screen and (max-width:767px){
	.charaPager {
		width: 6.66666vw;
		height: 56px;
		top: 60vw;
	}
	.charaPager.is-prev {
		left: 24px;
	}
	.charaPager.is-next {
		right: 24px;
	}
}

/* link */
.charaPager__link {
	color: #fff;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: space-between;
	font-size: 14px;
	width: 100%;
	height: 80px;
	text-decoration: none;
}
@media screen and (max-width:767px){
	.charaPager__link {
		font-size: 1.86666vw;
		height: 14vw;
	}
}

/* arrow */
.charaPager__link:before {
	content: "";
	background-color: rgb(var(--color-red));
	display: block;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100%;
	mask-size: 100%;
	width: 41px;
	height: 47px;
	transition: transform .3s ease;
}
@media screen and (max-width:767px){
	.charaPager__link:before {
		width: 6.8vw;
		height: 7.73333vw;
	}
}

.charaPager.is-prev .charaPager__link:before {
	-webkit-mask-image: url(../img/common/icon/icon_allow_left.svg);
	mask-image: url(../img/common/icon/icon_allow_left.svg);
}
.charaPager.is-next .charaPager__link:before {
	-webkit-mask-image: url(../img/common/icon/icon_allow_right.svg);
	mask-image: url(../img/common/icon/icon_allow_right.svg);
}
.charaPager.is-prev .charaPager__link:hover:before {
	transform: translateX(-10px);
}
.charaPager.is-next .charaPager__link:hover:before {
	transform: translateX(10px);
}
@media screen and (max-width:767px){
	.charaPager.is-prev .charaPager__link:hover:before {
		transform: translateX(0);
	}
	.charaPager.is-next .charaPager__link:hover:before {
		transform: translateX(0);
	}
}

/**
 * commentModalWrap
 */
.commentModalWrap {
	-webkit-overflow-scrolling: touch;
	background: rgba(0,0,0,.8);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	width: 100%;
	height: 100%;
	display: none;
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
}
.commentModal {
	width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}
.commentModal__inner {
	display: flex;
	justify-content: center;
	align-items: center;
	height: auto;
	width: 100%;
	min-height: 100%;
	margin: 0 auto;
	position: relative;
}
.commentModal__detail {
	width: 800px;
	padding: 50px 0;
}
@media screen and (max-width:767px){
	.commentModal__detail {
		width: 100%;
		padding: 50px 24px;
	}
}

/* text */
.commentModal__comment {
	color: #fff;
	font-size: min(1.33333vw, 16px);
}
.commentModal__comment.is-org {
	margin-top: 60px;
}
@media screen and (max-width:767px){
	.commentModal__comment {
		font-size: 12px;
	}
}


/**
 * profileModal__textWrap
 */
/* detial */
.profileModal__detail {
	display: flex;
	width: 100%;
	padding-top: 80px;
}
@media screen and (max-width:767px){
	.profileModal__detail {
		flex-direction: column;
		padding-top: 10vw;
	}
}

/* imgWrap */
.profileModal__imgWrap {
	flex: none;
	width: 13.33333vw;
	max-width: 160px;
}
.profileModal__imgWrap img {
	width: 100%;
}
@media screen and (max-width:767px){
	.profileModal__imgWrap {
		width: 100%;
		margin: 0 auto 4vw;
	}
}

.profileModal__textWrap {
	width: 100%;
	padding-left: min(3.33333vw, 40px);
}
.profileModal__nameWrap {
	display: flex;
	margin-top: -.4em;
	margin-bottom: 10px;
}
.profileModal__name {
	color: rgb(var(--color-gold));
	font-size: min(1.66666vw, 20px);
}
.profileModal__text {
	color: #fff;
	font-size: min(1.33333vw, 16px);
}
@media screen and (max-width:767px){
	.profileModal__textWrap {
		padding-left: 0;
	}
	.profileModal__nameWrap {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 0;
		margin-bottom: 10px;
	}
	.profileModal__name {
		font-size: min(4vw, 30px);
		margin-top: 0;
		margin-bottom: 10px;
		text-align: center;
	}
	.profileModal__text {
		font-size: 12px;
	}
}