/* CSS Document */

article{}
	article div+div{
		margin-top: 2em;
		}

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

#detailHeader{
	counter-reset: count;
	}
	#detailHeader h1{
		font-size: 1.6em;
		font-weight: bold;
		line-height: 1.2em;
		}
	#detailHeader h1+div{
		margin-top: 0.5em;
		color: var(--secondary-color);
		line-height: 1.4em;
		}
	#detailHeader ul{
		display: flex;
		list-style: none;
		}
	#detailHeader li+li{
		margin-left: 1em;
		}
	#detailHeader dl{
		display: flex;
		flex-wrap: wrap;
		border: 1px solid #b7b7b7;
		}
	#detailHeader dt,
	#detailHeader dd{
		padding: 0.5em;
		}
		#detailHeader dt:nth-of-type(n+2),
		#detailHeader dd:nth-of-type(n+2){
			border-top: 1px solid #b7b7b7;
			}
	#detailHeader dt{
		width: 14em;
		background: rgba(var(--primary-color-rgb),0.1);
		}
	#detailHeader dd{
		width: calc(100% - 14em);
		}
	#detailHeader figure{
		margin-top: 2em;
		}
	#detailHeader .facebook{}
		#detailHeader .facebook span{
			vertical-align: top !important;
			}

#detailMenu{
	counter-reset: count;
	}
	#detailMenu dl{
		position: relative;
		display: flex;
		}
		#detailMenu dl img{
			transition: 0.2s ease-out;
			}
			#detailMenu dl:hover img{
				opacity: 0.7;
				}
		#detailMenu dl:before{
			counter-increment: count;
			content: counter(count);
			display: flex;
			justify-content: center;
			align-items: center;
			width: 2.5em;
			background: var(--secondary-color);
			color: #fff;
			font-weight: bold;
			order: -2;
			}
	#detailMenu dt{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		align-self: center;
		padding: 0 1em;
		line-height: 1.4em;
		}
	#detailMenu dt+dd{
		order: -1;
		}
	#detailMenu a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 1px solid var(--secondary-color);
		color: transparent;
		}
		#detailMenu a:focus{
			background: none;
			}
	#detailMenu .wrap{
		display: flex;
		flex-wrap: wrap;
		}

#detailCourse{
	counter-reset: count;
	margin-top: 2em;
	}
	#detailCourse section{
		position: relative;
		display: flex;
		padding: 1em;
		padding-left: 4em !important;
		border: 1px solid #b7b7b7;
		background: #fff;
		}
		#detailCourse section:before{
			counter-increment: count;
			content: counter(count);
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 2.8em;
			height: 2.8em;
			background: var(--secondary-color);
			color: #fff;
			font-weight: bold;
			}
	#detailCourse ul{
		list-style: none;
		}
	#detailCourse dl{
		display: flex;
		align-items: center;
		}
	#detailCourse dl+dl{
		margin-top: 1em;
		}
	#detailCourse dt{
		position: relative;
		}
		#detailCourse dt:before{
			content: "";
			position: absolute;
			border: 1em solid transparent;
			font-size: 0.8em;
			}
		#detailCourse dt .thumbBox{
			border-radius: 100%;
			overflow: hidden;
			}
	#detailCourse dd{
		background: #f2f2f2;
		padding: 1em;
		line-height: 1.4em;
		}
	#detailCourse .linkBut{
		padding-right: 2em;
		}
	#detailCourse .start,
	#detailCourse .goal{
		position: relative;
		padding: 0.8em;
		padding-left: 6em;
		border: 1px solid #b7b7b7;
		background: #fff;
		line-height: 1.4em;
		}
		#detailCourse .start:before,
		#detailCourse .goal:before{
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 5em;
			height: 100%;
			background: var(--secondary-color);
			color: #fff;
			font-weight: bold;
			text-transform: uppercase;
			}
		#detailCourse .start:before{
			content: "start!";
			}
		#detailCourse .goal:before{
			content: "goal!";
			}
	#detailCourse .stay{
		display: flex;
		justify-content: center;
		padding-left: 2em;
		}
	#detailCourse .move{
		position: relative;
		display: inline-block;
		margin-left: 2em;
		padding: 0.8em;
		background: rgba(var(--primary-color-rgb),0.1);
		line-height: 1.4em;
		}
		#detailCourse .move:before{
			content: "";
			position: absolute;
			left: -2em;
			top: calc(50% - 1em);
			border: 1em solid transparent;
			border-right-color: rgba(var(--primary-color-rgb),0.1);
			font-size: 0.4em;
			}
	#detailCourse .more{
		padding-left: 2em;
		}
	#detailCourse .wrap{
		position: relative;
		}
		#detailCourse .wrap:before {
			content: "";
			position: absolute;
			top: 0;
			left: 17px;
			height: 100%;
			width: 3px;
			background: #f2f2f2;
			border: 1px solid #f2f2f2;
			border-width: 0 1px;
			z-index: -1;
			}
	#detailCourse .slide{}
		#detailCourse .slide .thumbBox{
			padding-top: 66.66%;
			}

	#detailCourse aside{
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		text-align: center;
		margin-top: 2em;
		}
		#detailCourse aside a{
			display: block;
			width: calc(33.33% - 0.7em);
			margin: 0 0.3em;
			padding: 1em;
			background: #fff;
			border: 1px solid #b7b7b7;
			border-radius: 0.2em;
			line-height: 3em;
			}
			#detailCourse aside a:hover,
			#detailCourse aside a:active{
				border-color: #16355B;
				}
		#detailCourse aside img{
			max-height: 3em;
			vertical-align: middle;
			}
	#detailCourse .typeSpot.dispBlock,#detailCourse .typeMove.dispBlock,#detailCourse .typeDay.dispBlock,#detailCourse .typeStay.dispBlock{
	
		}
	#detailCourse .typeSpot.dispNone,#detailCourse .typeMove.dispNone,#detailCourse .typeDay.dispNone,#detailCourse .typeStay.dispNone{
		display: none;
		}

