/*初期設定*/





* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;  /* ここがないと余白が残る場合あり */

font-family: M;

  color: var(--text);

   
font-family: 'Montserrat', 'Noto Sans JP', "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
   /* フォントの太さを「標準」に固定する（太すぎを防ぐ） */
  font-weight: 500; 
  
  /* 文字の形を整える魔法の呪文 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* 行間を少し広げると読みやすくなるハム */
  line-height: 1.7;
  letter-spacing: 0.03em;
}

/* 見出し（h1, h2, h3）だけ、力強く太くするハム！ */
h1, h2, h3 {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-weight: 900;
     

}








/*見出し*/
h2 {

}

h1 {
  
  text-align: center;
  width: 100%;
  margin: 120px auto 0 auto;
 font-size: clamp(36px, 6vw, 72px);
  
  /* 文字グラデーション設定 */
  background: linear-gradient(90deg, #6D94E3, #F5A21B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}



.container {
    width: 100%;
 
  margin: 0 auto;
  padding: 21px;
}

main {

   padding-top: 99px; 



 
}




.container2 {
  padding-left: 16px;
  padding-right: 16px;
  max-width: 1200px; /* あれば */
  margin: 0 auto;    /* 中央寄せ */
}





.dots-bg {
 
}





/* =========================
    ヘッダー
========================= */
header {
 
 padding: 18px 0;      /* 上下18px */

  width:100%;
  position: fixed;
   background-color: #fff;
  position: fixed;   /* 画面に固定 */
  z-index: 999; /* 他より上に表示 */
  /*background-color: #6D94E3;*/

  }


  .header-wave {
  display: block;
  width: 100%;
  height: 50px; /* 波の高さ */
  margin-top: -1px; /* 下の境界線とつなげたい場合 */
}
/* PC / モバイル共通  ハンバーガー押したら nav が開く */
nav {
  position: absolute;
  top: 70px; /* header 高さに合わせる */left: 0;
  width: 100%;
  background: transparent;
  display: none; /* デフォルトは隠す */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  z-index: 9999;
  top: 100%;
}


/* ハンバーガー押したら開く */
nav.open {
  display: block !important;
}



/* nav 内リスト */
nav ul {
  list-style: none;
  margin: 0;
  padding: 16px;
  

  gap: 16px;

  display: grid;                 /* グリッドに変更 */
  grid-template-columns: repeat(3, 3fr); /* 横に3列 */
  gap: 16px;                     /* 列の間隔 */
}

/* li 内のリンクを中央揃え */
nav ul li {
  text-align: center;
}

/* リンクデザイン */
nav ul li a {
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  padding: 8px 12px;
  display: block;
  border-radius: var(--radius);

  /* ここがポイント */
  transition: transform 0.2s ease, color 0.3s ease; /* 色もアニメ */
 
}


/* ホバー時に文字だけ浮かせる */
nav ul li a {
  display: inline-block;       /* transform を効かせるために inline-block に */
  transition: transform 0.2s ease;
}

nav ul li a:hover  {
  transform: translateY(-4px); /* 文字だけ上に浮く */
  color:#757a8a;                 /* だんだんオレンジに */
}




#main-nav ul{

width:40%;
margin: 0 auto;   /* ← 左右自動で中央に寄せる */




}






.brand {
  display: flex;
  align-items: center;
  
}

.brand-logo {
  height: 50px;   /* ← 元のロゴの高さに合わせる（調整可） */
  width: auto;
  display: block;
}



/* 親ボタン（白い丸）はそのまま */
.menu-toggle {
  position: relative;
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center; /* 真ん中に配置 */
}




/* ＝＝＝＝＝＝＝  
   線2本を絶対配置に変更  
   MENU の位置と完全独立！
＝＝＝＝＝＝＝ */
.menu-toggle .bar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 2px;
  background: #5e5e5e;
  border-radius: 1px;
  transition: all 0.3s ease;
  transform-origin: center;
}

/* 上の線（ちょい上にずらす） */
.menu-toggle .top-bar {
  transform: translate(-50%, calc(-50% - 6px));
}

/* 下の線（ちょい下にずらす） */
.menu-toggle .bottom-bar {
  transform: translate(-50%, calc(-50% + 6px));
}


