@charset "UTF-8";
body {
   background-image: url("../vote_episode/img/bg-body.gif");
   -webkit-background-size: 6px 37px;
   background-size: 6px 37px;
   position: static;
}
header {
   background: url("../vote_episode/img/bg-head.png") repeat-x;
   -webkit-background-size: cover;
   background-size: cover;
   width: 100%;
   height: 50px;
   text-align: center;
   box-sizing: border-box;
   z-index: 1;
   position: relative;
}

.mv1,.mv2 {
   display: none;
}

.top_area {
   padding-bottom: 0;
}
.top_area p {
   padding: 15px;
}
.subtitle img {
   width: 65%;
}
.btn_area {
      text-align: center;

}
.btn_area .btn_vote ,.btn_area .btn_vote img{
   width: 100%;
}

.top_area h2 {
   font-weight: bold;
   color: #f844a5;
   font-size: 1.2em;
   margin-bottom: 0;
   line-height: 1.6em;
   text-align: center;
}

.date_rimit {
   color: #22b3af;
   font-weight: bold;
   font-size: 12px;
   position: relative;
   display: inline-block;
   padding-left: 45px;
   text-align: center;
   margin: 0 auto;
   box-sizing: border-box;
}
.fin_area {
   padding-bottom: 40px;
}

.fin_area .btn_vote {
   width: 100%;
}
.fin {
   color: #22b3af;
   font-weight: bold;
   font-size: 12px;
   position: relative;
   display: inline-block;
   text-align: center;
   margin: 0 auto;
   box-sizing: border-box;
}

.date_rimit::before {
   content: "投票期間";
   display: block;
   position: absolute;
   bottom:0px;
   left:-7%;
   width: 60px;
   background-image: url("../vote_episode/img/bg-vote.png");
   background-repeat: no-repeat;
   -webkit-background-size: 60px 30px;
   background-size: 60px 30px;
   height: 30px;
   color: #fff;
   font-size: 0.7em;
   line-height: 30px;
   text-align: left;
   padding-left: 5px;
}


.list_area {
   background-color: #ffd7d7;
   background-image: url("../vote_episode/img/bg-check.gif");
   padding: 20px 0;
   position: relative;
}

.list_area::before {
   content: "";
   display: block;
   position: absolute;
   top:-29px;
   width: 100%;
   background-image: url("../vote_episode/img/lace-top.png");
   height: 30px;
}
.list_area::after {
   content: "";
   display: block;
   position: absolute;
   bottom:-29px;
   width: 100%;
   background-image: url("../vote_episode/img/lace-bottom.png");
   height: 30px;
}
.title img {
   width:100%;
}

.list_area h2 {
   text-align: center;
   font-weight: bold;
   color: #fff;
   max-width: 1100px;
   padding: 15px;
   margin: 0 auto;
   font-weight: bold;
   font-size: 1.5em;
}
.h2-ep1 {
   background-image: url("../vote_episode/img/bg-dot-orange.gif");
}
.h2-ep2 {
   background-image: url("../vote_episode/img/bg-dot-blue.gif");
}
.list_episode {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   padding: 10px;
}
.list_episode li{
   background-color: rgba(255,255,255,0.8);
   border-radius: 5px;
   margin-bottom:2% ;
   width: 49%;
   box-sizing: border-box;
   line-height: 1.4em;
}

.list_episode li .thumb {
   border:solid #fa4a94 1px;
   margin-bottom: 5px;
}
.list_episode li a {
   color: #000;
   padding: 10px;
   display: block;
}
.list_episode li a .num_story {
   color: #fa4a94;
   font-weight: bold;
   font-size: 1.1em;
   margin-bottom: 5px;
}
.list_episode li a:hover {
   text-decoration: none;
   color: #fa4a94;
}


.list_episode li img {
   width: 100%;
}
.mdl {
   display: none;
}
.bnr,.bnr img {
   width: 100%;
}

.img100 {
   width: 100%;
}
.img50 {
   width: 49%;
}

.modaal-wrapper {
   overflow: hidden;
}

.bg-story_img {
   background: #f1a5a5;
   padding: 10px;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   margin-bottom: 20px;
   background-image: url("../vote_episode/img/bg-check.gif");
   border-radius: 10px;
   border:solid 4px #f67ea0;
   align-items: flex-start;
}
.bg-story_img img {
   margin-bottom: 2%;
   border:solid 2px #fff;
   height: auto;
}
.modaal-container {
   text-align: center;
}

