@charset "utf-8";
/*--------------------------------------
 base
--------------------------------------*/
html{
  font-size: 52%;
}
body{
	padding-top: 70px;
}
/*--------------------------------------
 header
--------------------------------------*/
#site-header{
	width: calc(100% - 10px);
	left: 5px;
	top: 5px;
	border-radius: 12px;
	padding: 0 105px 0 10px;
	height: 60px;
}
#site-header .global-btn{
	display: none;
}
#site-header #global-nav{
	display: none;
}
#site-header .logo .summary{
	display: none;
}
.logo .logo-img{
	gap: 5px;
}
.logo .img img{
	width: 32px;
}
.logo .logo-img p{
	font-size: 1.4rem;
}
/*menu*/
.menubtn{
  display: block;
  width: 42px;
  height: 42px;
  position: absolute;
	top: 10px;
	right: 10px;
  margin-left: auto;
  background: #66AFD8;
	border-radius: 3px;
}
.menubtn .txt{
	font-size: 0.8rem;
	color: #fff;
	display: block;
	width: 42px;
	position: absolute;
	left: 0;
	bottom: 5px;
	text-align: center;
}
.hamburger{
  display: inline-block;
  cursor: pointer;
  width: 28px;
  position: absolute;
  top: 8px;
  left: 7px;
}
.bar1, .bar2, .bar3 {
  display: block;
  width: 28px;
  height: 2px;
  background-color: #ffffff;
	border-radius: 100px;
  transition: 0.4s;
}
.hamburger:hover .bar1,
.hamburger:hover .bar2,
.hamburger:hover .bar3{
  background-color: #ffffff;
}
.bar1,
.bar2{
  margin-bottom: 5px;
}
.active .bar1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}
.active .bar2 {
  opacity: 0;
}
.active .bar3 {
  transform: rotate(45deg) translate(-4px, -5px);
}
#sp-header-nav{
	display: block;
	position: absolute;
	top: 17px;
	right: 65px;
	.ico img{
		width: 30px;
	}
}
#sp-global-nav{
	position: fixed;
	z-index: 5;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("../common/img/page-bg.jpg") no-repeat #FFF4F8;
	background-size: cover;
	padding-top: 66px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	transform: scale(0.9);
	transition: all 0.3s ease;
	.menu li + li{
		margin-top: 30px;
	}
	.menu li a{
		font-size: 2rem;
		font-weight: 700;
		display: flex;
		align-items: center;
		gap: 10px;
	}
	& .ico img{
		width: 30px;
		height: auto;
	}
	&.open{
		visibility: visible;
		opacity: 1;
		transform: scale(1);
	}
	.global-btn{
		margin-left: 0;
		margin-top: 50px;
		padding: 0 20px;
	}
	.btn-wrap .btn{
		flex: 1 1 0;
		.block{
			display: inline-block;
		}
	}
}
/*--------------------------------------
 footer
--------------------------------------*/
#floating-btn{
	display: none;
}
#type-nav{
	margin-top: 100px;
	& a{
		font-size: 1.6rem;
		padding: 10px;
	}
}
#type-nav-list{
	padding: 20px;
	& ul{
		gap: 10px;
	}
}
#site-footer{
	padding: 40px 20px;
	margin-top: 45px;
	.logo .logo-img p{
		font-size: 4.2vw;
	}
	.logo .summary{
		line-height: 1.5;
		& span{
			display: inline-block;
		}
	}
}
#footer-nav{
	width: 100%;
}
#footer-nav ul{
	display: block;
	margin-left: -20px;
	margin-right: -20px;
	margin-bottom: 35px;
	& li::after{
		display: none;
	}
	& li{
		border-top: 1px solid #fff;
	}
	& li:last-child{
		border-bottom: 1px solid #fff;
	}
	& li a{
		display: block;
		padding: 15px 20px;
	}
}
#site-footer .copyright{
	font-size: 1.3rem;
}
#sp-fixed{
	display: block;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 0 20px 10px 20px;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	.btn-wrap{
		gap: 15px;
	}
	.btn-wrap .btn{
		flex: 1 1 0;
		.block{
			display: inline-block;
		}
	}
	&.scroll{
		opacity: 1;
		visibility: visible;
	}
}
/*--------------------------------------
 common
--------------------------------------*/
.sp-hide{
	display: none;
}
.wrap{
	padding: 0 20px;
}
.sec-title{
	font-size: 2.4rem;
	margin-bottom: 20px;
	&::before{
		width: 12px;
		height: 12px;
		margin-right: 10px;
		vertical-align: 3px;
	}
}
.btn{
	font-size: 1.8rem;
	height: 50px;
	min-width: 0;
	padding-left: 20px;
	padding-right: 52px;
	&::after{
		width: 40px;
		height: 40px;
		top: 5px;
		right: 6px;
	}
}
.breadcrumb{
	margin-top: 10px;
	padding: 0 20px;
}
.main-twocol{
	display: block;
	padding: 0 20px;
}
.bg-white{
	padding: 25px 20px;
}
br.sp{
	display: inline;
}
/*--------------------------------------
aside job tabs
--------------------------------------*/
.aside-jobs-wrap{
	background: #66AFD8;
	padding: 40px 20px 20px 20px;
	margin: 50px -20px;

}
#aside-right section{
	border-radius: 15px;
	padding: 15px;
}
#aside-popup{
	padding: 0;
	.wrap{
		border-radius: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		overflow: scroll;
	}
}
.jobs-tabs-aside li {
	.tit{
		width: 6.5rem;
		flex-shrink: 0;
	}
	.tit::before {
		display: none;
	}
	& .queries {
		& li {
			padding: 6px 4px;
		}
	}
}
#aside-popup .jobs-tabs{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	padding-right: 56px;
	background: #f5f5f5;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	& a{
		width: auto;
		height: 56px;
		justify-content: center;
		gap: 10px;
		border-radius: 0;
		padding-left: 0;
		& strong{
			font-size: 1.5rem;
		}
		&::after{
			display: none;
		}
	}
}
#aside-popup .jobs-tabs li {
	a::before {
		display: none;
	}
}
#aside-popup .jobs-tabs li + li {
	margin-top: 0;
	border-left: 2px solid #fff;
}
#aside-popup .jobs-tabs li:last-child{
	border-right: 2px solid #fff;
}
#aside-popup .jobs-tabs li{
	& br{
		display: none;
	}
	& a::before{
		width: 54px;
		height: 42px;
	}
}
#aside-popup .jobs-tab-content{
	font-size: 1.4rem;
	.grid{
	  grid-template-columns: calc(50% - 5px) calc(50% - 5px);
	  gap: 10px;
	}
}
#aside-popup .jobs-tab-content .inner{
	padding: 80px 20px 80px 20px;
}
#aside-popup .jobs-tab-content .inner h3{
	display: none;
}
#aside-popup .jobs-tab-content .btn-wrap{
	margin-top: 15px;
}
.jobs-tab-content .salary-input{
	& input[type="number"]{
		width: 40%;
	}
}
#aside-popup .search-bar{
	display: flex;
	justify-content: center;
	gap: 20px;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	margin-top: 0;
	padding: 10px;
}
#aside-popup .search-bar .result-num{
	margin-bottom: 0;
	justify-content: center;
	gap: 5px;
	.ico{
		display: none;
	}
	.ico img{
		width: 18px;
		height: auto;
	}
	.txt{
		font-size: 1.6rem;
		white-space: nowrap;
	}
	.num{
		width: auto;
		padding: 10px 10px;
		font-size: 1.8rem;
	}
	.txt02{
		font-size: 1.6rem;
	}
}
#aside-popup .search-bar .btn{
	min-width: 0;
	font-size: 1.5rem;
	height: 44px;
	&::after{
		width: 34px;
		height: 34px;
	}
}
#aside-popup .search-bar .btn-wrap{
	width: auto;
}
#aside-popup .result-num{
	margin-bottom: 0;
}
#aside-popup .close-btn{
	top: 0;
	right: 0;
	border-radius: 0;
	width: 56px;
	height: 56px;
}
.jobs-tab-content .type-grid{
	display: block;
	& ul{
		border-left: 0;
		padding: 0;
	}
	h4{
		margin-top: 30px;
		margin-bottom: 10px;
	}
	h4:first-child{
		margin-top: 0;
	}
}
#consulting-popup{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(216, 102, 129, 0.9);
	padding: 32px 10px 10px 10px;
	z-index: 10;
	overflow: scroll;
	display: flex;
	align-items: center;
	visibility: hidden;
	opacity: 0;
	transition: all 0.3s ease;
	margin-top: 0;
	.close-btn{
		position: absolute;
		top: 10px;
		right: 10px;
	}
	&.active{
		opacity: 1;
		visibility: visible;
	}
	.close-btn{
		display: block;
	}
	.close-base{
		display: block;
	}
}
.aside-consulting {
	position: relative;
	z-index: 1;
	.img {
		width: 70%;
		margin-left: auto;
		margin-right: auto;
	}
	.img + p {
		margin: 15px 0;
	}
}
.line-btn {
	padding: 12px 0;
}
.aside-consulting{
	background: #fff;
	padding: 15px;
	border-radius: 15px;
}

