/*layout*/
@charset "utf-8";
html { scroll-padding-top: 100px; }
body { min-height: 100vh; display: flex; flex-direction: column; }
img { max-width: 100%; }

.conts-width { width: 1200px; max-width: 90%; margin: 0 auto; }


.header { padding: 1.25rem 2rem; position: absolute; top: 0; left: 0; right: 0; margin: auto; z-index: 99; }
.header .inner { display: flex; justify-content: space-between; }
.head-navi { display: flex; align-items: center; }
.head-navi > li + li { margin-left: 2em; }
a.head-contact { display: block; background: #333; color: #FFF; display: flex; align-items: center; justify-content: center; padding: .5em 1em ;border-radius: 2em; }
a.head-contact img {margin-right: .5em; }
.btn-hamburger { display: none; }

@media screen and (max-width: 900px) {
  .header { padding: .5rem 1rem; }
  .head-logo { width: 150px; }
  .btn-hamburger { width: 3rem; height: 3rem; display: block;  position: fixed; top: 1rem ;right: 1rem; margin: auto; z-index: 999; background: none; border: none; padding: 0; text-indent: 200%; overflow: hidden; white-space: nowrap; }
  .btn-hamburger::before, 
  .btn-hamburger::after { content: ''; width: 1.5rem; height: 2px; display: block; position: absolute; inset: 0; margin: auto; background: #333; transition: transform .3s; }
  .btn-hamburger::before { transform: translateY(-8px); box-shadow: 0 8px 0 #333; }
  .btn-hamburger::after{ transform: translateY(8px);}
  
  .btn-hamburger.open::before { transform: rotate(45deg); box-shadow: none; }
  .btn-hamburger.open::after { transform: rotate(-45deg);}
  
  .head-navi { position: fixed; top: 0; right: 0; margin: auto; background: #FFE5EB; flex-direction: column; align-items: center; justify-content: center; padding: 5rem 5%; width: 100%; text-align: center; opacity: 0; pointer-events: none; transition: opacity .3s; height: 100%; }
  .head-navi > li + li { margin: 1.5em 0 0; }
  
  .header.open .head-navi { opacity: 1; pointer-events: auto; }
}

.footer { position: relative; z-index: 2; }
.footer-top { background: #FFF url("../img/common/bg-foot.svg") no-repeat center center / cover; padding: 70px 0; }

.title-footer { max-width: 90%; margin: 0 auto 2rem; }
.title-footer img { width: 100%; }

.footer-top .inner { display: flex; justify-content: space-between; width: 1400px; }
.footer-top .inner .img { width: 45%; }
.footer-top .inner .text { width: 50%; }
.footer-top .title { font-size: 2.2rem; font-weight: bold; margin: 1em 0; line-height: 1.7; letter-spacing: 0.06em; }
.footer-top p { margin-bottom: 1em; }
.footer-top .btn-l { margin-top: 2em; }
.footer-top .btn-l img { width: 1em; height: 1em; margin-right: .5em; }


@media screen and (max-width: 900px) {
  .footer-top .inner { flex-direction: column; }
  .footer-top .inner .img { width: 100%; margin-bottom: 1em;  }
  .footer-top .inner .text { width: 100%; }
  .footer-top .title { font-size: 1.5rem; }
}
@media screen and (max-width: 600px) {
  .footer-top .title { font-size: 1.3rem; }
}

.footer-bottom { text-align: center; background: #FFF3F6; padding-top: 40px; }
.foot-navi { display: flex; justify-content: center; margin: 2em 0; }
.foot-navi > li:not(:last-child) {margin-right: 2em; }
a.foot-contact {  background: #333; display: flex; align-items: center; justify-content: center; width: fit-content; padding: 1em 2em; margin: 0 auto; color: #FFF; border-radius: 2em;  }
.foot-contact img { margin-right: .5em; }
.copyright { display: block; font-size: .75rem; margin: 2em 0 1em; }
@media screen and (max-width: 900px) {
  .foot-navi { font-size: .9rem; }
  .foot-navi> li:not(:last-child) {margin-right: 1em; }
}