/******************
　　　共通ページ
******************/
body {
  font-family: 'Hiragino Kaku Gothic Pro';
  font-style: normal;
  font-weight: 600;
}
.top_wrapper,
.warpper{
  overflow: hidden;
}
h1  {
  size: 75px;
  color: #ffffff;
}
h2 {
  size: 30px;

}
a {
  text-decoration: none;
}

/*primary-btn */
.primary-btn {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: none;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  width: 12rem;
  height: auto;
}
.primary-btn .circle {
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 1.625rem;
  transition: .3s cubic-bezier(.4,.4,0,1);
}
.primary-btn .circle .icon {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
  transition: .3s cubic-bezier(.4,.4,0,1);
}
.primary-btn .circle .icon.arrow {
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
  transition: .3s cubic-bezier(.4,.4,0,1);
}
.primary-btn .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
.primary-btn .button-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  transition: .3s cubic-bezier(.4,.4,0,1);
}
.primary-btn:hover .circle {
  width: 100%;
}

.primary-btn:hover .circle .icon.arrow {
  background: #fff;
  transform: translate(1rem, 0);
}

.primary-btn:hover .button-text {
  color: #fff;
}

/*green*/
.bg-greengrade {
  background: linear-gradient(91.4deg, #2A5047 0.93%, #3A8963 79.31%);
}

.sub_page_mv {
  width: 100%;
  aspect-ratio: 375/454;
  background-size: cover;
  background-position: center center;
}

.ourdetail .loop_images {
  display: flex;
  overflow: hidden;
}
.ourdetail .loop_images_box {
  display: flex;
  animation: ourdetail-loop-list 70s linear infinite;
}
.ourdetail .loop_images_item {
  width: calc(100vw / 2.5);
}
@keyframes ourdetail-loop-list {
  from {
      transform: translateX(0);
  }
  to {
      transform: translateX(-100%);
  }
}

/*== 背景が流れる（斜め） */
.bgskew::before {
  content: "";
  /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: -130%;
  /*色や形状*/
  background: #357266;
  width: 120%;
  height: 100%;
  transform: skewX(-25deg);
  z-index: 2;
}

.view_pc {
  display: block;
}
.view_sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .view_pc {
    display: none;
  }
  .view_sp {
    display: block;
  }
}

/*hoverした時のアニメーション*/
.bgskew:hover::before {
  animation: skewanime 0.5s forwards; /*アニメーションの名前と速度を定義*/
}

@keyframes skewanime {
  100% {
    left: -10%; /*画面の見えていない左から右へ移動する終了地点*/
  }
}

/******************
　　　TOPページ
******************/
.wrapper {
  width: 100%;
}
.white-arrow {
  position: relative;
}
.white-arrow{
  position: absolute;
  width: 80px;
  height: 3px;
  background: #fff;
  vertical-align: middle;
}
.white-arrow::after{
  position: absolute;
  content: "";
  top: -11.5px;
  right: -28px;
  border: 13px solid;
  border-color:transparent;
  border-left: 15px solid #fff;
}

/**   header   **/
/* 背景動画 */
.video_grayscale  {
  filter: brightness(80%);
}

/** 画像切替アニメーション用css **/
.fade-img-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit:cover;
}
.fade-video-box video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit:cover;
}

@keyframes zoomDown {
  0% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1); /* 拡大率 */
  }
}
.add-animation {
  animation: zoomDown 10s linear 0s normal both;
}

nav {
  transform: translateY(-100%);
  animation: navDown 1.6s cubic-bezier(.47,.16,.24,1) 1.5s normal forwards;
}
@keyframes navDown {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

/* ニュースのニョキっってところの再現 */
.top_main_up {
  transform: scale(0.9444444444) translateY(-2.8%);
  animation-name:topMainUp;
  animation-duration:1.6s;
  animation-delay: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.47,.16,.24,1);
}
@keyframes topMainUp {
0%{
  opacity: 0;
  transform: scale(0.9444444444) translateY(-2.8%);
}
100%{
  opacity: 1;
  transform: scale(0.9444444444) translateY(-3.8%);
}
}

