:root {
	--color-resoil: #4aa85a;
	--color-resoil2: #b0c979;
}

/* # =================================================================
   #order
   # ================================================================= */
@media screen and (max-width:768px){
	.order1{order:1;}
	.order2{order:2;}
	.order3{order:3;}
	.order4{order:4;}
	.order5{order:5;}
	.order6{order:6;}
	.order7{order:7;}
	.order8{order:8;}
	.order9{order:9;}
	.order10{order:10;}
}

/* # =================================================================
   # gsap
   # ================================================================= */
.trigger-area-resoil-fv{opacity: 0;}

/* # =================================================================
   # fv
   # ================================================================= */
#resoil-fv {
  background: url("../img/hero_bg.webp");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:right top;
  color: var(--color-bk);
  padding: 180px 0 150px 0;
  text-align: left;
}

#resoil-fv .hero-h1 {
  font-size: 35px;
  font-weight:700;
  margin-bottom: 20px;
}

#resoil-fv .hero-logo{
	margin-bottom: 30px;
}

#resoil-fv .hero-logo img{
	width:70%;
	max-width:650px;
}

#resoil-fv p{
  font-size: 18px;
 font-weight:700; 
margin-bottom: 30px;
}

#resoil-fv .btn {
  display: inline-block;
  padding: 0.8em 2em;
  border-radius: 50px;
   font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

#resoil-fv .btn--primary {
  background: var(--color-resoil);
  color: #fff;
}

#resoil-fv .btn:hover {
  opacity: 0.85;
}


@media screen and (max-width:768px){
	#resoil-fv {
	background: url("../img/hero_bg_sp.webp");
	background-size:contain;
	background-repeat:no-repeat;
	background-position:right top;
	padding: 450px 0 100px 0;
	text-align: center;
	}
	#resoil-fv .hero-logo img{width:100%;}	
	#resoil-fv .hero-h1 {font-size: 30px;}
}

@media screen and (max-width:599px){
#resoil-fv {
	background: url("../img/hero_bg_sp.webp");
	background-size:contain;
	background-repeat:no-repeat;
	background-position:right top;
	padding: 250px 0 100px 0;
	text-align: center;
	}
}

/* # =================================================================
   # 共通title
   # ================================================================= */

.resoil-subcopy-big{
	font-size:30px;
	line-height:150%;
	font-weight:600;
	text-align:left;
	letter-spacing: 0.05em;
	color:var(--color-resoil);
}



.resoil-big-title{
	font-size:30px;
	line-height:1.2em;
	font-weight:600;
	letter-spacing: 0.05em;
	color:var(--color-white);
	text-align:center;
	background-color:var(--color-resoil);
	padding:1.5em;
	margin-bottom:50px;
	border-radius:1em 0 1em 0;
}



.resoil-sub-big-title{
	font-size:30px;
	line-height:150%;
	font-weight:700;
	text-align:center;
	letter-spacing: 0.05em;
	color:var(--color-yellow);
}

.resoil-sub-big-title span{
	display:block;
	font-size:20px;
	color:var(--color-white);
}

.resoil-copy{
	font-size:25px;
	line-height:1.5em;
	font-weight:700;
	color:var(--color-resoil);
}

.title-line{
	font-size:20px;
	line-height:1.2em;
	font-weight:600;
	text-align:left;
	letter-spacing: 0.05em;
	display: flex;
    align-items: center;
	color:var(--color-resoil);
	text-align:center;
}

.title-line1:before,
.title-line1:after {
    content: "";
    height: 2px;
    flex-grow: 1;
    background-color: var(--color-resoil);
}


.title-line:before {
    margin-right: 1rem;
}

.title-line:after {
    margin-left: 1rem;
}

.resoil-txt-sub{
	font-size:14px;
	line-height:1.5em;
	font-weight:400;
}

.resoil-txt-box{
	font-size:20px;
	line-height:2em;
	font-weight:700;
	text-align:left;
	letter-spacing: 0.05em;
}

