@charset "UTF-8";
/*-----------------------------------------------------*/
/* PC用のCSS ！始まり！ */
/*-----------------------------------------------------*/
@media only screen and (min-width: 1000px) {





.container{
  width: 100%;
  background-color: #ffffe6;
}





.navi{
  width: 100%;
  background-color: #ffffe6;
  position: fixed;
}

.navi ul{
  width: 50%;
  margin-left: 50%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.navi li{
    list-style: none;
    padding-right: 20px;
}

.navi a{
    text-decoration: none;
    font-size: 20px;
    color: #a0522d;
}

.navi img{
  width: 30px;
}





.hum{
  display: none;
}





.contact{
    width: 100%;
}

.contact h2{
    font-size: 100px;
    font-family: 'Lora', serif;
    text-align: center;
    color: #a0522d;
    padding-top: 80px;
}

/* お問い合わせフォーム ！始まり！ */
.Form {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 80px;
    max-width: 720px;
  }
  @media screen and (max-width: 480px) {
    .Form {
      margin-top: 40px;
    }
  }
  .Form-Item {
  
    padding-top: 24px;
    padding-bottom: 24px;
    width: 100%;
    display: flex;
    align-items: center;
  }
  @media screen and (max-width: 480px) {
    .Form-Item {
      padding-left: 14px;
      padding-right: 14px;
      padding-top: 16px;
      padding-bottom: 16px;
      flex-wrap: wrap;
    }
  }
  
  .Form-Item-Label {
    width: 100%;
    max-width: 248px;
    letter-spacing: 0.05em;
    font-weight: bold;
    font-size: 18px;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Label {
      max-width: inherit;
      display: flex;
      align-items: center;
      font-size: 15px;
    }
  }
  .Form-Item-Label.isMsg {
    margin-top: 8px;
    margin-bottom: auto;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Label.isMsg {
      margin-top: 0;
    }
  }
  .Form-Item-Label-Required {
    border-radius: 6px;
    margin-right: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 48px;
    display: inline-block;
    text-align: center;
    background: #a0522d;
    color: #fff;
    font-size: 14px;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Label-Required {
      border-radius: 4px;
      padding-top: 4px;
      padding-bottom: 4px;
      width: 32px;
      font-size: 10px;
    }
  }
  .Form-Item-Input {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-left: 40px;
    padding-left: 1em;
    padding-right: 1em;
    height: 48px;
    flex: 1;
    width: 100%;
    max-width: 410px;
    background: #eaedf2;
    font-size: 18px;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Input {
      margin-left: 0;
      margin-top: 18px;
      height: 40px;
      flex: inherit;
      font-size: 15px;
    }
  }
  .Form-Item-Textarea {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-left: 40px;
    padding-left: 1em;
    padding-right: 1em;
    height: 216px;
    flex: 1;
    width: 100%;
    max-width: 410px;
    background: #eaedf2;
    font-size: 18px;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Textarea {
      margin-top: 18px;
      margin-left: 0;
      height: 200px;
      flex: inherit;
      font-size: 15px;
    }
  }
  .Form-Btn {
    border-radius: 6px;
    margin-top: 32px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 280px;
    display: block;
    letter-spacing: 0.05em;
    background: #a0522d;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
  }
  @media screen and (max-width: 480px) {
    .Form-Btn {
      margin-top: 24px;
      padding-top: 8px;
      padding-bottom: 8px;
      width: 160px;
      font-size: 16px;
    }
  }
  /* お問い合わせフォーム ！終わり！ */





}
/*-----------------------------------------------------*/
/* PC用のCSS ！終わり！ */
/*-----------------------------------------------------*/



/*-----------------------------------------------------*/
/* タブレット用のCSS ！始まり！ */
/*-----------------------------------------------------*/
@media only screen and (min-width:480px) and (max-width:999px) {





body{
  min-width:480px;
  max-width:999px;
}





  .container{
    width: 100%;
    background-color: #ffffe6;
  }
  
  
  
  
  
  .navi{
    width: 100%;
    background-color: #ffffe6;
    position: fixed;
  }
  
  .navi ul{
    width: 50%;
    margin-left: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
  }
  
  .navi li{
      list-style: none;
      padding-right: 20px;
  }
  
  .navi a{
      text-decoration: none;
      font-size: 20px;
      color: #a0522d;
  }
  
  .navi img{
    width: 30px;
  }





  .hum{
    display: none;
  }
  
  
  
  
  
  .contact{
      width: 100%;
  }
  
  .contact h2{
      font-size: 100px;
      font-family: 'Lora', serif;
      text-align: center;
      color: #a0522d;
      padding-top: 80px;
  }
  
  /* お問い合わせフォーム ！始まり！ */
  .Form {
      margin-top: 20px;
      margin-left: auto;
      margin-right: auto;
      padding-bottom: 80px;
      max-width: 720px;
    }
    @media screen and (max-width: 480px) {
      .Form {
        margin-top: 40px;
      }
    }
    .Form-Item {
    
      padding-top: 24px;
      padding-bottom: 24px;
      width: 100%;
      display: flex;
      align-items: center;
    }
    @media screen and (max-width: 480px) {
      .Form-Item {
        padding-left: 14px;
        padding-right: 14px;
        padding-top: 16px;
        padding-bottom: 16px;
        flex-wrap: wrap;
      }
    }
    
    .Form-Item-Label {
      width: 100%;
      max-width: 248px;
      letter-spacing: 0.05em;
      font-weight: bold;
      font-size: 18px;
    }
    @media screen and (max-width: 480px) {
      .Form-Item-Label {
        max-width: inherit;
        display: flex;
        align-items: center;
        font-size: 15px;
      }
    }
    .Form-Item-Label.isMsg {
      margin-top: 8px;
      margin-bottom: auto;
    }
    @media screen and (max-width: 480px) {
      .Form-Item-Label.isMsg {
        margin-top: 0;
      }
    }
    .Form-Item-Label-Required {
      border-radius: 6px;
      margin-right: 8px;
      padding-top: 8px;
      padding-bottom: 8px;
      width: 48px;
      display: inline-block;
      text-align: center;
      background: #a0522d;
      color: #fff;
      font-size: 14px;
    }
    @media screen and (max-width: 480px) {
      .Form-Item-Label-Required {
        border-radius: 4px;
        padding-top: 4px;
        padding-bottom: 4px;
        width: 32px;
        font-size: 10px;
      }
    }
    .Form-Item-Input {
      border: 1px solid #ddd;
      border-radius: 6px;
      margin-left: 40px;
      padding-left: 1em;
      padding-right: 1em;
      height: 48px;
      flex: 1;
      width: 100%;
      max-width: 410px;
      background: #eaedf2;
      font-size: 18px;
    }
    @media screen and (max-width: 480px) {
      .Form-Item-Input {
        margin-left: 0;
        margin-top: 18px;
        height: 40px;
        flex: inherit;
        font-size: 15px;
      }
    }
    .Form-Item-Textarea {
      border: 1px solid #ddd;
      border-radius: 6px;
      margin-left: 40px;
      padding-left: 1em;
      padding-right: 1em;
      height: 216px;
      flex: 1;
      width: 100%;
      max-width: 410px;
      background: #eaedf2;
      font-size: 18px;
    }
    @media screen and (max-width: 480px) {
      .Form-Item-Textarea {
        margin-top: 18px;
        margin-left: 0;
        height: 200px;
        flex: inherit;
        font-size: 15px;
      }
    }
    .Form-Btn {
      border-radius: 6px;
      margin-top: 32px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 20px;
      padding-bottom: 20px;
      width: 280px;
      display: block;
      letter-spacing: 0.05em;
      background: #a0522d;
      color: #fff;
      font-weight: bold;
      font-size: 20px;
    }
    @media screen and (max-width: 480px) {
      .Form-Btn {
        margin-top: 24px;
        padding-top: 8px;
        padding-bottom: 8px;
        width: 160px;
        font-size: 16px;
      }
    }
    /* お問い合わせフォーム ！終わり！ */





}
/*-----------------------------------------------------*/
/* タブレット用のCSS ！終わり！ */
/*-----------------------------------------------------*/




/*-----------------------------------------------------*/
/* スマホ用のCSS ！始まり！ */
/*-----------------------------------------------------*/
@media only screen and (max-width: 479px) {





body{
  max-width: 479px;
}



  .container{
    width: 100%;
    background-color: #ffffe6;
  }
  
  
  
  
  
  .navi{
    display: none;
  }





  /* ハンバーガーメニュー　！始まり！ */

/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position:fixed;
  z-index: 999;
  /*ナビのスタート位置と形状*/
top:0;
  right: -120%;
width:100%;
  height: 100vh;/*ナビの高さ*/
background:#F5DEB3;
  /*動き*/
transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
  right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999; 
  width: 100%;
  height: 100vh;/*表示する高さ*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
  /*ナビゲーション天地中央揃え*/
  position: absolute;
  z-index: 999;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

#g-nav li{
list-style: none;
  text-align: center;
}

#g-nav li a{
color: #a0522d;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
}

