@charset "utf-8";

/* =======================================

        CommonElements

======================================= */

/* color・fonts */
:root {
	--main-color: #4AA0DC;
	--main-color2: #C75980;
	--main-color3: #F4C900;
	--main-color4: #4CC764;
	--main-color5: #AA83BD;
	--black-color: #001738;
	--light-bg-color: #F5F7FB;
	--font-family-noto-sans:'Noto Sans JP', sans-serif;
	--font-family-anton:"Anton", sans-serif;
	--font-family-en:"Montserrat", sans-serif;
}

html{
	font-size: 62.5%;/*16px X62.5%=10px*/
	scroll-behavior: smooth;
}

body {
	/* display: none;フェードイン表示用 */
	font-size: 1.4rem;
	line-height: 1.43;
	letter-spacing: 0em;
	color: var(--black-color);
	font-family: var(--font-family-noto-sans);
	font-weight: 400;
	text-align: justify;
}

main{
	padding-top: 80px;
}
.clearfix:after { 
	content: "."; display: block; height: 0; clear: both; visibility: hidden; 
}

.clearfix { 
	display: block; 
}

.pc_none {
	display: none;
}

@media screen and (max-width: 1200px){
	.pc_none{
		display: block;
	}
}

@media screen and (max-width: 1200px){
	.tab_none{
		display: none;
	}
}

/* スクリーンリーダー用 */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* recaptchaバッジ非表示化 */
.grecaptcha-badge { visibility: hidden; }

/* クリックで電話を無効 */
a[href*="tel:"] {
	pointer-events: none;
	cursor: default;
	text-decoration: none;
}

.cmn1300 {
	max-width: 1300px;
	margin:auto;
}

.cmn1200 {
	max-width: 1200px;
	margin:auto;
}

.cmn1100 {
	max-width: 1100px;
	margin:auto;
}

.cmn1000 {
	max-width: 1000px;
	margin:auto;
}

.cmn800 {
	max-width: 800px;
	margin:auto;
}

img {
	max-width: 100%;
	height:  auto;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.pl-pr10{
	padding: 0 10px;
}

@media only screen and (max-width: 1220px) {
	.p-lr_out{
		padding: 0 20px;
	}
}



.serif{
	font-family: var(--font-family-serif);
}

.flex{
	display: flex;
	align-items: center;
	gap: 20px;
}

.fw700{
	font-weight: 700;
}

.bg_blue{
	background-color: var(--light-bg-color);
}

.txt_indent{
	display: block;
	text-indent: -1em;
	margin-left: 1em;
}

.txt_indent02{
	display: inline-block;
    text-indent: -3.5em;
    margin-left: 3em;
}

/* --------------------------------------------*/
/* 共通パーツ
/* --------------------------------------------*/

/*header
--------------------------------------------*/
#header {
	background-color: #fff;
	position: fixed;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	padding:0 40px;
	width: 100%;
	height: 80px;
	z-index: 1000;
	box-sizing: border-box;
	transition: 0.3s;
}
#header::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0px;
	width: 100%;
	height: 4px;
	pointer-events: none;
	box-shadow: 0 4px 4px rgba(0,0,0,.25);
	z-index: 10000;
}
.header.change-color {
    background-color: rgba(255, 255, 255, .8);
}
#header .h_logo {
	display: flex;
	align-items: center;
}
#header .h_logo img{
	width: 186px;
	height: auto;
	transition: all .3s;
}
#header .h_logo img:hover{
	opacity: 0.6;
}
#header .h_logo .h_logo-r{
	width: 100px;
	text-align: center;
	height: 37px;
	line-height: 37px;
	color: var(--black-color2);
	border: 1px solid var(--black-color);
	margin-left: 21px;
}

#header .h_right {
	display: flex;
	align-items: center;
	gap: 42px;
}

#header .h_right .entry-btn a{
	display: block;
	color: #fff;
	text-align: center;
	font-weight: 700;
	background-color: var(--black-color);
	width: 220px;
	padding: 13px 36px;
	border-radius: 50px;
	transition: all .3s;
}

#header .h_right .entry-btn a:hover{
	opacity: 0.6;
}
#panel .menu .navi {
	display: flex;
	justify-content: space-between;
}

#header .h_right .entry-btn a img{
	display: none;
}

