/* --- 外枠・黒縁・角丸デザイン --- */
.adult-frame-outer {
    max-width: 1200px;
    margin: 40px auto;
    background-color: #f2a6c1; 
    border: 8px solid #000;    
    border-radius: 60px;       
    padding: 20px;             
    box-sizing: border-box;
    overflow: hidden;
    /* ポップな浮き上がりを演出する影 */
    box-shadow: 15px 15px 0px rgba(0,0,0,0.1); 
}

/* --- 背景画像エリア --- */
.adult-frame-inner {
    width: 100%;
    border-radius: 40px;
    background-color: #f2a6c1;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    aspect-ratio: 1200 / 960; 
    display: flex;
    align-items: center;
    justify-content: flex-end; 
}

@media (min-width: 768px) {
    .adult-frame-inner {
        background-image: url('https://xcity.co.jp/wp-content/uploads/2026/02/whatsadultopia2.png');
    }
    .adult-content-layout {
        width: 75%; 
        padding-right: 40px;
    }
}

/* --- テキストを見やすくするカード設定 --- */
.adult-text-card {
    background: rgba(255, 255, 255, 0.95); /* 透過を少し抑えて白を強く */
    padding: 30px;
    border-radius: 25px;
    color: #333;
    /* カード自体にも黒縁を細く入れてポップさを強調 */
    /*  border: 3px solid #000; */

}

.adult-title {
    color: #ff3399;
    font-size: clamp(1.6rem, 4.5vw, 2.2rem); /* 文字を少し大きく */
    font-weight: 900;
    text-align: center;
    margin-bottom: 5px;
    /* 文字の視認性を高める薄い白影 */
    text-shadow: 2px 2px 0px #fff, -2px -2px 0px #fff, 2px -2px 0px #fff, -2px 2px 0px #fff;
}

.adult-subtitle {
    font-size: 1.1rem;
    text-align: center;
    font-weight: 800;
    margin-bottom: 25px;
    color: #000; /* 黒にしてハッキリさせる */
}

.adult-main-text {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 25px;
}

