.merit {
  padding: 0rem 2rem 10rem;
}
@media (720px <= width) {
  .merit {
    padding: 20rem max(50% - 85rem, 11rem);
  }
}
.merit .logos {
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
}
@media (720px <= width) {
  .merit .logos {
    font-size: 3.6rem;
  }
}
.merit .logos img {
  width: 19.8rem;
  margin-right: 1rem;
}
@media (720px <= width) {
  .merit .logos img {
    width: 33rem;
  }
}
.merit .lead {
  margin-top: 2rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 150%;
  color: var(--clr-main);
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
}
.merit .lead strong {
  font-size: 2.8rem;
}
@media (720px <= width) {
  .merit .lead {
    margin-top: 3.7rem;
    font-size: 3.6rem;
    position: relative;
  }
  .merit .lead strong {
    font-size: 4.6rem;
  }
  .merit .lead::before, .merit .lead::after {
    content: "";
    width: 4px;
    height: 7.3rem;
    background: var(--clr-main);
    border-radius: 100rem;
    position: absolute;
    top: 50%;
  }
  .merit .lead::before {
    transform: rotate(-15deg) translateY(-50%);
    left: -3rem;
  }
  .merit .lead::after {
    transform: rotate(15deg) translateY(-50%);
    right: -3rem;
  }
}
.merit__lists {
  margin-top: 4rem;
  display: grid;
  gap: 3rem;
}
@media (720px <= width) {
  .merit__lists {
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 3rem 4.1176470588%;
  }
}
.merit__lists .item {
  padding: 6rem 2rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%), #009bff;
  color: #fff;
  position: relative;
}
@media (720px <= width) {
  .merit__lists .item {
    padding: 8rem 5rem;
  }
}
.merit__lists .lbl {
  position: absolute;
  top: 0;
  left: calc(50% - 8rem);
  width: 16rem;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--clr-main);
  background-color: var(--clr-yellow);
  border-radius: 0 0 1rem 1rem;
  padding: 0.7rem 0;
}
@media (720px <= width) {
  .merit__lists .lbl {
    left: calc(50% - 11rem);
    width: 22rem;
    font-size: 2rem;
    padding: 1rem;
  }
}
.merit__lists .title {
  margin-top: 3rem;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  line-height: 160%;
}
@media (720px <= width) {
  .merit__lists .title {
    margin-top: 4rem;
    font-size: 2.8rem;
  }
}
.merit__lists .text {
  margin-top: 1.5rem;
  font-size: 1.6rem;
  line-height: 175%;
}
@media (720px <= width) {
  .merit__lists .text {
    margin-top: 2rem;
    font-size: 2rem;
  }
}

