@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Shippori+Mincho:wght@500;700&family=Cormorant+Garamond:wght@600;700&display=swap');

:root {
    --ivory: #F5F0E6;
    --indigo: #1E2A44;
    --wood: #A67C52;
    --charcoal: #2C2C2C;
    --vermilion: #B7410E;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans JP', system-ui, -apple-system, sans-serif;
}

.heading-serif {
    font-family: 'Cormorant Garamond', 'Shippori Mincho', Georgia, serif;
    letter-spacing: 0.02em;
}

.heading-jp {
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
}

.nav-link {
    position: relative;
    transition: color 0.2s ease;
}

.nav-link:after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -1px;
    left: 0;
    background-color: #B7410E;
    transition: width 0.3s ease;
}

.nav-link:hover:after {
    width: 100%;
}

.section-header {
    position: relative;
    display: inline-block;
}

.section-header:after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background: linear-gradient(to right, #1E2A44, #B7410E);
}

.japanese-restaurant {
    background-color: #F5F0E6;
    color: #2C2C2C;
}

.elegant-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.elegant-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.menu-item {
    transition: all 0.2s ease;
}

.menu-item:hover {
    background-color: #F8F4E9;
}

.gallery-img {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    cursor: pointer;
}

.gallery-img:hover {
    transform: scale(1.02);
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.nav-active {
    color: #B7410E !important;
    font-weight: 500;
}

.hero-overlay {
    background: linear-gradient(rgba(30, 42, 68, 0.45), rgba(30, 42, 68, 0.65));
}

.wood-accent {
    border-color: #A67C52;
}

.vermilion-btn {
    background-color: #B7410E;
    transition: all 0.3s ease;
}

.vermilion-btn:hover {
    background-color: #8C2F0A;
    transform: translateY(-1px);
}

.indigo-btn {
    background-color: #1E2A44;
    transition: all 0.3s ease;
}

.indigo-btn:hover {
    background-color: #121B2E;
}

.modal, .toast {
    animation: fadeInModal 0.2s ease forwards;
}

@keyframes fadeInModal {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-12px) translateX(-50%); }
    to { opacity: 1; transform: translateY(0) translateX(-50%); }
}

@keyframes toastOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.toast-wrap {
    position: fixed;
    top: 96px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    width: 92%;
    max-width: 420px;
}

.toast {
    animation: toastIn 0.25s ease forwards;
}

.toast.toast-hide {
    animation: toastOut 0.25s ease forwards;
}

.food-image {
    object-fit: cover;
    background-color: #F5F0E6;
}

.price {
    font-feature-settings: "tnum";
}

.nav-scrolled {
    background-color: rgba(245, 240, 230, 0.98);
    backdrop-filter: blur(12px);
}

.japanese-text {
    font-feature-settings: "palt";
}

.logo-mark {
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.08));
}

.error-code {
    font-family: 'Cormorant Garamond', Georgia, serif;
}