@charset "utf-8";
/*-----------------------------------------------
 * CHARACTER
-------------------------------------------------*/
.--red {
    color: var(--color-redE60);
}
.character {
    padding-bottom: min(calc(50 / var(--vw-min) * 100vw),50px);
}
@media screen and (max-width:768px){
    .character {
        padding-bottom: 0;
    }
}
.subSec-tit-en span:nth-child(2) {
    color: var(--color-redE60);
}
/**
* nav
**/
.chara__navLists {
    width: min(calc(1000 / var(--vw-min) * 100vw),1000px);
    display: flex;
    flex-wrap: wrap;
    gap: min(calc(6 / var(--vw-min) * 100vw),6px);
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .chara__navLists {
        width: 100%;
        padding: 0 calc(24 / var(--vw-min) * 100vw);
        justify-content: center;
        gap: calc(6 / var(--vw-min) * 100vw);
    }
}
.chara__navLink {
    font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
    color: #fff;
    line-height: 1;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: min(calc(100 / var(--vw-min) * 100vw),100px);
    border: min(calc(1 / var(--vw-min) * 100vw),1px) solid #000;
    padding: min(calc(14 / var(--vw-min) * 100vw),14px) min(calc(45 / var(--vw-min) * 100vw),45px);
    background-color: var(--color-black00);
    text-decoration: none;
	transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
    overflow: hidden;
}
@media screen and (max-width:768px){
    .chara__navLink {
        font-size: calc(14 / var(--vw-min) * 100vw);
        border-radius: calc(100 / var(--vw-min) * 100vw);
        border-width: calc(1 / var(--vw-min) * 100vw);
        padding: calc(10 / var(--vw-min) * 100vw) calc(24 / var(--vw-min) * 100vw);
    }
}
.chara__navLink span:not(.chara__navArrow) {
	position: relative;
	z-index: 1;
}
.chara__navLink::before {
	content: "";
	width: 100%;
	height: 350%;
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 1;
	margin: auto;
	background-color: #fff;
	transform: skewY(-10deg) scale(1, 0);
	transform-origin: left top;
	transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
}
.chara__navTxt {
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
}
.chara__navSchool {
    font-size: min(calc(11 / var(--vw-min) * 100vw),11px);
    display: inline-block;
    margin-bottom: min(calc(5 / var(--vw-min) * 100vw),5px);
}
@media screen and (max-width:768px){
    .chara__navSchool {
        font-size: calc(9 / var(--vw-min) * 100vw);
        margin-bottom: calc(4 / var(--vw-min) * 100vw);
    }
}
.chara__navArrow {
    width: min(calc(12 / var(--vw-min) * 100vw),12px);
    height: min(calc(7 / var(--vw-min) * 100vw),7px);
    display: inline-block;
    position: absolute;
    top: 0;
    right: min(calc(18 / var(--vw-min) * 100vw),18px);
    bottom: 0;
    z-index: 1;
    margin: auto;
    -webkit-mask: url(../img/common/deco/deco_arrow2.svg)no-repeat center/contain;
    mask: url(../img/common/deco/deco_arrow2.svg)no-repeat center/contain;
    background-color: #fff;
	transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
}
@media screen and (max-width:768px){
    .chara__navArrow {
        width: calc(8 / var(--vw-min) * 100vw);
        height: calc(5 / var(--vw-min) * 100vw);
        right: calc(8 / var(--vw-min) * 100vw);
    }
}
@media (hover: hover) and (pointer: fine){
	.chara__navLink:hover::before {
		transform: skewY(-10deg) scale(1, 1);
	}
	.chara__navLink:hover {
		color: var(--color-black00);
	}
	.chara__navLink:hover .chara__navArrow {
		background-color: var(--color-black00);
		transform: translateY(2px);
	}
}
.charaCont {
    position: relative;
    margin-top: min(calc(72 / var(--vw-min) * 100vw),72px);
}
@media screen and (max-width:768px){
    .charaCont {
        margin-top: calc(32 / var(--vw-min) * 100vw);
    }
}
.charaCont__tit {
    width: 100%;
    padding: min(calc(20 / var(--vw-min) * 100vw),20px) 0;
    background-color: #000;
}
@media screen and (max-width:768px){
    .charaCont__tit {
        padding: calc(10 / var(--vw-min) * 100vw) 0;
    }
}
.charaCont__titIn {
    font-size: min(calc(28 / var(--vw-min) * 100vw),28px);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    width: min(calc(1000 / var(--vw-min) * 100vw),1000px);
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .charaCont__titIn {
        font-size: calc(18 / var(--vw-min) * 100vw);
        width: 100%;
        padding: 0 calc(24 / var(--vw-min) * 100vw);
    } 
}
.charaCont__school {
    margin-right: min(calc(12 / var(--vw-min) * 100vw),12px);
}
@media screen and (max-width:768px){
    .charaCont__school {
        margin-right: calc(8 / var(--vw-min) * 100vw);
    }
}
.chara__thumbWrap {
    position: relative;
    padding: min(calc(64 / var(--vw-min) * 100vw),64px) 0 min(calc(120 / var(--vw-min) * 100vw),120px);
}
@media screen and (max-width:768px){
    .chara__thumbWrap {
        padding: calc(32 / var(--vw-min) * 100vw) 0 calc(56 / var(--vw-min) * 100vw);
    }
}
.chara__cateImg {
    width: 100%;
    height: min(calc(240 / var(--vw-min) * 100vw),240px);
    position: absolute;
    top: min(calc(16 / var(--vw-min) * 100vw),16px);
    right: 0;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}
