@charset "utf-8";

/*mainVisual*/
#mainVisual{
	position: relative;	
}
#mainVisual::before{
	content: "";
	position: absolute;
    background-image: url("/img/main_bg.svg");
	background-size: 12%;
    background-repeat: no-repeat;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
#mainVisual::after{
	content: "";
	position: absolute;
    background-image: url("/img/main_bg.svg");
	background-size: 12%;
    background-repeat: no-repeat;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	transform: scale(-1, -1);
}
@media screen and (max-width: 1023px) {
	#mainVisual::before{
		background-size: 20%;
	}
	#mainVisual::after{
		background-size: 20%;
		background-repeat: no-repeat;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		transform: scale(-1, -1);
	}
}
#mainVisual .mvTxt{
	position: absolute;
	width: 100%;
	height: auto;
	bottom: 140px;
	left: 8%;
	z-index: 10;
}
@media screen and (max-width: 768px) {
	#mainVisual .mvTxt{
		bottom: 16%;
		left: 0;
		padding: 0 15px;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: center;
		justify-content: center;
	}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
	#mainVisual .mvTxt{
		bottom: 16%;
		left: 0;
		padding: 0 15px;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: center;
		justify-content: center;
	}
}
#mainVisual .mvTxt p{
	line-height: 1.3;
	font-family: "Noto Serif JP", serif;
	font-weight: bold;
}
#mainVisual .mvTxt p.maincopy{
	text-shadow: 0px 0px 3.6px rgba(0, 0, 0, 0.8);
	-webkit-text-shadow: 0px 0px 3.6px rgba(0, 0, 0, 0.8);
	-moz-text-shadow: 0px 0px 3.6px rgba(0, 0, 0, 0.8);
	-o-text-shadow: 0px 0px 3.6px rgba(0, 0, 0, 0.8);
	-ms-text-shadow: 0px 0px 3.6px rgba(0, 0, 0, 0.8);
	color: #FFFFFF;
	font-size: 5vw;
}
#mainVisual .mvTxt p.maincopy span{
	display: block;
	font-size: 4vw;
}
#mainVisual .mvTxt p.subcopy{
	padding: 4px;
	display: inline-block;
	margin-top: 6px;
	color: #183352;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	font-size: 1.5vw;
}
@media screen and (max-width: 768px) {
	#mainVisual .mvTxt p.maincopy{
		font-size: 10.4vw;
	}
	#mainVisual .mvTxt p.maincopy span{
		font-size: 8.4vw;
	}
	#mainVisual .mvTxt p.subcopy{
		font-size: 3.1vw;
	}
}
@media screen and (min-width:769px) and (max-width:1200px){
	#mainVisual .mvTxt p.maincopy{
		font-size: 6vw;
	}
	#mainVisual .mvTxt p.maincopy span{
		font-size: 4.8vw;
	}
	#mainVisual .mvTxt p.subcopy{
		font-size: 1.8vw;
	}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
	#mainVisual .mvTxt p.maincopy{
		font-size: 10.4vw;
	}
	#mainVisual .mvTxt p.maincopy span{
		font-size: 8.4vw;
	}
	#mainVisual .mvTxt p.subcopy{
		font-size: 3.1vw;
	}
}
@media screen and (min-width: 1023px) {
	#mainVisual .mvTxt{
		width: 70%;
	}
}
#mainVisual .slider {
	margin-inline: auto;
	overflow: hidden;
	width: 100vw;
	height:calc(100vh - 80px);
}
#mainVisual .slick-img img {
  height: 100vh;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
  width: 100%;
}
@media screen and (max-width: 1023px) {
	#mainVisual .slick-img img {
		max-width: 250%;
		width: 250%;
		transform: translateX(-50%);
	}
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15); 
  }
}
.add-animation {
	animation: zoomUp 10s linear 0s normal both;
}
@media screen and (max-width: 1023px) {
	#mainVisual .slider {
		height:calc(100vh - 60px);
	}
}

