@charset "utf-8";

/* ==========================================
   MAIN VISUAL (Swiper)
   ========================================== */
.main-visual-section {
    width: 100%;
    background-color: var(--bg-black);
}

.main-visual-swiper {
    width: 100%;
    /* Swiperのナビゲーションカラーをピンクに固定 */
    --swiper-navigation-color: var(--pink);
    --swiper-pagination-color: var(--pink);
}

.main-visual-swiper .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* ページネーション（ドット）の位置微調整 */
.swiper-pagination {
    bottom: 20px !important;
}

/* ==========================================
   MESSAGE AREA (Catch Copy)
   ========================================== */
.main-message-area {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 100px 0;
    text-align: center;
	padding-bottom: 40px;
    
    /* 星空背景の設定 */
    background-image: url('../images/top/top_stars_bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 上下の神秘的なフェードアウト */
/* 上下共通の土台 */
.main-message-area::before,
.main-message-area::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 2;
}

.main-message-area::before {
    top: 0;
    height: 120px; /* 上はゆったりフェード */
    background: linear-gradient(to bottom, rgba(26, 26, 26, 1), rgba(26, 26, 26, 0));
}

.main-message-area::after {
    bottom: 0;
    height: 80px; /* 下は短くして次へつなげる */
    background: linear-gradient(to top, rgba(26, 26, 26, 1), rgba(26, 26, 26, 0));
}

.message-inner {
    position: relative;
    z-index: 3;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* キャッチコピー本体 */
.main-copy {
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 40px;
    letter-spacing: 0.05em;
}

/* 実績・詳細テキスト */
.message-sub, 
.message-desc {
    color: #fff;
    font-size: 18px;
    line-height: 2;
    letter-spacing: 0.1em;
    margin: 0;
}

.message-sub {
    font-weight: bold;
    margin-bottom: 15px;
}


@media screen and (max-width: 768px) {
	.main-message-area {
		padding-top: 60px; 
		padding-bottom: 40px;
		background-size: 180% auto;
    }

    .main-copy {
        font-size: 24px;
        line-height: 1.5;
        margin-bottom: 25px;
    }

    .message-sub, 
    .message-desc {
        font-size: 14px;
        line-height: 1.8;
    }
	
	.main-message-area::after {
        height: 40px; 
    }
}


/* =================================================
   夢団についてセクション
   ================================================= */
.about-section {
}

.message-content p{margin-bottom: 10pt;}

/* 横並びの制御 */
.about-flex {
    display: flex;
    align-items: center;
    gap: 60px; /* テキストと画像の間隔 */
}

/* テキスト側 */
.about-text-content {
    flex: 1;
}

.about-catch {
	font-size: 26px;
    line-height: 1.5;
    margin-bottom: 30px;
    font-weight: bold;
    letter-spacing: 0.05em;
}


/* ボタンのコンテナ（右寄せ） */
.about-btn-container {
    text-align: right;
    margin-top: 30px;
}

/* 画像側 */
.about-image-content {
    flex: 1;
}

.about-image-content img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}

/* --- レスポンシブ --- */
/* タブレットサイズ以下 */
@media screen and (max-width: 1024px) {
	.about-section {
        padding-top: 40px; 
    }
	
    .about-flex {
        flex-direction: column-reverse; /* 画像を上、テキストを下に */
        gap: 40px;
    }

    .about-text-content, 
    .about-image-content {
        width: 100%;
    }

    .about-catch {
        font-size: 22px;
    }
}

/* スマホサイズ */
@media screen and (max-width: 768px) {
    .about-btn-container {
        text-align: center; 
        margin-top: 20px;
    }
}


/* =================================================
   夢団ニュースセクション（PHP対応）
   ================================================= */
.news-list-container {
    margin-top: 40px;
}

#newsList {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ニュースの各行 */
#newsList li {
    padding: 25px 10px;
    border-bottom: 1px solid #333;
    display: block; 
}

/* 日付とカテゴリの並び */
.up_ymd {
    display: inline-block;
    font-size: 14px;
    color: #aaa;
    margin-right: 15px;
}

.catName {
    display: inline-block;
    font-size: 11px;
    padding: 3px 10px;
    background-color: var(--pink);
    color: #fff;
    border-radius: 3px;
    margin-right: 15px;
}

/* タイトル（リンク） */
.title {
    display: inline; /* Newマークを横に並べるため */
    font-weight: bold;
    font-size: 17px;
}

.title a {
    color: #fff;
    text-decoration: none;
}

.title a:hover {
   color: var(--pink);
}

/* New! マーク */
.newMark {
    display: inline-block;
    margin-left: 10px;
    color: #ff4d4d;
    font-size: 11px;
    font-style: italic;
}

/* 本文（コメント） */
#newsList li .news_comment,
#newsList li div {
    display: block;
    margin-top: 15px; /* タイトルとの間隔 */
    font-size: 14px;
    line-height: 1.7;
}

/* --- 下部：一覧へのリンク --- */
.news-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
}

.news-more-link {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
    transition: color 0.3s;
}

.news-more-link:hover {
    color: var(--pink);
}

.news-more-link i {
    margin-left: 8px;
    font-size: 12px;
}


/* --- レスポンシブ (スマホ) --- */
@media screen and (max-width: 768px) {
   #newsList li {
        padding: 20px 5px;
        display: block;
    }

    /* 日付：1行独立させる */
    .up_ymd {
        display: block; 
        margin-bottom: 8px;
        font-size: 13px;
    }

    .catName {
        display: inline-block; /* 文字の幅だけになる */
        margin-bottom: 10px;
        padding: 3px 10px;
    }

    /* タイトル：文字として扱う */
    .title {
        display: inline; /* inlineにすることでNewマークを横に呼び寄せ */
        font-size: 15px;
        line-height: 1.6;
        font-weight: bold;
    }

    .title a {
        display: inline;
    }

    /* New! マーク：タイトルのすぐ横に */
    .newMark {
        display: inline-block;
        margin-left: 8px;
        white-space: nowrap;
    }

    /* 本文：タイトルの後で必ず改行させる */
    #newsList li .news_comment,
    #newsList li div {
        display: block; /* ここで強制的に改行 */
        margin-top: 12px;
        padding: 0 5px;
    }
	
	   .news-footer {
        justify-content: center; /* スマホでは中央寄せ */
    }
}


/* --- ニュース一覧ページ（news.php）専用の調整 --- */

/* ページャー全体のレイアウト */
.pager {
    text-align: center;
    margin: 20px 0 40px;
    font-family: 'Arial', sans-serif;
}

/* ページ番号のリンク */
.pager a {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 3px;
    border: 1px solid #444;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
    border-radius: 4px;
}

/* 現在のページ番号 */
.pager a.current {
    background-color: var(--pink);
    border-color: var(--pink);
    color: #fff;
}

.pager a:hover:not(.current) {
    background-color: rgba(255, 96, 159, 0.2);
    border-color: var(--pink);
}

/* 著作権表示の調整（一覧ページ用） */
#newsWrap + center,
#newsWrap + a {
    display: block;
    text-align: center;
    color: #555;
    font-size: 10px;
    margin: 30px 0;
    text-decoration: none;
}

/* =================================================
   作品ラインナップセクション
   ================================================= */
/* 中身は空だけど、将来のカスタマイズ用に名前だけキープ */
.works-section {
  
}

.works-section:last-child {
	border-bottom: none;}

/* --- 下部の文字情報全体 --- */
.poster-info {
    margin-top: 10px; 
    text-align: center;
}

/* 作品タイトル */
 .poster-info h4 {
   font-size: 18px; 
   line-height: 1.4;
   font-weight: bold;
   margin-bottom: 5px !important;
   margin-top: 5px !important;
    }

/* シリーズ名（ピンクの小文字） */
.poster-series {
    font-size: 14px;
    color: var(--pink);
    letter-spacing: 0.05em;
}

.poster-series span { 
	font-size: 12px;
    color: #ffffff;
}

/* グリッド全体：PCでは3列 */
.poster-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 基本は3列 */
    gap: 60px 40px;
    max-width: 1100px;
    margin: 0 auto;
}

/* --- スマホ対応 (768px以下) --- */
@media screen and (max-width: 768px) {
	.poster-info h4 {
   font-size: 16px;
   line-height: 1.2;
	margin-top: 5px;
	margin-bottom: 5px; 
    }
}


/* 961px以上の画面（PC）の時だけ、1段目を2作にする */
@media screen and (min-width: 961px) {
    /* 1枚目（オズ）を1列目に固定 */
    .poster-card:nth-child(1) {
        grid-column: 1 / 2;
    }

    /* 2枚目（アリス）を2列目に固定 */
    .poster-card:nth-child(2) {
        grid-column: 2 / 3;
    }

    /* 3枚目（サンゴ）からは、3列目ではなく、自動で2段目の最初から並ぶようにリセット */
    .poster-card:nth-child(3) {
        grid-column: 1 / 2;
    }
}

.poster-card {
    text-decoration: none;
    display: block;
}

/* ポスター画像の設定 */
.poster-img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.414;
    overflow: hidden;
    background-color: #000;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    transition: 0.3s ease;
}

