@charset "UTF-8";

/* ==========================================================================
   Base
========================================================================== */
body {
   font-size: 81.3%;
}
body.fixed {
   position: fixed;
   width: 100%;
   height: 100%;
   left: 0;
}

#gNav-close-pc {
   display: none !important;
}

#gNav-close:before {
   content: '';
   width: 100%;
   height: 64px;
   position: absolute;
   left: 0;
   top: 0;
   background: #FFF;
}

/* ==========================================================================
   Layout
========================================================================== */
#main {
   margin-top: 64px;
}

#main-contents {
  margin-bottom: 16vw;
}

.section {
  margin-top: 50px;
  margin-bottom: 50px;
}
.content {
  margin-top: 25px;
  margin-bottom: 25px;
}
@media only screen and (min-width: 576px) {
   #main-contents {
     margin-bottom: 12vw;
   }
  .section {
    margin-top: 60px;
    margin-bottom: 60px;
  }
  .content {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}
@media only screen and (min-width: 768px) {
  .section {
    margin-top: 80px;
    margin-bottom: 80px;
  }
  .content {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}

/* ==========================================================================
   Header
========================================================================== */
#siteHeader {
   height: 64px;
}
.inner-header {
   padding: 0 64px 0 20px;
}

#logo {
   font-size: .846em;
   width: 260px;
}

/* ==========================================================================
   Navigation
========================================================================== */
.gNav {
   position: fixed;
   top:  64px;
   left: 0;
   width: 100%;
   height: calc(100vh - 64px);
   padding: 15px 0 0;
   background: #FFF;
   text-align: center;
   display: none;
}
.gNav__inner {
   height: 100%;
   overflow-y: auto;
   position: relative;
   z-index: 998;
}
.gNav .navBar > ul > li > a {
  padding: 1em 20px;
  font-size: 1.231em;
}

.gNav .sub-menu {
   display: none;
}
.gNav .navBar .sub-menu ul {
  max-width: 540px;
  margin: 0 auto;
  padding: 15px;
}
.gNav .navBar .sub-menu li {
  padding: 5px;
}
.gNav .navBar .sub-menu li .card {
  height: 140px;
  font-size: 1.077em;
}

@media only screen and (max-width: 575px) {
   .gNav .navBar .sub-menu ul {
      max-width: 400px;
   }
   .gNav .navBar .sub-menu li .card {
      padding: 12px;
   }
   .gNav .navBar .sub-menu li.col-6 .card .txtBox:before,
   .gNav .navBar .sub-menu li.col-6 .card .txtBox:after {
      transform: scale(0.5);
      transform-origin: right bottom;
   }
}

/* Sub Navigation */
.gNav .navBar .sub-nav {
   padding: 2em 20px 3em;
}
.gNav .navBar .sub-nav .btn {
   display: block;
   text-align: center;
   max-width: 540px;
   margin: 0 auto;
}

@media only screen and (max-width: 575px) {
   .gNav .navBar .sub-nav .btn {
      max-width: 400px;
   }
}

/* ==========================================================================
   Footer
========================================================================== */
.fNav {
   padding-top: 2em;
   padding-bottom: 2em;
}
.fNav .navBar > ul > li {
   padding: 0 45px 15px;
}

.fNav .navBar ul .sns-list {
   width: 100%;
   text-align: center;
   padding: 0;
   margin-top: 2em;
}
.fNav .navBar ul .sns-list .menu-ttl {
   line-height: 1;
   margin-bottom: -.5em;
}
.fNav .navBar ul .sns-list .menu-ttl > span {
   margin: 0;
   padding: 0;
   border-bottom: none;
}
.fNav .navBar ul .sns-list ul {
   padding: 1.25em 0 1em;
   background: #F2F2F2;
}
.fNav .navBar ul li a {
  font-size: 1em;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
   .fNav .navBar ul.main-nav > li:not(.sns-list) {
      max-width: 580px;
      margin-right: auto;
      margin-left: auto;
   }
}

@media only screen and (min-width: 768px) {
   .fNav .navBar > ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
   }
   .fNav .navBar > ul > li {
      min-width: 220px;
      padding: 0 20px 15px;
   }
}

.fbNav .navBar > ul {
   display: flex;
   justify-content: center;
}

#fLogo .logo__inner {
   width: 140px;
}

.footer-bottom > .container {
   max-width: 100%;
   padding-right: 0;
   padding-left: 0;
}
.fbNav {
   padding: 2em 0;
}
.copyright {
   background: #F7F7F7;
   font-size: .625rem;
   text-align: center;
   padding: 1.5em 0;
}