@charset "utf-8";

:root {
	--scroll_bar_width: 150px;
}

@keyframes scroll_bar {
  0% {
	  width: 0px;
      opacity: 0;
  }
  30% {
	  width: var(--scroll_bar_width);
      opacity: 1;
  }
  100% {
	  transform: translateX(50px);
	  opacity: 0;
  }
}





#loading {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999999999999;
}


/* -----------------
home common
-----------------------*/
.home-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    position: relative;
    padding: 12% 0;
}
.home-title:after {
    content: '';
    width: 200vw;
    height: 100%;
    background: var(--main-color);
    position: absolute;
    top: 0;
    left: -50vw;
    z-index: -1;
}
.home-title-text {
    width: 50%;
    padding-left: 80px;
    position: relative;
}
.home-title-text:before {
    content: '';
    width: 15px;
    height: 110px;
    background-color: #fff;
    transform: skewX(-25deg);
    position: absolute;
    top: calc(50% - 55px);
    left: 25px;
}
.home-title-text h2 {
    font-size: 48px;
}
.home-title-text p {
    font-size: 21px;
    font-family: var(--font-en);
    font-weight: 500;
    line-height: 1;
}
.home-title-img {
    width: 65%;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 815px) {

	.home-title {
		display: block;
		padding: 60px 0;
	}
	.home-title-text {
		width: 100%;
		padding-left: 55px;
		position: relative;
		margin-bottom: 20px;
	}
	.home-title-text:before {
		width: 7px;
		height: 70px;
		top: calc(50% - 35px);
		left: 20px;
	}
	.home-title-text h2 {
		font-size: 22px;
	}
	.home-title-text p {
		font-size: 10px;
	}
	.home-title-img {
		width: 100%;
		position: relative;
		right: 0;
		top: auto;
		transform: none;
	}
	.home-title-img img {
		max-width: calc(100% + 40px);
	}
	
	:root {
		--scroll_bar_width: 70px;
	}

}



/* -----------------
main-fv
-----------------------*/
#main-fv {
	position: relative;
}
#main-video {
    display: block;
    width: 100%;
}
.fv-scroll {
    line-height: 1;
    width: 100px;
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
    bottom: 0;
}
.fv-scroll a {
    color: #000;
    font-size: 13px;
    font-family: var(--font-en);
    font-weight: 600;
    display: inline-block;
    transform: rotate(90deg);
}
.fv-scroll a i {
    content: '';
    display: block;
    width: var(--scroll_bar_width);
    height: 1px;
    background: #707070;
    position: absolute;
    left: -50px;
    top: -15px;
    animation: scroll_bar 2s infinite;
}



@media (max-width: 815px) {
/*
	.fv-scroll {
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
		padding-right: 30px;
		bottom: 30px;
	}
*/
	.fv-scroll {
		width: auto;
		left: auto;
		right: -15px;
		bottom: 30px;
	}

	.fv-scroll a {
		font-size: 12px;
	}
	.fv-scroll a i {
		left: -15px;
		top: -10px;
	}

}


/* ----------------
intro
--------------------------*/
#home-intro {
    padding-bottom: 0;
}
.home-intro-main .pos {
    position: absolute;
}
.pos.home-intro-main-en {
    max-width: 35%;
    left: 25px;
    top: 0;
}
.pos.home-intro-main-ja {
    max-width: 40%;
    right: 25px;
    top: 100px;
}

.home-intro-main-bg {
	height: 1100px;
	background: url("../img/home/intro_main_bg.webp") no-repeat center;
	background-size: cover;
}

.home-intro-sub {
	position: relative;
}
.home-intro-sub-text {
    width: 60%;
    padding: 70px 0 140px;
    margin-left: 40%;
    background: #fff;
	position: relative;
	z-index: 1;
}
.home-intro-sub-bg {
	content: '';
    width: 35%;
    height: 100%;
	background: url("../img/home/intro_sub_bg2.jpg") no-repeat center right;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
}
.home-intro-sub-bg:after {
	content: '';
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
	width: 100px;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
}

