/*==============================================================
equipment
==============================================================*/
.ttl {
  font-family: "Noto serif jp", serif;
}
.des {
}

.equipment {
  .cont {
    &.bg-g {
      background-color: #ebebeb;
    }

    .box {
      max-width: 1280px;

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

        .item {
          display: flex;
          align-items: center;
          gap: 80px;
          position: relative;
          z-index: 0;

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

          .bg-txt {
            position: absolute;
            top: 0;
            left: -5%;
            font-weight: 600;
            font-family: Arial, Helvetica, sans-serif;
            font-size: clamp(3rem, -2.5rem + 11.4583vw, 11.25rem);
            opacity: 0.05;
            line-height: 0.9;
            z-index: -1;
          }

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

          .left {
            flex: 1;
            padding-bottom: 10%;

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

            .ttl {
              font-size: clamp(1.125rem, 0.625rem + 1.0417vw, 1.875rem);
              font-weight: 900;
              margin-bottom: 4px;
              padding-left: 1rem;

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

            .line {
              content: "";
              display: block;
              width: 100%;
              height: 1px;
              background-color: #ccc;
              margin: 6px 0 8px;
            }

            .des {
              padding-left: 1rem;

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

          .right {
            flex: 1.5;
          }

          &.under {
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;

            .ttl-cont {
              display: flex;
              align-items: center;
              gap: 16px;
            }

            .left {
              padding-bottom: 0;
              width: 100%;

              .ttl {
                flex: 0 0 auto;
                padding-left: 0;
              }

              .des {
                flex: 1;
                padding-left: 0;
              }
            }

            .right {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              gap: 24px;

              @media screen and (max-width: 991px) {
                grid-template-columns: repeat(2, 1fr);
              }

              @media screen and (max-width: 560px) {
                grid-template-columns: repeat(1, 1fr);
              }

              .img {
                display: flex;
                flex-direction: column;
                gap: 4px;

                & h4 {
                  display: flex;
                  align-items: center;
                  gap: 4px;
                  font-weight: 600;
                  min-height: 24px;

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

                  & span {
                    content: "";
                    display: block;
                    width: 16px;
                    height: 16px;
                    border-radius: 50px;
                    background-color: #0135af;
                  }
                }
              }
            }
          }

          &.other {
            flex-direction: column;
            gap: 8px;
            width: 100%;

            .left {
              flex: unset;
              padding: 0;
              width: 100%;

              .ttl-cont {
                width: 100%;
                display: flex;
                align-items: center;
                gap: 16px;

                .ttl {
                  padding-left: 0;
                  flex: 0 0 auto;
                }

                .line {
                  flex: 1;
                }
              }
            }

            .right {
              display: flex;
              flex-direction: column;
              background: #fff;
              border-radius: 15px;
              padding: 24px;
              width: 100%;
              gap: 8px;

              .eq-list {
                display: flex;
                justify-content: space-between;
                padding: 0 16px;

                .ttl {
                  font-family: Noto sans jp;

                  &.blue {
                    font-weight: 600;
                  }
                }
              }

              .line {
                content: "";
                display: block;
                width: 100%;
                height: 1px;
                background-color: #ccc;
                margin: 6px 0 8px;
              }
            }
          }
        }

        .item-o {
          display: flex;
          gap: 24px;

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

          .item {
            flex: 1;
            align-items: center;

            .right {
              display: block;
              width: 100%;
              max-width: 410px;
            }
          }
        }

        .item-t {
          display: flex;
          gap: 24px;

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

          .item {
            align-items: center;

            .right {
              display: flex;

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

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