/********************
お問い合わせ用CSS
  /inquiry/
 ********************/

.inquiry-pageHeader {
  padding-block: min(10.25vw,140px) min(5.27vw,72px);
  & > div {
    width: 100%;
    max-width: 1360px;
    margin-inline: auto;
    padding-inline: 60px;
  }
  & h1 {
    color: #173055;
    font-size: min(3.29vw,45px);
    font-weight: 600;
  }
}
@media (width <= 760px) {
  .inquiry-pageHeader {
    padding-block: 0;
    & > div {
      display: flex;
      align-items: center;
      height: 41.87vw;
      padding-inline: 2.67vw;
    }
    & h1 {
      font-size: 9.07vw;
    }
  }
}

.inquiry-introduction {
  padding-block-end: min(5.12vw,70px);
  & > div {
    width: 100%;
    max-width: 1360px;
    margin-inline: auto;
    padding-inline: 60px;
  }
}
@media (width <= 760px) {
  .inquiry-introduction {
    padding-block-end: 18.67vw;
    & > div {
      padding-inline: 2.67vw;
    }
  }
}

.inquiry-introduction_txt {
  font-size: min(1.32vw,18px);
  letter-spacing: 0.025em;
  line-height: 1.83;
  & + .inquiry-introduction_txt {
    margin-block-start: 1em;
  }
}
@media (width <= 760px) {
  .inquiry-introduction_txt {
    font-size: 4.27vw;
  }
}

