@charset "utf-8";
/* CSS Document */
body {
      background-color: #262932;
      color: #fff;
      font-family: 'Noto Sans JP', sans-serif;
      margin: 0;
      font-size: 1.1vw; 
      line-height: 2;
    }
      p { color: rgba(255,255,255,.7);}
    
    header {
      background-color: #6BC6CC;
      padding: 2vw;
      text-align: center;
    }
    
    header h1 {
      color: #FFFFFF;
      font-size: 3vw;
    }
    
    main {
      padding: 0; background-color: #262932;
    }

    .main-image {
      position: relative;
      height: 80vh;
      padding: 0;
      overflow: hidden;
    }

    .main-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .main-image .image-text {mix-blend-mode: overlay;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #FFFFFF;
      font-size: 3vw; font-family: 'Noto Serif JP', serif; font-weight: 500;
      text-align: center;
    }
      .main-image .image-text p { color: #FFF;}
      .main-image .image-text span { display: block; font-size:20%; font-weight: normal; margin-top: .7em;}
    
    .overview {
      background-color: #262932;
      padding: 2vw;
      margin-top: 2vw; position: relative;
    }
      .overview:before {
    content: "";
    display: block;
    width: 30%;
    height: 100vh;
    position: absolute;
    bottom: -10vh;
    right: 0;
    background-color: rgba(255,255,255,.05);
}
      .overview:after {
    content: "";
    display: block;
    width: 40%;
    height: 40vh;
    position: absolute;
    top:0;
    left: 0;
    background-color: rgba(255,255,255,.1);
}
      .overview h2,.overview p { position: relative; z-index: 1;}
    
    .artist-section {
      /*background-color:#3A4245;*/
      padding: 0; padding-top: 5vw;
      /* .artist-sectionのpaddingを0に設定 */
      margin-top: 2vw;
    }
      
      .artist-section:before {
    content: "";
    display: block;
    width: 45%;
    height: 100vh;
    /* position: relative; */
    background-color: rgba(255,255,255,.1);
    position: absolute;
}
    
    .artist-section h2 {
      font-size: 1.8vw;
      width: 100%;
      text-align: center;
    }
    
    .artist-profile {
      display: flex;
      align-items: center;
      /* 要素を垂直方向に中央揃え */
      margin-bottom: 2vw;
      position: relative;
    }

    .artist-profile img {
      width: 60%;
      margin-right: -3vw;
    }

    
    .artist-bio {
      flex-grow: 1;
      background-color: #51636D;
      padding: 4vw;
      margin-left: -1vw;
      margin-top: 1vw;
    }

    .artist-bio h3 {
      font-size: 2em;
      /* 現在のフォントサイズの2倍 */
      margin-top: 0;
      /* 追加：h3のmargin-topを0にする */
      margin-bottom: .7em;
    }
    
    h2 + p {
      text-align: center;
      /* h2の次にあるpを中央揃えにする */
    }
    
    
    .artwork-container {
      flex-basis: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      /* 要素を水平方向に中央揃え */
      padding: 0 3vw; margin-top: 3em;
      /* 左右のパディングを4vwに設定 */
        position: relative;
    z-index: 1;
    }
    
    .artwork {
      flex-basis: calc(25% - 3vw);
      margin: 1.5vw;
      /* Increase the margin to 1.5 times the current value */
    }
      .before .artwork {
      flex-basis: calc(20% - 2vw);
      margin: 0.75vw;
      /* Increase the margin to 1.5 times the current value */
    }
      
      
      .before h3 { width: 100%; padding-left: 2vw; box-sizing: border-box; margin-bottom: .7em;}
      .before { padding-bottom: 6vw;}
.artwork h3 { line-height: 1.5; font-size: 1em; padding: 0; margin-top: .4em; margin-bottom: .7em;} 
    .artwork img { cursor: pointer;
      width: 100%;
      height: auto;
      object-fit: cover;
      margin-right: 0; transition: opacity .4s ease 0s;
    }
.artwork img:hover { opacity: .7;}
    
    .artwork p {
      flex-grow: 1; margin-top: 0;
    }
    
    .schedule {
      background-color: #FFFFFF;
      padding: 2vw;
      margin-top: 2vw;
    }
    
    .overview h2,
    .artist-section h2,
    .schedule h2 {
      text-align: center; margin-bottom: .5em;font-family: 'Noto Serif JP', serif;
    }
    
    /* .overview 内の h2 の文字サイズを2倍にする */
    .overview h2 {
      font-size: 3.6vw;
      /* 現在のフォントサイズ（1.8vw）の2倍 */
    }
      

    /* .artist-section 内の h2 の文字サイズを2倍にする */
    .artist-section h2 {
      font-size: 3.6vw;
      /* 現在のフォントサイズ（1.8vw）の2倍 */
    }
      
    .gray h3, .gray p { text-align: center; color: #FFF; }
    
    /* .artwork-container~h3 の文字サイズを1.5倍にする */
    .gray h3 {font-family: 'Noto Serif JP', serif;
      font-size: 1.7em; line-height: 1.7; margin-bottom: .7em;
      /* 現在のフォントサイズの1.5倍 */
    }
      .list strong { color: #fff;}
      
    .artwork-container + p {
      text-align: center;
    }
      
    .image-text h2 {
      font-size: 9vw;
      /* 現在のフォントサイズ（3vw）の3倍 */
      margin: 0;
      line-height: 1;
    }
      
    .gray { position: relative;
      padding: 5vw 0;
      /* .grayにpaddingを追加 */
      background-color: #51636D; 
      /* .grayに背景色を追加 */
    }
      #modal a { color: #6BC6CC; text-decoration: none; display: block;word-wrap: break-word;}
      #modal a:hover { text-decoration: underline;}
#modal h3 { font-size: 150%; margin-bottom: .7em;}
#modal h4 { font-size: 110%; margin-bottom: .7em;}
#modal p { margin-bottom: 1.5em;}
    
    footer { background-color: rgba(255,255,255,.05);
      background-color: #6BC6CC;
      padding: 2vw;
      text-align: center;
      color: #FFFFFF;
    }
      
    .flex { margin-top: 3em;
      display: flex;
      /* .flexをフレックスコンテナにする */
      align-items: center;
      /* 追加：要素を縦方向に中央揃え */
      justify-content: center;
      /* 追加：要素を水平方向に中央揃え */
    }
    
    .list {
      flex: 1;
      /* 追加：各.listを均等に広げる */
    }
.list+p { margin-top: 1.5em;}
    
    .list strong {
      width: 5em;
    }
    
    .list p {
      display: flex;
      /* 追加：.list内のp要素をフレックスコンテナにする */
      align-items:flex-start;
      /* 追加：strongとテキストを上揃えにする */
    }
    
    figure {
      width: 20%;
      /* 追加：figureの幅を40%に設定 */
    }
    
    figure img {
      width: 100%;
      /* 追加：画像の幅を100%に設定 */
      height: auto;
      /* 追加：画像の高さを自動調整 */
    }
      
      #artist { position: absolute; top:0; left: 50%; height: 300%; width: auto; transform: translateX(-50%); filter: sepia(80%) contrast(200%); opacity: .2; }
      
      #date {background-color: #6BC6CC; width: 50vw; color: #FFF; height: 6vw; line-height: 6vw; text-align: center; font-size: 1.5vw; margin:-3vw auto 0 auto; position: relative; font-weight: 600; z-index: 1;}
      #date span { border-left: 1px solid rgba(255,255,255,.5); padding-left: 2em; margin-left: 2em;}
      
      .image { height: 10vw; overflow: hidden; position: relative;}
      #image { content: ""; display: block; width: 100%; height: 100vh; background-image:url("../img/image.jpg");background-size: cover; position: fixed; top:0%; left: 0; z-index: 0; transform: translateY(0%);}
      
      #release { height: 50px; padding: 0 2vw; line-height: 50px; color: #FFF; position: absolute; top:0; right: 0; cursor: pointer;}
      
      /* モーダルのスタイル */
.modal {
  opacity: 0;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); transition: opacity .5s ease 0s; transform: scale(0);
}

.modal-content { opacity: 0; transition: all .5s ease .2s;
  background-color: #262932;
  color: #fff;
  margin: 0% auto;
  padding: 20px;
  border: 1px solid #6BC6CC;
  max-width: 80%; height: 70%; overflow: auto; position: absolute; top:50%; left: 50%; transform: translate(-50%,-40%) scale(1); transform-origin: 50% 100%;
}

.close {
  color: #fff;
  float: right;
  font-size: 150%; line-height: 1;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #6BC6CC;
}

/* モーダルを表示するクラス */
.modal-show {
  opacity: 1; transform: scale(1);
}
.modal-show .modal-content {
    opacity: 1; transform: translate(-50%,-50%) scale(1);
}
      .gray { overflow: hidden;}
      .gray img { width: 100%; height: 300vh; position: absolute; top:-300vh; left: 0; object-fit: cover;}
      .gray .inner { position: relative;}
      
      @media (min-width: 736px) {
      .overview h2+p {
    font-size: 1.5vw;
}
          .flex figure { margin-right: 3em;}
      }
      
       @media (max-width: 735px) {
           .gray img {  }
           #date { width: 90vw; height: 12vw; line-height: 12vw; font-size: 3.5vw; margin:-6vw auto 0 auto; }
      #date span { padding-left: 1em; margin-left: 1em;}
           
      body {
        font-size: 3.3vw;
      }
           .overview h2, .artist-section h2, .schedule h2 { font-size: 7vw;}
      
      .overview {
        padding: 5vw;
      }
           
           .gray h3,.artist-bio h3 { font-size: 1.4em;}
      
      .overview p {
        text-align: left;
      }
      
      .flex {
        flex-direction: column;
      }
      
      .flex figure {
        width: auto; margin-bottom: 1.5em;
      }
      
      .artist-profile {
        flex-direction: column;
      }

      .artist-profile img {
        width: 100%; margin-right: 0;
      }
           

      .artist-bio {
        margin: -8vw 4vw 2em 4vw; padding: 6vw;
      }

      .artwork {
        flex-basis: calc(50% - 2.5vw);margin: 2.5vw 0;
      }

      .gray {
        padding: 6vw;
      }

      .gray p {
        text-align: left;
      }
           .artwork-container { padding: 0 ; margin-bottom: 3em;justify-content: space-between;}
           .artwork-container.before { padding: 0 5vw 5vw 5vw;justify-content: flex-start;}
           .image-text h2 {
    font-size: 18vw; width: 8em;
}
           
           .before .artwork { flex-basis: calc(33.333% - 3vw); margin: 1.5vw;}
           .before {
    padding-bottom: 6vw; margin-top: 0;
}
           footer { font-size: 2vw;}
    }
      
      .intro .main-image { height: 100vh;}
      .intro .main-image img#parallax-img { opacity: 0; }
      .intro .main-image img#artist { opacity: 0;}
      .intro .main-image .image-text h2 { opacity: 0; transform: translateY(.5em);}
      .intro .main-image .image-text h2 span { opacity: 0; transform: translateY(.5em);}
      .intro .main-image .image-text p { opacity: 0; transform: translateY(.5em);}
      .intro #date { opacity: 0; transform: translateY(100%);}
      
      .main-image img#parallax-img { transition: all 1s ease 0s;}
      .main-image img#artist { transition: opacity 1s ease .4s;}
      .main-image { transition: opacity 1s ease .4s;}
      .main-image .image-text h2 { transition: all 1s ease 1.4s; margin-bottom: .3em;}
      .main-image .image-text h2 span { transition: all 1s ease 1.6s;}
      .main-image .image-text p { transition: all 1s ease 1.8s;}
      #date { transition: all .4s ease 2s;}
      
      
      .play .main-image img#parallax-img { transition:none; }
      .play .main-image img#artist { transition:none;}
      .play .main-image .image-text h2 { transition:none;}
      .play .main-image .image-text h2 span { transition:none;}
      .play .main-image .image-text p { transition:none;}
      
      ::-webkit-scrollbar { background-color:transparent;width:5px;}
::-webkit-scrollbar-thumb { background-color:#6BC6CC;}

html {
scrollbar-color: #6BC6CC transparent;
scrollbar-width: thin;
}

/* ここに他のスタイルがあると想定 */

/* モーダルのスタイル */
.modal-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* 半透明の背景色 */
  justify-content: center;
  align-items: center; z-index: 99; z-index: -1; opacity: 0; transition: all .5s ease 0s;
}
.open .modal-container { z-index: 99; opacity: 1;}
.modal-container:before { content: "✕"; display: block; width: 60px; height: 60px; position: absolute; top:0; right: 0; text-align: center; line-height: 60px; color: #FFF; cursor: pointer;}

.modal-image {
  max-width: 80%; /* 画像の最大幅 */
  max-height: 80%; /* 画像の最大高さ */
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.8); /* 画像の影 */
}

/* ここに他のスタイルがあると想定 */

.open body { width: 100%; position: fixed; left: 0;}