@charset "UTF-8";
.mv__wrapper {
  width:100%;
  height:auto;
  position:relative;
}
/*----------------------------------------------------
  .mv
----------------------------------------------------*/
.mv {
  width:100%;
  height:auto;
  overflow:hidden;
  position:relative;
}
.mv::after {
  display:block;
  content:'';
  width:100%;
  height:0;
  padding-top:56.25%;
}
.mv__inner {
  width:50%;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items: center;
  color:#fff;
  position:absolute;
  top:40%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:3;
}
.mv__ttl {
  width:55%;
  height:auto;
}
.mv__ttl > h2 {
  font-size:3.8rem;
}
.mv__ttl > p {
  font-size:3.2rem;
  line-height:1.6;
}
.mv__logo {
  width:40%;
  height:auto;
}
.mv__img {
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  top:0;
  left:0;
}
.mv__img::after {
  display:block;
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background:url('../img/top/mv-bg.png');
  background-size:cover;
  opacity:.8;
}
.swiper-container {
  width:100%;height:100%;
  margin:0!important;
  position:relative;
  z-index:-1;
}
.iPad #main-img,.android #main-img,.iPad .swiper-container1,.android .swiper-container1 {
  height:60vh;
}
.iPad #heading,.android #heading {
  position:absolute;
  top:55vh;
}
.swiper-slide,.swiper-slide-active {
  position:relative;
}
.slide-img {
  width:100%;height:100%;
  position:relative;
}
.slide-img img,
.slide-img video {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.swiper1 .swiper-pagination {
  display:flex;
  flex-direction:column;
  align-items:center;
  width:48px;height:auto;
  position:absolute;
  top:50%;
  right:2.5%;
  left:initial;bottom:initial;
  transform:translate(0,-50%);
  mix-blend-mode:difference;
}
.swiper1 .swiper-pagination-bullet {
  box-sizing:border-box;
  display:block;
  opacity:1;
  position:relative;
  transform:scale(.9);
  transition: transform .3s ease;
  width:48px;height:48px;
  border-radius:0;
  margin:10px 4px!important;
  padding:13px 0;
  background-color:transparent;
  font-weight:700;
  text-align:center;
  font-size:1.2rem;
  color:#A7A7A7;
}
.swiper1 .swiper-pagination-bullet + .swiper-pagination-bullet {
  margin-top:20px;
}
.swiper1 .swiper-pagination-bullet.swiper-pagination-bullet-active {
  transform:scale(1);
}
.swiper1 .swiper-pagination-bullet .circle {
  display:block;
  position:absolute;
  top:0;
  left:0;
}
.circle1 {
  stroke-dasharray:152px;
  stroke-dashoffset:152px;
  stroke:#A7A7A7;
}
.swiper-pagination-bullet-active .circle {
  transform: scale(1) rotate(-90deg);
}
.swiper-pagination-bullet-active .circle1 {
  animation: sliderPagination 6.5s linear forwards;
}
@keyframes sliderPagination {
 	100% {stroke-dashoffset: 0;}
}
.mv__img video {
  display: block;
  width:100%;
  height:100%;
  opacity:1;
}
.mv__bg,
.mv__bg__sp,
.mv__stroke {
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  top:0;
  left:0;
}
.mv__bg__sp {
  display:none;
}
.svg-anima,
.svg-anima-sp,
.svg-anima2,
.svg-anima2-sp,
.svg-anima3,
.svg-anima3-sp,
.svg-anima4,
.svg-anima4-sp,
.svg-anima5,
.svg-anima5-sp,
.svg-anima6 {
  animation: floating-y 2s ease-in-out infinite alternate-reverse;
}
.svg-anima2,
.svg-anima2-sp {
  animation-delay:.5s;
}
.svg-anima3,
.svg-anima3-sp {
  animation-delay:1s;
}
.svg-anima4,
.svg-anima4-sp {
  animation-delay:1.5s;
}
.svg-anima5,
.svg-anima5-sp {
  animation-delay:2s;
}
.svg-anima6 {
  animation-delay:2.5s;
}
@keyframes floating-y {
  0% {
    transform:translateY(-20px);
    opacity:.6;
  }
  100% {
    transform:translateY(0);
    opacity:1;
  }
}
.mv__stroke path {
  stroke:#fff;
}
.stroke-anima {
    animation: stroke-animation 10s infinite;
    fill:none;
    stroke: #fff;
    stroke-width:1.2px;
    stroke-dasharray:2000;
    stroke-dashoffset:2000;
    stroke-miterlimit:10;
}
.stroke-anima-bg {
  fill:none;
  stroke: rgba(255,255,255,.5);
  stroke-width:1px;
  stroke-miterlimit:10;
}
.stroke-anima2 {
  animation-delay:.5s;
}
.stroke-anima3 {
  animation-delay: 1s;
}
.stroke-anima4 {
  animation-delay: 1.5s;
}
.stroke-anima5 {
  animation-delay:2s;
}
.stroke-anima6 {
  animation-delay:2.5s;
}
.stroke-anima7 {
  animation-delay:3s;
}
.stroke-anima8 {
  animation-delay:3.5s;
}
.stroke-anima9 {
  animation-delay:4s;
}
.stroke-anima10 {
  animation-delay:4.5s;
}

@keyframes stroke-animation {
  50% {stroke-dashoffset:0;}
  100% {stroke-dashoffset:2000;}
}
.mv__img-main {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:2;
}
.mv__img-main > picture,
.mv__img-main img {
  height:100%;
  object-fit:cover;
}
/*----------------------------------------------------
  .news
----------------------------------------------------*/
.news {
  width:90%;
  max-width:786px;
  position:absolute;
  bottom:7.5%;
  left:50%;
  z-index:3;
  transform:translate(-50%,0);
  background:linear-gradient(to right,rgba(255,255,255,.8),rgba(255,255,255,1) 50%,#00D4E7 100%);
  outline-offset:0;
  outline:6px solid rgba(255,255,255,.4);
  padding:20px 40px 15px 40px;
  box-sizing:border-box;
  border-radius:8px;
}
.news__body,
.news__col,
.news__list {
  width:100%;
  position:relative;
  font-size:1.3rem;
}
.news__ttl {
  display:inline-block;
  background:#1a1a1a;
  position:absolute;
  right:0%;
  top:-35px;
  color:#fff;
  padding:0 20px;
}
.news__item {
  width:100%;
  height:auto;
  display:flex;
  justify-content:space-between;
  position:relative;
  font-size:1.3rem;
}
.news__item > a {
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
}
.news__taxonomy {
  display:inline-block;
  padding-right:15px;
  margin-right:15px;
  border-right:1px solid #6D7D88;
}
.news__cat {
  margin-left:8px;
}
.news__txt {
  flex:1;
}
/*----------------------------------------------------
  .about
----------------------------------------------------*/
.about {
  width:100%;
  height:auto;
  position:relative;
  padding:300px 0 150px 0;
}
.about::before {
  display:block;
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background-size:cover;
  background-position:bottom center;
}
.about::after {
  display:block;
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background:url('../img/common/bg-noise.png');
  background-repeat:repeat;
  opacity:.05;
}
.about__body {
  width:90%;
  max-width:1100px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  position:relative;
  z-index:1;
}
.about__ttl {
  width:auto;
  margin-right:7.5%;
}
.about__ttl > h2 {
  line-height:1;
  margin-bottom:30px;
}
.about__ttl > p {
  font-size:2rem;
  font-weight:bold;
  margin-bottom:30px;
}
.about__item {
  flex:1;
}
.about__item > p:not(:last-child) {
  margin-bottom:20px;
}
.about__link {
  width:80%;
  margin:0 auto 0 0;
}
.about__link__sp {
  display:none;
}
.about__bg {
  width:95%;
  height:auto;
  position:absolute;
  top:10%;
  right:0;
  transform:translate(0,0);
}
.about__bg::after {
  display:block;
  content:'';
  width:100%;
  height:0;
  padding-top:52.35%;
}
.about__bg svg {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity:0;
  stroke-dasharray:6000;
  stroke-dashoffset:0;
}
.is-active svg {
  stroke-dasharray: 6000;
  stroke-dashoffset: 6000;
  animation:line_animation 4s linear 0s 1;
  animation-fill-mode: forwards;
}
@keyframes line_animation {
0% { stroke-dashoffset: 6000;opacity:1; }
100% { stroke-dashoffset: 0;opacity:1; }
}

/*----------------------------------------------------
  .service
----------------------------------------------------*/
.service {
  width:100%;
  height:auto;
  color:#fff;
  position:relative;
  padding:0 0 100px 0;
}
.service::after {
  display:block;
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background:url('../img/common/bg-noise.png');
  background-repeat:repeat;
  opacity:.05;
}
.service__body {
  width:90%;
  max-width:1440px;
  margin:0 auto;
  padding:100px 0;
  background:url('../img/common/bg-blu.png');
  background-size:cover;
  background-position:right bottom;
  border-radius:20px;
  position:relative;
  overflow:hidden;
  z-index:1;
}
.service__body-bg {
  width:auto;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  border-radius:20px;
}
.service__body-bg picture,
.service__body-bg img {
  width:auto;
  height:100%;
}
.service__ttl {
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  justify-content:center;
  line-height:1.4;
  margin-bottom:40px;
  position:relative;
  z-index:1;
}
.service__ttl > p {
  font-size:6rem;
  letter-spacing:.1em;
  font-weight:bold;
}
.service__ttl > h2 {
  font-size:1.8rem;
}
.service__ttl__sub {
  text-align:center;
  font-size:1.8rem;
  display:block;
  width:80%;
  margin:0 auto 30px auto;
}
.service__col {
  width:100%;
  max-width:1280px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  padding:0 50px;
  box-sizing:border-box;
  position:relative;
  z-index:2;
}
.service__item {
  width:49%;
  max-width:600px;
  padding:80px 50px;
  box-sizing:border-box;
  position:relative;
  display:flex;
  flex-direction:column;
}
.service__item:nth-of-type(1) {
  background:linear-gradient(45deg,rgba(0,102,118,0.9200000166893005),rgba(0,212,231,0.9200000166893005));

}
.service__item:nth-of-type(1)::before {
  display: block;
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background-image:url('../img/top/service-item-bg1.png');
  background-size:cover;
}
.service__item:nth-of-type(2) {
  background-image:url('../img/top/service-item-bg2.png');
  background-size:cover;
  background-color: rgba(2, 50, 77, 0.9200000166893005);
}
.service_ttl-sub {
  display:flex;
  flex-direction:column-reverse;
  justify-content:center;
  align-items:center;
  line-height:1.4;
  padding-bottom:30px;
  border-bottom:1px solid #f2f2f2;
}
.service_ttl-sub > h3 {
  font-size:2.2rem;
}
.service__lead {
  font-size:2.2rem;
  font-weight:bold;
  padding:40px 0 10px 0;
}
.service_ttl-sub > p {
  font-size:5rem;
}
.service__txt {
  margin-bottom:30px;
}
.service__link {
  width:60%;
  margin:auto auto 0 0;
}
/*----------------------------------------------------
 anima
----------------------------------------------------*/
.anima{
  width:100%;
  height:auto;
  padding:0 0 75px 0;
  position:relative;
  z-index:1;
}
.anima::after {
  display:block;
  content:'';
  width:100%;
  height:0;
  padding-top:56.25%;
}
.anima__inner {
  width:60%;
  height:auto;
  display:flex;
  justify-content:space-between;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.anima__logo {
  width:40%;
}
/*----------------------------------------------------
 loop
----------------------------------------------------*/
.loop {
  width:100%;
  height:auto;
  padding:150px 0 75px 0;
  position:relative;
  z-index:1;
}
.loop__bg {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index: 1;
}
.loop__bg > span {
  display:inline-block;
  position:absolute;
  top:50%;
  left:50%;
  border-radius:50vh;
  transform-origin: center;
}
.loop__bg > span:nth-of-type(1) {
  width:30px;
  height:30px;
  background-color:rgba(255, 255, 0, .84);
}
.is-animated.loop__bg > span:nth-of-type(1) {
  animation: dot-anima 1s cubic-bezier(.4, 0, .2, 1) , fade-anima 2s  cubic-bezier(.4, 0, .2, 1) 1s infinite alternate;
}
.loop__bg > span:nth-of-type(2) {
  width:30px;
  height:30px;
  background-color:rgba(255, 85, 0,.6);
}
.is-animated.loop__bg > span:nth-of-type(2) {
  animation: dot-anima2 1s cubic-bezier(.4, 0, .2, 1), fade-anima2 2.5s  cubic-bezier(.4, 0, .2, 1) 1s infinite alternate;
}
.loop__bg > span:nth-of-type(3) {
  width:30px;
  height:30px;
  background-color:rgba(255, 105, 180, .6);
}
.is-animated.loop__bg > span:nth-of-type(3) {
  animation: dot-anima3 1s cubic-bezier(.4, 0, .2, 1), fade-anima3 2.5s  cubic-bezier(.4, 0, .2, 1) 1s infinite alternate;
}
.loop__bg > span:nth-of-type(4) {
  width:36px;
  height:36px;
  background-color:rgba(0, 186, 202, .4);
}
.is-animated.loop__bg > span:nth-of-type(4) {
  animation: dot-anima4 1s cubic-bezier(.4, 0, .2, 1), fade-anima4 2s  cubic-bezier(.4, 0, .2, 1) 1s infinite alternate;
}
.loop__bg > span:nth-of-type(5) {
  width:14px;
  height:14px;
  background-color:rgba(255, 255, 0, .84);
}
.is-animated.loop__bg > span:nth-of-type(5) {
  animation: dot-anima5 1s cubic-bezier(.4, 0, .2, 1), fade-anima5 1.5s  cubic-bezier(.4, 0, .2, 1) 1s infinite alternate;
}
.loop__bg > span:nth-of-type(6) {
  width:16px;
  height:16px;
  background-color:rgba(174, 58, 171, .4);
}
.loop__bg > span:nth-of-type(7) {
  width:16px;
  height:16px;
  background-color:rgba(174, 58, 171, .4);
}
.loop__bg > span:nth-of-type(8) {
  width:14px;
  height:14px;
  background-color:rgba(218, 202, 192, .8);
}
.loop__bg > span:nth-of-type(9) {
  width:36px;
  height:36px;
  background-color:rgba(218, 202, 192, .8);
}
.loop__bg > span:nth-of-type(10) {
  width:12px;
  height:12px;
  background-color:rgba(255, 105, 180, .6);
}
.loop__bg > span:nth-of-type(11) {
  width:30px;
  height:30px;
  background-color:rgba(255, 85, 0,.6);
}
.loop__bg > span:nth-of-type(12) {
  width:22px;
  height:22px;
  background-color:rgba(0, 186, 202, .4);
}
.is-animated.loop__bg > span:nth-of-type(6) {
  animation: dot-anima6 1s cubic-bezier(.4, 0, .2, 1), fade-anima6 1.5s  cubic-bezier(.4, 0, .2, 1) 1s infinite alternate;
}
.is-animated.loop__bg > span:nth-of-type(7) {
  animation: dot-anima7 1s cubic-bezier(.4, 0, .2, 1), fade-anima7 1.5s  cubic-bezier(.4, 0, .2, 1) 1s infinite alternate;
}
.is-animated.loop__bg > span:nth-of-type(8) {
  animation: dot-anima8 1s cubic-bezier(.4, 0, .2, 1), fade-anima8 1.5s  cubic-bezier(.4, 0, .2, 1) 1s infinite alternate;
}
.is-animated.loop__bg > span:nth-of-type(9) {
  animation: dot-anima9 1s cubic-bezier(.4, 0, .2, 1), fade-anima9 1.5s  cubic-bezier(.4, 0, .2, 1) 1s infinite alternate;
}
.is-animated.loop__bg > span:nth-of-type(10) {
  animation: dot-anima10 1s cubic-bezier(.4, 0, .2, 1), fade-anima10 1.5s  cubic-bezier(.4, 0, .2, 1) 1s infinite alternate;
}
.is-animated.loop__bg > span:nth-of-type(11) {
  animation: dot-anima11 1s cubic-bezier(.4, 0, .2, 1), fade-anima11 1.5s  cubic-bezier(.4, 0, .2, 1) 1s infinite alternate;
}
.is-animated.loop__bg > span:nth-of-type(12) {
  animation: dot-anima12 1s cubic-bezier(.4, 0, .2, 1), fade-anima12 1.5s  cubic-bezier(.4, 0, .2, 1) 1s infinite alternate;
}
@keyframes dot-anima {
  0% {transform:translate(-50%,-50%) scale(.4);opacity:0;}
  100% {transform:translate(-35vw,-40vh) scale(1);opacity:1;}
}
@keyframes fade-anima {
  0% {transform:translate(-35vw,-40vh) scale(1);opacity:.8;transform-origin: center;}
  100% {transform:translate(calc(-35vw + 5px),calc(-40vh - 5px)) scale(.8);opacity:1;transform-origin: center;}
}
@keyframes dot-anima2 {
  0% {transform:translate(-50%,-50%) scale(.4);opacity:0;}
  100% {transform:translate(35vw,-42.5vh) scale(1);opacity:1;}
}
@keyframes fade-anima2 {
  0% {transform:translate(35vw,-42.5vh) scale(1);opacity:.8;transform-origin: center;}
  100% {transform:translate(calc(35vw + 5px),calc(-42.5vh - 5px)) scale(.8);opacity:1;transform-origin: center;}
}
@keyframes dot-anima3 {
  0% {transform:translate(-50%,-50%) scale(.4);opacity:0;}
  100% {transform:translate(-37.5vw,45vh) scale(1);opacity:1;}
}
@keyframes fade-anima3 {
  0% {transform:translate(-37.5vw,45vh) scale(1);opacity:.8;transform-origin: center;}
  100% {transform:translate(calc(-37.5vw + 5px),calc(45vh - 5px)) scale(.8);opacity:1;transform-origin: center;}
}
@keyframes dot-anima4 {
  0% {transform:translate(-50%,-50%) scale(.4);opacity:0;}
  100% {transform:translate(35vw,45vh) scale(1);opacity:1;}
}
@keyframes fade-anima4 {
  0% {transform:translate(35vw,45vh) scale(1);opacity:.8;transform-origin: center;}
  100% {transform:translate(calc(35vw + 5px),calc(45vh - 5px)) scale(.8);opacity:1;transform-origin: center;}
}
@keyframes dot-anima5 {
  0% {transform:translate(-50%,-50%) scale(.4);opacity:0;}
  100% {transform:translate(-12.5vw,40vh) scale(1);opacity:1;}
}
@keyframes fade-anima5 {
  0% {transform:translate(-12.5vw,40vh) scale(1);opacity:.8;transform-origin: center;}
  100% {transform:translate(calc(-12.5vw - 5px),calc(40vh + 5px)) scale(1);}
}
@keyframes dot-anima6 {
  0% {transform:translate(-50%,-50%) scale(.4);opacity:0;}
  100% {transform:translate(15vw,-35vh) scale(1);opacity:1;}
}
@keyframes fade-anima6 {
  0% {transform:translate(15vw,-35vh) scale(1);opacity:.8;transform-origin: center;}
  100% {transform:translate(calc(15vw + 5px),calc(-35vh - 5px)) scale(1);}
}
@keyframes dot-anima7 {
  0% {transform:translate(-50%,-50%) scale(.4);opacity:0;}
  100% {transform:translate(-47.5vw,-10vh) scale(1);opacity:1;}
}
@keyframes fade-anima7 {
  0% {transform:translate(-47.5vw,-10vh) scale(1);opacity:.8;transform-origin: center;}
  100% {transform:translate(calc(-47.5vw + 5px),calc(-10vh - 5px)) scale(1);}
}
@keyframes dot-anima8 {
  0% {transform:translate(-50%,-50%) scale(.4);opacity:0;}
  100% {transform:translate(45vw,-15vh) scale(1);opacity:1;}
}
@keyframes fade-anima8 {
  0% {transform:translate(45vw,-15vh) scale(1);opacity:.8;transform-origin: center;}
  100% {transform:translate(calc(45vw + 5px),calc(-15vh - 5px)) scale(1);}
}
@keyframes dot-anima9 {
  0% {transform:translate(-50%,-50%) scale(.4);opacity:0;}
  100% {transform:translate(20vw,20vh) scale(1);opacity:1;}
}
@keyframes fade-anima9 {
  0% {transform:translate(20vw,20vh) scale(1);opacity:.8;transform-origin: center;}
  100% {transform:translate(calc(20vw + 5px),calc(20vh - 5px)) scale(1);}
}
@keyframes dot-anima10 {
  0% {transform:translate(-50%,-50%) scale(.4);opacity:0;}
  100% {transform:translate(-20vw,-35vh) scale(1);opacity:1;}
}
@keyframes fade-anima10 {
  0% {transform:translate(-20vw,-35vh) scale(1);opacity:.8;transform-origin: center;}
  100% {transform:translate(calc(-20vw + 5px),calc(-35vh - 5px)) scale(1);}
}
@keyframes dot-anima11 {
  0% {transform:translate(-50%,-50%) scale(.4);opacity:0;}
  100% {transform:translate(5vw,40vh) scale(1);opacity:1;}
}
@keyframes fade-anima11 {
  0% {transform:translate(5vw,40vh) scale(1);opacity:.8;transform-origin: center;}
  100% {transform:translate(calc(5vw + 5px),calc(40vh - 5px)) scale(1);}
}
@keyframes dot-anima12 {
  0% {transform:translate(-50%,-50%) scale(.4);opacity:0;}
  100% {transform:translate(-5vw,-25vh) scale(1);opacity:1;}
}
@keyframes fade-anima12 {
  0% {transform:translate(-5vw,-25vh) scale(1);opacity:.8;transform-origin: center;}
  100% {transform:translate(calc(-5vw + 5px),calc(-25vh - 5px)) scale(1);}
}

.loop__inner {
  width:100%;
  height:auto;
  overflow:hidden;
  position:relative;
  z-index:1;
}
.loop__col {
  width:280vw;
  height:auto;
  display:flex;
}
.loop__list {
  display: flex;
  justify-content:space-around;
  align-items: center;
  list-style: none;
  animation: infinity-scroll-left 26s infinite linear 0.5s both;
}
.loop__item__1st {
  width:24%;
  margin-top:auto;
}
.loop__item__2nd {
  width:30%;
}
.loop__item__3rd {
  width:38%
}
.loop__item > img {
  border-radius:10px;
}
@keyframes infinity-scroll-left {
  0% {
    transform: translateX(0);
}
100% {
    transform: translateX(-100%);
} 
}
/*----------------------------------------------------
  .blog
----------------------------------------------------*/
.blog {
  width:100%;
  height:auto;
  position:relative;
  padding:150px 0;
}
.blog__bg {
  width:auto;
  height:70%;
  position:absolute;
  left:-5%;
  top:50%;
  transform:translate(0,-50%);
  opacity:.1;
}
.blog__bg > img {
  width:auto;
  height:100%;
}
.blog__body {
  width:90%;
  max-width:1536px;
  margin-left:auto;
}
.blog__ttl {
  line-height:1.6;
  margin-bottom:30px;
}
.blog__ttl > h2 {
  font-size:5rem;
}
.blog__ttl > p {
  font-size:1.4rem;
}
#blog__list {
  width:100%;
  height:auto;
  display:flex;
  justify-content:space-between;
  margin-bottom:40px;
}
.blog__item {
  width:24%;
  height:auto;
  display:flex;
  flex-direction:column;
  position:relative;
}
.blog__item-link {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:1;
}
.blog__item-link > a {
  display:block;
  width:100%;
  height:100%;
}
.blog__eyecatch {
  width:100%;
  height:auto;
  position:relative;
}
.blog__eyecatch::after {
  display:block;
  content:'';
  width:100%;
  height:0;
  padding-top:56.25%;
}
.blog__eyecatch > img {
  height:100%;
  object-fit:cover;
  position:absolute;
  top:0;
  left:0;
  border-radius:10px;
}
.blog__taxonomy {
  width:100%;
  height:auto;
  display:flex;
  align-items:center;
  font-size:1.3rem;
  padding:20px 0 0 0;
}
.blog__cat {
  margin-left:5px;
  color:#00BACA;
}
.blog__lead {
  width:100%;
  height:auto;
}
.blog__lead > h3 {
  font-size:1.4rem;
}
.blog__link {
  max-width:260px;
  margin:0 auto 0 0;
}
@media screen and (max-width:1400px) {
    /*--- about ---*/
    .about {
      padding:300px 0 200px 0;
    }
    .about__bg {
      width:120%;
      right:-20%;
    }
}
@media screen and (max-width:1280px) {
  .mv::after {
    display:block;
    content:'';
    width:100%;
    height:0;
    padding-top:65%;
  }
  .mv__img video {
    object-fit: cover;
  }
  .mv__ttl > h2 {
    font-size:3.4rem;
  }
  /*--- about ---*/
  .about__bg {
    width:120%;
    right:-20%;
  }
}
@media screen and (max-width:1024px) {
  .mv__ttl > h2 {
    font-size:2.4rem;
  }
  .mv__ttl > p {
    font-size:1.8rem;
  }
  /*--- about ---*/
  .about {
    padding:150px 0 100px 0;
  }
  .about__body {
    width:70%;
    flex-direction:column;
  }
  .about__ttl {
    margin-right:0;
    margin-bottom:60px;
  }
  .about__ttl > p {
    margin-bottom:0;
  }
  .about__item {
    margin-bottom:60px;
  }
  .about__link {
    max-width:320px;
  }
  .about__link__pc {
    display:none;
  }
  .about__link__sp {
    display:block;
  }
  .about__bg {
    width:140%;
    right:-30%;
  }
  /*--- service ---*/
  .service__col {
    width:95%;
    flex-direction:column;
  }
  .service__item {
    width:100%;
    max-width:initial;
  }
  .service__link {
    max-width:360px;
  }
}
@media screen and (max-width:896px) {
  .mv::after {
    padding-top:75%;
  }
  .mv__stroke > svg {
    width:100%;
    position:absolute;
    top:52.5%;
    left:50%;
    transform:translate(-50%,-50%);
  }
  .mv__img-main > img {
    width:100%;
    position:absolute;
    top:52.5%;
    left:50%;
    transform:translate(-50%,-50%);
  }
  .mv__bg > svg {
    width:115%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
  }
  /*--- loop ---*/
  .loop__col {
    width:360vw;
  }

}
@media screen and (max-width:786px) {
  .about__body {
    width:80%;
  }
  .about__item > p br {
    display:none;
  }
  /*--- service ---*/
  .service__col {
    width:100%;
    flex-direction:column;
  }

}
@media screen and (max-width:680px) {
  .mv {
    height:100vh;
  }
  .mv::after {
    display:none;
  }
  .mv__stroke > svg {
    width:130%;
    position:absolute;
    top:52.5%;
    left:50%;
    transform:translate(-50%,-50%);
  }
  .mv__img-main > img {
    width:130%;
    position:absolute;
    top:52.5%;
    left:50%;
    transform:translate(-50%,-50%);
  }
  .mv__bg > svg {
    width:130%;
    position:absolute;
    top:55%;
    left:50%;
    transform:translate(-50%,-50%);
  }
  /*--- blog ---*/
  #blog__list {
    flex-wrap:wrap;
  }
  .blog__item {
    width:48%;
  }
  .blog__item:nth-of-type(n+3) {
    margin-top:30px;
  }
}
@media screen and (max-width:480px) {
  .mv {
    height:calc(var(--vh, 1vh) * 120);
  }
  .mv::after {
    display:none;
  }
  .mv__bg {
    display:none;
  }
  .mv__bg__sp {
    display:block;
  }
  .mv__inner {
    width:80%;
    top:32.5%;
    flex-direction:column-reverse;
    align-items:center;
  }
  .mv__ttl {
    width:100%;
  }
  .mv__ttl > h2 {
    font-size:2.8rem;
    white-space:nowrap;
  }
  .mv__ttl > p {
    font-size:2.2rem;
  }
  .mv__logo {
    width:45%;
    margin-bottom:30px;
  }
  .mv__stroke > svg {
    width: 315%;
    position: absolute;
    top: 54.5%;
    left: 28%;
    transform:translate(-50%,-50%);
  }
  .mv__bg > svg {
    width:130%;
    position:absolute;
    top:55%;
    left:50%;
    transform:translate(-50%,-50%);
  }
  /*--- news ---*/
  .news {
    padding:20px 20px 14px 20px;
  }
  .news__item {
    flex-direction:column;
  }
  .news__taxonomy {
    border-right:none;
    font-size:1.2rem;
    padding-right:0;
    margin-bottom:8px;
    margin-right:0;
    border-bottom: 1px solid #6D7D88;
  }
  /*--- about ---*/
  .about {
    padding:100px 0;
  }
  .about__bg {
    width:105%;
    right:-1%;
    top:6%;
  }
  .about__body {
    width:85%;
  }
  .about__ttl {
    margin-bottom:30px;
  }
  .about__ttl > h2 {
    margin-bottom:20px;
  }
  .about__item {
    margin-bottom:40px;
  }
  /*--- service ---*/
  .service {
    padding-bottom:0;
  }
  .service__body {
    width:95%;
    padding:60px 0;
  }
  .service__ttl {
    margin-bottom:30px;
  }
  .service__ttl > p {
    font-size:4rem;
  }
  .service__ttl__sub {
    font-size:1.4rem;
    text-align:left;
  }
  .service__col {
    width:85%;
    padding:0;
  }
  .service__item {
    padding:30px 20px;
  }
  .service_ttl-sub {
    padding-bottom:20px;
  }
  .service_ttl-sub > h3 {
    font-size:1.4rem;
  }
  .service_ttl-sub > p {
    font-size:3.6rem;
  }
  .service__lead {
    font-size:1.5rem;
    padding:20px 0 10px 0;
  }
  .service__txt {
    font-size:1.3rem;
    margin-bottom:20px;
  }
  .service__link {
    width:85%;
    max-width:360px;
  }
  /*--- loop ----*/
  .loop {
    padding:120px 0 100px 0;
  }
  .loop__col {
    width:500vw;
  }
  .loop__bg > span:nth-of-type(3) {
    width:12px;height:12px;
  }
  .loop__bg > span:nth-of-type(2),
  .loop__bg > span:nth-of-type(4) {
    width:16px;height:16px;
  }
  .loop__bg > span:nth-of-type(6) {
    display:none;
  }
  .loop__bg > span:nth-of-type(11) {
    width:20px;height:20px;
  }
  @keyframes dot-anima {
    0% {transform:translate(-50%,-50%) scale(.4);opacity:0;}
    100% {transform:translate(-40vw,-20vh) scale(1);opacity:1;}
  }
  @keyframes fade-anima {
    0% {transform:translate(-40vw,-20vh) scale(1);opacity:.8;transform-origin: center;}
    100% {transform:translate(calc(-40vw + 5px),calc(-20vh - 5px)) scale(.8);opacity:1;transform-origin: center;}
  }
  @keyframes dot-anima2 {
    0% {transform:translate(-50%,-50%) scale(.4);opacity:0;}
    100% {transform:translate(27.5vw,-20.5vh) scale(1);opacity:1;}
  }
  @keyframes fade-anima2 {
    0% {transform:translate(27.5vw,-20.5vh) scale(1);opacity:.8;transform-origin: center;}
    100% {transform:translate(calc(27.5vw + 5px),calc(-20.5vh - 5px)) scale(.8);opacity:1;transform-origin: center;}
  }
  @keyframes dot-anima3 {
    0% {transform:translate(-50%,-50%) scale(.4);opacity:0;}
    100% {transform:translate(-40vw,25vh) scale(1);opacity:1;}
  }
  @keyframes fade-anima3 {
    0% {transform:translate(-40vw,25vh) scale(1);opacity:.8;transform-origin: center;}
    100% {transform:translate(calc(-40vw + 5px),calc(25vh - 5px)) scale(.8);opacity:1;transform-origin: center;}
  }
  @keyframes dot-anima4 {
    0% {transform:translate(-50%,-50%) scale(.4);opacity:0;}
    100% {transform:translate(35vw,25vh) scale(1);opacity:1;}
  }
  @keyframes fade-anima4 {
    0% {transform:translate(35vw,25vh) scale(1);opacity:.8;transform-origin: center;}
    100% {transform:translate(calc(35vw + 5px),calc(25vh - 5px)) scale(.8);opacity:1;transform-origin: center;}
  }
  @keyframes dot-anima5 {
    0% {transform:translate(-50%,-50%) scale(.4);opacity:0;}
    100% {transform:translate(-12.5vw,10vh) scale(1);opacity:1;}
  }
  @keyframes fade-anima5 {
    0% {transform:translate(-12.5vw,10vh) scale(1);opacity:.8;transform-origin: center;}
    100% {transform:translate(calc(-12.5vw - 5px),calc(10vh + 5px)) scale(1);}
  }
  @keyframes dot-anima7 {
    0% {transform:translate(-50%,-50%) scale(.4);opacity:0;}
    100% {transform:translate(-47.5vw,-12vh) scale(1);opacity:1;}
  }
  @keyframes fade-anima7 {
    0% {transform:translate(-47.5vw,-12vh) scale(1);opacity:.8;transform-origin: center;}
    100% {transform:translate(calc(-47.5vw + 5px),calc(-12vh - 5px)) scale(1);}
  }
  @keyframes dot-anima8 {
    0% {transform:translate(-50%,-50%) scale(.4);opacity:0;}
    100% {transform:translate(45vw,-15vh) scale(1);opacity:1;}
  }
  @keyframes fade-anima8 {
    0% {transform:translate(45vw,-15vh) scale(1);opacity:.8;transform-origin: center;}
    100% {transform:translate(calc(45vw + 5px),calc(-15vh - 5px)) scale(1);}
  }
  @keyframes dot-anima9 {
    0% {transform:translate(-50%,-50%) scale(.4);opacity:0;}
    100% {transform:translate(20vw,20vh) scale(1);opacity:1;}
  }
  @keyframes fade-anima9 {
    0% {transform:translate(20vw,20vh) scale(1);opacity:.8;transform-origin: center;}
    100% {transform:translate(calc(20vw + 5px),calc(20vh - 5px)) scale(1);}
  }
  @keyframes dot-anima10 {
    0% {transform:translate(-50%,-50%) scale(.4);opacity:0;}
    100% {transform:translate(-20vw,-15vh) scale(1);opacity:1;}
  }
  @keyframes fade-anima10 {
    0% {transform:translate(-20vw,-15vh) scale(1);opacity:.8;transform-origin: center;}
    100% {transform:translate(calc(-20vw + 5px),calc(-15vh - 5px)) scale(1);}
  }
  @keyframes dot-anima11 {
    0% {transform:translate(-50%,-50%) scale(.4);opacity:0;}
    100% {transform:translate(-32.5vw,17.5vh) scale(1);opacity:1;}
  }
  @keyframes fade-anima11 {
    0% {transform:translate(-32.5vw,17.5vh) scale(1);opacity:.8;transform-origin: center;}
    100% {transform:translate(calc(-32.5vw + 5px),calc(17.5vh - 5px)) scale(1);}
  }
  @keyframes dot-anima12 {
    0% {transform:translate(-50%,-50%) scale(.4);opacity:0;}
    100% {transform:translate(-5vw,-25vh) scale(1);opacity:1;}
  }
  @keyframes fade-anima12 {
    0% {transform:translate(-5vw,-25vh) scale(1);opacity:.8;transform-origin: center;}
    100% {transform:translate(calc(-5vw + 5px),calc(-25vh - 5px)) scale(1);}
  }
  /*--- blog ---*/
  .blog {
    padding:0 0 100px 0;
  }
  .blog__body {
    width:95%;
  }
  .blog__ttl > h2 {
    font-size:3.6rem;
  }
  .blog__item {
    width:49%;
  }
  .blog__lead > h3 {
    line-height:1.6;
    font-size:1.3rem;
  }
  .blog__taxonomy {
    font-size:1rem;
    padding-top:10px;
  }
  .blog__bg {
    height:70%;
    top:42.5%;
    left:-10%;
  }
}