main {
  display: flex;
  flex-direction: column;
}

/*============================
components
============================*/
.c-heading {
  display: flex;
  width: 100%;
  max-width: var(--width-md, 1100px);
  flex-direction: column;
  align-items: center;
  gap: var(--scale-20, 20px);
  margin-inline: auto;
}
.c-heading .c-heading__english {
  display: flex;
  align-items: center;
  gap: var(--scale-16, 16px);
}
.c-heading .c-heading__english figure {
  display: flex;
  width: var(--scale-40, 40px);
  align-items: center;
  aspect-ratio: 1/1;
}
.c-heading .c-heading__english figure img {
  width: 100%;
}
.c-heading .c-heading__english div {
  color: var(--primary, #4a64ba);
  text-align: center;
  font-family: "Barlow", sans-serif;
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 26px */
  letter-spacing: calc(1em / 20 * 1.6);
}
.c-heading h2 {
}
.c-heading h2 div.h2__subtitle {
  color: var(--on-surface, #1b1c1f);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-32, 32px);
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 41.6px */
  letter-spacing: 1.28px;
}

.c-heading p {
  color: var(--on-surface, #1b1c1f);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 500;
  line-height: 170%; /* 34px */
  letter-spacing: 0.8px;
}

.c-heading h2 div.h2__title {
  color: var(--on-primary-container, #262680);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-40, 40px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 60px */
  letter-spacing: 1.6px;
}

.c-highlight {
  color: var(--secondary, #e5545b);
  font-weight: 700;
}

/*============================
#mv
============================*/
section#mv {
  height: min(630px, 100vw / 1100 * 630);
  background: url(../images/mv-bg.jpg) center center/ auto 100% no-repeat;
  padding-top: min(240px, 100vw / 768 * 171);
  font-feature-settings: "palt";
  font-weight: bold;
  padding-inline: var(--padding-inline, 24px);
  background-color: #f5f5f7;
  position: relative;
}

section#mv div.mv__container {
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: min(12px, 100vw / 768 * 8);
}

section#mv div.mv__container div.mv__subtitle {
  font-size: min(39px, 100vw / 768 * 28);
  color: var(--on-surface);
}

section#mv div.mv__container h1 {
  display: flex;
  flex-direction: column;
  gap: min(12px, 100vw / 768 * 8);
}
section#mv div.mv__container h1 div.h1__row1 {
  font-size: min(80px, 100vw / 768 * 55);
  color: var(--primary-variant);
}
section#mv div.mv__container h1 div.row2 {
  display: flex;
  align-items: center;
  gap: min(67px, 100vw / 768 * 53);
}
section#mv div.mv__container h1 div.row2 div.row2__text1 {
  color: #7c7cd1;
  font-size: min(60px, 100vw / 768 * 43);
}
section#mv div.mv__container h1 div.row2 div.row2__text2 {
  color: var(--surface);
  font-size: min(31px, 100vw / 768 * 24);
  padding-top: min(20px, 100vw / 768 * 8);
}

@media screen and (max-width: 768px) {
  section#mv {
    background: url(../images/mv-bg-sp.jpg) center center/ auto 100% no-repeat;
    height: calc(100vw / 375 * 480);
    padding-top: calc(100vw / 768 * 105);
  }
  section#mv div.mv__container {
    text-align: center;
    gap: calc(100vw / 768 * 20);
  }
  section#mv div.mv__container div.mv__subtitle {
    font-size: calc(100vw / 768 * 40);
  }
  section#mv div.mv__container h1 {
    gap: 0;
  }
  section#mv div.mv__container h1 div.h1__row1 {
    display: flex;
    flex-direction: column;
    font-size: calc(100vw / 768 * 100);
    line-height: 110%;
  }
  section#mv div.mv__container h1 div.row2 {
    justify-content: center;
  }
  section#mv div.mv__container h1 div.row2 div.row2__text1 {
    font-size: calc(100vw / 768 * 86);
  }
  section#mv div.mv__container h1 div.row2 div.row2__text2 {
    position: absolute;
    right: calc(100vw / 768 * 179);
    top: calc(100vw / 768 * 524);
    font-size: calc(100vw / 768 * 34);
    display: flex;
    flex-direction: column;
  }
}

/*============================
#glonav
============================*/
section#glonav {
  display: flex;
  padding: var(--scale-8, 8px) 0 var(--scale-16, 16px) 0;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
}
section#glonav div.glonav__container {
  display: flex;
  max-width: var(--width-md, 1100px);
  justify-content: center;
  align-items: center;
  align-content: center;
  flex: 1 0 0;
  flex-wrap: wrap;
}

section#glonav div.glonav__container a.glonav__item {
  display: flex;
  min-width: 200px;
  padding: var(--scale-8, 8px);
  justify-content: center;
  align-items: center;
  gap: var(--scale-12, 12px);
  flex: 1 0 0;
  border-right: 1px solid var(--border, #b3b6d0);
  color: var(--on-surface, #1b1c1f);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 26px */
  text-decoration: none;
}
section#glonav div.glonav__container a.glonav__item {
  &:last-child {
    border-right: none;
  }
}
section#glonav div.glonav__container a.glonav__item figure {
  display: flex;
  width: var(--scale-40, 40px);
  align-items: center;
  aspect-ratio: 1/1;
}
section#glonav div.glonav__container a.glonav__item figure.item__arrow {
  display: none;
}
section#glonav div.glonav__container a.glonav__item figure img {
  width: 100%;
}

section#glonav div.glonav__container a.glonav__item div {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 1100px) {
  section#glonav div.glonav__container {
    flex-direction: column;
  }
  section#glonav div.glonav__container a.glonav__item {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border, #b3b6d0);
  }
  section#glonav div.glonav__container a.glonav__item div {
    flex-direction: unset;
    flex-grow: 1;
    justify-content: center;
    max-width: 640px;
  }
  section#glonav div.glonav__container a.glonav__item figure.item__arrow {
    display: flex;
  }
}

@media screen and (max-width: 1100px) {
  section#glonav div.glonav__container a.glonav__item--chart {
    order: 4;
  }
}
/*============================
#worries
============================*/
section#worries {
  display: flex;
  padding-bottom: var(--padding-block, 80px);
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  background: var(--primary-container, #ebf5ff);
}
section#worries div.worries__container {
  display: flex;
  padding: var(--padding-block, 80px) var(--padding-inline, 24px) 96px
    var(--padding-inline, 24px);
  flex-direction: column;
  align-items: center;
  gap: var(--row-gap, 56px);
  align-self: stretch;
  background: var(--primary, #4a64ba);
}

section#worries .c-heading .c-heading__english div {
  color: var(--surface);
}

