@charset "UTF-8";

/* style.css: 共通コンポーネント */


/* =====================================================================
   ベース / リセット

   以前は専用テーマ(castpro-zeta)の style.css にだけ書かれており、
   そのテーマ CSS がこのファイルよりあとに読み込まれていたため、
   .cpl-container や .cpl-main-content などプラグイン側の定義をテーマ側が
   上書きしてしまう状態だった。テーマ側の CSS を廃止してプラグインに
   一本化するにあたり、テーマ側にしか無かったベースの規則をここへ移している
   (2026-09-22)。
   ===================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: var(--cpl-font-family, "Noto Sans JP", sans-serif);
    background-color: var(--cpl-color-bg, #ffffff);
    /* 文字色はビルダーの「テキスト色」設定(--cpl-color-text-main)に追従させる。
       テーマ側にあった旧規則は定義されていない変数(--cpl-color-text)を見ており、
       常にフォールバックの #333333 になっていた。variables.css の既定値も
       #333333 なので、既定設定の見た目は従来と同じ。 */
    color: var(--cpl-color-text-main, #333333);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--cpl-link-color, inherit);
    text-decoration: none;
    transition: color 0.2s ease;
}

/* コンテンツ幅は「グローバル設定」のコンテンツ幅が PHP から出力する
   --cpl-content-max-width を使う。以前はどこでも定義されていない
   --cpl-content-width を見ており、常に 1200px 固定になっていた
   (実際の表示は、あとから読まれるテーマ側 CSS の同名ルールが勝っていた)。
   左右の余白 20px もテーマ側の値をそのまま引き継いでいる。 */

.cpl-container {
    width: 100%;
    max-width: var(--cpl-content-max-width, 1200px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

.cpl-widget {
    padding: 30px 0;
}

.cpl-widget-title {
    margin: 20px 0 10px 0;
}

.cpl-widget-subtitle {
    text-align: center;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    h3.cpl-widget-title,
    .cpl-widget-title {
        font-size: 40px;
        text-align: center;
        font-weight: 900;
    }
}


/* ヘッダー */

.cpl-header {
    background: var(--cpl-glass-bg);
    backdrop-filter: var(--cpl-glass-blur);
    /* 下部の白い半透明ボーダー(border-bottom: var(--cpl-glass-border))は廃止。
       ヘッダーの区切り線は「ヘッダー(共通パーツ)」の設定側で指定する。 */
    position: sticky;
    top: 0;
    margin-top: 0;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    z-index: 100;
}

.cpl-header h1 {
    margin: 0;
    font-size: 1.5rem;
}

.cpl-header a {
    text-decoration: none;
    color: var(--cpl-color-accent1);
}

.cpl-main-content {
    flex: 1;
    /* #cpl-app (display:flex; flex-direction:column;) の子要素として、本来は
       align-items:stretch（デフォルト値）で横幅いっぱいに広がるはずだが、
       実際のブラウザでは横幅が中身のサイズまで縮んでしまう現象が確認されたため、
       明示的に width:100% を指定して確実に横幅いっぱいに広がるようにする。
       (ビルダーの初期スターターカラムや、ヘッダーの選択枠が小さいエリアにしか
        表示されない不具合の原因の一つ) */
    width: 100%;
    box-sizing: border-box;
    padding: var(--cpl-space-xl) 0;
}


/* 新着情報 */


/* フッター(共通パーツ)の既定スタイル。
   背景色は付けない(テーマ/ビルダー側で指定する)。ビルダーの「フッター」設定で
   背景色などを指定した場合は [data-cpl-id="footer-bar-global"] のルールが
   !important 付きで出力されるため、そちらが優先される。 */

.cpl-footer {
    background: none;
    text-align: center;
    /* 余白・margin-top は、以前テーマの footer.php に
       style="padding: 40px 0 60px 0; margin-top: auto;" と直書きされていたもの。
       インラインのままだとビルダーの「フッター」設定より優先度が高く
       なりがちなため、CSS側へ移している(2026-09-22)。
       margin-top:auto は #cpl-app(display:flex; flex-direction:column; / override.css)の
       子として、ページが短いときもフッターを下に押し下げるため。 */
    padding: 40px 0 60px 0;
    margin-top: auto;
    font-size: 14px;
    color: var(--cpl-color-text-sub);
    /* 上端の区切り線(border-top: 1px solid var(--cpl-color-border))は既定では付けない(2026-09-23 削除)。 */
}

.cpl-footer .cpl-container {
    text-align: center;
}


/* SNSアイコン列(「基本設定」-「SNS」でURLを入れたものだけ出る) */

.cpl-footer-sns {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 20px;
}

.cpl-footer-sns .cpl-sns-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 0.2s;
}

.cpl-footer-sns .cpl-sns-icon-link:hover {
    opacity: 1;
}

.cpl-footer-sns .cpl-sns-icon-img {
    height: 36px;
    width: auto;
    display: block;
}


/* ビルダーでフッターに追加した要素の出力エリア */

.cpl-footer-canvas {
    margin-bottom: 20px;
    /* position:static のままだと、ここに置いた要素(ロゴ・メニュー等)は
       すべて通常のフロー(横並び)で描画される一方、「重なり順」を設定して
       position:absoluteにした要素(例: 透かしテキスト)だけは最も近い
       position指定済みの祖先(.cpl-theme-root。ページ全体を包む)を基準に
       配置・重なり判定されてしまっていた。
       そのため「重なり順」を 0 にしても、フッター内の他要素(通常配置=
       常にposition未指定要素より前面)より後ろへは回らず、逆に負の値にすると
       ページ全体のスタッキングコンテキストの最背面まで沈んでフッターの背景色
       ごと下に隠れてしまっていた(ヘッダー側は .cpl-header が position:sticky
       で自身のスタッキングコンテキストを持つため、この問題が起きない)。
       ここに position:relative を付けて footer 内だけのスタッキング
       コンテキスト/絶対配置の基準にすることで、「重なり順」の値がフッター内の
       他要素との前後関係だけで完結するようにする(オフセット未指定なので
       レイアウトへの影響はない。2026-09-24)。 */
    position: relative;
}

.cpl-footer-copyright {
    margin: 0;
    font-size: 12px;
    color: #888888;
}


/* -------------------------------------
 * キャスト一覧 (グリッド表示)
 * ------------------------------------- */


/* 年齢認証モーダル表示中の背景スクロールロック。
   このクラスの付け外しは assets/js/main.js と builder-preview.js が行う。
   モーダルが実際に表示されているときだけ付くようにしてあるので、
   ビルダーのプレビューがスクロールできなくなることはない。 */

body.cpl-locked {
    overflow: hidden;
}

.cpl-age-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cpl-space-md);
    opacity: 1;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.cpl-age-modal-overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* 注) テーマの動的CSS(cpl-style-inline-css)が
       .cpl-wrapper, .cpl-cast-card, .cpl-news-list, .cpl-age-modal-content, .cpl-single-block
       { background-color: var(--cpl-content-bg-color) } を後から出力しており、
       同じ詳細度(0,1,0)では負ける。さらにこの変数が空の環境では背景が透明になる。
       !important を使わずに済むよう、親を1つ挟んだ 0,2,0 のセレクタで指定する。 */

.cpl-age-modal-overlay .cpl-age-modal-content {
    background: #ffffff;
    background-color: #ffffff;
}

.cpl-age-modal-content {
    /* 以前は var(--cpl-glass-bg) だったが、テーマの動的CSSで
       --cpl-glass-bg が空になっている環境では背景が透明になってしまう。
       モーダルは中身が読めることが最優先なので、白で塗る。 */
    background: #ffffff;
    border: none;
    box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    backdrop-filter: var(--cpl-glass-filter, blur(10px));
    -webkit-backdrop-filter: var(--cpl-glass-filter, blur(10px));
    padding: var(--cpl-space-xl);
    width: 400px;
    max-width: 100%;
    text-align: center;
    animation: cplFadeUp 0.6s ease forwards;
}

@keyframes cplFadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* 認証モーダル内のテキストの中央寄せ。
   注) 以前は !important 付きだった。グローバル設定の「フォント」(タイポグラフィ)が
       body, p 等のタグセレクタへ text-align: left を !important 付きで出力していたため。
       2026-09-21 にタイポグラフィの動的CSS(class-cpl-settings.php)から !important を
       外したので、クラスセレクタ(0,1,0 以上)で書けばタグセレクタ(0,0,1)に普通に勝つ。
       テーマの style.css から上書きしやすいよう、ここも !important なしにしている。
   ビルダーで個別に文字寄せを変えた場合は
   html body [data-cpl-id="..."] （詳細度 0,2,2・!important付き）が優先される。 */

.cpl-age-modal-header h2,
.cpl-age-modal-header p {
    margin: 0 0 var(--cpl-space-md) 0;
    color: var(--cpl-color-accent1);
    font-size: 24px;
    text-align: center;
}

.cpl-age-modal-lang {
    margin-bottom: var(--cpl-space-lg);
    text-align: center;
}

/* 年齢認証モーダルの見出し(ロゴ or サイト名)。
   以前は templates/parts/age-verification.php に
   style="text-align:center; font-size: 36px !important; ..." と直書きされており、
   インラインの !important はビルダーが出力する
   html body [data-cpl-id="age-heading"] { ... !important } よりさらに強いため、
   「年齢認証」の設定で文字サイズを変えても反映されなかった(2026-09-22修正)。
   直上の .cpl-age-modal-header p (詳細度 0,1,1) に負けないよう、
   親を含めた 0,2,0 のセレクタで指定している。 */

.cpl-age-modal-header .cpl-age-heading {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    margin: 0 0 15px 0;
}

.cpl-age-modal-lang .cpl-age-lang-text {
    font-size: 12px;
    margin-bottom: 5px;
}

.cpl-age-modal-actions .cpl-btn-exit {
    color: var(--cpl-color-text-sub);
}

.cpl-age-modal-content,
.cpl-age-modal-body,
.cpl-warning-text,
.cpl-warning-text-en,
.cpl-age-modal-disclaimer,
.cpl-age-modal-content p,
.cpl-age-modal-content span,
.cpl-age-modal-actions {
    text-align: center;
}

.cpl-warning-text {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 0;
    color: var(--cpl-color-text-main);
}

.cpl-warning-text-en {
    font-size: 12px;
    font-family: "Lato", sans-serif;
    color: var(--cpl-color-text-sub);
    margin-top: 0;
    margin-bottom: var(--cpl-space-xl);
}

.cpl-age-modal-disclaimer {
    font-size: 12px;
    margin-top: 15px;
    color: var(--cpl-color-text-sub, #666);
}

.cpl-age-modal-actions {
    display: flex;
    flex-direction: column;
    gap: var(--cpl-space-md);
}

.cpl-age-modal-actions .cpl-btn,
.cpl-age-modal-actions button,
.cpl-age-modal-actions a,
#cpl-age-enter,
#cpl-age-exit {
    border-radius: 30px;
    height: auto;
    min-height: 64px;
    width: 100%;
    background: #ffffff;
    background-color: #ffffff;
}


/* ENTERボタンの初期スタイル: IDセレクタ(高優先度)で.cpl-btn-enterのグラデーション等を上書き。 */

#cpl-age-enter {
    background: #404040;
    background-image: none;
    color: #ffffff;
    width: 100%;
    max-width: none;
    flex-direction: column;
    margin-top: 12px;
}

#cpl-age-enter .cpl-btn-jp,
#cpl-age-enter .cpl-btn-en {
    color: inherit;
}

#cpl-age-exit {
    background: #ffffff;
    width: 100%;
    max-width: none;
    flex-direction: column;
    margin-bottom: 10px;
}

#cpl-age-exit .cpl-btn-jp,
#cpl-age-exit .cpl-btn-en {
    color: var(--cpl-color-text-sub);
}

.cpl-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 15px;
    height: 64px;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    background: #ffffff;
    background-color: #ffffff;
    transition: var(--cpl-transition);
}

.cpl-btn .cpl-btn-jp,
.cpl-btn .cpl-btn-en {
    display: block;
}


/* バッジ (本日出勤など) */

.cpl-btn-enter {
    background: var(--cpl-color-gradient);
    color: #fff;
    box-shadow: 0 4px 15px rgba(83, 83, 83, 0.4);
    border: 2px solid transparent;
}

.cpl-btn-enter:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(78, 78, 78, 0.6);
}


/* NEWバッジ */

.cpl-btn-exit {
    background: transparent;
    color: var(--cpl-color-text-sub);
    border: 2px solid #ddd;
}

.cpl-btn-exit:hover {
    /* hover background reset */
}

.cpl-btn-jp {
    font-size: 14px;
    line-height: 1.2;
}

.cpl-btn-en {
    font-size: 11px;
    line-height: 1.2;
    opacity: 0.8;
    margin-top: 2px;
}


/* -------------------------------------
 /* キャスト名エリア */


/* ------------------------------------- */

.cpl-filter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cpl-space-sm);
    margin-bottom: var(--cpl-space-lg);
    justify-content: center;
    overflow-x: auto;
    padding-bottom: 5px;
}

.cpl-filter-btn {
    padding: 4px 8px;
    font-size: 10px;
    margin: 1px;
    border-radius: 24px;
    border: 1px solid var(--cpl-color-border, rgba(0, 0, 0, 0.08));
    /* --cpl-glass-bg が空の環境で透明にならないよう、白を直接指定する */
    background: #ffffff;
    color: var(--cpl-color-text-sub, #666666);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
}


/* ホバー時。
   注) 以前は rgba(var(--cpl-main-color-rgb), 0.1) / var(--cpl-main-color) を
       使っていたが、これらの変数が空の環境では色が解決できず、背景も文字色も
       消えてしまっていた（アクティブ時と同じ症状）。変数に依存しない黒系にする。 */

.cpl-filter-btn:hover {
    background: #333333;
    color: #ffffff;
    border-color: #333333;
}

.cpl-cast-count-wrap {
    text-align: right;
    font-size: 13px;
    color: var(--cpl-color-text-sub, #666);
    margin-bottom: 15px;
    opacity: 0;
    transition: opacity 0.3s;
}

.cpl-loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 0;
    box-sizing: border-box;
}

.cpl-spinner-text {
    margin-top: 15px;
    font-size: 14px;
    color: #999;
    letter-spacing: 2px;
}

.cpl-widget-action {
    text-align: center;
    margin-top: 30px;
}


/* ウィジェットの「すべての◯◯を見る」ボタンは、ビルダーの「ボタン」エレメントと
   完全に同じ見た目に統一する。
   実際の装飾は下の .cpl-button-element の共通ルールにこのセレクタを併記して共有しており、
   ここでは .cpl-btn / .cpl-btn-enter が先に当てている装飾
   （縦並び・固定高さ64px・太字・グラデーション背景・影）だけを打ち消す。
   対象: 新着情報 / クチコミレビュー一覧 / 在籍一覧 / 本日の出勤
        （いずれも .cpl-widget-action .cpl-btn-enter という同じマークアップ） */

.cpl-widget-action .cpl-btn-enter {
    /* .cpl-btn-enter の background: var(--cpl-color-gradient) を打ち消す
       (0,2,0 なので .cpl-btn-enter(0,1,0)・動的CSSの .cpl-btn-enter にも後勝ち不要で勝つ) */
    background-image: none;
    box-shadow: none;
    /* .cpl-btn の height:64px / flex-direction:column / font-weight:bold を戻す */
    height: auto;
    flex-direction: row;
    font-weight: 400;
}

.cpl-widget-action .cpl-btn-enter:hover {
    text-decoration: none;
    /* .cpl-btn-enter:hover の translateY(-2px) を無効化（ボタンエレメントは動かないため） */
    transform: none;
    box-shadow: none;
}

.cpl-btn-enter {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    max-width: 300px;
    margin: 0 auto;
}

.cpl-icon-arrow-right {
    display: inline-block;
    width: 24px;
    height: 24px;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    background-color: currentColor;
}


/* Slider Widget
   注) 旧「コンテンツ幅」(--cpl-widget-max-width) による幅指定は廃止した。
       スライダーの幅は、ビルダーの「幅(% / px)」で親のウィジェット要素／カラムに
       指定する。ここでは常に親いっぱいに広がるだけにしておく。 */

.cpl-slider-container {
    max-width: 100%;
    overflow: hidden;
}

.cpl-slider-video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.cpl-slider-image {
    width: 100%;
    height: auto;
    display: block;
}


/* Auth Menu */

.cpl-auth-menu {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cpl-auth-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    font-size: 12px;
    color: inherit;
    white-space: nowrap;
}

.cpl-welcome-text {
    white-space: nowrap;
    text-decoration: none;
    font-weight: bold;
    color: inherit;
    font-size: 12px;
}

.cpl-auth-btn {
    display: inline-flex;
    flex-direction: row;
    height: auto;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 16px;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 30px;
}

.cpl-icon-logout {
    display: inline-block;
    width: 14px;
    height: 14px;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    background-color: currentColor;
}

.cpl-message-notice {
    text-align: center;
    padding: 30px;
}


/* News Widget */

.cpl-news-item {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--cpl-color-border);
    display: flex;
    gap: 15px;
}

.cpl-news-thumbnail {
    flex: 0 0 120px;
}

.cpl-news-content {
    flex: 1;
}

.cpl-news-title {
    margin: 0 0 10px;
    font-size: 16px;
}

.cpl-news-title a {
    text-decoration: none;
    color: var(--cpl-color-text-main);
}

.cpl-news-meta {
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.cpl-news-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cpl-news-excerpt {
    font-size: 13px;
    color: #555;
}


/* Reviews Widget */

.cpl-reviews-widget-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}


/* 新着情報ウィジェットのカード
   (.cpl-news-list[class*="cpl-news-cols-"] .cpl-news-item) と同じ見た目にそろえる。
   白背景 / ボーダーなし / border-radius:6px / box-shadow、ホバー時の浮き上がりも同じ。 */

.cpl-review-widget-item {
    background-color: var(--cpl-color-surface, #ffffff);
    padding: 15px;
    border: none;
    border-radius: var(--cpl-radius-md, 12px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cpl-review-widget-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.cpl-review-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 5px;
}

.cpl-review-widget-nickname {
    font-weight: bold;
    font-size: 14px;
}

.cpl-review-widget-stars {
    color: #ff9800;
    font-size: 14px;
}

.cpl-review-widget-meta {
    font-size: 11px;
    color: #666;
    margin-bottom: 8px;
}

.cpl-review-widget-meta a {
    color: var(--cpl-main-color);
    font-weight: bold;
    text-decoration: none;
}

.cpl-review-widget-content {
    font-size: 13px;
    line-height: 1.5;
    color: #555;
}

.cpl-empty-message {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 20px 0;
}

.cpl-shortcode-warning {
    color: red;
    font-weight: bold;
    text-align: center;
    padding: 20px;
    border: 1px solid #ddd;
    background: #fff0f0;
}


/* 選択中のタイプ。
   注) 以前は var(--cpl-color-accent1) 由来で、この変数が空の環境では
       「背景が透明 + 文字色が白」になり、ボタンの中身が見えなくなっていた。
       変数に依存しない黒背景にする。 */

.cpl-filter-btn.active {
    background: #333333;
    color: #ffffff;
    border-color: #333333;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}


/* -------------------------------------
 * セクションタイトル
 * ------------------------------------- */

.cpl-cast-list {
    display: grid;
    gap: var(--cpl-space-md);
}


/* PC用 グリッド (デフォルト) */

.cpl-grid-sp-1_stacked {
    grid-template-columns: 1fr;
}

.cpl-grid-sp-1_parallel {
    grid-template-columns: 1fr;
}

.cpl-grid-sp-2 {
    grid-template-columns: repeat(2, 1fr);
}


/* PC用 4カラムグリッド */

@media (min-width: 768px) {
    .cpl-cast-list.cpl-grid-pc-1_parallel {
        grid-template-columns: 1fr;
    }
    .cpl-cast-list.cpl-grid-pc-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .cpl-cast-list.cpl-grid-pc-2_stacked {
        grid-template-columns: repeat(2, 1fr);
    }
    .cpl-cast-list.cpl-grid-pc-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .cpl-cast-list.cpl-grid-pc-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* -------------------------------------
 * PC用 5カラムグリッド
 * ------------------------------------- */

.cpl-cast-card {
    position: relative;
    background: var(--cpl-glass-bg);
    border: var(--cpl-glass-border);
    border-radius: var(--cpl-radius-md);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.cpl-cast-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.cpl-card-inner {
    display: flex;
    flex-direction: column;
}


/* SP用 1カラムグリッド */

.cpl-grid-sp-1_parallel .cpl-card-inner,
.cpl-grid-pc-1_parallel .cpl-card-inner,
.cpl-grid-pc-2 .cpl-card-inner {
    flex-direction: row;
}


/* SP用 2カラムグリッド */

.cpl-card-image {
    position: relative;
    width: 100%;
}

.cpl-grid-sp-1_parallel .cpl-card-image,
.cpl-grid-pc-1_parallel .cpl-card-image,
.cpl-grid-pc-2 .cpl-card-image {
    width: 40%;
    flex-shrink: 0;
}


/* SP用 3カラムグリッド */

.cpl-card-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
}


/* -------------------------------------
 * 在籍キャスト一覧: 表示スタイル(PC)「1列」「2列」「3列」「4列」の
 * デフォルトデザイン (2026-09 追加)
 * ------------------------------------- */

.cpl-cast-list.cpl-grid-pc-1 .cpl-cast-card,
.cpl-cast-list.cpl-grid-pc-2 .cpl-cast-card,
.cpl-cast-list.cpl-grid-pc-3 .cpl-cast-card,
.cpl-cast-list.cpl-grid-pc-4 .cpl-cast-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    border: none;
    padding: 5px;
}

.cpl-cast-list.cpl-grid-pc-1 .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-2 .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-3 .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-4 .cpl-card-image {
    /* 同じ詳細度(0,2,0)の角丸リセット(border-radius:0)がファイル末尾に
       複数存在し、後勝ちで打ち消されてしまうため、実際の角丸指定は
       ファイル末尾の最終上書きブロックで行う。ここでは意図を明示するために残す。 */
    border-radius: 12px;
}

.cpl-cast-list.cpl-grid-pc-1 .cpl-btn-shadow,
.cpl-cast-list.cpl-grid-pc-2 .cpl-btn-shadow,
.cpl-cast-list.cpl-grid-pc-3 .cpl-btn-shadow,
.cpl-cast-list.cpl-grid-pc-4 .cpl-btn-shadow {
    border: none;
}


/* 注) テーマの動的CSS(cpl-style-inline-css)が .cpl-cast-card に対して
       border: var(--cpl-content-border-width) solid var(--cpl-main-color);
       (ピンク色のボーダー、コンテンツ設定由来) を後から出力している。
       .cpl-cast-card 単体(詳細度 0,1,0)で上書きしようとするとこの動的CSSに
       負けてしまうため、キャストカードに限定して親要素 .cpl-cast-list を
       挟んだ 0,2,0 のセレクタでボーダーを無効化する。表示スタイルを問わず
       全ての在籍キャスト一覧に適用され、!important は使用しない。
       (.cpl-wrapper / .cpl-news-list / .cpl-age-modal-content /
       .cpl-single-block 側のボーダー設定には影響しない) */

.cpl-cast-list .cpl-cast-card {
    border: none;
}


/* アクションボタングループ */

.cpl-badge-working-now {
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(255, 0, 0, 0.8);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 3px 6px;
    border-radius: 4px;
}

.cpl-widget-cast-list-container {
    max-width: var(--cpl-widget-max-width, 100%);
    margin: 0 auto;
}

.cpl-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
    justify-content: center;
}

.cpl-badge {
    background: var(--cpl-color-surface);
    color: var(--cpl-color-text-main);
    font-size: 10px;
    padding: 3px 8px;
    border: 1px solid var(--cpl-color-border);
    border-radius: 9999px;
}


/* ボタン共通スタイル */

.cpl-card-info {
    padding: var(--cpl-space-sm) var(--cpl-space-md);
    padding-bottom: 60px;
    /* アクションボタンと重ならないように余白を追加 */
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cpl-cast-name {
    margin: 0 0 5px 0;
    font-size: 16px;
    text-align: center;
}

.cpl-cast-name a {
    color: var(--cpl-color-text-main);
    text-decoration: none;
}

.cpl-age {
    font-size: 12px;
    color: var(--cpl-color-text-sub);
    font-weight: normal;
}

.cpl-cast-sizes {
    margin: 0 0 8px 0;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    color: var(--cpl-color-text-sub);
}

.cpl-cast-time {
    margin: 0 0 8px 0;
    color: var(--cpl-color-accent1);
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cpl-cast-status-wrap {
    margin-bottom: 8px;
}


/* いいねボタン */

.cpl-cast-status-btn {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 0;
    font-size: 12px;
    font-weight: bold;
    border-radius: 26px;
}

.status-working {
    background: #eaff00;
    /* フワフワ浮かぶハートのアニメーション */
    color: var(--cpl-color-text-main);
}

.status-ended {
    background: #222;
    color: #fff;
}

.status-waiting {
    background: #f1f1f1;
    color: var(--cpl-color-text-sub);
}

.status-off {
    background: #f1f1f1;
    color: var(--cpl-color-text-sub);
}


/* メッセージボタン */

.cpl-cast-msg {
    margin-top: auto;
    font-size: 11px;
    color: var(--cpl-color-text-sub);
    background: rgba(255, 255, 255, 0.6);
    padding: 6px 10px;
    border-radius: calc(var(--cpl-border-radius) * 0.4);
    border: var(--cpl-glass-border);
}


/* 詳細・プロフィールボタン */

@media (min-width: 768px) {
    /* ボタンホバー時 */
    .cpl-grid-pc-2_stacked .cpl-card-inner,
    .cpl-grid-pc-3 .cpl-card-inner,
    .cpl-grid-pc-4 .cpl-card-inner {
        flex-direction: column;
    }
    .cpl-grid-pc-2_stacked .cpl-card-image,
    .cpl-grid-pc-3 .cpl-card-image,
    .cpl-grid-pc-4 .cpl-card-image {
        width: 100%;
    }
}


/* -------------------------------------
 * CSSスタイル調整
 * ------------------------------------- */

.cpl-advanced-search-wrap {
    margin-bottom: 20px;
    background: var(--cpl-glass-bg);
    backdrop-filter: var(--cpl-glass-blur);
    border: var(--cpl-glass-border);
    /* 2026-09-28: 以前は var(--cpl-radius-md) (= サイト全体の「コンテンツ枠線の角丸」設定から
       算出される可変値) を使っていたため、その設定を大きくすると「絞り込み＆並び替え」パネルの
       背景ボックスだけ異様に巨大な角丸(ピル型)になってしまっていた。この箱は他のコンテンツ枠と
       独立した固定デザインとし、常に12pxの角丸にする。 */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.cpl-advanced-search-toggle {
    position: relative;
    width: 100%;
    padding: 15px 40px 15px 15px;
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: bold;
    color: var(--cpl-color-text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.cpl-advanced-search-toggle:hover {
    background: rgba(0, 0, 0, 0.02);
}

.cpl-advanced-search-toggle .cpl-icon {
    margin-right: 8px;
    color: var(--cpl-main-color);
}

.cpl-advanced-search-toggle .cpl-arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    font-size: 10px;
    transition: transform 0.3s;
}

.cpl-advanced-search-toggle.is-open .cpl-arrow {
    transform: translateY(-50%) rotate(180deg);
}

.cpl-advanced-search-content {
    display: none;
    padding: 20px;
    border-top: 1px solid var(--cpl-color-border);
}

.cpl-search-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .cpl-search-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cpl-search-group label {
    display: block;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--cpl-color-text-sub);
}

.cpl-search-select,
.cpl-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    border-radius: calc(var(--cpl-border-radius) * 0.4);
    border: 1px solid var(--cpl-color-border);
    background: var(--cpl-color-surface);
    font-size: 14px;
}


/* CSSスタイル調整 */

.cpl-dual-range {
    position: relative;
    height: 30px;
    width: 100%;
}


/* レール。選択中の範囲だけを濃いグレーで塗る。
   --cpl-range-from / --cpl-range-to は main.js が .cpl-dual-range に
   パーセントでセットする（カスタムプロパティなので子のレールへ継承される）。 */

.cpl-range-track {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    width: 100%;
    background: linear-gradient( to right, #e0e0e0 0%, #e0e0e0 var(--cpl-range-from, 0%), #9e9e9e var(--cpl-range-from, 0%), #9e9e9e var(--cpl-range-to, 100%), #e0e0e0 var(--cpl-range-to, 100%), #e0e0e0 100%);
    border-radius: 3px;
    z-index: 1;
}

.cpl-dual-range input[type="range"] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
    z-index: 2;
    margin: 0;
}


/* つまみ。以前は background: var(--cpl-color-accent1) だったが、この変数は
   --cpl-main-color 由来で、空文字が入っていると解決できず「色なし＝透明」に
   なってしまう（実際にスライダーが無色に見えていた原因）。
   変数に依存しないグレーを既定にする。 */

.cpl-dual-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #757575;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border: 2px solid #fff;
}

.cpl-dual-range input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #757575;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border: 2px solid #fff;
}


/* CSSスタイル調整 */

.cpl-search-checks-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.cpl-checkbox-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cpl-check-label {
    cursor: pointer;
}

.cpl-check-label input[type="checkbox"] {
    display: none;
}

.cpl-check-btn {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--cpl-color-border);
    border-radius: var(--cpl-border-radius);
    font-size: 12px;
    background: var(--cpl-color-surface);
    color: var(--cpl-color-text-sub);
    transition: all 0.2s;
}


/* 選択中。つまみと同じ理由で変数に依存させず、グレーで塗る。 */

.cpl-check-label input[type="checkbox"]:checked+.cpl-check-btn {
    background: #555555;
    color: #ffffff;
    border-color: #555555;
}


/* -------------------------------------
 * いいねボタン
 * ------------------------------------- */

.cpl-widget .cpl-like-btn {
    position: absolute;
    border: 1px solid #ddd;
    bottom: 10px;
    right: 10px;
    /* メッセージボタンと同じ 40px にそろえる（基準は .cpl-btn-shadow） */
    width: 40px;
    height: 40px;
    background-color: var(--cpl-color-surface);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
    transition: transform 0.2s, box-shadow 0.2s;
    outline: none;
}

.cpl-like-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cpl-like-btn:active {
    transform: scale(0.95);
}

.cpl-heart-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #999;
    stroke-width: 2px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cpl-like-btn.is-liked .cpl-heart-icon {
    fill: #ff4081;
    stroke: #ff4081;
    transform: scale(1.1);
}


/* フワフワ浮かぶハートのアニメーション */

.cpl-floating-heart {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    pointer-events: none;
    z-index: 11;
    animation: cpl-float-up 1.5s ease-out forwards;
}

@keyframes cpl-float-up {
    0% {
        opacity: 1;
        transform: translate(-50%, 0) scale(0.5);
    }
    20% {
        transform: translate(calc(-50% - 10px), -20px) scale(1.2);
    }
    40% {
        transform: translate(calc(-50% + 10px), -40px) scale(1);
    }
    60% {
        transform: translate(calc(-50% - 8px), -60px) scale(1);
    }
    80% {
        transform: translate(calc(-50% + 8px), -80px) scale(0.9);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -100px) scale(0.5);
        opacity: 0;
    }
}


