/* ========================================
   エステテーマ - カスタムスタイル
   assets/css/esthe/style_esthe.css
   opela.jp風 高級感ヘッダー + パララックス背景
   ======================================== */

/* ----------------------------------------
   サイト全体の背景壁紙（タイルリピート）
   ---------------------------------------- */
body,
.main,
.main-top {
    background: url(../../images/esthe/bg_pattern.webp) repeat !important;
}

/* ----------------------------------------
   フォント設定
   ---------------------------------------- */
.esthe-hero,
.esthe-hero-name,
.esthe-hero-info {
    font-family: 'Noto Serif JP', 'LINE Seed JP', serif;
}

/* ----------------------------------------
   ヒーローセクション（固定背景 + 中央ロゴ）
   ---------------------------------------- */
.esthe-hero {
    position: relative;
    background: #000;
    /* 高さはバナー画像の実寸に追従（固定比率・余白・ボカシなし）。
       表示中スライドの画像高さをJSがセットする。 */
    width: 100%;
    height: auto;
    text-align: center;
    padding-top: 0;
    overflow: hidden;
    transition: height 0.5s ease;
}

/* バナーフェードスライド（画像をそのまま全幅表示・余白なし） */
.esthe-hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    z-index: 0;
}

/* 先頭スライドは relative にして、JS実行前でもコンテナ高さを確保 */
.esthe-hero-slide:first-child {
    position: relative;
}

.esthe-hero-slide.active {
    opacity: 1;
    z-index: 1;
}

/* バナー画像：全幅・高さは画像比率なり（切り抜き・余白なし） */
.esthe-hero-img {
    display: block;
    width: 100%;
    height: auto;
}

.esthe-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: none;
    pointer-events: none;
    z-index: 2;
}

/* ロゴ等は画像の上に絶対配置で中央寄せ（高さ可変に追従） */
.esthe-hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    z-index: 3;
}

/* PC版: PCバナー非表示、SP版バナーを表示 */
@media (min-width: 768px) {
    .swiper-pc-banner {
        display: none !important;
    }
    /* SP版バナーをPC版でも表示（opela.jp風: 黒背景・全幅） */
    .banner-xs.swiper-sp-banner {
        display: block !important;
        background: transparent !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        padding: 0 !important;
        overflow: hidden;
    }
    /* ページネーションをゴールドに */
    .swiper-sp-banner .swiper-pagination-sp .swiper-pagination-bullet-active {
        background: #c9a96e !important;
    }
}

/* PC/SP共通：上部バナーを画像オリジナル比率で全幅表示（縦横100%・余白なし可変） */
.swiper-sp-banner,
.swiper-sp-banner .swiper-wrapper,
.swiper-sp-banner .swiper-slide {
    height: auto !important;
}
.swiper-sp-banner .swiper-slide {
    display: block !important;
    background: transparent;
}
.swiper-sp-banner .swiper-slide a,
.swiper-sp-banner .swiper-slide > picture,
.swiper-sp-banner .swiper-slide > img,
.swiper-sp-banner .swiper-slide picture img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
}
/* スライドバナー ページネーション → ゴールド（全画面サイズ） */
.swiper-pagination-bullet {
    background: rgba(201, 169, 110, 0.4) !important;
}
.swiper-pagination-bullet-active {
    background: #c9a96e !important;
}

