/****************************** mobile,cpmmon ******************************/

/* -----------------------------------
 トップページ - 背景
----------------------------------- */
.bg {
  height: 100vh;
  position: fixed;
  width: 100vw;
  top: 0;
  left: 0;
  transition: .8s ease-out;
  z-index: 0;
  /* will-change: filter; */
  /* transition: filter 1s ease-out; */
  /* background: rgba(0, 0, 0, 0.9); */
  /* filter: blur(1px); */
}

/* -----------------------------------
 KV
----------------------------------- */
.tvCon {
	margin-top: 100vh;
	box-sizing: border-box;
	/* width: 100%; */
	/* margin-left: auto; */
	/* margin-right: auto; */
	/* overflow: hidden;/ */
}
.topImgCon {
	position: fixed;
	top: 0;
	left: 0;
  width: 100%;
	/* height: 100vh; */
	/* position: relative; */
}
.topImgCon:after {
	content: '';
  position: absolute;
	top: 0;
  height: 100%;
	width: 100%;
	background: rgba(0,0,0,0.3);
	z-index: 1;
}
.topImgCon img {
	height: 100vh;
	/* position: relative; */
}

/* トップテキスト */
.top_text_con {
	font-weight: 600;
	color: #fff;
	position: absolute;
	top: 50%;
	left: var(--side_padding);
	transform: translate(0,-110%);
	z-index: 2;
	display: inline;
}
.top_text_top {
  transform: translate(0,-220%);
}
.top_text_bottom {
  transform: translate(0,5%);
}
.top_text_con>span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 1px solid transparent;
	transition-delay: 10s;
	width: 0%;
}
.txtAnime1_start {
  animation: typing 1s steps(23) forwards, caret 0.3s steps(1) 3.6;
}
.txtAnime2_start {
  animation: typing 1s steps(23) forwards, caret 0.3s steps(1) 5.5;
	animation-delay: 1s;
}
.txtAnime3_start {
  animation: typing 1s steps(23) 1, caret 0.3s steps(1) infinite;
	animation-delay: 2.5s;
	animation-fill-mode: forwards;
}
.topTxtEn {
  font-size: 5rem;
	font-weight: 600;
	line-height: 5rem;
}
@keyframes typing {
  from {
    width: 0;
  } 100% {
		width: 100%;
	}
}
@keyframes caret {
  50% {
    border-right-color: #fff;
  }
}

/* スクロールアロー */
.scrollCon {
	position: absolute;
	bottom: 100px;
	right: 0px;
	z-index: 0;
}
.scrollAllow {
  font-weight: 500;
  font-size: 1.2rem;
  display: inline-block;
  transform: rotate(90deg);
	color: #fff;
}
.scrollLine {
	position: absolute;
	top: 53px;
	right: 32px;
	height: 100px;
	overflow: hidden;
}
.scrollLine .solid {
	display: block;
	height: 100%;
	border-left: 1px solid #fff;
	animation: scroll 2.5s infinite;
	animation-timing-function: ease-out;
	box-sizing: border-box;
}
.scrollLine .transparent {
	display: block;
	height: 100%;
	border-left: 1px solid var(--line_gray);
	box-sizing: border-box;
	/* transform: translateY(-100%); */
}
@keyframes scroll {
	0% {
		transform: translateY(-200%);
	} 30% {
		transform: translateY(-100%);
	} 100% {
		transform: translateY(0%);
	}
}

/* -----------------------------------
 トップページ - アバウト
----------------------------------- */
.top_about {
	padding-top: 30px;
	position: relative;
}
.top_about .content {
	mix-blend-mode: difference;
	color: #fff;
	position: relative;
	z-index: 1;
}
.top_about .text {
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 48px;
}
.top_about .text p:not(:last-child) {
	margin-bottom: 20px;
}

