@charset "UTF-8";

/* ==========================================================================
   ★ デザイン設定（色・フォント）
   ========================================================================== */
:root {
    /* 背景色：より白く変更 (#fdfdfd -> #ffffff) */
    --bg-color: #ffffff;
    /* 文字色：少し明るめのダークグレーで柔らかく (#5e5c5a -> #555555) */
    --text-color: #555555;
    /* アクセント背景色：ほぼ白に近いグレー (#ebeae6 -> #f9f9f9) */
    --accent-gray: #f9f9f9;
    /* 線の色：非常に薄いグレー (#dcdad5 -> #e5e5e5) */
    --line-color: #e5e5e5;
}

/* 基本設定 */
html {
    scroll-behavior: smooth;
}
body {
    margin: 0; padding: 0;
    font-family: 'Cormorant Garamond', 'Shippori Mincho', serif;
    color: var(--text-color);
    background: var(--bg-color);
    line-height: 2;
    letter-spacing: 0.05em;
    overflow-x: hidden; /* 横スクロール防止 */
    width: 100%;
}
h1, h2, h3 { font-weight: 400; margin: 0; line-height: 1.2; }

.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 5%; 
    box-sizing: border-box;
}

/* ★ 追加：幅広コンテナ（Productsセクション用） */
.container-wide {
    max-width: 95%; /* PCでは画面幅の95%まで広げる */
    margin: 0 auto;
    padding: 0 2%;
    box-sizing: border-box;
}
/* タブレット以下では通常のコンテナと同じ余白感に調整 */
@media (max-width: 1024px) {
    .container-wide {
        padding: 0 5%;
    }
}

/* * ヒーローエリア 
   全画面表示の堅牢化：JSでpx固定するため、CSSは基本設定のみにする
 */
header {
    width: 100%;
    
    /* ★ 修正：JSで「px」指定して固定するため、CSSはフォールバックとして 100vh に戻します。
       JSが実行されると style="height: 〇〇px;" が付与され、スクロールによる変動がなくなります。 */
    height: 100vh;
    
    /* 横向きスマホなどで500px以下になることもあるため、固定のmin-heightは削除し、
       コンテンツが収まる範囲で柔軟に対応させる */
    min-height: auto;
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    
    /* 水面エフェクト用の背景設定 */
    /* CSSファイルからの相対パスなので ../img/ になります */
    background-image: url('../img/image8.jpg');
    background-size: cover;
    background-position: center;
    overflow: hidden;

    /* ★ 変更：ヘッダーの下の区切り線を削除 */
    border-bottom: none;
}

/* オーバーレイ */
header::before {
    content: '';
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    /* 背景色に合わせてオーバーレイも白く調整 */
    background: rgba(255, 255, 255, 0.3);
    z-index: 0;
    pointer-events: none;
}

/* ★ 中央の透明ボックススタイル */
.hero-box {
    /* レスポンシブなパディング調整 */
    padding: clamp(30px, 5vw, 60px) clamp(30px, 6vw, 80px);
    
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    
    /* アニメーション設定 */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    /* 画面幅が極端に狭い場合の安全策 */
    max-width: 90%;
    max-height: 90vh; /* コンテンツが画面からはみ出さないよう制限 */
    overflow: hidden; /* はみ出し防止 */
    
    /* 中身の配置 */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* ★追加：コンテナ内で確実に中央寄せ */
    margin: 0 auto;
}

/* ロゴ画像用スタイル */
.hero-logo {
    width: 320px;
    max-width: 100%;
    /* 画面高さが足りない時（横向きスマホ等）にロゴを縮小して収める */
    max-height: 60vh; 
    height: auto;
    object-fit: contain;
    display: block;
}

/* スクロールダウン表示 */
.scroll-indicator {
    position: absolute; bottom: clamp(20px, 5vh, 50px); left: 50%; transform: translateX(-50%);
    height: clamp(40px, 10vh, 60px); width: 1px; background: #eee; overflow: hidden;
    z-index: 1;
}
.scroll-indicator::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 50%;
    background: #aaa; animation: scrollDown 2s infinite;
}
@keyframes scrollDown { 0% { top: -100%; } 100% { top: 100%; } }

/* * コンテンツエリア 
 */
.section { 
    /* 修正：ユーザー要望により「近めに統一」するため 100px -> 70px に変更 */
    padding: 70px 0; 
    /* ★ 追加：すべてのセクションの下に区切り線を入れる */
    border-bottom: 1px solid var(--line-color);
}

