@charset "UTF-8";
/* CSS Document */
heder{
	width: 100%;
	height: auto;
	float: left;
	display: flex;
	left:0;
	top:0;
		
	
}

.top h1{
	width:100%;
	height: auto;
	float: left;
	box-sizing: border-box;
	font-size:16pt;
}


div.campany_box {
	width: 100%;
	margin:0;
	height: auto;
	float: left;
	padding:2px;
	box-sizing:border-box;
	background: whitesmoke;
	
}
.inc_logo {
	width:20%;
	hiehght:auto;
	float: left;

}
div.content_one{
width:100%;
height:auto;
float:left;
margin-bottom:30px;
}



div.content_arena {
	width:100%;
	height:auto;
	float: left;
	background:none;
}


.content_area_list{
	width:100%;
	height:auto;
	display: flex;
	justify-content:center;
	
}

.vr_cotent {
	width:100%;
	height: auto;
	padding:2px;
	display: flex;
	justify-content: center;
	box-sizing:content-box;
}
.sum{
	width:100%;
	height:auto;
	float: left;      
}


  .button-image {
	width:30%;
	border: none;
    cursor: pointer;
        }


        .video-container {
            position: relative;
            width: 100%;
            height: 100%;
        }

        video {
            width: 100%;
            height: 100%;
        }



.volume-control {
    position:absolute;
    left: 40px; /* 画面右端に固定 */
    bottom: 33%; /* 画面の高さ中央付近に配置 */
    display: flex;
    flex-direction: row; /* スライダーを右側に表示するため横並びに */
    align-items: center;
    z-index: 900; /* 必要に応じて他の要素より前面に表示 */
}

#volume-button {
	background: white;
	padding:3px;
	box-sizing: border-box;
	border-radius: 7px;
    cursor: pointer;
    font-size: 24px; /* アイコンのサイズを調整 */
}

#volume-slider {
    -webkit-appearance: slider-vertical; /* Safari 用 */
    writing-mode: bt-lr; /* Firefox 用 */
    width: 20px;
    height: 100px; /* スライダーの高さを調整 */
    display: none; /* 初期状態で非表示 */
    margin-left: 5px; /* スライダーとアイコンの間にスペースを追加 */
}


.box_desight p a{
	color:white;
	text-decoration: none;
}



/*1201px */
@media(min-width: 1201px) {
	
.top h1{
	width:100%;
	height: auto;
	float: left;
	box-sizing: border-box;
	padding-left: 2em;
	font-size:16pt;
}
	
	
ul.tabnav {
width: 100%;
height: auto;
background: none;
padding: 0px;
display:flex;
justify-content: center;
}

ul.tabnav li{
width: 33%;
font-size: 90%;
height: auto;
font-weight: bold;
line-height: 2.3em;
backgroun:orange;
list-style-type: none;
text-align: center;
border-bottom: none;
}

ul.tabnav li a:link{
width: 100%;
background: none;
color: black;
text-decoration: none;
font-weight: bold;
line-height: 3em;
display: block;
}

ul.tabnav li a:active {
background: none;
}
ul.tabnav li a:hover {
background: none;
color: black;
}

ul#tabnav li a:visited{
background: none;
}
ul.tabnav li a{
color: black;

}
#exp1 ul.tabnav .selected{
background: white;
border-bottom: none;
}

	
	

	
}


	
@media(min-width: 1025px) and (max-width: 1200px){

.top h1{
	width:100%;
	height: auto;
	float: left;
	box-sizing: border-box;
	padding-left: 2em;
	font-size:16pt;
}
	
div.info_area {
width: 100%;
height: auto;
float: left;
background: whitesmoke;
}


div.tabs {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
background: none;
}


#exp1 ul.tabnav .selected{
background: white;
border-top: 5px solid orange;
font-weight: bold;
color: black;
}

	
	
li#tableft {
width: 33%;
font-size: 100%;
height: auto;
line-height: 3em;
background: white;
list-style-type: none;
float: left;
color:black;
display: flex;
justify-content: center;
text-align:center;
}

	
ul.tabnav {
width: 100%;
height: auto;
background: none;
padding: 0px;
display:flex;
justify-content: center;
}

