main{
  padding: 0;
  margin: 0;
  position: relative;
}

header{
  position: relative;
  z-index: 2001;
}

/* -------------------------------------------------- */
.windows{
  border: var(--window-border);
  background-color: var(--color-white);
  
  box-shadow: var(--window-shadow);
}
.window-ui{
  width: 100%;
  height: 18px;

  padding: 0 0.2rem;

  display: flex;
  align-items: center;
  justify-content: end;

  border-bottom: var(--window-border);
}
.window__title-box{
  width: 100%;
  height: auto;

  padding: 0.7rem 1rem;

  border-bottom: var(--window-border);
}
  .window__title-box h4{
    font-size: var(--subtitle-font-size);
  }
.window__inner__wrapper{
  padding: 1.5rem;
}
.desc{
  line-height: 1.7rem;
}



/* -------------------------------------------------- */

/* music__menu */
.window__music__link{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: 1000;
  width: 306px;
  height: 372px;

  display: none;
}
.window__music__link.active{
  display: block;
}
  .window__music__link .music__link__content{
    height: calc(372px - 18px);
    width: 100%;
    padding: 2rem;

  }
    .window__music__link .music__link__content ul{
      width: 100%;
      height: 100%;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2rem;
    }
      .window__music__link .music__link__content ul li{
        width: 220px;
        height: 50px;
        border: var(--window-border);
      }
        .window__music__link .music__link__content ul li a{
          width: 220px;
          height: 50px;

          display: flex;
          justify-content: center;
          align-items: center;
        }



/* -------------------------------------------------- */




