@charset "UTF-8";

/* ==========================================================================
   Variables & Reset
   ========================================================================== */
:root {
    --text-color: #4a4a4a;
    --text-light: #7a7a7a;
    --accent-color: #fceea7;
    /* Soft Yellow */
    --accent-dark: #e8d06d;
    --green-color: #d8e6ad;
    /* Soft Green */
    --orange-color: #f4cda4;
    /* Soft Orange */
    --bg-color: #fafaf8;
    /* Warm White */
    --white: #ffffff;
    --shadow-soft: 0 20px 40px rgba(0, 0, 0, 0.06);
    --font-main: 'Noto Sans JP', sans-serif;
    --section-pc: 140px;
    --section-sp: 90px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    color: var(--text-color);
    line-height: 2.0;
    letter-spacing: 0.08em;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    user-select: none;
}

h1,
h2,
h3,
h4,
p,
ul,
figure {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.container {
    width: 96%;
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
    height: 100%;
    /* Added for centering in menu-recommend */
}

.section-margin {
    margin-bottom: var(--section-sp);
}

.shadow-soft {
    box-shadow: var(--shadow-soft);
}

.radius-organic {
    border-radius: 4px 100px 4px 4px;
}

.radius-clay {
    border-radius: 50% 4px 50% 4px / 4px 50% 4px 50%;
}

img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    object-fit: cover;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.h-100 {
    height: 100%;
}

/* ==========================================================================
   Header
   ========================================================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Ensures vertical centering */
    height: 100%;
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.logo a {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.logo a:hover {
    transform: scale(1.02);
}

.logo-sub {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-light);
    letter-spacing: 0.05em;
    padding-top: 4px;
    /* visually align with the main text */
}

.logo-main {
    font-size: 1.5rem;
    font-weight: 800;
    /* Extra bold */
    letter-spacing: 0.08em;
    background: linear-gradient(135deg, var(--accent-dark) 0%, var(--green-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.05));
}

.pc-nav {
    display: none;
    height: 100%;
    /* Ensure nav takes full height for alignment */
}

.header-btn {
    display: none;
}

/* Hamburger */
.hamburger {
    width: 30px;
    height: 20px;
    position: relative;
    cursor: pointer;
    z-index: 1001;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #333;
    position: absolute;
    transition: 0.3s;
}

.hamburger span:nth-child(1) {
    top: 0;
}

.hamburger span:nth-child(2) {
    top: 9px;
}

.hamburger span:nth-child(3) {
    bottom: 0;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 9px;
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg);
    bottom: 9px;
}

/* SP Nav */
.sp-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    transition: 0.4s;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-nav.active {
    right: 0;
}

.sp-nav ul {
    text-align: center;
}

.sp-nav li {
    margin: 20px 0;
}

.sp-nav a {
    font-size: 1.1rem;
    font-weight: 500;
}

.sp-nav a.btn-reservation {
    color: #fff;
    margin-top: 10px;
    padding: 15px 40px;
    font-size: 1.2rem;
}

/* ==========================================================================
   FV
   ========================================================================== */
.fv {
    height: auto;
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: var(--section-sp);
    margin-top: 80px;
}

.fv-swiper {
    width: 100%;
    height: auto;
}

.fv-swiper .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}

.scroll-down {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    color: #fff;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    animation: scrollMove 2s infinite;
}

.scroll-down::after {
    content: '';
    display: block;
    width: 1px;
    height: 40px;
    background-color: #fff;
    margin: 10px auto 0;
}

@keyframes scrollMove {
    0% {
        transform: translate(-50%, 0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, 20px);
        opacity: 0;
    }
}

/* ==========================================================================
   Section Title
   ========================================================================== */
.section-title-wrapper {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

.title-bg {
    display: none;
    /* Changed: Removed from visual but keeping CSS rule just in case */
}

.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    /* Bold */
    position: relative;
    padding-bottom: 5px;
    letter-spacing: 0.15em;
    /* Added underscore style since image was removed */
    border-bottom: 3px solid var(--accent-dark);
    display: inline-block;
}

