/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
input, textarea, button, header {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  -webkit-text-size-adjust: 100%;
  max-block-size: 999999px;
  outline: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: none;
}

button:focus {
  outline: 0;
}

ol, ul {
  list-style: none;
}

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
  text-decoration: none;
  outline: none;
}

img {
  inline-size: 100%;
  block-size: auto;
  vertical-align: bottom;
}

body {
  font-size: clamp(1rem, 0.778rem + 0.46vw, 1.125rem);
  font-weight: 400;
  color: rgb(51, 51, 51);
  line-height: 1.8;
  position: relative;
}

a {
  font-weight: 500;
  color: rgb(51, 51, 51);
}

*,
*::before,
*::after {
  --color-Danube: 109	141	187;
  --color-AliceBlue: 245 252 255;
}

.st-breadcrumb {
  display: none;
}

.sitemain {
  background-color: rgb(var(--color-AliceBlue));
}

.p-hero {
  -webkit-margin-after: 1rem;
          margin-block-end: 1rem;
}
@media screen and (min-width: 576px) {
  .p-hero {
    -webkit-margin-after: 1.3125rem;
            margin-block-end: 1.3125rem;
  }
}
@media screen and (min-width: 768px) {
  .p-hero {
    -webkit-margin-after: 5rem;
            margin-block-end: 5rem;
    -webkit-padding-start: 2rem;
            padding-inline-start: 2rem;
  }
}
@media screen and (min-width: 992px) {
  .p-hero {
    -webkit-margin-after: 8rem;
            margin-block-end: 8rem;
  }
}

.p-hero__inner {
  container-type: inline-size;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  max-inline-size: 1000px;
  margin-inline: auto;
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-hero__inner {
    display: grid;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    grid-template-columns: auto 1fr;
  }
}

.p-hero__main {
  z-index: 10;
  translate: 0 -40%;
  padding-inline: 1rem;
}
@media screen and (min-width: 476px) {
  .p-hero__main {
    padding-inline: 3rem;
  }
}
@media screen and (min-width: 576px) {
  .p-hero__main {
    translate: 0 -50%;
  }
}
@media screen and (min-width: 768px) {
  .p-hero__main {
    margin: 0;
    padding: 0;
    translate: revert;
  }
}

.p-hero__main-copy {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  row-gap: 1rem;
  inline-size: -webkit-max-content;
  inline-size: -moz-max-content;
  inline-size: max-content;
  -webkit-margin-after: 1rem;
          margin-block-end: 1rem;
  font-size: clamp(1.5rem, 1.318rem + 0.91vw, 2rem);
  font-size: clamp(1.5rem, 1.227rem + 1.36vw, 2.25rem);
  color: rgba(var(--color-White), 1);
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-indent: 1rem;
}
.p-hero__main-copy span {
  -webkit-padding-end: 1rem;
          padding-inline-end: 1rem;
  padding-block: 0.25rem 0.5rem;
  font-size: clamp(2rem, 1.545rem + 2.27vw, 3.25rem);
  font-size: clamp(2rem, 1.409rem + 2.95vw, 3.625rem);
  color: rgba(var(--color-White), 1);
  letter-spacing: 0.1em;
  background-color: rgba(var(--color-BondiBlue), 1);
}
@media screen and (min-width: 768px) {
  .p-hero__main-copy {
    color: unset;
  }
}

.p-hero__main-subcopy {
  inline-size: -webkit-max-content;
  inline-size: -moz-max-content;
  inline-size: max-content;
  padding-inline: 1rem;
  padding-block: 0.25rem;
  font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
  font-weight: bold;
}
@media screen and (min-width: 576px) {
  .p-hero__main-subcopy br {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .p-hero__main-subcopy {
    background-color: rgba(var(--color-White), 1);
  }
}

.p-hero__fig {
  block-size: 350px;
}
.p-hero__fig img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  inline-size: 100%;
  block-size: 100%;
}
@media screen and (min-width: 768px) {
  .p-hero__fig {
    block-size: 420px;
    margin-inline: -7rem calc(50cqi - 50svw);
  }
}
@media screen and (min-width: 992px) {
  .p-hero__fig {
    block-size: 500px;
  }
}
@media screen and (min-width: 1200px) {
  .p-hero__fig {
    block-size: 570px;
  }
}