.modaal-content-container {
   padding: 15px!important;
}
.modaal-content-container .num_story {
   background: #f47b2b;
   padding: 5px 10px;
   color: #fff;
   font-weight: bold;
   display: inline-block;
}
.modaal-content-container .title_story {
   font-weight: bold;
   color: #fa4a94;
   font-size: 1.2em;
   padding-bottom: 5px;
   border-bottom: dotted 2px #fa4a94;
}
.modaal-close:after, .modaal-close:before {
   background: #e77!important;
}

.modaal-close {
   position: absolute!important;
   right:-20px!important;
   top:-20px!important;

}

.bottom_area {
   text-align: center;
   padding-bottom: 50px;
   padding-top: 50px;
   background-image: url("../vote_episode/img/bg-ftr1.png"),url("../vote_episode/img/bg-ftr2.png");
   background-repeat: no-repeat;
   -webkit-background-size: 30%;
   background-size: 30%;
   background-position: 0 0,top 0 right 0;
}

.bottom_area .btn_area {
   margin-bottom: 50px;
}

.bnr {
   width: 90%;
   display: inline-block;
}
.bnr img {
   width: 100%;
}




footer {
   background-image: url("../vote_episode/img/bg-check.gif");
}

#copyright {
   color: #716c67;
}

#sns {
   position: fixed;
   top:  15px;
   right:5px;
   z-index: 100;
   width: 40px;
}
.sns_icn {
   width: 40px;
   display: block;
   margin-bottom: 5px;
}
.btn-sns {
   width: 40px;
   width: 40px;
   display: block;
}


#gotop {
   display: block;
   height: 50px;
   width: 50px;
   right: 5px;
   position: fixed;
   bottom: 10px;
   background-image: url("../img/common/gotop.png");
   -webkit-background-size: 50px 50px;
   background-size: 50px 50px;
   background-repeat: no-repeat;
   text-indent: -9999px;
   z-index: 10000;
}


@media screen and (min-width:960px) {

   header {
      height: 117px;
      padding-top: 10px;
      position: relative;
   -webkit-background-size: contain;
   background-size: contain;

   }


   .subtitle img {
      width: 450px;
   }

   .title {
      margin-bottom: 20px;
   }

   .title img {
      width:auto;
   }

   .top_area {
      padding-bottom: 0;
   }
   .top_area h2 {

      font-size: 1.4em;
      margin-bottom: 0;
      line-height: 1.8em;
   }
   .top_area {
      text-align: center;
      font-size: 1.2em;
      position: relative;
   }

   .date_rimit {
      font-size: 20px;
      padding-left: 90px;
      width: 500px;
   }
   .fin_area .btn_vote {
      width: 600px;
   }
   .fin {
      font-size: 20px;
      padding-left: 0;
      width: 600px;
   }



   .date_rimit::before {
      bottom:-3px;
      left:0;
      width: 100px;
      -webkit-background-size: 100px 35px;
      background-size: 100px 35px;
      height: 35px;
      font-size: 0.7em;
      line-height: 35px;
      padding-left: 13px;
   }


   .mv1,.mv2 {
      display: block;
   }

   .mv1 {
      position: absolute;
      top: -150px;
      left:0;
      z-index: 10;
   }

   .mv2 {
      position: absolute;
      top: -150px;
      right:0;
      z-index: 10;
   }

   .btn_area .btn_vote {
      display: block;
      width: 600px;
      background: none;
      margin: 0 auto;
   }

   .btn_area .btn_vote img {
      width: 100%;
   }
   .list_episode {
      max-width: 1200px;
      margin: 0 auto 100px auto;
      justify-content: center;
   }

   .list_episode li a .num_story {
      font-size: 1.2em;
      margin-bottom: 10px;
   }

   .list_episode li .thumb {
      margin-bottom: 10px;
   }
   .list_episode li{
      margin: 15px;
      width: 28%;
   }
   .list_episode li a {
      padding: 15px;
   }

   .bg-story_img {
      padding: 30px;
      border:solid 6px #f67ea0;
   }
   .bg-story_img  img{
      border:solid 1px #fff;
   }


   .modaal-content-container .num_story {
      padding: 5px 15px;
      font-size: 1.3em;
      margin-bottom: 10px;
   }
   .modaal-content-container .title_story {
      font-size: 1.4em;
      margin-bottom: 15px;
   }

.modaal-content-container {
   padding: 30px!important;
}

   .bnr {
      width: 570px;
      display: inline-block;
   }
   .bnr img {
      width: 100%;
   }

   .bottom_area {
      padding-bottom: 100px;
      padding-top: 100px;
      background-position: 0 0,top 0 right 0;
      -webkit-background-size: 15%;
      background-size: 20%;
   }
   #sns {
      position: fixed;
      bottom: 20px;
      left:10px;
   top:  auto;
      width: 60px;
   }
   .sns_icn {
      width: 60px;
      display: block;
   }
   .btn-sns {
      width: 60px;
      height: 60px;
      display: block;
      margin-bottom: 5px;
   }


   #gotop {
      height: 60px;
      width: 60px;
      right: 10px;
      bottom: 17px;
      -webkit-background-size: 60px 60px;
      background-size: 60px 60px;
   }

}


