/*===============================
  Header
================================*/
#header {
	position: fixed;
	display: flex;
	justify-content: space-between;
	background: #fff;
	border-bottom: 1px solid #e9ebec;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",Meiryo,sans-serif;
	color: #1d2c39;
	width: 100%;
	height: 70px;
	/*padding: 5px 30px 8px;*/
	z-index: 1000;
}

#header h1 {
	display: flex;
	align-items: center;
}

#logo {
	fill: #06f;
}

#header .nav-list {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 15px;
	/*margin-left: -8vw;*/
	padding-top: 10px;
}


/*========================
		contact
==========================*/

#header .header_contact,
#header .header_download {
	/*position: relative;*/
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	font-size: 14px;
	font-style: normal;
	white-space: nowrap;
	padding-left: 10px;
}

.header_contact {
	border: solid #b8bec2;
    border-width: 0 1px 0 0;
    padding-right: 20px;
}

.header_download {
    padding-right: 20px;
}


#header .header-tel2 {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3em;
	font-weight: 500;
	font-style: normal;
	white-space: nowrap;
	min-width: 180px;
	padding-left: 10px;
}

#header .header_contact::before {
	content: url('/img/icon/icon-email_266a95.svg');
	display: inline-block;
	width: 20px;
	margin: 0px 8px -5px;
}

#header .header_download::before {
	content: url('/img/icon/icon-download_266a95.svg');
	display: inline-block;
	width: 20px;
	margin: 0px 8px -5px;
}



#header .header-tel2::before {
	content: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20style%3D%22enable-background%3Anew%200%200%2015.7%2020%22%20viewBox%3D%220%200%2015.7%2020%22%3E%3Cpath%20d%3D%22M3.2%200c.4-.1%201.6.7%202.4%202%201%201.4%201.5%202.7%201.4%203-.2.2-.6.8-1%201l-.5.1c-.6.2-.4.2-.4.2-.3.1-1.2.5-1.4%201.1-.1.4%200%20.9%200%20.9s.1.4%201.3%202.3c1.5%202.3%203.2%203.9%203.8%204.2.5.3.9.1%201.2.1s.4-.4.4-.4c.3-.5.9-1.1%201.3-1.1s1.5.8%202.4%201.7c.9.9%201.6%202.1%201.5%202.4-.1.4-.8%201.3-1.5%202.1l-.5.1c-.7.3-2.5.3-4.4-.7S4.5%2015.5%203%2013.4C1.7%2011.3.2%207.6.1%206.2%200%204.8-.1%203.4.4%202.3c.3-.5.5-.8.5-.8C1.7%201%202.7.3%203.2%200z%22%20style%3D%22fill%3A%23fff%22%2F%3E%3C%2Fsvg%3E');
	display: inline-block;
	color: #FFF;
	width: 20px;
	margin: 0px 8px -5px;
}

#header .header-tel::after {
	content: '';
	position: absolute;
	left: 0;
	background: #b8bec2;
	width: 1px;
	height: 50%;
}

#header .header-tel2::after {
	content: '';
	position: absolute;
	left: 0;
	background: #fff;
	width: 1px;
	height: 50%;
}


/*-------------------------------*/


#header .nav-list.sp {
	display: none;
}

#header .nav-list li {
	border: solid #b8bec2;
	border-width: 0  1px 0 0;
	font-weight: 300;
	text-align: center;
	padding: 5px 20px;
	margin: 0;
}

#header .nav-list li:last-child {
	border-right: 0;
}

#header .nav-list li > a {
	padding: 5px 20px;
}

#header .header-email {
	padding-left: 10px;
}

#header .header-tel2 {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3em;
	font-weight: 500;
	font-style: normal;
	white-space: nowrap;
	min-width: 180px;
	padding-left: 10px;
}

#header .header-email::before {
	content: url('/img/icon/icon-email_266a95.svg'); 
	width: 20px;
	margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 
}