/*scroll*/
.scroll_down{
	position:absolute;
	bottom: 40px;
	left: 30px;
	z-index: 99;
	text-shadow: 0px 0px 3.6px rgba(0, 0, 0, 0.6);
	-webkit-text-shadow: 0px 0px 3.6px rgba(0, 0, 0, 0.6);
	-moz-text-shadow: 0px 0px 3.6px rgba(0, 0, 0, 0.6);
	-o-text-shadow: 0px 0px 3.6px rgba(0, 0, 0, 0.6);
	-ms-text-shadow: 0px 0px 3.6px rgba(0, 0, 0, 0.6);
}
@media screen and (max-width: 1023px) {
	.scroll_down{
		bottom: 48%;
		left: auto;
		right: 26px;
		transform: translate(-50%,-50%); 
	}
}
.scroll_down a{
	position: absolute;
	left: -8px;
	bottom: 78px;
	color: #FFFFFF;
	font-size: 11rem;
	letter-spacing: .2em;
	writing-mode: vertical-lr;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	font-family: "Roboto", sans-serif;
}

.scroll_down:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: -4px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background:#FFFFFF;
	animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}
@keyframes circlemove{
  0%{bottom:60px;}
  100%{bottom:0px;}
}
@keyframes cirlemovehide{
  0%{opacity:0}
  50%{opacity:1;}
  80%{opacity:0.9;}
  100%{opacity:0;}
}
.scroll_down:after{
	content:"";
	position: absolute;
	bottom:0;
	left:0;
	width:2px;
	height: 60px;
	background:#FFFFFF;
}


/*
clm2,
clm3,
clm4*/
#top .clmWrap{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-items: flex-start;
	align-items: flex-start;
}
#top .clmWrap .clm{
	width:calc(100% / 2);
}
#top .clmWrap .clmContents{
	width:calc(100% / 2 - 90px);
}
@media screen and (max-width: 1023px) {
	#top .clmWrap{
		display: block;
	}
	#top .clmWrap .clm,
	#top .clmWrap .clmContents{
		width:100%;
	}
	#top .clmWrap .pcOnly{
		display: none;
	}
	#top .clmWrap +.spOnly{
		display: block;
	}
	#top .clmWrap +.btn a{
		width: 100%;
		max-width: 100%;
		margin-top: 30px;
	}
}

