/* =========================================================
   YUMINEKO CUSTOM FOOTER
   /assets/css/custom-footer.css

   既存の背景色・上部カーブはstyle.css側を利用。
   このCSSではフッター内部の情報設計のみ変更する。
========================================================= */


/* =========================================================
   SWELL既存レイアウトをリセット
========================================================= */

#footer.l-footer .l-footer__foot {
	padding-left: 0;
	padding-right: 0;
}


#footer.l-footer .l-footer__foot .l-container {
	display: block !important;
	width: min(1180px, calc(100% - 48px)) !important;
	max-width: 1180px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 !important;
}


/* =========================================================
   CUSTOM FOOTER
========================================================= */

#footer.l-footer .ym-custom-footer {
	width: 100%;
	color: #fff;
	text-align: left;
}


#footer.l-footer .ym-custom-footer__main {
	display: grid;
	grid-template-columns: minmax(220px, 0.85fr) minmax(0, 2.15fr);
	gap: 70px;
	align-items: start;
	padding-top: 52px;
	padding-bottom: 44px;
}


/* =========================================================
   BRAND
========================================================= */

#footer.l-footer .ym-custom-footer__brand {
	min-width: 0;
}


#footer.l-footer .ym-custom-footer__brand-name {
	display: inline-block;
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1.55;
	letter-spacing: .02em;
	text-decoration: none;
}


#footer.l-footer .ym-custom-footer__brand-name:hover {
	opacity: .85;
	text-decoration: none;
}


#footer.l-footer .ym-custom-footer__tagline {
	margin: 12px 0 0;
	padding: 0;
	color: rgba(255, 255, 255, .82);
	font-size: .88rem;
	font-weight: 500;
	line-height: 1.8;
}


/* =========================================================
   NAVIGATION
========================================================= */

#footer.l-footer .ym-custom-footer__nav {
	display: grid;
	grid-template-columns:
		minmax(0, .9fr)
		minmax(0, 1.25fr)
		minmax(0, 1.15fr);
	gap: 42px;
	width: 100%;
	margin: 0;
	padding: 0;
}


#footer.l-footer .ym-custom-footer__group {
	min-width: 0;
}


#footer.l-footer .ym-custom-footer__heading {
	margin: 0 0 17px;
	padding: 0 0 10px;
	border-bottom: 1px solid rgba(255, 255, 255, .28);
	color: rgba(255, 255, 255, .72);
	font-size: .76rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .08em;
}


#footer.l-footer .ym-custom-footer__group ul {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}


#footer.l-footer .ym-custom-footer__group li {
	display: block;
	width: auto;
	margin: 0 0 10px;
	padding: 0;
	line-height: 1.6;
	white-space: normal;
	text-align: left;
}


#footer.l-footer .ym-custom-footer__group li:last-child {
	margin-bottom: 0;
}


#footer.l-footer .ym-custom-footer__group a {
	display: inline;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	color: #fff;
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.65;
	white-space: normal;
	text-align: left;
	text-decoration: none;
}


#footer.l-footer .ym-custom-footer__group a:hover {
	opacity: .78;
	text-decoration: none;
}


/* =========================================================
   BOTTOM / COPYRIGHT
========================================================= */

#footer.l-footer .ym-custom-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	padding: 23px 0 6px;
	border-top: 1px solid rgba(255, 255, 255, .22);
}


#footer.l-footer .ym-custom-footer__copyright,
#footer.l-footer .l-footer__foot .ym-custom-footer__copyright {
	width: auto;
	margin: 0 !important;
	padding: 0;
	color: rgba(255, 255, 255, .78);
	font-size: .78rem;
	font-weight: 500;
	line-height: 1.6;
	white-space: normal;
	text-align: left;
}


/* =========================================================
   既存SWELLの疑似要素等の影響を防ぐ
========================================================= */

#footer.l-footer .ym-custom-footer ul li::before,
#footer.l-footer .ym-custom-footer ul li::after {
	display: none !important;
	content: none !important;
}


#footer.l-footer .ym-custom-footer a::before,
#footer.l-footer .ym-custom-footer a::after {
	border: 0;
}


/* =========================================================
   TABLET
========================================================= */

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

	#footer.l-footer .l-footer__foot .l-container {
		width: min(100% - 40px, 760px) !important;
	}


	#footer.l-footer .ym-custom-footer__main {
		grid-template-columns: 1fr;
		gap: 38px;
		padding-top: 48px;
		padding-bottom: 38px;
	}


	#footer.l-footer .ym-custom-footer__brand {
		text-align: center;
	}


	#footer.l-footer .ym-custom-footer__nav {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px;
	}


	#footer.l-footer .ym-custom-footer__bottom {
		justify-content: center;
	}


	#footer.l-footer .ym-custom-footer__copyright,
	#footer.l-footer .l-footer__foot .ym-custom-footer__copyright {
		text-align: center;
	}

}