/*--------------------------------------
 top
--------------------------------------*/
#main-visual{
	margin-top: 55px;
	width: calc( 100% - 40px);
	margin-left: 20px;
	position: relative;
	& h1{
		position: absolute;
		top: -50px;
		left: 0;
		width: 100%;
		font-size: 1.5rem;
		padding: 0;
		height: 32px;
		line-height: 32px;
	}
	.txt{
		position: static;
		.copy{
			position: absolute;
			top: 6vw;
			right: 11px;
			& img{
				width: 60%;
			}
		}
	}
}
#top-jobs .sec-title-en{
	display: none;
}
#top .sec-title-en + .sec-title{
	margin-top: 20px;
}
#top section + section{
	margin-top: 50px;
}
.jobs-queiries{
	display: block;
}
.search-bar{
	display: block;
}
#top .jobs-tab-content{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 10;
	background: rgba(102, 175, 216, 0.9);
	padding: 20px;
	& h3{
		font-size: 1.4rem;
		line-height: 1.25;
		margin-bottom: 15px;
	}
	.grid{
	  grid-template-columns: calc(50% - 8px) calc(50% - 8px);
	  gap: 16px;
	}
}
#top .jobs-tab-content.active{
	opacity: 1;
	visibility: visible;
}
#top .jobs-tab-content .close-btn{
	display: block;
	position: absolute;
	top: 10px;
	right: 10px;
}
#top .jobs-tab-content .inner{
	background: #fff;
	padding: 20px;
	border-radius: 26px;
	height: 100%;
	display: flex;
	flex-direction: column;
	.scroll{
		flex: 1 1 auto;
		overflow: scroll;	
	}
	.btn-wrap{
		display: flex;
	}
}
.jobs-tab-content .btn-wrap{
	margin-top: 15px;
}

