/* CSS Document */

#detail{
	padding: 0;
	}
	#detail button[data-jc-controller]{
		background: #000;
		font-size: 1em;
		font-family: inherit;
		}
		#detail button[data-jc-controller]:hover{
			background: #ed7700;
			}
	#detailMapOpen button{
		background: #223a70;
		font-size: 1em;
		font-family: inherit;
		}
		#detailMapOpen button:hover{
			background: #e50012;
			}

#detailTitle{
	position: relative;
	}
	#detailTitle h2{
		padding: 0.8em;
		background: #223a70;
		color: #fff;
		}
	#detailTitle figure{
		margin-top: 0;
		}

#detailInfo{}
	#detailInfo dl{
		display: flex;
		flex-wrap: wrap;
		background: #223a70;
		color: #fff;
		fill: #fff;
		}
	#detailInfo dt,
	#detailInfo dd{
		padding: 0.8em;
		line-height: 1.4em;
		}
		#detailInfo dt:nth-of-type(n+2),
		#detailInfo dd:nth-of-type(n+2){
			border-top: 1px solid rgba(255,255,255,0.2);
			}
	#detailInfo dt{
		width: 2em;
		}
		#detailInfo dt svg{
			vertical-align: middle;
			}
	#detailInfo dd{
		width: calc(100% - 2em);
		text-align: center;
		}
	#detailInfo > div{
		position: relative;
		padding-top: 89.25%;
		}
	#detailInfo img{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		}

#detailContents{
	background: #f2ece8;
	}
	#detailContents .date{
		display: inline-block;
		position: relative;
		margin: 0;
		padding: 0.8em 2em;
		padding-left: 3.8em;
		background: #fff;
		border: 2px solid #223a70;
		color: #223a70;
		fill: #223a70;
		font-weight: bold;
		line-height: 1em;
		}
		#detailContents .date i{
			position: absolute;
			top: calc(50% - 0.5em);
			left: calc(1.5em - 2px);
			}
		#detailContents .date svg{
			width: 1.4em;
			height: 1.4em;
			margin: -0.2em;
			}

#detailCourse{
	position: relative;
	display: flex;
	flex-direction: column;
	grid-gap: 2em;
	counter-reset: count;
	margin-bottom: 2em;
	padding-left: 2em;
	}
	#detailCourse:before{
		content: "";
		position: absolute;
		top: -2em;
		left: calc(2em - 1px);
		width: 2px;
		height: calc(100% + 4em);
		background: #223a70;
		z-index: 1;
		}
	#detailCourse section{
		position: relative;
		background: #fff;
		}
	#detailCourse h3{
		color: #223a70;
		}
		#detailCourse h3:before{
			counter-increment: count;
			content: counter(count);
			position: absolute;
			left: -1em;
			width: 2em;
			height: 2em;
			margin-top: -0.3em;
			background: #223a70;
			border-radius: 100%;
			color: #fff;
			text-align: center;
			line-height: 2em;
			z-index: 2;
			}
	#detailCourse h3+div{
		margin-top: 1em;
		padding-top: 1em;
		border-top: 1px solid #b4b4b4;
		}
	#detailCourse h4+div{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		}
	#detailCourse dl{
		display: flex;
		flex-wrap: wrap;
		position: relative;
		margin-top: 1em;
		border: 1px solid #1a1a1a;
		background: #fff;
		}
	#detailCourse dt,
	#detailCourse dd{
		padding: 0.8em;
		border-top: 1px dotted #ccc;
		line-height: 1.4em;
		}
		#detailCourse dt:nth-of-type(1),
		#detailCourse dd:nth-of-type(1){
			border: none;
			}
	#detailCourse dt{
		width: 8em;
		background: #f2ece8;
		color: #1a1a1a;
		}
	#detailCourse dd{
		width: calc(100% - 8em);
		}
	#detailCourse .move{
		position: relative;
		margin: 0;
		padding-left: 3.5em;
		line-height: 1.4em;
		color: #1a1a1a;
		}
		#detailCourse .move:before{
			content: "";
			position: absolute;
			top: calc(50% - 0.5em);
			left: 0;
			border: 0.5em solid transparent;
			border-left-color: #223a70;
			}
		#detailCourse .move i{
			position: absolute;
			left: 0.5em;
			top: calc(50% - 0.5em);
			fill: #223a70;
			font-size: 1.8em;
			}
	#detailCourse .date{
		align-self: start;
		position: relative;
		margin-left: -2em;
		z-index: 1;
		}
	#detailCourse .thumb{
		padding-top: 66.66%;
		}
	#detailCourse .fr-view{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		line-height: 1.6em;
		}

