.main-concert {
    /* 変更: 100vw だとスクロールバー分はみ出すので 100% にする */
    width: 100%;

       overflow: hidden;
 /* はみ出した横幅を隠す */

}

/* <picture>要素：ブロック表示で親要素を埋める */
.hero-haikei-img picture,
.gaiyou-haikei-img picture,
.performer-item-img1 picture {
    display: block;
    width: 100%;
    height: 100%;
}

.performer-item picture {
    display: block;
}

/* 基本設定（PC表示） */
.sp-only,
.sp-tb-only,
.sp-tb-only-flex,
.tb-only {
    display: none !important; /* PCでは隠す */
}

/* PC・タブレットのみ表示（デフォルトはblock） */
.pc-tb-only {
    display: block !important; /* PC・タブレットでは表示する */
}



/* タブレット設定（1023px以下） */
@media (max-width: 1023px)and (min-width:601px) {
    .pc-only {
        display: none !important; /* スマホでは隠す */
    }
    .sp-tb-only {
        display: block !important; /* スマホでは表示する */
    }
    .sp-tb-only-flex {
        display: flex !important; /* スマホでflexで表示する */
    }
    .sp-only{
        display:none !important; /* タブレットでは隠す */
    }
    .pc-tb-only {
        display: block !important; /* タブレットでは表示する */
    }
    .tb-only {
        display: block !important; /* タブレットでは表示する */
    }
}

@media (max-width: 600px) {
    .pc-only {
        display: none !important; /* スマホでは隠す */
    }
    .sp-tb-only {
        display: block !important; /* スマホでは表示する */
    }
    .sp-tb-only-flex {
        display: flex !important; /* スマホでflexで表示する */
    }

    .sp-only{
        display:block !important; /* スマホで表示する */
    }
    .pc-tb-only {
        display: none !important; /* スマホでは隠す */
    }
    .tb-only {
        display: none !important; /* スマホでは隠す */
    }
}





@media (min-width: 1024px)  {
    

.main-concert {
    /* 変更: 100vw だとスクロールバー分はみ出すので 100% にする */
    width: 100%; 
    
    /* はみ出した横幅を隠す */
    overflow: hidden;
}

.hero-parent {
    position: relative; /* 子要素のabsoluteの基準点 */
    width: 100%;
    /* 必要に応じて高さを指定してください。例: min-height: 100vh; */
    z-index: auto;
}
.hero-haikei{
    background-color: #FF69B4;
   position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -5; /* 一番奥 */
    /* 背景画像がはみ出さないように調整する場合 */
    overflow: hidden; 
}

.hero-haikei-img{
    width:100vw;
}

.hero-haikei-img-img{
     width: 100%;
     height: 100%;
     object-fit: none;
     translate: 0px -32px;
     object-position: calc(50% - -44px) top;
}

.hero-temae {
    position: relative;
    z-index: 10; /* 背景より手前（数字が大きいほど手前） */
}

/* テキスト画像のエリアを中央揃えにする設定 */
.hero-temae-text {
    width: 100%;             /* 横幅いっぱいに広げる */
    display: flex;           /* Flexboxを使う */
    justify-content: center; /* 水平方向（左右）の真ん中に配置 */
    padding-top: 96px;
}

/* 画像自体への指定 */
.hero-temae-text img {
    /* 画面幅の 10/16 = 0.625 なので 62.5vw と指定 */
    width: 62.5vw;           
    height: auto;            /* 高さは比率を保って自動調整 */
    margin: 0 0 55px;
    transform:scale(1.06);
    max-width: 1064px;
}



.hero-temae-human {
  display: flex;
  justify-content: center; /* 中央対称揃え */
  gap: 1.5%;               /* 56px ÷ 1600px = 3.5% */
  max-width: 1600px;       /* デザインの最大幅 */
  width: 94%;              /* 画面端の余白 */
  margin: 0 auto;
}

.performer-item {
  /* 358px ÷ 1600px = 22.375% */
  /* 最大358px、それ以下では比率を保って縮む設定 */
  flex: 0 1 23.81%; 
  min-width: 0;            /* flexの子要素が潰れないためのまじない */
}

.performer-item img {
  width: 100%;
  height: auto;
  display: block;
  border-top-left-radius: 20px;

border-bottom-right-radius: 20px;
}

.gaiyou-parent {
  position: relative;
  width: 100%;
  overflow: visible; /* 明示的に見えるようにする */

  /* 親要素自体の高さ指定がない場合、中身（temae）に依存します */
  z-index:auto;
}

/* 背景全体を包む枠 */
.gaiyou-haikei {
     /* 上に200pxずらす設定 */
  transform: translateY(-221px);
  
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  
  /* 高さ計算：親の100% + 上にずらす分(200px) - 微調整(1px) */
  height: calc(100% + 200px); 
  
 
  z-index: 1;
  background-color: #2E4580;
  overflow: hidden;
}

/* 画像のラッパー */
.gaiyou-haikei-img {
  width: 100%; /* ★修正：100vwだとスクロールバー分はみ出して横スクロールが出るリスクあり */
  height: 100%;
}

/* 画像本体 */
.gaiyou-haikei-img-img {
  width: 100%;
  height: 100%;
  
  /* 原寸大のまま表示（リサイズなし） */
  object-fit: none; 
  
  /* ★重要変更：左右は「中央」、上下は「上」に合わせる */
  object-position: center top; 
  transform: translateY(-48px);
  object-position: calc(50% - 45px) top;
}

.gaiyou-temae {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  position: relative;
  z-index: 11;
  padding: 141px 0 0 0;
}

.performer-item-img1{
    position: absolute;
    right:-29px;
    bottom:-77px;
    width:12%;
}

.performer-item-img2{
    position: absolute;
    width:13%;
    bottom: 190px;
    left:-59px;


}



.performer-cta {
    position: fixed;
    right: 0;
    top:446px; /* 変更: 提示されたCSSに合わせて調整 */
    z-index: 99;
    /* 親要素に高さを持たせないと重なり基準がおかしくなる場合があるため指定 */
    width: 84px; 
    height: 282px; /* 白いボタンの底辺(31+251=282)までカバー */
    transition: opacity 0.3s, visibility 0.3s;
}

.performer-cta.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.performer-cta-link {
    /* オートレイアウト */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    gap: 3px;

    width: 84px;
    height: 271px;

    background: #FFEC55;
    border-width: 2px 0px 2px 2px;
    border-style: solid;
    border-color: #2E4580;
    border-radius: 10px 0px 0px 10px;

    text-decoration: none;
    transition: background-color 0.3s;
    box-sizing: border-box;
    
    /* 重ね合わせ指定 */
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2; /* 手前に表示 */
}

/* 白っぽいボタン（装飾）を擬似要素で表現 */
.performer-cta::before {
    content: ""; /* テキストは含めず形状だけ */
    display: block;
    position: absolute;
    
    /* 白ボタンのCSS */
    width: 84px;
    height: 251px;
    top: 31px;
    right: 0;
    
    background: #FFFFFF;
    border-width: 2px 0px 2px 2px;
    border-style: solid;
    border-color: #2E4580;
    border-radius: 10px 0px 0px 10px;
    
    box-sizing: border-box;
    z-index: 1; /* 黄色ボタンの背面 */
}



.performer-cta-text {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    text-align: center;
    color: #2E4580;
    
    /* 縦書き設定 */
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 0.1em;
}

.performer-cta-icon {
    font-size: 20px;
    color: #2E4580;
}


.gaiyou-temae-text-1 { 
    font-family: "Zen Old Mincho", serif;
    font-weight: 900; /* Black */
    font-size: 40px; 
    line-height: 1.5; /* 150% */
    letter-spacing:0.05em; /* -20% */
    text-align: center;
    color: #FFFFFF;
    /* 既存のpaddingがあれば引き継ぎ */
    padding: 0px 0px 20px 0px;
}

.gaiyou-temae-text-2{
   font-family: "Zen Old Mincho", serif;
    font-weight: 500;
    /* font-style: SemiBold; は CSSでは font-weight で表現します */
    font-size: 18px; /* 本文/L = 18px */
    /* leading-trim: NONE; はまだ標準CSSではないため省略 */
    line-height: 2.0; /* 200% = 2.0 */
    letter-spacing: 0.046em; /* 5% = 0.05em */
    text-align: center;
    color: #FFFFFF; /* 既存の設定を引き継ぐ場合 */
    padding:20px 0px 20px 0px;
}

.gaiyou-temae-text-3{
    font-family: "Zen Old Mincho", serif;
    font-weight: 500;
    /* font-style: SemiBold; は CSSでは font-weight で表現します */
    font-size: 18px; /* 本文/L = 18px */
    /* leading-trim: NONE; はまだ標準CSSではないため省略 */
    line-height: 2.0; /* 200% = 2.0 */
    letter-spacing: 0.05em; /* 5% = 0.05em */
    text-align: center;
    color: #FFFFFF; /* 既存の設定を引き継ぐ場合 */
    padding:20px 0px 20px 0px;
}

.gaiyou-temae-text-4{
    font-family: "Zen Old Mincho", serif;
    font-weight: 500;
    /* font-style: SemiBold; は CSSでは font-weight で表現します */
    font-size: 18px; /* 本文/L = 18px */
    /* leading-trim: NONE; はまだ標準CSSではないため省略 */
    line-height: 2.0; /* 200% = 2.0 */
    letter-spacing: 0.05em; /* 5% = 0.05em */
    text-align: center;
    color: #FFFFFF; /* 既存の設定を引き継ぐ場合 */
    padding:10px 0px 0px 0px;
}
.gaiyou-temae-box-parent{
    padding:0 40px;
    width:100%;
}
/* 概要ボックス全体 */
.gaiyou-temae-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 上:100px 左右:97px 下:60px (基準幅1600pxに対して、幅1121pxのボックス内の余白) */
  /* 固定pxよりは比率で持たせたほうが縮小時に自然ですが、デザイン通り固定pxで指定し、
     幅が狭くなった時にpaddingを減らす方針にします */
  padding: 48px 97px 60px;
  
  /* 1600px時の幅比率: 1121 / 1600 = 約70% */
  width: 100%;
  max-width: 1120px;
  background: #FFFFFF;
  box-sizing: border-box; /* paddingを含めた幅計算 */
  margin: 0 auto 141px; /* 中央寄せ */
}

.gaiyou-temae-text{
    margin-bottom: 140px;
}

/* タイトル画像 */
.gaiyou-box-title  {
/* 1. 背景の設定 */
  background-image: url("../images/concert/pc-gaiyou1.webp");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;

  /* 見栄えの調整 */
  padding: 60px 20px; /* 上下に余白を持たせると画像が見えやすくなります */
  color: #2E4580;     /* 文字を白にして視認性を確保 */
  font-family: "Zen Old Mincho", serif;
font-weight: 900;
font-style: Black;
font-size: 44px;
line-height: 150%;
letter-spacing: 0%;
text-align: center;

        width: 334px;
        height: 100px;

}

/* コンテンツエリア */
.gaiyou-box-content {
  display: flex;
  flex-direction: column;
  width: 100%; /* 親要素(padding除いたエリア)いっぱい */
  max-width: 927px; /* デザイン上のコンテンツ幅 */
  margin:24px 0 0 0;
}



/* 各行アイテム */
.gaiyou-box-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start; /* 上揃え (テキストが複数行の場合に対応) */
  padding: 19px 0px; /* 下線との距離 */
  border-bottom: 2px dotted #566CA4; /* Figma: Vector (破線) */
  gap: 24px; /* ラベルとテキストの間隔 */
  width: 100%;
}



.gaiyou-box-item:nth-last-of-type(2) {
  border-bottom: none;
}

/* ラベル (紺色の背景) */
.gaiyou-box-label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 40px;
  background: #2E4580;
  
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 18px; /* 18px */
  line-height: normal; /* または 2.0 */
  text-align: center;
  color: #FFFFFF;
  
  flex-shrink: 0; /* 幅固定 */
  padding:14px 2px;
}

/* テキストエリア */
.gaiyou-box-text,
.agaiyou-box-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 40px; /* ラベルと高さを合わせる */
  
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 24px; 
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #2E4580;
}

/* 注釈 (小さい文字) */
.gaiyou-box-note {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 14px; /* 14px */
  line-height: 1.6;
  color: #2E4580;
  letter-spacing: 0em;
  margin-top: 4px;
}

.gaiyou-box-note-2 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 14px; /* 14px */
  line-height: 1.6;
  color: #2E4580;
  letter-spacing: 0em;
}

.gaiyou-box-note-link {
  color: -webkit-link;
  color: linktext;
  text-decoration: underline;
  cursor: pointer;
}

.gaiyou-box-note-3 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 18px; /* 14px */
  line-height: 1.6;
  color: #2E4580;
  letter-spacing: 0em;
}
.gaiyou-box-note-parent{
    margin-top:-8px;
}

/* 赤字注釈 */
.gaiyou-box-note-alert {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 14px; /* 14px */
  line-height: 1.6;
  color: #DE2682;
  letter-spacing: 0em;
  margin-top: 4px;
}

/* 時間表示の行 */
.gaiyou-box-time-row {
  display: block;
}

/* ボタンエリア */
.gaiyou-box-footer {
   display: flex;
    align-items: center; 
     justify-content: center; 
     width:100%;
}

/* ボタン本体 */
.gaiyou-box-btn-entry {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 386px;
  height: 67px;
  max-width: 100%;
  margin:20px auto 0;
  
  background: #FFEC55;
  border: 2px solid #2E4580;
  border-radius: 70px;
  
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: var(--font-size-lg); /* 18px */
  line-height: 1.6;
  text-align: center;
  color: #2E4580;
  text-decoration: none;
  
  /* 立体的な影 (Frame 21) */
  box-shadow: 1px 8px 0 #FFF, 1px 8px 0 2px #2E4580;
  transition: transform 0.2s, box-shadow 0.2s;

}

.gaiyou-box-btn-entry:hover {
  transform: translate(0px,6px);
  box-shadow: 0px 0px 0px #FFF, 0px 0px 0px 0px #2E4580;
}

