@charset "UTF-8";

.ttl {
  display: inline-block;
  width: auto;
  position: relative;
  z-index: 1;
}

.ttl::after {
  display: block;
  content: '';
  width: 150%;
  height: auto;
  background: url('../img/common/deco-tri--grn.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-top: 160%;
  opacity: .2;
}

.ttl>h2 {
  font-size: 2.2vw;
  line-height: 1.4;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

/* --- 背景グリッドのスタイル --- */
.l-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  /* 画面全体を覆う */
  height: 100vh;
  /* 画面全体を覆う */
  pointer-events: none;
  /* グリッド線がクリックイベントを邪魔しないように */
  z-index: -1;
  /* メインコンテンツより下 */
  overflow: hidden;
  /* はみ出したグリッド線を隠す */
}

.l-grid__container {
  position: relative;
  /* 子要素のabsolute基準点になる */
  width: 100%;
  height: 100%;
}

/* 水平線と垂直線の共通スタイル */
.l-grid__h,
.l-grid__v {
  position: absolute;
  background-color: rgba(182, 188, 188, .25);
  transition:
    transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 1.3s ease-out;
  opacity: 0;
  /* ★重要: 最初は透明で非表示★ */
}

/* 水平線固有のスタイル */
.l-grid__h {
  left: 0;
  width: 100vw;
  height: 1px;
  transform: translateX(-100%);
}

/* 垂直線固有のスタイル */
.l-grid__v {
  top: 0;
  height: 100vh;
  width: 1px;
  transform: translateY(-100%);
}

/* ★JSで .is-animated クラスが付与された時のスタイル（アニメーションの最終状態）★ */
.l-grid__h.is-animated {
  transform: translateX(0);
  opacity: 1;
}

.l-grid__v.is-animated {
  transform: translateY(0);
  opacity: 1;
}

/* --- 動く円のスタイル --- */
.moving-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: rgba(0, 255, 255, 1);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation-name: oscillateY;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

/* 上下往復アニメーションのキーフレーム */
@keyframes oscillateY {
  0% {
    transform: translateY(0);
  }

  /* 往復する高さ*/
  100% {
    transform: translateY(20vh);
  }
}

/*----------------------------------------------------
  fv
----------------------------------------------------*/
.fv {
  width: 100%;
  height: auto;
  position: relative;
}

.fv::after {
  display: block;
  content: '';
  width: 100%;
  height: 0;
  padding-top: 52.25%;
}

.fv-logo--stroke {
  width: 60%;
  top: -20%;
  left: -20%;
  position: absolute;
}

.fv-movieWrap {
  width: 95%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 2.5%;
}

.fv-movie {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 20px;
}

.fv-movie::after {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 20px;

}

.fv-movie>video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

#noiseCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0;
  border-radius: 20px;
}

