@charset "UTF-8";

/* #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# PC・スマホ 共通設定 #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# */

/* L1 ######################################## 汎用要素 ######################################## */

span.mark {
	font-size: 60%;
}

/* L1 ######################################## ショートカット ######################################## */

ul.shortcut {
	margin-top: 55px;
	margin-bottom: -40px;
	text-align: center;
}

ul.shortcut li {
	display: inline-block;
	margin: 1px 0 !important;
	line-height: 1.0;
	vertical-align: top;
	border: 1px solid #cccccc;
	background: #ffffff;
	
	box-shadow: inset -4px -4px 12px rgba(0, 0, 0, 0.06);
}

ul.shortcut li:before {
	display: none;
}

ul.shortcut li a {
	position: relative;
	display: block;
	padding: 0.8em 1em 0.6em 1em;
	color: #336699 !important;
	vertical-align: baseline;
	text-decoration: none;
	border-bottom: 3px solid #ff6600;
}

ul.shortcut li span.mark {
	line-height: 1.4;
}

/* L1 ######################################## メイン画像 ######################################## */

#banner img {
	border: 1px solid #cccccc;
}


/* L1 ######################################## 商品情報 ######################################## */

/* L2 **************************************** タイトル **************************************** */

#product > h2::after {
	content: "商品情報";
}

/* ****************************** 注意事項 ****************************** */

#notice {
	clear: both;
	display: block;
	margin-bottom: 5px;
	padding: 0.5em 10px;
	color: #cc0000;
	font-weight: bold;
	text-align: center;
	border: 2px solid #cc0000;
	
	background: rgba(255, 255, 255, 0.85);
}
#notice.info {
	color: #666600;
	border-color: #666600;
}

/* ****************************** 基本情報 ****************************** */

#basic-info {
	position: relative;
	clear: both;
	margin: 0 auto;
	padding: 0;
	border: 1px #cccccc;
	border-style: solid solid none solid;
	
	background: rgba(255, 255, 255, 0.85);
	
	box-sizing: border-box;
}

#basic-info h3 {
	display: none;
}

/* L3 ======================================== アーティスト名 ======================================== */

#basic-info div.artist,
#basic-info div.series {
	margin-bottom: 0.8em;
	padding: 0.4em 25px;
	color: #444444;
	font-size: 1.6rem;
	border-bottom: 1px dotted #999999;
	
	background: rgba(0, 0, 0, 0.05);
}

/* L3 ======================================== タイトル ======================================== */

#basic-info div.title {
	margin: 0 25px;
	color: #336699;
	font-size: 3.2rem;
	
	text-shadow: 3px 3px 0 rgba(51, 102, 153, 0.1);
}

#basic-info div.title p.sub-title-top,
#basic-info div.title p.sub-title-bottom,
#basic-info div.title p.cw {
	font-size: 50%;
}

#basic-info div.title p.main-title {
	line-height: 1.2;
}

/* L3 ======================================== 商品データ ======================================== */

#basic-info div.data {
	margin: 0.5em 25px 0 25px;
}

/* L4 ---------------------------------------- 発売日 ---------------------------------------- */

#basic-info div.data time {
	display: inline-block;
	font-size: 1.6rem;
}

#basic-info div.data time::before {
	content: "\f017";
	margin-right: 0.3em;
	color: #333333;
	font-family: "FontAwesome";
}

#basic-info div.data table + time {
	margin-top: 0.8em;
}

/* L4 ---------------------------------------- 商品タイプ ---------------------------------------- */

#basic-info div.data table {
	position: relative;
	margin-top: 0.2em;
	font-size: 1.2rem;
	line-height: 1.0;
	border: 1px solid #aaaaaa;
	border-collapse: collapse
}

#basic-info div.data table th {
	min-width: 110px;
	padding: 0.8em 25px;
	color: #666600;
	font-weight: normal;
	text-align: center;
	text-indent: 0.2em;
	letter-spacing: 0.2em;
	border: 1px dotted #aaaaaa;
	border-style: dotted solid dotted dotted;
	
	background: rgba(0, 0, 0, 0.05);
}

#basic-info div.data table td {
	padding: 0.8em 2em;
	text-align: center;
	border: 1px dotted #aaaaaa;
	background: rgba(0, 0, 0, 0.03);
}

/* L4 ---------------------------------------- 配信情報 ---------------------------------------- */

#distribution {
	overflow: hidden;
	height: 0;
}
#distribution.animate {
	
	-webkit-transition: height 0.5s ease-in-out;
	-moz-transition: height 0.5s ease-in-out;
	-ms-transition: height 0.5s ease-in-out;
	-o-transition: height 0.5s ease-in-out;
	transition: height 0.5s ease-in-out;
}

#distribution ul {
	display: block;
	margin-top: 5px;
	padding-bottom: 4px;
	font-size: 1.2rem;
	text-align: center;
	line-height: 1.0;
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	border: 1px solid #bbbbbb;
}

#distribution ul.more {
	border: none;
}

