@charset "UTF-8";

/*=============================================
 * body
 *=============================================*/
body {
   background-color: #F6F6F6;
   color: #000;
   font-family: "UDDigiKyokashoN-R", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
   font-weight: normal;
   font-size: 16px;
   line-height: 26px;
   letter-spacing: 0;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   min-width: inherit;
   min-height: inherit;
   max-height: 100%;
   box-sizing: border-box;
   position: relative;
}

body:before {
   content: '';
   width: 50%;
   height: 100%;
   background-color: #EBEBEB;
   position: absolute;
   top: 0;
   left: 0;
}

@media screen and (max-width: 767px) {
   body {
      font-size: 15px;
   }
}

/*=============================================
 * fonts
 *=============================================*/
.fnt-mincho {
   font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.fnt-meiryo {
   font-family: "メイリオ", Meiryo, "ヒラギノ角ゴシックPro", "ＭＳ ゴシック", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.fnt-gothic {
   font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

.fnt-Bahnschrift {
   font-family: 'Bahnschrift', sans-serif;
}

.fnt-SitkaR {
   font-family: 'Sitka', sans-serif;
}

/*=============================================
 * <main>
 *=============================================*/
main {
   overflow: hidden;
   clear: both;
   margin: 0 auto;
   position: relative;
}

/* -- -- */
.wrap {
   width: 100%;
   max-width: 1550px;
   box-sizing: border-box;
   margin: 0 auto;
   position: relative;
}

@media screen and (max-width: 1600px) {
   .wrap {
      max-width: 1200px;
   }
}

@media screen and (max-width: 1440px) {
   .wrap {
      max-width: 960px;
      padding: 0;
   }
}

@media screen and (max-width: 991px) {
   .wrap {
      max-width: 720px;
   }
}

@media screen and (max-width: 767px) {
   .wrap {
      max-width: 100%;
      padding: 0 20px;
   }
}

/* -- -- */
a {
   transition: all 0.3s;
}

a:hover {
   opacity: 0.6;
   text-decoration: none;
}

a[href^="tel:"] {
   pointer-events: none;
   cursor: text;
}

@media screen and (max-width: 767px) {
   a[href^="tel:"] {
      pointer-events: auto;
      cursor: pointer;
   }
}

.pc {
   display: block;
}

.ipd {
   display: none;
}

.sp {
   display: none;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
   .ipd {
      display: block;
   }
}

@media screen and (max-width: 767px) {
   .pc {
      display: none;
   }

   .sp {
      display: block;
   }
}

/* wow css */
.animated {
   -webkit-animation-duration: 1.6s;
   -webkit-animation-fill-mode: both;
   animation-duration: 1.6s;
   animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
   0% {
      -webkit-transform: translate3d(0, 40px, 0);
      opacity: 0;
      transform: translate3d(0, 40px, 0);
   }

   to {
      -webkit-transform: translateZ(0);
      opacity: 1;
      transform: translateZ(0);
   }
}

@keyframes fadeInUp {
   0% {
      -webkit-transform: translate3d(0, 40px, 0);
      opacity: 0;
      transform: translate3d(0, 40px, 0);
   }

   to {
      -webkit-transform: translateZ(0);
      opacity: 1;
      transform: translateZ(0);
   }
}

.fadeInUp {
   -webkit-animation-name: fadeInUp;
   animation-name: fadeInUp;
}

@-webkit-keyframes fadeIn {
   0% {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

@keyframes fadeIn {
   0% {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

.fadeIn {
   -webkit-animation-name: fadeIn;
   animation-name: fadeIn;
}

/* -- -- */
/*=============================================
 * <header>
 *=============================================*/
header {
   width: 100%;
   box-sizing: border-box;
   color: #fff;
   padding: 43px 0;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 100;
   transition: all 0.3s;
}

header .wrap {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
}

header h1 {
   font-family: 'UDDigiKyokashoN-B', sans-serif;
   font-weight: bold;
   font-size: 24px;
   letter-spacing: 0;
   line-height: 37px;
   flex: auto;
}

header nav {
   font-weight: bold;
   font-size: 18px;
   letter-spacing: 0.05em;
   line-height: 37px;
}

header nav a {
   position: relative;
}

header nav a+a:before {
   content: ' / ';
   display: inline-block;
}
header.fixed{
   background-color: #000;
   padding: 13px 0;
}
header.fixed h1{
   font-size: 18px;
}
@media screen and (max-width: 991px) {
   header h1 {
      font-size: 20px;
   }

   header nav {
      font-size: 14px;
   }
}

@media screen and (max-width: 767px) {
   header {
      padding: 11px 0;
   }
   header.fixed{
      padding: 11px 0
   }

   header h1 {
      font-size: 16px;
      line-height: 24px;
   }

   header nav {
      display: block;
      width: 100%;
      height: 100vh;
      overflow: hidden auto;
      box-sizing: border-box;
      font-size: 25px;
      line-height: 50px;
      text-align: center;
      padding: 120px 20px;
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
      opacity: 0;
      visibility: hidden;
   }

   header nav:before {
      content: '';
      width: 100%;
      height: 100%;
      background-color: #000;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transform-origin: right;
      transform-origin: right;
      -webkit-transition-duration: .6s;
      transition-duration: .6s;
      -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
      transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
      -webkit-transition-property: -webkit-transform;
      transition-property: -webkit-transform;
      transition-property: transform;
      transition-property: transform, -webkit-transform;
   }

   header nav a {
      display: block;
   }

   header nav a+a:before {
      display: none;
   }

   header nav .js-typo {
      display: inline-block;
      opacity: 0;
   }

   .navOpen header nav {
      opacity: 1;
      visibility: visible;
   }

   .navOpen header nav:before {
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
   }

   .navOpen header nav .js-typo {
      opacity: 1;
      -webkit-transition-duration: 1.2s;
      transition-duration: 1.2s;
      -webkit-transition-timing-function: ease;
      transition-timing-function: ease;
      -webkit-transition-property: opacity;
      transition-property: opacity;
   }

   .u-trsde-5 {
      -webkit-transition-delay: 50ms;
      transition-delay: 50ms;
   }

   .u-trsde-10 {
      -webkit-transition-delay: .1s;
      transition-delay: 0.1s;
   }

   .u-trsde-15 {
      -webkit-transition-delay: .15s;
      transition-delay: 0.15s;
   }

   .u-trsde-20 {
      -webkit-transition-delay: .2s;
      transition-delay: 0.2s;
   }

   .u-trsde-25 {
      -webkit-transition-delay: .25s;
      transition-delay: 0.25s;
   }

   .u-trsde-30 {
      -webkit-transition-delay: .3s;
      transition-delay: 0.3s;
   }

   .u-trsde-35 {
      -webkit-transition-delay: .35s;
      transition-delay: 0.35s;
   }

   .u-trsde-40 {
      -webkit-transition-delay: .4s;
      transition-delay: 0.4s;
   }

   .u-trsde-45 {
      -webkit-transition-delay: .45s;
      transition-delay: 0.45s;
   }

   .u-trsde-50 {
      -webkit-transition-delay: .5s;
      transition-delay: 0.5s;
   }

   .u-trsde-55 {
      -webkit-transition-delay: .55s;
      transition-delay: 0.55s;
   }

   .u-trsde-60 {
      -webkit-transition-delay: .6s;
      transition-delay: 0.6s;
   }

   .u-trsde-65 {
      -webkit-transition-delay: .65s;
      transition-delay: 0.65s;
   }

   .u-trsde-70 {
      -webkit-transition-delay: .7s;
      transition-delay: 0.7s;
   }

   .u-trsde-75 {
      -webkit-transition-delay: .75s;
      transition-delay: 0.75s;
   }

   .u-trsde-80 {
      -webkit-transition-delay: .8s;
      transition-delay: 0.8s;
   }

   .u-trsde-85 {
      -webkit-transition-delay: .85s;
      transition-delay: 0.85s;
   }

   .u-trsde-90 {
      -webkit-transition-delay: .9s;
      transition-delay: 0.9s;
   }

   .u-trsde-95 {
      -webkit-transition-delay: .95s;
      transition-delay: 0.95s;
   }

   .u-trsde-100 {
      -webkit-transition-delay: 1s;
      transition-delay: 1s;
   }
}

/*=============================================
 * <Section>
 *=============================================*/
/* -- -- */
/* -- -- */
/*=============================================
 * <footer>
 *=============================================*/
footer {
   background-color: #282828;
   color: #fff;
}

footer .wrap {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   padding-top: 71px;
   padding-bottom: 71px;
}

footer h2 {
   font-family: 'UDDigiKyokashoN-B', sans-serif;
   font-weight: bold;
   font-size: 24px;
   letter-spacing: 0;
   line-height: 37px;
   flex: auto;
}

footer nav {
   font-weight: bold;
   font-size: 18px;
   letter-spacing: 0.05em;
   line-height: 37px;
}

footer nav a {
   position: relative;
}

footer nav a+a:before {
   content: ' / ';
   display: inline-block;
}

footer address {
   background-color: #000;
   text-align: center;
   color: #fff;
   font-weight: bold;
   font-size: 16px;
   letter-spacing: 0.05em;
   line-height: 37px;
   text-align: center;
   padding: 3px 0;
}
@media screen and (max-width: 1600px) {

   footer nav {
      font-size: 16px;
   }
}
@media screen and (max-width: 991px) {
   footer h2 {
      font-size: 18px;
   }

   footer nav {
      font-size: 12px;
   }
}

@media screen and (max-width: 767px) {
   footer .wrap {
      display: block;
      padding-top: 50px;
      padding-bottom: 50px;
   }

   footer h2 {
      font-size: 18px;
      text-align: center;
   }

   footer nav {
      padding-top: 30px;
   }

   footer nav a {
      display: block;
      text-align: left;
      border-bottom: 1px solid #fff;
   }

   footer nav a+a:before {
      display: none;
   }

   footer address {
      font-size: 12px;
      padding: 2px 0 1px;
   }
}

/* -- -- */