/* ベーススタイル */
body {
    color: #4A3B32;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    background-color: #FAF6F0; 
}

/* スクロールアニメーション用のクラス */
.reveal-up, .reveal-left, .reveal-right, .reveal-zoom {
    opacity: 0;
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-up { transform: translateY(40px); }
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-zoom { transform: scale(0.95); }

.reveal-up.is-visible, .reveal-left.is-visible, .reveal-right.is-visible, .reveal-zoom.is-visible {
    opacity: 1;
    transform: translate(0) scale(1);
}
/* ディレイ（遅延）クラス */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

/* メインビジュアルのスライドショーアニメーション（全画面対応） */
.hero-slide {
    animation: heroSlideshow 15s linear infinite;
    will-change: opacity, transform;
}
@keyframes heroSlideshow {
    0% { opacity: 0; transform: scale(1.1); }
    5% { opacity: 1; transform: scale(1.1); }
    33% { opacity: 1; transform: scale(1); }
    38% { opacity: 0; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}

/* ハンバーガーメニューのアニメーション */
.hamburger-line { transition: all 0.3s ease-in-out; }
.menu-open .hamburger-line-1 { transform: translateY(8px) rotate(45deg); }
.menu-open .hamburger-line-2 { opacity: 0; }
.menu-open .hamburger-line-3 { transform: translateY(-8px) rotate(-45deg); }

/* よくある質問のアコーディオン */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.faq-icon { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
details[open] .faq-icon { transform: rotate(180deg); color: #D9733D; }

/* カスタムグラデーションテキスト */
.text-gradient {
    background: linear-gradient(135deg, #D9733D 0%, #BF5C28 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ヒーローオーバーレイ：文字の視認性確保用 */
.hero-overlay {
    background: linear-gradient(90deg, rgba(250, 246, 240, 0.9) 0%, rgba(250, 246, 240, 0.4) 50%, transparent 100%);
}
@media (max-width: 1023px) {
    .hero-overlay {
        background: linear-gradient(0deg, rgba(250, 246, 240, 0.9) 20%, rgba(250, 246, 240, 0.2) 100%);
    }
}
/* タブ切り替え時のアニメーション */
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
    animation: fadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}