/* ==========================================================================
   SV / CTA / Components
   ========================================================================== */
.image-wrapper {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.4s ease;
}

.image-wrapper:hover {
    transform: translateY(-5px);
}

.banner-text {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 30px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #555;
}

.cta-box {
    background: linear-gradient(135deg, #ffffff 0%, #fefcf5 100%);
    padding: 30px 20px;
    text-align: center;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(232, 208, 109, 0.2);
}

.cta-box::before {
    content: '';
    position: absolute;
    top: -40px;
    left: -40px;
    width: 150px;
    height: 150px;
    background: var(--accent-color);
    border-radius: 50%;
    opacity: 0.4;
    z-index: 0;
    transition: transform 0.6s ease;
}

.cta-box::after {
    content: '';
    position: absolute;
    bottom: -60px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: var(--green-color);
    border-radius: 50%;
    opacity: 0.3;
    z-index: 0;
    transition: transform 0.6s ease;
}

.cta-box:hover::before {
    transform: scale(1.1) translate(10px, 10px);
}

.cta-box:hover::after {
    transform: scale(1.1) translate(-10px, -10px);
}

.cta-box>* {
    position: relative;
    z-index: 1;
}

.cta-text {
    font-size: 1.25rem;
    margin-bottom: 25px;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 0.1em;
}

.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.btn-tel,
.btn-web,
.btn-reservation {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: 700;
    text-align: center;
    transition: all 0.3s;
}

.btn-tel {
    background-color: var(--accent-color);
    color: #555;
    font-size: 1.2rem;
}

.btn-web,
.btn-reservation {
    background-color: var(--green-color);
    color: #fff;
}

.btn-reservation {
    padding: 10px 25px;
    font-size: 0.9rem;
}

/* ==========================================================================
   TV (Nayami) Grid Layout
   ========================================================================== */
/* ==========================================================================
   TV (Nayami) Grid Layout (3-Column Refactor)
   ========================================================================== */
.tv-grid-2x2 {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr;
    /* 1 col on SP */
}

/* Note: Images removed from grid as per request */

/* Removed .tv-grid-boxes styles as we are using a unified grid now */

.checklist-box {
    background: #fff;
    padding: 10px;
    /* Reduced for SP */
    border-radius: 12px;
    border-left: 5px solid var(--accent-color);
}

.checklist-box h3 {
    font-size: 1.1rem;
    border-bottom: 2px solid #eee;
    margin-bottom: 15px;
    padding-bottom: 5px;
    color: #555;
}

.checklist-box li {
    position: relative;
    padding-left: 1.2em;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.checklist-box li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--orange-color);
}

.tv-message-wrapper {
    margin-top: 40px;
    text-align: center;
}

.tv-message {
    background: linear-gradient(135deg, #ffffff 0%, #fefcf5 100%);
    padding: 20px 30px;
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(232, 208, 109, 0.15);
    display: inline-block;
    font-weight: 700;
    color: var(--text-color);
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(232, 208, 109, 0.3);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: default;
}

.tv-message::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 80px;
    height: 80px;
    background: var(--accent-color);
    border-radius: 50%;
    opacity: 0.3;
    transition: transform 0.5s ease;
    z-index: 0;
}

.tv-message::after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 60px;
    height: 60px;
    background: var(--green-color);
    border-radius: 50%;
    opacity: 0.3;
    transition: transform 0.5s ease;
    z-index: 0;
}

.tv-message:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(232, 208, 109, 0.3);
}

.tv-message:hover::before {
    transform: scale(1.5) translate(10px, 10px);
}

.tv-message:hover::after {
    transform: scale(1.5) translate(-10px, -10px);
}

.tv-message span {
    position: relative;
    z-index: 1;
}


/* ==========================================================================
   Broken Grid Layouts (Generic)
   ========================================================================== */
.broken-grid {
    display: flex;
    flex-direction: column;
}

