/* CSS Document */

@charset "utf-8";

ul#fadein{
	margin: 0 auto;
	padding: 50px 0px;
	background:cream;

}
ul#fadein li{
	margin: 0 0 100px;
	list-style: none;
}

ul#fadein img{
	max-width: 640px !important;
	height: auto;
	box-shadow: 0px 2px 6px 0px gray;
}

@media screen and (max-width: 800px)
{
	ul#fadein{
		display: block;
		text-align:center;
	}

	ul#fadein img{
		width:640px;
	}
}

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

	ul#fadein {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width:95vw;
	}

	ul#fadein img{
		width: 45vw;
	}
}

@media screen and (min-width: 1201px)
{
	ul#fadein img{
		width: 30vw;
	}
}

/* ------------------------------ */

ul#fadein2{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 1000px;
	margin: 0 auto;
	padding: 50px 0px;
}
ul#fadein2 li{
/*	width: 48%; */
	margin: 0 0 100px;
	list-style: none;
}
ul#fadein2 img{
	width: 100%;
	height: auto;
	box-shadow: 0px 2px 6px 0px gray;
}


/*アニメーション要素のスタイル*/
.animation00{
	opacity : 0;
	visibility: hidden;
	transition: 3s;
}
/*アニメーション要素までスクロールした時のスタイル*/
.animation00_active{
	opacity: 1;
	visibility: visible;
}

.animation01{
	opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(30px);
}
.animation01_active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.animation02{
	background-image:linear-gradient(70deg, hsla(256,80%,60%,0.5) 0%, hsla(256,80%, 60%,0) 50%, hsla(256,80%,60%,0.5) 100% );
	transform: translateY(30px);
}

.animation02_active{
	background-image:linear-gradient(110deg, hsla(256,80%,60%,0.5) 0%, hsla(256,80%, 60%,0) 50%, hsla(256,80%,60%,0.5) 100% );
	transform: translateY(0px);
	animation: anime02 1s linear ;
}

@keyframes anime02 {
  0% { background-image:linear-gradient(70deg, hsla(256,80%,60%,0.5) 0%, hsla(256,80%,60%,0) 50%, hsla(256,80%,60%,0.5) 100% ); }
  12.5% { background-image:linear-gradient(75deg, hsla(256,80%,60%,0.5) 0%, hsla(256,80%,60%,0) 50%, hsla(256,80%,60%,0.5) 100% ); }
  25% { background-image:linear-gradient(80deg, hsla(256,80%,60%,0.5) 0%, hsla(256,80%,60%,0) 50%, hsla(256,80%,60%,0.5) 100% ); }
  37.5% { background-image:linear-gradient(85deg, hsla(256,80%,60%,0.5) 0%, hsla(256,80%,60%,0) 50%, hsla(256,80%,60%,0.5) 100% ); }
  50% { background-image:linear-gradient(90deg, hsla(256,80%,60%,0.5) 0%, hsla(256,80%,60%,0) 50%, hsla(256,80%,60%,0.5) 100% ); }
  62.5% { background-image:linear-gradient(95deg, hsla(256,80%,60%,0.5) 0%, hsla(256,80%,60%,0) 50%, hsla(256,80%,60%,0.5) 100% ); }
  75% { background-image:linear-gradient(100deg, hsla(256,80%,60%,0.5) 0%, hsla(256,80%,60%,0) 50%, hsla(256,80%,60%,0.5) 100% ); }
  87.5% { background-image:linear-gradient(105deg, hsla(256,80%,60%,0.5) 0%, hsla(256,80%,60%,0) 50%, hsla(256,80%,60%,0.5) 100% ); }
  100% { background-image:linear-gradient(110deg, hsla(256,80%,60%,0.5) 0%, hsla(256,80%,60%,0) 50%, hsla(256,80%,60%,0.5) 100% ); }
}

.animation03{
	background-image:linear-gradient(70deg, hsla(137,100%,70%,0.5) 0%, hsla(137,100%,70%,0) 50%, hsla(137,100%,70%,0.5) 100% );
	transform: translateY(30px);
}

.animation03_active{
	background-image:linear-gradient(110deg, hsla(137,100%,70%,0.5) 0%, hsla(137,100%,70%,0) 50%, hsla(137,100%,70%,0.5) 100% );
	transform: translateY(0px);
	animation: anime03 1s linear ;
}

