/**

 * 共通フッター用 CSS

 *

 * 各 footer*.php から読み込む。フッターの見た目を変えるときはこのファイルだけを編集する。

 * セレクタは footer 配下にスコープしているので、style.css を読まない LP でも干渉しない。

 */



/* footer.php 直前の hr（LP は style.css の hr リセットを持たない） */

hr:has(+ footer) {

	box-sizing: content-box;

	height: 0;

	overflow: visible;

	margin: 0;

	clear: both;

	color: #E2E2E2;

	border: 0;

	border-top: 1px solid #E2E2E2;

	z-index: 1;

	position: relative;

}



footer {

	background-color: #fff;

	color: #2C241A;

	font-family: "lato", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;

	font-size: 16px;

	letter-spacing: 1px;

	line-height: 2em;

	font-feature-settings: "palt";

}



footer a {

	background-color: transparent;

	color: inherit;

	text-decoration: none;

}



/* style.css リセットより：* は ::before/::after に効かないため footer 内で明示 */

footer::before,

footer::after,

footer *::before,

footer *::after {

	box-sizing: border-box;

	border-style: solid;

	border-width: 0;

}



footer p {

	margin-top: 16px;

	font-size: 14px;

	line-height: 1.7;

}



@media screen and (min-width: 961px) {

	footer p {

		font-size: 18px;

		line-height: 1.8;

	}

}



footer .footer {

	max-width: 1136px;

	padding: 80px 16px 24px;

	display: flex;

	justify-content: space-between;

	margin: 0 auto;

}



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

	footer .footer {

		display: block;

	}

}



footer .property {

	width: 31%;

}



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

	footer .property {

		width: 100%;

	}

}



footer .property img {

	width: 263px;

	height: auto;

	max-width: 100%;

	vertical-align: bottom;

	border: 0;

}



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

	footer .property img {

		width: 200px;

	}

}



footer .property p {

	margin-top: 24px;

}



footer .contact {

	display: flex;

	flex-direction: column;

	align-items: flex-start;

	padding-left: 28px;

	padding-top: 20px;

}



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

	footer .contact {

		display: block;

	}

}



footer .contact .tel {

	font-size: 24px;

	font-weight: bold;

	margin-right: 8px;

	position: relative;

	transition: all ease .3s;

}



footer .contact .tel:after {

	content: '';

	background: var(--footer-phone-icon, url("img/phone.svg"));

	position: absolute;

	width: 20px;

	height: 20px;

	left: -28px;

	top: 4px;

	transition: all ease .3s;

}



footer .contact .time {

	font-size: 13px;

	margin-right: 0;

	font-weight: bold;

	text-align: center;

}



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

	footer .contact .time {

		text-align: left;

		margin-top: -5px;

	}

}



footer .footer-nav {

	width: 66%;

}



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

	footer .footer-nav {

		display: block;

		width: 100%;

	}

}



footer .footer-nav ul {

	display: flex;

	flex-wrap: wrap;

	list-style: none;

	padding: 0;

	margin: 0;

}



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

	footer .footer-nav ul {

		display: block;

		margin-top: 24px;

	}

}



footer .footer-nav ul li {

	width: 32%;

	margin-bottom: 8px;

}



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

	footer .footer-nav ul li {

		width: 100%;

		margin-bottom: 0;

	}

}



footer .footer-nav ul li a {

	font-weight: bold;

	font-size: 14px;

	line-height: 1.7;

	position: relative;

	transition: all ease .3s;

}



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

	footer .footer-nav ul li a {

		display: block;

		line-height: 3em;

		position: relative;

		border-bottom: 1px solid #E2E2E2;

	}

}



footer .footer-nav ul li a:hover {

	color: #D87B20;

}



footer .footer-nav ul li a:before {

	box-sizing: border-box;

	position: absolute;

	top: 0;

	bottom: 0;

	margin: auto;

	content: '';

	left: -16px;

	width: 8px;

	height: 8px;

	border-top: 2px solid #D87B20;

	border-right: 2px solid #D87B20;

	-webkit-transform: rotate(45deg);

	transform: rotate(45deg);

}



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

	footer .footer-nav ul li a:before {

		right: 0;

		left: inherit;

	}

}



footer p.copyright {

	font-size: 12px;

	max-width: 1136px;

	padding: 24px 16px;

	display: flex;

	justify-content: space-between;

	margin: 0 auto;

}



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

	footer {

		padding-bottom: 66px;

	}

}