/* 流れる文字 */
.top_about .flow_txt {
	display: flex;
	position: absolute;
	width: 100vw;
	top: -30px;
	width: 100%;
	height: 110px;
	line-height: 110px;
	overflow: hidden;
	z-index: 0;
}
.top_about .flow_txt div {
	flex: 0 0 auto;
	white-space: nowrap;
	padding-right: 15px;
	mix-blend-mode: difference;
	color: #444;
	font-size: 9rem;
	font-weight: 600;
	-webkit-text-stroke: 0.8px #E5E5EA;
}
.top_about .flow_txt div:nth-child(odd) {
  animation: loop 40s -20s linear infinite;
}
.top_about .flow_txt div:nth-child(even) {
  animation: loop2 40s linear infinite;
}

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

/* -----------------------------------
 トップページ - クライアントスライダー
----------------------------------- */
.top_client_slider > div {
  display: flex;
  overflow: hidden;
}
.top_client_slider ul {
  display: flex;
  align-items: center;
}
.top_client_slider li {
  margin-right: 25px;
}
.top_client_slider img {
  /* width: 90px; */
  object-fit: contain;
}
.top_client_slider .size1 {
  width: 100px;
}
.top_client_slider .size2 {
  width: 70px;
}
.top_client_slider .size3 {
  width: 45px;
}

.top_client_slider .forward {
  margin-bottom: 20px;
}
.top_client_slider .forward .top {
  animation: slide1 100s -50s linear infinite;
}
.top_client_slider .forward .bottom {
  animation: slide2 100s linear infinite;
}
.top_client_slider .reverse .top {
  animation: reverse1 100s -50s linear infinite;
}
.top_client_slider .reverse .bottom {
  animation: reverse2 100s linear infinite;
}

