@charset "UTF-8";

/* =========================================
   1. Root & Base Styles
   ========================================= */
:root {
    --color-bg: #F4F1EA;
    --color-text: #1A1A1A;
    --color-accent: #B22222;
    --font-jp: 'Zen Old Mincho', serif;
    --font-en: 'Oswald', sans-serif;
    --font-body: 'Cormorant Garamond', serif;
}

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

html.lenis {
    height: auto;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body), var(--font-jp);
    overflow-x: hidden;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img, video { width: 100%; height: auto; display: block; }

/* =========================================
   2. Typography & Utilities
   ========================================= */
.ja { display: none; }
.en { display: none; }

body.lang-ja .ja { display: block; }
body.lang-en .en { display: block; }
body.lang-ja span.ja { display: inline; }
body.lang-en span.en { display: inline; }

/* Section & Container */
.section-padding { padding: 100px 20px; }
.container { max-width: 1400px; margin: 0 auto; }

/* Text Utilities */
.text-center-block {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
.note-small {
    font-size: 0.85rem;
    color: #666;
    margin-top: 10px;
    line-height: 1.5;
}
.note-small.red {
    color: #e74c3c;
    font-weight: bold;
    margin-bottom: 15px;
}

/* 汎用背景色 */
.bg-gray { background-color: #f9f9f9; }

/* =========================================
   3. Loader
   ========================================= */
.loader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    background: #000;
    color: #fff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1);
}
.loader-logo img { width: 200px; }
.loader.loaded { transform: translateY(-100%); }

/* =========================================
   4. Header & Navigation
   ========================================= */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    color: #fff;
}
.header-right { display: flex; align-items: center; gap: 30px; }
.logo img { width: 120px; }

.lang-switch {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.5);
    color: #fff;
    padding: 5px 15px;
    border-radius: 30px;
    cursor: pointer;
    font-family: var(--font-en);
    font-size: 0.9rem;
    display: flex;
    gap: 5px;
    transition: all 0.3s;
}
.lang-switch:hover { background: #fff; color: #000; }

/* Navigation Overlay */
.nav-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    background: #1a1a1a;
    z-index: 98;
    display: flex;
    flex-direction: column;
    align-items: center;
    clip-path: circle(0% at 95% 5%);
    transition: clip-path 0.8s cubic-bezier(0.7, 0, 0.3, 1);
    color: #fff;
    padding: 40px 0;
    overflow-y: auto;
}
.nav-overlay.active { clip-path: circle(150% at 95% 5%); }

.nav-menu { width: 100%; max-width: 600px; margin: auto 0; }
.nav-menu ul { list-style: none; text-align: center; padding: 0; }
.nav-menu > ul > li { margin: 20px 0; }

