@charset "utf-8";
/* Navigation CSS Document */

.navigation .navbar .navbar-nav {
	display: flex;
	gap:25px;
}

.region.region-header-nav{
	margin-left:auto;
}
.navigation .navbar .navbar-nav .nav-item a {
    font-size: 1.5rem;
    font-weight: 700;
    padding: 0;
	color:	var(--link-color);
    text-transform: uppercase;
    position: relative;
    margin: 0;
    line-height: 105px;
}
.navigation .navbar .navbar-nav .nav-item a:hover{
	color:	var(--link-hover-color);
}
.navigation .navbar .navbar-nav .nav-item{
	position: relative;
    /*margin: 0 28px;*/
}
@media only screen and (min-width: 1200px) and (max-width: 1600px){
	.navigation .navbar .navbar-nav .nav-item {
		/*margin: 0 18px;*/
	}
}


.navigation .navbar .navbar-collapse {
  display: none;
}
.navigation .navbar .navbar-collapse.show {
  display: block;
}

@media screen and (min-width: 992px) {
  .navbar-expand-lg .navbar-nav {
    margin: 0;
  }
}
@media screen and (max-width: 991.9px) {
	  .navigation .navbar .navbar-nav .nav-item a {
		font-size: 1.3rem;
		font-weight: 600;
		padding: 0;
		color: var(--link-color);
		text-transform: uppercase;
		position: relative;
		margin: 0;
		line-height: 50px;
		display: block;
		border-bottom:1px solid #F2F3F4;
	}
  .navigation .navbar .navbar-nav{
    gap:0px;
  }
	/* .navigation .navbar .navbar-nav .nav-item:last-child a{
		border-bottom:0px;
	} */
	.navigation .navbar .navbar-nav .nav-item{
		margin:0px;
	}
	.navigation .navbar .navbar-collapse.show{
		position: absolute;
		top:51px;
		width: 100vw;
		background: #fff;
		padding: 20px;
    left: 50%;
    transform: translate(-50%, 0%);
	z-index: 200;
	}
	.navigation .navbar .navbar-collapse.show .navbar-nav.m-auto{
		margin-top:0px;
	}
  .navigation button.navbar-toggler{
    order: 3;
  }
  .navigation .region.region-header-login{
    order: 2;
    margin-left:auto;
    margin-right:20px;
  }
}


/* *************************************************************************************
 * Customize
 ************************************************************************************* */
.navigation .navbar {
	background-color: var(--gray-color);
}
.navigation .navbar .navbar-nav {
	gap: 0;
}
.navigation .navbar .navbar-nav .nav-item {
	border-left: 2px solid #fff;
	margin: 15px 0;
}
.navigation .navbar .navbar-nav .nav-item:last-child {
	border-right: 2px solid #fff;
}
.navigation .navbar .navbar-nav .nav-item a {
/* 	line-height: initial; */
	display: flex;
	height: 100%;
	line-height: 1.2;
	padding-left: 20px;
	padding-right: 20px;
}



.header-area .wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.header-area .wrapper .navigation {
	width: 100%;
}

@media screen and (max-width: 991px) {
	.header-area .wrapper {
		height: 60px;
		position: relative;
	}
	.header-area .wrapper .head-logo {
		height: 60px;
	}
	/* .header-area .wrapper .head-user {
		display: none;
	} */
  .header-area .wrapper .head-user #block-korejob-front-header-mypage,
	.header-area .wrapper .head-user #block-korejob-front-header-regist,
	.header-area .wrapper .head-user #block-header-login {
		display: none;
	}
  body.not_login.path-register .header-area .wrapper .head-user #block-header-bookmarks {
/* 		margin-right: 10px; */
    display: none;
  }
	.header-area .wrapper > .navigation {
		position: absolute;
		right: 0;
    pointer-events: none;
	}
	.header-area .wrapper > .navigation .navbar {
		height: 60px;
		background-color: initial;
		justify-content: end;
	}
	.header-area .wrapper > .navigation .navbar .navbar-collapse.show {
		top: 60px;
		border-top: 3px solid var(--orange-color-1);
    pointer-events: auto;
	}
	
	.navigation .navbar .navbar-toggler {
		background-color: var(--orange-color-2);
		padding: 8px 10px;
    pointer-events: auto;
	}
	/* body .navigation .navbar .navbar-toggler .toggler-icon {
		background-color: #fff;
	} */
}

/* メニューアイコン */
.navigation .navbar .navbar-nav .nav-item a {
	/* display: inline-block; */
  align-items: center;
  gap: 15px;
	font-weight: 500;
}

.navigation .navbar .navbar-nav .nav-item a:before {
  content: '';
	background-repeat: no-repeat;
  background-color: var(--orange-color-2);
  background-position: center;
  border-radius: 9999px;
  background-size: 15px;
  width: 30px;
  height: 30px;
  display: inline-block;
	/* margin-right: 15px; */
}
.navigation .navbar .navbar-nav .nav-item:nth-child(1) a:before {
	background-image: url(../img/icon/icon-home.svg);
}
.navigation .navbar .navbar-nav .nav-item:nth-child(2) a:before {
	background-image: url(../img/icon/icon-search.svg);
}
.navigation .navbar .navbar-nav .nav-item:nth-child(3) a:before {
	background-image: url(../img/icon/icon-beginner.svg);
}
.navigation .navbar .navbar-nav .nav-item:nth-child(4) a:before {
	background-image: url(../img/icon/icon-bag.svg);
  background-size: 14px;
}
.navigation .navbar .navbar-nav .nav-item:nth-child(5) a:before {
	background-image: url(../img/icon/icon-book.svg);
  background-size: 16px;
}



@media screen and (max-width: 991px) {
	.navigation .navbar .navbar-nav .nav-item,
  .navigation .navbar .navbar-nav .nav-item:last-child {
		border: 0;
		margin: 0;
	}
	.navigation .navbar .navbar-nav .nav-item a {
		margin: 0;
		padding-top: 20px;
		padding-bottom: 20px;
		padding-left: 15px;
		padding-right: 15px;
		border-bottom: 2px dashed #fff;
		gap: 30px;
		font-size: 16px;
	}
}


@media screen and (min-width: 992px) {
  #block-header-menu-sp {
    display: none;
  }
}

#block-header-menu-sp {
	margin-top: 50px;
}
#block-header-menu-sp .header-menu-list {
	display: flex;
	gap: 20px;
  margin: 0 auto 30px;
}
#block-header-menu-sp .header-menu-list li {
	width: calc((100% - 20px) / 2);
}

/* ログイン中非表示 */
body.user-logged-in #block-header-menu-sp .header-menu-list {
	display: none;
}

#block-header-menu-sp .header_regist,
#block-header-menu-sp .header_login {
	flex-direction: initial;
	gap: 20px;
	width: 100%;
	height: 60px;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 500;
}

#block-header-menu-sp .install img {
	display: block;
	margin: 0 auto;
	border-radius: 10px;
}