/*
Theme Name: My Original Theme
Theme URI: (テーマのURL)
Author: (制作者名)
Author URI: (制作者のURL)
Description: WordPressオリジナルテーマ
Version: 1.0.4
*/

/* --- 基本リセットと共通スタイル --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background: #fff;
    color: #333;
}
main {
    /* フッター高に応じて調整（フッターがフワフワ浮かないように） */
    min-height: calc(100vh - 100px); 
}
a {
    color: #007bff;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
img {
    max-width: 100%;
    height: auto;
}
.page-container {
    padding-top: 10px;
    padding-bottom: 40px;
}
.page-title {
    text-align: center;
    font-size: 2.2em;
    margin-bottom: 40px;
}
.page-container-yose-b .page-title{
    margin-bottom: 20px;
}
.content-center {
    text-align: center;
}

.bg-brown{
    background:#462006;
    color:white;
}
.udp-mincho{
    font-family: 'BIZ UDPMincho', serif;
    font-weight:400 !important;
}

/* --- ヘッダー（PC用 2段構成） --- */
.header {
    background: #fff;
    border-bottom: 1px solid #ddd;
    position: fixed;
    width:100%;
    top:0;
    z-index: 100;
}
.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
@media (max-width: 768px) {
    .header-inner {
        display: none; /* スマホではPC用ヘッダーを非表示 */
    }
.page-container-yose-b .page-title{
    margin-bottom: 10px;
}
}

/* ヘッダー1段目 (ロゴ + SNS) */
.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

/* ヘッダーロゴ */
.header-logo {
    flex-shrink: 0; 
}
.header-logo .site-title {
    margin: 0;
    font-size: 1.5em;
}
.header-logo .site-title a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
}
.header-logo img {
    max-height: 40px; /* 1段目なので少し高さを抑える（仮） */
    width: auto;
    display: block;
}

/* ヘッダーSNS (PC) */
.header-sns {
    display: flex;
    align-items: center;
    gap: 15px;
}
.header-sns a {
    color: #555;
    font-size: 1.3em; /* アイコンサイズ */
    text-decoration: none;
    transition: color 0.2s, opacity 0.2s;
}
.header-sns a:hover {
    color: #000;
}

/* ヘッダー2段目 (ナビ + ボタン) */
.header-bottom {
    display: flex;
    justify-content: center; /* [修正] 会社概要ボタン削除のため、中央揃えに変更 */
    align-items: center;
    padding: 10px 0;
}

/* ヘッダーナビゲーション（PC） */
.header-nav {
    flex-grow: 1; /* スペースを埋める */
    width: 100%; /* [追加] メニューを広げるため */
}
.header-nav .header-menu-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-around; /* [修正] 会社概要ボタン削除のため、均等配置 */
}
.header-nav .header-menu-list li {
    margin-right: 0; /* [修正] space-aroundを使うためリセット */
}
.header-nav .header-menu-list a {
    color: #333;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95em;
    padding: 5px 0;
    position: relative;
}
.header-nav .header-menu-list a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #007bff;
    transition: width 0.3s;
}
.header-nav .header-menu-list a:hover::after,
.header-nav .header-menu-list .current-menu-item a::after {
    width: 100%;
}
.footer-inner .header-menu-list{
    justify-content: center;
    margin-bottom:20px;
    gap:15px;
}
.footer-inner .header-menu-list a{
    color:white;
}
/* [修正] 会社概要ボタン（PC）のスタイルを削除 */
/* .header-company-link a { ... } */


/* --- スマホ用ヘッダー --- */
.mobile-header-area {
    display: none; /* PCでは非表示 */
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    justify-content: space-between;
    align-items: center;
}
@media (max-width: 768px) {
    .mobile-header-area {
        display: flex;
        position:fixed;
        top:0;
        width:100%;
        background-color:white;
        padding:0;
        height: 60px;
    }
    .footer-inner .header-menu-list{
        display:block;
    }
}
.mobile-logo .site-title {
    margin: 0;
    font-size: 1.3em;
}
.mobile-logo .site-title a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
    font-size:16px;
}
.mobile-logo img {
    max-height: 40px;
    width: auto;
    display: block;
}

/* ハンバーガーボタン（スマホ用） */
.hamburger-button {
    display: none; /* PCでは非表示 */
    background: none;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 102;
    position: relative;
}
@media (max-width: 768px) {
    .hamburger-button {
        display: block;
    }
    .mobile-logo{
        padding-left:10px;
    }
}
.hamburger-bar {
    display: block;
    width: 25px;
    height: 3px;
    background: #333;
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}
/* ハンバーガーボタン X印への変形 (JSで .is-active を付与) */
.hamburger-button.is-active .hamburger-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger-button.is-active .hamburger-bar:nth-child(2) {
    opacity: 0;
}
.hamburger-button.is-active .hamburger-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* スライドメニュー（スマホ用） */
.mobile-menu {
    display: none;
    position: absolute;
    top: 61px; /* スマホヘッダーの高さ（仮）に合わせる */
    left: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid #ddd;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    z-index: 99;
    padding: 20px;
    box-sizing: border-box; /* paddingを含めて100% */
}
/* JSで .is-active を付与して表示 */
.mobile-menu.is-active {
    display: block;
}
.mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mobile-menu-list li {
    border-bottom: 1px solid #f0f0f0;
}
.mobile-menu-list a {
    display: block;
    padding: 12px 10px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
}
/* [修正] 会社概要ボタン（スマホ）のスタイルを削除 */
/* .mobile-company-link { ... } */

/* SNSリンク (モバイル) */
.mobile-sns {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: center;
    gap: 20px;
}
.mobile-sns a {
    color: #555;
    font-size: 1.6em; /* アイコンサイズ（モバイル） */
    text-decoration: none;
    transition: opacity 0.2s;
}


/* --- ヘッダー子メニュー（ドロップダウン）--- */

/* PC用ドロップダウン */
.header-nav .header-menu-list li {
    position: relative; /* 子メニューの基準点 */
}
.header-nav .sub-menu {
    display: none; /* 通常は非表示 */
    position: absolute;
    top: 100%; /* 親の真下に表示 */
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    padding: 10px 0;
    margin: 0;
    list-style: none;
    min-width: 210px; /* ドロップダウンの最小幅 */
    z-index: 101;
}
.header-nav li:hover > .sub-menu {
    display: block; /* ホバーで表示 */
}
.header-nav .sub-menu li {
    margin-right: 0;
    width: 100%;
}
.header-nav .sub-menu a {
    display: block;
    padding: 8px 15px;
    font-size: 0.9em;
    width: 100%;
    box-sizing: border-box;
}
.header-nav .sub-menu a:hover {
    background: #f5f5f5;
    text-decoration: none;
}
.header-nav .sub-menu a::after {
    display: none; /* 子メニューのaタグには下線アニメーション不要 */
}