.inquiry-introductionLinks {
  margin-block-start: min(1.46vw,20px);
  padding-block-start: min(1.46vw,20px);
  border-block-start: 1px solid #E0E0E0;
  & ul {
    display: grid;
    gap: 0 min(0.88vw,12px);
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
}
@media (width <= 760px) {
  .inquiry-introductionLinks {
    margin-block-start: 5.33vw;
    padding-block-start: 5.33vw;
    & ul {
      gap: 2.67vw;
      grid-template-columns: 100%;
    }
  }
}

.inquiry-introductionLink {
  position: relative;
  display: flex;
  align-items: center;
  height: min(6.59vw,90px);
  padding-inline: min(1.46vw,20px) min(3.66vw,50px);
  background-color: #F4F7F8;
  font-size: min(1.32vw,18px);
  font-weight: 500;
  &::before, &::after {
    position: absolute;
    top: 50%;
    right: min(0.95vw,13px);
    translate: 0 -50%;
    width: min(1.76vw,24px);
    height: auto;
    aspect-ratio: 1;
  }
  &::before {
    border-radius: 50%;
    background-color: #FFF;
    transition: border 0.3s, background 0.3s ease-out;
    content: "";
  }
  &::after {
    background-color: #202020;
    mask: url(../img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
    transition: mask 0.3s ease-out, background 0.3s ease-out;
    content: "";
  }
}
@media (width <= 760px) {
  .inquiry-introductionLink {
    height: 21.33vw;
    padding-inline: 5.33vw 13.33vw;
    font-size: 4.8vw;
    &::before, &::after {
      right: 3.47vw;
      width: 6.4vw;
    }
  }
}
@media (hover: hover) {
  .inquiry-introductionLink:hover {
    &::before {
      background-color: var(--hover-color);
    }
    &::after {
      mask-position: 0 0;
      background-color: #FFF;
    }
  }
}

.inquiry-pageNav {
  padding-block: min(5.86vw,80px);
  background-color: #F4F7F8;
  & ol {
    display: grid;
    grid-template-columns: 33% 33% 34%;
    width: 100%;
    max-width: 1360px;
    margin-inline: auto;
    padding-inline: 60px;
  }
  & li {
    &:nth-child(1) {
      z-index: 3;
    }
    &:nth-child(2) {
      z-index: 2;
    }
  }
}
@media (width <= 760px) {
  .inquiry-pageNav {
    padding-block: 10.67vw;
    & ol {
      grid-template-columns: 100%;
      padding-inline: 2.67vw;
    }
    & li {
      &:not(:nth-child(1)) {
        border-block-start: 0.8vw solid #FFF;
      }
    }
  }
}

.inquiry-pageNavItem {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: min(5.86vw,80px);
  background-color: #E0E0E0;
  color: #707070;
  font-size: min(1.46vw,20px);
  font-weight: 500;
  letter-spacing: 0.025em;
  &::before, &::after {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    display: block;
    content: "";
  }
  &::before {
    right: calc(min(2.49vw,34px) * -1);
    width: min(2.56vw,35px);
    height: auto;
    aspect-ratio: 35/80;
    background-color: #FFF;
    clip-path: polygon(0 0,min(0.37vw,5px) 0,100% 50%,min(0.37vw,5px) 100%,0 100%);
  }
  &::after {
    right: calc(min(2.12vw,29px) * -1);
    width: min(2.2vw,30px);
    height: auto;
    aspect-ratio: 30/80;
    background-color: #E0E0E0;
    clip-path: polygon(0 0,100% 50%,0 100%);
  }
  li:nth-child(3) & {
    &::before, &::after {
      content: none;
    }
  }
  & span {
    margin-inline-end: min(1.17vw,16px);
    filter: brightness(0) saturate(100%) invert(46%) sepia(0%) saturate(17%) hue-rotate(205deg) brightness(91%) contrast(76%);
    line-height: 1.2;
  }
  &.is-current {
    background-color: #2B4E76;
    color: #FFF;
    &::after {
      background-color: #2B4E76;
    }
    & span {
      filter: brightness(0) saturate(100%) invert(98%) sepia(36%) saturate(5%) hue-rotate(192deg) brightness(117%) contrast(100%);
    }
  }
}
@media (width <= 760px) {
  .inquiry-pageNavItem {
    height: 16vw;
    font-size: 4.8vw;
    &::before, &::after {
      translate: 50% 0;
      width: 8vw;
      aspect-ratio: 80/35;
    }
    &::before {
      top: auto;
      right: 50%;
      bottom: -4.1vw;
      clip-path: polygon(0 0,100% 0,50% 100%);
    }
    &::after {
      top: auto;
      right: 50%;
      bottom: -3.2vw;
      clip-path: polygon(0 0,100% 0,50% 100%);
    }
  }
}

.inquiry-section {
  padding-block: min(7.32vw,100px) min(10.25vw,140px);
}
@media (width <= 760px) {
  .inquiry-section {
    padding-block: 16vw 29.33vw;
  }
}

.inquiry-entries {
  margin-block-start: min(4.39vw,60px);
  & > dl {
    & > div {
      display: grid;
      grid-template-columns: min(23.79vw,325px) minmax(0,1fr);
      padding-block: min(2.2vw,30px);
      border-block-start: 1px solid #E0E0E0;
      &:last-child {
        border-block-end: 1px solid #E0E0E0;
      }
    }
    & dt {
      display: flex;
      align-items: center;
      align-self: center;
      flex-shrink: 0;
      gap: 0 min(0.88vw,12px);
      font-size: min(1.32vw,18px);
      font-weight: 500;
      letter-spacing: 0.025em;
      & span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: min(3.51vw,48px);
        height: auto;
        aspect-ratio: 48/32;
        border-radius: min(0.44vw,6px);
        background-color: #37B6FA;
        color: #FFF;
        font-size: min(1.02vw,14px);
        font-weight: 500;
        letter-spacing: 0.025em;
      }
    }
    & input[type="text"],input[type="email"],input[type="tel"],& select {
      display: flex;
      align-items: center;
      height: min(3.66vw,50px);
      padding-inline: min(0.88vw,12px);
      border: none;
      background-color: #F8F8F8;
      box-shadow: 1px 1px 2px rgba(0,0,0,0.2) inset;
      font-size: min(1.32vw,18px);
      letter-spacing: 0.03em;
      &::placeholder {
        color: #999999;
      }
    }
    & input[type="radio"],& input[type="checkbox"] {
      position: absolute;
      opacity: 0;
    }
    & textarea {
      padding-block: min(0.88vw,12px);
      padding-inline: min(0.88vw,12px);
      border: none;
      background-color: #F8F8F8;
      box-shadow: 1px 1px 2px rgba(0,0,0,0.2) inset;
      font-size: min(1.32vw,18px);
      letter-spacing: 0.03em;
    }
  }
}
@media (width <= 760px) {
  .inquiry-entries {
    margin-block-start: 16vw;
    & > dl {
      & > div {
        grid-template-columns: 100%;
        padding-block: 5.33vw;
      }
      & dt {
        gap: 0 2.67vw;
        font-size: 4.8vw;
        & span {
          width: 12.8vw;
          padding-block: 1.07vw;
          border-radius: 1.6vw;
          font-size: 3.73vw;
        }
      }
      & dd {
        margin-block-start: 4vw;
      }
      & input[type="text"],input[type="email"],input[type="tel"],& select {
        height: 13.33vw;
        padding-inline: 3.2vw;
        font-size: 4.8vw;
        max-width: 100%;
      }
      & select {
        font-size: 3.47vw;
      }
      & textarea {
        padding-block: 3.2vw;
        padding-inline: 3.2vw;
        font-size: 4.8vw;
      }
    }
  }
}

.inquiry-entries_txt1 {
  width: 100%;
}

.inquiry-entries_txt2 {
  width: 76.5%;
}
@media (width <= 760px) {
  .inquiry-entries_txt2 {
    width: 100%;
  }
}

.inquiry-entries_txt3 {
  width: 35.5%;
}
@media (width <= 760px) {
  .inquiry-entries_txt3 {
    width: 100%;
  }
}

.inquiry-entries_txt4 {
  width: 32.2%;
}
@media (width <= 760px) {
  .inquiry-entries_txt4 {
    width: 100%;
  }
}

.inquiry-entries_customers {
  display: flex;
  align-items: center;
  gap: 0 min(2.56vw,35px);
}
@media (width <= 760px) {
  .inquiry-entries_customers {
    gap: 0 9.33vw;
  }
}

.inquiry-entries_radio,.inquiry-entries_checkbox {
  position: relative;
  padding-inline-start: min(2.49vw,34px);
  font-size: min(1.32vw,18px);
  font-weight: 500;
  letter-spacing: 0.025em;
  &::before {
    position: absolute;
    top: 55%;
    left: 0;
    translate: 0 -50%;
    display: block;
    width: min(1.76vw,24px);
    height: auto;
    aspect-ratio: 1;
    border: 1px solid #E0E0E0;
    border-radius: 100%;
    background-color: #F8F8F8;
    cursor: pointer;
    transition: all 0.3s ease-out;
    content: "";
  }
  &:has(input[type="radio"]:checked) , input[type="checkbox"]:checked + & {
    &::before {
      background-color: #37B6FA;
      box-shadow: 0 0 0 min(0.367vw,5px) #F8F8F8 inset;
    }
  }
}
@media (width <= 760px) {
  .inquiry-entries_radio,.inquiry-entries_checkbox {
    padding-inline-start: 9.07vw;
    font-size: 4.8vw;
    &::before {
      width: 6.4vw;
    }
    input[type="radio"]:checked + &, input[type="checkbox"]:checked + & {
      &::before {
        box-shadow: 0 0 0 1.33vw #F8F8F8 inset;
      }
    }
  }
}

.inquiry-entries_addressWrap {
  display: flex;
  align-items: center;
}
@media (width <= 760px) {
  .inquiry-entries_addressWrap {
    flex-wrap: wrap;
  }
}

.inquiry-entries_address {
  display: flex;
  align-items: center;
  width: min(23.79vw,325px);
  font-size: min(1.32vw,18px);
  font-weight: 500;
  & input {
    margin-inline-start: min(0.88vw,12px);
  }
}
@media (width <= 760px) {
  .inquiry-entries_address {
    width: 100%;
    font-size: 4.8vw;
    & input {
      margin-inline-start: 3.2vw;
    }
  }
}

.inquiry-entries_addressBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(14.49vw,198px);
  height: auto;
  aspect-ratio: 198/32;
  margin-inline-start: min(3.66vw,50px);
  border-radius: 9999px;
  background-color: #505050;
  color: #FFF;
  font-size: min(1.02vw,14px);
  font-weight: 500;
  transition: opacity .3s ease;
  &:hover {
    opacity: .7;
  }
}
@media (width <= 760px) {
  .inquiry-entries_addressBtn {
    width: 52.8vw;
    margin-block-start: 4vw;
    margin-inline-start: 0;
    font-size: 3.73vw;
  }
}

