@charset "utf-8";
/*-----------------------------------------------
 * COMMON
-------------------------------------------------*/
@media screen and (min-width: 768px){
	.contBG__color{
		position: absolute;
		left: 0;
		right: 0;
		padding-top: 320px;
		margin: 0 auto;
	}
	.contBG__colorIn{
		height: 200%;
		transform-origin: center top;
	}
	.fullContentFixed.-bgTitle{
		margin: 0 auto;
	}

	.contBG__title,
	.contBG__titleImg{
		max-width: 890px;
		max-height: 323.4656px;
	}
}

.fullContentFixed.-bgTitle .fullContentFixedIn{
	position: absolute;
}

/*-----------------------------------------------
 * CHARACTER
-------------------------------------------------*/
#character{
	margin: 0 auto;
	padding-bottom: 0;
}
@media screen and (min-width:768px){
	#character{
		min-height: min(calc(1200 / var(--min-ww) * 100vw), 1200px);
	}
}
#character .contSectionIn{
	width: 100%;
	max-width: unset;
}
#character .cont_h2{
	z-index: 2;
}
#character .contentIn{
	position: relative;
	margin-top: -44.8px;
}
@media screen and (max-width: 767px){
	#character .contentIn{
		margin-top: calc(-344 / var(--min-ww) * 100vw);
	}
}



.characterMain{
	width: 100%;
	/* max-width: 3072px; */
	margin: 0 auto;
}
.chara_bg{
	width: 960px;
	padding-top: 80px;
	margin-left: 120px;

	width: 80%;
	padding-top: calc(120px + ((100vw - 1200px)* -0.0334));
	margin-left: 10%;
}
.chara_bgIn{
	width: 100%;
	padding-top: 83.3334%;
	margin: 0 auto;
	position: relative;
}
.chara_bgImg{
	width: 100%;
	height: 100%;
	-webkit-mask: url(../img/character/chara_bg.svg) no-repeat center / contain;
	mask: url(../img/character/chara_bg.svg) no-repeat center / contain;
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 60%, rgba(255,210,0,1) 100%);
	position: absolute;
	top: 0;
	left: 0;
}
.chara_bg img{
	width: 100%;
}
@media screen and (max-width: 767px){
	.chara_bg{
		width: 100%;
		padding-top: calc(328 / var(--min-ww) * 100vw);;
		overflow: hidden;
		margin-left: unset;
	}
	.chara_bgIn{
		width: calc(1152 / var(--min-ww) * 100vw);/* 1152 */
		padding-top: calc(960 / var(--min-ww) * 100vw);/* 960 */
		margin-left: calc(-105 / var(--min-ww) * 100vw);
		margin-right: unset;
	}
}


.chara_en{
	position: absolute;
	top: 0;
	left: 0;
	font-family: var(--font-en);
	font-weight: 900;
	line-height: 0.725;
	letter-spacing: 0;

	/* font-size: calc(112 / var(--min-ww) * 100vw); */
	/* margin-top: calc(50 / var(--min-ww) * 100vw); */

	font-size: min(9.3334vw, 112px);
	margin-top: calc(50px - ((100vw - 1200px) * 0.015));
	margin-left: 56.6667%;
}
@media screen and (max-width: 1200px){
	.chara_en{
		margin-top: calc(88px - ((100vw - 800px) * 0.095));
	}
}
.chara_en__txtWrap{
	display: block;
	transform: skewY(345deg);
	transform-origin: left bottom;
}
.chara_en__txt{
	display: block;
	line-height: 0.725;
	color: #FFF;
}
.chara_en__txt:nth-of-type(1){
	color: var(--color-main-yellow);
}


@media screen and (max-width: 767px){
	.chara_en{
		font-size: calc(67 / var(--min-ww) * 100vw);
		text-align: right;
		left: unset;
		right: 0;
		line-height: 1;
		margin-top: calc(229 / var(--min-ww) * 100vw);;
		margin-left: unset;
	}
	.chara_en__txtWrap{
		transform-origin: right top;
		line-height: 1;
	}
	.chara_en__txt{
		color: #000;
		line-height: 0.72;
		letter-spacing: 0;
	}
}


