/* 共通ボタンスタイル */
.button-base {
    height: 35.19px;
    font-size: 14px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    line-height: 1.2em;
}

.small {
    width: 168.75px;
}

.large {
    width: 350px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* === 1. 光沢スライド === */
.btn-shine {
    border-radius: 8px;
    position: relative;
}

.btn-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: shine 3s infinite;
}

@keyframes shine {

    0%,
    10% {
        left: -100%;
    }

    50% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

.btn-shine.red {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.btn-shine.blue {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.btn-shine.green {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.btn-shine.orange {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
}

.btn-shine.black {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
}

.btn-shine.silver {
    background: linear-gradient(135deg, #bdc3c7 0%, #95a5a6 100%);
    color: #333;
}

.btn-shine.gold {
    background: linear-gradient(135deg, #f39c12 0%, #d68910 100%);
}

/* === 2. パルスグロー === */
.btn-pulse {
    border-radius: 50px;
}

.btn-pulse.red {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    animation: pulse-glow-red 3s infinite;
}

.btn-pulse.blue {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    animation: pulse-glow-blue 3s infinite;
}

.btn-pulse.green {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    animation: pulse-glow-green 3s infinite;
}

.btn-pulse.orange {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
    animation: pulse-glow-orange 3s infinite;
}

.btn-pulse.black {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
    animation: pulse-glow-black 3s infinite;
}

.btn-pulse.silver {
    background: linear-gradient(135deg, #bdc3c7 0%, #95a5a6 100%);
    color: #333;
    animation: pulse-glow-silver 3s infinite;
}

.btn-pulse.gold {
    background: linear-gradient(135deg, #f39c12 0%, #d68910 100%);
    animation: pulse-glow-gold 3s infinite;
}

@keyframes pulse-glow-red {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 25px rgba(231, 76, 60, 0.8);
        transform: scale(1.05);
    }
}

@keyframes pulse-glow-blue {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 25px rgba(52, 152, 219, 0.8);
        transform: scale(1.05);
    }
}

@keyframes pulse-glow-green {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 25px rgba(46, 204, 113, 0.8);
        transform: scale(1.05);
    }
}

@keyframes pulse-glow-orange {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(230, 126, 34, 0.5);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 25px rgba(230, 126, 34, 0.8);
        transform: scale(1.05);
    }
}

@keyframes pulse-glow-black {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(52, 73, 94, 0.5);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 25px rgba(52, 73, 94, 0.8);
        transform: scale(1.05);
    }
}

@keyframes pulse-glow-silver {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(189, 195, 199, 0.7);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 25px rgba(189, 195, 199, 1);
        transform: scale(1.05);
    }
}

@keyframes pulse-glow-gold {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(243, 156, 18, 0.5);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 25px rgba(243, 156, 18, 0.8);
        transform: scale(1.05);
    }
}

/* === 3. グラデーションシフト === */
.btn-gradient-shift {
    border-radius: 6px;
    background-size: 300% 100%;
    animation: gradient-shift 3s infinite;
}

.btn-gradient-shift.red {
    background: linear-gradient(90deg, #e74c3c, #c0392b, #e74c3c);
}

.btn-gradient-shift.blue {
    background: linear-gradient(90deg, #3498db, #2980b9, #3498db);
}

.btn-gradient-shift.green {
    background: linear-gradient(90deg, #2ecc71, #27ae60, #2ecc71);
}

.btn-gradient-shift.orange {
    background: linear-gradient(90deg, #e67e22, #d35400, #e67e22);
}

.btn-gradient-shift.black {
    background: linear-gradient(90deg, #34495e, #2c3e50, #34495e);
}

.btn-gradient-shift.silver {
    background: linear-gradient(90deg, #bdc3c7, #95a5a6, #bdc3c7);
    color: #333;
}

.btn-gradient-shift.gold {
    background: linear-gradient(90deg, #f39c12, #d68910, #f39c12);
}

@keyframes gradient-shift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* === 4. ネオンパルス === */
.btn-neon {
    border-radius: 50px;
    border: 2px solid #fff;
}

.btn-neon.red {
    background: #c0392b;
    animation: neon-pulse-red 3s infinite;
}

.btn-neon.blue {
    background: #2980b9;
    animation: neon-pulse-blue 3s infinite;
}

.btn-neon.green {
    background: #27ae60;
    animation: neon-pulse-green 3s infinite;
}

.btn-neon.orange {
    background: #d35400;
    animation: neon-pulse-orange 3s infinite;
}

.btn-neon.black {
    background: #2c3e50;
    animation: neon-pulse-black 3s infinite;
}

.btn-neon.silver {
    background: #95a5a6;
    color: #333;
    animation: neon-pulse-silver 3s infinite;
}

.btn-neon.gold {
    background: #d68910;
    animation: neon-pulse-gold 3s infinite;
}

@keyframes neon-pulse-red {

    0%,
    100% {
        box-shadow: 0 0 5px #c0392b, 0 0 10px #c0392b;
    }

    50% {
        box-shadow: 0 0 15px #c0392b, 0 0 30px #c0392b, 0 0 40px #c0392b;
    }
}

@keyframes neon-pulse-blue {

    0%,
    100% {
        box-shadow: 0 0 5px #2980b9, 0 0 10px #2980b9;
    }

    50% {
        box-shadow: 0 0 15px #2980b9, 0 0 30px #2980b9, 0 0 40px #2980b9;
    }
}

@keyframes neon-pulse-green {

    0%,
    100% {
        box-shadow: 0 0 5px #27ae60, 0 0 10px #27ae60;
    }

    50% {
        box-shadow: 0 0 15px #27ae60, 0 0 30px #27ae60, 0 0 40px #27ae60;
    }
}

@keyframes neon-pulse-orange {

    0%,
    100% {
        box-shadow: 0 0 5px #d35400, 0 0 10px #d35400;
    }

    50% {
        box-shadow: 0 0 15px #d35400, 0 0 30px #d35400, 0 0 40px #d35400;
    }
}

@keyframes neon-pulse-black {

    0%,
    100% {
        box-shadow: 0 0 5px #2c3e50, 0 0 10px #2c3e50;
    }

    50% {
        box-shadow: 0 0 15px #2c3e50, 0 0 30px #2c3e50, 0 0 40px #2c3e50;
    }
}

@keyframes neon-pulse-silver {

    0%,
    100% {
        box-shadow: 0 0 5px #95a5a6, 0 0 10px #95a5a6;
    }

    50% {
        box-shadow: 0 0 15px #95a5a6, 0 0 30px #95a5a6, 0 0 40px #95a5a6;
    }
}

@keyframes neon-pulse-gold {

    0%,
    100% {
        box-shadow: 0 0 5px #d68910, 0 0 10px #d68910;
    }

    50% {
        box-shadow: 0 0 15px #d68910, 0 0 30px #d68910, 0 0 40px #d68910;
    }
}

/* === 5. 波紋拡散 === */
.btn-ripple {
    border-radius: 8px;
    position: relative;
    overflow: visible;
}

.btn-ripple.red {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.btn-ripple.blue {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.btn-ripple.green {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.btn-ripple.orange {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
}

.btn-ripple.black {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
}

.btn-ripple.silver {
    background: linear-gradient(135deg, #bdc3c7 0%, #95a5a6 100%);
    color: #333;
}

.btn-ripple.gold {
    background: linear-gradient(135deg, #f39c12 0%, #d68910 100%);
}

.btn-ripple::before,
.btn-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border: 3px solid;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
}

.btn-ripple.red::before,
.btn-ripple.red::after {
    border-color: rgba(231, 76, 60, 0.8);
}

.btn-ripple.blue::before,
.btn-ripple.blue::after {
    border-color: rgba(52, 152, 219, 0.8);
}

.btn-ripple.green::before,
.btn-ripple.green::after {
    border-color: rgba(46, 204, 113, 0.8);
}

.btn-ripple.orange::before,
.btn-ripple.orange::after {
    border-color: rgba(230, 126, 34, 0.8);
}

.btn-ripple.black::before,
.btn-ripple.black::after {
    border-color: rgba(52, 73, 94, 0.8);
}

.btn-ripple.silver::before,
.btn-ripple.silver::after {
    border-color: rgba(189, 195, 199, 0.9);
}

.btn-ripple.gold::before,
.btn-ripple.gold::after {
    border-color: rgba(243, 156, 18, 0.8);
}

.btn-ripple::before {
    animation: ripple-expand 3s infinite;
}

.btn-ripple::after {
    animation: ripple-expand 3s infinite 1.5s;
}

@keyframes ripple-expand {
    0% {
        width: 100%;
        height: 100%;
        opacity: 1;
    }

    50% {
        width: 200%;
        height: 200%;
        opacity: 0.5;
    }

    100% {
        width: 300%;
        height: 300%;
        opacity: 0;
    }
}

/* === 6. 影の深化 === */
.btn-shadow-deep {
    border-radius: 50px;
}

.btn-shadow-deep.red {
    background: linear-gradient(145deg, #e74c3c, #c0392b);
    animation: shadow-deep-red 3s infinite;
}

.btn-shadow-deep.blue {
    background: linear-gradient(145deg, #3498db, #2980b9);
    animation: shadow-deep-blue 3s infinite;
}

.btn-shadow-deep.green {
    background: linear-gradient(145deg, #2ecc71, #27ae60);
    animation: shadow-deep-green 3s infinite;
}

.btn-shadow-deep.orange {
    background: linear-gradient(145deg, #e67e22, #d35400);
    animation: shadow-deep-orange 3s infinite;
}

.btn-shadow-deep.black {
    background: linear-gradient(145deg, #34495e, #2c3e50);
    animation: shadow-deep-black 3s infinite;
}

.btn-shadow-deep.silver {
    background: linear-gradient(145deg, #bdc3c7, #95a5a6);
    color: #333;
    animation: shadow-deep-silver 3s infinite;
}

.btn-shadow-deep.gold {
    background: linear-gradient(145deg, #f39c12, #d68910);
    animation: shadow-deep-gold 3s infinite;
}

@keyframes shadow-deep-red {

    0%,
    100% {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        transform: translateY(0);
    }

    50% {
        box-shadow: 0 15px 35px rgba(231, 76, 60, 0.5);
        transform: translateY(-3px);
    }
}

@keyframes shadow-deep-blue {

    0%,
    100% {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        transform: translateY(0);
    }

    50% {
        box-shadow: 0 15px 35px rgba(52, 152, 219, 0.5);
        transform: translateY(-3px);
    }
}

@keyframes shadow-deep-green {

    0%,
    100% {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        transform: translateY(0);
    }

    50% {
        box-shadow: 0 15px 35px rgba(46, 204, 113, 0.5);
        transform: translateY(-3px);
    }
}

@keyframes shadow-deep-orange {

    0%,
    100% {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        transform: translateY(0);
    }

    50% {
        box-shadow: 0 15px 35px rgba(230, 126, 34, 0.5);
        transform: translateY(-3px);
    }
}

@keyframes shadow-deep-black {

    0%,
    100% {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        transform: translateY(0);
    }

    50% {
        box-shadow: 0 15px 35px rgba(52, 73, 94, 0.5);
        transform: translateY(-3px);
    }
}

@keyframes shadow-deep-silver {

    0%,
    100% {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        transform: translateY(0);
    }

    50% {
        box-shadow: 0 15px 35px rgba(189, 195, 199, 0.5);
        transform: translateY(-3px);
    }
}

@keyframes shadow-deep-gold {

    0%,
    100% {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        transform: translateY(0);
    }

    50% {
        box-shadow: 0 15px 35px rgba(243, 156, 18, 0.5);
        transform: translateY(-3px);
    }
}

/* === 7. カラーフラッシュ === */
.btn-flash {
    border-radius: 6px;
}

.btn-flash.red {
    animation: color-flash-red 3s infinite;
}

.btn-flash.blue {
    animation: color-flash-blue 3s infinite;
}

.btn-flash.green {
    animation: color-flash-green 3s infinite;
}

.btn-flash.orange {
    animation: color-flash-orange 3s infinite;
}

.btn-flash.black {
    animation: color-flash-black 3s infinite;
}

.btn-flash.silver {
    animation: color-flash-silver 3s infinite;
    color: #333;
}

.btn-flash.gold {
    animation: color-flash-gold 3s infinite;
}

@keyframes color-flash-red {

    0%,
    100% {
        background: #e74c3c;
    }

    33% {
        background: #c0392b;
    }

    66% {
        background: #a93226;
    }
}

@keyframes color-flash-blue {

    0%,
    100% {
        background: #3498db;
    }

    33% {
        background: #2980b9;
    }

    66% {
        background: #21618c;
    }
}

@keyframes color-flash-green {

    0%,
    100% {
        background: #2ecc71;
    }

    33% {
        background: #27ae60;
    }

    66% {
        background: #1e8449;
    }
}

@keyframes color-flash-orange {

    0%,
    100% {
        background: #e67e22;
    }

    33% {
        background: #d35400;
    }

    66% {
        background: #ba4a00;
    }
}

@keyframes color-flash-black {

    0%,
    100% {
        background: #34495e;
    }

    33% {
        background: #2c3e50;
    }

    66% {
        background: #1c2833;
    }
}

@keyframes color-flash-silver {

    0%,
    100% {
        background: #bdc3c7;
    }

    33% {
        background: #95a5a6;
    }

    66% {
        background: #7f8c8d;
    }
}

@keyframes color-flash-gold {

    0%,
    100% {
        background: #f39c12;
    }

    33% {
        background: #d68910;
    }

    66% {
        background: #b9770e;
    }
}

/* === 8. バウンス === */
.btn-bounce {
    border-radius: 50px;
}

.btn-bounce.red {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    animation: bounce-up 3s infinite;
}

.btn-bounce.blue {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    animation: bounce-up 3s infinite;
}

.btn-bounce.green {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    animation: bounce-up 3s infinite;
}

.btn-bounce.orange {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
    animation: bounce-up 3s infinite;
}

.btn-bounce.black {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
    animation: bounce-up 3s infinite;
}

.btn-bounce.silver {
    background: linear-gradient(135deg, #bdc3c7 0%, #95a5a6 100%);
    color: #333;
    animation: bounce-up 3s infinite;
}

.btn-bounce.gold {
    background: linear-gradient(135deg, #f39c12 0%, #d68910 100%);
    animation: bounce-up 3s infinite;
}

@keyframes bounce-up {

    0%,
    100% {
        transform: translateY(0);
    }

    10% {
        transform: translateY(-8px);
    }

    20% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-5px);
    }

    40% {
        transform: translateY(0);
    }
}

/* === 9. ボーダーアニメ === */
.btn-border-anim {
    border-radius: 8px;
    position: relative;
    border: 3px solid #fff;
}

.btn-border-anim.red {
    background: #e74c3c;
}

.btn-border-anim.blue {
    background: #3498db;
}

.btn-border-anim.green {
    background: #2ecc71;
}

.btn-border-anim.orange {
    background: #e67e22;
}

.btn-border-anim.black {
    background: #34495e;
}

.btn-border-anim.silver {
    background: #bdc3c7;
    color: #333;
}

.btn-border-anim.gold {
    background: #f39c12;
}

.btn-border-anim::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    animation: border-flow 3s infinite;
}

@keyframes border-flow {
    0% {
        left: -100%;
    }

    100% {
        left: 200%;
    }
}

/* === 10. 回転グラデ === */
.btn-rotate-grad {
    border-radius: 50px;
    background-size: 400% 400%;
}

.btn-rotate-grad.red {
    background: linear-gradient(45deg, #e74c3c, #c0392b, #a93226, #e74c3c);
    animation: rotate-gradient 3s infinite;
}

.btn-rotate-grad.blue {
    background: linear-gradient(45deg, #3498db, #2980b9, #21618c, #3498db);
    animation: rotate-gradient 3s infinite;
}

.btn-rotate-grad.green {
    background: linear-gradient(45deg, #2ecc71, #27ae60, #1e8449, #2ecc71);
    animation: rotate-gradient 3s infinite;
}

.btn-rotate-grad.orange {
    background: linear-gradient(45deg, #e67e22, #d35400, #ba4a00, #e67e22);
    animation: rotate-gradient 3s infinite;
}

.btn-rotate-grad.black {
    background: linear-gradient(45deg, #34495e, #2c3e50, #1c2833, #34495e);
    animation: rotate-gradient 3s infinite;
}

.btn-rotate-grad.silver {
    background: linear-gradient(45deg, #bdc3c7, #95a5a6, #7f8c8d, #bdc3c7);
    color: #333;
    animation: rotate-gradient 3s infinite;
}

.btn-rotate-grad.gold {
    background: linear-gradient(45deg, #f39c12, #d68910, #b9770e, #f39c12);
    animation: rotate-gradient 3s infinite;
}

@keyframes rotate-gradient {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* === 11. スケールパルス === */
.btn-scale-pulse {
    border-radius: 6px;
    animation: scale-pulse 3s infinite;
}

.btn-scale-pulse.red {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.btn-scale-pulse.blue {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.btn-scale-pulse.green {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.btn-scale-pulse.orange {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
}

.btn-scale-pulse.black {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
}

.btn-scale-pulse.silver {
    background: linear-gradient(135deg, #bdc3c7 0%, #95a5a6 100%);
    color: #333;
}

.btn-scale-pulse.gold {
    background: linear-gradient(135deg, #f39c12 0%, #d68910 100%);
}

@keyframes scale-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

/* === 12. 光の移動 === */
.btn-light-move {
    border-radius: 50px;
    position: relative;
    overflow: hidden;
}

.btn-light-move.red {
    background: #e74c3c;
}

.btn-light-move.blue {
    background: #3498db;
}

.btn-light-move.green {
    background: #2ecc71;
}

.btn-light-move.orange {
    background: #e67e22;
}

.btn-light-move.black {
    background: #34495e;
}

.btn-light-move.silver {
    background: #bdc3c7;
    color: #333;
}

.btn-light-move.gold {
    background: #f39c12;
}

.btn-light-move::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: light-sweep 3s infinite;
}

@keyframes light-sweep {
    0% {
        left: -30%;
    }

    100% {
        left: 130%;
    }
}

/* === 13. 透明度パルス === */
.btn-opacity-pulse {
    border-radius: 8px;
    animation: opacity-pulse 3s infinite;
}

.btn-opacity-pulse.red {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.btn-opacity-pulse.blue {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.btn-opacity-pulse.green {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.btn-opacity-pulse.orange {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
}

.btn-opacity-pulse.black {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
}

.btn-opacity-pulse.silver {
    background: linear-gradient(135deg, #bdc3c7 0%, #95a5a6 100%);
    color: #333;
}

.btn-opacity-pulse.gold {
    background: linear-gradient(135deg, #f39c12 0%, #d68910 100%);
}

@keyframes opacity-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* === 14. 二重影 === */
.btn-double-shadow {
    border-radius: 50px;
}

.btn-double-shadow.red {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    animation: double-shadow-red 3s infinite;
}

.btn-double-shadow.blue {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    animation: double-shadow-blue 3s infinite;
}

.btn-double-shadow.green {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    animation: double-shadow-green 3s infinite;
}

.btn-double-shadow.orange {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
    animation: double-shadow-orange 3s infinite;
}

.btn-double-shadow.black {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
    animation: double-shadow-black 3s infinite;
}

.btn-double-shadow.silver {
    background: linear-gradient(135deg, #bdc3c7 0%, #95a5a6 100%);
    color: #333;
    animation: double-shadow-silver 3s infinite;
}

.btn-double-shadow.gold {
    background: linear-gradient(135deg, #f39c12 0%, #d68910 100%);
    animation: double-shadow-gold 3s infinite;
}

@keyframes double-shadow-red {

    0%,
    100% {
        box-shadow: 0 3px 10px rgba(231, 76, 60, 0.3), 0 6px 20px rgba(192, 57, 43, 0.2);
    }

    50% {
        box-shadow: 0 6px 20px rgba(231, 76, 60, 0.6), 0 12px 40px rgba(192, 57, 43, 0.4);
    }
}

@keyframes double-shadow-blue {

    0%,
    100% {
        box-shadow: 0 3px 10px rgba(52, 152, 219, 0.3), 0 6px 20px rgba(41, 128, 185, 0.2);
    }

    50% {
        box-shadow: 0 6px 20px rgba(52, 152, 219, 0.6), 0 12px 40px rgba(41, 128, 185, 0.4);
    }
}

@keyframes double-shadow-green {

    0%,
    100% {
        box-shadow: 0 3px 10px rgba(46, 204, 113, 0.3), 0 6px 20px rgba(39, 174, 96, 0.2);
    }

    50% {
        box-shadow: 0 6px 20px rgba(46, 204, 113, 0.6), 0 12px 40px rgba(39, 174, 96, 0.4);
    }
}

@keyframes double-shadow-orange {

    0%,
    100% {
        box-shadow: 0 3px 10px rgba(230, 126, 34, 0.3), 0 6px 20px rgba(211, 84, 0, 0.2);
    }

    50% {
        box-shadow: 0 6px 20px rgba(230, 126, 34, 0.6), 0 12px 40px rgba(211, 84, 0, 0.4);
    }
}

@keyframes double-shadow-black {

    0%,
    100% {
        box-shadow: 0 3px 10px rgba(52, 73, 94, 0.3), 0 6px 20px rgba(44, 62, 80, 0.2);
    }

    50% {
        box-shadow: 0 6px 20px rgba(52, 73, 94, 0.6), 0 12px 40px rgba(44, 62, 80, 0.4);
    }
}

@keyframes double-shadow-silver {

    0%,
    100% {
        box-shadow: 0 3px 10px rgba(189, 195, 199, 0.3), 0 6px 20px rgba(149, 165, 166, 0.2);
    }

    50% {
        box-shadow: 0 6px 20px rgba(189, 195, 199, 0.6), 0 12px 40px rgba(149, 165, 166, 0.4);
    }
}

@keyframes double-shadow-gold {

    0%,
    100% {
        box-shadow: 0 3px 10px rgba(243, 156, 18, 0.3), 0 6px 20px rgba(214, 137, 16, 0.2);
    }

    50% {
        box-shadow: 0 6px 20px rgba(243, 156, 18, 0.6), 0 12px 40px rgba(214, 137, 16, 0.4);
    }
}

/* === 15. グローインテンシティ === */
.btn-glow-intensity {
    border-radius: 6px;
}

.btn-glow-intensity.red {
    background: #e74c3c;
    animation: glow-intensity-red 3s infinite;
}

.btn-glow-intensity.blue {
    background: #3498db;
    animation: glow-intensity-blue 3s infinite;
}

.btn-glow-intensity.green {
    background: #2ecc71;
    animation: glow-intensity-green 3s infinite;
}

.btn-glow-intensity.orange {
    background: #e67e22;
    animation: glow-intensity-orange 3s infinite;
}

.btn-glow-intensity.black {
    background: #34495e;
    animation: glow-intensity-black 3s infinite;
}

.btn-glow-intensity.silver {
    background: #bdc3c7;
    color: #333;
    animation: glow-intensity-silver 3s infinite;
}

.btn-glow-intensity.gold {
    background: #f39c12;
    animation: glow-intensity-gold 3s infinite;
}

@keyframes glow-intensity-red {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(231, 76, 60, 0.4);
        filter: brightness(1);
    }

    50% {
        box-shadow: 0 0 30px rgba(231, 76, 60, 0.8);
        filter: brightness(1.3);
    }
}

@keyframes glow-intensity-blue {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(52, 152, 219, 0.4);
        filter: brightness(1);
    }

    50% {
        box-shadow: 0 0 30px rgba(52, 152, 219, 0.8);
        filter: brightness(1.3);
    }
}

@keyframes glow-intensity-green {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(46, 204, 113, 0.4);
        filter: brightness(1);
    }

    50% {
        box-shadow: 0 0 30px rgba(46, 204, 113, 0.8);
        filter: brightness(1.3);
    }
}

@keyframes glow-intensity-orange {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(230, 126, 34, 0.4);
        filter: brightness(1);
    }

    50% {
        box-shadow: 0 0 30px rgba(230, 126, 34, 0.8);
        filter: brightness(1.3);
    }
}

@keyframes glow-intensity-black {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(52, 73, 94, 0.4);
        filter: brightness(1);
    }

    50% {
        box-shadow: 0 0 30px rgba(52, 73, 94, 0.8);
        filter: brightness(1.3);
    }
}

@keyframes glow-intensity-silver {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(189, 195, 199, 0.5);
        filter: brightness(1);
    }

    50% {
        box-shadow: 0 0 30px rgba(189, 195, 199, 0.9);
        filter: brightness(1.3);
    }
}

@keyframes glow-intensity-gold {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(243, 156, 18, 0.4);
        filter: brightness(1);
    }

    50% {
        box-shadow: 0 0 30px rgba(243, 156, 18, 0.8);
        filter: brightness(1.3);
    }
}

/* === 16. 回転ボーダー === */
.btn-rotate-border {
    border-radius: 50px;
    border: 3px solid #fff;
}

.btn-rotate-border.red {
    background: #e74c3c;
    animation: rotate-border-color-red 3s infinite;
}

.btn-rotate-border.blue {
    background: #3498db;
    animation: rotate-border-color-blue 3s infinite;
}

.btn-rotate-border.green {
    background: #2ecc71;
    animation: rotate-border-color-green 3s infinite;
}

.btn-rotate-border.orange {
    background: #e67e22;
    animation: rotate-border-color-orange 3s infinite;
}

.btn-rotate-border.black {
    background: #34495e;
    animation: rotate-border-color-black 3s infinite;
}

.btn-rotate-border.silver {
    background: #bdc3c7;
    color: #333;
    animation: rotate-border-color-silver 3s infinite;
}

.btn-rotate-border.gold {
    background: #f39c12;
    animation: rotate-border-color-gold 3s infinite;
}

@keyframes rotate-border-color-red {

    0%,
    100% {
        border-color: #fff;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    }

    50% {
        border-color: #c0392b;
        box-shadow: 0 0 15px rgba(192, 57, 43, 0.8);
    }
}

@keyframes rotate-border-color-blue {

    0%,
    100% {
        border-color: #fff;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    }

    50% {
        border-color: #2980b9;
        box-shadow: 0 0 15px rgba(41, 128, 185, 0.8);
    }
}

@keyframes rotate-border-color-green {

    0%,
    100% {
        border-color: #fff;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    }

    50% {
        border-color: #27ae60;
        box-shadow: 0 0 15px rgba(39, 174, 96, 0.8);
    }
}

@keyframes rotate-border-color-orange {

    0%,
    100% {
        border-color: #fff;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    }

    50% {
        border-color: #d35400;
        box-shadow: 0 0 15px rgba(211, 84, 0, 0.8);
    }
}

@keyframes rotate-border-color-black {

    0%,
    100% {
        border-color: #fff;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    }

    50% {
        border-color: #2c3e50;
        box-shadow: 0 0 15px rgba(44, 62, 80, 0.8);
    }
}

@keyframes rotate-border-color-silver {

    0%,
    100% {
        border-color: #fff;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    }

    50% {
        border-color: #95a5a6;
        box-shadow: 0 0 15px rgba(149, 165, 166, 0.8);
    }
}

@keyframes rotate-border-color-gold {

    0%,
    100% {
        border-color: #fff;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    }

    50% {
        border-color: #d68910;
        box-shadow: 0 0 15px rgba(214, 137, 16, 0.8);
    }
}

/* === 17. 多重グラデ === */
.btn-multi-grad {
    border-radius: 8px;
    background-size: 200% 200%;
    animation: multi-grad-shift 3s infinite;
}

.btn-multi-grad.red {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 50%, #a93226 100%);
}

.btn-multi-grad.blue {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 50%, #21618c 100%);
}

.btn-multi-grad.green {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 50%, #1e8449 100%);
}

.btn-multi-grad.orange {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 50%, #ba4a00 100%);
}

.btn-multi-grad.black {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 50%, #1c2833 100%);
}

.btn-multi-grad.silver {
    background: linear-gradient(135deg, #bdc3c7 0%, #95a5a6 50%, #7f8c8d 100%);
    color: #333;
}

.btn-multi-grad.gold {
    background: linear-gradient(135deg, #f39c12 0%, #d68910 50%, #b9770e 100%);
}

@keyframes multi-grad-shift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* === 18. シマー効果 === */
.btn-shimmer {
    border-radius: 50px;
    position: relative;
    overflow: hidden;
}

.btn-shimmer.red {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.btn-shimmer.blue {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.btn-shimmer.green {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.btn-shimmer.orange {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
}

.btn-shimmer.black {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
}

.btn-shimmer.silver {
    background: linear-gradient(135deg, #bdc3c7 0%, #95a5a6 100%);
    color: #333;
}

.btn-shimmer.gold {
    background: linear-gradient(135deg, #f39c12 0%, #d68910 100%);
}

.btn-shimmer::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
    animation: shimmer-rotate 3s infinite;
}

@keyframes shimmer-rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* === 19. エッジグロー === */
.btn-edge-glow {
    border-radius: 6px;
    border: 2px solid;
}

.btn-edge-glow.red {
    background: #c0392b;
    border-color: #e74c3c;
    animation: edge-glow-red 3s infinite;
}

.btn-edge-glow.blue {
    background: #2980b9;
    border-color: #3498db;
    animation: edge-glow-blue 3s infinite;
}

.btn-edge-glow.green {
    background: #27ae60;
    border-color: #2ecc71;
    animation: edge-glow-green 3s infinite;
}

.btn-edge-glow.orange {
    background: #d35400;
    border-color: #e67e22;
    animation: edge-glow-orange 3s infinite;
}

.btn-edge-glow.black {
    background: #2c3e50;
    border-color: #34495e;
    animation: edge-glow-black 3s infinite;
}

.btn-edge-glow.silver {
    background: #95a5a6;
    border-color: #bdc3c7;
    color: #333;
    animation: edge-glow-silver 3s infinite;
}

.btn-edge-glow.gold {
    background: #d68910;
    border-color: #f39c12;
    animation: edge-glow-gold 3s infinite;
}

@keyframes edge-glow-red {

    0%,
    100% {
        box-shadow: inset 0 0 10px rgba(231, 76, 60, 0.5), 0 0 10px rgba(231, 76, 60, 0.3);
    }

    50% {
        box-shadow: inset 0 0 25px rgba(231, 76, 60, 0.8), 0 0 20px rgba(231, 76, 60, 0.6);
    }
}

@keyframes edge-glow-blue {

    0%,
    100% {
        box-shadow: inset 0 0 10px rgba(52, 152, 219, 0.5), 0 0 10px rgba(52, 152, 219, 0.3);
    }

    50% {
        box-shadow: inset 0 0 25px rgba(52, 152, 219, 0.8), 0 0 20px rgba(52, 152, 219, 0.6);
    }
}

@keyframes edge-glow-green {

    0%,
    100% {
        box-shadow: inset 0 0 10px rgba(46, 204, 113, 0.5), 0 0 10px rgba(46, 204, 113, 0.3);
    }

    50% {
        box-shadow: inset 0 0 25px rgba(46, 204, 113, 0.8), 0 0 20px rgba(46, 204, 113, 0.6);
    }
}

@keyframes edge-glow-orange {

    0%,
    100% {
        box-shadow: inset 0 0 10px rgba(230, 126, 34, 0.5), 0 0 10px rgba(230, 126, 34, 0.3);
    }

    50% {
        box-shadow: inset 0 0 25px rgba(230, 126, 34, 0.8), 0 0 20px rgba(230, 126, 34, 0.6);
    }
}

@keyframes edge-glow-black {

    0%,
    100% {
        box-shadow: inset 0 0 10px rgba(52, 73, 94, 0.5), 0 0 10px rgba(52, 73, 94, 0.3);
    }

    50% {
        box-shadow: inset 0 0 25px rgba(52, 73, 94, 0.8), 0 0 20px rgba(52, 73, 94, 0.6);
    }
}

@keyframes edge-glow-silver {

    0%,
    100% {
        box-shadow: inset 0 0 10px rgba(189, 195, 199, 0.6), 0 0 10px rgba(189, 195, 199, 0.4);
    }

    50% {
        box-shadow: inset 0 0 25px rgba(189, 195, 199, 0.9), 0 0 20px rgba(189, 195, 199, 0.7);
    }
}

@keyframes edge-glow-gold {

    0%,
    100% {
        box-shadow: inset 0 0 10px rgba(243, 156, 18, 0.5), 0 0 10px rgba(243, 156, 18, 0.3);
    }

    50% {
        box-shadow: inset 0 0 25px rgba(243, 156, 18, 0.8), 0 0 20px rgba(243, 156, 18, 0.6);
    }
}

/* === 20. レインボーシフト === */
.btn-rainbow {
    border-radius: 50px;
    background-size: 400% 100%;
    animation: rainbow-shift 3s infinite;
}

.btn-rainbow.red {
    background: linear-gradient(90deg, #e74c3c, #c0392b, #a93226, #c0392b, #e74c3c);
}

.btn-rainbow.blue {
    background: linear-gradient(90deg, #3498db, #2980b9, #21618c, #2980b9, #3498db);
}

.btn-rainbow.green {
    background: linear-gradient(90deg, #2ecc71, #27ae60, #1e8449, #27ae60, #2ecc71);
}

.btn-rainbow.orange {
    background: linear-gradient(90deg, #e67e22, #d35400, #ba4a00, #d35400, #e67e22);
}

.btn-rainbow.black {
    background: linear-gradient(90deg, #34495e, #2c3e50, #1c2833, #2c3e50, #34495e);
}

.btn-rainbow.silver {
    background: linear-gradient(90deg, #bdc3c7, #95a5a6, #7f8c8d, #95a5a6, #bdc3c7);
    color: #333;
}

.btn-rainbow.gold {
    background: linear-gradient(90deg, #f39c12, #d68910, #b9770e, #d68910, #f39c12);
}

@keyframes rainbow-shift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .color-grid {
        grid-template-columns: 1fr;
    }

    h1 {
        font-size: 1.8rem;
    }
}