#detailMap{}
	#detailMap h3+div{
		width: 100%;
		}
	#detailMap ol{
		counter-reset: count;
		padding: 1em;
		border: 1px solid #b7b7b7;
		list-style: none;
		}
	#detailMap li{
		position: relative;
		display: flex;
		align-items: center;
		padding-left: 3.4em;
		min-height: 2.4em;
		}
		#detailMap li:before{
			counter-increment: count;
			content: counter(count);
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 2.4em;
			height: 2.4em;
			background: var(--secondary-color);
			color: #fff;
			font-weight: bold;
			}
	#detailMap .wrap{
		display: flex;
		flex-direction: column;
		align-items: center;
		}

#gMap{
	display: flex;
	justify-content: center;
	align-items: center;
	background: #f2f2f2;
	}

.wrap{
	text-align: left;
	}

/* for mobile */
@media (max-width: 767px) {
/*767px以下*/
#detailMenu{}
	#detailMenu dl{
		height: 4em;
		}
	#detailMenu dt{
		-webkit-line-clamp: 2;
		width: calc(70% - 2.5em);
		max-height: calc(1.4em * 2);
		overflow: hidden;
		}
	#detailMenu dt+dd{
		width: 30%;
		}
	#detailMenu .thumbBox{
		padding-top: 4em;
		}
#detailCourse{}
	#detailCourse section{
		flex-direction: column;
		}
	#detailCourse .wrap{}
		#detailCourse .wrap > *+*{
			margin-top: 1em;
			}
#gMap{
	height: 75vw;
	}
}
@media (max-width: 767px) and (orientation:portrait) {
/*767px以下 縦向き*/
#detailHeader{}
	#detailHeader dl{
		margin: 0 -1em;
		border: none;
		border-bottom: 1px solid #b7b7b7;
		}
	#detailHeader dt,
	#detailHeader dd{
		width: 100%;
		padding: 0.8em 1em;
		}
	#detailHeader dt{
		border-top: 1px solid #b7b7b7;
		}
	#detailHeader dd{
		border: none !important;
		}
	#detailHeader .thumbBox{
		padding-top: 66.66%;
		}
#detailMenu{}
	#detailMenu dl+dl{
		margin-top: 1em;
		}
	#detailMenu .wrap{
		flex-direction: column;
		}
#detailCourse{}
	#detailCourse dl{
		flex-direction: column;
		}
	#detailCourse dt{
		width: 8em;
		padding-bottom: 1em;
		}
		#detailCourse dt:before{
			left: calc(50% - 1em);
			bottom: 0;
			border-bottom-color: #f2f2f2;
			}
	#detailCourse dd{
		width: 100%;
		}
	
	#detailCourse aside{}
		#detailCourse aside a{
			width: 100%;
			}
		#detailCourse aside a+a{
			margin-top: 0.5em;
			}
	
