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

.wrapper .pc_nav .gnav ul li.gnav-about {
  background-size: 100% 2px;
}
.section {
  margin-bottom: 144px;
}
.intro {
  .inner {
    width: 100%;
  }
  p {
    font-weight: var(--font-weight-normal);
    line-height: 1.8rem;
    &:first-child {
      margin-bottom: 48px;
    }
  }
  dl {
    display: flex;
    flex-wrap: wrap; /* 必要に応じて折り返し */
    gap: 12px; /* 間隔 */
    font-size: var(--font-size-small);
  }
  dt {
    font-weight: var(--font-weight-middle);
  }
  dd {
    margin: 0; /* デフォルトの余白を削除 */
  }

  .member {
    width: 100%;
    margin-bottom: 48px;
    dt,
    dd {
      display: flex;
      align-items: center;
      padding: 5px 0;
      margin: 0;
    }
    dt {
      width: 48%;
      min-width: 383px; /* タイトルの幅を統一 */
      &::after {
        content: "";
        flex-grow: 1;
        height: 1px;
        background: #000;
        margin: 0 12px;
      }
    }
    dd {
      width: 41%;
    }
  }
  .about-staff {
    .staff {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin: 48px 0;
      padding: 0 40px 40px;

      .profile {
        display: flex;
        gap: 12px; /* 間隔 */
        flex: 1 0 0%;
        height: 48px;
        margin-bottom: 30px;
        img {
          width: 48px;
          object-fit: cover;
        }
      }
      .name {
        display: flex;
        flex-direction: column;
        font-size: var(--font-size-logo);
        font-weight: var(--font-weight-titleJP);
        .rb {
          color: var(--sub-bg-color);
          font-size: var(--font-size-cat);
          font-weight: var(--font-weight-middle);
        }
      }
      .description {
        width: 98%;
        line-height: 1.2rem;
        padding-right: 3rem;
        padding-left: 0.5rem;
      }
      .items {
        display: flex;
        flex-wrap: wrap;
        min-width: 318px;
        margin-bottom: 24px;
        gap: 3px; /* 間隔 */
        font-size: var(--font-size-small);

        li {
          overflow: hidden;
          width: 32%;
          img {
            width: 100%;
            max-width: 102px;
            height: auto;
            transition: transform 0.2s ease;
          }
          &:hover img {
            transform: scale(1.1);
          }
        }
      }
      .link_wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .sns {
          gap: 12px; /* 間隔 */
        }
        .btn_normal {
          width: 240px;
        }
        .sns {
          li {
            border-radius: 50%;
            &:hover {
              opacity: 0.8;
            }
          }
        }
      }
    }
  }
  .about-work {
    .wrap {
      padding: 3rem;
    }
    h3 {
      margin-bottom: 48px;
      font-size: var(--font-size-xl);
      font-weight: var(--font-weight-titleJP);
    }
    p {
      margin-bottom: 1rem;
    }
    .boxes {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      padding: 2rem 0;
    }
    .box {
      display: flex;
      flex-direction: column;
      flex: 1 1 0%;
      justify-content: center;
      align-items: center;
      text-align: center;
      gap: 0;
      border: var(--sub-color) 1px solid;
      border-radius: 8px;
      width: 184px;
      height: 48px;
      padding: 0.2rem 0;
      font-size: var(--font-weight-bold);
      &.box-black {
        background: var(--sub-color);
        color: white;
      }
    }
    .boxes.arrows {
      .box-black {
        padding: 2rem;
      }
      .arrow {
        position: relative;
        top: 37px;
        width: 12px;
        height: 12px;
        border-top: 3px solid var(--sub-color);
        border-right: 3px solid var(--sub-color);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
      }
    }
  }
  .about-company {
    dl {
      padding: 38px 48px 48px 48px;
    }
    dt {
      min-width: 20%; /* タイトルの幅を統一 */
      min-height: 54px;
    }
    dd {
      height: auto; /* 高さを自動調整 */
      width: 78%;
      padding: 0;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      padding: 0;
    }
    li {
      width: 300px;
      margin-bottom: 1rem;
    }
  }
  .about-media {
    ul {
      padding: 24px;
    }
    li {
      font-size: var(--font-size-large);
      padding-left: 1rem;
      margin-bottom: 1rem;
      text-indent: -2rem;
      &::before {
        content: "●";
        margin-left: 1rem;
        font-size: var(--font-size-small);
      }
    }
  }
}
.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: 10px;
    margin-left: 0.8rem;
    cursor: pointer;
    display: block;
    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;
  }
}

