@charset "utf-8";
/*
Theme Name: RareJob
Theme URI:
Description: RareJob
Version: 1.0
Author: monokus.jp

*/

.header-footer-sp-visible { }
.header-footer-sp-hidden { display: none; }

/* Header
---------------------------------------------*/
.header-dummy-spacing {
	display:		block !important;
}

#header {
	/*
	position:	fixed;
	left:		0;
	right:		0;
	top:		0;
	z-index:	100;

	width:		100%;
	margin:		0 auto;
	*/
	position:		relative;
	left:		0;
	right:		0;
	top:		0;
	z-index:	100;

	width:		100%;
	height:		54px;
	margin:		0 auto;

	background:		#fff url(../images/header-line-sp.svg) center bottom no-repeat;
	background-size:	100% 1px;
}
	#header .inner {
		margin:		0 auto;
		padding:	5px 15px 6px;
/*		max-width:	375px; */

		box-sizing:		border-box;

		position:	relative;
	}
	#header h1 {
		width:		100px;
	}
		#header h1 img {
			display:	block;
			width:		100%;
			height:		auto;
		}
	#header a.sp-menu-opener {
		position:	absolute;
		right:		15px;
		top:		0;
		bottom:		0;

		display:	block;
		width:		25px;
		height:		18px;
		overflow:	hidden;

		margin:		auto 0;
	}
		#header a.sp-menu-opener:before ,
		#header a.sp-menu-opener:after {
			position:	absolute;
			left:		0;
			right:		0;
			top:		0;
			bottom:		0;

			display:	block;
			width:		100%;
			height:		auto;
			content:	'';
			overflow:	hidden;

			box-sizing:		border-box;
		}
			#header a.sp-menu-opener:before {
				height:		auto;

				border-top:		2px solid #000;
				border-bottom:	2px solid #000;
			}
			#header a.sp-menu-opener:after {
				margin:			auto 0;
				height:			0;
				border-bottom:	2px solid #000;
			}
		body.open-sp-menu a.sp-menu-opener:before {
			border-bottom:		none !important;
			height:			0 !important;
			margin:			auto 0 !important;

			transform: rotate(-45deg);
			transform-origin:center center;
		}
		body.open-sp-menu a.sp-menu-opener:after {
			transform: rotate(45deg);
			transform-origin:center center;
		}
	#header .menu {
		display:		none !important;
	}

body.open-sp-menu {
	background:		#f4f4f4;
}
body.open-sp-menu #viewport {
	position:	fixed;
	z-index:	-1;
}
body.open-sp-menu #header {
	/*
	background:		#fff url(../images/line01.png) center bottom no-repeat;
	background-size:	100% 2px;
	*/
}
.sp-menu {
	display:		none;
	background:		#f4f4f4;
	position:		relative;
	z-index:		9;

	font-size:		15px;
	line-height:	22px;
}
/*
	.sp-menu:before {
		display:	block;
		width:		100%;
		height:		2px;
		content:	'';
		overflow:	hidden;

		background:		url(../images/line01.png) center center no-repeat;
		background-size:	100% 100%;
	} */
	.sp-menu a {
		color:		#000;
		text-decoration:	none;
	}
	.sp-menu > ul {
	}
	.sp-menu > ul > li {
		border-top:		1px solid #8DC21F;
	}
		.sp-menu > ul > li:first-child {
			border-top:		none;
		}
			.sp-menu > ul > li.half {
				float:		left;
				width:		50%;
				box-sizing:		border-box;
			}
			.sp-menu > ul > li.half+li.half {
				border-left:		1px solid #8DC21F;
			}
			.sp-menu > ul > li.half a {
				text-align:		center;
			}
		.sp-menu > ul > li > a {
			display:	block;
			padding:	17px 20px;

			font-weight:	bold;
			position:	relative;
		}
		.sp-menu > ul > li > a:after {
			position:	absolute;
			right:		20px;
			top:		0;
			bottom:		0;
			margin:		auto 0;

			display:	block;
			width:		22px;
			height:		22px;

			font-size:		22px;
			font-weight:	normal;
			line-height:	1;
			content:		'keyboard_arrow_right';

			color:			#8f8f8f;
			font-family:	"Material Icons";
			text-align:		center;
		}
		.sp-menu > ul > li.has-sub > a:after {
			content:	'add';
		}
		.sp-menu > ul > li.has-sub.opened > a:after {
			content:	'remove';
		}
		.sp-menu > ul > li.open-window > a:after {
			position:	static;
			display:	inline-block;
			margin:		0 0 0 2px;
			vertical-align:		-2px;

			font-size:		100%;
			line-height:	1;
			content:	'filter_none';
		}
		.sp-menu > ul > li.contact > a:after {
			display:		none;
		}
			.sp-menu > ul > li .sub {
				display:		none;
				background:		#fff;
			}
			.sp-menu > ul > li .sub li {
				border-top: 1px solid #D4E0C3;
			}
			.sp-menu > ul > li .sub a {
				display:	block;
				padding:	16px 16px 16px 54px;

				font-size:		14px;
				line-height:	1;

				position:	relative;
			}
			.sp-menu > ul > li .sub a:before {
				position:	absolute;
				left:		30px;
				top:		0;
				bottom:		-2px;
				margin:		auto 0;

				display:	block;
				width:		16px;
				height:		16px;
				background:		#8DC21F;
				border-radius:	8px;
				text-indent:	0;

				font-size:		100%;
				font-weight:	normal;
				line-height:	16px;
				content:		'keyboard_arrow_right';

				color:			#fff;
				font-family:	"Material Icons";
				text-align:		center;
			}
	.sp-menu .lang {
		border-top:		1px solid #8DC21F;
		padding:	33px 20px 33px;

		text-align:	center;
	}
		.sp-menu .lang ul {
			display:	flex;
			justify-content: center;
		}
		.sp-menu .lang li {
		}
		.sp-menu .lang li:first-child:after {
			content:	'/';
			margin:		0 25px;
		}
		.sp-menu .lang li a {
			color:		#8f8f8f;
			text-decoration:	none;
		}
		.sp-menu .lang li a.current,
		.sp-menu .lang li span {
			color:		#000;
		}
