.sp{
  display: none;
}
.pc{
  display: block;
}

#app_renewal{
  background-color: #f2f4f4;
}

#app_renewal p,
#app_renewal li,
#app_renewal a{
  font-size: clamp(13px,88vw,14px);
  line-height: 1.36;
}

#app_renewal .font_zen-kaku{
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-style: normal;
}

#app_renewal .caution{
  font-size: 12px;
  margin-top: 10px;
}

#app_renewal .caution .link{
  font-size: 12px;
}

#app_renewal .marker{
  background:linear-gradient(transparent 75%, #fff116 40%);
}

#app_renewal .app_img{
  max-width: 163px;
}

#app_renewal .new_p{
  position: relative;
  &::before{
    content: '';
    width: 38px;
    height: 18px;
    background-image: url('/special/app_renewal/ndl/images/new.svg');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 15px;
    left: 10px;
  }
}

#app_renewal .link{
  color: #0f9ca7;
  text-decoration: underline;
  font-weight: 600;
}

#app_renewal .link:hover{
  opacity: .6;
}

#app_renewal .text_margin_1{
  margin-bottom: 10px;
}

#app_renewal .text_margin_2{
  margin-bottom: 20px;
}

#app_renewal .scroll_area{
  box-shadow: 0 -3px 8px -1px rgba(170, 170, 170, .50);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  padding: 15px 0;
  background-color: #fff;
  transition: .6s cubic-bezier(0.65, 0, 0.35, 1);
  transform: translateY(100%);
  overflow: hidden;
  .scroll_inner{
    display: flex;
    align-items: center;
    justify-content: center;
    .text{
      font-size: 18px;
      font-weight: 600;
    }
    .btn_flex{
      margin-left: 24px;
      display: flex;
      gap: 32px;
      .app_store{
        max-width: 108px;
      }
      .google_play{
        max-width: 135px;
      }
    }
  }
}

#app_renewal .scroll_area_on{
  transform: translateY(0);
}

#app_renewal .mv_wrapper{
  width: 100%;
  height: 300px;
  background-image: url('/special/app_renewal/ndl/images/mv_bg_pc.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  .mv_area{
    margin: 0 auto;
    width: 960px;
    h1{
      margin-left: auto;
      width: 670px;
      padding-top: 65px;
      .mv_copy_1,.mv_copy_2,.mv_copy_3{
        display: block;
        overflow: hidden;
        .inner{
          transform: translateY(100%);
          display: block;
          width: 100%;
          height: 100%;
          transition: transform 0.6s cubic-bezier(0.83, 0, 0.17, 1);
        }
      }
      .mv_copy_1{
        margin-bottom: 24px;
      }
      .mv_copy_2{
        max-width: 512px;
      }
    }
  }
}

#app_renewal .app_contents_wrapper{
  .app_contents_area{
    max-width: 960px;
    margin: 0 auto 64px;
    .app_contents_inner{
      transition: 0.6s cubic-bezier(0.83, 0, 0.17, 1);
      margin-top: -215px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      position: relative;
      z-index: 1;
      opacity: 0;
      transform: translateY(40px);
      .app_block{
        width: 670px;
        background-color: #fff;
        border-radius: 40px;
        padding: 32px 0;
        h2{
          text-align: center;
          font-size: 24px;
          margin-bottom: 30px;
        }
        .app_btn_block{
          display: flex;
          justify-content: center;
          .app_store_block{
            width: 163px;
            margin-right: 80px;
            .qr{
              margin-top: 10px;
              img{
                max-width: 110px;
                margin: 0 auto;
              }
            }
          }
          .google_play_block{
            width: 203px;
            .qr{
              margin-top: 10px;
              img{
                max-width: 110px;
                margin: 0 auto;
              }
            }
          }
        }
      }
      .mock{
        max-width: 250px;
        margin-bottom: -20px;
      } 
    }
  }
}

#app_renewal .anchor_wrapper{
  .anchor_area{
    width: 960px;
    margin: 0 auto;
    .anchor_inner{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .anchor_btn{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 310px;
        height: 50px;
        border-radius: 8px;
        border: 2px solid #0f9ca7;
        background-color: #fff;
        transition: .6s cubic-bezier(0.16, 1, 0.3, 1);
        position: relative;
        color: #0f9ca7;
        font-weight: 600;
        font-size: 16px;
        margin-bottom: 32px;
        .arrow{
          display: block;
          width: 21px;
          height: 21px;
          position: absolute;
          bottom: 14px;
          right: 22px;
          border-radius: 50%;
          border: 2px solid #0f9ca7;
          &::before,&::after{
            content: '';
            display: block;
            width: 8px;
            height: 1.5px;
            background-color: #0f9ca7;
            position: absolute;
            bottom: 7px;
          }
          &::before{
            left: 2.5px;
            transform: rotate(45deg);
          }
          &::after{
            right: 2.3px;
            transform: rotate(-45deg);
          }
        }
      }
      .anchor_btn:hover{
        background-color: #0f9ca7;
        color: #fff;
        .arrow{
          border: 2px solid #fff;
        }
        .arrow::before,.arrow::after{
          background-color: #fff;
        }
      }
    }
  }
}