.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: var(--sub-color);
      background: var(--main-color);
      border: var(--sub-color) 1px solid;
      font-weight: var(--font-weight-bold);

      &:has(+ .contact-radio:checked) {
        background-color: var(--sub-bg-color);
      }
    }
  }
  .mailaddress {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 320px;
    margin-bottom: 24px;
    border-radius: 5px;
    background: white;
    font-weight: var(--font-weight-bold);
    font-size: 2.8rem;
    &.hidden {
      display: none;
    }
  }
  .form-wrapper {
    width: 100%;
    height: auto;
    margin-bottom: 48px;
    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; /* 間隔 */
      padding: 64px 48px;
      margin-bottom: 24px;
      background: white;
      border-radius: 5px;

      .input-wrapper,
      .textarea-wrapper {
        &.required {
          display: flex;
          width: 100%;
          position: relative;
          margin-bottom: 1rem;
        }
      }
      .input-wrapper {
        label .error-message {
          bottom: 0.5rem;
        }
      }
      .textarea-wrapper {
        label .error-message {
          top: 0.5rem;
        }
      }
      label {
        display: flex;
        flex-direction: column;
        width: 15%;

        .required-message {
          font-size: var(--font-size-cat);
        }
        .error-message {
          position: absolute;
          right: 0.4rem;
          font-size: var(--font-size-small);
          background: var(--sub-bg-color);
          width: auto;
          padding: 3px;
          text-align: center;
          color: white;
          border-radius: 5px;
        }
      }
      input,
      textarea,
      select {
        width: 85%;
        padding: 0.5rem;
        border: solid 1px var(--sub-color);
        border-radius: 5px;
        font-size: var(--font-size-normal);
        font-weight: var(--font-weight-normal);
      }
      textarea {
        height: 200px;
        margin-bottom: 1rem;
        .error-message {
          top: 0.5rem;
          bottom: inherit;
        }
      }
      .select-wrapper {
        display: flex;
        width: 85%;
        height: 100%;
        margin-bottom: 1rem;
        border-radius: 5px;
        position: relative;
      }
      select {
        width: 100%;
        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 {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 24px;
      }
    }
  }
  .successfully {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 736px;
    margin-bottom: 24px;
    background: white;
    border-radius: 5px;

    .img-wrapper {
      margin-bottom: 90px;
    }
    .tit {
      font-size: var(--font-size-large);
      font-weight: var(--font-weight-bold);
      margin-bottom: 30px;
    }
    p {
      font-size: var(--font-size-small);
      line-height: 2rem;
    }
    .btn_wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin-top: 30px;
      .btn {
        box-sizing: content-box;
        padding: 0 1rem;
      }
    }
  }
}
.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);
    }
  }
}
.map {
  width: 100%;
  height: 480px;
}
.personal {
  width: 100%;
  padding: 104px 0 96px;
  margin-bottom: 0;
  background-color: var(--sub-bg-color);

  .wrapper {
    width: 100%;
    padding: 0 40px;
    margin: 0 auto;
  }

  .inner {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 48px;
  }
  .btn_wrapper {
    .btn {
      margin: 0 auto;
    }
  }
}
@media (max-width: 780px) {
  .intro {
    .h2 {
      font-family: "Rubik", sans-serif;
      font-weight: var(--font-weight-logo);
    }
    p {
      font-weight: var(--font-weight-normal);
      font-size: var(--font-size-xl);
      line-height: calc(var(--font-weight-large) * 1.2);
      &:first-child {
        margin-bottom: 48px;
      }
    }
    .member {
      width: 100%;
      margin-bottom: 48px;
      dl {
        display: block;
        font-size: var(--font-size-large);
      }
      dt {
        width: 100%;
        font-weight: var(--font-weight-logo);
        padding: 0;
        &::after {
          content: "";
          flex-grow: 0;
          height: 0;
          background: #000;
          margin: 0;
        }
      }
      dd {
        width: 41%;
        padding: 0;
        margin-bottom: 1.4rem;
      }
    }
    .accordion {
      .accordion-header {
        font-size: var(--font-size-large);
        font-weight: var(--font-weight-middle);
        padding: 1rem;
      }
      .accordion-content {
      }
    }
    .about-staff {
      .staff {
        flex-direction: column;

        .profile {
          img {
            width: 52px;
            height: 52px;
            margin-right: 1rem;
          }
          p {
            font-family: "Noto Sans JP black", sans-serif;
            font-size: var(--font-size-2xl);
            font-weight: var(--font-weight-titleJP);
            margin-bottom: 0.6rem;
            letter-spacing: 0.2rem;
          }
          .rb {
            font-family: "Noto Sans JP", sans-serif;
            font-size: var(--font-size-normal);
            font-weight: var(--font-weight-lighter);
            color: var(--sub2-color-dark);
            letter-spacing: 0rem;
          }
        }

        .description {
          font-size: var(--font-size-large);
          width: 100%;
          min-width: auto;
          margin-bottom: 2.4rem;
          line-height: 2.4rem;
        }
        .staff-works {
          width: 100%;
        }
        .items {
          width: 100%;
          justify-content: space-between;
          margin-bottom: 3.6rem;

          li {
            width: 30%;
          }
        }
        .link_wrapper {
          .sns {
            gap: 12px; /* 間隔 */
          }
          .btn_wrapper {
            width: 65%;
          }
          .btn_normal {
            width: 100%;
            padding: 2.4rem 0;
            font-size: var(--font-size-xl);
          }
          .sns {
            width: 30%;
            ul {
              justify-content: space-between;
              width: 100%;
            }
            li {
              width: 40%;
              text-align: right;
              border-radius: 50%;
              &:hover {
                opacity: 0.8;
              }
              img {
                width: 80%;
              }
            }
          }
        }
      }
    }
    .about-work {
      .boxes {
        justify-content: center;
        padding: 2rem 0;

        &.arrows .arrow {
          top: 59px;
          width: 18px;
          height: 18px;
          border-width: 5px;
        }

        .box {
          display: flex;
          flex: 0;
          padding: 0;
          min-width: 170px;
          min-height: 128px;
          font-size: var(--font-size-xl);
        }
      }
    }
    .about-company {
      dl {
        gap: 0;
        padding: 16px 48px 48px 48px;
        font-size: var(--font-size-large);
      }
      dt {
        height: auto;
        min-width: 20%; /* タイトルの幅を統一 */
        padding: 0;
        padding-top: 20px;
        box-sizing: content-box;
        border-bottom: #ccc 1px solid;

        &:last-of-type {
          border-bottom: none;
        }
      }
      dd {
        padding-top: 20px;
        box-sizing: content-box;
        border-bottom: #ccc 1px solid;

        &:last-child {
          border-bottom: none;
        }

        ul {
          display: block;
          gap: 1rem;
          margin: 0;
          list-style: none;
        }
        li {
          width: 100%;
          margin-bottom: 0.5rem;
        }
      }
      .taller {
        height: 5rem;
      }
    }
  }
  .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);
      }
    }
    .mailaddress p {
      width: 100%;
      text-align: center;
      font-size: 5vw;
    }
    .form-wrapper {
      .form {
        flex-direction: column;

        .input-wrapper,
        .textarea-wrapper {
          flex-direction: column;
        }
        .input-wrapper label .error-message {
          bottom: 0.7rem;
        }
        .textarea-wrapper label .error-message {
          top: 3.5rem;
        }

        label {
          flex-direction: row;
          align-items: flex-end;
          width: 100%;
          margin-bottom: 0.8rem;
          font-size: var(--font-size-xl);

          .required-message {
            font-size: var(--font-size-normal);
            margin-left: 0.8rem;
          }
          .error-message {
            padding: 5px;
            font-size: var(--font-size-normal);
          }
        }
        input,
        textarea,
        select {
          width: 100%;
          padding: 0.8rem;
          font-size: var(--font-size-xl);
        }
        textarea {
          height: 200px;
        }
        .select-wrapper {
          width: 100%;
        }
        select {
          font-size: var(--font-size-large);
          border-radius: 0 5px 5px 0;
        }
        .before-select {
          height: 47px;
          border-radius: 5px 0 0 5px;
          &::before {
            left: -8px;
          }
        }
        .btn {
          width: 236px;
          padding: 2rem;
          font-size: var(--font-size-large);
        }
      }
    }
    .successfully {
      height: 576px;
      .img-wrapper img {
        width: 80%;
      }
      .tit {
        font-size: var(--font-size-2xl);
      }
      p {
        font-size: var(--font-weight-large);
      }
      .btn_wrapper {
        .btn {
          width: 236px;
          padding: 0.5rem 2rem;
          font-size: var(--font-size-large);
        }
      }
    }
  }
  .access {
    margin-bottom: 20px;
    line-height: 1.2rem;
    font-size: var(--font-size-3xl);
    font-weight: 500;
    p {
      margin-bottom: 1rem;
      font-size: var(--font-size-3xl);
      line-height: 3rem;
    }
    .inner {
      margin-bottom: 48px;
    }
    .information {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      font-family: "Noto Sans JP", sans-serif;
      font-weight: var(--font-weight-logo);
      margin-right: 1.5rem;
    }
    .tel {
    }
    .btn {
      width: 200px;
      height: 43px;
      padding: 1rem;
      font-size: var(--font-size-large);
      a {
        color: var(--main-color);
        font-weight: var(--font-weight-normal);
      }
    }
  }
  .personal {
    .inner {
      p {
        font-size: var(--font-size-2xl);
      }
    }
    .btn {
      width: 280px;
      height: 60px;
      padding: 1rem;
      font-size: var(--font-size-large);
      a {
        color: var(--main-color);
        font-weight: var(--font-weight-normal);
      }
    }
  }
}
@media (max-width: 480px) {
  .section {
    padding: 0 24px;
    margin-bottom: 70px;
    &:last-of-type {
      margin-bottom: 0;
    }
    &.title {
      padding-top: 90px;
      margin-bottom: 42px;
    }
  }
  .h2.jp {
    margin-bottom: 24px;
  }
  .wrapper {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .intro {
    .h2 {
      margin-bottom: 24px;
    }
    .member {
      dt {
        display: block;
        min-width: 100%;
      }
      dd {
        width: 100%;
      }
    }
    .accordion-content {
      padding: 0;
    }
    .about-staff {
      .staff {
        padding: 24px 12px 40px;
        margin: 0;

        .link_wrapper {
          .btn_normal {
            font-size: var(--font-size-large);
          }
        }
      }
    }
    .about-work {
      .wrap {
        padding: 0;
      }
      .h3 {
        padding: 12px 24px;
        margin-bottom: 0;
      }
      p {
        padding: 0 24px;
        &:last-of-type {
          padding-bottom: 36px;
        }
      }
      .boxes {
        justify-content: center;
        padding: 2rem 0;

        &.arrows {
          .box {
            min-width: 90px;
            padding: 1rem;
          }
          .arrow {
            top: 28px;
            width: 10px;
            height: 10px;
            border-width: 2px;
          }
        }

        .box {
          display: flex;
          flex: 0;
          padding: 0;
          min-width: 100px;
          min-height: 68px;
          font-size: var(--font-size-normal);
        }
      }
    }
    .about-company {
      dl {
        padding: 16px 12px 24px;
      }
      dt {
        min-width: 20%; /* タイトルの幅を統一 */
      }
      dd:last-of-type {
        width: 100%;
      }
      .taller {
        height: 8rem;
      }
    }
  }
  .contact {
    .wrapper-top {
      display: block;
    }
    .inner {
      margin-bottom: 48px;

      .btn-list-wrapper {
        display: flex;
        justify-content: center;
      }
      .btn_wrapper {
        &:first-child {
          width: 200px;
        }
      }
      .btn {
        width: 150px;
      }
    }
    .form-wrapper {
      .form {
        input,
        textarea,
        select {
          width: 100%;
        }
      }
    }
  }
  .access {
    .inner {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      gap: 24px 0;
      margin: 0 auto 48px;
    }
    .wrapper-bottom {
      display: flex;
      flex-direction: column;
      gap: 24px 0;
      width: auto;
    }
  }
  .personal {
    padding: 50px 24px;
  }
}