@charset "utf-8";
/* CSS Document */
.skr_estimatebody{padding: 80px 0 112px;}


.skr_simulationslider .skr_slidepageone>p{
  margin-bottom: 20px;
  text-align: center;
  font-size: 1.25rem;
  color: #383935;
}
.skr_simulationslider .skr_slidepageone h2{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 80px;
}
.skr_simulationslider .skr_slidepageone h2 p{
  letter-spacing: 0.1em;
  font-size: 3.125rem;
  font-weight: bold;
  color: #383935;
}
.skr_simulationslider .skr_slidepageone h2 p:first-of-type{margin-right: 12px;}
.skr_simulationslider .skr_slidepageone h2 p .skr_pi{color: #F16885;}
.skr_simulationslider .skr_slidepageone .skr_iconslide{margin-bottom: 80px;}
.skr_simulationslider .skr_slidepageone .skr_iconslide .slick-list{padding: 32px 0 !important;}
.skr_simulationslider .skr_slidepageone .skr_iconslide p{
  margin: 0 48px;
  color: #93B6C7;
}
.skr_simulationslider .skr_slidepageone .skr_iconslide p svg{
  width: 120px;
  height: 120px;
  text-align: center;
  fill:currentColor;
  transition: all 1s ease;
  transform-origin: 50% 50%;
}
.skr_simulationslider .skr_slidepageone .skr_iconslide p.slick-active{color: #f16885;}
.skr_simulationslider .skr_slidepageone .skr_iconslide p.slick-active svg{transform: scale(1.75);}
.skr_startbtn{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 54px;
  margin: auto;
  color: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
}
.skr_startbtn::before{
  content: "";
  position: absolute;
  top: -73px;
  left: 0;
  display: block;
  width: 200px;
  height: 200px;
  transition: all 0.25s linear;
  background: linear-gradient(90deg, #F16885 0%, #F7BB97 100%) 0% center;
}
.skr_startbtn::after{
  content: "";
  position: absolute;
  display: block;
  width: 18px;
  height: 18px;
  top: calc(50% - 9px);
  right: 14px;
  background: url("img/icon_arw.svg") center center no-repeat;
  z-index: 1;
}
.skr_startbtn label,
.skr_startbtn img{
  position: relative;
  z-index: 1;
}


.skr_slidepageone{overflow: hidden;}
.skr_simulationslider figure:focus{
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  outline: 0;
}
.skr_simulationslider figure p.skr_progress{margin-bottom: 44px;}
.skr_simulationslider figure p.skr_progress img{max-width: 100%;}
.skr_simulationslider figure p.skr_iconimage{margin-bottom: 44px;}
.skr_simulationslider figure p.skr_iconimage img{height: 110px;}
.skr_simulationslider figure img{margin: auto;}
.skr_simulationslider h3{
  margin-bottom: 40px;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 2rem;
  font-weight: bold;
  color: #383935;
}
.skr_simulationslider figure figcaption ul{
  display: flex;
  justify-content: center;
  margin-bottom: 60px;
}
.skr_simulationslider figure figcaption ul.skr_mgnshort{margin-bottom: 40px;}
.skr_simulationslider figure:nth-of-type(n+2) figcaption ul li:nth-last-of-type(n+2){margin-right: 30px;}
.skr_simulationslider figure:nth-of-type(n+2) figcaption ul li{
  transition: all 0.15s linear 0.5s;
  transform: translateY(20px);
  opacity: 0;
}
figure:nth-of-type(n+2).slick-active figcaption ul li{
  transform: translateY(0);
  opacity: 1;
}
figure:nth-of-type(n+2).slick-active figcaption ul li:nth-of-type(2){transition-delay: 0.7s;}
figure:nth-of-type(n+2).slick-active figcaption ul li:nth-of-type(3){transition-delay: 0.9s;}
.skr_simulationslider figure figcaption ul li label{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 160px;
  height: 160px;
  text-align: center;
  border-radius: 100%;
  border: 3px solid #CCCCCC;
}
.skr_simulationslider figure figcaption ul li.active label{
  color: #FFFFFF;
  border: none;
  background-color: #E080A4;
}
.skr_simulationslider figure figcaption ul li.active label.skr_check::after{
  content: "";
  position: absolute;
  display: block;
  width: 34px;
  height: 30px;
  top: 14px;
  left: calc(50% - 17px);
  background: url("img/icon_check.svg") center center no-repeat;
}


.skr_slideback{
  display: block;
  width: 200px;
  height: 54px;
  margin: auto;
  padding-top: 12px;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 1.125rem;
  font-weight: bold;
  color: #93B6C7;
  border-radius: 27px;
  background-color: #FFFFFF;
  border: 2px solid #93B6C7;
}

div.skr_startbtn{margin-bottom: 32px;}



.skr_result h4{
  margin-bottom: 40px;
  text-align: center;
  letter-spacing: 0.1em;
  font-weight: bold;
  font-size: 2rem;
  color: #383935;
}
.skr_result div{
  margin-bottom: 40px;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 1.5rem;
  color: #383935;
}
.skr_result div:nth-of-type(2){margin-bottom: 60px;}
.skr_result div *{vertical-align: baseline;}
.skr_result div b{
  margin-right: 16px;
  font-weight: bold;
  font-size: 3.125rem;
  color: #F16885;
}
.skr_result div a{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 350px;
  height: 54px;
  margin: 0 auto 24px;
  letter-spacing: 0.1em;
  font-size: 1.125rem;
  color: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
}
.skr_result div a::before{
  content: "";
  position: absolute;
  display: block;
  top: -148px;
  left: 0;
  width: 350px;
  height: 350px;
  transition: all 0.25s linear;
  background: linear-gradient(90deg, #F16885 0%, #F7BB97 100%) 0% center;
}
.skr_result div a span{
  position: relative;
  z-index: 1;
}
.skr_result div a::after{
  content: "";
  position: absolute;
  display: block;
  width: 18px;
  height: 18px;
  top: calc(50% - 9px);
  right: 14px;
  background: url("img/icon_arw.svg") center center no-repeat;
  z-index: 1;
}
.skr_result div p{
  padding: 0 16px;
  font-size: 0.875rem;
}

.skr_result ul{
  display: flex;
  justify-content: center;
}
.skr_result ul li:first-of-type{margin-right: 30px;}






@media screen and (min-width:821px){
  .skr_startbtn:hover::before{transform: rotate(180deg);}
  .skr_slideback:hover{
    color: #FFFFFF;
    background-color: #93B6C7;
  }
  .skr_simulationslider figure figcaption ul li label:hover{
    color: #F16885;
    border-color: #F16885;
  }
  .skr_result div a:hover::before{transform: rotate(180deg);}
}






@media screen and (max-width:1000px){
  .skr_simulationslider .skr_slidepageone h2 p{font-size: 5vw;}
  .skr_simulationslider .skr_slidepageone h2 p img{width: 8vw;}
  .skr_simulationslider h3{font-size: 3.2vw;}
}
@media screen and (max-width:820px){
  .skr_simulationslider figure p.skr_progress{padding: 0 16px;}
  .skr_simulationslider figure figcaption ul li label{
    width: 19.5vw;
    height: 19.5vw;
    font-size: 1.9vw;
  }
  .skr_simulationslider figure:nth-of-type(n+2) figcaption ul li:nth-last-of-type(n+2){margin-right: 3.6vw;}
  .skr_simulationslider figure figcaption ul li.active label.skr_check::after{
    width: 4.1vw;
    height: 3.6vw;
    left: calc(50% - 2vw);
    background-size: contain;
  }


  .skr_result div a::before{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
}
@media screen and (max-width:720px){/*特別指定*/
  .skr_result div p{text-align: left;}
}
@media screen and (max-width:428px){
  .skr_estimatebody{padding: 32px 0 80px;}
  .skr_spbr{display: inline-block;}

  .skr_simulationslider figure{
    width: 100vw !important;
    padding: 0 5vw;
  }
  .skr_simulationslider figure.skr_slidepageone{padding: 0;}
  .skr_simulationslider .skr_slidepageone>p{font-size: 0.75rem;}
  .skr_simulationslider .skr_slidepageone h2{
    width: 328px;
    margin: 0 auto 60px;
  }
  .skr_simulationslider .skr_slidepageone h2 p img{
    width: 44px;
    height: 44px;
  }
  .skr_simulationslider .skr_slidepageone h2 p{font-size: 1.5rem;}
  .skr_simulationslider .skr_slidepageone h2 p .skr_blocktxt{
    display: block;
    font-size: 1rem;
  }
  .skr_simulationslider .skr_slidepageone .skr_iconslide p{margin: 0 24px;}
  .skr_simulationslider .skr_slidepageone .skr_iconslide p svg{
    width: 64px;
    height: 64px;
  }
  .skr_simulationslider .skr_slidepageone .skr_iconslide p.slick-active svg{transform: scale(1.75);}

  .skr_simulationslider figure p.skr_progress{margin-bottom: 24px;}
  .skr_simulationslider figure p.skr_iconimage{margin-bottom: 24px;}
  .skr_simulationslider figure p.skr_iconimage img{height: 80px;}
  .skr_simulationslider h3{
    height: 54px;
    margin-bottom: 32px;
    font-size: 1.125rem;
  }
  .skr_simulationslider figure:nth-of-type(n+2) figcaption ul{
    flex-wrap: wrap;
    margin-bottom: 64px;
  }
  .skr_simulationslider figure:nth-of-type(n+2) figcaption ul li:nth-last-of-type(n+2){margin-right: 0;}
  .skr_simulationslider figure:nth-of-type(n+2) figcaption ul li:first-of-type{margin-right: 45px;}
  .skr_simulationslider figure figcaption ul li label{
    width: 124px;
    height: 124px;
    font-size: 0.875rem;
  }

  .skr_slideback{
    width: 140px;
    height: 32px;
    padding-top: 4px;
    font-size: 0.875rem;
  }

  .skr_result h4{font-size: 1.5rem;}
  .skr_result div{
    margin-bottom: 80px;
    font-size: 0.875rem;
  }
  .skr_result div b{font-size: 2.5rem;}
  .skr_result div a{width: 100%;}
  .skr_result ul{display: block;}
  .skr_result ul li:first-of-type{margin: 0 0 20px;}
}