@charset "utf-8";

@font-face {
    font-family: "Noto Sans JP";
    src: url(/fonts/NotoSansJP-Regular.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans JP";
    src: url(/fonts/NotoSansJP-Bold.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans JP";
    src: url(/fonts/NotoSansJP-Black.woff2) format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Mochiy Pop P One";
    src: url(/fonts/MochiyPopPOne-Regular.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

#content,
#contents {
    width: 100%;
}
#contents_outer #contents {
    width: 100%;
    padding: 0;
}
#path,
.h1_section {
    display: none;
}

.l-page,
.l-page * {
    box-sizing: border-box;
    font-family: "Noto Sans JP", sans-serif;
}
.l-page {
    color: #333;
    background: #fff;
}
.l-page .section__en-ttl--movie *,
.l-page .section__en-ttl-text * {
    font-family: "Mochiy Pop P One", sans-serif;
}

/*//////////////////// MV ////////////////////*/
/* 計測値: W:1920px H:600px */
.mv {
    margin: 0;
    line-height: 0;
    height: 600px;
}
    .mv__img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/*//////////////////// Movie ////////////////////*/
/* 計測値: padding 80px 390px / 内枠 W:1080px / 見出しと一覧の gap:40px */
/* Auto Layout: FLOW vertical gap 40 padding 80 390 80 390 */
.section__wrap--movie {
    position: relative;
    overflow: hidden;
    padding-block: 80px;
    background: #fff;
}
    .movie__bg {
        position: absolute;
        top: 0;
        left: 50%;
        width: 1920px;
        height: 1740px;
        transform: translateX(-50%);
        pointer-events: none;
    }
    .section__inner--movie {
        position: relative;
        z-index: 1;
        width: 1080px;
        margin-inline: auto;
    }
        /* 計測値: gap 10px / 英字 Mochiy Pop P One 30px #002bb8 letter-spacing 3.6px（「る」のみ 9.6px） line-height 100% */
        /* 日本語 Noto Sans JP Bold 40px #333 line-height 100% letter-spacing 0 */
        .section__ttl--movie {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            margin: 0 0 40px;
            text-align: center;
        }
            .section__en-ttl--movie {
                display: flex;
                align-items: flex-end;
                justify-content: center;
                gap: 8px;
                color: #002bb8;
                font-size: 30px;
                font-weight: 400;
                line-height: 1;
                letter-spacing: 3.6px;
            }
                .section__catch-icon {
                    display: block;
                    flex-shrink: 0;
                }
                .section__catch-icon--right {
                    transform: scaleX(-1);
                }
                .section__en-ttl-text {
                    margin-right: -3.6px;
                }
                .section__en-ttl-char {
                    letter-spacing: 9.6px;
                }
            .section__ttl-text--movie {
                color: #333;
                font-size: 40px;
                font-weight: 700;
                line-height: 1;
                letter-spacing: 0;
            }
        /* 計測値: 横 gap 30px / 縦 gap 40px / カード W:525px */
        /* Auto Layout: horizontal wrap itemSpacing 30 counterAxisSpacing 40 */
        .movie__list {
            display: flex;
            flex-wrap: wrap;
            column-gap: 30px;
            row-gap: 40px;
            margin: 0;
            padding: 0;
            list-style: none;
        }
            .movie__item {
                width: 525px;
            }
                /* 計測値: サムネ W:525px H:295px radius 0 */
                .movie__thumb {
                    position: relative;
                    display: block;
                    width: 525px;
                    height: 295px;
                    margin: 0 0 20px;
                    padding: 0;
                    border: 0;
                    overflow: hidden;
                    background: transparent;
                    cursor: pointer;
                    line-height: 0;
                }
                .movie__thumb:hover {
                    opacity: 0.8;
                }
                .movie__thumb:focus-visible {
                    outline: 2px solid #002bb8;
                    outline-offset: 4px;
                }
                    .movie__img {
                        display: block;
                        width: 525px;
                        height: 295px;
                        object-fit: cover;
                    }

                /* 計測値: 見出し行 gap 12px padding-bottom 10px border #cdcdcd */
                /* 話数 Noto Sans JP Black 16px #002bb8 letter-spacing 1.28px padding 8px 10px radius 9999 border 1px #002bb8 */
                /* タイトル Noto Sans JP Bold 20px #333 line-height 1 */
                /* 本文 Noto Sans JP Regular 16px #707070 line-height 1.6 / 見出しとの gap 12px */
                .movie__ttl {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    margin: 0;
                    padding-bottom: 10px;
                    border-bottom: 1px solid #cdcdcd;
                }
                    .movie__num {
                        flex-shrink: 0;
                        padding: 7px 10px;
                        border: 1px solid #002bb8;
                        border-radius: 9999px;
                        color: #002bb8;
                        font-size: 16px;
                        font-weight: 900;
                        line-height: 1;
                        letter-spacing: 1.28px;
                    }
                    .movie__name {
                        min-width: 0;
                        color: #333;
                        font-size: 20px;
                        font-weight: 700;
                        letter-spacing: 0;
                    }
                .movie__text {
                    margin: 12px 0 0;
                    color: #707070;
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 1.6;
                    letter-spacing: 0;
                }

/*//////////////////// Modal ////////////////////*/
/* 計測値: オーバーレイ #000 70% / 閉じる 36px / gap 10px / 映像 W:1140px H:637px radius 31px */
/* 狭い画面: 幅 min(1140px, 90vw)、映像は 16:9。閉じる 36px + gap 10px + 余白 40px を vh から引いて画面内に収める */
.movie-modal {
    display: none;
    position: fixed;
    inset: 0;
    /* ヘッダーは z-index 未指定。ページ内コンテンツは 1 までなので、2 で前面に出す */
    z-index: 2;
}
.movie-modal.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
}
    .movie-modal__overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
    }
    .movie-modal__panel {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
        width: min(1140px, 90vw);
        max-height: calc(100vh - 40px);
    }
        .movie-modal__close {
            width: 36px;
            height: 36px;
            padding: 0;
            border: 0;
            background: transparent;
            cursor: pointer;
            line-height: 0;
        }
        .movie-modal__close:hover {
            opacity: 0.8;
        }
        .movie-modal__screen {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            max-height: calc(100vh - 86px);
            overflow: hidden;
            border-radius: 31px;
            background: #000;
        }
            .movie-modal__screen iframe {
                position: absolute;
                inset: 0;
                display: block;
                width: 100%;
                height: 100%;
                border: 0;
            }

body.is-movie-open {
    overflow: hidden;
}