@keyframes anime03 {
  0% { background-image:linear-gradient(70deg, hsla(137,100%,70%,0.5) 0%, hsla(137,100%,70%,0) 50%, hsla(137,100%,70%,0.5) 100% ); }
  12.5% { background-image:linear-gradient(75deg, hsla(137,100%,70%,0.5) 0%, hsla(137,100%,70%,0) 50%, hsla(137,100%,70%,0.5) 100% ); }
  25% { background-image:linear-gradient(80deg, hsla(137,100%,70%,0.5) 0%, hsla(137,100%,70%,0) 50%, hsla(137,100%,70%,0.5) 100% ); }
  37.5% { background-image:linear-gradient(85deg, hsla(137,100%,70%,0.5) 0%, hsla(137,100%,70%,0) 50%, hsla(137,100%,70%,0.5) 100% ); }
  50% { background-image:linear-gradient(90deg, hsla(137,100%,70%,0.5) 0%, hsla(137,100%,70%,0) 50%, hsla(137,100%,70%,0.5) 100% ); }
  62.5% { background-image:linear-gradient(95deg, hsla(137,100%,70%,0.5) 0%, hsla(137,100%,70%,0) 50%, hsla(137,100%,70%,0.5) 100% ); }
  75% { background-image:linear-gradient(100deg, hsla(137,100%,70%,0.5) 0%, hsla(137,100%,70%,0) 50%, hsla(137,100%,70%,0.5) 100% ); }
  87.5% { background-image:linear-gradient(105deg, hsla(137,100%,70%,0.5) 0%, hsla(137,100%,70%,0) 50%, hsla(137,100%,70%,0.5) 100% ); }
  100% { background-image:linear-gradient(110deg, hsla(137,100%,70%,0.5) 0%, hsla(137,100%,70%,0) 50%, hsla(137,100%,70%,0.5) 100% ); }
}

.animation04{
	background-image:linear-gradient(70deg, hsla(197,88%,80%,0.5) 0%, hsla(197,88%,80%,0) 50%, hsla(197,88%,80%,0.5) 100% );
	transform: translateY(30px);
}

.animation04_active{
	background-image:linear-gradient(110deg, hsla(197,88%,80%,0.5) 0%, hsla(197,88%,80%,0) 50%, hsla(197,88%,80%,0.5) 100% );
	transform: translateY(0px);
	animation: anime04 1s linear ;
}

@keyframes anime04 {
  0% { background-image:linear-gradient(70deg, hsla(197,88%,80%,0.5) 0%, hsla(197,88%,80%,0) 50%, hsla(197,88%,80%,0.5) 100% ); }
  12.5% { background-image:linear-gradient(75deg, hsla(197,88%,80%,0.5) 0%, hsla(197,88%,80%,0) 50%, hsla(197,88%,80%,0.5) 100% ); }
  25% { background-image:linear-gradient(80deg, hsla(197,88%,80%,0.5) 0%, hsla(197,88%,80%,0) 50%, hsla(197,88%,80%,0.5) 100% ); }
  37.5% { background-image:linear-gradient(85deg, hsla(197,88%,80%,0.5) 0%, hsla(197,88%,80%,0) 50%, hsla(197,88%,80%,0.5) 100% ); }
  50% { background-image:linear-gradient(90deg, hsla(197,88%,80%,0.5) 0%, hsla(197,88%,80%,0) 50%, hsla(197,88%,80%,0.5) 100% ); }
  62.5% { background-image:linear-gradient(95deg, hsla(197,88%,80%,0.5) 0%, hsla(197,88%,80%,0) 50%, hsla(197,88%,80%,0.5) 100% ); }
  75% { background-image:linear-gradient(100deg, hsla(197,88%,80%,0.5) 0%, hsla(197,88%,80%,0) 50%, hsla(197,88%,80%,0.5) 100% ); }
  87.5% { background-image:linear-gradient(105deg, hsla(197,88%,80%,0.5) 0%, hsla(197,88%,80%,0) 50%, hsla(197,88%,80%,0.5) 100% ); }
  100% { background-image:linear-gradient(110deg, hsla(197,88%,80%,0.5) 0%, hsla(197,88%,80%,0) 50%, hsla(197,88%,80%,0.5) 100% ); }
}

/* ロゴアニメ */
.logo_anime_in{
	width:600px;
	height:220px;
	background-image: url(/newimg/yamaguchi_logo_animation.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:auto 100%;
	border:1px solid hsla(360,100%,100%,1);
}

.logo_anime{
	width:600px;
	height:220px;
	display:block;
	margin:0 auto;
}

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

	.logo_anime_in{
		width:600px;
		height:220px;
	}

	.logo_anime{
		width:600px;
		height:220px;

	}

}

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

	.logo_anime_in{
		width:450px;
		height:165px;
	}

	.logo_anime{
		width:450px;
		height:165px;
	}
	
}