section#worries .c-heading h2 div.h2__title {
  color: var(--surface);
}
section#worries div.worries__container div.worries__items {
  display: flex;
  max-width: var(--width-md, 1100px);
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  gap: 8px var(--scale-8, 8px);
  align-self: stretch;
  margin-inline: auto;
  width: 100%;
}

section#worries div.worries__container div.worries__items div.items__item {
  display: flex;
  padding: var(--scale-16, 16px);
  flex-direction: column;
  justify-content: flex-start; /* 上寄せ */
  align-items: center;
  gap: var(--scale-16, 16px);
  flex: 1 0 0;
  background: #252b35;
  background-position: top;
  background-repeat: no-repeat;
  align-self: stretch;
}

section#worries
  div.worries__container
  div.worries__items
  div.items__item
  figure {
  display: flex;
  width: min(160px, 100vw / 375 * 96);
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  aspect-ratio: 4/5;
}
section#worries
  div.worries__container
  div.worries__items
  div.items__item
  figure
  img {
  width: 100%;
}
section#worries
  div.worries__container
  div.worries__items
  div.items__item
  div.item__text {
  align-self: stretch;
  color: var(--surface, #fff);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 170%; /* 34px */
}

@media screen and (max-width: 768px) {
  section#worries div.worries__container div.worries__items {
    flex-direction: column;
  }
  section#worries div.worries__container div.worries__items div.items__item {
    display: flex;
    padding: var(--scale-8, 6px) var(--scale-16, 13px);
    justify-content: center;
    align-items: center;
    gap: var(--scale-24, 18px);
    flex: 1 0 0;
    flex-direction: row;
    width: 100%;
  }
  section#worries
    div.worries__container
    div.worries__items
    div.items__item:nth-last-of-type(2n + 1) {
    flex-direction: row-reverse;
  }
  section#worries
    div.worries__container
    div.worries__items
    div.items__item
    div.item__text {
    align-self: center;
  }
}

section#worries div.worries__container2 {
  display: flex;
  padding: 0 var(--padding-inline, 24px);
  flex-direction: column;
  align-items: center;
  align-self: stretch;
}
section#worries div.worries__result {
  margin-top: -64px;
  width: 100%;
  display: flex;
  max-width: var(--width-md, 1100px);
  padding: 0 var(--padding-inline, 24px) var(--scale-56, 56px)
    var(--padding-inline, 24px);
  flex-direction: column;
  align-items: center;
  gap: var(--scale-40, 40px);
  align-self: stretch;
  background: var(--surface, #fff);
  box-shadow: var(--scale-16, 16px) var(--scale-16, 16px) 0 0
    rgba(118, 145, 255, 0.3);
  margin-inline: auto;
}
section#worries div.worries__result div.result__triangle {
  border-top: 32px solid var(--primary, #4a64ba);
  border-right: 80px solid transparent;
  border-left: 80px solid transparent;
}

section#worries div.worries__result .result__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--scale-16, 16px);
  align-self: stretch;
}
section#worries div.worries__result h3 {
  color: var(--on-surface, #1b1c1f);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-28, 28px);
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 36.4px */
  align-self: stretch;
}
section#worries div.worries__result h3 span.c-highlight {
  font-family: "Noto Sans JP";
  font-size: var(--scale-32, 32px);
  font-style: normal;
  line-height: 130%;
}
section#worries div.worries__result p {
  color: var(--on-surface, #1b1c1f);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-28, 28px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 36.4px */
}
section#worries div.worries__result p span span.box {
  padding: var(--scale-4, 4px) var(--scale-8, 8px);
  justify-content: center;
  align-items: center;
  background: var(--primary-container, #ebf5ff);
  color: var(--primary, #4a64ba);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-28, 28px);
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 36.4px */
}
/*============================
#chart
============================*/
section#chart {
  display: flex;
  padding: var(--padding-block, 80px) var(--padding-inline, 24px);
  flex-direction: column;
  align-items: center;
  gap: var(--row-gap, 56px);
  align-self: stretch;
}
section#chart div.chart__container {
  display: flex;
  width: 100%;
  margin-inline: auto;
  max-width: var(--width-lg, 1280px);
  flex-direction: column;
  align-items: center;
  gap: var(--scale-20, 20px);
}

section#chart .zoom__popup {
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

section#chart .zoom__popup-close {
  width: 30px;
  height: 30px;
  display: inline-block;
  background: url(../images/chart-close.svg) no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  position: absolute;
  top: 15px;
  right: 15px;
}

section#chart .zoom__popup__content {
  width: 100%;
  max-width: 90%;
  padding: 1em 0.5em;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: var(--scale-16, 16px);
  max-height: 90%;
  overflow-x: scroll;
}
section#chart .zoom__popup__content p {
  font-size: var(--scale-14, 14px);
  color: var(--on-surface, #1b1c1f);
}

section#chart button.zoom__button {
  display: flex;
  max-width: 280px;
  padding: var(--scale-16, 13px);
  justify-content: center;
  align-items: center;
  gap: var(--scale-8, 6px);
  flex: 1 0 0;
  border-radius: 1000px;
  background: var(--primary);
  box-shadow: var(--scale-2, 2px) var(--scale-4, 4px) 0 0 rgba(0, 0, 0, 0.2);
  color: var(--surface, #fff);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-20);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 27.3px */
  width: 100%;
}
section#chart button.chart__zoom figure.icon-zoom {
  width: 21px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}
section#chart button.chart__zoom figure.icon-zoom img {
  width: 100%;
}
section#chart button.chart__zoom div {
}
section#chart button.chart__zoom figure.icon-arrow {
  width: 18px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}
section#chart button.chart__zoom figure.icon-arrow img {
  width: 100%;
}

section#chart div.chart__container .chart__body {
  display: flex;
  max-width: var(--width-lg, 1280px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--scale-16, 16px);
  align-self: stretch;
}
section#chart div.chart__container .chart__body {
}

