@charset "UTF-8";

/*----------------------------------------top----------------------------------------*/
#top {
  --bottom-line: 25vh;
  height: 200vh;
  padding: 0;
  padding: 0 0 calc(1 * var(--bottom-line));
  margin: 0 0 calc(-3 * var(--bottom-line));
}

#top .inner {
  position: relative;
  height: 100%;
  z-index: -1;
}

#top .inner:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20vh;
  background: linear-gradient(to bottom, #000, transparent);
}

#top .logo {
  top: 25%;
}

#top .logo img {
  width: 100%;
}

#top .movie {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

#top .movie:before {
  content: "";
  position: absolute;
  /* bottom: 0; */
  top: 100%;
  left: 0;
  width: 100%;
  height: var(--bottom-line);
  background: linear-gradient(to bottom, #000, var(--bg-color));
  z-index: 1;
}

#top .movie video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#top .movie .text_box {
  width: 3840px;
  height: 1920px;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

#top .movie .text {
  top: 6.3%;
  left: 6%;
  max-width: 88%;
}

#top .scroll {
  --scroll-color: #fff;
  color: var(--scroll-color);
}

#top .scroll-text {
  font-size: 14px;
  text-align: center;
}

#top .scroll-border {
  position: relative;
  top: 10px;
  width: 100%;
  height: 100px;
  overflow: hidden;
}

#top .scroll-border::before {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 40px;
  top: 0;
  left: 0;
  right: 0;
  background: var(--scroll-color);
  animation: scrollbar 2.0s ease-in-out infinite;
  margin: auto;
}

@keyframes scrollbar {
  0% {
    height: 0;
    top: 0;
  }

  30% {
    height: 100%;
  }

  100% {
    top: 100%;
  }
}


@media screen and (max-width: 768px) {
  #top {
    height: 150vh;
    margin: 0 0 calc(-2 * var(--bottom-line));
  }

  #top .logo {
    top: 30%;
  }

  #top .logo .text {
    width: 50%;
    margin: 0 1em 1em auto;
  }

  #top .movie .text_box {
    height: 100%;
  }

  #top .movie .text {
    top: -7%;
    left: 16.77%;
    max-width: 64%;
  }
}

/* ----------------------------------------about----------------------------------------*/
#about {
  position: relative;
}

#about .flex_box {
  position: relative;
  margin: 4em auto;
}

#about .flex_box .right_content {
  width: 95%;
}

#about .flex_box .right_content h2 {
  margin: 0 auto 3em;
  text-align: right;
}

#about .flex_box .right_content h2 a {
  position: relative;
  width: 14em;
  left: calc(100% - 12em);
  gap: 0.5em;
}


@media screen and (min-width: 769px) {

  #about .flex_box .right_content h2 a:before,
  #about .flex_box .right_content h2 a:after {
    display: none;
  }
}

#about .flex_box .right_content h2 a:hover {}

#about .flex_box .right_content h2 img,
#about .flex_box .right_content h2 svg {
  height: 1.2em;
  padding: 0 0.5em 0 0;
  fill: #fff;
  transition: ease-in 0.2s;
}

#about .flex_box .right_content h2 a:hover svg {
  fill: #E97C00;
}

#about .flex_box .right_content h2:nth-child(1) svg:nth-child(1) {
  /* 5秒ごとに右に動くanimationを入れたい */
  animation: move 5s ease-in 0s infinite normal both;
}

#about .flex_box .right_content h2:nth-child(2) svg:nth-child(1) {
  /* 5秒ごとに右に動くanimationを入れたい */
  animation: move 5s ease-in 0.1s infinite normal both;
}

#about .flex_box .right_content h2:nth-child(3) svg:nth-child(1) {
  /* 5秒ごとに右に動くanimationを入れたい */
  animation: move 5s ease-in 0.2s infinite normal both;
}

#about .flex_box .right_content h2:nth-child(4) svg:nth-child(1) {
  /* 5秒ごとに右に動くanimationを入れたい */
  animation: move 5s ease-in 0.3s infinite normal both;
}

#about .flex_box .right_content h2:nth-child(5) svg:nth-child(1) {
  /* 5秒ごとに右に動くanimationを入れたい */
  animation: move 5s ease-in 0.4s infinite normal both;
}

@keyframes move {

  0%,
  10%,
  20%,
  40% {
    transform: translateX(0);
  }

  10%,
  30% {
    transform: translateX(3px);
  }
}


#about .flex_box .right_content h2 .arrow {}

#about .flex_box .right_content h2 span {
  display: inline-block;
  font-size: 0.75em;
  font-weight: 500;
  padding: 0.5em 0 0;
  transition: ease-in 0.2s;
}

#about .flex_box .right_content h2 a:hover span {
  color: #E97C00;
}

