@charset "utf-8";

/*//////////////////////////////////////////////////////////

	index
	movie

//////////////////////////////////////////////////////////*/


/*=========================================================

	index

==========================================================*/

#mainimage{
	position: relative;
}
#mainimage span.mainimage-logo{
	position: absolute;
	top: 40%;
	right: 50px;
	display:none;
}

#whats{
	padding: 100px 0;
	background: #F1F4F7;
}
#whats .layout{
	text-align: center;
}
#whats h2{
	font-size: 200%;
	color: #1565c0;
	margin-bottom: 30px;
}

.club-list{
	margin-top: 50px;
}
.club-list h3{
	font-size: 130%;
	color: #537494;
	margin-bottom: 15px;
}
.club-list table{
	background: #fff;
}
.club-list table th,
.club-list table td{
	padding: 15px;
	border: 1px solid #fff;
}

.club-list table thead th{
	text-align: center;
	font-weight: 700;
	background: #c9d4df;
}

.club-list table tr.area{
	background: #dae2ea;
}
.club-list table tbody th{
	font-weight: 700;
}

#news{
	padding: 100px 0;
}
#news h2{
	text-align: center;
	font-size: 200%;
	margin-bottom: 30px;
}
#news ul{
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
}
#news ul li{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}
#news ul li div.news-thumb{
	margin-bottom: 5px;
}
#news ul li span{
	color: #777;
}
#news p{
	text-align: center;
	margin-top: 50px;
}
#news p a{
	display: inline-block;
	line-height: 50px;
	color: #fff;
	padding: 0 50px;
	border-radius: 25px;
	background: #333;
}


@media screen and (min-width: 737px){ /* PC */
	#whats .layout{
		text-align: center;
		width: 800px;
	}
	
	.club-list table{
		display: block;
		overflow-y: scroll;
		width: 100%;
		height: 400px;
	}
	.club-list table thead th{
		position: sticky;
		top: 0;
		z-index: 1;
	}
	.club-list table thead th:first-child{
		width: 120px;
	}
	.club-list table thead th:nth-child(2){
		width: 416px;
	}
	.club-list table thead th:last-child{
		width: 260px;
	}
	
	#news ul{
		gap: 30px 15px;
	}
	#news ul li{
		width: calc(33.33% - 10px);
	}
	#news ul li div.news-thumb{
		overflow: hidden;
		height: 210px;
	}
}

@media screen and (max-width: 736px){ /* SP */
	#mainimage span.mainimage-logo{
		position: absolute;
		top: 40%;
		right: 30px;
		display:none;
		width: 40%;
	}
	
	.club-list table{
		display: block;
		overflow-y: scroll;
		width: 100%;
		height: 350px;
	}
	
	.club-list table thead{
		display: none;
	}
	.club-list table th,
	.club-list table td{
		display: block;
	}
	
	.club-list table tbody tr.club-name th{
		padding: 15px 15px 0 15px;
		border-top: 1px solid #F1F4F7;
	}
	
	.club-list table tbody td::before{
		content: attr(data-label);
		display: block;
		font-weight: 700;
		color: #537494;
	}
	.club-list table tbody td{
		padding: 10px 15px 0 15px;
	}
	.club-list table tbody td:last-child{
		padding-bottom: 15px;
	}
	
	#whats,
	#news{
		padding: 70px 0;
	}
	
	#news ul{
		gap: 30px 0px;
	}
}




/*=========================================================

	movie

==========================================================*/

p.movie-introduction{
	text-align: center;
}

@media screen and (min-width: 737px){ /* PC */
	p.movie-introduction{
		margin: 0 100px;
	}
}

@media screen and (max-width: 736px){ /* SP */
	
}