.logo_anime_active{
	animation: logoanime 1.5s linear forwards;
}

@media screen and (min-width: 651px)
{
	@keyframes logoanime {
	  0%  { background-image:radial-gradient(ellipse 300px 110px, hsla(197, 88%, 90%,1) 0%, hsla(197, 88%, 90%,0) 0% ); }
	  5%  { background-image:radial-gradient(ellipse 300px 110px, hsla(197, 88%, 90%,1) 0%, hsla(197, 88%, 90%,0) 10% ); }
	  10% { background-image:radial-gradient(ellipse 300px 110px, hsla(197, 88%, 90%,1) 0%, hsla(197, 88%, 90%,0) 20% ); }
	  15% { background-image:radial-gradient(ellipse 300px 110px, hsla(197, 88%, 90%,1) 0%, hsla(197, 88%, 90%,0) 30% ); }
	  20% { background-image:radial-gradient(ellipse 300px 110px, hsla(197, 88%, 90%,1) 0%, hsla(197, 88%, 90%,0) 40% ); }
	  25% { background-image:radial-gradient(ellipse 300px 110px, hsla(197, 88%, 90%,1) 0%, hsla(197, 88%, 90%,0) 50% ); }
	  30% { background-image:radial-gradient(ellipse 300px 110px, hsla(197, 88%, 90%,1) 0%, hsla(197, 88%, 90%,0) 60% ); }
	  35% { background-image:radial-gradient(ellipse 300px 110px, hsla(197, 88%, 90%,1) 0%, hsla(197, 88%, 90%,0) 70% ); }
	  40% { background-image:radial-gradient(ellipse 300px 110px, hsla(197, 88%, 90%,1) 0%, hsla(197, 88%, 90%,0) 80% ); }
	  45% { background-image:radial-gradient(ellipse 300px 110px, hsla(197, 88%, 90%,1) 0%, hsla(197, 88%, 90%,0) 90% ); }
	  50% { background-image:radial-gradient(ellipse 300px 110px, hsla(197, 88%, 90%,1) 0%, hsla(197, 88%, 90%,0) 98% ); }
	  55% { background-image:radial-gradient(ellipse 300px 110px, hsla(197, 88%, 90%,1) 10%, hsla(197, 88%, 90%,0) 98% ); }
	  60% { background-image:radial-gradient(ellipse 300px 110px, hsla(197, 88%, 90%,1) 20%, hsla(197, 88%, 90%,0) 98% ); }
	  65% { background-image:radial-gradient(ellipse 300px 110px, hsla(197, 88%, 90%,1) 30%, hsla(197, 88%, 90%,0) 98% ); }
	  70% { background-image:radial-gradient(ellipse 300px 110px, hsla(197, 88%, 90%,1) 40%, hsla(197, 88%, 90%,0) 98% ); }
	  75% { background-image:radial-gradient(ellipse 300px 110px, hsla(197, 88%, 90%,1) 50%, hsla(197, 88%, 90%,0) 98% ); }
	  80% { background-image:radial-gradient(ellipse 300px 110px, hsla(197, 88%, 90%,1) 60%, hsla(197, 88%, 90%,0) 98% ); }
	  85% { background-image:radial-gradient(ellipse 300px 110px, hsla(197, 88%, 90%,1) 70%, hsla(197, 88%, 90%,0) 98% ); }
	  90% { background-image:radial-gradient(ellipse 300px 110px, hsla(197, 88%, 90%,1) 80%, hsla(197, 88%, 90%,0) 98% ); }
	  95% { background-image:radial-gradient(ellipse 300px 110px, hsla(197, 88%, 90%,1) 90%, hsla(197, 88%, 90%,0) 98% ); }
	  100%{ background-image:radial-gradient(ellipse 300px 110px, hsla(197, 88%, 90%,1) 98%, hsla(197, 88%, 90%,0) 98% ); }
	}
}

