/*
================================================================================================================
テーマ変更
================================================================================================================
*/
/*コンセプト*/
.concept .title-side{color:#ff9000;}
.concept .title-side span:last-child{color:#00ab95;}

.new-song{letter-spacing:1px;}
.new-song .song-name{color:#ef00ba;}
.new-song .song-cat,
.new-song .song-artist{color:#1fd8ff;}

.new-song .song-cat{font-weight:normal !important;}
.new-song .song-img img{box-shadow:4px 4px 0 #c6ff00;}

/*
================================================================================================================
NEW SONG / コンセプト
================================================================================================================
*/
.concept.frame{
background:rgba(255,255,255,.95) !important;
font-family:'M PLUS 1', sans-serif;
font-size:15px !important;
line-height:160%;
text-align:left !important;
border-radius:10px;
padding:20px !important;}
.concept.frame + .concept.frame{margin:20px auto 0 !important;}
.concept .title-side{width:100%; margin-bottom:20px;}
.concept .title-side span{display:block; width:100%; letter-spacing:1px; text-align:center;}
.concept .title-side span:first-child{font-size:24px; font-weight:bold; padding-bottom:5px;}
.concept .title-side span:last-child{font-size:18px;}

@media screen and (max-width:640px){.concept{font-size:14px;}}
@media screen and (max-width:480px){
.concept.frame{font-size:13px !important;}
.concept .title-side span:first-child{font-size:20px;}
.concept .title-side span:last-child{font-size:16px;}}
@media screen and (max-width:370px){
.concept .title-side span:first-child{font-size:17px;}
.concept .title-side span:last-child{font-size:14px;}}

/*
================================================================================================================
NEW SONG / 共通
================================================================================================================
*/
p.copy{font-size:11px; color:#fff; text-align:right; margin-top:20px;}

.new-song .song-name,
.new-song .song-cat,
.new-song .song-artist,
#new-pickup .comment span{font-family:'M PLUS 1', sans-serif;}

.song-name br{display:none;}
@media screen and (max-width:640px){.song-name br{display:block;}}

/*
================================================================================================================
NEW SONG
================================================================================================================
*/
#new-list.frame{padding:0 20px !important; margin:0 auto 50px !important;}

#new-list > .new-song{
position:relative;
width:100%;
font-weight:bold;
margin:20px auto;}
#new-list > .new-song a{display:block; padding:20px 10px;}

#new-list .new-song div{
display:block;
position:relative;
width:100%;
text-align:center;
transition:all 0.2s ease;}
#new-list .new-song:hover div{opacity:0.5;}
#new-list .new-song .song-name{font-size:18px;}
#new-list .new-song .song-cat{font-size:13px;}
#new-list .new-song .song-artist{font-size:17px;}
#new-list .new-song .song-img{padding:10px 0;}
#new-list .new-song .song-img img{width:100%; max-width:200px;}

/*曲*/
/*#new-list #song{background-color:rgba(0,0,0,.7); margin:0 auto 20px;}*/

/*
=============================
アルファベット選択用
=============================
*/
.song-abc{
display:block;
position:relative;
font-family:'M PLUS 1', sans-serif;
padding:10px 20px 0;
margin:0 auto 20px;}
.song-abc ul{display:flex; width:100%; margin:0 auto; padding:0; flex-wrap:wrap;}
.song-abc ul li{width:3.5%; font-size:14px; text-align:center;}
.song-abc ul li:last-child{width:9%;}
.song-abc ul li.none{color:#999; padding:10px 0;}
.song-abc ul li a{display:block; color:#ef00ba; font-weight:bold; padding:10px 0;}
.song-abc ul li a:hover{text-decoration:underline;}

#base .song-abc ul::after{
display:block !important;
content:"";
width:100%;
height:4px !important;
visibility:visible !important;
background:#000;
filter: drop-shadow(4px 4px 0 #1fd8ff);}

@media screen and (max-width:640px){
.song-abc{width:100%; padding:10px 10px 0; margin:0 auto 10px;}
.song-abc ul li{width:6%;}
.song-abc ul li:last-child{width:20%;}
.song-abc ul li.none{padding:5px 0;}
.song-abc ul li a{padding:5px 0;}
#base .song-abc ul::after{margin-top:10px;}}

@media screen and (max-width:480px){
.song-abc ul li{width:10%;}
.song-abc ul li:last-child{width:20%;}}

/*
=============================
一覧
=============================
*/
#new-list #song-list{display:flex; flex-wrap:wrap; padding:0 0 20px;}
#new-list #song-list .new-song{width:calc(100% / 3) !important; margin:20px 0;}
#new-list #song-list .new-song .song-name{font-size:14px;}
#new-list #song-list .new-song .song-img{padding:5px 0;}
#new-list #song-list .new-song .song-cat{font-size:10px;}
#new-list #song-list .new-song .song-artist{font-size:13px;}

@media screen and (max-width:900px){
#new-list #song-list{flex-wrap:wrap;}
#new-list #song-list .new-song{width:calc(100% / 2) !important; padding:10px 0;}}

@media screen and (max-width:640px){
#new-list #song-list{padding:0;}
#new-list #song-list .new-song{width:100% !important; padding:10px; margin:0 auto !important; border-bottom:1px solid #fff;}
#new-list #song-list .new-song:last-child{border-bottom:none;}

#new-list .new-song .song-name{font-size:14px;}
#new-list .new-song .song-cat{font-size:10px;}
#new-list .new-song .song-artist{font-size:13px; font-weight:bold;}}
  
@media screen and (max-width:480px){
#new-list #song-list .new-song{width:100% !important; margin:0 auto; padding:20px 10px;}}

/*
================================================================================================================
NEW SONG 楽曲詳細
================================================================================================================
*/
#new-pickup{}

#new-pickup .new-song div{
display:block;
position:relative;
width:100%;
text-align:center;}

#new-pickup .new-song .song-name{font-size:22px;}
#new-pickup .new-song .song-img{padding:20px 0;}
#new-pickup .new-song .song-img img{width:100%; max-width:480px;}
#new-pickup .new-song .song-cat{font-size:16px;}
#new-pickup .new-song .song-artist{font-size:20px; margin:10px auto 30px;}

/*制作者コメント*/
#new-pickup .comment{text-align:left; font-size:12px !important;}
#new-pickup .comment span{
display:block;
width:100%;
color:#ef00ba;
font-size:14px !important;
text-align:center;
letter-spacing:1px;
letter-spacing:1px;
border-bottom:2px solid #fff;
padding:5px 10px;
margin:30px auto 20px auto;}
#new-pickup .comment .centering{text-align:center; padding:10px 0px;}
#new-pickup .comment a{color:#0066cc;}
#new-pickup .comment a:hover{text-decoration:underline;}

#new-pickup .comment span::after{
display:block !important;
content:"";
width:100%;
height:4px !important;
visibility:visible !important;
background:#000;
filter:drop-shadow(4px 4px 0 #1fd8ff);
}

/*動画*/
#new-pickup .movie{width:100%; max-width:640px; margin:30px auto 0;}
#new-pickup .movie img{width:100%;}

@media screen and (max-width:640px){
#new-pickup .new-song .song-name{font-size:18px;}
#new-pickup .new-song .song-cat{font-size:12px;}
#new-pickup .new-song .song-artist{font-size:15px; margin:10px auto 20px;}

#new-pickup{padding:20px 15px;}
#new-pickup .comment{font-size:12px !important;}
#new-pickup .comment span{font-size:13px !important;}
#new-pickup .comment br.sp-br{display:none;}}

@media screen and (max-width:450px){
#new-pickup .comment span{text-align:left;}
#new-pickup .comment{font-size:11px !important;}}

/*
=============================
戻るボタン
=============================
*/
#new-song .submit_btn{width:30% !important;}
#new-song .submit_btn{margin:70px auto 0;}
@media screen and (max-width:640px){#new-song .submit_btn{margin:50px auto 10px;}}
@media screen and (max-width:480px){#new-song .submit_btn{width:100% !important; max-width:320px !important;}}