/* CSS Document */

#favorite{
	padding-top: 0;
	}

#share{
	display: flex;
	justify-content: center;
	}
	#share a{
		position: relative;
		display: block;
		width: 100%;
		max-width: 480px;
		padding: 1.2em;
		padding-left: 3em;
		background: #fff;
		border: 1px solid #b3b3b3;
		color: inherit;
		fill: currentColor;
		text-align: center;
		line-height: 1.5em;
		transition: all 0.2s ease-out;
		text-decoration: none;
		cursor: pointer;
		order: 1;
		}
	#share i{
		position: absolute;
		top: calc(50% - 0.5em);
		left: 1.2em;
		}

#modalLink{}
	#modalLink dl{
		display: flex;
		flex-wrap: wrap;
		}
	#modalLink dt{
		position: relative;
		width: 100%;
		padding-left: calc(4px + 0.5em);
		font-weight: bold;
		font-size: 1.25em;
		line-height: 1.5em;
		}
		#modalLink dt:before{
			content: "";
			position: absolute;
			top: 0.2em;
			left: 0;
			width: 4px;
			height: 1em;
			background: #00B0CA;
			border-radius: 2px;
			}
	#modalLink dt+dd{
		width: 100%;
		}
	#modalLink dd{
		margin-top: 1em;
		}
		#modalLink dd a{
			position: relative;
			display: block;
			cursor: pointer;
			padding: 0.8em;
			padding-left: 2.3em;
			border-radius: 4px;
			font-size: 0.875em;
			text-align: center;
			}
		#modalLink dd i{
			position: absolute;
			top: calc(50% - 0.5em);
			left: 0.8em;
			}
	#modalLink [data-target="confirm"],
	#modalLink [data-target="mailto"]{
		background: #fff;
		border: 1px solid #b2b6bc;
		color: inherit;
		fill: #00b0ca;
		}
	#modalLink [data-target="twitter"]{
		background: #1da1f2;
		color: #fff;
		fill: currentColor;
		}
	#modalLink [data-target="facebook"]{
		background: #3b5998;
		color: #fff;
		fill: currentColor;
		}
	#modalLink [data-target="line"]{
		background: #00c300;
		color: #fff;
		fill: currentColor;
		}

.spotList{}
	.spotList.grid{}
		.spotList.grid dd:nth-of-type(2){
			display: none;
			}

.screen{
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	pointer-events: none;
	z-index: 1000;
	}

.popup{
	position: relative;
	width: calc(100% - 3em);
	max-width: 960px;
	background: #fff;
	border-radius: 12px;
	filter: drop-shadow(0 0 0.3em rgba(0,0,0,0.1));
	pointer-events: all;
	}
	.popup menu{
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2em;
		height: 2em;
		margin: -1em;
		padding: 0;
		background: #27344d;
		border-radius: 100%;
		fill: #fff;
		cursor: pointer;
		}
		.popup menu svg{
			position: absolute;
			top: 15%;
			left: 15%;
			width: 70%;
			height: 70%;
			}




/* for all */
@media (max-width: 1199.98px) {
/*1199px以下*/
}
@media (max-width: 991.98px) {
/*991px以下*/
}


/* for mobile */
@media (max-width: 767.98px) {
/*767px以下*/
#map{
	margin-top: 2em;
	}
}
@media (max-width: 767.98px) and (orientation:portrait) {
/*767px以下縦向き*/
#modalLink{}
	#modalLink dl{
		justify-content: center;
		}
	#modalLink dd{}
		#modalLink dd:nth-of-type(3),
		#modalLink dd:nth-of-type(4){
			width: calc(50% - 0.5em);
			}
		#modalLink dd:nth-of-type(4),
		#modalLink dd:nth-of-type(n+6){
			margin-left: 1em;
			}
.popup{
	padding: 1em;
	}
}
@media (max-width: 767.98px) and (orientation:landscape) {
/*767px以下横向き*/
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
/*767px以下 横向き, 768px以上,*/
#modalLink{}
	#modalLink dd{}
		#modalLink dd:nth-of-type(n+4){
			margin-left: 1em;
			}
		#modalLink dd:nth-of-type(5){
			margin-left: auto;
			}
.popup{
	padding: 1.5em;
	}
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) and (max-width: 991.98px) {
/*767px以下 横向き, 768px～991px*/
}


/* for tablet */
@media (min-width: 768px) {
/*768px以上*/
}
@media (min-width: 768px) and (max-width: 1199.98px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 991.98px) {
/*768px～991px*/
#map{
	margin-top: 3em;
	}
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#map{
	margin-top: 4em;
	}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
/*992px～1199px*/
}
@media (min-width: 1200px) {
/*1200px以上*/
}