/* FVアニメーション */
.fvAniContainer {
  width: 100%;
  height: 100vh;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fvAni2 1s 3s both;
  /* position: relative; */
}

.hidden {
  visibility: hidden;
}

.fvAniContainer .fvAniLogo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

@keyframes fvAni2 {
  0%{opacity: 1; filter: blur(0); display: block;}
  99%{opacity: 0; filter: blur(100px); display: block;}
  100%{opacity: 0; filter: blur(100px); display: none;}
}

.fvAniContainer .fvAniLogo > svg {
  width: 274px;
  font-family: "ab-yurumin", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.fvAniContainer .fvAniLogo > svg path {
  fill: #3E3A39; /*塗り*/
  stroke: #3E3A39; /*線*/
  stroke-width: 1; /*stroke不要は 0*/
  stroke-linecap: round; /*round角丸、square直角*/
  animation: svg1 3s 1s ease-in both; /*5sはアニメーション時間5秒*//*infiniteはリピート、 1回のみはforwards*/
}

@keyframes svg1 {
  0% {
          fill: transparent;
          stroke-dasharray: 100; /*細かさ：試しにいろんな数字に置き換えてみてください*/
          stroke-dashoffset: 100;
   }
   30%{
         fill: transparent;
         stroke-dashoffset: 0; /*アニメーション開始〜1.5秒でstroke書き終える*/
   }
   50%{
        fill: #3E3A39; /*アニメーション開始2.5秒〜5秒の間で白色に塗りつぶす*/
   }
}

.fvAniContainer .title {
  width: 100%;
  margin-top: 13px;
}

.fvAniContainer .title p {
  font-size: 70px;
  letter-spacing: -1px;
  line-height: 1;
}

.fvAniContainer .title p span {
  display: inline-block;
}
.fvAniContainer .title p span:first-of-type {
  animation: fvAni 0.7s both;
}
.fvAniContainer .title p span:nth-of-type(2) {
  animation: fvAni 0.7s 0.1s both;
}
.fvAniContainer .title p span:nth-of-type(3) {
  animation: fvAni 0.7s 0.2s both;
}
.fvAniContainer .title p span:nth-of-type(4) {
  animation: fvAni 0.7s 0.3s both;
}
.fvAniContainer .title p span:nth-of-type(5) {
  animation: fvAni 0.7s 0.4s both;
}
.fvAniContainer .title p span:nth-of-type(6) {
  animation: fvAni 0.7s 0.5s both;
}
.fvAniContainer .title p span:nth-of-type(7) {
  animation: fvAni 0.7s 0.6s both;
}
.fvAniContainer .title p span:nth-of-type(8) {
  animation: fvAni 0.7s 0.7s both;
}

@keyframes fvAni {
  0%{transform: translateY(70px) rotate3d(0, 1, 0, 0deg) scale(1, 1);}
  50%{transform: translateY(-10px) rotate3d(0, 1, 0, 540deg) scale(1, 1);}
  70%{transform: translateY(5px) rotate3d(0, 1, 0, 756deg) scale(1.1, 0.9);}
  80%{transform: translateY(-5px) rotate3d(0, 1, 0, 864deg) scale(1, 1);}
  90%{transform: translateY(2px) rotate3d(0, 1, 0, 972deg) scale(1.05, 0.95);}
  100%{transform: translateY(0px) rotate3d(0, 1, 0, 1080deg) scale(1, 1);}
}

.fvAniContainer .title p span:nth-last-of-type(3n + 1) {
  color: var(--thirdColor);
}
.fvAniContainer .title p span:nth-last-of-type(3n + 2) {
  color: var(--primaryColor);
}
.fvAniContainer .title p span:nth-last-of-type(3n) {
  color: var(--secondaryColor);
}
















#fvContainer {
  width: 100%;
  position: relative;
}

.mainTopContainer {
  width: 100%;
  position: relative;
}

#particles-js {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

#particles-js2 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.mainLogo {
  width: 374px;
  margin: 0 auto;
  padding-top: 80px;
}

.mainLogo img {
  width: 100%;
  vertical-align: bottom;
}

.videoContainer {
  width: 1111px;
  margin: 30px auto 0;
  position: relative;
  transform-origin: left top;
  z-index: 1;
}

