@charset "UTF-8";

/* common */
.title-area p:first-child {
  margin-bottom: 20px;
}

/* hero */
#hero {
  height: 624px;
}
#hero .width-wrap {
  height: 100%;
}
#hero .width-wrap .text-area {
  height: 100%;
  background: url("/img/screen/reserve/bg_hero_reserve.jpg") 50% / cover
    no-repeat;
  border-radius: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px;
  text-align: center;
}

/* info */
#info .width-wrap {
  display: flex;
  flex-direction: column;
  gap: 52px;
}
#info .width-wrap .bottom-area {
  display: grid;
  grid-template-columns: 1fr 1.0333fr;
  gap: 100px;
  align-items: start;
}
#info .width-wrap .bottom-area .img {
  aspect-ratio: 30 / 19;
  background: url("/img/screen/reserve/img_info.jpg") 50% / cover no-repeat;
}
#info .width-wrap .bottom-area .right-zone {
  display: flex;
  flex-direction: column;
  gap: 52px;
}
#info .width-wrap .bottom-area .right-zone .top-plc {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#info .width-wrap .bottom-area .right-zone .top-plc .text-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#info .width-wrap .bottom-area .right-zone .bottom-plc {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
#info .width-wrap .bottom-area .right-zone .bottom-plc .info-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 28px;
}
#info .width-wrap .bottom-area .right-zone .bottom-plc .info-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* comon */
#info .width-wrap .bottom-area .right-zone .plc .icon {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* contact */
#contact .width-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 72px;
}
#contact .width-wrap .right-area {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
#contact .width-wrap .right-area a {
  height: 195px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
#contact .width-wrap .right-area a > img {
  width: 58px;
}
#contact .width-wrap .right-area a:nth-child(2) > img {
  filter: drop-shadow(0 0 14.8px rgba(0, 0, 0, 0.07));
  border-radius: 12px;
}

/* responsive */
@media all and (max-width: 1385px) {
  #contact .width-wrap {
    grid-template-columns: 1fr;
    gap: 52px;
  }
}
@media all and (max-width: 1024px) {
  .title-area p:first-child {
    margin-bottom: 12px;
  }
  #info .width-wrap,
  #contact .width-wrap {
    gap: 44px;
  }

  #hero {
    height: 484px;
  }
  #hero .width-wrap .text-area {
    border-radius: 25px;
  }

  #info .width-wrap .bottom-area {
    grid-template-columns: 1fr 1.28fr;
    gap: 32px;
  }
  #info .width-wrap .bottom-area .img {
    aspect-ratio: 400 / 253;
  }
  #info .width-wrap .bottom-area .right-zone {
    gap: 44px;
  }
  #info .width-wrap .bottom-area .right-zone .plc .icon,
  #info .width-wrap .bottom-area .right-zone .top-plc {
    gap: 12px;
  }
  #info .width-wrap .bottom-area .right-zone .top-plc .text-list {
    gap: 8px;
  }
  #info .width-wrap .bottom-area .right-zone .bottom-plc,
  #contact .width-wrap .right-area {
    gap: 20px;
  }
  #info .width-wrap .bottom-area .right-zone .bottom-plc .info-list {
    gap: 8px 28px;
  }
}
@media all and (max-width: 820px) {
  #info .width-wrap .bottom-area {
    grid-template-columns: 1fr;
  }
  #info .width-wrap .bottom-area .img {
    aspect-ratio: 49 / 30;
    width: 100%;
    margin: 0 auto;
  }

  #contact .width-wrap .right-area {
    grid-template-columns: repeat(2, 1fr);
  }
  #contact .width-wrap .right-area a:first-child {
    grid-column: 1 / 3;
  }
}
@media all and (max-width: 500px) {
  .title-area p:first-child {
    margin-bottom: 16px;
  }
  #info .width-wrap,
  #contact .width-wrap {
    gap: 36px;
  }
  #info .width-wrap .bottom-area .right-zone .plc .icon,
  #info .width-wrap .bottom-area .right-zone .top-plc,
  #info .width-wrap .bottom-area .right-zone .bottom-plc,
  #contact .width-wrap .right-area {
    gap: 16px;
  }

  #hero {
    height: 600px;
  }
  #hero .width-wrap {
    margin: 0;
    width: 100%;
  }
  #hero .width-wrap .text-area {
    border-radius: 0;
    gap: 24px;
  }
  #hero .width-wrap .text-area p {
    width: 91.47%;
  }

  #info .width-wrap .bottom-area,
  #info .width-wrap .bottom-area .right-zone {
    gap: 36px;
  }
  #info .width-wrap .bottom-area .right-zone .top-plc .text-list {
    gap: 4px;
  }
  #info .width-wrap .bottom-area .right-zone .bottom-plc .info-list {
    gap: 4px 28px;
  }

  #contact .width-wrap .right-area a {
    height: 147px;
    padding: 28px 36px;
  }
}