#form{color:#000; background:rgba(221,255,226,.6); border-radius:10px; padding:10px; margin:30px auto;}

#form .list.ast.small{margin-top:10px;}
#form .first{margin-top:0 !important;}

/*見出し*/
#form .title,
#form .title-ver,
.confirm #main_table tr:nth-child(2),
#id_music_list.result .cl_music_row > span::before{display:block; width:100%; color:#fff; border-radius:10px; padding:10px;}
#form .title,
.confirm #main_table tr:nth-child(2),
#id_music_list.result .cl_music_row > span::before{background:#0c2d57; font-size:16px; border-left:15px solid #ffd552; margin:30px auto 10px;}
@media screen and (max-width:800px){#form .title,.confirm #main_table tr:nth-child(2),#id_music_list.result .cl_music_row > span::before{font-size:15px;}}
@media screen and (max-width:480px){#form .title,.confirm #main_table tr:nth-child(2),#id_music_list.result .cl_music_row > span::before{font-size:13px;}}

/*見出し-バージョン用*/
#form .title-ver{background:#4798ff; font-size:20px; text-align:center; margin:10px auto;}
@media screen and (max-width:800px){#form .title-ver{font-size:18px;}}
@media screen and (max-width:480px){#form .title-ver{font-size:16px;}}

/*テキストエリア*/
#form input[type=text]{display:block; width:calc(100% - 20px); height:40px; padding:5px; border:1px solid #0c2d57; margin:0 auto;}

/*楽曲一覧*/
#id_music_input_area{margin:10px auto 0;}
#id_music_input_area .music{
display:flex;
background:#59de6c;
font-family:'Noto Sans JP', sans-serif;
font-size:14px;
border:1px solid #0c2d57;
border-radius:10px;
padding:5px 10px;
justify-content:space-between;
align-items:center;}
#id_music_input_area .music + .music{margin-top:10px;}
#id_music_input_area .music > *{display:block; cursor:pointer;}
#id_music_input_area .music input[type=radio]{width:15px;}
#id_music_input_area .music label{width:calc(100% - 15px); padding-left:10px;}
@media screen and (max-width:480px){#id_music_input_area .music{font-size:12px;}}

/*楽曲選択メニュー*/
#music-list{display:flex; flex-wrap:wrap; /*justify-content:center;*/}
#music-list li{
width:calc((100% / 5) - 10px);
color:#0c2d57;
background:#ffd552;
text-align:center;
border:1px solid;
border-radius:10px;
padding:5px 0;
margin:5px;
cursor:pointer;
transition:all .2s ease;
opacity:.7;
filter:grayscale(.7);}
#music-list li:hover,
#music-list li.select{opacity:1; filter:grayscale(0);}
@media screen and (max-width:570px){#music-list li{width:calc((100% / 3) - 10px);}}

#form *:not(a).btn-link{max-width:200px; border-width:3px; padding:5px; margin:20px auto 10px; cursor:pointer;}
#form *:not(a).btn-link:hover{text-shadow:2px 2px 1px rgba(12,45,87,.9); , 1px 1px 1px rgba(12,45,87,.9);}
#form *:not(a).btn-link::before,
#form *:not(a).btn-link::after{display:none !important;}

/*
=========================
結果表示エリア
=========================
*/
.done{position:relative; color:#0c2d57; background:rgba(255,106,122,.6); text-align:center; border-radius:10px; padding:10px 90px; margin:20px auto;}
.done::before,
.done::after{
display:block;
content:"";
position:absolute;
bottom:-20px;
width:80px;
height:116px;
background-position:center;
background-repeat:no-repeat;
background-size:100% auto;
z-index:5;
pointer-events:none;}
.done::before{left:-10px; background-image:url(/game/popn/popn29/special/img/top/chara01.png);}
.done::after{right:-10px; background-image:url(/game/popn/popn29/special/img/top/chara02.png);}
.done > p{font-size:16px; font-weight:700; margin:10px auto;}
.done > span{display:block; font-size:13px; margin:10px auto;}
.done > .posted{color:#fff; font-size:18px;}

@media screen and (max-width:570px){
.done{padding:10px 70px;}
.done::before,.done::after{width:60px; height:88px;}
.done > p{font-size:14px;}
.done > span{font-size:12px;}
.done > .posted{font-size:15px;}}

@media screen and (max-width:500px){
.done{padding:10px;}
.done::before,.done::after{top:unset; bottom:-12px; width:50px; height:72px;}
.done > span{padding:0 30px;}}

/*確定画面時*/
.done.share .btn-link{max-width:300px; margin:20px auto 10px !important;}
.done.share .btn-link p{padding:10px 20px;}
@media screen and (max-width:430px){.done.share .btn-link{width:90%;}}

.cl_nickname{color:#fff; font-size:18px; margin:10px auto;}
.cl_music_row + .cl_music_row{margin-top:20px; border-top:1px dotted; padding-top:20px;}
.cl_music_row > span{display:block;}
.cl_music_row > span + span{margin:10px auto 0;}
.cl_music_row > span::before{display:block; color:#fff; background:#0c2d57; font-size:12px; border-radius:20px; margin:0 auto 5px;}
.cl_music_row > span:nth-child(1)::before{content:"楽曲名";}
.cl_music_row > span:nth-child(2)::before{content:"ジャンル名";}
.cl_music_row .cl_delete_this{display:block; width:100px; text-align:center; border-radius:10px; border:2px solid; margin:5px auto 0; margin:10px auto 0; cursor:pointer; transition:opacity .2s ease;}
.cl_music_row .cl_delete_this:hover{opacity:.7;}
@media screen and (max-width:430px){.cl_nickname{font-size:15px;}}

/*確認ページ*/
.confirm #enquete_name,
.confirm #answer_id,
.confirm #main_table tr{display:none;}
.confirm #main_table tr:nth-child(2),
.confirm #main_table tr:nth-child(5){display:block;}

#id_music_list.result .cl_music_row{color:#000;}
#id_music_list.result .cl_music_row:first-child{margin-top:20px; border-top:1px dotted; padding-top:20px;}
#id_music_list.result .cl_music_row > span:first-child::before{margin-top:0;}