@charset 'UTF-8';
@import url("reset.css");
@import url("base.css");

/*====================================================
------------------------------------------------------
    main.css
------------------------------------------------------
====================================================*/

body { font-size: 1.4rem; line-height: 2.4rem;}
.row { width: 960px; margin: 0 auto 30px auto; position: relative;}
@media screen and (max-width: 767px)  {
.row { width: 90%; margin-left: auto; margin-right: auto;}
}

/* --------------------------------------------------
    header
-------------------------------------------------- */
header { display: block; height: 140px; margin-bottom: 50px;}
.headerInner { width: 960px; height: 80px; margin: 0 auto; position: relative;}
.logoMark { width: 400px; position: absolute; top: 0; left: 0;}
.numberArea { width: 330px; padding: 10px; color: #fff; position: absolute; top: 10px; right: 0; background: #689f48; text-align: center; border-radius: 10px; line-height: 1.8rem;}
.nuvBg { background: #f0f5e1;}
nav ul { width: 960px; margin: 0 auto 30px auto; position: relative;}
nav ul li { display: inline-block; width: 24.6%; font-size: 2rem;}
nav ul li a { display: block; text-align: center; padding: 15px 10px; text-decoration: none;}
nav ul li a:after { font-family: "Font Awesome 5 Free"; content: "\f138"; color: #409327; font-weight: bold; padding-left: .5rem;}
nav ul li a:hover,
#service nav ul li a#gN01,
#company nav ul li a#gN02,
#recruitment nav ul li a#gN03
{ background: #b4cb70; color: #fff;}

#service nav ul li a#gN01:after,
#company nav ul li a#gN02:after,
#recruitment nav ul li a#gN03:after
{ font-family: "Font Awesome 5 Free"; content: "\f13a"; color: #fff; font-weight: bold; padding-left: .5rem;}

@media screen and (max-width: 767px)  {
header { display: block; height: auto; margin-bottom: 30px;}
.headerInner { width: 95%; height: auto; margin: 0 auto; position: relative;}
.logoMark { width: 100%; position: static;}
.numberArea { width: 100%; padding: 5px; position: static;border-radius: 10px; line-height: 1.6rem; margin-bottom: 10px;}
nav ul { width: 95%; margin: 0 auto 15px auto; position: relative;}
nav ul li { display: inline-block; width: 49%; font-size: 1.6rem;}
}

/* --------------------------------------------------
    main
-------------------------------------------------- */
h1 { font-size: 4rem; color: #689f48; text-align: center; font-weight: 100; padding: 10px 0; margin-bottom: 50px;}

@media screen and (max-width: 767px)  {
h1 { font-size: 2.5rem; padding: 10px 0; margin-bottom: 30px;}
}

/* --------------------------------------------------
    footer
-------------------------------------------------- */
footer .copyright { background: #b4cb6f; margin: 0; padding: 20px 0; color: #fff; text-align: center; z-index: 100;}
.footLinkArea { width: 100%; border-top: 1px solid #333; padding: 10px 0; font-size: 1.4rem; margin-top: 50px;}
.footLinkArea ul { display: block; width: 960px; margin: 0 auto;}
.footLinkArea ul li { display: inline-block; border-right: 1px solid #333; padding: 0 30px;}
.footLinkArea ul li a { line-height: 2rem; text-decoration: none;}
.footLinkArea ul li a:hover { opacity: .8;}
.footLinkArea ul li a:after { font-family: "Font Awesome 5 Free"; content: "\f138"; color: #409327; font-weight: bold; padding-left: .5rem;}

#fixedTop { right: 10px;	bottom: 10px;	text-align: center;	display: none;	background: none;	position: fixed;	z-index: 150;}
#fixedTop a { color: #2f691e; font-size: 5rem;}

@media screen and (max-width: 767px)  {
footer .copyright { font-size: 1.2rem;}
.footLinkArea ul { display: block; width: 95%; margin: 0 auto;}
.footLinkArea ul li { display: inline-block; border-right: none; padding: 0 5px;}
}

/* --------------------------------------------------
    top
-------------------------------------------------- */

#top #wrapper {	width: 960px; margin: 15px auto;	padding: 50px 0;	color: #fff;	text-align: left;	position: relative; background: none; text-align: center;}
#top #wrapper img { width: 350px; margin-bottom: 30px;}
#top #wrapper strong { display: block; font-size: 3.5rem; color: #3d6a20; margin-bottom: 30px;}
#top .col_4 { border: 3px solid #fff; background: rgba(255, 255, 255, 0.8); position: relative;}
#top .col_4:after { font-size: 2rem; font-family: "Font Awesome 5 Free"; content: "\f138"; color: #409327; font-weight: bold; position: absolute; top: 45%; right: 10%;}
#top .col_4:hover { background: rgba(255, 255, 255, 1);}
#top .col_4 a { display: block; text-align: center; font-size: 2rem; line-height: 15rem; color: #333;}
#top footer { display: none;}

 @media screen and (max-width: 767px)  {
#top #wrapper { width: 100%; padding: 10px;}
#top #wrapper img { width: 60%;}
#top #wrapper strong {font-size: 1.8rem;}
#top .col_4:after { position: absolute; top: 30%; right: 10%;}
#top .col_4 a { font-size: 2rem; line-height: 5rem;}
}

/* --------------------------------------------------
    service
-------------------------------------------------- */
/* ------ Tab Accordion-------- */
#tabAccordion { width: 100%; padding: 0; margin-left: auto; margin-right: auto;	position: relative;}
#tabAccordion dl { height: 55em;}
#tabAccordion dl dt { width: 50%; position: absolute; top: 0;	left: 0;background: #f0f5e1;
border-top: #aaa 1px solid;	border-bottom: #aaa 1px solid;	border-left: #aaa 1px solid;}
#tabAccordion dl:nth-child(2) dt {	left: 50%; border-right: #aaa 1px solid;}
#tabAccordion dl dt a { height: 50px;	font-weight: normal;	font-size: 2rem; text-decoration: none;}

@media screen and (max-width: 767px) {
#tabAccordion {	width: 100%;	border: none;}
#tabAccordion dl { width: 100%; height: auto;	position: relative; top: auto;	left: auto;}
#tabAccordion dl dt { position: relative;	top: auto;	left: auto;	width: 100%; border: #aaa 1px solid;}
#tabAccordion dl:nth-child(2) dt,
#tabAccordion dl:nth-child(3) dt,
#tabAccordion dl:nth-child(4) dt {	left: auto; border-right: #aaa 1px solid;}
#tabAccordion dl dt.btnAcv {  border: #aaa 1px solid;}
#tabAccordion dl dd { width: 100%; height: auto; position: relative;	top: auto;	left: auto;	padding: 20px 5px;}
}




#service h2 { background: #b4cb6f; font-size: 1.8rem; padding: 1rem; text-align: center; margin-bottom: 15px; color: #fff;}
#service h3 { font-weight: 100; font-size: 1.6rem; margin-bottom: 10px;}
#service .table_2col { margin-bottom: 30px;}
#service .table_2col > .title { background: #f0f5e2; color: #333; margin-bottom: 0;}
#service .table_2col > .items { background: #fffbf1; color: #333; font-size: 1.6rem;}
#service .itemsBox { background: #fffbf1; color: #333; font-size: 1.6rem; padding: 2rem; border: 1px solid #333; margin-bottom: 30px;}
#service #tabAccordion dl dt.btnAcv a:before { font-family: "Font Awesome 5 Free"; content: "\f14a"; color: #409327; font-weight: bold; padding-right: .5rem;}

@media screen and (max-width: 767px) {
#service　#tabAccordion dl { height: auto;}
#service　#tabAccordion dl dt { position: relative;	top: auto;	left: auto;	width: 100%;}
#service　#tabAccordion dl:nth-child(2) dt {	left: auto;}
#service h2 {text-align: left;}
}


/* --------------------------------------------------
    company/recruitment
-------------------------------------------------- */
.other h2 { border-bottom: 1px solid #b4cb6f; font-size: 1.8rem; padding: 1rem; text-align: center; margin-bottom: 15px; color: #333; }
.other h3 { font-weight: 100; font-size: 1.6rem; margin-bottom: 10px; text-align: center;}
.other .table_2col { margin-bottom: 30px;}
.other .table_2col > .title { background: #eaf2d2; color: #333; margin-bottom: 0; font-weight: 100;}
.other .table_2col > .items { background: #fff; color: #333; font-size: 1.6rem;}
.other .itemsBox_green { background: #f0f5e2; color: #333; font-size: 1.6rem; padding: 2rem; border: 1px solid #ccc; margin-bottom: 30px;}
.other .itemsBox_yellow { background: #fffbf1; color: #333; font-size: 1.6rem; padding: 2rem; border: 1px solid #ccc; margin-bottom: 30px;}
.other ol { padding: 0 0 0 20px;}
.other ol li { padding-bottom: 1rem;}