/*
================================================================================================================
インフォ
================================================================================================================
*/
#info{position:relative; width:100%; margin:0 auto;}
#info > #info-inner{width:100%; max-width:980px; color:#000; background:#fff; border-radius:20px; padding:20px; margin:0 auto;}
#info > #info-inner > #info-box{margin:20px auto;}

ul#info-news{
width:100%;
height:400px;
padding-right:20px;
overflow-y:scroll;}
ul#info-news::-webkit-scrollbar{width:4px;}
ul#info-news::-webkit-scrollbar-track{background:#222; border-radius:4px;}
ul#info-news::-webkit-scrollbar-thumb{background:#bffe40; border-radius:4px;}
@media screen and (max-width:640px){ul#info-news{height:360px;}}
@media screen and (max-width:480px){ul#info-news{padding-right:10px;}}

/*READ MORE*/
#info > #info-inner > a.link{
position:relative;
display:block;
width:100%;
max-width:150px;
color:#fff;
text-align:center;
margin:0 0 0 auto;}
#info > #info-inner > a.link::before{
display:block;
content:"";
position:absolute;
bottom:-7px;
left:5%;
width:90%;
height:10px;
background:rgba(255,144,0,.4);
filter:blur(4px);
transition:all 1s ease;}
#info > #info-inner > a.link > p{
position:relative;
display:block;
width:100%;
background:#ff9000;
border-radius:20px;
padding:5px 0;
transition:all 1s ease;}
#info > #info-inner > a.link:hover::before{background:rgba(255,144,0,.8);}
#info > #info-inner > a.link:hover > p{transform:translateY(5px) scale(96%);}

/*
================================================================================================================
インフォ装飾
================================================================================================================
*/
/*メニュー*/
ul#info-menu{display:flex; width:100%; justify-content:space-between;}
ul#info-menu::after{display:none !important;}

ul#info-menu li{
width:calc((100% / 6) - 5px);
font-size:12px;
font-weight:700;
text-align:center;
border:1px solid;
padding:7px 0;
transition:color .3s ease;
cursor:pointer;}
ul#info-menu li:nth-child(1)::before{content:"ALL";}
ul#info-menu li:nth-child(2)::before{content:"NEWSONG";}
ul#info-menu li:nth-child(3)::before{content:"RANKING";}
ul#info-menu li:nth-child(4)::before{content:"EVENT";}
ul#info-menu li:nth-child(5)::before{content:"SHOP";}
ul#info-menu li:nth-child(6)::before{content:"OTHER";}

ul#info-menu li.select,
ul#info-menu li:hover{color:#fff;}
ul#info-menu li:nth-child(1).select,
ul#info-menu li:nth-child(1):hover{background:#00ab95; border-color:#00ab95;}
ul#info-menu li:nth-child(2).select,
ul#info-menu li:nth-child(2):hover{background:#0084ff; border-color:#0084ff;}
ul#info-menu li:nth-child(3).select,
ul#info-menu li:nth-child(3):hover{background:#26ca00; border-color:#26ca00;}
ul#info-menu li:nth-child(4).select,
ul#info-menu li:nth-child(4):hover{background:#ff7800; border-color:#ff7800;}
ul#info-menu li:nth-child(5).select,
ul#info-menu li:nth-child(5):hover{background:#ff00ae; border-color:#ff00ae;}
ul#info-menu li:nth-child(6).select,
ul#info-menu li:nth-child(6):hover{background:#f00; border-color:#f00;}

@media screen and (max-width:720px){
ul#info-menu{flex-wrap:wrap;}
ul#info-menu li{width:calc((100% / 3) - 4px);}
ul#info-menu li:nth-child(1),
ul#info-menu li:nth-child(2),
ul#info-menu li:nth-child(3){margin-bottom:6px;}}
@media screen and (max-width:370px){ul#info-menu li{font-size:10px;}}

/*
=============================
インフォ本文
=============================
*/
ul#info-news > li{display:flex; position:relative; min-height:100px; padding:20px 10px;}
ul#info-news > li + li,
ul#info-news > li:nth-child(1){border-bottom:1px solid #999;}
ul#info-news > li:last-child{border-bottom:none;}
ul#info-news li a{color:#00ab95;}
ul#info-news li a:hover{text-decoration:underline;}

ul#info-news li .news-main{width:calc(100% - 100px);}
ul#info-news li .news-main > li:nth-child(1){font-size:13px; font-weight:bold;}
ul#info-news li .news-main > li:nth-child(2){color:#00ab95; font-size:13px; font-weight:bold; margin-top:5px;}
ul#info-news li .news-main > li:nth-child(2):before{content:"▼"; color:#ff9000; margin-right:3px;}
ul#info-news li .news-main > li:nth-child(3){font-size:12px; margin-top:5px;}
ul#info-news li .news-main > li:nth-child(3) > a{display:inline; color:#ff9000; padding:0 5px;}
ul#info-news li .news-main > li:nth-child(3) > p{font-size:11px; font-weight:bold !important; color:#f00; margin-top:10px; -webkit-font-smoothing:antialiased;}

ul#info-news li .news-main{width:100%;}
ul#info-news > li::before{
display:block;
position:absolute;
left:90px;
color:#fff;
font-weight:bold;
font-size:11px;
padding:0 10px;}
ul#info-news li.i_01::before{content:"NEWSONG"; background:#0084ff;}
ul#info-news li.i_02::before{content:"RANKING"; background:#26ca00;}
ul#info-news li.i_03::before{content:"EVENT"; background:#ff7800;}
ul#info-news li.i_04::before{content:"SHOP"; background:#ff00ae;}
ul#info-news li.i_05::before{content:"OTHER"; background:#f00;}

@media screen and (max-width:480px){
ul#info-news > li{padding:10px;}
ul#info-news li .news-main > li:nth-child(1){font-size:12px;}
ul#info-news li .news-main > li:nth-child(2){font-size:11px;}
ul#info-news li .news-main > li:nth-child(3){font-size:11px;}
ul#info-news li .news-main > li:nth-child(3) > p{font-size:10px;}}

/*
================================================================================================================
TOP専用
================================================================================================================
*/
#base.top #info{width:calc(100% - 40px);}
@media screen and (max-width:640px){#base.top #info{width:calc(100% - 20px);}}

/*
================================================================================================================
インフォメーション一覧ページ専用
================================================================================================================
*/
#infomation{position:relative; font-family:'Noto Sans JP', sans-serif; -webkit-font-smoothing:antialiased;}
#infomation #info > #info-inner{border-radius:0;}
#infomation #info ul#info-news{height:100%; min-height:400px; max-height:800px;}