@charset "UTF-8";


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

animation img
 
---------------------------------- */

#ani_img01 {
	width: 910px;
	height: auto;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;	
}

#ani_img02 {
	width: 910px;
	height: 70px;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
}


#ani_img03 {
	width: 910px;
	height: 350px;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
}









#hoge {
	position:fixed;
	right:50%;
	font-size:36px;
}


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

animation img
 
---------------------------------- */

#ani_img01 h3 {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}

#ani_img02 h3 {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}





#ani_img01 {
	width: 900;
	height: auto;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
}


.animation01,
.animation02,
.animation03,
.animation04,
.animation05,
.animation06 {
	height: 400px;
	width: 910px;
	margin-bottom: 30px;
}

.animation01 img,
.animation02 img,
.animation03 img,
.animation04 img,
.animation05 img,
.animation06 img {
  animation-duration: 2s;
  animation-name: fadeIn; Safari & Chrome */
  background-repeat: no-repeat; 
  height: auto; 
  width: 900px; 
}

/*----animation05 fade----- */



/*----animation06 fade----- */




/*----animation07 inout----- */

#ani_img07 {
	width: 850px;
	height: 190px;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
}

.animation07 {
	height: 190px;
	width: 85px;
	margin-bottom: 50px;
}

.animation07 img{
  animation: inout 8s;
  animation-iteration-count: infinite;
  -webkit-animation: inout 3s; /* Safari & Chrome */
  background-repeat: no-repeat; 
  height: 190px; 
  width: 850px; 
}



/*----animation08 fade----- */

#ani_img08 {
	width: 960px;
	height: 550px;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
}

.animation08 {
	height: 550px;
	width: 960px;
	margin-bottom: 50px;
}

.animation08 img{
  animation-duration: 2s;
  animation-name: fadeIn; Safari & Chrome */
  background-repeat: no-repeat; 
  height: 550px; 
  width: 960px; 
}



/*----animation09 fade----- */

#ani_img09 {
	width: 820px;
	height: 175px;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
	
}

.animation09 {
	height: 175px;
	width: 820px;
	margin-top: -60px;
	margin-left: -50px;
	margin-bottom: 40px;
}

.animation09 img{
  animation-duration: 2s;
  animation-name: fadeIn; Safari & Chrome */
  background-repeat: no-repeat; 
  height: 175px; 
  width: 820px; 
}



/*----animation10 fade----- */

#ani_img10 {
	width: 820px;
	height: 175px;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
}

.animation10 {
	height: 175px;
	width: 820px;
	margin-top: -60px;
	margin-left: -50px;
	margin-bottom: 40px;
}

.animation10 img{
  animation-duration: 2s;
  animation-name: fadeIn; Safari & Chrome */
  background-repeat: no-repeat; 
  height: 175px; 
  width: 820px; 
}



/*----animation11 fade----- */


#ani_img11 {
	width: 850px;
	height: 320px;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
}

.animation11 {
	height: 320px;
	width: 850px;
	margin-bottom: 50px;
}

.animation11 img{
  animation-duration: 2s;
  animation-name: fadeIn; Safari & Chrome */
  background-repeat: no-repeat; 
  height: 320px; 
  width: 850px; 
}



/*----animation12 fade----- */


#ani_img12 {
	width: 960px;
	height: 277px;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
}

.animation12 {
	height: 277px;
	width: 960px;
	margin-bottom: 80px;
}

.animation12 img{
  animation-duration: 2s;
  animation-name: fadeIn; Safari & Chrome */
  background-repeat: no-repeat; 
  height: 277px; 
  width: 960px; 
}



/*----animation13 inout----- */

#ani_img13 {
	width: 850px;
	height: 210px;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
}

.animation13 {
	height: 210px;
	width: 850px;
	margin-bottom: 50px;
}

