/*==============================================================
HOME
==============================================================*/
.section-ttl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;

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

  .section-ttl-jp {
    font-size: clamp(1.5rem, 0.8333rem + 1.3889vw, 2.5rem);
    font-family: "zen-maru-gothic", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #fbba24;
    line-height: 1;
  }

  .section-ttl-en {
    font-size: 1rem;
    font-family: "zen-maru-gothic", sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    background-color: #333;
    border-radius: 50px;
    padding: 4px 8px;
  }
}

.btns {
  display: flex;
  justify-content: center;

  .btn {
    background: #fbba24;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    transition: 0.3s;
    border: 3px solid #ffe57e;
    position: relative;
    overflow: hidden;
    z-index: 0;

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: rgba(251, 186, 36, 0.3);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition:
        width 0.5s ease,
        height 0.5s ease;
      z-index: -1;
    }

    &:hover {
      background: #fff;
      color: #1a1a1a !important;
      transform: translateY(-3px);
      box-shadow: 0 6px 16px rgba(251, 186, 36, 0.5);

      &::before {
        width: 300px;
        height: 300px;
      }
    }

    &:active {
      transform: translateY(0);
      box-shadow: none;
    }
  }
}

/*-------------fv-------------*/
.fv {
  .fv-img {
    position: relative;

    > img,
    > picture {
      display: block;
      width: 100%;
      height: auto;
      opacity: 0;
      transition: opacity 1.5s ease;

      &:first-child {
        position: relative;
      }

      &:not(:first-child) {
        position: absolute;
        top: 0;
        left: 0;
      }

      &.active {
        opacity: 1;
      }

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

    > .fv-slide.active {
      opacity: 1;
    }

    > picture img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 1;
      transition: none;
      position: static;
    }

    .fv-content {
      position: absolute;
      bottom: 10px;
      left: 6%;
      z-index: 3;
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 100%;
      max-width: 38%;

      @media screen and (max-width: 480px) {
        max-width: 85%;
        position: unset;
        margin: 0 auto;
        margin-top: 24px;
      }

      .img {
        position: relative;

        .dec-img {
          position: absolute;
          bottom: 1%;
          left: -40%;
          z-index: -1;
          width: 100%;
          max-width: 80%;
        }
      }

      img {
        position: unset;
        top: unset;
        left: unset;
        opacity: unset;
        transition: unset;
      }
    }
  }
}

