@charset "utf-8";
/* CSS Document */

/* --------------------------------------------------

courses/detail.html

-------------------------------------------------- */



/* --------------------------------------------------
course-main
-------------------------------------------------- */

.course-main {
	text-align:center;
}

.main-img {
	margin:0 auto 4%;
	max-width:800px;
	text-align:center;
}

.course-main .stay-link a {
	font-size:3.2rem;
	padding:0 .5em;
	line-height:1.2;
	margin-bottom:2%;
	color: #E8380D;
}

.course-ttl{
	font-size: 5rem;
	margin-bottom: 20px;
	line-height: 1.2;
}

.course-main .area-link,
.course-main .genre-link {
	display:inline-block;
}

.course-main .area-link a {
	padding: 3px 10px;
}


.course-main p {
	margin:2.5% auto 6%;
	width:90%;
	max-width:900px;
	text-align: left;
}


/* --------------------------------------------------
start-block  goal-block
-------------------------------------------------- */

.start-block,
.goal-block {
	border:1px solid #2F2F2F;
	font-size:3.2rem;
	font-weight:bold;
	color:#2F2F2F;
	padding:.5em;
	width:90%;
	max-width:960px;
	margin:5% auto;
	text-align:center;
    word-break: break-all;
}


/* --------------------------------------------------
spot-block
-------------------------------------------------- */


.spot-block {
	margin:2% auto;
}

.spot-block .spot-ttl {
	border-bottom:1px solid #2F2F2F;
	color:#2F2F2F;
	font-size:2.4rem;
	font-weight:bold;
	padding:.5em;
	line-height:1.2;
	margin:0 auto 2%;
	max-width:960px;
}

.spot-block .spot-ttl span {
	margin-right:1em;
}

.spot-img {
	margin:0 auto 4%;
	max-width:800px;
	max-height:600px;
	text-align:center;
}

.spot-block .wysiwyg {
	width:100%;
	margin:5% auto;
	max-width:800px;
}


.data-area {
	background:#F8F8F8;
	padding:2em;
	width:100%;
	max-width:960px;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}

.data-area h4 {
	color:#DC3309;
	font-size:2.4rem;
	line-height:1;
	width:5em;
}

.data-area .data-txt {
	width: calc( 100% - 25em );
}

.data-area .data-txt dt,
.data-area .data-txt dd {
	display:inline-block;
	padding:.5em 1em;
    word-break: break-all;
}

.data-area .data-txt dt {
	background:#DC3309;
	line-height:1.2;
	color:#FFF;
}


.data-area .btn-more {
	width:15em;
}



/* --------------------------------------------------
movement-block
-------------------------------------------------- */

.movement-block{
	position: relative;
	align-items: center;
	margin:0% 0;
	padding:2em;
}

.movement-block:before{
	content:"";
	display:block;
	height:100%;
	position:absolute;
	width:4px;
	background:#DC3309;
	top:0;
	left:50%;
	margin-left:-2px;
}

.movement {
	position:relative;
	font-size:1.8rem;
	text-align:center;
	background:#FFF;
	padding:.5em;
	line-height:1;
}


.movement:before {
	content:"";
	position:absolute;
	top:-2.0em;
	left:50%;
	width:9px;
	height:9px;
	border:1px solid #DC3309;
	background:#FFF;
	border-radius:50%;
	margin-left:-5px;
}


.movement:after {
	content:"";
	position:absolute;
	bottom:-2.0em;
	left:50%;
	width:9px;
	height:9px;
	border:1px solid #DC3309;
	background:#FFF;
	border-radius:50%;
	margin-left:-5px;
}










@media screen and (max-width: 800px) {


	/* --------------------------------------------------
	course-main
	-------------------------------------------------- */

	.course-main .stay-link a {
		font-size:2.1rem;
	}


	.course-ttl{
		font-size: 3rem;
	}

	.course-main p {
		margin:2.5% auto 10%;
	}


	/* --------------------------------------------------
	start-block  goal-block
	-------------------------------------------------- */

	.start-block,
	.goal-block {
		font-size:2.4rem;
	}


	/* --------------------------------------------------
	spot-block
	-------------------------------------------------- */

	.spot-block .spot-ttl span {
		display:block;
		margin-right:0;
		font-size:1.6rem;
	}




.data-area {
	display:block;
}

.data-area h4 {
	font-size:2rem;
	line-height:1;
	width:100%;
	text-align:center;
	margin-bottom:1em;
}

.data-area .data-txt {
	width: 100%;
	margin-bottom:2em;
	overflow:hidden;
}

.data-area .data-txt dt,
.data-area .data-txt dd {
	display:block;
	padding:.5em 1em;
}

.data-area .data-txt dt {
	background:#0096DF;
	line-height: inherit;
	color:#FFF;
	/* width:5em; */
	float:left;
}

.data-area .data-txt dd {
	margin-left:6em;
}


.data-area .btn-more {
	width:15em;
	margin:0 auto;
}

	/* --------------------------------------------------
	movement-block
	-------------------------------------------------- */

	.movement-block:before{
		width:4px;
		margin-left:-1px;
	}

	.movement:before {
		width:6px;
		height:6px;
		margin-left:-3px;
	}

	.movement:after {
		width:6px;
		height:6px;
		margin-left:-3px;
	}



}



@media screen and (max-width: 600px) {


}