.resize_top_main {
  animation-name:resizeTopMain;
  animation-duration:1s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.47,.16,.24,1);
}
@keyframes resizeTopMain {
  0%{
    transform: scale(0.9444444444) translateY(-3.8%);
  }
  100%{
    transform: scale(1) translateY(0);
    border-radius: 0;
  }
  }

/**  news  **/
.top_news_ttl {
  position: relative;
}
.top_news_ttl::before {
  content: '';
  margin-right:23px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
  background-color: #EDA24B;
  position: absolute;
}

.news-tab-up {
    opacity: 0;
    transform: translateY(50px);
    animation-name:newsTabUp;
    animation-duration:1.6s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.26,.06,0,1);
}
@keyframes newsTabUp {
  0%{
    opacity: 0;
    transform: translateY(50px);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
  }
}


/**  aboutus  **/
.aboutus-textfield {
  aspect-ratio: 2/1;
}
/*
.aboutus-textfield a:before {
  content: '';
  display: inline-block;
  margin-right:10px;
  width: 24px;
  height: 24px;
  background-image: url('../images/aboutus-icon.png');
  background-size: contain;
  vertical-align: middle;
}
*/
/**  works  **/

/* @media screen and (-webkit-min-device-pixel-ratio:2),(min-resolution: 2dppx){
  .works-bg {
    height: 50%;
    padding-top: 525px;
    background-size: 100%;
    background-image: url(../images/works-bg@2x.png);
    animation: scroll-left012x 50s linear infinite;
  }
  @keyframes scroll-left012x {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 2878px 0;
  }
  }
} */

.top_wrapper .works .loop_images {
  display: flex;
  gap: 14px;
  overflow: hidden;
  height: 525px;
  width: 100%;
}
.top_wrapper .works .loop_images_box {
  display: flex;
  gap: 14px;
  animation: ourdetail-loop-list 40s linear infinite;
  transform: translateX(0);
}
.top_wrapper .works .loop_images_item {
  width: 353px;
}
.top_wrapper .works .loop_images_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
}
@keyframes ourdetail-loop-list {
  from {
      transform: translateX(0);
  }
  to {
      transform: translateX(-100%);
  }
}
@media screen and (max-width: 640px) {
  .top_wrapper .works .loop_images {
    height: 300px;
  }
  .top_wrapper .works .loop_images_item {
    /* aspect-ratio: 353/560; */
    width: 189px;
  }
}

.state-bg {
  background-image: url(../images/state-bg.jpg);
}

@media screen and (-webkit-min-device-pixel-ratio:2),(min-resolution: 2dppx){
  .state-bg {
    background-image: url(../images/state-bg@2x.jpg);
  }
}

@media screen and (max-width: 768px) {
 .state-bg h3 {
  position: relative;
 }
 .state-bg h3::after {
  content: '';
  position: absolute;
  width: 44%;
  height: 2px;
  background-color: #fff;
  bottom: -15%;
  left: 50%;
  transform: translateX(-50%);
 }
}

/**  ourdetail  **/


/**  state02 **/
.state02-bg {
  background-image: url(../images/state02-bg.jpg);
}
@media screen and (-webkit-min-device-pixel-ratio:2),(min-resolution: 2dppx){
  .state02-bg {
    background-image: url(../images/state02-bg@2x.jpg);
  }
}

/**  recruit  **/
.top_wrapper .top_recruit .loop_images {
  display: flex;
  overflow: hidden;
  width: 100%;
}
.top_wrapper .top_recruit .loop_images_box {
  display: flex;
  transform: translateX(-100%);
  animation: ourdetail-loop-list 40s linear infinite;
}
.top_wrapper .top_recruit .loop_images_item {
  aspect-ratio: 398/265;
  width: calc(100vw / 3);
}
.top_wrapper .top_recruit .loop_images_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes ourdetail-loop-list {
  from {
      transform: translateX(-100%);
  }
  to {
      transform: translateX(0%);
  }
}

.green02-arrow {
  position: relative;
}
.green02-arrow {
  position: absolute;
  width: 80px;
  height: 3px;
  background: #357266;
  vertical-align: middle;
}
.green02-arrow::after{
  position: absolute;
  content: "";
  top: -11.5px;
  right: -28px;
  border: 13px solid;
  border-color:transparent;
  border-left: 15px solid #357266;
}

