/* 性能・スペックページ追加 */
#front-visual {
  .title-ja {
    font-feature-settings: 'pkna';
    -webkit-font-feature-settings: 'pkna';
  }
}

.l-performance {
  img {
    max-width: 100%;
  }

  /* 標準仕様 */
  .standard-spec {
    margin-bottom: 90px;

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

    .standard-spec__contents {
      .standard-spec__banner {
        width: 48%;
        background-color: #F2F1EF;
        border-radius: 20px;
        padding: 8px 40px 40px 40px;
        position: relative;

        @media screen and (max-width: 992px) {
          width: 100%;
          margin-bottom: 40px;
          padding: 8px 24px 24px 24px;
        }

        &::before {
          content: '';
          display: inline-block;
          width: 140px;
          height: 140px;
          background-image: url("../img/performance/standard-spec.png");
          background-size: cover;
          background-repeat: no-repeat;
          position: absolute;
          top: -40px;
          left: 40px;

          @media screen and (max-width: 1200px) {
            width: 80px;
            height: 80px;
            top: -20px;
            left: 20px;
          }

          @media screen and (max-width: 992px) {
            width: 110px;
            height: 110px;
          }
        }

        .standard-spec__banner__head {
          text-align: center;
          margin-bottom: 50px;

          @media screen and (max-width: 992px) {
            margin-bottom: 40px;
            text-align: right;
            padding-right: 16px;
          }

          span {
            font-size: 22px;

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

          h2 {
            font-size: 40px;

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

        .text {
          background-color: #fff;
          padding: 30px;
          font-size: 1.5rem;
          border-radius: 20px;
          line-height: 1.7;
        }
      }

      .standard-spec__element {
        width: 48%;

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

        .ttl {
          font-size: 3.3rem;

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

        .standard-spec__element__boxs {
          .standard-spec__element__box {
            width: 49%;
            text-align: center;
            background-color: #62746b;
            border-radius: 20px;
            margin-top: 15px;
            color: #fff;
            padding: 16px;

            @media screen and (max-width: 992px) {
              /* width: 100%; */
              padding: 16px 8px 8px 8px;
            }

            .en {
              font-size: 1.5rem;
              margin-bottom: 4px;
              letter-spacing: 3px;

              @media screen and (max-width: 480px) {
                font-size: 1.2rem;
              }
            }

            .ttl {
              font-size: 1.8rem;
              font-weight: bold;
              margin-bottom: 4px;

              @media screen and (max-width: 480px) {
                font-size: 1.4rem;
              }
            }

            span {
              font-size: 1.4rem;
              font-weight: bold;

              @media screen and (max-width: 480px) {
                font-size: 1.2rem;
              }
            }
          }
        }
      }
    }
  }

  /* 高い耐震性 */
  .spec01 {
    margin-bottom: 44px;

    .spec01__img {
      width: 48%;
      text-align: center;
      font-size: 1.4rem;

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

      img {
        border: 1px solid #B4B4B4;
      }
    }

    .spec01__info {
      width: 48%;
      font-size: 1.5rem;
      letter-spacing: 1.2px;

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

  /* 高断熱・高気密のしくみ */
  .spec02 {
    margin-bottom: 48px;

    .spec02__img {
      width: 48%;
      text-align: center;
      font-size: 1.4rem;

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

      img {
        margin-bottom: 4px;
      }
    }

    .spec02__text {
      font-size: 1.5rem;
      margin-top: 16px;
      letter-spacing: 1.5px;

      @media screen and (max-width: 992px) {
        font-size: 1.4rem;
      }

      .green {
        display: block;
        margin-top: 32px;
        color: #004939;
        font-weight: 500;

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

        @media screen and (max-width: 480px) {
          font-size: 10px;
          line-height: 1.5;
        }
      }
    }
  }

  /* その他仕様について */
  .spec-other {
    position: relative;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    padding-top: 105px;
    padding-bottom: 135px;

    @media screen and (max-width: 992px) {
      padding-top: 48px;
      padding-bottom: 60px;
      overflow: hidden;
      background-color: #F2F1EF;
      width: 100%;
      margin: 0;
    }

    &::before {
      content: '';
      display: inline-block;
      width: 100%;
      height: 100%;
      background-color: #F2F1EF;
      background-size: cover;
      background-repeat: no-repeat;
      position: absolute;
      top: 0px;
      left: 48px;
      z-index: 0;

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

    .spec-other__box {
      background-color: #fff;
      padding-top: 54px;
      padding-bottom: 80px;
      position: relative;
      z-index: 99;

      @media screen and (max-width: 992px) {
        width: 95%;
        margin-right: auto;
        margin-left: auto;
        padding: 30px 24px;
      }


      .spec-other__box__inner {
        max-width: 800px;
        margin: 0 auto;
      }

      .spec-other__box__head {
        text-align: center;
        border-bottom: 1px solid #5C574D;
        padding-bottom: 54px;

        @media screen and (max-width: 992px) {
          padding-bottom: 48px;
        }

        h2 {
          display: block;
          text-align: center;
          font-size: 2.0rem;
        }

        img {
          width: 56px;
          height: 38px;
          object-fit: contain;
          margin-bottom: 16px;
        }
      }

      .spec-other__box__content {
        padding-top: 40px;
        border-bottom: 1px solid #5C574D;

        h3 {
          font-size: 1.8rem;
          padding-bottom: 40px;
          color: #004939;
          font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
          font-weight: 500;

          @media screen and (max-width: 992px) {
            padding-bottom: 35px;
          }
        }

        .imgs {
          max-width: 100%;
          gap: 10px;
          padding-bottom: 40px;

          @media screen and (max-width: 992px) {
            padding-bottom: 35px;
          }
        }

        .text {
          padding-bottom: 40px;
          font-size: 1.5rem;
          line-height: 2;

          @media screen and (max-width: 992px) {
            font-size: 1.4rem;
            padding-bottom: 16px;
          }
        }

        .media-block {
          padding-bottom: 40px;

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

          .img {
            width: 35%;

            @media screen and (max-width: 992px) {
              width: 100%;
              margin-bottom: 35px;
            }

            img {
              width: 100%;
            }

          }

          .text {
            width: 65%;
            padding-left: 24px;
            font-size: 15px;
            line-height: 2;

            @media screen and (max-width: 992px) {
              width: 100%;
              padding-left: 0;
              font-size: 14px;
            }

            .green {
              color: #004939;
            }

            .bold {
              font-weight: bold;
            }
          }
        }

        .pc.img {
          @media screen and (max-width: 992px) {
            display: none;
          }
        }

        .sp.img {
          display: none;

          @media screen and (max-width: 992px) {
            display: block;
          }
        }
      }

      .spec-other__box__content.end {
        border: none;

        .imgs {
          padding-bottom: 0;
        }

      }
    }
  }

  /* 耐久性を高める */
  .spec03 {
    padding-top: 58px;

    .spec03__img {
      margin-bottom: 40px;
    }

    .spec03__text {
      line-height: 2;
      font-size: 1.5rem;
    }
  }
}