#distribution ul + ul {
	margin-top: -1px;
}
#distribution ul + ul.more {
	margin-top: 5px
}

#distribution ul::before {
	display: block;
	margin-bottom: 4px;
	padding: 0.6em 0;
	color: #666600;
	font-weight: normal;
	text-align: center;
	text-indent: 0.2em;
	vertical-align: middle;
	border-bottom: 1px solid #bbbbbb;
	
	background: rgba(0, 0, 0, 0.05);
}
#distribution ul.online::before {
	content: "音楽配信";
}
#distribution ul.subscription::before {
	content: "サブスク（定額制）配信";
}
#distribution ul.download::before {
	content: "ダウンロード配信";
}
#distribution ul.hires::before {
	content: "ハイレゾ配信";
}
#distribution ul.more::before {
	display: none;
}

#distribution ul li {
	display: inline-block;
	margin: 1px;
	padding: 0.6em 1.5em;
	font-size: 1.2rem;
	text-align: center;
	line-height: 1.0;
	vertical-align: middle;
	letter-spacing: 0;
	text-indent: 0;
}
#distribution ul li::before {
	content: "\f1eb";
	margin-right: 0.3em;
	font-family: "FontAwesome";
	font-size: 1.2rem;
}

#distribution ul.more li::before {
	content: "\f138";
	margin-right: 0.3em;
	font-family: "FontAwesome";
	font-size: 1.2rem;
}

/*
#distribution ul li a {
	display: block;
	padding: 0.6em 1.5em;
	color: #336699 !important;
	text-decoration: none;
	
	box-sizing: border-box;
}
#distribution ul li a:hover {
	background: rgba(255, 255, 255, 0.5);
}
*/

#distribution ul li a::before {
	display: inline-block;
	position: relative;
	margin-right: 0.5em;
	padding: 0.2em 8px 0.2em 6px;
	color: #333333;
	font-size: 1.1rem;
	line-height: 1.0;
	border: 1px solid #cccccc;
	
	background: rgba(255, 255, 255, 0.9);
	border-radius: 5px;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05);
	
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.1) 51%, rgba(0, 0, 0, 0) 100%);
	background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.1) 51%, rgba(0, 0, 0, 0) 100%);
	background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.1) 51%, rgba(0, 0, 0, 0) 100%);
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.1) 51%, rgba(0, 0, 0, 0) 100%);
}

#distribution ul.online li.applemusic a::before,
#distribution ul.online li.youtube a::before,
#distribution ul.online li.spotify a::before,
#distribution ul.online li.line a::before,
#distribution ul.online li.awa a::before {
	content: "サブスク";
}

#distribution ul.online li.itunes a::before,
#distribution ul.online li.recochoku a::before,
#distribution ul.online li.mora a::before,
#distribution ul.online li.dwango a::before {
	content: "ダウンロード";
}

/*
#distribution ul.subscription li a::before {
	content: "サブスク";
}

#distribution ul.download li a::before {
	content: "ダウンロード";
}

#distribution ul.hires li a::before {
	content: "ハイレゾ";
}
*/

#distribution ul li a span {
	text-decoration: underline;
}

/* L4 ---------------------------------------- ショッピングサイトリンク ---------------------------------------- */

#shopping-link {
	margin: 2em 4%;
	text-align: center;
}

#shopping-link a {
	color: #ff6600 !important;
	text-decoration: none;
}

#shopping-link p {
	padding: 0.3em 0;
	font-size: 2.0rem;
	font-weight: bold;
	border: 2px solid #ff6600;
	
	border-radius: 2em;
	background: #ffffff -webkit-gradient(linear, left top, left bottom, color-stop(0.00, rgba(0, 0, 0, 0.025)), color-stop(1.00, rgba(0, 0, 0, 0.1)));
	background: #ffffff -webkit-linear-gradient(rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.1));
	background: #ffffff -moz-linear-gradient(rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.1));
	background: #ffffff -o-linear-gradient(rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.1));
	background: #ffffff -ms-linear-gradient(rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.1));
	background: #ffffff linear-gradient(rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.1));
}
#shopping-link p::before {
	content: "\f07a";
	margin-right: 0.3em;
	font-family: "FontAwesome";
	font-size: 2.2rem;
}

/* L4 ---------------------------------------- ECサイトリンク ---------------------------------------- */

#ec-link {
	margin: 2em 4%;
}

#ec-link a {
	color: #ff6600 !important;
	text-decoration: none;
}

#ec-link p {
	position: relative;
	margin: 0.5em 0;
	padding: 0.2em 0;
	color: #666600;
	font-size: 1.4rem;
	font-weight: normal;
	/* border-bottom: 1px dotted rgba(0, 0, 0, 0.5); */
}

#ec-link p::before {
    content: "\f138";
    margin-right: 0.6em;
    font-family: "FontAwesome";
}

#ec-link ul {
	overflow: hidden;
	list-style-type: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