ul.tabnav li{
width: 33%;
font-size: 90%;
height: auto;
font-weight: bold;
line-height: 2.3em;
background: orange;
list-style-type: none;
text-align: center;
border-bottom: none;
}

ul.tabnav li a:link{
width: 100%;
background: none;
color: black;
text-decoration: none;
font-weight: bold;
line-height: 3em;
display: block;
}

ul.tabnav li a:active {
background: none;
}
ul.tabnav li a:hover {
background: none;
color: black;
}

ul#tabnav li a:visited{
background: none;
}
ul.tabnav li a{
color: black;

}
#exp1 ul.tabnav .selected{
background: white;
border-bottom: none;
}

	
	


div.arena p{
width: 100%;
height: auto;
font-size: 90%;
background: none;
text-align: center;
margin:0;
}


p#leag{
width: 100%;
background: none;
font-size: 100%;
float: left;
border: none;
display: inline;
text-align: center;
color: black;
font-weight: bold;
}



p#count{
width: 100%;
color: black;
font-size: 80%;
text-align: right;
float: left;
line-height: 5em;
background: none;
}




div#first {
width: 100%;
height: auto;
float: left;
}

div#second {
width: 100%;
height: auto;
background: none;
float: left;
}

div#third{
width: 100%;
height: auto;
background: none;
float: left;
	}

div#forth {
width: 100%;
height: auto;
background: white;
padding: 20px 0px;
float: left;
}




p#link {
width: 40%;
text-align: center;
margin: 30px auto;
background: orange;
clear: both;
line-height: 2em;
text-align: center; 
border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */  
}





}


/*781px */
@media(min-width: 781px) and (max-width: 1024px){
	
.top h1{
	width:100%;
	height: auto;
	float: left;
	box-sizing: border-box;
	padding-left: 1em;
	font-size:16pt;
}

div.info_area {
width: 100%;
height: auto;
float: left;
background: whitesmoke;
}


li#tableft {
width: 33%;
font-size: 100%;
height: auto;
line-height: 3em;
background: white;
list-style-type: none;
float: left;
color:black;
display: flex;
justify-content: center;
text-align:center;
}
	
	
div.tabs {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
background: none;
}


#exp1 ul.tabnav .selected{
background: white;
border-top: 5px solid orange;
font-weight: bold;
color: black;
}


div.tabs {
width: 100%;
height: auto;
float: left;
background: white;
}

ul.tabnav {
width: 100%;
height: auto;
background: none;
padding: 0px;
display:flex;
justify-content: center;
}

ul.tabnav li{
width: 33%;
font-size: 90%;
height: auto;
font-weight: bold;
line-height: 2.3em;
background: orange;
list-style-type: none;
text-align: center;
border-bottom: none;
}

ul.tabnav li a:link{
width: 100%;
background: none;
color: black;
text-decoration: none;
font-weight: bold;
line-height: 3em;
display: block;
}

ul.tabnav li a:active {
background: none;
}
ul.tabnav li a:hover {
background: none;
color: black;
}

ul#tabnav li a:visited{
background: none;
}
ul.tabnav li a{
color: black;

}
#exp1 ul.tabnav .selected{
background: white;
border-bottom: none;
}

	

div.arena p{
width: 100%;
height: auto;
font-size: 90%;
background: none;
text-align: center;
margin:0;
}


p#leag{
width: 100%;
background: none;
font-size: 100%;
float: left;
border: none;
display: inline;
text-align: center;
color: black;
font-weight: bold;
}



p#count{
width: 100%;
color: black;
font-size: 80%;
text-align: right;
float: left;
line-height: 5em;
background: none;
}

	
.charm-image {
width: 100%;
height: auto;
float: left;
margin-top: 10px;
}
span.text-desigh{
width: 100%;
height: auto;
display: block;
margin: 10px auto;
font-weight: bold;
font-size: 26pt;
color: red;
text-align: center;
}

	
	
}


/*521px-780px*/
@media(min-width: 521px) and (max-width: 780px){
	
.top h1{
	width:100%;
	height: auto;
	float: left;
	box-sizing: border-box;
	padding-left: 1em;
	font-size:16pt;
}
div.info_area {
width: 100%;
height: auto;
float: left;
background: whitesmoke;
}


div.tabs {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
background: none;
}

li#tableft {
width: 33%;
font-size: 100%;
height: auto;
line-height: 3em;
background: white;
list-style-type: none;
float: left;
color:black;
display: flex;
justify-content: center;
text-align:center;
}
	

