/* CSS Document */
/*----- last up date 20180321 -----*/

header nav > ul > li > form{
	padding:8px 4px;
	}

#main,
#content{width:100%; margin-top:0; padding-bottom:0;}

.sbi_header_text,
.postWrap #headline h3 img{display:none;}
	
/*--------------------------------------*/
/*--------　リニューアルページ用　------*/
/*--------------------------------------*/

/*--------　共通部分　------*/


header {
	width: 100%;
	height: 90px;
	position: absolute;
	z-index: 9999;
	background-color: rgba(00,00,00,0.4);
	top: 0;
	left: 0;
}

#page .site-content{padding-top:95px;}

#mainCont{box-sizing:border-box; color:#000;}

#mainCont{width:100%; margin:0; padding:0; position:relative;}
#mainCont section{width:100%; margin:0 auto 4%; padding:0; padding:20px 40px; box-sizing:border-box;}


/*--------　モデルコースメインページ　------*/

#mainCont.modelcourseWrap {
	width: min(100% , 1200px);
	margin: auto;
	text-align: center;
}
#mainCont.modelcourseWrap h1 {
	display: inline-block;
	width: auto;
	margin: auto;
	border-bottom: #000 2px solid;
	border-left: none;
	color: #000;
	padding: 0;
	font-size: min(4vw , 40px);
	font-weight: 500;
	text-align: center;
}
#mainCont.modelcourseWrap p {
	font-size: min(3.5vw , 22px);
	margin: min(2vw , 20px) auto;
}
#mainCont.modelcourseWrap figure{}
#mainCont.modelcourseWrap figure img{}
#mainCont.modelcourseWrap div.modelcourseListWrap{}
#mainCont.modelcourseWrap div.modelcourseListWrap ul {
	width: 100%;
	justify-content: flex-start;
	gap: min(7vw , 70px) min(2vw , 20px);
	padding: min(4vw , 40px) 0 min(7vw , 70px);
}
#mainCont.modelcourseWrap div.modelcourseListWrap ul li {
	width: calc(calc(100% - min(2vw , 20px)) / 2);
}
#mainCont.modelcourseWrap div.modelcourseListWrap ul li a {
	display: block;
	width: 100%;
	height: 100%;
	padding: min(2vw , 20px);
	border-radius: min(1vw , 10px);
}
#mainCont.modelcourseWrap div.modelcourseListWrap ul li a:hover {
	background:#f3f3f3;
	}
#mainCont.modelcourseWrap div.modelcourseListWrap ul li a h2 {
	border-bottom: 1px solid #000;
	padding: min(1vw , 10px) min(20vw , 150px) min(1vw , 10px) min(10vw , 70px);
	font-size: min(4.5vw , 24px);
	position: relative;
	display: block;
	overflow: hidden;
	height: auto;
	color: #000;
	text-align: left;
	font-weight: 500;
}
#mainCont.modelcourseWrap div.modelcourseListWrap ul li h2::before {
	content: "";
	background: url(https://www.mitoyo-kanko.com/site/wp-content/themes/mitoyo2021/assets/images/lower/course_img_01.png) no-repeat center / 100%;
	width: min(8vw , 60px);
	height: min(8vw , 40px);
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	left: 0;
}
#mainCont.modelcourseWrap div.modelcourseListWrap ul li.recomend a h2::after {
	content: "おすすめ";
	font-family: 'Noto Sans JP', sans-serif;
	padding: min(.5vw , 6px) min(3vw , 20px);
	font-weight: normal;
	border-radius: 5px;
	font-size: min(3vw , 14px);
	background-color: #af0c25;
	color: #fff;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	height: min(5vw , 20px);
}
#mainCont.modelcourseWrap div.modelcourseListWrap ul li a p {
	font-size: min(3vw , 18px);
	text-align: left;
	padding: 0 min(2vw , 20px);
}
#mainCont.modelcourseWrap div.modelcourseListWrap ul li a figure {
	width: 100%;
	height: min(47vw , 300px);
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin: 0;
}
#mainCont.modelcourseWrap div.modelcourseListWrap ul li a figure img {
	width: 100%;
	height: auto;
	transition: .7s ease-out;
	transform: scale(1,1);
}
#mainCont.modelcourseWrap div.modelcourseListWrap ul li a:hover figure img {transform: scale(1.1,1.1);}



/*--------　モデルコース個別ページ　------*/

