@charset "utf-8";

/* ========================================================================== 
    menu.css
   ========================================================================== */

/* --- 案2：和モダン・ミニマル白（2カラム風） --- */
.menu-banner {
    display: flex; /* 左右並び */
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    aspect-ratio: 16 / 7;
    border: 1px solid #e0d5c5;
    background: #ffffff;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

/* 疑似要素で右半分を写真にする */
.menu-banner::after {
    content: "";
    width: 50%;
    height: 100%;
    background-image: url("../img/img_category_menu.webp");
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.menu-banner-content {
    width: 50%; /* 左半分がテキスト */
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #ffffff;
}

.banner-en { color: #8b5e3c; font-size: 12px; font-weight: 600; letter-spacing: 0.15em; }
.banner-ja { color: #1a3d32; font-size: 26px; font-weight: 700; margin: 5px 0 10px; position: relative; padding-bottom: 8px; }
.banner-ja::after { content: ""; position: absolute; bottom: 0; left: 25%; width: 50%; height: 1px; background: #8b5e3c; }
.banner-lead { color: #666; font-size: 13px; margin-bottom: 12px; }
.banner-price { color: #8b5e3c; font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.banner-price span { color: #999; font-size: 11px; }

.banner-btn {
    padding: 6px 25px;
    border: 1px solid #1a3d32;
    color: #1a3d32;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.3s ease;
}

@media (hover: hover) {
    .menu-banner:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(139,94,60,0.1); }
    .menu-banner:hover::after { transform: scale(1.03); }
    .menu-banner:hover .banner-btn { background: #1a3d32; color: #ffffff; }
}

@media (max-width: 768px) {
    .menu-banner { flex-direction: column-reverse; aspect-ratio: auto; }
    .menu-banner::after { width: 100%; height: 200px; }
    .menu-banner-content { width: 100%; padding: 30px 20px; }
}