/*
Template: cp5-t011-LUMIERE
Theme Name: CP5 T011-LUMIERE-wht
Theme URI: https://castpro-cms.com/
Author: CASTPRO
Author URI: https://castpro-cms.com/
Description: CP5 T011-LUMIERE Parent Theme + White Child Theme
Version: 1.1.1
Text Domain: cp5k11000-child-001
Tags: CASTPRO, T011-LUMIERE, 1 Column
*/

/* =========================================================
  フォント
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap');

.more-link.text-right{
	display:none!important;
}



/* =========================================================
   01. 共通レイアウト・背景設定
========================================================= */

/* --- メインコンテンツとサイドバーの幅調整 --- */
#main-content {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

/* 基本：全ページでサイドバー非表示 ＆ メインを100%に強制 */
#secondary {
    display: none !important;
}
#primary {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    float: none !important;
}

/* 例外：キャスト・スケジュールページはサイドバー復活 */
body[class*="cast"] #secondary,
body[class*="page-id-38"] #secondary {
    display: block !important;
}

/* 例外（PC）：対象ページのみメイン幅を75%に戻す */
@media screen and (min-width: 1024px) {
    body[class*="cast"] #primary,
    body[class*="page-id-38"] #primary {
        width: 75% !important;
        max-width: 75% !important;
        flex: 0 0 75% !important;
    }
}

/* 例外（スマホ）：対象ページでサイドバーを上に移動 */
@media screen and  (max-width: 768px){
    #main-content {
        flex-direction: column !important;
    }
    #secondary {
        order: 1 !important;
        margin-bottom: 30px !important;
    }
    #primary {
        order: 2 !important;
    }
}

/* キャスト検索ウィジェットのタイトル枠を完全に非表示にする */
#cp5_castsearch-4 .widget-title {
    display: none !important;
}

/* --- 背景画像の設定 --- */
/* 標準のbody背景を消す（スマホサイズ時） */
@media screen and (max-width: 768px) {
    body {
        background-image: none !important;
    }
}

/* ウィンドウサイズピッタリの背景専用レイヤー */
body::before {
    content: "";
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -100;
    background-size: 100% auto !important; 
    background-position: center top !important; 
    background-repeat: no-repeat !important;
}

/* タブレット・スマホサイズの時の背景画像指定 */
@media screen and (max-width: 768px) {
    body::before {
        background-image: url('/wp-content/uploads/2026/08/mrs_BG_SP_2026-08-24.jpg') !important;
    }
}

.material-scrolltop.reveal{
	display:none;
}





/* =========================================================
   02. ヘッダー・スマホ用固定フッターメニュー
========================================================= */

/* サイト説明タグ */
h1.site-description {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ヘッダーロゴの調整 */
#header #logo a {
    display: inline-block;
    margin: 10px auto;
}

/* ロゴをPC・スマホ問わず常に中央配置にする */
#header-logo-col #logo {
    text-align: center !important;
}

/* ロゴのサイズ大きくする */
#header-logo-col #logo img {
    transform: scale(1.5);
    transform-origin: center center; /* 中央を基準にして拡大 */
}


/* ヘッダー余白調整 */
#header-block {
    padding-bottom: 10px !important; 
}


/* --- スマホ用固定フッターメニュー --- */
@media screen and (min-width: 768px) {
    #sp-fixed-menu {
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    #sp-fixed-menu {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background-color: #e60000 !important; /* 赤色 */
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15) !important;
        z-index: 2147483647 !important; 
        padding-bottom: env(safe-area-inset-bottom) !important;
        margin: 0 !important;
    }
    #sp-fixed-menu ul {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 8px 0 5px !important;
        list-style: none !important;
        width: 100% !important;
    }
    #sp-fixed-menu li {
        flex: 1 !important; 
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #sp-fixed-menu a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        color: #ffffff !important;
        background: transparent !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    #sp-fixed-menu img {
        width: 26px !important;
        height: auto !important;
        margin: 0 0 4px 0 !important;
        padding: 0 !important;
        display: block !important;
        border: none !important;
        max-width: none !important;
    }
    #sp-fixed-menu p {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 10px !important;
        font-weight: bold !important;
        line-height: 1.2 !important;
        color: #ffffff !important;
    }
