@-webkit-keyframes icon-skew-forward {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  25% {
    -webkit-transform: translate(75%, -75%);
            transform: translate(75%, -75%);
    opacity: 0;
  }
  25.1% {
    -webkit-transform: translate(-75%, 75%);
            transform: translate(-75%, 75%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 1;
  }
}

@keyframes icon-skew-forward {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  25% {
    -webkit-transform: translate(75%, -75%);
            transform: translate(75%, -75%);
    opacity: 0;
  }
  25.1% {
    -webkit-transform: translate(-75%, 75%);
            transform: translate(-75%, 75%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 1;
  }
}

@-webkit-keyframes lineMove {
  0% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
  49.9% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
  50% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
}

@keyframes lineMove {
  0% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
  49.9% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
  50% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
}

.l-kv_inner {
  background-image: url(../../images/top/l-kv_bg.webp);
  background-position: top;
  background-size: contain;
  background-repeat: repeat-x;
}

.l-kv_ttl {
  width: 104rem;
  max-width: 100%;
  margin-inline: auto;
  padding-top: 13.3rem;
}

.l-kv_img {
  width: 120.5rem;
  max-width: 100%;
  margin-top: -4rem;
  margin-inline: auto;
  padding-left: 1rem;
}

.l-kv_btn {
  display: grid;
  position: relative;
  place-items: center;
  width: 48rem;
  max-width: 100%;
  height: 7rem;
  margin-top: 7rem;
  margin-inline: auto;
  color: var(--colorWhite);
  text-align: center;
  -webkit-transition: color var(--defaultHover),background var(--defaultHover);
  transition: color var(--defaultHover),background var(--defaultHover);
}

.l-kv_btn_icon {
  position: absolute;
  top: 50%;
  right: 3.046rem;
  width: 1.7rem;
  height: 1.6rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.l-kv_bnr {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.l-kv_bnr_link {
  display: block;
  width: 108rem;
  max-width: 100%;
  height: 18rem;
  margin-top: 16rem;
  margin-inline: auto;
}

.l-intro_img {
  width: 100%;
  margin-top: -2rem;
}

.l-features {
  margin-top: -2rem;
}

.l-features_ttl {
  width: 127.1rem;
  max-width: 100%;
  margin-inline: auto;
}

.l-features_content_wrapper {
  display: grid;
  margin-top: 7rem;
  gap: 13rem;
}

.l-features_content {
  color: var(--colorWhite);
}

.l-features_content_ttl {
  position: relative;
}

.l-features_content_ttl img {
  width: 23rem;
  max-width: 100%;
}

.l-features_content_ttl::after {
  display: block;
  position: absolute;
  top: 50%;
  width: calc(100% - 23rem - 4rem);
  height: 1px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-color: var(--colorRed);
  content: "";
}

.l-features_content_column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8.2rem;
}

.l-features_content_img {
  width: 60.7rem;
  max-width: 100%;
}

.l-features_content_img img {
  width: 100%;
}

.l-features_content_img figure {
  position: relative;
}

.l-features_content_img figcaption {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
}

.l-features_content_body {
  width: 54.4rem;
  max-width: 100%;
}

.l-features_content_body_txt {
  font-style: italic;
}

.l-features_content_body_txt02 {
  margin-top: 5.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--colorGray);
}

.l-features_content_body_note {
  margin-top: 1.6rem;
}

.l-features_content:nth-child(odd) .l-features_content_ttl {
  margin-right: 3rem;
}

.l-features_content:nth-child(odd) .l-features_content_ttl img {
  margin-left: auto;
}

.l-features_content:nth-child(odd) .l-features_content_ttl::after {
  left: 0;
}

.l-features_content:nth-child(even) .l-features_content_ttl {
  margin-left: 4rem;
}

.l-features_content:nth-child(even) .l-features_content_ttl img {
  margin-right: auto;
}

.l-features_content:nth-child(even) .l-features_content_ttl::after {
  right: 0;
}

.l-features_content:nth-child(even) .l-features_content_column {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.l-features_content:nth-child(1) .l-features_content_column {
  margin-top: 6rem;
}

.l-features_content:nth-child(1) .l-features_content_body {
  margin-top: 8.5rem;
}

.l-features_content:nth-child(2) .l-features_content_column {
  margin-top: 4rem;
}

.l-features_content:nth-child(2) .l-features_content_body {
  margin-top: 2rem;
}

.l-features_content:nth-child(3) .l-features_content_column {
  margin-top: 6rem;
}

.l-features_content:nth-child(3) .l-features_content_body {
  margin-top: 10rem;
}

.l-features_content:nth-child(4) .l-features_content_column {
  margin-top: 4rem;
}

.l-features_content:nth-child(4) .l-features_content_body {
  margin-top: 10rem;
}

.l-features_content:nth-child(5) .l-features_content_column {
  margin-top: 7rem;
}

.l-features_content:nth-child(5) .l-features_content_body {
  margin-top: 3rem;
}

.l-features_btn {
  display: grid;
  position: relative;
  place-items: center;
  width: 75.8rem;
  max-width: 100%;
  height: 11rem;
  margin-top: 16rem;
  margin-inline: auto;
  border-color: var(--colorWhite);
  color: var(--colorWhite);
}

.l-features_btn_icon {
  position: absolute;
  top: 50%;
  right: 3rem;
  width: 1.9rem;
  height: 2rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.l-lineUp {
  margin-top: 23.9rem;
  color: var(--colorWhite);
}

.l-lineUp_ttl {
  width: 103.6rem;
  max-width: 100%;
  margin-inline: auto;
}

.l-lineUp_lists {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 5.5rem;
  gap: 8rem 12rem;
}

.l-lineUp_list_img {
  width: 100%;
}

.l-lineUp_list_ttl {
  margin-top: 2rem;
}

.l-lineUp_list_txt {
  margin-top: .5rem;
}

.l-lineUp_list_spec {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 3rem;
  gap: 2rem;
}

.l-lineUp_list_spec_value {
  padding: 1rem;
  border: 1px solid var(--colorWhite);
  text-align: center;
}

.l-lineUp_list_desc {
  margin-top: 2rem;
}

.l-lineUp_list_link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin-top: 2rem;
  padding-bottom: .8rem;
  overflow-x: clip;
  gap: 1.2rem;
}

.l-lineUp_list_link::after {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--colorWhite);
  content: "";
}

.l-lineUp_list_link_icon_wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: clip;
}

.l-tools {
  margin-top: 16rem;
  padding-bottom: 16rem;
}

.l-tools_ttl {
  width: 86.4rem;
  max-width: 100%;
  margin-inline: auto;
}

.l-tools_lists {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 6rem;
  gap: 2.7rem;
}

.l-tools_list {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  color: var(--colorWhite);
  text-align: center;
}

.l-tools_list_txt {
  margin-top: 2rem;
}

@media screen and (max-width: 48em) {
  .l-kv_inner {
    background-image: url(../../images/top/l-kv_bg_sp.webp);
    background-size: cover;
  }
  .l-kv_ttl {
    width: 90.13%;
    padding-top: 9.8rem;
  }
  .l-kv_img {
    width: calc(100% - 4rem);
    margin-top: 2rem;
    margin-inline: auto;
    padding-left: 0;
  }
  .l-kv_btn {
    width: calc(100% - 4rem);
    height: 6rem;
    margin-top: 8.5rem;
  }
  .l-kv_btn_icon {
    right: 1.3rem;
  }
  .l-kv_bnr_link {
    width: calc(100% - 4rem);
    margin-top: 12rem;
  }
  .l-intro_img {
    width: 100vw;
    max-width: none;
    margin-top: 5rem;
    margin-left: -2rem;
  }
  .l-features_ttl {
    width: calc(100% - 2.1rem);
  }
  .l-features_content_wrapper {
    margin-top: 6rem;
    gap: 8rem;
  }
  .l-features_content_ttl img {
    width: 15.4rem;
  }
  .l-features_content_ttl::after {
    width: calc(100% - 15.4rem - 2rem);
  }
  .l-features_content_column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1.8rem;
  }
  .l-features_content_img {
    width: calc(100% - 4rem);
    margin-inline: auto;
  }
  .l-features_content_img figcaption {
    bottom: 1.04rem;
    left: 1.08rem;
  }
  .l-features_content_body {
    width: calc(100% - 4rem);
    margin-inline: auto;
  }
  .l-features_content_body_txt02 {
    margin-top: 1.6rem;
  }
  .l-features_content:nth-child(odd) .l-features_content_ttl {
    margin-right: 0;
    margin-left: 2rem;
  }
  .l-features_content:nth-child(odd) .l-features_content_ttl img {
    margin-left: 0;
  }
  .l-features_content:nth-child(odd) .l-features_content_ttl::after {
    right: 0;
    left: auto;
  }
  .l-features_content:nth-child(even) .l-features_content_ttl {
    margin-right: 2rem;
    margin-left: 0;
  }
  .l-features_content:nth-child(even) .l-features_content_ttl img {
    margin-right: 0;
    margin-left: auto;
  }
  .l-features_content:nth-child(even) .l-features_content_ttl::after {
    right: auto;
    left: 0;
  }
  .l-features_content:nth-child(even) .l-features_content_column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .l-features_content:nth-child(1) .l-features_content_column {
    margin-top: 2rem;
  }
  .l-features_content:nth-child(1) .l-features_content_body {
    margin-top: 0;
  }
  .l-features_content:nth-child(2) .l-features_content_column {
    margin-top: 2rem;
  }
  .l-features_content:nth-child(2) .l-features_content_body {
    margin-top: 0;
  }
  .l-features_content:nth-child(3) .l-features_content_column {
    margin-top: 2rem;
  }
  .l-features_content:nth-child(3) .l-features_content_body {
    margin-top: 0;
  }
  .l-features_content:nth-child(4) .l-features_content_column {
    margin-top: 2rem;
  }
  .l-features_content:nth-child(4) .l-features_content_body {
    margin-top: 0;
  }
  .l-features_content:nth-child(5) .l-features_content_column {
    margin-top: 2rem;
  }
  .l-features_content:nth-child(5) .l-features_content_body {
    margin-top: 0rem;
  }
  .l-features_btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: calc(100% - 4rem);
    height: 7.6rem;
    margin-top: 8rem;
    padding-left: 1.6rem;
  }
  .l-features_btn_icon {
    right: 1.6rem;
    width: 1.2rem;
    height: 1.2rem;
  }
  .l-lineUp {
    margin-top: 12rem;
  }
  .l-lineUp_ttl {
    width: 28.9rem;
  }
  .l-lineUp_lists {
    grid-template-columns: auto;
    margin-top: 6rem;
    gap: 6rem;
  }
  .l-tools {
    margin-top: 12rem;
    padding-bottom: 12rem;
  }
  .l-tools_ttl {
    width: 24.1rem;
  }
  .l-tools_lists {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3.8rem 2.1rem;
  }
  .l-tools_list_txt {
    margin-top: 1rem;
  }
}

@media (hover: hover) {
  .l-kv_btn:hover {
    background: var(--colorWhite);
    color: var(--colorBlack);
  }
  .l-features_btn:hover {
    background-color: var(--colorWhite);
    color: var(--colorBlack);
  }
  .l-lineUp_list_link:hover::after {
    -webkit-animation: lineMove calc(var(--transition)*2) var(--ease) forwards;
            animation: lineMove calc(var(--transition)*2) var(--ease) forwards;
  }
  .l-lineUp_list_link:hover svg {
    -webkit-animation: icon-skew-forward calc(var(--transition)*2) var(--ease) forwards;
            animation: icon-skew-forward calc(var(--transition)*2) var(--ease) forwards;
  }
}