@charset "utf-8";
/* CSS Document */
/*総選挙*/
div#contents{
	background: url(../img/no_column_bg.png) 0 0 repeat-y !important;
}

/*影*/
#no_c_title::after,
#ele_message::after,
.bkn_ele a::after{
	content:"";
	display:block;
	width:100%;
	height:11px;
	background:url(../img/bar_shadow.png) no-repeat center bottom;
	position:absolute;
	left:0;
	z-index:10;
}
#no_c_title::after,
#ele_message::after {
	bottom:-14px;	
}
.bkn_ele a::after{
	bottom:-11px;
}

.ribbon_title{
	border-image:url(../img/bar_shadow.png) 0 0 11 0 stretch;
	background-clip: padding-box;
	border-bottom:11px solid transparent;
	margin-bottom:-11px;
}

/*見出し*/
#no_c_title{
	background-color:#555555;
	box-shadow:inset 0 1px 5px rgba(0,0,0,.3), 0 2px #555555;
	border-bottom:#FFFFFF 1px solid;
	text-align:center;
	color:#FFFFFF;
	height:48px;
	line-height:49px;
	box-sizing:border-box;
	margin:0 6px;
	position: relative;
}

/*投票済みメッセージ*/
#ele_message{
	background-color:rgba(255,255,255,.9);
	position:absolute;
	top:50px;
	left:6px;
	right:6px;
	height:50px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	border-bottom: 3px solid rgba(255,255,255,0);
}

#ele_message span{
	color:#FF1154;
	font-size:130%;
}

/*メインビジュアル*/
#ele_visual{
	display:block;
	margin:2px auto 0;
}

/*投票期間・総投票数プレート*/
.voting_period,
.total_votes{
	background-image:url(../img/period_bg.png);
	background-position:center center;
	position:absolute;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}

.voting_period{
	width:112px;
	height:112px;
	top:150px;
	left:20px;
}

.voting_period time{
	display:block;
	font-size:140%;
}

.total_votes{
	width:108px;
	height:108px;
	border-radius:54px;
	padding-top:5px;
	box-sizing:border-box;
	box-shadow:1px 2px 1px 1px rgba(0,0,0,.25);
	top:152px;
	right:20px;
}

.total_votes span{
	color:#FC3535;
	font-size:200%;
	line-height:1.2;
}

.bkn_ele .voting_period,
.bkn_ele .total_votes{
	top:50%;
}

.bkn_ele .voting_period{
	margin-top:-42px;
	left:-56px;
}

.bkn_ele .total_votes{
	margin-top:-40px;
	right:-54px;
}

/*テキスト入力エリア*/
#ele_text{
	width:900px;
	margin:30px auto;
}

/*投票エリア*/
#candidate{
	border:30px solid #C9A80E;
	border-image:url(../img/line.png) 30 30 repeat;
	margin:163px 30px 30px;
	position:relative;
}


#candidate.backnote{
	margin:60px 30px;
}
#candidate.backnote .note {
	padding:20px;
	font-size:133%;
	text-align: center;
}
#candidate h2,
#candidate div{
	position:absolute;
	width:246px;
	height:134px;
	top:-164px;
	left:50%;
	margin-left:-123px;
	background-image:url(../img/mark_election.png);
	display:flex;
	align-items:flex-end;
	justify-content:center;
	text-align:center;
	color:#FFFFFF;
	padding-bottom:2px;
	box-sizing:border-box;
	font-size: 1.5em;
}

#candidate > p{
	text-align:center;
	color:#C9A60D;
	font-size:150%;
	margin:10px 0;
}

#candidate > ul{
	display:flex;
	flex-wrap:wrap;
	align-items:stretch;
}

#candidate > ul > li{
	width:20%;
	text-align:center;
	display:flex;
	flex-direction:column;
	box-sizing:border-box;
	padding:0 5px;
	margin:20px 0;
	font-size: 83.3%;
	overflow: hidden;
}

.el_title{
	color:#FF1155;
	font-size: 130%;
	flex-grow:1;
	display:flex;
	align-items:center;
	justify-content:center;
	word-break: break-all;
}

.el_img{
	display:block;
	width:160px;
	height:160px;
	border-radius:80px;
	overflow:hidden;
	margin:10px auto 5px;
	position:relative;
}

.el_img img{
	position:absolute;
	top:50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
}

#thu_h .el_img img{
	height:100%;
}

#thu_w .el_img img{
	width:100%;
}

