@charset "utf-8";


@media print, screen and (min-width: 751px) {
.mainImage 				{ background: url('../img/course/main-image_pc.jpg') 50% 0 no-repeat; background-size: cover; }

#main .titleArea 		{ height: 550px; display: -webkit-box; display: -ms-flexbox; display: flex; }
#main #in 				{ margin-top: 265px; }
#main #out .titleArea 	{ background: #018a2f; }
#main #in .titleArea 	{ background: #d65d12; }
#main #out .titleArea:before{ content: ''; width: 55.4%; height: 550px; background: url('../img/course/outcourse-image_pc.jpg') 50% 50% no-repeat; background-size: cover; display: block; }
#main #in .titleArea:before{ content: ''; width: 55.4%; height: 550px; background: url('../img/course/incourse-image_pc.jpg') 50% 50% no-repeat; background-size: cover; display: block; }
#main .titleArea div 	{ width: 44.6%; max-width: 380px; padding: 167px 3.4% 0 3.4%; color: #fff; }
#main .titleArea div h2{ margin-left: -10px; text-align: center; font-size: 1rem; font-weight: 400; letter-spacing: .1rem; }
#main .titleArea div h2:before{ content: ''; width: 100%; height: 15px; background: url('../img/course/diamond-icon.svg') 50% 0 no-repeat; display: block; }
#main .titleArea div h2 span{ margin-bottom: 10px; display: block; font-size: 3.9rem; letter-spacing: .1rem; }
#main .titleArea div p 	{ margin-top: 24px; padding-right: 5px; font-size: .86rem; font-weight: 400; text-align: justify; line-height: 2.2; }

#main .hole .box 		{  }
#main .hole .box:first-of-type{ margin-top: 100px; }
#main .hole .box:nth-of-type(n+2){ margin-top: 73px; }
#main .hole .box h3 	{ padding: 0 3px 15px; font-size: .8rem; font-weight: 400; border-bottom: 1px solid #e5e5e5; }
#main .hole .box h3:before{ content: '◆'; margin-right: 10px; font-size: .9rem; vertical-align: 3px; }
#main .hole .box h3 .serif{ font-size: 1.3rem; letter-spacing: .2rem; font-weight: 700; }
#main .hole .box h3 .number{ margin: 0 6px 0 2px; font-size: 2.9rem; font-weight: 500; }
#main .hole .box h3 .par{ width: 112px; height: 30px; margin-top: 14px; display: inline-block; line-height: 30px; color: #fff; font-size: .9rem; letter-spacing: .1rem; text-align: center; float: right; }
#main #out .hole .box h3 .par{ background: #008a2f; }
#main #in .hole .box h3 .par{ background: #d65d12; }
#main #out .hole .box h3{ color: #008a2f; }
#main #in .hole .box h3{ color: #d65d12; }
#main .hole .box .flex 	{ margin-top: 43px; display: -webkit-box; display: -ms-flexbox; display: flex; }
#main .hole .box .flex>div:nth-of-type(1){ width: 50%; }
#main .hole .box .flex>div:nth-of-type(2){ width: 45%; margin-left: auto; }
#main .hole .box .flex>div .slider-nav{ margin-top: 10px; }
#main .hole .box .flex>div .slider-nav .slick-slide{ width: 24%!important; margin-right: 1.33%; }
#main .hole .box .flex>div .slider-nav .slick-slide:nth-of-type(n+4){ margin-right: 0; }
#main .hole .box .flex>div .slider-nav .slick-list{ padding: 0!important; }
#main .hole .box .flex>div .slider-nav .slick-list .slick-track{ width: 100%!important; -webkit-transform: translate3d(0, 0, 0)!important; transform: translate3d(0, 0, 0)!important; }
#main .hole .box .flex>div:nth-of-type(2) p{ margin-top: 10px; line-height: 1.5 }
#main .hole .box .flex>div:nth-of-type(2) .illust{ margin-top: 45px; }
#main .hole .box .flex>div:nth-of-type(2) dl{ margin-top: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; }
#main .hole .box .flex>div:nth-of-type(2) dl div{ width: 25%; text-align: center; font-size: .9rem; border: 1px solid #ccc; border-right: 0; }
#main .hole .box .flex>div:nth-of-type(2) dl div:last-of-type{ border-right: 1px solid #ccc; }
#main .hole .box .flex>div:nth-of-type(2) dl div dt{ padding: 8px 0; color: #fff; }
#main .hole .box .flex>div:nth-of-type(2) dl div:nth-of-type(1) dt{ background-color: #000; }
#main .hole .box .flex>div:nth-of-type(2) dl div:nth-of-type(2) dt{ background-color: #0074b2; }
#main .hole .box .flex>div:nth-of-type(2) dl div:nth-of-type(3) dt{ background-color: #fff; color: #000; border-bottom: 1px solid #ccc; }
#main .hole .box .flex>div:nth-of-type(2) dl div:nth-of-type(4) dt{ background-color: #ff0000; }
#main .hole .box .flex>div:nth-of-type(2) dl div dd{ padding: 8px 0; }
}


