@charset "UTF-8";

/*
10px = 77%
11px = 85%
12px = 93%
13px = 100%
14px = 108%
15px = 116%
16px = 123.1%
17px = 131%
18px = 138.5%
19px = 146.5%
20px = 153.9%
21px = 161.6%
22px = 167%
23px = 174%
24px = 182%
25px = 189%
26px = 197%
27px = 207.7%
28px = 215.4%
29px = 223.1%
30px = 230.8%
*/

/* #################### カラオケ検索 #################### */
#karaoke-search {
	position: relative;
	margin: 25px;
	padding: 0;
	border: 5px solid #cccccc;
	background: #ffffff;
	
	border-radius: 10px
}

/* ******************** 注意書き ******************** */
#karaoke-search ul {
	list-style-type: circle;
	margin: 20px 50px;
	padding: 0;
	text-align: left;
}

#karaoke-search ul li {
	margin: 0;
	padding: 0;
	font-size: 93%;
}

/* ******************** フォーム部分 ******************** */
#karaoke-search form {
	margin: 0;
	padding: 0;
}

#karaoke-search form p {
	margin: 0;
	padding: 20px 0;
	border-top: 1px dotted #cccccc;
	background: url(../images/basic/back_transparent_black_5.png);
	
	border-radius: 0 0 5px 5px;
}

#karaoke-search form input {
	width: 350px;
	font-family: "メイリオ";
	font-size: 131%;
}

#karaoke-search form button {
	font-family: "メイリオ";
}

#karaoke-search form button.free {
	margin-left: 20px;
}

/* ******************** 検索結果 ******************** */
#results {
	position: relative;
	margin: 20px 0;
	padding: 0;
}

/* -------------------- 検索結果見出し -------------------- */
#results h3	{
	margin: 0.5em 25px;
	padding: 0;
	color: #666666;
	font-size: 197%;
	text-align: center;
	letter-spacing: 0.2em;
	line-height: 1.2;
	border-bottom: 1px dotted #999999;
}

/* -------------------- ローディング or エラー テキスト -------------------- */
#results p.loading,	
#results p.error {
	margin: 0;
	padding: 0;
	color: #999999;
	text-align: center;
}

#results p.loading img {
	margin-right: 5px;
}

/* -------------------- ラッパーA -------------------- */
#results > div.wrapper {
	margin: 20px 0;
	padding: 0;
}

/* -------------------- ヒットしたワード -------------------- */
#results h4 {
	margin: 0 25px;
	padding: 0;
	font-size: 85%;
	font-weight: normal;
	text-align: left;
}

#results h4 strong {
	color: #336699;
	font-size: 170%;
}

#results h4 span.kana {
	display: inline-block;
	position: relative;
	top: -2px;
	margin: 0;
	padding: 4px 4px 3px 4px;
	color: #888888;
	line-height: 1.0;
	border: 1px solid #cccccc;
	background: #ffffff;
	
	border-radius: 5px;
}

#results h4 em {
	color: #cc0000;
	font-weight: bold;
	font-style: normal;
}

/* -------------------- 一番外のテーブル -------------------- */
#results > div.wrapper > table {
	width: 900px;
	margin: 0 auto;
	padding: 0;
    border: 1px solid #cccccc;
	
	border-spacing: 0;
	border-radius: 10px;
    box-shadow: 0 1px 1px #cccccc;
}

/* ########## thead 内の設定 ########## */
#results > div.wrapper > table > thead > tr {
	background:#e3dcd5;
}

#results > div.wrapper > table > thead > tr > th {
	margin: 0;
	padding: 10px;
    color:#69655c;
	font-weight: normal;
	vertical-align: middle;
	letter-spacing: 0.2em;
	white-space: nowrap;
	border-bottom: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

#results > div.wrapper > table > thead > tr > th:nth-child(2n+1) {
	background: url(../images/basic/back_transparent_black_2.png);
}

/* ########## tbody 内の設定 ########## */
#results > div.wrapper > table > tbody > tr {
	background: url(../images/basic/back_transparent_white_80.png);
}

#results > div.wrapper > table > tbody > tr.hover {
	background: #fffbee;
}

