@charset "UTF-8";
/* CSS Document */

/*変数指定*/
:root {
  --main-color: #006cd6;/*メインカラー*/
  --sub-color: #ebebeb;/*サブカラー*/
}

h2,
#company_page h3 {
	font-size: 3.3rem;
	line-height: 1.7em;
	margin-bottom: 2%;
	font-weight: 600;
	font-family: "Montserrat", sans-serif;
}
#company_page h3 {text-align: center !important;}

h2 span,
#company_page h3 span {
	color: var(--main-color);
	font-size: 0.4em;
	margin-left: 1em;
	font-weight: bold;
}
#top_recruit h2,
#top_recruit h2 span {
	color: #FFF;
	line-height: 0.7em;
	margin-bottom: 8%;
}
#top_recruit h2 {margin-top: 5%;}
#top_news h2,
#top_news h2 span {	
	line-height: 0.7em;
	margin-bottom: 8%;
}

h3{
	font-size: 1.8rem;
	line-height: 1.6em;
	font-weight: bold;
}

#info_page_t h2 {
	text-align: center;
	margin-top: 13%;
	margin-bottom: 0;
}

/* header */
#keyword {
	width: 90%;
	margin: 0 auto 1%;
	text-align: center;
	font-size: 10px;
	line-height: 1em;
}
#header{
	background:#fff;
	position:fixed;
	z-index:999;
	width:100%;
	height:auto;
	padding-bottom: 1%;
	box-shadow: 0px 7px 7px 0 rgba(100, 100, 100, 0.1);
}
#header_wrap {
	width: 90%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
#main {
	/*style内にも記述有り*/
	margin-top: 5%;
}

.logo{
	float:left;
	width:30%;
}

.tel{
	float:right;
	width:29%;
	color: #0088d6;
	font-size: 1.6em;
	font-weight: bold;
	margin-top: 1%;
}

.gnav{
	text-align:center;
	width: 40%;
	float: left;	
	font-size: 1.1em;
	margin-top: 1%;
}

.gnav ul li{
	width: calc(98.7%/4);
	display:inline;
	text-align:center;
	float: left;
}
.gnav a:hover{opacity:0.2;}

#page_title,
#page_title2 {
	background: var(--main-color) url(img/top/recruit_b.png) no-repeat 5% 10% /35%;
	padding: 5%;
	text-align: center;
	color: #FFF !important;
	margin-bottom: 0 !important;
}
#page_title span,
#page_title2 span {color: #FFF !important;}

/* footer */
#footer {
	margin: 0;
	line-height: 2em;
	padding: 3% 0 1%;
	text-align: left;
	border-top: 1px solid var(--main-color);
}
#footer_wrap {
	width: 85%;
	max-width: 900px;
	margin: 0 auto;
}
.open_add .left {width: 70%;}
.open_add .left img {
	width: 60%;
	margin-bottom: 3%; 
}
.open_add .right {width: 30%;}
.open_add .right img {
	width: 80%;
	margin-top: 3%;
}
.open_add .right li {
	float: left;
	margin-right: 4%;
	width: auto;
	font-size: 0.9em;
}
#copy {
	font-size: 10px;
	line-height: 1.2em;
	text-align: center;
    padding: 5px 0;
	letter-spacing: 0.1em;
}

/*top*/
#top_about {padding: 5% 0;}
#top_about p,
#top_company p {
	font-size: 1.2em;
	line-height: 2em;
}

#top_business {
	background: var(--sub-color) url(img/top/business_b.png) no-repeat 5% 10% /40%;
	padding: 5% 0;
}
#top_business .wrap {margin-right: 0;}
#top_business ul {
	width: 55%;
	margin: 3% 0 0 5%;
	float: left;
}
#top_business ul li {margin-bottom: 5%;}
#top_business ul li h3 {
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: 2%;
}
#top_business .right {
	width: 25%;
	margin-right: 5%;
}
#top_company {
	background: url(img/top/company_b.png) no-repeat 120% bottom /50%;
	padding: 5% 0 2%;
}
#top_company h3 {margin-bottom: 1%;}
#top_company ul {margin-top: 2%;}
#top_company ul li {
	background: var(--main-color) url(img/top/ya_w.svg) no-repeat 90% center /7%;
	text-align: center;
	float: left;
	margin-right: 2%;
	border-radius: 20px;
	width: 17%;
	font-weight: bold;
	font-size: 1.1em;
	padding: 1% 3% 1% 0;
}
#top_company ul li a {color: #FFF;}