#detailFooter{
	padding-top: 0;
	background: #f2ece8;
	}
	#detailFooter [src$=".svg"]{
		width: 30px;
		height: auto;
		}

#detailMap{
	position: relative;
	width: 100%;
	padding-right: 30%;
	background: #fff;
	border: 1px solid #b4b4b4;
	overflow: hidden;
	}
	#detailMap > div+div{
		position: absolute;
		top: 0;
		right: 0;
		width: 30%;
		height: 100%;
		margin: 0;
		padding: 1em;
		overflow-x: scroll;
		}
	#detailMap ul{
		counter-reset: count;
		list-style: none;
		}
		#detailMap ul > li{
			position: relative;
			width: 100%;
			padding-left: 2.5em;
			line-height: 1.4em;
			cursor: pointer;
			}
			#detailMap ul > li:before{
				counter-increment: count;
				content: counter(count);
				position: absolute;
				top: -0.4em;
				left: -0.2em;
				width: 2.4em;
				height: 2.4em;
				background: #223a70;
				border-radius: 100%;
				color: #fff;
				font-weight: bold;
				text-align: center;
				line-height: 2.4em;
				transform: scale(0.8);
				}
			#detailMap ul > li+li{
				margin-top: 1.5em;
				}

#recommend{
	overflow: hidden;
	}

.spotInfo{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}
	.spotInfo > div{
		width: calc(50% - 0.5em);
		order: 1;
		}
	.spotInfo .linkBut{
		display: block;
		background: #ed7700;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		}
	.spotInfo .toggleMenu{
		cursor: pointer;
		}
		.spotInfo .toggleMenu a{
			background: #223a70;
			}
		.spotInfo .toggleMenu svg{
			transition: all 0.2s ease-out;
			transform: rotate(90deg);
			}
		.spotInfo .toggleMenu.open{
			position: relative;
			}
			.spotInfo .toggleMenu.open svg{
				transform: rotate(-90deg);
				}
		.spotInfo .toggleBox{
			width: 100%;
			margin-top: 0;
			}

.gMap{}
	.gMap div+div{
		margin-top: 0;
		}

.itemSlide{}
	.itemSlide dl{
		position: relative;
		margin: 0 0.5em;
		}
	.itemSlide dt{
		margin-top: calc(66.66% + 0.5em);
		color: #1a1a1a;
		font-weight: bold;
		line-height: 1.4em;
		}
	.itemSlide dt+dd{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		}
	.itemSlide a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		color: transparent;
		}
	.itemSlide .thumb{
		padding-top: 66.66%;
		}
	.itemSlide .slick-arrow{}
		.itemSlide .slick-arrow svg{
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
			}


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


/* for mobile */
@media (max-width: 767px) {
/*767以下px*/
#detailTitle{}
	#detailTitle .thumb{
		padding-top: 66.66%;
		}
#detailContents{
	padding: 2em 0;
	}
#detailCourse{}
	#detailCourse section{
		padding: 1em;
		padding-left: 2em;
		}
	#detailCourse dt,
	#detailCourse dd{
		width: 100%;
		}
	#detailCourse dd{
		border: none;
		}
	#detailCourse .fr-view{
		-webkit-line-clamp: 3;
		height: calc(1.6em * 3 - 0.3em);
		}