/* 認証画面表示中（enter-open時）は非表示 */
body.enter-open #sp-fixed-menu {
    display: none !important;
}
body:has(#loading:not([style*="display: none"])) #sp-fixed-menu {
    display: none !important;
}

}


/* =========================================================
   03. 認証ページ（年齢確認）
========================================================= */

/* 認証ページのレイアウト順序と幅 */
#enter > .row.columns {
    display: flex;
    flex-direction: column;
    max-width: 100% !important;
    width: 95% !important;
}
#enter-widget-wrap {
    display: contents;
}
#media_image-8 {
    order: -1;
    margin-bottom: 15px;
    width: 100%;
    text-align: center;
}
#enter-image   { order: 1; margin: 0 0 2rem; padding: 5rem 0; }
#enter-navi    { order: 2; }
#enter-section { order: 3; }
#cp5_banner_display-8 {
    order: 4;
    width: 100%;
    margin-top: 20px;
}

/* メイン画像サイズの指定 */
#enter-image img {
    width: 100% !important;
    max-width: 1200px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
}

/* --- バナーウィジェットの調整 --- */
#cp5_banner_display-8 .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
	padding-bottom:100px!important;
}
#cp5_banner_display-8 .column {
    width: 100% !important;
    max-width: 1000px !important;
    float: none !important;
    display: flex !important;
    justify-content: center !important;
}
#cp5_banner_display-8 .column a {
    display: inline-block !important;
    width: 100% !important;
    text-align: center !important;
}
#cp5_banner_display-8 img {
    margin: 0 auto !important;
    display: inline-block !important;
}

/* --- 年齢認証ボタンエリア全体の幅を制限して中央配置 --- */
#enter #enter-navi {
    max-width:900px !important; /* 横幅（好みに合わせて 360px〜500px で調整） */
    margin: 0 auto 30px auto !important;
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

/* --- ENTER / LEAVE 各ボタンスタイル --- */
#enter-button .button,
#leave-button .button {
    max-width: 400px !important; /* ボタン単体の横幅 */
    width: 100% !important;
    margin: 0 auto !important;
    padding: 12px 0 !important;
    background-color: #333333 !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: bold !important;
    letter-spacing: 2px !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

#enter-button .button:hover,
#leave-button .button:hover {
    background-color: #555555 !important;
    color: #ffffff !important;
}

/* --- ボタン上部のテキスト（18歳以上 / 18歳未満） --- */
#enter-button::before {
    content: "18歳以上";
    display: block;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
    text-align: center !important;
    font-family: serif;
}

#leave-button::before {
    content: "18歳未満";
    display: block;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
    text-align: center !important;
    font-family: serif;
}

/* --- 元の文字を非表示にして中央コンテナ化 --- */
#enter-button .ripple-content,
#leave-button .ripple-content {
    font-size: 0 !important;
    line-height: 0 !important;
    width: 100% !important;
    text-align: center !important;
    display: block !important;
}

/* --- 差し替え文字（ENTER / LEAVE）の中央配置 --- */
#enter-button .ripple-content::after {
    content: "ENTER";
    font-size: 18px !important;
    font-weight: bold !important;
    font-family: "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
    line-height: 1 !important;
    letter-spacing: 2px !important;
    text-indent: 2px !important; /* letter-spacingによる右ズレを相殺して完全中央化 */
    display: block !important;
    text-align: center !important;
    width: 100% !important;
}

#leave-button .ripple-content::after {
    content: "LEAVE";
    font-size: 18px !important;
    font-weight: bold !important;
    font-family: "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
    line-height: 1 !important;
    letter-spacing: 2px !important;
    text-indent: 2px !important; /* letter-spacingによる右ズレを相殺して完全中央化 */
    display: block !important;
    text-align: center !important;
    width: 100% !important;
}

/* =========================================================
   04. キャスト一覧・スライダー・ランキング
========================================================= */

/* キャストアイコン調整 */
.cast-icon .cast-icon-lists {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px;
    max-width: 170px;
    margin: 0 auto;
}
#profile-icons .cast-icon-lists {
    display: flex;
    gap: 3px;
}

