@charset "Shift-JIS";

/*データ閲覧 切替背景画像*/
.kmmc_wrap#momotetsu {}

.kmmc_wrap#momotetsu #pegetitle.tab0{
background-image:url(../../img/data/momotetsu/mainvisual/main0.png),url(../../img/data/momotetsu/mainvisual/bg0.jpg);
}
.kmmc_wrap#momotetsu #pegetitle.tab1{
background-image:url(../../img/data/momotetsu/mainvisual/main1.png),url(../../img/data/momotetsu/mainvisual/bg1.jpg);
}
.kmmc_wrap#momotetsu #pegetitle.tab2{
background-image:url(../../img/data/momotetsu/mainvisual/main2.png),url(../../img/data/momotetsu/mainvisual/bg2.jpg);
}
.kmmc_wrap#momotetsu #pegetitle.tab3{
background-image:url(../../img/data/momotetsu/mainvisual/main3.png),url(../../img/data/momotetsu/mainvisual/bg3.jpg);
}
.kmmc_wrap#momotetsu #pegetitle.tab4{
background-image:url(../../img/data/momotetsu/mainvisual/main4.png),url(../../img/data/momotetsu/mainvisual/bg4.jpg);
}
.kmmc_wrap#momotetsu #pegetitle.tab5{
background-image:url(../../img/data/momotetsu/mainvisual/main5.png),url(../../img/data/momotetsu/mainvisual/bg5.jpg);
}

/*データ閲覧 データ選択タブ*/
.kmmc_wrap#momotetsu #data_tab li:not(.lock){background-color:#f28fdd;}
.kmmc_wrap#momotetsu #data_tab li.selected{background-color:#f064d7;color:#fff100;}

/*達成率表示*/
.kmmc_wrap#momotetsu #comp_navi{display:none;}
.kmmc_wrap#momotetsu #comp_navi.view{width:calc(100% - 10px);overflow:hidden;display: flex;justify-content: center;align-items: center;position:relative;margin:10px auto;padding:7px 0;border-radius:16px;
border: 4px solid #fff392;}
.kmmc_wrap#momotetsu #comp_navi .per{color:#ffffff;z-index:2;font-weight: bold;font-size:20px;}
.kmmc_wrap#momotetsu #comp_navi .meter{position:absolute;top:0;bottom:0;left:0;background-color:#ff5989;border-radius:10px 0 0 10px;}
.kmmc_wrap#momotetsu #comp_navi .bg{position:absolute;top:0;bottom:0;left:0;right:0;background-color:#5e5e5e;box-shadow:0px 0px 5px 5px rgba(0, 0, 0, 0.5) inset;}

/*データ閲覧・アイテム メイン表示エリア背景*/
#momotetsu .playdata,#momotetsu .itemdata{position: relative;overflow:hidden;background: repeating-linear-gradient(135deg, #f064d7, #f064d7 20px, #f28fdd 20px, #f28fdd 22px);}

#momotetsu .playdata.samplebg::before {
  content: " ";
  position:absolute;
  top:0;bottom:0;left:0;right:0;
  background-image:url(../../img/data/momotetsu/bg_sample.png);
  background-size:250px auto;
}


/*データ閲覧 タイトル枠*/
#momotetsu .playdata .title{
height:40px;
padding:0;
background-size:auto 36px;
background-position:center;
background-repeat:repeat-x;
}
#momotetsu .playdata .title .head{
margin-right:auto;
position:relative;
padding:10px 10px 10px 50px;
background-size:auto 42px;
background-position:left center;
background-repeat:repeat-x;}
#momotetsu .playdata .title .head::before{
content: "";
position:absolute;top:0;left:5px;
width:42px;height:40px;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
#momotetsu .playdata .title .head::after{
content: "";
position:absolute;top:0;right:-20px;
width:20px;height:40px;
background-size:20px 42px;
background-position:center;
background-repeat:no-repeat;
}
#momotetsu .playdata .title .attr.title_left{margin:0 auto 0 10px;}

