.step-lead {
  text-align: center; }
  .step-lead-copy {
    font-weight: 600;
    font-feature-settings: "palt";
    line-height: 1.5;
    display: inline;
    background-image: linear-gradient(90deg, #fedf54, #fedf54);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 0.5em; }
  .step-lead.standby.appeared .step-lead-copy {
    animation: border 2s ease forwards; }

@keyframes border {
  0% {
    background-size: 0 0.5em; }
  100% {
    background-size: 100% 0.5em; } }
.step-head {
  padding-left: 0;
  padding-right: 0;
  line-height: 1.25; }
  .step-head-text {
    display: inline-flex;
    align-items: center;
    color: #FFF;
    background-color: #00532e;
    padding-left: 2rem;
    padding-right: 4rem;
    height: 2em;
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
    min-width: 14em; }

.step-video {
  display: flex;
  justify-content: center; }
  .step-video video,
  .step-video iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; }

.step-image {
  text-align: center; }
  .step-image img {
    margin-left: auto;
    margin-right: auto; }

.step-list > li.step00 .step-list-head .num {
  background-color: #924898; }
.step-list > li.step00 .step-list-head .text {
  color: #924898; }
.step-list > li.step01 .step-list-head .num {
  background-color: #e95464; }
.step-list > li.step01 .step-list-head .text {
  color: #e95464; }
.step-list > li.step02 .step-list-head .num {
  background-color: #c8161d; }
.step-list > li.step02 .step-list-head .text {
  color: #c8161d; }
.step-list > li.step03 .step-list-head .num {
  background-color: #ea5504; }
.step-list > li.step03 .step-list-head .text {
  color: #ea5504; }
.step-list-head {
  display: flex;
  align-items: center;
  font-weight: 600; }
  .step-list-head .num {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2em;
    height: 2em;
    color: #FFF;
    background-color: #CCC;
    border-radius: 1em;
    line-height: 1em; }
  .step-list-head .text {
    line-height: 1.25; }
.step-list-image {
  text-align: center; }
  .step-list-image img {
    margin-left: auto;
    margin-right: auto; }

.app-figure img {
  width: 100%;
  height: auto; }
.app-figure figcaption {
  text-align: center;
  line-height: 1.25;
  margin-top: 0.5rem; }

.compareT {
  line-height: 1.5;
  font-feature-settings: "palt"; }
  .compareT thead th {
    font-weight: 600; }
    .compareT thead th.col01 {
      color: #FFF;
      background-color: #674694; }
    .compareT thead th.col02 {
      color: #FFF;
      background-color: #119bde;
      border-left-color: #FFF; }
    .compareT thead th.col03 {
      color: #FFF;
      background-color: #b92a3e;
      border-left-color: #FFF; }
  .compareT tbody th {
    font-weight: 600;
    background-color: #a6e2ff;
    padding-left: 0.25em;
    padding-right: 0.25em; }
  .compareT tbody td {
    font-size: calc( 1rem - 2px );
    padding-left: 0.75em;
    padding-right: 0.75em; }
    .compareT tbody td.center {
      text-align: center; }
    .compareT tbody td.col01 {
      background-color: #ebe6f3; }
      .compareT tbody td.col01 .dotL li::before {
        background-color: #674694; }
      .compareT tbody td.col01 + .col01 {
        border-left: none;
        padding-left: 0; }
    .compareT tbody td.col02 {
      background-color: #f0f9fe; }
      .compareT tbody td.col02 .dotL li::before {
        background-color: #119bde; }
      .compareT tbody td.col02 + .col02 {
        border-left: none;
        padding-left: 0; }
    .compareT tbody td.col03 {
      background-color: #fae8eb; }
      .compareT tbody td.col03 .dotL li::before {
        background-color: #b92a3e; }
      .compareT tbody td.col03 + .col03 {
        border-left: none;
        padding-left: 0; }
    .compareT tbody td.image img {
      height: auto; }
  .compareT tbody .evaluation th {
    color: #FFF;
    background-color: #e83820; }
  .compareT tbody .evaluation td {
    font-size: calc( 1rem + 2px );
    font-weight: 600;
    color: #e83820; }

.compare-note {
  margin-top: 1rem;
  padding-left: 1em;
  text-indent: -1em;
  font-size: calc( 1rem - 2px );
  line-height: 1.25; }

@media screen and (min-width: 1204px), print {
  .step-lead-copy {
    font-size: 2rem;
    line-height: 2; }
    .step-lead-copy .small {
      font-size: 1.5rem; }
  .step-lead + .section {
    margin-top: 60px; }

  .step-head-text {
    font-size: 24px; }
  .step-head + .section {
    margin-top: 40px; }

  .step-video video,
  .step-video iframe {
    max-width: 834px; }

  .step-image {
    margin-left: 5rem; }

  .step-list > li {
    margin-top: 3.5rem; }
    .step-list > li:not(:last-child) .step-list-image {
      position: relative; }
      .step-list > li:not(:last-child) .step-list-image::after {
        content: "";
        display: block;
        width: 2px;
        height: calc( 100% + 3.5rem );
        position: absolute;
        top: -0.5rem;
        left: calc( -3.5rem - 1px ); }
    .step-list > li.step00 .step-list-image::after {
      background-color: #924898; }
    .step-list > li.step01 .step-list-image::after {
      background-color: #e95464; }
    .step-list > li.step02 .step-list-image::after {
      background-color: #c8161d; }
    .step-list > li.step03 .step-list-image::after {
      background-color: #ea5504; }
  .step-list-head .num {
    font-size: 1.5rem; }
  .step-list-head .text {
    font-size: 20px;
    margin-left: 1.5em; }
  .step-list-image {
    margin-top: 1rem;
    margin-left: 5rem; }

  .app_dia {
    padding-right: 2rem; }

  .app-figure figcaption .small {
    font-size: 11px; }

  .compareT tbody td img {
    width: 324px; } }
@media screen and (min-width: 1204px) and (min-width: 1568px) {
  .step-lead .copy {
    font-size: 22px; }

  .step-image {
    padding-left: 5rem;
    padding-right: 5rem;
    margin-left: 6rem; }

  .step-list > li {
    padding-left: 5rem;
    padding-right: 5rem; }
    .step-list > li:not(:last-child) .step-list-image::after {
      left: calc( -4.5rem - 1px ); }
  .step-list-head .text {
    font-size: 22px; }
  .step-list-image {
    margin-left: 6rem; }

  .app_dia {
    padding-right: 0; }

  .app-figure figcaption .small {
    font-size: 12px; }

  .compareT tbody td img {
    width: 315px; } }
@media screen and (max-width: 1203px) {
  .step-head-text {
    font-size: 18px; }

  .step-video video,
  .step-video iframe {
    max-width: 402px; }

  .step-list > li {
    margin-top: 2rem; }
  .step-list-head .text {
    margin-left: 1em; }
  .step-list-image {
    margin-top: 1rem; }

  .app-figure {
    margin-top: 1rem; }
    .app-figure figcaption .small {
      font-size: 10px; }

  .compareT-wrapper {
    overflow-x: auto; }
    .compareT-wrapper > div {
      width: calc( 698px + 1rem ); }
  .compareT tbody td img {
    width: 190px; } }
@media screen and (max-width: 1203px) and (min-width: 575px) {
  .step-lead .copy {
    font-size: 20px; }

  .step-head-text {
    font-size: 20px; }

  .app_dia {
    padding-left: 2rem;
    padding-right: 2rem; }

  .app-figure {
    margin-top: 2rem;
    padding-left: 1rem;
    padding-right: 1rem; }
    .app-figure figcaption .small {
      font-size: 12px; } }
@media screen and (max-width: 1203px) and (min-width: 1002px) {
  .compareT tbody td img {
    width: 270px; } }