/*ページのレイアウト用　背景*/


/*500px以下用の表示*/

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

#header
		{
 
  		background: -webkit-linear-gradient(to right, #ada996,
#f2f2f2,#dbdbdb,#eaeaea);
 
  		background: linear-gradient(to right, #ada996, #f2f2f2, #dbdbdb, #eaeaea);
 		background: #F2F2F2;

		}



h1		{

		font-family: Georgia, 'Hiragino Mincho ProN', 'Yu Mincho', serif;

		font-size: 9px;

		margin-right:-10px ;

		margin-top: 15px;
		}


#header p	{

		text-align:center;

		font-size:28px;

		font-weight:900;

		display:inline-block;

		vertical-align:middle;

		margin-top:5;

		margin-right:-10px;

		padding:0;

		}

#tel 		{display:none;}





.photo-show {}



.menu {  width: 100%;

         list-style-type: none;

         display: table;

         padding: 0px;

         margin: 0px;

	}




.menu li{	
  		width:25%;

 		padding:0;

		float:left;

 	 	margin:0;

		display:#menu;

		}


.menu li a 	{

  		width:100%;

  		text-align:center;

		color:#FFF;

  		font-size:10px;

  		font-weight:bold;

  		padding:10px 0;

  		text-decoration:none;

 		display:block;

  		background:#9fb8bf;

		


		}


.menu li a:hover {

		text-align:center;

  		background:#9fb8fa;

		box-shadow: 1px 0px 0px rgba(225,225,225,0) inset,

			 -1px 0px 0px rgba(225,225,225,0) inset,

			  0px 1px 1px rgba(0,0,0,0.1) inset,

			  0px -1px 1px rgba(0,0,0,0.3) inset,

			  0px 1px 3px #666;

		}



}






/*800px以下用の表示*/

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

#header
		{
 
  		background: -webkit-linear-gradient(to right, #ada996,
#f2f2f2,#dbdbdb,#eaeaea);
 
  		background: linear-gradient(to right, #ada996, #f2f2f2, #dbdbdb, #eaeaea);
 		background: #F2F2F2;

		}



h1		{

		font-family: Georgia, 'Hiragino Mincho ProN', 'Yu Mincho', serif;

		font-size: 9px;

		margin-right:-10px ;

		margin-top: 15px;
		}


#header p	{

		text-align:center;

		font-size:28px;

		font-weight:900;

		display:inline-block;

		vertical-align:middle;

		margin-top:5;

		margin-right:-10px;

		padding:0;

		}

#tel 		{display:none;}





.photo-show {}



.menu {  width: 100%;

         list-style-type: none;

         display: table;

         padding: 0px;

         margin: 0px;

	}




.menu li
 	{
  		width:25%;

 		padding:0;

		float:left;

 	 	margin:0;

		display:#menu;

		}


.menu li a 	{

  		width:100%;

  		text-align:center;

		color:#FFF;

  		font-size:15px;

  		font-weight:bold;

  		padding:10px 0;

  		text-decoration:none;

 		display:block;

  		background:#9fb8bf;

		


		}


.menu li a:hover {

		text-align:center;

  		background:#9fb8fa;

		box-shadow: 1px 0px 0px rgba(225,225,225,0) inset,

			 -1px 0px 0px rgba(225,225,225,0) inset,

			  0px 1px 1px rgba(0,0,0,0.1) inset,

			  0px -1px 1px rgba(0,0,0,0.3) inset,

			  0px 1px 3px #666;

		}



}


/*801px以上の表示*/

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




#header		{

  		background: -webkit-linear-gradient(to right, #ada996, #f2f2f2, #dbdbdb,#eaeaea);
 
  		background: linear-gradient(to right, #ada996, #f2f2f2, #dbdbdb, #eaeaea);
 		background: #F2F2F2;
 		}

#tel		{float:right;

		width: 300px;
 		height: 65px;

		border: solid 1px #008080;

		}


h1		{

		font-family: Georgia, 'Hiragino Mincho ProN', 'Yu Mincho', serif;

		font-size: 9px;

		margin-right:-10px ;

		margin-top: 15px;

		}


#header p	{

		text-align:center;

		font-size:28px;

		font-weight:900;

		display:inline-block;

		vertical-align:middle;

		margin:5px;

		padding:0;

		}






.menu 		{
  
  		width: 100%;

 	 	list-style-type: none;

		display: table;

		padding: 0px;

		margin: 0px;

		}




.menu li 	{

  		width:14.28%;

  		float:left;

 		padding:0;

 	 	margin:0;

		display:#menu;

		}


.menu li a 	{

  		width:100%;

  		text-align:center;

		color:#FFF;

  		font-size:15px;

  		font-weight:bold;

  		padding:10px 0;

  		text-decoration:none;

 		display:block;

  		background:#9fb8bf;

		


		}


.menu li a:hover {

		text-align:center;

  		background:#9fb8fa;

		box-shadow: 1px 0px 0px rgba(225,225,225,0) inset,

			 -1px 0px 0px rgba(225,225,225,0) inset,

			  0px 1px 1px rgba(0,0,0,0.1) inset,

			  0px -1px 1px rgba(0,0,0,0.3) inset,

			  0px 1px 3px #666;

		}




}






.photo-show { 
    height: 444px; /*表示したい大きさ*/

    margin: auto; /*縦余白30pxは任意*/

    max-width: 100%;

    position: relative;

    width: 555px; /*表示したい大きさ、height と合わせる*/

}


.photo-show img {
 
    animation: show 32s infinite;

    -webkit-animation: show 32s infinite;

    border-radius: 0px;

    height: 100;

    max-width: 100%;

    opacity: 0;

    position: absolute;
 /*画像を全て重ねる*/

}


/*アニメーション*/


@keyframes show {

    0% {opacity:0}

    10% {opacity:1}

    15% {opacity:1}

    20% {opacity:1}

    30% {opacity:0}

 }


@-webkit-keyframes show
 {

    0% {opacity:0}

    10% {opacity:1}

    15% {opacity:1}

    20% {opacity:1}

    30% {opacity:0}

}


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


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

    -webkit-animation-delay: 0s;

}


.photo-show img:nth-of-type(2) {

    animation-delay: 4s;

    -webkit-animation-delay: 4s;

}


.photo-show img:nth-of-type(3) {

    animation-delay: 8s;

    -webkit-animation-delay: 8s;

}


.photo-show img:nth-of-type(4) {

    animation-delay: 12s;

    -webkit-animation-delay: 12s;

}


.photo-show img:nth-of-type(5) {

    animation-delay: 16s;

    -webkit-animation-delay: 16s

}


.photo-show img:nth-of-type(6) {

    animation-delay: 20s;

    -webkit-animation-delay: 20s;

}


.photo-show img:nth-of-type(7) {

    animation-delay: 24s;

    -webkit-animation-delay: 24s;
}
 

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