/* CSS Document */


/* --------------------------------------------------
modelcourse
-------------------------------------------------- */

.modelcourse {
	margin-bottom:80px;
}

/* ttl-main-area */

.ttl-main-area {
	margin-bottom:2rem;
}

.img-main {
	position:relative;
	margin-bottom:4rem;
}

.img-main img {
	width:auto;
	height:auto;
	max-width:100%;
}

.img-ttl-main {
	width:440px;
	height:384px;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-220px;
	margin-top:-192px;
}


.ttl-main {
	font-family: "Noto Sans Japanese","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","游ゴシック","Yu Gothic","メイリオ",Meiryo,Osaka,sans-serif;
	text-align:center;
	font-size:1.6rem;
	line-height:1.4;
	max-width:980px;
	margin:0 auto;
}

.ttl-main span{
	display:block;
	padding:4rem 0 0;
	margin:0 auto;
	font-size:1.4rem;
	font-style:italic;
}


/* sentence 共通部分 */

.s-ttl {
	margin-bottom:1.5rem;
	width: 34.5%;
	position:relative;
	z-index:5;
	margin-top: 2rem;
}

.s-ttl img{
	width:540px;
}

.s-contents-area {
	width:34.5%;
	position:relative;
	z-index:5;
}

.s-txt {
	margin-bottom:4rem;
	text-align: justify;
}

.s-note {
	margin-top:2rem;
}

.s-data {
	position: relative;
	border:1px solid #000;
	width:100%;
	padding:2rem 2.5rem;
}
.s-data:before {
	display:block;
	content:"";
	width:27px;
	height:27px;
	background:url(../img/slit.jpg);
	background-size:contain;
	position:absolute;
	top:-3px;
	left:-3px;
}
.s-data:after {
	display:block;
	content:"";
	width:27px;
	height:27px;
	background:url(../img/slit.jpg);
	background-size:contain;
	position:absolute;
	bottom:-3px;
	right:-3px;
}

.s-data .s-data-ttl {
	position: relative;
	padding: 0.5rem 2rem 0.5rem 4.5rem;
	background: #518BBD;
	color: #FFF;
	margin-left: -3rem;
	line-height: 1;
	z-index:-2;
	margin-bottom:1rem;
	display:inline-block;
}
.s-data .s-data-ttl:before {
	position: absolute;
	content: '';
	left: -2px;
	top: -2px;
	width: 0;
	height: 0;
	border: none;
	border-left: solid 40px white;
	border-bottom: solid 79px transparent;
	z-index: -1;
}
.s-data .s-data-ttl:after {
	position: absolute;
	content: '';
	right: -3px;
	top: -7px;
	width: 0;
	height: 0;
	border: none;
	border-left: solid 40px transparent;
	border-bottom: solid 79px white;
	z-index: -1;
}

.s-data .s-second-data-ttl {
	margin-top:2rem;
}

.s-data dl{
	margin-bottom:0.25em;
	display:table;
}
.s-data dl dt{
	display:table-cell;
	font-weight:bold;
	white-space:nowrap;
}
.s-datat dl dd{
	display:table-cell;
}

.s-img {
	width:100%;
	text-align:center;
	margin-top:1.5rem;
}
.s-img img {
	width: auto;
	height: auto;
	max-width:100%;
}

.s-img-area {
	width:62.5%;
	z-index:1;
}

.s-img-area  img{
	width: auto;
	height:auto;
	max-width:100%;
}

.sentence-areaL,
.sentence-areaR {
	position:relative;
}


/* sentence-areaL */

.sentence-areaL {
	position:relative;
	margin-bottom:0;
}

.sentence-areaL .s-ttl {
	float:right;
}
.sentence-areaL .s-ttl img{
	text-align:right;
	float:right;
}

.sentence-areaL .s-ttl-img {
	position:absolute;
	top:-90px;
	right:10px;
	z-index:2;
}

.sentence-areaL .s-ttl-img img {
	width:auto;
	height:auto;
	max-width:100%;
}

.sentence-areaL .s-contents-area {
	float:right;
}

.sentence-areaL .s-img-area {
	float:left;
}



/* sentence-areaR */

.sentence-areaR {
	position:relative;
	margin-bottom:0;
}

.sentence-areaR .s-ttl {
	float:left;
}