/* ＝＝＝＝＝＝＝  
   open状態（× に変形）
＝＝＝＝＝＝＝ */
.menu-toggle.open .top-bar {
  transform: translate(-50%, -50%) rotate(45deg);
}

.menu-toggle.open .bottom-bar {
  transform: translate(-50%, -50%) rotate(-45deg);
}


/* MENU文字は今まで通り下に配置 */
.menu-toggle .menu-text {
  font-size: 10px;
  color: #5e5e5e;
  line-height: 1;
   margin-top:49px; /* ← MENUの文字を動かす */
  transition: opacity 0.3s ease;
}

/* MENU を消したくないので opacity 変更なし！ */



/* ← 中身全体を包むラッパ */
.menu-inner {
  position: relative;
  top: -6px;  /* ← 全体を少し上へ（好きに調整OK） */
  padding-bottom: 12px; /* ★MENUを線の下に押し下げる */
  display: flex;
  flex-direction: column;
  align-items: center;
}





/* リンクのボタン*/

.more-link-wrapper {
  text-align: right;
  margin-top: 30px;
  margin-bottom:80px;
}

.more-link-btn {
  display:inline-block;
  padding:14px 36px;
  background:#5e5e5e;
  color:#fff;
 border-radius: 5px;

  font-weight:bold;
  letter-spacing:2px;
  text-transform:uppercase;
  transition: .3s cubic-bezier(.4,0,.2,1);
  position: relative;
 text-decoration: none;


}

/* ホバー時のネオン感 */
.more-link-btn:hover {
  background:#fff;
  color:#0f172a;

  transform: translateY(-3px);
}





/*ここまで見出し*/



/*控えめなボタン
*/


.more-link-simple {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #F5A21B;           /* オレンジ文字 */
  text-decoration: none;
  transition: color 0.3s ease;
}

.more-link-simple .arrow {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;       /* 丸 */
  border: 2px solid currentColor; /* 文字色に合わせる */
  color: currentColor;      /* 文字色に合わせる */
  font-weight: bold;
  transition: transform 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.more-link-simple:hover {
  color: #6D94E3; /* 文字と丸と矢印が同時に薄くなる */
}

.more-link-simple:hover .arrow {
  transform: translateX(4px); /* 右にスライド */
  /* 背景は透明のまま */
}








/* ここまでリンクのボタン*/




/* =========================
    メインビジュアル
========================= */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
 
}

.hero h1 {
  font-size: 36px;
  margin: 0 0 8px;
}

.hero p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}


/*メイン画像*/


.tentative-img {
position: relative;   /* ★これが必須 */
  width: 100%;
}

.tentative-img img.mv-img {
  width: 100%;
  height: auto;   /* ← 画像の本来の高さに自動でなる！ */
  
}

/* 画像 */
.tentative-img img.mv-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 画像の上に重なるテキスト */
.mv-text {
  position: absolute;
  inset: 0;                 /* 上下左右いっぱい */
  display: flex;
  flex-direction: column;
 justify-content: flex-start;  /* ← 上揃え */
 align-items: flex-start; /* 左寄せ */
  text-align: center;
  color: #ffffff;
  padding: 20px;
   padding-top: 60px;    /* ← 下げる（ここ調整） */
  padding-right: 60px;  /* ← 右に寄せる（ここ調整） */

  /* 読みやすくするため */
 
}

/* キャッチコピー */
.mv-catch {
  writing-mode: vertical-rl;   /* ← 縦書き本体 */
  text-orientation: mixed;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
 
  display: inline-block;       /* ★超重要 */
  white-space: normal;         /* 念のため */
   animation: fadeUp 1.2s ease forwards;
  
   
}





