@charset "utf-8";
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	
body{
background-color: #191919;
}
	
.flex {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
	-webkit-justify-content: space-between;
	justify-content: space-between;
	flex-wrap:wrap;
}

.flex_wrap_center {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:wrap;
	-webkit-justify-content: center;
	justify-content: center;
}

.flex_wrap_end {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:wrap;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

.clearfix:after {
	content:" ";
	display:block;
	clear:both;
}

.sp{
display: none;
}

img{
max-width: 100%;
}

#gnav{
width: 100%;
background: #000000;
position: fixed;
top: 0;
left: 0;
z-index:9999
}

#gnav ul{
width: 80%;
margin:0 10% 10px
}

#gnav ul li{
width: 12%;
text-align: center;
}

#gnav ul li a{
padding: 20px 0 10px;
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
display: block;
position: relative;
line-height: 1.5
}

#gnav ul li a::before {
  background: #FFFFFF;
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}

#gnav ul li a:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}
 

#mv{
margin-top: 50px;
width: 100%;
min-height:500px; 
background-image: url("../img/mv_bg.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: relative;
}

#mv h1{
padding: 100px 0;
margin:0 auto;
text-align: center
	}
	

#wrapper {
width: 100%;
}

#wrapper h2{
padding: 50px 0 30px;
margin: 0 auto;
color: #FFFFFF;
font-size:36px;
font-weight:bold;
text-align: center
}

#lead p{
font-size:20px;
padding: 40px 0 40px;
font-weight:bold;
color: #CCCCCC;
text-align: center;
line-height: 2;
}

#lead .catch{
font-size:56px;
padding: 50px 0 40px;
}

#lead .social{
margin-bottom: 50px
}

.social li{
padding: 20px;
}

#news {
width: 100%;
background-image: url("../img/news_bg.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

#news h2{
color: #CCCCCC;
}

#news .news_list{
max-width: 96%;
margin: 40px auto 0;
}

#news .news_list li{
width: 24%;
margin-bottom: 60px;
}

#news .news_list li h3{
text-align: center;
color:#000000;
font-size:24px;
font-weight:bold;
padding: 10px 0;
line-height: 1.5;
}

#news .news_list{
max-width: 1280px;
}

#news .news_list li p{
text-align: center;
color:#000000;
font-size:20px;
font-weight:bold;
line-height: 1.5;
}

#news .news_list li a{
text-decoration: none
}

#news .news_list li a:hover img{
opacity: 0.8
}

#news .news_list li .more {
display: block;
margin: 10px;
padding: 10px;
background: #000000;
color: #FFFFFF;
text-align: center;
font-weight:bold;
text-decoration: none;
}

#news .news_list li a:hover .more{
background: #666666;
text-decoration: none
}

#news .news_list li.twitter{
width:48%;
}

#member .cnt{
background: #000000;
}

#member .cnt div{
width: 480px;
padding:40px 20px;
}

#member .cnt div p{
color: #FFFFFF;
font-size:16px;
font-weight:bold;
line-height: 1.5;
margin-bottom: 20px;
}

#sponsor .lead{
width: 100%;
padding: 50px 0;
background-image: url("../img/sponsor_bg.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

#sponsor .lead h3{
font-size:28px;
font-weight:bold;
max-width: 780px;
margin: 0 auto 30px;
color: #FFFFFF;
line-height: 1.5;
}

#sponsor .lead p{
font-size:16px;
font-weight:bold;
max-width: 780px;
margin: 0 auto 20px;
color: #FFFFFF;
line-height: 1.5
}

#sponsor .lead .btn {
margin: 30px auto 0;
max-width: 780px;
}

#sponsor .lead .btn a{
padding:10px 30px;
background:rgb(204, 14, 100);
line-height: 1;
color: #FFFFFF;
text-align: center;
font-weight:bold;
text-decoration: none;
}

#sponsor .sponsor_cnt {
margin: 0;
line-height: 0;
}

#sponsor .sponsor_cnt .img_box, #sponsor .sponsor_cnt .text{
width: 50%;
}

#sponsor .sponsor_cnt .img_box img{
width: 100%
}

#sponsor .sponsor_cnt .text{
  display:table;
  padding: 50px;
}

#sponsor .sponsor_cnt .text div{
  display:table-cell;
  vertical-align:middle;
}

#sponsor .sponsor_cnt .text h3{
color: #FFFFFF;
font-size: 28px;
line-height: 1.5;
margin-bottom: 20px;
font-weight:bold;
}

#sponsor .sponsor_cnt .text p{
color: #CCCCCC;
font-size: 16px;
line-height: 1.5;
font-weight:bold;
margin-bottom: 20px;
}

#access .map iframe{
 width:100%;
 height:400px;
}

#about dl{
max-width: 980px;
margin: 0 auto 40px;
font-size: 16px;
font-weight: bold;
color: #CCCCCC;
}

#about dt{
border-bottom: 1px solid #CCCCCC;
width: 30%;
padding: 20px 10px;
}

