@charset "utf-8";

#contents {
    width: 100%;
}
#contents-body {
    padding: 0;
}
.global-footer {
    margin-top: 0;
}
#contents-body .section {
    margin: 0;
}
#cboxLoadedContent p,
#contents-body .section p {
    margin-bottom: 0;
}
#contents-body .section .special a {
    text-decoration: none;
}
.special {
    --color-black: #333;
    --color-white: #fff;
    --color-red: #e60000;
    --color-lightblue: #abd4e1;
    --color-history: #ffe8d0;
    --color-history-red: #d20000;
    --color-history-orange: #e67000;
    --color-history-blue: #4a8bc6;
    --color-history-gray: #7d7d74;
    --color-history-black: #3f4a4e;
    --color-customstyles: #d4e7e0;
    --color-customstyles-beige: #dec992;
    --color-customstyles-green: #a4a789;
    --color-customstyles-yellow: #e3dc97;
    --color-customstyles-navy: #242433;
    --color-customstyles-brown: #d7aa75;
    --color-lineup: #f9f4ba;
    --color-lineup-unique: #f1f1f1;

    font-family: "Noto Sans JP", sans-serif;
    font-feature-settings: "palt";
    color: var(--color-black);
    overflow: clip;
    position: relative;
}
.roboto {
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.06em;
    font-family: "Roboto", sans-serif;
}
.contents_inner {
    margin-inline: auto;
}
.special_contents {
    padding-block: 120em;
    border-top: max(2em, 2px) solid var(--color-black);
}
.is_scroll_stop {
    overflow: hidden;
}
@media (min-width: 521px) {
    .contents_inner {
        width: 1200em;
    }
    [data-disp="sp"] {
        display: none;
    }
}
@media (max-width: 520px) {
    #contents-body .section {
        margin: 0;
    }
    .contents_inner {
        width: 350em;
    }
    [data-disp="pc"] {
        display: none;
    }
}

/* em */
@media (min-width: 1280px) {
    .special {
        font-size: 1px;
    }
}
@media (min-width: 521px) and (max-width: 1279px) {
    .special {
        font-size: calc(100 / 1280 * 1vw);
    }
}
@media screen and (max-width: 1023px) and (min-width: 768px), print {
    .special {
        font-size: 0.8px;
    }
}
@media (max-width: 520px) {
    .special {
        font-size: calc(100 / 390 * 1vw);
    }
}

/* common */
.btn,
.btn:link,
.btn:visited {
    height: 80em;
    padding-inline: 32em 90em;
    color: var(--color-white);
    text-decoration: none;
    border-radius: 100em;
    background-color: var(--color-black);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.btn_white:link,
.btn_white:visited {
    padding-inline: 90em 32em;
    color: var(--color-black);
    border: max(2em, 2px) solid var(--color-black);
    background-color: var(--color-white);
    justify-content: flex-end;
}
.btn_arrow {
    content: '';
    width: 63em;
    height: 40em;
    margin-block: auto;
    background: no-repeat 50% / contain;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
}
.btn .icon_arrow_white {
    right: 32em;
}
.btn .icon_arrow_black {
    left: 32em;
    rotate: 180deg;
}
.btn::before {
    content: '';
    width: 120%;
    height: 200%;
    position: absolute;
    top: -50%;
    right: 0;
    background-color: var(--color-red);
    border-radius: 0 100% 100% 0;
    transform: translateX(-100%);
}
.btn_inner {
    font-weight: 700;
    font-size: max(26em, 12px);
    line-height: 1.25;
    letter-spacing: 0.04em;
    position: relative;
    z-index: 1;
}
.icon_arrow_black {
    fill: var(--color-black);
}
.icon_arrow_white {
    fill: var(--color-white);
}

.clip_right {
    transition: clip-path 0.6s cubic-bezier(0.33, 1, 0.68, 1);
    clip-path: inset(0 100% 0 0);
}
.is_animated.clip_right {
    clip-path: inset(0 0 0 0);
}
@media (min-width: 521px) {
    @media (hover:hover) {
        .btn {
            transition: color 0.3s, border-color 0.3s;
        }
        .special .btn:hover {
            color: var(--color-white);
            border-color: var(--color-red);
        }
        .btn_arrow {
            transition: fill 0.3s;
        }
        .btn:hover .btn_arrow {
            fill: var(--color-white);
        }
        .btn::before {
            transition: transform ease 0.6s;
        }
        .btn:hover::before {
            transform: translateX(10%);
        }
    }
}

/* menu */
.menu_wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}
.menu_btn {
    width: 80px;
    height: 80px;
    font-size: 1em;
    color: var(--color-white);
    border: none;
    background-color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8em;
    position: sticky;
    left: calc(100% - 80px);
    cursor: pointer;
    z-index: 99;
}
.menu_btn_open {
    pointer-events: all;
}
.menu_btn_close {
    position: absolute;
    top: 0 !important;
    z-index: 201;
}
.menu_btn_icon {
    width: 40px;
    height: 22px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    position: relative;
}
.menu_btn_icon_line {
    width: 100%;
    height: 2px;
    margin-inline: auto;
    background-color: var(--color-white);
    display: block;
}
.menu_btn_icon_line {
    margin-block: auto;
}
.menu_btn_close .menu_btn_icon_line:nth-child(1) {
    rotate: 45deg;
    translate: 0 8px;
    scale: 0.8 1;
}
.menu_btn_close .menu_btn_icon_line:nth-child(2) {
    scale: 0 1;
}
.menu_btn_close .menu_btn_icon_line:nth-child(3) {
    rotate: -45deg;
    translate: 0 -7px;
    scale: 0.8 1;
}
.menu_btn_txt {
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.04em;
}

