@charset "UTF-8";

/* ************************************************ */
/* 共通 */
/* ************************************************ */
.vote-item {
	--fm-cl-bd:#ccc;
	margin:2em auto;
}
.vote-item .ttl {
	font-size:1.3em;
	font-weight:bold;
	color:#333;
}
.vote-item .desc {
	color:#666;
	font-size:.95em;
}
.vote-item .date {
	font-size:.9em;
	margin-top:2em;
	display:flex;
	flex-flow:row wrap;
	justify-content: space-between;
	align-items:center;	
	letter-spacing:-.03em;
}
.vote-item .expire {
	flex:1 1 auto;
	overflow:hidden;
	overflow-x:auto;
	white-space:nowrap;
	color:#666;
	margin-right:1em;
}
.vote-item .expire span {
}
.vote-item .user {
	flex:0 1 auto;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	margin-left:auto;
}
.vote-item .user a::before { content:"\00A9"; }
.vote-item .relate-link {
	display:block;
	margin:1em 0 2em;
	font-size:.85em;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	font-family:system-ui;
}
.vote-item .relate-link .link {
	display:flex;
	flex-flow:column wrap;
	line-height:1.5;
	padding:.7em .5em;
	border:1px solid var(--fm-cl-bd);
	border-radius:.2em;
	color:#666;
	font-style:italic;
}
.vote-item .relate-link .link > * {
	max-width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
}
.vote-item .relate-link .link-title {
	font-weight:bold;
}
.vote-item .relate-link .link-url {
	flex:1 0 auto;
}
.vote-item .buttons {
	margin:2em 0;
}



/* ************************************************ */
/* result */
/* ************************************************ */
.vote-item.result > * {
	padding:1em 0;
	margin:1em 0;
}
.vote-item.result > *:first-child {
	padding-top:0;
	margin-top:0;
}
.vote-item.result > * + * {
	border-top:1px solid #ddd;
}
.vote-item.result .choice {
	font-size:.95em;
}
.vote-item.result .choice > li {
	position:relative;
	display:flex;
	flex-flow:row nowrap;
	align-items:center;
	justify-content: space-between;
	margin-bottom:.3em;
}
.vote-item.result .choice .q {
	position:relative;
	flex:1 1 auto;
	max-width:100%;
	line-height:1;
	overflow:hidden;
	color:#666;
}
.vote-item.result .choice .q .line {
	position:absolute;
	display:block;
	height:100%;
	width:100%;
	opacity:0.5;
	background-color:#bdd9b1;
	border-radius:.2em;
}
.vote-item.result .choice .q .body {
	position:relative;
	display:block;
	padding:.9em .5em;
	color:#333;
}
.vote-item.result .choice .q.max .body {
	font-weight:bold;
}
.vote-item.result .choice .q.second .body {
}
.vote-item.result .choice .throwed .q .body::after {
	content:" ";
	display:inline-block;
	vertical-align:middle;
	width:1.8em;
	height:0;
	margin:-.6em 0;
	padding:.6em 0;
	background:no-repeat center/2em;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGg0OHY0OEgweiIvPjxjaXJjbGUgY3g9IjI0IiBjeT0iMjQiIHI9IjEyIiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIgZD0ibTIwLjc1IDI0LjM0IDIuNiAyLjYgNC44Ny00Ljg3Ii8+PC9zdmc+);
}
.vote-item.result .choice .count {
	flex:0 0 auto;
	text-align:right;
	font-size:.95em;
	margin-left:1.5em;
	white-space:nowrap;
}
.vote-item.result .choice .count .num::after { content:"件"; }
.vote-item.result .choice .count .per {
	display:inline-block;
	letter-spacing:-.03em;
	margin-left:.1em;
	text-align:left;
	width:4em;
}
.vote-item.result .choice .count .per::before { content:"("; }
.vote-item.result .choice .count .per::after  { content:"%)"; }
.vote-item.result .comment {
	margin:1em 0;
	padding:1em 0;
}
.vote-item.result .comment .header {
	display:flex;
	flex-flow:row nowrap;
	align-items:center;
}
.vote-item.result .comment .count {
	margin-right:.5em;
}
.vote-item.result .comment .count::after { content:"件のコメント"; }

