* { 
  margin: 0;
  padding: 0; 
  font-size:1.0rem;
  box-sizing: border-box;
}

body{
  font-family: 'Kiwi Maru', serif;
}

nav{
  background:#B9D7FF ;
}

h1{
  color:#3B4D7C;
  font-size:160%;
  margin:0;
  line-height: 150%;
}

h2{
  color:#3B4D7C;
  font-size:150%;
  margin:0;
  line-height: 150%;
}

h3{
  font-size:140%;
  margin:0;
  color:#3B4D7C;

}

h4{
  font-size:120%;
  line-height: 150%;
  margin:0;
  color:#3B4D7C;
}

h5{
  font-size:100%;
  margin:0;
  line-height:180%;
  color:#556AA2;
  font-weight:bold;
}

h6{
  font-size:90%;
  margin:0;
  line-height:200%;
  color:#556AA2;
}

h8{
  font-size:80%;
  margin:0;
  color:#556AA2;
  font-weight: 300;
}

h7{
  font-size:110%;
  margin:0;
  line-height: 150%;
  color:#3B4D7C;
}

.big{
  font-size:230%;
}

.big2{
  font-size:150%;
}

.wrap{
  overflow: hidden;
}

.person{
  height:200px;
  width:200px;
  margin:0 auto;
}


/*色系*/

.white{
  color:white !important;
}

.blue-bright{
  color:#D368B2;
}

.water{
  color:#CDD6E8;
}

.bg-blue{
  background-color:#009BE4;
}

.bg-navy{
  background :#3B4D7C;
}

.bg-footer{
  background:#B9D7FF;
}


.mini{
  font-size:60%;
}

a{
  text-decoration: none;
  color:white;
}



p{
  line-height:180%;
   letter-spacing: 0.1em;
   font-size:120%;
}

.box{
  position:relative;
}

.box-center{
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width:80%;
}

.opa:hover{
  opacity:0.5;
}

.m100{
  margin-top:100px;
}

.m200{
  margin-top:200px;
}


.shop002{
  width:155px;
  height:125px;
  background: url(./img/top_shop002.png)no-repeat;
}

.shop003{
  width:155px;
  height:125px;
  background: url(./img/top_shop003.png)no-repeat;
}


.nami-bg{
  background-color:#E2EEFF; 
}


/*ボーダー系*/

.border-tb{
  border-top:2px solid #3B4D7C;
  border-bottom:2px solid #3B4D7C;
}

.border-b{
  border-bottom:2px solid #3B4D7C;
}

.border-product{
  width:100%;
  border:0.5px solid #3B4D7C;
}


.border-square{
  border:1px solid #3B4D7C;
  padding:10px 5px;
}

.border1{
  border:1px solid #3B4D7C;
  padding:10px 5px;
  border-radius:10px;
}

.border2{
  border:3px solid #FFF;
  padding:10px 5px;
  border-radius:10px;
}

.border3{
  border:1px solid ;
  padding:15px;
  border-radius:30px;
}


.border-white{
  width:100%;
  border-top:3px solid #FFF;
  border-bottom:3px solid #3B4D7C;
}

.b-right{
  border-right: 2px solid #FFF;
}

.border-tb h5:hover{
  opacity: 0.7;
  transition:0.3s;
}

.border-tb h8:hover{
  opacity: 0.7;
  transition:0.3s;
}

.border3 ul {
  list-style: url(./img/check.png) inside;
}




.btn-color{
  background:#3B4D7C;
  border-radius:10px;
  padding:10px;
  color:#FFF;
  width:100%;
}


.left{
  position: relative;
}

.left:after{
  margin: 0 0rem;
  content: "";
  width: 4px;
  height: 100%;
  background-color: #FFF;
  position: absolute;
  left: 100%;
}


.card{
  margin:0 auto;
  border:1px solid #3B4D7C;
  border-radius:30px;
}

.card-img-top{
  width:80%;
  margin:30px auto;
}

.card-title{
  background:#3B4D7C;
  padding:10px;
  color:#FFF;
  width:100%;
}

.card-text{
  margin:20px;
}

.card-body{
  padding-top:0;
}


.title-blue{
  background:#009BE4;
  padding:8px 0;
}

.box-navy{
  background:#3B4D7C;
  border-radius:10px;
  margin-top:10px;
  padding:8px;
}

.box-sky{
  background:#E2EEFF;
  border-radius:10px;
  margin-top:10px;
  padding:8px;
}

table{
  width:100%;
  table-layout: fixed;
}



.thin{
  font-weight:300;
}


.text-shadow{
  text-shadow:1px 2px 3px #808080;
}

.system_photo{
  width:100%;
  height:100%;
  background:url(./img/self_salon001.jpg)no-repeat;
}

.vertical{
  writing-mode: vertical-rl;
}

.line-120{
  line-height: 120%;
}

.small{
  font-size:80%;
}

.faq-answer{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight:500;
  color:#3B4D7C;
}







/*PC版のときの動きはこっちに書く*/
@media screen and (min-width: 845px) {

* {
  font-size:1.12rem;
}


nav{
    height:70px;
}

body{
  margin-top:70px;
}

.text80{
  font-size:80%;
}



.spsize{
  display:none;
}
.w-80{
    width:80%;
    margin:0 auto;
  }
.w-60{
    width:60% !important;
    margin:0 auto;
  }

.w-40{
  width:40% !important;
  margin:0 auto;
}

.w-20{
  width:20% !important;
  margin:0 auto;
}






}



@media screen and (max-width: 846px){
  nav{
    height:70px;
  }
  body{
    margin-top:70px;
  }


  .pcsize{
    display: none;
  }

  .person{
  height:150px;
  width:150px;
  margin:0 auto;
}

.nav-item{
  border-bottom:1px solid #FFFFFF;
}


}