@charset "utf-8";
/* CSS Document */
/* ==========================================================================
slick.js
========================================================================== */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}
.slick-slider .slick-track, .slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before, .slick-track:after {
  content: '';
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}
.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir='rtl'] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: 100%;
  border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
  display: none;
}
/* min-width
-------------------------------------------------------------------------- */
/* max-width
-------------------------------------------------------------------------- */
/* default
-------------------------------------------------------------------------- */
/* in
-------------------------------------------------------------------------- */
/* out
-------------------------------------------------------------------------- */
/* in out
-------------------------------------------------------------------------- */
/* ja
-------------------------------------------------------------------------- */
/* en
-------------------------------------------------------------------------- */
/* size
-------------------------------------------------------------------------- */
@keyframes swing1 {
  0% {
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: rotate(0deg) translateY(0);
  }
  35% {
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: rotate(5deg) translateY(-10px);
  }
  50% {
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: rotate(0deg) translateY(0);
  }
  85% {
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: rotate(-5deg) translateY(-10px);
  }
  100% {
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: rotate(0deg) translateY(0);
  }
}
@keyframes swing2 {
  0% {
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: rotate(0deg) translateY(0);
  }
  35% {
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: rotate(-5deg) translateY(-10px);
  }
  50% {
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: rotate(0deg) translateY(0);
  }
  85% {
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: rotate(5deg) translateY(-10px);
  }
  100% {
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: rotate(0deg) translateY(0);
  }
}
@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translate3d(0, -4px, 0);
  }
}
.slide-in {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.6s cubic-bezier(0.39, 0.575, 0.565, 1), transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.slide-in.is-inview {
  opacity: 1;
  transform: translateY(0);
}



.layout-container {
  position: relative;
  min-width: 120rem;
}
.layout-content {
  overflow: hidden;
}

#home {
  /* .section-home-visual
  -------------------------------------------------------------------------- */
  /* .section-home-feature
  -------------------------------------------------------------------------- */
  /* .section-home-works
  -------------------------------------------------------------------------- */
  /* .section-home-service
  -------------------------------------------------------------------------- */
  /* .section-home-knowhow
  -------------------------------------------------------------------------- */
  /* .section-home-column
  -------------------------------------------------------------------------- */
  /* .section-home-download
  -------------------------------------------------------------------------- */
}
#home .section-home-visual {
	height: 100%;
}
#home .section-home-visual * {
	height: 100%;
}
#home .section-home-visual {
  position: relative;
}
#home .section-home-visual__box {
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
#home .section-home-visual__lead {
  font-size: 2rem;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.2em;
  width: 56rem;
  padding: 0.95rem;
  border: 0.3rem solid #fff;
}
#home .section-home-visual__heading {
  font-size: 5rem;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.1em;
  margin-top: 1.8rem;
}
#home .section-home-visual__text {
  font-size: 1.6rem;
  line-height: 1.75;
  text-align: center;
  margin-top: 2.2rem;
}
#home .section-home-visual__scroll {
  position: absolute;
  bottom: -4rem;
  left: calc(50% - 140rem / 2);
  width: 140rem;
  height: 8rem;
}
#home .section-home-visual__scroll a {
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  padding-bottom: 4rem;
  transition: background-color 0.1s cubic-bezier(0.39, 0.575, 0.565, 1);
}

#home .section-home-visual__scroll a.is-on {
  background: #f7f7fb;
}
#home .section-home-visual__scroll-bar {
  position: relative;
  width: 1px;
  height: 200%;
  background: #eaeced;
}
#home .section-home-visual__scroll-bar:before {
  display: block;
  position: absolute;
  content: '';
  background: #283ca0;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  animation: bar 3s ease infinite;
}
@keyframes bar {
  0% {
    transform: scale(1, 0);
    transform-origin: center top;
  }
  40% {
    transform: scale(1, 1);
    transform-origin: center top;
  }
  41% {
    transform: scale(1, 1);
    transform-origin: center bottom;
  }
  80% {
    transform: scale(1, 0);
    transform-origin: center bottom;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: center bottom;
  }
}
#home .section-home-visual .carousel-visual__inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#home .section-home-visual .carousel-visual__image {
  display: block;
  width: 100%;
  height: 100%;
}
#home .section-home-visual .carousel-visual__image img {
  transform: scale(1.2, 1.2);
}
#home .section-home-visual .carousel-visual .slick-slide {
  opacity: 1 !important;
  line-height: 0;
  transition: none !important;
}
#home .section-home-visual .carousel-visual .slick-slide > div {
  line-height: 0;
}
#home .section-home-visual .carousel-visual .slick-slide:nth-of-type(1) {
  z-index: 998 !important;
}
#home .section-home-visual .carousel-visual .slick-slide:nth-of-type(2) {
  z-index: 997 !important;
}
#home .section-home-visual .carousel-visual .slick-slide:nth-of-type(3) {
  z-index: 996 !important;
}
#home .section-home-visual .carousel-visual .slick-slide:nth-of-type(4) {
  z-index: 995 !important;
}
#home .section-home-visual .carousel-visual .slick-slide:nth-of-type(5) {
  z-index: 994 !important;
}
#home .section-home-visual .carousel-visual .slick-slide:nth-of-type(6) {
  z-index: 993 !important;
}
#home .section-home-visual .carousel-visual .slick-slide:nth-of-type(7) {
  z-index: 992 !important;
}
#home .section-home-visual .carousel-visual .slick-slide:nth-of-type(8) {
  z-index: 991 !important;
}
#home .section-home-visual .carousel-visual .slick-slide:nth-of-type(9) {
  z-index: 990 !important;
}
#home .section-home-visual .carousel-visual .slick-slide:nth-of-type(10) {
  z-index: 989 !important;
}
#home .section-home-visual .carousel-visual .slick-slide.is-current {
  z-index: 999 !important;
}
#home .section-home-visual .carousel-visual .slick-slide.is-current .carousel-visual__inner {
  transform: translate(-100%, 0%);
  transition: transform 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 4.5s;
}
#home .section-home-visual .carousel-visual .slick-slide.is-current .carousel-visual__image {
  transform: translate(100%, 0);
  transition: transform 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 4.5s;
}
#home .section-home-visual .carousel-visual .slick-slide.is-current .carousel-visual__image img {
  animation: visualscale 8s cubic-bezier(0.39, 0.575, 0.565, 1) forwards;
}
#home .section-home-visual .carousel-visual .slick-slide.is-current + .slick-slide {
  z-index: 998 !important;
}
#home .section-home-visual .carousel-visual .slick-slide.slick-current .carousel-visual__image img {
  animation: visualscale 8s cubic-bezier(0.39, 0.575, 0.565, 1) forwards;
}
@keyframes visualscale {
  0% {
    transform: scale(1.2, 1.2);
  }
  100% {
    transform: scale(1, 1);
  }
}


.layout-content .carousel-visual__image img {
    height: 100%;
    object-fit: cover;
}