.videoContainer > img {
  position: absolute;
  z-index: 1;
}

video {
  width: 1000px;
  margin-left: 55.5px;
  clip-path: path("m383.28,48.3c-24.77-2.49-49.46-5.83-74.05-10.2-53.65-9.55-111.72-16.59-164.23,3.61-49.47,19.03-92.04,53.41-118.88,99.42C-25.51,229.61-2.07,352.43,60.43,430.16c70.06,87.13,184.59,121.8,291.6,94.51,38.46-9.81,75.77-23.92,114.47-32.75,72.01-16.44,145.28-13.01,218.2-5.93,64.99,6.32,138.96,26.63,201.68-.27,66.24-28.41,98.79-103.26,108.33-170.62,8.92-62.94-.77-133.79-36.84-187.29-46.37-68.78-133.76-84.39-211.21-80.16-120.1,6.56-243.55,12.82-363.38.65Z");
}

.videoContainer > img:first-of-type {
  width: 21.1%;
  position: absolute;
  top: -50px;
  left: 35px;
}

.videoContainer > img:nth-of-type(2) {
  width: 27.6%;
  position: absolute;
  bottom: -50px;
  right: 20px;
}

.videoContainer > img:nth-of-type(3) {
  width: 29.3%;
  position: absolute;
  top: -30px;
  right: 5px;
}

.videoContainer > img:nth-of-type(4) {
  width: 41.6%;
  position: absolute;
  bottom: -80px;
  left: -30px;
}

.mainText {
  width: 100%;
  padding-top: 1200px;
  padding-bottom: 150px;
  margin-top: -1150px;
  position: relative;
  /* position: absolute;
  top: 400px;
  left: 0%; */
  overflow: hidden;
}

.mainText p {
  width: 90%;
  margin: 0 auto;
  font-size: 20px;
  line-height: 2.3;
  text-align: center;
  /* background: #E1F8F6; */
}

.mainText img {
  width: 100%;
  min-width: 1920px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.mainWaveContainer {
  width: 100%;
  height: 100%;
  /* background: #E1F8F6; */
  position: absolute;
  top: 0;
  left: 0;
  /* transform: translateY(-50%); */
  z-index: -1;
  display: flex;

}

.mainWave1 {
  width: 100%;
  height: 600px;
  /* background: #E1F8F6; */
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.mainWave1::before {
  content: "";
  width: 300%;
  height: 300vw;
  background: #E1F8F6;
  border-radius: 70% 50% / 50% 50%;
  animation: wave 36s linear infinite;
  position: absolute;
  top: 300px;
  left: -100%;
}
/* .mainWave1::after {
  content: "";
  width: 200%;
  height: 200vw;
  background: #E1F8F6;
  border-radius: 50% 50% / 50% 70%;
  animation: wave 24s linear infinite;
  position: absolute;
  top: 300px;
  left: -50%%;
} */

.mainWave2 {
  width: 100%;
  height: 600px;
  /* background: #E1F8F6; */
  /* border-radius: 50% 50% / 50% 70%; */
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: hidden;
  /* animation: wave 9s linear infinite; */
}
.mainWave2::before {
  content: "";
  width: 300%;
  height: 300vw;
  background: #E1F8F6;
  border-radius: 50% 60% / 50% 70%;
  animation: wave 30s linear infinite;
  position: absolute;
  bottom: 400px;
  left: -100%;
}

@keyframes wave {
  0%{transform: rotate(0deg);}
  100%{transform: rotate(360deg);}
}

#particles-js3 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

#particles-js4 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}





.waveContainer2 {
  transform: rotate(180deg);
}

.waves {
  vertical-align: bottom;
}

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 17s;
}

.waveContainer2 .parallax > use:nth-child(1) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}







/* 企業紹介 */
#companyContainer {
  width: 100%;
  margin-top: -80px;
  padding-top: 80px;
  padding-bottom: 100px;
  position: relative;
  overflow: hidden;
}

#companyContainer > img:first-of-type {
  width: 178px;
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-450px);
}

#companyContainer > img:nth-of-type(2) {
  width: 178px;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(280px) rotate3d(0, 1, 0, 180deg);
}