#panel .menu .navi li{
	display: table;
	padding-right: 21px;
}

#panel .menu .navi li a:hover {
	color: #CECECE;
}
#panel .menu .navi li.entry-btn a:hover{
	color: #fff;
	opacity: 0.6;
}
/* 現在のページのナビの色を変更 */
#panel .menu .navi li a.current{
	position: relative;
	color: #CECECE;
}
#panel .navi_burgerOnly{
	display: none !important;
}

#panel-btn {
	display: inline-block;
	position: relative;
	width: 50px;
	height: 50px;
	right: 0;
	top: 0;
	z-index: 1100;
}
#panel-btn-icon {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 35px;
	height: 3px;
	border-radius: 2px;
	background: #000;
	transition: 0.2s;
}
#panel-btn-icon:before, 
#panel-btn-icon:after {
	display: block;
	content: "";
	position: absolute;
	left: 0;
	width: 35px;
	height: 3px;
	border-radius: 2px;
	background: #000;
	transition: 0.2s;
}
#panel-btn-icon:before {
	top: -12px;
}
#panel-btn-icon:after {
	top: 12px;
}
#panel-btn .close {
	background: transparent;
}
#panel-btn .close:before,
#panel-btn .close:after {
	top: 0;
	left: 50%;
	width: 44px;
	transform-origin: center;
	background-color: #000;
}
#panel-btn .close:before {
	transform: translateX(-50%) rotate(45deg);
}

#panel-btn .close:after {
	transform: translateX(-50%) rotate(-45deg);
}
#panel {
	display: none;
	background: var(--light-bg-color);
	position: fixed;
	top: 80px;
	right: 0;
	width: 100%;
	height: 100vh;
	max-width: 340px;
	padding: 22px 32px 20px;
	box-sizing: border-box;
	overflow-y: scroll;
	z-index: 900;
}
#panel .menu .navi {
	display: block;
}
#panel .menu .navi li {
	position: relative;
	display: block;
	border-top: 1px solid #CECECE;
	padding: 0;
}
#panel .menu .navi li a{
	display: block;
	font-size: 1.4rem;
	color: var(--black-color2);
	line-height: 50px;
	width: 100%;
	height: 55px;
	transition: all 0.3s ease;
}

#panel .menu .navi li.menu_2col{
	border-top:none;
	width: 100%;
}
#panel .menu .navi li.menu_2col li{
	width: 50%;
	padding-left:14px;
}
#panel .menu .navi li.menu_2col li:first-of-type{
	position: relative;
	padding-left: 0;
	padding-right: 14px;
}

#panel .menu .navi li.menu_2col li:first-of-type:after{
	position: absolute;
	content: "";
	height: 20px;
	width: 1px;
	background-color: #CECECE;
	transform: translateY(-50%);
	right: 0;
	top: 50%;
}
.main_cover{
	position: fixed;
	width: 100vw;
	/* height: 100vh; */
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: -1;  
	-webkit-transition: .3s;
	transition: .3s;
	/* background:rgba(0,0,0,0.4); */
}
.main_cover.close{
	height:100vh;
	visibility: visible;
	/* background:rgba(0,0,0,0.4); */
	z-index:100;
}
#panel .navi_burgerOnly{
	display: block;
}

/*ttl
--------------------------------------------*/
/* ttl01 */
.ttl01{
	font-weight: 700;
	font-size: 2.0rem;
}
.ttl01 .en{
	font-family: var(--font-family-anton);
	font-weight: 400;
	letter-spacing: 0.1em;
	line-height: 1.3;
	font-size: 6.4rem;
	display: block;
}

.ttl01.ttl01_center{
	text-align: center;
}



/* ttl02 */
.ttl02{
	position: relative;
	font-weight: 700;
	font-size: 3.0rem;
	text-align: center;
}

.ttl02:before{
	position: absolute;
	content: "english";
	font-weight: 700;
	font-size: 1.6rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--main-color2);
	font-family: var(--font-family-en);
	transform: translateX(-50%);
	left: 50%;
	top: -30px;
}

/* ttl03 */
.ttl03{
	position: relative;
	font-size: 2.6rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
	vertical-align: bottom;
	margin-bottom: 20px;
}

.ttl03:before{
	position: absolute;
	content: "english";
	font-weight: 700;
	font-size: 1.6rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--main-color2);
	font-family: var(--font-family-en);
	left: 0;
	top: -30px;
}

