@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ（ドリームサーカス特化プレミアム・完全版）
Template:     cocoon-master
Version:     3.5.0
*/

/* ==========================================================================
   1. トップページ限定・漆黒ダークモード化（文字色はCocoonの設定に連動）
   ========================================================================== */
/* トップページ全体の背景を極漆黒にする */
body.home {
    background-color: #05070a !important; 
}

/* 記事エリアの白い背景や枠線を完全撤去して透明にする */
.home .main, .home #content, .home .article, .home #main {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* トップページの「素の文字」や「素の見出し」だけを自動で白くする */
.home #main > p,
.home #main > h2,
.home #main > h3,
.home .entry-content > p,
.home .entry-content > h2,
.home .entry-content > h3 {
    color: #ffffff !important;
}

/* ==========================================================================
   2. トップページ バナーメニュー（PC・スマホ別のグリッド強制適用）
   ========================================================================== */
.block020, 
div[class*="block020"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* スマホでは絶対に横2列 */
    gap: 12px !important;
    padding: 0 10px !important;
    margin: 30px auto !important;
    width: 100% !important;
    max-width: 1000px !important;
    box-sizing: border-box !important;
}

/* 各バナーハコの中身が横いっぱいに広がるように固定 */
.block020 .ibb-box,
.block020 a {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

/* パソコン表示（769px以上）では綺麗に横3列に切り替える */
@media screen and (min-width: 769px) {
    .block020, 
    div[class*="block020"] {
        grid-template-columns: repeat(3, 1fr) !important; /* 横3列×2行 */
        gap: 20px !important;
    }
}

/* ==========================================================================
   3. バナー画像自体に描き込まれた白枠を画面外に追いやる裏技（★上品ゴールド枠版）
   ========================================================================== */
/* 画像の親ハコに「はみ出た部分は見えなくする」命令を下し、細いゴールドの高級枠をつける */
.block020 .ibb-box,
div[class*="block020"] .ibb-box {
    position: relative !important;
    overflow: hidden !important;   /* これでめり込ませた白枠をスパッとカット */
    border-radius: 8px !important; /* ハコ自体を綺麗に角丸にする */
    background: transparent !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important; /* パターンA：ゴールドの細い額縁 */
    box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
}

/* 画像を4%だけ拡大・外側にズラして白枠を隠す */
.block020 .ibb-box img,
div[class*="block020"] .ibb-box img {
    width: 104% !important;
    max-width: 104% !important;
    margin-left: -2% !important;
    margin-top: -2% !important;
    margin-bottom: -2% !important;
    border: none !important;
}

/* マウスオンした時は、ハコの中でさらにフワッと大きく（エフェクトのキープ） */
.hover_img2 {
    display: block !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
}
.hover_img2:hover {
    opacity: 0.9 !important;
    transform: scale(1.04) !important; 
}

/* ==========================================================================
   4. ハンバーガーメニュー完全透過パッチ（スマホ用）
   ========================================================================== */
@media screen and (max-width: 1023px) {
    .mobile-header-menu-buttons, #mobile-header-menu-buttons, .mobile-menu-buttons {
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }
    .menu-button, button.menu-button, #header .menu-button, .mobile-menu-buttons .menu-button {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    .menu-button .menu-caption, #header .menu-button .menu-caption, .menu-button .menu-icon {
        color: #ffffff !important;
    }
}

/* ==========================================================================
   5. バナー画像レスポンシブ出し分け設定（PC用：box-074 / スマホ用：box-075）
   ========================================================================== */
.box-074 { display: none; }
.box-075 { display: block; }

@media screen and (min-width: 768px) {
    .box-074 { display: block; }
    .box-075 { display: none; }
}

/* ==========================================================================
   6. 【リニューアル版】お知らせボックス（訂正とお詫びエリア）
   ========================================================================== */
.notice-box {
    max-width: 760px;
    margin: 40px auto;
    padding: 0;
    border: 2px solid #e53935; 
    border-radius: 8px;        
    background-color: #ffffff; /* 内部は白背景にして読みやすさを確保 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); 
    overflow: hidden;
    font-family: sans-serif;
    box-sizing: border-box;
}

/* お知らせ内のテキストは、ベースのダークモードに引きずられないよう明示的に色指定 */
.notice-box p, .notice-box div, .notice-box h2, .notice-box th, .notice-box td {
    color: #333333 !important; 
}
.notice-header {
    background-color: #fdf2f2; 
    padding: 24px 20px;
    text-align: center;
    border-bottom: 1px solid #fbcbcb;
}
.notice-title-tag {
    display: inline-block;
    background-color: #e53935;
    color: #ffffff !important; 
    font-size: 0.8rem;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}
