@charset "UTF-8";

/* =========================================
   1. 変数定義 (Variables) & ベース設定
========================================= */
:root {
    --color-bg: #0a1128;
    --color-surface: rgba(15, 23, 42, 0.75);
    --color-gold: #d4af37;
    --color-gold-hover: #f1c40f;
    --color-silver: #E0E0E0;
    --color-text-main: #E0E0E0;
    --font-heading: 'Cormorant Garamond', 'Noto Serif JP', serif;
    --font-body: 'Noto Serif JP', serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background-color: var(--color-bg); color: var(--color-text-main); font-family: var(--font-body); line-height: 1.6; overflow-x: hidden; }

.container { width: 90%; max-width: 1000px; margin: 0 auto; }
.section-padding { padding: 80px 0; }
.section-title { color: var(--color-gold); font-family: var(--font-heading); font-size: 2.5rem; text-align: center; margin-bottom: 40px; letter-spacing: 0.1em; }
.glass-panel { background: var(--color-surface); border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 12px; backdrop-filter: blur(10px); padding: 30px; box-shadow: 0 15px 30px rgba(0,0,0,0.5); }
.btn-gold { display: inline-block; background: linear-gradient(135deg, #d4af37, #f1c40f); color: #0a1128; font-weight: bold; text-decoration: none; padding: 15px 30px; border-radius: 30px; text-align: center; transition: transform 0.3s, box-shadow 0.3s; border: none; cursor: pointer; white-space: nowrap; }
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(212, 175, 55, 0.4); }

/* =========================================
   2. ヘッダー (PC)
========================================= */
.site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 10px 0; backdrop-filter: blur(10px); background: rgba(10, 17, 40, 0.9); border-bottom: 1px solid rgba(212, 175, 55, 0.2); }
.header-inner { display: flex; justify-content: space-between; align-items: center; }
.logo a { display: flex; align-items: center; text-decoration: none; gap: 15px; }
.logo img { height: 45px; width: auto; max-width: 100%; object-fit: contain; }
.logo-text { color: var(--color-silver); font-family: var(--font-heading); font-weight: bold; display: flex; flex-direction: column; }
.logo-nemuri { font-size: 1.2rem; letter-spacing: 0.1em; }
.logo-honten { font-size: 0.85rem; opacity: 0.8; letter-spacing: 0.05em; }

.global-nav ul { list-style: none; display: flex; gap: 20px; }
.global-nav a { text-decoration: none; color: var(--color-gold); font-weight: bold; transition: 0.3s; }
.global-nav a:hover { color: var(--color-silver); }

.header-right-actions { display: flex; align-items: center; gap: 20px; }

/* 世界標準の言語セレクトボックス (<select>) */
.lang-selector-select { display: flex; align-items: center; position: relative; border: 1px solid var(--color-gold); background: transparent; padding: 8px 12px; color: var(--color-gold); font-size: 0.9rem; border-radius: 4px; }
.lang-selector-select .globe-icon { margin-right: 8px; font-size: 1rem; }
.lang-selector-select .arrow-icon { margin-left: 8px; font-size: 0.8rem; pointer-events: none; }
.lang-selector-select select { appearance: none; -webkit-appearance: none; background: transparent; border: none; color: inherit; font-family: inherit; font-size: inherit; font-weight: bold; padding: 0; margin: 0; cursor: pointer; outline: none; z-index: 2; padding-right: 5px; }
.lang-selector-select select option { background: var(--color-bg); color: var(--color-gold); }

/* 言語切り替え無効ページ用の固定表示（例：recruit.php） */
.lang-selector-static { display: flex; align-items: center; border: 1px solid var(--color-gold); background: transparent; padding: 8px 12px; color: var(--color-gold); font-size: 0.9rem; font-weight: bold; border-radius: 4px; cursor: default; white-space: nowrap; }
.lang-selector-static .globe-icon { margin-right: 8px; font-size: 1rem; }