@media screen and (max-width: 1100px) and (min-width: 751px) {
}


@media screen and (max-width: 750px) {
.mainImage 				{ background: url('../img/course/main-image_sp.jpg') 50% 0 no-repeat; background-size: cover; }

#main .titleArea 		{  }
#main #in 				{ margin-top: 70px; }
#main #out .titleArea 	{ background: #018a2f; margin-top: 30px;}
#main #in .titleArea 	{ background: #d65d12; }
#main #out .titleArea:before{ content: ''; height: 200px; background: url('../img/course/outcourse-image_sp.jpg') 50% 50% no-repeat; background-size: cover; display: block; }
#main #in .titleArea:before{ content: ''; height: 200px; background: url('../img/course/incourse-image_sp.jpg') 50% 50% no-repeat; background-size: cover; display: block; }
#main .titleArea div 	{ padding: 35px 5% 30px; color: #fff; }
#main .titleArea div h2{ text-align: center; font-size: .75rem; font-weight: 400; letter-spacing: .1rem; }
#main .titleArea div h2:before{ content: ''; width: 100%; height: 15px; background: url('../img/course/diamond-icon.svg') 50% 0 no-repeat; display: block; background-size: 8px; }
#main .titleArea div h2 span{ margin-bottom: 8px; display: block; font-size: 2.8rem; letter-spacing: .1rem; }
#main .titleArea div p 	{ margin-top: 20px; font-size: 1rem; font-weight: 400; text-align: justify; line-height: 2.2; }

#main .hole .box 		{  }
#main .hole .box:first-of-type{ margin-top: 45px; }
#main .hole .box:nth-of-type(n+2){ margin-top: 35px; }
#main .hole .box h3 	{ padding: 0 3px 12px; font-size: .8rem; font-weight: 400; border-bottom: 1px solid #e5e5e5; }
#main .hole .box h3:before{ content: '◆'; margin-right: 8px; font-size: .9rem; vertical-align: 3px; }
#main .hole .box h3 .serif{ font-size: 1.2rem; letter-spacing: .2rem; font-weight: 700; }
#main .hole .box h3 .number{ margin: 0 4px 0 2px; font-size: 2.5rem; font-weight: 500; }
#main .hole .box h3 .par{ width: 84px; height: 23px; margin-top: 14px; display: inline-block; line-height: 23px; color: #fff; font-size: .8rem; letter-spacing: .1rem; text-align: center; float: right; }
#main #out .hole .box h3 .par{ background: #008a2f; }
#main #in .hole .box h3 .par{ background: #d65d12; }
#main #out .hole .box h3{ color: #008a2f; }
#main #in .hole .box h3{ color: #d65d12; }
#main .hole .box .flex 	{ margin-top: 43px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
#main .hole .box .flex>div:nth-of-type(1){  }
#main .hole .box .flex>div:nth-of-type(2){  }
#main .hole .box .flex>div .slider-nav{ margin-top: 5px; }
#main .hole .box .flex>div .slider-nav .slick-slide{ width: 24%!important; margin-right: 1.33%; }
#main .hole .box .flex>div .slider-nav .slick-slide:nth-of-type(n+4){ margin-right: 0; }
#main .hole .box .flex>div .slider-nav .slick-list{ padding: 0!important; }
#main .hole .box .flex>div .slider-nav .slick-list .slick-track{ width: 100%!important; -webkit-transform: translate3d(0, 0, 0)!important; transform: translate3d(0, 0, 0)!important; }
#main .hole .box .flex>div:nth-of-type(2) p{ margin-top: 30px; font-size: 1rem; line-height: 1.5; }
#main .hole .box .flex>div:nth-of-type(2) .illust{ margin-top: 15px; }
#main .hole .box .flex>div:nth-of-type(2) dl{ margin-top: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; }
#main .hole .box .flex>div:nth-of-type(2) dl div{ width: 25%; text-align: center; font-size: .9rem; font-weight: 400; border: 1px solid #ccc; border-right: 0; }
#main .hole .box .flex>div:nth-of-type(2) dl div:last-of-type{ border-right: 1px solid #ccc; }
#main .hole .box .flex>div:nth-of-type(2) dl div dt{ padding: 8px 0; color: #fff; }
#main .hole .box .flex>div:nth-of-type(2) dl div:nth-of-type(1) dt{ background-color: #000; }
#main .hole .box .flex>div:nth-of-type(2) dl div:nth-of-type(2) dt{ background-color: #0074b2; }
#main .hole .box .flex>div:nth-of-type(2) dl div:nth-of-type(3) dt{ background-color: #fff; color: #000; border-bottom: 1px solid #ccc; }
#main .hole .box .flex>div:nth-of-type(2) dl div:nth-of-type(4) dt{ background-color: #ff0000; }
#main .hole .box .flex>div:nth-of-type(2) dl div dd{ padding: 8px 0; }
}