@charset "UTF-8";

/* override.css: テーマオーバーライドモード専用のグローバルスタイル

   方針(2026-09-21): このファイルでは !important を使わない。
   読み込み順は「variables.css → style.css → 動的CSS(cpl-style-inline-css /
   cpl-global-dynamic-styles) → override.css → テーマ style.css(ユーザーのカスタム領域)」
   なので、同じ詳細度なら後勝ちで style.css / 動的CSS の既定値に勝てる。
   !important を付けると、テーマの style.css から上書きできなくなるため付けない。
   ビルダーで個別要素に設定した値は html body [data-cpl-id="..."] (0,2,2・!important付き)
   で出力されるので、ここより常に優先される。 */

body {
  margin: 0;
  padding: 0;
  font-family: var(--cpl-font-family);
  font-size: 14px;
  background-color: var(--cpl-color-bg);
  color: var(--cpl-color-text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* hidden ではなく clip(style.css の html,body と同じ理由。hidden だと sticky が効かなくなる) */
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  body {
    overflow-x: hidden;
  }
}

#cpl-app {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin-top: 0;
  padding-top: 0;
}

.cpl-header {
  margin-top: 0;
  width: 100%;
  box-sizing: border-box;
}

/* オーバーライドモード時の .alignfull サポート（スライダー幅などを全幅にするため） */

.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}

/* 本日出勤中バッジのスタイル */

.cpl-card-image .cpl-working-today-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 10;
  background-color: #e60012;
  color: #ffffff;
  font-size: 10px;
  padding: 6px 14px;
  font-weight: bold;
  line-height: 1;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  animation: cplBlink 2.5s infinite ease-in-out;
}

@keyframes cplBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* スライダー画像のトランジション・ビジュアル効果 */

.cpl-main-slider .swiper-slide img,
.cpl-main-slider .swiper-slide video {
  transition: filter 0.6s ease-in-out;
  filter: brightness(0.4) saturate(0.3);
}

/* 表示中(アクティブ)のスライドは元画像のままの色で表示する。
   以前は brightness(1.2) saturate(1.4) を掛けていたため、元画像より明るさ・彩度が上がり
   「コントラストが強くなっている」ように見えていた(2026-09-18修正)。
   切り替え中の非アクティブ側の減光(上のルール)はクロスフェード演出として残している。 */
.cpl-main-slider .swiper-slide-active img,
.cpl-main-slider .swiper-slide-active video {
  filter: none;
}

/* NEWバッジのスタイル */

.cpl-cast-badge-new {
  background-color: #2db6d6;
  color: #ffffff;
  font-size: 10px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
}

/* タイプタグ（タクソノミー）一覧のスタイル調整 */

.cpl-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  margin-bottom: 8px;
}

/* キャストタイプのバッジ。
   バッジの見た目はこのルールに一本化している(2026-09-21)。

   注) 以前は「キャスト > タイプ」のタクソノミー編集画面に
   「背景色」「枠線色」「テキスト色」の設定(タームメタ)があり、テンプレートが
   インラインスタイルで直接当てていた(インラインはスタイルシートより強く、
   CSS側から変更できなかった)。
   ページビルダー化に伴いそのタクソノミー設定ごと廃止し
   (castpro-lightning.php の CPL_Taxonomy_Meta のインスタンス化を削除)、
   テンプレートは <span class="cpl-badge cpl-badge-<スラッグ>"> を出すだけになった。

   タイプごとに色を変えたい場合は、タームのスラッグが付いた
   .cpl-badge-<スラッグ> を使ってここに個別ルールを足す。 */

.cpl-card-badges .cpl-badge {
  background-color: #ffffff;
  color: #c4c3c3;
  border: 1px solid #b0acac;
  border-radius: 9999px;
  font-size: 10px;
  padding: 5px 10px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}

/* ==========================================
   絞り込み & 並び替え カスタムデザイン
   ========================================== */

/* 背景色と枠線の色をテーマのカスタムプロパティと連動 */

