@charset "utf-8";
#fullWrap{
	overflow: hidden;
}
@supports (overflow: clip){
	#fullWrap{
		overflow: clip;
	}
}

/*-----------------------------------------------
 * diagram
-------------------------------------------------*/
#diagram .comSectionIn{
	padding: 0 min(5.3334%, 64px);
}

/* page ttl */
.pageTitle{
	width: 100%;
	position: relative;
	border: min(calc(5 / var(--vw-min) * 100vw), 5px) solid var(--color-purple);
	border-radius: min(calc(15 / var(--vw-min) * 100vw), 15px);
	padding: min(calc(32 / var(--vw-min) * 100vw), 32px);
	background-color: var(--color-white);
	font-weight: 700;
	color: var(--color-purple);
	margin-top: min(calc(17 / var(--vw-min) * 100vw), 17px);
	margin-bottom: min(calc(20 / var(--vw-min) * 100vw), 20px);
	text-align: center;
}
.pageTitle__title{
	font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
	line-height: 1.6667;
	font-weight: 700;
}
.pageTitle > .pageList__deco{
	margin-top: max(calc(-22 / var(--vw-min) * 100vw), -22px);	
}
.pageList__deco{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: min(calc(40 / var(--vw-min) * 100vw), 40px);
	height: min(calc(40 / var(--vw-min) * 100vw), 40px);
	margin: 0 auto;
	pointer-events: auto;
}
.pageList__deco:before{
	content: '';
	z-index: 2;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 80%;
	height: 80%;
	margin: auto;
}
.pageList__deco:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-mask: url(../img/common/face/deco_face01.svg) no-repeat center / contain;
	mask: url(../img/common/face/deco_face01.svg) no-repeat center / contain;
	background-color: var(--color-purple);
}

/* diagramBlock */
.diagramBlock{
	position: relative;
	width: 100%;
	max-width: min(calc(935 / var(--vw-min) * 100vw),935px);
	margin: 0 auto;
}
.diagramBg{
	width: 100%;
	height: auto;
	position: relative;
}
@media screen and (max-width:768px){
	.diagramBlock{
		width: 100%;
		overflow: auto;
	}
	.diagramBg{
		width: calc(935 / var(--vw-min) * 100vw);
	}
}

