@charset "utf-8";
/* 標準可変メディア
   メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 では最大幅がサポートされていないため、デフォルトで幅 100% に設定される */
.ie6 img {
	width: 100%;
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/*
	Dreamweaver 可変グリッドプロパティ
	----------------------------------
	dw-num-cols-mobile:		24;
	dw-num-cols-tablet:		24;
	dw-num-cols-desktop:	24;
	dw-gutter-percentage:	25;
	
	以下からヒントを入手 : Ethan Marcotte 氏の「レスポンシブ Web デザイン」 
	http://www.alistapart.com/articles/responsive-web-design
	
	および Joni Korpi 氏の「Golden Grid System」
	http://goldengridsystem.com/ 
*/

/* モバイルレイアウト : 480 px およびそれ以下. */

	

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 90.2416%;
	padding-left: 0.3791%;
	padding-right: 0.3791%;
	font-size: 4vw;
}
body {
	background-color: #000000;
}
#navii0 {
	clear: both;
	float: left;
	margin: 5% 0% 0% 0%;
	width: 100%;
	display: block;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-ms-border-radius: 15px;
	border-radius: 15px;
}
#navii1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #00FF00;
	height: 40vw;
	color: #EAEAEA;
	
}

[id^="navi"] :hover {
	background-color: #333333;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-ms-border-radius: 15px;
	border-radius: 15px;
}
	#navii2 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #32CD32;
	height: 38vw;
	color: #EAEAEA;
}
#navii3 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #9ACD32;
	height: 36vw;
	color: #EAEAEA;
}
#navii4 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #6B8E23;
	height: 34vw;
	color: #EAEAEA;
}
#navii5 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #556B2F;
	height: 32vw;
	color: #EAEAEA;
}
#navii6 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #006400;
	height: 30vw;
	color: #EAEAEA;
}
#navii1, #navii2, #navii3, #navii4, #navii5, #navii6, #footeri, #navii1b, #navii2b, #navii3b, #navii4b {
	border-width: 1px;
	border-style: solid;
	border-color: #000;
	margin-bottom: 3%;
	-moz-box-shadow: 14px 14px 0px -3px #696969;
	-webkit-box-shadow: 14px 14px 0px -3px #696969;
	-ms-box-shadow: 14px 14px 0px -3px #696969;
	box-shadow: 14px 14px 0px -3px #696969;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-ms-border-radius: 15px;
	border-radius: 15px;
	font-weight: bold;
}
#navii1 h1, #navii2 h2, #navii3 h3, #navii4 h4, #navii5 h5, #navii6 h6, a {
	margin: 0;
	padding-left: 2%;
	padding-right: 5%;
	padding-top: 3%;
	padding-bottom: 5%;
	text-decoration: none;
	color: #000;
	font-family: Verdana, Geneva, sans-serif;
	text-shadow: -1px -1px 1px #ffffff, 1px 1px #000000;
	font-weight: bold;
	font-size: 3.5vw;
	
	font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
}
#navii1 h1, #navii2 h2, #navii3 h3, #navii4 h4, #navii5 h5, #navii6 h6, a:link {
	padding-left: 2%;
	color: #FFFFFF;
	-moz-text-shadow: 5px 5px 0px #696969;
	-webkit-text-shadow: 5px 5px 0px #696969;
	-ms-text-shadow: 5px 5px 0px #696969;
	text-shadow: 5px 5px 0px #696969;
	font-weight: bold;
} /* 未訪問のリンク */
#navii1 h1, #navii2 h2, #navii3 h3, #navii4 h4, #navii5 h5, #navii6 h6, a:visited {
	padding-left: 2%;
	color: #FFFFFF;
	text-shadow: -1px -1px 1px #ffffff, 1px 1px #000000;
	font-weight: bold;
} /* 訪問済みのリンク */
#navii1 h1, #navii2 h2, #navii3 h3, #navii4 h4, #navii5 h5, #navii6 h6, a:hover {
	color: #FF0000;
	text-shadow: -0px -0px 1px #ffffff, 1px 1px #000000;
	font-weight: bold;
	font-size: 4vw;
} /* ポイント時のリンク */
#navii1 h1, #navii2 h2, #navii3 h3, #navii4 h4, #navii5 h5, #navii6 h6, a:active {
} /*クリック時 */
#footeri {
	clear: both;
	float: left;
	width: 100%;
	height: auto;
	display: block;
	margin: 0%;