/* 前景のスライド画像 */
.mv-fg-img {
  position: absolute;
  right: 10%;
  bottom: 10%;
  width: 300px; /* 好きなサイズ */
  z-index: 2;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 縦書きキャッチコピー */
.mv-catch.vertical {
  writing-mode: vertical-rl;   /* 縦書き（右→左） */
  text-orientation: mixed;     /* 日本語向け */
 font-size: 32px !important;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.1em;
   padding-left: 40px;
content: "";
}



/* 日付 */
.mv-date {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

/* 場所 */
.mv-place {
  font-size: 16px;
}



@media (max-width: 768px) {
  .mv-catch {
    font-size: 22px;
     
  }

  .mv-date {
    font-size: 16px;
  }
  @media (max-width: 768px) {
  .mv-catch.vertical {
    writing-mode: horizontal-tb; /* 横書きに戻す */
    font-size: 22px;
  }
}

}

@media (min-width: 769px) {
  .mv-text .mv-catch {
    font-size: 28px;

     color: #4c4c4c;                 /* ← 必ず白から反転 */
  mix-blend-mode: difference;
  }
}





.mv-text .mv-date, 
.mv-text .mv-place {
  margin: 0 !important; 
  padding: 0 !important;
}






/*メイン画像*/



/* =========================
  アバウトのところ
========================= */

#about{
margin-bottom:250px;



}


/* ロゴ画像のサイズを調整するハム */
/* 見出し全体の調整 */
.about-title-with-logo {
  display: flex;        /* 画像と「とは」を横並びにする */
  align-items: center;  /* 上下の中心を揃える */
  justify-content: center; /* 真ん中に寄せる */
  gap: 10px;            /* ロゴと「とは」の間のスキマ */
  margin-bottom:30px;
}

.about-logo-svg {
  height: 2.8em;      /* スマホ版のサイズ（今のまま） */
  width: auto;
  vertical-align: middle;
}

/* --- ここからPC版（画面幅が768px以上のとき）の調整 --- */
@media screen and (min-width: 768px) {
  .about-logo-svg {
    height: 3em;    /* ★PC版はもっと大きく！数字はお好みで調整してね */
  }
  
  .about-title-with-logo {
    gap: 12px;        /* PCではロゴと文字の間も少し広げるとゆとりが出るハム */
  }
}

/* もし「ブリッジフェスとは」という文字を消したことで
   何についてのセクションか分かりにくくなったら、
   画像の下に小さく補足を入れてもいいかもハム！ */




/* MVイラストの専用設定 */
.mv-illust {
  position: absolute;
  right: 5%;    /* 右から5%の位置 */
  bottom: 10%;  /* 下から10%の位置 */
  width: 600px; /* PCでのサイズ */
  height: auto;
  z-index: 5;   /* 文字(mv-text)と同じか、それより少し上にするハム */
  
  /* アニメーションの初期状態（右からスッ…の準備） */
  opacity: 0;
  transform: translateX(50px);
  transition: all 1.2s ease-out;
}

/* 表示された時の状態 */
.mv-illust.show {
  opacity: 1;
  transform: translateX(0);
}

/* スマホ用の微調整 */
@media (max-width: 768px) {
  .mv-illust {
    width: 80px;  /* スマホでは小さくするハム */
    right: 5%;
    bottom: 5%;
  }
}





/* =========================
  アバウトのところ
========================= */







/* =========================
    カード群
========================= */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.card {
  background: transparent; /* ← 背景を透明に（好きに色つけられる） */
  padding: 0;              /* ← 余白もゼロに */
  border-radius: 0;        /* ← 角丸なし */
  box-shadow: none;        /* ← 陰影なし */
}

.card h3 {
  margin: 0 0 8px;
}

.card p {
  margin: 0;
  color: var(--muted);
}







/* =========================
ココからアクセス
========================= */

.map-wrap iframe {
  width: 100%;
  max-width: 100%;
  height: 300px;
  border: 0;
  display: block;
}


/* =========================
ここまでアクセス
========================= */


/* =========================

出演者
========================= */





/*


出演者

*/

.performer-list {
   display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}



.performer-item img {
  width: 100%;
  height: 200px;           /* ← 好きな高さに調整 */
  object-fit: contain;     /* 画像を切らずに収める */
  background-color: transparent;
  border-radius: 6px;      /* 角少しだけ丸める（不要なら消す） */
}


.performer-item h3 {
  font-size: 1.1rem;
  margin: 6px 0 10px;
  text-align: center;
}

.performer-item .label {
  font-size: 0.75rem;
  font-weight: bold;
  color: #666;
  margin-top: 10px;
}

.performer-item .content {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #333;
}

@media screen and (max-width: 900px) {
  .performer-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .performer-list {
    grid-template-columns: 1fr;
  }
}





/* ===== 出演者・出展者カード グリッド ===== */
.performer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  margin-top: 24px;
}
/* ===== カード本体 ===== */
.performer-card {
    background: transparent;
 
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 0 6px rgba(0,0,0,0.08);
  margin-top:30px;
}

