@charset "utf-8";


/* -- ul#menu -------------------------------------------------------------------------------- */

ul#menu {
	list-style-type: none;
	width: 80%;
	background: #222;
	opacity: 0.8;
	position: absolute;
	right:0px;
	z-index: 990;
	display: none;
	padding:30px 20px;
	top: 65px;
}

ul#menu li {
	text-align: left;
	position: relative;
}

ul#menu li a {
	text-decoration: none;
	display: block;
	padding: 13px 0;
	color: #ffffff;
	border-bottom: 1px solid;
}

ul#menu li a:hover {
	background: #a9a9a9;
	opacity: 0.7;
}

.sp-open a{

}


/* -- div#sp-icon -------------------------------------------------------------------------------- */

div#sp-icon {
	width: 65px;
	height: 65px;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 999;
}

div#sp-icon:hover {
	cursor: pointer;
	opacity: 0.7;
}

div#sp-icon span,
div#sp-icon span:before,
div#sp-icon span:after {
	display: inline-block;
	width: 30px;
	height: 4px;
	background: #1f1f1f;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.3s;
	border-radius: 5px;
}

div#sp-icon span {
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
}

div#sp-icon span:before {
	content: "";
	transform: translateY( -10px ) rotate( 0deg );
}

div#sp-icon span:after {
	content: "";
	transform: translateY( 10px ) rotate( 0deg );
}


div.sp-open span {
	background: transparent !important;
}

div.sp-open span:before {
	transform: rotate( 45deg ) !important;
}

div.sp-open span:after {
	transform: rotate( -45deg ) !important;
}


/* メニューアイコン */



ul#menu li .close-button:before,
ul#menu li a:before,
ul#menu li:before{
	content:"";

	display: inline-block;
	margin-right: 5px;
	color:#FF7CB4;
	font-weight: normal;
	padding:6px 5px 3px;
	text-align: center;
	font-family: 'FontAwesome';
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	border-radius:20px;
	position: absolute;
	top:14%;
	left:0px;
}
ul#menu li a:after,
ul#menu li:after {
    content: "\f105";
    display: inline-block;
    width: 20px;
    height: 20px;
    color:#fff;
    vertical-align: middle;
    text-align: center;
    font-family: 'FontAwesome';
    font-size: 30px;
    position: absolute;
    top: 30%;
    right: 5px;
}

ul#menu li.pencil:before{
	content: "\f040";
	font-size: 18px;
}
ul#menu li.sphone:before{
	content:"\f10b";
	font-size: 31px;
	transform: rotate(-15deg);
		-moz-transform: rotate(-15deg);
		-webkit-transform: rotate(-15deg);
}
ul#menu li.salary:before{
	content: "\f1c0";
	font-size: 20px;
}
ul#menu li.check:before{
	content: "\f00c";
	font-size: 20px;
}
ul#menu li.faq:before{
	content: "Ｑ";
	font-size: 20px;
	font-weight: 700;
}
ul#menu li.privacy:before{
	content: "\f007";
	font-size: 20px;
}
ul#menu li.file:before{
	content: "\f15c";
	font-size: 20px;
	transform: rotate(-15deg);
		-moz-transform: rotate(-15deg);
		-webkit-transform: rotate(-15deg);
}
ul#menu li.building:before{
	content: "\f1ad";
	font-size: 20px;
}
ul#menu li.envelope:before{
	content: "\f0e0";
	font-size: 20px;
	transform: rotate(-15deg);
		-moz-transform: rotate(-15deg);
		-webkit-transform: rotate(-15deg);
}
ul#menu li a.home:before{
	content: "\f015";
	font-size: 22px;
}
ul#menu li .close-button:before{
	content: "\f00d";
	font-size: 22px;
}
ul#menu li.volume-up:before{
	content: "\f028";
	font-size: 20px;
	transform: rotate(-15deg);
		-moz-transform: rotate(-15deg);
		-webkit-transform: rotate(-15deg);
}

/* 仕様アイコン */
.fa-bars:before { content: "\f0c9";}
.fa-close:before,
.fa-times:before { content: "\f00d";}
.fa-home:before { content: "\f015";}
.fa-angle-right:before { content: "\f105";}
.fa-heart:before { content: "\f004";}
.fa-check:before { content: "\f00c";}
.fa-angle-double-down:before { content: "\f103";}
.fa-mobile-phone:before,
.fa-mobile:before { content: "\f10b";}
.fa-lock:before { content: "\f023";}
.fa-volume-up:before { content: "\f028";}
.fa-video-camera:before { content: "\f03d";}
.fa-asterisk:before { content: "\f069";}
.fa-envelope:before { content: "\f0e0";}
.fa-database:before { content: "\f1c0";}
.fa-pencil:before { content: "\f040";}
.fa-user:before { content: "\f007";}
.fa-file-text:before { content: "\f15c";}
.fa-building:before { content: "\f1ad";}
.fa-external-link:before { content: "\f08e";}
.fa-chevron-left:before { content: "\f053";}
.fa-chevron-right:before { content: "\f054";}