section#chart .comparition-chart {
  display: grid;
  grid-template-columns:
    var(--table-group-width) var(--table-sub-width, 142px)
    minmax(147px, 1fr) minmax(147px, 1fr) minmax(147px, 1fr) minmax(147px, 1fr) minmax(147px, 1fr);
}
section#chart :is(.row, .row-group) {
  display: contents;
}
section#chart .th {
  padding: var(--scale-8, 8px);
  align-items: center;
  gap: var(--scale-4, 4px);
  border-bottom: 1px solid var(--surface, #fff);
  background: var(--primary, #4a64ba);
  color: var(--surface, #fff);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-16, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 20.8px */
  align-content: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--scale-4, 4px);
  grid-column: span 2;
}

section#chart .th--group {
  grid-column: span 1;
  justify-content: flex-start;
}
section#chart :is(.th--group--support, .th--group--price) {
  grid-row: span 3;
}
section#chart .th--group--function {
  grid-row: span 5;
}
section#chart .th--group .asterisk {
  font-size: 10px;
}
section#chart .th--sub {
  grid-column: 2 / 3;
  display: flex;
  padding: var(--scale-8, 8px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--scale-4, 4px);
  border-right: 1px solid var(--border, #b3b6d0);
  border-bottom: 1px solid var(--border, #b3b6d0);
  background: var(--surface-variant, #f5f5f7);

  color: var(--on-primary-container, #262680);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-14, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 18.2px */
}

section#chart .th--sub .check-image {
  display: flex;
  width: min(56px, 100vw / 375 * 32);
  justify-content: center;
  align-items: center;
  aspect-ratio: 56/48.34;
}
@media screen and (max-width: 768px) {
  section#chart .th--sub .check-image {
    width: min(32px, 100vw / 375 * 32);
  }
}

section#chart .th--sub .check-image {
}
section#chart .th--sub .check-image img {
  width: 100%;
}
section#chart .th--service {
  display: grid;
  grid-row: span 4;
}
section#chart .th--service--header {
  position: sticky;
  left: 0;
  top: 72px;
  z-index: 10;
}
section#chart .th .c-check {
  display: flex;
  border-radius: 1000px;
  background: #ffea00;
  color: var(--on-surface);
  gap: var(--scale-4, 4px);
  font-weight: 900;
  align-items: center;
  font-size: var(--scale-14, 14px);
  justify-content: center;
  width: fit-content;
  padding: 0 var(--scale-4, 4px);
  margin-inline: auto;
}

section#chart .th .c-check figure {
  width: var(--scale-16, 16px);
  aspect-ratio: 1/1;
  flex: 0 0 auto;
}
section#chart .th .c-check span {
  flex: 0 0 auto;
}
section#chart .th small {
  font-size: var(--scale-12, 12px);
  display: inline-block;
  line-height: 130%;
}
section#chart .th .c-check {
  font-size: min(11px, 100vw / 375 * 11);
}
section#chart .c-td-service {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  padding: var(--scale-8, 8px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--scale-4, 4px);
  background: var(--surface, #fff);
  border-top: 1px solid var(--border, #b3b6d0);
  border-right: 1px solid var(--border, #b3b6d0);
  border-bottom: 1px solid var(--border, #b3b6d0);
  justify-content: stretch;
}
section#chart .c-td-service--header {
  position: sticky;
  top: 72px;
  z-index: 10;
}
section#chart .c-td-service--bottom {
  border-top: 0;
}
section#chart .c-td-service div.name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 0 0;
  align-self: stretch;
  color: var(--on-surface, #1b1c1f);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: min(15px, 100vw / 375 * 12);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 20.8px */
}
section#chart .c-td-service div.company {
  color: var(--on-surface-variant, #76787c);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-12, 12px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 15.6px */
}
section#chart .c-td-service figure.screenshot {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
  aspect-ratio: 1366 / 768;
}
section#chart .c-td-service figure.screenshot img {
  width: 100%;
}
section#chart .c-td-service a.c-td-service__button {
  display: flex;
  padding: var(--scale-8, 8px) var(--scale-16, 16px);
  justify-content: center;
  align-items: center;
  gap: var(--scale-8, 8px);
  align-self: stretch;
  border-radius: 1000px;
  background: var(--secondary, #e5545b);
  box-shadow: var(--scale-2, 2px) var(--scale-4, 4px) 0 0 rgba(0, 0, 0, 0.2);
  color: var(--surface, #fff);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-14, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 18.2px */
  text-decoration: none;
}
section#chart .c-td-service a {
  text-decoration: none;
}
section#chart .c-td-service--estimate {
  border-top: none;
}
section#chart .c-td-service--estimate a.c-td-service__button {
  background: var(--tertiary, #41c0a7);
  font-size: min(13px, 100vw / 375 * 11);
}
section#chart .c-td-service a figure.icon-zoom {
  width: var(--scale-24, 24px);
  aspect-ratio: 1/1;
}
section#chart .c-td-service a figure.icon-arrow {
  width: var(--scale-12, 12px);
  aspect-ratio: 1/1;
}
section#chart .c-td-service a figure img {
  width: 100%;
}
section#chart .c-td-rate {
  border-right: 1px solid var(--border, #b3b6d0);
  border-bottom: 1px solid var(--border, #b3b6d0);
  display: flex;
  padding: var(--scale-8, 8px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--scale-2, 2px);
  align-self: stretch;
  background: var(--surface);
}
section#chart :is(.c-td-rate--great, .c-td-rate--check) {
  background: var(--rate-great-container, #fff8cf);
}
section#chart .c-td-rate--good {
  background: var(--rate-good-container, #e3ffe2);
}
section#chart .c-td-rate figure {
  width: var(--scale-32, 32px);
  aspect-ratio: 1/1;
}
section#chart .c-td-rate figure img {
  width: 100%;
}
section#chart .c-td-rate div.text {
  color: var(--on-surface, #1b1c1f);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-14, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 21px */
}
section#chart .c-td-rate div.subtext {
  color: var(--on-surface, #1b1c1f);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-12, 12px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 18px */
}

