@charset "UTF-8";
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  color: #1B3359;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.15em;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
}

img, picture, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

svg {
  overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.5;
}

a {
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
  line-height: 1.5;
}

@media screen and (max-width: 768px) {
  body {
    font-size: 3.4667vw;
  }
}
.visually-hidden {
  clip: rect(0, 0, 0, 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.l-container {
  max-width: 108rem;
  margin-inline: auto;
}

@media screen and (max-width: 1080px) {
  .l-container {
    padding-inline: 6.4vw;
  }
}
.l-sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .l-sp {
    display: block;
  }
  .l-pc {
    display: none;
  }
}
.section-title {
  margin-bottom: 4.8rem;
  text-align: center;
  font-size: 3.6rem;
}

@media screen and (max-width: 768px) {
  .section-title {
    margin-bottom: 8.5333vw;
    font-size: 6.4vw;
  }
}
.link-text > span {
  background: linear-gradient(currentColor, currentColor) bottom left/100% 1px no-repeat;
  transition: background-size 0.3s ease, background-position 0s ease;
}
.link-text:hover > span {
  background-position: bottom right;
  background-size: 0 1px;
}

.btn {
  width: 100%;
  max-width: 48rem;
  height: 8rem;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(90deg, #f65a7a 0%, #89a8d8 50%, #3ac0dc 100%);
  color: #fff;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  position: relative;
  box-shadow: inset 0 0 0 1000px rgba(27, 51, 89, 0);
  transition: box-shadow 0.3s ease;
}
.btn::after {
  content: "";
  width: 2.6rem;
  height: 2rem;
  background: url(data:image/svg+xml;utf8,%3Csvg%20width%3D%2226%22%20height%3D%2220%22%20viewBox%3D%220%200%2026%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M14.9999%200.807617C15.3904%200.417173%2016.0234%200.417214%2016.4139%200.807617L24.8993%209.29297C24.9238%209.31744%2024.9472%209.34288%2024.9686%209.36914C25.2671%209.73554%2025.2671%2010.2644%2024.9686%2010.6309C24.9472%2010.6571%2024.9237%2010.6826%2024.8993%2010.707L16.4139%2019.1924C16.0234%2019.5829%2015.3904%2019.5829%2014.9999%2019.1924C14.6094%2018.8019%2014.6094%2018.1688%2014.9999%2017.7783L21.7782%2011H1.8075C1.25521%2011%200.807495%2010.5523%200.807495%2010C0.80754%209.44775%201.25524%209%201.8075%209H21.7782L14.9999%202.22168C14.6095%201.83115%2014.6094%201.19811%2014.9999%200.807617Z%22%20fill%3D%22white%22%2F%3E%20%3C%2Fsvg%3E) no-repeat center/contain;
  position: absolute;
  inset: 0 3rem 0 auto;
  margin: auto;
  transition: transform 0.3s ease;
}
.btn:hover {
  box-shadow: inset 0 0 0 1000px rgba(27, 51, 89, 0.15);
}
.btn:hover::after {
  transform: translateX(0.2em);
}
.btn.is-small {
  height: 4.8rem;
  padding: 0 4.4rem 0 3.2rem;
  font-size: 1.6rem;
}
.btn.is-small::after {
  width: 1.6rem;
  height: 1.2rem;
  right: 1.8rem;
}

@media screen and (max-width: 768px) {
  .btn {
    max-width: 100%;
    height: 14.9333vw;
    font-size: 4.2667vw;
  }
  .btn::after {
    width: 5.3333vw;
    height: 4.2667vw;
  }
}
/* ヘッダー */
.l-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: transparent;
  padding: 1.2rem 4.8rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  transition: background-color 0.3s ease;
}
.l-header button {
  display: none;
}
.l-header__nav {
  display: flex;
  align-items: center;
  gap: 4rem;
}
.l-header__nav ul {
  display: flex;
  align-items: center;
  gap: 4rem;
  list-style: none;
}
.l-header__nav ul li a > span {
  background: linear-gradient(currentColor, currentColor) bottom right/0% 1px no-repeat;
  transition: background-size 0.3s ease, background-position 0s ease;
}
.l-header__nav ul li a:hover > span {
  background-position: bottom left;
  background-size: 100% 1px;
}
.l-header.is-fixed {
  backdrop-filter: blur(15px);
  background-color: rgba(255, 255, 255, 0.8);
}

@media screen and (max-width: 1080px) {
  .l-header {
    height: 6.4rem;
    padding: 0 2.4rem;
  }
  .l-header__logo svg {
    width: auto;
    height: 3.6rem;
  }
  .l-header button {
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    margin-left: auto;
    border: none;
    background: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
  }
  .l-header button span {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.3s;
  }
  .l-header button span:before, .l-header button span:after {
    content: "";
    position: absolute;
    width: 2.4rem;
    height: 1px;
    background: #1B3359;
    transition: all 0.3s;
  }
  .l-header button span:before {
    top: 0.7rem;
  }
  .l-header button span:after {
    bottom: 0.7rem;
  }
  .l-header__nav {
    flex-direction: column;
    justify-content: center;
    padding: 0 0 6.4rem;
    position: fixed;
    top: 0;
    right: 0;
    width: 35%;
    height: 100vh;
    background: #FFF;
    z-index: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s ease;
  }
  .l-header__nav ul {
    flex-direction: column;
    gap: 2.44rem;
  }
  .l-header.is-open button span:before {
    transform: rotate(20deg);
    top: initial;
  }
  .l-header.is-open button span:after {
    transform: rotate(-20deg);
    bottom: initial;
  }
  .l-header.is-open nav {
    visibility: visible;
    opacity: 1;
  }
}
@media screen and (max-width: 768px) {
  .l-header__nav {
    width: 100%;
  }
}
/* ヒーローセクション */
.hero {
  background: url(/img/hero_background.webp) no-repeat center/cover #FFF;
  background: -webkit-image-set(url(/img/hero_background.avif) type("image/avif"), url(/img/hero_background.webp) type("image/webp")) no-repeat center/cover #FFF;
  background: image-set(url(/img/hero_background.avif) type("image/avif"), url(/img/hero_background.webp) type("image/webp")) no-repeat center/cover #FFF;
  padding: 13.6rem 0 9.6rem;
}
.hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hero__content {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__image {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__catch {
  margin-bottom: 3.2rem;
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.32em;
}
.hero__catch br {
  display: none;
}
.hero__catch span {
  font-size: 2.8rem;
  letter-spacing: 0.16em;
  position: relative;
  top: 0.2rem;
}
.hero .button-wrapper {
  width: 100%;
  margin-top: 4.8rem;
}

@media screen and (max-width: 1080px) {
  .hero__catch br {
    display: inline;
  }
}
@media screen and (max-width: 768px) {
  .hero {
    padding: 30vw 0 17.0667vw;
  }
  .hero__catch {
    font-size: 4.8vw;
  }
  .hero__catch span {
    font-size: 5.3333vw;
    top: 0.2667vw;
  }
}
@media screen and (max-width: 768px) {
  .hero {
    background: url(/img/sp_hero_background.webp) no-repeat center/cover #FFF;
    background: -webkit-image-set(url(/img/sp_hero_background.avif) type("image/avif"), url(/img/sp_hero_background.webp) type("image/webp")) no-repeat left 50% top 7%/100% auto #FFF;
    background: image-set(url(/img/sp_hero_background.avif) type("image/avif"), url(/img/sp_hero_background.webp) type("image/webp")) no-repeat left 50% top 7%/100% auto #FFF;
  }
  .hero__inner {
    flex-direction: column;
    gap: 8.5333vw;
    position: relative;
  }
  .hero__logo {
    max-width: 56vw;
  }
  .hero__image {
    max-width: 45.3333vw;
    position: absolute;
    inset: 20vw 0 auto 0;
    margin: auto;
  }
  .hero__catch {
    margin-bottom: 64vw;
  }
  .hero .button-wrapper {
    margin-top: 8.5333vw;
  }
}
/* 課題提起セクション */
.problem {
  padding: 9.6rem 0;
  background: #F4F6F9;
  overflow: hidden;
}
.problem__inner {
  max-width: 64rem;
  margin: 0 auto;
  position: relative;
}
.problem__inner::before, .problem__inner::after {
  content: "";
  position: absolute;
}
.problem__inner::before {
  width: 19.6rem;
  height: 26.2rem;
  background: url(/img/problem_illust_1.svg) no-repeat center/contain;
  inset: -20rem auto auto -18rem;
}
.problem__inner::after {
  width: 16.4rem;
  height: 23.2rem;
  background: url(/img/problem_illust_2.svg) no-repeat center/contain;
  inset: -15rem -17rem auto auto;
}
.problem__inner-title {
  margin-bottom: 1.6rem;
  padding: 0.8rem 0;
  background-color: #48B7CE;
  border-radius: 1rem;
}
@media screen and (max-width: 768px) {
  .problem__inner-title {
    border-radius: 5px;
  }
}
.problem__inner-title {
  color: #FFF;
  font-size: 2.4rem;
  text-align: center;
}
.problem__flow {
  display: flex;
  justify-content: center;
  gap: 3.2rem;
}
.problem__step {
  width: 20rem;
  height: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
}
@media screen and (max-width: 768px) {
  .problem__step {
    border-radius: 5px;
  }
}
.problem__step {
  border: 1px solid #1B3359;
  background-color: #FFF;
  text-align: center;
  line-height: 1.5;
  font-weight: 700;
  position: relative;
}
.problem__step.is-last {
  background-color: #1B3359;
  color: #FFF;
}
.problem__step:not(.is-last)::after {
  content: "";
  width: 1.4rem;
  height: 2.4rem;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAxNiAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1LjExNDIgMTEuMjQwN0MxNS41Nzk4IDExLjYzOTggMTUuNTc5OCAxMi4zNjAyIDE1LjExNDIgMTIuNzU5M0wzLjY1MDc5IDIyLjU4NUMzLjAwMjEyIDIzLjE0MSAyIDIyLjY4MDEgMiAyMS44MjU4TDIgMi4xNzQyMkMyIDEuMzE5ODcgMy4wMDIxMiAwLjg1ODk1OSAzLjY1MDc5IDEuNDE0OTZMMTUuMTE0MiAxMS4yNDA3WiIgZmlsbD0iIzQ4QjdDRSIvPgo8L3N2Zz4=") no-repeat center/contain;
  position: absolute;
  inset: 0 -2.4rem 0 auto;
  margin: auto;
}

@media screen and (max-width: 768px) {
  .problem {
    padding: 17.0667vw 0;
  }
  .problem h2 .sp {
    display: inline;
  }
  .problem__inner::before, .problem__inner::after {
    display: none;
  }
  .problem__inner-title {
    padding-block: 1.0667vw;
    font-size: 4.8vw;
  }
  .problem__flow {
    flex-direction: column;
    gap: 5.3333vw;
  }
  .problem__step {
    width: 100%;
    height: auto;
    padding-block: 4.2667vw;
  }
  .problem__step:not(.is-last)::after {
    transform: rotate(90deg);
    width: 3.2vw;
    height: 4.8vw;
    inset: auto 0 -5.3333vw 0;
  }
}
.gradient-wrapper {
  padding: 13.6rem 0 9.6rem;
  background: linear-gradient(180deg, rgba(246, 90, 122, 0.15) 0%, rgba(137, 168, 216, 0.15) 50%, rgba(58, 192, 220, 0.15) 100%);
  position: relative;
}
.gradient-wrapper::before {
  content: "";
  width: 20rem;
  height: 7rem;
  -webkit-mask-image: url(data:image/svg+xml;utf8,%3Csvg%20width%3D%22200%22%20height%3D%2270%22%20viewBox%3D%220%200%20200%2070%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M105.927%2065.5049C105.616%2066.3731%20105.117%2067.1714%20104.452%2067.8359C103.271%2069.0167%20101.67%2069.6796%20100%2069.6797C98.3301%2069.6797%2096.7276%2069.0167%2095.5469%2067.8359C94.8825%2067.1715%2094.383%2066.3729%2094.0723%2065.5049H94.0645C80.2004%2027.2961%2043.5794%200%200.582031%200H199.418C156.421%200%20119.8%2027.2962%20105.936%2065.5049H105.927Z%22%20fill%3D%22black%22%2F%3E%20%3C%2Fsvg%3E);
          mask-image: url(data:image/svg+xml;utf8,%3Csvg%20width%3D%22200%22%20height%3D%2270%22%20viewBox%3D%220%200%20200%2070%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M105.927%2065.5049C105.616%2066.3731%20105.117%2067.1714%20104.452%2067.8359C103.271%2069.0167%20101.67%2069.6796%20100%2069.6797C98.3301%2069.6797%2096.7276%2069.0167%2095.5469%2067.8359C94.8825%2067.1715%2094.383%2066.3729%2094.0723%2065.5049H94.0645C80.2004%2027.2961%2043.5794%200%200.582031%200H199.418C156.421%200%20119.8%2027.2962%20105.936%2065.5049H105.927Z%22%20fill%3D%22black%22%2F%3E%20%3C%2Fsvg%3E);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: #F4F6F9;
  position: absolute;
  inset: -1px 0 auto;
  margin: auto;
}
.gradient-wrapper > section:not(:first-child) {
  margin-top: 6.4rem;
  position: relative;
}
.gradient-wrapper > section:not(:first-child)::before {
  content: "";
  display: block;
  width: 10rem;
  height: 10rem;
  margin: 0 auto 6.4rem;
  -webkit-mask-image: url(data:image/svg+xml;utf8,%3Csvg%20width%3D%2299%22%20height%3D%2299%22%20viewBox%3D%220%200%2099%2099%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M49.3823%200C50.5637%203.99468e-05%2051.697%200.469171%2052.5324%201.30455C53.0026%201.77472%2053.3559%202.33962%2053.5758%202.9539H53.582C60.665%2022.4744%2076.1435%2037.9679%2095.6531%2045.0734V45.0789C95.7782%2045.1181%2095.9019%2045.1626%2096.0235%2045.213C96.5605%2045.4354%2097.049%2045.761%2097.46%2046.172C97.871%2046.583%2098.1966%2047.0716%2098.4191%2047.6086C98.6414%2048.1455%2098.7563%2048.7209%2098.7563%2049.3021C98.7563%2049.8834%2098.6415%2050.4594%2098.4191%2050.9964C98.1966%2051.5332%2097.8709%2052.0213%2097.46%2052.4322C97.049%2052.8432%2096.5605%2053.1688%2096.0235%2053.3913C95.902%2053.4416%2095.7782%2053.4855%2095.6531%2053.5246V53.5302C76.1434%2060.6357%2060.6651%2076.1298%2053.582%2095.6503H53.5758C53.3559%2096.2646%2053.0025%2096.8296%2052.5324%2097.2997C51.697%2098.135%2050.5637%2098.6042%2049.3823%2098.6042C48.2008%2098.6042%2047.0669%2098.1351%2046.2315%2097.2997C45.7614%2096.8296%2045.4079%2096.2645%2045.1881%2095.6503H45.1826C38.0985%2076.1269%2022.6168%2060.6308%203.10315%2053.5267V53.5246C2.97807%2053.4854%202.8543%2053.4416%202.73279%2053.3913C2.19576%2053.1688%201.70729%2052.8432%201.29626%2052.4322C0.885352%2052.0213%200.559625%2051.5333%200.337194%2050.9964C0.114747%2050.4594%201.84769e-08%2049.8834%200%2049.3021C2.81643e-06%2048.7209%200.114806%2048.1455%200.337194%2047.6086C0.559632%2047.0715%200.885254%2046.583%201.29626%2046.172C1.70729%2045.761%202.19576%2045.4354%202.73279%2045.213C2.85437%2045.1626%202.978%2045.1181%203.10315%2045.0789V45.0768C22.6167%2037.9727%2038.0985%2022.4772%2045.1826%202.9539H45.1881C45.4079%202.33977%2045.7615%201.77465%2046.2315%201.30455C47.0669%200.469146%2048.2008%205.72294e-05%2049.3823%200Z%22%20fill%3D%22black%22%2F%3E%20%3C%2Fsvg%3E);
          mask-image: url(data:image/svg+xml;utf8,%3Csvg%20width%3D%2299%22%20height%3D%2299%22%20viewBox%3D%220%200%2099%2099%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M49.3823%200C50.5637%203.99468e-05%2051.697%200.469171%2052.5324%201.30455C53.0026%201.77472%2053.3559%202.33962%2053.5758%202.9539H53.582C60.665%2022.4744%2076.1435%2037.9679%2095.6531%2045.0734V45.0789C95.7782%2045.1181%2095.9019%2045.1626%2096.0235%2045.213C96.5605%2045.4354%2097.049%2045.761%2097.46%2046.172C97.871%2046.583%2098.1966%2047.0716%2098.4191%2047.6086C98.6414%2048.1455%2098.7563%2048.7209%2098.7563%2049.3021C98.7563%2049.8834%2098.6415%2050.4594%2098.4191%2050.9964C98.1966%2051.5332%2097.8709%2052.0213%2097.46%2052.4322C97.049%2052.8432%2096.5605%2053.1688%2096.0235%2053.3913C95.902%2053.4416%2095.7782%2053.4855%2095.6531%2053.5246V53.5302C76.1434%2060.6357%2060.6651%2076.1298%2053.582%2095.6503H53.5758C53.3559%2096.2646%2053.0025%2096.8296%2052.5324%2097.2997C51.697%2098.135%2050.5637%2098.6042%2049.3823%2098.6042C48.2008%2098.6042%2047.0669%2098.1351%2046.2315%2097.2997C45.7614%2096.8296%2045.4079%2096.2645%2045.1881%2095.6503H45.1826C38.0985%2076.1269%2022.6168%2060.6308%203.10315%2053.5267V53.5246C2.97807%2053.4854%202.8543%2053.4416%202.73279%2053.3913C2.19576%2053.1688%201.70729%2052.8432%201.29626%2052.4322C0.885352%2052.0213%200.559625%2051.5333%200.337194%2050.9964C0.114747%2050.4594%201.84769e-08%2049.8834%200%2049.3021C2.81643e-06%2048.7209%200.114806%2048.1455%200.337194%2047.6086C0.559632%2047.0715%200.885254%2046.583%201.29626%2046.172C1.70729%2045.761%202.19576%2045.4354%202.73279%2045.213C2.85437%2045.1626%202.978%2045.1181%203.10315%2045.0789V45.0768C22.6167%2037.9727%2038.0985%2022.4772%2045.1826%202.9539H45.1881C45.4079%202.33977%2045.7615%201.77465%2046.2315%201.30455C47.0669%200.469146%2048.2008%205.72294e-05%2049.3823%200Z%22%20fill%3D%22black%22%2F%3E%20%3C%2Fsvg%3E);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  background: linear-gradient(180deg, rgba(246, 90, 122, 0.2) 0%, rgba(137, 168, 216, 0.2) 50%, rgba(58, 192, 220, 0.2) 100%);
}

@media screen and (max-width: 768px) {
  .gradient-wrapper {
    padding: 23.4667vw 0 17.0667vw;
  }
  .gradient-wrapper::before {
    width: 33.0667vw;
    height: 11.7333vw;
    top: -2px;
  }
  .gradient-wrapper > section:not(:first-child) {
    margin-top: 10.6667vw;
  }
  .gradient-wrapper > section:not(:first-child)::before {
    width: 17.0667vw;
    height: 17.0667vw;
    margin-bottom: 10.6667vw;
  }
}
/* サービスコンセプト */
.concept__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
}
.concept__title {
  margin-bottom: 3.2rem;
  background: linear-gradient(90deg, #f65a7a 0%, #89a8d8 50%, #3ac0dc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-size: 4rem;
}

@media screen and (max-width: 768px) {
  .concept__inner {
    flex-direction: column-reverse;
  }
  .concept__title {
    text-align: center;
    font-size: 7.4667vw;
  }
  .concept__logo {
    max-width: 50.6667vw;
  }
}
/* デモ動画 */
.demo-video {
  text-align: center;
}
.demo-video__lead {
  margin-top: 1.6rem;
  font-size: 1.6rem;
  color: #5a6f8a;
}
.demo-video__player {
  margin-top: 4.8rem;
  max-width: 84rem;
  margin-inline: auto;
}
.demo-video__frame {
  position: relative;
  border-radius: 1.6rem;
  overflow: hidden;
  background: #0d1b2e;
  box-shadow:
    0 2.4rem 6.4rem rgba(27, 51, 89, 0.18),
    0 0.8rem 2.4rem rgba(27, 51, 89, 0.10);
}
.demo-video__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.demo-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 3;
  transition: opacity 0.3s ease;
}
.demo-video__play svg {
  filter: drop-shadow(0 0.2rem 0.8rem rgba(0, 0, 0, 0.3));
  transition: transform 0.2s ease;
}
.demo-video__play:hover svg {
  transform: scale(1.1);
}
.demo-video__play.is-hidden {
  opacity: 0;
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .demo-video__lead {
    font-size: 3.4667vw;
  }
  .demo-video__player {
    margin-top: 8.5333vw;
  }
  .demo-video__frame {
    border-radius: 2.6667vw;
  }
}

/* 利用の5ステップ */
.steps {
  text-align: center;
  overflow: hidden;
}
.steps hgroup {
  margin-bottom: 4.8rem;
}
.steps hgroup h2 {
  margin-bottom: 2.4rem;
}
.steps__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  gap: 18rem 8rem;
}
.steps .step-card {
  max-width: 43rem;
  padding-bottom: 4rem;
  position: relative;
}
.steps .step-card::after {
  content: "";
  width: 54rem;
  height: 54rem;
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-mask-image: url(data:image/svg+xml;utf8,%3Csvg%20width%3D%22540%22%20height%3D%22540%22%20viewBox%3D%220%200%20540%20540%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M212.766%2023.7069C244.376%20-7.90227%20295.624%20-7.90233%20327.234%2023.7069L516.293%20212.766C547.902%20244.376%20547.902%20295.624%20516.293%20327.234L327.234%20516.293C295.624%20547.902%20244.376%20547.902%20212.766%20516.293L23.7069%20327.234C-7.90227%20295.624%20-7.90233%20244.376%2023.7069%20212.766L212.766%2023.7069Z%22%20fill%3D%22black%22%2F%3E%20%3C%2Fsvg%3E);
          mask-image: url(data:image/svg+xml;utf8,%3Csvg%20width%3D%22540%22%20height%3D%22540%22%20viewBox%3D%220%200%20540%20540%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M212.766%2023.7069C244.376%20-7.90227%20295.624%20-7.90233%20327.234%2023.7069L516.293%20212.766C547.902%20244.376%20547.902%20295.624%20516.293%20327.234L327.234%20516.293C295.624%20547.902%20244.376%20547.902%20212.766%20516.293L23.7069%20327.234C-7.90227%20295.624%20-7.90233%20244.376%2023.7069%20212.766L212.766%2023.7069Z%22%20fill%3D%22black%22%2F%3E%20%3C%2Fsvg%3E);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  background: linear-gradient(180deg, rgba(246, 90, 122, 0.2) 0%, rgba(137, 168, 216, 0.2) 50%, rgba(58, 192, 220, 0.2) 100%);
}
.steps .step-card:nth-child(even) {
  transform: translateY(36rem);
}
.steps .step-card__number {
  position: absolute;
  z-index: 0;
  inset: -1.6rem auto auto -7.5rem;
  color: #FFF;
  font-family: "Figtree", sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 16rem;
  line-height: 1;
  letter-spacing: -0.03em;
}
.steps .step-card__text {
  margin-top: 2.8rem;
  line-height: 1.5;
}

@media screen and (max-width: 1080px) {
  .steps__list {
    gap: 21.3333vw 5.3333vw;
  }
  .steps .step-card {
    max-width: 100%;
  }
  .steps .step-card:nth-child(even) {
    transform: translateY(36.2667vw);
  }
  .steps .step-card::after {
    width: 50.6667vw;
    height: 50.6667vw;
  }
  .steps .step-card__number {
    left: -3.7333vw;
    font-size: 11.7333vw;
  }
}
@media screen and (max-width: 768px) {
  .steps {
    overflow: visible;
  }
  .steps__list {
    grid-template-columns: 1fr;
    gap: 12.8vw;
  }
  .steps .step-card:nth-child(even) {
    transform: translateY(0);
  }
  .steps .step-card::after {
    width: 85.3333vw;
    height: 85.3333vw;
  }
  .steps .step-card__number {
    left: -4.2667vw;
    font-size: 21.3333vw;
  }
}
/* 3つの特長 */
.features__list {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  padding: 3.2rem;
  border-radius: 2rem;
}
@media screen and (max-width: 768px) {
  .features__list {
    border-radius: 10px;
  }
}
.features__list {
  background: linear-gradient(180deg, rgba(246, 90, 122, 0.2) 0%, rgba(137, 168, 216, 0.2) 50%, rgba(58, 192, 220, 0.2) 100%);
}
.features .feature-item {
  display: flex;
  align-items: center;
  gap: 3.2rem;
  padding: 4.8rem;
  border-radius: 1rem;
}
@media screen and (max-width: 768px) {
  .features .feature-item {
    border-radius: 5px;
  }
}
.features .feature-item {
  background-color: #FFF;
}
.features .feature-item__title {
  margin-bottom: 2.4rem;
  padding-left: 6.4rem;
  font-size: 2.4rem;
  position: relative;
}
.features .feature-item__title .num {
  color: #48B7CE;
  font-family: "Figtree", sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 4.8rem;
  line-height: 1;
  letter-spacing: -0.05em;
  position: absolute;
  left: 0;
  top: -0.5rem;
}
.features .feature-item__list {
  margin-left: 1.6rem;
}
.features .feature-item__list li {
  padding-left: 2.4rem;
  position: relative;
}
.features .feature-item__list li::before {
  content: "";
  width: 1.6rem;
  height: 1.6rem;
  background: url(data:image/svg+xml;utf8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Crect%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%228%22%20fill%3D%22%23EB6581%22%2F%3E%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22%23EB6581%22%2F%3E%20%3Cpath%20d%3D%22M6.6666%209.11195L10.7024%205.07611C10.8275%204.95278%2010.9749%204.89111%2011.1444%204.89111C11.314%204.89111%2011.4613%204.95323%2011.5864%205.07745C11.7115%205.20167%2011.7741%205.34923%2011.7741%205.52011C11.7741%205.691%2011.7115%205.839%2011.5864%205.96411L7.1126%2010.4419C6.98649%2010.5682%206.83782%2010.6313%206.6666%2010.6313C6.49538%2010.6313%206.34671%2010.5682%206.2206%2010.4419L4.40943%208.63078C4.2861%208.50567%204.22466%208.35767%204.2251%208.18678C4.22554%208.01589%204.28832%207.86834%204.41343%207.74411C4.53854%207.61989%204.68654%207.55778%204.85743%207.55778C5.02832%207.55778%205.17632%207.61945%205.30143%207.74278L6.6666%209.11195Z%22%20fill%3D%22white%22%2F%3E%20%3C%2Fsvg%3E) no-repeat center/97% auto;
  position: absolute;
  inset: 0.4rem auto auto 0;
}
.features .feature-item__list li + li {
  margin-top: 0.8rem;
}
.features .feature-item__image {
  width: 32rem;
  flex-shrink: 0;
}
.features .feature-item__content {
  flex: 1;
}
.features .feature-item:nth-child(even) {
  flex-direction: row-reverse;
}

@media screen and (max-width: 1080px) {
  .features .feature-item {
    flex-direction: column;
  }
  .features .feature-item:nth-child(even) {
    flex-direction: column;
  }
}
@media screen and (max-width: 768px) {
  .features__list {
    padding: 4.2667vw;
    gap: 4.2667vw;
  }
  .features .feature-item {
    gap: 4.2667vw;
    padding: 4.2667vw 4.2667vw 8.5333vw;
  }
  .features .feature-item__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.0667vw;
    text-align: center;
    margin-bottom: 4.2667vw;
    padding: 0;
    font-size: 4.8vw;
  }
  .features .feature-item__title .num {
    display: block;
    font-size: 7.4667vw;
    position: inherit;
    inset: unset;
  }
  .features .feature-item__list {
    margin-left: 2.1333vw;
  }
  .features .feature-item__list li {
    padding-left: 5.3333vw;
  }
  .features .feature-item__list li::before {
    width: 3.4667vw;
    height: 3.4667vw;
    top: 1.0667vw;
  }
}
/* 導入フロー */
.implementation__steps {
  display: flex;
  justify-content: center;
  gap: 3.2rem;
  padding: 3.2rem;
  border-radius: 2rem;
}
@media screen and (max-width: 768px) {
  .implementation__steps {
    border-radius: 10px;
  }
}
.implementation__steps {
  background: linear-gradient(180deg, rgba(246, 90, 122, 0.2) 0%, rgba(137, 168, 216, 0.2) 50%, rgba(58, 192, 220, 0.2) 100%);
}
.implementation .flow-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  text-align: center;
  padding: 4rem;
  background-color: #FFF;
  border-radius: 1rem;
}
@media screen and (max-width: 768px) {
  .implementation .flow-card {
    border-radius: 5px;
  }
}
.implementation .flow-card {
  position: relative;
}
.implementation .flow-card:not(:last-child) {
  position: relative;
}
.implementation .flow-card:not(:last-child)::after {
  content: "";
  width: 1.6rem;
  height: 2.4rem;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAxNiAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1LjExNDIgMTEuMjQwN0MxNS41Nzk4IDExLjYzOTggMTUuNTc5OCAxMi4zNjAyIDE1LjExNDIgMTIuNzU5M0wzLjY1MDc5IDIyLjU4NUMzLjAwMjEyIDIzLjE0MSAyIDIyLjY4MDEgMiAyMS44MjU4TDIgMi4xNzQyMkMyIDEuMzE5ODcgMy4wMDIxMiAwLjg1ODk1OSAzLjY1MDc5IDEuNDE0OTZMMTUuMTE0MiAxMS4yNDA3WiIgZmlsbD0iIzQ4QjdDRSIvPgo8L3N2Zz4=") no-repeat center/contain;
  position: absolute;
  inset: 0 -2.4rem 0 auto;
  margin: auto;
}
.implementation .flow-card__badge {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 2.8rem;
  background-color: #48B7CE;
  border-radius: 99px;
  font-family: "Figtree", sans-serif;
  font-weight: 300;
  font-style: italic;
  color: #FFF;
  line-height: 1;
  position: absolute;
  inset: -1.6rem 0 auto 0;
  margin: auto;
}
.implementation .flow-card__badge span {
  padding-left: 0.25em;
  font-size: 2rem;
}

