/*  下層ページcss */
body.page {
  background-color: var(--main);
  color: #ffffff;
}
body.page .page-head {
  position: relative;
  width: 100%;
  height: 460px;
  .head-img {
    position: relative;
    width: 100%;
    height: 100%;
    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: #000;
      opacity: 0.3;
    }
  }
  .container {
    position: absolute;
    z-index: 1;
    top: 55%;
    left: 50%;
    translate: -50% -50%;
    width: 100%;
    text-align: center;
    .copy {
      font-size: clamp(2.25rem, 0.5rem + 2.9167vw, 4rem);
      font-weight: 700;
      color: #ffffff;
      text-shadow: 2px 2px 4px rgba(0 0 0 / 0.5);
    }
  }
}
@media screen and (max-width: 960px) {
  body.page .page-head {
    height: 35vh;
    .container {
      .copy {
        font-size: clamp(1.75rem, 1.2143rem + 2.6786vw, 2.5rem);
      }
    }
  }
}

/*=========================
  business
=========================*/
.page-business .page-content {
  .container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
  }
  .section-title {
    position: relative;
    padding-top: 5rem;
    max-width: 800px;
    & h3 {
      font-size: 3rem;
      border-bottom: 2px solid #ffffff;
      padding-bottom: 1rem;
      margin-bottom: 2rem;
    }
    &::before {
      content: '';
      position: absolute;
      top: 0;
      color: #345737;
      font-size: 3.75rem;
      font-weight: bold;
    }
  }
  .section-body {
    .flex {
      display: flex;
      align-items: center;
      gap: 4rem;
      .text {
        width: 50%;
      }
      .img {
        width: 50%;
      }
    }
  }
}
.page-business section.house-cleaning {
  padding: 5rem 0;
  .section-title {
    margin-right: auto;
    &::before {
      content: 'HOUSE CLEANING';
      left: 0;
    }
  }
}
.page-business section.air-conditioner {
  padding: 5rem 0;
  .section-title {
    margin-left: auto;
    & h3 {
      text-align: right;
    }
    &::before {
      content: 'AIR CONDITIONER';
      right: 0;
    }
  }
  .flex {
    flex-direction: row-reverse;
  }
}
.page-business section.reform {
  padding: 5rem 0;
  .section-title {
    margin-right: auto;
    &::before {
      content: 'REFORM';
      left: 0;
    }
  }
}
.page-business section.euiqment {
  padding: 5rem 0;
  margin-bottom: 5rem;
  .section-title {
    margin-left: auto;
    & h3 {
      text-align: right;
    }
    &::before {
      content: 'EQUIPMENT';
      right: 0;
    }
  }
  .flex {
    flex-direction: row-reverse;
  }
}
@media screen and (max-width: 960px) {
  .page-business .page-content {
    .section-title {
      padding-top: 2.5rem;
      & h3 {
        font-size: 1.75rem;
      }
      &::before {
        font-size: 1.5rem;
      }
    }
    .section-body {
      .flex {
        flex-direction: column;
        gap: 4rem;
        .text {
          width: 100%;
        }
        .img {
          width: 100%;
          max-width: 460px;
        }
      }
    }
  }
  .page-business section.house-cleaning {
    padding: 2rem 0;
    .section-title {
      &::before {
        font-size: 1.75rem;
      }
    }
  }
  .page-business section.air-conditioner {
    padding: 2rem 0;
    .section-title {
      &::before {
        font-size: 1.75rem;
      }
    }
  }
  .page-business section.reform {
    padding: 2rem 0;
    .section-title {
      &::before {
        font-size: 2rem;
      }
    }
  }
  .page-business section.euiqment {
    padding: 2rem 0;
    .section-title {
      &::before {
        font-size: 2rem;
      }
    }
  }
}

