@charset "UTF-8";

.overview >.txt .tit {margin-bottom: 42px}
.overview >.txt .tit , .overview > .txt .desc p {line-height: 1.3; letter-spacing: normal; }
.btn-wrap {margin: 50px auto 0;display: flex;justify-content: center;gap: 10px}

.btn.view-doc {display: flex; justify-content: center; align-items: center;  width: 280px; height: 64px; line-height: 1; font-weight: 400;}
.program {margin-top: 80px;}

    
/* method */ 
.overview figure {height: 241px; overflow: hidden;}
.method {margin-top: 80px;}
.method figure {width: 680px;}
.focus figure {width: 634px;}
.socialsystem figure {margin: auto;}


@media screen and (max-width: 1440px) {
	.overview figure {height: 16.7361vw; }
	.program {margin-top: 5.56vw;}
	.method {margin-top: 5.56vw;}
	.method figure {width: 47.22vw;}
	.focus figure {width: 44.03vw;}
	.btn-wrap {margin: 3.47vw auto 0;}
	.btn.view-doc {width: 19.44vw; height: 4.44vw;}	
}

@media screen and (max-width: 768px) {
	.btn-wrap {margin: 5.71vw auto 0;}
	.btn.view-doc {width: 44.29vw; height: 10.86vw;}
	.program {margin-top: 15.48vw;}

	.overview .floating-txt .desc p{line-height: normal;}
	.overview > .txt, .overview .row > .txt {margin-bottom: 13.33vw;}
	.overview >.txt .tit {margin-bottom: 11.43vw}
	.overview figure {height: 34.52vw;}
	.overview figure img {height: 100%;}
	
	.method {margin-top: 10.95vw;}
	.method ul li {position: relative; width: 32.81vw; height: 32.81vw; border: 1.19vw solid #3bb149; border-radius: 50%; text-align: center; margin: 0 auto 4.76vw; font-size: 2.62vw; line-height: normal;}
	.method ul li:not(:last-child):after {position: absolute; content: ''; display: block; left: 50%; bottom:-6.43vw; width: 0.24vw; height: 5.24vw; background: #ccc;}
	.method ul li .txt {width: 93%;}

	.sec + .sec {margin-top: 15.48vw;}
	.sec-tit + .desc p {color: #666;}
	.focus ul {flex-wrap: wrap; width: 80%; margin: 0 auto;}
	.focus ul li {width: 21.43vw; height: 21.43vw; color: #3bb149; border: 0.95vw solid #3bb149; border-radius: 50%; text-align: center; font-size: 2.62vw;}
}

@media screen and (max-width: 370px) {
	.method ul li {font-size: 10px}
	.focus ul li {font-size: 10px} 
}

@media screen and (max-width: 320px) {
	.btn-wrap {margin: 18px auto 0;}
	.btn.view-doc {width: 142px; height: 35px; padding: 8px 0;}
	.program {margin-top: 50px;}

	.overview > .txt, .overview .row > .txt {margin-bottom: 43px;}
	.overview .floating-txt .desc p {margin-top: 29px;}
	.overview >.txt .tit {margin-bottom: 37px}
	.overview figure {height: 110px;}
	
	.method {margin-top: 35px;}
	.method ul li {position: relative; width: 105px; height: 105px; border: 4px solid #3bb149; margin: 0 auto 15px;}
	.method ul li:not(:last-child):after {position: absolute; content: ''; display: block; left: 50%; bottom:-21px; width: 1px; height: 17px;}

	.sec + .sec {margin-top: 50px;}
	.focus ul li {width: 69px; height: 69px; color: #3bb149; border: 3px solid #3bb149; border-radius: 50%; text-align: center;}
}