#ec-link ul li {
	float: left;
	margin: 1px !important;
	line-height: 1.0;
	border: 1px solid #cccccc;
	background: #ffffff;
	
	border-radius: 5px;
	box-shadow: inset -4px -4px 12px rgba(0, 0, 0, 0.06);
}

#ec-link ul li:before {
	display: none;
}

#ec-link ul li a {
	position: relative;
	display: block;
	padding: 0.6em 1em;
	color: #336699 !important;
	text-decoration: none;
}

#ec-link ul li a::before {
    content: "\f07a";
    margin-right: 0.6em;
    font-family: "FontAwesome";
}

/* L4 ---------------------------------------- メロカラ・メロ譜・ワンポイントアドバイス（テイチクレコード系） ---------------------------------------- */

#feature {
	text-align: center;
}

#feature ul {
	display: inline-table;
	margin-top: 1em;
	color: #444444;
	font-size: 1.2rem;
	line-height: 1.0;
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	border-collapse: collapse;
}

#feature ul li {
	display: table-cell;
	padding: 0 2px;
	font-size: 1.2rem;
	line-height: 1.0;
	vertical-align: middle;
	letter-spacing: 0;
	text-indent: 0;
}

#feature ul li p.media {
	font-size: 1.1rem;
	margin: 2px 0 0 0;
	padding: 2px 0;
	border: 1px solid #cccccc;
	
	background: rgba(0, 0, 0, 0.05);
	border-radius: 4px;
}

#feature ul li p.media span.media {
	display: inline-block;
	font-size: 0.9rem;
}
#feature ul li p.media span.media:nth-child(2)::before {
	content: "/";
	margin: 0 2px;
}

#feature + ul.related {
	margin-top: 0.5em !important;
}

/* L4 ---------------------------------------- 関連商品リンク ---------------------------------------- */

#basic-info div.data ul.related {
	list-style-type: none;
	position: relative;
	margin: 2.5em -25px 0 -25px;
	padding: 10px 25px 15px 25px;
	text-align: center;
	
	background: rgba(0, 0, 0, 0.05);
}

#basic-info div.data ul.related::before {
	content: "関連商品（詳細はリンク先にて）";
	display: inline-block;
	position: absolute;
	top: -0.5em;
	left: 50px;
	color: #666666;
	line-height: 1.0;
}

#basic-info div.data ul.related::after {
	content: "\f27a";
	position: absolute;
	top: -0.9em;
	left: 25px;
	color: #999999;
	font-family: "FontAwesome";
	font-size: 2.0rem;
}

#basic-info div.data ul.related li {
	display: inline-block;
	margin-top: 5px;
	font-size: 1.2rem;
	text-align: center;
	line-height: 1.0;
	
	border-radius: 5px;
}

#basic-info div.data ul.related li a {
	display: block;
	padding: 0.6em 2em;
	color: rgba(0, 0, 0, 0.4);
	font-weight: bold;
	text-decoration: none;
	letter-spacing: 0.1em;
	
	background: rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

#basic-info div.data ul.related li a[href] {
	color: #ffffff !important;
	font-weight: normal;
	background: #336699;
}

/* L3 ======================================== ジャケット ======================================== */

#basic-info div.jacket {
	position: relative;
	z-index: 100;
	float: right;
	margin-top: 20px;
	padding-bottom: 10px;
}

#basic-info div.jacket figure {
	text-align: center;
}

#basic-info div.jacket figure + figure {
	margin-top: 10px;
}

#basic-info div.jacket figure.image,
#basic-info div.jacket figure.youtube {
	clear: right;
	float: right;
	position: relative;
	z-index: 100;
	width: 282px;
	margin-right: 15px;
	margin-left: 15px;
	padding: 15px;
	text-align: center;
	
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#basic-info div.jacket figure.banner {
	clear: right;
	float: right;
	width: 100%;
	
	border-radius: 0;
	background: none;
	box-shadow: none;
}

#basic-info div.jacket figure.image img {
	width: auto;
	height: auto;
	max-width: 280px;
	max-height: 400px;
	border: 1px solid #ffffff;
	
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)
}
#basic-info div.jacket figure.image img[src$=".png"] {
	border: none;
	
	box-shadow: none
}


#basic-info div.jacket figure.banner img {
	border: none;
	
	box-shadow: none;
}

/*  ---------- 汎用キャプション・コピーライト ---------------------------------------- */

#basic-info div.jacket figcaption {
	overflow: hidden;
	display: block;
	max-width: 280px;
	margin: 0.3em 0 -0.7em 0;
	color: #666666;
	font-size: 1.2rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#basic-info div.jacket figcaption::before {
	content: "\f03e";
	position: relative;
	margin-right: 0.5em;
	font-family: "FontAwesome";
}
#basic-info div.jacket figure.youtube figcaption::before {
	content: "\f16a";
	top: 1px;
	font-size: 1.6rem;
}

#basic-info div.jacket figure p.copyright {
	margin: 0.5em 0;
	font-size: 90%;
	line-height: 1.2;
}
#basic-info div.jacket figcaption + p.copyright {
	margin-top: 1.5em;
}
#basic-info div.jacket figure p.copyright:last-child {
	margin-bottom: -0.7em;
}