.poster-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- ポスターホバー時のオーバーレイ --- */
.poster-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 96, 159, 0.85); /* 夢団ピンク（透過85%） */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* 最初は透明 */
    transition: opacity 0.3s ease; /* ふわっと出す設定 */
    z-index: 2;
}

/* ホバーした時にオーバーレイを表示 */
.poster-card:hover .poster-overlay {
    opacity: 1;
}

/* 「詳しく見る」ボタンのデザイン */
.view-btn {
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    background-color: transparent;
    transition: transform 0.3s ease, background-color 0.3s ease;
    transform: translateY(10px); /* 最初は少し下に下げておく */
}

/* ホバー時にボタンをふわっと浮き上がらせる */
.poster-card:hover .view-btn {
    transform: translateY(0); /* 定位置に戻る */
    background-color: rgba(255, 255, 255, 0.2); /* ほんのり白く光る */
}


/* 対象タグのデザイン */
.target-tag {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    color: #fff;
    border: 2px solid var(--pink);
	border-radius: 8px;
    font-weight: bold;
	margin-top: 5px;
}

@media (hover: hover) {
    .poster-card:hover .poster-overlay { opacity: 1; }
    .poster-card:hover .poster-img-wrapper { 
        transform: translateY(-8px); 
        border: 2px solid var(--pink); /* 太さ2px、実線、ピンク色を一気に指定 */
    }
	.poster-img-wrapper{border: 2px solid transparent;}
}

/* --- スマホ対応 (768px以下) --- */
@media screen and (max-width: 768px) {
    .poster-grid {
        grid-template-columns: 1fr; 
        gap: 50px 0; 
        padding: 0 10%;
    }
	
	/* PC用の個別設定をスマホでは無効化する ↓ */
    .poster-card:nth-child(1),
    .poster-card:nth-child(2),
    .poster-card:nth-child(3) {
        grid-column: auto;
    }

    .poster-series {
        font-size: 11px;
    }

    .target-tag {
        font-size: 12px; 
        padding: 4px 12px;
		margin-top: 5px;
    }
	
	
	.poster-overlay {
        background-color: rgba(0, 0, 0, 0.3); 
        opacity: 1; /* スマホは常時表示 */
    }
	
	/*詳しく見るボタンが不要な場合は消す*/
	  .view-btn {
        color: #fff;
        border: 1px solid #fff; /* 白枠をつけて引き締める */
        padding: 8px 18px; 
        font-size: 13px;
        border-radius: 4px;
        transform: translateY(0); /* 移動アニメーションをリセット */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* 少し影をつけて浮かせる */
    }
	
}

/* --- 募集バナーセクション --- */
/* 中身は空だけど、将来のカスタマイズ用に名前だけキープ */
.double-banner-section {
}

.banner-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 左右2分割 */
	gap: 40px;/* 左右の真ん中の隙間*/
}

.main-banner {
    position: relative;
    display: block;
    height: 450px; /* バナーの高さ */
    overflow: hidden;
    border-radius: 20px;
    text-decoration: none;
    color: #fff;
	
	/* --- グラデーション枠 --- */
    padding: 3px; /* 枠の太さ */
    background: linear-gradient(135deg, #7000FF, #FF609F); /* 紫からピンクへのグラデーション */
}

/* 内側の角丸と写真を収めるためのラッパー */
.banner-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 17px;
    overflow: hidden;
    background: #000;
}

.banner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* 背景画像の設定 */
.banner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.banner-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* グラデーションをかけて文字を読みやすくする */
    background: linear-gradient(to top, rgba(0,0,0,0.9) 20%, rgba(0,0,0,0.2) 70%);
}

.banner-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* テキストコンテンツ */
.banner-content {
    position: absolute;
    bottom: 40px;
    left: 40px;
    right: 40px;
    z-index: 2;
}

.banner-sub {
    font-family: 'Arial Black', sans-serif;
    font-size: 14px;
    color: var(--pink);
    letter-spacing: 0.2em;
    margin-bottom: 10px;
}

.banner-title {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 15px;
}

.banner-title span {
    color: var(--pink);
}

.banner-text {
    font-size: 15px;
    margin-bottom: 25px;
    opacity: 0.9;
}

/* ボタン風デザイン */
.banner-btn {
    display: inline-block;
    padding: 12px 25px;
    background-color: #fff;
    color: var(--bg-black);
    font-weight: bold;
    border-radius: 50px;
    font-size: 14px;
    transition: 0.3s;
}

/* ホバー演出 */
.main-banner:hover .banner-img img {
    transform: scale(1.05);
}

.main-banner:hover .banner-btn {
    background-color: var(--pink);
    color: #fff;
}

/* --- スマホ対応 (縦並び) --- */
@media screen and (max-width: 900px) {
    .banner-grid {
        grid-template-columns: 1fr;
    }
    .main-banner {
        height: 400px;
    }
    .banner-title {
        font-size: 22px;
    }
    .banner-content {
        left: 20px;
        right: 20px;
        bottom: 30px;
    }
}

/*階層ページ*/
/* =================================================
   夢団について
   ================================================= */
/* --- 代表メッセージエリア --- */
.leader-message-wrapper {
    max-width: 900px; /* 読みやすい幅に制限 */
    margin: 60px auto 100px; /* 下のプロフィールとの間隔を大きく取る */
}

.message-main-text p {
    font-size: 16px;
    line-height: 2.2; /* 行間を広めに取って読みやすく */
   /* margin-bottom: 45px; /* 段落間の余白 */
	margin-bottom: 30px; /* 段落間の余白 */
    color: #ccc;
}

/* 署名 */
.message-main-text p.signature {
    text-align: right;
    color: #fff;
    margin-top: 60px;
    border-bottom: none;
}

/* --- プロフィールコーナー（枠囲み） --- */
.profile-inner-box {
    background-color: #262626; /* 背景を少し明るくして区切る */
    padding: 60px;
    border-radius: 4px;
    border-left: 4px solid var(--pink); 
}

.profile-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
}

.profile-text {
    flex: 1;
}

.name-area {
    position: relative;
    margin-bottom: 25px;
}

.name-en {
    position: absolute;
	top: -35px;
	left: 10px;
	font-size: 46px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.04);
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
}

.name-area h3 {
    position: relative;
    font-size: 22px;
    color: #fff;
}

.profile-description p {
    font-size: 15px;
    color: #bbb;
    line-height: 1.8;
    margin-bottom: 0; /* プロフィール内のマージンはリセット */
}

.profile-image {
    flex-basis: 300px;
}

.profile-image img {
    width: 100%;
    height: auto;
    border-radius: 2px;
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    .message-main-text p {
        font-size: 15px;
        margin-bottom: 35px;
    }
  
    .profile-inner-box {
        padding: 30px 20px;
    }
    .profile-flex {
        flex-direction: column-reverse; /* 写真を上に、文を下に */
        gap: 30px;
    }
    .profile-image {
        width: 60%;
    }
	
	.name-en {
    position: absolute;
    top: -25px;
	font-size: 36px;
}
}


/* --- 作品グリッド（3列表示） --- */
.works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 横に3つ並べる */
    gap: 60px 40px; /* 上下左右の間隔 */
    margin-top: 40px;
	
}

/* トップページで設定した「1枚目・2枚目・3枚目」の
   特殊な列固定を、このページでは無効*/

.works-grid .poster-card:nth-child(n) {
    grid-column: auto !important;
}

.work-card {
    text-align: center;
}

.work-card img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* ポスターを少し角丸に */
    box-shadow: 0 10px 20px rgba(0,0,0,0.5); /* 影をつけて立体感を出す */
    transition: transform 0.3s ease;
}

.work-card img:hover {
    transform: scale(1.03); /* ホバーで少し大きく */
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    .works-grid {
        grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
        gap: 30px 15px;
    }
	
	
    .works-container {
        padding: 0 20px;
    }
}


/* ---  作品ロゴ　作品共通 --- */
.program-intro {
    max-width: 1000px;
  /* margin: 60px auto;*/
	margin: 10px auto;
    text-align: center;
}

.program-logo {
    margin-bottom: 40px;
}

.program-logo img {
	max-width: 550px; 
    height: auto;
}

/* 認定作品テキスト（白枠囲み） */
.certification-badge {
    display: inline-block;
    border: 2px solid #fff; /* 太めの白枠 */
    padding: 12px 30px;
}

.certification-badge p {
	font-size: 16px;
    font-weight: bold;
    margin: 0;
    letter-spacing: 0.2em;
}


/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
      .program-logo img {
        max-width: 70%;
    }
    .certification-badge p {
        font-size: 14px;
        letter-spacing: 0.1em;
    }
}



/* 作品データエリア（枠囲み） */
.program-data-box {
    max-width: 800px;
	margin: 0 auto 0px;
    border: 1px solid #444; /* 控えめな枠 */
    padding: 30px;
    background-color: rgba(255, 255, 255, 0.03); /* ほんの少しだけ明るく */
}

.data-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* スマホで折り返す */
}

.data-list li {
    font-size: 16px;
    color: #ccc;
    display: flex;
    flex-direction: column; /* ラベルと内容を縦に並べる */
    align-items: center;
    gap: 8px;
}

.program-data-section{

}

