@charset "UTF-8";

/* Suggested order:
 * display
 * list-style
 * position
 * float
 * clear
 * width
 * height
 * margin
 * padding
 * border
 * background
 * color
 * font
 * text-decoration
 * text-align
 * vertical-align
 * white-space
 * other text
 * content
 *
 */
 

/* ==
　 Land/Ocean/Cycle

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




/*　背景　のくくり　==================================================*/
body{
	background-color:#000000;
	}











/*　tittle　のくくり　==================================================*/
div#bgImg{
	background-image:url(../images/top_img_01.jpg);
	background-position:right top;
}
div.wrapper{
/*	background-image:url(../images/top_photo.jpg);
*/	background-repeat:no-repeat;
	height:800px;
	position:relative;

	}
div.wrapper h1{
	padding-top:60px;
	}

div.wrapper h2{
	padding-top:400px;
	}
	


/*　header　のくくり　=============================================================================== */
div.menu{
	width:575px;
	position:absolute;
	bottom:15px;
	}


div.header ul li a{
	display:block;
	text-indent: -999px;
	background:url(../images/top_menu.jpg);
	margin-right:3px;
	margin-bottom:3px;
	float:left;

}
	
div.header ul li{
	list-style-type:none;

}


div.header ul li.navi_01 a{
	background-position:0px 0px;
	width:140px;
	height:25px;
}
div.header ul li.navi_01 a:hover{
	background-position:0px -53px;
	height:25px;

}

div.header ul li.navi_02 a{
	background-position:-142px 0px;
	width:140px;
	height:25px;
}

div.header ul li.navi_02 a:hover{
	background-position:-142px -53px;
	height:25px;
}

div.header ul li.navi_03 a{
	background-position:-285px 0px;
	width:140px;
	height:25px;
}

div.header ul li.navi_03 a:hover{
	background-position:-285px -53px;
	height:25px;
}


div.header ul li.navi_04 a{
	background-position:-429px 0px;
	width:140px;
	height:25px;	
}

div.header ul li.navi_04 a:hover{
	background-position:-429px -53px;
	height:25px;
}




div.header ul li.navi_05 a{
	background-position:0px -28px;
	width:140px;
	height:25px;
}

div.header ul li.navi_05 a:hover{
	background-position:0px -80px;
	height:25px;
}
div.header ul li.navi_06 a{
	background-position:-143px -28px;
	width:140px;
	height:25px;
}

div.header ul li.navi_06 a:hover{
	background-position:-143px -80px;
	height:25px;
}

div.header ul li.navi_07 a{
	background-position:-286px -28px;
	width:140px;
	height:25px;
}

div.header ul li.navi_07 a:hover{
	background-position:-286px -80px;
	height:25px;
}



div.header ul li.navi_08 a{
	background-position:-429px -28px;
	width:140px;
	height:25px;	
}

div.header ul li.navi_08 a:hover{
	background-position:-429px -80px;
	height:25px;
}
div.menu p{
	position:absolute;
	top:30px;
	left:572px;
}
div.racket_img p img{
	position:absolute;
	bottom:10px;
	left:650px;

}
/* レスポンシブ対応
 * add 2017/08/01 
 */
@media screen and (max-width: 640px) {
div.wrapper {
	  width:100%;
	  background-attachment: fixed;
}

div.wrapper h1{padding-top: 5px;}
div.wrapper h2{padding: 5px;}
div.wrapper h1 img{
 width:100%;
 height:auto;
}
div.wrapper h2 img{
 width:100%;
 height:auto;
}
div.menu{
	width: 100%;
	position:static;
}
div.header ul li{
	background-color: #E02983;
	display: block;
	margin-bottom: 20px;
}

div.menu div.header ul li a{

	min-width: 100%;
	height: auto;
	font-size: 24px;
	color: #FFF;
	background-image: none;
	text-indent:0;
	float: none;
display: block;
text-decoration: none;}

div.menu div.header ul li a:before
{content: "■";}
div.menu div.header ul li a:hover{
	height:auto;
}
div#footer img{width:100%;
height: auto;
}
div.racket_img p img,
div.menu p{
	position: static;
}

}

/*　J Query 背景　のくくり　==================================================*/
jQuery(document).ready(function($)
{
	// 画像を順番に指定する例
	$('div#wrapper).bgSwitcher({
		bgImages : [
		'images/top_img_02.jpg',
		'image2.jpg',
		'image3.jpg'
		],
		interval : 2000
	});
});