.Button {background:#fff;border:2px solid #4a90e2;color:#4a90e2;padding:10px 24px;border-radius:25px;margin-left: auto;
					font-weight:600;cursor:pointer;transition:all 0.3s ease;font-size:0.9rem;letter-spacing:0.5px;float:inline-end;}
	.Button:hover {background:#4a90e2;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(74, 144, 226, 0.2);}
	.Button:active {transform:translateY(0);}
	a[target="_blank"].Button:after{display:none;}

#ranking{
	.checkbox{background:url(/order/DataFile/images/checkbox.png) no-repeat;clear:left;height:18px;width:20px;display:inline-block;position:relative;top:2px;}
	.grid-auto-fit{align-items:start;}
	ul {display:grid;grid-template-columns:repeat(auto-fill, minmax(8em, 1fr));gap:10px;}
	li{margin:1px;padding:2px;font-size:14px;}
	label{display:block;}
	.title {background-color:#000;color:#fff;  grid-row:1;grid-column:1 / -1;}
	#result {
		bottom:-100%;flex-wrap:wrap;gap:7px;justify-content:flex-start;background:#fff;z-index:10;left:0;right:0;padding:2vw;transition: .6s;z-index: 2;
		align-items:center;margin:-1em;border-radius:6px;box-shadow:0 0 36px rgb(0 0 0 / 70%);position:sticky;max-height:48vh;overflow-y:auto;
		div.pick{font-size:11px; flex:0 0 calc(10% - 10px);min-width:105px;align-self:start;display:grid;grid-template-rows:1fr 114px auto;transition:all 0.3s ease;;cursor:pointer;}
		div.pick:hover{transform:scale(1.1);}
		b{width:100%;text-align:center;color:red;line-height:3;}
		img{width:auto;height:87px;border:0;padding:0;box-shadow:none;}
		.img-wrap	{border-radius:6px;border:1px solid #d4af37;padding:10px;box-shadow:0 0 15px rgba(0, 0, 0, 0.2);}
	}
}

.ranking_wrap{
	position:fixed;background:#f0f8ff8f;z-index:auto;top:0;right:0;left:-200%;bottom:4px;
	display:flex;align-items:center;justify-content:center;z-index:3;z-index:10;transition:.5s;width: 100%;
	h5{font-weight:800;font-size:110%;background:#333;color:aliceblue;padding:1em 4em 1em 1em;
		margin:-14px -15px 2em;box-shadow:0 14px 21px  -8px rgb(0 0 0 / 56%);border-radius:4px;}
	#ajaxclose{background-image:url("/order/DataFile/images/icon/close.png");background-position:0 0;height:50px;width:50px;z-index:100;
				background-size:contain;cursor:pointer;opacity:.7;position:absolute;right:10px;top:10px;transition:opacity 0.6s;
				border: 1px solid #fff;background-color: #FFF;border-radius: 50%;}
	#ajaxclose:hover{opacity:1;}				
	.ranking_outer{max-height:80vh;max-width:815px;width:95%;height:100%;background-color:#F4F5F5;;-webkit-box-shadow:6px 8px 16px rgb(75, 42, 10);
		box-shadow:6px 8px 16px rgb(75, 42, 10);padding:2vw;position:relative;overflow:hidden;}
	.ranking_inner{display:block;;padding:1em;overflow-x:auto;height:calc(100% - 4em);margin-top:-2em;
		div{background-color:#fff;padding:.5em;border-bottom:1px solid #ccc;margin-bottom:4px;}
		.memo{background-color:#fff;padding:1.5em; overflow:hidden; }
		.text {overflow:hidden; }
		.image {float:right;width:200px;margin:1em 0 2em 2em;}
		.target{margin: 1em;display: inline-block;float:none;}
	}

}

@media (max-width:768px) {
#ranking{
	#result {padding:5px;
		div.pick{font-size:9px;}
		}
	}
.ranking_wrap {
    .ranking_outer {max-height:92vh;}
	.ranking_inner{height:calc(100% - 5em);
		.memo {display:flex;padding:.5em;flex-wrap:wrap;gap:1em;
		.image {float:none;width:100%;margin:1em auto;}
			}
	}
}