// ==================================================
// footer
// ==================================================
footer {
	background: $midsilver;
	padding-top: 30px;
	border-bottom: 5px solid $sub;
	.pagetop {
		background: $grey;
		color: $white;
		position: fixed;
		bottom: 20px;
		right: 20px;
		padding: 10px;
		font-weight: bold;
		border-radius: 4px;
		cursor: pointer;
		text-align: center;
		@include opacity(0.7);
		@include fs(12);
		@include fontAwesome('\f077',inherit,inherit);
		&:before {
			@include fs(22);
			display: block;
		}
		&:hover {
			@include opacity(1);
		}
	}
	// f_navigation
	// ----------------------------------------
	.f_navigation {
		.row {
			padding-bottom: 20px;
			border-bottom: 1px solid $lightgrey;
		}
		.f_left {
			float: left;
			.site_ttl {
				@include fs(12);
				float: left;
				width: 400px;
			}
			.f_logo {
				clear: both;
				float: left;
				margin-right: 20px;
				margin-top: 15px;
				a img {width: 165px;}
			}
			.f_catnav {
				float: left;
				li {
					float: left;
					padding: 5px;
					a {
						display: block;
						background: $midsilver;
						border: 3px solid $white;
						box-shadow: 2px 3px 10px rgba($trueblack,0.1);
						img {width: 64px;}
						&:hover {
							background: $white;
							border-color: $midgrey;
							img {
								@include opacity(1);
							}
						}
					}
				}
			}
		}
		.f_right {
			float: right;
			.f_sitemap {
				width: 220px;
				float: left;
				a {
					@include fs(16);
					@include fontAwesome('\f0da',inherit,inherit);
				}
			}
		}
	}
	// f_shopinfo
	// ----------------------------------------
	.f_shopinfo {
		.row {
			padding-top: 30px;
			border-bottom: 1px solid $lightgrey;
		}
		.f_shopinfo_ttl {
			width: 260px;
			text-align: center;
			float: left;
			img {
				width: 196px;
			}
		}
		.f_shopinfo_cont {
			float: right;
			width: 840px;
			dl {
				float: left;
				width: 280px;
			}
			.shopname {
				img {
					width: 243px;
				}
			}
			.shopinfo {
				border-left: 5px solid $lightgrey;
				padding-left: 10px;
				min-height: 100px;
				margin: 10px 0 30px;
				@include fs(14);
				line-height: 20px;
			}
		}
	}
	// f_address
	// ----------------------------------------
	.f_address {
		padding: 15px 0;
		text-align: center;
		@include fs(14);
	}
}
@include ltMD {
	footer {
		.pagetop {}
		// f_navigation
		// ----------------------------------------
		.f_navigation {
			.f_right {
				.f_sitemap {
					width: 160px;
					line-height: 1.8;
				}
			}
		}
		// f_shopinfo
		// ----------------------------------------
		.f_shopinfo {
			.f_shopinfo_ttl {
				width: 196px;
			}
			.f_shopinfo_cont {
				width: 750px;
				dl {
					width: 250px;
				}
			}
		}
		// f_address
		// ----------------------------------------
		.f_address {}
	}
};
@include ltSM {
	footer {
		.pagetop {
			white-space: nowrap;
		}
		// f_navigation
		// ----------------------------------------
		.f_navigation {
			.f_left {
				.site_ttl {
					@include fs(12);
					margin-left: 10px;
					float: none;
					width: 290px;
				}
				.f_logo {
					margin: 10px;
					float: none;
				}
				.f_catnav {
					float: none;
				}
			}
			.f_right {
				.f_sitemap {
					margin-top: 70px;
					width: 150px;
				}
			}
		}
		// f_shopinfo
		// ----------------------------------------
		.f_shopinfo {
			.f_shopinfo_ttl {
				margin: 0 auto 40px;
				float: none;
			}
			.f_shopinfo_cont {
				float: none;
			}
		}
		// f_address
		// ----------------------------------------
		.f_address {}
	}
};
@include ltXS {
	footer {
		// f_navigation
		// ----------------------------------------
		.f_navigation {
			.f_left {
				float: none;
				text-align: center;
				.site_ttl {
					float: none;
					width: 100%;
				}
				.f_catnav {
					li {
						float: none;
						display: inline-block;
					}
				}
			}
			.f_right {
				float: none;
				width: 450px;
				margin: auto;
				margin-top: 20px;
				.f_sitemap {
					margin-top: 0;
					a {
						@include fs(17);
					}
				}
			}
		}
		// f_shopinfo
		// ----------------------------------------
		.f_shopinfo {
			.f_shopinfo_cont {
				dl {
					width: 33.3333%;
				}
				.shopinfo {
					min-height: 120px;
				}
			}
		}
		// f_address
		// ----------------------------------------
	}
};
@include ltXXS {
	footer {
		// f_navigation
		// ----------------------------------------
		.f_navigation {
			.f_right {
				width: 100%;
				border-top: 1px solid $lightgrey;
				.f_sitemap {
					width: 100%;
					a {
						@include fs(17);
						display: block;
						border-bottom: 1px solid $lightgrey;
						padding: 10px 0;
					}
				}
			}
		}
		// f_shopinfo
		// ----------------------------------------
		.f_shopinfo {
			.f_shopinfo_cont {
				dl {
					width: 50%;
					padding-right: 5%;
				}
				.shopname {
					img {
						width: 150px;
					}
				}
			}
		}
		// f_address
		// ----------------------------------------
		.f_address {}
	}
};