#top_recruit {
	background: var(--main-color) url(img/top/recruit_b.png) no-repeat 5% center/40%;
	padding: 15% 0 5%;
	display:block;
	clip-path:polygon(0 30%, 100% 0, 100% 100%, 0 100%) /*ななめ*/;
}
#top_recruit .left {
	width: 25%;
	text-align: right;
}
.more {
	background: #FFF url(img/top/ya_b.svg) no-repeat 90% center /7%;
	text-align: center;
	margin-right: 2%;
	border-radius: 20px;
	width: 50%;
	font-weight: bold;
	padding: 1% 3% 1% 0;
	float: right;
}
#top_news .more {
	background: var(--main-color) url(img/top/ya_w.svg) no-repeat 90% center /7%;
	width: 40%;
}
#top_news .more a {color: #FFF;}
#top_recruit li .more {
	width: 20%;
	font-size: 0.8em;
}
#recruit_page ul li .more {
	width: 15%;
	font-size: 1em;
	line-height:1.1em;
}

#top_recruit ul {
	float: right;
	width: 70%;
}
#top_recruit ul li,
#recruit_page ul li {
	padding: 2%;
	margin-bottom: 3%;
	border-radius: 10px;
	background: rgb(255 255 255 / 0.7);
}
#recruit_page ul li {background: #b4d4f3;}

#top_news,
.recruit_t,
#company_page_gaiyo,
#company_page_kyoka {
	background: var(--sub-color);
	padding: 3% 0;
}
#company_page_enkaku {padding: 3% 0;}

#top_news .left {
	width: 33%;
	text-align: right;
}
#top_news ul {
	float: right;
	width: 65%;
}
#top_news ul li {
	width: 46%;
	float: left;
	border-left: 1px solid #333;
	margin-left: 3%;
	padding: 3%;
}
#top_news ul li:last-child {border-right: 1px solid #333;}
.info_day {
	width: 38%;
	float: left;
	font-size: 0.9em;
}
.info_txt {
	width: 61%;
	float: right;
}
.info_txt img {width: 80%;}

/*採用情報TOP*/
#recruit_message h3 {
	text-align: center;
	margin: 3% auto 2%;
}
#recruit_message p {
	text-align: center;
	font-size: 1.2em;
	line-height: 2em;
	margin-bottom: 5%;
}
#recruit_page h4 {
	text-align: center;
	font-weight: bold;
	font-size: 2.3em;
	margin-bottom: 2%;
}
.recruit_page_txt {
	width: 80%;
	float: left;
}

/*採用情報*/
.recruit_t {margin-bottom: 5%;}
.recruit_t h3 {
	float: left;
	width: 30%;
	font-size: 2em;
	line-height: 1.5em;
}
.top_comment {
	float: left;
	width: 65%;
	background: url(img/recruit/t1.svg) no-repeat top left /20%;
	padding-left: 15%;
	margin-left: -5%;
}
#recruit_page .recruit_contents h4 {
	font-weight: bold;
	font-size: 1.4em;
	background: url(img/recruit/t2.svg) no-repeat bottom left / 100%;
	padding-bottom: 2%;
	padding-left: 5%;
	margin-bottom:3%;
	text-align: left;
}
.recruit_contents p {padding-left: 5%;}

.recruit_1day {margin-bottom: 5%;}
#recruit_page .recruit_1day h4,
#recruit_page .yoko h4,
#recruit_page .flow h4 {
	font-weight: bold;
	font-size: 1.4em;
	margin-bottom:3%;
	text-align: left;
}
#recruit_page .recruit_1day h4:after,
#recruit_page .yoko h4:after,
#recruit_page .flow h4:after  {
	content: url(img/recruit/t3.svg);
	margin-left: 2%;
}
.recruit_1day table {
	font-size:1.1em;
	line-height:1.6em;
}
.recruit_1day table th {
	text-align: right;
	font-weight: normal;
	border-right: 1px solid #006cd6;
	width: 10%;
}
.yoko table {
	border-collapse: collapse;
	margin-bottom: 5%;
}
.yoko table th,
.yoko table td {border: 1px solid #5d5d5d;}
.yoko table th {
	background:  #ebebeb;
	width:15%;
}
.oubo {
	text-align:center;
	margin-bottom: 5%;
}
.oubo h5 {
	font-size: 1.5em;
	margin-bottom: 1%;
}
.oubo a {
	background: var(--main-color);
	font-size: 2em;
	line-height: 3em;
	border-radius: 50px;
	text-align: center;
	display: inline-block;
	margin: 3% auto;
	font-weight: bold;
	color: #FFF;
	padding: 0 10%;
}
#recruit_page .flow li {
	width: calc(100%/3);
	float:left;
	background: none;
}
#recruit_page .flow li p {
	width: 90%;
	margin: 1% auto 0;
	font-size: 0.9em;
	line-height: 1.5em;
}

