@charset "UTF-8";

/* ******************************************************************

    --style.css--

    1. Layout setting
    2. Hero
    3. Content
    4. Modal

****************************************************************** */


/*==================================================================
    1. Layout setting
===================================================================*/
.original-player {
    font: 13px/1.231 Verdana, Arial, sans-serif;
    color: #000;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-feature-settings: 'palt'1;
    font-variant-ligatures: none;
}

.original-player img {
    vertical-align: top;
}

.original-player .js-reveals,
.original-player .js-reveals--left,
.original-player .js-reveals--right {
    visibility: hidden;
}

#footer_wrap .btnMainpage,
#footer_wrap .section05,
#footer_wrap .section07 {
    display: none;
}

html,
body {
    min-width: initial;
}

#contents {
    min-width: initial;
}

@media all and (min-width:737px) {
    .u-hide-pc-tb {
        display: none !important;
    }
}

@media screen and (max-width:736px) {
    .u-hide-sp {
        display: none !important;
    }
}

#overlay {
    display: none;
    position: fixed;
    top: -100px;
    left: 0;
    z-index: 11;
    width: 100%;
    height: 200%;
    background-color: rgba(0, 0, 0, 0.7);
}

.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 5%;
    right: 5%;
    z-index: 12;
    width: 90%;
    max-width: 640px;
    margin: auto;
    margin-top: -180px;
    text-align: center;
    background: none;
    font-size: 13px;
    line-height: 16px;
    border: none;
}

#video02.modal {
    margin-top: -180px;
}

.modal .videoBlock {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
}

.modal .videoBlock iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.modal.notify {
    max-width: 300px;
    margin-top: -65px;
    padding: 20px 40px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 14px;
}

.modal.notify .btnCloseModal {
    display: inline-block;
    margin-top: 38px;
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
}

.modal.notify .btnCloseModal:hover {
    color: #ff0;
}

