/* オーバーレイのスタイル */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            display: none;
            /* 初期状態は非表示 */
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .overlay.active {
            display: flex;
            opacity: 1;
        }

        /* ポップアップウィンドウのスタイル */
        .popup {
            background: #fff;
            padding: 20px;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            max-width: 80%;
            transform: scale(0.8);
            transition: transform 0.3s ease;
        }

        .overlay.active .popup {
            transform: scale(1);
        }

        .popup p {
            line-height: 1.6;
            margin: 0;
            color: #333;
            font-weight: bold;
        }

        /* WebMの表示 */
        .video-container {
            width: 100%;
            overflow: hidden;
            margin: 0 auto;
        }

        .video-container video {
            width: 100% !important;
            height: auto !important;
            display: block;
            pointer-events: none;
            border-radius: 8px;
        }

        /* リボンコンテナ */
        .ribbon-container {
            position: relative;
            display: block;
            margin: 50px auto 20px;
            max-width: 1000px;
            text-align: center;
            padding: 0 10px;
        }

        .peach-ribbon {
            position: relative;
            background: linear-gradient(to bottom, #ff8da1, #e91e63);
            border-radius: 20px;
            box-shadow: 0 4px 15px rgba(233, 30, 99, 0.25);
            padding: 12px 35px;
            z-index: 2;
            box-sizing: border-box;
        }

        .peach-ribbon::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 15px solid #e91e63;
            z-index: 1;
        }

        .ribbon-title {
            color: white;
            font-weight: bold;
            font-size: 30px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
            margin: 0;
            white-space: nowrap;
            /* PCでは一行で表示 */
        }

        .welcome-badge {
            position: absolute;
            top: -18px;
            left: -10px;
            background: #ffeb3b;
            color: #ad1457;
            font-size: 17px;
            padding: 4px 12px;
            font-weight: 900;
            border-radius: 50px;
            transform: rotate(-12deg);
            box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.1);
            border: 2.5px solid white;
            z-index: 3;
        }

        /* カスタムカラー: Tailwindのクラス名として設定 */
        .icon-blue {
            background-color: #bbe6ff;
        }

        .icon-pink {
            background-color: #ffd1e0;
        }

        .icon-yellow {
            background-color: #fff699;
        }

        .icon-green {
            background-color: #aaffa8;
        }

        .icon-purple {
            background-color: #e4c9ff;
        }

        .icon-grey {
            background-color: #DEDEDE;
        }

        .icon-orange {
            background-color: #FEDBB4;
        }

        .icon-red {
            background-color: #dc0000;
        }

        .icon-discord {
            background-color: #5865f2;
        }

        .icon-grd {
            /* 左上(to bottom right)から ピンク, 黄色, ブルー の順 */
            background: linear-gradient(to bottom right, #ff849c, #fff9b1, #56cfff);
            background-size: 100% 100%;
        }

        /* 文字色などで使用する濃い青をUtilityとして定義 */
        .text-primary-blue {
            color: #4c78a9;
        }

        /* ーーーーーーーーーーーーーーーDiscordバナー ここから */
        .btn-discord-blink {
            position: relative;
            transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: transform;
        }

        .btn-discord-blink::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 0.75rem;
            /* rounded-xl と合わせる */
            box-shadow: 0 0 0 0 rgba(88, 101, 242, 0.6);
            animation: discord-ripple 1.7s infinite;
            pointer-events: none;
        }

        @keyframes discord-ripple {
            0% {
                box-shadow: 0 0 0 0 rgba(88, 101, 242, 0.6);
            }

            90% {
                box-shadow: 0 0 0 15px rgba(88, 101, 242, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(88, 101, 242, 0);
            }
        }

        .btn-discord-blink:hover {
            transform: scale(0.99);
        }

        .btn-discord-blink:active {
            transform: scale(0.97);
            transition: transform 0.1s;
        }

        /* ーーーーーーーーーーーーーーーDiscordバナー ここまで */






        /* ==================================================================== */
        /* メディアクエリ (レスポンシブ設定) スマホ(480px以下)  */
        /* ==================================================================== */
        @media (max-width: 480px) {

            /* 画像バナーの指定 */
            .link_banner_div {
                gap: 15px;
                margin: 15px auto 0;
            }

            .link_banner_div a {
                /* 隙間(gap)を考慮して2分割 */
                width: calc((100% - 30px) / 2);
            }

            /* リボンコンテナ（スマホ仕様） */
            .ribbon-container {
                margin: 10vw auto 0px;
                max-width: 100%;
                display: block;
                width: fit-content;
                padding: 0;
            }

            .ribbon-title {
                font-size: 3.8vw;
                white-space: normal;
                /* スマホでは改行を許可してはみ出しを防ぐ */
                word-break: break-all;
                padding: 0 5px;
            }

            .peach-ribbon {
                padding: 15px 10px;
            }

            .welcome-badge {
                font-size: 2.7vw;
            }
        }