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

*/

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

/* Header
---------------------------------------------*/
#viewport {
	padding-top:		100px;
}

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

	width:		100%;
	margin:		0 auto;
	padding:	0 20px;

	box-sizing:		border-box;
}
	#header .inner {
		margin:		0 auto;
		max-width:		1140px;
		height:		100px;

		position:	relative;
	}
		#header h1 {
			float:		left;
			padding:	16px 0 0;
			width:      14%;
		}
		#header h1 img {
			width:      100%;
		}
		#header .contact {
			position:	absolute;
			top:		11px;
			right:		85px;

			font-size:		13px;
			line-height:	15px;
		}
			#header .contact a {
				color:		#000;
				text-decoration:	none;
			}
			#header .contact a:hover {
				text-decoration:	underline;
			}
		#header .lang {
			position:	absolute;
			top:		11px;
			right:		0;
			padding:	0 0 0 18px;

			font-size:		13px;
			line-height:	15px;
			color:		#8f8f8f;
		}
			#header .lang:before {
				position:	absolute;
				left:		0;
				top:		0;
				bottom:		0;
				margin:		auto 0;

				display:	block;
				width:		1em;
				height:		1em;

				content:		'language';
				font-size:		15px;
				font-weight:	normal;
				line-height:	1;
				color:			#000;
				font-family:	"Material Icons";
				text-align:		left;
			}
			#header .lang li {
				float:		left;
				display:	block;
			}
			#header .lang li:first-child:after {
				content:	'/';
				margin:		0 4px;
			}
			#header .lang li a {
				color:		#8f8f8f;
				text-decoration:	none;
			}
			#header .lang li a:hover {
				color:		#000;
				text-decoration:	underline;
			}
			#header .lang li a.current,
			#header .lang li span {
				color:		#000;
			}
		#header .menu {
		}
			/* オープンメニュー */
			#header .menu > ul {
				position:		absolute;
				right:		0;
				bottom:		0;
			}
				#header .menu > ul > li {
					display:	inline-block;
				}
				#header .menu > ul > li > a {
					display:	block;
					padding:	10px 20px 18px;

					font-size:		17px;
					line-height:	1em;
					color:			#000;
					text-decoration:	none;

					position:		relative;
				}
					#header .menu > ul > li > a:before {
						position:	absolute;
						left:		8px;
						right:		8px;
						bottom:		-2px;
						z-index:	2;

						display:	block;
						width:		auto;
						height:		1px;
						overflow:	hidden;
						content:	'';

						border-bottom: 4px solid #8DC21F;
						visibility:		hidden;
					}
					#header .menu > ul > li:hover > a:before ,
					#header .menu > ul > li.active > a:before ,
					#header .menu > ul > li > a:hover:before {
						visibility:		visible;
					}
					/* icon */
					#header .menu > ul > li.has-sub > a ,
					#header .menu > ul > li.open-window > a {
						padding-right:		30px;
					}
					#header .menu > ul > li.has-sub > a:after ,
					#header .menu > ul > li.open-window > a:after {
						position:absolute;
						right:		9px;
						top:		-7px;
						bottom:		0;
						margin:		auto 0;

						display:	block;
						width:		1em;
						height:		1em;

						font-size:		15px;
						font-weight:	normal;
						line-height:	1;
						color:			#8f8f8f;
						font-family:	"Material Icons";
						text-align:		center;
					}
					#header .menu > ul > li.has-sub > a:after {
						content:	'keyboard_arrow_down';
					}
					#header .menu > ul > li.open-window > a:after {
						content:	'filter_none';
					}
				#header .menu > ul > li .sub {
					position:	absolute;
					left:		0;
					right:		0;

					display:	none;
					width: 600px;
					overflow:	hidden;

					background:		#fff;
					box-shadow: 	0px 2px 8px #D9D9D9;

					padding:	0 0 0 214px;
				}
				#header .menu > ul > li .sub:before ,
				#header .menu > ul > li .sub:after {
					position:	absolute;
					left:		0;
					top:		0;
					bottom:		0;
					margin:		auto 0;

					display:	block;
					width:		214px;
					height:		114px;
					content:	'';

					background-position:		center top, center bottom;
					background-repeat:			no-repeat;
				}
					#header .menu > ul > li .sub.sub-vision:before {
						background-image:	url(../images/header-nav-purpose.svg),
											url(../images/header-nav-vision-icon.svg);
					}
					#header .menu > ul > li .sub.sub-company:before {
						height:			94px;
						background-image:	url(../images/header-nav-company.svg),
											url(../images/header-nav-company-icon.svg);
					}
					#header .menu > ul > li .sub.sub-news:before {
						height:			92px;
						background-image:	url(../images/header-nav-news.svg),
											url(../images/header-nav-news-icon.svg);
					}
					#header .menu > ul > li .sub.sub-ir:before {
						height:			88px;
						background-image:	url(../images/header-nav-ir.svg),
											url(../images/header-nav-ir-icon.svg);
					}
					#header .menu > ul > li .sub.sub-sustainability:before {
						height:			104px;
						background-image:	url(../images/header-nav-sustainability.svg),
											url(../images/header-nav-sustainability-icon.svg);
					}
				#header .menu > ul > li .sub ul {
					padding:		50px 0 34px 48px;
					position:		relative;

					display: 		flex;
					flex-wrap:		wrap;
					flex-direction:	row;
				}
					#header .menu > ul > li .sub ul:before {
						position:	absolute;
						top:		50px;
						bottom:		50px;
						left:		0;

						display:	block;
						width:		1px;
						height:		auto;
						overflow:	hidden;
						content:	'';

						border-left:		1px solid #D4E0C3;
					}
					#header .menu > ul > li .sub ul li {
						width:		240px;
						margin:		0 0 14px;
					}
					#header .menu > ul > li .sub ul li.longTtl {
						width:      280px;
					}
						#header .menu > ul > li .sub ul li a {
							display:		block;
							padding:		0 0 0 24px;

							color:		#000;
							text-decoration:	none;

							position:		relative;
						}
						#header .menu > ul > li .sub ul li a:hover {
							text-decoration:	underline;
						}
						#header .menu > ul > li .sub ul li a:before {
							position:absolute;
							left:		0;
							top:		0;
							bottom:		0;
							margin:		auto 0;

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

							content:		'keyboard_arrow_right';
							font-size:		12px;
							font-weight:	normal;
							line-height:	16px;
							color:			#fff;
							font-family:	"Material Icons";
							text-align:		center;
						}