.notice-title {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: bold;
}
.notice-subtitle {
    font-size: 1.1rem;
    color: #666666 !important;
    font-weight: normal;
}
.notice-body {
    padding: 30px 24px;
}
.notice-text {
    font-size: 1rem;
    line-height: 1.7;
    margin-top: 0;
    margin-bottom: 24px;
    text-align: center;
}
.notice-highlight {
    display: block;
    margin-top: 10px;
    color: #d32f2f !important;
    font-size: 1.05rem;
}
.notice-table-container {
    width: 100%;
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch;
    margin: 24px 0 12px 0;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}
.notice-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px; 
    font-size: 0.95rem;
}
.notice-table th {
    background-color: #f5f5f5;
    font-weight: bold;
    padding: 14px 16px;
    border-bottom: 2px solid #dcdcdc;
    border-right: 1px solid #e0e0e0;
    text-align: center;
}
.notice-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    text-align: center;
    background-color: #ffffff;
}
.notice-table th:last-child,
.notice-table td:last-child {
    border-right: none;
}
.text-error {
    color: #e53935 !important;
    font-weight: bold;
}
.text-success, .text-success strong {
    color: #2e7d32 !important; 
}
.text-success {
    background-color: #f1f8e9 !important; 
}
.notice-schedule {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 6px;
    margin-top: 0 !important;
    margin-bottom: 24px;
    text-align: center;
}
.schedule-title {
    margin: 0 0 10px 0;
    font-weight: bold;
    font-size: 1.05rem;
}
.schedule-time {
    margin: 0;
    font-size: 1.1rem;
}
.schedule-time span {
    display: inline-block;
    margin: 0 15px;
}
.notice-footer-text {
    font-size: 0.9rem;
    color: #666666 !important;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 0;
}
.notice-body p:empty, 
.notice-body p + br,
.notice-body br + br {
    display: none !important;
}
@media screen and (max-width: 767px) {
    .notice-body { padding: 20px 16px; }
    .notice-title { font-size: 1.2rem; }
    .schedule-time span { display: block; margin: 8px 0; }
}

/* ==========================================================================
   7. 漆黒予約フォーム専用（合計金額ボックススタイル）
   ========================================================================== */
.circus-booking-form {
    background: linear-gradient(145deg, #11141a, #0b0d12) !important;
    border: 1px solid rgba(255, 215, 0, 0.15) !important;
    padding: 25px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
    max-width: 600px;
    margin: 0 auto;
}
.circus-booking-form p,
.circus-booking-form label {
    color: #e2e8f0 !important;
    font-size: 15px !important;
    font-weight: bold !important;
}
.circus-booking-form input[type="text"],
.circus-booking-form input[type="email"],
.circus-booking-form input[type="number"],
.circus-booking-form select {
    background-color: #1a202c !important;
    border: 1px solid #4a5568 !important;
    color: #ffffff !important;
    padding: 10px !important;
    border-radius: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
}
.circus-total-price-box {
    background: rgba(212, 175, 55, 0.1) !important;
    border: 1px dashed #d4af37 !important;
    padding: 15px !important;
    border-radius: 8px !important;
    text-align: center;
    margin: 20px 0 !important;
}
.circus-total-price-box span {
    color: #ffffff !important;
    font-size: 16px !important;
}
.circus-total-price-box strong {
    color: #d4af37 !important;
    font-size: 28px !important;
    margin: 0 5px !important;
}
.circus-booking-form input[type="submit"] {
    background: linear-gradient(to bottom, #d4af37 0%, #aa841c 100%) !important;
    border: none !important;
    color: #111111 !important;
    font-weight: 900 !important;
    padding: 14px 0 !important;
    font-size: 18px !important;
    border-radius: 8px !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-shadow: 0 1px 2px rgba(255,255,255,0.4) !important;
}
.circus-booking-form input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4) !important;
}






/* ==========================================================================
   固定ページ専用：ページごとに選べる見出し着せ替えスタイル（対策A）
   ========================================================================== */

/* --------------------------------------------------------------------------
   👑 パターン1：【クラス名：h-royal】（クラシック・ロイヤル風）
   -------------------------------------------------------------------------- */
