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


/* 「SlideUp」の動作内容 */
@keyframes SlideUp {
  0% {
    opacity: 1;/* 透明 */
    transform: translateY(50px);/* Y軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }
}

/* 「SlideUp」を適用する箇所 */


.catch03{
  animation-duration: 1.8s;/* アニメーション時間 */
  animation-name: SlideUp;/* アニメーション名 */
  animation-iteration-count: 1;/* アニメーションの繰り返し*/
}

/* 「LeftToRight」の動作内容 */
@keyframes LeftToRight {
  0% {
    opacity: 0.3;/* 透明 */
    transform: translateX(-150px);/* X軸方向に50px */
  }
  100% {
    opacity: 1.0;/* 不透明 */
    transform: translateX(0);
  }
}

.catch02{
  animation-duration: 1.8s;/* アニメーション時間 */
  animation-name: LeftToRight;/* アニメーション名 */
  animation-iteration-count: 1;/* アニメーションの繰り返し*/
}

/* position-active */
 #nav_global .gnav01 a{
	border-bottom: 1px solid #47B739;
}

/*メインビジュアル部分の設定*/

#mainVisual_area{
	width: 100%;
	margin: 0px;
	height: 660px;	
	position: absolute;
	top: 70%;
	left: 0;
}

#maincatch{
	width: 100%;
	height: 660px;
}

#mainVisual_area01{
	width: 82%;
	height: 660px;
	opacity: 1;
}

.maincatch-sec01{
	position: relative;
	width: 90%;
	height: 30%;	
}

.arrowWrap {
  position: absolute;
  right: 3%;
  top: 200%;
  height: 200px
}

.arrowInner p {
  font-size: 12px;
  text-align: end;
  font-family: 'Roboto', sans-serif;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.arrow {
  width: 1px;
  height: 100px;
  margin: 50px auto 0;
  background-color: #eee;
  position: relative;
  overflow: hidden;
}

.arrow::before {
  content: '';
  width: 1px;
  height: 100px;
  margin: 50px auto 0;
  background-color: #000;
  position: absolute;
  top: -150px;
  left: 0;
  -webkit-animation: arrow 2.5s ease 0s infinite normal;
  animation: arrow 2.5s ease 0s infinite normal;
}

@keyframes arrow {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }

  60% {
    -webkit-transform: translate3d(-50%, 100px, 0);
    transform: translate3d(-50%, 100px, 0);
  }

  100% {
    -webkit-transform: translate3d(-50%, 100px, 0);
    transform: translate3d(-50%, 100px, 0);
  }
}

.catch01{
	display: block;
	position: relative;
	top: 110%;
	left: 10%;
	font-weight: 500;
	width: 1000px;
	height: 100px;
	background:  rgba(97,180,201,0.9);
	color: #262626;
	font-size: 5.6rem;
	font-family: 'Oswald', sans-serif;
	z-index: -1;
}

.catch01::before{
	content: "";
	display: block;
	position: absolute;
	top:0;
	left: 0;
	background:#2AAA84;
	opacity: 1;
	width: 100%;
	height: 100%;
	animation-name: square_box_slide;
	animation-timing-function:ease;
	animation-duration: 3s;
	animation-fill-mode: forwards;
	z-index: -2;
}

@keyframes square_box_slide{
0% {
 -webkit-transform: translateX(-100%);
 transform: translateX(-100%);
}
  50%{
    opacity: 1;
	-webkit-transform: translateX(0);
    transform: translateX(0);
  }
 100% {
 -webkit-transform: translateX(100%);
 transform: translateX(100%);
 } 
}

.catch02{
	position: absolute;
	top: 70%;
	left: 10%;
	font-weight: 600;
	color:#262626;
	font-size: 2.4rem;
	letter-spacing: 0.2em;
	font-family: 'Noto Sans JP', sans-serif;
}

.catch03{
	font-weight: 500;
	color: #4F4C4C;
	font-size: 1.8rem;
	letter-spacing: 0.2em;
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 2.0;
}

.catch04{
	position: absolute;
	top: 168%;
	left: 10%;
	width: 54%;
	color:#0F0F0F;
	font-size: 1.4rem;
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 2.0;
}

/*コンテンツエリアの設定*/

#contents{
	width: 100%;
	margin: 100px auto 300px;
	line-height: 1.8;
	font-size: 1.2rem;	
}

/*Information*/

.information{
	width: 76%;
	margin: 260px auto 180px;	
	height: 300px;
	position: relative;
}

h2.information_title{
	padding-left: 82px;
	display: block;
	font-size: 4.8rem;
	letter-spacing: 0.06em;
	color:#121111;
	font-family: 'Oswald', sans-serif;
	text-align: left;
}
.Text-Span {
  position: relative;
  z-index: 1;
}
.Text-Span:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -18px;
  width: 0%;
  height: 4px;
  background:#61b4c9;
  z-index: -1;
}
.Text-Span.isActive:after {	
  animation-name: i_title-animation;
  animation-timing-function:ease;
  animation-duration: 4s;
  animation-fill-mode: forwards;
  width: 100%;
}

@keyframes i_title-animation {
0% {
 opacity: 0;
 transform: translateX(-50px);
}
  50%{
    opacity: 1;
    transform: translateX(0);
  }
 100% {
 opacity:0;
 transform: translateX(50px);
 } 
}

.list-news{
	position: absolute;
	top: 25%;	
	width: 64%;
  	right: 0;
 	 margin: auto;
	font-family: 'Noto Sans JP', sans-serif;
	padding: 30px 0;
	border-top: 1px solid #A2A2A2;
	border-bottom:  1px solid #A2A2A2;
}