/* ボタン内アイコン (Font Awesome) */
.gaiyou-box-arrow-down::after {
  content: "\f078"; /* fa-chevron-down */
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: 10px;
  font-size: 18px;
}

/* 下部の装飾画像 */
.gaiyou-temae-img {
   z-index:100;
   width:100vw;
}

.gaiyou-temae-img-img {
    width: 100%; 
    
   z-index:100;
}


.performer-haikei{
    background-color: #FF69B4;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -5; /* 一番奥 */
    /* 背景画像がはみ出さないように調整する場合 */
    overflow: hidden; 
}


.performer-haikei-img{
     width: 100%;
    height: 100%;
}

.performer-haikei-img-img{
    width: 100%;
    height: 100%;
    
    /* 変更点1：画像をリサイズせず、原寸大のまま表示する */
    object-fit: none; 
    
    object-position: center top;

}

.performer-parent {
    position: relative; /* 子要素のabsoluteの基準点 */
    width: 100%;
    /* 必要に応じて高さを指定してください。例: min-height: 100vh; */
}

.performer-temae{
    display: flex;      /* 折り返しを許可 */
    flex-direction: column; 
    justify-content: center; /* 左右中央揃え（お好みで space-between でもOK） */
    gap: 40px;             /* アイテム同士の間隔（横・縦ともに40px） */
    
    width: 100%;           /* 幅指定 */
    max-width: 1200px;     /* 全体の最大幅（適宜調整） */
    margin: 0 auto ;
    padding :0 40px 113px;        /* 中央寄せ */
}

.performer-title {

/* 1. 背景の設定 */
    background-image: url("../images/concert/pc-performer2.webp");
    background-size: 94% 88%;
    background-position: center;
    background-repeat: no-repeat;

     /* 見栄えの調整 */
    padding: 60px 20px; /* 上下に余白を持たせると画像が見えやすくなります */
    color: #ffffff;     /* 文字を白にして視認性を確保 */
    font-family: "Zen Old Mincho", serif;
    font-weight: 900;
    font-style: Black;
    font-size: 44px;
    line-height: 150%;
    letter-spacing: 0%;
    text-align: center;

    width: 334px;
    height: 100px;
    margin: 19px auto 6px;

}

.performer-content-parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列にする */
  grid-template-rows: auto; 
  gap: 52px; /* 要素間の隙間（任意） */
}

/* 5枚目: 2列グリッドで最終行中央揃え */
.performer-content5 {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 26px); /* gap: 52px の半分を引く */
    max-width: 100%;
}

/* ...existing code... */

/* --- 出演者ボックス (concert_guest_wrap) --- */
/* コンテンツ1, 2: テキスト伸長設定あり */
.performer-content1,
.performer-content2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    
    height: 100%; /* 高さ揃えのために親の高さいっぱいに広げる */
    max-width: 100%; /* はみ出し防止 */
    
    background: #FFFFFF;
    overflow: hidden; /* 角丸を効かせるため */
    
    /* 余白など（必要に応じて調整） */
    margin: 0 auto 40px; 
}

/* コンテンツ3, 4, 5: 下揃え適用 */
.performer-content3,
.performer-content4,
.performer-content5 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 0 20px;
    
    height: 100%; /* 高さ揃えのために親の高さいっぱいに広げる */
    max-width: 100%; /* はみ出し防止 */
    
    background: #FFFFFF;
    overflow: hidden; /* 角丸を効かせるため */
    
    /* 余白など（必要に応じて調整） */
    margin: 0 auto 40px; 
}

/* メイン画像 (concert_guest_pic) */
.performer-content1-img,
.performer-content2-img {
    width: 100%;
    /* 高さは画像比率に任せるか、Figma指定(287px)にするか */
    /* ここでは画像自体を表示するため height: auto推奨 */
    height: auto; 
    line-height: 0; /* 画像下の隙間対策 */
}

.performer-content3-img,
.performer-content4-img,
.performer-content5-img {
    width: 100%;
    /* 高さは画像比率に任せるか、Figma指定(287px)にするか */
    /* ここでは画像自体を表示するため height: auto推奨 */
    height: auto;
    line-height: 0; /* 画像下の隙間対策 */
}

.performer-content1-img-img,
.performer-content2-img-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.performer-content3-img-img,
.performer-content4-img-img,
.performer-content5-img-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}


.performer-content1-title-parent,
.performer-content2-title-parent {
    position: relative; /* concert_guest_txt の配置用 */
    width: 100%;
    box-sizing: border-box;
    padding: 20px 32px 16px; /* 上20px 左右32px (下はgap分考慮) */
    background: #FFFFFF;
    display:flex;
}


.performer-content3-title-parent,
.performer-content4-title-parent,
.performer-content5-title-parent {
    position: relative; /* concert_guest_txt の配置用 */
    width: 100%;
    box-sizing: border-box;
    padding: 20px 32px 16px; /* 上20px 左右32px (下はgap分考慮) */
    background: #FFFFFF;
    display:flex;
}

/* 肩書き (concert_guest_position_tag) */
.performer-content1-title-katagaki,
.performer-content2-title-katagaki {
    display: inline-flex; /* 幅をコンテンツに合わせる */
    justify-content: center;
    align-items: center;
    padding: 2px 16px;
    gap: 10px;
    
    min-height: 26px;
    background: #566CA4;
    border-radius: 40px;
    
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.6; /* 160% */
    color: #FFFFFF;
    
    /* 配置調整 */
    margin-bottom: 8px; /* 名前との間隔 */
}

.performer-content3-title-katagaki,
.performer-content4-title-katagaki {
    display: inline-flex; /* 幅をコンテンツに合わせる */
    justify-content: center;
    align-items: center;
    padding: 2px 16px;
    gap: 10px;
    
    height: 26px;
    background: #566CA4;
    border-radius: 40px;
    
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.6; /* 160% */
    color: #FFFFFF;
    
    /* 配置調整 */
    margin-bottom: 8px; /* 名前との間隔 */
    visibility: hidden;

}

/* 名前エリア (concert_guest_name_txt) */
.performer-content1-title-name,
.performer-content2-title-name{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


.performer-content3-title-name,
.performer-content4-title-name,
.performer-content5-title-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}



.performer-content1-title-box,
.performer-content2-title-box{
    height:95px;
}


.performer-content3-title-box,
.performer-content4-title-box {
    height:95px;
}

.performer-content5-title-box {
    height:auto;
}

/* ふりがな */
.performer-content1-title-name-hurigana,
.performer-content2-title-name-hurigana {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 17px;
    color: #2E4580;
    margin-bottom: -5px; /* Figma: margin: -7px 0px; の調整 */
}

.performer-content3-title-name-hurigana,
.performer-content4-title-name-hurigana,
.performer-content5-title-name-hurigana {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 17px;
    color: #2E4580;
    margin-bottom: -5px; /* Figma: margin: -7px 0px; の調整 */
}


/* 漢字名 */
.performer-content1-title-name-kannji,
.performer-content2-title-name-kannji{
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.6; /* 160% */
    color: #2E4580;
}


.performer-content3-title-name-kannji,
.performer-content4-title-name-kannji,
.performer-content5-title-name-kannji {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.6; /* 160% */
    color: #2E4580;
}

/* 動画を見るボタン (pink circle) */
.performer-content1-title-img,
.performer-content2-title-img{
    margin-left: auto;
    /* 右端からの位置 (paddingと同じ32px) */
    width: 95px;
    height: 95px;
}


.performer-content3-title-img,
.performer-content4-title-img {
    margin-left: auto;
    /* 右端からの位置 (paddingと同じ32px) */
    width: 95px;
    height: 95px;
}

.performer-content1-img-img,
.performer-content2-img-img {
    width: 100%;
    height: auto;
}


.performer-content3-img-img,
.performer-content4-img-img,
.performer-content5-img-img {
    width: 100%;
    height: auto;
}

/* 説明文 */
.performer-content1-text,
.performer-content2-text {
    flex-grow: 1; /* 余白を埋めるように伸長 */
    width: 100%;
    box-sizing: border-box;
    padding: 0 32px 0px; /* 左右32px 下20px */
    
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 18px; /* 本文/大 */
    line-height: 2.0; /* 200% */
    color: #2E4580;
}


.performer-content3-text,
.performer-content4-text,
.performer-content5-text {


    flex-grow: 1; /* 余白を埋めるように伸長 */
    width: 100%;
    box-sizing: border-box;
    padding: 0 32px 0px; /* 左右32px 下20px */
    
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 18px; /* 本文/大 */
    line-height: 2.0; /* 200% */
    color: #2E4580;
}


/* スケジュール部分 (点線の下) */
.performer-content1-scedule-parent,
.performer-content2-scedule-parent,
.performer-content5-scedule-parent {
    width: calc(100% - 64px); /* パディング分引く */
    margin: auto  32px; /* 上autoで下揃え、左右auto、下21px */
    padding: 20px 0;
    border-top: 2px dotted #566CA4; 
    gap:10x; 
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* アイコンとテキスト群を上揃え */
    font-family: 'Zen Kaku Gothic New', sans-serif;
}


.performer-content3-scedule-parent,
.performer-content4-scedule-parent {
    width: calc(100% - 64px); /* パディング分引く */
    margin: auto ; /* 下21px */
    padding: 0px;
    border-top: 2px dotted #566CA4;
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* アイコンとテキスト群を上揃え */
    height:calc(193px + (153.4 - 205) * ((100vw - 1024px) / (1600 - 1024)));
    font-family: 'Zen Kaku Gothic New', sans-serif;
}

.performer-content1-scedule-img,
.performer-content2-scedule-img{
    width: 20px;
    height: 20px;
    flex-shrink: 0; /* アイコンが潰れないように */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto 10px auto 0;
    margin: 0 10px 0 0;
}


.performer-content3-scedule-img,
.performer-content4-scedule-img,
.performer-content5-scedule-img {
    width: 20px;
    height: 20px;
    flex-shrink: 0; /* アイコンが潰れないように */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto 10px auto 0;
}



.performer-content1-scedule-text-parent,
.performer-content2-scedule-text-parent {
  display: grid;
  grid-template-columns: repeat(3, auto); /* 3列で表示 */
  gap: 3px 29px; /* 縦横の間隔 */
  color: #d0206e; /* 文字色（ピンク） */
  font-weight: 700; /* 太字 */
  font-size: 14px; 
  line-height: 1.4;
  padding:20px 0;
  margin:auto 0;

}


.performer-content3-scedule-text-parent,
.performer-content4-scedule-text-parent,
.performer-content5-scedule-text-parent {
  display: grid;
  grid-template-columns: repeat(3, auto); /* 3列で表示 */
  gap: 3px 20px; /* 縦横の間隔 */
  color: #d0206e; /* 文字色（ピンク） */
  font-weight: 700; /* 太字 */
  font-size: 14px;
  line-height: 1.6;
  margin:auto 0;
}


.performer-content1-scedule-text-parent > div,
.performer-content2-scedule-text-parent > div{
    display: flex;       /* 位置合わせのためFlexboxを使用 */
    align-items: center; /* 垂直方向中央揃え */
    padding-left: 0;     /* 左余白リセット */
    /* list-style: none; 不要な場合は削除（display: flexなら通常消えます） */
}


.performer-content3-scedule-text-parent > div,
.performer-content4-scedule-text-parent > div,
.performer-content5-scedule-text-parent > div{
    display: flex;       /* 位置合わせのためFlexboxを使用 */
    align-items: center; /* 垂直方向中央揃え */
    padding-left: 0;     /* 左余白リセット */
    /* list-style: none; 不要な場合は削除（display: flexなら通常消えます） */
}


/* 自作マーカー（点） */
.performer-content1-scedule-text-parent > div::before,
.performer-content2-scedule-text-parent > div::before{
    content: "";         /* 必須 */
    display: inline-block;
    width: 3px;          /* 点の幅 */
    height: 3px;         /* 点の高さ */
    background-color: #333; /* 点の色 */
    border-radius: 50%;  /* 丸くする */
    margin-right: 8px;   /* テキストとの間隔 */
    flex-shrink: 0;      /* 点が潰れないようにする */
    /* 位置微調整が必要なら transform: translateY(1px); */
}


.performer-content3-scedule-text-parent > div::before,
.performer-content4-scedule-text-parent > div::before,
.performer-content5-scedule-text-parent > div::before{
    content: "";         /* 必須 */
    display: inline-block;
    width: 3px;          /* 点の幅 */
    height: 3px;         /* 点の高さ */
    background-color: #333; /* 点の色 */
    border-radius: 50%;  /* 丸くする */
    margin-right: 8px;   /* テキストとの間隔 */
    flex-shrink: 0;      /* 点が潰れないようにする */
    /* 位置微調整が必要なら transform: translateY(1px); */
}





.performer-content1-sceedule-img-img,
.performer-content2-sceedule-img-img {
    width: 20px;
    height: auto;
}



.performer-content3-sceedule-img-img,
.performer-content4-sceedule-img-img,
.performer-content5-sceedule-img-img {
    width: 20px;
    height: auto;
}



/* スケジュールテキスト */
.performer-content1-scedule-text,
.performer-content2-scedule-text {

    /* PC版: 3列表示 */
    /* gap分の幅を引いて3等分する計算 */
    /* gap: 10px * 2箇所(間) = 20px */
    width: calc((100% - 20px) / 3);
    
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.6;
    color: #DE2682;
    box-sizing: border-box;
}


.performer-content3-scedule-text,
.performer-content4-scedule-text,
.performer-content5-scedule-text {

    /* PC版: 3列表示 */
    /* gap分の幅を引いて3等分する計算 */
    /* gap: 10px * 2箇所(間) = 20px */
    width: calc((100% - 20px) / 3);
    
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.6;
    color: #DE2682;
    box-sizing: border-box;
}


.performer-content4-scedule-text-parent-none{
    visibility: hidden;
}



/* "に出演" の色変更 */
.schedule-suffix {
    color: #2E4580; /* 黒色 */
}

