@charset "utf-8";
/* CSS Document */

*{
   margin: 0;
   padding: 0;
}
*, ::before, ::after {
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
}

.txt-yellow{
   color: #f8ff40;
}

.pc_only{
    display: block;
}
.sp_only{
    display: none;
}


@media only screen and (max-width: 767px){
   .pc_only{
       display: none;
   }
   .sp_only{
       display: block;
   }
}


/* fv
---------------------------------------------*/

.fv{
   background: #1959c2;
   padding-top: 50px;
}
.fv::before{
   display: none;
}
.fv-wrap{
   text-align: center;
}
.fv_balloon{
   font-size: 19px;
   position: relative;
   display: inline-block;
   padding: 5px 24px;
   background: #fff;
   color: #1959c2;
   border-radius: 9999px;
   font-weight: 700;
   margin-bottom: 20px;
}
.fv_balloon::after{
   content: "";
   position: absolute;
   left: 40px;
   bottom: -12px;
   width: 0;
   height: 0;
   border-top: 16px solid #fff;
   border-left: 12px solid transparent;
}
.fv_tit{
   font-size: 38px;
   font-weight: 700;
   line-height: 140%;
   color: #fff;
}
.fv_tit span.size-normal{
   font-size: 38px;
}
.fv_tit span.txt-yellow{
   font-size: 42px;
}
.fv-img{
   position: relative;
   bottom: -20px;
}

@media only screen and (max-width: 767px){
   .fv{
      padding-top: 120px;
   }
   .lp-bss-alc .fv,
   .lp-bss-alc-transfer .fv{
      padding-top: 40px;
   }
   .fv_balloon{
      font-size: 3.5vw;
      margin-bottom: 30px;
   }
   .fv_tit{
      font-size: 5.7vw;
      margin-bottom: 2vh;
   }
   .fv_tit span.size-normal{
      font-size: 5.7vw;
   }
   .fv_tit span.txt-yellow{
      font-size: 6vw;
   }
   .fv-img{
      padding: 0 15px;
   }

}

/* mainconts
---------------------------------------------*/
.mainconts{
   padding: 90px 0;
   text-align: center;
}
.mainconts__catch{
   font-size: 20px;
   font-weight: 700;
}
.mainconts__title{
   font-size: 30px;
   font-weight: 700;
   line-height: 140%;
   color: #1959c2;
   margin-bottom: 40px;
}

@media only screen and (max-width: 767px){
   .mainconts{
      padding: 7vh 20px;
   }
   .mainconts__catch{
      font-size: 3.5vw;
      margin-bottom: 1vh;
   }
   .mainconts__title{
      font-size: 4.4vw;
      margin-bottom: 2vh;
   }
}


/* guide
---------------------------------------------*/
.guide{
   max-width: 1100px;
   margin: auto;
}
.guide__list{
   display: flex;
   margin: 0;
   padding: 0;
   list-style: none;
   border: 6px solid #e4e4e4;
   border-radius: 15px;
   overflow: hidden;
   background: #fff;
}
.guide__item{
   flex: 1;
}
.guide__item + .guide__item{
   border-left: 1px solid #e4e4e4;
}
.guide__item a{
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 100px;
   padding: 8px 8px 12px;
   color: #1959c2;
   font-size: 18px;
   font-weight: 700;
   line-height: 140%;
   text-align: center;
   text-decoration: none;
   transition: .3s;
}
.guide__item a:hover{
   background: #f5f8ff;
}
.guide__item a::after{
   display: block;
   content: "";
   width: 16px;
   height: 8px;
   background: url("../img/dr-01/guide-icon.png") no-repeat center;
   background-size: cover;
   position: absolute;
   left: 0;
   right: 0;
   bottom: 8px;
   margin: auto;
}
@media screen and (max-width: 767px){
   .guide__list{
      flex-wrap: wrap;
      margin: 0 20px;
      border: 3px solid #e4e4e4;
      border-radius: 10px;
   }
   .guide__item{
      width: 33.333%;
      flex: none;
      border-left: 1px solid #e4e4e4;
      border-top: 1px solid #e4e4e4;
   }
   .guide__item:nth-child(1),
   .guide__item:nth-child(4){
      border-left: none;
   }
   .guide__item:nth-child(-n+3){
      border-top: none;
   }
   .guide__item:nth-child(4),
   .guide__item:nth-child(5){
      width: 50%;
   }
   .guide__item:nth-child(4){
      border-left: none;
      border-top: 1px solid #e4e4e4;
   }
   .guide__item:nth-child(5){
      border-top: 1px solid #e4e4e4;
   }
   .guide__item a{
      min-height: 80px;
      font-size: 15px;
   }
}
@media screen and (max-width: 640px){
   .guide{
      padding-bottom: 20px;
   }
   .guide__item a{
      font-size: 13px;
      min-height: 70px;
   }
   .guide__item a::after{
      width: 12px;
      height: 6px;
   }
}
@media screen and (max-width: 360px){
   .guide__item a{
      font-size: 12px;
   }
}