#basic-info div.jacket figure p.copyright img {
	box-shadow: none;
}

/* L3 ======================================== 商品説明 ======================================== */

#basic-info div.description {
	width: 600px;
	margin: 0 25px;
	padding: 1em 0;
}

#basic-info div.description p {
	margin: 0.5em 20px;
}

#basic-info div.description p.catch {
	position: relative;
	color: #cc3300;
	font-size: 1.6rem;
}
#basic-info div.description p.catch::before {
	content: "\f005";
	position: absolute;
	top: -0.05em;
	left: -20px;
	margin: 0;
	font-family: "FontAwesome";
}

#basic-info div.description p.feature {
	display: inline-block;
	padding: 0.3em 1em;
	color: #336699;
	font-weight: bold;
	border: 1px solid #336699;
	background: #ddeeff;
}

#basic-info div.description ul,
#basic-info div.description ol {
	clear: left;
	margin: 1.5em 0 0.5em 50px;
	padding: 0;
	font-size: 1.3rem;
}

#basic-info div.description ul > li {
	position: relative;
	list-style-type: none;
}
#basic-info div.description ul > li::before {
	content: "\f05a";
	position: absolute;
	top: -0.20em;
	left: -18px;
	color: #666666;
	font-family: "FontAwesome";
	font-size: 1.6rem;
}

#basic-info div.description ul > li p {
	margin-left: 0;
	margin-right: 0;
}

#basic-info div.description ul > li p.note {
	margin-left: 25px;
}

#basic-info div.description ul.normal {
	margin-top: 0.5em;
}

#basic-info div.description ul.normal li {
	list-style-type: disc;
}

#basic-info div.description ul.normal li::before {
	display: none;
}

#basic-info div.description.format p.section-L1 {
	margin: 1em 5px;
}

#basic-info div.description.format p.section-L3 {
	margin-left: 10px;
}

#basic-info div.description.format p.link {
	margin-left: auto;
	margin-right: auto;
	
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
}

/* ****************************** 収録内容 ****************************** */

#track-list {
	margin: 0 auto 20px auto;
	border: 1px #cccccc;
	border-style: none solid solid  solid;
		
	background: rgba(255, 255, 255, 0.85);
}
#track-list.clear-float:after {
	content: "";
	clear: both;
	display: block;
	height: 0;
}

#track-list h3 {
	display: none;
}

/* L3 ======================================== ディスク ======================================== */

#track-list p.group {
	position: relative;
	color: #666666;
	margin: 0 -10px;
	padding: 0.6em 25px 0.6em 45px;
	font-size: 1.6rem;
	font-weight: normal;
	line-height: 1.4;
	letter-spacing: 0.1em;
	border: 1px #cccccc;
	border-style: solid;
	
	background: rgba(255, 255, 255, 0.95) -webkit-gradient(linear, left top, left bottom, color-stop(0.00, rgba(0, 0, 0, 0.05)), color-stop(1.00, rgba(0, 0, 0, 0.1)));
	background: rgba(255, 255, 255, 0.95) -webkit-linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
	background: rgba(255, 255, 255, 0.95) -moz-linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
	background: rgba(255, 255, 255, 0.95) -o-linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
	background: rgba(255, 255, 255, 0.95) -ms-linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
	background: rgba(255, 255, 255, 0.95) linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
}
#track-list p.group::before {
	position: absolute;
	top: 9px;
	left: 20px;
	content: "\f001";
	font-family: "FontAwesome";
}
#track-list p.group::after {
	content: "－ 収録内容 －";
	margin-left: 6px;
	color: #666666;
	font-size: 1.2rem;
	letter-spacing: 0;
}
#track-list p.group.no-after::after {
	display: none;
}

/* L3 ======================================== 曲リスト関連 ======================================== */

/* L4 ---------------------------------------- タイトル ---------------------------------------- */

#track-list > p.title {
	margin: 0.8em 25px;
	color: #333333;
	font-size: 1.6rem;
	letter-spacing: 0.1em;
	
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

/* L4 ---------------------------------------- セクション ---------------------------------------- */

#track-list > p.section {
	padding: 0.5em 10px;
	color: #666600;
	font-size: 1.4rem;
	letter-spacing: 0.1em;
	border: 1px rgba(0, 0, 0, 0.3);
	border-style: dotted none;
}
#track-list > p.group + p.section {
	border-top: none;
}
#track-list > p.section::before {
	content: "";
	display: inline-block;
	position: relative;
	top: -0.15em;
	width: 40px;
	margin-right: 0.8em;
	border-top: 6px solid rgba(0, 0, 0, 0.15);
}

/* L4 ---------------------------------------- リスト周り ---------------------------------------- */

#track-list > ol,
#track-list > ul {
	list-style-type: none;
	counter-reset: num;
}

#track-list > ol > li,
#track-list > ul > li {
	position: relative;
	padding: 0.6em 25px 0.6em 60px;
}

