/*
Theme Name: BusinessPress Child
Theme URI: https://businesspress.jp/theme/
Template: businesspress
Author: BusinessPress
Author URI: https://businesspress.jp/
Description: BusinessPress ia a simple and beautiful business WordPress theme. You can create a website of corporate, group, freelance and so on.
Tags: one-column,two-columns,right-sidebar,custom-colors,custom-header,custom-logo,custom-menu,editor-style,featured-images,footer-widgets,microformats,post-formats,sticky-post,theme-options,threaded-comments,translation-ready
Version: 1.0.0.1666855385
Updated: 2022-10-27 16:23:05

*/

/*アニメーション・文字が1文字ずつ出てくる 1行目*/
@keyframes updown-anim{
  0%{
    transform: translateY(300%);
  }
  30%{
    transform: translateY(0);
  }
  60%{
    transform: translateY(0);
  }
  80%{
    transform: translateY(0%);
  }
  100%{
    transform: translateY(0%);
  }
}

/*タイトル文字のグループ*/
.block{
	display:flex;
	margin:0;
	  z-index: -2;
}

/*** アニメーションする要素の親 ***/
.updown{
 /*　横並びに */
  overflow: visible; /* はみ出たものを非表示に */
}

/*** アニメーションを適用する要素 ***/
.updown span {
  transform: translateY(350%); /*デフォルトで下に隠す*/
  display: block; /*ブロック要素に*/
  animation: 3.5s updown-anim linear; /* アニメーション */
	animation-fill-mode: forwards;
	z-index: -2;
}

/*** 各span(文字)に遅延時間delayを設定 ***/
.updown span:nth-child(1) {
  animation-delay: 0s;
}
.updown span:nth-child(2) {
  animation-delay: 0.6s;
}
.updown span:nth-child(3) {
  animation-delay: 1.2s;
}

/*** 装飾用 ***/
.updown{
  font-weight: bold;
  font-size: 6rem;
  margin: 6rem;
}

/*アニメーション・文字が1文字ずつ出てくる 2行目*/
@keyframes up-anim{
  0%{
    transform: translateY(200%);
  }
  30%{
    transform: translateY(0);
  }
  60%{
    transform: translateY(0);
  }
  80%{
    transform: translateY(0%);
  }
  100%{
    transform: translateY(0%);
  }
}

/*タイトル文字のグループ*/
.block{
	display:flex;
	margin:0;
}

/*** アニメーションする要素の親 ***/
.up{
 /*　横並びに */
  overflow: visible; /* はみ出たものを非表示に */

}

/*** アニメーションを適用する要素 ***/
.up span {
  transform: translateY(360%); /*デフォルトで下に隠す*/
  display: block; /*ブロック要素に*/
  animation: 3.5s updown-anim linear; /* アニメーション */
	animation-fill-mode: forwards;
	z-index: -2;
}

/*** 各span(文字)に遅延時間delayを設定 ***/
.up span:nth-child(1) {
  animation-delay: 1.8s;
}
.up span:nth-child(2) {
  animation-delay: 2.4s;
}
.up span:nth-child(3) {
  animation-delay: 3.0s;
}

/*** 装飾用 ***/
.up{
  font-weight: bold;
  font-size: 6rem;
  margin: 6rem;
}


/*ボーダーの動き　右から左*/
.border{
  position: relative;
  text-align: center;
}

.border:before{
	content: '';
	position: absolute;
	left: 100%;
	bottom: 0;
	width: 0;
	transform: translateX(-100%);
	border-bottom: solid 4px #000;
	animation: border_anim 10s linear forwards;
	animation-fill-mode:both;
}

@keyframes border_anim {
	0%{
		width: 0%;
	}
	100%{
		width: 100%;
	}
}

@scroll-timeline border-timeline {
    start:0%;
	end: 100%;
	time-range:5s;
    
}

/*contact form7*/
/*スクロールバーの幅*/
.contact-scroll-box::-webkit-scrollbar{
	width: 10px;
}
/*スクロールバー背景色*/
.contact-scroll-box::-webkit-scrollbar-track{
	background: #f1f1f1;
}

/*スクロールバーのつまみの色*/
.contact-scroll-box::-webkit-scrollbar-thumb{
	border-radius: 6px;
	background:#c1c1c1;
}

/*本文調整*/
div.wpcf7 .wpcf7-spinner {
    display: none !important;
}

.contact-bs{
	margin-bottom: 1.0em;
}

.contact-center{
	text-align:center;
}


/*フォームの幅を調整*/
.form-width-name{
	max-width:50%;
}
.form-width {
	max-width: 100%;
}

@media (max-width: 800px) {
	.form-width-name{
	max-width:30%;
}
.form-width {
	max-width: 100%;
}
}

/*レスポンシブスマホの文字*/
@media (max-width: 800px) {
img{
		max-width:100% !important;
	}	
	h1 {
font-size: 2.4rem !important;
}
	h2{
font-size: 2.5rem !important;
	}
	
	h3{
font-size: 2.2rem !important;
	}

	h4{
font-size: 1.8rem !important;
	}

	p{
font-size:1.2rem !important;
	}
.job-title{
	color:#c0c0c0 !important;
	font-size:0.8em !important;
}
}