.ttl03 .em{
	font-size: 3.5rem;
}

/* ttl04 */
.ttl04{
	position: relative;
	font-size: 2.4rem;
	font-weight: 700;
	padding-left: 38px;
}

.ttl04:before{
	position: absolute;
	content: "";
	background-image: url(../img/cmn/icon_blue.png);
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transform: translateY(-50%);
	top: 50%;
	left: 0;
}

.ttl04.icon_yellow:before{
	background-image: url(../img/cmn/icon_yellow.png);
}

.ttl04.icon_purple:before{
	background-image: url(../img/cmn/icon_purple.png);
}


/*btn
--------------------------------------------*/
.btn_wrapper{
	display: flex;
	gap: 30px;
	align-items: center;
	justify-content: center;

}
.btn{
	position: relative;
	background-color: var(--black-color);
	border-radius: 50px;
	min-width: 250px;
	height: 60px;
	font-size: 1.6rem;
	letter-spacing: 0;
	text-align: center;
	transition: all 0.3s ease;
	box-sizing: border-box;
}

.btn::after{
	position: absolute;
	content: "";
	background-image:url(../img/cmn/arrow_white.png);
	width: 17px;
	height: 17px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transform: translateY(-50%);
	top: 50%;
	right:18px;
	transition: all .2s;
}

.btn a{
	display: block;
	color:#fff;
	font-weight: 700;
	line-height: 60px;
}

.btn:hover {
	opacity: 0.6;
}








/*table
--------------------------------------------*/
.h-table {
	padding-top: 25px;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	color: #000;
	padding: 35px 0 40px;
}

.h-table__inner {
	width: 100%;
	border-collapse: collapse;
}

.h-table__header {
	width: 20%;
	font-size: 1.6rem;
	line-height: 2;
	padding: 16px 15px 16px 0;
	font-weight: 700;
}

.h-table__text {
	padding: 16px 15px 16px 0;
	font-weight: 300;
}


/*media
--------------------------------------------*/
.media {
	display: flex;
	align-items: center;
}

.media_img_wrapper {
	width: 41.6666%;
	margin: 0;
}

.media_img {
	width: 100%;
}

.media_body {
	width: 58.3333%;
	padding-left: 50px;
	box-sizing: border-box;
	text-align: justify;/* for IE and Edge  */
	text-align-last: left;
}

.media_ttl {
	font-size: 2.4rem;
	margin-bottom: 25px;
}

.media_txt {
	margin-bottom: 50px;
}

/* small image */
.media.media_smImg .media_img_wrapper {
	width: 400px;
	margin: 0;
}

.media.media_smImg .media_body {
	flex: 1;
	padding-left: 50px;
	box-sizing: border-box;
}

@media screen and (max-width: 1000px){
	.media {
		display: block;
	}

	.media .media_img_wrapper{
		width: 100%;
		max-width: 500px;
		margin: 0 auto 30px;
		
	}
	.media.media_smImg .media_img_wrapper{
		width: 100%;
		max-width: 400px;
		margin: 0 auto 30px;
	}

	.media .media_body,
	.media.media_smImg .media_body{
		width: 100%;
		padding-left: 0;
	}
}




/*sec_jobs（募集中の業務スライド）
--------------------------------------------*/
#sec_jobs{
	position: relative;
	background-color: var(--light-green-color);
	padding-bottom: 115px;
}
#sec_jobs::before{
	position: absolute;
	content:"";
	background-color: #fff;
	width: 100%;
	height: 240px;
	transform: translateX(-50%);
	top: 0;
	left: 50%;
}
#sec_jobs .sec_jobs_wrapper{
	padding: 0 50px;
}
#sec_jobs .sec_ttl{
	position: relative;
	font-size: 4.4rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-align: center;
	margin-bottom: 30px;
}
#sec_jobs .sec_ttl::before{
	position: absolute;
	content: "Jobs";
	width: 140px;
	height: 45px;
	background-color: var(--main-color2);
	font-family: var(--font-family-cardo);
	font-size: 4.0rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 40px;
	color: #fff;
	transform: translateX(-50%);
	left: 50%;
	top: -56px;
	text-align: center;
}

