@charset "UTF-8";

@media screen and (max-width: 768px) {
/* #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# スマホ 設定 #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# */

/* L1 ######################################## リリースカレンダー ######################################## */

/* L2 **************************************** セレクタ **************************************** */

#release div.selector ul {
	display: block;
}

#release div.selector ul li {
	display: list-item;
	min-width: initial;
	min-width: auto;
	margin: 2px 0;
}

#release div.selector ul li:not(.selected) a:hover::before {
	height: 0;
}

/* L2 **************************************** コンテナ **************************************** */

#release div.container {
	margin-bottom: 0;
}

#release div.container p.message {
	font-size: 1.4rem;
}

/* L2 **************************************** リセット **************************************** */

#release div.container a.reset p {
	text-align: left;
}

/* L2 **************************************** レーベル **************************************** */

#release div.label-products h4 {
	padding-left: 4%;
	padding-right: 4%;
}

/* L2 **************************************** 商品情報 **************************************** */

a.product {
	cursor: default;
	margin: 5px 0;
	border-color: rgba(0, 0, 0, 0.3);
}

div.label-products:last-child a.product:last-child {
	margin-bottom: 0;
}

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

a.product div.artist,
a.product div.series {
	margin-bottom: 0.8em;
	padding: 0.6em 4%;
	line-height: 1.4;
}

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

a.product div.title {
	margin: 0 4%;
}

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

a.product div.data {
	margin-left: 4%;
	margin-right: 4%;
}

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

a.product div.data time {
	margin-bottom: 0.4em;
}

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

a.product div.data table {
	width: 100%;
	line-height: 1.8;
	border: none;
}

a.product div.data table + table {
	margin-top: 1.2em;
}

a.product div.data table tr {
	display: block;
	margin-bottom: 5px;
}
a.product div.data table tr:last-child {
	margin-bottom: 0;
}

a.product[data-page-type="multi"] div.data table tr:hover {
	color: #000000;
}

a.product div.data table th {
	display: block;
	width: 100%;
	margin-bottom: 0.4em;
	padding: 0.4em 3%;
	font-weight: normal;
	text-align: left;
	border: 1px solid rgba(0, 0, 0, 0.2);
	
	box-sizing: border-box;
}

a.product div.data table tr.selected th:before {
	display: none;
}

a.product div.data table td {
	position: relative;
	display: list-item;
	list-style-type: none;
	width: auto;
	min-width: initial;
	min-width: auto;
	margin-left: 6%;
	margin-right: 4%;
	padding: 0;
	text-align: left;
	border: none;
	background: none;
}
a.product div.data table td::before {
	content: "\f0da";
	position: absolute;
	top: -4px;
	left: -15px;
	color: #999999;
	font-family: "FontAwesome";
}

a.product div.data table td.link {
	display: block;
	position: relative;
	margin: 0.5em auto 1em auto;
	text-align: center;
}
a.product div.data table td.link::before {
	display: none;
}

a.product div.data table tr:last-child td.link {
	margin-bottom: 0;
}

a.product div.data table td.link p.link {
	display: inline-block;
	padding: 0.6em 10%;
	color: #666666;
	font-weight: bold;
	text-align: center;
	line-height: 1.0;
	white-space: nowrap;
	text-overflow: ellipsis;
	
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 20px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.1), inset 0 5px 15px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	
	background: rgba(255, 255, 255, 0.8);
  	background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0.15) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 75%, transparent 75%, transparent);
	background-image: -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.15) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 75%, transparent 75%, transparent);
	background-image: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.05) 75%, transparent 75%, transparent);
	background-size: 4px 4px;
}

a.product div.data table td br {
	display: none;
}

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

a.product div.data ul.related {
	margin: 1em 2%;
	padding: 0;
	background: none;
}

a.product div.data ul.related::before {
	display: block;
	position: relative;
	top: 0;
	left: 24px;
	margin-right: 4%;
	margin-bottom: 0.8em;
	text-align: left;
}

a.product div.data ul.related::after {
	top: -0.6em;
	left: -5px;
}

a.product div.data ul.related li {
	display: block;
	margin: 0.3em 0;
}

a.product div.data ul.related li a {
	padding-top: 0.8em;
	padding-bottom: 0.8em;
}

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

a.product div.jacket {
	position: relative;
	top: 0;
	left: 0;
	width: auto;
	margin-top: 5px;
	padding: 15px;
	text-align: center;
	
	background: rgba(0, 0, 0, 0.08);
}

a.product div.jacket figure.image {
	display: inline-block;
	max-width: 100%;
	box-sizing: border-box;
}

a.product div.jacket figure + figure {
	margin-top: 5px;
}

a.product div.jacket figure.image,
a.product div.jacket figure.youtube {
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
}

a.product div.jacket figure.image img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 350px;
}

a.product div.jacket figcaption {
	width: auto;
	letter-spacing: 0;
}

/* L4 ---------------------------------------- ジャケットセレクタ ---------------------------------------- */

a.product div.jacket ul.selector {
	display: block;
	list-style-type: none;
	margin: 0.8em 0 -0.6em 0;
	text-align: center;
}

a.product div.jacket ul.selector li {
	display: inline-block;
	cursor: pointer;
	margin: 0 2px;
}


a.product div.jacket ul.selector li img {
	margin-bottom: 4px;
	border: 1px solid #ffffff;
	
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

a.product div.jacket ul.selector li.selected img {
	border-color: #336699;
}

/* L3 ======================================== ジャンル ======================================== */

a.product div.genre {
	position: relative;
	top: 0;
	right: 0;
	line-height: 1.0;
	border: none;
	border-top: 1px solid #cccccc;
	background: #ffffff;
}

/* L3 ======================================== 試聴プレビュー ======================================== */

a.product div.preview {
	margin: 2em 4%;
}

a.product div.preview p {
    font-size: 1.6rem;
}

/* L3 ======================================== 選択中アイテム ======================================== */

a.product div.selected {
	display: none;
}

/* #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# スマホ 設定 ここまで #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# */
}

@media screen and (max-width: 500px) {
/* #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# 500px以下のコンテンツを調整 #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=# */

a.product div.data table td {
	margin-left: 25px;
}

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