/* 最後のアイテムだけ2列分（または全幅）使う */
.schedule-last-item {
    grid-column: span 2; /* 2列分結合して幅を確保 */
    white-space: nowrap; /* 折り返し禁止 */
}

.schedule-last-item-2 {
    white-space: nowrap; /* 折り返し禁止 */
}



.program-parent {
    position: relative; /* 子要素のabsoluteの基準点 */
    width: 100%;
    /* 必要に応じて高さを指定してください。例: min-height: 100vh; */
}
.program-haikei{
    background-color: #FF69B4;
    background: linear-gradient(to bottom, 
    #FF69B4 0%, 
    #FF69B4 50%, 
    #3150A0 50%, 
    #3150A0 100%);
   position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 861px;
    z-index: -5; /* 一番奥 */
    /* 背景画像がはみ出さないように調整する場合 */
    overflow: hidden; 
    
}

.program-haikei-img{
    width: 100%; /* 100vw ではなく 100% 推奨 */
    height: 100%;
}

/* ...existing code... */
.program-haikei-img-img {
    width: 100%;
    height: 861px;
    /* center = 左右中央, top = 上端固定 */
    object-position: center top; 
}
/* ...existing code... */

.program-temae {
    position: relative;
    z-index: 10; /* 背景より手前（数字が大きいほど手前） */
    
    display: flex;
    flex-wrap: wrap;       /* 折り返しを許可 */
    justify-content: center; /* 左右中央揃え（お好みで space-between でもOK） */
    
    width: 100%;           /* 幅指定 */
    max-width: 1200px;     /* 全体の最大幅（適宜調整） */
    margin: 0 auto;        /* 中央寄せ */
    padding: 0px 0 0 0;
    height:861px
}

.program-title{
    padding: 100px 0 0 0;
        background-image: url("../images/concert/pc-program2.webp");
    background-size: 99% 86%;
    background-position: center;
    background-repeat: no-repeat;

     /* 見栄えの調整 */
    padding: 60px 20px; /* 上下に余白を持たせると画像が見えやすくなります */
    color: #2E4580;     /* 文字を白にして視認性を確保 */
    font-family: "Zen Old Mincho", serif;
    font-weight: 900;
    font-style: Black;
    font-size: 44px;
    line-height: 150%;
    letter-spacing: 0%;
    text-align: center;

    width: 483px;
    height: 122px;
    margin: 94px auto -60px;
}


/* ...existing code... */

/* --- Program / Setlist Section --- */

.program-content {
    /* 親要素で中央寄せ */
    display: flex;
    justify-content: center;
    width: 100%;
    transform: translateY(-29px);
}

/* セットリスト全体を囲むラッパー */
.setlist_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    max-width: 928px;
    /* heightはコンテンツなりで伸びるようにauto推奨 */
    height: auto;
    
    margin: 0 auto;
    padding:0 0px;
}

/* 曲リストのコンテナ (2列配置) */
.setlist_grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    /* 縦の隙間16px、横の隙間32px */
    gap: 16px 32px;
    
    width: 100%;
}

/* 各曲のアイテムブロック */
.setlist_item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    
    /* 2列にする計算: (100% - gap横32px) / 2 */
    width: calc(50% - 16px);
    /* height固定だと文字数によってはみ出るのでmin-height推奨ですが、
       デザイン再現のためFigmaの高さ基準に合わせます */
    min-height: 64px; 
}

/* 歌手名と曲名の行 */
.setlist_item_row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px; /* 歌手名と曲名の間の隙間 */
    width: 100%;
}

/* 歌手名ラベル (ピンクの楕円) */
.setlist_artist_label {
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 0 16px; を入れつつ幅固定にするか、Figma通り固定にするか等 */
    width: 124px;
    height: 32px;
    background: #DE2682;
    border-radius: 44px;
    flex-shrink: 0; /* 縮まないように */
    margin-left:46px;
}

/* 歌手名のテキスト */
.setlist_artist_name {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: normal; /* デザイン調整 */
    text-align: center;
    color: #FFFFFF;
}

/* 曲名テキスト */
.setlist_song_name {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    color: #2E4580;
}

/* 点線ボーダー */
.setlist_border {
    width: 100%;
    height: 0px;
    border-bottom: 2px dotted #566CA4;
    translate:0px 6px;
}

/* フッターのピンク帯「【一部抜粋】」 */
.setlist_footer_bar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 27px;
    background: #FFC7E8;
    margin-top: 16px;
}

.setlist_footer_text {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.2em;
    color: #FF69B4; /* 文字色ピンク */
    /* 背景が薄ピンクなので文字が見えるか確認。Figma指定は白文字#FF69B4 ?
       指定コードでは color: #FF69B4 となっています */
}

/* 注意書きテキスト */
.setlist_notes {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 24px;
}

.setlist_note_text {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    color: #2E4580;
}

.information-title  {
  width: 927px; /* Figma: 927px */
  max-width: 100%;
  height: auto;
}

/* Information Box Styles */
.information-box1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 75px 20px 80px;
    width: 100%;
    max-width: 1322px;
    margin: 0 auto;
    background: #FFFFFF;
    box-sizing: border-box;
    margin: 113px 0 0 0;
}

.information-title {
    
    padding: 100px 0 0 0;
        background-image: url("../images/concert/pc-information1.webp");
    background-size: 100% 91%;
    background-position: center;
    background-repeat: no-repeat;

     /* 見栄えの調整 */
    padding: 60px 20px; /* 上下に余白を持たせると画像が見えやすくなります */
    color: #2E4580;     /* 文字を白にして視認性を確保 */
    font-family: "Zen Old Mincho", serif;
    font-weight: 900;
    font-style: Black;
    font-size: 44px;
    line-height: 150%;
    letter-spacing: 0%;
    text-align: center;

    width: 620px;
    height: 122px;
    margin: 0px auto 40px;
}

/* Attention Box */
.information-box1-attention-box {
    width: 100%;
    max-width: 1122px;
    margin: 0 auto;
}

.information-box1-attention-title {
    background: #FC6746;
    color: #FFFFFF;
    text-align: center;
    padding: 12px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.05em;
}

.information-box1-attention-text {
    background: #FFE9E4;
    padding: 20px 23px;
    margin: 0;
}

.information-box1-attention-list {
    list-style-type: disc;
    padding-left: 20px;
    margin: 0;
}

.information-box1-attention-list li {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.6;
    color: #2E4580;
}

.information-box1-attention-note {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.6;
    color: #2E4580;
    margin: 10px 0 0;
}

/* Venue List */
.information-box1-content {
    width: 100%;
    max-width: 1122px;
    display: flex;
    flex-direction: column;
    gap: 0; 
    margin-top:10px;
}

.venue-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px dotted #667BAF;
}

/* �Ō�̗v�f�����{�[�_�[�����ꍇ */
.venue-row:last-child {
    border-bottom: none;
}

.venue-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    margin:23px 0px;
    padding:10px 0px;
}

.venue-info-2{
    display: flex;
    flex-direction: row;
    align-items: center;
    
    margin:auto 0px;
}

.venue-pref {
    background: #2E4580;
    color: #FFFFFF;
    padding: 6px 16px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 18px;
    width: 92px;
    height:40px;
    text-align: center;
    white-space: nowrap;
    margin:0px 20px 0px 0; 
    display: inline-flex; /* インラインのまま、中身をFlex制御できるようにする */
  align-items: center;  /* 上下中央 */
  justify-content: center; /* 左右中央 */
}

.venue-date {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #2A85B2;
    letter-spacing: 0.05em;
    white-space: nowrap;
    margin-right:40px;
    line-height:1.5;
    width:177px;
}

.venue-name {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #2E4580;
    line-height: 1.5;
    margin-right:20px;
    margin-top:5px;
}

/* MAP Icon */
.venue-map {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    margin-left: auto; /* info���ʼnE�񂹋C���ɂ���ꍇ */
    /* ���邢�� venue-info��gap����Ȃ� margin-left �s�v */
    margin-right:93px;
}

.venue-map-text {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 10px;
    color: #FF69B4;
}

.venue-map-icon {
    width: 40px;
    height: 40px;
    background: #FFEBF5;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FF69B4;
    font-size: 18px;
}

/* Buttons */
.venue-action {
    flex-shrink: 0;
}

.btn-finished {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 202px;
    height: 67px;
    background: #CCCCCC; /* �O���[ */
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #FFFFFF; /* �f�U�C���w��ɋ߂� */
    border-radius: 70px;
    color: #2E4580;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 18px;
}

.btn-entry {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 202px;
    min-height: 67px;
    background: #FFEC55;
    border-radius: 70px;
    color: #2E4580;
    text-decoration: none;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 18px;
    gap: 2px 10px;
    padding: 8px 10px;
    box-sizing: border-box;
    transition: opacity 0.3s;
}

.btn-entry-deadline {
    width: 100%;
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}

.btn-before {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 202px;
    height: 67px;
    background: #FFFFFF;
    border: 3px dashed #999999;
    border-radius: 70px;
    color: #999999;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.2em;
    box-sizing: border-box; /* To include border in width/height */
}

.btn-entry:hover {
    opacity: 0.8;
}



/* Information Box 2 (Sponsors) */
.information-box2 {
    width: 100%;
    background-color: #FFFFFF;
    padding: 0 20px 100px;
    display: flex;
    justify-content: center;
}

.information-box2-list {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.information-box2-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    height:66px;
    margin-right:32px;
}

.information-box2-role-1{
    background-color: #2E4580;
    color: #FFFFFF;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    padding:  10px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    height:40px;
    width:56px;
    margin:0  12px 0 29px;
}

.information-box2-role-2{
    background-color: #2E4580;
    color: #FFFFFF;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    padding:  10px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    height:40px;
    width:164px;
    margin:0  12px 0 0;
}
.information-box2-role-3{
    background-color: #2E4580;
    color: #FFFFFF;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    padding:  10px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    height:40px;
    width:56px;
    
    margin:0  12px 0 0;
}


.information-box2-logo-1 {
    height: auto;
    width: auto;
    max-width: 100%;
    display: block;
    width:368.5px;
    height:40.99px;
}

.information-box2-logo-2 {
    height: auto;
    width: auto;
    max-width: 100%;
    display: block;
    width:265px;
    height:56px;
}

.information-box2-logo-3{
    height: auto;
    width: auto;
    max-width: 100%;
    display: block;
    width:240px;
    height:66px;
}

.information-box2-logo-1-img{
    width: 100%;
    height:100%;

}