.title {
  width: 90%;
  margin: 0 auto;
  text-align: center;
}

.title p {
  font-size: 20px;
}

.title p span:nth-last-of-type(3n + 1) {
  color: var(--secondaryColor);
}
.title p span:nth-last-of-type(3n + 2) {
  color: var(--thirdColor);
}
.title p span:nth-last-of-type(3n) {
  color: var(--primaryColor);
}

.title h2 {
  font-size: 37px;
  line-height: 1.6;
}



.companyListContainer {
  width: 100%;
  margin-top: 50px;
}

.companyListContainer li {
  width: 300px;
  margin: 0 30px;
}

.slick-arrow {
  width: 55px;
  height: 55px;
  padding: 0;
  border: none;
  background: none;
  z-index: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.prev {
  left: 40px;
}
.next {
  right: 40px;
}

.companyImg {
  width: 100%;
  height: 300px;
  position: relative;
  border: 10px solid #19C2C7;
  box-shadow: 10px 10px 0 0 #007FFF;
  border-radius: 38px;
}

.companyImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.companyInfo {
  margin-top: 20px;
}

.companyInfo dt {
  font-size: 22px;
  color: var(--primaryColor);
}

.companyInfo dd {
  margin-top: 5px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 制限したい行数が3の場合 */
  overflow: hidden;
}

.companySns {
  width: 100%;
  margin: 15px 0 0;
  display: flex;
  align-items: center;
}

.companySns li {
  width: 18px;
  margin: 0 10px;
}
.companySns li:first-of-type {
  margin-left: 0;
}

.companySns li img {
  width: 100%;
  vertical-align: bottom;
}

.more {
  width: 173px;
  margin: 50px auto 0;
  position: relative;
  z-index: 5;
}

.more a {
  font-size: 26.6px;
  display: flex;
  /* justify-content: flex-end; */
  align-items: center;
  position: relative;
}

.more span {
  display: block;
  margin-top: -4px;
  margin-right: 10px;
}

.more span::after {
  content: "";
  width: 100%;
  height: 7px;
  background: var(--secondaryColor);
  border-radius: 5px;
  position: absolute;
  bottom: -2px;
  left: 0;
}

.more img {
  /* flex: 0 0 25px; */
  width: 25px;
}

#companyContainer .more {
  position: absolute;
  bottom: 0;
  right: 20%;
}

/* #companyContainer .more a {
  text-align: right;
} */






/* 企業マップ */
#mapContainer {
  width: 100%;
  margin-top: -60px;
  padding-top: 260px;
  padding-bottom: 200px;
  position: relative;
  /* overflow-x: hidden;
  overflow-y: visible; */
  overflow: hidden;
}

#mapContainer picture img {
  width: 100%;
  min-width: 1920px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.mapContents {
  width: 90%;
  max-width: 800px;
  height: 455px;
  margin: 50px auto 0;
  border: 10px solid #19C2C7;
  box-sizing: border-box;
  border-radius: 30px;
  overflow: hidden;
}

.mapContents iframe {
  width: 100%;
  height: 100%;
  position: relative;
  /* z-index: -1; */
}

#mapContainer .more span::after {
  background: var(--primaryColor);
}





/* 新着情報 */
#newsContainer {
  width: 100%;
  margin-top: -250px;
  padding-top: 280px;
  padding-bottom: 140px;
  position: relative;
  overflow: hidden;
  /* z-index: -2; */
}

#newsContainer > img:first-of-type {
  width: 100%;
  height: 100%;
  min-width: 1920px;
  object-fit: cover;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -2;
}
#newsContainer > img:nth-of-type(2) {
  width: 100%;
  min-width: 2050px;
  height: 92%;
  object-fit: cover;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.newsContentsContainer {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  padding: 75px 100px 95px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 30px;
}

.newsContents {
  margin-top: 50px;
}

.news {
  width: 100%;
  margin: 0 auto;
  padding: 11px 0 20px;
  border-bottom: 1px solid #E0DFDF;
  display: flex;
  align-items: center;
}

.date {
  margin-top: 10px;
  font-size: 14px;
  color: #ABA9A9;
}

.category {
  flex: 0 0 120px;
}

