@charset "UTF-8";

/* =========================================================
  vacanthouse
========================================================= */

/* site layout
----------------------------------------------- */
#wrapper,
#main {
  padding-bottom: 0 !important;
}

#wrapper {
  border-bottom: 1px solid var(--mono-color-6);
  background: var(--mono-color-9);
}

#content {
  max-width: 1000px;
}

@media only screen and (max-width: 534px) {
  #wrapper {
    padding-top: 0;
  }
}

/* breadCrumbs
----------------------------------------------- */
#breadCrumbs {
  border-bottom: none;
  background: var(--mono-color-9);
}

/* vhVisual
----------------------------------------------- */
#vhVisual {
  margin-bottom: 100px;
}

@media only screen and (max-width: 534px) {
  #vhVisual {
    margin: 0 -16px 40px;
  }
}

/* vhAdvice
----------------------------------------------- */
#vhAdvice {
  margin-bottom: 145px;
  text-align: center;
}

#vhAdvice .btn {
  width: 30.9%;
  margin: -14.5% auto 0;
}

#vhAdvice .btn a {
  transition-duration: 0.3s;
}

#vhAdvice .btn a:hover {
  opacity: 0.8;
}

@media only screen and (max-width: 534px) {
  #vhAdvice {
    margin: 0 -16px 40px;
  }

  #vhAdvice .btn {
    width: 70%;
    margin: -25px auto 0;
  }
}

/* vhFaq, vnCharm
----------------------------------------------- */
#vhFaq .pieceHeader h2,
#vhCharm .pieceHeader h2 {
  margin-bottom: 30px;
  color: #22ac38;
  font-weight: 500;
  font-size: 2.5rem;
  font-family: "Zen Maru Gothic", sans-serif;
  text-decoration-line: underline;
  text-decoration-thickness: 4px;
  text-decoration-style: dotted;
  text-decoration-color: #22ac38;
  text-underline-offset: 15px;
  text-align: center;
}

#vhFaq .pieceBody .explain,
#vhCharm .pieceBody .explain {
  margin-bottom: 30px;
  font-weight: 500;
  font-size: 1.25rem;
  text-align: center;
}

@media only screen and (max-width: 767px) {

  #vhFaq .pieceHeader h2,
  #vhCharm .pieceHeader h2 {
    font-size: 1.25rem;
  }

  #vhFaq .pieceBody .explain,
  #vhCharm .pieceBody .explain {
    font-size: 1rem;
  }
}

/* vhFaq
----------------------------------------------- */
#vhFaq {
  margin-bottom: 90px;
  padding: 70px 40px 45px;
  border: 1px solid #fef4e8;
  background: #fef4e8;
  text-align: center;
}

#vhFaq .pieceBody .faq-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px 30px;
  padding-top: 20px;
}

#vhFaq .pieceBody .faq-list li {
  display: flex;
  flex-direction: column;
  position: relative;
  width: calc((100% - 30px) / 2);
  border: 1px solid var(--mono-color-9);
  border-radius: 7px;
  background: var(--mono-color-9);
  transition-duration: 0.3s;
}

#vhFaq .pieceBody .faq-list li:hover {
  opacity: 0.8;
}

#vhFaq .pieceBody .faq-list li.type03 {
  align-self: stretch;
}

#vhFaq .pieceBody .faq-list li .slide-menu {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#vhFaq .pieceBody .faq-list li .slide-menu dt a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  height: 100%;
  padding-bottom: 10px;
  color: inherit;
  text-decoration: none;
  transition-duration: 0.3s;
}

#vhFaq .pieceBody .faq-list li .slide-menu dt a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: none !important;
}

#vhFaq .pieceBody .faq-list li .slide-menu dt .ico {
  margin-top: -20px;
}

#vhFaq .pieceBody .faq-list li.type02 .slide-menu dt .question {
  margin-top: -5%;
}

