@charset "utf-8";


.spot{
	background-color:#f0f0f0;
	margin-bottom:40px;
	padding:20px;
	}

.spot-l{
	float:left;
	width:75%;
	background-color:#fff;
	padding:30px;
	border:2px #666;
	border-radius:12px;
    border:1px solid #d0d0d0;
	}
.spot-l li{
	letter-spacing:1px;
	line-height:1.6em;
	}
.spot-l h1{
	text-align:center;
	font-size:20px;
	color:#900;
	letter-spacing:2px;
	}
.spot-l li img{
	width:99.8%;
	margin:20px 0;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.4), -1px -1px 1px rgba(0,0,0,0.1);
	border-radius:5px;
	}

.spot-r{
	float:right;
	width:23%;
	background-color:#fff;
	padding:20px;
	border-radius:12px;
	border:1px solid #d0d0d0;
	}
.spot-r h3{
	font-size:16px;
	text-align:center;
	}
.spot-r h3 a{
	color:#696969;
	}
.spot-r h3 a:hover{
	color:#930;
	text-decoration:none;
	}
.spot-r li a{
	display:block;
	width:100%;
	line-height:3em;
	border:1px solid #930;
	border-radius:5px;
	margin-bottom:20px;
	padding-left:14px;
	color:#696969;
	}
.spot-r li a:hover{
	color:#fff;
	background-color:#930;
	font-weight:bold;
	text-decoration:none;
	}
.spot-r li i{
	padding-right:10px;
	}
.spot-r li span{font-size:0.9em;}


@media (max-width:1050px) {
    .spot-r li span{display:inline-block; }

}
@media (max-width:860px){
	.spot-l{
		width:100%;
		}
	
	.spot-r{
		width:100%;
		margin-top:20px;
		}

}

@media (max-width: 767px) {
    .spot-l{
		width:100%;
		}
	
	.spot-r{
		width:100%;
		margin-top:20px;
		}

}