#sec_jobs .card{
	width: 100%;
}
#sec_jobs .card .card_ttl{
	font-size: 2.3rem;
	color: #000;
	letter-spacing: 0.06em;
	font-weight: 700;
	margin-bottom: 10px;
}
#sec_jobs .card a{
	transition: all 0.3s;
}
#sec_jobs .card a:hover{
	opacity: 0.6;
}
#sec_jobs .card .card_txt{
	margin-bottom: 22px;
}
#sec_jobs .card .card_txt,
#sec_jobs .card .card_cat{
	font-size: 1.8rem;
	color: #000;
	letter-spacing: 0.06em;
	font-weight: 300;
}
#sec_jobs .card .card_cat{
	display: inline-block;
	background-color: #fff;
	font-size: 1.6rem;
	padding: 0 20px;
	margin-right: 10px;
	margin-bottom: 10px;
}
#sec_jobs .card .card_img{
	position: relative;
    /* max-width: 550px; */
    padding-top: 72.73%;/*400/50*/
	margin-bottom: 34px;
}
#sec_jobs .card .card_img img{
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media screen and (max-width: 1200px){
	#sec_jobs .sec_jobs_wrapper{
		/* padding: 0 60px; */
	}
}
#sec_jobs .slider_wrapper{
	position: relative;
	margin-bottom: 75px;
	/* overflow: hidden; */
}
#sec_jobs .slider_wrapper .card{
	margin:0 16px;
}
#sec_jobs .slide-arrow {
	position: absolute;
	margin: auto;
	background:rgba(51, 51, 51, 0.8);
	border-radius: 100px;
	top: 164px;
	width: 100px;
	height: 100px;
	z-index: 10;
}
#sec_jobs .prev-arrow {
	left: -45px;
}
#sec_jobs .prev-arrow::before {
	content: url(../img/cmn/arrow_slide01.png);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#sec_jobs .next-arrow {
	right: -45px;
}
#sec_jobs .next-arrow::before {
	content: url(../img/cmn/arrow_slide02.png);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#sec_jobs button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
	padding: 0;
}

@media screen and (max-width: 1300px){
	#sec_jobs .slider_wrapper{
		/* padding: 0 60px; */
	}
}










/*sec_cta
--------------------------------------------*/
#sec_cta{
	position: relative;
	width: 100%;
	background-color: var(--light-green-color);
	overflow: hidden;
	padding-bottom: 105px;
}
#sec_cta::before{
	position: absolute;
	content: "";
	width: 100%;
	height: 25px;
	background-color: #fff;
	top: 0;
	left: 0;
}
.sec_cta_inner{
	position: relative;
	width: 100%;
	padding: 110px 0 0;

}
.sec_cta_inner::before{
	position: absolute;
	content: url(../img/cmn/cta-wave_white.png);
	transform: translateX(-50%);
	left: 50%;
	top: 25px;
}
#sec_cta .sec_ttl{
	position: relative;
	font-size: 3.6rem;
	text-align: center;
	letter-spacing: 0.06em;
	font-weight: 400;
	margin-bottom: 58px;
}
#sec_cta .sec_ttl::before{
	position: absolute;
	content:"ENTRY";
	font-size:8.0rem;
	font-family: var(--font-family-cardo);
	font-weight: 400;
	color: #000;
	letter-spacing: 0.06em;
	transform: translateX(-50%);
	left: 50%;
	top: -156px;
}
#sec_cta .btn_wrapper{
	gap: 20px;
	flex-wrap: wrap;
}
#sec_cta .cta-btn{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--dark-gray-color);
	width: 400px;
	height: 120px;
	font-size: 2.4rem;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-align: center;
	transition: all 0.3s ease;
	box-sizing: border-box;
}
#sec_cta .cta-btn_white{
	background-color: #fff;
}
#sec_cta .cta-btn_white:hover{
	background-color: var(--dark-gray-color);
	color: #fff;
}
#sec_cta .cta-btn_cl2{
	position: relative;
	border: 2px solid var(--main-color2);
	background-color: var(--main-color2);
}
#sec_cta .cta-btn_cl3{
	position: relative;
	border: 2px solid var(--main-color3);
	background-color: var(--main-color3);
}
#sec_cta .cta-btn_cl2,
#sec_cta .cta-btn_cl3{
	outline:1px solid #fff;
	outline-offset:-6px;
}
#sec_cta .cta-btn_cl2,
#sec_cta .cta-btn_cl3{
	color: #fff;
}
#sec_cta .cta-btn_cl2:hover,
#sec_cta .cta-btn_cl3:hover{
	background-color: #fff;
}
#sec_cta .cta-btn_cl2:hover{
	outline:1px solid var(--main-color2);
}
#sec_cta .cta-btn_cl3:hover{
	outline:1px solid var(--main-color3);
}