#vhFaq .pieceBody .faq-list li.type06 .slide-menu dt .question {
  margin-top: -2%;
}

#vhFaq .pieceBody .faq-list li.type07 .slide-menu dt .question {
  margin-top: -7%;
}

#vhFaq .pieceBody .faq-list li .slide-menu dd {
  padding: 10px 30px 20px;
  text-align: left;
}

#vhFaq .pieceBody .faq-list li .more {
  width: 100%;
  padding: 5px;
  border-radius: 0 0 7px 7px;
  color: var(--mono-color-9);
  font-weight: 500;
  text-align: center;
}

#vhFaq .pieceBody .faq-list li.type01 .more {
  background: #e77e6c;
}

#vhFaq .pieceBody .faq-list li.type02 .more {
  background: #81b627;
}

#vhFaq .pieceBody .faq-list li.type03 .more {
  background: #7389c1;
}

#vhFaq .pieceBody .faq-list li.type04 .more {
  background: #e69400;
}

#vhFaq .pieceBody .faq-list li.type05 .more {
  background: #62b795;
}

#vhFaq .pieceBody .faq-list li.type06 .more {
  background: #e784a1;
}

#vhFaq .pieceBody .faq-list li.type07 .more {
  background: #43b5b9;
}

#vhFaq .pieceBody .faq-list li.type08 .more {
  background: #ac7aae;
}

#vhFaq .pieceBody .faq-list li .more::after {
  content: "";
  display: inline-block;
  width: 20px;
  aspect-ratio: 12/7;
  margin-left: 5px;
  background: url(/_themes/site/images/vacanthouse/arrow-white.svg) center center / cover no-repeat;
}

#vhFaq .pieceBody .faq-list li:has(.slide-menu.current) .more::after {
  transform: rotate(180deg);
}

@media only screen and (max-width: 959px) {
  #vhFaq {
    margin: 0 -16px 40px;
    padding: 45px 15px;
  }

  #vhFaq .pieceBody .faq-list {
    flex-direction: column;
  }

  #vhFaq .pieceBody .faq-list li {
    width: 100%;
  }

  #vhFaq .pieceBody .faq-list li .slide-menu dt .ico {
    width: 47px;
  }
}

/* vhCharm
----------------------------------------------- */
#vhCharm {
  margin-bottom: 100px;
}

#vhCharm .charm-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 45px 30px;
  padding-top: 40px;
}

#vhCharm .charm-list li {
  flex-basis: calc((100% - 90px) / 4);
}

#vhCharm .charm-list li .modal-open {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  color: inherit;
  text-decoration: none;
  text-align: center;
}

#vhCharm .charm-list li .modal-open .ico {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#vhCharm .charm-list li .modal-open .img {
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 50%;
}

#vhCharm .charm-list li .modal-open .img img {
  transition-duration: 0.3s;
}

#vhCharm .charm-list li:hover .modal-open .img img {
  transform: scale(1.2);
}

#vhCharm .charm-list li .modal-open .ttl {
  transition-duration: 0.3s;
}

#vhCharm .charm-list li:hover .modal-open .ttl {
  color: #22ac38;
}

#vhCharm .charm-list li .modal-content {
  display: none;
}

/* modal content */
.modal-content h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  padding-right: 15px;
  padding-bottom: 15px;
  border-bottom: 2px dotted #22ac38;
  color: #22ac38;
  font-weight: 500;
  font-size: 2.5rem;
  font-family: "Zen Maru Gothic", sans-serif;
}

.modal-content h3 .ico {
  flex-shrink: 0;
}

.modal-content .img {
  margin-bottom: 20px;
  text-align: center;
}

.modal-content .explain {
  margin-bottom: 10px;
  padding: 0 30px;
  font-weight: 300;
}

.modal-content .point {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 30px;
}