/* ★ 追加：タブレット・スマホ画面の間隔をさらに短く調整 */
@media (max-width: 1024px) {
    .section {
        /* 修正：スマホでも窮屈にならないよう余白を確保 (20px -> 60px) */
        padding: 60px 0; 
    }
}

/* 修正：背景色を統一するため、グレー背景をベースカラーに変更（透過させるイメージ） */
.section-gray { background-color: var(--bg-color); }

/* ★ Concept & Salon Text Styles (Shared) */
.concept-text {
    color: var(--text-color);
    text-shadow: 0 10px 30px rgba(255,255,255,0.8);
    text-align: center;
}

.concept-text__eyebrow {
    font-family: "Cormorant Garamond", serif;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    /* 修正：Conceptタイトルを大きくしました */
    font-size: clamp(16px, 1rem + 0.5vw, 24px);
    opacity: 0.9;
    margin: 0 0 0.5rem 0;
}

.concept-text__headline {
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.25;
    /* 修正：サイズを縮小して改行を防ぐ (最大48px -> 32px) */
    font-size: clamp(20px, 1rem + 1.2vw, 32px);
    margin: 0 0 1.5rem 0;
}

.concept-text__sub {
    margin: 0.8rem auto 0 auto;
    /* 修正：本文の幅を広げました (680px -> 900px) */
    max-width: min(92vw, 900px);
    /* 修正：サイズを少し大きくして可読性向上 (最小12px -> 13px, 最大15px -> 16px) */
    font-size: clamp(13px, 0.8rem + 0.35vw, 16px);
    line-height: 2;
    letter-spacing: 0.05em;
    opacity: 0.95;
}

/* 既存のAboutラッパー調整 */
.about-wrap {
    /* 修正：ラッパーも合わせて拡張 */
    max-width: 1200px; 
    margin: 0 auto; 
    text-align: center;
}

/* ★ 追加：セクション内のタイトルとコンテンツの間隔を統一するクラス */
.content-spacer {
    /* PC画面 */
    /* 修正：-20pxにして距離を詰める。下のセクションが被さるため、z-indexで手前に表示させる */
    margin-bottom: -20px;
    position: relative;
    z-index: 10;
}
/* ★ 追加：タブレット・スマホ画面の間隔をさらに短く調整 */
@media (max-width: 1024px) {
    .content-spacer {
        margin-bottom: 30px; /* 修正：15px -> 30px */
    }
}

/* ★ Salon Section (Added) */
.salon-section {
    width: 100%;
    /* 修正：高さ強制(100vh)を削除し、autoに変更。パディングで余白を制御して統一感を出す */
    height: auto; 
    min-height: auto;

    /* .section と同じパディング(70px)を適用して統一 */
    padding: 70px 0;

    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-color); /* Conceptと同じ背景色 */
    position: relative;
    overflow: hidden;
    
    /* ★ 追加：Salonセクションの下にも区切り線 */
    border-bottom: 1px solid var(--line-color);
}

.salon-wrap {
    max-width: 1200px;
    width: 100%;
    padding: 0 5%;
    box-sizing: border-box;
    text-align: center;
    /* 縦に並べる */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 親要素がautoになったため、ここも高さ制限を外すが、flexの性質上問題なし */
    height: 100%;
}

/* サロン画像のグリッドレイアウト */
.salon-grid {
    margin-top: 3rem;
    width: 100%;
    /* 修正：PC画面での横幅を拡大 (900px -> 1100px) */
    max-width: 1100px; 
    /* 修正：正方形にするために高さ制限を削除し、コンテンツに合わせて伸びるようにする */
    height: auto;
    /* max-height: min(70vh, 700px); <- 削除 */
    
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2列 */
    grid-template-rows: 1fr 1fr;    /* 2段 */
    gap: 15px; /* 画像間の隙間 */
    
    /* 少しフェードインさせるアニメーション用 */
    opacity: 0; 
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.salon-grid.active {
    opacity: 1;
    transform: translateY(0);
}

.salon-grid__item {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
    /* 修正：アスペクト比を正方形(1:1)に変更 */
    aspect-ratio: 1 / 1;
}

.salon-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠いっぱいに表示（トリミングあり） */
    transition: transform 0.5s ease;
}

