@charset "UTF-8";



/* class
----------------------------------------------- */
.tLeft{ text-align:left;}
.grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: auto;
	grid-gap: 20px;
	padding: 0;
	margin: 0;
}
.grid.col_3{grid-template-columns: 1fr 1fr 1fr;}
.grid.col_2{grid-template-columns: 1fr 1fr;}
.grid.col_1{grid-template-columns: 1fr;}
.grid.sp_col_2{	grid-template-columns: 1fr 1fr;}

.grid .center {	display: grid;	align-items: center;}
.gridItem {}

img.full{width:100%; height: auto;}



.bgBtn{ display: inline-block; height: 3em; line-height: 3em; text-align: center; margin: 2em 0; padding: 0 2em; color: #fff !important; background: #fff; color:#000 !important;text-decoration: none !important; border-radius: 3px;transition: all 250ms cubic-bezier(.50, .0, .50, 1);}
.bgBtn:hover{ background: #999; color: #000 !important;}

ul.list{ margin-bottom: 1em; padding-left: 0.3em;}
ul.list li{ padding-left: 1.2em; margin-bottom: 0.5em;}
ul.list li:before{ content: '・'; display: inline-block; position: absolute; top: 0em; left: 0;}

ul.kome{ padding-left: 0.1em;}
ul.kome li{ padding-left: 1.2em;margin-bottom: 0.5em;}
ul.kome li:before{ content: '※' !important; display: inline-block; position: absolute; top: 0em; left: 0;}



.anim{transition: all 250ms cubic-bezier(.50, .0, .50, 1);}

.entryBoxList {
	display: -ms-grid;
	display: grid;

		  -ms-grid-columns: 1fr 1fr;
	grid-template-columns: 1fr 1fr;
	-ms-grid-rows: auto;
	grid-auto-rows: auto;
	grid-gap: 80px;
	padding: 0;
	margin: 0 0 80px 0;
	
	
}

.noEdge.uaIE11 .entryBoxList{ 
	 display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
          justify-content: space-between;
          
}

.entryBoxList a{ 	display: -ms-grid;
	display: grid;}
	
	.noEdge.uaIE11 .entryBoxList a{ display: block;width: calc((100% - 40px) / 2); margin-bottom: 40px;}
	
.entryBoxList dl{}
.entryBoxList dl dt{ position: relative;}
.entryBoxList dl dd{ padding-top: 10px; font-size: 0.8em;}

.entryBoxList dl dt .photoWrap{ position: relative; overflow: hidden;}
.entryBoxList dl dt .photoWrap:after{ }

.entryBoxList dl dt .photoWrap .play{ display: block; width: 102%; height: 102%; position: absolute; top: 0; left: 0; transition: opacity 0.5s ease;}
.entryBoxList dl dt .photoWrap .play:before{ content: ''; display: block; width: 102%; height: 102%; position: absolute; top: 0; left: 0;  opacity:0;  background:#000;  transition: opacity 0.5s ease  0.6s ;}
.entryBoxList dl dt .photoWrap .play:after{ content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0;  background: url(./img/common/icon_play.svg) center center no-repeat; background-size: 10% ;  opacity: 0;transition: opacity 0.5s ease  0.6s ; }

.entryBoxList a.is-show .photoWrap .play:before{ opacity: .5;}
.entryBoxList a.is-show .photoWrap .play:after{ opacity: .75;}
.entryBoxList a.is-show:hover .photoWrap .play{ opacity: 0;}


.entryList dl{ margin: 0;
	
	display: -ms-grid;
	display: grid;
	
	-ms-grid-rows: auto;
	grid-auto-rows: auto;
	grid-gap: 0px;
	padding: 0;
}
.entryList dl .dt,
.entryList dl .c{text-align: center;}
.entryList dl dt,
.entryList dl dd{  border-top: solid 0px #404040; vertical-align: middle;
		display: grid;
	align-content:center;
	align-items:center;
	 }

.entryList dl dd > span,
.entryList dl dd > a{padding: 35px 20px;}

.entryList dl dt:before,
.entryList dl dd:before{content: ''; display: block; width: 0%; height: 1px; position: absolute; top: 0; left: 0; background: #404040;transition: all 0.5s ease }
.entryList dl dt:before{ transition-delay: 0.2s;}
.entryList dl dd:before{ transition-delay: 0.5s;}

.entryList dl:last-child dt:after,
.entryList dl:last-child dd:after{content: ''; display: block; width: 0%; height: 1px; position: absolute; bottom: 0; left: 0; background: #404040;transition: all 0.5s ease }

.entryList dl dt:after{ transition-delay: 0.5s !important;}
.entryList dl dd:after{ transition-delay: 0.8s !important;}

.entryList dl.is-show dt:before,
.entryList dl.is-show dd:before,
.entryList dl.is-show dt:after,
.entryList dl.is-show dd:after{ width: 100%;}

.entryList dl dd a:after{ content: ''; display: block; width: 10px; height: 10px; position: absolute; top: 50%; right: 20px; transform: translate(0,-50%) rotate(45deg); border: solid 1px #404040; border-left: 0; border-bottom: 0;}


img.wFull{ width: 100%; height: auto;}

.btnArea.areaFoot{}
.btnArea.posR{
	display: flex;
	justify-content:flex-end;
}
.btnItem{}
.btnItem.more{ width: 200px;}

.btnItem a{ display: block; padding: 15px; line-height: 1.5; text-align: center; border: solid 1px;}
.btnItem a span{ display: inline-block; }

.btnItem a.arrowR span{ padding-right: 20px;}
.btnItem a.arrowR span:after{ content: ''; display: block; width: 6px; height: 6px; position: absolute; top: 50%; right: 0; transform: translate(0,-50%) rotate(45deg); border: solid 1px; border-left: 0; border-bottom: 0;}


.btnItem.stanby{}
.btnItem.stanby a{width: 0; transform-origin: left center; transition: all 0.5s ease; white-space: nowrap; overflow: hidden;}
.btnItem.stanby a:after{content: ''; display: none; width: 100%; height: 100%;background: #808080 ;  position: absolute; top: 0; right: 0;transform: translate(0,0); transition: all 0.5s ease 0.6s;}

.btnItem.stanby.is-show a{ width: 100%;}
.btnItem.stanby.is-show a:after{width: 0%; }






.btnWrap{ position: relative;}
.btnWrap.more{ width: 200px;}

.btnWrap .wrap {position: absolute; top: 0; left: 0;  width: 0%; overflow: hidden;transform-origin: left center;
    transition: all 0.5s ease 0.5s;}
.btnWrap.stanby.is-show .wrap{ width: 100%;}

.btnWrap .wrap a{position: absolute; top: 0; left: 0; }

.btnWrap a{ display: block; padding: 15px; line-height: 1.5; text-align: center; border: solid 1px;}
.btnWrap a span{ display: inline-block; }

.btnWrap > a{ visibility: hidden;}

.btnWrap a.arrowR span{ padding-right: 20px;}
.btnWrap a.arrowR span:after{ content: ''; display: block; width: 6px; height: 6px; position: absolute; top: 50%; right: 0; transform: translate(0,-50%) rotate(45deg); border: solid 1px; border-left: 0; border-bottom: 0;}


.btnWrap.stanby{}
.btnWrap.stanby a{width: 100%; transform-origin: left center; transition: all 0.5s ease; white-space: nowrap; overflow: hidden;}







.labelLine{ display:table;position: relative; z-index: 2;}
.labelLine img{ width: auto; position:relative; top: 0; left: 0; visibility: hidden; vertical-align: bottom;}
.labelLine > .data{ visibility: hidden;}
.labelLine .textImage .data{ position: absolute; top: 0; left: 0; z-index: 2;}


.showEffect .labelLine{  width:auto; position: relative; overflow: hidden; margin: 0; margin-bottom: 5px;}
.showEffect .labelLine img{height: 100px;}


.showEffect .textImage{ position: absolute; top: 0; left: 0; z-index: 2;width: 0%; height: 100%;background-repeat: no-repeat; background-size: auto 100%; background-position: left top;  
	 transition: all 0.5s ease; 
	 
	 overflow: hidden}

.showEffect .labelLine.transparent  .textImage{ background-color: transparent;}


.showEffect .textImage:after{ content: ''; display: block; position: absolute; top: 0; right: 0;z-index: 5; width: 100%; height: 100%; background-color: #000; transition: all 0.5s ease 0.6s; }


.showEffect .textImage hr{display: block; position: absolute; top: 0; right: 0;z-index: 5; width: 100%; height: 100%; background-color: #c30; transition: all 0.5s ease 0.6s; }



.showEffect.is-show .labelLine{ }
.showEffect.is-show .textImage{ width: 100%;}
.showEffect.is-show .textImage:after,
.showEffect.is-show .textImage hr{ width: 0%; right: -1px;}



.inWrap{ transform: translate(-110%,0);transition: all 0.5s ease; position: relative;}
.inWrap:before{ content: ''; display: block; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: #111; z-index: 5; transition: all 0.5s ease 0.6s; }



	.showEffect.is-show .inWrap{ transform: translate(0%,0);}
	.showEffect.is-show .inWrap:before{ width: 0%;}


#wave-canvas {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  left: 0;
  z-index: 100;
  pointer-events: none; }

.wave-image{ }
.wave-plane img {
  display: block;  visibility: hidden;}

.wave-blank {
  position: fixed;
  width: 0px;
  height: 100%;
  top: 0;
  left: 0; }


.wave-spacer{ display: none}




.noisePhoto{ overflow: hidden;}
.noisePhoto  img{visibility: hidden; position: relative; z-index: 1;transform: translate3d(0,0,0);will-change: animation, transform;}

.noisePhoto .effectAnim{ display: block; position: absolute; top: 0; left: 0; z-index: 5; width: 100%; height: 100%; background-size: 100% 100%; background-position: center center; transform: translate3d(0,0,0); will-change: animation, transform;}

.noisePhoto .effectAnim span{ display: block; opacity: 0;  position: absolute; top: 0; left: 0; z-index: 5; width: 100%; height: 100%; background-size: 100% 100%; background-position: center center;}
.noisePhoto .effectAnim span:nth-of-type(1) {background-image:url(./img/common/noise_s/noise_01.png) ; }
.noisePhoto .effectAnim span:nth-of-type(2) {background-image:url(./img/common/noise_s/noise_02.png); }
.noisePhoto .effectAnim span:nth-of-type(3) {background-image:url(./img/common/noise_s/noise_03.png); }
.noisePhoto .effectAnim span:nth-of-type(4) {background-image:url(./img/common/noise_s/noise_04.png); }
.noisePhoto .effectAnim span:nth-of-type(5) {background-image:url(./img/common/noise_s/noise_05.png); }
.noisePhoto .effectAnim span:nth-of-type(6) {background-image:url(./img/common/noise_s/noise_06.png); }
.noisePhoto .effectAnim span:nth-of-type(7) {background-image:url(./img/common/noise_s/noise_07.png); }
.noisePhoto .effectAnim span:nth-of-type(8) {background-image:url(./img/common/noise_s/noise_08.png); }
.noisePhoto .effectAnim span:nth-of-type(9) {background-image:url(./img/common/noise_s/noise_09.png); }
.noisePhoto .effectAnim span:nth-of-type(10) {background-image:url(./img/common/noise_s/noise_10.png); }
.noisePhoto .effectAnim span:nth-of-type(11) {background-image:url(./img/common/noise_s/noise_11.png); }
.noisePhoto .effectAnim span:nth-of-type(12) {background-image:url(./img/common/noise_s/noise_12.png); }
.noisePhoto .effectAnim span:nth-of-type(13) {background-image:url(./img/common/noise_s/noise_13.png); }
.noisePhoto .effectAnim span:nth-of-type(14) {background-image:url(./img/common/noise_s/noise_14.png); }
.noisePhoto .effectAnim span:nth-of-type(15) {background-image:url(./img/common/noise_s/noise_15.png);  }

.noisePhoto.is-show .effectAnim2 {	animation: imagenoise-anim 0.7s forwards 0.5s;}
	.noisePhoto.is-show .effectAnim span{animation: imagenoise-anim-span 0.03s  linear forwards}
	.noisePhoto.is-show .effectAnim span:nth-of-type(1) {animation-delay: 0.50s !important; }
	.noisePhoto.is-show .effectAnim span:nth-of-type(2) {animation-delay: 0.53s !important; }
	.noisePhoto.is-show .effectAnim span:nth-of-type(3) {animation-delay: 0.56s !important; }
	.noisePhoto.is-show .effectAnim span:nth-of-type(4) {animation-delay: 0.59s !important; }
	.noisePhoto.is-show .effectAnim span:nth-of-type(5) {animation-delay: 0.62s !important; }
	.noisePhoto.is-show .effectAnim span:nth-of-type(6) {animation-delay: 0.65s !important; }
	.noisePhoto.is-show .effectAnim span:nth-of-type(7) {animation-delay: 0.68s !important; }
	.noisePhoto.is-show .effectAnim span:nth-of-type(8) {animation-delay: 0.71s !important; }
	.noisePhoto.is-show .effectAnim span:nth-of-type(9) {animation-delay: 0.74s !important; }
	.noisePhoto.is-show .effectAnim span:nth-of-type(10) {animation-delay: 0.77s !important; }
	.noisePhoto.is-show .effectAnim span:nth-of-type(11) {animation-delay: 0.80s !important; }
	.noisePhoto.is-show .effectAnim span:nth-of-type(12) {animation-delay: 0.83s !important; }
	.noisePhoto.is-show .effectAnim span:nth-of-type(13) {animation-delay: 0.86s !important; }
	.noisePhoto.is-show .effectAnim span:nth-of-type(14) {animation-delay: 0.89s !important; }
	.noisePhoto.is-show .effectAnim span:nth-of-type(15) {animation-delay: 0.92s !important; }


.noisePhoto.is-show img {animation: imagenoise-bg-anim 0.55s  forwards 0.5s;}


.touchDevice .noisePhoto.is-show .effectAnim{animation: imagenoise-anim 1.4s steps(15) forwards 0.5s;}
.touchDevice ..noisePhoto.is-show img{animation: imagenoise-bg-anim 1.4s  forwards 0.5s;}

.preload{ position: fixed; width: 1px; height: 1px; bottom: 0; left: 0; overflow: hidden;}

/* media
----------------------------------------------- */
.onlyPC{ display:inline-block !important;}
.onlySP{ display:none !important;}
		
@media screen and (max-width: 1000px) {	

}


@media screen and (max-width: 750px) {	
	
	.onlyPC{ display:none !important;}
	.onlySP{ display:inline-block !important;}
	
	
	.btnItem.more,
	.btnWrap.more{ width: auto;}

.btnItem a,
.btnWrap a{ padding: 1em 2em; width: auto !important;}

.btnItem a.arrowR span,
.btnWrap a.arrowR span{padding-right: 1.2em; line-height: 1;}
.btnItem a.arrowR span:after,
.btnWrap a.arrowR span:after{
	    width: 0.5em;
    height: 0.5em;
}

#globalFooter .menu {} 
#globalFooter .menu li{ display: block !important;  text-align: center; width: auto;}
#globalFooter .menu li:after{ display: none !important;}


}






.textEffect {
  position: relative;
  display: block;
  opacity: 0;
  transition: opacity 0.01s ease-in-out 0.2s;
}



.is-show .textEffect,
.textEffect.is-show{ opacity: 1}

.textEffect span{ opacity: 0;transition: opacity 0.5s ease-in-out 0.5s;}
.is-show .textEffect span,
.textEffect.is-show span{ opacity: 1;}

@keyframes noise-anim {
  0% {
    clip: rect(77px, 9999px, 6px, 0);transform: translate3d(5px,5px,0px);
  }
  5% {
    clip: rect(65px, 9999px, 70px, 0);transform: translate3d(-5px,0px,0px);
  }
  10% {
    clip: rect(82px, 9999px, 82px, 0);transform: translate3d(5px,5px,0px);
  }
  15% {
    clip: rect(32px, 9999px, 35px, 0);transform: translate3d(-5px,0px,0px);
  }
  20% {
    clip: rect(31px, 9999px, 49px, 0);transform: translate3d(5px,5px,0px);
  }
  25% {
    clip: rect(18px, 9999px, 46px, 0);transform: translate3d(-5px,5px,0px);
  }
  30% {
    clip: rect(94px, 9999px, 64px, 0);transform: translate3d(5px,0px,0px);
  }
  35% {
    clip: rect(69px, 9999px, 31px, 0);transform: translate3d(-5px,0px,0px);
  }
  40% {
    clip: rect(6px, 9999px, 72px, 0);transform: translate3d(5px,0px,0px);
  }
  45% {
    clip: rect(25px, 9999px, 35px, 0);transform: translate3d(-5px,0px,0px);
  }
  50% {
    clip: rect(82px, 9999px, 26px, 0);transform: translate3d(5px,0px,0px);
  }
  55% {
    clip: rect(7px, 9999px, 92px, 0);transform: translate3d(-5px,0px,0px);
  }
  60% {
    clip: rect(54px, 9999px, 30px, 0);transform: translate3d(5px,0px,0px);
  }
  65% {
    clip: rect(86px, 9999px, 90px, 0);transform: translate3d(-5px,0px,0px);
  }
  70% {
    clip: rect(38px, 9999px, 65px, 0);transform: translate3d(5px,0px,0px);
  }
  75% {
    clip: rect(41px, 9999px, 66px, 0);transform: translate3d(-5px,0px,0px);
  }
  80% {
    clip: rect(31px, 9999px, 37px, 0);transform: translate3d(5px,0px,0px);
  }
  85% {
    clip: rect(8px, 9999px, 12px, 0);transform: translate3d(-5px,0px,0px);
  }
  90% {
    clip: rect(50px, 9999px, 69px, 0);transform: translate3d(5px,0px,0px);
  }
  95% {
    clip: rect(7px, 9999px, 42px, 0);transform: translate3d(-5px,0px,0px);
  }
  100% {
    clip: rect(14px, 9999px, 57px, 0);transform: translate3d(5px,0px,0px);
  }
}
.textEffect:after {
  content: attr(data-text);
  display: block;
  position: absolute;
  z-index: 4;
  left: 2px;
  text-shadow: -5px 0 red;
  top: 0;
  color: white;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  will-change: animation, transform;
}

.is-show .textEffect:after,
.textEffect.is-show:after {animation: noise-anim 0.75s linear alternate-reverse 0.3s;}

@keyframes noise-anim-2 {
  0% {
    clip: rect(18px, 9999px, 13px, 0);transform: translate3d(-5px,-5px,0px);
  }
  5% {
    clip: rect(74px, 9999px, 51px, 0);transform: translate3d(5px,-5px,0px);
  }
  10% {
    clip: rect(33px, 9999px, 65px, 0);transform: translate3d(-5px,-5px,0px);
  }
  15% {
    clip: rect(64px, 9999px, 66px, 0);transform: translate3d(5px,-5px,0px);
  }
  20% {
    clip: rect(75px, 9999px, 6px, 0);transform: translate3d(-5px,-5px,0px);
  }
  25% {
    clip: rect(40px, 9999px, 49px, 0);transform: translate3d(5px,-5px,0px);
  }
  30% {
    clip: rect(71px, 9999px, 1px, 0);transform: translate3d(-5px,0px,0px);
  }
  35% {
    clip: rect(42px, 9999px, 73px, 0);transform: translate3d(5px,0px,0px);
  }
  40% {
    clip: rect(92px, 9999px, 57px, 0);transform: translate3d(-5px,0px,0px);
  }
  45% {
    clip: rect(4px, 9999px, 33px, 0);transform: translate3d(5px,0px,0px);
  }
  50% {
    clip: rect(4px, 9999px, 34px, 0);transform: translate3d(-5px,0px,0px);
  }
  55% {
    clip: rect(49px, 9999px, 25px, 0);transform: translate3d(5px,0px,0px);
  }
  60% {
    clip: rect(24px, 9999px, 44px, 0);transform: translate3d(-5px,0px,0px);
  }
  65% {
    clip: rect(31px, 9999px, 99px, 0);transform: translate3d(5px,0px,0px);
  }
  70% {
    clip: rect(54px, 9999px, 83px, 0);transform: translate3d(-5px,0px,0px);
  }
  75% {
    clip: rect(57px, 9999px, 97px, 0);transform: translate3d(5px,0px,0px);
  }
  80% {
    clip: rect(3px, 9999px, 15px, 0);transform: translate3d(-5px,0px,0px);
  }
  85% {
    clip: rect(84px, 9999px, 34px, 0);transform: translate3d(5px,0px,0px);
  }
  90% {
    clip: rect(100px, 9999px, 88px, 0);transform: translate3d(-5px,0px,0px);
  }
  95% {
    clip: rect(91px, 9999px, 59px, 0);transform: translate3d(5px,0px,0px);
  }
  100% {
    clip: rect(10px, 9999px, 87px, 0);transform: translate3d(-5px,0px,0px);
  }
}
.textEffect:before {
  content: attr(data-text);
   display: block;
  position: absolute;
   z-index: 3;
  left: -2px;
  text-shadow: 1px 0 blue;
  top: 0;
  color: white;
  background: black;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
 will-change: animation, transform;
}

.is-show .textEffect:before,
.textEffect.is-show:before{
	 animation: noise-anim-2 0.75s  linear alternate-reverse 0.3s;
}








@keyframes imagenoise-anim-span {
  0% {opacity: 0;}
  50% {opacity: 1; }
  100% {opacity: 0; }
}
@keyframes imagenoise-anim {
  0% { background-image:none; }
  1% { background-image:url(./img/common/noise_s/noise_01.png); }
  5% { background-image:url(./img/common/noise_s/noise_02.png); }
  10% { background-image:url(./img/common/noise_s/noise_03.png); }
  15% { background-image:url(./img/common/noise_s/noise_04.png); }
  20% { background-image:url(./img/common/noise_s/noise_05.png); }
  25% { background-image:url(./img/common/noise_s/noise_06.png); }
  30% { background-image:url(./img/common/noise_s/noise_07.png); }
  35% { background-image:url(./img/common/noise_s/noise_08.png); }
  40% { background-image:url(./img/common/noise_s/noise_09.png); }
  45% { background-image:url(./img/common/noise_s/noise_10.png); }
  50% { background-image:url(./img/common/noise_s/noise_11.png); }
  55% { background-image:url(./img/common/noise_s/noise_12.png); }
  60% { background-image:url(./img/common/noise_s/noise_13.png); }
  65% { background-image:url(./img/common/noise_s/noise_14.png); }
  70% { background-image:url(./img/common/noise_s/noise_15.png); }
  80% {background-image:none;}
  100% {background-image:none; }
}

@keyframes imagenoise-bg-anim {
  0% {}
  5% {}
  10% { }
  15% { }
  20% { }
  25% {}
  30% { }
  35% { }
  	39.9% { visibility: hidden;}
  40% { visibility: visible; transform: translate3d(0,0,0) scale(1); }
  50% {}
  55% {}
  60% {}
  65% { transform: translate3d(0,0,0)  scale(1.8);}
  	65.001% {  transform: translate3d(0,0,0)  scale(1);}
  70% { }
  75% {}
  100% { visibility: visible;  transform: translate3d(0,0,0)  scale(1);}
}