.chara_num{
	position: absolute;
	top: 0;
	left: 0;
	margin-left: 29.6667%;/* 356 */
	/* margin-top: 186px; */
	margin-top: calc(186px + ((100vw - 1200px) * 0.0167));
}
.chara_num__txtWrap{
	display: block;
	transform: skewY(345deg);
	transform-origin: left bottom;
}
.chara_num__txt{
	display: block;
	font-family: var(--font-en);
	font-weight: 900;
	line-height: 0.725;
	letter-spacing: 0;
	color: var(--color-main-red);
}
.chara_num__txt.-chara{
	font-size: 28px;
	font-size: calc(28 / var(--min-ww) * 100vw);
	margin-bottom: 12px;
	margin-bottom: calc(12 / var(--min-ww) * 100vw);
}
.chara_num__txt.-num{
	font-size: 167px;
	font-size: calc(167 / var(--min-ww) * 100vw);
}

@media screen and (max-width: 767px){
	.chara_num{
		margin-left: calc(180 / var(--min-ww) * 100vw);
		margin-top: calc(392 / var(--min-ww) * 100vw);
	}
}



.charaImageWrap{
	position: absolute;
	top: 0;
	left: 0;
	width: 46.6667%;/* 560 */
	margin-left: 20%;/* 240 */
	padding-top: calc(120px + ((100vw - 1200px)* -0.0334));
	z-index: 2;
}
.charaImageInWrap{
	width: 100%;
	padding-top: 142.8572%;/* 800 */
	position: relative;
}
.charaImageMain{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.charaImageMain img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.charaImageFace{
	position: absolute;
	top: 0;
	width: 160px;
	/*height: 400px; 400 */
	
	width: 28.5715%;/* 160 */
	padding-top: 71.4286%;/* 400 */

	transform: skewY(345deg);
	transform-origin: right top;
}
.charaImageFace__cont{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.charaImageFaceIn{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: 276.25%;/* 442 */
	transform: skewY(-345deg);
	transform-origin: right top;
	background-color: #000;
	overflow: hidden;
}
.charaImageFaceIn:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-main-yellow);
	mix-blend-mode: color;
	z-index: 2;
}
.charaImageFaceIn img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.charaImageFace.-l{
	left: 0;
	margin-top: 35.7143%;/* 200 */
}
.charaImageFace.-r{
	right: 0;
	margin-top: 7.1429%;/* 40 */
}

.visualChange{
	width: 17.8572%;/* 100 */
	padding-top: 17.8572%;/* 100 */
	position: absolute;
	top: 0;
	right: 0;
	margin-top: 83.9286%;/* 470 */
	margin-right: -8.9286%;/* -50 */
}
.visualChange.--none{
	display: none;
}
.btn_visualChange{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.btn_visualChange:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 64%;/* 64 */
	height: 64%;/* 64 */
	margin: auto;
	background: url(../img/common/icon_changeCircle.svg) no-repeat center / contain;
	transition: transform .4s ease;
}
.btn_visualChange--txt{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/character/txt_visualChange.svg) no-repeat center / contain;
	animation: ani_rotate360 16s linear infinite;
}
@media (hover: hover) and (pointer: fine){
	.btn_visualChange:hover .btn_charaChange--txt{
		animation-play-state: paused;
	}
	.btn_visualChange:hover::before{
		transform: rotate(-180deg);
	}
}

/** IMAGE CHANGE - STANDBY **/
.charaImageFace.-l .charaImageFace__cont{
	transform: translateY(50%);
	opacity: 0;
	transition: transform .4s ease, opacity .3s ease;
}
.charaImageFace.-r .charaImageFace__cont{
	opacity: 0;
	transform: translateY(-50%);
	transition: transform .4s ease, opacity .3s ease;
}
.charaImageMain{
	opacity: 0;
	transform: scale(80%);
	transition: transform .4s ease, opacity .3s ease;
}