@media screen and (max-width: 1024px) {

   .mv1,.mv2 {
      width: 20%;
   }


}




#interim {
   background-color: rgba(255, 231, 58, 0.25);;
   padding: 40px 0 70px 0;
   margin-top:40px;
   line-height: 1.8em;
}
#interim h1 {
   font-size: 2.5em;
   background: #71a63d;
   color: #fff;
   margin: 0 auto;
   padding: 10px;
   line-height: 1em;
   max-width: 1100px;
   margin-bottom: 20px;
}
#interim h1 p{
   padding:0 0 10px 0;
   font-size: 0.4em;
   line-height: 1em;
}

#interim .interim_list1 {
   display: flex;
   flex-wrap:wrap;
}
#interim .interim_list1 li {
   width: 25%;
   margin: 2%;
   position: relative;
}
#interim .interim_list2 li {
   position: relative;
}
#interim .interim_list1 li .story img,
#interim .interim_list1 li .story {
   width: 100%;
}
#interim .interim_list1 {
   max-width: 1200px;
   margin: 0 auto;
   justify-content:center;
   margin-bottom: 20px;
   line-height: 1.5em;
}
#interim .interim_list1 .rank {
   position: absolute;
   top:-23px;
   left:-24px;
   text-align: center;
   background: #f52572;
   color: #fff;
   width: 35px;
   height: 35px;
   line-height: 35px;
   border-radius: 45px;
}
#interim .interim_list2 {
   width: 750px;
   margin: 0 auto;
}
#interim .interim_list1 li a,
#interim .interim_list2 li a {
   color: #4e4949;
   font-weight: bold;
}

#interim .interim_list2 li {
   text-align: left;
   padding: 10px 0 10px 45px;
   margin-bottom: 20px;
   border-bottom: dotted 2px #b7b7b7;
}
#interim .interim_list2 .rank {
   position: absolute;
   top:-5px;
   left:-24px;
   text-align: center;
   background: #f38faf;
   color: #fff;
   width: 29px;
   height: 29px;
   line-height: 29px;
   border-radius: 45px;
   font-size: 0.7em;
   font-weight: bold;
}

.num_vote {
   font-size: 1.7em;
   font-weight: bold;
   margin-top: 30px;
}
.num_vote .num {
   width: 260px;
   padding: 20px 0;
   margin:0 auto;
   background: #2d2b2b;
   color: #fff;
   padding: 20px;
   margin-bottom: 20px;
    margin-top: 10px;
  font-size: 2em;
   height: 50px;
   line-height: 50px;
   font-weight: normal;
}
.num_vote .num span {
   font-size: 0.4em;
}

#result {
   background-color: rgba(255, 231, 58, 0.25);;
   padding: 40px 0 100px 0;
   margin-top:0;
   line-height: 1.8em;
}
#result h1 {
   margin-bottom: 30px;
}


#result .vote_comment h1 {
   background: none;
   color: #16a9a7;
   font-size: 1.2em;
   margin-bottom: 0;
   font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#result_top .story {
   position: relative;
   display: block;
   width: 500px;
   margin: 0 auto 30px auto;
   text-align: center;
}
#result_top .story:hover {
   text-decoration: none;
}
#result_top .thumb {
   width: 500px;
}

#result_top .story .rank {
   position: absolute;
   top:-30px;
   left:-50px;
   background: #f1598a;
   color: #fff;
   text-align: center;
   width: 70px;
   height: 70px;
   line-height: 70px;
   border-radius: 100px;
   font-size: 1.2em;
   font-weight: bold;
   z-index: 10;
   letter-spacing: 0.05em;
}


