#content_bg{
  background-image:url(../images/dlc/bg.jpg);
}


#submenu{
  /*display:none;*/
}

#submenu nav>*{
  width:19%;
}

/*-----------*/
.icon_seasonpass{
  position:absolute;
  top:0;right:0;
  width:20%;
  max-width:90px;
  transform:translate(-10%,-12%);
}
@media screen and (max-width:768px){
  .icon_seasonpass{
    width:15%;
  }
}

nav#narrowdown{
  display:flex;
  flex-flow: row;
  justify-content: center;
  margin:3% auto;
}
nav#narrowdown a{
  display:flex;
  width:31%;
  align-items: center;
  justify-content: center;
  text-decoration:none;
  padding:1% 2%;
  margin:0.1%;
  border-color:#FFF;
  border-width:0 0 5px 0;
  border-style:solid;
  /*background-color:rgba(255,255,255,0.4);
  box-shadow:3px 3px 0 rgba(0,0,0,0.15);*/
}
nav#narrowdown a#COLLABO{border-bottom-color:#b5ad77;}
nav#narrowdown a#SP3{border-bottom-color:#1341a8;}
nav#narrowdown a#SP2{border-bottom-color:#a21a15;}
nav#narrowdown a#SP1{border-bottom-color:#e3870e;}
nav#narrowdown a#OTHER{border-bottom-color:#363636;}
nav#narrowdown a.active{background:linear-gradient(to bottom,rgba(237, 231, 88,0),rgba(255, 245, 156, 1));}


