@charset "utf-8";
/*-----------------------------------------------
 * COMMON
 * LOADER (base → common.css / TOP extras below)
 * FV
 * NEWS
 * INTRODUCTION
 * STAFF&CAST
 * CHARACTER
 * BOOKS
-------------------------------------------------*/
/*-----------------------------------------------
 * COMMON
-------------------------------------------------*/
.section {
    position: relative;
}
/*-----------------------------------------------
 * LOADER (TOP extras)
-------------------------------------------------*/
body.is-loading .fv__catchWrap {
	opacity: 0;
}
/*-----------------------------------------------
 * FV
-------------------------------------------------*/
.fv {
    position: relative;
    padding-bottom: calc(120 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .fv {
        padding-bottom: 0;
    }
}
.fv .cabanaTxt {
    left: calc(32 / var(--vw-min) * 100vw);
    bottom: calc(113 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .fv .cabanaTxt {
        position: relative;
        bottom: unset;
        left: unset;
        margin: calc(-15 / var(--vw-min) * 100vw) 0 0;
        padding-left: calc(20 / var(--vw-min) * 100vw);
    }
}
.fv__catchWrap {
    width: calc(630 / var(--vw-min) * 100vw);
    height: calc(100 / var(--vw-min) * 100vw);
    position: absolute;
    top: calc(1070 / var(--vw-min) * 100vw);
    left: calc(82 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .fv__catchWrap {
        width: calc(212 / var(--vw-min) * 100vw);
        height: calc(48 / var(--vw-min) * 100vw);
        position: absolute;
        top: calc(381 / var(--vw-min) * 100vw);
        left: 0;
    }
}
.fv__catch1 {
    width: calc(502 / var(--vw-min) * 100vw);
    height: calc(46 / var(--vw-min) * 100vw);
    display: block;
    position: absolute;
    top: 0;
    background: url(../img/top/fv_catch1.svg)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .fv__catch1 {
        width: calc(212 / var(--vw-min) * 100vw);
        height: calc(22 / var(--vw-min) * 100vw);
        background-image: url(../img/top/fv_catch1-s.svg);
    }
}
.fv__catch2 {
    width: calc(420 / var(--vw-min) * 100vw);
    height: calc(46 / var(--vw-min) * 100vw);
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    background: url(../img/top/fv_catch2.svg)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .fv__catch2 {
        width: calc(164 / var(--vw-min) * 100vw);
        height: calc(22 / var(--vw-min) * 100vw);
        left: 0;
        right: unset;
        background-image: url(../img/top/fv_catch2-s.svg);
    }
}
.fv__onairWrap {
    min-height: calc(252 / var(--vw-min) * 100vw);
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: calc(84 / var(--vw-min) * 100vw) 0;
    overflow: hidden;
}
@media screen and (max-width:768px){
    .fv__onairWrap {
        min-height: calc(142 / var(--vw-min) * 100vw);
        position: relative;
        right: unset;
        bottom: unset;
        justify-content: flex-end;
        padding: calc(60 / var(--vw-min) * 100vw) 0;
        margin: calc(-40 / var(--vw-min) * 100vw) 0 0;
    }
}
.fv__onairWrap::before {
    content: "";
    width: calc(246 / var(--vw-min) * 100vw);
    height: calc(240 / var(--vw-min) * 100vw);
    display: block;
    position: absolute;
    top: 0;
    right: calc(-80 / var(--vw-min) * 100vw);
    bottom: 0;
    margin: auto;
    background: url(../img/top/fv_onairTxt.svg)no-repeat center/contain;
    animation: 20s ani_rotate01 linear infinite;
    animation-play-state: paused;
}
.fv__onairWrap.--is-ani-play::before {
    animation-play-state: running;
}
@media screen and (max-width:768px){
    .fv__onairWrap::before {
        width: calc(144 / var(--vw-min) * 100vw);
        height: calc(142 / var(--vw-min) * 100vw);
        right: calc(-40 / var(--vw-min) * 100vw);
    }
}
.fv__onair {
    width: calc(720 / var(--vw-min) * 100vw);
    height: calc(72 / var(--vw-min) * 100vw);
    display: block;
    position: relative;
    background: url(../img/top/fv_onair.svg)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .fv__onair {
        width: calc(272 / var(--vw-min) * 100vw);
        height: calc(28 / var(--vw-min) * 100vw);
    }
}
/**
* vs1
**/
.fv__vsItem {
    width: calc(1123 / var(--vw-min) * 100vw);
    position: relative;
    margin: 0 calc(102 / var(--vw-min) * 100vw) 0 calc(141 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .fv__vsItem {
        width: 100%;
        margin: 0;
    }
}
.fv__vsImg img {
    width: 100%;
    pointer-events: none;
}
.vs1__deco {
    position: absolute;
}
.vs1__deco.--1 {
    width: calc(416 / var(--vw-min) * 100vw);
    height: calc(482 / var(--vw-min) * 100vw);
    top: calc(-10 / var(--vw-min) * 100vw);
    left: 0;
    background: url(../img/top/visual/vs1_deco1.png)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .vs1__deco.--1 {
        width: calc(145 / var(--vw-min) * 100vw);
        height: calc(168 / var(--vw-min) * 100vw);
        top: calc(-4 / var(--vw-min) * 100vw);
        left: calc(-1 / var(--vw-min) * 100vw);
    }
}
.vs1__deco.--2 {
    width: calc(484 / var(--vw-min) * 100vw);
    height: calc(282 / var(--vw-min) * 100vw);
    position: absolute;
    top: calc(422 / var(--vw-min) * 100vw);
    right: 0;
    background: url(../img/top/visual/vs1_deco2.png)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .vs1__deco.--2 {
        width: calc(168 / var(--vw-min) * 100vw);
        height: calc(98 / var(--vw-min) * 100vw);
        top: calc(146 / var(--vw-min) * 100vw);
        right: calc(-14 / var(--vw-min) * 100vw);
    }
}
.vs1__deco.--3 {
    width: calc(318 / var(--vw-min) * 100vw);
    height: calc(338 / var(--vw-min) * 100vw);
    position: absolute;
    bottom: 0;
    left: 0;
    background: url(../img/top/visual/vs1_deco3.png)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .vs1__deco.--3 {
        width: calc(110 / var(--vw-min) * 100vw);
        height: calc(117 / var(--vw-min) * 100vw);
        left: calc(8 / var(--vw-min) * 100vw);
    }
}
.vs1__deco.--4 {
    width: calc(96 / var(--vw-min) * 100vw);
    height: calc(131 / var(--vw-min) * 100vw);
    position: absolute;
    top: calc(24 / var(--vw-min) * 100vw);
    right: calc(111 / var(--vw-min) * 100vw);
    background: url(../img/top/visual/vs1_deco4.png)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .vs1__deco.--4 {
        width: calc(33 / var(--vw-min) * 100vw);
        height: calc(45 / var(--vw-min) * 100vw);
        top: calc(8 / var(--vw-min) * 100vw);
        right: calc(25 / var(--vw-min) * 100vw);
    }
}
.vs1__deco.--5 {
    width: calc(128 / var(--vw-min) * 100vw);
    height: calc(134 / var(--vw-min) * 100vw);
    position: absolute;
    top: calc(764 / var(--vw-min) * 100vw);
    left: calc(25 / var(--vw-min) * 100vw);
    background: url(../img/top/visual/vs1_deco5.png)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .vs1__deco.--5 {
        width: calc(45 / var(--vw-min) * 100vw);
        height: calc(47 / var(--vw-min) * 100vw);
        top: calc(265 / var(--vw-min) * 100vw);
        left: calc(8 / var(--vw-min) * 100vw);
    }
}
.vs1__deco.--6 {
    width: calc(105 / var(--vw-min) * 100vw);
    height: calc(114 / var(--vw-min) * 100vw);
    position: absolute;
    bottom: calc(633 / var(--vw-min) * 100vw);
    right: calc(172 / var(--vw-min) * 100vw);
    background: url(../img/top/visual/vs1_deco6.png)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .vs1__deco.--6 {
        width: calc(36 / var(--vw-min) * 100vw);
        height: calc(39 / var(--vw-min) * 100vw);
        top: calc(276 / var(--vw-min) * 100vw);
        right: calc(46 / var(--vw-min) * 100vw);
    }
}
.vs1__deco.--7 {
    width: calc(84 / var(--vw-min) * 100vw);
    height: calc(105 / var(--vw-min) * 100vw);
    position: absolute;
    bottom: calc(422 / var(--vw-min) * 100vw);
    left: calc(528 / var(--vw-min) * 100vw);
    background: url(../img/top/visual/vs1_deco7.png)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .vs1__deco.--7 {
        width: calc(29 / var(--vw-min) * 100vw);
        height: calc(36 / var(--vw-min) * 100vw);
        bottom: calc(187 / var(--vw-min) * 100vw);
        left: calc(183 / var(--vw-min) * 100vw);
    }
}
.vs1__deco.--8 {
    width: calc(243 / var(--vw-min) * 100vw);
    height: calc(151 / var(--vw-min) * 100vw);
    position: absolute;
    bottom:calc(185 / var(--vw-min) * 100vw);
    right: 0;
    background: url(../img/top/visual/vs1_deco8.png)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .vs1__deco.--8 {
        width: calc(83 / var(--vw-min) * 100vw);
        height: calc(52 / var(--vw-min) * 100vw);
        bottom: calc(66 / var(--vw-min) * 100vw);
        right: calc(-15 / var(--vw-min) * 100vw);
    }
}
.--vs1 .fv__logo {
    width: calc(478 / var(--vw-min) * 100vw);
    height: calc(160 / var(--vw-min) * 100vw);
    position: absolute;
    top: calc(795 / var(--vw-min) * 100vw);
    right: calc(75 / var(--vw-min) * 100vw);
    background: url(../img/common/logo/logo.png)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .--vs1 .fv__logo {
        width: calc(180 / var(--vw-min) * 100vw);
        height: calc(60 / var(--vw-min) * 100vw);
        top: calc(273 / var(--vw-min) * 100vw);
        right: calc(5 / var(--vw-min) * 100vw);
    }
}
/*-----------------------------------------------
 * BNA
-------------------------------------------------*/
.bnrArea {
    width: calc(1200 / var(--vw-min) * 100vw);
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .bnrArea {
        width: 100%;
        padding: 0 calc(20 / var(--vw-min) * 100vw);
        margin-top: calc(-16 / var(--vw-min) * 100vw);
    }
}
.bnr__lists {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: calc(36 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .bnr__lists {
        flex-direction: column;
        gap: calc(12 / var(--vw-min) * 100vw);
    }
}
.bnr__item {
    width: calc((100% - calc(72 / var(--vw-min) * 100vw)) / 3);
}
@media screen and (max-width:768px){
    .bnr__item {
        width: 100%;
    }
}
.bnr__link {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}
.bnr__link img {
    width: 100%;
    transition:
        opacity var(--dur-fast) var(--ease-default),
        transform var(--dur-fast) var(--ease-default);
    pointer-events: none;
}
@media (hover: hover) and (pointer: fine){
    .bnr__link:hover img {
        opacity: .72;
        transform: scale(1.04);
    }
}
/*-----------------------------------------------
 * NEWS
-------------------------------------------------*/
.news {
    padding: calc(136 / var(--vw-min) * 100vw) 0 calc(76 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .news {
        padding: calc(72 / var(--vw-min) * 100vw) 0 calc(36 / var(--vw-min) * 100vw);
    }
}
.newsWrap {
    width: calc(1200 / var(--vw-min) * 100vw);
    display: flex;
    position: relative;
    z-index: 1;
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .newsWrap {
        width: 100%;
        flex-direction: column;
        padding: 0 calc(20 / var(--vw-min) * 100vw);
    }
}
.news .cont-titWrap {
    width: calc(100% - calc(800 / var(--vw-min) * 100vw));
    position: relative;
    padding-left: calc(82 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .news .cont-titWrap {
        width: 100%;
        padding-left: 0;
    }
}
.news .cont-tit {
    font-size: calc(80 / var(--vw-min) * 100vw);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1.12px;
}
@media screen and (max-width:768px){
    .news .cont-tit {
        font-size: calc(48 / var(--vw-min) * 100vw);
    }
}
.newsCont {
    width: calc(800 / var(--vw-min) * 100vw);
    padding-top: calc(24 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .newsCont {
        width: 100%;
        padding-top: calc(32 / var(--vw-min) * 100vw);
    }
}
.news__lists {
    display: flex;
    flex-direction: column;
    border-top: calc(1 / var(--vw-min) * 100vw) solid var(--color-black292);
}
.news__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: calc(18 / var(--vw-min) * 100vw) 0 calc(21 / var(--vw-min) * 100vw);
    border-bottom: calc(1 / var(--vw-min) * 100vw) solid var(--color-black292);
    text-decoration: none;
}
@media screen and (max-width:768px){
    .news__link {
        padding: calc(15 / var(--vw-min) * 100vw) 0 calc(16 / var(--vw-min) * 100vw);
    }
}
.news__time {
    flex-shrink: 0;
    padding-right: calc(48 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .news__time {
        padding-right: calc(18 / var(--vw-min) * 100vw);
    }
}
.news__year {
    font-size: calc(16 / var(--vw-min) * 100vw);
    font-weight: 800;
    line-height: 1;
    display: block;
    margin-bottom: calc(4 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .news__year {
        font-size: calc(12 / var(--vw-min) * 100vw);
        margin-bottom: calc(4 / var(--vw-min) * 100vw);
    }
}
.news__date {
    font-size: calc(32 / var(--vw-min) * 100vw);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.448px;
    display: block;
}
@media screen and (max-width:768px){
    .news__date {
        font-size: calc(20 / var(--vw-min) * 100vw);
    }
}
.news__tit {
    font-size: calc(16 / var(--vw-min) * 100vw);
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.48px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-right: calc(88 / var(--vw-min) * 100vw);
    transition: color var(--dur-fast) var(--ease-default);
}
@media screen and (max-width:768px){
    .news__tit {
        font-size: calc(13 / var(--vw-min) * 100vw);
        padding-right: calc(48 / var(--vw-min) * 100vw);
    }
}
.news__arrow {
    width: calc(56 / var(--vw-min) * 100vw);
    height: calc(44 / var(--vw-min) * 100vw);
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    border: calc(1 / var(--vw-min) * 100vw) solid rgba(0,0,0,.5);
    transition: border-color var(--dur-fast) var(--ease-default);
}
@media screen and (max-width:768px){
    .news__arrow {
        width: calc(36 / var(--vw-min) * 100vw);
        height: calc(28 / var(--vw-min) * 100vw);
    }
}
.news__arrow::before {
    content: "";
    width: calc(16 / var(--vw-min) * 100vw);
    height: calc(12 / var(--vw-min) * 100vw);
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
    -webkit-mask: url(../img/common/deco/arrow.svg)no-repeat center/contain;
    mask: url(../img/common/deco/arrow.svg)no-repeat center/contain;
    background-color: var(--color-black292);
    transition:
        background-color var(--dur-fast) var(--ease-default),
        transform var(--dur-fast) var(--ease-default);
}
@media screen and (max-width:768px){
    .news__arrow::before {
        width: calc(10 / var(--vw-min) * 100vw);
        height: calc(8 / var(--vw-min) * 100vw);
    }
}
.news .linkBtn {
    justify-content: flex-end;
    margin-top: calc(40 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .news .linkBtn {
        margin-top: calc(32 / var(--vw-min) * 100vw);
    }
}
@media (hover: hover) and (pointer: fine){
    .news__link:hover .news__tit {
        color: var(--hover-accent);
    }
    .news__link:hover .news__arrow {
        border-color: var(--hover-accent);
    }
    .news__link:hover .news__arrow::before {
        background-color: var(--hover-accent);
        transform: translateX(4px);
    }
}
/**
* deco
**/
.news .deco__triangle {
    width: calc(280 / var(--vw-min) * 100vw);
    height: calc(240 / var(--vw-min) * 100vw);
    position: absolute;
    top: calc(31 / var(--vw-min) * 100vw);
    left: calc((100% - calc(1200 / var(--vw-min) * 100vw)) / 2);
    z-index: -2;
    background: url(../img/common/deco/triangle.svg)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .news .deco__triangle {
        width: calc(158 / var(--vw-min) * 100vw);
        height: calc(136 / var(--vw-min) * 100vw);
        top: calc(0 / var(--vw-min) * 100vw);
        left: calc(46 / var(--vw-min) * 100vw);
    }
}
.news .deco__cord {
    width: calc(248 / var(--vw-min) * 100vw);
    height: calc(192 / var(--vw-min) * 100vw);
    position: absolute;
    top: calc(180 / var(--vw-min) * 100vw);
    left: 0;
    z-index: -1;
    background: url(../img/common/deco/cord.svg)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .news .deco__cord {
        width: calc(140 / var(--vw-min) * 100vw);
        height: calc(108 / var(--vw-min) * 100vw);
        top: calc(83 / var(--vw-min) * 100vw);
    }
}
.news .deco__window {
    width: calc(337 / var(--vw-min) * 100vw);
    height: calc(748 / var(--vw-min) * 100vw);
    position: absolute;
    top: calc(-177 / var(--vw-min) * 100vw);
    right: 0;
    overflow: hidden;
    pointer-events: none;
}
@media screen and (max-width:768px){
    .news .deco__window {
        width: calc(177 / var(--vw-min) * 100vw);
        height: calc(326 / var(--vw-min) * 100vw);
        top: calc(-10 / var(--vw-min) * 100vw);
    }
}
.news .deco__window::before {
    content: "";
    width: calc(1010 / var(--vw-min) * 100vw);
    height: calc(748 / var(--vw-min) * 100vw);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/common/deco/window.png)no-repeat left/cover;
    transform: scale(1,-1);
}
@media screen and (max-width:768px){
    .news .deco__window::before {
        width: calc(440 / var(--vw-min) * 100vw);
        height: calc(326 / var(--vw-min) * 100vw);
    }
}
/*-----------------------------------------------
 * INTRODUCTION
-------------------------------------------------*/
.introduction {
    padding: calc(76 / var(--vw-min) * 100vw) 0 0;
    overflow: hidden;
}
@media screen and (max-width:768px){
    .introduction {
        padding-top: calc(36 / var(--vw-min) * 100vw) 0 0;
    }
}
.introWrap {
    position: relative;
    padding-bottom: calc(240 / var(--vw-min) * 100vw);
}
.introduction .cont-titWrap {
    width: calc(1233 / var(--vw-min) * 100vw);
    height: calc(444 / var(--vw-min) * 100vw);
    position: relative;
    overflow: hidden;
}
@media screen and (max-width:768px){
    .introduction .cont-titWrap {
        width: calc(366 / var(--vw-min) * 100vw);
        height: calc(124 / var(--vw-min) * 100vw);
        margin: 0 0 calc(20 / var(--vw-min) * 100vw) calc(-10 / var(--vw-min) * 100vw);
    }
}
.introduction .cont-tit {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
    background: url(../img/common/tit/intro.svg)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .introduction .cont-tit {
        background-image: url(../img/common/tit/intro-s.svg);
    }
}
.introCont {
    width: calc(880 / var(--vw-min) * 100vw);
    position: relative;
    padding: calc(131 / var(--vw-min) * 100vw) 0 calc(190 / var(--vw-min) * 100vw) calc(123 / var(--vw-min) * 100vw);
    background-color: #fff;
}
@media screen and (max-width:768px){
    .introCont {
        width: calc(363 / var(--vw-min) * 100vw);
        padding: calc(56 / var(--vw-min) * 100vw) 0 calc(130 / var(--vw-min) * 100vw) calc(20 / var(--vw-min) * 100vw);
    }
}
.intro__catch1 {
    width: calc(600 / var(--vw-min) * 100vw);
    height: calc(105 / var(--vw-min) * 100vw);
    display: block;
    -webkit-mask: url(../img/top/intro_catch1.svg)no-repeat center/contain;
    mask: url(../img/top/intro_catch1.svg)no-repeat center/contain;
    background-color: var(--color-blueCAD);
}
@media screen and (max-width:768px){
    .intro__catch1 {
        width: calc(323 / var(--vw-min) * 100vw);
        height: calc(56 / var(--vw-min) * 100vw);
    }
}
.intro__catch2 {
    width: calc(462 / var(--vw-min) * 100vw);
    height: calc(31 / var(--vw-min) * 100vw);
    display: block;
    position: absolute;
    top: calc(208 / var(--vw-min) * 100vw);
    right: calc(108 / var(--vw-min) * 100vw);
    background: url(../img/top/intro_catch2.svg)no-repeat center/contain;
    transform: rotate(-7deg);
}
@media screen and (max-width:768px){
    .intro__catch2 {
        width: calc(256 / var(--vw-min) * 100vw);
        height: calc(47 / var(--vw-min) * 100vw);
        top: calc(96 / var(--vw-min) * 100vw);
        right: calc(-16 / var(--vw-min) * 100vw);
        background-image: url(../img/top/intro_catch2-s.svg);
    }
}
.intro__txtWrap {
    padding: calc(60 / var(--vw-min) * 100vw) 0 0 calc(40 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .intro__txtWrap {
        padding: calc(64 / var(--vw-min) * 100vw) 0 0 0;
    }
}
.intro__txt {
    font-size: calc(17 / var(--vw-min) * 100vw);
    font-weight: 400;
    line-height: 2.353;
    letter-spacing: 0.51px;
}
@media screen and (max-width:768px){
    .intro__txt {
        font-size: calc(13 / var(--vw-min) * 100vw);
    }
}
.intro__txt.--mt {
    margin-top: min(calc(28 / var(--vw-min) * 100vw),28px);
}
@media screen and (max-width:768px){
    .intro__txt.--mt {
        margin-top: calc(24 / var(--vw-min) * 100vw);
    }
}
.--paint {
    position: relative;
    z-index: 1;
}
.--paint::before {
    content: "";
    width: calc(80 / var(--vw-min) * 100vw);
    height: calc(14 / var(--vw-min) * 100vw);
    display: block;
    position: absolute;
    bottom: calc(-3 / var(--vw-min) * 100vw);
    left: calc(-6 / var(--vw-min) * 100vw);
    z-index: -1;
    -webkit-mask: url(../img/common/deco/paint.svg)no-repeat center/contain;
    mask: url(../img/common/deco/paint.svg)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .--paint::before {
        width: calc(62 / var(--vw-min) * 100vw);
        height: calc(10 / var(--vw-min) * 100vw);
        left: calc(-3 / var(--vw-min) * 100vw);
        bottom: calc(-2 / var(--vw-min) * 100vw);
    }
}
.--paint.blue::before {
    background-color: var(--color-blueCAD);
}
.--paint.pink::before {
    transform: scale(-1,1) rotate(8deg);
    background-color: var(--color-pinkFFE);
}
.intro__cursive {
    width: calc(324 / var(--vw-min) * 100vw);
    height: calc(60 / var(--vw-min) * 100vw);
    display: block;
    background: url(../img/top/intro_cursive.svg)no-repeat center/contain;
    margin: calc(16 / var(--vw-min) * 100vw) 0 calc(56 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .intro__cursive {
        width: calc(216 / var(--vw-min) * 100vw);
        height: calc(40 / var(--vw-min) * 100vw);
        margin: calc(-20 / var(--vw-min) * 100vw) calc(32 / var(--vw-min) * 100vw) calc(40 / var(--vw-min) * 100vw) auto;
    }
}
.intro__catch3 {
    width: calc(470 / var(--vw-min) * 100vw);
    height: calc(40 / var(--vw-min) * 100vw);
    display: block;
    margin-bottom: calc(20 / var(--vw-min) * 100vw);
    background: url(../img/top/intro_catch3.svg)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .intro__catch3 {
        width: calc(260 / var(--vw-min) * 100vw);
        height: calc(22 / var(--vw-min) * 100vw);
        margin-bottom: calc(3 / var(--vw-min) * 100vw);
        background-image: url(../img/top/intro_catch3-s.svg);
    }
}
.intro__catch4 {
    width: calc(526 / var(--vw-min) * 100vw);
    height: calc(40 / var(--vw-min) * 100vw);
    display: block;
    margin-left: calc(240 / var(--vw-min) * 100vw);
    background: url(../img/top/intro_catch4.svg)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .intro__catch4 {
        width: calc(324 / var(--vw-min) * 100vw);
        height: calc(22 / var(--vw-min) * 100vw);
        margin-left: calc(32 / var(--vw-min) * 100vw);
        background-image: url(../img/top/intro_catch4-s.svg);
    }
}
/**
* deco
**/
.introduction .deco__triangle1 {
    width: calc(104 / var(--vw-min) * 100vw);
    height: calc(96 / var(--vw-min) * 100vw);
    position: absolute;
    top: calc(-48 / var(--vw-min) * 100vw);
    right: calc(48 / var(--vw-min) * 100vw);
    -webkit-mask: url(../img/common/deco/triangle2.svg)no-repeat center/contain;
    mask: url(../img/common/deco/triangle2.svg)no-repeat center/contain;
    background-color: var(--color-black292);
}
@media screen and (max-width:768px){
    .introduction .deco__triangle1 {
        width: calc(44 / var(--vw-min) * 100vw);
        height: calc(40 / var(--vw-min) * 100vw);
        top: calc(-20 / var(--vw-min) * 100vw);
        right: calc(12 / var(--vw-min) * 100vw);
    }
}
.introduction .deco__triangle2 {
    width: calc(136 / var(--vw-min) * 100vw);
    height: calc(128 / var(--vw-min) * 100vw);
    position: absolute;
    bottom: calc(-65 / var(--vw-min) * 100vw);
    left: calc(43 / var(--vw-min) * 100vw);
    background: url(../img/common/deco/triangle3.svg)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .introduction .deco__triangle2 {
        width: calc(72 / var(--vw-min) * 100vw);
        height: calc(68 / var(--vw-min) * 100vw);
        bottom: calc(-34 / var(--vw-min) * 100vw);
        left: calc(28 / var(--vw-min) * 100vw);
    }
}
.introduction .deco__yusuke {
    width: calc(302 / var(--vw-min) * 100vw);
    height: calc(224 / var(--vw-min) * 100vw);
    position: absolute;
    top: calc(-40 / var(--vw-min) * 100vw);
    left: calc(-8 / var(--vw-min) * 100vw);
    background: url(../img/common/deco/yusuke.png)no-repeat right/cover;
}
@media screen and (max-width:768px){
    .introduction .deco__yusuke {
        width: calc(156 / var(--vw-min) * 100vw);
        height: calc(116 / var(--vw-min) * 100vw);
        top: calc(-50 / var(--vw-min) * 100vw);
    }
}
.introduction .deco__yukari {
    width: calc(376 / var(--vw-min) * 100vw);
    height: calc(208 / var(--vw-min) * 100vw);
    position: absolute;
    top: calc(343 / var(--vw-min) * 100vw);
    right: calc(-163 / var(--vw-min) * 100vw);
    background: url(../img/common/deco/yukari.png)no-repeat left/cover;
}
@media screen and (max-width:768px){
    .introduction .deco__yukari {
        width: calc(220 / var(--vw-min) * 100vw);
        height: calc(127 / var(--vw-min) * 100vw);
        top: calc(320 / var(--vw-min) * 100vw);
        right: calc(-32 / var(--vw-min) * 100vw);
    }
}
.introduction .cabanaTxt {
	bottom: calc(88 / var(--vw-min) * 100vw);
	left: calc(83 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .introduction .cabanaTxt {
        bottom: calc(56 / var(--vw-min) * 100vw);
        left: calc(20 / var(--vw-min) * 100vw);
    }
}
/**
* bg
**/
.introBg {
    width: calc(1334 / var(--vw-min) * 100vw);
    height: calc(100% - calc(104 / var(--vw-min) * 100vw));
    display: block;
    position: absolute;
    top: calc(104 / var(--vw-min) * 100vw);
    left: calc(32 / var(--vw-min) * 100vw);
    margin: auto;
    z-index: -3;
    overflow: hidden;
}
@media screen and (max-width:768px){
    .introBg {
        width: calc(100% - calc(20 / var(--vw-min) * 100vw));
        height: calc(100% - calc(27 / var(--vw-min) * 100vw));
        top: calc(27 / var(--vw-min) * 100vw);
        left: calc(20 / var(--vw-min) * 100vw);
    }
}
.introduction .deco__fence {
    width: 100%;
    height: calc(640 / var(--vw-min) * 100vw);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/common/bg/fence.jpg)no-repeat center/contain;
}
@supports (background-image: url(../img/common/bg/fence.webp)){
    .introduction .deco__fence {
        background-image: url(../img/common/bg/fence.webp);
    }
}
@media screen and (max-width:768px){
    .introduction .deco__fence {
        height: calc(368 / var(--vw-min) * 100vw);
        background-position: right bottom;
        background-size: cover;
    }
}
.introduction .deco__dark {
    width: 100%;
    height: calc(100% - calc(640 / var(--vw-min) * 100vw));
    position: absolute;
    top: calc(640 / var(--vw-min) * 100vw);
    left: 0;
    background-color: var(--color-black001);
}
@media screen and (max-width:768px){
    .introduction .deco__dark {
        height: calc(100% - calc(368 / var(--vw-min) * 100vw));
        top: calc(368 / var(--vw-min) * 100vw);
    }
}
.introduction .deco__phone {
    width: calc(291 / var(--vw-min) * 100vw);
    height: calc(593 / var(--vw-min) * 100vw);
    position: absolute;
    bottom: calc(195 / var(--vw-min) * 100vw);
    right: calc(-52 / var(--vw-min) * 100vw);    
    background: url(../img/common/deco/phone.png)no-repeat center/contain;
    transform: rotate(28deg);
}
@media screen and (max-width:768px){
    .introduction .deco__phone {
        width: calc(146 / var(--vw-min) * 100vw);
        height: calc(298 / var(--vw-min) * 100vw);
        bottom: calc(76 / var(--vw-min) * 100vw);
        right: calc(8 / var(--vw-min) * 100vw);
    }
}
.introduction .deco__cord {
    width: calc(137 / var(--vw-min) * 100vw);
    height: calc(194 / var(--vw-min) * 100vw);
    position: absolute;
    bottom: 0;
    right: calc(275 / var(--vw-min) * 100vw);
    background: url(../img/common/deco/cord2.png)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .introduction .deco__cord {
        width: calc(58 / var(--vw-min) * 100vw);
        height: calc(82 / var(--vw-min) * 100vw);
        right: calc(180 / var(--vw-min) * 100vw);
    }
}
.introduction .deco__blurNoise {
    position: absolute;
    background: url(../img/common/deco/blurNoise.png)no-repeat center/contain;
}
@supports (background-image: url(../img/common/deco/blurNoise.webp)){
    .introduction .deco__blurNoise {
        background-image: url(../img/common/deco/blurNoise.webp);
    }
}
.introduction .deco__blurNoise.--1 {
    width: calc(50 / var(--vw-min) * 100vw);
    height: calc(50 / var(--vw-min) * 100vw);
    top: calc(50 / var(--vw-min) * 100vw);
    right: calc(80 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .introduction .deco__blurNoise.--1 {
        width: calc(23 / var(--vw-min) * 100vw);
        height: calc(26 / var(--vw-min) * 100vw);
        top: unset;
        bottom: calc(200 / var(--vw-min) * 100vw);
        right: 0;
    }
}
.introduction .deco__blurNoise.--2 {
    width: calc(52 / var(--vw-min) * 100vw);
    height: calc(52 / var(--vw-min) * 100vw);
    top: calc(165 / var(--vw-min) * 100vw);
    right: calc(145 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .introduction .deco__blurNoise.--2 {
        width: calc(26 / var(--vw-min) * 100vw);
        height: calc(26 / var(--vw-min) * 100vw);
        top: unset;
        right: calc(30 / var(--vw-min) * 100vw);
        bottom: calc(16 / var(--vw-min) * 100vw);
    }
}
.introduction .deco__blurNoise.--3 {
    width: calc(64 / var(--vw-min) * 100vw);
    height: calc(64 / var(--vw-min) * 100vw);
    top: calc(340 / var(--vw-min) * 100vw);
    right: calc(450 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .introduction .deco__blurNoise.--3 {
        width: calc(40 / var(--vw-min) * 100vw);
        height: calc(40 / var(--vw-min) * 100vw);
        top: unset;
        right: unset;
        bottom: calc(120 / var(--vw-min) * 100vw);
        left: 0;
    }
}
.introduction .deco__blurNoise.--4 {
    width: calc(560 / var(--vw-min) * 100vw);
    height: calc(560 / var(--vw-min) * 100vw);
    top: calc(140 / var(--vw-min) * 100vw);
    right: 0;
    opacity: .8;
}
@media screen and (max-width:768px){
    .introduction .deco__blurNoise.--4 {
        width: calc(280 / var(--vw-min) * 100vw);
        height: calc(280 / var(--vw-min) * 100vw);
        top: unset;
        right: unset;
        bottom: 0;
        left: 0;
    }
}
.introduction .deco__blurNoise.--5 {
    width: calc(50 / var(--vw-min) * 100vw);
    height: calc(50 / var(--vw-min) * 100vw);
    right: 0;
    bottom: calc(70 / var(--vw-min) * 100vw);
}
.introduction .deco__blurNoise.--6 {
    width: calc(76 / var(--vw-min) * 100vw);
    height: calc(76 / var(--vw-min) * 100vw);
    left: calc(50 / var(--vw-min) * 100vw);
    bottom: calc(64 / var(--vw-min) * 100vw);
}
/*-----------------------------------------------
 * STAFF&CAST
-------------------------------------------------*/
.staffCast {
    padding: calc(132 / var(--vw-min) * 100vw) 0 calc(80 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .staffCast {
        padding: calc(58 / var(--vw-min) * 100vw) 0 calc(36 / var(--vw-min) * 100vw);
    }
}
.staffCastWrap {
    width: calc(1253 / var(--vw-min) * 100vw);
    margin-left: auto;
}
@media screen and (max-width:768px){
    .staffCastWrap {
        width: 100%;
    }
}
.staffCast .cont-titWrap {
    width: calc(683 / var(--vw-min) * 100vw);
    height: calc(532 / var(--vw-min) * 100vw);
    position: relative;
    margin: calc(-213 / var(--vw-min) * 100vw) 0 0 auto;
    overflow: hidden;
}
@media screen and (max-width:768px){
    .staffCast .cont-titWrap {
        width: calc(227 / var(--vw-min) * 100vw);
        height: calc(176 / var(--vw-min) * 100vw);
        margin-top: calc(-70 / var(--vw-min) * 100vw);
    }
}
.staffCast .cont-tit {
    width: calc(771 / var(--vw-min) * 100vw);
    height: calc(532 / var(--vw-min) * 100vw);
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/common/tit/staffCast.svg)no-repeat right/cover;
}
@media screen and (max-width:768px){
    .staffCast .cont-tit {
        width: calc(255 / var(--vw-min) * 100vw);
        height: calc(176 / var(--vw-min) * 100vw);
    }
}
.staffCastCont {
    position: relative;
    padding: calc(100 / var(--vw-min) * 100vw) 0 calc(184 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .staffCastCont {
        padding: calc(34 / var(--vw-min) * 100vw) 0 calc(56 / var(--vw-min) * 100vw);
    }
}
.staffCastCont::before {
    content: "";
    width: calc(880 / var(--vw-min) * 100vw);
    height: calc(100% + calc(72 / var(--vw-min) * 100vw));
    display: block;
    position: absolute;
    top: calc(-72 / var(--vw-min) * 100vw);
    right: 0;
    z-index: -3;
    background-color: var(--color-grayDDE);
    opacity: .3;
}
@media screen and (max-width:768px){
    .staffCastCont::before {
        width: calc(327 / var(--vw-min) * 100vw);
        height: calc(100% + calc(22 / var(--vw-min) * 100vw));
        top: calc(-22 / var(--vw-min) * 100vw);
    }
}
.staffCastBox {
    width: calc(1200 / var(--vw-min) * 100vw);
    display: flex;
    justify-content: space-between;
}
@media screen and (max-width:768px){
    .staffCastBox {
        width: 100%;
        flex-direction: column;
        justify-content: left;
        padding: 0 calc(20 / var(--vw-min) * 100vw);
    }
}
.staffCastBox.--cast {
    padding-top: calc(136 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .staffCastBox.--cast {
        padding-top: calc(48 / var(--vw-min) * 100vw);
    }
}
.staffCast__tit {
    font-size: calc(68 / var(--vw-min) * 100vw);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.952px;
    flex-shrink: 0;
}
@media screen and (max-width:768px){
    .staffCast__tit {
        font-size: calc(36 / var(--vw-min) * 100vw);
    }
}
.staffCast__lists {
    width: calc(920 / var(--vw-min) * 100vw);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: calc(56 / var(--vw-min) * 100vw) calc(52 / var(--vw-min) * 100vw);
    padding-top: calc(6 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .staffCast__lists {
        width: calc(335 / var(--vw-min) * 100vw);
        gap: calc(32 / var(--vw-min) * 100vw) 0;
        padding-top: calc(24 / var(--vw-min) * 100vw);
    }
}
.staffCast__item {
    width: calc((100% - calc(104 / var(--vw-min) * 100vw)) / 3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
@media screen and (max-width:768px){
    .staffCast__item.--w100 {
        width: 100%;
    }
    .staffCast__item {
        width: calc(100% / 2);
    }
}
.staffCast__dt {
    font-size: calc(16 / var(--vw-min) * 100vw);
    font-weight: 400;
    line-height: 1.375;
    letter-spacing: 0.48px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: calc(10 / var(--vw-min) * 100vw);
    margin-bottom: calc(12 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .staffCast__dt {
        font-size: calc(13 / var(--vw-min) * 100vw);
        gap: 0;
        margin-bottom: calc(8 / var(--vw-min) * 100vw);
    }
}
.staffCast__dt span {
    flex-shrink: 0;
}
.staffCast__dt::after {
    content: "";
    width: 100%;
    height: calc(1 / var(--vw-min) * 100vw);
    display: block;
    background-color: var(--color-black292);
}
@media screen and (max-width:768px){
    .staffCast__dt::after {
        content: unset;
    }
}
.staffCast__dd {
    font-size: calc(20 / var(--vw-min) * 100vw);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.8px;
}
@media screen and (max-width:768px){
    .staffCast__dd {
        font-size: calc(15 / var(--vw-min) * 100vw);
    }
}
.staffCast__dd.--comment {
    width: calc(23 / var(--vw-min) * 100vw);
    height: calc(17 / var(--vw-min) * 100vw);
    display: block;
    margin-left: calc(7 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .staffCast__dd.--comment {
        width: calc(21 / var(--vw-min) * 100vw);
        height: calc(15 / var(--vw-min) * 100vw);
        margin-left: calc(8 / var(--vw-min) * 100vw);
    }
}
.staffCast__dd.--small {
    font-size: calc(16 / var(--vw-min) * 100vw);
    text-indent: -0.6em;
    margin-top: 0.2em;
    order: 2;
    text-wrap: nowrap;
}
.commentBtn,
.commentLink {
    width: 100%;
    height: 100%;
    display: block;
    background: url(../img/common/deco/commentLink.svg)no-repeat center/contain;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-default);
}
@media (hover: hover) and (pointer: fine){
    .commentBtn:hover,
    .commentLink:hover {
        transform: scale(1.12);
    }
}
/**
* deco
**/
.staffCast .deco__window {
    width: calc(796 / var(--vw-min) * 100vw);
    height: calc(381 / var(--vw-min) * 100vw);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -4;
    overflow: hidden; 
    pointer-events: none;
}
@media screen and (max-width:768px){
    .staffCast .deco__window {
        width: calc(290 / var(--vw-min) * 100vw);
        height: calc(263 / var(--vw-min) * 100vw);
        top: calc(-100 / var(--vw-min) * 100vw);
    }
}
.staffCast .deco__window::before {
    content: "";
    width: calc(1036 / var(--vw-min) * 100vw);
    height: calc(680 / var(--vw-min) * 100vw);
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    background: url(../img/common/deco/window.png)no-repeat right top/cover;
}
@media screen and (max-width:768px){
    .staffCast .deco__window::before {
        width: calc(488 / var(--vw-min) * 100vw);
        height: calc(320 / var(--vw-min) * 100vw);
    }
}
.staffCast .deco__cord {
    width: calc(548 / var(--vw-min) * 100vw);
    height: calc(404 / var(--vw-min) * 100vw);
    position: absolute;
    top: calc(287 / var(--vw-min) * 100vw);
    left: calc(35 / var(--vw-min) * 100vw);
    z-index: -2;
    background: url(../img/common/deco/cord3.svg)no-repeat center/contain;
    pointer-events: none;
}
@media screen and (max-width:768px){
    .staffCast .deco__cord {
        width: calc(212 / var(--vw-min) * 100vw);
        height: calc(164 / var(--vw-min) * 100vw);
        top: calc(65 / var(--vw-min) * 100vw);
        left: calc(20 / var(--vw-min) * 100vw);
        transform: scale(-1,1);
    }
}
/*-----------------------------------------------
 * CHARACTER
-------------------------------------------------*/
.character {
    overflow: hidden;
    padding: calc(80 / var(--vw-min) * 100vw) 0 0 0;
}
@media screen and (max-width:768px){
    .character {
        padding: calc(36 / var(--vw-min) * 100vw) 0 calc(72 / var(--vw-min) * 100vw) 0;
    }
}
.character .cont-tit {
    font-size: calc(200 / var(--vw-min) * 100vw);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -2.8px;
}
@media screen and (max-width:768px){
    .character .cont-tit {
        font-size: calc(60 / var(--vw-min) * 100vw);
    }
}
.charaCont {
    position: relative;
    margin-top: calc(-100 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .charaCont {
        display: flex;
        flex-direction: column;
        margin-top: 0;
        padding-top: calc(56 / var(--vw-min) * 100vw);
    }
}
.charaSwiper {
    width: 100%;
    overflow: visible;
}
@media screen and (max-width:768px){
    .charaSwiper {
        order: 1;
    }
}
.chara__item {
    width: 100%;
    display: flex;
}
@media screen and (max-width:768px){
    .chara__item {
        flex-direction: column;
    }
}
.chara__imgWrap {
    width: calc(739 / var(--vw-min) * 100vw);
    padding-top: 52.7086%;/*720*/
    position: relative;
    margin-top: calc(-57 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .chara__imgWrap {
        width: 100%;
        padding-top: 97.3333%;
        margin-top: 0;
        border-bottom: calc(1 / var(--vw-min) * 100vw) solid var(--color-black292);

    }
}
.chara__img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    margin: auto;
}
.chara__img img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: contain;
    pointer-events: none;
}
.chara__face1 {
    width: calc(320 / var(--vw-min) * 100vw);
    height: calc(176 / var(--vw-min) * 100vw);
    position: absolute;
    top: calc(-110 / var(--vw-min) * 100vw);
    left: 0;
    transform: rotate(-16deg);
}
@media screen and (max-width:768px){
    .chara__face1 {
        width: calc(160 / var(--vw-min) * 100vw);
        height: calc(88 / var(--vw-min) * 100vw);
        top: calc(-74 / var(--vw-min) * 100vw);
    }
}
.chara__face2 {
    width: calc(320 / var(--vw-min) * 100vw);
    height: calc(160 / var(--vw-min) * 100vw);
    position: absolute;
    bottom: calc(32 / var(--vw-min) * 100vw);
    left: calc(522 / var(--vw-min) * 100vw);
    z-index: -2;
}
@media screen and (max-width:768px){
    .chara__face2 {
        width: calc(160 / var(--vw-min) * 100vw);
        height: calc(80 / var(--vw-min) * 100vw);
        top: calc(280 / var(--vw-min) * 100vw);
        right: calc(-40 / var(--vw-min) * 100vw);
        bottom: unset;
        left: unset;
    }
}
.chara__face1 img,
.chara__face2 img {
    width: 100%;
    pointer-events: none;
}
/**
* detail
**/
.chara__detailWrap {
    width: calc(100% - calc(739 / var(--vw-min) * 100vw));
    padding: calc(112 / var(--vw-min) * 100vw) calc(85 / var(--vw-min) * 100vw) 0 0;
}
@media screen and (max-width:768px){
    .chara__detailWrap {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: calc(40 / var(--vw-min) * 100vw) calc(20 / var(--vw-min) * 100vw) 0;
    }
}
.chara__nameWrap {
    display: flex;
    flex-direction: column;
    gap: calc(16 / var(--vw-min) * 100vw);
    margin-bottom: calc(32 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .chara__nameWrap {
        gap: calc(7 / var(--vw-min) * 100vw);
        margin-bottom: 0;
    }
}
.chara__name-en {
    font-size: calc(14 / var(--vw-min) * 100vw);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 6.72px;
}
@media screen and (max-width:768px){
    .chara__name-en {
        font-size: calc(11 / var(--vw-min) * 100vw);
    }
}
.chara__name-ja {
    font-size: calc(56 / var(--vw-min) * 100vw);
    font-weight: 500;
    line-height: 1.1429;
    letter-spacing: 4.48px;
}
@media screen and (max-width:768px){
    .chara__name-ja {
        font-size: calc(28 / var(--vw-min) * 100vw);
        font-weight: 700;
    }
}
.chara__cvWrap {
    display: flex;
    align-items: center;
    gap: calc(8 / var(--vw-min) * 100vw);
    padding: calc(24 / var(--vw-min) * 100vw) 0;
    border-top: calc(1 / var(--vw-min) * 100vw) solid rgba(0,0,0,.5);
    border-bottom: calc(1 / var(--vw-min) * 100vw) solid rgba(0,0,0,.5);
}
@media screen and (max-width:768px){
    .chara__cvWrap {
        gap: calc(6 / var(--vw-min) * 100vw);
        padding: 0;
        border: unset;
        margin-top: calc(24 / var(--vw-min) * 100vw);
    }
}
.chara__cv {
    font-size: calc(18 / var(--vw-min) * 100vw);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.252px;
}
@media screen and (max-width:768px){
    .chara__cv {
        font-size: calc(13 / var(--vw-min) * 100vw);
        letter-spacing: 0.182px;
    }
}
.chara__cvName {
    font-size: calc(20 / var(--vw-min) * 100vw);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 2.8px;
}
@media screen and (max-width:768px){
    .chara__cvName {
        font-size: calc(15 / var(--vw-min) * 100vw);
        letter-spacing: 1.2px;
    }
}
.chara__txt {
    font-size: calc(16 / var(--vw-min) * 100vw);
    font-weight: 400;
    line-height: 2.125;
    letter-spacing: 0.48px;
    padding-top: calc(36 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .chara__txt {
        font-size: calc(13 / var(--vw-min) * 100vw);
        width: 100%;
        padding: calc(20 / var(--vw-min) * 100vw) 0 calc(32 / var(--vw-min) * 100vw);
    }
}
.charaBg {
    width: 100%;
    height: calc(720 / var(--vw-min) * 100vw);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -3;
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
}
@media screen and (max-width:768px){
    .charaBg {
        width: 100%;
        height: calc(560 / var(--vw-min) * 100vw);
        position: absolute;
        top: calc(30 / var(--vw-min) * 100vw);
        bottom: unset;
        clip-path: unset;
        -webkit-mask: url(../img/common/bg/chara-s.svg)no-repeat center/contain;
        mask: url(../img/common/bg/chara-s.svg)no-repeat center/contain;
    }
}
.chara__item.--chara1 .charaBg {
    background-color: var(--color-pinkFFE);
}
.chara__item.--chara2 .charaBg {
    background-color: var(--color-blueDDF);
}
/**
* slide animation
**/
.chara__item .chara__img {
    opacity: 0;
    transition:
        opacity var(--dur-hero) var(--ease-default),
        transform var(--dur-hero) var(--ease-default);
    transform: translate3d(0, calc(24 / var(--vw-min) * 100vw), 0) scale(.98);
}
.chara__item .chara__face1 {
    opacity: 0;
    transition:
        opacity var(--dur-hero) var(--ease-default),
        transform var(--dur-hero) var(--ease-default);
    transform: translate3d(calc(-24 / var(--vw-min) * 100vw), calc(12 / var(--vw-min) * 100vw), 0) rotate(-20deg) scale(.96);
}
.chara__item .chara__face2 {
    opacity: 0;
    transition:
        opacity var(--dur-hero) var(--ease-default),
        transform var(--dur-hero) var(--ease-default);
    transform: translate3d(calc(24 / var(--vw-min) * 100vw), calc(12 / var(--vw-min) * 100vw), 0) scale(.96);
}
.chara__item .chara__nameWrap,
.chara__item .chara__cvWrap,
.chara__item .chara__txt {
    opacity: 0;
    transition:
        opacity var(--dur-hero) var(--ease-default),
        transform var(--dur-hero) var(--ease-default);
    transform: translate3d(0, calc(16 / var(--vw-min) * 100vw), 0);
}
.charaCont.--is-ani .chara__item.swiper-slide-active .chara__img {
    opacity: 1;
    transition-delay: 80ms;
    transform: translate3d(0, 0, 0) scale(1);
}
.charaCont.--is-ani .chara__item.swiper-slide-active .chara__face1 {
    opacity: 1;
    transition-delay: 240ms;
    transform: translate3d(0, 0, 0) rotate(-16deg) scale(1);
}
.charaCont.--is-ani .chara__item.swiper-slide-active .chara__face2 {
    opacity: 1;
    transition-delay: 320ms;
    transform: translate3d(0, 0, 0) scale(1);
}
.charaCont.--is-ani .chara__item.swiper-slide-active .chara__nameWrap {
    opacity: 1;
    transition-delay: 400ms;
    transform: translate3d(0, 0, 0);
}
.charaCont.--is-ani .chara__item.swiper-slide-active .chara__cvWrap {
    opacity: 1;
    transition-delay: 480ms;
    transform: translate3d(0, 0, 0);
}
.charaCont.--is-ani .chara__item.swiper-slide-active .chara__txt {
    opacity: 1;
    transition-delay: 560ms;
    transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
    .chara__item .chara__img,
    .chara__item .chara__face2,
    .chara__item .chara__nameWrap,
    .chara__item .chara__cvWrap,
    .chara__item .chara__txt {
        opacity: 1;
        transition: none;
        transform: none;
    }
    .chara__item .chara__face1 {
        opacity: 1;
        transition: none;
        transform: rotate(-16deg);
    }
}
/**
* thumb
**/
.swiper-pagination-bullets.swiper-pagination-horizontal.chara__thumbLists {
    width: calc(544 / var(--vw-min) * 100vw);
    display: flex;
    flex-wrap: wrap;
    gap: calc(8 / var(--vw-min) * 100vw);
    position: relative;
    bottom: unset;
    left: unset;
    z-index: 1;
    margin: 0 calc(83 / var(--vw-min) * 100vw) 0 auto;
}
@media screen and (max-width:768px){
    .swiper-pagination-bullets.swiper-pagination-horizontal.chara__thumbLists {
        width: 100%;
        gap: calc(1 / var(--vw-min) * 100vw);
        order: 2;
        margin: 0;
        padding: 0 calc(20 / var(--vw-min) * 100vw);
    }
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.chara__thumbItem {
    width: calc((100% - calc(32 / var(--vw-min) * 100vw)) / 5);
    height: 100%;
    display: block!important;
    margin: 0;
    border-radius: unset;
    opacity: 1;
    cursor: pointer;
    background-color: var(--color-grayDDE);
    transition: var(--dur-fast) var(--ease-default);
    overflow: hidden;
}
@media screen and (max-width:768px){
    .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.chara__thumbItem {
        width: calc((100% - calc(5 / var(--vw-min) * 100vw)) / 6);
    }
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.chara__thumbItem img {
    width: 100%;
    pointer-events: none;
    transition: var(--dur-fast) var(--ease-default);
}
/**
* active
**/
.chara__thumbLists .chara__thumbItem:nth-child(1).swiper-pagination-bullet-active {
    background-color: var(--color-pinkFFE);
}
.chara__thumbLists .chara__thumbItem:nth-child(2).swiper-pagination-bullet-active {
    background-color: var(--color-blueDDF);
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.chara__thumbItem.swiper-pagination-bullet-active img {
    -webkit-filter:grayscale(100%);
    filter:grayscale(100%);
}
@media (hover: hover) and (pointer: fine){
    .chara__thumbItem:hover {
        transform: scale(1.05);
    }
}
/**
* deco
**/
.character .deco__triangle1 {
    width: calc(48 / var(--vw-min) * 100vw);
    height: calc(28 / var(--vw-min) * 100vw);
    position: absolute;
    top: calc(100 / var(--vw-min) * 100vw);
    left: calc(620 / var(--vw-min) * 100vw);
    z-index: 2;
    -webkit-mask: url(../img/common/deco/triangle4.svg)no-repeat center/contain;
    mask: url(../img/common/deco/triangle4.svg)no-repeat center/contain;
    background-color: var(--color-black292);
}
@media screen and (max-width:768px){
    .character .deco__triangle1 {
        width: calc(27 / var(--vw-min) * 100vw);
        height: calc(16 / var(--vw-min) * 100vw);
        top: calc(-9 / var(--vw-min) * 100vw);
        left: unset;
        right: calc(20 / var(--vw-min) * 100vw);
    }
}
.character .deco__triangle2 {
    width: calc(40 / var(--vw-min) * 100vw);
    height: calc(24 / var(--vw-min) * 100vw);
    position: absolute;
    top: calc(276 / var(--vw-min) * 100vw);
    left: calc(32 / var(--vw-min) * 100vw);
    z-index: 2;
    -webkit-mask: url(../img/common/deco/triangle5.svg)no-repeat center/contain;
    mask: url(../img/common/deco/triangle5.svg)no-repeat center/contain;
    background-color: var(--color-black292);
}
@media screen and (max-width:768px){
    .character .deco__triangle2 {
        width: calc(27 / var(--vw-min) * 100vw);
        height: calc(16 / var(--vw-min) * 100vw);
        top: calc(90 / var(--vw-min) * 100vw);
        left: 0;
    }
}
.character .deco__triangle3 {
    width: calc(40 / var(--vw-min) * 100vw);
    height: calc(24 / var(--vw-min) * 100vw);
    position: absolute;
    bottom: calc(40 / var(--vw-min) * 100vw);
    left: calc(63 / var(--vw-min) * 100vw);
    z-index: 2;
    -webkit-mask: url(../img/common/deco/triangle6.svg)no-repeat center/contain;
    mask: url(../img/common/deco/triangle6.svg)no-repeat center/contain;
    background-color: var(--color-black292);
}
@media screen and (max-width:768px){
    .character .deco__triangle3 {
        width: calc(28 / var(--vw-min) * 100vw);
        height: calc(16 / var(--vw-min) * 100vw);
        top: calc(362 / var(--vw-min) * 100vw);
        left: calc(12 / var(--vw-min) * 100vw);
    }
}
/*-----------------------------------------------
 * BOOKS
-------------------------------------------------*/
.books {
    padding: calc(160 / var(--vw-min) * 100vw) 0 calc(32 / var(--vw-min) * 100vw) calc(82 / var(--vw-min) * 100vw);
    background-image: var(--black-gradient);
    overflow: hidden;
    border-top: calc(1 / var(--vw-min) * 100vw) solid var(--color-black292);
    border-bottom: calc(1 / var(--vw-min) * 100vw) solid var(--color-black292);
}
@media screen and (max-width:768px){
    .books {
        padding: calc(65 / var(--vw-min) * 100vw) 0 calc(32 / var(--vw-min) * 100vw) calc(56 / var(--vw-min) * 100vw);
    }
}
.books::before {
    content: "";
    width: 100%;
    height: calc(32 / var(--vw-min) * 100vw);
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    background-color: var(--color-black292);
}
/**
* head
**/
.books__head {
    width: calc(82 / var(--vw-min) * 100vw);
    height: calc(100% - calc(32 / var(--vw-min) * 100vw));
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    border-right: calc(1 / var(--vw-min) * 100vw) solid var(--color-black292);
    background-color: #fff;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.booksWrap {
    position: relative;
    z-index: 1;
}
@media screen and (max-width:768px){
    .books__head {
        width: calc(56 / var(--vw-min) * 100vw);
    }
}
.books__headIn {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: calc(82 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .books__headIn {
        padding-top: calc(42 / var(--vw-min) * 100vw);
    }
}
.books__head::before {
    content: "";
    width: 100%;
    height: calc(4 / var(--vw-min) * 100vw);
    display: block;
    position: absolute;
    top: calc(9 / var(--vw-min) * 100vw);
    left: 0;
    background-color: var(--color-blue7EB);
}
.books__head::after {
    content: "";
    width: 100%;
    height: calc(2 / var(--vw-min) * 100vw);
    display: block;
    position: absolute;
    top: calc(15 / var(--vw-min) * 100vw);
    left: 0;
    background-color: var(--color-blue7EB);
}
.books__headTit {
    font-size: calc(13 / var(--vw-min) * 100vw);
    font-weight: 600;
    line-height: 1.0769;
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: calc(8 / var(--vw-min) * 100vw);
    padding: calc(24 / var(--vw-min) * 100vw) 0 calc(12 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .books__headTit {
        font-size: calc(10 / var(--vw-min) * 100vw);
        bottom: calc(6 / var(--vw-min) * 100vw);
        padding: calc(24 / var(--vw-min) * 100vw) 0 calc(16 / var(--vw-min) * 100vw);
    }
}
.books__headTit::before,
.books__headTit::after {
    content: "";
    width: 100%;
    display: block;
    position: absolute;
    background-color: var(--color-blue7EB);
}
.books__headTit::before {
    height: calc(16 / var(--vw-min) * 100vw);
    top: 0;
}
@media screen and (max-width:768px){
    .books__headTit::before {
        height: calc(12 / var(--vw-min) * 100vw);
    }
}
.books__headTit::after {
    height: calc(4 / var(--vw-min) * 100vw);
    bottom: 0;
}
.books__watermark {
    font-size: calc(22 / var(--vw-min) * 100vw);
    font-weight: 500;
    line-height: 1.2727;
    text-align: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.3em;
    padding-bottom: calc(52 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .books__watermark {
        font-size: calc(14 / var(--vw-min) * 100vw);
        padding-bottom: calc(36 / var(--vw-min) * 100vw);
    }
}
.books__watermark-name-ja {
    font-size: calc(32 / var(--vw-min) * 100vw);
    font-weight: 700;
    line-height: 2.5;
    text-align: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 1.8em;
}
@media screen and (max-width:768px){
    .books__watermark-name-ja {
        font-size: calc(20 / var(--vw-min) * 100vw);
    }
}
.books__watermark-name-en {
    font-size: calc(14 / var(--vw-min) * 100vw);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 6.72px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}
@media screen and (max-width:768px){
    .books__watermark-name-en {
        font-size: calc(11 / var(--vw-min) * 100vw);
    }
}
.books .cont-titWrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.books .cont-tit {
    font-size: calc(200 / var(--vw-min) * 100vw);
    color: var(--color-black505);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -2.8px;
}
@media screen and (max-width:768px){
    .books .cont-tit {
        font-size: calc(64 / var(--vw-min) * 100vw);
    }
}
.booksCont {
    position: relative;
    padding: calc(52 / var(--vw-min) * 100vw) 0 0 0;
}
@media screen and (max-width:768px){
    .booksCont {
        padding: calc(70 / var(--vw-min) * 100vw) 0 0 0;
    }
}
.booksCont::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: calc(-30 / var(--vw-min) * 100vw);
    margin: auto;
    background-image: var(--black-gradient);
    pointer-events: none;
}
@media screen and (max-width:768px){
    .booksCont::before {
        top: calc(-10 / var(--vw-min) * 100vw);
    }
}
.booksCont::after {
    content: "";
    width: 100%;
    height: calc(1 / var(--vw-min) * 100vw);
    display: block;
    position: absolute;
    top: calc(-30 / var(--vw-min) * 100vw);
    left: 0;
    margin: auto;
    background-color: var(--color-black505);
}
@media screen and (max-width:768px){
    .booksCont::after {
        top: calc(-10 / var(--vw-min) * 100vw);
    }
}
.booksSwiper {
    width: calc(100% - calc(60 / var(--vw-min) * 100vw));
    margin: 0 0 0 auto;
    overflow: visible;
}
@media screen and (max-width:768px){
    .booksSwiper {
        width: calc(100% - calc(24 / var(--vw-min) * 100vw));
    }
}
.books__lists {
    position: relative;
}
.books__item {
    width: calc(240 / var(--vw-min) * 100vw);
    margin-right: calc(48 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .books__item {
        width: calc(215 / var(--vw-min) * 100vw);
        margin-right: calc(20 / var(--vw-min) * 100vw);
    }
}
.books__link {
    width: 100%;
    height: 100%;
    display: block;
    text-decoration: none;
}
@media (hover: hover) and (pointer: fine){
    .books__link:hover .books__tit {
        color: #fff;
    }
    .books__link:hover .books__img::after {
        opacity: 1;
    }
    .books__link:hover .books__icon {
        background-color: var(--hover-accent);
    }
    .books__link:hover .books__icon::before {
        background-color: var(--color-black292);
    }
}
.books__img {
    position: relative;
    display: block;
}
.books__img::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background-color: color-mix(in srgb, var(--hover-accent) 22%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-default);
}
.books__img img {
    width: 100%;
    pointer-events: none;
}
.books__tit {
    font-size: calc(16 / var(--vw-min) * 100vw);
    color: rgba(255,255,255,.8);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: calc(18 / var(--vw-min) * 100vw);
    transition: color var(--dur-fast) var(--ease-default);
}
@media screen and (max-width:768px){
    .books__tit {
        font-size: calc(14 / var(--vw-min) * 100vw);
        margin-bottom: calc(12 / var(--vw-min) * 100vw);
    }
}
.books__icon {
    width: calc(28 / var(--vw-min) * 100vw);
    height: calc(28 / var(--vw-min) * 100vw);
    display: block;
    position: relative;
    border-radius: 50%;
    background-color: rgba(255,255,255,.2);
    margin-left: calc(10 / var(--vw-min) * 100vw);
    transition: background-color var(--dur-fast) var(--ease-default);
}
@media screen and (max-width:768px){
    .books__icon {
        width: calc(25 / var(--vw-min) * 100vw);
        height: calc(25 / var(--vw-min) * 100vw);
    }
}
.books__icon::before {
    content: "";
    width: calc(10 / var(--vw-min) * 100vw);
    height: calc(8 / var(--vw-min) * 100vw);
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
    -webkit-mask: url(../img/common/deco/blank.svg)no-repeat center/contain;
    mask: url(../img/common/deco/blank.svg)no-repeat center/contain;
    background-color: rgba(255,255,255,.5);
    transition: background-color var(--dur-fast) var(--ease-default);
}
@media screen and (max-width:768px){
    .books__icon::before {
        width: calc(9 / var(--vw-min) * 100vw);
        height: calc(7 / var(--vw-min) * 100vw);
    }
}
.books__arrowWrap {
	position: absolute;
	top: calc(-110 / var(--vw-min) * 100vw);
	left: calc(60 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .books__arrowWrap {
        top: calc(10 / var(--vw-min) * 100vw);
        left: calc(23 / var(--vw-min) * 100vw);
    }
}
.books__line {
    width: 100%;
    height: calc(2 / var(--vw-min) * 100vw);
    position: absolute;
    bottom: calc(80 / var(--vw-min) * 100vw);
    left: 0;
    z-index: 1;
    background-image: linear-gradient(180deg, #D3D3D3 0%, #AFAFAF 100%);
    pointer-events: none;
}
.titSlider {
    position: relative;
    padding: calc(95 / var(--vw-min) * 100vw) 0 calc(125 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .titSlider {
        padding: calc(30 / var(--vw-min) * 100vw) 0 calc(37 / var(--vw-min) * 100vw);
    }
}
.titSlider::before {
    content: "";
    width: 100%;
    height: calc(259 / var(--vw-min) * 100vw);
    display: block;
    -webkit-mask: url(../img/common/deco/titSlider.svg)repeat-x left/calc(2500 / var(--vw-min) * 100vw) calc(259 / var(--vw-min) * 100vw);
    mask: url(../img/common/deco/titSlider.svg)repeat-x left/calc(2500 / var(--vw-min) * 100vw) calc(259 / var(--vw-min) * 100vw);
    background-color: var(--color-grayDDE);
    animation: cont__slider 25s linear reverse infinite;
    animation-play-state: paused;
}
.titSlider.--is-ani-play::before {
    animation-play-state: running;
}
@keyframes cont__slider {
	0%{
		-webkit-mask-position: 0 center;
		mask-position: 0 center;
	}
	100%{
		-webkit-mask-position: calc(2500 / var(--vw-min) * 100vw) center;
		mask-position: calc(2500 / var(--vw-min) * 100vw) center;
	}
}
@media screen and (max-width:768px){
    .titSlider::before {
        height: calc(97 / var(--vw-min) * 100vw);
        -webkit-mask-size: calc(936 / var(--vw-min) * 100vw) calc(97 / var(--vw-min) * 100vw);
        mask-size: calc(936 / var(--vw-min) * 100vw) calc(97 / var(--vw-min) * 100vw);
    }
    @keyframes cont__slider {
        0%{
            -webkit-mask-position: 0 center;
            mask-position: 0 center;
        }
        100%{
            -webkit-mask-position: calc(936 / var(--vw-min) * 100vw) center;
            mask-position: calc(936 / var(--vw-min) * 100vw) center;
        }
    }
}