@media screen and (max-width: 650px)
{
	@keyframes logoanime {
	  0%  { background-image:radial-gradient(ellipse 225px 82px, hsla(197, 88%, 90%,1) 0%, hsla(197, 88%, 90%,0) 0% ); }
	  5%  { background-image:radial-gradient(ellipse 225px 82px, hsla(197, 88%, 90%,1) 0%, hsla(197, 88%, 90%,0) 10% ); }
	  10% { background-image:radial-gradient(ellipse 225px 82px, hsla(197, 88%, 90%,1) 0%, hsla(197, 88%, 90%,0) 20% ); }
	  15% { background-image:radial-gradient(ellipse 225px 82px, hsla(197, 88%, 90%,1) 0%, hsla(197, 88%, 90%,0) 30% ); }
	  20% { background-image:radial-gradient(ellipse 225px 82px, hsla(197, 88%, 90%,1) 0%, hsla(197, 88%, 90%,0) 40% ); }
	  25% { background-image:radial-gradient(ellipse 225px 82px, hsla(197, 88%, 90%,1) 0%, hsla(197, 88%, 90%,0) 50% ); }
	  30% { background-image:radial-gradient(ellipse 225px 82px, hsla(197, 88%, 90%,1) 0%, hsla(197, 88%, 90%,0) 60% ); }
	  35% { background-image:radial-gradient(ellipse 225px 82px, hsla(197, 88%, 90%,1) 0%, hsla(197, 88%, 90%,0) 70% ); }
	  40% { background-image:radial-gradient(ellipse 225px 82px, hsla(197, 88%, 90%,1) 0%, hsla(197, 88%, 90%,0) 80% ); }
	  45% { background-image:radial-gradient(ellipse 225px 82px, hsla(197, 88%, 90%,1) 0%, hsla(197, 88%, 90%,0) 90% ); }
	  50% { background-image:radial-gradient(ellipse 225px 82px, hsla(197, 88%, 90%,1) 0%, hsla(197, 88%, 90%,0) 98% ); }
	  55% { background-image:radial-gradient(ellipse 225px 82px, hsla(197, 88%, 90%,1) 10%, hsla(197, 88%, 90%,0) 98% ); }
	  60% { background-image:radial-gradient(ellipse 225px 82px, hsla(197, 88%, 90%,1) 20%, hsla(197, 88%, 90%,0) 98% ); }
	  65% { background-image:radial-gradient(ellipse 225px 82px, hsla(197, 88%, 90%,1) 30%, hsla(197, 88%, 90%,0) 98% ); }
	  70% { background-image:radial-gradient(ellipse 225px 82px, hsla(197, 88%, 90%,1) 40%, hsla(197, 88%, 90%,0) 98% ); }
	  75% { background-image:radial-gradient(ellipse 225px 82px, hsla(197, 88%, 90%,1) 50%, hsla(197, 88%, 90%,0) 98% ); }
	  80% { background-image:radial-gradient(ellipse 225px 82px, hsla(197, 88%, 90%,1) 60%, hsla(197, 88%, 90%,0) 98% ); }
	  85% { background-image:radial-gradient(ellipse 225px 82px, hsla(197, 88%, 90%,1) 70%, hsla(197, 88%, 90%,0) 98% ); }
	  90% { background-image:radial-gradient(ellipse 225px 82px, hsla(197, 88%, 90%,1) 80%, hsla(197, 88%, 90%,0) 98% ); }
	  95% { background-image:radial-gradient(ellipse 225px 82px, hsla(197, 88%, 90%,1) 90%, hsla(197, 88%, 90%,0) 98% ); }
	  100%{ background-image:radial-gradient(ellipse 225px 82px, hsla(197, 88%, 90%,1) 98%, hsla(197, 88%, 90%,0) 98% ); }
	}
}

.animationSN, .animationNS, .animationWE, .animationEW, .animationNW_SE, .animationSE_NW, .animationSW_NE, .animationNE_SW{
	opacity : 0;
	visibility: hidden;
	transition-duration: 2s;
}

.animationSN{ transform: translateX(0) translateY(30px); }
.animationNS{ transform: translateX(0) translateY(-30px); }
.animationWE{ transform: translateX(-30px) translateY(0); }
.animationEW{ transform: translateX(30px) translateY(0); }

.animationNW_SE{ transform: translateX(-21px) translateY(-21px); }
.animationSE_NW{ transform: translateX(21px) translateY(21px); }
.animationSW_NE{ transform: translateX(-21px) translateY(21px); }
.animationNE_SW{ transform: translateX(21px) translateY(-21px); }

.animationSN_active, .animationNS_active, .animationWE_active, .animationEW_active{
	opacity: 1;
	visibility: visible;
	transform: translateX(0) translateY(0);
}

.animationNW_SE_active, .animationSE_NW_active, .animationSW_NE_active, .animationNE_SW_active{
	opacity: 1;
	visibility: visible;
	transform: translateX(0) translateY(0);
}

.animation_exp{
	opacity : 0;
	visibility: hidden;
	transform:scale(0,0) ;
	transition-duration: 2s;
}
.animation_exp_active{
	opacity : 1;
	visibility: visible;
	transform:scale(1,1);
}