@charset "UTF-8";
/* CSS Document */
body {
  background-color: #111;
}
.hero_image_spot {
	background-image:url("../images/06_spot/top.jpg");
  width: 100%;
	height: calc(100vh - 50px);
  background-size: cover;
	background-position:center;
}
.hero_image_spot_filter{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	background-color: rgba(0,0,0,0.30);
	 height: calc(100vh - 50px);
	  width: 100%;
	
}
.menu_desc{
	text-align: left;
	margin-bottom: 50px;
	max-width: 300px;
}
.hero_image_spot h2{
font-family: futura-pt,sans-serif;
font-weight: 100;
font-style: normal;
	font-size: 6.0rem;
	letter-spacing: 1.3em;
	padding-left: 1.3em;
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

@media(max-width:599px){
	.hero_image_spot h2 {
font-family: futura-pt,sans-serif;
font-weight: 100;
font-style: normal;
    font-size: 3rem;
    letter-spacing: 1.3em;
    padding-left: 1.3em;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
	.hero_image_spot {
	
  width: 100%;
	height: calc(100vh - 50px);
  background-size: cover;
	background-position:center;
}
	.row {
    display: block!important;
}
.col-md-3 {
    max-width: 100%!important;
	width:100%!important;
}
	.spot {
    width: 100%!important;
    max-width: 100%!important;
    margin-bottom: 50px!important;
}
	.spot_title {
	color:#FFF;
	text-decoration: none;
	text-align: left;
	margin-top: 10px;
		padding-left: 20px!important;
}
}
@media(min-width:600px) and (max-width:1024px){
	.hero_image_spot h2{
		font-size: 5rem;
	}
	.hero_image_spot {
  width: 100%;
	height: calc(100vh - 50px);
  background-size: cover;
	background-position:center;
}
	.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between!important;
    flex-direction: row;
    gap: 4%;
}
	.col-md-3 {
    flex: 0 0 40%!important;
    max-width: 50%!important;
}
	
}


.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-direction: row;
    gap: 4%;
}
.col-md-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%;
}
.spot {
    width: 100%;
    max-width: 300px;
    margin-bottom: 20px;
}
.spot .spot_pic img {
    width: 300px;
    height: 200px;
	object-fit: cover;
}
.spot_title {
	color:#FFF;
	text-decoration: none;
	text-align: left;
	margin-top: 10px;
}
.spot a{
	text-decoration: none;
	
}
.spot a:hover{
	background:#222;
}



.container{
	margin-top: 100px;
}