#sec_cta .cta-btn_cl2:hover{
	color: var(--main-color2);
}
#sec_cta .cta-btn_cl3:hover{
	color: var(--main-color3);
}
#sec_cta .cta-btn_cl2::after,
#sec_cta .cta-btn_cl3::after{
	position: absolute;
	content:url(../img/cmn/arrow_white.png);
	transform: translateY(-50%);
	top: 50%;
	right:31px;
	transition: all .2s;
}
#sec_cta .cta-btn_cl2:hover::after{
	content:url(../img/cmn/arrow_blue.png);
	right:20px;
}
#sec_cta .cta-btn_cl3:hover::after{
	content:url(../img/cmn/arrow_green.png);
	right:20px;
}
@media screen and (max-width: 1300px){
	#sec_cta .cta-btn_white_wrapper{
		width: 100%;

	}
	#sec_cta .cta-btn_white{
		margin: 0 auto;
	}
}
@media screen and (max-width: 1200px){
	#sec_cta .btn_wrapper{
		width: 90%;
		margin:0 auto;
	}
}


/*footer
--------------------------------------------*/

#footer {
	background: #001738;
	border-radius: 50px 50px 0 0;
	padding: 60px 0 0;
}
#footer .f_logo{
	text-align: center;
	margin: 0 auto 170px;
}

#footer .f_detail_area{
	margin: 0 auto;
}

#footer .f_logo a{
	display: flex;
	align-items: center;
	gap: 14px;
}
#footer .f_logo a .h_logo-r{
	line-height: 48px;
	color: #fff;
	font-size: 2rem;
	border: 1px solid;
	height: 48px;
	width: 128px;
}

#footer .f_logo p{
	display: block;
	color: #fff;
	font-size: 2rem;
	letter-spacing: 0.06em;
	line-height: 44px;
	width: 200px;
	border: 1px solid #fff;
	margin: 43px auto;
}
#footer .f_nav_area{
	padding-bottom: 44px;
	border-bottom: 1px solid #fff;
}
#footer .f_nav_area ul {
	display: flex;
	justify-content: center;
	gap: 20px;
}

#footer .f_nav_area ul li {
	margin-bottom: 15px;
}

#footer .f_nav_area ul li a{
	color: #fff;
	font-size: 1.6rem;
	letter-spacing: 0.02em;
	transition: all 0.3s;
}

#footer .f_nav_area ul li a:hover {
	color: var(--main-color);
}

@media screen and (max-width: 1200px){
	#footer .f_nav_area ul {
		flex-direction: column;
		align-items: center;
		gap: 0;
	}
}
/* copyright */
.copy {
	padding: 16px 10px;
}
.copy_inner{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.copy small {
	color: #fff;
	font-size: 1.4rem;
	text-align: center;
	display: block;
}
.copy p{
	display: block;
}
.copy p a{
	color: #fff;
}
.copy p a:hover {
	color: var(--main-color);
}

/* return to top */
.pagetop {
    height: 60px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 60px;
    background: rgba(103, 103, 103, 0.6);
    /* border-radius: 50%; */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 15px;
    width: 15px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translateY(20%) rotate(-45deg);
}



/* =======================================

        CommonElements（下層）

======================================= */


/*404ページ
--------------------------------------------*/
.error404 #lp_mainv .lp_mainv-img{
	background: url(../img/cmn/lp_cmn.jpg);
	background-position: center;
}
#not_found {
	width: 100%;
	padding: 70px 0 140px;
}


#not_found .midashi_02 {
	text-align: center;
	margin: 0 0 50px;
}

#not_found p {
	text-align: center;
}

#not_found .found_map {
	text-align: center;
	margin: 50px 0 0;
}

#not_found .more_btn{
	max-width: 300px;
	text-align: center;
	margin: 0 auto;
}
#not_found .found_map a{
	color: var(--main-color);
}