.category a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 3px 10px;
  margin: 7px 0;
  font-size: 12px;
  color: #fff;
  background: #007FFF;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.category a:first-of-type {
  margin-top: 0;
}
.category a:last-of-type {
  margin-bottom: 0;
}

.news > a {
  margin-left: 20px;
  font-size: 16px;
}

#newsContainer .more {
  margin-top: 80px;
}

#newsContainer .more span::after {
  background: var(--thirdColor);
}




.particleContainer {
  width: 100%;
  position: relative;
}

#particles-js3 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -20;
}

#particles-js4 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -20;
}

#blogContainer {
  width: 100%;
  margin-top: -100px;
  padding: 230px 0 0px;
  position: relative;
  overflow: hidden;
  /* z-index: -3; */
}

#blogContainer > img:first-of-type {
  width: 143px;
  position: absolute;
  top: 160px;
  left: 50%;
  transform: translateX(-230px);
  z-index: -3;
}

.blogContentsContainer {
  width: calc(50% + 400px);
  margin: 0 0 0 auto;
  display: flex;
}

.blogTextContainer {
  flex: 0 0 250px;
  position: relative;
}

#blogContainer .title {
  text-align: left;
}

.blogTextContainer > p {
  margin-top: 10px;
  line-height: 2;
}

#blogContainer .more {
  margin-left: 0;
}

#blogContainer .more span::after {
  background: var(--secondaryColor);
}

.blogContents {
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;
}

.blogList {
  width: 280px;
  margin-left: 50px;
}
.blogList:nth-of-type(2n) {
  margin-top: 50px;
}

.blogList a {
  width: 100%;
  display: block;
}

.blogImg {
  width: 280px;
  position: relative;
}
.blogImg:before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 250px;
  background: var(--primaryColor);
  clip-path: path("m82.93,223.73C35.04,204.42-7.81,168.56,1.21,110.17,9.01,59.65,52.18,19.13,98.63,5.62c73.16-21.29,153.98,20.23,175.67,85.93,13.33,40.38,3.15,91.92-28.97,120.17-31.1,27.35-72.75,33.67-111.45,26.62-16.21-2.95-33.9-7.73-50.94-14.6Z");
}

.blogImg img {
  width: 260px;
  height: 260px;
  object-fit: cover;
  display: block;
  clip-path: path("m76.3,209.96C32.24,191.84-7.18,158.19,1.11,103.39,8.29,55.98,48.01,17.95,90.74,5.27c67.31-19.97,141.67,18.98,161.62,80.64,12.26,37.9,2.9,86.26-26.65,112.77-28.61,25.67-66.93,31.59-102.53,24.98-14.92-2.77-31.19-7.25-46.87-13.7Z");
  position: absolute;
  top: 5px;
  left: 10px;
}

.blogList:nth-of-type(2n) .blogImg {
  transform: translateX(8px);
}

.blogList:nth-of-type(2n) .blogImg:before {
  background: var(--secondaryColor);
  clip-path: path("m180.97,10.88c18.2,7.11,34.98,17.56,48.68,30.9,20.65,20.11,34.99,48.52,35.88,78.33.94,31.59-13.32,62.3-34.69,83.92-61.8,62.49-179.51,57.16-219.47-31.46C-10.59,123.88-.11,67.98,37.39,32.33,74.99-3.41,132.94-7.88,180.97,10.88Z");
}

.blogList:nth-of-type(2n) .blogImg img {
  top: 12px;
  left: 4px;
  clip-path: path("m174.86,9.63c17.54,6.34,33.69,15.7,46.87,27.66,19.86,18.03,33.61,43.56,34.38,70.37.81,28.42-13.03,56.1-33.7,75.6-59.79,56.4-173.31,51.94-211.6-27.68C-10.23,111.84.05,61.52,36.32,29.34,72.68-2.93,128.59-7.11,174.86,9.63Z");
}

.blogText {
  width: 100%;
  margin-top: -10px;
}

.blogTitle {
  margin-top: 5px;
  font-size: 20px;
  color: var(--primaryColor);
  line-height: 1.4;
}

.blogList:nth-of-type(2n) .blogTitle {
  color: var(--secondaryColor);
}