/* キャストカード内のテキスト中央揃え */
ul.cast-list .cast-section {
    text-align: center !important;
}
ul.cast-list .cast-name {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
ul.cast-list .cast-icon-lists {
    gap: 5px;
    margin-top: 5px;
}

/* --- ランキング関連 --- */
/* ランキングアイコン非表示 */
.cast-ranking-icon {
    display: none;
}

/* ランキング見出し（赤い帯・中央揃え） */
.ranking-title {
    background-color: #b90000;
    color: #ffffff;
    text-align: center;
    padding: 12px 15px;
    margin-top: 2em;
    margin-bottom: 1em;
    font-weight: bold;
    border-radius: 3px;
}
.ranking-title svg {
    margin-right: 8px;
}

/* --- スマホ表示用レイアウト（キャスト） --- */
@media screen and (max-width: 767px) {
    /* スライダー（注目・新人）の縦並び */
    #carousel-container-cp5_cast_slider-6 .cast-frame .cast-image.small-4,
    #carousel-container-cp5_cast_slider-6 .cast-frame .cast-section.small-8,
    #carousel-container-cp5_cast_slider-7 .cast-frame .cast-image.small-4,
    #carousel-container-cp5_cast_slider-7 .cast-frame .cast-section.small-8 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        float: none !important;
    }
    #carousel-container-cp5_cast_slider-6 .cast-frame .cast-section,
    #carousel-container-cp5_cast_slider-7 .cast-frame .cast-section {
        text-align: center !important;
        margin-top: 10px;
    }

    /* キャスト一覧の画像とテキストを縦積みにする */
    .cast-list .cast-image.small-4,
    .cast-list .cast-section.small-8 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    .cast-list .cast-section.small-8 {
        text-align: center !important;
        margin-top: 8px;
    }

    /* キャスト一覧を2列にする */
    .cast-list {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    .cast-list > li.columns {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}


/* =========================================================
   05. イベント一覧・新着情報
========================================================= */

/* イベント一覧ページの「続きを読む」を非表示にする */
#archive-event .more-link {
    display: none !important;
}

/* イベント一覧ページのタイトル */
.entry-title {
    text-align: center !important;
	font-size:1.5em;
}

/* 新着情報タグのデザイン変更 */
.news-lists-frame .news-icon .cat-label {
    background-color: #ff6699; 
    color: #ffffff;            
    border-radius: 15px;       
    padding: 3px 10px;         
    display: inline-block;     
}

/* 新着情報（ニュース）一覧ページのみ抜粋中の画像を非表示にする */
#archive .news-section img {
    display: none !important;
}


/* =========================================================
   06. TOPページ　バナー中央揃え
========================================================= */
/* バナー中央揃え */
img.top_banner.wp-image-107 {
    display: block !important;
    margin: 0 auto !important;
}
img.wp-image-108 {
    display: block !important;
    margin: 0 auto !important;
}

/* バナーウィジェットスマホ2列表示 */
@media screen and (max-width: 767px) {
  #cp5_banner_display-6 ul.small-up-1 {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  #cp5_banner_display-6 ul.small-up-1 > li.column {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* =========================================================
   07. ローディングアニメーション
========================================================= */

/* 1. デフォルトのスピナーを非表示 */
#loading .spinner {
    display: none !important;
}

/* 2. ローディング画面の全画面固定 & 背景色 */
#loading {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #ffffff !important; /* 背景色 */
    background-image: none !important;
    z-index: 999999 !important;
}

/* 3. 画面の完全中央にロゴを配置 */
#loading::after {
    content: "" !important;
    position: absolute !important;
    top: 40% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* ロゴ画像の指定とサイズ */
    background-image: url("/wp-content/uploads/2026/08/mrs‗logo.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    
    width: 260px !important;  /* ロゴの横幅 */
    height: 120px !important; /* ロゴの高さエリア */

}

/*---------出勤情報「翌週」非表示-----*/
li.week-next {
    display: none !important;
}
/* スマホ用のドロップダウンメニューの最後の項目（翌週）を非表示 */
select.tinynav option:last-child {
    display: none !important;
}