/* H2: 左太線 ＋ 薄グレー背景 */
.h-royal h2 {
    padding: 12px 18px !important;
    color: #111111 !important;
    background: #f7f9fa !important;
    border-left: 6px solid #d4af37 !important; /* 劇団ゴールド */
    border-bottom: none !important;
    font-size: 1.5rem !important;
    font-weight: bold !important;
    margin: 40px 0 20px 0 !important;
}
/* H3: 下金線 ＋ 細グレー線（Cocoonのデフォルト枠線を強制リセット版） */
.h-royal h3 {
    padding: 8px 0 !important;
    color: #222222 !important;
    border: none !important; /* ← これでココクーン標準の四角い枠を消し去ります！ */
    border-bottom: 2px solid #d4af37 !important; /* 下線ゴールドだけを残す */
    background: transparent !important; /* 背景の自動色付けもクリア */
    position: relative !important;
    font-size: 1.25rem !important;
    margin: 30px 0 15px 0 !important;
}
.h-royal h3::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -4px !important;
    width: 100% !important;
    height: 1px !important;
    background: #e2e8f0 !important;
}

/* H4: 左ゴールドスクエア */
.h-royal h4 {
    padding-left: 15px !important;
    color: #333333 !important;
    font-size: 1.1rem !important;
    margin: 25px 0 12px 0 !important;
    position: relative !important;
    border: none !important;
}
.h-royal h4::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 7px !important;
    height: 7px !important;
    background: #d4af37 !important;
}

/* --------------------------------------------------------------------------
   ✨ パターン2：【クラス名：h-elegant】（エレガント・リッチ風）
   -------------------------------------------------------------------------- */
/* H2: 上下ゴールド細線（中央寄せ） */
.h-elegant h2 {
    padding: 15px 0 !important;
    color: #1a202c !important;
    border-top: 1px solid rgba(212, 175, 55, 0.6) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.6) !important;
    border-left: none !important;
    background: transparent !important;
    letter-spacing: 0.1em !important;
    text-align: center !important;
    font-size: 1.45rem !important;
    margin: 40px 0 20px 0 !important;
}
/* H3: 左二重ゴールド線 */
.h-elegant h3 {
    padding: 6px 0 6px 15px !important;
    color: #2d3748 !important;
    border-left: 4px double #d4af37 !important; /* 左の美しい二重ゴールド線 */
    border-top: none !important;                 /* Cocoonの上の線を消す */
    border-right: none !important;               /* Cocoonの右の線を消す */
    border-bottom: none !important;              /* Cocoonの下の線を消す */
    background: transparent !important;          /* 背景を透明に */
    font-size: 1.25rem !important;
    margin: 30px 0 15px 0 !important;
}

/* H4: 下ゴールドドット線 */
.h-elegant h4 {
    padding-bottom: 6px !important;
    color: #4a5568 !important;
    border-bottom: 2px dotted #d4af37 !important;
    font-size: 1.1rem !important;
    margin: 25px 0 12px 0 !important;
}




/* --------------------------------------------------------------------------
   🎪 パターン3：【クラス名：h-theater】（プレミアム・シアター風）
   -------------------------------------------------------------------------- */
/* H2: 深紺ボックス ＋ 左金線（文字白） */
.h-theater h2 {
    padding: 12px 20px !important;
    color: #ffffff !important;
    background: #111622 !important;
    border-left: 6px solid #d4af37 !important;
    border-bottom: none !important;
    border-radius: 0 6px 6px 0 !important;
    font-size: 1.4rem !important;
    margin: 40px 0 20px 0 !important;
}
.h-theater h3 {
    padding: 8px 12px !important;
    color: #111111 !important;
    border-left: 4px solid #d4af37 !important;  /* 左のしっかりしたゴールド線 */
    border-bottom: 1px solid #e2e8f0 !important; /* 下の薄グレーのアンダーライン */
    border-top: none !important;                 /* Cocoonの上の線を消す */
    border-right: none !important;               /* Cocoonの右の線を消す */
    background: transparent !important;          /* 背景を透明に */
    font-size: 1.25rem !important;
    margin: 30px 0 15px 0 !important;
}

/* H4: 左ゴールドスター */
.h-theater h4 {
    padding-left: 20px !important;
    color: #222222 !important;
    font-size: 1.1rem !important;
    margin: 25px 0 12px 0 !important;
    position: relative !important;
    border: none !important;
}
.h-theater h4::before {
    content: "★" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #d4af37 !important;
    font-size: 0.9rem !important;
}






/* ==========================================================================
   固定ページ専用：どこでも単体で使える文章装飾フリーパーツ（見出しとの連動なし）
   ========================================================================== */

/* --------------------------------------------------------------------------
   👑 ロイヤル・シリーズ（単体指定用）
   -------------------------------------------------------------------------- */