#top .jobs-tabs{
	& a{
		width: auto;
		height: 60px;
		gap: 10px;
		& strong{
			font-size: 2.1rem;
		}
	}
}
#top .jobs-tabs li{
	& br{
		display: none;
	}
	& a::before{
		width: 54px;
		height: 42px;
	}
}

.search-bar .result-num{
	justify-content: center;
	margin-bottom: 10px;
	.ico img{
		width: 28px;
		height: auto;
	}
	.txt{
		font-size: 2rem;
	}
	.num{
		width: 4em;
		padding: 10px 10px;
		font-size: 2.4rem;
	}
	.txt02{
		font-size: 2rem;
	}
}
.btn-wrap{
	width: 100%;
	display: flex;
	justify-content: center;
}
.sec-title-en{
	font-size: 4.3rem;
}
#top-support .bg-white{
	flex-direction: column;
	gap: 25px;
	margin-bottom: 35px;
	.img{
		width: auto;
		display: flex;
	}
	.page-content h2{
		font-size: 1.8rem;
		& br{
			display: none;
		}
	}
	& p + h2{
		margin-top: 35px;
	}
}
#top #top-recommend{
	margin-top: 100px;
}
#top-feature .feature-col{
	display: block;
	padding-right: 0;
	& h2{
		font-size: 1.6rem;
		white-space: nowrap;
		bottom: 61px;
		& strong{
			font-size: 3rem;
		}
	}
	& p{
		font-size: 1.8rem;
		white-space: nowrap;
		right: auto;
		left: 0;
		bottom: -19px;
	}
	.col{
		display: block;
		margin-top: 50px;
	}
}
.tabs{
	margin-bottom: 0px;
	margin-top: 30px;
	gap: 10px;
	& li{
		flex: 1 1 0;
	}
	& a{
		width: auto;
		height: 65px;
		text-align: center;
		font-size: 1.4rem;
		line-height: 1.25;
		border-radius: 10px;
		& strong{
			display: block;
			font-size: 2rem;
		}
	}
}
.job-slides .slide{
	width: 75vw;
}
.job-slides + .al-center{
	margin-top: 60px;
}
.job-slides .slick-dots li button:before{
	font-size: 1.4rem;
}
.column-list{
	display: block;
}
.post-two-col{
	.txt{
		padding: 20px 15px;
	}
	.post-categories{
		margin-bottom: 15px;
	}
}
.post-two-col .img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.post-two-col + .post-two-col {
	margin-top: 20px;
}
#top-feature,
#top-recommend,
#top-column,
#type-nav,
#top-support{
	&::after{
		display: none;
	}
}
/*--------------------------------------
 jobs archive
--------------------------------------*/
.page-meta{
	flex-wrap: wrap;
}
.page-meta dt{
	display: none;
}
.jobs-list-content {
	.twocol{
		display: block;
		.img{
			width: 100%;
			margin-bottom: 20px;
		}
	}
}
/*--------------------------------------
 jobs single
--------------------------------------*/
.jobs-title {
	padding-left: 0;
	display: block;
	.tags{
		margin-top: 20px;
	}
	&::before {
		display: none;
	}
}
#jobs-single .twocol{
	display: block;
	.img{
		width: 100%;
		margin-bottom: 30px;
	}
}
#jobs-single .btn-row{
	gap: 20px;
	flex-direction: column;
}
.spec-table {
	& th, & td {
		padding: 10px;
	}
	& th{
		width: auto;
		white-space: nowrap;
		.ico{
			display: none;
		}
	}
}
.tit-underline{
	margin-bottom: 30px;
}
#jobs-single .bg-white{
	margin-top: 30px;
}
.spec-list {
	& th {
		& img {
			width: 15px;
			vertical-align: -2px;
			margin-right: 6px;
		}
	}
}
.description {
	display: block;
	& h3 {
		border-right: 0;
		margin-right: 0;
		border-bottom: 1px solid #66AFD8;
		padding-bottom: 10px;
		margin-bottom: 10px;
		.ico img {
			width: 17px;
		}
	}
}