#header .header-tel2::before {
	/*content: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20style%3D%22enable-background%3Anew%200%200%2015.7%2020%22%20viewBox%3D%220%200%2015.7%2020%22%3E%3Cpath%20d%3D%22M3.2%200c.4-.1%201.6.7%202.4%202%201%201.4%201.5%202.7%201.4%203-.2.2-.6.8-1%201l-.5.1c-.6.2-.4.2-.4.2-.3.1-1.2.5-1.4%201.1-.1.4%200%20.9%200%20.9s.1.4%201.3%202.3c1.5%202.3%203.2%203.9%203.8%204.2.5.3.9.1%201.2.1s.4-.4.4-.4c.3-.5.9-1.1%201.3-1.1s1.5.8%202.4%201.7c.9.9%201.6%202.1%201.5%202.4-.1.4-.8%201.3-1.5%202.1l-.5.1c-.7.3-2.5.3-4.4-.7S4.5%2015.5%203%2013.4C1.7%2011.3.2%207.6.1%206.2%200%204.8-.1%203.4.4%202.3c.3-.5.5-.8.5-.8C1.7%201%202.7.3%203.2%200z%22%20style%3D%22fill%3A%23fff%22%2F%3E%3C%2Fsvg%3E');*/
	display: inline-block;
	color: #FFF;
	width: 20px;
	margin: 0px 8px -5px;
}

#header .header-tel::after {
	content: '';
	position: absolute;
	left: 0;
	background: #b8bec2;
	width: 1px;
	height: 50%;
}

#header .header-tel2::after {
	content: '';
	position: absolute;
	left: 0;
	background: #fff;
	width: 1px;
	height: 50%;
}

@media (max-width: 1610px) {
	#header .nav-list li {
		padding: 5px 0;
	}
	#header .header-tel {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.2em;
		font-weight: 500;
		font-style: normal;
		white-space: nowrap;
		min-width: 180px;
		padding-left: 10px;
	}

	#header .header-tel2 {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.2em;
		font-weight: 500;
		font-style: normal;
		white-space: nowrap;
		min-width: 180px;
		padding-left: 10px;
	}

	#header .header-tel::before {
		content: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22_x32_%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220%22%20y%3D%220%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M478.047%2C400.316c-19.356-18.424-81.443-56.049-97.112-61.134c-15.659-5.096-36.341%2C8.668-43.342%2C27.382%20c-7.012%2C18.715-16.85%2C16.022-16.85%2C16.022s-37.242-17.472-101.504-93.726s-75.167-115.92-75.167-115.92s-0.984-10.16%2C18.662-13.898%20c19.615-3.729%2C36.693-21.769%2C34.321-38.071c-2.34-16.301-28.904-83.876-43.776-106.06C138.377-7.262%2C105.153%2C0.61%2C97.593%2C5.146%20c-7.571%2C4.536-86.756%2C45.692-71.842%2C135.492c14.934%2C89.801%2C57.26%2C164.294%2C105.904%2C222.022%20c48.644%2C57.726%2C114.884%2C112.087%2C200.863%2C142.018c85.958%2C29.93%2C139.956-41.136%2C145.704-47.826%20C483.971%2C450.172%2C497.361%2C418.761%2C478.047%2C400.316z%22%20style%3D%22fill%3A%20%231d2c39%3B%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');
		display: inline-block;
		width: 18px;
		margin: 0px 5px -5px;
	}

	#header .header-tel2::before {
	content: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22_x32_%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220%22%20y%3D%220%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M478.047%2C400.316c-19.356-18.424-81.443-56.049-97.112-61.134c-15.659-5.096-36.341%2C8.668-43.342%2C27.382%20c-7.012%2C18.715-16.85%2C16.022-16.85%2C16.022s-37.242-17.472-101.504-93.726s-75.167-115.92-75.167-115.92s-0.984-10.16%2C18.662-13.898%20c19.615-3.729%2C36.693-21.769%2C34.321-38.071c-2.34-16.301-28.904-83.876-43.776-106.06C138.377-7.262%2C105.153%2C0.61%2C97.593%2C5.146%20c-7.571%2C4.536-86.756%2C45.692-71.842%2C135.492c14.934%2C89.801%2C57.26%2C164.294%2C105.904%2C222.022%20c48.644%2C57.726%2C114.884%2C112.087%2C200.863%2C142.018c85.958%2C29.93%2C139.956-41.136%2C145.704-47.826%20C483.971%2C450.172%2C497.361%2C418.761%2C478.047%2C400.316z%22%20style%3D%22fill%3A%20%231d2c39%3B%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');
	display: inline-block;
	color: #FFF;
	width: 18px;
	margin: 0px 5px -5px;
}

	#header .header-tel::after {
		content: '';
		position: absolute;
		left: 0;
		background: #b8bec2;
		width: 1px;
		height: 50%;
	}

	#header .header-tel2::after {
		content: '';
		position: absolute;
		left: 0;
		background: #b8bec2;
		width: 1px;
		height: 50%;
	}
}