#track-list > ol > li.medley,
#track-list > ul > li.medley {
	padding-left: 100px;
}

#track-list > ol > li::before {
	position: absolute;
	top: 8px;
	left: 25px;
	counter-increment: num;
	content: counter(num);
	
	width: 1.6em;
	height: 1.6em;
	font-family: "Trebuchet MS";
	color: #ffffff;
	text-align: center;
	line-height: 1.7;
	
	background: #336699;
	
	border-radius: 50%;
}

#track-list > ul.video > li::before {
	content: "\f26c";
	position: absolute;
	top: 3px;
	left: 26px;
	color: #336699;
	font-family: "FontAwesome";
	font-size: 1.8rem;
}

#track-list > ol > li.medley::before {
	left: 65px;
}

#track-list > ol > li:nth-child(odd),
#track-list > ul > li:nth-child(odd) {
	background: rgba(0, 0, 0, 0.04);
}
#track-list > ol > li:nth-child(even),
#track-list > ul > li:nth-child(even) {
	background: rgba(0, 0, 0, 0.08);
}

#track-list > ol.even > li:nth-child(odd),
#track-list > ul.even > li:nth-child(odd),
#track-list > ol.dark > li:nth-child(odd),
#track-list > ul.dark > li:nth-child(odd) {
	background: rgba(0, 0, 0, 0.08);
}
#track-list > ol.even > li:nth-child(even),
#track-list > ul.even > li:nth-child(even),
#track-list > ol.dark > li:nth-child(even),
#track-list > ul.dark > li:nth-child(even) {
	background: rgba(0, 0, 0, 0.04);
}

#track-list > ol > li > ul,
#track-list > ol > li > ol,
#track-list > ul > li > ul,
#track-list > ul > li > ol {
	margin-left: 25px;
}

#track-list > ol > li > ul.credit,
#track-list > ul > li > ul.credit {
	margin-left: 0;
}

/* L4 ---------------------------------------- 曲名 ---------------------------------------- */

#track-list li > p.title {
	color: #336699;
	font-size: 1.6rem;
	line-height: 1.6;
}

/* L4 ---------------------------------------- クレジット ---------------------------------------- */

#track-list li > ul.credit {
	list-style-type: none;
	font-size: 1.2rem;
}

#track-list li > ul.credit span.category {
	display: inline-block;
	position: relative;
	top: -1px;
	margin-bottom: -1px;
	padding: 0.2em 6px;
	color: #333333;
	font-size: 1.1rem;
	line-height: 1.0;
	border: 1px solid #cccccc;
	background: rgba(255, 255, 255, 0.8);
	
	border-radius: 5px;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05);
	
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.1) 51%, rgba(0, 0, 0, 0) 100%);
	background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.1) 51%, rgba(0, 0, 0, 0) 100%);
	background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.1) 51%, rgba(0, 0, 0, 0) 100%);
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.1) 51%, rgba(0, 0, 0, 0) 100%);
}

/* L4 ---------------------------------------- メンバー ---------------------------------------- */

#track-list li > ul.member {
	list-style-type: none;
	margin-top: 0.2em;
}

#track-list li > ul.member li {
	font-size: 1.1rem;
	color: #444444;
	line-height: 1.6;
}

/* L4 ---------------------------------------- コンテンツ ---------------------------------------- */

#track-list li > ul.contents,
#track-list li > ol.contents {
	margin-top: 0.2em;
	margin-left: 35px;
}
#track-list li > ul.contents {
	list-style-type: circle;
}

#track-list li > ul.contents li {
	color: #333333;
	line-height: 1.5;
}

/* L4 ---------------------------------------- メモ ---------------------------------------- */

#track-list li > div.memo {
	margin-top: 0.2em;
	margin-right: 35px;
	margin-bottom: 5px;
	padding: 5px 15px;
	color: #333333;
	font-size: 1.2rem;
	border: 1px solid rgba(0, 0, 0, 0.1);
	background: rgba(255, 255, 255, 0.4);
}

#track-list li > div.memo p.title {
	color: #666600;
	font-size: 1.4rem;
	margin-bottom: 5px;
	letter-spacing: 0.1em;
	border-bottom: 1px dotted rgba(0, 0, 0, 0.5);
	
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.05);
}

#track-list li > div.memo p.note {
	position: relative;
	margin-left: 24px;
	color: #666666;
	font-size: 1.2rem;
}
#track-list li > div.memo p.note::before {
	content: "\f044";
	position: absolute;
	top: -4px;
	left: -1.5em;
	color: #aaaaaa;
	font-family: "FontAwesome";
	font-size: 1.6rem;
}

#track-list li > div.memo > ul > li {
	position: relative;
	list-style-type: none;
	margin-left: 15px;
}
#track-list li > div.memo > ul > li::before {
	content: "\f0da";
	position: absolute;
	top: -5px;
	left: -15px;
	color: #999999;
	font-family: "FontAwesome";
	font-size: 1.6rem;
}

