@charset "utf-8";

/* -----------------------------------
 * Drawer css
 */

@media (max-width: 768px) {
	.sb-slidebar nav {
		padding: 20px 0 50px;
	}
}

@media (min-width: 769px) {
	.sb-slidebar nav {
		padding: 10px;
	}
}

.sb-slidebar nav h2,
.sb-slidebar nav a {
	display: block;
	padding: 0 1em;
}

/* ------------------------------------------------ menu button */

#mobilebar {
	display: table;
	width: 100%;
	padding: 0 12px;
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
#mobilebar li {
	display: table-cell;
	font-size: 1.8rem;
	line-height: 1;
	text-align: left;
	vertical-align: middle;
}
#mobilebar li:first-child,
#mobilebar li:last-child {
	width: 90px;
}
#mobilebar li:last-child {
	text-align: right;
}

#mobilebar a {
	display: inline-block;
	width: 38px;
	height: 38px;
	cursor: pointer;
}

#mobilebar li:first-child a {
	background: url(js/slidebars/images/menu.svg) no-repeat center center;
	background-size: contain;
}
#mobilebar li:nth-child(2) {
	text-align: center;
}
#mobilebar li:nth-child(2) a {
	width: auto;
}
#mobilebar a img {
	width: 110px;
	height: auto;
	line-height: 38px;
}
#mobilebar li:last-child a:first-child {
	background: url(js/slidebars/images/phone.svg) no-repeat center center;
	background-size: contain;
}
#mobilebar li:last-child a:last-child {
	background: url(js/slidebars/images/mail.svg) no-repeat center center;
	background-size: contain;
	margin: 0 0 0 8px;
}

/*
電話単体の場合
#mobilebar li:nth-child(2) a:last-child {
	background: url(js/slidebars/images/phone.svg) no-repeat center center;
	background-size: contain;
}
*/

/* ------------------------------------------------ drawer */

#drawer {
	display:none;
	width: 100%;
	height: 100%;
	min-height: 100vh;
	background: rgba(0,0,0,.7);
	font-size: 1.4rem;
	overflow-y: scroll;
	padding: 32px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 99999;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#drawer nav {
	text-align: center;
	margin: 0 auto;
}
#drawer h2 {
	font-size: 1.8rem;
	color: #fff;
	text-align: center;
	padding: 0 16px;
	margin: 0 0 12px;
}

@media (max-width: 768px) {

	#drawer dt {
		color: #fff;
		font-size: 1.6rem;
		margin: 20px 0 12px;
	}
	#drawer a {
		display: inline-block;
		color: #fff;
		padding: 15px 16px;
	}

}

@media (min-width: 769px) {

	#drawer dt {
		color: #fff;
		font-size: 1.6rem;
		margin: 32px 0 16px;
	}
	#drawer dd {
		margin: 16px 0;
	}
	#drawer a {
		display: inline-block;
		color: #fff;
		padding: 0;
	}

}

#drawer dt a:before {
	font-family: 'FontAwesome';
	content: "\f00b";
	margin: 0 4px 0 0;
}
#drawer dd a:before {
	font-family: 'FontAwesome';
	content: "\f138";
	margin: 0 4px 0 0;
}

@media (max-width: 768px) {

	#drawer .sb-close {
		font-size: 1.6rem;
		text-align: center;
		cursor: pointer;
	}
	#drawer p:not(.sb-close) {
		text-align: center;
	}
}

@media (min-width: 769px) {

	#drawer .sb-close {
		text-align: right;
	}
	#drawer .sb-close a {
		display: inline-block;
		background: rgba(255,255,255,.2);
		color: #fff;
		font-size: 1.4rem;
		vertical-align: middle;
		padding: 4px 8px;
		cursor: pointer;
		cursor: pointer;
		-webkit-border-radius: 4px;
		border-radius: 4px;
	}
	#drawer .sb-close a i {
		display: inline-block;
		color: #fff;
		font-size: 2.0rem;
		margin: 0 0.25em 0 0;
		vertical-align: middle;
	}
	#drawer p:not(.sb-close) {
		text-align: center;
	}

}

#drawer .sb-close img {
	width: 44px;
	height: auto;
}	

/* wrapper */
#wrapper.locked {
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	position: fixed;
}