@CHARSET "UTF-8";

h1,h2,h3,h4,h5,div,table,tr,td,ul,ol,dl,dl,dt,dd,ul,ol,li,body,header,footer,article,section,nav{
	padding:0;
	margin:0 auto;
	text-align:left;
	list-style:none;
	font-weight:normal;
}

area{
  border:none;
  outline:none;
}

article{
	position:relative;
}

a{font-weight: bold;}
/*****/

/*????---------------------------****/

/*??????*/
.img_pc{display: inline-block}
.img_sp{display: none}
img{max-width: 100%;}
@media only screen and (max-width: 500px) {
    .img_sp{display: inline-block;}
    img.img_sp{
        width: 80%;
        margin: 0 auto 20px;
    }
    .img_pc{display: none}
}
/*??????*/

/*?????????*/
.content{
	max-width:980px;
	margin:0 auto;
    line-height: 1.2;
}
    .content > *:not(#main_img){
        margin: 0px 20px 30px;
    }
	.content img{border:1px solid rgb(255,255,255,.5)}

@media only screen and (max-width: 500px) {
    .content > *:not(#main_img){
        margin: 10px 5px 30px;
    }
}
/*?????????*/

/*main??*/
#main_img{
	background-color:#000;
}
	#main_img img{
		display:block;
		margin:0 auto;
        max-width: 980px;
        width: 100%;
        border: none;
	}
/*main??*/

/*theme*/
#theme{
    font-size: var(--common-fontS2_xl);
    font-weight: bold;
    line-height: 1.8;
    text-align: center;
    padding: 20px 0;
}
	#theme span:not(.num):not(.hex){
		color: #00b4ff;
		display: inline-block;
	}
    #theme img{
        border: none;
        max-width: fit-content;
        width: 100%;
    }
#theme #resultimg{text-align: center;}
@media only screen and (max-width: 500px) {
    #text_area #theme{
        padding: 0;
    }
    #theme img.img_sp{
        margin: 0 auto 0px;
        padding: 0;
    }
}
/*theme*/

/*????*/
#menu{
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    padding: 0 !important;
}
	#menu li{
		display: inline-block;
        line-height: 0;
        flex: 1;
	}
		#menu a{
			background: none;
            border: 4px solid;
            margin: 5px;
            display: flex;
            align-items: center;
            padding: 5px;
            justify-content: center;
            white-space: nowrap;
			color: #00b4ff;
		}
			#menu svg{
				width: 32px;
                height: 32px;
                display: inline-block;
				fill: #00b4ff;
			}
			#menu p{
				display: inline-block;
                font-size:var(--common-fontS2_xl);
                font-weight: bold;
                text-align: center;
                letter-spacing: 5px;
                margin: 0 0 0 10px;
			}
			#menu .confirmation p{letter-spacing:0;}
		#menu a:hover{
            text-decoration: none;
			opacity: .8
        }

/*????*/

/*???*/
h2{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size:var(--common-fontS2_xl);
    font-weight: bold;
    padding: 5px 10px;
    background: #ffffff;
    color: #000000;
    border: double 4px #000;
	margin-bottom: 1rem;
}
    h2 svg{
        width: 2rem;
        height: 1.8rem;
        margin-right: 10px;
    }
/*???*/

