@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

:root {
    --cafe-dark: #1a1a1a;
    --cafe-gold: #c5a059;
    --cafe-beige: #f9f6f0;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: var(--cafe-beige);
    color: var(--cafe-dark);
    scroll-behavior: smooth;
}

.serif {
    font-family: 'Playfair Display', serif;
}

/* 元のURLに戻したヒーローセクションの設定 */
.hero-gradient {
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), 
                url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&q=80&w=2000') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 100% !important;
    height: 100vh !important;
    display: flex !important;
}

.nav-blur {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.8);
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.menu-card:hover img {
    transform: scale(1.05);
}

/* --- スマートフォン・タブレット向け調整 --- */
@media (max-width: 768px) {
    /* ヒーローセクションの文字サイズを調整 */
    .serif.text-5xl {
        font-size: 3rem !important; /* 5xl(3rem) 程度に抑えてはみ出し防止 */
        line-height: 1.2;
    }

    .hero-gradient p {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    /* セクションの上下余白を調整（スマホでは少し詰めると見やすい） */
    section {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    /* Aboutセクションのグリッドを縦並びに */
    #about {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    #about .grid {
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }

    /* メニューセクション */
    #menu .grid {
        gap: 4rem; /* 各カテゴリー（Coffee, Pastry...）の間隔を広げる */
    }

    .menu-item-row {
        margin-bottom: 1rem;
    }

    /* ギャラリー（画像一覧）を2列にする */
    #gallery .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem;
        padding: 0.5rem;
    }

    #gallery img {
        height: 180px; /* スマホで見栄えの良い高さに固定 */
    }

    /* アクセス・フッター */
    #contact .grid {
        grid-template-columns: 1fr; /* 縦並び */
        gap: 4rem;
        text-align: center;
    }

    #contact .flex {
        justify-content: center; /* SNSアイコンを中央へ */
    }

    /* ナビゲーションの微調整 */
    nav h1 {
        font-size: 1.25rem !important;
    }
    
    /* 入力フォームのフォントサイズが勝手に拡大されないように調整 */
    input[type="email"] {
        font-size: 16px !important;
    }
}

/* 小さなスマホ(iPhone SEなど)向け */
@media (max-width: 480px) {
    .serif.text-5xl {
        font-size: 2.5rem !important;
    }
}