@media screen and (max-width: 1080px) {
  .implementation__steps {
    flex-direction: column;
  }
  .implementation .flow-card:not(:last-child)::after {
    width: 2.4rem;
    height: 1.6rem;
    inset: auto 0 -2.4rem 0;
    transform: rotate(90deg);
  }
  .implementation .flow-card__badge {
    position: inherit;
    inset: unset;
  }
}
@media screen and (max-width: 768px) {
  .implementation__steps {
    padding: 4.2667vw;
    gap: 4.2667vw;
  }
  .implementation .flow-card {
    gap: 2.1333vw;
    padding: 4.2667vw 4.2667vw 6.4vw;
  }
  .implementation .flow-card:not(:last-child)::after {
    width: 3.2vw;
    height: 4.8vw;
    inset: auto 0 -4.2667vw 0;
  }
  .implementation .flow-card__badge {
    padding: 1.0667vw 4.2667vw 0.8vw;
    position: inherit;
    inset: unset;
  }
  .implementation .flow-card__badge span {
    font-size: 4.2667vw;
  }
  .implementation .flow-card__icon {
    max-width: 12.8vw;
  }
}
/* ビジネス効果 */
.business-impact h2 sup {
  color: #677B93;
  font-size: 1rem;
  position: relative;
  top: -1em;
}
.business-impact .impact-list {
  display: flex;
  justify-content: center;
  gap: 3.2rem;
  padding: 3.2rem;
  border-radius: 2rem;
}
@media screen and (max-width: 768px) {
  .business-impact .impact-list {
    border-radius: 10px;
  }
}
.business-impact .impact-list {
  background: linear-gradient(180deg, rgba(246, 90, 122, 0.2) 0%, rgba(137, 168, 216, 0.2) 50%, rgba(58, 192, 220, 0.2) 100%);
}
.business-impact .impact-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  text-align: center;
  padding: 3.2rem;
  background-color: #FFF;
  border-radius: 1rem;
}
@media screen and (max-width: 768px) {
  .business-impact .impact-card {
    border-radius: 5px;
  }
}
.business-impact .impact-card {
  position: relative;
}
.business-impact .impact-card__title {
  font-size: 2.4rem;
}
.business-impact .impact-card .num {
  color: #EB6581;
  font-family: "Figtree", sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 6.4rem;
  line-height: 1;
  letter-spacing: -0.05em;
  position: absolute;
  inset: -2.6rem auto auto 2.2rem;
}
.business-impact .notice {
  margin-top: 4.8rem;
  font-size: 1.2rem;
  color: #677B93;
}

