@charset 'euc-jp';

/*reset*/
.music-body,
.music-body * {
box-sizing:border-box;
line-height:1; font-weight:normal;
padding:0; margin:0;
transition:none;
}
/*reset*/

.music-body {
max-width:768px; width:100%;
font-size:0;
margin:0 auto;
}

/*タイトル*/
.title { padding:16px;}
.title h1 { color:#FFF; font-size:28px; text-align:center;}
@media screen and ( max-width:768px ){ .music-body h1 { font-size:24px;}}
@media screen and ( max-width:480px ){ .music-body h1 { font-size:20px;}}
/*タイトル*/

/*ジャケット*/
.jacket { padding:16px;}
.jacket figure { background:#000; text-align:center; padding:16px;}
.jacket img { display:inline-block; width:384px;}
@media screen and ( max-width:480px ){
.jacket img { max-width:384px; width:100%;}
}
/*ジャケット*/

/*车妥*/
.overview { padding:12px;}
.overview dl { display:flex; justify-content:space-between;}
.overview dl * { font-size:18px;}
.overview dt { width:50%; color:#BCC; padding:4px; text-align:right; white-space:nowrap;}
.overview dt:after { content:'\FF1A';}
.overview dd { width:50%; color:#FFF; padding:4px;}
.overview dd:empty:after { color:#566; content:'-';}
.overview .price del  { color:#899;}/* 擦呈 */
.overview .price span { font-size:200%;}
.overview .point { margin-top:4px;}/* ACポイント丛傅 */
.overview .point span { font-size:150%;}
@media screen and ( max-width:768px ){
.overview dl * { font-size:14px;}
}
/*车妥*/

/*办崇关掐*/
.buy-full { padding:16px;}
.buy-full a {
display:block;
background:#8C2;
color:#FFF !important; font-size:24px; text-align:center; text-decoration:none;
padding:16px;
}
.buy-full a:hover { animation:buy-all 1s;}
@keyframes buy-all { 0% { background:#FFF;}}
@media screen and ( max-width:768px ){ .buy-full a { font-size:20px;}}
/*办崇关掐*/

/*疽拆*/
.description {
color:#FFF; line-height:2em;
padding:16px; margin:0;
}
.description,
.description * { font-size:16px;}
@media screen and ( max-width:768px ){
.description,
.description * { font-size:14px;}
}
/*疽拆*/

/*改侍关掐*/
.buy-indi { padding:12px;}
.buy-indi > ul {
display:flex; justify-content:flex-end; align-items:center;
list-style-type:none;
}
.buy-indi > ul > li { padding:4px;}
.buy-indi .tit,
.buy-indi .pri,
.buy-indi .add a { color:#FFF !important; font-size:16px;}
.buy-indi .sam { width:48px; height:48px;}
.buy-indi .tit { width:calc(100% - 256px);}
.buy-indi .pri { width:64px; text-align:right; white-space:nowrap;}
.buy-indi .add a {
display:block; width:136px;
background:#8C2;
text-decoration:none !important;
text-align:center; white-space:nowrap;
padding:0.5em;
}
.buy-indi .add a:hover { animation:list-buy 1s;}
@keyframes list-buy { 0% { background:#FFF;}}
.buy-indi .split { padding:4px;}/* 尸充俐 */
.buy-indi .split:before { display:block; width:100%; height:1px; background:#344; content:'';}
@media screen and ( max-width:768px ){
.buy-indi .tit,
.buy-indi .pri,
.buy-indi .add a { font-size:14px;}
}
@media screen and ( max-width:480px ){
.buy-indi ul { flex-wrap:wrap;}
.buy-indi .tit { width:calc(100% - 48px);}
}
/*改侍关掐*/

/*活陌(JPlayer)*/
.jp-interface_indiv,
.jp-controls_indiv { width:40px; height:40px; overflow:hidden;}
.jp-controls_indiv li {
display:block;
width:100%; height:100%;
background:url( ../img/jplayer-icon.png ) 0 0 / auto 200%;
cursor:pointer;
}
.jp-controls_indiv li.jp-play {/* 遍琳していない */}
.jp-controls_indiv li.jp-play:hover { background-position:-100% 0;}
.jp-controls_indiv li.jp-stop {/* 遍琳面 */
background-position:0 -100%;
animation:jp-controls-stop1 0.4s steps(4) infinite;
}
@keyframes jp-controls-stop1 { to { background-position:-400% -100%;}}
.jp-controls_indiv li.jp-stop:hover {
background-position:-200% 0;
animation:none;
}
/*活陌(JPlayer)*/

/*鼎铜*/
.share {
display:flex; justify-content:center;
padding:12px;
}
.share a {
display:block; width:40px; height:40px;
background:rgba(0,0,0,50%) url( /project/egg/img/sns/0.png ) 0 0 / auto 100%;
border-radius:50%;
margin:4px;
}
.share a:nth-of-type(2) { background-position:-40px 0;}
.share a:hover { animation:share-a 1s forwards;}
@keyframes share-a { 0% { background-color:#FFF;}}
.share span { display:none;}
/*鼎铜*/