/* ホバー時の微かなズーム効果（PCのみ） */
@media (hover: hover) {
    .salon-grid__item:hover img {
        transform: scale(1.05);
    }
}

/* ==========================================================================
   ★ Staff 3D Section Styles
   ========================================================================== */
.staff-section {
    position: relative;
    width: 100%;
    /* PCでは80vh、スマホではコンテンツに合わせて高さを可変（CSS修正部分） */
    min-height: 600px;
    height: 80vh;
    background-color: var(--bg-color);
    overflow: hidden;
}

#staff-canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* PCでドラッグを無効化するので cursor: auto に */
    cursor: auto;
}

/* スタッフセクションのUIオーバーレイ（PC用） */
#staff-ui-layer {
    position: absolute;
    top: 0;
    /* ★ 変更：PC画面では最大幅を設定し、中央に寄せる */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    /* パディングも含めた幅にする */
    padding: 0 5%;
    box-sizing: border-box;

    height: 100%;
    z-index: 2;
    pointer-events: none; /* クリックをCanvasに通すため（ボタンだけ有効化） */
}

/* スタッフスライドのコンテンツ（カード） */
.staff-slide-content {
    position: absolute;
    /* PC配置 */
    top: 15%; 
    /* ★ 変更：コンテナ内での固定位置に変更（以前は12%） */
    left: 5%; 
    width: 35%;
    max-width: 450px;
    
    /* ★ 修正：真っ黒だと主張が強いため、濃いグレーに変更して和らげる */
    /* 0,0,0 -> 60,60,60 */
    background: rgba(60, 60, 60, 0.75);
    
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 2.5rem;
    border-radius: 4px;
    
    /* ボーダーを薄い白線にして、ガラスのエッジを表現 */
    border: 1px solid rgba(255, 255, 255, 0.15);
    
    /* 影を少し濃くして、白背景からの浮遊感を強調 */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);

    /* アニメーション用初期状態 */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease-out;
    pointer-events: auto; /* テキスト選択などを可能に */
}

