#contents {
    background: url(../img/winds/bg.png);
}
#contents img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	display: block;
	margin: auto;
}
#contents .shadowBox {
/*	margin-bottom: 0;*/
	position: relative;
	border: solid 1px;
	border-color: rgba(37, 23, 0, 0.56);
	-webkit-box-shadow: 3px 3px 0 rgba(37, 23, 0, 0.56);
	box-shadow: 3px 3px 0 rgba(37, 23, 0, 0.56);
}
#contents figure {
	text-align: center;
}

#title .h2Text {
    position: absolute;
    z-index: -10;
	top: -100%;
}
#title .innerNav.flexBox {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin-top: 20px;
}
#title .innerNav li {
	margin: .5em .5% 0;
	width: 24%;
	max-width: 200px;
}
#title .innerNav a {
	margin: 0;
	max-width: none;
	width: 100%;
	min-width: 120px;
	font-size: 1.3rem;
	white-space: nowrap
}
#title .innerNav li .linkIcon.bottom:after {
	bottom: -.3em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
	#title .innerNav li {
		width: 49%;
	}
}

/*====================================================
     //id #title
====================================================*/
#title .innerBox {
	width: 96%;
	position: relative;
}
#title .leadCopy {
	text-align: left;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
	#title .titleSub {
		width: 70%;
		max-width: 300px;
		margin-bottom: 6px;
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	#title .title_logo {
		width: 100%;
		max-width: 650px;
	}
	#title .leadCopy {
		position: relative;
	}
	#title .leadCopy .imgBox {
		position: absolute;
		width: 33%;
		max-width: 200px;
		bottom: 96%;
		right: 65%;
	}
	#title .leadCopy .txtBox {
		font-size: 1.6rem;
		width: 100%;
		margin-top: 1.5em;
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
	}
	#title .leadCopy .txtBox p:first-child {
	}
}

@media screen and (min-width:480px) and (max-width:768px) {
	#title .leadCopy .imgBox {
		bottom: 93%;
	}
	
}

/* ////////// PC ////////// */
@media print,
screen and (min-width: 769px) {
	#title .titleSub {
		position: absolute;
		top: -50px;
		right: 0;
		width: 16.25%;
	}
	#title .title_logo {
		width: 86.333%;
	}
	#title .leadCopy {
		position: relative;
		margin-top: 1em;
	}
	#title .leadCopy .imgBox {
		position: absolute;
		width: 40%;
		bottom: 14%;
	}
	#title .leadCopy .txtBox {
		font-size: 1.7rem;
		width: 70%;
		margin-left: 25%;
		padding: 0;
	}
	#title .leadCopy .txtBox p:first-child {
		margin-left: 22%
	}
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
	#title .titleSub {
		top: -20px;
		width: 15%;
	}
	#title .leadCopy .imgBox {
		position: absolute;
		top: -60px;
	}
	#title .leadCopy .txtBox {
		font-size: 1.5rem;
		width: 70%;
		margin-left: 25%;
		padding: 0;
	}
	#title .leadCopy .txtBox p:first-child {
		margin-left: 22%
	}
}


@media screen and (min-width:1200px) {
	#title .titleSub {
		right: -1%;
	}
	#title .leadCopy .imgBox {
	}
	#title .leadCopy .imgBox {
		width: 38.2%;
		margin-top: -8%;
	}
	#title .leadCopy .txtBox {
		width: 63%;
		font-size: 1.8rem;
		margin-top: 1em;
		margin-left: 37%;
		padding-right: 2%;
	}
	#title .leadCopy .txtBox p:first-child {
		margin-left: 0;
	}
}


/*====================================================
     //id #course
====================================================*/
#course .shadowBox {
	position: relative;
}
#course .topics_courseDetail {
	margin: 0;
}
#course .topics_courseDetail:before {
	display: none;
}
#course .courseIcon-outer {
/*	margin-bottom: 170px;*/
}
#course h3 {
    font-weight: bold;
    color: #3581bb;
    line-height: 1.2;
}
#course .copy {
    font-size: 1.5rem;
}
#course .course-outer .txtBox .detailTxt {
    background: #e8fcff;
    border: solid 2px;
    border-color: #49afc1;
}
#course .course-outer .txtBox .detailTxt h5 {
    font-size: 2.0rem;
    text-align: center;
    padding-top: .5em;
    color: #49afc1;
	font-weight: bold;
	line-height: 1.2;
}
#course .course-outer .txtBox .detailTxt dl {
    padding: 5px 10px;
}
#course .course-outer .txtBox .detailTxt dl dt {
    background: #49afc1;
    display: inline-block;
    padding: .2em .7em;
    margin-left: -10px;
    margin-bottom: 5px;
    color: #fff;
    font-weight: bold;
	font-size: 1.5rem;
	line-height: 1.4;
}
#course .topics_courseDetail h4 {
	background: #3581bb;
	border: solid #fff;
	border-width: 2px 2px 2px 0;
	-webkit-box-shadow: 2px 2px 0 #797774, 0 0 1px #4e4a44, 0 0 1px #4e4a44;
	box-shadow: 2px 2px 0 #797774, 0 0 1px #4e4a44, 0 0 1px #4e4a44;
	color: #fff;
	display: inline-block;
	margin: 0 0 15px -22px;
	padding: 8px 20px 8px 22px;
	position: relative;