#result_top .vote_comment {
   width: 800px;
   margin: 0 auto;
   border-radius: 10px;
   padding: 10px 30px;
   box-sizing: border-box;
   background: #f5e9cf;
   text-align: center;
}

.vote_comment ul li {
   text-align: left;
   font-size: 0.8em;
   line-height: 1.4em;
   margin-bottom: 7px;
   background: #fff;
   color: #867b79;
   border-radius: 10px;
   padding: 10px 20px;
   border:solid 1px #ffe59a;
}

.btn_toggle {
    border-radius: 42px;
    padding: 26px 20px;
    width: 500px;
    margin: 0 auto;
    margin-top: 30px;
    cursor: pointer;
    background: #f7487f;
    font-weight: bold;
    color: #fff;
    font-size: 1.4em;
}

.btn_toggle:hover {
    background: #ff7ba4;
}
#result_list {
   padding-top: 50px;
}

#result_list .result_list_item {
   border-bottom: dotted 2px #52abab;
   width: 1000px;
   margin: 20px auto;
   position: relative;

}
#result_list .result_list_item .story {
   display: flex;
   align-items: flex-start;
   color: #4e4949;
}

#result_list .result_list_item .thumb {
   width: 300px;
   padding-top: 20px;
   position: relative;
}
#result_list .result_list_item .thumb img {
   width: 100%;
}
#result_list .result_list_item .txt_area {
   width: 100%;
   padding: 0 20px 10px 20px;
   box-sizing: border-box;
}
#result_top .title_story {
   font-weight: bold;
   color: #f54e92;
}
#result_list .title_story{
   text-align: left;
   font-weight: bold;
   color: #f54e92;
}
#result_list .result_list_item a.story:hover{
   text-decoration: none!important;
   color: #7d7979;
}
#result_list .result_list_item .title_story {
   margin-bottom: 10px;
}
#result_list .result_list_item .rank {
   position: absolute;
   top:-5px;
   left:-24px;
   text-align: center;
   background: #f38faf;
   color: #fff;
   width: 29px;
   height: 29px;
   line-height: 29px;
   border-radius: 45px;
   font-size: 0.7em;
   font-weight: bold;
   z-index: 10;
}
#result_list {
   display: none;
}

@media screen and (max-width: 1024px) {
   #interim .inner {
      width: 95%;
      margin: 0 auto;
   }
   #interim h1 {
      text-align: center;
      font-size: 1.6em;
   }
   .num_vote .num {
   width: 180px;
   height: 30px;
   line-height: 30px;
  font-size: 1.7em;
   }
   #interim h1 p {
      font-size: 0.6em;
   }
   #interim .interim_list1 li {
      width: 30%;
      margin-bottom: 30px;
   }
   #interim .interim_list2 {
      width: 90%;
   }
   #interim .interim_list1{
      width: 90%;
   }
   #interim .interim_list1 li {
      width: 90%;
   }
   .num_vote,.num_vote .num {
      text-align: center;
   }
   #result h1  {
      margin-bottom: 10px;
   }

   #result h1 img {
      width: 100%;
   }
   .vote_comment ul li { 
      margin-bottom: 5px;
      padding: 10px;
   }

   #result_top .story,#result_top .story img{
      width: 90%;
   }
   #result_top .vote_comment {
      padding: 10px;
   }
   #result_top .vote_comment,#result_list .result_list_item {
      width: 100%;
   }
   .btn_toggle {
      width: 70%;
      margin: 0 auto;
      text-align: center;
   }
   #result_list .result_list_item .story {
      display: block;
   }
   #result_top .story .rank {
      top:-20px;
      left:-10px;
      width: 50px;
      height: 50px;
      line-height: 50px;
      border-radius: 100px;
      font-size: 1.2em;
   }
   #result_top .vote_comment {
      border-radius:0;
      margin-bottom: 20px;
   }
   #result_list {
      padding-top: 20px;
   }
   #result_list .result_list_item .thumb {
      display: block;
      margin: 0 auto;
      text-align: center;
      width: 60%;
   }
   #result_list .result_list_item .txt_area {
      padding: 10px;
   }
   #result_list .result_list_item .title_story {
      padding: 0 10px;
      margin-bottom: 5px;
      line-height: 1.4em;
      text-align: center;
   }
    #result_list .result_list_item .thumb img{
      width: 100%;
    }

}