/* ---------------------------- */
/* Base
/* ---------------------------- */
html{
    font-size: 62.5%;  
   }
   body{
     font-size: 1.6rem;
     letter-spacing: .05em;
     font-family: 'Noto Serif','Noto Serif JP', serif;
     color: #171717;
   }
   img{
     vertical-align: bottom;
     width: 100%;
   }
  
   /* ---------------------------- */
   /* header
   /* ---------------------------- */
   .header{
     padding: 19px 30px;
     position: absolute;
     top: 0;
     left: 50%;
     z-index: 1;
     transform: translateX(-50%);
     box-sizing: border-box;
     width: 100%;
     transition: .3s;
     
   }
   .header-inner{
     display: flex;
     justify-content: space-between;
     align-items: center;
     max-width: 1200px;
     margin: 0 auto;
   }
   .header.fixed{
     position: fixed;
     background-color: #282f35;
     padding: 30px;
     width: 100%;
     transition: .3s;
   }
   .header a{
     color: #fff;
     text-decoration: none;
     transition: .3s;
     font-weight: bold;
     font-style: italic;
   }
   .header a:hover{
     opacity: .7;
     transition: .3s;
   }
   .site-title{
     font-size: 2.6rem;
   }
   .nav-list{
     display: flex;
   }
   .nav-item{
     margin-right: 30px;
   }
   .nav-item:last-of-type{
     margin-right: 0;
   }
   .burger-btn{
     display: none;
   }
   
   /* ---------------------------- */
   /* page-title
   /* ---------------------------- */
   .page-title-wrapper{
     height: 453px;
     position: relative;
     background-image: url(../img/contact-page-bgi@2x.jpg);  
   }
  .page-title{
    font-size: 6rem;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    padding-top: 186px;
    color: #fff;
  }
  .page-title-bottom{
    font-size: 9rem;
    color: #fff;
    opacity: .1;
    margin: 20px 0 0 48px;
  }
  
  
    /* ---------------------------- */
    /* form
    /* ---------------------------- */
    .form-wrapper{
      padding: 100px 0 80px;
    }
    .form-list{
      max-width: 700px;
      margin: 0 auto 80px;
      padding: 0 50px;
    }
    .form-item{
      margin-bottom: 25px;
    }
    .form-item:last-of-type{
      margin-bottom: 0;
    }
    .form-label{
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    input,textarea{
      resize: none;
      appearance: none;
      -webkit-appearance: none;
      outline: none;
      border: 1px solid #141414;
      /*width: 100%;*/
  
    }
    .input-text{
      color: #171717;
      padding: 0px 8px;
      line-height: 30px;
      box-sizing: border-box;
    }
    .textarea{
      height: 171px;
      color: #171717;
      padding: 0px 8px;
      line-height: 30px;
      box-sizing: border-box;
    }
    .checkbox-list{
      display: flex;
    }
    .checkbox-item{
      margin-right: 20px;
    }
    .checkbox-item label,
    .checkbox{
      cursor: pointer;
    }
    .checkbox{
      border: #282f35 1px solid;
      height: 10px;
      width: 10px;
      margin-right: 10px;
    }
    .checkbox:checked{
      background-color: #333;
    }
  
    .submit-btn{
      display: block;
      width: 235px;
      line-height: 60px;
      margin: 0 auto 70px;
      background-color: #f7d43f;
      box-shadow: 0 0 6px #1b1310;
      border-radius: 30px;
      text-align: center;
      color: #171717;
      font-weight: bold;
      text-decoration: none;
      transition: .3s;
      outline: none;
      appearance: none;
      border: none;
    }
    .submit-btn:hover{
      opacity: .7;
      transition: .3s;
      cursor: pointer;
    }
   
   
   
   /* ---------------------------- */
   /* footer
   /* ---------------------------- */
   .footer{
     padding: 30px 0;
     text-align: center;
     font-size: 1.4rem;
     font-weight: bold;
     color: #282F35;
   }
   
   @media screen and (max-width:768px){
     /* ---------------------------- */
     /* base_sp
     /* ---------------------------- */
     
    
   
     /* ---------------------------- */
     /* header_sp
     /* ---------------------------- */
     .header{
       padding: 30px 4vw 0;
     }
     .header-nav{
       display: none;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100vh;
       background-color: #282F35;
     }
     .nav-list{
       height: 100%;
       flex-direction: column;
       justify-content: center;
       align-items: center;
     }
     .nav-item{
       margin: 0 0 30px;
     }
     .nav-item:last-of-type{
       margin-bottom: 0;
     }
   
     .burger-btn{
       display: block;
       position: absolute;
       top: 30px;
       right: 4vw;
     }
     .burger-btn .bar{
       display: block;
       height: 3px;
       width: 30px;
       background-color: #fff;
     }
     .bar_top{
       margin-bottom: 8px;
     }
     .bar_mid{
       margin-bottom: 8px;
     }
     
     /* ハンバーガーメニューが開いたとき */
     .burger-btn.cross .bar_top{
       transform: rotate(45deg) translate(8px,8px);
       transition: .3s;
     }
     .burger-btn.cross .bar_mid{
       opacity: 0;
       transition: .3s;
     }
     .burger-btn.cross .bar_bottom{
       transform: rotate(-45deg) translate(8px,-8px);
       transition: .3s;
     }
     body.noscroll{
       overflow: hidden;
     }
   
     button{
       background-color: transparent;
       border: none;
       cursor: pointer;
       outline: none;
       padding: 0;
       appearance: none;
     }
  
     /* ---------------------------- */
     /* header_sp
     /* ---------------------------- */
     .checkbox-list{
       display: block;
     }
     .checkbox-item{
       margin-right: 0;
     }
      
   
   }

   .formcenter {
    padding: 50px 10px 10px;
    max-width: 600px;
    margin: 0px auto;
}
input[type="text"] {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
input[type="email"] {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
textarea {
    height: auto;
    display: block;
    width: 100%;
    /* height: calc(1.5em + 0.75rem + 2px); */
    padding: 0.375rem 0.75rem;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.button {
    text-align: center;
}
.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}