.sp-menu-overlay,
.sp-menu,
.sp-menu-opener {
	display:		none !important;
}


/* Footer
---------------------------------------------*/
.footer-sp-hidden {
}
.footer-sp-visible {
	display:	none !important;
}

#footer {
	padding:		50px 20px;

	font-size:		13px;
	line-height:	1.8em;
}
	#footer a {
		color:		#fff;
		text-decoration:	none;
	}
	#footer a:hover {
		text-decoration:	underline;
	}
	#footer .inner {
		margin:		0 auto;
		max-width:		1140px;

		position:	relative;
	}
	#footer .footer-nav-tree {
		display:		flex;
		padding:		0 0 42px;
		line-height:	24px;
	}
		#footer .footer-nav-tree > ul {
			display:		flex;
			width:			100%;
		}
		#footer .footer-nav-tree > ul > li + li {
			margin-left:    4.8%;
		}
		
			/* #footer .footer-nav-tree > ul > li:nth-child(3) { width: 160px; }
			#footer .footer-nav-tree > ul > li:nth-child(7) { width: 120px; } */

			#footer .footer-nav-tree > ul > li > a {
				font-size:		16px;
				line-height:	24px;
			}
			#footer .footer-nav-tree > ul > li .sub {
				margin:			20px 0 0;
			}
			#footer .footer-nav-tree > ul > li .sub ul > li {
				padding:		12px 0 0;
			}
			#footer .footer-nav-tree > ul > li .sub ul > li:first-child {
				padding:		0 !important;
			}
			#footer .footer-nav-tree > ul > li ul.large {
				margin-top:		0 !important;
			}
			#footer .footer-nav-tree > ul > li ul.large > li {
				padding-top:		20px !important;
			}
			#footer .footer-nav-tree > ul > li ul.large > li:first-child {
				padding-top:		0 !important;
			}
			#footer .footer-nav-tree > ul > li ul.large a {
				font-size:		16px;
				line-height:	24px;
			}
			#footer .footer-nav-tree a.open-window:after {
				display:	inline-block;
				width:		1em;
				height:		1em;
				content:	'filter_none';
				margin:		0 0 0 0.5em;

				font-size:		15px;
				font-weight:	normal;
				line-height:	1;
				color:			#fff;
				font-family:	"Material Icons";
				text-align:		center;
			}
	#footer .footer-nav-foot {
		font-size:		12px;
		line-height:	1.8em;
	}
		#footer .footer-nav-foot li {
			display:	inline;
		}
		#footer .footer-nav-foot li:before {
			content:	'／';
			margin:		0 8px;
		}
		#footer .footer-nav-foot li:first-child:before {
			display:	none;
		}
	#footer .footer-nav-sns {
		position:		absolute;
		right:			0;
		bottom:			42px;

		display:		flex;
	}
		#footer .footer-nav-sns ul {
			margin:		0 -10px;
			display:		flex;
		}
		#footer .footer-nav-sns li {
			padding:	0 10px;
		}
		#footer .footer-nav-sns li a {
			display:	block;
		}
	#footer .copyright {
		position:		absolute;
		right:		0;
		bottom:		0;

		display:		block;
		font-size:		12px;
		line-height:	1.8em;
	}
	#footer .pagetop {
	}
	#footer .pagetop a {
		position:	absolute;
		top:		-79px;
		right:		-74px;

		display:	block;
		width:		58px;
		height:		58px;
		overflow:	hidden;

		border-radius:	30px;

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

		color:		#555;
		text-decoration:	none;
	}
		#footer .pagetop a i {
			position:	absolute;
			left:		0;
			right:		0;
			top:		50%;
			margin:		-.5em auto 0;

			display:	block;
			width:		1em;
			height:		1em;
		}