#exp1 ul.tabnav .selected{
background: white;
border-top: 5px solid orange;
font-weight: bold;
color: black;
}

ul.tabnav {
width: 100%;
height: auto;
background: none;
padding: 0px;
display:flex;
justify-content: center;
}

ul.tabnav li{
width: 33%;
font-size: 90%;
height: auto;
font-weight: bold;
line-height: 2.3em;
background: orange;
list-style-type: none;
text-align: center;
border-bottom: none;
}

ul.tabnav li a:link{
width: 100%;
background: none;
color: black;
text-decoration: none;
font-weight: bold;
line-height: 3em;
display: block;
}

ul.tabnav li a:active {
background: none;
}
ul.tabnav li a:hover {
background: none;
color: black;
}

ul#tabnav li a:visited{
background: none;
}
ul.tabnav li a{
color: black;

}
#exp1 ul.tabnav .selected{
background: white;
border-bottom: none;
}


div.arena p{
width: 100%;
height: auto;
font-size: 90%;
background: none;
text-align: center;
margin:0;
}


p#leag{
width: 100%;
background: none;
font-size: 100%;
float: left;
border: none;
display: inline;
text-align: center;
color: black;
font-weight: bold;
}



p#count{
width: 100%;
color: black;
font-size: 80%;
text-align: right;
float: left;
line-height: 5em;
background: none;
}


div.league{
width: 80%;
height: auto;
display: block;
margin: 50px auto;
background: none;
}


div.guide {
width: 100%;
height: auto;
float: left;
background: none;
padding: 10px 0;
margin: 10px auto;
text-align: center;
}


div#first {
width: 100%;
height: auto;
float: left;
}

div#second {
width: 100%;
height: auto;
background: none;
float: left;
}

div#third{
width: 100%;
height: auto;
background: none;
float: left;
	}

div#forth {
width: 100%;
height: auto;
background: white;
padding: 20px 0px;
float: left;
}



p#link {
width: 40%;
text-align: center;
margin: 30px auto;
background: orange;
clear: both;
line-height: 2em;
text-align: center; 
border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */  
}



div.left{
width: 95%;
height:auto;
display: block;
margin: 0 auto;
background: none;
}

div.left dl{
width: 30%;
height: auto;
float: left;
background: none;
}

div.arena-region ul {
width: 50%;
height: auto;
float: left;
background: none;
list-style: none;
}

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


div.arena-region ul li a{
color: white;
}


div.arena-region ul li.katsushika{
width: 50%;
height: 100%;
background: url(https://vidaland.net/image/regin2.png);
background-size: 100%;
background-position: center;
background-repeat:no-repeat;
font-size: 180%;
line-height: 5em;
display: inline-block;
vertical-align: bottom;
text-align: center;
padding: 50px 0px;
color: black;
font-weight: bold;
float: left;

}


div.arena-region ul li.kawasaki{
width: 50%;
height: 100%;
background: url(https://vidaland.net/image/regin1.png);
background-size: 100%;
background-position: center;
background-repeat:no-repeat;
font-size: 180%;
line-height: 5em;
display: inline-block;
vertical-align: bottom;
text-align: center;
padding: 50px 0px;
color: black;
font-weight: bold;

}

div.arena-region ul li.staff-site {
width: 100%;
height: 100%;
background: url(https://vidaland.net/image/staff-site.png);
background-size: 100%;
background-position: center;
background-repeat:no-repeat;
font-size: 180%;
line-height: 5em;
display: inline-block;
vertical-align: bottom;
text-align: center;
padding: 50px 0px;
color: black;
font-weight: bold;
}

}


/*520px*/
@media(min-width: 381px) and  (max-width : 520px) {


.top h1{
	width:100%;
	height: auto;
	float: left;
	box-sizing: border-box;
	padding-left: 0.5em;
	font-size:16pt;
}
	
div.info_area {
width: 100%;
height: auto;
float: left;
background: white;
margin-bottom: 10px;
}


div.tabs {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
background: none;
}

ul.tabnav {
width: 100%;
height: auto;
background: none;
padding: 0px;
display:flex;
justify-content: center;
}

ul.tabnav li{
width: 33%;
font-size: 90%;
height: auto;
font-weight: bold;
line-height: 2.3em;
background: orange;
list-style-type: none;
text-align: center;
border-bottom: none;
}

ul.tabnav li a:link{
width: 100%;
background: none;
color: black;
text-decoration: none;
font-weight: bold;
line-height: 3em;
display: block;
}

ul.tabnav li a:active {
background: none;
}
ul.tabnav li a:hover {
background: none;
color: black;
}

ul#tabnav li a:visited{
background: none;
}
ul.tabnav li a{
color: black;

}
#exp1 ul.tabnav .selected{
background: white;
border-bottom: none;
}

	
	

span.btn {
width: 33%;
height: auto;
font-size:3vw;
float: left;
text-align: center;
background: none;
display:flex;
justify-content: center;

}


div.arena p{
width: 100%;
height: auto;
font-size: 90%;
background: none;
text-align: center;
margin:0;
}


p#leag{
width: 100%;
background: none;
font-size: 100%;
float: left;
border: none;
display: inline;
text-align: center;
color: black;
font-weight: bold;
}
/*========  PR-LINE	*/