/* ===== 画像 ===== */
.performer-card img {
  width: 120px;
  height: auto;
  aspect-ratio: 190 / 220;   /* ← これで比率キープ */
  object-fit: cover;         /* ← トリミングして綺麗に収まる */
  border-radius: 8px;
  margin-bottom: 12px;
}

/* 出演者セクション全体の背景色 */
#performers {
  
  padding: 40px 20px;
  margin-top: 60px;
}

/* タイトル中央揃え（必要なら） */
#performers h2,
#exhibitors h2,
#timetable h2,
#notes h2,
#access h2
{
   /* 1. 箱を文字の幅に合わせる */
display: block;
  width: fit-content;
  min-height: 60px;
  
  /* 2. 背景画像の設定 */
  background-image: url("../img/decoration.png"); /* ★ここに自作画像のパスを入れてね */
  background-repeat: no-repeat;
  background-size: contain; /* 100% 100% だと画像が消えた時に箱も消えやすいハム */
  background-position: center;
  
  color: #3c3e44; /* 文字が見えないなら一旦消すか色を変えてみてハム */
  padding: 50px 120px;
  margin: 40px auto 30px;
}


/* 画面幅が768px以下のとき（スマホ・タブレット向け） */
@media screen and (max-width: 768px) {
  #performers h2,
  #exhibitors h2,
  #timetable h2,
  #notes h2,
  #access h2 {
    /* 1. 全体のサイズを抑える */
    min-height: 40px;     /* 高さを少し低くするハム */
    
    /* 2. 余白（padding）をスマホ用に小さくするハム！ */
    /* 上下を少し詰め、左右を大幅に減らして画面に収める */
    padding: 25px 60px;   
    
    /* 3. 文字のサイズもスマホに合わせて調整 */
    font-size: 20px;
    
    /* 4. 余白（margin）も少しコンパクトに */
    margin: 30px auto 20px;
  }
}







/*パフォーマーの設定*/
.container_pf {
  text-align: center;  /* これで文字も<h3>も全部真ん中になるハム！ */
  margin-top: 20px;
  line-height: 1.8;    /* 名前が詰まってると読みづらいから少し広げるハム */
}

.container_pf h3 {
  margin-top: 30px;    /* 日付の上に少し余裕を作るハム */
  display: inline-block; /* 下線の長さを文字に合わせたい場合はこれ */
  width: 100%;         /* 中央寄せを確実にするため */
}


/* =========================
ここまで出演者
========================= */




/* =========================
出展者など
========================= */



.timetable-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tt-card {
 background: transparent;
  padding: 12px 16px;
  border-radius: 8px;
  
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tt-time {
  font-weight: 700;
  color: #0f172a;
}

.tt-name {
  color: #757a8a; 
}



/* =========================
タイムテーブル
========================= */
.timetable-line {
 
  border-radius: 10px;
  overflow: hidden;

}

.tt-row {
  display: flex;
  border-bottom: 2px solid #e5e7eb;
}

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

.tt-col {
  padding: 14px 16px;
  font-size: 15px;
}

.tt-col.time {
  width: 90px;
  font-weight: 700;
  color: #5e5e5e
}

.tt-col.act {
  flex: 1;
  color: #334155;
}
/* =========================
注意事項
========================= */



/* ===== 注意事項 セクション ===== */






/* =========================
注意事項

========================= */





/* =========================
    フッター
========================= */
footer {
  
  padding: 32px 0;
  
  color: #111;
  font-size: 14px;

}

/*SNSアイコン*/

.footer-planner {
  display: flex;
  flex-direction: column;
  gap: 8px; /* タイトル・ロゴ・SNSの間隔 */
}

.footer-sns {
  display: flex;
  gap: 12px;            /* アイコン同士の間 */
  align-items: center;
}

.footer-sns img {
  width: 22px;          /* ← ここで大きさ調整 */
  height: 22px;
  transition: opacity 0.2s ease;
}

.footer-sns a:hover img {
  opacity: 0.7;
}







.footer-wrap {
  display: flex;
   flex-direction: column;   /* 縦に並べる */
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top:200px;
}


/* 企画のところ */
.footer-planner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.planner-title {
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
}

.planner-logo {
  width: 120px;   /* 好きなサイズに調整OK */
  height: auto;
  margin-bottom:10px;
}

/* コピーライトとリンク */
.footer-info {
  text-align: right;
}

.footer-info .dot {
  margin: 0 8px;
  color: var(--muted);
}






/* =========================
  ココからタブレット
========================= */



/* ===== タブレット（～899px） ===== */
@media (max-width: 899px) {
  .performer-grid {
    grid-template-columns: repeat(3, 1fr); /* タブレットは3列 */
  }
}



/* =========================
    ここまでタブレット
========================= */






/* =========================
    モバイル
========================= */


@media (max-width: 800px) {

  /* PC でもヘッダーは横100% の赤背景 */
  header {
    width: 100%;

  
    padding: 10px 0;

    

  }
   .footer-info {
    text-align: center;
    width: 100%;
  }

  .footer-planner {
    width: 100%;
  }

  
/* =========================
    モバイルのナビゲーション
========================= */
 #main-nav ul {
    width: 100%;                   /* 幅いっぱい */
    grid-template-columns: 1fr;    /* 1列にする */
    padding: 16px;
  }
 


/* =========================
   ココから出演者
========================= */
  
/* ===== 出演者・出展者カード グリッド ===== */
 .performer-grid {
    grid-template-columns: repeat(2, 1fr); /* スマホは2列！ */
    gap: 12px;
  }
/* ===== カード本体 ===== */
.performer-card {
  background: var(--card);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  box-shadow: 0 0 6px rgba(0,0,0,0.08);
}

/* ===== 画像 ===== */
.performer-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 190 / 220;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
}



 
/* =========================
  ここまで出演者
========================= */






 
}