.data-list .label {
    font-size: 13px;
    color: var(--pink);
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 1px solid var(--pink);
    padding-bottom: 2px;
}

.data-content {
    text-align: center; /* 中央寄せを維持 */
}

/* ※の注釈を小さく、少しグレーにする */
.data-content .u-small {
    display: block; /* 強制的に改行 */
    font-size: 13px;
    color: #aaa;
    margin-top: 4px; /* 上の行との微調整 */
}

/* 下の段（中学・高校）との距離を広げる */
.data-content .data-sub-item {
    margin-top: 15px; 
    padding-top: 10px;
    border-top: 1px dotted #444; 
}

/* --- スマホ対応 (768px以下) --- */
@media screen and (max-width: 768px) {
    .program-data-box {
        padding: 25px 15px;
        margin: 0 10px;
    }

    .data-list {
        flex-direction: column; /* 縦に並べる */
        gap: 25px; /* 項目ごとの間隔をしっかり空ける */
        align-items: center;
    }

    .data-list li {
        width: 100%; /* 横幅いっぱい使って中央寄せ */
        font-size: 15px; 
    }

    .data-list li:not(:last-child) {
        border-bottom: 1px dashed rgba(255, 255, 255, 0.1); /* 項目間にうっすら線を入れる */
        padding-bottom: 20px;
    }
	
	.data-content {
    text-align: right; /* 右寄せ */
}
	
	.data-content .data-sub-item {
        margin-top: 12px;
        padding-top: 8px;
    }
}


/* YouTube動画（レスポンシブ対応） */
/* 中身は空だけど、将来のカスタマイズ用に名前だけキープ */
.program-video-section{
}

.video-container {
    max-width: 1000px;
    /*margin: 0 auto 80px;*/
	 margin: 0 auto 60px;
}

.video-wrapper {
    position: relative;
   padding-bottom: 56.25%; /* 16:9 の比率 */
    height: 0;
    overflow: hidden;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	border: none;
}

/* 画像用の設定を追加 */
.video-wrapper .program-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
	object-position: center;
    border: none;
}

/* あらすじセクション */
/* 中身は空だけど、将来のカスタマイズ用に名前だけキープ */
.program-synopsis-section{
}

.synopsis-content {
    max-width: 900px;
    margin: 40px auto 0;
}

.synopsis-content p {
    font-size: 16px;
    line-height: 2;
    color: #ccc;
    margin-bottom: 30px;
}

/* シーン写真ギャラリー（4列） */
/* 中身は空だけど、将来のカスタマイズ用に名前だけキープ */
.program-gallery-section{
}

.scene-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* PCで4列 */
    gap: 20px; /* 写真同士の隙間 */
    margin-top: 40px;
}

.scene-item {
    overflow: hidden;
    border-radius: 4px;
    background-color: #000;
}

.scene-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2; /* 写真の縦横比を統一してカチッと見せる */
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, opacity 0.3s ease;
    cursor: pointer;
}

/* ホバー時の演出 */
.scene-item img:hover {
    transform: scale(1.1); /* 少しズーム */
    opacity: 0.8;
}

/* スマホ対応 */
@media screen and (max-width: 960px) {
	
.program-synopsis-section{
}
	
.program-gallery-section{
	padding: 40px 0; }
	

    .scene-gallery {
        grid-template-columns: repeat(2, 1fr); /* タブレット・スマホは2列 */
        gap: 15px;
    }
	
	.program-data-section{
	padding: 20px 0; 
}
}

@media screen and (max-width: 480px) {
    .synopsis-content p {
        font-size: 15px;
        line-height: 1.8;
    }
}


/* スマホ対応 */
@media screen and (max-width: 768px) {
	.program-catch p {
        font-size: 18px;
        padding: 0 10px;
    }
    .data-list {
        flex-direction: column;
        gap: 25px;
    }
    .data-list li {
        flex-direction: row; /* スマホでは横並びに */
        justify-content: space-between;
        width: 100%;
        border-bottom: 1px solid #333;
        padding-bottom: 10px;
    }
}


/* 作品の魅力セクション */
.features-list {
    max-width: 900px;
    margin: 50px auto 0;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 60px;
    position: relative;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-item:last-child {
    border-bottom: none;
}

/* デザインされた数字部分 */
/* 中身は空だけど、将来のカスタマイズ用に名前だけキープ */
.program-features-section{	
}

.feature-num {
 font-size: 48px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 1px var(--pink);
    line-height: 1;
    position: relative;
    top: -5px;
    
    display: flex;
    flex-direction: column; /* 縦に並べる場合 */
    align-items: flex-start;
}

.feature-label {
 -webkit-text-stroke: 0; /* 縁取りを解除 */
    color: var(--pink); 
    font-size: 12px; 
    letter-spacing: 0.1em;
    text-transform: uppercase; /* 大文字に固定 */
    margin-top: 5px;
    font-family: 'Montserrat', sans-serif;
}

.feature-num::after {
 content: "";
    display: block;
    width: 20px;
    height: 2px;
    background-color: var(--pink);
    margin-top: 10px;
}

/* 内容部分 */
.feature-content h3 {
    font-size: 22px;
    color: #fff;
    margin-bottom: 15px;
    font-weight: bold;
}

.feature-content p {
    font-size: 16px;
    line-height: 1.8;
    color: #bbb;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .feature-item {
        flex-direction: column; 
        gap: 15px;
		 margin-bottom: 30px;
    }
	
    .feature-num {
     font-size: 36px;
       flex-direction: row; 
       align-items: baseline;
        gap: 10px;
    }
	
	.feature-label {
     font-size: 12px;
    }
    .feature-num::after {
        width: 40px; 
    }
    .feature-content h3 {
        font-size: 18px;
    }
}


/* メッセージセクション全体 */
.program-message-section {
    text-align: center;
}

.message-heading h2 {
	font-size: 36px;
    font-weight: bold;
    color: #fff;
    line-height: 1.4;
    margin-bottom: 60px;
    letter-spacing: 0.15em;
    
    /* 光彩を3層に重ねて強調 */
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.6), /* 文字のすぐ外側の強い光 */
        /*0 0 25px rgba(255, 255, 255, 0.4), /* 中くらいの広がり */
        0 0 45px rgba(255, 255, 255, 0.2); /* 遠くまで届く淡い光 */
}

/* メッセージ本文 */
.message-body {
    max-width: 900px;
    margin: 0 auto;
    text-align: left; /* 本文は読みやすく左寄せ */
}

.message-body p {
    font-size: 17px;
    line-height: 2.2;
    color: #ccc;
    margin-bottom: 40px;
}


p.message-highlight  {
	font-size: 20px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 0;
	padding-bottom: 15px;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .message-heading h2 {
        font-size: 24px;
        letter-spacing: 0.05em;
    }
    .message-body p {
        font-size: 15px;
    }
 
  p.message-highlight p {
        font-size: 17px;
    }
}

@media screen and (min-width: 769px) {
    .sp-only {
        display: none;
    }
}

/* ポスター＆パンフレットセクション */
.program-pamphlet-section {
    padding: 60px 0 100px;
    background-color: var(--bg-black);
}

.pamphlet-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto;
}

/* ポスター画像 */
.pamphlet-image {
    flex: 0 0 320px; /* ポスターの横幅を固定 */
}

.pamphlet-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8); /* 強い影で立体感を出す */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 右側の情報 */
.pamphlet-info {
    flex: 1;
}

.pamphlet-text {
    font-size: 16px;
    color: #ccc;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* PDFダウンロードボタン（ピンク） */
.pdf-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--pink); 
    color: #fff;
    text-decoration: none;
    padding: 18px 40px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 50px; /* 丸みのあるボタン */
    transition: all 0.3s ease;
    /*box-shadow: 0 5px 20px rgba(255, 96, 159, 0.3);*/
}

.pdf-download-btn:hover {
    transform: translateY(-3px); /* 少し上に浮かせる */
}

.pdf-download-btn i {
    margin-right: 12px;
    font-size: 22px;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
       
	.pamphlet-container {
        flex-direction: column;
        gap: 30px;
        text-align: center;
        align-items: center; /* 子要素を中央に寄せる */
    }
    .pamphlet-image {
        flex-basis: auto;
        width: 70%;
        max-width: 280px;
    }
    .pdf-download-btn {
        font-size: 14px;
        width: fit-content; 
        margin: 0 auto; /* 念のため中央寄せ */
        /* サイズを一回り小さく調整 */
        padding: 12px 25px; 
        white-space: nowrap;
    }
	
	.pdf-download-btn i {
        font-size: 18px;
        margin-right: 8px;
    }
	
	/* 右側の情報 */
.pamphlet-info {
    flex: 1;
	padding-left: 20px;
	padding-right: 20px;
}
}

.pamphlet-note {
    font-size: 12px;
    color: #999;
    line-height: 1.6;
	 margin-top: 20px;
    text-align: left; 
}

@media screen and (max-width: 768px) {
    .pamphlet-note {
        text-align: center;
        font-size: 11px;
    }
}


