@charset "UTF-8";

/*home以外のページ共通*/
header{
	width:100%;
	margin-top:40px;
	background:url(img/bg_head.jpg) repeat-x;
	background-size:contain;
}


.pagetop {
	position: fixed;
	bottom: 5%;
	right: 5%;
}


/*うたこよみ*/

.koujou{
	writing-mode:vertical-rl;
	float:right;
	padding:50px;
}
.koujou a{
	color:#aaa;
}
.koujou a:hover{
	color:#2c2;
}

/* 表示領域 */
#stage {
	position:relative;
	width: 600px;
	height: 300px;
	/*margin:20px;*/
}
/* スライド共通 */
.photo {
	position: absolute;
	left: 200px;top:100px;
}
/* 各スライドのanimation設定 */
#photo1 {
    -webkit-animation:slidepass 18s infinite;
    -webkit-animation-delay:-15s;
    animation:slidepass 18s infinite;
    animation-delay:-15s;
}
#photo2 {
    -webkit-animation:slidepass 18s infinite;
    -webkit-animation-delay:-12s;
    animation:slidepass 18s infinite;
    animation-delay:-12s;
}
#photo3 {
    -webkit-animation:slidepass 18s infinite;
    -webkit-animation-delay:-9s;
    animation:slidepass 18s infinite;
    animation-delay:-9s;
}
#photo4 {
    -webkit-animation:slidepass 18s infinite;
    -webkit-animation-delay:-6s;
    animation:slidepass 18s infinite;
    animation-delay:-6s;
}
#photo5 {
    -webkit-animation:slidepass 18s infinite;
    -webkit-animation-delay:-3s;
    animation:slidepass 18s infinite;
    animation-delay:-3s;
}
#photo6 {
    -webkit-animation:slidepass 18s infinite;
    -webkit-animation-delay:0s;
    animation:slidepass 18s infinite;
    animation-delay:0s;
}
/* スライドの動きワンサイクル */
@-webkit-keyframes slidepass {
    0% {-webkit-transform:perspective(750px) rotateY(0deg) translateZ(250px);z-index:20;}
    10% {-webkit-transform:perspective(1000px) rotateY(60deg) translateZ(250px);z-index:18;}
    16.7% {-webkit-transform:perspective(1000px) rotateY(60deg) translateZ(250px);z-index:18;}
    26.7% {-webkit-transform:perspective(1000px) rotateY(120deg) translateZ(250px);z-index:14;}
    33.3% {-webkit-transform:perspective(1000px) rotateY(120deg) translateZ(250px);z-index:14;}
    43.3% {-webkit-transform:perspective(1000px) rotateY(180deg) translateZ(250px);z-index:8;}
    50% {-webkit-transform:perspective(1000px) rotateY(180deg) translateZ(250px);z-index:8;}
    60% {-webkit-transform:perspective(1000px) rotateY(240deg) translateZ(250px);z-index:10;}
    66.7% {-webkit-transform:perspective(1000px) rotateY(240deg) translateZ(250px);z-index:10;}
    76.7% {-webkit-transform:perspective(1000px) rotateY(300deg) translateZ(250px);z-index:12;}
    83.4% {-webkit-transform:perspective(1000px) rotateY(300deg) translateZ(250px);z-index:12;}
    93.4% {-webkit-transform:perspective(750px) rotateY(360deg) translateZ(250px);z-index:16;}
    100% {-webkit-transform:perspective(750px) rotateY(360deg) translateZ(250px);z-index:16;}
}
@keyframes slidepass {
    0% {transform:perspective(750px) rotateY(0deg) translateZ(250px);z-index:20;}
    10% {transform:perspective(1000px) rotateY(60deg) translateZ(250px);z-index:18;}
    16.7% {transform:perspective(1000px) rotateY(60deg) translateZ(250px);z-index:18;}
    26.7% {transform:perspective(1000px) rotateY(120deg) translateZ(250px);z-index:14;}
    33.3% {transform:perspective(1000px) rotateY(120deg) translateZ(250px);z-index:14;}
    43.3% {transform:perspective(1000px) rotateY(180deg) translateZ(250px);z-index:8;}
    50% {transform:perspective(1000px) rotateY(180deg) translateZ(250px);z-index:8;}
    60% {transform:perspective(1000px) rotateY(240deg) translateZ(250px);z-index:10;}
    66.7% {transform:perspective(1000px) rotateY(240deg) translateZ(250px);z-index:10;}
    76.7% {transform:perspective(1000px) rotateY(300deg) translateZ(250px);z-index:12;}
    83.4% {transform:perspective(1000px) rotateY(300deg) translateZ(250px);z-index:12;}
    93.4% {transform:perspective(750px) rotateY(360deg) translateZ(250px);z-index:16;}
    100% {transform:perspective(750px) rotateY(360deg) translateZ(250px);z-index:16;}
}