.resoil-txt-box span{background:linear-gradient(transparent 60%, #ff6 60%);}

@media screen and (max-width:599px){
	.resoil-subcopy-big{font-size:25px;}
	.resoil-big-title {font-size:25px;padding:1em;margin-bottom:30px;}
}

/* # =================================================================
   # resoil1
   # ================================================================= */
#resoil1 .flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	row-gap:30px;
}
#resoil1 .flex-box{
	width:48%;
}

#resoil1 .zu-img img{width:100%;max-width:350px;}

@media screen and (max-width:768px){
	#resoil1 .flex-box{width:100%;}
	#resoil1 .zu-img img{width:100%;max-width:300px;}
}

/* # =================================================================
   # profile
   # ================================================================= */

#resoil2{ background: var(--color-gray6);}

#resoil2 .flex-profile{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	row-gap:1.5em;
}

#resoil2 .flex-profile-img{
	width:250px;
}

#resoil2 .flex-profile-txt{
	flex:1;
}

#resoil2 .profile-img{text-align:center;}
#resoil2 .profile-img img{width:100px;}

#resoil2 .profile-name1{
	font-size:12px;
	padding-top:10px;
}

#resoil2 .profile-name2{
	font-size:22px;
	font-weight:700;
	padding-top:10px;
}
#resoil2 .profile-name2 span{
	display:block;
	font-size:12px;
	font-weight:400;
	padding-top:10px;
}

#resoil2 .profile-title{
	font-size:16px;
	font-weight:700;
	color:var(--color-resoil);
	text-align:left;
}
   
#resoil2 .profile-ul{
	list-style: none;
}

#resoil2 .profile-ul li{
	text-align:left;
	font-weight:400;
	padding:10px 0;
	border-top:solid 1px var(--color-gray4);
}

#resoil2 .profile-ul li:first-child{
	border: none;
}

#resoil2 .profile-ul-dot{
	list-style-type:square;
	list-style-position: inside;
}

#resoil2 .profile-ul-dot li{
	text-align:left;
	font-weight:400;
	padding:10px 0;
	border-top:solid 1px var(--color-gray4);
}

#resoil2 .profile-ul-dot li:first-child{
	border: none;
}

#resoil2 .profile-ul-dot li p{
	padding-left:1.5em;
	text-indent:-1.5em;
}


#resoil2 .profile-content1{
	display:block;
	line-height:180%;
	text-align:left;
	margin-left:110px;
}

#resoil2 .profile-name{float:left;}


@media screen and (max-width:768px){
	#resoil2 .flex-profile-img{width:100%;}
	#resoil2 .flex-profile-txt{width:100%;}
}

@media screen and (max-width:599px){
	#resoil2 .profile-content1{margin-left:90px;}
}


/* # =================================================================
   # resoil3
   # ================================================================= */

#resoil3 .flex{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	row-gap:1em;
}
#resoil3 .flex-box-fuki{
	position: relative;
	width:32%;
	background-color:var(--color-resoil2);
	padding:20px;
	color:var(--color-white);
	font-size:16px;
	line-height:1.5em;
	font-weight:700;
	border-radius:.5em;
	display: flex;
	justify-content: center;
	text-align: left; 
}

#resoil3 .flex-box-fuki:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid var(--color-resoil2);
}

#resoil3 .flex-box-fuki p {
  margin: 0;
  padding: 0;
}

#resoil3 .flex-box-fuki:last-child::before {
  content: none;
}

@media screen and (max-width:768px){
	#resoil3 .flex-box-fuki {
	width:100%;
	margin-bottom: 10px;
	}
	
	#resoil3 .flex-box-fuki:before {
	top: 100%;
	left: 50%;
	margin-top: 0;
	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid var(--color-resoil2); /* 下矢印 → 上を塗る */
	}
	
	/* 最後は矢印消す */
	#resoil3 .flex-box-fuki:last-child:before {
	content: none;
	}
}