.hamburger-menu { display: none; cursor: pointer; z-index: 100000; width: 30px; height: 20px; position: relative; }
.hamburger-menu span { display: block; position: absolute; width: 100%; height: 2px; background: var(--color-gold); transition: 0.3s; }
.hamburger-menu span:nth-child(1) { top: 0; }
.hamburger-menu span:nth-child(2) { top: 9px; }
.hamburger-menu span:nth-child(3) { bottom: 0; }
.hamburger-menu.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger-menu.open span:nth-child(2) { opacity: 0; }
.hamburger-menu.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* =========================================
   3. 各セクション
========================================= */
.hero, .main-content { margin-top: 80px; }
.hero { height: 70vh; min-height: 500px; display: flex; align-items: center; justify-content: center; position: relative; background-color: #050a18; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 17, 40, 0.4); }
.hero-content { position: relative; z-index: 10; text-align: center; padding: 20px; }
.hero-catchphrase { font-family: var(--font-heading); font-size: 3rem; color: #fff; margin-bottom: 30px; line-height: 1.5; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }

/* ---- コンパクト版hero（staffs.php等、見出し直下からすぐコンテンツを始めたいページ用） ---- */
.hero-compact { height: auto; min-height: 0; padding: 90px 20px 28px; }
.hero-compact .hero-catchphrase { margin-bottom: 10px; }

.concept-text p { margin-bottom: 15px; font-size: 1.1rem; text-align: center; }
.concept-slider { margin-top: 40px; border-radius: 12px; overflow: hidden; height: max-content !important; padding-bottom: 30px; }
.concept-slider .swiper-slide { height: auto; }
.concept-slider .swiper-slide img { width: 100%; height: 350px; object-fit: cover; border-radius: 8px; display: block; }
.concept-slider .swiper-pagination { bottom: 5px !important; }

.menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.menu-card { padding: 25px; transition: transform 0.3s; }
.menu-card:hover { transform: translateY(-5px); }
.menu-desc {
    font-size: 0.85rem;
    color: rgba(224, 224, 224, 0.65);
    line-height: 1.75;
    letter-spacing: 0.02em;
    margin-bottom: 14px;
}
.menu-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 0; border-top: 1px solid rgba(212, 175, 55, 0.2); padding-top: 15px; }
.menu-price { color: var(--color-gold); font-size: 1.3rem; font-weight: bold; }
.menu-price-block { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.price-main { color: var(--color-gold); font-size: 1.3rem; font-weight: bold; letter-spacing: 0.02em; }

.line-cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; margin-top: 48px; padding: 36px 28px; }
.line-cta-text { color: var(--color-silver); font-size: 0.95rem; line-height: 1.7; letter-spacing: 0.03em; }
.line-cta-btn { display: inline-flex; align-items: center; gap: 10px; background: #06c755; color: #fff; font-size: 0.95rem; font-weight: 700; padding: 14px 32px; border-radius: 50px; text-decoration: none; letter-spacing: 0.04em; transition: opacity 0.2s, transform 0.2s; box-shadow: 0 4px 16px rgba(6,199,85,0.3); }
.line-cta-btn:hover { opacity: 0.88; transform: translateY(-2px); }

.access-content { text-align: center; }
.address { font-size: 1.2rem; margin-bottom: 20px; }
.map-placeholder { border-radius: 12px; overflow: hidden; margin-bottom: 30px; border: 1px solid rgba(212, 175, 55, 0.2); }
.store-info { display: flex; flex-direction: column; align-items: flex-start; }
.store-info p { margin-bottom: 10px; font-size: 1.1rem; }
.info-row { display: flex; align-items: flex-start; gap: 14px; width: 100%; max-width: 460px; text-align: left; }
/* 決済方法・アクセスは文言が長く460px制限だと不自然に折り返されるため、画面に余裕がある分だけ幅を広げる */
.info-row--wide { max-width: 640px; }
.info-label { color: var(--color-gold); flex: 0 0 100px; text-align: left; }
.info-value { flex: 1; line-height: 1.8; }
.access-note { font-size: 0.9rem; color: var(--color-silver); opacity: 0.85; margin-top: -4px; max-width: 460px; text-align: left; }

.access-directions {
    text-align: left;
    margin-top: 24px;
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
.access-directions summary {
    cursor: pointer;
    list-style: none;
    padding: 14px 20px;
    color: var(--color-gold);
    font-weight: bold;
    font-size: 0.98rem;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s;
}
.access-directions summary:hover { background: rgba(212, 175, 55, 0.08); }
.access-directions summary::-webkit-details-marker { display: none; }
.access-directions summary::after {
    content: '＋';
    font-size: 1.1rem;
    color: var(--color-gold);
    margin-left: 12px;
    transition: transform 0.25s;
}
.access-directions[open] summary::after { content: '－'; }
.access-directions-body {
    padding: 4px 20px 20px;
    border-top: 1px solid rgba(212, 175, 55, 0.15);
}
.access-directions-item { margin-top: 16px; }
.access-directions-item h4 {
    color: var(--color-silver);
    font-size: 0.95rem;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}
.access-directions-item p {
    color: var(--color-silver);
    opacity: 0.85;
    font-size: 0.88rem;
    line-height: 1.8;
}

/* =========================================
   3b. FAQ（よくある質問）
========================================= */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
    text-align: left;
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
.faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 22px;
    color: var(--color-gold);
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: background 0.2s;
}
.faq-item summary:hover { background: rgba(212, 175, 55, 0.08); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-q-mark { flex-shrink: 0; }
.faq-item summary .faq-q-text { flex: 1; }
.faq-item summary::after {
    content: '＋';
    font-size: 1.1rem;
    color: var(--color-gold);
    flex-shrink: 0;
    transition: transform 0.25s;
}
.faq-item[open] summary::after { content: '－'; }
.faq-item .faq-answer {
    padding: 0 22px 20px 56px;
    color: var(--color-silver);
    opacity: 0.85;
    font-size: 0.92rem;
    line-height: 1.8;
    border-top: 1px solid rgba(212, 175, 55, 0.15);
    padding-top: 14px;
}
@media (max-width: 768px) {
    .faq-item summary { font-size: 0.92rem; padding: 14px 16px; }
    .faq-item .faq-answer { font-size: 0.85rem; padding-left: 16px; padding-right: 16px; }
}

/* =========================================
   4. フォーム・ポリシー・フッター (★ここが重要：完全復元版)
========================================= */
.form-container { max-width: 800px; margin: 0 auto; padding: 40px 20px; }
.form-group { margin-bottom: 30px; }
.form-group label { display: block; margin-bottom: 10px; color: var(--color-gold); font-size: 1.1rem; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 15px; background: rgba(10, 17, 40, 0.85); border: 1px solid rgba(212, 175, 55, 0.4); border-radius: 8px; color: var(--color-text-main); font-size: 1rem; font-family: inherit; }
.form-group textarea { resize: vertical; min-height: 120px; }

.policy-block { margin-bottom: 30px; text-align: left; }
.policy-block h3 { color: var(--color-gold); font-size: 1.2rem; margin-bottom: 15px; border-bottom: 1px solid rgba(212, 175, 55, 0.3); padding-bottom: 5px; }
.policy-block ul { list-style: none; padding-left: 10px; }
.policy-block li { position: relative; padding-left: 15px; margin-bottom: 10px; font-size: 0.95rem; line-height: 1.6; }
.policy-block li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; background-color: var(--color-gold); transform: rotate(45deg); border-radius: 1px; }

.site-footer { background: #050a18; padding: 40px 0 20px; text-align: center; border-top: 1px solid rgba(212, 175, 55, 0.2); }
.footer-logo { font-family: var(--font-heading); color: var(--color-gold); font-size: 1.5rem; margin-bottom: 15px; display: inline-block; text-decoration: none; }
.footer-links { list-style: none; display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.footer-links a { color: var(--color-silver); text-decoration: none; transition: 0.3s; }
.footer-links a:hover { color: var(--color-gold); }
.copyright { color: rgba(224, 224, 224, 0.5); font-size: 0.85rem; }

/* =========================================
   5. アニメーション & 追従ボタン (案1：洗練されたロード演出)
========================================= */
#initial-loading { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: #050a18; /* 背景を深いネイビーに固定 */
    z-index: 999999; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    /* 消え方をより滑らかに（1.2秒かけて透過させる） */
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.2s; 
}
#initial-loading.hidden { opacity: 0; visibility: hidden; }

/* ロゴ専用：静かに浮き上がり、拡大しながら霧に消えるアニメーション */
@keyframes refinedFadeIn {
    0% { opacity: 0; transform: scale(0.95); filter: blur(10px); } /* 最初はぼかして小さく */
    50% { opacity: 1; transform: scale(1); filter: blur(0); }       /* 中盤でくっきり */
    100% { opacity: 0; transform: scale(1.05); filter: blur(5px); } /* 最後は少し大きくして消える */
}

.popup-logo { 
    width: 180px; /* 少しだけ大きく表示 */
    animation: refinedFadeIn 2.5s ease-in-out forwards; /* 1回だけ優雅に実行 */
}

/* pulseクラスは互換性のために残す（中身を空にするか、上記アニメーションを適用） */
.pulse { animation: none; }

[data-aos] { opacity: 0; transition-property: opacity, transform; }
[data-aos="fade-up"] { transform: translateY(20px); }
[data-aos="fade-up"].aos-animate { opacity: 1; transform: translateY(0); }

.floating-reserve-btn { display: none; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 350px; z-index: 99998; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.8); animation: float-up 0.5s ease-out forwards; }
@keyframes float-up { from { bottom: -50px; opacity: 0; } to { bottom: 20px; opacity: 1; } }

/* =========================================
   6. モバイルレスポンシブ (★極限まで洗練させた1行ヘッダー)
========================================= */
@media (max-width: 768px) {
    .hero, .main-content { margin-top: 60px; } /* 1行になったので余白を詰める */
    .hero-catchphrase { font-size: 1.8rem; }

    .site-header { padding: 8px 0; }
    .header-inner { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 0 10px; }
    
    /* 左側：ロゴと店名（コンパクトに） */
    .logo { width: auto !important; margin: 0; }
    .logo a { gap: 6px !important; }
    .logo img { height: 32px !important; }
    .logo-text { display: flex; flex-direction: column; }
    .logo-nemuri { font-size: 1rem !important; line-height: 1.2; letter-spacing: 0; }
    .logo-honten { font-size: 0.65rem !important; line-height: 1.2; opacity: 0.9; }

    /* 右側：言語選択とハンバーガー */
    .header-right-actions { width: auto !important; justify-content: flex-end !important; gap: 10px !important; padding: 0; }
    
    .global-nav { display: none; margin-left: 0 !important; }
    .header-cta { display: none !important; }
    .hamburger-menu { display: block !important; margin-left: 5px !important; }
    .floating-reserve-btn { display: block; }
    
    /* 言語選択ボタンの極小化 */
    .lang-selector-select { padding: 4px 6px !important; font-size: 0.75rem !important; border-radius: 4px; }
    .lang-selector-select .globe-icon { margin-right: 4px !important; font-size: 0.8rem !important; }
    .lang-selector-select .arrow-icon { margin-left: 4px !important; font-size: 0.7rem !important; }
    .lang-selector-static { padding: 4px 6px !important; font-size: 0.75rem !important; border-radius: 4px; }
    .lang-selector-static .globe-icon { margin-right: 4px !important; font-size: 0.8rem !important; }

    /* フルスクリーンメニュー */
    .global-nav.open { display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(10, 17, 40, 0.98); flex-direction: column; justify-content: center; align-items: center; z-index: 100000; }
    .global-nav.open ul { flex-direction: column; align-items: center; gap: 35px; }
    .global-nav.open a { font-size: 1.5rem; }

    .concept-slider .swiper-slide img { height: 250px; }
    .form-container { padding: 30px 15px; }
}
/* =========================================
   ７．自動翻訳ウィジェット（Google翻訳等）の干渉対策
========================================= */
/* 翻訳ツールバーを強制非表示にし、クリックの妨害を防ぐ */
.skiptranslate > iframe.skiptranslate,
#goog-gt-tt {
    display: none !important;
    visibility: hidden !important;
}

/* ツールバーによる余計な余白（スクロールの原因）を打ち消す */
body {
    top: 0px !important;
}

/* =========================================
   ８．言語プルダウンのクリック領域の完全化（修正版）
========================================= */
/* コンテナの余白を消して、中身のselectを全画面に広げる準備 */
.lang-selector-select {
    padding: 0 !important; 
    overflow: hidden;
}

/* 選択ボックス自体を枠いっぱいに広げ、内側にアイコン用の余白を作る */
.lang-selector-select select {
    width: 100%;
    height: 100%;
    padding: 8px 28px 8px 32px !important; /* 上 右 下 左 の余白 */
    cursor: pointer;
    position: relative;
    z-index: 10;
}

/* 地球儀マークを左側に絶対配置し、クリックを貫通させる */
.lang-selector-select .globe-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none !important;
    margin: 0 !important;
    z-index: 15;
}

