/*
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: linear-gradient(90deg, #a855f7, #3b82f6);
}

/*少し下でサブメニュー表示*/
.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: linear-gradient(90deg, #a855f7, #3b82f6);
}

/* Submenu item hover effect */
.sub-menu li:hover {
    background: #555;
    color: #fff !important;
}

.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: white !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: 100px !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: linear-gradient(90deg, #a855f7, #3b82f6);
    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: linear-gradient(90deg, #a855f7, #3b82f6);
    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: #000; /* デフォルトの背景色を黒に設定 */
    color: #fff; /* テキストの色を白に設定 */
    border: 1px solid #fff; /* 境界線の色を白に設定 */
}

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

/* WooCommerceページの文字色設定 */
body.woocommerce-page * {
    color: white !important;
}

/* WooCommerceページのボタンスタイル設定 */
body.woocommerce-page .button,
body.woocommerce-page .btn,
body.woocommerce-page input[type="submit"] {
    background: linear-gradient(90deg, #a855f7, #3b82f6) !important;
    color: white !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: rgba(0, 0, 0, 0.5) !important; /* 背景を黒の半透明に設定 */
    padding: 10px !important;
    border-radius: 5px !important;
}

/*shopの並び替え*/
.woocommerce-js .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
    background-color: #000;
}

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

/* Ultimate Memberページの文字色設定 */
body.um-page * {
    color: white !important;
}

/* Ultimate Memberページのボタンスタイル設定 */
body.um-page .um-button,
body.um-page .um-btn,
body.um-page input[type="submit"] {
    background: linear-gradient(90deg, #a855f7, #3b82f6) !important;
    color: white !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: rgba(0, 0, 0, 0.5) !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-1966 {
    background-color: #0a0a0f;
    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: white !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: linear-gradient(90deg, #a855f7, #3b82f6) !important;
    color: white !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: rgba(0, 0, 0, 0.5); /* 背景を黒の半透明に設定 */
    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: rgba(0, 0, 0, 0.5); /* 背景を黒の半透明に設定 */
    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: rgba(0, 0, 0, 0.5); /* 背景を黒の半透明に設定 */
    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: rgba(0, 0, 0, 0.5); /* 背景を黒の半透明に設定 */
    padding: 10px;
    border-radius: 5px;
}

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

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

.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: #000;
}

.woocommerce-js .select2-container .select2-selection--single,
.woocommerce-js select,
.woocommerce-page .select2-container .select2-selection--single,
.woocommerce-page select {
    background-color: #000;
}

.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: rgba(0, 0, 0, 0.22);
    border: 1px solid white;
}

/*お買い物カゴ*/
.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: #000;
}

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

label,
legend {
    color: #fff;
}

/*支払い注文情報*/
.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: #000;
}

/*ログインページ*/
.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: #000;
}

.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: #333; /* ホバー時の背景色を変更 */
    color: #fff; /* テキストの色を白に設定 */
}

.um-field .select2.select2-container .select2-selection,
.um-search-filter .select2.select2-container .select2-selection {
    background-color: #000 !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: #000 !important;
    color: #fff !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: #fff !important; /* 白い文字色 */
}

/* ドロップダウン全体の背景色変更 */
.page-id-152 .select2-dropdown {
    background-color: #000 !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: #000000 !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: #555 !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: 85%;
    margin: auto;
    display: block;
}

.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: linear-gradient(90deg, #a855f7, #3b82f6) !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: linear-gradient(90deg, #a855f7, #3b82f6);
    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%;
    }
}

/* フッターに固定するためのスタイル */
.fixed-footer {
    position: fixed;
    bottom: 0;
    left: 0px;
    right: 0px;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #000; /* 背景色を指定（必要に応じて変更） */
    padding: 10px 0;
    z-index: 1000; /* 他の要素の上に表示するための指定 */
}

