/* ------------------------------
Base
------------------------------ */
*		{margin:0px;border:0px;padding:0px;font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;}

html		{background:#aeb4bf url(../img/base-index-bk.gif);background-repeat:repeat-x;text-align:center;}

body		{background:#ffffff url(../img/base-index-bk.gif);background-repeat:repeat-x;text-align:center;}

#container      {width:100%;margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:0px;text-align:center;
		background:url(../img/base-main.jpg) no-repeat scroll 0% 0%;
		background-position:center top;background-attachment:scroll;}

#wrap 		{width:780px;min-height:500px;text-align:center;margin-left:auto;margin-right:auto;}

#header 	{width:100%;height:130px;text-align:center;margin-left:auto;margin-right:auto;}
#menu		{width:780px;height:50px;margin-left:auto;margin-right:auto;text-align:center;}
#contents	{width:750px;margin-top:10px;margin-bottom:0px;margin-left:auto;margin-right:auto;text-align:center;clear:both;}
















.overlay-image {
   position: absolute;
   top: 0;
   left: 0;
   width: 750px;
   height: 310px;
   background-image: url('../img/season.png');
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   z-index: 10;
   pointer-events: none;
}


.img-frame{
   position: relative;
   width:750px;
   height:310px;
   overflow: hidden;
   margin: 0 auto;

}
.img-01, .img-02, .img-03{
   position: absolute;
   top:0;
   left:0;
   width:750px;
   height:310px;
   background-size: cover;
   background-repeat: no-repeat;
}
.img-01{
   background-image: url('../img/slid_01.jpg');
   animation: slide-animation-01 24s infinite;
}
.img-02{
   background-image: url('../img/slid_02.jpg');
   animation: slide-animation-02 24s infinite;
}
.img-03{
   background-image: url('../img/slid_03.jpg');
   animation: slide-animation-03 24s infinite;
}
@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.15);}
  90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
  30% {opacity: 0; transform: scale(1.1);}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(1.0);}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}
















#news		{width:100%;height:300px;font-size:12px;color:#ffffff;text-align:left;padding:5px;overflow-y:auto;
		background-color:#65827f;line-height:1.3;margin-left:auto;margin-right:auto;}

#footer		{width:100%;font-size:11px;background:#aeb4bf url(../img/base-bottom-bk.gif) repeat-x;text-align:center;
		margin-top:0px;margin-bottom:0px;margin-left:auto;margin-right:auto;clear:both;}

#copy	 	{width:100%;height:100px;text-align:center;margin-left:auto;margin-right:auto;margin-top:0px;margin-bottom:0px;
		background:url(../img/base-bottom.gif) no-repeat;background-position:center top;clear:both;}


#sitemap	{width:770px;line-height:20px;font-size:11px;text-align:center;margin-left:auto;margin-right:auto;margin-top:10px;
		padding-bottom:20px;color:#ffffff;clear:both;}
#logo		{width:200px;text-align:left;float:left;}
#detail		{width:560px;font-size:11px;color:#ffffff;background:#aeb4bf;text-align:left;float:right;}

/* ------------------------------
fade menu
------------------------------ */

ul#nav, #nav li	{list-style:none;margin:0;padding:0;}
#nav li 	{display:block;overflow:hidden;float:left;list-style-type:none;}

.hover-css#nav a, .hover-anims#nav a, .hover-anims#nav span
{display:block;width:130px;height:50px;position:relative;background-image:url(../img/top-menu.jpg);
background-repeat:no-repeat;background-position:0 top;}

.hover-anims#nav span										{position:absolute;left:0;top:0;}

.hover-css#nav .home a, .hover-anims#nav .home a, .hover-anims#nav .home span 			{background-position:0 top;}
.hover-css#nav .home a:hover, .hover-anims#nav .home span			 		{background-position:0 bottom;}

.hover-css#nav .service a, .hover-anims#nav .service a, .hover-anims#nav .service span 		{background-position:-130px top;}
.hover-css#nav .service a:hover, .hover-anims#nav .service span 				{background-position:-130px bottom;}

.hover-css#nav .about a, .hover-anims#nav .about a, .hover-anims#nav .about span 		{background-position:-260px top;}
.hover-css#nav .about a:hover, .hover-anims#nav .about span			 		{background-position:-260px bottom;}

.hover-css#nav .license a, .hover-anims#nav .license a, .hover-anims#nav .license span 		{background-position:-390px top;}
.hover-css#nav .license a:hover, .hover-anims#nav .license span 					{background-position:-390px bottom;}

.hover-css#nav .rules a, .hover-anims#nav .rules a, .hover-anims#nav .rules span 		{background-position:-520px top;}
.hover-css#nav .rules a:hover, .hover-anims#nav .rules span 					{background-position:-520px bottom;}

.hover-css#nav .contact a, .hover-anims#nav .contact a, .hover-anims#nav .contact span 		{background-position:-650px top;}
.hover-css#nav .contact a:hover, .hover-anims#nav .contact span 				{background-position:-650px bottom;}

/* ------------------------------
tab up
------------------------------ */
#ptp		{position:fixed;bottom:10px;right:10px;font-size:10px;}
#ptp a		{background:#65827f;text-decoration:none;color:#fff;width:100px;padding:20px 0;text-align:center;display:block;border-radius:5px;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;}
#ptp a:hover	{text-decoration:none;background:#cc0000;}


/* ------------------------------
appeal-form
------------------------------ */
ul#form-party		{list-style:none;width:100%;}
ul#form-party li	{list-style:none;float:left;width:750px;}
ul#form-party a	{display:block;width:750px;height:100px;background-image:url(../img/item_06.jpg);overflow:hidden;}

#form-01 a		{width:750px;height:100px;background-position:0px 0px;}
#form-01 a:hover	{width:750px;height:100px;background-position:0px -200px;}

#form-02 a		{width:750px;height:100px;background-position:0px -100px;}
#form-02 a:hover	{width:750px;height:100px;background-position:0px -300px;}