@charset "utf-8";

.footer {
	.footer_inner_wrap {
		background-color: #eef3fa;
		.footer_inner {
			width:calc(100% - 60px);
			max-width:1100px;
			margin:0 auto;
			padding: 30px 0 20px;
			background: url(../img/common/houses.png) no-repeat right 20px bottom 20px/45% auto;
			position: relative;
			h2 {
				font-size: 2.0rem;
				font-weight: 500;
				color:#72b6d6;
				margin-bottom: 2em;
			}
			.footer_info {
				dt {
					width: 250px;
					margin-bottom: 1em;
				}
				dd {
					font-size: 1.5rem;
					line-height: 1.2;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					column-gap: .5em;
					img {
						width: 1.66em;
					}
					&:not(:last-child) {
						margin-bottom: .5em;
					}
				}
			}
			.pagetop {
				position: absolute;
				display: block;
				width: 30px;
				height: 30px;
				top:15px;
				left: calc(50% - 15px);
			}
		}
	}
	.copyright {
		width:calc(100% - 60px);
		max-width:1100px;
		margin:0 auto;
		padding:.5em 0 2em;
		font-size: 1.3rem;
		p {
			line-height: 1.2;
			letter-spacing: .05em;
			color:#4a647c;
		}
	}
}


.footer_contact {
	position:sticky;
	z-index:90;
	bottom:0;
	left:0;
	height: 3.0em;
	padding: 0 1.5em;
	display: grid;
	grid-template-columns: repeat(2,auto);
	grid-gap: .75em;
	align-items: center;
	justify-content: center;
	background-color: var(--color_base);
	font-size: 1.6rem;
	line-height: 1.3;
	color:#FFFFFF;
	&::before {
		font-size: 1.4em;
	}
}

@media (hover: hover) {

	.footer {
		.footer_inner_wrap {
			.footer_inner {
				.footer_info {
					dd {
						a {
							transition: .3s;
							&:hover {
								opacity: .75;
							}
						}
					}
				}
				.pagetop {
					transition: .3s;
					&:hover {
						opacity: .75;
						transform: translateY(-5px);
					}
				}
			}
		}
	}

}

@media screen and (max-width:1024px){
}

@media screen and (max-width:768px){

	.footer {
		.footer_inner_wrap {
			.footer_inner {
				width:calc(100% - 40px);
				padding: 60px 0 100px;
				background: url(../img/common/houses.png) no-repeat center bottom 20px/280px auto;
				h2 {
					margin-bottom: 1em;
				}
				.footer_info {
				dt {
						width: 200px;
					}
				dd {
						font-size: 1.3rem;
						flex-wrap:wrap;
				img {
							width: 1.66em;
						}
						&:not(:last-child) {
							margin-bottom: .5em;
							text-indent:2.3em;
							span {
								text-indent:0;
								width: calc(100% - 3em);
							}
						}
					}
				}
				.pagetop {
				width: 26px;
				height: 26px;
				left: calc(50% - 13px);
				}
			}
		}
		.copyright {
			width:calc(100% - 40px);
			text-align:center;
			padding:1em 0;
			font-size: min(3vw,1.2rem);
		}
	}
}