@charset "utf-8";

@import url("reset.css");
@import url("responsive.gs.24col.css");
/*slick*/
@import url("slick.css");
@import url("slick-theme.css");
/*modal*/
@import url("magnific-popup.css");
/*base*/
@import url("common.css");
@import url("frame.css");
/*app*/
@import url("app.css");


/*ttl*/
#ttl h2{
display:none;
}
#ttl-footer{
background-color:rgba(0,0,0,0.2);
padding:10px;
}
#ttl h3{
font-size:18px;
font-weight:bold;
text-align:center;
margin-bottom:10px;
}
#ttl-footer p{
font-size:24px;
letter-spacing:0.2em;
font-weight:bold;
text-align:center;
}
#ttl-footer #counter~p{
margin-top:10px;
}

@media ( min-width : 640px ) {
#ttl-footer{
padding:20px 10px;
}
}

#counter~.row{
margin-top:10px;
}
@media ( min-width : 640px ) {
#counter~.row{
margin-top:20px;
}
}


#ranking-items{
width:300px;
margin:0px auto 20px;
overflow:hidden;
}
#ranking-items ol{
width:300px;
margin:30px auto 0;
}
#ranking-items ol:after{
display:block;
content:'';
clear:both;
}
#ranking-items ol li{
width:80px;
float:left;
margin:0 10px 0px;
position:relative;
}
#ranking-items ol li:before{
display:block;
position:absolute;
content:'';
width:27.5px;
height:27px;
top:-17px;
left:-9px;
background-position:left top;
background-repeat:no-repeat;
background-size:contain;
}
#ranking-items ol li:nth-child(1):before{background-image:url(../img/app/icon_rank1.png);}
#ranking-items ol li:nth-child(2):before{background-image:url(../img/app/icon_rank2.png);}
#ranking-items ol li:nth-child(3):before{background-image:url(../img/app/icon_rank3.png);}

#ranking-items ol li span{
display:block;
margin-top:10px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
font-size:11px;
line-height:1;
text-align:center;
}

@media ( min-width : 640px ) {
#ranking-pre p{
text-align:center;
}
#ranking-items{
width:600px;
}
#ranking-items .ranking-item{
width:600px;
}
#ranking-items ol{
}
}

.vote > .text{
text-align:center;
}
.vote-items{
width:300px;
margin:-10px auto 20px;
letter-spacing:-0.4em;
}
.vote-items .vote-item{
width:60px;
height:60px;
padding:5px;
display:inline-block;
vertical-align:top;
cursor:pointer;
position:relative;
}
.vote-items .vote-item.active{
padding:3px;
border:2px solid #af0000;
border-radius:5px;
}
.vote-items .vote-item.active:after{
display:block;
content:'';
width:15px;
height:15px;
background:url(../img/app/icon_vote_active.svg) no-repeat center center;
background-size:contain;
position:absolute;
top:1px;
right:1px;
}
.vote-items .slick-slide:first-child:nth-last-child(1) > div:first-child{
text-align:center;
}
@media ( min-width : 640px ) {
.vote-items{
width:600px;
margin:-10px auto 20px;
}
.vote-items .vote-item{
width:100px;
height:100px;
padding:10px;
}
.vote-items .vote-item.active{
padding:8px;
}
.vote-items .vote-item.active:after{
width:30px;
height:30px;
top:2px;
right:2px;
}
.vote-items .slick-slide{
padding:0 50px;
}
}


.detail-items{
width:300px;
margin:0 auto 20px;
}
.detail-item{
width:300px;
text-align:center;
}

.detail-item h4{
min-width:40px;
padding:10px;
border-radius:5px;
border-color:rgba(0,0,0,1);
border-width:2px;
border-style:solid;
margin:0 0 20px;
font-size:16px;
line-height:16px;
font-weight:bold;
}
.detail-item h4 span{
display:inline-block;
text-align:left;
}

.detail-item .vote-image{
display:inline-block;
padding:4px;
background-color:rgba(0,0,0,0.2);
vertical-align:top;
}
.detail-item .vote-image img{
vertical-align:top;
}
.detail-item .description{
text-align:left;
display:inline-block;

}

.detail-items .slick-list{
/*height:auto !important;*/
}
#app-content .detail-item .description.text{
padding:15px 10px 0;
margin:0;
}
@media ( min-width : 640px ) {
.detail-items {
width:600px;
}
.detail-item{
width:600px;
}
}