@media screen and (max-width: 1080px) {
  .business-impact .impact-list {
    flex-direction: column;
  }
}
@media screen and (max-width: 768px) {
  .business-impact .impact-list {
    padding: 4.2667vw;
    gap: 4.2667vw;
  }
  .business-impact .impact-card {
    gap: 2.1333vw;
    padding: 6.4vw 4.2667vw;
  }
  .business-impact .impact-card .num {
    font-size: 10.6667vw;
    top: -3.2vw;
    left: 3.2vw;
  }
  .business-impact .impact-card__title {
    font-size: 4.8vw;
  }
  .business-impact .impact-card__image {
    max-width: 12.8vw;
  }
  .business-impact .notice {
    margin-top: 8.5333vw;
    font-size: 2.6667vw;
  }
}
/* ボトムCTA */
.bottom-cta {
  padding: 13.6rem 0 9.6rem;
  text-align: center;
  position: relative;
}
.bottom-cta::before {
  content: "";
  width: 20rem;
  height: 7rem;
  -webkit-mask-image: url(data:image/svg+xml;utf8,%3Csvg%20width%3D%22200%22%20height%3D%2270%22%20viewBox%3D%220%200%20200%2070%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M105.927%2065.5049C105.616%2066.3731%20105.117%2067.1714%20104.452%2067.8359C103.271%2069.0167%20101.67%2069.6796%20100%2069.6797C98.3301%2069.6797%2096.7276%2069.0167%2095.5469%2067.8359C94.8825%2067.1715%2094.383%2066.3729%2094.0723%2065.5049H94.0645C80.2004%2027.2961%2043.5794%200%200.582031%200H199.418C156.421%200%20119.8%2027.2962%20105.936%2065.5049H105.927Z%22%20fill%3D%22black%22%2F%3E%20%3C%2Fsvg%3E);
          mask-image: url(data:image/svg+xml;utf8,%3Csvg%20width%3D%22200%22%20height%3D%2270%22%20viewBox%3D%220%200%20200%2070%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M105.927%2065.5049C105.616%2066.3731%20105.117%2067.1714%20104.452%2067.8359C103.271%2069.0167%20101.67%2069.6796%20100%2069.6797C98.3301%2069.6797%2096.7276%2069.0167%2095.5469%2067.8359C94.8825%2067.1715%2094.383%2066.3729%2094.0723%2065.5049H94.0645C80.2004%2027.2961%2043.5794%200%200.582031%200H199.418C156.421%200%20119.8%2027.2962%20105.936%2065.5049H105.927Z%22%20fill%3D%22black%22%2F%3E%20%3C%2Fsvg%3E);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: #E1F6FA;
  position: absolute;
  inset: -1px 0 auto;
  margin: auto;
}
.bottom-cta h2 {
  margin-bottom: 2.4rem;
}
.bottom-cta .button-wrapper {
  margin-top: 4rem;
}

