@charset "UTF-8";

h1,h2,h3,h4,h5,h6,p,ul,li,span{
	line-height: 1.5;
}
.jp-page-sa-detail:after{
  content:'';
  display:block;
  clear:both;
  height:0;
  overflow:hidden;
}


/* common
============================================================ */
#jp-page-sa-wrapper{
	background: #FFF;
	margin: 20px 0 0;
}
@media screen and (max-width: 767px){
	#jp-page-sa-wrapper{
		margin: 10px 0 0;
	}
}

/*- SNS
-----------------------------------------------------------------------*/
.jp-cmp-list-social-001 ul{
  margin: 10px auto 0;
  width: 200px;
}
@media screen and (max-width: 767px){
  .jp-cmp-list-social-001 ul{
    width: 18em;
  }
  .jp-cmp-list-social-001 li{
    border-right: 4px solid transparent;
    border-bottom: 0;
  }
}

/* layout
============================================================ */
h2{
	color: #344691;
	font-size: 30px;
	font-weight: bold;
	margin: 20px 0;
	text-align: center;
}
h3{
	background: #344691;
	color: #fff;
	font-size: 30px;
	font-weight: bold;
	padding: 10px 0 5px;
	text-align: center;
}
h2 span,
h3 span{
	display: block;
	font-weight: bold;
}

.jp-page-sa-content{
	padding: 0 0 10px;
	margin: 0 10px 10px;
}
.jp-page-sa-detail{
	border: 5px solid #344691;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	margin: 0 0 20px;
	padding: 20px;
	vertical-align: top;
}

.jp-page-sa-songtitle,
.jp-page-sa-songlist{
	display: table;
	font-size: 18px;
	width: 100%;
}
.jp-page-sa-songtitle .jp-page-sa-songname,
.jp-page-sa-songtitle .jp-page-sa-artist{
	background: #99ccff;
	border-bottom: 1px solid #fff;
	display: table-cell;
	font-weight: bold;
	padding: 5px;
	text-align: center;
	vertical-align: middle;
	width: 50%;
}
.jp-page-sa-songlist .jp-page-sa-songname,
.jp-page-sa-songlist .jp-page-sa-artist{
	background: #dcf2fb;
	border-bottom: 1px solid #fff;
	display: table-cell;
	padding: 5px;
	text-align: center;
	vertical-align: middle;
	width: 50%;
}
.jp-page-sa-songlist .jp-page-sa-songname,
.jp-page-sa-songtitle .jp-page-sa-songname{
	border-right: 1px solid #fff;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.jp-page-sa-songlist small{
	font-size: 14px;
	display: block;
}

.jp-page-sa-bnrarea-img{
	float: left;
	text-align: center;
	width: 20%;
}
.jp-page-sa-bnrarea-img img:last-child{ margin: 10px 0 0; }
.jp-page-sa-bnrarea-txt{
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	font-size: 18px;
	float: left;
	padding: 0 0 0 20px;
	width: 79%;
}
.jp-page-app-btn{
	margin: 50px 0 0;
	text-align: center;
}
.jp-page-app-btn a:last-child{ margin: 0 0 0 60px; }
.jp-page-sa-detail li{
	display: block;
	float: left;
	width: 49%;
}
.jp-page-sa-detail li img{ vertical-align: middle; }
.jp-page-sa-detail li img:last-child{ margin: 0 0 0 10px; }

