/* 動画 */
.movie {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.movie-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.movie-headline {
  font-size: 1.5rem;
  font-weight: 600;
}

.movie-wrap {
  width: 100%;
  max-width: 34.375rem;
  aspect-ratio: 16 / 9;

  & iframe {
    width: 100%;
    height: 100%;
  }
}

@media (width < 768px) {
  .movie {
    padding: 1rem;
  }

  .movie-headline {
    font-size: 1.25rem;
  }
}

/* FAQ */
.support-faq {
  & dl {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 6rem 0 2rem;
    margin-top: -4rem;
    border-bottom: 1px solid var(--rs-gray300);

    & dt {
      display: flex;
      align-items: flex-start;
      gap: .5rem;
      font-size: 1.25rem;
      font-weight: 600;
      line-height: 1.5;

      &::before {
        content: "Q";
        font-size: 1.625rem;
        font-weight: 600;
        line-height: 1.15;
        color: var(--rs-primary-color);
      }
    }

    & .faq-contents {
      padding: 0 0 0 2rem;
    }
  }
}

.support-faq-table {
  & thead {
    & th {
      text-align: center;
    }
  }
}

.support-list {
  & li {
    & a {
      display: flex;
      height: 100%;
      font-feature-settings: "palt";
    }

    & .button-text {
      font-size: var(--rs-font-size-xs);
      font-weight: 400;
    }
  }
}

@media (width >= 768px) {
  .support-list {
    gap: 3rem 4%;
    justify-content: center;

    & li {
      width: 29.3333%;
      min-width: 21rem;
    }
  }

  .supoort-button-list {
    gap: 3rem 3.3333%;
  }
}

@media (width < 768px) {
  .supoort-button-list {
    gap: 1.5rem;
    flex-direction: column;
  }

  .support-faq {
    & dl {
      padding: 5rem 0 2rem;
      margin-top: -3rem;
    }
  }

  .support-faq-table {
    overflow: auto;

    & table {
      white-space: nowrap;
      width: auto;
    }
  }
}

.support-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 .5rem;

  & svg {
    width: 4rem;
    fill: var(--rs-primary-color);
  }
}

.support-label {
  align-self: flex-start;
  font-size: var(--rs-font-size-xs);
  font-weight: 600;
  line-height: 1.7;
  padding: 0.125rem 0.625rem;
}

.support-label-before {
  background: var(--rs-tertiary-color-red200);
  color: var(--rs-tertiary-color-red500);
}

.support-label-after {
  background: var(--rs-tertiary-color-blue200);
  color: var(--rs-secondary-color);
}

/* レンタルサーバーのご利用をお考えの方へ */
.toc-card-list {
  gap: 2.5rem;
}

@media (width < 768px) {
  .toc-card-list {
    flex-direction: column;
  }
}

.toc-card-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--rs-gray300);
  border-radius: 1rem;

  & .link-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  & .link-title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5;
  }
}

.toc-card-link {
  display: flex;
  align-items: center;
  align-self: flex-end;
  gap: 0.5rem;
  font-size: var(--rs-font-size-xs);
  font-weight: 600;
  color: var(--rs-link-color);
  margin-top: auto;

  &::after {
    content: "";
    display: block;
    width: 1rem;
    height: 0.8125rem;
    background-image: var(--arrow), var(--arrow);
    background-size: 1rem .8125rem;
    background-repeat: no-repeat, no-repeat;
    background-position: left -1rem center, center center;
  }
}

.toc {
  padding: 1.5rem 1rem;

  & dl {
    display: flex;
    flex-direction: column;
    gap: .5rem;

    & dt {
      font-size: var(--rs-font-size-xs);
    }
  }
}

.toc-list {
  & li {
    & a {
      color: var(--rs-link-color);
      text-decoration: underline;
    }

    &::before {
      color: var(--rs-link-color);
    }
  }
}

