@charset "utf-8";
/* ===================================================
	sightseeing CSS
====================================================== */

h2 { margin: 180px auto 80px; text-align: center; font-size: 40px; font-style: italic; color: rgba(65, 65, 65, .6);}
p.walk { display: table; margin: 10px auto 20px; font-size: 14px; color: #a8848f; padding: 0 0 0 25px; background: url(../../sightseeing/img/icon_walk.svg)no-repeat left center; background-size: 15px;}
p.car { display: table; margin: 10px auto 20px; font-size: 14px; color: #a8848f; padding: 0 0 0 30px; background: url(../../sightseeing/img/icon_car.svg)no-repeat left center; background-size: 20px;}

@media screen and (max-width: 600px) {
	h2 { margin: 100px auto 50px; font-size: 26px;}
}

/* ---------------------------------------------------
spot1
------------------------------------------------------ */
.spot1 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 90px;}
.spot1 .photo_col { position: relative; width: 66%;}
.spot1 .photo_col img { width: 100%;}
.spot1 .photo_col p { position: absolute; top: -33px; left: -33px; width: 100px; height: 100px; padding: 20px; box-sizing: border-box; background-color: #000; color: #fff; font-size: 16px; border-radius: 50px; font-style: italic; text-align: center; line-height: 1.2;}
.spot1 .photo_col p span { font-size: 30px;}
.spot1 .spot_txt { width: 28%;}
.spot1 .spot_txt .s_lead { font-size: 14px; text-align: center; opacity: .6;}
.spot1 .spot_txt h3 { text-align: center; font-size: 26px; opacity: .6; border-bottom: 1px solid #e2e2e2;}
.spot1 .spot_txt h3 span { display: block; font-size: 18px;}
.spot1 .spot_txt p { font-size: 16px;}
.spot1 ul { display: flex; justify-content: space-between; margin-top: 30px;}
.spot1 li { width: 49%;}
.spot1 li a { display: block; width: 100%; padding: 13px 0; background: #f4f4f4;}
.spot1 li a span { display: table; margin: 0 auto; font-size: 13px;}
.spot1 li a.link_map span { padding: 0 0 0 16px; background: url(../../sightseeing/img/icon_map.svg) no-repeat left center; background-size: 10px;}
.spot1 li a.link_web span { padding: 0 0 0 20px; background: url(../../sightseeing/img/icon_web.svg) no-repeat left center; background-size: 12px;}

@media screen and (hover: hover) and (min-width: 601px) {


}

@media screen and (max-width: 600px) {
	.spot1 { display: block; margin-bottom: 50px;}
	.spot1 .photo_col,
	.spot1 .spot_txt { width: 100%;}
	.spot1 .photo_col p { width: 65px; height: 65px; padding: 10px; font-size: 14px; left: -5%; top: -5%;}
	.spot1 .photo_col p span { font-size: 20px;}
	.spot1 .spot_txt .s_lead { margin: 10px 0 0;}
	.spot1 .spot_txt h3 { font-size: 22px;}
	.spot1 .spot_txt h3 span { font-size: 16px;}
}


/* ---------------------------------------------------
spot2
------------------------------------------------------ */
.spot_wrap.flex_col { flex-wrap: wrap; justify-content: left;}
.spot2 { width: 30%; margin-bottom: 200px; margin-right: 5%;}
.spot2 img { width: 100%;}
.spot2:nth-of-type(3n) { margin-right: 0;}
.spot2 .spot_txt h3 { margin: 30px 0 0; padding: 0 0 10px; text-align: center; font-size: 22px; opacity: .6; border-bottom: 1px solid #e2e2e2;}
.spot2 .spot_txt p { font-size: 16px;}
.spot2 ul { display: flex; justify-content: space-between; margin-top: 30px;}
.spot2 li { width: 49%;}
.spot2 li a { display: block; width: 100%; padding: 13px 0; background: #f4f4f4;}
.spot2 li a span { display: table; margin: 0 auto; font-size: 13px;}
.spot2 li a.link_map span { padding: 0 0 0 16px; background: url(../../sightseeing/img/icon_map.svg) no-repeat left center; background-size: 10px;}
.spot2 li a.link_web span { padding: 0 0 0 20px; background: url(../../sightseeing/img/icon_web.svg) no-repeat left center; background-size: 12px;}

@media screen and (max-width: 600px) {
	.spot2 { width: 100%; margin-bottom: 50px; margin-right: 0;}
	.spot2 .spot_txt h3 { margin: 20px 0 0; padding: 0;}
}

/* ---------------------------------------------------
sec2
------------------------------------------------------ */
#sec2 { margin: 0 0 120px; position: relative; background: url(../../sightseeing/img/sec2_bg2.png)no-repeat right -50px bottom 40px,url(../../sightseeing/img/sec2_bg2.gif);}
#sec2 .inner_md { position: relative; z-index: 2;}
#sec2::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	background: radial-gradient(ellipse at 18% 18%,
			rgba(235, 210, 214, 0.32) 0%,
			rgba(235, 210, 214, 0.22) 22%,
			rgba(235, 210, 214, 0.12) 42%,
			rgba(235, 210, 214, 0.05) 58%,
			rgba(235, 210, 214, 0) 76%);
}
#sec2 h2 { margin:  0 auto; padding: 190px 0 80px;}
#sec2 ul { display: flex; justify-content: left; flex-wrap: wrap;}
#sec2 ul li { width: 48%; margin-bottom: 100px;}
#sec2 ul li:nth-of-type(2n) { margin-left: 4%;}
#sec2 ul li span { position: relative;}
#sec2 ul li span::after { position: absolute; left: 20px; bottom: 13px; content: ""; display: block; width: 32px; height: 32px; background: url(../../sightseeing/img/icon_zoom.svg)no-repeat;}
#sec2 ul li p { margin: 20px 0 0; font-size: 28px; text-align: center; opacity: .6;}

@media screen and (max-width: 600px) {
	#sec2 { padding: 0 0 80px;}
	#sec2 h2 { padding: 80px 0 20px;}
	#sec2 ul { display: block;}
	#sec2 ul li { width: 100%; margin-bottom: 30px;}
	#sec2 ul li p { margin: 10px 0 0; font-size: 16px;}
	#sec2 ul li:nth-of-type(2n) { margin-left: 0;}
}

/* ---------------------------------------------------
	content-modal
------------------------------------------------------ */

.content-modal {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	inset: 0;

	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;

	z-index: 99999;
	pointer-events: none;
}


.content-modal.visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	background-color: rgba(0, 0, 0, 0.5);
}


.content-modal .modal-content {
	position: relative;
	width: 100%;
	margin: 0 auto;
	background: #fff;
}

.content-modal .close-content-modal {
	position: absolute;
	z-index: 1;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	top: 20px;
	right: 20px;
	background: rgba(0, 0, 0, 0.05);
	border: none;
	cursor: pointer;
}

.content-modal .close-content-modal::before,
.content-modal .close-content-modal::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 1px;
	background: #666;
	transform-origin: center;
}

.content-modal .close-content-modal::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.content-modal .close-content-modal:after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

@media screen and (min-width: 601px) {

	.content-modal .modal-content {
		width: min(90%, 1200px);
		padding: 50px 90px;
		outline-offset: -10px;
		box-shadow: 0 4px 8px -3px rgba(0, 0, 0, 0.5);
	}
}

@media screen and (max-width: 600px) {

	.content-modal .modal-content {
		width: 90%;
		padding: 40px 20px 60px;
	}

	.content-modal .close-content-modal {
		top: 6px;
		right: 3%;
		width: 30px;
		height: 30px;
	}
}