/*
Theme Name:Astra child
Theme URI:https://wpastra.com/
Description:WordPressテーマ「Astra」の自作子テーマです。
Template:astra
Author:Brainstorm Force
Author URI:https://wpastra.com/about/?
Version:4.6.11
*/

/* メインページのトップにマージンを追加 */
main {
    margin-top: 80px;
}

@media (min-width: 720) {
    .gacha-item {
        margin-bottom: 30px;
    }
}

.ast-container {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
}

/*ヘッダーのパディング*/
#masthead .ast-container,
.site-header-focus-item + .ast-breadcrumbs-wrapper {
    max-width: 100%;
    padding-left: 40px;
    padding-right: 45px;
}

/*ヘッダーボタン色*/
/*.ast-header-button-1 .ast-custom-button {
 background:linear-gradient(90deg, rgba(6,147,227,1) 0%, rgb(155,81,224) 100%);
 color:white;
}
*/
.main-header-menu .menu-item,
#astra-footer-menu .menu-item,
.main-header-bar .ast-masthead-custom-menu-items {
    flex-direction: row;
    align-items: center;
    color: white;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    font-weight: 550;
}

/*アカウント・下やじるし色*/
.ast-theme-transparent-header .ast-builder-menu .main-header-menu,
.ast-theme-transparent-header .ast-builder-menu .main-header-menu .menu-link,
.ast-theme-transparent-header [CLASS*="ast-builder-menu-"] .main-header-menu .menu-item > .menu-link,
.ast-theme-transparent-header .ast-masthead-custom-menu-items,
.ast-theme-transparent-header .ast-masthead-custom-menu-items a,
.ast-theme-transparent-header .ast-builder-menu .main-header-menu .menu-item > .ast-menu-toggle,
.ast-theme-transparent-header .ast-builder-menu .main-header-menu .menu-item > .ast-menu-toggle,
.ast-theme-transparent-header .main-header-menu .menu-link {
    color: #fff;
    align-items: center;
}

/*ポイント・アカウント横並びに*/
.ast-header-break-point .main-navigation .stack-on-mobile li {
    width: 50%;
}

.ast-header-break-point .main-navigation ul .menu-item .menu-link {
    border-bottom-width: 0px;
    width: auto;
}

/*メニューバーの横幅*/
.main-header-menu .sub-menu {
    width: 100%;
}

.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-has-children.menu-item-515 {
    width: 160px;
}

/*アイコン背景*/
.fa.fa-user {
    width: 55px; /* 要素の幅を設定 */
    height: 55px;
    border-radius: 50%;
    font-size: 30px;
    background-color: hsl(240 5% 84% / 1);
    display: flex; /* 中央揃えのためにflexを使用 */
    align-items: center; /* 縦方向 */
    justify-content: center; /* 横方向 */
    text-align: center;
    color: white;
    padding: 5px;
    box-sizing: border-box; /* パディングを含むボックスサイズを設定 */
    margin: 0 auto;
}

/*ヘッダーポイント背景*/
.menu-item-461 {
    height: 40px;
    border-radius: 50px;
    font-size: 16px;
    padding: 10px;
    background: #0077ff;
}

/*少し下でサブメニュー表示*/
.ast-builder-menu-1 .main-header-menu > .menu-item-461 > .sub-menu,
.ast-builder-menu-1 .main-header-menu > .menu-item-461 > .astra-full-megamenu-wrapper {
    margin-top: 11px;
}

.ast-builder-menu-1 .main-header-menu > .menu-item-515 > .sub-menu,
.ast-builder-menu-1 .main-header-menu > .menu-item-515 > .astra-full-megamenu-wrapper {
    margin-top: -5px;
}

/* メニューバーの背景と高さ */
.sub-menu li {
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    background: #0077ff;
}

/* Submenu item hover effect */
.ast-builder-menu .main-navigation > ul {
    align-self: center;
    align-items: center;
}

.sub-menu li:hover {
    background: #555;
    color: #fff !important;
}

.ast-theme-transparent-header .ast-builder-menu .main-header-menu .menu-item:hover > .menu-link,
.ast-theme-transparent-header .ast-builder-menu .main-header-menu .menu-item:hover > .ast-menu-toggle,
.ast-theme-transparent-header .ast-builder-menu .main-header-menu .ast-masthead-custom-menu-items a:hover,
.ast-theme-transparent-header .ast-builder-menu .main-header-menu .focus > .menu-link,
.ast-theme-transparent-header .ast-builder-menu .main-header-menu .focus > .ast-menu-toggle,
.ast-theme-transparent-header .ast-builder-menu .main-header-menu .current-menu-item > .menu-link,
.ast-theme-transparent-header .ast-builder-menu .main-header-menu .current-menu-ancestor > .menu-link,
.ast-theme-transparent-header .ast-builder-menu .main-header-menu .current-menu-item > .ast-menu-toggle,
.ast-theme-transparent-header .ast-builder-menu .main-header-menu .current-menu-ancestor > .ast-menu-toggle,
.ast-theme-transparent-header [CLASS*="ast-builder-menu-"] .main-header-menu .current-menu-item > .menu-link,
.ast-theme-transparent-header [CLASS*="ast-builder-menu-"] .main-header-menu .current-menu-ancestor > .menu-link,
.ast-theme-transparent-header [CLASS*="ast-builder-menu-"] .main-header-menu .current-menu-item > .ast-menu-toggle,
.ast-theme-transparent-header [CLASS*="ast-builder-menu-"] .main-header-menu .current-menu-ancestor > .ast-menu-toggle,
.ast-theme-transparent-header .main-header-menu .menu-item:hover > .menu-link,
.ast-theme-transparent-header .main-header-menu .current-menu-item > .menu-link,
.ast-theme-transparent-header .main-header-menu .current-menu-ancestor > .menu-link {
    color: #222222 !important;
}

.main-header-menu.ast-menu-shadow.ast-nav-menu.ast-flex.submenu-with-border.astra-menu-animation-fade.stack-on-mobile {
    background-color: black;
}

.ast-primary-header-bar {
    height: 130px !important;
}

/*Safariの表示*/
@media (min-width: 930px) {
    .ast-flex {
        display: -webkit-inline-box !important; /* inlineではなくflexを使用 */
        align-items: center; /* 垂直方向に中央揃え */
    }

    .ast-builder-grid-row {
        justify-content: space-between; /* 左右に配置 */
    }

    .menu-item-461 {
        margin-top: 19px;
    }

    .ast-desktop-header {
        height: 100px;
    }

    .site-header-primary-section-right.site-header-section.ast-flex.ast-grid-right-section {
        margin-top: 20px; /* 必要に応じて調整 */
    }
}

/* ポイントとアカウントアイコンのスタイルを調整 */
.menu-item.points {
    font-size: 16px;
    color: white; /* 必要に応じて調整 */
    margin-right: 10px; /* 必要に応じて調整 */
}

.menu-item.account {
    display: flex;
    align-items: center;
}

/*お知らせ横幅*/
#news_all {
    width: 55%;
    margin: 0 auto;
}

@media (max-width: 800px) {
    #news_all {
        width: 90%;
    }
}

/* gacha_mainクラスの画像をホバーしたときに拡大する */
#gacha_main {
    overflow: hidden; /* 親要素のサイズを超える部分を隠す */
}

#gacha_main img {
    transition: transform 0.3s ease;
}

#gacha_main img:hover {
    transform: scale(1.1);
}

.gacha_group {
    width: 80%;
}

/*ヘッダーを固定*/
.ast-theme-transparent-header #masthead {
    position: fixed;
    left: 0;
    right: 0;
}

/* 固定幅と高さを設定 */
.wp-block-cb-carousel.slick-initialized.slick-slider {
    width: 80% !important;
    max-width: none;
    max-height: 300px;
    margin: 0 auto; /* 中央に配置 */
    padding: 0; /* パディングをリセット */
}

/* レスポンシブスタイルを無効化 */
@media (max-width: 780px), (max-width: 480px) {
    .wp-block-cb-carousel.slick-initialized.slick-slider {
        width: 100% !important; /* 固定幅 */
        max-width: none !important; /* 最大幅を無効化 */
        max-height: none !important; /* 最大高さを無効化 */
        margin: 0 auto !important; /* 中央に配置 */
        padding: 0 !important; /* パディングをリセット */
        position: relative; /* 相対位置を設定 */
        left: 50%; /* 50%左に移動 */
        transform: translateX(-50%); /* 要素の中央を基準に左に50%移動 */
        overflow-x: hidden;
    }

    .slick-list.draggable {
        transform: scale(2) !important;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

.ast-header-break-point .main-header-menu .sub-menu {
    background-color: #f9f9f9;
    position: absolute;
    opacity: 1;
    visibility: visible;
    font-size: 13px;
    height: 40px;
    line-height: 40px;
}

/* サブメニューの背景色を透明にする */
.ast-builder-menu-1 .main-header-menu > .menu-item > .sub-menu,
.ast-builder-menu-1 .main-header-menu > .menu-item > .astra-full-megamenu-wrapper {
    background-color: transparent !important; /* 背景色を透明に設定 */
    width: 100%;
}

@media (max-width: 920px) {
    .ast-builder-menu-1 .main-header-menu > .menu-item-461 > .sub-menu,
    .ast-builder-menu-1 .main-header-menu > .menu-item-461 > .astra-full-megamenu-wrapper {
        left: 90%;
        transform: translateX(-50%);
        top: calc(100% + 8px);
        min-width: 250px;
    }

    .ast-builder-menu-1 .main-header-menu > .menu-item-515 > .sub-menu,
    .ast-builder-menu-515 .main-header-menu > .menu-item- > .astra-full-megamenu-wrapper {
        left: 109%;
        transform: translateX(-50%);
        top: calc(100% + 8px);
        min-width: 330px;
        margin-top: -4px;
    }

    .menu-item-461 {
        font-size: 13px;
    }

    .sub-menu li {
        font-size: 10px;
        height: 30px;
        line-height: 30px;
    }

    .woocommerce-MyAccount-content {
        margin-top: 20px;
    }

    .main-header-menu .menu-item,
    #astra-footer-menu .menu-item,
    .main-header-bar .ast-masthead-custom-menu-items {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media (max-width: 850px) {
    .main-header-menu .menu-item,
    #astra-footer-menu .menu-item,
    .main-header-bar .ast-masthead-custom-menu-items {
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        font-weight: 500;
    }

    .ast-builder-menu-1 .main-header-menu > .menu-item-515 > .sub-menu,
    .ast-builder-menu-515 .main-header-menu > .menu-item- > .astra-full-megamenu-wrapper {
        margin-top: 4px;
    }
}

/*トグル位置*/
@media (max-width: 780px) {
    .ast-header-break-point .main-header-bar .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle {
        right: 13px;
    }
}

@media (max-width: 720px) {
    main {
        margin-top: 80px;
    }

    .gacha_group {
        width: 100%;
    }

    .main-header-menu .menu-item,
    #astra-footer-menu .menu-item,
    .main-header-bar .ast-masthead-custom-menu-items {
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        font-weight: 500;
    }

    .wp-block-cb-carousel.slick-initialized.slick-slider {
        width: 100%;
    }

    .ast-header-break-point .main-header-bar .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle {
        right: 10px;
    }

    .ast-header-break-point .main-navigation .sub-menu .menu-item .menu-link {
        padding-right: 0px;
        padding-left: 10px;
    }
}

@media (max-width: 670px) {
    .ast-header-break-point .main-navigation ul .menu-item .menu-link {
        border-bottom-width: 0px;
        width: 70px;
    }

    .ast-header-break-point .main-header-bar .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle {
        right: 8px;
    }

    .ast-header-break-point .main-navigation ul .menu-item .menu-link {
        width: 100%;
    }

    .ast-header-break-point .main-navigation .sub-menu .menu-item .menu-link {
        padding-right: 0px;
        padding-left: 30px;
    }
}

@media (max-width: 600px) {
    .wp-block-button .wp-block-button__link,
    .wp-block-search .wp-block-search__button,
    body .wp-block-file .wp-block-file__button {
        padding-top: 10px;
        padding-right: 5px;
        padding-bottom: 10px;
        padding-left: 5px;
        font-size: 12px;
    }

    .wp-container-core-group-is-layout-8.wp-container-core-group-is-layout-8 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        width: 100%;
    }

    .has-text-align-left.gachatext {
        padding-left: 3px;
        padding-right: 5px;
        font-size: 12px;
        width: 50%;
    }

    .ast-header-break-point .main-header-bar .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle {
        right: 0px;
    }
}

@media (max-width: 565px) {
    .ast-header-break-point .main-navigation ul .menu-item .menu-link {
        width: 90%;
    }

    .ast-header-break-point #masthead .ast-mobile-header-wrap .ast-primary-header-bar,
    .ast-header-break-point #masthead .ast-mobile-header-wrap .ast-below-header-bar,
    .ast-header-break-point #masthead .ast-mobile-header-wrap .ast-above-header-bar {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 545px) {
    main {
        margin-top: 70px;
    }
}

@media (max-width: 506px) {
    .ast-builder-grid-row {
        grid-column-gap: 0px;
    }

    /*メニューバー*/
    .ast-builder-menu-1 .main-header-menu > .menu-item-461 > .sub-menu,
    .ast-builder-menu-461 .main-header-menu > .menu-item- > .astra-full-megamenu-wrapper {
        left: 100%;
        transform: translateX(-40%);
        top: calc(100% + 8px);
        min-width: 300px;
        margin-top: 0px;
    }

    .ast-builder-menu-1 .main-header-menu > .menu-item-515 > .sub-menu,
    .ast-builder-menu-515 .main-header-menu > .menu-item- > .astra-full-megamenu-wrapper {
        left: 100%;
        transform: translateX(-40%);
        top: calc(100% + 8px);
        min-width: 300px;
    }

    /*メニューバーの文字位置*/
    .ast-header-break-point .main-navigation .sub-menu .menu-item .menu-link {
        padding-right: 0px;
        padding-left: 10px;
    }

    /*アイコン*/
    .fa.fa-user {
        width: 30px;
        height: 30px;
        font-size: 20px;
    }

    .menu-item-461 {
        font-size: 9px;
    }

    .ast-header-break-point .main-navigation ul .menu-item .menu-link {
        width: 95%;
    }

    .ast-header-break-point .main-navigation .stack-on-mobile li {
        width: 40%;
    }

    .ast-header-break-point .ast-builder-menu-1 .menu-item-515.menu-item-has-children > .ast-menu-toggle {
        font-size: 10px;
    }
}

@media (max-width: 415px) {
    .menu-item .menu-item-type-custom .menu-item-object-custom .current-menu-ancestor .current-menu-parent .menu-item-has-children .menu-item-515 .ast-submenu-expanded {
        min-width: 80px;
    }

    .menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-has-children.menu-item-515 {
        width: 80px;
    }

    .ast-builder-menu-1 .main-header-menu > .menu-item-515 > .sub-menu,
    .ast-builder-menu-515 .main-header-menu > .menu-item- > .astra-full-megamenu-wrapper {
        left: 100%;
        transform: translateX(-30%);
        top: calc(100% + 8px);
        min-width: 280px;
    }

    .ast-builder-menu-1 .main-header-menu > .menu-item-461 > .sub-menu,
    .ast-builder-menu-461 .main-header-menu > .menu-item- > .astra-full-megamenu-wrapper {
        left: 100%;
        transform: translateX(-40%);
        top: calc(100% + 8px);
        min-width: 200px;
    }

    .site-header-primary-section-left.site-header-section.ast-flex .site-header-section-left {
        margin-right: -35px;
    }

    header .custom-logo-link img,
    .ast-header-break-point .site-branding img,
    .ast-header-break-point .custom-logo-link img {
        max-width: 65px;
    }

    .ast-header-break-point #masthead .ast-mobile-header-wrap .ast-primary-header-bar,
    .ast-header-break-point #masthead .ast-mobile-header-wrap .ast-below-header-bar,
    .ast-header-break-point #masthead .ast-mobile-header-wrap .ast-above-header-bar {
        margin-right: -50px;
    }

    .main-header-menu .ast-menu-shadow .ast-nav-menu .ast-flex .submenu-with-border .astra-menu-animation-fade .stack-on-mobile {
        margin-right: -10px;
    }
}

/*トップページbutton*/
.wp-block-button .wp-block-button__link,
.wp-block-search .wp-block-search__button,
body .wp-block-file .wp-block-file__button {
    background: #0077ff;
    font-size: 13px;
    display: inline-block;
    margin: -2px;
    text-align: center;
    padding: 10px 10px;
    flex: 1 1 auto; /* フレックスアイテムとしての設定 */
    white-space: nowrap; /* テキストの折り返しを防止 */
}

/* 隙間をなくすための余白調整 */
p.has-text-align-left.gachatext {
    margin: 0; /* 段落の上下の余白を0に設定 */
    padding: 0; /* 段落のパディングを0に設定 */
}

/* 親要素の余白を調整する場合 */
.parent-element-selector {
    margin: 0; /* 親要素の余白を0に設定 */
    padding: 0; /* 親要素のパディングを0に設定 */
}

/* Contact Form 7 の文字色を白にする */
.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select,
.wpcf7-form label {
    color: #ffffff; /* 文字色を白に設定 */
}

/* Contact Form 7 のボタンの背景色をグラデーションにする */
.wpcf7-form input[type="submit"],
.wpcf7-form input[type="button"] {
    background: #0077ff;
    color: #ffffff; /* ボタンの文字色を白に設定 */
    border: none; /* ボーダーを消去 */
    padding: 10px 20px; /* ボタンのパディングを調整 */
    border-radius: 5px; /* ボタンの角を丸くする */
    cursor: pointer; /* ホバー時にカーソルをポインタに変更 */
}

/* ボタンにホバー時のエフェクトを追加 */
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="button"]:hover {
    opacity: 0.9; /* 少し透明度を追加 */
}

/* 入力フィールドのフォーカス時の背景色を変更 */
input:focus,
textarea:focus,
select:focus {
    background-color: #333 !important; /* フォーカス時の背景色を変更 */
    color: #fff !important; /* テキストの色を白に設定 */
    border: 1px solid #fff !important; /* フォーカス時の境界線の色を白に設定 */
    outline: none !important; /* フォーカス時のアウトラインを削除 */
}

/* 特定のフォームフィールドに対してフォーカス時の背景色を変更 */
.wpcf7-form-control-wrap input:focus,
.wpcf7-form-control-wrap textarea:focus,
.wpcf7-form-control-wrap select:focus {
    background-color: #333 !important; /* フォーカス時の背景色を変更 */
    color: #fff !important; /* テキストの色を白に設定 */
    border: 1px solid #fff !important; /* フォーカス時の境界線の色を白に設定 */
    outline: none !important; /* フォーカス時のアウトラインを削除 */
}

/* その他の設定（必要に応じて調整） */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea {
    background-color: #ffffff;
    color: #222222;
    border: 1px solid #e6e6e6;
}

/* WooCommerceページの背景画像設定 shopなど*/
body.woocommerce-page {
    background-color: #ffffff;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* WooCommerceページの文字色設定 */
body.woocommerce-page *:not(.header):not(.header *):not(.menu-dropdown):not(.menu-dropdown *) {
    color: #222222 !important;
}

/* WooCommerceページのボタンスタイル設定 */
body.woocommerce-page .button,
body.woocommerce-page .btn,
body.woocommerce-page input[type="submit"] {
    background: #0077ff !important;
    color: #222222 !important;
    border: none !important;
}

/* ボタンのホバー効果 */
body.woocommerce-page .button:hover,
body.woocommerce-page .btn:hover,
body.woocommerce-page input[type="submit"]:hover {
    opacity: 0.8;
}

/* WooCommerceページのヘッダとフッタの背景色を透明にする */
body.woocommerce-page .site-header,
body.woocommerce-page .site-footer {
    background-color: transparent !important;
}

/* WooCommerceの表の背景を透明にしつつ文字が読みやすいように調整 */
body.woocommerce-page .woocommerce-account .woocommerce-MyAccount-content,
body.woocommerce-page .woocommerce-account .woocommerce-MyAccount-navigation ul,
body.woocommerce-page .woocommerce-account .woocommerce-MyAccount-navigation ul li,
body.woocommerce-page .woocommerce-Address-title,
body.woocommerce-page .woocommerce-Address {
    background-color: #ffffff !important; /* 背景を黒の半透明に設定 */
    padding: 10px !important;
    border-radius: 5px !important;
}

/*shopの並び替え*/
.woocommerce-js .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
    background-color: #ffffff;
    color: #222222;
    border: 1px solid #e6e6e6;
}

/* Ultimate Memberページの背景画像設定 */
body.um-page {
    background-color: #ffffff;
    background-size: cover !important;
    background-repeat: repeat !important;
    background-attachment: fixed !important;
}

/* Ultimate Memberページの文字色設定 */
body.um-page *:not(.header):not(.header *):not(.menu-dropdown):not(.menu-dropdown *) {
    color: #222222 !important;
}

/* Ultimate Memberページのボタンスタイル設定 */
body.um-page .um-button,
body.um-page .um-btn,
body.um-page input[type="submit"] {
    background: #0077ff !important;
    color: #222222 !important;
    border: none !important;
}

/* ボタンのホバー効果 */
body.um-page .um-button:hover,
body.um-page .um-btn:hover,
body.um-page input[type="submit"]:hover {
    opacity: 0.8;
}

/* Ultimate Memberページのヘッダとフッタの背景色を透明にする */
body.um-page .site-header,
body.um-page .site-footer {
    background-color: transparent !important;
}

/* Ultimate Memberの表の背景を透明にしつつ文字が読みやすいように調整 */
body.um-page .um-field,
body.um-page .um-field-area,
body.um-page .um-profile-body {
    background-color: #ffffff !important; /* 背景を黒の半透明に設定 */
    padding: 10px !important;
    border-radius: 5px !important;
    margin-top: 10px;
}

/* 特定のページの背景画像設定 */

body.page-id-108,
body.page-id-110,
body.page-id-112,
body.page-id-114,
body.page-id-116,
body.page-id-135,
body.page-id-136,
body.page-id-137,
body.page-id-138,
body.page-id-147,
body.page-id-148,
body.page-id-149,
body.page-id-404,
body.page-id-406,
body.page-id-407,
body.page-id-408,
body.page-id-889,
body.page-id-876,
body.page-id-1057,
body.page-id-1053,
body.page-id-1070,
body.page-id-1081,
body.page-id-1207,
body.page-id-1311,
body.page-id-1345,
body.page-id-1525,
body.page-id-1639,
body.page-id-1646,
body.page-id-1756,
body.page-id-2395 {
    background-color: #ffffff;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* 特定のページの文字色設定 */
body.page-id-108 *,
body.page-id-110 *,
body.page-id-112 *,
body.page-id-114 *,
body.page-id-116 *,
body.page-id-135 *,
body.page-id-136 *,
body.page-id-137 *,
body.page-id-138 *,
body.page-id-147 *,
body.page-id-148 *,
body.page-id-149 *,
body.page-id-404 *,
body.page-id-406 *,
body.page-id-407 *,
body.page-id-408 *,
body.page-id-889 *,
body.page-id-876 *,
/* body.page-id-1057 *, */
body.page-id-1053 *,
/* body.page-id-1070 *, */
body.page-id-1081 *,
body.page-id-1207 *,
body.page-id-1311 *,
body.page-id-1345 *,
body.page-id-1639 *,
body.page-id-1646 * {
    color: #222222 !important;
}

/* 特定のページのボタンスタイル設定 */
body.page-id-135 .button,
body.page-id-136 .button,
body.page-id-137 .button,
body.page-id-138 .button,
body.page-id-147 .button,
body.page-id-148 .button,
body.page-id-149 .button,
body.page-id-404 .button,
body.page-id-406 .button,
body.page-id-407 .button,
body.page-id-408 .button,
body.page-id-889 .button,
body.page-id-876 .button,
body.page-id-1057 .button,
body.page-id-1053 .button,
body.page-id-1070 .button,
body.page-id-1081 .button,
body.page-id-1639 .button,
body.page-id-1646 .button,
body.page-id-135 .btn,
body.page-id-136 .btn,
body.page-id-137 .btn,
body.page-id-138 .btn,
body.page-id-147 .btn,
body.page-id-148 .btn,
body.page-id-149 .btn,
body.page-id-404 .btn,
body.page-id-406 .btn,
body.page-id-407 .btn,
body.page-id-408 .btn,
body.page-id-889 .btn,
body.page-id-876 .btn,
body.page-id-1057 .btn,
body.page-id-1053 .btn,
body.page-id-1070 .btn,
body.page-id-1081 .btn,
body.page-id-1639 .btn,
body.page-id-1646 .btn,
body.page-id-135 input[type="submit"],
body.page-id-136 input[type="submit"],
body.page-id-137 input[type="submit"],
body.page-id-138 input[type="submit"],
body.page-id-147 input[type="submit"],
body.page-id-148 input[type="submit"],
body.page-id-149 input[type="submit"],
body.page-id-404 input[type="submit"],
body.page-id-406 input[type="submit"],
body.page-id-407 input[type="submit"],
body.page-id-408 input[type="submit"],
body.page-id-889 input[type="submit"],
body.page-id-876 input[type="submit"],
body.page-id-1057 input[type="submit"],
body.page-id-1053 input[type="submit"],
body.page-id-1070 input[type="submit"],
body.page-id-1081 input[type="submit"],
body.page-id-1639 input[type="submit"],
body.page-id-1646 input[type="submit"] {
    background: #0077ff !important;
    color: #222222 !important;
    border: none !important;
}

/* ボタンのホバー効果 */
body.page-id-135 .button:hover,
body.page-id-136 .button:hover,
body.page-id-137 .button:hover,
body.page-id-138 .button:hover,
body.page-id-147 .button:hover,
body.page-id-148 .button:hover,
body.page-id-149 .button:hover,
body.page-id-404 .button:hover,
body.page-id-406 .button:hover,
body.page-id-407 .button:hover,
body.page-id-408 .button:hover,
body.page-id-889 .button:hover,
body.page-id-876 .button:hover,
body.page-id-1057 .button:hover,
body.page-id-1053 .button:hover,
body.page-id-1070 .button:hover,
body.page-id-1081 .button:hover,
body.page-id-1639 .button:hover,
body.page-id-1646 .button:hover,
body.page-id-135 .btn:hover,
body.page-id-136 .btn:hover,
body.page-id-137 .btn:hover,
body.page-id-138 .btn:hover,
body.page-id-147 .btn:hover,
body.page-id-148 .btn:hover,
body.page-id-149 .btn:hover,
body.page-id-404 .btn:hover,
body.page-id-406 .btn:hover,
body.page-id-407 .btn:hover,
body.page-id-408 .btn:hover,
body.page-id-889 .btn:hover,
body.page-id-876 .btn:hover,
body.page-id-1057 .btn:hover,
body.page-id-1053 .btn:hover,
body.page-id-1070 .btn:hover,
body.page-id-1081 .btn:hover,
body.page-id-1639 .btn:hover,
body.page-id-1646 .btn:hover,
body.page-id-135 input[type="submit"]:hover,
body.page-id-136 input[type="submit"]:hover,
body.page-id-137 input[type="submit"]:hover,
body.page-id-138 input[type="submit"]:hover,
body.page-id-147 input[type="submit"]:hover,
body.page-id-148 input[type="submit"]:hover,
body.page-id-149 input[type="submit"]:hover,
body.page-id-404 input[type="submit"]:hover,
body.page-id-406 input[type="submit"]:hover,
body.page-id-407 input[type="submit"]:hover,
body.page-id-408 input[type="submit"]:hover,
body.page-id-889 input[type="submit"]:hover,
body.page-id-876 input[type="submit"]:hover,
body.page-id-1057 input[type="submit"]:hover,
body.page-id-1053 input[type="submit"]:hover,
body.page-id-1070 input[type="submit"]:hover,
body.page-id-1081 input[type="submit"]:hover,
body.page-id-1639 input[type="submit"]:hover,
body.page-id-1649 input[type="submit"]:hover {
    opacity: 0.8;
}

/* ヘッダとフッタの背景色を透明にする */
body.page-id-135 .site-header,
body.page-id-136 .site-header,
body.page-id-137 .site-header,
body.page-id-138 .site-header,
body.page-id-147 .site-header,
body.page-id-148 .site-header,
body.page-id-149 .site-header,
body.page-id-404 .site-header,
body.page-id-406 .site-header,
body.page-id-407 .site-header,
body.page-id-408 .site-header,
body.page-id-889 .site-header,
body.page-id-876 .site-header,
body.page-id-1057 .site-header,
body.page-id-1053 .site-header,
body.page-id-1070 .site-header,
body.page-id-1081 .site-header,
body.page-id-135 .site-footer,
body.page-id-136 .site-footer,
body.page-id-137 .site-footer,
body.page-id-138 .site-footer,
body.page-id-147 .site-footer,
body.page-id-148 .site-footer,
body.page-id-149 .site-footer,
body.page-id-404 .site-footer,
body.page-id-406 .site-footer,
body.page-id-407 .site-footer,
body.page-id-408 .site-footer {
    background-color: transparent !important;
}

/* 表の背景を透明にしつつ文字が読みやすいように調整 */
body.page-id-135 .woocommerce-account .woocommerce-MyAccount-content,
body.page-id-136 .woocommerce-account .woocommerce-MyAccount-content,
body.page-id-137 .woocommerce-account .woocommerce-MyAccount-content,
body.page-id-138 .woocommerce-account .woocommerce-MyAccount-content,
body.page-id-147 .woocommerce-account .woocommerce-MyAccount-content,
body.page-id-148 .woocommerce-account .woocommerce-MyAccount-content,
body.page-id-149 .woocommerce-account .woocommerce-MyAccount-content,
body.page-id-404 .woocommerce-account .woocommerce-MyAccount-content,
body.page-id-406 .woocommerce-account .woocommerce-MyAccount-content,
body.page-id-407 .woocommerce-account .woocommerce-MyAccount-content,
body.page-id-408 .woocommerce-account .woocommerce-MyAccount-content {
    background-color: #ffffff; /* 背景を黒の半透明に設定 */
    padding: 20px;
    border-radius: 10px;
}

body.page-id-135 .woocommerce-account .woocommerce-MyAccount-navigation ul,
body.page-id-136 .woocommerce-account .woocommerce-MyAccount-navigation ul,
body.page-id-137 .woocommerce-account .woocommerce-MyAccount-navigation ul,
body.page-id-138 .woocommerce-account .woocommerce-MyAccount-navigation ul,
body.page-id-147 .woocommerce-account .woocommerce-MyAccount-navigation ul,
body.page-id-148 .woocommerce-account .woocommerce-MyAccount-navigation ul,
body.page-id-149 .woocommerce-account .woocommerce-MyAccount-navigation ul,
body.page-id-404 .woocommerce-account .woocommerce-MyAccount-navigation ul,
body.page-id-406 .woocommerce-account .woocommerce-MyAccount-navigation ul,
body.page-id-407 .woocommerce-account .woocommerce-MyAccount-navigation ul,
body.page-id-408 .woocommerce-account .woocommerce-MyAccount-navigation ul {
    background-color: #ffffff; /* 背景を黒の半透明に設定 */
    padding: 20px;
    border-radius: 10px;
}

body.page-id-135 .woocommerce-account .woocommerce-MyAccount-navigation ul li,
body.page-id-136 .woocommerce-account .woocommerce-MyAccount-navigation ul li,
body.page-id-137 .woocommerce-account .woocommerce-MyAccount-navigation ul li,
body.page-id-138 .woocommerce-account .woocommerce-MyAccount-navigation ul li,
body.page-id-147 .woocommerce-account .woocommerce-MyAccount-navigation ul li,
body.page-id-148 .woocommerce-account .woocommerce-MyAccount-navigation ul li,
body.page-id-149 .woocommerce-account .woocommerce-MyAccount-navigation ul li,
body.page-id-404 .woocommerce-account .woocommerce-MyAccount-navigation ul li,
body.page-id-406 .woocommerce-account .woocommerce-MyAccount-navigation ul li,
body.page-id-407 .woocommerce-account .woocommerce-MyAccount-navigation ul li,
body.page-id-408 .woocommerce-account .woocommerce-MyAccount-navigation ul li {
    background: transparent !important;
}

body.page-id-135 .woocommerce-Address-title,
body.page-id-136 .woocommerce-Address-title,
body.page-id-137 .woocommerce-Address-title,
body.page-id-138 .woocommerce-Address-title,
body.page-id-147 .woocommerce-Address-title,
body.page-id-148 .woocommerce-Address-title,
body.page-id-149 .woocommerce-Address-title,
body.page-id-404 .woocommerce-Address-title,
body.page-id-406 .woocommerce-Address-title,
body.page-id-407 .woocommerce-Address-title,
body.page-id-408 .woocommerce-Address-title {
    background-color: #ffffff; /* 背景を黒の半透明に設定 */
    padding: 10px;
    border-radius: 5px;
}

body.page-id-135 .woocommerce-Address,
body.page-id-136 .woocommerce-Address,
body.page-id-137 .woocommerce-Address,
body.page-id-138 .woocommerce-Address,
body.page-id-147 .woocommerce-Address,
body.page-id-148 .woocommerce-Address,
body.page-id-149 .woocommerce-Address,
body.page-id-404 .woocommerce-Address,
body.page-id-406 .woocommerce-Address,
body.page-id-407 .woocommerce-Address,
body.page-id-408 .woocommerce-Address {
    background-color: #ffffff; /* 背景を黒の半透明に設定 */
    padding: 10px;
    border-radius: 5px;
}

/*支払い、ボックス背景を黒に*/
.woocommerce-message,
woocommerce-info {
    border-top-color: #000;
}

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
    background-color: #f8f9fa;
    color: #222222;
}

.woocommerce-js form .form-row textarea,
.woocommerce-js input[type="email"],
.woocommerce-js input[type="number"],
.woocommerce-js input[type="password"],
.woocommerce-js input[type="reset"],
.woocommerce-js input[type="search"],
.woocommerce-js input[type="tel"],
.woocommerce-js input[type="text"],
.woocommerce-js input[type="url"],
.woocommerce-js textarea,
.woocommerce-page form .form-row textarea,
.woocommerce-page input[type="email"],
.woocommerce-page input[type="number"],
.woocommerce-page input[type="password"],
.woocommerce-page input[type="reset"],
.woocommerce-page input[type="search"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="text"],
.woocommerce-page input[type="url"],
.woocommerce-page textarea {
    background-color: #ffffff;
    color: #222222;
    border: 1px solid #e6e6e6;
}

.woocommerce-js .select2-container .select2-selection--single,
.woocommerce-js select,
.woocommerce-page .select2-container .select2-selection--single,
.woocommerce-page select {
    background-color: #ffffff;
    color: #222222;
    border: 1px solid #e6e6e6;
}

.woocommerce-page.woocommerce-checkout #payment div.payment_box,
.woocommerce.woocommerce-checkout #payment div.payment_box {
    background-color: rgba(0, 0, 0, 0.02);
}

