/*フォント*/
#main.hunt-list ul.date li,
#hunt-select p,
#hunt-select ul li,
#attention-select p,
#attention-select ul li,
#main.hunt-list .box .title,
#main.hunt-list .cat .tag,
#main.hunt-list .cat ul li{font-family:"M PLUS Rounded 1c", sans-serif; transform:rotate(0.03deg);}

#main-inner #inner{min-height:2700px;}

#page-select{margin:0 auto 20px;}
#page-select > div{padding:0 10px 10px;}

#inner h2{width:calc(100% - 20px);}

#caution.box::before,
#caution.box::after{display:none;}
#caution.box{background:#fbe0ff; padding:10px; margin-top:20px;}

/*
================================================================================================================
ハント 獲得アイテム一覧
================================================================================================================
*/
.box.hunt_select{width:calc(100% - 20px); background:linear-gradient(45deg, #f7fddf 0%,#f9d9fc 50%); border-color:#c7a6e9; margin:0 auto 20px;}
.box.hunt_select > p{color:#63289c; font-weight:700; margin:0 auto 5px;}

/*
========================
アイテム一覧
========================
*/
#item_list{
width:calc(100% - 20px);
color:#695ca7;
background:#fff;
border:3px solid #fbe0ff;
border-radius:10px;
padding:5px;
margin:0 auto;
}



@media screen and (max-width:480px){#item_list{width:calc(100% - 10px);}}

#item_list .supportsnap > div,
#item_list .contenter > div,
#item_list .cusgene{/*display:flex;*/ flex-wrap:wrap;}

.item{width:calc(100% / 3); opacity:.5; filter:grayscale(40%); padding:5px;
font-family: "M PLUS Rounded 1c", sans-serif; transform: rotate(0.03deg); line-height: 14px;
display: grid; text-align: center;
}

.item a{pointer-events: none;}/*ポップアップしない*/

.item img{width:100%;}
.item.have_item{opacity:1; filter:grayscale(0);}
.item .item_title{font-size: 10px; }
.item .item_name{font-size: 14px;}
.item .up_btn{
    font-size: 12px;
    margin-top: 4px;
    color: white;
    color: white;
    border: solid 2px #8d7fcf;
    border-radius: 10px;
    line-height: 16px;
    height: 20px;
    background: #ff9dcf;
    box-shadow: 0px 2px 0px 0px #8d7fcf;
    cursor:pointer;
}
.item .up_btn:after{
    content:"アップロードする";
}
.item .up_btn.done{
    background: #6bdcc8;
    border: solid 2px #5abaa9;
    box-shadow: 0px 2px 0px 0px #5abaa9;    
    pointer-events: none;
}
.item .up_btn.done:after{
    content:"アップロード済み";
}

.item .up_btn.none{
    background: #ccc;
    border: solid 2px #a7a7a7;
    box-shadow: 0px 2px 0px 0px #a7a7a7;    
    pointer-events: none;
}
.item .up_btn.none:after{
    content:"未所持";
}


@media screen and (max-width:480px){
.item .item_title{font-size: 10px;}
.item .item_name{font-size: 12px;}
.item .up_btn{font-size: 10px;}
}



/*見出し*/
#item_list .title{
display:block;
position:relative;
width:100%;
height:34px;
border-radius:10px;
border:1px solid #000;
box-shadow:1px 1px 1px #fff inset , -1px -1px 1px #fff inset;
margin:0 auto 10px;}
#item_list div + .title{margin-top:30px;}
#item_list .title::before{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-size:auto 26px;
background-repeat:no-repeat;
background-position:center;
filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #fff);}

#item_list .title:nth-of-type(1){background:linear-gradient(135deg, #edfbcd 0%,#ff93d8 33%,#e1bbff 50%,#c5aeff 67%,#cffacd 100%); border-color:#fb7ae1;}
#item_list .title:nth-of-type(3){background:linear-gradient(135deg, #fceabb 0%,#fccd4d 30%,#e0ca81 50%,#f8b500 70%,#fbdf93 100%); border-color:#dca226;}
#item_list .title:nth-of-type(5){background:linear-gradient(135deg, #ebe9f9 0%,#d8d0ef 30%,#c1b7cc 50%,#cec7ec 70%,#ebe9f9 100%); border-color:#b0a8ba;}
#item_list .title:nth-of-type(1)::before{background-image:url(../img/playdata/rarity/ssr.png);}
#item_list .title:nth-of-type(3)::before{background-image:url(../img/playdata/rarity/sr.png);}
#item_list .title:nth-of-type(5)::before{background-image:url(../img/playdata/rarity/r.png);}

@media screen and (max-width:480px){
#item_list{padding:10px 5px;}
.item{padding:2.5px;}
#item_list .title{margin:0 auto 5px;}
#item_list div + .title{margin-top:20px;}}

/*
========================
ポップアップ
========================
*/
.mfp-container{width:100% !important; left:0 !important;}
.mfp-image-holder .mfp-content{width:90% !important;}
.mfp-counter{display:none;}
.mfp-figure:after{display:none !important;}
.mfp-figure img{max-width:800px;}
@media screen and (max-width:900px){.mfp-image-holder .mfp-content{width:80% !important;}}
@media screen and (max-width:560px){.mfp-image-holder .mfp-content{width:78% !important;}}

/*
================================================================================================================
ハント 排出アイテム一覧
================================================================================================================
*/

/*
========================
リンク
========================
*/
.hunt-bnr{background:#fff; border-top:2px solid #b77fb5;}
.hunt-bnr a:hover img{opacity:.7;}

#main.hunt-list p.btn-link{
height:50px;
border-left:none;
border-right:none;
border-radius:0;
box-shadow:none;
padding:10px 0;
margin:0 auto;}
#main.hunt-list p.btn-link::after{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image:url(../img/common/btn/text/shop.png);
background-size:auto 80%;
background-repeat:no-repeat;
background-position:center;}
.hunt-bnr a:hover p.btn-link{filter:drop-shadow(3px 5px 1px rgba(45,35,96,.2));}
.hunt-bnr a:hover p.btn-link::before{opacity:1;}

@media screen and (max-width:440px){#main.hunt-list p.btn-link{height:40px;}}

/*
========================
ハント名･開催期間
========================
*/
#main.hunt-list ul.date{
width:calc(100% - 40px);
color:#695ca7;
background:#fff;
text-align:center;
border:2px solid #fbe0ff;
border-radius:40px;
padding:10px;
margin:20px auto;}
#main.hunt-list ul.date li:nth-child(1){font-weight:800; padding:0 20px;}
#main.hunt-list ul.date li:nth-child(2){font-size:13px; letter-spacing:1px; border-top:1px solid #fbe0ff; padding-top:5px; margin-top:5px;}
#main.hunt-list ul.date li:nth-child(2)::before{content:"開催期間：";}
#main.hunt-list ul.date li:nth-child(2)::after{content:"まで";}
@media screen and (max-width:420px){
#main.hunt-list ul.date{width:calc(100% - 20px); border-radius:20px;}
#main.hunt-list ul.date li:nth-child(1){padding:0;}
#main.hunt-list ul.date li:nth-child(2){font-size:12px;}}

/*
========================
プルダウンメニュー
========================
*/
#hunt-select,#attention-select{position:relative; width:calc(100% - 40px); margin:10px auto; z-index:3;}

#hunt-select > p,#attention-select > p,
#hunt-select > ul,#attention-select > ul{
color:#695ca7;
background:#ffdaf7;
text-align:center;
border:2px solid #b77fb5;}

/*注意事項*/
#attention-select > ul{
/*display:none;*/
position:relative;
margin-top:10px;
width:100%;
padding:10px;
z-index:4;
text-align:left;
}



/*ボタン*/
#hunt-select > p,#attention-select > p{position:relative; font-size:16px; font-weight:800; border-radius:40px; padding:5px; cursor:pointer;}
#hunt-select > p::before,#attention-select > p::before{
display:block;
content:"";
position:absolute;
right:10px;
top:calc(50% - 8px);
width:12px;
height:12px;
border-right:2px solid #b77fb5;
border-bottom:2px solid #b77fb5;
transform:rotate(45deg);
transition:all .2s ease;}
#hunt-select > p.open::before,#attention-select > p.open::before{top:calc(50% - 3px); transform:rotate(-135deg);}

/*リスト*/
#hunt-select > ul{
display:none;
position:absolute;
top:40px;
left:0;
width:100%;
border-radius:10px;
padding:0 10px;
z-index:4;}
#hunt-select > ul li{text-align:left;}
#hunt-select > ul li + li{border-top:1px solid #b77fb5;}
#hunt-select > ul li a{display:block; color:#695ca7 !important; padding:10px; transition:color .2s ease; cu}
#hunt-select > ul li a:hover{color:#fb56a8 !important;}