/*=========================
  company
=========================*/
.page-company .page-content section.message {
  padding: 5rem 0;
  position: relative;
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 20%;
    height: 100%;
    background-color: #ffffff;
  }
  .container {
    margin-left: 20%;
    padding: 2rem;
    .container-inner {
      max-width: 1200px;
      margin-right: auto;
    }
  }
  .section-title {
    position: relative;
    z-index: 1;
    padding-top: 10rem;
    & h3 {
      font-size: 3rem;
      border-bottom: 2px solid #ffffff;
      padding-bottom: 1rem;
      margin-bottom: 2rem;
    }
    &::before {
      content: 'MESSAGE';
      position: absolute;
      top: 0;
      right: 0;
      color: #345737;
      font-size: 10rem;
      line-height: 1;
      font-weight: bold;
      text-align: right;
    }
  }
  .text-wrapper {
    .text {
      margin-bottom: 2rem;
    }
    .name {
      font-size: 1.2rem;
      text-align: right;
    }
  }
}
.page-company .page-content section.company-info {
  padding: 5rem 0;
  position: relative;
  margin-bottom: 5rem;
  &::before {
    position: absolute;
    top: 0;
    right: 0;
    content: '';
    width: 20%;
    height: 100%;
    background-color: #ffffff;
  }
  .section-title-wrapper {
    /* padding-right: calc(20% + 2rem); */
    margin-right: 20%;
    padding-right: 2rem;
  }
  .section-title {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    position: relative;
    z-index: 1;
    padding-top: 10rem;
    & h3 {
      font-size: 3rem;
      border-bottom: 2px solid #ffffff;
      padding-bottom: 1rem;
      margin-bottom: 2rem;
      text-align: right;
    }
    &::before {
      content: 'COMPANY';
      position: absolute;
      top: 0;
      left: 0%;
      color: #345737;
      font-size: 9rem;
      line-height: 1;
      font-weight: bold;
      text-align: right;
    }
  }
  .container {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 1200px;
    margin: auto;
  }
  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
    .img {
      width: 50%;
    }
    .text {
      width: 50%;
      padding: 2rem 5% 2rem 0;
      .table {
        margin-bottom: 3rem;
        .row {
          display: flex;
          align-items: center;
          border-bottom: 1px solid #ffffff;
          padding-bottom: 0.5rem;
          margin-bottom: 1rem;
        }
        .th {
          width: 25%;
        }
        .td {
          width: 75%;
        }
      }
    }
  }
}
@media screen and (max-width: 960px) {
  .page-company .page-content section.message {
    padding: 2rem 0 5rem;
    &::before {
      width: 10%;
    }
    .container {
      margin-left: 10%;
      padding: 2rem;
    }
    .section-title {
      padding-top: 3.5rem;
      & h3 {
        font-size: 2rem;
      }
      &::before {
        /* MESSAGE */
        font-size: 3.25rem;
      }
    }
    .text-wrapper {
      .text {
      }
      .name {
      }
    }
  }
}
@media screen and (max-width: 960px) {
  .page-company .page-content section.company-info {
    padding: 2rem 0 5rem;
    &::before {
      width: 10%;
    }
    .section-title-wrapper {
      margin-right: 10%;
      padding-right: 2rem;
    }
    .section-title {
      padding-top: 3.5rem;
      & h3 {
        font-size: 2rem;
      }
      &::before {
        /* COMPANY */
        font-size: 3.25rem;
      }
    }
    .container {
      margin-right: 10%;
      padding: 0 5%;
    }
    .flex {
      flex-direction: column-reverse;
      .img {
        width: 100%;
        max-width: 460px;
      }
      .text {
        width: 100%;
        padding: 0;
        .table {
          font-size: 0.9rem;
          .row {
            flex-direction: column;
          }
          .th {
            width: 100%;
          }
          .td {
            width: 100%;
          }
        }
      }
    }
  }
}