.menu {
    width: 100%;
    height: 100%;
    background-color: var(--color-lightblue);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
}
.menu_top,
.menu_top_inner {
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu_top_inner {
    flex-direction: column;
    gap: 24em;
}
.menu_top_logo {
    height: auto;
}
.menu_top_txt_in,
.menu_link_txt_in {
    line-height: 1;
    letter-spacing: 0.025em;
}
.menu_top_txt_in {
    font-weight: 700;
}
.menu_link {
    display: flex;
    align-items: center;
    position: relative;
}
.menu_link_arrow {
    margin-block: auto;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
}
.menu_link_inner {
    display: flex;
    flex-direction: column;
}
.menu_link_ttl_in {
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}
.menu_link_txt_in {
    font-weight: 500;
}
@media (min-width: 521px) {
    .menu {
        display: flex;
    }
    .menu_top {
        width: 38%;
    }
    .menu_top_logo {
        width: 224em;
    }
    .menu_inner {
        width: 62%;
        border-left: max(2em, 2px) solid var(--color-black);
    }
    .menu_top_txt_in {
        font-size: max(16em, 12px);
    }
    .menu_link {
        padding-inline: 60em 180em;
        height: calc(100% / 3);
    }
    .menu_link + .menu_link {
        border-top: max(2em, 2px) solid var(--color-black);
    }
    .menu_link_inner {
        gap: 24em;
    }
    .menu_link_ttl_in {
        font-size: 40em;
    }
    .menu_link_txt_in {
        font-size: 16em;
    }
    .menu_link_arrow {
        width: 33em;
        height: 20em;
        right: 120em;
    }
}
@media (min-width: 768px) {
    .menu_btn {
        top: 41px;
    }
}
@media (max-width: 767px) {
    .menu_btn {
        top: 0;
    }
}
@media (max-width: 520px) {
    .menu_top {
        height: 240em;
    }
    .menu_top_logo {
        width: 189em;
    }
    .menu_top_txt_in {
        font-size: max(12em, 12px);
    }
    .menu_link {
        height: 130em;
        padding-left: 22em;
        border-top: max(2em, 2px) solid var(--color-black);
    }
    .menu_link_inner {
        gap: 16em;
    }
    .menu_link_ttl_in {
        font-size: 36em;
    }
    .menu_link_txt_in {
        font-size: max(12em, 12px);
    }
    .menu_link_arrow {
        width: 33em;
        height: 20em;
        right: 20em;
    }
}

.menu {
    opacity: 0;
    transition: opacity 0.3s;
}
.menu.is_active {
    opacity: 1;
    pointer-events: all;
}
@media (min-width: 521px) {
    @media (hover:hover) {
        .menu_link {
            transition: color 0.3s;
        }
        .special .menu_link:hover {
            color: var(--color-red);
        }
        .menu_link .menu_link_arrow {
            transition: fill 0.3s;
        }
        .menu_link:hover .menu_link_arrow {
            fill: var(--color-red);
        }
    }
}

/* media */
.media_inner {
    display: flex;
    flex-direction: column;
    gap: 120em;
}
.media_ttl_in {
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0;
}
#contents-body .section .special .media_txt a {
    text-decoration: underline;
}
.media_catalog_txt_in {
    font-weight: 700;
    font-size: max(18em, 12px);
    line-height: 1.75;
    letter-spacing: 0;
}
.media_catalog_txt_in > a {
    color: var(--color-red);
}
.media_movie_txt_in {
    font-weight: 700;
    font-size: max(16em, 12px);
    line-height: 1.75;
    letter-spacing: 0.04em;
}
.media_note_ttl_in {
    font-weight: 700;
    font-size: max(18em, 12px);
    line-height: 1.75;
    letter-spacing: 0;
}
.media_note_txt_in {
    font-weight: 500;
    font-size: max(16em, 12px);
    line-height: 1.75;
    letter-spacing: 0;
}
.media_note_list {
    list-style: none;
}
.media_note_list > li {
    position: relative;
}
.media_note_list > li::before {
    content: '';
    width: max(3em, 3px);
    height: max(3em, 3px);
    border-radius: 50%;
    background-color: var(--color-black);
    display: block;
    position: absolute;
    top: 9em;
    left: 6em;
}
.media_note_list_in {
    padding-left: 1em;
    font-size: max(14em, 12px);
    line-height: 1.5;
    letter-spacing: 0;
    display: inline-block;
}
.media_catalog_img,
.media_movie_img {
    width: 100%;
    height: auto;
    border: max(1em, 1px) solid var(--color-black);
}
.media_catalog_ttl {
    margin-top: 16em;
}
.media_catalog_ttl_in,
.media_catalog_date_in,
.media_catalog_size_in {
    line-height: 1.5;
    letter-spacing: 0;
}
.media_catalog_ttl_in {
    font-weight: 700;
    font-size: max(18em, 12px);
}
.media_catalog_date_in {
    font-weight: 500;
    font-size: max(14em, 12px);
}
.media_catalog_size_in {
    font-weight: 500;
    font-size: max(12em, 12px);
    color: #a6a6a6;
}