.woocommerce-message,
.woocommerce-info {
    border-top-color: rgba(0, 0, 0, 0.03);
}

/*ロゴ*/
.woocommerce-message::before,
.woocommerce-info::before {
    color: #fff;
}

.Label {
    color: rab(255, 255, 255);
}

/*アカウント情報*/
body .woocommerce-MyAccount-navigation-link.is-active a {
    background-color: #666;
}

/*請求先/お届け先住所*/
.woocommerce .woocommerce-Addresses .woocommerce-Address-title,
.woocommerce .woocommerce-Addresses .woocommerce-column__title,
.woocommerce .woocommerce-MyAccount-content .woocommerce-Address-title,
.woocommerce .woocommerce-MyAccount-content .woocommerce-column__title,
.woocommerce .woocommerce-customer-details .woocommerce-Address-title,
.woocommerce .woocommerce-customer-details .woocommerce-column__title,
.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title,
.woocommerce-account .woocommerce-Addresses .woocommerce-column__title,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column__title,
.woocommerce-account .woocommerce-customer-details .woocommerce-Address-title,
.woocommerce-account .woocommerce-customer-details .woocommerce-column__title {
    background: rgba(0, 0, 0, 0.05);
}

/*支払方法*/
.woocommerce-js table.shop_table thead,
.woocommerce-page table.shop_table thead {
    background-color: rgba(50, 50, 93, 0.11);
}

/*決済方法追加*/
#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
    background-color: #f8f9fa;
    border: 1px solid #e6e6e6;
}

/*お買い物カゴ*/
.woocommerce-cart .cart-collaterals .cart_totals > h2,
.woocommerce-cart .cart-collaterals .cross-sells > h2 {
    background-color: rgba(0, 0, 0, 0.05);
}

/*住所選択*/
.select2-container--default .select2-results > .select2-results__options {
    background-color: #ffffff;
    color: #222222;
}

.select2-search--dropdown {
    padding: 0px;
}

label,
legend {
    color: #222222;
}

/*支払い注文情報*/
.woocommerce-page.woocommerce-checkout .woocommerce-order h2.woocommerce-column__title,
.woocommerce-page.woocommerce-checkout .woocommerce-order h2.woocommerce-order-details__title,
.woocommerce.woocommerce-checkout .woocommerce-order h2.woocommerce-column__title,
.woocommerce.woocommerce-checkout .woocommerce-order h2.woocommerce-order-details__title {
    background-color: transparent;
    color: #222222;
}

/*ログインページ*/
.select2-container .select2-choice,
.select2-container-multi .select2-choices,
.um .um-form input[type="number"],
.um .um-form input[type="password"],
.um .um-form input[type="search"],
.um .um-form input[type="tel"],
.um .um-form input[type="text"],
.um .um-form textarea {
    background-color: #ffffff;
    color: #222222;
    border: 1px solid #e6e6e6;
}

.select2-container .select2-choice:hover,
.select2-container-multi .select2-choices:hover,
.um .um-form input[type="number"]:hover,
.um .um-form input[type="password"]:hover,
.um .um-form input[type="search"]:hover,
.um .um-form input[type="tel"]:hover,
.um .um-form input[type="text"]:hover,
.um .um-form textarea:hover {
    background-color: #f8f9fa;
    color: #222222;
}

.um-field .select2.select2-container .select2-selection,
.um-search-filter .select2.select2-container .select2-selection {
    background-color: #ffffff !important;
    color: #222222 !important;
}

/* ログインページの新規登録画面の背景色変更 */
.page-id-152 .select2-container .select2-choice,
.page-id-152 .select2-container-multi .select2-choices,
.page-id-152 .um .um-form input[type="number"],
.page-id-152 .um .um-form input[type="password"],
.page-id-152 .um .um-form input[type="search"],
.page-id-152 .um .um-form input[type="tel"],
.page-id-152 .um .um-form input[type="text"],
.page-id-152 .um .um-form textarea,
.page-id-152 .um-field .select2.select2-container .select2-selection,
.page-id-152 .um-search-filter .select2.select2-container .select2-selection {
    background-color: #ffffff !important;
    color: #222222 !important;
}

/* プレースホルダーテキストの色変更 */
.page-id-152 .um .um-form input::placeholder,
.page-id-152 .um .um-form textarea::placeholder {
    color: #ccc !important; /* ライトグレーのプレースホルダー */
}

/* ドロップダウンメニューの背景色とテキスト色変更 */
.page-id-152 .um-field .select2-container.select2-container--open .select2-dropdown .select2-results li,
.page-id-152 .um-search-filter .select2-container.select2-container--open .select2-dropdown .select2-results li {
    color: #222222 !important;
}

/* ドロップダウン全体の背景色変更 */
.page-id-152 .select2-dropdown {
    background-color: #ffffff !important;
}

/* 選択済みオプションの背景色 */
.page-id-152 .um-field .select2-dropdown .select2-results li.select2-results__option[aria-selected="true"],
.page-id-152 .um-search-filter .select2-dropdown .select2-results li.select2-results__option[aria-selected="true"] {
    background-color: #f0f7ff !important;
}

/* ハイライトされたオプションの背景色とテキスト色変更 */
.page-id-152 .um-field .select2-dropdown .select2-results li.select2-results__option.select2-results__option--highlighted,
.page-id-152 .um-search-filter .select2-dropdown .select2-results li.select2-results__option.select2-results__option--highlighted {
    background: #0077FF !important;
    color: #ffffff !important;
}

/*list-test*/
.ast-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.gacha-prizes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* 左詰めに変更 */
    width: 60%; /* 横幅を60%に設定 */
    margin: 0 auto; /* 中央寄せ */
}

.gacha-prize-item {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    width: 100%;
}

.gacha-prize-image {
    margin-right: 10px;
}

.gacha-prize-image img {
    width: 100px; /* 各画像のサイズを調整 */
    height: auto;
}

/* サムネイル画像のサイズ調整 - 大きく表示 */
img[alt="ガチャサムネイル"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.gacha-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 80%; /* 横幅を80%に */
    margin: 0 auto;
}

.gacha-item {
    width: 100%;
    margin-bottom: 20px;
    /* padding: 10px; */
}

.gacha-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: auto;
}

/*ガチャ画像*/
.gacha-thumbnail {
    flex: 5;
    text-align: center;
    overflow: hidden; /* 画像を切り取らない */
}

.gacha-thumbnail img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.gacha-thumbnail img:hover {
    transform: scale(1.1);
}

/*
.gacha-details {
    flex: 1;
    display: block;
    background-color: #000;
}*/

.gacha-remaining {
    flex: 4;
    text-align: left;
}

/*残り数bar*/
.remaining-bar {
    height: 10px;
    background-color: #9b51e0; /* バーの色 */
    margin-bottom: 15px;
    border-radius: 5px;
}

.gacha-button,
.gacha-button-top {
    flex: 1;
    text-align: right;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gacha-button button,
.gacha-button-top button {
    margin-right: 5px;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    background: #0077ff !important;
    font-size: 18px;
    width: 150px;
}

/* 残り枚数の下のマージンを調整 */
.gacha-remaining p {
    margin-bottom: 8px;
    margin-left: 5px;
    margin-top: 10px;
}

/* モーダルウィンドウのスタイル */
.modal {
    display: none;
    position: fixed;
    z-index: 1000; /* より高い値に設定して他の要素の上に表示 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6); /* 背景をより暗く */
}

/* モーダル内のテキストスタイル */
.modal-content h2 {
    margin-bottom: 20px;
}

.modal-content p {
    line-height: 1.6;
}

/* 閉じるボタンのスタイル（必要に応じて） */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #000000;
    text-decoration: none;
    cursor: pointer;
}

.collection-list img {
    margin-top: 25px;
    width: 30%;
}

/* フォーム内の画像のスタイルを変更 */
.collection-list form img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
}

/* ラジオボタンのスタイルを変更 */
.collection-list form input[type="radio"] {
    margin-right: 5px;
    margin-left: 5px;
}

/* 送信ボタンのスタイルを変更 */
.collection-list form button[type="submit"] {
    background: #0077ff;
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 25px;
    transition: opacity 0.5s ease, box-shadow 0.5s ease, font-weight 0.5s ease;
    margin-left: 10px;
}

/* 送信ボタンのホバースタイルを変更 */
.collection-list form button[type="submit"]:hover {
    opacity: 0.8;
}

