@charset "utf-8";
body {background-color:#f1f1f1;}
.top_contents{margin: 40px auto 20px; max-width: 980px;}
.top_con{margin-bottom: 30px;}
.top_con h3{font-size: 1.05rem; 
	padding: 0;
	margin: 0 0 10px;
    font-weight: 600;
    position: relative;}
.top_con ul{display: flex;}
.top_con ul li{margin-right: 2%; width: 32%;}
.top_con ul li:last-child{margin-right: 0;}
.top_con a{background: #fff; border-radius: 8px; display: block; text-decoration: none; font-size: 0.9rem; border: 2px solid #ddd; color: var(--bs-gray-700);font-weight: 600; transition: all .3s; display: flex; justify-content: center; align-items: center; height: 70px; position: relative;}
.top_con a i{font-size: 1.8rem; padding-right: 10px;}
.top_con a:hover{background: var(--bs-gray-700); color: #fff;}

.back_btn {
    visibility: hidden;
}
.top_flex{display: flex;}
.top_flex .top_con{width: 32%; margin-right: 2%;}

.top_con a .new{color: var(--bs-danger); font-size: 1.5rem; position: absolute; top: -5px; right: 0;}

/*-----btn----*/
.beginner_area a{border: 2px solid #fad9e9;
    background: #fcf6f9;
    color: #e76daa;}
.beginner_area a:hover{background: #e76daa; color: #fff;}

.hp_area a{border: 2px solid #c8d6e8;
    background: #e4eeff;
    color: #0a58ca;}
.hp_area a:hover{background: #0a58ca; color: #fff;}

.cms_area a{border: 2px solid #afe2ed;
    background: #f1fdff;
    color: #05b3d6;}
.cms_area a:hover{background: #05b3d6; color: #fff;}


.beginner_btn img{width: 38px;padding-right: 12px;}
.beginner_btn a{
	border: 2px solid #d4d9ef;
    background: #263aaa;
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 600;}
.beginner_btn a:hover{filter: brightness(1.2); background: #263aaa;}

/* =========================================================
		SP
========================================================= */
@media screen and (max-width: 767px) {
.top_contents{margin: 8% auto 7%; padding: 0 6%;}
.top_flex{display: block;}
.top_flex .top_con{width: 100%; margin-right: 0;}	
.top_con{margin-bottom: 12%;}	
.top_con h3{font-size: 1.1rem;margin: 0 0 4%;}
.top_con ul{display: block;}
.top_con ul li{margin-right: 0; width: 100%; margin-bottom: 3%;}
.top_con a{padding: 20px 0; font-size: 1rem;}
.top_con a i{font-size: 1.8rem;}
.beginner_btn a{font-size: 1.25em;}	
}