/*==============================================================
about-us
==============================================================*/
/*message*/
.message {
  .cont {
    padding: 80px 32px;

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

    .box {
      max-width: 1080px;

      .item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 40px;

        @media screen and (max-width: 480px) {
          gap: 16px;
        }

        .item-img {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          gap: 120px;

          @media screen and (max-width: 480px) {
            gap: 16px;
            position: relative;
          }

          .left {
            flex: 1;
            @media screen and (max-width: 480px) {
              position: absolute;
              bottom: 0;
              left: 0;
            }

            .img {
              @media screen and (max-width: 480px) {
                z-index: 1;
                width: 100%;
                max-width: 64px;
              }
            }
          }

          .right {
            flex: 3;
            display: flex;
            flex-direction: column;
            gap: 16px;

            @media screen and (max-width: 480px) {
              position: relative;
            }

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

            .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);
              }
            }
          }
        }

        .item-txt {
          display: flex;
          align-items: flex-end;
          gap: 120px;

          @media screen and (max-width: 480px) {
            gap: 0px;
            position: relative;
          }

          .left {
            flex: 3;
            display: flex;
            flex-direction: column;
            gap: 8px;
            height: 100%;

            .txt {
              .ttl {
                font-family: "zen-maru-gothic", sans-serif;
                font-style: normal;
                font-size: clamp(1.4375rem, 0.3958rem + 2.1701vw, 3rem);
                font-weight: 900;
                color: #fbba24;
              }
              .des {
              }
            }
          }

          .right {
            flex: 1;

            @media screen and (max-width: 480px) {
              position: absolute;
              bottom: -50px;
              right: -20px;
            }

            .img {
              @media screen and (max-width: 480px) {
                z-index: 1;
                width: 100%;
                max-width: 100px;
              }
            }
          }
        }
      }
    }
  }
}

.middle-img {
  margin-bottom: -24px;
  position: relative;
  z-index: 1;

  @media screen and (max-width: 480px) {
    margin-bottom: 0px;
  }
}

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

  .cont {
    padding: 80px 32px;

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

    .box {
      max-width: 1080px;

      .under-ttl {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;

        .ttl-jp-cont {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 12px;

          .img {
            width: 100%;
            max-width: 40px;
          }
        }
      }

      .corp-cont {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

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

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

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

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

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

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

      th,
      td {
        padding: 40px;

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

      th {
        flex: 1;
        color: #fbba24;
        white-space: nowrap;

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

      td {
        flex: 7;

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

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

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

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

  .modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .modal-overlay.active {
    display: flex;
    opacity: 1;
  }

  .modal-inner {
    position: relative;
    max-width: 50%;
    max-height: 70%;

    @media screen and (max-width: 1280px) {
      max-width: 70%;
    }

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

    @media screen and (max-width: 560px) {
      max-width: 90%;
    }
  }

  .modal-inner img {
    max-width: 100%;
    max-height: 90vh;
    display: block;
    object-fit: contain;
  }

  .modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    line-height: 1;
  }

  .pdf {
    display: flex;
    align-items: center;
    gap: 4px;

    .img {
      width: 100%;
      max-width: 20px;
    }

    button {
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      color: inherit;
      font: inherit;
      text-decoration: underline;
      transition: opacity 0.2s ease;
    }

    button:hover {
      opacity: 0.6;
    }
  }

  .haccp {
    display: flex;
    align-items: center;
    gap: 10px;

    @media screen and (max-width: 560px) {
      flex-direction: column;
      align-items: flex-start;
    }
  }
}

/*----------------------アクセス----------------------*/
.access {
  background: #fff;

  .cont {
    padding: 80px 32px;

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

    .box {
      max-width: 1080px;

      .under-ttl {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;

        .ttl-jp-cont {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 12px;

          .img {
            width: 100%;
            max-width: 40px;
          }
        }
      }

      .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;
        }
      }
    }
  }
}

/*----------------------沿革----------------------*/
.history {
  background: #fbfbfb;

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

    .box {
      max-width: 1080px;

      .under-ttl {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;

        .ttl-jp-cont {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 12px;

          .img {
            width: 100%;
            max-width: 40px;
          }
        }
      }

      .list {
        display: flex;
        flex-direction: column;
        gap: 60px;
        position: relative;

        @media screen and (max-width: 991px) {
          gap: 24px;
        }

        &::after {
          position: absolute;
          content: "";
          display: block;
          top: 50%;
          left: 1%;
          transform: translateY(-50%);
          width: 2px;
          height: 97%;
          background-color: #7e7e7e8c;
          z-index: 0;

          @media screen and (max-width: 480px) {
            left: 2%;
            height: 100%;
          }
        }

        .item {
          display: flex;
          gap: 16px;

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

          @media screen and (max-width: 480px) {
            gap: 8px;
          }

          .year-cont {
            display: flex;
            align-items: center;
            gap: 24px;
            width: 100%;
            max-width: 15%;
            z-index: 1;

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

            @media screen and (max-width: 480px) {
              gap: 12px;
            }

            .line {
              position: relative;
              content: "";
              display: block;
              width: 24px;
              height: 24px;
              background-color: #d1d931;
              border-radius: 50px;

              @media screen and (max-width: 480px) {
                width: 16px;
                height: 16px;
              }

              &::before {
                position: absolute;
                content: "";
                display: block;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 36px;
                height: 36px;
                background-color: #809f00;
                border-radius: 50px;
                z-index: -1;

                @media screen and (max-width: 480px) {
                  width: 26px;
                  height: 26px;
                }
              }
            }

            .year {
              font-size: 24px;
              color: #fbba24;
              font-weight: 600;
              line-height: 1;
            }
          }

          .detail-cont {
            flex: 1;

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

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

            .detail {
              .detail-item {
                display: flex;
                gap: 16px;

                @media screen and (max-width: 480px) {
                  gap: 4px;
                }

                .month {
                  color: #75c816;
                  font-weight: 600;
                  width: 100%;
                  max-width: 5%;

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

                  @media screen and (max-width: 480px) {
                    max-width: 12%;
                  }
                }
                .desc {
                  flex: 1;
                }
              }
            }
          }
        }
      }
    }
  }
}