#mainCont.modelcourseWrap div.modelcourseSingleWrap{}
#mainCont.modelcourseWrap div.modelcourseSingleWrap h1 {text-align: left; width:100%;}
#mainCont.modelcourseWrap div.modelcourseSingleWrap h1 span {
	font-size: min(3vw , 18px);
	font-family: 'Noto Sans JP', sans-serif;
	padding: min(.5vw , 6px) min(3vw , 20px);
	font-weight: normal;
	border-radius: 5px;
	background-color: #333;
	color: #fff;
	margin-left: min(2vw , 20px);
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap h1 strong {
	display: block;
	text-align: center;
	font-size: min(4.5vw , 40px);
	margin-top: min(2vw , 10px);
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	width: 100%;
	padding: min(3vw , 30px) 0 min(3vw , 30px) min(7vw , 70px);
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul::before {
	content: "";
	width: min(.2vw , 2px);
	height: calc(100% - min(4vw , 40px));
	background: #333;
	position: absolute;
	top: min(2vw , 20px);
	left: min(3vw , 30px);
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li {
	width: 100%;
	position: relative;
	padding-top: min(6vw , 30px);
	justify-content: flex-start;
}

#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li.moveList {
	margin-bottom: min(7vw , 70px);
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li > span.time {
	background: #f3f3f3;
	padding: min(.3vw , 5px) min(3vw , 30px);
	border-radius: 100px;
	text-align: center;
	position: absolute;
	left: 0;
	top: 0;
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li > span.move {
	position: relative;
	left: -100px;
	bottom: 0;
	padding:min(2vw , 20px);
	width: auto;
	text-align: left;
	background: #f8f8f8;
	display: inline-block;
	box-shadow: 1px 1px 1px #333;
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li > span.move span{
	border: 1px #bbb solid;
	display: inline-block;
	padding: min(1vw , 10px);
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li > span.move::before {
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
	border-top: 10px solid #333333;
	border-bottom: 0;
	content: "";
	position: absolute;
	bottom:-10px;
	left: 51px;
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li > h2 {
	width: 100%;
	background: #f3f3f3;
	padding: min(2vw , 20px);
	margin-bottom: min(5vw , 50px);
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li > h2 + ul {
	width: 100%;
	display: flex;
	gap: min(3vw , 30px);
	justify-content: center;
	align-items: flex-start;
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li > h2 + ul li {
	width: min(40vw , 400px);
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li > h2 + ul li figure{
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	max-height: min(30vw , 300px);
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li > h2 + ul li figure img {
	width: 100%;
	height: auto;
	transition: .7s ease-out;
	transform: scale(1,1);
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li > h2 + ul li figure:hover img {transform: scale(1.1,1.1);}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li > h2 + ul.img1 li figure{width:100%;}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li > h2 + ul.img2 li figure{width: min(40vw , 400px);}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li > h2 + ul.img3 li figure{width: min(35vw , 350px);}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li dl {
	width: 100%;
	gap: min(1vw , 10px) min(4vw , 40px);
	justify-content: flex-start;
	align-items: flex-start;
	position: relative;
	z-index: 1;
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li dl dd {
	width: 100%;
	order: 1;
	margin-bottom: min(5vw , 50px);
	padding-top: min(1vw ,10px);
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li dl dt + dd {margin-bottom:0; width: calc(calc(100% - min(4vw , 40px)) - min(50vw , 500px));}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li dl dt.img2 + dd,
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li dl dt.img3 + dd{
	width: 100%;
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li dl dd h2 {
	width: 100%;
	text-align: left;
	font-size: min(3vw , 18px);
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li dl dd h2 strong {
	display: block;
	font-size: min(5vw , 30px);
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li dl dd p {
	text-align: left;
	padding: 0 min(3vw , 30px);
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li dl dd p strong{
	font-size: 120%;
	font-weight: 700;
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li dl dt {
	width: min(50vw , 500px);
	order: 2;
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li dl dt.img1{}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li dl dt.img2,
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li dl dt.img3{
	width: 100%;
	display: flex;
	gap: min(3vw , 30px);
	justify-content: center;
	align-items: flex-start;
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li.moveList dl dt.img2,
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li.moveList dl dt.img3{margin-bottom:min(5vw , 50px);}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li dl dt figure {
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	max-height: min(30vw , 300px);
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li dl dt figure img {
	width: 100%;
	height: auto;
	transition: .7s ease-out;
	transform: scale(1,1);
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li dl dt figure:hover img {transform: scale(1.1,1.1);}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li dl dt.img1 figure{width:100%;}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li dl dt.img2 figure {width: min(40vw , 400px);}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li dl dt.img3 figure {width: min(35vw , 350px);}


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

/*--------　モデルコースメインページ　------*/

#mainCont.modelcourseWrap h1 {
	margin: 7vw auto 3vw;
	font-size: min(5vw , 40px);
}

#mainCont.modelcourseWrap div.modelcourseListWrap ul li {
	width: 100%;
}


/*--------　モデルコース個別ページ　------*/
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li > h2 {
	width: 96%;
}

#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li dl dd {
	margin-bottom: 15vw;
}

#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li dl dt + dd {
	margin-bottom: 0;
	width: 96%;
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li dl dt.img1 {
	margin: auto;
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li dl dt.img2,
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li dl dt.img3 {
	width: 96%;
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li.moveList dl dt.img1,
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li.moveList dl dt.img2,
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li.moveList dl dt.img3 {
	margin: 0 auto 15vw;
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li > h2 + ul {
	width: 96%;
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li > h2 + ul.img2 li figure,
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li > h2 + ul.img3 li figure {
	width: auto;
}

#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li > span.move {
	left: -6vw;
	bottom: 5vw;
}
#mainCont.modelcourseWrap div.modelcourseSingleWrap > ul li > span.move::before {
	left: 0vw;
}


}