.esthe-hero-logo {
    max-width: 280px;
    border-radius: 16px;
    max-height: 120px;
    width: auto;
    height: auto;
    margin-bottom: 16px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

.esthe-hero-name {
    color: #1a1a1a;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.15em;
    margin: 0 0 6px;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 20px rgba(255, 255, 255, 0.6), 0 1px 3px rgba(255, 255, 255, 1);
}

.esthe-hero-info {
    color: #333;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.1em;
    margin: 0;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 20px rgba(255, 255, 255, 0.6), 0 1px 3px rgba(255, 255, 255, 1);
}

/* ----------------------------------------
   ナビバー（sticky: ヒーロー下部 → スクロールで上部固定）
   ---------------------------------------- */
.navbar-custom.navbar-fixed-top {
    position: sticky !important;
    top: 0;
    z-index: 1030;
    margin-bottom: 0 !important;
}

.navbar-custom {
    background: linear-gradient(180deg, #1a1a1a 0%, #2c2420 40%, #1a1a1a 100%) !important;
    border: none !important;
    border-top: 1px solid rgba(201, 169, 110, 0.4);
    border-bottom: 1px solid rgba(201, 169, 110, 0.3);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(201, 169, 110, 0.15);
}

/* sticky化に伴いfixed用オフセットを解除 */
.breadcrumb-nav {
    margin-top: 0 !important;
}
.header-spacer {
    margin-top: 0 !important;
    height: 0 !important;
}

.navbar-custom .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px;
    padding-right: 20px;
}

/* メニューを左右均等配置 + 英語/日本語2行表示 */
@media (min-width: 951px) {
    .navbar-custom .navbar-collapse {
        justify-content: center !important;
    }
    .navbar-custom .navbar-nav.navbar-right {
        float: none !important;
        margin: 0 !important;
        width: 100%;
        justify-content: space-around !important;
    }
    .navbar-custom .navbar-header {
        display: none !important;
    }

    /* 2行表示: 英語（上）+ 日本語+バッジ（下・横並び） */
    .navbar-custom .navbar-nav > li > a {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        align-content: center !important;
        text-align: center;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        line-height: 1.4 !important;
        min-height: 56px;
    }

    .navbar-custom .navbar-nav > li > a .nav-en {
        display: block;
        flex-basis: 100%;
        font-size: 10px;
        font-weight: 400;
        letter-spacing: 0.18em;
        font-family: 'Noto Serif JP', serif;
        color: #d4b872;
        margin-bottom: 3px;
    }

    .navbar-custom .navbar-nav > li > a:hover .nav-en {
        color: #f0d89a;
    }

    /* メニュー項目間の区切り線 */
    .navbar-custom .navbar-nav > li + li > a {
        border-left: 1px solid rgba(201, 169, 110, 0.2);
    }

    /* 日本語テキスト部分 */
    .navbar-custom .navbar-nav > li > a {
        font-size: 15px !important;
    }

    /* アイコンは非表示（2行表示と競合するため） */
    .navbar-custom .navbar-nav > li > a > i {
        display: none !important;
    }

    /* 出勤表バッジ: 日本語テキストの右横に並べる */
    .navbar-custom .navbar-nav > li > a .badge {
        font-size: 10px;
        vertical-align: middle;
        margin-left: 4px;
        background-color: #c9a96e;
    }

    /* ログインボタン特別処理 */
    .navbar-custom .navbar-nav > li > a.login-btn {
        padding: 6px 22px !important;
        margin-top: 6px;
    }
    .navbar-custom .navbar-nav > li > a.login-btn .nav-en {
        margin-bottom: 0;
    }

    /* 会員IDボタン: ゴールド系に統一 */
    .navbar-custom .navbar-nav > li > a.member_toggle {
        padding: 4px 8px !important;
    }
    .navbar-custom .navbar-nav > li > a.member_toggle button {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        background: transparent !important;
        border: 1px solid rgba(201, 169, 110, 0.5) !important;
        border-radius: 6px !important;
        color: #d4b872 !important;
        padding: 4px 12px !important;
    }
    .navbar-custom .navbar-nav > li > a.member_toggle button:hover {
        border-color: #d4b872 !important;
        background: rgba(201, 169, 110, 0.1) !important;
    }
    .navbar-custom .navbar-nav > li > a.member_toggle button .fa-user {
        font-size: 1.2em !important;
        color: #d4b872 !important;
    }
    .navbar-custom .navbar-nav > li > a.member_toggle button .action-pc {
        color: #d4b872 !important;
        font-size: 12px;
    }
    .navbar-custom .navbar-nav > li > a.member_toggle button .badge {
        background-color: #c9a96e !important;
        color: #1a1a1a !important;
    }
    .navbar-custom .navbar-nav > li > a.member_toggle .nav-en {
        flex-basis: auto;
    }
}

.navbar-custom .nav li > a {
    color: rgba(255, 255, 255, 0.9) !important;
    transition: all 0.25s ease;
    position: relative;
}

.navbar-custom .nav li > a:hover,
.navbar-custom .nav li > a:focus {
    color: #fff !important;
    background: linear-gradient(180deg, rgba(201, 169, 110, 0.1) 0%, rgba(201, 169, 110, 0.05) 100%) !important;
}

/* ホバー時の下線ゴールドアクセント（PC版） */
@media (min-width: 951px) {
    .navbar-custom .navbar-nav > li > a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, #c9a96e, #e8d5a3);
        transition: width 0.3s ease;
    }
    .navbar-custom .navbar-nav > li > a:hover::after {
        width: 60%;
    }
}

