@charset "UTF-8";

/*--------------------------------------------------------
このスタイルシートに記載した内容はプレビューと編集画面両方に反映されます。
--------------------------------------------------------*/

/*--------------------------------------------------------
　1.トップページスタイル
--------------------------------------------------------*/

/* =======================================
　リードエリア
======================================= */

/* 見出し全体 */
h2.wp-block-heading.lead-catch-text {
  font-family: var(--type-primary-font-serif);
  letter-spacing: 4px;
  line-height: 1.3;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* レスポンシブ */
h2.wp-block-heading.lead-catch-text>div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
}

/* テキスト */
h2.wp-block-heading.lead-catch-text span {
  font-weight: 600;
}

h2.wp-block-heading.lead-catch-text span.small {
  font-size: min(max(3vw, 48px), 100vw);
  padding-bottom: 4px;
}

h2.wp-block-heading.lead-catch-text span.large {
  font-size: min(max(6vw, 64px), 100vw);
}

h2.wp-block-heading.lead-catch-text .first span.large {
  color: var(--color-primary01);
}

h2.wp-block-heading.lead-catch-text .next span.large {
  color: var(--color-primary02);
}



@media screen and (max-width: 781px) {
  h2.wp-block-heading.lead-catch-text span.small {
    font-size: 28px;
    padding-bottom: 4px;
  }

  h2.wp-block-heading.lead-catch-text span.large {
    font-size: 40px;
  }
}



/* =======================================
　納得の結果を、適正価格で
======================================= */

/*----- h2見出し -----*/
h2.wp-block-heading.fee-title {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

h2.wp-block-heading.fee-title span {
  font-size: min(max(4vw, 64px), 100vw);
  font-family: var(--type-primary-font-serif);
  letter-spacing: 4px;
  line-height: 1.3;
  color: var(--color-wh)
}

h2.wp-block-heading.fee-title span.large {
  color: var(--color-accent03);
}


@media screen and (max-width: 781px) {
  h2.wp-block-heading.fee-title span {
    font-size: 40px;
  }
}



/*----- メリットリスト -----*/
.wp-block-possweb-decoration.fee-benefit ul {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.wp-block-possweb-decoration.fee-benefit ul li {
  font-size: 26px;
  font-weight: 600;
  background: var(--color-accent03);
  padding: 8px 16px;
}


@media screen and (max-width: 1023px) {
  .wp-block-possweb-decoration.fee-benefit ul li {
    font-size: 18px;
  }
}


@media screen and (max-width: 781px) {
  .wp-block-possweb-decoration.fee-benefit ul li {
    font-size: 16px;
  }
}