/* いいね用モーダル */

.cpl-like-modal-content {
    max-width: 400px;
}

.cpl-like-text {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: center;
}

.cpl-btn-register {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--cpl-color-gradient);
    color: #fff;
    padding: 16px;
    border-radius: var(--cpl-button-radius, 50px);
    font-weight: bold;
    text-decoration: none;
    transition: var(--cpl-transition);
    box-shadow: 0 4px 15px rgba(255, 123, 172, 0.4);
    border: none;
    cursor: pointer;
}

.cpl-btn-register:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 123, 172, 0.6);
    color: #fff;
}

.cpl-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--cpl-color-text-sub);
}

.cpl-modal-close:hover {
    color: var(--cpl-color-text-main);
}

.cpl-like-modal-content {
    position: relative;
}

.cpl-like-text p:first-child {
    margin-top: 0;
}

.cpl-like-text p:last-child {
    margin-bottom: 0;
}

.cpl-auth-form-wrap {
    text-align: left;
}

.cpl-auth-form-wrap h2 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 20px;
    color: var(--cpl-color-text-main);
}

.cpl-form-group {
    margin-bottom: 15px;
}

.cpl-form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 14px;
    color: var(--cpl-color-text-main);
}

.cpl-form-group input {
    width: 100%;
    padding: 0;
    border: 1px solid var(--cpl-color-border);
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

.cpl-auth-menu {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cpl-auth-link {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--cpl-color-text-main);
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}

.cpl-auth-link:hover {
    color: var(--cpl-color-accent1);
}

.cpl-welcome-text {
    font-size: 14px;
    color: var(--cpl-color-text-main);
}

.cpl-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cpl-header-brand {
    flex: 1;
}


/* -------------------------------------
 * 週間出勤スケジュール ナビゲーション
 * ------------------------------------- */

.cpl-schedule-nav-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 25px;
    width: 100%;
}

.cpl-schedule-tabs {
    display: flex;
    justify-content: center;
    gap: 5px;
    flex-grow: 0;
    overflow-x: auto;
    padding: 5px 0;
    -webkit-overflow-scrolling: touch;
}

.cpl-schedule-page-widget .cpl-schedule-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--cpl-color-surface);
    border: 1px solid var(--cpl-color-border, #ddd);
    border-radius: 50%;
    /* 丸いデザイン（正円） */
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    padding: 0;
    box-sizing: border-box;
}

.cpl-schedule-tab:hover {
    border-color: var(--cpl-color-accent1);
}

.cpl-schedule-tab.active {
    /* 日付タブ(アクティブ)の背景はグラデーションを廃止し、単色(アクセントカラー)とする。
       background-image が残っていると、ビルダーの右パネルで指定した背景色が見えないため。
       --cpl-schedule-active-color は「出勤カレンダー」ウィジェット(.cpl-schedule-page-widget)
       の右パネル「出勤設定」>「アクティブカラー」から指定される(builder-preview.js /
       cpl_build_element_css_rules 経由)。未指定時は従来どおりアクセントカラーを使う。
       box-shadowは既定で常時付いてしまい見た目が重いという声があったため削除した
       (2026-09-21)。 */
    background: var(--cpl-schedule-active-color, var(--cpl-color-accent1, #ff7bac));
    border-color: transparent;
    color: #fff;
}

.cpl-schedule-tab.active .cpl-tab-w {
    color: #fff;
}

.cpl-tab-md {
    font-size: 13px;
    font-weight: bold;
    line-height: 1.2;
}

.cpl-tab-w {
    font-size: 10px;
    color: var(--cpl-color-text-sub, #666);
    line-height: 1.2;
    margin-top: 1px;
}


/* 土日のカラー調整 */

.cpl-schedule-tab.saturday:not(.active) {
    color: #2563eb;
    border-color: rgba(37, 99, 235, 0.3);
}

.cpl-schedule-tab.saturday:not(.active) .cpl-tab-w {
    color: #2563eb;
}

.cpl-schedule-tab.sunday:not(.active) {
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.3);
}

.cpl-schedule-tab.sunday:not(.active) .cpl-tab-w {
    color: #dc2626;
}


/* 矢印ナビゲーション */

.cpl-schedule-nav-arrow {
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    color: var(--cpl-color-text-main, #333);
    background: var(--cpl-color-surface);
    border: 1px solid var(--cpl-color-border, #ddd);
    border-radius: 30px;
    padding: 8px 16px;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    height: 40px;
    box-sizing: border-box;
}

.cpl-schedule-nav-arrow:hover {
    border-color: var(--cpl-color-accent1);
    color: var(--cpl-color-accent1);
}


/* モバイル向けスタイル調整 */

@media (max-width: 767px) {
    .cpl-schedule-nav-container {
        gap: 6px;
    }
    .cpl-schedule-nav-arrow {
        border-radius: 50%;
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        padding: 0;
        justify-content: center;
        align-items: center;
    }
    .cpl-schedule-nav-arrow span {
        display: none;
        /* モバイルでは矢印テキストを非表示 */
    }
    .cpl-schedule-nav-arrow svg {
        margin: 0;
        width: 18px;
        height: 18px;
    }
    .cpl-schedule-tabs {
        gap: 4px;
        flex-grow: 0;
        overflow: hidden;
    }
    .cpl-schedule-page-widget .cpl-schedule-tab {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }
    .cpl-tab-md {
        font-size: 11px;
    }
    .cpl-tab-w {
        font-size: 8px;
        margin-top: 0px;
    }
}


/* Swiperナビゲーションの調整 (ピンク基調のデザインに合わせる) */

.cpl-cast-list.swiper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    padding-bottom: 40px;
    /* ページネーション配置用の余白 */
}


/* PCスライド設定のときだけ、スライダー最大幅を480pxにする */

.cpl-cast-list.cpl-grid-pc-slide.swiper {
    max-width: 480px;
}


/* モバイルスライド設定のときだけ、モバイル(767px以下)でスライダー最大幅を480pxにする */

@media (max-width: 767px) {
    .cpl-cast-list.cpl-grid-sp-slide.swiper {
        max-width: 480px;
    }
}

.cpl-cast-list.swiper-disabled .swiper-wrapper {
    display: contents;
}


/* スライダーが無効化されている時、全スライダーの幅設定を解除してグリッドに移行する */

.cpl-cast-list.swiper-disabled .swiper-slide {
    width: 100%;
    max-width: none;
    height: auto;
}

.cpl-cast-list.swiper-disabled .swiper-button-next,
.cpl-cast-list.swiper-disabled .swiper-button-prev,
.cpl-cast-list.swiper-disabled .swiper-pagination {
    display: none;
}


/* Swiperナビゲーションの調整（ピンク基調のスタイルに合わせる） */

.cpl-cast-list .swiper-button-next,
.cpl-cast-list .swiper-button-prev {
    color: var(--cpl-color-accent1, #ff7bac);
    width: 30px;
    height: 30px;
}

.cpl-cast-list .swiper-button-next::after,
.cpl-cast-list .swiper-button-prev::after {
    font-size: 20px;
}

.cpl-cast-list .swiper-pagination-bullet-active {
    background: var(--cpl-color-accent1, #ff7bac);
}

.cpl-cast-list .swiper-pagination {
    bottom: 0px;
}

.cpl-cast-list.swiper .cpl-cast-card {
    height: 100%;
    box-sizing: border-box;
}


/* ==========================================
   店舗情報・カレンダー・ナビゲーション
   ========================================== */


/* ユーティリティバー */

.cpl-top-utility-bar {
    background-color: transparent;
    padding: 6px 0;
    font-size: 11px;
}

.cpl-top-utility-bar-inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}


/* サイトのコンテンツ幅を適用せず、横100%にして右余白を追加 */

.cpl-top-utility-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cpl-top-utility-right .cpl-auth-menu {
    margin: 0;
}

.cpl-top-utility-right a {
    color: #ff7bac;
    text-decoration: none;
    font-weight: bold;
}

.cpl-top-utility-right a:hover {
    text-decoration: underline;
}


/* カレンダー全体 */

.cpl-header {
    background-color: var(--cpl-header-bg-color, var(--cpl-glass-bg));
    color: var(--cpl-header-text-color, var(--cpl-color-text-main));
    position: relative;
    z-index: 100;
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
    /* ビルダー「ヘッダー設定」の「mix blend mode」(--cpl-header-blend-mode)。
       以前は変数を書き込むだけで参照するCSSが無く、パネルで変更しても何も起きなかった。
       ※「ガラス効果」(--cpl-header-glass-blur)は backdrop-filter が position:fixed の
         子孫(ドロワーメニュー等)の基準位置を変えてしまうため常時は付けず、値が設定されて
         いる時だけ PHP(class-cpl-templates.php)/プレビューJS が backdrop-filter を出力する。 */
    mix-blend-mode: var(--cpl-header-blend-mode, normal);
}


/* ビルダー「固定ヘッダー」設定。
   data-cpl-header-fixed / data-cpl-header-transparent 属性は、ビルダー(プレビュー)と
   PHP(cpl_get_header_global_attrs)の両方が出力するが、対応するCSSが存在しなかったため
   トグルをONにしても見た目が変わらなかった。
   - 固定表示にする: PCのみ position:fixed(パネルの注記どおりモバイルは通常配置)。
     背景色は「固定時の背景色」(--cpl-header-fixed-bg-color)、影は --cpl-header-fixed-shadow。
   - 非固定時に背景を透過: 固定表示がOFFの間だけ背景を透明にする。 */

/* 公開ページはビューポート幅で判定する(従来どおり)。ビルダーのプレビューでは
   <html data-cpl-device> が付くのでこの幅基準のルールは効かず、代わりに
   assets/css/builder-preview.css の「選択中のデバイス」基準のルールが効く。
   プレビューのiframeは左右のパネル分だけ狭く、「デスクトップ」表示でも 768px 未満に
   なることが多いため、幅基準のままだと固定ヘッダーがプレビューで再現できなかった。 */
@media (min-width: 768px) {
    html:not([data-cpl-device]) .cpl-header[data-cpl-header-fixed="1"] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        z-index: 1000 !important;
        background-color: var( --cpl-header-fixed-bg-color, var(--cpl-header-bg-color, var(--cpl-glass-bg)));
        box-shadow: var(--cpl-header-fixed-shadow, none);
    }
    /* 固定ヘッダーの下にコンテンツが潜り込まないよう、main.js が実測した高さを
       body に padding-top として設定する(トップページで「ヒーローに重ねる」が
       ONの場合は重ねる前提なので設定しない)。 */
    html:not([data-cpl-device]) body.cpl-has-fixed-header {
        padding-top: var(--cpl-fixed-header-height, 0px);
    }
}

.cpl-header[data-cpl-header-transparent="1"]:not([data-cpl-header-fixed="1"]) {
    background-color: transparent !important;
    background-image: none !important;
}

.cpl-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}


/* 左側: ブランドロゴ */

.cpl-header-brand {
    display: flex;
    align-items: center;
    height: 100%;
}

.cpl-header-brand h1.site-title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.cpl-header-brand h1.site-title a {
    color: var(--cpl-color-text-main);
    text-decoration: none;
    display: flex;
    align-items: center;
}

.cpl-header-logo {
    max-height: 56px;
    width: auto;
    display: block;
}


/* 中央: PC用ナビゲーション */

.cpl-header-nav-pc {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.cpl-menu-list-pc {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    align-items: center;
}

.cpl-menu-list-pc li {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.cpl-menu-list-pc li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    height: 100%;
    color: var(--cpl-color-text-main);
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.3;
    transition: color 0.2s ease;
    text-align: center;
}


/* タイトル属性（サブタイトル）がないメニュー項目も、他のメニューと高さを揃えるための補正 */

.cpl-menu-list-pc li a:not(:has(span)) {
    padding-bottom: 19px;
}

.cpl-menu-list-pc li a span {
    font-size: 10px;
    font-weight: normal;
    color: var(--cpl-color-text-sub);
    margin-top: 2px;
    margin-bottom: 4px;
    /* 補足: 英語と重ならないように設計 */
}

.cpl-menu-list-pc li.current-menu-item a {
    color: var(--cpl-main-color);
}

.cpl-menu-list-pc li::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 3px;
    background-color: var(--cpl-main-color);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.cpl-menu-list-pc li:hover::after,
.cpl-menu-list-pc li.current-menu-item::after {
    transform: scaleX(1);
}


/* 右側: PC用店舗情報 */

.cpl-header-shopinfo-pc {
    text-align: right;
    font-size: 14px;
    color: #555;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cpl-header-shopinfo-pc p {
    margin: 0;
}

.cpl-shop-phone-pc {
    font-size: 22px;
    font-weight: 800;
    color: var(--cpl-color-text-main);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 2px;
}

.cpl-phone-icon {
    margin-right: 4px;
    color: var(--cpl-main-color);
    stroke-width: 2.5px;
}


/* =========================================================================
 * メニューボタン (PC/SP共通)
 * ========================================================================= */

.cpl-menu-toggle-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background-color: #ff7bac;
    border: 2px solid #e91e63;
    border-radius: 50%;
    position: fixed;
    right: 20px;
    top: 40px;
    /* cpl-header-innerの高さ80pxの中央 */
    transform: translateY(-50%);
    cursor: pointer;
    padding: 0;
    z-index: 1010;
    box-shadow: 0 3px 10px rgba(44, 44, 44, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.cpl-menu-toggle-btn:hover {
    transform: translateY(-50%) scale(1.08);
}

.cpl-menu-toggle-line {
    width: 18px;
    height: 2px;
    background-color: var(--cpl-color-surface);
    margin: 2px 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}


/* ハンバーガーアニメーション (開いた状態) */

.cpl-menu-toggle-btn.cpl-menu-open .cpl-menu-toggle-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.cpl-menu-toggle-btn.cpl-menu-open .cpl-menu-toggle-line:nth-child(2) {
    opacity: 0;
}

.cpl-menu-toggle-btn.cpl-menu-open .cpl-menu-toggle-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}


/* モバイル用メタバー・電話ボタン (PC非表示) */

.cpl-header-mobile-meta {
    display: none;
}


/* =========================================================================
 * ドロワーメニュー (PC/SP共通)
 * ========================================================================= */

.cpl-drawer-menu-wrap {
    display: none;
    /* JSでスライド制御 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    padding-top: 100px;
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    border-top: 1px solid #f0f0f0;
}

.cpl-menu-list-drawer {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cpl-menu-list-drawer li {
    border-bottom: 1px solid #e7e7e7;
}

.cpl-menu-list-drawer li a {
    display: block;
    padding: 16px 20px;
    color: var(--cpl-color-text-main);
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.cpl-menu-list-drawer li a:active {
    background-color: var(--cpl-color-bg);
}

.cpl-menu-list-drawer li a span.cpl-menu-subtitle {
    display: block;
    font-size: 10px;
    font-weight: normal;
    color: var(--cpl-color-text-sub);
    margin-top: 2px;
}


/* ヘッダー底面 (PC用ナビゲーション) */

.cpl-header-bottom {
    background-color: transparent;
    display: flex;
    align-items: center;
}

.cpl-header-bottom .cpl-container {
    width: 100%;
    height: 100%;
}


/* レスポンシブ (モバイル表示) */

@media (max-width: 767px) {
    .cpl-top-utility-bar {
        padding: 4px 80px 0 0;
    }
    .cpl-top-utility-bar-inner {
        justify-content: center;
    }
    .cpl-header-inner {
        justify-content: center;
        /* ロゴを中央配置 */
    }
    .cpl-header-brand {
        margin: 0 auto;
    }
    .cpl-header-logo {
        max-height: 48px;
    }
    .cpl-header-nav-pc,
    .cpl-header-shopinfo-pc {
        display: none;
    }
    /* トグルボタンはモバイルに移動 */
    /* モバイル専用メタ情報エリア */
    .cpl-header-mobile-meta {
        display: block;
        background-color: var(--cpl-color-surface);
        padding: 10px 15px 15px;
        text-align: center;
        border-top: 1px solid #f5f5f5;
        border-bottom: 1px solid var(--cpl-color-border);
    }
    .cpl-shop-address-sp {
        font-size: 12px;
        color: var(--cpl-color-text-main);
        margin: 0 0 4px 0;
    }
    .cpl-shop-hours-sp {
        font-size: 12px;
        color: var(--cpl-color-text-main);
        margin: 0 0 10px 0;
    }
    /* モバイル電話ボタン (デザイン・グローのセクション) */
    .cpl-btn-phone-sp {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        height: 48px;
        background: linear-gradient(135deg, #ff9a44 0%, #fc6076 100%);
        color: #fff;
        font-size: 18px;
        font-weight: 800;
        text-decoration: none;
        border-radius: var(--cpl-button-radius, 24px);
        box-shadow: 0 4px 12px rgba(252, 96, 118, 0.35);
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .cpl-btn-phone-sp:active {
        transform: scale(0.98);
        opacity: 0.95;
    }
    .cpl-phone-icon-sp {
        margin-right: 6px;
        stroke: #fff;
        stroke-width: 2.5px;
    }
    /* ドロワーメニューはモバイルに移動 */
}


/* ユーティリティバーに移動した翻訳プラグインのスタイル調整 */

.cpl-top-utility-right #cp-translate-switcher {
    position: static;
    display: inline-flex;
    align-items: center;
    background-color: var(--cpl-color-surface);
    border: 1px solid var(--cpl-color-border);
    border-radius: 4px;
    padding: 0 4px;
    height: 24px;
    box-shadow: none;
    margin-left: 12px;
    margin-right: 0;
    transform: none;
    z-index: auto;
}

.cpl-top-utility-right #cp-translate-switcher select {
    font-size: 14px;
    padding: 0 2px;
    height: 100%;
    color: var(--cpl-color-text-main);
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    vertical-align: middle;
}


/* モバイル表示時のブランドロゴ中央配置 */

@media (max-width: 767px) {
    .cpl-header-brand {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 200px;
        /* 次のボタンに干渉しないように調整 */
        margin: 0 auto;
        text-align: center;
    }
    .cpl-header-brand h1.site-title a {
        justify-content: center;
    }
}


/* =========================================
   スライダー (Slider)
   注) 角丸は「CASTPRO:スライダー」ウィジェット設定パネルの「角丸設定」
   (widgetSliderRadius)が、PHP側(CPL_Widget_Slider::widget())で
   .cpl-slider-container に --cpl-slider-radius としてインライン出力される。
   以前はこの変数をCSS側のどこからも参照しておらず、常にデザインシステムの
   既定値(--cpl-radius-md)が使われてしまい、「角丸設定」を0にしても
   見た目が変わらない不具合になっていた(2026-09-18修正)。
   --cpl-slider-radius が未設定の場合のみ --cpl-radius-md にフォールバックする。
========================================= */

.cpl-slider-container {
    border-radius: var(--cpl-slider-radius, var(--cpl-radius-md, 12px));
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.cpl-main-slider .swiper-slide img {
    border-radius: var(--cpl-slider-radius, var(--cpl-radius-md, 12px));
    object-fit: cover;
}

.cpl-main-slider .swiper-button-next,
.cpl-main-slider .swiper-button-prev {
    color: var(--cpl-color-accent1);
    background: rgba(255, 255, 255, 0.7);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cpl-main-slider .swiper-button-next:after,
.cpl-main-slider .swiper-button-prev:after {
    font-size: 18px;
    font-weight: bold;
}

.cpl-main-slider .swiper-pagination-bullet-active {
    background: var(--cpl-color-accent1);
}


/* =========================================
   最新情報 (News)
========================================= */


/* 一覧そのものはカードではないため、親から継承し得る装飾を打ち消す。
   注) 動的CSS(cpl-style-inline-css)が .cpl-news-list へ背景色・枠線・影を
   後から出力するが、実マークアップには必ず .cpl-news-cols-N が付く
   (CPL_Shortcodes::render_news_shortcode)ため、下の 0,2,0 のルールが
   詳細度で勝つ。!important は不要。 */

.cpl-news-list {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

.cpl-news-item {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.cpl-news-item:hover {
    opacity: 0.8;
}

.cpl-news-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.cpl-news-title a {
    transition: color 0.2s ease;
    font-weight: bold;
}

.cpl-news-title a:hover {
    color: var(--cpl-color-accent1);
}

@media (max-width: 767px) {
    .cpl-news-item {
        flex-direction: column;
        gap: 10px;
    }
    .cpl-news-thumbnail {
        flex: none;
        width: 100%;
        max-width: 200px;
    }
}


/* 会員専用メディアの制限表示 */

.cpl-restricted-media {
    position: relative;
    overflow: hidden;
}

.cpl-blur-image {
    filter: blur(10px);
    transition: filter 0.3s ease;
}

.cpl-restricted-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
    /* 親のaタグクリックを妨げない */
}

.cpl-restricted-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin-bottom: 8px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.cpl-restricted-text {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}


/* ==========================================================================
   キャスト個別詳細ページ (single-cast)
   ========================================================================== */

.cpl-single-cast-wrap {
    font-size: 13px;
    color: var(--cpl-color-text-main);
    line-height: 1.6;
}

/* 注) 以前は h2/h3/h4 もこの 13px リセットの対象だった。テンプレートの見出しに
       インラインstyle(font-size:16px 等)が付いていたため表面化していなかったが、
       インラインstyleを外した(2026-09-21)ことで .cpl-single-h3(0,1,0)が
       この 0,1,1 のルールに負けて 13px になってしまうため、見出しは対象から外す。
       見出しのサイズは .cpl-single-title / .cpl-single-h3 と、サイト全体の
       タイポグラフィ(h2/h3 タグセレクタ)が決める。 */
.cpl-single-cast-wrap p,
.cpl-single-cast-wrap div,
.cpl-single-cast-wrap table,
.cpl-single-cast-wrap select,
.cpl-single-cast-wrap input,
.cpl-single-cast-wrap textarea {
    font-size: 13px;
}


/* スライダー装飾 */

.cpl-single-swiper-main {
    border-radius: var(--cpl-content-border-radius);
    overflow: hidden;
    /* 既定の影は削除(2026-09-21)。キャスト詳細の各ブロックと揃えて影なしにする。 */
    aspect-ratio: 3/4;
    margin: 0 auto;
}

.cpl-slider-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cpl-single-swiper-main .swiper-button-prev,
.cpl-single-swiper-main .swiper-button-next {
    color: #fff;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.cpl-single-swiper-main .swiper-pagination-bullet-active {
    background: var(--cpl-main-color);
}


/* サムネイル */

.cpl-thumb-item:hover,
.cpl-thumb-item.is-active {
    transform: scale(1.08);
}


/* 本日出勤バッジ */

.cpl-working-today-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 10;
    background: #e60012;
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}


/* セクション見出し <h3> */

.cpl-single-h3 {
    font-size: 15px;
    font-weight: bold;
    color: var(--cpl-color-text-main);
    text-align: center;
    border: none;
    margin-bottom: 20px;
}

.cpl-single-h3 .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* スケジュールテーブル */

.cpl-single-schedule-table th,
.cpl-single-schedule-table td {
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.cpl-single-schedule-table th.is-sunday {
    color: #c00;
}

.cpl-single-schedule-table th.is-saturday {
    color: #00c;
}


/* レコメンドカードのホバーエフェクト */

.cpl-recommend-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.cpl-recommend-card:hover img {
    transform: scale(1.05);
}


/* いいね・メッセージボタンのホバー・アクティブ */

.cpl-single-action-row button:hover,
.cpl-single-action-row a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


/* シングルのいいねボタンの崩れ防止と一覧ボタン風スタイル */

.cpl-single-like-btn {
    position: static;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    height: auto;
    background: #fff;
    border: none;
    border-radius: 30px;
    padding: 10px 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: all 0.2s;
    /* メインカラーに統一 */
    text-decoration: none;
}

.cpl-single-like-btn span {}

.cpl-single-like-btn .cpl-heart-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--cpl-main-color);
    /* ハートの枠線もメインカラーに統一 */
    stroke-width: 2;
    transition: fill 0.2s, stroke 0.2s;
    vertical-align: middle;
}

.cpl-single-like-btn.is-liked .cpl-heart-icon {
    fill: var(--cpl-main-color);
}

.cpl-single-like-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


/* メッセージボタンのテキスト色もメインカラーに統一 */

.cpl-btn-message {
    border-color: #ddd;
}

.cpl-btn-message span {}

.cpl-btn-message svg {}


/* 見出しの丸いアイコンラップ */

.cpl-h3-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    /* 紫からピンクのグラデーション背景 */
    background: linear-gradient(135deg, #764ba2 0%, #ff758c 100%);
    color: #fff;
    flex-shrink: 0;
    vertical-align: middle;
}

.cpl-h3-icon-wrap .dashicons {
    color: #fff;
    font-size: 16px;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}


/* 週間出勤スケジュールの出勤時間色を黒(#333)に固定 */

.cpl-single-schedule-table td div {
    color: #333;
}


/* ホバー時の文字白化干渉を防ぐ上書きルール */

.cpl-widget a:hover,
.cpl-main-content a:hover,
.cpl-single-cast-wrap a:hover {
    text-decoration: underline;
}

.cpl-cast-name a:hover {
    text-decoration: none;
}

.cpl-news-title a:hover {}


/* --------------------------------------------------------------------------
 * Auth Form Customization
 * -------------------------------------------------------------------------- */

.cpl-auth-form-wrap {
    padding: 30px;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    border-radius: 10px;
    /* 角丸コンテナ */
    margin: 40px auto;
    max-width: 500px;
    /* 中央寄せ用 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.cpl-auth-form .cpl-form-group {
    position: relative;
    margin-bottom: 20px;
}

.cpl-auth-form .cpl-has-icon .cpl-input-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
}

.cpl-auth-form .cpl-has-icon .cpl-input-icon img {
    width: 20px;
    height: 20px;
    filter: invert(56%) sepia(2%) saturate(0%) hue-rotate(159deg) brightness(98%) contrast(92%);
    /* #848484相当の色に変換 */
}

.cpl-auth-form input[type="text"],
.cpl-auth-form input[type="email"],
.cpl-auth-form input[type="password"] {
    width: 100%;
    padding: 15px 15px 15px 45px;
    /* アイコン用の左余白 */
    border: 1px solid #cecece;
    border-radius: 30px;
    /* 入力フォーム角丸 */
    background: #ffffff;
    color: var(--cpl-color-text-main);
    box-sizing: border-box;
    font-size: 16px;
    outline: none;
    transition: all 0.3s ease;
}

.cpl-auth-form input[type="text"]:focus,
.cpl-auth-form input[type="email"]:focus,
.cpl-auth-form input[type="password"]:focus {
    border-color: #999999;
    background: #ffffff;
}

.cpl-auth-form input::placeholder {
    color: #b0b0b0;
    /* 薄いグレー */
    font-weight: normal;
}

.cpl-auth-form .cpl-btn-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
    filter: brightness(0) invert(1);
}

.cpl-auth-form .cpl-btn-register {
    /* 2026-09-19: ログイン/会員登録の送信ボタンは、右パネルの
       「ボタン・プリセット」の Preset1 を初期状態として適用する。

       サイト全体のボタン設定(class-cpl-templates.php が出力する
       「.cpl-btn-register { background: var(--cpl-btn-bg); ... }」・詳細度 0,1,0)
       より優先させるため、詳細度を高く(クラス2つ = 0,2,0)している。
       2026-09-21: 動的CSS側の !important を外したのに合わせ、ここも !important を
       外した(テーマの style.css からカスタマイズできるようにするため)。

       ビルダーで個別に変更した場合は、
         ・プレビュー中 … 要素へのインラインスタイル(!important 付き)
         ・保存後 … 「html body [data-cpl-id="..."]」の高詳細度ルール
       がいずれもこのルールより優先されるため、これまでどおり上書きできる。 */
    --cpl-arrow-filter: brightness(0) invert(1);
    color: #ffffff;
    background: #191919;
    border: none;
    border-radius: 30px;
    /* .cpl-btn-register の既定にあるピンク系の影(0 4px 15px rgba(255,123,172,.4))は
       Preset1 には含まれないため、認証フォームのボタンでは打ち消す。
       ホバー時の影(下の :hover ルール)も同様。 */
    box-shadow: none;
    width: 300px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    backdrop-filter: none;
    padding: 15px;
    font-size: 16px;
    display: flex;
    flex-direction: row;
    /* テキストとアイコンを横並びに */
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* アイコンとテキストの間隔 */
}


.cpl-auth-form .cpl-btn-register:hover {
    /* ホバー時のピンク系の影も打ち消す(浮き上がりと不透明度の変化は残す) */
    box-shadow: none;
}


/* ==========================================
   新キャストカードデザイン
   ========================================== */

.cpl-cast-card-new {
    padding: 15px;
    position: relative;
    padding-bottom: 50px;
}

.cpl-card-profile-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 5px;
    min-width: 0;
}

.cpl-card-avatar {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #f0f0f0;
    position: relative;
}

.cpl-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 50%;
}

.cpl-card-profile-info {
    flex: 1;
    /* min-width の既定値 auto のままだと、flexアイテムは中身の最小幅より
       小さくなれない。キャスト名やスリーサイズが1行に収まらない幅のカード
       （画像を左に置く並列レイアウト等）では、この要素がカードからはみ出し、
       ビルダーのホバー枠・選択枠もカードより長く表示されてしまっていた。 */
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* キャスト名・スリーサイズも、はみ出さずに折り返す */

.cpl-card-profile-info .cpl-cast-name,
.cpl-card-profile-info .cpl-cast-sizes {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.cpl-card-profile-info .cpl-cast-name {
    margin: 0 0 5px 0;
    font-size: 16px;
    font-weight: bold;
}


/* スリーサイズ。
   注) 以前はグローバル設定のフォント指定が p セレクタに font-size/font-family を
       !important で出力していたため !important が必要だったが、2026-09-21 に
       動的CSS側の !important を外したので、0,2,0 のクラスセレクタで普通に勝つ。
       ビルダーで個別にサイズを変更したとき（html body [data-cpl-id="..."] = 0,2,2・
       !important付き）はそちらが優先される。 */

.cpl-card-profile-info .cpl-cast-sizes,
.cpl-cast-card .cpl-cast-sizes,
.cpl-widget .cpl-cast-sizes {
    margin: 0;
    font-size: 12px;
    /* フォントは Inter に統一(2026-09-21)。 */
    font-family: 'Inter', sans-serif;
    color: var(--cpl-color-text-sub);
}

.cpl-cast-time-bold {
    font-weight: bold;
    font-size: 14px;
    color: var(--cpl-color-text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0;
}

.cpl-cast-schedule-comment-compact {
    font-size: 11px;
    color: var(--cpl-color-text-sub);
    margin-top: 2px;
    margin-bottom: 8px;
    text-align: center;
}

.cpl-marquee-container {
    overflow: hidden;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.03);
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    margin-top: 10px;
    width: 100%;
}

.cpl-marquee-content {
    display: inline-block;
    padding-left: 100%;
    animation: cpl-marquee 150s linear infinite;
    font-size: 12px;
    color: var(--cpl-color-text-sub);
}

@keyframes cpl-marquee {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0);
    }
}


/* ボタン */

.cpl-new-card-actions {
    position: absolute;
    bottom: 15px;
    right: 15px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.cpl-btn-shadow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #ddd;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    color: var(--cpl-main-color);
}

.cpl-btn-shadow:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cpl-btn-shadow svg {
    width: 20px;
    height: 20px;
}

.cpl-action-icon {
    width: 20px;
    height: 20px;
    filter: invert(56%) sepia(2%) saturate(0%) hue-rotate(159deg) brightness(98%) contrast(92%);
}


/* グリッドカラムの強制適用（不具合修正） */

.cpl-cast-list {
    display: grid;
}

.cpl-cast-list.swiper {
    display: block;
}


/* スマホ用 */

.cpl-cast-list.cpl-grid-sp-1,
.cpl-cast-list.cpl-grid-sp-1_stacked,
.cpl-cast-list.cpl-grid-sp-1_parallel {
    grid-template-columns: 1fr;
}

.cpl-cast-list.cpl-grid-sp-2 {
    grid-template-columns: repeat(2, 1fr);
}

.cpl-cast-list.cpl-grid-sp-3 {
    grid-template-columns: repeat(3, 1fr);
}


/* PC用 */

@media (min-width: 768px) {
    .cpl-cast-list.cpl-grid-pc-1,
    .cpl-cast-list.cpl-grid-pc-1_parallel {
        grid-template-columns: 1fr;
    }
    .cpl-cast-list.cpl-grid-pc-2,
    .cpl-cast-list.cpl-grid-pc-2_stacked {
        grid-template-columns: repeat(2, 1fr);
    }
    .cpl-cast-list.cpl-grid-pc-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .cpl-cast-list.cpl-grid-pc-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .cpl-cast-list.cpl-grid-pc-5 {
        grid-template-columns: repeat(5, 1fr);
    }
}


/* -- 追加の修正要件 -- */


/* グリッドの余白復元 */

.cpl-cast-list {
    gap: 10px;
}


/* アバター画像のグラデーションボーダーと白枠 */

.cpl-card-avatar {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(45deg, #ff14ff, #00aae5);
    padding: 3px;
    overflow: visible;
}

.cpl-avatar-inner-wrap {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
    padding: 2px;
}

.cpl-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 50%;
}


/* キャスト名(年齢) 左寄せ */

.cpl-card-profile-info {
    text-align: left;
}

.cpl-cast-name {
    text-align: left;
}

.cpl-cast-sizes {
    text-align: left;
}


/* ホバー時のスムースアニメーション */

.cpl-cast-card-new {
    transition: all 0.3s ease;
}

.cpl-cast-card-new:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}


/* ボタン重なり防止 (絶対配置解除) */

.cpl-new-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 15px;
    position: static;
    bottom: auto;
    right: auto;
}