.selected-items{
width:300px;
margin:20px auto 0px;
}
.selected-item .name{
padding:15px 0;
text-align:center;
font-weight:bold;
}
#input-key{
margin-bottom:20px;
}
#input-key > .text{
text-align:center;
}
#input-key .key-form{
overflow: hidden;
width: 80%;
margin: 0 auto;
text-align: center;
}
#input-key input.key-l{
width:300px;
display:block;
margin:0px auto;
}
#input-key input.key-s{
width: 265px;
display:block;
float: left;
}
#input-key #icon-confirm-key{
	width: 30px;
	height: 30px;
	margin-top:5px;
	float: right;
}
#input-key #icon-confirm-key a{
	display: block;
	width: 30px;
	height: 30px;
	overflow: hidden;
	text-indent: -9999px;
	border-color: rgba(0,0,0,1);
	position: relative;
}
#input-key #icon-confirm-key a:before{
display:block;
content:'';
font-weight:bold;
border-style:solid;
border-width:15px;
border-color:inherit;
height:30px;
width:30px;
border-radius:15px;
box-sizing:border-box;
position:absolute;
top:0px;
left:0;
opacity:0.5;
}
#input-key #icon-confirm-key:hover a:before{
opacity: 0.6;
}
#input-key #icon-confirm-key a:after{
display:block;
content:'?';
height:16px;
width:30px;
border-radius:8px;
line-height:16x;
text-align:center;
font-size:16px;
box-sizing:border-box;
vertical-align:middle;
color:#fff;
font-weight:bold;
position:absolute;
top:4px;
left:0;
text-indent: 0;
}
#confirm-key{
text-align:center;
font-size:12px;
margin:10px auto 0px;
}
.btns{
padding:20px 0px;
margin:0px auto;
}
.btn-l a.dim {
	opacity: 0.3;
	pointer-events: none;
}

#input-key input[type=text].input-id~.confirm-key{
margin: 10px 10px 0;
text-align: center;
display: block;
}

@media ( min-width : 640px ) {
#input-key input[type=text].input-id~.confirm-key{
margin: 0px 10px;
display: inline-block;
}
.selected-items{
width:600px;
}
.btns{
padding:20px 0px;
margin:0px auto;
}
}

.caution{
margin:20px 10px;
padding:15px;
text-align:center;
font-weight:bold;
color:#af0000;
border:2px solid #af0000;
}
.caution strong{
display:block;
font-size:18px;
}
@media ( min-width : 640px ) {
.caution{
margin:20px 20px;
}
}

/*modal--------------------------------------------------------------------*/

.modal-app #btn-no,
.modal-app #btn-yes{
display:inline-block;
margin:0 5px;
}
.modal-app .btns{
letter-spacing:-0.4em;
text-align:center;
}
.modal-app #btn-no a,
.modal-app #btn-yes a{
width:130px;
}

.modal-app #btn-no a{
background-color:rgba(127,127,127,0.5);
}
.modal-app #btn-yes a{
background-color:#af0000;
}
.modal-app #btn-twitter a{
width:280px;
}
.modal-app .sns-text textarea{
width:100%;
height:5em;
}
.voted-video {
	width: 320px;
	height: 180px;
	margin: 0 auto 20px;
}

@media (min-width: 640px){
.voted-video {
	width: 640px;
	height: 360px;
	margin: 0 -20px 20px;
}
}

/*aggregate--------------------------------------------------------------------*/
.aggregate,
.share-blank{
font-weight:bold;
text-align:center;
}

/*share--------------------------------------------------------------------*/
.share{
text-align:center;
}
.voted .detail-item{
margin-top:20px;
}

#btn-go-vote{
margin:20px auto;
}

/*result-blank--------------------------------------------------------------------*/
.img-blank{
text-align:center;
width:308px;
margin:0 auto 20px;
}
.img-blank img{
border:4px solid rgba(0,0,0,0.2);
}
@media ( min-width : 640px ) {
.img-blank{
text-align:center;
width:608px;
}
}


/*result--------------------------------------------------------------------*/
.result .rank-1,
.result .rank-2,
.result .rank-3{
display:block;
width:120px;
height:60px;
padding-top:24px;
margin:20px auto;
line-height:36px;
text-align:center;
font-size:18px;
font-weight:bold;
}
.result .rank-1{
background:url(../img/app/rank_1.png) no-repeat center top;
background-size:contain;
color:#9a884a;
}
.result .rank-2{
background:url(../img/app/rank_2.png) no-repeat center top;
background-size:contain;
color:#818181;
}
.result .rank-3{
background:url(../img/app/rank_3.png) no-repeat center top;
background-size:contain;
color:#976a49;
}
.result .vote-count{
margin-bottom:10px;
margin-top:-10px;
font-weight:bold;
}
.result .row{
margin:20px 0px;
}
@media ( min-width : 640px ) {
.result .row{
margin:20px 10px;
}
}
.result .col{
padding:0 10px;
text-align:center;
}
.result .col img{
margin-top:10px;
}
.result .col .name{
font-weight:bold;
padding:10px 0;
}

/*  applogin----------------------------------------*/
.app-login{
  margin: 20px auto;
}
.app-login > img{
  max-width: 300px;
  margin: 0 auto;
  display: block;
}
.app-login > p{
  padding:0 20px;
  margin: 20px auto;
  text-align: left;
  letter-spacing: 0em;
  word-break: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
@media ( min-width : 640px ) {
  .app-login{
    margin: 20px;
  }
  .app-login > img{
    max-width: 600px;
  }
  .app-login > p{
    padding:0;
  }
}