section#chart div.toggle-button {
  display: flex;
  padding: var(--scale-8, 8px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--scale-8, 8px);
  align-self: stretch;
  grid-column: span 7;
  border-right: 1px solid var(--border, #b3b6d0);
  border-bottom: 1px solid var(--border, #b3b6d0);
  border-left: 1px solid var(--border, #b3b6d0);
  background: var(--primary-container, #ebf5ff);
}
.toggle-button2 {
  width: 100%;
  display: none;
}
@media screen and (max-width: 768px) {
  .toggle-button2 {
    display: flex;
  }
}

:is(div.toggle-button, div.toggle-button2) button {
  display: flex;
  padding: var(--scale-12, 12px) 0;
  justify-content: center;
  align-items: center;
  gap: var(--scale-4, 4px);
  align-self: stretch;
  border-radius: var(--scale-4, 4px);
  border: var(--scale-2, 2px) solid var(--primary, #4a64ba);
  background: var(--surface, #fff);
  color: var(--primary, #4a64ba);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 20px */
  position: relative;
  width: 100%;
}

:is(div.toggle-button, div.toggle-button2) button::after {
  content: "";
  display: inline-block;
  width: var(--scale-14);
  height: var(--scale-14);
  transition: 0.2s linear;

  background: linear-gradient(
      90deg,
      transparent 0%,
      transparent calc(50% - 1px),
      var(--primary) calc(50% - 1px),
      var(--primary) calc(50% + 1px),
      transparent calc(50% + 1px),
      transparent 100%
    ),
    linear-gradient(
      0deg,
      transparent 0%,
      transparent calc(50% - 1px),
      var(--primary) calc(50% - 1px),
      var(--primary) calc(50% + 1px),
      transparent calc(50% + 1px),
      transparent 100%
    );
}
:is(div.toggle-button, div.toggle-button2) button[aria-expanded="true"]::after {
  rotate: 90deg;
  background: linear-gradient(
      90deg,
      transparent 0%,
      transparent calc(50% - 1px),
      var(--primary) calc(50% - 1px),
      var(--primary) calc(50% + 1px),
      transparent calc(50% + 1px),
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      transparent calc(50% - 1px),
      var(--primary) calc(50% - 1px),
      var(--primary) calc(50% + 1px),
      transparent calc(50% + 1px),
      transparent 100%
    );
}

section#chart #basic-functions-group {
  height: 0px;
  overflow: hidden;
  display: none;
}
section#chart #basic-functions-group.is-open {
  display: contents;
  height: auto;
  overflow: visible;
}

section#chart #basic-functions-group > *,
section#chart #basic-functions-group > * > * {
  opacity: 0;
  transition: 0.5s ease;
  transform: translateY(-20px);
}
section#chart #basic-functions-group .is-visible {
  opacity: 1;
  transform: translateY(0);
}
section#chart .c-td-feature {
  display: flex;
  padding: var(--scale-8, 8px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--scale-4, 4px);
  align-self: stretch;
  border-right: 1px solid var(--border, #b3b6d0);
  border-bottom: 1px solid var(--border, #b3b6d0);
  background: var(--surface, #fff);
  color: var(--on-surface, #1b1c1f);
  font-family: "Noto Sans JP";
  font-size: var(--scale-14, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 21px */
}
section#chart div.chart__container .chart__body .body__note {
  color: var(--on-surface-variant, #76787c);
  font-family: "Noto Sans JP";
  font-size: var(--scale-12, 12px);
  font-style: normal;
  font-weight: 500;
  line-height: 120%; /* 14.4px */
}

@media screen and (max-width: 960px) {
  section#chart div.chart__container .chart__body {
    overflow-x: scroll;
  }
  section#chart {
    grid-template-columns:
      var(--table-group-width) var(--table-sub-width, 142px)
      var(--table-col-width, 226.8px) var(--table-col-width, 226.8px)
      var(--table-col-width, 226.8px) var(--table-col-width, 226.8px)
      var(--table-col-width, 226.8px);
  }

  section#chart .th {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 10;
  }
  section#chart .th--sub {
    left: var(--table-group-width);
  }

  section#chart .c-td-service--header {
    position: relative;
    top: 0;
    z-index: 1;
  }

  section#chart div.toggle-button {
    position: sticky;
    left: 0;
    top: 0;
    width: calc(100vw - var(--padding-inline, 24px) * 2);
  }

  section#chart div.chart__container .chart__body .body__note {
    position: sticky;
    left: 0;
    top: 0;
  }
}
@media screen and (max-width: 768px) {
  section#chart {
    order: 4;
    background: var(--primary-container, #ebf5ff);
  }

  section#chart .comparition-chart {
    display: flex;
  }
  section#chart .comparition-chart > .row:nth-of-type(1) {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 10;
  }
  section#chart .th {
    z-index: 0;
  }

  section#chart .th--service {
    display: grid;
  }
  section#chart .row {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
  }

  section#chart .row:has(.c-td-service) {
    width: min(168px, 100vw / 375 * 150);
  }

  section#chart .row:has(.c-td-feature) {
    width: min(138px, 100vw / 375 * 138);
  }
  section#chart .row[data-attr="外部システム連携"] {
    width: min(116px, 100vw / 375 * 120);
  }

  section#chart
    :is(.row[data-attr="訪問サポート"], .row[data-attr="月額費用"]) {
    width: min(107px, 100vw / 375 * 107);
  }
  section#chart .row:has(.c-td-service--estimate) {
    width: min(105px, 100vw / 375 * 105);
  }

  section#chart .row[data-attr="契約前の製品デモ"] {
    width: min(93px, 100vw / 375 * 80);
  }

  section#chart
    :is(
      .row[data-attr="導入支援"],
      .row[data-attr="新医療法改正"],
      .row[data-attr="費用変動"],
      .row[data-attr="初期費用"]
    ),
  #basic-functions-group .row {
    width: min(83px, 100vw / 375 * 83);
  }

  section#chart .row-group {
    display: grid;
    grid-template-rows: max-content;
  }

  section#chart .th {
    position: relative;
    height: var(--table-th-height, 72px);
    font-size: min(13px, 100vw / 375 * 13);
    border-right: 1px solid var(--surface, #fff);
  }

  section#chart .th--sub {
    border-right: 1px solid var(--border);
    height: var(--table-sub-height);
    font-size: min(11px, 100vw / 375 * 11);
  }
  section#chart .th--group {
    height: var(--table-group-height);
  }
  section#chart .th--service {
    grid-row: unset;
    grid-column: unset;
    border-bottom: none;
  }
  section#chart .c-td-service {
    padding: var(--scale-8, 6px);
    gap: var(--scale-4, 4px);
    display: flex;
    flex-direction: column;
    grid-row: unset;
    border-top: none;
    border-left: 1px solid var(--border, #b3b6d0);
    height: var(--table-col-height, 300px);
    justify-content: center;
  }
  section#chart .c-td-service--estimate {
    border-left: none;
  }
  section#chart .c-td-service div.name {
    flex-grow: 0;
    font-size: min(14px, 100vw / 375 * 14);
  }

  section#chart .c-td-service a {
    font-size: min(11px, 100vw / 375 * 11);
  }

  section#chart :is(.th--group--support, .th--group--price) {
    grid-row: unset;
    grid-column: span 3;
  }
  section#chart .th--group--function {
    grid-row: unset;
    grid-column: span 5;
  }

  section#chart .th--sub {
    grid-column: unset;
    left: 0;
  }
  section#chart .c-td-rate {
    height: var(--table-col-height, 300px);
  }
  section#chart .c-td-rate figure {
    width: min(100vw / 375 * 21, 21px);
  }
  section#chart .c-td-rate div.text {
    font-size: min(11px, 100vw / 375 * 11);
  }
  section#chart .c-td-rate div.subtext {
    font-size: min(10px, 100vw / 375 * 10);
  }
  section#chart .c-td-service--estimate a {
    display: flex;
    max-height: 96px;
    padding: var(--scale-8, 6px) var(--scale-16, 13px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--scale-8, 6px);
    flex: 1 0 0;
    align-self: stretch;
    border-radius: var(--scale-8, 6px);
  }
  section#chart div.toggle-button {
    width: fit-content;
    position: relative;
    border-top: 1px solid var(--border, #b3b6d0);
    border-bottom: 1px solid var(--border, #b3b6d0);
    border-left: none;
  }
  section#chart div.toggle-button button {
    flex-direction: column;
    font-size: min(15px, 100vw / 375 * 15);
    width: min(40px, 100vw / 375 * 40);
    height: 100%;
  }
  section#chart .c-td-feature {
    font-size: min(11px, 100vw / 375 * 11);
    height: var(--table-col-height, 300px);
  }
}

