/* MAX EXPRESS - 統合CSSファイル */
/* 各HTMLファイルから共通のCSSスタイルを集約 */

/* ===============================
   基本設定・全体共通
   =============================== */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
}

/* ===============================
   共通アニメーション
   =============================== */
@keyframes bounceSubtle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes floating {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(10deg); }
}

@keyframes bounceArrow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===============================
   アニメーションクラス
   =============================== */
.animate-bounce-subtle { 
    animation: bounceSubtle 3s infinite; 
}

.animate-bounce-arrow { 
    animation: bounceArrow 2s infinite; 
}

.animate-pulse-dot { 
    animation: pulseDot 2s infinite; 
}

.animate-pulse-dot-delayed { 
    animation: pulseDot 2s infinite 0.5s; 
}

.animate-pulse-button { 
    animation: bounceSubtle 4s infinite; 
}

.floating-element { 
    animation: floating 6s infinite ease-in-out; 
}

.floating-element-delayed { 
    animation: floating 6s infinite ease-in-out 2s; 
}

/* ===============================
   グラデーションテキスト
   =============================== */
.animate-gradient-text {
    color: #0284c7; /* フォールバック */
    background: linear-gradient(45deg, #0284c7, #3b82f6, #6366f1, #0284c7);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease infinite;
}

/* グラデーション非対応ブラウザのフォールバック */
@supports not (background-clip: text) {
    .animate-gradient-text {
        color: #0284c7;
        -webkit-text-fill-color: initial;
    }
}

/* ===============================
   ホバーエフェクト
   =============================== */
.hover\:shadow-3xl:hover {
    box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.3);
}

/* ===============================
   Thank You ページ専用アニメーション
   =============================== */
@keyframes checkmark {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes countdownPulse {
    0%, 100% {
        transform: scale(1);
        color: #1f2937;
    }
    50% {
        transform: scale(1.05);
        color: #00AFE8;
    }
}

@keyframes progressBar {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

/* Thank You ページ用アニメーションクラス */
.animate-checkmark {
    animation: checkmark 0.8s ease-in-out;
}

.animate-fadeInUp {
    animation: fadeInUp 0.6s ease-out;
}

.animate-fadeInUp-delayed {
    animation: fadeInUp 0.6s ease-out 0.3s both;
}

.animate-fadeInUp-delayed2 {
    animation: fadeInUp 0.6s ease-out 0.6s both;
}

/* ===============================
   レスポンシブ対応
   =============================== */
@media (max-width: 768px) {
    .floating-element,
    .floating-element-delayed {
        animation: none; /* モバイルではアニメーション軽量化 */
    }
}

/* ===============================
   モバイル表示でヒーローが縦長画面を占有しすぎないようにする
   目的：スマホでページを開いたときに「こんな方におすすめ」セクションが
   スクロールなしで表示されるようにヒーローの最大高さを制限する。
   =============================== */
@media (max-width: 640px) {
    /* hero-image クラスを追加して制御 */
    .hero-image {
        width: 100%;
        height: auto;
        max-height: calc(100vh - 180px); /* ヘッダー分＋推奨セクションの見出し領域を考慮 */
        object-fit: cover;
        display: block;
    }

    /* もしヒーローが固定余白(pt-20)で隠れる場合に備え、セクションの上マージンを小さくする */
    section.py-16:first-of-type {
        padding-top: 1rem; /* ヒーロー直後の余白調整（スマホのみ） */
    }

    /* 「こんな方におすすめ」セクションのタイトル行を少し上に寄せる */
    section.py-16.bg-gradient-to-br.from-gray-50.to-blue-50 > .max-w-7xl {
        padding-top: 0.5rem;
    }
}