@charset "UTF-8";


/* ==========================================================================
   Intro
========================================================================== */
#intro {
  padding-top: 60px;
  padding-bottom: 60px;
  margin-top: -60px;
  margin-bottom: -60px;
  text-align: center;
}


/* ==========================================================================
   About
========================================================================== */
#about .clip {
  height: 100%;
}
@media (max-width: 425px) {
  .section__header .en_ttl {
    letter-spacing: .12em;
  }
}

/* ==========================================================================
   Service
========================================================================== */
#photo {
  margin-bottom: 6em;
}
#photo .photos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
#photo > div {
  position: relative;
}
#photo .img1 {
  width: 37%;
  aspect-ratio: 2/3;
  margin-top: 15%;
  z-index: 5;
}
#photo .img2 {
  width: 45%;
  margin-left: auto;
  aspect-ratio: 1/1;
}
#photo .img3 {
  width: 57%;
  aspect-ratio: 3/2;
  margin-top: -13.5%;
  margin-left: 13.5%;
}
#photo .img4 {
  width: 20.5%;
  margin-top: 15%;
  margin-left: auto;
  margin-bottom: -17%;
  aspect-ratio: 1/2;
  z-index: 5;
}
#photo .img5 {
  width: 62%;
  aspect-ratio: 7/5;
}

@media (min-width: 768px) {
  #photo {
    margin-top: 6em;
  }
  #photo .img1 {
    width: 25%;
    margin-top: 11%;
    margin-left: 10%;
  }
  #photo .img2 {
    width: 55%;
    height: 29.5vw;
    aspect-ratio: inherit;
  }
  #photo .img3 {
    width: 38%;
    margin-top: -9%;
    margin-left: 28%;
  }
  #photo .img4 {
    width: 17.5%;
    margin-top: 0;
    margin-right: 10%;
    margin-bottom: -3%;
    aspect-ratio: 5/8;
  }
  #photo .img5 {
    width: 56%;
    height: 29.5vw;
    aspect-ratio: inherit;
  }
}
@media (min-width: 1200px) {
  #photo {
    margin: 10em 0;
  }
}