/*会社概要*/
#company_page h4 {
	font-size: 1.6em;
	font-weight: bold;
	text-align: center;
	margin-bottom: 5%;
}
#company_page_message {padding: 3% 0;}
#company_page_message .left {
	width: 68%;
	font-size: 1.2em;
	line-height: 2em;
}
#company_page_message .right {
	width: 20%;
	margin-top: 10%;
}
#company_page table th {border-bottom: 1px solid var(--main-color);}
#company_page table td {border-bottom: 1px solid #d1cece;}

#company_page_torihiki {
	max-width: 800px;
	margin: 3% auto;
	background: var(--main-color);
	color: #FFF;
	padding: 3% 0;
}
#company_page_torihiki h4 {
	text-align: left;
	border-bottom: 1px solid #FFF;
	margin-bottom: 2%;
	padding-bottom: 1%;
}
#company_page_torihiki ul {
	width: 50%;
	float: left;
}
#company_page_kyoka h4 {
	text-align: left;
	border-bottom: 1px solid var(--main-color);
	margin-bottom: 2%;
	padding-bottom: 1%;
	color:  var(--main-color);
}


/*===============================================
SP
===============================================*/
@media screen and (max-width: 640px){

.fot_menu {display: none;}	
	
/* 下menu */
div#footerArea {
	/*top: 0;*/
	margin: auto auto 0 auto;
	width: 100%;
	position: fixed !important;
	/*position: absolute;*/
	bottom: 0;
	z-index: 999;
}
div#footerArea ul li {
	width: calc(100%/3);
	border-top: 1px solid #FFF;
	border-right: 1px solid #FFF;
	float: left;
	text-align: center;
}
div#footerArea ul li:last-child {border-right: none;}
	

h2,
#company_page h3 {
	font-size: 2.5rem;
	line-height: 1.7em;
	margin-bottom: 4%;
}
#page_title2 {font-size: 1.8rem;}

h2 span,
#company_page h3 span {
	font-size: 0.4em;
	margin-left: 1em;
}
#top_recruit h2,
#top_recruit h2 span {
	color: #FFF;
	line-height: 0.7em;
	margin-bottom: 8%;
}
#top_news h2,
#top_news h2 span {	
	line-height: 0.8em;
	margin-bottom: 8%;
}
#top_recruit h2,
#top_news h2 {
	width: 68%;
	 float: left;
	margin-top: 0;
}

h3{
	font-size: 1.5rem;
	line-height: 1.5em;
}
#top_recruit h3,
#recruit_page h3 {
	font-size: 1.2em;
	line-height: 1.5em;
}

#info_page_t h2 {
	text-align: left;
	margin-top: 13%;
	margin-bottom: 0;
}

/* header */
#main {
	/*style内にも記述有り*/
	margin-top: 5%;
}
	
#page_title,
#page_title2 {
	background: var(--main-color) url(img/top/recruit_b.png) no-repeat 5% bottom /50%;
	padding: 25% 0 5%;
}

/* footer */
#footer {
	line-height: 1.7em;
	text-align: center;
	padding: 5% 0 1%;
}
.open_add .left {width: 100%;}
.open_add .left img {
	width: 80%;
	margin-bottom: 3%; 
}
.open_add .right {display: none;}
#copy {
	padding: 5px 0 15%;
	letter-spacing: 0;
}

/*top*/
#top_about {padding: 7% 0;}
#top_about p,
#top_company p {
	font-size: 1em;
	line-height: 1.8em;
}