/* スクロールアニメーションのスピード低下、背景色なし */

.cpl-marquee-container {
    background: transparent;
    border: none;
    padding: 5px 0;
}

.cpl-marquee-content {
    animation: cpl-marquee 150s linear infinite;
}


/* 追加修正2 */

.cpl-cast-list {
    grid-template-columns: 1fr;
    /* フォールバック */
}

.cpl-cast-card,
.cpl-cast-card-new {
    min-width: 0;
    /* グリッドのはみ出し防止 */
}

.cpl-card-image {
    width: 100%;
}

.cpl-card-image img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* アバターのずれ防止 */

.cpl-card-avatar {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cpl-avatar-inner-wrap {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ボタン並列化とグレーアイコン解除 */

.cpl-new-card-actions {
    flex-direction: row;
    align-items: center;
}

.cpl-action-icon {
    /* filterをリセットするか、ピンクにする */
    filter: invert(52%) sepia(45%) saturate(3078%) hue-rotate(300deg) brightness(101%) contrast(106%);
}


/* -- 並列レイアウト（画像左、プロフィール右） -- */

.cpl-cast-list.cpl-grid-pc-1_parallel .cpl-card-inner-new,
.cpl-cast-list.cpl-grid-pc-2_parallel .cpl-card-inner-new,
.cpl-cast-list.cpl-grid-sp-1_parallel .cpl-card-inner-new {
    flex-direction: row;
}

.cpl-cast-list.cpl-grid-pc-1_parallel .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-2_parallel .cpl-card-image,
.cpl-cast-list.cpl-grid-sp-1_parallel .cpl-card-image {
    flex: 0 0 35%;
    max-width: 35%;
}

@media (min-width: 768px) {
    .cpl-cast-list.cpl-grid-pc-1_parallel {
        grid-template-columns: 1fr;
    }
    .cpl-cast-list.cpl-grid-pc-2_parallel {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* -- 追加修正3（余白・レイアウト・アバター修正） -- */

.cpl-cast-card-new {
    padding: 0;
    padding-bottom: 0;
}

.cpl-card-content-wrapper {
    padding: 15px;
}


/* アバターの歪み防止（完全な円に固定） */

.cpl-card-avatar {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
    max-width: 60px;
    max-height: 60px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
}

.cpl-avatar-inner-wrap {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.cpl-avatar-img {
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 50%;
    width: 100%;
    height: 100%;
}


/* 並列レイアウトのフレックス調整 */

.cpl-cast-list.cpl-grid-pc-1_parallel .cpl-card-inner-new,
.cpl-cast-list.cpl-grid-pc-2_parallel .cpl-card-inner-new,
.cpl-cast-list.cpl-grid-sp-1_parallel .cpl-card-inner-new {
    flex-direction: row;
    align-items: stretch;
}

.cpl-cast-list.cpl-grid-pc-1_parallel .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-2_parallel .cpl-card-image,
.cpl-cast-list.cpl-grid-sp-1_parallel .cpl-card-image {
    flex: 0 0 40%;
    max-width: 40%;
    height: 100%;
}

.cpl-cast-list.cpl-grid-pc-1_parallel .cpl-card-image img,
.cpl-cast-list.cpl-grid-pc-2_parallel .cpl-card-image img,
.cpl-cast-list.cpl-grid-sp-1_parallel .cpl-card-image img {
    height: 100%;
    object-fit: cover;
}


/* -- 追加修正4（画像角丸・ボタン配置・アバター位置） -- */


/* アバター画像が上にずれるのを防ぐ */

.cpl-avatar-inner-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* 「並列レイアウト」時の角丸 */

.cpl-cast-list.cpl-grid-pc-1_parallel .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-2_parallel .cpl-card-image,
.cpl-cast-list.cpl-grid-sp-1_parallel .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-1_parallel .cpl-card-image img,
.cpl-cast-list.cpl-grid-pc-2_parallel .cpl-card-image img,
.cpl-cast-list.cpl-grid-sp-1_parallel .cpl-card-image img {
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}


/* 「縦積みレイアウト」時の角丸 */

.cpl-cast-list.cpl-grid-pc-1 .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-2 .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-3 .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-4 .cpl-card-image,
.cpl-cast-list.cpl-grid-sp-1_stacked .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-1 .cpl-card-image img,
.cpl-cast-list.cpl-grid-pc-2 .cpl-card-image img,
.cpl-cast-list.cpl-grid-pc-3 .cpl-card-image img,
.cpl-cast-list.cpl-grid-pc-4 .cpl-card-image img,
.cpl-cast-list.cpl-grid-sp-1_stacked .cpl-card-image img {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}


/* メッセージ・いいねボタンの配置固定 */

.cpl-new-card-actions {
    position: absolute;
    bottom: 15px;
    right: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
}


/* いいねボタンのアイコン色を赤に */

.cpl-action-btn-like svg,
.cpl-action-btn-like i,
.cpl-action-btn-like span {
    color: #ff3366;
    fill: #ff3366;
}


/* -- 追加修正5（角丸完全修正・アバター・ボタン配置・いいねアイコン色・店長コメント余白） -- */


/* 画像の角丸 (並列レイアウト) */

.cpl-cast-list.cpl-grid-pc-1_parallel .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-2_parallel .cpl-card-image,
.cpl-cast-list.cpl-grid-sp-1_parallel .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-1_parallel .cpl-card-image img,
.cpl-cast-list.cpl-grid-pc-2_parallel .cpl-card-image img,
.cpl-cast-list.cpl-grid-sp-1_parallel .cpl-card-image img {
    border-top-left-radius: var(--cpl-content-border-radius);
    border-bottom-left-radius: var(--cpl-content-border-radius);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}


/* 画像の角丸 (縦積みレイアウト) */

.cpl-cast-list.cpl-grid-pc-1 .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-2 .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-3 .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-4 .cpl-card-image,
.cpl-cast-list.cpl-grid-sp-1_stacked .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-1 .cpl-card-image img,
.cpl-cast-list.cpl-grid-pc-2 .cpl-card-image img,
.cpl-cast-list.cpl-grid-pc-3 .cpl-card-image img,
.cpl-cast-list.cpl-grid-pc-4 .cpl-card-image img,
.cpl-cast-list.cpl-grid-sp-1_stacked .cpl-card-image img {
    border-top-left-radius: var(--cpl-content-border-radius);
    border-top-right-radius: var(--cpl-content-border-radius);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}


/* アバター画像が上にずれるのを防ぐ (aタグも中央配置にする) */

.cpl-avatar-inner-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cpl-avatar-inner-wrap a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.cpl-avatar-inner-wrap img {
    margin: 0;
    display: block;
}


/* メッセージ・いいねボタンの配置 (被りを防ぐため flex-end に) */

.cpl-card-content-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.cpl-new-card-actions {
    position: static;
    /* 絶対配置を解除して被りを防ぐ */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: auto;
    /* 下に押しやる */
    padding-top: 15px;
}


/* いいねボタンのアイコン色 (枠線も赤にする) */

.cpl-action-btn-like svg,
.cpl-action-btn-like i,
.cpl-action-btn-like span {
    color: #ff3366;
}

.cpl-action-btn-like svg path,
.cpl-action-btn-like svg circle {
    stroke: #ff3366;
}


/* 店長コメントの上下余白を小さく */

.cpl-manager-comment {
    margin-top: 5px;
    margin-bottom: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}


/* -- 追加修正6（2列レイアウト、はみ出し、ボタン被り、設定反映） -- */


/* 画像の角丸はみ出しを親要素で防ぐ */

.cpl-cast-card-new,
.cpl-card-inner-new {
    overflow: hidden;
}


/* 2列(並列)のレイアウト修正 (旧2列クラスの上書き) */

.cpl-grid-pc-2_parallel .cpl-card-inner {
    flex-direction: row;
}

.cpl-grid-pc-2_parallel .cpl-card-image {
    width: 40%;
    flex-shrink: 0;
}


/* 元の2列(縦積み)が並列にならないようにリセット */

.cpl-grid-pc-2 .cpl-card-inner {
    flex-direction: column;
}

.cpl-grid-pc-2 .cpl-card-image {
    width: 100%;
}


/* メッセージボタン・いいねボタンが重なるのを防ぐ (各ボタンの絶対配置を解除) */


/* カード内のアクションボタン。
   flexコンテナの中で伸縮しないよう flex-basis を固定しておく
   （ビルダーのプレビューで <a> が伸びて円が横長になる症状への対策も兼ねる）。 */

.cpl-new-card-actions .cpl-like-btn,
.cpl-new-card-actions .cpl-message-link-btn {
    position: static;
    margin: 0;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    box-sizing: border-box;
}


/* いいねアイコンの色修正 (正しいクラス名で適用) */

.cpl-like-btn:not(.is-liked) .cpl-heart-icon {
    fill: none;
}

.cpl-like-btn .cpl-heart-icon path {
    stroke: #ff3366;
}

.cpl-message-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* いいねボタンと同じ 40px にそろえる（基準は .cpl-btn-shadow）。
       以前はここだけ 44px で、いいね(.cpl-widget .cpl-like-btn)が 36px だったため、
       在籍一覧カードの2つの丸アイコンの大きさが揃っていなかった。 */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
}


/* -- 追加修正7（角丸の完全一元化、並列レイアウトの画像高さ、各種余白・フォント調整） -- */


/* 画像自身の角丸指定を全て解除し、親要素(カード全体)の overflow: hidden だけで角丸を制御する */

.cpl-card-image,
.cpl-card-image img {
    border-radius: 0;
}


/* 並列レイアウト時に画像が下までフルで表示されるようにする */

.cpl-cast-list.cpl-grid-pc-1_parallel .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-2_parallel .cpl-card-image,
.cpl-cast-list.cpl-grid-sp-1_parallel .cpl-card-image {
    display: flex;
    align-items: stretch;
}

.cpl-cast-list.cpl-grid-pc-1_parallel .cpl-card-image img,
.cpl-cast-list.cpl-grid-pc-2_parallel .cpl-card-image img,
.cpl-cast-list.cpl-grid-sp-1_parallel .cpl-card-image img {
    height: 100%;
    object-fit: cover;
}


/* 一言コメントのフォントサイズ変更 */

.cpl-cast-short-comment {
    font-size: 12px;
}


/* スクロールアニメーション(marquee)の上下余白を無くす */

.cpl-marquee-container {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}


/* コンテンツラッパーの余白を小さくする (元は15px) */

.cpl-card-content-wrapper {
    padding: 0;
}


/* アクションボタン群の上の余白を0にする */

.cpl-new-card-actions {
    padding-top: 0;
}


/* -- 追加修正8（画像角丸の完全上書き、鍵アイコンの表示修正） -- */


/* 過去の特定クラス指定での border-top-left-radius などを全て 0 に強制上書き (詳細度を合わせる) */

.cpl-cast-list.cpl-grid-pc-1_parallel .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-2_parallel .cpl-card-image,
.cpl-cast-list.cpl-grid-sp-1_parallel .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-1_parallel .cpl-card-image img,
.cpl-cast-list.cpl-grid-pc-2_parallel .cpl-card-image img,
.cpl-cast-list.cpl-grid-sp-1_parallel .cpl-card-image img,
.cpl-cast-list.cpl-grid-pc-1 .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-2 .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-3 .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-4 .cpl-card-image,
.cpl-cast-list.cpl-grid-sp-1_stacked .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-1 .cpl-card-image img,
.cpl-cast-list.cpl-grid-pc-2 .cpl-card-image img,
.cpl-cast-list.cpl-grid-pc-3 .cpl-card-image img,
.cpl-cast-list.cpl-grid-pc-4 .cpl-card-image img,
.cpl-cast-list.cpl-grid-sp-1_stacked .cpl-card-image img {
    border-radius: 0;
}


/* 鍵アイコンなど全てが 100% 高さになるのを防ぐため、直下・またはaタグ直下の画像のみに限定して高さ100%を適用 */

.cpl-cast-list.cpl-grid-pc-1_parallel .cpl-card-image>img,
.cpl-cast-list.cpl-grid-pc-1_parallel .cpl-card-image>a>img,
.cpl-cast-list.cpl-grid-pc-2_parallel .cpl-card-image>img,
.cpl-cast-list.cpl-grid-pc-2_parallel .cpl-card-image>a>img,
.cpl-cast-list.cpl-grid-sp-1_parallel .cpl-card-image>img,
.cpl-cast-list.cpl-grid-sp-1_parallel .cpl-card-image>a>img {
    height: 100%;
    object-fit: cover;
}


/* 鍵アイコン(.cpl-restricted-icon)自体の高さを強制リセット（万が一の上書き防止） */

.cpl-cast-list .cpl-restricted-icon {
    height: 48px;
    width: 48px;
    object-fit: contain;
    border-radius: 0;
    margin: 0 auto 8px auto;
}


/* -- 追加修正9（会員専用鍵アイコンの完全上書き） -- */


/* 過去の img に対する 100% の指定を、鍵アイコンに対して確実に 48px に強制リセットする (詳細度を最大限に高める) */

.cpl-cast-list.cpl-grid-pc-1_parallel .cpl-card-image img.cpl-restricted-icon,
.cpl-cast-list.cpl-grid-pc-2_parallel .cpl-card-image img.cpl-restricted-icon,
.cpl-cast-list.cpl-grid-sp-1_parallel .cpl-card-image img.cpl-restricted-icon,
.cpl-cast-list.cpl-grid-pc-1 .cpl-card-image img.cpl-restricted-icon,
.cpl-cast-list.cpl-grid-pc-2 .cpl-card-image img.cpl-restricted-icon,
.cpl-cast-list.cpl-grid-pc-3 .cpl-card-image img.cpl-restricted-icon,
.cpl-cast-list.cpl-grid-pc-4 .cpl-card-image img.cpl-restricted-icon,
.cpl-cast-list.cpl-grid-sp-1_stacked .cpl-card-image img.cpl-restricted-icon,
.cpl-cast-list .cpl-cast-card-new .cpl-card-image img.cpl-restricted-icon {
    height: 48px;
    width: 48px;
    max-height: 48px;
    max-width: 48px;
    min-height: 48px;
    min-width: 48px;
    object-fit: contain;
    border-radius: 0;
    margin: 0 auto 8px auto;
}


/* -- 追加修正10（レイアウト・余白・表示設定対応） -- */


/* ヘッダーのコンテナ: テンプレートのインラインスタイルに任せるため強制paddingを削除 */

.cpl-header .cpl-container {
    max-width: 100%;
    box-sizing: border-box;
}


/* ヘッダーとページタイトルの間の余白を小さく。
   min-height / padding はテーマ側 style.css にだけあった定義を取り込んだもの。
   テーマ CSS はこのファイルのあとに読まれていたため、実際の表示は
   こちらの値(30px / 60px / calc(100vh - 200px))で確定していた。 */

/* 上の余白(padding-top:30px)は 2026-09-24 に廃止した。ビルダーから変更できない固定値で、
   ヘッダーと本文の最初の要素(ヒーロー画像・スライダー等)の間に常に30pxの隙間ができていたため。
   本文の最初の要素との間隔は、ビルダー側でその行/カラムの余白として指定する。 */

.cpl-main-content {
    min-height: calc(100vh - 200px);
    padding-top: 0;
    padding-bottom: 60px;
}


/* サブメニューテキストが空でも高さを保ち、上寄せにする */

.cpl-menu-list-drawer li a span.cpl-menu-subtitle {
    min-height: 15px;
}


/* モバイル表示時の余白調整と、不要な要素の非表示 */

@media (max-width: 767px) {
    .cpl-header-mobile-meta {
        padding: 0;
        margin: 0;
        border: none;
        height: 0;
        overflow: hidden;
    }
    .cpl-header-bottom {
        display: none;
    }
}


/* -- 追加修正11: 会員専用画像の鍵アイコンとオーバーレイの確実な修正 -- */

.cpl-card-image>a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.cpl-restricted-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

img.cpl-restricted-icon {
    display: block;
    width: 48px;
    height: 48px;
    max-width: 48px;
    max-height: 48px;
    min-width: 48px;
    min-height: 48px;
    object-fit: contain;
    margin: 0 auto 8px auto;
    position: static;
    transform: none;
    border-radius: 0;
}

.cpl-restricted-text {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    position: static;
}


/* -- 追加修正12: モバイルの下層ページでの余白調整 -- */

@media (max-width: 767px) {
    body:not(.home):not(.front-page) .cpl-widget {
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        margin-bottom: 0;
    }
}


/* .cpl-single-block margin */

.cpl-single-block {
    margin-bottom: 0;
}


/* カードのアクションボタンを下部に固定 */

.cpl-new-card-actions {
    margin-top: auto;
}


/* Update avatar size to 43px */

.cpl-card-avatar {
    width: 43px;
    height: 43px;
    min-width: 43px;
    min-height: 43px;
    max-width: 43px;
}


/* single-cast like button fix */

.cpl-single-action-row .cpl-widget .cpl-like-btn {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
}

.cpl-single-action-row .cpl-like-btn .cpl-heart-icon path {
    stroke: #ff4081;
}

.cpl-single-action-row .cpl-like-btn.is-liked .cpl-heart-icon {
    fill: #ff4081;
    stroke: #ff4081;
}


/* .cpl-thumb-item main color border */

.cpl-thumb-item:hover,
.cpl-thumb-item.is-active {
    border-color: var(--cpl-main-color);
}


/* .cpl-thumb-item border width override */

.cpl-thumb-item {
    border-width: 3px;
}


/* Badge border color and radius update */

.cpl-badge {
    border: 1px solid #111;
    border-radius: 12px;
}


/* Pagination & Pager styles */

.cpl-pagination,
.cpl-pager {
    text-align: center;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
}

/* ページャーのボタン。
   注) 以前は background-color: var(--cpl-main-color) だったが、この変数はサイト設定の
   メインカラーが未設定だと「--cpl-main-color: ;」（定義済みだが空）として出力される。
   空の変数はフォールバックも使われず宣言ごと無効＝背景が透明になり、color:#fff と
   相まって「番号が白いまま何も見えないページャー」になっていた（2026-09-21 報告）。
   Q&Aバッジやボタンと同じく、変数に依存しない既定色を直接指定する。

   ビルダーでページャー（.cpl-pager 全体）を選択して「背景色」「テキスト色」「角丸」を
   変更すると、[data-cpl-id='…'] .cpl-pager .cpl-pager-item の !important 付きルールが
   出力されてこの既定値より優先される（builder-preview.js の cplLoopSelectorFor 参照）。 */

.cpl-pagination .page-numbers,
.cpl-pager .cpl-pager-item {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: #4b4b4b;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.2s;
    opacity: 0.6;
    box-sizing: border-box;
}

.cpl-pagination .page-numbers.current,
.cpl-pager .cpl-pager-item.active {
    opacity: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.cpl-pagination a.page-numbers:hover,
.cpl-pager a.cpl-pager-item:hover {
    opacity: 1;
}

.cpl-pagination .page-numbers.dots {
    border: none;
    background: none;
    color: var(--cpl-color-text-sub, #666);
    width: auto;
    height: auto;
    opacity: 1;
}

/* 「NEXT」ボタン。背景色が空変数で無効になる問題は上と同じ。
   角丸だけは丸ではなくピル型にしたいので、ここで個別に指定している。
   ビルダーで角丸を変更した場合は !important 付きルールが優先される。 */

.cpl-pagination .next.page-numbers,
.cpl-pager .cpl-pager-item.next-page {
    padding: 0 18px;
    width: auto;
    height: 36px;
    border-radius: 18px;
    background-color: #4b4b4b;
    color: #ffffff;
    opacity: 1;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.cpl-pagination .next.page-numbers:hover,
.cpl-pager .cpl-pager-item.next-page:hover {
    filter: brightness(0.9);
}


/* PC only / Mobile only helpers */

@media (min-width: 768px) {
    .cpl-pc-only {
        display: block;
    }
    .cpl-sp-only {
        display: none;
    }
}

@media (max-width: 767px) {
    .cpl-pc-only {
        display: none;
    }
    .cpl-sp-only {
        display: flex;
    }
}


/* Slider Mobile Corner Radius Reset */

@media (max-width: 767px) {
    .cpl-slider-container,
    .cpl-slider-container .swiper,
    .cpl-slider-container .swiper-slide,
    .cpl-slider-container .swiper-slide img {
        border-radius: 0;
    }
}


/* Options Grid Mobile 1 Column (2026-09-22: 2列→1列(縦積み)) */

@media (max-width: 767px) {
    .cpl-options-grid-4col {
        grid-template-columns: 1fr;
    }
}


/* おすすめキャスト: モバイルは2列(2026-09-22)
   以前はここで3列 + 4枚目を display:none にしていたが、後方の
   「@media (max-width: 767px) { .cpl-recommend-list { repeat(2, 1fr) } }」に
   列数だけ上書きされ、「2列なのに4枚目が消える(3枚表示)」という
   中途半端な状態になっていたため、この古いルールごと廃止して2列へ一本化する。 */


/* Single Cast Gallery Border Radius */

.cpl-single-swiper-main {
    border-radius: var(--cpl-gallery-border-radius, 12px);
    overflow: hidden;
}

.cpl-single-swiper-main img {
    border-radius: var(--cpl-gallery-border-radius, 12px);
}


/* Reviews styling */

.cpl-reviews-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: rgba(0, 0, 0, 0.02);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.cpl-review-item {
    transition: background-color 0.2s;
}

.cpl-review-item:hover {
    background-color: rgba(0, 0, 0, 0.01);
}

.cpl-reviews-load-more-wrap {
    text-align: center;
    margin-top: 15px;
    padding-top: 10px;
}

#cpl-reviews-load-more {
    font-size: 13px;
    color: var(--cpl-main-color);
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

#cpl-reviews-load-more:hover {
    opacity: 0.8;
}


/* Reviews form styling */

.cpl-review-form-wrap select,
.cpl-review-form-wrap input[type="text"],
.cpl-review-form-wrap input[type="email"],
.cpl-review-form-wrap textarea {
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cpl-review-form-wrap select:focus,
.cpl-review-form-wrap input[type="text"]:focus,
.cpl-review-form-wrap input[type="email"]:focus,
.cpl-review-form-wrap textarea:focus {
    border-color: var(--cpl-main-color);
    box-shadow: 0 0 5px rgba(255, 105, 180, 0.2);
    outline: none;
}


/* Mobile Fixed Footer Menu */

@media screen and (max-width: 767px) {
    .cpl-sp-footer-menu {
        position: fixed;
        bottom: 20px;
        left: 20px;
        right: 85px;
        height: 50px;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 25px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: space-around;
        z-index: 9998;
        box-sizing: border-box;
        padding: 0 10px;
    }
    .cpl-sp-menu-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #242424;
        font-size: 10px;
        font-weight: bold;
        flex: 1;
        height: 100%;
        line-height: 1.2;
    }
    .cpl-sp-menu-link.active {
        color: var(--cpl-main-color);
    }
    .cpl-sp-menu-link svg {
        height: 20px;
        width: auto;
        display: block;
        margin: 0 auto 2px;
    }
}

@media screen and (min-width: 768px) {
    .cpl-sp-footer-menu {
        display: none;
    }
}


/* =========================================
   キラキラフィルター機能 (Sparkle Filters)
   ========================================= */

.cpl-sparkle-active {
    position: relative;
    overflow: hidden;
}


/* --- ① Shine エフェクト --- */

.cpl-sparkle-active[data-sparkle="shine"]::after,
.cpl-sparkle-active[data-sparkle="shine"] a::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 85%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    animation: cpl-shine-anim 3s infinite ease-in-out;
    pointer-events: none;
    z-index: 99;
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@keyframes cpl-shine-anim {
    0% {
        left: -150%;
    }
    35%,
    100% {
        left: 150%;
    }
}


/* --- パーティクル共通スタイル (Twinkle, Bokeh, Floating, Glitter) --- */

.cpl-sparkle-particle {
    position: absolute;
    pointer-events: none;
    z-index: 9;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.cpl-sparkle-particle svg {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    filter: drop-shadow(0 0 6px rgba(255, 253, 215, 0.95)) drop-shadow(0 0 12px rgba(255, 215, 0, 0.8));
}


/* --- ② Twinkle 星のアニメーション --- */

.cpl-sparkle-particle.cpl-twinkle-star {
    animation-name: cpl-twinkle-anim;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes cpl-twinkle-anim {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
    }
    1% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2) rotate(30deg);
        /* 瞬時に光り輝く */
    }
    10% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(90deg);
        /* 0.3秒ほどで素早く消える */
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(90deg);
    }
}


/* --- ③ Glitter ラメアニメーション --- */

.cpl-sparkle-particle.cpl-glitter-dot {
    width: 5px;
    height: 5px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 6px #fff, 0 0 12px #fff, 0 0 20px #ffd700;
    animation-name: cpl-glitter-anim;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes cpl-glitter-anim {
    0%,
    100% {
        opacity: 0.1;
        transform: translate(-50%, -50%) scale(0.3);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.5);
    }
}


/* --- ④ Bokeh 玉ボケアニメーション --- */

.cpl-sparkle-particle.cpl-bokeh-circle {
    background: radial-gradient( circle, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    animation-name: cpl-bokeh-anim;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes cpl-bokeh-anim {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(30px) scale(0.4);
    }
    25%,
    75% {
        opacity: 0.95;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-90px) scale(1.5);
    }
}


/* --- ⑦ Floating Particles 上昇アニメーション (大きい光の粒子) --- */

.cpl-sparkle-particle.cpl-floating-dot {
    /* 10倍サイズを活かすため背景をグラデーションボケにする */
    background: radial-gradient( circle, rgba(255, 230, 160, 0.9) 0%, rgba(255, 180, 50, 0.4) 40%, rgba(255, 180, 50, 0) 70%);
    border-radius: 50%;
    animation-name: cpl-floating-anim;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes cpl-floating-anim {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(50px) scale(0.3);
    }
    30%,
    70% {
        opacity: 0.95;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-120px) scale(1.2);
    }
}

@keyframes cpl-floating-anim {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(40px) scale(0.4);
    }
    20%,
    80% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-110px) scale(1.1);
    }
}