.company {
  .cont {
    padding: 80px 32px;

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

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

    .box {
      position: relative;
      z-index: 1;

      .item {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 100px;

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

        @media screen and (max-width: 480px) {
          flex-direction: column-reverse;
          align-items: center;
          gap: 24px;
        }

        .left {
          flex: 1.3;
          display: flex;
          flex-direction: column;
          gap: 40px;

          .top {
            position: relative;

            .ttl {
              font-family: "zen-maru-gothic", sans-serif;
              font-weight: 700;
              font-style: normal;
              font-size: clamp(2rem, 1rem + 2.0833vw, 3.5rem);
              line-height: 1.2;
            }

            .img {
              position: absolute;
              bottom: 0%;
              right: 0;
              /* transform: translateY(-50%); */
              width: 100%;
              max-width: 57%;
              z-index: -1;

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

              img {
                width: 100%;
              }
            }
          }

          .bottom {
            padding-left: 7rem;

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

            .des {
              margin-bottom: 32px;
            }

            .btns {
              justify-content: left;

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

        .right {
          flex: 1;
          display: flex;
          align-items: flex-end;
        }
      }

      .about-dec {
        position: absolute;
        bottom: 0;
        left: -15%;
        width: 100%;
        max-width: 240px;
        z-index: -1;

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

.service {
  background-image: url("../assets/img/home/service-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;

  .cont {
    position: relative;
    z-index: 1;
    isolation: isolate;
  }

  .box {
    max-width: 1320px;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

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

    .ttl-flex {
      display: flex;
      gap: 24px;
      justify-content: center;
      width: 100%;
      max-width: 30%;
      margin: 0 auto;

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

      .ttl-img {
        flex: 1;

        img {
          object-fit: contain;
        }
      }

      .section-ttl {
        flex: 3;
      }
    }

    .des {
      @media screen and (max-width: 480px) {
        text-align: left;
      }
    }
  }

  .panel-list {
    display: flex;
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
    gap: 40px;

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

    .panel-item {
      flex: 1;
      position: relative;
      cursor: pointer;
      text-decoration: none;
      border-radius: 500px;
      border: 10px solid #ffe57e;
      width: 100%;
      height: 100%;
      aspect-ratio: 1 / 1;
      transition: border-color 0.3s ease;

      &:hover {
        border-color: #fbba24;
      }

      @media screen and (max-width: 480px) {
        border-radius: 15px;
        aspect-ratio: 5 / 3;
        border: 4px solid #ffe57e;
      }

      .panel-img {
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 1;

        img {
          border-radius: 500px;

          @media screen and (max-width: 480px) {
            border-radius: 11px;
          }
        }
      }

      .panel-content {
        position: absolute;
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        color: #fff;
        width: 210px;
        text-align: center;

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

        .panel-title {
          font-size: 1rem;
          font-weight: bold;
          background: #fbba24;
          border-radius: 50px;
          padding: 6px 16px;
          border: 3px solid #fff;
        }
      }

      .bg-dec {
        position: absolute;
        z-index: -1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 150%;

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

      img {
        object-fit: cover;
      }
    }
  }
}

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

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

  &.m-02 {
    margin-top: -24px;

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

  .dec-img {
    position: absolute;
    top: -8%;
    right: 9%;
    width: 100%;
    max-width: 8%;

    @media screen and (max-width: 480px) {
      max-width: 16%;
      top: -15%;
      right: 4%;
    }
  }
}

.safety {
  position: relative;
  background-color: #fff;

  .cont {
    padding: 100px 32px;

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

    .box {
      max-width: 1200px;

      .section-ttl {
        position: relative;

        .dec-img {
          position: absolute;
          top: -25px;
          right: 12%;
          width: 100%;
          max-width: 130px;

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

      .item {
        display: flex;
        justify-content: space-between;
        gap: 80px;
        margin-top: 64px;

        @media screen and (max-width: 1279px) {
          margin-top: 24px;
          gap: 60px;
        }

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

        .left {
          flex: 1.3;
          position: relative;

          .dec {
            position: absolute;
            bottom: -5%;
            left: -10%;
            width: 100%;
            max-width: 40%;
          }
        }

        .right {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 32px;
          padding: 24px 0;

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

          .top {
            .ttl {
              font-family: "zen-maru-gothic", sans-serif;
              font-weight: 700;
              font-style: normal;
              font-size: clamp(1.25rem, 0.5833rem + 1.3889vw, 2.25rem);
              line-height: 1.2;

              @media screen and (max-width: 480px) {
                text-align: center;
              }
            }
          }

          .bottom {
            display: flex;
            flex-direction: column;
            gap: 40px;

            .btns {
              justify-content: right;

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

              .btn {
                background: #3e6cff;

                &::before {
                  background: rgba(255, 255, 255, 0.5);
                }
              }
            }
          }
        }
      }
    }
  }
}

.reason {
  .cont {
    margin-top: -13%;
    position: relative;
    z-index: 1;

    @media screen and (max-width: 480px) {
      justify-content: center;
      padding: 0px;
      z-index: -1;
      margin-top: 0%;
    }

    .box {
      background: #fff;
      border-radius: 600px;
      padding: 64px 32px;
      position: relative;

      @media screen and (max-width: 1279px) {
        border-radius: 120px;
        padding: 40px 32px;
      }

      @media screen and (max-width: 480px) {
        border-radius: 15px;
        padding: 40px 16px;
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .dec-left {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: 160px;

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

      .dec-right {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        max-width: 160px;

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

      .item {
        display: flex;
        gap: 80px;
        width: 100%;
        max-width: 80%;
        margin: 0 auto;
        margin-top: 24px;

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

        @media screen and (max-width: 480px) {
          flex-direction: column-reverse;
          gap: 16px;
          margin-top: 0px;
        }

        .left {
          display: flex;
          flex-direction: column;
          gap: 24px;

          .top {
            .ttl {
              font-family: "zen-maru-gothic", sans-serif;
              font-weight: 700;
              font-style: normal;
              font-size: clamp(1.25rem, 0.5833rem + 1.3889vw, 2.25rem);
              line-height: 1.2;

              @media screen and (max-width: 480px) {
                text-align: center;
              }
            }
          }

          .bottom {
            .btns {
              justify-content: flex-start;
              margin-top: 24px;

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

/*==============================================================
other
==============================================================*/

.common-btn {
  transition: transform 0.3s ease;
}

.common-btn:hover {
  transform: scale(1.05);
}