#about dd{
border-bottom: 1px solid #CCCCCC;
width: 70%;
padding: 20px 10px;
}

#link{
background: #FFFFFF
}

#wrapper #link h2{
background: #000000;
color: #FFFFFF;
margin-bottom: 20px;
padding: 20px;
font-size: 28px;
}

#link ul{
max-width: 980px;
margin: 0 auto 40px;
font-size: 16px;
font-weight: bold;
color: #CCCCCC;
text-align: center
}

#link ul li{
margin-bottom: 20px;
}

#link ul li p{
padding: 10px 0;
}

#wrapper #contact{
padding-bottom: 30px;
}

#wrapper #contact h2{
background: #000000;
color: #FFFFFF;
padding: 20px;
margin-bottom: 20px;
font-size: 28px;
}

#wrapper #contact p{
font-size:20px;
font-weight:bold;
max-width: 980px;
margin: 40px auto;
color: #FFFFFF;
line-height: 1.5
}

footer{
background: #000000;
padding: 30px;
text-align: center;
color: #FFFFFF;
font-size:14px;
}

@media screen and (max-width: 1480px) {
#gnav ul{
width: 94%;
margin:0 3% 10px
}
}

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

#gnav ul{
width: 100%;
margin: 0 0 10px;
}

#gnav ul li a{
font-size:14px;
}

#news .news_list{
max-width: 94%;
}

#news .news_list li h3{
font-size:18px;
}

#news .news_list li p{
font-size:16px;
}

}

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

#gnav ul li{
width: 24%;
}

#gnav ul li:nth-child(5),#gnav ul li:nth-child(6),#gnav ul li:nth-child(7){
width: 33%;
}

#gnav ul li a{
font-size:14px;
}

#mv h1{
padding:100px 50px 50px;
	}

#news .news_list{
max-width: 94%;
}

#news .news_list li h3{
font-size:18px;
}

#news .news_list li p{
font-size:16px;
}

#member .cnt div{
width: 50%;
}

#sponsor .sponsor_cnt .img_box, #sponsor .sponsor_cnt .text{
width: 96%;
max-width: 875px;
margin: 0 auto 20px
}

#sponsor .sponsor_cnt .img_box.sp{
display: block
}

#sponsor .sponsor_cnt .img_box.pc{
display: none
}

#sponsor .sponsor_cnt .text{
padding: 0;
}

#sponsor .lead h3{
width: 94%;
max-width: 875px;
}

#sponsor .lead p{
max-width: 875px;
width: 94%;
}

#sponsor .lead .btn {
margin: 20px auto;
max-width: 875px;
width: 94%;
}


#about dl {
max-width: 94%;
}

#wrapper #link h2 {
line-height: 1.5;
}

#wrapper #link h2 .sp{
display: block;
}

#link ul{
max-width: 94%;
}

#wrapper #contact p{
max-width: 94%;
}

}

@media screen and (max-width: 768px) {
.sp{
display: block;
}

.pc{
display: none;
}

#gnav ul li:nth-child(1){
width: 18%;
}

#gnav ul li:nth-child(2),#gnav ul li:nth-child(4){
width: 24%;
}

#gnav ul li:nth-child(3){
width: 28%;
}

#mv{
min-height: auto;
}

#mv h1{
padding:100px 50px 50px;
	}
	
#wrapper h2{
padding: 40px 0 20px;
font-size:28px;
}
	
#lead p{
font-size:16px;
text-align: left;
max-width: 94%;
margin: 0 auto;
padding: 0;
}

#lead .catch{
font-size:28px;
padding: 30px 0 20px;
text-align: center
}

#lead .social{
margin-bottom:10px
}

#news {
background-image: url("../img/news_bg.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size:auto 50%;
}

#news .news_list{
margin-top: 20px
}

#news .news_list li{
width:48%;
}

#news .news_list li h3{
font-size:16px;
}

#news .news_list li p{
font-size:14px
}

#news .news_list li.twitter{
width:100%;
}

#member .cnt div{
width: 94%;
margin: 0 auto 20px;
padding:0;
}

#member .cnt div p{
color: #FFFFFF;
font-size:16px;
font-weight:bold;
line-height: 1.5;
margin-bottom: 20px;
}

#sponsor .lead{
background-image: none;
background-color: #000000
}

#sponsor .lead{
padding: 20px 0;
}

#sponsor .lead h3{
font-size:20px;
}

#sponsor .lead p{
font-size:14px;
}

#sponsor .sponsor_cnt .text h3{
font-size: 24px;
}

#sponsor .sponsor_cnt .text p{
font-size: 16px;
}

#about dl{
font-size:14px
}

#about dt{
width: 35%;
}

#about dd{
width: 65%;
padding: 20px 0;
}

#wrapper #link h2{
font-size: 24px;
}

#link ul li{
width: 48%;
margin-bottom: 10px
}


#wrapper #contact{
padding-bottom: 20px;
}

#wrapper #contact h2{
font-size: 24px;
}

#wrapper #contact p{
font-size:16px;
}


}