@media screen and (min-width: 769px) {

  #about .flex_box .right_content h2 span a.art_line:before,
  #about .flex_box .right_content h2 span a.art_line:after {
    display: none;
  }
}


#about .flex_box .left_content {
  width: 60%;
  max-width: 570px;
  top: 0;
  left: 0
}

#about .flex_box .left_content .box {
  --img: 10em;
  --gap: 1em;
}

#about .flex_box .left_content .box:not(:last-child) {
  margin: 0 auto 2em;
}

#about .flex_box .left_content .box .img {
  width: var(--img);
}

#about .flex_box .left_content .box .img img {}

#about .flex_box .left_content .box .text {
  width: calc(100% - var(--img) - var(--gap));
}

#about .flex_box .left_content .box .text h4 {}

#about .flex_box .left_content .box .text p {}

@media screen and (max-width: 768px) {
  #about .flex_box .right_content h2 a {
    width: auto;
    left: auto;
    justify-content: flex-start;
  }

  #about .flex_box .right_content h2 a.art_line:before {
    width: calc(100% + -1em);
  }

  #about .flex_box .left_content {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0 auto 4em;
  }

  #about .flex_box .left_content .box {
    width: 100%;
    -webkit-box-pack: center;
    justify-content: center;
  }

  #about .flex_box .left_content .box .img {
    width: 100%;
    margin: 0 auto 1em;
  }

  #about .flex_box .left_content .box .img img {
    width: 50%;
    margin: auto;
  }

  #about .flex_box .left_content .box .text {
    width: 100%;
    margin: 0 auto 0.5em;
  }

  #about .flex_box .left_content .box .text h4 {
    text-align: center;
    font-size: 5vw;
    margin: 0 auto 0.5em;
  }

  #about .flex_box .left_content .box .text p {
    text-align: center;
  }

  #about .flex_box .right_content {
    width: 100%;
  }

  #about .flex_box .right_content h2 {
    margin: 0 auto;
    text-align: left;
  }

  #about .flex_box .right_content h2:not(:last-child) {
    margin: 0 auto 3em;
  }

  #about .flex_box .right_content h2.art_bar:before {
    display: none;
  }

  #about .flex_box .right_content h2 img {
    padding: 0;
  }

  #about .flex_box .right_content h2 span {
    width: auto;
  }

  #about .flex_box .right_content h2 span a.art_line:before {
    width: calc(100% + 1em * 3);
  }

  #about .flex_box .right_content h2 span a.art_line:after {
    right: calc(-1em - 1px);
  }
}

/* statement */
.statement {
  width: 80%;
  max-width: 500px;
}

.statement h3 {
  margin: 0 0 2em;
}

.statement p {}

@media screen and (max-width: 768px) {
  .statement {
    width: 100%;
    margin: 0 auto;
  }

  .statement h3 {
    margin: 0 0 4em;
  }
}

/* ----------------------------------------product----------------------------------------*/
#product {
  overflow: hidden;
}

#product .inner {
  position: relative;
}

@media screen and (min-width: 769px) {
  #product .animation_content {
    width: calc(var(--inner) - 500px);
    position: absolute;
    top: 50%;
    right: -5%;
    -ms-transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
  }
}

#product .animation_content {
  --radius: 50%;
  --color: #004893;
  aspect-ratio: 1 / 1;
  background-color: var(--bg-color);
  text-align: center;
  z-index: -1;
}

#product .animation_content:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--bg-color));
  z-index: -1;
}

#product .animation_content:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: conic-gradient(var(--color) 0deg var(--progress, 0deg), transparent var(--progress, 0deg) 360deg);
  border-radius: var(--radius);
  z-index: -2;
  will-change: background;
}

/* 初期状態を明示的に設定 */
#product .animation_content {
  --progress: 0deg;
}

#product .animation_content .text {
  z-index: 1;
}

#product .animation_content h4 {
  font-size: 8rem;
  font-weight: 100;
}

#product .animation_content p {
  font-size: 0.875em;
}

@media screen and (max-width: 768px) {
  #product .animation_content {
    position: relative;
    left: -12.5%;
    width: 125%;
    margin: 4em auto 0;
  }

  #product .btn a {
    margin: 0 auto;
  }
}

/*----------------------------------------projects----------------------------------------*/
#projects {}

#projects .lists {
  gap: 6em;
}

#projects .lists .list {
  --width: 50%;
  --gap: 4em;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  flex-direction: row-reverse;
}

#projects .lists .list .text {
  width: var(--width);
}

#projects .lists .list .text h3 {
  position: relative;
  color: #fff;
  background: linear-gradient(to right, transparent, #004892);
  padding: 4px 0em 4px 0.5em;
  margin: 0 0 0 -0.5em;
}

#projects .lists .list .text h3:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 1em);
  border-bottom: 1.5em solid #004892;
  border-right: 0.5em solid transparent;
  z-index: -2;
}

