@charset "UTF-8";

$brand-colors: (
	primary:	$brand-primary,
	success:	$brand-success,
	info:			$brand-info,
	warning:	$brand-warning,
	danger:		$brand-danger
);

// animation
a {
	transition-timing-function: ease;
	transition-duration: 0.3s;
	transition-property: all;
}

// buttons
.btn {
	position: relative;
	border-width: 0;
	border-radius: 2px;
	outline: none;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
	&::before {
		position: absolute;
		top: 50%;
		left: 50%;
		display: block;
		width: 0;
		padding-top: 0;
		content: "";
		background-color: rgba(236, 240, 241, .3);
		border-radius: 100%;
		transform: translate(-50%, -50%);
	}
	&.active,
	&:active {
		box-shadow: none;
	}
	&.btn-link {
		background-color: transparent;
		box-shadow: none;
	}
}
.dropdown-menu {
	margin: 0;
	background-color: rgba($dropdown-bg, 0.9);
	border: 0;
	box-shadow: none;
}

.btn-group,
.dropdown-toggle,
.btn-group-vertical {
	box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
	.btn-group,
	.btn {
		border-left: 1px solid $gray-lighter;
		box-shadow: none;
	}
}

.dropdown {
	.dropdown-toggle {
		box-shadow: none;
	}
}

// navbar
.navbar {
	&.navbar-default,
	&.navbar-inverse {
		background-color: rgba(#fff, .9);
		border: 0;
		border-bottom: 1px solid $brand-primary;
		.navbar-nav {
			> li:not(.active) {
				> a:hover {
					background-color: transparent;
				}
			}
			@media (min-width: $grid-float-breakpoint) {
				> li {
					> a {
						padding-top:    ($navbar-padding-vertical / 4);
						padding-bottom: ($navbar-padding-vertical / 4);
						margin-top:     ($navbar-padding-vertical / 4 * 3);
						margin-bottom:  ($navbar-padding-vertical / 4 * 3);
						background-color: transparent;
						// underbar(hover animation)
						&::after {
							position: absolute;
							bottom: 0;
							left: 0;
							width: 100%;
							height: 1px;
							content: "";
							background-color: $brand-primary;
							transition: all .3s ease;
							transform: scaleX(0);
						}
						&:hover {
							&::after {
								transform: scaleX(1);
							}
						}
					}
					> .dropdown-menu {
						margin-top: (-$navbar-padding-vertical / 4 * 3);
						li {
							a {
								&:hover {
									color: $brand-primary;
									background-color: transparent;
								}
							}
						}
					}
					// active nav
					&.active {
						> a {
							color: $text-color;
							background-color: transparent;
							&::after {
								position: absolute;
								bottom: 0;
								left: 0;
								width: 100%;
								height: 1px;
								content: "";
								background-color: $brand-primary;
								transform: scaleX(1);
							}
							&:hover {
								color: $text-color;
								background-color: transparent;
							}
						}
					}
					&.open {
						> a {
							color: $text-color;
							background-color: transparent;
							&:focus {
								color: $text-color;
								background-color: transparent;
								&::after {
									position: absolute;
									bottom: 0;
									left: 0;
									width: 100%;
									height: 1px;
									content: "";
									background-color: $brand-primary;
									transform: scaleX(1);
								}
							}
						}
					}
				}
				> li:not(:last-child) {
					margin-right: ($navbar-padding-horizontal / 3);
				}
			}
			// smartphones
			@media (max-width: $screen-sm) {
				> li {
					&.open,
					&.active {
						> a {
							color: $brand-primary;
							background-color: transparent;
						}
					}
				}
			}
		}
	}
	&.navbar-inverse {
		background-color: rgba($gray-darker, .8);
		border: 0;
		border-bottom: 1px solid $brand-primary;
		@media (min-width: $grid-float-breakpoint) {
			.navbar-nav {
				li {
					&.active {
						> a {
							color: $gray-lighter;
							&:hover {
								color: #fff;
								&::after {
									background-color: #fff;
								}
							}
						}
					}
					&.open {
						> a {
							color: $gray-lighter;
							background-color: transparent;
							&:focus {
								color: $text-color;
								background-color: transparent;
								&::after {
									position: absolute;
									bottom: 0;
									left: 0;
									width: 100%;
									height: 1px;
									content: "";
									background-color: $brand-primary;
									transform: scaleX(1);
								}
							}
							&:focus {
								color: $gray-lighter;
							}
						}
					}
					> .dropdown-menu {
						li {
							a {
								color: $gray-lighter;
							}
						}
						background-color: rgba($gray-darker, .9);
					}
				}
			}
		}
		.btn {
			&:hover {
				color: $gray-lighter;
			}
			&.btn-default {
				&:hover {
					background-color: $gray-darker;
				}
			}
		}
	}

	.navbar-brand {
		margin-right: ($navbar-padding-horizontal / 3);
		font-size: $font-size-large;
	}
}

// label
.label {
	vertical-align: 2px;
}

// form
.form-group,
[class*="has-"] {
	.form-control {
		box-shadow: none;
		&:focus {
			box-shadow: none;
		}
	}
	.input-group {
		.input-group-btn {
			.btn {
				border-width: 1px;
				box-shadow: none;
			}
		}
	}
}

// modal
.modal {
	.modal-dialog {
		.modal-content {
			border-radius: 0;
		}
	}
}

// label
.label {
	border-radius: 0;
}

// Tabs
.nav-tabs {
	> li {
		> a {
			border-radius: 0;
		}
	}
}

// Pills
.nav-pills {
	> li {
		> a {
			border-radius: 0;
		}
		&:not(.active) {
			> a:hover {
				background-color: transparent;
			}
		}
		&.active {
			> a {
				color: $text-color;
				background-color: transparent;
				&::after {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 1px;
					content: "";
					background-color: $brand-primary;
					transform: scaleX(1);
				}
				&:hover {
					color: $text-color;
					background-color: transparent;
				}
			}
		}
		&.open {
			> a {
				color: $text-color;
				background-color: transparent;
				&:focus {
					color: $text-color;
					background-color: transparent;
					&::after {
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 1px;
						content: "";
						background-color: $brand-primary;
						transform: scaleX(1);
					}
				}
			}
		}
	}
}

// フォント指定
.no-thank-yu,
.navbar,
.btn,
.form-control,
.input-gruop,
.breadcrumb,
.nav-tabs,
.nav-pills,
.panel-title,
.list-group,
.pagination,
.pager,
.alert,
.label,
.badge,
.panel-heading,
.lead,
.tooltip,
.popover {
	font-family: $font-family-sans-serif;
}