.p-why {
  padding-inline: 4vw;
  -webkit-margin-after: 5rem;
          margin-block-end: 5rem;
}
@media screen and (min-width: 768px) {
  .p-why {
    -webkit-margin-after: 8rem;
            margin-block-end: 8rem;
    padding-inline: 2rem;
  }
}

.p-why__inner {
  max-inline-size: 1000px;
  margin-inline: auto;
}

.p-why__intro {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  row-gap: 2rem;
  -webkit-margin-after: 2rem;
          margin-block-end: 2rem;
}
@media screen and (min-width: 576px) {
  .p-why__intro {
    display: grid;
    -webkit-column-gap: 1rem;
       -moz-column-gap: 1rem;
            column-gap: 1rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    grid-template-columns: auto 160px;
    -webkit-margin-after: 3rem;
            margin-block-end: 3rem;
  }
}
@media screen and (min-width: 768px) {
  .p-why__intro {
    grid-template-columns: auto 225px;
  }
}

.p-why__intro-title {
  font-size: clamp(1.5rem, 0.808rem + 1.92vw, 2.25rem);
  font-weight: bold;
  color: rgba(var(--color-BondiBlue), 1);
  line-height: 1.4;
}

.p-why__intro-fig {
  max-inline-size: 200px;
}
@media screen and (min-width: 576px) {
  .p-why__intro-fig {
    max-inline-size: 100%;
  }
}

.p-why__detail {
  -webkit-margin-after: 3rem;
          margin-block-end: 3rem;
}
@media screen and (min-width: 768px) {
  .p-why__detail {
    -webkit-margin-after: 6rem;
            margin-block-end: 6rem;
  }
}

.p-why__list {
  display: grid;
  gap: 1rem;
}
@media screen and (min-width: 576px) {
  .p-why__list {
    gap: 1.25rem;
  }
}
@media screen and (min-width: 768px) {
  .p-why__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 992px) {
  .p-why__list {
    gap: 2.5rem;
  }
}

.p-why__list-item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
  row-gap: 1.25rem;
  padding-inline: 1.25rem;
  padding-block: 1.25rem;
  border: 2px solid rgb(var(--color-Danube));
  border-radius: 10px;
  background-color: rgba(var(--color-White), 1);
}
@media screen and (min-width: 768px) {
  .p-why__list-item {
    padding-inline: 2rem;
  }
}
@media screen and (min-width: 992px) {
  .p-why__list-item {
    row-gap: 2rem;
    padding-inline: 2.5rem;
    padding-block: 2rem;
  }
}

.p-why__list-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem);
  font-weight: bold;
  color: rgba(var(--color-BondiBlue), 1);
  line-height: 1.4;
  text-align: center;
}

.p-why__list-fig {
  max-inline-size: 120px;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .p-why__list-fig {
    max-inline-size: 160px;
  }
}

.p-why__list-summary {
  font-size: 1rem;
}