nav#narrowdown a div{
  color:#111;
  font-size:80%;
  line-height:1.2;
  text-align:center;
}
nav#narrowdown a div b{
  display:block;
  font-size:120%;
}
@media screen and (max-width:640px){
  nav#narrowdown{margin:5% auto;}
  nav#narrowdown a div{font-size:2.2vw;}
}
/*-----------*/
.dlc__lead{
  text-align:center;
  font-weight:bold;
  font-size:120%;
  color:#2e2c1f;
  margin:2% auto -8%;
  border:3px #999 dotted;
  border-width:3px 0 0;
}
.dlc__lead:first-of-type{
  border-width:0;
}
.dlc__lead a{
  display:block;
  margin:2% auto;
  width:90%;
  max-width:400px;
  border-radius:5px;
  font-size:80%;
  color:#111;
  text-align:center;
  padding:1%;
  text-decoration: none;
  background:linear-gradient(to bottom,#FFF,#f1edbe);
  border:1px #AAA solid;
  box-shadow: 0 0 3px #FFF inset;
}

.op{
  opacity:0.8;
  font-size:90%;
}
h3{
  font-size:200%;
}

section>div{
  padding:30px;
  margin:30px 0;
  padding-top:5%;
  margin-top:5%;
}


section>div .info_body{
  width:100%;
  background-color:rgba(255,255,255,0.5);
  padding:2%;
  padding-bottom:50px;
  box-shadow:3px 3px 0 rgba(0,0,0,0.3);
  border:1px rgba(255,255,255,0.8) solid;
  position:relative;
}

section>div .info_body h4{
  margin:0;
  padding:0;
  margin-bottom:1%;
  font-size:130%;

  border:12px #500 solid;
  border-width:0 0 0 7px;
  padding-left:5px;

  line-height:1.3;
}

section>div.new .info_body h4:after,
section>div.update .info_body h4:after,
section>div.end .info_body h4:after{
  padding:1px 1em;
  display:inline-block;
  font-size:60%;
  margin-left:7px;
  vertical-align:3px;
  text-shadow:none;
  font-weight:normal;
  background-color:#F00;
  border-radius:3px;
  /*border:2px #F00 solid;*/
  color:#FFA;
}

section>div.update .info_body h4:after{content:"UPDATE";}
section>div.new .info_body h4:after{content:"NEW";}


section>div .info_body b.price{
  display:block;
  line-height:1.7;
  margin-bottom:2%;
}

section>div .info_body b.price .release{
  display: inline-block;
  padding:0 10px;
  background-color:#FFF;
  color:#901515;
  border: 1px #dcafaf solid;
  font-size:80%;
  font-weight:bold;
  margin-left:1%;
  border-radius:5px;
  text-shadow:none;
  vertical-align: 1px;
}
section>div .info_body b.price .notice{
  background-color:#ffe350;
  color:#F00;
  border-color:#F00;
}

section>div .info_body .dlc_info{
  margin-top:4%;
  position:relative;
}

body.dlc_detail .dlc_info{
  padding-top:50px !important;
  padding-bottom:50px !important;
}

section>div .info_body h5{
  margin:0;
  padding:0;
  margin-top:3%;
  font-size:105%;
}

section>div .info_body ul{
  margin:1%;
  padding:0;
  margin-left:1.5em;
}

/*section>div img{
  width:80%;
  display:block;
  margin:2% auto;
}*/

section .dlc_movie{
  margin-top:4%;
}
section .dlc_images{
  display:flex;
  flex-flow:row nowrap;
  margin-top:2%;
}
section .dlc_images .dlc_ss{
  display: inline-block;
  margin:0.5%;
  text-align: center;
  font-size:80%;
  line-height:1.2;
}

section .dlc_images .dlc_ss:first-child{margin-left:0;}
section .dlc_images .dlc_ss:last-child{margin-right:0;}

section .single .dlc_ss{ width:100%;}
section .double .dlc_ss{ width:50%;}
section .triple .dlc_ss{ width:33.333333%;}
section .quadruple .dlc_ss{ width:25%;}
.dlc_ss img{width:100%;display:inline-block;}


.dlc_list{
  border-collapse: collapse;
  width:100%;
}
.dlc_list td{
  border:1px #CCC solid;
  padding:0.5%;
  vertical-align: top;
  font-size:80%;
  background-color:rgba(255,255,255,0.8);
}
.split50 td{width:50%;}
.split33 td{width:33.333%;}
.split25 td{width:25%;}


section .dlc_detail{
  border:1px #CCC solid;
  padding:2%;
  font-size:90%;
}
section .dlc_detail h6{
  font-size: 100%;
  margin:0;padding:0;
  margin-top:1%;
  display:block;
  border:1px #CCC dotted;
  border-width:1px 0 0;
  padding-top:1%;
}
section .dlc_detail h6:first-child{
  margin-top:0;
  padding-top:0;
  border-width:0;
}


section>div .info_body a.link_button{
  display:inline-block;
  margin-top:10px;
  margin-right:3px;
  padding:1px 20px;
  text-shadow:none;
  color:#FFF;
  text-decoration:none;
  text-align:center;
  background-color:#2f648a;
  background:linear-gradient(to bottom,#2f648a,#1c4a6b);
}

section>div .info_body a.btn_detail{
  display:block;
  width:80%;
  max-width:400px;
  margin:3% auto 0;
  padding:1.5%;
  line-height:1.2;
}

section>div .info_body .dlc_info{
  position:relative;
}

.content_notice{
  border:1px #ffffff solid;
  padding:3%;
  text-align:center;
  color:#a13737;
  font-size:120%;
  background-color:rgba(255,255,255,0.5);
}

#content_selecter{
  display: flex;
  flex-flow: nowrap row;
  justify-content: center;
  text-align: center;
  margin-top:2%;
}

#content_selecter a{
  display: inline-block;
  width:33.3%;
  margin:0;
  border:1px #AAA solid;
  background: none;
  background-color:rgba(255,255,255,0.7);
  padding:1%;
  color:#111;
  font-weight: bold;
  text-decoration:none;
}

#content_selecter a:first-child{border-radius:6px 0 0 6px;margin-right:-1px;}
#content_selecter a:last-child{border-radius:0 6px 6px 0;margin-left:-1px;}

