@charset "utf-8";

@media screen and (min-width:481px){
body{margin:0px 0px;
     text-align:center;
	 padding-top:90px;
     padding-bottom:50px;}


.eveLine{
	width:2px;
	height:435px;
	background:#00CC00;
	position:absolute;
	left: 646px;
	top: 3px;
	z-index:1;
}

.timeline{
  width:900px;
  margin:0 auto;
  font-size:9px;
  font-family:"メイリオ";
  position:relative;
  }
 
.timeline table{
border:none;
background:#BBBBBB;
border-collapse:collapse;
}

.timeline th{background:#66FF99; width:47px; font-size:13px; border:1px solid #CCC;}

.timeline td{text-align:center; padding:2px 5px; font-size:13px; border:1px solid #CCC;}

.legend{
width:900px;
margin:0 auto;
font-family:"メイリオ";
text-align:center;
font-size:14px;
}

.legend li{
 	list-style:none;
}
.legend table{background:#006600;  margin:0 auto;}
.legend th{width:80px; height:30px;}
.legend td{padding:5px 10px; font-size:12px;}

.sat{color:#0000FF; font-weight:bold;}
.sun{color:#FF0000; font-weight:bold;}

.space{height:3px; background:linear-gradient(180deg,#66FF99,white); border:none;}

.back{
  width:auto;
  height:auto;
  margin-top:0px;
  background:url(image/ft_court.jpg);
  }

.fullbody{
width:820px;
height:auto;
text-align:center;
margin:0 auto;
background:#FFFFFF;
position:relative;
}

.top{
width:820px;
height:430px;
text-align:center;
margin-bottom:10px;
position:relative;
background:url(image/futsal1.jpg);
background-size:100%;
}

#topSlide{
width:820px;
height:430px;
position:absolute;
}

#topSlide img{width:820px; height:430px; border:none;}


.top-logo{
position:absolute;
top:0px;
left:0px;
height:430px;
width:600px;
background:linear-gradient(90deg,rgba(0,128,0,0.7),rgba(0,128,0,0.0));
}

.top-logo h1{
	position: absolute;
	bottom: 5px;
	left: 15px;
	color: white;
	font-family: "メイリオ";
	font-size: 40px;
	text-shadow: 2px 2px 1px #222222;

}

.logoIni{
font-size:80px;
color:#060;
text-shadow:4px 4px 2px white,
-4px 4px 2px white,
4px -4px 2px white,
-4px -4px 2px white;
padding-right:3px;
}


.topics{position:relative; }

.topics-right{
	width:48%;
	height:205px;
	float:right;
	margin-right:10px;
	position:absolute;
	top:35px;
	right:5px;
	padding:0px auto;
	text-align:right;
}

.topics table{text-align:center; background:#006600; margin-left:20px; font-size:17px; margin-bottom:20px;}

.topics th{background:#66FF99; padding:3px 20px;}
.topics td{padding:2px 30px; background:#FFFFFF}



.write-area h1{
font-size:18px;
background:#00CC66;
margin:0px 0px;
padding-left:8px;
color:#FFFFFF;
font-family:"メイリオ";
}

.write-area h2{
font-size:14px;
margin:0px 0px;
padding-left:8px;
color:#FF0000;
font-family:"メイリオ";
}

.write-area{
width:800px;
height:auto;
text-align:left;
box-shadow:1px 1px 1px gray;
margin:10px auto;
clear:left;
padding-bottom:5px;
font-family:"メイリオ";
}

.write-area li{
margin:none;
margin-bottom:10px;
font-size:13px;
top:0px;
font-family:"メイリオ";}

.info li{color:#FF0000;}

.price table{text-align:center; background:#006600; margin-left:20px; font-size:17px;}
.price th{background:#66FF99; padding:3px 7px;}
.price td{padding:2px 10px; background:#FFFFFF}


.red{color:#FF0000;} .blue{color:#0000CC;}

.cxl {position:relative;}
.cxl table{text-align:center; background:#006600; margin-left:30px; font-size:17px;}
.cxl th{background:#66FF99; padding:3px 30px;}
.cxl td{padding:2px 10px; background:#FFFFFF;}

.cxl-at{
	float:right;
	position:absolute;
	right:5px;
	top:2px;
	width:416px;
	height:58px;
	color:#FF0000;
	background:#FFFF33;
	font-size:11px;
	padding:4px 4px;
}

#calender a{text-decoration:none;}
#calender {z-index:1; }

.calender-area{
	width: 100%;
	height: 330px;
	text-align: center;
	display: block;
	margin: 0 auto;
	
}

.calender-area a{
text-decoration:none;
color:#06C;

}

.calender-area a:visited {
text-decoration:none;
color:#06C;
}

.calender-area table{
float:left; 
margin:0px 5px; 
background:#999999;
border-collapse:collapse;
}

.calender-area th{
font-size:20px;
font-family:"メイリオ";
border:1px solid #CCC;
}

.calender-area td{
width:40px; 
height:40px;
line-height:40px;
font-family:"メイリオ";
font-size:24px;
text-align:center;
border:1px solid #CCC;
}

.calender-bottom{
width:970px; height:70px;
font-family:"メイリオ"; 
font-size:18px; 
text-align:center;
clear:left;
}

.calender-bottom table{
	background:#090;
	margin:0 auto;
	border-collapse:collapse;
}

.calender-bottom th{width:200px; height:30px; border: 1px solid #090;}
.calender-bottom td{width:200px; height:30px; background:#FFF; line-height:30px; border: 1px solid #090;}

#toggle-area {
	display:none;
	position:fixed;
	top:-20px;
	left:0px;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.6);
	z-index:100;
	}

#toggle-area dd{
width:980px;
height:1100px;
position:relative;
top:5%;
margin:0 auto;
background:rgba(233,233,233,0.9);
z-index:3;
text-align:center;
}

#toggle-area dt{
margin:none;
padding:none;
}

#toggle-area iframe{
margin:10px auto;
background:#FFFFFF;
text-align:center;
width:960px;
height:1000px;
}

#reserve{
width:370px; height:60px;
background:#33FF66;
font-size:24px;
text-align:center;
line-height:60px;
float:left;
margin:4px 5px;
font-weight:bold;
display:block;
cursor:pointer;
text-shadow:3px 1px 1px white;
border:5px solid #009900;
}

#reserve a{text-decoration:none; color:#003333; display:block;}

#tournament{
width:370px; height:60px;
background:#33FF66;
font-size:24px;
text-align:center;
line-height:60px;
float:right;
margin:4px 5px;
font-weight:bold;
display:block;
cursor:pointer;
text-shadow:3px 1px 1px white;
border:5px solid #009900;
}

#tournament a{text-decoration:none; color:#003333; display:block;}

.toggle-button{height:100px; display:block;}

#exit{
position:absolute;
display:block;
cursor:pointer;
color:#444444;
width:70px;
height:70px;
text-align:center;
background:#CCCCCC;
border:1px solid gray;
line-height:70px;
padding:20px 20px;
font-size:100px;
font-weight:900;
text-shadow:2px 2px 1px white;
margin:5px 20px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%; 
border-radius: 50%;
box-shadow:0px 3px 1px gray;
z-index:2;
top:-50px;
left:-60px;
}

#exit:hover{
top:-52px;
box-shadow:0px 5px 1px gray;
}

#exit:active{top:-47px; box-shadow:none;}

.menu{
	position:fixed;
	top:9%;
	right:0px;
	marigin:0 auto;
	width:160px;
	height:320px;
	z-index:10;
}

.menuWrapper{
	position:relative;
	width:160px;
	height:332px;
	margin:0 auto;
	 background:linear-gradient(180deg,rgba(0,102,51,1),rgba(0,102,51,0.8));
	 -webkit-border-radius:5px 5px;
-moz-border-radius:5px 5px ; 
border-radius: 5px 5px;
}
	
.menuBtn{
	width:160px;
	height: 40px;
	line-height: 45px;
	font-size: 14px;
	font-weight:bold;
	display:inline-block;
	color:white;
	font-family:"メイリオ";
	border-bottom:1px dotted #CCCCCC;
	cursor:pointer;
	   }
 
.menuBtn a{text-decoration:none; color:inherit; display:block}

}




@media screen and (max-width:480px){
body{
	margin:0px 0px; 
	text-align:center; 
	background:url(image/ft_court.jpg);
	background-size:cover;
	padding-top:19%;
	padding-bottom:15px;
	}



.timeline{
  width:380px;
  margin:0 auto;
  font-size:9px;
  font-family:"メイリオ";
  position:relative;
  }
 
.timeline table{
border:1px solid #CCC;
background:#BBBBBB;
border-collapse:collapse;
}

.timeline th{background:#66FF99; width:19px; font-size:6px; border:1px solid #CCC;}

.timeline td{text-align:center; padding:1px 2px; font-size:6px; border:1px solid #CCC;}


.legend{
	width: 380px;
	margin-left:0px;
	font-family: "メイリオ";
	text-align:left;
	font-size: 5px;
}


.legend ul{
	margin:0px 0px;
	padding:0px 0px;
	list-style:none;
}

.legend li{
	margin-left:0px;
	padding:0px 0px;
	list-style:none;
	}
.legend table{background:#006600;  margin:0 auto;}
.legend th{
	width: 20px;
	height: 10px;
}
.legend td{
	padding: 1px 3px;
	font-size: 8px;
}

.sat{color:#0000FF; font-weight:bold;}
.sun{color:#FF0000; font-weight:bold;}

.space{height:3px; background:linear-gradient(180deg,#66FF99,white); border:none;}



.fullbody{
width:98%;
height:auto;
text-align:center;
margin:0 auto;
background:#FFF;
}

.top{
width:100%;
height:180px;
text-align:center;
margin-bottom:10px;
position:relative;
background:url(image/futsal1.jpg);
background-size:100%;
}

#topSlide{
width:820px;
height:430px;
position:absolute;
}

#topSlide img{width:820px; height:430px; border:none;}


.top-logo{
	position: absolute;
	top: 0px;
	left: 0px;
	height: 180px;
	width: 40%;
	background: linear-gradient(90deg,rgba(0,128,0,0.7),rgba(0,128,0,0.0));
}

.top-logo h1{
	position: absolute;
	bottom: 4px;
	left: -33px;
	color: white;
	font-family: "メイリオ";
	font-size: 22px;
	text-shadow: 2px 2px 1px #222222;
	width: 211px;
	padding-left: 3px;

}

.logoIni{
	font-size: 60px;
	color: #006633;
	text-shadow: 1px 1px 1px white, -1px 1px 1px white, 1px -1px 1px white, -1px -1px 1px white;
	padding-right: 2px;
}


.topics{position:relative; }

.topics-right{
	width: 147px;
	height: 84px;
	float: right;
	margin-right: 10px;
	position: absolute;
	top: 108px;
	right: -6px;
	padding: 0px auto;
	text-align: right;
}

.topics-right img{
	width:90%;
	height:auto;
}

.topics table{text-align:center; background:#006600; margin-left:20px; font-size:13px; margin-bottom:20px;}

.topics th{background:#66FF99; padding:3px 10px;}
.topics td{padding:2px 10px; background:#FFFFFF}



.write-area h1{
font-size:18px;
background:#00CC66;
margin:0px 0px;
padding-left:8px;
color:#FFFFFF;
font-family:"メイリオ";
}

.write-area h2{
font-size:14px;
margin:0px 0px;
padding-left:8px;
padding-bottom:2px;
color:#FF0000;
font-family:"メイリオ";
}

.write-area{
width:96%;
height:auto;
text-align:left;
box-shadow:1px 1px 1px gray;
margin:10px auto;
padding-bottom:5px;
font-family:"メイリオ";
}

.write-area ul{
	margin:2px 2px;
	text-indent:0em;
	padding-left:1em;
font-size:11px;
top:0px;
font-family:"メイリオ";}

.write-area li{
margin:0px 2px;
margin-bottom: 5px;
margin-top:0px;
font-size:10px;
top:0px;
font-family:"メイリオ";}

.info li{color:#FF0000;}

.price table{text-align:center; background:#006600; margin-left:5px; font-size:9px;}
.price th{background:#66FF99; padding:2px 3px;}
.price td{padding:2px 2px; background:#FFFFFF}


.red{color:#FF0000;} .blue{color:#0000CC;}

.cxl {position:relative;}
.cxl table{text-align:center; background:#006600; margin:3px auto; font-size:12x;}
.cxl th{background:#66FF99; padding:3px 30px;}
.cxl td{padding:2px 10px; background:#FFFFFF;}

.cxl-at{
	margin:2px auto;
	width:97%;
	height:58px;
	color:#FF0000;
	background:#FFFF33;
	font-size:10px;
	padding:4px 4px;
}

#calender a{text-decoration:none;}
#calender {z-index:1; }


.calender-area{
	width: 100%;
	height: 140px;
	text-align: center;
	display: block;
	margin: 0 auto;
}

.calender-area a{
text-decoration:none;
color:#06C;

}

.calender-area a:visited {
text-decoration:none;
color:#06C;
}

.calender-area table{
display:inline;
margin:0px 1px; 
background:#999999;
border-collapse:collapse;

}

.calender-area th{
font-size:11px;
font-family:"メイリオ";
border:1px solid #CCC;
}

.calender-area td{
width:15px; 
height:15px;
line-height:15px;
font-family:"メイリオ";
font-size:11px;
text-align:center;
border:1px solid #CCC;
}

.calender-bottom{
width:100%; height:20px;
font-family:"メイリオ"; 
font-size:12px; 
text-align:center;
margin:5px auto;
display:inline-block;
clear:left;
}

.calender-bottom table{
	background:#090;
	margin:0 auto;
	border-collapse:collapse;
	
}

.calender-bottom th{
	width: 70px;
	height: 13px;
	border: 1px solid #090;
}
.calender-bottom td{ width:90px; height:13px; background:#FFF; line-height:13px; font-size:9px; border:1px solid #090;}



.toggle-button h1{display:none;}

#toggle-area {
	display:none;
	position:fixed;
	top:-20px;
	left:0px;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.6);
	z-index:100;
	}

#toggle-area dd{
width:100%;
height:500px;
position:relative;
top:20px;
margin:0 auto;
background:rgba(233,233,233,0.9);
z-index:3;
text-align:center;
}

#toggle-area dt{
margin:none;
padding:none;
}

#toggle-area iframe{
margin:3px auto;
background-color:#FFFFFF;
text-align:center;
width:99%;
height:480px;
}


#reserve{
width:97%; height:60px;
background:#33FF66;
font-size:24px;
text-align:center;
line-height:60px;
margin:4px auto;
font-weight:bold;
display:block;
cursor:pointer;
text-shadow:3px 1px 1px white;
border:5px solid #009900;
}

#reserve a{text-decoration:none; color:#003333; display:block;}

#tournament{
width:370px; height:60px;
background:#33FF66;
font-size:24px;
text-align:center;
line-height:60px;

margin:4px 5px;
font-weight:bold;
display:block;
cursor:pointer;
text-shadow:3px 1px 1px white;
border:5px solid #009900;
display:none;
}

#tournament a{text-decoration:none; color:#003333; display:block;}

.toggle-button{height:auto; display:block;}

#exit{
position:absolute;
display:block;
cursor:pointer;
color:#444444;
width:70px;
height:70px;
text-align:center;
background:#CCCCCC;
border:1px solid gray;
line-height:70px;
padding:20px 20px;
font-size:100px;
font-weight:900;
text-shadow:2px 2px 1px white;
margin:5px 20px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%; 
border-radius: 50%;
box-shadow:0px 3px 1px gray;
z-index:2;
top:-50px;
left:-60px;
}

#exit:hover{
top:-52px;
box-shadow:0px 5px 1px gray;
}

#exit:active{top:-47px; box-shadow:none;}	

.menu{
	position:fixed;
	bottom:25px;
	left:0px;
	marigin:0 auto;
	width:100%;
	height:45px;
	z-index:10;
}

.menuWrapper{
	position:relative;
	width:100%;
	height:45px;
		 background:linear-gradient(180deg,rgba(153,153,153,0.9),rgba(153,153,153,0.7));
	 -webkit-border-radius:5px 5px;
-moz-border-radius:5px 5px ; 
border-radius: 5px 5px;
}
	
.menuBtn{
	width:24%;
	height:20px ;
	line-height:22px;
	font-size:9px;
	font-weight:bold;
	display:inline-block;
	color:white;
	font-family:"メイリオ";
	border-bottom:1px dotted #CCCCCC;
	cursor:pointer;
	   }
 
.menuBtn a{text-decoration:none; color:inherit; display:block}

	
	
}