@import "header";
@import "hero";
@import "info";
@import "feature";
@import "treatment";
@import "clinic";
@import "banner";
@import "access";
@import "footer";
@import "top-btn";
@import "dropdown";
@import "sp-menu";




*{
  box-sizing: border-box;
}


.fixed{
  top: 0px;
}

.transform{


    width: 100%;
    border-radius: 0px;

}

.radius{
  border-radius: 0px;
}

.active{
  display: block;
}

.hum-off{
  display: none;

}



a{
  text-decoration: none;
  color: #212529;
  &:hover{
    color: #7d8bc8;
  }
}

h2{
  font-family: brandon-grotesque, source-han-sans-japanese, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", Meiryo, sans-serif;
}

ul {
  list-style: none;
}
img{
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.btn{
  display: inline-block;
  padding: 10px 40px;
  border-radius: 30px;
  border: 2px solid #7d8bc8;
  color: #7d8bc8;
  font-size: .9em;
  position: relative;

 
&:hover{
color: white;



}

span{

  position: relative;
  z-index: 2;


}

  &::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 30px;
  
    background: linear-gradient(to right,#8ad6e7 0,#7d8bc8 100%);
    opacity: 0;
  
    transform: scale(.5);
 
    transition: all .3s cubic-bezier(.165,.84,.44,1);

    transition-timing-function: cubic-bezier(.165,.84,.44,1);

  }

  &:hover::before {
    opacity: 1;
 
    transform: scale(1);
    width: calc(100% + 5px);
    height: calc(100% + 5px);
    left: -3px;
    top: -3px;
  }

  &::after{   
    content: "\f105";
    font: normal normal normal 14px/1 FontAwesome;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1em;
    
  }
  


     
    
}




@keyframes dropdown {


  100% {
      opacity:1;
      transform: translateY(0);

  }
}

.load-fade {opacity : 0; transition : all 2s/*処理にかかる時間*/;}
.load-fade2 {opacity : 0; transition : all 2.2s/*処理にかかる時間*/;}
.load-fade3 {opacity : 0; transition : all 2.3s/*処理にかかる時間*/;}
 .load-fade.done, .load-fade2.done, .load-fade3.done {opacity : 1; transform : translate(0, 0);}


.scroll-up{opacity: 0; transform: translateX(50px)/*スクロールアップする距離*/; transition: all 1.1s/*処理にかかる時間*/;}
.scroll-up.done{opacity : 1; transform : translate(0, 0);}



@media screen and (min-width:768px) {
  .card{
    max-width: 50%;
    color: #212529;
  }
  .card__bg{
    background-color: white;
    box-shadow: 0 3px 30px rgba(125, 139, 200, 0.3);
    border-radius: 10px;
  }
  .card__body{
    padding: 40px 60px;
    
    h2{
      font-size: 1.5em;
      text-align: center;
    }
    p{
      font-size: .9em;
      padding-top: 5px;
      text-align: center;
      margin-bottom: 40px;
    }
  
  }

.card {
  
    margin-left: auto !important;
}


}

@media screen and (min-width:1025px) {


  .card{
    max-width: 80%;
    color: #212529;
  }
  .card__bg{
    background-color: white;
    box-shadow: 0 3px 30px rgba(125, 139, 200, 0.3);
    border-radius: 10px;
  }
  .card__body{
    padding: 40px 60px;
    
    h2{
      font-size: 1.5em;
      text-align: center;
    }
    p{
      font-size: .9em;
      padding-top: 5px;
      text-align: center;
      margin-bottom: 40px;
    }
  
  }

}