/* msg */
.vote-msg {
	display:flex;
	flex-flow:column wrap;
}
.vote-msg .item {
	display:flex;
	flex-flow:row nowrap;
	align-items:stretch;
	position:relative;
	padding:1.5em 0;
	color:#333;
	max-width:100%;
}
.vote-msg .item .item-body {
	flex:1 1 auto;
	overflow:hidden;
}
.vote-msg .item .q {
	line-height:1.2;
}
.vote-msg .item .q li {
	display:inline-block;
	font-size:.9em;
	font-weight:bold;
}
.vote-msg .item .q li:not(:last-child)::after { content:","; margin-right:.2em; }
.vote-msg .item .q li:first-child {
	font-size:1em;
}
.vote-msg .item .msg {
	margin:.5em 0 .3em;
	line-height:1.4;
	font-size:.95em;
	overflow:auto hidden;
}
.vote-msg .item .footer {
	display:flex;
	flex-flow:row wrap;
	align-items:center;
	font-size:.9em;
	letter-spacing:-.03em;
	margin-top:.6em;
}
.vote-msg .item .footer > *:not(:last-child) {
	margin-right:.75em;
}
.vote-msg .item .time,
.vote-msg .item .personal,
.vote-msg .item .id
{
	opacity:.75;
	letter-spacing:-.05em;
}
.vote-msg .item .time {
	display:inline-block;
}
.vote-msg .item .personal ul {
	display:flex;
	flex-flow:row nowrap;
}
.vote-msg .item .personal ul::before { content:"("; }
.vote-msg .item .personal ul::after { content:")"; }
.vote-msg .item .personal ul li:not(:last-child)::after { content:","; }
.vote-msg .item .review {
	flex:1 0 100%;
	margin-top:.1em;
}
.vote-msg .item .review ul {
	position:relative;
	display:inline-flex;
	flex-flow:row wrap;
	align-items:center;
}
.vote-msg .item .review li * {
	color:#5aa13b;
}
.vote-msg .item .review li:not(.now) * {
	filter:grayscale(90%);
}
.vote-msg .item .review ul > li {
	flex:0 0 auto;
	display:flex;
	flex-flow:row nowrap;
	align-items:center;
	cursor:pointer;
	padding:.2em .3em;
	border-radius:.2em;
	line-height:1;
}
.vote-msg .item .review ul > li .up {
	display:flex;
	flex-flow:column wrap;
	align-items:flex-start;
	margin:.3em 0 0 .25em;
}
.vote-msg .item .review ul > li:hover {
	background:#f3f3f3;
}
.vote-msg .item .review ul > li > * {
	flex:0 0 auto;
}
.vote-msg .item .review ul > li .mark {
	flex:0 0 auto;
	display:block;
	font-size:1.5em;
	color:transparent;
	width:1.2em;
	height:1.2em;
	background:no-repeat center center transparent;
	background-size:1.1em;
}
.vote-msg .item .review ul > li.review-1 .mark {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGRlZnM+PHN0eWxlPi5jbHMtM3tmaWxsOm5vbmU7c3Ryb2tlOiM1YWExM2I7c3Ryb2tlLXdpZHRoOjRweDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmR9PC9zdHlsZT48L2RlZnM+PGcgaWQ9IuODrOOCpOODpOODvF8yIiBkYXRhLW5hbWU9IuODrOOCpOODpOODvCAyIj48ZyBpZD0iUmVjdGFuZ2xlIj48cGF0aCBpZD0icmVjdCIgc3R5bGU9ImZpbGw6bm9uZSIgZD0iTTAgMGg0OHY0OEgweiIvPjwvZz48ZyBpZD0iaWNvbl9kYXRhIj48Y2lyY2xlIGN4PSIyNCIgY3k9IjI0IiByPSIyMiIgc3R5bGU9InN0cm9rZS1taXRlcmxpbWl0OjEwO3N0cm9rZTojNWFhMTNiO3N0cm9rZS13aWR0aDo0cHg7ZmlsbDpub25lIi8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMzMuOCAzMGExMCAxMCAwIDAgMS0xOS42IDBoMTkuM00xMyAxNGw1IDQtNSA0TTM1IDE0bC01IDQgNSA0Ii8+PC9nPjwvZz48L3N2Zz4=);
}
.vote-msg .item .review ul > li.review-2 .mark {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJsYXlfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgNDggNDgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ4IDQ4IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGU+LnN0MntmaWxsOiM1YWExM2J9PC9zdHlsZT48ZyBpZD0iUmVjdGFuZ2xlIj48cGF0aCBpZD0icmVjdCIgc3R5bGU9ImZpbGw6bm9uZSIgZD0iTTAgMGg0OHY0OEgweiIvPjwvZz48ZyBpZD0iaWNvbl9kYXRhIj48Y2lyY2xlIGN4PSIyNCIgY3k9IjI0IiByPSIyMiIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzVhYTEzYjtzdHJva2Utd2lkdGg6NDtzdHJva2UtbWl0ZXJsaW1pdDoxMCIvPjxjaXJjbGUgY2xhc3M9InN0MiIgY3g9IjE1IiBjeT0iMTgiIHI9IjMiLz48Y2lyY2xlIGNsYXNzPSJzdDIiIGN4PSIzMyIgY3k9IjE4IiByPSIzIi8+PHBhdGggZD0iTTMzLjggMjhjLTEuMSA1LjQtNi40IDguOS0xMS44IDcuOC0zLjktLjgtNy0zLjktNy44LTcuOCIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzVhYTEzYjtzdHJva2Utd2lkdGg6NDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMCIvPjwvZz48L3N2Zz4=);
}
.vote-msg .item .review ul > li.review-3 .mark {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSLjg6zjgqTjg6Tjg7xfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgNDggNDgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ4IDQ4IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGU+LnN0MntmaWxsOiM1YWExM2J9PC9zdHlsZT48ZyBpZD0i44Os44Kk44Ok44O8XzJfMDAwMDAwMTI0NjAxODQ1MDUxMzY4NzkzNjAwMDAwMTE0ODk1ODc5MjM2NzMxOTU5MTZfIj48ZyBpZD0iUmVjdGFuZ2xlIj48cGF0aCBpZD0icmVjdCIgc3R5bGU9ImZpbGw6bm9uZSIgZD0iTTAgMGg0OHY0OEgweiIvPjwvZz48ZyBpZD0iaWNvbl9kYXRhIj48Y2lyY2xlIGN4PSIyNCIgY3k9IjI0IiByPSIyMiIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzVhYTEzYjtzdHJva2Utd2lkdGg6NDtzdHJva2UtbWl0ZXJsaW1pdDoxMCIvPjxjaXJjbGUgY2xhc3M9InN0MiIgY3g9IjE1IiBjeT0iMTgiIHI9IjMiLz48Y2lyY2xlIGNsYXNzPSJzdDIiIGN4PSIzMyIgY3k9IjE4IiByPSIzIi8+PHBhdGggZD0iTTMzLjggMzZjLTEuMS01LjQtNi40LTguOS0xMS44LTcuOC0zLjkuOC03IDMuOS03LjggNy44IiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojNWFhMTNiO3N0cm9rZS13aWR0aDo0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwIi8+PC9nPjwvZz48L3N2Zz4=);
}
.vote-msg .item .review ul > li.now .mark {
	filter:grayscale(0%);
	animation:blink-review .35s linear 0s 1;
}
.vote-msg .item .review ul > li.now {
	opacity:1;
}
.vote-msg .item .review ul > li.any {
}
.vote-msg .item .review ul > li .cnt {
	flex:1 0 auto;
	text-align:right;
}
.vote-msg .item .review ul > li .desc {
	display:block;
	text-align:center;
	font-size:.7em;
	white-space:nowrap;
}
@keyframes blink-review {
	0% {
		transform:scale(1);
	}
	60% {
		transform:scale(1.4);
	}
	85% {
		transform:scale(.8);
	}
	100% {
		transform:scale(1);
	}
}
.vote-msg .item .review ul > li.blink-bak {
	animation:blink-review .4s linear 1;
}
.vote-msg .item .review ul > li:not(:last-child) {
	margin-right:.25em;
}
.vote-msg .item .id { opacity:.7; }
.vote-msg .item .id::before { content:"[ID:"; }
.vote-msg .item .id::after { content:"]"; }
.vote-msg .btn {
	display:none;
	order:98;
	flex:0 0 auto;
	width:20em;
	max-width:100%;
	border:1px solid #ccc;
	border-radius:.2em;
	text-align:center;
	padding:.8em;
	cursor:pointer;
	margin:1em auto;
}
.vote-msg .item .delete {
	flex:0 0 auto;
	display:none;
	width:2.4em;
	opacity:.5;
	background:no-repeat right center/1.1em;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGRlZnM+PHN0eWxlPi5jbHMtMntmaWxsOm5vbmU7c3Ryb2tlOiMzMzM7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS13aWR0aDo0cHh9PC9zdHlsZT48L2RlZnM+PGcgaWQ9IuODrOOCpOODpOODvF8yIiBkYXRhLW5hbWU9IuODrOOCpOODpOODvCAyIj48ZyBpZD0iUmVjdGFuZ2xlIj48cGF0aCBpZD0icmVjdCIgc3R5bGU9ImZpbGw6bm9uZSIgZD0iTTAgMGg0OHY0OEgweiIvPjwvZz48ZyBpZD0iaWNvbl9kYXRhIj48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik03IDEyaDM1TTMzLjUgMTJoLTE4bDMtOGgxMmwzIDh6TTM5IDE4djI3SDEwVjE4TTIwIDE4djE4TTI5IDE4djE4Ii8+PC9nPjwvZz48L3N2Zz4=);
}
.vote-item.owner .vote-msg .item .delete {
	display:block;
}
.vote-msg .item .delete:hover {
	opacity:1;
}
.vote-msg .next:hover {
	text-decoration:underline;
}
.vote-msg .next::before     { content:"もっとみる…"; }
.vote-msg .loader {
	opacity:.7;
	order:99;
}
.vote-msg .loader::before {
	content:"読み込み中…";
	animation: blinking .5s ease-in-out infinite alternate;
}
@keyframes blinking {
	0%   { opacity:0; }
	100% { opacity:.7; }
}


