/*==============================================================
reason
==============================================================*/

.reason {
  .cont {
    padding: 80px 0;

    .box {
      max-width: 100%;
      margin: 0 auto 0 0;
      width: 100%;

      .item-cont {
        display: flex;
        flex-direction: column;
        gap: 64px;
        position: relative;
        z-index: 1;

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

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

        .item {
          display: flex;
          align-items: center;
          gap: 64px;
          position: relative;
          z-index: 1;
          background: #fff;
          border-radius: 0 600px 600px 0;

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

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

          &.reverse {
            flex-direction: row-reverse;
            border-radius: 600px 0 0 600px;

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

            .left {
              padding: 10px 0 10px 32px;
              border-radius: 600px 0 0 600px;

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

              .img {
                img {
                  border-radius: 600px 0 0 600px;
                }
              }
            }

            .right {
              align-items: flex-end;

              .right-item {
                display: flex;
                flex-direction: column;
                gap: 16px;
                width: 100%;
                max-width: 80%;

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

              .ttl-cont {
                align-items: center;
              }

              .des {
                padding-left: 12%;

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

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

            .dec {
              left: 0;
              right: unset;
            }
          }

          .left {
            flex: 1;
            padding: 10px 32px 10px 0;
            background: #fbba24;
            border-radius: 0 600px 600px 0;

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

            &.c-02 {
              background: #ffe57e;
            }

            &.c-03 {
              background: #d1d931;
            }

            &.c-04 {
              background: #809f00;
            }

            &.c-05 {
              background: #ffe57e;
            }

            &.c-06 {
              background: #d1d931;
            }

            &.c-07 {
              background: #809f00;
            }

            .img {
              @media screen and (max-width: 991px) {
                height: 280px;
              }

              img {
                border-radius: 0 600px 600px 0;
              }
            }
          }

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

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

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

            .ttl-cont {
              display: flex;
              gap: 12px;

              .img {
                width: 100%;
                max-width: 48px;

                img {
                  object-fit: contain;
                }
              }

              .ttl {
                font-size: clamp(1.25rem, 0.4167rem + 1.7361vw, 2.5rem);
                font-family: "zen-maru-gothic", sans-serif;
                font-weight: 700;
                font-style: normal;
                color: #809f00;
                line-height: 1.2;
              }
            }

            .des {
              padding-left: 9%;
              width: 100%;
              max-width: 75%;

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

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

          .dec {
            position: absolute;
            right: 0;
            bottom: 0;

            .img {
              width: 100%;
              max-width: 160px;

              @media screen and (max-width: 1279px) {
                max-width: 120px;
              }

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

.item-p {
  padding-right: 5%;

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

  &.re {
    padding-left: 5%;
    padding-right: 0;

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

.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: 8px;

  .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;
  flex-direction: column;
  gap: 10px;
  padding-left: 9%;

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

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

  .pdf-cont {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .h-ttl {
    font-weight: 500;
  }
}