@media (width >= 992px) {
  .toc-card-link {
    &:hover {
      text-decoration: none;

      &::after {
        background-position: center center, left 1rem center;
        transition: background .5s;
      }
    }
  }
}

.beginner {
  & .section {
    gap: 7.5rem;
  }

  & .l-page-bottom {
    padding-top: 0;
  }
}

@media (width < 768px) {
  .beginner {
    & .section {
      gap: 5rem;
    }
  }
}

/* 他社からの乗り換え・移転 */
.transfer-flow {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.38rem;
}

.transfer-flow-item {
  width: 15.625rem;
  height: 7.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  place-content: center center;
  gap: .31rem;
  border-radius: 0.375rem;
  counter-increment: number;
  font-weight: 600;
  background: var(--rs-tertiary-color-red200);
  position: relative;

  &::before {
    content: counter(number, decimal-leading-zero);
    font-family: Futura, "Century Gothic", sans-serif;
    font-size: 1.4375rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--rs-primary-color);
  }

  &::after {
    content: "";
    display: block;
    width: .625rem;
    height: 1rem;
    background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="16" viewBox="0 0 10 16" fill="none"><path d="M2 2L7.29289 7.29289C7.68342 7.68342 7.68342 8.31658 7.29289 8.70711L2 14" stroke="%23FF6683" stroke-width="4" stroke-linecap="round"/></svg>') no-repeat center center;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -1.625rem;
    margin: auto;
  }

  &:last-child {
    &::after {
      display: none;
    }
  }
}

.transfer-guide-text {
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
}

.transfer-image {
  max-width: 58.75rem;
  align-self: center;
}

.transfer-agency {
  padding-top: 2.5rem;
}

.transfer-agency-healine {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.transfer {
  & .l-page-bottom {
    padding-top: 0;
  }
}

/* お申し込みの流れ */
.flow {
  & .l-section {
    padding-top: 6rem;
    padding-bottom: 0;

    &:not(:first-of-type) {
      padding-top: 6.5rem;
    }

    &:last-of-type {
      padding-bottom: 5rem;
    }
  }

  & .l-page-bottom {
    padding-top: 0;
  }
}

.flow-step {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.flow-step-column {
  display: flex;
  gap: 2.62rem;
}

.flow-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  gap: .5rem;
  padding: 1rem 2rem 1.5rem;
  background: var(--rs-tertiary-color-red200);
  border-radius: 0.5rem;
  counter-increment: number;
  position: relative;

  &::after {
    content: "";
    display: block;
    width: .875rem;
    height: 1.5rem;
    background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="24" viewBox="0 0 14 24" fill="none"><path d="M2 1.5L11.3432 11.3103C11.711 11.6966 11.711 12.3034 11.3432 12.6897L2 22.5" stroke="%23FF6683" stroke-width="3" stroke-linecap="round"/></svg>') no-repeat center center;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -1.875rem;
    margin: auto;
  }

  &:last-child {
    &::after {
      display: none;
    }
  }

  & dt {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5;

    & span {
      padding: 0 .62rem;
    }

    &::before {
      content: counter(number, decimal-leading-zero);
      font-family: Futura, "Century Gothic", sans-serif;
      font-size: 1.9375rem;
      font-weight: 700;
      line-height: 1.5;
      color: var(--rs-primary-color);
    }
  }

  & dd {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    & .list {
      & + .flow-step-box {
        margin-top: .25rem;
      }
    }
  }
}

.flow-step-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.flow-step-box {
  background: #fff;
  padding: 0.75rem .5rem 0.8125rem;
  text-align: center;

  & sup {
    display: inline-block;
    font-size: 0.75rem;
    margin: 0 0 0 .12rem;
  }
}

.flow-start {
  margin-top: 2.5rem;
}

.flow-start-images {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.flow-start-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0 2rem;

  & figcaption {
    font-weight: 600;
    line-height: 1.7;
    text-align: center;
  }
}

.flow-trial-table {
  table-layout: auto;

  & .c-table-body {
    & th {
      width: 21.25rem;
    }
  }
}

.flow-payment-table {
  & th {
    text-align: center;
    vertical-align: middle;

    &:first-child {
      width: 14.375rem;
    }
  }

  & td {
    text-align: center;
    vertical-align: middle;
    padding: 1rem .5rem;

    & .c-table-column {
      flex-flow: row wrap;
      justify-content: center;
      gap: .25rem .5rem;
    }

    & span {
      font-size: var(--rs-font-size-xs);
    }

    & .c-icon-circle,
    & .c-icon-dash {
      width: 1.5625rem;
      height: 1.5625rem;
      margin: 0 auto;
    }

    & .c-icon-dash {
      background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="25" viewBox="0 0 26 25" fill="none"><path d="M8.83301 13H18.833" stroke="%236B6B6B" stroke-width="2" stroke-linecap="round"/></svg>');
    }

    & p {
      width: 100%;
    }
  }

  & sup {
    display: inline-block;
    font-size: 0.75rem;
    vertical-align: middle;
    margin: 0 0 .1875rem .12rem;
  }
}

.payment-details {
  padding-bottom: 4rem;

  & dl {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    & dt {
      font-size: 1.25rem;
      font-weight: 600;
      line-height: 1.5;
    }

    & dd {
      display: flex;
      flex-direction: column;
      gap: .5rem;
    }
  }
}

.payment-details-title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.5;
}