ul#pr-content {
width: 100%;
height: auto;
float: left;
}

.line-image {
width: 80%;
height: auto;
display: block;
margin: 20px auto;
}



/*	----------------------instagram-----------*/

div.instagram {
width: 100%;
height: auto;
background: wheat;
padding: 10px 0px;
margin: 10px auto;
clear: both;
}

div.instagram p{
font-size: 120%;
font-weight: bold;
line-height: 3em;
color: black;
text-align: center;
}



/* league list */
span.leaguelist {
	width: 100%;
	height: auto;
	background: lightyellow;
	padding: 3px;
	margin: 2px;
	border-sizing: border-box;
}


	
}



/*380px*/
	
@media(min-width: 351px) and (max-width :380px) {
		
.top h1{
	width:100%;
	height: auto;
	float: left;
	box-sizing: border-box;
	padding-left: 0.5em;
	font-size:16pt;
}
	
div.info_area {
width: 100%;
height: auto;
float: left;
background: none;
margin-bottom: 10px;
}


li#tableft {
width: 33%;
font-size: 100%;
height: auto;
line-height: 3em;
background: white;
list-style-type: none;
float: left;
color:black;
display: flex;
justify-content: center;
text-align:center;
}
		
		
div.tabs {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
background: none;
}

ul.tabnav {
width: 100%;
height: auto;
background: none;
padding: 0px;
display:flex;
justify-content: center;
}

ul.tabnav li{
width: 33%;
font-size: 90%;
height: auto;
font-weight: bold;
line-height: 2.3em;
background: orange;
list-style-type: none;
text-align: center;
border-bottom: none;
}

ul.tabnav li a:link{
width: 100%;
background: none;
color: black;
text-decoration: none;
font-weight: bold;
line-height: 3em;
display: block;
}

ul.tabnav li a:active {
background: none;
}
ul.tabnav li a:hover {
background: none;
color: black;
}

ul#tabnav li a:visited{
background: none;
}
ul.tabnav li a{
color: black;

}
#exp1 ul.tabnav .selected{
background: white;
border-bottom: none;
}

	
span.btn {
width: 33%;
height: auto;
font-size:3vw;
float: left;
text-align: center;
background: none;
display:flex;
justify-content: center;

}


div.arena p{
width: 100%;
height: auto;
font-size: 90%;
background: none;
text-align: center;
margin:0;
}


p#leag{
width: 100%;
background: none;
font-size: 100%;
float: left;
border: none;
display: inline;
text-align: center;
color: black;
font-weight: bold;
}

}

	
/*350px*/
	
	@media(min-width: 321px) and (max-width :350px) {
		
.top h1{
	width:100%;
	height: auto;
	float: left;
	box-sizing: border-box;
	padding-left: 0.5em;
	font-size:16pt;
}
		
		
ul.tabnav {
width: 100%;
height: auto;
background: none;
padding: 0px;
display:flex;
justify-content: center;
}

ul.tabnav li{
width: 33%;
font-size: 90%;
height: auto;
font-weight: bold;
line-height: 2.3em;
background: orange;
list-style-type: none;
text-align: center;
border-bottom: none;
}

ul.tabnav li a:link{
width: 100%;
background: none;
color: black;
text-decoration: none;
font-weight: bold;
line-height: 3em;
display: block;
}

ul.tabnav li a:active {
background: none;
}
ul.tabnav li a:hover {
background: none;
color: black;
}

ul#tabnav li a:visited{
background: none;
}
ul.tabnav li a{
color: black;

}
#exp1 ul.tabnav .selected{
background: white;
border-bottom: none;
}

		
}


