@charset "utf-8";

/* ----------------------------------
base
---------------------------------- */

body {
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  scrollbar-width: none;
  /* Firefox */
}

body::-webkit-scrollbar {
  display: none;
  /* Safari and Chrome */
}

img{
  max-width: 100%;
}

.l-inner{
  max-width: 1200px;
  margin: 0 auto;
}

@media only screen and (max-width: 1099.9px){
  .l-inner{
    padding: 0 2.5vw;
  }
}

.main{
  background: #F8F7F6;
}

.main_bg{
  font-family: "Noto Sans JP", sans-serif;
  background: #F8F7F6 url(/image/artists/artist_bg.png) repeat-y right;
  max-width: 1440px;
  margin: 0 auto;
  padding-top: 160px;
  background-position: 0px 260px;
  background-size: 100%;
  overflow: hidden;
}

@media only screen and (max-width: 1099.9px){
  .main_bg{
    background: #F8F7F6 url(/image/artists/bg3.png) repeat-y right;
    max-width: 1100px;
    margin: 0 auto;
    background-position: 0 0;
    background-size: 100%;
    padding-top: 26.5vw;
  }
}

@media only screen and (max-width: 1099.9px){
  .sec_ttl{
    height: 8.8vw;
    width: auto;
  }

  .sec_ttl img{
    height: 100%;
    width: auto;
  }
}


/* ----------------------------------
main
---------------------------------- */
.page_ttl{
  height: 130px;
}

.page_ttl img{
  width: auto;
  height: 100%;
}

@media only screen and (max-width: 1099.9px){
  .page_ttl{
    width: auto;
    height: 21vw;
  }
}

.lead_txt{
  font-size: 18px;
  margin: 40px 0 80px;
  padding-left: 25px;
}

@media only screen and (max-width: 1099.9px){
  .lead_txt{
    font-size: 3.73vw;
    margin: 2vw 0 14vw;
    padding-left: 4vw;
  }
}

.movies{
  padding: 50px 0 140px;
}

@media only screen and (max-width: 1099.9px){
  .movies{
    padding: 7.467vw 0 20vw;
  }
}

.flex_area{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 70px;
  padding: 0 20px;
}

@media only screen and (max-width: 1099.9px){
  .flex_area{
    gap: 12vw;
    padding: 0 3.5vw;
  }
}

.flex_list{
  width: calc((100% - 70px) / 2);
  aspect-ratio: 16 / 9;
}

@media only screen and (max-width: 1099.9px){
  .flex_list{
    width: 100%;
  }
}

.flex_list iframe{
  width: 100%;
  height: 100%;
  box-shadow: 8px 8px 8px rgba(0,0,0,0.2);
}