.jump-buttons {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 999;
}

.jump-buttons button {
  padding: 10px 15px;
  background-color: #5e5e5e; /* ← 希望の色に変更 */
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.jump-buttons button:hover {
  background-color: #5578c2;
}



/*開催概要*/





.summary-table {
  width: 100%;
  max-width: 600px; /* 好きに調整 */
  margin: 0 auto;
  border-collapse: collapse;
  font-size: 16px;
}

.summary-table th,
.summary-table td {
  padding: 12px 16px;
  border: 1px solid #dedede;
  border-radius: 3px;
  background-color: transparent;
}

.summary-table th {
  text-align: left;
 
  width: 30%;
}

.summary-table td {
  text-align: left;
}


/*
お知らせ部分
*/
/* お知らせ全体 */
#news {
  margin-top: 60px;
}

#news h2 {
  /* 1. 箱ごと左に寄せる（重要！） */
  /* 上:40px, 右:auto, 下:30px, 左:0 */
  margin: 40px auto 30px 0; 

  /* 2. 背景画像の設定（共通設定を活かす） */
  background-image: url("../img/decoration.png"); 
  background-repeat: no-repeat;
  background-size: contain;
  
  /* 3. 画像の基準を「左」にするハム */
  background-position: left center; 

  /* 4. 余白の調整（左寄せのときは左右のバランスを微調整） */
  /* padding: 上下 左右; */
  padding: 50px 80px; /* 左寄せの時は少し右側を削っても綺麗ハム */
  
  /* 5. 文字の配置も左へ */
  text-align: left;
}

/* スマホ版（さっきのメディアクエリの中に追加してね） */
@media screen and (max-width: 768px) {
  #news h2 {
    margin: 30px auto 20px 0; /* スマホでも左寄せをキープ */
    padding: 25px 40px;       /* スマホ用のサイズダウン */
    font-size: 20px;
  }
}

/* 一覧レイアウト */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 個別ニュース（カード風をやめてスッキリ） */
.news-item {
  padding: 0;
  background: none;
  border-bottom: 1px solid #ddd;
  padding-bottom: 12px;
  cursor: pointer;
}

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

/* 日付＋タイトル */
.news-date {
  font-size: 14px;
  color: #666;
  display: block;
  margin-bottom: 4px;
}

.news-item h3 {
  margin: 0 0 6px;
  font-size: 18px;
  color: #111;
}

/* 概要 */
.news-item p {
  margin: 0;
  color: #444;
  line-height: 1.5;
}




/* モーダル */
.modal {
  display: none;
  position: fixed;
  z-index: 10000;
  inset: 0;
  background: rgba(0,0,0,0.5);
  padding: 24px; /* ← 画面端との余白 */
}