/* Main Information Section Background */
.information {
    background-color: #3150A0 ; /* Blue background */
    padding: 10px 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Update Box 2 to be a card like Box 1 */
.information-box2 {
    width: 100%;
    max-width: 1322px; /* Match Box 1 width */
    margin: 0 auto;
    background-color: #FFFFFF;
    padding: 27px 0px; /* Internal padding */
    box-sizing: border-box;
    /* Reset previous full-width styles if necessary */
    display: flex;
    justify-content: center;
    border-radius: 0; /* Or match Box 1 if it has radius */
    margin:80px 0 120px;
}

.information-bottom {
    height: 100%;
    width: 100vw;
}

/* 子要素：親の幅に従う */
.information-bottom-img {
    width: 100%;
}

/* 画像本体：ここが重要 */
.information-bottom-img img {
    width: 100%;    /* 横幅を親要素（100vw）に合わせる */
    height: auto;   /* 横幅に合わせて縦を自動調整（比率維持） */
    display: block; /* 下部の謎の隙間を消す */
}




.charity-haikei-curve-img{
    width:100vw;

}


.charity-haikei-curve-img-img{
    width: 100%;
    height: 100%;
    object-fit: cover; /* 比率を保って隙間なく埋める */


}
.charity-haikei-main{
    background-color: #877764;
}

.charity-parent{
    position: relative; /* 子要素のabsoluteの基準点 */
    width: 100vw;
    
}

.charity-haikei{
    position: absolute;
    height: 100%;
    width:100%;
    z-index: -5; /* 一番奥 */
}

.charity-haikei-main{
    height:100%;
}
.charity-temae{
    position: relative;
    z-index: 10; 
    display: flex;
  flex-direction: column; /* 縦に並べる設定 */
  align-items: center;    /* 横方向の中央寄せ */
  width:57.92%;
  margin: 0 auto;
  padding-top:152px;
}

.charity-text{
    margin: 60px 0 0 0;
    text-align: center;
    color: #FFFFFF;
font-weight: 600;
font-size: 18px;
line-height: 200%;
letter-spacing: 5%;
text-align: center;
font-family: "Zen Old Mincho", serif;
    font-weight: 600;

}


.charity-text-1{
    margin: 60px 0 0 0;
    text-align: center;
    color: #FFFFFF;
font-weight: 500;
font-size: 18px;
line-height: 200%;
letter-spacing: 5%;
text-align: center;
font-family: "Zen Old Mincho", serif;

}

.charity-text-2{
    margin: 35px 0 0 0;
    text-align: center;
    color: #FFFFFF;
font-weight: 500;
font-size: 18px;
line-height: 200%;
letter-spacing: 5%;
text-align: center;
font-family: "Zen Old Mincho", serif;

}


.charity-text-3{
    margin: 39px 0 0 0;
    text-align: center;
    color: #FFFFFF;
font-weight: 500;
font-size: 18px;
line-height: 200%;
letter-spacing: 5%;
text-align: center;
font-family: "Zen Old Mincho", serif;

}


.charity-text-4{
    margin: 39px 0 0 0;
    text-align: center;
    color: #FFFFFF;
font-weight: 500;
font-size: 18px;
line-height: 200%;
letter-spacing: 5%;
text-align: center;
font-family: "Zen Old Mincho", serif;

}



.charity-title{
        background-image: url(../images/concert/pc-charity2.webp);
        background-size: 100% 95%;
        background-position: center;
        background-repeat: no-repeat;
        padding: 60px 20px;
        color: #ffffff;
        font-family: "Zen Old Mincho", serif;
        font-weight: 900;
        font-style: Black;
        font-size: 44px;
        line-height: 150%;
        letter-spacing: 0%;
        text-align: center;
        width: 444px;
        height: 122px;
        margin: 0 auto 6px;
}

.charity-haikei-curve{
    background-color:#ffffff;
}

.charity-logo{
    padding: 40px 0 111px 0;
}




.charity-temae-img1 {
    position: absolute;
    /* 1024px時の位置（576px * 0.6 = 345.6px）を最小値に設定 */
    top: 60%;
    /* 1024px時の位置（1024px * 0.12 = 122.8px）を最小値に設定 */
    left: calc(70px + (192 - 70) * ((100vw - 1024px) / (1600 - 1024)));
    z-index: 12;
    width: 12%;
}

.charity-temae-img1-img {
    width: 100%;
    height: auto;
}

.charity-temae-img2 {
    position: absolute;
    top: 47.5%;
    left: calc(55px + (65 - 55) * ((100vw - 1024px) / (1600 - 1024)));
    z-index: 10;
    width: 16%;
}

.charity-temae-img2-img {
    width: 100%;
    height: auto;
}

.charity-temae-img3 {   
    position: absolute;
    z-index: 10;
    width: 16%;
    right: calc(55px + (90 - 55) * ((100vw - 1024px) / (1600 - 1024)));
    top: 29.5%;
    z-index: 10;
}

.charity-temae-img3-img {
    width: 100%;
    height: auto;
}

.report-title {

    background-image: url(../images/concert/pc-report1.webp);
    background-size: 100% 84%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 60px 20px;
    color: #2E4580;
    font-family: "Zen Old Mincho", serif;
    font-weight: 900;
    font-style: Black;
    font-size: 44px;
    line-height: 150%;
    letter-spacing: 0%;
    text-align: center;
    width: 359px;
    height: 122px;
    margin: 60px auto 43px;
}



/* =========================================
   Report Section (PC)
   ========================================= */



   .report {
    width: 100%;
    padding-bottom: 100px;
    background-color: #fff; /* 背景色（適宜調整） */
    overflow: hidden;
}



/* スライダー全体 */
.report-slider {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 40px;
}


/* スライド内のカード (デフォルト: 480px固定) */
.report-card {
    width: 480px;
    margin: 0 15px;
    box-sizing: border-box;
    transition: transform 0.3s;
    opacity: 1;
    transform: none;
}



/* 最初のカードの左余白 */
.report-card:first-child {
    margin-left: 1vw;
}

/* 最後のカードの右余白 */
.report-card:last-child {
    margin-right: 1vw;
}

/* 中央のカレントスライド */
.report-card.slick-center {
    opacity: 1;
    transform: none;
    z-index: 10;
}

/* リンクエリア */
.report-card__link {
    display: block;
    position: relative;
    width: 100%;
    text-decoration: none;
    color: #fff;
    /* 角丸なし、または微調整 */
    border-radius: 0; 
    overflow: hidden; 
    box-shadow: none; /* 影なし */
}

/* 画像ボックス */
.report-card__img-box {
    position: relative;
    width: 100%;
    /* アスペクト比固定 480:320 = 3:2 */
    padding-top: 66.66%; 
    height: auto; 
    background: #000;
}

.report-card__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.report-card__link:hover .report-card__img {
    transform: scale(1.05); /* ホバー時に画像ズーム */
}

/* 右下の＋ボタン */
.report-card__overlay {
    position: absolute;
    bottom: 25px;
    right: 32px;
    width: 60px;
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 8;
}

.report-card__plus {
    font-size: 30px;
    color: #2E4580; /* 紺色 */
    line-height: 1;
    font-weight: 400; /* 細めにする */
}

/* 左下のテキスト情報 */
.report-card__info {
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    /* グラデーションや余白調整 */
    padding: 23px 0px 16px 33px;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
    z-index: 2;
    text-align: left;
    box-sizing: border-box;
}

.report-card__date {
    color: #fff;
    margin-bottom: 2px;
    display: block;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
    letter-spacing: 0.05em;
}

.report-card__area {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 150%;
    letter-spacing: 0.05em;
    color: #fff;
    display: block;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    
}

/* プログレスバーエリア */
.report-progress {
    width: 34%;
    margin: 21px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.report-progress__current,
.report-progress__total {
    color: #2E4580;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0;
}

.report-progress__bar {
    flex: 1;
    height: 10px;
    background-color: #2E4580; /* ベースの色（紺） */
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.report-progress__indicater {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%; /* JSで制御 */
    background-color: #FF69B4; /* 進捗色（ピンク） */
    transition: width 0.3s ease;
}


.report-slider .slick-track {
    display: flex;
    align-items: flex-start;
}


.report-card {
    width: 34vw;
    margin: 0 1vw;
}

}

















/*スマホ、タブレット版*/






@media (max-width: 1023px)  {
    

.main-concert{
    width: 100%;
}

/* レポートカード間隔 SP: 2.93% (左右1.465%ずつ) */
/* → 実際のレイアウト指定はファイル後半の SP 用 @media ブロックで行う */

.concert-hero {
    position: relative;
}

.hero-parent {
    position: relative; /* 子要素のabsoluteの基準点 */
    width: 100%;
    /* 必要に応じて高さを指定してください。例: min-height: 100vh; */
}
.hero-haikei{
    background-color: #FF69B4;
   position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -5; /* 一番奥 */
    /* 背景画像がはみ出さないように調整する場合 */
    overflow: hidden; 
}

.hero-haikei-img{
    width:100vw;
}

.hero-haikei-img-img {
    width: 100%;
    height: 100%;
    
    /* 変更点1：画像をリサイズせず、原寸大のまま表示する */
    object-fit: none; 
    
    /* 変更点2：画像の「中心」を常に画面の「中心」に合わせる */
    object-position: center center;
    
    /* 補足：もし画像が大きすぎてSPでは縮小したい場合は、メディアクエリで cover に戻すことも検討 */
}

.hero-temae {
    position: relative;
    z-index: 10; /* 背景より手前（数字が大きいほど手前） */
}

/* テキスト画像のエリアを中央揃えにする設定 */
.hero-temae-text {
    width: 100%;             /* 横幅いっぱいに広げる */
    display: flex;           /* Flexboxを使う */
    justify-content: center; /* 水平方向（左右）の真ん中に配置 */
    padding:100px 0 40px ;
}

/* 画像自体への指定 */
.hero-temae-text-img {
    /* 画面幅の 10/16 = 0.625 なので 62.5vw と指定 */
    width: 90%;           
    height: auto;            /* 高さは比率を保って自動調整 */
    margin: 0px 0px 0px;
}

.hero-temae-text-img img {
    width: 100%;
    height: auto;
}



.hero-temae-human {
  display: grid;
   /* 1fr 1fr = 1対1の比率で2列作る（自動で50%ずつになる） */
    grid-template-columns: 1fr 1fr; 
    /* 縦横の隙間を一括指定 */
    gap: 16px 11px;  
    /* PC版のFlex設定を上書きするための調整 */
    width: 91.73%;
    margin: 0 auto;
    position: relative;
}

    
    /* メインの黄色いボタン */
    .performer-cta-sp-link {
        /* オートレイアウト */
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 22px 34px;
        gap: 11px;
        
        width: 216px;
        height: 58px; /* 黄色ボタンの高さ */
        
        background: #FFEC55;
        border-width: 2px 2px 0px 2px;
        border-style: solid;
        border-color: #2E4580;
        border-radius: 10px 10px 0px 0px;
        
        text-decoration: none;
        box-sizing: border-box;

        position: absolute;
        top: 5px;
        left: 0;
        z-index: 2; /* 手前 */
        pointer-events: auto; 
        cursor: pointer;
    }

    /* 白い下地ボタン (擬似要素) */
    .performer-cta-sp::before {
        content: "";
        display: block;
        
        /* 白ボタンのスタイル */
        width: 216px;
        height: 62px; /* 白ボタンの高さ */
        
        background: #FFFFFF;
        border-width: 2px 2px 0px 2px;
        border-style: solid;
        border-color: #2E4580;
        border-radius: 10px 10px 0px 0px;
        
        position: absolute;
        top: -4px; /* 黄色(top:0基準の場合)より少し上に出す */
        /* もしくは黄色を bottom:0 にして、これを top:0 にする */
        left: 0;
        z-index: 1; /* 奥 */
        box-sizing: border-box;
    }

    /* 調整: 親要素内での配置 */
    /* 親(.performer-cta-sp) の高さを白ボタン+ズレ分確保して相対配置 */
    
    /* 書き直し */
.performer-cta-sp {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 216px;
    height: 63px;
    padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0-11.2 */
    padding-bottom: env(safe-area-inset-bottom, 0px);

    /* 中央揃え */
    margin: 0 auto;

    z-index: 99;
    pointer-events: none;
    transition: opacity 0.3s, visibility 0.3s;
}

.performer-cta-sp.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
    
    
.performer-cta-sp-link {
        /* ...スタイル... */
        /* 黄色ボタンは height: 58px */
        height: 58px;
        bottom: auto;
        /* 提示情報: 白 top:748, 黄 top:753 (5px下) */
        top: 5px; 
        left: 0;
    }
    
    .performer-cta-sp::before {
        /* ...スタイル... */
        height: 62px;
        top: 0;
        left: 0;
    }

 
    .performer-cta-sp-text {
        font-family: 'Zen Kaku Gothic New', sans-serif;
        font-weight: 700;
        font-size: 14px;
        line-height: 1;
        text-align: center;
        color: #2E4580;
        white-space: nowrap;
    }

    .performer-cta-sp-icon {
        font-size: 14px;
        color: #2E4580;
    }
.performer-item {
        width: 100%;      /* グリッドの枠いっぱいに広げる */
        max-width: none;  /* PC版の制限（もしあれば）を解除 */
        flex: unset;      /* Flexの設定を無効化 */
        z-index: 1;
}

.performer-item img {
  width: 100%;
  height: auto;
  display: block;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.performer-content3-scedule-text-parent > div,
.performer-content4-scedule-text-parent > div,
.performer-content5-scedule-text-parent > div{
    display: flex;       /* 位置合わせのためFlexboxを使用 */
    align-items: center; /* 垂直方向中央揃え */
    padding-left: 0;     /* 左余白リセット */
    /* list-style: none; 不要な場合は削除（display: flexなら通常消えます） */
}

.concert-gaiyou {
    position: relative;
}

.gaiyou-parent{
    position: relative; /* 子要素のabsoluteの基準点 */
    width: 100%;
    
}

.gaiyou-haikei{
    transform: translateY(-220px);
}

.gaiyou-haikei-img{
    width:100vw;
    height:100%;
}

.gaiyou-haikei-img-img{
    width: 100%;
    height: 100%;
    
    /* 変更点1：画像をリサイズせず、原寸大のまま表示する */
    object-fit: none; 
    
    /* 変更点2：画像の「中心」を常に画面の「中心」に合わせる */
    object-position: calc(50% - -61px) top;
    translate:0 103px;
    
    /* 補足：もし画像が大きすぎてSPでは縮小したい場合は、メディアクエリで cover に戻すことも検討 */

}

.gaiyou-haikei{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0; /* 一番奥 */
    /* 背景画像がはみ出さないように調整する場合 */
    overflow: hidden; 
    background-color: #2E4580;
    height: calc(100% + 220px);

}

.gaiyou-temae{
    display: flex;
    flex-direction: column; /* 子要素を縦に並べる */
    align-items: center;    /* 縦並びのとき、水平方向の中央に揃える */
    
    position: relative;
    z-index: 10; /* 背景より手前（数字が大きいほど手前） */ 
    padding: 85px 0 0 0; /* 上 右 下 左 */
    
}

.gaiyou-temae-box-parent{
    width:100%;
}


.performer-item-img1{
    position: absolute;
    left:-31px;
    top:-17px;
    width:29%;
    z-index: 2;
}
.performer-item-img1-img{
    width:100%;
    height:100%;
}

.performer-item-img2{
    position: absolute;
    width:27%;
    bottom: -60px;
    right:-24px;
    z-index: 0;


}

.performer-item-img2-img{
    width:100%;
    height:100%;
}
.gaiyou-temae-text-1 { /* 該当するクラス名に合わせてください */
    font-family: "Zen Old Mincho", serif;
    font-weight: 900; /* Black */
    font-size: 20px; /* 見出し/M = 24px (推定) */
    line-height: 1.5; /* 150% */
    letter-spacing: 4%; /* -20% */
    text-align: center;
    color: #FFFFFF;
    /* 既存のpaddingがあれば引き継ぎ */
    padding: 0px 0px 20px 0px;
}

.gaiyou-temae-text-2{
   font-family: "Zen Old Mincho", serif;
    font-weight: 500;
    /* font-style: SemiBold; は CSSでは font-weight で表現します */
    font-size: 14px; /* 本文/L = 18px */
    /* leading-trim: NONE; はまだ標準CSSではないため省略 */
    line-height: 2.0; /* 200% = 2.0 */
    letter-spacing: 0.05em; /* 5% = 0.05em */
    text-align: center;
    color: #FFFFFF; /* 既存の設定を引き継ぐ場合 */
    padding:20px 0px 20px 0px;
}

.gaiyou-temae-text-3{
    font-family: "Zen Old Mincho", serif;
    font-weight: 500;
    /* font-style: SemiBold; は CSSでは font-weight で表現します */
    font-size: 14px; /* 本文/L = 18px */
    /* leading-trim: NONE; はまだ標準CSSではないため省略 */
    line-height: 2.0; /* 200% = 2.0 */
    letter-spacing: 0.05em; /* 5% = 0.05em */
    text-align: center;
    color: #FFFFFF; /* 既存の設定を引き継ぐ場合 */
    padding:6px 0px 20px 0px;
}

.gaiyou-temae-text-4{
    font-family: "Zen Old Mincho", serif;
    font-weight: 500;
    /* font-style: SemiBold; は CSSでは font-weight で表現します */
    font-size: 14px; /* 本文/L = 18px */
    /* leading-trim: NONE; はまだ標準CSSではないため省略 */
    line-height: 2.0; /* 200% = 2.0 */
    letter-spacing: 0.05em; /* 5% = 0.05em */
    text-align: center;
    color: #FFFFFF; /* 既存の設定を引き継ぐ場合 */
    padding:9px 0px 0px 0px;
}
/* ...existing code... */

/* 概要ボックス全体 */
.gaiyou-temae-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 上:100px 左右:97px 下:60px (基準幅1600pxに対して、幅1121pxのボックス内の余白) */
  /* 固定pxよりは比率で持たせたほうが縮小時に自然ですが、デザイン通り固定pxで指定し、
     幅が狭くなった時にpaddingを減らす方針にします */
  padding: 0px 0px 42px;
  max-width: 1121px;
  background: #FFFFFF;
  box-sizing: border-box; /* paddingを含めた幅計算 */
  margin: 0 auto 100px; /* 中央寄せ */
  width:91.5%;
}

.gaiyou-temae-text{
    margin-bottom: 77px;
}



.gaiyou-box-title{
/* 1. 背景の設定 */
  background-image: url("../images/concert/sp-gaiyou2.webp");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;

  /* 見栄えの調整 */
  padding: 30px 0px; /* 上下に余白を持たせると画像が見えやすくなります */
  color: #2E4580;     /* 文字を白にして視認性を確保 */
  font-family: "Zen Old Mincho", serif;
font-weight: 900;
font-style: Black;
font-size: 25px;
leading-trim: NONE;
line-height: 120%;
letter-spacing: 0%;
text-align: center;
        width: 167px;
        height: 61px;
        margin: 32px 0px 0px;
    }


/* コンテンツエリア */
.gaiyou-box-content {
  display: flex;
  flex-direction: column;
  width: 89.5%; /* 親要素(padding除いたエリア)いっぱい */
  max-width: 927px; /* デザイン上のコンテンツ幅 */
  margin:7px 0px 0px 0px;
}



/* 各行アイテム */
.gaiyou-box-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start; /* 上揃え (テキストが複数行の場合に対応) */
  padding: 12px 0px; /* 下線との距離 */
  border-bottom: 2px dotted #566CA4; /* Figma: Vector (破線) */
  gap: 8px; /* ラベルとテキストの間隔 */
  width: 100%;
}



/* 最後のアイテムの下線は不要なら消す（デザインによる） */
.gaiyou-box-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* SP版：2つ並んだsp-tb-only-flexの2番目（開催時間）のborder-bottomを消す */
.gaiyou-box-item.sp-tb-only-flex + .gaiyou-box-item.sp-tb-only-flex {
  border-bottom: none;
}

/* ラベル (紺色の背景) */
.gaiyou-box-label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 72px;
  height: 27px;
  background: #2E4580;
  
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 12px; /* 18px */
  line-height: normal; /* または 2.0 */
  text-align: center;
  color: #FFFFFF;
  
  flex-shrink: 0; /* 幅固定 */
  margin: 0;
}

/* テキストエリア */
.gaiyou-box-text,
.agaiyou-box-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 18px; 
  line-height: 1.6;
  color: #2E4580;
}

