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

BG

------------------------------------*/
.bg__tree_r {
	width: clamp(200px, 20vw, 315px);
  height: clamp(103px, 20vw, 320px);
  position: relative;
  top: clamp(50px, 20vw, 300px);
  left: 400px;
}
.bg__tree_r-larg {
  width: clamp(200px, 20vw, 315px);
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 1;
}
.bg__tree_r-01 {
  width: clamp(40px, 20vw, 64px);
  position: absolute;
  top: 15px;
  left: 70px;
  z-index: 2;
  animation: sway01 6s ease-in-out infinite;
  transform-origin: bottom center;
}
.bg__tree_r-02 {
 width: clamp(30px, 20vw, 41px);
  position: absolute;
  top: 48px;
  left: 30px;
  z-index: 2;
  animation: sway02 4s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes sway01 {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(3deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes sway02 {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
  80% {
    transform: rotate(-4deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/*------------------------------------
左の木
---------------------------------------*/
.bg__tree_l {
  width: 315px;
  height: 380px;
  position: relative;
  top: 100px;
  left: -60px;
	z-index: 0;
}
.bg__tree_l-larg {
  width: 315px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 0;
}
.bg__tree_l-01 {
  width: 64px;
  position: absolute;
  top: 15px;
  left: 180px;
  z-index: 1;
  animation: sway03 6s ease-in-out infinite;
  transform-origin: bottom center;
}
.bg__tree_l-02 {
  width: 41px;
  position: absolute;
  top: 28px;
  left: 145px;
  z-index: 2;
  animation: sway04 4s ease-in-out infinite;
  transform-origin: bottom center;
}
.bg__tree_l-03 {
  width: 41px;
  position: absolute;
  top: 288px;
  left: 145px;
  z-index: 1;
}
.bg__tree_l-04 {
  width: 41px;
  position: absolute;
    top: 303px;
    left: 115px;
  z-index: 1;
}
@keyframes sway03 {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(3deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}
@keyframes sway04 {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(-2deg); }
  50% { transform: rotate(1deg); }
  80% { transform: rotate(-4deg); }
  100% { transform: rotate(0deg); }
}

#eco {
  position: relative;
  overflow: visible;
}
.bg_eco_tree-r {
  position: absolute;
  top: 50px;
  left: auto; /* left を解除 */
  right: -90px; /* 親の右端から-30px */
  z-index: 0;
}
.bg_eco_tree-l {
  position: absolute;
  top: 300px;
  left: -50px; /* 親の右端から-30px */
  z-index: 0;
}
@media (max-width: 768px) {
	.bg_eco_tree-r,
.bg_eco_tree-l {
 
	}}


#exp {
  position: relative;
  overflow: visible;
}
.bg_exp_tree-r {
  position: absolute;
  top: 200px;
  left: auto; /* left を解除 */
  right: -90px; /* 親の右端から-30px */
  z-index: 0;
}
.bg_exp_tree-l {
  position: absolute;
  top: 30px;
  left: -50px; /* 親の右端から-30px */
  z-index: 0;
}
@media (max-width: 768px) {
	.bg_exp_tree-r,
.bg_exp_tree-l {
  display: none;
	}}

#qualitycheck {
  position: relative;
  overflow: visible;
}
.bg_qualitycheck_tree-r {
  position: absolute;
  top: 30px;
  left: auto; /* left を解除 */
  right: -90px; /* 親の右端から-30px */
  z-index: 0;
}
.bg_qualitycheck_tree-l {
  position: absolute;
  top: 150px;
  left: -50px; /* 親の右端から-30px */
  z-index: 0;
}
@media (max-width: 768px) {
	.bg_qualitycheck_tree-r,
.bg_qualitycheck_tree-l {
  display: none;
	}}

#communicate {
  position: relative;
  overflow: visible;
}
.bg_communicate_tree-r {
  position: absolute;
  top: 160px;
  left: auto; /* left を解除 */
  right: -90px; /* 親の右端から-30px */
  z-index: 0;
}
.bg_communicate_tree-l {
  position: absolute;
  top: 20px;
  left: -50px; /* 親の右端から-30px */
  z-index: 0;
}
@media (max-width: 768px) {
	.bg_communicate_tree-r,
.bg_communicate_tree-l {
  display: none;
	}}