@charset "utf-8";
/*-----------------------------------------------
 * CHARACTER
-------------------------------------------------*/
.character {
    overflow: hidden;
}
.cont-tit-en  {
    width: min(calc(679 / var(--vw-min) * 100vw),679px);
    height: min(calc(83 / var(--vw-min) * 100vw),83px);
}
@media screen and (max-width:768px){
    .cont-tit-en {
        width: calc(615 / var(--vw-min) * 100vw);
        height: calc(75 / var(--vw-min) * 100vw);
    }
}
.cont-tit-enIn {
    -webkit-mask: url(../img/common/tit/tit_character-en.svg)no-repeat center/contain;
    mask: url(../img/common/tit/tit_character-en.svg)no-repeat center/contain;
}
.cont-tit-ja {
    width: min(calc(193 / var(--vw-min) * 100vw),193px);
    height: min(calc(48 / var(--vw-min) * 100vw),48px);
    -webkit-mask: url(../img/common/tit/tit_character-ja.svg)no-repeat center/contain;
    mask: url(../img/common/tit/tit_character-ja.svg)no-repeat center/contain;
    margin-top: max(calc(-16 / var(--vw-min) * 100vw),-16px);
    margin-left: min(calc(80 / var(--vw-min) * 100vw),80px);
}
@media screen and (max-width:768px){
    .cont-tit-ja {
        width: calc(194 / var(--vw-min) * 100vw);
        height: calc(48 / var(--vw-min) * 100vw);
        margin-top: calc(-26 / var(--vw-min) * 100vw);
        margin-left: calc(48 / var(--vw-min) * 100vw);
    }
}
.cont-tit-deco {
    left: min(calc(266 / var(--vw-min) * 100vw),266px);
    bottom: 0;
}
@media screen and (max-width:768px){
    .subSec .cont-tit-deco {
        left: calc(234 / var(--vw-min) * 100vw);
    }
}
.charaCont {
    width: min(100vw,min(calc(1200 / var(--vw-min) * 100vw),1200px));
    display: flex;
    flex-direction: row-reverse;
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .charaCont {
        width: 100%;
        flex-direction: column;
    }
}
.charaSwiper {
    width: min(calc(1040 / var(--vw-min) * 100vw),1040px);
    margin-right: unset;
    overflow: visible;
}
@media screen and (max-width:768px){
    .charaSwiper {
        width: 100%;
    }
}
.chara__item {
    display: flex;
    flex-direction: row-reverse;
}
@media screen and (max-width:768px){
    .chara__item {
        flex-direction: column;
    }
}
/** img **/
.chara__imgArea {
    width: calc(100% - min(calc(480 / var(--vw-min) * 100vw),480px));
    display: flex;
    flex-direction: row-reverse;
}
@media screen and (max-width:768px){
    .chara__imgArea {
        width: 100%;
    }
}
.chara__imgWrap {
    width: min(calc(385 / var(--vw-min) * 100vw),385px);
    position: relative;
    margin-top: max(calc(-130 / var(--vw-min) * 100vw),-130px);
    padding-top: 125%;/*700*/
    pointer-events: none;
}
@media screen and (max-width:768px){
    .chara__imgWrap {
        width: calc(560 / var(--vw-min) * 100vw);
        margin-top: 0;
        padding-top: 135.7333%;/*1018*/
    }
}
.chara__img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
@media screen and (max-width:768px){
    .chara__img {
        left: calc(50 / var(--vw-min) * 100vw);
    }
}
.chara__img img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    margin: auto;
    object-fit: cover;
    pointer-events: none;
}
/** name **/
.chara__nameWrap {
    line-height: 1;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-feature-settings: initial;
    margin-left: auto;
    padding: min(calc(25 / var(--vw-min) * 100vw),25px) min(calc(40 / var(--vw-min) * 100vw),40px) 0 0;
}
@media screen and (max-width:768px){
    .chara__nameWrap {
        margin: unset;
        padding: 0 calc(38 / var(--vw-min) * 100vw) 0 0;
    }
}
.chara__ruby {
    font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
    font-weight: 700;
}
@media screen and (max-width:768px){
    .chara__ruby {
        font-size: calc(20 / var(--vw-min) * 100vw);
    }
}
.chara__name {
    font-size: min(calc(48 / var(--vw-min) * 100vw),48px);
    font-weight: 900;
    margin-right: min(calc(18 / var(--vw-min) * 100vw),18px);
}
@media screen and (max-width:768px){
    .chara__name {
        font-size: calc(48 / var(--vw-min) * 100vw);
    }
}
.chara__cvWrap {
    font-weight: 700;
    display: flex;
    align-items: center;
    margin: min(calc(25 / var(--vw-min) * 100vw),25px) min(calc(14 / var(--vw-min) * 100vw),14px) 0 0;
}
@media screen and (max-width:768px){
    .chara__cvWrap {
        margin: calc(22 / var(--vw-min) * 100vw) calc(15 / var(--vw-min) * 100vw) 0 0;
    }
}
.chara__cv {
    font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
    color: var(--color-redD12);
    margin-bottom: min(calc(8 / var(--vw-min) * 100vw),8px);
}
@media screen and (max-width:768px){
    .chara__cv {
        font-size: calc(24 / var(--vw-min) * 100vw);
        margin-bottom: calc(12 / var(--vw-min) * 100vw);
    }
}
.chara__cvName {
    font-size: min(calc(20 / var(--vw-min) * 100vw),20px);
}
@media screen and (max-width:768px){
    .chara__cvName {
        font-size: calc(28 / var(--vw-min) * 100vw);
    }
}
.chara__birthday {
    font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
    font-weight: 700;
    margin-bottom: min(calc(16 / var(--vw-min) * 100vw),16px);
}
@media screen and (max-width:768px){
    .chara__birthday {
        font-size: calc(24 / var(--vw-min) * 100vw);
        margin-bottom: calc(20 / var(--vw-min) * 100vw);
    }
}
/**
* detail
**/
.chara__detailArea {
    width: min(calc(480 / var(--vw-min) * 100vw),480px);
    padding: min(calc(80 / var(--vw-min) * 100vw),80px) 0 0 min(calc(80 / var(--vw-min) * 100vw),80px);
}
@media screen and (max-width:768px){
    .chara__detailArea {
        width: 100%;
        padding: calc(60 / var(--vw-min) * 100vw) calc(48 / var(--vw-min) * 100vw) 0;
    }
}
.chara__txt {
    font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
    line-height: 2;
}
@media screen and (max-width:768px){
    .chara__txt {
        font-size: calc(24 / var(--vw-min) * 100vw);
    }
}
.chara__faceLists {
    width: min(calc(400 / var(--vw-min) * 100vw),400px);
    display: flex;
    justify-content: space-between;
    margin-top: min(calc(32 / var(--vw-min) * 100vw),32px);
}
@media screen and (max-width:768px){
    .chara__faceLists {
        width: calc(480 / var(--vw-min) * 100vw);
        margin: calc(50 / var(--vw-min) * 100vw) auto 0;
    }
}
.chara__faceItem {
    width: min(calc(180 / var(--vw-min) * 100vw),180px);
    height: min(calc(180 / var(--vw-min) * 100vw),180px);
    background-color: var(--color-grayCCC);
    border-radius: 50%;
    overflow: hidden;
}
@media screen and (max-width:768px){
    .chara__faceItem {
        width: calc(217 / var(--vw-min) * 100vw);
        height: calc(217 / var(--vw-min) * 100vw);
    }
}
.chara__faceItem img {
    width: 100%;
    pointer-events: none;
}
/**
* thumb
**/
.swiper-pagination-bullets.swiper-pagination-horizontal.chara__thumbLists {
    width: min(calc(80 / var(--vw-min) * 100vw),80px);
    position: relative;
    bottom: unset;
    left: unset;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: min(calc(8 / var(--vw-min) * 100vw), 8px);
    margin-right: min(calc(80 / var(--vw-min) * 100vw),80px);
}
@media screen and (max-width:768px){
    .swiper-pagination-bullets.swiper-pagination-horizontal.chara__thumbLists {
        width: 100%;
        flex-direction: row;
        gap: calc(24 / var(--vw-min) * 100vw);
        margin: calc(96 / var(--vw-min) * 100vw) 0 calc(30 / var(--vw-min) * 100vw) 0;
        padding: 0 calc(48 / var(--vw-min) * 100vw);
    }
}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.chara__thumbItem {
    width: min(calc(80 / var(--vw-min) * 100vw),80px);
    height: min(calc(80 / var(--vw-min) * 100vw),80px);
    display: block !important;
    position: relative;
    margin: 0;
    background-color: var(--color-grayCCC);
    border-radius: 50%;
    opacity: 1;
    transition: .4s var(--cubic-bezier01);
    overflow: hidden;
}
@media screen and (max-width:768px){
    .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.chara__thumbItem {
        width: calc(96 / var(--vw-min) * 100vw);
        height: calc(96 / var(--vw-min) * 100vw);
    }
}
.chara__thumbItem::before {
    content: "";
    width: min(calc(72 / var(--vw-min) * 100vw),72px);
    height: min(calc(72 / var(--vw-min) * 100vw),72px);
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
    border: min(calc(1 / var(--vw-min) * 100vw),1px) solid #fff;
    border-radius: 50%;
}
@media screen and (max-width:768px){
    .chara__thumbItem::before {
        width: calc(88 / var(--vw-min) * 100vw);
        height: calc(88 / var(--vw-min) * 100vw);
        border-width: calc(2 / var(--vw-min) * 100vw);
    }
}
.chara__thumbItem img {
    width: 100%;
    pointer-events: none;
}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.chara__thumbItem.swiper-pagination-bullet-active {
    background-color: var(--color-redD12);
}
@media (hover: hover) and (pointer: fine){
    .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.chara__thumbItem:hover {
        background-color: var(--color-redD12);
    }
}
/**
* bg
**/
.charaBg {
    width: min(100vw,min(calc(1200 / var(--vw-min) * 100vw),1200px));
    position: absolute;
    top: min(calc(80 / var(--vw-min) * 100vw),80px);
    right: 0;
    left: 0;
    z-index: -1;
    margin: auto;
}
@media screen and (max-width:768px){
    .charaBg {
        width: 100%;
        top: calc(96 / var(--vw-min) * 100vw);
    }
}
.charaBg img {
    width: 100%;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to top, transparent, black 15%),linear-gradient(to bottom, transparent, black 15%),linear-gradient(to left, transparent, black 15%),linear-gradient(to right, transparent, black 15%);
    mask-image: linear-gradient(to top, transparent, black 15%),linear-gradient(to bottom, transparent, black 15%),linear-gradient(to left, transparent, black 15%),linear-gradient(to right, transparent, black 15%);
    -webkit-mask-composite: intersect;
    mask-composite: intersect;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
/**
* active
**/
.chara__imgWrap {
    opacity: 0;
    transition: all 0.8s var(--cubic-bezier02);
    transform: scale(1.05);
}
.swiper-slide-active .chara__imgWrap {
    opacity: 1;
    transform: scale(1);
}
.chara__nameWrap {
    opacity: 0;
    transition: all 0.5s var(--cubic-bezier02) 0.2s;
    transform: translateY(10px);
}
.swiper-slide-active .chara__nameWrap {
    opacity: 1;
    transform: translateY(0);
}
.chara__birthday,
.chara__txt {
    opacity: 0;
    transition: opacity 0.5s var(--cubic-bezier02) 0.4s;
}
.swiper-slide-active .chara__birthday,
.swiper-slide-active .chara__txt {
    opacity: 1;
}
.chara__faceItem {
    opacity: 0;
    transition: all 0.4s var(--cubic-bezier02);
    transform: translateY(10px);
}
.swiper-slide-active .chara__faceItem:nth-child(1) {
    opacity: 1;
    transition-delay: 0.5s;
    transform: translateY(0);
}
.swiper-slide-active .chara__faceItem:nth-child(2) {
    opacity: 1;
    transition-delay: 0.6s;
    transform: translateY(0);
}