/*========= ボタンのためのCSS ===============*/
.openbtn{
position:fixed;
  z-index: 9999;/*ボタンを最前面に*/
top:10px;
right: 10px;
cursor: pointer;
  width: 50px;
  height:50px;
}

/*×に変化*/	
.openbtn span{
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
background-color: #a0522d;
  width: 45%;
}

.openbtn span:nth-of-type(1) {
top:15px;	
}

.openbtn span:nth-of-type(2) {
top:23px;
}

.openbtn span:nth-of-type(3) {
top:31px;
}

.openbtn.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 30%;
}

.openbtn.active span:nth-of-type(2) {
opacity: 0;
}

.openbtn.active span:nth-of-type(3){
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 30%;
}
/* ハンバーガーメニュー　！終わり！ */

.hum img{
  width: 30px;
}
  
  
  
  
  
  .contact{
      width: 100%;
  }

  .contact h2{
      font-size: 50px;
      font-family: 'Lora', serif;
      text-align: center;
      color: #a0522d;
      padding-top: 50px;
  }
  
  /* お問い合わせフォーム ！始まり！ */
  .Form {
      width: 60%;
      margin-left: auto;
      margin-right: auto;
      padding-bottom: 70px;
      max-width: 720px;
    }
    @media screen and (max-width: 480px) {
      .Form {
        margin-top: 40px;
      }
    }
    .Form-Item {
    
      padding-top: 24px;
      padding-bottom: 24px;
      width: 100%;
      display: flex;
      align-items: center;
    }
    @media screen and (max-width: 480px) {
      .Form-Item {
        padding-left: 14px;
        padding-right: 14px;
        padding-top: 16px;
        padding-bottom: 16px;
        flex-wrap: wrap;
      }
    }
    
    .Form-Item-Label {
      width: 100%;
      max-width: 248px;
      letter-spacing: 0.05em;
      font-weight: bold;
      font-size: 18px;
    }
    @media screen and (max-width: 480px) {
      .Form-Item-Label {
        max-width: inherit;
        display: flex;
        align-items: center;
        font-size: 15px;
      }
    }
    .Form-Item-Label.isMsg {
      margin-top: 8px;
      margin-bottom: auto;
    }
    @media screen and (max-width: 480px) {
      .Form-Item-Label.isMsg {
        margin-top: 0;
      }
    }
    .Form-Item-Label-Required {
      border-radius: 6px;
      margin-right: 8px;
      padding-top: 8px;
      padding-bottom: 8px;
      width: 48px;
      display: inline-block;
      text-align: center;
      background: #a0522d;
      color: #fff;
      font-size: 14px;
    }
    @media screen and (max-width: 480px) {
      .Form-Item-Label-Required {
        border-radius: 4px;
        padding-top: 4px;
        padding-bottom: 4px;
        width: 32px;
        font-size: 10px;
      }
    }
    .Form-Item-Input {
      border: 1px solid #ddd;
      border-radius: 6px;
      margin-left: 40px;
      padding-left: 1em;
      padding-right: 1em;
      height: 48px;
      flex: 1;
      width: 100%;
      max-width: 410px;
      background: #eaedf2;
      font-size: 18px;
    }
    @media screen and (max-width: 480px) {
      .Form-Item-Input {
        margin-left: 0;
        margin-top: 18px;
        height: 40px;
        flex: inherit;
        font-size: 15px;
      }
    }
    .Form-Item-Textarea {
      border: 1px solid #ddd;
      border-radius: 6px;
      margin-left: 40px;
      padding-left: 1em;
      padding-right: 1em;
      height: 216px;
      flex: 1;
      width: 100%;
      max-width: 410px;
      background: #eaedf2;
      font-size: 18px;
    }
    @media screen and (max-width: 480px) {
      .Form-Item-Textarea {
        margin-top: 18px;
        margin-left: 0;
        height: 200px;
        flex: inherit;
        font-size: 15px;
      }
    }
    .Form-Btn {
      border-radius: 6px;
      margin-top: 32px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 20px;
      padding-bottom: 20px;
      width: 280px;
      display: block;
      letter-spacing: 0.05em;
      background: #a0522d;
      color: #fff;
      font-weight: bold;
      font-size: 20px;
    }
    @media screen and (max-width: 480px) {
      .Form-Btn {
        margin-top: 24px;
        padding-top: 8px;
        padding-bottom: 8px;
        width: 160px;
        font-size: 16px;
      }
    }
    /* お問い合わせフォーム ！終わり！ */





}
/*-----------------------------------------------------*/
/* スマホ用のCSS ！終わり！ */
/*-----------------------------------------------------*/