.modal-content .point dt {
  transform: translateY(50%);
  padding: 8px 45px;
  border: 1px solid #e98945;
  border-radius: 40px;
  background: #e98945;
  color: var(--mono-color-9);
  font-size: 1.125rem;
}

.modal-content .point dd {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  padding: 40px 60px;
  background: #fef4e8;
}

.modal-content .point dd .ttl {
  flex-basis: 100%;
  margin-bottom: 20px;
  color: #e98945;
  font-size: 1.875rem;
  text-align: center;
}

.modal-content .point dd .txt,
.modal-content .point dd .img {
  flex-grow: 1;
  flex-basis: calc((100% - 20px) / 2);
}

/* featherlight */
.featherlight .featherlight-content {
  display: inline-flex;
  max-width: min(90%, 1030px);
  max-height: 85%;
  padding-bottom: 25px;
  overflow: visible;
  border: 1px solid transparent;
  border-radius: 8px;
}

.featherlight .featherlight-close-icon {
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #ccc;
  line-height: 35px;
}

.featherlight .featherlight-close-icon:hover {
  opacity: 0.8;
}

.featherlight .featherlight-next,
.featherlight .featherlight-previous {
  top: 0;
  bottom: 0;
  background: none !important;
}

.featherlight .featherlight-next {
  right: 0;
}

.featherlight .featherlight-previous {
  left: 0;
}

.featherlight .featherlight-next:hover,
.featherlight .featherlight-previous:hover {
  background: rgba(0, 0, 0, .25) !important;
}

.featherlight .featherlight-next span,
.featherlight .featherlight-previous span {
  font-size: 40px;
}

.featherlight .featherlight-inner {
  width: 100%;
  overflow-x: hidden;
}

@media only screen and (max-width: 959px) {
  #vhCharm {
    margin: 0 -8px 40px;
  }

  #vhCharm .charm-list {
    gap: 25px 10px;
    padding-top: 20px;
  }

  #vhCharm .charm-list li {
    flex-basis: calc((100% - 10px) / 2);
  }

  #vhCharm .charm-list li .modal-open {
    gap: 10px;
  }

  #vhCharm .charm-list li .modal-open .ico {
    width: 40px;
  }

  #vhCharm .charm-list li .modal-open .img {
    width: 100%;
  }

  #vhCharm .charm-list li .modal-open .img img {
    width: 100%;
  }

  #vhCharm .charm-list li .modal-open .ttl {
    font-size: 0.875rem;
  }

  /* modal content */
  .modal-content h3 {
    font-size: 1.125rem;
  }

  .modal-content h3 .ico {
    width: 48px;
  }

  .modal-content .explain {
    padding: 0;
  }

  .modal-content .point {
    padding: 0;
  }

  .modal-content .point dt {
    padding: 3px 45px;
    font-size: 1rem;
  }

  .modal-content .point dd {
    padding: 30px 15px;
  }

  .modal-content .point dd .ttl {
    font-size: 1.25rem;
  }

  .modal-content .point dd .txt,
  .modal-content .point dd .img {
    flex-basis: 100%;
  }

  .modal-content .point dd .img {
    margin-top: 20px;
  }

  /* featherlight */
  .featherlight .featherlight-content {
    max-width: 90%;
  }

  .featherlight .featherlight-next,
  .featherlight .featherlight-previous {
    display: block;
    top: 30%;
    bottom: 40%;
    background: transparent !important;
  }

  .featherlight .featherlight-next {
    right: -25px;
  }

  .featherlight .featherlight-previous {
    left: -25px;
  }

  .featherlight .featherlight-next:hover,
  .featherlight .featherlight-previous:hover {
    background: transparent !important;
  }

  .featherlight .featherlight-next span,
  .featherlight .featherlight-previous span {
    color: #000;
    font-size: 30px;
    line-height: inherit;
  }
}

/* vhContact
----------------------------------------------- */
#vhContact {
  position: relative;
  z-index: 0;
  padding: 100px 0 140px;
}

