@charset "utf-8";

/*メインビジュアルスクリーンフェイド PC用*/

#stage {
position:relative;
	width: 100%;
/*max-width:100%;
min-width: 1100px;*/
text-align: center;
margin: 0 auto;
background:#000;
	z-index: 1;
}
.pic {
position: relative;
}
.pic img {
max-width:100%;
opacity:0;
-moz-animation: imgTrans 40s infinite;
-webkit-animation: imgTrans 40s ease-in infinite;
animation: imgTrans 40s infinite;
}
#photo1 img {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#photo2 img {
-moz-animation-delay: 8s;
-webkit-animation-delay: 8s;
animation-delay: 8s;
}
#photo3 img {
-moz-animation-delay: 16s;
-webkit-animation-delay: 16s;
animation-delay: 16s;
}
#photo4 img{
-moz-animation-delay: 24s;
-webkit-animation-delay: 24s;
animation-delay: 24s;
}
#photo5 img {
-moz-animation-delay: 32s;
-webkit-animation-delay: 32s;
animation-delay: 32s;
}
@-webkit-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}



/*メインビジュアルスクリーンフェイド sp用*/

#stage-sp {
position: relative;
max-width:100%;
	min-width: 3px;
margin: 0 auto;
background:#000;
	z-index: 1;
}
.pic {
position: absolute;
}
.pic img {
max-width:100%;
	min-width: 300px;
text-align: center;
opacity:0;
-moz-animation: imgTrans 40s infinite;
-webkit-animation: imgTrans 40s ease-in infinite;
animation: imgTrans 40s infinite;
}
#photo1 img {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#photo2 img {
-moz-animation-delay: 8s;
-webkit-animation-delay: 8s;
animation-delay: 8s;
}
#photo3 img {
-moz-animation-delay: 16s;
-webkit-animation-delay: 16s;
animation-delay: 16s;
}
#photo4 img{
-moz-animation-delay: 24s;
-webkit-animation-delay: 24s;
animation-delay: 24s;
}
#photo5 img {
-moz-animation-delay: 32s;
-webkit-animation-delay: 32s;
animation-delay: 32s;
}
@-webkit-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}

.bg_mvimg{
	max-width: 100%; 
    height:auto;
}

/*画像エフェクト*/
#vgimage {
	z-index: 999;
}

#vgimage .list{
	margin-right: 10px;
	margin-bottom: 0px;
	list-style-type: none;
	overflow: hidden;
	z-index: 5;
}
#vgimage .list li{
	margin-right: 15px;
	margin-bottom: 10px;
	float: left;
	transition: .8s;
}

/*index 画像エフェクト*/

#vgimage .list{
	margin-right: 10px;
	margin-bottom: 5px;
	list-style-type: none;
	overflow: hidden;
}
#vgimage .list li{
	margin-right: 15px;
	margin-bottom: 10px;
	float: left;
	transition: .8s;
}

#vgimage .list-mv01{
	transform: scale(0, 0);
	-webkit-transform: scale(0, 0);
	z-index: 999;
}
#vgimage .mv01{
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
}


/*kobetu*/
/*画像エフェクト*/
#vgimagec {
	z-index: 999;
}

#vgimagec .list{
	list-style-type: none;
	overflow: hidden;
	z-index: 5;
}
#vgimagec .list li{
	float: left;
	transition: .8s;
}

/*kobetu*/
/*index 画像エフェクト*/

#vgimagec .list{
	list-style-type: none;
	overflow: hidden;
}
#vgimagec .list li{
	float: left;
	transition: .8s;
}

#vgimagec .list-mv01{
	transform: scale(0, 0);
	-webkit-transform: scale(0, 0);
	z-index: 999;
}
#vgimagec .mv01{
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
}

/*画像エフェクト　その2*/

$linear: cubic-bezier(0.250, 0.250, 0.750, 0.750);
$ease: cubic-bezier(0.250, 0.100, 0.250, 1.000);
$ease-in: cubic-bezier(0.420, 0.000, 1.000, 1.000);
$ease-out: cubic-bezier(0.000, 0.000, 0.580, 1.000);
$ease-in-out: cubic-bezier(0.420, 0.000, 0.580, 1.000);

$easeInQuad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
$easeInCubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
$easeInQuart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
$easeInQuint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
$easeInSine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
$easeInExpo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
$easeInCirc: cubic-bezier(0.600, 0.040, 0.980, 0.335);
$easeInBack: cubic-bezier(0.600, -0.280, 0.735, 0.045);

$easeOutQuad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
$easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
$easeOutQuart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
$easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
$easeOutSine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
$easeOutExpo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
$easeOutCirc: cubic-bezier(0.075, 0.820, 0.165, 1.000);
$easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275);

$easeInOutQuad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
$easeInOutQuart: cubic-bezier(0.770, 0.000, 0.275, 1.000);
$easeInOutQuint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
$easeInOutSine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
$easeInOutExpo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.150, 0.860);
$easeInOutBack: cubic-bezier(0.680, -0.550, 0.265, 1.550);

.mod-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    a {
        overflow: hidden;
        display: block;
        width: 300px;
        background-color: #000;
        img{
          transition: all 0.6s ease;
          display: block;
          width: 100%;
          opacity: 0.8;
        }
        &:hover {
          img{
            transform: scale(1.3);
            opacity: 1;
          }
        }
    }
}



.scrolltxt {
	position: absolute;
	top:480px;
	left:50%;
	z-index: 5;
}

/*矢印アニメーションPC*/

#nextpc {
	position: absolute;
	top:500px;
	left:50%;
	z-index: 5;
}

#nextpc a {
  padding-top: 70px;
}
#nextpc a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
  -webkit-animation: sdb 1.5s infinite;
  animation: sdb 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}


/*矢印アニメーションSP*/

#nextsp {
	position: absolute;
	top:200px;
	left:50%;
	z-index: 5;
}

#nextsp a {
  padding-top: 70px;
}
#nextsp a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 5%;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
  -webkit-animation: sdb 1.5s infinite;
  animation: sdb 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}