.vote-item.expire {
	margin-top:.5em;
	color:#666;
	padding:.5em 1em;
}


/* paste */
.vote-item .paste {
	margin:1em 0;
	padding:1em 0;
}
.vote-item.vote-form .paste {
	margin-bottom:0;
	padding-bottom:0;
	border-top:1px solid #ccc;
}
.vote-item .paste a {
	display:inline-block;
	vertical-align:middle;
	color:#333;
	cursor:pointer;
	line-height:2;
	white-space:nowrap;
}
.vote-item .paste > a:not(:last-child) {
	margin-right:1em;
}
.vote-item .paste a svg {
	display:inline-block;
	width:1.4em;
	height:1.4em;
	vertical-align:middle;
}



/* ************************************************ */
/* recommend */
/* ************************************************ */
section.recommend {
	padding-left:0;
	padding-right:0;
}
section.recommend h3 {
	color:#333;
	margin-bottom:.5em;
}
.recommend .list {
	gap:1.5em;
}
.recommend .vote-list .item {
	min-height:unset;
}
.recommend .vote-list .item .item-link {
	padding:1.5em 1em 1em;
}
.recommend .vote-list .item nav {
	font-weight:normal;
	letter-spacing:-.03em;
	margin-top:0;
	line-height:1.1;
	top:.4em;
	margin-left:.4em;
}
.recommend .vote-list .item nav .bread {
	font-size:.8em;
}
.recommend .vote-list .item nav .bread > li:not(:last-child) {
	display:none;
}
.recommend .vote-list .item nav a {
	pointer-events:none;
}
.recommend .vote-list .item .desc,
.recommend .vote-list .item .time,
.recommend .vote-list .item .count
{
	display:none;
}



