.header,
.main,
.footer {
  max-width: 1920px;
  margin-inline: auto;
  overflow-x: hidden;
}

.header {
  position: relative;
  .mv_catch_content {
    padding-bottom: 10%;
  }
  .mv_btn {
    position: absolute;
    right: 2%;
    bottom: 10%;
    width: 20%;
    max-width: 450px;
  }
}
.catch {
  position: relative;
  margin-bottom: 150px;

  .select_list {
    display: flex;
    justify-content: center;
    gap: 30px;
    line-height: 1.3;
    margin-bottom: 3%;
    .select_item {
      font-size: var(--fs24);
      text-align: center;
      color: #fff;
      background: url(../images/select_comment1.png) no-repeat center / contain;
      padding: 10px 22px 25px;
      &:nth-child(2) {
        background: url(../images/select_comment2.png) no-repeat center /
          contain;
      }
      &:last-child {
        background: url(../images/select_comment3.png) no-repeat center /
          contain;
      }
    }
  }
  .section_title {
    text-align: center;
    font-size: var(--fs34);
    color: var(--text-color);
    position: absolute;
    left: 50%;
    translate: -50%;
    white-space: nowrap;
    img {
      width: 80px;
      margin: 0 5px;
    }
  }
  .catch_mv {
    margin-top: -8%;
  }
  .btn_area {
    width: 35%;
    margin: 0 auto;
  }
}
.cv_btn {
  width: 20%;
  max-width: 300px;
  position: fixed;
  right: 2%;
  bottom: 3%;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.cv_btn.is-show {
  opacity: 1;
  pointer-events: auto;
}
.present {
  background: url(../images/bg.png) no-repeat center / cover;
  padding: 10% 0;
  .section_title {
    max-width: 1680px;
    width: 80%;
    margin-inline: auto;
  }
}
.product {
  position: relative;
  padding-top: 150px;
  margin-bottom: 100px;
  .product_container {
    background:
      url(../images/concept_bg_left.png) no-repeat bottom left / contain,
      url(../images/concept_bg_right.png) no-repeat bottom 50px right / contain;
    .movie_content {
      position: absolute;
      top: 130px;
      left: 50%;
      translate: -50% 0;
      width: 60%;
      max-width: 1280px;
      /* aspect-ratio: 16 / 9; */
      aspect-ratio: 1180 / 700;
      iframe {
        width: 100%;
        height: 100%;
      }
    }
    .product_content {
      padding-top: calc(60% * (9 / 16));
      text-align: center;
      color: var(--text-color);
      .section_title {
        font-size: var(--fs28);
        padding-top: 7%;
        margin-bottom: 3%;
        img {
          width: 330px;
          display: block;
          margin-inline: auto;
          margin-bottom: 20px;
        }
      }
      .product_img {
        width: 550px;
        margin-inline: auto;
      }
      .text_content {
        position: relative;
        .product_text_L {
          font-size: var(--fs34);
          margin-bottom: 2%;
          &::before {
            content: "";
            width: 80px;
            height: 80px;
            display: block;
            background: url(../images/design_icon4.png) no-repeat center /
              contain;
            position: absolute;
            left: 20%;
            bottom: 120px;
          }
          &::after {
            content: "";
            width: 150px;
            height: 200px;
            display: block;
            background: url(../images/design_icon2.png) no-repeat center /
              contain;
            position: absolute;
            right: 15%;
            top: -100px;
          }
        }
        .product_text_S {
          font-size: var(--fs26);
        }
      }
    }
  }
  .point_container {
    background:
      url(../images/point_bg_left.png) no-repeat left bottom / contain,
      url(../images/point_bg_right.png) no-repeat right bottom / contain;
    padding: 5% 0 10%;
    .point_list {
      display: flex;
      gap: 5%;
      width: 55%;
      margin-inline: auto;
      li {
        &:nth-child(2) {
          margin-top: 100px;
        }
      }
    }
  }
  .brush_container {
    .brush_list {
      display: flex;
      justify-content: center;
      width: 70%;
      max-width: 1680px;
      margin-inline: auto;
      margin-bottom: 5%;
      position: relative;
      text-align: center;
      li {
        img {
          margin-bottom: 10%;
          height: 80vh;
          object-fit: contain;
        }
      }
      &::before {
        content: "";
        display: block;
        width: 70px;
        height: 80px;
        background: url(../images/design_icon3.png) no-repeat center / contain;
        position: absolute;
        bottom: 100px;
        left: -100px;
      }
      &::after {
        content: "";
        display: block;
        width: 150px;
        height: 150px;
        background: url(../images/design_icon1.png) no-repeat center / contain;
        position: absolute;
        bottom: 110px;
        right: -130px;
      }
    }
    .ribbon {
      display: inline-block;
      position: relative;
      height: 40px;
      line-height: 40px;
      text-align: center;
      padding: 0 30px;
      color: #fff;
      box-sizing: border-box;
    }

    .ribbon:before,
    .ribbon:after {
      position: absolute;
      content: "";
      width: 0px;
      height: 0px;
      z-index: 1;
    }

    .ribbon:before {
      top: 0;
      left: 0;
      border-width: 20px 0px 20px 10px;
      border-color: transparent transparent transparent #fff;
      border-style: solid;
    }

    .ribbon:after {
      top: 0;
      right: 0;
      border-width: 20px 10px 20px 0px;
      border-color: transparent #fff transparent transparent;
      border-style: solid;
    }
    .pink {
      background: var(--pink1);
    }
    .blue {
      background: var(--blue1);
    }
    .orange {
      background: var(--orange1);
    }
    .purple {
      background: var(--purple2);
    }
  }
  .btn_area {
    width: 35%;
    margin: 0 auto;
  }
}
.design {
  background: url(../images/bg.png) no-repeat center / cover;
  padding: 10% 0;
  text-align: center;
  color: var(--text-color);
  .section_title {
    font-size: var(--fs28);
    padding-top: 7%;
    margin-bottom: 3%;
    position: relative;
    img {
      width: 330px;
      display: block;
      margin-inline: auto;
      margin-bottom: 20px;
    }
    &::before {
      content: "";
      width: 130px;
      height: 160px;
      display: block;
      background: url(../images/design_icon2.png) no-repeat center / contain;
      position: absolute;
      left: 20%;
      bottom: -80px;
    }
    &::after {
      content: "";
      width: 100px;
      height: 150px;
      display: block;
      background: url(../images/design_icon9.png) no-repeat center / contain;
      position: absolute;
      right: 20%;
      bottom: -40px;
    }
  }
  .design_img {
    width: 80%;
    margin-inline: auto;
    max-width: 1680px;
    padding-top: 50px;
  }
}
.apagard {
  position: relative;
  background: url(../images/apagard_bg1.png) no-repeat center / cover;
  padding: 8% 0 27%;
  .section_title {
    width: 320px;
    margin-inline: auto;
    margin-bottom: 5%;
  }
  .section_sub_title {
    width: 670px;
    margin-inline: auto;
    margin-bottom: 5%;
  }
  .apagard_container {
    max-width: 1680px;
    width: 80%;
    margin-inline: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    color: var(--text-color);
  }
  .apagard_img {
    width: 530px;
  }
  .apagard_contents {
    p {
      font-size: var(--fs22);
    }
    .text_small {
      font-size: var(--fs10);
    }
  }
}
.mhap {
  position: relative;
  background: url(../images/apagard_bg2.png) no-repeat center / cover;
  padding: 8% 0 27%;
  margin-top: -15%;
  .section_sub_title {
    width: 530px;
    margin-inline: auto;
    margin-bottom: 50px;
  }
  .mhap_img {
    width: 60%;
    max-width: 1680px;
    margin-inline: auto;
  }
}
.series {
  position: relative;
  background: url(../images/apagard_bg3.png) no-repeat center / cover;
  padding: 8% 0 27%;
  margin-top: -15%;
  .section_sub_title {
    width: 470px;
    margin-inline: auto;
    margin-bottom: 5%;
  }
  .series_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
    width: 60%;
    margin-inline: auto;
    color: var(--text-color);
    .series_item {
      width: calc((100% / 3) - 50px);
      margin-bottom: 50px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      img {
        margin-bottom: 20px;
      }
      .type {
        font-size: var(--fs18);
        line-height: 1.3;
        margin-bottom: 20px;
        span {
          font-size: var(--fs12);
          margin-right: 5px;
        }
      }
      .amount {
        font-size: var(--fs16);
      }
      .name {
        font-size: var(--fs10);
      }
      &:first-child {
        img {
          margin-top: auto;
        }
        .amount {
          margin-bottom: 2.7em;
        }
      }
      &:last-child {
        .type {
          line-height: 1.3;
          margin-bottom: 5px;
          span {
            display: block;
          }
        }
      }
    }
  }
}
.campaign {
  position: relative;
  background: url(../images/apagard_bg4.png) no-repeat top center / cover;
  padding: 8% 0 10%;
  margin-top: -25%;
  color: var(--text-color);
  .section_sub_title {
    width: 350px;
    margin-inline: auto;
    text-align: center;
    font-size: var(--fs32);
    margin-bottom: 4%;
  }
  .campaign_content {
    font-size: var(--fz20);
    background: #fff;
    border: 1px solid var(--text-color);
    width: 60%;
    max-width: 1680px;
    margin-inline: auto;
    margin-bottom: 5%;
    padding: 5% 5% 3%;
    position: relative;
    .campaign_list {
      div {
        margin-bottom: 20px;
        dd {
          margin-left: 1em;
          ul {
            margin-left: 2em;
            margin-bottom: 20px;
            list-style-type: disc;
          }
        }
        a {
          display: block;
        }
        a.privacypolicy {
          display: inline-block;;
        }
      }
    }
    .campaign_caution {
      background: rgb(145 150 240 / 0.3);
      padding: 3% 5%;
      margin-bottom: 5%;
      position: relative;
      li {
        margin-left: 2em;
        list-style-position: outside;
        list-style-type: disc;
      }
      &::before {
        content: "";
        width: 150px;
        height: 150px;
        display: block;
        background: url(../images/piece_flower.png) no-repeat center / contain;
        position: absolute;
        left: -190px;
        bottom: -220px;
      }
    }
    &::before {
      content: "";
      width: 200px;
      height: 200px;
      display: block;
      background: url(../images/left_flower.png) no-repeat center / contain;
      position: absolute;
      left: -110px;
      bottom: -50px;
    }
    &::after {
      content: "";
      width: 200px;
      height: 200px;
      display: block;
      background: url(../images/right_flower.png) no-repeat center / contain;
      position: absolute;
      right: -100px;
      bottom: 210px;
    }
  }
  .btn_area {
    width: 35%;
    margin: 0 auto;
  }
}
@media (max-width: 767px) {
  .header {
    .mv_btn {
      display: none;
    }
  }
  .catch {
    margin-bottom: 20px;
    .select_list {
      width: 95%;
      margin-inline: auto;
      gap: 10px;
      line-height: 1.2;
      letter-spacing: -0.05em;
      white-space: nowrap;
      margin-bottom: 3%;

      .select_item {
        font-size: var(--fs14);
        background: url(../images/select_comment1.png) no-repeat center top /
          contain;
        padding: 4px 10px 15px;
        &:nth-child(2) {
          background: url(../images/select_comment2.png) no-repeat center top /
            contain;
        }
        &:last-child {
          background: url(../images/select_comment3.png) no-repeat center top/
            contain;
        }
      }
    }
    .section_title {
      font-size: var(--fs18);
      width: 100%;
      letter-spacing: -0.05em;
      img {
        width: 45px;
      }
    }
    .catch_mv {
      margin-top: 20%;
    }
    .btn_area {
      width: 70%;
      margin: 30px auto 0;
      /*  .sub_catch {
        width: 80%;
        margin-inline: auto;
      } */
    }
  }
  .cv_btn {
    width: 35%;
    max-width: 150px;
  }
  .present {
    background: url(../images/bg_sp.png) no-repeat center / cover;
    padding: 29% 0 6%;
    .section_title {
      max-width: none;
      width: 95%;
      margin-top: -50px;
    }
  }
  .product {
    margin-bottom: 50px;
    .product_container {
      background:
        url(../images/concept_bg_left.png) no-repeat bottom 100% left / 40%,
        url(../images/concept_bg_right.png) no-repeat bottom 100% right / 40%;
      .movie_content {
        top: 50px;
        width: 90%;
      }
      .product_content {
        padding-top: calc((60% * (9 / 16)) + 40%);
        .section_title {
          padding-top: 0;
          font-size: var(--fs16);
          letter-spacing: -0.05em;
          margin-bottom: 10px;
          img {
            width: 30%;
          }
        }
        .product_img {
          width: 70%;
        }
        .text_content {
          position: relative;
          .product_text_L {
            font-size: var(--fs18);
            letter-spacing: -0.05em;
            &::before {
              width: 80px;
              height: 80px;
              left: 1%;
              bottom: 0;
              top: -80px;
              background: url(../images/design_icon5.png) no-repeat center /
                contain;
            }
            &::after {
              width: 50px;
              height: 50px;
              right: 2%;
              top: -40%;
              background: url(../images/design_icon8.png) no-repeat center /
                contain;
            }
          }
          .product_text_S {
            font-size: var(--fs14);
          }
        }
      }
    }
    .point_container {
      background:
        /* url(../images/product_bg_left_sp.png) no-repeat left top / 30%,
        url(../images/product_bg_right_sp.png) no-repeat right top / 30%; */
        none, none;
      padding: 10% 0 10%;
      .point_list {
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 0;
        width: 90%;
        margin-inline: auto;
        li {
          width: calc((100% / 2) - 20px);
          position: relative;
          &:first-child {
            &::after {
              content: "";
              width: 90px;
              height: 90px;
              display: block;
              background: url(../images/product_point.png) no-repeat center /
                contain;
              position: absolute;
              top: -20px;
              right: -20px;
            }
          }
          &:nth-child(2) {
            margin-top: -10px;
            order: 3;
            &::after {
              content: "";
              width: 100px;
              height: 100px;
              display: block;
              background: url(../images/product_point2.png) no-repeat center /
                contain;
              position: absolute;
              bottom: 0;
              right: -40px;
            }
          }
        }
        &.sp-none {
          display: none;
        }
      }
    }
    .brush_container {
      .brush_list {
        width: 95%;
        flex-wrap: wrap;
        li {
          width: calc(100% / 2);
          img {
            margin-bottom: -10%;
            height: 100%;
            object-fit: contain;
          }
        }
        &::before {
          content: none;
        }
        &::after {
          content: none;
        }
        &.sp-none {
          display: none;
        }
      }
      h3 {
        font-size: var(--fs12);
      }
      .ribbon {
        height: 24px;
        line-height: 24px;
        padding: 0 30px;
      }
      .ribbon:before {
        border-width: 12px 0px 12px 7px;
      }

      .ribbon:after {
        border-width: 12px 7px 12px 0px;
      }
    }
    .btn_area {
      width: 70%;
      margin: 20px auto 0;
      position: relative;
      &::after {
        content: "";
        width: 70px;
        height: 70px;
        display: block;
        background: url(../images/design_icon7.png) no-repeat center / contain;
        position: absolute;
        top: -40px;
        left: -60px;
      }
      .sub_catch {
        width: 80%;
        margin-inline: auto;
      }
    }
  }
  .design {
    background: url(../images/bg_sp.png) no-repeat center top / cover;
    padding: 20% 0 6%;
    .section_title {
      font-size: var(--fs18);
      letter-spacing: -0.05em;
      line-height: 1.5;
      padding-top: 0;
      img {
        width: 25%;
      }
      &::before {
        width: 39.25px;
        height: 61.5px;
        left: 14%;
        bottom: 25px;
        background: url(../images/design_icon10.png) no-repeat center / contain;
      }
      &::after {
        width: 38.25px;
        height: 79.25px;
        right: 16%;
        bottom: 22px;
        background: url(../images/design_icon11.png) no-repeat center / contain;
      }
    }
    .design_img {
      max-width: none;
      width: 90%;
      padding-top: 10px;
    }
  }
  .apagard {
    background: url(../images/apagard_bg1_sp.png) no-repeat center / cover;
    padding: 15% 0 27%;
    position: relative;
    .section_title {
      width: 35%;
    }
    .section_sub_title {
      width: 70%;
    }
    .apagard_container {
      max-width: none;
      width: 90%;
      text-align: center;
      flex-direction: column;
    }
    .apagard_img {
      width: 80%;
    }
    .apagard_contents {
      p {
        font-size: var(--fs16);
      }
    }
    &::before {
      content: "";
      width: 60px;
      height: 60px;
      display: block;
      background: url(../images/piece_icon3.png) no-repeat center / contain;
      position: absolute;
      right: 100px;
      top: -30px;
    }
  }
  .mhap {
    background: url(../images/apagard_bg2_sp.png) no-repeat center top / cover;
    padding: 8% 0 30%;
    .section_sub_title {
      width: 80%;
      margin-bottom: 20px;
      margin-top: 50px;
    }
    .mhap_img {
      width: 77%;
      max-width: none;
      margin-bottom: -20px;
    }
  }
  .series {
    background: url(../images/apagard_bg3_sp.png) no-repeat center / cover;
    padding: 3% 0 0;
    margin-top: -100px;
    margin-bottom: 100px;
    .section_sub_title {
      width: 60%;
      position: relative;
      margin-top: 100px;
      &::before {
        content: "";
        width: 50px;
        height: 30px;
        display: block;
        background: url(../images/sub_title_series_sp_tag.png) no-repeat
          center / contain;
        position: absolute;
        bottom: 5px;
        right: -40px;
      }
    }
    .series_list {
      width: 85%;
      .series_item {
        width: calc((100% / 2) - 10px);
        img {
          margin-bottom: 10px;
        }
        .type {
          font-size: var(--fs14);
          letter-spacing: -0.05em;
          margin-bottom: 10px;
          span {
            font-size: var(--fs11);
            margin-right: 5px;
          }
        }
        .amount {
          font-size: var(--fs12);
          line-height: 1.5;
        }
        .name {
          font-size: var(--fs10);
        }
      }
    }
  }
  .campaign {
    background: url(../images/apagard_bg4_sp.png) no-repeat top center / cover;
    margin-top: -30%;
    padding-top: 20%;
    padding-bottom: 40%;
    .section_sub_title {
      width: 40%;
      font-size: var(--fs18);
    }
    .campaign_content {
      font-size: var(--fs14);
      letter-spacing: -0.05em;
      border: none;
      box-shadow: 1px 1px 4px var(--text-color);
      width: 90%;
      max-width: none;
      margin-bottom: 10%;
      padding: 5% 5% 3% 3%;
      .campaign_list {
        div {
          margin-bottom: 10px;
          dd {
            margin-left: 0.5em;
            ul {
              margin-left: 1em;
            }
          }
        }
        &:nth-of-type(2) {
          position: relative;
          &::before {
            content: "";
            width: 90px;
            height: 90px;
            display: block;
            background: url(../images/piece_icon2.png) no-repeat center /
              contain;
            left: auto;
            position: absolute;
            left: -60px;
            top: 50%;
          }
          &::after {
            content: "";
            display: block;
            width: 90px;
            height: 90px;
            background: url(../images/product_point2.png) no-repeat center /
              contain;
            position: absolute;
            right: -50px;
            bottom: 20%;
          }
          div {
            &:last-of-type {
              text-align: left;
              a {
                display: inline-block;
              }
            }
          }
        }
      }
      .campaign_caution {
        padding: 3%;
        font-size: var(--fs11);
        li {
          margin-left: 1em;
        }
        &::before {
          width: 80px;
          height: 80px;
          background: url(../images/right_flower.png) no-repeat center / contain;
          position: absolute;
          left: auto;
          bottom: -35px;
          right: -30px;
        }
      }
      &::before {
        width: 100px;
        height: 100px;
        background: url(../images/piece_icon2.png) no-repeat center / contain;
        left: auto;
        bottom: 0;
        top: -50px;
        right: 40px;
      }
      &::after {
        width: 80px;
        height: 80px;
        background: url(../images/product_point2.png) no-repeat center / contain;
        right: auto;
        bottom: -50px;
        left: 70px;
      }
    }
    .btn_area {
      width: 70%;
      margin: 0 auto;
    }
  }
}