/* PC表示のカラム数設定（2, 3, 4列）時の縦積みレイアウトの強制 */

@media (min-width: 768px) {
    .cpl-cast-list.cpl-grid-pc-2 .cpl-card-inner-new,
    .cpl-cast-list.cpl-grid-pc-3 .cpl-card-inner-new,
    .cpl-cast-list.cpl-grid-pc-4 .cpl-card-inner-new,
    .cpl-cast-list.cpl-grid-pc-2 .cpl-card-inner,
    .cpl-cast-list.cpl-grid-pc-3 .cpl-card-inner,
    .cpl-cast-list.cpl-grid-pc-4 .cpl-card-inner {
        flex-direction: column;
        align-items: stretch;
    }
    .cpl-cast-list.cpl-grid-pc-2 .cpl-card-image,
    .cpl-cast-list.cpl-grid-pc-3 .cpl-card-image,
    .cpl-cast-list.cpl-grid-pc-4 .cpl-card-image {
        width: 100%;
        max-width: 100%;
        flex: none;
    }
    .cpl-cast-list.cpl-grid-pc-2 .cpl-card-content-wrapper,
    .cpl-cast-list.cpl-grid-pc-3 .cpl-card-content-wrapper,
    .cpl-cast-list.cpl-grid-pc-4 .cpl-card-content-wrapper {
        width: auto;
        /* 100%をautoに変更してパディング分のはみ出しを防ぎます */
        max-width: 100%;
        flex: none;
    }
}


/* ウィジェット要素(スライダー・在籍一覧等)の外枠(.cpl-widget-element)に、ビルダーの
   「レイアウト」-「水平配置」からalign-items:center/flex-start/flex-end(stretch以外)を
   適用すると、その直接の子である.cpl-widget-inner(the_widget()のbefore_widgetラッパー)
   の幅がflexboxのshrink-to-fitで決まる状態になる。中身(例:スライダーの
   .cpl-slider-fullwidth-wrapper)はwidth:100%で「親の幅いっぱい」を前提にしているため、
   親(.cpl-widget-inner)の幅が不定になると循環参照となり、ブラウザが巨大な値
   (例:2.68435e+07px)にフォールバックしてスライダー等の表示が崩壊する不具合があった
   (2026-09-18)。ウィジェットの中身は常に外枠いっぱいに広がる想定のため、
   align-itemsの値に関わらず.cpl-widget-innerは常にstretchさせる。
   (水平配置そのものは、幅(Width)を100%未満に指定した場合の
   ウィジェット全体の左右位置合わせとして機能する。) */

.cpl-widget-element>.cpl-widget-inner {
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
}


/* CASTPRO: スライダー 幅設定 (ショートコード/ウィジェット共通) */


/* 以前はここで width:100vw / margin:calc(50% - 50vw) による「画面幅いっぱいへの
   はみ出し」を行っていた。これがあると親要素の幅を無視してしまい、ビルダーの
   「幅(% / px)」でスライダーの幅を指定できないため廃止した。
   全幅で見せたい場合は、スライダーを置いたカラム／行の幅を全幅にする。 */

.cpl-slider-fullwidth-wrapper,
.alignfull.cpl-slider-fullwidth-wrapper {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    position: relative;
}


/* 100vwによる横スクロール・見切れ対策
   「全幅(width:100vw + margin:calc(50% - 50vw))」で画面いっぱいに広げているカラム
   (ヒーロー画像・スライダー等)は、100vw が「縦スクロールバーの分だけ実際の
   コンテンツ幅より広い」ケースで、左右に数px〜十数pxはみ出す(デスクトップの
   従来型のスクロールバーに限らず、モバイルSafariでも 100vw が
   document.documentElement.clientWidth と一致しない既知の癖がある)。
   従来は body にだけ overflow-x:hidden を付けていたが、iOS Safari は横方向の
   ラバーバンド/スクロールを <body> ではなく <html>(ルート要素)側で制御しており、
   body だけでは実機で横スクロールを止められない。html にも同じ指定を追加する
   (2026-09-24)。

   値は hidden ではなく clip にする(2026-09-25)。html と body の両方を hidden にすると、
   html の指定がビューポートへ移り、body 自身が「スクロールしないスクロールコンテナ」になる
   (overflow-y も auto に計算される)。position:sticky はいちばん近いスクロールコンテナを
   基準にするため、カラムの「ポジション: sticky」がページのスクロールに追従しなくなっていた。
   clip はスクロールコンテナを作らずにはみ出しだけを切り取るので sticky を壊さない。
   clip 非対応の古いブラウザでは body だけ hidden にする(html が visible なら body の指定は
   ビューポートへ移るため、body はスクロールコンテナにならず sticky も壊れない)。 */

html,
body {
    overflow-x: clip;
}

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


/* ショートコード版で親がoverflow:hiddenだと切れるため解除 (念のため) */

.cpl-slider-container:has(.cpl-slider-fullwidth-wrapper) {
    overflow: visible;
}


/* 角丸の適用 (ショートコード/ウィジェットの内部swiper)
   注) ここは.cpl-slider-container単体のルール(上の「スライダー(Slider)」
   セクション)より詳細度が高く、後方でも定義されているため常にこちらが勝っていた。
   以前は --cpl-gallery-border-radius (ギャラリー用の固定値) を直接使っていたため、
   「CASTPRO:スライダー」ウィジェット設定パネルの「角丸設定」(--cpl-slider-radius)を
   何に変更してもこのルールに上書きされ、見た目が一切変わらない不具合になっていた
   (2026-09-18修正)。--cpl-slider-radius が優先され、未設定時のみ
   --cpl-gallery-border-radius にフォールバックする。 */

.cpl-slider-fullwidth-wrapper .swiper,
.cpl-slider-fullwidth-wrapper .cpl-slider-container,
.cpl-slider-container:has(.cpl-slider-fullwidth-wrapper)>.swiper,
.cpl-slider-container:has(.cpl-slider-fullwidth-wrapper)>.cpl-slider-fullwidth-wrapper .swiper {
    border-radius: var(--cpl-slider-radius, var(--cpl-gallery-border-radius));
    overflow: hidden;
}


/* モバイルでは100%幅の時の角丸を解除 */

@media (max-width: 767px) {
    .cpl-slider-fullwidth-wrapper .swiper,
    .cpl-slider-fullwidth-wrapper .cpl-slider-container,
    .cpl-slider-container:has(.cpl-slider-fullwidth-wrapper)>.swiper,
    .cpl-slider-container:has(.cpl-slider-fullwidth-wrapper)>.cpl-slider-fullwidth-wrapper .swiper {
        border-radius: 0;
    }
}


/* Spinner */

.cpl-spinner-circle {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #333;
    border-radius: 50%;
    animation: cpl-spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes cpl-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* Make sure loading spinner spans full width in grid */

.cpl-cast-list .cpl-loading-spinner {
    grid-column: 1 / -1;
    width: 100%;
}


/* ヘッダー専用のリンク・ホバー色 */

.cpl-header a {
    color: var(--cpl-header-link-color, var(--cpl-header-text-color));
}

.cpl-header a:hover {
    color: var(--cpl-header-hover-color, var(--cpl-header-link-color));
}

/* 「ボタン」エレメントはヘッダー内でもボタン自身の文字色を使う(2026-10-01)。
   上の .cpl-header a(0,1,1) が .cpl-button-element(0,1,0) より強く、ヘッダーに置いた
   ボタンだけ既定の文字色(白)がヘッダーのリンク色・ホバー色になっていた。
   ボタンに文字色・ホバー色を設定した場合は、要素ごとの指定(!important)がこれより優先される。 */
.cpl-header a.cpl-button-element,
.cpl-header a.cpl-button-element:hover,
.cpl-header-bottom a.cpl-button-element,
.cpl-header-bottom a.cpl-button-element:hover {
    color: #ffffff;
}


/* ==========================================================================
   CPL InView Animations
   ========================================================================== */


/* 表示前(画面に入る前)の状態。
   セレクタに :not(.cpl-animated) が必要。
   これが無いと、この規則(属性セレクタ3つ＝詳細度0,3,0)が、表示後の規則
   [data-cpl-animation].cpl-animated(属性1＋クラス1＝詳細度0,2,0)よりも
   強くなってしまい、JS(main.js)が .cpl-animated を付けても opacity:0 のまま
   ＝要素がフロントエンドで一切表示されない、という不具合になっていた。
   (ビルダーのプレビュー用 builder-preview.css 側は opacity:1 !important に
   なっていたため、プレビューでは表示され、フロントエンドだけ消える状態だった) */

[data-cpl-animation]:not([data-cpl-animation="none"]):not( [data-cpl-animation=""]):not(.cpl-animated) {
    opacity: 0;
    will-change: opacity, translate;
    /* 「実行回数: 無限ループ」で画面外に出て非表示へ戻るときも、表示になる時と同じ
       速さ・イージングで滑らかにフェードアウトさせる(遅延はここには付けない=
       表示前に待たされるのは表示側だけでよいため)。 */
    transition: opacity var(--cpl-anim-dur, 1200ms) var(--cpl-anim-ease, ease-in-out), translate var(--cpl-anim-dur, 1200ms) var(--cpl-anim-ease, ease-in-out);
}


/* 表示後の状態。builder-preview.css と同じく !important を付けて、
   個別のアニメーション種別の規則より確実に優先されるようにする。 */

[data-cpl-animation].cpl-animated {
    opacity: 1 !important;
    /* 移動は transform ではなく個別プロパティ translate で行う(2026-09-24)。
       幅・配置の設定で要素のインラインstyleに transform: none !important が入っていると
       (動画・画像の中央寄せ等)、transform で動かすアニメーションはすべて打ち消され、
       「フェードはするが動かない」状態になっていた。translate は transform と独立して合成される。 */
    translate: none;
    /* イージング(animation-timing-function相当)は --cpl-anim-ease で切り替え可能
       (linear/ease/ease-in/ease-out/ease-in-out。既定は ease-in-out)。 */
    transition: opacity var(--cpl-anim-dur, 1200ms) var(--cpl-anim-ease, ease-in-out), translate var(--cpl-anim-dur, 1200ms) var(--cpl-anim-ease, ease-in-out) !important;
    /* 「遅延」設定。transition ショートハンドの後ろで指定する必要がある
       (先に書くとショートハンド側がtransition-delayを0sにリセットしてしまう)。 */
    transition-delay: var(--cpl-anim-delay, 0ms) !important;
}

[data-cpl-animation="FadeIn"]:not(.cpl-animated) {
    opacity: 0;
    translate: none;
}

[data-cpl-animation="FadeInLeft"]:not(.cpl-animated) {
    opacity: 0;
    translate: calc(-1 * var(--cpl-anim-dist, 50px)) 0 !important;
}

[data-cpl-animation="FadeInRight"]:not(.cpl-animated) {
    opacity: 0;
    translate: var(--cpl-anim-dist, 50px) 0 !important;
}

[data-cpl-animation="FadeInTop"]:not(.cpl-animated) {
    opacity: 0;
    translate: 0 calc(-1 * var(--cpl-anim-dist, 50px)) !important;
}

[data-cpl-animation="FadeInBottom"]:not(.cpl-animated) {
    opacity: 0;
    translate: 0 var(--cpl-anim-dist, 50px) !important;
}


/* ==========================================================================
   Single Cast Profile (templates/single-cast.php)
   ========================================================================== */

/* 最大幅は「グローバル設定」-「コンテンツの最大幅」(--cpl-content-max-width)に合わせる。
   以前は 800px 固定・左右 15px の余白だった(2026-10-06 変更)。 */
.cpl-single-cast-wrap {
    font-size: 13px;
    max-width: var(--cpl-content-max-width, 1200px);
    margin: 0 auto;
    padding: 50px 0px;
}

.cpl-single-top-section {
    text-align: center;
    margin-bottom: 30px;
}

/* キャスト名は既定で中央配置。サイト全体のタイポグラフィ(h2 { text-align: … } = 0,0,1)に
   左寄せが設定されていても、このクラス(0,1,0)が勝つ。ビルダーで個別に配置を変えた場合は
   [data-cpl-id] の !important 付きルールが優先される(2026-10-06)。 */
.cpl-single-title {
    font-size: 26px;
    font-weight: bold;
    margin: 0 0 5px 0;
    color: var(--cpl-color-text-main);
    text-align: center;
}

.cpl-single-age {
    font-size: 18px;
    font-weight: normal;
    color: var(--cpl-color-text-sub, #666);
    margin-left: 5px;
}

.cpl-single-furigana {
    font-size: 12px;
    color: #888;
    margin-bottom: 12px;
}

.cpl-single-spec-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

/* キャスト詳細のスリーサイズ。カード側(.cpl-cast-card 等)と同じ
   12px / Inter に統一する(2026-09-21)。
   セレクタの詳細度は 0,2,0 で、タイポグラフィのタグセレクタ(0,0,1)には普通に勝つ。
   ビルダーで個別に変更したとき(html body [data-cpl-id="..."] = 0,2,2・!important付き)は
   そちらが優先される。 */

.cpl-single-spec-area .cpl-cast-sizes {
    margin: 0;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    color: var(--cpl-color-text-main);
    font-weight: bold;
}

/* 注) 以前は「キャストタイプ」のタクソノミー設定(背景色・枠線色・テキスト色)を
   テンプレートが --cpl-term-bg / --cpl-term-color / --cpl-term-border として
   渡していたが、その設定はページビルダー化に伴い廃止した(2026-09-21)。
   変数はどこからも出力されないため、素の既定値に戻している。
   実際のバッジの見た目は assets/css/override.css の
   .cpl-card-badges .cpl-badge(詳細度 0,2,0)が決める。 */

.cpl-badge {
    background-color: var(--cpl-color-surface);
    color: var(--cpl-color-text-main);
    border: 1.5px solid var(--cpl-color-border);
}

.cpl-cast-short-comment {
    font-size: 13px;
    font-weight: bold;
    color: var(--cpl-color-text-main);
    margin-top: 8px;
}

.cpl-single-slider-area {
    max-width: 400px;
    margin: 0 auto 20px auto;
    position: relative;
}

.cpl-single-swiper-main {
    max-width: 400px;
    width: 100%;
}

.cpl-single-swiper-main .swiper-slide {
    position: relative;
}

.cpl-slide-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    z-index: 10;
    cursor: pointer;
    border-radius: var(--cpl-content-border-radius);
}

.cpl-slide-lock-icon {
    width: 45px;
    height: 45px;
    filter: brightness(0) invert(1);
}

.cpl-slide-lock-text {
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.cpl-slider-main-img.cpl-img-locked {
    filter: blur(20px);
}

.cpl-slider-main-placeholder {
    aspect-ratio: 3/4;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #999;
    border-radius: var(--cpl-content-border-radius);
}

.cpl-single-thumbs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.cpl-thumb-item {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.3s ease;
    position: relative;
}

.cpl-thumb-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    text-decoration: none;
}

.cpl-thumb-lock-icon {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

.cpl-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cpl-thumb-img.cpl-thumb-locked {
    filter: blur(8px);
}

.cpl-single-work-status-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 20px;
    width: 100%;
    text-align: center;
}

.cpl-single-work-status-area .cpl-cast-time {
    margin: 0;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--cpl-color-text-main);
    width: 100%;
}