a.el_img,
span.el_img{
	box-shadow:0 0 5px 2px rgba(0,0,0,.3);
}

a.el_img::before{
	position:absolute;
	display:block;
	top:50%;
	left:50%;
	margin:-30px 0 0 -30px;
	width:60px;
	height:60px;
	border-radius:30px;
	background-color:#FF1156;
	box-shadow:0 0 0 160px rgba(255,255,255,.7);
	color:#FFFFFF;
	padding-top:30px;
	box-sizing:border-box;
	font-size:110%;
	z-index:10;
	opacity:0;
}

a.el_img::after{
	content:"";
	display:block;
	width:20px;
	height:20px;
	background-image:url(../img/icon.election.png);
	position:absolute;
	top:50%;
	left:50%;
	margin:-20px 0 0 -10px;
	z-index:10;
	opacity:0;
}

.ele_vote .el_img::before{
	content:"投票する";
}

.ele_read .el_img::before{
	content:"見る";
}

.ele_read .el_img::after{
	background-position:0 -20px;
}

a.el_img,
a.el_img::before,
a.el_img::after{
	transition:all .3s linear ;
}

a.el_img:hover{
	box-shadow:0 0 10px 2px rgba(0,0,0,.3);
	text-decoration: none;
}

a.el_img:hover::before,
a.el_img:hover::after{
	opacity:1;
}


/*ボタン*/
.bk_btn,
#ele_results > li section > div > a{
	display: block;
	height: 40px;
	line-height: 40px;
	text-align: center;
	color: #FFFFFF;
	background-color:#2980B9;
	font-size:116.7%;
	border-radius: 3px;
	box-shadow:0 2px 3px rgba(0,0,0,.5);
}

.bk_btn{
	width:900px;
	margin: 0 auto 20px;
}

#ele_results > li section > div > a{
	margin-top:15px;
	/*margin-bottom:15px;*/
}

.bk_btn::before,
#ele_results > li section > div > a::before{
	margin-right:8px;
}

.bk_btn::before{
	content:url(../img/icon_bnumlist_w.png);
	vertical-align:-3px;
}

#ele_results > li section > div > a::before{
	content:url(../img/icon_img.png);
	vertical-align:-6px;
}

.bk_btn:hover,
#ele_results > li section > div > a:hover{
	text-decoration:none;
	opacity:.6;
}


/*バックナンバーリスト*/
.bkn_ele{
	position:relative;
	width:770px;
	margin:50px auto;
}

.bkn_ele h3 a{
	color:#FF3D72;
	font-size: 1.17em;
}

/*王冠*/
.bkn_ele h3::before,
#ele_results h5::before{
	content:"";
	display:inline-block;
	width:28px;
	height:20px;
	background-image:url(../img/icon_crown.png);
	background-repeat:no-repeat;
	background-position:0 -20px;
	vertical-align:-1px;
	margin-right:5px;
}

/*ノート*/
#ele_results .comment_note::before{
	background-image:url(../img/icon_note_g.png);
	background-position: center center;
	vertical-align:-3px;
}


/*結果発表*/
.ribbon_title{
	background-color:#FC3636;
	color:#FFFFFF;
	text-align:center;
	height:40px;
	line-height:41px;
	width:940px;
	margin-left:auto;
	margin-right:auto;
	font-size:128%;
	position:relative;
}

.ribbon_title::before,
.ribbon_title::after{
	display:block;
	width:0;
	height:0;
	position:absolute;
	top:-10px;
	content:"";
	border:transparent 0 solid;
}

.ribbon_title::before{
	border-bottom:#AA002F 10px solid;
	border-left-width:20px;
	left:0;
}

.ribbon_title::after{
	border-bottom:#AA002F 10px solid;
	border-right-width:20px;
	right:0;
}


#ele_results{
	width:840px;
	margin:0 auto 30px;
}

#ele_results > li{
	background-color:#FFFFFF;
	position:relative;
	box-shadow:0 0 3px 1px rgba(0,0,0,.3);
	margin-top:90px;
	padding-top:15px;
	box-sizing:border-box;
}

#ele_results > li > h4,
#ele_results > li > span,
#ele_results > li > .ele_type{
	padding:0 15px;
	display:block;
}

#ele_results > li > .ele_shopname{
	padding:0 15px 15px;
}

#ele_results > li > span{
	font-size:85%;
}

#ele_results .ele_type{
	position:static !important;
	padding-top:15px;
}

#ele_results > li .ele_shopname,
#ele_results .best6 span{
	font-size:100%;
}

