@charset "utf-8";
/* LP omoi
---------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&display=swap');
#lp-vision{
  background-color: #CC0033;
  background-image: url(img/vision/bg_red.png);
  background-repeat: repeat;
  padding: 80px 20px 60px;
  overflow: hidden;
}
.vision-inner{
  width: 1000px;
  margin: 0 auto;
  background-color: #FFFFFF;
  border-radius: 10px;
  background-image: url(img/vision/bg_white.png);
  font-family: 'Noto Sans JP', sans-serif;
}
.vision-section{
  padding: 75px 0 80px;
  margin: 0 0 32px;
  position: relative;
  text-align: center;
}
.vision-section::after{
  content: '';
  display: block;
  width: 4px;
  height: 32px;
  background-image: url(img/vision/bg_dots.png);
  background-size: contain;
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
}
.vision-title{
  margin: 0 0 51px;
  color: #CC0033;
  font-size: 45px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.37;
  text-align: center;
}
.vision-section-txt p{
  margin-bottom: 28px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.1rem;
  line-height: 1.8;
  text-align: center;
}
.vision-section-txt p:last-of-type{
  margin-bottom: 0;
}
.vision-strong{
  color: #CC0033;
}
.vision-section-header{
  margin: 0 0 31px;
}
.vision-section-subtitle{
  color: #CC0033;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1;
  margin: 0 0 24px;
  text-align: center;
}
.vision-section-title{
  font-size: 35px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
}
.vision-section-img{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 35px;
  margin: 40px 0 0;
}
#vision-conclusion{
  padding: 70px 0 95px;
}
.vision-philosophy p{
  text-align: center;
  margin: 0 0 32px;
}
.vision-blue{
  display: inline-block;
  background: linear-gradient(transparent 0%, #00AFCC 0%);
  display: inline;
  padding: 7px 15px 8px;
  font-size: 18px;
  font-weight: 500;
  color: #FFFFFF;
}
.vision-more{
  margin: 70px 0 46px;
}
.vision-more p{
  font-size: 31px;
  font-weight: 700;
  letter-spacing: 0.1rem;
  line-height: 1.7;
  text-align: center;
}
.vision-from p{
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 1.8;
  text-align: center;
}
.vision-link{
  margin: 60px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 42px;
}

.vision-link-button a {
  display: block;
  width: 240px;
  line-height: 56px;
  color: #CC0033;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  border: none;
  border-radius: 999px;
  background: url(img/common/icon_arrow03.png) no-repeat 18px 50% #FFF;
  padding: 0 28px 0 48px;
  margin: 0 10px 15px;
}
.vision-link-button a:hover {
  color: #FF4452;
}

/* amimation */
@keyframes shake{
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-8deg);
  }
  75% {
    transform: rotate(6deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes walk{
  0% {
    transform: rotate(0);
  }
  6.25% {
    transform: rotate(10deg);
  }
  12.5% {
    transform: rotate(0);
  }
  18.75% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(0);
  }
  31.25% {
    transform: rotate(10deg);
  }
  37.5% {
    transform: rotate(0);
  }
  43.75% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(0);
  }
  56.25% {
    transform: rotate(10deg);
  }
  62.5% {
    transform: rotate(0);
  }
  68.75% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(0);
  }
  81.25% {
    transform: rotate(10deg);
  }
  87.5% {
    transform: rotate(0);
  }
  93.75% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0);
  }
}
.is-inview .img-baran{
  animation-name: shake;
  animation-duration: 2s;
  animation-iteration-count: 1;
  transform-origin: center top;
}
.img-tarebin{
  transition: transform 3.5s linear;
}
.is-inview .img-tarebin{
  transform: translateX(0);
}
.is-inview .img-tarebin img{
  animation-name: walk;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  transform-origin: center bottom;
}
.img-tarebin-01{
  transform: translateX(-600px);
}
.img-tarebin-02{
  transform: translateX(-450px);
}
.img-tarebin-03{
  transform: translateX(-300px);
}
.img-tarebin-04{
  transform: translateX(-150px);
}
.img-tarebin-07{
  transform: translateX(150px);
}
.img-tarebin-08{
  transform: translateX(300px);
}
.img-tarebin-09{
  transform: translateX(450px);
}
.img-tarebin-10{
  transform: translateX(600px);
}

/* 202309 Add */
.vision-lp-section{
  padding: 75px 0 0;
  position: relative;
  text-align: center;
}
.vision-lp-section-txt:nth-last-of-type(n+2){
  margin: 0 0 75px;
}
.vision-lp-section-txt p{
  margin-bottom: 28px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.1rem;
  line-height: 1.8;
  text-align: center;
}
.vision-lp-section-txt p:last-of-type{
  margin-bottom: 0;
}
.vision-lp-conclution{
  position: relative;
}
.vision-lp-tarebinimg{
  position: absolute;
  top: 56px;
  left: calc(100% - 180px);
  /*
  transform: translateX(-900px);
  opacity: 0;
  */
  z-index: 100;
}
/*
.is-inview.vision-lp-tarebinimg{
  transform: translateX(50px);
  opacity: 1;
}
*/
.vision-lp-more{
  display: inline-block;
  width: 100%;
  overflow: hidden;
  margin: 0 0 46px;
  /*
  opacity: 0;
  */
  transition: opacity 1s ease,
}
.vision-lp-more-inner{
  display: inline-block;
}
.vision-lp-more p{
  font-size: 31px;
  font-weight: 700;
  letter-spacing: 0.1rem;
  line-height: 1.7;
  text-align: center;
}
@keyframes slideTextX100 {
  from {
  transform: translateX(-1000px); /*要素を左の枠外に移動*/
  }
  to {
  transform: translateX(0);/*要素を元の位置に移動*/
  }
}
@keyframes slideTextX-100 {
  from {
  transform: translateX(1000px);/*要素を右の枠外に移動*/
  }
  to {
  transform: translateX(0);/*要素を元の位置に移動*/
  }
}
.vision-lp-tarebinimg{
  transition: opacity 1s ease,
              transform 3.0s ease-in-out;
}
/*
.is-inview.vision-lp-more{
  animation-name:slideTextX100;
  animation-duration: 5.3s;
  animation-fill-mode:forwards;
  opacity: 1;
}
.is-inview .vision-lp-more-inner{
  animation-name:slideTextX-100;
  animation-duration: 5.3s;
  animation-fill-mode:forwards;
}
*/