.sentence-areaR .s-ttl img {
	text-align:left;
	float:left;
}

.sentence-areaR .s-ttl-img {
	position:absolute;
	top:-90px;
	left:10px;
	z-index:2;
}

.sentence-areaR .s-ttl-img img {
	width:auto;
	height:auto;
	max-width:100%;
}

.sentence-areaR .s-contents-area {
	float:left;
}

.sentence-areaR .s-txt-img {
	text-align:right;
	margin-top:-20px;
	margin-bottom:-40px;
	position:relative;
	z-index:5;
}

.sentence-areaR .s-txt-img img {
	width:auto;
	height:auto;
	max-width:100%;
}

.sentence-areaR .s-img-area {
	float:right;
}

/* move-area */

.move-area {
	max-width:540px;
	margin:0 auto;
	width:70%;
	text-align:center;
	height:180px;
	position:relative;
}

.move-area .move-time {
	font-size:1.6rem;
	position:absolute;
	line-height:1;
	margin-top:-3.5rem;
	top:50%;
	text-align:center;
	width:100%;
}

.move-area .move-time span{
	display:inline-block;
	padding:1.5rem 2.5rem;
	font-weight:bold;
	position:relative;
	border-style: solid;
	border-width: 10px 10px 10px 10px;
	border-image: url(../img/move_border.png) 24 24 24 24 repeat repeat;
}

.move-area .move-time span:before{
	position:absolute;
	top:-10px;
	left:-10px;
	content:"";
	display:block;
	width:110%;
	background:#FFF;
	height:120%;
	z-index:-1;
}

.move-area .move-time span:after{
	position:absolute;
	top:3px;
	left:3px;
	content:"";
	display:block;
	width:102%;
	background:#FFFBE4;
	height:108%;
	z-index:-1;
}

.move-area.start:before {
	content:"";
	width:50%;
	height:50%;
	position: absolute;
	bottom:0;
	left:0;
	border-left:1px dashed #333;
	border-top:1px dashed #333;
	z-index:-5;
}

.move-area.move-LtoR:before {
	content:"";
	width:50%;
	height:50%;
	position: absolute;
	top:0;
	left:0;
	border-left:1px dashed #333;
	border-bottom:1px dashed #333;
	z-index:-5;
}

.move-area.move-LtoR:after {
	content:"";
	width:50%;
	height:50%;
	position: absolute;
	bottom:1px;
	right:0;
	border-right:1px dashed #333;
	border-top:1px dashed #333;
	z-index:-5;
}

.move-area.move-RtoL:before {
	content:"";
	width:50%;
	height:50%;
	position: absolute;
	top:0;
	right:0;
	border-right:1px dashed #333;
	border-bottom:1px dashed #333;
	z-index:-5;
}

.move-area.move-RtoL:after {
	content:"";
	width:50%;
	height:50%;
	position: absolute;
	bottom:1px;
	left:0;
	margin-top:-1px;
	padding-bottom:1px;
	border-left:1px dashed #333;
	border-top:1px dashed #333;
	z-index:-5;
}

.move-area .move-time img{
	margin:-4rem 0 0 2rem; 
}


/* course-spot-area */

.course-spot-area {
	margin:10rem 0;	
}

.course-spot-2col {
	margin-bottom:8rem;
}

.course-spot-left {
	float:left;
	width:48.5%;
}

.course-spot-right {
	float:right;
	width:48.5%;
}

.course-spot-area .s-ttl {
    width: 100%;
		position:relative;

}
.course-spot-area .s-ttl:before {
    border-top: 1px solid;
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 100%;
		z-index:1;
}

.course-spot-area .s-ttl img {
	width:auto;
	height:auto;
	max-width:100%;
	background:#FFF;
	display:inline-block;
	position:relative;
	padding-right:1rem;
	z-index:5;
}

.course-spot-area .s-img {
	margin-bottom:1.5rem;
}

.course-spot-area .s-txt {
	margin-bottom:1.5rem;
}

.course-spot-1col .s-img img {
	width:48%;
}

.course-spot-1col .s-img img:first-child {
	margin-right:3%;
}

.course-spot-1col .s-txt {
	float:left;
	width:48.5%;
}

.course-spot-1col .s-data {
	float:right;
	width:48.5%;
}