/* ★ 追加：PC版カード内のテキスト色を白系に調整（暗い背景に対応） */
.staff-slide-content .staff-role { color: #bbbbbb !important; }
.staff-slide-content .staff-name { color: #ffffff !important; }
.staff-slide-content .staff-desc { color: #eeeeee !important; }
.staff-slide-content .staff-meta-label { color: #aaaaaa !important; }
.staff-slide-content .staff-meta-value { color: #ffffff !important; }
/* 区切り線も薄い白に変更 */
.staff-slide-content .staff-meta-grid { border-top-color: rgba(255, 255, 255, 0.2) !important; }

/* ★ PCの狭い画面用調整 (1025px - 1200px) */
@media (min-width: 1025px) and (max-width: 1200px) {
    .staff-section {
        height: 65vh !important; 
        min-height: 600px !important;
    }

    .staff-slide-content {
        /* 左端に寄せる */
        left: 5%;
        width: 40%;
        top: 10%; 
    }
}

/* アクティブなスライドのみ表示 */
.staff-slide-content.active {
    opacity: 1;
    transform: translateY(0);
}

/* スタッフ名などのタイポグラフィ（LUEURのスタイルに合わせる） */
.staff-role {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #888;
    margin-bottom: 0.5rem;
    display: block;
}

.staff-name {
    font-family: 'Shippori Mincho', serif;
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 500;
    margin: 0 0 1.2rem 0;
    line-height: 1.2;
    color: var(--text-color);
}

.staff-desc {
    font-size: clamp(0.9rem, 1vw, 0.95rem);
    line-height: 1.8;
    color: #666;
    margin-bottom: 1.5rem;
    text-align: justify;
}

.staff-meta-grid {
    display: grid;
    grid-template-columns: 80px 1fr;
    row-gap: 0.5rem;
    border-top: 1px solid var(--line-color);
    padding-top: 1.2rem;
}

.staff-meta-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #aaa;
    align-self: center;
}

.staff-meta-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    font-style: italic;
    color: var(--text-color);
}

/* PCのみ表示する画像（DOM上では非表示、Three.jsが使う）
   スマホではこれを表示する */
.staff-img-mobile {
    display: none; /* デフォルト非表示 */
    width: 100%;
    height: 100%; /* 高さ100%に変更 */
    object-fit: cover;
    border-radius: 0; /* 角丸は親に任せる */
}

/* PC用: .staff-text-wrap は特別なスタイルを持たず、普通に表示 */
.staff-text-wrap {
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   ★ MENU Section Styles (New)
   ========================================================================== */

/* ★ メニューセクションの背景装飾（すりガラス効果を際立たせるため） */
.menu-section {
    position: relative;
    overflow: hidden;
}
/* 淡い光のオーブを配置 */
.menu-section::before {
    content: '';
    position: absolute;
    top: 20%;
    left: -10%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(230, 230, 230, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: 0;
    pointer-events: none;
    opacity: 0.7;
}
.menu-section::after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: -5%;
    width: 50%;
    height: 50%;
    background: radial-gradient(circle, rgba(240, 240, 235, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: 0;
    pointer-events: none;
    opacity: 0.7;
}

/* ★ メニューを囲むすりガラスボックス */
.menu-glass-box {
    position: relative; /* z-index用 */
    z-index: 1; /* 背景装飾より手前に */
    max-width: 800px;
    margin: 0 auto;
    
    /* 背景をより透明に、ぼかしを強く */
    background: rgba(255, 255, 255, 0.15); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    /* 境界線を白くはっきりとさせてガラスのエッジを表現 */
    border: 1px solid rgba(255, 255, 255, 0.8);
    
    /* 影を少し強めて浮遊感を出す */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
    
    border-radius: 12px; /* 少し丸みを強める */
    padding: 3rem 2rem;
    box-sizing: border-box;
}

/* メニューリスト全体を囲むコンテナ（フェード用） */
.menu-container-outer {
    width: 100%;
    position: relative;
    /* 上下にフェードをかけて続きがあるように見せる */
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 5%, black 95%, transparent);
}

/* スクロール可能な領域 */
.menu-scroll-container {
    max-height: 60vh; /* 画面高の60%までに制限 */
    min-height: 400px;
    overflow-y: auto; /* 縦スクロール */
    padding: 2rem 1rem;
    box-sizing: border-box;
    
    /* スクロールバーのカスタマイズ（Firefox） */
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}

/* スクロールバーのカスタマイズ（Webkit） */
.menu-scroll-container::-webkit-scrollbar {
    width: 4px;
}
.menu-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}
.menu-scroll-container::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 4px;
}

/* カテゴリブロックスタイル */
.menu-category {
    margin-bottom: 4rem;
}
.menu-category:last-child {
    margin-bottom: 2rem;
}

.menu-category__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-color);
    border-bottom: 1px solid var(--line-color);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    text-align: left;
    letter-spacing: 0.1em;
}

/* 各メニューアイテム */
.menu-item {
    margin-bottom: 1.5rem;
}

.menu-item__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.3rem;
}

.menu-name {
    font-family: 'Shippori Mincho', serif;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-color);
}

.menu-price {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    font-weight: 400;
    margin-left: 1rem;
    white-space: nowrap;
}

.menu-desc {
    font-size: 0.85rem;
    color: #888;
    text-align: left;
    line-height: 1.6;
    padding-right: 1rem;
}

/* ==========================================================================
   ★ PRODUCTS Section Styles (Added)
   ========================================================================== */

/* CARDS CONTAINER */
.cards {
    display: flex;
    flex-wrap: nowrap;
    /* サイトのコンテナ幅に合わせる */
    width: 100%;
    /* 修正：高さを500pxに変更 (400px -> 500px) */
    height: 500px;
    overflow: hidden;
    border-radius: 1rem;
    /* サイトの影に合わせる */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    z-index: 2;
}

/* INDIVIDUAL CARD */
.card {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    cursor: pointer;
    transition: flex 0.5s ease;
    overflow: hidden;
    position: relative;
    will-change: flex;
}

/* Card expand effect */
.card:hover {
    flex: 3;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

/* CARD LINK WRAPPER */
.card a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* CARD IMAGE */
.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, filter 0.5s ease;
    filter: grayscale(100%);
    will-change: transform, filter;
    background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%); /* 色味を調整 */
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.card:hover img {
    transform: scale(1.1); /* 拡大率を少し抑えめに */
    filter: grayscale(0%);
}

/* CARD OVERLAY */
.card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.card:hover::after {
    opacity: 1;
}

/* CARD DESCRIPTION */
.card-desc {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    padding: 1rem 1.5rem;
    color: #fff;
    
    font-family: 'Shippori Mincho', serif; /* フォント統一 */
    font-size: 0.9rem;
    line-height: 1.6;
    
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    white-space: normal;
}