/** IMAGE CHANGE - ACTIVE **/
.charaImageList.--active .charaImageFace.-l .charaImageFace__cont,
.charaImageList.--active .charaImageFace.-r .charaImageFace__cont{
	transform: translateY(0%);
	opacity: 1;
	transition-delay: .5s, .6s;
}
.charaImageList.--active .charaImageMain{
	transform: scale(100%);
	opacity: 1;
	transition-delay: .3s, .4s;
}


@media screen and (max-width: 767px){
	.charaImageWrap{
		right: 0;
		width: 89.6%;/* 672 */
		margin-left: auto;
		margin-right: auto;
		padding-top: calc(344 / var(--min-ww) * 100vw);
	}
	.visualChange{
		margin-top: 99.4048%;/* 668 */
		margin-right: 0;
	}
}



.charaDetail{
	width: 30%;/* 360 */
	position: absolute;
	top: 0;
	left: 0;
	margin-left: 63.3334%;/* 760 */
	/* margin-top: 200px; */
	margin-top: calc(200px - ((100vw - 1200px) * 0.015));
	z-index: 2;
}
.chara_ja{
	font-size: min(calc(64 / var(--min-ww) * 100vw), 64px);
	line-height: 1;
	font-weight: 900;
}
.chara_ja > span{
	background: linear-gradient(180deg, transparent 0%, transparent 18%, var(--color-main-yellow) 18%, var(--color-main-yellow) 88%, transparent 88%, transparent 100%);
}
.charaDetailIn{
	padding-left: 22.2223%;/* 80 */
}
.chara_cv{
	margin-top: min(calc(24 / var(--min-ww) * 100vw), 24px);
	font-size: min(calc(20 / var(--min-ww) * 100vw), 20px);
	line-height: 1;
	font-weight: 700;
	display: inline-flex;
	align-items: flex-end;
}
.chara_cv span{
	font-size: min(calc(16 / var(--min-ww) * 100vw), 16px);
	font-family: var(--font-en);
	font-weight: 700;
	color: var(--color-main-red);
	padding-right: min(calc(12 / var(--min-ww) * 100vw), 12px);
}
.chara_cv--comment{
	display: inline-block;
	width: min(calc(48 / var(--min-ww) * 100vw), 48px);
	height: min(calc(20 / var(--min-ww) * 100vw), 20px);
	position: relative;
}
.btn_comment{
	position: absolute;
	top: max(calc(-4 / var(--min-ww) * 100vw), -4px);
	left: min(calc(8 / var(--min-ww) * 100vw), 8px);
	width: min(calc(40 / var(--min-ww) * 100vw), 40px);
	height: min(calc(20 / var(--min-ww) * 100vw), 20px);
	background-color: var(--color-main-yellow);
	-webkit-mask: url(../img/common/icon_fukidashi.svg?v2) no-repeat center / contain;
	mask: url(../img/common/icon_fukidashi.svg?v2) no-repeat center / contain;
	pointer-events: auto;
	background-color: #000;
}

.chara_txt{
	margin-top: min(calc(24 / var(--min-ww) * 100vw), 24px);
	font-size: min(calc(16 / var(--min-ww) * 100vw), 16px);
	line-height: 2;
}

@media (hover: hover) and (pointer: fine){
	.btn_comment{
		transition: .3s ease;
	}
	.btn_comment:hover{
		background-color: var(--color-main-red);
		transform: scale(110%);
	}
}