/* 矢印マークを右側に絶対配置し、クリックを貫通させる */
.lang-selector-select .arrow-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none !important;
    margin: 0 !important;
    z-index: 15;
}
/* =========================================
   ９．ストーリーセクション (パララックス効果)
========================================= */
.story-section { 
    position: relative; 
    padding: 120px 0; 
    margin: 60px 0;
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    min-height: 80vh; 
}
/* ★PC用の背景画像（デフォルト） */
.story-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('../images/background_pc.webp');  /* ←PC用を指定 */
    background-size: cover; background-position: center;
    background-attachment: fixed; /* パララックス */
    filter: brightness(0.5); /* 暗すぎる場合は0.5〜0.6に調整してください */
    z-index: 0;
}
.container.relative { position: relative; z-index: 1; width: 100%; }

.story-content {
    max-width: 800px; margin: 0 auto; text-align: center;
    padding: 60px 40px; 
    background: rgba(10, 17, 40, 0.7); /* 透けるネイビー */
    border-top: 1px solid rgba(212, 175, 55, 0.5);
    border-bottom: 1px solid rgba(212, 175, 55, 0.5);
    backdrop-filter: blur(8px);
}

.story-subtitle { 
    color: var(--color-gold); letter-spacing: 0.4em; font-size: 0.9rem; 
    text-transform: uppercase; display: block; margin-bottom: 20px; 
}
.story-title { 
    font-family: var(--font-heading); font-size: 2.2rem; color: #fff; 
    margin-bottom: 40px; line-height: 1.6; 
}
.story-text p { 
    font-size: 1.05rem; line-height: 2.2; color: #e0e0e0; 
    margin-bottom: 20px; text-align: justify; 
}
.story-signature { 
    margin-top: 40px; font-family: var(--font-heading); color: var(--color-gold); 
    font-size: 1.2rem; text-align: right; letter-spacing: 0.2em; 
}