/*タイトルアイコン*/
#momotetsu .playdata .title .head.ic1::before{background-image: url(../../img/data/momotetsu/flame/icon_prof.png);}
#momotetsu .playdata .title .head.ic2::before{background-image: url(../../img/data/momotetsu/flame/icon_gr.png);}
#momotetsu .playdata .title .head.ic3::before{background-image: url(../../img/data/momotetsu/flame/icon_mp.png);}
#momotetsu .playdata .title .head.ic4::before{background-image: url(../../img/data/momotetsu/flame/icon_binbo.png);}
#momotetsu .playdata .title .head.ic5::before{background-image: url(../../img/data/momotetsu/flame/icon_miniBB.png);}
#momotetsu .playdata .title .head.ic6::before{background-image: url(../../img/data/momotetsu/flame/icon_kingBB.png);}
#momotetsu .playdata .title .head.ic7::before{background-image: url(../../img/data/momotetsu/flame/icon_BB.png);}
#momotetsu .playdata .title .head.ic8::before{background-image: url(../../img/data/momotetsu/flame/icon_pokon.png);}
#momotetsu .playdata .title .head.ic9::before{background-image: url(../../img/data/momotetsu/flame/icon_rs.png);}
#momotetsu .playdata .title .head.ic10::before{background-image: url(../../img/data/momotetsu/flame/icon_card.png);}
#momotetsu .playdata .title .head.ic11::before{background-image: url(../../img/data/momotetsu/flame/icon_rg.png);}
#momotetsu .playdata .title .head.ic12::before{background-image: url(../../img/data/momotetsu/flame/icon_ginji.png);}
#momotetsu .playdata .title .head.ic13::before{background-image: url(../../img/data/momotetsu/flame/icon_rank.png);}

/*タイトル装飾スタイル1*/
#momotetsu .playdata .title.style1{background-image: url(../../img/data/momotetsu/flame/s1_line.png);}
#momotetsu .playdata .title.style1 .head{background-image:url(../../img/data/momotetsu/flame/s1_head.jpg);
text-shadow: 2px 2px 1.5px #8d6400, -2px -2px 1.5px #8d6400, -2px 2px 1.5px #8d6400, 2px -2px 1.5px #8d6400, 2px 0 1.5px #8d6400, -2px 0 1.5px #8d6400, 0 2px 1.5px #8d6400, 0 -2px 1.5px #8d6400;}
#momotetsu .playdata .title.style1 .head:after{background-image: url(../../img/data/momotetsu/flame/s1_head2.png);}

/*タイトル装飾スタイル2*/
#momotetsu .playdata .title.style2{background-image: url(../../img/data/momotetsu/flame/s2_line.png);}
#momotetsu .playdata .title.style2 .head{background-image:url(../../img/data/momotetsu/flame/s2_head.jpg);
text-shadow: 2px 2px 1.5px #520e9f, -2px -2px 1.5px #520e9f, -2px 2px 1.5px #520e9f, 2px -2px 1.5px #520e9f, 2px 0 1.5px #520e9f, -2px 0 1.5px #520e9f, 0 2px 1.5px #520e9f, 0 -2px 1.5px #520e9f;}
#momotetsu .playdata .title.style2 .head:after{background-image: url(../../img/data/momotetsu/flame/s2_head2.png);}

/*タイトル装飾スタイル3*/
#momotetsu .playdata .title.style3{background-image: url(../../img/data/momotetsu/flame/s3_line.png);}
#momotetsu .playdata .title.style3 .head{background-image:url(../../img/data/momotetsu/flame/s3_head.jpg);
text-shadow: 2px 2px 1.5px #962d13, -2px -2px 1.5px #962d13, -2px 2px 1.5px #962d13, 2px -2px 1.5px #962d13, 2px 0 1.5px #962d13, -2px 0 1.5px #962d13, 0 2px 1.5px #962d13, 0 -2px 1.5px #962d13;}
#momotetsu .playdata .title.style3 .head:after{background-image: url(../../img/data/momotetsu/flame/s3_head2.png);}