/* ************************************************ */
/* footer link */
/* ************************************************ */
.pager-item {
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-between;
	line-height:1.4;
}
.pager-item > a {
	position:relative;
	flex:0 1 auto;
	width:48%;
	display:flex;
	flex-flow:row nowrap;
	align-items:center;
	color:#333;
	font-weight:bold;
}
.pager-item > a.none {
	pointer-events:none;
}
.pager-item > a.none * {
	display:none;
}
.pager-item a .vote {
	flex:1 1 auto;
	display:flex;
	flex-flow:column wrap;
	align-self:flex-start;
}
.pager-item a.next .vote {
	text-align:right;
}
.pager-item a .vote .nav {
	font-size:.9em;
	color:#666;
	font-weight:normal;
	margin:0 .2em .2em;
}
.pager-item a .vote .title {
	font-size:1.05em;
}
.pager-item a .arrow {
	flex:0 0 auto;
	position:relative;
	display:block;
	width:1.5em;
	height:1.5em;
}
.pager-item a:not(.none) .arrow::before {
	content:"";
	position:absolute;
	display:block;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:55%;
	height:55%;
	margin:auto;
	border:1px solid #888;
	border-width:3px 3px 0 0;
	border-radius:0 .2em 0 0;
	transform:rotate(45deg);
}
.pager-item a.prev .arrow::before {
	transform:rotate(-135deg);
}



/* ************************************************ */
/* スマホ対応 */
/* ************************************************ */
@media screen and (min-width: 1200px) {

}

/* この大きさからPC表示 */
@media screen and (min-width: 960px) {
	
}

/* スマホ(横) */
@media screen and (max-width: 959px) {

	.recommend .vote-list {
		font-size:.85em;
	}
	.recommend .vote-list .item {
		font-weight:normal;
	}
	.recommend .vote-list .item nav {
		margin-left:0;
	}
	.recommend .vote-list .item nav .bread {
		margin-left:.4em;
	}
	.recommend .vote-list .item .item-link {
		padding:1.5em .5em 1em;
	}

}

/* スマホ(縦) */
@media screen and (max-width: 600px) {

	.vote-item.result .choice .q .body {
		//padding:.5em .25em 1.3em;
	}

	.vote-item.result .choice .count {
		position:absolute;
		margin-left:.7em;
		min-width:unset;
		font-size:.9em;
		right:.1em;
	}

	.vote-item .expire {
		max-width:100%;
		overflow-x:auto;
	}

	.vote-item.expire {
		padding:.5em;
	}

	.pager-item {
		font-size:.9em;
	}

}