/* ------------------------------------
common
------------------------------------ */

[class*="p-column-wrap"] {
  display: flex;
  justify-content: space-between;
  gap: 50px;
}

.p-column-wrap-center {
  align-items: center;
}

.p-column-img {
  flex-shrink: 0;
  text-align: center;
}

.p-column-title {
  flex-shrink: 0;
  margin-right: auto;
}

.p-column-content {
  width: 100%;
}

.p-column-content .c-btn {
  margin-top: 50px;
}


.photo-slider {
  width: 100%;
  max-width: 1700px;
  margin: 80px auto 0;
  overflow: hidden;
}


/* **************************************************************
 area
*************************************************************** */
.area-box {
  display: flex;
  gap: 80px;
  margin: 120px 0;
}

.area-box:first-of-type {
  margin-top: 0;
}

.area-box:last-of-type {
  margin-bottom: 0;
}

.area-box .inner {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 50%;
  padding-bottom: 50px;
  border-bottom: 1px dashed var(--color-main);
}

.area-box .inner .map {
  position: absolute;
  right: -220px;
  top: -65px
}

.area-box .inner .title-max {
  position: relative;
}

.area-box .inner .title-max .main {
  position: relative;
  z-index: 2;
  white-space: nowrap;
  color: #fff;
  mix-blend-mode: difference;
}

.area-box .inner .comment {
  position: relative;
  display: block;
  margin-top: auto;
}

.area-img {
  position: relative;
  margin-right: -170px;
}

.accommodation-box {
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: center;
  padding: 50px 0;
  border-top: 1px dashed var(--color-main);
}

.accommodation-box:last-of-type {
  border-bottom: 1px dashed var(--color-main);
}

.accommodation-box dt {
  font-weight: bold;
  font-size: 2.2rem;
}

.accommodation-box dd {
  line-height: 1.5;
  font-size: 1.6rem;
}


/* **************************************************************
 inquiry
*************************************************************** */
.inquiry-wrap {
  padding-top: 150px !important;
}

.inquiry-head {
  padding: 100px 0;
}

.inquiry-head p {
  font-size: 2.2rem;
  font-weight: bold;
}

.inquiry-head .inner-btns {
  gap: 25px 50px;
  margin-bottom: 0;
}

.inquiry-head .inner-btns .c-btn {
  width: 35%;
  min-height: 100px;
  font-size: 2.8rem;
}

.inquiry-head .inner-btns .c-btn.messenger {
  background-color: #256aab;
}

.inquiry-head .inner-btns .c-btn.whatsapp {
  background-color: #0ba07b;
}

.inquiry-caution {
  display: flex;
  padding: 30px;
  margin: 30px 0 50px;
  gap: 30px;
  border: 1px solid #111;
}

.inquiry-caution::before {
  content: "!";
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background-color: var(--color-main);
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-sub);
  font-size: 3rem;
  font-weight: bold;
}

.inquiry-caution p {
  line-height: 1.5;
}

/*form*/
.inquiry-form input,
.inquiry-form textarea {
  padding: 7px 10px;
  background-color: #fafafa;
  border: 1px solid #cccccc;
}

.inquiry-form input[type="radio"] {
  width: 25px;
  height: 25px;
}

.inquiry-form input[type="checkbox"] {
  width: 22px;
  height: 22px;
}

.form-box {
  display: grid;
  grid-template-columns: 30% 1fr;
  margin: 10px 0;
  background-color: #fff;
}

.form-team {
  padding: 40px 50px;
}

.form-team .must {
  color: #ff0000;
  font-style: normal;
}

.form-desc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  padding: 30px 50px;
}

.form-desc span {
  margin: 0 !important;
  white-space: nowrap;
}

.form-desc .unit {
  font-weight: bold;
}

.form-desc label {
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: bold;
}


.form-checklist {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 15px 30px;
}

.field-privacy {
  margin: 40px 0;
  font-weight: bold;
}

.field-privacy label {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.field-recapture {
  display: flex;
  justify-content: center;
  align-items: center;
}

.field-submit {
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;
  margin: 40px 0;
}

.field-submit .c-btn {
  min-width: 350px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 60px 20px 40px;
  background: var(--color-main) url(../images/icon_arrow_wh.svg) no-repeat right 25px center / 8px;
  color: #fff;
  font-size: 2.2rem;
}

.field-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: fit-content;
  gap: 0 15px;
}


.field-10 {
  width: 10%;
  min-width: 100px;
}

.field-30 {
  width: 30%;
  min-width: 150px;
}

.field-50 {
  width: 50%;
  min-width: 100px;
}

.field-100 {
  width: 100%;
}

.field-date {
  min-width: 240px;
}

/*cf7*/
.form-desc .wpcf7-form-control-wrap {
  width: 100%;
  margin: 10px 0;
}

.field-inner .wpcf7-form-control-wrap {
  max-width: min-content;
}

.form-desc .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.wpcf7-not-valid-tip {
  font-weight: bold !important;
  font-size: 90% !important;
}