/*タイトル装飾スタイル4*/
#momotetsu .playdata .title.style4{background-image: url(../../img/data/momotetsu/flame/s4_line.png);}
#momotetsu .playdata .title.style4 .head{background-image:url(../../img/data/momotetsu/flame/s4_head.jpg);
text-shadow: 2px 2px 1.5px #00659f, -2px -2px 1.5px #00659f, -2px 2px 1.5px #00659f, 2px -2px 1.5px #00659f, 2px 0 1.5px #00659f, -2px 0 1.5px #00659f, 0 2px 1.5px #00659f, 0 -2px 1.5px #00659f;}
#momotetsu .playdata .title.style4 .head:after{background-image: url(../../img/data/momotetsu/flame/s4_head2.png);}

#momotetsu .playdata .title div {width: fit-content;block-size: fit-content;}

/*データ閲覧該当表示データなしエリア*/
#momotetsu .playdata .data_area #liststate.open{min-height:200px;text-align:center;}

/*データ閲覧 桃鉄 カラー指定*/
#momotetsu .playdata .data_area .color_p{background-color: #cc66ff;}
#momotetsu .playdata .data_area .color_bl{background-color: #00b0f0;}
#momotetsu .playdata .data_area .color_ltbl{background-color: #00b0f0;}
#momotetsu .playdata .data_area .color_gr{background-color: #00b050;}
#momotetsu .playdata .data_area .color_ltgr{background-color: #92d050;}
#momotetsu .playdata .data_area .color_y{background-color: #ffff00;}
#momotetsu .playdata .data_area .color_or{background-color: #ffc000;}
#momotetsu .playdata .data_area .color_pi{background-color: #ff79ff;}
#momotetsu .playdata .data_area .color_r{background-color: #ff7c80;}
#momotetsu .playdata .data_area .color_blk{background-color: rgba(0, 0, 0, 0.45);}


/*桃鉄メダルデータ閲覧ソート用プルダウンメニュー*/
.kmmc_wrap#momotetsu ul#sort .sort_pull select {
    appearance: none;
    width: 200px;
    height: 36px;
    padding: 2px calc(2px + 30px) 2px 4px;
    border: 2px solid rgba(125,40,70,1.0);
    border-radius: 15px;
    background-color:rgba(255,240,140,1.0);
    color: rgba(125,40,70,1.0);
    font-size: 16px;
    cursor: pointer;
}
.kmmc_wrap#momotetsu ul#sort .sort_pull::after {
    background-color: rgba(125,40,70,1.0);
}

/*「成績マイレージピラミッド」段位*/
.kmmc_wrap#momotetsu ul#pyramid li#level img{width:100%;max-width:500px;height auto;margin:0 auto;}

/*データ閲覧 属性表示*/
#momotetsu .playdata .title .attr_area{display: flex;padding:2px 1% 2px 5px;}
#momotetsu .playdata .title .attr{min-width:50px;color:#FFF;font-size:16px;background-color:#8f2a02;padding:3px 4px;}
#momotetsu .playdata .title .attr:last-child{margin:0 5px;}
#momotetsu .playdata .data_area ul li .attr{min-width:50px;color:#FFF;}
#momotetsu .playdata .data_area ul li .attr.color_y{color:#000;}
#momotetsu .playdata .data_area ul li .attr_price{background-color:none;}

/*データ閲覧 桃鉄カード・スリの銀次図鑑*/
#momotetsu .playdata .data_area ul#card{display: flex;flex-wrap:wrap;}
#momotetsu .playdata .data_area ul#card li{width:calc(50%  - 20px);overflow:hidden;display: flex;align-items:stretch;padding:0;margin:0 10px 10px;background-color: rgba(0,0,0,0.45);border:3px solid #FFF;}
#momotetsu .playdata .data_area ul#card img{width:auto;height:220px;}
#momotetsu .playdata .data_area ul#card li .img_area{padding:10px;background: linear-gradient(#f1d1ef, #f28fdd);}