.cpl-cast-schedule-comment {
    margin: 0;
    font-size: 11px;
    color: var(--cpl-color-text-sub, #888);
    text-align: center;
    width: 100%;
}

.cpl-single-work-status-area .cpl-cast-status-wrap {
    margin-top: 2px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.cpl-single-work-status-area .cpl-cast-status-btn {
    font-size: 11px;
    padding: 3px 12px;
    border-radius: 12px;
    margin: 0 auto;
    display: inline-block;
    width: auto;
}

.cpl-single-action-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    width: 100%;
}

.cpl-single-btn-message {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    padding: 10px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 13px;
    color: #ff3366;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s;
}

.cpl-single-btn-message:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 51, 102, 0.15);
}

.cpl-single-action-row .cpl-action-icon {
    width: 18px;
    height: 18px;
}

.cpl-single-action-row .cpl-like-btn {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    padding: 10px 24px;
    border-radius: 30px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
    color: #ff4081;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s;
    width: auto;
    height: auto;
}

.cpl-single-action-row .cpl-like-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 64, 129, 0.15);
}

.cpl-single-action-row .cpl-heart-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

.cpl-single-layout {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cpl-single-block {
    padding: 20px;
}

/* モバイルは各ブロックの内側余白を詰める(2026-09-22)。
   テーマ側(castpro-zeta/single-cast.php)が各ブロックへ直接
   style="padding: 20px;" を書いていたためCSSで上書きできなかったが、
   そのインライン指定を撤去してここに一本化した。 */
@media (max-width: 767px) {
    .cpl-single-block {
        padding: 0;
    }
}

.cpl-single-h3 {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    margin: 0 0 15px 0;
    color: var(--cpl-color-text-main);
}

.cpl-single-block-body {
    line-height: 1.8;
    text-align: left;
    width: 100%;
}

.cpl-chart-placeholder {
    background: rgba(0, 0, 0, 0.02);
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px dashed #ccc;
    width: 100%;
    color: #888;
}

.cpl-qa-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    text-align: left;
}

.cpl-qa-item {
    border-bottom: 1px dashed #ddd;
    padding-bottom: 12px;
    width: 100%;
}

.cpl-q-row {
    font-weight: bold;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* Q&A の「Q」バッジ。
   注) 以前は background: var(--cpl-main-color) だったが、この変数はサイト設定の
   メインカラーが未設定だと「--cpl-main-color: ;」（定義済みだが空）として出力される。
   空の変数はフォールバック（var(--x, 既定値) の既定値）も使われず、宣言ごと無効＝
   背景が透明になるため、「Q」に既定色が一切付かない状態になっていた
   （実際に色が付いて見えていたのは、ビルダーの右パネルで個別に色を保存した
   ページだけだった）。対になる「A」バッジ（.cpl-qa-circle-a）と同じく変数に
   依存しない既定色を直接指定する。右パネルから変更した場合は
   [data-cpl-id='…'] の !important 付きルールが優先されるので、この既定値は
   あくまで「未設定時の初期色」として働く。 */

.cpl-qa-circle-q {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #4b4b4b;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    flex-shrink: 0;
}

.cpl-a-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.6;
    padding-left: 0;
    width: 100%;
}

.cpl-qa-circle-a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e5e5e5;
    color: #333;
    font-size: 11px;
    font-weight: bold;
    flex-shrink: 0;
}

.cpl-a-text {
    padding-top: 1px;
    text-align: left;
}

.cpl-options-grid-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    width: 100%;
}

@media (max-width: 767px) {
    .cpl-options-grid-4col {
        grid-template-columns: 1fr;
    }
}

