@charset "UTF-8";
/* CSS Document */

/* ====================
   ボタン
==================== */
.btn-hp{
	border: 1px solid #375079;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 500;
	border-radius: 100px;
	display: block;
	width: 300px;
}
.btn-hp-w{
	border: 1px solid #fff;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 500;
	border-radius: 100px;
	display: block;
	width: 300px;
}
.btn-hp p{
	position: relative;
	padding: 22px;
	z-index: 10;
	color:#375079;
}
.btn-hp-w p{
	position: relative;
	padding: 22px;
	z-index: 10;
	color:#fff;
}
.btn-hp p:after, .btn-hp-w p:after{
	transition: 0.5s;
	content:'';
	display: inline-block;
	position: absolute;
	right:12px;
	top:50%;
	transform: translateY(-50%);
	width: 44px;
	height:44px;
	background-image: url("../img/btn-arrow.svg");
	background-color:#1266E5;
	background-repeat: no-repeat;
	background-size: 12px;
	background-position: center;
	vertical-align: middle;
	padding: 16px;
	border-radius: 100px;
}
.btn-hp:hover p:after, .btn-hp-w:hover p:after{
	position: absolute;
	right:-10px;
	width: 84px;
	height:84px;
}


/* ====================
   heroエリア
==================== */
#top-hero{
	background: #FAFBFC;
	padding:0 80px;
	overflow:hidden;
	display: flex;
	flex-wrap: nowrap;
	position: relative;
	min-height: 100vh;
	align-items: center;
	background-image:url("../img/hero-bg01.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
#top-hero .flowing-text{
	position: absolute;
	bottom:8%;
    display:inline-block;
    animation : text_scroll 200s linear infinite;
    white-space: nowrap;
	font-family: 'Montserrat', sans-serif;
	color:#EBF0F7;
	font-size: 100px;
	font-weight: 600;
	left:0%;
}
@keyframes text_scroll{
   0% { transform: translateX(0)}
   100% { transform: translateX(-100%)}
}
#top-hero .hero-bg-circle1{
	position: absolute;
	width: 60px;
	top:20%;
	left:2%;
}
#top-hero .hero-bg-circle2{
	position: absolute;
	width: 30px;
	top:30%;
	left:50%;
}
#top-hero .hero-bg-circle3{
	position: absolute;
	width: 20px;
	bottom:30%;
	left:40%;
}
#top-hero > div{
	width: 50%;
}
#top-hero .hero-left{
	display: flex;
	flex-direction: column;
	gap:30px;
}
#top-hero .hero-left img{
	width: 80%;
	max-width: 500px;
}
#top-hero .hero-bg{
	width: auto;
	min-height:100vh;
}
#top-hero .hero-right{
	position: relative;
}
.hero-img01, .hero-img02, .hero-img03, .hero-img04, .hero-img05{
	position: absolute;
	width:90%;
	height:auto;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}

/* タブレット（heroエリア） */
@media screen and (max-width:1024px){
	#top-hero{
		min-height: 50vh;
		padding:0 30px;
	}
	#top-hero .hero-bg{
		min-height:50vh;
	}
}
/* スマホ（heroエリア） */
@media screen and (max-width:600px){
	#top-hero{
		flex-direction: column;
		justify-content: center;
		gap:5%;
		height:calc(100vh - 56px);
		margin-top: 56px;
	}
	#top-hero > div{
		width: 100%;
	}
	#top-hero .hero-left img{
		width: 90%;
	}
	#top-hero .hero-bg{
		width: 100%;
		min-height:30vh;
	}
}