.hero{
  position: relative;
  height: calc(100vh - 88px);
  width: 100vw;

  z-index: 100;
}
  .hero__inner{
    width: 100%;
    height: calc(100vh - 88px);

    padding:2vh 2vw;
  }
    .window__hero{
      width: 100%;
      height: 100%;
    }
      .window__hero .window-ui{
        background-color: var(--color-red);
        height: 23px;
      }
      .window__hero__content{
        width: 100%;
        height: calc(100% - 23px);
      }
        .window__hero__content .hero__image{
          width: 100%;
          height: 100%;
        }
          .window__hero__content .hero__image img{
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

.desctop{
  height: auto;
  width: 100vw;

  position: relative;
  z-index: 200;
}
  .desctop__group1{
    height: auto;
    width: 100%;

    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
    .window__block1{
      width: 37%;
      height: 100%;

      margin-top: -30vh;

      display: flex;
      flex-direction: column;
      align-items: center;
    }
  .desctop__group2{
    height: auto;
    width: 100%;

    display: flex;
    justify-content: space-evenly;
    align-items: center;

    margin-top: 2rem;
  }
    .window__block2{
      width: 37%;
      height: 100%;

      display: flex;
      flex-direction: column;
      align-items: center;
    }
  .desctop__group3{
    height: auto;
    width: 100%;

    margin-top: -4vh;
    margin-bottom: 10rem;

    display: flex;
    flex-direction: column;
    align-items: center;
  }
    .bolero-mononkvl__wrapper{
      width: 100%;
      padding: 0 3rem;
      display: flex;
      justify-content: left;
    }
    .schedule__wrapper{
      width: 100%;
      padding: 0 5rem;
      margin-top: -0.5rem;
      display: flex;
      justify-content: flex-end;
    }







/* -------------------------------------------------- */

/* window person */
.window__inner__wrapper.person{
  width: 100%;
  height: auto;
  display: flex;
  align-items: top;
  gap: 2rem;
}
  .window__inner__wrapper.person .picture{
    min-width: 250px;
    max-width: 350px;
    width: 100%;
    height: 100%;
  }
    .window__inner__wrapper.person .picture .picture__box{
      width: 100%;
      aspect-ratio: 4 / 5;
      height: auto;
    }
      .window__inner__wrapper.person .picture .picture__box img{
        width: 100%;
        aspect-ratio: 4 / 5;
        height: auto;

        object-fit: cover;
      }

/* window intro */
.window__inner__wrapper.intro .desc p{
  line-height: 2.3rem;
}

/* window image */
.window__inner__wrapper.image{
  height: calc(100% - 18px);
  overflow: hidden;
  padding: 0;
}
  .window__inner__wrapper.image img{
    width: 100%;
    height: auto;
    object-fit: cover;
  }

/* window schedule */
.window__inner__wrapper.schedule{
  margin: 2.5rem 0;
  padding: 0;
}
  .window__inner__wrapper.schedule ul{
    width: 100%;
    display: flex;
    flex-direction: column;
  }
    .window__inner__wrapper.schedule ul li{
      width: 100%;
      padding: 1rem 1.5rem;
      border-bottom: var(--window-border);
    }
      .window__inner__wrapper.schedule ul li a{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
        .window__inner__wrapper.schedule .date{
          display: flex;
          align-items: center;
          gap: 1rem;
          margin-right: 4rem;
        }
        .window__inner__wrapper.schedule .left{
          display: flex;
          align-items: center;
        }
          .window__inner__wrapper.schedule .type{
            width: 35%;
          }
          .window__inner__wrapper.schedule .title{
            display: flex;
            justify-content: end;
            align-items: center;
            gap: 0.5rem;
            line-height: 1.2rem;
            text-align: right;
          }
          .window__inner__wrapper.schedule .title.small.pc{
            font-size: 0.9rem;
            display: flex;
          }
          .window__inner__wrapper.schedule .title.small.sp{
            font-size: 0.9rem;
            display: none;
          }
        





/* -------------------------------------------------- */

/* window each */
.window__sara-yoshida{
  width: 45%;
  height: fit-content;
}
.window__mononkvl{
  max-width: 70%;
  min-width: 300px;
  width: 100%;

  margin-right: -20%;

  position: relative;
  z-index: 300;
}
.window__image__1{
  max-width: 76%;
  min-width: 300px;
  width: 100%;

  margin-left: -30%;

  position: relative;
  z-index: 400;
}
  .window__image__1 .window__image{
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }
.window__image__2{
  max-width: 76%;
  min-width: 250px;
  width: 100%;

  margin-left: -23%;
}
.window__image__3{
  max-width: 70%;
  min-width: 235px;
  width: 100%;

  margin-right: -30%;
  margin-top: -20%;
}
.window__ryuta-tsunoda{
  width: 45%;
  height: fit-content;
}
.window__image__4{
  display: none;
}
.window__bolero-mononkvl{
  width: 76%;
  height: fit-content;
}
  .window__bolero-mononkvl .desc{
    display: flex;
    flex-direction: column;
    align-items: end;
  }
    .window__bolero-mononkvl .desc .img-box{
      height: var(--accent-font-size);
      width: fit-content;
    }
      .window__bolero-mononkvl .desc img{
        height: var(--accent-font-size);
        width: fit-content;
      }
.window__schedule{
  width: 55%;
  height: fit-content;
}
.window__image{
  display: flex;
  justify-content: center;
  overflow: hidden;
}
  .window__image img{
    width: auto;
    height: 100%
  }








@media screen and (max-width: 1100px){

/* -------------------------------------------------- */

/* window person */
.window__inner__wrapper.person{
  flex-direction: column;
  align-items: center;
}
  .window__inner__wrapper.person .picture{
    min-width: 200px;
    max-width: 350px;
    width: 100%;
    height: 100%;
  }
    .window__inner__wrapper.person .picture .picture__box{
      width: 100%;
      aspect-ratio: 4 / 5;
      height: auto;
    }
      .window__inner__wrapper.person .picture .picture__box img{
        width: 100%;
        aspect-ratio: 4 / 5;
        height: auto;

        object-fit: cover;
      }

}








@media screen and (max-width: 765px){

.hero{
  height: calc(70vh - 88px);
  width: 100vw;
  padding-right: 15%;
}
  .hero__inner{
    height: calc(70vh - 88px);
  }

.desctop{

}
  .desctop__group1{
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }
    .window__block1{
      width: 100%;
      height: auto;

      margin-top: -17vh;

      display: flex;
      flex-direction: column;
      align-items: center;
    }
  .desctop__group2{
    height: auto;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
  }
    .window__block2{
      width: 100%;
      height: 100%;

      display: flex;
      flex-direction: column;
      align-items: center;

      margin-top: -4rem;
    }
  .desctop__group3{
    margin-top: -1rem;

    gap: 4rem;
  }
    .bolero-mononkvl__wrapper{
      width: 100%;
      padding: 0;
      display: flex;
      justify-content: center;
    }
      .bolero-mononkvl__wrapper .img-box{
        width: fit-content;
      }
        .bolero-mononkvl__wrapper .img-box img{
          height: 100%;
          width: auto;
        }
    .schedule__wrapper{
      width: 100%;
      padding: 0;
      display: flex;
      justify-content: center;

      margin-top: 0;
    }


/* -------------------------------------------------- */

/* window person */
.window__inner__wrapper.person{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
  .window__inner__wrapper.person .picture{
    min-width: 100px;
    max-width: 350px;
    width: 100%;
    height: 100%;
  }

/* window intro */
.window__inner__wrapper.intro .desc p{
  line-height: 1.7rem;
}

/* window schedule */
    .window__inner__wrapper.schedule ul li{
      padding: 1rem 0.7rem;
    }
          .window__inner__wrapper.schedule .date{
            gap: 0.5rem;
            margin-right: 1rem;
          }
          .window__inner__wrapper.schedule .type{
            width: fit-content;
          }
        .window__inner__wrapper.schedule .title{
          min-width: 30%;
          max-width: 60%;
          width: 100%;
        }


/* -------------------------------------------------- */

/* window each */
.window__mononkvl{
  max-width: 75%;
  min-width: 200px;
  width: 100%;

  margin-right: -17%;
}
.window__image__1{
  max-width: 68%;
  min-width: 250px;
  width: 100%;

  margin: -1rem -30% 0 0;
}
  .window__image{
    width: 100%;
    height: 100%;
  }
.window__sara-yoshida{
  width: 78%;
  margin-left: -13%;
  margin-top: -2rem;
}
.window__image__2{
  max-width: 60%;
  min-width: 150px;
  width: 100%;
  aspect-ratio: 2 / 3;

  margin-left: 0;
  margin-right: -30%;
}
.window__image__3{
  max-width: 54%;
  min-width: 135px;
  width: 100%;

  aspect-ratio: 5 / 5;

  margin-right: 0;
  margin-left: -40%;
  margin-top: -50%;
}
.window__ryuta-tsunoda{
  width: 78%;
  margin-right: -13%;
  margin-top: -3rem;
}
.window__image__4{
  display: block;
  width: 53%;
  aspect-ratio: 1 / 1;
  height: auto;

  margin-top: -1.5rem;
  margin-left: -40%;
}
.window__bolero-mononkvl{
  width: 85%;
  height: fit-content;
}
.window__schedule{
  width: 85%;
  height: fit-content;
}


.window__inner__wrapper.schedule .title.small.pc{
  display: none;
}
.window__inner__wrapper.schedule .title.small.sp{
  display: flex;
}
}