.nav-link {
    display: block;
    font-family: var(--font-en);
    font-size: 2.2rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #888;
    transition: color 0.3s, transform 0.3s;
    line-height: 1.2;
}
.nav-link:hover { color: #fff; }

/* Sub Menu */
.sub-menu { display: block; margin-top: 10px; margin-bottom: 20px; }
.sub-menu li { margin: 8px 0; }
.sub-link {
    font-family: var(--font-jp);
    font-size: 1.1rem;
    color: #666;
    display: block;
    transition: color 0.3s;
    text-decoration: none;
}
.sub-link .en { font-family: var(--font-en); font-size: 0.8em; margin-left: 10px; opacity: 0.7; }
.sub-link:hover { color: #fff; }
.nav-note { display: block; font-size: 0.7em; color: var(--color-accent); margin-top: 2px; }

.nav-bg-decoration {
    position: fixed; bottom: -5%; left: 50%; transform: translateX(-50%);
    font-family: var(--font-en); font-size: 20vw; color: rgba(255,255,255,0.03);
    pointer-events: none; white-space: nowrap; z-index: -1;
}

/* Nav Toggle Button */
.nav-toggle { width: 40px; height: 20px; position: relative; cursor: pointer; z-index: 101; }
.nav-toggle span { position: absolute; width: 100%; height: 2px; background: #fff; transition: all 0.4s; left: 0; }
.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { bottom: 0; }
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg); top: 9px; }
.nav-toggle.active span:nth-child(2) { transform: rotate(-45deg); bottom: 9px; }

/* =========================================
   5. Hero Section (Home)
   ========================================= */
.hero {
    position: relative;
    width: 100%; height: 100svh;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.hero-bg video { width: 100%; height: 100%; object-fit: cover; }
.video-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.3);
}
.hero-content {
    position: relative; z-index: 2; text-align: center; color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.sub-title {
    font-family: var(--font-en); font-size: clamp(1rem, 2vw, 1.5rem);
    letter-spacing: 0.2em; margin-bottom: 20px; text-transform: uppercase;
}
.main-title {
    font-family: var(--font-jp); font-size: clamp(3rem, 10vw, 8rem);
    line-height: 1.1; font-weight: 700;
}
.scroll-indicator {
    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
    color: #fff; display: flex; flex-direction: column; align-items: center;
    gap: 10px; font-family: var(--font-en); font-size: 0.8rem; z-index: 2;
}
.scroll-indicator .line {
    width: 1px; height: 60px; background: #fff;
    animation: scrollLine 2s infinite;
}
@keyframes scrollLine {
    0% { transform: scaleY(0); transform-origin: top; }
    50% { transform: scaleY(1); transform-origin: top; }
    51% { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

/* =========================================
   6. Page Hero (Sub Pages)
   ========================================= */
.page-hero {
    position: relative;
    width: 100%; height: 60vh;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.page-hero.small-hero { height: 50vh; }
.page-hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
}
.page-hero-content { position: relative; z-index: 2; text-align: center; color: #fff; }

/* =========================================
   7. Intro Section (Home)
   ========================================= */
.intro-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.intro-heading {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-family: var(--font-jp); margin: 30px 0; line-height: 1.4;
}
.section-label {
    font-family: var(--font-en); font-size: 0.9rem; letter-spacing: 0.2em;
    color: var(--color-accent); display: block; margin-bottom: 20px;
}
.intro-visual {
    position: relative; height: 600px; border-radius: 4px; overflow: hidden;
}
.intro-video { width: 100%; height: 100%; object-fit: cover; }
.intro-sub-img {
    width: 200px; margin: 20px 0; border-radius: 4px; overflow: hidden;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
}
.text-body p { margin-bottom: 20px; text-align: justify; }

/* Special adjustment for Info Page Sub Image */
.page-info .intro-sub-img {
    width: 100%; max-width: none; height: auto;
    margin: 30px 0 0 0; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* =========================================
   8. Cuisine Section (Home - Compact)
   ========================================= */
.cuisine {
    width: 100%; height: 80vh; overflow: hidden;
    background: #111; color: #fff; display: flex; align-items: center;
}
.cuisine-wrapper {
    display: flex; flex-wrap: nowrap; padding-left: 10vw; gap: 50px;
}
.title-panel { width: 200px; flex-shrink: 0; }
.vertical-title {
    writing-mode: vertical-rl; font-size: 4rem;
    font-family: var(--font-jp); letter-spacing: 0.2em;
}
body.lang-en .vertical-title { writing-mode: horizontal-tb; transform: rotate(-90deg); }

.cuisine-panel.item-panel {
    flex: 0 0 auto; width: 25vw; min-width: 300px;
    display: flex; align-items: center; justify-content: center;
}
.card { position: relative; width: 100%; }
.card-img {
    width: 100%; height: 40vh; overflow: hidden; margin-bottom: 15px;
}
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.card:hover .card-img img { transform: scale(1.05); }
.card-content h3 {
    font-size: 1.5rem; margin-bottom: 5px; font-family: var(--font-jp);
}
.card-content h3 .en {
    display: block; font-size: 0.8rem; color: #888; font-family: var(--font-en); margin-top: 5px;
}
.btn-link {
    display: inline-block; margin-top: 15px; border-bottom: 1px solid #fff;
    padding-bottom: 5px; font-size: 0.9rem;
}

/* =========================================
   9. Souvenir Section (Home)
   ========================================= */
.souvenir-layout {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
}
.souvenir-text h2 {
    font-size: 3rem; margin-bottom: 20px; font-family: var(--font-jp);
}
.souvenir-gallery {
    display: flex; gap: 20px; margin-top: 30px; flex-wrap: wrap;
}
.souvenir-gallery img {
    width: 180px; height: 180px; object-fit: cover;
    border-radius: 4px; transition: transform 0.3s;
}
.souvenir-gallery img:hover { transform: scale(1.1); }
.souvenir-main-img img {
    border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* =========================================
   10. Instagram & Calendar
   ========================================= */
.section-header { text-align: center; margin-bottom: 40px; }
.section-header h2 { font-size: 2rem; font-family: var(--font-en); }

/* Instagram Embed Optimization */
.instagram-embed-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    /* PCで見すぎて画像が粗くならないよう最大幅を設定（お好みで調整可） */
    max-width: 1200px; 
    margin: 0 auto;
    overflow: hidden;
    background: #f9f9f9; /* 読み込み中に背景を表示 */
}

/* SnapWidgetの強制スタイル上書き */
.snapwidget-widget {
    width: 100% !important;  /* 固定幅を無視して画面いっぱいに */
    height: 400px !important; /* スマホでも見やすい高さを確保 */
    max-width: 100% !important;
}

/* スマホ表示時の高さ微調整（必要であれば） */
@media (max-width: 768px) {
    .snapwidget-widget {
        height: 500px !important; /* スマホでは縦に長くして見やすく */
    }
}

.insta-link {
    display: inline-block;
    margin-top: 10px;
    font-family: var(--font-en);
    font-size: 1.1rem;
    border-bottom: 1px solid currentColor;
    transition: opacity 0.3s;
    color: var(--color-text);
}
.insta-link:hover { opacity: 0.7; }

.calendar-wrapper {
    width: 100%; max-width: 900px; margin: 0 auto;
    background: #fff; padding: 15px; border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* =========================================
   11. Staff & Info Section (Home)
   ========================================= */
.staff-gallery {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 60px;
}
.staff-item img {
    width: 100%; height: auto; aspect-ratio: 1 / 1;
    object-fit: cover; object-position: top center;
    border-radius: 4px; margin-bottom: 10px;
}
.staff-item p { text-align: center; font-family: var(--font-jp); font-size: 0.9rem; color: #666; }

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.info-block h3 {
    font-size: 1.2rem; border-bottom: 1px solid #000; padding-bottom: 10px;
    margin-bottom: 20px; font-family: var(--font-en);
}
.btn-text {
    display: inline-block; margin-top: 20px; font-weight: 600;
}
.map-container { margin-top: 30px; width: 100%; }
.map-link-block { display: block; width: 100%; height: auto; text-decoration: none; }
.map-image-wrapper {
    position: relative; width: 100%; height: 300px; overflow: hidden; border-radius: 4px;
}
.map-image-wrapper img {
    width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;
}
.map-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.3);
    display: flex; justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.3s ease;
}
.map-overlay span {
    color: #fff; font-family: var(--font-en); font-size: 1.2rem; letter-spacing: 0.1em;
    border: 1px solid #fff; padding: 10px 20px; background: rgba(0,0,0,0.5);
}
.map-link-block:hover .map-image-wrapper img { transform: scale(1.05); }
.map-link-block:hover .map-overlay { opacity: 1; }

.info-single-block {
    text-align: center; max-width: 600px; margin: 0 auto; padding: 40px;
    background: #fff; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.info-single-block h3 {
    font-size: 1.5rem; border-bottom: 1px solid #ddd; padding-bottom: 15px;
    margin-bottom: 25px; font-family: var(--font-en); display: inline-block;
}
.info-single-block .btn-text {
    border: 1px solid #333; padding: 10px 30px; border-radius: 30px; transition: 0.3s;
}
.info-single-block .btn-text:hover { background: #333; color: #fff; }

/* =========================================
   12. About Page Specifics
   ========================================= */
.story-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-bottom: 50px;
}
.story-grid.reverse { direction: rtl; }
.story-grid.reverse .story-text { direction: ltr; }

.story-img {
    position: relative; height: 500px; border-radius: 4px;
    overflow: hidden; box-shadow: 10px 10px 30px rgba(0,0,0,0.1);
}
.story-img img { width: 100%; height: 100%; object-fit: cover; }

.story-title {
    font-size: 2.5rem; font-family: var(--font-jp); margin-bottom: 30px; line-height: 1.4;
}
.story-title .en {
    display: block; font-size: 1rem; color: var(--color-accent);
    font-family: var(--font-en); margin-top: 10px; letter-spacing: 0.1em;
}

.message-wrapper {
    display: flex; flex-direction: column; align-items: center;
    max-width: 900px; margin: 0 auto; background: #fff;
    padding: 60px; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}
.message-img {
    width: 300px; height: 300px; border-radius: 50%;
    overflow: hidden; margin-bottom: 40px; border: 5px solid #f0f0f0;
}
.message-img img { width: 100%; height: 100%; object-fit: cover; }
.message-content { text-align: center; }
.signature { margin-top: 50px; text-align: right; font-family: var(--font-jp); }
.signature .role { font-size: 0.9rem; color: #666; margin-bottom: 5px; }
.signature .name { font-size: 1.8rem; font-weight: 700; }
.signature .en-name { font-family: var(--font-en); font-size: 1rem; color: #999; }

/* =========================================
   13. Cuisine Page Specifics
   ========================================= */
.cuisine-detail-section { padding: 100px 20px; border-bottom: 1px solid #ddd; }
.cuisine-detail-section.alt-bg { background-color: #fff; }

.cuisine-detail-header { text-align: center; max-width: 800px; margin: 0 auto 60px; }
.detail-label {
    display: block; font-family: var(--font-en); color: var(--color-accent);
    letter-spacing: 0.2em; font-size: 0.9rem; margin-bottom: 15px;
}
.detail-title { font-size: 2.5rem; font-family: var(--font-jp); margin-bottom: 30px; }
.detail-title .en {
    display: block; font-size: 1.2rem; color: #999; font-family: var(--font-en); margin-top: 5px;
}
.detail-desc { text-align: left; line-height: 1.8; margin-bottom: 30px; }
.detail-period { color: var(--color-accent); font-weight: bold; margin-bottom: 40px; }

/* Buttons Common */
.btn-box {
    display: inline-block; border: 1px solid #333; padding: 15px 40px;
    color: #333; transition: all 0.3s; text-align: center; min-width: 250px;
}
.btn-box:hover { background: #333; color: #fff; }
.btn-box .en { display: block; font-size: 0.8rem; margin-top: 5px; opacity: 0.8; }

.cuisine-gallery {
    display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px;
}
.gallery-item { height: 400px; overflow: hidden; border-radius: 4px; }
.gallery-item.large { height: 500px; }
.gallery-item img {
    width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s;
}
.gallery-item:hover img { transform: scale(1.05); }

.cuisine-content-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.cuisine-content-grid.reverse { direction: rtl; }
.cuisine-content-grid.reverse .cuisine-text-side { direction: ltr; }

.cuisine-img-side {
    position: relative; height: 500px; border-radius: 4px;
    overflow: hidden; box-shadow: 10px 10px 30px rgba(0,0,0,0.1);
}
.cuisine-img-side img { width: 100%; height: 100%; object-fit: cover; }

/* Cuisine Collage Layout */
.cuisine-img-collage {
    position: relative; width: 100%; min-height: 500px;
    padding-bottom: 50px; padding-left: 30px;
}
.collage-main {
    position: relative; width: 85%; margin-left: auto;
    border-radius: 4px; overflow: hidden; box-shadow: 10px 10px 30px rgba(0,0,0,0.1); z-index: 1;
}
.collage-main img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; }
.collage-sub {
    position: absolute; bottom: 0; left: 0; width: 55%;
    border-radius: 4px; overflow: hidden; border: 5px solid #fff;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2); z-index: 2;
}
.collage-sub img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; }
.cuisine-img-collage:hover .collage-main img,
.cuisine-img-collage:hover .collage-sub img { transform: scale(1.05); }

/* =========================================
   14. Crab Info & Menu Styles
   ========================================= */
.info-intro { text-align: center; background-color: #fff; border-bottom: 1px solid #eee; }
.period-box {
    display: flex; justify-content: center; gap: 30px; margin-bottom: 40px; flex-wrap: wrap;
}
.period-item {
    border: 1px solid var(--color-accent); padding: 15px 30px;
    border-radius: 4px; background: #fffafa;
}
.period-item .label {
    display: block; font-size: 0.9rem; color: var(--color-accent);
    margin-bottom: 5px; font-weight: bold;
}
.period-item .date {
    display: block; font-size: 1.3rem; font-family: var(--font-en); font-weight: bold;
}
.lead-text {
    font-size: 1.1rem; line-height: 2; font-family: var(--font-jp);
}

.philosophy-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 80px;
}
.philosophy-img img { border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.sub-heading {
    font-size: 2rem; margin-bottom: 30px; font-family: var(--font-jp);
    border-left: 5px solid var(--color-accent); padding-left: 20px;
}

.owner-message-block {
    display: grid; grid-template-columns: 1.5fr 1fr; gap: 50px;
    background: #fff; padding: 50px; border-radius: 8px; align-items: center;
}
.om-text h3 {
    font-size: 1.8rem; margin-bottom: 20px; font-family: var(--font-jp); color: var(--color-accent);
}
.om-img img { border-radius: 50%; border: 5px solid #f9f9f9; }

/* Reservation Rules */
.reservation-rules { background-color: #f4f4f4; }
.rules-header { text-align: center; margin-bottom: 50px; }
.rules-header h2 { font-size: 2.2rem; margin-bottom: 10px; font-family: var(--font-jp); }
.rules-header .subtitle { font-size: 1.1rem; font-weight: bold; }

.rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.rule-box {
    background: #fff; border-radius: 8px; overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.rule-title {
    padding: 15px; text-align: center; font-size: 1.3rem; font-weight: bold; color: #fff;
}
.rule-box.weekend .rule-title { background-color: var(--color-accent); }
.rule-box.weekday .rule-title { background-color: #2c3e50; }
.rule-content { padding: 30px; }
.rule-content .highlight {
    font-weight: bold; font-size: 1.1rem; text-align: center;
    margin-bottom: 20px; border-bottom: 1px dashed #ddd; padding-bottom: 15px;
}
.rule-content ul { list-style: none; padding: 0; margin-bottom: 20px; }
.rule-content ul li {
    position: relative; padding-left: 1.2em; margin-bottom: 10px; font-size: 0.95rem;
}
.rule-content ul li::before { content: "・"; position: absolute; left: 0; color: #ccc; }
.cancellation {
    text-align: center; border: 2px solid var(--color-accent); color: var(--color-accent);
    padding: 10px; font-weight: bold; border-radius: 4px;
}
.important-note {
    text-align: center; margin-top: 30px; color: #e74c3c; font-weight: bold;
}

/* CTA Area & Buttons */
.cta-area { text-align: center; margin-top: 50px; }
.cta-buttons {
    display: flex; justify-content: center; align-items: center;
    gap: 30px; flex-wrap: wrap;
}
.cta-note { text-align: center; color: var(--color-accent); font-weight: bold; margin-bottom: 20px; }

.btn-box.large {
    background: var(--color-accent); color: #fff; border: none;
    padding: 20px 60px; font-size: 1.2rem; box-shadow: 0 10px 20px rgba(178, 34, 34, 0.3);
}
.btn-box.large:hover { background: #a01e1e; transform: translateY(-2px); }

.btn-box.outline {
    background: #fff; border: 2px solid var(--color-accent); color: var(--color-accent);
    padding: 18px 40px; font-size: 1.1rem; font-weight: bold; box-shadow: none;
}
.btn-box.outline:hover {
    background: var(--color-accent); color: #fff;
    transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Attention Button (Red) */
.btn-box.attention-link {
    display: block; width: 100%; background-color: #d35400; color: #fff;
    font-size: 1.2rem; font-weight: bold; border: none;
    margin-top: 20px; padding: 20px; text-align: center;
    border-radius: 4px; box-shadow: 0 4px 10px rgba(211, 84, 0, 0.3);
    transition: all 0.3s;
}
.btn-box.attention-link:hover {
    background-color: #e67e22; transform: translateY(-2px); color: #fff;
}

/* Intro Box */
.attention-box {
    margin-top: 30px; padding: 20px; border: 1px solid var(--color-accent);
    background: #fff; border-radius: 4px;
}
.attention-box p { margin-bottom: 10px; font-weight: bold; }
.attention-box .btn-text {
    color: var(--color-accent); border-color: var(--color-accent); margin-top: 10px;
}
.attention-box .btn-text:hover { background: var(--color-accent); color: #fff; }

/* Menu Section */
.menu-section { border-bottom: 1px solid #ddd; }
.menu-section.bg-gray { background-color: #f9f9f9; }
.menu-section.premium-bg { background-color: #111; color: #fff; }

.menu-category-header { text-align: center; margin-bottom: 60px; }
.menu-category-header .en {
    display: block; font-family: var(--font-en); letter-spacing: 0.1em;
    color: var(--color-accent); margin-bottom: 10px;
}
.menu-category-header.gold .en { color: #d4af37; }
.menu-category-header h2 { font-size: 2.5rem; font-family: var(--font-jp); margin-bottom: 15px; }
.menu-category-header .note { font-size: 0.9rem; opacity: 0.8; }

/* Menu Grid System */
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.menu-grid.two-col { grid-template-columns: repeat(2, 1fr); max-width: 1000px; margin: 0 auto; }

/* Menu Item (Vertical) */
.menu-item {
    background: #fff; border-radius: 8px; overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s;
}
.menu-item:hover { transform: translateY(-5px); }
.menu-thumb { height: 250px; overflow: hidden; }
.menu-item.large .menu-thumb { height: 350px; }
.menu-thumb img {
    width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s;
}
.menu-item:hover .menu-thumb img { transform: scale(1.05); }

.menu-detail { padding: 20px; }
.menu-detail h3 {
    font-size: 1.3rem; font-family: var(--font-jp); margin-bottom: 10px;
    border-bottom: 1px solid #eee; padding-bottom: 10px;
}
.menu-detail .price {
    font-size: 1.2rem; color: var(--color-accent); font-family: var(--font-en);
    font-weight: bold; margin-bottom: 10px;
}
.menu-detail .price .tax { font-size: 0.8rem; color: #666; font-weight: normal; }
.menu-detail .desc { font-size: 0.9rem; line-height: 1.6; color: #444; }

/* Course Card (Horizontal) */
.menu-item-card {
    display: flex; gap: 40px; margin-bottom: 60px;
    background: #fff; padding: 30px; border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.menu-item-card.reverse { flex-direction: row-reverse; }

.menu-img { flex: 1; overflow: hidden; border-radius: 4px; height: 350px; }
.menu-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.menu-item-card:hover .menu-img img { transform: scale(1.05); }

.menu-info { flex: 1.2; display: flex; flex-direction: column; justify-content: center; }
.menu-header { border-bottom: 1px solid #ddd; padding-bottom: 15px; margin-bottom: 20px; }
.menu-title { font-size: 1.8rem; font-family: var(--font-jp); margin-bottom: 10px; }
.menu-title .tag {
    font-size: 0.9rem; background: #333; color: #fff; padding: 3px 10px;
    border-radius: 3px; margin-left: 15px; vertical-align: middle;
}
.menu-price { font-size: 1.5rem; font-weight: bold; color: var(--color-accent); }
.menu-price .tax { font-size: 0.9rem; color: #666; font-weight: normal; margin-left: 5px; }

.menu-desc { margin-bottom: 20px; font-size: 0.95rem; line-height: 1.8; }
.cooking-methods { margin-bottom: 20px; }
.cooking-methods span {
    display: inline-block; border: 1px solid #ccc; padding: 2px 10px;
    border-radius: 20px; font-size: 0.85rem; margin-right: 5px; margin-bottom: 5px;
}
.menu-details { list-style: none; padding: 0; background: #f4f4f4; padding: 15px; border-radius: 4px; }
.menu-details li { margin-bottom: 5px; font-size: 0.9rem; }
.menu-details li::before { content: "● "; color: var(--color-accent); }

/* Premium List Block */
.menu-list-block {
    background: rgba(255,255,255,0.05); padding: 40px; border: 1px solid #333;
    margin-bottom: 60px; border-radius: 4px;
}
.menu-list-block h3 { font-size: 1.8rem; font-family: var(--font-jp); margin-bottom: 15px; color: #d4af37; }
.menu-list-block .tag { font-size: 0.8rem; border: 1px solid #d4af37; padding: 2px 8px; margin-left: 10px; color: #fff; }
.block-desc { margin-bottom: 30px; opacity: 0.8; }

.price-list { display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px; }
.price-row {
    display: flex; justify-content: space-between; border-bottom: 1px dashed #555; padding-bottom: 5px;
}
.price-row .name { font-weight: bold; font-size: 1.1rem; }
.price-row .price { font-family: var(--font-en); font-size: 1.2rem; }
.price-row .price small { font-size: 0.8rem; opacity: 0.7; }
.content-note { font-size: 0.9rem; color: #999; margin-top: 5px; }

/* Kiwami Section */
.kiwami-section { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.kiwami-img img { border-radius: 4px; box-shadow: 0 0 20px rgba(212, 175, 55, 0.2); }
.kiwami-item { margin-bottom: 40px; }
.kiwami-item h3 { font-size: 1.5rem; color: #fff; margin-bottom: 10px; font-family: var(--font-jp); }
.kiwami-item .tag {
    font-size: 0.8rem; background: #d4af37; color: #000; padding: 2px 8px;
    margin-left: 10px; vertical-align: middle; font-weight: bold;
}
.kiwami-item .price { font-size: 1.3rem; color: #d4af37; margin-bottom: 10px; }
.kiwami-item.gold-border {
    border: 1px solid #d4af37; padding: 20px; border-radius: 4px; background: rgba(212, 175, 55, 0.05);
}

/* 2-Column Layout for A la Carte & Seiko */
.menu-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.col-title {
    font-size: 2rem; border-bottom: 2px solid var(--color-accent);
    padding-bottom: 10px; margin-bottom: 30px; font-family: var(--font-jp);
}
.col-title .sub { font-size: 1rem; color: #999; font-family: var(--font-en); margin-left: 10px; }

.food-gallery { display: flex; gap: 10px; margin-bottom: 20px; }
.food-gallery img { width: 32%; height: 100px; object-fit: cover; border-radius: 4px; }

.price-box { background: #fff; padding: 20px; border: 1px solid #eee; margin-bottom: 20px; }
.price-box .price-title { font-weight: bold; margin-bottom: 5px; }
.price-box .price-val { font-size: 1.2rem; color: var(--color-accent); font-family: var(--font-en); margin-bottom: 10px; }
.price-box hr { border: 0; border-top: 1px dashed #ddd; margin: 15px 0; }

.set-option { background: #fdfdfd; padding: 15px; border-left: 4px solid #ccc; font-size: 0.9rem; }
.set-option p { margin-bottom: 10px; }

.seiko-img { height: 250px; overflow: hidden; border-radius: 4px; margin-bottom: 20px; }
.seiko-img img { width: 100%; height: 100%; object-fit: cover; }
.desc-text { margin-bottom: 20px; text-align: justify; }

/* Simple List Style (Singles & Drinks) */
.simple-menu-list {
    background: #fff; padding: 30px; border-radius: 8px; border: 1px solid #eee;
}
.list-group { margin-bottom: 30px; }
.list-group h4 {
    font-size: 1.1rem; color: var(--color-accent); margin-bottom: 15px;
    border-left: 3px solid var(--color-accent); padding-left: 10px;
}
.list-item {
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 1px dashed #ddd; padding: 10px 0; flex-wrap: wrap;
}
.list-item .name { font-weight: bold; color: #333; }
.list-item .price { font-family: var(--font-en); font-weight: bold; }
.list-item .sub-desc { width: 100%; font-size: 0.85rem; color: #666; margin-top: 5px; }
.list-item.highlight { background-color: #fffaf0; padding: 10px; border: 1px solid #ffe4b5; }
.drink-note { font-size: 0.85rem; color: #e74c3c; margin-top: 20px; font-weight: bold; }

.price-list.simple .price-row { border-bottom: 1px solid #eee; padding: 10px 0; }

/* Seasonal Specifics */
.section-intro-text { text-align: center; max-width: 800px; margin: 0 auto 50px; line-height: 1.8; }
.alacarte-block {
    margin-top: 60px; background: #fff; padding: 40px;
    border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.block-title {
    text-align: center; font-size: 1.8rem; font-family: var(--font-jp);
    margin-bottom: 30px; border-bottom: 1px dashed #ddd; padding-bottom: 15px;
}
.menu-detail.center { text-align: center; }
.center-box { text-align: center; margin-top: 30px; }
.menu-grid .menu-item { background: #fff; }

/* =========================================
   15. Souvenir Page Styles
   ========================================= */
.souvenir-intro-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 60px;
}
.intro-item {
    background: #fff; border-radius: 8px; overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); transition: transform 0.3s;
}
.intro-item:hover { transform: translateY(-5px); }
.item-img { height: 250px; overflow: hidden; }
.item-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.intro-item:hover .item-img img { transform: scale(1.05); }

.item-text { padding: 25px; }
.item-text h3 {
    font-size: 1.3rem; font-family: var(--font-jp); margin-bottom: 15px; color: var(--color-accent);
}
.item-text p { font-size: 0.9rem; line-height: 1.7; color: #444; }

.delivery-list {
    display: flex; flex-direction: column; gap: 40px; max-width: 1000px; margin: 0 auto;
}
.delivery-item {
    display: flex; gap: 40px; background: #fff; padding: 30px;
    border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); align-items: center;
}
.del-img { flex: 0 0 300px; height: 250px; overflow: hidden; border-radius: 4px; }
.del-img img { width: 100%; height: 100%; object-fit: cover; }
.del-info { flex: 1; }
.del-title {
    font-size: 1.5rem; font-family: var(--font-jp); margin-bottom: 15px;
    border-left: 4px solid var(--color-accent); padding-left: 15px;
}
.del-desc { margin-bottom: 20px; line-height: 1.8; }
.del-price-box {
    background: #f9f9f9; padding: 15px; border-radius: 4px; border: 1px dashed #ccc;
}
.del-price-box .size { font-weight: bold; font-size: 1.1rem; margin-bottom: 5px; }
.price-single {
    font-size: 1.3rem; font-weight: bold; color: var(--color-accent); font-family: var(--font-en);
}
.price-single .tax { font-size: 0.8rem; color: #666; font-weight: normal; margin-left: 5px; }

/* =========================================
   16. Info Page Styles
   ========================================= */
.seat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.seat-card {
    background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.seat-img { height: 250px; overflow: hidden; }
.seat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.seat-card:hover .seat-img img { transform: scale(1.05); }
.seat-content { padding: 25px; }
.seat-content h3 {
    font-size: 1.3rem; font-family: var(--font-jp); margin-bottom: 15px;
    border-bottom: 1px solid #eee; padding-bottom: 10px;
}
.seat-content .tag {
    font-size: 0.8rem; background: var(--color-accent); color: #fff;
    padding: 2px 8px; border-radius: 4px; margin-left: 10px; vertical-align: middle;
}
.seat-content p { font-size: 0.95rem; line-height: 1.7; color: #444; }

.access-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.access-text h3 {
    font-size: 2rem; font-family: var(--font-jp); margin-bottom: 30px;
    border-left: 5px solid var(--color-accent); padding-left: 20px;
}
.info-list { margin-bottom: 40px; }
.info-list dt { font-weight: bold; margin-top: 15px; border-bottom: 2px solid #eee; padding-bottom: 5px; width: fit-content; }
.info-list dd { margin-bottom: 15px; margin-left: 0; padding-top: 5px; }
.access-map iframe { border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); }

/* =========================================
   17. Access & Bus Tour Styles
   ========================================= */
.access-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 50px; align-items: start; }
.access-map-img img { border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); border: 5px solid #fff; }
.route-box { margin-bottom: 40px; border-left: 4px solid #ddd; padding-left: 20px; }
.route-box h3 { font-size: 1.2rem; margin-bottom: 10px; color: var(--color-accent); }
.route-box p { font-size: 0.95rem; line-height: 1.8; }
.google-map-embed iframe { border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

.bus-info-box {
    background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.bus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-bottom: 40px; }
.bus-text h3, .bus-schedule h3 {
    font-size: 1.3rem; border-bottom: 2px solid var(--color-accent);
    padding-bottom: 10px; margin-bottom: 20px; font-family: var(--font-jp);
}
.bus-list { list-style: disc; padding-left: 20px; margin-bottom: 30px; }
.bus-list li { margin-bottom: 8px; font-size: 0.95rem; }

.contact-box {
    background: #fdfdfd; border: 1px solid #eee; padding: 20px; text-align: center; border-radius: 4px;
}
.contact-box .tel {
    font-size: 1.2rem; font-weight: bold; color: var(--color-accent); margin: 10px 0;
}
.contact-box .small { font-size: 0.85rem; color: #666; }

.schedule-row {
    margin-bottom: 25px; background: #f4f4f4; padding: 15px; border-radius: 4px;
}
.schedule-row h4 { font-size: 1rem; margin-bottom: 5px; color: #333; }
.schedule-row p { font-size: 0.9rem; line-height: 1.6; }
.bus-stop-info {
    font-size: 0.9rem; margin-top: 20px; padding-top: 20px; border-top: 1px dashed #ddd;
}

/* =========================================
   18. Contact Page Styles
   ========================================= */
.contact-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 80px; }
.method-box {
    background: #fff; padding: 50px 30px; border-radius: 8px; text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); border-top: 5px solid var(--color-accent);
}
.method-box h3 { margin-bottom: 20px; }
.method-box h3 .en { display: block; font-size: 1.5rem; color: var(--color-accent); margin-bottom: 5px; }
.method-box h3 .ja { font-size: 1.2rem; font-weight: bold; }
.method-box p { margin-bottom: 30px; color: #666; }

.phone-link {
    display: block; font-size: 2.5rem; font-family: var(--font-en); color: #333;
    font-weight: bold; margin-bottom: 20px; transition: color 0.3s;
}
.phone-link:hover { color: var(--color-accent); }
.phone-note {
    font-size: 0.85rem; text-align: left; background: #f9f9f9;
    padding: 15px; border-radius: 4px; line-height: 1.6;
}

.reservation-notes {
    max-width: 900px; margin: 0 auto; background: #fff;
    padding: 50px; border-radius: 8px; border: 1px solid #ddd;
}
.note-title {
    text-align: center; font-size: 1.5rem; margin-bottom: 40px;
    font-family: var(--font-jp); border-bottom: 1px solid #eee; padding-bottom: 20px;
}
.season-block { margin-bottom: 40px; }
.season-block:last-child { margin-bottom: 0; }
.season-block h4 {
    font-size: 1.2rem; color: var(--color-accent); margin-bottom: 15px;
    background: #fcfcfc; padding: 10px; border-left: 4px solid var(--color-accent);
}
.note-content { padding-left: 15px; }
.note-content p { margin-bottom: 15px; line-height: 1.8; }
.note-content .red { color: #e74c3c; font-weight: bold; }
.note-list { margin-top: 15px; padding-left: 20px; list-style: disc; }
.note-list li { margin-bottom: 5px; font-size: 0.95rem; color: #555; }

/* =========================================
   19. Footer & Floating Action Button
   ========================================= */
.footer { background: #000; color: #fff; padding: 100px 20px; text-align: center; }
.footer-logo img { width: 200px; margin: 0 auto; } /* ロゴサイズ固定 */

.fab-container { position: fixed; bottom: 30px; right: 30px; z-index: 90; }
.fab-book {
    display: flex; justify-content: center; align-items: center;
    width: 100px; height: 100px; background: var(--color-accent); color: #fff;
    border-radius: 50%; font-size: 0.9rem; font-weight: 600;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); transition: transform 0.3s; text-align: center;
}
.fab-book:hover { transform: scale(1.1); }

/* =========================================
   20. Media Queries (Responsive)
   ========================================= */
@media (max-width: 768px) {
    .header { padding: 20px; }
    
    /* Grid Resets for Mobile */
    .intro-grid, .souvenir-layout, .info-grid, .staff-gallery,
    .philosophy-grid, .owner-message-block, .rules-grid, .kiwami-section, .menu-grid-2col,
    .menu-grid, .menu-grid.two-col, .cuisine-gallery, .cuisine-content-grid,
    .souvenir-intro-grid, .seat-grid, .access-wrapper, .access-grid, .bus-grid, .contact-methods {
        grid-template-columns: 1fr;
    }
    
    /* Spacing & Order Adjustments */
    .intro-grid, .souvenir-layout, .info-grid { gap: 40px; }
    .philosophy-grid, .owner-message-block, .rules-grid { gap: 30px; }
    .menu-grid-2col, .kiwami-section { gap: 40px; }
    .cuisine-content-grid.reverse, .story-grid.reverse { direction: ltr !important; }
    
    .access-map, .access-map-img { order: -1; margin: 0 auto; max-width: 100%; }
    .om-img { order: -1; width: 200px; margin: 0 auto; }
    
    .owner-message-block, .reservation-notes, .bus-info-box { padding: 30px 20px; }
    
    .cuisine { height: auto; display: block; padding: 50px 0; }
    .cuisine-wrapper { flex-direction: column; padding: 20px; gap: 40px; width: 100%; }
    .cuisine-panel.item-panel { width: 100%; min-width: auto; }
    
    .card-img, .menu-img, .gallery-item, .gallery-item.large, .cuisine-img-side, .menu-thumb, .menu-item.large .menu-thumb { height: 300px; }
    
    .vertical-title { writing-mode: horizontal-tb; font-size: 3rem; }
    
    /* Souvenir Mobile */
    .delivery-item { flex-direction: column; gap: 20px; padding: 20px; }
    .del-img { width: 100%; flex: 0 0 200px; }
    
    .cta-buttons { gap: 20px; flex-direction: column; }
    .btn-box.outline, .btn-box.large { width: 100%; max-width: 350px; }
    .period-box { flex-direction: column; gap: 15px; }
    
    .message-wrapper { padding: 30px; }
    .message-img { width: 200px; height: 200px; }
    .signature { text-align: center; margin-top: 30px; }
    .phone-link { font-size: 2rem; }
}