@import "./common.css";
@import "./header.css";
@import "./footer.css";

.wrapper .pc_nav .gnav ul li.gnav-about {
  background-size: 100% 2px;
}
header {
  background: var(--sub-bg-color);
  .wrapper.sp {
    background: var(--sub-bg-color);
  }
}
.section {
  margin-bottom: 144px;
  &:last-child {
    margin-bottom: 0;
  }
}
.notice {
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-middle);
}
.section.title {
  height: 400px;
  padding-top: 0;
  margin-bottom: 100px;
  font-size: var(--font-size-xl);
  background: var(--sub-bg-color);
  .wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    padding: 140px 0 0 40px;
    margin: 0 auto;
  }
}
.icon-komechan {
  position: absolute;
  bottom: 48px;
  right: 40px;
  width: 16%;
  max-width: 202px;
  height: auto;
  z-index: 1;
  img {
    width: 100%;
    height: auto;
  }
}
.h1 {
  font-family: "Noto Sans JP", sans-serif;
}
.h2 {
  height: auto;
  line-height: 3rem;
  font-family: "Noto Sans JP black", sans-serif;
  font-size: var(--font-size-3xl);
}
.intro .inner p:first-child {
  margin-bottom: 2rem;
}

.intro,
.merit {
  .inner {
    width: 100%;
  }
  p {
    margin-bottom: 2rem;
    font-weight: var(--font-weight-middle);
    line-height: 1.8rem;
  }
}
.accordion {
  max-width: 100%;
  border-radius: 5px;
  overflow: hidden;

  /* アコーディオンアイテム */
  .accordion-item {
    background: white;
    border-radius: 9999px;
    margin-bottom: 10px;

    &:has(.accordion-radio:checked) {
      border-radius: 20px;
    }
  }

  /* ラベルをボタンのようにする */
  .accordion-header {
    padding: 14px;
    margin-left: 0.8rem;
    cursor: pointer;
    display: block;
    font-family: "Noto Sans JP", sans-serif;
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-middle);

    &::before {
      content: "";
      position: relative;
      top: -4px;
      display: inline-block;
      width: 0.6rem;
      height: 0.6rem;
      margin-right: 1rem;
      border-top: 2px solid var(--sub-color);
      border-right: 2px solid var(--sub-color);
      -webkit-transform: rotate(135deg);
      transform: rotate(135deg);
    }
    &:has(+ .accordion-radio:checked) {
      &::before {
        top: 2px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }
    }
  }

  /* チェックボックスは非表示 */
  .accordion-radio {
    display: none;
  }

  /* アコーディオンの内容 */
  .accordion-content {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease-out;
    padding: 0;
    background: #fff;
    border-radius: 20px;
    font-size: var(--font-size-small);
  }

  /* :checked を使って開閉を制御 */
  .accordion-radio:checked + .accordion-content {
    height: auto;
    overflow: visible;
    padding: 0;
  }
}
.flowchart-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  padding: 4rem 2.4rem;
  border-bottom: 1px solid #ccc;
  &:last-child {
    border-bottom: none;
  }
  &:nth-child(1) img {
    width: 50%;
  }
  &:nth-child(2) img,
  &:nth-child(3) img,
  &:nth-child(5) img {
    width: 90%;
  }
  &:nth-child(4) img {
    width: 60%;
  }
  &:nth-child(6) img {
    width: 45%;
  }
  &:nth-child(7) img {
    width: 35%;
  }
  .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    max-width: 240px;
    height: 200px;
    max-height: 200px;
    img {
      height: auto;
    }
  }
  .description {
    width: 70%;
    height: auto;
    margin-bottom: 0;
    margin-left: 3rem;
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-middle);
    line-height: 1.2rem;
    p {
      margin-bottom: 0;
    }
    .tit {
      margin-bottom: 1rem;
      font-family: "Noto Sans JP black", sans-serif;
      font-size: var(--font-size-large);
      font-weight: var(--font-weight-bold);
      margin-bottom: 0.5rem;

      .numbering {
        color: var(--sub-bg-color);
      }
    }
  }
}
.faq {
  .faq-item {
    display: flex;
    flex-direction: column;
    justify-content: center;

    height: 176px;
    padding: 1.9% 4%;
    border-bottom: 1px solid #ccc;
  }
  .que,
  .ans {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;

    &::before {
      content: "";
      display: block;
      flex-shrink: 0;
      width: 48px;
      height: 30px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
  }
  .que {
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-logo);
    margin-top: 2rem;
    margin-bottom: 1rem;
    &::before {
      margin-top: -0.2rem;
      background-image: url("../img/icon/icon_faq_Q.png");
    }
  }
  .ans {
    font-size: var(--font-size-small);
    line-height: 1rem;
    &::before {
      margin-top: -0.4rem;
      background-image: url("../img/icon/icon_faq_A.png");
    }
  }
}
.products {
  .inner {
    .items {
      display: flex;
      flex-wrap: wrap;
      gap: 0.48%;
    }
    .item {
      width: 180px;
      height: 144px;
      margin-bottom: 0.4rem;
      background: white;
      border-radius: 5px;
      overflow: hidden;

      img {
        width: 100%;
      }
      &:hover {
        img {
          transform: scale(1.1);
          transition: transform 0.2s ease;
        }
      }
    }
  }
}
.price {
  .box-mb {
    margin-bottom: 4rem;
  }
  .flex-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 1rem;
    p {
      font-family: "Noto Sans JP black", sans-serif;
      font-size: var(--font-size-xl);
      font-weight: var(--font-weight-bold);
    }
    .border {
      width: 200px;
      height: 1px;
      margin: 0 2rem;
      background: var(--sub-color);
    }
  }
}
.contact {
  .wrapper-top {
    display: flex;
    justify-content: space-between;
  }
  .inner {
    margin-bottom: 48px;

    .btn-list-wrapper {
      display: flex;
      justify-content: space-between;
    }
    .btn_wrapper {
      display: flex;
      align-items: center;
      &:first-child {
        width: 224px;
        &::after {
          content: "";
          flex-grow: 1;
          height: 1px;
          background: var(--sub-color);
          margin: 0;
        }
      }
    }
    .btn {
      cursor: pointer;
      color: white;
      background: var(--sub-color);
      border: var(--sub-color) 1px solid;
      font-weight: var(--font-weight-bold);

      &:has(+ .contact-radio:checked) {
        background-color: var(--sub-bg-color);
      }
    }
  }
  .form-wrapper {
    width: 100%;
    height: auto;
    padding: 48px;
    margin-bottom: 48px;
    border-radius: 5px;
    background: white;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-normal);
    &.hidden {
      display: none;
    }
    .form {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap; /* 必要に応じて折り返し */
      width: 100%;
      height: 100%;
      gap: 0; /* 間隔 */

      label {
        width: 20%;
        .required-message::before {
          content: "\A";
          white-space: pre;
        }
      }
      input,
      textarea,
      select {
        width: 100%;
        padding: 0.5rem;
        margin-bottom: 1rem;
        border: solid 1px var(--sub-color);
        border-radius: 5px;
        font-size: var(--font-size-normal);
        font-weight: var(--font-weight-normal);
      }
      textarea {
        height: 200px;
      }
      .select-wrapper {
        display: flex;
        width: 75%;
        height: 100%;
        margin-bottom: 1rem;
        border-radius: 5px;
        position: relative;
      }
      select {
        margin-bottom: 0;
        border-left: none;
        border-radius: 0 5px 5px 0;
        option {
          width: 110%;
        }
      }
      .before-select {
        display: block;
        width: 38px;
        height: 43px;
        font-size: 1.4rem;
        text-align: center;
        border: 1px solid var(--sub-color);
        border-radius: 5px 0 0 5px;
        &::before {
          content: ">";
          position: relative;
          top: 0;
          left: -5px;
          display: block;
          width: 100%;
          height: 100%;
          -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
          transform-origin: center;
        }
        &.active::before {
          top: 0;
          left: 8px;
          -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
        }
      }
      .btn_wrapper {
        justify-content: center;
        width: 100%;
        margin-top: 24px;
      }
    }
  }
}
.access {
  line-height: 1.2rem;
  font-weight: 500;
  .wrapper-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  p {
    margin-bottom: 1rem;
  }
  .inner {
    margin-bottom: 48px;
  }
  .wrapper-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .information {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .tel {
    margin-right: 1.5rem;
  }
  .btn {
    width: fit-content;
    height: 24px;
    padding: 0 1rem;
    a {
      color: var(--main-color);
      font-weight: var(--font-weight-normal);
    }
  }
}
@media (max-width: 780px) {
  .section.title {
    height: 700px;
    .wrapper {
      padding-top: 250px;
    }
    .h1 {
      font-size: 4rem;
    }
  }
  .icon-komechan {
    width: 34.3%;
    max-width: 264px;
  }
  .intro {
    p {
      margin-bottom: 4rem;
      font-size: var(--font-size-xl);
      letter-spacing: 0.1rem;
      line-height: var(--font-size-3xl);
      &:first-child {
        margin-bottom: 4rem;
      }
    }
  }
  .flowchart-item {
    flex-direction: column;
    height: auto;
    padding: 5%;

    &:nth-child(1) .icon img,
    &:nth-child(6) .icon img {
      width: 50%;
      height: auto;
    }
    &:nth-child(4) .icon img {
      width: 70%;
      height: auto;
    }
    &:nth-child(7) .icon img {
      width: 40%;
      height: auto;
    }

    .icon {
      width: 100%;
      height: auto;
      max-width: 476px;
      min-height: 150px;
      max-height: 400px;
      margin: 2rem 0 3rem;

      img {
        width: 100%;
        height: auto;
      }
    }
    .description {
      width: 100%;
      height: auto;
      .tit {
        font-size: var(--font-size-2xl);
        line-height: 3rem;
        margin-bottom: 1.4rem;
      }
      p {
        font-size: var(--font-size-xl);
        line-height: 3rem;
      }
    }
  }
  .faq {
    .faq-item {
      height: auto;
      min-height: 334px;
      padding: 2rem 2.6rem;
      .que,
      .ans {
        align-items: flex-start;
        gap: 1.4rem;
        &::before {
          width: 60px;
          height: 48px;
          margin-top: 0rem;
        }
      }
      .que {
        font-size: var(--font-size-2xl);
        font-weight: var(--font-weight-logo);
        margin-bottom: 2.4rem;
        line-height: 3.4rem;
      }
      .ans {
        font-size: var(--font-size-xl);
        line-height: 2.4rem;
        &::before {
          margin-top: -0.8rem;
        }
      }
    }
  }
  .products {
    .inner {
      .item {
        width: 33%;
        height: 100%;
        margin-bottom: 0.4rem;
        background: white;
        border-radius: 5px;
        overflow: hidden;

        img {
          height: auto;
        }
      }
    }
  }
  .price {
    .flex-wrapper {
      p {
        font-size: var(--font-size-2xl);
      }
    }
  }
  .contact {
    .wrapper-top {
      display: block;
    }
    .inner {
      margin-bottom: 48px;

      .btn-list-wrapper {
        display: flex;
        justify-content: center;
      }
      .btn_wrapper {
        &:first-child {
          width: 300px;
        }
      }
      .btn {
        width: 230px;
        padding: 2.4rem 0;
        font-size: var(--font-size-xl);
      }
    }
    .form-wrapper {
      margin-bottom: 120px;
      .form {
        flex-direction: column;
        label {
          display: flex;
          width: 100%;
          margin-bottom: 0.6rem;
          font-size: var(--font-size-xl);
          .required-message {
            font-size: var(--font-size-small);
            margin-left: 0.8rem;
          }
        }
        input,
        textarea,
        select {
          padding: 0.8rem;
          font-size: var(--font-size-xl);
          color: var(--sub-color);
        }
        textarea {
          height: 200px;
        }
        .select-wrapper {
          width: 100%;
        }
        select {
          height: 47px;
          font-size: var(--font-size-large);
        }
        .before-select {
          height: 47px;
          &::before {
            left: -8px;
          }
        }
        .btn {
          width: 236px;
          padding: 2rem;
          font-size: var(--font-size-large);
        }
      }
    }
  }
  .notice {
    font-size: var(--font-size-normal);
    line-height: 1.8rem;
  }
}
@media (max-width: 480px) {
  .section {
    padding: 0 24px;
    margin-bottom: 70px;
    &:last-of-type {
      margin-bottom: 0;
    }
    &.title {
      height: 600px;
      padding-top: 90px;
      margin-bottom: 42px;
      .wrapper {
        padding-top: 125px;
      }
    }
  }
  .h2.jp {
    margin-bottom: 24px;
  }
  .wrapper {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .intro {
    .h2 {
      margin-bottom: 24px;
    }
  }
  .accordion {
    .accordion-header {
      font-size: var(--font-size-large);
    }
    .accordion-content {
      padding: 0;
    }
  }
  .price {
    .flex-wrapper {
      .border {
        width: 10%;
        margin: 0 0.2rem;
      }
    }
  }
  .contact {
    .form-wrapper {
      padding: 24px;
      margin-bottom: 1rem;
    }
  }
}