/* ===============================================
   Menu Page Styles
   =============================================== */

/* -----------------------------------------------
   Menu Section
   ----------------------------------------------- */
.menu_section {
    width: 100%;
    padding: calc(100vw * 120 / 1400) 0 calc(100vw * 120 / 1400) calc(100vw * 100 / 1400);
    background-color: #E6E1DA;
}

.menu_section_inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: calc(100vw * 120 / 1400);
}

/* -----------------------------------------------
   Top Banner
   ----------------------------------------------- */
.menu_banner {
    width: calc(100vw * 1300 / 1400);
    height: calc(100vw * 237 / 1400);
}

.menu_banner_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -----------------------------------------------
   Content Wrapper
   ----------------------------------------------- */
.menu_content_wrapper {
    width: calc(100vw * 1200 / 1400);
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: relative;
}

/* -----------------------------------------------
   Price Area
   ----------------------------------------------- */
.menu_price_area {
    width: calc(100vw * 550 / 1400);
    display: flex;
    flex-direction: column;
    gap: calc(100vw * 64 / 1400);
}

.menu_category {
    display: flex;
    flex-direction: column;
    gap: calc(100vw * 40 / 1400);
}

.menu_category_header {
    display: flex;
    align-items: center;
    gap: calc(100vw * 24 / 1400);
    padding-right: calc(100vw * 112 / 1400);
}

.menu_category_title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: calc(100vw * 40 / 1400);
    color: #bf9443;
    letter-spacing: 0.02em;
    line-height: 1.8;
    white-space: nowrap;
    margin: 0;
}

.menu_category_line {
    flex: 1;
    height: 1px;
    background-color: #bf9443;
}

/* -----------------------------------------------
   Menu Items
   ----------------------------------------------- */
.menu_items {
    width: calc(100vw * 400 / 1400);
    display: flex;
    flex-direction: column;
    gap: calc(100vw * 24 / 1400);
}

.menu_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1px;
}

.menu_item_time {
    font-family: 'Noto Serif JP', serif;
    font-weight: 500;
    font-size: calc(100vw * 22 / 1400);
    color: #bf9443;
    letter-spacing: 0.02em;
    line-height: 1.8;
    width: calc(100vw * 82 / 1400);
    display: flex;
    gap: calc(100vw * 8 / 1400);
}

.menu_item_time.long {
    width: calc(100vw * 111 / 1400);
}

.menu_item_extension {
    white-space: nowrap;
}

.menu_item_separator {
    width: calc(100vw * 73 / 1400);
    height: 0;
    border-top: 1px dashed #bf9443;
}

.menu_item_price {
    font-family: 'Noto Serif JP', serif;
    font-weight: 500;
    font-size: calc(100vw * 22 / 1400);
    color: #bf9443;
    letter-spacing: 0.02em;
    line-height: 1.8;
    white-space: nowrap;
}

/* -----------------------------------------------
   Availability Link
   ----------------------------------------------- */