.cpl-option-item {
    background: rgba(0, 0, 0, 0.03);
    padding: 8px 10px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cpl-opt-label {
    font-weight: bold;
    font-size: 12px;
}

.cpl-opt-value {
    font-size: 14px;
    font-weight: bold;
    color: var(--cpl-main-color);
}

.cpl-video-block {
    margin: 0 0 25px 0;
    position: relative;
    max-width: 800px;
    width: 100%;
    border-radius: var(--cpl-content-border-radius);
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16/9;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.cpl-video-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    z-index: 10;
    cursor: pointer;
}

.cpl-video-lock-icon {
    width: 40px;
    height: 40px;
    filter: brightness(0) invert(1);
}

.cpl-video-lock-text {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.cpl-video-locked-bg {
    width: 100%;
    height: 100%;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cpl-video-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.cpl-h3-icon-img {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

.cpl-star-rating {
    position: relative;
    display: inline-block;
    font-size: 20px;
    line-height: 1;
    color: #ccc;
    letter-spacing: 2px;
    white-space: nowrap;
    width: 110px;
    margin-right: 10px;
    vertical-align: middle;
}

.cpl-star-rating-bg {
    display: block;
    color: #ddd;
}

.cpl-star-rating-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    color: #ff9800;
    white-space: nowrap;
}

.cpl-reviews-score-text {
    font-size: 14px;
    font-weight: bold;
    color: var(--cpl-color-text-main);
    vertical-align: middle;
}

.cpl-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.cpl-review-item {
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cpl-review-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.cpl-review-nickname {
    font-weight: bold;
    font-size: 14px;
}

.cpl-review-stars {
    color: #ff9800;
    font-size: 14px;
}

.cpl-review-text {
    font-size: 13px;
    line-height: 1.6;
    color: #555;
    white-space: pre-wrap;
}

.cpl-review-post-action {
    text-align: center;
    margin-top: 25px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.cpl-single-btn-review-post {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 12px 20px;
    text-decoration: none;
    gap: 8px;
    flex-direction: row;
    height: auto;
    min-height: 50px;
    box-sizing: border-box;
}

.cpl-review-post-icon {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
}

.cpl-review-post-text {
    line-height: 1.4;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}

.cpl-radar-chart-container {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
}

.cpl-single-schedule-table-wrap.cpl-pc-only {
    overflow-x: auto;
}

.cpl-single-schedule-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
    text-align: center;
    font-size: 12px;
}

.cpl-single-schedule-table thead tr {
    border-bottom: 2px solid #ddd;
    background: rgba(0, 0, 0, 0.02);
    color: var(--cpl-color-text-main);
}

.cpl-single-schedule-table th {
    padding: 10px 5px;
    font-weight: bold;
    width: 14.28%;
    text-align: center;
}

.cpl-sched-header-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cpl-schedule-today-badge {
    display: inline-block;
    background: #ff3366;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    margin: 3px 0 0 0;
    line-height: 1;
}

.cpl-wday-circle-wrap {
    margin-top: 5px;
    display: flex;
    justify-content: center;
}

.cpl-wday-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--cpl-circle-bg, var(--cpl-main-color));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 11px;
    line-height: 1;
}

.cpl-single-schedule-table td {
    padding: 12px 5px;
    vertical-align: middle;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.cpl-single-schedule-table td.is-today {
    background: rgba(var(--cpl-main-color-rgb, 255, 255, 255), 0.05);
}

.cpl-sched-work-time {
    font-weight: bold;
    color: #333;
    font-size: 13px;
    margin-bottom: 3px;
}

.cpl-sched-work-comment {
    font-size: 10px;
    color: var(--cpl-color-text-sub, #666);
    line-height: 1.3;
    text-align: left;
}

.cpl-sched-off-text {
    color: #999;
    font-size: 12px;
}

.cpl-single-schedule-list-sp.cpl-sp-only {
    display: none;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

@media (max-width: 767px) {
    .cpl-single-schedule-table-wrap.cpl-pc-only {
        display: none;
    }
    .cpl-single-schedule-list-sp.cpl-sp-only {
        display: flex;
    }
}


/* 週間出勤スケジュール: モバイル用の縦積みテーブル(2026-09-22)
   日付の行と内容の行を交互に積む。PC用の表(.cpl-single-schedule-table-wrap)は
   min-width:600px の横スクロール表なのでモバイルでは出さない。
   注) .cpl-sp-only は付けないこと。共通の .cpl-sp-only は display:flex になり、
       <table> に当てるとテーブルレイアウトが壊れるため。 */

.cpl-single-schedule-table-sp {
    display: none;
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

@media (max-width: 767px) {
    .cpl-single-schedule-table-sp {
        display: table;
    }
}

.cpl-single-schedule-table-sp th,
.cpl-single-schedule-table-sp td {
    border: 1px solid #e5e5e5;
    padding: 10px 12px;
    text-align: left;
    vertical-align: middle;
}

.cpl-single-schedule-table-sp .cpl-sched-sp-date th {
    font-weight: bold;
    color: #333;
    background: #fff;
}

.cpl-single-schedule-table-sp .cpl-sched-sp-date.is-sunday th {
    color: #ff3366;
}

.cpl-single-schedule-table-sp .cpl-sched-sp-date.is-saturday th {
    color: #0073aa;
}

.cpl-single-schedule-table-sp .cpl-sched-sp-date.is-today th {
    background: rgba(255, 51, 102, 0.06);
}

.cpl-single-schedule-table-sp .cpl-sched-sp-today {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 10px;
    background: #ff3366;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    line-height: 1;
    vertical-align: middle;
}

.cpl-single-schedule-table-sp .cpl-sched-sp-hours {
    font-weight: bold;
    color: #e91e63;
}

.cpl-single-schedule-table-sp .cpl-sched-sp-comment {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.3;
    color: #666;
}

.cpl-single-schedule-table-sp .cpl-sched-sp-off {
    color: #999;
}

.cpl-schedule-row-sp {
    display: flex;
    align-items: center;
    padding: 12px 10px;
    border-bottom: 1px dotted #f3bcf3;
    background: #fff;
}

.cpl-schedule-row-sp.is-today {
    background: rgba(var(--cpl-main-color-rgb, 255, 255, 255), 0.03);
}

.cpl-sched-date-col {
    flex: 0 0 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.cpl-sched-date-text {
    font-weight: bold;
    font-size: 15px;
    color: #333;
}

.cpl-sched-today-tag {
    background: #ff3366;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    line-height: 1;
    transform: scale(0.9);
}

.cpl-sched-wday-col {
    flex: 0 0 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cpl-wday-circle-sp {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cpl-circle-bg, var(--cpl-main-color));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 13px;
}

.cpl-sched-time-col {
    flex: 1;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cpl-sched-time-text-sp {
    font-weight: bold;
    color: #e91e63;
    font-size: 15px;
}

.cpl-sched-tilde {
    color: #bbb;
    font-weight: normal;
}

.cpl-sched-comment-sp {
    font-size: 11px;
    color: #666;
    margin-top: 3px;
    line-height: 1.3;
}

.cpl-sched-undecided-sp {
    color: #999;
    font-size: 14px;
}

.cpl-recommend-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    width: 100%;
}

@media (max-width: 767px) {
    .cpl-recommend-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cpl-recommend-card {
    text-decoration: none;
    color: inherit;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
    transition: all 0.3s ease;
}

.cpl-recommend-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.cpl-recommend-thumb-wrap {
    aspect-ratio: 3/4;
    overflow: hidden;
    background: #f0f0f0;
}

.cpl-recommend-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 12px;
}

.cpl-recommend-info {
    padding: 8px;
    text-align: center;
}

.cpl-recommend-name {
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cpl-recommend-sub {
    font-size: 11px;
    color: #666;
}


/* ==========================================================================
   Schedule Page (templates/page-schedule.php)
   ========================================================================== */

.cpl-page-schedule-container {
    padding: 40px 15px;
}

.cpl-breadcrumb-icon {
    vertical-align: middle;
    margin-right: 4px;
}

.cpl-breadcrumbs {
    font-size: 13px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
    width: 100%;
}

.cpl-breadcrumbs a {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    color: var(--cpl-color-text-sub, #666);
}

.cpl-breadcrumbs a:hover {
    color: var(--cpl-main-color);
}

.cpl-page-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: bold;
    color: var(--cpl-color-text-main);
}

.cpl-schedule-nav-arrow.disabled {
    opacity: 0.3;
    pointer-events: none;
}

.cpl-schedule-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.cpl-schedule-date-header {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cpl-cast-count-wrap {
    font-size: 14px;
    color: var(--cpl-color-text-sub, #666);
    opacity: 0;
    transition: opacity 0.3s;
}


/* ==========================================================================
   Archives, Forms, Header/Footer & Modals (Templates Refactoring)
   ========================================================================== */


/* Archive Cast & Reviews */

/*
 * 注) .cpl-archive-cast-container / .cpl-archive-review-container /
 *     .cpl-archive-news-container の padding: 40px 15px は削除した(2026-09-23)。
 *     これらの要素は .cpl-container と併用されており、このルールが後から
 *     .cpl-container の左右 20px を 15px に上書きしていたうえ、上下 40px は
 *     ビルダーで余白を指定しても打ち消せない既定値として残っていた。
 *     左右の余白は .cpl-container、上下は .cpl-main-content が持つ。
 *     (.cpl-archive-news-container はどのテンプレートでも使われていない)
 */

.cpl-reviews-archive-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.cpl-review-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.cpl-review-card-top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f5f5f5;
}

.cpl-review-card-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.cpl-review-card-cast-name {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 4px;
}

.cpl-review-card-stars {
    font-size: 12px;
    color: #ff9800;
}

.cpl-review-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
    color: #666;
}

.cpl-review-card-user {
    font-weight: bold;
    color: #333;
}

.cpl-review-card-content {
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    white-space: pre-wrap;
}

.cpl-pagination-wrap {
    text-align: center;
    margin-top: 40px;
}


/* Footer */

.cpl-site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 15px;
    text-align: center;
    font-size: 13px;
    color: #888;
}

.cpl-footer-links {
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.cpl-footer-links a {
    color: inherit;
    text-decoration: none;
}

.cpl-footer-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 0.2s;
}

.cpl-footer-logo-img {
    height: 36px;
    width: auto;
    display: block;
}


/* News Archive (index.php) */

.cpl-news-archive-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.cpl-news-archive-item {
    display: flex;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.cpl-news-thumb-col {
    flex: 0 0 150px;
}

.cpl-news-archive-thumb {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.cpl-news-content-col {
    flex: 1;
}

.cpl-news-archive-title {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: bold;
}

.cpl-news-archive-title a {
    text-decoration: none;
    color: inherit;
}

.cpl-news-archive-meta {
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: #888;
    margin-bottom: 10px;
    align-items: center;
}

.cpl-news-archive-excerpt {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
}

.cpl-empty-front-notice {
    padding: 50px;
}


/* Age Verification Modal */

.cpl-age-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cpl-age-box {
    background: #fff;
    width: 90%;
    max-width: 450px;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.cpl-age-btn-enter {
    flex: 1;
    padding: 12px;
    font-weight: bold;
    background: var(--cpl-color-accent1, #ff3366);
    color: #fff;
    border: none;
    border-radius: 30px;
    cursor: pointer;
}

.cpl-age-btn-leave {
    flex: 1;
    padding: 12px;
    font-weight: bold;
    background: #eee;
    color: #333;
    border: none;
    border-radius: 30px;
    cursor: pointer;
}

.cpl-shop-logo {
    max-height: 80px;
    width: auto;
    display: block;
    margin: 0 auto;
}

.cpl-age-modal-disclaimer {
    font-size: 12px;
    margin-top: 15px;
    text-align: center;
    color: var(--cpl-color-text-sub, #666);
}

.cpl-age-modal-widget-area {
    margin-top: 20px;
}


/* Cast Card Elements */

.cpl-card-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    min-width: 0;
}

.cpl-cast-title-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    text-decoration: none;
    color: inherit;
}

.cpl-card-time-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}


/* Header Logos */

.cpl-header-logo-img {
    max-height: 50px;
    width: auto;
    display: block;
}


/* Form Styles (Login, Register, Message, Review) */

.cpl-form-footer-link {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
}

.cpl-message-form-wrap,
.cpl-review-form-wrap {
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.cpl-message-form-title,
.cpl-review-form-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 20px;
    color: var(--cpl-color-text-main);
}

.cpl-message-target-cast,
.cpl-review-target-cast {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.cpl-message-target-avatar,
.cpl-review-target-avatar {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
}

.cpl-message-target-name,
.cpl-review-target-name {
    font-size: 18px;
    font-weight: bold;
}

.cpl-target-error {
    text-align: center;
    color: #ff3366;
    font-weight: bold;
}

/* 固定ページ「クチコミ投稿」「マイページ」「メッセージ送信」の入力欄。
   固定ページ「ログイン」「会員登録」(.cpl-auth-form、このファイル上部の
   「.cpl-auth-form input[type="text"]」以下)と同じ、角丸30px・内余白15pxの
   入力欄に統一する。値を変えるときは両方そろえること。

   セレクタに .cpl-form-group を足して詳細度を上げているのは、先に定義されている
   「.cpl-form-group input」(詳細度 0,1,1)のほうがクラス1つの
   「.cpl-form-input」(0,1,0)より強く、padding:0 / border-radius:4px が勝って
   「CSSが当たっていない」見た目になっていたため。 */

.cpl-form-input,
.cpl-form-select,
.cpl-form-textarea,
.cpl-form-group .cpl-form-input,
.cpl-form-group .cpl-form-select,
.cpl-form-group .cpl-form-textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #cecece;
    border-radius: 30px;
    background: #ffffff;
    color: var(--cpl-color-text-main);
    box-sizing: border-box;
    font-family: inherit;
    font-size: 16px;
    outline: none;
    transition: all 0.3s ease;
}

/* テキストエリアは複数行なので、角丸は同系統のまま少し控えめにする
   (30pxだと本文の書き出し位置まで角が食い込むため)。 */

.cpl-form-textarea,
.cpl-form-group .cpl-form-textarea {
    border-radius: 20px;
    line-height: 1.7;
    resize: vertical;
}

/* セレクトは標準の三角マークと文字が重ならないよう、右の余白を広めに取る */

.cpl-form-select,
.cpl-form-group .cpl-form-select {
    padding-right: 40px;
}

/* フォーカス時も .cpl-auth-form と同じ(枠線を濃くするだけ)。
   「.cpl-review-form-wrap select:focus」(詳細度 0,2,1)より強くするため、
   クラス3つのセレクタも併記している。以前はそちらのピンクの影と
   var(--cpl-main-color)(未設定だと無効値)が当たっていた。 */

.cpl-form-input:focus,
.cpl-form-select:focus,
.cpl-form-textarea:focus,
.cpl-review-form-wrap .cpl-form-input:focus,
.cpl-review-form-wrap .cpl-form-select:focus,
.cpl-review-form-wrap .cpl-form-textarea:focus {
    border-color: #999999;
    background: #ffffff;
    box-shadow: none;
}

.cpl-form-input::placeholder,
.cpl-form-textarea::placeholder {
    color: #b0b0b0;
    font-weight: normal;
}

/* 送信ボタン。固定ページ「ログイン」「会員登録」のボタン
   (.cpl-auth-form .cpl-btn-register = ボタン・プリセットの Preset1)と同じ見た目に統一する。

   以前の背景 var(--cpl-color-gradient) は、サイト設定のグラデーション色が未設定だと
   「linear-gradient(135deg,  0%, #ff9a9e 100%)」という不正な値になり(変数自体は
   定義されているのでフォールバックも使われない)、background が無効 = 透明になる。
   文字色が白のため「ボタンが真っ白で何も表示されない」状態になっていた。
   認証フォームと同じく色を直接指定して、この影響を受けないようにする。

   マイページのパスワード変更ボタンは .cpl-btn-enter を持っており、
   class-cpl-templates.php が出力する動的CSS(style.css より後に読み込まれる)の
   「.cpl-btn-enter { background: var(--cpl-btn-bg); … }」と詳細度が並ぶため、
   クラス2つ(.cpl-btn.cpl-btn-change-pass)にして確実に勝たせている。 */

.cpl-btn-submit-message,
.cpl-btn-submit-review,
.cpl-btn.cpl-btn-change-pass {
    --cpl-arrow-filter: brightness(0) invert(1);
    color: #ffffff;
    background: #191919;
    border: none;
    border-radius: 30px;
    box-shadow: none;
    width: 300px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    backdrop-filter: none;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ホバーも認証フォームのボタンと同じ(少し浮き上がる + 不透明度、影は出さない) */

.cpl-btn-submit-message:hover,
.cpl-btn-submit-review:hover,
.cpl-btn.cpl-btn-change-pass:hover {
    transform: translateY(-2px);
    opacity: 0.9;
    box-shadow: none;
}

/* アイコンの大きさも .cpl-auth-form .cpl-btn-icon(20px)にそろえる */

.cpl-btn-submit-message .cpl-btn-icon,
.cpl-btn-submit-review .cpl-btn-icon {
    width: 20px;
    height: 20px;
}

.cpl-btn-icon {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}


/* MyPage */

.cpl-mypage-wrap {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.cpl-mypage-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.cpl-mypage-header {
    border-bottom: 2px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.cpl-mypage-title {
    margin: 0;
    font-size: 24px;
}

.cpl-mypage-user-info {
    color: #666;
    font-size: 14px;
}

.cpl-mypage-section {
    margin-bottom: 40px;
}

.cpl-mypage-section-title {
    border-bottom: 2px solid var(--cpl-main-color, #c86d8e);
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cpl-mypage-box {
    background: rgba(0, 0, 0, 0.03);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.cpl-mypage-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.cpl-mypage-row:last-child {
    margin-bottom: 0;
}

.cpl-mypage-label {
    width: 200px;
    font-weight: bold;
}

.cpl-mypage-present-icon {
    width: 24px;
    height: 24px;
}

.cpl-mypage-coupon-box {
    background: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.cpl-password-form {
    max-width: 500px;
}

.cpl-form-action-center {
    text-align: center;
    margin-top: 30px;
}

/* パスワード変更ボタンの見た目は、上の
   「.cpl-btn-submit-message, .cpl-btn-submit-review, .cpl-btn.cpl-btn-change-pass」に集約。
   (以前ここにあった display:inline-block / width:auto / min-width:200px は、
    認証フォームと同じ「幅300px・中央寄せ」に統一したため削除) */

.cpl-form-status-message {
    margin-top: 15px;
    font-weight: bold;
    text-align: center;
}


/* Search Form Parts */

.cpl-search-toggle-icon,
.cpl-icon-sort-vertical {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 4px;
}

.cpl-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.cpl-search-input-icon {
    position: absolute;
    left: 14px;
    width: 16px;
    height: 16px;
    pointer-events: none;
    opacity: 0.5;
}

.cpl-search-keyword-input {
    padding-left: 38px;
    width: 100%;
    box-sizing: border-box;
}

.cpl-search-action {
    text-align: center;
    margin-top: 20px;
}


/* 「この条件で検索する」ボタン。
   .cpl-btn-enter の background: var(--cpl-color-gradient) は、
   --cpl-main-color が空だとグラデーション文字列自体が壊れて背景が消え、
   color:#fff と相まって「白地に白文字＝何も見えないボタン」になっていた。
   サイト共通のボタン色(#4B4B4B)で明示的に塗る。 */


/* 注) テーマの動的CSS(cpl-style-inline-css)が
       .cpl-btn-enter { background: var(--cpl-btn-bg) } を後から出力しており、
       同じ詳細度(0,1,0)では負けてしまう。!important を使わずに済むよう、
       親をひとつ挟んだ 0,2,0 のセレクタにしている。 */

.cpl-search-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 250px;
    width: 100%;
    margin: 0 auto;
    height: 50px;
}

.cpl-advanced-search-wrap .cpl-search-submit-btn {
    background: #4b4b4b;
    background-image: none;
    color: #ffffff;
    border: none;
    box-shadow: none;
    font-size: 14px;
    font-weight: bold;
}

.cpl-advanced-search-wrap .cpl-search-submit-btn:hover {
    background: #3a3a3a;
    transform: none;
    box-shadow: none;
}

.cpl-search-reset-wrap {
    margin-top: 10px;
}

.cpl-search-clear-btn {
    background: none;
    border: none;
    color: #888;
    text-decoration: underline;
    cursor: pointer;
}


/* Review Archive Additional Classes */

/* 一覧全体の器。カードの装飾は1件ごとの .cpl-single-block が持つので、
   ここは余白のみ(2026-09-21 に .cpl-single-block を外した)。 */

.cpl-review-archive-block {
    padding: 30px 0;
}

.cpl-review-archive-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 20px;
    font-weight: bold;
    color: var(--cpl-color-text-main);
}

.cpl-review-archive-icon {
    background: var(--cpl-main-color);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* クチコミレビュー一覧の1件分。
   2026-09-21 から .cpl-single-block も併せて付与しており、背景色・枠線・角丸は
   テーマの「コンテンツ設定」(class-cpl-templates.php の動的CSS)が決める。
   ここでは余白だけを指定する。 */

.cpl-review-archive-item {
    padding: 20px;
}

/* 投稿1件のタイトル(H3)。ページタイトル(H2)より1段下の見出しとして出力する。 */

.cpl-review-archive-item-title {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 10px 0;
    color: var(--cpl-color-text-main);
    text-align: left;
}

/* 投稿一覧(archive.php)の1件分のタイトル(H3)。
   .cpl-review-archive-item-title と同じ位置づけ(ページタイトル H2 の下位見出し)。
   以前の <h2> は 24px 前後で表示されていたため、一覧内の見出しとして 20px に抑える。
   リンク色は既定の a { color: var(--cpl-link-color) } をそのまま使う。 */

.cpl-post-item-title {
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 10px 0;
    text-align: left;
}

.cpl-post-item-title a {
    text-decoration: none;
}

.cpl-review-archive-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 5px;
}

.cpl-review-archive-nickname {
    font-weight: bold;
    font-size: 15px;
    color: var(--cpl-color-text-main);
}

.cpl-review-archive-stars {
    color: #ff9800;
    font-size: 15px;
}

.cpl-review-archive-target {
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
}

.cpl-review-archive-target a {
    color: var(--cpl-main-color);
    font-weight: bold;
    text-decoration: none;
}

.cpl-review-archive-content {
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    white-space: pre-wrap;
}


/* ==========================================================================
   Device Responsive Visibility (Page Builder)
   ========================================================================== */

/* 公開ページはビューポート幅で判定する(従来どおり)。
   ただしビルダーのプレビュー(cpl_builder_preview=1)では、<html> に
   data-cpl-device="desktop|tablet|mobile" が付き、上部のデバイス切り替えで
   選ばれているデバイスで判定する(assets/css/builder-preview.css)。
   プレビューのiframeは左サイドバー・右パネルの分だけ実画面より狭く、
   「デスクトップ」選択中でも幅が1024px以下になることが多いため、幅基準のままだと
   デスクトップ表示なのに [data-cpl-hide-tablet] / [data-cpl-hide-mobile] の要素が
   消えてしまう。そのため、この幅基準のルールはプレビューでは効かないようにしている
   (data-cpl-device はプレビュー専用で、公開ページには付かない)。 */

@media (min-width: 1025px) {
    html:not([data-cpl-device]) [data-cpl-hide-desktop="1"] {
        display: none !important;
    }

    /* 中身がこのデバイスで全部非表示になったカラムは、カラムごと畳む。
       カラムは行の align-items:stretch で行の高さまで伸びるため、これが無いと
       中身が空なのに高さだけ残った帯が見える。詳しい理由は
       assets/css/builder-preview.css の同じルールのコメントを参照(2026-09-22)。 */
    html:not([data-cpl-device]) .cpl-canvas-column:has(> :is(.cpl-element, .cpl-canvas-row)[data-cpl-hide-desktop="1"]):not(:has(> :is(.cpl-element, .cpl-canvas-row):not([data-cpl-hide-desktop="1"]))) {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    html:not([data-cpl-device]) [data-cpl-hide-tablet="1"] {
        display: none !important;
    }

    /* 中身がこのデバイスで全部非表示になったカラムは、カラムごと畳む。
       カラムは行の align-items:stretch で行の高さまで伸びるため、これが無いと
       中身が空なのに高さだけ残った帯が見える。詳しい理由は
       assets/css/builder-preview.css の同じルールのコメントを参照(2026-09-22)。 */
    html:not([data-cpl-device]) .cpl-canvas-column:has(> :is(.cpl-element, .cpl-canvas-row)[data-cpl-hide-tablet="1"]):not(:has(> :is(.cpl-element, .cpl-canvas-row):not([data-cpl-hide-tablet="1"]))) {
        display: none !important;
    }
}

@media (max-width: 767px) {
    html:not([data-cpl-device]) [data-cpl-hide-mobile="1"] {
        display: none !important;
    }

    /* 中身がこのデバイスで全部非表示になったカラムは、カラムごと畳む。
       カラムは行の align-items:stretch で行の高さまで伸びるため、これが無いと
       中身が空なのに高さだけ残った帯が見える。詳しい理由は
       assets/css/builder-preview.css の同じルールのコメントを参照(2026-09-22)。 */
    html:not([data-cpl-device]) .cpl-canvas-column:has(> :is(.cpl-element, .cpl-canvas-row)[data-cpl-hide-mobile="1"]):not(:has(> :is(.cpl-element, .cpl-canvas-row):not([data-cpl-hide-mobile="1"]))) {
        display: none !important;
    }
}


/* Button Element Default & Hover Animation
   注) ウィジェットの「すべての◯◯を見る」ボタン
       (.cpl-widget-action .cpl-btn-enter) も同じ見た目に統一するため、
       各ルールにセレクタを併記して定義を共有している。
       値を変更すると両方に効くので注意。打ち消し処理は上の
       「.cpl-widget-action .cpl-btn-enter」のブロックを参照。 */

.cpl-button-element,
.cpl-widget-action .cpl-btn-enter {
    background-color: #4b4b4b;
    color: #ffffff;
    border-radius: 30px;
    /* 挿入時のインラインスタイル(builder-preview.js の dropType==='button')が
       padding:18px 30px を指定しているため、クラス側もそれに合わせる */
    padding: 18px 30px;
    text-align: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 300px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
    box-sizing: border-box;
    cursor: pointer;
    border: none;
    font-size: 14px;
    line-height: 1.4;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}


/* ラベル部分。ウィジェット側は .cpl-button-text を持たない素の <span> なので、
   矢印アイコン以外の span を対象にする。 */

.cpl-button-element .cpl-button-text,
.cpl-widget-action .cpl-btn-enter>span:not(.cpl-icon-arrow-right) {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* 矢印アイコン。ボタン要素とウィジェットの「すべての◯◯を見る」で、
   同じSVGアセット・同じ表示サイズに統一する。

   注) 以前のボタン要素は、ビルダーが挿入時に埋め込むインラインSVG
       （線幅2.5 / 矢印の長さ 5〜19 = 24分の14）を描画していた。
       ウィジェット側のアセット arrow-sm-right-svgrepo-com.svg は
       （線幅2 / 矢印の長さ 6〜18 = 24分の12）なので、同じ22px枠でも
       ボタン側だけ一回り大きく・太く見えていた。
       ラッパー自身をマスク画像で描くことにして、旧マークアップの
       インラインSVGは隠す。保存済みページも含めて見た目がそろう。 */

.cpl-button-element .cpl-button-icon-wrapper,
.cpl-widget-action .cpl-btn-enter .cpl-icon-arrow-right {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}


/* 矢印アイコン（画像要素版）。
   マスクではなく <img> にしてあるので、ビルダーから別のアイコン画像に
   差し替えられる。色は filter で調整する。
   --cpl-arrow-filter はボタン・プリセットが切り替える（白文字のプリセットでは
   白い矢印、濃い文字のプリセットでは元の黒い矢印）。既定はボタンの既定色
   #4B4B4B に合わせて白。 */

.cpl-button-arrow-img {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: block;
    object-fit: contain;
    filter: var(--cpl-arrow-filter, brightness(0) invert(1));
}


/* 矢印・リードアイコンの上限サイズ。

   保存済みのHTMLには、画像要素として扱われた時期の名残で
   style="width: 100% !important; height: 100% !important; object-fit: contain !important"
   がインラインで残っているボタンがある。
   インラインの !important はどんなスタイルシートよりも強いため、
   上の width: 22px は負け、矢印がボタン幅いっぱいまで伸びる。
   その結果、隣の .cpl-button-text (flex:1 / min-width:0) が幅0に潰れ、
   公開ページで「ボタンの文字が消えて、矢印だけが巨大になる」状態になっていた。

   max-width / max-height は width / height より強いので、インラインの
   width:100%!important でも 22px に収まる。builder-preview.css 側には同じ
   クランプがすでにあり、ビルダーのプレビューだけ正しく見えていた。
   公開ページとプレビューをそろえるためこちらにも入れる(2026-09-22)。 */

.cpl-button-element .cpl-button-arrow-img,
.cpl-button-element .cpl-button-lead-img,
.cpl-widget-action .cpl-btn-enter .cpl-button-arrow-img {
    max-width: 22px;
    max-height: 22px;
}


/* テキスト左側の追加アイコン（画像要素版）。矢印アイコンと同じ仕組みで、
   ビルダーから画像変更・フィルター調整・削除ができる。矢印のような
   「進む」方向の意味は持たないため、ホバー時のスライドアニメーションは付けない。 */

.cpl-button-lead-img {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: block;
    object-fit: contain;
    filter: var(--cpl-arrow-filter, brightness(0) invert(1));
}


/* テキスト左側の追加アイコン(アイコンライブラリ版)。「エレメント」-「アイコン」の
   ピッカーから選んだフォントアイコン/SVGアイコンをそのまま表示する。矢印画像版と
   同じく「進む」方向の意味は持たないため、ホバー時のスライドアニメーションは
   付けない。色はボタンの文字色にそろえるため currentColor を継承する。 */

.cpl-button-lead-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    color: inherit;
}

.cpl-button-lead-icon .cpl-icon-svg-wrap {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cpl-button-lead-icon .cpl-icon-svg-wrap svg {
    width: 100%;
    height: 100%;
}

.cpl-button-element .cpl-button-icon-wrapper {
    -webkit-mask-image: url("../images/arrow-sm-right-svgrepo-com.svg");
    mask-image: url("../images/arrow-sm-right-svgrepo-com.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
}


/* 旧マークアップのインラインSVGには style="display:block" が直接付いているため、
   打ち消すには !important が要る。 */

.cpl-button-element .cpl-button-icon-wrapper>svg,
.cpl-button-element .cpl-button-icon-wrapper>.cpl-button-arrow-svg {
    display: none !important;
}


/* ボタンのアイコンを、ボタンへのホバーで右に5pxスライドさせる既定の演出。
   注) 以前は .cpl-button-icon-wrapper と、その中の svg の両方が対象に
       入っていたため、入れ子のtransformが合成されて実際には10px動いていた
       （ウィジェット側は5px）。ラッパーだけを動かすように絞り、
       両者とも5pxにそろえる。.cpl-icon-element はラッパーの外に置かれる
       別要素なので対象のまま残す。

   2026-09-20: 一度「ボタン」要素(.cpl-button-element)をこの既定演出から外し、
   右パネルの「アニメーション」で設定してもらう方針にしたが、
     ・スクロールアニメーションはアイコン自身にホバーしないと発火しない
       (ボタン全体のホバーでは動かない)
     ・開始時の不透明度が0のため、待機中はアイコンが見えない
   という理由で既定演出に戻した。つまり、ボタンのアイコンのホバー演出は
   右パネルの「アニメーション」ではなく、このCSSが担当する。 */

.cpl-button-element .cpl-button-icon-wrapper,
.cpl-button-element .cpl-icon-element,
.cpl-widget-action .cpl-btn-enter .cpl-icon-arrow-right,
.cpl-button-arrow-img {
    transition: transform 0.3s ease !important;
}

.cpl-button-element:hover .cpl-button-icon-wrapper,
.cpl-button-element:hover .cpl-icon-element,
.cpl-button-element:hover .cpl-button-arrow-img,
.cpl-widget-action .cpl-btn-enter:hover .cpl-icon-arrow-right,
.cpl-widget-action .cpl-btn-enter:hover .cpl-button-arrow-img {
    transform: translateX(5px) !important;
}


/* アイコン要素（SVGタイプ）: ビルダーでリサイズしたサイズが、
   公開ページでもラッパー内のsvgに正しく反映されるようにする */

.cpl-icon-element .cpl-icon-svg-wrap svg {
    width: 100% !important;
    height: 100% !important;
}


/* ボタンのモバイル時(幅100%)の切り替えは、意図的に767pxより狭い640pxを閾値にしている。
   ビルダーの「タブレット」プレビューはiframeの幅を768pxちょうどに指定しているが、
   iframe内のドキュメントに縦スクロールバーが出ると、その分(通常15〜17px程度)だけ
   メディアクエリが評価する実際のビューポート幅が768pxより狭くなり(750px前後)、
   767px以下のこのルールに誤って一致してしまい、タブレットサイズでもボタン幅が
   デフォルトの300pxではなく100%になってしまっていた。実際のスマートフォンの
   CSS上の横幅は概ね480px以下のため、640pxまで閾値を下げても実害はない。 */

@media (max-width: 640px) {
    .cpl-button-element,
    .cpl-widget-action .cpl-btn-enter {
        width: 100% !important;
    }
}


/* ==========================================================================
   Table Element Frontend Styling (Non-Builder view only)
   ========================================================================== */

body:not(.cpl-builder-body) .cpl-table-element {
    width: 100%;
    margin-bottom: 20px;
    box-sizing: border-box;
    font-size: var(--cpl-table-font-size, 14px);
    color: var(--cpl-table-color, inherit);
    overflow-x: auto;
}

body:not(.cpl-builder-body) .cpl-table-element .cpl-table-opts,
body:not(.cpl-builder-body) .cpl-table-element .acf-table-top-row,
body:not(.cpl-builder-body) .cpl-table-element .acf-table-bottom-row,
body:not(.cpl-builder-body) .cpl-table-element .acf-table-body-left,
body:not(.cpl-builder-body) .cpl-table-element .acf-table-body-right,
body:not(.cpl-builder-body) .cpl-table-element .acf-table-header-left,
body:not(.cpl-builder-body) .cpl-table-element .acf-table-header-right,
body:not(.cpl-builder-body) .cpl-table-element .cpl-tbl-btn {
    display: none !important;
}

body:not(.cpl-builder-body) .cpl-table-element .acf-table-wrap {
    padding: 0;
    width: 100%;
}

.cpl-table-element .acf-table-table {
    display: table;
    border-collapse: collapse;
    width: 100%;
}

.cpl-table-element .acf-table-header-row,
.cpl-table-element .acf-table-body-row {
    display: table-row;
}

.cpl-table-element.cpl-table-hide-header .acf-table-header-row {
    display: none;
}

.cpl-table-element .acf-table-header-cell,
.cpl-table-element .acf-table-body-cell {
    display: table-cell;
    padding: var(--cpl-table-cell-padding, 8px 12px);
    border: var(--cpl-table-border-width, 1px) solid var(--cpl-table-border-color, #e1e1e1);
    word-break: break-word;
    vertical-align: middle;
}

.cpl-table-element[data-cpl-border-sides="bottom"] .acf-table-header-cell,
.cpl-table-element[data-cpl-border-sides="bottom"] .acf-table-body-cell {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: var(--cpl-table-border-width, 1px) solid var(--cpl-table-border-color, #e1e1e1);
}

.cpl-table-element .acf-table-header-cell {
    background-color: var(--cpl-table-header-bg, #f9f9f9);
    color: var(--cpl-table-header-color, #333333);
    font-weight: bold;
}

.cpl-table-element .acf-table-body-cell {
    background-color: #ffffff;
    color: inherit;
}

.cpl-table-element[data-cpl-zebra="1"] .acf-table-body-row:nth-child(even) .acf-table-body-cell {
    background-color: var(--cpl-table-stripe-bg, #fafafa);
}

.cpl-table-element.cpl-table-first-col-th .acf-table-body-cell:first-of-type {
    background-color: var(--cpl-table-header-bg, #f9f9f9);
    color: var(--cpl-table-header-color, #333333);
    font-weight: bold;
}


/* -------------------------------------
 * 「画像」要素の角丸
 *
 * 画像要素は
 *   <div class="cpl-image-element"><img></div>
 *   <div class="cpl-image-element"><a><img></a></div>
 *   <figure class="wp-block-image cpl-image-element"><img></figure>
 * というラッパー構造で、ビルダーで選択されるのは外側のラッパー。
 * ラッパーに border-radius を付けても中の <img> はクリップされないため、
 * 右パネルの「角丸」を変えても見た目が変わらなかった。
 *
 * 中の <a> / <img> にラッパーの角丸をそのまま受け継がせることで、
 * インライン指定(本文HTMLとして保存されるページ)でも、
 * 生成CSS経由の指定(テンプレートページ)でも同じように反映される。
 * overflow:hidden は使わない(ラッパーをクリップすると box-shadow や
 * はみ出し配置の指定まで切られてしまうため)。
 * ------------------------------------- */

.cpl-image-element > a,
.cpl-image-element > img,
.cpl-image-element > picture,
.cpl-image-element > a > img,
.cpl-image-element > picture > img {
    border-radius: inherit;
}


/* -------------------------------------
 * 「動画」要素の角丸 (2026-09-23)
 *
 *   <div class="cpl-video-element"><video style="…border-radius:4px;"></video></div>
 *
 * 右パネルの「角丸」は外側のラッパーに付くため、画像要素と同じく中の <video> に
 * 受け継がせる。<video> には生成時のインライン指定(border-radius:4px)が残っているため
 * !important で上書きする。既定の見た目(4px)はラッパー側の既定値で維持する。
 * overflow:hidden は使わない(画像要素と同じ理由。box-shadow が切られるため)。
 * ------------------------------------- */

.cpl-video-element {
    border-radius: 4px;
}

.cpl-video-element > video {
    border-radius: inherit !important;
}


/* -------------------------------------
 * カラムの「背景動画」と「オーバーレイ」の重なり順
 *
 * オーバーレイは通常、カラム自身の background-image に
 * linear-gradient(色, 色) を重ねる形で表現している。一方、背景動画は
 * CSSのbackgroundでは表現できないため <video class="cpl-col-bg-video"> を
 * 絶対配置してカラムの背景のように敷いている。
 *
 * CSSの描画順は「要素自身の背景 → 負のz-indexの子孫 → 通常フローの中身」なので、
 * カラムの背景として塗ったオーバーレイは必ず動画の"下"になる。そのため
 * 「背景画像にはオーバーレイが乗るのに、背景動画には乗らない」
 * (重なり順が 動画 > オーバーレイ > 画像 になる)状態だった。
 *
 * 背景動画があるカラムでは、オーバーレイを実体のある .cpl-col-bg-overlay として
 * 動画の上に重ねる(要素は builder-preview.js / main.js が生成する)。
 *   カラム自身の背景(画像) < 動画(z-index:-2) < オーバーレイ(z-index:-1) < 中身
 *
 * 動画側の z-index を !important で下げているのは、この修正より前に保存された
 * ページの <video> にインラインで z-index:-1 が焼き込まれているため。
 * ------------------------------------- */

/* 背景動画を敷いたカラムは、自身を積み重ねコンテキストにしておく。
   こうしないと負のz-indexの子(動画・オーバーレイ)が祖先の積み重ね
   コンテキストまで上がってしまい、カラム自身の背景(背景画像)より後ろに
   隠れてしまうことがある(カラムは position:relative だが z-index:auto の
   ため、そのままでは積み重ねコンテキストを作らない)。 */

.cpl-canvas-column[data-cpl-bg-video] {
    isolation: isolate;
}

.cpl-canvas-column > .cpl-col-bg-video {
    z-index: -2 !important;
}

.cpl-canvas-column > .cpl-col-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
}


/* Mobile px width constraint */

@media (max-width: 767px) {
    [data-cpl-id],
    .cpl-element,
    .cpl-canvas-column,
    .cpl-canvas-row,
    .cpl-inner {
        max-width: 100%;
        box-sizing: border-box;
    }
}


/* Sticky Column Styles */

@media (min-width: 768px) {
    .cpl-canvas-column[data-cpl-sticky="1"],
    .cpl-canvas-column.cpl-sticky-column {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        align-self: flex-start !important;
        height: auto !important;
        z-index: 10;
    }
    .cpl-canvas-row:has(.cpl-canvas-column[data-cpl-sticky="1"]),
    .cpl-canvas-row:has(.cpl-canvas-column.cpl-sticky-column),
    .cpl-canvas-row.cpl-row-has-sticky {
        align-items: flex-start !important;
    }
}

@media (max-width: 767.98px) {
    .cpl-canvas-column[data-cpl-sticky="1"],
    .cpl-canvas-column.cpl-sticky-column {
        position: relative !important;
        top: auto !important;
        align-self: stretch !important;
    }
}


/* =========================================================================
   「メニュー」エレメント (.cpl-menu-element) - フロントエンド用ベースCSS
   ビルダーのライブプレビュー(builder-preview.js内で動的に注入)と
   同じルールをここに用意し、公開サイトでも同じ見た目・挙動になるようにする。
   ========================================================================= */

.cpl-menu-element {
    position: relative;
    box-sizing: border-box;
}

.cpl-menu-element ul.cpl-menu-list,
.cpl-menu-element ul.menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--cpl-menu-gap, 24px);
    justify-content: var(--cpl-menu-align, center);
    flex-direction: var(--cpl-menu-direction, row);
}

.cpl-menu-element ul.cpl-menu-list>li,
.cpl-menu-element ul.menu>li {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cpl-menu-element ul.cpl-menu-list>li>a,
.cpl-menu-element ul.menu>li>a {
    position: relative;
    text-decoration: none;
    color: var(--cpl-menu-text-color, inherit);
    font-size: var(--cpl-menu-font-size, 12px);
    font-weight: var(--cpl-menu-font-weight, 500);
    padding: var(--cpl-menu-item-padding, 8px 0);
    display: inline-block;
    transition: color 0.3s ease;
}

/* ホバー色・現在ページ色はメニュー要素(.cpl-menu-element)自身で変数を解決する。
   ul/li/a など内側の要素に --cpl-menu-hover-color が残っていると、
   カスタムプロパティは「最も近い祖先の指定」が継承されるため
   メニュー要素に設定した色が効かなくなる。ここで解決済みの値に
   変換しておくことで、内側の同名指定に上書きされないようにする。 */
.cpl-menu-element {
    --cpl-menu-hover-resolved: var(--cpl-menu-hover-color, var(--cpl-color-primary, #3dbfe8));
}

.cpl-menu-element ul.cpl-menu-list>li>a:hover,
.cpl-menu-element ul.menu>li>a:hover {
    color: var(--cpl-menu-hover-resolved);
}


/* 現在表示中のページのメニュー項目。
   文字色は「ホバー時文字色」と共通（--cpl-menu-hover-color）。
   以前は専用の --cpl-menu-active-color を持っていたが、設定項目を統合した。 */

.cpl-menu-element ul.cpl-menu-list>li.current-menu-item>a,
.cpl-menu-element ul.cpl-menu-list>li.current_page_item>a,
.cpl-menu-element ul.menu>li.current-menu-item>a,
.cpl-menu-element ul.menu>li.current_page_item>a {
    color: var(--cpl-menu-hover-resolved);
}

.cpl-menu-element:not([data-cpl-menu-border="0"]) ul.cpl-menu-list>li>a::before,
.cpl-menu-element:not([data-cpl-menu-border="0"]) ul.menu>li>a::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--cpl-menu-border-height, 1px);
    background-color: var(--cpl-menu-border-color, #3dbfe8);
    transform: scaleX(0);
    transform-origin: center;
    /* アニメーション時間は 0.3s 固定（設定項目は廃止） */
    transition: transform 0.3s ease-in-out;
    border-radius: 2px;
}

.cpl-menu-element:not([data-cpl-menu-border="0"]) ul.cpl-menu-list>li>a:hover::before,
.cpl-menu-element:not([data-cpl-menu-border="0"]) ul.cpl-menu-list>li.current-menu-item>a::before,
.cpl-menu-element:not([data-cpl-menu-border="0"]) ul.cpl-menu-list>li.current_page_item>a::before,
.cpl-menu-element:not([data-cpl-menu-border="0"]) ul.menu>li>a:hover::before,
.cpl-menu-element:not([data-cpl-menu-border="0"]) ul.menu>li.current-menu-item>a::before,
.cpl-menu-element:not([data-cpl-menu-border="0"]) ul.menu>li.current_page_item>a::before {
    transform: scaleX(1);
}


/* 階層メニュー: 親メニューの右に下向き矢印を表示 */

.cpl-menu-element ul.cpl-menu-list>li.menu-item-has-children>a,
.cpl-menu-element ul.menu>li.menu-item-has-children>a {
    display: inline-flex;
    align-items: center;
}

.cpl-menu-element ul.cpl-menu-list>li.menu-item-has-children>a::after,
.cpl-menu-element ul.menu>li.menu-item-has-children>a::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 6px;
    background-image: url("../images/builder_icon_arrow-down.svg");
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.cpl-menu-element ul.cpl-menu-list>li.menu-item-has-children:hover>a::after,
.cpl-menu-element ul.menu>li.menu-item-has-children:hover>a::after {
    transform: rotate(180deg);
}


/* 階層メニュー: ホバーで子メニューがスライド+フェードインするドロップダウン */

.cpl-menu-element ul.cpl-menu-list li.menu-item-has-children,
.cpl-menu-element ul.menu li.menu-item-has-children {
    position: relative;
}

.cpl-menu-element .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background-color: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    z-index: 999;
    pointer-events: none;
}

.cpl-menu-element ul.cpl-menu-list li.menu-item-has-children:hover>.sub-menu,
.cpl-menu-element ul.menu li.menu-item-has-children:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.cpl-menu-element .sub-menu li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.cpl-menu-element .sub-menu li a {
    display: block;
    padding: 10px 20px;
    white-space: nowrap;
    color: #333333;
    font-size: 14px;
    font-weight: 400;
    transition: background-color 0.2s ease;
}

.cpl-menu-element .sub-menu li a:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #333333;
}

.cpl-menu-element .sub-menu .sub-menu {
    top: 0;
    left: 100%;
}


/* ==========================================================================
   見出し要素「モーション」プリセット
   ビルダー(App.jsx)で選択された motionPreset は、プレビュー用JS
   (builder-preview.js の applyStylesToSingleElement)とフロントエンド用PHP
   (class-cpl-settings.php の apply_builder_text_changes)の両方から
   data-cpl-motion 属性として要素に付与される。実際のアニメーション表現は
   ここに集約し、両経路で同一の見た目になるようにする。
   ========================================================================== */

[data-cpl-motion="shimmer"] {
    /* 光の帯。文字色にグラデーションを指定すると background-image が丸ごと
       上書きされてしまうため、JS(cplSyncShimmerGradient)が
       「帯 + ユーザーのグラデーション」の2層に合成し直す。その際にこの値を
       読むので、カスタムプロパティとして公開しておく。 */
    --cpl-shimmer-highlight: linear-gradient( 90deg, transparent 40%, rgba(255, 255, 255, 0.85) 50%, transparent 60%);
    background-image: var(--cpl-shimmer-highlight), linear-gradient(currentColor, currentColor);
    background-size: 250% 100%, 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: cpl-motion-shimmer 2.5s linear infinite;
}

@keyframes cpl-motion-shimmer {
    from {
        background-position: 150% 0, 0 0;
    }
    to {
        background-position: -50% 0, 0 0;
    }
}


/* text-effect系(単語ごとに順番に現れる)モーション。
   対象のテキストは PHP(apply_builder_text_changes)/プレビュー用JS
   (builder-preview.js の applyCplTextEffectWords)の両方で、単語ごとに
   <span class="cpl-text-effect-word" style="--cpl-word-index:N"> に
   分割されている前提。ここではその分割済みspanに対して、
   --cpl-word-index を使った段階的なanimation-delayでスタガー表示を作る。
   ページ読み込み時に1回だけ再生する(スクロール連動はしない簡易版)。 */

[data-cpl-motion^="text-effect-"] .cpl-text-effect-word {
    display: inline-block;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    animation-delay: calc(var(--cpl-word-index, 0) * 0.06s);
}

[data-cpl-motion="text-effect-fade"] .cpl-text-effect-word {
    animation-name: cpl-motion-text-effect-fade;
}

@keyframes cpl-motion-text-effect-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

[data-cpl-motion="text-effect-slide"] .cpl-text-effect-word {
    animation-name: cpl-motion-text-effect-slide;
}

@keyframes cpl-motion-text-effect-slide {
    from {
        opacity: 0;
        transform: translateY(0.4em);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-cpl-motion="text-effect-blur"] .cpl-text-effect-word {
    animation-name: cpl-motion-text-effect-blur;
}

@keyframes cpl-motion-text-effect-blur {
    from {
        opacity: 0;
        filter: blur(8px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

[data-cpl-motion="text-effect-scale"] .cpl-text-effect-word {
    animation-name: cpl-motion-text-effect-scale;
}

@keyframes cpl-motion-text-effect-scale {
    from {
        opacity: 0;
        transform: scale(0.4);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* text-roll(1文字ずつロールして現れる)モーション。
   対象のテキストは PHP(apply_builder_text_changes)/プレビュー用JS
   (builder-preview.js の applyCplTextEffectWords)の両方で、1文字ごとに
   <span class="cpl-text-roll-char" style="--cpl-char-index:N"> に分割
   されている前提。
   当初はマウスホバーで再生する案だったが、見出し要素はユーザーが積極的に
   ホバーする対象ではなく「設定しても何も起きないように見える」ため、
   text-effect-*系と同じくページ読み込み時に1回、文字ごとの
   --cpl-char-index を使った段階的なanimation-delayで、左から右へ
   1文字ずつrotateXで回転しながら現れるように変更。 */

[data-cpl-motion="text-roll"] {
    perspective: 500px;
}

[data-cpl-motion="text-roll"] .cpl-text-roll-char {
    display: inline-block;
    transform-style: preserve-3d;
    animation-name: cpl-motion-text-roll;
    animation-duration: 0.6s;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    animation-fill-mode: both;
    animation-delay: calc(var(--cpl-char-index, 0) * 0.03s);
}

@keyframes cpl-motion-text-roll {
    from {
        opacity: 0;
        transform: rotateX(90deg);
    }
    to {
        opacity: 1;
        transform: rotateX(0deg);
    }
}


/* 2026-09-20 作り直し。
   以前は「実際にブラウザが折り返した行」をJSでoffsetTop計測してグルーピングし、
   行単位でマスクしていたが、Webフォントの読み込み前や要素が非表示のときは
   計測結果がずれて行分けに失敗し、「うまく動かない」状態になっていた。
   計測をやめ、1文字ずつマスク枠で包んで下からせり上がらせる方式に変更した
   (参考: CodePen「Text Swift-Up Animation」KACTOPKA/qBMeKeQ)。
   参考実装は単語単位だが、日本語は単語間に空白が無く「全文が1単語」に
   なってしまうため、ここでは文字単位で分割している。

   クラス名(.cpl-line-reveal-line / -inner)と --cpl-line-index は、
   保存済みHTMLとの互換のため従来のまま使っている。実際の分割単位は「行」ではなく
   「文字」である点に注意。

   マスク枠は overflow:hidden で下側を隠すが、そのままだと g/j/y などの
   ディセンダが切れてしまうため、padding-bottom で逃がし、同量の負のmarginで
   レイアウト上の位置は元に戻している。内側要素を隠しきるにはこのpadding分も
   余計に下げる必要があるので translateY は calc(100% + 0.2em)。 */

[data-cpl-motion="line-reveal"] .cpl-line-reveal-line {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.18em;
    margin-bottom: -0.18em;
}

[data-cpl-motion="line-reveal"] .cpl-line-reveal-line-inner {
    display: inline-block;
    transform: translateY(calc(100% + 0.2em));
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--cpl-line-index, 0) * 0.03s);
}

[data-cpl-motion="line-reveal"].cpl-line-reveal-in .cpl-line-reveal-line-inner {
    transform: translateY(0);
}


/* 「ライズ」(rise): 1文字ずつ下からせり上がり、行き過ぎてから戻る(オーバーシュート)。
   参考: CodePen「Rise & Overshoot」jpbelley/emdXbWm。
   参考実装は requestAnimationFrame によるバネ物理演算だが、ここは他のプリセットと
   同様にCSSのみで完結させたいので、行き過ぎを含む cubic-bezier(0.34, 1.56, 0.64, 1)
   で近似している(1.56 が1を超えているぶんが行き過ぎ量)。
   文字分割は text-roll と同じ仕組み(.cpl-text-roll-char / --cpl-char-index)を
   そのまま流用している。 */

[data-cpl-motion="rise"] .cpl-text-roll-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.8em);
    animation: cpl-motion-rise 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: calc(var(--cpl-char-index, 0) * 0.045s);
}

/* 画面外にある間は再生を止めて隠しておく(main.js の initCplMotionInView)。
   クラスが外れた時点でアニメーションが最初から再生される。 */
[data-cpl-motion].cpl-motion-wait .cpl-text-effect-word,
[data-cpl-motion].cpl-motion-wait .cpl-text-roll-char {
    animation: none !important;
    opacity: 0;
}

@keyframes cpl-motion-rise {
    from {
        opacity: 0;
        transform: translateY(0.8em);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================================
   ブロックリビール(カーテン)アニメーション
   --------------------------------------------------------------------------
   右パネル「モーション」-「ブロックリビール・アニメーション」をONにした
   見出し・画像には data-cpl-block-reveal="1" が付く(付与はプレビュー用JS
   (builder-preview.js の applyStylesToSingleElement)とフロントエンド用PHP
   (class-cpl-settings.php の apply_builder_text_changes)の両方)。

   演出は「色付きの四角形が左→右へ伸びて要素を完全に覆い、そのまま左→右へ
   縮んで消えることで背後の中身が現れる」というもの。四角形は ::after で描画し、
   覆われる前の中身は visibility:hidden で隠しておく(::after 側だけ
   visibility:visible にするので四角形は見える)。中身は「四角形が覆い終わる
   ＝再生時間のちょうど中間」で現れてほしいので、中身の visibility は
   cpl-block-reveal-content の@keyframesで50%の地点で切り替える。

   発火は要素が表示領域に入ったタイミングで1回だけ(main.js / builder-preview.js の
   initCplBlockReveal が IntersectionObserver で .cpl-block-reveal-in を付与し、
   付与したら監視を解除する)。アニメーション自体はここの@keyframesのみで完結する。

   <img> は置換要素で ::after が描画されないため、上記JSが
   <span class="cpl-block-reveal-wrap"> で包み、そのラッパー側へ
   data-cpl-block-reveal を複製して四角形を描画する。img自身は :not(img) で
   対象外にしてあるので、JSが動かない環境では画像がそのまま表示される
   (中身が永久に隠れたままになる事故を防ぐため)。
   ========================================================================== */

[data-cpl-block-reveal="1"]:not(img) {
    position: relative;
    visibility: hidden;
}

[data-cpl-block-reveal="1"]:not(img)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    visibility: visible;
    pointer-events: none;
    background-color: var(--cpl-block-reveal-color, #000000);
    transform: scaleX(0);
    transform-origin: left center;
}

[data-cpl-block-reveal="1"]:not(img).cpl-block-reveal-in {
    animation: cpl-block-reveal-content var(--cpl-block-reveal-duration, 1.2s) linear forwards;
}

[data-cpl-block-reveal="1"]:not(img).cpl-block-reveal-in::after {
    animation: cpl-block-reveal var(--cpl-block-reveal-duration, 1.2s) cubic-bezier(0.66, 0, 0.34, 1) forwards;
}

/* 「モーション=シマー(光沢)」との併用。シマーも要素自身の animation を使うため、
   ここで2つ並べて指定しておかないと、どちらか一方しか再生されない。 */

[data-cpl-motion="shimmer"][data-cpl-block-reveal="1"]:not(img).cpl-block-reveal-in {
    animation: cpl-motion-shimmer 2.5s linear infinite,
               cpl-block-reveal-content var(--cpl-block-reveal-duration, 1.2s) linear forwards;
}

/* 四角形(カーテン)本体。
   前半(0→50%)は transform-origin:left のまま scaleX を 0→1 にして左から右へ
   伸ばし、要素を完全に覆う。後半(50→100%)は transform-origin を right へ
   切り替えてから scaleX を 1→0 にすることで、四角形の左端が右へ移動しながら
   縮み、背後の中身が左から右へ現れる。
   50%→50.01% の一瞬で transform-origin を切り替えているのは、transform-origin も
   補間対象のため、間隔を空けると原点がじわじわ移動して四角形がずれて見えるから。 */

@keyframes cpl-block-reveal {
    0% {
        transform: scaleX(0);
        transform-origin: left center;
    }
    50% {
        transform: scaleX(1);
        transform-origin: left center;
    }
    50.01% {
        transform: scaleX(1);
        transform-origin: right center;
    }
    100% {
        transform: scaleX(0);
        transform-origin: right center;
    }
}

/* 中身(テキスト/画像)の表示切り替え。四角形が覆い終わる中間地点で現れる。 */

@keyframes cpl-block-reveal-content {
    0%,
    49.99% {
        visibility: hidden;
    }
    50%,
    100% {
        visibility: visible;
    }
}

/* OSで「視差効果を減らす」を有効にしている閲覧者には演出を出さず、
   最初から中身を表示する(中身が隠れたままにならないようにする)。 */

@media (prefers-reduced-motion: reduce) {
    [data-cpl-block-reveal="1"]:not(img) {
        visibility: visible;
    }

    [data-cpl-block-reveal="1"]:not(img)::after,
    [data-cpl-motion="shimmer"][data-cpl-block-reveal="1"]:not(img).cpl-block-reveal-in::after {
        display: none;
        animation: none;
    }

    [data-cpl-block-reveal="1"]:not(img).cpl-block-reveal-in {
        animation: none;
    }

    [data-cpl-motion="shimmer"][data-cpl-block-reveal="1"]:not(img).cpl-block-reveal-in {
        animation: cpl-motion-shimmer 2.5s linear infinite;
    }
}


/* <img> 用のラッパー。画像の実寸にぴったり重なるよう fit-content で囲う
   (ブロック幅いっぱいにすると、画像より広い範囲が四角形で覆われてしまう)。 */

.cpl-block-reveal-wrap {
    display: block;
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
}


/* Default structural layout for .cpl-header */

.cpl-header {
    position: relative;
    width: 100%;
    max-width: none;
    padding: 0;
    box-sizing: border-box;
    z-index: 10;
}


/* Remove bottom margin for the last element in header to prevent unwanted gaps.
   注) !important が必要。ヘッダー内の要素にはビルダーが margin-bottom を
   インラインで書き込んでおり、外すとヘッダー下部に余分な隙間が出る。 */

.cpl-header>*:last-child,
.cpl-header .cpl-canvas-column>*:last-child {
    margin-bottom: 0 !important;
}


/* =========================================
   News Widget (新着情報) — 表示形式ごとの既定スタイル
   -----------------------------------------
   マークアップ: CPL_Shortcodes::render_news_shortcode()
     .cpl-news-list.cpl-news-cols-{1|2|3|4}
       article.cpl-news-item
         .cpl-news-thumbnail > a > img.cpl-news-img
         .cpl-news-content
           h3.cpl-news-title > a
           .cpl-news-meta > span.cpl-news-meta-item (+ .cpl-news-cat)
           .cpl-news-excerpt

   カード型（白背景・box-shadow・border-radius:6px）を基本とし、
   1列/2列は「サムネイル左・本文右」の横並び、
   3列/4列は「画像上・本文下」の縦積みにする。

   このファイル(assets/css/style.css)は CPL_Templates::enqueue_frontend_scripts()
   でフロントエンドに読み込まれ、ビルダーのプレビューiframeも同じフロントページを
   表示しているため、プレビューとフロントの両方に同じ既定スタイルが適用される。
   ========================================= */


/* --- グリッド --- */

.cpl-news-list.cpl-news-cols-1,
.cpl-news-list.cpl-news-cols-2,
.cpl-news-list.cpl-news-cols-3,
.cpl-news-list.cpl-news-cols-4 {
    display: grid;
    gap: 20px;
    align-items: stretch;
    /* 一覧そのものはカードではないため、親から継承し得る装飾を打ち消す */
    background-color: transparent;
    box-shadow: none;
    border: none;
}

.cpl-news-list.cpl-news-cols-1 {
    grid-template-columns: 1fr;
}

.cpl-news-list.cpl-news-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.cpl-news-list.cpl-news-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.cpl-news-list.cpl-news-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 991px) {
    .cpl-news-list.cpl-news-cols-3,
    .cpl-news-list.cpl-news-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .cpl-news-list.cpl-news-cols-2,
    .cpl-news-list.cpl-news-cols-3,
    .cpl-news-list.cpl-news-cols-4 {
        grid-template-columns: 1fr;
    }
}

/* モバイルの表示スタイル「2列」(ウィジェット設定「表示スタイル(モバイル)」 = cpl-news-sp-cols-2)。
   2列では横並び(サムネイル左)だと本文が狭すぎるため、PCの表示スタイルに関係なく
   「画像上・本文下」の縦積みカードにする。1列(cpl-news-sp-cols-1)は従来どおり。
   注) 後に出てくる「1列 / 2列: 横並び」のルール(0,3,0)に勝つよう、[class*=...] で詳細度を上げている。 */
@media (max-width: 767px) {
    .cpl-news-list.cpl-news-sp-cols-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .cpl-news-list.cpl-news-sp-cols-2[class*="cpl-news-cols-"] .cpl-news-item {
        display: flex;
        flex-direction: column;
        padding: 0;
        gap: 0;
    }
    .cpl-news-list.cpl-news-sp-cols-2[class*="cpl-news-cols-"] .cpl-news-thumbnail {
        flex: none;
        width: 100%;
        border-radius: 0;
    }
    .cpl-news-list.cpl-news-sp-cols-2[class*="cpl-news-cols-"] .cpl-news-thumbnail img {
        aspect-ratio: 16 / 10;
    }
    .cpl-news-list.cpl-news-sp-cols-2[class*="cpl-news-cols-"] .cpl-news-content {
        padding: 12px;
    }
}


/* --- カード共通 --- */

.cpl-news-list[class*="cpl-news-cols-"] .cpl-news-item {
    background-color: var(--cpl-color-surface, #ffffff);
    border: none;
    border-radius: var(--cpl-radius-md, 12px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    margin: 0;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cpl-news-list[class*="cpl-news-cols-"] .cpl-news-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    opacity: 1;
}

.cpl-news-list[class*="cpl-news-cols-"] .cpl-news-thumbnail {
    overflow: hidden;
    line-height: 0;
}

.cpl-news-list[class*="cpl-news-cols-"] .cpl-news-thumbnail a {
    display: block;
}

.cpl-news-list[class*="cpl-news-cols-"] .cpl-news-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cpl-news-list[class*="cpl-news-cols-"] .cpl-news-content {
    flex: 1;
    min-width: 0;
    /* grid/flex内で長いテキストがはみ出さないように */
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cpl-news-list[class*="cpl-news-cols-"] .cpl-news-title {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
}

.cpl-news-list[class*="cpl-news-cols-"] .cpl-news-title a {
    color: var(--cpl-color-text-main, #333333);
    text-decoration: none;
}

.cpl-news-list[class*="cpl-news-cols-"] .cpl-news-title a:hover {
    opacity: 0.7;
}

.cpl-news-list[class*="cpl-news-cols-"] .cpl-news-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 12px;
    color: var(--cpl-color-text-sub, #666666);
}

.cpl-news-list[class*="cpl-news-cols-"] .cpl-news-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}


/* カテゴリー・タグのバッジ（淡いグレー地に濃いグレー文字） */

.cpl-news-list[class*="cpl-news-cols-"] .cpl-news-cat {
    background-color: #ededed;
    color: #555555;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 11px;
    line-height: 1.6;
}

.cpl-news-list[class*="cpl-news-cols-"] .cpl-news-excerpt {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--cpl-color-text-sub, #666666);
    /* 行数を揃えてカードの高さを安定させる */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}


/* =========================================
   1列 / 2列: サムネイル左・本文右の横並び
   ========================================= */

.cpl-news-list.cpl-news-cols-1 .cpl-news-item,
.cpl-news-list.cpl-news-cols-2 .cpl-news-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
}

.cpl-news-list.cpl-news-cols-1 .cpl-news-thumbnail,
.cpl-news-list.cpl-news-cols-2 .cpl-news-thumbnail {
    flex: 0 0 72px;
    width: 72px;
    /* 角丸の既定値は 0(2026-09-23)。以前は 4px + overflow:hidden だったため、
       右パネルで画像の角丸を 0 にしても、この外枠で角が丸く切り取られたままだった。 */
    border-radius: 0;
}

.cpl-news-list.cpl-news-cols-1 .cpl-news-thumbnail img,
.cpl-news-list.cpl-news-cols-2 .cpl-news-thumbnail img {
    aspect-ratio: 1 / 1;
}


/* 1列は横幅があるので抜粋を3行まで見せる */

.cpl-news-list.cpl-news-cols-1 .cpl-news-excerpt {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}


/* =========================================
   3列 / 4列: 画像上・本文下の縦積み
   ========================================= */

.cpl-news-list.cpl-news-cols-3 .cpl-news-item,
.cpl-news-list.cpl-news-cols-4 .cpl-news-item {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
}

.cpl-news-list.cpl-news-cols-3 .cpl-news-thumbnail,
.cpl-news-list.cpl-news-cols-4 .cpl-news-thumbnail {
    flex: none;
    width: 100%;
    border-radius: 0;
}

.cpl-news-list.cpl-news-cols-3 .cpl-news-content,
.cpl-news-list.cpl-news-cols-4 .cpl-news-content {
    padding: 16px;
}


/* 3列: やや横長の画像 */

.cpl-news-list.cpl-news-cols-3 .cpl-news-thumbnail img {
    aspect-ratio: 16 / 10;
}


/* 4列: 縦長の画像・本文は中央寄せ */

.cpl-news-list.cpl-news-cols-4 .cpl-news-thumbnail img {
    aspect-ratio: 3 / 4;
}

.cpl-news-list.cpl-news-cols-4 .cpl-news-content {
    padding: 14px;
}

.cpl-news-list.cpl-news-cols-4 .cpl-news-meta {
    justify-content: center;
}

.cpl-news-list.cpl-news-cols-4 .cpl-news-title {
    font-size: 14px;
    text-align: center;
}

.cpl-news-list.cpl-news-cols-4 .cpl-news-excerpt {
    font-size: 12px;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}


/* スマートフォンで1カラムに折り返したときは、
   3列/4列でも画像が縦に伸びすぎないよう横長に戻す */

@media (max-width: 767px) {
    .cpl-news-list.cpl-news-cols-4 .cpl-news-thumbnail img {
        aspect-ratio: 16 / 10;
    }
}


/* ==========================================================================
   ハンバーガーメニュー要素 (.cpl-hamburger-element)
   - アイコンの変形は Hamburgers (jonsuh.com/hamburgers, MIT) の手法を
     5パターン(squeeze / arrow / arrowturn / spin / spring)移植。
   - 線の色は要素の color(currentColor)、アイコンの背景色/角丸は要素の
     background-color / border-radius をそのまま使う(ビルダーの通常のスタイル設定と共通)。
   - ドロワーは JS(main.js / builder-preview.js)が <body> 直下へ移動して
     画面全体に固定表示する(ヘッダーの backdrop-filter 等で position:fixed の
     基準がずれないようにするため)。開閉は上からのスライド、
     イージングは cubic-bezier(0.19, 1, 0.22, 1)。
   ========================================================================== */


/* 表示位置は常に固定(fixed / 画面右上)。アイコン(.cpl-hb-toggle)とドロワーは
   実行時にJSが<body>直下へ移動するため、ラッパー自体は中身の無い「設定の入れ物」になる。
   以前はビルダーで選択できるよう min-width:50px / min-height:41px を残していたが、
   ヘッダーのカラム内に高さ41px(+ドロップ時の margin-bottom:15px)の空白ブロックが
   できてしまうため、ラッパーはレイアウト上の場所を一切取らないようにする
   (position:absolute + 0×0。インラインの margin 等があっても通常フローに影響しない)。
   ビルダーではアイコン自体をクリックするとこのラッパーが選択され、選択枠もアイコンの
   位置に描画される(builder-preview.js の updateOverlay)。レイヤーパネルからも選択できる。
   (2026-09-24) */

.cpl-hamburger-element {
    display: block;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible;
    line-height: 0;
    color: #000000;
    background-color: transparent;
    border-radius: 0;
}


/* .cpl-hb-toggle は実行時にJS(main.js / builder-preview.js)が<body>直下へ移動するため、
   ラッパーの子孫であることを前提にしたセレクタ(.cpl-hamburger-element .cpl-hb-toggle)は
   使わない(移動後にマッチしなくなるため)。移動後に失われる color / background-color /
   border-radius の継承は、JS側が算出値をインラインスタイルとして直接反映する。 */

.cpl-hb-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin: 0;
    border: 0;
    background: transparent;
    color: inherit;
    border-radius: inherit;
    cursor: pointer;
    overflow: visible;
    font: inherit;
    line-height: 0;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s linear;
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2147483001;
    background-color: inherit;
    /* ビルダー「ハンバーガーメニュー設定」の「mix blend mode」(--cpl-hb-blend-mode)。
       「固定ヘッダー設定」の --cpl-header-blend-mode と同じ仕組み。トグル自身に適用することで、
       透明な背景部分は素通りし、線(currentColorで塗られた不透明部分)だけが背景と合成される。 */
    mix-blend-mode: var(--cpl-hb-blend-mode, normal);
}

.cpl-hb-toggle:hover {
    opacity: 0.8;
}


/* --- Hamburgers 基本形 --- */

.hamburger-box {
    width: 30px;
    height: 21px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    /* アイコンの太さ(--cpl-hb-thickness、1〜3px/既定1px)の半分だけ上へずらして中央線を維持する */
    margin-top: calc(var(--cpl-hb-thickness, 1px) / -2);
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 30px;
    /* アイコンの太さ。ビルダー「ハンバーガーメニュー設定」の「アイコンの太さ」
       (--cpl-hb-thickness、1〜3px/既定1px)から設定される。border-radius は
       太さ以上の値を指定しておけば太さに関わらず自動的に完全なピル形状になる
       (CSSの仕様で、境界半径は要素の短辺の半分に自動でクランプされるため)。 */
    height: var(--cpl-hb-thickness, 1px);
    background-color: currentColor;
    border-radius: 3px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
}

/* 3本の線の間隔は 8px(4の倍数)にそろえる。
   2026-09-20: 以前は 9px だったが、「アイコンの太さ=1px」なのに一番下の線だけ
   2px に見える不具合の原因になっていた。
   端末のピクセル比が 1.25 のとき、線の位置(CSSpx)はそれぞれ
     1本目 27px → 33.75〜35.00 デバイスpx → 1ドット
     2本目 36px → 45.00〜46.25 デバイスpx → 1ドット
     3本目 45px → 56.25〜57.50 デバイスpx → 57.5 が 58 に切り上がり 2ドット
   と、3本が別々の小数位置に来るため、丸めの結果が1本だけ食い違っていた。
   間隔を4の倍数にすると「間隔×ピクセル比」が常に整数になり、3本とも同じ
   小数位置(＝同じ丸め結果)になるので、どのピクセル比でも太さがそろう。 */

.hamburger-inner::before {
    top: -8px;
}


/* 上から3番目のライン(一番下の線)のみ幅を17pxに短縮。ただし「閉じた三本線」の
   見た目だけに適用し、×等への変形時(is-active)は下の汎用ルールで通常幅(30px)に
   戻す(短いままだと、×の2本の対角線の長さが左右で揃わず歪んで見えるため)。
   ホバー時は上2本と同じ30pxまで伸びる(下のホバー用ルール)。その幅の変化だけを
   0.3sでアニメーションさせるため、transform とは別の duration を指定する。 */

.hamburger-inner::after {
    bottom: -8px;
    width: 17px;
    transition-property: transform, width;
    transition-duration: 0.15s, 0.3s;
    transition-timing-function: ease, ease;
}


/* ×やその他の変形アイコン表示中は、::afterの幅を::before/.hamburger-innerと同じ
   30pxに戻し、左右対称に見えるようにする(この汎用ルールは、より詳細度の高い
   .hamburger--xxx.is-active .hamburger-inner::after で幅以外(bottom/transform)を
   個別に上書きする既存ルールとは競合しない)。 */

.hamburger.is-active .hamburger-inner::after {
    width: 30px;
}


/* Squeeze */

.hamburger--squeeze .hamburger-inner {
    transition-duration: 75ms;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--squeeze .hamburger-inner::before {
    transition: top 75ms 0.12s ease, opacity 75ms ease;
}

.hamburger--squeeze .hamburger-inner::after {
    transition: bottom 75ms 0.12s ease, transform 75ms cubic-bezier(0.55, 0.055, 0.675, 0.19), width 0.3s ease;
}

.hamburger--squeeze.is-active .hamburger-inner {
    transform: rotate(45deg);
    transition-delay: 0.12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--squeeze.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 75ms ease, opacity 75ms 0.12s ease;
}

.hamburger--squeeze.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 75ms ease, transform 75ms 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}


/* Arrow */

.hamburger--arrow.is-active .hamburger-inner::before {
    transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}

.hamburger--arrow.is-active .hamburger-inner::after {
    transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
}


/* Arrow Turn */

.hamburger--arrowturn.is-active .hamburger-inner {
    transform: rotate(-180deg);
}

.hamburger--arrowturn.is-active .hamburger-inner::before {
    transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1);
}

.hamburger--arrowturn.is-active .hamburger-inner::after {
    transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}


/* Spin */

.hamburger--spin .hamburger-inner {
    transition-duration: 0.22s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spin .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}

.hamburger--spin .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), width 0.3s ease;
}

.hamburger--spin.is-active .hamburger-inner {
    transform: rotate(225deg);
    transition-delay: 0.12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--spin.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}

.hamburger--spin.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}


/* Spring */

.hamburger--spring .hamburger-inner {
    top: 0;
    margin-top: 0;
    transition: background-color 0s 0.13s linear;
}

.hamburger--spring .hamburger-inner::before {
    top: 8px;
    transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spring .hamburger-inner::after {
    top: 16px;
    bottom: auto;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), width 0.3s ease;
}

.hamburger--spring.is-active .hamburger-inner {
    transition-delay: 0.22s;
    background-color: transparent;
}

.hamburger--spring.is-active .hamburger-inner::before {
    top: 0;
    transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 9px, 0) rotate(45deg);
}

.hamburger--spring.is-active .hamburger-inner::after {
    top: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 9px, 0) rotate(-45deg);
}


/* ホバー時、一番下の線だけ短い(17px)のを上2本と同じ長さ(30px)まで伸ばす。
   幅の transition(0.3s)は、基本形の .hamburger-inner::after と、transition を
   ショートハンドで上書きしている各アニメーションパターン(squeeze / spin / spring)の
   両方に入れてある。
   ×等へ変形中(is-active)は、既存ルールで既に30pxになっているので対象外。 */

.hamburger:not(.is-active):hover .hamburger-inner::after {
    width: 30px;
}


/* --- ドロワー --- */

.cpl-hb-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 2147483000;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: var(--cpl-hb-drawer-bg, #ffffff);
    color: var(--cpl-hb-drawer-color, #555555);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), visibility 0s linear 0.8s;
}

.cpl-hb-drawer.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), visibility 0s linear 0s;
}

body.cpl-hb-open {
    overflow: hidden;
}


/* ドロワー内の閉じるボタン(×)。
   固定表示のトグル(.cpl-hb-toggle)自体がクリックで×に変形したまま最前面に残るため、
   ここに同じ×アイコンを重ねて表示すると二重に見えてしまう。そのため非表示にし、
   閉じる操作はトグル自身のクリック/Escキー/ドロワー内リンクのクリックに一本化する。 */

.cpl-hb-drawer .cpl-hb-close {
    display: none;
}

.cpl-hb-drawer .cpl-hb-drawer-inner {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    box-sizing: border-box;
}

.cpl-hb-drawer ul.cpl-menu-list,
.cpl-hb-drawer ul.menu,
.cpl-hb-drawer .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
}

.cpl-hb-drawer .sub-menu {
    margin-top: 14px;
    gap: 12px;
    font-size: 0.85em;
    opacity: 0.85;
}

.cpl-hb-drawer li {
    margin: 0;
    padding: 0;
}

.cpl-hb-drawer li a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    font-size: 20px;
    line-height: 1.4;
    padding: 4px 8px;
    transition: opacity 0.3s ease;
}

.cpl-hb-drawer li a:hover {
    opacity: 0.6;
}


/* 開閉に合わせて項目をふわっと出す */

.cpl-hb-drawer li {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.cpl-hb-drawer.is-open li {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.25s;
}


/* -------------------------------------
 * 在籍キャスト一覧: 表示スタイル(PC)「1列」「2列」「3列」「4列」の
 * 画像の角丸・最終上書き (2026-09 追加)
 * 上部の同名セレクタ(詳細度 0,2,0)による border-radius:12px 指定は、
 * このファイル内にある同じ詳細度の border-radius:0 リセット(縦積み
 * レイアウト用)に後勝ちで打ち消されてしまうため、カスケードの最後に
 * ここで確実に適用する。
 * ------------------------------------- */

.cpl-cast-list.cpl-grid-pc-1 .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-2 .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-3 .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-4 .cpl-card-image,
.cpl-cast-list.cpl-grid-pc-1 .cpl-card-image img,
.cpl-cast-list.cpl-grid-pc-2 .cpl-card-image img,
.cpl-cast-list.cpl-grid-pc-3 .cpl-card-image img,
.cpl-cast-list.cpl-grid-pc-4 .cpl-card-image img {
    border-radius: 12px;
}


/* -------------------------------------
 * 在籍キャスト一覧 / 出勤スケジュール ウィジェット
 * 表示スタイル「1列」「2列」「3列」「4列」(縦積み) 時の
 * コンテンツ左端揃え (2026-09 追加)
 * 既定の .cpl-card-content-wrapper は padding-left:10px のため、
 * 画像(.cpl-card-image)の左端とテキストの左端がずれる。
 * 縦積みレイアウトのみ padding:10px 0 0 0 にして左端を揃える。
 * 「画像+プロフィール」系(1_parallel / 2_parallel)は画像が左に来るため対象外。
 * ------------------------------------- */

@media (min-width: 768px) {
    .cpl-cast-list.cpl-grid-pc-1 .cpl-card-content-wrapper,
    .cpl-cast-list.cpl-grid-pc-2 .cpl-card-content-wrapper,
    .cpl-cast-list.cpl-grid-pc-3 .cpl-card-content-wrapper,
    .cpl-cast-list.cpl-grid-pc-4 .cpl-card-content-wrapper {
        padding: 10px 0 0 0;
    }
}

@media (max-width: 767px) {
    .cpl-cast-list.cpl-grid-sp-1_stacked .cpl-card-content-wrapper,
    .cpl-cast-list.cpl-grid-sp-2 .cpl-card-content-wrapper {
        padding: 10px 0 0 0;
    }
}


/* -------------------------------------
 * リンクの「モーダルで開く」(2026-09 追加)
 *
 * ビルダーのリンク設定で「モーダルで開く」をONにしたリンク
 * (<a data-cpl-link-modal="1">)をクリックしたときに、main.js が
 * body直下へ生成するモーダル。配色・角丸はビルダーUIおよび
 * 既存のモーダル(年齢認証)に合わせている。
 * ------------------------------------- */

.cpl-link-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.cpl-link-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.cpl-link-modal-inner {
    position: relative;
    width: 100%;
    max-width: 1000px;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(12px) scale(0.98);
    transition: transform 0.25s ease;
}

.cpl-link-modal.is-open .cpl-link-modal-inner {
    transform: translateY(0) scale(1);
}


/* 画像・動画は実サイズに合わせて縮む */

.cpl-link-modal-media {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 48px);
    width: auto;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    background: #000;
}


/* ページ埋め込みは固定比率の枠で表示する */

.cpl-link-modal-frame {
    display: block;
    width: 100%;
    height: min(80vh, 640px);
    border: none;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    background: #ffffff;
}

.cpl-link-modal-body {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* 閉じるボタンはオーバーレイ(.cpl-link-modal)基準で右上に固定する。
   中身(.cpl-link-modal-inner)基準にすると、画像が小さいときにボタンだけが
   遠くに離れて見えてしまうため。 */

.cpl-link-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #161616;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 2;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    transition: background 0.2s ease, transform 0.2s ease;
}

.cpl-link-modal-close:hover {
    background: #333333;
    transform: scale(1.06);
}

@media (max-width: 767px) {
    .cpl-link-modal {
        padding: 16px;
    }
    .cpl-link-modal-close {
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
    }
    .cpl-link-modal-frame {
        height: 70vh;
    }
}

/* =========================================================================
 * モバイル表示時のカラムレイアウト
 *
 * 行(Row)ごとの「モバイル表示時のカラム設定」は、ビルダーが
 *   @media (max-width: 767px) { [data-cpl-id='<行ID>'] { --cpl-mobile-col-width: 50%; } }
 * という「継承するCSS変数」として出力する。ここではその変数を1か所で受け取り、
 * 子カラムの幅に反映する。
 *
 * 変数経由にしているのは、行ごとの上書きルールと既定ルールの「詳細度の勝負」を
 * 発生させないため。どちらも !important を付ける必要がある(カラムの幅は保存HTML側の
 * インラインstyleで指定されているため)ので、セレクタで上書きする方式だと
 * 既定ルール側が詳細度で勝ってしまい、行ごとの設定が効かなくなる。
 *
 * 既定値は 100%(縦並び)。適用範囲は本文エリア(<main class="cpl-main-content">)の
 * 行とする。固定ページ(page.php)のように .cpl-post-content で包まないテンプレートが
 * あるため、すべての本文テンプレートが持つ .cpl-main-content を基準にしている。
 * ヘッダー/フッターは <main> の外なので影響を受けない。フローティング・メニュー
 * (横並びが前提)は対象外。
 *
 * ヘッダー/フッター内の行に「モバイル表示時のカラム設定」を指定した場合は、
 * ここのルールが届かないため、PHP側(cpl_build_element_css_rules_split)が
 * その行に対して直接カラム幅を書き出す。
 * ========================================================================= */

@media (max-width: 767px) {
    .cpl-main-content .cpl-canvas-row:not([data-cpl-type="floating-menu"]) {
        flex-wrap: wrap !important;
    }
    /* 「幅」を「全幅(画面いっぱい)」にしたカラムは、保存HTMLのインラインstyleで
       width:100vw / max-width:100vw / margin:0 calc(50% - 50vw) という
       「ビューポート全幅ブレイクアウト」を行っている。
       ここで flex-basis を 100%(= 行の幅)に固定してしまうと、
       ・幅は行の幅まで縮むのに
       ・左右の負マージンは 100vw 基準のまま残る
       ため、カラムが左へずれて右側に大きな余白が出る
       (実測: 375px幅で 88px の余白。2026-09-20 修正)。
       インラインstyleに 100vw を含むカラムは、この幅指定の対象から除外する。
       デスクトップ側には元からこのルールが無いので、これで両者の挙動がそろう。 */

    .cpl-main-content .cpl-canvas-row:not([data-cpl-type="floating-menu"]) > .cpl-canvas-column:not([style*="100vw"]) {
        width: var(--cpl-mobile-col-width, 100%) !important;
        flex-basis: var(--cpl-mobile-col-width, 100%) !important;
        max-width: var(--cpl-mobile-col-width, 100%) !important;
    }

    /* 折り返しの指定は全幅カラムにも必要なので、こちらは除外せずに当てる */

    .cpl-main-content .cpl-canvas-row:not([data-cpl-type="floating-menu"]) > .cpl-canvas-column {
        min-width: 0;
        word-break: break-word;
    }
    /* CSS変数は子孫へ継承されるため、入れ子になった行が親行の設定(例: 2列)を
       引き継いでしまわないよう、内側の行では既定値へ戻す。
       入れ子の行自身に設定がある場合は !important 付きで出力されるので、
       そちらが優先される。 */
    .cpl-main-content .cpl-canvas-row .cpl-canvas-row {
        --cpl-mobile-col-width: 100%;
    }
}


/* キャスト詳細の「◯◯さんのクチコミレビューを投稿する」ボタン。
   .cpl-btn-enter の background: var(--cpl-color-gradient) は、サイト設定の
   グラデーション色が未設定だと値が壊れて背景が無効＝透明になり、color:#fff と
   相まって「真っ白で何も見えないボタン」になっていた
   （.cpl-search-submit-btn・.cpl-btn-submit-review と同じ既知の問題）。
   ビルダーの「ボタン」要素（.cpl-button-element）と同じ既定色で明示的に塗る。

   注) テーマの動的CSS（cpl-style-inline-css）が style.css より後に
   「.cpl-btn-enter { background: var(--cpl-btn-bg); … }」を出力しており、
   詳細度が同じ(0,1,0)だと負けてしまう。!important を使わずに済むよう、
   クラス2つ(0,2,0)のセレクタにしている。
   右パネルで色を変えた場合は [data-cpl-id='single-cast-review-post-btn'] の
   !important 付きルールが優先される。 */

.cpl-btn.cpl-single-btn-review-post {
    background: #4b4b4b;
    background-image: none;
    color: #ffffff;
    border: none;
    box-shadow: none;
}

.cpl-btn.cpl-single-btn-review-post:hover {
    transform: none;
    box-shadow: none;
    text-decoration: none;
}


/* キャスト詳細(single-cast.php)の各ブロックの既定の影を外す(2026-09-21)。

   注) .cpl-single-block の影は、テーマの動的CSS(cpl-style-inline-css)が
       .cpl-wrapper, .cpl-cast-card, .cpl-news-list, .cpl-age-modal-content, .cpl-single-block
       { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } として style.css より後に
       出力しているもの。同じルールが背景色・枠線・角丸・ガラス効果も担っており、
       そちらは残したいのでセレクタからは外さず、影だけをここで打ち消す。
       同じ詳細度(0,1,0)では後勝ちで負けるため、!important を使わずに済むよう
       親を1つ挟んだ 0,2,0 のセレクタにしている
       (既存の「.cpl-cast-list .cpl-cast-card { border: none }」と同じ手法)。
       ビルダーの右パネル「box shadow」で個別に影を付けた場合は
       [data-cpl-id='…'] の !important 付きルールが優先される。 */

.cpl-single-cast-wrap .cpl-single-block,
.cpl-single-cast-wrap .cpl-single-swiper-main,
.cpl-single-cast-wrap .cpl-video-block {
    box-shadow: none;
}


/* =====================================================================
   汎用テンプレート（投稿一覧 / 汎用アーカイブ / 404）

   以前は専用テーマ castpro-zeta の index.php・404.php にインラインstyleとして
   直書きされていたもの。テーマ側のテンプレートをプラグインへ一本化するにあたり、
   見た目の指定はすべてここへ移している（2026-09-22）。
   インラインstyleのままだと、ページビルダーで同じ要素を選んで余白や文字色を
   変更しても反映されない（インライン指定の方が優先される）ため。
   ===================================================================== */

.cpl-posts-grid .cpl-post-item {
    margin-bottom: 30px;
}

.cpl-post-date {
    font-size: 13px;
    color: #888888;
    margin-bottom: 15px;
}

.cpl-no-posts {
    margin: 20px 0;
}

.cpl-archive-header {
    margin-bottom: 20px;
}


/* 404 Not Found */

.cpl-404-content {
    text-align: center;
    padding-top: 60px;
    padding-bottom: 60px;
}

.cpl-404-title {
    font-size: 48px;
    margin-bottom: 20px;
    color: var(--cpl-main-color, #333333);
}

.cpl-404-text {
    font-size: 18px;
    margin-bottom: 30px;
}

.cpl-404-link {
    display: inline-block;
    padding: 12px 30px;
}

/* ==========================================================================
   アコーディオン要素(.cpl-accordion-element / data-cpl-type="accordion")
   公開ページ・ビルダーのプレビュー共通。
   色・枠線はラッパーのインラインCSS変数(--cpl-acc-*)で上書きされる
   (右パネル「アコーディオン設定」。既定値はここと builder-preview.js の
   CPL_ACCORDION_DEFAULTS をそろえること)。
   開閉は grid-template-rows(0fr ⇔ 1fr)のトランジションで、内容の高さが
   可変でもカクつかずに展開・収納する。開閉処理は main.js(initCplAccordions)。
   ========================================================================== */
.cpl-accordion-element {
    --cpl-acc-header-bg: #f5f5f5;
    --cpl-acc-header-color: #333333;
    --cpl-acc-body-bg: #ffffff;
    --cpl-acc-body-color: #333333;
    --cpl-acc-border-color: #e0e0e0;
    --cpl-acc-border-width: 1px;
    width: 100%;
    margin-bottom: 15px;
    box-sizing: border-box;
    border: var(--cpl-acc-border-width) solid var(--cpl-acc-border-color);
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--cpl-acc-body-bg);
}

.cpl-accordion-element > .cpl-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background-color: var(--cpl-acc-header-bg);
    color: var(--cpl-acc-header-color);
    cursor: pointer;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.cpl-accordion-element > .cpl-accordion-header:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
}

.cpl-accordion-element .cpl-accordion-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    color: inherit;
    word-break: break-word;
}

/* 開閉インジケーター: 閉じているとき「+」、開いているとき「-」。
   縦棒(::after)を回転させて横棒に重ね、アイコン全体も半回転させる。 */
.cpl-accordion-element .cpl-accordion-icon {
    position: relative;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: inherit;
    transition: transform 0.3s ease-out;
}
.cpl-accordion-element .cpl-accordion-icon::before,
.cpl-accordion-element .cpl-accordion-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px;
    border-radius: 1px;
    background-color: currentColor;
    transition: transform 0.3s ease-out;
}
.cpl-accordion-element .cpl-accordion-icon::after {
    transform: rotate(90deg);
}
.cpl-accordion-element.is-open > .cpl-accordion-header .cpl-accordion-icon {
    transform: rotate(180deg);
}
.cpl-accordion-element.is-open > .cpl-accordion-header .cpl-accordion-icon::after {
    transform: rotate(0deg);
}

.cpl-accordion-element > .cpl-accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    background-color: var(--cpl-acc-body-bg);
    color: var(--cpl-acc-body-color);
    /* 閉じ終わってから visibility を切り替える(読み上げ・Tab移動の対象から外す) */
    transition: grid-template-rows 0.3s ease-out, visibility 0s linear 0.3s;
}
.cpl-accordion-element.is-open > .cpl-accordion-content {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 0.3s ease-out, visibility 0s linear 0s;
}
.cpl-accordion-element .cpl-accordion-content-inner {
    min-height: 0;
    overflow: hidden;
}
.cpl-accordion-element .cpl-accordion-body {
    padding: 16px 20px;
    border-top: var(--cpl-acc-border-width) solid var(--cpl-acc-border-color);
    font-size: 14px;
    line-height: 1.8;
    color: inherit;
    box-sizing: border-box;
    word-break: break-word;
}

@media (prefers-reduced-motion: reduce) {
    .cpl-accordion-element .cpl-accordion-icon,
    .cpl-accordion-element .cpl-accordion-icon::before,
    .cpl-accordion-element .cpl-accordion-icon::after,
    .cpl-accordion-element > .cpl-accordion-content,
    .cpl-accordion-element.is-open > .cpl-accordion-content {
        transition: none;
    }
}


/* ==========================================================================
   フォーム部品のデフォルトスタイル(ショートコード要素 / Contact Form 7) 2026-10-01

   ビルダーの「ショートコード」要素に入れたフォーム(Contact Form 7 など)の
   input / textarea / select / checkbox / radio / submit に、共通の見た目を付ける。
   ・対象は .cpl-shortcode-element の中と、Contact Form 7 のフォーム(.wpcf7)。
     ビルダーの他のパーツ(ログインフォーム .cpl-auth-form 等)には影響させない。
   ・:where() で詳細度を 0 にしているので、テーマやプラグイン側で個別に
     指定したスタイル・ビルダーのスタイル編集があればそちらが優先される。
   ・入力欄は角丸のボックス型(下線のみの入力欄より認識しやすい)。
     非アクティブ / ホバー / フォーカス / エラー / 無効 の状態を見分けられるようにする。
   ・送信ボタンは「ボタン」エレメント / ウィジェットの「すべての◯◯を見る」ボタン
     (.cpl-button-element, .cpl-widget-action .cpl-btn-enter)と同じ
     ダーク背景・角丸・白文字・中央配置にそろえる。値を変える時は両方を合わせること。
   ========================================================================== */

:where(.cpl-shortcode-element, .wpcf7) {
    --cpl-form-border: rgba(0, 0, 0, 0.16);
    --cpl-form-border-hover: rgba(0, 0, 0, 0.32);
    --cpl-form-focus: #4b4b4b;
    --cpl-form-focus-ring: rgba(75, 75, 75, 0.14);
    --cpl-form-bg: #ffffff;
    --cpl-form-text: #333333;
    --cpl-form-placeholder: #a0a0a0;
    --cpl-form-error: #d64545;
    --cpl-form-radius: 8px;
}

/* ラベル */
:where(.cpl-shortcode-element, .wpcf7) label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.04em;
}

:where(.cpl-shortcode-element, .wpcf7) form p {
    margin: 0 0 20px;
}

/* ラベルの中に入力欄が入る CF7 の既定マークアップ(<label>氏名<br><span><input></span></label>)で、
   ラベル文字と入力欄の間に少し余白を取る */
:where(.cpl-shortcode-element, .wpcf7) label > br + .wpcf7-form-control-wrap,
:where(.cpl-shortcode-element, .wpcf7) .wpcf7-form-control-wrap {
    display: block;
    margin-top: 6px;
}

/* テキスト系の入力欄・テキストエリア・セレクト */
:where(.cpl-shortcode-element, .wpcf7) :is(
    input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
    input[type="number"], input[type="password"], input[type="search"],
    input[type="date"], input[type="datetime-local"], input[type="month"],
    input[type="week"], input[type="time"], input:not([type]),
    textarea, select
) {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 16px; /* iOS Safari のフォーカス時の自動ズームを防ぐため16px以上 */
    line-height: 1.5;
    color: var(--cpl-form-text);
    background-color: var(--cpl-form-bg);
    border: 1px solid var(--cpl-form-border);
    border-radius: var(--cpl-form-radius);
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

:where(.cpl-shortcode-element, .wpcf7) textarea {
    min-height: 160px;
    resize: vertical;
}

:where(.cpl-shortcode-element, .wpcf7) :is(input, textarea)::placeholder {
    color: var(--cpl-form-placeholder);
    opacity: 1;
}

:where(.cpl-shortcode-element, .wpcf7) :is(input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), textarea, select):hover {
    border-color: var(--cpl-form-border-hover);
}

:where(.cpl-shortcode-element, .wpcf7) :is(input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), textarea, select):focus {
    border-color: var(--cpl-form-focus);
    box-shadow: 0 0 0 3px var(--cpl-form-focus-ring);
}

/* セレクト: 標準の矢印の代わりに下向きシェブロン */
:where(.cpl-shortcode-element, .wpcf7) select {
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23777' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
    cursor: pointer;
}

:where(.cpl-shortcode-element, .wpcf7) select[multiple] {
    padding-right: 16px;
    background-image: none;
}

/* チェックボックス・ラジオ */
:where(.cpl-shortcode-element, .wpcf7) :is(input[type="checkbox"], input[type="radio"]) {
    width: 18px;
    height: 18px;
    margin: 0 8px 0 0;
    vertical-align: -3px;
    accent-color: var(--cpl-form-focus);
    cursor: pointer;
}

:where(.cpl-shortcode-element, .wpcf7) .wpcf7-list-item {
    display: inline-flex;
    align-items: center;
    margin: 0 20px 8px 0;
}

:where(.cpl-shortcode-element, .wpcf7) .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    font-weight: 400;
    cursor: pointer;
}

/* ファイル選択 */
:where(.cpl-shortcode-element, .wpcf7) input[type="file"] {
    font-family: inherit;
    font-size: 14px;
}

:where(.cpl-shortcode-element, .wpcf7) input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 13px;
    color: #ffffff;
    background-color: #4b4b4b;
    border: none;
    border-radius: 30px;
    cursor: pointer;
}

/* レンジ */
:where(.cpl-shortcode-element, .wpcf7) input[type="range"] {
    width: 100%;
    accent-color: var(--cpl-form-focus);
}

/* 無効・読み取り専用 */
:where(.cpl-shortcode-element, .wpcf7) :is(input, textarea, select):disabled,
:where(.cpl-shortcode-element, .wpcf7) :is(input, textarea)[readonly] {
    background-color: #f2f2f2;
    color: #999999;
    cursor: not-allowed;
}

/* エラー状態(CF7 のバリデーション / aria-invalid) */
:where(.cpl-shortcode-element, .wpcf7) :is(input, textarea, select)[aria-invalid="true"],
:where(.cpl-shortcode-element, .wpcf7) .wpcf7-not-valid {
    border-color: var(--cpl-form-error);
}

:where(.cpl-shortcode-element, .wpcf7) :is(input, textarea, select)[aria-invalid="true"]:focus,
:where(.cpl-shortcode-element, .wpcf7) .wpcf7-not-valid:focus {
    box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.15);
}

:where(.cpl-shortcode-element, .wpcf7) .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--cpl-form-error);
}

/* 送信後のメッセージ欄 */
:where(.cpl-shortcode-element, .wpcf7) .wpcf7-response-output {
    margin: 20px 0 0;
    padding: 12px 16px;
    font-size: 14px;
    border-radius: var(--cpl-form-radius);
}

/* 送信ボタン: 「ボタン」エレメント(.cpl-button-element)と同じ見た目 */
:where(.cpl-shortcode-element, .wpcf7) :is(input[type="submit"], button[type="submit"]) {
    display: block;
    width: 300px;
    max-width: 100%;
    margin: 10px auto 0;
    padding: 18px 30px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-align: center;
    color: #ffffff;
    background-color: #4b4b4b;
    border: none;
    border-radius: 30px;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

:where(.cpl-shortcode-element, .wpcf7) :is(input[type="submit"], button[type="submit"]):hover {
    background-color: #333333;
}

:where(.cpl-shortcode-element, .wpcf7) :is(input[type="submit"], button[type="submit"]):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(75, 75, 75, 0.25);
}

:where(.cpl-shortcode-element, .wpcf7) :is(input[type="submit"], button[type="submit"]):disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 送信ボタンを含む段落は中央寄せ。CF7 の送信中スピナーはボタンの右に
   重ねて置き(position:absolute)、ボタンの中央配置がずれないようにする */
:where(.cpl-shortcode-element, .wpcf7) p:has(> :is(input[type="submit"], button[type="submit"])) {
    position: relative;
    text-align: center;
}

:where(.cpl-shortcode-element, .wpcf7) p:has(> :is(input[type="submit"], button[type="submit"])) .wpcf7-spinner {
    position: absolute;
    top: 50%;
    left: calc(50% + min(150px, 50%) + 8px);
    margin: -12px 0 0;
}

@media (max-width: 640px) {
    :where(.cpl-shortcode-element, .wpcf7) :is(input[type="submit"], button[type="submit"]) {
        width: 100%;
    }

    :where(.cpl-shortcode-element, .wpcf7) p:has(> :is(input[type="submit"], button[type="submit"])) .wpcf7-spinner {
        left: auto;
        right: 12px;
    }
}