@charset "utf-8";

@media screen and (max-width: 767px) {}
@media screen and (min-width: 768px) {}
@media screen and (min-width: 768px) and (max-width: 1023px) {}
/*-------------------------------------------------
レイアウト
-------------------------------------------------*/
body{
	text-align:left;
	font-size: 100%;
	line-height:1.6;
	letter-spacing:0.02em;
	color:#040000;
	background:#ffffff;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "Times New Roman", serif;
	font-variant: normal;
	font-weight: bold;
	padding-bottom:0px;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	}
#wrap{ width: 100%; height: 100%; position: relative;}
.inner{ margin-right:auto; margin-left:auto;}
.inner:before{content:" ";display:table;}
.inner:after{ clear:both;}

/*ブラウザサイズ別指定*/
@media screen and (max-width: 767px) {
#wrap{}
.inner{ margin-right:20px; margin-left:20px;}
}
@media screen and (min-width: 768px) , print{
.inner{ max-width:1280px;}
.container{ margin-right:20px; margin-left:20px;}
}

/*-----------------------------------------------------
header
-----------------------------------------------------*/
#header_frame{ position: relative; z-index: 1; background: #fff; box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2);}
.header_info .header_title{ float: left;}
.header_info .header_tel{ background: url(../images/base/icon_tel.png) left center no-repeat; color: #31c513;}

/*ブラウザサイズ別指定*/
@media screen and (max-width: 767px) {
	#header_frame{ height: 70px;}
	.header_info{ padding: 10px;}
	.header_info .header_title{ width: calc(100% - 70px); max-width: 259px;}
	.header_info .header_tel{ display: none;}
}
@media screen and (min-width: 768px), print{
	.header_info{ padding: 24px 60px 10px; overflow: hidden;}
	.header_info .header_title{ width: 259px;}
	.header_info .header_tel{ float: right; padding-left: 50px; text-align: center;}
	.header_info .header_tel .text_tel{ font-size: 2.2rem; line-height: 1;}
	.header_info .header_tel .text_tel a{ color: #fff;}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
}

/*-----------------------------------------------------
menu
-----------------------------------------------------*/
#menu{ clear: both;}
ul.header_menu li{ position: relative;}
ul.header_menu li::after{ content: " "; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 30px 30px; border-color: transparent transparent #eff146 transparent;}
ul.header_menu li a{ display: block; color: #31c513; background-repeat: no-repeat;}
ul.header_menu li.btn_home a{ background-image: url(../images/base/btn_01_home.png)}
ul.header_menu li.btn_profile a{ background-image: url(../images/base/btn_02_profile.png)}
ul.header_menu li.btn_recruitment a{ background-image: url(../images/base/btn_03_recruitment.png)}
ul.header_menu li.btn_insurance a{ background-image: url(../images/base/btn_04_insurance.png)}
ul.header_menu li.btn_download a{ background-image: url(../images/base/btn_05_download.png)}
ul.header_menu li a:hover{ background-color: #eff146; color: #03a816;}

/*ブラウザサイズ別指定*/
@media screen and (max-width: 767px) {
	/*ハンバーガー*/
	#menu-icon{ position:fixed; right: 20px; top:20px; z-index: 9999;}
	#menu-icon span{ background:#31c513; width: 30px; height: 4px; margin-bottom:4px; display:block;-webkit-transition: all 0.3s ease;transition: all 0.3s ease;}

	#menu-icon{ display:inline; cursor:pointer; font-size: 0.7rem; text-align: center; line-height: 1; font-weight: bold; color: #31c513; font-family: 'Roboto', sans-serif; font-style: normal; font-weight: 700;}
	#menu-icon.active .first{transform:rotate(45deg);-webkit-transform:rotate(45deg);margin-top:10px;}
	#menu-icon.active .second{transform:rotate(135deg);-webkit-transform:rotate(135deg);position:relative;top:-8px;}
	#menu-icon.active .third{display:none;}
	
	#menu-icon.is-animation{ right: 0; top:0; background: rgba(255,255,255,0.9); padding: 20px 20px 10px 20px;}
	
	#menu{ width: 100%; padding-top: 24px;}
	#menu{ position: fixed; top: 0; right: 0; z-index: 9000; width:280px; height: 100%; padding-bottom: 100px; overflow-y: scroll; background-color:#fff; transform: translateX(100%); -webkit-transition: all 0.6s ease;transition: all  0.6s ease; border-left: 1px solid #ebebeb;}
	#menu.open { transform: translateX(0);}
	
	.overlay { position: fixed; top: 0; left: 0; z-index: 4000; content: " "; display: block; width: 0; height: 0; background-color: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.6s;}
	.overlay.open { width: 100vw; height: 100vh; opacity: 1;}
	
	/* グローバルナビ */
	h2.sp_title{ font-size: 1.1rem; font-weight: bold; color: #31c513; margin-bottom: 20px;}
	ul.header_menu{ margin-left: -20px; margin-right: -20px; border-top: 1px solid #03a816;}
	ul.header_menu li{ border-bottom: 1px solid #03a816; font-size: 1rem;}
	ul.header_menu li a{ padding: 20px 10px 20px 60px; background-size: 20px 20px; background-position: 20px center;}
	
}
@media screen and (min-width: 768px), print{
	/*ハンバーガー*/
	#menu-icon{ display: none!important;}
	
	/* グローバルナビ */
	h2.sp_title{ display: none!important;}
	ul.header_menu{ display:-webkit-flex;display: flex; -webkit-justify-content:flex-start;justify-content:flex-start; -webkit-flex-wrap: wrap;flex-wrap: wrap; margin-right:20px; margin-left:20px; border-left: 1px solid #03a816;}
	ul.header_menu li{ width: calc( 20% - 1px * 4/5); text-align: center; border-right: 1px solid #03a816;}
	ul.header_menu li a{ padding: 60px 10px 10px; background-position: center 10px;}
	
}
@media screen and (min-width: 768px) and (max-width: 1130px) {
	ul.header_menu li{ font-size: 1.3vw;}
}

/*-------------------------------------------------
共通指定
-------------------------------------------------*/
/* リスト */
.list_01{ display:-webkit-flex;display: flex; -webkit-justify-content:flex-start;justify-content:flex-start; -webkit-flex-wrap: wrap;flex-wrap: wrap;}

/* ボタン */
.btn_link_01{ text-align: center; font-size: 1.1rem; line-height: 1.2;}
.btn_link_01 a{ display: block; color: #fff; background: url(../images/common/arrow_01.png) 96% center no-repeat; background-color: #31c513; background-size: 15px 15px; padding: 6px 10px; border-radius: 30px; box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.3);}
.btn_link_01 a:hover{ box-shadow:none; background: url(../images/common/arrow_02.png) 96% center no-repeat; background-color: #eff146; background-size: 15px 15px; color: #03a816;}

/*ブラウザサイズ別指定*/
@media screen and (max-width: 767px) {
	/* リスト */
	.list_x2_01 li{ width: 100%;}
	.list_x3_01 li{ width: 100%;}
	.list_x5_01 > li{ float: left; width: calc(50% - 1px * 1/2); margin-right: 1px;}
	.list_x5_01 > li:nth-child(2n+2){ margin-right: 0;}

	/* ボタン */
	.btn_link_01{ width: 90%; margin: 0 auto;}
	
}
@media screen and (min-width: 768px), print {
	/* リスト */
	.list_x2_01 > li{ float: left; width: calc(50% - 3% * 1/2); margin-right: 3%;}
	.list_x2_01 > li:nth-child(2n+2){ margin-right: 0;}
		
	.list_x3_01 > li{ float: left; width: calc(33.3333% - 3% * 2/3); margin-right: 3%;}
	.list_x3_01 > li:nth-child(3n+3){ margin-right: 0;}
		
	.list_x5_01 > li{ float: left; width: calc(20% - 1px * 4/5); margin-right: 1px;}
	.list_x5_01 > li:nth-child(5n+5){ margin-right: 0;}

	/* ボタン */
	.btn_link_01{ max-width: 210px; margin: 0 auto;}

}
@media screen and (min-width: 768px) and (max-width: 1280px) {
	.btn_link_01{ font-size: 1.5vw!important;}
}

/*-----------------------------------------------------
footer
-----------------------------------------------------*/
#footer_frame{ position: relative; clear: both; color: #fff; background: #31c513; overflow: hidden;}
#footer_frame::before{ position: absolute; left: 0; top: 1px; content: " "; background: url(../images/common/bg_naname_02.gif) left top repeat; width: 100%; height: 20px;}

ul.footer_menu{ clear: both; text-align: center; margin-bottom: 40px;}
ul.footer_menu li{ display: inline-block; border-left: 1px solid #fff; line-height: 1;}
ul.footer_menu li a{ color: #fff;}
ul.footer_menu li a:hover{ color: #eff146;}

.footer_title h2{ font-weight: bold; font-size: 2.3rem; line-height: 1.2;}

.footer_info p.footer_subtitle{ font-size: 0.9rem;}

#copy{ clear: both; color: #fff; background: #03a816;}

/*ブラウザサイズ別指定*/
@media screen and (max-width: 767px) {
	#footer_frame{ padding: 40px 0;}

	ul.footer_menu{ margin-bottom: 40px;}
	ul.footer_menu li:last-child{ border-right: 1px solid #fff;}
	ul.footer_menu li a{ padding: 0 10px; font-size: 0.8rem;}
	
	.footer_title h2{ margin-bottom: 10px;}
	
	.footer_info p.text_tel{ font-size: 1.5rem; line-height: 1;}
	.footer_info p.text_tel span{ font-size: 1.9rem;}
	.footer_info p.text_tel a{ color: #fff;}
	.footer_info p.text_hours{ font-size: 3.5vw;}

	#copy{ padding: 20px; font-size: 3.5vw;}
	
}
@media screen and (min-width: 768px), print{
	#footer_frame{ padding: 40px 0 60px;}

	ul.footer_menu li:first-child{ border: none;}
	ul.footer_menu li a{ padding: 0 16px;}
	ul.footer_menu li a:hover{ text-decoration: underline;}
	
	.footer_title{ float: left;}
	.footer_title h2{ margin-bottom: 30px;}
	
	.footer_info{ float: right;}
	.footer_info p{ font-size: 1.1rem;}
	.footer_info p.text_tel{ font-size: 1.5rem; line-height: 1;}
	.footer_info p.text_tel span{ font-size: 2.2rem;}
	
	#copy{ padding: 16px 40px 60px; text-align: center;}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
	.footer_info{ width: 60%;}
	.footer_info p{ font-size: 1rem;}
	ul.footer_menu{ padding-right: 0;}
}

/* page-top */
#page-top {
	position: fixed;
/*	font-size: 60%;*/
	margin-bottom:0px;
	line-height: 1.2;
	z-index:700;
}
#page-top a {
	text-decoration: none;
	color: #fff;
	text-align: center;
	font-weight: bold;
	display: block;
	background:#eff146;
	border-radius:50%;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}
#page-top a img{
	opacity: 1;
	filter: alpha(opacity=100);
	-moz-opacity: 100;
}

#page-top a:hover {
	text-decoration: none;
	opacity: 0.5;
	filter: alpha(opacity=50);
	-moz-opacity: 50;
}

/*ブラウザ別サイズ指定*/
@media screen and (max-width: 767px) {
	#page-top { bottom: 20px; right: 10px;}
	#page-top a { width: 45px; height: 45px; padding: 15px 15px;}
	#page-top a img{ width:15px; height: 15px;}
}
@media screen and (min-width: 768px), print {
	#page-top {	bottom: 20px; right: 20px;}
	#page-top a { width: 45px; height: 45px; padding: 15px 15px;}
	#page-top a img{ width:15px; height: 15px;}
}