.sp-menu-overlay {
	position:		fixed;
	left:		0;
	right:		0;
	top:		0;
	bottom:		0;

	display:	none;
	width:		100vw;
	height:		100vh;

	background:		#f4f4f4;
}
/* Footer
---------------------------------------------*/
.footer-sp-hidden {
	display:	none !important;
}
.footer-sp-visible {
}
#footer {
	font-size:		13px;
	line-height:	27px;
}
	#footer a {
		color:		#fff;
		text-decoration:	none;
	}
	#footer .inner {
		width:		100%;
		position:	relative;
	}
	#footer .footer-nav-sns {
		display:		flex;
		padding:		30px 0;
	}
		#footer .footer-nav-sns ul {
			display:			flex;
			width:		100%;
			justify-content: 	center;
		}
		#footer .footer-nav-sns li {
			width:		36px;
			margin:		0 15px;
		}
		#footer .footer-nav-sns li a {
			display:	block;
		}
	#footer .footer-nav-tree {
		display:		flex;
		padding:		0 0 30px;
	}
		#footer .footer-nav-tree > ul {
			border-bottom:		1px solid #666;
			width:		100%;
		}
		#footer .footer-nav-tree > ul > li .large li,
		#footer .footer-nav-tree > ul > li {
			border-top:		1px solid #666;
		}
			#footer .footer-nav-tree > ul > li .large li:first-child {
				border-top:		none;
			}
		#footer .footer-nav-tree  > ul > li > a ,
		#footer .footer-nav-tree  > ul > li .large a {
			display:	block;
			padding:	11px 20px;
			position:	relative;
		}
		#footer .footer-nav-tree > ul > li > a:before ,
		#footer .footer-nav-tree > ul > li .large a:before {
			position:	absolute;
			right:		20px;
			top:		0;
			bottom:		0;
			margin:		auto 0;

			display:	block;
			width:		22px;
			height:		22px;

			font-size:		22px;
			font-weight:	normal;
			line-height:	1;
			content:		'keyboard_arrow_right';

			color:			#8f8f8f;
			font-family:	"Material Icons";
			text-align:		center;
		}
		#footer .footer-nav-tree > ul > li.has-sub > a:before {
			content:	'add';
		}
		#footer .footer-nav-tree > ul > li.has-sub.opened > a:before {
			content:	'remove';
		}
			#footer .footer-nav-tree > ul > li .sub {
				display:		none;
			}
			#footer .footer-nav-tree > ul > li .sub li {
				border-top: 1px solid #454545;
			}
			#footer .footer-nav-tree > ul > li .sub a {
				display:	block;

				padding:	16px 16px 16px 54px;
				line-height:	1;

				position:	relative;
			}
			#footer .footer-nav-tree > ul > li .sub a:before {
				position:	absolute;
				left:		30px;
				top:		0;
				bottom:		-2px;
				margin:		auto 0;

				display:	block;
				width:		16px;
				height:		16px;
				background:		#fff;
				border-radius:	50%;
				text-indent:	0;

				font-size:		100%;
				font-weight:	normal;
				line-height:	16px;
				content:		'keyboard_arrow_right';

				color:			#555;
				font-family:	"Material Icons";
				text-align:		center;
			}
		#footer .footer-nav-tree a.open-window:after {
			display:	inline-block;
			width:		1em;
			height:		1em;
			content:	'filter_none';
			margin:		0 0 0 0.5em;
			vertical-align:		-.1em;

			font-size:		90%;
			font-weight:	normal;
			line-height:	1;
			color:			#8f8f8f;
			font-family:	"Material Icons";
			text-align:		center;
		}
	#footer .footer-nav-foot {
		font-size:		12px;
		line-height:	1;

		text-align:		center;
	}
		#footer .footer-nav-foot ul {
			margin:			0 auto;
			max-width:		320px;
		}
		#footer .footer-nav-foot li {
			display:	inline-block;
			padding:	0 0 20px;
		}
		#footer .footer-nav-foot li:before {
			content:	'／';
			margin:		0 10px;
		}
		#footer .footer-nav-foot li:first-child:before ,
		#footer .footer-nav-foot li:nth-child(3):before,
		#footer .footer-nav-foot li:nth-child(5):before {
			display:	none;
		}
		#footer .footer-nav-foot li:before {
		}
	#footer .copyright {
		float:			left;
		margin:			0 0 0 20px;
		padding:		35px 0 55px;

		display:		block;
		font-size:		12px;
		line-height:	1;
	}
	#footer .pagetop {
		position:	absolute;
		right:		20px;
		bottom:		40px;
		/*
		float:			right;
		margin:			0 20px 0 0;
		padding:		0.5em 0;
		*/
		width:			42px;
	}
	#footer .pagetop a {
		display:	block;
		width:		100%;
		height:		1px;
		overflow:	hidden;
		padding:	0 0 100%;

		border-radius:	50%;

		background: #FFFFFF;
		box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.18);

		color:		#555;
		text-decoration:	none;

		position:		relative;
	}
		#footer .pagetop a i {
			position:	absolute;
			left:		0;
			right:		0;
			top:		50%;
			margin:		-11px auto 0;

			display:	block;
			width:		22px;
			height:		22px;

			font-size:		22px;
			line-height:	22px;
		}