.card:hover .card-desc {
    transform: translateY(0);
}

/* KEYBOARD ACCESSIBILITY */
.card a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}
.card a:focus-visible img {
    filter: grayscale(0%);
}

/* RESPONSIVE FOR CARDS (Customized for site breakpoints) */

/* Tablet Layout (1024px以下: 2列表示 - Grid) */
@media (max-width: 1024px) {
    .cards {
        display: grid; /* FlexboxからGridに変更 */
        grid-template-columns: repeat(2, 1fr); /* 2列 */
        gap: 20px; /* カード間の間隔 */
        
        flex-direction: initial; /* Flex解除念のため */
        height: auto;
        overflow: visible; /* 影が切れないように */
    }

    .card {
        flex: none;
        width: 100%;
        /* 修正：高さを400pxに変更 (320px -> 400px) */
        height: 400px; /* カードの高さ */
        margin-bottom: 0;
        border-radius: 8px; /* グリッド表示時の角丸 */
    }

    .card:hover {
        flex: none;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* 影をつける */
        transform: translateY(-5px); /* 少し浮く */
        z-index: 1;
    }

    /* Always show overlay on tablet/mobile */
    .card::after {
        opacity: 1;
    }

    /* 説明文は常時表示 */
    .card-desc {
        bottom: 0;
        transform: translateY(0);
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    }

    /* Show full color images */
    .card img {
        filter: grayscale(0%);
    }
}

/* Mobile Layout (640px以下: 1列表示) */
@media (max-width: 640px) {
    .cards {
        grid-template-columns: 1fr; /* 1列 */
        gap: 15px;
    }
    .card {
        /* 修正：高さを320pxに変更 (250px -> 320px) */
        height: 320px;
    }
}

@media (max-width: 1024px) and (hover: none) {
    .card:active {
        flex: none; /* タッチデバイスでの拡大無効化 */
    }
    .card:active img {
        transform: scale(1.05);
    }
}

@media (prefers-reduced-motion: reduce) {
    .card, .card img, .card-desc, .card::after {
        transition: none;
    }
    .card img {
        animation: none;
    }
}


/* ==========================================================================
   ★ Mobile / Tablet Layout (1024px以下) - 統一感のための徹底調整
   ========================================================================== */