#ele_results h3{
	position:absolute;
	width:246px;
	height:69px;
	left:50%;
	top:-69px;
	margin-left:-123px;
	background-image:url(../img/mark_election.png);
	background-position:0 -295px;
	display:flex;
	align-items:flex-end;
	justify-content:center;
	text-align:center;
	color:#FFFFFF;
	box-sizing:border-box;
	font-size:125%;
}


#ele_results #e_no_1{
	margin-top:87px;
	padding:0;
}

#e_no_1 h3{
	background-size:160px;
	background-position:0 0;
	width:160px;
	margin-left:-80px;
	height:87px;
	top:-87px;
}

#ele_results #e_no_2,
#ele_results #e_no_3{
	margin-top:100px;
	padding:0;
}

#e_no_2 h3,
#e_no_3 h3{
	height:80px;
	top:-80px;
}

#e_no_2 h3{
	background-position:0 -134px;
}

#e_no_3 h3{
	background-position:0 -214px;
}

.win_votes{
	position:absolute;
	top:-30px;
	left:-10px;
	line-height:1.4;
	background: #484848;
	background: linear-gradient(to right bottom, #484848 50%,#333333 50%);
	box-shadow:0 0 4px 1px rgba(0,0,0,.3);
	color:#FFFFFF;
	padding:5px;
	display: flex;
	justify-content:center;
	align-items:center;
	text-align:center;
	z-index:10;
	min-width: 65px;
}

#e_no_1 .win_votes{
	width:100px;
	height:100px;
	font-size:140%;
}

#e_no_2 .win_votes,
#e_no_3 .win_votes{
	width:80px;
	height:80px;
	font-size:130%;
}

#ele_results > li > img:not(:last-child),
.ele_img_gray:not(:last-child){
	margin:15px 0;
}
#ele_results > li > a img{
	margin:15px 0;
}
#ele_results h5{
	font-size:125%;
	margin-bottom:10px;
}

/*1行*/
#ele_results h4,
#ele_results > li .ele_shopname{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display:block;
	/* 一元化 2020.06 UNI */
	width: 380px;
}
#ele_results > li.best6 .ele_shopname{
	width:233px;
}
#ele_results > li .ele_shopname.other{
	width:160px !important;
}
/*2行*/
#ele_results .ele_s_title{
	white-space: normal;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	height: 3.2em;
	text-align: left;
	margin-bottom: 5px;
	width: 90%;
	word-break: break-all;
}

/*掲載期間終了*/
#ele_results li .ele_end{
	flex:0 0 100%;
	text-align:center;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	color:#277FB8;
  display: flex;
	flex-direction:column;
  align-items: center;
	justify-content:center;
	background-color:#F6F6F6;
}

#ele_results #e_no_1 .ele_end,
#ele_results #e_no_2 .ele_end,
#ele_results #e_no_3 .ele_end{
	position:static;
	min-height:160px;
}

#ele_results .ele_end::before{
	content:url(../img/icon_end.png);
	display:block;
	margin-bottom:5px;
}

/*店舗横長画像背景色*/
.ele_img_gray{
	height:0;
	padding-top:100%;
	position:relative;
}

.ele_img_gray img{
	position:absolute;
	top:50%;
	transform: translate3d(0, -50%, 0);
}


/*結果発表・投票ポップアップ*/
#pop_ele,
#pop_ele body{
	height:100%;
	box-sizing:border-box;
}

#pop_ele body,
#ele_results,
#e_no_1,
#e_no_2,
#e_no_3{
	display:flex;
}

#ele_results{
	flex-wrap:wrap;
}

#ele_results > li{
	width:calc((100% - 75px) / 4);
}

#ele_results > li:nth-child(1n+8){
	margin-left:25px;
}

#ele_results #e_no_1,
#ele_results #e_no_2,
#ele_results #e_no_3{
	width:100%;
}

#ele_results .best6{
	width:calc((100% - 50px) / 3);
}

#ele_results .best6:nth-child(5){
	margin-left:25px;
	margin-right:25px;
}

#pop_ele body > *,
#e_no_1 > *,
#e_no_2 > *,
#e_no_3 > *{
	flex:0 0 50%;
}

#pop_ele body > div a,
#e_no_1 > div,
#e_no_2 > div,
#e_no_3 > div{
	display:flex;
	min-height:420px;
	align-items:center;
	overflow:hidden;
}

#pop_ele body > div img,
#ele_results > li img{
	width:100%;
}

