/* --------------------------------------*/
/* ALL_area                             */
/* --------------------------------------*/

.ea_content_center {width:100%;background-color:#FFF;}
.eacloud_top_menu_inner,
.header_barnner_txt{max-width:calc(980px * 0.98);margin: 0 auto;}
#contents_wrap{width:100%;}
#contents_wrap_980{width:100%;max-width:980px;margin:0 auto;}
#contents_wrap::after,
#contents_wrap_980::after{
  content: "";
  display: block;
  clear: both;
}

.sub_title{
width:calc(100% - 10px);
max-width:1360px;
font-size:120%;
font-weight:bold;
margin:0 auto 10px;
padding-left:10px;}


/*共通newマーク*/
.new_mark{
width:74px;
height:22px;
position:absolute;
/*top:10px;*/
/*left:5px;*/
background-image:url(../images/title_select/new_mark.png);
background-repeat:no-repeat;
background-position:left;
}

/*ボタンホワイトアウト点滅用*/
.cover{position:absolute;z-index:1;top:0;bottom:0;right:0;left:0;cursor:pointer;background-color: #FFF;opacity: 0;}
.cover:hover{animation: flash 1s linear infinite;}
@keyframes flash {
  0%,100% {
    opacity: 0;
  }
  50% {
    opacity: 0.75;
  }
}

/* --------------------------------------*/
/*TOPロゴ、情報表示                          */
/* --------------------------------------*/
#title_line{width:calc(100% - 10px);margin:10px auto 0;
border:solid #000 ;
border-width:3px 0 3px 0;
padding:5px;
background-image:url(../images/top_status_bg2.png),url(../images/top_status_bg.jpg);
background-repeat:repeat-x;
background-position:center top;
}

#title_line #line_area{
width:100%;
max-width: 1600px;
margin: 0 auto;
display: flex;
flex-direction:row;
justify-content: space-between;
align-items:center;
}



#title_line #line_area #logo{width:90%;max-width:400px;display:inline-block;}
#title_line #line_area img{width:100%; height:auto;}

#title_line #line_area #topinfo{
width:310px;
background: rgb(204,204,204);
background: linear-gradient(0deg, rgba(204,204,204,1) 0%, rgba(244,244,244,1) 50%);
border-radius:10px;
border:2px solid #FFFFFF;
padding:6px;
display: flex;
flex-wrap :wrap;
}

#title_line #line_area #topinfo ul{
display:inline-block;
margin:4px 4px 0 0;
}
#title_line #line_area #topinfo ul li{
width:200px;display:flex;
    background-color: #000;
    border-radius: 6px;
    line-height:24px;
   position: relative;
   color: #fffe9d
}
#title_line #line_area #topinfo ul li .value{
    font-size:16px;
    color: #FFF;
    text-align: right;
    padding:0 2px;
    position:absolute;
    right: 20px;     
}
#title_line #line_area #topinfo ul li#medal{;margin-bottom:4px;}

#title_line #line_area #topinfo ul li#medal:before {
    content: "メダル";
    margin:0 5px;
}
#title_line #line_area #topinfo ul li#medal:after {
    content: "枚";
    position:absolute;
    right: 5px;
}

#title_line #line_area #topinfo ul li#kmp:before {
    content: "KMP";
    margin:0 5px;
}
#title_line #line_area #topinfo ul li#kmp:after {
    content: "pt";
    position:absolute;
    right: 5px;   
}

#title_line #line_area #topinfo .btn{
position: relative;
}
#title_line #line_area #topinfo .btn img{
width:100%;height:auto;
vertical-align:top;
}


#title_line #line_area #topinfo .btn_medalbuy{
width:94px;height:0;
padding-top:61px;
cursor:pointer;
background-image:url(../images/medal_buy.png);
background-size:100% auto;
background-repeat:no-repeat;
background-position:center top;}

#title_line #line_area #topinfo .btn_medalbuy:hover{
background-position:center bottom;
}
#title_line #line_area #topinfo .update{padding:3px 0 0 5px;color:#FFF;font-weight:bold;font-size:14px;}


@media screen and (max-width:799px){
#title_line #line_area{justify-content: center;flex-wrap: wrap;}
#title_line #line_area #topinfo{padding:5px 5px 3px;}
}
@media screen and (max-width:490px){
#title_line{width:100%;}
#title_line #line_area #topinfo ul li{font-size:14px;}
#title_line #line_area #topinfo ul li#medal {margin-bottom:4px;}
#title_line #line_area #topinfo ul li#medal:before,
#title_line #line_area #topinfo ul li#kmp:before{margin-right: 20px;}
#title_line #line_area #topinfo ul li .value {font-size:14px;border-radius:4px;}
}

/* --------------------------------------*/
/*サブメニュー                        */
/* --------------------------------------*/

ul#sub_menu{
  width:100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background: rgb(204,204,204);
background: linear-gradient(0deg, rgba(204,204,204,1) 0%, rgba(238,238,238,1) 50%, rgba(255,255,255,1) 100%);}

ul#sub_menu li{width:25%;max-width:240px;height:35px;
display:block;cursor:pointer;box-sizing: border-box;
position: relative;
background-size:auto;
background-repeat:no-repeat;
background-position:center;
border-left:1px solid #000;
border-right:1px solid #000;}
ul#sub_menu li:hover{border-bottom:4px solid #ff9a78;}

ul#sub_menu li .new_mark{top:5px;right:5px;}

ul#sub_menu li#mission{background-image:url(../images/sum_menu_mission.png);}
ul#sub_menu li#ranking{background-image:url(../images/sum_menu_ranking.png);}
ul#sub_menu li#data{background-image:url(../images/sum_menu_data.png);}
ul#sub_menu li#help{background-image:url(../images/sum_menu_help.png);}