section>div .info_body a.btn_back{
  display:block;
  width:80px;
  padding:3px;
  margin:0;
  position:absolute;
  top:0;
  right:0;
  /*transform:translate(0,-100%);*/
}

section>div .info_body a.btn_back:last-child{
  top:auto;
  bottom:0;
  /*transform:translate(0,-100%);*/
}
/*------------*/

.dlc_mov_thumbnails{
  display: flex;
  flex-flow: wrap wrap;
}
.dlc_mov_thumbnails>*{
  border:1px #777 solid;
  display:block;
  width:19.5%;
  margin:0.25%;
  padding:0 !important;
  margin-top:0.5% !important;
}
.dlc_mov_thumbnails>a.active{
  border:3px #f05e16 solid;
}
.dlc_mov_thumbnails img{
  display:block;
  width:100%;
}

/*-----------*/
.costumes,.addcos{
  text-align:center;
  margin-top:5%;
}
.costumes a,.addcos a{
  display:block;
  float:left;
  text-decoration:none;
  position:relative;
  padding:0 !important;
  margin:0;
  margin-right:1%;
  font-size:80%;
  background:none !important;
  color:#333 !important;
  line-height:1.2;
}
.costumes a{width:24.0%;margin-bottom:2%;}
.addcos a{width:45.5%;}

.costumes a:after,
.addcos a:after{
  content:"\FF0B";/*＋*/
  display:inline-block;
  width:30px;
  height:30px;
  line-height:30px;
  background-color:rgba(0,0,0,0.8);
  color:#FFF;
  border-radius:50%;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  text-shadow:none;
  text-align:center;
}
.costumes a img,
.addcos a img{
  display:block;
  width:100%;
}
.addcos .cos_media{width:53.5%;float:left;}
.addcos .cos_media .movie{width:100%;display:block;}
.addcos .cos_media>a,
.addcos .cos_media>img.ss{width:48.5%;margin:1.5% 0.7% 0;display:block;float:left;}

#scenarios .addcos div:first-child{width:66%;float:left;}
#scenarios .addcos div:first-child .movie{width:100%;display:block;}
#scenarios .addcos .cos_media{width: 33%;float: left;margin-left: 0.5%;}
#scenarios .addcos .cos_media>a,
#scenarios .addcos .cos_media>img.ss{width:100%;margin:0 0 1%;display:block;float:left;}

.dlc_memo{
  border:1px #999 solid;
  border-radius:5px;
  padding:2%;
  margin:1.5% 0;
  font-size:95%;
}
.dlc_memo>span{
}
.dlc_memo>.scenario_ss{
  display:block;
  width:40%;
  float:right;
  margin-left:0.5%;
}




/*
.cos_movies{
  display:flex;
  flex-flow: wrap row;
  justify-content: space-between;
}
.cos_movies .addcos{width:49%;margin:0.5%;}
.cos_movies .addcos video,
.cos_movies .addcos img{display:block;width:100%;}
*/
@media screen and (max-width:768px){
}
@media screen and (max-width:640px){
  section>div{
    padding:10px;
    padding-top:30px;
  }
  section>div img{
    width:100%;
    float:none;
    margin-top:0;
  }

  section>div .info_body{
    float:none;
    width:100%;
  }
  section>div .info_body h4,
  section>div .info_body .price{
    width:80%;
  }

  .costumes,.addcos{
    margin-top:6%;
  }

  /*.dlc_memo{
    display:flex;
    flex-flow: row;
    flex-direction: column-reverse;
  }
  .dlc_memo>span{
    display:block;
    width:100%;
  }
  .dlc_memo>.scenario_ss{
    width:100%;
    float:none;
    margin:0.5%;
  }*/

  .screenshot a{
    font-size:1vw;
  }

  .screenshot a:after{
    margin-top:17vw !important;
  }
}