#pop_ele body > section,
#e_no_1 section,
#e_no_2 section,
#e_no_3 section{
	padding:15px 0;
	box-sizing:border-box;
	position:relative;
}

#pop_ele body > section{
	font-size:120%;
}

#pop_ele body > section > *,
#e_no_1 section > *,
#e_no_2 section > *,
#e_no_3 section > *{
	margin-left:15px;
	margin-right:15px;
}

#ele_results #e_no_1 section > div,
#ele_results #e_no_2 section > div,
#ele_results #e_no_3 section > div{
	position:absolute;
	bottom:15px;
}

#elep_girl h1,
#elep_girl h1 a,
#ele_results h4 a{
	color:#FF1152;
}

#elep_shop h1,
#elep_shop h1 a,
#ele_results .ele_s_title a,
.ele_shopname,
.ele_shopname a{
	color:#287FB8;
}

#ele_results li > h4{
	font-size:100%;
}

#ele_results .best6 h4{
	font-size:120%;
}

#ele_results li section h4{
	font-size:130%;
}

#pop_ele form select,
#ele_comp{
	display:block;
	margin-top:20px;
	margin-bottom:20px;
	height:35px;
	line-height:35px;
	box-sizing:border-box;
}

#pop_ele form select{
	margin-left:auto;
	margin-right:auto;
}

#pop_ele form select,
#ele_comp{
	color:#D9A300;
	font-size:18px;
	width:80%;
}

#ele_comp,
#ele_conp_mess{
	text-align:center;
    margin: 20px auto;
}

#ele_conp_mess,
#pop_ele form input[type="submit"],
#ele_disable{
	height: 40px;
	line-height: 40px;
	font-size: 133.3%;
}

#ele_conp_mess{
	color:#DE2E40;
}

#pop_ele form input[type="submit"],
#ele_disable{
	display: block;
	margin-top:20px;
	text-align: center;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif, Meiryo;
	color: #FFF;
	border: 0;
	padding: 0;
	border-radius: 3px;
}

#pop_ele form input[type="submit"]{
	width:100%;
	cursor: pointer;
}

h1 + #ele_disable{
	margin-top:45px;
}

#pop_ele form input[type="submit"]{
	background: #DE2F41;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.4);
	-webkit-appearance: none;
	transition: 0.3s ease-in-out;
}

#ele_disable{
	background: #CCCCCC;
}

#pop_ele form input[type="submit"]:hover{
	opacity: 0.6;
}

#pop_ele body > div
#e_no_1 > div,
#e_no_2 > div,
#e_no_3 > div,
.ele_img_gray,
.ele_p_text{
	background-color:#F6F6F6;
	overflow: hidden;
}

.ele_p_text{
	padding:15px;
	overflow:auto;
	box-sizing:border-box;
}

#pop_ele .ele_p_text{
	position:absolute;
}

#elep_girl .ele_p_text{
	height:50%;
	width:calc(100% - 30px);
	bottom:80px;
}

#elep_shop .ele_p_text{
	height:40%;
	bottom:15px;
	width:calc(100% - 30px);
}

#ele_results .ele_p_text{
	height: 250px;
	width: 390px;
	word-break: break-all;
}

#elep_girl .ele_type{
	position:absolute;
	bottom:40px;
}

#elep_shop .ele_type{
	margin-bottom:10px;
}

.ele_type p{
	height: 24px;
	line-height: 24px;
	text-align: center;
	color: #fff;
	display:inline-block;
}

.ele_type .area{
  padding: 0 10px;
}

.ele_type .kind{
	background: #888;
	padding: 0 10px;
}

#elep_girl .ele_shopname{
	position:absolute;
	bottom:15px;
	line-height:18px;
	width: calc(100% - 30px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}



/*fancybox*/
.fancybox-inner{
	padding:0;
	margin:0;
	border-radius:0;
}

.fancybox-outer::before{
	content:"投票";
	display:block;
	position:absolute;
	text-align:center;
	background-image:url(../img/mark_election.png);
	background-size:123px;
	left:50%;
	top:-67px;
	width:123px;
	height:67px;
	margin-left:-61px;
	color:#FFFFFF;
	box-sizing:border-box;
	padding-top:44px;
	font-size:15px;
}

.fancybox-close{
	top:-10px;
}

.fancybox-prev,
.fancybox-next{
	width:36px;
	height:50px;
	top:50%;
	margin-top:-25px;
}

.fancybox-prev{
	left:-45px;
}

.fancybox-next{
	right:-45px;
}