@charset "utf-8";

/**
 * inbound_theme.css
 * 店舗固有デザインカスタマイズ（CLUB BLENDA仕様）
 */

/* ==========================================================================
   全体共通・レイアウト基本
   ========================================================================== */

/* Noto Serif JPフォントのインポート */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;700;900&display=swap");

/* 変数定義（デザインシステム - 高級ダークゴールド） */
:root {
  --font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "Noto Serif JP", serif;
  --color-primary: #6a5819; /* ブロンズ・ゴールド */
  --color-primary-light: #cbb361; /* ライトゴールド */
  --color-primary-dark: #817238; /* ダークゴールド */
  --color-text: #ffffff; /* 白 */
  --color-text-muted: #cccccc; /* 薄いグレー */
  --color-bg: #000000; /* 黒 */
  --color-card-bg: linear-gradient(-25deg, rgba(1, 1, 1, 0.95), 80%, rgba(40, 40, 40, 0.95));
  --color-border: #6a5819; /* ゴールド枠線 */
  --color-dark: #000000;

  /* ゴールドグラデーション */
  --gold-gradient: linear-gradient(135deg, #cbb361, #817238);
  --primary-gradient: var(--gold-gradient);
}

/* 背景画像の設定 */
body {
  background: var(--color-bg) url('https://blenda.info/img/top_schedule_bg.webp') no-repeat fixed center top;
  background-size: cover;
}


/* ==========================================================================
   ページ上部（ヘッダー・導入）
   ========================================================================== */

/* --- ヘッダー --- */
.site-header {
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(5px);
}

/* --- 言語切り替え --- */
.lang-item {
  border: 1px solid rgba(106, 88, 25, 0.4);
}

.lang-item:hover, .lang-item.active {
  color: var(--color-primary-light) !important;
  border-color: var(--color-primary-light);
  background-color: rgba(106, 88, 25, 0.1);
}

/* --- パンくずリスト --- */
.breadcrumb-nav {
  background-color: rgba(0, 0, 0, 0.6);
  border-bottom: 1px solid rgba(106, 88, 25, 0.3);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-primary-light);
}

.breadcrumb-item a:hover {
  color: var(--color-primary-light);
}

