/* ==========================================================================
   NEXT GENERATION ─ フッター
   YOOtheme（UIkit）のフッタービルダーに、ローカル版と同じ見た目を当てる。

   置き場所：YOOtheme → Settings → Custom Code → CSS
   　　　　　または子テーマ next_generation/style.css

   前提：フッター最上位の uk-section に ng-footer クラスを付けること。
   　　　すべての指定を .ng-footer 配下に閉じてあるので、他ページには影響しない。
   ========================================================================== */

.ng-footer {
	/* デザイントークン（他セクションでも使えるよう変数で持つ） */
	background: var(--ng-offwhite);
	padding: 72px 0 96px;
	font-family: var(--ng-ja);
	font-weight: 300;
	font-size: 12px;
	line-height: 2;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

@media (min-width: 960px) {
	.ng-footer { padding: 96px 0 40px; }
}

/* --------------------------------------------------------------------------
   ブランド（ロゴ・タグライン）
   -------------------------------------------------------------------------- */
.ng-footer .ng-footer-logo {
	margin: 0;
	font-family: var(--ng-en);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: .22em;
	color: var(--ng-ink);
	text-transform: none;
}

.ng-footer .ng-footer-tagline {
	margin: 8px 0 0;
	font-family: var(--ng-ja);
	font-size: 11px;
	line-height: 1.9;
	letter-spacing: .1em;
	color: var(--ng-ink-45);
}

/* --------------------------------------------------------------------------
   Instagram（uk-subnav）
   -------------------------------------------------------------------------- */
.ng-footer .ng-footer-sns-title {
	margin: 22px 0 0;
	font-family: var(--ng-en);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .2em;
	color: var(--ng-ink-45);
	text-transform: none;
}

.ng-footer .ng-footer-instagram { margin-top: 8px; }

.ng-footer .ng-footer-instagram .uk-subnav {
	margin: 0 0 0 -20px;
	row-gap: 6px;
}

.ng-footer .ng-footer-instagram .uk-subnav > * > :first-child,
.ng-footer .ng-footer-instagram .el-link {
	display: inline-block;
	padding: 0 0 2px;
	font-family: var(--ng-en);
	font-size: 11px;
	letter-spacing: .12em;
	line-height: 1.6;
	color: var(--ng-ink-70);
	border-bottom: 1px solid var(--ng-ink-12);
	text-transform: none;
	transition: color .3s cubic-bezier(.22,.61,.36,1),
	            border-color .3s cubic-bezier(.22,.61,.36,1);
}

.ng-footer .ng-footer-instagram .el-link:hover {
	color: var(--ng-green-dk);
	border-bottom-color: var(--ng-green);
}

/* --------------------------------------------------------------------------
   カラム見出し（MENU / WEB予約）
   -------------------------------------------------------------------------- */
.ng-footer .ng-footer-menu-title {
	margin: 0 0 12px;
	padding-bottom: 10px;
	font-family: var(--ng-en);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: .2em;
	color: var(--ng-ink-45);
	border-bottom: 1px solid var(--ng-ink-12);
	text-transform: none;
}

/* --------------------------------------------------------------------------
   メニュー・WEB予約リスト
   -------------------------------------------------------------------------- */
.ng-footer .ng-footer-menu.uk-list > li,
.ng-footer .ng-footer-menu .el-item {
	margin: 0;
	padding: 4px 0;
}

.ng-footer .ng-footer-menu .uk-panel,
.ng-footer .ng-footer-menu a,
.ng-footer .ng-footer-menu .el-title {
	font-family: var(--ng-ja);
	font-size: 12px;
	line-height: 1.9;
	letter-spacing: .06em;
	color: var(--ng-ink-70);
	text-decoration: none;
	transition: color .3s cubic-bezier(.22,.61,.36,1);
}

.ng-footer .ng-footer-menu a:hover,
.ng-footer .ng-footer-menu a:hover .el-title {
	color: var(--ng-green-dk);
}

/* WEB予約の補足行（hair / まつげ・眉毛 など） */
.ng-footer .ng-footer-menu .el-meta {
	margin: 0;
	font-family: var(--ng-ja);
	font-size: 10px;
	line-height: 1.7;
	letter-spacing: .04em;
	color: var(--ng-ink-45);
	text-transform: none;
}

/* ホットペッパーへ移動する旨の注記 */
.ng-footer .ng-footer-note {
	margin: 12px 0 0;
	font-family: var(--ng-ja);
	font-size: 10px;
	line-height: 1.8;
	letter-spacing: .04em;
	color: var(--ng-ink-45);
}

/* --------------------------------------------------------------------------
   会社概要
   -------------------------------------------------------------------------- */
.ng-footer .ng-footer-company {
	margin-top: 48px;
}

@media (min-width: 960px) {
	.ng-footer .ng-footer-company { margin-top: 64px; }
}

/* uk-list-divider は2件目以降にしか罫線を引かないので、全行に引き直す */
.ng-footer .ng-footer-company.uk-list > li,
.ng-footer .ng-footer-company > .el-item {
	margin: 0;
	padding: 10px 0;
	border-top: 1px solid var(--ng-ink-12);
}

.ng-footer .ng-footer-company .uk-width-small {
	width: 96px;
}

.ng-footer .ng-footer-company .el-title {
	font-family: var(--ng-ja);
	font-size: 10px;
	line-height: 1.9;
	letter-spacing: .14em;
	color: var(--ng-ink-45);
	padding-top: .25em;
}

.ng-footer .ng-footer-company .el-content {
	font-family: var(--ng-ja);
	font-size: 12px;
	line-height: 1.9;
	letter-spacing: .04em;
	color: var(--ng-ink);
}

.ng-footer .ng-footer-company .el-content a {
	color: var(--ng-ink);
	text-decoration: none;
}

.ng-footer .ng-footer-company .el-content a:hover {
	color: var(--ng-green-dk);
}

/* --------------------------------------------------------------------------
   コピーライト
   -------------------------------------------------------------------------- */
.ng-footer .ng-footer-copy {
	margin-top: 32px;
	font-family: var(--ng-en);
	font-size: 10px;
	line-height: 1.8;
	letter-spacing: .12em;
	color: var(--ng-ink-45);
}

/* --------------------------------------------------------------------------
   モーション低減
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ng-footer * { transition-duration: .001ms !important; }
}