#vhContact::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  width: 100vw;
  background: url(/_themes/site/images/vacanthouse/bg_contact_01.png) center top / cover no-repeat;
}

#vhContact .pieceHeader .explain {
  margin-bottom: 100px;
  font-weight: 500;
  font-size: 1.25rem;
  text-align: center;
}

#vhContact .pieceBody {
  padding: 0 100px 95px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .9);
}

#vhContact .pieceBody .free {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-50%);
  width: 118px;
  aspect-ratio: 1/1;
  margin: 0 auto;
  border: 1px solid #22ac38;
  border-radius: 50%;
  background: #22ac38;
  color: var(--mono-color-9);
  font-size: 1rem;
  text-align: center;
}

#vhContact .pieceBody h2 {
  margin-top: -15px;
  margin-bottom: 30px;
  color: #22ac38;
  font-weight: 500;
  font-size: 1.5rem;
  font-family: "Zen Maru Gothic", sans-serif;
  text-decoration-line: underline;
  text-decoration-thickness: 4px;
  text-decoration-style: dotted;
  text-decoration-color: #22ac38;
  text-underline-offset: 15px;
  text-align: center;
}

#vhContact .pieceBody dl {
  margin-top: 35px;
  border-radius: 8px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  background: var(--mono-color-9);
}

#vhContact .pieceBody dt {
  padding: 20px 5px;
  border-radius: 8px 8px 0 0;
  background: #22ac38;
  color: var(--mono-color-9);
  font-weight: 500;
  font-size: 1.5rem;
  font-family: "Zen Maru Gothic", sans-serif;
  text-align: center;
}

#vhContact .pieceBody dt span {
  display: block;
  margin-top: 10px;
  font-size: 0.875rem;
}

#vhContact .pieceBody dd {
  padding: 35px 15px 35px min(4vw, 60px);
}

#vhContact .pieceBody dd address {
  display: flex;
  align-items: center;
  gap: min(3vw, 40px);
}

#vhContact .pieceBody dd address .ttl {
  flex-basis: 32%;
  color: #22ac38;
  font-weight: 700;
  font-size: min(2.3vw, 1.75rem);
}

#vhContact .pieceBody dd address .txt {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-weight: 300;
}

#vhContact .pieceBody dd address .txt .tel {
  padding-left: 45px;
  background: url(/_themes/site/images/vacanthouse/ico_contact_02.png) left center no-repeat;
  font-weight: 700;
  font-size: 1.75rem;
}

#vhContact .pieceBody dd address .txt .time span {
  display: inline-block;
}

@media only screen and (max-width: 959px) {
  #vhContact {
    padding: 50px 0 75px;
  }

  #vhContact::before {
    background: url(/_themes/site/images/vacanthouse/smp_bg_contact_01.png) center top / cover no-repeat;
  }

  #vhContact .pieceHeader .explain {
    margin-bottom: 60px;
    font-size: 1rem;
  }

  #vhContact .pieceBody {
    padding: 15px;
  }

  #vhContact .pieceBody .free {
    width: 70px;
    font-size: 0.8125rem;
  }

  #vhContact .pieceBody h2 {
    font-size: 1.25rem;
  }

  #vhContact .pieceBody dt {
    font-size: 1.125rem;
  }

  #vhContact .pieceBody dt span {
    font-size: 0.8125rem;
  }

  #vhContact .pieceBody dd {
    padding: 20px;
  }

  #vhContact .pieceBody dd address {
    display: block;
  }

  #vhContact .pieceBody dd address .ttl {
    display: block;
    margin-bottom: 10px;
    font-size: 1.25rem;
  }

  #vhContact .pieceBody dd address .txt {
    font-size: 0.875rem;
  }

  #vhContact .pieceBody dd address .txt .tel {
    padding-left: 35px;
    background-size: 25px auto;
    font-size: 1.25rem;
  }
}