@charset "UTF-8";
/* 
  css設定 @charsetが消されるsass仕様へのハック用コメントです。削除しないでください。新規作成時も必須！
 */
/*=======================================================
 animations
=======================================================*/
@keyframes fade-in {
  100% {
    transform: translate(0);
    opacity: 1;
  }
}

@keyframes fade-only {
  100% {
    opacity: 1;
  }
}

@keyframes right100 {
  100% {
    right: 100%;
  }
}

@keyframes left100 {
  100% {
    left: 100%;
  }
}

#zeh main {
  z-index: 1;
}

#zeh .main-visual {
  position: relative;
  margin-bottom: 160rem;
  height: 51.25vw;
}

#zeh .main-visual h2 {
  position: absolute;
  bottom: 40rem;
  left: 112rem;
  z-index: 1;
  transform: translateY(50rem);
  opacity: 0;
  animation: fade-in 1s ease .5s forwards;
}

#zeh .main-visual h2 img {
  width: auto;
  height: 68rem;
}

#zeh .main-visual .catch {
  position: absolute;
  top: 50%;
  left: 297rem;
  line-height: 32rem;
  font-size: 24rem;
  color: #fff;
  opacity: 0;
  z-index: 1;
  transform: translateY(-50%);
  animation: fade-only 1s ease .5s forwards;
}

#zeh .main-visual .image {
  position: relative;
}

#zeh .main-visual .image:before, #zeh .main-visual .image:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  background: #fff;
  z-index: 2;
}

#zeh .main-visual .image:before {
  right: 30%;
  left: 0;
  animation: right100 1s ease .5s forwards;
}

#zeh .main-visual .image:after {
  right: 0;
  left: 30%;
  animation: left100 1s ease .5s forwards;
}

#zeh .main-visual .image img {
  opacity: 0;
  animation: fade-only 1s ease .5s forwards;
}

#zeh .main-visual .image .caption {
  opacity: 0;
  animation: fade-only 1s ease 1s forwards;
}

#zeh section.intro {
  padding-bottom: 80rem;
}

#zeh section.intro hgroup {
  padding-bottom: 120rem;
  text-align: center;
}

#zeh section.intro hgroup h3 {
  margin: auto;
  padding-bottom: 60rem;
  width: 252rem;
}

#zeh section.intro hgroup .catch {
  line-height: 1.4;
  font-size: 20rem;
}

#zeh section.intro hgroup .lead {
  line-height: 2;
  font-size: 15rem;
}

#zeh section.intro > .image {
  margin: auto;
  padding-bottom: 40rem;
  width: 611rem;
}

#zeh section.intro > .image figcaption {
  display: block;
  margin-top: 40rem;
  padding: 10rem 0 16rem;
  text-align: center;
  font-size: 20rem;
  color: #fff;
  background: #BD9E67;
}

#zeh section.intro > .image + .text {
  padding-bottom: 80rem;
  text-align: center;
  line-height: 2;
  font-size: 15rem;
}

#zeh section.intro section.bels {
  text-align: center;
}

#zeh section.intro section.bels h4 {
  padding-bottom: 30rem;
  font-size: 24rem;
  font-weight: normal;
}

#zeh section.intro section.bels h4 .small {
  display: block;
  padding-bottom: 15rem;
  font-size: 15rem;
}

#zeh section.intro section.bels .lead {
  padding-bottom: 80rem;
  line-height: 2;
  font-size: 15rem;
}

#zeh section.intro section.bels .label {
  margin: auto;
  width: 321rem;
}

#zeh section.intro section.bels .caps {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.5;
}

#zeh section.merits .wrap {
  max-width: 1040px;
}

#zeh section.merits > header {
  display: flex;
  flex-direction: column;
}

#zeh section.merits > header h3 {
  padding-bottom: 80rem;
  text-align: center;
  font-size: 20rem;
  font-weight: normal;
  color: #8DA688;
}

#zeh section.merits > header .image {
  order: -1;
  margin-bottom: 85rem;
}

#zeh section.merits > section {
  position: relative;
  padding-top: 120rem;
}

#zeh section.merits > section:before {
  content: '';
  display: block;
  position: absolute;
  top: -48rem;
  left: 50%;
  height: 96rem;
  width: 1px;
  background: #8DA688;
}

#zeh section.merits > section:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: #C5D8C2;
  opacity: .7;
  z-index: -1;
}

#zeh section.merits > section > hgroup {
  position: relative;
  padding-bottom: 80rem;
  text-align: center;
  color: #637A5F;
}

#zeh section.merits > section > hgroup h4 {
  padding-bottom: 30rem;
  font-weight: normal;
  font-size: 30rem;
}

