/* Hollywood Brow Lift Theme - カスタムCSS */
/* Tailwindでカバーできないスタイルのみ記述 */

/* =================================================================
   アニメーション
   ================================================================= */

/* スライドインアップアニメーション */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-in-up {
    animation: slideInUp 1s ease-out forwards;
}

/* フェードインアニメーション */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

/* =================================================================
   カスタム回転・変形
   ================================================================= */

/* ヒーローセクション - キャッチフレーズの特定回転角度 */
.hero-catchphrase-rotate {
    transform: rotate(5.051deg);
}

/* =================================================================
   レスポンシブ調整
   ================================================================= */

/* タブレット以下 */
@media (max-width: 768px) {
    .hero-catchphrase-rotate {
        transform: rotate(3deg);
    }
}

/* =================================================================
   ヘッダー関連
   ================================================================= */

/* レスポンシブ対応: モバイルでヘッダー幅を調整 */
@media (max-width: 430px) {
    .header-mobile-width {
        width: 100vw;
    }
    
    .header-hamburger-position {
        right: 0;
        left: auto;
    }
    
    .header-white-bg {
        width: calc(100vw - 50px);
    }
}

/* =================================================================
   フィルター
   ================================================================= */

/* 白色フィルター */
.filter-white {
    filter: brightness(0) invert(1);
}

/* 黒色フィルター */
.filter-black {
    filter: brightness(0);
}

/* =================================================================
   今後追加予定のカスタムスタイル用スペース
   ================================================================= */

/* ここに追加のカスタムスタイルを記述 */