/*layout*/
@charset "utf-8";
html { scroll-behavior: smooth; }
.contents-width { width: 90%; max-width: 980px;  margin: 0 auto; }

.conts-section { padding: 80px 0; }

@media screen and (max-width: 768px) {
  .conts-section { padding: 50px 0; }
}

.header { text-align: center; position: absolute; top: 0; left: 0; right: 0; margin: auto; padding: 2rem 0; z-index: 99; }

.head-drower { width: 90%; height: 100%;  position: fixed; top: 0; right: 0; background: rgba(0,0,0,.85); color: #FFF; font-weight: bold; text-align: center; padding: 5rem 0; overflow-y: scroll; transform: translateX(100%); transition: transform .5s; }

.open .head-drower { transform: translateX(0); }

.head-menu { margin-bottom: 2em; }
.head-menu > li { margin-bottom: 1em; }

.btn-hamburger { position: fixed; top: 1.25rem; left: 1.25rem; font-size: .8125rem; font-weight: bold; font-family: 'Figtree', sans-serif; padding: 0; border: none; background: none; color: #000; color:transparent;}
.btn-hamburger .btn { width: 4.15em; height: 4.15em; background: #FFF; display: block; border-radius: 50%; margin-bottom: .5em; position: relative; background: none;  }
.btn-hamburger .btn::before,
.btn-hamburger .btn::after { content: '';  width: 1.1rem; height: 2px; display: block; position: absolute; inset: 0; background: #222; margin: auto; transition: transform .3s; }
.btn-hamburger .btn::before{ transform: translateY(-6px); box-shadow: 0 6px 0 #222; }
.btn-hamburger .btn::after { transform: translateY(6px); }

@media screen and (max-width: 768px) {
  .header { padding: 1.5rem; }
  .head-logo img { width: 100px; }
  .btn-hamburger { left: 1rem; top: 1rem; }
  .btn-hamburger .btn { width: 3rem; height: 3rem; }
}

.open .btn-hamburger .btn::before { transform: rotate(45deg); box-shadow: none;  }
.open .btn-hamburger .btn::after {transform: rotate(-45deg);  }


.contact-block { }
.contact-block .tel { font-family: 'Figtree', sans-serif; font-weight: bold; text-align: center; font-size: 1.2rem;  }
.contact-block .reserve { display: grid; grid-template-columns: 100px 100px; gap: 5px; font-size: .75rem; text-align: center;  color: #FFF; font-weight: bold; width: fit-content; margin: 0 auto; }
.contact-block .reserve a.line {background: #00B900; text-align: center; display: block; border-radius: 1.5em; padding: .5em;}
.contact-block .reserve a.mail {background: #000; text-align: center; display: block; border-radius: 1.5em; padding: .5em; }

.header .contact-block .tel { margin-bottom: .5em; }
.fixed-contact { position: fixed; bottom: 0; right: 0; box-shadow: 0 0 10px rgba(0,0,0,.13); z-index: 98; background: #FFF; padding: .5em 1em; }

@media screen and (max-width: 768px) {
  .fixed-contact { width: 100%; }
}

.footer { background: url("../img/common/bg-foot.jpg") no-repeat center center / cover; color: #FFF; padding: 280px 0 80px; }
.footer .inner { display: flex; flex-wrap: wrap; justify-content: space-between; }
.foot-logo { width: 364px; height: auto; }
.foot-logo img { width: 100%; }
.foot-logo .comp { text-align: right; margin-top: .5em; font-size: .8375rem; display: block; }
.foot-menu { display: flex; font-weight: bold; }
.foot-menu > ul + ul { margin-left: 3em;}
.foot-menu > ul > li { margin-bottom: .5em; }
.copyright{ text-align: center; font-size: .7rem; margin-top: 190px; font-family: 'Figtree', sans-serif; }

@media screen and (max-width: 900px) {
  .foot-logo { width: 40%; }
}
@media screen and (max-width: 768px) {
  .footer { padding: 150px 0 50px; }
  .footer .inner { flex-direction: column; }
  .foot-logo { width: 60%; }
  .foot-menu  { margin-top: 3em; font-size: .9rem; }
  
  .copyright { margin-top: 100px; }
}