#app_renewal .function_wrapper{
  .hd_block{
    background-image: url('/special/app_renewal/ndl/images/hd_bg.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 135px;
    margin-bottom: 64px;
    h2{
      font-size: 24px;
      color: #fff;
      line-height: 1.5;
      letter-spacing: 0.025em;
      text-align: center;
      padding-top: 32px;
    }
  }
  .function_area{
    width: 960px;
    margin: 0 auto 0;
    padding-bottom: 32px;
    .function_inner {
      background-color: #fff;
      border-radius: 4px;
      width: 100%;
      height: auto;
      margin-bottom: 32px;
      padding: 24px 0 24px 80px;
      position: relative;
      &::before{
        content: '';
        display: block;
        width: 87px;
        height: 87px;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
      }
      .function_flex{
        display: flex;
        .contents_block{
          width: 57%;
          .point{
            margin-bottom: 5px;
            img{
              max-width: 55px;
            }
          }
          h3{
            font-size: 40px;
            color: #0f9ca7;
            margin-bottom: 25px;
            font-weight: 600;
            line-height: 1.5;
          }
          h4{
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 24px;
            line-height: 1.5;
          }
        }
        .img_block{
          display: flex;
          justify-content: center;
          width: 43%;
          margin-top: -60px;
          .img_flex{
            display: flex;
            .app_img:nth-of-type(1),
            .app_img:nth-of-type(3){
              margin-right: 16px;
            }
          }
        }
      }
    }
    .num_01::before{
      background-image: url('/special/app_renewal/ndl/images/num_01.svg');
    }
    .num_02::before{
      background-image: url('/special/app_renewal/ndl/images/num_02.svg');
    }
    .num_03::before{
      background-image: url('/special/app_renewal/ndl/images/num_03.svg');
    }
  }
}


@media screen and (max-width: 768px) {

  .l_siteWrap.bg-trp .l_siteContents {
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .sp{
    display: block;
  }
  .pc{
    display: none;
  }

  #app_renewal .caution,#app_renewal .caution .link{
    font-size: 9px;
  }

    #app_renewal .marker {
      background: linear-gradient(transparent 80%, #fff116 40%);
  }

#app_renewal .scroll_area {
  padding: 8px 0;
    .scroll_inner {
      display: block;
      text-align: center;
      align-items: center;
      justify-content: center;
      .text{
        font-size: 16px;
        margin-bottom: 8px;
      }
      .btn_flex {
        margin-left: 0;
        display: flex;
        justify-content: center;
      }
    }
}

#app_renewal .new_p::before{
  bottom: 10px;
  left: 3px;
  width: 25px;
  height: 13px;
}

#app_renewal .mv_wrapper{
  height: 487px;
  background-image: url('/special/app_renewal/ndl/images/mv_bg_sp.svg');
  margin-bottom: 24px;
  .mv_area{
    width: 100%;
    padding: 0 16px;
    h1{
      width: 100%;
      padding-top: 32px;
    }
    .mock{
      max-width: 162px;
      margin: 24px auto 0;
      transform: translateY(60px);
      opacity: 0;
      transition: .6s cubic-bezier(0.65, 0, 0.35, 1);
    }
  }
}

  #app_renewal .anchor_wrapper {
      .anchor_area {
          width: 100%;
          margin: 0;
          padding: 0 16px;
          .anchor_inner{
            .anchor_btn{
              width: 47%;
              height: 40px;
              font-size: 12px;
              &::after{
                bottom: 12px;
                right: 5px;
                width: 13px;
                height: 13px;
              }
              .arrow {
                width: 13px;
                height: 13px;
                bottom: 11px;
                right: 5px;
                &::before,&::after{
                  bottom: 3px;
                  width: 5.5px;
                }
                &::before{
                  left: 0.9px;
                }
                &::after{
                  right: 0.6px;
                }
              }
            }
          }
      }
  }

#app_renewal .function_wrapper {
  .hd_block{
    height: 110px;
    margin-bottom: 32px;
    background-image: url('/special/app_renewal/ndl/images/hd_bg_sp.svg');
    h2{
      font-size: 18px;
      padding-top: 16px;
    }
  }
    .function_area {
        width: 100%;
        padding: 0 16px 32px;
        .function_inner{
          padding: 32px 24px;
          height: auto;
          &::before{
            width: 48px;
            height: 48px;
          }
          .function_flex{
            display: block;
            .contents_block{
              width: 100%;
              .hd_flex{
                display: flex;
                align-items: center;
                margin-bottom: 24px;
                .point{
                  margin-right: 10px;
                  margin-bottom: 0;
                  img{
                    max-width: 38px;
                  }
                  }
                  h3{
                    font-size: 24px;
                    margin-bottom: 0;
                  }
                }
              h4{
                font-size: 16px;
                line-height: 1.5;
                margin-bottom: 8px;
              }
            }
            .img_block{
              width: 100%;
              margin-top: 32px;
            }
          }
        }
    }
}

}