.navbar-custom .nav li > a.login-btn,
.navbar-custom .nav li > a.chanko-nav-login {
    background: transparent !important;
    color: #d4b872 !important;
    border: 1px solid rgba(201, 169, 110, 0.5);
    border-radius: 50px;
    padding: 6px 22px;
}

.navbar-custom .nav li > a.login-btn:hover,
.navbar-custom .nav li > a.chanko-nav-login:hover {
    background: rgba(201, 169, 110, 0.15) !important;
    border-color: #d4b872;
    color: #f0d89a !important;
}

/* SP版では英語ラベル非表示 */
@media (max-width: 950px) {
    .nav-en {
        display: none !important;
    }
}

.navbar-custom .navbar-brand a {
    color: #fff !important;
}

/* ドロップダウンメニュー */
.navbar-custom .dropdown-menu {
    background-color: rgba(0, 0, 0, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar-custom .dropdown-menu > li > a {
    color: rgba(255, 255, 255, 0.8) !important;
}

.navbar-custom .dropdown-menu > li > a:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* バッジ色調整 */
.navbar-custom .badge {
    background-color: #c9a96e;
}

/* ----------------------------------------
   背景固定（コンテンツスクロール）
   ---------------------------------------- */
.bg-fix-box {
    position: relative;
}

/* コンテンツ領域に白背景 */
.bg-fix-box > .module,
.bg-fix-box > .module-small,
.bg-fix-box > .module-extra-small:not(.footer),
.bg-fix-box > section,
.bg-fix-box > .container,
.bg-fix-box > .breadcrumb-nav {
    background-color: #fff;
    position: relative;
    z-index: 1;
}

/* パンくずリスト背景 */
.breadcrumb-nav {
    background-color: #fff;
}

/* ----------------------------------------
   SP版ヒーロー調整
   ---------------------------------------- */
@media (max-width: 767px) {
    .esthe-hero {
        /* PC版と同じく aspect-ratio: 900/269 に追従（縦横100%・余白なし可変） */
        height: auto;
        min-height: 0;
        max-height: none;
        padding-top: 0;
        background-attachment: scroll; /* iOS Safari対策 */
    }

    .esthe-hero-logo {
        max-width: 180px;
        max-height: 80px;
        margin-bottom: 10px;
    }

    .esthe-hero-name {
        font-size: 16px;
        letter-spacing: 0.1em;
    }

    .esthe-hero-info {
        font-size: 11px;
    }

    /* ログイン時: ヒーロー（スライド背景＋ロゴ）を非表示 */
    body.is-logged-in .esthe-hero {
        display: none !important;
    }
}

/* ----------------------------------------
   SP版ナビバー調整
   ---------------------------------------- */
@media (max-width: 767px) {
    .navbar-custom .navbar-header .navbar-toggle {
        color: #fff !important;
    }

    .navbar-custom .navbar-header .member_toggle {
        color: #fff !important;
    }

    #slideMenuBtn .icon-bar {
        background-color: #fff !important;
    }

    #slideMenuBtn .small {
        color: rgba(255, 255, 255, 0.8) !important;
    }
}

/* ----------------------------------------
   2カラムレイアウト（top.phpエステ専用右カラム非表示）
   ---------------------------------------- */