/*============================
#point
============================*/
section#point {
  display: flex;
  padding: var(--padding-block, 80px) var(--padding-inline, 24px);
  flex-direction: column;
  align-items: center;
  gap: var(--row-gap, 56px);
  align-self: stretch;
  background: linear-gradient(rgba(235, 245, 255, 0.8) 100%),
    url(../images/point-bg.png) center top/min(1366px, 100vw / 375 * 420) auto
      no-repeat,
    var(--primary-container, rgb(235, 245, 255));
}
section#point div.point__heading.c-heading {
  margin-inline: auto;
}
section#point div.point__unites {
  display: flex;
  max-width: var(--width-md, 1100px);
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 24px var(--scale-24, 24px);
  align-self: stretch;
  flex-wrap: wrap;
  margin-inline: auto;
}

section#point div.point__unites div.units__unit {
  display: flex;
  min-width: 180px;
  padding: var(--scale-14, 14px);
  flex-direction: column;
  align-items: center;
  gap: var(--scale-20, 20px);
  flex: 1 0 0;
  background: var(--surface, #fff);
  align-self: normal;
}
section#point div.point__unites div.units__unit figure {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  aspect-ratio: 318.67/159.34;
}
section#point div.point__unites div.units__unit figure img {
  width: 100%;
}

section#point div.point__unites div.units__unit .unit__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--scale-8, 8px);
  align-items: normal;
}
section#point div.point__unites div.units__unit h3 {
  color: var(--on-primary-container, #262680);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-28, 28px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 36.4px */
  letter-spacing: 1.12px;
  flex: 1 0 0;
}
section#point div.point__unites div.units__unit h4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--scale-4, 4px);
}

section#point div.point__unites div.units__unit h4 span {
  color: var(--on-primary-container, #262680);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: min(24px, 100vw / 1366 * 24);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 31.2px */
  background: var(--primary-container, #ebf5ff);
  display: flex;
  padding: var(--scale-2, 2px) var(--scale-4, 4px);
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 768px) {
  section#point {
    background: linear-gradient(
      180deg,
      #d8eaff 0%,
      var(--primary-container, #ebf5ff) 7.21%
    );
  }
  section#point div.point__unites {
    flex-direction: column;
    max-width: 560px;
  }
  section#point div.point__unites div.units__unit h4 span {
    font-size: min(24px, 100vw / 375 * 18);
  }
}

section#point div.point__unites div.units__unit p {
  color: #000;
  font-family: "Noto Sans JP";
  font-size: var(--scale-16, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 170%; /* 27.2px */
  letter-spacing: 1.28px;
}

/*============================
#ranking
============================*/
section#ranking {
  display: flex;
  padding: var(--padding-block, 80px) var(--padding-inline, 24px);
  flex-direction: column;
  align-items: center;
  gap: var(--row-gap, 56px);
  align-self: stretch;
  background: url(../images/ranking-bg.png) center top/100% auto no-repeat;
}
section#ranking div.ranking__units {
  display: flex;
  max-width: var(--width-md, 1100px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--scale-40, 40px);
  align-self: stretch;
  margin-inline: auto;
}
section#ranking div.ranking__units div.ranking__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  border-right: 1px solid var(--primary, #4a64ba);
  border-left: 1px solid var(--primary, #4a64ba);
}
section#ranking div.ranking__units div.ranking__unit div.unit__header {
  display: flex;
  padding: 0 var(--padding-inline, 24px);
  align-items: center;
  gap: var(--scale-16, 16px);
  align-self: stretch;
  background: var(--primary, #4a64ba);
}
section#ranking div.ranking__units div.ranking__unit div.unit__header a {
  display: contents;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__header
  .header__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--scale-4) var(--scale-20);
}
section#ranking div.ranking__units div.ranking__unit div.unit__header figure {
  height: min(64px, 100vw / 375 * 36);
  flex-shrink: 0;
  aspect-ratio: 102.15/64;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__header
  figure
  img {
  width: 100%;
}
section#ranking div.ranking__units div.ranking__unit div.unit__header h3 {
  color: var(--surface, #fff);

  /* h3 */
  font-family: "Noto Sans JP";
  font-size: min(32px, 100vw / 375 * 21);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 41.6px */
  letter-spacing: 1.28px;
}
@media screen and (max-width: 960px) {
  section#ranking div.ranking__units div.ranking__unit div.unit__header h3 {
    font-size: min(28px, 100vw / 375 * 21);
  }
}

section#ranking div.ranking__units div.ranking__unit div.unit__header h3 br.pc {
  display: none;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__header
  div.company {
  color: var(--surface, #fff);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-16, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 20.8px */
  letter-spacing: 0.64px;
}
section#ranking div.ranking__units div.ranking__unit {
  background: var(--surface-variant, #f5f5f7);
}
section#ranking div.ranking__units div.ranking__unit div.unit__body {
  display: flex;
  padding: var(--scale-16, 16px);
  align-items: flex-start;
  gap: var(--scale-16, 16px);
  align-self: stretch;
  flex-wrap: wrap;
}

section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div.body__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--scale-16, 16px);
  flex: 1 1 630px;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div.body__right {
  flex: 1 1 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--scale-16, 16px);
}

@media screen and (max-width: 768px) {
  section#ranking div.ranking__units div.ranking__unit div.unit__header {
    padding-top: min(12px, 100vw / 375 * 12);
    padding-bottom: min(12px, 100vw / 375 * 12);
  }

  section#ranking
    div.ranking__units
    div.ranking__unit
    div.unit__body
    :is(div.body__left, div.body__right) {
    display: contents;
  }
}