/*--------------------------------------
 faq
--------------------------------------*/
.faq-row h3{
	padding-right: 30px;
}
.faq-row h3 .ico{
	right: 0;
	top: calc(50% - 14px);
}
/*--------------------------------------
 contact
--------------------------------------*/
.main-singlecol{
	padding: 0 20px;
}
.form-steps{
	gap: 50px;
	margin-bottom: 40px;
}
.form-steps li{
 .num{
		width: 46px;
		height: 46px;
		line-height: 46px;
	}
	&::after{
		width: 30px;
		top: 21px;
		left: calc( 100% + 11px );
	}
}
#form{
	padding: 0 0 30px 0;
}
.form-grid{
	display: block;
	.tit-col{
		margin-bottom: 10px;
		margin-top: 30px;
	}
	.tit-col:first-child{
		margin-top: 0;
	}
	& input[type="text"],
	& input[type="number"],
	& input[type="email"],
	& input[type="tel"],
	& textarea{
		padding: 10px;
	}
}
.privacy{
	margin-top: 50px;
}
#form .btn-wrap{
	margin-top: 50px;
}
#contact #sp-fixed{
	display: none;
}
/*--------------------------------------
 info
--------------------------------------*/
.posts-grid{
	display: block;
}
.post-col + .post-col{
	margin-top: 20px;
}
.post-col{
	padding: 10px;
	.post-categories{
		margin: 10px 0;
	}
}