/******************************************************
  公式アプリ
******************************************************/
.app_main .sp640{
  display: none;
}
.dl_btns a{
  transition-duration: .3s;
}
.dl_btns a:hover{
  opacity: 0.75;
}
.app_title{
  position: relative;
  background-color: #5FC2D8;
  outline: 1px solid #fff;
  outline-offset: -25px; 
  margin-bottom: 30px;
  box-sizing: border-box;
}
.app_main .ribbon_ttl{
  position: relative;
  text-align: center;
  box-sizing: border-box;
  background:linear-gradient(120deg, transparent 12px, #5FC2D8 13px, #fff 14px),
    linear-gradient(60deg, transparent 12px, #5FC2D8 13px, #fff 14px),
    linear-gradient(300deg, transparent 12px, #5FC2D8 13px, #fff 14px),
    linear-gradient(240deg, transparent 12px, #5FC2D8 13px, #fff 14px);
  background-position: bottom left, top left, top right, bottom right;
  background-size: 50% 50%;
  background-repeat: no-repeat;  
  margin-bottom: 30px;
  line-height: 50px;
}
.app_main .ribbon_ttl::before,
.app_main .ribbon_ttl::after{
  display: block;
  content: "";
  width: auto;
}
.app_main .ribbon_ttl::before{
  border-top: solid 1px #5FC2D8;
}
.app_main .ribbon_ttl::after{
  border-bottom: solid 1px #5FC2D8;
}
.app_main .merit_list{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 60px;
}
.app_main .merit_list li{
  box-sizing: border-box;
  border-radius: 25px;
  position: relative;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: flex-end;
  -ms-align-items: center;
  align-items: center;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;  
}
.app_main .merit_list li:nth-child(1),
.app_main .merit_list li:nth-child(4),
.app_main .merit_list li:nth-child(5){
  border: 1px solid #DFDFDF;
}
.app_main .merit_list li:nth-child(2),
.app_main .merit_list li:nth-child(3),
.app_main .merit_list li:nth-child(6){
  background-color: #5FC2D81A;
}
.app_main .merit_list li .txt_top{
  padding: 35px 25px 0;
  width: 100%;
}
.app_main .merit_list li .txt_top .tl{
  position: relative;
  font-weight: bold;
  font-size: 1.8rem;
  padding-left: 66px;
  margin-bottom: 20px;
}
.app_main .merit_list li .txt_top .tl::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0,-50%);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 59px;
  height: 61px;
}
.app_main .merit_list li#merit01 .txt_top .tl::before{
  background-image: url(https://ilex.itembox.design/item/images/app_ico_merit1.svg);
}
.app_main .merit_list li#merit02 .txt_top .tl::before{
  background-image: url(https://ilex.itembox.design/item/images/app_ico_merit2.svg);
}
.app_main .merit_list li#merit03 .txt_top .tl::before{
  background-image: url(https://ilex.itembox.design/item/images/app_ico_merit3.svg);
}
.app_main .merit_list li#merit04 .txt_top .tl::before{
  background-image: url(https://ilex.itembox.design/item/images/app_ico_merit4.svg);
}
.app_main .merit_list li#merit05 .txt_top .tl::before{
  background-image: url(https://ilex.itembox.design/item/images/app_ico_merit5.svg);
}
.app_main .merit_list li#merit06 .txt_top .tl::before{
  background-image: url(https://ilex.itembox.design/item/images/app_ico_merit6.svg);
}
.app_main .merit_list li .img{
  width: 100%;
  margin-top: auto;
  position: relative;
  text-align: center;
}
.app_main .merit_list li#merit05 .img::before{
  content: "";
  position: absolute;
  top: 30px;
  left: 13.5484%;
  background-image: url(https://ilex.itembox.design/item/images/app_merit5_charm.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 44px;
  height: 61px;
}
.app_main .merit_list li .img .ico{
  position: absolute;
  top: 0;
  right: 17px;
}
.app_main .dwl_ttl{
  margin-bottom: 21px;
}
.app_main .dwl_ttl span{
  display: block;
  text-align: center;
}
.app_main .dwl_ttl .ico{
  margin-bottom: 15px;
}
.app_main .dl_btns{
  text-align: center;
}
@media screen and (min-width: 769px){
  .app_title{
    padding: 45px 38px 12px;
  }
  .app_title .title_inner{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
  }
  .app_title .title_inner.sp{
    display: none!important;
  }
  .app_title .title_inner > img{
    z-index: 1;
  }
  .app_title .title_inner .txt_r{
    padding-bottom: 44px;
  }
  .app_title .title_inner .txt_r .catch{
    margin-bottom: 45px;
  }
  .app_title .title_inner .txt_r .txt{
    margin-bottom: 18px;
  }
  .app_title .title_inner .ico_dl_now{
    position: absolute;
    right: 4.122%;
    bottom: 25px;
  }
}
@media screen and (max-width: 768px){
  .app_title{
    outline-offset: -10px;
    padding: 7.4667% 0 0;
  }
  .app_title .title_inner.pc{
    display: none!important;
  }
  .app_title .title_inner .catch{
    width: 86.8000%;
    margin: 0 auto 5px;
  }
  .app_title .title_inner .ttl_flex > img{
    padding-bottom: 3%;
  }
  .app_title .title_inner .ico_renewal{
    position: absolute;
    right: 5.7333%;
    top: 18.7333%;
    width: 16.4000%;
  }
  .app_title .title_inner .ttl_flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    padding-left: 2.6667%;
  }
  .app_title .title_inner .txt_r{
    flex: 1;
  }
  .app_title .title_inner .sub_c{
    margin-bottom: 20px;
  }
  .app_title .title_inner .txt{
    font-size: 1.6rem;
    margin-bottom: 25px;
    line-height: 1.45;
  }
  .app_title .title_inner .ico_dl_now{
    position: absolute;
    right: 2.6667%;
    bottom: 14.2%;
    width: 21.1333%;
  }
  .app_title .title_inner .dl_btns a{
    display: block;
    margin-top: 5px;
    width: 51.8868%;
  }
  .app_title .title_inner .dl_btns a img{
    width: 100%;
  }
  .app_main{
    padding: 0 15px;
  }
  .app_main .ribbon_ttl img{
    width: 70%;
  }
  .app_main .merit_list li .txt_top{
    padding: 25px 5% 0;
  }
  .app_main .merit_list li .txt_top .tl{
    font-size: 1.5rem;
    padding-left: 55px;
  }
  .app_main .merit_list li .txt_top .tl::before{
    width: 45px;
    height: 47px;  
  }
  .app_main .merit_list li:not(#merit06) .img > img{
    width: 58.9247%;
  }
  .app_main .merit_list li .img .ico{
    width: 19.3548%;
    right: 3.6559%;
  }
}
@media screen and (max-width: 767px){
  .fs-l-pageMain{
    padding: 0;
  }
}
@media screen and (min-width: 641px){
  .app_main .merit_list{
    justify-content: space-between;
  }
  .app_main .merit_list li{
    width: 48.9474%;
    margin-bottom: 20px;
  }
  .app_main .merit_list li:nth-child(2n){
    margin-right: 0;
  }
  .app_main .merit_list li:nth-last-child(-n+2){
    margin-bottom: 0;
  }
}
@media screen and (max-width: 640px){
  .app_title .title_inner .ttl_flex > img{
    width: 38%;
  }
  .app_title .title_inner .ico_renewal{
    top: 16.7333%;
  }  
  .app_title .title_inner .sub_c{
    margin-bottom: 40px;
    width: 61.3208%;
  }
  .app_title .title_inner .txt{
    font-size: 1.0rem;
    margin-bottom: 10px;
  }
  .app_title .title_inner .dl_btns a{
    margin-top: 3px;
  }
  .app_main .sp640{
    display: block;
  }
  .app_main .ribbon_ttl img{
    width: 85%;
  }
  .app_main .merit_list{
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
  }
  .app_main .merit_list li{
    width: 100%;
  }
  .app_main .merit_list li + li{
    margin-top: 20px;
  }
  .app_main .merit_list li#merit05 .img::before{
    width: 34px;
    height: 47px;  
  }
}