header h3{
    color: #4B4B4B;
  }
  
  .header-back{
    background-color: rgb(208 228 222 / 30%);
    height: 23vh;
    width: 21vw;
  }
  .header-left h3{
    font-size: 25px;
    background-image: url(../img/circle.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 25vh;
    padding: 9vh 0 0 3vh;
  }
  
  .header-left h3:hover{
    color: #98b3ca;
    transition: .2s ease-in-out;
  }
 
  

  header{
    margin-bottom: 13vh;
  }
  
  main{
    margin-bottom: 20vh;
  }
  main img{
    width: 30vw;
    margin-left: 10vw;
  }

  .explanation{
    display: flex;
  }
  .text{
    background-color: rgb(208 228 222 / 30%);
    margin-left: 12vw;
  }
  .e-text{
    width: 35vw;
    padding: 18vh 4vw 0 4vw;
    color: #4B4B4B;
    letter-spacing: 3px;
    font-family: YuGothic,'Yu Gothic',sans-serif;
  }
  .e-text span{
    font-weight: 700;
  }
 .p-1{
   margin-bottom: 5vh;
 }  
 .p-2{
    margin-bottom: 5vh;
 } 
 .p-3{
    margin-bottom: 10vh;
 }
 .p-4{
    margin-bottom: 6vh;
 }
 .p-5{
    margin-bottom: 6vh;
 }
 
 .left-btn {
    position: absolute;
    left: 0;
    top: 40%;
    transition: all 0.5s;
    position: fixed;
    width: 4vw;
    margin-left: 0;
}
.right-btn {
    position: absolute;
    right: 0;
    top: 40%;
    transition: all 0.5s;
    position: fixed;
    width: 4vw;
}

.PCSP{
  display: none;
}





footer{
    height: 60px;
    background-color: #ddedfb;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 footer h3{
    color: rgb(81, 98, 104);
    text-align: center;
    font-weight: 700;
    letter-spacing: 3px;
 }







 @media screen and (max-width:640px) {

 header{
  margin-bottom: initial;
 }
.header-left h3{
  font-size: 24px;
  background-image: initial;
  height: 13vh;
}


main{
  margin-bottom: 10vh;
}

.PCSP{
  display: block;
  text-align: center;
}
.PCSP img{
  width: 80%;
  margin-left: initial;
}
 .explanation{
  display: flex;
  flex-direction: column-reverse;
  width: 90%;
  margin: 0 auto;
}

.text{
  margin-left: initial;
}
.e-text{
  width: 75%;
  margin: 0 auto;
  padding: 7vh 4vw 0 4vw;
}
.p-3 {
  margin-bottom: 5vh;
}
.p-4 {
  letter-spacing: 4px;
}
.p-5{
  letter-spacing: 4px;
}

.e-img{
  margin: 0 auto;
  margin-top: 5vh;
}
.e-img img{
  width: 80%;
}






.left-btn{
  width: 9vw;
}
.right-btn{
  width: 9vw;
}

 }
