@charset "utf-8";
@import url("reset.css");

/* スマートフォン */

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

#nav{
	display:none;
}

#hamburger{
	position:absolute;
	top:20px;
	right:36px;
	cursor:pointer;
	width:32px;
	height:24px;
	z-index:100;
}

/*
.hamburger{
	position:absolute;
	top:20px;
	right:36px;
	cursor:pointer;
	width:32px;
	height:24px;
	z-index:100;
}
*/

.hamburger span{
	transition:all .3s;
	position:absolute;
	height:2px;
	background-color:#333;
	width:100%;
	z-index:100;
}

.hamburger span:nth-of-type(1){
	top:4px;
}

.hamburger span:nth-of-type(2){
	top:12px;
}

.hamburger span:nth-of-type(3){
	top:20px;
}

.hamburger.open span:nth-of-type(1){
	top:10px;
	transform:translateY(6px) rotate(-33deg);
}

.hamburger.open span:nth-of-type(2){
	opacity:0;
}

.hamburger.open span:nth-of-type(3){
	top:22px;
	transform:translateY(-6px) rotate(33deg);
}

#nav_accordion{
	margin-top:-5px;
}

#nav_accordion dl dt{
	width:60%;
	height:20px;
	padding:6px;
	display:block;
	margin:auto;
	margin-bottom:1px;
	text-align:center;
	font-size:18px;
	line-height:18px;
}

#nav_accordion dl dd{
	width:90%;
	height:20px;
	padding:4px;
	background-color:linen;
	display:block;
	margin:auto;
	margin-bottom:1px;
	text-align:center;
}

#nav_accordion dl dd a{
	margin-left:4px;
	text-decoration:none;
	color:#ffffff;
	padding:2px;
}

#nav_accordion dl dt a:hover{
	background: -webkit-gradient(radial, 100% 40%, 0, 100% 40%, 243, color-stop(1.00, #7c0c7e), color-stop(0.00, #000));
	background: -webkit-radial-gradient(100% 40%, circle, #7c0c7e, #000000);
	background: -moz-radial-gradient(100% 40%, circle, #7c0c7e, #000000);
	background: -o-radial-gradient(100% 40%, circle, #7c0c7e, #000000);
	background: -ms-radial-gradient(100% 40%, circle, #7c0c7e, #000000);
	background: radial-gradient(100% 40%, circle, #7c0c7e, #000000);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7c0c7e', endColorstr='#000000',GradientType=1);
	color:#ffffff;
	display:block;
	padding:2px;
}

#nav_accordion dl dd a:hover{
	background: -webkit-gradient(radial, 100% 40%, 0, 100% 40%, 243, color-stop(1.00, #7c0c7e), color-stop(0.00, #000));
	background: -webkit-radial-gradient(100% 40%, circle, #7c0c7e, #000000);
	background: -moz-radial-gradient(100% 40%, circle, #7c0c7e, #000000);
	background: -o-radial-gradient(100% 40%, circle, #7c0c7e, #000000);
	background: -ms-radial-gradient(100% 40%, circle, #7c0c7e, #000000);
	background: radial-gradient(100% 40%, circle, #7c0c7e, #000000);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7c0c7e', endColorstr='#000000',GradientType=1);
	color:#ffffff;
}

}






















/* タブレット */
/*
@media screen and (min-width:768px){
*/
@media screen and (min-width:800px){


#hamburger{
	display:none;
}

#nav{
	width:100%;

	height: 40px;
	margin-top: -10px;
	margin-bottom: 10px;
	margin-left: 12px;
	margin-right: 3px;
clear:both;
}

#nav ul{
	width:100%;

	margin-top: 5px;
	padding: 0px;
}

#nav ul li{
	width:18.2%;


/*
	width:190px;
*/
	margin-left:0.7%;
	margin-right:0.4%;
	list-style-type: none;
	border-width:1px;
	border-style:solid;
	border-top-color:red;
	border-left-color:red;
	border-right-color:red;
	float: left;
}

#nav ul li:last-child{


/*
	width:190px;
*/

	width:18.2%;

	margin-left:0.7%;
	list-style-type: none;
	border-width:1px;
	border-style:solid;
	border-color:red;
	float: left;
}

#nav ul li a{
	width:100%;
	height:39px;
  font-size: 16px;
  font-weight: bold;
  line-height: 40px;
	text-decoration:none;
	text-align:center ;
	color:#ffffff;
/*
	background-color:#B82456;
*/
  display: block;
	float: left;
}

#nav ul li a:hover{
	color:yellow;
}

.fixed{
	top:10px;
	position: fixed;
	z-index:100;
}

#nav_accordion dl{
	display:none;
}

/* ナビゲーション（メイン）：おわり */

/* ナビゲーション（サブ） ：はじめ*/

#nav_sub{
	width:100%;
	height: 40px;
	margin-top: -10px;
	margin-bottom: 10px;
	margin-right: 3px;
clear:both;

}

#nav_sub ul{
	width:100%;
	margin-top:8px;
	margin-left:10px;

}

#nav_sub ul li{
	width:17%;
margin-top:8px;
	margin-left:1.5%;
	margin-right:0.3%;
	list-style-type: none;
	border-width:1px;
	border-style:solid;
	border-top-color:white;
	border-left-color:white;
	border-right-color:white;
	border-radius:10px;
	float: left;
}

#nav_sub ul li:last-child{
	width:17%;
margin-top:8px;
	margin-left:1.5%;
	list-style-type: none;
	border-width:1px;
	border-style:solid;
	border-color:white;
	border-radius:10px;
	float: left;
}

