@import url(/common/product/product.css);
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400:700&display=swap");

/*------------------
BLACK PLUS
------------------*/
main {
  color: #fff;
  background-color: #000;
}

/*------------------
トップ
------------------*/
main div.top {
  padding-top: 93px;
  padding-bottom: 500px;
  text-align: center;
  background-image: url(images/top.jpg);
  background-size: cover;
  background-position: center;
  position: relative;

  @media (width < 992px) {
    padding-bottom: 360px;
  }

  @media (width < 768px) {
    padding-top: 10px;
    padding-bottom: 107%;
    background-image: url(images/top_sp.jpg);
    background-position: bottom;
    background-size: 100%;
    background-repeat: no-repeat;
  }

  & hgroup .inner {
    max-width: 792px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;

    @media (width < 992px) {
      max-width: 570px;
    }

    /* 商品ロゴ */
    & h1 {
      padding-bottom: 40px;

      @media (width < 768px) {
        padding-bottom: 20px;
      }
    }

    /* 白化した */
    @media (width < 768px) {
      & p:first-of-type {
        margin-left: -15px;
        margin-right: -15px;
      }
    }

    /* コーティング剤 */
    & p:last-child {
      margin-top: -20px;
      text-shadow:
        -3px -3px 5px #000,
        3px -3px 5px #000,
        3px 3px 5px #000,
        -3px 3px 5px #000;
      font-size: 30px;
      font-weight: bold;
      letter-spacing: 0.05em;

      @media (width < 768px) {
        font-size: 20px;
      }
    }
  }

  /* 商品画像 */
  & > p {
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: -140px;

    @media (width < 992px) {
      & img {
        width: 450px;
      }
    }

    @media (width < 768px) {
      bottom: -75px;

      & img {
        width: 314px;
      }
    }
  }
}