/* 表示領域 */
#stage2 {
    position:relative;
    width: 600px;
    height: 300px;
	/*margin:20px;*/
}
/* 各スライドのanimation設定 */
#photo7 {
    -webkit-animation:slidepass 18s infinite;
    -webkit-animation-delay:-15s;
    animation:slidepass 18s infinite;
    animation-delay:-15s;
}
#photo8 {
    -webkit-animation:slidepass 18s infinite;
    -webkit-animation-delay:-12s;
    animation:slidepass 18s infinite;
    animation-delay:-12s;
}
#photo9 {
    -webkit-animation:slidepass 18s infinite;
    -webkit-animation-delay:-9s;
    animation:slidepass 18s infinite;
    animation-delay:-9s;
}
#photo10 {
    -webkit-animation:slidepass 18s infinite;
    -webkit-animation-delay:-6s;
    animation:slidepass 18s infinite;
    animation-delay:-6s;
}
#photo11 {
    -webkit-animation:slidepass 18s infinite;
    -webkit-animation-delay:-3s;
    animation:slidepass 18s infinite;
    animation-delay:-3s;
}
#photo12 {
    -webkit-animation:slidepass 18s infinite;
    -webkit-animation-delay:0s;
    animation:slidepass 18s infinite;
    animation-delay:0s;
}
@media screen and (max-width: 640px){
	/* スライドの動きワンサイクル */
	@-webkit-keyframes slidepass {
	    0% {-webkit-transform:perspective(750px) rotateY(0deg) translateZ(150px);z-index:20;}
	    10% {-webkit-transform:perspective(1000px) rotateY(60deg) translateZ(150px);z-index:18;}
	    16.7% {-webkit-transform:perspective(1000px) rotateY(60deg) translateZ(150px);z-index:18;}
	    26.7% {-webkit-transform:perspective(1000px) rotateY(120deg) translateZ(150px);z-index:14;}
	    33.3% {-webkit-transform:perspective(1000px) rotateY(120deg) translateZ(150px);z-index:14;}
	    43.3% {-webkit-transform:perspective(1000px) rotateY(180deg) translateZ(150px);z-index:8;}
	    50% {-webkit-transform:perspective(1000px) rotateY(180deg) translateZ(150px);z-index:8;}
	    60% {-webkit-transform:perspective(1000px) rotateY(240deg) translateZ(150px);z-index:10;}
	    66.7% {-webkit-transform:perspective(1000px) rotateY(240deg) translateZ(150px);z-index:10;}
	    76.7% {-webkit-transform:perspective(1000px) rotateY(300deg) translateZ(150px);z-index:12;}
	    83.4% {-webkit-transform:perspective(1000px) rotateY(300deg) translateZ(150px);z-index:12;}
	    93.4% {-webkit-transform:perspective(750px) rotateY(360deg) translateZ(150px);z-index:16;}
	    100% {-webkit-transform:perspective(750px) rotateY(360deg) translateZ(150px);z-index:16;}
	}
	@keyframes slidepass {
	    0% {transform:perspective(750px) rotateY(0deg) translateZ(150px);z-index:20;}
	    10% {transform:perspective(1000px) rotateY(60deg) translateZ(150px);z-index:18;}
	    16.7% {transform:perspective(1000px) rotateY(60deg) translateZ(150px);z-index:18;}
	    26.7% {transform:perspective(1000px) rotateY(120deg) translateZ(150px);z-index:14;}
	    33.3% {transform:perspective(1000px) rotateY(120deg) translateZ(150px);z-index:14;}
	    43.3% {transform:perspective(1000px) rotateY(180deg) translateZ(150px);z-index:8;}
	    50% {transform:perspective(1000px) rotateY(180deg) translateZ(150px);z-index:8;}
	    60% {transform:perspective(1000px) rotateY(240deg) translateZ(150px);z-index:10;}
	    66.7% {transform:perspective(1000px) rotateY(240deg) translateZ(150px);z-index:10;}
	    76.7% {transform:perspective(1000px) rotateY(300deg) translateZ(150px);z-index:12;}
	    83.4% {transform:perspective(1000px) rotateY(300deg) translateZ(150px);z-index:12;}
	    93.4% {transform:perspective(750px) rotateY(360deg) translateZ(150px);z-index:16;}
	    100% {transform:perspective(750px) rotateY(360deg) translateZ(150px);z-index:16;}
	}
}
/*メディアクエリ　　フロート解除*/

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

	#kurukuru{
		width:100%;
		text-align:center;
	}
	.koujou{
			float:none;
		writing-mode:horizontal-tb;
	}
	#stage {
		position:relative;
		width:100%;
		height:400px;
		margin:0 auto;
	}
	#stage2 {
		position:relative;
		width:100%;
		height:400px;
		margin:0 auto;
	}
	.photo {
		position: absolute;
		left: 25%;top:25%;
	}
}