/*==================================================================
    2. Hero
===================================================================*/
@media all and (min-width:737px) {
    .main-hero {}

    .main-hero-content {
        position: relative;
        background: url(/original-player/img/bg_hero01.png) no-repeat center center;
        background-size: cover;
        overflow: hidden;
    }

    .main-hero-content::before {
        content: '';
        display: block;
        padding-top: calc(716 / 1366 * 100%);
    }

    .main-hero-content::after {
        content: '';
        position: absolute;
        top: 0;
        left: calc(1075 / 1366 * 100%);
        width: calc(709 / 1366 * 100%);
        margin-top: calc(146 / 1366 * 100%);
        margin-left: calc(-660 * 1388 / 1395 / 1366 / 2 * 100%);
        padding-top: calc(848 / 1366 * 100%);
        background: url(/original-player/img/bg_hero02.png) no-repeat center center;
        background-size: contain;
        mix-blend-mode: screen;
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
        transition: all 0.6s ease-out 1.2s;
    }

    .is-active .main-hero-content::after {
        opacity: 1;
    }

    .main-hero-content-bg01 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .main-hero-content-bg01::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(/original-player/img/bg_hero01_t.png) no-repeat center top;
        background-size: cover;
        transition: all 0.45s ease-out;
    }

    .is-active .main-hero-content-bg01::before {
        height: 0;
    }

    .main-hero-content-bg01::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(/original-player/img/bg_hero01_b.png) no-repeat center bottom;
        background-size: cover;
        transition: all 0.45s ease-out;
    }

    .is-active .main-hero-content-bg01::after {
        height: 0;
    }

    .main-hero-content-bg02 {
        display: none;
    }

    .main-hero-content__inner {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .main-hero-head {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        margin-bottom: calc(49 / 1366 * 100%);
        text-align: center;
    }

    .main-hero-head__label {
        display: block;
        margin: 0 auto;
    }

    .main-hero-head__label:nth-child(1) {
        width: calc(352 / 1366 * 100%);
        filter: drop-shadow(calc(4 / 1366 * 100vw) calc(4 / 1366 * 100vw) calc(16 / 1366 * 100vw) rgba(0, 0, 0, .4));
        opacity: 0;
        transform: scale(4);
        transition: all 0.45s ease-out 0.45s;
        z-index: 1;
    }

    .is-active .main-hero-head__label:nth-child(1) {
        opacity: 1;
        transform: scale(1);
    }

    .main-hero-head__label:nth-child(2) {
        width: calc(660 / 1366 * 100%);
        margin-top: calc(18 / 1366 * 100%);
        filter: drop-shadow(calc(4 / 1366 * 100vw) calc(4 / 1366 * 100vw) calc(16 / 1366 * 100vw) rgba(0, 0, 0, .4));
        opacity: 0;
        transform: translate3d(-100vw, 0, 0);
        transition: all 0.45s ease-out 0.9s;
    }

    .is-active .main-hero-head__label:nth-child(2) {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    .main-hero-body {}

    .main-hero-img {
        position: absolute;
        bottom: 0;
        right: 0;
        width: calc(185 / 1366 * 100%);
        margin-bottom: calc(-55 / 1366 * 100%);
        margin-right: calc(173 / 1366 * 100%);
        text-align: center;
        opacity: 0;
        transform: translate3d(0, 100%, 0);
        transition: all 0.6s ease-out 1.2s;
    }

    .is-active .main-hero-img {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    .main-hero-img__label {
        display: block;
        vertical-align: top;
        filter: drop-shadow(calc(5 / 1366 * 100vw) calc(5 / 1366 * 100vw) 0 #000);
    }

    .main-hero-img__caption {
        position: absolute;
        top: 0;
        right: 0;
        margin-top: calc(60 / 185 * 100%);
        margin-right: calc(calc(-20 / 185 * 100%) - calc(12 * 5 / 1366 * 100vw));
        line-height: 1.5;
        /* 18/12 */
        font-size: calc(12 / 1366 * 100vw);
        text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
    }

    .main-hero-bottom {
        padding-top: 38px;
        padding-bottom: 39px;
        background: #000;
    }

    .main-hero-bottom__inner {
        max-width: calc(1000px + 160px);
        margin: 0 auto;
        padding-left: 80px;
        padding-right: 80px;
    }

    .main-hero-bnr {}

    .main-hero-bnr-media {
        text-align: center;
    }

    .main-hero-bnr-media__parts:first-child {
        width: calc(623 / 1000 * 100%);
        margin: 0 auto;
    }

    .main-hero-bnr-media__parts+.main-hero-bnr-media__parts {
        width: calc(996 / 1000 * 100%);
        margin: 0 auto;
        margin-top: calc(24 / 1000 * 100%);
    }

    .main-hero-bnr-list {}

    .main-hero-bnr-list__item {}

    .main-hero-bnr__label {
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 100%;
    }

    .main-hero-bnr-btn {}

    .main-hero-bnr-btn__label {
        display: inline-block;
        vertical-align: top;
    }

    .main-hero-bnr-btn a .main-hero-bnr-btn__label {
        position: absolute;
        top: 0;
        left: 0;
    }

    .main-hero-bnr-btn a:nth-child(1) .main-hero-bnr-btn__label {
        width: calc(104 / 623 * 100%);
        margin-top: calc(19 / 623 * 100%);
        margin-left: calc(326 / 623 * 100%);
        padding-top: calc(38 / 623 * 100%);
    }

    .main-hero-bnr-btn a:nth-child(2) .main-hero-bnr-btn__label {
        width: calc(126 / 623 * 100%);
        margin-top: calc(19 / 623 * 100%);
        margin-left: calc(438 / 623 * 100%);
        padding-top: calc(38 / 623 * 100%);
    }

    .main-hero-bnr-ico {
        position: absolute;
        top: 0;
        left: 0;
        width: calc(51 / 623 * 100%);
        margin-top: calc(13 / 623 * 100%);
        margin-left: calc(63 / 623 * 100%);
    }

    .main-hero-bnr .slick-prev {
        position: absolute;
        top: 50%;
        left: 0;
        width: calc(28 / 996 * 100%);
        margin: 0;
        margin-left: calc(-41 / 996 * 100%);
        padding: 0;
        padding-top: calc(41 / 996 * 100%);
        border: none;
        background: url(/original-player/img/ico_slide_arw01_prev.png) no-repeat center center;
        background-size: contain;
        font-size: 0;
        cursor: pointer;
        transform: translate3d(0, -50%, 0);
        z-index: 1;
    }

    .main-hero-bnr .slick-next {
        position: absolute;
        top: 50%;
        right: 0;
        width: calc(28 / 996 * 100%);
        margin: 0;
        margin-right: calc(-41 / 996 * 100%);
        padding: 0;
        padding-top: calc(41 / 996 * 100%);
        border: none;
        background: url(/original-player/img/ico_slide_arw01_next.png) no-repeat center center;
        background-size: contain;
        font-size: 0;
        cursor: pointer;
        transform: translate3d(0, -50%, 0);
        z-index: 1;
    }

    .main-hero-bnr .slick-slider .main-hero-bnr__label {
        width: auto;
        margin-left: calc(12 / 332 * 100%);
        margin-right: calc(12 / 332 * 100%);
        padding: calc(2 / 332 * 100%);
        background: #fff;
    }
}

@media all and (min-width:737px) and (max-width:1160px) {
    .main-hero-bottom {
        padding-top: calc(40 / 1160 * 100vw);
        padding-bottom: calc(45 / 1160 * 100vw);
    }

    .main-hero-bottom__inner {
        max-width: 100%;
        padding-left: calc(80 / 1160 * 100vw);
        padding-right: calc(80 / 1160 * 100vw);
    }
}

@media screen and (max-width:736px) {
    .main-hero {}

    .main-hero-content {
        position: relative;
        background: url(/original-player/img/bg_hero01_sp.png) no-repeat center center;
        background-size: cover;
        overflow: hidden;
    }

    .main-hero-content::before {
        content: '';
        display: block;
        padding-top: calc(1078 / 750 * 100vw);
    }

    .main-hero-content::after {
        content: '';
        position: absolute;
        top: 0;
        left: calc(832 / 750 * 100vw);
        width: calc(792 / 750 * 100vw);
        margin-top: calc(49 / 750 * 100vw);
        margin-left: calc(-699 * 1388 / 1395 / 750 / 2 * 100vw);
        padding-top: calc(948 / 750 * 100vw);
        background: url(/original-player/img/bg_hero02.png) no-repeat center center;
        background-size: contain;
        mix-blend-mode: screen;
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
        transition: all 0.6s ease-out 1.2s;
    }

    .is-active .main-hero-content::after {
        opacity: 1;
    }

    .main-hero-content-bg01 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50%;
    }

    .main-hero-content-bg01::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(/original-player/img/bg_hero01_t01_sp.png) no-repeat center top;
        background-size: cover;
        transition: all 0.45s ease-out;
    }

    .is-active .main-hero-content-bg01::before {
        height: 0;
    }

    .main-hero-content-bg01::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(/original-player/img/bg_hero01_b01_sp.png) no-repeat center bottom;
        background-size: cover;
        transition: all 0.45s ease-out;
    }

    .is-active .main-hero-content-bg01::after {
        height: 0;
    }

    .main-hero-content-bg02 {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50%;
    }

    .main-hero-content-bg02::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(/original-player/img/bg_hero01_t02_sp.png) no-repeat center top;
        background-size: cover;
        transition: all 0.45s ease-out;
    }

    .is-active .main-hero-content-bg02::before {
        height: 0;
    }

    .main-hero-content-bg02::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(/original-player/img/bg_hero01_b02_sp.png) no-repeat center bottom;
        background-size: cover;
        transition: all 0.45s ease-out;
    }

    .is-active .main-hero-content-bg02::after {
        height: 0;
    }

    .main-hero-content__inner {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .main-hero-head {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        margin-bottom: calc(457 / 750 * 100vw);
        text-align: center;
    }

    .main-hero-head__label {
        display: block;
        margin: 0 auto;
    }

    .main-hero-head__label:nth-child(1) {
        width: calc(411 / 750 * 100vw);
        filter: drop-shadow(calc(4/ 750 * 100vw) calc(4 / 750 * 100vw) calc(16 / 750 * 100vw) rgba(0, 0, 0, .4));
        opacity: 0;
        transform: scale(4);
        transition: all 0.45s ease-out 0.45s;
        z-index: 1;
    }

    .is-active .main-hero-head__label:nth-child(1) {
        opacity: 1;
        transform: scale(1);
    }

    .main-hero-head__label:nth-child(2) {
        width: calc(699 / 750 * 100vw);
        margin-top: calc(8 / 750 * 100vw);
        filter: drop-shadow(calc(4/ 750 * 100vw) calc(4 / 750 * 100vw) calc(16 / 750 * 100vw) rgba(0, 0, 0, .4));
        opacity: 0;
        transform: translate3d(-100vw, 0, 0);
        transition: all 0.45s ease-out 0.9s;
    }

    .is-active .main-hero-head__label:nth-child(2) {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    .main-hero-body {}

    .main-hero-img {
        position: absolute;
        bottom: 0;
        left: 0;
        width: calc(185 / 750 * 100vw);
        margin-bottom: calc(-51 / 750 * 100vw);
        margin-left: calc(445 / 750 * 100vw);
        text-align: center;
        opacity: 0;
        transform: translate3d(0, 100%, 0);
        transition: all 0.6s ease-out 1.2s;
    }

    .is-active .main-hero-img {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    .main-hero-img__label {
        display: block;
        vertical-align: top;
        filter: drop-shadow(calc(5 / 750 * 100vw) calc(5 / 750 * 100vw) 0 #000);
    }

    .main-hero-img__caption {
        position: absolute;
        top: 0;
        right: 0;
        margin-top: calc(27 / 750 * 100vw);
        margin-right: calc(calc(-60 / 750 * 100vw) - calc(18 * 2 / 750 * 100vw));
        line-height: 1.5;
        /* 18/12 */
        font-size: calc(18 / 750 * 100vw);
        text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
    }

    .main-hero-bottom {
        padding-top: calc(40 / 750 * 100vw);
        padding-bottom: calc(40 / 750 * 100vw);
        background: #000;
    }

    .main-hero-bottom__inner {
        padding-left: calc(40 / 750 * 100vw);
        padding-right: calc(40 / 750 * 100vw);
    }

    .main-hero-bnr {}

    .main-hero-bnr-media {}

    .main-hero-bnr-media__parts:first-child {
        margin: 0 calc(-1 / 750 * 100vw);
    }

    .main-hero-bnr-media__parts+.main-hero-bnr-media__parts {
        margin-top: calc(36 / 750 * 100vw);
    }

    .main-hero-bnr-list {
        margin: 0 calc(38.5 / 750 * 100vw);
    }

    .main-hero-bnr-list__item {}

    .main-hero-bnr__label {
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 100%;
    }

    .main-hero-bnr-btn {}

    .main-hero-bnr-btn+img {
        display: none;
    }

    .main-hero-bnr-btn__label {
        display: inline-block;
        vertical-align: top;
    }

    .main-hero-bnr-btn a .main-hero-bnr-btn__label {
        position: relative;
    }

    .main-hero-bnr-btn a .main-hero-bnr-btn__label::before {
        content: '';
        display: block;
        padding-top: calc(210 / 671 * 100%);
    }

    .main-hero-bnr-btn a:nth-child(1) .main-hero-bnr-btn__label {
        display: none !important;
        background: url(/fr/original-player/img/bnr_hero01_ios_sp.png) no-repeat center center;
        background-size: contain;
    }

    .iosStyle .main-hero-bnr-btn a:nth-child(1) .main-hero-bnr-btn__label {
        display: block !important;
    }

    .main-hero-bnr-btn a:nth-child(2) .main-hero-bnr-btn__label {
        display: block !important;
        background: url(/fr/original-player/img/bnr_hero01_android_sp.png) no-repeat center center;
        background-size: contain;
    }

    .iosStyle .main-hero-bnr-btn a:nth-child(2) .main-hero-bnr-btn__label {
        display: none !important;
    }

    .main-hero-bnr-ico {
        position: absolute;
        top: 0;
        left: 0;
        width: calc(148 / 750 * 100vw);
        margin-top: calc(31 / 750 * 100vw);
        margin-left: calc(99 / 750 * 100vw);
    }

    .main-hero-bnr .slick-prev {
        position: absolute;
        top: 50%;
        left: 0;
        width: calc(28 / 750 * 100vw);
        margin: 0;
        margin-left: calc(-38.5 / 750 * 100vw);
        padding: 0;
        padding-top: calc(41 / 750 * 100vw);
        border: none;
        background: url(/original-player/img/ico_slide_arw01_prev.png) no-repeat center center;
        background-size: contain;
        font-size: 0;
        cursor: pointer;
        transform: translate3d(0, -50%, 0);
        z-index: 1;
    }

    .main-hero-bnr .slick-next {
        position: absolute;
        top: 50%;
        right: 0;
        width: calc(28 / 750 * 100vw);
        margin: 0;
        margin-right: calc(-38.5 / 750 * 100vw);
        padding: 0;
        padding-top: calc(41 / 750 * 100vw);
        border: none;
        background: url(/original-player/img/ico_slide_arw01_next.png) no-repeat center center;
        background-size: contain;
        font-size: 0;
        cursor: pointer;
        transform: translate3d(0, -50%, 0);
        z-index: 1;
    }

    .main-hero-bnr .slick-slider .main-hero-bnr__label {
        width: auto;
        margin: 0 calc(10 / 750 * 100vw);
        padding: calc(4 / 750 * 100vw);
        background: #fff;
    }
}

/*==================================================================
    3. Content
===================================================================*/
@media all and (min-width:737px) {
    .main-content {}

    .main-sec01 {}

    .main-sec01-top {
        height: 419px;
        padding-top: 45px;
        background: url(/original-player/img/bg_sec01_01.png) no-repeat center top;
        background-size: cover;
    }

    .main-sec01-top__inner {
        max-width: calc(1000px + 160px);
        margin: 0 auto;
        padding-left: 80px;
        padding-right: 80px;
    }

    .main-sec01-head {
        text-align: center;
    }

    .main-sec01-head__label {
        display: inline-block;
        vertical-align: top;
        width: calc(222 / 1000 * 100%);
    }

    .main-sec01-body {
        margin-top: calc(5 / 1000 * 100%);
    }

    .main-sec01-lead {
        text-align: center;
        line-height: 2;
        /* 36/18 */
        font-size: 18px;
        font-weight: 900;
        color: #fff;
        text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000;
    }

    .main-sec01-content {}

    .main-chara {
        position: relative;
        height: 1612px;
        margin-top: -273px;
        padding-top: 265px;
        background: url(/original-player/img/bg_sec01_chara01.png) no-repeat center top;
        background-size: cover;
        overflow: hidden;
    }

    .main-chara::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding-top: 273px;
        background: url(/original-player/img/bg_sec01_line01.png) no-repeat center top;
        background-size: cover;
    }

    .main-chara:nth-child(2n) {
        height: 1592px;
        padding-top: 245px;
        background: url(/original-player/img/bg_sec01_chara02.png) no-repeat center top;
        background-size: cover;
    }

    .main-chara:nth-child(2n)::before {
        background: url(/original-player/img/bg_sec01_line02.png) no-repeat center top;
        background-size: cover;
    }

    .main-chara:last-child::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding-top: 273px;
        background: url(/original-player/img/bg_sec01_line02.png) no-repeat center bottom;
        background-size: cover;
    }

    .main-chara:nth-child(2n):last-child::after {
        background: url(/original-player/img/bg_sec01_line01.png) no-repeat center bottom;
        background-size: cover;
    }

    .main-chara__inner {
        position: relative;
        max-width: calc(1000px + 160px);
        margin: 0 auto;
        padding-left: 80px;
        padding-right: 80px;
        z-index: 1;
    }

    .main-chara-top {
        position: relative;
        margin-left: calc(427 / 1000 * 100%);
        z-index: 1;
    }

    .main-chara:nth-child(2n) .main-chara-top {
        margin-left: 0;
        margin-right: calc(427 / 1000 * 100%);
    }

    .main-chara-head {
        position: relative;
        padding-bottom: calc(8 / 573 * 100%);
        border-bottom: 2px solid #fff;
    }

    .main-chara-head-nickname {
        display: block;
    }

    .main-chara-head-nickname__label {
        display: inline-block;
        vertical-align: top;
        font-size: 14px;
        font-weight: 900;
        font-style: italic;
        color: #ffff3f;
        text-shadow: 0 0 3px #cd0102, 0 0 3px #cd0102, 0 0 3px #cd0102, 0 0 3px #cd0102, 0 0 3px #cd0102, 0 0 3px #cd0102, 0 0 3px #cd0102, 0 0 3px #cd0102, 0 0 3px #cd0102, 0 0 3px #cd0102,
            0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000;
    }

    .main-chara-head__label {
        display: inline-block;
        vertical-align: top;
        margin-top: calc(4 / 28 * 1em);
        font-size: 28px;
        font-weight: 900;
        color: #fff;
        text-shadow: 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c;
    }

    .main-chara-head-cv {
        position: absolute;
        bottom: 0;
        right: 0;
        width: calc(163 / 573 * 100%);
        margin-bottom: calc(73 / 573 * 100%);
        text-align: center;
        transform: translate3d(0, 100%, 0);
    }

    .main-chara-head-cv__label {
        display: inline-block;
        vertical-align: top;
        width: 100%;
    }

    .main-chara-head-cv__caption {
        position: absolute;
        bottom: 0;
        left: -50%;
        width: 200%;
        margin-bottom: calc(-4 / 16 * 1em);
        font-size: 16px;
        font-weight: 900;
        color: #fff;
        text-shadow: 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c;
        transform: translate3d(0, 100%, 0);
    }

    .main-chara-body {
        margin-top: calc(16 / 573 * 100%);
    }

    .main-chara-intro {}

    .main-chara-profile {}

    .main-chara-profile-desc {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        line-height: 1.875;
        /* 30/16 */
        font-size: 16px;
        color: #fff;
        text-shadow: 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c;
    }

    .main-chara-profile-txt {
        margin-top: calc(6 / 16 * 1em);
        line-height: 1.875;
        /* 30/16 */
        font-size: 16px;
        color: #fff;
        text-shadow: 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c;
    }

    .main-chara-download {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        margin-left: calc(128 / 573 * 100%);
        transform: translate3d(-100%, 0, 0);
    }

    .main-chara:nth-child(2n) .main-chara-download {
        left: auto;
        right: 0;
        margin-left: 0;
        margin-right: calc(128 / 573 * 100%);
        transform: translate3d(100%, 0, 0);
    }

    .main-chara-download-desc {}

    .main-chara-download-desc__term {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }

    .main-chara:nth-child(2n) .main-chara-download-desc__term {
        justify-content: flex-start;
    }

    .main-chara-download-desc__term__ico {
        width: calc(33 / 573 * 100%);
    }

    .main-chara-download-desc__term__label {
        margin-left: calc(12 / 573 * 100%);
        font-size: 16px;
        font-weight: 900;
        color: #fff;
        text-shadow: 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c;
    }

    .main-chara-download-desc__defin {
        margin-top: calc(12 / 573 * 100%);
    }

    .main-chara-download-list {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }

    .main-chara:nth-child(2n) .main-chara-download-list {
        justify-content: flex-start;
    }

    .main-chara-download-list__item {
        width: calc(90 / 573 * 100%);
        margin-left: calc(18 / 573 * 100%);
    }

    .main-chara-download-list__item:first-child {
        margin-left: 0;
    }

    .main-chara-download-img {}

    .main-chara-download-img__label {
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 100%;
        filter: drop-shadow(4px 4px 0 #000);
        margin-bottom: 4px;
    }

    .main-chara-download-img__label::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 2px solid #fff;
        box-sizing: border-box;
    }

    .main-chara-movie {
        margin-top: calc(45 / 573 * 100%);
    }

    .main-chara-movie-list {
        position: relative;
        margin: 0 calc(-10 / 573 * 100%) calc(10 / 573 * 100%);
    }

    .main-chara-movie-list::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: calc(166 / 593 * 100%);
        margin-top: calc(-38 / 593 * 100%);
        margin-left: calc(-48 / 593 * 100%);
        padding-top: calc(152 / 593 * 100%);
        background: url(/fr/original-player/img/ico_sec01_movie01.png) no-repeat center center;
        background-size: contain;
        z-index: 1;
        opacity: 0;
        transition: opacity 0.3s ease-out;
    }

    .main-chara-movie-list[data-ico="1"]::before {
        background: url(/fr/original-player/img/ico_sec01_movie01.png) no-repeat center center;
        background-size: contain;
        opacity: 1;
    }

    .main-chara-movie-list__item {}

    .main-chara-movie-thumb {
        position: relative;
        text-align: center;
        margin: 0 calc(10 / 593 * 100%) calc(10 / 593 * 100%);
    }

    .main-chara-movie-thumb a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .main-chara-movie-thumb__label {
        position: relative;
        display: inline-block;
        vertical-align: top;
        background: #fff;
        filter: drop-shadow(5px 5px 0 #000);
    }

    .main-chara-movie-thumb__label::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 10px solid #fff;
        box-sizing: border-box;
    }

    .main-chara-movie-thumb__caption {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        margin-bottom: calc(28 / 20 * 1em);
        text-align: center;
        font-size: 20px;
        font-weight: 900;
        color: #fff;
        text-shadow: 0 0 4px #cd0102, 0 0 4px #cd0102, 0 0 4px #cd0102, 0 0 4px #cd0102, 0 0 4px #cd0102, 0 0 4px #cd0102, 0 0 4px #cd0102, 0 0 4px #cd0102, 0 0 4px #cd0102, 0 0 4px #cd0102,
            0 0 6px #000, 0 0 6px #000, 0 0 6px #000, 0 0 6px #000, 0 0 6px #000, 0 0 6px #000, 0 0 6px #000, 0 0 6px #000, 0 0 6px #000, 0 0 6px #000;
    }

    .main-chara-movie-thumb-play__ico {
        position: absolute;
        top: 50%;
        left: 50%;
        width: calc(108 / 573 * 100%);
        transform: translate3d(-50%, -50%, 0);
    }

    .main-chara-movie .slick-prev {
        position: absolute;
        top: 50%;
        left: 0;
        width: calc(28 / 593 * 100%);
        margin: 0;
        margin-top: calc(-5 / 593 * 100%);
        margin-left: calc(-40 / 593 * 100%);
        padding: 0;
        padding-top: calc(41 / 593 * 100%);
        border: none;
        background: url(/original-player/img/ico_slide_arw01_prev.png) no-repeat center center;
        background-size: contain;
        font-size: 0;
        filter: drop-shadow(2px 2px 0 #000);
        cursor: pointer;
        transform: translate3d(0, -50%, 0);
        z-index: 1;
    }

    .main-chara-movie .slick-next {
        position: absolute;
        top: 50%;
        right: 0;
        width: calc(28 / 593 * 100%);
        margin: 0;
        margin-top: calc(-5 / 593 * 100%);
        margin-right: calc(-40 / 593 * 100%);
        padding: 0;
        padding-top: calc(41 / 593 * 100%);
        border: none;
        background: url(/original-player/img/ico_slide_arw01_next.png) no-repeat center center;
        background-size: contain;
        font-size: 0;
        filter: drop-shadow(2px 2px 0 #000);
        cursor: pointer;
        transform: translate3d(0, -50%, 0);
        z-index: 1;
    }

    .main-chara-movie .slick-dots {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        margin-bottom: calc(-40 / 593 * 100%);
        margin-left: calc(10 / 593 * 100%);
        margin-right: calc(10 / 593 * 100%);
        text-align: center;
    }

    .main-chara-movie .slick-dots li {
        display: inline-block;
        vertical-align: top;
        width: calc(30 / 573 * 100%);
        margin: 0 calc(5 / 573 * 100%);
    }

    .main-chara-movie .slick-dots button {
        width: 100%;
        margin: 0;
        padding: 0;
        padding-top: calc(30 / 30 * 100%);
        border: none;
        background: url(/original-player/img/ico_sec01_pager01.png) no-repeat center center;
        background-size: contain;
        font-size: 0;
        cursor: pointer;
    }

    .main-chara-movie .slick-dots .slick-active button {
        background: url(/original-player/img/ico_sec01_pager01_active.png) no-repeat center center;
        background-size: contain;
    }

    .main-chara-diagram {
        margin-top: calc(115 / 573 * 100%);
    }

    .main-chara-diagram-btn {
        text-align: right;
    }

    .main-chara:nth-child(2n) .main-chara-diagram-btn {
        text-align: left;
    }

    .main-chara-diagram-btn__label {
        display: inline-block;
        vertical-align: top;
        width: calc(406 / 573 * 100%);
    }

    .main-chara-content {}

    .main-chara-img {
        position: absolute;
        top: 0;
        right: 0;
        width: 1450px;
        margin-top: -265px;
        margin-right: 80px;
        text-align: center;
    }

    .main-chara:nth-child(2n) .main-chara-img {
        right: auto;
        left: 0;
        margin-top: -245px;
        margin-right: 0;
        margin-left: 80px;
    }

    .main-chara:nth-child(5) .main-chara-img {
        width: 1550px;
    }

    .main-chara-img-list {}

    .main-chara-img-list__item {}

    .main-chara-img__label {
        display: inline-block;
        vertical-align: top;
        width: 100%;
    }

    .main-chara-img-change {
        position: absolute;
        top: 0;
        left: 0;
        width: calc(62 / 1450 * 100%);
        margin: 0;
        margin-top: calc(280 / 1450 * 100%);
        margin-left: calc(379 / 1450 * 100%);
        padding: 0;
        border: none;
        background: no-repeat;
        cursor: pointer;
    }

    .main-chara:nth-child(2n) .main-chara-img-change {
        left: auto;
        right: 0;
        margin-left: 0;
        margin-right: calc(379 / 1450 * 100%);
    }

    .main-chara-img-change__label {
        display: inline-block;
        vertical-align: top;
        width: 100%;
    }

    .main-chara-bottom {
        position: relative;
        margin-top: calc(35 / 1000 * 100%);
        z-index: 1;
    }

    .main-chara-ss {}

    .main-chara-ss-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .main-chara:nth-child(2n) .main-chara-ss-list {
        justify-content: flex-end;
    }

    .main-chara-ss-list__item {
        width: calc(259 / 1000 * 100%);
        margin-left: calc(-5 / 1000 * 100%);
    }

    .main-chara-ss-list__item:nth-child(4n+1) {
        margin-left: 0;
    }

    .main-chara-ss-list__item:nth-child(n+5) {
        margin-top: calc(14 / 1000 * 100%);
    }

    .main-chara-ss-list__item:nth-child(4n+1),
    .main-chara-ss-list__item:nth-child(4n) {
        width: calc(248 / 1000 * 100%);
    }

    .main-chara-ss-img {}

    .main-chara-ss-img__label {
        display: inline-block;
        vertical-align: top;
        width: 100%;
        filter: drop-shadow(4px 4px 0 #38251e);
    }

    .main-aside {}

    .main-aside-content {
        margin-top: -273px;
        padding-top: 273px;
        padding-bottom: 47px;
        background: url(/fr/original-player/img/bg_aside01.png) no-repeat center top;
        background-size: cover;
    }

    .main-aside-content__inner {
        max-width: calc(1000px + 160px);
        margin: 0 auto;
        padding-left: 80px;
        padding-right: 80px;
    }

    .main-aside-bnr {
        text-align: center;
    }

    .main-aside-bnr__label {
        display: inline-block;
        vertical-align: top;
        width: calc(540 / 1000 * 100%);
        filter: drop-shadow(4px 4px 0 #000);
    }
}

@media all and (min-width:737px) and (max-width:1160px) {
    .main-sec01-top {
        height: calc(419 / 1160 * 100vw);
        padding-top: calc(45 / 1160 * 100vw);
    }

    .main-sec01-top__inner {
        max-width: 100%;
        padding-left: calc(80 / 1160 * 100vw);
        padding-right: calc(80 / 1160 * 100vw);
    }

    .main-sec01-lead {
        font-size: calc(18 / 1160 * 100vw);
    }

    .main-chara {
        height: calc(1612 / 1160 * 100vw);
        margin-top: calc(-273 / 1160 * 100vw);
        padding-top: calc(265 / 1160 * 100vw);
    }

    .main-chara::before {
        padding-top: calc(273 / 1160 * 100vw);
    }

    .main-chara:nth-child(2n) {
        height: calc(1592 / 1160 * 100vw);
        padding-top: calc(245 / 1160 * 100vw);
    }

    .main-chara:last-child::after {
        padding-top: calc(273 / 1160 * 100vw);
    }

    .main-chara__inner {
        max-width: 100%;
        padding-left: calc(80 / 1160 * 100vw);
        padding-right: calc(80 / 1160 * 100vw);
    }

    .main-chara-head-nickname__label {
        font-size: calc(14 / 1160 * 100vw);
    }

    .main-chara-head__label {
        font-size: calc(28 / 1160 * 100vw);
    }

    .main-chara-head-cv__caption {
        font-size: calc(16 / 1160 * 100vw);
    }

    .main-chara-profile-desc {
        font-size: calc(16 / 1160 * 100vw);
    }

    .main-chara-profile-txt {
        font-size: calc(16 / 1160 * 100vw);
    }

    .main-chara-movie-thumb__label::before {
        border: calc(10 / 1160 * 100vw) solid #fff;
    }

    .main-chara-movie-thumb__caption {
        font-size: calc(20 / 1160 * 100vw);
    }

    .main-chara-img {
        width: calc(1450 / 1160 * 100vw);
        margin-top: calc(-265 / 1160 * 100vw);
        margin-right: calc(80 / 1160 * 100vw);
    }

    .main-chara:nth-child(2n) .main-chara-img {
        margin-right: 0;
        margin-top: calc(-245 / 1160 * 100vw);
        margin-left: calc(80 / 1160 * 100vw);
    }

    .main-chara:nth-child(5) .main-chara-img {
        width: calc(1550 / 1160 * 100vw);
    }

    .main-aside-content {
        margin-top: calc(-273 / 1160 * 100vw);
        padding-top: calc(273 / 1160 * 100vw);
        padding-bottom: calc(47 / 1160 * 100vw);
    }

    .main-aside-content__inner {
        max-width: 100%;
        padding-left: calc(80 / 1160 * 100vw);
        padding-right: calc(80 / 1160 * 100vw);
    }
}

@media screen and (max-width:736px) {
    .main-content {}

    .main-sec01 {}

    .main-sec01-top {
        height: calc(560 / 750 * 100vw);
        padding-top: calc(50 / 750 * 100vw);
        background: url(/original-player/img/bg_sec01_01_sp.png) no-repeat center top;
        background-size: cover;
    }

    .main-sec01-top__inner {
        padding-left: calc(40 / 750 * 100vw);
        padding-right: calc(40 / 750 * 100vw);
    }

    .main-sec01-head {
        text-align: center;
    }

    .main-sec01-head__label {
        display: inline-block;
        vertical-align: top;
        width: calc(266 / 750 * 100vw);
    }

    .main-sec01-body {
        margin-top: calc(24 / 750 * 100vw);
    }

    .main-sec01-lead {
        text-align: center;
        line-height: 1.625;
        /* 52/32 */
        font-size: calc(32 / 750 * 100vw);
        font-weight: 900;
        color: #fff;
        text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000;
    }

    .main-sec01-content {}

    .main-chara {
        position: relative;
        height: calc(3120 / 750 * 100vw);
        margin-top: calc(-88 / 750 * 100vw);
        padding-top: calc(134 / 750 * 100vw);
        padding-bottom: calc(145 / 750 * 100vw);
        background: url(/original-player/img/bg_sec01_chara01_sp.png) no-repeat center top;
        background-size: cover;
        overflow: hidden;
    }

    .main-chara::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding-top: calc(88 / 750 * 100vw);
        background: url(/original-player/img/bg_sec01_line01_sp.png) no-repeat center top;
        background-size: cover;
    }

    .main-chara:nth-child(2n) {
        height: calc(3150 / 750 * 100vw);
        background: url(/original-player/img/bg_sec01_chara02_sp.png) no-repeat center top;
        background-size: cover;
    }

    .main-chara:nth-child(2n)::before {
        background: url(/original-player/img/bg_sec01_line02_sp.png) no-repeat center top;
        background-size: cover;
    }

    .main-chara:last-child::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding-top: calc(88 / 750 * 100vw);
        background: url(/original-player/img/bg_sec01_line02_sp.png) no-repeat center bottom;
        background-size: cover;
    }

    .main-chara:nth-child(2n):last-child::after {
        background: url(/original-player/img/bg_sec01_line01_sp.png) no-repeat center bottom;
        background-size: cover;
    }

    .main-chara__inner {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        padding-left: calc(40 / 750 * 100vw);
        padding-right: calc(40 / 750 * 100vw);
        z-index: 1;
    }

    .main-chara-top {
        position: relative;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        z-index: 1;
    }

    .main-chara-head {
        position: relative;
        padding-bottom: calc(16 / 750 * 100vw);
        border-bottom: 2px solid #fff;
    }

    .main-chara-head-nickname {
        display: block;
    }

    .main-chara-head-nickname__label {
        display: inline-block;
        vertical-align: top;
        font-size: calc(22 / 750 * 100vw);
        font-weight: 900;
        font-style: italic;
        color: #ffff3f;
        text-shadow: 0 0 3px #cd0102, 0 0 3px #cd0102, 0 0 3px #cd0102, 0 0 3px #cd0102, 0 0 3px #cd0102, 0 0 3px #cd0102, 0 0 3px #cd0102, 0 0 3px #cd0102, 0 0 3px #cd0102, 0 0 3px #cd0102,
            0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000;
    }

    .main-chara-head__label {
        display: inline-block;
        vertical-align: top;
        margin-top: calc(8 / 36 * 1em);
        font-size: calc(36 / 750 * 100vw);
        font-weight: 900;
        color: #fff;
        text-shadow: 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c;
    }

    .main-chara-head-cv {
        position: absolute;
        bottom: 0;
        right: 0;
        width: calc(217 / 750 * 100vw);
        margin-bottom: calc(101 / 750 * 100vw);
        text-align: center;
        transform: translate3d(0, 100%, 0);
    }

    .main-chara-head-cv__label {
        display: inline-block;
        vertical-align: top;
        width: 100%;
    }

    .main-chara-head-cv__caption {
        position: absolute;
        bottom: 0;
        left: -25%;
        width: 150%;
        margin-bottom: calc(-8 / 24 * 1em);
        font-size: calc(24 / 750 * 100vw);
        font-weight: 900;
        color: #fff;
        text-shadow: 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c;
        transform: translate3d(0, 100%, 0);
    }

    .main-chara-body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-top: calc(24 / 750 * 100vw);
    }

    .main-chara-intro {}

    .main-chara-profile {}

    .main-chara-profile-desc {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        line-height: 1.6666666667;
        /* 50/30 */
        font-size: calc(30 / 750 * 100vw);
        color: #fff;
        text-shadow: 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c;
    }

    .main-chara-profile-txt {
        margin-top: calc(15 / 30 * 1em);
        line-height: 1.6666666667;
        /* 50/30 */
        font-size: calc(30 / 750 * 100vw);
        color: #fff;
        text-shadow: 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c;
    }

    .main-chara-download {
        margin-top: calc(40 / 750 * 100vw);
        margin-right: calc(534 / 750 * 100vw);
    }

    .main-chara:nth-child(2n) .main-chara-download {
        margin-right: 0;
        margin-left: calc(534 / 750 * 100vw);
    }

    .main-chara-download-desc {}

    .main-chara-download-desc__term {
        text-align: center;
    }

    .main-chara-download-desc__term__ico {
        display: inline-block;
        vertical-align: top;
        width: calc(43 / 750 * 100vw);
    }

    .main-chara-download-desc__term__label {
        display: block;
        margin-top: calc(10 / 750 * 100vw);
        line-height: 1.4545454545;
        /* 32/22 */
        font-size: calc(22 / 750 * 100vw);
        font-weight: 900;
        color: #fff;
        text-shadow: 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c, 0 0 4px #003a5c;
    }

    .main-chara-download-desc__defin {
        margin-top: calc(16 / 750 * 100vw);
    }

    .main-chara-download-list {}

    .main-chara-download-list__item {
        margin-top: calc(24 / 750 * 100vw);
    }

    .main-chara-download-list__item:first-child {
        margin-left: 0;
    }

    .main-chara-download-img {
        margin-top: calc(24 / 750 * 100vw);
    }

    .main-chara-download-img__label {
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 100%;
        filter: drop-shadow(calc(4 / 750 * 100vw) calc(4 / 750 * 100vw) 0 #000);
    }

    .main-chara-download-img__label::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: calc(3 / 750 * 100vw) solid #fff;
        box-sizing: border-box;
    }

    .main-chara-movie {
        margin-bottom: calc(210 / 750 * 100vw);
    }

    .main-chara-movie-list {
        position: relative;
        margin: 0 calc(-10 / 750 * 100vw) calc(10 / 750 * 100vw);
        padding: 0 calc(38.5 / 750 * 100vw);
    }

    .main-chara-movie-list::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: calc(232 / 750 * 100vw);
        margin-top: calc(-94 / 750 * 100vw);
        margin-left: calc(-22 / 750 * 100vw);
        padding-top: calc(213 / 750 * 100vw);
        background: url(/fr/original-player/img/ico_sec01_movie01.png) no-repeat center center;
        background-size: contain;
        z-index: 1;
        opacity: 0;
        transition: opacity 0.3s ease-out;
    }

    .main-chara-movie-list[data-ico="1"]::before {
        background: url(/fr/original-player/img/ico_sec01_movie01.png) no-repeat center center;
        background-size: contain;
        opacity: 1;
    }

    .main-chara-movie-list__item {}

    .main-chara-movie-thumb {
        position: relative;
        text-align: center;
        margin: 0 calc(10 / 750 * 100vw) calc(10 / 750 * 100vw);
    }

    .main-chara-movie-thumb a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .main-chara-movie-thumb__label {
        position: relative;
        display: inline-block;
        vertical-align: top;
        background: #fff;
        filter: drop-shadow(5px 5px 0 #000);
    }

    .main-chara-movie-thumb__label::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: calc(10 / 750 * 100vw) solid #fff;
        box-sizing: border-box;
    }

    .main-chara-movie-thumb__caption {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        margin-bottom: calc(34 / 24 * 1em);
        text-align: center;
        font-size: calc(24 / 750 * 100vw);
        font-weight: 900;
        color: #fff;
        text-shadow: 0 0 4px #cd0102, 0 0 4px #cd0102, 0 0 4px #cd0102, 0 0 4px #cd0102, 0 0 4px #cd0102, 0 0 4px #cd0102, 0 0 4px #cd0102, 0 0 4px #cd0102, 0 0 4px #cd0102, 0 0 4px #cd0102,
            0 0 6px #000, 0 0 6px #000, 0 0 6px #000, 0 0 6px #000, 0 0 6px #000, 0 0 6px #000, 0 0 6px #000, 0 0 6px #000, 0 0 6px #000, 0 0 6px #000;
    }

    .main-chara-movie-thumb-play__ico {
        position: absolute;
        top: 50%;
        left: 50%;
        width: calc(121 / 750 * 100vw);
        transform: translate3d(-50%, -50%, 0);
    }

    .main-chara-movie .slick-prev {
        position: absolute;
        top: 50%;
        left: 0;
        width: calc(28 / 750 * 100vw);
        margin: 0;
        margin-top: calc(-5 / 750 * 100vw);
        padding: 0;
        padding-top: calc(41 / 750 * 100vw);
        border: none;
        background: url(/original-player/img/ico_slide_arw01_prev.png) no-repeat center center;
        background-size: contain;
        font-size: 0;
        filter: drop-shadow(calc(2 / 750 * 100vw) calc(2 / 750 * 100vw) 0 #000);
        cursor: pointer;
        transform: translate3d(0, -50%, 0);
        z-index: 1;
    }

    .main-chara-movie .slick-next {
        position: absolute;
        top: 50%;
        right: 0;
        width: calc(28 / 750 * 100vw);
        margin: 0;
        margin-top: calc(-5 / 750 * 100vw);
        padding: 0;
        padding-top: calc(41 / 750 * 100vw);
        border: none;
        background: url(/original-player/img/ico_slide_arw01_next.png) no-repeat center center;
        background-size: contain;
        font-size: 0;
        filter: drop-shadow(calc(2 / 750 * 100vw) calc(2 / 750 * 100vw) 0 #000);
        cursor: pointer;
        transform: translate3d(0, -50%, 0);
        z-index: 1;
    }

    .main-chara-movie .slick-dots {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        margin-bottom: calc(-60 / 750 * 100vw);
        margin-left: calc(10 / 750 * 100vw);
        margin-right: calc(10 / 750 * 100vw);
        text-align: center;
    }

    .main-chara-movie .slick-dots li {
        display: inline-block;
        vertical-align: top;
        width: calc(36 / 750 * 100vw);
        margin: 0 calc(9 / 750 * 100vw);
    }

    .main-chara-movie .slick-dots button {
        width: 100%;
        margin: 0;
        padding: 0;
        padding-top: calc(36 / 36 * 100%);
        border: none;
        background: url(/original-player/img/ico_sec01_pager01.png) no-repeat center center;
        background-size: contain;
        font-size: 0;
        cursor: pointer;
    }

    .main-chara-movie .slick-dots .slick-active button {
        background: url(/original-player/img/ico_sec01_pager01_active.png) no-repeat center center;
        background-size: contain;
    }

    .main-chara-diagram {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    .main-chara-diagram-btn {
        text-align: center;
    }

    .main-chara-diagram-btn__label {
        display: inline-block;
        vertical-align: top;
        width: calc(564 / 750 * 100vw);
    }

    .main-chara-content {}

    .main-chara-img {
        position: absolute;
        top: 0;
        left: 0;
        width: calc(1660 / 750 * 100vw);
        margin-top: calc(568 / 750 * 100vw);
        margin-left: calc(-282 / 750 * 100vw);
        text-align: center;
    }

    .main-chara:nth-child(2n) .main-chara-img {
        left: auto;
        right: 0;
        margin-left: 0;
        margin-right: calc(-282 / 750 * 100vw);
    }

    .main-chara:nth-child(5) .main-chara-img {
        width: calc(1774 / 750 * 100vw);
    }

    .main-chara-img-list {}

    .main-chara-img-list__item {}

    .main-chara-img__label {
        display: inline-block;
        vertical-align: top;
        width: 100%;
    }

    .main-chara-img__label img[src$="chara03_02.png"] {
        transform: translate3d(7.5%, -10%, 0);
    }

    .main-chara-img__label img[src$="chara06_01.png"] {
        transform: translate3d(-7.5%, 0, 0);
    }

    .main-chara-img__label img[src$="chara06_02.png"] {
        transform: translate3d(-12.5%, 0, 0);
    }

    .main-chara-img-change {
        position: absolute;
        top: 0;
        left: 0;
        width: calc(118 / 750 * 100vw);
        margin: 0;
        margin-top: calc(calc(639 / 750 * 100vw) + calc(50 * 3 / 750 * 100vw));
        margin-left: calc(331 / 750 * 100vw);
        padding: 0;
        border: none;
        background: no-repeat;
        cursor: pointer;
        z-index: 1;
    }

    .main-chara:nth-child(2n) .main-chara-img-change {
        left: auto;
        right: 0;
        margin-top: calc(calc(639 / 750 * 100vw) + calc(50 * 2 / 750 * 100vw));
        margin-left: 0;
        margin-right: calc(331 / 750 * 100vw);
    }

    .main-chara:nth-child(3) .main-chara-img-change {
        margin-top: calc(calc(639 / 750 * 100vw) + calc(50 * 2 / 750 * 100vw));
    }

    .main-chara:nth-child(4) .main-chara-img-change {
        margin-top: calc(calc(639 / 750 * 100vw) + calc(50 * 2 / 750 * 100vw));
    }

    .main-chara:nth-child(5) .main-chara-img-change {
        margin-top: calc(calc(639 / 750 * 100vw) + calc(50 * 2 / 750 * 100vw));
    }

    .main-chara:nth-child(6) .main-chara-img-change {
        margin-top: calc(calc(639 / 750 * 100vw) + calc(50 * 1 / 750 * 100vw));
    }

    .main-chara-img-change__label {
        display: inline-block;
        vertical-align: top;
        width: 100%;
    }

    .main-chara-bottom {
        position: relative;
        margin-top: calc(40 / 750 * 100vw);
        z-index: 1;
    }

    .main-chara-ss {}

    .main-chara-ss-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .main-chara-ss-list__item {
        width: calc(341 / 750 * 100vw);
        margin-left: calc(-12 / 750 * 100vw);
    }

    .main-chara-ss-list__item:nth-child(2n+1) {
        margin-left: 0;
    }

    .main-chara-ss-list__item:nth-child(n+3) {
        margin-top: calc(21 / 750 * 100vw);
    }

    .main-chara-ss-img {}

    .main-chara-ss-img__label {
        display: inline-block;
        vertical-align: top;
        width: 100%;
        filter: drop-shadow(calc(4 / 750 * 100vw) calc(4 / 750 * 100vw) 0 #38251e);
    }

    .main-aside {}

    .main-aside-content {
        margin-top: calc(-88 / 750 * 100vw);
        padding-top: calc(120 / 750 * 100vw);
        padding-bottom: calc(41 / 750 * 100vw);
        background: url(/fr/original-player/img/bg_aside01_sp.png) no-repeat center top;
        background-size: cover;
    }

    .main-aside-content__inner {
        padding-left: calc(40 / 750 * 100vw);
        padding-right: calc(40 / 750 * 100vw);
    }

    .main-aside-bnr {
        text-align: center;
    }

    .main-aside-bnr__label {
        display: inline-block;
        vertical-align: top;
        width: calc(671 / 750 * 100vw);
        margin-right: calc(-1 / 750 * 100vw);
        filter: drop-shadow(calc(4 / 750 * 100vw) calc(4 / 750 * 100vw) 0 #000);
    }
}

/*==================================================================
    4. Modal
===================================================================*/
@media all and (min-width:737px) {

    .modal--diagram,
    .modal--ss {
        top: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        width: calc(1000px + 160px);
        height: 100%;
        margin-top: 0;
        overflow: auto;
    }

    .modal-content {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 100vh;
        margin: 0 auto;
        padding: calc(102px + 49px) 80px 80px;
    }

    .modal-img {
        position: relative;
        text-align: center;
    }

    .modal-img__label {
        display: inline-block;
        vertical-align: top;
        max-width: 100%;
        width: calc(1001 / 1000 * 100%);
        margin: 0 calc(-.5 / 1000 * 100%);
    }

    .modal-close {
        position: absolute;
        top: 0;
        right: 0;
        width: calc(71 / 1000 * 100%);
        margin-top: -16px;
        text-align: center;
        transform: translate3d(0, -100%, 0);
        cursor: pointer;
    }

    .modal--ss {
        display: block !important;
        visibility: hidden;
        z-index: -1;
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    .modal-ss {
        position: relative;
        text-align: center;
        width: 100%;
    }

    .modal-ss-list {
        margin: 0 calc(-10 / 1000 * 100%);
    }

    .modal-ss-list__item {}

    .modal-ss .modal-img {
        margin: 0 calc(10 / 1020 * 100%);
    }

    .modal-ss .modal-img__label {
        position: relative;
    }

    .modal-ss .modal-img__label::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 10px solid #fff;
        box-sizing: border-box;
    }

    .modal-ss .slick-prev {
        position: absolute;
        top: 50%;
        left: 0;
        width: calc(28 / 1000 * 100%);
        margin: 0;
        margin-top: calc(-5 / 1000 * 100%);
        margin-left: calc(-40 / 1000 * 100%);
        padding: 0;
        padding-top: calc(41 / 1000 * 100%);
        border: none;
        background: url(/original-player/img/ico_slide_arw01_prev.png) no-repeat center center;
        background-size: contain;
        font-size: 0;
        filter: drop-shadow(2px 2px 0 #000);
        cursor: pointer;
        transform: translate3d(0, -50%, 0);
        z-index: 1;
    }

    .modal-ss .slick-next {
        position: absolute;
        top: 50%;
        right: 0;
        width: calc(28 / 1000 * 100%);
        margin: 0;
        margin-top: calc(-5 / 1000 * 100%);
        margin-right: calc(-40 / 1000 * 100%);
        padding: 0;
        padding-top: calc(41 / 1000 * 100%);
        border: none;
        background: url(/original-player/img/ico_slide_arw01_next.png) no-repeat center center;
        background-size: contain;
        font-size: 0;
        filter: drop-shadow(2px 2px 0 #000);
        cursor: pointer;
        transform: translate3d(0, -50%, 0);
        z-index: 1;
    }

    .modal-ss .slick-dots {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        margin-bottom: calc(-58 / 1000 * 100%);
        text-align: center;
    }

    .modal-ss .slick-dots li {
        display: inline-block;
        vertical-align: top;
        width: calc(30 / 1000 * 100%);
        margin: 0 calc(5 / 1000 * 100%);
    }

    .modal-ss .slick-dots button {
        width: 100%;
        margin: 0;
        padding: 0;
        padding-top: calc(30 / 30 * 100%);
        border: none;
        background: url(/original-player/img/ico_sec01_pager01.png) no-repeat center center;
        background-size: contain;
        font-size: 0;
        cursor: pointer;
    }

    .modal-ss .slick-dots .slick-active button {
        background: url(/original-player/img/ico_sec01_pager01_active.png) no-repeat center center;
        background-size: contain;
    }
}

@media all and (min-width:737px) and (max-width:1160px) {

    .modal--diagram,
    .modal--ss {
        width: 100%;
    }

    .modal-content {
        padding: calc(calc(102 / 1160 * 100vw) + 49px) calc(80 / 1160 * 100vw) calc(80 / 1160 * 100vw);
    }

    .modal-close {
        margin-top: calc(-16 / 1160 * 100vw);
    }
}

@media screen and (max-width:736px) {

    .modal--diagram,
    .modal--ss {
        top: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        width: 100%;
        height: 100%;
        margin-top: 0;
        overflow: auto;
    }

    .modal-content {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 100vh;
        margin: 0 auto;
        padding: calc(calc(40 / 750 * 100vw) + 50px) calc(40 / 750 * 100vw) calc(40 / 750 * 100vw);
    }

    .modal--ss .modal-content {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 100vh;
        margin: 0 auto;
        padding: calc(calc(126 / 750 * 100vw) + 50px) calc(40 / 750 * 100vw) calc(60 / 750 * 100vw);
    }

    .modal-img {
        position: relative;
        text-align: center;
    }

    .modal-img__label {
        display: inline-block;
        vertical-align: top;
        max-width: 100%;
        width: calc(691 / 750 * 100vw);
        margin: 0 calc(-10.5 / 750 * 100vw);
    }

    .modal-close {
        width: calc(89 / 750 * 100vw);
        margin: 0 auto;
        margin-top: calc(33 / 750 * 100vw);
        text-align: center;
        cursor: pointer;
    }

    .modal--ss .modal-close {
        position: absolute;
        top: 0;
        right: 0;
        width: calc(89 / 750 * 100vw);
        margin-top: calc(-18 / 750 * 100vw);
        margin-right: calc(38.5 / 750 * 100vw);
        transform: translate3d(0, -100%, 0);
    }

    .modal--ss {
        display: block !important;
        visibility: hidden;
        z-index: -1;
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    .modal-ss {
        position: relative;
        text-align: center;
        width: 100%;
    }

    .modal-ss-list {
        margin: 0 calc(-10 / 750 * 100vw) calc(10 / 750 * 100vw);
        padding: 0 calc(38.5 / 750 * 100vw);
    }

    .modal-ss-list__item {}

    .modal-ss .modal-img {
        margin: 0 calc(10 / 750 * 100vw);
    }

    .modal-ss .modal-img__label {
        position: relative;
    }

    .modal-ss .modal-img__label::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: calc(10 / 750 * 100vw) solid #fff;
        box-sizing: border-box;
    }

    .modal-ss .slick-prev {
        position: absolute;
        top: 50%;
        left: 0;
        width: calc(28 / 750 * 100vw);
        margin: 0;
        margin-top: calc(-5 / 750 * 100vw);
        padding: 0;
        padding-top: calc(41 / 750 * 100vw);
        border: none;
        background: url(/original-player/img/ico_slide_arw01_prev.png) no-repeat center center;
        background-size: contain;
        font-size: 0;
        filter: drop-shadow(calc(2 / 750 * 100vw) calc(2 / 750 * 100vw) 0 #000);
        cursor: pointer;
        transform: translate3d(0, -50%, 0);
        z-index: 1;
    }

    .modal-ss .slick-next {
        position: absolute;
        top: 50%;
        right: 0;
        width: calc(28 / 750 * 100vw);
        margin: 0;
        margin-top: calc(-5 / 750 * 100vw);
        padding: 0;
        padding-top: calc(41 / 750 * 100vw);
        border: none;
        background: url(/original-player/img/ico_slide_arw01_next.png) no-repeat center center;
        background-size: contain;
        font-size: 0;
        filter: drop-shadow(calc(2 / 750 * 100vw) calc(2 / 750 * 100vw) 0 #000);
        cursor: pointer;
        transform: translate3d(0, -50%, 0);
        z-index: 1;
    }

    .modal-ss .slick-dots {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        margin-bottom: calc(-60 / 750 * 100vw);
        text-align: center;
    }

    .modal-ss .slick-dots li {
        display: inline-block;
        vertical-align: top;
        width: calc(36 / 750 * 100vw);
        margin: 0 calc(9 / 750 * 100vw);
    }

    .modal-ss .slick-dots button {
        width: 100%;
        margin: 0;
        padding: 0;
        padding-top: calc(30 / 30 * 100%);
        border: none;
        background: url(/original-player/img/ico_sec01_pager01.png) no-repeat center center;
        background-size: contain;
        font-size: 0;
        cursor: pointer;
    }

    .modal-ss .slick-dots .slick-active button {
        background: url(/original-player/img/ico_sec01_pager01_active.png) no-repeat center center;
        background-size: contain;
    }
}