* {
  /* outline: solid 1px red; */
  margin: 0;
  padding: 0;
}

@scope (.stamp-rally_main) {
  h1 {
    font-size: clamp(36px, 3.2vw, 60px);
  }

  h2{
    font-size: clamp(18px, 3.2vw, 30px);
  }

  p {
    font-size: clamp(15px, 3.2vw, 18px);
  }

  img{
    max-width: 100%;
    height: auto;
  }
}

.stamp-rally_banner img{
  width: 100%;
  vertical-align:top;
}

.stamp-rally_main {
  max-width: 1920px;
  background: linear-gradient(#02254D, #0556B3);
  color: white;
  text-align: center;
  margin-inline: auto;

  .summary {
    padding-top: 8%;
    padding-bottom: 8%;

    .summary_content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .summary_kingyo-1 img{
      width: 100%;
      max-width: 450px;
    }

    .summary_kingyo-2 img{
      width: 100%;
      max-width: 450px;
    }

    .summary_kingyo-1 {
      transform: scaleX(-1);
    }

    .content_body {
      margin-top: 15%;
    }
  }

  .benefit {

    .benefit_items {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;

      .benefit_item {
        position: relative;
        margin: 10% 0;

        .item_img_1 {
          max-width: 320px;
          width: 100%;
          margin-bottom: 5%;
        }

        .item_img_2 {
          max-width: 135px;
          width: 100%;
          position: absolute;
          top: -67px;
          left: -67px;
        }
      }
    }
  }

  .how-to {

    .how-to_content {
      margin-top: 10%;
      margin-bottom: 30%;

      .kingyo-2 {
        position: absolute;
        z-index: -1;
        text-align: right;
      }

      .how-to_items {
        max-width: 900px;
        margin-inline: auto;

        .how-to_item {
          max-width: 900px;
          height: 330px;
          display: grid;
          grid-template-columns: 2fr 1fr;
          gap: 8%;
          padding: 30px;
          background-color: #0556B3;
          margin: 5% 0;
          align-items: center;

          .test {
            width: 100%;
            text-align: left;

            span {
              background-color: #FFF000;
              font-size: 32px;
              padding: 1% 5%;
              border-radius: 5px;
            }
          }

          .test2 {
            max-width: 120px;
            width: 100%;
            margin-inline: auto;
          }
        }
      }
    }
  }

  .target-stores {

    .target-stores_content {
      max-width: 1720px;
      margin-inline: auto;

      .target-stores_items {
        justify-content: center;
        margin: 10% 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(500px,550px));
        grid-template-rows: repeat(auto-fit,330px);
        gap: 30px;

        .target-stores_item {
          padding: 20px;
          display: grid;
          grid-template-columns: 1fr 1fr;
          background-color: white;
          color: black;

          .img_area {
            text-align: left;
          }

          .text-area {
            text-align: left;

            .store_category {
              font-size: 15px;
            }

            .store_name {
              font-size: 18px;
              margin: 2% 0;
            }

            .store_info {
              display: grid;
              grid-template-columns: 1fr 2fr;
              grid-template-rows: repeat(auto-fit);
              gap: 15px 0;
              box-sizing: border-box;

              .info_title {
                font-size: 15px;
                font-weight: bold;
                border-bottom: solid 1px #00000033;
              }

              .info_text {
                font-size: 15px;
                border-bottom: solid 1px #00000033;
              }

              .link_button {
              }
            }
          }
        }
      }
    }
  }
}

.stamp-rally_footer {
    width: 100%;
    /* background: linear-gradient(#003762, #896788); */
    padding-bottom: 5%;
    text-align: center;

    .footer-logo-area {
      width: 100%;
      height: 400px;
      display: flex;
      justify-content: center;
      position: relative;
      align-items: center;

      .tate-logo img{
        max-width: 50px;
      }
    }

    .sns-logo {
      display: flex;
      justify-content: center;
      padding: 35px;
      height: 35px;
      gap: 14px;

      img {
        width: 100%;
        max-width: 35px;
      }
    }
  }