.animation13 img{
  animation: inout 8s;
  animation-iteration-count: infinite;
  -webkit-animation: inout 3s; /* Safari & Chrome */
  background-repeat: no-repeat; 
  height: 210px; 
  width: 850px; 
}



/*----animation14 fade----- */


#ani_img14 {
	width: 960px;
	height: 195px;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
}

.animation14 {
	height: 195px;
	width: 960px;
	margin-bottom: 30px;
}

.animation14 img{
  animation-duration: 2s;
  animation-name: fadeIn; Safari & Chrome */
  background-repeat: no-repeat; 
  height: 195px; 
  width: 960px; 
}



/*----animation15 fade----- */


#ani_img15 {
	width: 960px;
	height: 195px;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
}

.animation15 {
	height: 195px;
	width: 960px;
	margin-bottom: 30px;
}

.animation15 img{
  animation-duration: 2s;
  animation-name: fadeIn; Safari & Chrome */
  background-repeat: no-repeat; 
  height: 195px; 
  width: 960px; 
}


/*----animation16 fade----- */


#ani_img16 {
	width: 960px;
	height: 195px;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
}

.animation16 {
	height: 195px;
	width: 960px;
	margin-bottom: 30px;
}

.animation16 img{
  animation-duration: 2s;
  animation-name: fadeIn; Safari & Chrome */
  background-repeat: no-repeat; 
  height: 195px; 
  width: 960px; 
}



/*----animation17 fade----- */


#ani_img17 {
	width: 960px;
	height: 195px;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
}

.animation17 {
	height: 195px;
	width: 960px;
	margin-bottom: 30px;
}

.animation17 img{
  animation-duration: 2s;
  animation-name: fadeIn; Safari & Chrome */
  background-repeat: no-repeat; 
  height: 195px; 
  width: 960px; 
}



/*----animation18 fade----- */


#ani_img18 {
	width: 960px;
	height: 195px;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
}

.animation18 {
	height: 195px;
	width: 960px;
	margin-bottom: 30px;
}

.animation18 img{
  animation-duration: 2s;
  animation-name: fadeIn; Safari & Chrome */
  background-repeat: no-repeat; 
  height: 195px; 
  width: 960px; 
}



/*----animation19 fade----- */


#ani_img19 {
	width: 960px;
	height: 195px;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
}

.animation19 {
	height: 195px;
	width: 960px;
	margin-bottom: 30px;
}

.animation19 img{
  animation-duration: 2s;
  animation-name: fadeIn; Safari & Chrome */
  background-repeat: no-repeat; 
  height: 195px; 
  width: 960px; 
}



/*----animation20 inout----- */

#ani_img20 {
	width: 850px;
	height: 395px;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
}

.animation20 {
	height: 395px;
	width: 850px;
	margin-bottom: 50px;
	margin-top: 50px;
}

.animation20 img{
  animation: inout 8s;
  animation-iteration-count: infinite;
  -webkit-animation: inout 3s; /* Safari & Chrome */
  background-repeat: no-repeat; 
  height: 395px; 
  width: 850px; 
}




/*----animation21 fade----- */


#ani_img21 {
	width: 960px;
	height: 195px;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
}

.animation21 {
	height: 195px;
	width: 960px;
	margin-bottom: 30px;
}

.animation21 img{
  animation-duration: 2s;
  animation-name: fadeIn; Safari & Chrome */
  background-repeat: no-repeat; 
  height: 195px; 
  width: 960px; 
}



/*----animation21 fade----- */


#ani_img22 {
	width: 960px;
	height: 195px;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
}

.animation22 {
	height: 195px;
	width: 960px;
	margin-bottom: 30px;
}

.animation22 img{
  animation-duration: 2s;
  animation-name: fadeIn; Safari & Chrome */
  background-repeat: no-repeat; 
  height: 195px; 
  width: 960px; 
}



/*----animation23 inout----- */

#ani_img23 {
	width: 850px;
	height: 150px;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
}