/*panelDesignA*/	
.panelDesignA{
	margin-top: 40px;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.panelDesignA li.panelbox{
	width:calc(100% / 2 - 0.5px);
	height: 34vw;
	min-height: 400px;
}
@media screen and  (max-width:768px){
	.panelDesignA{
		margin-top: 40px;
		display: block;
	}
	.panelDesignA li.panelbox{
		width:100%;
		height: 94vw;
		max-height: 400px;
		min-height: 100%;
	}
	.panelDesignA li + li{
		margin-top: 1px;
	}
}
.panelDesignA li.panelbox a{
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #213552;
	overflow: hidden;
}
.panelDesignA li.panelbox a .contentsBox{
	position: absolute;
	width: 84%;
	left: 50%;
	top: calc(56% - 40px);
	color: #FFFFFF;
	font-weight: bold;
	transform: translate(-50%,-50%); 
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-items: center;
	align-items: center;
}
.panelDesignA li.panelbox a .contentsBox dl{
	position: relative;
	padding-left: 10vw;
}
.panelDesignA li.panelbox a .contentsBox dl::before{
	content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 20%;
    height: 20vw;
	min-width: 70px;
    min-height: 70px;
	transform: translate(0%,-50%); 
}
.panelDesignA .warehouse a .contentsBox dl::before{
    background: url("/img/index_ico01.svg") no-repeat center center;
	background-size: 100%;
}
.panelDesignA .realestate a .contentsBox dl::before{
    background: url("/img/index_ico02.svg") no-repeat center center;
	background-size: 100%;
}
.panelDesignA li.panelbox a .contentsBox dl dt{
	font-size: 40rem;
}
@media screen and (min-width:769px) and (max-width:1199px){
	.panelDesignA li.panelbox a .contentsBox dl dt{
		font-size: 3.6vw;
	}
}
.panelDesignA li.panelbox a .contentsBtn{
	text-align: center;
	position: absolute;
	width: 100%;
	left: 50%;
	bottom: 20%;
	transform: translate(-50%,0%); 
	color: #FFFFFF;
	font-weight: bold;
	z-index: 9;
	
}
.panelDesignA li.panelbox a .contentsBtn span{
	display: inline-block;
	padding: 8px 42px;
	position: relative;
	border-radius: 30px;
	background: rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 9;
	
}
.panelDesignA li.panelbox a .contentsBtn span::after{
	content: "";
	position: absolute;
	top: 17px;
	right: 20px;
	width: 8px;
	height: 8px;
	border-top: 1.2px solid #FFFFFF;
	border-right: 1.2px solid #FFFFFF;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);	
	transition: .3s;
	z-index: 99;
}
.panelDesignA li.panelbox a:hover .contentsBtn span::after{
	right: 16px;
}
.panelDesignA li.panelbox a img{
	transition: transform .3s ease;
	height: 100%;
	margin: auto;
	max-height: 100%;
	max-width: 100%;
	object-fit: cover;
	width: 100%;
	opacity: 0.4;
	
}
.panelDesignA .panelbox a:hover img{
	transform: scale(1.2);
}
@media screen and (max-width: 1023px) {
	.panelDesignA li.panelbox a .contentsBox dl{
		padding-left: 0;
	}
	.panelDesignA li.panelbox a .contentsBox dl dt{
		font-size: 32rem;
		padding-left: calc(4% + 70px);
		margin-bottom: 2vw;
	}
	.panelDesignA li.panelbox a .contentsBox dl::before{
		top: 3vw;
	}
}
@media screen and  (max-width:768px){
	.panelDesignA li.panelbox a .contentsBox dl::before{
		top: 30px;
    	max-width: 90px;
    	max-height: 90px;
	}
}

/*panelDesignB*/
.panelDesignB{
	margin-top: 36px;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
	.panelDesignB{
		margin-top: 30px;
		display: block;
	}
}
.panelDesignB .clm1Panel{
	width: 100%;
}
.panelDesignB .clm2Panel{
	width:calc(100% / 2 - 0.5px);
}
.panelDesignB .clm3Panel{
	width:calc(100% / 3 - 0.5px);
}
.panelDesignB .clm4Panel{
	width:calc(100% / 4 - 0.5px);
}
@media screen and (max-width: 1023px) {
	.panelDesignB .clm1Panel,
	.panelDesignB .clm2Panel,
	.panelDesignB .clm3Panel,
	.panelDesignB .clm4Panel{
		width:100%;
	}
}
.panelDesignB li{
	margin-bottom: 1px;
	overflow: hidden;
	height: 16vw;
}
.panelDesignB li a{
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #213552;
}
.panelDesignB li a p{
	position: absolute;
	text-align: center;
	width: 100%;
	left: 50%;
	top: 50%;
	color: #FFFFFF;
	transform: translate(-50%,-50%); 
	font-size: 1.5vw;
	font-weight: bold;
}
@media screen and (min-width:1501px){
	.panelDesignB li a p{
		font-size: 22rem;
	}
	.panelDesignB li{
		height: 250px;
	}
}
@media screen and (min-width:768px) and (max-width:1023px){
	.panelDesignB li{
		height: 200px;
	}
	.panelDesignB li a p{
		font-size: 2.3vw;
	}
}
@media screen and (max-width:767px){
	.panelDesignB li{
		height: 150px;
	}
	.panelDesignB li a p{
		font-size: 20rem;
	}
}
.panelDesignB li a img{
	transition: transform .3s ease;
	height: 100%;
	margin: auto;
	max-height: 100%;
	max-width: 100%;
	object-fit: cover;
	width: 100%;
	opacity: 0.4;	
}
.panelDesignB li a:hover img{
	transform: scale(1.2);
}
.panelDesignB li a::before {
	content: "";
	position: absolute;
	bottom: 12px;
	right: 12px;
	width: 42px;
	height: 42px;
	border-radius: 30px;
	background: rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 9;
}
.panelDesignB li a::after {
	content: "";
	position: absolute;
	bottom: 28px;
	right: 30px;
	width: 8px;
	height: 8px;
	border-top: 1.2px solid #FFFFFF;
	border-right: 1.2px solid #FFFFFF;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);	
	transition: .3s;
	z-index: 99;
}
.panelDesignB li a:hover::after {
	right: 26px;
}
@media screen and (max-width:1023px){
	.panelDesignB li a::before {
		bottom: 12px;
		right: 12px;
		width: 33px;
		height: 33px;
	}
	.panelDesignB li a::after {
		bottom: 24px;
		right: 26px;
		width: 8px;
		height: 8px;
	}
	.panelDesignB li a:hover::after {
		right: 22px;
	}
}

/*parallelogram*/
.parallelogram{
	position: relative;
}
.parallelogram::after{
	content: "";
	position: absolute;
	bottom: 0;
	width: 100vw;
	height: 36vw;
	background-color: #f6f8fa;
	transform: translate(-50%,0%)skewX(-25deg);
	z-index: -1;
}
#aboutus .parallelogram::after{
	left: calc(0%  + 8vw);
}
#recruit .parallelogram::after{
	right: calc(-100%  + 8vw);
}
@media screen and (max-width:768px){
	.parallelogram::after{
		height: 70%;
	}
}