@media screen and (max-width: 767px){
	.charaDetail{
		position: relative;
		width: 100%;
		padding: 0 6.4%;
		margin-top: calc(-64 / var(--min-ww) * 100vw);
		margin-left: 0;
	}
	.chara_ja{
		font-size: var(--sp-size-72);
	}
	.charaDetailIn{
		padding-left: 0;
	}
	.chara_cv{
		margin-top: var(--sp-size-24);
		font-size: var(--sp-size-28);
	}
	.chara_cv span{
		font-size: var(--sp-size-24);
		padding-right: var(--sp-size-24);
	}

	.chara_cv--comment{
		width: var(--sp-size-48);
		height: var(--sp-size-20);
	}
	.btn_comment{
		top: calc(var(--sp-size-2) * -1);
		left: var(--sp-size-8);
		width: var(--sp-size-40);
		height: var(--sp-size-24);
	}

	.chara_txt{
		margin-top: var(--sp-size-40);
		font-size: var(--sp-size-24);
	}
}



/**
* characterSelectWrap
**/
.characterSelectWrap{
	position: absolute;
	top: 0;
	left: 0;
	width: min(13.3334%, 160px);
	margin-top: calc(240px + ((100vw - 1200px) * 0.1367));
}
.characterSelectInWrap{
	width: 100%;
}
.characterSelectLists{
	display: grid;
	row-gap: min(0.6667vw, 8px);
	grid-template-columns: repeat(2, 1fr);
	width: 100%;
}
.characterSelectList{
	width: 100%;
	padding-top: 93.2125%;
	position: relative;
	transform: skewY(-15deg);
	transform-origin: right bottom;
}
.characterSelect__link{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	pointer-events: auto;
	overflow: hidden;
}
.characterSelect__link:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(var(--color-main-red), var(--color-main-red)) right bottom / 0 100% no-repeat;
	transition: background-size 0.3s ease;
	opacity: 80%;
}
.characterSelect__link.--is-active:before{
	background-size: 100% 100%;
	background-position: left bottom;
	opacity: 1;
}
@media (hover: hover) and (pointer: fine){
	.characterSelect__link:hover:before{
		background-size: 100% 100%;
		background-position: left bottom;
	}
}
.characterSelect__img{
	position: absolute;
	top: 0;
	width: 100%;
	padding-top: 120%;
	transform: skewY(15deg);
	margin-top: -10%;
	z-index: 2;
	z-index: 2;
}

.characterSelect__img img{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	object-fit: cover;
}

@media screen and (max-width: 767px){
	.characterSelectWrap{
		width: 100%;
		position: relative;
		margin-top: var(--sp-size-96);
		padding: 0 6.4%;
	}
	.characterSelectLists{
		row-gap: var(--sp-size-16);
		grid-template-columns: repeat(5, 1fr);
	}
}


/** order RED **/
body[data-option="order"] .contBG__color--cont{
	background-color: var(--color-main-red);
}
body[data-option="order"] .contBG__color--cont:before{
	filter: invert(1);
	opacity: 40%;
}
body[data-option="order"] .chara_en__txt:nth-of-type(1){
	color: var(--color-main-red);
}
body[data-option="order"] .chara_bgImg{
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 60%, var(--color-main-red) 100%);
}
body[data-option="order"] .charaImageFaceIn:before{
	background-color: var(--color-main-red);	
}
body[data-option="order"] .chara_ja > span{
	background: linear-gradient(180deg, transparent 0%, transparent 18%, var(--color-main-red) 18%, var(--color-main-red) 88%, transparent 88%, transparent 100%);
}
body[data-option="order"] .chara_cv span{
	color: var(--color-main-yellow);
	background-color: var(--color-main-red);
}
body[data-option="order"] .characterSelect__link:before{
	background-image: linear-gradient(var(--color-main-yellow), var(--color-main-yellow));
}
body[data-option="order"] .characterMain{
	color: #FFF;
}
body[data-option="order"] .btn_comment{
	background-color: #FFF;
}
@media (hover: hover) and (pointer: fine){
	body[data-option="order"] .btn_comment:hover{
		background-color: var(--color-main-yellow);
	}
}


