/*====================================================================================*/
/* Common
/*====================================================================================*/
/* For slide  */
.SlideMask{
	color: transparent;
	display: table;
	font-weight: bold;
	overflow: hidden;
	position: relative;
	transition: color 0ms 450ms;
}

.SlideMask::after {
	bottom: 0;
	content: '';
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transform: translate(-100%, 0%)
}

.SlideMask.is-animated {
  color: black;
}

.SlideMask.is-animated::after {
  animation: slideMaskKey 1.2s cubic-bezier(0.8, 0, 0.170, 1);
}
	
.SlideMask img{
		opacity:0;
}
.is-animated img {
	transition: opacity 0ms 450ms;
	opacity:1;
}

@keyframes slideMaskKey {
  0% {
    transform: translate(-100%, 0%)
  }
  5%, 15% {
    transform: translate(0, 0%)
  }
  100% {
    transform: translate(100%, 0%)
  }
}


.SMColorWhite::after{
	background-color:white !important;
}


/* patch あとで統合  */
.maskBgUp {
	color: transparent;
	display: table;
	font-weight: bold;
	overflow: hidden;
	position: relative;
	transition: color 0ms 450ms;
	
}
.img > .maskBgUp{
}
.img > .maskBgUp img{
	transition: opacity 0ms 450ms;
	opacity :0;
}
.img > .is-animated img {
	opacity :1;
}

.maskBgUp::after {
  background: #888888;
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(-101%, 0%);
}

.maskColorWhite::after {
	background: white !important;
}
.maskColorLGray::after {
	background: lightgray !important;
}
.maskColorDGray::after {
	background: darkgray !important;
}

.maskBgUp.is-animated {
  color: black;
}

.img > .maskBgUp.is-animated {
  opacity: 1;
}
.maskBgUp.is-animated::after {
  animation: maskBgUp 1.0s cubic-bezier(0.8, 0, 0.170, 1);
}

@keyframes maskBgUp {
  0% {
    transform: translate(-100%, 0%)
  }
  40%, 60% {
    transform: translate(0, 0%)
  }
  100% {
    transform: translate(100%, 0%)
  }
}


/*====================================================================================*/
/* スマフォ縦表示
/*====================================================================================*/
/* ipad pro? */
@media only screen and (max-width: 1024px) and (orientation:portrait){


}
/*====================================================================================*/
/* スマフォ　横表示
/*====================================================================================*/
@media only screen and (max-width: 1024px) and (orientation:landscape){
body{

}

/* Font */


}