/*------------------
セクション共通
------------------*/
main section {
  /* 見出し */
  h2 {
    margin-bottom: 35px;
    font-size: 45px;
    font-weight: bold;
    text-align: center;
    text-decoration: underline 3px;
    text-underline-offset: 14px;

    @media (width < 768px) {
      margin-bottom: 30px;
      font-size: 24px;
    }
  }

  /* 文字色 */
  & strong {
    color: #facc00;
  }

  /* ボーダーグラデーション */
  & .border-linear {
    background-color: #272929;
    border: 1px solid transparent;
    border-image: linear-gradient(90deg, rgba(239, 204, 125, 1) 1%, rgba(243, 218, 139, 1) 19%, rgba(249, 242, 229, 1) 41%, rgba(199, 137, 3, 1) 73%, rgba(238, 201, 131, 1) 95%) 1;
  }

  /* 背景グラデーション */
  & .bg-radial {
    color: #000;
    font-weight: bold;
    text-align: center;
    background: radial-gradient(ellipse 42.5% 100px at center, #f3ecdf 18%, #edd485 72%, #c19d00 100%);
  }
}

/*------------------
困っていませんか？
------------------*/
main section.worry {
  max-width: 705px;
  margin: 0 auto;
  padding: 220px 15px 92px;

  @media (width < 768px) {
    padding-top: 90px;
    padding-bottom: 35px;
  }

  /* チェックリスト */

  & ul {
    @media (width < 768px) {
      width: fit-content;
      margin: 0 auto;
    }

    & li {
      margin-left: 6px;
      padding-left: 42px;
      font-size: 28px;
      background-image: url(images/worry_check.svg);
      background-repeat: no-repeat;
      background-position: left;
      background-size: 26px;

      @media (width < 768px) {
        margin-left: unset;
        padding-left: 20px;
        font-size: 15px;
        background-size: 15px;
      }
    }
  }
  /* 解決します */
  & p {
    padding-top: 120px;
    font-size: 41px;
    font-weight: bold;
    text-align: center;
    background-image: url(images/worry_blow.svg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: 154px;

    @media (width < 768px) {
      padding-top: 75px;
      font-size: 24px;
      font-weight: bold;
      background-size: 90px;
    }
  }
}

/*------------------
なぜ白ボケするのか？
------------------*/
main section.why {
  text-align: center;
  background-color: #333;
  clip-path: polygon(0% 0%, 50% 115px, 100% 0%, 100% calc(100% - 115px), 50% 100%, 0% calc(100% - 115px));

  @media (width < 768px) {
    clip-path: polygon(0% 0%, 50% 65px, 100% 0%, 100% calc(100% - 65px), 50% 100%, 0% calc(100% - 65px));
  }

  & div.inner {
    max-width: 1047px;
    margin: 0 auto;
    padding: 261px 15px 236px;

    @media (width < 768px) {
      padding-top: 120px;
      padding-bottom: 120px;
    }

    /* ３つの理由 */
    & dl {
      padding-bottom: 39px;
      display: flex;
      justify-content: space-between;

      @media (width < 768px) {
        padding-top: 15px;
        padding-bottom: 10px;
        display: block;
      }

      & div {
        padding-right: 7.87%;
        flex-basis: 36.77%;
        background-image: url(images/why_arrow.svg);
        background-size: 27.21%;
        background-repeat: no-repeat;
        background-position: right;

        @media (width < 768px) {
          padding-bottom: 20px;
          padding-right: unset;
          background-image: unset;

          &::after {
            content: "";
            width: 79px;
            height: 70px;
            margin: 0 auto;
            display: block;
            background-image: url(images/why_arrow.svg);
            background-size: 79px;
            background-repeat: no-repeat;
            background-position: center;
            transform: rotate(90deg);
          }
        }

        &:last-child {
          padding-right: unset;
          flex-basis: 28.91%;
          background-image: unset;

          @media (width < 768px) {
            &::after {
              content: unset;
            }
          }

          & dd strong {
            font-size: 25px;
          }
        }

        & dt {
          max-width: 257px;
          margin: 0 auto 20px;
          padding-top: 3px;
          font-size: 26px;
          line-height: 40px;
        }

        & dd:last-child {
          padding-top: 16px;
          font-size: 20px;
        }
      }
    }

    /* 結論 */
    & p.border-linear {
      padding: 9px;
      font-size: 26px;

      @media (width < 992px) {
        font-size: 24px;
      }

      @media (width < 768px) {
        padding-left: 1.3em;
        font-size: 21px;
        text-align: left;
        text-indent: -1em;
      }
    }
  }
}

/*------------------
黒くするのではなく、安定させる
------------------*/
main section.solution {
  max-width: 878px;
  margin: 0 auto;
  padding: 100px 15px 140px;
  text-align: center;

  @media (width < 768px) {
    padding-top: 30px;
    padding-bottom: 70px;
  }

  /* 見出し */
  & hgroup h2 {
    padding-top: 55px;

    @media (width < 768px) {
      padding-top: 50px;
    }
  }

  /* テキスト */
  & :is(p.text1, p.text2) {
    font-size: 26px;

    @media (width < 768px) {
      font-size: 18px;
    }
  }

  & p.text2 {
    padding-top: 8px;
    font-weight: bold;

    @media (width < 768px) {
      font-size: 20px;
    }
  }

  /* 正反射画像 */
  & figure {
    padding-top: 70px;
    padding-bottom: 70px;

    @media (width < 768px) {
      padding-top: 25px;
      padding-bottom: 50px;
    }

    & figcaption {
      padding-right: 30px;
      font-size: 19px;

      @media (width < 768px) {
        padding-right: unset;
        padding-top: 20px;
        font-size: 15px;
      }
    }
  }

  /* 導きます */
  p.border-linear {
    padding: 9px;
    margin-bottom: 150px;
    font-size: 26px;

    @media (width < 992px) {
      font-size: 24px;
    }

    @media (width < 768px) {
      margin-bottom: 70px;
      padding-left: 1.5em;
      padding-right: 0.8em;
      font-size: 21px;
      text-align: left;
      text-indent: -1em;
    }
  }

  /* 施工前/施工後比較イメージ */
  & section {
    /* 見出し */
    & h3 {
      padding-bottom: 20px;
      font-size: 23px;

      @media (width < 768px) {
        font-size: 21px;
      }
    }

    /* リスト */
    & ul {
      padding-top: 25px;
      font-size: 21px;
      font-feature-settings: "palt";
      text-align: left;
      line-height: 29px;
      display: flex;
      justify-content: center;
      gap: 30px;

      @media (width < 768px) {
        display: block;
        text-align: center;

        & li {
          width: fit-content;
          margin: 0 auto;
        }
      }

      & li:first-child {
        padding-right: 30px;
        border-right: 1px solid #fff;

        @media (width < 768px) {
          padding-right: unset;
          border-right: unset;
          padding-bottom: 10px;
          border-bottom: 1px solid #fff;
        }
      }
      & li:last-child {
        padding-right: 30px;

        @media (width < 768px) {
          padding-right: unset;
          padding-top: 10px;
        }
      }
    }
  }
}

/*------------------
使用方法
------------------*/
main section.use {
  background-color: #333;

  & div.inner {
    max-width: 855px;
    margin: 0 auto;
    padding: 140px 15px 250px;

    @media (width < 768px) {
      padding-top: 60px;
      padding-bottom: 75px;
    }

    & h2 {
      text-decoration: unset;
      border-bottom: 3px solid #fff;
    }

    /* ステップ */
    & section {
      /* 矢印 */
      &:not(:last-child)::after {
        content: url(images/use_blow.svg);
        width: 41px;
        margin: 0 auto 5px;
        display: block;
      }

      /* 見出し */
      & hgroup {
        font-size: 26px;
        letter-spacing: 0.02em;
        font-weight: bold;
        line-height: 44px;
        display: flex;

        @media (width < 768px) {
          font-size: 18px;
          line-height: 28px;
        }

        & p {
          padding-top: 6px;
          flex-basis: 163px;

          @media (width < 768px) {
            padding-top: 4px;
            flex-basis: 113px;
          }

          & span {
            padding-left: 5px;
            font-size: 37px;

            @media (width < 768px) {
              font-size: 26px;
            }
          }
        }

        & h3 {
          padding-top: 6px;
          padding-left: 19px;

          @media (width < 768px) {
            padding-top: 4px;
            padding-left: 13px;
          }
        }
      }

      /* 写真とテキスト */
      & div.detail {
        padding: 20px;
        border-top: unset;
        display: flex;
        justify-content: space-between;

        @media (width < 768px) {
          padding: 15px;
          display: block;
        }

        & p {
          flex-basis: 35.21%;
        }

        & div.description {
          font-size: 22px;
          flex-basis: 62.36%;

          @media (width < 992px) {
            & br {
              display: none;
            }
          }

          @media (width < 768px) {
            padding-top: 10px;
            font-size: 16px;
            font-feature-settings: "palt";
          }
        }
      }
    }
  }
}

/*------------------
使用量の目安
------------------*/
main section.usage {
  text-align: center;
  background-color: #333;

  & div.inner {
    max-width: 855px;
    margin: 0 auto;
    padding: 0 15px 180px;

    @media (width < 768px) {
      padding-bottom: 75px;
    }

    /* 見出し */
    & h2 {
      text-decoration: unset;
      border-bottom: 3px solid #fff;
    }

    & p {
      padding-bottom: 65px;
      font-size: 34px;
      font-weight: bold;

      @media (width < 768px) {
        padding-bottom: 30px;
        font-size: 20px;
      }
    }

    & dl {
      /* 対象範囲 */
      & dt {
        width: 260px;
        margin: 0 auto 30px;
        padding-top: 2px;
        font-size: 26px;
        line-height: 36px;
        font-weight: bold;
        background-color: #1a1a1a;

        @media (width < 768px) {
          width: 142px;
          margin-bottom: 13px;
          padding-top: unset;
          font-size: 16px;
          line-height: 28px;
        }
      }

      /* テキスト */
      dd:last-child {
        padding-top: 60px;
        font-size: 26px;
        font-weight: bold;

        @media (width < 768px) {
          padding-top: 30px;
          padding-left: 1em;
          font-size: 16px;
          text-indent: -1em;
          text-align: left;
        }
      }
    }
  }
}

/*------------------
使用できない場所
------------------*/
main section.cation {
  background-color: #333;
  clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 115px), 50% 100%, 0% calc(100% - 115px));

  @media (width < 768px) {
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 65px), 50% 100%, 0% calc(100% - 65px));
  }

  & div.inner {
    max-width: 855px;
    margin: 0 auto;
    padding: 0 15px 230px;

    @media (width < 768px) {
      padding-bottom: 125px;
    }

    /* 見出し */
    & h2 {
      text-decoration: unset;
      border-bottom: 3px solid #fff;
    }

    /* リスト */
    & ul {
      margin-left: 1em;
      padding-left: 25px;
      padding-right: 25px;
      font-size: 26px;

      @media (width < 768px) {
        padding-left: unset;
        padding-right: unset;
        font-size: 16px;
      }
    }

    & ul:first-of-type {
      padding-bottom: 15px;
      line-height: 1.75;
      list-style-type: "・";
    }

    & ul:last-of-type {
      padding-bottom: 70px;
      list-style-type: "※";

      @media (width < 768px) {
        padding-bottom: 35px;
      }
    }

    /* 免責 */
    & dl {
      text-align: center;

      & dt {
        padding-bottom: 10px;
        color: red;
        font-size: 28px;
        font-weight: bold;

        @media (width < 768px) {
          font-size: 21px;
        }
      }

      & dd {
        margin-left: -150px;
        margin-right: -150px;
        font-size: 26px;

        @media (width < 1125px) {
          margin-left: unset;
          margin-right: unset;
        }

        @media (width < 768px) {
          font-size: 16px;
          text-align: left;
        }
      }
    }
  }
}