/* 注釈 (小さい文字) */
.gaiyou-box-note {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 12px; /* 14px */
  line-height: 1.6;
  color: #2E4580;
  margin:0px 0px 0px 0px;
}

.gaiyou-box-note-2 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 12px; /* 14px */
  line-height: 1.6;
  color: #2E4580;
  margin:0px 0px 0px 0px;
}

.gaiyou-box-note-3 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 16px; /* 14px */
  line-height: 1.6;
  color: #2E4580;
  margin:0px 0px 0px 0px;
}
.gaiyou-box-note-6{
    margin:0 0 6px 0;
}
/* 赤字注釈 */
.gaiyou-box-note-alert {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 12px; /* 14px */
  line-height: 1.6;
  color: #DE2682;
  margin-top: 4px;
}

/* 時間表示の行 */
.gaiyou-box-time-row {
  display: block;
}

/* ボタンエリア */
.gaiyou-box-footer {
    width:316px;
    margin: 24px auto 0;
    display: flex;
    align-items: center; 
    justify-content: center; 
}

/* ボタン本体 */
.gaiyou-box-btn-entry {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 316px;
  height: 60px;
  max-width: 100%;
  
  background: #FFEC55;
  border: 2px solid #2E4580;
  border-radius: 70px;
  
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 14px; /* 18px */
  line-height: 1.6;
  text-align: center;
  color: #2E4580;
  text-decoration: none;
  
  /* 立体的な影 (Frame 21) */
  box-shadow: 1px 8px 0 #FFF, 1px 8px 0 2px #2E4580;
  transition: transform 0.2s, box-shadow 0.2s;
}

.gaiyou-box-btn-entry:hover {
  transform: translate(0px, 6px);
  box-shadow: 0px 0px 0px #FFF, 0px 0px 0px 0px #2E4580;
}

/* ボタン内アイコン (Font Awesome) */
.gaiyou-box-arrow-down::after {
  content: "\f078"; /* fa-chevron-down */
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: 10px;
  font-size: 18px;
}

/* 下部の装飾画像 */
.gaiyou-temae-img {
   
   width:100vw;
}

.gaiyou-temae-img-img {
    width: 100%; 
}


.performer-haikei{
    background-color: #FF69B4;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -5; /* 一番奥 */
    /* 背景画像がはみ出さないように調整する場合 */
    overflow: hidden; 
}


.performer-haikei-img{
    width:100vw;
}

.performer-haikei-img-img{
    width: 100%;
    height: 100%;
    object-fit: cover; /* 比率を保って隙間なく埋める */

}

.performer-parent {
    position: relative; /* 子要素のabsoluteの基準点 */
    width: 100%;
    /* 必要に応じて高さを指定してください。例: min-height: 100vh; */
}

.performer-temae{
    display: flex;
    flex-wrap: wrap;       /* 折り返しを許可 */
    justify-content: center; /* 左右中央揃え（お好みで space-between でもOK） */
    gap: 40px;             /* アイテム同士の間隔（横・縦ともに40px） */
    
    width: 100%;           /* 幅指定 */
    max-width: 1200px;     /* 全体の最大幅（適宜調整） */
    margin: 0 auto;        /* 中央寄せ */
}

.performer-title{/* 1. 背景の設定 */
  background-image: url("../images/concert/sp-performer1.webp");
  background-size: 100% 97%;
  background-position: center;
  background-repeat: no-repeat;

  /* 見栄えの調整 */
  padding: 31px 0px; /* 上下に余白を持たせると画像が見えやすくなります */
  color: #ffffff;     /* 文字を白にして視認性を確保 */
  font-family: "Zen Old Mincho", serif;
font-weight: 900;
font-style: Black;
font-size: 25px;
leading-trim: NONE;
line-height: 120%;
letter-spacing: 0%;
text-align: center;


        width: 178px;
        height: 61px;
        margin:16px 0px 0px
}

.performer-content-parent {
    width:100vw;
  
}

/* ...existing code... */

/* --- 出演者ボックス (concert_guest_wrap) --- */
.performer-content1,
.performer-content2,
.performer-content3,
.performer-content4,
.performer-content5 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;

    /* 幅の設定: Figma 534px を基準にするが、親に合わせて伸縮させる */
    width: 91.5%;
    max-width: 549px; /* はみ出し防止 */
    
    
    background: #FFFFFF;
    overflow: hidden; /* 角丸を効かせるため */
    
    /* 余白など（必要に応じて調整） */
    margin: 0 auto 40px; 
}

/* メイン画像 (concert_guest_pic) */
.performer-content1-img,
.performer-content2-img,
.performer-content3-img,
.performer-content4-img,
.performer-content5-img {
    width: 100%;
    /* 高さは画像比率に任せるか、Figma指定(287px)にするか */
    /* ここでは画像自体を表示するため height: auto推奨 */
    height: auto;
    line-height: 0; /* 画像下の隙間対策 */

        aspect-ratio: 343 / 191;
}

.performer-content1-img-img,
.performer-content2-img-img,
.performer-content3-img-img,
.performer-content4-img-img,
.performer-content5-img-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;

        width: 100%;
        height: 100%;
}



.performer-content1-title-parent,
.performer-content2-title-parent {
    position: relative; /* concert_guest_txt の配置用 */
    width: 100%;
    box-sizing: border-box;
    padding: 0px 24px 0px; /* 上20px 左右32px (下はgap分考慮) */
    margin:20px auto 20px;
    background: #FFFFFF;
    display:flex;
    height:72px
}

.performer-content3-title-parent,
.performer-content4-title-parent,
.performer-content5-title-parent {
    position: relative; /* concert_guest_txt の配置用 */
    width: 100%;
    box-sizing: border-box;
    padding: 0px 24px 0px; /* 上20px 左右32px (下はgap分考慮) */
    margin:18px auto 18px;
    background: #FFFFFF;
    display:flex;
    height:72px;
    align-items:center;

}

.performer-content5-title-parent{
    height: auto;
}

/* 肩書き (concert_guest_position_tag) */
.performer-content1-title-katagaki,
.performer-content2-title-katagaki {
    display: inline-flex; /* 幅をコンテンツに合わせる */
    justify-content: center;
    align-items: center;
    padding: 2px 16px;
    gap: 10px;
    
    height: 26px;
    background: #566CA4;
    border-radius: 40px;
    
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.6; /* 160% */
    color: #FFFFFF;
    
    /* 配置調整 */
}

.performer-content3-title-katagaki,
.performer-content4-title-katagaki {
    display: inline-flex; /* 幅をコンテンツに合わせる */
    justify-content: center;
    align-items: center;
    padding: 2px 2px;
    gap: 10px;
    
    height: 26px;
    background: #566CA4;
    border-radius: 40px;
    
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.6; /* 160% */
    color: #FFFFFF;
    
    /* 配置調整 */
    margin-bottom: 8px; /* 名前との間隔 */;
    display:none;
    margin:auto 0 ;
}

/* 名前エリア (concert_guest_name_txt) */
.performer-content1-title-name,
.performer-content2-title-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size:12px;
    margin-top:5px;
}


.performer-content3-title-name,
.performer-content4-title-name,
.performer-content5-title-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size:12px;
    height:39px;
    margin-top:5px;
}

/* ふりがな */
.performer-content1-title-name-hurigana,
.performer-content2-title-name-hurigana,
.performer-content3-title-name-hurigana,
.performer-content4-title-name-hurigana,
.performer-content5-title-name-hurigana {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 17px;
    color: #2E4580;
    margin-bottom: -5px; /* Figma: margin: -7px 0px; の調整 */
}

/* 漢字名 */
.performer-content1-title-name-kannji,
.performer-content2-title-name-kannji,
.performer-content3-title-name-kannji,
.performer-content4-title-name-kannji,
.performer-content5-title-name-kannji {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.6; /* 160% */
    color: #2E4580;
}

/* 動画を見るボタン (pink circle) */
.performer-content1-title-img,
.performer-content2-title-img,
.performer-content3-title-img,
.performer-content4-title-img {
    margin-left:auto;
    width: 72px;
    height: 72px;
    /* もしレイアウトが崩れる場合は top: -47.5px; などで調整（画像とテキストの境界に配置する場合） */
    /* Figmaでは concert_guest_txt (height 95px) の中にあるので、相対位置で配置 */
    /* ここでは .performer-content1-title-parent の右上配置とします */
}

.performer-content1-img-img,
.performer-content2-img-img,
.performer-content3-img-img,
.performer-content4-img-img,
.performer-content5-img-img {
    width: 100%;
    height: auto;
}

/* 説明文 */
.performer-content1-text,
.performer-content2-text,
.performer-content3-text,
.performer-content4-text,
.performer-content5-text {
    width: 100%;
    box-sizing: border-box;
    padding: 0 24px 20px; /* 左右32px 下20px */
    
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 12px; /* 本文/大 */
    line-height: 1.6; /* 200% */
    color: #2E4580;
}

/* スケジュール部分 (点線の下) */
.performer-content1-scedule-parent,
.performer-content2-scedule-parent,
.performer-content3-scedule-parent,
.performer-content4-scedule-parent,
.performer-content5-scedule-parent {
    width: calc(100% - 48px); /* パディング分引く */
    margin: 0 auto 21px; /* 下21px */
    padding-top: 25px;
    border-top: 2px dotted #566CA4; /* 点線 */
    font-size:12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
}

/* スケジュールアイコン (pink icon) */
.performer-content1-scedule-img,
.performer-content2-scedule-img,
.performer-content3-scedule-img,
.performer-content4-scedule-img,
.performer-content5-scedule-img{
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 画像そのものに背景色が含まれていなければCSSで丸を作る */
    /* background: #FF69B4; */
    /* border-radius: 50%; */
}

.performer-content1-sceedule-img-img,
.performer-content2-sceedule-img-img,
.performer-content3-sceedule-img-img,
.performer-content4-sceedule-img-img,
.performer-content5-sceedule-img-img,
.performer-content5-sceedule-img-img {
    width: 20px;
    height: auto;
}

/* スケジュールテキスト */
.performer-content1-scedule-text,
.performer-content2-scedule-text,
.performer-content3-scedule-text,
.performer-content4-scedule-text,
.performer-content5-scedule-text {
    font-family: var(--main-font-family); /* Zen Kaku Gothic New, Noto Sans JP fallback */
    font-weight: 700;
    font-size: 12px;
    line-height: 1.6; /* 160% */
    color: #DE2682; /* ピンク */

}

