@charset "UTF-8";

#sightseeing {}
#sightseeing ul {}
#sightseeing ul li {
  margin: 0 5px;
  position: relative;
}
#sightseeing ul li picture {
  width: 100%;
  overflow: hidden;
  position: relative;
}
#sightseeing ul li picture::before {
  content: '';
  display: block;
  padding-top: 100%;
}
#sightseeing ul li picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
	object-fit: cover;
}
#sightseeing ul li .info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px 12px;
  background-color: rgba(0,0,0,.5);
  font-size: 19px;
}
#sightseeing ul li .info .info_inn {
  color: #fff;
  position: relative;
  text-align: left;
  padding-bottom: 20px;
  min-height: 5rem;
}
#sightseeing ul li .info .info_inn a.btn_more {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 15px;
}






	.sightseeing_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 70px 0 0;
		}
		.sightseeing_list article {
			position: relative;
			width: calc(50% - 10px);
			margin-bottom: 20px;
			padding: 0;
			}
			.sightseeing_list article img {
				width: 100%;
				object-fit: cover;
				aspect-ratio: 16 / 9 !important;
				}
			.sightseeing_list article .information_area {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: center;
				position: absolute;
				top: 0;
				right: 0;
				width: 47%;
				height: 100%;
				background-color: rgba(0, 0, 0, .5);
				padding: 25px;
				color: #fff;
				}
				.sightseeing_list article .information_area h3 {
					margin: 0 0 10px;
					font-size: 21px;
					font-weight: 500;
					color: #fff;
					}
				.sightseeing_list article .information_area p {
					margin: 0 !important;
					line-height: 1.2;
					}


@media screen and (max-width: 1024px) {
		.sightseeing_list article {
			width: 100%;
			}
}
@media screen and (max-width: 600px) {
	.sightseeing_list article .information_area {
		display: block;
		position: relative;
		top: auto;
		width: 100%;
		height: auto;
		}
}
@media screen and (max-width: 450px) {
	.sightseeing_list article {
		width: 100%;
		}
}

#icon_map {
	width: 100%;
	height: auto;
}

#sightseeingtitle a:hover {
	text-decoration: underline;
}
#sightseeingtitle iframe {
	width: 100%;
}
@media screen and (max-width: 450px) {
	#sightseeingtitle iframe {
		height: 60vh;
	}
}