@charset "UTF-8";

/*
	キャンペーンページスタイルシート
*/

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

/* キャンペーンボックス */
div#box_campaign {
	margin: 0 calc(50% - 980px / 2) 0;
}

/* キャンペーンボックス上部 */
div#box_canpaign_content_top {
	border: 1px #e6e6e6 solid;
	margin-top: 20px;
	padding: 10px 0;
}

/* キャンペーンボックス中間 */
div#box_canpaign_content_middle {
	padding: 14px 14px 0 14px;
	border-right: 1px #e6e6e6 solid;
	border-left: 1px #e6e6e6 solid;
}

/* キャンペーンボックス下部 */
div#box_canpaign_content_bottom {
	height: 27px;
	border: 1px #e6e6e6 solid;
	border-top: none;
	margin-bottom: 25px;
}

/* キャンペーンタイトルアイコン */
img#icon_campaign_title {
	margin-left: 14px;
	margin-right: 8px;
}

/* キャンペーンタイトル文字 */
div#campaign_title_text {
	width: 80%;
	word-break: break-all;
	word-wrap: break-word;
}

/* キャンペーン概要ボックス上部 */
div#box_campaign_summary_top {
	height: 25px;
	border-bottom: 1px #e6e6e6 solid;
	margin: 27px 0 13px;
}
#box_campaign_summary_bottom p {
	word-break: break-all;
}

/* キャンペーンボックス中間 */
div#box_canpaign_content_middle_no_title {
	padding: 14px 14px 0 14px;
	border-right: 1px #e6e6e6 solid;
	border-left: 1px #e6e6e6 solid;
	border-top:1px #e6e6e6 solid;
	margin-top:10px;
}

.zero_font {
	font-size: 0;
}

.info_text {
	font-size: 9pt;
}


.link_text {
	text-align: center;
	font-size: 9pt;
}

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

/* 対象楽曲ボックス上部 */
div#box_target_music_top {
	height: 25px;
	margin: 38px 0 0;
	padding-bottom: 3px;
	border-bottom: 1px #e6e6e6 solid;
}

/* 対象楽曲ボックス中間 */
div#box_target_music_middle {
	font-size: 0;
}

/* 対象楽曲ブロック */
div.target_music_block {
	width: 50%;
	margin: 14px 0;
	display: inline-block;
	vertical-align: top;
}

/* 対象楽曲サムネイルボックス */
div.box_target_music_thumbnil {
	width: 40%;
	display: inline-block;
	vertical-align: top;
}

/* 対象楽曲サムネイル */
div.target_music_thumbnil {
	margin-left: 10px;
	position: relative;
	top: 0;
	left: 0;
	max-height: 135px;
	max-width: 180px;
}

/* 対象楽曲情報（2列表示用） */
div.target_music_info_row2 {
	width: 53%;
	width: -webkit-calc(60% - 5px * 2);
	width: calc(60% - 5px * 2);
	word-break: break-all;
	word-wrap: break-word;
	font-size: 9.75pt;
	margin: 0 5px;
	display: inline-block;
	vertical-align: top;
}

/* 対象楽曲情報（1列表示用） */
div.target_music_info_row1 {
	width: 64%;
	word-break: break-all;
	word-wrap: break-word;
	font-size: 9.75pt;
	margin: 0 5px;
	display: none;
	vertical-align: top;
	color: #000000;
}

/* 対象楽曲情報（1列表示用） */
div.target_music_button_row1 {
	width: 100%;
	word-break: break-all;
	word-wrap: break-word;
	font-size: 9.75pt;
	margin: 10px 8px;
	display: none;
	vertical-align: top;
	color: #000000;
}

/* 対象楽曲無し */
div.target_music_none {
	width: 93%;
	width: -webkit-calc(100% - 5px * 2);
	width: calc(100% - 5px * 2);
	word-break: break-all;
	word-wrap: break-word;
	font-size: 9.75pt;
	color: #ff0000;
	margin: 0 5px;
	display: inline-block;
	vertical-align: top;
}

/* 対象楽曲ブロックライン（2列表示用） */
div.target_music_block_line_row2 {
	border-bottom: 1px #e6e6e6 solid;
	width: 100%;
	display: inline-block;
	vertical-align: top;
}

/* 対象楽曲ブロックライン（1列表示用） */
div.target_music_block_line_row1 {
	border-bottom: 1px #e6e6e6 solid;
	width: 100%;
	display: none;
	vertical-align: top;
}

/* サムネイル上アイコン */
div.thumbnil_icon {
	position: absolute;
	top: 0;
	left: 0;
	max-height: 135px;
	max-width: 180px;
}

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

/* その他キャンペーンボックス */
div#box_other_campaign {
	margin: 0 calc(50% - 980px / 2) 0;
}
div#box_other_campaign_2 {
	margin: 0 calc(50% - 980px / 2) 0;
}
.camp_banner_box {
    margin-bottom: 25px;
    padding-left: 4px;
    border-width: medium 1px 1px;
    border-style: none solid none;
    border-color: #E6E6E6;
    -moz-use-text-color: #E6E6E6;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    font-size: 0px;
}

.camp_banner_box_2 {
    margin-bottom: 25px;
    padding-left: 4px;
    font-size: 0px;
}

/* その他キャンペーンボックス上部 */
div#box_other_campaign_top {
	height: 44px;
	line-height: 44px;
	padding-left: 13px;
	border: 1px #e6e6e6 solid;
}

/* その他キャンペーンボックス下部 */
div#box_other_campaign_bottom {
	margin-bottom: 25px;
	padding-left: 4px;
	border: 1px #e6e6e6 solid;
	border-top: none;
	font-size: 0;
}

/* その他キャンペーンブロック */
div.other_campaign_block {
	width: 48%;
	margin: 13px 1%;
	display: inline-block;
	vertical-align: top;
}

