/*  リセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*  ＿＿＿＿＿＿＿🟥基本 */
html {
       font-size: 100%;
}



/* 常にダークモードのスタイル */
body {
line-height: 1.7;
  background-color: #f5f5f5;  /* 淡いグレー */
  color: #333333;   /* ほぼ黒*/
  font-family: 'Helvetica Neue', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

header {
  background-color: #555555; /* グレー */
   color: #f8f8f8;   /* 淡い白*/
  padding: 1.4em;
  text-align: center;
}

footer {
  position: sticky;
  top: 100vh;
  width: 100%;
  background-color: #f5f5f5;  
  padding: 1em;
  text-align: center;
}


body{
       line-height: 2;
       
}

/* ダークモード＿ここまで */



a {
  color: #0bd; /* 明るめの青系（おすすめ） */
  text-decoration: none;
}

a:hover {
  color: #5cf; /* ホバー時はさらに明るい青などにしてもOK */
}



.main-nav a {
    color:  #f8f8f8; /* 通常時：淡い白 */
    text-decoration: none; /* 下線を消す場合など */
}

.main-nav a:hover {
    color: #0bd; /* ホバー時：差し色として明るい色を使用 */
}


img {
       max-width: 60vw;
       width: 100%;
      margin:10px auto;
      
}

.border-line {
  width: 100%; /* 幅をページいっぱいに */
  height: 1px; /* 線の太さ */
background-color: #8888; /* ← グレーに変更 */
  margin: 10px auto; /* 上下の余白 */
}

.border-line-half {
  width: 80%; /* 幅をページいっぱいに */
  height: 1px; /* 線の太さ */
background-color: #8888; /* ← グレーに変更 */
  margin: 15px auto; /* 上下の余白 */
}


/*  ＿＿＿＿＿＿🟥ヘッダー */

.logo {
      width: 75px;
       margin-top:22px;
       margin-left:10％;
      
}

.main-nav {
       display: flex;
       font-size: 1rem;
       margin-top: 19px;
       margin-left: 1％;
       margin-bottom: 10px;

       list-style: none;
}

.main-nav li {
       margin-left: 35px;
   

}


/*--nav--*/

.page-header {
        display: flex;
         justify-content: space-between;  
     
}

.insta-logo{
       width: 17px;
       height: 17px;
      opacity: 0.6;
       margin-top:16px;
    
}

.wrapper {
        max-width: 100%;
        margin:0 auto;
        padding: 0 4%;
}

/*  ＿＿＿＿＿＿＿＿🟥メイン */


 main {
              margin: 3% 8% 30px;
      }





html {
      font-size: 90%;
}

h1 {
       
       text-align: left;
       font-size: 2.5rem;
}

.info-text {
       margin: 10% 10% 30%;
       position: relative;
       z-index: 1;

}


.past {
  position: relative;
  display: inline-block; /* 必須 */
  z-index: 1;
  padding: 0.2em 0.4em; /* マーカーの余白も兼ねる */
  font-size: 2rem;
}

.past ::before {
  content: "";
  position: absolute;
  top: -15%;
  left: -15%;
  width: 130%;
  height: 130%;
  background: rgba(211, 211, 211, 0.5); /* 50% 透明なライトグレー */
  z-index: -1;
  border-radius: 0.2em; /* 角を少し丸く */
}





/*  ＿＿＿＿＿＿＿🟥フッター */
.page-footer {
        text-align: center;
        margin:0 auto;
        padding: 0 4%;
}


/* ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ 🔷ページ毎デザイン＿＿＿＿＿＿＿＿＿＿＿ */

/*  ＿＿＿＿＿＿＿🟥HOME画面*/

.back-image-white{
 position: fixed;
  top: 20%;      /* 任意の位置に調整（%でもOK） */
  left: 20%;
  width: 35vw;
  height: auto;
  z-index: -1;

}

/* ＿＿＿＿＿＿＿  ＿🟥upcoming */


.img-small{
 max-width: 30vw;
          width: 100%;
      margin:10px 10%;

}

.title-marker-short{
 width: 10rem; 
  height: 4.4rem; /* 線の太さ */
background: rgba(211, 211, 211, 0.5); /* 50% 透明なライトグレー */

 padding: 1rem 0px 1rem 25px;

  margin:20px 20px 20px -33px;

border-top-right-radius: 1.6rem;
  border-bottom-right-radius: 1.6rem;



}


.title-marker{
 width: 13rem; 
  height: 4.4rem; /* 線の太さ */
background: rgba(211, 211, 211, 0.5); /* 50% 透明なライトグレー */

 padding: 1rem 0px 1rem 25px;

  margin:20px 20px 20px -33px;

border-top-right-radius: 1.6rem;
  border-bottom-right-radius: 1.6rem;
  


}



.title-marker-2{
 width: 14rem; 
  height: 4.4rem; /* 線の太さ */
background: rgba(211, 211, 211, 0.5); /* 50% 透明なライトグレー */

 padding: 1rem 0px 1rem 25px;

  margin:30px 20px 30px -33px;
  
border-top-right-radius: 1.6rem;
  border-bottom-right-radius: 1.6rem;



}


.title-marker-long{
 width: 17rem; 
  height: 4.4rem; /* 線の太さ */
background: rgba(211, 211, 211, 0.5); /* 50% 透明なライトグレー */

 padding: 1rem 0px 1rem 25px;

  margin:30px 20px 30px -33px;
  
border-top-right-radius: 1.6rem;
  border-bottom-right-radius: 1.6rem;



}

/* ＿＿＿＿＿＿＿＿🟥文章隠し */
.artist-info input[type="checkbox"] {
    display: none;
}

.artist-info label {
    cursor: pointer;
    display: inline-block;
    padding: 5px;
    background-color: #f0f0f0;
    border-radius: 5px;
}

.artist-info .info-content {
    display: none;
    margin-top: 10px;
}

.artist-info input[type="checkbox"]:checked + .info-content {
    display: block;
}






/* ＿＿＿＿＿＿＿＿🟥スペジュールスライダー */


/* スケジュールコンテナ */
.schedule-container {
    margin-top: 20px;
}

/* 年の表示 */
.year h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

/* 月の一覧 */
.months {
    font-size: 20px;
}

.month {
    display: inline-block;
    margin: 5px 10px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.month:hover {
    background-color: blue;
    color: white;
}

/* スライダー */
.slider-container {
    display: flex;
    align-items: center;
    justify-content: left;
    margin-top: 20px;
}

/* スライダー画像枠 */
.image-box {
    width: 80%;
    height: auto;
    border: 2px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: white;
}

.image-box img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* スライドボタン */
button {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
    transition: color 0.3s ease;
}

button:hover {
    color: red;
}

 /*--＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿🟥price-*/
    
.price {
    font-family: Arial, sans-serif;
    
    text-align: center;
    padding: 20px;
    color: #f0f0f0; /* 明るめの文字色 */
}

table {
    width: 80%;
    margin: 1%  1% 0px 3%;
    border-collapse: collapse;
    background-color: #f8f8f8; /* 背景色を黒に設定 */
    color: #333333; /* テキストの色を白に設定 */
 
}

th {
    background-color: rgba(70, 153, 202, 0.5); /* ブルー */
    color: #ffffff;
}

tr:nth-child(even) {
    background-color: rgba(30, 30, 30, 0.2); /* 薄いダークグレー */
}


th, td {
    padding-top: 4px;
    padding-bottom: 4px;
}

.note {
    margin-left: 4%;
    font-size: 1rem;
    color: #333333; /* 明るめのグレー */
}


/*＿＿＿＿＿＿＿＿＿＿＿＿🔷デスクトップ表示＿＿＿＿＿＿＿＿＿＿*/

@media (min-width: 601px) {
  .nav-toggle {
    display: none; /* PC時はハンバーガーボタン隠す */
  }
  .menu {
    position: static;
    transform: none !important; /* 常に表示 */
    background: none;
  }
  .main-nav {
    display: flex;
    align-items: center;
  }
  .main-nav li + li {
    margin-top: 0;
    /*   margin-left: 1rem;   */
  }
  
}


/*＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿🔷スマホ表示＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿*/
@media(max-width: 600px){






 /*--＿＿＿＿＿＿＿＿＿＿🟥ヘッダースマホ-*/

.page-header.wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 8px 8px 8px;
 
  position: relative; 
}

/* ▼ ロゴ画像 */
.logo {
  max-width: 60px;
  height: auto;
  margin:3% 3%;
  
}

/*＿＿＿＿＿＿＿＿＿＿🟥ハンバーガーボタン ここで .nav-toggle を display:block; にする */
  .nav-toggle {
    display: block;       /* ← これが重要！ */
    background: none;
    border: none;
    cursor: pointer;
    width: 43px;
    height: 43px;
    position: relative;
    z-index: 999; /* ボタン(999)がメニュー(998)より前面 */
margin-top:4%;
    margin-bottom:4%;
   
    margin-right:3%;



  }


/* ▼ ハンバーガーボタン（右上の3本線）の通常時 */
.hamburger,
.hamburger::before,
.hamburger::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: #de3400; 
  border-radius: 2px;
  transition: 0.3s ease;
  position: relative;
}

.hamburger {
content: "";
  position: relative;
  top: 50%;
  transform: translateY(-50%);
background: #fff000; /* 真ん中の線を黄に */
}

.hamburger::before {
content: "";
  position: absolute;
  top: -10px; /* 真ん中線より上 */
  left: 0;
 background: red; /* 上の線を赤に */
}

.hamburger::after {
content: "";
  position: absolute;
  top: 8px;  /* 真ん中線より下 */
  left: 0;
  background: #6BBBEF; /* したの線を青に */
}


/* ✅ 緑の線（通常時） */
.hamburger .extra-line {
  content: "";
  display: block;
  width: 100%;
  height:3px;
  background: green;
  border-radius: 2px;
  position: absolute;
  top: 15px;
  left: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center center;
}






/* ▼ ボタンが開かれた (aria-expanded="true") 状態 → 3本線をクロスに */
.nav-toggle[aria-expanded="true"] .hamburger {
  background: transparent; /* 真ん中の線を消す */
}

/* ここで上下線を白に */
.nav-toggle[aria-expanded="true"] .hamburger::before,
.nav-toggle[aria-expanded="true"] .hamburger::after {
  background: #ffffff;  /* 白に変更 */
}

.nav-toggle[aria-expanded="true"] .hamburger::before {
  transform: rotate(45deg) translate(0.22px, 0.22px);
  top: 0; /* 真ん中あたりに寄せる */
}
.nav-toggle[aria-expanded="true"] .hamburger::after {
  transform: rotate(-45deg) translate(0.22px, 0.22px);
  top: 0;
}


/* ✅ メニューが開いたとき：緑の線を回転して透明にする */
.nav-toggle[aria-expanded="true"] .hamburger .extra-line {
  transform: rotate(90deg);
  opacity: 0;
}


.hamburger .extra-line {
  top: -2px; /* 緑線の中心位置を微調整。環境に応じて調整してください */
}


/* ▼ メニュー本体を右側に隠す */
.menu {
  position: fixed;
  top: 0;          /* ヘッダーの上端から */
  right: 0;        /* 画面右端 */
  width: 180px;    /* お好みの幅 */
  height: 425px;   /* 画面全体の高さ */
 background: #D3D3D3;
  transition: transform 0.3s ease;
  transform: translateX(100%); /* 初期は右の外へ隠す */
  z-index: 998;   /* ボタン(999)より下にする */
  padding: 2rem 1.5rem; /* 内側余白 */



 /* 右側が半円状になるように調整 */
  border-top-left-radius: 100px; /* 上の角を丸く */
 border-bottom-left-radius: 100px; /* 下の角を丸く */
  



}

/* ▼ [data-visible="true"] でスライドイン */
.menu[data-visible="true"] {
  transform: translateX(0);
}

/* ▼ 縦に並べる */
.main-nav {
  list-style: none;
  display: flex;
  flex-direction: column; /* 縦並び */
  gap: 1rem;              /* メニュー同士の余白 */
padding-top: 40px;
margin-top:10px;
  margin-left:2px;
}

/* ▼ メニューのリンク */
.main-nav a {
  color: #333333;
  text-decoration: none;
  font-size: 0.9rem;
margin:30px 0px;
  /* 横文字のままにしたい場合は特に何もしなくてOK */
}

.main-nav a:hover {
  color: #0bd; /* ホバー時の色 */
}


 /*-＿＿＿＿＿＿＿＿＿＿＿＿＿＿🟥HOMEスマホ-*/
       main {
              margin: 3% 8% 30px;
      }



       h1 {
             margin-left: 8%;
             text-align: left;
             font-size: 1.5rem;
       }

       h2 {
             margin-left: 2%;
             text-align: left;
             font-size: 1.4rem;
       }

        h3 {
             margin-left: 2%;
             text-align: left;
             font-size: 1.1rem;
       }

         p{
             margin-left: 2%;
             font-size: 0.8rem;
}
         li{
             margin-left: 9%;
             font-size: 0.8rem;
}

img {
       max-width: 98vw;
       width: 100%;
      margin:0 auto;
}


.info-text {
       margin-left: 8%;
       margin: 50px  0px 100px;

}

.insta-logo{
       width: 17px;
       height: 17px;
      opacity: 0.6;
       margin-top:-1px;
    
}



.back-image{
 position: fixed;
  top: 25%;     
  left: 20%;
  width: 63vw;
  height: auto;
  z-index: -1;

}

/* ＿＿＿＿＿＿＿＿🟥upcoming */


.img-small{
 max-width: 70vw;
          width: 100%;
      margin:10px 10%;

}



.title-marker-short{
 width: 10rem; 
  height: 4.4rem; /* 線の太さ */
  background-color: #D3D3D3; /* 線の色 */
 padding: 1rem 0px 1rem 25px;

  margin:20px 20px 20px -33px;

border-top-right-radius: 1.6rem;
  border-bottom-right-radius: 1.6rem;


}


.title-marker{
 width: 11rem; 
  height: 4.4rem; /* 線の太さ */
  background-color: #D3D3D3; /* 線の色 */
 padding: 1rem 0px 1rem 25px;

  margin:20px 20px 20px -33px;

border-top-right-radius: 1.6rem;
  border-bottom-right-radius: 1.6rem;
  
}



.title-marker-2{
 width: 12rem; 
  height: 4.4rem; /* 線の太さ */
  background-color: #D3D3D3; /* 線の色 */
 padding: 1rem 0px 1rem 25px;

  margin:30px 20px 30px -33px;
  
border-top-right-radius: 1.6rem;
  border-bottom-right-radius: 1.6rem;

}


.title-marker-long{
 width: 17rem; 
  height: 4.4rem; /* 線の太さ */
  background-color: #D3D3D3; /* 線の色 */
 padding: 1rem 0px 1rem 25px;

  margin:30px 20px 30px -33px;
  
border-top-right-radius: 1.6rem;
  border-bottom-right-radius: 1.6rem;

}

/*--＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿🟥priceスマホ-*/

 table {
            width: 100%;
            margin: 3％ auto;
            border-collapse: collapse;
          
        }

 th, td {
            border: 1px solid #ddd;
            padding: 5px;
            text-align: center;
        }

table {
    font-size: 75%;
}


/* ＿＿＿＿＿＿＿＿🟥スペジュールスライダー */

.months {
    font-size: 15px;
}


/* スライダー画像枠 */
.image-box {
    width: 100%;
    height: auto;
    border: 2px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: white;
}

/* スライドボタン */
button {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    transition: color 0.3s ease;
}