@charset "utf-8";


#wrapper { display:flex; flex-direction: column; min-height:100vh; }
#header { width:100%; }
main { flex:1; background:#f8f8f8; }
main > .inner { display:flex; justify-content: space-between; margin-top:50px; margin-bottom:50px; }

.left-wrap,
.right-wrap { width:280px; }
.right-wrap { text-align:right; }
.right-wrap img { max-width:100%; }

.left-wrap .plans { padding:30px; background:#fff; border:1px solid #eee; }
.left-wrap h1 { font-size:2rem; line-height:1; font-weight:900; color:#777; margin-bottom:15px; }
.left-wrap h1 strong { font-size:3rem; color:var(--main-color2); }
.left-wrap li { position:relative; padding-left:10px; margin-top:5px; }
.left-wrap li:before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:3px; border-radius:5px; background:#333; }


.login-box { border-radius:20px; padding:35px; width:350px; box-shadow:0 0 30px rgba(var(--main-color2-rgb),.2); border:2px solid var(--main-color2); background:#fff; }
.login-box .title { position:relative; margin-bottom:25px; color:var(--main-color2); }
.login-box h1 { font-size:1rem; }
.login-box p { font-size:1.875rem; font-weight:700; }
.login-box i { position:absolute; bottom:4px; right:0; font-size:2rem; }

.login-row .field { font-size:.875rem; }
.login-row .field span { margin-bottom:2px; display:block; }
.login-row .field input { border:1px solid #ddd; background:#fff; padding:10px; width:100%; margin-bottom:12px; }

.login-row .btn-box { text-align:center; }
.login-row .btn-box button { border-radius:5px; width:100%; padding:15px 20px; background:linear-gradient(45deg, var(--main-color2), rgba(255,255,255,.2)), linear-gradient(45deg, var(--main-color2), var(--main-color2)); color:#fff; font-size:.875rem; border:2px solid transparent; }
.login-row .btn-box button:hover { background:#fff; color:var(--main-color2); border-color:var(--main-color2); }


@media screen and (max-width: 1024px) {
	.left-wrap,
	.right-wrap { width:220px; }

	.left-wrap h1 { font-size:1.625rem; }
	.left-wrap h1 strong { font-size:2.25rem; }

	.login-box { padding:30px; width:300px; }
	.login-box .title { margin-bottom:15px; }
	.login-row .field input { margin-bottom:10px; }
}
@media screen and (max-width: 767px) {
	main > .inner { display:grid; grid-template-columns: repeat(2, 1fr); justify-items: center; gap:20px 0; }
	.left-wrap,
	.right-wrap { width:100%; }

	.left-wrap .plans { padding:20px; height:100%; display:flex; flex-direction: column; justify-content: center; }
	.left-wrap h1 { font-size:1.375rem; }
	.left-wrap h1 strong { font-size:1.625rem; }
	.left-wrap li { margin-top:2px; font-size:.875rem; }

	.right-wrap { text-align:center; background:#f4df25; }
	.right-wrap a { height:100%; display:flex; flex-direction: column; justify-content: center; }

	.center-wrap { width:100%; grid-row: 1/2; grid-column: 1/3; }
	.login-box { width:100%; max-width:320px; margin:0 auto; }

}

.section { padding: 100px 0px; line-height: 1; }
.section .sec_tit span{display: block;font-size: 18px; color: #ff4c4c; margin-bottom: 18px;}
.section .sec_tit p{font-size: 45px; color: #222; font-weight: 700;}

@media screen and (max-width: 1024px) {
	.section{padding: 80px 0px; line-height: 1;}
	.section .sec_tit{text-align: center;margin-bottom: 50px;}
	.section .sec_tit span{display: block;font-size: 15px; color: #ff4c4c; margin-bottom: 16px;}
	.section .sec_tit p{font-size: 35px; color: #222; font-weight: 700;}
}
@media screen and (max-width: 767px) {
	.section{padding: 50px 0px; line-height: 1;}
	.section .sec_tit{text-align: center;margin-bottom: 25px;}
	.section .sec_tit p{font-size: 20px; color: #222; margin-top: 10px; font-weight: 700;}
	.section .sec_tit span {display: block;font-size: 12px;color: #ff4c4c;margin-bottom: 10px;}
}



#section01{background: url(/images/sec02_bg01_new_pc.jpg)center no-repeat; background-size: cover;}
#section01 .con_wrap{display: flex;gap:40px;}
#section01 .con_wrap .con{width: 440px;}
#section01 p.mem_situation {color: #888; margin-bottom: 10px; display: block; font-size: 16px; text-align: right;}
#section01 .con_wrap .con01 .box{position: relative;height: 180px; padding: 30px;}
#section01 .con_wrap .con01 .box p{font-size: 28px; font-weight: 700; line-height: 1.4;}
#section01 .con_wrap .con01 .box p i {display: block;}
#section01 .con_wrap .con01 .box b{display: block;font-size: 14px; color: rgba(255,255,255,.6); font-weight: 300;margin-bottom: 2px;}
#section01 .con_wrap .con01 .box .bot{display: flex; justify-content:space-between;align-items: flex-end;width: 100%;margin-top: 30px;}
#section01 .con_wrap .con01 .box .bot span{display: block;transition:.5s;}
#section01 .con_wrap .con01 .box .bot em{position: absolute; right: 30px; bottom: 30px;}
#section01 .con_wrap .con01 .box:hover .bot span{margin-right: 10px;}
#section01 .con_wrap .con01 .box:nth-child(1){background: #fff; margin-bottom: 40px;box-shadow: 10px 10px 20px rgba(0,104,183,.2);}
#section01 .con_wrap .con01 .box:nth-child(1) p{color: #387adf;}
#section01 .con_wrap .con01 .box:nth-child(1) b{color: rgba(16,44,87,.6);}
#section01 .con_wrap .con01 .box:nth-child(2){background: #50c4ed; box-shadow: 5px 5px 15px rgba(0,0,0,.05);}
#section01 .con_wrap .con01 .box:nth-child(2) p{color: #fff;}


#section01 .con_wrap .con02_wrap{display: flex; gap:40px; width: calc(100% - 480px);}
#section01 .con_wrap .con02{background: #fff;box-shadow: 0px 0px 20px rgba(0,0,0,.1);}
#section01 .con_wrap .con02 .tit{width: 100%;background: #387adf; height: 80px; padding: 20px 30px;}
#section01 .con_wrap .con02 .tit span{display: block;font-size: 14px; color: rgba(255,255,255,.6); font-weight: 300;margin-bottom: 5px;}
#section01 .con_wrap .con02 .tit p{font-size: 22px; font-weight: 600 ;color: #fff;}
#section01 .con_wrap .con02 .tit a.more_btn{display: block; width: 30px; height: 30px; background: url(/images/more_btn01_pc.png)center no-repeat #db4f3a; background-size: 16px;transition:.4s;}
#section01 .con_wrap .con02 .tit a.more_btn:hover{border-radius:50%;}
#section01 .con_wrap .con02 .con02_box{padding: 0px 30px;}
#section01 .con_wrap .con02 .con02_box ul li{border-bottom: 1px solid #ddd;}
#section01 .con_wrap .con02 .con02_box ul li a{display: flex;padding: 20px 0px; align-items: center; line-height:1.4; }
#section01 .con_wrap .con02 .con02_box ul li a em{display: block;width: 50px;font-size: 14px; color: #387adf; font-weight: 500;line-height: 1.2;}
#section01 .con_wrap .con02 .con02_box ul li a p{width: calc(100% - 170px);font-size: 16px; color: #222; font-weight: 500;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }
#section01 .con_wrap .con02 .con02_box ul li a span{display: block;text-align: right;width: 60px;font-size: 16px; color: #222; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }
#section01 .con_wrap .con02-2 .tit{background: #102c57;}
#section01 .con_wrap .con02-2 .tit a.more_btn{ background: url(/images/more_btn01_pc.png)center no-repeat #eb8021; background-size: 16px;}
#section01 .con_wrap .con02-2 .con02_box ul li a em{color: #102c57;}

@media screen and (max-width: 1024px) {
	#section01{background: url(/images/sec02_bg01_new_pc.jpg)center no-repeat; background-size: cover;}
	#section01 .con_wrap{display: flex;gap: 10px;flex-direction: column;}
	#section01 .con_wrap .con{display: flex;gap: 10px;width: 100%;width: 100%;}
	#section01 p.mem_situation {color: #888; margin-bottom: 10px; display: block; font-size: 16px; text-align: right;}
	#section01 .con_wrap .con01 .box{position: relative;width: 100%;height: 220px; padding: 25px;}
	#section01 .con_wrap .con01 .box p{font-size: 25px; font-weight: 700; line-height: 1.4;}
	#section01 .con_wrap .con01 .box p i {display: block;}
	#section01 .con_wrap .con01 .box b{display: block;font-size: 12px; color: rgba(255,255,255,.6); font-weight: 300;margin-bottom: 2px;}
	#section01 .con_wrap .con01 .box .bot{display: flex; justify-content:space-between;align-items: flex-end;width: 100%;margin-top: 30px;}
	#section01 .con_wrap .con01 .box .bot span{position: absolute;bottom: 25px;display: block;transition:.5s;}
	#section01 .con_wrap .con01 .box .bot em{position: absolute; right: 25px; bottom: 25px;}
	#section01 .con_wrap .con01 .box:hover .bot span{margin-right: 10px;}
	#section01 .con_wrap .con01 .box:nth-child(1){background: #fff; margin-bottom: 0px;box-shadow: 10px 10px 20px rgba(0,104,183,.2);}
	#section01 .con_wrap .con01 .box:nth-child(1) p{color: #387adf;}
	#section01 .con_wrap .con01 .box:nth-child(1) b{color: rgba(16,44,87,.6);}
	#section01 .con_wrap .con01 .box:nth-child(2){background: #50c4ed; margin-bottom: 0px;box-shadow: 5px 5px 15px rgba(0,0,0,.05);}
	#section01 .con_wrap .con01 .box:nth-child(2) p{color: #fff;}
	#section01 .con_wrap .con01 .box:nth-child(3){background: #102c57;box-shadow: 5px 5px 15px rgba(0,0,0,.05);}
	#section01 .con_wrap .con01 .box:nth-child(3) p{color: #fff;}
	#section01 .con_wrap .con01 .box span img{width: 35px;}
	#section01 .con_wrap .con01 .box:nth-child(1) em img{width: 50px;}
	#section01 .con_wrap .con01 .box:nth-child(2) em img{width: 65px;}
	#section01 .con_wrap .con01 .box:nth-child(3) em img{width: 60px;}

	#section01 .con_wrap .con02_wrap{display: flex; gap:10px; width: 100%;}
	#section01 .con_wrap .con02{display: block;width: calc((100% - 10px) / 2);background: #fff;box-shadow: 0px 0px 20px rgba(0,0,0,.1);}
	#section01 .con_wrap .con02 .tit{width: 100%;background: #387adf; height: 80px; padding: 20px 18px;}
	#section01 .con_wrap .con02 .tit span{display: block;font-size: 12px; color: rgba(255,255,255,.6); font-weight: 300;margin-bottom: 5px;}
	#section01 .con_wrap .con02 .tit p{font-size: 18px; font-weight: 600 ;color: #fff;}
	#section01 .con_wrap .con02 .tit a.more_btn{display: block; width: 30px; height: 30px; background: url(/images/more_btn01_pc.png)center no-repeat #db4f3a; background-size: 16px;transition:.4s;}
	#section01 .con_wrap .con02 .tit a.more_btn:hover{border-radius:50%;}
	#section01 .con_wrap .con02 .con02_box{padding: 0px 20px;}
	#section01 .con_wrap .con02 .con02_box ul li{border-bottom: 1px solid #ddd;}
	#section01 .con_wrap .con02 .con02_box ul li a{display: flex;padding: 20px 0px; align-items: center;}
	#section01 .con_wrap .con02 .con02_box ul li a em{display: block;width: 50px;font-size: 12px; color: #387adf; font-weight: 500;line-height: 1.2;}
	#section01 .con_wrap .con02 .con02_box ul li a p{width: calc(100% - 170px);font-size: 14px; color: #222; font-weight: 500;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }
	#section01 .con_wrap .con02 .con02_box ul li a span{display: block;text-align: right;width: 60px;font-size: 14px; color: #222; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }
	#section01 .con_wrap .con02-2 .tit{background: #102c57;}
	#section01 .con_wrap .con02-2 .tit a.more_btn{ background: url(/images/more_btn01_pc.png)center no-repeat #eb8021; background-size: 16px;}
	#section01 .con_wrap .con02-2 .con02_box ul li a em{color: #102c57;}
}

@media screen and (max-width: 767px) {
	#section01{background: url(/images/sec02_bg01_new_pc.jpg)center no-repeat; background-size: cover;}
	#section01 .con_wrap{display: flex;gap: 10px;flex-direction: column;}
	#section01 .con_wrap .con{display: flex; flex-wrap: wrap;gap: 10px;width: 100%;width: 100%;}
	#section01 p.mem_situation {color: #888; margin-bottom: 10px; display: block; font-size: 16px; text-align: right;}
	#section01 .con_wrap .con01 .box{position: relative;width: 100%;height: auto; padding: 20px;}
	#section01 .con_wrap .con01 .box p{font-size: 15px; font-weight: 700; line-height: 1.4;}
	#section01 .con_wrap .con01 .box p i {display: block;}
	#section01 .con_wrap .con01 .box b{display: block;font-size: 12px; color: rgba(255,255,255,.6); font-weight: 300;margin-bottom: 5px;}
	#section01 .con_wrap .con01 .box .bot{display: flex; justify-content:space-between;align-items: flex-end;width: 100%;margin-top: 0px;}
	#section01 .con_wrap .con01 .box .bot span{position: absolute;top: 50%;right: 20px;transform:translateY(-50%);bottom: initial;display: block;transition:.5s;}
	#section01 .con_wrap .con01 .box .bot em{display: none;position: absolute; right: 25px; bottom: 25px;}
	#section01 .con_wrap .con01 .box:hover .bot span{margin-right: 10px;}
	#section01 .con_wrap .con01 .box:nth-child(1){background: #fff; margin-bottom: 0px;box-shadow: 10px 10px 20px rgba(0,104,183,.2);}
	#section01 .con_wrap .con01 .box:nth-child(1) p{color: #387adf;}
	#section01 .con_wrap .con01 .box:nth-child(1) b{color: rgba(16,44,87,.6);}
	#section01 .con_wrap .con01 .box:nth-child(2){background: #50c4ed; margin-bottom: 0px;box-shadow: 5px 5px 15px rgba(0,0,0,.05);}
	#section01 .con_wrap .con01 .box:nth-child(2) p{color: #fff;}
	#section01 .con_wrap .con01 .box:nth-child(3){background: #102c57;box-shadow: 5px 5px 15px rgba(0,0,0,.05);}
	#section01 .con_wrap .con01 .box:nth-child(3) p{color: #fff;}
	#section01 .con_wrap .con01 .box span img{width: 30px;}
	#section01 .con_wrap .con01 .box:nth-child(1) em img{width: 50px;}
	#section01 .con_wrap .con01 .box:nth-child(2) em img{width: 65px;}
	#section01 .con_wrap .con01 .box:nth-child(3) em img{width: 60px;}

	#section01 .con_wrap .con02_wrap{display: flex; gap:10px; width: 100%; flex-wrap:wrap;}
	#section01 .con_wrap .con02{display: block;width: 100%;background: #fff;box-shadow: 0px 0px 20px rgba(0,0,0,.1);}
	#section01 .con_wrap .con02 .tit{width: 100%;background: #387adf; height: auto; padding: 12px;}
	#section01 .con_wrap .con02 .tit i{display: block;}
	#section01 .con_wrap .con02 .tit span{display: block;font-size: 12px; color: rgba(255,255,255,.6); font-weight: 300;margin-bottom: 8px;}
	#section01 .con_wrap .con02 .tit p{font-size: 15px; font-weight: 600 ;color: #fff;}
	#section01 .con_wrap .con02 .tit a.more_btn{display: block; width: 30px; height: 30px; background: url(/images/more_btn01_pc.png)center no-repeat #db4f3a; background-size: 16px;transition:.4s;}
	#section01 .con_wrap .con02 .tit a.more_btn:hover{border-radius:50%;}
	#section01 .con_wrap .con02 .con02_box{padding: 0px 20px;}
	#section01 .con_wrap .con02 .con02_box ul li{border-bottom: 1px solid #ddd;}
	#section01 .con_wrap .con02 .con02_box ul li a{display: flex;padding: 10px 0px; align-items: center;}
	#section01 .con_wrap .con02 .con02_box ul li a em{display: block;width: 50px;font-size: 11px; color: #387adf; font-weight: 500;line-height: 1.2;}
	#section01 .con_wrap .con02 .con02_box ul li a p{width: calc(100% - 170px);font-size: 12px; color: #222; font-weight: 500;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }
	#section01 .con_wrap .con02 .con02_box ul li a span{display: block;text-align: right;width: 60px;font-size: 12px; color: #222; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }
	#section01 .con_wrap .con02-2 .tit{background: #102c57;}
	#section01 .con_wrap .con02-2 .tit a.more_btn{ background: url(/images/more_btn01_pc.png)center no-repeat #eb8021; background-size: 16px;}
	#section01 .con_wrap .con02-2 .con02_box ul li a em{color: #102c57;}
}