.animation23 {
	height: 150px;
	width: 850px;
	margin-bottom: 50px;
	margin-top: 30px;
}

.animation23 img{
  animation: inout 8s;
  animation-iteration-count: infinite;
  -webkit-animation: inout 3s; /* Safari & Chrome */
  background-repeat: no-repeat; 
  height: 150px; 
  width: 850px; 
}



/*----animation24 fade----- */


#ani_img24 {
	width: 960px;
	height: 274px;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
}

.animation24 {
	height: 274px;
	width: 960px;
	margin-bottom: 30px;
}

.animation24 img{
  animation-duration: 2s;
  animation-name: fadeIn; Safari & Chrome */
  background-repeat: no-repeat; 
  height: 274px; 
  width: 960px; 
}



/*----animation25 fade----- */


#ani_img25 {
	width: 850px;
	height: 115px;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
}

.animation25 {
	height: 115px;
	width: 850px;
	margin-bottom: 30px;
}

.animation25 img{
  animation-duration: 2s;
  animation-name: fadeIn; Safari & Chrome */
  background-repeat: no-repeat; 
  height: 115px; 
  width: 850px; 
}



/*----animation25 fade----- */


#ani_img26 {
	width: 960px;
	height: 320px;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
}

.animation26 {
	height: 320px;
	width: 960px;
	margin-bottom: 30px;
}

.animation26 img{
  animation-duration: 2s;
  animation-name: fadeIn; Safari & Chrome */
  background-repeat: no-repeat; 
  height: 320px; 
  width: 960px; 
}



/*----animation27 fade----- */


#ani_img27 {
	width: 850px;
	height: 140px;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
}

.animation27 {
	height: 140px;
	width: 850px;
	margin-bottom: 30px;
}

.animation27 img{
  animation-duration: 2s;
  animation-name: fadeIn; Safari & Chrome */
  background-repeat: no-repeat; 
  height: 140px; 
  width: 850px; 
}



/*----animation28 fade----- */


#ani_img28 {
	width: 770px;
	height: 260px;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
}

.animation28 {
	height: 260px;
	width: 770px;
	margin-bottom: 30px;
}

.animation28 img{
  animation-duration: 2s;
  animation-name: fadeIn; Safari & Chrome */
  background-repeat: no-repeat; 
  height: 260px; 
  width: 770px; 
}


/*----animation23 inout----- */

#ani_img29 {
	width: 770px;
	height: 170px;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;
}

.animation29 {
	height: 170px;
	width: 770px;
	margin-bottom: 50px;
	margin-top: 30px;
}

.animation29 img{
  animation: inout 8s;
  animation-iteration-count: infinite;
  -webkit-animation: inout 3s; /* Safari & Chrome */
  background-repeat: no-repeat; 
  height: 170px; 
  width: 770px; 
}
























@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


@keyframes inout {
  0%   { transform: scale(0, 0); }
  25%   { transform: scale(1, 1); }
}
@-webkit-keyframes inout { /* Safari & Chrome */
  0%   { -webkit-transform: scale(0.5, 0.5); }
  25%  { -webkit-transform: scale(1, 1); }
  
}

@keyframes inout {
  from   { -webkit-transform: scale(0, 0); }
  to   { -webkit-transform: scale(2, 2); }
}

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

#ani_img01 {
	width: auto;
	height: auto;
	top: 0;
	color: #FFF;
	text-align: center;
	display: none;	
}
.animation01,
.animation02,
.animation03,
.animation04,
.animation05,
.animation06 {
	height: auto;
	width: 100%;
	margin-bottom: 30px;
}

.animation01 img,
.animation02 img,
.animation03 img,
.animation04 img,
.animation05 img,
.animation06 img{
  animation-duration: 2s;
  animation-name: fadeIn; Safari & Chrome */
  background-repeat: no-repeat; 
  height: auto; 
  width: 100%; 
}
}