@media screen and (max-width:480px){
#hunt-select{margin:10px auto 20px;}
#hunt-select > p{font-size:14px;}}
@media screen and (max-width:370px){
#hunt-select > ul li a{text-align:left; padding:10px 0;}}

/*
========================
リスト名
========================
*/
#main.hunt-list .box .title{
font-weight:700;
text-align:center;
letter-spacing:1px;
border-bottom:2px solid #fbe0ff;
padding:10px 0;
margin:0 auto 20px;}
#main.hunt-list .box .title::before{content:"出現";}
#main.hunt-list .box .title::after{content:"一覧";}

/*
========================
リスト
========================
*/
#main.hunt-list .cat + .cat{margin-top:20px;}
#main.hunt-list .cat .tag{position:relative;}
#main.hunt-list .cat .tag{
position:relative;
width:60px;
height:22px;
color:#fff;
background:#695ca7;
text-align:center;
font-size:14px;
font-weight:700;
line-height:24px;
font-weight:800;
border-bottom:none;
border-radius:10px 0 0 0;
padding-left:5px;}
#main.hunt-list .cat .tag::before{
display:block;
content:"";
position:absolute;
top:0;
right:-22px;
width:0;
height:0;
border-style:solid;
border-width:22px 0 0 22px; 
border-color:transparent transparent transparent #695ca7;}
#main.hunt-list .cat ul{border:2px solid; border-radius:0 20px 0 20px; padding:20px;}
#main.hunt-list .cat ul li{padding:5px;}
#main.hunt-list .cat ul li + li{border-top:1px solid #dfd8ff;}

#main.hunt-list .cat.cusgene ul{border:none; padding:0;}

@media screen and (max-width:480px){#main.hunt-list .cat ul{padding:10px;}}




/*中-見出し*/
h4{color:#fff; background:#695ca7; border-radius:10px; padding:10px; margin:20px auto 10px;}
h4.pink{background:#fb56a8;}

.box > ul.dot{margin:10px auto 20px;}
.box ul.dot{line-height:150%; margin: 10px auto;}
.box ul.dot li + li{margin-top:5px;}
.box ul.dot li a,
.box ul.ast li a{color:#fb56a8; text-decoration:underline;}
.box ul.dot li a:hover,
.box ul.ast li a:hover{text-decoration:none;}

#inner #attention-select h3 {
    width: 100%;
}