@charset "utf-8";

/**************************************************************************************

--------------------------------------------------------------------------------------
レイアウト
***************************************************************************************/

.wrap1200,
.wrap1200N {
    width:1200px;
    margin:0 auto;
    position:relative;
}
.wrap960,
.wrap960N {
    width:960px;
    margin:0 auto;
    position:relative;
}
@media only screen and (max-width:1240px) {
    .wrap1200 {
		width:100%;
		padding:0 20px;
	}
    .wrap1200N {
		width:100%;
	}
}
@media only screen and (max-width:1000px) {
	.wrap960 {
		width:100%;
		padding:0 20px;
	}
    .wrap960N {
		width:100%;
	}
}

/**************************************************************************************

--------------------------------------------------------------------------------------
ヘッダー
***************************************************************************************/

header {
	background-color:rgba(255,255,255,0.7);
	padding:10px 0;
	position:absolute;
	top:0;
	left:0;
	right:0;
	z-index:100;
}
header .inner {
	display:flex;
	justify-content:space-between;
	align-items:center;
}
header a {
	display:block;
}
header a img {
	display:block;
}
header a.entry {
	background-color: #004294;
	border-radius: 50vh;
	display: inline-block;
	padding: 15px 20px 15px 25px;
	position: relative;
}
header a.entry.req_before {
	pointer-events: none;
}
header a.entry.req_before::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0,0,0,.35);
	border-radius: 50vh;
	width: 100%;
	height: 100%;
}
@media only screen and (max-width:1240px) {
	header {
		padding-left:20px;
		padding-right:20px;
	}
}
@media only screen and (max-width:768px) {
	header {
		height:50px;
		padding:0 0 0 20px;
	}
	header a.logo img {
		height:25px;
	}
	body.home header a.logo img,
	body.career header a.logo img,
	body.handicap header a.logo img,
	body.entry header a.logo img,
	body.highschool header a.logo img {
		margin-top: 13px;
	}
	header a.entry {
		padding: 10px 10px 0 15px;
		border-radius: 0;
		height: 50px;
	}
	header a.entry.req_before {
		padding-top: 12px;
	}
	header a.entry.req_before::after {
		border-radius: 0;
	}
	#gNav + header a.entry {
		margin-right: 50px;
	}
}

/**************************************************************************************

--------------------------------------------------------------------------------------
メインビジュアル
***************************************************************************************/

#MV {
	background-position:center top;
	background-repeat:no-repeat;
	background-size:cover;
	padding:10% 3% 2% 2%;
}
body.home #MV          {background-image:url("../img/home/mv.jpg");}
body.career #MV        {background-image:url("../img/career/mv.jpg");}
body.handicap #MV      {background-image:url("../img/handicap/mv.jpg");}
body.about #MV         {background-image:url("../img/about/mv.jpg");}
body.staff #MV         {background-image:url("../img/staff/mv.jpg");}
body.project #MV       {background-image:url("../img/project/mv.jpg");}
body.international #MV {background-image:url("../img/international/mv.jpg");}
body.expert #MV        {background-image:url("../img/expert/mv.jpg");}
body.human #MV         {background-image:url("../img/human/mv.jpg");}
body.recruit #MV       {background-image:url("../img/recruit/mv.jpg");}
body.welfare #MV       {background-image:url("../img/welfare/mv.jpg");}
body.woman #MV         {background-image:url("../img/woman/mv.jpg");}
body.childcare #MV     {background-image:url("../img/childcare/mv.jpg");}
body.faq #MV           {background-image:url("../img/faq/mv.jpg");}
body.lp #MV            {background-image:url("../img/lp/mv.jpg");}
body.lp #MV.intern     {background-image:url("../img/lp/mv_intern.jpg");}

#MV h1 {
	text-align:center;
}
@media only screen and (min-width:1300px) {
	#MV {
		padding:150px 0 20px;
	}
}
@media only screen and (max-width:768px) {
	#MV {
		padding:16% 3% 1% 2%;
	}
}

/**************************************************************************************

--------------------------------------------------------------------------------------
グロナビ
***************************************************************************************/

