@charset "utf-8";
/*-----------------------------------------------
 * ONAIR / STREAMING
-------------------------------------------------*/
.subSecWrap {
    width: 100%;
}
.subSec .cont-titWrap {
    margin-bottom: min(calc(48 / var(--vw-min) * 100vw),48px);
}
@media screen and (max-width:768px){
    .subSecWrap {
        padding: 0;
    }
    .subSec .cont-titWrap {
        padding: 0 calc(12 / var(--vw-min) * 100vw);
        margin-bottom: calc(33 / var(--vw-min) * 100vw);
    }
}
/**
* thumb
**/
.chara__thumbLists {
    width: min(calc(1000 / var(--vw-min) * 100vw),1000px);
    display: flex;
    justify-content: center;
    gap: min(calc(10 / var(--vw-min) * 100vw),10px);
    margin: 0 auto min(calc(50 / var(--vw-min) * 100vw),50px);
}
@media screen and (max-width:768px){
    .chara__thumbLists {
        width: calc(328 / var(--vw-min) * 100vw);
        gap: calc(7 / var(--vw-min) * 100vw);
        margin-bottom: calc(40 / var(--vw-min) * 100vw);
    }
}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.chara__thumbItem {
    width: min(calc(100 / var(--vw-min) * 100vw),100px);
    height: min(calc(100 / var(--vw-min) * 100vw),100px);  
    border-radius: 50%;  
    position: relative;
    cursor: pointer;
    background-color: #fff;
    opacity: 1;
    margin: 0;
    transition: .3s var(--cubic-bezier02);
}
@media screen and (max-width:768px){
    .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.chara__thumbItem {
        width: calc(60 / var(--vw-min) * 100vw);
        height: calc(60 / var(--vw-min) * 100vw);
    }
}
.chara__thumbItem::before {
    content: "";
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: auto;
    -webkit-mask: url(../img/common/deco/deco_charaThumbBg.svg)no-repeat center/contain;
    mask: url(../img/common/deco/deco_charaThumbBg.svg)no-repeat center/contain;
    background-color: var(--color-blue2A1);
}
.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-green518);
}
@media (hover: hover) and (pointer: fine){
    .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.chara__thumbItem:hover {
        background-color: var(--color-green518);
    }
}
.charaSwiperWrap {
    width: 100%;
    position: relative;
    padding: min(calc(110 / var(--vw-min) * 100vw),110px) 0;
    overflow: hidden;
}
@media screen and (max-width:768px){
    .charaSwiperWrap {
        padding: calc(74 / var(--vw-min) * 100vw) 0;
    }
}
.charaSwiper {
    overflow: visible;
}
.chara__itemIn {
    width: min(calc(1124 / var(--vw-min) * 100vw),1124px);
    min-height: min(calc(1000 / var(--vw-min) * 100vw),1000px);
    position: relative;
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .chara__itemIn {
        width: 100%;
        min-height: unset;
    }
}
.chara__name-en {
    font-size: min(calc(70 / var(--vw-min) * 100vw),70px);
    color: var(--color-green1E7);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    position: absolute;
    top: 0;
    right: max(calc(-60 / var(--vw-min) * 100vw),-60px);
}
@media screen and (max-width:768px){
    .chara__name-en {
        font-size: calc(40 / var(--vw-min) * 100vw);
        top: calc(250 / var(--vw-min) * 100vw);
        right: calc(10 / var(--vw-min) * 100vw);
    }
}
.chara__nameWrap {
    padding: min(calc(70 / var(--vw-min) * 100vw),70px) 0 min(calc(34 / var(--vw-min) * 100vw),34px);
    border-bottom: min(calc(1 / var(--vw-min) * 100vw),1px) solid var(--color-op20-blue002);
}
@media screen and (max-width:768px){
    .chara__nameWrap {
        padding: 0 calc(36 / var(--vw-min) * 100vw) calc(27 / var(--vw-min) * 100vw);
        border-width: calc(1 / var(--vw-min) * 100vw);
    }
}
.chara__name {
    font-size: min(calc(70 / var(--vw-min) * 100vw),70px); 
    color: var(--color-blue002);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0em;
    width: min(calc(565 / var(--vw-min) * 100vw),565px);
}
@media screen and (max-width:768px){
    .chara__name {
        font-size: calc(40 / var(--vw-min) * 100vw);
        width: 100%;
    }
}
.chara__cvWrap {
    font-size: min(calc(30 / var(--vw-min) * 100vw),30px);
    color: var(--color-green1E7);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
    width: min(calc(565 / var(--vw-min) * 100vw),565px);
    display: flex;
    justify-content: flex-start;
}
@media screen and (max-width:768px){
    .chara__cvWrap {
        font-size: calc(24 / var(--vw-min) * 100vw);
        width: 100%;
        justify-content: center;
        margin-top: calc(10 / var(--vw-min) * 100vw);
    }
}
.chara__txt {
    font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
    color: var(--color-blue002);
    font-weight: 700;
    line-height: 2;
    letter-spacing: 0em;
    width: min(calc(565 / var(--vw-min) * 100vw),565px);
    padding-top: min(calc(30 / var(--vw-min) * 100vw),30px);
}
@media screen and (max-width:768px){
    .chara__txt {
        font-size: calc(16 / var(--vw-min) * 100vw);
        width: 100%;
        padding: 0 calc(36 / var(--vw-min) * 100vw);
    }
}
.chara__imgWrap {
    width: min(calc(600 / var(--vw-min) * 100vw),600px);
    padding-top: 88.968%;/*1000*/
    position: absolute;
    top: max(calc(-80 / var(--vw-min) * 100vw),-80px);
    right: min(calc(90 / var(--vw-min) * 100vw),90px);
}
@media screen and (max-width:768px){
    .chara__imgWrap {
        width: calc(350 / var(--vw-min) * 100vw);
        padding-top: 155.4667%;
        position: relative;
        top: unset;
        right: unset;
        margin: 0 auto;
    }
}
.chara__img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}
@media screen and (max-width:768px){
    .chara__img {
        top: calc(-40 / var(--vw-min) * 100vw);
        left: calc(-21 / var(--vw-min) * 100vw);
    }
}
.chara__img img {
    width: 100%;
    pointer-events: none;
}
.chara__arrowWrap {
    width: min(calc(1120 / var(--vw-min) * 100vw),1120px);
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .chara__arrowWrap {
        width: calc(300 / var(--vw-min) * 100vw);
        margin-top: calc(40 / var(--vw-min) * 100vw);
    }
}
.subSec__frameIn {
    position: absolute;
    height: 100%;
}
.subSec__frame.--top,
.subSec__frame.--bottom {
    height: min(calc(40 / var(--vw-min) * 100vw),40px);
}
.subSec__frame.--left,
.subSec__frame.--right {
    width: min(calc(40 / var(--vw-min) * 100vw),40px);
}
.subSec__frame.--top::before {
    -webkit-mask-size: min(calc(555 / var(--vw-min) * 100vw),555px) min(calc(22 / var(--vw-min) * 100vw),22px);
    mask-size: min(calc(555 / var(--vw-min) * 100vw),555px) min(calc(22 / var(--vw-min) * 100vw),22px);
    animation: storyMovie-txtSlider-megami 10s linear infinite;
}
@keyframes storyMovie-txtSlider-megami {
    0%{
        -webkit-mask-position: 0 center;
        mask-position: 0 center;
    }
    100%{
        -webkit-mask-position:min(calc(555 / var(--vw-min) * 100vw),555px) center;
        mask-position:min(calc(555 / var(--vw-min) * 100vw),555px) center;
    }
}
@media screen and (max-width:768px){
    .subSec__frame.--top::before {
        -webkit-mask-size: calc(404 / var(--vw-min) * 100vw) calc(16 / var(--vw-min) * 100vw);
        mask-size: calc(404 / var(--vw-min) * 100vw) calc(16 / var(--vw-min) * 100vw);
    }
    @keyframes txtSlider-megami {
        0%{
            -webkit-mask-position: 0 center;
            mask-position: 0 center;
        }
        100%{
            -webkit-mask-position: calc(404 / var(--vw-min) * 100vw) center;
            mask-position: calc(404 / var(--vw-min) * 100vw) center;
        }
    }
}
.subSec__frame.--bottom::before {
    -webkit-mask-size: min(calc(355 / var(--vw-min) * 100vw),355px) min(calc(22 / var(--vw-min) * 100vw),22px);
    mask-size: min(calc(355 / var(--vw-min) * 100vw),355px) min(calc(22 / var(--vw-min) * 100vw),22px);
    animation: storyMovie-txtSlider-man 6s linear reverse infinite;
}
@keyframes storyMovie-txtSlider-man {
    0%{
        -webkit-mask-position: 0 center;
        mask-position: 0 center;
    }
    100%{
        -webkit-mask-position:min(calc(355 / var(--vw-min) * 100vw),355px) center;
        mask-position:min(calc(355 / var(--vw-min) * 100vw),355px) center;
    }
}
@media screen and (max-width:768px){
    .subSec__frame.--bottom::before {
        -webkit-mask-size: calc(258 / var(--vw-min) * 100vw) calc(16 / var(--vw-min) * 100vw);
        mask-size: calc(258 / var(--vw-min) * 100vw) calc(16 / var(--vw-min) * 100vw);
    }
    @keyframes txtSlider-man {
        0%{
            -webkit-mask-position: 0 center;
            mask-position: 0 center;
        }
        100%{
            -webkit-mask-position:calc(258 / var(--vw-min) * 100vw) center;
            mask-position:calc(258 / var(--vw-min) * 100vw) center;
        }
    }
}
.subSec__magami,
.subSec__man {
    width: calc(90 / var(--vw-min) * 100vw);
    height: calc(90 / var(--vw-min) * 100vw);
    position: absolute;
    z-index: 1;
    overflow: hidden;
}
.subSec__magami::before,
.subSec__man::before {
    content: "";
    width: calc(100 / var(--vw-min) * 100vw);
    height: calc(100 / var(--vw-min) * 100vw);
    position: absolute;
}
@media screen and (max-width:768px){
    .subSec__magami,
    .subSec__man {
        width: calc(60 / var(--vw-min) * 100vw);
        height: calc(60 / var(--vw-min) * 100vw);
    }
    .subSec__magami::before,
    .subSec__man::before {
        width: calc(70 / var(--vw-min) * 100vw);
        height: calc(70 / var(--vw-min) * 100vw);
    }
}

/**
* アニメーション
**/
.chara__name-en,
.chara__img {
    opacity: 0;
    transform: translateY(30%);
    transition: opacity .4s var(--cubic-bezier02), transform .6s var(--cubic-bezier02);
}
.chara__item.swiper-slide-active .chara__name-en,
.chara__item.swiper-slide-active .chara__img {
    opacity: 1;
    transform: translateY(0);
}
.chara__name,
.chara__cvWrap,
.chara__txt {
    opacity: 0;
    transform: translateX(30%);
    transition: opacity .4s var(--cubic-bezier02), transform .6s var(--cubic-bezier02);
}
.chara__item.swiper-slide-active .chara__name,
.chara__item.swiper-slide-active .chara__cvWrap,
.chara__item.swiper-slide-active .chara__txt {
    opacity: 1;
    transform: translateX(0);
}
.chara__item.swiper-slide-active .chara__name-en,
.chara__item.swiper-slide-active .chara__name,
.chara__item.swiper-slide-active .chara__cvWrap,
.chara__item.swiper-slide-active .chara__txt {
    transition-delay: .15s;
}