@media (max-width: 1024px) {
    /* 1. セクションの上下余白を「50px」に完全統一 */
    /* 2. 全画面強制(100vh)を解除し、コンテンツの高さに合わせる */
    .section,
    .salon-section {
        padding: 50px 0 !important; /* 余白統一 */
        height: auto !important; /* 高さ自動 */
        min-height: auto !important;
        border-bottom: 1px solid var(--line-color); /* 区切り線 */
    }

    /* SALONセクション特有のレイアウト調整 */
    .salon-wrap {
        height: auto !important;
        display: block !important; /* flex解除（縦並び強制） */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* タイトル下の余白を統一 */
    .content-spacer {
        margin-bottom: 30px !important;
    }

    /* SALONグリッドのマージン調整 */
    .salon-grid {
        margin-top: 30px !important;
        margin-bottom: 0 !important; /* 下余白はセクションのpaddingに任せる */
    }

    /* ★ Staffセクション専用: スマホ・タブレット共通の横スクロールスタイルへ変更 */
    .staff-section {
        height: auto !important;
        min-height: auto !important;
        padding-top: 20px !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
        overflow: visible; 
    }

    /* 3D CanvasとPC用UIを非表示 */
    #staff-canvas-container,
    #staff-ui-layer {
        display: none !important;
    }
    
    /* ★ Staff モバイル用ラッパー (矢印配置用) */
    .staff-mobile-wrapper {
        position: relative;
        width: 100%;
        display: flex !important; /* 強制表示 */
        align-items: center;
        justify-content: center;
    }

    /* ★ 追加：スマホ・タブレット用スクローラーを表示・スタイル設定 */
    #staff-mobile-scroller {
        display: flex;
        flex-direction: row;
        overflow-x: auto; /* 横スクロール有効 */
        scroll-snap-type: x mandatory; /* スナップスクロール */
        padding: 0 5% 10px 5%; /* 下にスクロールバー用余白少し */
        gap: 15px;
        width: 100%;
        box-sizing: border-box;
        height: auto;
        pointer-events: auto;
        /* スクロールバー非表示（モダンブラウザ） */
        scrollbar-width: none;
        /* 矢印ボタンが重なるため、z-index調整 */
        position: relative;
        z-index: 1;
    }
    #staff-mobile-scroller::-webkit-scrollbar {
        display: none;
    }

    /* ★ 矢印ボタン (ナビゲーション - モバイル) */
    .staff-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.85);
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-color);
        backdrop-filter: blur(4px);
        /* 修正：opacityのアニメーションを追加 */
        transition: background 0.3s, transform 0.2s, opacity 0.3s;
    }
    .staff-nav-btn:active {
        transform: translateY(-50%) scale(0.95);
        background: #fff;
    }
    .staff-nav-btn.prev {
        left: 2%; 
    }
    .staff-nav-btn.next {
        right: 2%;
    }
    /* 矢印の中身（CSSで簡易矢印） */
    .staff-nav-btn::before {
        content: '';
        display: block;
        width: 8px;
        height: 8px;
        border-top: 1px solid #555;
        border-right: 1px solid #555;
    }
    .staff-nav-btn.prev::before {
        transform: rotate(-135deg);
        margin-left: 4px;
    }
    .staff-nav-btn.next::before {
        transform: rotate(45deg);
        margin-right: 4px;
    }

    /* ★ 追加修正：スマホ・タブレットでは画像を明示的に表示する */
    .staff-img-mobile {
        display: block !important;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ★ 修正：スマホ用すりガラスデザイン（画像上にテキストをオーバーレイ） */
    /* クラス名を変更せず、JSで生成される要素(.staff-mobile-card)に対して適用 */
    .staff-mobile-card {
        position: relative;
        flex: 0 0 auto; /* 縮小しない */
        
        /* ★ 修正：タブレットでのカード幅を広げて中央表示を強調 */
        /* 以前: min-width: clamp(280px, 85vw, 400px); */
        width: 80vw; 
        min-width: 300px;
        max-width: 450px;
        
        /* ★ 修正：アスペクト比を縦長に変更して写真を広く見せる */
        /* 以前: 3 / 4 */
        aspect-ratio: 2 / 3;
        
        scroll-snap-align: center; /* 中央にスナップ */
        
        /* 背景・枠線のリセット */
        background: #000; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        border: none;
        padding: 0; 
        margin: 0;
        
        border-radius: 20px; /* 角丸 */
        overflow: hidden; /* 画像のはみ出し防止 */
    }

    /* すりガラスレイヤー（グラデーションマスク + ぼかし） */
    .staff-mobile-card::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        
        /* 修正：ぼかしを 30px -> 15px に弱め、彩度強調(saturate)を削除して自然なガラス感に変更 */
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        
        /* ★ 修正：背景色を白系から黒系に変更し、暗い雰囲気にしました */
        /* さらに透明度を少し下げて（値を小さくして）、透け感を調整しました */
        /* 0.8 -> 0.7, 0.95 -> 0.9 */
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0) 40%, 
            rgba(0, 0, 0, 0.7) 65%,
            rgba(0, 0, 0, 0.9) 90%
        );
        
        /* ★ 修正：マスク範囲も合わせて下に下げる */
        mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            transparent 40%, 
            black 65%
        );
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            transparent 40%, 
            black 65%
        );
    }
    
    /* ★ テキストラッパーを下部に配置 */
    /* JS生成時にこのクラスを使用 */
    .staff-mobile-text {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 2; /* すりガラス(z-1)より手前 */
        padding: 1.5rem;
        box-sizing: border-box;
        /* 背景が黒になったので、文字色を白に変更 */
        color: #f5f5f5;
    }

    /* ★ 追加：黒背景に合わせて内部のテキスト色も白系に上書き */
    .staff-mobile-text .staff-name,
    .staff-mobile-text .staff-meta-value {
        color: #ffffff;
    }
    .staff-mobile-text .staff-role,
    .staff-mobile-text .staff-meta-label {
        color: #bbbbbb; /* 少し落としたグレー */
    }
    .staff-mobile-text .staff-desc {
        color: #dddddd; /* 読みやすいライトグレー */
    }
}

/* ==========================================================================
   ★ PC用 Nav Buttons (New)
   ========================================================================== */