.media_swiper {
    margin-top: 72em;
    padding-bottom: 64em;
    position: relative;
    overflow: visible;
}
.media_swiper .swiper-slide {
    overflow: hidden;
}
.media_catalog_swiper .swiper-slide {
    width: 280em;
}
.media_movie_swiper .swiper-slide {
    width: 346em;
}
.media_swiper .swiper-button-prev,
.media_swiper .swiper-button-next {
    width: 40em;
    height: 40em;
    background: url(../images/common/swiper_btn_arrow.svg) no-repeat 50% / contain;
    top: auto;
    bottom: 0;
}
.media_swiper .swiper-button-prev {
    left: auto;
    right: calc(50% + 12em);
    rotate: 180deg;
}
.media_swiper .swiper-button-next {
    left: calc(50% + 12em);
    right: auto;
}
.media_swiper .swiper-button-prev::after,
.media_swiper .swiper-button-next::after {
    content: none;
}
.media_bnr_wrap {
    display: flex;
    justify-content: center;
}
.media_bnr {
    display: block;
}
.media_bnr > img {
    width: 100%;
    height: auto;
}
.media_offer_list {
    list-style: none;
}
.media_offer_list > li {
    position: relative;
}
.media_offer_in {
    font-size: max(14em, 12px);
    line-height: 1.5;
}
@media (min-width: 521px) {
    .media_ttl_in {
        font-size: 32em;
    }
    .media_txt {
        margin-top: 25em;
    }
    .media_note {
        margin-top: 24em;
    }
    .media_note_list {
        margin-top: 7em;
    }
    .media_bnr_wrap {
        gap: 80em;
    }
    .media_bnr {
        width: 400em;
    }
}
@media (max-width: 520px) {
    .media_ttl_in {
        font-size: 28em;
    }
    .media_txt {
        margin-top: 40em;
    }
    .media_note {
        margin-top: 40em;
    }
    .media_note_list {
        margin-top: 12em;
    }
    .media_bnr_wrap {
        flex-direction: column;
        gap: 40em;
    }
}
@media (min-width: 521px) {
    @media (hover:hover) {
        .media_txt a,
        .media_swiper_link,
        .media_catalog_size_in {
            transition: color 0.3s;
        }
        .special .media_txt a:hover,
        .special .media_swiper_link:hover,
        .special .media_swiper_link:hover .media_catalog_size_in {
            color: var(--color-red);
        }
        .media_catalog_img,
        .media_movie_img,
        .media_bnr > img {
            transition: opacity 0.3s;
        }
        .media_swiper_link:hover .media_catalog_img,
        .media_swiper_link:hover .media_movie_img
        .media_bnr:hover > img {
            opacity: 0.7;
        }
    }
}

/* sub_bottom */
.sub_bottom {
    padding-block: 120em 40em;
}
.sub_bottom_inner {
    display: flex;
    flex-direction: column;
    gap: 120em;
}
.sub_bottom_btn_cover {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.sub_bottom_btn:link {
    padding-right: 120em;
}
.sub_bottom_home_btn {
    width: 240em;
}
@media (min-width: 521px) {
    .sub_bottom_btn_cover {
        gap: 58em;
    }
    .sub_bottom_btn_cover + .sub_bottom_btn_cover {
        margin-top: 56em;
    }
    .sub_bottom_btn {
        width: 360em;
    }
}
@media (max-width: 520px) {
    .sub_bottom_btn_cover {
        gap: 40em;
    }
    .sub_bottom_btn_cover + .sub_bottom_btn_cover {
        margin-top: 40em;
    }
    .sub_bottom_btn {
        width: 350em;
    }
}