/* diagram > chara */
.d_chara{
	display: block;
	z-index: 1;
	position: absolute;
	transition:transform 0.3s ease;
}
#d_chara1{
	left: min(calc(348 / var(--vw-min) * 100vw),348px);
	top: min(calc(553 / var(--vw-min) * 100vw),553px);
	width: min(calc(204 / var(--vw-min) * 100vw),204px);
	height: min(calc(204 / var(--vw-min) * 100vw),204px);
	background: url(../img/diagram/d_chara1.png) no-repeat center center /contain;
}
#d_chara2{
	left: min(calc(15 / var(--vw-min) * 100vw),15px);
	top: min(calc(553 / var(--vw-min) * 100vw),553px);
	width: min(calc(204 / var(--vw-min) * 100vw),204px);
	height: min(calc(204 / var(--vw-min) * 100vw),204px);
	background: url(../img/diagram/d_chara2.png) no-repeat center center /contain;
}
#d_chara3{
	top: min(calc(1086 / var(--vw-min) * 100vw),1086px);
	left: min(calc(286 / var(--vw-min) * 100vw),286px);
	width: min(calc(204 / var(--vw-min) * 100vw),204px);
	height: min(calc(204 / var(--vw-min) * 100vw),204px);
	background: url(../img/diagram/d_chara3.png) no-repeat center center /contain;
}
#d_chara4{
	top: min(calc(555 / var(--vw-min) * 100vw),555px);
	left: min(calc(679 / var(--vw-min) * 100vw),679px);
	width: min(calc(204 / var(--vw-min) * 100vw),204px);
	height: min(calc(204 / var(--vw-min) * 100vw),204px);
	background: url(../img/diagram/d_chara4.png) no-repeat center center /contain;
}
#d_chara5{
	top: min(calc(260 / var(--vw-min) * 100vw),260px);
	left: min(calc(529 / var(--vw-min) * 100vw),529px);
	width: min(calc(159 / var(--vw-min) * 100vw),159px);
	height: min(calc(159 / var(--vw-min) * 100vw),159px);
	background: url(../img/diagram/d_chara5.png) no-repeat center center /contain;
}
#d_chara6{
	top: min(calc(260 / var(--vw-min) * 100vw),260px);
	left: min(calc(345 / var(--vw-min) * 100vw),345px);
	width: min(calc(159 / var(--vw-min) * 100vw),159px);
	height: min(calc(159 / var(--vw-min) * 100vw),159px);
	background: url(../img/diagram/d_chara6.png) no-repeat center center /contain;
}
#d_chara7{
	top: min(calc(263 / var(--vw-min) * 100vw),263px);
	left: min(calc(77 / var(--vw-min) * 100vw),77px);
	width: min(calc(159 / var(--vw-min) * 100vw),159px);
	height: min(calc(159 / var(--vw-min) * 100vw),159px);
	background: url(../img/diagram/d_chara7.png) no-repeat center center /contain;
}
#d_chara8{
	top: min(calc(263 / var(--vw-min) * 100vw),263px);
	left: min(calc(709 / var(--vw-min) * 100vw),709px);
	width: min(calc(159 / var(--vw-min) * 100vw),159px);
	height: min(calc(159 / var(--vw-min) * 100vw),159px);
	background: url(../img/diagram/d_chara8.png) no-repeat center center /contain;
}
#d_chara9{
	top: min(calc(84 / var(--vw-min) * 100vw),84px);
	left: min(calc(526 / var(--vw-min) * 100vw),526px);
	width: min(calc(159 / var(--vw-min) * 100vw),159px);
	height: min(calc(159 / var(--vw-min) * 100vw),159px);
	background: url(../img/diagram/d_chara9.png) no-repeat center center /contain;
}
#d_chara10{
	top: min(calc(84 / var(--vw-min) * 100vw),84px);
	left: min(calc(347 / var(--vw-min) * 100vw),347px);
	width: min(calc(159 / var(--vw-min) * 100vw),159px);
	height: min(calc(159 / var(--vw-min) * 100vw),159px);
	background: url(../img/diagram/d_chara10.png) no-repeat center center /contain;
}
#d_chara11{
	top: min(calc(84 / var(--vw-min) * 100vw),84px);
	left: min(calc(709 / var(--vw-min) * 100vw),709px);
	width: min(calc(159 / var(--vw-min) * 100vw),159px);
	height: min(calc(159 / var(--vw-min) * 100vw),159px);
	background: url(../img/diagram/d_chara11.png) no-repeat center center /contain;
}
#d_chara12{
	top: min(calc(1064 / var(--vw-min) * 100vw),1064px);
	left: min(calc(725 / var(--vw-min) * 100vw),725px);
	width: min(calc(159 / var(--vw-min) * 100vw),159px);
	height: min(calc(159 / var(--vw-min) * 100vw),159px);
	background: url(../img/diagram/d_chara12.png) no-repeat center center /contain;
}
#d_chara13{
	top: min(calc(1064 / var(--vw-min) * 100vw),1064px);
	left: min(calc(545 / var(--vw-min) * 100vw),545px);
	width: min(calc(159 / var(--vw-min) * 100vw),159px);
	height: min(calc(159 / var(--vw-min) * 100vw),159px);
	background: url(../img/diagram/d_chara13.png) no-repeat center center /contain;
}
#d_chara14{
	top: min(calc(770 / var(--vw-min) * 100vw),770px);
	left: min(calc(695 / var(--vw-min) * 100vw),695px);
	width: min(calc(159 / var(--vw-min) * 100vw),159px);
	height: min(calc(159 / var(--vw-min) * 100vw),159px);
	background: url(../img/diagram/d_chara14.png) no-repeat center center /contain;
}
#d_chara15{
	top: min(calc(1065 / var(--vw-min) * 100vw),1065px);
	left: min(calc(67 / var(--vw-min) * 100vw),67px);
	width: min(calc(159 / var(--vw-min) * 100vw),159px);
	height: min(calc(159 / var(--vw-min) * 100vw),159px);
	background: url(../img/diagram/d_chara15.png) no-repeat center center /contain;
}
@media screen and (hover: hover) and (pointer: fine) {
	.d_chara:hover {
        transform: scale(1.05);
    }
}