.broken-grid>div {
    width: 100%;
}

.broken-grid img {
    width: 100%;
    display: block;
}

.overlap-text-right,
.overlap-text-left {
    background-color: #fff;
    padding: 10px;
    /* Reduced for SP */
    margin-top: -30px;
    z-index: 2;
    position: relative;
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.about-grid.reverse {
    flex-direction: column;
}

/* Service */
.service-text h3 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: #555;
}

.margin-top-large {
    margin-top: 60px;
}

/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 cols on SP */
    gap: 15px;
}

.gallery-item {
    border-radius: 8px;
    overflow: hidden;
    /* Contains the zoom */
}

.gallery-item img {
    border-radius: 8px;
    /* Matches container */
    cursor: default;
    transition: transform 0.5s ease;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
    display: block;
}

.gallery-item img:hover {
    opacity: 1;
    transform: scale(1.1);
    /* Popup zoom effect */
}

/* Menu Recommend (Banner) */
.menu-recommend {
    color: #fff;
}

.background-parallax {
    background-attachment: scroll;
    background-size: cover;
    background-position: center;
    position: relative;
    /* Height and padding set inline to 300px in HTML, handled by flex-center */
}

.background-parallax .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    /* Darker for readability */
}

.section-title-wrapper.light .section-title {
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border-bottom-color: #fff;
}

/* Menu Cards in Banner: Hidden on SP/Desktop default? 
   Wait, if banner is 300px, fitting 3 cards inside might be tight.
   User asked for "banner section more less hight like 300px". 
   If I put cards inside, it will overflow.
   Maybe the user means the BANNER BACKGROUND is 300px, and content overflows?
   Or simple text? The prompt implies "Menu/Recommend" is the section.
   I will style the cards to be displayed cleanly, perhaps scaled down or just text links?
   Actually, with 300px height, I can't fit description text + titles + price + spacing.
   I will make the cards smaller or layout horizontal.
   Let's ensure the grid works. 
   On SP, 300px is too short for stacking. 
   I will let `menu-recommend` grow if content needs it, BUT try to keep the visual "banner" interaction.
   Actually, "banner section" might just be the BACKGROUND height. 
   I will set min-height 300px.
   If cards are there, they should probably overlap or sit inside.
   I will set height to auto but padding tight.
*/
.menu-wrapper {
    width: 100%;
    z-index: 2;
    padding: 100px 0;
    /* Added spacing top/bottom */
}

.menu-cards {
    display: grid;
    gap: 15px;
    grid-template-columns: 1fr;
    /* Stack on SP */
}

.menu-card {
    background: rgba(255, 255, 255, 0.95);
    padding: 10px;
    /* Reduced for SP */
    border-radius: 8px;
    color: var(--text-color);
    font-size: 0.9rem;
    overflow: hidden;
    /* For image rounded corners */
}

.menu-card-img {
    margin: -15px -15px 15px -15px;
    /* Negate padding to make it flush */
    height: 200px;
}

.menu-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-card h3 {
    font-size: 1rem;
    /* Increased from 1rem */
    margin-bottom: 5px;
    color: #555;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

/* Price & Note */
.menu-card .price {
    font-weight: 700;
    /* Bold */
    font-size: 1rem;
    color: var(--accent-dark);
}

.reservation-note {
    font-size: 14px;
    font-weight: normal;
    /* Optional: keep regular weight if preferred, or bold too? User just said make font size 14px for this text. usually notes are lighter. keeping inherit bold might be too much. Let's keep it bold but smaller, or reset weight? User request: "Bold the time and price text." - "make the font size 14px for only this text". I'll keep it bold to match parent unless ugly. Actually, usually notes are less emphasized. I'll keep font-weight inherited (bold) but smaller. */
    margin-left: 5px;
}

/* Menu Price */
.price-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.price-content {
    padding: 10px;
    /* Reduced for SP */
}

/* Voice Grid */
.voice-grid {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr;
    /* 1 col on SP */
    justify-content: center;
}

.voice-card {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    position: relative;
}

.g-review-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.g-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.g-user-info {
    display: flex;
    flex-direction: column;
}

.g-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #333;
    line-height: 1.2;
}