@media (max-width: 815px) {

	#home-intro {
		padding-top: 30px;
	}
	.home-intro-main .pos {
		position: relative;
	}
	.pos.home-intro-main-en {
		display: block;
		max-width: 100%;
		left: auto;
		top: auto;
	}
	.pos.home-intro-main-en img {
		max-width: 48%;
	}
	.pos.home-intro-main-ja {
		display: block;
		max-width: 100%;
		left: auto;
        top: -40px;
        right: auto;
		text-align: right;
	}
	.pos.home-intro-main-ja img {
		max-width: 58%;
	}
	.home-intro-main-bg {
		height: auto;
		background: none;
	}
	
	.home-intro-sub:after {
		width: 50%;
	}
	.home-intro-sub-text {
        padding: 30px 0;
    }
	.home-intro-sub-text p {
		font-size: 13px;
	}

}

@media (max-width: 480px) {
	
	.home-intro-sub:after {
		width: 55%;
	}

}

@media (max-width: 390px) {
	
	.home-intro-sub:after {
		width: 64%;
	}

}

/* ----------------
home-service
--------------------------*/
#home-service {
	padding-top: 0;
	z-index: 1;
}
.home-service__list {
    margin-top: 210px;
}
.home-service__list >li {
    display: flex;
}
.home-service__list >li .img {
    display: flex;
    width: 50%;
    position: relative;
}
.home-service__list >li .img img {
    max-width: 130%;
}
.home-service__list >li .img .num {
    font-size: 180px;
	font-weight: 400;
	line-height: 1;
	font-family: var(--font-en);
	color: var(--sub-color);
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.home-service__list >li .info {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 50%;
}
.home-service__list >li .info .title h3 {
    font-size: 36px;
    font-weight: 400;
}
.home-service__list >li .info .title p {
    font-size: 18px;
    font-weight: 500;
    font-family: var(--font-en);
    color: #9A9A9A;
    line-height: 1;
}


.home-service__list >li:nth-child(even) {
	flex-direction: row-reverse;
}
.home-service__list >li:nth-child(even) .img {
	justify-content: right;
}
.home-service__list >li:nth-child(even) .img .num {
	left: auto;
	right: 0;
}

@media (max-width: 815px) {

	.home-service__list {
		margin-top: 100px;
	}
	.home-service__list >li {
		display: block;
		margin-bottom: 50px;
	}
	.home-service__list >li .img .num {
		font-size: 80px;
		top: -10px;
		transform: none;
	}
	.home-service__list >li .img {
		display: block;
		width: 100%;
		position: relative;
		margin-bottom: 15px;
	}
	.home-service__list >li .img img {
		max-width: calc(100% + 40px);
		margin-left: -20px;
	}
	.home-service__list >li .info {
		display: block;
		width: 100%;
		text-align: left;
	}
	.home-service__list >li .info .title h3 {
		font-size: 21px;
	}
	.home-service__list >li .info .title p {
		font-size: 10px;
	}

	.home-service__list >li:nth-child(even) .img .num {
		left: 0;
		right: auto;
	}

}


/* ----------------
home-recruit
--------------------------*/
#home-recruit .more {
    width: 300px;
    position: absolute;
    right: 25px;
    bottom: 50px;
}


@media (max-width: 815px) {

	#home-recruit {
		padding-top: 0;
		margin-bottom: 50px;
	    background: var(--main-color);
	}
	#home-recruit .home-title {
		padding-bottom: 0;
	}
	#home-recruit .more {
		width: 100%;
		position: relative;
		right: auto;
		bottom: auto;
	}

}

/* ----------------

--------------------------*/




@media (max-width: 815px) {



}

/* ----------------

--------------------------*/




@media (max-width: 815px) {



}

/* ----------------

--------------------------*/




@media (max-width: 815px) {



}