/*=========================
  recruit
=========================*/
.page-recruit .page-content section.recruit-content {
  padding: 5rem 0;
  .section-title {
    position: relative;
    z-index: 1;
    /* width: 80%; */
    margin-left: auto;
    padding-top: 8rem;
    &::before {
      content: 'RECRUIT';
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      color: #345737;
      font-size: 5rem;
      line-height: 1;
      font-weight: bold;
      text-align: right;
    }
  }
  .text-wrapper {
    width: 90%;
    max-width: 1000px;
    margin: auto;
    margin-bottom: 5rem;
  }
  .table-wrapper {
    width: 90%;
    max-width: 800px;
    margin: auto;
    .table-title {
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
    }
    .table {
      border: 1px solid #ffffff;
      .row {
        border-bottom: 1px solid #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        &:last-of-type {
          border-bottom: none;
        }
      }
      .th {
        width: 30%;
        padding: 1rem;
        border-right: 1px solid #ffffff;
      }
      .td {
        width: 70%;
        padding: 1rem;
      }
    }
  }
}
@media screen and (max-width: 960px) {
  .page-recruit .page-content section.recruit-content {
    padding: 2rem 0 5rem;
    .section-title {
      &::before {
        font-size: 4rem;
      }
    }
    .table-wrapper {
      .table {
        font-size: 0.9rem;
        .th {
          padding: 1rem;
        }
        .td {
          padding: 0.5rem;
        }
      }
    }
  }
}

/*=========================
  contact
=========================*/
.page-contact .page-content section.contact-content {
  padding: 5rem 0;
  .red {
    color: #ff0000;
  }
  .section-title {
    position: relative;
    z-index: 1;
    margin-left: auto;
    padding-top: 8rem;
    &::before {
      content: 'CONTACT';
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      color: #345737;
      font-size: 5rem;
      line-height: 1;
      font-weight: bold;
      text-align: right;
    }
  }
  .text-wrapper {
    width: 90%;
    max-width: 1000px;
    margin: auto;
    text-align: center;
    margin-bottom: 5rem;
    .title {
      font-size: 2rem;
      font-weight: bold;
      margin-bottom: 2rem;
    }
    .text {
      text-align: center;
      margin-bottom: 2rem;
    }
    > a.tel {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.75rem;
      .icon {
        width: 30px;
        margin-right: 1rem;
        margin-top: 3px;
      }
    }
  }
  .form-wrapper {
    width: 90%;
    max-width: 700px;
    margin: auto;
    margin-bottom: 5rem;
    .form {
      width: 100%;
    }
    .form-item {
      display: flex;
      border-bottom: 1px solid #ffffff;
      .label-area {
        width: 40%;
        border-right: 1px solid #ffffff;
        padding: 1rem;
      }
      .input-area {
        width: 60%;
        padding: 1rem;
        & input:not([type='radio']),
        & textarea {
          width: 100%;
          border-radius: 5px;
          padding: 0.25rem;
        }
      }
      &:last-of-type {
        margin-bottom: 3rem;
        border-bottom: none;
      }
    }
    .button {
      background-color: transparent;
      color: #ffffff;
      cursor: pointer;
      font-size: 1.1rem;
      font-weight: normal;
      &:hover {
        background-color: #ffffff;
        color: var(--main);
      }
    }
  }
}
@media screen and (max-width: 960px) {
  .page-contact .page-content section.contact-content {
    padding: 2rem 0;
    .section-title {
      &::before {
        font-size: 4rem;
      }
    }
    & .text-wrapper {
      .title {
        font-size: 1.25rem;
        margin-bottom: 2rem;
      }
    }
    .form-wrapper {
      .form-item {
        flex-direction: column;
        margin-bottom: 1.5rem;
        .label-area {
          width: 100%;
          border-right: none;
          padding: 0;
          margin-bottom: 0.5rem;
        }
        .input-area {
          width: 100%;
          padding: 0;
          margin-bottom: 1rem;
        }
      }
    }
  }
}