@charset "Shift-JIS";

/*データ閲覧・アイテム背景画像*/
.kmmc_wrap#anima {}

.kmmc_wrap#anima #pegetitle.tab0{
background-image:url(../../img/data/anima/mainvisual/main0.png),url(../../img/data/anima/mainvisual/bg0.jpg);
}
.kmmc_wrap#anima #pegetitle.tab1{
background-image:url(../../img/data/anima/mainvisual/main1.png),url(../../img/data/anima/mainvisual/bg1.jpg);
}
.kmmc_wrap#anima #pegetitle.tab2{
background-image:url(../../img/data/anima/mainvisual/main2.png),url(../../img/data/anima/mainvisual/bg2.jpg);
}
.kmmc_wrap#anima #pegetitle.tab3{
background-image:url(../../img/data/anima/mainvisual/main3.png),url(../../img/data/anima/mainvisual/bg3.jpg);
}
.kmmc_wrap#anima #pegetitle.tab4{
background-image:url(../../img/data/anima/mainvisual/main4.png),url(../../img/data/anima/mainvisual/bg4.jpg);
}
.kmmc_wrap#anima #pegetitle.tab5{
background-image:url(../../img/data/anima/mainvisual/main5.png),url(../../img/data/anima/mainvisual/bg5.jpg);
}
/*データ閲覧・アイテム メイン表示エリア背景*/
#anima .playdata,#anima .itemdata{
background-image:url(../../img/common/product/anima/bg_up.png),repeating-linear-gradient(135deg, #409e15, #409e15 20px, #56b81d 20px, #56b81d 22px);
background-size:auto 300px,auto;
background-repeat:repeat-x,repeat;
background-position:center top,center;
}

/* .kmmc_wrap#anima{ */

/*データ閲覧　データ選択タブ*/
.kmmc_wrap#anima #data_tab li:not(.lock){background-color:#56b81d;}
.kmmc_wrap#anima #data_tab li.selected{background-color:#409e15;color:#fff100;}

/*データ閲覧　タイトル枠*/
.kmmc_wrap#anima .playdata .title{
position:relative;
color:#feffa3;
text-shadow: 2px 2px 0 #612308, -2px -2px 0 #612308,-2px 2px 0 #612308, 2px -2px 0 #612308,2px 0 0 #612308, -2px 0 0 #612308,0 2px 0 #612308, 0 -2px 0 #612308;
padding:0 16px;
background-image: url(../../img/data/anima/title_left.png),url(../../img/data/anima/title_right.png);
background-position:center left,center right;
background-repeat:no-repeat;
background-size:auto 100%;
}
.kmmc_wrap#anima .playdata .title span{display: inline-block;width:100%;padding:10px;
background-image: url(../../img/data/anima/title_bg.jpg);
background-size:auto 100%;}
.kmmc_wrap#anima .playdata .title::after{
position:absolute;top:0;right:0;content:'';width:44px;height:40px;
background-image:url(../../img/data/anima/title_after.png);background-repeat:no-repeat;
background-size:auto 100%;}


/*コンテンツ枠*/
.kmmc_wrap#anima .box{width: 98%;background-color: #FFF;border-radius: 6px;margin: 0 auto;padding: 5px;overflow: hidden;}
.kmmc_wrap#anima .box ul,
.kmmc_wrap#anima .kmmc_wrap#anima .box ul li{width: 100%;margin-bottom:0;}


/*プルダウンメニュー*/
.kmmc_wrap#anima .sort_area{display: flex;justify-content: center; margin-bottom:20px;}
.kmmc_wrap#anima .sort_pull{
    width:100%;
    max-width: 400px;
    display: inline-flex;
    align-items: center;
    position: relative;
}    
.kmmc_wrap#anima .sort_pull::after {
    position: absolute;
    right: 15px;
    width: 10px;
    height: 7px;
    background-color: #286b60;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
}
.kmmc_wrap#anima select.sort_switch{
    appearance: none;
    width:100%;
    height: 36px;
    padding: 2px calc(2px + 30px) 2px 4px;
    border: 2px solid #286b60;
    border-radius: 15px;
    background-color: #f0fc4c;
    color: #000;
    font-size: 16px;
    text-align:center;
    cursor: pointer;
}


