@charset 'utf-8';

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

/* detail  */
.detail { padding:8px;}
.detail h1 { color:#FFF; font-size:28px; text-align:center; padding:8px;}
.detail figure {
position:relative;
overflow:hidden;
background:#000;
padding:16px; margin:8px;
}
.detail figure span {
position:absolute; left:-4px; right:-4px; top:-4px; bottom:-4px;
display:block;
background:no-repeat center center / cover;
opacity:0.25;
filter:blur(4px);
}
.detail figure img { display:block; width:256px; box-shadow:0 2px 3px rgb(0,0,0,75%); margin:0 auto;}
.detail .spec { padding:4px;}
.detail .spec dl { display:flex; justify-content:space-between;}
.detail .spec dl * { font-size:16px;}
.detail .spec dt {
position:relative;
width:50%;
color:#BCC; text-align:right;
padding:4px; padding-right:calc(1em + 4px);
}
.detail .spec dt:after { position:absolute; top:4px; right:4px; content:'\FF1A';}
.detail .spec dd { width:50%; color:#FFF; padding:4px;}
.detail .spec dd:empty:after { color:#566; content:'-';}
.detail .spec .price del  { color:#899;}/* 価格 */
.detail .spec .price span { font-size:200%;}
.detail .spec .point { margin-top:4px;}/* ACポイント還元 */
.detail .spec .point span { font-size:150%;}
@media screen and ( max-width:768px ){
.detail h1 { font-size:24px;}
.detail .spec dl * { font-size:14px;}
}
@media screen and ( max-width:480px ){
.detail h1 { font-size:20px;}
.detail figure img { max-width:256px; width:100%;}
}
/* detail  */

/*↓一括購入↓*/
.buy-full { padding:16px;}
.buy-full p,
.buy-full a {
display:block;
color:#FFF !important; font-size:24px; text-align:center;
padding:16px;
}
.buy-full p { background:rgb(255,255,255,25%);}
.buy-full a { background:#9C3; text-decoration:none;}
.buy-full a:hover { animation:buy-all 1s;}
@keyframes buy-all { 0% { background:#FFF;}}
@media screen and ( max-width:768px ){
.buy-full p,
.buy-full a { font-size:18px;}
}
/*↑一括購入↑*/

/*↓紹介↓*/
.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 p,
.buy-indi .add a { color:#FFF !important; font-size:14px;}
.buy-indi .sam { width:48px; height:48px;}
.buy-indi .tit { width:calc(100% - 48px - 80px - 144px);}
.buy-indi .pri { width:80px; text-align:right; white-space:nowrap;}
.buy-indi .add { width:144px;}
.buy-indi .add p,
.buy-indi .add a {
display:block; width:136px;
text-align:center; white-space:nowrap;
padding:0.5em;
}
.buy-indi .add p { background:rgb(255,255,255,25%);}
.buy-indi .add a { background:#9C3; text-decoration:none;}
.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 p,
.buy-indi .add a { font-size:12px;}
}
@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;}
/*↑共有↑*/