/* ===============================================
       1. 共通アニメーション設定
    =============================================== */
    .js-animate,
    .collection-menu li {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 2s ease-in-out, transform 2s ease-in-out;
    }

    .is-active {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    /* ===============================================
       2. ヘッダー・メイン設定
    =============================================== */
    .l-header {
        background-color: transparent !important;
        background: transparent !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
        transition: background-color 0.5s ease;
    }

    .l-header.is-scrolled {
        background-color: #000 !important;
    }

    header h1 a img {
        filter: brightness(0) invert(1) !important;
    }

    main {
        background: #000 !important;
        background-color: #000 !important;
        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .l-header__main .black-btn {
        background: #fff;
        color: #000;
    }

    .l-header__main .hamburger span {
        background: #fff;
    }

    .l-header__main .black-btn:hover {
        background: #000;
        color: #fff;
        border: 1px solid #fff;
    }

    .sponly {
        display: none;
    }

    .pconly {
        display: block;
    }

    @media screen and (max-width: 768px) {
        .sponly {
            display: block;
        }

        .pconly {
            display: none;
        }
    }

    /* ===============================================
       3. FVセクション
    =============================================== */
    .fv-section {
        position: relative;
        width: 100%;
        height: 100vh;
        height: 100svh;
        overflow: hidden;
        background-color: #000;
    }

    .fv-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('https://intellctuary.com/wp-content/themes/intellectuary_hp/assets/img/collection/drink05-fv-pc.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0;
        transition: opacity 2.5s ease;
        z-index: 1;
    }

    @media screen and (max-width: 768px) {
        .fv-section::before {
            background-image: url('https://intellctuary.com/wp-content/themes/intellectuary_hp/assets/img/collection/drink05-fv-sp.webp');
        }
    }

    .fv-section.is-visual-active::before {
        opacity: 1;
    }

    .fv-content-wrap {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 15vh 20px 10vh;
        box-sizing: border-box;
        z-index: 2;
    }

    .fv-section h2 {
        font-size: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #fff;
        text-align: center !important;
    }


    @media screen and (max-width: 768px) {
        .fv-section h2 {
            font-size: 24px !important;
        }

        .fv-content-wrap {
            padding: 100px 20px 0px;
        }
    }

    /* ===============================================
       4. メニューグリッド以降
    =============================================== */
    .drink-collection {
        display: flex;
        max-width: 1000px;
        margin: 0px auto 60px;
        gap: 6%;
    }

    .drink-collection video {
        width: 40%;
    }

    .drink-collection .drink-contents {
        width: 54%;
        color: #fff;
    }

    .drink-collection .drink-contents h2 {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .drink-collection .drink-contents p {
        font-size: 18px;
        line-height: 1.8;
        margin-bottom: 20px;
    }

    .drink-collection .drink-contents .drink-tag {
        padding: 8px 16px;
        margin-right: 16px;
        border: 1px solid #fff;
        font-size: 14px;
    }

    .drink-collection .drink-contents .drink-price {
        font-size: 22px;
    }

    .drink-collection .drink-contents .drink-price small {
        font-size: 14px;
        margin-left: 4px;
        font-weight: 400;
    }

    .drink-collection .drink-contents .drink-text {
        padding: 40px 0;
        margin: 40px 0;
        line-height: 1.8;
        font-size: 18px;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
    }

    a.back-menu {
        display: block;
        text-align: center;
        margin: 40px auto;
        padding: 12px 60px;
        /* 線がある分、右側に余白を持たせるとバランスが良いです */
        border: 1px solid #fff;
        color: #fff;
        width: fit-content;
        position: relative;
        /* 線の基準点 */
        text-decoration: none;
        transition: all 0.3s ease;
    }

    /* 右側の傍線 */
    a.back-menu::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -25px;
        width: 50px;
        height: 1px;
        background-color: #fff;
        transition: all 0.3s ease;
    }

    a.back-menu:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    a.back-menu:hover::after {
        width: 80px;
        right: -70px;
    }

    @media screen and (max-width: 768px) {
        .drink-collection {
            flex-direction: column-reverse;
        }

        .drink-collection video {
            width: 75%;
            margin: auto;
        }

        .drink-collection .drink-contents {
            width: 90%;
            margin: auto;
        }

        .drink-collection .drink-contents .drink-text {
            padding: 20px 0;
            margin: 20px 0;
            font-size: 16px;
        }

        .drink-collection .drink-contents p {
            font-size: 16px;
        }

    }

    /* アニメーションの共通初期状態 */
    .custom-short-video,
    .drink-contents>*,
    .back-menu {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 1.2s ease, transform 1.2s ease;
    }

    /* アクティブ時（ふわっと表示） */
    .custom-short-video.is-active,
    .drink-contents>*.is-active,
    .back-menu.is-active {
        opacity: 1;
        transform: translateY(0);
    }

    /* ビデオは少しゆっくり大きく出すと綺麗です */
    .custom-short-video {
        transition: opacity 2s ease, transform 2s ease;
    }

    /* 前回のボタン用CSSに transition が含まれているか確認してください */
    a.back-menu {
        /* ...既存のスタイル... */
        transition: opacity 1.2s ease, transform 1.2s ease, background-color 0.3s ease;
    }