#top_business {
	background: var(--sub-color) url(img/top/business_b.png) no-repeat left 65% /70%;
	padding: 7% 0;
}
#top_business .wrap {margin-right: 0;}
#top_business ul {
	width: 90%;
	margin: 3% 5% 0 5%;
	float: none;
}
#top_business ul li {margin-bottom: 7%;}
#top_business ul li h3 {
	font-size: 1.2em;
	margin-bottom: 4%;
}
#top_business .right {
	width: 40%;
	margin: 3% auto 0;
	float: none;
}
#top_company {
	background: url(img/top/company_b.png) no-repeat 120% bottom /70%;
	padding: 5% 0 2%;
}
#top_company h3 {
	font-size: 1.3em;
	margin-bottom: 2%;
}
#top_company ul {margin-top: 5%;}
#top_company ul li {
	background: var(--main-color) url(img/top/ya_w.svg) no-repeat 93% center /5%;
	margin: 0 2% 2% 0;
	border-radius: 20px;
	width: 31%;
	font-size: 1em;
	padding: 1% 2% 1% 0;
}

#top_recruit {
	background: var(--main-color) url(img/top/recruit_b.png) no-repeat 5% 10% /70%;
	padding: 15% 0 5%;
	clip-path:polygon(0 10%, 100% 0, 100% 100%, 0 100%) /*ななめ*/;
}
#top_recruit .left {
	width: 100%;
	text-align: left;
	float: none;
}
.more {
	background: #FFF url(img/top/ya_b.svg) no-repeat 90% center /7%;
	margin-right: 0;
	width: 30%;
	padding: 1% 3% 1% 0;
}
#top_news .more {
	background: var(--main-color) url(img/top/ya_w.svg) no-repeat 90% center /7%;
	width: 30%;
	float: right;
}
#top_recruit li .more {
	width: 40%;
}
#recruit_page ul li .more {
	width: 30%;
	font-size: 1em;
	line-height:1.1em;
}

#top_recruit ul {
	float: none;
	width: 100%;
}
#top_recruit ul li,
#recruit_page ul li {
	padding: 2%;
	margin-bottom: 5%;
	border-radius: 10px;
}

#top_news,
.recruit_t,
#company_page_gaiyo,
#company_page_kyoka,
#company_page_enkaku {padding: 3% 0;}

#top_news .left {
	width: 100%;
	text-align: left;
	float: none;
}
#top_news ul {
	float: none;
	width: 100%;
}
#top_news ul li {
	width: 100%;
	float: none;
	border-left: none;
	margin-left: 0;
	border-bottom: 1px solid #333;
	margin-bottom: 3%;
	padding: 0 0 3% 0;
}
#top_news ul li:last-child {
	border-right: none;
	border-bottom: none;
}
.info_day {width: 28%;}
.info_txt {width: 70%;}
.info_txt img {width: 70%;}

/*採用情報TOP*/
#recruit_message h3 {
	text-align: left;
	margin: 3% auto 2%;
}
#recruit_message p {
	text-align: left;
	font-size: 1em;
	line-height: 1.8em;
	margin-bottom: 7%;
}
#recruit_page h4 {
	font-size: 1.7em;
	margin-bottom: 5%;
}
.recruit_page_txt {
	width: 100%;
	float: none;
}

/*採用情報*/
.recruit_t {margin-bottom: 5%;}
.recruit_t h3 {
	float: none;
	width: 100%;
	1.7em;
	line-height: 1.5em;
}
.top_comment {
	float: none;
	background-image: none;
	padding-left: 0;
	margin-left: 0;
	margin-top: 3%;
	width: 100%;
}
#recruit_page .recruit_contents h4 {
	font-size: 1.2em;
	background: url(img/recruit/t2.svg) no-repeat bottom left / 120%;
	padding-bottom: 2%;
	padding-left: 5%;
	margin-bottom:3%;
}
.recruit_contents p {padding-left: 5%;}

.recruit_1day {margin-bottom: 5%;}
.recruit_1day th {width: 40%;}

.recruit_1day table {
	font-size:1.1em;
	line-height:1.6em;
}
.recruit_1day table th {width: 30%;}
.yoko table {border-collapse: collapse;}

.oubo {font-size: 0.9em;}
.oubo h5 {
	font-size: 1.4em;
	margin-bottom: 3%;
}
.oubo a {
	font-size: 1.7em;
	line-height: 2.2em;
	border-radius: 50px;
	padding: 0 10%;
}
#recruit_page .flow li {
	width: 100%;
	float:none;
}
#recruit_page .flow li .sp_only {
	background: #5c92e1;
	padding: 2%;
	text-align: center;
	color: #FFF;
	font-size: 1.2em;
	letter-spacing: 0.1em;
}
#recruit_page .flow li p {font-size: 1em;}

