/*
Theme Name: bobolp
Author: Your Name
Description: A custom theme for the "Ureru LP-kun" website.
Version: 1.1
*/

/* =================================================================
   1. Theme Variables / テーマ変数
================================================================= */
:root {
    --color-primary: #3B82F6;       /* 青（メインカラー） */
    --color-primary-light: #60A5FA; /* 明るい青 */
    --color-secondary: #10B981;     /* 緑（サブカラー） */
    --color-accent: #FBBF24;        /* 黄色（アクセント） */
    --font-sans: 'Noto Sans JP', sans-serif, system-ui;
}

/* =================================================================
   2. Global Styles / 全体のスタイル
================================================================= */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.gradient-text {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}


/* =================================================================
   3. Logo Styles / ロゴ
================================================================= */
.modern-logo {
    font-family: var(--font-sans);
    font-weight: 900;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.modern-logo:hover {
    opacity: 0.8;
}

.logo-kun {
    color: var(--color-primary);
}

.logo-dot {
    color: var(--color-accent);
}


/* =================================================================
   4. Hero Section / ヒーローセクション
================================================================= */
.cta-pulse {
    animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7); /* from-secondary to-green-400 の緑系 */
    }
    70% {
        box-shadow: 0 0 0 20px rgba(22, 163, 74, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
    }
}

.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-card-enhanced {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.scroll-indicator {
    animation: bounce-animation 2s infinite;
}

@keyframes bounce-animation {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}


/* =================================================================
   5. FAQ Section / よくある質問
================================================================= */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

.faq-item.is-open .faq-icon {
    transform: rotate(45deg);
}


/* =================================================================
   6. Contact Form 7 Styles / お問い合わせフォーム
================================================================= */
/* Plan Selection Radio Buttons */
.contact-form-7-plan-options .wpcf7-list-item {
    margin: 0;
}
.contact-form-7-plan-options label {
    position: relative;
    display: block;
    padding: 1rem;
    border: 2px solid #e5e7eb; /* neutral-200 */
    border-radius: 0.75rem; /* rounded-xl */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-align: center;
    font-weight: 600;
    color: #4b5563; /* gray-600 */
}
.contact-form-7-plan-options label:hover {
    border-color: #93c5fd; /* blue-300 */
    background-color: #eff6ff; /* blue-50 */
}

.contact-form-7-plan-options input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.contact-form-7-plan-options label.is-selected {
    border-color: var(--color-primary);
    background-color: #dbeafe; /* blue-100 */
    color: #1d4ed8; /* primary-700 */
    font-weight: 700;
}

.contact-form-7-plan-options label.is-selected::after {
    content: '\ea14'; /* Remix Icon checkmark code */
    font-family: 'remixicon' !important;
    position: absolute;
    top: -12px;
    right: -12px;
    font-size: 1rem;
    color: white;
    background-color: var(--color-primary);
    border-radius: 9999px;
    width: 1.75rem; /* w-7 */
    height: 1.75rem; /* h-7 */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}