.adult-main-text strong {
    color: #ff3399;
    font-weight: 900;
    background: linear-gradient(transparent 70%, #ffdfef 70%); /* マーカー風の装飾 */
}

/* ポイントヘッダー */
.points-header {
    background: #000;
    color: #fff;
    padding: 12px;
    font-size: 1rem;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.point-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: flex-start;
}

.point-num {
    background: #ff3399;
    color: #fff;
    min-width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.85rem;
    margin-top: 2px;
    border: 2px solid #000; /* 番号にも縁取り */
}

.point-body {
    font-size: 0.95rem;
    line-height: 1.6;
}

.point-body strong {
    color: #000;
    font-weight: 800;
    border-bottom: 2px solid #ff3399; /* 項目名にアンダーライン */
}

/* モバイル版 */
@media (max-width: 767px) {
    .adult-frame-inner {
        background-image: none !important;
        aspect-ratio: auto;
    }
    .adult-text-card {
        padding: 20px;
        border-width: 2px;
    }
}

/* --- 外枠・黒縁・角丸デザイン --- */
.adult-frame-outer {
    max-width: 1200px;
    margin: 40px auto;
    background-color: #f2a6c1; 
    border: 8px solid #000;    
    border-radius: 60px;       
    padding: 0;             /* ← 20pxから0に変更：これで隙間がなくなります */
    box-sizing: border-box;
    overflow: hidden;       /* 必須：これがないと画像が角から突き出ます */
    box-shadow: 15px 15px 0px rgba(0,0,0,0.1); 
}




/* --- 以下追加 --- */


/* --- 背景画像エリア --- */
.adult-frame-inner {
    width: 100%;
    /* border-radius: 40px; ← 削除：親要素のoverflow:hiddenでカットされるため不要です */
    background-color: #f2a6c1;
    background-repeat: no-repeat;
    background-size: cover;    /* containからcoverに変更するとより隙間なく埋まります */
    background-position: center;
    aspect-ratio: 1200 / 960; 
    display: flex;
    align-items: center;
    justify-content: flex-end; 
}

/* --- テキストを見やすくするカード設定 --- */
.adult-text-card {
    background: rgba(255, 255, 255, 0.95);
    padding: 30px;
    border-radius: 25px;
    color: #333;
    border: none;           /* ← 黒枠を削除しました */
}


/* --- 以下スケジュール用CSS--- */

/* --- スケジュールセクション全体 --- */
.live-schedule-custom {
    background: transparent;
    padding: 60px 0;
    width: 100%;
    color: #fff;
}

.schedule-container {
    max-width: 1200px; /* 幅を広げた設定を維持 */
    margin: 0 auto;
    padding: 0 4%;
}

/* 見出し：枠なし・大きく中央揃え */
.live-header-text {
    text-align: center;
    margin-bottom: 50px;
}

.live-title-main {
    /* 文字サイズ：さらに大きく（最小2.5rem / 推奨10vw / 最大4.5rem） */
    font-size: clamp(2.5rem, 10vw, 4.5rem); 
    font-weight: 900;
    color: #000; /* 文字色を黒に変更 */
    
    /* 視認性を高めるためのシャドウ設定 */
    /* 黒文字を際立たせるために、周囲に白の縁取り＋濃いピンクの影を追加 */
    text-shadow: 
        2px 2px 0px #fff, 
        -2px -2px 0px #fff, 
        2px -2px 0px #fff, 
        -2px 2px 0px #fff,
        6px 6px 0px #d62a81; /* 5枚目の影をさらに強調 */

    margin-bottom: 20px;
    letter-spacing: 0.05em;
    line-height: 1.1;
    display: block;
}

/* サブタイトルも黒に合わせて少し調整（任意） */
.live-subtitle-main {
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.8;
    color: #000; /* サブタイトルも黒にすると統一感が出ます */
    text-shadow: 1px 1px 0px #fff;
}

/* --- カードレイアウト (スマホ・PC共通設定) --- */
.schedule-grid-row {
    display: flex;
    flex-direction: column; /* デフォルトは縦並び */
    gap: 25px;
    align-items: center;    /* ★重要：スマホ版でカード自体を中央に寄せる */
    justify-content: center;
}

.schedule-day-item {
    flex: 1;
    background: #ff5db1;    /* 背景より少し薄いピンク */
    border: 3px solid #fff; /* 白枠 */
    border-radius: 30px;
    padding: 30px 20px;
    text-align: center;     /* 中の文字を中央揃え */
    box-shadow: 10px 10px 0px #d62a81; /* 濃いピンクの影 */
    width: 100%;            /* 横幅いっぱい */
    max-width: 450px;       /* ★スマホで広がりすぎないよう調整 */
}

.day-label-custom {
    font-size: 1.4rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 10px;
}

.day-line {
    width: 60%;
    height: 2px;
    background-color: #fff;
    margin: 0 auto 20px auto;
}

.coming-soon-text {
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 1px;
    opacity: 0.8;
}

/* --- PCレイアウト (768px以上) --- */
@media (min-width: 768px) {
    .schedule-grid-row {
        flex-direction: row;     /* 横並び */
        align-items: stretch;    /* 高さを揃える */
    }
    
    .schedule-day-item {
        max-width: 400px;        /* PCでの1枚あたりの最大幅 */
    }
}



/* --- ここから出演者（キャスト）セクションのCSS --- */



/* --- 出演者セクション全体 --- */
.cast-section-custom {
    padding: 60px 0;
    width: 100%;
}

/* スケジュールと共通のインパクト見出しスタイル */
.cast-header-text {
    text-align: center;
    margin-bottom: 50px;
}

.cast-title-main {
    /* 文字サイズ：流行りのポップなサイズ感 */
    font-size: clamp(2.5rem, 10vw, 4.5rem); 
    font-weight: 900;
    color: #000; /* 文字色は黒 */
    
    /* 白い縁取り ＋ 濃いピンクの影 */
    text-shadow: 
        2px 2px 0px #fff, 
        -2px -2px 0px #fff, 
        2px -2px 0px #fff, 
        -2px 2px 0px #fff,
        6px 6px 0px #d62a81;

    margin-bottom: 20px;
    letter-spacing: 0.05em;
    line-height: 1.1;
    display: block;
}

/* --- キャストカードのレイアウト --- */
.cast-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.cast-card {
    background: #fff;
    color: #333;
    padding: 15px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.cast-card img {
    border-radius: 10px;
    margin-bottom: 10px;
    width: 100%;
}

/* ピンクの太字（2列目のサンプル文字を含む） */
.cast-card h4 {
    color: #ff3399;
    font-size: 1.1rem;
    font-weight: 900; /* 太字 */
    margin-top: 5px;
    margin-bottom: 5px;
}

.cast-sample {
    color: #666;
    font-size: 0.9rem;
    font-weight: bold;
}

/* PC用レイアウト (横3列) */
@media (min-width: 768px) {
    .cast-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}





/* ここからXCITYブース*/

/* --- XCITYブースセクション全体 --- */
.booth-section-custom {
    padding: 60px 0;
    width: 100%;
}

/* 見出しスタイル（黒文字・白縁・ズレたピンク影） */
.booth-header-text {
    text-align: center;
    margin-bottom: 50px;
}

.booth-title-main {
    font-size: clamp(2.5rem, 10vw, 4.5rem); 
    font-weight: 900;
    color: #000;
    text-shadow: 
        2px 2px 0px #fff, 
        -2px -2px 0px #fff, 
        2px -2px 0px #fff, 
        -2px 2px 0px #fff,
        6px 6px 0px #d62a81;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
    line-height: 1.1;
}

.booth-subtitle-main {
    font-size: 1.1rem;
    font-weight: 800;
    color: #000;
    text-shadow: 1px 1px 0px #fff;
}

/* --- 上段：メインビジュアル --- */
.booth-main-visual {
    position: relative; /* Coming Soonの配置基準 */
    width: 100%;
    margin-bottom: 30px;
    border: 3px solid #fff; /* 白枠 */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 10px 10px 0px #d62a81; /* 濃いピンクの影 */
}

.booth-main-visual img {
    width: 100%;
    display: block;
}

/* Coming Soonの重ね合わせ文字 */
.coming-soon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-5deg); /* 少し斜めにしてポップに */
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px 30px;
    font-size: clamp(2rem, 8vw, 4rem);
    font-weight: 900;
    letter-spacing: 2px;
    border: 3px solid #fff;
    border-radius: 10px;
    z-index: 2;
    pointer-events: none; /* 下の画像操作を邪魔しない */
}

/* --- 下段：3枚の画像グリッド --- */
.booth-gallery-grid {
    display: grid;
    grid-template-columns: 1fr; /* スマホ縦 */
    gap: 20px;
}

.gallery-item {
    border: 3px solid #fff; /* 白枠 */
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 8px 8px 0px #d62a81; /* ピンクの影 */
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* PCレイアウト (横3列) */
@media (min-width: 768px) {
    .booth-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}