/* 枠ボックス：左金太線 ＋ 極薄ベージュ背景 */
.box-royal {
    background-color: #fbf9f3 !important;
    border-left: 5px solid #d4af37 !important; /* 劇団ゴールド */
    padding: 20px !important;
    margin: 25px 0 !important;
    border-radius: 0 8px 8px 0 !important;
    color: #333333 !important;
}
/* 箇条書き：ゴールドミニ四角 */
ul.list-royal {
    list-style: none !important;
    padding-left: 5px !important;
}
ul.list-royal li {
    position: relative !important;
    padding-left: 20px !important;
    margin-bottom: 10px !important;
    color: #333333 !important;
}
ul.list-royal li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 9px !important;
    width: 6px !important;
    height: 6px !important;
    background-color: #d4af37 !important;
}
/* マーカー：上品なゴールドアンダーライン */
.mark-royal {
    background: linear-gradient(transparent 60%, rgba(212, 175, 55, 0.35) 40%) !important;
    font-weight: bold !important;
    padding: 0 2px !important;
}

/* --------------------------------------------------------------------------
   ✨ エレガント・シリーズ（単体指定用）
   -------------------------------------------------------------------------- */
/* 枠ボックス：ゴールドのドット細枠 */
.box-elegant {
    background-color: transparent !important;
    border: 2px dotted rgba(212, 175, 55, 0.5) !important;
    padding: 20px !important;
    margin: 25px 0 !important;
    border-radius: 8px !important;
    color: #2d3748 !important;
}
/* 箇条書き：ゴールドシャープ矢印 */
ul.list-elegant {
    list-style: none !important;
    padding-left: 5px !important;
}
ul.list-elegant li {
    position: relative !important;
    padding-left: 20px !important;
    margin-bottom: 10px !important;
    color: #2d3748 !important;
}
ul.list-elegant li::before {
    content: "›" !important;
    position: absolute !important;
    left: 0 !important;
    top: -1px !important;
    color: #d4af37 !important;
    font-size: 1.3rem !important;
    font-weight: bold !important;
}
/* マーカー：ゴールドのドット下線 */
.mark-elegant {
    border-bottom: 2px dotted #d4af37 !important;
    font-weight: bold !important;
    padding-bottom: 2px !important;
}

/* --------------------------------------------------------------------------
   🎪 シアター・シリーズ（単体指定用）
   -------------------------------------------------------------------------- */
/* 枠ボックス：ネイビー＆ゴールドのダブルライン */
.box-theater {
    background-color: #f4f6f9 !important;
    border-left: 5px solid #111622 !important; /* ナイトネイビー */
    padding: 20px !important;
    margin: 25px 0 !important;
    color: #111111 !important;
    box-shadow: inset 3px 0 0 #d4af37 !important; /* 内側ゴールド並走 */
}
/* 箇条書き：★ゴールドスター★ */
ul.list-theater {
    list-style: none !important;
    padding-left: 5px !important;
}
ul.list-theater li {
    position: relative !important;
    padding-left: 22px !important;
    margin-bottom: 10px !important;
    color: #111111 !important;
}
ul.list-theater li::before {
    content: "★" !important;
    position: absolute !important;
    left: 0 !important;
    top: 1px !important;
    color: #d4af37 !important;
    font-size: 0.85rem !important;
}
/* マーカー：ゴールドの薄い背景ベタ塗り */
.mark-theater {
    background-color: rgba(212, 175, 55, 0.2) !important;
    color: #111111 !important;
    font-weight: bold !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
}





/* ==========================================================================
   固定ページ専用：どこでも単体で使える料金表テーブル【3パターン完全版】
   ========================================================================== */

/* --------------------------------------------------------------------------
   👑 パターン1：【漆黒ヘッダー ＆ 王道ゴールド】
   -------------------------------------------------------------------------- */
.table-royal-gold table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 30px 0 !important;
    border: 1px solid #111622 !important; 
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}
.table-royal-gold th {
    background-color: #111622 !important; 
    color: #d4af37 !important; 
    font-weight: bold !important;
    text-align: center !important;
    padding: 16px !important;
    border: none !important;
}
.table-royal-gold td {
    background-color: #ffffff !important;
    color: #333333 !important; 
    padding: 15px !important;
    text-align: center !important;
    border: none !important;
    border-bottom: 1px solid #e2e8f0 !important; 
    font-size: 1.05rem !important;
}
.table-royal-gold tr td:first-child {
    font-weight: bold !important;
    color: #111622 !important; 
    background: #f4f6f9 !important; 
    width: 30% !important; /* 横幅固定 */
    border-right: 1px solid #e2e8f0 !important;
}
.table-royal-gold tr:last-child td {
    border-bottom: none !important;
}
.table-royal-gold tr:last-child td:first-child {
    background-color: #111622 !important;
    color: #d4af37 !important;
}

/* --------------------------------------------------------------------------
   ✨ パターン2：【固定ページ白背景・ゴールドアクセント】
   -------------------------------------------------------------------------- */