/* L3 ======================================== 汎用メモ ======================================== */

#track-list div.note {
	padding: 10px 25px;
	line-height: 1.6;
}

#track-list div.note {
	margin-left: -25px;
}

#track-list div.note > * + * {
	margin-top: 0.5em !important;
}

#track-list div.note > p {
	margin: 0 60px;
}

#track-list div.note > ul {
	list-style-type: none;
	margin: 0 75px;
}

#track-list p.group + div.note > ul {
	margin: 0 48px;
}

#track-list div.note > ul > li {
	position: relative;
}

#track-list div.note > ul > li::before {
	content: "\f0da";
	position: absolute;
	top: -3px;
	left: -15px;
	color: #999999;
	font-family: "FontAwesome";
	font-size: 1.6rem;
}

#track-list p.group + div.note > ul > li::before {
	content: "\f05a";
	left: -20px;
	color: #666666;
}

#track-list p.group > ul > li > p {
	margin: 0;
	line-height: 1.6;
}

#track-list div.note > ul > li > p.note {
	position: relative;
	margin-left: 24px;
	color: #666666;
	font-size: 1.2rem;
}

#track-list div.note > ul > li > p.note::before {
	content: "\f044";
	position: absolute;
	top: -4px;
	left: -1.5em;
	color: #999999;
	font-family: "FontAwesome";
	font-size: 1.6rem;
}

#track-list div.note dl {
	margin: 0 60px;
	padding: 0;
}

#track-list div.note dl dt {
	float: left;
	margin-bottom: 5px;
	padding: 8px 10px 6px 10px;
	font-size: 1.6rem;
	letter-spacing: 0.1em;
	line-height: 1.0;
	border: 2px solid rgba(0, 0, 0, 0.1);
	
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

#track-list div.note dl dd {
	clear: left;
	overflow: hidden;
	margin-left: 10px;
}

#track-list div.note dl dd ul.flat {
	overflow: hidden;
}

#track-list div.note dl dd ul.flat li {
	list-style-type: none;
	float: left;
}

#track-list div.note dl dd ul.flat li::after {
	content: "/";
	position: relative;
	top: -1px;
	margin: 0 8px;
	color: #aaaaaa;
	font-size: 1.0rem;
}

#track-list div.note dl dd ul.flat li:last-child::after {
	display: none;
}

/* ****************************** 追加情報 ****************************** */

#more {
	margin: 20px auto;
}

#more h3 {
	position: relative;
	float: left;
	color: #ffffff;
	margin-bottom: 5px;
	padding: 0.4em 20px;
	font-family: "Century Gothic", "メイリオ", "Trebuchet MS";
	font-size: 1.8rem;
	font-weight: normal;
	line-height: 1.0;
	letter-spacing: 0.2em;
	
	border-radius: 22px;
	background: rgba(0, 0, 0, 0.85);
}
#more h3::before {
	content: "\f055";
	margin-right: 6px;
	font-family: "FontAwesome";
}
#more h3::after {
	content: "－ 補足情報 －";
	margin-left: 6px;
	color: #ffffff;
	font-family: "メイリオ", "HiraKakuProN-W3", "MS UI Gothic", "ＭＳ Ｐゴシック", "Osaka", sans-serif;
	font-size: 1.2rem;
	letter-spacing: 0;
}

#more div.info {
	clear: left;
	padding: 1.5em 50px;
	background: rgba(0, 0, 0, 0.05);
}
#more div.info.clear-float::after {
	content: "";
	clear: both;
	display: block;
	height: 0;
}

#more .format div.youtube figure:first-child:nth-last-child(2),
#more .format div.youtube figure:first-child:nth-last-child(2) ~ figure,
#more .format div.youtube figure:first-child:nth-last-child(4),
#more .format div.youtube figure:first-child:nth-last-child(4) ~ figure {
	width: 445px;
}

#more .format div.youtube figure:first-child:nth-last-child(3),
#more .format div.youtube figure:first-child:nth-last-child(3) ~ figure {
	width: 295px;
}

/* L3 ======================================== 汎用テーブル ======================================== */

#more table.center {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* L4 ---------------------------------------- L to R タイプ ---------------------------------------- */

#more table.l-to-r {
	position: relative;
	color: #000000;
	margin: 1em 0 2.5em 0;
	font-size: 1.2rem;
	line-height: 1.6;
	border: 1px solid #aaaaaa;
	border-collapse: collapse;
}

#more table.l-to-r th {
	position: relative;
	min-width: 110px;
	padding: 0.8em 25px;
	color: #666600;
	font-weight: normal;
	text-align: center;
	text-indent: 0.2em;
	letter-spacing: 0.2em;
	border: 1px solid #aaaaaa;
	
	background: rgba(0, 0, 0, 0.05);
	
}

#more table.l-to-r td {
	padding: 0.8em 2em;
	border: 1px solid #aaaaaa;
	border-right: 1px dotted #999999;
	border-left: none;
	background: rgba(0, 0, 0, 0.03);
}

