@charset "utf-8";
/*-----------------------------------------------
 * MUSIC
-------------------------------------------------*/
.subSec-tit-en {
    color: rgba(208, 73, 132, .85);
    text-indent: 0.19em;
    margin-top: max(calc(-10 / var(--vw-min) * 100vw),-10px);
    margin-left: max(calc(-30 / var(--vw-min) * 100vw),-30px);
}
@media screen and (max-width:768px){
    .subSec-tit-en {
        margin-top: calc(-5 / var(--vw-min) * 100vw);
    }
    .--t-cter {
        padding-left: calc(120 / var(--vw-min) * 100vw);
    }
}
.subSec-tit-ja {
    color: var(--color-pinkD66);
    border-color: rgba(208, 73, 132, .7);
    margin-left: min(calc(64 / var(--vw-min) * 100vw),64px);
}
@media screen and (max-width:768px){
    .subSec-tit-ja {
        margin-left: 0;
    }
}
.subSec-tit-ja::before,
.subSec-tit-ja::after {
    background-color: var(--color-pinkD66);
}
.subSec-tit-catch {
    color: var(--color-pinkD66);
}
.subSecWrap {
    width: 100%;
}
@media screen and (max-width:768px){
    .subSec {
        padding: calc(64 / var(--vw-min) * 100vw) 0 calc(96 / var(--vw-min) * 100vw);
    }
}
/**
* content
**/
.charaSwiperWrap {
    position: relative;
}
.charaSwiper {
    position: relative;
    padding-top: min(calc(40 / var(--vw-min) * 100vw),40px);
}  
@media screen and (max-width:768px){
    .charaSwiper {
        padding-top: calc(24 / var(--vw-min) * 100vw);
    }
}
.chara__itemIn {
    width: min(calc(1000 / var(--vw-min) * 100vw),1000px);
    height: 100%;
    min-height: min(calc(710 / var(--vw-min) * 100vw),710px);
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .chara__itemIn {
        width: 100%;
        min-height: unset;
        display: block;
    }
}
/** name **/
.chara__nameWrap {
    position: relative;
    z-index: 1;
    padding-top: min(calc(160 / var(--vw-min) * 100vw),160px);
}
@media screen and (max-width:768px){
    .chara__nameWrap {
         display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding-top: calc(60 / var(--vw-min) * 100vw);
        margin-left: calc(24 / var(--vw-min) * 100vw);
    }
}
.chara__name {
    font-size: min(calc(48 / var(--vw-min) * 100vw),48px);
    line-height: 1.2;
    font-weight: 600;
}
.chara__name small {
    font-size: min(calc(22 / var(--vw-min) * 100vw),22px);
}
@media screen and (max-width:768px){
    .chara__name {
        font-size: calc(32 / var(--vw-min) * 100vw);
        margin-right: min(calc(10 / var(--vw-min) * 100vw),10px);
    }
    .chara__name small {
        font-size: calc(17 / var(--vw-min) * 100vw);
    }
}
.chara__realName {
    font-size: min(calc(14 / var(--vw-min) * 100vw),14px);
    font-weight: 600;
    margin-top: min(calc(15 / var(--vw-min) * 100vw),15px);
}
@media screen and (max-width:768px){
    .chara__realName {
        font-size: calc(12 / var(--vw-min) * 100vw);
        margin-top: calc(8 / var(--vw-min) * 100vw);
    }
}
.chara__cvWrap {
    display: flex;
    align-items: baseline;
    margin-top: min(calc(10 / var(--vw-min) * 100vw),10px);
}
@media screen and (max-width:768px){
    .chara__cvWrap {
        width: 100%;
        margin-top: calc(5 / var(--vw-min) * 100vw);
    }
}
.chara__cv {
    font-size: min(calc(18 / var(--vw-min) * 100vw),18px);
    margin-right: min(calc(10 / var(--vw-min) * 100vw),10px);
}
@media screen and (max-width:768px){
    .chara__cv {
        font-size: calc(16 / var(--vw-min) * 100vw);
        margin-right: calc(7 / 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(17 / var(--vw-min) * 100vw);
    }
}
/** img **/
.chara__imgWrap {
    width: min(calc(500 / var(--vw-min) * 100vw),500px);
    padding-top: 73.5294%;
    position: absolute;
    top: 0;
    right: min(calc(240 / var(--vw-min) * 100vw),240px);
    pointer-events: none;
}
@media screen and (max-width:768px){
    .chara__imgWrap {
        width: 100%;
        height: calc(515 / var(--vw-min) * 100vw);
        position: relative;
        right: unset;
        padding-top: unset;
    }
}
.chara__img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}
.chara__img img {
    width: 100%;
    pointer-events: none;
}
.chara__img {
	opacity: 0;
	transition: .3s;
}
.chara__img.--active {
	opacity: 1;
}
/** detail **/
.chara__detail {
    font-size: min(calc(15 / var(--vw-min) * 100vw),15px);
    line-height: 1.9333;
    font-weight: 600;
    width: min(calc(280 / var(--vw-min) * 100vw),280px);
    position: relative;
    z-index: 1;
    padding-top: min(calc(190 / var(--vw-min) * 100vw),190px);
}
@media screen and (max-width:768px){
    .chara__detail {
        font-size: calc(12 / var(--vw-min) * 100vw);
        width: 100%;
        padding: 0 calc(20 / var(--vw-min) * 100vw);
    }
}
.chara__name,
.chara__realName,
.chara__cvWrap {
    opacity: 0;
	transform: translateX(-100px);
	transition: .4s ease;
}
.chara__item.swiper-slide-active .chara__name,
.chara__item.swiper-slide-active .chara__realName {
    opacity: 1;
	transform: translateX(0);
	transition-delay: .1s;
}
.chara__item.swiper-slide-active .chara__cvWrap {
    opacity: 1;
	transform: translateX(0);
	transition-delay: .2s;
}
.chara__detail {
    opacity: 0;
	transform: translateX(100px);
	transition: .4s ease;   
}
.chara__item.swiper-slide-active .chara__detail {
    opacity: 1;
	transform: translateX(0);
}
.chara__img.--active {
    opacity: 0;
	transform: translateY(100px);
	transition: .4s ease;
} 
.chara__item.swiper-slide-active .chara__img.--active {
    opacity: 1;
    transform: translateY(0);
}
/**
* thumb
**/
.swiper-pagination-bullets.swiper-pagination-horizontal.chara__thumbLists {
    width: min(calc(685 / var(--vw-min) * 100vw),685px);
    position: relative;
    bottom: unset;
    left: unset;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .swiper-pagination-bullets.swiper-pagination-horizontal.chara__thumbLists {
        width: calc(354 / 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);
    border-radius: 50%;
    position: relative;
    background: #fff;
    opacity: 1;
    margin: min(calc(17 / var(--vw-min) * 100vw),17px);
    transition: .3s ease;
}
@media screen and (max-width:768px){
    .chara__thumbWrap {
        margin-top: calc(18 / var(--vw-min) * 100vw);
    }
    .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.chara__thumbItem {
        width: calc(45 / var(--vw-min) * 100vw);
        height: calc(45 / var(--vw-min) * 100vw);
        margin: calc(7 / var(--vw-min) * 100vw);
    }
}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.chara__thumbItem.swiper-pagination-bullet-active {
    background: #F5ECEF;
}
.swiper-pagination-bullet:only-child {
    display: block!important;
}
.chara__thumbItem::before {
    content: "";
    width: min(calc(104 / var(--vw-min) * 100vw),104px);
    height: min(calc(104 / var(--vw-min) * 100vw),104px);
    position: absolute;
    top: max(calc(-12 / var(--vw-min) * 100vw),-12px);
    left: max(calc(-12 / var(--vw-min) * 100vw),-12px);
    z-index: 1;
    -webkit-mask: url(../img/common/deco/deco_frame2.svg)no-repeat center/contain;
    mask: url(../img/common/deco/deco_frame2.svg)no-repeat center/contain;
    background-color: var(--color-goldAC9);
    pointer-events: none;
    transition: .3s ease;
}
@media screen and (max-width:768px){
    .chara__thumbItem::before {
        width: calc(57 / var(--vw-min) * 100vw);
        height: calc(57 / var(--vw-min) * 100vw);
        top: calc(-6 / var(--vw-min) * 100vw);
        left: calc(-6 / var(--vw-min) * 100vw);
    }
}
.chara__thumbItem-img {
    overflow: hidden;
    border-radius: 50%;
}
.chara__thumbItem img {
    width: 100%;
    pointer-events: none;
    transition: .3s ease;
}
@media (hover: hover) and (pointer: fine){
    .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.chara__thumbItem:hover {
        background-color: #F5ECEF;
    }
    .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.chara__thumbItem:hover img {
        transform: scale(1.1);
    }
}
/**
* bg
**/
.chara__bg {
    width: 100%;
    height: min(calc(600 / var(--vw-min) * 100vw),600px);
    position: absolute;
    top: min(calc(78 / var(--vw-min) * 100vw),78px);
    z-index: -1;
    background-image: radial-gradient(#ffffff, #e0ddcd);
    overflow: hidden;
}
@media screen and (max-width:768px){
    .chara__bg {
        height: calc(600 / var(--vw-min) * 100vw);
        top: calc(30 / var(--vw-min) * 100vw);
    }
}
.chara__bg::before {
    content: "";
    width: min(calc(840 / var(--vw-min) * 100vw),840px);
    height: min(calc(538 / var(--vw-min) * 100vw),538px);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    opacity: .4;
    background: url(../img/common/deco/deco_charaBg.png)no-repeat center/contain;
}
@supports (background-image: url(../img/common/deco/deco_charaBg.webp)){
    .chara__bg::before{
        background-image: url(../img/common/deco/deco_charaBg.webp);
    }
}
@media screen and (max-width:768px){
    .chara__bg::before {
        width: 100%;
        height: calc(554 / var(--vw-min) * 100vw);
        background-image: url(../img/common/deco/deco_charaBg-s.png);
    }
    @supports (background-image: url(../img/common/deco/deco_charaBg-s.webp)){
        .chara__bg::before{
            background-image: url(../img/common/deco/deco_charaBg-s.webp);
        }
    }
}
.chara__bgLine {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    pointer-events: none;
}
.chara__bgLine::before,
.chara__bgLine::after {
    content: "";
    width: 100%;
    height: min(calc(32 / var(--vw-min) * 100vw),32px);
    position: absolute;
    -webkit-mask: url(../img/common/deco/deco_charaLine.svg)repeat-x left/min(calc(20 / var(--vw-min) * 100vw),20px) min(calc(32 / var(--vw-min) * 100vw),32px);
    mask: url(../img/common/deco/deco_charaLine.svg)repeat-x left/min(calc(20 / var(--vw-min) * 100vw),20px) min(calc(32 / var(--vw-min) * 100vw),32px);
    background-color: rgba(172, 153, 108, .9);
}
@media screen and (max-width:768px){
    .chara__bgLine::before,
    .chara__bgLine::after {
        height: calc(23 / var(--vw-min) * 100vw);
        -webkit-mask-size: calc(14 / var(--vw-min) * 100vw) calc(23 / var(--vw-min) * 100vw);
        mask-size: calc(14 / var(--vw-min) * 100vw) calc(23 / var(--vw-min) * 100vw);
    }
}
.chara__bgLine::before {
    top: 0;
    transform: scale(1,-1);
}
.chara__bgLine::after {
    bottom: 0;
}
.chara__bgCurtain::before,
.chara__bgCurtain::after {
    content: "";
    width: min(calc(324 / var(--vw-min) * 100vw),324px);
    height: min(calc(456 / var(--vw-min) * 100vw),456px);
    position: absolute;
    top: min(calc(32 / var(--vw-min) * 100vw),32px);
    background: url(../img/common/deco/deco_curtain.png)no-repeat center/contain;
    opacity: .8;
}
.chara__bgCurtain::before {
    left: max(calc(-116 / var(--vw-min) * 100vw),-116px);
}
.chara__bgCurtain::after {
    right: max(calc(-116 / var(--vw-min) * 100vw),-116px);
    transform: scale(-1,1);
}
@media screen and (max-width:768px){
    .chara__bgCurtain::before,
    .chara__bgCurtain::after {
        width: calc(168 / var(--vw-min) * 100vw);
        height: calc(236 / var(--vw-min) * 100vw);
        top: calc(23 / var(--vw-min) * 100vw);
    }
    .chara__bgCurtain::before {
        left: calc(-72 / var(--vw-min) * 100vw);
    }
    .chara__bgCurtain::after {
        right: calc(-72 / var(--vw-min) * 100vw);
    }
}
/**
* CHANGE BTN
**/
.chara__changeBtnWrap {
    width: min(calc(1000 / var(--vw-min) * 100vw),1000px);
    position: absolute;
    top: min(calc(340 / var(--vw-min) * 100vw),340px);
    left: 0;
    right: 0;
    margin: auto;
}
@media screen and (max-width:768px){
    .chara__changeBtnWrap {
        width: 100%;
        top: calc(120 / var(--vw-min) * 100vw);
    }
}
.chara__changeBtn {
    width: min(calc(152 / var(--vw-min) * 100vw),152px);
    height: min(calc(152 / var(--vw-min) * 100vw),152px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    z-index: 3;
    transition: transform .4s ease;
}
@media screen and (max-width:768px){
    .chara__changeBtn {
        width: calc(96 / var(--vw-min) * 100vw);
        height: calc(96 / var(--vw-min) * 100vw);
        right: calc(20 / var(--vw-min) * 100vw);
    }
}
.chara__changeBtn::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-mask: url(../img/common/deco/deco_change.svg)no-repeat center/contain;
    mask: url(../img/common/deco/deco_change.svg)no-repeat center/contain;
    background-color: var(--color-goldAC9);
	animation: rotate 20s linear infinite;
}
@keyframes rotate {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}
.charaChangeBtn__inner {
    width: min(calc(112 / var(--vw-min) * 100vw), 112px);
    height: min(calc(112 / var(--vw-min) * 100vw), 112px);
    position: relative;
    background-color: #fff;
    border-radius: 50%;
    border: min(calc(1 / var(--vw-min) * 100vw),1px) solid var(--color-goldAC9);
    transition: .3s ease;
}
@media screen and (max-width:768px){
    .charaChangeBtn__inner {
        width: calc(72 / var(--vw-min) * 100vw);
        height: calc(72 / var(--vw-min) * 100vw);
        border-width: calc(1 / var(--vw-min) * 100vw);
    }
}
.charaChangeBtn__inner::before {
    content: "";
    width: min(calc(118 / var(--vw-min) * 100vw),118px);
    height: min(calc(118 / var(--vw-min) * 100vw),118px);
    position: absolute;
    top: max(calc(-6 / var(--vw-min) * 100vw),-6px);
    left: max(calc(-6 / var(--vw-min) * 100vw),-6px);
    border-radius: 50%;
    border: min(calc(2 / var(--vw-min) * 100vw),2px) solid var(--color-goldAC9);
}
@media screen and (max-width:768px){
    .charaChangeBtn__inner::before {
        width: calc(76 / var(--vw-min) * 100vw);
        height:calc(76 / var(--vw-min) * 100vw);
        top: calc(-5 / var(--vw-min) * 100vw);
        left: calc(-5 / var(--vw-min) * 100vw);
        border-width: calc(2 / var(--vw-min) * 100vw);
    }
}
.charaChangeBtn__innerIn {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}
.charaChangeBtn__innerIn img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    transition: .3s ease;
}
/** ACTIVE **/
.chara__changeBtn[data-now="1"] .changeIcon1{
	opacity: 1;
}
.chara__changeBtn[data-now="2"] .changeIcon2{
	opacity: 1;
}
.chara__changeBtn.--active {
	opacity: 1;
	pointer-events: auto;
}
@media (hover: hover) and (pointer: fine){
    .chara__changeBtn:hover img {
        transform: scale(1.1);
    }
}