@keyframes slide1 {
  0% { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}
@keyframes slide2 {
  0% { transform: translateX(0); }
  to { transform: translateX(-200%); }
}
@keyframes reverse1 {
  0% { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
@keyframes reverse2 {
  0% { transform: translateX(-200%); }
  to { transform: translateX(0); }
}


/* -----------------------------------
 トップページ - サービス
----------------------------------- */
.top_service {
  margin-top: var(--bottom_margin);
}
.top_service h2 {
	mix-blend-mode: difference;
  color: #fff;
  text-align: center;
}
.top_service .list {
	position: relative;
}
.top_service .list li:after {
	content: '';
  position: absolute;
	top: 0;
  height: 100%;
	width: 100%;
	background: rgba(0,0,0,0.2);
	z-index: 0;
}
.top_service .list h3 {
  color: #fff;
	position: absolute;
  bottom: 15px;
  left: 15px;
  z-index: 1;
}
.top_service .list h3 span {
	display: block;
}
.top_service .list h3 .en {
	font-size: 2.4rem;
  font-weight: 600;
}
.top_service .list h3 .jp {
	font-size: 1.3rem;
}


/****************************** 600px ******************************/
@media (min-width: 600px){

	/* -----------------------------------
	 KV
	----------------------------------- */

	/* スクロールアロー */
	.scrollCon {
		position: absolute;
		bottom: 100px;
		right: 0px;
		z-index: 0;
	}
	.scrollAllow {
	  font-weight: 500;
	  font-size: 1.4rem;
	  display: inline-block;
	  transform: rotate(90deg);
		color: #fff;
	}
	.scrollLine {
		position: absolute;
		top: 57px;
		right: 38px;
		height: 100px;
		overflow: hidden;
	}
	.scrollLine .solid {
		display: block;
		height: 100%;
		border-left: 1px solid #fff;
		animation: scroll 2.5s infinite;
		animation-timing-function: ease-out;
		box-sizing: border-box;
	}

	/* -----------------------------------
	 トップページ - クライアントスライダー
	----------------------------------- */
	.top_client_slider > div {
		display: flex;
		overflow: hidden;
	}
	.top_client_slider ul {
		display: flex;
	}
	.top_client_slider img {
		width: 120px;
		object-fit: contain;
	}


}

/****************************** 1025px ******************************/
@media (min-width: 1025px){

	/* -----------------------------------
	 KV
	----------------------------------- */
	/* トップテキスト */
	.topTxtEn {
    font-size: 7rem;
    line-height: 8rem;
	}
	.topTxtCon {
		font-size: 90px;
	  left: 100px;
	}
	.top_txt {
		transform: translateY(100px);
	}
	.top_text_con {
		transform: translate(0,-55%);
	}
	.top_text_top {
		transform: translate(0,-160%);
	}
	.top_text_bottom {
		transform: translate(0,50%);
	}
	.top_txt_en {
    line-height: 110px;
	}
	.top_txt_jp {
    font-size: 18px;
	}
	.top_txt_jp:before {
    width: 70px;
	}

	/* スクロール */
	.scrollCon {
    bottom: 150px;
		right: 20px;
  }
	.scrollAllow {
    font-size: 1.6rem;
	}
	.scrollLine {
    top: 60px;
    right: 44px;
		height: 150px;
	}


	/* -----------------------------------
	 トップページ - アバウト
	----------------------------------- */
	.top_about .text {
    font-size: 2rem;
    line-height: 60px;
	}
	.top_about .text p:not(:last-child) {
		margin-bottom: 50px;
	}

	/* -----------------------------------
	 トップページ - クライアントスライダー
	----------------------------------- */
	/* .top_client_slider > div {
	  display: flex;
	  overflow: hidden;
	}
	.top_client_slider ul {
	  display: flex;
	}
	.top_client_slider ul > li:not(:last-child) {
	  margin-right: 20px;
	}
	.top_client_slider .top {
	  margin-bottom: 20px;
	} */
	.top_client_slider img {
	  /* width: 150px; */
	  object-fit: contain;
	}

  .top_client_slider li {
    margin-right: 60px;
  }
  .top_client_slider .forward {
    margin-bottom: 40px;
  }

  .top_client_slider .size1 {
    width: 150px;
  }
  .top_client_slider .size2 {
    width: 110px;
  }
  .top_client_slider .size3 {
    width: 65px;
  }
  .top_client_slider .forward .top {
    animation: slide1 120s -60s linear infinite;
  }
  .top_client_slider .forward .bottom {
    animation: slide2 120s linear infinite;
  }
  .top_client_slider .reverse .top {
    animation: reverse1 120s -60s linear infinite;
  }
  .top_client_slider .reverse .bottom {
    animation: reverse2 120s linear infinite;
  }

	/* -----------------------------------
	 トップページ - サービス
	----------------------------------- */
	.top_service {
	  padding-left: var(--side_padding);
	  padding-right: var(--side_padding);
	}
	.top_service h2 {
	  text-align: left;
		padding: 0;
	}
	.top_service .list > ul {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.top_service .list > ul li {
		width: 31%;
	}
	.top_service .list > ul li:first-child,
	.top_service .list > ul li:nth-child(2),
	.top_service .list > ul li:nth-child(3) {
		margin-bottom: 40px;
	}
  .top_service .list h3 {
    bottom: 20px;
    left: 20px;
  }
  .top_service .list h3 .en {
    font-size: 2.6rem;
  }
  .top_service .list h3 .jp {
    font-size: 1.4rem;
  }
}

/****************************** 1400px ******************************/
@media (min-width: 1400px){

  /* -----------------------------------
   KV
  ----------------------------------- */
  /* トップテキスト */
  .topTxtEn {
    font-size: 8rem;
    line-height: 10rem;
  }
  .topTxtCon {
    font-size: 90px;
    left: 100px;
  }
  .top_txt {
    transform: translateY(100px);
  }
  .top_txt_en {
    line-height: 110px;
  }
  .top_txt_jp {
    font-size: 18px;
  }
  .top_txt_jp:before {
    width: 70px;
  }

  /* -----------------------------------
   トップページ - アバウト
  ----------------------------------- */
  .top_about .text {
    width: 60%;

    font-size: 2.4rem;
    line-height: 80px;
  }

  /* -----------------------------------
   トップページ - サービス
  ----------------------------------- */
  .top_service .list h3 .en {
    font-size: 2.8rem;
  }
  .top_service .list h3 .jp {
    font-size: 1.5rem;
  }

}