/* # =================================================================
   # resoil4
   # ================================================================= */
   
#resoil4 .flex{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	row-gap:2em;
}

#resoil4 .flex-item-img{width:30%;overflow:hidden;}
#resoil4 .flex-item-txt{width:65%;}

#resoil4 .flex-item-img img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}

#resoil4 .dashi-box{
	background-color:var(--color-resoil);
	padding:1.5em;
	border-radius:1em;
	margin-top:20px;
	font-size:16px;
	font-weight:700;
	line-height:1.8em;
	color:var(--color-white);
	text-align:left;
}

#resoil4 .dashi-box span{
	color:var(--color-yellow);
}

@media screen and (max-width:768px){
#resoil4 .flex-item-img{width:1000%;}
#resoil4 .flex-item-txt{width:100%;}
#resoil4 .flex-item-img img{height:300px;}
}

/* # =================================================================
   # resoil5
   # ================================================================= */

#resoil5 .zu-img img{width:100%;max-width:1100px;}


/* # =================================================================
   # resoil6
   # ================================================================= */

#resoil6 .flex{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	row-gap:2em;
}

#resoil6 .flex-item-img{width:30%;overflow:hidden;}
#resoil6 .flex-item-txt{width:65%;}

#resoil6 .flex-item-img img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}


@media screen and (max-width:768px){
#resoil6 .flex-item-img{width:1000%;}
#resoil6 .flex-item-txt{width:100%;}
#resoil6 .flex-item-img img{height:300px;}
}

/* # =================================================================
   # resoil7
   # ================================================================= */

#resoil7 .flex{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	row-gap:2em;
}

#resoil7 .flex::after{
	content:"";
	display: block;
	width:31%;
}

#resoil7 .flex-item{
	width:31%;
	background-color:#eaf3e8;
	padding:1.5em;
	border-radius:1em;
}

#resoil7 .zu-img img{width:150px;}

#resoil7 .flex-item-title{
	font-size:20px;
	font-weight:700;
	color:var(--color-white);
	background-color:var(--color-resoil);
	text-align:center;
	padding:5px 0;
	margin:15px 0;
}

#resoil7 .flex-item-txt{
	font-size:16px;
	font-weight:700;
	line-height:1.5em;
	text-align:left;
}

#resoil7 ul{list-style-type: disc;padding-left:1em;}


@media screen and (max-width:768px){
#resoil7 .flex{row-gap:1em;}
	#resoil7 .flex-item{width:48%;padding:1em;}
	#resoil7 .flex::after{
		content:"";
		display: block;
		width:48%;
	}
	#resoil7 .flex-item-txt{font-size:14px;}
}


/* # =================================================================
   # resoil8
   # ================================================================= */
   
#resoil8 .flex{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	row-gap:2em;
}

#resoil8 .flex-item-img{width:30%;overflow:hidden;}
#resoil8 .flex-item-txt{width:65%;}

#resoil8 .flex-item-img img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}

#resoil8 .dashi-box{
	width:48%;
	background-color:var(--color-resoil);
	padding:1em;
	border-radius:1em;
	margin-top:20px;
	font-size:16px;
	font-weight:700;
	line-height:1.8em;
	color:var(--color-white);
	text-align:center;
	margin:15px 0;
}


@media screen and (max-width:768px){
	#resoil8 .flex-item-img{width:1000%;}
	#resoil8 .flex-item-txt{width:100%;}
	#resoil8 .flex-item-img img{height:300px;}
}


/* # =================================================================
   # resoil9
   # ================================================================= */
   
#resoil9 .flex{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	row-gap:2em;
}

#resoil9 .flex-item-img{width:30%;overflow:hidden;}
#resoil9 .flex-item-txt{width:65%;}

#resoil9 .flex-item-img img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}


@media screen and (max-width:768px){
	#resoil9 .flex-item-img{width:1000%;}
	#resoil9 .flex-item-txt{width:100%;}
	#resoil9 .flex-item-img img{height:300px;}
}

