@charset "utf-8";

/** ***************************************************************************
 * キャプション
 * ************************************************************************* */

.caption {
	line-height: 1.6;
  font-family: 'Noto Sans JP', sans-serif;
	font-size: 0.625em;
	text-align: right;
}

/** ***************************************************************************
 * スクロールヒント
 * ************************************************************************* */

.scroll-hint {
  position: relative;
}

.scroll-hint::before,
.scroll-hint::after {
  content: '';
  width: 14px;
  height: 25px;
  box-sizing: border-box;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: scroll-hint 1.25s cubic-bezier(.645,.045,.355,1) infinite;
  position: absolute;
  z-index: 2;
  top: calc(50% - 13px);
  transition: opacity 0.8s ease-in-out 0.0s;
  opacity: 0;
}

.scroll-hint::before {
  background-image: url("../_image/_common/icon-arrow-2.png");
  left: 15px;
}

.scroll-hint::after {
  background-image: url("../_image/_common/icon-arrow-3.png");
  right: 15px;
}

@media screen and (min-width:768px) {

  .scroll-hint::before,
  .scroll-hint::after {
    width: 20px;
    height: 35px;
    top: calc(50% - 18px);
  }

  .scroll-hint::before {
    left: 15px;
  }

  .scroll-hint::after {
    right: 15px;
  }

}

@keyframes scroll-hint {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/** ***************************************************************************
 * モーダル
 * ************************************************************************* */

.mfp-bg {
  transition: opacity 0.3s ease-out;
  opacity: 0;
}

.mfp-ready.mfp-bg {
  opacity: 0.8;
}

.mfp-removing.mfp-bg {
  opacity: 0;
}

.mfp-wrap {
  -webkit-overflow-scrolling: touch;
}

.mfp-content {
  transition: all 0.2s ease-in-out; 
  transform: scale(0.8); 
  opacity: 0;
}

.mfp-ready .mfp-content {
  transform: scale(1); 
  opacity: 1;
}

.mfp-removing .mfp-content {
  transform: scale(0.8); 
  opacity: 0;
}

.mfp-container .mfp-content .mfp-close {
  font-size: 50px;
}

/** ***************************************************************************
 * 表示／非表示
 * ************************************************************************* */

@media screen and (max-width:767px) {

  [pc] {
    display: none !important;
  }

}

@media screen and (min-width:768px) {

  [sp] {
    display: none !important;
  }

}