/*区切り線*/
.kmmc_wrap#anima .line{width:96%;height:1px;margin:10px auto;}
.kmmc_wrap#anima .line.ye{border-top:4px dotted #fff100;}
.kmmc_wrap#anima .line.gr{border-top:4px dotted #409e15;}
.kmmc_wrap#anima .line.brown{border-top:4px dotted #aa762b;}

/*ページネーション*/
.kmmc_wrap#anima ul#ani_pege_navi{width:96%;max-width:400px;margin:10px auto;display:flex;justify-content:space-between;}
.kmmc_wrap#anima ul#ani_pege_navi li{display:flex;justify-content: center;align-items: center;margin:0 5px;}
.kmmc_wrap#anima ul#ani_pege_navi li#prev,
.kmmc_wrap#anima ul#ani_pege_navi li#next{cursor:pointer;width:calc((100% - 100px) / 2);height:36px;border-radius:6px;border:3px solid #FFF;font-weight:bold;color:#FFF;background: linear-gradient(#ff4b5f, #dc283c);}
.kmmc_wrap#anima ul#ani_pege_navi li#prev.none,ul#ani_pege_navi li#next.none{background:#999;opacity:0.75;}
.kmmc_wrap#anima ul#ani_pege_navi li#prev::before{content: " ◀ 前のページ"}
.kmmc_wrap#anima ul#ani_pege_navi li#next::after{content: "次のページ ▶ "}
.kmmc_wrap#anima ul#ani_pege_navi li#page{width:80px;padding:0 5px;text-align:center;font-weight:bold;font-size:16px;border-radius:20px;background-color: #fff100;color: #30c045;}

/*★画像*/
.kmmc_wrap#anima img.star{width:23px;height:22px;}
 
/*NEWマーク*/
.kmmc_wrap#anima .playdata .new{position:absolute;z-index:2;
background-image: url(../../img/data/anima/new.png);
background-position:center;
background-repeat:no-repeat;
background-size:cover;}
 
  

/*プロフ・称号*/
.kmmc_wrap#anima ul#motion li{width:100%;padding:5px 0;}
.kmmc_wrap#anima ul#movelist,
.kmmc_wrap#anima ul#titlelist{margin:20px auto;width:100%;max-width:800px;display:flex;justify-content:start;flex-wrap: wrap;}
.kmmc_wrap#anima ul#movelist li,
.kmmc_wrap#anima ul#titlelist li{
background-color:transparent;
background-color:#a7fb59;
background-image: radial-gradient(circle, #f0fc4c 1px, transparent 1px), radial-gradient(circle, #f0fc4c 1px, transparent 1px);
background-position: 0 0, 6px 12px;
background-size: 12px 24px;
width:calc(50% - 10px);margin:5px;padding:10px 5px;border-radius:6px;display:flex;justify-content: center;color#000;}
.kmmc_wrap#anima ul#movelist li.nohave,
.kmmc_wrap#anima ul#titlelist li.nohave{color#FFF;background-color: #59d03e;}

/*プロフ*/
.kmmc_wrap#anima ul li .ani_icon{margin-right: auto;}
.kmmc_wrap#anima ul.ani_data{margin:0;}
.kmmc_wrap#anima ul.ani_data li{display:flex;justify-content:flex-end;white-space: nowrap;} 
.kmmc_wrap#anima ul.ani_data li .ani_lv{margin-left:10px;font-size:24px;color:#999;}


/*アクセサリー*/
.kmmc_wrap#anima ul#accelist{margin:20px auto;width:100%;max-width:800px;display:flex;justify-content: start;flex-wrap: wrap;}
.kmmc_wrap#anima ul#accelist li{background-color:transparent;width:70px;height:70px;margin:5px;padding:0;position: relative;}
.kmmc_wrap#anima ul#accelist li img{width:70px;height:70px;}
.kmmc_wrap#anima ul#accelist li .new{width:35px;height:15px;bottom:3px;left: 50%;transform: translateX(-50%);}

.kmmc_wrap#anima ul#accelist li.no_member{background-color:#666666;}
.kmmc_wrap#anima ul#accelist li.no_member::before{
position:absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
content:'?';font-size:2em;color:#FFF;font-weight:bold;
}