0% 3% 0%;
	padding: 2% 0% 2% 0%;
	display: inline-block;
	text-align: center;
	box-sizing: border-box;
	color: #FFF;
	background-color: #333333;
}
#footeri ul {
	margin-right: 0% 1% 0% 1%;
	padding: 0;
	display: inline-block;
	text-align: center;
}
#footeri li {
	margin: 0;
	padding: 0;
	text-align: left;
	font-size: 2vw;
	list-style-type: none;
	line-height: 1.5em;
	font-family: "Comic Sans MS", cursive;
	font-weight: bold;
}
#footeri a {
	margin: 0;
	padding: 0;
	font-size: 2vw;
	color: #0F3;
}
#footeri a:hover {
	color: #F00;
	font-size: 2.1vw;
}
/* ２部  */
#navii02 {
	clear: both;
	float: left;
	margin: 0% 0% 5% 0%;
	padding: 0;
	width: 100%;
	display: block;
}
#navii1b {
	clear: both;
	float: left;
	margin: 3% 0% 0% 0%;
	width: 100%;
	display: block;
	background-color: #181818;
	height: 15vw;
	color: #EAEAEA;
}
#navii2b {
	clear: both;
	float: left;
	margin: 3% 0% 0% 0%;
	width: 100%;
	display: block;
	background-color: #424242;
	height: 15vw;
	color: #EAEAEA
}
#navii3b {
	clear: both;
	float: left;
	margin: 3% 0% 0% 0%;
	width: 100%;
	display: block;
	background-color: #6C6C6C;
	height: 15vw;
	color: #EAEAEA
}
#navii4b {
	clear: both;
	float: left;
	margin: 3% 0% 0% 0%;
	width: 100%;
	display: block;
	background-color: #969696;
	height: 15vw;
	color: #EAEAEA
}
#navii1b h2, #navii2b h2 {
	margin-left: 5%;
	font-size: 4vw;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#navii4b h3 {
	margin-left: 5%;
	font-size: 2vw;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
/* タブレットレイアウト : 481 px ～ 768 px。モバイルレイアウトからスタイルを継承。 */