@media screen and (max-width: 768px) {
  .bottom-cta {
    padding: 23.4667vw 0 17.0667vw;
  }
  .bottom-cta::before {
    width: 33.0667vw;
    height: 11.7333vw;
    top: -2px;
  }
  .bottom-cta h2 {
    margin-bottom: 4.2667vw;
  }
  .bottom-cta .button-wrapper {
    margin-top: 7.4667vw;
  }
}
/* フッター */
.l-footer {
  background-color: #1B3359;
  color: #fff;
  padding: 9.6rem 0;
}
.l-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.l-footer__company > p {
  font-weight: 700;
  margin-bottom: 1em;
}
.l-footer__company table {
  border-collapse: collapse;
  font-size: 1.2rem;
}
.l-footer__company table tr:not(:first-child) th, .l-footer__company table tr:not(:first-child) td {
  padding-top: 0.8rem;
}
.l-footer__company table th, .l-footer__company table td {
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.l-footer__company table th {
  padding-right: 1em;
}
.l-footer__company table td p + p {
  margin-top: 0.4rem;
}
.l-footer__info {
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 3.2rem;
  text-align: right;
}
.l-footer__link {
  font-size: 1.2rem;
}
.l-footer__sns {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 3.2rem;
}
.l-footer__copyright {
  color: rgba(255, 255, 255, 0.25);
  font-size: 1rem;
  letter-spacing: 0.05em;
}

@media screen and (max-width: 1080px) {
  .l-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 9.6rem;
  }
  .l-footer__info {
    align-items: flex-start;
  }
}
@media screen and (max-width: 768px) {
  .l-footer {
    padding-block: 17.0667vw;
  }
  .l-footer__inner {
    gap: 17.0667vw;
  }
  .l-footer table {
    font-size: 2.6667vw;
  }
  .l-footer table th, .l-footer table td {
    display: block;
  }
  .l-footer table tr:not(:first-child) th {
    padding: 2.1333vw 0 0 0;
  }
  .l-footer table tr:not(:first-child) td {
    padding: 0;
  }
  .l-footer table td {
    padding: 1.0667vw 0 0 0;
  }
  .l-footer table td p + p {
    margin-top: 1.0667vw;
  }
  .l-footer__info {
    gap: 5.3333vw;
  }
  .l-footer__sns {
    gap: 5.3333vw;
  }
  .l-footer__sns li {
    max-width: 5.3333vw;
  }
  .l-footer__link {
    font-size: 2.6667vw;
  }
  .l-footer__copyright {
    font-size: 2.6667vw;
  }
}/*# sourceMappingURL=style.css.map */