/* # =================================================================
   # resoil10
   # ================================================================= */

#resoil10 .flex{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	row-gap:2em;
}

#resoil10 .flex::after{
	content:"";
	display: block;
	width:31%;
}

#resoil10 .flex-item{
	width:31%;
	background-color:#fffcd1;
	border:solid 2px var(--color-resoil);
	padding:1.5em;
	border-radius:1em;
}

#resoil10 .flex-item-title{
	font-size:20px;
	font-weight:700;
	color:var(--color-white);
	background-color:var(--color-resoil);
	text-align:center;
	padding:5px 0;
	margin-bottom:15px;
}

#resoil10 .flex-item-txt{
	font-size:16px;
	font-weight:700;
	line-height:1.5em;
	text-align:left;
}

#resoil10 ul{list-style-type: disc;padding-left:1em;}


@media screen and (max-width:768px){
#resoil10 .flex{row-gap:1em;}
	#resoil10 .flex-item{width:48%;padding:1em;}
	#resoil10 .flex::after{
		content:"";
		display: block;
		width:48%;
	}
	#resoil10 .flex-item-title{font-size:16px;}
	#resoil10 .flex-item-txt{font-size:14px;}
}

/* # =================================================================
   # resoil11
   # ================================================================= */

#resoil11 .zu-img img{width:100%;}

/* ===== table ===== */
#resoil11 .tbl-box {
	border-collapse: collapse;
	width: 100%;
	margin-bottom:10px;
	font-size:16px;
	line-height:1.8em;
}
#resoil11 .tbl-box th,
#resoil11 .tbl-box td {
	padding: 15px;
	vertical-align:middle;
	border:solid 1px var(--color-gray4);
}
#resoil11 .tbl-box th {
	width: 30%;
	background:var(--color-resoil);
	color:var(--color-white);
	text-align: center;
}

#resoil11 .tbl-box td {
	background:var(--color-white);
	text-align: left;
}

#resoil11 .tbl-box ul{list-style-type: disc;padding-left:1em;}

@media screen and (max-width:599px){
	#resoil11 .tbl-box td {
		display: block;
	}
	#resoil11 .tbl-box th {
		display: block;
		border-top: none;
		border-bottom: none;
		width: 100%;
	}
}

/* # =================================================================
   # resoil last
   # ================================================================= */
#resoil-last{
	background: url("../img/last_bg.webp");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
}

#resoil-last .zu-img img{width:100%;}

#resoil-last .box-txt{
	font-size:18px;
	line-height:220%;
	font-weight:600;
	text-align:center;
	letter-spacing: 0.05em;
}

@media screen and (max-width:768px){
	#resoil-last .box-txt{
		font-size:16px;
		text-align:left;
	}
}

/* # =================================================================
   # flow
   # ================================================================= */

#flow .flow-box{
	background-color:#f1f7f0;
	padding:1em;
	border-radius:1em;
	border-bottom:solid 4px  var(--color-resoil);
	border-right:solid 4px  var(--color-resoil);
}

#flow .flex{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items:center;
	column-gap:20px;
	row-gap:15px;
}

#flow .flex-item-no{
	font-size:30px;
	font-weight:600;
	line-height:1;
	color: var(--color-resoil);
	text-align:center;
	width:150px;
}
#flow .flex-item-no span{font-size:16px;}
#flow .flex-item-txt{flex:1;}

#flow .box-txt{
	font-size:16px;
	font-weight:700;
	line-height:1.5em;
	text-align:left;
}

#flow .arrow-img{text-align:center;margin:10px 0;}
#flow .arrow-img img{width:60px;}

@media screen and (max-width:768px){
#flow .flex-item-no{width:100%;text-align:center;}
#flow .flex-item-img{width:100%;}
#flow .flex-item-img img{width:100%;}
#flow .flex-item-txt{width:100%;}
#flow .arrow-img img{width:70px;}
}