/*	width: calc(100% + 25px);*/
}
#course .topics_courseDetail h4:before {
	border: solid 3px;
	border-color: #0c3555 #0c3555 transparent transparent;
	content: '';
	position: absolute;
	bottom: -8px;;
	left: 0;
	width: 0;
	height: 0;
}
/*
#course .topics_courseDetail h4:after {
	background: #797774;
	content: '';
	position: absolute;
	bottom: -3px;
	left: -18px;
	width: 20px;
	height: 3px;
}
*/
/*
#course .topics_courseDetail .lessonData dl {
	padding-left: 7em;
    position: relative;
    z-index: 1;
}
#course .topics_courseDetail .lessonData dt {
	width: 7em
}
#course .topics_courseDetail {
	position: relative;
}
*/
#course .course-outer .imgBox.instImg {
	position: absolute;
}
#course .imgBox {
	border: solid 1px;
	border-color: rgba(37, 23, 0, 0.56);
	-webkit-box-shadow: 3px 3px 0 rgba(37, 23, 0, 0.56);
	box-shadow: 3px 3px 0 rgba(37, 23, 0, 0.56);	position: absolute;
		top: -10px;
		right: -40px;
	-webkit-transform: rotate(8deg);
	transform: rotate(8deg);
	width: 250px;
	height: 160px;
}
#course .imgBox figure {
	width: 100%;
	height: 100%;
	border: solid 3px #fff;
	
}
#course .imgBox img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
    #course h3 {
        font-size: 2.0rem;
        margin-bottom: .5em;
    }
    #course .course-outer {
        display: block;
    }
    #course .course-outer .txtBox {
        display: block;
    }
    #course .course-outer .imgBox.photoBox {
        width: 80%;
		max-width: 200px;
        margin: 20px auto 0;
    }
/*
    #course .topics_courseDetail {
        width: 100%;
        padding-left: 0;
        border-left: none;
        border-top: dotted 1px;
        border-color: #e2dbce;
        margin-top: 20px;
        padding-top: 20px;
		position: relative;
    }
*/
    #course .course-outer .imgBox.instImg {
		width: 37%;
		top: 60px;
		right: -4%;
    }
	#course .courseTitle {
		padding-right: 35vw;
	}
	#course .imgBox {
		top: 0;
		right: -20px;
		width: 40vw;
		height: 26vw;
	}
}

@media screen and (min-width:480px) and (max-width:768px) {
    #course .course-outer .imgBox.instImg {
		width: 40%;
		top: 40px;
		right: 0%;
    }
}

/* ////////// PC ////////// */
@media print,
screen and (min-width: 769px) {
    #course .courseBox {
        margin-bottom: 40px;
    }
	#course .lessonData {
		padding-right: 200px;
	}
    #course h3 {
        text-align: center;
        font-size: 2.8rem;
        margin: auto;
        margin-bottom: .6em;
        width: 90%;
    }
	#course .course-outer h5 {
		font-size: 1.8rem;
		
	}
    #course .course-outer .txtBox {
        width: 40%;
    }
    #course .course-outer .imgBox.photoBox {
        margin: 20px 0
    }
/*
    #course .topics_courseDetail {
        width: 60%;
        padding-left: 16px;
        border-left: dotted 1px;
        border-color: #e2dbce;
    }
*/
    #course .course-outer .imgBox.instImg {
		width: 40%;
		max-width: 300px;
		top: -40px;
		right: -0;
    }
}

@media screen and (min-width:959px) {

    #course .course-outer .txtBox {
        width: 40%;
		padding-right: 16px;
        display: block;
    }
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
    #course .course-outer {
        display: block;
    }
    #course .course-outer .txtBox {
        width: 100%;
        margin-bottom: 10px;
    }
	#course .course-outer .txtBox .txt-inner {
		width: 65%;
	}
    #course .course-outer .imgBox.photoBox {
        margin: 0;
		width: 35%;
        margin-left: 16px;
    }
/*
    #course .topics_courseDetail {
        width: 100%;
        padding-left: 0;
        border-left: none;
        border-top: dotted 1px;
        border-color: #e2dbce;
        margin-top: 20px;
        padding-top: 20px
    }
*/
    #course .course-outer .imgBox.instImg {
		width: 260px;
		top: 10px;
		right: 5%;
    }
	#course .courseTitle {
		padding-right: 200px;
	}
	#course .imgBox {
		top: 30px;
		right: -30px;
	}
}


/*====================================================
     
====================================================*/

/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
}

@media screen and (min-width:480px) and (max-width:768px) {
}

/* ////////// PC ////////// */
@media print,
screen and (min-width: 769px) {
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
}



/*====================================================
     
====================================================*/

/* ////////// mobile ////////// */
@media screen and (max-width: 768px) {
}

@media screen and (min-width:480px) and (max-width:768px) {
}

/* ////////// PC ////////// */
@media print,
screen and (min-width: 769px) {
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:959px) {
}