@charset "UTF-8";




/* TOP - RECOMMEND
========================================= */
.top_reco_block{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  /* border-top: .5px solid var(--color-grey);
  border-bottom: .5px solid var(--color-grey); */

  width: calc(100% + 4em);
  margin: 0 0 2em -2em;
}
.top_reco_box{
  position: relative;
  width: 50%;
  border: 1px solid var(--color-grey);
  border-left: none;
  overflow: hidden;
  aspect-ratio: 5 / 3.5;
}
.reco_box_inner{
  display: block;
  width: 100%;
  height: 100%;
}
@media (max-width: 768px) {
  .top_reco_box:nth-child(2n) {
    border-right: none;
  }
  .top_reco_box:nth-child(n+3) {
    border-top: none;
  }
}

.reco_detail_box{
  position: absolute;
  z-index: 5;
  font-size: 10px;
  width: 100%;
  height: 100%;
  background-color: var(--color-black);
  color: var(--color-white);
  overflow-y: scroll;

  visibility: hidden;
  opacity: 0;
  transform: none;
}
/* .top_reco_box.on .reco_detail_box, */
.top_reco_box:hover .reco_detail_box{
  /* transform: translateY(0); */
  visibility: visible;
  opacity: 1;
  transition: opacity .5s;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* .top_reco_box:hover .reco_detail_box{
  transform: translateY(0);
  opacity: 1;
} */
.reco_txt{
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  margin: auto;
  height: fit-content;
  padding: 1em  2em;
}

.reco_img_box{
  position: relative;
  width: 70%;
  padding-top: 70%;
  overflow: hidden;
  margin: auto;
  transform: translateY(-.25em);
}
/* .top_reco_box:hover .reco_img_box{
  transform: translateY(-100%);
  opacity: 0;
} */
.reco_logo_img{
  position: absolute;
  pointer-events: none;
}
.reco_logo_img.nda{top: 0;}
.reco_logo_img.ndak{top: -100%;}
.reco_logo_img.nds{top: -200%;}
.reco_logo_img.nyoga{top: -300%;}
.reco_logo_img.npila{top: -1800%;}
.reco_logo_img.nbox{top: -400%;}
.reco_logo_img.nbal{top: -500%;}
.reco_logo_img.nbalk{top: -600%;}
.reco_logo_img.non{top: -700%;}
.reco_logo_img.nmusic{top: -800%;}
.reco_logo_img.tdl{top: -900%;}
.reco_logo_img.sst{top: -1300%;}
.reco_logo_img.pst{top: -1400%;}
.reco_logo_img.stn{top: -1500%;}
.reco_logo_img.voat{top: -1000%;}
.reco_logo_img.voice{top: -1100%;}
.reco_logo_img.voatk{top: -1200%;}
.reco_img_box{
  transition: transform .4s , opacity .4s;
}
.reco_logo_img_single{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin:auto;
  width: 90%;
  z-index: 2;
}

.reco_detail_btn{
  position: absolute;
  bottom: 8%;
  left: 0;
  right: 0;
  margin: auto;
  width: fit-content;
  width: 35%;
  padding: .3em 1.8em;
  margin: 0 auto;
  opacity: .2;
  z-index: 10;
}

@media (min-width: 769px) {
  .sec_top_reco .sec_ttl {
    padding-top: 0;
  }
  .top_reco_pc_wrap {
    width: 72%;
    margin: 0 0 0 auto;
    padding-top: 0;
  }
  .top_reco_block{
    width: 100%;
    margin: 0;
    /* border: .5px solid var(--color-grey); */
  }
  .top_reco_box{
    width: 20%;
    aspect-ratio: 1 / 1;
  }
  .top_reco_box:nth-child(n+6) {
    border-top: none;
  }
  .top_reco_box:nth-child(5n+1) {
    border-left: 1px solid var(--color-grey);
  }
  .reco_img_box {
    width: 90%;
    padding-top: 90%;
    transform: translateY(.25em);
  }
  .sec_top_contents .foot_desc{
    padding-right: 0;
  }
  .reco_detail_btn{
    width: 38%;
  }
  .reco_txt{
    bottom: 0;
    margin: auto;
    padding: 1em;
  }
  /* .top_reco_box.on .reco_detail_box{
    overflow-y:inherit;
  } */
}/* 769 */

@media (min-width: 1200px) {
  .sec_top_reco .sec_ttl._small{
    font-size: 1.1rem;
    padding-top: 0;
  }
  /* .sec_top_reco_inner{
    display: flex;
    justify-content: space-between;
  }*/
  /* .top_reco_pc_wrap{
    width: 70%;
    margin-left: auto;
    margin-top: -7.7em;
  } */
  /* .top_reco_box {
    width: 11.1111111111111111%;
  } */
  .reco_detail_box{
    font-size: .7em;
    overflow-y: initial;
  }
  .reco_detail_btn {
    width: 45%;
  }
}/* 960 */