/*layout*/
@charset "utf-8";
html{ scroll-behavior: smooth; scroll-padding-top: 80px; }
.contents-width-l { width: 90%; max-width: 1100px;  margin: 0 auto; }
.contents-width-m { width: 90%; max-width: 1280px;  margin: 0 auto; }
.contents-width { width: 90%; max-width: 998px;  margin: 0 auto; }

.conts-section { padding: 5rem 0; }
.conts-section-t { padding-top: 5rem; }

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

.body-wrapper { overflow: hidden; width: 100%; }

  body { padding-top: 80px; }
.header { background: #F2CA1F; padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; right: 0; z-index: 9999; }

.btn-hamburger { display: none; }

.head-logo { display: flex; align-items: center; font-size: 1.125rem; font-weight: bold; }
.head-logo img { width: 54px; margin-right: 1em; }
.head-menu { display: flex; align-items: center; }
.head-navi { display: flex; font-size: .8735rem; align-items: center; }
.head-navi > li { margin-right: 2em; }

a.head-contact { background: #AC2024; color: #FFF; padding: .5em 1em; border-radius: 1.5em; border: 1px solid #FFF; display: flex; align-items: center; margin-left: 2em; font-size: .8375rem; }
.head-contact img { margin-right: .5em; width: 1.2em; height: auto; }

.lang-select { width: 8em; line-height: 3; padding: 0 .5em; height: 3em; appearance: none; background: #FFF url("../img/common/right-chevron.svg") no-repeat right .7em top 1.3em; }

@media screen and (max-width: 1200px) {
  body { padding-top: 78px; }
  .head-logo { font-size: 1rem; }
  .head-logo img { width: 50px; margin-right: .5em ;}
  .head-navi > li { margin-right: 1em; }
  a.head-contact  { margin-left: 0; }
}
@media screen and (max-width: 1000px) {
  body { padding-top: 80px; }
  .head-navi { width: 20rem; position: fixed; right: 0; top: 0; padding: 8rem 8%; background: #F2CA1F; transform: translateX(100%); transition: transform .3s; display: block; height: 100%; z-index: -1; }
  .head-navi > li { margin-bottom: 1em; }
  .header.open .head-navi { transform: translateX(0); }
  
  .btn-hamburger { display: block; width: 2.5rem; height: 2.5rem; border: none; padding: 0; background: none; position: relative; text-indent: 200%; overflow: hidden; white-space: nowrap; }
  .btn-hamburger::before,
  .btn-hamburger::after { content: ''; width: 1.5rem; height: 2px; display: block; background: #222222; position: absolute; inset: 0; margin: auto; transition: transform .3s; }
  .btn-hamburger::before { transform: translateY(-6px); box-shadow: 0 6px 0 #222; }
  .btn-hamburger::after { transform: translateY(6px); }
  
  .btn-hamburger.open::before { transform: rotate(45deg); box-shadow: none; }
  .btn-hamburger.open::after  { transform: rotate(-45deg);}
  
  .head-menu{ margin: 0 .5em 0 auto; }
}
@media screen and (max-width: 768px) {
  body { padding-top: 49px; }
  .header { padding: .5rem 1rem; }
  .head-navi { width: 15rem; padding: 5rem 8% ;}
  .head-logo { font-size: .8rem; }
  .head-logo img { width: 30px;}
  a.head-contact { width: 2.5rem; height: 2.5rem; border-radius: .5rem; justify-content: center; padding: 0; }
  a.head-contact img { margin: 0; }
  a.head-contact span { display: none; }
}

.footer { background: #EEEEEE; padding: 84px 0 70px; font-weight: 500; }
.footer .inner { display: flex; justify-content: space-between; align-items: flex-start; }

.foot-logo { width: 93px; margin: auto; }
.foot-info { display: flex;  align-items: center; }
.foot-info .text { margin-left: 1.5rem; }
.foot-info .name { font-size: 1.1rem; }
.foot-info .address { font-size: .8735rem;  }

.foot-menu { display: grid; grid-template-columns: 11em 11em; gap: .5rem 4rem ;font-size: .8735rem; }
.foot-sns { display: flex; }
.foot-sns > li + li { margin-left: 2em; }
.foot-sns img { width: auto; height: 1.3rem; display: block; }

@media screen and (max-width: 1200px) {
  
  .foot-menu { gap: .5rem 1rem; }
}
@media screen and (max-width: 1000px) {
  .footer .inner { flex-direction: column; justify-content: center; align-items: center; }
  
  .foot-menu  { margin: 3rem auto; }
}
@media screen and (max-width: 768px) {
  .foot-info { flex-direction: column; }
  .foot-logo { width: 50px; }
  .foot-info .text { margin: 1rem auto 0; }
  .foot-info .name { font-size: 1rem; }
  .foot-info .address { font-size: .835rem;  }
  .foot-menu { font-size: .65rem; }
}