.modal-content {
  background: #fff;
  margin: 8% auto;
  padding: 24px;
  max-width: 600px;
  border-radius: 12px;
  position: relative;
    max-height: calc(100vh - 80px); /* ← 上下にも余白 */
}
.modal-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.modal-date {
  font-size: 14px;
  color: #666;
}


.close {
  position: absolute;
  right: 16px;
  top: 16px;
  font-size: 24px;
  cursor: pointer;
}











/*タイムスケジュール*/
#time-schedule {
  margin: 86px auto 0 auto;
  width: 100%;
  max-width: 800px;
}

/* タブレットくらい */
@media (max-width: 992px) {
  #time-schedule {
    max-width: 600px;
  }
}

/* スマホ */
@media (max-width: 600px) {
  #time-schedule {
    max-width: 100%;
  }
}











#Performers {
  margin-top: 86px;
}



.timeline {
  display: flex;
  gap: 16px;
  height: auto; /* タイムライン全体の高さ */
}


.timeline-time {
  width: 60px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 上から順に配置 */
  border-right: 2px solid #ccc;
  padding-right: 8px;
  
}

.time-mark {
  font-size: 12px;
  color: #555;
  text-align: right;
  font-weight: 600;

  /* ★ここを 20px から 40px に広げるハム！ */
  height: 40px; 
  line-height: 40px; /* 文字を高さの真ん中に */
  
  margin: 0;
  padding-right: 10px;
  box-sizing: border-box;
}


/* 右の出演バー */
.timeline-events {
  flex: 1;
  position: relative;
  /* ★背景の線の間隔も 40px に合わせるハム！ */
  background-image: linear-gradient(#eee 1px, transparent 1px);
  background-size: 100% 40px; 
}

.event {
position: absolute; /* JSで座標を決めるための設定 */
  left: 5px;
  width: 95%;
  box-sizing: border-box;
  z-index: 10;
  display: flex;
  gap: 12px;
  border-radius: 6px;
  padding: 4px 8px; /* 少しスリムに */
  align-items: flex-start;
  overflow: hidden; /* はみ出し防止 */
  /* ★重要：min-heightは消す（JSが決めたheightを優先する） */
}




/* スマホ対応 */


/* スマホ対応 */
@media screen and (max-width: 768px) {

  /* タイムライン全体 */
.timeline-time {
    width: 50px;
    min-width: 50px;
  }

/* 左側時間軸 */
.timeline-time {
  width: 25%;  /* 画面幅に応じる */
  min-width: 60px; /* 極端に小さくならないように */
  box-sizing: border-box;
  padding-right: 8px;
}

/* 右側イベント */
.timeline-events {
  width: 75%;
  box-sizing: border-box;
  position: relative; /* 絶対配置のイベントを保持 */
}

}





/* イベントバー */


.event .time {
  font-size: 12px;
  font-weight: bold;
  min-width: 60px;
  text-align: left;
  line-height: 1.2;
}
/* イベント内の詳細（出演者・内容） */
.event .details {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}


.event .details .activity {
  margin: 0;
  font-size: 12px; /* 枠が狭いので少し小さく */
  color: #334155;
  width: 100%; /* 横幅は親に任せる */
  max-width: 400px;
  white-space: normal;
  word-break: break-all;
}
@media (max-width: 600px) {
.event .details .activity {
    max-width: 150px;
  }
}


section.day {
  margin-top: 30px;   /* 上に余白を付けたい場合 */
  margin-bottom: 90px; /* 下に余白を付けたい場合 */
}





/* 時間ブロック */
.event p.time {
  display: flex;
   flex-direction: row;    
  align-items: center;
  margin: 0 8px 0 0;
  height: 40px; /* 15分単位 */
}



.event p.time span {
  margin: 0;
}

.event p.time .line {
  width: 2px;
  flex: 1;
  background-color: #6b7791;
  margin: 2px 0;
}


/*タイムラインボタン*/

.timeline-tabs {
  display: flex;
  justify-content: center;  /* 中央寄せ */
  gap: 12px;                /* ボタン間のスペース */
  margin-bottom: 20px;      /* タイムテーブルとの間隔 */
}

.timeline-tabs .tab {
  padding: 8px 20px;
  border: 2px solid transparent; /* 初期は枠線なし */
  border-radius: 12px;           /* 角丸 */
  background-color: #5e5e5e;         /* 黒背景 */
  color: #fff;                    /* 白文字 */
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;      /* 滑らかなアニメーション */
}

.timeline-tabs .tab:hover {
  background-color: #9e9eaa;          /* ホバーで白背景 */
  color: #ffffff;                  /* 文字オレンジ */
 
}

.timeline-tabs .tab.active {
  background-color: #9094a2;          /* 選択中は黒背景 */
  color: #fff;                      /* 白文字 */
  border: 2px solid transparent;    /* 枠線なし */
}

.timeline-events .event:nth-child(odd) {
  background-color: #fdf1c0; /* 薄いグレー */
}

.timeline-events .event:nth-child(even) {
  background-color: #d2e2ff; /* 薄い水色 */
}

.jpg-bg{
  /*background-image: url("../img/bgtest.jpg");*/
   /*background-repeat: repeat;
  /* background-size: 1000px 1000px; /* ← 今作った画像サイズに合わせる */
   /*background-color: #f7fafc;    /* 念のための下地 */

 /*min-height: 100vh;*/

}





#main-nav {
    background-color: #ffffff; /* 白にする */
    position: absolute;        /* ボタンの位置に重なる */
    top: 100%;                 /* ヘッダーのすぐ下に表示 */
    right: 0;
    left: 0;
    display: none;             /* 初期状態は非表示 */
    z-index: 998;              /* ヘッダーより少し下 */
}