/* ====================
   イントロ
==================== */
#top-intro{
	padding:140px 80px;
	background-image:url("../img/top-bg01.svg");
	background-color: #F0F4FA;
	background-size: 100%;
	background-position: top center;
	position: relative;
}
#top-intro .hero-bg-circle4{
	position: absolute;
	width: 50px;
	top:20%;
	right:10%;
}
#top-intro .hero-bg-circle5{
	position: absolute;
	width: 30px;
	top:17%;
	right:9%;
}
#top-intro .wrapper{
	max-width: 1366px;
	margin: 0 auto;
	display: flex;
	gap:80px;
	align-items: center;
}
#top-intro .wrapper > div{
	flex: 1;
}
#top-intro .wrapper h2{
	color:#1266E5;
	font-family: 'Montserrat', sans-serif;
	font-size: 60px;
	font-weight: 600;
}
#top-intro .wrapper p, #top-intro .wrapper ul{
	font-size: 18px;
	font-weight: 600;
}
#top-intro .wrapper ul {
	list-style-type: disc;
	list-style-position: inside;
}

/* タブレット（イントロ） */
@media screen and (max-width:1024px){
	#top-intro{
		padding:50px;
	}
	#top-intro .hero-bg-circle4{
		width: 50px;
		top:10%;
		right:10%;
	}
	#top-intro .hero-bg-circle5{
		width: 30px;
		top:17%;
		right:9%;
	}
	#top-intro .wrapper{
		flex-direction: column-reverse;
		justify-content: center;
		align-items: flex-start;
		gap:60px;
	}
	#top-intro .wrapper img{
		width: 60%;
	}
}

/* スマホ（イントロ） */
@media screen and (max-width:600px){
	#top-intro{
		padding:60px 30px;
	}
	#top-intro .wrapper{
		gap:60px;
	}
	#top-intro .wrapper h2{
		font-size: 8vw;
	}
	#top-intro .wrapper p,
	#top-intro .wrapper ul{
		font-size: 16px;
	}
	#top-intro .wrapper img{
		width: 100%;
	}
}


/* ====================
   ITソリューション事業
==================== */
#top-it .box01{
	display: flex;
	align-items: center;
	gap:80px;
	margin:0 0 100px -80px;
}
#top-it .box01 div{
	width: calc(50% - 40px);
	display: flex;
	flex-direction: column;
	gap:30px;
}
#top-it .box01 h2{
	font-size: 40px;
	font-weight: 600;
}
#top-it .box01 .it-img{
	width: calc(50% - 40px);
	position: relative;
}
#top-it .box01 .it-img:before{
	content:'';
	position: absolute;
	background-image: url("../img/top-it-sub.svg");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: contain;
	right:-30px;
	display: inline-block;
	width: 30px;
	height: 255px;
	z-index: 100;
}
.service{
	background-image: url("../img/top-bg02.svg");
	background-position:bottom center;
	background-repeat: no-repeat;
	background-size:100%;
}
.service .inner{
	padding: 140px 80px 140px 80px;
	max-width: 1366px;
	margin: 0 auto;
}
.service h3{
	font-size: 32px;
	font-weight: 700;
	margin: 0 auto;
}
.service .flex-container{
	display: flex;
	flex-wrap: wrap;
	justify-content:flex-start;
	gap:80px;
}
.service .flex-container .flex-item {
	width: 36%;
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	align-content: flex-start;
}
.service .flex-container .flex-item img{
	margin-bottom: -20px;
}
.service .flex-container .flex-item .service-card{
	position: relative;
	z-index: 10;
	padding: 30px;
	border:1px solid #E1E9F5;
	border-radius: 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap:20px;
	background: #FFFFFF99;
}
.service .flex-container .flex-item .service-card a{
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	position: relative;
	width: 100%;
	transition: 0.5s;
}
.service .flex-container .flex-item .service-card a span{
	display: block;
	padding-right: 30px;
}
.service .flex-container .flex-item .service-card a:hover{
	opacity: 0.7;
}
.service .flex-container .flex-item .service-card a::after {
	content: "";
	width: 30px;
	height: 30px;
	position: absolute;
	background: url("../img/btn-icon.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	top:50%;
	right:0;
	transform: translateY(-50%);
}
.service .flex-container .flex-item .service-card p{
	color:#121212;
	font-size: 15px;
	text-align: justify;
}
.service .flex-container .flex-item1 div h4{
	font-size: 32px;
	font-weight: 700;
}
.service .flex-container .flex-item2,
.service .flex-container .flex-item4{
	padding-top: 40px;
}
.service .flex-container .flex-item3{
	margin-left: auto;
}

/* タブレット（ITソリューション事業） */
@media screen and (max-width:1024px){
	#top-it .box01{
	display: flex;
	align-items: center;
	gap:60px;
	margin:0 0 0 0;
	}
	.service .inner{
	padding:0;
	}
	#top-it .box01 div{
		width: 50%;
		gap:30px;
	}
	#top-it .box01 .it-img:before{
		width: 20px;
	}
	#top-it .box01 h2{
		font-size: 30px;
	}
	.service{
		padding: 100px 50px 100px 50px;
	}
}

