*{
  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;
     box-sizing: border-box;
   }
   
   body{
     background-color: #f8f8f8;
   }
 
   
   
     
   
   header{
    
     width:100%;
     height:100vh;
     position: relative;
     
   }
   .main-img img{
    width:100%;
    object-fit: cover;
   }
   header h1{
     font-family: "Cormorant Garamond", serif;
     font-weight: 400;
     font-style: normal;
     font-size: 50px;
     position: absolute;
     top: 160px;
     left: 30px;
   }
   span{
     font-size: 30px;
     font-family: "Cormorant", serif;
     font-optical-sizing: auto;
     font-weight: 300;
   }
   header ul {
    display: flex;
    justify-content: flex-end;
   
   padding: 15px 30px 15px 0;
 
   background-color: #fff;
   opacity: 0.6;
  
   }
   header ul li{
     padding-left: 2em;
   }
 
 
   header li i{
     color:#383838;
   }
   header li a:hover,i:hover{
     opacity: 0.5;
   }
 .header{
  display: none;
 }
 .sp-menu{
  display: none;
 }
   
   /* セクションここから */
   
   section{
     margin-top: 220px;
     position: relative;
     
   }
   
   .title h1{
     font-family: "Lora", serif;
     font-size: 40px;
     text-align: center;
   }
   .title h2{
     font-size: 22px;
     text-align: center;
     font-family: "Hiragino Mincho", serif;
   }
   .circle1{
     width:140px;
     height:140px;
     border-radius: 50%;
     background-color: #d0c3b3;
     position: absolute;
     top:-50px;
     left: 560px;
     z-index: -10;
   }
   .circle2{
     width:55px;
     height:55px;
     border-radius: 50%;
     background-color: #d0c3b3;
     position: absolute;
     top:60px;
     right:600px;
     z-index: -10;
   }
   .circle3{
     width:140px;
     height:140px;
     border-radius: 50%;
     background-color: #d0c3b3;
     position: absolute;
     top:-50px;
     right:560px;
     z-index: -10;
   }
   .circle4{
     width:55px;
     height:55px;
     border-radius: 50%;
     background-color: #d0c3b3;
     position: absolute;
     top:60px;
     left: 620px;
     z-index: -10;
   }
   #about{
    margin-top: 260px;
   }
   .about{
     display: flex;
     justify-content: center;
     gap:80px;
     margin-top: 100px;
     
   }
   .about p{
     flex-basis: 35%;
     text-align: justify;
     margin-top: 30px;
   }
   .about img{
     flex-basis: 30%;
     border-radius: 30px;
     object-fit: contain;
 
   }
   .ashirai{
     font-family: "MonteCarlo", cursive;
   font-weight: 400;
   font-style: normal;
   font-size: 70px;
   position: absolute;
   bottom: -50px;
   right:200px;
   color: #fff;
   line-height: 60px;
   }
 
   .title1 {
     margin: 130px auto 0;
   }
   .title1 h3{
     text-align: center;
     font-size: 24px;
   }
   .title2{
     margin: 50px auto 0;
   }
   .title2 h3{
     text-align: center;
     font-size: 24px;
   }
     
   .circle5{
     width:70px;
     height:70px;
     border-radius: 50%;
     border: 1px solid #debca4;
     position: absolute;
     top:180px;
     right: 630px;
     z-index: -10;
   }
   .circle6{
     width:70px;
     height:70px;
     border-radius: 50%;
     border: 1px solid #debca4;
     position: absolute;
     top:-35px;
     left: 570px;
     z-index: -10;
   }
    
    
   /* アニメーション */
   .fadeIn{
     animation-name:fadeInAnime;
     animation-duration:6s;
     animation-fill-mode:forwards;
     opacity:0;
     }
     
     @keyframes fadeInAnime{
       from {
         opacity: 0;
       }
     
       to {
         opacity: 1;
       }
     }
   .fadein {
     opacity: 0;
     transform: translate(0,0px);
     transition: 2.5s;
   }
  .fadein-left{
    transform: translate(-40px,0);
    transition: 2.5s;
    animation-delay: 0s;
  }
  .fadein-right{
    transform: translate(40px,0);
    transition: 2.5s;
    animation-delay: 8s;
  }
  .fadeIn-left{
    transform: translate(-500px,0);
    transition: 2.0s;
    animation-delay: 0s;
  }
  .fadeIn-right{
    transform: translate(500px,0);
    transition: 2.0s;
    animation-delay: 8s;
  }
   .scrollin{
     opacity: 1 !important;
     transform: translate(0, 0px) !important;
   }
 
   .works-box{
     display: flex;
     justify-content: center;
     gap:50px;
     flex-wrap: wrap;
     width:90%;
     margin:0 auto ;
   }
   .contents1{
     flex-basis: 28%;
     text-align: center;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
  
    background-color: #f8f3ee;
   
    box-shadow: 10px 10px 15px -10px;

   }
   
   .img-box{
    cursor: pointer;
    
    overflow: hidden;
    
    text-align: center;
     margin-top: 20px;
   padding: 0 10px;
   }
   .contents1 img{
   max-width:350px;
   height:300px;
   
   transition: transform .6s ease;
     object-fit: contain;
   }
   .img-box:hover img{
    transform: scale(1.1);
   }
   table{
     width:100%;
     margin: 0 auto;
    }
    tr br{
      display: none;
    }

 
 
 .contents1 h4{
   margin: 20px 0;
  
 }
 
 .viewmore-btn p{
 margin: 20px 0 30px;
 display: inline-block;
 align-items: center;
 background-color: #debca4;
 border-radius: 5px;
 padding: 0.2em 1em;
 color: #fff;
 }
 .viewmore-btn:hover{
   opacity: 0.5;
 }
 
 
 .service-box{
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap:50px;
   padding: 0 1em;
   width:80%;
   margin:50px auto 100px;
   text-align: center;
 }
 .img-box{
  width:90%;
  margin:10px auto; 
  overflow:hidden; 
  height:200px;
 }
 .img-box img{
  transition:1s all;
  object-fit: contain;
 }
 .img-box img:hover{
   transform:scale(1.2,1.2);
   transition:1s all;
 }
 
 .service-contents{
   flex-basis: 30%;
   background-color: #f8f3ee;
   box-shadow: 10px 10px 15px -10px;
  
 }

 .service-contents h4{
   margin-top: 1em;
 }
 #service p{
   text-align: center;
   line-height: 1.8em;
 }
 #service1 .contact_btn{
  
   width:200px;
   text-align: center;
   background-color:#debca4 ;
   padding: 0.5em 1em;
   border-radius: 10px;
 }
 #service1 .contact_btn:hover{
   opacity: 0.5;
 }
 #service1 .faq_btn{
  
   width:200px;
   text-align: center;
   background-color:#debca4 ;
   padding: 0.5em 1em;
   border-radius: 10px;
   
 }
 #service1 .faq_btn:hover{
   opacity: 0.5;
 }

 .contact{
   display: flex;
   justify-content: center;
   gap:50px;
   margin-top: 50px;
   }
 
 #service1 a{
   color: #fff;
 }
 
 
 #service1 .kuwashiku-btn{
   display:block;
   margin: 20px auto 100px;
   width:450px;
   text-align: center;
   background-color:#debca4; ;
   padding: 0.5em 1em;
   border-radius: 10px;
 }
 #service1 .kuwashiku-btn:hover{
   opacity: 0.5;
 }
 #service1 p{
  margin: 80px 0;
  text-align: center;
  line-height: 1.8em;
  
 }
 .profile-box{
   display: flex;
   justify-content: center;
   gap:100px;
   margin-top: 100px;
 }
 
 .profile-box p{
   flex-basis: 30%;
 }
 .profile-box img{
   flex-basis: 20%;
   object-fit: cover;
   width:100%;
   border-radius: 50px;
 }
 
  footer{
   text-align: center;
   margin-top: 180px;
   background-color: #debca4;
  } 
  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:1400px){
  .circle1{
    width:140px;
    height:140px;
    border-radius: 50%;
    background-color: #d0c3b3;
    position: absolute;
    top:-50px;
    left: 500px;
    z-index: -10;
  }
  .circle2{
    width:55px;
    height:55px;
    border-radius: 50%;
    background-color: #d0c3b3;
    position: absolute;
    top:60px;
    right:540px;
    z-index: -10;
  }
  .circle3{
    width:140px;
    height:140px;
    border-radius: 50%;
    background-color: #d0c3b3;
    position: absolute;
    top:-50px;
    right:500px;
    z-index: -10;
  }
  .circle4{
    width:55px;
    height:55px;
    border-radius: 50%;
    background-color: #d0c3b3;
    position: absolute;
    top:60px;
    left: 540px;
    z-index: -10;
  }
}
  
  @media screen and (max-width:1280px){
    .circle1{
      width:140px;
      height:140px;
      border-radius: 50%;
      background-color: #d0c3b3;
      position: absolute;
      top:-50px;
      left: 440px;
      z-index: -10;
    }
    .circle2{
      width:55px;
      height:55px;
      border-radius: 50%;
      background-color: #d0c3b3;
      position: absolute;
      top:60px;
      right:480px;
      z-index: -10;
    }
    .circle3{
      width:140px;
      height:140px;
      border-radius: 50%;
      background-color: #d0c3b3;
      position: absolute;
      top:-50px;
      right:440px;
      z-index: -10;
    }
    .circle4{
      width:55px;
      height:55px;
      border-radius: 50%;
      background-color: #d0c3b3;
      position: absolute;
      top:60px;
      left: 480px;
      z-index: -10;
    }
    
}
@media screen and (max-width:1100px){
  .circle1{
    width:140px;
    height:140px;
    border-radius: 50%;
    background-color: #d0c3b3;
    position: absolute;
    top:-50px;
    left: 380px;
    z-index: -10;
  }
  .circle2{
    width:55px;
    height:55px;
    border-radius: 50%;
    background-color: #d0c3b3;
    position: absolute;
    top:60px;
    right:420px;
    z-index: -10;
  }
  .circle3{
    width:140px;
    height:140px;
    border-radius: 50%;
    background-color: #d0c3b3;
    position: absolute;
    top:-50px;
    right:380px;
    z-index: -10;
  }
  .circle4{
    width:55px;
    height:55px;
    border-radius: 50%;
    background-color: #d0c3b3;
    position: absolute;
    top:60px;
    left: 420px;
    z-index: -10;
  }
}
 
 
 @media screen and (max-width:922px){
   header{
     background-image: url(images/header-sp.jpg);
     background-repeat: no-repeat;
     background-size: cover;
     width:100%;
     height:100vh;
     position: relative;
     
   }
   .main-img{
    display: none;
   }
   header h1{
     font-family: "Cormorant Garamond", serif;
     font-weight: 400;
     font-style: normal;
     font-size: 50px;
     position: absolute;
     top: 200px;
     left: 30px;
   }
   span{
     font-size: 24px;
     font-family: "Cormorant", serif;
     font-optical-sizing: auto;
     font-weight: 300;
   }
   header ul {
    display: flex;
    justify-content: flex-end;
    margin-right: 50px;
   padding-top: 20px;
    
   }
   header ul li{
     padding-left: 2em;
   }
 
 
   header li i{
     color:#383838;
   }
   header li a:hover,i:hover{
     opacity: 0.5;
   }
 .header{
  display: none;
 }
 /* アニメーション */
 .fadeIn{
  animation-name:fadeInAnime;
  animation-duration:4s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeInAnime{
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
.fadein {
  opacity: 0;
  transform: translate(0,0);
  transition: all 2s;}

.fadein-bottom{
    transform: translate(0,30px);
}
.scrollin{
  opacity: 1 !important;
  transform: translate(0, 0) !important;

}
  .ashirai{
    font-family: "MonteCarlo", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 42px;
  position: absolute;
  bottom: -50px;
  right:200px;
  color: #fff;
  line-height: 60px;
  }
 
   /* セクションここから */
 
   section{
     margin-top: 100px;
     position: relative;
     
   }
   
   .title h1{
     font-family: "Lora", serif;
     font-size: 28px;
     text-align: center;
   }
   .title h2{
     font-size: 20px;
     text-align: center;
     font-family: "Hiragino Mincho", serif;
   }
   .circle1{
     width:100px;
     height:100px;
     border-radius: 50%;
     background-color: #d0c3b3;
     position: absolute;
     top:-50px;
     left: 260px;
     z-index: -10;
   }
   .circle2{
     width:30px;
     height:30px;
     border-radius: 50%;
     background-color: #d0c3b3;
     position: absolute;
     top:60px;
     right:300px;
     z-index: -10;
   }
   .circle3{
     width:100px;
     height:100px;
     border-radius: 50%;
     background-color: #d0c3b3;
     position: absolute;
     top:-50px;
     right:240px;
     z-index: -10;
   }
   .circle4{
     width:30px;
     height:30px;
     border-radius: 50%;
     background-color: #d0c3b3;
     position: absolute;
     top:60px;
     left: 280px;
     z-index: -10;
   }
   
   .about{
     display: flex;
     justify-content: center;
     flex-direction: column;
     gap:30px;
     margin-top: 100px;
     
   }
   .about p{
    width:70%;
     text-align: justify;
  
     margin:0 auto;
   }
   .about img{
  width:70%;
  object-fit: contain;
  margin:0 auto;
 border-radius: 30px;
 }
    
 
   .ashirai{
     font-family: "MonteCarlo", cursive;
   font-weight: 400;
   font-style: normal;
   font-size: 70px;
   position: absolute;
   bottom: -50px;
   right:200px;
   color: #fff;
   line-height: 60px;
   }
 
   /* worksここから */
    #works{
     margin-top: 150px;
    }
   .works-box{
     display: flex;
     justify-content: center;
     gap:30px;
     flex-wrap: wrap;
     width:80%;
     margin:70px auto ;
   }
   .title1 {
     margin: 90px auto 0;
   }
   .title1 h3{
     text-align: center;
     font-size: 24px;
   }
   .title2{
     margin: 50px auto 0;
   }
   .title2 h3{
     text-align: center;
     font-size: 20px;
   }
     
   .circle5{
     width:60px;
     height:60px;
     border-radius: 50%;
     border: 1px solid #debca4;
     position: absolute;
     top:170px;
     left:280px;
     z-index: -10;
   }
   .circle6{
     width:60px;
     height:60px;
     border-radius: 50%;
     border: 1px solid #debca4;
     position: absolute;
     top:-35px;
     left: 110px;
     z-index: -10;
   }
    
   .contents1{
    
     text-align: center;
     padding-bottom: 1em;
    background-color: #f8f3ee;
    box-shadow: 10px 10px 15px -10px;

   
   }
   .img-box{
    /* cursor: pointer;
    
    overflow: hidden; */
    
    text-align: center;
     margin-top: 20px;
   padding: 0 10px;
   }
   .contents1 img{
   width:350px;
   height:300px;
   

     object-fit: cover;
   }
  
  
 .contents1 h4{
   margin: 10px 0 20px;
 }
 table{
  width:80%;
  margin: 0 auto;
 }
 .viewmore-btn p{
  margin-top: 20px;
  display: inline-block;
  align-items: center;
  background-color: #debca4;
  border-radius: 5px;
  padding: 0.2em 1em;
  color: #fff;
  }

 .viewmore-btn:hover{
   opacity: 0.5;
 }
 

 /* サービスここから */
 #service{
   margin-top: 150px;
 }
 .service-box{
   display: flex;
   flex-direction: column;
 
   width:100%;
  
   
   margin:40px auto ;
   text-align: center;
 }
 

 .service-contents{
  width:100%;
  margin: 0 auto;
  background-color: #f8f3ee;
  box-shadow: 10px 10px 15px -10px;
  cursor: pointer;
   
   overflow: hidden;
  padding: 1em 0;
}
.service-contents img{
  width:100%;
  object-fit: cover;
}
 .service-contents h4{
   margin-top: 1em;
 }
 #service p{
   text-align: center;
 }
 #service1{
  margin-top: 130px;
 }
 #service1 .contact_btn{
   display:block;
   margin: 3em auto;
   width:200px;
   text-align: center;
   background-color:#debca4 ;
   padding: 0.5em 1em;
   border-radius: 10px;
 }
 #service1 .contact_btn:hover{
   opacity: 0.5;
 }
 #service1 a{
   color: #fff;
 }
 #service1 .service{

  text-align: left;
  line-height: 1.8em;
  width: 80%;
  margin: 40px auto;
 }
 #service1 p{
  text-align: center;
  width:80%;
  margin:0 auto;
}
 #service1 .faq_btn{
  display:block;
   margin: 3em auto;
  width:200px;
  text-align: center;
  background-color:#debca4 ;
  padding: 0.5em 1em;
  border-radius: 10px;
  
}
#service1 .faq_btn:hover{
  opacity: 0.5;
}
#service1 .kuwashiku-btn{
  display:block;
  margin: 20px auto 50px;
  width:350px;
  text-align: center;
  background-color:#debca4; ;
  padding: 0.5em 1em;
  border-radius: 10px;
}
#service1 .kuwashiku-btn:hover{
  opacity: 0.5;
}
.contact{
  display: flex;
  justify-content: center;
  gap:20px;
  margin-top:10px;
  }
 
 /* プロフィールここから */
 #profile{
   margin-top: 150px;
 }
 .profile-box{
   display: flex;
   flex-direction: column;
   gap:60px;
   margin-top: 40px;
 }
 
 .profile-box p{
  width:70%;
  margin: 0 auto;
 }
 
 .profile-box img{
  width:50%;
   object-fit: contain;
   margin: 30px auto 0;
   display: inline-block;
   border-radius: 30px;
 }
 /* フッターここから */
  footer{
   text-align: center;
   margin-top: 80px;
   background-color: #debca4;
  } 
  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;
   width:80%;
   margin: 0 auto;
 }
 footer li{
   padding-left: 1em;
 }
 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:660px){
  .main_menu{
    display: none;
  }
  header h1{
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
    position: absolute;
    top: 100px;
    left: 10px;
  }
  span{
    font-size: 22px;
    font-family: "Cormorant", serif;
    font-optical-sizing: auto;
    font-weight: 300;
  }
  .header {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
  }
  .logo {
    font-weight: 700;
    padding-left: 14px;
  }
  .hamburger-menu {
    width: 50px;
    height: 50px;
    position: relative;
    border: none;
    background: transparent;
    appearance: none;
    padding: 0;
    cursor: pointer;
  }
  .hamburger-menu__bar {
    display: inline-block;
    width: 44%;
    height: 2px;
    background: #242424;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: .5s;
  }
  .hamburger-menu__bar:first-child {
    top: 16px;
  }
  .hamburger-menu__bar:nth-child(2) {
    top: 24px;
  }
  .hamburger-menu__bar:last-child {
    top: 32px;
  }
  .hamburger-menu--open .hamburger-menu__bar {
    top: 50%;
  }
  .hamburger-menu--open .hamburger-menu__bar:first-child {
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
  }
  .hamburger-menu--open .hamburger-menu__bar:last-child {
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  }
  .hamburger-menu--open .hamburger-menu__bar:nth-child(2) {
    display: none;
  }
  .navigation {
    display: none;
    background-color: #f8f8f8;
    position: absolute;
    top: 50px;
    width: 100%;
   height:calc(100vh-50px);
 
    z-index: 9999;
  }
  .navigation__list {
    text-align: center;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
  }
  .navigation__list li{
    padding: 2em 0;
  }
  /* .navigation__link {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    display: block;
    padding: 24px 0;
    transition: .5s;
  } */
  /* @media (hover: hover) and (pointer: fine) {
    .navigation__link:hover {
      background: #333;
    }
  } */
 
  
 
   .circle1{
     width:100px;
     height:100px;
     border-radius: 50%;
     background-color: #d0c3b3;
     position: absolute;
     top:-50px;
     left: 100px;
     z-index: -10;
   }
   .circle2{
     width:30px;
     height:30px;
     border-radius: 50%;
     background-color: #d0c3b3;
     position: absolute;
     top:60px;
     right:120px;
     z-index: -10;
   }
   .circle3{
     width:100px;
     height:100px;
     border-radius: 50%;
     background-color: #d0c3b3;
     position: absolute;
     top:-50px;
     right:90px;
     z-index: -10;
   }
   .circle4{
     width:30px;
     height:30px;
     border-radius: 50%;
     background-color: #d0c3b3;
     position: absolute;
     top:60px;
     left: 110px;
     z-index: -10;
   }
   .circle5{
    width:60px;
    height:60px;
    border-radius: 50%;
    border: 1px solid #debca4;
    position: absolute;
    top:170px;
    left:200px;
    z-index: -10;
  }
  .circle6{
    width:60px;
    height:60px;
    border-radius: 50%;
    border: 1px solid #debca4;
    position: absolute;
    top:-35px;
    left: 110px;
    z-index: -10;
  }
 
   
 }