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

/*-------------------------------------
INDEX
01. 全体背景
02. MV背景
03. 作品タイトルロゴ - 表示位置Y座標
04. 作品タイトルロゴ - フェードイン方向・動く距離
05. キャッチフレーズ - 表示位置・サイズ
06. キャッチフレーズ - フェードイン方向・動く距離
07. MV内リリース情報
08. 共通見出し
09. 共通テキストリンク
10. 共通ボタン
11. ショップボタン
12. リード＆デモ
13. トラックリスト
14. リリース情報＆会場限定グッズ
15. スタッフリスト
16. バナー コードコピー領域のカラー
17. フッター（copyright表記）
18. その他追加あれば足すエリア
-------------------------------------*/



/*====================================================================
01. 全体背景
※背景色は基本的に白または黒文字が読める色を指定
※背景画像は基本的には縦リピートなので変更したい場合はプロパティを追加
※暗い色・画像にする場合は文字色などを全体的に上書き指定すること
====================================================================*/
body {
	background-color: #fff;
	background-image: url('../img/bg_page.jpg');

}



/*====================================================================
02. MV背景
====================================================================*/
/* 背景：最大幅より外側の画像に乗るカラーフィルター */
#header { background-color: #fff; }

/* 背景：最大幅より外側の画像　※基本的には変更しない */
#header::before { background-image: url('../img/mv_base.jpg'); }



/*====================================================================
03. 作品タイトルロゴ - 表示位置Y座標
====================================================================*/
/* PC表示時 */
#logo_title { top: 5%;
left: 5%; }

/* スマフォ表示時 */
@media screen and (max-width: 640px) {
	#logo_title { top: 58%; }
}


/*====================================================================
04. 作品タイトルロゴ - フェードイン方向・動く距離
※フェードイン方向を変更する場合は以下を参照のこと
-------------
■下から： translate3d(0, 6%, 0) ※PC：6%／スマフォ：18% ｜ デフォルト
■上から： translate3d(0, -6%, 0) ※PC：-6%／スマフォ：-18%
■左から： translate3d(-4%, 0, 0)
■右から： translate3d(4%, 0, 0)
====================================================================*/
/* PC表示時 */
#logo_title strong {
	-webkit-transform: translate3d(0, 6%, 0);
	        transform: translate3d(0, 6%, 0);
}

/* スマフォ表示時 */
@media screen and (max-width: 640px) {
	#logo_title strong {
		-webkit-transform: translate3d(0, 18%, 0);
		        transform: translate3d(0, 18%, 0);
	}
}



/*====================================================================
05. キャッチフレーズ - 表示位置・サイズ
====================================================================*/
/* PC表示時 */
.catch {
	top: 8%; /* Y座標 */
	right: 47%; /* X座標　※左端から指定の場合は left:1.8% に */
	height: 55%; /* サイズ　※画面高さ基準で設定 */
}

/* スマフォ表示時 */
@media screen and (max-width: 640px) {
	.catch {
		top: auto;
		bottom: 5%; /* 画面下からの距離　※会場特典が無い場合は値を2%に（リリース情報とのバランス次第で変更） */
		left: 3%; /* ※PC表示で左端から指定した場合は left:auto に */
		right: auto; /* ※PC表示で左端から指定した場合は right:3% に */
		height: auto;
	}
}



/*====================================================================
06. キャッチフレーズ - フェードイン方向・動く距離
※フェードイン方向を変更する場合は以下を参照のこと
-------------
■下から： translate3d(0, 6%, 0)
■上から： translate3d(0, -6%, 0) ※PC表示デフォルト
■左から： translate3d(-6%, 0, 0) ※スマフォ表示デフォルト
■右から： translate3d(6%, 0, 0)
====================================================================*/
/* PC表示時 */
.catch {
	-webkit-transform: translate3d(0, -6%, 0);
	        transform: translate3d(0, -6%, 0);
}

/* スマフォ表示時 */
@media screen and (max-width: 640px) {
	.catch {
		-webkit-transform: translate3d(-6%, 0, 0);
		        transform: translate3d(-6%, 0, 0);
	}
}