/* メニュー開いたときに表示する場合のクラス */
#main-nav.open {
    display: block;
}


/* =========================
   スマホ版：もっと小さく、もっと上へ調整
   ========================= */
/* =========================
   スマホ版：キャッチは上、日付と場所はセットで下！
   ========================= */
@media (max-width: 768px) {
  .mv-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* 基本は上詰め */
    height: 100% !important;
    padding: 10px 10px !important; /* 上下左右の余白を10pxに */
    box-sizing: border-box !important;
  }

  /* キャッチコピー */
  .mv-catch {
   /* まずは横書きを確定させるハム！ */
    writing-mode: horizontal-tb !important; 
    display: block !important;
    
    /* 横書きにおける「下の余白」を自動にして、日付たちを押し下げるハム */
    margin-bottom: auto !important; 
    
    /* 縦書きの時に設定した「左の余白」などが残ってたら邪魔なのでリセット */
    margin-top: 2px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    
    font-size: 18px !important;
    line-height: 1.3;
  }

  /* 日付と場所（ここをセットで下に固める） */
  .mv-date {
    margin-top: 0 !important;
    margin-bottom: 2px !important; /* 日付同士の隙間を小さく */
    font-size: 13px !important;
  }

  .mv-place {
    margin-top: 2px !important; /* 日付のすぐ下に配置 */
    margin-bottom: 5px !important; /* 画像の底に近すぎないよう少しだけ余白 */
    font-size: 13px !important;
  }

  /* 全てのpタグの共通設定 */
  .mv-text p {
    display: block !important; /* inline-blockだとズレる場合があるのでblockに */
    width: fit-content;
    text-align: left !important;
  }
}


/* PC・タブレット向けの共通設定 */
.mv-catch {
  /* 最小 24px（スマホ）、推奨サイズ 4vw（画面の広さの4%）、最大 80px（大画面PC） */
  font-size: clamp(24px, 4.5vw, 80px) !important; 
  
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.15em;
  
  /* 縦書きの設定（PC時） */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  
  /* アニメーションと配置 */
  display: inline-block;
  animation: fadeUp 1.2s ease forwards;
  

}

/* PC（1024px以上）での微調整 */
@media (min-width: 1024px) {
  .mv-text {
    padding-top: 60px !important;  /* PCではもう少し下げた方がバランスがいいハム */
    padding-right: 100px !important; /* 右の余白も少し広げるハム */
  }
  .mv-catch {
    line-height: 1.5; /* 文字が大きい時は行間を広げると綺麗ハム */
  }
}

