@charset "utf-8";

.footer {
	background: #f5f5f5;
	width: 100%;
	padding: 60px 0;
}

.footer-inner {
	width: 1440px; 
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
}

.footer .area-1 { width: 50%; }

.footer .company-name {
	font-weight: 600;
	color: #777;
	padding: 15px 0;
}

.footer .company-info-1 {
	display: flex;
	font-size: 15px; 
	color: #8c8989;
	font-weight: 400;
	margin-bottom: 0;
}

.footer .company-info-1 li { margin-right: 35px; }

.footer .company-info-2 {
	display: flex;
	font-size: 15px; 
	color: #8c8989;
	font-weight: 500;
	margin-bottom: 30px;
}
.footer .company-info-2 li {
	margin-right: 35px;
	color: #8c8989;
	font-weight: 400;
}

.footer .company-info-3 {
	font-size: 14px; 
	color: #8c8989;
	font-weight: 400;
	margin-bottom: 30px;
}

.footer .company-info-3 li {
    font-size: 15px;
}

.copyright {
	font-size: 14px; 
	color: #999;
	font-weight: 500;
}

.area-2 {
	width: 120px;
	color: #999;
}

.area-2 .personFor-info li {
	color: #777;
	font-size: 16px; 
	font-weight: 500;
	height: 35px;
    line-height: 35px;
}
.area-2 .personFor-info li a { white-space: nowrap; }
.area-2 .personFor-info li.ad,
.area-2 .personFor-info li.allRounder {
	color: #333;
	font-weight: 600;
}

.area-3 {
	width: 400px;
	display : flex; 
	flex-direction: column;
    justify-content: space-between;
}

.area-3 .forUse .tlt {
	font-size: 15px; 
	color: #444;
	font-weight: 700;
	padding-bottom: 6px;
}

.area-3 .forUse .number {
	font-size: 36px;
	font-weight: 700;
	color: #222;
}

.area-3 .forUse .time { 
    font-size: 15px;
    color: #444;
    padding: 15px 0;
}

.area-3 .forUse .email {
	color: #32c1ee;
	font-weight: 700;
	font-size: 17px;
}
.area-3 .store-btn-wrap {
	display: flex;
	justify-content: flex-start;
	gap: 10px;
}
.area-3 .store-btn-wrap a img {
	width: 150px; 
}

@media all and (max-width: 1500px) {
	.footer-inner {
		width: 100%;
		padding: 0 20px;
	}
}

@media all and (max-width: 1280px) {
	.footer {
		padding: 50px 0;
	}
	.footer .company-info-2 li { margin-right: 25px; }
	.area-3 { width: 380px; }
	.area-3 .forUse .number { font-size: 32px; }
}

@media all and (max-width: 1080px) {
	.footer { 
		position: relative; 
		padding: 75px 0 40px;
	}
	.footer-inner { flex-direction: row; }
	.footer .area-1 { width: 60%; }
	.area-2 { 
		width: 100%; 
		position: absolute;
        left: 0;
        top: 0;
	}
	.area-2 ul { 
		display: flex;
	    margin: 0;
        border-bottom: 1px solid #aaa;
        padding: 2px 20px;
	}
	.area-2 .personFor-info li { margin-right: 30px; }
	.area-3 {
        width: 40%;
		margin-top: 30px;
		align-items: flex-end;
		/* flex-direction: row; */
    }
	.area-3 .forUse { margin-bottom: 20px; }
}

@media all and (max-width: 992px) {
    .footer-inner {
        flex-direction: column;
    }
	.footer .area-1 {
        width: 100%;
    }
	.area-3 {
        width: 100%;
		align-items: flex-end;
		flex-direction: row;
	}
	.area-3 .forUse {
        margin-bottom: 0;
    }
}

@media all and (max-width: 768px) {
	.area-2 ul { flex-wrap: wrap; }
	.area-3 {
		flex-direction: column;
		align-items: flex-start;
	}
	.area-3 .forUse {
        margin-bottom: 20px;
    }
}

@media all and (max-width: 610px) {
	.footer {
		padding: 100px 0 25px;
	}
	.footer .area-1 img { width: 80px; }
}

@media all and (max-width: 578px) {
	.footer .company-info-1,
	.footer .company-info-2 { flex-wrap: wrap; }
	.footer .company-info-1,
	.footer .company-info-2 { margin-bottom: 20px; }
	.footer .company-info-3 { margin-bottom: 25px; }
	.footer .company-info-2 li { line-height: 20px; }
	.footer .company-info-3 li { line-height: 1.2; margin-bottom: 7px; }
	.area-3 { margin-top: 25px; }
}

@media all and (max-width: 429px) {
	.footer {
		padding: 110px 0 40px;
    }
}

@media all and (max-width: 376px) {
	.area-2 ul { padding: 6px 20px; }
	.area-2 .personFor-info li { height: 30px; line-height: 30px; }
	.area-3 .store-btn-wrap a img {
		width: 130px;
	}
	.area-2 .personFor-info li {
        margin-right: 20px;
    }
}