/* その他キャンペーン画像 */
div.other_campaign_img {
	max-height: 96px;
	max-width: 466px;
	overflow:hidden;
}

/* 汎用項目 */
.camp_box {
	margin: 1em auto 0;
}

.camp_box h3 {
	border-left: 6px #323030 solid;
	font-size: 1.3em;
	line-height: 1.2em;
	font-weight: bold;
	padding-left: 6px;
	vertical-align: top;
}

.camp_box hr {
	border-bottom: 1px solid #e6e6e6;
	width: 100%;
	padding-bottom: 10px;
}

.camp_box p {
	margin:1em auto 0;
}

.camp_box p span {
	font-size:1.2em;
}

.camp_box ul {
	margin:1em auto;
}

.camp_box ul li {
	line-height:1.8em;
	list-style-type: none;
}

/* SNSボタン */
#sns {
	margin:10px auto;
}

#sns > ul {
	display: block;
	font-size: 0;
	text-align: center;
	overflow: hidden;
}

#sns > ul > li {
	display: inline-block;
	margin: 0;
	padding: 5px;
	overflow: hidden;
	vertical-align: bottom;
}

#sns > ul > .twitter > a {
	display:inline-block;
	width:40px;
	height:40px;
	text-align:center;
	background:url(../img/ico-social-twitter-001.png) no-repeat;
	background-size:40px;
}

#sns > ul > .facebook > a {
	display:inline-block;
	width:40px;
	height:40px;
	background:url(../img/ico-social-facebook-001.png) no-repeat;
	background-size:40px;
}

#sns > ul > .mixi > a {
	display:inline-block;
	width:40px;
	height:40px;
	text-align:center;
	background:url(../img/ico-social-mixi-001.png) no-repeat;
	background-size:40px;
}

/* SNSリンク　マウスオーバー */
#sns > ul > li a:hover {
	position: relative;
	top: -3px;
	left: -3px;
	box-shadow: 3px 3px 0 0 rgba(230, 230, 230, 0.7);
	border-radius:6px;
}

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

/*-----------------------------------------------------------
	 画面サイズが1015px以下
		1.楽曲情報ボックス左右マージン変更
		2.お知らせボックス左右マージン変更
-----------------------------------------------------------*/
@media screen and (max-width: 1015px) {
	/*----*/
	/* 1. */
	/*----*/
	/* キャンペーンボックス */
	div#box_campaign {
		margin: 0 10px;
	}

	/* その他キャンペーンボックス */
	div#box_other_campaign {
		margin: 0 10px;
	}
	div#box_other_campaign_2 {
		margin: 0 10px;
	}
}

/*-----------------------------------------------------------
	画面サイズが768px以下
		1.対象楽曲2列 -> 1列表示変更
		2.その他キャンペーンブロック2列 -> 1列表示変更
-----------------------------------------------------------*/
@media screen and (max-width: 768px) {
	/*----*/
	/* 1. */
	/*----*/
	/* 対象楽曲ブロック */
	div.target_music_block {
		width: 100%;
	}

	/* 対象楽曲サムネイルボックス */
	div.box_target_music_thumbnil {
		width: 100%;
		display: block;
	}

	/* 対象楽曲サムネイル */
	div.target_music_thumbnil {
		width: 30%;
		display: inline-block;
	}

	/* 対象楽曲情報（2列表示用） */
	div.target_music_info_row2 {
		display: none;
	}

	/* 対象楽曲情報（1列表示用） */
	div.target_music_info_row1 {
		display: inline-block;
	}

	/* 対象楽曲情報（1列表示用） */
	div.target_music_button_row1 {
		display: inline-block;
	}

	/* 対象楽曲ブロックライン（2列表示用） */
	div.target_music_block_line_row2 {
		display: none;
	}

	/* 対象楽曲ブロックライン（1列表示用） */
	div.target_music_block_line_row1 {
		display: inline-block;
	}

	/*----*/
	/* 2. */
	/*----*/
	/* その他キャンペーンボックス下部 */
	div#box_other_campaign_bottom {
		padding: 0 13px;
	}

	/* その他キャンペーンブロック */
	div.other_campaign_block {
		width: 466px;
		margin: 13px auto;
		display: block;
	}
}

/*-----------------------------------------------------------
	画面サイズが530px以下
		1.その他キャンペーンブロック1列縮小表示変更
-----------------------------------------------------------*/
@media screen and (max-width: 530px) {
	/*----*/
	/* 1. */
	/*----*/
	/* その他キャンペーンブロック */
	div.other_campaign_block {
		width: 100%;
		margin: 13px 0;
	}
}

/*-----------------------------------------------------------
	画面サイズが480px以下
		1.対象楽曲情報1列表示時の回り込み防止（-6%）
-----------------------------------------------------------*/
@media screen and (max-width: 480px) {
	/*----*/
	/* 1. */
	/*----*/
	/* 対象楽曲情報（1列表示用） */
	div.target_music_info_row1 {
		width: 58%;
	}

	/* 対象楽曲情報（1列表示用） */
	div.target_music_button_row1 {
		width: 100%;
	}

}

@media screen and (max-width: 480px) {
/*SNS　LINEボタンスマホのみ表示*/
	#sns > ul > .line > a{
		display:inline-block;
		width:40px;
		height:40px;
		background:url(../img/ico-social-line-001.png) no-repeat;
		background-size:40px;
	}
}

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

/*------------------------------*/
/* サムネイルをずらし影を付ける */
/*------------------------------*/
div.box_target_music_thumbnil:hover div.target_music_thumbnil {
	position: relative;
	top: -5px;
	left: -5px;
	box-shadow: 5px 5px 0 0 rgba(230, 230, 230, 0.7);
}