.inquiry-entries_property {
  & div {
    display: grid;
    gap: 0 min(0.37vw,5px);
    grid-template-columns: min(5.86vw,80px) minmax(0,1fr);
    & + div {
      margin-block-start: min(1.1vw,15px);
    }
  }
  & p {
    margin-block-start: min(0.73vw,10px);
    font-size: min(1.17vw,16px);
  }
}
@media (width <= 760px) {
  .inquiry-entries_property {
    & div {
      gap: 0 1.33vw;
      grid-template-columns: 100%;
      & + div {
        margin-block-start: 6.67vw;
      }
    }
    & p {
      margin-block-start: 2.67vw;
      font-size: 4.27vw;
    }
  }
}

.inquiry-entries_txt {
  margin-block-end: min(0.73vw,10px);
  font-size: min(1.32vw,18px);
}
@media (width <= 760px) {
  .inquiry-entries_txt {
    margin-block-start: 2.67vw;
    font-size: 4.8vw;
  }
}

.inquiry-entries_txtLink {
  text-decoration: underline;
}
@media (hover: hover) {
  .inquiry-entries_txtLink:hover {
    text-decoration: none;
  }
}

.inquiry-txt {
  font-size: min(1.32vw,18px);
}
@media (width <= 760px) {
  .inquiry-txt {
    font-size: 4.8vw;
  }
}