/* slur */
body[data-option="slur"] .contBG__color--cont{
	background-color: var(--color-main-blue);
}
body[data-option="slur"] .contBG__color--cont:before{
	filter: invert(1);
	opacity: 40%;
}
body[data-option="slur"] .chara_num__txt,
body[data-option="slur"] .chara_num__txt{
	color: var(--color-main-yellow);
}
body[data-option="slur"] .chara_en__txt:nth-of-type(1){
	color: var(--color-main-blue);
}
body[data-option="slur"] .chara_bgImg{
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 60%, var(--color-main-blue) 100%);
}
body[data-option="slur"] .charaImageFaceIn:before{
	background-color: var(--color-main-blue);	
}
body[data-option="slur"] .chara_ja > span{
	background: linear-gradient(180deg, transparent 0%, transparent 18%, var(--color-main-blue) 18%, var(--color-main-blue) 88%, transparent 88%, transparent 100%);
}
body[data-option="slur"] .chara_cv span{
	color: var(--color-main-yellow);
	background-color: var(--color-main-blue);
}
body[data-option="slur"] .characterSelect__link:before{
	background-image: linear-gradient(var(--color-main-yellow), var(--color-main-yellow));
}
body[data-option="slur"] .characterMain{
	color: #FFF;
}
body[data-option="slur"] .btn_comment{
	background-color: #FFF;
}
@media (hover: hover) and (pointer: fine){
	body[data-option="slur"] .btn_comment:hover{
		background-color: var(--color-main-yellow);
	}
}


/*-----------------------------------------------
 * COMMENT
-------------------------------------------------*/
#commentModal .oneModalIn__cont{
	width: 100%;
}
#js-commentModalCont{
	width: 100%;
	max-width: 1920px;
	padding: 0 min(6.6667%, calc(80px * var(--max-percent)));
	display: flex;
	margin: 0 auto;
}
.commentCont__img{
	width: 41.5385%;
	margin-right: 4.6154%;/* 48 */
	max-width: 480px;
	flex-shrink: 0;
}
.commentCont__img img{
	width: 100%;
}
.commentCont__Wrap{
	width: 100%;
}


@media screen and (max-width: 860px){
	#js-commentModalCont{
		flex-direction: column;
	}
	.commentCont__img{
		width: 100%;
		max-width: 100%;
		margin-right: 0;
		padding-bottom: 48px;
	}
}

.commentCont_h2{
	width: 100%;
	line-height: 1;
}
.commentCont_h2__job{
	display: block;
	font-size: 20px;
	color: var(--color-main-red);
	font-weight: 700;
	margin-bottom: 12px;
}
.commentCont_h2__name{
	display: block;
	font-size: 32px;
	font-weight: 900;
}
.commentCont__commentWrap{
	margin-top: 40px;
	width: 100%;
	padding: 24px;
	background-color: #fff;
	border: 1px solid #000;
}
.commentCont__infoWrap{
	width: 100%;
	padding-top: 40px;
}
.commentCont_mainTxt,
.commentCont__infotxt{
	padding-top: 16px;
    font-size: 16px;
    line-height: 2;
}

#js-commentModalCont .cont_txtTitle{
	font-size: 22px;
	line-height: 0.8;
}

@media screen and (max-width: 767px){
	#commentModal .oneModalIn__cont{
		padding: var(--sp-size-96) 0;
	}
	#js-commentModalCont{
		padding: 0 6.4%;
	}
	.commentCont__img{
		width: 100%;
		padding-bottom: var(--sp-size-48);
	}
	.commentCont_h2__job{
		font-size: var(--sp-size-32);
		margin-bottom: var(--sp-size-16);
	}
	.commentCont_h2__name{
		font-size: var(--sp-size-40);
	}
	.commentCont__commentWrap{
		margin-top: var(--sp-size-48);
		padding: var(--sp-size-24);
	}
	.commentCont__infoWrap{
		padding-top: var(--sp-size-48);
	}
	.commentCont_mainTxt,
	.commentCont__infotxt{
		font-size: var(--sp-size-24);
		padding-top: var(--sp-size-20);
	}
	#js-commentModalCont .cont_txtTitle{
		font-size: var(--sp-size-32);
	}
}