#projects .lists .list .text h3:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.5em;
  background: linear-gradient(to right, var(--bg-color), transparent);
  z-index: -1;
}

#projects .lists .list .text p {
  color: #81C0E9;
}

#projects .lists .list .text h4 {
  margin: 2em auto;
}


#projects .lists .list .img {
  position: relative;
  width: calc(100% - var(--width) - var(--gap));
}

#projects .lists .list .img img {}

#projects .lists .list .img .empty {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #888888;
}

#projects .lists .list .img img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

#projects .lists .list .img span {
  position: absolute;
  top: -0.7em;
  right: 0.2em;
  font-size: 4em;
  font-weight: 100;
  line-height: 1;
}

@media screen and (max-width: 768px) {
  #projects {
    padding: var(--section-margin) 0 var(--section-margin) var(--side-padding);
  }

  #projects .lists .list {
    width: 100%;
    margin: 0 auto 4em;
  }

  #projects .lists .list .img {
    width: 100%;
    margin: 0 auto 2em;
  }

  #projects .lists .list .text {
    width: 100%;
    padding: 0 var(--side-padding) 0 0;
  }

  #projects .lists .list .text h3 {
    margin: 0 auto 1em;
  }

  #projects .btn {
    margin: 4em auto 0;
  }
}

/* ----------------------------------------technology----------------------------------------*/
/* #technology {}

#technology .lists {
  --num: 3;
  --gap: 2em;
  gap: var(--gap);
}

#technology .lists a {
  width: calc(100% / var(--num) - var(--gap) * (var(--num) - 1) / var(--num));
}

#technology .lists a img {}

#technology .lists a h3 {
  margin: 0.5em auto 0;
} */

/* ----------------------------------------news----------------------------------------*/
#news {}

#news #news_swiper {
  position: relative;
}

/* #news #news_swiper:before,
#news #news_swiper:after {
  content: "";
  position: absolute;
  top: 0;
  width: 10%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

#news #news_swiper:before {
  left: 0;
  background: linear-gradient(to right, var(--bg-color), transparent);
}

#news #news_swiper:after {
  right: 0;
  background: linear-gradient(to left, var(--bg-color), transparent);
} */

#news .lists a {}

#news .lists.flex {
  --num: 2;
  --gap: 2em;
  gap: var(--gap);
}

#news .lists.flex a {
  width: calc(100% / var(--num) - var(--gap) * (var(--num) - 1) / var(--num));
}

#news .lists a:hover {}

#news .lists a:hover .flex_arrow span.arrow {}

#news .lists a .img {
  position: relative;
  width: 100%;
  /* height: 100%; */
  object-fit: cover;
}

#news .lists a .img:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  color: var(--bg-color);
  font-weight: bold;
  padding: 0 0.5em 0 0.5em;
  z-index: 1;
}

#news .lists a.journal .img:before {
  content: "JOURNAL";
}

#news .lists a.news .img:before {
  content: "NEWS";
}

#news .lists a .img:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-left: 0.5em solid transparent;
  z-index: 0;
}

#news .lists a.journal .img:after {
  width: 6.5em;
  border-bottom: 1.8em solid #E97C00;
}

#news .lists a.news .img:after {

  width: 4.5em;
  border-bottom: 1.8em solid #81C0E9;
}

#news .lists a .img .empty,
#news .lists a .img img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  background-color: #888888;
}

#news .lists a .info {
  font-size: 0.875em;
  margin: 0.5em auto;
}

#news .lists a.journal .info {
  color: #E97C00;
}

#news .lists a.news .info {
  color: #81C0E9;
}

#news .lists a .info span {
  display: inline-block;
  padding: 0.2em 1em;
}

#news .lists a.journal .info .tag {
  border: 1px solid #E97C00;
}

#news .lists a.news .info .tag {
  border: 1px solid #81C0E9;
}

#news .lists a h3 {
  font-size: 1em;
  margin: 0.5em auto;
}

#news .lists a .more {}

#news .lists a .more svg {}

#news .lists a.journal .more svg {
  fill: #E97C00;
}

#news .lists a.news .more svg {
  fill: #81C0E9;
}

#news .lists a.journal .flex_arrow span.arrow {
  background-color: #E97C00;
}

#news .lists a.news .flex_arrow span.arrow {
  background-color: #81C0E9;
}

#news .lists a.journal .flex_arrow span.arrow:before,
#news .lists a.journal .flex_arrow span.arrow:after {
  background-color: #E97C00;
}

#news .lists a.news .flex_arrow span.arrow:before,
#news .lists a.news .flex_arrow span.arrow:after {
  background-color: #81C0E9;
}


@media screen and (max-width: 768px) {
  #news .lists a .img:before {
    height: 1.8em;
  }
}