section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__swiper.swiper {
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--scale-8, 8px);
  padding: var(--scale-16, 16px);
  background: #d7d7d7;
  box-shadow: 0 0 var(--scale-8, 8px) rgba(0, 0, 0, 0.08);
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__swiper
  div.swiper__comment {
  padding: var(--scale-2, 2px) var(--scale-16, 16px);
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  color: var(--secondary, #e5545b);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: min(14px, 100vw / 375 * 10);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 18.2px */
  letter-spacing: 0.56px;
  display: flex;
  max-width: 360px;
  align-items: center;
  gap: var(--scale-8, 8px);
  align-self: stretch;
  background: var(--rate-great-container, #fff8cf);
  margin-inline: auto;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__swiper
  div.swiper-wrapper {
  width: 100%;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__swiper
  div.swiper-wrapper
  div.swiper-slide {
  width: 100% !important;
  box-sizing: border-box;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__swiper
  div.swiper-wrapper
  div.swiper-slide
  a
  img {
  display: block;
  width: 100%;
  height: auto;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__swiper
  div.swiper-button-next {
  background: url(../images/ranking-slide-next.svg) center center/ contain
    no-repeat;
  color: transparent;
  transform: translateX(25%);
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__swiper
  div.swiper-button-prev {
  background: url(../images/ranking-slide-prev.svg) center center/ contain
    no-repeat;
  color: transparent;
  transform: translateX(-25%);
}

section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__functions-container {
  width: 100%;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__functions-wrap {
  display: flex;
  padding-right: var(--scale-16, 16px);
  padding-left: var(--scale-16, 16px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--scale-16, 16px);
  align-self: stretch;
  background: var(--surface, #fff);
  box-shadow: 0 0 var(--scale-8, 8px) 0 rgba(0, 0, 0, 0.08);
  transition: 0.2s ease;
  padding-top: var(--scale-16, 16px);
  padding-bottom: var(--scale-16, 16px);
}

section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__functions-wrap.is-open {
  padding-top: var(--scale-16, 16px);
  padding-bottom: var(--scale-16, 16px);
  display: flex;
  height: auto;
  overflow: visible;
}

section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__functions-wrap
  h3 {
  display: flex;
  align-items: center;
  gap: var(--scale-8, 8px);
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__functions-wrap
  h3
  figure {
  display: flex;
  width: 24px;
  align-items: center;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__functions-wrap
  h3
  figure
  img {
  width: 100%;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__functions-wrap
  h3
  div {
  color: var(--primary, #4a64ba);
  font-family: "Noto Sans JP";
  font-size: var(--scale-16, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 20.8px */
  letter-spacing: 0.64px;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__functions-wrap
  div.functions-wrap__functions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--scale-8, 8px);
  width: 100%;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__functions-wrap
  div.functions-wrap__functions
  div.functions__function {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__functions-wrap
  div.functions-wrap__functions
  div.functions__function
  h4 {
  color: var(--on-surface, #1b1c1f);
  font-family: "Noto Sans JP";
  font-size: var(--scale-14, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 21px */
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__functions-wrap
  div.functions-wrap__functions
  div.functions__function
  div.function__rate {
  display: flex;
  align-items: center;
  align-self: stretch;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__functions-wrap
  div.functions-wrap__functions
  div.functions__function
  div.function__rate
  figure {
  display: flex;
  padding: var(--scale-4, 4px) var(--scale-8, 8px);
  align-items: center;
  align-self: stretch;
  border-radius: var(--scale-4, 4px) 0 0 var(--scale-4, 4px);
  border-top: 1px solid var(--border, #b3b6d0);
  border-bottom: 1px solid var(--border, #b3b6d0);
  border-left: 1px solid var(--border, #b3b6d0);
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__functions-wrap
  div.functions-wrap__functions
  div.functions__function
  :is(
    div.function__rate.function__rate--check,
    div.function__rate.function__rate--great
  )
  figure {
  background: var(--rate-great-container, #fff8cf);
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__functions-wrap
  div.functions-wrap__functions
  div.functions__function
  div.function__rate.function__rate--good
  figure {
  background: var(--rate-good-container, #e3ffe2);
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__functions-wrap
  div.functions-wrap__functions
  div.functions__function
  :is(
    div.function__rate.function__rate--bad,
    div.function__rate.function__rate--check-bad
  )
  figure {
  background: var(--surface-variant, #f5f5f7);
}

section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__functions-wrap
  div.functions-wrap__functions
  div.functions__function
  div.function__rate
  figure
  img {
  width: var(--scale-32, 32px);
  aspect-ratio: 1/1;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__functions-wrap
  div.functions-wrap__functions
  div.functions__function
  div.function__rate
  div.rate__text {
  display: flex;
  padding: var(--scale-8, 8px);
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 0 var(--scale-4, 4px) var(--scale-4, 4px) 0;
  border-top: 1px solid var(--border, #b3b6d0);
  border-right: 1px solid var(--border, #b3b6d0);
  border-bottom: 1px solid var(--border, #b3b6d0);
  background: var(--surface, #fff);
  color: var(--on-surface, #1b1c1f);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-16, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 20.8px */
  flex-direction: column;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__functions-wrap
  div.functions-wrap__functions
  div.functions__function
  div.function__rate
  div.rate__subtext {
  color: var(--on-surface, #1b1c1f);
  font-family: "Noto Sans JP";
  font-size: var(--scale-12, 12px);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__data-integration {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  box-shadow: 0 0 var(--scale-8, 8px) 0 rgba(0, 0, 0, 0.08);
  width: 100%;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__data-integration
  div.data-integration__header {
  display: flex;
  padding: var(--scale-8, 8px) var(--scale-80, 80px) var(--scale-8, 8px)
    var(--scale-16, 16px);
  justify-content: center;
  align-items: center;
  gap: var(--scale-24, 24px);
  align-self: stretch;
  background: var(--primary, #4a64ba);
  position: relative;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__data-integration
  div.data-integration__header
  h3 {
  flex: 1 0 0;
  color: var(--surface, #fff);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-16, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: 160%; /* 25.6px */
}

section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__data-integration
  div.data-integration__header
  h3
  small {
  color: var(--surface, #fff);
  font-family: "Noto Sans JP";
  font-size: var(--scale-14, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__data-integration
  div.data-integration__header
  figure {
  display: flex;
  width: var(--scale-80, 80px);
  justify-content: center;
  align-items: center;
  aspect-ratio: 80/69.05;
  position: absolute;
  right: 32px;
  bottom: 0px;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__data-integration
  div.data-integration__header
  figure
  img {
  width: 100%;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__data-integration
  div.data-integration__rate {
  display: flex;
  padding: var(--scale-16, 16px);
  justify-content: center;
  align-items: center;
  gap: var(--scale-8, 8px);
  align-self: stretch;
  border-right: 1px solid var(--border, #b3b6d0);
  border-bottom: 1px solid var(--border, #b3b6d0);
  border-left: 1px solid var(--border, #b3b6d0);
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__data-integration
  div.data-integration__rate.data-integration__rate--great {
  background: var(--rate-great-container, #fff8cf);
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__data-integration
  div.data-integration__rate.data-integration__rate--good {
  background: var(--rate-good-container, #e3ffe2);
}

section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__data-integration
  div.data-integration__rate
  figure {
  width: 32px;
  aspect-ratio: 1/1;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__data-integration
  div.data-integration__rate
  figure
  img {
  width: 100%;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__data-integration
  div.data-integration__rate
  div.rate__text {
  flex: 1 0 0;
  color: var(--on-surface, #1b1c1f);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-16, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 20.8px */
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__data-integration
  div.data-integration__rate
  div.rate__text
  br {
  display: none;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__data-integration
  div.data-integration__rate
  div.rate__text
  .text__subtext {
  color: var(--on-surface, #1b1c1f);
  font-family: "Noto Sans JP";
  font-size: var(--scale-14, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__data-integration
  div.data-integration__rate
  div.rate__text
  .text__subtext
  .only-chart {
  display: none;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__support-wrap {
  display: flex;
  padding: var(--scale-16, 16px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--scale-16, 16px);
  align-self: stretch;
  background: var(--surface, #fff);
  box-shadow: 0 0 var(--scale-8, 8px) 0 rgba(0, 0, 0, 0.08);
  width: 100%;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__support-wrap
  h3 {
  display: flex;
  height: 24px;
  align-items: center;
  gap: var(--scale-8, 8px);
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__support-wrap
  h3
  figure {
  display: flex;
  width: 24px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__support-wrap
  h3
  figure
  img {
  width: 100%;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__support-wrap
  h3
  div {
  color: var(--primary, #4a64ba);
  font-family: "Noto Sans JP";
  font-size: var(--scale-16, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 20.8px */
  letter-spacing: 0.64px;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__support-wrap
  div.support-wrap__supports {
  display: flex;
  align-items: center;
  gap: var(--scale-8, 8px);
  align-self: stretch;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__support-wrap
  div.support-wrap__supports
  div.supports__support {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__support-wrap
  div.support-wrap__supports
  div.supports__support
  h4 {
  display: flex;
  padding: var(--scale-8, 8px);
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border: 1px solid var(--border, #b3b6d0);
  background: var(--surface-variant, #f5f5f7);
  color: var(--primary, #4a64ba);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-14, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 18.2px */
  letter-spacing: 0.56px;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__support-wrap
  div.support-wrap__supports
  div.supports__support
  div.support__rate {
  display: flex;
  padding: var(--scale-16, 16px);
  justify-content: center;
  align-items: center;
  gap: var(--scale-8, 8px);
  align-self: stretch;
  border-right: 1px solid var(--border, #b3b6d0);
  border-bottom: 1px solid var(--border, #b3b6d0);
  border-left: 1px solid var(--border, #b3b6d0);
}

section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__support-wrap
  div.support-wrap__supports
  div.supports__support
  div.support__rate.support__rate--great {
  background: var(--rate-great-container, #fff8cf);
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__support-wrap
  div.support-wrap__supports
  div.supports__support
  div.support__rate.support__rate--good {
  background: var(--rate-good-container, #e3ffe2);
}

section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__support-wrap
  div.support-wrap__supports
  div.supports__support
  div.support__rate
  figure {
  width: 32px;
  aspect-ratio: 1/1;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__support-wrap
  div.support-wrap__supports
  div.supports__support
  div.support__rate
  figure
  img {
  width: 100%;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__price-wrap {
  display: flex;
  padding: var(--scale-16, 16px);
  flex-direction: column;
  align-items: center;
  gap: var(--scale-20, 20px);
  align-self: stretch;
  background: var(--surface, #fff);
  box-shadow: 0 0 var(--scale-8, 8px) 0 rgba(0, 0, 0, 0.08);
  width: 100%;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__price-wrap
  h3 {
  display: flex;
  align-items: center;
  gap: var(--scale-8, 8px);
  align-self: stretch;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__price-wrap
  h3
  figure {
  display: flex;
  width: 24px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__price-wrap
  h3
  figure
  img {
  width: 100%;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__price-wrap
  h3
  div {
  color: var(--primary, #4a64ba);
  font-family: "Noto Sans JP";
  font-size: var(--scale-16, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 20.8px */
  letter-spacing: 0.64px;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__price-wrap
  div.price-wrap__prices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  border-top: 1px solid var(--border, #b3b6d0);
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__price-wrap
  div.price-wrap__prices
  div.prices__price {
  display: flex;
  align-items: center;
  align-self: stretch;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__price-wrap
  div.price-wrap__prices
  div.prices__price
  h4 {
  display: flex;
  flex: 0 0 112px;
  padding: var(--scale-8, 8px) var(--scale-16, 16px);
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-left: 1px solid var(--border, #b3b6d0);
  border-right: 1px solid var(--border, #b3b6d0);
  border-bottom: 1px solid var(--border, #b3b6d0);
  background: var(--surface-variant, #f5f5f7);
  color: var(--primary, #4a64ba);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-14, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 18.2px */
  letter-spacing: 0.56px;
}

@media screen and (max-width: 768px) {
  section#ranking
    div.ranking__units
    div.ranking__unit
    div.unit__body
    div
    div.body__price-wrap
    div.price-wrap__prices
    div.prices__price
    h4 {
    flex: 0 0 140px;
  }
}

section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__price-wrap
  div.price-wrap__prices
  div.prices__price
  div.price__rate {
  display: flex;
  padding: var(--scale-16, 16px);
  justify-content: center;
  align-items: center;
  gap: var(--scale-8, 8px);
  flex: 1 0 0;
  border-right: 1px solid var(--border, #b3b6d0);
  border-bottom: 1px solid var(--border, #b3b6d0);
  background: var(--surface, #fff);
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__price-wrap
  div.price-wrap__prices
  div.prices__price
  div.price__rate
  div.rate__text {
  flex: 1 0 0;
  color: var(--on-surface, #1b1c1f);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-16, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 20.8px */
  display: flex;
  flex-direction: column;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__price-wrap
  div.price-wrap__prices
  div.prices__price
  div.price__rate
  div.rate__subtext {
  color: var(--on-surface, #1b1c1f);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-14, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 18.2px */
}
section#ranking .only-chart {
  display: none;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__price-wrap
  div.price-wrap__prices
  div.prices__price
  div.price__rate.price__rate--great {
  background: var(--rate-great-container, #fff8cf);
}

section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__price-wrap
  div.price-wrap__prices
  div.prices__price
  div.price__rate.price__rate--good {
  background: var(--rate-good-container, #e3ffe2);
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__price-wrap
  div.price-wrap__button {
  width: 100%;
}

section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__price-wrap
  div.price-wrap__button
  a {
  display: flex;
  width: 100%;
  max-width: 293px;
  padding: var(--scale-12, 12px) var(--scale-16, 16px);
  justify-content: center;
  align-items: center;
  gap: var(--scale-8, 8px);
  border-radius: 1000px;
  background: var(--tertiary, #41c0a7);
  box-shadow: var(--scale-2, 2px) var(--scale-4, 4px) 0 0 rgba(0, 0, 0, 0.2);
  text-decoration: none;
  margin-inline: auto;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__price-wrap
  div.price-wrap__button
  a
  figure.icon-estimate {
  width: 24px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__price-wrap
  div.price-__button
  a
  figure.icon-estimate
  img {
  width: 100%;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__price-wrap
  div.price-wrap__button
  a
  div {
  color: var(--surface, #fff);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 26px */
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__price-wrap
  div.price-wrap__button
  a
  figure.icon-arrow {
  width: 16px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div
  div.body__price-wrap
  div.price-wrap__button
  a
  figure.icon-arrow
  img {
  width: 100%;
}
section#ranking div.ranking__units div.ranking__unit div.unit__point {
  display: flex;
  padding: var(--scale-16, 16px);
  flex-direction: column;
  align-items: center;
  gap: var(--scale-4, 4px);
  align-self: stretch;
  background: var(--surface, #fff);
  box-shadow: 0 0 var(--scale-8, 8px) 0 rgba(0, 0, 0, 0.08);
  width: 100%;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div.unit__point
  h3 {
  width: calc(1em / 28 * 320);
  aspect-ratio: 320/88.35;
  background: url("../images/ranking-point.png") no-repeat center/contain;
  text-align: center;
  padding-top: 1.3em;
  font-weight: bold;
  color: var(--surface, #fff);
  font-size: var(--scale-28, 28px);
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div.unit__point
  ul {
  display: flex;
  width: 100%;
  max-width: 800px;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  margin-inline: auto;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div.unit__point
  ul
  li {
  display: flex;
  padding: var(--scale-4, 4px) 0;
  align-items: center;
  gap: var(--scale-16, 16px);
  align-self: stretch;
  border-bottom: 1px solid var(--border, #b1b1b1);

  color: var(--on-surface, #313535);
  font-family: "Noto Sans JP";
  font-size: var(--scale-18, 18px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div.unit__point
  ul
  li::before {
  content: "";
  display: block;
  display: flex;
  padding: 0 var(--scale-4, 4px);
  align-items: center;
  align-self: stretch;
  background: url(../images/ranking-checkbox.svg) center center/ 24px auto
      no-repeat,
    var(--primary-container, #ebf5ff);
  width: 32px;
}

section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__body
  div.unit__point
  ul
  li
  span.highlight {
  color: var(--secondary, #e5545b);
  font-family: "Noto Sans JP";
  font-size: var(--scale-18, 18px);
  font-style: normal;
  font-weight: 700;
  display: inline;
  line-height: 150%; /* 27px */
}
section#ranking div.ranking__units div.ranking__unit div.unit__cta {
  display: flex;
  padding: var(--padding-inline, 24px);
  justify-content: center;
  align-items: center;
  gap: var(--col-gap, 40px);
  align-self: stretch;
  border-bottom: 1px solid var(--primary, #4a64ba);
  background: var(--primary-container-dark, #bcdafd);
}
section#ranking div.ranking__units div.ranking__unit div.unit__cta a {
  display: flex;
  width: 100%;
  max-width: 400px;
  padding: var(--scale-16, 16px);
  justify-content: center;
  align-items: center;
  gap: var(--scale-8, 8px);
  flex: 1 0 0;
  border-radius: 1000px;
  background: var(--secondary, #e5545b);
  box-shadow: var(--scale-2, 2px) var(--scale-4, 4px) 0 0 rgba(0, 0, 0, 0.2);
  text-decoration: none;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__cta
  a
  figure.icon-zoom {
  width: 28px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__cta
  a
  figure.icon-zoom
  img {
  width: 100%;
}
section#ranking div.ranking__units div.ranking__unit div.unit__cta a div {
  color: var(--surface, #fff);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-32, 32px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 41.6px */
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__cta
  a
  figure.icon-arrow {
  width: 24px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}
section#ranking
  div.ranking__units
  div.ranking__unit
  div.unit__cta
  a
  figure.icon-arrow
  img {
  width: 100%;
}

@media screen and (max-width: 768px) {
  section#ranking div.ranking__units div.ranking__unit div.unit__header {
    margin-left: calc(var(--padding-inline) * -1);
    margin-right: calc(var(--padding-inline) * -1);
  }
  section#ranking div.ranking__units div.ranking__unit {
    padding-left: var(--padding-inline);
    padding-right: var(--padding-inline);
    border-bottom: 1px solid var(--primary, #4a64ba);
    padding-bottom: var(--scale-16);
    gap: var(--scale-16, 13px);
  }
  section#ranking div.ranking__units div.ranking__unit div.unit__body {
    display: contents;
  }

  section#ranking
    div.ranking__units
    div.ranking__unit
    div.unit__body
    div
    div.body__functions-container {
    gap: var(--scale-16, 13px);
    display: flex;
    flex-direction: column;
    order: 3;
  }

  section#ranking
    div.ranking__units
    div.ranking__unit
    div.unit__body
    div
    div.body__functions-wrap {
    padding-top: 0;
    padding-bottom: 0;
    height: 0px;
    overflow: hidden;
    display: none;
  }

  section#ranking
    div.ranking__units
    div.ranking__unit
    div.unit__body
    div
    div.body__functions-wrap
    div.functions-wrap__functions {
    grid-template-columns: 1fr;
  }

  section#ranking div.ranking__units div.ranking__unit div.unit__cta {
    order: 6;
    border-bottom: none;
  }
  section#ranking div.ranking__units div.ranking__unit .unit__point {
    order: 7;
  }
}

section#ranking a.ranking__anchor-button {
  display: flex;
  width: 100%;
  max-width: 400px;
  padding: var(--scale-16, 16px) var(--scale-24, 24px);
  justify-content: center;
  align-items: center;
  gap: var(--scale-16, 16px);
  align-self: stretch;
  border-radius: 1000px;
  border: var(--scale-2, 2px) solid var(--primary, #4a64ba);
  background: #fff;
  box-shadow: var(--scale-2, 2px) var(--scale-4, 4px) 0 0 rgba(0, 0, 0, 0.2);
  margin-inline: auto;
  text-decoration: none;
}
section#ranking a.ranking__anchor-button figure.item__icon {
  display: flex;
  width: var(--scale-28, 28px);
  align-items: center;
  gap: 16px;
  aspect-ratio: 1/1;
}
section#ranking a.ranking__anchor-button figure.item__icon img {
  width: 100%;
}
section#ranking a.ranking__anchor-button div {
  color: var(--primary, #4a64ba);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-24, 24px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 31.2px */
}
section#ranking a.ranking__anchor-button figure.item__arrow {
  width: 28px;
  aspect-ratio: 1/1;
}
section#ranking a.ranking__anchor-button figure.item__arrow img {
  width: 100%;
}