.performer-content3-scedule-text-parent,
.performer-content4-scedule-text-parent,
.performer-content5-scedule-text-parent {
  display: grid;
  grid-template-columns: repeat(2, auto); /* 3列で表示 */
  gap: 3px 20px; /* 縦横の間隔 */
  color: #d0206e; /* 文字色（ピンク） */
  font-weight: 700; /* 太字 */
  font-size: 12px; 
  line-height: 1.4;
  width:100%
}




    /* SP版：スケジュールリストのレイアウト調整 */
    .performer-content1-scedule-text-parent {
        display: grid;
        /* コンテンツ幅に合わせて2列表示 */
        grid-template-columns: repeat(2, max-content);
        /* 左寄せ */
        justify-content: start;
        /* 行間(8px)と列間(15px)を調整 */
        gap: 8px 15px; 
        
        padding-left: 20px; /* リストマーカー用の左余白 */
        
        /* フォントスタイル */
        color: #d0206e; /* ピンク色 */
        font-weight: 700;
        font-size: 12px; /* SP用にサイズ調整 */
        line-height: 1.4;
        width: 100%;
        box-sizing: border-box;
    }

    /* リストマーカー（・）の設定 */
    .performer-content1-scedule-text-parent > div {
        display: list-item;
        list-style-type: disc;
        list-style-position: outside;
        margin-left: 5px; /* 点の位置調整 */
    }

    /* マーカー（・）の色だけ黒にする */
    .performer-content1-scedule-text-parent > div::marker {
        color: #333;
        
        width:2px;
        height:2px;

    }


    .performer-content3-scedule-text-parent > div::before,
.performer-content4-scedule-text-parent > div::before,
.performer-content5-scedule-text-parent > div::before{
    content: "";         /* 必須 */
    display: inline-block;
    width: 3px;          /* 点の幅 */
    height: 3px;         /* 点の高さ */
    background-color: #333; /* 点の色 */
    border-radius: 50%;  /* 丸くする */
    margin-right: 8px;   /* テキストとの間隔 */
    flex-shrink: 0;      /* 点が潰れないようにする */
    /* 位置微調整が必要なら transform: translateY(1px); */
}




    /* 最後の要素（3つ目）を2列分結合して1行で表示させる */
    .schedule-last-item {
        grid-column: 1 / -1; /* 全列結合（2列分使う） */
        white-space: nowrap; /* 折り返しを禁止して1行で表示 */
    }

    /* 「に出演」の部分の色（念のためSP版でも定義） */
    .performer-content1-scedule-text-parent .schedule-suffix {
        color: #2E4580;
    }

    /* "に出演" の色変更 */
.schedule-suffix {
    color: #2E4580; /* 黒色 */
}


.program {
    z-index:1;

}


.program-parent {
    position: relative; /* 子要素のabsoluteの基準点 */
    width: 100%;
    /* 必要に応じて高さを指定してください。例: min-height: 100vh; */
}
.program-haikei{
    background-color: #FF69B4;
    background: linear-gradient(to bottom, 
    #FF69B4 0%, 
    #FF69B4 50%, 
    #2E4580 50%, 
    #2E4580 100%);
   position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 899px;
    z-index: 0; /* 一番奥 */
    /* 背景画像がはみ出さないように調整する場合 */
     overflow: hidden;
}

.program-haikei-img{
    width: 100%; /* 100vw ではなく 100% 推奨 */
    height: 100%;
    
}

.program-haikei-img-img{
    width: 100%;
    height: 899px;
   object-fit:cover;
    /* center = 左右中央, top = 上端固定 */
    object-position: center top;
}

.program-temae {
    position: relative;
    z-index: 10; /* 背景より手前（数字が大きいほど手前） */
    
    display: flex;
    flex-wrap: wrap;       /* 折り返しを許可 */
    justify-content: center; /* 左右中央揃え（お好みで space-between でもOK） */
    
    width: 100%;           /* 幅指定 */
    max-width: 1200px;     /* 全体の最大幅（適宜調整） */
    margin: 0 auto;        /* 中央寄せ */
    padding: 0px 0 0 0;
    height:899px
}

.program-title{
    padding: 91px 0 0 0;
    /* 1. 背景の設定 */
  background-image: url("../images/concert/sp-program2.webp");
  background-size: 100% 96%;
  background-position: center;
  background-repeat: no-repeat;

  /* 見栄えの調整 */
  padding: 31px 0px; /* 上下に余白を持たせると画像が見えやすくなります */
  color: #2E4580;     /* 文字を白にして視認性を確保 */
  font-family: "Zen Old Mincho", serif;
font-weight: 900;
font-style: Black;
font-size: 25px;
leading-trim: NONE;
line-height: 120%;
letter-spacing: 0%;
text-align: center;
    width: 242px;
    height: 60px;
    margin: 92px 0px 0px;

}


/* ...existing code... */

/* --- Program / Setlist Section --- */

.program-content {
    /* 親要素で中央寄せ */
    display: flex;
    justify-content: center;
    width: 100%;
    margin:-32px 0 0 0 ;
}

/* セットリスト全体を囲むラッパー */
.setlist_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    width: 92vw; /* 928px / 1600px ≈ 58% */
    max-width: 928px;
    /* heightはコンテンツなりで伸びるようにauto推奨 */
    height: auto;
    
    margin: 0 auto;
}

/* 曲リストのコンテナ (2列配置) */
.setlist_grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    
    width: 100%;
}

/* 各曲のアイテムブロック */
.setlist_item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width:100%;
    
  
    /* height固定だと文字数によってはみ出るのでmin-height推奨ですが、
       デザイン再現のためFigmaの高さ基準に合わせます */
    height: 56px; 

    
}

/* 歌手名と曲名の行 */
.setlist_item_row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px; /* 歌手名と曲名の間の隙間 */
    margin:0 auto;
}

/* 歌手名ラベル (ピンクの楕円) */
.setlist_artist_label {
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 0 16px; を入れつつ幅固定にするか、Figma通り固定にするか等 */
    width: 86px;
    height: 22px;
    background: #DE2682;
    border-radius: 44px;
    flex-shrink: 0; /* 縮まないように */
    margin: 21px auto 13px;
}

/* 歌手名のテキスト */
.setlist_artist_name {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: normal; /* デザイン調整 */
    text-align: center;
    color: #FFFFFF;
}

/* 曲名テキスト */
.setlist_song_name {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    color: #2E4580;
    width:144px;
    translate: 0px 5px;
}

/* 点線ボーダー */
.setlist_border {
    width: 344px;
    height: 0px;
    border-bottom: 2px dotted #566CA4;
    margin:0 auto;
}

/* フッターのピンク帯「【一部抜粋】」 */
.setlist_footer_bar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 27px;
    background: #FFC7E8;
    margin-top: 16px;
}

.setlist_footer_text {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.2em;
    color: #FF69B4; /* 文字色ピンク */
    /* 背景が薄ピンクなので文字が見えるか確認。Figma指定は白文字#FF69B4 ?
       指定コードでは color: #FF69B4 となっています */
}

/* 注意書きテキスト */
.setlist_notes {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 24px;
}

.setlist_note_text {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
    color: #2E4580;
}

.information-title img {
  width: 927px; /* Figma: 927px */
  max-width: 100%;
  height: auto;
}

/* Information Box Styles */
.information-box1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 21px 32px;
    width: 100%;
    max-width: 1322px;
    margin: 70px auto 0;
    background: #FFFFFF;
    box-sizing: border-box;
}

.information-title {    
    /* 1. 背景の設定 */
  background-image: url("../images/concert/sp-information1.webp");
  background-size: 98% 97%;
  background-position: center;
  background-repeat: no-repeat;

  /* 見栄えの調整 */
  padding: 31px 0px; /* 上下に余白を持たせると画像が見えやすくなります */
  color: #2E4580;     /* 文字を白にして視認性を確保 */
  font-family: "Zen Old Mincho", serif;
font-weight: 900;
font-style: Black;
font-size: 25px;
leading-trim: NONE;
line-height: 120%;
letter-spacing: 0%;
text-align: center;
width: 353px;
    height: 61px;
    margin: 0px auto 40px;
    translate: -11px 0px;
}

/* Attention Box */
.information-box1-attention-box {
    width: 100%;
    max-width: 1122px;
    margin: 0 auto;
}

.information-box1-attention-title {
    background: #FC6746;
    color: #FFFFFF;
    text-align: center;
    padding: 12px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.05em;
    height:43px;
    display:flex; /* インラインのまま、中身をFlex制御できるようにする */
    align-items: center;  /* 上下中央 */
    justify-content: center; /* 左右中央 */
}

.btn-before {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 52px;
    background: #FFFFFF;
    border: 3px dashed #999999;
    border-radius: 70px;
    color: #999999;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.2em;
    box-sizing: border-box; /* To include border in width/height */
    margin:8px auto 0;
}

.information-box1-attention-text {
    background: #FFE9E4;
    padding: 20px 13px 20px 16px;
    margin: 0;
    font-size: 12px;
}

.information-box1-attention-list {
    list-style-type: disc;
    padding-left: 18px;
    margin: 0;
}

.information-box1-attention-list li {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.6;
    color: #2E4580;
}

.information-box1-attention-note {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.6;
    color: #2E4580;
    margin: 8px 0 0;
}

    
    /* 会場リスト (information-box1-content) */
    .information-box1-content {
        width: 100%;
        margin: 8px auto;
        padding: 0 0px; /* 左右余白 */
        box-sizing: border-box;
    }

    /* 各行のラッパー */
    .venue-row {
        flex-direction: column; /* 縦並び */
        align-items: center;
        padding: 24px 0; /* 上下の余白 */
        gap: 20px; /* 各ブロック間の隙間 */
        border-bottom: 2px dotted #667BAF; /* 点線 */
        width: 100%;
    }

    .venue-row:last-child {
        border-bottom: none;
    }

    /* 情報エリア (県名・日付・会場名・MAP) */
    .venue-info {
        display: flex;
        flex-wrap: wrap; /* 折り返し有効 */
        align-items: center; /* 垂直方向中央 */
        justify-content: flex-start;
        width: 100%;
        gap: 0; /* 個別にmarginで調整するため0 */
        position: relative; /* MAPアイコンの絶対配置基準など */
    }

    .venue-info-1 {
        display: flex;
        flex-wrap: nowrap; /* 横一列に固定 */
        align-items: center; /* 垂直方向中央 */
        justify-content: flex-start;
        width: 100%;
        gap: 0; /* 個別にmarginで調整するため0 */
    }

    /* 1. 県名ラベル (about_title + 大阪府) */
    .venue-pref {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 76px;
        height:26px;
        background: #2E4580;
        color: #FFFFFF;
        font-family: 'Zen Kaku Gothic New', sans-serif;
        font-weight: 700;
        font-size: 18px;
        line-height: 2.0; /* 200% */
        padding: 0;
        margin-right: 20px; /* 日付との隙間 */
        margin-bottom: 0; /* 横並びのため不要 */
        display: inline-flex; /* インラインのまま、中身をFlex制御できるようにする */
  align-items: center;  /* 上下中央 */
  justify-content: center; /* 左右中央 */
    }

    /* 2. 日付 (5月10日(日)) */
    .venue-date {
        font-family: 'Zen Kaku Gothic New', sans-serif;
        font-weight: 700;
        font-size: 16px;
        line-height: 1.6;
        letter-spacing: 0.05em;
        color: #2A85B2;
        /* 幅を確保してMAPを右端に追いやる、またはflex-grow */
        width: auto;
        display: inline-flex; /* インラインのまま、中身をFlex制御できるようにする */
  align-items: center;  /* 上下中央 */
  justify-content: center; /* 左右中央 */
    }

    /* 3. 会場名 (浪切ホール) */
    .venue-name {
        width: 100%; /* 改行させる */
        font-family: 'Zen Kaku Gothic New', sans-serif;
        font-weight: 700;
        font-size: 16px;
        line-height: 2.0;
        color: #2E4580;
        margin-top: 6px; /* 上との隙間 */
        padding-right: 50px; /* MAPアイコンと被らないように右余白 */
    }

    /* 4. MAPアイコン (絶対配置またはOrder調整) */
    /* デザインでは日付の横（右端）に配置されているように見えます */
    .venue-map {
        width:40px;
        margin: 0px 0px 0px auto;
    }

    .venue-map-text {
        font-family: 'Zen Kaku Gothic New', sans-serif;
        font-weight: 500;
        font-size: 12px;
        line-height: 1.2;
        color: #FF69B4;
        order: 1; /* テキストが上（デザイン依存） */
    }

    .venue-map-icon {
        width: 40px;
        height: 40px;
        background: #FFEBF5;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #FF69B4;
        order: 2; /* アイコンが下 */
    }

    /* ボタンエリア */
    .venue-action {
        width: 100%;
        display: flex;
        justify-content: right;
        margin: 0 80px 0 0;
    }

    /* 申し込みボタン */
    .btn-entry {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0 10px;
        width: 180px; /* SPサイズ */
        min-height: 52px;
        background: #FFEC55;
        border-radius: 70px;
        padding: 6px 10px;
        box-sizing: border-box;

        font-family: 'Zen Kaku Gothic New', sans-serif;
        font-weight: 700;
        font-size: 14px;
        line-height: 1.6;
        color: #2E4580;
        text-decoration: none;
        margin:8px auto;
    }

    .btn-entry-deadline {
        font-size: 10px;
    }
    
    /* 終了ボタン */
    .btn-finished {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 180px; /* SPサイズ */
        height: 52px;
        background: #CCCCCC; /* 必要に応じてgradient調整 */
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #FFFFFF;
        border-radius: 70px;
        
        font-family: 'Zen Kaku Gothic New', sans-serif;
        font-weight: 700;
        font-size: 14px;
        line-height: 1.6;
        color: #2E4580;
        margin:8px auto
    }

    /* ボタン内のアイコン調整（FontAwesome） */
    .btn-entry i {
        font-size: 14px;
    }




.information-box2-list {
    display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px 6px;
        width: 100%;
}

.information-box2-item {
    display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4px;
    height:36px;
}

