@charset "UTF-8";
/* Scss Document */
/* Scss Document */
/*naga add*/
/* 下からフェードイン(初期値) */
.js-fadeUp, .js-fadeUpSlow {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(30px);
  /* 下に30pxの位置から */
  transition: opacity .8s, transform .8s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* 下からフェードイン(スクロールした後) */
.js-fadeUp.is-inview {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0);
  /* 30px上に移動する */
  transition-delay: 0s;
  /*開始を遅らせる */
}

.js-fadeUpSlow.is-inview {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0);
  /* 30px上に移動する */
  transition-delay: .5s;
  /* 開始を遅らせる */
}

/* 左からフェードイン(初期値) */
.js-fadeIn, .js-fadeInSlow {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateX(-100px);
  /* 左に100pxの位置から */
  transition: opacity .8s, transform .8s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* 左からフェードイン(スクロールした後) */
.js-fadeIn.is-inview {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateX(0);
  /* 100px右に移動する */
  transition-delay: 0s;
  /* 開始を遅らせる */
}

.js-fadeInSlow.is-inview {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateX(0);
  /* 100px右に移動する */
  transition-delay: .5s;
  /* 開始を遅らせる */
}

/*ぽよよん*/
.poyoyon {
  animation: poyoyon 1.5s infinite;
}

@keyframes poyoyon {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(5deg, 5deg);
  }
  10% {
    transform: skew(-4deg, -4deg);
  }
  15% {
    transform: skew(3deg, 3deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
}
/*めくる誘導*/
.arrowPulse {
  animation: arrowPulse 1.2s ease-in-out infinite;
}

@keyframes arrowPulse {
  0%, 100% {
    transform: translateX(-8px);
  }
  50% {
    transform: translateX(0);
  }
}
/*後で消す↓*/
/*sp only 指で誘導*/
.tap-hint {
  display: none;
  position: absolute;
  /*right: 10px;
  bottom: 10px;*/
  right: 30px;
  bottom: 40px;
  z-index: 100;
  animation: handSwipe 1.5s ease-in-out infinite;
}
@media screen and (max-width: 767px) {
  .tap-hint {
    display: block;
  }
}

@keyframes handSwipe {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(10px);
    opacity: 0.6;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
/*後で消す？↓*/
/*拡大して明減*/
.pulseZoom.is-inview img {
  animation: pulseZoom 1.5s ease-in-out infinite;
  transition: transform 0.3s ease;
}

@keyframes pulseZoom {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/*タップして詳細*/
.hintBounce {
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.85);
  padding: 4px 10px;
  font: 500 12px/1.2 "BIZ UDGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #000000;
  border-radius: 12px;
  animation: hintBounce 1.2s infinite;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

@keyframes hintBounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-5px);
  }
}
/*跳ねる*/
.js-bounce.is-inview {
  animation: bounce 2.5s;
  transform-origin: center bottom;
}

@keyframes bounce {
  0%,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }
  80% {
    -webkit-transform: translateZ(0) scaleY(0.95);
    transform: translateZ(0) scaleY(0.95);
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
/*ゆらゆら*/
.js-swing.is-inview {
  animation: swing 2.5s;
}

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
/* 用紙サイズの指定（A4） */
@page {
  margin: 8mm;
  size: 210mm 297mm;
  /* A4縦 */
}
@media print {
  /* 全体設定 */
  body {
    -webkit-print-color-adjust: exact;
    /* 印刷時でも背景色や背景画像を表示 */
    width: 1400px;
    /* 印刷時の全ページ幅を統一 */
    zoom: 0.8;
    /* なるべく多くのブラウザで切れないようにするため */
    /*no animation*/
  }
  body header {
    position: absolute !important;
    max-width: 1400px;
    width: 1400px !important;
  }
  body .header--flex {
    width: 1400px !important;
  }
  body .btnBox {
    display: none;
  }
  body #btn_pagetop {
    display: none;
  }
  body .js-fadeUp,
  body .js-fadeIn {
    opacity: 1;
  }
  body .js-fadeIn {
    transform: translateX(0);
  }
  body .js-fadeUp {
    transform: translateY(0);
  }
  body .js-fadeUp.is-view,
  body .js-fadeIn.is-view {
    animation-name: none;
  }
}
body {
  font-size: 62.5%;
  font-family: "BIZ UDGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  -webkit-text-size-adjust: 100%;
  animation-name: fadeIn;
  animation-duration: 1.5s;
  animation-timing-function: ease;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
body, h1, h2, h3, h4, h5, h6, p {
  font-size: 1rem;
  color: #000;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

a {
  text-decoration: none;
}
a:hover {
  color: #FF0000;
  text-decoration: underline;
}
a:link {
  color: #0000FF;
}
a:active {
  color: #0000FF;
}
a:visited {
  color: #990066;
}

img {
  vertical-align: bottom;
}

a img {
  border: none;
}

input,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  font-family: "BIZ UDGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  outline: none;
}

input:focus,
button {
  outline: 0;
}

.clear {
  display: none;
  clear: both;
}

img.centering {
  position: absolute;
}

::selection {
  background: #FFD7E9;
}

::-moz-selection {
  background: #FFD7E9;
}

.pcNone {
  display: none;
}

@media (max-width: 767px) {
  /* responsive none fore SP */
  .spNone {
    display: none;
  }
}
.header {
  width: 100%;
  height: 140px;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  z-index: 999;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (max-width: 767px) {
  .header {
    height: 80px;
  }
}
.header__inner {
  width: 100%;
  height: 100%;
  /*max-width: 1440px;*/
  margin: 0 auto;
  padding: 0;
  position: relative;
}

/*--- hamburger menu START ---*/
.btnMenu {
  display: -webkit-block;
  display: -moz-block;
  display: -ms-block;
  display: -o-block;
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-top: 40px;
  border: solid 1px #fff;
  background-image: linear-gradient(50deg, #24376f, #655aa7, #854cb9, #3890aa, #db9a69);
  position: absolute;
  right: 20px;
  z-index: 10;
}
@media screen and (min-width: 1441px) {
  .btnMenu {
    right: 40px;
  }
}
@media screen and (max-width: 767px) {
  .btnMenu {
    width: 60px;
    height: 60px;
    margin-top: 10px;
    right: 15px;
  }
}
.btnMenu .menu-trigger {
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: 0.1s linear;
  text-align: center;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.btnMenu .menu-trigger:hover {
  text-decoration: none;
}
@media (hover: hover) {
  .btnMenu .menu-trigger:hover {
    transform: rotate(360deg);
    -webkit-transition: transform 0.3s;
    transition: transform 0.3s;
  }
}
.btnMenu .menu-trigger span {
  display: -webkit-block;
  display: -moz-block;
  display: -ms-block;
  display: -o-block;
  display: block;
  width: 8px;
  height: 8px;
  background-color: white;
  border-radius: 30%;
}
@media screen and (max-width: 767px) {
  .btnMenu .menu-trigger span {
    width: 5px;
    height: 5px;
  }
}
.btnMenu .menu-trigger span:nth-of-type(1) {
  margin: 0 7px 0 0;
}
.btnMenu .menu-trigger span:nth-of-type(2) {
  margin: 0;
}
.btnMenu .menu-trigger span:nth-of-type(3) {
  margin: 0 0 0 7px;
}
.btnMenu .menu-trigger.active {
  display: block;
  padding-top: 25px;
}
@media screen and (max-width: 767px) {
  .btnMenu .menu-trigger.active {
    padding-top: 15px;
  }
}
.btnMenu .menu-trigger.active span {
  display: -webkit-block;
  display: -moz-block;
  display: -ms-block;
  display: -o-block;
  display: block;
  width: 35px;
  height: 5px;
  background-color: white;
  border-radius: 2px;
}
.btnMenu .menu-trigger.active span:nth-of-type(1) {
  margin: 0 auto 8px;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform: translateY(13px) rotate(-45deg);
  transform: translateY(13px) rotate(-45deg);
}
.btnMenu .menu-trigger.active span:nth-of-type(2) {
  margin: 0 auto;
  left: 50%;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  animation-name: active-menu-bar;
  animation-duration: 0.8s;
  animation-timing-function: forwards;
}
.btnMenu .menu-trigger.active span:nth-of-type(3) {
  margin: 8px auto 4px;
  bottom: 15px;
  -webkit-transform: translateY(-13px) rotate(45deg);
  transform: translateY(-13px) rotate(45deg);
}

/*--- hamburger menu END ---*/
.gNav {
  width: 36%;
  height: 100%;
  max-width: 400px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 140px 35px 70px 35px;
  overflow-y: hidden;
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  background-image: linear-gradient(50deg, #24376f, #655aa7, #854cb9, #3890aa, #db9a69);
  z-index: 1;
}
@media screen and (max-width: 1279px) {
  .gNav {
    width: 60%;
    max-width: 480px;
  }
}
@media screen and (max-width: 767px) {
  .gNav {
    width: 65%;
    padding: 90px 15px 45px 15px;
  }
}
@media screen and (max-width: 479px) {
  .gNav {
    width: 100%;
    max-width: 100%;
    padding: 120px 15px 45px 15px;
  }
}
.gNav__list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
@media screen and (max-width: 767px) {
  .gNav__list {
    justify-content: flex-start;
  }
}
.gNav__item {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: auto;
  height: 100%;
  padding: 0;
  position: relative;
  /*a END*/
}
.gNav__item a {
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 1rem 15px;
  padding: 0 15px 5px 15px;
  position: relative;
  transition: .5s linear;
  font: 500 18px/1.5 "BIZ UDGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #fff;
  /*矢印*/
  /*&:before{
    content: "";
    @include size(5px, 5px);
    border-top: 1.5px solid #fff;
    border-right: 1.5px solid #fff;
    @include po_ab_tl(30% , 0);
    transform: rotate(45deg);
  }*/
}
@media screen and (max-width: 479px) {
  .gNav__item a {
    margin: 1rem 5px;
    font-size: 16px;
  }
}
.gNav__item a:hover {
  text-decoration: none;
}
.gNav__item a:after {
  position: absolute;
  bottom: 5px;
  right: 15px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  content: '';
  margin: 0 auto;
  width: calc(100% - 30px);
  height: 1px;
  background: #fff;
  transition: .3s ease-in;
}
.gNav__item a:hover:after {
  width: 0;
}
.gNav__item .polygon:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: #fff;
  width: 7px;
  height: 11px;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

.gNav.open {
  display: block;
}

.footer {
  width: 100%;
  height: auto;
  margin: 60px 0 0;
  padding: 0;
}

#copyright {
  background-image: linear-gradient(3deg, #24376f, #655aa7);
  font: 500 14px/1.5 "BIZ UDGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #fff;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 23px 15px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  word-break: break-all;
}
@media screen and (max-width: 767px) {
  #copyright {
    font-size: 13px;
  }
}