.fv-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.fv-inner {
  width: 80%;
  height: auto;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.h1-ttl {
  order: 3;
  font-weight: 400;
  font-size: 1.6rem;
  opacity: 0;
  transform: translateY(20px);
  text-align: center;
}

.fv-lead {
  font-size: 2.0vw;
  text-align: center;
  line-height: 1.6;
  order: 1;
}

.flip-text {
  perspective: 1000px;
  display: inline-block;
  visibility: hidden;
}

/* JavaScriptで追加される各文字の<span>要素 */
.flip-text span {
  display: inline-block;
  opacity: 0;
  transform: rotateY(-90deg);
  transform-origin: center center;
  backface-visibility: hidden;
  padding: 0.05em 0.1em;
  box-sizing: border-box;
}

/* アニメーション前の状態（初期値） */
.text-animation-target {
  text-align: center;
  color: #fff;
  font-size: 5.5vw;
  line-height: 1.4;
  font-weight: 500;
  position: relative;
  z-index: 2;
  order: 2;
}

.text-animation-target br:nth-of-type(2) {
  display: none;
}

.text-animation-target span {
  display: inline-block;
  opacity: 0;
  transform: scale(1.1) translate(4px, 4px);
  padding: 0 1.5px;
  color: transparent;
  transition: all 0.6s ease-in-out;
}

.text-animation-target.is-animated span:nth-of-type(18) {
  margin-right: 40px !important;
}

.text-animation-target.is-animated span {
  animation-name: anim-text-color;
  animation-duration: .6s;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

/* 色違いのアニメーションが必要な場合は、.is-animated-pink などとして別途定義 */
.text-animation-target.is-animated-pink span {
  animation-name: anim-text-pink;
  animation-duration: .6s;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.text-animation-target.is-animated-aqua span {
  animation-name: anim-text-aqua;
  animation-duration: .6s;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}


/* キーフレーム定義 */
/* fillをcolorに変更し、transformも加える */
@keyframes anim-text-color {
  0% {
    opacity: 0;
    color: transparent;
    transform: scale(1.1) translate(4px, 4px);
  }

  33% {
    opacity: 1;
    color: #B6F1F1;
  }

  /* ピンク */
  34% {
    opacity: 1;
    color: #00CED1;
  }

  /* 青 */
  66% {
    opacity: 1;
    color: #00CED1;
  }

  /* 青を維持 */
  67% {
    opacity: 1;
    color: #fff;
    transform: scale(1) translate(0);
  }

  /* 濃い青、変形を解除 */
  100% {
    opacity: 1;
    color: #fff;
  }

  /* 最終色 */
}

/* ピンクバージョンのキーフレーム (調整) */
@keyframes anim-text-pink {
  0% {
    opacity: 0;
    color: transparent;
    transform: scale(1.1) translate(4px, 4px);
  }

  33% {
    opacity: 1;
    color: #B6F1F1;
  }

  34% {
    opacity: 1;
    color: #00CED1;
  }

  66% {
    opacity: 1;
    color: #00CED1;
  }

  67% {
    opacity: 1;
    color: #00CED1;
    transform: scale(1) translate(0);
  }

  99% {
    opacity: 1;
    color: #545454;
  }

  100% {
    opacity: 1;
    color: #00CED1;
  }
}

/* アクアバージョンのキーフレーム (調整) */
@keyframes anim-text-aqua {
  0% {
    opacity: 0;
    color: transparent;
    transform: scale(1.1) translate(4px, 4px);
  }

  33% {
    opacity: 1;
    color: #B6F1F1;
  }

  34% {
    opacity: 1;
    color: #00CED1;
  }

  66% {
    opacity: 1;
    color: #00CED1;
  }

  67% {
    opacity: 1;
    color: #545454;
    transform: scale(1) translate(0);
  }

  100% {
    opacity: 1;
    color: #00CED1;
  }
}

.fv-ttl {
  width: auto;
  height: 100%;
  position: absolute;
  top: 8%;
  right: 7.5%;
}

.fv-ttl>svg {
  width: 200%;
  position: absolute;
  top: -50px;
  left: 45%;
  transform: translate(-50%, 0);
}

.fv-ttl>h2 {
  width: auto;
  height: 55%;
  position: relative;
  z-index: 1;
}

.fv-ttl>h2>img {
  width: auto;
  height: 100%;
}

.wrapper {
  position: relative;
}

.shape-tri {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 10px;
  pointer-events: none;
}

.scrolldown__wrap {
  width: auto;
  height: 40%;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 5%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.scrolldown__wrap>span {
  color: #fff;
  font-size: .8vw;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  margin-bottom: 10px;
}

.scrolldown {
  position: relative;
  height: 80px;
}

.scrolldown::before {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00a0a0;
  animation: circlemove 1.6s ease-in-out infinite, cirlemovehide 1.6s ease-out infinite;
}

.scrolldown::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 80px;
  border-left: 1px dashed #fff;
}

@keyframes circlemove {
  0% {
    bottom: 80px;
    background: #00a0a0;
  }

  100% {
    bottom: -5px;
    background: #fff;
  }
}

@keyframes cirlemovehide {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  80% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
  }
}

/*----------------------------------------------------
  about
----------------------------------------------------*/
.about {
  height: auto;
  position: relative;
}

.about .container {
  width: 80%;
}

.box-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.box {
  width: 30px;
  height: 160px;
  background-color: transparent;
  overflow: hidden;
  position: absolute;

}

.box1 {
  top: 15%;
  left: 60%;
}

.vc-box-bg .box1 {
  top: -5%;
  left: 80%;
}

.box2 {
  top: 60%;
  left: 2.5%;
  z-index: -1;
}

.vc-box-bg .box2 {
  left: -5%;
}

.box3 {
  top: 65%;
  left: 80%;
}

.vc-box-bg .box3 {
  top: 75%;
  left: 100%;
}


.final-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .05);
  transform: translateY(-100%);
}

