@charset "utf-8";

/* =======================================

	Home CSS

 -----------------------------------------
	INDEX
 -----------------------------------------
 	1.

========================================== */

/* 1.
========================================== */

/*#wrapper #header #header-navi{
	position:absolute;

	margin-top:30px;
}
#wrapper #header #header-navi li {
	float:left;
	display:inline;
}
#wrapper #header #header-navi #hnavi01{
	margin-right:16px;
}*/
/**html #wrapper #header {
	position:relative;
}
*html #wrapper #header #header-navi{
	position:absolute;
	top:30px;
}*/


#wrapper #contents h2{
	margin-left:221px;
	padding-top:30px;
}
#wrapper #contents #topimage{
	margin-left:137px;
	margin-top:25px;
	margin-bottom:100px;
}

/* ============Top画面スライド===========================*/

.photo-show {
    height: 450px; /*表示したい大きさ*/
    margin: 30px auto; /*縦余白30pxは任意*/
    max-width: 100%;
    position: relative;
    width: 564px; /*表示したい大きさ、height と合わせる*/
}

.photo-show img {
    animation: show 30s infinite;
    -webkit-animation: show 30s infinite;

    height: auto;
    max-width: 100%;
    opacity: 0;
    position: absolute; /*画像を全て重ねる*/
}

/*アニメーション*/

@keyframes show {
    0% {opacity:0}
    15% {opacity:1}
    30% {opacity:1}

 }

@-webkit-keyframes show {
    0% {opacity:0}
    15% {opacity:1}
    30% {opacity:1}

}

/*各画像のアニメーションの開始時間をずらす*/

.photo-show img:nth-of-type(1) {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
}

.photo-show img:nth-of-type(2) {
    animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

.photo-show img:nth-of-type(3) {
    animation-delay: 20s;
    -webkit-animation-delay: 20s;
}



/*マウスが画像に重なった際、動きを止めて四角くする*/

.photo-show img {
    transition: 0.2s;
    -webkit-transition: 0.2s;
}

.photo-show:hover img {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
    border-radius: 0;
}

/* ======================================================*/