@charset "utf-8";

h3{position: relative; text-align: center;}
h3 span{font-size:41px;font-family: 'Noto-Sans-JP-Bold'; color: #000;display: inline-block; position: relative; z-index: 1;line-height: 134%;}


.inner_2{width: min(90%, 1100px); margin: 0 auto;}
.inner_3{width: min(90%, 1200px); margin: 0 auto;}

/* ----------------------------- #course ------------------------------- */
#course{background: url(../../images/index/course_bg_1.jpg?var=1231) no-repeat center center; background-size: cover; overflow: hidden; padding: 0 0 92px;}
#course h3{position: relative; padding: 133px 0 0;background: url(../../images/index/logo_3.svg) no-repeat center top; background-size: 892px; }
#course h3 img{position: absolute; top: 0px; transform: translateX(-50%); left: 50%; display: block;}
#course .link_box{position: relative; padding: 36px 0 0px;}
#course .link_box:before{content: ""; display: block; background: url(../../images/index/course_bg_2.png?var=1231) no-repeat center center; background-size: cover; width: 108px; height: 277px; position: absolute; left: -52px; top: -20px;}
#course .link_box:after{content: ""; display: block; background: url(../../images/index/course_bg_2.png?var=1231) no-repeat center center; background-size: cover; width:108px; height: 277px; position: absolute; right: 100px; bottom: -7px;}
#course .link_box .flex{flex-wrap: wrap; justify-content: center;position: relative;}
#course .link_box .flex:before{content: ""; display: block; background: url(../../images/index/course_bg_3.png?var=1231) no-repeat center center; background-size: cover; width: 89px; height: 210px; position: absolute; left: -51px; top: -205px;}
#course .link_box .flex .box{width: 280px; height: auto; position: relative; margin-bottom: 26px;position: relative;z-index: 1;}
#course .link_box .flex .box .text_box{position: relative;background: #fff; padding: 0 25px 28px 22px; height: 265px;}
#course .link_box .flex .box .text_box .baner{background: url(../../images/index/course_bg_4.jpg?var=1231) no-repeat left center; background-size: cover;clip-path: polygon(0% 0, 95% 0%, 100% 100%, 0% 100%); color: #fff;font-family: 'Noto-Sans-JP-Bold'; font-size: 18px; padding: 0 15px 3px 15px; position: absolute; top: -20px;    left: -7%;}
#course .link_box .flex .box .text_box .baner span{font-family: 'Noto-Sans-JP-Bold'; font-size: 23px; line-height: 160%;}
#course .link_box .flex .box .text_box h4{font-size: 20px; line-height: 150%;font-family: 'Noto-Sans-JP-Bold'; text-align: center;}
#course .link_box .flex .box .text_box h4.one_lines{padding: 50px 0 26px;}
#course .link_box .flex .box .text_box h4.two_lines{padding: 36px 0 12px;}
#course .link_box .flex .box .text_box p.text{font-size: 14px; line-height: 150%;font-family: 'Noto-Sans-JP-Regular'; }
#course .link_box .flex .box .text_box a{ text-align: center; width: 167px; height: auto; margin: 20px auto 0; display: block; border-radius: 100px; border: 1px solid #000; padding: 10px 0 12px; position: absolute; transform: translateX(-50%); left: 50%; bottom: 28px; background: #fff;transition: 0.5s;}
#course .link_box .flex .box .text_box a.thumb-hover{ transition: 0.5s; color: #fff;}
#course .link_box .flex .box .text_box a:before{content: ""; display: block; height: 100%; width: 100%;background: url(../../images/index/course_bg_4.jpg?var=1231) no-repeat center left; background-size: cover; opacity: 0; transition: 0.5s; position: absolute; left: 0px; top: 0px;border-radius: 100px;}
#course .link_box .flex .box .text_box a.thumb-hover:before{ opacity: 1; transition: 0.5s;}
#course .link_box .flex .box .text_box a span{font-size: 14px; line-height: 150%;font-family: 'Noto-Sans-JP-Regular'; width: 100%; height: auto; display: block; position: relative; z-index: 1; }
#course .link_box .flex .box .text_box a span:before{content: ""; display: block; width: 22px; height: 10px; background: url(../../images/index/course_icn_1.svg) no-repeat right center; background-size: 100%; position: absolute; top: 45%; transform: translateY(-50%); right: 15px;opacity: 1; transition: 0.5s;}
#course .link_box .flex .box .text_box a span:after{content: ""; display: block; width: 22px; height: 10px; background: url(../../images/index/course_icn_2.svg) no-repeat right center; background-size: 100%; position: absolute; top: 45%; transform: translateY(-50%); right: 15px;opacity: 0; transition: 0.5s;}
#course .link_box .flex .box .text_box a.thumb-hover span:before{opacity: 0; transition: 0.5s;}
#course .link_box .flex .box .text_box a.thumb-hover span:after{opacity: 1; transition: 0.5s;}


@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

	/* ----------------------------- #course ------------------------------- */
	#course .link_box {padding:36px 50px 0px;}
	#course .link_box .flex .box { width: 255px;}
	#course .link_box .flex .box .text_box .baner { font-size: 15px; padding:0 15px 3px 15px;}
	#course .link_box .flex .box .text_box .baner span { font-size: 20px;}
	#course .link_box .flex .box .text_box h4 {  font-size: 17px;}
}

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

	/* ----------------------------- #course ------------------------------- */
	#course{background: url(../../images/index/course_bg_1_sp.jpg?var=1231) no-repeat center center; background-size: cover; padding: 0 0 44px;}
	#course h3{padding: 13% 0 0;background: url(../../images/index/logo_3.svg) no-repeat center top;  background-size: 97%;}
	#course h3 span{width: 90%; margin: 0 auto; font-size: 25px;}
	#course .link_box{position: relative; padding: 36px 0 0px;}
	#course .link_box:before{ background: url(../../images/index/course_bg_2.png?var=1231) no-repeat center center; background-size: cover; width: 106px; height: 275px; left: -55px; top: -44px;}
	#course .link_box:after{ background: url(../../images/index/course_bg_2.png?var=1231) no-repeat center center; background-size: cover; width: 106px; height: 275px; right: -10px; bottom: -13px;}
	#course .link_box .flex{flex-wrap: wrap; justify-content: center;position: relative;}
	#course .link_box .flex:before{ background: url(../../images/index/course_bg_3.png?var=1231) no-repeat center center; background-size: cover; width: 57px; height: 134px; left: auto; top: -55px; right: -30px;}
	#course .link_box .flex .box{width: 100%; height: auto;  margin-bottom: 30px;}
	#course .link_box .flex .box:not(:nth-child(4),:nth-child(7)){margin-right: 0px;}
	#course .link_box .flex .box .text_box{padding: 0 25px 28px 22px; height: auto;}
	#course .link_box .flex .box .text_box .baner{ padding: 0 15px 3px 15px;top: -20px; left: -3%;}
	#course .link_box .flex .box .text_box h4.one_lines{padding: 57px 0 34px;}
	#course .link_box .flex .box .text_box h4.two_lines{padding: 43px 0 20px;}
	#course .link_box .flex .box:nth-child(4) .text_box h4,
	#course .link_box .flex .box:nth-child(7) .text_box h4{padding: 57px 0 34px;}
	#course .link_box .flex .box .text_box a{ position: relative; transform: none; margin: 20px auto 0; padding: 10px 0 12px; bottom: auto; left: auto;}
}