@charset "utf-8";

/*-----レスポンシブ用-----*/

/*-----Topページ-----*/

/*ハンバーガーメニュー*/

#nav li {
    padding: 20px;
    border-bottom: 1px solid #482f31;
}

#nav li a {
    font-weight: 500;
    color: #462b1a;
    display: block;
    text-decoration: none;
}

#nav {
  transition: all .6s;
  overflow-y: auto;
  padding-top: 50px;
  width: 280px;
  height: 100vh;
  z-index: 200;
  top: 0;
  right: -300px;  /*-320px*/
  background-image: url("../images/menu/body_bg.gif");
  position: fixed;
}

#nav_info {
    padding: 0.2em 0.5em;
    margin: 30px 20px;
    background: #f8f6f0;
    box-shadow: 0px 0px 0px 10px #f8f6f0;
    border: dashed 2px #462b1a;
}


#nav_info li {
  border-bottom: none;
  padding: 3px 20px;
}

#nav_info li a {
  font-size: 12px;
  text-align: center;
}

.nav_btn {
  width: 48px;
  height: 48px;
  z-index: 300;
  top: 18px;
  right: 7px;
  cursor: pointer;
  position: absolute;
}

.hamburger_line {
  transition: all .6s;
  width: 34px;
  height: 2px;
  left: 5px;
  background-color: #fff;
  position: absolute;
}

.hamburger_line1 { top: 10px; }
.hamburger_line2 { top: 21px; }
.hamburger_line3 { top: 32px; }

.nav_bg {
  opacity: 0;
  transition: all .6s;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  top: 0;
  left: 0;
  visibility: hidden;
  background-color: #000;
  cursor: pointer;
  position: fixed;
}

/* ハンバーガーメニューが表示された時 */
.nav_open #nav { right: 0; }

.nav_open .nav_bg {
  opacity: .8;
  visibility: visible;
}

.nav_open .hamburger_line1 {
  transform: rotate(45deg);
  top: 20px;
  background-color: #462b1a;
}

.nav_open .hamburger_line2 {
  width: 0;
  left: 50%;
}

.nav_open .hamburger_line3 {
  transform: rotate(-45deg);
  top: 20px;
  background-color: #462b1a;
}

/*画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:900px) {
    /* --------------------------------------------------------
	container
-------------------------------------------------------- */
    #header_top img {
        width: 380px;
    }
    
    #header_logo {
        padding-top: 40px;
        margin-left: -30px;
}
    
    .box1 p {
        font-size: 0.9rem;
    }
    
    
    .box2 p {
        font-size: 0.8rem;
    }
    
    
    
@media screen and (max-width:700px) {
    #header_top img {
        width: 300px;
    }
    
    #header_logo {
        padding-top: 0;
        margin-left: 0;   
    }
    
    #header_innner {
        display: none;
    }
    
    
    #footermenu .footer_menu {
        display: none;    
    }
    
    
    .box1 h4 {
        font-size: 20px;
        
    }
    
    
@media screen and (max-width:599px) {
    #nav li {
        font-size: 16px;
  }
  
    #nav {
        width: 250px;
  }
    
    .inner {
        max-width: 480px;
    }

    .inner_box {
        display: inline-block;
    }
    
    
    .box2 p {
    font-size: 0.9rem;
    max-width: 80%;
    margin: 0 auto;
    }
    
    .box2 p.btn1 {
    margin: auto 28px;
}
    
    .box1 h4 {
        font-size: 18px;
    }
    
    .box_text {
        text-align: left;
    }
    
    .box_text p {
        font-size: 0.8rem;
    }

    .pB20 p {
        text-align: left; 
    }


    
    
    @media screen and (max-width:380px) {
    #header_top {
        display: none;
    }
    
    #header_logo {
        display: block;
        float: left;
    }    
        
    .box2 p.btn1 {
    margin: auto 20px;
}
    
    .box1 h4 {
        font-size: 16px;
    }
        
    .box_text p {
        font-size: 0.7rem;
    }