@charset "UTF-8";
/*====================
スマホを基本設計にする
 - 〜479px：スマートフォン縦
 - 480px〜599px：スマートフォン横
 - 600px〜959px：タブレット
 - 960px〜1279px：小型PC
 - 1280px〜：大型PC
====================*/

	html {
	  font-size: 100%;
	  scroll-behavior: smooth;
	}

	body {
	  color: #24292e;
	  font-family: "Sawarabi Gothic";
	}

	a {
	  text-decoration: none;
	}

	p {
	  font-size: 1.3rem;
	}

	img {
	  max-width: 100%; /* スマホサイズでも画像が縮小される。 */
	}

	li {
	  list-style: none;
	  font-size: 1rem;
	}

/* wrapperは共通 */
	.wrapper {
	  max-width: 960px;
	  margin: 0 auto 130px auto;
	  font-size: 0.9rem; /* root em 最上位階層のHTML要素であるHTMLの文字サイズを基準とした相対値。HTMLの文字サイズを変更することで全体の文字サイズも変更できる */
	  padding: 0 4%;
	}

	.site-title {
	  line-height: 1px;
	  font-weight: 600;
	  font-size: 2.4rem;
	}

	.site-title a {
	  display: block;
	  color: #fff;
	}

	.sec-title {
		font-size: 1.5rem;
		text-align: center;
		margin-bottom: 65px;
	}

/*----------------------------------------------
ヘッダー
------------------------------------------------*/
	.header{
		display:flex;
		align-items:center;
		position:fixed;
		top:0;
		width:100%;
		z-index:10;
		background-color:white;
	}
	
	.header__logo{
		transition:all .4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
		transition-property:filter,-webkit-clip-path;
		transition-property:filter,clip-path;
		transition-property:filter,clip-path,-webkit-clip-path;
		width:29.4rem;
		max-width:90%;
	}
	
	.header__logo a{
		display:block;
		position:relative;
		background:none
	}
	
	.header__logo a::before{
		transition:opacity .4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;content:"";
		display:block;position:absolute;inset:0;
		background:url(#) no-repeat center center;background-size:contain;
		opacity:0;filter:brightness(0) invert(1)
	}
	
	.header__logo a img{
		transition:opacity .4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s
	}
	
	.header__menu{
		display:none
	}
	
	.header__nav{
		margin-left:auto
	}
	
	.header .h-nav{
		display:flex
	}
	
	.header .h-nav__list{
		display:flex;
		padding:0 2.5rem;
		line-height:1.5;
		font-weight:500
	}
	
	.header .h-nav__list .nav-top{
		display:none
	}
	
	.header .h-nav__list li.active a .c-drawline{
		background-position:left bottom;
		background-size:100% auto
	}
	
	.header .h-nav__list a{
		transition:color .4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
		display:flex;align-items:center;
		height:4.2rem;
		padding:0 1.5rem;
		background:none
	}
	
	.header .h-nav__list .c-arw{
		display:none
	}
	
	.header .h-nav__cv{
		display:flex;
		-moz-column-gap:1.5rem;
		column-gap:1.5rem;
		font-weight:500;
		line-height:1.5;
		margin-right: 1.5rem;
	}
	
	.header .h-nav__cv a{
		transition:all .4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
		transition-property:border-color,background,color;
		box-sizing:border-box;
		display:flex;
		justify-content:center;
		align-items:center;
		width:10rem;
		height:4.2rem;
		padding-bottom:.2rem;
		border:#009b70 solid 1px;
		border-radius:2.1rem;
		background:#009b70;color:#fff
	}
	
	.header .h-nav__cv a .txt dd{
		display:none
	}
	
	.header .h-nav__cv a .c-arw{
		display:none
	}
	
	@media(hover: hover){
		.header .h-nav__cv a:hover{
			background:none;color:#009b70
		}
	}
	
	.header .h-nav__cv a span{
		display:block
	}
	
	.header.scrolled .header__logo{
		-webkit-clip-path:polygon(0% 0%, 5.5rem 0%, 5.5rem 100%, 0% 100%);
		clip-path:polygon(0% 0%, 5.5rem 0%, 5.5rem 100%, 0% 100%)
	}
	
	.header.color-white .header__logo a::before{
		opacity:1
	}
	
	.header.color-white .header__logo a img{
		opacity:0
	}
	
	.header.color-white .h-nav__list a{
		color:#fff
	}
	
	.header.color-white .h-nav__cv a{
		border-color:#fff;
		background:none
	}
	
	@media(hover: hover){
		.header.color-white .h-nav__cv a:hover{
			background:#fff;
			color:#000
		}
	}
	
/*-------------------------------------------
Mainvisual
-------------------------------------------*/
#mainvisual {
  margin-bottom: 80px;
  text-align: center;
}

#mainvisual img {
  width: 100%;
  max-width: 1320px;
  object-fit: cover;
}

/*-------------------------------------------
About
-------------------------------------------*/
#about {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-start;
}

.about-title {
  width: 31%;
  text-align: right;
}