@media (max-width: 850px) {
	#header .header-tel::after {
		display: none;
	}

	#header .header-tel2::after {
		display: none;
	}

	#header {
		align-items: center;
		padding: 5px 20px;
	}

	#header .header-tel {
		font-size: 1.2em;
		min-width: initial;
		padding: 0;
		margin-left: auto;
	}

		#header .header-tel2 {
		font-size: 1.2em;
		min-width: initial;
		padding: 0;
		margin-left: auto;
	}

	#header .header-tel::before {
		margin: 0px 3px -4px;
	}

	#header .header-tel2::before {
		margin: 0px 3px -4px;
	}
}

/* toggle */
.scrollPrevent {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
}

#nav-toggle {
	display: none;
}

.nav-tgl-btn {
	position: relative;
	display: none;
	width: 25px;
	height: 25px;
	cursor: pointer;
	margin-right: 15px;
	z-index: 10;
}

.nav-tgl-btn span,
.nav-tgl-btn::before,
.nav-tgl-btn::after {
	content: '';
	position: absolute;
	top: 50%;
	display: block;
	background: #1e2c39;
	width: 22px;
	height: 2px;
	transition: .3s;
}

.nav-tgl-btn::before {
	transform: translateY(-8px);
}

.nav-tgl-btn::after {
	transform: translateY(8px);
}

#nav-toggle:checked ~ .nav-tgl-btn {
	position: fixed;
	top: 15px;
	transform: translateX(82vw);
}

#nav-toggle:checked ~ .nav-tgl-btn span {
	transform: scaleX(0);
}

#nav-toggle:checked ~ .nav-tgl-btn::before {
	background: #fff;
	transform: rotate(45deg);
}

#nav-toggle:checked ~ .nav-tgl-btn::after {
	background: #fff;
	transform: rotate(-45deg);
}

.nav-active-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transition: .6s;
	z-index: 1;
}

#nav-toggle:checked ~ .nav-active-bg {
	background: rgba(0, 0, 0, .8);
	pointer-events: auto;
}

@media (max-width: 850px) {
	.nav-tgl-btn {
		display: block;
	}

	#header .header-nav {
		position: fixed;
		top: 0;
		left: 0;
		background: #fff;
		overflow: auto;
		width: 80vw;
		min-width: 265px;
		max-width: calc(100vw - 50px);
		height: 100%;
		transform: translateX(-100%);
		transition: .5s;
		z-index: 1000;
	}

	#header .nav-list,
	#header .nav-list.sp {
		display: block;
		height: auto;
	}

	#header .nav-list li {
		border-color: #f2f3f4;
		border-width: 0 0 1px;
		text-align: left;
		padding: 0;
	}

	#header .nav-list li a {
		display: block;
		padding: 15px;
	}

	#header #nav-toggle:checked ~ .header-nav {
		transform: none;
	}
}


/*===============================
  Common
================================*/
@media (max-width: 1300px) {
	#footer .footer-logo a,
	#footer .footer-address .addr {
		margin: 0;
	}
}

@media (min-width: 851px) {
  body,
  #header,
  #footer {
    min-width: 1300px;
  }
}