@charset "UTF-8";

#intro .subTitle {
	color: #E75B8E;
	font-size: 1.07rem;
	text-align: center;
	margin: 0 0 30px;
}

#places .subContents > ul > li:not(:last-child) {
	margin: 0 0 160px;
}
#places .subContents > ul > li h3 {
	position: relative;
}
#places .subContents > ul > li h3 em {
	font-size: 60%;
	font-style: normal;
}
#places .subContents > ul > li h3 span {
	color: #FFF;
	font-size: 50%;
	background: #5392da;
	padding: 3px 1em;
	position: absolute;
	top: .5em;
	right: 0;
}

#places .subContents > ul > li .row {
	margin: 0 0 30px;
	display: flex;
	justify-content: space-between;
}
#places .subContents > ul > li .row .text {
	width: 45%;
}
#places .subContents > ul > li .row .photos {
	width: 50%;
}
#places .subContents > ul > li .row .text h3 {
	margin-top: 0;
}
#places .subContents > ul > li .row .text .address {
	margin: 50px 0 0 0;
}
#places .subContents > ul > li .row .text .address dt {
	font-weight: bold;
	float: left;
}
#places .subContents > ul > li .row .text .address dd {
	border-bottom: solid 1px #EEE;
	margin: 0 0 1em;
	padding: 0 0 1em 5em;
}
#places .subContents > ul > li .row .text .btn {
	margin: 30px 0 0;
}
#places .subContents > ul > li .row .text .btn a {
	color: #E75B8E;
	font-size: 1.075rem;
	text-decoration: none;
	background: #fff;
	border: solid 1px #E75B8E;
	border-radius: 4em;
	margin: 0 auto;
	padding: 10px 36px;
	position: relative;
	display: inline-block;
}
#places .subContents > ul > li .row .text .btn a::after {
	content: " ";
	width: 8px;
	height: 8px;
	border-top: solid 2px #E75B8E;
	border-right: solid 2px #E75B8E;
	position: absolute;
	top: calc(50% - .3em);
	right: 15px;
	transform: rotate(45deg);
}
#places .subContents > ul > li .row .text .btn a .seonly {
	display: none;
}

#places .subContents > ul > li .row .photos > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	column-gap: 2%;
}
#places .subContents > ul > li .row .photos figure:nth-of-type(1) { width: 100%; margin: 0 0 10px; }
#places .subContents > ul > li .row .photos figure:not(:nth-of-type(1)) { width: 32%; }

#places .subContents > ul > li .row .photos figure img {
	width: 100%;
}
#places .subContents > ul > li iframe {
	width: 100%;
	height: 400px;
}


/* FOR smartphone landscape
***************************************************************************/
@media screen and (max-width:899px) {


	#intro .subTitle {
		font-size: 1rem;
		margin: 0 5vw 10vw;
	}

	#places .subContents > ul > li:not(:last-child) {
		margin: 0 0 15vw;
	}
	#places .subContents > ul > li h3 {
	}
	#places .subContents > ul > li h3 em {
	}
	#places .subContents > ul > li h3 span {
		top: .8em;
	}

	#places .subContents > ul > li .row {
		margin: 0 0 5vw;
		display: block;
	}
	#places .subContents > ul > li .row .text {
		width: 100%;
		margin: 0 0 5vw;
	}
	#places .subContents > ul > li .row .photos {
		width: 100%;
	}
	#places .subContents > ul > li .row .text h3 {
	}
	#places .subContents > ul > li .row .text .address {
		margin: 6vw 0 0 0;
	}
	#places .subContents > ul > li .row .text .address dt {
		float: none;
	}
	#places .subContents > ul > li .row .text .address dd {
		padding-left: 0;
	}
	#places .subContents > ul > li .row .text .address dd:last-of-type {
		border-bottom: none;
		padding-bottom: 0;
		margin-bottom: 0;
	}
	#places .subContents > ul > li .row .text .btn {
		margin: 5vw 0 0;
	}
	#places .subContents > ul > li .row .text .btn a {
		width: 100%;
		text-align: center;
		font-size: 0.9rem;
		padding: 10px 15px;
		box-sizing: border-box;
		display: block;
	}
	#places .subContents > ul > li .row .text .btn a::after {
		width: 6px;
		height: 6px;
		top: calc(50% - .3em);
		right: 10px;
	}


	#places .subContents > ul > li .row .photos > div {
	}
	#places .subContents > ul > li .row .photos figure:nth-of-type(1) { margin-bottom: 5px; }
	#places .subContents > ul > li .row .photos figure:not(:nth-of-type(1)) { }

	#places .subContents > ul > li .row .photos figure img {
	}
	#places .subContents > ul > li iframe {
		height: 60vw;
	}

}


@media screen and (max-width:350px) {
	#places .subContents > ul > li .row .text .btn a .seonly {
		display: inline;
	}
}