#gNav ul li a {
	background-color:#fff;
	background-repeat:no-repeat;
	display:block;
}
#gNav ul li.about a {
	color:#004294;
	background-image:url("../img/common/ic_nav_01.png");
}
#gNav ul li.staff a,
#gNav ul li.project a,
#gNav ul li.international a,
#gNav ul li.expert a,
#gNav ul li.human a,
#gNav ul li.welfare a,
#gNav ul li.woman a,
#gNav ul li.childcare a {
	color:#fff;
	background-color:#00a8ba;
}
#gNav ul li.message a,
#gNav ul li.flow a,
#gNav ul li.info a,
#gNav ul li.faq a {
	color:#00a8ba;
}
#gNav ul li.staff a {background-image:url("../img/common/ic_nav_02.png");}
#gNav ul li.project a {background-image:url("../img/common/ic_nav_03.png");	}
#gNav ul li.international a {background-image:url("../img/common/ic_nav_12.png");}
#gNav ul li.expert a {background-image:url("../img/common/ic_nav_04.png");}
#gNav ul li.human a {background-image:url("../img/common/ic_nav_05.png");}
#gNav ul li.welfare a {background-image:url("../img/common/ic_nav_06.png");}
#gNav ul li.woman a {background-image:url("../img/common/ic_nav_07.png");}
#gNav ul li.childcare a {background-image:url("../img/common/ic_nav_13.png");}
#gNav ul li.message a {background-image:url("../img/common/ic_nav_08.png");}
#gNav ul li.flow a {background-image:url("../img/common/ic_nav_09.png");}
#gNav ul li.info a {background-image:url("../img/common/ic_nav_10.png");}
#gNav ul li.faq a {background-image:url("../img/common/ic_nav_11.png");}

/* PC用 - 右から表示 */
@media only screen and (min-width:769px) {
	#gNav {
		position:fixed;
		z-index:200;
	}
	#gNav ul {
		display:block!important;
	}
	#gNav ul li a {
		background-position:7px center;
		background-size:41px auto;
		height:55px;
		line-height:55px;
		padding-left:55px;
		position:fixed;
		right:-300px;
	}
	#gNav ul li a span {
		display:inline-block;
		width:300px;
		padding-left:20px;
		transition:.3s all;
	}
	#gNav ul li.about a {
		top:100px;
	}
	#gNav ul li.staff a {
		top:160px;
	}
	#gNav ul li.project a {
		top:220px;
	}
	#gNav ul li.international a {
		top:280px;
	}
	#gNav ul li.expert a {
		line-height:1.4;
		padding-top:5px;
		top:340px;
	}
	#gNav ul li.human a {
		top:400px;
	}
	#gNav ul li.welfare a {
		top:460px;
	}
	#gNav ul li.woman a {
		top:520px;
	}
	#gNav ul li.childcare a {
		top:580px;
	}
	#gNav ul li.message a {
		top:640px;
	}
	#gNav ul li.info a {
		top:700px;
	}
	#gNav ul li.flow a {
		top:760px;
	}	
	#gNav ul li.faq a {
		top:820px;
	}	
	#gNav ul li a:hover {
		opacity:1;
	}
	#gNav ul li a:hover span {
		margin-right:270px;
	}
	
	/* 中途採用 & 障がい者採用 */
	body.career #gNav ul li.project a,
	body.handicap #gNav ul li.project a {
		top:160px;
	}
	body.career #gNav ul li.international a,
	body.handicap #gNav ul li.international a {
		top:220px;
	}
	body.career #gNav ul li.expert a,
	body.handicap #gNav ul li.expert a {
		line-height:1.4;
		padding-top:5px;
		top:280px;
	}
	body.career #gNav ul li.human a,
	body.handicap #gNav ul li.human a {
		top:340px;
	}
	body.career #gNav ul li.welfare a,
	body.handicap #gNav ul li.welfare a {
		top:400px;
	}
	body.career #gNav ul li.woman a,
	body.handicap #gNav ul li.woman a {
		top:460px;
	}
	body.career #gNav ul li.childcare a,
	body.handicap #gNav ul li.childcare a {
		top:520px;
	}
}