.p-education {
  padding-block: 5rem;
  padding-inline: 4vw;
  background: radial-gradient(106.01% 105.43% at 87.64% 16.69%, #70C7FC 0%, #4091FC 100%);
  position: relative;
}
.p-education::before {
  content: "";
  inline-size: 60px;
  block-size: 35px;
  background-color: rgb(var(--color-AliceBlue));
  position: absolute;
  top: -0.0625rem;
  left: 50%;
  translate: -50% 0;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
@media screen and (min-width: 768px) {
  .p-education {
    padding-inline: 2rem;
    padding-block: 8rem;
  }
  .p-education::before {
    inline-size: 90px;
    block-size: 58px;
  }
}

.p-education__inner {
  max-inline-size: 1000px;
  margin-inline: auto;
}

.p-education__intro {
  display: grid;
  grid-template-areas: "fig" "title" "detail";
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
  -webkit-margin-after: 3rem;
          margin-block-end: 3rem;
}
@media screen and (min-width: 768px) {
  .p-education__intro {
    grid-template-columns: 1fr 220px;
    grid-template-areas: "title fig" "detail fig";
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
@media screen and (min-width: 992px) {
  .p-education__intro {
    grid-template-columns: 1fr 240px;
    -webkit-margin-after: 4rem;
            margin-block-end: 4rem;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
  }
}
@media screen and (min-width: 1200px) {
  .p-education__intro {
    grid-template-columns: 1fr 270px;
  }
}

.p-education__intro-title {
  grid-area: title;
  font-size: clamp(1.5rem, 0.808rem + 1.92vw, 2.25rem);
  font-weight: bold;
  color: rgba(var(--color-White), 1);
  line-height: 1.4;
}

.p-education__intro-detail {
  grid-area: detail;
  font-size: 1rem;
  color: rgba(var(--color-White), 1);
}

.p-education__intro-fig {
  grid-area: fig;
  max-inline-size: 200px;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .p-education__intro-fig {
    max-inline-size: 100%;
    -webkit-margin-after: 1rem;
            margin-block-end: 1rem;
  }
}

.p-education__graph {
  -webkit-margin-after: 2rem;
          margin-block-end: 2rem;
  padding-block: 2rem;
  padding-inline: 2rem;
  background-color: rgba(var(--color-White), 1);
  border-radius: 10px;
}
@media screen and (min-width: 768px) {
  .p-education__graph {
    padding-inline: 3rem;
  }
}

.p-education__graph-title {
  -webkit-margin-after: 1rem;
          margin-block-end: 1rem;
  text-align: center;
}

.p-education__graph-box {
  block-size: 250px;
  max-inline-size: 800px;
  margin-inline: auto;
  -webkit-margin-after: 3rem;
          margin-block-end: 3rem;
}
@media screen and (min-width: 768px) {
  .p-education__graph-box {
    block-size: 350px;
  }
}

.p-education__graph-quote {
  font-size: 0.875rem;
}
.p-education__graph-quote a {
  text-decoration: underline;
}
.p-education__graph-quote a:hover {
  text-decoration: none;
}

.p-education__intro-outro {
  font-size: 1rem;
  color: rgba(var(--color-White), 1);
}

.p-importance {
  padding-inline: 4vw;
  padding-block: 5rem;
  background-color: rgba(var(--color-White), 1);
}
@media screen and (min-width: 768px) {
  .p-importance {
    padding-inline: 2rem;
  }
}

.p-importance__inner {
  container-type: inline-size;
  max-inline-size: 1000px;
  margin-inline: auto;
}

.p-importance__title {
  -webkit-margin-after: 4.5rem;
          margin-block-end: 4.5rem;
  font-size: clamp(1.5rem, 0.808rem + 1.92vw, 2.25rem);
  font-weight: bold;
  line-height: 1.6;
  text-align: center;
  position: relative;
}
.p-importance__title::after {
  content: "";
  inline-size: 80px;
  block-size: 5px;
  background-color: rgba(var(--color-BondiBlue), 1);
  position: absolute;
  bottom: -2rem;
  left: 50%;
  translate: -50% 0;
}
@media screen and (min-width: 476px) {
  .p-importance__title br {
    display: none;
  }
}

.p-importance__detail {
  -webkit-margin-after: 4rem;
          margin-block-end: 4rem;
}
@media screen and (min-width: 768px) {
  .p-importance__detail {
    -webkit-margin-after: 6rem;
            margin-block-end: 6rem;
  }
}

.p-solution__subtitle {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  -webkit-column-gap: 1rem;
     -moz-column-gap: 1rem;
          column-gap: 1rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-margin-after: 2.5rem;
          margin-block-end: 2.5rem;
  font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
  line-height: 1.4;
  text-align: center;
}
.p-solution__subtitle::before, .p-solution__subtitle::after {
  content: "";
  block-size: 2px;
  background-color: rgba(var(--color-Nobel));
}
@media screen and (min-width: 576px) {
  .p-solution__subtitle br {
    display: none;
  }
}

.p-importance-risk {
  display: grid;
  gap: 2rem 1.25rem;
  inline-size: 100%;
  -webkit-margin-after: 5rem;
          margin-block-end: 5rem;
}
@media screen and (min-width: 576px) {
  .p-importance-risk {
    grid-template-columns: repeat(2, 1fr);
    -webkit-margin-after: 6rem;
            margin-block-end: 6rem;
  }
}
@media screen and (min-width: 992px) {
  .p-importance-risk {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem 1.25rem;
    -webkit-margin-after: 8rem;
            margin-block-end: 8rem;
  }
}

.p-importance-risk__item {
  padding-block: 0rem 1.5rem;
  padding-inline: 1.25rem;
  border: 2px solid rgba(var(--color-BondiBlue), 1);
  border-radius: 10px;
}

.p-importance-risk__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  block-size: 36px;
  max-inline-size: 11em;
  margin-inline: auto;
  font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
  color: rgba(var(--color-White), 1);
  text-align: center;
  border-radius: 20px;
  background-color: rgba(var(--color-BondiBlue), 1);
  translate: 0 -50%;
}

.p-importance-risk__summary {
  font-size: 1rem;
  line-height: 1.6;
}

.p-importance-about {
  display: grid;
  row-gap: 2rem;
  grid-template-areas: "fig" "title" "detail";
  -webkit-margin-after: 4rem;
          margin-block-end: 4rem;
}
@media screen and (min-width: 768px) {
  .p-importance-about {
    grid-template-columns: 45% 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "fig title" "fig detail";
  }
}
@media screen and (min-width: 992px) {
  .p-importance-about {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 3rem;
    -webkit-margin-after: 6rem;
            margin-block-end: 6rem;
  }
}

.p-importance-about__title {
  grid-area: title;
  font-size: clamp(1.5rem, 0.808rem + 1.92vw, 2.25rem);
  color: rgba(var(--color-BondiBlue), 1);
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  .p-importance-about__title {
    -webkit-padding-start: 2rem;
            padding-inline-start: 2rem;
  }
}
@media screen and (min-width: 992px) {
  .p-importance-about__title {
    -webkit-padding-start: 3rem;
            padding-inline-start: 3rem;
  }
}

.p-importance-about__detail {
  grid-area: detail;
}
@media screen and (min-width: 768px) {
  .p-importance-about__detail {
    -webkit-padding-start: 2rem;
            padding-inline-start: 2rem;
  }
}
@media screen and (min-width: 992px) {
  .p-importance-about__detail {
    -webkit-padding-start: 3rem;
            padding-inline-start: 3rem;
  }
}

.p-importance-about__fig {
  grid-area: fig;
  block-size: 200px;
  -webkit-margin-start: calc(50cqi - 50svw);
          margin-inline-start: calc(50cqi - 50svw);
}
.p-importance-about__fig img {
  -o-object-fit: cover;
     object-fit: cover;
  inline-size: 100%;
  block-size: 100%;
}
@media screen and (min-width: 476px) {
  .p-importance-about__fig {
    block-size: 250px;
  }
}
@media screen and (min-width: 576px) {
  .p-importance-about__fig {
    block-size: 350px;
  }
}
@media screen and (min-width: 768px) {
  .p-importance-about__fig {
    block-size: auto;
  }
}

.p-importance-approach {
  display: grid;
  row-gap: 1.25rem;
  -webkit-margin-after: 2rem;
          margin-block-end: 2rem;
}
@media screen and (min-width: 992px) {
  .p-importance-approach {
    row-gap: 2rem;
    -webkit-margin-after: 3rem;
            margin-block-end: 3rem;
  }
}

.p-importance-approach__box {
  padding-block: 1.25rem;
  padding-inline: 1.25rem;
  border-radius: 10px;
  -webkit-box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 768px) {
  .p-importance-approach__box {
    padding-block: 1.5rem;
    padding-inline: 2rem;
  }
}
@media screen and (min-width: 992px) {
  .p-importance-approach__box {
    padding-block: 1.75rem;
    padding-inline: 2.5rem;
  }
}

.p-importance-approach__num {
  -webkit-margin-after: 0.5rem;
          margin-block-end: 0.5rem;
  font-family: "Roboto Mono", monospace;
  font-size: clamp(2rem, 1.818rem + 0.91vw, 2.5rem);
  font-weight: 500;
  color: rgba(var(--color-BondiBlue), 1);
  line-height: 1;
}

.p-importance-approach__title {
  -webkit-margin-after: 0.5rem;
          margin-block-end: 0.5rem;
  font-size: clamp(1.25rem, 0.788rem + 1.28vw, 1.75rem);
  line-height: 1.4;
}

.p-importance-approach__detail {
  font-size: 1rem;
}

.p-importance__outro {
  font-size: 1rem;
}

.p-solution {
  padding-inline: 4vw;
  padding-block: 5rem;
}
@media screen and (min-width: 768px) {
  .p-solution {
    padding-inline: 2rem;
    padding-block: 8rem;
  }
}

.p-solution__inner {
  max-inline-size: 1000px;
  margin-inline: auto;
}

.p-solution__intro {
  display: grid;
  grid-template-areas: "fig" "title" "detail";
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  gap: 2rem;
  -webkit-margin-after: 4rem;
          margin-block-end: 4rem;
}
@media screen and (min-width: 768px) {
  .p-solution__intro {
    grid-template-columns: 1fr 220px;
    grid-template-rows: 1fr auto;
    grid-template-areas: "title fig" "detail fig";
    -webkit-margin-after: 6rem;
            margin-block-end: 6rem;
  }
}
@media screen and (min-width: 992px) {
  .p-solution__intro {
    grid-template-columns: 1fr 260px;
  }
}

.p-solution__intro-title {
  grid-area: title;
  font-size: clamp(1.5rem, 0.808rem + 1.92vw, 2.25rem);
  color: rgba(var(--color-BondiBlue), 1);
  line-height: 1.4;
}

.p-solution__intro-detail {
  grid-area: detail;
}

.p-solution__intro-fig {
  grid-area: fig;
  max-inline-size: 200px;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .p-solution__intro-fig {
    max-inline-size: 100%;
  }
}

.p-solution__category {
  display: grid;
  margin-bottom: 6rem;
  row-gap: 1.25rem;
}
@media screen and (min-width: 768px) {
  .p-solution__category {
    grid-template-columns: repeat(2, 1fr);
    -webkit-column-gap: 1.25rem;
       -moz-column-gap: 1.25rem;
            column-gap: 1.25rem;
  }
}
@media screen and (min-width: 992px) {
  .p-solution__category {
    -webkit-column-gap: 4rem;
       -moz-column-gap: 4rem;
            column-gap: 4rem;
  }
}
@media screen and (min-width: 1200px) {
  .p-solution__category {
    -webkit-column-gap: 6rem;
       -moz-column-gap: 6rem;
            column-gap: 6rem;
  }
}

.p-solution__category-box {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: 1rem;
  -webkit-padding-after: 1.5rem;
          padding-block-end: 1.5rem;
  border: 2px solid rgba(var(--color-BondiBlue), 1);
  border-radius: 10px;
  background-color: rgba(var(--color-White), 1);
}
@media screen and (min-width: 768px) {
  .p-solution__category-box {
    row-gap: 2rem;
    -webkit-padding-after: 2rem;
            padding-block-end: 2rem;
  }
}

.p-solution__category-title {
  padding-block: 0.5rem;
  font-size: clamp(1.25rem, 1.114rem + 0.68vw, 1.625rem);
  color: rgba(var(--color-White), 1);
  text-align: center;
  background-color: rgba(var(--color-BondiBlue), 1);
}

.p-solution__category-fig {
  padding-inline: 1.25rem;
}
@media screen and (min-width: 768px) {
  .p-solution__category-fig {
    padding-inline: 1.25rem;
  }
}
@media screen and (min-width: 992px) {
  .p-solution__category-fig {
    padding-inline: 2rem;
  }
}

.p-solution__category-sumamry {
  padding-inline: 1.25rem;
}
@media screen and (min-width: 768px) {
  .p-solution__category-sumamry {
    padding-inline: 1.25rem;
  }
}
@media screen and (min-width: 992px) {
  .p-solution__category-sumamry {
    padding-inline: 2rem;
  }
}

.p-solution__category-button {
  display: grid;
  grid-template-columns: 1fr 15px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  inline-size: calc(100% - 40px);
  margin-inline: auto;
  padding-inline: 1rem;
  padding-block: 0.5rem;
  font-size: clamp(1rem, 0.778rem + 0.46vw, 1.125rem);
  color: rgba(var(--color-White), 1);
  border: 2px solid rgba(var(--color-BondiBlue), 1);
  border-radius: 25px;
  background-color: rgba(var(--color-BondiBlue), 1);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.p-solution__category-button::after {
  content: "";
  block-size: 11px;
  background-color: rgba(var(--color-White), 1);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.p-solution__category-button:hover {
  color: rgba(var(--color-BondiBlue), 1);
  background-color: rgba(var(--color-White), 1);
}
.p-solution__category-button:hover::after {
  background-color: rgba(var(--color-BondiBlue), 1);
}
@media screen and (min-width: 992px) {
  .p-solution__category-button {
    inline-size: calc(100% - 64px);
    padding-inline: 1.25rem;
  }
}

.p-solution__lineup {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 3rem 1.5rem;
  -webkit-margin-after: 6rem;
          margin-block-end: 6rem;
}
@media screen and (min-width: 768px) {
  .p-solution__lineup {
    gap: 2rem;
  }
}
@media screen and (min-width: 992px) {
  .p-solution__lineup {
    gap: 3rem;
  }
}

.p-solution__lineup-item {
  display: block grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: 0.75rem;
  justify-items: center;
}
@media screen and (min-width: 768px) {
  .p-solution__lineup-item {
    row-gap: 1rem;
  }
}

.p-solution__lineup-title {
  inline-size: 100%;
  font-size: clamp(1rem, 0.556rem + 0.93vw, 1.25rem);
  font-weight: 600;
  line-height: 1.4;
}

.p-solution__lineup-summary {
  inline-size: 100%;
  font-size: clamp(0.938rem, 0.826rem + 0.23vw, 1rem);
}

.p-solution__lineup-button {
  display: block grid;
  grid-template-columns: 1fr 7px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  inline-size: 100%;
  max-inline-size: 220px;
  block-size: 40px;
  font-size: 1rem;
  padding-inline: 1rem;
  color: rgba(var(--color-White), 1);
  border: 2px solid rgba(var(--color-BondiBlue), 1);
  border-radius: 5px;
  background-color: rgba(var(--color-BondiBlue), 1);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.p-solution__lineup-button::after {
  content: "";
  block-size: 10px;
  background-color: rgba(var(--color-White), 1);
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.p-solution__lineup-button:hover {
  color: rgba(var(--color-BondiBlue), 1);
  background-color: rgba(var(--color-White), 1);
}
.p-solution__lineup-button:hover::after {
  background-color: rgba(var(--color-BondiBlue), 1);
}

.p-solution__video-intro {
  margin-bottom: 1.5rem;
  font-size: 1rem;
}
@media screen and (min-width: 768px) {
  .p-solution__video-intro {
    margin-bottom: 3rem;
  }
}

.p-solution__video {
  position: relative;
}

.p-solution__video-fig {
  inline-size: 88%;
  max-inline-size: 650px;
  margin-inline: auto;
  position: relative;
}
@media screen and (min-width: 476px) {
  .p-solution__video-fig {
    inline-size: 76%;
  }
}
@media screen and (min-width: 768px) {
  .p-solution__video-fig {
    inline-size: 68%;
  }
}
@media screen and (min-width: 992px) {
  .p-solution__video-fig {
    max-inline-size: 650px;
  }
}

.p-solution__video-box {
  inline-size: 87.4%;
  aspect-ratio: 16/9;
  position: absolute;
  top: 2.9%;
  left: 50%;
  translate: -50% 0;
}
.p-solution__video-box iframe {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.p-solution__video-deco01 {
  inline-size: 25%;
  max-inline-size: 254px;
  position: absolute;
  bottom: 0;
  left: 0;
  translate: -3vw 20%;
  pointer-events: none;
}
@media screen and (min-width: 476px) {
  .p-solution__video-deco01 {
    inline-size: 23%;
    translate: 0 20%;
  }
}
@media screen and (min-width: 768px) {
  .p-solution__video-deco01 {
    inline-size: 25%;
    translate: 0 25%;
  }
}

.p-solution__video-deco02 {
  inline-size: 21%;
  max-inline-size: 204px;
  position: absolute;
  bottom: 0;
  right: 0;
  translate: 3vw 20%;
  pointer-events: none;
}
@media screen and (min-width: 476px) {
  .p-solution__video-deco02 {
    inline-size: 19%;
    translate: 0 20%;
  }
}
@media screen and (min-width: 768px) {
  .p-solution__video-deco02 {
    inline-size: 21%;
    translate: 0 25%;
  }
}

.p-document {
  padding-inline: 4vw;
  padding-block: 5rem;
  background: radial-gradient(106.01% 105.43% at 87.64% 16.69%, #70C7FC 0%, #4091FC 100%);
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-document {
    padding-block: 8rem;
    padding-inline: 2rem;
  }
}

.p-document__inner {
  max-inline-size: 1000px;
  margin-inline: auto;
}

.p-document__intro {
  display: grid;
  grid-template-areas: "fig" "title" "detail";
  gap: 2rem;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  -webkit-margin-after: 3rem;
          margin-block-end: 3rem;
}
@media screen and (min-width: 768px) {
  .p-document__intro {
    grid-template-columns: 1fr 240px;
    grid-template-areas: "title fig" "detail fig";
  }
}
@media screen and (min-width: 992px) {
  .p-document__intro {
    grid-template-columns: 1fr 300px;
    -webkit-margin-after: 5rem;
            margin-block-end: 5rem;
  }
}
@media screen and (min-width: 1200px) {
  .p-document__intro {
    grid-template-columns: 1fr 335px;
  }
}

.p-document__intro-title {
  grid-area: title;
  font-size: clamp(1.75rem, 1.659rem + 0.45vw, 2rem);
  color: rgba(var(--color-White), 1);
  line-height: 1.4;
}

.p-document__intro-detail {
  grid-area: detail;
  color: rgba(var(--color-White), 1);
}

.p-document__intro-fig {
  grid-area: fig;
  max-inline-size: 240px;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .p-document__intro-fig {
    max-inline-size: 100%;
  }
}

.p-document__form {
  max-inline-size: 800px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  padding-block: 1.5rem;
  border-radius: 10px;
  background-color: rgba(var(--color-White), 1);
}
@media screen and (min-width: 768px) {
  .p-document__form {
    padding-inline: 4rem;
    padding-block: 4rem;
  }
}

.p-document__form-title {
  margin-bottom: 1rem;
  font-size: clamp(1.375rem, 1.239rem + 0.68vw, 1.75rem);
  line-height: 1.6;
}
.p-document__form-title br {
  display: none;
}
@media screen and (min-width: 576px) {
  .p-document__form-title br {
    display: block;
  }
}

.p-document__form-detail {
  margin-bottom: 2rem;
  font-size: 1rem;
}

.p-document__form-block {
  display: grid;
  row-gap: 2rem;
  max-inline-size: 800px;
  margin-inline: auto;
  -webkit-margin-after: 2rem;
          margin-block-end: 2rem;
}

.p-document__form-label {
  -webkit-margin-after: 0.5rem;
          margin-block-end: 0.5rem;
  font-size: 1rem;
  font-weight: bold;
}
.p-document__form-label::after {
  content: "*";
  color: red;
}

.u-maker {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #ff6));
  background: linear-gradient(transparent 60%, #ff6 60%);
}