/*-----------------------------------------------*/
/*-------------------- color --------------------*/
/*-----------------------------------------------*/
@white:#ffffff;
@black:#191919;
@l_black:#333333;
@gray:#c6c6c6;
@l_gray:#eeeeee;
@d_gray:#afafaf;
@dd_gray:#777777;
@red:#d85656;
@d_red:#a53a3a;
@yellow:#e5a82e;
@l_yellow:#ffe6b5;
@d_yellow:#bb8210;
@blue:#00539b;
@d_blue:#163b84;
@green:#59b559;
@d_green:#287528;
@violet:#8243c4;
@d_violet:#58278c;
@sky:#5ec2d2;
@brown:#926834;
@pink:#fdc0c0;

@gold:#b29b49;

@bote_sky:#2fb5be;
@d_bote_sky:#1f777c;

/*----------------------------------------------*/
/*-------------------- font --------------------*/
/*----------------------------------------------*/
@font-face{
	font-family:'oswald_medium';
	src:url('/fonts/Oswald-Medium.ttf');
}
@font-face{
	font-family:'oswald_bold';
	src:url('/fonts/Oswald-Bold.ttf');
}
@font-face{
	font-family:'Recoleta';
	src:url('/fonts/Recoleta-Regular.otf');
}


/*----------------------------------------------------------------------*/
/*------------------------------ sp-start ------------------------------*/
/*----------------------------------------------------------------------*/
@media(max-width:768px){

body.active{
    overflow: hidden;
}

header{
    background:@white;
    border-bottom:1px solid #E2E8F0;
    height:64px;
    position:relative;

    .head_area{
        padding:15px;

        .header_logo{
            img{
                width:160px;
                height:100%;
            }
        }

        a{
            font-size:14px;
            color:#334155;
        }

        .head_area{
            position: relative;
        }
    }
}


footer{
    .footer_contents{
        padding:20px 15px;
        flex-direction: column;
        align-items: flex-start;
        gap:20px;

        .footer_nav{
            /* margin:20px 0; */

            ul{
                flex-direction: column;
                gap:0;
            }
        }
        p{
            text-align:left;
        }
    }
}

.breadcrumb{
    font-size:11px;
    a{
        font-size:11px;
    }
}

.mv{
    padding: 0 15px;
    /* margin:70px 0 100px; */
    margin: 60px 0 80px;

    .mv_inner{
        display:flex;
        flex-direction:column;
        gap:30px;

        .mv_inner_left{
            .mv_content{
                h1{
                    font-size: 30px;
                    line-height: 35px;
                }
                p{
                    font-size: 14px;
                    line-height: 23px;
                    margin-top:15px;
                }
            }
            .mv_social_proof{
                margin-top: 15px;
                gap: 10px;

                img{
                    width:60px;
                }

                p{
                    font-size:11px;
                }
            }
        }
    }
}

.section_area{
    padding: 0 15px;
    margin:0;

		span{
			font-size:11px;
		}
		h2{
			margin:5px 0;
			font-size:25px;
		}
		p{
			color:#475569;
			font-size:14px;
            line-height:20px;
		}
}


.about{
    margin-bottom:40px;

	.about_content{
		margin-bottom:40px;
	}

	.item_content{
		display:grid;
		grid-template-columns:1fr;
		gap:15px;

		.item_card_content{
			padding:20px;
		}
	}
}

.plan{
	padding-top:50px;

	.plan_content{
        margin-bottom:30px;
	}

	.plan_card_content{
        flex-direction: column;
        gap:15px;

		article{
            width:100%;
            max-width:unset;
            box-sizing:border-box;
            padding:20px;
		}
        article:last-child{
            margin-bottom:40px;
        }
	}

}

.material{
	padding:20px;
    margin:40px 15px;
    border-radius:20px;

	h2{
        font-size: 30px;
        line-height: 35px;
	}
	p{
    	font-size:16px;
		margin:15px 0 20px;
	}
	button{
		max-width: 260px;
		width: 100%;
		padding: 16px;
		border-radius: 12px;
		color:#1152D4;
		font-weight:bold;
	}
	button:hover{
		color:#FFF;
		background:#1152D4;
	}
}

.legal{
    margin:80px auto;

    .legal_content{
        margin-bottom:30px;

        h1{
            font-size:40px;
        }
        span{
            font-size:12px;
        }
    }
}
/*-------------------- @media(max-width:768px)->end --------------------*/
}
/*--------------------------------------------------------------------*/
/*------------------------------ sp-end ------------------------------*/
/*--------------------------------------------------------------------*/