@charset "UTF-8";

html { scroll-behavior: smooth;}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
overflow-x: hidden;
!important;
}

.pc{
  display: block;
  !important;
}

.sp{
  display: none;
  width: 100%;
}

@media screen and (max-width: 750px){
  .pc{
    display: none;
    !important;
  }

  .sp{
    display: block;
    !important;
    width: 100%;
  }

}

img{
    width: 100%;
    height: auto;
    vertical-align: top;
}

body[style] #floating {
    display: none;

}

#wrapper, #top{
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    font-size: clamp(10px,4vw,20px);
    overflow-x: hidden;
    position: relative;
}
@media screen and (max-width: 750px){
#wrapper, #top{
    width: 100%;
    position: relative;
}
}

#top .kv{
   width: 100%;
  margin: 0 auto;
  position: relative;

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

.w750{
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}




.cta{
  position: absolute;
    width: 84%;
    margin: 0 8%;
    z-index: 2;
}


#lp_2507drbp,
#offer01,
#offer02,
#offer03,
#offer04,
#sec02_2507drbp,
#sec03_2507drbp,
#sec04_2507drbp,
#sec04_ttl,
#sec04_01_2507drbp,
#sec04_02_2507drbp,
#sec04_03_2507drbp,
#sec04_04_2507drbp,
#sec05_2507drbp,
#sec06_2507drbp,
#sec07_2507drbp,
#sec08_faq{
      width: 100%;
      position: relative;
    }

#lp_2507drbp{
  background: #fff;
background: linear-gradient(28deg,rgba(147, 194, 237, 0.7) 0%, rgba(219, 219, 255, 0.76) 48%, rgba(240, 253, 255, 0.84) 100%);
}


#offer01 .cta,
#offer03 .cta{
  top: 70.5%;
}

#offer02 .cta,
#offer04 .cta{
  top: 55.5%;
}

#offer01 .cta img,
#offer02 .cta img{
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  }

#sec02_2507drbp{
      margin: 0 auto;
      width: 100%;
      /* background: url("../img/02_sec_bg.jpg") no-repeat 0 0 / 100% 100%; */
    }

#sec03_2507drbp{
          margin: 0 auto;
          width: 100%;
          background: url("../img/03_sec_bg.jpg") no-repeat 0 0 / 100% 100%;
        }


#sec04_01_2507drbp{
    margin: 0 auto;
    width: 100%;
    background: url("../img/04_sec01_bg.jpg") no-repeat 0 0 / 100% 100%;
    }
#sec04_02_2507drbp{
    margin: 0 auto;
    width: 100%;
    background: url("../img/04_sec02_bg.jpg") no-repeat 0 0 / 100% 100%;
    }
#sec04_03_2507drbp{
    margin: 0 auto;
    width: 100%;
    background: url("../img/04_sec03_bg.jpg") no-repeat 0 0 / 100% 100%;
    }
#sec04_04_2507drbp{
    margin: 0 auto;
    width: 100%;
    background: url("../img/04_sec04_bg.jpg") no-repeat 0 0 / 100% 100%;
    }
#sec05_2507drbp{
    margin: 0 auto;
    width: 100%;
    background: url("../img/05_sec_bg.jpg") no-repeat 0 0 / 100% 100%;
    }
#sec06_2507drbp{
    margin: 0 auto;
    width: 100%;
    background: url("../img/06_sec_bg.jpg") no-repeat 0 0 / 100% 100%;
    }


#cp2503_100{
      margin: 0 auto;
      width: 100%;
      padding-bottom: 5%;
      background-color: #e6ecf5;
    }
    #sec_bnr{
          margin: 0 auto;
          padding: 10%;
          background-color: #FFF;
        }

/*フローティング*/
.floating-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: none;
}

/* PC用（例: 横幅751px以上） */
@media screen and (min-width: 751px) {
  .floating-button {
    bottom: 10%;
    right: 10%;
  }
}

/* スマホ用（例: 横幅750px以下） */
@media screen and (max-width: 750px) {
  .floating-button {
    bottom: 5px;
    right: 5px;
  }
}

.floating-button img {
  width: 150px;
  height: auto;
}


    /*アコーディオン*/
    #sec08_faq {background-color: #f3f3f3; padding-bottom: 5%;}
    #sec08_faq .toggle_contents {margin:0% 0% 5% 10%;}
    #sec08_faq .toggle_title {position: relative;padding: 4%;cursor: pointer;font-size: 105%;text-align: left;line-height: 1;font-weight: 500;border-radius:0px; color: #000; background-color: #FFF; padding-left: 15%; line-height: normal;}
    #sec08_faq .toggle_btn {position: absolute;top: 50%;left:20px;transform: translateY(-50%);background: #FFF;display: block;width: 24px;height: 24px;text-indent: 100%;white-space: nowrap;overflow: hidden;border-radius: 50%;}
    #sec08_faq .toggle_btn:before, .toggle_btn:after {display: block;content: '';background-color: #333;position: absolute;width: 10px;height: 1px;top: 50%;left: 50%;transform: translate(-50%, -50%);}
    #sec08_faq .toggle_btn:before {width: 1px;height: 10px;}
    #sec08_faq .toggle_title.selected .toggle_btn:before {content: normal;}
    #sec08_faq .toggle_contents dd {display: none;}
    #sec08_faq .toggle_contents dd {padding: 5% 5% 5% 10%; margin: 0;background: #FFF; }
    #sec08_faq .toggle_contents dd h5{line-height:1.6;text-align:left; padding:5px 2px;;margin:5px 0 10px 0;color:#333;font-size:88%;}
    #sec08_faq .toggle_contents dd h5 span{font-weight:200; font-size:75%;}
    #sec08_faq .toggle_contents dd p{line-height:1.6;text-align:left;font-size:92%;padding:5px 2px 15px 2px;color:#333333;}
    #sec08_faq .toggle_contents dd p.red{ font-weight: bold;line-height:1.6;text-align:left;font-size:92%;padding:5px 2px 15px 2px; color:#b51d1d;}
    .attention {color: #000 !important;}
    .supplement_bnr {
      width: 100%;
      max-width: 480px;
      margin: 2em auto 2em;
    }




    /*エフェクト*/

    /* --- 下からふわっと --- */
    .fadeUpTrigger {
      opacity: 0;
      transform: translateY(15px);
      transition: all 1.5s ease-out;
    }
    .fadeUpTrigger.fadeUp {
      opacity: 1;
      transform: translateY(0);
    }

    /* --- シンプルフェードイン --- */
    .fade-in-simple {
      opacity: 0;
      transition: opacity 1.5s ease;
    }
    .fade-in-simple.visible {
      opacity: 1;
    }

    /* --- スケールでふわっと --- */
    .fade-in-fuwa {
      opacity: 0;
      transform: scale(0.95);
      transition: opacity 1.5s ease, transform 1.5s ease;
    }
    .fade-in-fuwa.visible {
      opacity: 1;
      transform: scale(1);
    }

    /* --- 左からスライドイン --- */
    .fadeLeftTrigger {
      opacity: 0;
      transform: translateX(-30px);
      transition: all 1.2s ease-out;
    }
    .fadeLeftTrigger.fadeLeft {
      opacity: 1;
      transform: translateX(0);
    }

    /* --- 右からスライドイン --- */
    .fadeRightTrigger {
      opacity: 0;
      transform: translateX(30px);
      transition: all 1.2s ease-out;
    }
    .fadeRightTrigger.fadeRight {
      opacity: 1;
      transform: translateX(0);
    }