/* フォーム全体のスタイルを変更 */
.collection-list form {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

@media (max-width: 730px) {
    .collection-list img {
        margin-top: 5px;
        width: 45%;
    }

    .collection-list p {
        font-size: 15px;
    }
}

@media (max-width: 680px) {
    .collection-list {
        font-size: 14px;
    }

    .collection-list form button[type="submit"] {
        font-size: 14px;
        font-weight: 450;
        padding: 5px 10px;
    }
}

/*ガチャリスト横幅など*/
@media (max-width: 820px) {
    .gacha-button button,
    .gacha-button-top button {
        font-size: 12px;
        width: 105px;
        padding: 11px 5px;
    }

    .gacha-list {
        width: 95%;
    }
}

@media (max-width: 700px) {
    .gacha-button button,
    .gacha-button-top button {
        font-size: 11px;
    }

    .gacha-list {
        width: 100%;
    }
}

/*ボタンやモーダルを横幅一杯に*/
.entry-content[ast-blocks-layout] > * {
    max-width: 100%;
}

/* モーダルコンテンツのスタイル */
.modal-content {
    background-color: #fff;
    margin: 25% auto; /* 上下は空けて中央に配置 */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 400px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 閉じるボタンは無くす */
.close {
    display: none; /* 閉じるボタンを非表示に設定 */
}

/* モーダル内のボタンのスタイル */
.modal-buttons {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.modal-button {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.modal-button.confirm {
    background: #0077ff;
    color: #ffffff;
}

.modal-button.confirm:hover {
    opacity: 0.8;
    background: #0077ff;
}

/* テキストのスタイル */
.modal-content p {
    text-align: center; /* 横中央に配置 */
}

@media (max-width: 768px) {
    /* モーダルコンテンツのスタイル */
    .modal-content {
        background-color: #fff;
        margin: 15% auto; /* 上下は空けて中央に配置 */
        padding: 20px;
        border: 1px solid #888;
        width: 85%;
        max-width: 400px;
        border-radius: 10px;
        position: relative;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    /* 閉じるボタンは無くす */
    .close {
        display: none; /* 閉じるボタンを非表示に設定 */
    }

    /* モーダル内のボタンのスタイル */
    .modal-buttons {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
    }

    .modal-button {
        padding: 10px 20px;
        border: none;
        cursor: pointer;
        font-size: 12px;
        border-radius: 5px;
        transition: background-color 0.3s ease;
    }

    .modal-button.cancel {
        background-color: #fff;
        border: 1px solid #ff4d4f; /* ボーダーを追加 */
    }

    .modal-button.confirm {
        background: #0077ff;
        color: #ffffff;
    }

    .modal-button.cancel:hover {
        background-color: #ff4d4f;
        color: #fff !important;
    }
}

/* トップページ内のボタン内文字の色を白に設定 */
body.page-id-1646 .wp-block-button__link,
body.page-id-1646 .wp-block-search__button,
body.page-id-1646 .wp-block-file__button,
body.page-id-1646 button {
    color: #ffffff !important;
}

/*トップページのスクロールを無くす*/
#ast-scroll-top.ast-scroll-top-icon.ast-scroll-to-top-right {
    display: none !important;
}

/* 結果画面 */
.post-1057.page.type-page.status-publish.ast-article-single .entry-content ul {
    display: grid;
    flex-wrap: wrap; /* 子要素が見切れる前に折り返すように設定 */
    list-style: none; /* リストスタイルを削除 */
    padding: 0; /* パディングを削除 */
    margin: 0; /* マージンを削除 */
}

.post-1057.page.type-page.status-publish.ast-article-single .entry-content ul li {
    flex: 1 1 200px; /* 子要素の基本サイズを200pxに設定し、残りのスペースを均等に分ける */
    display: flex; /* 子要素の内部もフレックスボックスで配置 */
    flex-direction: column; /* 子要素の内部を縦に並べる */
    align-items: center; /* 子要素の内部を中央揃えにする */
    justify-content: center; /* 子要素の内部を中央揃えにする */
    padding: 0px;
    /* margin: 10px; */
    border: 1px solid #ccc; /* 子要素にボーダーを追加 */
    border-radius: 10px; /* 子要素の角を丸くする */
    transition: transform 0.3s ease;
    max-width: 300px;
    overflow: hidden;
}

.post-1057.page.type-page.status-publish.ast-article-single .entry-content ul li img {
    width: 100%;
    height: auto;
    margin-top: 0px;
}

.post-1057.page.type-page.status-publish.ast-article-single .entry-content ul li:hover {
    transform: scale(1.03); /* ホバー時に少し拡大する */
}

/* li内のp要素のスタイルを変更 */
.post-1057.page.type-page.status-publish.ast-article-single .entry-content ul li p {
    white-space: nowrap; /* テキストを折り返さないように設定 */
    overflow: hidden; /* テキストがあふれた場合に隠す */
    text-overflow: ellipsis; /* あふれたテキストに省略記号を追加 */
    width: 100%;
    text-align: center;
}

.collection-list {
    display: flex;
    flex-wrap: wrap; /* 子要素が見切れる前に折り返すように設定 */
    list-style: none; /* リストスタイルを削除 */
    padding: 0; /* パディングを削除 */
    margin: 0; /* マージンを削除 */
}

.collection-list li {
    flex: 1 1 200px;
    display: flex; /* 子要素の内部もフレックスボックスで配置 */
    flex-direction: column; /* 子要素の内部を縦に並べる */
    align-items: center; /* 子要素の内部を中央揃えにする */
    justify-content: center; /* 子要素の内部を中央揃えにする */
    /* padding: 0px;  子要素の内側にパディングを追加 */
    margin: 10px;
    border: 1px solid #ccc; /* 子要素にボーダーを追加 */
    border-radius: 10px; /* 子要素の角を丸くする */
    transition: transform 0.3s ease;
    overflow: hidden;
}

.collection-list li p {
    white-space: nowrap; /* テキストを折り返さないように設定 */
    overflow: hidden; /* テキストがあふれた場合に隠す */
    text-overflow: ellipsis; /* あふれたテキストに省略記号を追加 */
    width: 100%;
    text-align: center;
}

.collection-list li img {
    width: 100%;
    height: auto;
    margin-top: 0px;
}

.collection-list li:hover {
    transform: scale(1.03); /* ホバー時に少し拡大する */
}

/*ガチャ詳細ページの画像小さくなる問題*/
.gacha-prizes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 70%;
    margin: 0 auto;
}

.gacha-item {
    margin-bottom: 40px;
}

@media (max-width: 800px) {
    .gacha-prizes {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        margin: 0 auto;
        margin-left: 3px;
    }

    .gacha-item {
        margin-bottom: 20px;
    }

    .gacha-prize-image img {
        min-width: 90px;
        height: 150px;
    }
}

#gacha-animation {
    position: fixed; /* 画面全体に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100; /* 他の要素よりも上に表示 */
    background-color: black; /* 背景を黒にする */
    overflow: hidden; /* はみ出した部分を非表示にする */
}

#gacha-animation video {
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* アスペクト比を維持して画面全体に表示 */
}

@media only screen and (max-width: 768px) {
    #gacha-animation {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #gacha-animation video {
        width: 100vw;
        height: auto; /* 高さを自動調整 */
        object-fit: contain; /* 横幅にフィットさせて高さを維持 */
    }
}

/*ガチャの説明装飾*/
.gacha-prize-title {
    border: 2px solid white;
    padding: 10px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    color: white;
    font-weight: bold;
}

.add-submit-button {
    position: fixed;
    bottom: 0;
    left: 0px;
    right: 0px;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #ffffff;
    border-top: 1px solid #e6e6e6;
    padding: 10px 0;
    z-index: 1000;
}

/* コレクションの一括設定ボタン */
.add-submit-button button {
    margin: 0 10px; /* ボタン間のマージン */
    background: #0077ff;
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: opacity 0.5s ease, box-shadow 0.5s ease, font-weight 0.5s ease;
}

/* ボタンのホバースタイル */
.add-submit-button button:hover {
    opacity: 0.8;
}

.submit-button {
    background: #0077ff;
    color: #ffffff;
    font-size: 15px;
    padding: 10px 35px;
    cursor: pointer;
    transition: opacity 0.5s ease, box-shadow 0.5s ease;
    font-weight: 550;
    width: 100%;
}

/* ページIDが118ログインの背景色*/
.page-id-151 .select2-container .select2-choice,
.page-id-151 .select2-container-multi .select2-choices,
.page-id-151 .um .um-form input[type="number"],
.page-id-151 .um .um-form input[type="password"],
.page-id-151 .um .um-form input[type="search"],
.page-id-151 .um .um-form input[type="tel"],
.page-id-151 .um .um-form input[type="text"],
.page-id-151 .um .um-form textarea {
    background-color: #ffffff;
    color: #222222;
    border: 1px solid #e6e6e6;
}

/*お知らせのテキスト白く*/
#tapMessage {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
    z-index: 1000;
}

h1,
.entry-content h1,
h2,
.entry-content h2,
h3,
.entry-content h3,
h4,
.entry-content h4,
h5,
.entry-content h5,
h6,
.entry-content h6 {
    color: #fff;
}

/*トップページのボタン*/
.gacha-button,
.gacha-button-top {
    padding: 11px 0px;
}

/*無限ガチャのフッター*/
/*#infiGacha1,*/
/*#infiGacha10,*/
/*#infiGacha100 {*/
/*    background: #0077ff;*/
/*    color: #ffffff;*/
/*    font-size: 15px;*/
/*    padding: 10px 35px;*/
/*    cursor: pointer;*/
/*    transition: opacity 0.5s ease, box-shadow 0.5s ease;*/
/*    font-weight: 550;*/
/*}*/

.infi-gacha-button {
    flex: 1;
    text-align: right;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-width: 768px) {
    #gacha-animation {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #gacha-animation video {
        width: 100vw;
        height: auto; /* 高さを自動調整 */
        object-fit: contain; /* 横幅にフィットさせて高さを維持 */
    }
}

#tapMessage {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
    z-index: 1000;
}

h1,
.entry-content h1,
h2,
.entry-content h2,
h3,
.entry-content h3,
h4,
.entry-content h4,
h5,
.entry-content h5,
h6,
.entry-content h6 {
    color: #fff;
}

.gacha-button,
.gacha-button-top {
    padding: 11px 0px;
}

/*#infiGacha1,*/
/*#infiGacha10,*/
/*#infiGacha100 {*/
/*    background: #0077ff;*/
/*    color: #ffffff;*/
/*    font-size: 15px;*/
/*    padding: 10px 35px;*/
/*    cursor: pointer;*/
/*    transition: opacity 0.5s ease, box-shadow 0.5s ease;*/
/*    font-weight: 550;*/
/*}*/

@media (max-width: 500px) {
    /*#infiGacha1,*/
    /*#infiGacha10,*/
    /*#infiGacha100 {*/
    /*    background: #0077ff;*/
    /*    color: #ffffff;*/
    /*    font-size: 12px;*/
    /*    padding: 10px 5px;*/
    /*    cursor: pointer;*/
    /*    transition: opacity 0.5sease, box-shadow 0.5sease;*/
    /*    font-weight: 550;*/
    /*}*/
}

@media (max-width: 350px) {
    /*#infiGacha1,*/
    /*#infiGacha10,*/
    /*#infiGacha100 {*/
    /*    background: #0077ff;*/
    /*    color: #ffffff;*/
    /*    font-size: 10px;*/
    /*    padding: 8px 5px;*/
    /*    cursor: pointer;*/
    /*    margin-left: 5px;*/
    /*    margin-right: 5px;*/
    /*    transition: opacity 0.5sease, box-shadow 0.5sease;*/
    /*    font-weight: 550;*/
    /*}*/
}

.infi-gacha-button {
    flex: 1;
    text-align: right;
    display: flex;
    justify-content: center;
    align-items: center;
}

.entry-content[data-ast-blocks-layout] > * {
    max-width: 100% !important;
}

/*.category-item.active a {*/
/*    background-color: #333 !important;*/
/*    color: #333;*/
/*    font-weight: bold;*/
/*}*/

/* 年のプルダウン文字を #333 にする例 */
select.picker__select--year,
select.picker__select--year option {
    color: #333 !important;
}

.woocommerce-notices-wrapper {
    display: none;
}

.woocommerce .col2-set,
.woocommerce-page .col2-set {
    display: none;
}

.entry-content ul,
.entry-content ol {
    padding: revert;
    margin: revert;
    padding-left: 0px;
}

.woocommerce-MyAccount-content > p {
    display: none !important;
}

/*.category-item.active a {*/
/*    background-color: #333 !important;*/
/*    color: #333;*/
/*    font-weight: bold;*/
/*}*/

/* 年のプルダウン文字を #333 にする例 */
select.picker__select--year,
select.picker__select--year option {
    color: #333 !important;
}

.woocommerce-notices-wrapper {
    display: none;
}

.woocommerce .col2-set,
.woocommerce-page .col2-set {
    display: none;
}

.entry-content ul,
.entry-content ol {
    padding: revert;
    margin: revert;
    padding-left: 0px;
}

.woocommerce-MyAccount-content > p {
    display: none !important;
}

.coupon {
    display: none !important;
}

.wc-stripe-wallet-notice {
    background-color: transparent !important;
}

/* =====================================================
   Stripe決済フォーム - クリーンデザイン
   ===================================================== */
.wc-stripe-elements-field,
.wc-stripe-upe-element,
#wc-stripe-card-element,
.wc-payment-form select,
.wc-payment-form input,
select[name="wc-stripe-payment-token"],
.woocommerce-SavedPaymentMethods-token select,
.woocommerce-checkout .payment_box select {
    background: #ffffff !important;
    color: #222222 !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
}

.wc-stripe-elements-field:focus,
.wc-payment-form select:focus,
.wc-payment-form input:focus {
    border-color: #0077FF !important;
    box-shadow: 0 0 0 3px rgba(0, 119, 255, 0.1) !important;
    outline: none !important;
}

/* 保存済みカード選択 */
.woocommerce-SavedPaymentMethods,
.wc-saved-payment-methods {
    background: #ffffff !important;
}

.woocommerce-SavedPaymentMethods label,
.wc-saved-payment-methods label {
    color: #222222 !important;
}

/* Stripe iframeコンテナ */
.StripeElement,
.stripe-card-group {
    background: #ffffff !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: 8px !important;
    padding: 12px !important;
}

/* Stripe Select2（保存済みカード選択） */
#select2-stripe_cc_saved_method_key-container,
.select2-container--default .select2-selection--single,
.wc-stripe-saved-method-container select,
.wc-stripe-saved-method-container .select2-container,
.wc-stripe-saved-method .select2-selection,
[id*="stripe"] .select2-selection,
[id*="stripe"] .select2-selection--single,
.payment_box .select2-container .select2-selection--single {
    background: #ffffff !important;
    color: #222222 !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: 8px !important;
    min-height: 44px !important;
}

#select2-stripe_cc_saved_method_key-container span,
.select2-container--default .select2-selection--single .select2-selection__rendered,
.payment_box .select2-selection__rendered {
    color: #222222 !important;
    background: #ffffff !important;
    line-height: 44px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    background: #ffffff !important;
}

/* Select2ドロップダウン */
.select2-dropdown,
.select2-container--open .select2-dropdown {
    background: #ffffff !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: 8px !important;
}

.select2-results__option {
    background: #ffffff !important;
    color: #222222 !important;
    padding: 10px 14px !important;
}

.select2-results__option--highlighted,
.select2-results__option:hover {
    background: #f0f7ff !important;
    color: #0077FF !important;
}

.select2-results__option--selected {
    background: #e6f2ff !important;
    color: #0077FF !important;
}

.text-link:hover {
    /* 必要に応じてプロパティをリセット・削除 */
    color: inherit;
    text-decoration: none;
    background-color: #444;
    /* など */
}
@media (max-width: 1475px) {
    .add-submit-button {
        display: grid !important; /* あるいは display: flex; flex-wrap: wrap; 等でもOK */
        grid-template-columns: repeat(2, 1fr) !important; /* 2列にする */
        gap: 16px; /* 列や行の間隔を調整 */
    }

    /* ボタン自体を大きくしたい場合は、必要に応じて幅指定する */
    .add-submit-button button {
        width: 100%;
    }
    .add-submit-button button {
        margin: 0 0px !important;
        background: #0077ff;
        color: #ffffff;
        border: none;
        cursor: pointer;
        transition: opacity 0.5sease, box-shadow 0.5sease, font-weight 0.5sease;
    }
}
@media (max-width: 415px) {
    .add-submit-button {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #000;
        padding: 5px;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
        z-index: 100;
        margin: 0;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
    }
    .action-button {
        font-size: 14px !important;
    }
}

.post-1057.page.type-page.status-publish.ast-article-single .entry-content ul {
    justify-content: center !important;
}

@media (max-width: 400px) {
    .filter-link {
        padding: 5px;
    }
}

@media (max-width: 800px) {
    .modal-content {
        top: 25% !important;
    }
}

/* アニメーション効果を維持 */
.card {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ボタン間のギャップ調整（モバイル対応） */
@media (max-width: 768px) {
    .btn {
        margin-bottom: 0.5rem;
    }
}

/* =====================================================
   リトライガチャ - クリーンデザイン
   ===================================================== */

/* リトライガチャページ全体 */
body.page-template-page-retrygacha,
body[class*="retrygacha"] {
    background: #ffffff !important;
}

/* メインカード（ガチャ選択エリア） */
.page-template-page-retrygacha .card.cyber-card,
body[class*="retrygacha"] .card.cyber-card {
    background: #ffffff !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

.page-template-page-retrygacha .cyber-card-inner,
body[class*="retrygacha"] .cyber-card-inner {
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 20px !important;
}

.page-template-page-retrygacha .card-body,
.page-template-page-retrygacha .cyber-card .card-body,
body[class*="retrygacha"] .card-body,
body[class*="retrygacha"] .cyber-card .card-body {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 20px !important;
    color: #222222 !important;
}

/* タイトルコンテナ（同じガチャをもう一度引きますか？） */
.page-template-page-retrygacha .cyber-title-container,
body[class*="retrygacha"] .cyber-title-container {
    background: #f8f9fa !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: 12px !important;
    padding: 16px !important;
}

.page-template-page-retrygacha .cyber-title,
.page-template-page-retrygacha .cyber-title-text,
.page-template-page-retrygacha h5.cyber-title,
.page-template-page-retrygacha span.cyber-title-text,
body[class*="retrygacha"] .cyber-title,
body[class*="retrygacha"] .cyber-title-text,
body[class*="retrygacha"] h5.cyber-title,
body[class*="retrygacha"] span.cyber-title-text {
    color: #222222 !important;
    text-shadow: none !important;
    font-weight: 600 !important;
    -webkit-text-fill-color: #222222 !important;
}

/* ガチャコンテンツエリア */
.page-template-page-retrygacha .cyber-content,
body[class*="retrygacha"] .cyber-content {
    background: #f8f9fa !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: 12px !important;
    padding: 16px !important;
}

.page-template-page-retrygacha .cyber-content:hover,
body[class*="retrygacha"] .cyber-content:hover {
    border-color: #0077FF !important;
    box-shadow: 0 4px 16px rgba(0, 119, 255, 0.15) !important;
}

/* ガチャヘッダー（ポイント・残り数） */
.page-template-page-retrygacha .gacha-header,
body[class*="retrygacha"] .gacha-header {
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
}

.page-template-page-retrygacha .gacha-price,
.page-template-page-retrygacha div.gacha-price,
body[class*="retrygacha"] .gacha-price,
body[class*="retrygacha"] div.gacha-price {
    background: #0077ff !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #ffffff !important;
}

.page-template-page-retrygacha .stock-text,
body[class*="retrygacha"] .stock-text {
    color: #222222 !important;
}

.page-template-page-retrygacha .stock-info,
body[class*="retrygacha"] .stock-info {
    background: transparent !important;
    border-radius: 4px !important;
}

.page-template-page-retrygacha .stock-info .progress-bar,
body[class*="retrygacha"] .stock-info .progress-bar {
    background: linear-gradient(90deg, #0077FF, #00BFFF) !important;
}

/* ポイント還元完了カード（上部の白カード） */
.page-template-page-retrygacha .card.bg-dark.text-white,
body[class*="retrygacha"] .card.bg-dark.text-white {
    background: #ffffff !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    color: #222222 !important;
}

.page-template-page-retrygacha .card.bg-dark .card-body,
.page-template-page-retrygacha .card.bg-dark .card-body.text-center,
body[class*="retrygacha"] .card.bg-dark .card-body,
body[class*="retrygacha"] .card.bg-dark .card-body.text-center {
    background: #ffffff !important;
    color: #222222 !important;
}

.page-template-page-retrygacha .card.bg-dark .card-title,
.page-template-page-retrygacha .card.bg-dark h5,
.page-template-page-retrygacha .card.bg-dark h5.card-title,
body[class*="retrygacha"] .card.bg-dark .card-title,
body[class*="retrygacha"] .card.bg-dark h5,
body[class*="retrygacha"] .card.bg-dark h5.card-title {
    color: #222222 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #222222 !important;
}

.page-template-page-retrygacha .card.bg-dark p,
.page-template-page-retrygacha .card.bg-dark p.mb-0,
body[class*="retrygacha"] .card.bg-dark p,
body[class*="retrygacha"] .card.bg-dark p.mb-0 {
    color: #666666 !important;
    -webkit-text-fill-color: #666666 !important;
}

/* ポイント表示（2,689,301pt → 3,509,301pt） */
.page-template-page-retrygacha .card.bg-dark .h4,
.page-template-page-retrygacha .card.bg-dark h4,
.page-template-page-retrygacha .card.bg-dark div.h4,
.page-template-page-retrygacha .d-flex .h4,
.page-template-page-retrygacha .h4.mb-0,
.page-template-page-retrygacha div.h4.mb-0,
body[class*="retrygacha"] .card.bg-dark .h4,
body[class*="retrygacha"] .card.bg-dark h4,
body[class*="retrygacha"] .card.bg-dark div.h4,
body[class*="retrygacha"] .d-flex .h4,
body[class*="retrygacha"] .h4.mb-0,
body[class*="retrygacha"] div.h4.mb-0 {
    color: #0077FF !important;
    text-shadow: none !important;
    font-weight: 700 !important;
    -webkit-text-fill-color: #0077FF !important;
}

/* ガチャボタン */
.page-template-page-retrygacha .gacha-button-group button,
.page-template-page-retrygacha .gacha-button button,
body[class*="retrygacha"] .gacha-button-group button,
body[class*="retrygacha"] .gacha-button button {
    background: #0077FF !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(0, 119, 255, 0.25) !important;
    transition: background 0.2s, transform 0.2s !important;
}

.page-template-page-retrygacha .gacha-button-group button:hover,
.page-template-page-retrygacha .gacha-button button:hover,
body[class*="retrygacha"] .gacha-button-group button:hover,
body[class*="retrygacha"] .gacha-button button:hover {
    background: #005ecc !important;
    transform: translateY(-2px) !important;
}

/* 矢印アイコン */
.page-template-page-retrygacha .mx-3,
body[class*="retrygacha"] .mx-3 {
    color: #222222 !important;
}

/* 一般的なcyber-cardスタイル（他のページ用） */
.cyber-card {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.cyber-card-inner {
    background: #f8f9fa;
    border-radius: 14px;
    padding: 2px;
}

.cyber-title-container {
    position: relative;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    background: #ffffff;
    min-height: auto;
}

.cyber-title {
    color: #222222;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    text-transform: none;
    letter-spacing: 0.02em;
    text-shadow: none;
    margin: 0;
    font-weight: 600;
}

.cyber-title-text {
    position: relative;
    z-index: 1;
    color: #222222;
}

.cyber-content {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    backdrop-filter: none;
    border-radius: 12px;
    transition: all 0.3s ease;
    min-height: auto;
}

.cyber-thumbnail {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.cyber-content:hover {
    box-shadow: 0 4px 16px rgba(0, 119, 255, 0.15);
    border-color: #0077FF;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .cyber-title {
        font-size: 1.2rem;
    }
}

/* ホバー時 */
.carousel-control-prev:hover,
.carousel-control-next:hover {
    background-color: rgba(128, 128, 128, 0.5);
}

/* クリック時（アクティブ状態） */
.carousel-control-prev:active,
.carousel-control-next:active,
.carousel-control-prev:focus,
.carousel-control-next:focus {
    background-color: rgba(128, 128, 128, 0.5) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* アイコンのスタイル調整 */
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon,
.carousel-control-prev:active .carousel-control-prev-icon,
.carousel-control-next:active .carousel-control-next-icon,
.carousel-control-prev:focus .carousel-control-prev-icon,
.carousel-control-next:focus .carousel-control-next-icon {
    filter: brightness(0.8);
}

#videoCarousel {
    height: 50vh; /* ビューポートの高さの50% */
    overflow: hidden;
}

#videoCarousel .carousel-item {
    height: 50vh;
}

#videoCarousel video,
#videoCarousel img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* アスペクト比を保持したまま領域を埋める */
}
.gacha-details {
    background-color: rgba(0, 0, 0, 0.7); /* 70%の不透明度の黒 */
}

.futuristic-button {
    background: linear-gradient(45deg, #00d2ff, #3a7bd5);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 25px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
}

.futuristic-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: 0.5s;
}

.futuristic-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0, 210, 255, 0.4);
}