#zeh section.merits > section > hgroup h4 .number {
  display: block;
  padding-bottom: 15rem;
  font-size: 36rem;
}

#zeh section.merits > section > hgroup .lead {
  font-size: 15rem;
}

#zeh section.merits > section > section > hgroup {
  padding-bottom: 40rem;
  text-align: center;
}

#zeh section.merits > section > section > hgroup .lead {
  font-size: 15rem;
}

#zeh section.merits > section > section h5 {
  padding-bottom: 30rem;
  text-align: center;
  font-weight: normal;
  line-height: 1.5;
  font-size: 20rem;
}

#zeh section.merits > section > section h5 .number {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 30rem;
  width: 124rem;
  height: 54rem;
  border-radius: 27rem;
  line-height: 1;
  font-size: 14rem;
  color: #fff;
  background: #8DA688;
}

#zeh section.merits > section > section > h5 {
  padding-bottom: 40rem;
}

#zeh section.merits section.merit01 {
  padding-bottom: 130rem;
}

#zeh section.merits section.merit01 section.point01 .image-area {
  margin-bottom: 80rem;
  padding: 60rem 80rem;
  background: #fff;
}

#zeh section.merits section.merit01 section.point01 .image-area ul {
  display: flex;
  justify-content: space-between;
  padding-bottom: 12rem;
}

#zeh section.merits section.merit01 section.point01 .image-area ul li:first-child {
  flex: 0 0 416rem;
}

#zeh section.merits section.merit01 section.point01 .image-area ul li:last-child {
  flex: 0 0 403rem;
}

#zeh section.merits section.merit01 section.point01 .image-area .text {
  text-align: center;
  line-height: 1.5;
  font-size: 11px;
}

#zeh section.merits section.merit01 section.point02 .detail-area {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 60rem 80rem;
  background: #fff;
}

#zeh section.merits section.merit01 section.point02 .detail-area figure {
  flex: 0 0 416rem;
}

#zeh section.merits section.merit01 section.point02 .detail-area dl {
  flex: 0 0 410rem;
}

#zeh section.merits section.merit01 section.point02 .detail-area dt {
  padding-bottom: 30rem;
  line-height: 1.5;
  font-size: 20rem;
}

#zeh section.merits section.merit01 section.point02 .detail-area dd {
  line-height: 2;
  font-size: 15rem;
  letter-spacing: 0;
}

#zeh section.merits section.merit01 section.point02 .detail-area dd .source {
  display: block;
  padding-top: 10rem;
  font-size: 11px;
  line-height: 1.5;
}

#zeh section.merits section.merit02 {
  padding-bottom: 120rem;
}

#zeh section.merits section.merit02 section.point01 .detail-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40rem 73rem;
  background: #fff;
}

#zeh section.merits section.merit02 section.point01 .detail-area dt {
  padding-bottom: 30rem;
  line-height: 1.5;
  font-size: 20rem;
  color: #637A5F;
}

#zeh section.merits section.merit02 section.point01 .detail-area dd {
  line-height: 2;
  font-size: 15rem;
  letter-spacing: 0;
}

#zeh section.merits section.merit02 section.point01 .detail-area dd .source {
  display: block;
  padding-top: 10px;
  line-height: 1.5;
  font-size: 11px;
}

#zeh section.merits section.merit02 section.point01 .detail-area01 {
  margin-bottom: 40rem;
}

#zeh section.merits section.merit02 section.point01 .detail-area01 dl {
  flex: 0 0 482rem;
}

#zeh section.merits section.merit02 section.point01 .detail-area01 .image {
  flex: 0 0 348rem;
}

#zeh section.merits section.merit02 section.point01 .detail-area02 dl {
  flex: 0 0 666rem;
}

#zeh section.merits section.merit02 section.point01 .detail-area02 .image {
  flex: 0 0 163rem;
}

#zeh section.equipments {
  position: relative;
  padding-bottom: 160rem;
}

#zeh section.equipments:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: #EEF0F0;
  z-index: -1;
}

#zeh section.equipments .wrap {
  max-width: 800px;
}

#zeh section.equipments > header {
  display: flex;
  flex-direction: column;
  padding-bottom: 60rem;
  text-align: center;
}

#zeh section.equipments > header h3 {
  position: relative;
  margin-bottom: 20rem;
  padding-bottom: 15rem;
  text-align: center;
  line-height: 1.5;
  font-size: 20rem;
  font-weight: normal;
}

#zeh section.equipments > header h3:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: calc(50% - 10rem);
  width: 20rem;
  height: 1px;
  background: #1B2838;
}

#zeh section.equipments > header .catch {
  line-height: 1.5;
  font-size: 20rem;
}

#zeh section.equipments > header .lead {
  padding-top: 20rem;
  font-size: 15rem;
}

