@charset "utf-8";
.container{
    position:relative;
}
.special main > br,
.special .vr-select{
    display:none;
}
.vr__sholder{height: 0;position: absolute;z-index: 1;width: 100%;text-align: right;margin: 1.5em 0;}
.vr__sholder a{color:#fff;display: inline-block;font-size: 0.85em;letter-spacing: 0.04em;transition: opacity .2s;}
.vr__sholder a:hover{opacity:.7}
.vr__title{
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    height: 38vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(/assets/img/artists-detail/artistsdetail_mv.jpg) no-repeat;
    background-size: cover !important;
    background-position: 50% 50% !important;
    font-weight: 500;
}
.vr__title h2{
    font-family:var(--font-en-02);
    color: #fff;
    font-size: 1em;
    line-height: 1.3;
    letter-spacing: 0.01em;
    max-width: 1200px;
    width: 90%;
}
.vr__title h2 small{
    display: block;
    font-size: 0.4em;
    margin-top: 0em;
}
.vr__title h2 em{
    display: block;
    font-size: 0.5em;
}
.vr__subtext{
    margin: 2em 0 3em;
    line-height: 1.75;
}
.vr-select {
    display: flex;
    justify-content: flex-end;
    padding: 2.05em 0 2.6em;
}
.vr-select select {
    font-size: 0.9em;
    border: solid 1px #b4b4b4;
    padding: 0.37em 0.4em;
    appearance: none;
    color: inherit;
    border-radius: 0;
    background: #fff;
}
.vr-select select[name="year"] {
    min-width: 12.3em;
    font-family: var(--font-en-02);
    font-weight: var(--w400);
}
.vr-select select[name="artists"] {
    min-width: 15.2em;
    font-family: var(--font-en-02);
    font-weight: var(--w400);
}
.vr-select form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em 2.2em;
}
.vr-select fieldset:nth-child(1){
    display:none;
}
.vr-select__all {
    appearance: none;
    background: none;
    border: none;
    font-size: 1em;
    margin: 0 0 0 1.1em;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font-family: var(--font-en-02);
    font-weight: var(--w400);
}

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

   .vr__sholder {
      margin: 3.2em 0;
      width: 91%;
    }
    .vr__sholder a {
      font-size: 1.35em;
    }
    .vr__title {
      height: 38vw;
      background-position: 50% 73%;
      margin-top: 1.7em;
    }
    .vr__title h2 {
      font-size: 1em;
      letter-spacing: 0.02em;
      width: 87.5%;
    }
    .vr__title h2 small {
      font-size: 0.4em;
      margin-top: 0em;
    }
    .vr__title h2 em {
      font-size: 0.5em;
    }
    .vr__subtext {
      margin: 2em 0 3em;
      font-size: 1.7em;
      line-height: 1.75;
    }

    .vr-select {
        font-size: 1.6rem;
        padding: 2.25em 0 2.9em;
        display: block;
    }
    .vr-select select {
        flex-grow: 1;
    .exhibitions-select
        select {
        font-size: 2.4rem;
        flex-grow: 1;
    };
        font-size: 2.1rem;
    }
    .vr-select select[name="year"] {
        min-width: 10.4em;
        min-width: 0;
    }
    .vr-select select[name="artists"] {
        min-width: 14.3em;
        min-width: 0;
        max-width: 13.75em;
    }
    .vr-select form {
        display: grid;
        grid-template-columns: 42% 1fr;
        width: 100%;
    }
    .vr-select fieldset {
        display: flex;
    }
    .vr-select__all {
        margin: 0 0 0 0.8em;
    }
}
/*==================================================
ギャラリー
===================================*/
.gallery{columns: 4;padding: 0;gap: 0 10px;-webkit-column-break-after: auto;}

.gallery li {
    margin-bottom: 10px;
}
.gallery li {
    margin-bottom: 10px;
}
.gallery li.large{
    width: calc(200% + 10px);
    display: block;
}

.gallery img{
  width:100%;
  height:auto;
  vertical-align: bottom;/*画像の下にできる余白を削除*/}

@media only screen and (max-width: 900px) {
  .gallery{
  columns:3;
  } 
}

@media only screen and (max-width: 768px) {
  .gallery{
  columns: 2;
  } 
}


ul{
  margin:0;
  padding: 0;
  /* list-style: none; */
}

a{
  color: #333;
}

a:hover,
a:active{
  text-decoration: none;
}

h1{
  text-align: center;
  font-size:6vw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin:30px 0;
}


.flipLeft{animation-name: flipLeft;animation-duration:1.5s;animation-fill-mode:forwards;perspective-origin: left center;/* opacity: 0; */}

@keyframes flipLeft{
  from {
   opacity: 1;
  }

  to {
  opacity: 1;
  }
}