@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : base.css
Description : 共通
===================================================================== */
/* =====================================================================
    共通（大枠）
======================================================================*/
html {
  min-height: 100vh;
  overflow-x: hidden;
  font-size: calc(10 / 750 * 100vw);
}

.gDef-top-banner {
  background-color: #fff;
}

.wrapper {
  font-family: YakuHanJP, "Shippori Mincho", "游明朝", "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 2.4rem;
  line-height: 1;
  color: #333333;
  background-color: #fff;
}

.wrapper img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

.wrapper a {
  color: #333333;
  display: block;
}

section,
header,
main,
footer {
  position: relative;
}

.inner {
  position: relative;
  width: calc(650 / 750 * 100%);
  margin: 0 auto;
  z-index: 2;
}

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

@media screen and (min-width: 768px) {
  html {
    font-size: calc(10 / 1400 * 100vw);
  }
  .wrapper {
    font-size: 1.8rem;
  }
  .wrapper a {
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
  }
  .inner {
    width: calc(1024 / 1400 * 100%);
    max-width: 1024px !important;
  }
  .sp {
    display: none !important;
  }
}

@media screen and (min-width: 1400px) {
  html {
    font-size: 10px;
  }
}

/* =====================================================================
    btn
======================================================================*/
.btn1 {
  display: block;
  padding: 3.2rem 0;
  font-size: 3.6rem;
  font-weight: 800;
  text-align: center;
  color: #fff !important;
  background: #333333;
  border: 1px solid #fff;
}

@media screen and (min-width: 768px) {
  .btn1 {
    position: relative;
    padding: 1.6rem 0;
    font-size: 2rem;
    -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
  }
  .btn1::before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/bg_rainbow.jpg) no-repeat center/cover;
    z-index: -1;
  }
  .btn1:hover {
    color: #333333 !important;
    background: transparent;
  }
}

/* =====================================================================
*    footer
* =================================================================== */
.copyright {
  position: relative;
  padding: 4.6rem 0;
  font-size: 2rem;
  line-height: 1.3;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .copyright {
    padding: 1.6rem 0;
    font-size: 1rem;
  }
}

/* =====================================================================
    Transition Layer 
======================================================================*/
.cd-transition-layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  background-color: #3f2f44;
}

.cd-transition-layer .bg-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-98%);
          transform: translateY(-50%) translateX(-98%);
  /* its dimentions will be overwritten using jQuery to proportionally fit the viewport */
  height: 100%;
  /* our sprite is composed of 25 frames */
  width: 2500%;
  background: url(../../images/common/ink.png) no-repeat 0 0;
  background-size: 100% 100%;
}

.cd-transition-layer.visible {
  opacity: 1;
  visibility: visible;
  background: transparent;
}

.cd-transition-layer.closing .bg-layer {
  -webkit-animation: cd-sequence-reverse 0.8s steps(24);
          animation: cd-sequence-reverse 0.8s steps(24);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.no-cssanimations .cd-transition-layer {
  display: none;
}

@-webkit-keyframes cd-sequence-reverse {
  0% {
    -webkit-transform: translateY(-50%) translateX(-98%);
            transform: translateY(-50%) translateX(-98%);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(-2%);
            transform: translateY(-50%) translateX(-2%);
  }
}

@keyframes cd-sequence-reverse {
  0% {
    -webkit-transform: translateY(-50%) translateX(-98%);
            transform: translateY(-50%) translateX(-98%);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(-2%);
            transform: translateY(-50%) translateX(-2%);
  }
}

/* =====================================================================
    print
======================================================================*/
@media print {
  h1 img,
  .profile img {
    display: none;
  }
}
/*# sourceMappingURL=base.css.map */