.inquiry-required {
  font-size: min(1.32vw,18px);
  & span {
    display: inline-block;
    width: min(3.51vw,48px);
    height: auto;
    margin-inline-end: min(0.44vw,6px);
    padding-block: min(0.29vw,4px);
    border-radius: min(0.44vw,6px);
    background-color: #37B6FA;
    color: #FFF;
    font-size: min(1.02vw,14px);
    font-weight: 500;
    letter-spacing: 0.025em;
    text-align: center;
  }
}
@media (width <= 760px) {
  .inquiry-required {
    font-size: 4.8vw;
    & span {
      width: 12.8vw;
      margin-inline-end: 1.6vw;
      padding-block: 1.07vw;
      border-radius: 1.6vw;
      font-size: 3.73vw;
    }
  }
}

.inquiry-noteBox {
  margin-block-start: min(3.66vw,50px);
  text-align: center;
}
@media (width <= 760px) {
  .inquiry-noteBox {
    margin-block-start: 13.33vw;
  }
}

.inquiry-noteBox_txt {
  font-size: min(1.32vw,18px);
  line-height: 1.78;
}
@media (width <= 760px) {
  .inquiry-noteBox_txt {
    font-size: 4.8vw;
  }
}

.inquiry-noteBox_note {
  color: #4377B2;
  font-size: min(1.17vw,16px);
  line-height: 2;
}
@media (width <= 760px) {
  .inquiry-noteBox_note {
    font-size: 4.27vw;
  }
}

.inquiry-btnWrap {
  margin-block-start: min(4.39vw,60px);
  text-align: center;
}
@media (width <= 760px) {
  .inquiry-btnWrap {
    margin-block-start: 13.33vw;
  }
}