/* yamanushi
.yamanushi-icon p:before {
  content: '';
  display: inline-block;
  margin-right:0px;
  width: 40px;
  height: 40px;
  background-image: url('../images/yamanushi-icon@2x.png');
  background-size: contain;
  vertical-align: middle;
  background-repeat: no-repeat;
}
*/

/* blog */
.blog-bg {
  background-image: url(../images/blog-bg.jpg);
  background-size: cover;
  background-position: center center;
}
@media screen and (-webkit-min-device-pixel-ratio:2),(min-resolution: 2dppx){
  .blog-bg {
    background-image: url(../images/blog-bg@2x.jpg);
  }
}
.blog-list li {
  border-bottom: solid 3px #B6B6B6;
}
.blog-list li:last-child {
  border-bottom: none;
}
.white-arrow {
  position: relative;
}
.green02-arrow {
  position: absolute;
  width: 80px;
  height: 3px;
  background: #357266;
  vertical-align: middle;
}
.green02-arrow::after{
  position: absolute;
  content: "";
  top: -11.5px;
  right: -28px;
  border: 13px solid;
  border-color:transparent;
  border-left: 15px solid #357266;
}
/** news **/
.news-content-list li {
  border-top: solid 1px#666666;
}
.news-content-list li:last-child {
  border-bottom: solid 1px#666666;
}

/** contact **/
.top_footer {
  background-image: url(../images/recruit-bg01.jpg);
  background-size: cover;
}
@media screen and (-webkit-min-device-pixel-ratio:2),(min-resolution: 2dppx){
  .top_footer {
    background-image: url(../images/recruit-bg01.jpg);
    background-size: cover;
  }
}
.top_contact-ttl {
  position: relative;
}
.top_contact-ttl::after {
  content: '';
  margin-right:10px;
  top: 50%;
  left: 380px;
  transform: translateY(-50%);
  width: 80px;
  height: 5px;
  background: linear-gradient(94.72deg, #F17B38 0.6%, #EDA24B 98.66%);
  position: absolute;
}
@media screen and (max-width: 640px) {
  .top_contact-ttl::after {
    left:160px;
    width: 35px;
    height: 2px;
  }
}
/******************
　　　Recruitページ
******************/
.recruit_slide-bg {
  background-image: url(../images/slide-text@2x.png);
  width: 3393px;
  padding-top: 79px;
  background-size: 100%;
  background-repeat: repeat-x;
  animation: scroll-right02 100s linear infinite;
  margin: 50px 0 60px;
}
@keyframes scroll-right02 {
  from {
    background-position: 3358px 0;
  }
  to {
    background-position: 0 0;
  }
}

/* 採用topのbtn */
.recruit_botton {
  font-weight: bold;
  background: transparent;
  position: relative;
  z-index: 1;
  transition: .3s;
}
.recruit_botton ::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: linear-gradient(94.72deg, #F17B38 0.6%, #EDA24B 98.66%);
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease .3s;
}
.recruit_botton :hover {
  color: #fff;
}
.recruit_botton :hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}

/* 新卒のマイナビのbtn */
.recruit-1_botton {
  font-size: 16px;
  font-weight: bold;
  background: transparent;
  position: relative;
  z-index: 1;
  transition: .3s;
}
.recruit-1_botton ::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: linear-gradient(94.72deg, #F17B38 0.6%, #EDA24B 98.66%);
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease .3s;
}
.recruit-1_botton :hover {
  color: #fff;
}
.recruit-1_botton :hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}

/** 画像切替アニメーション用css **/

@keyframes recSlide {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(100px);
  }
}
.rec-add-animation {
  animation: recSlide 7s linear 0s normal both;
}


/******************
　　　newsページ
******************/

.news_tab p {
  cursor: pointer;
  padding-left: 30px;
  position: relative;
}

.news_tab p::before,
.news_tab p::after {
  content: "";
  display: block;
  border-radius: 50%;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}

.news_tab p::before {
  background-color: #fff;
  border: 1px solid #357266;
  height: 20px;
  width: 20px;
  left: 5px;
}