@media only screen and (min-width: 481px) {
.gridContainer {
	width: 92.225%;
	padding-left: 0.3875%;
	padding-right: 0.3875%;
	font-size: 2.5vw;

}
body {
	background-image: url(../img-hp/%E8%A1%97%E3%82%B7%E3%83%AB%E3%82%A8%E3%83%83%E3%83%88_11.jpg);
	background-repeat: repeat-x;
	background-attachment: fixed;
	background-position: bottom;
	background-color: #FFFFFF;
}
#navii0 {
	clear: both;
	float: left;
	margin: 5% 0% 0% 0%;
	padding: 0;
	width: 100%;
	display: block;
	-webkit-transform: rotateY(360deg);
	-moz-transform: rotateY(360deg);
	transform: rotateY(360deg);
	transition: 2s linear;	/* 回転時間2秒　一定速度 */
} /* open時 */
#navii0 {
	animation: animation 2s linear 1s both;
}
 @keyframes animation {
 from {
transform: rotateY(0deg);
}
to {
	transform: rotateY(360deg);
}
}
#navi1i {
	clear: both;
	float: left;
	margin: 0;
	width: 100%;
	display: block;
}
#navi2i {
	clear: both;
	float: left;
	margin: 0;
	width: 100%;
	display: block;
}
#navi3i {
	clear: both;
	float: left;
	margin: 0;
	width: 100%;
	display: block;
}
#navi4i {
	clear: both;
	float: left;
	margin: 0;
	width: 100%;
	display: block;
}
#navi5i {
	clear: both;
	float: left;
	margin: 0;
	width: 100%;
	display: block;
}
#navi6i {
	clear: both;
	float: left;
	margin: 0;
	width: 100%;
	display: block;
}
#navii1, #navii2, #navii3, #navii4, #navii5, #navii6, #footeri {
	border-width: 1px;
	border-style: solid;
	border-color: #000;
	-moz-box-shadow: 14px 14px 0px -3px #696969;
	-webkit-box-shadow: 14px 14px 0px -3px #696969;
	-ms-box-shadow: 14px 14px 0px -3px #696969;
	box-shadow: 14px 14px 0px -3px #696969;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-ms-border-radius: 15px;
	border-radius: 15px;
	font-weight: 800;
}
#navii1 h1, #navii2 h2, #navii3 h3, #navii4 h4, #navii5 h5, #navii6 h6, a {
	margin: 0;
	　padding-left: 2%;
	padding-right: 5%;
	padding-top: 3%;
	padding-bottom: 5%;
	text-decoration: none;
	color: #000;
	font-family: Verdana, Geneva, sans-serif;
	text-shadow: -1px -1px 1px #ffffff, 1px 1px #000000;
	font-weight: bold;
	font-size: 2.5vw;
}
#navii1 h1, #navii2 h2, #navii3 h3, #navii4 h4, #navii5 h5, #navii6 h6, a:link {
	padding-left: 2%;
	color: #FFFFFF;
	-moz-text-shadow: 5px 5px 0px #696969;
	-webkit-text-shadow: 5px 5px 0px #696969;
	-ms-text-shadow: 5px 5px 0px #696969;
	text-shadow: 5px 5px 0px #696969;
	font-weight: bold;
}
#navii1 h1, #navii2 h2, #navii3 h3, #navii4 h4, #navii5 h5, #navii6 h6, a:visited {
	padding-left: 2%;
	color: #FFFFFF;
	text-shadow: -1px -1px 1px #ffffff, 1px 1px #000000;
	font-weight: bold;
	-moz-transform: rotateY(360deg);
	-webkit-transform: rotateY(360deg);
	transform: rotateY(360deg);
	transition: 2s linear;	/* 回転時間2秒　一定速度 */
} /* 訪問済みのリンク */
#navii1 h1, #navii2 h2, #navii3 h3, #navii4 h4, #navii5 h5, #navii6 h6, a:hover {
	color: #F00;
	font-weight: bold;
	text-shadow: -0px -0px 1px #ffffff, 1px 1px #000000;
	-moz-transform: rotateY(360deg);
	-webkit-transform: rotateY(360deg);
	transform: rotateY(360deg);
	transition: 2s linear;	/* 回転時間2秒　一定速度 */
}
/* ポイント時のリンク */
#navii1 h1, #navii2 h2, #navii3 h3, #navii4 h4, #navii5 h5, #navii6 h6, a:active {
	-moz-transform: rotateY(360deg);
	-webkit-transform: rotateY(360deg);
	transition: 2s linear;	/* 回転時間2秒　一定速度 */
} /*クリック時 */
#footeri {
	margin: 0;
	padding: 0;
	clear: both;
	float: left;
	width: 100%;
	display: block;
}
#footeri a:hover {
	-moz-transform: rotatey(0dg);
	-webkit-transform: rotatey(0deg);
	transform: rotateY(0deg);
	transition: 0s linear;	/* 回転時間2秒　一定速度 *//* 修正 */
}
/* ２部  */
#navii02 {
	clear: both;
	float: left;
	margin: 0% 0% 5% 0%;
	padding: 0;
	width: 100%;
	display: block;
	-webkit-transform: rotateY(360deg);
	-moz-transform: rotateY(360deg);
	transform: rotateY(360deg);
	transition: 2s linear;	/* 回転時間2秒　一定速度 */
} /* open時 */
#navii02 {
	animation: animation 2s linear 1s both;
}
 @keyframes animation {
 from {
transform: rotateY(0deg);
}
to {
	transform: rotateY(360deg);
}
}
#navii1b {
	clear: both;
	float: left;
	margin: 3% 0% 0% 0%;
	width: 100%;
	display: block;
	transition: width 3s ease;
	-webkit-transition: width 3s ease;
}
#navii1b:hover {
	width: 50%;
	transition: 5s ease;
	color: #F00;
}
#navii2b {
	clear: both;
	float: left;
	margin: 3% 0% 0% 0%;
	width: 100%;
	display: block;
	transition: width 3s ease;
	-webkit-transition: width 3s ease;
}
#navii2b:hover {
	width: 50%;
	transition: 5s ease;
	color: #F00;
}
#navii3b {
	clear: both;
	float: left;
	margin: 3% 0% 0% 0%;
	width: 100%;
	display: block;
	transition: width 3s ease;
	-webkit-transition: width 3s ease;
}
#navii3b:hover {
	width: 50%;
	transition: 5s ease;
	color: #F00;
}
#navii4b {
	clear: both;
	float: left;
	margin: 3% 0% 0% 0%;
	width: 100%;
	display: block;
	transition: width 3s ease;
	-webkit-transition: width 3s ease;
}