.futuristic-button:hover::before {
    left: 100%;
}

.futuristic-button:disabled {
    background: linear-gradient(45deg, #808080, #a0a0a0);
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.7;
}

.news-section {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}

.news-title {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: #333;
    position: relative;
    padding-left: 1rem;
}

.news-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background: linear-gradient(to bottom, #6e8efb, #4a6cf7);
    border-radius: 2px;
}

.news-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.news-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    transition: all 0.3s ease;
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.news-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-color: #4a6cf7;
}

.news-date {
    min-width: 120px;
    padding-right: 1.5rem;
}

.date-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: #4a6cf7;
    font-weight: 500;
    font-size: 0.9rem;
}

.news-content {
    flex-grow: 1;
}

.news-item-title {
    margin: 0;
    color: #333;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
}

.news-more-link {
    margin-top: 2rem;
    text-align: center;
}

.more-button {
    display: inline-flex;
    align-items: center;
    padding: 0.8rem 2rem;
    background: linear-gradient(45deg, #6e8efb, #4a6cf7);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.more-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(74, 108, 247, 0.3);
    color: white;
}

.arrow {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.more-button:hover .arrow {
    transform: translateX(5px);
}

@media (max-width: 768px) {
    .news-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .news-date {
        padding-right: 0;
    }
}

.news-section {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}

.news-title {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: #333;
    position: relative;
    padding-left: 1rem;
}

.news-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background: linear-gradient(to bottom, #6e8efb, #4a6cf7);
    border-radius: 2px;
}

.news-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.news-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    transition: all 0.3s ease;
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.news-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-color: #4a6cf7;
}

.news-date {
    min-width: 120px;
    padding-right: 1.5rem;
}

span.date-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: #4a6cf7 !important;
    font-weight: 500;
    font-size: 0.9rem;
}

.news-content {
    flex-grow: 1;
}

h3.news-item-title {
    margin: 0;
    color: #333 !important;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
}

.news-more-link {
    margin-top: 2rem;
    text-align: center;
}

.more-button {
    display: inline-flex;
    align-items: center;
    padding: 0.8rem 2rem;
    background: linear-gradient(45deg, #6e8efb, #4a6cf7);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.more-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(74, 108, 247, 0.3);
    color: white;
}

.arrow {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.more-button:hover .arrow {
    transform: translateX(5px);
}

@media (max-width: 768px) {
    .news-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .news-date {
        padding-right: 0;
    }
}

:root {
    --cyber-blue: #00d9ff;
    --neon-blue: #00f0ff;
    --deep-purple: #8a2be2;
    --neon-purple: #e500ff;
    --gold: #ffd700;
    --gold-dark: #ffa500;
    --space-black: #0a0a0f;
    --grid-color: rgba(0, 217, 255, 0.2);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: var(--space-black);
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* ヘッダー */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: linear-gradient(180deg, rgba(10, 10, 15, 0.98), rgba(20, 20, 30, 0.95));
    backdrop-filter: blur(15px);
    border-bottom: 3px solid var(--cyber-blue);
    box-shadow: 0 2px 20px rgba(0, 217, 255, 0.3), 0 4px 40px rgba(138, 43, 226, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 1000;
    padding: 0 1rem;
}

.header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--neon-blue), transparent);
    animation: shimmer 3s linear infinite;
}

.header-content {
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    height: 45px;
    width: auto;
}

.logo img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0.6rem 1.2rem;
    border: 2px solid var(--deep-purple);
    background: linear-gradient(135deg, var(--deep-purple), var(--cyber-blue));
    border-radius: 25px;
    box-shadow: 0 2px 10px rgba(138, 43, 226, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.header-tab:hover {
    border-color: var(--neon-blue);
    box-shadow: 0 0 15px var(--cyber-blue), 0 2px 20px rgba(0, 217, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, var(--cyber-blue), var(--neon-purple));
    transform: translateY(-1px);
}

/* CSSアイコン - サイズアップ */
.header-icon {
    width: 28px;
    height: 28px;
    position: relative;
}

/* ロケットアイコン */
.rocket-icon::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 20px;
    background: white;
    border-radius: 50% 50% 0 0;
    top: 2px;
    left: 7px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.rocket-icon::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 8px solid rgba(255, 255, 255, 0.8);
    bottom: 0;
    left: 10px;
    filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.3));
}

/* ポイントアイコン */
.point-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.point-icon::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    background: white;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), inset 3px 3px 0 rgba(255, 255, 255, 0.8), inset -3px -3px 0 rgba(0, 0, 0, 0.2);
}

.point-icon::after {
    content: "P";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 10px;
    color: var(--deep-purple);
    font-weight: bold;
    z-index: 1;
}

/* マイページアイコン */
.menu-icon {
    width: 42px;
    height: 42px;
    cursor: pointer;
    position: relative;
    transition: transform 0.3s ease;
}

.menu-icon:hover {
    transform: scale(1.1);
}

.user-icon {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--deep-purple), var(--cyber-blue));
    border-radius: 50%;
    border: 2px solid var(--neon-blue);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px var(--cyber-blue);
}

.user-icon::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--neon-blue);
    border-radius: 50%;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 8px var(--neon-blue);
}

.user-icon::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 18px;
    background: var(--neon-blue);
    border-radius: 50% 50% 0 0;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 8px var(--neon-blue);
}

.header-text {
    font-size: 0.85rem;
    color: white;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.point-display {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 0.8rem;
    color: white;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* スライダーセクション */
.slider-section {
    margin-top: 40px;
    width: 100%;
    overflow: hidden;
    position: relative;
    aspect-ratio: 2481 / 1754;
    max-height: 500px;
    background: linear-gradient(45deg, #0a0a0f, #1a0033);
    border-bottom: 2px solid var(--cyber-blue);
}

/* PC版でmax-heightを解除 */
@media (min-width: 768px) {
    .slider-section {
        max-height: none;
        height: calc(100vw * 1754 / 2481);
        max-height: 600px;
    }
}

.slider-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.slider-container {
    display: flex;
    width: 300%;
    height: 100%;
    transition: transform 0.5s ease;
}

/* 矢印ボタン */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(138, 43, 226, 0.8);
    border: 2px solid var(--cyber-blue);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.slider-arrow:hover {
    background: rgba(0, 217, 255, 0.8);
    box-shadow: 0 0 20px var(--cyber-blue);
}

.slider-arrow.prev {
    left: 1rem;
}

.slider-arrow.next {
    right: 1rem;
}

/* ドット矢印 */
.arrow-icon {
    width: 12px;
    height: 12px;
    position: relative;
}

.arrow-icon::before,
.arrow-icon::after {
    content: "";
    position: absolute;
    background: var(--neon-blue);
    box-shadow: 0 0 5px var(--neon-blue);
}

.arrow-icon.left::before {
    width: 12px;
    height: 3px;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(-45deg);
    transform-origin: left center;
}

.arrow-icon.left::after {
    width: 12px;
    height: 3px;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(45deg);
    transform-origin: left center;
}

.arrow-icon.right::before {
    width: 12px;
    height: 3px;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(45deg);
    transform-origin: right center;
}

.arrow-icon.right::after {
    width: 12px;
    height: 3px;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(-45deg);
    transform-origin: right center;
}

@keyframes slide {
    0%,
    33% {
        transform: translateX(0);
    }
    33.33%,
    66% {
        transform: translateX(-33.33%);
    }
    66.66%,
    100% {
        transform: translateX(-66.66%);
    }
}

.slide {
    width: 33.33%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.slide-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}

.slide-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1.5rem;
    color: var(--neon-blue);
    text-shadow: 0 0 20px var(--cyber-blue);
    margin-bottom: 0.5rem;
}

.slide-text {
    font-size: 0.9rem;
    color: var(--cyber-blue);
}

/* スライダードット */
.slider-dots {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}

.dot {
    width: 10px;
    height: 10px;
    border: 2px solid var(--cyber-blue);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: var(--cyber-blue);
    box-shadow: 0 0 10px var(--cyber-blue);
}

/* ジャンルタブ */
.genre-tabs {
    background: linear-gradient(180deg, rgba(20, 20, 30, 0.95), rgba(10, 10, 15, 0.9));
    backdrop-filter: blur(15px);
    border-bottom: 3px solid var(--cyber-blue);
    box-shadow: 0 2px 15px rgba(0, 217, 255, 0.2), 0 4px 30px rgba(138, 43, 226, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 1rem 0;
    position: sticky;
    top: 70px;
    z-index: 100;
}

.genre-tabs::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--neon-purple), transparent);
    animation: shimmer 3s linear infinite;
}

.tabs-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--cyber-blue) transparent;
}

.tabs-container::-webkit-scrollbar {
    height: 4px;
}

.tabs-container::-webkit-scrollbar-thumb {
    background: var(--cyber-blue);
}

.tab {
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.1), transparent);
    border: 2px solid var(--deep-purple);
    color: var(--cyber-blue);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    border-radius: 25px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(138, 43, 226, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.tab::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--cyber-blue), transparent);
    transition: left 0.5s ease;
}

.tab:hover::before {
    left: 100%;
}

.tab:hover {
    border-color: var(--cyber-blue);
    color: var(--neon-blue);
    text-shadow: 0 0 10px var(--cyber-blue);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 217, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.tab.active {
    background: linear-gradient(135deg, var(--deep-purple), var(--cyber-blue));
    border-color: var(--neon-blue);
    color: white;
    box-shadow: 0 0 20px var(--cyber-blue), 0 4px 30px rgba(0, 217, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* 宇宙背景 */
.space-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

#space-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.grid-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(0deg, var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: grid-move 20s linear infinite;
    opacity: 0.3;
}

@keyframes grid-move {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(50px, 50px);
    }
}

/* メインコンテンツ */
.main-container {
    position: relative;
    z-index: 1;
    padding: 2rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* ガチャグリッド */
.gacha-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

.gacha-s-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, 1fr);
}
.gacha-a-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(4, 1fr);
}
.gacha-b-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(4, 1fr);
}
.gacha-c-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(4, 1fr);
}
.gacha-detail-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(4, 1fr);
}

@media (min-width: 768px) {
    .gacha-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .gacha-s-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .gacha-a-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .gacha-b-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .gacha-c-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .gacha-detail-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ガチャブロック */
.gacha-block {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.1), rgba(0, 217, 255, 0.1));
    border: 2px solid var(--cyber-blue);
    padding: 0;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.gacha-block::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--cyber-blue), var(--neon-purple), var(--cyber-blue));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    filter: blur(4px);
}

.gacha-block:hover::before {
    opacity: 0.5;
}

.gacha-block:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px var(--cyber-blue), 0 0 40px var(--neon-purple), inset 0 0 20px rgba(0, 217, 255, 0.2);
}

.gacha-detail-image.cyber-frame {
    width: 100%;
    padding: 12px;
    border: 3px solid;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gacha-detail-image.cyber-frame img {
    max-width: 100%;
    height: 200px;
    object-fit: contain;
}

.gacha-s-grid .gacha-detail-image.cyber-frame img {
    max-width: 100%;
    height: 300px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .gacha-detail-image.cyber-frame img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    .gacha-s-grid .gacha-detail-image.cyber-frame img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }
}

/* 各ランク色設定 */
/* Updated Gacha Rank Colors */
/* Sランク枠 */

/* 擬似要素でレインボーの外枠アニメを表現 */
/* Sランク枠のレインボー外枠アニメーション（改良版） */
.gacha-s-grid .gacha-detail-image.cyber-frame {
    position: relative;
    z-index: 0;
    border: 2px solid transparent;
    border-radius: 14px;
    background: #000;
    overflow: hidden;
    animation: pulseGlow 3.5s ease-in-out infinite;
}

.gacha-s-grid .gacha-detail-image.cyber-frame::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    z-index: -1;
    border-radius: 16px;
    background: linear-gradient(135deg, #ff0059, #ff7b00, #ffe600, #00ff47, #00eaff, #0058ff, #a600ff, #ff0059);
    background-size: 600% 600%;
    animation: rainbowWave 6s linear infinite;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3)) blur(3px);
    opacity: 0.5; /* or 0.4で試してみてください */
}

.gacha-s-grid .gacha-detail-image.cyber-frame::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 4px);
    z-index: 1;
    pointer-events: none;
    border-radius: 12px;
}

@keyframes rainbowWave {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 10px #00ffff88, inset 0 0 5px #004488;
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 30px #00ffffcc, inset 0 0 10px #0077aa;
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 0 10px #00ffff88, inset 0 0 5px #004488;
        transform: scale(1);
    }
}

.gacha-a-grid .gacha-detail-image.cyber-frame {
    border-color: #ffd700;
    color: #ffd700aa;
    animation: cyberPulse2 2s infinite alternate;
}

.gacha-b-grid .gacha-detail-image.cyber-frame {
    border-color: #ff4444;
    color: #ff4444aa;
    animation: cyberPulse2 2s infinite alternate;
}

.gacha-c-grid .cyber-frame {
    border-color: #cccccc;
    color: #ccccccaa;
    animation: cyberPulse2 2s infinite alternate;
}

.gacha-detail-grid .cyber-frame {
    border-color: #00ffff;
    color: #00ffffaa;
    animation: cyberPulse2 2s infinite alternate;
}

/* ガチャ結果の枠線アニメーション */
.gacha_reslut_cyber_s {
    position: relative;
    border-radius: 12px;
    z-index: 0;
    color: #ffd700aa;
    animation: cyberPulse2 2s infinite alternate;
    overflow: hidden;
}

.gacha_reslut_cyber_s::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -1;
    border-radius: 14px;
    background: linear-gradient(135deg, red, orange, yellow, green, blue, indigo, violet, red);
    background-size: 400% 400%;
    animation: rainbowWave 6s linear infinite;
    filter: blur(4px);
    opacity: 0.7;
}

@keyframes rainbowWave {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.gacha_reslut_cyber_a {
    border-color: #ffd700;
    color: #ffd700aa;
    animation: cyberPulse2 2s infinite alternate;
    border: #ffd700 solid;
    border-radius: 10px;
    overflow: hidden;
}

.gacha_reslut_cyber_b {
    border-color: #ff4444;
    color: #ff4444aa;
    animation: cyberPulse2 2s infinite alternate;
    border: #ff4444 solid;
    border-radius: 10px;
    overflow: hidden;
}

.gacha_reslut_cyber_c {
    border-color: #cccccc;
    color: #ccccccaa;
    animation: cyberPulse2 2s infinite alternate;
    border: #cccccc solid;
    border-radius: 10px;
    overflow: hidden;
}

.gacha_reslut_cyber_l {
    border-color: #00ffff;
    color: #00ffffaa;
    animation: cyberPulse2 2s infinite alternate;
    border: #00ffff solid;
    border-radius: 10px;
    overflow: hidden;
}

@keyframes cyberPulse2 {
    0% {
        box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, inset 0 0 10px rgba(0, 0, 0, 0.3);
    }
    100% {
        box-shadow: 0 0 25px currentColor, 0 0 40px currentColor, inset 0 0 14px rgba(0, 0, 0, 0.5);
    }
}

/* ヘッダー情報（1列） */
.gacha-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.5);
    /* border: 1px solid var(--cyber-blue); */
}

.gacha-price {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1.2rem;
    color: var(--neon-blue);
    text-shadow: 0 0 10px var(--cyber-blue), 0 0 20px var(--cyber-blue);
}

.detail-non {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1.2rem;
    color: var(--neon-blue);
    text-shadow: 0 0 10px var(--cyber-blue), 0 0 20px var(--cyber-blue);
    text-align: center;
}

.gacha-price span {
    font-size: 0.7rem;
    color: var(--neon-purple);
}

.gacha-price p {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
}

.stock-info {
    text-align: right;
}

.stock-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 0.8rem;
    color: var(--cyber-blue);
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* 画像エリア - クリーンデザイン（枠・ネオンなし） */
.gacha-image {
    width: 100% !important;
    aspect-ratio: 2481 / 1754;
    position: relative;
    overflow: hidden;
    background: transparent !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* .gacha-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 217, 255, 0.2), transparent);
    animation: scan 6s linear infinite;
} */

@keyframes scan {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.gacha-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ボタンコンテナ */
.button-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1rem 1.5rem;
}

@media (max-width: 768px) {
    .button-container {
        padding: 1rem 0.5rem 1rem 0.5rem;
    }

    /* スマホ版：サムネイルを画面いっぱいに */
    .gacha-image {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .gacha-image img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
    
    img[alt="ガチャサムネイル"] {
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
    }
}

.button-row-top {
    display: flex;
    gap: 0.75rem;
}

.button-row-top .gacha-button,
.button-row-top .gacha-button-top {
    flex: 1;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* ガチャボタン */
.gacha-button,
.gacha-button-top {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, var(--deep-purple), var(--cyber-blue));
    border: 2px solid var(--neon-blue);
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 0.875rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.gacha-button::before,
.gacha-button-top::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.gacha-button:active::before,
.gacha-button-top:active::before {
    width: 300px;
    height: 300px;
}

.gacha-button:hover,
.gacha-button-top:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 217, 255, 0.5), 0 0 30px var(--cyber-blue);
    text-shadow: 0 0 10px white;
}

.button-10x {
    background: linear-gradient(135deg, var(--neon-purple), var(--deep-purple));
    border-color: var(--neon-purple);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.button-100x {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark), var(--gold));
    border-color: var(--gold);
    color: #000;
    font-weight: 900;
    animation: gold-shine 3s linear infinite;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    overflow: hidden;
}

@keyframes gold-shine {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

.button-100x::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
    transform: rotate(45deg);
    animation: shine-sweep 3s infinite;
}

@keyframes shine-sweep {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

.button-100x:hover {
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.7), 0 0 40px var(--gold);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* ゲージバー */
.gauge-bar {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--cyber-blue);
    margin-top: 0.5rem;
    position: relative;
    overflow: hidden;
}

.gauge-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--deep-purple), var(--cyber-blue), var(--neon-purple));
    background-size: 200% 100%;
    animation: gauge-pulse 3s linear infinite;
    box-shadow: 0 0 10px var(--cyber-blue);
}

