@charset "UTF-8";

/* about
-------------------------------------------------- */
.about {
  padding: 2.666667vw 0 16vw;
  background: transparent url('../images/about/aboutBg.png') 100% 100% no-repeat;
  background-size: auto 24.266667vw;
}

.about__title {
  height: 11.733333vw;
  max-height: 60px;
  margin-bottom: 5.333333vw;
  background: transparent url('../images/about/about_title.png') 50% 50% no-repeat;
  background-size: auto 100%;
  white-space: nowrap;
  text-indent: 101%;
  overflow: hidden;
}

.aboutCaption__image {
  height: 87.733333vw;
  margin-bottom: 5.333333vw;
  background: transparent url('../images/about/about_sp.png') 50% 50% no-repeat;
  background-size: 100%;
  white-space: nowrap;
  text-indent: 101%;
  overflow: hidden;
}

.aboutCaption__text {
  height: 36.8vw;
  background: transparent url('../images/about/aboutCaption_sp.png') 50% 50% no-repeat;
  background-size: auto 100%;
  white-space: nowrap;
  text-indent: 101%;
  overflow: hidden;
}

@media screen and (min-width: 768px) {
  .about {
    padding: 2.666667vw 0 4.6875vw;
    background-position: 86% 100%;
    background-size: auto 10vw;
  }

  .about__title {
    height: 4.6875vw;
    margin-bottom: 2.666667vw;
  }

  .aboutCaption__image {
    height: 37.65625vw;
    margin-bottom: 2.666667vw;
    background-image: url('../images/about/about_pc.png');
  }

  .aboutCaption__text {
    height: 6.25vw;
    max-height: 120px;
    background-image: url('../images/about/aboutCaption_pc.png');
  }
}

/* mainContents
-------------------------------------------------- */
.mainContents {
  padding-bottom: 2.666667vw;
}

.greeting {
  max-width: 750px;
  margin: 0 auto;
}

.greeting__title {
  height: 7.066667vw;
  max-height: 48px;
  margin-bottom: 2.666667vw;
  background: transparent url('../images/about/greeting_title.png') 6.666667vw 50% no-repeat;
  background-size: auto 100%;
  white-space: nowrap;
  text-indent: 101%;
  overflow: hidden;
}

.greetingList {
  display: flex;
  justify-content: center;
  padding: 72% 0 9.6%;
  background: transparent url('../images/about/greeting_message.jpg') 50% 50% no-repeat;
  background-size: 100%;
}

.greetingList__item {
  max-width: 34.266667%;
}

.greetingList__item + .greetingList__item {
  margin-left: 2.666667%;
}

@media screen and (min-width: 768px) {
  .greeting {
    width: 50.78125vw;
  }

  .greeting__title {
    height: 0;
    margin-left: 6.666667%;
    padding-top: 6.4%;
    background-position: 0 50%;
  }
}