#navii4b:hover {
	width: 50%;
	color: #F00;
	transition: 5s ease;
}
#navii4b a:hover {
	width: 100%;
	
	
	transition: 5s ease;
	font-size:3vw;
}



#navii1b h2, #navii2b h2 {
	margin-left: 5%;
	font-size: 3vw;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
}
/* デスクトップレイアウト : 769 px ～最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

@media only screen and (min-width: 769px) {
.gridContainer {
	width: 89.25%;
	max-width: 1232px;
	padding-left: 0.375%;
	padding-right: 0.375%;
	margin: auto;
	font-size: 1.5vw;
}
#navii0 {
	clear: both;
	float: left;
	margin-left: 16.8067%;
	width: 66.3865%;
	display: block;
}
#navii1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	height: 20vw;
}
#navii2 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	height: 18vw;
}
#navii3 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	height: 16vw;
}
#navii4 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	height: 14vw;
}
#navii5 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	height: 12vw;
}
#navii6 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	height: 10vw;
}
#navii1 h1, #navii2 h2, #navii3 h3, #navii4 h4, #navii5 h5, #navii6 h6, a {
	margin: 0;
	　padding-left: 2%;
	padding-right: 5%;
	padding-top: 3%;
	padding-bottom: 5%;
	text-decoration: none;
	color: #000;
	font-family: Verdana, Geneva, sans-serif;
	text-shadow: -1px -1px 1px #ffffff, 1px 1px #000000;
	font-weight: bold;
	font-size: 1.5vw;
}
#navii1 h1, #navii2 h2, #navii3 h3, #navii4 h4, #navii5 h5, #navii6 h6, a:hover {
	color: #F00;
	text-shadow: -0px -0px 1px #ffffff, 1px 1px #000000;
	-moz-transform: rotateY(360deg);
	-webkit-transform: rotateY(360deg);
	transform: rotateY(360deg);
	transition: 2s linear;	/* 回転時間2秒　一定速度 */
	font-weight: bold;
	font-size: 2vw;
} /* ポイント時のリンク */
#footeri {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#footeri li {
	font-size: 1vw;
}
#footeri a {
	font-size: 1vw;
}
#footeri a:hover {
	font-size: 1.1vw;
}
/*  ２部  */
#navii02 {
	clear: both;
	float: left;
	margin-left: 16.8067%;
	width: 66.3865%;
	display: block;
}
#navii1b {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#navii2b {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#navii3b {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#navii4b {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#navii1b h2, #navii2b h2 {
	margin-left: 5%;
	font-size: 2.5vw;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
}