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

#slider {
    width: 100%;
    height: 97svh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
.base {
	position: relative;
	z-index: -1;
}

.text-box {
	color: #203e95;
	font-family: "Roboto", sans-serif,;
	font-weight: 600;
	font-size: min(12vw, 100px);
	width: 95%;
	height: 90%;
	padding: 5% 0 0 5%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background-image: url("../images/top/sankaku.png");
	background-repeat: no-repeat;
	background-size:contain;
}
.main-copy {
	position: absolute;
	top: 20%;
	color: #ffffff;
	mix-blend-mode: difference;
}
/*copyright*/
.top-main-copy {
	display: block;
	letter-spacing: 1px;
	color: #fff;
	font-size: 0.8rem;
	position: absolute;
	z-index: 999;
	bottom: -3%;
	right: 0;
	padding: 20px 3% 20px 50px;
	background-image: url(../images/top/top_copyright_back.svg);
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

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

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:50px;
	left:50%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:10px;
	bottom:10px;
    /*テキストの形状*/
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
	width:10px;
	height:10px;
	border-radius: 50%;
	background:#eee;
    /*丸の動き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;}
 }

/* 線の描写 */
.scrolldown2:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:2px;
	height: 50px;
	background:#eee;
}

/*company*/
.top-company {
	width: 100%;
	margin: 0 0 10% 0;
	padding: 90px 0 390px 0;
	background-image: url("../images/top/top_company_img.jpg");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100% auto;
}
.top-company-box {
	text-align: center;
}
.top-company-text {
	width: 90%;
	max-width: 900px;
	margin: 0 auto 3% auto;
	text-align: left;
	line-height: 200%;
}

/*動く文字*/
article{
  overflow: hidden;
}
.loop_wrap {
	position: absolute;
	bottom:-5px;
    display: flex;
    width: 100%;
    overflow: hidden;
  }

.loop_wrap div {
	color: #fff;
	font-family: "Roboto", sans-serif,;
	font-weight: 600;
	font-size: min(20vw, 150px);
	line-height: 95%;
	letter-spacing: 2px;
    flex: 0 0 auto;
    white-space: nowrap;
    overflow: hidden;
  }

.loop_wrap div:nth-child(odd) {
animation: loop 50s -25s linear infinite;
}

.loop_wrap div:nth-child(even) {
animation: loop2 50s linear infinite;
}

@keyframes loop {
    0% {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
  }
  
  @keyframes loop2 {
    0% {
      transform: translateX(0);
    }
    to {
      transform: translateX(-200%);
    }
  }

/*business*/
.top-business {
	background-image: url("../images/top/top_business_back.png");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% auto;
}
.top-business-box {
	display: flex;
}
.top-business-text {
	width: 40%;
	margin: 5% auto;
	text-align: center;
}
.top-business-textBox {
	width: 100%;
	max-width: 600px;
	padding: 0;
	margin: 7% auto;
	text-align: left;
	line-height: 200%;
}
.top-business-image {
	width: 50%;
	margin: -50px 0 0 0 ;
}
.top-business-image img {
	border-radius: 0 15px 15px 0;
	box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.11);
	margin: 0 0 5% 0;
}
/*business-slide-image*/
.scroll-container {
    display: flex;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
	margin: 0 0 5% 0;
}

.scroll-content {
    display: flex;
    animation: scroll 50s linear infinite;
}

.item {
    flex: 0 0 auto;
    width: 360px;/*お好みの幅に調整*/
    height: 252px;/*お好みの高さに調整*/
    background-color: none;
    margin: 0 20px;/*左右の余白はここを調整*/
    text-align: center;
    line-height: 252px;
}
.item img {
	border-radius: 15px;
	box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.11);
}
.down {
	margin: 30px 0 0 0;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/*top-works*/
.top-works {
	display: flex;
	align-items:center;
	padding: 3% 0 ;
	background-image: url("../images/top/top_works_moji.png");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100% auto;
}
.top-works-text {
	width: 40%;
	margin: 0 auto 5% auto;
	text-align: center;
}
.top-works-textBox {
	width: 100%;
	max-width: 600px;
	padding: 0;
	margin: 7% auto;
	text-align: left;
	line-height: 200%;
}
.top-works-image {
	width: 50%;
	margin: 0 ;
	padding: 0 ;
}
.top-works-image img {
	margin: 0 auto 10% auto;
	padding: 0;
	max-width: 626px;
}

/*recruit*/
.top-recruit {
	color: #fff;
	text-align: center;
	background-image: url("../images/top/top_recruit_img.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.top-recruit-text {
	width: 90%;
	margin: 0 auto 5% auto;
	padding: 10% 0 5% 0 ;
	text-align: center;
}
.top-recruit-textBox {
	width: 100%;
	max-width: 600px;
	padding: 0;
	margin: 3% auto 5% auto;
	line-height: 200%;
}

@media screen and (max-width: 1020px) {
.text-box {
	background-size:40%;
}
.main-copy {
	top: 10%;
}
	
/*company*/
.top-company {
	width: 100%;
	margin: 0;
	padding: 90px 0 290px 0;
	background-image: url("../images/top/top_company_img.jpg");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100% auto;
}

/*business*/
.top-business-image {
	width: 50%;
	margin: 10% 0 0 0 ;
}
.item {
    flex: 0 0 auto;
    width: 300px;/*お好みの幅に調整*/
    height: 210px;/*お好みの高さに調整*/
    background-color: none;
    margin: 0 18px;/*左右の余白はここを調整*/
    text-align: center;
    line-height: 210px;
}
.down {
	margin: 25px 0 0 0;
}
	
}


@media screen and (max-width: 768px) {
.main-copy {
	top: 20%;
}
	
/*company*/
.top-company {
	width: 100%;
	margin: 0 0 20% 0;
	padding: 90px 0 190px 0;
	background-image: url("../images/top/top_company_img_sp.jpg");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100% auto;
}

/*business*/
.top-business {
	background-image: url("../images/top/top_business_back.png");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% auto;
}
.top-business-box {
	display: block;
}
.top-business-text, .top-works-text {
	width: 90%;
	margin: 5% auto;
	text-align: center;
}
.top-business-image {
	width: 90%;
	margin: 0 auto;
}
.top-business-image img {
	margin: -10% auto 0 auto;
	border-radius: 15px;
	box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.11);
}
.scroll-container {
    display: flex;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
	margin: 10% 0;
}
.item {
    flex: 0 0 auto;
    width: 200px;/*お好みの幅に調整*/
    height: 140px;/*お好みの高さに調整*/
    background-color: none;
    margin: 0 15px;/*左右の余白はここを調整*/
    text-align: center;
    line-height: 140px;
}
.down {
	margin: 20px 0 0 0;
}

/*top-works*/
.top-works {
	display: block;
	padding: 3% 0 ;
	background-image: url("../images/top/top_works_moji.png");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100% auto;
}
.top-works-image {
	width: 90%;
	margin: 0 auto ;
}
.top-works-image img {
	margin: 10% 0 5% 0;
}

/*top-recruit*/
.top-recruit-textBox {
	margin: 5% auto 7% auto;
}
	
}