@charset "Shift-JIS";

/*
================================================================================================================
DAILY CHALLENGE
================================================================================================================
*/
#daily_challenge_area{}
#daily_challenge_area ul{display:flex; width:100%; margin:0 auto;}
#daily_challenge_area ul li{width:50%; padding:10px;}

@media screen and (min-width:981px){#daily_challenge_area ul li + li{border-left:2px solid #a0b3b5;}}
@media screen and (max-width:980px){
#daily_challenge_area ul{flex-wrap:wrap;}
#daily_challenge_area ul li{width:100%;}
#daily_challenge_area ul li:first-child{margin-bottom:20px;}
#daily_challenge_area ul li + li{border-top:2px solid #a0b3b5; padding-top:30px;}}
@media screen and (max-width:480px){#daily_challenge_area ul li{padding:0;}}

/*
========================
きまぐれ称号
========================
*/
form#kimagure_title{
width:100%;
font-weight:bold;
font-size:14px;
margin-bottom:20px;}

form#kimagure_title > .inner{display:flex;}

form#kimagure_title > .inner > input#kimagure_title{
width:calc(100% - 150px);
color:#000;
background-color:#fff;
padding:5px;
margin:5px auto 0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;}

form#kimagure_title > .inner > .btn{width:130px; margin-left:20px;}

@media screen and (max-width:480px){
form#kimagure_title > .inner{flex-wrap:wrap; justify-content:center}
form#kimagure_title > .inner >  input#kimagure_title{width:100%;}
form#kimagure_title > .inner > .btn{width:200px; margin:10px 0 0;}}

/*
========================
今日のおすすめ・フルコン
========================
*/
#daily_challenge_area ul li:last-child > div{display:flex; font-size:12px; align-items:flex-start;}
#daily_challenge_area ul li:last-child > div + div{margin-top:10px;}
#daily_challenge_area ul li:last-child > div > p{width:60px;}
#daily_challenge_area ul li:last-child > div > p img{width:60px; border:1px solid;}

#daily_challenge_area ul li:last-child > div .data{width:calc(100% - 60px);}
#daily_challenge_area ul li:last-child > div .data .head{
display:flex;
font-weight:bold;
border-bottom:1px solid;
justify-content:space-between;
align-items:center;}
#daily_challenge_area ul li:last-child > div .data .head p{font-size:13px; padding:0 0 5px 10px;}
#daily_challenge_area ul li:last-child > div .data .music_info{padding:0 0 5px 10px;}

/*フルコンのみ*/
#fullcon .btn{width:140px;}
#fullcon .challenge_chance,
#fullcon .sub_text{color:#56ffc5;}

#fullcon .today_chance.none,
#fullcon .challenge_chance.none{display:none;}

@media screen and (max-width:480px){
#daily_challenge_area ul li:last-child > div{align-items:center;}
#fullcon .data .head{flex-wrap:wrap;}
#fullcon .data .head p,
#fullcon .challenge_chance{width:100%; padding:0 0 5px 10px;}}

@media screen and (max-width:370px){
#recommend .data .head{flex-wrap:wrap;}
#recommend .data .head p,
#recommend #recommend-tw{width:100%; padding:0 0 5px 10px;}}