@media (min-width: 992px) {
    /* top.phpのエステ専用右カラムプレースホルダ非表示 */
    #lazy-load-right-column {
        display: none !important;
    }
}

/* ----------------------------------------
   検索フォームとキャストBOXの余白
   ---------------------------------------- */
.module-extra-small form.form-inline {
    margin-bottom: 15px;
}
#castloadbox {
    margin-top: 15px;
}

/* ========================================
   キャストBOX - opela.jp風カードデザイン
   ダーク背景＋ゴールドアクセント＋白テキスト
   esthe/parts/box_cast.php 専用テンプレート対応
   ======================================== */

/* ----------------------------------------
   グリッド表示制御
   PC版テンプレートを全画面サイズで表示（SPはPC版と同じ2カラム）
   ---------------------------------------- */
.esthe-grid-item.action-pc {
    display: block !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    padding-top: 0 !important;
    padding-bottom: 8px !important;
}
.esthe-sp-hidden.action-xs {
    display: none !important;
}

/* ----------------------------------------
   カード本体
   ---------------------------------------- */
.esthe-card.shop-item {
    background: linear-gradient(180deg, #2c231a 0%, #201a13 100%);
    border: 1px solid #4a3f32;
    border-radius: 5px !important;
    box-shadow: none !important;
    overflow: hidden;
    margin: 0 !important;
    padding: 5px !important;
    transition: none !important;
}
.esthe-card.shop-item:hover {
    transform: none !important;
    box-shadow: none !important;
}
/* ホバーオーバーレイ無効化 */
.esthe-card .shop-item-image:after,
.esthe-card .shop-item-detail {
    display: none !important;
}

/* リンク */
.esthe-cast-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block;
}

/* ----------------------------------------
   ランクバッジ（カード最上部）
   ---------------------------------------- */