/*====================================================================
07. MV内リリース情報
====================================================================*/
/* ブロック全体の背景 */
.releaseEvent { background-color: #330083; }

/* イベント名テキストカラー */
.releaseEvent h3 { color: #fde500; }

/* イベント詳細 */
.releaseEvent .releaseDetail {
	color: #fff;
}
.releaseEvent .releaseDetail .eventSpace {
	border-color: rgba(255, 255, 255, 0.5); /* 境界線カラー */
}

/* 会場特典 */
.releaseEvent .link_spgift {
	background-color: #fde500;
	color: #e8006b;
}
.releaseEvent .link_spgift .icon {
	fill: #e8006b; /* 矢印アイコン色 */
}



/*====================================================================
08. 共通見出し
====================================================================*/
.area_common h2 {
	color: #FD0000;
}



/*====================================================================
09. 共通テキストリンク
※CREATORSのサークルリンクも基本的にはここで指定した色になる
====================================================================*/
a:link, a:visited { color: #e8006b; }
a:hover, a:active { color: #00aaa8; }



/*====================================================================
10. 共通ボタン
====================================================================*/
a.btn {
	background-color: #fde500;
	color: #111;
}



/*====================================================================
11. ショップボタン
※統一色にする場合はアクティブ化して指定
====================================================================*/
/*
#area_info .btnset_shop .btn {
	background-color: #e8006b;
	color: #fff;
}
*/



/*====================================================================
12. リード＆デモ
※基本色はフッターと揃える（透明度を設定する場合はrgba指定）
※一部文字色など変える場合は適宜spanタグ等で追加設定
====================================================================*/
#area_leadbox .innerArea {
	background-color: rgba(30, 27, 116, 0.8); /* ブロック背景色 */
	color: #fff; /* 本文文字色 */
}
@media screen and (max-width: 640px) {
	#area_leadbox .innerArea {
		background-color: rgba(30, 27, 116, 0.8); /* ブロック背景色（スマフォ表示時）※半透明解除 */
	}
}

/* デモの見出しカラー　※変更する場合はアクティブ化して指定 */
/*
#area_leadbox #demo h2 { color: #e8006b; }
*/



/*====================================================================
13. トラックリスト
====================================================================*/
/* トラック番号 */
.list_track li .num { color: #FFFC00; } /* 1桁目（一の位） */
.list_track li .num::first-letter { color: #FFFFFF; } /* 2桁目（十の位） */

/* トラックタイトル */
.list_track li .title_track { color: #fff; }

/* 原曲表示 */
.list_track li .original { color: #e8006b; }

/* スタッフクレジット表示の見出し */
.list_track li dl dt { color: #00aaa8; }

/* スタッフクレジット */
.list_track li dl dd { color: #FFFFFF; }

/* 境界線 */
.list_track, .list_track li { border-color: #ddd; }



/*====================================================================
14. リリース情報＆会場限定グッズ
====================================================================*/
/* エリア背景 */
#area_info { background-color: #20096E; 
	filter:alpha(opacity=0.93);
	-moz-opacity: 0.93;
	opacity: 0.93;
}

/* 見出しテキスト（デフォルト：白） */
#area_info .sect_common h2 { color: #fff; }

/* テーブル見出し背景色 */
.list_info dl dt { background-color: #3A208E; }

/* 会場限定グッズ - 全体 */
#spGoods dl dt {
	border-color: #00aaa8; /* テーブル見出し横境界線カラー */
	color: #1C6967; /* テーブル見出しテキストカラー */
}
#spGoods dl dt .txt_sub {
	color: #00aaa8; /* テーブル見出しサブテキストカラー */
}
#spGoods .price .num::before {
	background-color: #fde500; /* 価格表示マーカー */
}

/* 会場限定グッズ - キャッチフレーズテキスト */
#spGoods .heading .attr_heading { color: #111; }
#spGoods .heading .main_heading { color: #e8006b; }

/* 会場限定グッズ - おススメラベル */
.label_recommend .labelRecommend_base { fill: #00aaa8; }
.label_recommend .labelRecommend_text { fill: #fff; }

/* 会場限定グッズ - セット毎のブロック */
.container_goodsVar { background-color: #ececec; }

/* 会場限定グッズ - セット毎のカラーカスタマイズ　※idは任意で設定 */
#setA h4 .txt_emp { color: #f54c01; }
#setB h4 .txt_emp { color: #039ad9; }



/*====================================================================
15. スタッフリスト
====================================================================*/
/* スタッフ名 */
.list_staff .sect_creator .block_prof .name { color: #fff; }

/* 担当ラベルカラー設定 */
#area_creators .original {  background-color: #111; }
#area_creators .arrange {   background-color: #e8006b; }
#area_creators .produce {   background-color: #fde500; color: #111; }
#area_creators .vocal {     background-color: #00aaa8; }
#area_creators .lyrics {    background-color: #71b700; }
#area_creators .mastering { background-color: #836bea; }
#area_creators .illust {    background-color: #ff8e66; }
#area_creators .movie {     background-color: #5391de; }
#area_creators .design {    background-color: #c5a381; }



/*====================================================================
16. バナー コードコピー領域のカラー
====================================================================*/
.list_banners li input {
	border-color: #00aaa8;
	color: #00aaa8;
}
.list_banners li input:hover {
	border-color: #e8006b;
	color: #e8006b;
}



/*====================================================================
17. フッター（copyright表記）
====================================================================*/
#footer {
	background-color: #20096E;
	color: #fff;
	filter:alpha(opacity=0.93);
	-moz-opacity: 0.93;
	opacity: 0.93;
}



/*====================================================================
18. その他追加あれば足すエリア
====================================================================*/