.about-title h2 {
  margin: 0;
  font-size: 4.4rem;
  line-height: 120px;
}

.about-title h3 {
  margin: 0;
  font-size: 1.4rem;
  color: #009b70;
}

#about ul {
  margin-bottom: 30px;
}

#about ul li {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 40px;
}

#about p {
  margin-left: 2rem;
  text-align: justify;
  font-size: 100%;
}

.about-body {
	  width: 62%;
}

.pc { display:inline; }
.sp { display:none; }

/*
loop
----------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.loop_wrap {
  display: flex;
  overflow: hidden;
}

.loop_list {
  display: flex;
  list-style: none;
}

.loop_list-left{
animation :infinity-scroll-left 95s infinite linear 0.5s both;
margin : 0;
padding : 0;
}

.loop_item {
  width: calc(100vw / 6);
}
.loop_item > img{
   width: 100%;
}

/*-------------------------------------------
Value
-------------------------------------------*/
#value {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 2.5rem;
}

.value-title {
  width: 31%;
  text-align: center;
}

.value-title h2 {
  margin: 0;
  font-size: 4.4rem;
  line-height: 120px;
}

.value-title h3 {
  margin: 0;
  font-size: 1.4rem;
  color: #009b70;
}

#value ul {
  margin-bottom: 30px;
}

#value ul li {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 40px;
}

.value-body {
	  width: 62%;
}

.top_message h3 {
  margin: 0;
  font-size: 1.4rem;
  text-align: center;
}

.top_message {
  text-align: justify;
  font-size: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.top_message ul {
	padding: 0;
}

/*-------------------------------------------
News
-------------------------------------------*/
#news dl {
  display: flex;
  flex-wrap: wrap;
  border-top: solid 1px #c8c8c8;
  margin-bottom: 20px;
}

#news dt {
  width: 20%;
  border-bottom: solid 1px #c8c8c8;
  padding: 15px;
}

#news dd {
  width: 80%;
  border-bottom: solid 1px #c8c8c8;
  padding: 15px;
}

  /*footer*/
.footer {
  padding: 2rem;
  font-size: 15px;
  color: #fff;
  background: #000;
  border-top: 1px solid #e5e7eb;
}

.footer a:hover {
  color: #fff;
}

/*-------------------------------------------
contact
-------------------------------------------*/
#contact {
	width: 100%;
	max-width: 1200px;
	height: 400px;
	margin: 0 auto;
	background-color: #57BE85;
	background-image: url("../images/top_contact.png");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.contact_body {
    width: 88%;
    max-width: 1240px;
    margin: auto;
}

.contact_body .title {
    width: 88%;
    max-width: 1240px;
    margin: auto;
	font-size: 1.5rem;
    font-weight: 700;
	padding-top: 120px;
	text-align: center;
    color: #fff;
}

.contact_body ul {
    max-width: 1150px;
    margin: auto;
	display: flex;
    justify-content: center;
    text-align: center;
}