.breadcrumb-item[aria-current="page"] {
  color: var(--color-primary-light);
}
.hero-content {
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

/* --- ナビゲーションボタン / ボタン --- */
.gradient-btn {
  color: #000000 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.gradient-btn:hover {
  box-shadow: 0 6px 20px rgba(106, 88, 25, 0.4);
}

.gradient-btn-ghost {
  /*background: rgba(17, 17, 17, 0.8) !important;*/
  border-bottom: 1px solid var(--color-primary-light) !important;
  color: var(--color-primary-light) !important;
  box-shadow: none;
}

.gradient-btn-ghost:hover {
  box-shadow: none;
 transform: translateY(0);
}


/* ==========================================================================
   guide ページ固有 / フリースペース基本要素
   ========================================================================== */

/* --- 見出し --- */
h2.section-title {
  color: var(--color-primary-light);
}

h2.section-title::after {
  background: var(--gold-gradient);
}

h3.sub-section-title {
  border-left: 3px solid var(--color-primary-light);
  color: var(--color-primary-light);
}

.section-title-sub {
  color: #ffffff;
}

/* --- お問い合わせ・電話 --- */
.tel-number {
  color: var(--color-primary-light);
}

.tel-note {
  color: #ffffff;
}


/* ==========================================================================
   ページ下部（フッター）
   ========================================================================== */

/* --- フッター --- */
.site-footer {
  background-color: #000000;
  border-top: 1px solid var(--color-border);
}

.site-footer a:hover {
  color: var(--color-primary-light);
}

.footer-section h4 {
  color: var(--color-primary-light);
  border-bottom: 1px solid rgba(106, 88, 25, 0.4);
}

.copyright {
  border-top: 1px solid rgba(106, 88, 25, 0.3);
  color: #888888;
}


/* ==========================================================================
   schedule (daysche) ページ固有要素
   ========================================================================== */

/* --- スケジュールナビ --- */
.schedule-nav {
  border: 1px solid #ffffff !important;
  border-bottom: 1px solid #ffffff !important;
  padding-bottom: 0 !important;
  gap: 0 !important;
  overflow: hidden;
}

.schedule-nav-item {
  background-color: #000000 !important;
  border: none !important;
  border-right: 1px solid #ffffff !important;
  color: #ffffff !important;
  font-weight: bold;
}

.schedule-nav-item:last-child {
  border-right: none !important;
}

.schedule-nav-item.sat {
  color: #3399ff !important; /* 土曜日は青 */
}

.schedule-nav-item.sun {
  color: #ff3333 !important; /* 日曜日は赤 */
}

.schedule-nav-item.current {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

/* PC表示でのカスタマイズ */
@media screen and (min-width: 768px) {
  .schedule-nav {
    border: none !important;
    border-bottom: none !important;
    gap: 8px !important;
    overflow-x: auto;
  }
  .schedule-nav-item {
    border: 1px solid #ffffff !important;
    border-radius: 0 !important;
  }
  .schedule-nav-item:last-child {
    border-right: 1px solid #ffffff !important;
  }
}

/* --- キャストカード・女性出勤リスト --- */
.cast-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  padding-bottom: 75px !important; /* スマホ：テキスト開始位置をさらに1行分（合計3行分・45px）下げる */
}

@media screen and (min-width: 768px) {
  .cast-card {
    padding-bottom: 84px !important; /* PC：テキスト開始位置をさらに1行分（合計3行分・54px）下げる */
  }
}

.cast-card:hover {
  box-shadow: 0 8px 20px rgba(106, 88, 25, 0.3);
  border-color: var(--color-primary-light);
}

.cast-image-wrapper {
  background-color: #111111;
}

/* 各テキストの基本カラーと共通レイアウト調整 */
.cast-name {
  color: #ffffff;
  text-shadow: 0 0 8px #000; /* 白背景や明るい衣装に被っても読めるように黒シャドウを追加 */
  order: 1; /* 表示順序：1番目（名前） */
}

.cast-sizes {
  text-shadow: 0 0 8px #000; /* 明るい衣装に被っても読めるように黒シャドウを追加 */
  order: 2; /* 表示順序：2番目（サイズ） */
}

.cast-time {
  color: var(--color-primary-light);
  font-weight: bold;
  order: 3; /* 表示順序：3番目（出勤時間） */
}

.cast-nomination {
  color: var(--color-primary-light); /* 視認性向上のためのライトゴールド */
  order: 4; /* 表示順序：4番目（指名料） */
}

/* 共通の余白リセットと行間調整 */
.cast-time, .cast-name, .cast-sizes, .cast-nomination {
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* --- スマホ表示（2列）での文字サイズ --- */
@media screen and (max-width: 767px) {
  .cast-name {
    font-size: 0.95rem !important;
  }
  .cast-age {
    font-size: 0.75rem !important;
  }
  .cast-time {
    font-size: 0.9rem !important;
  }
  .cast-nomination {
    font-size: 0.9rem !important;
  }
}

/* --- PC表示（多列）での文字サイズ --- */
@media screen and (min-width: 768px) {
  .cast-name {
    font-size: 1.15rem !important;
  }
  .cast-age {
    font-size: 0.85rem !important;
  }
  .cast-sizes {
    font-size: 0.8rem !important;
  }
  .cast-time {
    font-size: 1rem !important;
  }
  .cast-nomination {
    font-size: 1rem !important;
  }
}

/* ステータスバーの下部配置および写真上のテキスト重ね制御（グラデーション調整） */
.cast-card .cast-info {
  position: absolute;
  bottom: 30px !important;
  left: 0;
  right: 0;
  padding: 0.8rem 0.4rem 0.2rem 0.4rem !important; /* 上部パディングを抑え、テキスト開始位置を下げる */
  background: linear-gradient(to bottom, rgba(1, 1, 1, 0) 0%, rgba(1, 1, 1, 0.85) 50%, rgba(1, 1, 1, 1) 100%) !important;
  z-index: 5;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1px; /* 行間を極限まで詰める */
}

@media screen and (min-width: 768px) {
  .cast-card .cast-info {
    padding: 1rem 0.6rem 0.3rem 0.6rem !important; /* PCでも高さを抑える */
    gap: 2px;
  }
}

/* --- 連番バッジ & 待ち時間リボン --- */
.cast-card .cast-number {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: var(--gold-gradient);
  color: #000000;
  font-size: 1.5rem;
  width: 50px;
  height: 50px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* 待ち時間ステータスリボン（最下段・全幅バー） */
.cast-card .cast-ribbon {
  position: absolute;
  top: auto;   /* layout.css の top: 8px を無効化 */
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 30px;            /* 高さを30pxに固定 */
  line-height: 30px;       /* 文字を上下中央に配置 */
  text-align: center;
  font-size: 0.95rem !important;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  padding: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  background-color: transparent;
  z-index: 10;
  box-sizing: border-box;
}

/* プレートの立体ベベル部分を擬似要素で描画 */
.cast-card .cast-ribbon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  box-sizing: border-box;
}

/* 「今すぐ」- ゴールド立体（list_now_bg）極深ベベル */
.cast-ribbon-instant {
  color: #000000 !important; /* 文字コントラスト向上のため真っ黒に */
  text-shadow:
    1px 1px 0 #ffffff,
    -1px -1px 0 #ffffff,
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 0 0 #ffffff,
    -1px 0 0 #ffffff,
    0 1px 0 #ffffff,
    0 -1px 0 #ffffff,
    0 0 6px #ffffff,
    0 0 10px #ffffff !important; /* 全周に1px of クッキリした白シャドウを敷き詰め、さらにグロー効果を追加 */
  font-weight: 900 !important; /* 文字をよりはっきりと太く */
  font-family: var(--font-family); /* 明朝体で高級感を演出 */
}

.cast-ribbon-instant::before {
  /* 上下15pxずつのボーダーで高さ30pxを真っ二つに分割（極深ベベル形状を維持） */
  border-top: 15px solid #fbf6e7 !important;    /* 上：極めて明るいシャンパンゴールド */
  border-bottom: 15px solid #9e8e6b !important; /* 下：さらに薄くしたゴールドブロンズ */
  border-left: 15px solid #ffffff !important;   /* 左：強い光（白） */
  border-right: 15px solid #857553 !important;  /* 右：さらに薄くしたブロンズ */
}

/* 「○分待ち」- ダークバー（list_wait_bg）極深ベベル */
.cast-ribbon-wait {
  color: #ffffff !important;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.cast-ribbon-wait::before {
  /* 上下15pxずつのボーダーで高さ30pxを真っ二つに分割（極深ベベル形状を維持） */
  border-top: 15px solid #2d2938 !important;    /* 上：スッと光る明るめの紫グレー（画像1に近似） */
  border-bottom: 15px solid #0b0a0d !important; /* 下：極めて暗い黒 */
  border-left: 15px solid #24202e !important;   /* 左：光 */
  border-right: 15px solid #070608 !important;  /* 右：影 */
}

/* 「予約完売」- ダークバー（list_wait_bg）極深ベベル */
.cast-ribbon-soldout {
  color: #ffffff !important;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.cast-ribbon-soldout::before {
  /* 上下15pxずつのボーダーで高さ30pxを真っ二つに分割（極深ベベル形状を維持） */
  border-top: 15px solid #2d2938 !important;    /* 上：スッと光る明るめの紫グレー（画像1に近似） */
  border-bottom: 15px solid #0b0a0d !important; /* 下：極めて暗い黒 */
  border-left: 15px solid #24202e !important;   /* 左：光 */
  border-right: 15px solid #070608 !important;  /* 右：影 */
}


/* ==========================================================================
   モーダルウィンドウ関連要素
   ========================================================================== */

/* --- モーダル基本構造 --- */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(5px);
}

.modal-content {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}

.modal-close-btn {
  color: var(--color-primary-light);
  border: 1px solid var(--color-primary);
}

.modal-close-btn:hover {
  background-color: var(--color-primary);
  color: #000000;
}

/* --- モーダル内キャスト情報 --- */
/* モーダル内連番バッジ */
.modal-image-wrapper .cast-number {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: var(--gold-gradient);
  color: #000000;
  font-size: 1.5rem;
  width: 50px;
  height: 50px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.modal-cast-name {
  color: var(--color-primary-light);
}

.modal .cast-age {
  font-size: 1rem !important; /* モーダル内の年齢フォントサイズを1remに固定 */
}

/* --- モーダル内連絡先 --- */
.modal-sns-title {
  color: var(--color-text);
}

.modal-sns-list {
  background: rgba(17, 17, 17, 0.6);
  border: 1px solid rgba(203, 179, 97, 0.3);
}

.modal-sns-qr {
  border: none;
}

.modal-sns-link {
  color: var(--color-primary-light);
}

.modal-sns-link:hover {
  color: #ffffff;
}

.modal-sns-value {
  color: #ffffff;
}

/* --- モーダルアクセス --- */
.modal-access-section {
  border-top: 1px solid rgba(203, 179, 97, 0.3);
}

.modal-access-title {
  color: var(--color-primary-light);
  border-left: 3px solid var(--color-primary-light);
}

.modal-route-btn {
  color: #000000 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}