/*レコード*/
.kmmc_wrap#anima ul#win_data img.num{width:18px;}
.kmmc_wrap#anima .playdata .data_area ul#record_getlist li{flex-wrap:wrap;}
.kmmc_wrap#anima .playdata .data_area ul#record_getlist li .main,
.kmmc_wrap#anima .playdata .data_area ul#record_getlist li .sub{width:100%;display: flex;}
.kmmc_wrap#anima .playdata .data_area ul#record_getlist li .sub{border-top: 4px dotted #999999;margin-top:4px;padding-top:6px;}
.kmmc_wrap#anima .playdata .data_area ul#record_getlist li .main .unit,
.kmmc_wrap#anima .playdata .data_area ul#record_getlist li .sub .unit{width: fit-content;block-size: fit-content;}

/*スタンプ*/
.kmmc_wrap#anima ul#stamplist{margin:20px auto;width:100%;display:flex;flex-wrap: wrap;}
.kmmc_wrap#anima ul#stamplist li{display:block;overflow: hidden;width:calc(20% - 10px);margin:5px;padding:0;border:3px solid #59d03e;border-radius:6px;position: relative;}
.kmmc_wrap#anima ul#stamplist li .stamp_count{display:flex;justify-content: center;width:100%;padding:10px 0;background-color:#30c045;color:#FFF;}
.kmmc_wrap#anima ul#stamplist li .new{width:50px;height:21px;top:5px;left:5px;}

/*伝説のアニマ*/
.kmmc_wrap#anima .legendnull{width: 98%;margin:10px auto;padding:10px;border-radius:6px;text-align:center;background-color:#FFF;color:#409e15;font-weight:bold;}
.kmmc_wrap#anima .box#legend{padding:0;overflow: hidden;}
.kmmc_wrap#anima .box#legend .header{width:100%;background-color: #a7fb59;border-bottom:4px solid #16b83c;}
.kmmc_wrap#anima .box#legend .visual{width:100%;max-width:740px;margin:0 auto;padding:0 5px;background-position:center;background-repeat:no-repeat;background-size:auto 100%;}
.kmmc_wrap#anima .box#legend .visual#ani0{background-image: url(../../img/data/anima/legend/anima0.png);}
.kmmc_wrap#anima .box#legend .visual#ani1{background-image: url(../../img/data/anima/legend/anima1.png);}
.kmmc_wrap#anima .box#legend .visual#ani2{background-image: url(../../img/data/anima/legend/anima2.png);}
.kmmc_wrap#anima .box#legend .visual#ani3{background-image: url(../../img/data/anima/legend/anima3.png);}
.kmmc_wrap#anima .box#legend .visual#ani4{background-image: url(../../img/data/anima/legend/anima4.png);}
.kmmc_wrap#anima .box#legend .visual#ani5{background-image: url(../../img/data/anima/legend/anima5.png);}
.kmmc_wrap#anima .box#legend .visual#ani6{background-image: url(../../img/data/anima/legend/anima6.png);}
.kmmc_wrap#anima .box#legend .visual#ani7{background-image: url(../../img/data/anima/legend/anima7.png);}
.kmmc_wrap#anima .box#legend .visual#ani8{background-image: url(../../img/data/anima/legend/anima8.png);}
.kmmc_wrap#anima .box#legend .visual#ani0_off{background-image: url(../../img/data/anima/legend/anima0_off.png);}
.kmmc_wrap#anima .box#legend .visual#ani1_off{background-image: url(../../img/data/anima/legend/anima1_off.png);}
.kmmc_wrap#anima .box#legend .visual#ani2_off{background-image: url(../../img/data/anima/legend/anima2_off.png);}
.kmmc_wrap#anima .box#legend .visual#ani3_off{background-image: url(../../img/data/anima/legend/anima3_off.png);}
.kmmc_wrap#anima .box#legend .visual#ani4_off{background-image: url(../../img/data/anima/legend/anima4_off.png);}
.kmmc_wrap#anima .box#legend .visual#ani5_off{background-image: url(../../img/data/anima/legend/anima5_off.png);}
.kmmc_wrap#anima .box#legend .visual#ani6_off{background-image: url(../../img/data/anima/legend/anima6_off.png);}
.kmmc_wrap#anima .box#legend .visual#ani7_off{background-image: url(../../img/data/anima/legend/anima7_off.png);}
.kmmc_wrap#anima .box#legend .visual#ani8_off{background-image: url(../../img/data/anima/legend/anima8_off.png);}

