@charset "UTF-8";

/* ===============================================================================

  FIRON Common SP Styles

=============================================================================== */
body { min-width: 100%; }
.pc { display: none; }
.sp { display: inherit; }

/*
  Header
=============================================================================== */
.l-header {
  padding: 3% 3.75%;
  align-items: center;
}
/*
.l-header h1 {
  font-size: 40px;
  font-size: 4.0rem;
}
*/
.l-header h1 img { width: 175px; }

@media screen and (max-width:480px) {
  /*
  .l-header h1 { font-size: calc(40 / 480 * 100vw); }
  */
  .l-header h1 img { width: calc(175 / 480 * 100%); }
}

/* Global Navi
------------------------------------------------------------------------------- */
.gnav {
  position: fixed;
  top: 0;
  right: 0;
  width: 250px;
  height: 100vh;
  display: grid;
  place-content: center;
  transform: translateX(250px);
  background-color: var(--blk);
  transition: all .3s;
}
.gnav.is-opened { transform: translateX(0); }
.gnav ul { display: block; }
.gnav ul li {
  font-size: 18px;
  font-size: 1.8rem;
  margin: 0 0 1em;
}
.gnav ul li a { color: var(--wht); }
.gnav ul li a::after { content: none; }

@media screen and (max-width:480px) {
  .gnav {
    width: 50vw;
    transform: translateX(50vw);
  }
  .gnav ul li { font-size: calc(18 / 480 * 100vw); }
}

/* SP Menu Button
------------------------------------------------------------------------------- */
.menu-trigger {
  position: relative;
  border: 0;
  background: none;
  width: 36px;
  height: 22px;
  display: inline-block;
  cursor: pointer;
  transition: all .3s;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--blk);
  display: inline-block;
  transition: all .3s;
}
.menu-trigger span:first-of-type { top: 0; }
.menu-trigger span:nth-of-type(2) { top: 10px; }
.menu-trigger span:last-of-type { bottom: 0; }
.menu-trigger.is-toggled span:first-of-type {
  transform: translateY(10px) rotate(-45deg);
  background-color: var(--wht);
}
.menu-trigger.is-toggled span:nth-of-type(2) {
  visibility: hidden;
  opacity: 0;
}
.menu-trigger.is-toggled span:last-of-type {
  transform: translateY(-10px) rotate(45deg);
  background-color: var(--wht);
}

@media screen and (max-width:414px) {
  .menu-trigger {
    transform: scale(.85);
    transform-origin: top right;
  }
}

/*
  Footer
=============================================================================== */
.l-footer { padding: 30px 0 15px; }
.copy {
  font-size: 13px;
  font-size: 1.3rem;
}

@media screen and (max-width:480px) {
  .l-footer { padding: 6% 0 3%; }
  .copy {
    font-size: 12px;
    font-size: 1.2rem;
  }
}

@media screen and (max-width:414px) {
  .copy {
    font-size: 11px;
    font-size: 1.1rem;
  }
}

/* SNS
------------------------------------------------------------------------------- */
.sns p {
  font-size: 18px;
  font-size: 1.8rem;
  margin: 0 0 20px;
}
.fa-5x { font-size: 4em; }

@media screen and (max-width:480px) {
  .sns p {
    font-size: calc(16 / 480 * 100vw);
    margin: 0 0 4%;
  }
  .fa-5x { font-size: calc(40 / 480 * 100vw); }
}

/* Footer Navi
------------------------------------------------------------------------------- */
.fnav { margin: 30px 0; }
.fnav ul li {
  font-size: 18px;
  font-size: 1.8rem;
}

@media screen and (max-width:480px) {
  .fnav { margin: 5% 0; }
  .fnav ul li { font-size: calc(16 / 480 * 100vw); }
  .fnav ul li a { padding: 0 .75em; }
}