@charset "utf-8";

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

course

=================================*/
.title { background-color:#fff; }
.title:before { content:none; }
.title h2 { padding:45px 0 60px; }
.title h2:after,
.title h2:before { bottom:30px; }

#container #main { /*margin-top:-175px;*/ }

#second_main_visual { position:relative; }
#second_main_visual img { object-position:center top; }
#second_main_visual:before { background-image:url(../img/course/t_course.png); background-size:210px 92px; background-position:top center;  content:" "; height:92px; position:absolute; top:30%; margin-top:0; left:15%; width:210px; z-index:10; }

#course { background-color:#fff; display:flex; flex:0 0 100%; flex-wrap:wrap; justify-content:center; padding:0; position:relative; }
#course #course_cont { background-color:#fff; flex:0 0 100%; padding:30px 50px 50px; z-index:auto; }
#course #course_cont .lead { margin-bottom:30px; text-align:center; }
#course #course_cont .lead span { line-height:1.6; }

#course #course_cont > ul { display:flex; flex-wrap:wrap; }
#course #course_cont > ul > li { display:flex; flex:0 1 100%; flex-wrap:wrap; justify-content:center; margin-top:40px; padding:50px 30px 30px; position:relative; }
#course #course_cont > ul > li:after { background:linear-gradient(90deg, rgba(107,239,213,0.1) 0%, rgba(39,127,175,0.1) 50%, rgba(4,69,155,0.1) 100%); content:" ";  top:0; right:0; height:50%; position:absolute; width:100%; z-index:1; }

#course #course_cont > ul > li:first-child { margin-top:0; }
#course #course_cont > ul > li .cont { display:flex; flex:0 1 1180px; justify-content:space-between; position:relative; }

#course #course_cont > ul > li .cont .detail { background:#fff; flex:0 0 70%; padding:40px 250px 30px 50px; position:relative; }
#course #course_cont > ul > li .cont .detail:before { background:#fff; content:" ";  height:100%; position:absolute; width:100%; right:0; bottom:0; z-index:2; }
#course #course_cont > ul > li .cont .detail:after { background:linear-gradient(90deg, rgba(107,239,213,0.1) 0%, rgba(39,127,175,0.1) 50%, rgba(4,69,155,0.1) 100%); content:" ";  height:100%; position:absolute; width:100%; right:-20px; bottom:-20px; z-index:-2; }
#course #course_cont > ul > li .cont .detail .caption { position:absolute; top:-18px; left:50px; z-index:2; }
#course #course_cont > ul > li .cont .detail .caption span { font-size:300%; font-weight:600; font-family:Roboto; line-height:1; }
#course #course_cont > ul > li .cont .detail h4 { align-items:center; display:flex; justify-content:space-between; position:relative; z-index:2; }
#course #course_cont > ul > li .cont .detail h4 span:first-child { font-size:232%; font-weight:600; line-height:1.6; }
#course #course_cont > ul > li .cont .detail h4 span:nth-child(2) {}
#course #course_cont > ul > li .cont .detail h4 span:nth-child(2) i { font-size:93%; padding-right:5px; }
#course #course_cont > ul > li .cont .detail > p { margin-top:20px; position:relative; z-index:2; }
#course #course_cont > ul > li .cont .detail > p > span { font-size:116%; line-height:1.8; }

#course #course_cont > ul > li .cont .detail ul.btn_area { display:flex; justify-content:start; margin-top:30px; position:relative; z-index:2; }
#course #course_cont > ul > li .cont .detail ul.btn_area li { overflow:hidden; position:relative; }
#course #course_cont > ul > li .cont .detail ul.btn_area li a { background:transparent; border:1px solid #ccc; border-radius:0; display:inline-block; justify-content:space-between; line-height:1; padding:20px 15px 20px 25px; position:relative; transition: all .5s; }
#course #course_cont > ul > li .cont .detail ul.btn_area li a span { padding:0 35px; }
#course #course_cont > ul > li .cont .detail ul.btn_area li a i:nth-child(3) { color:#ccc; font-size:85%; }
#course #course_cont > ul > li .cont .detail .notice { margin-top:30px; }
#course #course_cont > ul > li .cont .detail .notice span { color:#cc0000; font-size:100%; }

#course #course_cont > ul > li .pic { height:330px; flex:0 1 600px; margin-left:-200px; position:relative; top:30px; z-index:3; }
#course #course_cont > ul > li .pic img { height:300px; object-fit:cover; position:absolute; width:500px; opacity:0; -webkit-transition:opacity 3s; transition: opacity 3s; }
#course #course_cont > ul > li .pic img.lazyloaded { opacity:1; }
#course #course_cont > ul > li .pic span { position:absolute; right:150px; top:360px; z-index:2; }
#course #course_cont > ul > li .pic span img { height:80px; width:auto; }

#course #course_cont > ul > li .price { flex:0 0 100%; margin-top:20px; position:relative; z-index:2; }
#course #course_cont > ul > li .price p { padding:25px; }
#course #course_cont > ul > li .price p span { color:#fff; font-size:125%; font-weight:600; }
#course #course_cont > ul > li .price ul { background-color:#fff; border-top:1px solid #ddd; border-left:1px solid #ddd; flex:0 0 100%; padding:0; }
#course #course_cont > ul > li .price ul li { border-right:1px solid #ddd; border-bottom:1px solid #ddd; }
#course #course_cont > ul > li .price ul li dl { display:flex; }
#course #course_cont > ul > li .price ul li dl dt { border-right:1px solid #ddd; flex:0 0 50%; text-align:center; }
#course #course_cont > ul > li .price ul li dl dt span { display:block;  font-size:108%; padding:25px; }
#course #course_cont > ul > li .price ul li dl dd { align-items:center; align-content:center; display:flex; flex:0 0 50%; justify-content:center; text-align:center; }
#course #course_cont > ul > li .price ul li dl dd span { display:block; font-size:108%; padding:15px 15px; }
#course #course_cont > ul > li .price ul li dl dd span u { font-size:85%; padding-left:3px; text-decoration:none; }

#course #course_cont > ul > li .notice { flex:0 0 100%; margin-top:15px; padding:0; text-align:left; }
#course #course_cont > ul > li .notice span { color:#c00; }