@charset "utf-8";

/* ========================================================================== 
    style.css - Main Content Styles
   ========================================================================== */

/* =============================
    RESET & BASE
============================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Noto Sans JP", sans-serif;
    color: #2b2b2b;
    background: #fffaf5;
    line-height: 1.8;
}

/* =============================
    SECTION
============================= */
.section {
    padding: 80px 20px;
    max-width: 1000px;
    margin: auto;
}

.section h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 24px;
    color: #8b5e3c;
}

.container {
    width: 100%;
}


/* =============================
    FOOTER
============================= */
.footer {
    text-align: center;
    padding: 40px 20px;
    background: #1a3d32;
    color: #fff;
}

/* =============================
    RESPONSIVE
============================= */
@media (max-width: 768px) {
    .menu-grid {
        grid-template-columns: 1fr;
    }
    
    .section {
        padding: 60px 20px;
    }
}

/* 演出の初期状態（ブラウザ描画・GPU処理の最適化版） */
.reveal, .reveal-up, .reveal-item {
    opacity: 0;
    transform: translateY(30px); /* 30px下から */
    
    /* ハードウェアアクセラレーション（GPU加速）を強制し、スクロール時の再計算衝突を回避 */
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, opacity;
    
    /* アニメーション時間を1.0sから0.6sに引き締め、スマホでの瞬発的な描画負荷を低減 */
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* JSでクラスが付与されたら表示 */
.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* スマホ表示時におけるレイアウト再計算（リフロー）および描画ピクセル数負荷の軽減 */
@media (max-width: 768px) {
    .reveal, .reveal-up, .reveal-item {
        /* 移動量を半分に抑えることで、スクロールとアニメーションの競合によるカクつきを防止 */
        transform: translateY(15px);
    }
}