@charset "UTF-8";

/* Layout
------------------------- */
.skin {
	width: 1040px;
	margin: auto;
}

/* Header
------------------------- */
#top {
	transition: 0.4s;
	z-index: 9999;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background-color: #fff;
}
#top.onScroll {
	height: 60px;
}
.head_and_foot {
	display: flex;
}
.siteId__outer {
	flex: 1 1 180px;
}
.onScroll .siteId__outer {
	flex: 1 1 108px;
	width: 108px;
}
.siteId {
	transition: 0.4s;
	width: 180px;
	height: 100px;
	background-color: var(--deep-green);
}
.onScroll .siteId {
	transition: 0.4s;
	width: 108px;
	height: 60px;
}

.logo__outer {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
.logo {
	transition: 0.4s;
	width: 130px;
	height: 84px;
}
.onScroll .logo {
	width: 74px;
	height: 48px;
}
.svg-logo {
	fill :#fff;
}
.gnavi__outer {
	flex: 0 0 590px;
}
.contact__outer {
	flex: 0 0 445px;
}
.contact {
	transition: 0.4s;
	display: flex;
	height: 100px;
	justify-content: center;
	align-items: center;
}
.onScroll .contact {
	height: 60px;
}
.tel-number {
	display: inline-block;
	margin: 0 15px 0 0;
	font-size: 21px;
	color: var(--deep-green);
}
.tel-number:before {
	display: inline-block;
	content: "";
	width: 19px;
	height: 19px;
	margin: 0 7px 0 0 ;
	-webkit-mask: url("../img/icon/phone-line.svg") no-repeat 50% 50%;
	mask: url("../img/icon/phone-line.svg") no-repeat 50% 50%;
	-webkit-mask-size: cover;
	mask-size: cover;
	background-color: var(--deep-green);
}
.open-time {
	display: inline-block;
	margin: 0 15px 0 0;
	font-size: 12px;
}
.contact__button {
	cursor: pointer;
	width: 140px;
	height: 30px;
	border: solid 1px var(--deep-green);
	background-color: #fff;
	color: var(--deep-green);
}
#menu__button {
	cursor: pointer;
	transition: 0.4s;
	flex: 0 0 60px;
	height: 100px;
	display: none;
	justify-content: center;
	align-items: center;
}
.onScroll #menu__button {
	height: 60px;
}
.menu__button--inner {
	width: 30px;
	height: 30px;
}

#menu-symbol {
	fill: var(--deep-green);
}
#wrap-main {
	padding: 100px 0 0;
}

/* Global Navigation
------------------------- */
.gnavi {
	display: flex;
	list-style-type: none;
}
.menu-item {
	transition: 0.4s;
	display: flex;
	height: 100px;
	justify-content: center;
	align-items: center;
	margin: 0 30px 0 0;
}
.onScroll .menu-item {
	height: 60px;
}
.gnavi a {
	display: block;
	transform: rotate(0.05deg);
	text-decoration: none;
	color: #333;
}

/* Chest
------------------------- */
#chest {
	overflow: hidden;
	width: 100%;
}

/* Footer
------------------------- */
#foot {
	height: 100px;
}
#foot {
	background-color: var(--deep-green);
}
#foot .siteId__outer {
	overflow: hidden;
	height: 100px;
}
#foot .tel-number {
	color: #fff;
}
#foot .open-time {
	color: #fff;
}
#foot .contact__button {
	border: solid 1px #fff;
	background-color: var(--deep-green);
	color: #fff;
}
#foot .gnavi a {
	color: #fff;
}
#foot .tel-number:before {
	background-color: #fff;
}

/* Floating Menu
------------------------- */
#floating_menu {
	z-index: 9999;
	display: none;
	position: fixed;
	top: 100px;
	left: 0;
	width: 100%;
	padding: 0 0 20px;
	background-color: var(--deep-green);
}
#floating_menu.showed {
	display: block;
}
#floating_menu.onScroll {
	top: 60px;
}
#floating_menu .tel-number {
	color: #fff;
}
#floating_menu .open-time {
	color: #fff;
}
#floating_menu .contact__button {
	border: solid 1px #fff;
	background-color: var(--deep-green);
	color: #fff;
}
#floating_menu .tel-number:before {
	background-color: #fff;
}

/* Gnavi 2
------------------------- */
.gnavi2 a {
	transform: rotate(0.05deg);
	text-decoration: none;
	color: #fff;
}
.gnavi2 .menu-item {
	height: 55px;
	margin: 0;
}
.gnavi2 .menu-item:first-child {
	padding: 10px 0 0;
}

/* End of base.css */