#top section{
	padding: 200px 0 120px;
	position: relative;
}
#service section{
	padding: 200px 0 0;
}
#top section::before{
	line-height: 0.8;
	content: "";
	position: absolute;
	top: 60px;
	left: 0;
	color: rgba(26, 88, 134, 0.04);
	font-family: "Roboto", sans-serif;
	font-size: 220rem;
	font-weight: bold;
}
#service section::before{
	content: "SERVICE";
	left: 50%;
	transform: translate(-50%,0%); 
}
#aboutus section::before{
	content: "ABOUT\AUS";
	white-space: pre;
	left: auto;
	right: 0;
	text-align: right;
}
#recruit section::before{
	content: "RECRUIT";
}
@media screen and (max-width:1023px){
	#top section::before{
		font-size: 22vw;
	}
	#aboutus section::before{
		left: 0;
		text-align: left;
	}
}
@media screen and (min-width:501px) and (max-width:768px){
	#top section{
		padding: 18vw 0 70px;
	}#service section{
		padding: 18vw 0 0;
	}
	#top section::before{
		top: 4vw;
	}
}
@media screen and (max-width:500px){
	#top section{
		padding: 100px 0 70px;
	}#service section{
		padding: 100px 0 0;
	}
	#top section::before{
		top: 40px;
	}
}

/*service*/
#service .h2DesignA{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
}
#service .h2DesignA h2{
	text-align: center;
}
#service .h2DesignA::before{
	display: none;
}
#service .h2DesignA h2 span{
	padding: 0 88px;
	position: relative;
}
#service .h2DesignA h2 span::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 0px;
	width: 84px;
	height: 1px;
	background-color: #C8C8C8;
	transform: translate(0%,-50%); 
	z-index: 2;
}
#service .h2DesignA h2 span::after{
	content: "";
	position: absolute;
	top: 50%;
	right: 0px;
	width: 84px;
	height: 1px;
	background-color: #C8C8C8;
	transform: translate(0%,-50%); 
	z-index: 2;
}
@media screen and  (max-width:768px){
	#service .h2DesignA h2 span{
		padding: 0 24px;
	}
	#service .h2DesignA h2 span::before,
	#service .h2DesignA h2 span::after{
		width: 20px;
	}
}
/*aboutus*/
#aboutus .h2DesignA::before{
	left: -90px;
	width: 90px;
}
@media screen and (max-width:1023px){
	#aboutus .clmWrap{
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column-reverse;
	}
}
@media screen and (min-width:768px) and (max-width:1023px){
	#aboutus .panelDesignB li.clm2Panel{
		width:calc(100% / 2 - 0.5px);
	}
	#aboutus .panelDesignB li.clm3Panel{
		width:calc(100% / 3 - 0.5px);
	}
}

/*recruit*/
@media screen and (min-width:768px) and (max-width:1023px){
	#recruit .panelDesignB li{
		width:calc(100% / 3 - 0.5px);
	}
}