@charset "UTF-8";
/* 口座開設ボタン update */
.btn_grad {
  color: #fff;
  /* background-color: #c9171e; */
  background-image: linear-gradient(45deg, #02c100 0%, #0fde02 100%);
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  line-height: normal;
  text-decoration: none;
  border: 1px solid #44a703f7;
  padding: 14px 20px;
  font-size: 18px;
  margin: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.btn_grad:hover{
  color: #fff;
}
 
/* ボタンを光らせる */
.btn_grad:before {
  /*光るアニメーション用*/
  animation: shine 5s ease-in-out infinite;/*数字を変更することで光る間隔が変更*/
  background-color: #fff;
  content: " ";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: -180px;
  transform: rotate(45deg);
  width: 30px;
}

 
@keyframes shine {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}




#modal a {display: inline-block;background: rgb(0, 179, 6);background: -moz-linear-gradient(left, rgb(0, 179, 6) 0%,rgb(27, 216, 2) 100%);background: -webkit-linear-gradient(left, rgb(0, 179, 6) 0%,rgb(27, 216, 2) 100%);background: linear-gradient(to right, rgb(0, 179, 6) 0%,rgb(27, 216, 2) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fdcf2', endColorstr='#ca78f2',GradientType=1 ); text-align: center;border-radius: 30px 0 30px 30px;padding: 25px 45px;font-weight: 900;color: #FFF;font-size: 30px;margin: 1em auto 0;box-shadow: 0px 15px 30px rgba(0, 0, 0, .1), 0px 15px 30px rgba(0, 0, 0, .1);}
.mainvisual .txt a {background: #15bb00;background: url(../images/next_w.png)no-repeat center right 15px, -moz-linear-gradient(left, #15bb00 0%, #37d205 100%);
  background: url(../images/next_w.png)no-repeat center right 15px, -webkit-linear-gradient(left, #15bb00 0%, #37d205 100%);
  background: url(../images/next_w.png)no-repeat center right 15px, linear-gradient(to right, #15bb00 0%, #37d205 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ac7ff', endColorstr='#c529e7',GradientType=1 );
  width: 16em;border: 2px solid #FFF;text-align:center;border-radius:30px 0 30px 30px;padding: 15px 15px;font-weight:900;color:#FFF;font-size: 2.2vw;margin: 2em auto 0;box-shadow: 0px 15px 30px rgba(0, 0, 0, .1), 0px 15px 30px rgba(0, 0, 0, .1);}

.accountOpen .content a {background: #15bb00;background: url(../images/next_w.png)no-repeat center right 15px, -moz-linear-gradient(left, #15bb00 0%, #37d205 100%);
  background: url(../images/next_w.png)no-repeat center right 15px, -webkit-linear-gradient(left, #15bb00 0%, #37d205 100%);
  background: url(../images/next_w.png)no-repeat center right 15px, linear-gradient(to right, #15bb00 0%, #37d205 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ac7ff', endColorstr='#c529e7',GradientType=1 );
  width: 18em;border: 2px solid #FFF;text-align:center;border-radius:30px 0 30px 30px;padding: 25px 15px;font-weight:900;color:#FFF;font-size: 2.2vw;margin: 0 auto 0;box-shadow: 0px 15px 30px rgba(0, 0, 0, .1), 0px 15px 30px rgba(0, 0, 0, .1);}

.mainvisual-accountopen .mainvisual-accountopen-btn-box a {
  background: #15bb00;background: url(../images/next_w.png)no-repeat center right 15px, -moz-linear-gradient(left, #15bb00 0%, #37d205 100%);
  background: url(../images/next_w.png)no-repeat center right 15px, -webkit-linear-gradient(left, #15bb00 0%, #37d205 100%);
  background: url(../images/next_w.png)no-repeat center right 15px, linear-gradient(to right, #15bb00 0%, #37d205 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ac7ff', endColorstr='#c529e7',GradientType=1 );
  width: 12em;
  border: 2px solid #FFF;
  text-align:center;
  border-radius:30px 0 30px 30px;
  padding: 20px 15px;
  font-weight:900;
  color:#FFF;
  font-size: 3vw;
  margin: 1.5em auto 0;
  box-shadow: 0px 15px 30px rgba(0, 0, 0, .1), 0px 15px 30px rgba(0, 0, 0, .1);
}


.mainvisual .txt a:hover {
  background: #22e409;background: url(../images/next_w.png)no-repeat center right 15px, -moz-linear-gradient(left, #22e409 0%, #2be213 100%);
  background: url(../images/next_w.png)no-repeat center right 15px, -webkit-linear-gradient(left, #22e409 0%, #2be213 100%);
  background: url(../images/next_w.png)no-repeat center right 15px, linear-gradient(to right, #22e409 0%, #2be213 100%);
  opacity: 1;
}



  @media screen and (max-width: 600px) {
    #modal a {display: inline-block; padding: 25px 45px; font-size: 4vw; }
  }

  @media screen and (max-width: 1100px) {
  .mainvisual .txt a {width:70%;font-size: 3vw;}
  }
  
  @media screen and (max-width: 800px) {
   .mainvisual .txt a {width: 14em;padding: 20px;font-size: 5.8vw;margin: 1em auto 0;z-index: 3;position: relative;}
   .mainvisual-accountopen .mainvisual-accountopen-btn-box a {
      font-size: 6vw;
      margin: 1.5em auto 0;
    }
  }

  @media screen and (max-width: 1100px) {
    .accountOpen .content a {
      width: 70%;
      font-size: 3vw;
    }
    .accountOpen .content .txt3 {font-size: 2.6vw; }

    .mainvisual .accountopen-btn-box a {
      font-size: 3vh;
    }
  }
  @media screen and (max-width: 800px) {
    .accountOpen .content a{
      width: 14em;
      padding: 25px;
      font-size: 5.8vw;
    }
    .accountOpen .content .txt3 {font-size: 5vw; width: auto; text-align:center; }
  }



/* # =================================================================
	 # disp
	 # ================================================================= */
   @media only screen and (min-width: 813px) {
    .pc { display: block !important; }
    .pc-tab { display: block !important; margin:auto; }
    .tab { display: none !important; }
    .sp { display: none !important; }
    
    header .pc { display: inline-block !important; }
    
    .pc-tab-table { display: table !important; }
    .sp-table { display: none !important; }
    }
    
    @media only screen and (max-width: 812px) {
    .pc { display: none !important; }
    .tab { display: block !important; }
    /* .sp { display: none !important; } */
    .sp { display: block !important; }
    
    .pc-tab-table { display: table !important; }
    .sp-table { display: none !important; }
    }
    
    @media only screen and (max-width: 480px) {
    .pc-tab { display: none !important; }
    .sp { display: block !important; }
    
    .pc-tab-table { display: none !important; }
    .sp-table { display: table !important; }
  }



  /* parts */
  .linktxt_b {
    color:blue;
  }
  .linktxt_b:hover {
    cursor: pointer;
    color:rgb(47, 47, 253);
    text-decoration: underline;
  }
  .cam-label {
    width: 70%;
    font-size: 0.9rem;
    font-weight: 900;
    background: #e70012;
    color: #ffffff;
    border-radius: 8px;
    margin: 0 auto;
  }


  /* wrap */
  .c3 ul li {
    width: 32.0%;
    padding: 2% 1% 1%;
    margin-top: 2%;
    height: 270px;
  }

  .c3 ul li .number {
    font-size: 100px;
  }
  .c3 ul li .number span {
    font-size: 1rem;
  }

  p.img2_1.fadeIns.anime.delays2.animetions {
    transform: translate(0, 0);
  }

  .graph.graph_cirle .midashi_1 span {
    display: inline;
    font-size:2vw !important;
  }
  

  @media screen and (max-width: 1360px) {
    .c3 ul li {
      width: 32.0%;
    }
  }

  @media screen and (max-width: 1100px) {
    .graph.graph_cirle .midashi_1 span {
      font-size:2vw !important;
    }
  }


  @media screen and (max-width: 930px) {
    .c1>ul>li:nth-child(3) p.img2_1 {
      transform: translate(0, 0);
    }
    .c1>ul>li:nth-child(2) p.img2_1 {
      transform: translate(0, 0);
    }
    .graph.graph_cirle .midashi_1 {
      font-size:6vw
    }
    .c3 ul li img {
      width: 50%;
    }
    .c3 ul.thousandli li {
      padding: 4% 0;
    }
    .c5 ul.box2 li p.title {
      font-size: 4.2vw; 
    }
    .c4 {
      padding: 40px 0 40px;
    }
    .c5 {
      padding: 40px 0 0em;
    }
    .c6 {
      padding: 50px 0 40px;
    }
    
  }

  @media screen and (max-width: 800px) {
    .cam-label {
      width: 90%;
      line-height: 20px;
    }
    footer ul>li a.linktxt { font-weight:bold; font-size:3vw;}

    .c5 ul.box2 {
      display: flex;
    }
    .c5 ul.box2 li {
      width: 46%
    }
    .c5 ul.box2 li:nth-child(2) {
      margin-top: 0;
    }
    .c5 ul.box2 li:nth-of-type(1) {
      margin-right: 3%;
    }
    .c5 ul.box2 li:nth-of-type(2) {
      margin-left: 3%;
    }
  }

  @media screen and (max-width: 440px) {
    .cam-label {
      width: 80%;
      line-height: 11px;
      font-size: 0.7rem;
      padding: 3px;
    }
    footer ul li p {
      font-size: 0.9rem;
    }
    .c3 ul li {
      height: 135px;
    }
    .c3 ul li img {
      width: 55%;
    }
    .c3 ul li .number {
      font-size: 40px;
    }
    .c3 ul li .number span {
      font-size: 0.7rem !important;
    }

    .c2 .box ul {
      margin: 0px 2% 0;
    }
    .c2 .box ul li {
      width: 48%;
    }
    .c2 .box ul li:nth-of-type(1) {
      margin-right: 1%;
    }
    .c2 .box ul li:nth-of-type(2) {
      margin-left: 1%;
    }
  }
  @media screen and (max-width: 400px) {
    .c3 ul li img {
      width: 65%;
    }
  }
  
  @media screen and (max-width: 320px) {
    .c3 ul li {
      height: 125px;
    }
    .c3 ul li .number {
      font-size: 40px;
    }
    .cam-label {
      font-size: 0.6rem;
    }
  }



/*==========
===add お客様の声
==========*/

.users_voice {
  background: #fff;
  padding: 5vw 0;
}

.users_voice ul {
  list-style: none;
  padding: 0;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  width: 80%;
  max-width: 1200px;
  margin: 0.5vw auto;
}

.users_voice ul li.users_voice_icon {
  width: 20%;
  max-width: 150px;
  position: relative;
  z-index: 5;
}
.users_voice ul li.users_voice_icon img {
  width: 80%;
  margin: 0 auto;
}
.users_voice ul li.users_voice_icon .users_voice_age {
  font-size: 1em;
  font-weight: bold;
  line-height: 1.5em;
  margin-top: 10px;
}


.users_voice ul li.users_voice_txt {
  width: 100%;
  text-align: left;
  position: relative;
}

.users_voice ul li.users_voice_txt p {
  padding: 1vw 3vw;
  border-radius: 15px;
  width: 90%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  background: #fff;
}


.users_voice ul li.users_voice_txt hr.voice_shadow {
  display: block;
  border: 0;
  height: 100%;
  border-radius: 15px;
  width: 90%;
  background: #eee;
  position: absolute;
  top: 15px;
  z-index: 0;
  margin: auto;
  overflow: initial;
}
.users_voice ul li.users_voice_txt hr.voice_shadow:before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  transform: rotate(-90deg);
  border-right: 20px solid transparent;
  border-bottom: 30px solid #eee;
  border-left: 20px solid transparent;
  z-index: 1;
}


/*men*/
.users_voice ul.users_voice_men li.users_voice_txt p {
  border: 6px solid #8fdcf2;
  margin-left: auto;
}

.users_voice ul.users_voice_men li.users_voice_txt hr.voice_shadow {
  right: 15px;
}

.users_voice ul.users_voice_men li.users_voice_txt hr.voice_shadow:before {
  left: -30px;
}

.users_voice ul.users_voice_men li.users_voice_txt p:before,
.users_voice ul.users_voice_men li.users_voice_txt p:after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  transform: rotate(-90deg);
  border-right: 20px solid transparent;
  border-bottom: 30px solid #8fdcf2;
  border-left: 20px solid transparent;
  z-index: 1;
}

.users_voice ul.users_voice_men li.users_voice_txt p:before {
  left: -35px;
}

.users_voice ul.users_voice_men li.users_voice_txt p:after {
  left: -25px;
  border-bottom: 30px solid #fff;
}
/*//men*/

/*women*/
.users_voice ul.users_voice_women {
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.users_voice ul.users_voice_women li.users_voice_txt p {
  border: 6px solid #ca78f2;
}

.users_voice ul.users_voice_women li.users_voice_txt hr.voice_shadow {
  left: 15px;
}

.users_voice ul.users_voice_women li.users_voice_txt hr.voice_shadow:before {
  right: -30px;
  transform: rotate(90deg);
}

.users_voice ul.users_voice_women li.users_voice_txt p:before,
.users_voice ul.users_voice_women li.users_voice_txt p:after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  transform: rotate(90deg);
  border-right: 20px solid transparent;
  border-bottom: 30px solid #ca78f2;
  border-left: 20px solid transparent;
  z-index: 1;
}

.users_voice ul.users_voice_women li.users_voice_txt p:before {
  right: -35px;
}

.users_voice ul.users_voice_women li.users_voice_txt p:after {
  right: -25px;
  border-bottom: 30px solid #fff;
}
/*//women*/

@media screen and (max-width: 800px) {
  /*==========
  ===add 800お客様の声
  ==========*/
  .users_voice ul {
    align-items: flex-start;
    margin: 8vw auto;
  }
  .users_voice ul li.users_voice_txt p {
    padding: 3vw;
    width: 85%;
  }
  .users_voice ul li.users_voice_txt p:before,
  .users_voice ul li.users_voice_txt p:after,
  .users_voice ul li.users_voice_txt hr.voice_shadow:before{
    margin: 0 !important;
    bottom: auto !important;
    top: 10vw !important;
  }
  .users_voice ul li.users_voice_txt hr.voice_shadow {
    width: 85%;
  }
  /*==========
  ===//end 800お客様の声
  ==========*/
}


/*==========
===//end お客様の声
==========*/




/*==========
===add graph
==========*/

.graph {
  padding: 5vw 0 8vw 0;
}

.graph p.midashi_1 {
  margin: auto;
  position: relative;
}

.graph p.midashi_1:before {
  top: 0;
}

.graph img {
  width: 88%;
  margin: 0 auto;
}

.graph .graph_area {
  margin: 60px auto;
}

.graph .graph_annotation,
.users_voice .users_voice_annotation {
  /* font-weight: bold; */
  font-size: 1em;
  width: 80%;
  margin: auto;
  text-align: center;
}

.graph.graph_cirle ul.graph_area {
  display: -webkit-flex;
  display: flex;
  width: 100%;
  max-width: 1200px;
}

.graph.graph_bar {
  margin-bottom: 100px;
  background: #fff;
}

.graph.graph_bar p.midashi_1:before {
  top: 0;
  margin-bottom: 1vw;
}

.graph.graph_bar .graph_area {
  width: 80%;
  max-width: 1000px;
}

.graph.graph_bar .graph_area .graph_ttl {
  margin: 30px auto;
  position: relative;
}

.graph.graph_bar .graph_area .graph_ttl p {
  font-size: 1.3em;
  font-weight: bold;
  display: inline-block;
  padding: 0 20px;
  background: #fff;
  position: relative;
  z-index: 1;
}

.graph.graph_bar .graph_area .graph_ttl hr {
  display: block;
  border: 0;
  height: 2px;
  width: 100%;
  background: #3A566F;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 0;
}


@media screen and (max-width: 930px) {
  .graph p.midashi_1 {
    width: 90%;
    font-size: 5vw;
    line-height: 1.2;
  }
  .graph.graph_cirle .midashi_1 {
    font-size:5vw
  }
}


@media screen and (max-width: 800px) {
  /*==========
  ===add 800graph
  ==========*/
  .graph .graph_area {
    margin: 30px auto;
  }

  .graph.graph_cirle ul.graph_area {
    display: flex;
  }
  .graph img {
    width: 100%;
  }

  .graph .graph_annotation, .users_voice .users_voice_annotation {
    width: 90%;
    font-size: 0.8em;
  }
  /*==========
  ===//end 800graph
  ==========*/
}

@media screen and (max-width: 440px) {
  .graph img {
    width: 75%;
  }
  .graph.graph_cirle ul.graph_area {
    flex-wrap: wrap;
  }
  .graph.graph_cirle ul.graph_area li:nth-of-type(1),
  .graph.graph_cirle ul.graph_area li:nth-of-type(2) {
    width: 50%;
  }
  .graph.graph_cirle ul.graph_area li:nth-of-type(3) {
    width: 100%;
  }

  .graph.graph_cirle ul.graph_area li:nth-of-type(1) img,
  .graph.graph_cirle ul.graph_area li:nth-of-type(2) img {
    width: 100%;
  }
  .graph.graph_cirle ul.graph_area li:nth-of-type(3) img {
    width: 50%;
  }

}




/*==========
===//end graph
==========*/