@charset "utf-8";

/*---------------------------------------------------------------------------------------
	/reason
----------------------------------------------------------------------------------------*/

.lower-main figure.reason-main{ background: url("../common/img/reason-main.png") left bottom / cover no-repeat;}
.reason1{ padding-top: 70px; padding-bottom: 50px; position: relative;}
.reason1:before{ display: inline-block; content: ""; position: absolute; right: 15%; top: 50px; width: 159px; height: 102px; background: url(../common/img/courseDetail5-bg3.png) center top / contain no-repeat;}
.reason1 article{ margin-bottom: 100px; position: relative;}
.reason1 article:before{ display: block; content: ""; position: absolute; left: 0; top: 420px; width: calc(100% - 80px); height: calc(100% - 420px); background: url("../common/img/bg-grid2.png") center / 11px auto repeat; border-radius: 0 0 200px 0; z-index: -1;}
.reason1 article:after{ display: block; content: ""; position: absolute; left: 0; top: 150px; width: 157px; height: 658px; background: url("../common/img/reason1-bg1.png") center / 100% auto no-repeat;}
.reason1 article:nth-child(2n):before{ left: auto; right: 0; border-radius: 0 0 0 200px;}
.reason1 article:nth-child(2n):after{ left: auto; right: 0; background: url("../common/img/reason1-bg2.png") center / 100% auto no-repeat;}
.reason1 article .box1{ position: relative; margin-bottom: 60px;}
.reason1 article .box1 .wrap{ height: 475px;}
.reason1 article .box1 .wrap div{ position: relative; text-align: left; z-index: 1; padding-top: 50px;}
.reason1 article .box1 .wrap div .rno{ line-height: 1;}
.reason1 article .box1 .wrap div .rno small{ display: inline-block; vertical-align: middle; font-size: 3.2rem; letter-spacing: .1em; margin-right: .5em;}
.reason1 article .box1 .wrap div .rno span{ display: inline-block; vertical-align: middle; font-size: 13.3rem;}
.reason1 article .box1 .wrap div .catch{ font-size: 2rem; font-weight: bold; margin-bottom: .5em;}
.reason1 article .box1 .wrap div h2{ font-size: 4.8rem; font-weight: bold; line-height: 1.3; letter-spacing: .1em;}
.reason1 article .box1 .wrap figure{ position: absolute; right: 0; top: 0; width: 706px;}
.reason1 article:nth-child(2n) .box1 .wrap div{ margin-left: 60%;}
.reason1 article:nth-child(2n) .box1 .wrap figure{ right: auto; left: 0;}
.reason1 article .box2{ margin-bottom: 50px;}
.reason1 article .box2.col2{ display: flex; justify-content: space-between;}
.reason1 article .box2 dl{ text-align: left; font-size: 1.6rem; line-height: 1.8;}
.reason1 article .box2.col2 dl{ width: 46%;}
.reason1 article .box2 dl dt{ display: inline-block; margin-bottom: 1em; padding: .2em .5em .3em; font-size: 2.6rem; font-weight: bold; line-height: 1.2; background: #fff; position: relative;}
.reason1 article .box2 dl dt:before{ display: inline-block; content: ""; position: absolute; left: 0; top: 0; width: 9px; height: 9px; background: #E65656;}
.reason1 article .box2 dl dd img{ float: right; margin: 0 0 80px 20px; width: 80px;}
.reason1 article .box3{ max-width: 835px; margin: 0 auto 50px; padding: 40px 35px; display: flex; justify-content: space-between; background: #E2E2E2; border-radius: 10px;}
.reason1 article .box3 figure{ width: 167px;}
.reason1 article .box3 div{ width: 570px; text-align: left;}
.reason1 article .box3 div ul{ display: inline-block; line-height: 1.8;}
.reason1 article .box3 div ul li{ padding-left: 1em; position: relative;}
.reason1 article .box3 div ul li:before{ content: "●"; position: absolute; left: 0; top: .3em; color: #0F3286; font-size: 1rem;}
.reason1 article .box4{ padding: 40px 55px; margin-bottom: 80px; border: 1px solid #fff; border-radius: 10px; background: url("../common/img/bg-dots3.png") center top / 72px repeat;}
.reason1 article .box4 h3{ font-size: 2.4rem; padding-bottom: 1em; margin-bottom: 1em; background: url(../common/img/ic-block.svg) center bottom no-repeat;}
.reason1 article .box4wrap{ display: flex; justify-content: space-between;}
.reason1 article .box4wrap div{ width: 64.2%;}
.reason1 article .box4wrap div p{ margin-bottom: 1.5em; font-size: 1.6rem; font-weight: bold; text-align: left;}
.reason1 article .box4wrap div li{ padding: .5em 0 .5em 1.5em; text-align: left; border-bottom: 1px dashed #6484D0; position: relative;}
.reason1 article .box4wrap div li:before{ display: inline-block; content: "●"; position: absolute; left: 0; top: 1em; color: #6484D0; font-size: 1rem;}
.reason1 article .box4wrap figure{ width: 27%;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	.lower-main figure.reason-main{ background: none;}
	.reason1{ padding-top: 0; overflow: hidden;}
	.reason1:before{ right: 8%; top: 80px; width: 80px;}
	.reason1 article{ margin-bottom: 70px; padding-bottom: 20px;}
	.reason1 article:before{ top: 420px; width: 97%; height: calc(100% - 420px); border-radius: 0 0 50px 0;}
	.reason1 article:after{ display: none;}
	.reason1 article:nth-child(2n):before{ border-radius: 0 0 0 50px;}
	.reason1 article .box1{ margin-bottom: 60px;}
	.reason1 article .box1 .wrap{ height: auto;}
	.reason1 article .box1 .wrap div{ position: relative; padding-top: 0; margin-bottom: 1em;}
	.reason1 article .box1 .wrap div .rno small{ font-size: 2rem;}
	.reason1 article .box1 .wrap div .rno span{ font-size: 8rem;}
	.reason1 article .box1 .wrap div .catch{ font-size: 1.6rem;}
	.reason1 article .box1 .wrap div h2{ font-size: 2.8rem;}
	.reason1 article .box1 .wrap figure{ position: static; width: auto; margin-right: -10%; padding-left: 5%;}
	.reason1 article:nth-child(2n) .box1 .wrap div{ margin-left: 0;}
	.reason1 article:nth-child(2n) .box1 .wrap figure{ margin-right: 0; margin-left: -10%; padding-left: 0; padding-right: 5%;}
	.reason1 article .box2{ margin-bottom: 2em; position: relative;}
	.reason1 article .box2:before{ display: block; content: ""; position: absolute; left: -10%; top: -195px; width: 78px; height: 329px; background: url("../common/img/reason1-bg1.png") center / 100% auto no-repeat;}
	.reason1 article:nth-child(2n) .box2:before{ left: auto; right: -10%; background: url("../common/img/reason1-bg2.png") center / 100% auto no-repeat;}
	.reason1 article .box2.col2{ display: block;}
	.reason1 article .box2 dl{ font-size: 1.4rem;}
	.reason1 article .box2.col2 dl{ width: auto;}
	.reason1 article .box2.col2 dl:not(:last-child){ margin-bottom: 2em;}
	.reason1 article .box2 dl dt{ padding: .5em; font-size: 2rem;}
	.reason1 article .box2 dl dd img{ margin: 0 0 20px 1.5em; width: 60px;}
	.reason1 article .box3{ padding: 30px 8%; display: block;}
	.reason1 article .box3 figure{ width: 114px; margin: 0 auto 1em;}
	.reason1 article .box3 div{ width: auto;}
	.reason1 article .box3 div p{ text-align: center;}
	.reason1 article .box3 div ul{ display: block;}
	.reason1 article .box4{ padding: 30px 8%; margin-bottom: 40px;}
	.reason1 article .box4 h3{ font-size: 1.8rem;}
	.reason1 article .box4wrap{ display: block;}
	.reason1 article .box4wrap div{ width: auto; margin-bottom: 1.5em;}
	.reason1 article .box4wrap div p{ font-size: 1.4rem;}
	.reason1 article .box4wrap figure{ width: 70%; margin: 0 auto;}
}