/* CSS Document */
html { scroll-behavior: smooth; }
body { padding-top: 100px; }
body.page-id-4596 { padding: 0; }
.contents-width { width: 86%; max-width: 1100px; margin: 0 auto;  }
.contents-width-l { width: 86%; margin: 0 auto; }
.contents-width-m { width: 90%; max-width: 842px; margin: 0 auto;  }
.contents-width-s { width: 90%; max-width: 700px; margin: 0 auto;  }

@media screen and (max-width: 768px) {
  html { font-size: .85rem; }
  body { padding-top: 12vw; }
}
.header { position: fixed; widows: 100%; left: 0; right: 0; top: 0; z-index: 999;}
.header-inner { padding: 1.8rem 2rem; display: flex; justify-content: space-between; align-items: center; position: relative; }
.head-logo img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: fit-content; }

.head-order { font-family: 'Jost', sans-serif; font-weight: 600; color: #FFF; background: #DE3427; font-size: .8735rem; padding: 1em 2em; border-radius: 2em; border: 1px solid #DE3427; transition: color .3s, background .3s; }

@media (hover:hover) {
  .head-order:hover{ background: #FFF; color: #DE3427; }
}

@media screen and (max-width: 768px) {
  .header { height: 12vw; }
  .header-inner { padding: 1rem .5em 1em 1em; }
  .head-logo img { width: 53vw; position: relative; }
  .head-order  { width: 25vw; font-size: 2.7vw; padding: 1em 0; text-align: center; margin: 1.7vw;  }
}

.btn-hamburger { width: 1.5rem; height: 1.5rem; display: block; background: none; padding: 0; border: none; position: relative; white-space: nowrap; overflow: hidden; text-indent: 100%; cursor: pointer; }
.btn-hamburger::before,
.btn-hamburger::after { content: ''; width: 90%; height: 2px; background: #333333; display: block; position: absolute; inset: 0; margin: auto; transition: transform .3s;  }
.btn-hamburger::before { transform: translateY(-6px); }
.btn-hamburger::after { transform: translateY(6px); }


@media screen and (max-width: 768px) {
  .header-inner { padding: 0; }
  .btn-hamburger { width: 12vw; height: 12vw; }
  .btn-hamburger::before,
  .btn-hamburger::after { width: 38%; height: 2px; }
  .btn-hamburger::before { transform: translateY(-1.25vw); }
  .btn-hamburger::after { transform: translateY(1.25vw); }
}
.head-overlay-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: #C33D31; color: #FFF; display: flex; align-items: center; justify-content: center; min-height: 700px;pointer-events: none; opacity: 0; transition: opacity .3s; }
.head-overlay-menu .inner { width: 90%; max-width: 850px; margin: 0 auto;  }
.head-menu { font-size: 1.5rem; font-family: 'Jost', sans-serif; font-weight: 600; }
.head-menu> li { margin-bottom: 1em; }
.head-overlay-menu .site-name { margin-top: 100px; }

.header.menu-open .head-overlay-menu { opacity: 1; pointer-events: auto; }
.head-menu-close { background: none; width: 1rem ;height: 1rem; margin-bottom: 3em; border: none; position: relative; cursor: pointer; }
.head-menu-close::before,
.head-menu-close::after { content: ''; width: 100%; height: 2px; background: #FFF; display: block; position: absolute; inset: 0; margin: auto; transition: transform .3s;  }
.head-menu-close::before { transform: rotate(-45deg); }
.head-menu-close::after { transform: rotate(45deg); }


.footer { background: #000000; color: #FFF; position: relative; padding: 50px 0 90px; text-align: center;margin-top: 130px;  }
.footer.home { margin-top: 0; }
.footer-logo .logo { position: absolute; left: 0; right: 0; top: 0; margin: auto; transform: translateY(-50%); }
.footer-logo .name { width: 70%; max-width: 420px; margin:  0 auto 75px; display: block; } 

@media screen and (max-width: 768px) {
  .footer { padding: 13vw 0 23vw; }
  .footer-logo .logo img { width: 16vw; }
  .footer-logo .name { width: 83vw; margin-bottom: 7.6vw; }
}


.footer-recruit { position: relative; padding: 64px 5% 40px; width: 90%; max-width: 780px; margin: 0 auto; overflow: hidden; }
.footer-recruit::before { content: '';  background: url("../images/common/recruit.jpg") no-repeat 90% center / cover; width: 100%; height: 100%; position: absolute; inset: 0; margin: auto; transform: scale(1.05);  transition: transform .9s cubic-bezier(.4,0,0,1), -webkit-transform .9s cubic-bezier(.4,0,0,1);}

.footer-recruit .title { font-size: 4.5rem; line-height: 1; margin-bottom: .1em; height: 1em; font-family: 'Poppins', sans-serif; font-weight: bold; position: relative; z-index: 3; }
.footer-recruit .button { border: 1px solid; font-family: 'Poppins', sans-serif; font-weight: bold; font-size: .8375rem; padding: 1.5em; display: block; border-radius: 2em; background: url("../images/common/arrow-r.svg") no-repeat right 2em center/ auto .8em; max-width: 280px; margin: 0 auto; transition: background-color .3s, color .3s; position: relative; z-index: 3; }

.footer-sns { margin: 40px 0 80px; display: flex; align-items: center; justify-content: center; }
.footer-sns > li + li { margin-left: 1.5em; }
.footer-sns .icon { width: 1.5rem; height: 1.5rem; object-fit: contain; }

@media (hover:hover) {
  .footer-recruit:hover::before { transform: scale(1); }
  .footer-recruit:hover .button { background-color: #FFF; color: #333; background-blend-mode: exclusion;}
}
@media screen and (max-width: 768px) {
  
  .footer-recruit { padding: 10vw 0; }
  .footer-recruit .title { font-size: 7.6vw; }
  .footer-recruit .button { font-size: 3vw; width: 48vw; margin-top: 1em; background: none; }
  
  .footer-sns { margin: 14vw 0 12vw; }
  .footer-sns > li + li { margin-left: 5.5vw; }
  .footer-sns .icon { width: 4.3vw; height: 4.3vw; }
}


.loop-text { width: 100%; height: 100px; overflow: hidden; position: relative; }
.loop-text::before { content: ''; display: block; width: 3818px; height: 100px;  background: url("../images/common/name-text.svg") repeat-x left center / auto 100%; position: absolute; top: 0; left: 0;  margin: auto; animation: looptext linear 10s infinite; } 

@-webkit-keyframes looptext {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes looptext {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media screen and (max-width: 768px) {
  .loop-text {height: 10vw; }
  .loop-text::before { width: 291.45vw; height: 10vw; }
}