#zeh section.equipments > header .image {
  order: -1;
  margin-bottom: 85rem;
}

#zeh section.equipments > .image {
  margin-bottom: 60rem;
  padding-bottom: 30rem;
}

#zeh section.equipments > .image .caption01 {
  right: auto;
  left: 0;
}

#zeh section.equipments .points {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40rem 0;
  text-align: center;
  counter-reset: point-number;
}

#zeh section.equipments .points li {
  flex: 0 0 240rem;
  position: relative;
  counter-increment: point-number;
}

#zeh section.equipments .points li:before {
  content: counter(point-number);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 24rem;
  height: 24rem;
  font-size: 11rem;
  color: #fff;
  background: #61ADEC;
  z-index: 1;
}

#zeh section.equipments .points li .text {
  padding-top: 10rem;
  line-height: 1.4;
  font-size: 18rem;
}

#zeh .annotation, #zeh .caption {
  font-family: "Shippori Mincho B1", serif;
}

/*=======================================================
 sp style
=======================================================*/
@media (max-width: 768px) {
  #zeh .main-visual {
    margin-bottom: 80rem;
    height: 100vw;
  }
  #zeh .main-visual h2 {
    bottom: 20rem;
    left: 20rem;
    transform: translateY(30rem);
  }
  #zeh .main-visual h2 img {
    height: 50rem;
  }
  #zeh .main-visual .catch {
    top: 20rem;
    left: 20rem;
    line-height: 1.4;
    font-size: 18rem;
    transform: none;
  }
  #zeh .main-visual .image {
    height: 100vw;
  }
  #zeh .main-visual .image img {
    object-fit: cover;
    object-position: 65% center;
    height: 100%;
  }
  #zeh section .lead,
  #zeh section .text {
    line-height: 1.7 !important;
    text-align: left !important;
    font-size: 14rem !important;
  }
  #zeh section .lead br,
  #zeh section .text br {
    display: none;
  }
  #zeh section.intro {
    padding-bottom: 60rem;
  }
  #zeh section.intro hgroup {
    padding-bottom: 60rem;
  }
  #zeh section.intro hgroup h3 {
    padding-bottom: 30rem;
    width: 200rem;
  }
  #zeh section.intro hgroup .catch {
    font-size: 18rem;
  }
  #zeh section.intro > .image {
    padding-bottom: 20rem;
    width: auto;
  }
  #zeh section.intro > .image figcaption {
    margin-top: 20rem;
    padding: 10rem 0 14rem;
    font-size: 18rem;
  }
  #zeh section.intro > .image + .text {
    padding-bottom: 60rem;
  }
  #zeh section.intro section.bels h4 {
    padding-bottom: 20rem;
    font-size: 20rem;
  }
  #zeh section.intro section.bels h4 .small {
    padding-bottom: 10rem;
    font-size: 13rem;
  }
  #zeh section.intro section.bels .lead {
    padding-bottom: 40rem;
  }
  #zeh section.intro section.bels .label {
    width: 80%;
  }
  #zeh section.intro section.bels .caps {
    text-align: left;
  }
  #zeh section.merits > header h3 {
    padding-bottom: 40rem;
    font-size: 18rem;
  }
  #zeh section.merits > header .image {
    margin-bottom: 40rem;
    height: 60vw;
  }
  #zeh section.merits > header .image img {
    object-fit: cover;
    object-position: 65% center;
    height: 100%;
  }
  #zeh section.merits > section {
    padding-top: 60rem;
  }
  #zeh section.merits > section:before {
    top: -25rem;
    height: 50rem;
  }
  #zeh section.merits > section > hgroup {
    padding-bottom: 40rem;
  }
  #zeh section.merits > section > hgroup h4 {
    padding-bottom: 20rem;
    font-size: 24rem;
  }
  #zeh section.merits > section > hgroup h4 .number {
    padding-bottom: 10rem;
    font-size: 28rem;
  }
  #zeh section.merits > section > section > hgroup {
    padding-bottom: 20rem;
  }
  #zeh section.merits > section > section h5 {
    padding-bottom: 20rem;
    font-size: 18rem;
  }
  #zeh section.merits > section > section h5 .number {
    margin-bottom: 20rem;
    width: 110rem;
    height: 46rem;
    border-radius: 27rem;
    font-size: 13rem;
  }
  #zeh section.merits > section > section > h5 {
    padding-bottom: 30rem;
  }
  #zeh section.merits section.merit01 {
    padding-bottom: 70rem;
  }
  #zeh section.merits section.merit01 section.point01 .image-area {
    margin-bottom: 50rem;
    padding: 30rem;
  }
  #zeh section.merits section.merit01 section.point01 .image-area ul {
    flex-direction: column;
    gap: 20rem 0;
    justify-content: normal;
    padding-bottom: 20rem;
  }
  #zeh section.merits section.merit01 section.point01 .image-area ul li:first-child {
    flex: 0 0 auto;
  }
  #zeh section.merits section.merit01 section.point01 .image-area ul li:last-child {
    flex: 0 0 auto;
  }
  #zeh section.merits section.merit01 section.point01 .image-area .text {
    line-height: 1.3 !important;
    font-size: 10rem !important;
  }
  #zeh section.merits section.merit01 section.point02 .detail-area {
    flex-direction: column;
    justify-content: normal;
    align-items: normal;
    gap: 20rem 0;
    padding: 30rem;
  }
  #zeh section.merits section.merit01 section.point02 .detail-area figure {
    flex: 0 0 auto;
  }
  #zeh section.merits section.merit01 section.point02 .detail-area dl {
    flex: 0 0 auto;
  }
  #zeh section.merits section.merit01 section.point02 .detail-area dt {
    padding-bottom: 20rem;
    line-height: 1.3;
    font-size: 18rem;
  }
  #zeh section.merits section.merit01 section.point02 .detail-area dd {
    line-height: 1.7;
    font-size: 14rem;
  }
  #zeh section.merits section.merit01 section.point02 .detail-area dd .source {
    padding-top: 15rem;
    font-size: 12rem;
  }
  #zeh section.merits section.merit02 {
    padding-bottom: 60rem;
  }
  #zeh section.merits section.merit02 section.point01 .detail-area {
    flex-direction: column;
    justify-content: normal;
    align-items: normal;
    gap: 20rem 0;
    padding: 30rem;
  }
  #zeh section.merits section.merit02 section.point01 .detail-area figure {
    flex: 0 0 auto;
  }
  #zeh section.merits section.merit02 section.point01 .detail-area dl {
    flex: 0 0 auto;
  }
  #zeh section.merits section.merit02 section.point01 .detail-area dt {
    padding-bottom: 20rem;
    line-height: 1.3;
    font-size: 18rem;
  }
  #zeh section.merits section.merit02 section.point01 .detail-area dd {
    line-height: 1.7;
    font-size: 14rem;
  }
  #zeh section.merits section.merit02 section.point01 .detail-area dd .source {
    padding-top: 15rem;
    font-size: 12rem;
  }
  #zeh section.merits section.merit02 section.point01 .detail-area01 {
    margin-bottom: 40rem;
  }
  #zeh section.merits section.merit02 section.point01 .detail-area01 dl {
    flex: 0 0 auto;
  }
  #zeh section.merits section.merit02 section.point01 .detail-area01 .image {
    flex: 0 0 auto;
  }
  #zeh section.merits section.merit02 section.point01 .detail-area02 dl {
    flex: 0 0 auto;
  }
  #zeh section.merits section.merit02 section.point01 .detail-area02 .image {
    flex: 0 0 auto;
    margin: auto;
    width: 48%;
  }
  #zeh section.equipments {
    padding-bottom: 20rem;
  }
  #zeh section.equipments > header {
    padding-bottom: 50rem;
  }
  #zeh section.equipments > header h3 {
    margin-bottom: 30rem;
    padding-bottom: 30rem;
    line-height: 1.4;
    font-size: 18rem;
  }
  #zeh section.equipments > header .catch {
    font-size: 18rem;
  }
  #zeh section.equipments > header .lead {
    padding-top: 30rem;
  }
  #zeh section.equipments > header .image {
    margin-bottom: 40rem;
    height: 60vw;
  }
  #zeh section.equipments > header .image img {
    object-fit: cover;
    object-position: center center;
    height: 100%;
  }
  #zeh section.equipments > .image {
    margin-bottom: 0;
    padding-bottom: 25rem;
  }
  #zeh section.equipments > .image .swipe-img img {
    width: 800px !important;
  }
  #zeh section.equipments .swipe {
    margin-bottom: 50px;
  }
  #zeh section.equipments .points {
    gap: 0;
    justify-content: space-between;
    display: flex;
    width: 240vw;
    flex-wrap: nowrap;
  }
  #zeh section.equipments .points li {
    flex: none;
    width: 60vw;
    margin-right: 2vw;
  }
  #zeh section.equipments .points li:before {
    width: 18rem;
    height: 18rem;
    font-size: 10rem;
  }
  #zeh section.equipments .points li .text {
    line-height: 1 !important;
    text-align: center !important;
    font-size: 13rem !important;
  }
  #zeh .bottom-image {
    height: 50vw;
  }
  #zeh .bottom-image img {
    object-fit: cover;
    object-position: center center;
    height: 100%;
  }
}

/*# sourceMappingURL=zeh.css.map */