.popBox._diagram{
	position: relative;
}
/*-----------------------------------------------
 * Modal
-------------------------------------------------*/
.charaModalBox{
	-webkit-overflow-scrolling: touch;
	display: none;
	width: 100%;
	height: 100%;
	overflow: auto;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99;
}
.charaOneModal{
	display: none;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
}
@media screen and (max-width:768px){
	.charaModalBox{
	position: fixed;
	}
}
/* oneModalIn */
.charaOneModalIn{
	display: flex;
	justify-content: center;
	align-items: center;
	height: auto;
	width: 100%;
	min-width: 100%;
	min-height: 100%;
	margin: 0 auto;
	position: relative;
}
.oneModalIn__cont{
	padding: 50px 0;
}
@media screen and (max-width:768px){
	.oneModalIn{
		min-width: 100%;
		align-items: unset;
		padding: calc(20 / var(--vw-min) * 100vw)
	}
	.oneModalIn__cont{
		width: 100%;
		padding: 30px 0;
	}
}
.characterModalBlock{
    padding-top: min(calc(20 / var(--vw-min) * 100vw), 20px);
}
/* chara detail */
.characterListIn{
	width: 100%;
	padding: 0 0;
	position: relative;
	display: flex;
}
.character__stand{
	width: min(calc(350 / var(--vw-min) * 100vw), 350px);
	flex-shrink: 0;
}
.character__stand img{
	width: 100%;
}

.character__detailWrap{
	display: flex;
	flex-direction: column;
	padding-bottom: min(calc(40 / var(--vw-min) * 100vw), 40px);
	position: relative;
}
.character__detailInWrap{
	width: 100%;
	min-height: min(calc(670 / var(--vw-min) * 100vw), 670px);
	margin-top: auto;
	position: relative;
}

.character__name{
	line-height: 1;
	color: var(--color-red);
	margin-left: max(calc(-20 / var(--vw-min) * 100vw), -20px);
	text-shadow: 1px 1px 2px var(--color-white), 1px 1px 2px var(--color-white), 1px 1px 2px var(--color-white), 1px 1px 2px var(--color-white), 1px 1px 2px var(--color-white), 1px 1px 2px var(--color-white), 1px 1px 2px var(--color-white), 1px 1px 2px var(--color-white), 1px 1px 2px var(--color-white), 1px 1px 2px var(--color-white), 1px 1px 2px var(--color-white), 1px 1px 2px var(--color-white), 1px 1px 2px var(--color-white), 1px 1px 2px var(--color-white), 1px 1px 2px var(--color-white), 1px 1px 2px var(--color-white), 1px 1px 2px var(--color-white), 1px 1px 2px var(--color-white), 1px 1px 2px var(--color-white), 1px 1px 2px var(--color-white),-1px 1px 2px var(--color-white), -1px 1px 2px var(--color-white), -1px 1px 2px var(--color-white), -1px 1px 2px var(--color-white), -1px 1px 2px var(--color-white), -1px 1px 2px var(--color-white), -1px 1px 2px var(--color-white), -1px 1px 2px var(--color-white), -1px 1px 2px var(--color-white), -1px 1px 2px var(--color-white), -1px 1px 2px var(--color-white), -1px 1px 2px var(--color-white), -1px 1px 2px var(--color-white), -1px 1px 2px var(--color-white), -1px 1px 2px var(--color-white), -1px 1px 2px var(--color-white), -1px 1px 2px var(--color-white), -1px 1px 2px var(--color-white), -1px 1px 2px var(--color-white), -1px 1px 2px var(--color-white),1px -1px 2px var(--color-white), 1px -1px 2px var(--color-white), 1px -1px 2px var(--color-white), 1px -1px 2px var(--color-white), 1px -1px 2px var(--color-white), 1px -1px 2px var(--color-white), 1px -1px 2px var(--color-white), 1px -1px 2px var(--color-white), 1px -1px 2px var(--color-white), 1px -1px 2px var(--color-white), 1px -1px 2px var(--color-white), 1px -1px 2px var(--color-white), 1px -1px 2px var(--color-white), 1px -1px 2px var(--color-white), 1px -1px 2px var(--color-white), 1px -1px 2px var(--color-white), 1px -1px 2px var(--color-white), 1px -1px 2px var(--color-white), 1px -1px 2px var(--color-white), 1px -1px 2px var(--color-white),-1px -1px 2px var(--color-white), -1px -1px 2px var(--color-white), -1px -1px 2px var(--color-white), -1px -1px 2px var(--color-white), -1px -1px 2px var(--color-white), -1px -1px 2px var(--color-white), -1px -1px 2px var(--color-white), -1px -1px 2px var(--color-white), -1px -1px 2px var(--color-white), -1px -1px 2px var(--color-white), -1px -1px 2px var(--color-white), -1px -1px 2px var(--color-white), -1px -1px 2px var(--color-white), -1px -1px 2px var(--color-white), -1px -1px 2px var(--color-white), -1px -1px 2px var(--color-white), -1px -1px 2px var(--color-white), -1px -1px 2px var(--color-white), -1px -1px 2px var(--color-white), -1px -1px 2px var(--color-white);
}
.character__name--name{
	display: block;
	font-size: min(calc(42 / var(--vw-min) * 100vw), 42px);
}
.character__name--cv{
	display: block;
	font-size: min(calc(30 / var(--vw-min) * 100vw), 30px);
	margin-top: min(calc(20 / var(--vw-min) * 100vw), 20px);
}