@media (max-width: 768px) {
    .story-section { 
        /* スマホはカクつき防止のため固定を解除 */
        background-attachment: scroll; 
        padding: 80px 0; 
        min-height: auto;
    }
    /* ★追加：スマホ用の背景画像に上書きする */
    .story-bg {
        background-image: url('../images/background_cell.webp'); /* ←スマホ用を指定 */
    }
    
    .story-content { padding: 40px 20px; }
    .story-title { font-size: 1.8rem; }
    .story-text p { font-size: 0.95rem; }
}

/* =========================================
   10. ヘッダー横はみ出し完全防止 & ナビ横スクロール対応
   原因：fixed要素はbodyのoverflow-x:hiddenが効かない。
         flex子要素のmin-widthデフォルト(auto)で縮めない。
========================================= */

/* 【層1】ヘッダー最外殻：100vwを超えてはみ出した分をクリップ */
.site-header {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* 【スマホメニュー表示バグ修正】.site-headerはbackdrop-filterを持つため、
   position:fixedの子要素（.global-nav.open のフルスクリーンドロワー）にとって
   containing blockとなってしまい、overflow-x:hiddenの副作用（overflow-yがautoに
   computeされる仕様）で高さ100vhのドロワーが header の実高さ（数十px）でクリップされ、
   ハンバーガーアイコンはX字に切り替わるのにメニュー本体が見えない不具合が発生していた。
   ドロワーを開いている間（.site-header.nav-open）だけoverflowをvisibleに戻して回避する。 */
.site-header.nav-open {
    overflow: visible !important;
}

/* 【層2】.containerがヘッダー内にある場合は100%幅に制限 */
.site-header .container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* 【層3】header-innerのflex子要素が押し広げないよう制限 */
.header-inner {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* ロゴ：縮まないよう固定（shrink禁止） */
.logo {
    flex-shrink: 0 !important;
}

/* 右アクション群：縮まないよう固定 */
.header-right-actions {
    flex-shrink: 0 !important;
}

/* ナビ：残りスペースを占有しつつ、最小幅0まで縮めることを許可 */
.global-nav {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow-x: hidden !important; /* 外枠：ここではみ出しを抑制 */
    margin-left: 64px; /* ロゴとナビ最初の項目（ホーム）の間の余白（PC表示・広め） */
}

/* ナビのul：スクロールコンテナ本体 */
.global-nav ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    /* スクロールバーを視覚的に非表示（スワイプ操作は有効） */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-bottom: 2px !important;
}
.global-nav ul::-webkit-scrollbar {
    display: none !important;
}

/* ナビアイテム：縮み・折り返し禁止 */
.global-nav ul li {
    flex-shrink: 0 !important;
}
.global-nav a {
    white-space: nowrap !important;
}

/* =========================================
   11. スマホ向けフォントサイズ最適化
   （見出し・メニュー・店舗情報テーブル・道順アコーディオンが
     大きすぎて圧迫感が出ていたため、768px以下でのみ縮小する）
========================================= */
@media (max-width: 768px) {
    /* セクションタイトル（「メニュー」「アクセス・店舗情報」等） */
    .section-title { font-size: 1.6rem; margin-bottom: 28px; }

    /* メニューカード：カテゴリ見出し（h3・インラインstyleを上書き） */
    #menu h3 { font-size: 1.15rem !important; margin: 30px 0 16px !important; }

    /* メニューカード：コース名（h4.menu-name・インラインstyleを上書き） */
    .menu-name { font-size: 1.05rem !important; }

    /* メニューカード：説明文・料金 */
    .menu-desc { font-size: 0.78rem; }
    .menu-price, .price-main { font-size: 1.1rem; }

    /* 店舗情報（住所・電話番号・営業時間などのテーブル状レイアウト） */
    .address { font-size: 1rem; }
    .store-info p { font-size: 0.9rem; }
    .access-note { font-size: 0.8rem; }

    /* 道順アコーディオン */
    .access-directions summary { font-size: 0.88rem; padding: 12px 16px; }
    .access-directions-item h4 { font-size: 0.85rem; }
    .access-directions-item p { font-size: 0.8rem; }
}

/* =========================================
   12. 求人ページ (recruit.php)
========================================= */
.recruit-hero { background-image: url('../images/recruit/recruit_1.jpg'); background-size: cover; background-position: center; }
.recruit-hero .hero-overlay { background: linear-gradient(180deg, rgba(10,17,40,0.55), rgba(10,17,40,0.85)); }
.recruit-lead { font-size: 1.05rem; color: var(--color-silver); margin-top: 18px; line-height: 1.9; }

.job-badge-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.job-badge { display: inline-block; border: 1px solid var(--color-gold); color: var(--color-gold); font-size: 0.82rem; font-weight: bold; padding: 6px 16px; border-radius: 20px; letter-spacing: 0.03em; background: rgba(212, 175, 55, 0.08); }

/* 求人画像スライダー（Vanilla JS + CSS Scroll Snap／外部ライブラリ不使用） */
.recruit-slider { margin-top: 30px; }
.recruit-slider-header { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.recruit-slider-counter { display: inline-block; background: rgba(10, 17, 40, 0.75); color: var(--color-gold); border: 1px solid rgba(212, 175, 55, 0.4); border-radius: 20px; padding: 4px 14px; font-size: 0.85rem; font-weight: bold; letter-spacing: 0.03em; }

.recruit-slider-viewport { display: flex; align-items: center; gap: 10px; }

.recruit-slider-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.recruit-slider-track::-webkit-scrollbar { display: none; }

/* PC: 3枚並び（gap 16px × 2箇所ぶんを差し引いて等分） */
.recruit-slider-item { flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start; }
.recruit-slider-item img { width: 100%; height: 220px; object-fit: cover; border-radius: 10px; border: 1px solid rgba(212, 175, 55, 0.2); display: block; }

.recruit-slider-arrow { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-gold); background: rgba(10, 17, 40, 0.75); color: var(--color-gold); font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s, color 0.3s; }
.recruit-slider-arrow:hover { background: var(--color-gold); color: #0a1128; }

.recruit-block { margin-top: 60px; }
.recruit-block:first-child { margin-top: 0; }
.recruit-block-title { color: var(--color-gold); font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 20px; letter-spacing: 0.05em; border-bottom: 1px solid rgba(212, 175, 55, 0.3); padding-bottom: 10px; }
.recruit-text { font-size: 0.98rem; line-height: 1.9; color: var(--color-text-main); }
.recruit-note { font-size: 0.85rem; color: var(--color-silver); opacity: 0.8; margin-top: 14px; }

/* 1日の流れ（タイムライン） */
.timeline { position: relative; margin-top: 10px; padding-left: 28px; border-left: 2px solid rgba(212, 175, 55, 0.3); }
.timeline-item { position: relative; padding-bottom: 26px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ""; position: absolute; left: -34px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2); }
.timeline-time { color: var(--color-gold); font-weight: bold; font-size: 0.95rem; margin-bottom: 4px; }
.timeline-desc { color: var(--color-silver); font-size: 0.92rem; line-height: 1.7; }

/* 必須条件・歓迎条件（2カラム） */
.req-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 10px; }
.req-column-title { display: inline-block; color: #0a1128; background: var(--color-gold); font-size: 0.85rem; font-weight: bold; padding: 4px 14px; border-radius: 4px; margin-bottom: 14px; letter-spacing: 0.03em; }

/* 勤務条件・企業情報テーブル */
.info-block-list .info-row { max-width: none; margin-bottom: 16px; }
.info-block-list .info-row:last-child { margin-bottom: 0; }

/* 応募セクション */
.apply-section { text-align: center; }
/* 「1. WEB応募の場合:」「2. 電話応募の場合:」の行頭を揃えるため、
   親要素(text-align:center)の影響を受けないよう左揃えのブロックとして中央配置する */
.apply-steps { display: inline-block; text-align: left; max-width: 560px; }
.apply-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 28px; }
.btn-outline-gold { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--color-gold); font-weight: bold; text-decoration: none; padding: 15px 30px; border-radius: 30px; text-align: center; border: 1px solid var(--color-gold); transition: background 0.3s, color 0.3s; white-space: nowrap; }
.btn-outline-gold:hover { background: var(--color-gold); color: #0a1128; }
.apply-flow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 30px; font-size: 0.88rem; color: var(--color-silver); }
.apply-flow-step { background: rgba(212, 175, 55, 0.08); border: 1px solid rgba(212, 175, 55, 0.25); border-radius: 20px; padding: 8px 16px; }
.apply-flow-arrow { color: var(--color-gold); }