.table-elegant-light table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 30px 0 !important;
    border: none !important;
    border-top: 2px solid #d4af37 !important; 
    border-bottom: 2px solid #d4af37 !important;
}
.table-elegant-light th {
    background-color: transparent !important;
    color: #111111 !important; 
    font-weight: bold !important;
    text-align: center !important;
    padding: 16px !important;
    border: none !important;
    border-bottom: 1px dashed rgba(212, 175, 55, 0.4) !important;
    letter-spacing: 0.05em !important;
}
.table-elegant-light td {
    background-color: transparent !important;
    color: #333333 !important; 
    padding: 15px !important;
    text-align: center !important;
    border: none !important;
    border-bottom: 1px solid #edf2f7 !important; 
    font-size: 1.05rem !important;
}
.table-elegant-light tr td:first-child {
    font-weight: bold !important;
    color: #111111 !important; 
    background: transparent !important;
    width: 30% !important; /* 横幅固定 */
}
.table-elegant-light tr:last-child td {
    border-bottom: none !important;
}
.table-elegant-light tr:last-child td:first-child {
    background-color: #fbf9f3 !important; 
}

/* --------------------------------------------------------------------------
   🎪 パターン3：【シアター・ナイトネイビー ＆ ゴールドエッジ】
   -------------------------------------------------------------------------- */
.table-theater-navy table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0px 0 !important;
    border: 2px solid #d4af37 !important; /* テーブル全体をゴールドの細線で囲む */
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.1) !important;
}
/* ヘッダー：深いシアターネイビー背景に、文字を白にして視認性アップ */
.table-theater-navy th {
    background-color: #111622 !important; 
    color: #ffffff !important; 
    font-weight: bold !important;
    text-align: center !important;
    padding: 16px !important;
    border: none !important;
    border-bottom: 1px solid #d4af37 !important; /* ヘッダー下部にもゴールドの線 */
}
/* ボディ：文字は読みやすい濃いグレー */
.table-theater-navy td {
    background-color: #ffffff !important;
    color: #333333 !important; 
    padding: 15px !important;
    text-align: center !important;
    border: none !important;
    border-bottom: 1px solid #e2e8f0 !important; 
    font-size: 1rem !important;
}
/* 左側の席種列：ここだけ劇場の重厚感を出すためにネイビー背景×文字をゴールドに！ */
.table-theater-navy tr td:first-child {
    font-weight: bold !important;
    color: #d4af37 !important; 
    background: #111622 !important; 
    width: 30% !important; /* 横幅固定 */
    border-right: 1px solid rgba(212, 175, 55, 0.2) !important;
}
.table-theater-navy tr:last-child td {
    border-bottom: none !important;
}
/* 最下行（プレミアム）：上下左右のゴールドと連動させて一番豪華に目立たせる */
.table-theater-navy tr:last-child td:first-child {
    background-color: #aa841c !important; /* 濃いめの金ベタ塗り */
    color: #ffffff !important; /* 文字は純白 */
}


/* ==========================================================================
   【レスポンシブ対策】スマホ画面での料金表テーブルの横スクロール化 ＋ 案内タグ
   ========================================================================== */
/* 料金表を包むハコ（3パターンすべて共通）をスマホの時だけ横スクロール可能にする */
.table-royal-gold, 
.table-elegant-light, 
.table-theater-navy {
    width: 100% !important;
    overflow-x: auto !important; /* 横スクロールを許可 */
    -webkit-overflow-scrolling: touch !important; /* スマホでヌルヌル動かす */
    box-sizing: border-box !important;
}

/* スマホ画面（横幅767px以下）の時、テーブルがギチギチに潰れるのをガードする */
@media screen and (max-width: 767px) {
    .table-royal-gold table, 
    .table-elegant-light table, 
    .table-theater-navy table {
        min-width: 480px !important; /* スマホでも表の美しさを保つ最小幅 */
    }
}

/* 💡 スクロールを促す案内タグ（HTML側に .scroll-hint を書いた時に発動） */
.scroll-hint {
    color: #d4af37 !important; /* 劇団ゴールド */
    font-size: 11px !important;
    font-weight: bold !important;
    text-align: right !important;
    margin-bottom: 5px !important;
    letter-spacing: 0.05em !important;
    animation: scroll_pulse_hint 2s infinite !important; /* フワフワ点滅させて視線を集める */
}

/* 案内タグをフワフワ点滅させるアニメーション */
@keyframes scroll_pulse_hint {
    0% { opacity: 0.4; }
    50% { opacity: 1; }
    100% { opacity: 0.4; }
}


/* ==========================================================================
   未来への資産：いつでも使えるプレミアム素材セット（完全独立フリーパーツ）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 🎪 シアター風・大迫力アコーディオン（Q&A）
   -------------------------------------------------------------------------- */