.character__profile{
	position: relative;
	width: min(calc(260 / var(--vw-min) * 100vw), 260px);
	margin-left: min(calc(208 / var(--vw-min) * 100vw), 208px);
	padding-top: min(calc(64 / var(--vw-min) * 100vw), 64px);
}
.character__profile .popBox{
	display: inline-block;
	position: relative;
	color: var(--color-white);
}
.character__profile .popBoxIn{
	letter-spacing: 0;
}
.character__profile {
    position: relative;
    width: min(calc(260 / var(--vw-min) * 100vw), 260px);
    margin-left: min(calc(150 / var(--vw-min) * 100vw),150px);
    padding-top: min(calc(64 / var(--vw-min) * 100vw), 64px);
    margin-right:min(calc(40 / var(--vw-min) * 100vw),40px);
}

.character__face{
	position: absolute;
	top: min(calc(400 / var(--vw-min) * 100vw), 400px);
	left: max(calc(-110 / var(--vw-min) * 100vw), -110px);
	opacity: 0;
}
.character__face.--is-active{
	opacity: 1;
}
.character__face > .popupModal{
	position: relative;
}

@media screen and (max-width:768px){
	#character{
		padding-top: calc(48 / var(--vw-min) * 100vw);
		padding-bottom: calc(56 / var(--vw-min) * 100vw);
		overflow: hidden;
	}
	#character .comSectionIn{
		display: flex;
		flex-direction: column;
	}
	.characterSwiper {
		width: 100%;
	}
	.characterListIn{
		padding: 0;
	}
	.characterList {
		overflow: hidden;
	}
	.character__stand{
        width: calc(380 / var(--vw-min) * 100vw);
        position: absolute;
        left: calc(-20 / var(--vw-min) * 100vw);
        top:calc(100 / var(--vw-min) * 100vw);
		overflow: hidden;
		margin-left: 0;
	}
	.character__stand img{
        margin-left: calc(-45 / var(--vw-min) * 100vw);
	}
	.character__stand._chara8 img{
        margin-left: calc(-10 / var(--vw-min) * 100vw);
	}
	.character__stand._chara14 img{
        margin-left:0;
	}
	.character__stand._chara12 img	{
        margin-left: calc(-20 / var(--vw-min) * 100vw);;
	}
	.character__detailWrap{
		margin-left: 0;
		width: 100%;
		padding-bottom: 0;
	}
	.character__detailInWrap{
		min-height: calc(1000 / var(--vw-min) * 100vw);
		padding-bottom: calc(260 / var(--vw-min) * 100vw);
	}
	.character__name{
		margin-left: calc(10 / var(--vw-min) * 100vw);
		text-shadow: 0.5px 0.5px 1px var(--color-white), 0.5px 0.5px 1px var(--color-white), 0.5px 0.5px 1px var(--color-white), 0.5px 0.5px 1px var(--color-white), 0.5px 0.5px 1px var(--color-white), 0.5px 0.5px 1px var(--color-white), 0.5px 0.5px 1px var(--color-white), 0.5px 0.5px 1px var(--color-white), 0.5px 0.5px 1px var(--color-white), 0.5px 0.5px 1px var(--color-white), 0.5px 0.5px 1px var(--color-white), 0.5px 0.5px 1px var(--color-white), 0.5px 0.5px 1px var(--color-white), 0.5px 0.5px 1px var(--color-white), 0.5px 0.5px 1px var(--color-white), 0.5px 0.5px 1px var(--color-white), 0.5px 0.5px 1px var(--color-white), 0.5px 0.5px 1px var(--color-white), 0.5px 0.5px 1px var(--color-white), 0.5px 0.5px 1px var(--color-white),-0.5px 0.5px 1px var(--color-white), -0.5px 0.5px 1px var(--color-white), -0.5px 0.5px 1px var(--color-white), -0.5px 0.5px 1px var(--color-white), -0.5px 0.5px 1px var(--color-white), -0.5px 0.5px 1px var(--color-white), -0.5px 0.5px 1px var(--color-white), -0.5px 0.5px 1px var(--color-white), -0.5px 0.5px 1px var(--color-white), -0.5px 0.5px 1px var(--color-white), -0.5px 0.5px 1px var(--color-white), -0.5px 0.5px 1px var(--color-white), -0.5px 0.5px 1px var(--color-white), -0.5px 0.5px 1px var(--color-white), -0.5px 0.5px 1px var(--color-white), -0.5px 0.5px 1px var(--color-white), -0.5px 0.5px 1px var(--color-white), -0.5px 0.5px 1px var(--color-white), -0.5px 0.5px 1px var(--color-white), -0.5px 0.5px 1px var(--color-white),0.5px -0.5px 1px var(--color-white), 0.5px -0.5px 1px var(--color-white), 0.5px -0.5px 1px var(--color-white), 0.5px -0.5px 1px var(--color-white), 0.5px -0.5px 1px var(--color-white), 0.5px -0.5px 1px var(--color-white), 0.5px -0.5px 1px var(--color-white), 0.5px -0.5px 1px var(--color-white), 0.5px -0.5px 1px var(--color-white), 0.5px -0.5px 1px var(--color-white), 0.5px -0.5px 1px var(--color-white), 0.5px -0.5px 1px var(--color-white), 0.5px -0.5px 1px var(--color-white), 0.5px -0.5px 1px var(--color-white), 0.5px -0.5px 1px var(--color-white), 0.5px -0.5px 1px var(--color-white), 0.5px -0.5px 1px var(--color-white), 0.5px -0.5px 1px var(--color-white), 0.5px -0.5px 1px var(--color-white), 0.5px -0.5px 1px var(--color-white),-0.5px -0.5px 1px var(--color-white), -0.5px -0.5px 1px var(--color-white), -0.5px -0.5px 1px var(--color-white), -0.5px -0.5px 1px var(--color-white), -0.5px -0.5px 1px var(--color-white), -0.5px -0.5px 1px var(--color-white), -0.5px -0.5px 1px var(--color-white), -0.5px -0.5px 1px var(--color-white), -0.5px -0.5px 1px var(--color-white), -0.5px -0.5px 1px var(--color-white), -0.5px -0.5px 1px var(--color-white), -0.5px -0.5px 1px var(--color-white), -0.5px -0.5px 1px var(--color-white), -0.5px -0.5px 1px var(--color-white), -0.5px -0.5px 1px var(--color-white), -0.5px -0.5px 1px var(--color-white), -0.5px -0.5px 1px var(--color-white), -0.5px -0.5px 1px var(--color-white), -0.5px -0.5px 1px var(--color-white), -0.5px -0.5px 1px var(--color-white);
	}
	.character__name--name{
		font-size: calc(45 / var(--vw-min) * 100vw);
	}
	.character__name--cv{
		font-size: calc(30 / var(--vw-min) * 100vw);
		margin-top: calc(16 / var(--vw-min) * 100vw);
	}
	.character__profile{
		width: calc(340 / var(--vw-min) * 100vw);
		margin-left: auto;
		margin-right: 0;
		padding-top: calc(56 / var(--vw-min) * 100vw);
	}
	.character__profile .popBoxIn{
		padding-right: calc(36 / var(--vw-min) * 100vw);
	}

	.character__face{
		top: unset;
		bottom: calc(30 / var(--vw-min) * 100vw);
        left: calc(220 / var(--vw-min) * 100vw);
	}
}
@media screen and (max-width:768px){
	.characterModalCont{
		width: 90%;
	}
}
.popupModalCont.-img {
    width: min(calc(250 / var(--vw-min) * 100vw), 250px);
    height: min(calc(250 / var(--vw-min) * 100vw), 250px);
}