/* 他の演目セクション */
.other-programs-section {
    background-color: var(--bg-black);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.other-programs-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.other-title {
    font-size: 20px;
    color: #fff;
    margin-bottom: 30px;
    font-weight: bold;
	border-left: 4px solid var(--pink); 
    padding-left: 15px;            /* 文字との間の隙間 */
    line-height: 1.2;              /* 線の高さを調整 */
}

/* リストの並び替え */
.other-program-list {
    display: grid;
    /* PCでは4列 */
    grid-template-columns: repeat(4, 1fr);
    gap: 15px; /* ボタン同士の間隔 */
    list-style: none;
    padding: 0;
	margin-top: 40px;}

/* 各作品のボタンデザイン */
.other-program-list li a {
    color: #fff; 
    text-decoration: none;
    font-size: 14px;
    padding: 15px 10px;
    border: 1px solid rgba(255, 255, 255, 0.2); /* 控えめな白枠 */
    border-radius: 50px; /* 角をしっかり丸く（カプセル型） */
    text-align: center;
    transition: all 0.3s ease;
    display: block;
    background-color: rgba(255, 255, 255, 0.05); /* ほんのり背景色 */
}


/* ホバー演出（ピンクに光らせる） */
.other-program-list li a:hover {
    color: #fff;
    background-color: var(--pink); 
    border-color: var(--pink);
    box-shadow: 0 5px 15px rgba(255, 96, 159, 0.3); /* 浮かせる */
    transform: translateY(-2px);
}


/* スマホ対応 */
@media screen and (max-width: 768px) {
    .other-program-list {
       /* スマホは2列に整列 */
        grid-template-columns: repeat(2, 1fr); 
		gap: 20px;
        margin-top: 30px;
    }
    
    .other-program-list li a {
       font-size: 12px;
        padding: 12px 5px; /* スマホ用に少し高さを抑える */
    }
    
    .other-title {
        font-size: 18px;
    }
}


/* =================================================
   公演のご依頼
   ================================================= */
/* --- クイックお問い合わせエリアの調整 --- */
.quick-contact {
    margin-top: 20px;       /* 上の4つボタンとの間の隙間 */
    margin-bottom: 40px;    /* 下のコンテンツとの間の隙間 */
    padding: 0 10px;       
    text-align: center;    
}

/* スマホ対応：ボタンの幅を調整 */
@media screen and (max-width: 768px) {
	
	.quick-contact {
        margin-top: 25px; /* 上との空きをしっかり作る */
    }
    
    /* 中サイズボタン（お問い合わせボタン）の調整 */
    .c-btn-main.--medium {
        display: inline-block; 
        width: 90%;           /* 100%から少し減らす、または上のボタンの計算に合わせる */
        max-width: 340px;     
        padding: 15px 20px;
        box-sizing: border-box;
		display: block;
        width: 85%;      /* 左右に余白を持たせて、視覚的にバランスを取る */
        margin: 0 auto;  /* 中央配置 */
    }
}


/* セクション見出し（ピンクのアクセント） */
.section-title-pink {
    font-size: 24px;
    color: #fff;
    border-bottom: 2px solid var(--pink); /* 下線 */
    padding-bottom: 10px;
    margin-bottom: 40px;
    display: inline-block; /* 線の長さを文字に合わせる */
}

/* 概要のグリッド配置 */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* PCでは2列 */
    gap: 30px;
}

.summary-item {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 8px;
}

.summary-item h3 {
    color: var(--pink);
    font-size: 18px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

/* 見出しの前に小さなドットなど入れて見やすく */
.summary-item h3::before {
    content: "";
    width: 8px;
    height: 8px;
    background-color: var(--pink);
    border-radius: 50%;
    margin-right: 10px;
}

.summary-item p {
    color: #ccc;
    font-size: 15px;
    line-height: 1.7;
}

.info-note {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
    font-size: 13px;
    color: #aaa;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .summary-grid {
        grid-template-columns: 1fr; /* スマホは1列 */
        gap: 20px;
    }
    
    .section-title-pink {
        font-size: 20px;
    }
}


/* --- ご依頼の流れセクション --- */
.flow-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    padding-top: 20px;
}

/* 縦のライン（ステップをつなぐ線） */
.flow-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 30px; /* 数字の中央を通るように調整 */
    width: 2px;
    height: 100%;
    background: rgba(255, 96, 159, 0.3);
}

.flow-step {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
    position: relative;
}

.step-num {
    width: 60px;
    height: 60px;
    background-color: var(--pink);
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
    flex-shrink: 0;
    z-index: 1;
    box-shadow: 0 0 15px rgba(255, 96, 159, 0.4);
}

.step-content {
    background-color: rgba(255, 255, 255, 0.03);
    padding: 25px 30px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-grow: 1;
}

.step-content h3 {
    color: #fff;
    font-size: 20px;
    margin-bottom: 15px;
}

.step-content p {
    color: #ccc;
    font-size: 15px;
    line-height: 1.7;
}

/* お問い合わせ内容のボックス */
.step-info-box {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
}

.box-title {
    color: #FF609F !important;
    font-weight: bold;
    font-size: 14px !important;
    margin-bottom: 10px;
}

.step-info-box ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列並び */
    gap: 10px;
}

.step-info-box li {
    color: #eee;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.step-info-box li::before {
    content: "・";
    color: var(--pink);
    margin-right: 5px;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .flow-container::before {
        left: 20px;
    }
    
    .flow-step {
        gap: 15px;
    }

    .step-num {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .step-content {
        padding: 20px;
    }

    .step-content h3 {
        font-size: 18px;
    }

    .step-info-box ul {
        grid-template-columns: 1fr; /* スマホは1列 */
    }
}

/* 当日の流れ全体の囲い */
.day-flow-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr; /* PCでは左にステップ、右に表 */
    gap: 40px;
    margin-top: 30px;
}

/* シンプルなステップリスト */
.day-step-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    align-items: flex-start;
}

.day-step-label {
    background-color: var(--pink);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
    margin-top: 4px;
}

.day-step-text h4 {
    color: #fff;
    font-size: 17px;
    margin-bottom: 5px;
}

.day-step-text p {
    color: #aaa;
    font-size: 14px;
    line-height: 1.6;
}

/* タイムライン表のデザイン */
.timeline-box {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 12px;
}

.timeline-box h3 {
    color: var(--pink);
    font-size: 18px;
    margin-bottom: 20px;
    text-align: center;
}

.timeline-table {
    width: 100%;
    border-collapse: collapse;
}

.timeline-table tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.timeline-table tr:last-child {
    border-bottom: none;
}

.timeline-table th {
    color: var(--pink);
    font-size: 16px;
    text-align: left;
    padding: 15px 10px;
    width: 80px;
    vertical-align: middle;
}

.timeline-table td {
    color: #eee;
    font-size: 15px;
    padding: 15px 10px;
    line-height: 1.5;
}

/* スマホ対応 */
@media screen and (max-width: 960px) {
    .day-flow-wrapper {
        grid-template-columns: 1fr; /* 縦に並べる */
    }
}


/*当日の先生へのお願いと撮影・校内設備について*/
.teacher-requests-box {
    margin-top: 60px;
    display: grid;
    grid-template-columns: 1fr 1fr; /* PCでは左右並列 */
    gap: 30px;
}

.request-sub-section {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 96, 159, 0.2);
    padding: 25px;
    border-radius: 10px;
}

.request-sub-section h3 {
    font-size: 18px;
    color: var(--pink);
    margin-bottom: 20px;
    border-left: 4px solid var(--pink);
    padding-left: 12px;
}

/* チェックリスト形式 */
.check-list, .attention-list {
    list-style: none;
    padding: 0;
}

.check-list li, .attention-list li {
    color: #eee;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 12px;
    position: relative;
    padding-left: 25px;
}

/* チェックマークのアイコン */
.check-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: var(--pink);
    font-weight: bold;
}

/* 注意事項のドット */
.attention-list li::before {
    content: "●";
    position: absolute;
    left: 0;
    color: var(--pink);
    font-size: 10px;
    top: 2px;
}

.note-text {
    font-size: 12px;
    color: #aaa;
    margin-top: 15px;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .teacher-requests-box {
        grid-template-columns: 1fr; /* スマホでは縦並び */
		margin-top: 40px;
        gap: 20px;
    }
}


/* --- FAQデザイン --- */
.faq-container {
    max-width: 800px;
    margin: 0 auto 60px;
}