.circus-faq {
    margin: 15px 0 !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}
.circus-faq details {
    background: #ffffff !important;
}
.circus-faq summary {
    background: #111622 !important; /* ナイトネイビー */
    color: #d4af37 !important; /* 劇団ゴールド */
    padding: 16px 20px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    list-style: none !important;
    position: relative !important;
    font-size: 1.05rem !important;
    outline: none !important;
}
.circus-faq summary::-webkit-details-marker { 
    display: none !important; 
}
.circus-faq summary::after {
    content: "＋" !important;
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1.2rem !important;
}
.circus-faq details[open] summary::after {
    content: "－" !important;
}
.circus-faq .faq-answer {
    padding: 20px !important;
    color: #333333 !important;
    line-height: 1.7 !important;
    background: #fdfdfd !important;
    border-top: 1px solid rgba(212, 175, 55, 0.1) !important;
}

/* --------------------------------------------------------------------------
   2. 🎟️ 王道ゴールド・2連チケット購入ボタン
   -------------------------------------------------------------------------- */
.circus-btn-wrap {
    display: flex !important;
    gap: 15px !important;
    margin: 30px auto !important;
    max-width: 600px !important;
}
.circus-btn-main, .circus-btn-sub {
    flex: 1 !important;
    text-align: center !important;
    padding: 16px 10px !important;
    font-weight: 900 !important;
    font-size: 1.1rem !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}
.circus-btn-main {
    background: linear-gradient(to bottom, #d4af37 0%, #aa841c 100%) !important;
    color: #111111 !important;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3) !important;
}
.circus-btn-main:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.5) !important;
}
.circus-btn-sub {
    background: #111622 !important;
    color: #d4af37 !important;
    border: 2px solid #d4af37 !important;
}
.circus-btn-sub:hover {
    background: #1a2233 !important;
    transform: translateY(-2px) !important;
}
@media screen and (max-width: 560px) {
    .circus-btn-wrap { 
        flex-direction: column !important; 
        gap: 12px !important; 
    }
}

/* --------------------------------------------------------------------------
   3. ⭐ プレミアム・お客様の声 / 口コミレビュー枠
   -------------------------------------------------------------------------- */
.circus-review-box {
    background: #f8f9fa !important;
    border-top: 4px solid #111622 !important; /* シアターネイビーの冠 */
    padding: 24px !important;
    margin: 25px 0 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
    position: relative !important;
}
.circus-review-stars {
    color: #d4af37 !important;
    font-size: 1.1rem !important;
    margin-bottom: 10px !important;
}
.circus-review-title {
    font-weight: bold !important;
    font-size: 1.15rem !important;
    color: #111111 !important;
    margin-bottom: 12px !important;
}
.circus-review-text {
    color: #4a5568 !important;
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    margin: 0 0 12px 0 !important;
}
.circus-review-reviewer {
    font-size: 0.8rem !important;
    color: #718096 !important;
    text-align: right !important;
    font-weight: bold !important;
}

/* --------------------------------------------------------------------------
   4. 📅 公演スケジュール特化・3色ミニバッジ
   -------------------------------------------------------------------------- */
.badge-circus {
    display: inline-block !important;
    padding: 3px 8px !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    border-radius: 3px !important;
    color: #ffffff !important;
    margin-right: 5px !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}