.inquiry-submitBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(30.45vw,416px);
  height: auto;
  aspect-ratio: 416/87;
  margin-inline: auto;
  background-color: #F3F3F3;
  color: #505050;
  font-size: min(1.76vw,24px);
  font-weight: 600;
  pointer-events: none;
  transition: color 0.3s ease-out, background 0.3s ease-out;
  &.is-active {
    background-color: #2B4E76;
    color: #FFF;
    pointer-events: auto;
  }
}
@media (width <= 760px) {
  .inquiry-submitBtn {
    width: 66.67vw;
    font-size: 4.8vw;
  }
}

.errmsg {
  color: #ff0000;
}

/***** お問い合わせ（確認） *****/
.inquiry-confirm {
  & table {
    width: 100%;
    table-layout: fixed;
  }
  & th, & td {
    padding-block: min(1.83vw,25px);
    border: 1px solid #E0E0E0;
    font-size: min(1.32vw,18px);
    font-weight: 500;
    letter-spacing: 0.025em;
  }
  & th {
    width: 29%;
    padding-inline: min(2.2vw,30px);
    background-color: #F8F8F8;
    text-align: left;
  }
  & td {
    width: 71%;
    padding-inline: min(2.93vw,40px);
    background-color: #FFF;
  }
}
@media (width <= 760px) {
  .inquiry-confirm {
    & th, & td {
      display: block;
      width: 100%;
      padding-block: 3.2vw;
      padding-inline: 4vw;
      font-size: 4.8vw;
    }
  }
}

.inquiry-confirm_property {
  & p + p {
    margin-block-start: min(1.83vw,25px);
  }
}
@media (width <= 760px) {
  .inquiry-confirm_property {
    & p + p {
      margin-block-start: 4vw;
    }
  }
}

.inquiry-confirmSubmitBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(30.45vw,416px);
  height: auto;
  aspect-ratio: 416/87;
  margin-inline: auto;
  background-color: #2B4E76;
  color: #FFF;
  font-size: min(1.76vw,24px);
  font-weight: 600;
}
@media (width <= 760px) {
  .inquiry-confirmSubmitBtn {
    width: 66.67vw;
    font-size: 4.8vw;
  }
}

.inquiry-returnBtn {
  display: inline-block;
  margin-block-start: min(4.39vw,60px);
  font-size: min(1.46vw,20px);
  font-weight: 500;
  & span {
    position: relative;
    padding-inline-end: min(2.2vw,30px);
    &::before, &::after {
      position: absolute;
      top: 50%;
      right: 0;
      translate: 0 -50%;
      width: min(2.26vw,24px);
      height: auto;
      aspect-ratio: 1;
      content: "";
    }
    &::before {
      border-radius: 50%;
      background-color: #707070;
      transition: background 0.3s ease-out;
    }
    &::after {
      rotate: 180deg;
      background-color: #FFF;
      mask: url(/cms/wp-content/themes/ndc/assets/img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
      transition: mask 0.3s ease-out, background 0.3s ease-out;
    }
  }
}
@media (width <= 760px) {
  .inquiry-returnBtn {
    margin-block-start: 10.67vw;
    font-size: 4.8vw;
    & span {
      padding-inline-end: 8vw;
      &::before, &::after {
        width: 6.4vw;
      }
    }
  }
}
@media (hover: hover) {
  .inquiry-returnBtn:hover {
    & span {
      &::before {
        background-color: var(--hover-color);
      }
      &::after {
        background-color: #FFF;
        mask-position: 0 0;
      }
    }
  }
}


/***** お問い合わせ（完了） *****/
.inquiry-thanksBox {
  padding-block: min(10.98vw,150px);
  font-size: min(1.32vw,18px);
  line-height: 1.83;
  letter-spacing: 0.025em;
  text-align: center;
}
@media (width <= 760px) {
  .inquiry-thanksBox {
    padding-block: 16vw;
    font-size: 4.8vw;
  }
}