.spotInfo{
	flex-direction: column;
	}
	.spotInfo > div{
		width: 100%;
		}
	.spotInfo > div+div{
		margin-top: 1em;
		}
.itemSlide{
	margin-left: -1em;
	margin-right: -1em;
	}
}
@media (max-width: 767px) and (orientation:portrait) {
/*767px以下 縦向き*/
#detailCourse{}
	#detailCourse h4+div{
		display: block;
		}
		#detailCourse h4+div > *{
			width: 100%;
			}
	#detailCourse figure{
		margin-bottom: 1em;
		}
#detailMap{
	position: static;
	padding: 0;
	}
	#detailMap > div+div{
		position: static;
		width: 100%;
		height: 10em;
		}
}
@media (max-width: 767px) and (orientation:landscape) {
/*767px以下 横向き*/
#detailCourse{}
	#detailCourse h4+div{}
		#detailCourse h4+div > *{
			width: calc(50% - 0.5em);
			}
}


/* for TabletPC */
@media (min-width: 768px) {
/*768px以上*/
#detailHeader{}
	#detailHeader .wrap{
		display: flex;
		flex-wrap: wrap;
		}
#detailTitle{}
	#detailTitle h2{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 1;
		}
	#detailTitle .thumb{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding-top: 0;
		}
#detailInfo{
	margin-top: 0;
	}
#detailLead{
	width: 100%;
	}
#detailMap{}
	#detailMap > div+div{
		padding: 1.5em;
		}
	#detailMap li{
		font-size: 1.125em;
		}
#gMap{
	padding-top: 80%;
	}
#recommend{}
	#recommend .wrap{
		overflow: hidden;
		}
.spotInfo{}
	.spotInfo > div{
		order: 1;
		}
	.spotInfo > div+div{
		margin-top: 0;
		}
	.spotInfo .toggleBox{
		order: 2;
		}
	.spotInfo .toggleBox+div{
		margin-left: auto;
		}
.itemSlide{
	margin-left: -0.5em;
	margin-right: -0.5em;
	}
	.itemSlide .slick-prev{
		left: 0.5em;
		}
	.itemSlide .slick-next{
		right: 0.5em;
		}
}
@media (min-width: 768px) and (max-width: 1199px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 991px) {
/*768px～991px*/
#detailTitle{
	width: 65%;
	}
#detailInfo{
	width: 35%;
	}
#detailContents{
	padding: 3em 0;
	}
#detailCourse{}
	#detailCourse section{
		padding: 1.5em;
		padding-left: 2.5em;
		}
	#detailCourse figure{
		width: calc(35% - 0.75em);
		}
	#detailCourse figure+div{
		width: calc(65% - 0.75em);
		}
	#detailCourse .fr-view{
		-webkit-line-clamp: 3;
		height: calc(1.6em * 3 - 0.3em);
		}
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#detailContents{
	padding: 4em 0;
	}
#detailCourse{}
	#detailCourse section{
		padding: 2em;
		padding-left: 3em;
		}
}
@media (min-width: 992px) and (max-width: 1199px) {
/*992px～1200px*/
#detailTitle{
	width: 65%;
	}
#detailInfo{
	width: 35%;
	}
#detailCourse{}
	#detailCourse figure{
		width: calc(40% - 0.75em);
		}
	#detailCourse figure+div{
		width: calc(60% - 0.75em);
		}
	#detailCourse .fr-view{
		-webkit-line-clamp: 5;
		height: calc(1.6em * 5 - 0.3em);
		}
}
@media (min-width: 1200px) {
/*1200px以上*/
#detailTitle{
	width: calc(100% - 400px);
	}
#detailInfo{
	width: 400px;
	}
#detailCourse{}
	#detailCourse h4+div{}
		#detailCourse h4+div > *{
			width: calc(50% - 0.75em);
			}
	#detailCourse .fr-view{
		-webkit-line-clamp: 10;
		height: calc(1.6em * 10 - 0.3em);
		}
}


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