/* L4 ---------------------------------------- Top to Bottom タイプ ---------------------------------------- */

#more table.t-to-b {
	position: relative;
	color: #000000;
	margin: 1em 0 2.5em 0;
	font-size: 1.2rem;
	line-height: 1.6;
	border: 1px solid #aaaaaa;
	border-collapse: collapse;
}

#more table.t-to-b th {
	position: relative;
	min-width: 110px;
	padding: 0.8em 25px;
	color: #666600;
	font-weight: normal;
	text-align: center;
	text-indent: 0.2em;
	letter-spacing: 0.2em;
	border: 1px solid #aaaaaa;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	
	background: rgba(0, 0, 0, 0.05);
}

#more table.t-to-b td {
	padding: 0.8em 2em;
	text-align: center;
	border: 1px dotted #aaaaaa;
	border-right: 1px solid #aaaaaa;
	background: rgba(0, 0, 0, 0.03);
}

/* L3 ======================================== パーソナル ======================================== */

#more ul.personal,
#more ul.member {
	list-style-type: none;
	margin-bottom: 2em;
	text-align: center;
}

#more ul.personal li,
#more ul.member li {
	display: inline-block;
	color: #666600;
}

#more ul.personal li::after,
#more ul.member li::after {
	content: "/";
	margin: 1em;
	color: #666666;
}
#more ul.personal li:last-child::after,
#more ul.member li:last-child::after {
	display: none;
}

/* L3 ======================================== メンバー横並び ======================================== */

div.side-by-side {
	text-align: center;
}

div.side-by-side div.member {
	display: inline-block;
	width: 45%;
	padding: 0 2%;
}

div.side-by-side div.member p.section-L2 {
	text-align: left;
}

div.side-by-side div.member table {
	text-align: left;
}

/* L3 ======================================== バイオグラフィー ======================================== */

#more div.biography {
	width: 650px;
	margin: 0 auto 1em auto;
}

#more div.biography.wide {
	width: 100%;
}

#more div.biography.w900 { width: 900px; }
#more div.biography.w850 { width: 850px; }
#more div.biography.w800 { width: 800px; }
#more div.biography.w750 { width: 750px; }
#more div.biography.w700 { width: 700px; }
#more div.biography.w650 { width: 650px; }
#more div.biography.w600 { width: 600px; }
#more div.biography.w550 { width: 550px; }
#more div.biography.w500 { width: 500px; }
#more div.biography.w450 { width: 450px; }
#more div.biography.w400 { width: 400px; }


/* L1 ######################################## トピックス ######################################## */

#topics {
	position: relative;
	width: 1024px;
	margin: 20px auto 0 auto;
}

#topics h2::after {
	content: "－ 最新情報 －";
}

#topics h3 {
	display: none;
}

#topics article {
	clear: both;
	position: relative;
	margin-bottom: 5px;
	/* padding-right: 50px; */
	border: 1px solid #cccccc;
	/* background: rgba(255, 255, 255, 0.85); */
	
	/* box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
}
#topics article::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 30px 0 0;
	border-color: rgba(0, 0, 0, 0.1) transparent transparent transparent;
}
#topics article.animate {
	
	-webkit-transition: margin 0.3s linear;
	-moz-transition: margin 0.3s linear;
	-ms-transition: margin 0.3s linear;
	-o-transition: margin 0.3s linear;
	transition: margin 0.3s linear;
}

#topics article div.clickable {
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 100%;
	background: rgba(0, 0, 0, 0.08);
}

#topics article > dl {
	width: 100%;
}

/* L2 **************************************** トピックスタイトル **************************************** */

#topics article > dl > dt {
	/* cursor: pointer; */
	overflow: hidden;
	padding: 0.8em 25px 0.4em 25px;
	color: #336699;
	font-size: 1.8rem;
	/* white-space: nowrap; */
	background: rgba(0, 0, 0, 0.05);
	/* background: rgba(255, 255, 255, 0.4); */
}
#topics article.animate > dl > dt {
	
	-webkit-transition: color 0.3s linear;
	-moz-transition: color 0.3s linear;
	-ms-transition: color 0.3s linear;
	-o-transition: color 0.3s linear;
	transition: color 0.3s linear;
}

#topics article > dl > dt i {
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	right: -2px;
	z-index: 100;
	width: 50px;
	height: 32px;
	margin: auto;
	color: #ffffff;
	font-size: 3.6rem;
	text-align: center;
	line-height: 1.0;
	vertical-align: middle;
	
	text-shadow: none;
	
	-webkit-transition: right 0.3s linear;
	-moz-transition: right 0.3s linear;
	-ms-transition: right 0.3s linear;
	-o-transition: right 0.3s linear;
	transition: right 0.3s linear;
	
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

#topics article > dl > dt i.opened {
	right: 2px;
	-webkit-animation: spinOpen 0.3s linear forwards;
	-moz-animation: spinOpen 0.3s linear forwards;
	-o-animation: spinOpen 0.3s linear forwards;
	animation: spinOpen 0.3s linear forwards;
}

