@charset "utf-8";

/* header */
.header {
  position:fixed;
  width:100%;
  z-index:120;
}
.header_h {padding-top:70px;}
.header_flex {
  display:flex;
  align-items:center;
  background:#fff;
  position:relative;
  z-index:120;
  height:70px;
}
.header_logo {
    max-width: 291px;
  margin: 0.5%;
}
.header_button {
  display:flex;
  justify-content:flex-end;
  margin-left: auto;
}
.header_button ul {
  display:flex;
  font-size:20px;
  font-weight:500;
}
.header_button ul li {
    text-align:center;
    height:100%;
}
.header_button ul li a:before {content:'●';}
.header_button ul li a {
  display:flex;
  align-items:center;
  height:100%;
  color:#000;
  color:#231815;
  letter-spacing:0.05em;
  padding:0 10px;
}
.hum_menu {}
.openbtn1{
    position: relative;/*ボタン内側の基点となるためrelativeを指定*/
    background: #fff;
    cursor: pointer;
    width: 70px;
    height: 70px;
    opacity: 0.8;
  }
  
  /*ボタン内側*/
  .openbtn1 span{
      display: inline-block;
      transition: all .4s;/*アニメーションの設定*/
      position: absolute;
      left: 20px;
      height: 1px;
      border-radius: 2px;
      background: #a0a0a0;
      width: 45%;
    }
  
  .openbtn1 span:nth-of-type(1) {
    top: 25px;
  }
  
  .openbtn1 span:nth-of-type(2) {
    top: 35px;
  }
  
  .openbtn1 span:nth-of-type(3) {
    top: 45px;
  }
  
  /*activeクラスが付与されると線が回転して×に*/
  
  .openbtn1.active span:nth-of-type(1) {
      top: 29px;
      left: 25px;
      transform: translateY(6px) rotate(-45deg);
      width: 30%;
  }
  
  .openbtn1.active span:nth-of-type(2) {
    opacity: 0;/*真ん中の線は透過*/
  }
  
  .openbtn1.active span:nth-of-type(3){
      top: 41px;
      left: 25px;
      transform: translateY(-6px) rotate(45deg);
      width: 30%;
  }

body.active {
    height: 100%;
    overflow: hidden;
}