/* スマホ（ITソリューション事業） */
@media screen and (max-width:600px){
	#top-it .box01{
		flex-direction: column;
		margin:0;
		margin-bottom: 60px;
	}
	#top-it .box01 div{
		width:100%;
	}
	#top-it .box01 .it-img{
		width: 90%;
	}
	.service{
		padding: 60px 30px 60px 30px;
		background-size:cover;
	}
	.service h3{
		font-size: 24px;
		margin-bottom: 40px;
	}
	.service .flex-container{
		flex-direction: column;
		gap:40px;
}
	.service .flex-container .flex-item {
		width:100%;
	}
	.service .flex-container .flex-item2,
	.service .flex-container .flex-item4{
		padding-top:0px;
	}
	.service .flex-container .flex-item .service-card a{
		font-size: 16px;
	}
	.service .flex-container .flex-item .service-card a span{
		font-size: 20px;
	}
}


/* ====================
   物流サービス、その他
==================== */
#top-logi{
	padding:140px 80px;
	background-image:url("../img/top-bg03.svg"),linear-gradient(67deg, #005EEA 0%, #1E65CE 0%, #36A3F0 25%, #63BCEA 49%, #2EC7F5 77%, #7CEAE0 100%) ;
	background-size: 100%;
	background-position: top center;
	color:#fff;
}
#top-logi .wrapper{
	max-width: 1366px;
	margin: 0 auto;
}
#top-logi .wrapper .box01{
	display: flex;
	align-items: center;
	gap:80px;
	margin-right: -80px;
}
#top-logi .wrapper .box01 div{
	width: calc(50% - 40px);
	display: flex;
	flex-direction: column;
	gap:30px;
}
#top-logi .wrapper .box01 h2{
	font-size: 40px;
	font-weight: 600;
	color:#fff;
}
#top-logi .wrapper .box01 p{
	color:#fff;
}
#top-logi .wrapper .box01 .logi-img{
	width: calc(50% - 40px);
	position: relative;
}
#top-logi .wrapper .box01 .logi-img:before{
	content:'';
	position: absolute;
	background-image: url("../img/top-logi-sub.svg");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: contain;
	left:-30px;
	display: inline-block;
	width: 30px;
	height: 255px;
	z-index: 100;
}

/* タブレット（物流サービス、その他） */
@media screen and (max-width:1024px){
	#top-logi{
		padding:100px 50px;
	}
	#top-logi .wrapper .box01{
		gap:60px;
		margin-right:0px;
	}
	#top-logi .wrapper .box01 div{
		width:50%;
	}
	#top-logi .wrapper .box01 h2{
		font-size: 30px;
	}
	#top-logi .wrapper .box01 .logi-img{
		width:50%;
	}
	#top-logi .wrapper .box01 .logi-img:before{
		width: 20px;
	}
}

/* スマホ（物流サービス、その他） */
@media screen and (max-width:600px){
	#top-logi{
		padding:60px 30px;
	}
	#top-logi .wrapper .box01{
		gap:60px;
		flex-direction: column-reverse;
	}
	#top-logi .wrapper .box01 div{
		width:100%;
	}
	#top-logi .wrapper .box01 h2{
		font-size:8vw;
	}
	#top-logi .wrapper .box01 .logi-img{
		width:90%;
	}
	#top-logi .wrapper .box01 .logi-img:before{
		width: 20px;
	}
}