.information-box2-role-1 {
    background-color: #2E4580;
    color: #FFFFFF;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    padding: 8px 15px;
    height: 23px;
    width:116px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.information-box2-role-2 {
    background-color: #2E4580;
    color: #FFFFFF;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    padding: 8px 15px;
    height: 23px;
    width:116px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.information-box2-role-3 {
    background-color: #2E4580;
    color: #FFFFFF;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    padding: 8px 15px;
    height: 23px;
    width:116px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.information-box2-logo-1-img {
    height: auto;
    max-height: 50px; /* ���S�̍������� */
    width: 169px;
    display: block;
    height:36px;
}

.information-box2-logo-2-img {
    height: auto;
    max-height: 50px; /* ���S�̍������� */
    width: 169px;
    display: block;
    height:36px;
}

.information-box2-logo-3-img {
    height: auto;
    max-height: 50px; /* ���S�̍������� */
    width: 169px;
    display: block;
    height:36px;
}


/* Main Information Section Background */
.information {
    background-color: #2E4580; /* Blue background */
    padding:0px 0px 0 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
   
}

/* Update Box 2 to be a card like Box 1 */
.information-box2 {
    margin: 40px auto 70px;
    width:91.5%;
        background-color: #FFFFFF;
        padding: 27px 26px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        border-radius: 0;
}

.information-bottom {
    
    transform: translateY(1px);
    width: 100vw;
}

/* 子要素：親の幅に従う */
.information-bottom-img {
    width: 100%;
}

/* 画像本体：ここが重要 */
.information-bottom-img img {
    width: 100%;    /* 横幅を親要素（100vw）に合わせる */
    height: auto;   /* 横幅に合わせて縦を自動調整（比率維持） */
    display: block; /* 下部の謎の隙間を消す */
}




.charity-haikei-curve-img{
    width:100vw;

}


.charity-haikei-curve-img-img{
    width: 100%;
    height: 100%;
    object-fit: cover; /* 比率を保って隙間なく埋める */


}
.charity-haikei-main{
    background-color: #877764;
}

.charity-parent{
    position: relative; /* 子要素のabsoluteの基準点 */
    width: 100vw;
    aspect-ratio: 16/10;
    
}

.charity-haikei{
    position: absolute;
    height: 100%;
    width:100%;
    z-index: -5; /* 一番奥 */
}

.charity-haikei-main{
    height:100%;
}
.charity-temae{
    position: relative;
    z-index: 10; 
    display: flex;
  flex-direction: column; /* 縦に並べる設定 */
  align-items: center;    /* 横方向の中央寄せ */
  padding-top: 250px;

}

.charity-text-box{
    margin:0 auto;
    width:92%;

}

.charity-text-1{
    margin: 38px 0 0 0;
    text-align: center;
    color: #FFFFFF;
    font-family: 'Zen Old Mincho', serif;
  font-weight: 500;
  font-style: normal;
  font-size: 14px; /* 「本文/M」の仮説値 */
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: center;

}

.charity-text-2{
    margin: 27px 0 0 0;
    text-align: center;
    color: #FFFFFF;
    font-family: 'Zen Old Mincho', serif;
  font-weight: 500;
  font-style: normal;
  font-size: 14px; /* 「本文/M」の仮説値 */
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: center;

}

.charity-text-3{
    margin: 30px 0 0 0;
    text-align: center;
    color: #FFFFFF;
    font-family: 'Zen Old Mincho', serif;
  font-weight: 500;
  font-style: normal;
  font-size: 14px; /* 「本文/M」の仮説値 */
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: center;

}

.charity-text-4{
    margin: 27px 0 0 0;
    text-align: center;
    color: #FFFFFF;
    font-family: 'Zen Old Mincho', serif;
  font-weight: 500;
  font-style: normal;
  font-size: 14px; /* 「本文/M」の仮説値 */
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: center;

}

.charity-title{
    margin:40px 0 56px 0;
}

.charity-haikei-curve{
    background-color:#ffffff;
}

.charity-logo{
    padding: 40px 0 30px 0;
}

.charity-temae-img1 {
    position: absolute;
    top: 16%;
    left: 18%;
    width: 31%;
    z-index: 3;
    max-width: 225px;
  }
  .charity-temae-img1-img {
    width: 100%;
    height: auto;
    object-fit: cover; /* 画像比率を維持 */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2); /* 影をつける */
  }

  /* 2枚目: 右上の椅子と机 */
  .charity-temae-img2 {
    position: absolute;
    top: 9%;
    left: -2%;
    width: 41%;
    z-index: 1;
    max-width: 300px;
  }
  .charity-temae-img2-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
  }

  /* 3枚目: 左下の料理（サラダなど） */
  .charity-temae-img3 {
        position: absolute;
        top: 7.5%;
        right: -11%;
        width: 42.6%;
        z-index: 3;
        max-width: 300px;
  }
  .charity-temae-img3-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
  }

  .logo-wao{
    width:215px;
    height:51px;
  }
.logo-wao img{
    width:100%;
    height:100%;
  

}

.charity-title{
        /* 1. 背景の設定 */
  background-image: url("../images/concert/sp-charity1.webp");
  background-size: 90% 97%;
  background-position: center;
  background-repeat: no-repeat;

  /* 見栄えの調整 */
  padding: 31px 0px; /* 上下に余白を持たせると画像が見えやすくなります */
  color: #ffffff;     /* 文字を白にして視認性を確保 */
  font-family: "Zen Old Mincho", serif;
font-weight: 900;
font-style: Black;
font-size: 25px;
leading-trim: NONE;
line-height: 120%;
letter-spacing: 0%;
text-align: center;
        width: 253px;
        height: 61px;
        margin: 32px auto 2px;

}



.report-title {
  
    /* 1. 背景の設定 */
  background-image: url("../images/concert/sp-report1.webp");
  background-size: 90% 97%;
  background-position: center;
  background-repeat: no-repeat;

  /* 見栄えの調整 */
  padding: 31px 0px; /* 上下に余白を持たせると画像が見えやすくなります */
  color: #2E4580;     /* 文字を白にして視認性を確保 */
  font-family: "Zen Old Mincho", serif;
font-weight: 900;
font-style: Black;
font-size: 25px;
leading-trim: NONE;
line-height: 120%;
letter-spacing: 0%;
text-align: center;
        width: 202px;
        height: 61px;
        margin: 60px auto 40px;

}



/* =========================================
   Report Section (PC)
   ========================================= */



   .report {
    width: 100%;
    padding-bottom: 100px;
    background-color: #fff; /* 背景色（適宜調整） */
    overflow: hidden;
}



/* スライダー全体 */
.report-slider {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 40px;
}


/* スライド内のカード (デフォルト: 480px固定) */
.report-card {
    width: 480px;
    margin: 0 15px;
    box-sizing: border-box;
    transition: transform 0.3s;
    opacity: 1;
    transform: none;
}



/* 最初のカードの左余白 */
.report-card:first-child {
    margin-left: 1vw;
}

/* 最後のカードの右余白 */
.report-card:last-child {
    margin-right: 1vw;
}

/* 中央のカレントスライド */
.report-card.slick-center {
    opacity: 1;
    transform: none;
    z-index: 10;
}

/* リンクエリア */
.report-card__link {
    display: block;
    position: relative;
    width: 100%;
    text-decoration: none;
    color: #fff;
    /* 角丸なし、または微調整 */
    border-radius: 0; 
    overflow: hidden; 
    box-shadow: none; /* 影なし */
}

/* 画像ボックス */
.report-card__img-box {
    position: relative;
    width: 100%;
    /* アスペクト比固定 480:320 = 3:2 */
    padding-top: 66.66%; 
    height: auto; 
    background: #000;
}

.report-card__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.report-card__link:hover .report-card__img {
    transform: scale(1.05); /* ホバー時に画像ズーム */
}

/* 右下の＋ボタン */
.report-card__overlay {
    position: absolute;
    bottom: 25px;
    right: 32px;
    width: 60px;
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 8;
}

.report-card__plus {
    font-size: 30px;
    color: #2E4580; /* 紺色 */
    line-height: 1;
    font-weight: 400; /* 細めにする */
}

/* 左下のテキスト情報 */
.report-card__info {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    /* グラデーションや余白調整 */
    padding: 23px 0px 16px 33px;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
    z-index: 2;
    text-align: left;
    box-sizing: border-box;
}

.report-card__date {
    color: #fff;
    margin-bottom: 2px;
    display: block;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
    letter-spacing: 0.05em;
}

.report-card__area {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 150%;
    letter-spacing: 0.05em;
    color: #fff;
    display: block;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    
}

/* プログレスバーエリア */
.report-progress {
    width: 93%;
    margin: 21px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.report-progress__current,
.report-progress__total {
    color: #2E4580;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0;
}

.report-progress__bar {
    flex: 1;
    height: 4px;
    background-color: #2E4580; /* ベースの色（紺） */
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.report-progress__indicater {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%; /* JSで制御 */
    background-color: #FF69B4; /* 進捗色（ピンク） */
    transition: width 0.3s ease;
}



.report {
    padding-bottom: 60px;
}

.report-title-img-img {
    width: 200px;
}

/* SP: Slickの横並び保険（slick.css の float に依存しない） */
.report-slider .slick-track {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: flex-start;
}
.report-slider .slick-slide {
    flex: 0 0 auto;
    height: auto;
}

/* SP フォント・余白調整 */
.report-card__info {
    padding: 15px;
}

.report-card__date {
    font-size: 12px;
}
.report-card__area {
    font-size: 16px;
}

.report-card__overlay {
    width: 48px;
    height: 48px;
    bottom: 10px;
    right: 10px;
}
.report-card__plus {
    font-size: 20px;
}

}


/* ...existing code... */

/* 会場マップモーダル */
.venue-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 12999009;
}

.venue-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

.venue-modal__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%; /* 画面幅の60% */
    max-width: 1000px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    /* height:650px; // iframeの高さなどに任せるか、必要なら残す */
}

/* 閉じるボタン（71px x 71px 画像用スタイル） */
.venue-modal__close {
    position: absolute;
    /* 右上に配置し、半分はみ出させる */
    top: -35px;   /* 高さの半分(約35px)外側へ */
    right: -35px; /* 幅の半分(約35px)外側へ */
    
    width: 71px;
    height: 71px;
    border-radius: 50%;
    background-color: #2D3D70; /* 濃紺色 */
    
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    cursor: pointer;
    z-index: 10; /* モーダルより手前 */
    
    /* テキストの✖を非表示にするか、CSSでバツを作る */
    font-size: 0; /* 元の「✖」文字を消す */
}

/* CSSでバツ印を描画 */
.venue-modal__close::before,
.venue-modal__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px; /* バツの長さ */
    height: 3px; /* バツの太さ */
    background-color: #fff; /* バツの色 */
    border-radius: 2px;
}