#momotetsu .playdata .data_area#ginji ul#card li .img_area{display: flex;align-items:center;block-size:inherit;}
#momotetsu .playdata .data_area#ginji ul#card li .img_area img{width:200px;height:auto;}

#momotetsu .playdata .data_area ul#card li .text_area{width:100%;}
#momotetsu .playdata .data_area ul#card li .text_area .dataname{width:100%;block-size:100%;background: linear-gradient(#fce8c2, #eacfa9);margin-bottom:5px;padding:5px;font-size:16px;font-weight:bold;}
#momotetsu .playdata .data_area ul#card li .text_area .category,
#momotetsu .playdata .data_area ul#card li .text_area .text{color:#FFF;padding:4px 8px;}
#momotetsu .playdata .data_area ul#card li .text_area .category{background-color:#000;border-radius:6px;color:#fff100;font-weight:bold;margin-bottom:5px;}
#momotetsu .playdata .data_area ul#card li .text_area .text{color:#FFF;}

#momotetsu .playdata .data_area ul#card li.nohave{border:3px solid #bbb;}
#momotetsu .playdata .data_area ul#card li.nohave .img_area,
#momotetsu .playdata .data_area ul#card li.nohave .text_area .dataname{background: linear-gradient(#ddd, #999);}
#momotetsu .playdata .data_area ul#card li.nohave .text_area .category{color:#FFF;}
#momotetsu .playdata .data_area ul#card li.nohave .text_area .text{color:#bbb;}

/*無課金状態*/
/*
#momotetsu .playdata .datahide ul li.grade{background-color: #FFF;}/*成績タブ リストのみ*/
/*momotetsu .playdata .datahide ul#card li:not(:first-child) .text_area .category{color:#FFFFFF;}
#momotetsu .playdata .datahide ul#card li:not(:first-child) .img_area,
#momotetsu .playdata .datahide ul#card li:not(:first-child) .text_area .dataname{background: linear-gradient(#ddd, #999);}
#momotetsu .playdata .datahide ul#card li:first-child .img_area {background: linear-gradient(#f1d1ef, #f28fdd);}
#momotetsu .playdata .datahide ul#card li:first-child .text_area .dataname {background: linear-gradient(#fce8c2, #eacfa9);}
#momotetsu .playdata .datahide ul#card li:first-child .text_area .category {color: #fff100;}
*/

@media (max-width:979px){
#momotetsu .playdata .data_area ul#card li{width:calc(50% - 10px);margin:0 5px 10px;}
#momotetsu .playdata .data_area ul#card img{width:auto;height:180px;}
#momotetsu .playdata .data_area#ginji ul#card li .img_area img{width:160px;}
}
@media (max-width:767px){
#momotetsu .playdata .data_area ul#card li{width:calc(100% - 10px);}
#momotetsu .playdata .data_area ul#card img{width:auto;height:160px;}
#momotetsu .playdata .data_area#ginji ul#card li .img_area{padding: 5px;}
}
@media (max-width:639px){

.kmmc_wrap#momotetsu #comp_navi.view{width:98%;padding:5px 0;border: 3px solid #fff392;}
.kmmc_wrap#momotetsu #comp_navi .per{font-size:18px;}

#momotetsu .playdata .title .head{padding:10px 5px 10px 42px;}
#momotetsu .playdata .title .head::before{top:3px;left:3px;width:36px;height:34px;}

#momotetsu .playdata .data_area ul#card li .img_area.ginji img{width:140px;}
}
@media (max-width:480px){

.kmmc_wrap#momotetsu ul#sort .sort_pull select {width:180px;}

#momotetsu .playdata .data_area ul#card img{width:auto;height:120px;}
#momotetsu .playdata .data_area ul#card li .text{font-size:12px;}
}
@media (max-width:320px){

.kmmc_wrap#momotetsu ul#sort .sort_pull select {width:150px;font-size: 14px;}
}