/*layout*/
@charset "utf-8";
.contents-wrap { width: 90%; max-width: 1200px;  margin: 0 auto; }

.box-section { padding: 150px 0; }
.box-section-t { padding-top: 150px; }

.box-section-s { padding: 50px 0; }
.box-section-s-t { padding-top: 50px; }

@media screen and (max-width: 1500px) {
  .contents-wrap { width: 85%; margin: 0 auto;}
}

@media screen and (max-width: 900px) {
  .box-section { padding: 80px 0; }
  .box-section { padding-top: 80px; }
}
/*ヘッダー*/
.head-navi { width: calc(50% + 600px); max-width: 95%;  background: #E7EAE1; position: fixed; top: 0; right: 0; margin: auto; z-index: 999; }
.head-navi.-home { opacity: 0; transition: opacity .3s; }
.head-navi.-home.-show { opacity: 1; }
.head-navi-list { display: flex; justify-content: space-around; width: 1200px; max-width: 85%; } 
.head-navi-list a { padding: 1em; display: block; }

.head-button { display: none; }
@media screen and (max-width: 900px) {
  .head-navi { font-size: .9rem; }
}
@media screen and (max-width: 768px) {
  .head-navi { display: none; }
  .head-button { display: block; position: fixed; left: 0; top: 0; width: 4rem; height: 4rem; z-index: 9999; background: #E7EAE1; border: none; text-indent: 100%; padding: 0; overflow: hidden; white-space: nowrap; }
  .head-button::before,
  .head-button::after { content: ''; width: 2rem; height: 1px; background: #2C331C; display: block; position: absolute; inset: 0; margin: auto; transition: transform .3s; }
  .head-button::before  { transform: translateY(-8px); box-shadow: 0 8px 0 #2C331C; }
  .head-button::after { transform: translateY(8px); }
  
  .head-button.open::before { transform: rotate(45deg); box-shadow: none; }
  .head-button.open::after  { transform: rotate(-45deg); }
  
  
  .head-navi.open { display: block; position: fixed; inset: 0; background: #E7EAE1; padding: 5rem 0; text-align: center; opacity: 1; transition: opacity 0s; max-width: 100%; }
  .head-navi-list { flex-direction: column; text-align: center; width: 100%; max-width: 100%; }
}
.head-logo {position: absolute; top: 0; right: 0; margin: auto; width: calc(50% - 600px); text-align: center; padding-top: 4rem; min-width: 15%; z-index: 9999; }
.head-logo img { max-width: 40%; height: auto; }


@media screen and (max-width: 900px) {
  .head-logo {  padding-top: 5vw; }
  .head-logo img { max-width: 80%; }
}


/*フッター*/
.footer-contact { background: rgba(255,255,255,.15); padding: 120px 0; text-align: center; margin-top: 120px; }
.footer-contact .inner { max-width: 540px; width: 90%; margin: 0 auto; }
.footer-contact .title { font-size: 1.8rem; margin-bottom: 2em; }
.footer-contact .lead .icon { display: block; text-align: center; margin:0 auto 1em; }

.footer-contact .lead { margin-bottom: 1em; }
.footer-contact .link { display: block; width: 100%; margin: 0 auto 1.5em; border-bottom: 1px solid; font-size: 1.8rem; padding: 1em; background: url("../img/common/icon-arrow-r.svg") no-repeat right center / .5em auto;}

@media screen and (max-width: 900px) {
  .footer-contact { padding: 80px 0; margin-top: 80px; }
  .footer-contact .title,
  .footer-contact .link { font-size: 1.5rem; }
}

.footer-bottom .inner { padding: 100px; display: flex; justify-content: space-between; }
.footer-bottom .logo { font-size: 1.3rem;  }
.footer-bottom .logo img { display: block; width:  7em;margin-bottom: .5em; }


.foot-navi > li + li { margin-top: 1em; }
.footer-bottom .pagetop { transform-origin: right top; transform: rotate(90deg) translateX(100%); }


@media screen and (max-width: 900px) {
  .footer-bottom .inner { padding: 70px 5%; }
  .foot-navi { font-size: .9rem; }
  .footer-bottom .logo { font-size: 1rem; }
}
@media screen and (max-width: 600px) {
  .foot-navi { font-size: .8rem; }
  .footer-bottom .logo { font-size: .8rem; }
}