.news_tab p::after {
  background-color: #357266;
  opacity: 0;
  height: 16px;
  width: 16px;
  left: 7px;
}
.news_tab .active::after {
  opacity: 1;
}
.news_pages_icon::before {
  content: '';
  display: inline-block;
  margin-right:10px;
  width: 24px;
  height: 24px;
  background-image: url('../images/news/news_pages_icon.png');
  background-size: contain;
  vertical-align: middle;
}
@media screen and (max-width: 480px) {
  .news_pages_icon::before {
    width: 15px;
    height: 15px;
  }
}
/******************
　　　mvvページ
******************/
.mvv_sec-titl {
  position: relative;
  margin-left: 20px;
}
.mvv_sec-titl::before {
  content: '';
  margin-right:10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  top: 50%;
  left: -15px;
  transform: translateY(-50%);
  background-color: #357266;
  position: absolute;
}

.vision-bg {
  background-image: url(./images/mvv/sec02-i01.png;)
}
@media screen and (-webkit-min-device-pixel-ratio:2),(min-resolution: 2dppx){
  .vision-bg {
    background-image: url(../images/mvv/sec02-i01@2x.png);
  }
}

.vertical_writing{
  writing-mode: vertical-rl; /* 縦書きにする */
  text-orientation: upright;
}
.page_mvv .gradient-circle {
  position: relative;
  font-size: 24px;
}
.page_mvv .gradient-circle::before {
  position: absolute;
  top: -55px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Impact';
  font-size: 16px;
  color: #fff;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, #31534B -9.09%, #3A8964 100%);
  border-radius: 50%;
}
.page_mvv .gradient-circle-pc {
  position: relative;
  font-size: 40px;
}
.page_mvv .gradient-circle-pc::before {
  position: absolute;
  top: 50%;
  left: -50px;
  transform: translateY(-50%);
  font-family: 'Impact';
  font-size: 24px;
  color: #fff;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, #31534B -9.09%, #3A8964 100%);
  border-radius: 50%;
}
.page_mvv .hyphen {
  position: relative;
}
.page_mvv .hyphen::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 10px;
  background-color: #343434;
}
_::-webkit-full-page-media, _:future, :root .page_mvv .hyphen::before {
  left: -18px;
  }

.page_mvv .hyphen-pc {
  position: relative;
  vertical-align: middle;
}
.page_mvv .hyphen-pc::before {
  content: '';
  position: absolute;
  top: 50% ;
  left: -22px;
  transform: translateY(-50%);
  width: 15px;
  height: 1px;
  background-color: #343434;
}

/******************
　　　aboutus
******************/
.aboutus-ttl-deco::before { /* 棒の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -27px; /* 要素の右からの距離 */
  width: 20px;
  height: 2px;
  background: #000000;
}

/******************
　　　ourdetail
******************/
.ourdetail_table01 th{
  background-color: #357266;
  padding: 5px 20px;
}


/******************
　　　jQuery アニメーション
******************/

/* フェイド・イン */
.fade-in {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}
.fade-num-2 {
  transition-delay: 0.2s;
}
.fade-num-3 {
  transition-delay: 0.4s;
}
.fade-num-4 {
  transition-delay: 0.6s;
}

.fade-in-up {
  transform: translate(0, 50px);
}

.fade-in-down {
  transform: translate(0, -50px);
}

.fade-in-left {
  transform: translate(-50px, 0);
}

.fade-in-right {
  transform: translate(50px, 0);
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}


/* スライダー 左から右 */
.slider-left {
  transform: translateX(-100%);
}
.slidePlay-left {
  animation-name: playleft;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  opacity: 1 !important;
}
@keyframes playleft {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}
/* スライダー 右から左 */
.slider-right {
  transform: translateX(200%);
}
.slidePlay-right {
  animation-name: playright;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  position: relative;
  opacity: 1 !important;
}
@keyframes playright {
  from {
    transform: translateX(200%);
  }

  to {
    transform: translateX(0);
  }
}

.clip-diagonal-up,
.clip-diagonal-up-slow {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
}