.esthe-card-rank {
    padding: 4px 8px;
    text-align: center;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.12em;
    font-family: '游ゴシック体', YuGothic, 'メイリオ', sans-serif;
    border-radius: 5px 5px 0 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.esthe-rank-queen      { background: linear-gradient(135deg, #d42a30 0%, #8b1a1e 100%); }
.esthe-rank-etoile     { background: linear-gradient(135deg, #3a3a3a 0%, #0a0a0a 100%); }
.esthe-rank-specialist { background: linear-gradient(135deg, #d4b872 0%, #967030 100%); }
.esthe-rank-expert     { background: linear-gradient(135deg, #b0b0b0 0%, #686868 100%); }
.esthe-rank-standard   { background: linear-gradient(135deg, #9a7340 0%, #5a3a18 100%); }
.esthe-rank-beginner   { background: linear-gradient(135deg, #4caf6a 0%, #2a6e3e 100%); }

/* ----------------------------------------
   写真
   ---------------------------------------- */
.esthe-card-img {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.esthe-card-img img {
    width: 100%;
    height: auto !important;
    aspect-ratio: 3 / 5;
    object-fit: cover;
    display: block;
    position: static !important;
}

/* ----------------------------------------
   名前・サイズ（白テキスト・中央揃え）
   ---------------------------------------- */
.esthe-card-details {
    padding: 8px 5px 6px;
    text-align: center;
    color: #fff;
}
/* 名前行：名前中央＋ログイン時間右端 */
.esthe-card-name-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.esthe-login-time {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}
.esthe-login-time-pc {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.esthe-login-time-sp {
    display: none;
}
.esthe-login-time .login-dot {
    margin-right: 2px;
}
.esthe-card-name.cast_name {
    font-family: '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'メイリオ', sans-serif !important;
    font-size: 18px !important;
    font-weight: normal !important;
    color: #fff !important;
    background: none !important;
    border-radius: 0 !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    letter-spacing: 0.03em;
    line-height: 1.4;
}
.esthe-card-size.cast_size {
    font-family: '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'メイリオ', sans-serif !important;
    font-size: 15px !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: 0.02em;
    line-height: 1.4;
}
.esthe-member-label {
    display: inline-block;
    background: #c9a96e;
    color: #1a1a1a;
    font-size: 10px;
    padding: 1px 6px;
    margin-left: 4px;
    border-radius: 2px;
}

/* バッジ（新人等）→ ゴールド系 */
.esthe-card-name .badge {
    background: linear-gradient(135deg, #c9a96e, #e8d5a3) !important;
    color: #3a2a10 !important;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 3px;
}

/* ----------------------------------------
   タイプラベル（2×2グリッド）
   ---------------------------------------- */
.opela-type-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px;
    padding: 0 0 2px;
}
.opela-type-item {
    flex: 0 0 calc(50% - 1px) !important;
    max-width: calc(50% - 1px) !important;
    box-sizing: border-box !important;
    background: #8a6d3b;
    color: #fff;
    text-align: center;
    padding: 4px 4px;
    font-size: 12px;
    font-weight: bold;
    font-family: '游ゴシック体', YuGothic, 'メイリオ', sans-serif;
    letter-spacing: 0.05em;
    border-radius: 3px;
}

.opela-type-spacer {
    height: 3px;
}

/* ----------------------------------------
   スケジュールバー（ゴールド背景）
   ---------------------------------------- */
.esthe-card-sch {
    background: #b79967;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    font-size: 18px;
    font-family: '游ゴシック体', YuGothic, 'メイリオ', sans-serif;
    border-radius: 5px !important;
    overflow: hidden;
}
.esthe-sch-today {
    display: inline-block;
    background: #fff;
    color: #b79967;
    padding: 2px 8px;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.esthe-sch-time {
    font-size: 18px;
}
.esthe-sch-time .fa {
    margin-right: 4px;
}

/* ----------------------------------------
   ステータスBOX（白背景・ゴールド文字）
   opela- 接頭辞で既存CSSとの競合を回避
   ---------------------------------------- */
.opela-status-wrap {
    padding: 0;
    margin: 5px 0 2px;
}
.opela-status {
    background: #fff;
    min-height: 36px;
    padding: 5px 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-radius: 5px !important;
    overflow: hidden;
}
.opela-status p {
    text-align: center;
    margin: 0;
    width: 100%;
    line-height: 1.4;
}

/* ステータス別カラー */
.opela-st-ok p {
    color: #b79967;
    font-size: 16px;
    font-weight: bold;
}
.opela-st-busy p {
    color: #b79967;
    font-size: 15px;
}
.opela-st-before p {
    color: #b79967;
    font-size: 15px;
}
.opela-st-soldout p {
    color: #999;
    font-size: 15px;
}
.opela-st-next p {
    color: #b79967;
    font-size: 14px;
}
.opela-st-empty {
    background: transparent;
    min-height: 10px;
}
.opela-st-empty p {
    visibility: hidden;
    font-size: 1px;
}
.opela-st-member {
    background: #fff;
    padding: 5px 8px;
    text-align: center;
}
.opela-st-member p {
    color: #c9a96e;
    font-size: 12px;
    margin: 0;
}

/* ----------------------------------------
   レスポンシブ調整
   ---------------------------------------- */
@media (max-width: 1650px) {
    .esthe-card-name.cast_name { font-size: 15px !important; }
    .esthe-card-size.cast_size { font-size: 13px !important; }
    .esthe-card-sch { font-size: 15px; }
    .esthe-sch-today { font-size: 12px; }
    .esthe-sch-time { font-size: 15px; }
}
@media (max-width: 991px) {
    .esthe-card-name.cast_name { font-size: 14px !important; }
    .esthe-card-size.cast_size { font-size: 12px !important; }
    .esthe-card-sch { font-size: 14px; }
    .opela-st-ok p { font-size: 14px; }
    .opela-st-busy p,
    .opela-st-before p,
    .opela-st-soldout p { font-size: 13px; }
}
@media (max-width: 767px) {
    .esthe-grid-item.action-pc {
        padding-left: 2px !important;
        padding-right: 2px !important;
        padding-bottom: 4px !important;
    }
    .esthe-card.shop-item { padding: 4px !important; }
    .esthe-card-rank { font-size: 10px; padding: 3px 5px; letter-spacing: 0.08em; }
    .esthe-card-details { padding: 5px 3px 4px; }
    .esthe-card-name.cast_name { font-size: 12px !important; }
    .esthe-card-size.cast_size { font-size: 10px !important; }
    .esthe-login-time { font-size: 8px; }
    .esthe-login-time-pc { display: none; }
    .esthe-login-time-sp {
        display: block;
        position: static;
        transform: none;
        text-align: center;
        margin-top: 2px;
    }
    .opela-type-item { font-size: 9px; padding: 3px 2px; }
    .esthe-card-sch { font-size: 12px; padding: 4px 5px; }
    .esthe-sch-today { display: none; }
    .esthe-sch-time { font-size: 12px; }
    .opela-st-ok p { font-size: 12px; }
    .opela-st-busy p,
    .opela-st-before p,
    .opela-st-soldout p { font-size: 11px; }
    .opela-st-next p { font-size: 11px; }
    .opela-status { min-height: 28px; padding: 3px 4px; }
}
@media (max-width: 480px) {
    .esthe-card-rank { font-size: 9px; padding: 2px 4px; }
    .esthe-card-name.cast_name { font-size: 11px !important; }
    .esthe-card-size.cast_size { font-size: 9px !important; }
    .esthe-card-sch { font-size: 11px; }
    .esthe-sch-today { font-size: 9px; }
    .opela-st-ok p { font-size: 11px; }
    .opela-st-busy p,
    .opela-st-before p { font-size: 10px; }
    .esthe-login-time { font-size: 7px; }
}

/* ----------------------------------------
   フッター色調整（ゴールド系アクセント）
   ---------------------------------------- */
.footer .widget-title::after {
    background: linear-gradient(90deg, #c9a96e 0%, #e8d5a3 100%);
}

/* ----------------------------------------
   左サイドバー エステテーマ配色
   ---------------------------------------- */
/* メニューリスト背景 */
.side_menu .list-group {
    background: #2c231a !important;
    padding: 10px !important;
    border-radius: 10px;
}

/* メニュー項目 共通（黒背景で統一） */
.side_menu .list-group .list-group-item {
    background: #000 !important;
    color: #fff !important;
    border: 1px solid #333 !important;
    border-left: 3px solid #c9a96e !important;
    border-radius: 5px !important;
    font-family: 'Noto Serif JP', serif;
    font-weight: bold;
}
.side_menu .list-group .list-group-item:hover {
    background: #222 !important;
}

/* アイコン円 → ゴールド */
.side_menu .list-group i {
    background: #c9a96e !important;
    color: #1a1a1a !important;
}

/* 上部カード（電話・営業時間） */
.side_menu .card.sidebar-card-shadow {
    border: 1px solid #ddd;
}
.side_menu .card .bg-light {
    background: #fff !important;
    color: #333;
}
.side_menu .card .module-subtitle {
    color: #333;
}
.side_menu .card .module-subtitle a {
    color: #333 !important;
}
.side_menu .card .btn.btn-circle.member_Add {
    background: linear-gradient(135deg, #c9a96e 0%, #e8d5a3 50%, #c9a96e 100%) !important;
    color: #1a1a1a !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(201, 169, 110, 0.4);
    font-weight: bold;
}
.side_menu .card .btn.btn-circle.member_Add:hover {
    background: linear-gradient(135deg, #d4b872 0%, #f0e4c4 50%, #d4b872 100%) !important;
}

/* USER GUIDE タイトル下テキスト */
.side_menu .side_menu_title h5 {
    color: #8a6d3b;
}

/* バナーセクション枠 */
.side_menu .side_menu_title .module-title {
    background: none !important;
}

/* ----------------------------------------
   cast.php / schedule.php 1カラム化
   ---------------------------------------- */
.esthe-1col .col-lg-9.col-lg-push-3 {
    width: 100% !important;
    left: 0 !important;
}
.esthe-1col .side_menu {
    display: none !important;
}

/* 「続きを見る」ボタン → ゴールドグラデーション */
.btn.btn-g.btn-round {
    background: linear-gradient(135deg, #c9a96e 0%, #e8d5a3 50%, #c9a96e 100%) !important;
    color: #1a1a1a !important;
    border: none !important;
    font-family: 'Noto Serif JP', serif;
    font-weight: bold;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 6px rgba(201, 169, 110, 0.4);
}
.btn.btn-g.btn-round:hover {
    background: linear-gradient(135deg, #d4b872 0%, #f0e4c4 50%, #d4b872 100%) !important;
    box-shadow: 0 4px 10px rgba(201, 169, 110, 0.5);
}

/* ========================================
   アクションボタン配色
   メッセージ=ウォームグレー / WEB予約=アンバー / お気に入り=セージグリーン
   ======================================== */
.bg-pink {
    background-color: #7a7168 !important;
    color: #fff !important;
}
.bg-pink:hover,
.bg-pink:focus {
    background-color: #8c847a !important;
}
.bg-yellow {
    background-color: #c98a4e !important;
    color: #fff !important;
}
.bg-yellow:hover,
.bg-yellow:focus {
    background-color: #d9a06a !important;
}
.bg-green {
    background-color: #6e9a64 !important;
    color: #fff !important;
}
.bg-green:hover,
.bg-green:focus {
    background-color: #82ad78 !important;
}
.bg-blue {
    background-color: #5a6e7a !important;
    color: #fff !important;
}
.bg-blue:hover,
.bg-blue:focus {
    background-color: #6e8290 !important;
}

/* ----------------------------------------
   ニュース日付 → エステテーマ配色
   ---------------------------------------- */
.news-date-list li .news-date {
    background: linear-gradient(135deg, #8b2040 0%, #c43a5c 100%) !important;
    color: #fff !important;
}
.news-date-list li a:hover {
    color: #c43a5c !important;
}
.news-meta .news-date,
.post-meta .news-date-year {
    color: #fff !important;
}

/* つぶやき キャスト名リンク */
.voice-list .msg__left .msg__left-text .post-meta a {
    color: #c43a5c !important;
}
/* スマホ：年を非表示 */
@media (max-width: 767px) {
    .news-date-year {
        display: none;
    }
}

/* スライドメニュー バッジ → ゴールド */
.slide-menu-user-badge {
    background: #c9a96e !important;
    color: #1a1a1a !important;
}
.slide-menu-badge {
    background: #c9a96e !important;
    color: #1a1a1a !important;
}
.slide-menu-item .badge,
.slide-menu-item .count-badge {
    background: #c9a96e !important;
    color: #1a1a1a !important;
}
.badge.badge-danger {
    background: #c9a96e !important;
    color: #1a1a1a !important;
}

/* ----------------------------------------
   タブ（nav-tabs）→ ゴールド背景
   color.css のピンク(#e8569b)を完全上書き
   ---------------------------------------- */
.nav-tabs {
    border-bottom: none !important;
}
.nav-tabs > li > a {
    background: #3a3225 !important;
    color: rgba(255,255,255,0.6) !important;
    border: 1px solid #4a3f32 !important;
    border-bottom: none !important;
    border-radius: 6px 6px 0 0 !important;
    margin-right: 3px;
    font-family: 'Noto Serif JP', serif;
    font-weight: 500;
    letter-spacing: 0.05em;
    transition: all 0.25s ease;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    background: #4a3f32 !important;
    color: #e8d5a3 !important;
    border-color: #5a4f42 !important;
    border-bottom: none !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: linear-gradient(135deg, #c9a96e 0%, #e8d5a3 50%, #c9a96e 100%) !important;
    color: #1a1a1a !important;
    border: 1px solid #c9a96e !important;
    border-bottom: none !important;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}
.nav-tabs > li.active > a::after {
    border-top-color: transparent !important;
    display: none !important;
}

/* ----------------------------------------
   ランキングページ専用
   ---------------------------------------- */
/* 切り替えボタン */
.esthe-ranking-btns {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}
.esthe-ranking-btn {
    flex: 1;
    padding: 10px 20px;
    font-family: 'Noto Serif JP', serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.08em;
    border: 1px solid #4a3f32;
    border-radius: 6px;
    background: #3a3225;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.25s ease;
    outline: none;
}
.esthe-ranking-btn:hover {
    background: #4a3f32;
    color: #e8d5a3;
    border-color: #5a4f42;
}
.esthe-ranking-btn.active {
    background: linear-gradient(135deg, #c9a96e 0%, #e8d5a3 50%, #c9a96e 100%);
    color: #1a1a1a;
    border-color: #c9a96e;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
    box-shadow: 0 2px 6px rgba(201, 169, 110, 0.4);
}
@media (max-width: 480px) {
    .esthe-ranking-btn { font-size: 13px; padding: 8px 12px; }
}

/* ナンバーバー（カード最上部） */
.esthe-ranking-no {
    padding: 6px 8px;
    text-align: center;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.15em;
    font-family: 'Noto Serif JP', serif;
    border-radius: 5px 5px 0 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #4a3f32 0%, #2c231a 100%);
}
.esthe-ranking-no-1 {
    background: linear-gradient(135deg, #e8d5a3 0%, #c9a96e 40%, #f0e4c4 60%, #c9a96e 100%);
    color: #3a2a10;
    font-size: 15px;
    text-shadow: 0 1px 1px rgba(255,255,255,0.3);
}
.esthe-ranking-no-2 {
    background: linear-gradient(135deg, #d0d0d0 0%, #a0a0a0 40%, #e0e0e0 60%, #a0a0a0 100%);
    color: #2a2a2a;
    font-size: 14px;
    text-shadow: 0 1px 1px rgba(255,255,255,0.3);
}
.esthe-ranking-no-3 {
    background: linear-gradient(135deg, #cd8c52 0%, #a0693a 40%, #d9a06a 60%, #a0693a 100%);
    color: #2a1a0a;
    font-size: 14px;
    text-shadow: 0 1px 1px rgba(255,255,255,0.2);
}

/* ランクバー（写真下の横一列・角丸） */
.esthe-ranking-rank-bar {
    text-align: center;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.12em;
    font-family: 'Noto Serif JP', serif;
    padding: 4px 8px;
    margin: 0;
    border-radius: 0 0 4px 4px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

@media (max-width: 767px) {
    .esthe-ranking-no { font-size: 11px; padding: 4px 6px; }
    .esthe-ranking-no-1 { font-size: 13px; }
    .esthe-ranking-no-2,
    .esthe-ranking-no-3 { font-size: 12px; }
    .esthe-ranking-rank-bar { font-size: 10px; padding: 3px 6px; }
}
@media (max-width: 480px) {
    .esthe-ranking-no { font-size: 10px; padding: 3px 5px; }
    .esthe-ranking-no-1 { font-size: 11px; }
    .esthe-ranking-no-2,
    .esthe-ranking-no-3 { font-size: 11px; }
    .esthe-ranking-rank-bar { font-size: 9px; padding: 2px 4px; border-radius: 0 0 3px 3px; }
}

/* ----------------------------------------
   右カラム つぶやきセクション 角丸デザイン
   ---------------------------------------- */
#lazy-load-right-column .msg__bg_wh {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8e8e8;
    padding: 15px !important;
    overflow: hidden;
}
#lazy-load-right-column .msg__contents .msg__left {
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 0;
    background: #faf8f5 !important;
}
#lazy-load-right-column .msg__contents .msg__left figure img {
    border-radius: 50%;
}
#lazy-load-right-column .msg__contents .divider-w {
    border-color: rgba(201, 169, 110, 0.15);
    margin: 8px 0;
}

/* ----------------------------------------
   フッターの出勤表バッジをテーマのゴールドに統一
   （基底 .badge ピンク / var(--main-color) を上書き。
    ヘッダーの出勤表バッジ #c9a96e と同色）
   ---------------------------------------- */
.footer .icon-list li a .badge {
    background-color: #c9a96e !important;
    color: #fff !important;
}