/*==============================================================
about-us
==============================================================*/
/*message*/
.message {
  .cont {
    padding: 120px 40px;

    @media screen and (max-width: 560px) {
      padding: 40px 16px;
    }

    .box {
      max-width: 1320px;

      .item {
        display: flex;
        align-items: center;
        gap: 120px;
        margin-top: 64px;

        @media screen and (max-width: 991px) {
          flex-direction: column;
          gap: 40px;
          margin-top: 32px;
        }

        .left {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 24px;
          align-items: center;
          padding-left: 5%;

          @media screen and (max-width: 991px) {
            padding-left: 0%;
          }

          .img {
            width: 100%;
          }

          .president-txt {
            width: 100%;
            max-width: 80%;
          }

          .president-img {
            & img {
              border-radius: 10px;
            }
          }
        }

        .right {
          flex: 1.1;
          display: flex;
          align-items: flex-end;
          justify-content: flex-start;
          flex-direction: column;
          gap: 16px;
          height: 100%;

          .img {
            width: 100%;
            aspect-ratio: 30 / 31;

            & img {
              border-radius: 10px;
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            }
          }

          .president-name-cont {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-end;
            gap: 8px;

            .president-role {
              font-family: "ab-ootori", sans-serif;
              font-weight: 400;
              font-style: normal;
              line-height: 1;
              font-size: clamp(0.875rem, 0.7917rem + 0.1736vw, 1rem);
            }

            .president-name {
              font-family: "ab-ootori", sans-serif;
              font-weight: 400;
              font-style: normal;
              line-height: 1;
              font-size: clamp(1.5rem, 1.1667rem + 0.6944vw, 2rem);
            }
          }
        }
      }
    }
  }
}

.management-policy {
  background-image: url("../assets/img/about-us/management.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 0;
  }

  .cont {
    position: relative;
    z-index: 10;
    padding: 24px 40px;

    @media screen and (max-width: 560px) {
      padding: 40px 16px;
    }

    .box {
      max-width: 1320px;

      .item {
        display: flex;
        align-items: center;
        gap: 80px;

        @media screen and (max-width: 991px) {
          flex-direction: column;
          gap: 32px;
        }

        .left {
          flex: 1;
          padding: 32px 0;

          @media screen and (max-width: 991px) {
            width: 100%;
            padding: 16px 0 0;
          }

          .txt {
            font-size: clamp(1.125rem, 0.9706rem + 0.4412vw, 1.5rem);
            font-weight: 600;
            font-family: "Noto Serif jp";

            @media screen and (max-width: 991px) {
              font-size: 32px;
            }

            @media screen and (max-width: 560px) {
              font-size: clamp(1.125rem, 0.9706rem + 0.4412vw, 1.5rem);
            }

            &.n-02 {
              padding-left: 2.5rem;

              @media screen and (max-width: 560px) {
                padding-left: 0rem;
              }
            }
            &.n-03 {
              padding-left: 4rem;

              @media screen and (max-width: 560px) {
                padding-left: 0rem;
              }
            }
          }
        }

        .right {
          flex: 1.5;
          height: max-content;

          & img {
            border-radius: 10px;
          }
        }
      }
    }
  }
}

/*----------------------会社情報----------------------*/
.information {
  background-color: #ebebeb;

  .cont {
    background-image: url("../assets/img/company/information-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 25px;
    padding: 80px 40px;

    @media screen and (max-width: 560px) {
      padding: 40px 16px;
    }

    .box {
      max-width: 1320px;

      .corp-cont {
        display: flex;
        width: 100%;
        max-width: 90%;
        margin: 0 auto;
        flex-direction: column;
        gap: 16px;

        @media screen and (max-width: 991px) {
          max-width: 100%;
        }
      }

      .under-ttl {
        border-bottom: 1px solid #ccc;
        padding-bottom: 24px;
      }

      .corp-name {
        width: 100%;
        padding-bottom: 16px;
        padding-left: 16px;

        @media screen and (max-width: 991px) {
          padding-left: 0px;
        }
      }

      .corp-name img {
        width: auto;
        max-height: 48px;
      }

      & tbody {
        width: 100%;
        border-bottom: 1px solid #ccc;
      }

      & tr {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;

        @media screen and (max-width: 991px) {
          flex-direction: column;
        }
      }

      & th,
      & td {
        padding: 40px;

        @media screen and (max-width: 991px) {
          padding: 0;
        }
      }

      & th {
        flex: 1;
        color: #0135af;
        white-space: nowrap;

        @media screen and (max-width: 991px) {
          width: 100%;
          padding: 6px 8px 2px;
        }
      }

      & td {
        flex: 7;

        @media screen and (max-width: 991px) {
          width: 100%;
          padding: 2px 16px 6px 24px;
        }

        .maker {
          display: flex;
          gap: 24px;

          @media screen and (max-width: 560px) {
            flex-direction: column;
            gap: 0px;
          }
        }
      }

      & td img {
        width: 100%;
        max-height: 64px;
      }

      .table-flex {
        display: flex;
        gap: 16px;

        @media screen and (max-width: 991px) {
          justify-content: center;
        }
      }

      .info-map-cont {
        width: 100%;
        display: flex;
        margin-top: 40px;
        gap: 24px;

        @media screen and (max-width: 991px) {
          margin-top: 24px;
          justify-content: center;
          flex-direction: column;
        }
      }

      .info-map {
        width: 100%;
      }

      .place-name {
        background-color: #7d7d7d;
        padding: 4px 16px;
        border-radius: 50px;
        margin-bottom: 8px;
        font-weight: 600;
        color: #fff;
      }

      .info-map-cont iframe {
        width: 100%;
        height: 460px;
        display: flex;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

        @media screen and (max-width: 991px) {
          width: 100%;
          justify-content: center;
          height: 320px;
        }
      }
    }
  }
}

/*----------------------アクセス----------------------*/
.access {
  background: #fff;
  .cont {
    .box {
      max-width: 1320px;

      .item {
        & iframe {
          display: block;
          width: 100%;
          border-radius: 20px;

          @media screen and (max-width: 560px) {
            height: 300px;
          }
        }
      }
    }
  }
}