/*content_sab*/
.content_sab{
    padding: 20px 20px 30px;
}
@media only screen and (max-width: 500px) {
    .content_sab{
        padding: 20px 10px 30px;
		text-align: center;
    }
}
.content_sab h3{
    line-height: 1.2;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.content_sab h3::after,.content_sab h3::before{
    content: "";
    display: block;
    border-bottom: 2px dotted;
    margin-top: -6px;
}
.content_sab h3::before{
    width: 10px;
    margin-right: 5px;
}
.content_sab h3::after{
    flex: 1;
    margin-left: 5px;
}
.content_sab >*:not(h3){
    padding: 5px 15px 0;
    line-height: 1.6;
}
@media only screen and (max-width: 500px) {
    .content_sab >*:not(h3){
        padding: 5px 5px 0;
        line-height: 1.6;
    }
}
.content_sab >img{
    padding: 0;
}
.content_sab .date{
    display: flex;
    flex-wrap: wrap;
    font-weight: bold;
}
.content_sab .date span{
	flex: 1;
	white-space: nowrap;
}
.content_sab .date span.start,
.content_sab .date span.end{flex: none}
.content_sab .date .come{
    font-weight: normal;
	flex: 2;
	white-space: normal;
}
@media only screen and (max-width: 800px) {
    .content_sab .date .come{
        margin: 0 0 10px 10px;
        min-width: 100%;
        flex: auto;
    }
}
.content_sab li{
    list-style: disc;
    margin-left: 20px;
}
.result li{
	list-style: none;
    display: flex;
    padding: 3px 0px ;
    border-bottom: 1px solid rgb(255, 255, 255, .3);
}
	.result li:last-child{border: none}
	.result li .num{
		padding: 2px 10px;
		text-align: center;
		flex: 1;
		position: relative;
		white-space: nowrap;
	}
	.result li .sankaku {
		content: "";
		width: 8px;
		background: no-repeat center center;
		background-size: 100% 100%;
		mask-size: 100% 100%;
		-webkit-mask-image: url(../image/parts/svg/common_btn_r.svg);
		mask-image: url(../image/parts/svg/common_btn_r.svg);
	}
	.result li a{
		color: #ffffff;
		padding: 0 15px;
		flex: 10;
		font-size:var(--common-fontS2_xl);
	}

/*content_sab*/

/*?????????????*/
#voteAttention{
    border: 2px solid #00cccc;
    margin: 20px 20px 20px;
    padding: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: rgb(0,204,204,.5);
    color: #000;
}
	#voteAttention img{
		height: 120px;
		margin-right: 1rem;
	}
/*?????????????*/

/*??????*/
.explanation dl{margin-top: 40px;}
.explanation dt{
	margin:0px 0 0;
	padding:5px;
	background-color:#464646;
	font-weight:bold;
	color:#ffffff;
}
.explanation dd{
    padding: 10px 20px 50px;
}
.explanation dd .img_pc{

}
@media only screen and (max-width: 500px) {
    .explanation dd{
        padding: 10px 10px 50px;
        text-align: center;
    }
}
/*??????*/





/*??????*/
.vote_ul{
	width: 960px;
    border: 2px solid #555;
    margin-bottom: 23px;
    overflow: hidden;
    padding: 8px 10px 13px;
    box-sizing: border-box;
    border-radius:6px;

	background: #eaeaea; /* Old browsers */
	background: -moz-linear-gradient(top,  #eaeaea 0%, #f4f4f4 17%, #d6d6d6 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #eaeaea 0%,#f4f4f4 17%,#d6d6d6 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #eaeaea 0%,#f4f4f4 17%,#d6d6d6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#d6d6d6',GradientType=0 ); /* IE6-9 */
}

	.vote_ul li{
		position: relative;
		display: block;
		float: left;
		width: 230px;

		text-align: center;
		background-position: center center;
		padding: 5px 2px 0px 2px;
	}

		.vote_ul li img{
			height:auto;
			width:100%;
			background-color:#fff;
		}
			.vote_ul li img:hover{
				opacity: 0.80;
			}
		.vote_ul li span{
			display: block;
			text-align:center;
			vertical-align:middle;
			width:inherit;
			height:inherit;
			line-height:16px;
			color:#fff;
			font-size:var(--common-fontS2_s);
			line-height:16px;
			text-decoration:none;
			word-break: keep-all;
		}
		.vote_ul li .card_name{
			display:none;
		}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
		.vote_ul li span:not(:target) {
			word-break: normal;
		}
}
@-moz-document url-prefix() {
	.vote_ul li span:not(:target) {
			word-break: normal;
		}
}
			.vote_ul li:hover a span{
				color:#fff;
			}
		.vote_ul li a,.vote_ul li .a_bg{
			overflow: hidden;
			display: block;
			border:1px solid #000;
		}
		.vote_ul li a:hover,.vote_ul li a:active{

		}

		.vote_ul li div a,.vote_ul li p{
			position: absolute;
			display:inline-block;
			width:150px;
			height:26px;
			overflow:hidden;
			background: #000;
			line-height: 26px;
			border-radius: 100px;
			font-weight: bold;
			text-align:center;
			color: #999;
			bottom: 10px;
			left: 11%;
			text-decoration:none;
		}

		.vote_ul.vote_end li p{
			background: #bbb;
			color:#333;
		}
		.vote_end li p{background-position:0px -75px;}
		.voted li p{background-position:0px -50px;}