.contact_body ul li {
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.cv_list a{
    padding: 25px 0 25px 0;
    position: relative;
    display: inline-block;
    letter-spacing: 0.05em;
    font-weight: 700;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    color: #fff;
}

.contact_body ul li img {
	margin-left: 30px; /* テキストとの間隔を調整する場合は適宜変更してください */
    max-height: 100%; /* 画像の高さをli要素の高さに合わせるために追加 */
}

/*----------------------------------------------
SP
------------------------------------------------*/
/* pcファースト　大きいサイズから小さいサイズへ */
/* ヘッダー */
	@media only screen and (max-width: 1199px){
		.header .h-nav__list{
			padding:0 .8rem 0 0
		}
		.header .h-nav__list a{
			padding:0 .8rem
		}
		
		.header .h-nav__cv{
			-moz-column-gap:.8rem;column-gap:.8rem
		}
		
		.header .h-nav__cv a{
			width:10rem
		}
	}

	@media only screen and (max-width: 1023px){
		.header{
			position:static
		}
		
		.header__logo{
			margin:0;
			top:1px;
			left:2rem;
			z-index:11;
			width:14.5rem
		}
		
		.header__menu{
			display:block;
			overflow:hidden;
			text-indent:-5260px;
			transition:border-color .4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
			box-sizing:border-box;
			position:fixed;
			right:2rem;
			bottom:2rem;
			z-index:11;
			width:5.5rem;
			height:5.5rem;
			margin:0;
			padding:0;
			border:#009b70 solid 1px;
			border-radius:50%;
			background:#009b70
		}
		
		.header__menu .line{
			display:block;
			position:absolute;
			left:calc(50% - 1.2rem);
			width:2.4rem;
			height:2px;
			margin-top:-1px;
			background:#fff
		}
		
		.header__menu .line:nth-child(1){
			top:calc(50% - .8rem)
		}
		
		.header__menu .line:nth-child(2){
			top:50%
		}
		
		.header__menu .line:nth-child(3){
			top:calc(50% + .8rem)
		}
		
		.header__nav{
			transition:visibility 0s linear .4s,-webkit-clip-path .4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
			transition:visibility 0s linear .4s,clip-path .4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
			transition:visibility 0s linear .4s,clip-path .4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s,-webkit-clip-path .4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
			visibility:hidden;
			overflow:auto;
			position:fixed;
			inset:0;
			z-index:10;
			background:#009b70;
			overscroll-behavior:none;
			-webkit-clip-path:polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
			clip-path:polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
			pointer-events:none
		}
		
		.header .h-nav{
			display:block;
			padding:12rem 3rem
		}
		
		.header .h-nav__list{
			display:block;
			padding:0;
			border-top:rgba(255,255,255,.4) solid 1px;
			font-size:1.9rem
		}
		
		.header .h-nav__list li{
			border-bottom:rgba(255,255,255,.4) solid 1px
		}
		
		.header .h-nav__list .nav-top{
			display:block
		}
		
		.header .h-nav__list a{
			justify-content:space-between;
			height:auto;
			padding:2rem 0;
			color:#fff
		}
		
		.header .h-nav__list .c-drawline{
			background:none
		}
		
		.header .h-nav__list .c-arw{
			display:flex;
			width:2.6rem;
			margin-left:2rem
		}
		
		.header .h-nav__list .c-arw::before{
			border:#fff solid 1px
		}
		
		.header .h-nav__list .c-arw .arw{
			width:1.1rem;
			fill:#fff
		}
		
		.header .h-nav__cv{
			display:flex;
			flex-direction:column;
			row-gap:2rem;
			margin-top:4rem;
			font-size:1rem;
			font-weight:400
		}
		
		.header .h-nav__cv a{
			justify-content:space-between;
			width:auto;
			height:10rem;
			padding:0 2rem 0 2.5rem;
			border:none;
			border-radius:1rem;
			background:#fff;
			color:#000
		}
		
		.header .h-nav__cv a .txt dt{
			margin-bottom:.5rem;
			color:#009b70;
			font-size:1.2rem;
			font-weight:500
		}
		
		.header .h-nav__cv a .txt dd{
			display:block
		}
		
		.header .h-nav__cv a .c-arw{
			display:flex;
			width:2.6rem;
			margin-left:2rem
		}
		
		.header .h-nav__cv a .c-arw::before{
			border:#009b70 solid 1px
		}
		
		.header .h-nav__cv a .c-arw .arw{
			width:1.1rem;
			fill:#009b70
		}
	}
	
	@media only screen and (max-width: 1023px)and (hover: hover){
		.header .h-nav__cv a:hover{
			background:#fff;
			color:#000
		}
	}
	
	@media only screen and (max-width: 1023px){
		.header.scrolled .header__logo{
			-webkit-clip-path:polygon(0% 0%, 4.5rem 0%, 4.5rem 100%, 0% 100%);
			clip-path:polygon(0% 0%, 4.5rem 0%, 4.5rem 100%, 0% 100%)
		}
		
		.header.color-white .h-nav__list a{
			color:#fff
		}
		
		.header.color-white .h-nav__cv a{
			background:#fff
		}
		
		.header.nav-open .header__logo{
			-webkit-clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
			clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)
		}
		
		.header.nav-open .header__logo a::before{
			opacity:1
		}
		
		.header.nav-open .header__logo a img{
			opacity:0
		}
		
		.header.nav-open .header__menu{
			border-color:#fff
		}
		
		.header.nav-open .header__menu .line:nth-child(1){
			transform:rotate(45deg);
			top:50%
		}
		
		.header.nav-open .header__menu .line:nth-child(2){
			opacity:0
		}
		
		.header.nav-open .header__menu .line:nth-child(3){
			transform:rotate(-45deg);
			top:50%
		}
		
		.header.nav-open .header__nav{
			transition:visibility 0s linear 0s,-webkit-clip-path .4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
			transition:visibility 0s linear 0s,clip-path .4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
			transition:visibility 0s linear 0s,clip-path .4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s,-webkit-clip-path .4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
			visibility:visible;-webkit-clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
			clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
			pointer-events:auto
		}
	}


/* 900pxより小さいときのcss適用 */
@media screen and (max-width: 900px) {
  .wrapper {
    margin-bottom: 70px;
  }

  .site-title {
    margin-top: 20px;
  }

  .sec-title {
    margin-bottom: 40px;
  }

 /* about */
#about {
  display: block;
}

.about-title {
  width: 100%;
  text-align: center;
}

.about-body {
	  width: 80%;
}

  .pc { display:none; }
  .sp { display:inline; }

.loop_item {
  width: calc(250vw / 6);
}
 /* value */

#value {
  display: block;
}

.value-title {
  width: 100%;
  text-align: center;
}

.value-body {
	  width: 80%;
}

  /* news */
  #news dl {
    flex-direction: column;
  }

  #news dt {
    width: 100%;
    border-bottom: none;
    padding-bottom: 0;
  }

  #news dd {
    width: 100%;
    padding-top: 0;
  }

  /* process */
.process {
display: none;
}	

  /* contact */
.contact_body .title {
	padding-top: 80px;
}  
  
 .contact_body ul {
 display: block;
 }
}