.news_date{
	color: #494747;
	padding-left: 100px;
}

.text_link{
	color: #494747;
	padding-left: 100px;
}

.news_more_all{
	width: 18%;
	position: absolute;
	top: 88%;
	right: 0%;
	background: #0A9F03;
}

p.news_more {
	margin:0 auto;
	padding: 4px;
	text-align:center;	
	font-family: 'Oswald', sans-serif;
	font-size: 1.4rem;		
	color: #FFFFFF;
}

.news_more {
  background: linear-gradient(90deg, rgba(97,180,201,1) 0%, rgba(97,180,201,0.7) 50%, rgba(69,207,35,1) 100%);
  background-size: 200% 100%;
  border: none;
}
.news_more:hover {
  background-position: 100% 0;
}

.information_sp{
	display: none;
}

/*business*/

.business{
	width: 100%;
	margin: 500px auto 20px;
	display: block;
}

.business_sec{	
	width: 70%;
	margin: 0 auto 80px;
	display: flex;
}

.business_sec_sp{
	display: none;
}

.business_title{
	display: block;
	width: 20%;
	font-size: 4.8rem;
	letter-spacing: 0.06em;
	color:#121111;
	font-family: 'Oswald', sans-serif;
	text-align: left;
}

.business_sec_catch{
	width: 80%;
	padding: 20px 0 30px 160px;
}


.business_title01{
	padding-left: 40px;
	margin-bottom: 40px;
	font-size: 2.8rem;
	font-weight: 600;
	display: block;
	width: 100%;
	color:#272727;
	text-align: left;
	font-family: 'Noto Sans JP', sans-serif;
}

.business_title01-2{
	padding-left: 40px;
	font-size: 1.2rem;
	display: block;
	width: 89%;
	color:#272727;
	text-align: left;
	font-family: 'Noto Sans JP', sans-serif;
}

.slidein {
    transform: translateY(50px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.5s, opacity 0.5s, visibility 0.5s;
}
.slidein.js_active {
    transform: translateY(0px);
    opacity: 1;
    visibility: visible;
}

.business_title_wrap{
  display: block;
  width: 100%;
	height: 56.3%;
  background:url("../images/img_main_bk.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-color:rgba(97,180,201,0.5);
  background-blend-mode:lighten;
}

.business_title01_wrap{
	margin: 40px 0 0 0;
	position: relative;
	height: 360px;
}

.business_sec_img01,
.business_sec_img03{
	position: absolute;
	right: 0;
	top: 0;
	width: 50%;
	display: block;
}

.business_sec_img02{
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	display: block;
}

.b_t{
	font-size: 1.0rem;
	color: #FFFFFF;
}

.b_title01,
.b_title02,
.b_title03{
	position: relative;
	font-size: 1.4rem;
	vertical-align: middle;
	padding-right: 20px;
	font-family: 'Oswald', sans-serif;
	color: #FFFFFF;
}

.business_sec_title01,
.business_sec_title02,
.business_sec_title03{
	position: relative;
	padding-left: 10px;
	font-size: 1.8rem;
	font-weight: 600;
	font-family: 'Noto Sans JP', sans-serif;
	color:#292828;
}

.business_sec_title01 ::after,
.business_sec_title02 ::after,
.business_sec_title03 ::after{
    content: '';
    position: absolute;
    top: 93%;
    left: 0%;
    width: 50%;
    height: 2px;
    background:#cccccc;
}

.business_sec_detail01,
.business_sec_detail03{
	position: absolute;
	top: 7%;
	left: 12%;
	width: 50%;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.4rem;
	background-color:rgba(97,180,201,0.5);
	z-index: 4;
	padding: 20px;
}

.business_sec_detail01 p,
.business_sec_detail02 p,
.business_sec_detail03 p{
	color:#ffffff;
	padding-left: 10px;
	font-weight: 600;
}

.business_title02_wrap{
	margin: 40px 0 0 0;	
	position: relative;
	height: 360px;
}

.business_sec_detail02{	
	position: absolute;
	top: 7%;
	right: 12%;
	width: 50%;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.4rem;
	background-color:rgba(54,184,199,0.5);
	z-index: 4;
	padding: 20px;
}

.business_title03_wrap{
	margin: 40px 0 0 0;
	position: relative;
	height: 360px;
}

.business_sec_detail03{
	position: absolute;
	top: 7%;
	left: 12%;
	width: 50%;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.4rem;
	background-color:rgba(97,180,201,0.5);
	z-index: 4;
}

.service_all_list{
	width: 40%;
	margin: 20px 0 0 40px;
	font-size: 1.2rem;
	font-weight: 600;
	font-family: 'Noto Sans JP', sans-serif;
	border-bottom: #61b4c9 solid 2px;
}

.service_all_list a{
  position: relative;
}

.service_all_list  a::after {
    content: '';
    position: absolute;
    top: 113%;
    left: 0%;
    width: 100%;
    height: 2px;
    background:#cccccc;
    transition: all .3s;
    transform: scale(1, 0);
    transform-origin: left;
}

.service_all_list a::after {
    transform: scale(0.2, 1);
}

.service_all_list a:hover::after {
    transform: scale(1, 1);
}

.service_all_list a:link, 
.service_all_list a:visited, 
.service_all_list a:active{
	color:#363434;
	text-decoration: none;
	transition: 0.25s linear;
}

.service_all_list a:hover{
	color:#1FB146;
}

.service_list{
	font-size: 1.0rem;
	padding-left: 20px;
}

.business_title_wrap_sp{
	display: none;
}