@keyframes gauge-pulse {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

/* レスポンシブ */
@media (max-width: 768px) {
    .header {
        height: 60px;
    }

    .slider-section {
        margin-top: 60px;
    }

    .genre-tabs {
        top: 60px;
    }

    .logo {
        height: 30px;
    }

    .header-right {
        gap: 0.25rem;
    }

    .header-tab {
        padding: 0.4rem 0.8rem;
    }

    .header-text {
        font-size: 0.7rem;
    }

    .header-icon {
        width: 20px;
        height: 20px;
    }

    /* ロケットアイコンのスマホ版調整 */
    .rocket-icon::before {
        width: 10px;
        height: 14px;
        top: 2px;
        left: 5px;
    }

    .rocket-icon::after {
        border-left-width: 3px;
        border-right-width: 3px;
        border-top-width: 6px;
        left: 7px;
    }

    .point-icon::before {
        width: 18px;
        height: 18px;
    }

    .point-icon::after {
        font-size: 8px;
    }

    .menu-icon {
        width: 30px;
        height: 30px;
    }

    .user-icon::before {
        width: 10px;
        height: 10px;
        top: 7px;
    }

    .user-icon::after {
        width: 18px;
        height: 14px;
        bottom: -4px;
    }

    .point-display {
        font-size: 0.7rem;
    }

    .menu-icon {
        width: 30px;
        height: 30px;
    }

    .dropdown-menu {
        width: 220px;
    }

    .menu-item {
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
    }

    .slide-title {
        font-size: 1.2rem;
    }

    .tabs-container {
        gap: 0.5rem;
        padding: 0 0.5rem;
    }

    .tab {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }

    .slider-arrow {
        width: 32px;
        height: 32px;
    }

    .arrow-icon {
        width: 10px;
        height: 10px;
    }

    .arrow-icon.left::before,
    .arrow-icon.left::after,
    .arrow-icon.right::before,
    .arrow-icon.right::after {
        width: 10px;
    }
}

@media (max-width: 720px) {
    .gacha-block {
        padding: 0;
    }

    .gacha-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border: none;
        padding: 0.5rem 1rem;
    }

    .stock-info {
        text-align: right;
    }

    .gacha-price {
        font-size: 1rem;
    }

    .stock-text {
        font-size: 0.7rem;
    }

    .gacha-button,
    .gacha-button-top {
        font-size: 0.7rem;
        padding: 0.875rem;
    }
}

button:hover {
    background: linear-gradient(135deg, var(--deep-purple), var(--cyber-blue));
}

a {
    text-decoration: none;
}