.hum_menu {
  position:relative;
  display:none;
  z-index:100;
}
.hum_menu_button {
    /* display: none; */
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: -1220px;
    height: 100vh;/*ナビの高さ*/
    transition-duration: 0.6s;
    width: 100vw;
}
.hum_menu_button.active {
    /* display: block; */
    opacity: 1;
    visibility: visible;
    top: 0px;
    background: #fff;
    width: 100vw;
    z-index:110;
}
.hum_menu_button ul {display: flex;flex-wrap: wrap;justify-content: center;}
.hum_menu_button ul li {
    color: #000;
    width: 48%;
}
.hum_menu_button ul li a {
    color: #000;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size:20px;
    padding: 25px 0;
}
.hum_menu_inner {
    max-width: 900px;
    width: 100%;
    padding: 100px 20px;
    box-sizing: content-box;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.dn800 {
    display: block;
}
.hum_menu_button .hum_menu_inner ul li.width100 {
    width: 100%;
}
.hum_menu_inner .li::after {
    content: "";
    width: 48%;
}


@media(max-width: 1300px){
    .header_button ul li a {
        padding: 0 10px;
        font-size:18px;
    }
}
@media(max-width: 1000px){
    .header_logo {
        max-width: 220px;
      margin: 1.5%;
    }
    .header_button ul li a {
        padding: 0 5px;
    }
}
@media(max-width: 800px){
    .dn800 {
        display: none !important;
    }
  .hum_menu {
    display:block;
  }
}
@media(max-width: 768px){
    .header_flex {
        align-items: center;
    }
    .hum_menu_inner {
        padding: unset;
        width: 80%;
    }
}


/* header_button02 */

.header_button02 {
  background: #511e00;
}
.header_button02_flex {
    display: flex;
    justify-content: space-between;
    width:100%;
  height:48px;
}/*
.home_button {max-width: 70px;}
.home_button a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}*/
.brown_inner {width: 20%;}
.brown_inner a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color:#fff;
  text-align:center;
  white-space:nowrap;
  background-color: #511e00;
  transition:background-color 300ms;
}
.brown_inner a:hover {background-color:#85614c;}
.brown_inner a div {
    width: 100%;
}
.brown_inner a:after {
  content:'';
  height:32px;
  border-right: solid 1px #fff;
}
.brown_inner:last-child a:after{
  content:'';
  border-right-width:0;
}
.brown_inner p {
    width:100%;
    font-size:20px;
    font-weight:500;
    color:#fff;
    text-align:center;
    letter-spacing:0.05em;
}
.border_none {
    border-right: none !important;
}
.dn767 {
    display: block;
}
.sp_none {
    display: block;
}
.pc_on {
    display: block;
}
.sp_on {
    display: none;
}
@media(max-width: 1300px){
  .brown_inner p {
    font-size:1.538vw;
  }
}
@media(max-width: 1000px){
  .brown_inner a div {
    height: 60%;
    display: flex;
    align-items: center;
  }
}
@media(max-width: 767px){/*
    .home_button {
        display: none;
    }*/
  .header_button02_flex {
    flex-wrap:wrap;
    justify-content:flex-start;
  height:initial;
    padding: 5px 0 5px;
  }
  .header_button02_flex:after{
    content:'';
    display: block;
    width:25%;
  }
  .brown_inner {
    width:25%;
    margin: 0 auto;
  }
  .brown_inner:last-child a:after{
    border-right-width:1px;
  }
  .brown_inner a div {
        height: 10%;
  }
  .brown_inner p {
    font-size:2.4vw;
  }
  .brown_inner a {
    padding: 5px 0 5px;
    transition:none;
  }
  .brown_inner a:hover {
    background-color: #511e00;
  }
  .brown_inner a:after{
    height:1em;
  }
  .brown_inner:nth-of-type(4) a:after{
    border-right-width:0;
  }
    .nav_dan {
        display: none;
    }
    .brown_inner.sp_none {
        display: none;
    }
    .pc_on {
        display: none;
    }
    .sp_on {
        display: block;
    }
}
@media(max-width: 520px){
  .header_button02_flex:after{
    width:66.67%;
  }
  .brown_inner {
    width:33.33%;
  }
  .brown_inner p {
    font-size:3vw;
  }
  .brown_inner:nth-of-type(3) a:after,
  .brown_inner:nth-of-type(6) a:after{
    border-right-width:0;
  }
  .brown_inner:nth-of-type(4) a:after{
    border-right-width:1px;
  }
}

/* pan */
.pan {
  background:#000;
  padding:10px 0;
  height:40px;
  font-family:'Noto Serif JP', serif;
  font-optical-sizing:auto;
  font-weight:400;
}
.pan p {color: #fff;}
.pan p a {
    padding: 0 0.5%;
}
.pan p a.current {
    pointer-events: none;
}
@media(max-width: 1000px){
    .pan {
        padding: 5px 0;
        font-size:13px;
        height: unset;
    }
}
@media(max-width: 767px){
    .dn767 {
        display: none;
    }
    .pan {
        font-size:11px;
    }
}





/* footer */

.footer {
  font-family:'Noto Serif JP', serif;
  font-optical-sizing:auto;
  font-weight:400;
  background: #000;
  padding: 20px 0 40px;
}
.footer_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer_flex_left {width: 52%;}
.logo_footer {
    max-width: 350px;
  max-width: 282px;
  margin-bottom: 40px;
}
.logo_footer a {
    display: block;
    width: 100%;
    height: 100%;
}
.footer_adress {
    display: flex;
    justify-content: space-between;
}
.footer_adress_in {
    width: 42%;
}
.under_line {
    border-bottom: solid 1px #fff;
    padding-bottom: 10px;
}
.under_name {
    font-size:18px;
    color: #fff;
    font-weight: bold;
    letter-spacing: 0.3em;
}
.adress {
    color: #fff;
    font-size:14px;
    line-height: 2;
    margin: 5px 0;
    letter-spacing: 0.1em;
}
.footer_flex_right {
    width: 46%;
    max-width: 320px;
}
.button {
    max-width: 320px;
    margin:10px auto;
}
.button a {
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    letter-spacing: 0.3em;
    position: relative;
    padding: 7% 5%;
    max-height: 60px;
}
.button a::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 1px;
    top: 50%;
    right: 5%;
    background: #fff;
    transition-duration: 0.2s;
}
.button a:hover::after {
    right: -3%;
}

.button.brown {
    background: #511e00;
}
.button.black {
    border: solid 1px #fff;
    background: #000;
}
.plibate {
    color: #fff;
    font-size:14px;
    letter-spacing: 0.3em;
    text-align: right;
    display: block;
}
.copyright {
    background-color: #fff;
    /* margin: 15px 0; */
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.copyright p {
  font-family:'Noto Serif JP', serif;
  font-optical-sizing:auto;
  font-size:12px;
  font-weight:400;
  letter-spacing: 0.3em;
  text-align: center;
}
.tel {
    max-width: 280px;
}
.tel div {
    max-width: 280px;
}

@media(max-width: 1000px){
    .footer_flex {
        flex-wrap: wrap;
    }
    .footer_flex_left {
        width: 70%;
        margin: 0 auto 40px;
    }
    .footer_flex_right {
        width: 100%;
        margin: 0 auto;
    }
    .footer_adress_in {
        width: 46%;
    }
    .plibate {
        text-align: center;
    }
}
@media(max-width: 768px){
    .footer {
      padding: 30px 0 20px;
    }
}
@media(max-width: 650px){
    .footer_adress {
        flex-wrap: wrap;
    }
    .footer_adress_in {
        width: 100%;
        margin: 0 auto 30px;
    }
    .footer_flex_left {
        margin: 0 auto 0px;
        width: 96%;
    }
    .logo_footer {
        max-width: 280px;
      max-width: 223px;
      margin-bottom: 30px;
    }
    .under_name {
        font-size:15px;
    }
    .adress {
        font-size:13px;
    }
    .tel div {
        max-width: 220px;
    }
    .button a {
        padding: 5% 5%;
    }
    .button {
        margin-bottom: 15px;
    }
}