.g-stars {
    color: #fbbc04;
    font-size: 0.8rem;
    margin-top: 5px;
}

.voice-content .review-text {
    font-size: 0.95rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    color: var(--text-color);
}

.voice-content .review-text.expanded {
    -webkit-line-clamp: unset;
    line-clamp: unset;
}

.read-more-btn {
    background: none;
    border: none;
    color: #1a73e8;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
    margin-top: 8px;
    font-weight: 500;
    outline: none;
}

.read-more-btn:hover {
    text-decoration: underline;
}

/* Staff */
.staff-card {
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    /* Reduced for SP */
}

.staff-img {
    text-align: center;
    margin-bottom: 20px;
}

.staff-icon img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--beige-color);
}

.staff-info h3 {
    font-size: 1.3rem;
    margin-bottom: 5px;
}

.en-name {
    font-size: 0.9rem;
    color: var(--text-light);
    font-weight: 300;
}

.job-title {
    color: var(--accent-dark);
    font-weight: 700;
    margin-bottom: 20px;
}

/* Access */
.access-grid {
    display: grid;
    gap: 30px;
}

.access-info {
    background: #fff;
    padding: 10px;
    /* Reduced for SP */
    border-radius: 12px;
}

.shop-name {
    font-size: 1.2rem;
    margin-bottom: 20px;
    border-left: 4px solid var(--accent-color);
    padding-left: 10px;
}

.access-info dl {
    display: grid;
    grid-template-columns: 25% 1fr;
    gap: 15px 0;
}

.access-info dt {
    font-weight: 700;
}

.sns-btn a {
    display: inline-block;
    margin-top: 20px;
    color: #d62976;
    /* Insta color */
    font-weight: 700;
    font-size: 1.1rem;
}

.google-map {
    width: 100%;
    /* Default height for SP, or min-height */
}

.google-map iframe {
    border-radius: 12px;
    width: 100%;
    height: 300px;
    /* SP fixed height */
    vertical-align: bottom;
}

/* Footer */
.footer {
    background: #f0f0f0;
    padding: 30px 0;
    text-align: center;
    font-size: 0.8rem;
    color: #777;
    padding-bottom: 100px;
    /* Space for fixed CTA */
}

/* Fixed Elements */
.scroll-top {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 99;
    color: var(--text-color);
}

.scroll-top.show {
    opacity: 1;
    visibility: visible;
}

.sp-fixed-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: #fff;
    display: flex;
    z-index: 999;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.sp-fixed-cta a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 0.9rem;
    font-weight: 700;
}

.sp-cta-tel {
    background: var(--accent-color);
    color: #333;
}

