/*===================================
 ローディング
===================================*/
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background:#fff;
  text-align:center;
  color:#fff;
  /* animation-delay: 0.05s; */
}
#splash.is-active {
  display: none;
}
#splash--02 {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background:#222222;
  text-align:center;
  opacity: 0;
  animation-delay: 0.40s;
}
#splash--02.is-active {
  opacity: 1;
}
.fadeOpen{
  animation-name: fadeOpenAnime;
  animation-duration:0.4s;
  animation-fill-mode:forwards;
}
@keyframes fadeOpenAnime{
  from {
  transform: translateX(0);
  }

  to {
  transform: translateX(100%);
  }
}








/*===================================
 スライダー slide
===================================*/
.slide-conts01 {
  padding: 40px 0;
}

.loop-slide{
	width:100%;
	list-style:none;
}
.loop-slide .loop-slide__box{
  margin: 10px;
}


/*===================================
 newフェードイン用のCSS type01
===================================*/

/* 左から */
.slide-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.7s 0s ease-out;
}
/* 遅らせて表示 */
.slide-left.delay01{
  transition: all 0.7s 0.2s ease-out;
}
.slide-left.delay02{
  transition: all 0.7s 0.4s ease-out;
}
.slide-left.delay03{
  transition: all 0.7s 1.0s ease-out;
}
.slide-left.delay04{
  transition: all 0.7s 1.1s ease-out;
}
.slide-left.delay--top01{
  transition: all 0.7s 2.1s ease-out;
}
.slide-left.delay--top02{
  transition: all 0.7s 2.6s ease-out;
}

/* 右から */
.slide-right {
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.7s 0s ease-out;
}
.slide-right.upSpeed01 {
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.3s 0s linear;
}
.slide-right.upSpeed02 {
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.3s 0.1s linear;
}

/* 下から */
.slide-bottom {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.5s 0s ease-out;
}
.slide-bottom.delay01 {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.5s 0.3s ease-out;
}
.slide-bottom.upSpeed01 {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.3s 0s linear;
}
.slide-bottom.upSpeed02 {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.3s 0.1s linear;
}
.slide-bottom.upSpeed03 {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.3s 0.2s linear;
}

/* 上から */
.slide-top {
  opacity: 0;
  transform: translateY(-30px);
  transition: all 0.7s 0s ease-out;
}

/* その場から */
.fade-center {
  opacity: 0;
  transition: all 0.5s 0s ease-out;
}
.fade-center.delay01{
  transition: all 0.5s 0.5s ease-out;
}
.fade-center.delay02{
  transition: all 0.5s 0.8s ease-out;
}

/* ページ読み込んだ瞬間(transform使用) */
.load {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}
/* ページ読み込んだ瞬間(transform未使用) */
.load--movenone {
  opacity: 1;
}




/*------------------------------ white-slideIn ------------------------------*/
.white_sli {
	overflow: hidden;
  position: relative;
}
.white_sli:before {
	-webkit-transition: 0.3s;
  transition: 0.3s;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  background-color: #222222;
  -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 2;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  /* -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s; */
}
.white_sli.isShow::before {
    right: -100%;
}








/*===================================
 二重カーテン用のCSS type01 画像
===================================*/
/* 親要素に.flow-animationを追加し、<div class="photo-inner">を親要素と子要素の間に追加 */
.photo-inner{
  width: 100%;
  height: auto;
}
.photo-inner img{
  width: 100%;
  height: 100%;
}

.flow-animation, .flow-animation--load{
  position: relative;
  overflow: hidden;
}
.flow-animation::before, .flow-animation--load::before{
  content: '';
  display: block;
  position: absolute;
  top:0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  background-color: #222222;
  /* border-radius: 15px; */
  transform: translateX(-101%);
}
@keyframes showMask{
  0%{
      transform: translateX(-101%);
  }
  45%,50%{
       transform: translate(0%);
  }
  100%{
      transform: translateX(101%);
  }
}
.flow-animation.flow-show::before, .flow-animation--load.flow-show--load::before{
  animation: showMask 0.7s forwards;
}

.flow-animation .photo-inner, .flow-animation--load .photo-inner{
  opacity: 0;
}
@keyframes showElements{
  0%{
      opacity: 0;
  }
  100%{
      opacity: 1;
  }
}
.flow-animation.flow-show .photo-inner, .flow-animation--load.flow-show--load .photo-inner{
 animation: showElements .1s .25s forwards;
}








/*===================================
背景色が伸びて出現　テキスト
===================================*/
.bgextend{
  animation-name:bgextendAnimeBase;
  animation-duration:0.6s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;
  opacity:0;
}
@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}
.bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:0.4s;
  animation-delay: 0.3s;
  animation-fill-mode:forwards;
  opacity: 0;
}
@keyframes bgextendAnimeSecond{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}
.bgLRextend::before{
  animation-name:bgLRextendAnime;
  animation-duration:0.6s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ff5757;
    z-index: 2;
}
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}
.bgappearTrigger,
.bgLRextendTrigger,
.bgappearTrigger--load,
.bgLRextendTrigger--load{
    opacity: 0;
}













/*===================================
スライドイン　タイトル
===================================*/
.sldInTxt {
  line-height: 1;
  z-index: 2;
  overflow: hidden;
  position: relative;
}
/* 余白調整用CSS(毎回カスタマイズ) */
.sldInTxt--space01 {
  margin-bottom: 18px;
}
.sldInTxt--space02 {
  margin-bottom: 13px;
  padding-bottom: 10px;
  line-height: 1.19;
}
@media(max-width:480px){
  .sldInTxt--space01 {
    margin-bottom: 10px;
  }
  .sldInTxt--space02 {
    margin-bottom: 3px;
    padding-bottom: 10px;
  }
}
/* <h2>等に.sldInTxtを追加し、<span>を追加 */
.sldInTxt span {
  display: inline-block;
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  -webkit-transform: translate(0, 100%);
  transform: translate(0, 100%);
}
.sldInTxt:last-child span {
  -webkit-transition: -webkit-transform 0.3s 0.2s ease-out;
  transition: -webkit-transform 0.3s 0.2s ease-out;
  transition: transform 0.3s 0.2s ease-out;
  transition: transform 0.3s 0.2s ease-out, -webkit-transform 0.3s 0.2s ease-out;
  -webkit-transform: translate(0, 100%);
  transform: translate(0, 100%);
}

.isShow.sldInTxt span {
  transform: translate(0, 0%);
}
.isShow--load.sldInTxt span {
  transform: translate(0, 0%);
}