.plan {
  padding: 10rem 2rem;
  background-color: var(--clr-bg);
}
@media (720px <= width) {
  .plan {
    padding: 20rem max(50% - 85rem, 6rem);
  }
}
.plan__header {
  display: grid;
  gap: 4rem;
}
@media (720px <= width) {
  .plan__header {
    grid-template-columns: repeat(2, 1fr);
    gap: 11.7647058824%;
  }
}
.plan__coution {
  font-size: 1.6rem;
  line-height: 160%;
  color: #999999;
}
@media (720px <= width) {
  .plan__coution {
    font-size: 2rem;
    line-height: 3.6rem;
  }
}
.plan__body {
  margin-top: 7.5rem;
}
@media (720px <= width) {
  .plan__body {
    margin-top: 16rem;
    max-width: 150rem;
    margin-left: max(50% - 75rem, 0rem);
    margin-right: max(50% - 75rem, 0rem);
  }
}
.plan .graph table {
  width: 100%;
}
.plan .graph th,
.plan .graph td {
  border: 1px solid var(--clr-line);
  padding: 1.6rem;
}
.plan .graph th.nopadding,
.plan .graph td.nopadding {
  padding: 0 1.6rem;
}
@media (1024px <= width) {
  .plan .graph th,
  .plan .graph td {
    padding: 4rem;
  }
  .plan .graph th.nopadding,
  .plan .graph td.nopadding {
    padding: 4rem 0;
  }
}
.plan .graph th {
  background: var(--clr-main);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 175%;
  text-align: center;
  white-space: nowrap;
}
@media (1024px <= width) {
  .plan .graph th {
    font-size: 2rem;
  }
}
.plan .graph td {
  background-color: #fff;
  text-align: center;
}
@media (1024px <= width) {
  .plan .graph .arrows {
    display: inline-flex;
    align-items: baseline;
  }
  .plan .graph .arrows::after {
    content: "";
    width: 2.6rem;
    height: 2.6rem;
    background: url('data:image/svg+xml;charset=utf8, <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M-1.20574e-06 17.9745L-3.35969e-07 8.02551L13.1313 8.02551L13.1313 4.24704e-07L26 13L13.1313 26L13.1313 17.9745L-1.20574e-06 17.9745Z" fill="%23FFE100"/></svg>') center/contain no-repeat;
    display: block;
    order: 2;
    align-self: center;
    margin: 0 3rem;
  }
  .plan .graph .arrows .through {
    order: 1;
    align-self: center;
  }
  .plan .graph .arrows .price {
    order: 3;
  }
  .plan .graph .arrows .komi {
    order: 4;
  }
}
.plan .graph .through {
  text-decoration: line-through;
}
@media (1024px <= width) {
  .plan .graph .through {
    font-size: 2rem;
  }
}
.plan .graph .price {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}
@media (1024px <= width) {
  .plan .graph .price {
    font-size: 2rem;
  }
}
.plan .graph .price strong {
  font-size: 3.2rem;
  line-height: 1;
  color: var(--clr-main);
  display: inline-block;
}
@media (1024px <= width) {
  .plan .graph .price strong {
    font-size: 4rem;
  }
}
.plan .graph .price.txt {
  margin-top: 1rem;
  color: var(--clr-main);
  font-size: 1.92rem;
  line-height: 130%;
}
@media (1024px <= width) {
  .plan .graph .price.txt {
    font-size: 2.4rem;
  }
}
.plan .graph .price.txt strong {
  font-size: 2.5rem;
  line-height: 130%;
}
@media (720px <= width) {
  .plan .graph .price.txt strong {
    font-size: 3.2rem;
  }
}
.plan .graph .komi {
  font-size: 1.6rem;
  font-weight: 700;
}
@media (1024px <= width) {
  .plan .graph .komi {
    font-size: 2rem;
  }
}
@media (1024px <= width) {
  .plan .graph .column3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (1024px <= width) {
  .plan .graph .column2 {
    grid-column: span 2;
  }
}
.plan .graph .box {
  padding: 2.1rem 0;
}
@media (1024px <= width) {
  .plan .graph .box {
    padding: 0;
  }
}
.plan .graph .box + .box {
  border-top: 1px solid var(--clr-line);
}
@media (1024px <= width) {
  .plan .graph .box + .box {
    border-top: none;
    border-left: 1px solid var(--clr-line);
  }
}
.plan .graph .box .label {
  line-height: 1;
}
.plan .graph .box .label span {
  color: var(--clr-main);
  border: 1px solid var(--clr-main);
  border-radius: 100rem;
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1;
  padding: 0.3rem 1.4rem;
}
@media (1024px <= width) {
  .plan .graph .box .label span {
    font-size: 2rem;
    padding: 0.5rem 1.6rem;
  }
}
.plan .graph .box .label span + span {
  margin-top: 0.6rem;
}
@media (1024px <= width) {
  .plan .graph .box .label span + span {
    margin-left: 0.5rem;
  }
}
.plan .graph .box .label + .price {
  margin-top: 0.5rem;
}
@media (1024px <= width) {
  .plan .graph .box .label + .price {
    margin-top: 2rem;
  }
}
.plan .graph .kessai {
  padding-bottom: 2rem;
  display: grid;
  gap: 0.2rem;
}
@media (1024px <= width) {
  .plan .graph .kessai {
    grid-template-columns: repeat(2, 1fr);
    margin: 3rem max(5%, 5rem) 0;
  }
}
.plan .graph .kessai-box {
  background-color: var(--clr-bg);
  padding: 1rem;
}
@media (720px <= width) {
  .plan .graph .kessai-box {
    padding: 2.2rem max(5%, 2.2rem);
    display: grid;
    grid-template-columns: 6rem auto;
    gap: 1.5rem;
    align-items: center;
  }
}
.plan .graph .kessai .lbl {
  background-color: #999;
  font-weight: 700;
  color: #fff;
}
@media (720px <= width) {
  .plan .graph .kessai .lbl {
    aspect-ratio: 1;
    line-height: 1.2;
    display: grid;
    place-content: center;
  }
}
@media (1024px <= width) {
  .plan .graph .kessai .lbl {
    font-size: 2rem;
  }
}
.plan .graph .kessai .txt {
  margin-top: 0.5rem;
  line-height: 140%;
}
@media (1024px <= width) {
  .plan .graph .kessai .txt {
    margin-top: 0;
    text-align: left;
    font-size: 2rem;
    line-height: 160%;
  }
}
.plan .graph .kikan {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 130%;
  color: var(--clr-main);
}
@media (720px <= width) {
  .plan .graph .kikan {
    font-size: 3.2rem;
  }
}
.plan .guidline {
  margin-top: 10rem;
  display: grid;
  gap: 10rem;
}
@media (720px <= width) {
  .plan .guidline {
    margin-top: 12rem;
    gap: 12rem;
  }
}
.plan .guidline .headline {
  font-size: 2.4rem;
  line-height: 3.6rem;
}
@media (720px <= width) {
  .plan .guidline .headline {
    font-size: 3.6rem;
    line-height: 4.8rem;
  }
}
.plan .guidline .headline + * {
  margin-top: 4rem;
}
@media (720px <= width) {
  .plan .guidline .headline + * {
    margin-top: 6rem;
  }
}
.plan .guidline ol,
.plan .guidline ul,
.plan .guidline p {
  font-size: 1.6rem;
  line-height: 175%;
}
@media (720px <= width) {
  .plan .guidline ol,
  .plan .guidline ul,
  .plan .guidline p {
    font-size: 2rem;
    line-height: 1.8;
  }
}
.plan .guidline li .lbl {
  font-weight: 700;
}

.flow {
  padding: 10rem 2rem;
}
@media (720px <= width) {
  .flow {
    padding: 20rem max(50% - 85rem, 6rem);
  }
}
@media (1024px <= width) {
  .flow {
    display: grid;
    grid-template-columns: 23.5294117647% 76.4705882353%;
  }
}
@media (720px <= width) {
  .flow__title {
    min-width: 29rem;
  }
}
.flow__steps {
  margin-top: 4rem;
  display: grid;
  gap: 2rem;
}
@media (720px <= width) {
  .flow__steps {
    gap: 3rem;
  }
}
@media (1024px <= width) {
  .flow__steps {
    margin-top: 0;
  }
}
.flow .step {
  background-color: var(--clr-bg);
  padding: 3rem 2rem 4rem;
}
@media (720px <= width) {
  .flow .step {
    padding: 4rem 6rem;
    --size: 30rem;
  }
  .flow .step:not(:last-child) .title {
    position: relative;
  }
  .flow .step:not(:last-child) .title::after {
    content: "";
    width: 1px;
    height: var(--size);
    border-left: 4px dotted var(--clr-main);
    position: absolute;
    left: 4.9rem;
    top: 12rem;
    z-index: 2;
  }
}
.flow .title {
  display: grid;
  grid-template-columns: 6rem auto;
  align-items: center;
  gap: 1.5rem;
}
@media (720px <= width) {
  .flow .title {
    grid-template-columns: 10rem auto;
    gap: 4rem;
  }
}
.flow .title .num {
  display: grid;
  place-content: center;
  gap: 0.2rem;
  aspect-ratio: 1;
  background-color: #fff;
  border: 1px solid var(--clr-main);
  color: var(--clr-main);
  border-radius: 100em;
  text-align: center;
}
@media (720px <= width) {
  .flow .title .num {
    gap: 0.4rem;
  }
}
.flow .title .num span {
  font-weight: 700;
}
.flow .title .num span:nth-child(1) {
  font-size: 1rem;
  line-height: 1em;
}
@media (720px <= width) {
  .flow .title .num span:nth-child(1) {
    font-size: 1.6rem;
    line-height: 1;
  }
}
.flow .title .num span:nth-child(2) {
  font-size: 2.2rem;
  line-height: 1em;
}
@media (720px <= width) {
  .flow .title .num span:nth-child(2) {
    font-size: 3.6rem;
    line-height: 1;
  }
}
.flow .title .lbl {
  font-size: 2rem;
  font-weight: 700;
  line-height: 160%;
  color: var(--clr-main);
}
@media (720px <= width) {
  .flow .title .lbl {
    font-size: 2.8rem;
  }
}
.flow .text {
  margin-top: 1.5rem;
  font-size: 1.6rem;
  line-height: 175%;
}
@media (720px <= width) {
  .flow .text {
    margin-top: 0;
    margin-left: 14rem;
    font-size: 2rem;
    line-height: 180%;
  }
}
.flow .text a {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: var(--clr-main);
  font-weight: 700;
}
@media (width < 720px) {
  .flow .img {
    margin-top: 2rem;
  }
}

.contact {
  padding: 10rem 2rem;
  background-color: var(--clr-bg);
}
@media (720px <= width) {
  .contact {
    padding: 20rem max(50% - 85rem, 6rem);
  }
}
.contact__header {
  display: grid;
  gap: 4rem;
}
@media (1024px <= width) {
  .contact__header {
    grid-template-columns: repeat(2, 1fr);
    gap: 11.7647058824%;
  }
}
.contact__lead {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 180%;
}
@media (720px <= width) {
  .contact__lead {
    font-size: 2.2rem;
  }
}
.contact__body {
  margin-top: 6rem;
  display: grid;
  gap: 2rem;
}
@media (1024px <= width) {
  .contact__body {
    grid-template-columns: repeat(2, 1fr);
    gap: 3.5294117647%;
  }
}
.contact .box {
  padding: 4rem 2rem 5rem;
  color: #fff;
  text-align: center;
  background-color: var(--color);
}
@media (720px <= width) {
  .contact .box {
    padding: 6rem 5rem 5rem;
  }
}
.contact .box .arrow {
  width: 3rem;
  aspect-ratio: 1;
  display: block;
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  background: center/contain no-repeat;
}
@media (720px <= width) {
  .contact .box .arrow {
    width: 5rem;
    right: 2.5rem;
  }
}
@media (1280px <= width) {
  .contact .box .arrow {
    width: 7rem;
    right: 4rem;
  }
}
.contact .box.entryinput {
  --color: var(--clr-main);
}
.contact .box.entryinput .arrow {
  background-image: url('data:image/svg+xml;charset=utf8, <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="15" cy="15" r="15" fill="%23F5F5F5"/><path d="M15.0264 10.2316C15.4505 9.87827 16.081 9.93569 16.4346 10.3596L19.7686 14.3596C20.0776 14.7304 20.0776 15.27 19.7686 15.6408L16.4346 19.6408C16.081 20.0647 15.4505 20.1221 15.0264 19.7687C14.6021 19.4152 14.5449 18.7838 14.8984 18.3596L16.8643 16.0002H9C8.44772 16.0002 8 15.5525 8 15.0002C8 14.4479 8.44772 14.0002 9 14.0002H16.8643L14.8984 11.6408C14.5449 11.2165 14.6021 10.5852 15.0264 10.2316Z" fill="%23009BFF"/></svg>');
}
@media (hover: hover) and (width >= 720px) {
  .contact .box.entryinput a {
    transition: all var(--speed) ease-in-out;
  }
  .contact .box.entryinput a:hover {
    background-color: var(--clr-main);
    color: #fff;
  }
}
.contact .box.memberinput {
  --color: #000042;
}
.contact .box.memberinput .arrow {
  background-image: url('data:image/svg+xml;charset=utf8, <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="15" cy="15" r="14.7667" fill="%23F5F5F5" stroke="%23000042" stroke-width="0.466667"/><path d="M15.0264 10.2316C15.4505 9.87827 16.081 9.93569 16.4346 10.3596L19.7686 14.3596C20.0776 14.7304 20.0776 15.27 19.7686 15.6408L16.4346 19.6408C16.081 20.0647 15.4505 20.1221 15.0264 19.7687C14.6021 19.4152 14.5449 18.7838 14.8984 18.3596L16.8643 16.0002H9C8.44772 16.0002 8 15.5525 8 15.0002C8 14.4479 8.44772 14.0002 9 14.0002H16.8643L14.8984 11.6408C14.5449 11.2165 14.6021 10.5852 15.0264 10.2316Z" fill="%23000042"/></svg>');
}
@media (hover: hover) and (width >= 720px) {
  .contact .box.memberinput a {
    transition: all var(--speed) ease-in-out;
  }
  .contact .box.memberinput a:hover {
    background-color: var(--color);
    color: #fff;
  }
}
.contact .box .lbl {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 3.6rem;
}
@media (1280px <= width) {
  .contact .box .lbl {
    font-size: 3.2rem;
    line-height: 4.8rem;
  }
}
.contact .box .buttonarea {
  text-align: left;
  container-type: inline-size;
}
.contact .box .buttonarea a {
  background-color: #fff;
  border-radius: 100rem;
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color);
  padding: 2.2rem 2rem;
  position: relative;
}
@media (720px <= width) {
  .contact .box .buttonarea a {
    padding: 3rem 8rem 3rem 4rem;
    font-size: 1.8rem;
    line-height: 1.3;
  }
  .contact .box .buttonarea a span {
    white-space: nowrap;
  }
  .contact .box .buttonarea a::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #fff;
    pointer-events: none;
    border-radius: 100rem;
  }
}
@media (1280px <= width) {
  .contact .box .buttonarea a {
    font-size: 2.4rem;
    padding: 4.4rem 13rem 4.4rem 5rem;
  }
}