/* CSS Document */

#col2{
	padding: 0;
	}

#detail{
	counter-reset: chapter;
	}
	#detail section,
	#detail section > div+div{
		/* margin-top: 2em; */
		margin-top: 1.5em;
		}
	#detail h2{
		position: relative;
		/* padding-top: 1.5em; */
		}
	/*
	#detail h2:before{
		counter-increment: chapter;
		content: "chapter "counter(chapter);
		position: absolute;
		top: 0;
		left: 0;
		background: var(--secondary-color);
		border-radius: 0.2em;
		padding: 0.5em 0.8em;
		color: #fff;
		font-size: 0.6em;
		text-transform: capitalize;
		line-height: 1em;
		}
	*/
	#detail figure{
		/* margin-bottom: 1em; */
		margin-bottom: 0.5em;
		}
	#detail dl{
		margin-top: 1em;
		border: 1px solid #b7b7b7;
		}
	#detail dt,
	#detail dd{
		padding: 0.5em;
		}
	#detail dt{
		background: #f0ede6;
		}
	#detail dd+dd{
		border-top: 1px dotted#b7b7b7;
		}
	#detail .thumbBox{
		padding-top: 66.66%;
		}
		#detail .thumbBox img{
			object-fit: contain;
			}

#spotlist{}
	#spotlist ul {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-ms-flex-pack: flex-start;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		list-style: none;
		}
	#spotlist ul li{
		width: calc(50% - 0.5em);
		margin-top: 1em;
		}
		#spotlist ul li a{
			position: relative;
			display: inline-block;
			padding-left: 2.5em;
			text-decoration: none;
			}
			#spotlist ul li a span{
				position: absolute;
				top: -0.2em;
				left: 0;
				display: inline-block;
				background-color: var(--primary-color);
				border: 1px solid var(--primary-color);
				border-radius: 50%;
				width: 30px;
				height: 30px;
				line-height: 30px;
				margin-right: 0.5em;
				text-align: center;
				color: #fff;
				}

#title{
	text-align: left;
	}
	#title h1{
		font-size: 1.6em;
		font-weight: bold;
		}
		#title h1 span{
			color: #4d4d4d;
			font-size: 0.6em;
			font-weight: normal;
			}
	#title figure{
		margin: 1em 0;
		}
	#title p{
		color: var(--secondary-color);
		line-height: 1.4em;
		}

#map{
	margin-top: 2em;
	}

#gMap{
	height: 50vw;
	}

#pageNav{}
	#pageNav ul{
		list-style: none;
		}
	#pageNav li{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		position: relative;
		margin-top: 1em;
		padding: 0;
		background: rgba(var(--primary-color-rgb), 0.1);
		border: none;
		word-break: break-all;
		}
	#pageNav a{
		position: absolute;
		left: 0;
		top:0;
		width: 100%;
		height: 100%;
		}
		#pageNav a:hover,
		#pageNav a:active{
			background: rgba(var(--secondary-color-rgb),0.1);
			}
	#pageNav figure{
		width: 4em;
		}
	#pageNav figure+div{
		width: calc(100% - 4em);
		padding-left: 1em;
		}
	#pageNav p{
		line-height: 1.4em;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		}
	#pageNav .thumbBox{
		padding-top: 100%;
		}


/* for mobile */
@media (max-width: 767px) {
/*767以下px*/
#gMap{
	height: 100vw;
	}
#spotlist{}
	#spotlist ul li{
		width: calc(100% - 0.5em);
		}
#pagination{
	margin-top: 2em;
	}
#pageNav{
	padding-bottom: 2em;
	}
	#pageNav ul{
		padding: 0 1em;
		border: none;
		}
	#pageNav li{
		margin-top: 0;
		}
	#pageNav li+li{
		margin-top: 0.5em;
		}
}
@media (max-width: 767px) and (orientation:portrait) {
/*767px以下 縦向き*/
#pageNav{}
	#pageNav figure{
		width: 25%;
		}
	#pageNav figure+div{
		width: 75%;
		margin: 0;
		padding: 0.5em;
		}
}
@media (max-width: 767px) and (orientation:landscape) {
/*767px以下 横向き*/
}


/* for TabletPC */
@media (min-width: 768px) {
/*768px以上*/
#col2{
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	}
#detail{
	width: 60%;
	}
#pageNav{
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 5em;
	width: 40%;
	margin: 3em 0;
	padding-left: 1em;
	}
#pagination{
	margin-top: 3em;
	}
}


/* for PC */
@media (min-width: 960px) {
/*960px以上*/
#title{}
	#title h1{
		font-weight: 500;
		}
#detail{
	width: 70%;
	}
	#detail section{
		/* margin-top: 4em; */
		margin-top: 2em;
		}
#gMap{
	height: 30em;
	}
#pageNav{
	width: 30%;
	margin: 4em 0;
	padding-left: 2em;
	}
#pagination{
	margin-top: 4em;
	}
}
@media (min-width: 1200px) {
/*1200px以上*/
#title{}
	#title h1{
		font-size: 1.8em;
		}
	#title p{
		font-size: 1.2em;
		}
}


/* ie */
@media all and (-ms-high-contrast: none){}