.area-select {
	color: #fff;
	padding: 16px 40px;
	text-decoration: none;
	border-radius: 30px;
	transition: background-color 0.3s ease;
	font-size:18px;
	font-weight:bold;
	display:inline-block;
	border:1px solid #003C87;
	background:#FFFFFF;
	color:#003C87;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	
	/* プルダウン矢印生成 */
	background-image:
		linear-gradient(45deg, transparent 50%, #0b4ea2 50%),
		linear-gradient(135deg, #0b4ea2 50%, transparent 50%);
	
	background-position:
		calc(100% - 22px) 50%,
		calc(100% - 16px) 50%;
		
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

/*スマホ時のコンテンツCSS */
/*------------------------------------------------------*/
@media only screen and ( max-width : 768px ) {
	.area-select{
		width:100%;
	}
}


/* PC時のコンテンツCSS */
/*------------------------------------------------------*/
@media print, screen and ( min-width : 769px ) {
	.area-select{
		width:300px;
	}
}