.header-top {
  display: block;
  padding: 5px;  
  background-color: var(--color-cian);
  font-size: 20px;
  text-align: center;
  color: #fff;
  line-height: 1.6;
}

.is-rs .header-top {
  font-size: 17px;
}

.header-top > p,
.header-top dt {
  display: grid;
  align-items: center;
  justify-content: center;
}

.contents-header {
  display: flex;
  width: 100%;
  max-width: 640px;
  flex-direction: column;
}

.header-top strong {
  font-size: 26px;
  font-weight: bold;
}

.is-rs .header-top strong {
  font-size: 22px;
}

.paid-header-img {
    max-width: 640px;
    margin: 0 auto;
}

.contents {
  gap: 32px;
  padding: 20px 20px 200px;
  counter-reset: section-counter;
}

.contents .wrap {
  gap: 24px;
  padding: 0;
}

.contents main {
    display: flex;
    gap: 40px;
    flex-direction: column;
    align-items: center;
}

/* Main Visual */
.main-visual img {
  width: 100%;
  border-radius: 8px;
}

/* H1 */
.h1-title {
  display: block;
  width: 100%;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--color-royalblue);
  font-size: 2.0rem;
  color: var(--color-royalblue);
  font-weight: bold;
}

[class*="-title"] {
  color: var(--color-royalblue);
  margin-bottom: 0;
}

/* Section Card */
.section-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-royalblue);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(42, 106, 224, 0.12);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 640px;
  counter-increment: section-counter;
}

/* 見出し左横に番号バッジ */
.section-heading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--color-royalblue);
  text-align: left;
}

.section-heading::before {
  content: counter(section-counter);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: var(--color-royalblue);
  color: #fff;
  border-radius: 50%;
  font-size: 1.6rem;
  font-weight: bold;
  flex-shrink: 0;
  /* テキストが複数行になっても上端に固定 */
  align-self: flex-start;
  /* バッジの高さの半分だけ下げて、テキストのセンターに合わせる */
  margin-top: calc((1.8rem * 1.4 - 36px) / 2);
}

@media screen and (min-width: 744px) {
  .section-heading {
    font-size: 2.0rem;
  }
.section-heading::before {
    margin-top: calc((2.0rem * 1.4 - 36px) / 2);
  }
}

.float-button {
    width: 100%;
    padding: 10px 20px;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #fff;
    box-shadow: 0 -2px 10px 0 rgba(5, 5, 5, .15);
    z-index: 999;
}

html.is-ios .table-bottom-button .text-royalblue,
html.is-ios .float-button .text-royalblue {
  font-size: 1.6rem;
}

@media screen and (min-width: 744px) {
  html.is-ios .table-bottom-button .text-royalblue,
  html.is-ios .float-button .text-royalblue {
  font-size: 1.8rem;
  }
}

.center-img img {
  max-width: 414px;
}

/* Text */
p {
  line-height: 1.7;
}

.table-bottom-button .textcenter {
  margin-bottom: 10px;
}

.table-bottom-button .buttonbox01 {
  margin-bottom: 20px;
}