.badge-circus.gold { background-color: #d4af37 !important; color: #111111 !important; }
.badge-circus.red { background-color: #e53935 !important; }
.badge-circus.gray { background-color: #a0aec0 !important; }

/* --------------------------------------------------------------------------
   5. 🛡️ 重要・免責事項の「紙風」クラシックボックス
   -------------------------------------------------------------------------- */
.circus-policy-box {
    background-color: #fcfbfa !important;
    border: 1px solid #e2e5ea !important;
    border-left: 4px solid #aa841c !important;
    padding: 22px !important;
    margin: 30px 0 !important;
    border-radius: 4px !important;
}
.circus-policy-title {
    font-weight: bold !important;
    color: #aa841c !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    font-size: 1.1rem !important;
    display: flex !important;
    align-items: center !important;
}
.circus-policy-title::before {
    content: "⚠️" !important;
    margin-right: 6px !important;
    font-size: 1rem !important;
}
.circus-policy-box ul {
    margin: 0 !important;
    padding-left: 20px !important;
}
.circus-policy-box ul li {
    color: #555555 !important;
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
    margin-bottom: 8px !important;
    list-style-type: square !important;
}
.circus-policy-box ul li:last-child { 
    margin-bottom: 0 !important; 
}



/* ==========================================================================
   【ページ限定】お申し込みフォーム（ID:55）を丸ごとプレミアム漆黒化
   ========================================================================== */
/* 1. ページ全体の背景（外側）を完全に黒くする */
.page-id-55,
.page-id-55 body {
    background-color: #05070a !important;
}

/* 2. 本文エリアの白いハコ（座布団）を完全に透明にして黒に溶け込ませる */
.page-id-55 .main, 
.page-id-55 #main, 
.page-id-55 .article, 
.page-id-55 .entry-content {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* 3. 黒背景のせいで見えなくなるデフォルトの文字（タイトルやフォーム外テキスト）を白にする */
.page-id-55 .entry-title,
.page-id-55 .entry-content,
.page-id-55 p {
    color: #ffffff !important;
}








/* ==========================================================================
   固定ページ専用：どこでも単体で使える「見出し付き案内ボックス」
   ========================================================================== */

/* --------------------------------------------------------------------------
   👑 パターン1：【box-header-theater】（CocoonのH4装飾を完全デストロイ版）
   -------------------------------------------------------------------------- */
.box-header-theater {
    margin: 30px 0 !important;
    border: 2px solid #111622 !important; /* ネイビーの太枠 */
    border-radius: 6px !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;   /* ハコの計算を枠線の内側に強制固定 */
}

/* ヘッダー帯（CocoonがH4タグにかける初期装飾・余白を完全ゼロにリセット） */
.box-header-theater h4.box-title,
.box-header-theater .box-title {
    background-color: #111622 !important; /* ナイトネイビー */
    color: #d4af37 !important;            /* 劇団ゴールド文字 */
    padding: 14px 20px !important;
    font-weight: bold !important;
    font-size: 1.1rem !important;
    text-align: center !important;
    letter-spacing: 0.05em !important;
    
    /* 💥 Cocoonの見出し左側の線や自動余白を強制消滅させるトリガー */
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    
    /* 左右の白い隙間を絶対に許さない100%固定 */
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* 中身のコンテンツエリア */
.box-header-theater .box-body {
    padding: 20px !important;
    color: #333333 !important;
    line-height: 1.7 !important;
    box-sizing: border-box !important;
}



/* --------------------------------------------------------------------------
   ✨ パターン2：【box-header-gold】（王道ゴールド×極薄ベージュ）
   -------------------------------------------------------------------------- */
.box-header-gold {
    margin: 30px 0 !important;
    border: 1px solid #d4af37 !important; /* ゴールド枠 */
    border-radius: 6px !important;
    overflow: hidden !important;
    background-color: #fbf9f3 !important; /* 極薄ベージュ背景 */
}
.box-header-gold .box-title {
    background-color: #d4af37 !important; /* ゴールドベタ塗り */
    color: #111111 !important; /* 黒文字で視認性重視 */
    padding: 12px 20px !important;
    font-weight: bold !important;
    font-size: 1.1rem !important;
    text-align: center !important;
    margin: 0 !important;
}
.box-header-gold .box-body {
    padding: 20px !important;
    color: #333333 !important;
    line-height: 1.7 !important;
}

/* --------------------------------------------------------------------------
   🎪 パターン3：【box-header-elegant】（極薄グレー×ゴールドエッジ）
   -------------------------------------------------------------------------- */
.box-header-elegant {
    margin: 30px 0 !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important; /* ゴールド細枠 */
    border-radius: 6px !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
}
.box-header-elegant .box-title {
    background-color: #f7f9fa !important; /* 上品な極薄グレー */
    color: #111111 !important;
    padding: 12px 20px !important;
    font-weight: bold !important;
    font-size: 1.1rem !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
    margin: 0 !important;
}
.box-header-elegant .box-body {
    padding: 20px !important;
    color: #4a5568 !important;
    line-height: 1.7 !important;
}

/* --------------------------------------------------------------------------
   🖤 パターン4：【box-header-dark】（予約画面 ID:55 専用・漆黒ゴールド）
   -------------------------------------------------------------------------- */
.box-header-dark {
    margin: 30px 0 !important;
    border: 2px solid #d4af37 !important; /* まばゆいゴールド枠 */
    border-radius: 6px !important;
    overflow: hidden !important;
    background-color: rgba(255,255,255,0.03) !important; /* 漆黒に溶け込む半透明 */
}
.box-header-dark .box-title {
    background-color: #d4af37 !important; /* ゴールドヘッダー */
    color: #111111 !important; /* 黒文字 */
    padding: 12px 20px !important;
    font-weight: bold !important;
    font-size: 1.1rem !important;
    text-align: center !important;
    margin: 0 !important;
}
.box-header-dark .box-body {
    padding: 20px !important;
    color: #ffffff !important; /* 予約画面に合わせて文字は純白 */
    line-height: 1.7 !important;
}



/* ==========================================================================
   【最上部メニューリニューアル】プランA：ロイヤル・アンダーライン演出
   ========================================================================== */
/* 1. 現在の「グレーの四角い座布団（背景色）」を完全に消去 */
.navi-in a:hover,
.navi-in .current-menu-item a {
    background-color: transparent !important;
    background: transparent !important;
}

/* 2. 各メニューの配置のベースを設定（金線を仕込むための準備） */
.navi-in li {
    position: relative !important;
}

/* 3. メニューの下に「消えている状態の金線」をあらかじめ仕込む */
.navi-in li a::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important; /* メニューエリアの最下部に配置 */
    left: 50% !important;
    width: 0 !important;   /* 最初は幅0（見えない状態） */
    height: 3px !important; /* 線の太さ */
    background-color: #d4af37 !important; /* 劇団ゴールド */
    transition: all 0.3s ease !important; /* 0.3秒かけてフワッと動かす */
    transform: translateX(-50%) !important;
}

/* 4. 【発動ルール】マウスを乗せた時 ＆ 今開いているページの線を「70%」に伸ばす */
.navi-in li a:hover::after,
.navi-in .current-menu-item a::after {
    width: 70% !important; /* 文字の幅に合わせてスマートに伸びる */
}

/* 5. マウスを乗せた時 ＆ 今開いているページの「文字色」もゴールドに点灯させる */
.navi-in li a:hover,
.navi-in .current-menu-item a {
    color: #d4af37 !important;
    transition: color 0.3s ease !important;
}




/* ==========================================================================
   🎪 ワールド・ドリームサーカス 新着情報（見出しA×リストB 劇場ネイビー公式CSS）
   ========================================================================== */
.wdc-news-section {
    width: 100% !important;
    max-width: 720px !important;
    margin: 60px auto !important;
    font-family: sans-serif !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
}

/* 👑 パターンA：センターゴールド見出し */
.wdc-news-section-header {
    text-align: center !important;
    margin-bottom: 40px !important;
}
.wdc-news-main-title {
    display: inline-block !important;
    font-size: 24px !important;
    font-weight: bold !important;
    color: #e2b646 !important;
    margin: 0 !important;
    padding: 0 0 10px 0 !important;
    letter-spacing: 0.15em !important;
    border-bottom: 2px solid #e2b646 !important;
    background: transparent !important;
}
.wdc-news-sub-title {
    font-size: 11px !important;
    color: #94a3b8 !important;
    margin: 5px 0 0 0 !important;
    letter-spacing: 0.2em !important;
}

/* 📅 パターンB：プレミアム・ガラスモーフィズムカード */
.wdc-news-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    margin-bottom: 14px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    transition: background-color 0.2s ease !important;
}
.wdc-news-item:hover {
    background: rgba(255, 255, 255, 0.06) !important; /* ホバーで少し明るく */
}

/* ⚠️ 重要ニュースの専用カードスタイル */
.wdc-news-item.wdc-important {
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
}
.wdc-news-item.wdc-important:hover {
    background: rgba(239, 68, 68, 0.12) !important;
}

/* 日付とバッジのエリア */
.wdc-news-meta {
    display: block !important;
    margin-bottom: 8px !important;
}
.wdc-news-date {
    font-size: 13px !important;
    color: #94a3b8 !important;
    font-family: monospace !important;
    font-weight: bold !important;
    margin-right: 12px !important;
}

/* 共通ステータスバッジ */
.wdc-news-badge {
    display: inline-block !important;
    font-size: 10px !important;
    font-weight: bold !important;
    padding: 1px 8px !important;
    border-radius: 4px !important;
    line-height: 1.4 !important;
}
/* バッジの色分け設定 */
.wdc-badge-thanks { background: rgba(179, 143, 29, 0.2) !important; color: #e2b646 !important; border: 1px solid #b38f1d !important; }
.wdc-badge-info   { background: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; }
.wdc-badge-close  { background: rgba(255, 255, 255, 0.05) !important; color: #cbd5e1 !important; }
.wdc-badge-warn   { background: #ef4444 !important; color: #ffffff !important; }

/* ニュース本文のリンク（青い下線を強制消去して白文字に） */
.wdc-news-link {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-bottom: none !important;
    display: block !important;
    transition: color 0.2s ease !important;
}
/* 重要ニュースの文字は少し赤く */
.wdc-news-item.wdc-important .wdc-news-link {
    color: #fca5a5 !important;
    font-weight: bold !important;
}
/* ホバー時にゴールドに輝くエフェクト */
.wdc-news-item:hover .wdc-news-link {
    color: #d4af37 !important;
}