@media screen and (max-width:799px){
ul#sub_menu li{width:50%;max-width: inherit;
border-bottom:#000 1px solid;}
}

@media screen and (max-width:639px){
ul#sub_menu{padding:0;}
}


/* --------------------------------------*/
/*pickup_bnr                           */
/* --------------------------------------*/
#event{width:100%;max-width:1360px;margin:0 auto 20px;padding-top:20px;}


#event .bnr{position: relative;border-radius:10px;overflow:hidden;text-align: center;}
#event .bnr img{width:auto;height:auto;margin:0 5px;}

#pickup{width:100%;max-width:1360px;margin:0 auto 20px;padding-top:20px;display:flex;flex-flow: wrap; justify-content: space-around;}
#pickup li{width:calc(100% / 3 - 10px);max-width:400px;margin:0 5px;}
#pickup li .photo{position: relative;width:100%;border-radius:10px;overflow:hidden;}

/*ロングバナー*/
#pickup .longbnr{width:98%;max-width:800px;margin:20px auto 0;}

#pickup li .photo img,#pickup .longbnr img{width:100%;height:auto;vertical-align:top;}
#pickup li .period,#pickup .longbnr .period{text-align:center;padding:5px 0;font-size:14px;font-weight:bold;}


@media screen and (max-width:799px){
#pickup{display:block;text-align:center;}
#pickup li{width:calc(50% - 20px);display: inline-block;}
}


@media screen and (max-width:639px){
#pickup{max-width:600px;display:flex;flex-flow: wrap; }
#pickup li{width:calc(100% - 10px);display:block;}
}

/* --------------------------------------*/
/*medal_select                           */
/* --------------------------------------*/
#medal_select{
width:100%;margin:0 auto;}
#medal_select .tab-wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
#medal_select .tab-wrap:after {
  content: '';
  width: 100%;
  height: 3px;
  background:#de6f6f;
  display: block;
  order: -1;
}
#medal_select .tab-label {
  width:calc(100% / 3);
  max-width:430px;
  color: #FFFFFF;
  background:#8a8a8a;
  font-weight: bold;
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
  white-space: nowrap;
  text-align: center;
  padding: 10px .5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  flex: 1;
}
#medal_select .tab-label:not(:last-of-type) {
  margin-right: 5px;
}
#medal_select .tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/* アクティブなタブ */
#medal_select .tab-switch:checked+.tab-label {
  background:#de6f6f;
}
#medal_select .tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 15px;
  opacity: 1;
  transition: .5s opacity;
  box-shadow: 0 0 3px rgba(0,0,0,.2);
}
/* ラジオボタン非表示 */
#medal_select .tab-switch {
  display: none;
}

#medal_select .tab-content .bnr_area{
  width:100%;
  max-width:1360px;
  margin:0 auto;
}

@media all and (-ms-high-contrast: none) {
#medal_select .tab-label {
  max-width:inherit;}

}



/* --------------------------------------*/
/*タイトル選択バナーエリア                           */
/* --------------------------------------*/
#medal_select .bnr_area ul{
display: flex;
flex-wrap: wrap;
 justify-content:center;
}
#medal_select .bnr_area ul li{
width:calc(100% / 3 - 16px);
max-width:430px;
margin:0 2px 20px;
padding:10px 5px 5px;
border:#666 solid 1px;
border-radius:6px;
position: relative;
}

#medal_select .bnr_area ul li .title{
clear:both;
font-size:16px;
font-weight:bold;
padding:3px 0;
}

/*種別*/
.type{
    width:120px;
    float:left;
    color:#cd5c5c;
   font-weight:bold;
   font-size:16px;
   }
   
#medal_select .bnr_area ul#genre{display: block;width:calc(100% - 130px);text-align:right;float:right;}
#medal_select .bnr_area ul#genre li{
width: fit-content;
max-width:inherit;
margin: 0 2px;
padding:3px 5px;
border:none;
background-color:#ff8827;
color:#FFFFFF;
text-align:center;
font-size:14px;
font-weight:bold;
float:right;}


#medal_select .bnr_area ul li .photo{
position: relative;
}

/*テスト期間表示*/
.test{position:absolute;z-index:2;top:0;right:0;padding:3px;color:#FFFFFF;font-weight:bold;}
/*オープンアルファテスト*/
.open_a{background-color:#0072ff;}
.open_a:after {content: "オープンアルファテスト";}

/*クローズドアルファテスト*/
.closed_a{background-color:#0072ff;}
.closed_a:after {content: "クローズドアルファテスト";}


/*オープンベータテスト*/
.open_b{background-color:#dc4706;}
.open_b:after {content: "オープンベータテスト";}

#medal_select .bnr_area ul img{width:100%;height:auto;}

@media screen and (max-width:979px){
#medal_select .bnr_area ul li{
width:calc(100% / 2 - 16px);
max-width:450px;}
}
@media screen and (max-width:767px){
#medal_select .bnr_area ul li{
width:calc(100% - 16px);
max-width:500px;}
}
@media screen and (max-width:639px){
#medal_select .bnr_area ul#genre li{font-size:12px;}
}

/* --------------------------------------*/
/* ANDROID_QR                             */
/* --------------------------------------*/
#getapp_area{text-align:center;margin-top:20px;}
#getapp_area div{display:inline-block;}
#getapp_area div img{width:100%; height auto;}

#getapp_area .img_box60L{width:128px;}
#getapp_area .qr{width:128px;}
#getapp_area .google_play{width:180px;}