.menu_availability_link {
    display: flex;
    align-items: center;
    gap: calc(100vw * 16 / 1400);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.menu_availability_link:hover {
    opacity: 0.8;
}

.menu_availability_link span {
    font-family: 'Noto Serif JP', serif;
    font-weight: 500;
    font-size: calc(100vw * 22 / 1400);
    color: #bf9443;
    letter-spacing: 0.02em;
    line-height: 1.8;
    text-align: right;
}

.menu_availability_link img {
    width: calc(100vw * 26 / 1400);
    height: calc(100vw * 26 / 1400);
}

/* -----------------------------------------------
   Images Area
   ----------------------------------------------- */
.menu_images_area {
    position: relative;
    width: calc(100vw * 650 / 1400);
    height: calc(100vw * 595 / 1400);
    overflow: visible;
}

.menu_image_main {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu_image_small {
    position: absolute;
    top: calc(100vw * -130 / 1400);
    right: calc(100vw * -100 / 1400);
    width: calc(100vw * 240 / 1400);
    height: calc(100vw * 240 / 1400);
    object-fit: cover;
}

/* -----------------------------------------------
   Contact Navigation
   ----------------------------------------------- */
.contact_navigation {
    width: 100%;
    padding: calc(100vw * 120 / 1400) 0 0 0;
    background-color: #E6E1DA;
}

.contact_navigation_inner {
    width: 100%;
    height: calc(100vw * 420 / 1400);
    background-image: url('../img/under_common/contact_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(100vw * 64 / 1400);
    position: relative;
}

.contact_navigation_inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(39, 21, 0, 0.5);
}

.contact_navigation_title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: calc(100vw * 80 / 1400);
    color: #ffffff;
    letter-spacing: 0.02em;
    line-height: normal;
    text-align: center;
    margin: 0;
    position: relative;
    z-index: 1;
}

.contact_navigation_buttons {
    display: flex;
    gap: calc(100vw * 160 / 1400);
    position: relative;
    z-index: 1;
}

.contact_btn {
    width: calc(100vw * 305 / 1400);
    height: calc(100vw * 66 / 1400);
    border-radius: calc(100vw * 6 / 1400);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(100vw * 16 / 1400);
    text-decoration: none;
    position: relative;
    transition: opacity 0.3s ease;
    border: 1px solid;
}

.contact_btn:hover {
    opacity: 0.9;
}

.contact_btn_line {
    background: linear-gradient(180deg, #98cd98 0%, #5b885b 100%);
    border-color: #4c7a4c;
}

.contact_btn_mail {
    background: linear-gradient(180deg, #eec882 0%, #bf9443 100%);
    border-color: #b18635;
}

.contact_btn_icon {
    width: calc(100vw * 24 / 1400);
    height: calc(100vw * 24 / 1400);
}

.contact_btn span {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: calc(100vw * 16 / 1400);
    color: #ffffff;
    letter-spacing: 0.02em;
    line-height: 2;
}

.contact_btn_arrow {
    position: absolute;
    right: calc(100vw * 16 / 1400);
    width: calc(100vw * 33 / 1400);
    height: calc(100vw * 22.5 / 1400);
}

/* -----------------------------------------------
   Responsive - SP
   ----------------------------------------------- */
@media (max-width: 768px) {
    .menu_section {
        padding: calc(100vw * 80 / 375) 0 calc(100vw * 80 / 375) calc(100vw * 20 / 375);
    }

    .menu_section_inner {
        gap: calc(100vw * 60 / 375);
    }

    .menu_banner {
        width: calc(100vw * 355 / 375);
        height: calc(100vw * 150 / 375);
    }

    .menu_content_wrapper {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: calc(100vw * 40 / 375);
    }

    .menu_price_area {
        width: calc(100vw * 335 / 375);
        gap: calc(100vw * 48 / 375);
    }

    .menu_category {
        gap: calc(100vw * 32 / 375);
    }

    .menu_category_header {
        gap: calc(100vw * 16 / 375);
        padding-right: 0;
    }

    .menu_category_title {
        font-size: calc(100vw * 24 / 375);
    }

    .menu_items {
        width: 100%;
        gap: calc(100vw * 20 / 375);
    }

    .menu_item_time {
        font-size: calc(100vw * 18 / 375);
        width: calc(100vw * 100 / 375);
        gap: calc(100vw * 6 / 375);
    }

    .menu_item_time.long {
        width: calc(100vw * 110 / 375);
    }

    .menu_item_separator {
        width: calc(100vw * 50 / 375);
    }

    .menu_item_price {
        font-size: calc(100vw * 18 / 375);
    }

    .menu_availability_link {
        gap: calc(100vw * 12 / 375);
    }

    .menu_availability_link span {
        font-size: calc(100vw * 18 / 375);
    }

    .menu_availability_link img {
        width: calc(100vw * 20 / 375);
        height: calc(100vw * 20 / 375);
    }

    .menu_images_area {
        width: calc(100vw * 335 / 375);
        height: calc(100vw * 300 / 375);
        position: relative;
    }

    .menu_image_main {
        width: 100%;
        height: 100%;
    }

    .menu_image_small {
        top: calc(100vw * -20 / 375);
        right: calc(100vw * -20 / 375);
        width: calc(100vw * 120 / 375);
        height: calc(100vw * 120 / 375);
    }

    .contact_navigation {
        padding: calc(100vw * 80 / 375) 0 0 0;
    }

    .contact_navigation_inner {
        height: calc(100vw * 350 / 375);
        gap: calc(100vw * 48 / 375);
    }

    .contact_navigation_title {
        font-size: calc(100vw * 48 / 375);
    }

    .contact_navigation_buttons {
        flex-direction: column;
        gap: calc(100vw * 24 / 375);
        width: calc(100vw * 335 / 375);
    }

    .contact_btn {
        width: 100%;
        height: calc(100vw * 56 / 375);
        border-radius: calc(100vw * 6 / 375);
        gap: calc(100vw * 12 / 375);
    }

    .contact_btn_icon {
        width: calc(100vw * 20 / 375);
        height: calc(100vw * 20 / 375);
    }

    .contact_btn span {
        font-size: calc(100vw * 14 / 375);
    }

    .contact_btn_arrow {
        right: calc(100vw * 16 / 375);
        width: calc(100vw * 24 / 375);
        height: calc(100vw * 16 / 375);
    }
}