.faq-item {
 margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.faq-question, 
.faq-answer {
    padding: 20px 25px;
    display: flex;
    gap: 15px;
    line-height: 1.6;
}

.faq-question {
   padding-right: 60px; /* 右側だけ上書きして広げる */
    cursor: pointer;
    list-style: none;
    position: relative;
    font-weight: bold;
    color: #fff;
    background-color: rgba(255, 96, 159, 0.1);
}

.faq-icon {
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 20px;
    flex-shrink: 0;
}


/* ブラウザ標準の三角を消す（Safari/Chrome用） */
.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question::after {
    content: "＋";
    position: absolute;
    right: 20px; 
    top: 50%;   /* 上下中央へ */
    transform: translateY(-50%); /* 上下中央揃えの仕上げ */
    color: var(--pink);
    font-size: 18px;
    transition: transform 0.3s;
}

/* 開いている時は「＋」をまたは「ー」にする */

.faq-item[open] .faq-question::after {
  content: "－";
    transform: translateY(-50%); /* 回転させない */
}

.faq-answer {
  background-color: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: #ccc;
    line-height: 1.8; /* 行間だけ少しゆったり上書き */
}

/* アイコンの色調整 */
.faq-question .faq-icon { color: var(--pink); }
.faq-answer .faq-icon { color: #fff; }

/* --- スマホ対応の微調整 --- */
@media screen and (max-width: 768px) {
    .faq-question {
        padding: 15px 50px 15px 15px; /* スマホでは全体的に少しコンパクト */
        font-size: 15px;
    }
    .faq-question::after {
        right: 15px; /* 端に寄せすぎず、適度な位置に */
    }
    .faq-answer {
        padding: 15px 15px;
        font-size: 14px;
    }
}


/* --- 最後のお問い合わせエリア --- */
.final-contact-section {
    background-color: #111; 
	margin-bottom: 60px;
}

.final-contact-area {
    text-align: center;
    padding: 60px 40px;
    background-color: var(--bg-black);
    border: 2px solid var(--pink);
    border-radius: 15px;
    max-width: 800px;
    margin: 0 auto;
}

.contact-message {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 30px;
}

.contact-tel {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tel-label { color: #aaa; font-size: 14px; }
.tel-number {
    color: #fff;
    font-size: 32px;
    font-weight: bold;
    text-decoration: none;
    margin: 5px 0;
}
.tel-time { color: #888; font-size: 13px; }

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .final-contact-area {
        padding: 40px 20px;
    }
  
    .tel-number { font-size: 28px; }
}

/* 書類依頼エリア全体のコンテナ */
.document-request-container {
    text-align: center;
    margin-top: 40px; /* ピンク枠との間隔 */
    padding-bottom: 20px;
}

/* 案内テキスト */
.document-request-text {
    color: #aaa;
    font-size: 14px;
    margin-bottom: 20px;
}

/* 白いアウトラインボタン */
.document-request-container .c-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 35px;
    border: 1px solid #fff;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-size: 15px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.document-request-container .c-btn-outline:hover {
    background-color: #fff;
    color: #000;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .document-request-container {
        margin-top: 30px;
        padding: 0 10px;
    }
    
    .document-request-text {
        font-size: 13px;
        line-height: 1.6;
    }
    
    .document-request-container .c-btn-outline {
        width: 100%; /* スマホではタップしやすいよう横いっぱいに */
        justify-content: center;
    }
}


/* =================================================
   予約・お問い合わせエリア
   ================================================= */

.contact-lead {
    text-align: center;
    color: #ccc;
    margin-bottom: 40px;
    line-height: 1.8;
}

.contact-table {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    border-collapse: collapse;
}

.contact-table th, .contact-table td {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-table th {
    width: 30%;
    text-align: left;
    color: #fff;
    font-size: 15px;
    vertical-align: top;
}

/*※*/
.required {
    color: var(--pink);
    margin-left: 5px;
    font-size: 12px;
}

/* 入力欄の基本スタイル */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid #444;
    background-color: #222;
    color: #fff;
    font-size: 15px;
    box-sizing: border-box;
}

/* チェックボックス・ラジオボタン */
.checkbox-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.contact-table label {
    color: #ccc;
    font-size: 14px;
    margin-right: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.flex-input {
    display: flex;
    gap: 10px;
}

.date-inputs label {
    display: block;
    margin-bottom: 10px;
}

.form-submit {
    text-align: center;
    margin-top: 50px;
}

/* スマホ対応（上書き用） */
@media screen and (max-width: 768px) {
    .contact-table, 
    .contact-table tbody, 
    .contact-table tr {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        overflow: visible !important;
    }
    
    .contact-table th, 
    .contact-table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        text-align: left;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* 各入力パーツを親の幅(100%)に合わせ、はみ出しを防ぐ */
    .contact-table td input[type="text"],
    .contact-table td input[type="email"],
    .contact-table td input[type="tel"],
    .contact-table td input[type="date"],
    .contact-table td select,
    .contact-table td textarea {
        width: 100% !important;
        max-width: 100% !important; /* 強制的にはみ出しを抑える */
        display: block;
        box-sizing: border-box;
    }

    /* 項目名と線のデザイン */
    .contact-table th {
        border-bottom: none;
        padding-top: 20px;
    }
    
    .contact-table td {
        padding-top: 0;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* チェックボックスを1列にする */
    .checkbox-group {
        grid-template-columns: 1fr;
        width: 100%;
    }
}


/* ボタンエリア全体の調整 */
.form-submit {
    text-align: center;
    margin-top: 50px;
    display: flex;
    flex-direction: column; /* スマホでは縦に並べる */
    align-items: center;
    gap: 20px;
}


/* 「リセット」ボタン */
.btn-reset {
    background: none;
    border: none;
    border-bottom: 1px solid #888;
    color: #888;
    font-size: 14px;
    cursor: pointer;
    padding: 5px 10px;
    transition: 0.3s;
    -webkit-appearance: none;
}

.btn-reset:hover {
    color: #fff;
    border-bottom-color: #fff;
}

/* PCサイズでの調整 */
@media screen and (min-width: 769px) {
    .form-submit {
        flex-direction: row; /* 横並びにする */
        justify-content: center;
        gap: 40px;
    }
}


/*thanks.html*/
.thanks-section{
	/*padding: 100px 0; */
	padding-top: 20px;
	padding-bottom:60px;
	text-align: center; 
	color: #fff;
	
}

.thanks-section h2{
	color: var(--pink); 
	margin-bottom: 20px;
}

.thanks-section p{
	line-height: 1.8; 
	margin-bottom: 30px;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
	.thanks-section{
	text-align: left; 	
}
}

/* 「#formWrap」を外して、すべてのセレクトボックスに強制適用する書き方 */
select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    /* fill=%23FFFFFF で白を指定しています */
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23FFFFFF%22%3E%3Cpath%20d%3D%22M7%2010l5%205%205-5z%22%2F%3E%3C%2Fsvg%3E') !important;
    background-repeat: no-repeat !important;
    background-size: 20px !important;
    background-position: calc(100% - 10px) center !important;
    
    background-color: #222 !important;
    color: #fff !important;
    border: 1px solid #444 !important;
    padding: 10px 30px 10px 10px !important;
    border-radius: 5px !important;
}

/* カレンダーアイコンを白にする */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(100%) brightness(100%); 
    cursor: pointer;
}

/* 日付入力欄の基本スタイル統一 */
input[type="date"] {
    background-color: #222 !important;
    color: #fff !important;
    border: 1px solid #444 !important;
    padding: 10px !important;
    border-radius: 5px !important;
    font-family: inherit;
}

/* お客様の声セクション全体 */
.voice-teacher-section {
    padding: 60px 0;
}

.teacher-voice-container {
    max-width: 800px; /* 読みやすい幅に制限 */
    /*margin: 0 auto;*/
	margin: 80px auto 0;
}

/* 各作品のボックス */
.teacher-voice-item {
	background-color: #262626; /* 背景を少し明るくして区切る */
    padding: 35px 40px;
    border-radius: 12px;
    margin-bottom: 40px;
    border-left: 6px solid var(--pink); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* 作品タイトル */
.voice-title {
    color: var(--pink);
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

/* --- 作品ごとの色分け設定（追加分） --- */

/* オズ：黄 */
.teacher-voice-item.--oz { border-color: #FFE82C; }
.teacher-voice-item.--oz .voice-title { color: #FFE82C; }

/* アリス：赤 */
.teacher-voice-item.--alice { border-color: #ED2647; }
.teacher-voice-item.--alice .voice-title { color: #ED2647; }

/* ジャングル：緑 */
.teacher-voice-item.--jungle { border-color: #009E5B; }
.teacher-voice-item.--jungle .voice-title { color: #009E5B; }

/* 虹色サンゴ：水色 */
.teacher-voice-item.--sango { border-color: #36D7E9; }
.teacher-voice-item.--sango .voice-title { color: #36D7E9; }

/* あらしのよるに：黄緑 */
.teacher-voice-item.--arashi { border-color: #80E147; }
.teacher-voice-item.--arashi .voice-title { color: #80E147; }

/* ドン・キホーテ：オレンジ */
.teacher-voice-item.--don { border-color: #F58220; }
.teacher-voice-item.--don .voice-title { color: #F58220; }

/* ノートルダム：金 */
.teacher-voice-item.--notredame { border-color: #CCAC00; }
.teacher-voice-item.--notredame .voice-title { color: #CCAC00; }

/* ミュージカルショー：紫 */
.teacher-voice-item.--dream { border-color: #A239E6 ; }
.teacher-voice-item.--dream .voice-title { color: #A239E6 ; }

/* リピーター：夢団ピンク */
.teacher-voice-item.--repeater { border-color: #e95d94; }
.teacher-voice-item.--repeater .voice-title { color: #e95d94; }

/* 感想本文 */
.voice-content p {
    color: #e0e0e0;
    line-height: 1.9;
    font-size: 16px;
    margin-bottom: 0;
}

/* 2つ目以降の段落の上に余白を作る */
.voice-content p + p {
    margin-top: 2em; /* 2文字分くらいの空きを作ります */
    padding-top: 2em;
    border-top: 1px dashed #444;
}

/* 先生の情報（右寄せ） */
.teacher-info {
    text-align: right;
    color: #999;
    font-size: 14px;
    margin-top: 20px;
    font-style: italic;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .teacher-voice-item {
        padding: 25px 20px;
        margin-bottom: 30px;
    }
    .voice-title {
        font-size: 1.1rem;
    }
    .voice-content p {
        font-size: 15px;
    }
}


/* お客様の声：子どもギャラリーセクション */
.voice-kids-section {
    padding: 60px 0 100px; /* 下に広めに余白 */
}

/* ギャラリー全体の紹介文 */
.kids-intro {
    text-align: center;
    color: #e0e0e0;
    max-width: 600px;
    margin: -10px auto 40px; /* タイトルとの距離を調整 */
    line-height: 1.8;
    font-size: 16px;
}

.voice-kids-section p span{ 
    font-size: 14px;
    color: #aaa;}

/* グリッドレイアウト */
.kids-gallery-grid {
    display: grid;
    gap: 15px; /* 写真同士の隙間 */
    /* PCでは自動で4列程度に並べる */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: 200px;
    grid-auto-flow: dense; /* 空いた隙間を自動で埋める設定 */
}

/* 各写真の共通スタイル */
.gallery-item {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
	 padding: 3px; /* 白縁の太さ */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠に合わせて綺麗に収める */
    display: block;
    border-radius: 4px; /* 中の写真も少し丸く */
}

/* ホバー演出（マウスを乗せた時） */
.gallery-item:hover {
    transform: translateY(-5px); /* 少し上に浮く */
    box-shadow: 0 8px 20px rgba(255, 96, 159, 0.3); /* ピンクの影 */
}

/*横長写真の設定（1行分使う） */
.gallery-item.--ls {
    grid-row: span 1;
}

/* 縦長写真の設定（2行ぶち抜く！） */
.gallery-item.--pt {
    grid-row: span 2;
}

/* 写真のリンク（aタグ）に対する設定 */
.gallery-item a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in; /* カーソルを「拡大」の虫眼鏡マークにする */
}

/* 画像自体のホバー演出（シーン写真の設定と合わせる場合） */
.gallery-item img:hover {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .kids-gallery-grid {
       grid-template-columns: repeat(2, 1fr); /* 2列維持 */
        grid-auto-rows: auto; /* 高さを固定せず、中身に合わせる */
        gap: 10px;
    }
    
	.gallery-item {
        grid-row: span 1 !important; /* スマホでは縦長も1段分にする */
        height: auto; /* 高さを自動に */
        padding: 5px;
    }
	
	.gallery-item img {
        width: 100%;
        height: auto; /* 高さを自動にして比率を保つ */
        object-fit: contain; /*切り取らずに全体を表示する */
        border-radius: 4px;
    }
    /* スマホでも縦長は2段ぶち抜きを維持する */
    .gallery-item.--pt {
        grid-row: span 2;
    }
}


/* ============================================================
   作品別カラー設定（一括管理）
   ============================================================ */
/* --- ジャングルブック（緑：#009E5B） --- */
/* 1, 3, 4, 5. 各パーツの色と線を一括指定 */
.page-jungle .section-title, 
.page-jungle .data-list .label, 
.page-jungle .feature-label, 
.page-jungle .message-body .fwb { 
    color: #009E5B !important; 
}

/* タイトル周りの装飾（日本語白、左線グラデ） */
.page-jungle .section-title span { color: #fff !important; }
.page-jungle .section-title::before { 
    background: linear-gradient(to bottom, #009E5B, #00F87A) !important; 
}

/* 枠線・数字の縁取り・背景色 */
.page-jungle .data-list .label { border-bottom-color: #009E5B !important; }
.page-jungle .feature-num { -webkit-text-stroke: 1px #009E5B !important; }
.page-jungle .feature-num::after, 
.page-jungle .pdf-download-btn { 
    background-color: #009E5B !important; 
    border-color: #009E5B !important;
}

/* 2. 強力なキャッチコピーの光彩（4層重ね） */
.page-jungle .catch-copy-highlight h2 { 
    color: #fff;
    text-shadow: 
        0 0 10px rgba(0, 158, 91, 1), 
        0 0 25px rgba(0, 158, 91, 0.8), 
        0 0 45px rgba(0, 158, 91, 0.5), 
        0 0 65px rgba(0, 158, 91, 0.3); 
}

/* --- オズの魔法つかい（黄：#FFE82C） --- */
.page-oz .section-title, .page-oz .data-list .label, .page-oz .feature-label, .page-oz .message-body .fwb { color: #FFE82C !important; }
.page-oz .section-title::before { background: linear-gradient(to bottom, #FFE82C, #ccba23) !important; }
.page-oz .section-title span { color: #fff !important; }
.page-oz .data-list .label { border-bottom-color: #FFE82C !important; }
.page-oz .feature-num { -webkit-text-stroke: 1px #FFE82C !important; }
.page-oz .feature-num::after, .page-oz .pdf-download-btn { background-color: #FFE82C !important;
    color: #333 !important; /* 白から濃いグレーに変更して読みやすく */
    font-weight: 900 !important; /* 文字をより太くしてハッキリさせる */ }
.page-oz .catch-copy-highlight h2 { text-shadow: 0 0 10px rgba(255, 232, 44, 1), 0 0 25px rgba(255, 232, 44, 0.8), 0 0 45px rgba(255, 232, 44, 0.5), 0 0 65px rgba(255, 232, 44, 0.3); }

/* --- 不思議の国のアリス（赤：#ED2647） --- */
.page-alice .section-title, .page-alice .data-list .label, .page-alice .feature-label, .page-alice .message-body .fwb { color: #ED2647 !important; }
.page-alice .section-title::before { background: linear-gradient(to bottom, #ED2647, #bd1e39) !important; }
.page-alice .section-title span { color: #fff !important; }
.page-alice .data-list .label { border-bottom-color: #ED2647 !important; }
.page-alice .feature-num { -webkit-text-stroke: 1px #ED2647 !important; }
.page-alice .feature-num::after, .page-alice .pdf-download-btn { background-color: #ED2647 !important; }
.page-alice .catch-copy-highlight h2 { text-shadow: 0 0 10px rgba(237, 38, 71, 1), 0 0 25px rgba(237, 38, 71, 0.8), 0 0 45px rgba(237, 38, 71, 0.5), 0 0 65px rgba(237, 38, 71, 0.3); }

/* --- 虹色サンゴ（水色：#36D7E9） --- */
.page-sango .section-title, .page-sango .data-list .label, .page-sango .feature-label, .page-sango .message-body .fwb { color: #36D7E9 !important; }
.page-sango .section-title::before { background: linear-gradient(to bottom, #36D7E9, #2baec0) !important; }
.page-sango .section-title span { color: #fff !important; }
.page-sango .data-list .label { border-bottom-color: #36D7E9 !important; }
.page-sango .feature-num { -webkit-text-stroke: 1px #36D7E9 !important; }
.page-sango .feature-num::after, .page-sango .pdf-download-btn { background-color: #36D7E9 !important;
    color: #333 !important; /* 白から濃いグレーに変更 */
    font-weight: 900 !important; }
.page-sango .catch-copy-highlight h2 { text-shadow: 0 0 10px rgba(54, 215, 233, 1), 0 0 25px rgba(54, 215, 233, 0.8), 0 0 45px rgba(54, 215, 233, 0.5), 0 0 65px rgba(54, 215, 233, 0.3); }

/* --- あらしのよるに（黄緑：#80E147） --- */
.page-arashi .section-title, .page-arashi .data-list .label, .page-arashi .feature-label, .page-arashi .message-body .fwb { color: #80E147 !important; }
.page-arashi .section-title::before { background: linear-gradient(to bottom, #80E147, #67b539) !important; }
.page-arashi .section-title span { color: #fff !important; }
.page-arashi .data-list .label { border-bottom-color: #80E147 !important; }
.page-arashi .feature-num { -webkit-text-stroke: 1px #80E147 !important; }
.page-arashi .feature-num::after, .page-arashi .pdf-download-btn { background-color: #80E147 !important;
    color: #333 !important; /* 白から濃いグレーに変更 */
    font-weight: 900 !important; }
.page-arashi .catch-copy-highlight h2 { text-shadow: 0 0 10px rgba(128, 225, 71, 1), 0 0 25px rgba(128, 225, 71, 0.8), 0 0 45px rgba(128, 225, 71, 0.5), 0 0 65px rgba(128, 225, 71, 0.3); }

/* --- ドン・キホーテ（オレンジ：#F58220） --- */
.page-don .section-title, .page-don .data-list .label, .page-don .feature-label, .page-don .message-body .fwb { color: #F58220 !important; }
.page-don .section-title::before { background: linear-gradient(to bottom, #F58220, #c4681a) !important; }
.page-don .section-title span { color: #fff !important; }
.page-don .data-list .label { border-bottom-color: #F58220 !important; }
.page-don .feature-num { -webkit-text-stroke: 1px #F58220 !important; }
.page-don .feature-num::after, .page-don .pdf-download-btn { background-color: #F58220 !important; }
.page-don .catch-copy-highlight h2 { text-shadow: 0 0 10px rgba(245, 130, 32, 1), 0 0 25px rgba(245, 130, 32, 0.8), 0 0 45px rgba(245, 130, 32, 0.5), 0 0 65px rgba(245, 130, 32, 0.3); }

/* --- ノートルダム（金：#CCAC00） --- */
.page-notredame .section-title, .page-notredame .data-list .label, .page-notredame .feature-label, .page-notredame .message-body .fwb { color: #CCAC00 !important; }
.page-notredame .section-title::before { background: linear-gradient(to bottom, #CCAC00, #a38a00) !important; }
.page-notredame .section-title span { color: #fff !important; }
.page-notredame .data-list .label { border-bottom-color: #CCAC00 !important; }
.page-notredame .feature-num { -webkit-text-stroke: 1px #CCAC00 !important; }
.page-notredame .feature-num::after, .page-notredame .pdf-download-btn { background-color: #CCAC00 !important; }
.page-notredame .catch-copy-highlight h2 { text-shadow: 0 0 10px rgba(204, 172, 0, 1), 0 0 25px rgba(204, 172, 0, 0.8), 0 0 45px rgba(204, 172, 0, 0.5), 0 0 65px rgba(204, 172, 0, 0.3); }

/* --- ミュージカルショー（紫：#A239E6） --- */
.page-dream .section-title, .page-dream .data-list .label, .page-dream .feature-label, .page-dream .message-body .fwb { color: #A239E6 !important; }
.page-dream .section-title::before { background: linear-gradient(to bottom, #A239E6, #812db8) !important; }
.page-dream .section-title span { color: #fff !important; }
.page-dream .data-list .label { border-bottom-color: #A239E6 !important; }
.page-dream .feature-num { -webkit-text-stroke: 1px #A239E6 !important; }
.page-dream .feature-num::after, .page-dream .pdf-download-btn { background-color: #A239E6 !important; }
.page-dream .catch-copy-highlight h2 { text-shadow: 0 0 10px rgba(162, 57, 230, 1), 0 0 25px rgba(162, 57, 230, 0.8), 0 0 45px rgba(162, 57, 230, 0.5), 0 0 65px rgba(162, 57, 230, 0.3); }

/* --- 共通：メッセージ内の強調テキスト（点線）のデザイン --- */
.message-body .fwb {
    font-weight: bold;
    border-bottom: 2px dotted;
    padding-bottom: 1px;
    display: inline-block; /* 線が文字に近すぎるのを防ぐ */
    line-height: 1.2;
}

/* 作品ごとの色を点線にも適用 */
.page-oz .message-body .fwb        { color: #FFE82C; border-bottom-color: #FFE82C; }
.page-alice .message-body .fwb     { color: #ED2647; border-bottom-color: #ED2647; }
.page-jungle .message-body .fwb    { color: #009E5B; border-bottom-color: #009E5B; }
.page-sango .message-body .fwb     { color: #36D7E9; border-bottom-color: #36D7E9; }
.page-arashi .message-body .fwb    { color: #80E147; border-bottom-color: #80E147; }
.page-don .message-body .fwb       { color: #F58220; border-bottom-color: #F58220; }
.page-notredame .message-body .fwb { color: #CCAC00; border-bottom-color: #CCAC00; }
.page-dream .message-body .fwb     { color: #A239E6; border-bottom-color: #A239E6; }


/* ============================================================
   一般公演情報
   ============================================================ */
/* 次回公演セクション */
.next-performance {
}

.performance-flex {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.performance-image {
    flex: 0 0 40%; /* 画像の幅 */
}

.performance-image img {
    width: 100%;
    height: auto;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.performance-info {
    flex: 1;
}

.performance-name {
    font-size: 28px;
    color: #009E5B; /* ジャングルブックの色*/
    margin-bottom: 20px;
    font-weight: bold;
}

.info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

.info-table th, .info-table td {
    padding: 12px 0;
    border-bottom: 1px solid #444;
    text-align: left;
}

.info-table th {
    width: 80px;
	color: #aaa;
	font-weight: normal;
}

/* 予約開始日のテキスト */
.ticket-start-date {
    color: var(--pink);
    font-weight: bold;
    margin-bottom: 15px;
}

/* キャンセルなどの注釈 */
.cancel-note, .access, .note {
    font-size: 14px;
    color: #bbb;
    margin-top: 10px;
}

/* お問い合わせボックス */
.contact-box {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px dashed #555;
}


/* スマホ対応 */
@media screen and (max-width: 768px) {
    .performance-flex {
        flex-direction: column;
    }
    .performance-image {
        width: 100%;
    }
	
	/* チケットエリア内のボタンをスマホで微調整 */
    .ticket-box .c-btn-main {
        width: 90%;          /* 横幅を少し抑える */
        max-width: 300px;    
        margin: 0 auto;
        display: block;      /* 中央寄せにするためにブロック化 */
        padding: 10px 20px;   
        font-size: 14px;      
        line-height: 1.4;     /* 改行した時の行間を調整 */
    }
}

	
/* ============================================================
   アーカイブギャラリーセクション　※ひとまずシーン写真は出さない予定
   ============================================================ */

.archive-gallery-section {
    padding: 80px 0;
    background-color: var(--bg-black);
}

.archive-year-section {
    max-width: 900px;
    margin: 0 auto 100px; /* 下の間隔を少し広げて年次ごとの区切りを明確に */
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* タイトル周り */
.archive-summary {
    margin-bottom: 25px;
    text-align: left;
}

.archive-date {
    color: var(--pink);
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.archive-subtitle {
    /*display: block;*/
    font-size: 16px;
    font-weight: normal;
    color: #aaa;
    margin-bottom: 5px;
}

.archive-title {
    font-size: 32px;
    color: #fff;
    margin-top: 5px;
    font-weight: bold;
    line-height: 1.3;
}

/* --- メインの大きな写真（解像度対策で50%に） --- */
.archive-best-shot {
    width: 100%;
    margin-bottom: 30px;
}

.archive-best-shot img {
    width: 50%; /* PCでは50%のサイズにして画質を保つ */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: block; /* 中央寄せ用 */
    /* margin: 0 auto; */ /* もし中央寄せにしたい場合はこれを有効にしてください */
}

/* --- アコーディオンボタン --- */
.archive-details {
    margin-top: 20px;
}

.archive-summary-btn {
    display: inline-block;
    padding: 12px 35px;
    border: 1px solid var(--pink);
    color: var(--pink);
    cursor: pointer;
    border-radius: 30px;
    font-weight: bold;
    transition: all 0.3s ease;
    list-style: none;
}

.archive-summary-btn::-webkit-details-marker {
    display: none;
}

.archive-summary-btn:hover {
    background-color: var(--pink);
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 96, 159, 0.4);
}

/* テキストの切り替え */
.archive-details[open] .btn-text-closed { display: none; }
.archive-details:not([open]) .btn-text-opened { display: none; }

/* --- 写真グリッドレイアウト（展開時） --- */
.archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
    animation: fadeIn 0.5s ease;
}

.archive-item img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

.archive-item img:hover {
    transform: scale(1.05);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    .archive-subtitle {
        font-size: 14px;
    }
    .archive-title {
        font-size: 24px;
    }
    
    .archive-best-shot img {
        width: 100%;
    }

    .archive-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .archive-summary-btn {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}


/* ==========================================
   Recruit Page Styles
   ========================================== */

/* アイコン付きボックスの親 */
.recruit-box {
    background-color: #111;
    border: 1px solid #333;
    border-radius: 12px;
    margin-bottom: 40px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* ボックスのタイトルバー */
.recruit-sub-title {
    background: linear-gradient(90deg, #222, #111);
    color: #fff;
    padding: 18px 25px;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #333;
}

/* アイコンの色指定 */
.recruit-sub-title i {
    color: var(--pink); 
    font-size: 1.2em;
    filter: drop-shadow(0 0 5px rgba(255, 20, 147, 0.4));
}

/* ボックスの内側 */
.recruit-box-inner {
    padding: 35px 30px;
}

/* リスト・注釈 */
.u-list-dot {
    list-style: none;
    padding: 0;
}
.u-list-dot li::before {
    content: "・";
    color: var(--pink);
    margin-right: 5px;
}

.u-note {
    font-size: 13px;
    color: #888;
    margin-top: 10px;
    display: block;
}

.u-pink {
    color: var(--pink);
    text-decoration: none;
    font-weight: bold;
}


/* すべての recruit-box の上に余白を作る（ただし一番上の写真は除く） */
.about-section .recruit-box {
    margin-top: 20px;
}

/* グリッド調整 */
@media screen and (min-width: 769px) {
    .l-grid.--col2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

@media screen and (max-width: 768px) {
    .recruit-box-inner {
        padding: 25px 20px;
    }
    .recruit-sub-title {
        font-size: 16px;
        padding: 15px 20px;
    }
}


/* =================================================
    スクールページ（Yumedan Act Studio）
   ================================================= */
/* --- ヒーローエリア内のSNSアイコン微調整 --- */
.school-sns-custom {
    padding-left: 20px; /* タイトルの padding-left: 20px と揃える */
    margin-top: 10px;
}

/* --- 導入文セクション --- */
.school-intro {
    text-align: center;
}

/* メッセージの見出し（h2） */
.message-heading h2 {
    font-size: 32px;
    line-height: 1.5;
    margin-bottom: 40px;
    color: #fff;
}

/* 本文テキスト */
.school-intro-p {
    max-width: 800px;
    margin: 0 auto 2.5em;
    line-height: 2;
    color: #ccc;
    text-align: center;
}

/* ★「無料体験レッスン受付中」の強調スタイル */
.trial-highlight {
    display: inline-block;
    background: linear-gradient(transparent 60%, rgba(255, 96, 159, 0.3) 60%); /* ピンクのマーカー風 */
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    padding: 0 10px;
}

/* 3つの柱 */
.school-pillars {
    margin: 60px auto;
    padding: 40px;
    background-color: #262626;
    border-radius: 10px;
    max-width: 700px;
    text-align: center;
}

.school-pillars ul {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    display: inline-block; /* 箇条書きを中央に寄せる */
    text-align: left;
}

.school-pillars li {
    font-size: 20px;
    font-weight: bold;
    color: var(--pink);
    margin-bottom: 15px;
    position: relative;
}

.school-pillars li::before {
    content: "●";
    font-size: 14px;
    margin-right: 10px;
    vertical-align: middle;
}

.school-closing {
    font-weight: bold;
    color: #fff;
    font-size: 18px;
    margin: 0;
}

/* --- お問い合わせ・体験案内エリア --- */
.school-contact-guide {
	max-width: 800px;
    /*margin: 60px auto 0;*/
	margin: 0px auto 0;
    padding: 40px;
    border: 2px solid var(--pink);
    border-radius: 15px;
    background-color: rgba(255, 96, 159, 0.05); /* ほんのりピンク背景 */
    text-align: center;
}

/* 枠内の見出し */
.contact-title {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 20px;
    display: block;
}

.trial-text {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 15px;
}

.contact-info-list {
    font-size: 18px;
    line-height: 1.8;
}

.contact-info-list p {
    margin-bottom: 5px;
}

.contact-info-list i {
    color: var(--pink);
    margin-right: 8px;
    width: 20px;
    text-align: center;
}

.contact-info-list a {
    color: inherit;
    text-decoration: none;
}

.contact-info-list a:hover {
    text-decoration: underline;
}

/* スマホ対応（768px以下）*/
@media screen and (max-width: 768px) {
    /* ヒーローエリア */
    .school-sns-custom {
        padding-left: 10px;
        margin-top: 5px;
    }

    /* 見出し */
    .message-heading h2 {
        font-size: 24px;
    }

    /* 3つの柱 */
    .school-pillars {
        padding: 30px 20px;
        margin: 40px auto;
    }

    .school-pillars li {
        font-size: 17px;
    }

    .school-closing {
        font-size: 15px;
    }

    /* お問い合わせ */
    .school-contact-guide {
        padding: 30px 20px;
    }
	

    .contact-info-list {
        font-size: 16px;
    }
	
	.trial-highlight {
        font-size: 18px;
    }
    .school-contact-guide {
        width: 90%; /* スマホでは画面端に寄りすぎないよう調整 */
        padding: 30px 20px;
    }
    .contact-title {
        font-size: 17px;
    }
	
}


/* --- スケジュールセクション --- */
.schedule-box {
    margin-bottom: 40px;
    background-color: #262626;
    border-radius: 10px;
    overflow: hidden;
}

.schedule-day-title {
    background-color: #333;
    color: #fff;
    padding: 15px 25px;
    font-size: 18px;
    font-weight: bold;
    border-left: 4px solid var(--pink); /* リクルート風のアクセント */
}

.schedule-day-title i {
    color: var(--pink);
    margin-right: 10px;
}

.schedule-table-wrapper {
    padding: 10px 20px;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
}

.schedule-table tr {
    border-bottom: 1px solid #444;
}

.schedule-table tr:last-child {
    border-bottom: none;
}

.schedule-table th, 
.schedule-table td {
    padding: 15px 10px;
    text-align: left;
    font-size: 15px;
}

.schedule-table th {
    width: 160px; /* 時間部分の幅を固定 */
    color: var(--pink);
    font-weight: bold;
    white-space: nowrap;
}

.schedule-table td {
    color: #fff;
    line-height: 1.5;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .schedule-table th {
        width: 100px;
        font-size: 13px;
    }
    .schedule-table td {
        font-size: 13px;
    }
    .schedule-day-title {
        font-size: 16px;
        padding: 12px 15px;
    }
}



/* クラス紹介テーブル独自の調整 */

.class-intro-table th {
    font-size: 18px; /* 20pxだと長い名称が入りきらない場合があるため微調整 */
    line-height: 1.3;
}

.class-intro-table td span {
    margin-top: 10px;
    background-color: rgba(255, 96, 159, 0.1); /* 補足説明に薄いピンクの背景 */
    display: inline-block; /* 横幅を内容に合わせる */
    padding: 2px 10px;
    border-radius: 4px;
    color: var(--pink); /* 文字色をピンクにして目立たせる */
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
	
	.class-intro-table tr {
        display: block;
        padding: 25px 0; /* 上下の余白で区切る */
        border-bottom: 1px solid #333; /* 線のみで区切る */
        background: none !important; 
    }
	
	.class-intro-table tr:last-child {
        border-bottom: none;
    }
	
   .class-intro-table th {
        display: block;
        width: 100% !important;
        padding: 0 0 10px 0 !important; /* 下にだけ余白をあける */
        background: none !important;
        color: var(--pink);
        font-size: 18px;
        text-align: left;
        border: none !important;
    }
	
	.class-intro-table td {
        display: block;
        width: 100% !important;
        padding: 0 !important;
        color: #ccc;
        font-size: 15px;
        line-height: 1.7;
    }
    
   .class-intro-table td span {
        display: inline-block;
        margin-top: 10px;
        padding: 2px 8px;
        background-color: rgba(255, 96, 159, 0.1);
        border-radius: 4px;
        font-size: 13px;
    }
}

/* --- 講師紹介セクション（写真ありVer.） --- */
.instructor-box.--has-img {
    max-width: 900px; 
    margin: 50px auto 0;
    background-color: #262626;
    padding: 50px; 
    border-radius: 15px;
    border: 1px solid #333;
    
    /* フレックスボックスで横並びに */
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 上揃え */
    gap: 40px; 
}

/* 左側：テキストエリア */
.instructor-text-content {
    flex: 1; /* 残りの幅をすべて使う */
}

.instructor-header-simple {
    margin-bottom: 25px;
    border-bottom: 1px solid #444;
    padding-bottom: 15px;
}

.instructor-header-simple .role {
    font-size: 14px;
    color: var(--pink);
    font-weight: bold;
    margin-bottom: 5px;
}

.instructor-header-simple h3 {
    font-size: 26px;
    color: #fff;
    margin: 0;
}

.instructor-header-simple h3 .en {
    font-size: 14px;
    font-weight: normal;
    color: #888;
    margin-left: 10px;
}

.instructor-body p {
    color: #ccc;
    line-height: 1.8;
    margin-bottom: 1.5em;
    font-size: 15px;
}

.instructor-body p:last-child {
    margin-bottom: 0;
}

/* 右側：写真エリア */
.instructor-img-area {
    width: 250px; /* 写真の幅を固定 */
    flex-shrink: 0; 
}

.instructor-img-area img {
    width: 100%;
    height: auto;
    border-radius: 10px; /* 写真自体も少し角を丸く */
    border: 3px solid #333; /* 写真に枠をつけて引き締める */
    object-fit: cover;
}

/*スマホ対応（768px以下） */
@media screen and (max-width: 768px) {
    .instructor-box.--has-img {
        padding: 30px 20px;
        flex-direction: column-reverse; /* スマホでは「写真→テキスト」の順に縦並び */
        gap: 20px;
    }

    .instructor-img-area {
        width: 100%; /* スマホでは写真は横いっぱいに */
        max-width: 200px;
        margin: 0 auto; /* 中央寄せ */
    }
    
    .instructor-header-simple {
        text-align: center;
    }
    
    .instructor-header-simple h3 {
        font-size: 20px;
    }
}

/* --- イベントセクション --- */
.event-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.event-card {
    background-color: #262626;
    padding: 35px;
    border-radius: 15px;
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
}

.event-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #444;
}

.event-card-header i {
    font-size: 24px;
    color: var(--pink);
}

.event-card-header h3 {
    font-size: 22px;
    color: #fff;
    margin: 0;
}

.event-card-body p {
    color: #ccc;
    line-height: 1.8;
    margin-bottom: 1.5em;
    font-size: 15px;
}

/* 注釈（※）部分のスタイル */
.event-notes {
    list-style: none;
    padding: 0;
    margin-top: auto; /* 下に揃える */
}

.event-notes li {
    font-size: 13px;
    color: #888;
    line-height: 1.6;
    text-indent: -1em;
    padding-left: 1em;
}

.event-notes li::before {
    content: "※";
    margin-right: 4px;
}

.u-underline {
    text-decoration: underline !important;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .event-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .event-card {
        padding: 25px;
    }
    .event-card-header h3 {
        font-size: 20px;
    }
}