@media (max-width: 768px) {
    .recruit-block-title { font-size: 1.25rem; }
    .recruit-text { font-size: 0.9rem; }
    .req-columns { grid-template-columns: 1fr; }
    .apply-buttons { flex-direction: column; align-items: stretch; }
    .apply-flow { font-size: 0.8rem; }

    /* スマホ: 求人画像スライダーは1枚表示 */
    .recruit-slider-item { flex-basis: 100%; }
    .recruit-slider-item img { height: 200px; }
    .recruit-slider-arrow { width: 34px; height: 34px; font-size: 0.95rem; }
}

/* =========================================
   スタッフ紹介ページ (staffs.php)
========================================= */
.staff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 10px; }

/* カードは写真を最大限見せるため padding を持たず、overflow:hidden で
   角丸に沿って写真をクリップする。装飾的な太枠は使わず、box-shadowの
   奥行きだけで上品に浮き上がらせる */
.staff-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.staff-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.45); }

.staff-photo-wrap { margin-bottom: 0; line-height: 0; }
.staff-photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; border: none; }
.staff-photo-placeholder { width: 100%; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; background: rgba(212,175,55,0.12); color: var(--color-gold); font-family: var(--font-heading); font-size: 3rem; }

.staff-name { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 500; color: var(--color-silver); margin-bottom: 6px; letter-spacing: 0.08em; }
.staff-catchphrase { color: var(--color-gold); font-size: 0.92rem; margin-bottom: 18px; line-height: 1.7; font-style: italic; }