#results > div.wrapper > table > tbody > tr > td  {
	margin: 0;
	padding: 5px;
	vertical-align: middle;
	border-bottom: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
}

#results > div.wrapper > table > tbody > tr > td:nth-child(2n+1) {
	background: url(../images/basic/back_transparent_black_2.png);
}

/* ########## 角丸の設定 ########## */
#results > div.wrapper > table > thead > tr:first-child > th:first-child {
	border-radius: 10px 0 0 0;
}

#results > div.wrapper > table > thead > tr:first-child > th:last-child {
	border-radius: 0 10px 0 0;
}

#results > div.wrapper > table > tbody > tr:last-child > td {
	border-radius: 0 0 10px 10px;
}

#results > div.wrapper > table > tbody > tr.force-round > td:first-child {
	border-radius: 0 0 0 10px;
}

#results > div.wrapper > table > tbody > tr.force-round > td:last-child {
	border-radius: 0 0 10px 0;
}

/* ########## 各カラムの幅 ########## */
#results > div.wrapper > table > tbody > tr td.id {
	width: 100px;
}

#results > div.wrapper > table > tbody > tr td.music,
#results > div.wrapper > table > tbody > tr td.artist {
	
}

#results > div.wrapper > table > tbody > tr td.series {
	width: 200px;
}

#results > div.wrapper > table > tbody > tr td.release {
	width: 100px;
}

#results > div.wrapper > table > tbody > tr td.price {
	width: 100px;
	text-align: center;
}

#results > div.wrapper > table > tbody > tr td.detail {
	overflow: hidden;
	width: 100px;
}

/* ########## リストのデザイン ########## */
#results > div.wrapper > table > tbody > tr td ul {
	list-style-type: circle;
	margin: 0 30px;
	padding: 0;
	text-align: left;
}

#results > div.wrapper > table > tbody > tr td ul li {
	margin: 0;
	padding: 0;
}

/* ########## 詳細ボタンのデザイン ########## */
#results > div.wrapper > table tr td.detail button {
	padding: 5px 10px;
	color: #336699;
}

/* ########## 商品情報詳細を格納する td ########## */
#results > div.wrapper > table > tbody > tr td.contents {
	padding: 0
}

#results > div.wrapper > table > tbody > tr td.contents div.wrapper-detail {
	overflow: hidden;
	margin: 0 50px;
	padding: 0;
	height: 0;
}

/* ********** 商品情報詳細用のテーブル ********** */
#results td.contents table {
	width: 100%;
	margin: 20px 0 35px 0;
	font-size: 93%;
	border: none;
	border: 1px solid #cccccc;
	border-collapse: collapse;
}

#results td.contents caption {
	margin: 0;
	padding: 0;
	text-align: center;
}

#results td.contents caption strong {
	margin: 0;
	padding: 0;
	color: #336699;
	font-size: 131%;
	text-align: left;
}

#results td.contents table thead tr {
	background:#e3dcd5;
}

#results td.contents table tr.hit {
	color: #cc0000 !important;
	font-weight: bold;
	background: url(../images/basic/back_gradation_gray.jpg) 50% 50% no-repeat;
}

#results td.contents table th {
	margin: 0;
	padding: 5px;
    color:#69655c;
	font-weight: normal;
	letter-spacing: 0.2em;
	white-space: nowrap;
	border: 1px solid #cccccc;
}

#results td.contents table tbody tr {
	background: url(../images/basic/back_transparent_white_80.png);
}

#results td.contents table tr td {
	margin: 0;
	padding: 5px;
	border: 1px solid #cccccc;
}

#results td.contents table tr td:nth-child(2n+1) {
	background: url(../images/basic/back_transparent_black_2.png);
}

/* ---------- カラムの幅 ---------- */
#results td.contents table td.no {
	width: 50px;
}


#results td.contents table td.music {
	width: 300px;
}

#results td.contents table td.self-sing,
#results td.contents table td.self-perform {
	width: 60px;
}

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

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

.shopping-link > p {
	color: #999999;
}

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

.shopping-link a p {
	padding: 0.3em 0;
	font-size: 2.0em;
	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 a p::before {
	content: "\f07a";
	margin-right: 0.3em;
	font-family: "FontAwesome";
}