/* スマホ用の設定（ここは今の良さをキープするハム） */
@media (max-width: 768px) {
  .mv-catch {
    writing-mode: horizontal-tb !important; /* 横書きに戻す */
    font-size: clamp(20px, 6vw, 28px) !important; /* スマホでの最適サイズ */
    margin-bottom: auto !important;
  }
}
/* 日付の調整 */
.mv-date {
  /* 最小 14px、推奨 2vw、最大 32px */
  font-size: clamp(14px, 2vw, 32px) !important;
  font-weight: 600;
  margin-bottom: 8px !important;
  line-height: 1.2;
  /* 読みやすくするために影も一応設定（不要なら none にしてハム） */
  color:white !important;
  font-family: 'Montserrat', sans-serif; /* 数字を一番カッコよく見せる！ */
  font-weight: 700; /* 太めにすると数字が映えるハム */
  
}

/* 場所の調整 */
.mv-place {
  /* 最小 13px、推奨 1.5vw、最大 24px */
  font-size: clamp(13px, 1.5vw, 24px) !important;
  font-weight: 500;
  line-height: 1.2;
    color:white!important;
    font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; /* 日本語をパキッとさせる */
  font-weight: 500;
  
}

/* スマホ版（ボヤボヤ対策で影を消すハム！） */


/* 日付と場所を右下に固定する設定 */
.mv-info-bottom {
  position: absolute;   /* 親要素(.mv-text)に対して自由な位置に置くハム */
  right: 20px;         /* 右端からの距離 */
  bottom: 40px;        /* 下端からの距離 */
  text-align: right;   /* 文字を右揃えにするハム */
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  letter-spacing: 0.05em; /* 文字の間隔を少し広げると高級感が出るハム */
}

/* スマホ版（画面が小さい時）の調整 */
@media (max-width: 768px) {
  .mv-info-bottom {
    right: 10px;       /* スマホでは少し端に寄せる */
    bottom: 10px;
  }
  
  .mv-date, .mv-place {
    font-size: 12px !important; /* スマホで見やすいサイズに */
  }
}
/* --- PC版（画面が広い時）の文字サイズをガッツリ大きくするハム！ --- */
@media screen and (min-width: 769px) {
  .mv-info-bottom {
    right: 40px;   /* PCではもう少し内側に入れるとバランスがいいハム */
    bottom: 20px;  /* 下からの位置も微調整 */
  }

  /* 日付を大きく！ */
  .mv-info-bottom .mv-date {
    font-size: 35px !important;  /* clampに頼らず数値を指定するハム */
    margin-bottom: 8px !important;
  }

  /* 場所を大きく！ */
  .mv-info-bottom .mv-place {
    font-size: 30px !important;
  }
}


/* 親：必ず基準になる */
.tentative-img {
  position: relative;
  width: 100%;
}

/* 背景画像：高さを作る */
.mv-img {
  display: block;
  width: 100%;
  height: auto;
}

/* これが重なるレイヤー */
.mv-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* スライドイン画像 */
.mv-illust {
  position: absolute;
  right: 0%;
  bottom: 0%;
  width: 85%;
  z-index: 1;

  opacity: 0;
  transform: translateX(80px);
  transition: all 1.2s ease;
}




@media screen and (min-width: 769px) {

.mv-illust {
  
  width: 70%;
 
}



}

.mv-illust.show {
  opacity: 1;
  transform: translateX(0);
}
.mv-text {
  position: absolute;
 
 
  z-index: 2;
}




.ticket-link-wrap {
  text-align: center;
  margin-top: 90px; /* ← ここを大きめに */
}
.ticket-link {
  display: inline-flex;          /* ← 重要 */
  align-items: center;           /* ← 縦中央揃え */
  justify-content: center;       /* ← 横中央揃え */

 
  font-size: 20px;               /* ← 文字を大きく */
  font-weight: 700;
  letter-spacing: 0.08em;
margin:0 auto;
  color: #fff;
  background-color: #000;
  text-decoration: none;

  border-radius: 9999px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  line-height: 0;
   padding: 50px 80px;            /* ← 大きめ */
}
.ticket-link {
  background: #000;
  transition: background-color 0.25s ease;
}

.ticket-link:hover {
  background: #333;
}

@media (max-width: 768px) {
.ticket-link {
 
 
  font-size: 20px;               /* ← 文字を大きく */
  

   padding: 50px 30px;            /* ← 大きめ */
  }
    }

    .site-title{
position:absolute;
opacity:0;
pointer-events:none;
}