/* 「得意」「趣味」は dl/dt/dd の2カラムgridで整列させ、ラベルは控えめな
   白半透明にとどめて内容(白)とのコントラストで階層を作る */
.staff-meta-list { display: grid; grid-template-columns: max-content 1fr; column-gap: 14px; row-gap: 8px; width: 100%; margin: 0 0 18px; text-align: left; }
.staff-meta-label { margin: 0; color: rgba(255, 255, 255, 0.5); font-weight: normal; font-size: 0.72rem; letter-spacing: 0.05em; padding-top: 2px; }
.staff-meta-value { margin: 0; color: #ffffff; font-size: 0.88rem; line-height: 1.6; }

/* 長文の自己紹介はカードの高さを崩さないよう最大4行で省略(...) */
.staff-profile-text {
    font-size: 0.85rem;
    line-height: 1.9;
    color: var(--color-text-main);
    opacity: 0.85;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- staff-card-body に余白を集約し、flex化してカードの高さが揃う
   グリッド内でも「指名して予約する」ボタンを常に下端に揃える ---- */
.staff-card-body { display: flex; flex-direction: column; flex: 1; width: 100%; text-align: center; padding: 24px 24px 26px; }
.staff-card-actions { margin-top: auto; padding-top: 18px; width: 100%; }
.staff-nominate-btn { display: block; width: 100%; padding: 13px 20px; font-size: 0.95rem; }
.staff-nominate-fee { display: block; font-size: 0.72rem; font-weight: normal; margin-top: 4px; opacity: 0.85; }

@media (min-width: 768px) {
    /* PC表示: 余白をゆったり取り、高級感を演出 */
    .staff-card-body { padding: 32px; }
}

@media (max-width: 768px) {
    /* スマホ表示: 1行2名(さらに狭い画面は下の480pxブロックで1名に切り替え) */
    .staff-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 480px) {
    .staff-grid { grid-template-columns: 1fr; }
}