/* スマホ用アコーディオン（開閉ボタン） */
.mobile-menu-list .menu-item-has-children {
    position: relative; /* トグルボタンの基準点 */
}
.mobile-menu-toggle {
    position: absolute;
    right: 0;
    top: 0;
    width: 44px; /* タッチしやすいサイズ */
    height: 44px; /* 12px(padding) + 20px(line-height) + 12px(padding) */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* トグルボタンの「＋」マーク */
.mobile-menu-toggle::before {
    content: '+';
    font-size: 1.2em;
    color: #888;
}
/* 開いている時の「－」マーク */
.mobile-menu-toggle.is-open::before {
    content: '–';
}
/* スマホ用サブメニュー（JSで開閉するまで非表示） */
.mobile-menu-list .sub-menu {
    display: none;
    background: #f9f9f9;
    padding-left: 15px; /* インデント */
    margin: 0;
    list-style: none;
}
.mobile-menu-list .sub-menu li {
    border-bottom: 1px solid #eee;
}
.mobile-menu-list .sub-menu li:last-child {
    border-bottom: none;
}
.mobile-menu-list .sub-menu a {
    padding: 10px 10px 10px 0;
    font-size: 0.9em;
}

@media screen and (max-width:768px){
    .mobile-menu{
        position:fixed;
    }
}


/* --- フッター --- */
.footer {
    background: #333;
    color: #eee;
    padding: 30px 20px;
    text-align: center;
}
.footer a {
    color: #fff;
}
.copyright {
    margin-top: 20px;
    font-size: 0.9em;
}
/* フッター連絡先スタイル */
.footer-contact-info p {
    margin: 5px 0;
    font-size: 0.9em;
}


/* --- 全ページ共通：固定お問い合わせボタン (PCのみ) --- */
/* [修正] デザインと位置を変更 */
.fixed-contact-button {
    position: fixed;
    right: 0; /* [修正] 右端に配置 */
    top: auto;
    bottom: 10%;
    transform: translateY(-50%); /* [修正] 上下中央揃え */
    background: #fdd100; /* [修正] 添付画像に近い黄色 */
    color: #000000; /* [修正] 黒文字 */
    padding: 25px 10px; /* [修正] 縦長のパディング */
    border-radius: 20px 0 0 20px; /* [修正] 左側のみ角丸 */
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 1000;
    transition: all 0.2s ease-out;
    writing-mode: vertical-rl; /* [新設] 縦書き */
    display: flex; /* [新設] アイコンとテキストを並べる */
/* flex-direction: column; */
    align-items: center; /* [新設] 中央揃え */
    gap: 15px; /* [新設] アイコンとテキストの間隔 */
    letter-spacing: 2px; /* [新設] 文字間隔 */
}
.fixed-contact-button:hover {
    text-decoration: none;
    transform: translateY(-50%) translateX(-3px); /* [修正] ホバー時の動き */
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}
/* [新設] ボタン内のアイコン */
.fixed-contact-button-icon {
    font-size: 1.5em; /* アイコンサイズ */
    line-height: 1;
}
.fixed-contact-button-icon-bottom {
    font-size: 1.3em; /* 下の矢印は少し小さく */
}
/* [新設] ボタン内のテキスト */
.fixed-contact-button-text {
    font-size: 1.1em;
}

@media (max-width: 768px) {
    .fixed-contact-button {
        /* [修正] スマホでも表示する (display: none; を削除) */
        /* display: none; */ 
        /* [新設] スマホ用に少し小さくする */
        padding: 20px 8px;
        gap: 12px;
        font-size: 0.9em;
    }
    .fixed-contact-button-icon {
        font-size: 1.3em;
    }
    .fixed-contact-button-icon-bottom {
        font-size: 1.1em;
    }
}


/* --- トップページ (front-page.php) --- */

/*
 * ↓↓ [修正] FV (imgタグ方式) ↓↓
 */
.fv-section {
    position: relative; /* テキストを重ねるための基準点 */
    width: 100%;
    line-height: 0; /* imgタグ下の余白削除 */
}
.fv-bg-image {
    width: 100%; /* 横幅を100%に */
    height: auto; /* 縦横比を維持 */
    display: block;
}
.fv-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
/* background: rgba(255, 255, 255, 0.4); */
    z-index: 1;
}
.fv-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding: 20px;
    color: white;
    text-align: center;
    line-height: 1.4; /* テキストの行間をリセット */
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.fv-content h2 {
    font-size: 4em;
    margin: 0;
    text-shadow: 3px 3px 0 #000, -3px 3px 0 #000, 3px -3px 0 #000, -3px -3px 0 #000, 0px 3px 0 #000, 3px 0px 0 #000, 0px -3px 0 #000, -3px 0px 0 #000;
    background-color: rgba(255, 255, 255, 0.4); 
}
.fv-content p {
    font-size: 2em;
    margin: 10px 0 0;
    text-shadow:
        2px 2px 0 #ff69b4,
        -2px 2px 0 #ff69b4,
        2px -2px 0 #ff69b4,
        -2px -2px 0 #ff69b4,
        0px 2px 0 #ff69b4,
        2px 0px 0 #ff69b4,
        0px -2px 0 #ff69b4,
        -2px 0px 0 #ff69b4;
    background-color: rgba(255, 255, 255, 0.4); 
}
@media (max-width: 768px) {
    .fv-content h2 {
        font-size: 1.8em;
    }
    .fv-content p {
        font-size: 1.0em;
    }
    .fv-bg-image{
        height:100%;
        object-fit:cover;
    }
.fv-section {
    height:50vh;
}
}


/*
 * ↓↓ [修正] section-2 のスタイル ↓↓
 */
.section-2-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
/* background: rgba(255, 255, 255, 0.1); */
    padding: 30px;
    border-radius: 8px;
}
.section-2-content h2 {
    font-size: 2em;
    margin-top: 0;
    margin-bottom: 25px;
}
.section-2-content p {
    font-size: 1.05em;
    line-height: 1.8;
    text-align: left;
    margin-bottom: 20px;
}

/*
 * ↓↓ [修正] section-company-white のスタイル (2列構成版) ↓↓
 */
.section-company-white {
    background-color: #fff;
    padding: 80px 20px;
    color: #333;
}

/* セクションタイトル */
.company-section-title {
    font-size: 1.8em;
    margin-bottom: 40px;
    display: inline-block;
    border-bottom: 2px solid #543C23; /* セクション3と合わせた配色 */
    padding-bottom: 10px;
    color: #543C23;
    text-align: center;
    width: 100%; /* 中央寄せのために幅指定 */
}

/* 2列レイアウトのラッパー */
.company-grid-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 上揃え */
    gap: 40px;
    max-width: 1000px; /* 全体の幅を制限 */
    margin: 0 auto;
}

/* 左カラム：情報 */
.company-info-col {
    width: 48%; /* 半分弱 */
}

/* 説明テキスト */
.company-desc-text {
    font-size: 0.95em;
    margin-bottom: 20px;
    text-align: left;
    line-height: 1.8;
}

/* 会社概要テーブル */
.company-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
    text-align: left;
}
.company-table th,
.company-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #ddd;
    line-height: 1.6;
}
.company-table th {
    width: 30%;
    background-color: #f7f7f7;
    font-weight: bold;
    color: #543C23;
    white-space: nowrap; /* 項目名の折り返し防止 */
}
.company-table tr:first-child th,
.company-table tr:first-child td {
    border-top: 1px solid #ddd;
}

/* 右カラム：マップ */
.company-map-col {
    width: 48%; /* 半分弱 */
}

/* マップのレスポンシブコンテナ */
.map-container {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* アスペクト比 4:3 */
    height: 0;
    overflow: hidden;
    border: 1px solid #ddd;
}
.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* スマホ対応 (768px以下) */
@media (max-width: 768px) {
    .section-company-white {
        padding: 50px 20px;
    }
    .company-grid-layout {
        flex-direction: column; /* 縦並びにする */
        gap: 30px;
    }
    .company-info-col,
    .company-map-col {
        width: 100%;
    }
    .company-table th {
        width: auto; /* スマホでは幅をなりゆきに */
        white-space: normal;
    }
    /* スマホではマップの高さを固定気味にする */
    .map-container {
        padding-bottom: 60%; 
    }
}


/*
 * ↓↓ [修正] section-3 のスタイル ↓↓
 */
.section-3 .box-grid {
    /* [削除] grid-template-columns: 1fr 1fr; */
    /* [削除] gap: 30px; */
    /* [削除] margin-bottom: 50px; */
    /* このセレクタ自体不要になるが、安全のために残す（影響はほぼない） */
    display: block;
    margin-bottom: 0;
}
@media (max-width: 768px) {
    .section-3 .box-grid {
        grid-template-columns: 1fr; /* スマホでは1列 */
    }
    .section-2-content h2{
        font-size:1.5em;
    }
}

.section-content-box {
/* background: rgba(255, 255, 255, 0.9); */
    color: #543C23;
    font-weight:bold;
    padding: 25px;
    border-radius: 8px;
    /* [新設] 縦積みのためのマージン */
    margin-bottom: 40px;
}
/* [新設] 最後のボックスのマージンをリセット */
.section-3 .section-inner > *:last-child {
    margin-bottom: 0;
}

.section-box-title {
    font-size: 1.5em;
    margin-top: 0;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 20px; /* [追加] pタグとのマージン確保 */
    text-align:center;
}
.section-3 .section-box-title {
    border-bottom: 2px solid #543C23;
}
.section-3 .section-box-title.text-blue2{
    border-bottom:none;
}
.section-box-performers, .section-box-company{
    text-align:center;
}

/* * ↓↓ [修正] section-3に統合されたチラシグリッド ↓↓
 * (背景画像の上に乗るバージョン)
 */
