@charset "Shift-JIS";

/*
================================================================================================================
NEWS
================================================================================================================
*/
/*
========================
テキストのみ ニュース一覧
========================
*/
#news-text{
position:relative;
background-color:#fff;
background-image:url(../img/news/cat/icn.png);
background-repeat:no-repeat;
background-position:top left;
background-size:30px auto;
border-left:10px solid #ff318c;
border-bottom:3px solid #ff318c;
padding:10px 20px 10px 50px;
margin:0 auto 40px;}
#news-text::before{
display:block;
content:"";
position:absolute;
top:0;
right:0;
width:calc(100% / 4);
height:100%;
background:linear-gradient(to right, rgba(255,49,140,0) 0%,rgba(255,49,140,1) 100%);}

#news-text > .news-list{display:flex; flex-wrap:wrap;}
#news-text > .news-list > *{width:100%;}
#news-text > .news-list > .red{order:1; color:#f00; font-weight:bold;}
#news-text > .news-list > .red:hover{color:#ff318c;}
#news-text > .news-list > *:not(.red){order:2;}

@media screen and (max-width:800px){
#news-text{margin:0 auto 20px;}
#news-text::before{display:none;}}
@media screen and (max-width:700px){
#news-text{background-size:20px auto; border-left:5px solid #ff318c; padding:5px 10px 5px 25px;}}

/*記事中身*/
#news-text > div > *{margin:5px auto;}
#news-text > div  > a{transition:all .2s ease;}
#news-text > div  > a:hover{color:#ff318c;}

#news-text ul li:first-child{display:flex; flex-wrap:wrap;}
#news-text ul li:nth-child(2){display:none;}
#news-text div p:first-child{width:100px;}
#news-text div p:nth-child(2){width:calc(100% - 100px);}

/*テキストのみ 注意喚起*/
#news-text > .news-notice > *{display:flex; flex-wrap:wrap; color:#f00; font-weight:bold;}
#news-text > .news-notice span{display:block; font-size:12px; font-weight:normal;}

@media screen and (max-width:700px){
#news-text > div > *{border-bottom:1px solid #ccc;}
#news-text div p:first-child,
#news-text div p:nth-child(2){width:100% !important;}}
@media screen and (max-width:640px){
#news-text div p:first-child{width:90px;}
#news-text div p:nth-child(2){width:calc(100% - 90px);}}
@media screen and (max-width:480px){
#news-text > div{font-size:10px;}}

/*
========================
バナー有 ニュース一覧
========================
*/
#news-pickup > .news-list{display:flex; flex-wrap:wrap;}
#news-pickup > .news-list > *{width:calc(100% / 3 - 10px); background-color:#fff; margin:20px 0;}

#news-pickup > .news-list ul{display:flex; flex-wrap:wrap;}
#news-pickup > .news-list ul li{width:100%;}
#news-pickup > .news-list ul li:first-child{order:2; padding:20px;}
#news-pickup > .news-list ul li:first-child p:first-child{color:#7b748c; font-weight:bold;}
#news-pickup > .news-list ul li:nth-child(2){order:1;}

#news-pickup > .news-list > a{transition:opacity .2s ease;}
#news-pickup > .news-list > a:hover{opacity:.8;}

@media screen and (min-width:801px){
#news-pickup > .news-list > *:nth-child(3n - 1){margin:20px 15px;}}
@media screen and (max-width:800px){
#news-pickup > .news-list > *{width:calc(100% / 2 - 10px);}
#news-pickup > .news-list > *:nth-child(odd){margin:20px 10px 20px 0;}
#news-pickup > .news-list > *:nth-child(even){margin:20px 0 20px 10px;}}
@media screen and (max-width:640px){
#news-pickup > .news-list > *{width:100%; margin:20px 0 !important;}}
@media screen and (max-width:480px){
#news-pickup > .news-list ul li:first-child{padding:10px;}}

/*
========================
共通項目
========================
*/
.news-list > *{display:block; position:relative; color:#000;}
.news-list img{width:100%;}
.news-list ul li:nth-child(2) p:first-child{font-weight:bold;}

/*
========================
カテゴリー
========================
*/
#news-pickup > .news-list > .news01{border-bottom:3px solid #fa006a;}
#news-pickup > .news-list > .news02{border-bottom:3px solid #ff9c00;}
#news-pickup > .news-list > .news03{border-bottom:3px solid #00b4ff;}
#news-pickup > .news-list > .news04{border-bottom:3px solid #92d600;}

/*カテゴリー見出し*/
#news-pickup > .news-list > *::before{
display:block;
position:absolute;
top:-22px;
left:0;
width:100%;
height:22px;
color:#fff;
background-repeat:no-repeat;
background-position:left;
background-size:auto 100%;
font-weight:800;
font-family:'M PLUS 1', sans-serif;
line-height:20px;
padding-left:50px;}
#news-pickup > .news-list > .news01::before{content:"インフォメーション"; background-color:#fa006a; background-image:url(../img/news/cat/icn01.png);}
#news-pickup > .news-list > .news02::before{content:"イベント"; background-color:#ff9c00; background-image:url(../img/news/cat/icn02.png);}
#news-pickup > .news-list > .news03::before{/*content:"バトルギフト追加";*/ content:"アイテム追加"; background-color:#00b4ff; background-image:url(../img/news/cat/icn03.png);}
#news-pickup > .news-list > .news04::before{content:"キャンペーン"; background-color:#92d600; background-image:url(../img/news/cat/icn04.png);}

/*
================================================================================================================
NEWS詳細
================================================================================================================
*/
#news{width:100%; max-width:980px; margin:0 auto;}
#news > div{color:#000; background-color:#fff; line-height:180%; padding:20px; margin:20px auto;}
#news > div + div{margin:40px auto;}

#news > div img{width:100%;}

/*見出し部分*/
#news > div > ul{font-size:16px; font-family:'M PLUS 1', sans-serif; font-weight:800;}
#news > div > ul li p{position:relative;}
#news > div > ul li p:last-child{font-size:18px; margin-top:35px;}
#news > div > ul li:nth-child(2){margin:10px auto 0;}/*見出し用バナー*/

/*お知らせ中身*/
#news > div .red{color:#fe0074;}
#news > div > .text{padding:20px 10px 0 20px;}
#news > div > .text b{display:block; color:#0874fb;}
#news > div > .text > b{font-size:16px; border-bottom:1px solid #0874fb; margin:30px auto 10px;}
#news > div > .text a{color:#fe0074; text-decoration:underline;}
#news > div > .text a:hover{text-decoration:none;}

@media screen and (max-width:640px){
#news > div{padding:10px; margin:10px auto;}
#news > div + div{margin:20px auto;}
#news > div > ul{font-size:14px;}
#news > div > ul li p:last-child{font-size:16px;}
#news > div > .text{padding:10px 5px 0;}
#news > div > .text > b{font-size:15px;}}

@media screen and (max-width:480px){
#news > div > ul{font-size:13px;}
#news > div > ul li p:last-child{font-size:15px;}
#news > div > .text > b{font-size:13px; margin:20px auto 10px;}}

/*
========================
カテゴリー
========================
*/
#news > div > ul li p:first-child::after{
display:block;
position:absolute;
bottom:-30px;
left:0;
width:100%;
height:22px;
color:#fff;
background-repeat:no-repeat;
background-position:left;
background-size:auto 100%;
line-height:20px;
padding-left:50px;}
#news > .news01 > ul li p:first-child::after{content:"インフォメーション"; background-color:#fa006a; background-image:url(../img/news/cat/icn01.png);}
#news > .news02 > ul li p:first-child::after{content:"イベント"; background-color:#ff9c00; background-image:url(../img/news/cat/icn02.png);}
#news > .news03 > ul li p:first-child::after{/*content:"バトルギフト追加";*/ content:"アイテム追加"; background-color:#00b4ff; background-image:url(../img/news/cat/icn03.png);}
#news > .news04 > ul li p:first-child::after{content:"キャンペーン"; background-color:#92d600; background-image:url(../img/news/cat/icn04.png);}

/*
================================================================================================================
ページネーション
================================================================================================================
*/
.pagination-container{position:relative;}
.pagination-container ul{
width:100%;
display:flex;
justify-content:center;}

.pagination-container a{
display:block;
width:32px;
height:32px;
color:#fff;
background-color:#666;
font-size:18px;
font-weight:bold;
line-height:32px;
text-align:center;
border-radius:3px;
margin:0 2px;
transition:all .2s ease;}

.pagination-container a:hover,
.pagination-container li.active a{background-color:#ff006c;}

.pagination-container li.disabled{display:none;}

/*
================================================================================================================
バトルギフト
================================================================================================================
*/
ul.battle-gift{
display:flex;
width:100%;
max-width:400px;
background-color:#ffe9db;
border:1px solid #50d6ce;
border-top:none;
margin:10px auto 0 0;
flex-wrap:wrap;}

ul.battle-gift li{position:relative; padding:5px; border-top:1px solid #50d6ce;}
ul.battle-gift li img{width:100%; max-width:100px;}
ul.battle-gift li:nth-child(odd){width:100px;}
ul.battle-gift li:nth-child(even){width:calc(100% - 100px); color:#004080; font-weight:bold;}

ul.battle-gift li p{display:flex; width:100%; height:100%; align-items:center;}

@media screen and (max-width:480px){
ul.battle-gift li img{width:100%; max-width:70px;}
ul.battle-gift li:nth-child(odd){width:70px;}
ul.battle-gift li:nth-child(even){width:calc(100% - 70px);}}

/*ミッション限定*/
ul.battle-gift li.limit::before{
display:block;
content:"ミッション出現アイテム";
position:absolute;
left:0;
width:100%;
max-width:160px;
color:#fff;
background-color:#ff8b43;
line-height:100%;
font-size:12px;
font-weight:normal;
text-align:center;
border-radius:10px;
padding:3px 0;}
@media screen and (min-width:481px){
ul.battle-gift li.limit p{padding-top:20px;}
ul.battle-gift li.limit::before{top:25px;}}
@media screen and (max-width:480px){
ul.battle-gift li.limit p{padding-top:15px;}
ul.battle-gift li.limit::before{top:10px; max-width:150px; font-size:11px;}}

/*
================================================================================================================
サバイバルLIVE用
================================================================================================================
*/
dl.mc{
display:flex;
width:100%;
color:#0874fb;
font-family:'M PLUS 1', sans-serif;
font-weight:800;
margin:0 auto;
flex-wrap:wrap;}
dl.mc > *{width:50%; padding:10px; background-color:#fff; border:1px solid #0874fb;}
dl.mc > dt{font-size:18px; background-color:#d0e5ff;}
dl.mc > dd{font-size:20px;}

@media screen and (min-width:541px){
dl.mc > dt{border-right:none;}
dl.mc > dt:first-of-type,
dl.mc > dd:first-of-type{border-bottom:none;}}
@media screen and (max-width:540px){
dl.mc{flex-wrap:wrap;}
dl.mc > *{width:100%; text-align:center;}
dl.mc > *:not(:last-child){border-bottom:none;}}
@media screen and (max-width:480px){
.catch{font-size:14px;}
dl.mc > dt{font-size:16px;}
dl.mc > dd{font-size:18px;}}

.box-toggle{position:relative; color:#fff; background-color:#fe0074; font-size:15px; font-weight:bold; text-align:center; padding:10px;}
.box-toggle:hover{cursor:pointer;}
.box-toggle::before,
.box-toggle::after{
display:block;
content:"";
position:absolute;
background-color:#fff;}
.box-toggle::before{top:calc(50% - 10px); right:23px; width:3px; height:20px; transition:all .3s ease;}
.box-toggle::after{top:calc(50% - 1.5px); right:13.5px; width:20px; height:3px;}
.box-toggle.open::before{opacity:0; transform:rotate(90deg);}
.box{
display:none;
width:100%;
background-color:rgba(249,211,229,.5);
font-size:14px;
padding:10px;
margin:0 auto;}
.box b{
display:block;
color:#fe0074 !important;
background-color:rgba(255,255,255,.5);
text-align:center;
border:1px solid #fe0074;
border-radius:5px;
padding:5px;
margin:20px auto 5px !important;}
.box b:first-of-type{margin:0 auto 10px;}
.box .movie{width:100% !important;}

/*IE11*/
@media (-ms-high-contrast: none), (-ms-high-contrast: active) and (min-width:801px) {
#news-pickup > .news-list > *:nth-child(3n - 1){margin:20px 10px;}}

/*
================================================================================================================
2022/07/27 アップデート
================================================================================================================
*/
.occ table{font-size:12px; border:1px solid; margin-top:5px;}
.occ table + table{margin-top:10px;}
.occ table td{text-align:center; border:1px solid; padding:5px 0;}
.occ table td:first-child{width:160px;}
.occ table td br{display:none;}

.occ table:first-child{background:#9cc7fd;}
.occ table:nth-child(2){background:#fd99c3;}
.occ table tr:first-child td{font-weight:bold;}
.occ table tr:not(:first-child){background:rgba(255,255,255,.6)}

@media screen and (max-width:420px){
.occ table{font-size:11px;}
.occ table td:first-child{width:140px;}}

@media screen and (max-width:380px){
.occ table td br{display:block;}
.occ table td:first-child{width:90px;}}

/*
================================================================================================================
2022/07/28 新クイズ形式
================================================================================================================
*/
ul.q-title{border:1px solid #000; margin:20px auto;}
ul.q-title li + li{border-top:1px solid #000;}
ul.q-title li{display:flex; font-weight:bold; padding:10px; align-items:center; justify-content:space-between;}
ul.q-title li p:last-child{display:flex; align-items:center;}
ul.q-title li p span{display:inline-block; color:#004080; padding-right:10px;}
ul.q-title li img{width:100%; max-width:288px;}
@media screen and (max-width:800px){ul.q-title li p{width:50%;}}
@media screen and (max-width:640px){
ul.q-title li{flex-wrap:wrap;}
ul.q-title li p{width:100%; text-align:center;}
ul.q-title li p:last-child{flex-wrap:wrap; justify-content:center;}
ul.q-title li p span{display:block; width:100%; text-align:center; padding-right:0;}
ul.q-title li p + p{margin-top:5px;}
ul.q-title li img{max-width:200px;}}