.cpl-advanced-search-wrap {
  background-color: var(--cpl-color-bg-content, #ffffff);
  /* 外枠は薄いグレー。以前は --cpl-color-accent-1 由来で、値が空の環境では
     黒い枠線になっていた。 */
  border: 1px solid #e0e0e0;
  border-radius: 26px;
  /* 全体の角丸 */
  margin: 20px 0;
}

/* トグルボタン（見出し）の背景とボーダー */

.cpl-advanced-search-toggle {
  /* border-bottom: 1px solid var(--cpl-color-accent-1, #2db6d6); */
  background-color: transparent;
  font-weight: bold;
}

/* 並び順セレクトと名前検索インプット */

select.cpl-search-select,
input.cpl-search-input {
  border-radius: 9999px;
  /* 入力欄の枠線も薄いグレーに統一 */
  border: 2px solid #e0e0e0;
  outline: none;
  box-shadow: none;
  font-size: 14px;
  height: 42px;
  line-height: 42px;
}

select.cpl-search-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 24px center;
  background-size: 14px;
  padding: 0 40px 0 20px;
}

input.cpl-search-input {
  padding: 0 15px;
}

/* 名前検索インプットのインナースペース */

input.cpl-search-input {
  padding-left: 38px;
}

/* カップは正円（基本はA〜Hの1文字用）。ただし「I以上」のように文字数が
   多い選択肢は、固定36pxの正円だとテキストがはみ出してしまうため、
   高さ(36px)はそのまま・幅だけテキスト量に応じて伸びる「角丸カプセル」に
   フォールバックする。border-radiusは大きな値を指定しておけば、
   正方形(36x36)のときは従来通り正円、横長になったときは半円キャップの
   カプセル形になる。 */

.cpl-search-checks-wrap .cpl-search-group:first-child .cpl-check-btn {
  border-radius: 999px;
  width: auto;
  height: 36px;
  min-width: 36px;
  padding: 0 11px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* タイプはカプセル型の角丸 */

.cpl-search-checks-wrap .cpl-search-group:last-child .cpl-check-btn {
  border-radius: 26px;
  padding: 6px 16px;
  display: inline-block;
}

/* ==========================================
   絞り込み & 並び替え 細部デザイン微調整
   ========================================== */

/* フィルターアイコン（アコーディオン見出し）の色をアクセントカラー1に */

.cpl-advanced-search-toggle .cpl-search-toggle-icon {
  color: #888888;
}

/* 並び順のソートアイコン色をアクセントカラー1に、サイズを少し大きく */

.cpl-search-group label .cpl-icon-sort-vertical {
  color: #888888;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  margin-right: 6px;
}

/* 年齢・身長・バストのスライダー数値テキスト色にアクセントカラー1を適用 */

.cpl-range-val-age,
.cpl-range-val-height,
.cpl-range-val-bust {
  color: #555555;
  font-weight: bold;
}

/* 外枠およびフォームのボーダーカラー適用を強化（薄いグレー） */

.cpl-advanced-search-wrap {
  border-color: #e0e0e0;
}

select.cpl-search-select,
input.cpl-search-input {
  border-color: #e0e0e0;
}

/* 出勤スケジュール・出勤ウィジェット・出勤ショートコードでは本日出勤中バッジを非表示 */

.cpl-schedule-page-widget .cpl-working-today-badge,
.cpl-today-schedule-widget .cpl-working-today-badge,
.cpl-today-schedule-shortcode .cpl-working-today-badge {
  display: none;
}

/* キャスト件数数値の強調 */

.cpl-cast-count {
  font-size: 20px;
  font-weight: bold;
}

/* キャスト詳細ページの見出しを左寄せに変更 */

.cpl-single-h3 {
  text-align: left;
  justify-content: flex-start;
}

/* 上部ユーティリティバーにもヘッダーの背景色・不透明度を適用 */

.cpl-top-utility-bar {
  background-color: var(--cpl-header-bg-color);
}