.kmmc_wrap#anima .box#legend ul#leg_table{width:calc(100% - 20px);max-width:740px;border-radius:6px;margin:10px auto;padding:10px;background: repeating-linear-gradient(#f4dd8b, #f4dd8b 3px, #f2d571 3px, #f2d571 6px);}
.kmmc_wrap#anima .box#legend ul#leg_table li{background-color:transparent;}
.kmmc_wrap#anima .box#legend ul#leg_table li .ckeckbox{width:16px;height:16px;border:2px solid #000;margin-right:5px;position: relative;}
.kmmc_wrap#anima .box#legend ul#leg_table li .ckeckbox.on::before{content: "";width:18px;height:18px;position:absolute;top:-3px;left:-3px;
background-image: url(../../img/data/anima/legend/check_mark.png);
background-position:center;
background-repeat:no-repeat;
background-size:cover;}

.kmmc_wrap#anima .box#legend ul#leg_table .line{position: relative;}
.kmmc_wrap#anima .box#legend ul#leg_table .line::before{content: "+";color:#aa762b;font-weight:bold;font-size:28px;position:absolute;top:-11px;left:-13px;}
.kmmc_wrap#anima .box#legend ul#leg_table .line::after{content: "+";color:#aa762b;font-weight:bold;font-size:28px;position:absolute;top:-11px;right:-13px;}

}

/*詳細POPウィンドウ*/
.kmmc_wrap#anima .mfp-bg.detail {background: transparent;opacity: 0;}

.kmmc_wrap#anima .mfp-content{position:static;}
.detail #detail_pop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1050;display:flex;align-items:center;}
.detail #detail_pop .box{
width:98%;max-width:800px;margin:0 auto;
display: flex;z-index:2;justify-content:center;align-items:center;flex-wrap:wrap;
background-color:#FFF;border:#099344 2px solid;border-radius:6px;overflow:hidden;
}
.detail #detail_pop .box #detail_title,
.detail #detail_pop .box #detail_main{width:100%;display:flex;justify-content:center;align-items:center;}
.detail #detail_pop .box #detail_title{padding:10px;background-color:#099344;color:#FFF;font-weight:bold;}
.detail #detail_pop .box #detail_main{padding:20px;}
.detail #detail_pop .box #detail_main img{width:180px;}
.detail #detail_pop .box .btn_area{width:100%;display: flex;flex-direction: column;align-items: center;margin-top:30px;}
.detail #detail_pop .box .btn {
    width: 200px;
    height: 40px;
    display: flex;justify-content:center;align-items:center;
    font-weight: bold;
    color: #FFF;
    background-color: #b60018;
    border-radius: 10px;
    cursor: pointer;
}
.detail #detail_pop .box .btn a{color:#FFF;display: flex;justify-content:center;align-items:center;width:100%;height:100%;}
/*POPウィンドウ背景黒板*/
.detail #detail_pop .close_bg{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;background-color:rgba(118,240,170,0.85);}


@media (max-width:639px){
.kmmc_wrap#anima ul#stamplist{justify-content: center;}
.kmmc_wrap#anima ul#stamplist li{width:calc(50% - 10px);max-width:200px;}
.detail #detail_pop .box #detail_main{padding:20px 5px;}
.detail #detail_pop .box #detail_main img{width:120px;}
}

@media (max-width:480px){
.kmmc_wrap#anima ul#accelist{width: fit-content;max-width: 360px;}
.kmmc_wrap#anima ul#accelist li{margin:3px;width:64px;}
.kmmc_wrap#anima ul#titlelist li{width:calc(50% - 4px);margin:5px 2px;}
.kmmc_wrap#anima .box#legend ul#leg_table{width:calc(100% - 10px);margin:10px 5px;}
}

/* } */