.sp-cta-web {
    background: var(--green-color);
    color: #fff;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
    margin: auto;
    display: block;
    width: auto;
    max-width: 95%;
    max-height: 90vh;
    object-fit: contain;
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* ==========================================================================
   PC Responsive (Desktop First approach override)
   ========================================================================== */
@media screen and (min-width: 768px) {
    .section-margin {
        margin-bottom: var(--section-pc);
    }

    .pc-nav {
        display: block;
    }

    .pc-nav ul {
        display: flex;
        gap: 30px;
        align-items: center;
        height: 100%;
    }

    .header-btn {
        display: block;
    }

    .hamburger,
    .sp-nav,
    .sp-fixed-cta {
        display: none;
    }

    .sp-br {
        display: none;
    }

    /* Navbar tablet/small PC adjustments (768px to 1180px) */
    @media screen and (max-width: 1180px) {
        .pc-nav ul {
            gap: 10px;
        }

        .pc-nav a {
            font-size: 0.8rem;
            letter-spacing: 0;
        }

        .logo-sub {
            font-size: 0.75rem;
            letter-spacing: 0;
            padding-top: 2px;
        }

        .logo-main {
            font-size: 1.1rem;
            letter-spacing: 0;
        }

        .logo a {
            gap: 5px;
        }

        .header-btn {
            display: block;
        }

        .btn-reservation {
            padding: 8px 12px;
            font-size: 0.75rem;
            white-space: nowrap;
        }

        .header-inner {
            padding: 0 10px;
        }
    }

    .footer {
        padding-bottom: 30px;
    }

    .scroll-top {
        bottom: 30px;
    }

    /* Layouts PC */
    .checklist-box {
        padding: 30px;
    }

    .tv-message {
        padding: 40px;
    }

    .voice-card,
    .staff-card {
        padding: 30px;
    }

    .cta-box {
        padding: 50px 30px;
    }

    .access-info {
        padding: 30px;
        /* Restore PC */
    }

    .price-content {
        padding: 20px;
        /* Restore PC */
    }

    .tv-grid-2x2 {
        grid-template-columns: repeat(2, 1fr);
        /* 2x2 grid */
        align-items: stretch;
    }

    .broken-grid {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .broken-grid.reverse {
        flex-direction: row-reverse;
    }

    .broken-grid>div {
        width: 45%;
    }

    /* Asymmetry: Text wider than image as requested, aligned height */
    .about-grid {
        align-items: stretch;
        /* Equal height */
        gap: 4%;
    }

    .about-grid .about-image {
        width: 38%;
        display: flex;
        /* allows img to fill height */
    }

    .about-grid .about-image img {
        height: 100%;
        object-fit: cover;
    }

    .about-grid .about-content {
        width: 58%;
        /* Resetting overlap/offsets for this specific section */
        margin: 0 !important;
        transform: none !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* Vertically center the text inside */
    }

    /* Message Section specific layout: Larger Text, Smaller Image */
    .message-block .message-img {
        width: 35%;
    }

    .message-block .message-content {
        width: 55%;
    }

    .overlap-text-right {
        margin-left: -80px;
        margin-top: 0;
        padding: 50px;
        width: auto;
        margin-right: 0;
    }

    .overlap-text-left {
        margin-right: -80px;
        margin-left: 0;
        margin-top: 0;
        padding: 50px;
        width: auto;
    }

    .about-content.overlap-text-left {
        transform: translateY(-40px);
    }

    /* Gallery Grid PC */
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        /* 3 cols requested */
    }

    /* CTA */
    .cta-buttons {
        flex-direction: row;
        justify-content: center;
    }

    /* Menu Grid */
    .menu-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .menu-card {
        padding: 30px;
    }

    .price-list {
        display: flex;
        justify-content: center;
    }

    .price-item {
        display: flex;
        width: 80%;
    }

    .price-img {
        width: 40%;
    }

    .price-img img {
        height: 100%;
        object-fit: cover;
    }

    .price-content {
        width: 60%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Voice Grid PC */
    .voice-grid {
        grid-template-columns: 1fr;
        max-width: 800px;
        margin: 0 auto;
        align-items: start;
    }

    .voice-card {
        padding: 30px;
    }

    /* Staff */
    .staff-card {
        display: flex;
        align-items: flex-start;
        gap: 40px;
    }

    .staff-img {
        width: 30%;
        margin-bottom: 0;
    }

    .staff-info {
        width: 70%;
    }

    .container {
        width: 90%;
    }

    /* Access */
    .access-grid {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        /* Ensure equal height */
    }

    .access-info dl {
        grid-template-columns: 80px 1fr;
    }

    .google-map {
        height: 100%;
        /* Fill the grid cell */
    }

    .google-map iframe {
        height: 100%;
        /* Fill the container */
    }

    .background-parallax {
        background-attachment: fixed;
    }

    /* Hover Effects */
    .btn-tel:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(247, 213, 96, 0.4);
    }

    .btn-web:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(168, 213, 186, 0.4);
    }

    .shadow-soft {
        transition: box-shadow 0.3s;
    }

    .shadow-soft:hover {
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
    }
}