/* btn-planmore */
.btn-planmore{
	margin:50px 0;
	text-align:center;
}
.btn-planmore a{
	color:#000;
	font-size:2rem;
	text-decoration:none;
	display:inline-block;
	vertical-align: middle;
	padding:5px 30px;
	border:#000 solid 2px;
}
.btn-planmore a:after{
	content:"\f0da";
	font-family:fontawesome;
	margin-left:2rem;
}
.btn-planmore a:hover{
	background:#000;
	color:#FFF;
}

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


/* ttl-main-area */

.ttl-main-area {
	margin-bottom:0;
}

.img-main {
	margin-bottom:2rem;
}

.img-ttl-main {
	width:330px;
	height:288px;
	margin-left:-165px;
	margin-top:-144px;
}

.ttl-main {
	font-size:1.5rem;
}

.ttl-main span{
	padding:2rem 0 0;
	font-size:1.3rem;
}

.ttl-main br {
	display:none
}


/* sentence 共通部分 */

.s-ttl {
	margin-bottom:1.5rem;
	width: 100%;
	margin-top: 0;
}

.s-ttl img{
	max-width:60%;
}

.s-contents-area {
	padding-top: 2rem;
}


/* sentence-areaL */

.sentence-areaL .s-ttl img{
	text-align:left;
	float:left;
}

.sentence-areaL .s-ttl-img {
	position:absolute;
	top:-30px;
	right:10px;
	text-align:right;
}

.sentence-areaL .s-ttl-img img {
	max-width:75%;
}


/* sentence-areaR */

.sentence-areaR .s-ttl img {
	text-align:right;
	float:right;
}

.sentence-areaR .s-ttl-img {
	position:absolute;
	top:-30px;
	left:10px;
}

.sentence-areaR .s-ttl-img img {
	max-width:75%;
}

.sentence-areaR .s-txt-img img {
	max-width:75%;
}

}


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


.modelcourse {
	margin-bottom:60px;
}

/* ttl-main-area */

.img-main {
	margin-bottom:1rem;
}

.img-ttl-main {
	width:165px;
	height:144px;
	margin-left:-82.5px;
	margin-top:-68px;
}

.ttl-main {
	font-size:1.3rem;
	text-align:left;
	width:90%;
	margin:0 auto;
}
.ttl-main span{
	padding:1rem 0 0;
	font-size:1.2rem;
}


/* sentence 共通部分 */


.s-ttl img{
	width:80%;
	max-width:320px;
}


.s-contents-area {
	width:100%;
}

.s-txt {
	margin-bottom:2rem;
}

.s-img {
	width:80%;
	margin:1.5rem auto 0;
	text-align:center;
}

.s-img-area {
	width:100%;
}

/* sentence-areaL */


.sentence-areaL .s-ttl-img {
	top:-10px;
}

.sentence-areaL .s-ttl-img img {
	max-width:50%;
}


/* sentence-areaR */


.sentence-areaR .s-ttl-img {
	top:-10px;
}

.sentence-areaR .s-ttl-img img {
	max-width:50%;
}

.sentence-areaR .s-txt-img img {
	max-width:50%;
}

/* move-area */

.move-area {
	height:120px;
}

.move-area .move-time {
	font-size:1.2rem;
	margin-top: -2.5rem;
}

.move-area .move-time img{
	margin:-1rem 0 0 2rem;
	width:25px;
	height:auto;
}

.move-area .move-time span{
	padding:1rem 1.5rem;
	border-width: 6px 6px 6px 6px;
}


/* course-spot-area */

.course-spot-area {
	margin:6rem 0;	
}

.course-spot-2col {
	margin-bottom:0;
}

.course-spot-left {
	float: none;
	width:100%;
	margin-bottom:6rem;
}

.course-spot-right {
	float: none;
	width:100%;
	margin-bottom:6rem;
}

.course-spot-area .s-ttl img {
	max-width:60%;
}

.course-spot-area .s-img {
	margin-bottom:1rem;
	width:100%;
}

.course-spot-area .s-txt {
	margin-bottom:1rem;
}

.course-spot-1col .s-img img {
	width:100%;
	
}
.course-spot-1col .s-img img:first-child {
	margin-right:0;
}

.course-spot-1col .s-txt {
	float: none;
	width:100%;
}

.course-spot-1col .s-data {
	float: none;
	width:100%;
}

.btn-planmore a{
	font-size:1.5rem;
}


}