.flyer-wrapper-on-bg {
    /* [修正] margin-top: 60px; */
    margin-top: 0;
    margin-bottom: 40px; /* [追加] 次のセクションとのマージン */
}
.section-title-light {
    text-align: center;
    font-size: 2em;
    color: #fff; /* 白文字 */
    margin-bottom: 30px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.flyer-grid {
    /* [削除] display: grid; */
    /* [削除] grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); */
    /* [削除] gap: 20px; */
    /* このセレクタは不要になった */
}
@media (max-width: 768px) {
    .flyer-grid {
        /* [削除] grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); */
        /* [削除] gap: 15px; */
    }
}
.flyer-item img {
    /* [削除] width: 100%; */
    /* [削除] height: auto; */
    /* [削除] border-radius: 5px; */
    /* [削除] box-shadow: 0 4px 10px rgba(0,0,0,0.1); */
    /* このセレクタは不要になった */
}

/* [新設] チラシ1枚画像ラッパー */
.flyer-image-wrapper {
    text-align: center;
}
.flyer-image {
    width: 100%;
    max-width: 1000px; /* [調整可] PCでの最大幅 */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.flyer-pc {
    display: block; /* PCで表示 */
    margin:0 auto;
}
.flyer-sp {
    display: none; /* SPで非表示 */
}
@media (max-width: 768px) {
    .flyer-pc {
        display: none; /* PCで非表示 */
    }
    .flyer-sp {
        display: block; /* SPで表示 */
    }
}


/* * ↓↓ [新設] SNS埋め込みセクション (トップページ) ↓↓
 */
.sns-feed-section {
    background: #f9f9f9;
    padding: 60px 20px;
}
.sns-feed-section .section-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
@media (max-width: 768px) {
    .sns-feed-section .section-inner {
        grid-template-columns: 1fr; /* スマホでは1列 */
    }
}
.sns-feed-title {
    text-align: center;
    font-size: 1.8em;
    margin-bottom: 25px;
}
.sns-feed-content {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px; /* 20pxだとiframeとの隙間が広すぎる場合があるため調整 */
    min-height: 400px;
    /* --- 追加 --- */
    display: flex;
    justify-content: center; /* 中身を中央へ */
    overflow: hidden; /* 枠からはみ出さないように */
	    height: calc(100% - 2rem - 50px);
}

/* 埋め込まれたタイムライン自体の幅を100%にする */
.twitter-timeline {
    width: 100% !important;
}


/* 背景画像セクション（section-2, section-3で共通利用） */
.bg-image-section {
    position: relative;
    padding: 100px 20px;
    /* ↓↓ 共通のプロパティ ↓↓ */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed; /* パララックス（視差効果）風 */
    color: white;
}
.bg-image-section .section-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* ↓↓ セクション2（新仕様）の背景画像を指定 ↓↓ */
.section-2.bg-image-section {
/* background-image: url('images/top-sec2-bg.png'); */
/* background-image: url('http://isy.tight-planning.co.jp/wp-content/uploads/2025/12/2-2.png'); */
    background-image: url('http://isy.tight-planning.co.jp/wp-content/uploads/2025/12/ドラムス＆屏風-1-1.png');
}

/* ↓↓ セクション3の背景画像を指定 ↓↓ */
.section-3.bg-image-section {
    background-image: url('images/top-sec3-bg.png');
}

.section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
/* background: rgba(0, 0, 0, 0.3); */
}
.section-2.bg-image-section .section-overlay {
background: rgba(0, 0, 0, 0.3);
}


/* --- 音楽鑑賞会・古典芸能鑑賞会 ボタン --- */
/* (page-music.php では使われなくなったため、page-classical.php でのスタイルに変更) */
.page-template-page-classical .button-grid-wrapper {
    margin-top: 50px;
}
.page-template-page-classical .button-grid-8,
.page-template-page-classical .button-grid-6 {
    display: grid;
    gap: 20px;
}
/* PC・タブレット (769px以上) */
@media (min-width: 769px) {
    .page-template-page-classical .button-grid-8 {
        grid-template-columns: repeat(4, 1fr); /* PCでは4列 */
    }
    .page-template-page-classical .button-grid-6 {
        grid-template-columns: repeat(3, 1fr); /* PCでは3列 */
    }
}
/* スマホ (～768px) */
@media (max-width: 768px) {
    .page-template-page-classical .button-grid-8,
    .page-template-page-classical .button-grid-6 {
        grid-template-columns: repeat(2, 1fr); /* スマホでは2列 */
    }
	.sns-feed-content {
   height: auto;
}
}
.ctf-out-of-tweets{
	display:none !important;
}

/* (page-music.php では使われなくなったため、page-classical.php でのスタイルに変更) */
.page-template-page-classical .child-page-button {
    display: block;
    padding: 30px 15px;
/* background: #f0f0f0; */
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.page-template-page-classical .child-page-button:hover {
    background: #e9e9e9;
    transform: translateY(-2px);
    text-decoration: none;
}

/*
 * [修正] 古典芸能鑑賞会ページ用のスタイル（背景画像・ボタン）
 */

/* 古典芸能鑑賞会ページ (page-classical.php) の body タグにのみ適用 */
body.page-template-page-classical main {
    /* * [修正] ご要望に基づき、'contain' (画像全体を表示) に設定 
     * 背景固定(fixed)は解除
     */
    background-image: url('images/classical-bg3.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain; /* 画像全体が収まるように表示 */
    background-attachment: scroll; /* スクロールに追従 */
    background-color: #333; /* 'contain' で発生する余白の色 */
}

/* 古典芸能鑑賞会ページの中央コンテンツラッパー */
.page-template-page-classical .page-content-wrapper {
    max-width: 600px; /* 人物の間に収まるよう幅を調整（仮） */
    margin: 0px auto;
/* padding: 30px; */
/* background: rgba(255, 255, 255, 0.9); */
    border-radius: 8px;
/* box-shadow: 0 4px 15px rgba(0,0,0,0.1); */
    position: absolute;
    bottom: 0;
    left: calc(50% - 165px);
}
.page-container-yose-b .page-content-wrapper {
    max-width:1200px;
}

/*
 * 古典芸能鑑賞会 (page-classical.php) のボタンレイアウト
 * [修正] 2列, 2列, 1列, 1列のレイアウト
 */
.classical-button-grid {
    display: grid;
    gap: 5px;
    /* PC・スマホ共通でこのレイアウトを適用 */
    grid-template-columns: 1fr 1fr; /* 常に2列 */
    grid-template-areas: 
        "yose-a-wapper    yose-b-wapper"
        "kyogen-wapper    kosui-wapper"
        "fukui-wapper   kabuki-wapper" /* 1列のボタン (2列分結合) */
        "zatsugi-wapper  zatsugi-wapper"; /* 1列のボタン (2列分結合) */
}
/* 各ボタンを対応するエリアに配置 */
.grid-area-yose-a { grid-area: yose-a-wapper; }
.grid-area-yose-b { grid-area: yose-b-wapper; }
.grid-area-kyogen { grid-area: kyogen-wapper; }
.grid-area-kosui { grid-area: kosui-wapper; }
.grid-area-fukui { grid-area: fukui-wapper; }
.grid-area-kabuki { grid-area: kabuki-wapper; }
.grid-area-zatsugi { grid-area: zatsugi-wapper; }


/*
 * 古典芸能鑑賞会 (page-classical.php) のボタン装飾
 * [修正] 和風の装飾
 */
.page-template-page-classical .child-page-button {
    display: block;
    padding: 10px 10px;
    border: 2px solid #555;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 0px #777; /* 影で立体感 */
    font-size: 1.1em;
    min-width:150px;
}
.page-template-page-classical .child-page-button:hover {
    transform: translateY(2px); /* 少し沈む */
    box-shadow: 0 2px 0px #777;
    text-decoration: none;
}
/* ボタン個別の色 */
.btn-yose-a, .btn-yose-b { background: linear-gradient(145deg, #ffd79c, #ffc76f); border-color: #e6a74b; } /* 橙系 */
.btn-kyogen, .btn-kosui { background: linear-gradient(145deg, #a7d8ff, #8ac0ff); border-color: #6a9ed1; } /* 青系 */
.btn-fukui, .btn-kabuki { background: linear-gradient(145deg, #b2f2bb, #9be8a6); border-color: #7abf83; } /* 緑系 */
.btn-zatsugi{ background: linear-gradient(145deg, #f0b8f0, #e0a0e0); border-color: #c481c4; } /* 紫系 */

/* --- 1. 縦棒（掛け軸）のスタイル --- */
.yose-wrapper {
  /* 縦棒を中央に配置するため */
  display: flex;
  justify-content: center;
  padding: 20px 0; /* ボタンの上下に余白を持たせる */

  /* 疑似要素(::before)を配置する基準点 */
  position: relative; 
    
  /* (お好みで) ラッパーを中央揃えにする */
  width: fit-content; /* 中身の幅に合わせる */
  margin: 0 auto; 
}

.yose-wrapper::before {
  content: '';
  position: absolute;
    
  /* 縦棒のデザイン */
/* width: 15px;
  height: 100%; 
  background-color: #4A3B3B;  */
    
  /* 縦棒を中央に配置 */
  left: 50%;
  transform: translateX(-50%);
    
  /* 棒をボタンの「後ろ」に配置する */
  z-index: 1; 
}


/* --- 2. ボタン本体 (.btn-yose-a) のスタイル --- */
.yose-wrapper-btn {
  /* 疑似要素(::before, ::after)を配置する基準点 */
  position: relative; 
  /* 縦棒(z-index: 1)の「上」に配置する */
  z-index: 2; 

  /* ボタンの基本デザイン */
  display: inline-block;
  background-color: #E87A7A; /* 画像に近い赤色 */
  color: #4A3B3B; /* 濃い茶色の文字 */
  font-weight: bold;
  text-decoration: none;
  font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    
  /* サイズや余白は元のデザインに合わせて調整してください */
  font-size: 18px;
  /* 左右はピン(10px) + 文字の余白(30px) = 40px ほど確保 */
  padding: 10px 40px; 
}


/* --- 3. 両端の「留め具（ピン）」のスタイル --- */
.yose-wrapper-btn::before,
.yose-wrapper-btn::after {
  content: '';
  position: absolute;

  /* ピンのサイズ */
  width: 12px;
  height: 12px;
    
  /* ピンの形状（円形） */
  border-radius: 50%;
    
  /* ピンの色（グラデーションで上下半分に） */
  background: linear-gradient(
    180deg, 
    #D16969 50%, /* 上半分：ボタンより少し濃い赤 */
    #FFFFFF 50%  /* 下半分：白 */
  );
    
  /* ピンの枠線 */
  border: 1px solid #4A3B3B;
    
  /* ピンをボタンの上端に半分重なるように配置 */
  top: -7px; /* (ピンの高さ 12px + 枠線 2px) / 2 = 7px */
}

/* 左側のピンの位置 */
.yose-wrapper-btn::before {
  left: 10px; /* ボタンの左端から10px */
}

/* 右側のピンの位置 */
.yose-wrapper-btn::after {
  right: 10px; /* ボタンの右端から10px */
}

/* --- お好み寄席（A/B）出演者カード --- */
.performer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}
.performer-card {
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    overflow: hidden; /* 画像の角丸を効かせるため */
}
.performer-card img {
    width: 100%;
    height: auto;
    display: block;
}
.performer-info {
    padding: 20px;
}
.performer-name {
    margin-top: 0;
    font-size: 1.3em;
}
.performer-bio {
    font-size: 0.95em;
    line-height: 1.7;
}

/*
 * ↓↓ [修正] お好み寄席 A/B ページ共通 (performer-grid) ↓↓
 * 元の .performer-grid は auto-fit だったが、
 * A/Bページではグリッド数を固定したいので、上書きする。
 */
@media (min-width: 769px) {
    /* PC (769px以上) */
    .page-template-page-yose-a .performer-grid {
        grid-template-columns: repeat(4, 1fr); /* [修正] PCでは4列固定 */
    }
    .page-template-page-yose-b .performer-grid {
        grid-template-columns: repeat(3, 1fr); /* [修正] PCでは3列固定 (Bは3名のため) */
    }
}
@media (max-width: 768px) {
    /* スマホ (768px以下) */
    .page-template-page-yose-a .performer-grid,
    .page-template-page-yose-b .performer-grid {
        grid-template-columns: repeat(2, 1fr); /* [修正] スマホでは2列 */
    }
    .page-template-page-classical .page-content-wrapper{
        position:relative;
        left:auto;
        margin-top: calc(1350 * 100vw / 1925);
    }
}

/*
 * ↓↓ [修正] お好み寄席 A ページ (performer-info) ↓↓
 * プロフィール(bio)を削除したため、名前を中央揃えにする
 */
.page-template-page-yose-a .performer-info {
    /* [修正] デザイン変更に伴い、中央揃えを解除 */
    /* text-align: center; */
    text-align: left;
    /* padding: 15px; */ /* [修正] パディングをリセット */
    padding: 0;
}
.page-template-page-yose-a .performer-name {
    /* font-size: 1.1em; */ /* [修正] スタイル変更 */
    /* margin: 0; */
    font-size: 1.2em;
    margin: 0;
    padding-bottom: 5px;
    border-bottom: 2px solid #ddd;
    font-weight: bold;
}

/* [新設] お好み寄席 A ページのデザイン調整 */
.page-template-page-yose-a .section-subtitle {
    text-align: right;
    font-size: 1.2em;
    margin-bottom: 20px;
    font-weight: 500;
    color: #333;
}

.page-template-page-yose-a .performer-grid {
    gap: 40px 20px; /* [修正] 行間を少し広げる */
}

.page-template-page-yose-a .performer-card {
    /* [修正] カードの装飾をリセット */
    border: none;
    box-shadow: none;
    overflow: visible;
}
.page-template-page-yose-a .performer-card img {
    margin-top: 10px; /* [追加] 名前と画像の間にマージン */
}

/* [修正] .performer-bio のスタイルを .page-template-page-yose-a にも適用 */
.page-template-page-yose-a .performer-bio {
    font-size: 0.85em; /* [修正] デザインに合わせ少し小さく */
    line-height: 1.6;
    margin-top: 10px;
    color: #333;
}


/* [新設] お好み寄席 A ページ 補足テキスト */
.yose-a-footer-note {
    text-align: center;
    font-size: 0.95em;
    margin: 40px 0;
    padding: 20px;
    background: #a04b9d61;
    border-radius: 8px;
}
.yose-a-footer-note p {
    margin: 0;
}
.yose-a-footer-note .br-sp {
    display: none; /* PCでは改行しない */
}
@media (max-width: 768px) {
    .yose-a-footer-note .br-sp {
        display: block; /* スマホでのみ改行 */
    }
}


/* --- お好み寄席（A/B）番組例スタイル --- */
/* (page-yose-b.php で引き続き使用されるため、残します) */
.program-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    background: #fdfdfd;
}
.program-title {
    text-align: center;
    margin-top: 0;
    font-size: 1.2em;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.program-list {
    padding-left: 20px;
    font-size: 0.95em;
    line-height: 1.7;
}
.program-list li {
    margin-bottom: 10px;
}

/* [修正] 音楽鑑賞会ページの背景は <main> ではなくコンテナに設定 */
body.page-template-page-music main {
    /* background-image: url('images/music-bg.png'); */ /* <-- 削除 */
    /* background-repeat: no-repeat; */ /* <-- 削除 */
    /* background-position: center top; */ /* <-- 削除 */
    /* background-size: cover; */ /* <-- 削除 */
    /* background-attachment: fixed; */ /* <-- 削除 (ご要望により) */
}

/* --- 音楽鑑賞会ページ --- */

/* 音楽鑑賞会ページのコンテナ（paddingをリセット） */
.page-container-music {
    padding-top: 0;
    padding-bottom: 0;
}

/* [修正] コンテナ全体 */
.music-button-container {
    max-width: 1000px; /* 横幅を少し広げて3列きれいに見せる */
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* 縦並び */
    align-items: center; /* 中央揃え */
    padding-top: 40px;
    background: none; 
}

/* [修正] ボタンエリア（PC: 上に配置） */
.music-buttons-wrapper {
    width: 100%;
    display: flex;
    flex-wrap: wrap; /* 折り返し有効 */
    justify-content: space-between;
    gap: 20px; /* ボタン間の隙間 */
    margin-bottom: 40px; /* 画像との間隔 */
    order: 1; /* PCでは1番目（上） */
}

/* [修正] 前面画像（FV画像） */
.music-fv-image {
    width: 100%;
    height: auto;
    display: block;
    order: 2; /* PCでは2番目（下） */
}

/* ページタイトル (HTML側でH1として配置) */
.music-page-title {
    display: none; 
}

/* ボタン共通スタイル */
.music-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 15px; 
    color: white;
    font-size: 1.0em; 
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.2s, box-shadow 0.2s;
    
    /* PC: 横3列 (33% - gap調整) */
    width: calc(33.3% - 20px); 
    min-height: 70px; /* 高さを揃える */
    box-sizing: border-box;

    /* リボンの形状 */
    clip-path: polygon(
        0% 0%,            /* 左上 */
        100% 0%,          /* 右上 */
        calc(100% - 15px) 50%, /* 右切り込み */
        100% 100%,        /* 右下 */
        0% 100%,          /* 左下 */
        15px 50%          /* 左切り込み */
    );
}

.music-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    text-decoration: none;
    opacity: 0.9;
}

/* --- [PC用] 3段の色分け設定 --- */

/* 上段（1行目）：水色 */
.btn-music-1, .btn-music-2, .btn-music-3 {
    background: #00a0b9; 
}

/* 中段（2行目）：赤色 */
.btn-music-4, .btn-music-5, .btn-music-6 {
    background: #d70054;
}

/* 下段（3行目）：緑色 */
.btn-music-7, .btn-music-8, .btn-music-9 {
    background: #2da834; /* 鮮やかめの緑 */
}


/* --- [SP用] スマホ表示 (768px以下) --- */
@media (max-width: 768px) {
    
    .music-button-container {
        padding: 0;
        margin-bottom: 40px;
        /* SPでは順序入れ替え */
        /* 画像(order:1) → ボタン(order:2) */
    }

    /* 画像を上に */
    .music-fv-image {
        order: 1; 
        margin-bottom: 20px;
    }

    /* ボタン群を下に */
    .music-buttons-wrapper {
        order: 2;
        width: 100%;
        padding: 0 10px;
        gap: 10px; /* 隙間を狭く */
        margin-top: 0;
    }
      
    /* ボタン個別のスタイル調整 */
    .music-button {
        /* SP: 横2列 (50% - gap調整) */
        width: calc(50% - 6px); 
        min-height: 60px;
        font-size: 0.85em; /* 文字少し小さく */
        margin: 0; /* マージンリセット */
        
        /* [SP仕様] 色はすべて赤にする */
        background: #d70054; 
    }

    /* SPではホバーエフェクト控えめ */
    .music-button:hover {
        transform: none;
    }
	.btn-music-2, .btn-music-4, .btn-music-6, .btn-music-8{
		    background: #00a0b9;
	}
}


/* * * --- [新設] お好み寄席A (page-yose-a.php) 番組例カード --- 
 * */

/* [修正] .program-grid を .page-template-page-yose-a で上書き */
.page-template-page-yose-a .program-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* PCでは4列 */
    gap: 20px;
}
@media (max-width: 768px) {
    .page-template-page-yose-a .program-grid {
        grid-template-columns: 1fr; /* スマホでは1列 */
    }
}

/* 新しいカードのベーススタイル */
.program-card-yose {
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    height: 100%; /* 高さを揃える */
}
.program-card-yose-inner {
    padding: 20px;
}

/* カードの色 */
.program-card-yose.color-1 { background: #EDDAED; border: 2px solid #9B4B9B; }
.program-card-yose.color-2 { background: #FFF0CC; border: 2px solid #FAB300; }
.program-card-yose.color-3 { background: #ffdbe5; border: 2px solid #ED4575; }
.program-card-yose.color-4 { background: #f8eed7; border: 2px solid #BF8800; }

/* カード内のタイトル */
.program-title-yose {
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    color: #333;
    border-bottom: 1px dashed #aaa;
}
/* (メインタイトルはデザインになかったため、コメントアウトしています) */
/* .program-main-title-yose { ... } */

/* カード内の演目リスト */
.program-list-yose {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 0.9em;
}
.program-list-yose li {
    margin-bottom: 8px;
    padding-left: 1.5em; /* 番号用のスペース */
    position: relative;
    line-height: 1.5;
}
/* 1〜5の番号を擬似要素で追加 */
.program-list-yose li:nth-child(1)::before { content: '1'; }
.program-list-yose li:nth-child(2)::before { content: '2'; }
.program-list-yose li:nth-child(3)::before { content: '3'; }
.program-list-yose li:nth-child(4)::before { content: '4'; }
.program-list-yose li:nth-child(5)::before { content: '5'; }
.program-list-yose li:nth-child(6)::before { content: '6'; } /* 6番目も追加 */

.program-list-yose li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    color: #999;
    width: 1.2em;
    text-align: right;
    margin-right: 0.3em;
}

/* 演目の種類（色物・落語） */
.program-list-yose li span {
    font-weight: 500;
}
.program-list-yose li.type-iromono span:first-child {
    color: #c94a4a; /* 色物 (赤系) */
}
.program-list-yose li.type-rakugo span:first-child {
    color: #3b2b8a; /* 落語 (紫系) */
}
.program-list-yose li.type-nakairi {
    font-weight: bold;
    text-align: center;
    padding-left: 0;
}
.program-list-yose li.type-nakairi::before {
    display: none; /* 中入りには番号不要 */
}

/* カード内の演者写真グリッド */
.program-performers-yose {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
}
.program-performers-yose figure {
    margin: 0;
    text-align: center;
}
.program-performers-yose img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    border: 1px solid #ddd;
}
.program-performers-yose figcaption {
    font-size: 0.8em;
    margin-top: 5px;
    color: #555;
    font-weight: 500;
}


/* * * --- [新設] お好み寄席B (page-yose-b.php) 専用スタイル --- 
 * */

/* [新設] PC時の3:1分割レイアウト */
@media (min-width: 769px) {
    .yose-b-main-layout {
        display: grid;
        grid-template-columns: 3fr 1fr;
        gap: 30px;
        align-items: flex-start; /* 高さを揃えない */
    }
    .page-template-page-yose-b .performer-grid {
        grid-template-columns: repeat(3, 1fr); /* PCでは3列固定 */
        gap: 20px;
    }
}
@media (max-width: 768px) {
    .yose-b-main-layout {
        display: block; /* スマホでは縦積み */
    }
    .page-template-page-yose-b .performer-grid {
        grid-template-columns: 1fr; /* スマホでは1列 */
        gap: 30px;
    }
}

/* [新設] お好み寄席 B ページのデザイン調整 */
.page-template-page-yose-b .performer-card {
    /* [修正] カードの装飾をリセット */
    border: none;
    box-shadow: none;
    overflow: visible;
}
.page-template-page-yose-b .performer-card img {
    margin-top: 10px; /* [追加] 名前と画像の間にマージン */
    border: 1px solid #ddd; /* [追加] 画像に枠線 */
    border-radius: 5px;
}
.page-template-page-yose-b .performer-name {
    /* [修正] スタイル変更 */
    font-size: 1.2em;
    margin: 0;
    padding-bottom: 5px;
    border-bottom: 2px solid #ddd;
    font-weight: bold;
}
.page-template-page-yose-b .performer-subtitle {
    font-size: 0.9em;
    font-weight: bold;
    color: #c94a4a; /* 赤系 */
    margin: 0 0 5px 0;
}
.page-template-page-yose-b .performer-info {
    padding: 0; /* [修正] パディングをリセット */
}
.page-template-page-yose-b .performer-bio {
    font-size: 0.85em; /* [修正] デザインに合わせ少し小さく */
    line-height: 1.6;
    margin-top: 10px;
    color: #333;
    text-align: justify;
}

/* [新設] お好み寄席 B ページ 補足テキスト */
.yose-b-footer-note {
    text-align: center;
    font-size: 0.95em;
    margin: 40px 0;
    padding: 20px;
    background: #a04b9d61;
    border-radius: 8px;
}
.yose-b-footer-note p {
    margin: 0;
}

/* [新設] お好み寄席 B ページ 番組例カード */
.program-card-yose-b {
    border: 1px solid #333; /* 黒枠 */
    background: #FFF1CC;
    padding: 15px;
    height: 100%;
    box-sizing: border-box; /* paddingを含めて高さを計算 */
}
.program-title-yose-b {
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}
.program-list-yose-b {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 0.9em;
    line-height: 1.7;
}
.program-list-yose-b li {
    margin-bottom: 10px;
}
.program-list-yose-b li strong {
    font-weight: bold;
    color: #333;
}

/* --- お問い合わせページ (Contact Form 7) 新デザイン --- */

/* テーブル形式のレイアウト */
.contact-form-table {
    border-top: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-left: 1px solid #ddd;
    margin-bottom: 30px;
}
.contact-form-row {
    display: flex;
    border-bottom: 1px solid #ddd;
}
.contact-form-label {
    width: 30%;
	background-color:#D7ECD9;
    padding: 20px 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.95em;
    color: #333;
	box-sizing: border-box;
}
.contact-form-input {
    width: 70%;
    padding: 15px 20px;
    background-color: #fff;
	box-sizing: border-box;
}

/* 必須・任意タグ */
.required-tag {
    background-color: #e60012;
    color: #fff;
    font-size: 0.7em;
    padding: 2px 8px;
    border-radius: 3px;
    margin-left: 10px;
}
.optional-tag {
    background-color: #999;
    color: #fff;
    font-size: 0.7em;
    padding: 2px 8px;
    border-radius: 3px;
    margin-left: 10px;
}

/* 入力要素のスタイル */
.wpcf7-form-control:not(.wpcf7-submit) {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
    background-color: #fff;
}
.wpcf7-textarea {
    height: 150px;
}

/* 送信ボタンエリア */
.contact-submit-area {
    text-align: center;
    margin-top: 40px;
}
.wpcf7-submit {
    background: #4CB050;
    color: #fff;
    border: none;
    padding: 15px 60px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: background 0.2s;
}
.wpcf7-submit:hover {
    background: #555;
}

/* レスポンシブ対応 (スマホ) */
@media (max-width: 768px) {
    .contact-form-row {
        flex-direction: column;
    }
    .contact-form-label {
        width: 100%;
        padding: 10px 15px;
/*         background-color: #eee; */
    }
    .contact-form-input {
        width: 100%;
        padding: 15px;
    }
    .wpcf7-submit {
        width: 100%;
    }
}

/* エラー・成功メッセージ */
.wpcf7-response-output {
    margin: 20px 0 0;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
}
span.wpcf7-not-valid-tip {
    color: #dc3232;
    font-size: 0.85em;
    display: block;
    margin-top: 5px;
}

/* * * --- [新設] テキスト着色用ヘルパークラス --- 
 * */
.text-red {
    color: #c94a4a !important; /* 画像の赤色に合わせる */
    font-weight: bold;
}
.text-blue {
    color: #007bff !important; /* 既存のリンク青 */
    /* font-weight: bold; */ /* 青は太字にしない */
}
.text-blue2 {
    color: #5C13EC !important;
}
.text-orange{
    color: #E77A17 !important;
}
.text-brown{
    color: #AE5B11 !important;
}
.text-ocher{
    color: #BF8B00 !important;
}

/* [修正] 寄席Bのサブタイトル (既に.text-redが適用されるが念のため) */
.page-template-page-yose-b .performer-subtitle {
    color: #c94a4a; /* 赤系 */
}

/* * * --- [新設] トップページ ヘッダー透過 --- 
 * */

/* トップページ（PC）のヘッダー */
@media (min-width: 769px) {
    /* (1) トップページのヘッダーをFVの上に配置 */
    body.home .header {
        position: fixed; /* ページ最上部に固定 */
        width: 100%;
        top:0;
/* background: transparent; */
        border-bottom: none; /* 下線を削除 */
        box-sizing: border-box; /* paddingを含めて100% */
    }
    body.home .header.scrolled{
        background:white !important; 
    }

    /* (2) トップページの <main> をヘッダーの高さ分だけ押し下げる */
    /* ヘッダー2段分 (1段目62px + 2段目40px) = 約102px */
    body main {
        margin-top: 100px; 
    }
    body.home main {
        padding-top: 0px; 
    }

    /* (3) 透過ヘッダーの文字色を白に変更 */
    body.home .header-logo img {
        /* ロゴ画像が暗い色の場合、ここで白ロゴに差し替えるCSSを追加できます */
        /* (例) content: url('images/logo-white.png'); */
    }
    body.home .header-sns a,
/* body.home .header-nav .header-menu-list a {
        color: #ffffff;
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    } */
    body.home .header-nav .sub-menu a {
        color: #000;
        text-shadow: 0 1px 2px rgba(0,0,0,0); /* 影を付けて視認性UP */
    }
    body.home .header-nav .header-menu-list a::after {
        background: #ffffff; /* ホバー時の下線も白に */
    }
    body.home .header-nav .sub-menu a::after {
        background: #000; /* ホバー時の下線も白に */
    }
    body.home .header.scrolled .header-sns a,
    body.home .header.scrolled .header-nav .header-menu-list a {
        color: #000; /* 白文字 */
        text-shadow: 0 1px 2px rgba(0,0,0,0); /* 影を付けて視認性UP */
    }
    body.home .header-nav .header-menu-list a::after {
        background: #000; /* ホバー時の下線も白に */
    }
}

/* トップページ（スマホ）のヘッダー */
@media (max-width: 768px) {
    /* (1) トップページのヘッダーをFVの上に配置 */
    body.home .header {
        position: absolute; /* ページ最上部に固定 */
        width: 100%;
        background: transparent; /* 背景を透過 */
        border-bottom: none; /* 下線を削除 */
        box-sizing: border-box; /* paddingを含めて100% */
    }

    /* (2) トップページの <main> をヘッダーの高さ分だけ押し下げる */
    /* スマホヘッダー (60px + padding 1px) = 61px */
    body main {
        margin-top: 60px;
    }
    body.home main {
        padding-top: 0px;
    }
      
    /* (3) 透過ヘッダーのボタン（ハンバーガー）を白に変更 */
    body.home .hamburger-bar {
/* background: #ffffff;  */
        box-shadow: 0 0 2px rgba(0,0,0,0.5);
    }
      
    /* (4) スマホ用スライドメニューが開いた時は、透過をやめて白背景に戻す */
    body.home .mobile-menu.is-active {
        background: #fff;
        border-top: 1px solid #ddd;
    }
    body.home .mobile-menu.is-active a {
        color: #333; /* 文字色を黒に戻す */
    }
    body.home .mobile-menu.is-active .mobile-sns a {
        color: #555; /* 文字色を黒に戻す */
    }
}

/* (5) トップページのFVセクションのpadding-topをリセット */
/* (mainにpadding-topを付けたため、FV側のpaddingは不要) */
body.home .fv-section {
    padding-top: 0; 
}


@keyframes slide-infinitely {
    0% {
        transform: translateX(0); /* 0% の位置は移動なし */
    }
    100% {
        /*
         * スライドさせる全体の幅に合わせて調整が必要です。
         * 例: 画像幅(80vw) + マージン(10px) の合計を 100% の位置として設定
         * (画像数に合わせて、正確な移動量を計算して設定してください)
         */
        transform: translateX(-100%); 
        /* スライダーコンテナの全幅分左へ移動 */
    }
}

/* PC表示用の画像は、スマホサイズ（768px以下）で非表示にする */
@media (max-width: 768px) {
    .flyer-pc {
        display: none; /* PC画像を非表示 */
    }

    .flyer-image-wrapper {
        /* スマホ表示では横幅に合わせて表示 */
        overflow: hidden; /* スライダーの外側を隠す */
        white-space: nowrap; /* 子要素の折り返しを防止 */
    }

    .flyer-slider {
        /* スライドさせるコンテナ */
        display: inline-block; /* インラインブロックにして横並びにする */
        animation: slide-infinitely 50s linear infinite; /* アニメーションの適用 */
    }

    .flyer-sp {
        /* スライドする個々の画像 */
        display: inline-block;
        width: 200vw; /* 例: ビューポート幅の80%に設定 */
        margin-right: 10px; /* 画像間の間隔 */
        height: auto;
    }
}

/* PCサイズ（769px以上）ではスライダー要素を非表示にする */
@media (min-width: 769px) {
    .flyer-slider {
        display: none;
    }
}

/* ==============================================
   新規ページ（萬狂言・古典芸能）レイアウト修正・完全版
   ============================================== */

/* --- 1. キャッチコピー (緑色 + 輪輪指定) --- */
.top-catch-copy {
    color: #4CAF50; /* ベースの緑色 */
    font-size: 1.6em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
      
    /* 文字の輪郭 (#92987A) を再現 */
   text-shadow: 0.3px 0.3px 0 #92987A,
        -0.3px -0.3px 0 #92987A,
        -0.3px 0.3px 0 #92987A,
        0.3px -0.3px 0 #92987A,
        0.3px 0 0 #92987A,
        -0.3px 0 0 #92987A,
        0 0.3px 0 #92987A,
        0 -0.3px 0 #92987A;
}

/* --- 2. メインタイトル --- */
.page-main-title {
    font-size: 2.8em;
    font-weight: normal;
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
    text-align: center;
    margin-top: 0;
    margin-bottom: 40px;
    line-height: 1.2;
}

/* --- 3. レイアウト枠 (左右2カラム) --- */
.kyogen-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 上揃え */
    gap: 30px;
    margin-bottom: 30px;
}

/* --- 左カラム (画像 + キャプション) --- */
.kyogen-col-left {
    width: 45%; /* 左側の幅 */
    flex-shrink: 0;
}

.main-image-box img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 0; /* 画像とキャプションをくっつける場合は0、離す場合は適宜調整 */
}

/* キャプションボックス (背景色修正) */
.caption-box {
    background-color: #9BA8B7; /* 指定色 */
    padding: 15px;
    text-align: center;
    border: 1px solid #333;
    font-weight: bold;
    line-height: 1.4;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
    margin-top: 20px; /* 画像との隙間 */
    font-size: 0.95em;
}

/* --- 右カラム (プロフィール + ポイント) --- */
.kyogen-col-right {
    width: 52%; /* 右側の幅 */
}

/* プロフィール */
.profile-section {
    margin-bottom: 30px;
}
.profile-title {
    font-size: 1.1em;
    font-weight: normal;
    letter-spacing: 0.1em;
    margin-top: 0;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.profile-text {
    font-size: 0.95em;
    line-height: 1.6;
    text-align: justify;
}
@media screen and (min-width:768px){
	.page-template-page-fukui .profile-text{
		font-size:1.05em;
	}
}

/* イチオシポイント */
.point-title {
    color: red;
    font-size: 1.4em;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 10px;
}
.point-box {
    background-color: #E1F2FB; /* 薄い水色 */
    border: 2px solid #FF00FF; /* ピンクの枠線 */
    border-radius: 15px;
    padding: 15px;
    font-size: 0.95em;
    line-height: 1.5;
}
.point-box p {
    margin: 0;
}

/* --- スマホ対応 (縦積み) --- */
@media (max-width: 768px) {
    .kyogen-layout {
        flex-direction: column; /* 縦並び */
        gap: 30px;
    }
      
    .kyogen-col-left, 
    .kyogen-col-right {
        width: 100%; /* 横幅一杯に */
    }

    /* スマホでの表示順序調整が必要な場合 */
    /* 現状: 画像+キャプション → プロフ+ポイント の順で表示されます */
      
    .page-main-title {
        font-size: 2.0em;
    }
    .top-catch-copy {
        font-size: 1.2em;
    }
}

/* --- キャッチコピーの色バリエーション --- */

/* 1. 赤色 (中国雑技 / 歌舞伎の一部) */
.text-color-red {
    color: #E60012 !important; /* 鮮やかな赤 */
}

/* 2. ゴールド・黄土色 (福居姉弟 / 歌舞伎の一部) */
.text-color-gold {
    color: #A38F57 !important; /* 落ち着いたゴールド */
}

/* 3. 茶色 (鼓粋) */
.text-color-brown {
    color: #A0522D !important; /* 茶色 */
}

/* --- 白い縁取り（萬狂言以外で使用） --- */
/* 萬狂言は指定の #92987A でしたが、他は白フチに見えます */
.text-outline-white {
    text-shadow: 
        2px 2px 0 #fff,
        -2px -2px 0 #fff,
        -2px 2px 0 #fff,
        2px -2px 0 #fff,
        2px 0 0 #fff,
        -2px 0 0 #fff,
        0 2px 0 #fff,
        0 -2px 0 #fff;
}

/* ==============================================
   音楽鑑賞会（東京ブラススタイル等）ページ用スタイル
   ============================================== */

/* --- ページ背景色 --- */
.page-wrap-pink {
    background-color: #FFCCCC; /* ごく薄いピンク */
    width: 100%;
    min-height: 100vh;
    padding-top: 1px; /* マージン相殺防止 */
    padding-bottom: 60px;
}

/* --- 金メダルアイコン (アニメーション付き) --- */
.medal-badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px; /* サイズ調整 */
    height: auto;
    z-index: 10;
     
    /* 3D回転をきれいに見せるための奥行き設定 */
    perspective: 1000px; 

    /* アニメーション: 上から降りてきてバウンド */
    animation: medalDrop 1s ease-out forwards;
    transform-origin: top center;
}

/* メダル画像（回転アニメーションを追加） */
.medal-badge img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.2));

    /* --- [追加] 回転アニメーション --- */
    /* medalRotate3D という動きを 6秒間隔 で無限ループ */
    animation: medalRotate3D 6s ease-in-out infinite;
     
    /* --- [追加] 開始遅延 --- */
    /* 親要素の落下アニメーション(1秒)が終わるのを待ってから開始 */
    animation-delay: 1.2s; 
}

/* 落下アニメーション（既存） */
@keyframes medalDrop {
    0% {
        transform: translateY(-100px) scale(0.5) rotate(-10deg);
        opacity: 0;
    }
    60% {
        transform: translateY(10px) scale(1.1) rotate(5deg);
        opacity: 1;
    }
    80% {
        transform: translateY(-5px) scale(1.0);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* --- [追加] 回転アニメーション（Y軸回転） --- */
@keyframes medalRotate3D {
    0% {
        transform: rotateY(0deg);
    }
    15% {
        /* 最初の15%（約0.9秒）でくるっと1回転 */
        transform: rotateY(360deg);
    }
    100% {
        /* 残りの時間は止まっている（360度のまま待機） */
        transform: rotateY(360deg);
    }
}


/* スマホではメダル位置調整 */
@media (max-width: 768px) {
    .medal-badge {
        width: 80px;
        left: 0px;
        top: -20px;
    }
}


/* --- ヘッダーエリア --- */
.music-header {
    text-align: center;
    margin-bottom: 40px;
    padding-top: 40px; /* メダルとの被り回避 */
}
.music-catch-copy {
    font-size: 1.4em;
    font-weight: bold;
    margin-bottom: 10px;
}
.text-red {
    color: #E60012;
}

.music-main-title {
    font-size: 3.2em;
    font-weight: normal;
    font-family: "Yu Mincho", "YuMincho", serif;
    margin: 0;
    line-height: 1.2;
    color: #333;
}

/* --- 2カラムレイアウト --- */
.music-layout-2col {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 50px;
    align-items:center;
}
.page-content-wrapper .music-layout-2col:nth-child(4){
	align-items:start;
}
.music-col-left {
    width: 45%;
}
/* .page-template-page-wasabi .music-col-left {
    margin-top:50px;
} */
.music-col-right {
    width: 54%;
}

.music-image-box img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.music-profile-title {
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 0px;
    letter-spacing: 0.1em;
    color: #555;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    display: inline-block;
}
.music-profile-text {
    font-size: 0.95em;
    line-height: 1.8;
    text-align: justify;
}

@media (min-width: 769px) {
	.page-template-page-morinone .music-profile-text{
		font-size: 0.85em;
	}
	.page-template-page-try-tone .music-profile-text{
		font-size: 0.92em;
	}
	.page-template-page-primo .music-profile-text{
		font-size: 0.96em;
	}
	.page-template-page-soulmatics .music-profile-text{
		font-size: 0.92em;
	}
	.page-template-page-funcussion .music-profile-text{
		font-size: 0.85em;
	}
}

/* --- イチオシポイント (ピンク枠) --- */
.music-point-section {
    margin-bottom: 50px;
}
.music-point-title {
    color: #E60012; /* 赤文字 */
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top:0;
}
.music-point-box {
    border: 2px solid #FF69B4; /* ピンク枠 */
    background-color: #FFF0F5; /* 薄いピンク背景 */
    border-radius: 15px;
    padding: 25px;
    font-size: 1.0em;
    line-height: 1.8;
    color: #333;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.music-point-box p {
    margin: 0;
}

/* --- セットリスト --- */
.music-setlist-section {
    margin-bottom: 50px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.setlist-card {
    background: #fff;
    border: 1px dashed #FF69B4;
    padding: 30px;
    border-radius: 10px;
}
.setlist-list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2; /* 2列表示 */
    column-gap: 40px;
}
.setlist-list li {
    margin-bottom: 10px;
    font-size: 0.95em;
    break-inside: avoid; /* リスト項目の途中改行防止 */
}

/* --- 動画エリア --- */
.music-movie-section {
    text-align: center;
    margin-bottom: 40px;
}
.music-movie-section-classical{
    margin-top:10px;
}
.youtube-container {
    position: relative;
    width: 100%;
    max-width: 600px; /* 動画の最大幅 */
    margin: 0 auto;
    padding-bottom: 56.25%; /* アスペクト比 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.music-movie-section-classical .youtube-container{
    box-shadow: none;
    border-radius:0;
}
.youtube-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --- 汎用ユーティリティ --- */
.text-center { text-align: center; }

/* --- スマホレスポンシブ --- */
@media (max-width: 768px) {
    /* 1. レイアウトを縦積みに --- */
    .music-layout-2col {
        flex-direction: column;
        gap: 20px;
    }
    .music-col-left, .music-col-right {
        width: 100%;
    }
    .page-template-page-wasabi .music-col-left {
    margin-top:20px;
}

    /* 2. タイトルの文字サイズ調整 */
    .music-main-title {
        font-size: 2.2em;
    }

    /* 3. セットリストを1列に */
    .setlist-list {
        columns: 1;
    }

    /* ▼▼▼ 今回の修正箇所 ▼▼▼ */
      
    /* メダルを少し小さくし、左上に配置 */
    .medal-badge {
        width: 70px; /* スマホ用にサイズ調整 */
        left: 0;
        top: 0;      /* コンテナの左上ピッタリに配置 */
    }

    /* ヘッダー部分の上余白を広げて、メダルとの被りを防ぐ */
    .music-header {
        padding-top: 80px; /* メダルの高さ(約70px) + 余白 を確保 */
    }
      
    /* ▲▲▲ 修正箇所ここまで ▲▲▲ */
}

/* ==============================================
   音楽鑑賞会：追加ページ用スタイル
   ============================================== */

/* --- 背景色バリエーション --- */
.page-wrap-beige    { background-color: #EEE8D6; width: 100%; min-height: 100vh; padding: 1px 0 60px; } /* BBBB */
.page-wrap-lavender { background-color: #EBE6F5; width: 100%; min-height: 100vh; padding: 1px 0 60px; } /* 杜の音 */
.page-wrap-green    { background-color: #E3F2E3; width: 100%; min-height: 100vh; padding: 1px 0 60px; } /* Try-Tone */
.page-wrap-blue     { background-color: #D6EAF8; width: 100%; min-height: 100vh; padding: 1px 0 60px; } /* Soulmatics */
.page-wrap-orange   { background-color: #ffc00063; width: 100%; min-height: 100vh; padding: 1px 0 60px; } /* Funcussion */
.page-wrap-gray     { background-color: #edf7e19c; width: 100%; min-height: 100vh; padding: 1px 0 60px; } /* WASABI */
.page-wrap-pink2     { background-color: #ffcccc45; width: 100%; min-height: 100vh; padding: 1px 0 60px; } /* WASABI */
/* ※ピンク(page-wrap-pink)は東京ブラススタイル・Primo・HIROSHIで使用 */

/* --- 「その他のグループ」ボックス --- */
.other-groups-box {
    margin-top: 0px;
    border: 2px solid #87CEEB; /* 水色の枠線 */
    background-color: #E0F2F7; /* 薄い水色背景 */
    padding: 15px;
    border-radius: 5px;
    font-size: 0.9em;
    color: #333;
}
.other-groups-box h4 {
    color: #0077BE; /* 濃い水色の文字 */
    margin: 0 0 10px 0;
    font-size: 1.0em;
    font-weight: bold;
    border-bottom: 1px dashed #87CEEB;
    padding-bottom: 5px;
}
.other-groups-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.other-groups-box li {
    margin-bottom: 5px;
    line-height: 1.5;
}

/* --- 外部リンク用ボタン (動画がYouTube以外の場合) --- */
.video-link-btn {
    display: inline-block;
    background-color: #E60012;
    color: #fff;
    padding: 15px 50px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.2s, background-color 0.2s;
}
.video-link-btn:hover {
    background-color: #C0000F;
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
}

/* --- お問い合わせページ LINE導線 --- */
.contact-line-area {
    background-color: #f6fdf6; /* 薄い緑色の背景 */
    border: 2px solid #06c755; /* LINEグリーン */
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    margin-bottom: 50px; /* フォームとの間隔 */
}

.contact-line-text {
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.6;
    color: #333;
}

.contact-line-btn {
    display: inline-block;
    background-color: #06c755; /* LINE公式カラー */
    color: #fff;
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
    padding: 15px 40px;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(6, 199, 85, 0.3);
    transition: all 0.3s ease;
}

.contact-line-btn:hover {
    background-color: #05b34d;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(6, 199, 85, 0.4);
    color: #fff;
    text-decoration: none;
}

/* ボタン内のLINEアイコン風テキスト装飾 */
.line-icon {
    font-family: Arial, sans-serif;
    font-weight: 900;
    margin-right: 5px;
    font-size: 1.1em;
}

/* スマホ用の改行調整 */
.sp-only {
    display: none;
}
@media (max-width: 768px) {
    .contact-line-area {
        padding: 20px;
    }
    .contact-line-btn {
        width: 100%; /* スマホでは幅いっぱい */
        box-sizing: border-box;
        padding: 15px 10px;
        font-size: 1.0em;
    }
    .sp-only {
        display: block; /* スマホのみ改行させる */
    }
}


/* --- お問い合わせページ修正：大人なフォントと背景 --- */

/* 1. お問い合わせページ全体のフォントを明朝体で大人っぽく */
.contact-page-custom {
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HGS Mincho E", serif;
	background:#fdffe8;
}

/* 2. お問い合わせフォーム部分に背景色を追加（チープに見えない上品なグレージュ） */
.contact-form-area {
    background-color: #FFFFFF;
    padding: 40px; /* ゆったりとした余白で高級感を出す */
    border: 1px solid #eaeaea; /* 主張しすぎない薄い枠線 */
    border-radius: 6px; /* ほんの少し角を丸める（やりすぎない） */
    box-shadow: 0 2px 10px rgba(0,0,0,0.03); /* ごく薄い影で浮き上がらせる */
}

@media (max-width: 768px) {
    .contact-form-area {
        padding: 20px; /* スマホでは余白を少し詰める */
    }
}


/* --- SNS公式カラー設定 --- */

/* 共通：ホバー時に少し薄くする */
.header-sns a:hover,
.mobile-sns a:hover {
    opacity: 0.7;
    color: inherit; /* 元の色を維持 */
}

/* LINE (緑) */
.sns-icon-line {
    color: #06C755 !important;
}

/* X (Twitter) & TikTok (黒) */
.sns-icon-x,
.sns-icon-tiktok {
    color: #000000 !important;
}

/* YouTube (赤) */
.sns-icon-youtube {
    color: #FF0000 !important;
}

/* Instagram (グラデーション) */
.sns-icon-instagram {
    color: #E1306C !important; /* グラデーション未対応ブラウザ用フォールバック */
}
/* Webkit対応ブラウザでのグラデーション文字 */
.sns-icon-instagram i {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block; /* グラデーション表示に必要 */
}

/* --- [追加・修正] 萬狂言ページ レイアウト調整 --- */
/* 上下の開始位置を揃えるため、動画の個別マージンをこのレイアウト内のみリセット */
.kyogen-layout .music-movie-section-classical {
    margin-top: 0;
}

/* * * --- [新設] お好み寄席B (page-yose-b.php) 新レイアウト専用スタイル --- * * */

/* 1. メイングリッドレイアウト (PC: 1fr 2fr 2fr) */
.yose-b-performers-wrapper {
    display: flex;
    gap: 30px;
    align-items: stretch; /* 高さを揃える */
}

/* 各カラム共通 */
.performer-column {
    display: flex;
    flex-direction: column;
}

/* カラム幅の指定 */
.col-single {
    width: 20%;
}
.col-double {
/* width: 40%; */
	width: 50%;
}

/* 2. ヘッダー (見出し) */
.performer-header {
    text-align: center;
    margin-bottom: 20px;
    min-height: 80px; /* 見出しの高さをある程度揃える */
}
.p-subtitle {
    margin: 0 0 5px 0;
    font-size: 1.0em;
    font-weight: bold;
}
.p-name {
    margin: 0;
    font-size: 1.8em;
    font-family: "Yu Mincho", "YuMincho", serif;
    font-weight: normal;
}

/* 3. コンテンツラッパー (高さを揃えるため) */
.p-body-single,
.p-body-double {
    flex-grow: 1; /* 親の高さに合わせて伸びる */
    display: flex;
    flex-direction: column;
}
/* 2カラム内部レイアウト */
.p-body-double {
    flex-direction: row;
    gap: 15px;
}
.p-sub-col-left,
.p-sub-col-right {
    width: 50%;
    display: flex;
    flex-direction: column;
}

/* 4. 画像 */
.p-image {
    margin-bottom: 15px;
}
.p-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* 5. プロフィールボックス */
.p-bio-box {
    border: 1px solid #333;
    padding: 15px;
    font-size: 0.9em;
    line-height: 1.6;
    text-align: justify;
    background: #fff;
    flex-grow: 1; /* 下まで伸ばす */
}
.p-bio-box p {
    margin: 0;
}
.font-bold {
    font-weight: bold;
}

/* 6. 内容ボックス */
.p-content-box {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9em;
    color: #333;
    flex-grow: 1; /* 上部のボックスを伸ばして下揃えに貢献 */
}
.box-head {
    margin: 0 0 10px 0;
    font-size: 1.1em;
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
}
.p-content-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.p-content-box li {
    margin-bottom: 8px;
    line-height: 1.4;
    text-indent: -1em;
    padding-left: 1em;
}
/* 黄色ボックス */
.box-yellow {
    background-color: #FFF5CC;
    border: 2px solid #FDD100;
}
/* 青色ボックス */
.box-blue {
    background-color: #D6EAF8;
    border: 2px solid #007BFF;
}

/* 7. 動画エリア */
.p-video-area {
    background: #E0E0E0; /* 任意の背景色 */
    padding: 10px;
    text-align: center;
    /* margin-top: auto; */ /* 必要なら下揃えを強制 */
}
.video-label {
    margin: 0 0 5px 0;
    font-weight: bold;
    font-size: 0.9em;
}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #000;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* スマホレスポンシブ (768px以下) */
@media (max-width: 768px) {
    /* メインラッパーを縦積みに */
    .yose-b-performers-wrapper {
        flex-direction: column;
        gap: 50px;
    }
     
    /* カラム幅を100%に */
    .col-single, .col-double {
        width: 100%;
    }

    /* 内部2カラムも縦積みに */
    .p-body-double {
        flex-direction: column;
        gap: 20px;
    }
    .p-sub-col-left,
    .p-sub-col-right {
        width: 100%;
    }

    /* 画像サイズ調整 (スマホでは少し小さく中央寄せ) */
    .p-image {
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- SNS埋め込みセクションの微調整 --- */
/* 
.sns-feed-section {
    background: #f9f9f9;
	padding: 60px 20px;
}

.sns-feed-section .section-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}


.sns-feed-column {
    min-width: 0; 
    width: 100%;
}

.sns-feed-title {
    text-align: center;
    font-size: 1.8em;
    margin-bottom: 25px;
}

.sns-feed-content {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    height: 500px; 
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.twitter-timeline-rendered {
    width: 100% !important;
    height: 90% !important;
    display: block !important;
    visibility: visible !important;
}

.sns-feed-content iframe#twitter-widget-0,
.sns-feed-content iframe.twitter-timeline {
    position: static !important;   
    visibility: visible !important;
    width: 100% !important;        
    height: 500px !important;      
    min-width: 100% !important;
    opacity: 1 !important;
}

@media (max-width: 768px) {
    .sns-feed-section .section-inner {
        grid-template-columns: 1fr;
    }
    .sns-feed-content {
        height: 400px;
    }
    .sns-feed-content iframe#twitter-widget-0,
    .sns-feed-content iframe.twitter-timeline {
        height: 400px !important;
    }
} */