#topics article > dl > dt i.closed {
	right: -2px;
	-webkit-animation: spinClose 0.3s linear forwards;
	-moz-animation: spinClose 0.3s linear forwards;
	-o-animation: spinClose 0.3s linear forwards;
	animation: spinClose 0.3s linear forwards;
}

#topics article > dl > dt span.text {
	overflow: hidden;
	display: block;
	width: 100%;
	text-overflow: ellipsis;
}

#topics article.animate > dl > dt span.text {
	
	-webkit-transition: height 0.8s ease-in-out;
	-moz-transition: height 0.8s ease-in-out;
	-ms-transition: height 0.8s ease-in-out;
	-o-transition: height 0.8s ease-in-out;
	transition: height 0.8s ease-in-out;
}

/* L2 **************************************** トピックス区分・日付 **************************************** */

#topics article > dl > dd.data {
	overflow: hidden;
	/* cursor: pointer; */
	padding-bottom: 8px;
	font-size: 1.2rem;
	line-height: 1.0;
	
	background: rgba(0, 0, 0, 0.05);
	/* background: rgba(255, 255, 255, 0.4); */
}

#topics article > dl > dd.data time {
	float: right;
	margin-right: 25px;
	padding: 0.5em 30px;
	color: #666600;
	font-size: 1.1rem;
	text-align: center;
	line-height: 1.0;
	border-top: 1px dotted rgba(0, 0, 0, 0.5);
	border-bottom: 1px dotted rgba(0, 0, 0, 0.5);
}

#topics article > dl > dd.data ul.genre {
	float: left;
	overflow: hidden;
	list-style-type: none;
	margin-left: 25px;
}

#topics article > dl > dd.data ul.genre li {
	float: left;
	min-width: 7em;
	margin-right: 2px;
	padding: 0.5em 1em;
	color: #999999;
	text-align: center;
	
	background: rgba(0, 0, 0, 0.1);
	
	box-sizing: border-box;
}

#topics article > dl > dd.data ul.genre li.on {
	color: #ffffff;
	background: #336699;
}

#topics article > dl > dd.data ul.genre li i {
	margin-right: 6px;
}

/* L2 **************************************** トピックス本文 **************************************** */

#topics article > dl > dd.info {
	clear: both;
	overflow: hidden;
}

#topics article.animate > dl > dd.info {
	
	-webkit-transition: height 0.8s ease-in-out;
	-moz-transition: height 0.8s ease-in-out;
	-ms-transition: height 0.8s ease-in-out;
	-o-transition: height 0.8s ease-in-out;
	transition: height 0.8s ease-in-out;
}

#topics article > dl > dd.info div.wrapper {
	padding: 20px 50px;
}

/* L2 **************************************** 記事オープン時の設定 **************************************** */

#topics article.opened {
	margin: 15px 0;
}

#topics > h2 + article.opened {
	margin: 0 0 15px 0 !important;
}

#topics article:last-child.opened {
	margin: 15px 0 0 0;
}

#topics article.opened > dl > dt {
	color: #cc0000;
	white-space: normal;
}

/* L1 ######################################## YouTube プレイヤー ######################################## */

#youtube-player {
	overflow: hidden;
	position: fixed;
	bottom: 15px;
	right: 15px;
	z-index: 65536;
	border: 1px solid #ffffff;
	
	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
}

#youtube-player p.close {
	cursor: pointer;
	position: absolute;
	top: -20px;
	left: 5px;
	padding: 2px 6px;
	color: #ffffff;
	font-size: 1.0rem;
	line-height: 1.0;
	white-space: nowrap;
	text-align: center;
	border: 1px solid rgba(255, 255, 255, 0.5);
	
	background: #cc0000;
}

#youtube-player p.close.animate {
	
	-webkit-transition: top 0.3s ease-in-out;
	-moz-transition: top 0.3s ease-in-out;
	-ms-transition: top 0.3s ease-in-out;
	-o-transition: top 0.3s ease-in-out;
	transition: top 0.3s ease-in-out;
}

#youtube-player p.close.hover {
	top: 5px;
}

#youtube-player p.close.touch {
	top: 5px;
}

#youtube-player-wrapper {
	overflow: hidden;
	width: 480px;
	height: 270px;
}

#youtube-player-title {
	display: block;
	overflow: hidden;
	width: 480px;
	padding: 12px 15px;
	color: #ffffff;
	font-size: 1.1rem;
	text-align: center;
	line-height: 1.0;
	white-space: nowrap;
	text-overflow: ellipsis;
	
	background: rgba(0, 0, 0, 0.9);
	box-sizing: border-box;
}

@media screen and (max-width: 1060px) {
/* #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# 1060pxをオーバーしているコンテンツを調整 #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# */

#track-list p.group {
	margin: 0;
}

/* #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# 1060pxをオーバーしているコンテンツを調整 ここまで #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# */
}

/* #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# PC・スマホ 共通設定 ここまで #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# */