/* point
---------------------------------------------*/
.point{
   max-width: 1100px;
   margin: auto auto 80px;
}
.point_box{
   margin-top: 100px;
   border: 10px solid #eceff6;
}
.point-head{
   position: relative;
   background: #eceff6;
   padding-left: 228px;
}
@media screen and (max-width: 767px){
   .point{
      padding: 0 15px;
      margin-bottom: 50px;
   }
   .point-head{
      padding-left: 0;
      padding: 0;
   }
   .point_box{
      margin-top: 70px;
      border-width: 5px;
   }
}
@media screen and (max-width: 640px){
   .point_box{
      margin-top: 50px;
   }
   
}

/* point_box
-------------------------------*/
.point-head__hito{
   position: absolute;
   left: 36px;
   bottom: 0;
}
.point-head__tit{
   color: #1959c2;
   font-size: 32px;
   font-weight: 700;
   line-height: 140%;
   padding-bottom: 30px;
   margin-top: -15px;
}
.point-head__balloon{
   position: relative;
   top: -30px;
   display: inline-block;
   padding: 6px 20px;
   border: 3px solid #1959c2;
   background-color: #ffffff;
   border-radius: 50px;
   color: #1959c2;
   font-weight: 700;
   font-size: 18px;
}
.point-head__balloon::before{
   position: absolute;
   left: 50px;
   bottom: -14px;
   content: "";
   display: block;
   background: url("../img/dr-01/balloon.png") no-repeat center;
   width: 13px;
   height: 14px;
}
.pount-conts{
   font-size: 18px;
   text-align: center;
   padding: 40px 40px 50px;
}
.pount-conts p{
   margin-bottom: 1.2em;
}

@media screen and (max-width: 767px){
   .point-head__hito{
      max-width: 80px;
      left: 10px;
      top: -60px;
   }
   .point-head__balloon{
      top: -20px;
      font-size: 16px;
      line-height: 120%;
      margin-left: 100px;
      border-width: 2px;
   }
   .point-head__balloon:before,
   .point-head__balloon:after {
       position: absolute;
       top: 100%;
       left: 30px;
       height: 0;
       width: 0;
       border: solid transparent;
       content: "";
      background: none;
   }
   .point-head__balloon:before{
      margin-left:-3px;
      border-style:solid;
      border-color:transparent;
      border-width:9px 5px 0;
      border-top-color:#1959c2;
}

   .point-head__balloon:after{
      margin-left:-2px;
      border-style:solid;
      border-color:transparent;
      border-width:8px 4px 0;
      border-top-color:#fff;
   }
   .point-head__tit{
      font-size: 22px;
      text-align: center;
      margin-top: 0;
      padding: 0 25px 25px;
   }
   .pount-conts{
      font-size: 16px;
   }
}
@media screen and (max-width: 640px){
   .point-head__balloon{
      font-size: 12px;
      font-weight: normal;
      margin-left: 75px;
      margin-right: 10px;
      padding: 5px 15px;
      border-width: 1px;
   }
   .point-head__hito{
      width: 20%;
      top: -40px;
      max-width: 65px;
   }
   .point-head__tit{
      font-size: 18px;
      padding: 0 15px 20px;
      margin-top: -6px;
   }
   .pount-conts{
      font-size: 13px;
      text-align: left;
      padding: 20px 20px 30px;
   }
}
/* cta
---------------------------------------------*/
.cta{
   text-align: center;
   margin-bottom: 100px;
   padding: 0 20px;
}
.cta__text{
   font-size: 23px;
   font-weight: 700;
   margin-bottom: 1em;
}
.cta__text-btn{
   font-size: 24px;
   max-width: 450px;
   width: auto;
   margin: auto;
}
.cta__text-btn a{
   width: 100%;
   height: 80px;
   line-height: 80px;
}
@media only screen and (max-width: 640px){
   .cta{
      margin-bottom: 70px;
   }
   .cta__text{
      font-size: 16px;
   }
   .cta__text-btn{
      font-size: 15px;
   }
   .cta__text-btn a{
      height: 60px;
      line-height: 60px;
   }
}