@charset "UTF-8";

body {
	color: #000000;
	background-image: url("./img/bg.jpg");
	background-repeat: repeat-x;
	background-position:bottom;
	background-attachment: fixed;
	margin:0;
	font-family:vl gothic,meiryo
}

.b_box {
	background-color: #ffffff;
	margin-left: auto;
	margin-right: auto;
	border-radius: 10px;
	margin-bottom: 10px;
}

.intro {
	margin:0;
	text-align:center;
}

/* ###### navigation ###### */
.header h1 {
	margin:0;
	}
#sub-nav {
	background-color: #ddff81;
	}
	
.fixed {
      position: fixed;
      top: 0px;//一番上なら0pxに指定してください
      z-index: 1;
      width: 100%;
    }

/* ### navigation end ### */
.n {
	text-align:right;
	}

.yokan {
	background-color:#EECCEE;
	text-align:center;
	margin: 10px 0 0 0;
	}

/* ### footer ### */
.footer {
	float:left;
	width:100%;
	padding-top: 5px;
	padding-bottom:5px;
	background-color:#CCEECC;
	margin:0;
	text-align:center;
	}
/* ### footer end ### */

/* ### caption ### */
.caption {
	background-color:rgba(240,200,180,0.65);
	color:#221133;
	padding-bottom:25px;
	border-radius:10px;
	margin-bottom: 5px;
	}

.c_title {
	border-bottom: solid 2px #FF4500;
	margin: 0 20px 0 20px;
	text-align: left;
	font-size:1.2em;
	}

.c_artist {
	margin: 0 20px 10px 0;
	text-align: right;
	}

/* ### caption end ### */
img {
	max-width:100%
}

.sound {
	display:table-cell;
	vertical-align:middle;
	text-align:center}
	
.imgbox, .sound, .caption, .footer {
	display:none
	}
/* ######600px未満###### */
@media (max-width:599px) {
.imgbox, .sound, .caption {
		margin-right:10px;
		margin-left:10px;
		text-align:center;
		}

		
/*トグルボタン*/
	#menubtn {
		padding : 6px 12px;
		border:solid 1px #aaaaaa;
		border-radius:5px;
		background-color:#ffffff;
		position: absolute;
		top: 5px;
		right: 15px;
		cursor: pointer
		}
		
	#menubtn:hover{
		background-color: #dddddd}

	#menubtn:focus{
		outline: none}

	#menubtn i	{
		color: #888888;
		font-size: 30px}

	#menubtn span{
		display: inline-block;
		text-indent: -9999px}

/* ナビゲーションメニュー（縦並び） */
	.menu	{display: none}

	.menu ul	{margin: 0;
		padding: 0;
		list-style: none}

	.menu li a	{display: block;
		padding: 5px;
		color: #000000;
		font-size: 14px;
		text-decoration: none}

	.menu li a:hover	{background-color: #f5b8ea}
}


/* ######600px以上960px未満###### */
@media (min-width:600px) and (max-width:959px) {
	.imgbox {
		float:left;
		width:100%;
		text-align:center;
		}
		
	.sound {float:left;width:49%}
	.caption {float:right;width:49%}
	
	/* トグルボタン */
	#menubtn	{display: none}

	/* ナビゲーション */
	#menu	{display: none}
}

/* ######960px以上###### */
@media (min-width:960px) {
	.imgbox {
		float:left;
		width:100%;
		text-align:center;
	}
	
	.sound {float:left;width:49%}
	.caption {float:right;width:49%}
	
	.head, .body {
		width:960px;
		margin-right:auto;
		margin-left:auto
	}
	
	/* トグルボタン */
	#menubtn	{display: none}

	/* ナビゲーション */
	#menu	{display: none}
}