/* =========================================================
   MOBILE
========================================================= */

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

	/* -----------------------------------------
	   SWELL側の既存SPフッターをリセット
	----------------------------------------- */

	#footer.l-footer .l-footer__foot {
		padding: 0 !important;
		margin-top: 0 !important;
	}


	#footer.l-footer .l-footer__foot .l-container {
		display: block !important;
		width: calc(100% - 44px) !important;
		max-width: none !important;
		margin: 0 auto !important;
		padding: 0 !important;
	}


	/* -----------------------------------------
	   全体

	   カーブとブランド文字が重ならないよう、
	   SPのみ上余白を広げる。
	----------------------------------------- */

	#footer.l-footer .ym-custom-footer__main {
		display: block;
		padding-top: 64px;
		padding-bottom: 18px;
	}


	/* -----------------------------------------
	   ブランド
	----------------------------------------- */

	#footer.l-footer .ym-custom-footer__brand {
		margin-bottom: 24px;
		text-align: left;
	}


	#footer.l-footer .ym-custom-footer__brand-name {
		font-size: 1.08rem;
		line-height: 1.5;
	}


	#footer.l-footer .ym-custom-footer__tagline {
		margin-top: 6px;
		font-size: .76rem;
		line-height: 1.6;
	}


	/* -----------------------------------------
	   ナビ全体
	----------------------------------------- */

	#footer.l-footer .ym-custom-footer__nav {
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
	}


	/* -----------------------------------------
	   各カテゴリ
	----------------------------------------- */

	#footer.l-footer .ym-custom-footer__group {
		margin: 0;
		padding: 17px 0 16px;
		border-top: 1px solid rgba(255, 255, 255, .22);
	}


	#footer.l-footer .ym-custom-footer__group:last-child {
		border-bottom: 1px solid rgba(255, 255, 255, .22);
	}


	/* -----------------------------------------
	   カテゴリ見出し
	----------------------------------------- */

	#footer.l-footer .ym-custom-footer__heading {
		margin: 0 0 10px;
		padding: 0;
		border: 0;
		color: rgba(255, 255, 255, .72);
		font-size: .69rem;
		font-weight: 700;
		line-height: 1.5;
		letter-spacing: .08em;
	}


	/* -----------------------------------------
	   基本は2列
	----------------------------------------- */

	#footer.l-footer .ym-custom-footer__group ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 18px;
		row-gap: 0;
		width: 100%;
		margin: 0;
		padding: 0;
	}


	#footer.l-footer .ym-custom-footer__group li {
		display: block;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 5px 0;
		line-height: 1.5;
		text-align: left;
		white-space: normal;
	}


	#footer.l-footer .ym-custom-footer__group a {
		display: inline;
		width: auto;
		max-width: 100%;
		margin: 0;
		padding: 0;
		color: #fff;
		font-size: .76rem;
		font-weight: 600;
		line-height: 1.55;
		white-space: normal;
		overflow-wrap: break-word;
		word-break: normal;
		text-align: left;
		text-decoration: none;
	}


	/* -----------------------------------------
	   長いリンクだけ2列分を使用
	----------------------------------------- */

	#footer.l-footer
	.ym-custom-footer__group:nth-child(2)
	li:nth-child(2),

	#footer.l-footer
	.ym-custom-footer__group:nth-child(2)
	li:nth-child(3),

	#footer.l-footer
	.ym-custom-footer__group:nth-child(3)
	li:nth-child(2) {
		grid-column: 1 / -1;
	}


	/* -----------------------------------------
	   コピーライト
	----------------------------------------- */

	#footer.l-footer .ym-custom-footer__bottom {
		display: block;
		width: 100%;
		padding: 19px 0 2px;
		border-top: 0;
	}


	#footer.l-footer .ym-custom-footer__copyright,
	#footer.l-footer .l-footer__foot .ym-custom-footer__copyright {
		width: 100%;
		margin: 0 !important;
		padding: 0;
		color: rgba(255, 255, 255, .76);
		font-size: .7rem;
		font-weight: 500;
		line-height: 1.5;
		white-space: normal;
		text-align: center;
	}

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

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

	#footer.l-footer .ym-custom-footer__group ul {
		grid-template-columns: 1fr;
	}


	#footer.l-footer .ym-custom-footer__group li,
	#footer.l-footer
	.ym-custom-footer__group:nth-child(2)
	li:nth-child(2),
	#footer.l-footer
	.ym-custom-footer__group:nth-child(2)
	li:nth-child(3),
	#footer.l-footer
	.ym-custom-footer__group:nth-child(3)
	li:nth-child(2) {
		grid-column: 1;
	}


	#footer.l-footer .ym-custom-footer__group li {
		padding: 4px 0;
	}

}