/* ボタンを横並びにするためのスタイル */
.fixed-footer button {
    margin: 0 10px; /* ボタン間のマージン */
    /*background: linear-gradient(90deg, #a855f7, #3b82f6);*/
    color: #ffffff;
    /*border: none;*/
    cursor: pointer;
    /*border-radius: 25px;*/
    /*transition: opacity 0.5s ease, box-shadow 0.5s ease, font-weight 0.5s ease;*/
}

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

.ast-container {
    padding: 20px;
}

@media (max-width: 800px) {
    .fixed-footer button {
        font-size: 15px;
        margin: 0px; /* ボタン間のマージン */
    }

    .ast-container {
        padding: 10px;
    }
}

/*ボタンやモーダルを横幅一杯に*/
.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: linear-gradient(90deg, #a855f7, #3b82f6);
    color: #ffffff;
}

.modal-button.confirm:hover {
    opacity: 0.8;
    background: linear-gradient(90deg, #a855f7, #3b82f6);
}

/* テキストのスタイル */
.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: linear-gradient(90deg, #a855f7, #3b82f6);
        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: rgba(0, 0, 0, 0.5);
    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: #000; /* 背景色を指定（必要に応じて変更） */
    padding: 10px 0;
    z-index: 1000; /* 他の要素の上に表示するための指定 */
}

/* コレクションの一括設定ボタン */
.add-submit-button button {
    margin: 0 10px; /* ボタン間のマージン */
    background: linear-gradient(90deg, #a855f7, #3b82f6);
    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: linear-gradient(90deg, #a855f7, #3b82f6);
    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: #000;
}

/*お知らせのテキスト白く*/
#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: linear-gradient(90deg, #a855f7, #3b82f6);*/
/*    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: linear-gradient(90deg, #a855f7, #3b82f6);*/
/*    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: linear-gradient(90deg, #a855f7, #3b82f6);*/
    /*    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: linear-gradient(90deg, #a855f7, #3b82f6);*/
    /*    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;
}

.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: linear-gradient(90deg, #a855f7, #3b82f6);
        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;
    }
}

/* サイバーパンク風のカードデザイン */
.cyber-card {
    background: linear-gradient(45deg, #0a1128, #1a237e);
    border: none;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(66, 134, 244, 0.3);
    position: relative;
    overflow: hidden;
}

.cyber-card-inner {
    background: rgba(8, 16, 41, 0.85);
    border-radius: 15px;
    padding: 2px;
}

/* サイバーパンク風のタイトル */
.cyber-title-container {
    position: relative;
    margin-bottom: 2rem;
    padding: 1.5rem; /* パディングを調整 */
    border: 2px solid rgba(66, 134, 244, 0.3);
    border-radius: 8px;
    background: linear-gradient(45deg, rgba(10, 17, 40, 0.8), rgba(26, 35, 126, 0.8));
    min-height: 80px; /* コンテナの最小の高さを設定 */
}

.cyber-title {
    color: #4facfe;
    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;
    text-shadow: 0 0 10px rgba(79, 172, 254, 0.5);
    margin: 0; /* マージンをリセット */
}

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

.cyber-content {
    background: rgba(26, 35, 126, 0.2);
    border: 1px solid rgba(66, 134, 244, 0.2);
    backdrop-filter: blur(5px);
    border-radius: 10px;
    transition: all 0.3s ease;
    min-height: 200px; /* コンテンツの最小高さを設定 */
}

.cyber-thumbnail {
    max-width: 100%;
    height: auto;
}

.cyber-content:hover {
    box-shadow: 0 0 15px rgba(79, 172, 254, 0.3);
    transform: translateY(-2px);
}

/* レスポンシブ対応 */
@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: 70px;
    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%;
    aspect-ratio: 2481 / 1754;
    position: relative;
    overflow: hidden;
    background: linear-gradient(45deg, #0a0a0f, #1a0033);
    border: none;
    border-top: 1px solid var(--cyber-blue);
    border-bottom: 1px solid var(--cyber-blue);
}

/* .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 {
        height: 258px;
    }
}

.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: rgba(0, 0, 0, 0.5);
    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);
}

.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;
    }
}

.cyber-cart-wrapper {
    max-width: 900px;
    margin: 2rem auto;
    background: linear-gradient(135deg, #181a25 90%, #1f3348 100%);
    border: 2px solid #00ffff;
    border-radius: 16px;
    box-shadow: 0 0 40px #00fff844, 0 0 10px #00ffe799 inset;
    padding: 32px 24px;
    position: relative;
}

.cyber-cart-title {
    color: #00f7ff;
    text-shadow: 0 0 24px #00f7ff, 0 0 12px #fff;
    font-size: 2.2rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    margin-bottom: 1.2rem;
    text-align: center;
    letter-spacing: 0.15em;
}

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

.cyber-cart-row {
    display: flex;
    align-items: center;
    background: rgba(0, 14, 36, 0.7);
    border-radius: 18px;
    border: 1.5px solid #00ffe7cc;
    box-shadow: 0 0 18px #00ffe799;
    padding: 22px 18px;
    position: relative;
    gap: 5px;
    transition: background 0.2s;
}
.cyber-cart-row:hover {
    background: linear-gradient(90deg, #001e33 40%, #1d75ff 100%);
}

/* === カラム幅調整（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.15rem;
    font-weight: bold;
    color: #fff;
}
.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.13rem;
    font-weight: bold;
    color: #fff;
    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: 14px;
    border: 2.5px solid #00ffe7;
    background: #111d;
    box-shadow: 0 0 12px #00ffe7cc;
}

/* === 数量入力 === */
.cyber-cart-qty input {
    background: #111c;
    border: 1.5px solid #00ffe7;
    border-radius: 8px;
    color: #fff;
    width: 56px;
    text-align: center;
    font-size: 1.08rem;
    font-weight: bold;
    padding: 7px 0;
    box-shadow: 0 0 7px #00ffe755 inset;
    outline: none;
    margin: 0 3px;
    transition: border-color 0.2s;
}

/* === 削除ボタン === */
.cyber-cart-remove .cyber-remove-btn {
    color: #fff;
    background: linear-gradient(90deg, #222a 40%, #00ffe7 100%);
    border: none;
    border-radius: 50%;
    font-size: 1.19rem;
    width: 33px;
    height: 33px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 9px #00ffe7cc;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    margin-left: 2px;
}
.cyber-cart-remove .cyber-remove-btn:hover {
    background: linear-gradient(90deg, #ff33fd 10%, #1d75ff 90%);
    color: #fff92e;
}

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

.cyber-cart-update-btn {
    background: linear-gradient(90deg, #0caab9 30%, #1951a1 70%);
    color: #e5f7ff;
    font-weight: bold;
    border: none;
    border-radius: 22px;
    padding: 10px 32px;
    font-size: 1.1rem;
    box-shadow: 0 0 10px #12708877;
    transition: filter 0.2s, background 0.2s;
    cursor: pointer;
}
.cyber-cart-update-btn:hover {
    background: linear-gradient(90deg, #3e3ee6 10%, #1951a1 90%);
    filter: brightness(1.09) contrast(1.08);
    color: #fff;
}

.cyber-cart-totals {
    background: rgba(0, 22, 40, 0.65);
    border-radius: 16px;
    margin-top: 32px;
    padding: 28px 22px;
    border: 2px solid #00ffe7cc;
    box-shadow: 0 0 16px #00ffe7bb;
}

@media (max-width: 700px) {
    .cyber-cart-row {
        flex-direction: row;
        align-items: center;
        padding: 10px 4vw 10px 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: 2px solid #00ffe7;
        background: #111d;
        box-shadow: 0 0 8px #00ffe7cc;
    }
    .cyber-cart-name {
        flex: 1 1 auto;
        text-align: left;
        font-size: 1.03rem;
        font-weight: bold;
        color: #fff;
        margin: 0;
        padding: 0 5px;
        word-break: break-all;
        min-width: 44px;
        order: 2;
    }
    .cyber-cart-subtotal {
        flex: 0 0 100%;
        font-size: 1.05rem;
        font-weight: bold;
        color: #fff;
        text-align: right;
        min-width: 46px;
        padding: 0 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: 32px;
        height: 32px;
        font-size: 1.09rem;
        border-radius: 50%;
        margin: 0;
    }
    /* --- 数量だけ改行＆中央寄せ --- */
    .cyber-cart-qty {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 6px 0 2px 0;
        order: 3;
    }
    .cyber-cart-qty input {
        width: 58px;
        font-size: 1.07rem;
        padding: 7px 0;
        margin: 0 auto;
        background: #111;
        text-align: center;
        border: 1.5px solid #00ffe7;
        border-radius: 7px;
    }
}

.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: #00f7ff;
    text-shadow: 0 0 18px #00f7ff, 0 0 8px #fff;
    letter-spacing: 0.09em;
    margin-bottom: 1.1em;
    font-weight: bold;
    font-size: 1.4rem;
}

/* 入力フォーム部分 */
.woocommerce-checkout .form-row {
    background: rgba(0, 20, 40, 0.58);
    border: 1px solid #00ffe7bb;
    border-radius: 11px;
    padding: 16px 10px;
    margin-bottom: 18px;
    box-shadow: 0 0 7px #00ffe755;
    color: #e8f9ff;
}

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

/* テキスト/セレクト入力 */
.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: #142a3e;
    border: 1px solid #00ffe7;
    border-radius: 8px;
    color: #e5f7ff;
    font-size: 1.03rem;
    padding: 8px 14px;
    width: 100%;
    margin-top: 6px;
    box-shadow: 0 0 6px #00ffe7cc inset;
    transition: border-color 0.2s;
}
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    border-color: #00e9ff;
    outline: none;
}

/* 注文内容・合計エリア */
.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: rgba(0, 22, 40, 0.7);
    border: 2px solid #00ffe7cc;
    padding: 20px 16px;
    margin-bottom: 18px;
    color: #d1f4ff;
}

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

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

/* 注文ボタン */
.woocommerce-checkout .button,
.woocommerce-checkout .place-order .button {
    background: linear-gradient(90deg, #0caab9 30%, #1951a1 70%);
    color: #e5f7ff;
    font-weight: bold;
    border: none;
    border-radius: 22px;
    padding: 14px 38px;
    font-size: 1.13rem;
    box-shadow: 0 0 10px #12708877;
    transition: filter 0.2s, background 0.2s;
    cursor: pointer;
}
.woocommerce-checkout .button:hover,
.woocommerce-checkout .place-order .button:hover {
    background: linear-gradient(90deg, #3e3ee6 10%, #1951a1 90%);
    filter: brightness(1.09) contrast(1.08);
    color: #fff;
}

/* エラーや注意メッセージ */
/* .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: linear-gradient(135deg, #181a25 90%, #1f3348 100%);
    border-radius: 16px;
    border: 2px solid #00ffe7cc;
    box-shadow: 0 0 16px #00ffe7bb;
    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: #e8f9ff;
}

.woocommerce-checkout label {
    color: #b1ecff;
    font-weight: 500;
    margin-bottom: 4px;
    display: inline-block;
    letter-spacing: 0.03em;
}

.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: #142a3e;
    border: 1px solid #00c4e7;
    border-radius: 6px;
    color: #e5f7ff;
    font-size: 1.03rem;
    padding: 8px 14px;
    width: 100%;
    margin-top: 6px;
    box-shadow: 0 0 3px #00ffe733 inset;
    transition: border-color 0.2s;
}

.woocommerce-checkout-review-order,
.woocommerce-checkout-payment {
    background: rgba(0, 22, 40, 0.44);
    border: 1px solid #00c4e7;
    border-radius: 10px;
    padding: 20px 14px;
    margin-bottom: 15px;
    box-shadow: 0 0 7px #00ffe722;
    color: #d1f4ff;
}

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

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

.cyber-checkout-wrapper label.p-FieldLabel {
    color: #fff !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: linear-gradient(135deg, #13213d 70%, #09e5ff 100%);
    border-radius: 18px;
    box-shadow: 0 0 24px #07d3fa77, 0 0 6px #005fa7bb;
    max-width: 600px;
    margin: 2em auto;
    padding: 2.5em 2em 2em 2em;
    border: 2px solid #09e5ff;
    position: relative;
    overflow: hidden;
}

.cyber-contact-wrap .wpcf7-form-control,
.wpcf7-form-control {
    background: rgba(18, 33, 61, 0.92);
    color: #fff;
    border: 1.5px solid #09e5ff;
    border-radius: 8px;
    box-shadow: 0 0 8px #09e5ff22;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 1.09em;
    transition: border 0.2s;
}

.cyber-contact-wrap .wpcf7-form-control:focus,
.wpcf7-form-control:focus {
    border-color: #0af;
    box-shadow: 0 0 16px #09e5ff88;
    outline: none;
}

.cyber-contact-wrap .wpcf7-submit,
.wpcf7-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 36px;
    box-shadow: 0 0 14px #09e5ff88;
    margin-top: 14px;
    transition: background 0.2s, box-shadow 0.2s;
    cursor: pointer;
    width: 100%;
}

.cyber-contact-wrap .wpcf7-submit:hover,
.wpcf7-submit:hover {
    background: linear-gradient(90deg, #003788 20%, #09e5ff 80%);
    box-shadow: 0 0 24px #09e5ff;
    color: #fff;
}

.cyber-contact-wrap label,
label {
    color: #09e5ff;
    font-weight: bold;
    text-shadow: 0 0 8px #fff3;
    font-size: 1.07em;
    margin-bottom: 4px;
    letter-spacing: 0.04em;
    display: inline-block;
    width: 100%;
}

/* メッセージ（送信完了/エラー） */
.cyber-contact-wrap .wpcf7-response-output,
.wpcf7-response-output {
    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;
    padding: 1em 1em;
    text-align: center;
}

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

.cyber-terms-wrap {
    background: linear-gradient(135deg, #13213d 65%, #09e5ff 100%);
    border-radius: 18px;
    box-shadow: 0 0 36px #07d3fa77, 0 0 8px #005fa7bb;
    max-width: 900px;
    margin: 2.5em auto;
    padding: 3em 2.5em 2em 2.5em;
    border: 2px solid #09e5ff;
    color: #e2f3ff;
    font-size: 1.09em;
    line-height: 2;
    letter-spacing: 0.01em;
    position: relative;
    width: 80%;
}

.cyber-terms-wrap h2,
.cyber-terms-wrap .wp-block-heading {
    color: #09e5ff;
    text-shadow: 0 0 12px #09e5ff99, 0 0 2px #fff;
    font-size: 1.6em;
    font-weight: bold;
    border-bottom: 1.5px solid #09e5ff66;
    margin-bottom: 1em;
    margin-top: 0.8em;
    padding-bottom: 0.4em;
    letter-spacing: 0.05em;
}

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

.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;
}
.cyber-terms-wrap ol > li:before {
    content: counter(cyber-list) ".";
    counter-increment: cyber-list;
    color: #09e5ff;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0.08em;
    font-size: 1.09em;
    text-shadow: 0 0 6px #09e5ff66;
}

.cyber-terms-wrap ul > li {
    position: relative;
    margin-bottom: 0.7em;
    padding-left: 1.8em;
}
.cyber-terms-wrap ul > li:before {
    content: "";
    display: inline-block;
    width: 0.65em;
    height: 0.65em;
    background: linear-gradient(135deg, #09e5ff 60%, #003788 100%);
    border-radius: 50%;
    box-shadow: 0 0 6px #09e5ff88;
    position: absolute;
    left: 0;
    top: 0.45em;
}

.cyber-terms-wrap strong {
    color: #fff;
    text-shadow: 0 0 8px #09e5ff44;
    font-weight: bold;
}

.cyber-terms-wrap {
    /* テキスト選択時もサイバー */
    ::selection {
        background: #09e5ff77;
        color: #001528;
    }
}

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

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

.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;
}