.point-tooltip,
.menu-dropdown {
    display: none;
    position: absolute;
    top: 120%;
    right: 0;
    background: linear-gradient(100deg, #12151c 0%, #7028e4 40%, #00ffe0 100%);
    color: #fff;
    font-size: 18px;
    padding: 18px 30px 18px 30px;
    border-radius: 16px;
    z-index: 9999;
    white-space: nowrap;
    min-width: 220px;
    line-height: 2;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    box-shadow: 0 0 10px #00ffe0, 0 0 30px #7028e4, 0 0 2px 4px #181a24 inset;
    border: 2px solid #00ffe0;
    opacity: 0.96;
    transition: opacity 0.15s;
}

@media (max-width: 700px) {
    .point-tooltip,
    .menu-dropdown {
        font-size: 14px;
        padding: 12px 18px;
        min-width: 160px;
        line-height: 1.6;
        border-radius: 10px;
    }
}

.point-tooltip.cyber-show,
.menu-dropdown.cyber-show {
    display: block !important;
    opacity: 1;
}

.point-tooltip .cyber-row,
.menu-dropdown .cyber-row {
    opacity: 0;
    transform: none;
}
.point-tooltip .cyber-row.show,
.menu-dropdown .cyber-row.show {
    opacity: 1;
    transition: opacity 0.12s;
}

.point-tooltip .cyber-row a,
.menu-dropdown .cyber-row a {
    display: inline-block;
    width: 100%;
    color: #fff;
    text-decoration: none;
    transition: filter 0.14s, background 0.18s, box-shadow 0.15s;
    border-radius: 8px;
    padding: 2px 0;
}

.point-tooltip .cyber-row:hover,
.menu-dropdown .cyber-row:hover {
    background: linear-gradient(90deg, #161b27 60%, #28ffe4 100%, #fff0 100%);
    box-shadow: 0 0 12px #00ffe0cc, 0 0 2px #7028e499;
    filter: brightness(1.1);
    transition: all 0.15s;
}
.point-tooltip .cyber-row:hover a,
.menu-dropdown .cyber-row:hover a {
    color: #28ffe4;
    filter: brightness(1.5) drop-shadow(0 0 4px #00ffe0);
    text-shadow: 0 0 12px #28ffe4, 0 0 4px #7028e4;
}

/* --- Gacha Result Custom Styles --- */
.gacha-result-form {
    width: 60%;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    border: 3px solid var(--cyber-blue);
    box-shadow: 0 2px 20px rgba(0, 217, 255, 0.3), 0 4px 40px rgba(138, 43, 226, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* =====================================================
   ガチャ結果ページ - ボタン新デザイン
   ===================================================== */

/* スキップボタン（#skip-button） */
#skip-button,
button#skip-button {
    background: #0077FF !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(0, 119, 255, 0.25) !important;
    transition: background 0.2s, transform 0.2s !important;
    text-shadow: none !important;
}

#skip-button:hover,
button#skip-button:hover {
    background: #005ecc !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
    text-shadow: none !important;
    box-shadow: 0 6px 16px rgba(0, 119, 255, 0.35) !important;
}

/* コレクションを見るボタン（button.text-link） */
button.text-link,
.text-link {
    background: #0077FF !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 14px 32px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0, 119, 255, 0.25) !important;
    transition: background 0.2s, transform 0.2s !important;
    text-shadow: none !important;
}

button.text-link:hover,
.text-link:hover {
    background: #005ecc !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
    text-shadow: none !important;
    box-shadow: 0 6px 16px rgba(0, 119, 255, 0.35) !important;
}

/* 下部固定ボタン（発送・売却等）のホバー */
.add-submit-button button:hover {
    background: #005ecc !important;
    opacity: 1 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 119, 255, 0.35) !important;
}

.gacha-result-list {
    display: grid;
}

.no-border {
    border: none;
}

.price-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* margin-top: 25px; */
}

.price-text {
    margin-bottom: 0px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 15px;
}

.collection-filter {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    width: 60%;
}

.filter-link {
    display: inline-block;
    padding: 10px 24px;
    border: 2px solid #a855f7;
    border-radius: 10px;
    text-decoration: none !important;
    color: #ffffff;
    background: transparent;
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    box-shadow: 0 0 5px #a855f7;
    background: #12151c;
}

.filter-link:hover {
    background: rgba(168, 85, 247, 0.15);
    box-shadow: 0 0 10px #a855f7;
}

.filter-link.active {
    background: linear-gradient(90deg, #3b82f6, #06b6d4);
    border: 2px solid transparent;
    color: white;
    box-shadow: 0 0 12px #06b6d4;
}

.collection_title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
    width: 60%;
}

@media (max-width: 720px) {
    .collection_title,
    .collection-filter,
    .gacha-result-form {
        width: 90% !important;
    }
}

/* モーダル */
#confirmModal.modal {
    background: rgba(18, 18, 34, 0.87);
    backdrop-filter: blur(1.2px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    display: none;
}

.modal-content {
    border: 3px solid #00f0ff; /* より水色系 */
    border-radius: 16px;
    background: linear-gradient(135deg, #112d48 80%, #0077ff 100%);
    box-shadow: 0 0 48px #00f0ff, 0 0 10px #66fcff;
    color: #fff;
    padding: 28px 24px 18px 24px;
    text-align: center;
    min-width: 340px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.modal-content .close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
}

.modal-buttons {
    gap: 32px;
    justify-content: center;
    display: flex;
}

.modal-button {
    min-width: 110px;
    padding: 14px 20px;
    font-weight: bold;
    border-radius: 13px;
    border: 2px solid #11f7ff;
    box-shadow: 0 0 14px #11f7ff55, 0 0 3px #000b;
    transition: all 0.16s cubic-bezier(0.25, 0.8, 0.25, 1);
    letter-spacing: 0.07em;
    margin: 0 8px;
    outline: none;
    position: relative;
    overflow: hidden;
}

/* キャンセル：ネオンレッドボーダー＋黒背景 */
.modal-button.cancel {
    background: linear-gradient(90deg, #321d23 60%, #ff2222 100%);
    color: #fff;
    border: 2px solid #ff4343;
    text-shadow: 0 1px 5px #ff2d2d99, 0 0 2px #000;
    box-shadow: 0 0 12px #ff434366, 0 0 2px #000;
}

.modal-button.cancel:hover,
.modal-button.cancel:focus {
    background: linear-gradient(90deg, #321d23 60%, #ff2222 100%);
    color: #fff;
    box-shadow: 0 0 22px #ff4343, 0 0 8px #fff2;
    border-color: #ff2222;
    filter: brightness(1.08) contrast(1.15);
}

/* 購入する：レインボーグラデ＋ドロップシャドウ */
.modal-button.confirm {
    background: linear-gradient(90deg, #1931aa 0%, #143b5a 70%, #00dfff 100%);
    color: #fff;
    border: 2px solid #25f2ff;
    text-shadow: 0 2px 10px #00d9ff, 0 0 6px #006eff, 0 0 1px #111;
    box-shadow: 0 0 18px #00d9ff, 0 0 2px #006eff;
    font-weight: bold;
    transition: background 0.18s, color 0.14s, box-shadow 0.18s, border-color 0.14s;
}

.modal-button.confirm:hover,
.modal-button.confirm:focus {
    background: linear-gradient(90deg, #103164 10%, #1959aa 70%, #00dfff 100%);
    color: #fff;
    box-shadow: 0 0 38px #25f2ff, 0 0 14px #00dfff;
    border-color: #00dfff;
    filter: brightness(1.13) contrast(1.18);
}

/* ボタンの発光アニメ */
.modal-button:active {
    box-shadow: 0 0 44px #fff, 0 0 10px #00ffe7;
    filter: brightness(1.21) contrast(1.2);
}

.w40-90 {
    width: 40%;
}

@media (max-width: 720px) {
    .w40-90 {
        width: 90%;
    }
}

.cyber-shop-wrapper {
    padding: 40px 20px;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.cyber-shop-title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 30px;
    color: #00ffff;
    text-shadow: 0 0 10px #00ffff, 0 0 20px #0077ff;
}

.custom-points-grid {
    margin-top: 100px;
    padding-left: 120px;
    padding-right: 120px;
}

@media screen and (max-width: 1200px) {
    .custom-points-grid {
        margin-top: 50px;
        padding-left: 0px;
        padding-right: 0px;
    }
}

/* =====================================================
   ポイントチャージページ - クリーンデザイン
   ===================================================== */
body.tax-product_cat,
body.post-type-archive-product {
    background: #ffffff !important;
}

/* ページコンテナの中央揃え */
body.tax-product_cat .site-content,
body.tax-product_cat .ast-container,
body.tax-product_cat #primary,
body.tax-product_cat .woocommerce {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

/* 価格順並び替え・件数表示を非表示 */
body.tax-product_cat .woocommerce-ordering,
body.tax-product_cat .woocommerce-result-count,
body.post-type-archive-product .woocommerce-ordering,
body.post-type-archive-product .woocommerce-result-count,
.woocommerce-page.tax-product_cat .woocommerce-ordering,
.woocommerce-page.tax-product_cat .woocommerce-result-count {
    display: none !important;
}

/* 商品グリッドレイアウト（4列） */
body.tax-product_cat ul.products,
body.tax-product_cat .woocommerce ul.products,
.woocommerce-page.tax-product_cat ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    list-style: none !important;
    padding: 24px 0 !important;
    padding-left: 0 !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

@media screen and (max-width: 1200px) {
    body.tax-product_cat ul.products,
    body.tax-product_cat .woocommerce ul.products,
    .woocommerce-page.tax-product_cat ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
}

@media screen and (max-width: 900px) {
    body.tax-product_cat ul.products,
    body.tax-product_cat .woocommerce ul.products,
    .woocommerce-page.tax-product_cat ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        padding: 16px !important;
    }
}

@media screen and (max-width: 500px) {
    body.tax-product_cat ul.products,
    body.tax-product_cat .woocommerce ul.products,
    .woocommerce-page.tax-product_cat ul.products {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* cyber-product-card（インラインスタイルをオーバーライド） */
li.cyber-product-card,
.cyber-product-card {
    background: #ffffff !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    padding: 20px !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease !important;
    /* レイアウト修正 */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

li.cyber-product-card:hover,
.cyber-product-card:hover {
    border-color: #0077FF !important;
    box-shadow: 0 8px 24px rgba(0, 119, 255, 0.15) !important;
    transform: translateY(-4px) !important;
    background: #ffffff !important;
}

.cyber-product-card .cyber-product-image,
.cyber-product-card img {
    border-radius: 12px !important;
    border: 1px solid #e6e6e6 !important;
    background: #f8f9fa !important;
}

.cyber-product-card .cyber-product-title,
.cyber-product-card .woocommerce-loop-product__title {
    color: #222222 !important;
    text-shadow: none !important;
    font-weight: 600 !important;
}

.cyber-product-card .cyber-product-price,
.cyber-product-card .price {
    color: #0077FF !important;
    text-shadow: none !important;
    font-weight: 700 !important;
}

.cyber-product-card .cyber-product-button,
.cyber-product-card .button,
.cyber-product-card .add_to_cart_button {
    background: #0077FF !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 119, 255, 0.25) !important;
    text-shadow: none !important;
}

.cyber-product-card .cyber-product-button:hover,
.cyber-product-card .button:hover,
.cyber-product-card .add_to_cart_button:hover {
    background: #005ecc !important;
    transform: translateY(-2px) !important;
}

body.tax-product_cat .woocommerce ul.products li.product,
body.post-type-archive-product .woocommerce ul.products li.product,
.custom-points-grid li.product,
.woocommerce ul.products li.product {
    background: #ffffff !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    padding: 20px !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease !important;
}

body.tax-product_cat .woocommerce ul.products li.product:hover,
body.post-type-archive-product .woocommerce ul.products li.product:hover,
.custom-points-grid li.product:hover,
.woocommerce ul.products li.product:hover {
    border-color: #0077FF !important;
    box-shadow: 0 8px 24px rgba(0, 119, 255, 0.15) !important;
    transform: translateY(-4px) !important;
}

body.tax-product_cat .woocommerce ul.products li.product .woocommerce-loop-product__title,
body.post-type-archive-product .woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: #222222 !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
}

body.tax-product_cat .woocommerce ul.products li.product .price,
body.post-type-archive-product .woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price {
    color: #0077FF !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
}

body.tax-product_cat .woocommerce ul.products li.product .button,
body.post-type-archive-product .woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
    background: #0077FF !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(0, 119, 255, 0.25) !important;
    transition: background 0.2s, transform 0.2s !important;
}

body.tax-product_cat .woocommerce ul.products li.product .button:hover,
body.post-type-archive-product .woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
    background: #005ecc !important;
    transform: translateY(-2px) !important;
}

/* 商品画像 */
body.tax-product_cat .woocommerce ul.products li.product img,
body.post-type-archive-product .woocommerce ul.products li.product img,
.woocommerce ul.products li.product img {
    border-radius: 12px !important;
    border: 1px solid #e6e6e6 !important;
}

/* =====================================================
   カートページ - クリーンデザイン
   ===================================================== */
.cyber-cart-wrapper {
    max-width: 900px;
    margin: 2rem auto;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 32px 24px;
    position: relative;
}

.cyber-cart-title {
    color: #222222;
    text-shadow: none;
    font-size: 1.8rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    margin-bottom: 1.5rem;
    text-align: center;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.cyber-cart-table {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cyber-cart-row {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e6e6e6;
    box-shadow: none;
    padding: 20px 18px;
    position: relative;
    gap: 10px;
    transition: background 0.2s, border-color 0.2s;
}
.cyber-cart-row:hover {
    background: #f0f7ff;
    border-color: #0077FF;
}

/* === カラム幅調整（PC用） === */
.cyber-cart-img {
    flex: 0 0 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cyber-cart-name {
    flex: 1 1 130px;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 600;
    color: #222222;
}
.cyber-cart-qty {
    flex: 0 0 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cyber-cart-subtotal {
    flex: 0 0 110px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0077FF;
    text-align: right;
}
.cyber-cart-remove {
    flex: 0 0 38px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* === 画像 === */
.cyber-cart-img img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid #e6e6e6;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* === 数量入力 === */
.cyber-cart-qty input {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    color: #222222;
    width: 56px;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    padding: 8px 0;
    box-shadow: none;
    outline: none;
    margin: 0 3px;
    transition: border-color 0.2s;
}
.cyber-cart-qty input:focus {
    border-color: #0077FF;
    box-shadow: 0 0 0 3px rgba(0, 119, 255, 0.1);
}

/* === 削除ボタン === */
.cyber-cart-remove .cyber-remove-btn {
    color: #ffffff;
    background: #ff4d4f;
    border: none;
    border-radius: 50%;
    font-size: 1.1rem;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    margin-left: 2px;
}
.cyber-cart-remove .cyber-remove-btn:hover {
    background: #ff1a1a;
    transform: scale(1.1);
}

/* === アクションボタン・合計 === */
.cyber-cart-actions {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
    gap: 16px;
}

.cyber-cart-update-btn {
    background: #0077FF;
    color: #ffffff;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    padding: 12px 32px;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(0, 119, 255, 0.25);
    transition: background 0.2s, transform 0.2s;
    cursor: pointer;
}
.cyber-cart-update-btn:hover {
    background: #005ecc;
    transform: translateY(-2px);
    color: #ffffff;
}

.cyber-cart-totals {
    background: #f8f9fa;
    border-radius: 12px;
    margin-top: 24px;
    padding: 24px 20px;
    border: 1px solid #e6e6e6;
    box-shadow: none;
}

@media (max-width: 700px) {
    .cyber-cart-row {
        flex-direction: row;
        align-items: center;
        padding: 12px 4vw;
        min-height: 100px;
        position: relative;
        flex-wrap: wrap;
    }
    .cyber-cart-img {
        flex: 0 0 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 7px 0 0;
        order: 1;
    }
    .cyber-cart-img img {
        width: 60px;
        height: 60px;
        max-width: 20vw;
        max-height: 20vw;
        min-width: 45px;
        min-height: 45px;
        object-fit: contain;
        border-radius: 8px;
        border: 1px solid #e6e6e6;
        background: #ffffff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    }
    .cyber-cart-name {
        flex: 1 1 auto;
        text-align: left;
        font-size: 1rem;
        font-weight: 600;
        color: #222222;
        margin: 0;
        padding: 0 5px;
        word-break: break-all;
        min-width: 44px;
        order: 2;
    }
    .cyber-cart-subtotal {
        flex: 0 0 100%;
        font-size: 1rem;
        font-weight: 700;
        color: #0077FF;
        text-align: right;
        min-width: 46px;
        padding: 8px 5px 0 0;
        margin: 0;
        order: 5;
    }
    .cyber-cart-remove {
        flex: 0 0 34px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        margin: 0;
        order: 4;
    }
    .cyber-cart-remove .cyber-remove-btn {
        width: 30px;
        height: 30px;
        font-size: 1rem;
        border-radius: 50%;
        margin: 0;
    }
    /* --- 数量だけ改行＆中央寄せ --- */
    .cyber-cart-qty {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 8px 0 4px 0;
        order: 3;
    }
    .cyber-cart-qty input {
        width: 58px;
        font-size: 1rem;
        padding: 8px 0;
        margin: 0 auto;
        background: #ffffff;
        text-align: center;
        border: 1px solid #e6e6e6;
        border-radius: 8px;
    }
}

.woocommerce-checkout {
    /* max-width: 900px;
    margin: 2.5rem auto;
    background: linear-gradient(135deg, #181a25 90%, #1f3348 100%); 
    padding: 38px 20px 28px 20px; */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* タイトル */
.woocommerce-checkout h3,
.woocommerce-checkout h2,
.woocommerce-checkout h1 {
    color: #222222;
    text-shadow: none;
    letter-spacing: 0.02em;
    margin-bottom: 1.1em;
    font-weight: 700;
    font-size: 1.4rem;
}

/* 入力フォーム部分 */
.woocommerce-checkout .form-row {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 0 16px 0;
    margin-bottom: 12px;
    box-shadow: none;
    color: #222222;
}

/* ラベル */
.woocommerce-checkout label {
    color: #222222;
    font-weight: 600;
    margin-bottom: 4px;
    display: inline-block;
    letter-spacing: 0.02em;
}

/* テキスト/セレクト入力 */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    color: #222222;
    font-size: 1rem;
    padding: 10px 14px;
    width: 100%;
    margin-top: 6px;
    box-shadow: none;
    transition: border-color 0.2s;
}
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    border-color: #0077FF;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 119, 255, 0.1);
}

/* 注文内容・合計エリア */
.woocommerce-checkout-review-order-table,
.woocommerce-checkout .woocommerce-checkout-review-order,
form #order_review:not(.elementor-widget-woocommerce-checkout-page #order_review),
.woocommerce-checkout-payment {
    background: #f8f9fa;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 20px 16px;
    margin-bottom: 18px;
    color: #222222;
}

form #order_review:not(.elementor-widget-woocommerce-checkout-page #order_review) {
    border: none;
    padding-top: 50px;
}

/* 支払方法選択ラジオ */
.woocommerce-checkout .payment_methods label {
    color: #222222;
}

/* 注文ボタン */
.woocommerce-checkout .button,
.woocommerce-checkout .place-order .button {
    background: #0077FF;
    color: #ffffff;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    padding: 14px 38px;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(0, 119, 255, 0.25);
    transition: background 0.2s, transform 0.2s;
    cursor: pointer;
}
.woocommerce-checkout .button:hover,
.woocommerce-checkout .place-order .button:hover {
    background: #005ecc;
    transform: translateY(-2px);
    color: #ffffff;
}

/* エラーや注意メッセージ */
/* .woocommerce-NoticeGroup-checkout,
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
    background: linear-gradient(90deg, #ff4057, #2c2e6e);
    color: #fff;
    border-radius: 10px;
    border-left: 5px solid #00ffe7;
    padding: 10px 18px;
    margin-bottom: 20px;
    font-weight: bold;
    box-shadow: 0 0 10px #ff4a6e99;
} */

.cyber-checkout-wrapper {
    max-width: 900px;
    margin: 1rem auto;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e6e6e6;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 50px 30px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.cyber-checkout-form {
    width: 100%;
}

.cyber-checkout-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.cyber-checkout-col {
    width: 100%;
    margin-bottom: 1.5rem;
}

.woocommerce-checkout .form-row {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0 0 16px 0;
    margin-bottom: 12px;
    box-shadow: none;
    color: #222222;
}

.woocommerce-checkout label {
    color: #222222;
    font-weight: 600;
    margin-bottom: 4px;
    display: inline-block;
    letter-spacing: 0.02em;
}

.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    color: #222222;
    font-size: 1rem;
    padding: 10px 14px;
    width: 100%;
    margin-top: 6px;
    box-shadow: none;
    transition: border-color 0.2s;
}

.woocommerce-checkout-review-order,
.woocommerce-checkout-payment {
    background: #f8f9fa;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 20px 14px;
    margin-bottom: 15px;
    box-shadow: none;
    color: #222222;
}

/* ボタンやメッセージは前と同じでOK */

.woocommerce-page.woocommerce-checkout form #order_review {
    width: 100%;
}

.cyber-checkout-wrapper label.p-FieldLabel {
    color: #222222 !important;
}

/* レスポンシブ対応 */
@media (max-width: 700px) {
    .woocommerce-checkout-review-order-table,
    .woocommerce-checkout .woocommerce-checkout-review-order,
    .woocommerce-checkout-payment {
        padding: 10px 6px;
    }

    .cyber-checkout-wrapper {
        padding: 30px 10px;
        margin: 10px;
    }
}

.cyber-login-wrap .um.um-login {
    background: linear-gradient(135deg, #13213d 70%, #09e5ff 100%);
    border-radius: 18px;
    box-shadow: 0 0 28px #07d3fa77, 0 0 8px #005fa7bb;
    padding: 3em 2em 2em 2em;
    max-width: 380px;
    margin: 2em auto;
    border: 2px solid #09e5ff;
    position: relative;
    overflow: hidden;
}

.cyber-login-wrap .um.um-login:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(9, 229, 255, 0.22), transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.cyber-login-wrap .um-form input[type="text"],
.cyber-login-wrap .um-form input[type="password"] {
    background: rgba(18, 33, 61, 0.9);
    color: #fff;
    border: 1.5px solid #09e5ff;
    border-radius: 8px;
    box-shadow: 0 0 6px #09e5ff22;
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 1.05em;
    transition: border 0.2s;
    position: relative;
    z-index: 2;
}

.cyber-login-wrap .um-form input[type="text"]:focus,
.cyber-login-wrap .um-form input[type="password"]:focus {
    border-color: #0af;
    box-shadow: 0 0 18px #09e5ff99;
    outline: none;
}

.cyber-login-wrap .um-form .um-button {
    background: linear-gradient(90deg, #09e5ff 40%, #003788 100%);
    color: #fff;
    border: 2px solid #05b8c9;
    border-radius: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 1.1em;
    padding: 12px 0;
    box-shadow: 0 0 14px #09e5ff88;
    margin-top: 14px;
    transition: background 0.2s, box-shadow 0.2s;
    position: relative;
    z-index: 2;
}

.cyber-login-wrap .um-form .um-button:hover {
    background: linear-gradient(90deg, #003788 20%, #09e5ff 80%);
    box-shadow: 0 0 24px #09e5ff;
}

.cyber-login-wrap .um-field-label {
    color: #09e5ff;
    font-weight: bold;
    text-shadow: 0 0 8px #fff3;
    font-size: 1.07em;
    margin-bottom: 4px;
    letter-spacing: 0.04em;
}

.cyber-login-wrap .um-form .um-error {
    background: rgba(255, 44, 111, 0.15);
    border: 1.5px solid #ff297b;
    color: #fff;
    border-radius: 8px;
    font-weight: bold;
    box-shadow: 0 0 8px #ff297b44;
    margin-bottom: 1em;
    z-index: 3;
    position: relative;
}

.cyber-register-wrap .um.um-register {
    background: linear-gradient(135deg, #13213d 70%, #09e5ff 100%);
    border-radius: 18px;
    box-shadow: 0 0 28px #07d3fa77, 0 0 8px #005fa7bb;
    padding: 3em 2em 2em 2em;
    max-width: 480px;
    margin: 2em auto;
    border: 2px solid #09e5ff;
    position: relative;
    overflow: hidden;
}

.cyber-register-wrap .um.um-register:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(9, 229, 255, 0.19), transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.cyber-register-wrap .um-form input[type="text"],
.cyber-register-wrap .um-form input[type="email"],
.cyber-register-wrap .um-form input[type="password"] {
    background: rgba(18, 33, 61, 0.93);
    color: #fff;
    border: 1.5px solid #09e5ff;
    border-radius: 8px;
    box-shadow: 0 0 6px #09e5ff22;
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 1.07em;
    transition: border 0.2s;
    position: relative;
    z-index: 2;
}

.cyber-register-wrap .um-form input[type="text"]:focus,
.cyber-register-wrap .um-form input[type="email"]:focus,
.cyber-register-wrap .um-form input[type="password"]:focus {
    border-color: #0af;
    box-shadow: 0 0 18px #09e5ff99;
    outline: none;
}

.cyber-register-wrap .um-form .um-button {
    background: linear-gradient(90deg, #09e5ff 40%, #003788 100%);
    color: #fff;
    border: 2px solid #05b8c9;
    border-radius: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 1.1em;
    padding: 12px 0;
    box-shadow: 0 0 14px #09e5ff88;
    margin-top: 16px;
    transition: background 0.2s, box-shadow 0.2s;
    position: relative;
    z-index: 2;
}

.cyber-register-wrap .um-form .um-button:hover {
    background: linear-gradient(90deg, #003788 20%, #09e5ff 80%);
    box-shadow: 0 0 24px #09e5ff;
}

.cyber-register-wrap .um-field-label {
    color: #09e5ff;
    font-weight: bold;
    text-shadow: 0 0 8px #fff3;
    font-size: 1.07em;
    margin-bottom: 4px;
    letter-spacing: 0.04em;
}

.cyber-register-wrap .um-form .um-error {
    background: rgba(255, 44, 111, 0.15);
    border: 1.5px solid #ff297b;
    color: #fff;
    border-radius: 8px;
    font-weight: bold;
    box-shadow: 0 0 8px #ff297b44;
    margin-bottom: 1em;
    z-index: 3;
    position: relative;
}

/* ラジオやチェックボックスなども必要なら下記でカスタム */
.cyber-register-wrap .um-form input[type="checkbox"],
.cyber-register-wrap .um-form input[type="radio"] {
    accent-color: #09e5ff;
}

.cyber-account-wrap .um.um-account {
    background: linear-gradient(135deg, #13213d 70%, #09e5ff 100%);
    border-radius: 18px;
    box-shadow: 0 0 28px #07d3fa77, 0 0 8px #005fa7bb;
    padding: 3em 2em 2em 2em;
    max-width: 520px;
    margin: 2em auto;
    border: 2px solid #09e5ff;
    position: relative;
    overflow: hidden;
}

.cyber-account-wrap .um.um-account:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(9, 229, 255, 0.18), transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.cyber-account-wrap .um-form input[type="text"],
.cyber-account-wrap .um-form input[type="email"],
.cyber-account-wrap .um-form input[type="password"],
.cyber-account-wrap .um-form input[type="url"],
.cyber-account-wrap .um-form input[type="tel"] {
    background: rgba(18, 33, 61, 0.93) !important;
    color: #fff;
    border: 1.5px solid #09e5ff;
    border-radius: 8px;
    box-shadow: 0 0 6px #09e5ff22;
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 1.07em;
    transition: border 0.2s;
    position: relative;
    z-index: 2;
}

.cyber-account-wrap .um-form input[type="text"]:focus,
.cyber-account-wrap .um-form input[type="email"]:focus,
.cyber-account-wrap .um-form input[type="password"]:focus,
.cyber-account-wrap .um-form input[type="url"]:focus,
.cyber-account-wrap .um-form input[type="tel"]:focus {
    border-color: #0af;
    box-shadow: 0 0 18px #09e5ff99;
    outline: none;
}

.cyber-account-wrap .um-form .um-button {
    background: linear-gradient(90deg, #09e5ff 40%, #003788 100%);
    color: #fff;
    border: 2px solid #05b8c9;
    border-radius: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 1.1em;
    padding: 12px 0;
    box-shadow: 0 0 14px #09e5ff88;
    margin-top: 16px;
    transition: background 0.2s, box-shadow 0.2s;
    position: relative;
    z-index: 2;
}

.cyber-account-wrap .um-form .um-button:hover {
    background: linear-gradient(90deg, #003788 20%, #09e5ff 80%);
    box-shadow: 0 0 24px #09e5ff;
}

.cyber-account-wrap .um-field-label {
    color: #09e5ff;
    font-weight: bold;
    text-shadow: 0 0 8px #fff3;
    font-size: 1.07em;
    margin-bottom: 4px;
    letter-spacing: 0.04em;
}

.cyber-account-wrap .um-form .um-error {
    background: rgba(255, 44, 111, 0.15);
    border: 1.5px solid #ff297b;
    color: #fff;
    border-radius: 8px;
    font-weight: bold;
    box-shadow: 0 0 8px #ff297b44;
    margin-bottom: 1em;
    z-index: 3;
    position: relative;
}

/* タブやナビゲーションのデザインもサイバー調にしたい場合： */
.cyber-account-wrap .um-account-nav {
    background: rgba(18, 33, 61, 0.93);
    border-radius: 12px;
    margin-top: 2em;
    margin-bottom: 2em;
    box-shadow: 0 0 10px #09e5ff55;
    border: 1.5px solid #09e5ff;
    overflow: hidden;
    padding: 20px;
}
.cyber-account-wrap .um-account-nav a {
    color: #fff !important;
    font-weight: bold;
    transition: background 0.2s, color 0.2s;
    font-size: 1rem;
}

.cyber-account-wrap .um-account-main a {
    border-bottom: none !important;
}

div.uimob500 .um-account-tab {
    border-bottom: none !important;
}

.woocommerce-account .woocommerce {
    background: linear-gradient(135deg, #13213d 70%, #09e5ff 100%);
    border-radius: 18px;
    box-shadow: 0 0 28px #07d3fa77, 0 0 8px #005fa7bb;
    max-width: 900px;
    margin: 3em auto;
    padding: 2.5em 2em;
    border: 2px solid #09e5ff;
    position: relative;
    overflow: hidden;
    width: 60%;
}

/* ナビゲーション（サイドバー） */
.woocommerce-MyAccount-navigation {
    background: rgba(18, 33, 61, 0.97);
    border-radius: 12px;
    box-shadow: 0 0 16px #09e5ff33;
    border: 1.5px solid #09e5ff;
    padding: 1.2em 0.8em;
    margin-bottom: 2em;
}
.woocommerce-MyAccount-navigation ul {
    margin: 0;
    padding: 0;
}
.woocommerce-MyAccount-navigation li {
    margin-bottom: 8px;
    border-radius: 8px;
    overflow: hidden;
}
.woocommerce-MyAccount-navigation a {
    color: #09e5ff;
    font-weight: bold;
    font-size: 1.08em;
    display: block;
    padding: 1em 1.2em;
    transition: background 0.18s, color 0.18s;
    border-left: 3px solid transparent;
}
.woocommerce-MyAccount-navigation .is-active a,
.woocommerce-MyAccount-navigation a:hover {
    background: linear-gradient(90deg, #003788 15%, #09e5ff 85%);
    color: #fff;
    border-left: 3px solid #09e5ff;
    text-shadow: 0 0 8px #09e5ff88;
}

/* コンテンツ領域 */
.woocommerce-MyAccount-content {
    background: rgba(20, 30, 55, 0.99);
    border-radius: 12px;
    box-shadow: 0 0 12px #09e5ff22;
    padding: 2em 1.5em;
    color: #e2f3ff;
}

/* テーブル */
.woocommerce-MyAccount-content table,
.woocommerce-MyAccount-content th,
.woocommerce-MyAccount-content td {
    background: rgba(20, 30, 55, 0.95);
    color: #e2f3ff;
    border: 1.2px solid #09e5ff55;
    border-radius: 4px;
}

/* フォーム入力 */
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="tel"] {
    background: rgba(18, 33, 61, 0.97);
    color: #fff;
    border: 1.5px solid #09e5ff;
    border-radius: 8px;
    box-shadow: 0 0 6px #09e5ff22;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 1.07em;
    transition: border 0.2s;
}
.woocommerce-MyAccount-content input:focus {
    border-color: #0af;
    box-shadow: 0 0 16px #09e5ff77;
    outline: none;
}

/* ボタン */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button,
.woocommerce-MyAccount-content input[type="submit"] {
    background: linear-gradient(90deg, #09e5ff 40%, #003788 100%);
    color: #fff;
    border: 2px solid #05b8c9;
    border-radius: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 1.1em;
    padding: 12px 28px;
    box-shadow: 0 0 14px #09e5ff88;
    margin-top: 12px;
    transition: background 0.2s, box-shadow 0.2s;
    cursor: pointer;
}
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content button:hover,
.woocommerce-MyAccount-content input[type="submit"]:hover {
    background: linear-gradient(90deg, #003788 10%, #09e5ff 90%);
    box-shadow: 0 0 28px #09e5ff;
    color: #fff;
}

/* メッセージ/エラー */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    background: rgba(9, 229, 255, 0.11);
    border: 1.5px solid #09e5ff;
    color: #09e5ff;
    border-radius: 8px;
    font-weight: bold;
    box-shadow: 0 0 8px #09e5ff44;
    margin-bottom: 1.2em;
}

/* ラベル */
.woocommerce-MyAccount-content label {
    color: #09e5ff;
    font-weight: bold;
    text-shadow: 0 0 8px #fff2;
    font-size: 1.08em;
    margin-bottom: 4px;
    letter-spacing: 0.03em;
    display: inline-block;
}

/* 見出し */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-MyAccount-content h4 {
    color: #09e5ff;
    text-shadow: 0 0 10px #09e5ff99;
    margin-bottom: 1em;
}

body .woocommerce-MyAccount-navigation-link {
    border: none !important;
}

@media (max-width: 800px) {
    .woocommerce-account .woocommerce {
        width: 98%;
    }
}

/* =====================================================
   問い合わせフォーム - クリーンデザイン
   ===================================================== */
.cyber-contact-wrap .wpcf7-form,
.wpcf7-form {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    max-width: 600px;
    margin: 2em auto;
    padding: 2.5em 2em 2em 2em;
    border: 1px solid #e6e6e6;
    position: relative;
    overflow: hidden;
}

.cyber-contact-wrap .wpcf7-form-control,
.wpcf7-form-control {
    background: #ffffff;
    color: #222222;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    box-shadow: none;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 1em;
    transition: border 0.2s, box-shadow 0.2s;
}

.cyber-contact-wrap .wpcf7-form-control:focus,
.wpcf7-form-control:focus {
    border-color: #0077FF;
    box-shadow: 0 0 0 3px rgba(0, 119, 255, 0.1);
    outline: none;
}

.cyber-contact-wrap .wpcf7-submit,
.wpcf7-submit {
    background: #0077FF;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 1.05em;
    padding: 14px 36px;
    box-shadow: 0 4px 12px rgba(0, 119, 255, 0.25);
    margin-top: 14px;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
    cursor: pointer;
    width: 100%;
}

.cyber-contact-wrap .wpcf7-submit:hover,
.wpcf7-submit:hover {
    background: #005ecc;
    box-shadow: 0 6px 16px rgba(0, 119, 255, 0.35);
    color: #ffffff;
    transform: translateY(-2px);
}

.cyber-contact-wrap label,
.wpcf7-form label {
    color: #222222;
    font-weight: 600;
    text-shadow: none;
    font-size: 1em;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
    display: inline-block;
    width: 100%;
}

/* メッセージ（送信完了/エラー） */
.cyber-contact-wrap .wpcf7-response-output,
.wpcf7-response-output {
    background: rgba(0, 119, 255, 0.08);
    border: 1px solid #0077FF;
    color: #0077FF;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: none;
    margin-bottom: 1.2em;
    padding: 1em 1em;
    text-align: center;
}

.wpcf7-form-control-wrap {
    margin-top: 16px !important;
}

/* =====================================================
   利用規約・プライバシーポリシー等 - クリーンデザイン
   ===================================================== */
.cyber-terms-wrap {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    max-width: 900px;
    margin: 2.5em auto;
    padding: 3em 2.5em 2em 2.5em;
    border: 1px solid #e6e6e6;
    color: #222222;
    font-size: 1.05em;
    line-height: 1.9;
    letter-spacing: 0.01em;
    position: relative;
    width: 80%;
}

.cyber-terms-wrap h2,
.cyber-terms-wrap .wp-block-heading {
    color: #0077FF;
    text-shadow: none;
    font-size: 1.5em;
    font-weight: 700;
    border-bottom: 2px solid #0077FF;
    margin-bottom: 1em;
    margin-top: 1.5em;
    padding-bottom: 0.5em;
    letter-spacing: 0.02em;
}

.cyber-terms-wrap p {
    margin-bottom: 1.3em;
    color: #222222;
}

.cyber-terms-wrap ol,
.cyber-terms-wrap ul {
    margin: 0 0 1.4em 1.4em;
    padding: 0;
}

.cyber-terms-wrap ol {
    counter-reset: cyber-list;
}
.cyber-terms-wrap ol > li {
    list-style: none;
    position: relative;
    margin-bottom: 0.7em;
    padding-left: 2.2em;
    color: #222222;
}
.cyber-terms-wrap ol > li:before {
    content: counter(cyber-list) ".";
    counter-increment: cyber-list;
    color: #0077FF;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0.08em;
    font-size: 1.05em;
    text-shadow: none;
}

.cyber-terms-wrap ul > li {
    position: relative;
    margin-bottom: 0.7em;
    padding-left: 1.8em;
    color: #222222;
}
.cyber-terms-wrap ul > li:before {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    background: #0077FF;
    border-radius: 50%;
    box-shadow: none;
    position: absolute;
    left: 0;
    top: 0.55em;
}

.cyber-terms-wrap strong {
    color: #222222;
    text-shadow: none;
    font-weight: 700;
}

.cyber-terms-wrap ::selection {
    background: rgba(0, 119, 255, 0.2);
    color: #222222;
}

/* ブロックエディタの段落も補足 */
.cyber-terms-wrap .wp-block-paragraph {
    margin-bottom: 1.2em;
    color: #222222;
}

/* スマホ対応 */
@media (max-width: 600px) {
    .cyber-terms-wrap {
        padding: 1.5em 1em 1em 1em;
        font-size: 1em;
        width: 95%;
    }
    .cyber-terms-wrap h2,
    .cyber-terms-wrap .wp-block-heading {
        font-size: 1.25em;
        padding-bottom: 0.3em;
    }

    .woocommerce-account .woocommerce {
        padding: 10px 10px;
    }
}

.cyber-reset-wrap .um.um-password {
    background: linear-gradient(135deg, #13213d 75%, #09e5ff 100%);
    border-radius: 18px;
    box-shadow: 0 0 28px #07d3fa77, 0 0 8px #005fa7bb;
    padding: 2.5em 2em 2em 2em;
    max-width: 430px;
    margin: 2em auto;
    border: 2px solid #09e5ff;
    position: relative;
    overflow: hidden;
}

.cyber-reset-wrap .um.um-password:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(9, 229, 255, 0.18), transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.cyber-reset-wrap .um-form input[type="text"],
.cyber-reset-wrap .um-form input[type="password"],
.cyber-reset-wrap .um-form input[type="email"] {
    background: rgba(18, 33, 61, 0.93);
    color: #fff;
    border: 1.5px solid #09e5ff;
    border-radius: 8px;
    box-shadow: 0 0 6px #09e5ff22;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 1.07em;
    transition: border 0.2s;
    position: relative;
    z-index: 2;
}

.cyber-reset-wrap .um-form input:focus {
    border-color: #0af;
    box-shadow: 0 0 18px #09e5ff99;
    outline: none;
}

.cyber-reset-wrap .um-form .um-button {
    background: linear-gradient(90deg, #09e5ff 40%, #003788 100%);
    color: #fff;
    border: 2px solid #05b8c9;
    border-radius: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 1.1em;
    padding: 12px 0;
    box-shadow: 0 0 14px #09e5ff88;
    margin-top: 16px;
    transition: background 0.2s, box-shadow 0.2s;
    position: relative;
    z-index: 2;
}

.cyber-reset-wrap .um-form .um-button:hover {
    background: linear-gradient(90deg, #003788 20%, #09e5ff 80%);
    box-shadow: 0 0 24px #09e5ff;
}

.cyber-reset-wrap .um-field-label {
    color: #09e5ff;
    font-weight: bold;
    text-shadow: 0 0 8px #fff3;
    font-size: 1.07em;
    margin-bottom: 4px;
    letter-spacing: 0.04em;
}

.cyber-reset-wrap .um-form .um-error {
    background: rgba(255, 44, 111, 0.15);
    border: 1.5px solid #ff297b;
    color: #fff;
    border-radius: 8px;
    font-weight: bold;
    box-shadow: 0 0 8px #ff297b44;
    margin-bottom: 1em;
    z-index: 3;
    position: relative;
}

/* モーダル全体 */
.mo_customer_validation-modal-content {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #0ff;
    border-radius: 12px;
    padding: 30px;
    max-width: 400px;
    margin: 40px auto;
    text-align: center;
    box-shadow: 0 0 20px #0ff;
    color: #fff;
}

/* ヘッダーの見出し */
.mo-popup-header {
    font-size: 1.5em;
    color: #0ff;
    text-shadow: 0 0 8px #0ff;
    margin-bottom: 20px;
}

/* 入力欄 (実際のクラスは otp-streaky-input) */
.otp-streaky-input {
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #0ff;
    color: #0ff;
    font-size: 1.2em;
    padding: 10px;
    width: 80%;
    border-radius: 8px;
    text-align: center;
    outline: none;
    box-shadow: 0 0 8px #0ff inset;
    transition: box-shadow 0.3s, border-color 0.3s;
}
.otp-streaky-input:focus {
    border-color: #f0f;
    box-shadow: 0 0 12px #f0f inset, 0 0 10px #f0f;
}

/* 送信ボタン */
#miniorange_otp_token_submit {
    margin-top: 20px;
    background: linear-gradient(45deg, #0ff, #08f);
    border: none;
    color: #000;
    font-size: 1.1em;
    font-weight: bold;
    padding: 12px 30px;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 0 10px #0ff, 0 0 20px #0ff;
    transition: all 0.3s ease;
}
#miniorange_otp_token_submit:hover {
    background: linear-gradient(45deg, #f0f, #0ff);
    color: #fff;
    box-shadow: 0 0 15px #f0f, 0 0 30px #f0f;
}

.notice-wrap {
    display: none;
}

/* =====================================================
   Clove風デザイン追加スタイル
   ===================================================== */

/* ヘッダーは白文字を維持 */
#masthead *,
.header *,
.header-content *,
.menu-dropdown *,
.ast-primary-header-bar * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ボタンの白文字を維持 */
.button,
.btn,
input[type="submit"],
button[type="submit"],
.woocommerce-Button,
.um-button {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* マイアカウントのテーブル */
body.woocommerce-account table.shop_table,
body.woocommerce-account table.shop_table thead,
body.woocommerce-account table.shop_table tbody,
body.woocommerce-account table.shop_table tr,
body.woocommerce-account table.shop_table th,
body.woocommerce-account table.shop_table td {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #222222 !important;
    -webkit-text-fill-color: #222222 !important;
    border-color: #e6e6e6 !important;
}

/* 住所エリア */
body.woocommerce-account .woocommerce-Addresses,
body.woocommerce-account .woocommerce-Address {
    background: #ffffff !important;
    color: #222222 !important;
}

/* ボタンホバー */
.button:hover,
.btn:hover,
input[type="submit"]:hover {
    background: #005ecc !important;
    opacity: 1 !important;
}

/* フォーム入力フィールド */
body.woocommerce-page input[type="text"],
body.woocommerce-page input[type="email"],
body.woocommerce-page input[type="password"],
body.woocommerce-page input[type="tel"],
body.woocommerce-page select,
body.woocommerce-page textarea,
body.um-page input[type="text"],
body.um-page input[type="email"],
body.um-page input[type="password"],
body.um-page select {
    background: #ffffff !important;
    border: 1px solid #e6e6e6 !important;
    color: #222222 !important;
    -webkit-text-fill-color: #222222 !important;
}

/* ラベル */
body.woocommerce-page label,
body.um-page label,
body.um-page .um-field-label {
    color: #222222 !important;
    -webkit-text-fill-color: #222222 !important;
}

/* サイドナビゲーション */
body.woocommerce-account .woocommerce-MyAccount-navigation {
    background: #ffffff !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: 12px !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    background: #ffffff !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    background: #ffffff !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    color: #222222 !important;
    -webkit-text-fill-color: #222222 !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background: #e6f2ff !important;
    color: #0077ff !important;
    -webkit-text-fill-color: #0077ff !important;
}

/* コンテンツエリア */
body.woocommerce-account .woocommerce-MyAccount-content {
    background: #ffffff !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: 12px !important;
    color: #222222 !important;
}

body.woocommerce-account .woocommerce-MyAccount-content * {
    color: #222222 !important;
    -webkit-text-fill-color: #222222 !important;
}

/* 変更を保存ボタン中央揃え */
body.woocommerce-account form p.woocommerce-form-row:last-of-type,
body.woocommerce-account form > p:last-child {
    text-align: center !important;
}

/* Ultimate Memberフォーム */
body.um-page .um,
body.um-page .um-form {
    background: #ffffff !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: 12px !important;
}

body.um-page .um-field,
body.um-page .um-field-area {
    background: transparent !important;
}

/* =====================================================
   宇宙背景の完全除去（マイアカウント等）
   ===================================================== */

/* space-containerを非表示 */
body.woocommerce-account .space-container,
body.woocommerce-page .space-container,
body.um-page .space-container,
body.page .space-container:not(body.home .space-container),
.woocommerce-account .space-container,
.space-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* grid-linesを非表示 */
body.woocommerce-account .grid-lines,
body.woocommerce-page .grid-lines,
body.um-page .grid-lines,
body.page .grid-lines:not(body.home .grid-lines),
.grid-lines {
    display: none !important;
}

/* space-canvasを非表示 */
body.woocommerce-account #space-canvas,
body.woocommerce-page #space-canvas,
body.um-page #space-canvas,
#space-canvas {
    display: none !important;
}

/* bodyの背景グラデーションを除去 */
body.woocommerce-account,
body.woocommerce-page,
body.um-page {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

/* サイト全体のコンテナ背景 */
body.woocommerce-account #page,
body.woocommerce-account .site,
body.woocommerce-account .hfeed,
body.woocommerce-page #page,
body.woocommerce-page .site,
body.um-page #page,
body.um-page .site {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* entry-content背景 */
body.woocommerce-account .entry-content,
body.woocommerce-page .entry-content,
body.um-page .entry-content {
    background: #ffffff !important;
    position: relative;
    z-index: 1;
}

/* primary/main背景 */
body.woocommerce-account #primary,
body.woocommerce-account #main,
body.woocommerce-account .content-area,
body.woocommerce-page #primary,
body.woocommerce-page #main,
body.um-page #primary,
body.um-page #main {
    background: #ffffff !important;
}

/* ast-container背景 */
body.woocommerce-account .ast-container,
body.woocommerce-page .ast-container,
body.um-page .ast-container {
    background: #ffffff !important;
}

/* サイドナビ紺色背景の除去 */
body.woocommerce-account .woocommerce-MyAccount-navigation {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    background: transparent !important;
}

/* ネオンボーダーの除去 */
body.woocommerce-account .woocommerce,
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
    border-color: #e6e6e6 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* ネオングロー除去 */
body.woocommerce-account *,
body.woocommerce-page *,
body.um-page * {
    text-shadow: none !important;
}

/* 全ての::before, ::after疑似要素のグラデーション除去 */
body.woocommerce-account *::before,
body.woocommerce-account *::after,
body.woocommerce-page *::before,
body.woocommerce-page *::after,
body.um-page *::before,
body.um-page *::after {
    background: transparent !important;
    background-image: none !important;
}

/* =====================================================
   ネオンボックスの完全上書き（最高優先度）
   ===================================================== */

/* .woocommerceコンテナのネオン背景を白に */
body.woocommerce-account .woocommerce,
.woocommerce-account .woocommerce {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #e6e6e6 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    border-radius: 16px !important;
}

/* サイドナビ */
body.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-navigation {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e6e6e6 !important;
    box-shadow: none !important;
    border-radius: 12px !important;
}

/* サイドナビのリスト */
body.woocommerce-account .woocommerce-MyAccount-navigation ul,
.woocommerce-MyAccount-navigation ul {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li,
.woocommerce-MyAccount-navigation ul li {
    background: transparent !important;
    border: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li a,
.woocommerce-MyAccount-navigation ul li a {
    color: #222222 !important;
    -webkit-text-fill-color: #222222 !important;
    background: transparent !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
    background: #e6f2ff !important;
    color: #0077ff !important;
    -webkit-text-fill-color: #0077ff !important;
}

/* コンテンツエリア */
body.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-MyAccount-content {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e6e6e6 !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    color: #222222 !important;
}

/* テーブル */
body.woocommerce-account table,
body.woocommerce-account table thead,
body.woocommerce-account table tbody,
body.woocommerce-account table tr,
body.woocommerce-account table th,
body.woocommerce-account table td,
.woocommerce-account table.shop_table,
.woocommerce-account table.shop_table * {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #222222 !important;
    -webkit-text-fill-color: #222222 !important;
    border-color: #e6e6e6 !important;
}

/* 住所 */
body.woocommerce-account .woocommerce-Address,
body.woocommerce-account .woocommerce-Address-title,
.woocommerce-Address,
.woocommerce-Address-title {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #222222 !important;
    -webkit-text-fill-color: #222222 !important;
    border: 1px solid #e6e6e6 !important;
}

/* 全テキスト */
body.woocommerce-account h1,
body.woocommerce-account h2,
body.woocommerce-account h3,
body.woocommerce-account h4,
body.woocommerce-account p,
body.woocommerce-account span,
body.woocommerce-account label,
body.woocommerce-account div {
    color: #222222 !important;
    -webkit-text-fill-color: #222222 !important;
}

/* ボタンは白文字維持 */
body.woocommerce-account .button,
body.woocommerce-account button,
body.woocommerce-account input[type="submit"],
body.woocommerce-account a.button {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #0077ff !important;
}

/* =====================================================
   Detailページ prize-section 背景修正
   ===================================================== */

.prize-section,
div.prize-section {
    background: transparent !important;
    background-color: transparent !important;
}

/* =====================================================
   景品ブロック（prize-block）- 白背景 + 青枠 + 立体感
   ===================================================== */

.prize-block {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 3px solid #0077ff !important;
    border-radius: 16px !important;
    padding: 16px !important;
    box-shadow: 
        0 4px 15px rgba(0, 119, 255, 0.2),
        0 8px 30px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

.prize-block:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 
        0 12px 40px rgba(0, 119, 255, 0.3),
        0 20px 50px rgba(0, 0, 0, 0.15) !important;
    border-color: #00aaff !important;
}

.gacha-s-grid .prize-block {
    background: #ffffff !important;
    border: 3px solid #8a2be2 !important;
    box-shadow: 0 4px 20px rgba(138, 43, 226, 0.3), 0 8px 30px rgba(0, 217, 255, 0.2) !important;
}

.gacha-a-grid .prize-block {
    background: #ffffff !important;
    border: 3px solid #ffd700 !important;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3), 0 8px 30px rgba(0, 0, 0, 0.1) !important;
}

.gacha-b-grid .prize-block {
    background: #ffffff !important;
    border: 3px solid #ff4444 !important;
    box-shadow: 0 4px 20px rgba(255, 68, 68, 0.3), 0 8px 30px rgba(0, 0, 0, 0.1) !important;
}

.gacha-c-grid .prize-block {
    background: #ffffff !important;
    border: 3px solid #aaaaaa !important;
    box-shadow: 0 4px 15px rgba(150, 150, 150, 0.3), 0 8px 30px rgba(0, 0, 0, 0.1) !important;
}

.gacha-lastone-grid .prize-block {
    background: #ffffff !important;
    border: 3px solid #ff0080 !important;
    box-shadow: 0 4px 20px rgba(255, 0, 128, 0.3), 0 8px 30px rgba(0, 200, 255, 0.2) !important;
}

/* =====================================================
   賞タイトル（rainbow-prize）画像化 - 完全上書き
   ===================================================== */

/* 画像を持つ賞タイトルの共通スタイル */
.rainbow-prize.s-prize,
.rainbow-prize.a-prize,
.rainbow-prize.b-prize,
.rainbow-prize.c-prize,
.rainbow-prize.d-prize,
.rainbow-prize.lastone-prize {
    /* 既存のグラデーション背景を完全に削除 */
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    
    /* 画像表示用の設定 */
    display: block !important;
    width: 100% !important;
    max-width: 450px !important;
    height: 130px !important;
    margin: 10px auto 5px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    
    /* アニメーションを無効化 */
    animation: none !important;
}

/* S賞 */
.rainbow-prize.s-prize {
    background-image: url('/wp-content/themes/astra-child/images/prize_name/s-prize.png') !important;
}

/* A賞 */
.rainbow-prize.a-prize {
    background-image: url('/wp-content/themes/astra-child/images/prize_name/a-prize.png') !important;
}

/* B賞 */
.rainbow-prize.b-prize {
    background-image: url('/wp-content/themes/astra-child/images/prize_name/b-prize.png') !important;
}

/* C賞 */
.rainbow-prize.c-prize {
    background-image: url('/wp-content/themes/astra-child/images/prize_name/c-prize.png') !important;
}

/* D賞 */
.rainbow-prize.d-prize {
    background-image: url('/wp-content/themes/astra-child/images/prize_name/d-prize.png') !important;
}

/* ラストワン賞 */
.rainbow-prize.lastone-prize {
    background-image: url('/wp-content/themes/astra-child/images/prize_name/lastone-prize.png') !important;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .rainbow-prize.s-prize,
    .rainbow-prize.a-prize,
    .rainbow-prize.b-prize,
    .rainbow-prize.c-prize,
    .rainbow-prize.d-prize,
    .rainbow-prize.lastone-prize {
        max-width: 320px !important;
        height: 90px !important;
    }
    
    .prize-block {
        padding: 12px !important;
        border-radius: 12px !important;
    }
}

/* =====================================================
   賞タイトル - 初期状態でテキスト非表示（ちらつき防止）
   ===================================================== */

/* rainbow-prize のテキストを最初から見えなくする */
.rainbow-prize {
    font-size: 0 !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

/* =====================================================
   景品ブロック - クリーン＆モダンデザイン改善
   ===================================================== */

/* 景品ブロック共通 - モダンカードデザイン */
.prize-block {
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%) !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 20px !important;
    padding: 20px !important;
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.04),
        0 10px 20px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    position: relative;
    overflow: hidden;
}

/* ホバー時 */
.prize-block:hover {
    transform: translateY(-6px) !important;
    box-shadow: 
        0 12px 24px rgba(0, 0, 0, 0.1),
        0 20px 40px rgba(0, 0, 0, 0.08) !important;
    border-color: #0077ff !important;
}

/* S賞 - プレミアム感のあるパープル */
.gacha-s-grid .prize-block {
    background: linear-gradient(145deg, #ffffff 0%, #faf5ff 50%, #f3e8ff 100%) !important;
    border: 2px solid #d8b4fe !important;
    box-shadow: 
        0 4px 6px rgba(139, 92, 246, 0.08),
        0 10px 20px rgba(139, 92, 246, 0.1) !important;
}

.gacha-s-grid .prize-block:hover {
    border-color: #a855f7 !important;
    box-shadow: 
        0 12px 24px rgba(139, 92, 246, 0.2),
        0 20px 40px rgba(139, 92, 246, 0.15) !important;
}

/* A賞 - ゴールド/アンバー */
.gacha-a-grid .prize-block {
    background: linear-gradient(145deg, #ffffff 0%, #fffbeb 50%, #fef3c7 100%) !important;
    border: 2px solid #fcd34d !important;
    box-shadow: 
        0 4px 6px rgba(245, 158, 11, 0.08),
        0 10px 20px rgba(245, 158, 11, 0.1) !important;
}

.gacha-a-grid .prize-block:hover {
    border-color: #f59e0b !important;
    box-shadow: 
        0 12px 24px rgba(245, 158, 11, 0.2),
        0 20px 40px rgba(245, 158, 11, 0.15) !important;
}

/* B賞 - コーラル/レッド */
.gacha-b-grid .prize-block {
    background: linear-gradient(145deg, #ffffff 0%, #fff5f5 50%, #fee2e2 100%) !important;
    border: 2px solid #fca5a5 !important;
    box-shadow: 
        0 4px 6px rgba(239, 68, 68, 0.08),
        0 10px 20px rgba(239, 68, 68, 0.1) !important;
}

.gacha-b-grid .prize-block:hover {
    border-color: #ef4444 !important;
    box-shadow: 
        0 12px 24px rgba(239, 68, 68, 0.2),
        0 20px 40px rgba(239, 68, 68, 0.15) !important;
}

/* C賞 - クールグレー/シルバー */
.gacha-c-grid .prize-block {
    background: linear-gradient(145deg, #ffffff 0%, #f9fafb 50%, #f3f4f6 100%) !important;
    border: 2px solid #d1d5db !important;
    box-shadow: 
        0 4px 6px rgba(107, 114, 128, 0.08),
        0 10px 20px rgba(107, 114, 128, 0.1) !important;
}

.gacha-c-grid .prize-block:hover {
    border-color: #9ca3af !important;
    box-shadow: 
        0 12px 24px rgba(107, 114, 128, 0.2),
        0 20px 40px rgba(107, 114, 128, 0.15) !important;
}

/* ラストワン賞 - スペシャルピンク */
.gacha-lastone-grid .prize-block {
    background: linear-gradient(145deg, #ffffff 0%, #fdf2f8 50%, #fce7f3 100%) !important;
    border: 2px solid #f9a8d4 !important;
    box-shadow: 
        0 4px 6px rgba(236, 72, 153, 0.08),
        0 10px 20px rgba(236, 72, 153, 0.1) !important;
}

.gacha-lastone-grid .prize-block:hover {
    border-color: #ec4899 !important;
    box-shadow: 
        0 12px 24px rgba(236, 72, 153, 0.2),
        0 20px 40px rgba(236, 72, 153, 0.15) !important;
}

/* 景品画像の調整 */
.prize-block img {
    border-radius: 12px !important;
    transition: transform 0.3s ease !important;
}

.prize-block:hover img {
    transform: scale(1.03) !important;
}


/* =====================================================
   固定フッター - クリーン＆モダンデザイン
   白背景 + 青アクセント #0077ff - 全ボタン青統一
   ===================================================== */

/* PC用フッター - メインコンテナ */
.fixed-footer.pc-only {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-top: 3px solid #0077ff !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
    padding: 16px 24px 20px !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 16px !important;
}

/* SP用フッター（PC時は非表示） */
.fixed-footer.sp-only {
    display: none !important;
}

/* ポイント情報コンテナ（上段左側） */
.fixed-footer.pc-only .gacha-point-info {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    padding: 0 !important;
}

/* gacha-header（gacha-point-info内） - 横並びレイアウト */
.fixed-footer.pc-only .gacha-point-info .gacha-header,
.fixed-footer.pc-only .gacha-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
}

/* ポイント表示（左側） */
.fixed-footer.pc-only .gacha-price {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #0077ff !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    text-shadow: none !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #0077ff !important;
}

.fixed-footer.pc-only .gacha-price span {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
}

/* ポイントアイコン（Pマーク - ヘッダーと同じスタイル） */
.fixed-footer.pc-only .gacha-price::before {
    content: "P" !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: #0077ff !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    margin-right: 6px !important;
    box-shadow: 0 2px 6px rgba(0, 119, 255, 0.3) !important;
}

/* 残り数エリア（右側） */
.fixed-footer.pc-only .stock-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 8px !important;
}

.fixed-footer.pc-only .stock-text {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #222222 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    text-shadow: none !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
}

/* プログレスバー */
.fixed-footer.pc-only .gauge-bar {
    width: 250px !important;
    height: 16px !important;
    background: #e0e0e0 !important;
    background-color: #e0e0e0 !important;
    border-radius: 8px !important;
    border: 2px solid #cccccc !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.fixed-footer.pc-only .gauge-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #0077ff 0%, #00aaff 50%, #0077ff 100%) !important;
    border-radius: 6px !important;
    transition: width 0.3s ease !important;
    box-shadow: none !important;
    animation: none !important;
}

/* 下段：ボタンエリア（全幅） */
.fixed-footer.pc-only .gacha-buttons {
    display: flex !important;
    gap: 12px !important;
    width: 100% !important;
    flex-basis: 100% !important;
}

/* ガチャボタン共通 - 全部青統一 */
.fixed-footer.pc-only .gacha-button,
.fixed-footer.pc-only .gacha-buttons button {
    flex: 1 !important;
    padding: 18px 24px !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    background: linear-gradient(135deg, #0077ff 0%, #0055dd 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 119, 255, 0.35) !important;
}

.fixed-footer.pc-only .gacha-button:hover,
.fixed-footer.pc-only .gacha-buttons button:hover {
    background: linear-gradient(135deg, #0088ff 0%, #0066ee 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(0, 119, 255, 0.5) !important;
}

/* 10連・100連も青統一（上書き） */
.fixed-footer.pc-only .gacha-button.button-10x,
.fixed-footer.pc-only .gacha-button#gacha10,
.fixed-footer.pc-only .gacha-button.button-100x,
.fixed-footer.pc-only .gacha-button#gacha100,
.fixed-footer.pc-only .gacha-buttons .button-10x,
.fixed-footer.pc-only .gacha-buttons .button-100x {
    background: linear-gradient(135deg, #0077ff 0%, #0055dd 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 119, 255, 0.35) !important;
    animation: none !important;
}

.fixed-footer.pc-only .gacha-button.button-10x:hover,
.fixed-footer.pc-only .gacha-button#gacha10:hover,
.fixed-footer.pc-only .gacha-button.button-100x:hover,
.fixed-footer.pc-only .gacha-button#gacha100:hover {
    background: linear-gradient(135deg, #0088ff 0%, #0066ee 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(0, 119, 255, 0.5) !important;
}

/* ボタンの余計なエフェクト削除 */
.fixed-footer.pc-only .gacha-button::before,
.fixed-footer.pc-only .gacha-button::after,
.fixed-footer.pc-only .gacha-buttons button::before,
.fixed-footer.pc-only .gacha-buttons button::after {
    display: none !important;
    content: none !important;
}

/* =====================================================
   モバイル対応（768px以下）
   ===================================================== */
@media (max-width: 768px) {
    /* PC用を非表示 */
    .fixed-footer.pc-only {
        display: none !important;
    }
    
    /* SP用を表示 */
    .fixed-footer.sp-only {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        border-top: 3px solid #0077ff !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
        padding: 12px 16px 16px !important;
        z-index: 1000 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    /* 上段コンテナ */
    .fixed-footer.sp-only .gacha-point-info {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        background: transparent !important;
    }
    
    .fixed-footer.sp-only .gacha-header {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        background: transparent !important;
        padding: 0 !important;
        border: none !important;
    }
    
    .fixed-footer.sp-only .gacha-price {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-size: 22px !important;
        font-weight: 800 !important;
        color: #0077ff !important;
        text-shadow: none !important;
        background: none !important;
        -webkit-text-fill-color: #0077ff !important;
    }
    
    .fixed-footer.sp-only .gacha-price span {
        font-size: 14px !important;
        color: #333333 !important;
        -webkit-text-fill-color: #333333 !important;
    }
    
    .fixed-footer.sp-only .gacha-price::before {
        content: "P" !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        height: 28px !important;
        background: #0077ff !important;
        border-radius: 50% !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        margin-right: 4px !important;
        box-shadow: 0 2px 6px rgba(0, 119, 255, 0.3) !important;
    }
    
    .fixed-footer.sp-only .stock-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 6px !important;
    }
    
    .fixed-footer.sp-only .stock-text {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #222222 !important;
        text-shadow: none !important;
    }
    
    .fixed-footer.sp-only .gauge-bar {
        width: 150px !important;
        height: 14px !important;
        background: #e0e0e0 !important;
        border-radius: 7px !important;
        border: 2px solid #cccccc !important;
    }
    
    .fixed-footer.sp-only .gauge-fill {
        height: 100% !important;
        background: linear-gradient(90deg, #0077ff 0%, #00aaff 100%) !important;
        border-radius: 5px !important;
        box-shadow: none !important;
        animation: none !important;
    }
    
    /* ボタンエリア */
    .fixed-footer.sp-only .gacha-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }
    
    /* 1回と10連を横並び */
    .fixed-footer.sp-only .gacha-row {
        display: flex !important;
        gap: 10px !important;
        width: 100% !important;
    }
    
    .fixed-footer.sp-only .gacha-row .gacha-button {
        flex: 1 !important;
    }
    
    /* ボタン共通 - 青統一 */
    .fixed-footer.sp-only .gacha-button,
    .fixed-footer.sp-only .gacha-buttons button {
        width: 100% !important;
        padding: 14px 16px !important;
        border: none !important;
        border-radius: 10px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        background: linear-gradient(135deg, #0077ff 0%, #0055dd 100%) !important;
        color: #ffffff !important;
        box-shadow: 0 3px 10px rgba(0, 119, 255, 0.35) !important;
    }
    
    .fixed-footer.sp-only .gacha-button:hover,
    .fixed-footer.sp-only .gacha-buttons button:hover {
        background: linear-gradient(135deg, #0088ff 0%, #0066ee 100%) !important;
    }
    
    /* 10連・100連も青統一 */
    .fixed-footer.sp-only .gacha-button.button-10x,
    .fixed-footer.sp-only .gacha-button#gacha10,
    .fixed-footer.sp-only .gacha-button.button-100x,
    .fixed-footer.sp-only .gacha-button#gacha100 {
        background: linear-gradient(135deg, #0077ff 0%, #0055dd 100%) !important;
        color: #ffffff !important;
        animation: none !important;
    }
    
    .fixed-footer.sp-only .gacha-button::before,
    .fixed-footer.sp-only .gacha-button::after {
        display: none !important;
        content: none !important;
    }
}

/* =====================================================
   超小型画面（480px以下）
   ===================================================== */
@media (max-width: 480px) {
    .fixed-footer.sp-only {
        padding: 10px 12px 14px !important;
        gap: 10px !important;
    }
    
    .fixed-footer.sp-only .gacha-price {
        font-size: 20px !important;
    }
    
    .fixed-footer.sp-only .gacha-price::before {
        width: 24px !important;
        height: 24px !important;
        font-size: 14px !important;
    }
    
    .fixed-footer.sp-only .stock-text {
        font-size: 14px !important;
    }
    
    .fixed-footer.sp-only .gauge-bar {
        width: 120px !important;
        height: 12px !important;
    }
    
    .fixed-footer.sp-only .gacha-button,
    .fixed-footer.sp-only .gacha-buttons button {
        padding: 12px 14px !important;
        font-size: 14px !important;
    }
}

/* =====================================================
   サムネイル表示の最適化 - 枠なし・大きく表示
   ===================================================== */

/* PC版：サムネイルを大きく表示 */
.gacha-image,
.gacha-thumbnail,
.cyber-thumbnail {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.gacha-image img,
.gacha-thumbnail img,
img[alt="ガチャサムネイル"] {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    outline: none !important;
}

/* スマホ版：サムネイルを画面いっぱいに表示 */
@media (max-width: 768px) {
    /* メインコンテナの余白を削除 */
    .entry-content,
    .ast-container,
    .site-main {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* サムネイル画像を画面幅いっぱいに */
    .gacha-image {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        height: auto !important;
    }
    
    .gacha-image img,
    img[alt="ガチャサムネイル"] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
    
    /* wrapper等の余白も調整 */
    .wrapper,
    .space-container {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
}

/* 超小型画面（480px以下） */
@media (max-width: 480px) {
    .gacha-image {
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
    }
    
    img[alt="ガチャサムネイル"] {
        width: 100% !important;
    }
}

/* =====================================================
   cyber-frame ネオン枠を完全削除 - クリーンデザイン
   ===================================================== */

/* すべてのcyber-frameの枠・ネオンを削除 */
.cyber-frame,
.gacha-detail-image.cyber-frame,
.gacha-s-grid .cyber-frame,
.gacha-s-grid .gacha-detail-image.cyber-frame,
.gacha-a-grid .cyber-frame,
.gacha-a-grid .gacha-detail-image.cyber-frame,
.gacha-b-grid .cyber-frame,
.gacha-b-grid .gacha-detail-image.cyber-frame,
.gacha-c-grid .cyber-frame,
.gacha-c-grid .gacha-detail-image.cyber-frame,
.gacha-detail-grid .cyber-frame,
.wrapper .cyber-frame {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    animation: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

/* 疑似要素も削除 */
.cyber-frame::before,
.cyber-frame::after,
.gacha-detail-image.cyber-frame::before,
.gacha-detail-image.cyber-frame::after,
.gacha-s-grid .cyber-frame::before,
.gacha-s-grid .cyber-frame::after,
.gacha-s-grid .gacha-detail-image.cyber-frame::before,
.gacha-s-grid .gacha-detail-image.cyber-frame::after {
    display: none !important;
    content: none !important;
}

/* サムネイル画像を大きく表示 */
.cyber-frame img,
.wrapper .cyber-frame img,
img[alt="ガチャサムネイル"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* PC版：wrapper内のサムネを大きく */
.wrapper {
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
}

/* スマホ版：サムネを画面いっぱいに */
@media (max-width: 768px) {
    .wrapper,
    .wrapper .cyber-frame {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .cyber-frame img,
    .wrapper .cyber-frame img,
    img[alt="ガチャサムネイル"] {
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
    }
}

/* =====================================================
   全ページ共通 - 白背景 + 黒テキスト（クリーンデザイン）
   利用規約ページ等すべてのページに適用
   ===================================================== */

/* CSS変数を上書き */
:root {
    --space-black: #ffffff !important;
    --clove-bg: #ffffff !important;
}

/* body背景を白に強制 */
html,
body,
body.page,
body.single,
body.archive,
body.home {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #222222 !important;
}

/* メインコンテンツエリア */
#page,
#primary,
#main,
.site-main,
.ast-container,
.ast-plain-container,
.entry-content,
.page-content,
article,
.post,
.page {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #222222 !important;
}

/* コンテンツラッパー */
.content-area,
.site-content,
#content,
.ast-separate-container,
.ast-plain-container .site-content > .ast-container {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* 利用規約ページ専用（page-id-110） */
body.page-id-110,
body.page-id-110 #page,
body.page-id-110 .site-main,
body.page-id-110 .entry-content,
body.page-id-110 article {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #222222 !important;
}

/* テキスト色を黒に（本文のみ） */
body p,
body h1, body h2, body h3, body h4, body h5, body h6,
body li,
.entry-content p,
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content li,
.page-content p {
    color: #222222 !important;
}

/* ボタンのテキストは白を維持 */
button,
.button,
.btn,
input[type="submit"],
input[type="button"],
.gacha-button,
.gacha-button-top,
.fixed-footer button,
.fixed-footer .gacha-button,
.woocommerce-button,
.ast-button,
a.button,
a.btn {
    color: #ffffff !important;
}

/* リンク色は青 */
body a,
.entry-content a,
.page-content a {
    color: #0077ff !important;
}

body a:hover,
.entry-content a:hover {
    color: #0055cc !important;
}

/* ヘッダー・フッターは除外（別途スタイル設定済み） */
header#masthead,
footer.site-footer,
.ast-primary-header-bar,
.main-header-bar {
    /* ヘッダーは透明または別色を維持 */
}

/* =====================================================
   サイトフッター - ヘッダーと統一（青＆白）
   ===================================================== */
footer.site-footer,
.site-footer,
.site-primary-footer-wrap,
.site-footer-primary-section-1,
.ast-builder-grid-row-container,
.site-primary-footer-wrap.ast-builder-grid-row-container,
#colophon {
    background-color: #0077FF !important;
    background: #0077FF !important;
    color: #ffffff !important;
}

.site-footer a,
.site-footer .ast-footer-copyright,
.site-footer .ast-footer-copyright a,
.site-footer .widget,
.site-footer .widget a,
.site-primary-footer-wrap a,
.ast-builder-grid-row-container a,
#colophon,
#colophon a {
    color: #ffffff !important;
}

.site-footer a:hover,
.site-footer .widget a:hover,
.site-primary-footer-wrap a:hover,
#colophon a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: underline;
}

/* フッターメニュー */
#astra-footer-menu .menu-item a,
.footer-nav-menu a,
.ast-footer-menu a,
.ast-builder-menu a {
    color: #ffffff !important;
}

#astra-footer-menu .menu-item a:hover,
.footer-nav-menu a:hover,
.ast-footer-menu a:hover,
.ast-builder-menu a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* =====================================================
   TOPページ ガチャブロック - ポイント表示をヘッダー右上に
   ===================================================== */

/* TOPページのガチャブロックのヘッダー */
.gacha-block.gacha-item.gacha-content .gacha-header {
    position: relative !important;
    padding: 12px 16px !important;
    min-height: 70px !important;
    background: #ffffff !important;
    display: block !important;
}

/* 残り数を左側に */
.gacha-block.gacha-item.gacha-content .stock-info {
    text-align: left !important;
    width: auto !important;
}

.gacha-block.gacha-item.gacha-content .stock-text {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #222222 !important;
    text-shadow: none !important;
}

/* ポイント表示を右上に小さく配置 */
.gacha-block.gacha-item.gacha-content .gacha-price {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    background: linear-gradient(135deg, #0077FF 0%, #00BFFF 100%) !important;
    color: #ffffff !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 6px 12px 6px 8px !important;
    border-radius: 20px !important;
    text-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 119, 255, 0.3) !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
}

/* Pアイコン */
.gacha-block.gacha-item.gacha-content .gacha-price::before {
    content: "P" !important;
    background: #ffffff !important;
    color: #0077FF !important;
    min-width: 20px !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}

.gacha-block.gacha-item.gacha-content .gacha-price span {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.7rem !important;
    margin-left: 2px !important;
}

/* ゲージバーのスタイル調整 */
.gacha-block.gacha-item.gacha-content .gauge-bar {
    height: 6px !important;
    background: #e0e0e0 !important;
    border-radius: 3px !important;
    margin-top: 8px !important;
}

.gacha-block.gacha-item.gacha-content .gauge-fill {
    background: linear-gradient(90deg, #0077FF, #00BFFF) !important;
    border-radius: 3px !important;
}

/* 画像右下のオーバーレイを非表示 */
.gacha-block.gacha-item.gacha-content .gacha-image::after,
.gacha-block.gacha-item.gacha-content .gacha-image .gacha-price,
.gacha-block.gacha-item.gacha-content .gacha-image + .gacha-price {
    display: none !important;
}

/* =====================================================

/* =====================================================
   Retry Gacha Page - Clove Theme
   ===================================================== */

body.page-template-page-retrygacha {
    background: #ffffff !important;
}

body.page-template-page-retrygacha .cyber-title-container {
    background: #0077ff !important;
    color: #ffffff !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
}

body.page-template-page-retrygacha .cyber-content {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

body.page-template-page-retrygacha .cyber-content img {
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(0, 119, 255, 0.2) !important;
}

body.page-template-page-retrygacha .gacha-price {
    background: #0077ff !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-image: none !important;
}

body.page-template-page-retrygacha .gacha-price span {
    background: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.page-template-page-retrygacha .gauge-bar {
    box-shadow: none !important;
    background: #e0e0e0 !important;
}

body.page-template-page-retrygacha .gauge-fill {
    background: #0077ff !important;
}

body.page-template-page-retrygacha .stock-text {
    color: #222222 !important;
    -webkit-text-fill-color: #222222 !important;
}

body.page-template-page-retrygacha .gacha-button-row {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

body.page-template-page-retrygacha #gacha1,
body.page-template-page-retrygacha #gacha10,
body.page-template-page-retrygacha #gacha100 {
    background: #0077ff !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    flex: 1 1 auto !important;
    min-width: 100px !important;
}

body.page-template-page-retrygacha #confirmModal .modal-content {
    background: #ffffff !important;
    border-radius: 16px !important;
}

@media (max-width: 400px) {
    body.page-template-page-retrygacha .cyber-title-container {
        font-size: 0.78rem !important;
    }
}

/* =====================================================
   WordPress管理バー保護
   ===================================================== */

#wpadminbar {
    background: #1d2327 !important;
}

#wpadminbar .ab-item,
#wpadminbar a.ab-item,
#wpadminbar .quicklinks a,
#wpadminbar .quicklinks span {
    color: #c3c4c7 !important;
    -webkit-text-fill-color: #c3c4c7 !important;
}

#wpadminbar a:hover {
    color: #72aee6 !important;
    -webkit-text-fill-color: #72aee6 !important;
}

/* =====================================================
   マイページメニュー
   ===================================================== */

/* 共通 */
.menu-dropdown {
    background: #ffffff !important;
    border: none !important;
    box-shadow: 0 10px 60px rgba(0, 0, 0, 0.25) !important;
    padding: 0 !important;
    display: none;
    overflow-y: auto !important;
}

.menu-dropdown .menu-card {
    background: transparent !important;
    padding: 24px 20px !important;
    text-align: center !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.menu-dropdown .rank-card-img {
    max-width: 260px !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    margin: 0 auto !important;
}

.menu-dropdown .cyber-row {
    background: #ffffff !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.menu-dropdown .cyber-row a {
    display: flex !important;
    justify-content: space-between !important;
    padding: 18px 24px !important;
    color: #222222 !important;
    -webkit-text-fill-color: #222222 !important;
    font-weight: 500 !important;
}

.menu-dropdown .cyber-row a::after {
    content: "›" !important;
    color: #ccc !important;
    -webkit-text-fill-color: #ccc !important;
}

.menu-dropdown .cyber-row:hover {
    background: #f8f9fa !important;
}

/* PC版 */
@media (min-width: 769px) {
    .menu-dropdown {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        min-width: 320px !important;
        max-width: 380px !important;
        border-radius: 20px !important;
        z-index: 9999 !important;
    }
    
    .menu-dropdown .menu-card {
        border-radius: 20px 20px 0 0 !important;
    }
}

/* ユーザーアイコン */
.menu-icon .user-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    cursor: pointer !important;
}

@media (max-width: 768px) {
    .menu-icon .user-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
}

/* =====================================================
   購入確認モーダル - 半透明オーバーレイ
   ===================================================== */

#infiConfirmModal.modal,
.modal#infiConfirmModal {
    background: rgba(0, 0, 0, 0.5) !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
}

#infiConfirmModal .modal-content,
.modal#infiConfirmModal .modal-content {
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    max-width: 400px !important;
    margin: auto !important;
}

/* 汎用モーダル背景 */
.modal {
    background: rgba(0, 0, 0, 0.5) !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.modal .modal-content {
    background: #ffffff !important;
}

/* =====================================================
   SOLD OUT / COMING SOON ガチャブロック
   ===================================================== */

/* SOLD OUT オーバーレイ - 青い帯 + 白文字 */
.sold-out::before,
.gacha-block.sold-out::before,
.gacha-item.sold-out::before,
.gacha-content.sold-out::before,
div.sold-out::before {
    content: "SOLD OUT" !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    background: #0077ff !important;
    background-color: #0077ff !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100 !important;
    padding: 16px 0 !important;
    text-shadow: none !important;
    letter-spacing: 4px !important;
    border-radius: 0 !important;
    bottom: auto !important;
    height: auto !important;
}

/* COMING SOON オーバーレイ - 青い帯 + 白文字 */
.coming-soon::before,
.not-available::before,
.not-available.coming-soon::before,
.gacha-block.coming-soon::before,
.gacha-block.not-available::before,
.gacha-block.not-available.coming-soon::before,
.gacha-item.coming-soon::before,
.gacha-content.coming-soon::before,
div.not-available::before,
div.coming-soon::before {
    content: "COMING SOON" !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    background: #0077ff !important;
    background-color: #0077ff !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100 !important;
    padding: 16px 0 !important;
    text-shadow: none !important;
    letter-spacing: 3px !important;
    border-radius: 0 !important;
    bottom: auto !important;
    height: auto !important;
}

/* カウントダウンタイマー */
.countdown-timer {
    background: rgba(0, 119, 255, 0.9) !important;
    background-color: rgba(0, 119, 255, 0.9) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    margin-bottom: 12px !important;
    display: block !important;
}

.countdown-timer * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* SOLD OUT / COMING SOON 時のボタン */
.sold-out .gacha-button,
.sold-out #gacha1,
.sold-out #gacha10,
.sold-out #gacha100,
.sold-out .button-container button,
.coming-soon .gacha-button,
.coming-soon #gacha1,
.coming-soon #gacha10,
.coming-soon #gacha100,
.coming-soon .button-container button,
.not-available .gacha-button,
.not-available #gacha1,
.not-available #gacha10,
.not-available #gacha100,
.not-available .button-container button {
    background: #cccccc !important;
    color: #888888 !important;
    -webkit-text-fill-color: #888888 !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* ゲージの色は青のまま（COMING SOONでもグレーにしない） */
.coming-soon .gauge-fill,
.not-available .gauge-fill,
.coming-soon .gauge-bar .gauge-fill,
.not-available .gauge-bar .gauge-fill {
    background: #0077ff !important;
    background-color: #0077ff !important;
}

/* SP対応 */
@media (max-width: 768px) {
    .sold-out::before,
    .gacha-block.sold-out::before,
    .gacha-item.sold-out::before {
        font-size: 1.4rem !important;
        padding: 12px 0 !important;
    }
    
    .coming-soon::before,
    .not-available::before,
    .gacha-block.coming-soon::before,
    .not-available.coming-soon::before {
        font-size: 1.2rem !important;
        padding: 12px 0 !important;
    }
    
    .countdown-timer {
        font-size: 0.95rem !important;
        padding: 10px 16px !important;
    }
}

/* =====================================================
   ソートボタン - ガチャ結果 / コレクション共通
   ===================================================== */

.sort-buttons {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
}

.sort-btn {
    padding: 10px 20px !important;
    border: 2px solid #0077ff !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: 14px !important;
}

.sort-btn:not(.active) {
    background: #ffffff !important;
    color: #0077ff !important;
}

.sort-btn.active {
    background: #0077ff !important;
    color: #ffffff !important;
}

.sort-btn:hover:not(.active) {
    background: #f0f7ff !important;
}

/* SP対応 */
@media (max-width: 768px) {
    .sort-buttons {
        gap: 8px !important;
    }
    
    .sort-btn {
        padding: 8px 14px !important;
        font-size: 12px !important;
        flex: 0 0 auto !important;
    }
}

/* =====================================================
   コレクション フィルターリンク - 新デザイン
   ===================================================== */

.collection-filter {
    display: flex !important;
    overflow-x: auto !important;
    gap: 8px !important;
    justify-content: center !important;
    padding: 0 8px !important;
    margin-bottom: 20px !important;
}

.collection-filter .filter-link {
    flex: 0 0 auto !important;
    text-align: center !important;
    padding: 10px 16px !important;
    border: 2px solid #0077ff !important;
    border-radius: 25px !important;
    color: #0077ff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

.collection-filter .filter-link.active,
.collection-filter .filter-link:hover {
    background: #0077ff !important;
    color: #ffffff !important;
}

/* SP対応 */
@media (max-width: 768px) {
    .collection-filter {
        justify-content: flex-start !important;
    }
    
    .collection-filter .filter-link {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
}