/*------------------
こんな方におすすめ
------------------*/
main section.recommend {
  max-width: 835px;
  margin: 0 auto;
  padding: 175px 15px 265px;

  @media (width < 768px) {
    padding-top: 75px;
    padding-bottom: 45px;
  }

  /* 見出し */
  & h2 {
    text-align: center;
    text-decoration: unset;

    & img {
      vertical-align: -6px;

      @media (width < 768px) {
        width: 26px;
        vertical-align: -2px;
      }
    }
  }

  /* 3つの理由 */
  & dl {
    display: flex;
    gap: 25px;

    @media (width < 768px) {
      width: 250px;
      margin: 0 auto;
      display: block;
    }

    & div {
      padding: 20px;
      background-image: linear-gradient(#272929, #272929), linear-gradient(90deg, #fbcf00 1%, #fffcd1 25%, #cb9b0c 60%, #f3e18b 87%, #fffcd1 100%);
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      border: 1px solid transparent;
      border-radius: 13px;

      @media (width < 768px) {
        margin-bottom: 30px;
      }

      & dt {
        width: fit-content;
        margin: 0 auto 15px;
        font-size: 26px;
        font-weight: bold;
        line-height: 1.4;
      }

      & dd:last-child {
        width: fit-content;
        margin: 0 auto;
        padding-top: 15px;
        font-size: 17px;
      }
    }
  }
}

/*------------------
ショップ
------------------*/
main section.goshop {
  max-width: 1047px;
  margin: 0 auto 150px;
  padding: 20px;
  color: #000;
  text-align: left;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;

  @media (width < 768px) {
    margin-bottom: unset;
    padding: 15px;
    display: block;
  }

  & > p {
    border: 2px solid transparent;
    border-image: radial-gradient(ellipse 42.5% 66.2% at center, #f9f2e5 18%, #f3da8b 59%, #c78903 100%) 1;
    flex-basis: 47.5%;
  }

  & div.box {
    flex-basis: 50.61%;

    @media (width < 768px) {
      padding-top: 20px;
    }

    /* 商品名 */
    & h2 {
      margin-bottom: unset;
    }

    /* 価格 */
    & dl {
      padding-left: 13px;
      padding-bottom: 20px;
      line-height: 1;

      @media (width < 768px) {
        padding-top: 20px;
        padding-left: unset;
        text-align: center;
      }

      & dt {
        font-size: 19px;
        font-feature-settings: "palt";
      }

      & dd {
        font-size: 17px;

        & strong {
          color: #d5221d;
          font-size: 60px;
          font-family: "M PLUS 1p", sans-serif;
          font-weight: 900;
          vertical-align: -5px;

          @media (width < 768px) {
            padding-top: 5px;
            padding-bottom: 7px;
            display: block;
          }
        }
      }
    }

    /* ショップボタン */
    & ul img {
      aspect-ratio: 160 / 122;
      object-fit: cover;

      @media (width < 768px) {
        aspect-ratio: unset;
      }
    }
  }
}

/*------------------
ショップ
------------------*/
main section.list {
  background-color: #333;
  clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 115px), 50% 100%, 0% calc(100% - 115px));

  @media (width < 768px) {
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 65px), 50% 100%, 0% calc(100% - 65px));
  }

  & div.inner {
    max-width: 990px;
    margin: 0 auto;
    padding: 120px 15px 300px;

    @media (width < 768px) {
      padding-top: 70px;
      padding-bottom: 100px;
    }

    & h2 {
      margin-bottom: 100px;
      text-decoration: unset;

      @media (width < 768px) {
        margin-bottom: 50px;
      }
    }

    & ul {
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      gap: 21px;

      @media (width < 768px) {
        display: block;
      }

      & li {
        flex: 1;

        @media (width < 768px) {
          padding-bottom: 40px;
        }

        & > img {
          margin-bottom: 33px;
        }

        & a {
          width: fit-content;
          margin: 0 auto;
          display: block;

          &:hover {
            opacity: 0.8;
          }

          @media (width < 768px) {
            & img {
              width: auto;
              height: 50px;
            }
          }
        }
      }
    }
  }
}