@charset "utf-8";
main {
  overflow-x: clip !important;
}
/* ===============================
	para
 =============================== */
 .box {
  position: relative;
  height: 2000px;
  width: 100%;
  overflow: hidden;
}
.para {
  opacity: 0;
  transition: 1s;
  text-align: center;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.para img {
  width: 100%;
  height: auto;
}
.para.on {
  position: fixed;
  opacity: 1;
  z-index: +1;
}
.para.off {
  opacity: 0;
  z-index: -1;
}
.end_box {
  height: 400px;
  width: 100%;
  display: block;
  position: absolute;
  bottom: 0;
  z-index: -2;
}
.con_back {
  height: 1000px;
}
#para_area_1 {
  background: #268017;
}
#para_area_1 .box {
  height: 1200px;
}
#para_area_1 .box:nth-of-type(3) {
  height: 1600px;
}
#para_area_2 {
  background: #fff;
}
#para_area_2 .box,
#para_area_3 .box,
#para_area_4 .box {
  z-index: 2;
}
#para_area_2 .box {
  height: 2000px;
}
#para_area_2 .para,
#para_area_3 .para,
#para_area_4 .para {
  height: 2000px;
  animation: reveal-image_2 linear both;
  animation-timeline: view();
  animation-range: contain 0% contain 100%;
}
#para_area_2 .para {
  height: 2000px;
}

#para_area_2 img,
#para_area_3 img,
#para_area_4 img {
  width: fit-content;
  height: 100vh;
  max-width: fit-content;
  position: fixed;
}
#para_area_2 .para_8.off,
#para_area_3 .para_9.off {
  animation: none;
}
#para_area_4 {
   background-image: url(../img/aboutus/circle_bg.webp);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  height: 3000px;
}
@media screen and (max-width: 767px) {
  #para_area_4 {
    background-image: url(../img/aboutus/circle_bg_sp.webp);
    background-position: bottom center;
    background-size:contain;
 }
}
#para_area_4 .box,
#para_area_4 .para_7 {
  height: 2000px;
}
#para_area_4 .para_7,
#para_area_4 .para_7 img {
  /* position: sticky; */
}
@media screen and (max-width: 767px) {
  #para_area_2 img,
  #para_area_3 img,
  #para_area_4 img {
    width: 100%;
    height: auto;
  }
}

/* ===============================
	circle_area
 =============================== */
.circle_area .box {
  overflow: visible;
}
.circle {
  display: flex;
  justify-content: center;
}
.circle img {
  width: 100%;
  height: auto;
}
@keyframes reveal-image {
  from {
    clip-path: circle(0);
  }
  to {
    clip-path: circle(100%);
  }
}
.animationElement {
  animation: reveal-image linear both;
  animation-timeline: view();
  animation-range: contain 0% contain 100%;
}
.circle_area .para {
  opacity: 1 !important;
  z-index: 0 !important;
}
.circle_area .para.on {
  position: sticky;
}
.circle_area .para.on img {
  position: sticky;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
#circle_area_1 {
  background: #268017;
}
#circle_area_1,
#circle_area_2 {
  z-index: 1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
#circle_area_1 .para,
#circle_area_2 .para {
  /* height: 2000px; */
  height: 100vh;
  animation: reveal-image_2 linear both;
  animation-timeline: view();
  animation-range: contain 0% contain 100%;
}
#circle_area_1 .para {
  background: #fff;
}
#circle_area_1 img,
#circle_area_2 img {
  width: fit-content;
  height: 100vh;
  max-width: fit-content;
  position: fixed;
}
#circle_area_1 .para_9.off,
#circle_area_2 .para_8.off {
  animation: none;
}
#circle_area_2 .box {
  height: 2600px;
}
@media screen and (min-width: 768px) {
  #circle_area_2 .para_8 {
     background-image: url(../img/aboutus/circle_bg.webp);
    background-attachment: fixed;
    background-position: center;
    background-repeat:no-repeat;
    background-size: cover;
    height: 100vh;
    background-attachment: fixed;
  }
}
@keyframes reveal-image_2 {
  from {
    clip-path: circle(0);
  }
  to {
    clip-path: circle(100%);
  }
}
@media screen and (max-width: 767px) {
  #circle_area_2 .para_8::after {
    content:"";
    display:block;
    position: sticky;
    top:0;
    bottom: 0;
    left:0;
    right: 0;
    z-index:-1;
    width:100%;
    height: 100vh;
    background-image: url(../img/aboutus/circle_bg_sp.webp);
    background-position: bottom center;
    background-size:contain;
    background-attachment: fixed;
    /* background-position: center; */
    /* background-repeat:no-repeat; */
    /* background-size: cover; */
  }
}
.para_posiR {
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  #circle_area_2 img {
    width: auto;
    max-width: inherit;
    height: 100dvh;
  }
}

.para_posiR {
  margin-bottom: 34dvh;
}

/* ===============================
	パパラックス導入に伴う調整
 =============================== */
 footer,
 .linksBlock {
  position: relative;
  z-index: 2;
 }