@media screen and (max-width:768px){
    .chara__cateImg {
        height: calc(120 / var(--vw-min) * 100vw);
        top: calc(8 / var(--vw-min) * 100vw);
    }
}
.chara__cateImg img {
    height: 100%;
    pointer-events: none;
}
/**
* lists
**/
.chara__thumbLists {
    width: min(calc(1000 / var(--vw-min) * 100vw),1000px);
    display: grid;
    grid-template-columns: repeat(4,1fr);
    column-gap: min(calc(24 / var(--vw-min) * 100vw),24px);
    row-gap: min(calc(48 / var(--vw-min) * 100vw),48px);
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .chara__thumbLists {
        width: 100%;
        grid-template-columns: repeat(3,1fr);
        column-gap: calc(12 / var(--vw-min) * 100vw);
        row-gap: calc(18 / var(--vw-min) * 100vw);
        padding: 0 calc(24 / var(--vw-min) * 100vw);
    }
}
.chara__thumbLink {
    color: #fff;
    width: 100%;
    height: 100%;
    display: block;
    text-decoration: none;
}
.chara__thumbImg {
    width: 100%;
    padding-top: 134.4828%;
    position: relative;
    pointer-events: none;
    overflow: hidden;
}
.chara__thumbImg::before {
    content: "";
    width: 100%;
    padding-top: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    background-color: var(--color-yellowFFE);
    clip-path: polygon(0% 0%,100% 34.48%,100% 100%,0% 100%);
    transition: .3s ease; 
}
.chara__thumbImg img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    object-fit: cover;
    pointer-events: none;
    transition: .3s ease;
}
@media (hover: hover) and (pointer: fine){
    .chara__thumbLink:hover .chara__thumbImg img {
        transform: scale(1.1);
    }
    .chara__thumbLink:hover .chara__thumbImg::before {
        background-color: var(--color-redE60);
    }
}
.chara__nameWrap {
    margin-top: min(calc(10 / var(--vw-min) * 100vw),10px);
}
@media screen and (max-width:768px){
    .chara__nameWrap {
        margin-top: calc(8 / var(--vw-min) * 100vw)
    }
}
.chara__position {
    font-size: min(calc(14 / var(--vw-min) * 100vw),14px);
    text-align: center;
    line-height: 1;
    display: block;
    margin-bottom: min(calc(12 / var(--vw-min) * 100vw),12px);
}
@media screen and (max-width:768px){
    .chara__position {
        font-size: calc(11 / var(--vw-min) * 100vw);
        margin-bottom: calc(10 / var(--vw-min) * 100vw);
    }
}
.chara__name {
    font-size: min(calc(18 / var(--vw-min) * 100vw),18px);
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
    display: block;
}
.chara__name small {
    font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
}
@media screen and (max-width:768px){
    .chara__name {
        font-size: calc(13 / var(--vw-min) * 100vw);
    }
    .chara__name small {
        font-size: calc(10 / var(--vw-min) * 100vw);
    }
}
/*-----------------------------------------------
 * DETAIL
-------------------------------------------------*/
.oneModalIn {
    overflow: hidden;
}
.charaDetailWrap {
    min-width: min(100vw,1366px);
    width: 100%;
    position: relative;
    overflow: hidden;
    background: url(../img/common/bg/bg_blackboard.jpg)no-repeat center/cover;
}
@media screen and (max-width:768px){
    .charaDetailWrap {
        min-width: 100%;
        background: unset;
    }
    body[data-page="character"] .modalBox {
        background: url(../img/common/bg/bg_blackboard.jpg)no-repeat center/cover;
    }
    body[data-page="character"] .oneModalIn__cont {
        padding: 0;
    }
}
.charaDetail {
    width: min(calc(1000 / var(--vw-min) * 100vw),1000px);
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .charaDetail {
        width: 100%;
        flex-direction: column;
    }
}
.chara__img {
    width: min(calc(500 / var(--vw-min) * 100vw),500px);
    padding-top: 72.8%;/*728*/
    position: relative;
    pointer-events: none;
}
@media screen and (max-width:768px){
    .chara__img {
        width: 100%;
        padding-top: 145.6%;/*546*/
        margin-top: calc(56 / var(--vw-min) * 100vw);
    }
}
.chara__img img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    object-fit: cover;
    pointer-events: none;
}
.chara__txtWrap {
    color: #fff;
    width: min(calc(500 / var(--vw-min) * 100vw),500px);
    border-top: min(calc(1 / var(--vw-min) * 100vw),1px) solid #fff;
    border-bottom: min(calc(1 / var(--vw-min) * 100vw),1px) solid #fff;
}
@media screen and (max-width:768px){
    .chara__txtWrap {
        width: 100%;
        position: relative;
        border-width: calc(2 / var(--vw-min) * 100vw);
        border-bottom: unset;
    }
}
.chara__detailName {
    font-size: min(calc(56 / var(--vw-min) * 100vw),56px);
    font-weight: 700;
    line-height: 1.1786;
    padding: calc(22 / var(--vw-min) * 100vw) 0;
    border-bottom: min(calc(1 / var(--vw-min) * 100vw),1px) solid rgba(255, 255, 255, .5);
}
@media screen and (max-width:768px){
    .chara__detailName {
        font-size: calc(32 / var(--vw-min) * 100vw);
        padding: calc(18 / var(--vw-min) * 100vw) calc(24 / var(--vw-min) * 100vw);
        border-width: calc(2 / var(--vw-min) * 100vw);
    }
}
.chara__cvWrap {
    display: flex;
    align-items: center;
    padding: min(calc(26 / var(--vw-min) * 100vw),26px) 0;
    border-bottom: min(calc(1 / var(--vw-min) * 100vw),1px) solid rgba(255, 255, 255, .5);
}
@media screen and (max-width:768px){
    .chara__cvWrap {
        padding: calc(16 / var(--vw-min) * 100vw) calc(24 / var(--vw-min) * 100vw);
        border-width: calc(2 / var(--vw-min) * 100vw);
    }
}
.chara__cv {
    width: min(calc(42 / var(--vw-min) * 100vw),42px);
    height: min(calc(24 / var(--vw-min) * 100vw),24px);
    display: inline-block;
    background: url(../img/common/deco/deco_cv.svg)no-repeat center/contain;
    margin-right: min(calc(15 / var(--vw-min) * 100vw),15px);
}
@media screen and (max-width:768px){
    .chara__cv {
        width: calc(35 / var(--vw-min) * 100vw);
        height: calc(20 / var(--vw-min) * 100vw);
        margin-right: calc(14 / var(--vw-min) * 100vw);
    }
}
.chara__cvName {
    font-size: min(calc(26 / var(--vw-min) * 100vw),26px);
    font-weight: 700;
    width: calc(100% - min(calc(57 / var(--vw-min) * 100vw),57px));
}
@media screen and (max-width:768px){
    .chara__cvName {
        width: calc(100% - calc(49 / var(--vw-min) * 100vw));
        font-size: calc(21 / var(--vw-min) * 100vw);
    }
}
.chara__detailTxt {
    font-size: min(calc(17 / var(--vw-min) * 100vw),17px);
    line-height: 2.0588;
    padding: min(calc(32 / var(--vw-min) * 100vw),32px) 0;
}
@media screen and (max-width:768px){
    .chara__detailTxt {
        font-size: calc(13 / var(--vw-min) * 100vw);
        padding: calc(18 / var(--vw-min) * 100vw) calc(24 / var(--vw-min) * 100vw) calc(80 / var(--vw-min) * 100vw);
    }
}
.chara__decoPosi {
    width: min(calc(440 / var(--vw-min) * 100vw),440px);
    height: min(calc(240 / var(--vw-min) * 100vw),240px);
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    background-color: var(--color-yellowFFE);
    clip-path: polygon(100% 0, 0% 100%, 0 0);
}
@media screen and (max-width:768px){
    .chara__decoPosi {
        width: calc(294 / var(--vw-min) * 100vw);
        height: calc(160 / var(--vw-min) * 100vw);
    }
}
.chara__decoPosiTxt {
    font-size: min(calc(120 / var(--vw-min) * 100vw),120px);
    color: rgba(255, 255, 255, .7);
    font-weight: 600;
    line-height: 0.75;
    position: absolute;
    top: min(calc(30 / var(--vw-min) * 100vw),30px);
    left: max(calc(-12 / var(--vw-min) * 100vw),-12px);
    z-index: 1;
}
@media screen and (max-width:768px){
    .chara__decoPosiTxt {
        font-size: calc(96 / var(--vw-min) * 100vw);
        top: calc(15 / var(--vw-min) * 100vw);
        left: calc(-8 / var(--vw-min) * 100vw);
    }
}
.chara__name-en {
    font-size: min(calc(160 / var(--vw-min) * 100vw),160px);
    color: rgba(255, 221, 0, .7);
    font-weight: 600;
    line-height: 0.8;
    position: absolute;
    bottom: min(calc(20 / var(--vw-min) * 100vw),20px);
    left: min(calc(-12 / var(--vw-min) * 100vw),-12px);
}
@media screen and (max-width:768px){
    .chara__name-en {
        font-size: calc(100 / var(--vw-min) * 100vw);
        top: calc(448 / var(--vw-min) * 100vw);
        left: calc(-12 / var(--vw-min) * 100vw);
    }
}
.chara__arrowWrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}
@media screen and (max-width:768px){
    .chara__arrowWrap {
        height: calc(602 / var(--vw-min) * 100vw);
        bottom: unset;
    }
}
.chara__arrow {
    width: min(calc(33 / var(--vw-min) * 100vw),33px);
    height: min(calc(49 / var(--vw-min) * 100vw),49px);
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 5;
    margin: auto;
    -webkit-mask: url(../img/common/deco/deco_arrow3.svg)no-repeat center/contain;
    mask: url(../img/common/deco/deco_arrow3.svg)no-repeat center/contain;
    background-color: #fff;
    cursor: pointer;
    transition: .3s ease;
}
@media screen and (max-width:768px){
    .chara__arrow  {
        width: calc(20 / var(--vw-min) * 100vw);
        height: calc(30 / var(--vw-min) * 100vw);
    }
}
.chara__arrow.--next {
    right: min(calc(72 / var(--vw-min) * 100vw),72px);
}
@media screen and (max-width:768px){
    .chara__arrow.--next {
        right: calc(12 / var(--vw-min) * 100vw);
    }
}
.chara__arrow.--prev {
    left: min(calc(72 / var(--vw-min) * 100vw),72px);
    transform: scale(-1,1);
}
@media screen and (max-width:768px){
    .chara__arrow.--prev {
        left: calc(12 / var(--vw-min) * 100vw);
    }
}
@media (hover: hover) and (pointer: fine){
    .chara__arrow.--next:hover {
        transform: translateX(5px);
    }
    .chara__arrow.--prev:hover {
        transform: translateX(-5px) scale(-1,1);
    }
}
.chara__img {
    opacity: 0;
    transform: translateX(50%);
    transition: .4s cubic-bezier(0.45, 0, 0.55, 1);
}
.chara__txtWrap {
    opacity: 0;
    transform: translateY(50%);
    transition: .4s cubic-bezier(0.45, 0, 0.55, 1);
}
.chara__name-en {
    opacity: 0;
    transform: translateX(-50%);
    transition: .4s cubic-bezier(0.45, 0, 0.55, 1);
}
.chara__decoPosi span {
    opacity: 0;
    transition: .4s cubic-bezier(0.45, 0, 0.55, 1);
}
.charaDetailWrap.is-active .chara__img,
.charaDetailWrap.is-active .chara__txtWrap,
.charaDetailWrap.is-active .chara__name-en {
    opacity: 1;
    transform: translate(0);
}
.charaDetailWrap.is-active .chara__decoPosi span {
    opacity: 1;
}