/*??????*/
/*????????????*/
.popup{
	display: block;
	max-width:700px;
	height:303px;
	padding:5px;
	box-sizing: border-box;
	background: #eaeaea; /* Old browsers */
	background: -moz-linear-gradient(top,  #eaeaea 0%, #f4f4f4 17%, #d6d6d6 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #eaeaea 0%,#f4f4f4 17%,#d6d6d6 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #eaeaea 0%,#f4f4f4 17%,#d6d6d6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#d6d6d6',GradientType=0 ); /* IE6-9 */
}
	.popup .popup_bg{
		padding:20px 10px 54px;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0.1+100 */
		background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#1a000000',GradientType=0 ); /* IE6-9 */

		border-radius: 3px;
		border: 1px solid #fff;
		border-radius: 4px;
		height: 100%;
		box-sizing: border-box;
	}
	.popup img{
		width: 100%;
		display: block;

	}
	.popup span{
		display: block;
		margin: 10px auto;
		text-align: center;
		font-weight: bold;
		color:#fff;
	}
	.link_set{
		overflow:hidden;
	}
	#cboxClose{
		text-indent: 0;
		background-color: red;
		position: relative;
		top: auto;
		bottom:34px;
		left: 50%;
		right: 50%;
		margin-left: -160px;
		width: 145px;
		padding: 5px;
		line-height: 20px;
		height: auto;
		border-radius: 100px;
		outline: none;

		display:none;
	}
		.link_set #pop_btn_area{
			display: flex;
			align-items: center;
			justify-content: center;
		}
			.link_set #pop_btn_area .pop_btn{
				margin: 0 10px;
				min-width: 85px;
				padding:0 20px;
				line-height: 2.5rem;
				text-align: center;
				border-radius: 100px;
				text-decoration: none;
				vertical-align: bottom;
			}

	#cboxClose,.link_set #pop_btn_area .pop_btn{
		background: #000000;
		background: -moz-linear-gradient(top, #000000 0%, #565656 56%, #444444 100%);
		background: -webkit-linear-gradient(top, #000000 0%,#565656 56%,#444444 100%);
		background: linear-gradient(to bottom, #000000 0%,#565656 56%,#444444 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#444444',GradientType=0 );
		color:#fff;
		font-size:var(--common-fontS2_s);
		border:1px solid #000;
		box-shadow:0px 3px 6px -1px rgba(0,0,0,0.44);

	}
	#cboxClose:hover,.link_set #pop_btn_area .pop_btn:hover{
		background: #000000;
		background: -moz-linear-gradient(top, #000000 0%, #857855 56%, #6f6447 100%);
		background: -webkit-linear-gradient(top, #000000 0%,#857855 56%,#6f6447 100%);
		background: linear-gradient(to bottom, #000000 0%,#857855 56%,#6f6447 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#6f6447',GradientType=0 );
	}
	.popup p{
		text-align:center;
		font-size: var(--common-fontS2_s);
		color:#fff;
	}
/*????????????*/

/*???????*/
#vote_info_area{
	display: inline-block;
    position: absolute;
    z-index: 2;
    width: 100%;
    height:100%;
	box-sizing: border-box;
    text-align: center;
    padding: 100px 0 0px;
    margin: 0px auto 0;
    background-color: rgba(0,0,0,0.7);
}
	#vote_info_area img{
		display: inline-block;
		background:rgba(0,0,0,.8);
		margin:0 auto;
        width: 100%;
        max-width: 960px;
	}
#vote_info_area > div{
    text-align: center;
    display: inline-block;
    background: #000;
	color: #ffffff;
	padding: 1rem;
    border: 1px solid #888;
	max-width: 980px;
    box-sizing: border-box;
}
#vote_info_area > div > div{
	padding: 2rem;
}
#vote_info_area p.end{
	background: #00b4ff;
	font-size: var(--common-fontS2_xl);
	line-height: 3rem;
    margin-bottom: 1rem;
}
#vote_info_area p{
	text-align: center;
}
/*????????*/

/*????---------------------------****/