.payment-details-credit {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

@media (width < 768px) {
  .flow {
    & .l-section {
      padding-top: 2.5rem;
      padding-bottom: 2.5rem;

      &:not(:first-of-type) {
        padding-top: 1.5rem;
      }

      &:last-of-type {
        padding-bottom: 2.5rem;
      }
    }
  }

  .flow-step-column {
    flex-direction: column;
  }

  .flow-step-item {
    padding: 1rem;

    &::after {
      transform: rotate(90deg);
      inset: auto 0 -1.875rem;
    }
  }

  .flow-start {
    margin-top: 0;
  }

  .flow-start-figure {
    padding: 1.5rem 1rem;
  }

  .flow-payment-table {
    & th {
      &:first-child {
        width: 5rem;
      }
    }
  }

  .payment-details {
    padding-bottom: 2.5rem;
  }
}

/* 契約後 */

.after-flow {
  padding: 0 3.12rem;
}

.after-flow-inner {
  max-width: 93.75rem;
  border-radius: 1.5rem;
  background: rgb(255 102 131 / 5%);
  margin: 0 auto;
  padding: 5rem 2rem;
}

.after-flow-list {
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
}

.after-flow-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2.5rem 1.5rem;
  counter-increment: number;

  & .c-button {
    align-self: flex-start;
  }

  & .movie {
    width: 100%;
    background: #fff;
  }
}

.after-flow-content {
  flex: 1;

  & .c-headline {
    gap: 0;

    &::before {
      content: counter(number, decimal-leading-zero);
      font-family: Futura, "Century Gothic", sans-serif;
      font-size: 1.9375rem;
      font-weight: 700;
      line-height: 1.5;
      color: var(--rs-primary-color);
    }
  }
}

.after-flow-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.after-flow-image {
  flex-shrink: 0;
  width: 31%;
}

.after-settings {
  padding-top: 5rem;
}

.after-settings-list {
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
}

.after-settings-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

@media (width < 768px) {
  .after-flow {
    padding: 0 0 2.5rem;
  }

  .after-flow-inner {
    padding: 2.5rem 0;
    border-radius: 0;
  }

  .after-settings-list {
    gap: 2.5rem;
  }

  .after-flow-item {
    flex-direction: column;
  }

  .after-flow-image {
    width: 100%;
    max-width: 19.375rem;
  }

  .after-settings {
    padding-top: 2.5rem;
  }
}