.wpcf7-response-output {
  display: block;
  padding: 25px !important;
  background-color: #fff;
  text-align: center;
  font-weight: bold;
  font-size: 110%;
}


/* /////////////////////////////////////////////////////////////////////////////////////////////////////////


---  print 印刷用CSS


///////////////////////////////////////////////////////////////////////////////////////////////////////// */
@media print {}






/* /////////////////////////////////////////////////////////////////////////////////////////////////////////


---  1500px


///////////////////////////////////////////////////////////////////////////////////////////////////////// */
@media (max-width: 1500px) {}








/* /////////////////////////////////////////////////////////////////////////////////////////////////////////


---  1199px


///////////////////////////////////////////////////////////////////////////////////////////////////////// */
@media (max-width: 1199px) {

  /* ------------------------------------
   common
  ------------------------------------ */
  [class*="p-column-wrap"] {
    justify-content: center;
    flex-wrap: wrap;
  }


  /* **************************************************************
   area
  *************************************************************** */
  .area-box {
    flex-direction: column;
  }

  .area-box .inner {
    max-width: 100%;
    padding-bottom: 0;
    border-bottom: none;
  }

  .area-box .inner .map {
    right: -150px;
  }

  .area-img {
    margin-right: 0;
  }

  .area-img img {
    width: 100%;
  }


}










/* /////////////////////////////////////////////////////////////////////////////////////////////////////////


--- 991px


///////////////////////////////////////////////////////////////////////////////////////////////////////// */
@media (max-width: 991px) {

  /* **************************************************************
 area
*************************************************************** */
  .accommodation-box {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 25px 0;
  }


  /* **************************************************************
   inquiry
  *************************************************************** */
  .inquiry-head .inner-btns {
    flex-direction: column;
    align-items: center;
  }

  .inquiry-head .inner-btns .c-btn {
    width: 90%;
  }

  /*form*/
  .form-box {
    grid-template-columns: 1fr;
  }

  .form-team {
    padding: 30px 30px 10px;
  }

  .form-desc {
    padding: 10px 30px 30px;
  }


}







/* /////////////////////////////////////////////////////////////////////////////////////////////////////////


--- 767px(スマホ、iPad縦以下)


///////////////////////////////////////////////////////////////////////////////////////////////////////// */
@media (max-width: 767px) {

  /* ------------------------------------
   common
  ------------------------------------ */
  [class*="p-column-wrap"] {
    gap: 30px;
  }

  .p-column-img {
    flex-shrink: 1;
  }

  .photo-slider {
    margin: 40px auto 0;
  }


  /* **************************************************************
 area
*************************************************************** */
  .area-box {
    gap: 40px;
  }

  .area-box .inner .map {
    right: -100px;
    max-width: 80%;
  }

  .area-box .inner .title-max .main {
    white-space: normal;
  }

  .area-img {
    margin-left: -20px;
    margin-right: -20px;
  }

  .accommodation-box dd {
    font-size: 1.4rem;
  }


  /* **************************************************************
   inquiry
  *************************************************************** */
  .inquiry-head {
    padding: 50px 0;
  }

  .inquiry-head p {
    font-size: 1.6rem;
  }

  .inquiry-head .inner-btns {
    margin: 25px 0;
  }

  .inquiry-head .inner-btns .c-btn {
    width: 100%;
    min-height: 80px;
    font-size: 2.2rem;
  }

  .inquiry-form input[type="radio"],
  .inquiry-form input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }

  .inquiry-caution {
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 15px;
  }

  .form-team {
    padding: 20px 20px 5px;
  }

  .form-desc {
    padding: 5px 20px 20px;
  }

  .form-desc .wpcf7-radio {
    gap: 10px 20px;
  }

  .form-desc label {
    gap: 8px;
  }

  .form-checklist {
    gap: 10px 20px;
  }

  .field-date {
    min-width: 180px;
  }

  .field-submit .c-btn {
    min-width: 300px;
  }




}



/* /////////////////////////////////////////////////////////////////////////////////////////////////////////


--- 560px（スマホ大）


///////////////////////////////////////////////////////////////////////////////////////////////////////// */
@media (max-width: 560px) {

  /* ------------------------------------
   common
  ------------------------------------ */
  .p-column-content .c-btn {
    margin-top: 25px;
  }


  /* ------------------------------------
   company
  ------------------------------------ */
  .office-text {
    font-size: 1.6rem;
    text-align: left;
  }

  .office-detail p {
    margin: 20px 0;
  }

  .office-logo {
    margin-bottom: 25px;
  }


  .office-member {
    flex-wrap: wrap;
    gap: 15px 25px;
    margin: 50px 0;
  }

  .office-member li {
    width: 45%;
  }

  /* ------------------------------------
   service
  ------------------------------------ */
  .service-environment {
    margin-top: 80px;
  }

  /* ------------------------------------
   branch
  ------------------------------------ */
  .branch-article {
    padding: 50px 30px;
  }



}