/* PC用矢印ボタン: モバイル用とスタイルを共通化しつつ、PC用コンテナ内に配置 */
.staff-pc-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    backdrop-filter: blur(4px);
    transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
    pointer-events: auto; /* UIレイヤーがnoneなのでこれだけ有効化 */
}
.staff-pc-nav-btn:hover {
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-50%) scale(1.05);
}
.staff-pc-nav-btn:active {
    transform: translateY(-50%) scale(0.95);
}
.staff-pc-nav-btn.prev {
    left: 0; 
}
.staff-pc-nav-btn.next {
    right: 0;
}
.staff-pc-nav-btn::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-top: 1px solid #555;
    border-right: 1px solid #555;
}
.staff-pc-nav-btn.prev::before {
    transform: rotate(-135deg);
    margin-left: 4px;
}
.staff-pc-nav-btn.next::before {
    transform: rotate(45deg);
    margin-right: 4px;
}

/* ==========================================================================
   ★ Mobile Layout (Breakpoint: 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* メニューのすりガラスボックスをスマホ用に調整 */
    .menu-glass-box {
        padding: 1.5rem 1rem;
        width: 95%; /* 幅を広げる */
        margin: 0 auto;
    }

    /* ★ 追加：スマホ画面でのStaffカードサイズ調整 */
    /* 修正：画面の88%程度の幅にし、1枚が中央に大きく表示されるように変更 */
    /* 以前: width: 60vw; */
    .staff-mobile-card {
        width: 88vw;
        min-width: 280px;
        max-width: 400px;
        /* ★ 修正：スマホでも縦長比率を維持 */
        /* 以前: 3 / 4 */
        aspect-ratio: 2 / 3;
    }

    /* カード内のテキスト余白も少し詰める */
    .staff-mobile-text {
        padding: 0.8rem;
    }

    /* 名前フォントサイズ調整 */
    .staff-name {
        font-size: 1.2rem;
        margin-bottom: 0.3rem;
    }

    /* 説明文フォントサイズ調整 */
    .staff-desc {
        font-size: 0.75rem;
        line-height: 1.5;
        margin-bottom: 0.8rem;
        /* 長文対応：3行で省略表示（念のため） */
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    /* メタ情報（役職など）も小さく */
    .staff-role {
        font-size: 0.65rem;
        margin-bottom: 0.2rem;
    }
    .staff-meta-grid {
        padding-top: 0.8rem;
        font-size: 0.8rem;
    }
    .staff-meta-value {
        font-size: 0.9rem;
    }
}

/* ★ デフォルト（PC）ではスマホ用スクローラーを隠す */
.staff-mobile-wrapper {
    display: none;
}

/* 要素の出現アニメーション用クラス */
.fade-in-up {
    opacity: 0; transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-in-up.active { opacity: 1; transform: translateY(0); }

/* フッター */
footer { 
    padding: 5rem 0; text-align: center; font-size: 0.9rem; color: #999; 
    /* フッターの上線は、直前のStaffセクションの下線があるので削除 */
}
.footer-nav { margin-bottom: 2rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; }
.footer-nav a { color: #333; text-decoration: none; margin: 0 0.5rem; }

@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   ★ Loading Screen (Added)
   ========================================================================== */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* サイトに合わせて白背景に変更 */
    background-color: var(--bg-color);
    z-index: 9999; /* 最前面 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* ★ 修正：フェードアウトをゆっくりにする (0.8s -> 2.5s) */
    transition: opacity 2.5s ease-out, visibility 2.5s ease-out;
}

/* 非表示用クラス */
#loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Loader Styles (Adapted for Light Theme) */
.loader {
    position: relative; /* absoluteからrelativeに変更(flex中央寄せのため) */
    width: 64px;
    height: 64px;
    border-radius: 50%;
    perspective: 800px;
}

.inner {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;  
}

/* 色調整: 白背景で見やすいようにグレーの濃淡に変更 
   元の #EFEFFA は薄すぎるため、#b0b0b0, #d0d0d0, #909090 などを使用
*/
.inner.one {
    left: 0%;
    top: 0%;
    animation: rotate-one 1s linear infinite;
    border-bottom: 3px solid #b0b0b0; 
}

.inner.two {
    right: 0%;
    top: 0%;
    animation: rotate-two 1s linear infinite;
    border-right: 3px solid #d0d0d0;
}

.inner.three {
    right: 0%;
    bottom: 0%;
    animation: rotate-three 1s linear infinite;
    border-top: 3px solid #909090;
}

@keyframes rotate-one {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@keyframes rotate-two {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}

@keyframes rotate-three {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}