#nav_sub ul li a{
	width:100%;
	height:30px;
  font-size: 16px;
  font-weight: bold;
  line-height: 30px;
	text-decoration:none;
	text-align:center ;
	border-radius:10px;
	background-color:rgba(255,0,0,0.4);
/*
	background-color:#B82456;
*/
  display: block;
	float: left;
}

#nav_sub ul li a:hover{
	color:yellow;
}

.tabcolor{
width:99%;

	margin-top:2px;
	margin-left:-1px;
	height:100px;
	background-color:rgba(255,255,255,0,0.1);
	 /* tranparentとすると，nav_subの面積を認識せず，mouseleaveがうまく作動しない。 */
	display:inline-block;
	border-width:1px;
	border-color:red;
	border-style:solid;
	z-index:100;
	position: relative;
}

/* ナビゲーション（サブ）：おわり */


}















































/* ＰＣ */
/*
@media screen and (min-width:1024px){
*/
@media screen and (min-width:1200px){



#hamburger{
	display:none;
}

#nav{
	height: 40px;
	margin-top: -10px;
	margin-bottom: 10px;
	margin-left: 12px;
	margin-right: 3px;
}

#nav ul{
	margin-top: 5px;
	padding: 0px;
}

#nav ul li{
	width:236px;

	margin-left:10px;
	margin-right:4px;
	list-style-type: none;
	border-width:1px;
	border-style:solid;
	border-top-color:red;
	border-left-color:red;
	border-right-color:red;
	float: left;
}

#nav ul li:last-child{
	width:236px;

	margin-left:10px;
	list-style-type: none;
	border-width:1px;
	border-style:solid;
	border-color:red;
	float: left;
}

#nav ul li a{
	width:100%;
	height:39px;
  font-size: 16px;
  font-weight: bold;
  line-height: 40px;
	text-decoration:none;
	text-align:center ;
	color:#ffffff;
/*
	background-color:#B82456;
*/
  display: block;
	float: left;
}

#nav ul li a:hover{
	color:yellow;
}

.fixed{
	top:10px;
	position: fixed;
	z-index:100;
}

#nav_accordion dl{
	display:none;
}

/* ナビゲーション（メイン）：おわり */

/* ナビゲーション（サブ） ：はじめ*/

#nav_sub{
	width:99%;
	height: 40px;
	margin-top: -10px;
	margin-bottom: 10px;
	margin-left: 2px;
	margin-right: 3px;
}

#nav_sub ul{
	margin-top:8px;
	margin-left:38px;
}

#nav_sub ul li{
	width:200px;
margin-top:8px;

	margin-left:12px;
	margin-right:28px;
	list-style-type: none;
	border-width:1px;
	border-style:solid;
	border-top-color:white;
	border-left-color:white;
	border-right-color:white;
	border-radius:10px;
	float: left;
}

#nav_sub ul li:last-child{
	width:200px;
margin-top:8px;

	margin-left:12px;
	list-style-type:none;
	border-width:1px;
	border-style:solid;
	border-color:white;
	border-radius:10px;
	float: left;
}

#nav_sub ul li a{
	width:100%;
	height:30px;
  font-size: 16px;
  font-weight: bold;
  line-height: 30px;
	text-decoration:none;
	text-align:center ;
	border-radius:10px;
	background-color:rgba(255,0,0,0.4);
/*
	background-color:#B82456;
*/
  display: block;
	float: left;
}

#nav_sub ul li a:hover{
	color:yellow;
}

.tabcolor{
	margin-top:2px;
	margin-left:-1px;
	height:100px;
	width:100%;
	background-color:rgba(255,255,255,0,0.1);
	 /* tranparentとすると，nav_subの面積を認識せず，mouseleaveがうまく作動しない。 */
	display:inline-block;
	border-width:1px;
	border-color:red;
	border-style:solid;
	z-index:100;
	position: relative;
}

/* ナビゲーション（サブ）：おわり */


}