/*会社概要*/
#company_page h4 {font-size: 1.3em;}
#company_page_message {padding: 5% 0;}
#company_page_message .left {
	width: 100%;
	font-size: 1.1em;
	line-height: 1.8em;
	float: none;
}
#company_page_message .right {
	width: 75%;
	margin: 3% auto 0;
}
#company_page table th {
	border-bottom: none;
	padding-bottom: 0;
}
#company_page table td {border-bottom: 1px solid var(--main-color);}

#company_page_torihiki {
	margin: 0 auto;
	padding: 5% 0;
}
#company_page_torihiki ul {
	width: 100%;
	float: none;
}
#company_page_kyoka {padding: 5% 0;}

	


}

/*===============================================
画面の横幅が641px以上769px以下　タブレット
===============================================*/
@media only screen and (min-width:641px) and (max-width:810px){
h2,
#company_page h3 {
	font-size: 2.9rem;
	line-height: 1.7em;
}
h3{
	font-size: 1.5rem;
	line-height: 1.6em;
}
#top_recruit h3 {font-size: 1.4em;}
#info_page_t h2 {margin-top: 15%;}
	
/*header*/
.tel{
	width:26%;
	font-size: 1.4em;
}
.gnav{
	width: 43%;	
	font-size: 1em;
}
/* 横ボタン */
#side-btn {
    position: fixed;
    top: 40%; 
    right: 0;
    z-index: 999;
	width: 6%;
	height: auto;
}
#side-btn a {
    text-decoration: none;
    text-align: center;
    display: block;
	margin-bottom: 0;
	margin-top: 0;
	padding-bottom: 0;
	padding-top: 0;
}
#side-btn img {
	/*border-bottom: 1px solid #FFF;*/
	padding: 0;
	margin: 0;
}
#side-btn a:hover {
    text-decoration: none;
	margin-bottom: 0;
	margin-top: 0;
	padding-bottom: 0;
	padding-top: 0;
}	
/*top*/
#top_company ul li {
	background: var(--main-color) url(img/top/ya_w.svg) no-repeat 95% center /6%;
	font-size: 1em;
	padding: 1% 2% 1% 0;
}

#top_recruit {clip-path:polygon(0 15%, 100% 0, 100% 100%, 0 100%) /*ななめ*/;}
#top_news .more {width: 45%;}
#top_recruit .more {width: 60%;}
.info_day,
.info_txt {
	width: 100%;
	float: none;
}
.info_txt img {width: 80%;}	
	
/*採用情報TOP*/
#recruit_page h4 {
	font-size: 2em;
	margin-bottom: 3%;
}
.recruit_page_txt {
	width: 80%;
	float: left;
}
.recruit_page ul li .more {width: 25%;}

/*採用情報*/
.recruit_t h3 {
	width: 30%;
	font-size: 1.7em;
	line-height: 1.5em;
}
.top_comment {
	float: left;
	width: 65%;
	background: url(img/recruit/t1.svg) no-repeat top left /20%;
	padding-left: 15%;
	margin-left: -5%;
	font-size: 0.9em;
}
.oubo a {
	font-size: 1.8em;
	line-height: 3em;
}

/*会社概要*/
#company_page_message .left {
	width: 73%;
	font-size: 1.1em;
	line-height: 2em;
}
#company_page_message .right {
	width: 20%;
	margin-top: 10%;
	margin-right: 5%;
}
#company_page table th {width: 17%;}

#company_page_torihiki {
	max-width: 90%;
	margin: 3% auto;
	background: var(--main-color);
	color: #FFF;
	padding: 3% 0;
}


	
	
}

/*===============================================
PC
===============================================*/
@media screen and (min-width: 811px){

/* 横ボタン */
#side-btn {
    position: fixed;
    top: 40%; 
    right: 0;
    z-index: 999;
	width: 4%;
	height: auto;
}
#side-btn a {
    text-decoration: none;
    text-align: center;
    display: block;
	margin-bottom: 0;
	margin-top: 0;
	padding-bottom: 0;
	padding-top: 0;
}
#side-btn img {
	/*border-bottom: 1px solid #FFF;*/
	padding: 0;
	margin: 0;
}
#side-btn a:hover {
    text-decoration: none;
	margin-bottom: 0;
	margin-top: 0;
	padding-bottom: 0;
	padding-top: 0;
}	
	


}