/*320px*/
@media screen and (max-width : 320px) {

	
.top h1{
	width:100%;
	height: auto;
	float: left;
	box-sizing: border-box;
	padding-left: 0.5em;
	font-size:16pt;
}
	
ul.tabnav {
width: 100%;
height: auto;
background: none;
padding: 0px;
display:flex;
justify-content: center;
}

ul.tabnav li{
width: 33%;
font-size: 90%;
height: auto;
font-weight: bold;
line-height: 2.3em;
background: orange;
list-style-type: none;
text-align: center;
border-bottom: none;
}

ul.tabnav li a:link{
width: 100%;
background: none;
color: black;
text-decoration: none;
font-weight: bold;
line-height: 3em;
display: block;
}

ul.tabnav li a:active {
background: none;
}
ul.tabnav li a:hover {
background: none;
color: black;
}

ul#tabnav li a:visited{
background: none;
}
ul.tabnav li a{
color: black;

}
#exp1 ul.tabnav .selected{
background: white;
border-bottom: none;
}

}




/*----------------------	アリーナフットサル概要--------------------*/


div.info_area {
width: 100%;
height: auto;
float: left;
border-top: 2px solid black;
}


div.tabs {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
background: none;
}


#exp1 ul.tabnav .selected{
background: black;
border-top: 1px solid orange;
font-weight: bold;
color: white;
}


div.tabs {
width: 100%;
height: auto;
float: left;
background: none;
}

ul.tabnav {
width: 100%;
height: auto;
background: none;
padding: 0px 3px;
box-sizing: border-box;
float: left;
border-bottom:3px solid white;

}

li.tabpoint{
width: 33%;
font-size: 100%;
height: auto;
line-height: 1em;
background: white;
list-style-type: none;
float: left;
display: flex;
justify-content: center;
text-align:center;
border-right: 1px solid black;
}

li#tableft {
width: 33%;
font-size: 100%;
height: auto;
line-height: 1em;
background: white;
list-style-type: none;
float: left;
color:black;
display: flex;
justify-content: center;
text-align:center;
}

ul.tabnav li a{
text-decoration: none;
	color: black;
}


ul.tabnav li.selected {
  background: black;
}

ul.tabnav li a:link{
width: 99%;
background: none;
font-weight: bold;
color: black;
line-height: 2em;
display:flex;
justify-content: center;
display: block;
}


ul.tabnav li a:visited{
background: black;
}


ul.tabnav li a:hover {
background: white;
color: black;
}



ul.tabnav li a:active {
	/*クリックした瞬間*/
background: none;
}


/* 共通事項　*/

div#first
{
background: black;
	color: white;
	padding:20px;
	box-sizing: border-box;
}

div#second {
background: black;
color: white;
padding:20px;
box-sizing: border-box;
}


div#third{
background: black;
	color: white;
	padding:20px;
	box-sizing: border-box;
	}





/* footer */
.footer {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: #f0f0f0;
}

.footer-left,
.footer-center,
.footer-right {
  margin-bottom: 20px;
}

.footer-logo {
  max-width: 40%;
  height: auto;
}

.footer-center ul,
.footer-right ul {
  list-style: none;
  padding: 0;
}

.footer-center ul li,
.footer-right ul li {
  margin-bottom: 5px;
}

.footer-center ul li a,
.footer-right ul li a {
  text-decoration: none;
  color: #000;
}

@media (min-width: 781px) {
	
.top h1{
	width:100%;
	height: auto;
	float: left;
	box-sizing: border-box;
	padding-left: 1em;
	font-size:16pt;
}
	
	
  .footer {
    flex-direction: row;
    justify-content: space-between;
  }

  .footer-left,
  .footer-center,
  .footer-right {
    flex: 1;
    margin-bottom: 0;
  }
}