#detailMap{}
	#detailMap li+li{
		margin-top: 1em;
		}
}
@media (max-width: 767px) and (orientation:landscape) {
/*767px以下 横向き*/
#detailHeader{}
	#detailHeader .thumbBox{
		padding-top: 50%;
		}
#detailMenu{}
	#detailMenu dl{
		width: calc(50% - 0.5em);
		}
		#detailMenu dl:nth-of-type(n+3){
			margin-top: 1em;
			}
	#detailMenu .wrap{
		justify-content: space-between;
		}
	#detailCourse dl{}
		#detailCourse dl:nth-child(odd){
			flex-direction: row;
			}
			#detailCourse dl:nth-child(odd) dt{
				padding-right: 1em;
				}
				#detailCourse dl:nth-child(odd) dt:before{
					right: 0;
					border-right-color: #f2f2f2;
					}
		#detailCourse dl:nth-child(even){
			flex-direction: row-reverse;
			}
			#detailCourse dl:nth-child(even) dt{
				padding-left: 1em;
				}
				#detailCourse dl:nth-child(even) dt:before{
					left: 0em;
					border-left-color: #f2f2f2;
					}
	#detailCourse dt{
		width: 10em;
		align-self: flex-start;
		}
		#detailCourse dt:before{
			top: calc(50% - 1em);
			}
	#detailCourse dd{
		width: calc(100% - 10em);
		}
#detailMap{}
	#detailMap ol{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		}
	#detailMap li{
		width: calc(50% - 0.5em);
		}
		#detailMap li:nth-of-type(n+3){
			margin-top: 1em;
			}
}


/* for TabletPC */
@media (min-width: 768px) {
/*768px以上*/
#detailHeader{}
	#detailHeader .thumbBox{
		padding-top: 50%;
		}
#detailMenu{}
	#detailMenu dl{
		width: calc(50% - 0.5em);
		height: 5em;
		}
		#detailMenu dl:nth-of-type(n+3){
			margin-top: 1em;
			}
	#detailMenu dt{
		-webkit-line-clamp: 3;
		width: calc(75% - 2.5em);
		max-height: calc(1.4em * 3);
		overflow: hidden;
		}
	#detailMenu dt+dd{
		width: 25%;
		}
	#detailMenu .thumbBox{
		padding-top: 5em;
		}
	#detailMenu .wrap{
		justify-content: space-between;
		}
#detailCourse{}
	#detailCourse section{
		flex-wrap: wrap;
		justify-content: space-between;
		}
		#detailCourse section:nth-of-type(even){
			flex-direction: row-reverse;
			justify-content: space-between;
			}
		#detailCourse section > div:nth-of-type(-n+2){
			width: calc(50% - 0.5em);
			margin-top: 0;
			}
		#detailCourse section > div:nth-of-type(n+3){
			width: 100%;
			}
	#detailCourse dl{}
		#detailCourse dl:nth-child(odd){
			flex-direction: row;
			}
			#detailCourse dl:nth-child(odd) dt{
				padding-right: 1em;
				}
				#detailCourse dl:nth-child(odd) dt:before{
					right: 0;
					border-right-color: #f2f2f2;
					}
		#detailCourse dl:nth-child(even){
			flex-direction: row-reverse;
			}
			#detailCourse dl:nth-child(even) dt{
				padding-left: 1em;
				}
				#detailCourse dl:nth-child(even) dt:before{
					left: 0em;
					border-left-color: #f2f2f2;
					}
	#detailCourse dt{
		width: 10em;
		align-self: flex-start;
		}
		#detailCourse dt:before{
			top: calc(50% - 1em);
			}
	#detailCourse dd{
		width: calc(100% - 10em);
		}
	#detailCourse .wrap{}
		#detailCourse .wrap > *+*{
			margin-top: 2em;
			}
#detailMap{}
	#detailMap ol{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		}
	#detailMap li{
		width: calc(50% - 0.5em);
		}
		#detailMap li:nth-of-type(n+3){
			margin-top: 1em;
			}
#gMap{
	height: 50vw;
	}
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#detailMenu{}
	#detailMenu dl{
		height: 6em;
		}
	#detailMenu .thumbBox{
		padding-top: 6em;
		}
#detailCourse{}
	#detailCourse section{
		padding: 1.5em;
		}
#gMap{
	height: 30em;
	}
}


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