/* ========================================
   GLASSMORPHISM CARD EFFECTS
   すりガラス風のカードデザイン
   ======================================== */

/* Instructor Cards - 講師紹介カード */
.instructorCard {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
}

.instructorCard:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-4px) translateZ(0);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12),
        0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* Pricing Cards - 料金表カード */
.pricePlan {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
}

.pricePlan:hover {
    background: rgba(255, 255, 255, 0.85) !important;
    transform: translateY(-4px) translateZ(0);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12),
        0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* Reason Cards - 理由カード */
.reasonCard__box {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
}

.reasonCard:hover .reasonCard__box {
    background: rgba(255, 255, 255, 0.85) !important;
    transform: translateY(-4px) translateZ(0);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12),
        0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* FAQ Items - よくある質問 */
.faqItem {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
}

.faqItem:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08) !important;
}

/* Tap Cards Inner - タップカード */
.tapCard__inner {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07) !important;
    transform: translateZ(0);
}

/* Contact Form - お問い合わせフォーム */
.contactForm {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transform: translateZ(0);
}

/* Strength Blocks - 強み */
.strengthBlock__card {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07) !important;
    transform: translateZ(0);
}

/* Flow Cards - フローカード */
.flowCard {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
}

.flowCard:hover {
    background: rgba(255, 255, 255, 0.85) !important;
    transform: translateY(-3px) translateZ(0);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.1) !important;
}

/* Daily Cards - デイリーカード */
.dailyCard {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07) !important;
    transform: translateZ(0);
}

/* Diagnosis Cards - 診断カード */
.diagnosisCard {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07) !important;
    transform: translateZ(0);
}

/* Responsive Adjustments */
@media (max-width: 768px) {

    /* カード要素のホバー効果をモバイルでは無効化 */
    .instructorCard:hover,
    .pricePlan:hover,
    .reasonCard:hover .reasonCard__box,
    .flowCard:hover {
        transform: translateZ(0);
    }
}