/*===============================================================================
***既存スタイル
================================================================================*/
#footer {
	--c-footer: var(--c-light);
	--c-footer_bgc: var(--c-main);
}
.l-container.w-footer {
	padding: 0;
}
.l-footer__widgetArea,
.w-footer__box {
	padding: 0;
}
/* 幅広レイアウトに対応する為に必要 */
.w-footer__box {
	max-width: 100%;
}

/*===============================================================================
***マイフッター
================================================================================*/
.myFooter {
	color: var(--c-footer);
}
/* リンクアニメーション */
.myFooter a[href] {
	transition: var(--ani-t--normal);
}
.myFooter a[href]:is(:hover, :focus) {
	color: var(--c-main);
	opacity: 0.7;
}

/* 背景色 */
.myFooter__bgc {
	position: relative;
	margin-bottom: var(--g-16);
	padding: var(--g-40) 0;
}
.myFooter__bgc::before {
	position: absolute;
	top: 0;
	left: calc(50% - 50vw);
	content: "";
	width: 100vw;
	height: 100%;
	background: var(--c-footer_bgc);
	z-index: -1;
}

/*===============================================================================
***コピーライト
================================================================================*/
.l-footer__foot {
	position: relative;
	color: var(--c-footer);
}
.l-footer__foot::before {
	position: absolute;
	top: 0;
	left: calc(50% - 50vw);
	z-index: -1;
	content: "";
	width: 100vw;
	height: 100%;
	background: var(--c-footer_bgc);
}