.play-clip-diagonal-up {
  animation-name: playClipDiagonalUp;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  position: relative;
  opacity: 1 !important;
}

.play-clip-diagonal-up-slow {
  animation-name: playClipDiagonalUp;
  animation-delay: 2s;
  animation-duration: 4s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  position: relative;
  opacity: 1 !important;
}
@keyframes playClipDiagonalUp {
  from {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }

  to {
    webkit-clip-path: inset(0);
    clip-path: inset(0);
  }
}
.clip-diagonal-left {
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
}
.play-clip-diagonal-left {
  animation-name: playClipDiagonaLeft;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  position: relative;
  opacity: 1 !important;
}

@keyframes playClipDiagonaLeft {
  from {
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
  }

  to {
    webkit-clip-path: inset(0);
    clip-path: inset(0);
  }
}

/* スライダー 上から下 */
.top_mvv-arrow {
  transform: translateY(-110%);
}
.slidePlay-bottom {
  animation-name: playbottom;
  animation-delay: 2.5s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  position: relative;
  opacity: 1 !important;
}
@keyframes playbottom {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0%);
  }
}


/** 　タブ切り替え **/
.mvv .sec02 .tab {
  cursor: pointer;
  border-bottom: 4px solid #9f000c;
}
.mvv .sec02 .tab:hover {
  margin-top: 3px;
  border-bottom: 2px solid #9f000c;
  margin-bottom: -3px;
}

.panel {
  display: none;
}
.panel.active {
  display: block;
  animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
  from {
    opacity: 0;
  }
  to {
     opacity: 1;
  }
}
slidePlay-left {
  animation-name: playleft;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  opacity: 1 !important;
}
@keyframes playleft {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

.arrow-path {
  mask: url(#arrow-mask);
}

#arrow-mask {
  stroke-dashoffset:1750;
  stroke-dasharray:1750;
}

.arrow-mask-move {
  animation: h-written 1s cubic-bezier(.04,.63,.26,.98) 0.4s both;
}

  @keyframes h-written {
  0% {
  stroke-dashoffset:1750;
  }

  100% {
  stroke-dashoffset:0;
  }
  }

  #arrow-mask_sp {
    stroke-dashoffset:500;
    stroke-dasharray:500;
  }
  .arrow-mask-move_sp {
    animation:h-written_sp 1s;
    animation-fill-mode : both;
    animation-timing-function: cubic-bezier(.04,.63,.26,.98);
    animation-delay: 0.4s;
  }

    @keyframes h-written_sp {

    0% {
    stroke-dashoffset:500;
    }
    100% {
    stroke-dashoffset:0;
    }
    }

  /*========= ページトップのためのCSS ===============*/
  .page-top-right {
    display: none;
  }
  .page-top-right a{
    color:#fff;
    text-align: center;
    display: block;
    text-decoration: none;
    padding:20px;
    text-transform: uppercase;
    transition: all 0.3s;
  }

  .page-top a:hover{
    opacity: 0.6;
    transform: translateY(-10%);
  }

  .page-top-bottom-arrow {
    transition-duration: .15s;
  }
  .page-top-bottom:hover .page-top-bottom-arrow {
    transform: translate(-50%, -60%);
  }
.go-to-mvv {
  animation: goToMvv 0.5s linear 1.5s normal both;
}

@keyframes goToMvv {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/***　液体シェイプ ***/
.c-object.-fill03 {
  height: min(13.1632653061vw + 111.887755102px,322.5px);
  left: 16%;
  margin-top: max(-6.5816326531vw + -55.943877551px,-161.25px);
  top: 55%;
  width: min(13.1632653061vw + 111.887755102px,322.5px);
}
.c-object {
  opacity: .6;
  pointer-events: none;
  position: absolute;
  z-index: 20;
}
.c-object__container {
  will-change: transform;
  transform: translate3d(0px, -3.79027px, 0px);
}
.c-object .inner {
  height: 100%;
  position: relative;
  width: 100%;
}
.c-object .-fill03 svg {
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
  -webkit-animation-duration: 29s;
  animation-duration: 29s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: wave-large;
  animation-name: wave-large;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.c-object svg {
  display: block;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}