@charset "UTF-8";
/* CSS Document */

/* ================================================== 
header 
================================================== */ 

#hdr {
position: relative;
background: url(../img/topbg.jpg) no-repeat;
background-position: 35% 20%;
background-size: cover;
height: 800px;
}

#hdr .hdrInner{
position: absolute;
left: 400px;
top: 110px;
width: 390px;
}


#hdr h1{
margin-bottom: 35px;
}

#hdr .programInfo{
font-size: 1.2rem;
font-weight: bold;
line-height: 1.5;
margin-bottom: 40px;
}

#hdr .djName{
font-size: 1.2rem;
line-height: 1.3;
margin-bottom: 40px;
}

#hdr .djName span{
font-size: 2.8rem;
font-weight: bold;
}

#hdr .twWidget{
width: 300px;
height: 100%;
background-color:rgba(165,32,171,0.5);
background-image: radial-gradient(rgba(0,0,0,0.3) 10%, transparent 20%), radial-gradient(rgba(0,0,0,0.3) 10%, transparent 20%);
background-size: 6px 6px;
background-position: 0 0, 9px 8px;
}


@media screen and (max-width:640px){
#hdr {
position: relative;
background-position: 55% 20%;
background-size: cover;
height: 650px;
}

#hdr .hdrInner{
position: absolute;
left:40px;
top: 70px;
width: 390px;
}

#hdr .djName{
font-size: 1.6rem;
margin-bottom: 20px;
}

#hdr .djName span{
font-size: 3.5rem;
}

#hdr .programInfo{
font-size: 2rem;
margin-top: 20px;
margin-bottom: 0;
}

.SPtwCover h2{
font-size: 2.5rem;
padding: 80px 0 40px;
text-align: center;
}

.SPtwCover{
background: #000000;
padding: 50px;
}

.SPtwWidget{
height: 100%;
margin: 0 auto;
background-color:rgba(165,32,171,0.5);
background-image: radial-gradient(rgba(0,0,0,0.3) 10%, transparent 20%), radial-gradient(rgba(0,0,0,0.3) 10%, transparent 20%);
background-size: 6px 6px;
background-position: 0 0, 9px 8px;
}

.twBtn{
background: #a600ac;
width: 100%;
padding: 20px 50px;
}

.twSlide{
display: block;
color: #fff!important;
font-size: 2.5rem;
background-image: url(../img/icon_tw.png),url(../img/arrow.png);
background-position:left center , right center;
background-repeat:  no-repeat,no-repeat;
padding-left: 50px;
}

.twBtn:hover{
cursor: pointer;
}

.slideAreaTW{
display: none;
}

}




/* ================================================== 
facebookCnt 
================================================== */ 

#facebookCnt{
background: #0F0920;
text-align: center;
padding-bottom: 80px;
display: block;
}

#facebookCnt h2{
font-size: 2.5rem;
padding: 80px 0 40px;
}

#facebookCnt div,fb-page{
	width: 800px;
	margin: 0 auto;
}

@media screen and (max-width:640px){
#facebookCnt{
display: none;
padding-top: 50px;
}

.fbBtn{
background: #110820;
width: 100%;
padding: 20px 50px;
}

.fbSlide{
display: block;
color: #fff!important;
font-size: 2.5rem;
background-image: url(../img/icon_fb.png),url(../img/arrow.png);
background-position:left center , right center;
background-repeat:  no-repeat,no-repeat;
padding-left: 50px;
}

.fbBtn:hover{
cursor: pointer;
}

}

/* ================================================== 
instagramCnt 
================================================== */ 

#instagramCnt{
background: #291173;
text-align: center;
padding-bottom: 80px;
}

#instagramCnt h2{
font-size: 2.5rem;
padding: 80px 0 40px;
}

#instagramCnt .instaCover{
max-width: 960px;
margin: 0 auto;
}

#instagramCnt ul{
	letter-spacing: -0.45rem;
}

#instagramCnt li{
	letter-spacing: normal;
	width: 20%;
	height: auto;
	vertical-align: top;
	display: inline-block;
	margin: 0 5% 5% 0;
}

#instagramCnt li:nth-child(4n),
#instagramCnt li:nth-child(8n){
	margin: 0 0 5% 0;
}

#instagramCnt li a{
	display: block;
}
#instagramCnt li a:hover{
	background: #000;
}

#instagramCnt .moreBtn{
border: 1px solid #291173;
background: #DDDA00;
color: #291173;
font-weight: bold;
display: inline-block;
padding: 20px 50px;
}

#instagramCnt .moreBtn:hover{
border: 1px solid #DEDC00;
background: #281275;
color: #DEDC00;
}

#instagramCnt img{
width: 100%;
height: auto;
}

@media screen and (max-width:640px){
#instagramCnt .instaCover{
width: 90%;
margin: 0 auto;
}


#instagramCnt li{
	width: 46%;
	height: auto;
	vertical-align: top;
	display: inline-block;
	margin: 0 2% 5%;
}

#instagramCnt li:nth-child(2n),
#instagramCnt li:nth-child(8n){
	margin: 0 2% 5%;
}

#instagramCnt .moreBtn{
font-size: 1.8rem;
margin-top: 50px;
padding: 20px 70px;
}
}

/* ================================================== 
holiday 
================================================== */ 

.holiday_sp {
	display: none;
}
.holiday_pc {
	text-align: center;
	padding: 20px 0;
	background: #0F0920;	
}

.holiday_pc img {
	max-width: 900px;
	margin: 0px auto;
}	

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

.holiday_pc {
	display: none;
}
.holiday_sp {
	display: block;
	text-align: center;
	padding: 20px 0;
	background: #0F0920;
}
.holiday_sp img {
	max-width: 90%;
	margin: 0px auto;
}	

}