@charset "utf-8";
.green                    { background-color: #008a2f; color: #fff; }
.gray                     { background-color: #dcd8cf; color: #000; }
.y_green                  { background-color: #e7eea8; color: #008a2f; }
.navy                     { background-color: #1861ae; color: #fff; }
.orange                   { background-color: #c8632b; color: #fff; }
.y_orange                 { background-color: #ece5d8; color: #b69400; }
.gray_s                   { background-color: #F5F5F5; color: #000; }
.pink                     { background-color: #FFE5F7; color: #000; }
.blue                     { background-color: #D1EEF9; color: #000; }

@media print, screen and (min-width: 751px) {
.mainImage 				  { background: url('../img/course/main-image_pc.jpg') 50% 0 no-repeat; background-size: cover; }
#course_info              { padding-top: 0px; margin: 0 auto 0; text-align: center; overflow: hidden; }
#course_info .titleArea 		  { height: 550px; display: -webkit-box; display: -ms-flexbox; display: flex; }
#course_info .course_map         { width:100%; background:#dcd8cf; padding:45px 0; text-align:center; overflow:hidden; }
#course_info .out_course         { width:1000px; margin:100px auto 0; }
#course_info .out_course .concept{ height:360px; background: url(../img/course_info/out.jpg);  padding:35px 0; text-align:center; overflow:hidden;}
#course_info .table              { width: 100%; margin-top: 20px; margin-left:1% }
#course_info .table a            { text-decoration: underline; }
#course_info .table dl           { width: 14%; float: left; }
#course_info .table dl dt        { padding: 12px 0; text-align: center; border: 1px solid #b3b3b3; }
#course_info .table dl dd        { margin-left: 0; padding: 12px 0; text-align: center; border: 1px solid #b3b3b3; border-top: 0; }
#course_info .btn_green          { width: 450px; height:72px; margin:50px auto; }
#course_info .btn_green a        { padding: 25px 0; display: block; text-align: center; font-size: 1rem; font-weight: normal; color: #fff; background: #008a2f url('../img/common/arrow.svg') 92% 50% no-repeat; background-size: 6px;}
#course_info .btn_orange         { width: 450px; height:72px; margin:50px auto; }
#course_info .btn_orange a       { padding: 25px 0; display: block; text-align: center; font-size: 1rem; font-weight: normal; color: #fff; background: #c8632b url('../img/common/arrow.svg') 92% 50% no-repeat; background-size: 6px;}
#course_info .in_course          { width:1000px; margin:100px auto 0; }
#course_info .in_course .concept { height:360px; background: url(../img/course_info/in.jpg);  padding:35px 0; text-align:center; overflow:hidden;}
#course_info .course_rate        { width:1000px; margin:100px auto 0; }

#course_info .course_rate table    { border-collapse: collapse; width: 100%; margin: 10px auto; line-height: 1.6; }
#course_info .course_rate table th { color: #000000; border: solid 1px #b3b3b3; width: 25%; padding: 15px 5px; background-color: #DCD8CF; }
#course_info .course_rate table th .bent { width:25% }
#course_info .course_rate table td { width:25%; border: solid 1px #b3b3b3; padding: 15px 5px; text-align: center; vertical-align: middle; }
#course_info .course_rate table td.grey { background: #f1ede9; color: #00891b; }

#course_info .title { font-size: 42px; color: #018a2f; margin: 80px auto 15px; }
#course_info .title:before { content: ''; width: 100%; height: 15px; background: url("../img/common/diamond-icon-green.svg") 50% 0 no-repeat; display: block; }
#course_info .sub { color: #018a2f; font-size: 14px; margin-bottom: 40px; }
#course_info h3 { text-align: left; padding: 0 3px 15px; font-size: 22px; border-bottom: 2px solid #008a1b; margin: 40px auto 20px; }
#course_info h3:before { color: #008a1b; content: '◆'; margin-right: 10px; font-size: .9rem; vertical-align: 3px; }
}


@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; }
#course_info              { width:100%; margin: 0 auto 0; text-align: center; overflow: hidden; }
#course_info .titleArea 		  {  }
#course_info .course_map         { width:100%; background:#dcd8cf; padding:3% 3%; text-align:center; overflow:hidden; }
#course_info .out_course         { width:100%; margin:10% auto 0; }
#course_info .out_course .concept{ height:360px; background: url(../img/course_info/out.jpg);  padding:5% 0; text-align:center; overflow:hidden;}
#course_info .in_course .concept { height:360px; background: url(../img/course_info/in.jpg);  padding:5% 0; text-align:center; overflow:hidden;}
#course_info .table              { width: 100%; margin-top: 20px; margin-left:1%; }
#course_info .table a            { text-decoration: underline; }
#course_info .table dl           { width: 14%; margin: 0; float: left; }
#course_info .table dl dt        { width: 14%; height:60px; display: table-cell; vertical-align: middle; padding: 0 0; text-align: center; border: 1px solid #b3b3b3; }
#course_info .table dl dd        { margin-left: 0; padding: 15px 0; text-align: center; border: 1px solid #b3b3b3; border-top: 0; }
#course_info .btn_green          { width: 90%; height:72px; margin:5% auto; }
#course_info .btn_green a        { padding: 25px 0; display: block; text-align: center; font-size: 1rem; font-weight: normal; color: #fff; background: #008a2f url('../img/common/arrow.svg') 92% 50% no-repeat; background-size: 6px;}
#course_info .btn_orange         { width: 90%; height:72px; margin:5% auto; }
#course_info .btn_orange a       { padding: 25px 0; display: block; text-align: center; font-size: 1rem; font-weight: normal; color: #fff; background: #c8632b url('../img/common/arrow.svg') 92% 50% no-repeat; background-size: 6px;}
#course_info .in_course          { width:100%; margin:10% auto 0; }
#course_info .course_rate        {  width:100%; margin:20% auto 0; padding: 15px; }
#course_info .course_rate table { border-collapse: collapse; width: 100%; margin: 10px auto; line-height: 1.6; }
#course_info .course_rate table th { color: #000000; border: solid 1px #b3b3b3; width: 25%; padding: 15px 5px; background-color: #DCD8CF; }
#course_info .course_rate table th .bent { width:25% }
#course_info .course_rate table td { width:25%; border: solid 1px #b3b3b3; padding: 15px 5px; text-align: center; vertical-align: middle; }
#course_info .course_rate table td.grey { background: #f1ede9; color: #00891b; }

#course_info .title { font-size: 42px; color: #018a2f; margin: 30px auto 15px; }
#course_info .title:before { content: ''; width: 100%; height: 15px; background: url("../img/common/diamond-icon-green.svg") 50% 0 no-repeat; display: block; }
#course_info .sub { color: #018a2f; font-size: 14px; margin-bottom: 20px; }

#course_info h3 { text-align: left; padding: 0 3px 15px; font-size: 22px; border-bottom: 2px solid #008a1b; margin: 30px auto 20px; }
#course_info h3:before { color: #008a1b; content: '◆'; margin-right: 10px; font-size: .9rem; vertical-align: 3px; }
}