@charset "UTF-8";

/*
#index-first *,
#index-second *,
#index-third *,
#index-fourth * {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(10px);
    transition: 2.8s cubic-bezier(.4,.1,.1,1);
    will-change: transform, opacity, filter;
}
#index-first.visible *,
#index-second.visible *,
#index-third.visible *,
#index-fourth.visible * {
    filter: blur(0);
    transform: translateY(0);
    opacity: 1;
}
*/

.js-scroll {
    opacity: 0;
    transform: translateY(10px);
    transition: 2.5s cubic-bezier(.4,.1,.1,1);
}
.js-scroll.active {
    opacity: 1;
    transform: translateY(0);
}



header {
    position: absolute;
    z-index: 99;
    width: 100%;
    padding: 4rem 6.5vw;
    padding-right: 5.5vw;
    display: flex;
    justify-content: space-between;
}
header svg path {fill: var(--backgroundColor);}
header .menu {
    display: flex;
    flex-direction: column;
    padding-top: 1.5rem;
}
header .menu a {
    writing-mode: vertical-rl;
    font-size: 1.6rem;
    color: var(--backgroundColor);
    margin-bottom: 3.5rem;
}

footer {
    width: 100%;
    margin-top: 10rem;
    padding: 0 6.5vw 4rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
footer .links {display: flex;flex-direction: column;}

main {
    width: 100%;
    background-attachment: fixed;
    background-size: cover;
    background-color: var(--backgroundColor);
    background-blend-mode: lighten;
    background-image: url("../image/bg.webp");
}

section {padding: 0 6.5vw;}

.section-head {margin-bottom: 3rem;}
.section-head h1 {margin: 1rem 0;}



.ripple {
    background:url("../image/kv.webp") center no-repeat;
    background-size: cover;
    display: block;

    top:0;
    left:0;
    right:0;
    bottom:0;
  }

  #index-top {
    min-height: calc(var(--vh, 1vh) * 100);
    display: flex;
    align-items: flex-end;
    padding-bottom: 6.5rem;
  }

  #index-first, #index-third {
    padding-top: 10rem;
    padding-bottom: 12rem;
  }
  #index-first .wrapper p.h5 {margin-top: 1rem;}

  #index-second {
    padding-top: 10rem;
    padding-bottom: 7.5rem;
    background-image: url("../image/kv.webp");
  }
  #index-second .container {margin-bottom: 5.6rem;}
  #index-second .container h2 {margin-left: -.23rem;}
  #index-second .container p {margin-left: -.05rem;}
  #index-second .container h3 {margin-bottom: 1.2rem;}

  .exhibitions {
    width: calc(100% + 6.5vw);
    aspect-ratio: 3/4;
  }
  .exhibitions .swiper-wrapper, 
  .exhibitions .swiper-slide {width: 100%;}
  .exhibitions img {
    width: calc(100% + 6.5vw);
    height: 100%;
  }

  .swiper-wrapper {transition-timing-function: cubic-bezier(1,0,1,1);}



.exhibitions .swiper-slide {position: relative;}
.exhibitions .swiper-slide img,
.exhibitions .swiper-slide .info {position: absolute;}
.exhibitions .swiper-slide .info {
    left: 6.5vw;
    bottom: 3rem;
    z-index: 99;
}

#index-fourth .exhibitions {margin-left: -6.5vw;}

#index-fifth {margin: 10rem 0 10rem;}

#index-fifth svg {margin-top: 4rem;}

#index-sixth img {
    width: calc(100% + 6.5vw);
    aspect-ratio: 2/1;
}
#index-sixth .section-head {margin-top: 5rem;}
#index-sixth .mail {margin-top: 6rem;}
#index-sixth .mail a {border-bottom: solid 0.5px var(--textColor);}