/* スマホ用 - ハンバーガーメニュー */
@media only screen and (max-width:768px) {
	#gNav ul {
		display:none;
		position:relative;
		z-index:200;
		top:50px;
		left:0;
		right:0;
		width:100%;
	}
	#gNav ul li {
	}
	#gNav ul li a {
		height:52px;
		background-position:15px center;
		background-size:38px auto;
		line-height:52px;
		padding:0 10px 0 65px;
		font-size:15px;
	}
	#gNav ul li.project a,
	#gNav ul li.international a,
	#gNav ul li.expert a,
	#gNav ul li.human a,
	#gNav ul li.welfare a,
	#gNav ul li.woman a,
	#gNav ul li.childcare a {
		border-top:1px solid #fff;
	}
	#gNav ul li.flow a,
	#gNav ul li.info a,
	#gNav ul li.faq a {
		border-top:1px solid #00a8ba;
	}
	#gNav ul li.expert a {
		line-height:1.2;
		padding-top:7px;
	}
	#gNav p.btnMenu {
		position:absolute;
		top:0;
		right:0; 
		width:50px;
		z-index:200;
	}
	#gNav p.btnMenu a {
		position:relative;
		width:50px;
		height:50px;
		display:block;
		background-color:#00a8ba;
	}
	#gNav p.btnMenu a:hover {
		opacity:1;
	}
	#gNav p.btnMenu .menu-icon {
		display:block;
		position:absolute;
		top:50%;
		left:50%;
		width:26px;
		height:3px;
		margin:3px 0 0 -12px;
		background-color:#fff;
		transition:.2s;
	}
	#gNav p.btnMenu .menu-icon:before {
		display:block;
		content:"";
		position:absolute;
		top:50%;
		left:50%;
		width:26px;
		height:3px;
		margin-top:-10px;
		margin-left:-13px;
		background-color:#fff;
		transition:.3s;
	}
	#gNav p.btnMenu .menu-icon:after {
		display:block;
		content:"";
		position:absolute;
		top:50%;
		left:50%;
		width:26px;
		height:3px;
		margin-top:7px;
		margin-left:-13px;
		background-color:#fff;
		transition:.3s;
	}
	#gNav p.btnMenu .menu-icon em {
		font-size:10px;
		color:#fff;
		text-align:center;
		display:block;
		width:50px;
		padding-top:2px;
		position:absolute;
		top:-28px;
		left:-13px;
	}
	#gNav p.btnMenu .menu-icon em::before {
		content:"MENU";
		display:inline;
	}

	/* ×ボタン */
	#gNav p.btnMenu .close {
		background:transparent;
	}
	#gNav p.btnMenu .close:before {
		margin-top:0;
		transform:rotate(-45deg);
	}
	#gNav p.btnMenu .close:after {
		margin-top:0;
		transform:rotate(-135deg);
	}
	#gNav p.btnMenu .close em::before {
		content:"CLOSE";
	}
}
@media only screen and (max-width:320px) {
	#gNav ul li.expert a {
		padding-top:5px;
		line-height:1.2;
	}
}

/**************************************************************************************

--------------------------------------------------------------------------------------
メイン部分
***************************************************************************************/

#main {
	display:block;
}
#main section + section {
	margin-top:80px;
}
@media only screen and (max-width:768px) {
	#main section + section {
		margin-top:50px;
	}
}

/**************************************************************************************

--------------------------------------------------------------------------------------
フッター
***************************************************************************************/

footer {
	margin-top:80px;
	background-color:#727171;
	color:#fff;
	font-size:12px;
	padding:10px 0;
}
footer .inner {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
footer .fNav {
}
footer .fNav a {
	display:inline-block;
	color:#fff;
	line-height:1.6;
}
footer .fNav a + a::before {
	content:"/";
	display:inline-block;
	margin-left:10px;
	margin-right:10px;
}
footer .fNav a em:hover {
	text-decoration:underline;
}
body.expert footer,
body.lp footer,
body.entry footer {
	margin-top:0;
}
@media only screen and (max-width:768px) {
	footer {
		margin-top:50px;
	}
	footer .inner {
		justify-content:center;
	}
	footer p.copy {
		width:100%;
		text-align:center;
		margin-top:5px;
		font-size:10px;
	}
}
@media only screen and (max-width:320px) {
	footer .fNav a {
		font-size:11px;
	}
}