@charset "UTF-8";
@import url("_common/basic.css");


/***** common settings *****/

#head-board {
	position: relative;
}

.hb-item {
	position: absolute;
	left: 0px;
	top: 0px;
}

#yt-pane {
	background: #cecece none;
	color: #000000;
}

#yt-pane h2 {
	margin-bottom: 10px;
}

#yt-pane h2 img {
	height: 43px;
}

#yt-pane-internal {
	padding: 10px;
}

#music-contents-pane {
	border: #1db954 1px solid;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

#music-contents-pane h2 {
	background: #1db954 none;
	padding: 10px;
	margin-bottom: 24px;
}

#music-contents-pane h2 img {
	height: 43px;
}


/***** for phones (< 768px) *****/

@media only screen and (max-width:767px)
{
	h1 {
		margin-bottom: 12px;
	}
	
	#head-board {
		margin-bottom: 15px;
	}
	
	#head-board img {
		max-width: 100%;
	}
	
	#head-menu {
		display: block;
		padding: 0px 12px 0px 6px;
		margin-bottom: 12px;
	}
	
	#head-menu li {
		padding: 0px 0px 6px 6px;
		width: 33%;
		width: calc(100% / 3 - 6px);
	}
	
	#head-menu img {
		width: 96px;
		width: 100%;
	}
	
	#fgnNewsIndex {
		margin-bottom: 24px;
	}
	
	#fgnNewsIndex h2 {
		margin-left: 12px;
	}
	
	#tw-pane {
		padding: 0px 12px;
		margin-bottom: 12px;
	}
	
	#yt-pane {
		margin: 0px 12px;
	}
	
	#yt-pane h2 img {
		height: 31px;
	}
	
	#yt-frame {
		width: 100%;
		height: 202px;
	}
	
	#ft-pane {
		padding: 0px 12px;
	}
	
	#music-contents-pane {
		margin: 0px 12px;
		margin-bottom: 12px;
	}
	
	#music-contents-pane h2 img {
		height: 31px;
	}
	
	#music-contents-pane iframe {
		width: 100%;
		height: 320px;
	}
	
	#sp-pane-fsp {
		margin-bottom: 1em;
	}
}


/***** for tablets (< 1024px) *****/

@media only screen and (min-width:768px) and (max-width:1023px)
{
	#head-board {
		width: 640px;
		margin: 0px auto;
		margin-bottom: 30px;
	}
	
	#fgnNewsIndex {
		width: 640px;
		margin: 0px auto;
		margin-bottom: 30px;
	}
	
	#tw-pane {
		width: 640px;
		margin: 0px auto;
		margin-bottom: 30px;
	}
	
	#imported-panes {
		width: 640px;
		margin: 0px auto;
	}
	
	#yt-pane {
		width: 312px;
		height: 570px;
		margin-bottom: 30px;
		float: left;
	}
	
	#yt-frame {
		width: 100%;
		height: 164px;
	}
	
	#ft-pane {
		width: 312px;
		margin-top: -20px;
		margin-bottom: 30px;
		float: right;
	}
	
	#music-contents-pane {
		clear: both;
		margin-bottom: 30px;
	}
	
	#music-contents-pane iframe {
		width: 312px;
		height: 320px;
	}
	
	#sp-pane-fsp {
		float: left;
	}
	
	#sp-pane-nm {
		float: right;
	}
}


/***** for PC (>= 1024px) *****/

@media only screen and (min-width:1024px)
{
	#docHead {
		margin-bottom: 0px;
	}
	
	#docBody {
		position: relative;
		width: 1063px;
		margin: 0px auto;
	}
	
	/*h1 {
		margin-left: 0px;
	}*/
	
	#head-board {
		width: 640px;
		margin-bottom: 15px;
	}
	
	#fgnNewsIndex {
		position: relative;
		left: 0px;
		top: 0px;
		width: auto;
		margin-bottom: 20px;
	}
	
	#tw-pane {
		position: absolute;
		left: 655px;
		top: 99px;
		width: 408px;
	}
	
	#imported-panes {
		clear: both;
	}
	
	#yt-pane {
		width: 340px;
		height: 573px;
		float: left;
		border-radius: 5px;
	}
	
	#yt-frame {
		width: 100%;
		height: 191px;
	}
	
	#ft-pane {
		width: 340px;
		float: right;
		margin-top: -20px;
	}
	
	#music-contents-pane {
		width: 340px;
		margin: 0px auto;
		margin-top: 5px;
	}
	
	#music-contents-pane iframe {
		width: 100%;
		height: 280px;
	}
}