@charset"utf-8";
*{
  margin: 0;
  padding: 0;
 list-style: none;
 text-decoration: none;
   font-family: "Lora", serif;
   font-optical-sizing: auto;
 
     font-family: "Hiragino Mincho", serif;
     font-weight: 400;
     font-style: normal;
     color:#383838;
 
   }
   body{
    background-color: #f8f8f8;
   }

   header{
    background-color: #99a0a0;
    
   }
   nav ul{
    display: flex;
    justify-content: flex-end;
    padding: 1em 0;
   }
   nav li{
    padding-right: 2em;
    color: #fff;
   }
   nav li a,i{
    color: #fff;
   }
   nav li:hover, a:hover,i:hover{
    opacity: 0.5;
   }

   
   #contents{
    position: relative;
   }


   
   @media screen and (min-width:923px){
 
   .title h1{
    font-family: "Lora", serif;
    font-size: 44px;
    text-align: center;
    padding-top: 80px;
   }
   .title h2{
    font-size: 80px;
    font-family: "MonteCarlo", cursive;
    text-align: center;
    color: #fff;
    position: absolute;
    top:50px;
    right:550px;
    z-index: -10;
   }
 
   .text{
    width:60%;
    margin: 100px auto;
   }
   .text h3{
    font-size: 24px;
    margin-bottom: 30px;
   }
   .border{
    border:1px solid #ddb1a3;
    width:280px;
    margin-bottom: 30px;
    }
    .text p{
      text-align: justify;
    }
   .img-box{
    width:85%;
    margin:50px auto;
    text-align: center;
  }
  .img-box img{
   width:40%;
    object-fit: contain;
    padding-left: 3em;
  }
  .img-box img:first-child{
    vertical-align: top;
  }
   .skill{
    display: flex;
   }
   .skill p{
    display: inline-block;
    background-color: #ddb1a3;
    padding: 0.5em 1em;
    color: #fff;
    margin: 1.5em 3em 0 0;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
   
   }
   .contact{
    text-align: center;
   }
   .contact-btn{
    background-color: #debca4;
    color:#fff;
    padding:0.5em 1em;
    width:300px;
    border-radius: 5px;
    display: inline-block;
    margin: 100px auto 0;
    font-size: 20px;
   }
   /* フッターここから */
   footer{
    text-align: center;
    margin-top: 180px;
    background-color: #99a0a0;
   } 
   footer .logo{
    font-size: 28px;
    padding: 1em 0;
    font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
  }
   footer ul{
    display: flex;
    justify-content: center;
  }
  footer li{
    padding-left: 2em;
  }
  footer li a,i{
    color: #fff;
  }
    
  footer img{
    padding: 3em 0 2em;
  }
  footer p{
    color: #fff;
    padding-top: 1em;
  }
  footer li a:hover,i:hover{
    opacity: 0.5;
  }
}

/* スマホ版ここから */
@media screen and (max-width:922px){
  .title h1{
    font-family: "Lora", serif;
    font-size: 30px;
    text-align: center;
    padding-top: 80px;
  
   }
  .service-text h1{
    font-size: 22px;
  }
   .text{
    width:80%;
    margin: 60px auto;
   }

   .text h3{
    font-size: 20px;
    margin: 30px 0;
   }
   .border{
    border:1px solid #ddb1a3;
    width:130px;
    margin-bottom: 30px;
    }
    .text p{
      text-align: justify;
    }

   #contents img{
    width:70%;
    margin:50px auto;
    display: block;
   }
   .skill{
    width:100%;
    display: flex;
    justify-content:start;
    gap:5px;
    flex-wrap: wrap;
   }
   .skill p{
    display: inline-block;
    background-color: #ddb1a3;
    padding: 0.5em 1em;
    color: #fff;
    margin-top: 20px;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
   }
   .contact{
    text-align: center;
   }
   .contact-btn{
    background-color: #debca4;
    color:#fff;
    padding:0.5em 1em;
    width:200px;
    border-radius: 5px;
    display: inline-block;
    margin: 100px auto 0;
    font-size: 18px;
   }
   footer{
    text-align: center;
    margin-top: 180px;
    background-color: #99a0a0;
   } 
   footer .logo{
    font-size: 28px;
    padding: 1em 0;
    font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
  }
   footer ul{
    display: flex;
    justify-content: center;
  }
  footer li{
    padding-left: 1em;
  }
  footer li a,i{
    color: #fff;
  }
    
  footer img{
    width:120px;
    padding: 1em 0 ;
  }
  footer p{
    color: #fff;
    padding-top: 1em;
  }
  footer li a:hover,i:hover{
    opacity: 0.5;
  }

}