/*
================================================================================================================
ニュース
================================================================================================================
*/
ul#news{
position:relative;
width:100%;
max-width:980px;
font-family:'Noto Sans JP', sans-serif; 
margin:0 auto;}

ul#news li > *{
position:relative;
display:flex;
width:100%;
color:#fff;
background-color:rgba(30,30,30,.95);
text-align:left;
padding:20px 10px;
margin:5px auto;
flex-wrap:wrap;}

ul#news li > * > p{position:relative;}
ul#news li > * > p:first-child{width:220px; font-size:14px;font-weight:400; letter-spacing:1px;}
ul#news li > * > p:first-child img{width:100%;}

ul#news li > * > p:last-child{width:calc(100% - 220px); font-size:12px; word-break:normal; padding-right:20px;}
ul#news li > * > p:last-child strong{display:block; font-size:15px; font-weight:700; margin-bottom:5px;}
ul#news li > div > p:last-child a{color:#fff !important; text-decoration:underline;}
ul#news li > div > p:last-child a:hover{text-decoration:none;}

@media screen and (max-width:640px){
ul#news li > * > p:first-child{width:100%; font-size:13px;}
ul#news li > * > p:last-child{width:100%; margin-top:10px; padding-right:0;}
ul#news li > a > p:last-child{padding-right:20px;}}

@media screen and (max-width:480px){
ul#news li > * > p:last-child{font-size:11px;}}

/*
========================
カテゴリ
========================
*/
ul#news li > * > p:first-child::before{
position:relative;
display:inline-block;
width:100px;
background-color:#ad1e24;
font-size:12px;
font-weight:400;
letter-spacing:0.5px;
text-align:center;
border-radius:20px;
padding:0 0 1px;
margin-right:20px;}
@media screen and (max-width:640px){ul#news li > * > p:first-child::before{margin-right:10px;}}

ul#news li[data-news="news01"] > * > p:first-child::before{content:"お知らせ"; background-color:#f00;}
ul#news li[data-news="news02"] > * > p:first-child::before{content:"更新";}
ul#news li[data-news="news03"] > * > p:first-child::before{content:"試合"; background-color:#0171b1;}
ul#news li[data-news="news04"] > * > p:first-child::before{content:"動画"; background-color:#ed5900;}
ul#news li[data-news="news05"] > * > p:first-child::before{content:"スペシャル"; background-color:#9b00d5;}
ul#news li[data-news="news06"] > * > p:first-child::before{content:"イベント"; background-color:#fd599b;}
ul#news li[data-news="news07"] > * > p:first-child::before{content:"キャンペーン"; background-color:#d0006c;}
ul#news li[data-news="news08"] > * > p:first-child::before{content:"グッズ"; background-color:#138500;}
ul#news li[data-news="news09"] > * > p:first-child::before{content:"プロテスト"; background-color:#b18101;}
ul#news li[data-news="news10"] > * > p:first-child::before{content:"ドラフト会議"; background-color:#00a1be;}
@media screen and (max-width:480px){ul#news li > * > p:first-child::before{font-size:10px;}}

/*
========================
カテゴリ-テキストリンク
========================
*/
ul#news li > * > a{display:inline-block; padding:0 5px; margin:0 5px 5px; border-bottom:1px solid transparent; transition:border .2s ease-in-out;}

ul#news li[data-news="news01"] > * > a{color:#f00;}
ul#news li[data-news="news02"] > * > a{color:#ad1e24;}
ul#news li[data-news="news03"] > * > a{color:#00a2ff;}
ul#news li[data-news="news04"] > * > a{color:#ffd375;}
ul#news li[data-news="news05"] > * > a{color:#9b00d5;}
ul#news li[data-news="news06"] > * > a{color:#fd599b;}
ul#news li[data-news="news07"] > * > a{color:#d0006c;}
ul#news li[data-news="news08"] > * > a{color:#138500;}
ul#news li[data-news="news09"] > * > a{color:#b18101;}
ul#news li[data-news="news10"] > * > a{color:#00a1be;}
ul#news li[data-news="news03"] > * > a:hover{border-bottom:1px solid #00a2ff;}
ul#news li[data-news="news04"] > * > a:hover{border-bottom:1px solid #ffd375;}
ul#news li[data-news="news03"] > * > p b span{display:inline-block; background-color:#999; color:#000; padding:0 8px; margin:0 10px 2px 0;}

/*
========================
リンクアニメーション
========================
*/
ul#news li > a{color:#fff; border:1px solid rgba(15,15,15,.9);}
ul#news li > a,
ul#news li > a > p{transition:.3s ease-in-out;}
ul#news li > a:hover{border:1px solid rgba(50,50,50,1);}
ul#news li > a:hover p{opacity:0.9;}

/*オンマウス矢印*/
ul#news li > a::before{
display:block;
position:absolute;
top:calc(50% - 6px);
right:15px;
content:"";
width:12px;
height:12px;
border-top:2px solid #fff;
border-right:2px solid #fff;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
opacity:0;
transition:.3s ease-in-out;}
ul#news li > a:hover::before{right:10px; opacity:1;}

@media screen and (max-width:640px){
ul#news li > a::before{right:10px; opacity:1; border-top:2px solid #ad1e24; border-right:2px solid #ad1e24;}
ul#news li[data-news="news01"] > a::before{border-top:2px solid #f00; border-right:2px solid #f00;}
ul#news li[data-news="news03"] > a::before{border-top:2px solid #0171b1; border-right:2px solid #0171b1;}
ul#news li[data-news="news04"] > a::before{border-top:2px solid #ed5900; border-right:2px solid #ed5900;}
ul#news li[data-news="news05"] > a::before{border-top:2px solid #9b00d5; border-right:2px solid #9b00d5;}
ul#news li[data-news="news06"] > a::before{border-top:2px solid #fd599b; border-right:2px solid #fd599b;}
ul#news li[data-news="news07"] > a::before{border-top:2px solid #d0006c; border-right:2px solid #d0006c;}
ul#news li[data-news="news08"] > a::before{border-top:2px solid #138500; border-right:2px solid #138500;}
ul#news li[data-news="news09"] > a::before{border-top:2px solid #b18101; border-right:2px solid #b18101;}
ul#news li[data-news="news10"] > a::before{border-top:2px solid #00a1be; border-right:2px solid #00a1be;}}

/*
================================================================================================================
ニュース一覧/ソート機能
================================================================================================================
*/
#news-list.section{background-color:rgba(209,209,209,0) !important; padding:0 !important;}
#news-list ul#news{max-width:1200px !important;}

#news-list ul#news li{display:none;}
#news-list ul#news li.selected{display:block;}

/*
========================
トグル
========================
*/
#toggle,#toggle-inner{font-family:'Noto Sans JP', sans-serif;}

#toggle{position:relative; color:#fff; background-color:#222; font-size:14px; text-align:center; padding:5px; margin:0 0 0 auto; transition:.3s ease-in-out;}
#toggle:hover,#toggle.open:hover{cursor:pointer; background-color:#222;}
#toggle::before,#toggle::after{display:block; content:""; position:absolute; top:14px; right:10px; height:2px; width:15px; background-color:#fff; transition:.3s ease-in-out;}
#toggle::after{transform:rotate(90deg);}
#toggle.open{background-color:#000;}
#toggle.open::before{transform:rotate(180deg);}
#toggle.open::after{transform:rotate(0); opacity:0;}

#toggle-inner{display:none;}
#toggle-inner + ul#news{margin-top:20px;}

#toggle{width:calc(20% - 5px);}
@media screen and (max-width:700px){#toggle{width:calc(25% - 5px);}}
@media screen and (max-width:520px){#toggle{width:calc(50% - 5px);}}

/*
========================
ソートメニュー
========================
*/
.sort-cat{display:flex; flex-wrap:wrap; justify-content:space-between;}
.sort-cat > div{margin:5px 0;}
.sort-cat:first-of-type > div{width:calc(20% - 5px);}
.sort-cat:nth-of-type(2) > div{width:calc((100% / 3) - 5px);}
@media screen and (max-width:520px){
.sort-cat:nth-of-type(2) > div{width:100%;}
.sort-cat:first-of-type > div{width:calc(50% - 5px);}}

.sort-cat input{display:none;}
.sort-cat input[type=checkbox]:checked + label{color:#fff;}

.sort-reset,
.sort-cat label{display:block; width:100%; color:#fff; background:rgba(51,51,51,.9); text-align:center; border:1px solid #000; padding:5px 0; transition:all .2s ease;}
.sort-reset:hover,
.sort-cat label:hover{cursor:pointer;;}

.sort-reset{margin:5px auto; border-radius:5px;}
.sort-reset:hover{background:#000;}

.sort-num{text-align:center; margin:10px auto;}

/*
========================
ソートメニュー-チェック時
========================
*/
.sort-cat:first-of-type > div:first-child:hover label,.sort-cat:first-of-type > div:first-child input[type=checkbox]:checked + label{background-color:#f00; border:1px solid #f00;}
.sort-cat:first-of-type > div:nth-child(2):hover label,.sort-cat:first-of-type > div:nth-child(2) input[type=checkbox]:checked + label{background-color:#ad1e24; border:1px solid #ad1e24;}
.sort-cat:first-of-type > div:nth-child(3):hover label,.sort-cat:first-of-type > div:nth-child(3) input[type=checkbox]:checked + label{background-color:#0171b1; border:1px solid #0171b1;}
.sort-cat:first-of-type > div:nth-child(4):hover label,.sort-cat:first-of-type > div:nth-child(4) input[type=checkbox]:checked + label{background-color:#ed5900; border:1px solid #ed5900;}
.sort-cat:first-of-type > div:nth-child(5):hover label,.sort-cat:first-of-type > div:nth-child(5) input[type=checkbox]:checked + label{background-color:#9b00d5; border:1px solid #9b00d5;}
.sort-cat:first-of-type > div:nth-child(6):hover label,.sort-cat:first-of-type > div:nth-child(6) input[type=checkbox]:checked + label{background-color:#fd599b; border:1px solid #fd599b;}
.sort-cat:first-of-type > div:nth-child(7):hover label,.sort-cat:first-of-type > div:nth-child(7) input[type=checkbox]:checked + label{background-color:#d0006c; border:1px solid #d0006c;}
.sort-cat:first-of-type > div:nth-child(8):hover label,.sort-cat:first-of-type > div:nth-child(8) input[type=checkbox]:checked + label{background-color:#138500; border:1px solid #138500;}
.sort-cat:first-of-type > div:nth-child(9):hover label,.sort-cat:first-of-type > div:nth-child(9) input[type=checkbox]:checked + label{background-color:#b18101; border:1px solid #b18101;}
.sort-cat:first-of-type > div:nth-child(10):hover label,.sort-cat:first-of-type > div:nth-child(10) input[type=checkbox]:checked + label{background-color:#00a1be; border:1px solid #00a1be;}

.sort-cat:nth-of-type(2) > div:hover label,.sort-cat:nth-of-type(2) > div input[type=checkbox]:checked + label{background-color:#888; border:1px solid #888;}