/* ====================
   ヒューマンパワーについて
==================== */
#top-company{
	padding:140px 80px;
	background-image: url("../img/top-company-bg.webp");
	background-position: center bottom;
	background-size: 100%;
	background-repeat: no-repeat;
	background-color: #F0F4FA;
}
#top-company .wrapper{
	max-width: 1366px;
	margin: 0 auto;
}
#top-company .wrapper .box01{
	display: flex;
	align-items: center;
	gap:80px;
	margin-bottom: 40px;
}
#top-company .wrapper .box01 img{
	width: calc(45% - 40px);
}
#top-company .wrapper .box01 div{
	width: calc(55% - 40px);
	display: flex;
	flex-direction: column;
	gap:30px;
}
#top-company .wrapper .box01 h2{
	font-size: 40px;
	font-weight: 600;
}
#top-company .wrapper .box02{
	display: flex;
	align-items: center;
	justify-content: center;
	gap:8px;
}
#top-company .wrapper .box02 .btn-box{
	width:calc(46% - 4px);
	background-color: rgba(255,255,255,0.6);
	padding: 70px;
}
#top-company .wrapper .box02 .title{
	font-size: 24px;
	font-weight: 600;
	font-family: 'Montserrat', sans-serif;
}
#top-company .wrapper .box02 a div{
	display: flex;
	align-items: flex-start;
}
#top-company .wrapper .box02 a div img{
	width: 44px;
	background: #1266E5;
	padding: 16px;
	border-radius: 100px;
	transition: 0.5s;
}
#top-company .wrapper .box02 a:hover img{
	width: 64px;
	padding: 26px;
}
#top-company .wrapper .box02 a div p{	
	width: calc(100% - 64px);
	margin-left: 20px;
	color:#375079;
}
#top-company .wrapper .box02 a p span{
	font-weight: 400;
	display: block;
	font-size: 14px;
	color:#121212;
}
#top-company .wrapper .box02 .left{
	border-radius: 20px 0px 0px 20px;
}
#top-company .wrapper .box02 .right{
	border-radius: 0px 20px 20px 0px;
}

/* タブレット（ヒューマンパワーについて） */
@media screen and (max-width:1024px){
	#top-company{
		padding:100px 50px;
	}
	#top-company .wrapper .box01{
		gap:60px;
	}
	#top-company .wrapper .box01 img{
		width: calc(45% - 30px);
	}
	#top-company .wrapper .box01 div{
	width: calc(55% - 30px);
	}
	#top-company .wrapper .box01 h2{
		font-size: 30px;
	}
	#top-company .wrapper .box02 .btn-box{
		width:calc(50% - 4px);
		padding: 30px;
	}
	#top-company .wrapper .box02 .title{
		font-size: 24px;
	}
}

/* スマホ（ヒューマンパワーについて） */
@media screen and (max-width:600px){
	#top-company{
		padding:60px 30px;
	}
	#top-company .wrapper .box01{
		flex-direction: column;
	}
	#top-company .wrapper .box01 img{
		width:100%;
	}
	#top-company .wrapper .box01 div{
		width:100%;
	}
	#top-company .wrapper .box02{
		flex-direction: column;
	}
	#top-company .wrapper .box02 .btn-box{
		width:100%;
	}
	#top-company .wrapper .box02 .title{
		font-size: 20px;
	}
	#top-company .wrapper .box02 .left,
	#top-company .wrapper .box02 .right{
		border-radius: 20px;
	}
}

/*=== 丸が動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:10px;
	left:10%;
	z-index: 100;
}
/*Scrollテキストの描写*/
.scrolldown span{
    /*描画位置*/
	position: absolute;
	left:-30px;
	bottom:50px;
    /*テキストの形状*/
	color:#00317F;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}
/* 丸の描写 */
.scrolldown:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-14px;
    /*丸の形状*/
	width:30px;
	height:30px;
	border-radius: 50%;
	background:#B6C7DE;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}
/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-5px;}
 }
/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }
/* 線の描写 */
.scrolldown:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:1px;
	height: 50px;
	background:#00317F;
}

/* スマホ（スクロールダウン） */
@media screen and (max-width:600px){
	.scrolldown span{
		font-size: 10px;
	}
}