.box3 .final-overlay {
  background-color: rgba(0, 160, 160, .2);
  /* 例: マゼンタなど、変えたい色を指定 */
}

.about-col {
  display: flex;
  justify-content: space-around;
  position: relative;
  z-index: 1;
}

.about-inner {
  width: 47.5%;
}

.about-txt {
  font-size: 1.18vw;
  font-weight: 500;
}

.about-imgWrap {
  width: 50%;
  display: flex;
  justify-content: space-around;
}

.about-img {
  width: 40%;
}

.about--sp {
  display: none;
}

.about-img--left {
  margin-top: 100px;
}

/*----------------------------------------------------
 summary
----------------------------------------------------*/
.summary {
  height: auto;
  position: relative;
  padding: 0 !important;
}

.summary::after {
  display: block;
  content: '';
  width: calc(100% - 60px);
  height: 100%;
  background: rgba(218, 221, 221, .8);
  backdrop-filter: blur(5px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.summary-ttl {
  position: absolute;
  top: 20px;
  right: 4.5%;
  z-index: 2;
}

.summary-wrapper {
  position: relative;
  overflow: hidden;
  padding: 20vh 0 17.5vh 0;
}

.logo--fill-w {
  width: 40%;
  position: absolute;
  top: -5%;
  left: -5%;
  z-index: 1;
}

.summary .container {
  position: relative;
  z-index: 2;
}

.summary-col {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.summary-lead {
  width: 40%;
  margin-right: 5%;
}

.summary-desc {
  width: 40%;
  text-align: justify;
  font-size: 1vw;
}

.summary .link-btnWrap {
  justify-content: center;
}

.summary-link-btn:not(:last-of-type) {
  margin-right: 1%;
}

.summary-link-btn {
  width: 30%;
  height: auto;
  max-width: initial;
}

.summary-link-btn>a {
  padding: 1.5vh 0;
}

.summary-link-btn>a>img {
  order: 1;
  width: 12.5%;
}

.summary-link-btn>a>span {
  order: 2;
  font-weight: 700;
  font-size: 1.4vw;
  margin-left: 10px;
}

/*----------------------------------------------------
 service
----------------------------------------------------*/
.service {
  padding: 0 !important;
}

/*----------------------------------------------------
 vp
----------------------------------------------------*/
.vc-top {
  width: 75%;
  margin: 0 auto 15vh auto;
  position: relative;
}

.vc-top__parts {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.vc-top__parts-item {
  height: auto;
  position: absolute;
  -webkit-animation: flash 3s linear infinite;
  animation: flash 3s linear infinite;
  will-change: opacity;
}

.vc-top__parts-item1 {
  width: 8vw;
  top: -10vh;
  left: -17.5%;
}

.vc-top__parts-item2 {
  width: 6vw;
  bottom: -5vh;
  right: -20%;
  animation-delay: 1s;
}

@keyframes flash {
  0% {
    opacity: 0;
  }

  1% {
    opacity: 1;
  }

  2% {
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  6% {
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }

}

.vc-top__col {
  display: flex;
  justify-content: space-between;
}

.vc-top__img {
  width: 30%;
}

.vc--sp {
  display: none;
}

.vc-top__inner {
  width: 57.5%;
}

.vc-ttl {
  line-height: 1.4;
  margin-bottom: 30px;
}

.vc-ttl>span {
  letter-spacing: .075em;
  font-size: 1vw;
  margin-left: 5px;
}

.vc-ttl>h2 {
  font-size: 2.4vw;
}

.vc-top__txt {
  font-size: 1.1vw;
  text-align: justify;
}

.vp-top--sp {
  display: none;
}

.vc-box {
  display: flex;
  position: relative;
  padding-top: 50px;
  margin-bottom: 12.5vh;
}

.vc-box__bg {
  width: 80vw;
  position: absolute;
  top: -15%;
  left: -5%;
  transform: translateZ(0);
}

.vc-box__ttl {
  width: 25%;
  margin-right: 2.5%;
  color: #fff;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vc-box__ttl>h3 {
  display: flex;
  flex-direction: column;
  line-height: 1.6;
  font-size: clamp(2rem, 2vw, 3rem);
}

.vc-box__ttl>p {
  font-size: clamp(1.4rem, 1.4vw, 2rem);
}

.vc-box__inner {
  width: 100vw;
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}

.vc-desc {
  width: auto;
}

.vc-lead {
  width: 100%;
  height: auto;
  padding: 14px 0;
  text-align: center;
  font-size: 1.3vw;
  font-weight: 700;
}

.vc-lead>span {
  font-size: 1vw;
  margin-right: 8px;
}

.vc-inner__txt {
  width: 100%;
  line-height: 1.6;
  font-size: 1vw;
}

.vc-inner__txt>span {
  padding: 2.5px 10px;
  background: #B6BCBC;
  color: #fff;
  font-weight: 500;
}

.vc-inner__txt>p {
  margin-top: 5px;
}


/* Swiperコンテナの幅と高さ */

.swiper {
  margin-left: auto;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow: visible;
}

.swiper-wrapper {
  width: 100% !important;
}

.swiper-slide {
  height: auto;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #aaa;
  box-sizing: border-box;
  padding: 20px;
}

.vc-tv {
  width: 100%;
  height: auto;
  position: relative;
}

.vc-tv::after {
  display: block;
  content: '';
  width: 100%;
  height: 0;
  padding-top: 65%;
}

.vc-tv>img {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}

.vc-listWrap {
  width: 85%;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  margin: 0 auto;
  position: relative;
  font-size: 1vw;
}

.vc-listWrap-ttl {
  position: absolute;
  top: 0;
  right: 0;
  width: 48%;
  display: flex;
  align-items: center;
}

.vc-listWrap-ttl::before {
  display: block;
  content: '';
  flex: 1;
  border-top: 2px dashed #001616;
  margin-right: 8px;
}

.vc-listWrap-ttl>h4 {
  font-size: clamp(2rem, 1.4vw, 3rem);
}

.vc-list {
  width: 48%;
  position: relative;
  z-index: 1;
}

.vc-list__box {
  display: flex;
  justify-content: space-between;
  padding: 30px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  background: rgba(255, 255, 255, .8);
  margin-bottom: 2.5vh;
}

.vc-list__tab {
  width: 15%;
  font-weight: 700;
}

.vc-list__box>ul {
  width: 80%;
}

/*----------------------------------------------------
 ent
----------------------------------------------------*/
.ent-bg {
  width: 105vw;
  position: absolute;
  top: -5vh;
  left: 50%;
  transform: translate(-50%, 0);
}

.ent-col {
  width: 85%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.ent__parts {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.ent__parts-item {
  position: absolute;
  height: auto;
  position: absolute;
  -webkit-animation: flash 3s linear infinite;
  animation: flash 3s linear infinite;
  will-change: opacity;
}

.ent__parts-item1 {
  top: -5vh;
  left: 48%;
  width: 8vw;
}

.ent__parts-item2 {
  top: 55vh;
  left: 35%;
  width: 6vw;
  animation-delay: 1s;
}

.ent-inner {
  width: 50%;
}

.ent-txt {
  width: 100%;
  margin-bottom: 30px;
  font-size: 1.1vw;
  text-align: justify;
}

.ent-link {
  width: 50%;
}

.ent-link>a {
  width: 100%;
  height: auto;
  padding: 1.75vh 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1vw;
}

.ent-imgWrap {
  width: 45%;
  border: 3px solid #485858;
  clip-path: inset(0 0 0 round 20px);
  overflow: hidden;
}

.ent--sp {
  display: none;
}

.ent-img {
  width: 100%;
  overflow: hidden;

}

/*----------------------------------------------------
 news
----------------------------------------------------*/
.news {
  padding-top: 0 !important;
}

.news .container {
  border-bottom: 2px dashed #969F9F;
}

.news-ttlWrap {
  display: flex;
  align-items: center;
}

.news-ttlWrap::after {
  display: block;
  content: '';
  flex: 1;
  border-top: 2px dashed #969F9F;
  margin-left: 8px;
}

.news-list {
  width: 95%;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 4vh auto;
}

.news-box {
  width: 24%;
  display: flex;
  flex-direction: column;
  margin: 0 1%;
  box-sizing: border-box;
}

.news-box>a {
  display: flex;
  flex-direction: column;
}

.news-eyecatch {
  width: 100%;
  height: auto;
  position: relative;
  margin-bottom: 1.5vh;
}

.news-eyecatch::after {
  display: block;
  content: '';
  width: 100%;
  height: 0;
  padding-top: 65%;
}

.news-eyecatch>img {
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.news-inner {
  flex: 1;
}

.news-lead {
  font-size: 1.1vw;
  font-weight: 700;
}

/*----------------------------------------------------
 company
----------------------------------------------------*/
.company {
  padding: 12vh 0 !important;
  margin-top: 10vh;
}

.company::after {
  display: block;
  content: '';
  width: calc(100% - 20px);
  height: 100%;
  background: rgba(0, 0, 0, .15);
  backdrop-filter: blur(5px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loop {
  width: 100vw;
  height: auto;
  margin: 0 calc(50% - 50vw);
  position: relative;
  overflow: hidden;
}

.loop__col {
  width: 250vw;
  height: auto;
  display: flex;
  position: relative;
  z-index: 1;
}

.loop__list {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  list-style: none;
  animation: 48s linear 0s infinite normal both running infinity-scroll-left;
}

.loop__item {
  width: 44%;
  flex-shrink: 0;
}

.loop-item-img {
  width: 3%;
}

@keyframes infinity-scroll-left {
  0% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(-100%);
  }
}

.company-ttl {
  position: absolute;
  top: -1vh;
  right: 2.5%;
}

.company .container {
  position: relative;
  z-index: 1;
}

.company-col {
  display: flex;
  justify-content: space-between;
}

.company-info {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 0 auto 80px auto;
}

.company-info>dl {
  width: 49%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 1vw;
  padding: 5vh 4vw;
  box-sizing: border-box;
  background: rgba(255, 255, 255, .8);
  border: 1px solid #969F9F;
}

.company-info>dl>dt {
  width: 20%;
  font-weight: 700;
}

.company-info>dl>dd {
  width: 80%;
}

#map {
  width: 100%;
  position: relative;
  border: 1px solid #969F9F;
  overflow: hidden;
}

#map::after {
  display: block;
  content: '';
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}

#map iframe {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  filter: grayscale(1)
}

/*----------------------------------------------------
 contact
----------------------------------------------------*/
.contact {
  padding: 20vh 0;
}

.contact-link {
  text-align: center;
  margin: 0 auto;
  position: relative;
}

.contact-link>a {
  display: inline-flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 auto;
}

.contact-link>a::after {
  display: inline-block;
  content: '';
  width: 150%;
  height: auto;
  background: url('../img/common/deco-tri--grn.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-top: 160%;
  opacity: .4;
  animation: rotateY 5s infinite linear;
}

@keyframes rotateY {
  0% {
    transform: translate(-50%, -50%) rotateY(0deg);
  }

  50% {
    transform: translate(-50%, -50%) rotateY(180deg);
  }

  100% {
    transform: translate(-50%, -50%) rotateY(360deg);
  }
}

.contact-link__main {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.1vw;
  position: relative;
  z-index: 1;
}

.contact-link__main>img {
  display: inline-block;
  width: 14px;
  margin-left: 8px;
}

.contact-link__en {
  font-size: 2.6vw;
  line-height: 1.4;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

@media screen and (max-width:1280px) {}

@media screen and (max-width:1024px) {}

@media screen and (max-width:896px) {
  .fv::after {
    padding-top: 80%;
  }

  .fv-lead {
    font-size: 2.4vw;
  }

  .text-animation-target {
    font-size: 7vw;
    margin-bottom: 30px;
  }

  .text-animation-target.is-animated span:nth-of-type(18) {
    margin-right: 20px !important;
  }

  /*---about---*/
  .about .container {
    width: 70%;
  }

  .about-ttl {
    position: absolute;
    top: 5%;
    left: 5%;
  }

  .about-col {
    flex-direction: column;
  }

  .about--pc {
    display: none;
  }

  .about--sp {
    display: flex;
    width: 80%;
    margin: 0 auto 50px auto;
  }

  .about-inner {
    width: auto;
  }

  .about-txt {
    font-size: 2rem;
  }

  /*---summary---*/
  .summary-col {
    flex-direction: column;
    align-items: center;
  }

  .summary-lead {
    width: 70%;
    margin-right: 0;
    margin-bottom: 30px;
  }

  .summary-desc {
    width: 70%;
    font-size: 1.8rem;
  }

  .summary-link-btn {
    width: 40%;
  }

  .summary-link-btn>a>span {
    font-size: 2rem;
  }

  /*---vc---*/
  .vc-top {
    width: 85%;
    margin-bottom: 150px;
  }

  .vc-ttl>h2 {
    font-size: 3.4rem;
  }

  .vc-ttl>span {
    font-size: 1.4rem;
  }

  .vc-top__txt {
    font-size: 1.6rem;
  }

  .vc-box {
    margin-bottom: 100px;
  }

  .vc-box__ttl {
    width: 35%;
  }

  .vc-box__ttl>h3 {
    font-size: 2.4rem;
  }

  .vc-box__ttl>p {
    font-size: 1.4rem;
  }

  .vc-listWrap {
    width: 100%;
    font-size: 1.4rem;
  }

  .vc-top__parts-item1 {
    left: -8.5%;
  }

  .vc-top__parts-item2 {
    width: 10vw;
    bottom: -5vh;
    right: -8%;
  }

  .vc-lead {
    font-size: 1.6rem;
  }

  .vc-lead>span {
    font-size: 1rem;
  }

  .vc-inner__txt {
    font-size: 1.4rem;
  }

  .ent-col {
    align-items: center;
  }

  .ent-txt {
    font-size: 1.6rem;
  }

  .ent-link {
    width: 75%;
  }

  .ent-link>a {
    font-size: 1.6rem;
  }

  /*---news----*/
  .news-box {
    width: 48%;
  }

  .news-box:nth-of-type(n+3) {
    margin-top: 40px;
  }

  .news-lead {
    font-size: 1.8rem;
  }

  /*---company---*/
  .loop__col {
    width: 350vw;
  }

  .company-info {
    width: 100%;
    margin: 0 auto 60px auto;
    flex-direction: column;
  }

  .company-info>dl {
    width: 100%;
    font-size: 1.6rem;
    padding: 40px 60px;
  }

  .company-info>dl:nth-of-type(n+2) {
    margin-top: 20px;
  }

  /*---contact---*/
  .contact-link__en {
    font-size: 3.4rem;
  }

  .contact-link__main {
    font-size: 1.4rem;
  }
}

@media screen and (max-width:787px) {


  /*---about---*/
  .about .container {
    width: 75%;
  }

  .shape-tri {
    width: 150%;
    left: 50%;
    transform: translate(-50%, 0);
  }

  /*---vc---*/
  .vc-box__bg {
    width: 90vw;
    top: -7%;
  }

  .vc-top {
    width: 75%;
    margin: 0 auto 100px auto;
  }

  .vc-top__col {
    width: 100%;
    flex-direction: column;
  }

  .vc--sp {
    width: 60%;
    margin: 0 auto 50px auto;
  }

  .vc-top__inner {
    width: 100%;
  }

  .vc--sp {
    display: block;
  }

  .vc--pc {
    display: none;
  }

  .vc-ttl>span {
    width: 100%;
    display: flex;
    align-items: center;
  }

  .vc-ttl>span::after {
    display: block;
    content: '';
    flex: 1;
    border-top: 1px solid #ccc;
  }

  .vc-top__parts-item1 {
    width: 12vw;
  }

  .vc-top__parts-item2 {
    width: 12.5vw;
    top: 40vh;
    bottom: initial;
    right: -16%;
  }

  /*---ent---*/
  .ent-col {
    width: 75%;
    flex-direction: column;
  }

  .ent--pc {
    display: none;
  }

  .ent--sp {
    display: block;
    width: 85%;
    margin: 0 auto 50px auto;
  }

  .ent-inner {
    width: 100%;
  }

  .ent__parts-item1 {
    top: 9vh;
    left: -5%;
    width: 14vw;
  }

  .ent__parts-item2 {
    top: 73vh;
    left: 86%;
    width: 10vw;
    transform: rotateY(180deg);
  }

  /*---company---*/
  .company {
    margin-top: 0;
  }
}

@media screen and (max-width:680px) {
  .text-animation-target.is-animated span:nth-of-type(18) {
    margin-right: 14px !important;
  }

  /*---about---*/
  .about .container {
    width: 85%;
  }

  .about-txt br {
    display: none;
  }

  /*---vc---*/
  .vc-listWrap {
    width: 85%;
    margin: 0 auto;
    flex-direction: column;
  }

  .vc-listWrap-ttl {
    position: relative;
    top: initial;
    right: initial;
    width: 90%;
  }

  .vc-list {
    width: 100%;
  }

  .vc-list__box {
    padding: 20px 30px;
  }

  /*---ent---*/
  .ent-col {
    width: 80%;
  }

  /*---company---*/
  #map::after {
    padding-top: 100%;
  }
}

@media screen and (max-width:480px) {
  .ttl>h2 {
    font-size: 2rem;
  }

  /*---fv---*/
  .fv {
    height: calc(var(--vh, 1vh) * 100 - 80px);
  }

  .fv::after {
    display: none;
  }

  .fv-lead {
    font-size: 3vw;
  }

  .fv-logo--stroke {
    left: -10%;
  }

  .text-animation-target.is-animated span:nth-of-type(18) {
    margin-right: 10px !important;
  }

  .text-animation-target {
    font-size: 10vw;
  }

  .h1-ttl {
    font-size: 1.2rem;
  }

  /*---about---*/
  .summary::after {
    width: calc(100% - 40px);
  }

  .about-ttl {
    top: 4%;
    left: 15%;
  }

  .about--sp {
    width: 100%;
  }

  .about-txt {
    font-size: 1.6rem;
  }

  /*---summary---*/
  .summary-wrapper {
    padding: 150px 0 120px 0;
  }

  .logo--fill-w {
    width: 70%;
    top: -5%;
    left: -10%;
  }

  .summary-lead,
  .summary-desc {
    width: 85%;
  }

  .summary-desc {
    font-size: 1.6rem;
  }

  .summary .link-btnWrap {
    width: 80%;
    flex-direction: column;
    margin: 0 auto;
  }

  .summary-link-btn {
    width: 100%;
  }

  .summary-link-btn:not(:last-of-type) {
    margin-bottom: 8px;
  }

  .summary-link-btn>a>span {
    font-size: 1.6rem;
  }

  .service .container {
    width: 85% !important;
  }

  .vc-box__bg {
    width: 105vw;
    left: -12%;
    top: 0;
  }

  .vc-box__ttl {
    width: 55%;
  }

  .vc-box__ttl>h3 {
    font-size: 1.8rem;
  }

  .vc-box__ttl>p {
    font-size: 1.2rem;
  }

  .vc-top {
    width: 100%;
  }

  .vc-ttl>h2 {
    font-size: 3rem;
  }

  .swiper-slide {
    padding: 20px 14px;
  }

  .vc-lead {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
  }

  .vc-top__txt {
    font-size: 1.4rem;
  }

  .vc-inner__txt {
    font-size: 1.2rem;
  }

  .vc-listWrap {
    width: 100%;
  }

  .vc-list__box {
    padding: 14px 20px;
  }

  .vc-list__tab {
    width: 30%;
  }

  /*---ent---*/
  .ent-bg {
    width: 125vw;
    top: 0;
  }

  .ent-txt {
    font-size: 1.4rem;
  }

  .ent-col {
    width: 100%;
  }

  .ent-link {
    margin: 0 auto;
  }

  /*---news---*/
  .news-box {
    width: 100%;
  }

  .news-box:nth-of-type(n+2) {
    margin-top: 30px;
  }

  .company-info {
    margin-bottom: 20px;
  }

  .company-info>dl {
    padding: 20px;
    font-size: 1.4rem;
  }

  .company-info>dl>dt {
    width: 100%;
  }

  .company-info>dl>dd {
    width: 100%;
  }

  .company-info>dl>dd>ul {
    padding-left: 20px;
    box-sizing: border-box;
  }
}