/*ボタン*/
.jp-page-btn-wrapper a{
	border: 1px solid #3c5cc8;
	-webkit-border-radius: 10px;
	        border-radius: 10px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	background: rgb(208,217,248); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(208,217,248,1) 0%, rgba(65,103,230,1) 1%, rgba(63,99,221,1) 16%, rgba(55,88,195,1) 42%, rgba(52,81,181,1) 53%, rgba(52,80,179,1) 58%, rgba(50,78,175,1) 59%, rgba(47,73,166,1) 68%, rgba(42,67,149,1) 86%, rgba(41,64,142,1) 99%, rgba(60,92,201,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(208,217,248,1)), color-stop(1%,rgba(65,103,230,1)), color-stop(16%,rgba(63,99,221,1)), color-stop(42%,rgba(55,88,195,1)), color-stop(53%,rgba(52,81,181,1)), color-stop(58%,rgba(52,80,179,1)), color-stop(59%,rgba(50,78,175,1)), color-stop(68%,rgba(47,73,166,1)), color-stop(86%,rgba(42,67,149,1)), color-stop(99%,rgba(41,64,142,1)), color-stop(100%,rgba(60,92,201,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(208,217,248,1) 0%,rgba(65,103,230,1) 1%,rgba(63,99,221,1) 16%,rgba(55,88,195,1) 42%,rgba(52,81,181,1) 53%,rgba(52,80,179,1) 58%,rgba(50,78,175,1) 59%,rgba(47,73,166,1) 68%,rgba(42,67,149,1) 86%,rgba(41,64,142,1) 99%,rgba(60,92,201,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(208,217,248,1) 0%,rgba(65,103,230,1) 1%,rgba(63,99,221,1) 16%,rgba(55,88,195,1) 42%,rgba(52,81,181,1) 53%,rgba(52,80,179,1) 58%,rgba(50,78,175,1) 59%,rgba(47,73,166,1) 68%,rgba(42,67,149,1) 86%,rgba(41,64,142,1) 99%,rgba(60,92,201,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(208,217,248,1) 0%,rgba(65,103,230,1) 1%,rgba(63,99,221,1) 16%,rgba(55,88,195,1) 42%,rgba(52,81,181,1) 53%,rgba(52,80,179,1) 58%,rgba(50,78,175,1) 59%,rgba(47,73,166,1) 68%,rgba(42,67,149,1) 86%,rgba(41,64,142,1) 99%,rgba(60,92,201,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(208,217,248,1) 0%,rgba(65,103,230,1) 1%,rgba(63,99,221,1) 16%,rgba(55,88,195,1) 42%,rgba(52,81,181,1) 53%,rgba(52,80,179,1) 58%,rgba(50,78,175,1) 59%,rgba(47,73,166,1) 68%,rgba(42,67,149,1) 86%,rgba(41,64,142,1) 99%,rgba(60,92,201,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0d9f8', endColorstr='#3c5cc9',GradientType=0 ); /* IE6-9 */
	display: block;
	font-size: 18px;
	padding: 10px;
	text-align: center;
	/*vertical-align: top;*/
}
.jp-page-btn-wrapper a span{
	color: #FFF;
	display: inline-block;
	font-weight: bold;
	font-size: 24px;
	vertical-align: top;
	margin: 0 0 0 20px;
	padding: 10px 0 0;
}

@media screen and (max-width: 767px) {
	h2{
		font-size: 18px;
		margin: 10px;
	}
	h3{
		font-size: 16px;
		padding: 5px 5px 2px;
	}
	h2 span,
	h3 span{
		display: inline;
		font-weight: bold;
	}

	.jp-page-sa-detail{
		border: 3px solid #344691;
		margin: 0 0 10px;
		padding: 10px;
	}

	.jp-page-sa-songtitle,
	.jp-page-sa-songlist{
		display: block;
		font-size: 14px;
	}
	.jp-page-sa-songtitle{ background: #99ccff; }
	.jp-page-sa-songtitle .jp-page-sa-songname,
	.jp-page-sa-songtitle .jp-page-sa-artist{
		background: #99ccff;
		border-bottom: 0;
		display: inline-block;
		padding: 5px 0;
		text-align: left;
		vertical-align: middle;
		width: auto;
	}
	.jp-page-sa-songtitle .jp-page-sa-songname{ padding: 0 0 0 5px; }
	.jp-page-sa-songtitle .jp-page-sa-artist::before,
	.jp-page-sa-songlist .jp-page-sa-artist::before{
		content: "/";
		color: #000;
		padding: 0 0.5rem 0 0;
	}
	.jp-page-sa-songlist .jp-page-sa-songname,
	.jp-page-sa-songlist .jp-page-sa-artist{
		background: transparent;
		border-bottom: 0;
		display: inline;
		padding: 1rem 5px 0 0;
		text-align: left;
		width: auto;
	}
	.jp-page-sa-songlist .jp-page-sa-songname,
	.jp-page-sa-songtitle .jp-page-sa-songname{ border-right: 0; }
	.jp-page-sa-songlist small{ display: inline; }
	.jp-page-sa-bnrarea-img img:last-child{ display: none; }
	.jp-page-sa-bnrarea-txt{
		font-size: 14px;
		padding: 0 0 0 10px;
	}
	.jp-page-app-btn{ margin: 10px 0 0; }
	.jp-page-app-btn a{ display: block; }
	.jp-page-app-btn a img{ height: 40px; }
	.jp-page-app-btn a:last-child{ margin: 10px 0 0 0; }
	.jp-page-sa-detail li{
		display: block;
		float: none;
		text-align: center;
		width: 100%;
	}
	.jp-page-sa-detail li:last-child{ margin: 10px 0 0; }
	.jp-page-sa-detail li img{ vertical-align: middle; }
	.jp-page-sa-detail li img{ display: none; }
	.jp-page-sa-detail li img:last-child{ margin: 0; display: inline-block; }

	.jp-page-btn-wrapper a{ padding: 10px; }
	.jp-page-btn-wrapper a img{
		height: 30px;
		vertical-align: middle;
	}
	.jp-page-btn-wrapper a span{
		color: #FFF;
		display: inline-block;
		font-weight: bold;
		font-size: 16px;
		line-height: 1rem;
		margin: 0 0 0 10px;
		padding: 0;
		vertical-align: middle;
	}
}