.venue-modal__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.venue-modal__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.venue-modal__body {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.venue-modal__map-container {
    width: 100%;
    height: 400px; /* 高さ固定 600px */
    background: #f0f0f0;
}

.venue-modal__map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- 新規追加スタイル --- */
.venue-modal__header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.venue-modal__area-badge {
    display: inline-block;
    background-color: #2D3D70; /* 画像の濃紺色 */
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 5px 15px;
    line-height: 1;
}

.venue-modal__date-text {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #2D3D70;
    letter-spacing: 0.05em;
}

.venue-modal__venue-name {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #2D3D70;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px dotted #CFD5E7; /* 点線 */
    width: 100%;
    line-height: 1.4;
}

.venue-modal__address-box {
    display: flex;
    align-items: baseline;
    font-family: "Zen Kaku Gothic New", sans-serif;
    color: #2D3D70;
    font-weight: 700;
    font-size: 18px;
}

.venue-modal__address-label {
    flex-shrink: 0;
}

.venue-modal__address {
    /* 以前の指定を上書き/調整 */
    font-family: var(--main-font-family); /* 前の指定があれば */
    font-weight: 500;
    font-size: 18px; 
    line-height: 1.7; 
    color: #333;
}



/* --- Performer Modal Style (Based on user request) --- */

/* モーダルコンテンツのサイズ上書き */
.performer-modal__content {
    width: 80vw;
    height: auto;
    max-width: 1000px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

/* ボディ部分を横幅いっぱいに広げる */
.performer-modal__body {
    border-radius: 8px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* テキストエリア (Role + Name) */
.performer-modal__text-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

/* タグ (Role) */
.performer-modal__tag {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 2px 16px;
    background: #566CA4;
    border-radius: 40px;
    
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.6;
    color: #FFFFFF;
}

/* 名前ボックス (ふりがな + 名前) */
.performer-modal__name-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.performer-modal__kana {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 17px;
    color: #2E4580;
    margin-bottom: -5px; /* 調整 */
}

.performer-modal__name {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 40px; /* 32px -> 40px に拡大 */
    line-height: 1.6;
    color: #2E4580;
}


/* ...existing code... */
.performer-modal__tags:has(.performer-modal__tag:empty) {
    visibility: hidden;
}
/* もし空白文字が入る可能性がある場合やすべてのタグが空の場合のみ隠したい場合は調整が必要です */
/* 動画エリア */
.performer-modal__movie-area {
    position: relative;
    /* 横幅基準の設定をリセット */
    width: 100%;
    padding-top: 0; 
    
    /* 高さ基準の設定 */
    height: auto;           /* 親要素の高さに合わせる（必要に応じて px/vh 指定） */
    aspect-ratio: 16 / 9;   /* 比率を固定して横幅を自動計算 */
    
    margin: 0 auto 0px;    /* 中央寄せ */
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

/* 動画iframeを親要素いっぱいに広げる */
.performer-modal__movie-area iframe { 
    width: 100%;
    height: 100%;
}

/* 再生アイコン (仮) */
.performer-modal__play-icon {
    width: 70px;
    height: 70px;
    font-size: 50px; /* アイコンサイズ調整 */
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    /* FontAwesomeなどが使えるならクラス変更推奨 */
    border: 4px solid #fff;
    border-radius: 50%;
    padding-left: 5px; /* 三角の視覚調整 */
}

/* レスポンシブ調整 (1024px以下) */
@media screen and (max-width: 1023px) {
    .venue-modal__close {
        /* スマホやタブレットでは外に出すぎると押せないので少し内側へ調整したほうが良いかも */
        right: -25px;
        top: -25px;
        width: 50px;
        height: 50px;
    }
    
    .venue-modal__close::before,
    .venue-modal__close::after {
        width: 20px;
    }
}







/* ===== 実施レポートモーダル ===== */
.report-modal .c-modal__wrapper {
    width: 80vw;
    max-width: 1000px;
}

.report-modal .c-modal__panel {
    border-radius: 0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
}

/* 閉じるボタン */
.report-modal__close {
    position: absolute;
    right: -35px;
    top: -35px;
    width: 71px;
    height: 71px;
    border-radius: 50%;
    background: #2E4580;
    border: none;
    cursor: pointer;
    z-index: 10;
    flex-shrink: 0;
}

.report-modal__close::before,
.report-modal__close::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    margin-left: -14px;
    margin-top: -1.5px;
}
.report-modal__close::before { transform: rotate(-45deg); }
.report-modal__close::after  { transform: rotate(45deg); }

/* ヘッダー */
.report-modal__header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.report-modal__meta-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* 都道府県バッジ */
.report-modal__pref {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 19px;
    background: #2E4580;
    color: #fff;
    border-radius: 4px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 200%;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 日付 + カテゴリーバッジ */
.report-modal__date-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.report-modal__date {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
    letter-spacing: 0.05em;
    color: #2E4580;
    white-space: nowrap;
}

/* 実施レポートバッジ */
.report-modal__category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 16px;
    background: #FFEC55;
    color: #2E4580;
    border-radius: 44px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 160%;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 会場名 */
.report-modal__venue {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 150%;
    letter-spacing: 0.05em;
    color: #2E4580;
    width: 100%;
    margin: 0;
}

/* 点線区切り */
.report-modal__divider {
    border: none;
    border-top: 2px dashed #667BAF;
    width: 100%;
    margin: 0;
}

/* 本文 */
.report-modal__text {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 170%;
    color: #2E4580;
    width: 100%;
    margin:20px 0px 0px 0px;
}

.report-modal__text p {
    margin-bottom: 28px;
}

/* 画像スライダー */
.report-modal__img-slider {
    width: 100%;
    overflow: hidden;
    margin-top: -10px;
}

.report-modal__img-track {
    display: flex;
    gap: 1.85%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.report-modal__img-track::-webkit-scrollbar {
    display: none;
}

.report-modal__img-slide {
    flex: 0 0 49.07%;
}

.report-modal__img-slide img {
    width: 100%;
    height: auto;
    display: block;
}

.report-modal__img-progress {
    position: relative;
    width: 100%;
    height: 4px;
    margin-top: 12px;
    border-radius: 999px;
    background: #D8DEEF;
    overflow: hidden;
}

.report-modal__img-progress-indicator {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: #2E4580;
    transform: translateX(0);
    transition: transform 0.2s ease;
}

/* 画像 */
.report-modal__images {
    width: 100%;
}

.report-modal__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* SP（1024px未満） */
@media (max-width: 1023px) {
    .report-modal .c-modal__wrapper {
        width: calc(100% - 54px);
    }

    .report-modal__close {
        right: -27px;
        top: -27px;
        width: 54px;
        height: 54px;
    }

    .report-modal__close::before,
    .report-modal__close::after {
        width: 20px;
        margin-left: -10px;
    }

    .report-modal .c-modal__panel {
        padding: 40px 16px;
            gap: 7px
    }

    .report-modal__meta-row {
        gap: 8px;
    }

    .report-modal__pref {
        font-size: 14px;
        height: 23px;
        width: 62px;
    
    }

    .report-modal__date {
        font-size: 16px;
    }

    .report-modal__category {
        padding: 2px 11px;
    }

    .report-modal__venue {
        font-size: 18px;
    }

    .report-modal__text {
        font-size: 12px;
        line-height: 160%;
    }

    .report-modal__text p {
        margin-bottom: 6px;
    }


    /* 日付 + カテゴリーバッジ */
.report-modal__date-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}
}

/* ===== 会場マップモーダル ===== */
@media (max-width: 600px) {
    .report-modal__img-slider {
        overflow: visible;
        margin-top: 16px;
    }

    .report-modal__img-track {
        flex-direction: column;
        gap: 10px;
        overflow-x: visible;
    }

    .report-modal__img-slide {
        flex: 0 0 auto;
        width: 100%;
    }

    .report-modal__img-progress {
        display: none;
    }

    
}

.map-modal .c-modal__wrapper {
    width: 80vw;
    max-width: 1000px;
}

.map-modal .c-modal__panel {
    border-radius: 0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    background: #fff;
}

/* 閉じるボタン */
.map-modal__close {
    position: absolute;
    right: -35px;
    top: -35px;
    width: 71px;
    height: 71px;
    border-radius: 50%;
    background: #2E4580;
    border: none;
    cursor: pointer;
    z-index: 10;
    flex-shrink: 0;
}

.map-modal__close::before,
.map-modal__close::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    margin-left: -14px;
    margin-top: -1.5px;
}
.map-modal__close::before { transform: rotate(-45deg); }
.map-modal__close::after  { transform: rotate(45deg); }

/* ヘッダー */
.map-modal__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.map-modal__meta-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* 都道府県バッジ */
.map-modal__pref {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    background: #2E4580;
    color: #fff;
    border-radius: 4px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 200%;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 日付 */
.map-modal__date {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
    letter-spacing: 0.05em;
    color: #2E4580;
    white-space: nowrap;
}

/* 会場名 */
.map-modal__venue {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 150%;
    letter-spacing: 0.05em;
    color: #2E4580;
    width: 100%;
    margin: 0;
}

/* 点線区切り */
.map-modal__divider {
    border: none;
    border-top: 2px dashed #667BAF;
    width: 100%;
    margin: 0;
}

/* 住所 */
.map-modal__address-box {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    color: #2E4580;
    font-size: 16px;
    line-height: 170%;
}

.map-modal__address-label {
    flex-shrink: 0;
    font-weight: 700;
}

.map-modal__address {
    font-weight: 500;
}

/* 地図iframe */
.map-modal__map-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    overflow: hidden;
    background: #f0f0f0;
}

.map-modal__map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* SP（1023px以下） */
@media (max-width: 1023px) {


    

    .map-modal__close {
        right: -27px;
        top: -27px;
        width: 54px;
        height: 54px;
    }

    .map-modal__close::before,
    .map-modal__close::after {
        width: 20px;
        margin-left: -10px;
    }

    .map-modal .c-modal__panel {
        padding: 40px 16px;
    }

    .map-modal__meta-row {
        gap: 8px;
    }

    .map-modal__pref {
        font-size: 14px;
        padding: 0 3px;
    }

    .map-modal__date {
        font-size: 16px;
    }

    .map-modal__venue {
        font-size: 18px;
    }

    .map-modal__address-box {
        font-size: 14px;
    }

    .map-modal__close{
        
        right: -8px;
        top: -27px;
        width: 54px;
        height: 54px;
    }
}

/* 実施レポート スライダー SPレイアウト調整
   カード幅: 72.5%
   カード間隔: 2.93%（左右 1.465% のマージン） */
@media (max-width: 1023px) {
    /* スライド自体の幅と間隔を指定（ビューポート基準） */
    .report-slider .slick-slide {
        width: 72.5vw;
        margin: 0 1.465vw;
    }

    /* 各スライド内のカードはスライド幅いっぱいに広げる */
    .report-slider .slick-slide .report-card {
        width: 100%;
        margin: 0;
    }
}


/* タブレット版（1023px以下） */
@media screen and (max-width: 1023px) and (min-width: 601px) {
        .hero-haikei-img-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        scale: 1.4;
    }
    

    .hero-temae-text{
        max-width:560px;
        
        margin: auto;
    }


        .gaiyou-haikei-img-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: calc(50% - -61px) top;
        translate: 0 103px;
    }

   /* 下部の装飾画像 */
.gaiyou-temae-img {
    position: relative;
    width: 100%;
    height: 120px;
    overflow: hidden;
}

/* 紫：左三角 */
.gaiyou-temae-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #7B52D3;
    clip-path: polygon(0 0, 50% 50%, 0 100%);
}

/* ピンク：右直角三角形 */
.gaiyou-temae-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #FF6BAF;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.gaiyou-temae-img-img {
    display: none; /* 画像は非表示、CSSで描画 */
}





    
    .map-modal .c-modal__wrapper {
        width: calc(100% - 54px);
    }




     
    .map-modal .c-modal__wrapper {
        width: calc(100% - 54px);
    }



    .program-haikei {
        background-color: #FF69B4;
        background: linear-gradient(to bottom, #FF69B4 0%, #FF69B4 50%, #2E4580 50%, #2E4580 100%);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 750px;
        z-index: 0;
        overflow: hidden;
    }
    
    .program-haikei-img-img {
        width: 100%;
        height: 750px;
        object-fit: cover;
        object-position: center top;
    }

    
    .program-temae {
        position: relative;
        z-index: 10;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0px 0 0 0;
        height: 700px;
    }
    
    .program-content {
        display: flex;
        justify-content: center;
        width: 100%;
        margin:0px 0 0 0;
    }

/* ...existing code... */

/* --- Program / Setlist Section --- */

.program-content {
    /* 親要素で中央寄せ */
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 30px 0 0 0;
    }

/* セットリスト全体を囲むラッパー */
.setlist_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    max-width: 928px;
    /* heightはコンテンツなりで伸びるようにauto推奨 */
    height: auto;
    
    margin: 0 auto;
}

/* 曲リストのコンテナ (2列配置) */
.setlist_grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    /* 縦の隙間16px、横の隙間32px */
    gap: 16px 32px;
    
    width: 100%;
}

/* 各曲のアイテムブロック */
.setlist_item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    
    /* 2列にする計算: (100% - gap横32px) / 2 */
    width: calc(50% - 16px);
}

/* 歌手名と曲名の行 */
.setlist_item_row {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: fit-content; /* コンテンツ幅に合わせて16px固定間隔を保つ */
    gap: 16px; /* ラベルと曲名の間隔 */
    margin: 0; /* PC版のmargin: 0 autoを上書き */
}

/* 歌手名ラベル (ピンクの楕円) */
.setlist_artist_label {
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 0 16px; を入れつつ幅固定にするか、Figma通り固定にするか等 */
    width: 86px;
    height: 22px;
    background: #DE2682;
    border-radius: 44px;
    flex-shrink: 0; /* 縮まないように */
    margin-left: 0; /* 左寄せ */
}

/* 歌手名のテキスト */
.setlist_artist_name {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: normal; /* デザイン調整 */
    text-align: center;
    color: #FFFFFF;
}

/* 曲名テキスト */
.setlist_song_name {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    color: #2E4580;
}

/* 点線ボーダー */
.setlist_border {
    width: 100%;
    height: 0px;
    border-bottom: 2px dotted #566CA4;
    translate:0px 6px;
}


/* フッターのピンク帯「【一部抜粋】」 */
.setlist_footer_bar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 27px;
    background: #FFC7E8;
    margin-top: 40px;
}

.setlist_footer_text {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.2em;
    color: #FF69B4; /* 文字色ピンク */
    /* 背景が薄ピンクなので文字が見えるか確認。Figma指定は白文字#FF69B4 ?
       指定コードでは color: #FF69B4 となっています */
}
.report-modal .c-modal__wrapper,
.performer-modal__content {
        width: calc(100% - 54px);
    }


    
    .map-modal__close,
    .venue-modal__close{
        
        right: -27px;
        top: -27px;
        width: 54px;
        height: 54px;
    }



    .program-title {
    padding: 91px 0 0 0;
    background-image: url(../images/concert/sp-program2.webp);
    background-size: 100% 96%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 31px 0px;
    color: #2E4580;
    font-family: "Zen Old Mincho", serif;
    font-weight: 900;
    font-style: Black;
    font-size: 25px;
    leading-trim: NONE;
    line-height: 120%;
    letter-spacing: 0%;
    text-align: center;
    width: 242px;
    height: 60px;
    margin: 92px 0px 0px


    
}

}


@media screen and (max-width: 600px) {
    .map-modal .c-modal__wrapper {
        width: calc(100% - 16px);
    }
    /* モーダルコンテンツのサイズ上書き */
.performer-modal__content {
    width: calc(100% - 16px);
    height: auto;
    max-width: 1000px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.map-modal__close,
.venue-modal__close{
    
        right: -8px;
        top: -27px;
        width: 54px;
        height: 54px;
}



}


/* 高さが750px以下の時に適用 pcのctaボタン位置修正 */
@media (max-height: 750px) {
    .performer-cta{
        top: auto;
        bottom: 20px;
    }

  
}

/* =============================================
   スクロールフェードイン（gaiyou テキスト）
   ============================================= */

/* 初期状態: 下にずれて透明 */
.js-scroll-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

/* 発火後: フェードイン完了状態 */
.js-scroll-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* stagger 遅延 */
.js-scroll-fade[data-delay="150"] {
    transition-delay: 150ms;
}
.js-scroll-fade[data-delay="300"] {
    transition-delay: 300ms;
}
.js-scroll-fade[data-delay="450"] {
    transition-delay: 450ms;
}

/* アクセシビリティ: モーション低減設定時は即時表示 */
@media (prefers-reduced-motion: reduce) {
    .js-scroll-fade {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =============================================
   出演者カード スクロールフェードイン
   PC: 親要素が見えたら4枚を stagger で順番に発火
   SP/TB: 各カードが画面に入ったら個別に発火
   ============================================= */

/* PC: 初期状態（非表示・下にずれ） */
@media (min-width: 1024px) {
    .js-performer-fade {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 1.0s ease, transform 1.0s ease;
    }
}

/* SP/TB: 初期状態（非表示・下にずれ） */
@media (max-width: 1023px) {
    .js-performer-fade {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1.0s ease, transform 1.0s ease;
    }
}

/* 発火後: 共通 */
.js-performer-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* アクセシビリティ: モーション低減設定時は即時表示 */
@media (prefers-reduced-motion: reduce) {
    .js-performer-fade {
        opacity: 1;
        transform: none;
        transition: none;
    }
}



@media (max-width: 1023px) and (min-width: 800px) {
    .charity-temae-img1 {
        position: absolute;
        top: 31%;
        left: 3%;
        width: 31%;
        z-index: 3;
        max-width: 225px;
    }
}