/* ==========================================================================
   LP系ページ（トップ / SNS運用代行 / SEO・MEO）の部品
   既存サイトの見た目（文字色 #333、薄いグレー #f8f8f9、罫線 #8e8d8d、ボタン #0d51d9、角丸 .3125rem）に合わせている。
   既存部品（section-title, icon-btn, accordion, number-heading-text-brock, fill-box 等）と組み合わせて使う。
   ========================================================================== */

/* --- セクション --- */
.lp-section {
  padding-top: 3.75rem;
  padding-bottom: 3.75rem;
}

.lp-section--alt {
  background-color: #f8f8f9;
}

.lp-section__inner {
  width: 100%;
  max-width: 93.125rem;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.25rem;
  padding-left: 1.25rem;
}

.lp-section__title {
  margin-bottom: 1.875rem;
}

.lp-section__lead {
  max-width: 50rem;
  margin: -0.625rem auto 1.875rem;
  font-size: max(1rem, 16px);
  line-height: 1.875;
  color: #333333;
  text-align: center;
}

.lp-section__note {
  margin-top: 1.25rem;
  font-size: max(0.875rem, 14px);
  line-height: 1.8;
  color: #666666;
}

.lp-section__more {
  margin-top: 1.875rem;
  text-align: center;
}

.lp-section__more-link,
.lp-link {
  font-weight: 700;
  color: #333333;
  text-decoration: underline solid #333333;
  text-underline-offset: 0.3125rem;
}

/* --- ファーストビュー --- */
.lp-hero {
  padding-top: 2.5rem;
  padding-bottom: 3rem;
  background-color: #f8f8f9;
}

.lp-hero__grid {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}

.lp-hero__sub {
  font-size: max(0.9375rem, 15px);
  font-weight: 700;
  color: #666666;
}

.lp-hero__title {
  margin-top: 0.75rem;
  font-size: max(1.75rem, 16px);
  font-weight: 700;
  line-height: 1.4;
  color: #333333;
}

.lp-hero__text {
  margin-top: 1.25rem;
  font-size: max(1.0625rem, 16px);
  line-height: 1.875;
  color: #333333;
}

.lp-hero__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.lp-hero__price-label {
  font-size: max(0.9375rem, 15px);
  font-weight: 700;
}

.lp-hero__note {
  margin-top: 1rem;
  font-size: max(0.875rem, 14px);
  color: #666666;
}

.lp-hero__visual {
  width: 100%;
}

/* --- ボタン --- */
.lp-btns {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.lp-btns--center {
  align-items: center;
}

.lp-btn {
  width: 100%;
  max-width: 25rem;
}

.lp-btns--inline .lp-btn {
  max-width: 25rem;
}

.icon-btn--outline .icon-btn__inner {
  background-color: #fff;
  color: #333333;
  border-color: #333333;
}

.icon-btn--white .icon-btn__inner {
  background-color: #fff;
  color: #333333;
  border-color: #fff;
}

.icon-btn--outline-white .icon-btn__inner {
  background-color: transparent;
  color: #fff;
  border-color: #fff;
}

/* --- 目次（アンカーナビ） --- */
.lp-anchor {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #fff;
  border-top: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
}

.lp-anchor__inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.lp-anchor__label {
  flex: none;
  font-size: max(0.8125rem, 13px);
  color: #666666;
}

.lp-anchor__link {
  flex: none;
  padding: 0.375rem 0.875rem;
  border: 1px solid #8e8d8d;
  border-radius: 999px;
  background-color: #f8f8f9;
  font-size: max(0.8125rem, 13px);
  color: #333333;
}

.lp-anchor__link:hover {
  background-color: #333333;
  color: #fff;
}

/* --- プレースホルダー（写真・イラストが入る場所） --- */
.lp-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 8.75rem;
  padding: 1rem;
  border: 1px dashed #8e8d8d;
  border-radius: 0.3125rem;
  background: repeating-linear-gradient(135deg, #ededee 0 10px, #f8f8f9 10px 20px);
  font-size: max(0.8125rem, 13px);
  line-height: 1.6;
  color: #666666;
  text-align: center;
}

.lp-ph--round {
  width: 7.5rem;
  height: 7.5rem;
  min-height: 0;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
}

.lp-ph--doc {
  flex: none;
  width: 5rem;
  min-height: 6.875rem;
  padding: 0.25rem;
}

.lp-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border: 1px dashed #8e8d8d;
  border-radius: 0.5rem;
  background-color: #fff;
  font-size: max(0.625rem, 10px);
  color: #666666;
}

.lp-card--center .lp-icon {
  margin-right: auto;
  margin-left: auto;
}

/* --- カードのグリッド --- */
.lp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.lp-card {
  padding: 1.25rem;
  border: 1px solid #8e8d8d;
  border-radius: 0.3125rem;
  background-color: #f8f8f9;
}

.lp-card--white {
  background-color: #fff;
}

.lp-card--center {
  text-align: center;
}

.lp-card--emphasis {
  border: 2px solid #333333;
}

.lp-card__tag {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.125rem 0.75rem;
  border-radius: 0.1875rem;
  background-color: #333333;
  font-size: max(0.75rem, 12px);
  font-weight: 700;
  color: #fff;
}

.lp-card__eyebrow {
  font-size: max(0.875rem, 14px);
  color: #666666;
}

.lp-card__title {
  margin-top: 0.75rem;
  font-size: max(1.125rem, 16px);
  font-weight: 500;
  line-height: 1.6;
  color: #333333;
}

.lp-card__title--large {
  font-size: max(1.25rem, 16px);
  font-weight: 700;
}

.lp-card__eyebrow + .lp-card__title,
.lp-card__tag + .lp-card__title {
  margin-top: 0.25rem;
}

.lp-card__text {
  margin-top: 0.5rem;
  font-size: max(1rem, 16px);
  line-height: 1.875;
  color: #333333;
}

.lp-card__text--small {
  font-size: max(0.875rem, 14px);
  line-height: 1.8;
  color: #666666;
}

.lp-card__link {
  display: inline-block;
  margin-top: 0.75rem;
}

.lp-card__name {
  font-size: max(1rem, 16px);
  font-weight: 700;
}

/* --- 強調バンド --- */
.lp-band {
  margin-top: 1.75rem;
  padding: 1.25rem;
  border-radius: 0.3125rem;
  background-color: #333333;
  font-size: max(1.125rem, 16px);
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
  text-align: center;
}

/* --- 数字・小さい文字・未確定 --- */
.lp-num {
  font-size: max(2.25rem, 16px);
  font-weight: 700;
  line-height: 1.1;
  color: #333333;
}

.lp-num--xl {
  font-size: max(3.25rem, 16px);
}

.lp-num--md {
  font-size: max(1.75rem, 16px);
}

.lp-num__unit {
  font-size: max(1.125rem, 16px);
  font-weight: 400;
}

.lp-small {
  font-size: max(0.875rem, 14px);
  line-height: 1.8;
  color: #666666;
}

.lp-tbd {
  padding: 0 0.25em;
  border-radius: 0.1875rem;
  background-color: #fff3cd;
  color: #7a5b00;
}

/* --- 事例カード --- */
.lp-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-top: 0.75rem;
}

.lp-metrics__item .lp-small {
  display: block;
}

/* --- 表 --- */
.lp-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.lp-table {
  width: 100%;
  min-width: 37.5rem;
  border-collapse: collapse;
  background-color: #fff;
  font-size: max(0.9375rem, 15px);
  line-height: 1.7;
  color: #333333;
}

.lp-table th,
.lp-table td {
  padding: 0.75rem 0.875rem;
  border: 1px solid #8e8d8d;
  text-align: left;
  vertical-align: top;
}

.lp-table th {
  background-color: #f8f8f9;
  font-weight: 700;
}

.lp-table .lp-table__hl-head {
  background-color: #333333;
  color: #fff;
}

.lp-table .lp-table__hl {
  background-color: #f8f8f9;
}

.lp-table--plain {
  min-width: 0;
}

/* 左端の見出し列（行の th と左上のセル）を横スクロールしても固定する。
   border-collapse: collapse だと固定したセルの罫線が消えるので、separate にして右・下の罫線で同じ見た目にする */
.lp-table--sticky-th {
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid #8e8d8d;
  border-left: 1px solid #8e8d8d;
}

.lp-table--sticky-th th,
.lp-table--sticky-th td {
  border-width: 0 1px 1px 0;
}

.lp-table--sticky-th th[scope="row"],
.lp-table--sticky-th thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: #f8f8f9;
  /* 横スクロール時、下を流れる列との境目が分かるように影を付ける */
  box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.25);
}

/* 左の見出し列の幅が画面を取りすぎないよう、スマホでは少し狭める */
@media screen and (max-width: 767px) {
  .lp-table--sticky-th th[scope="row"],
  .lp-table--sticky-th thead th:first-child {
    width: 7.5rem !important;
    min-width: 7.5rem;
  }
}

/* --- 料金 --- */
.lp-price {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.lp-price__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.875rem 1.25rem;
  text-align: center;
}

.lp-price__label {
  font-size: max(1rem, 16px);
  font-weight: 700;
}

.lp-price__table {
  width: 100%;
}

.lp-bonus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 1.25rem;
}

.lp-cta-inline {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* --- チップ --- */
.lp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.lp-chip {
  padding: 0.25rem 0.875rem;
  border: 1px solid #333333;
  border-radius: 999px;
  background-color: #fff;
  font-size: max(0.875rem, 14px);
  color: #333333;
}

/* --- 担当者 --- */
.lp-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

.lp-person .lp-ph--round {
  flex: none;
  width: 8.75rem;
  height: 8.75rem;
  margin: 0;
}

/* 顔写真（事例のお客様の声など）。仮の丸枠と同じ大きさにして、横並びで縮まないようにする */
.lp-person > .lp-person__photo {
  flex: none;
  width: 8.75rem;
  height: 8.75rem;
  border-radius: 50%;
  object-fit: cover;
}

.lp-person__name {
  font-size: max(1.125rem, 16px);
  font-weight: 700;
}

.lp-person__role {
  margin-left: 0.5rem;
  font-size: max(0.875rem, 14px);
  font-weight: 400;
  color: #666666;
}

.lp-person__quote {
  margin-top: 0.5rem;
  font-size: max(1rem, 16px);
  line-height: 1.875;
}

/* --- 資料カード --- */
.lp-doc {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
}

.lp-doc__img {
  flex: none;
  width: 5rem;
  height: auto;
}

/* --- レポートの例 --- */
.lp-report {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

/* --- 最終CTA --- */
.lp-cta {
  padding: 3.75rem 1.25rem;
  background-color: #333333;
  color: #fff;
  text-align: center;
}

.lp-cta__title {
  font-size: max(1.5rem, 16px);
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
}

.lp-cta__text {
  max-width: 50rem;
  margin: 1rem auto 0;
  font-size: max(1rem, 16px);
  line-height: 1.875;
  color: #dfdfdf;
}

.lp-cta__tel {
  margin-top: 1.25rem;
  font-size: max(0.9375rem, 15px);
  color: #dfdfdf;
}

.lp-cta__tel-number {
  font-size: max(1.5rem, 16px);
  font-weight: 700;
  color: #fff;
}

/* --- 小さなタグ（業種・地域・課題） --- */
.lp-minis {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.lp-mini {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border: 1px solid #8e8d8d;
  border-radius: 0.1875rem;
  background-color: #f8f8f9;
  font-size: max(0.75rem, 12px);
  color: #333333;
}

/* --- 絞り込みチップ --- */
.lp-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.lp-filter__label {
  margin-right: 0.25rem;
  font-size: max(0.875rem, 14px);
  color: #666666;
}

.lp-chip--link:hover,
.lp-chip--on {
  background-color: #333333;
  color: #fff;
}

/* --- ページ見出し（LP以外の下層ページ） --- */
.lp-page-head {
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
}

.lp-page-head--alt {
  background-color: #f8f8f9;
}

.lp-page-head__sub {
  font-size: max(0.875rem, 14px);
  font-weight: 700;
  color: #666666;
}

.lp-page-head__title {
  font-size: max(1.75rem, 16px);
  font-weight: 700;
  line-height: 1.4;
  color: #333333;
}

.lp-page-head__sub + .lp-page-head__title {
  margin-top: 0.5rem;
}

.lp-page-head__lead {
  margin-top: 0.75rem;
  font-size: max(1rem, 16px);
  line-height: 1.875;
}

.lp-page-head .lp-anchor {
  position: static;
  margin-top: 1rem;
  border: 0;
  background: transparent;
}

.lp-page-head .lp-anchor__inner {
  padding: 0;
}

/* --- 事例カード・リンクカード --- */
.lp-case-card {
  display: block;
  text-decoration: none;
}

.lp-case-card .lp-ph,
.lp-case-card__img {
  width: 100%;
  min-height: 9.375rem;
  margin-bottom: 0.75rem;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.lp-case-card .lp-minis + .lp-card__title {
  margin-top: 0.5rem;
}

.lp-case-card:hover {
  opacity: 0.8;
}

.lp-link-card {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lp-link-card:hover {
  opacity: 0.8;
}

.lp-link-card .lp-ph--thumb {
  flex: none;
  width: 7.5rem;
  min-height: 5.625rem;
  padding: 0.25rem;
}

.lp-link-card .lp-ph--round {
  width: 4.5rem;
  height: 4.5rem;
  min-height: 0;
  margin: 0;
}

.lp-link-card__img {
  flex: none;
  width: 7.5rem;
  height: auto;
  border-radius: 0.3125rem;
}

.lp-link-card__img--round {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
}

.lp-link-card__body {
  flex: 1 1 0;
  min-width: 0;
}

.lp-link-card__body .lp-minis {
  margin-bottom: 0.25rem;
}

/* --- 番号つきステップ --- */
.lp-step-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  list-style: none;
  padding: 0;
}

.lp-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.lp-step__n {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: #333333;
  font-size: max(0.875rem, 14px);
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.2;
}

/* 見出しの1行目を番号の丸の中心にそろえる（丸の高さ − 見出し1行分）÷ 2 */
.lp-step__body {
  padding-top: calc((3.5rem - max(1rem, 16px) * 1.6) / 2);
}

.lp-step__title {
  font-size: max(1rem, 16px);
  font-weight: 700;
  line-height: 1.6;
}

.lp-step__text {
  margin-top: 0.25rem;
  font-size: max(0.875rem, 14px);
  line-height: 1.8;
  color: #666666;
}

/* --- 引用 --- */
.lp-quote {
  margin: 0 0 1rem;
  padding: 1.25rem;
  border: 1px solid #8e8d8d;
  border-left: 0.25rem solid #333333;
  border-radius: 0.3125rem;
  background-color: #fff;
}

.lp-quote__text {
  font-size: max(1rem, 16px);
  line-height: 1.875;
}

.lp-quote__person {
  margin-top: 0.5rem;
  font-size: max(0.875rem, 14px);
  color: #666666;
}

/* --- 本文幅を狭める --- */
.lp-section__inner--narrow {
  max-width: 56.25rem;
}

.lp-body-text {
  font-size: max(1rem, 16px);
  line-height: 1.875;
}

.lp-h3 {
  margin-bottom: 0.75rem;
  font-size: max(1.25rem, 16px);
  font-weight: 700;
  line-height: 1.6;
}

.lp-block + .lp-h3 {
  margin-top: 1.75rem;
}

.lp-block {
  margin-bottom: 1.75rem;
}

.lp-list {
  padding-left: 1.25rem;
  list-style: disc;
  font-size: max(0.9375rem, 15px);
  line-height: 2;
}

.lp-list--none {
  padding-left: 0;
  list-style: none;
}

.lp-list--ol {
  list-style: decimal;
}

/* --- 2カラム（説明＋フォーム） --- */
.lp-two-col {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.lp-two-col__main {
  flex: 1 1 0;
  min-width: 0;
}

.lp-two-col__side {
  width: 100%;
}

.lp-form-box {
  padding: 1.25rem;
  border: 2px solid #333333;
  border-radius: 0.3125rem;
  background-color: #fff;
}

.lp-form-box__title {
  margin-bottom: 1rem;
  font-size: max(1.125rem, 16px);
  font-weight: 700;
}

.lp-form-box .form__item-wrapper {
  margin-top: 1.25rem;
}

.lp-form-box .form__input,
.lp-form-box .form__textarea {
  padding: 0.875rem 1rem;
  margin-top: 0.5rem;
}

.lp-form-box .form__select-wrapper {
  margin-top: 0.5rem;
}

.lp-form-box .form__submit-btn {
  width: 100%;
  margin-top: 1.25rem;
}

.lp-form-box .wpcf7-form .wpcf7-list-item-label {
  margin-top: 0.625rem;
}

.lp-form-box__note {
  margin-top: 0.75rem;
  font-size: max(0.875rem, 14px);
  line-height: 1.8;
  color: #666666;
  text-align: center;
}

.lp-form-box__tel {
  display: block;
  font-size: max(1.125rem, 16px);
  font-weight: 700;
  color: #333333;
}

.lp-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1rem;
}

.lp-benefit {
  padding: 0.5rem 1rem;
  border: 1px solid #8e8d8d;
  border-radius: 0.3125rem;
  background-color: #fff;
  font-size: max(0.875rem, 14px);
  font-weight: 700;
}

/* --- 完了ページ --- */
.lp-done {
  text-align: center;
}

.lp-done__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background-color: #333333;
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
}

.lp-done__title {
  font-size: max(1.75rem, 16px);
  font-weight: 700;
  line-height: 1.4;
}

.lp-done__text {
  margin-top: 0.75rem;
  font-size: max(1rem, 16px);
  line-height: 1.875;
}

/* --- 会社について --- */
.lp-message {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}

.lp-message__photo {
  width: 100%;
}

.lp-message__photo .lp-ph {
  min-height: 18rem;
}

.lp-message__body {
  flex: 1 1 0;
  min-width: 0;
}

.lp-message__title {
  margin-bottom: 1rem;
  font-size: max(1.5rem, 16px);
  font-weight: 700;
  line-height: 1.6;
}

.lp-message__text {
  margin-bottom: 0.75rem;
  font-size: max(1rem, 16px);
  line-height: 1.875;
}

.lp-message__sign {
  margin-top: 1rem;
  font-weight: 700;
}

.lp-company {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.lp-company__table {
  flex: 1 1 0;
  min-width: 0;
}

.lp-company__side {
  width: 100%;
}

.lp-company__side .lp-ph {
  min-height: 15rem;
  margin-bottom: 0.75rem;
}

/* ==========================================================================
   ver2 ワイヤーフレーム：既存下層ページの型（タイトル帯／英字ラベル＋見出し／狭い本文幅／末尾の「お見積もりは無料です」）
   ========================================================================== */

/* タイトル帯（既存の「進め方 / FLOW」と同じ型） */
.banner--lp {
  padding: 3rem 1.25rem 2.5rem;
  background-color: #f8f8f9;
  border-bottom: 1px solid #dfdfdf;
  text-align: center;
}

.banner--lp .banner__title-text--en {
  font-size: max(1.125rem, 16px);
  letter-spacing: 0.2em;
  color: #8e8d8d;
}

/* 本文幅（約960px） */
.lp-section__inner--page {
  max-width: 60rem;
}

.lp-lead {
  margin-top: 2rem;
  text-align: center;
}

.lp-lead__title {
  font-size: max(1.0625rem, 16px);
  font-weight: 700;
  line-height: 1.8;
}

.lp-lead__text {
  margin-top: 0.5rem;
  font-size: max(0.875rem, 14px);
  line-height: 1.9;
  color: #666666;
}

/* 英字ラベル＋見出し（下線つき） */
.lp-en {
  display: block;
  margin-bottom: 0.25rem;
  font-size: max(0.75rem, 12px);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #8e8d8d;
}

.lp-h2 {
  margin-bottom: 1.25rem;
  padding-bottom: 0.625rem;
  border-bottom: 2px solid #333333;
  font-size: max(1.5rem, 16px);
  font-weight: 700;
  line-height: 1.5;
  color: #333333;
}

.lp-h2--plain {
  border-bottom: 0;
  padding-bottom: 0;
}

/* 区切り線つき副見出し（plan-standard の型） */
.lp-sub {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.625rem 0;
  border-top: 2px solid #333333;
  border-bottom: 2px solid #333333;
  font-size: max(1.125rem, 16px);
  font-weight: 700;
  line-height: 1.6;
}

/* 点線の小見出し */
.lp-h3d {
  margin: 1.75rem 0 0.5rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px dashed #8e8d8d;
  font-size: max(1.125rem, 16px);
  font-weight: 700;
  line-height: 1.6;
}

.lp-h3d:first-child {
  margin-top: 0;
}

.lp-p {
  margin: 0 0 0.875rem;
  font-size: max(0.9375rem, 15px);
  line-height: 1.9;
}

.lp-ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25em;
  list-style: disc;
  font-size: max(0.875rem, 14px);
  line-height: 1.8;
}

.lp-ul li {
  margin-bottom: 0.25rem;
}

/* 実績数値の横並び */
.lp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin: 1.25rem 0;
}

.lp-stats .lp-small {
  display: block;
}

.lp-price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0.5rem 0 1.25rem;
}

.lp-price-line__label {
  font-size: max(0.9375rem, 15px);
  font-weight: 700;
}

.lp-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.lp-cta-row .lp-btn {
  width: auto;
  min-width: 16rem;
}

/* 画像＋タイトルのカード（plan-standard の事例カードの型） */
.lp-img-card {
  display: block;
  text-decoration: none;
}

.lp-img-card:hover {
  opacity: 0.8;
}

.lp-img-card .lp-ph,
.lp-img-card__img {
  width: 100%;
  min-height: 10.625rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.3125rem;
}

.lp-img-card__title {
  margin-top: 0.5rem;
  font-size: max(0.9375rem, 15px);
  font-weight: 700;
  line-height: 1.6;
  color: #333333;
}

.lp-img-card__sub {
  margin-top: 0.125rem;
  font-size: max(0.8125rem, 13px);
  color: #666666;
}

/* 事例の紹介（画像＋テキスト） */
.lp-feature {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.lp-feature .lp-ph {
  min-height: 17.5rem;
}

.lp-feature__body {
  flex: 1 1 0;
  min-width: 0;
}

.lp-feature__name {
  margin: 0.25rem 0 0.5rem;
  font-size: max(1.125rem, 16px);
  font-weight: 700;
}

.lp-feature__period {
  margin: 0 0 0.5rem;
  font-weight: 700;
}

/* 番号つき見出し（plan-standard の制作工程の型） */
.lp-stepn {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 2rem 0 0.5rem;
  font-size: max(1.25rem, 16px);
  font-weight: 700;
  line-height: 1.4;
}

.lp-stepn__n {
  font-size: max(1.75rem, 16px);
  color: #8e8d8d;
}

/* 行見出しが28%の表 */
.lp-table--kv th[scope="row"] {
  width: 28%;
}

/* スタッフ紹介（既存「チャコウェブとは」の型） */
.lp-staff {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid #dfdfdf;
}

.lp-staff:last-of-type {
  border-bottom: 0;
}

.lp-staff .lp-ph--staff {
  flex: none;
  width: 10rem;
  min-height: 10rem;
}

.lp-staff__body {
  flex: 1 1 0;
  min-width: 0;
}

.lp-staff__name {
  margin: 0 0 0.5rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid #8e8d8d;
  font-size: max(1.375rem, 16px);
  font-weight: 700;
}

.lp-staff__h {
  margin: 0.75rem 0 0.25rem;
  font-size: max(1rem, 16px);
  font-weight: 700;
}

.lp-staff__text {
  font-size: max(0.875rem, 14px);
  line-height: 1.8;
}

.lp-ph--inline {
  display: inline-flex;
  width: 5rem;
  min-height: 1.5rem;
  padding: 0;
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* 末尾CTA（既存の「お見積もりは無料です」の型） */
.lp-contact {
  margin-top: 3.5rem;
  padding: 3.5rem 1.25rem;
  background-color: #f8f8f9;
  border-top: 1px solid #dfdfdf;
  text-align: center;
}

.lp-contact__title {
  font-size: max(1.5rem, 16px);
  font-weight: 700;
  line-height: 1.5;
}

.lp-contact__text {
  margin: 0.5rem auto 1.25rem;
  max-width: 50rem;
  font-size: max(0.9375rem, 15px);
  line-height: 1.9;
  color: #666666;
}

.lp-contact__tel {
  display: inline-block;
  margin-bottom: 1.25rem;
  padding: 0.75rem 1.75rem;
  border: 1px solid #8e8d8d;
  border-radius: 0.3125rem;
  background-color: #fff;
}

.lp-contact__tel-label {
  font-size: max(0.8125rem, 13px);
  font-weight: 700;
}

.lp-contact__tel-number {
  display: block;
  font-size: max(1.625rem, 16px);
  font-weight: 700;
  color: #333333;
}

.lp-contact__tel-hours {
  font-size: max(0.8125rem, 13px);
  color: #666666;
}

/* 事例一覧（ver2：本文幅に合わせて2列） */
.lp-case-card .lp-ph,
.lp-case-card__img {
  min-height: 10rem;
}

/* フォーム（ver2：単一カラム、PCでは2列グリッド） */
.lp-form-grid .form__item-wrapper {
  margin-top: 1.25rem;
}

.lp-form-single .form__submit-btn {
  min-width: 20rem;
}

.lp-form-single .wpcf7-form-control-wrap[data-name="your-topic"] .wpcf7-list-item {
  display: inline-block;
  margin-right: 1.25rem;
}

/* --- FAQ（既存の accordion を使用）--- */
.lp-faq .accordion__item {
  background-color: #fff;
}

/* --- 手順（既存の number-heading-text-brock を使用）--- */
.lp-steps {
  margin-top: 3.125rem;
}

/* --- デスクトップ --- */
@media screen and (min-width: 768px) {
  .lp-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .lp-section__inner {
    padding-right: 1.5625rem;
    padding-left: 1.5625rem;
  }

  .lp-hero {
    padding-top: 4.5rem;
    padding-bottom: 3.5rem;
  }

  .lp-hero__grid {
    flex-direction: row;
    align-items: flex-start;
    gap: 3rem;
  }

  .lp-hero__body {
    flex: 1 1 0;
    min-width: 0;
  }

  .lp-hero__visual {
    flex: 0 0 26.25rem;
    max-width: 26.25rem;
  }

  .lp-hero__visual .lp-ph {
    min-height: 20rem;
  }

  .lp-hero__title {
    font-size: max(2.5rem, 16px);
  }

  .lp-btns {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .lp-btns--center {
    justify-content: center;
  }

  .lp-btn {
    width: auto;
    min-width: 17.5rem;
  }

  .lp-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-grid--3,
  .lp-grid--4,
  .lp-grid--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-price {
    flex-direction: row;
    align-items: stretch;
    gap: 2rem;
  }

  .lp-price__box {
    flex: 0 1 22.5rem;
  }

  .lp-price__table {
    flex: 1 1 0;
    min-width: 0;
  }

  .lp-cta-inline {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

  .lp-person {
    flex-direction: row;
    text-align: left;
  }

  .lp-report {
    flex-direction: row;
    align-items: stretch;
  }

  .lp-report > * {
    flex: 1 1 0;
  }

  .lp-report .lp-ph {
    min-height: 13.75rem;
  }

  .lp-cta {
    padding: 5rem 1.5625rem;
  }

  .lp-anchor__inner {
    flex-wrap: wrap;
    overflow-x: visible;
    white-space: normal;
  }

  .lp-page-head__title {
    font-size: max(2.25rem, 16px);
  }

  .lp-two-col {
    flex-direction: row;
    align-items: flex-start;
  }

  .lp-two-col__side {
    position: sticky;
    top: 1rem;
    flex: 0 0 26.25rem;
    width: 26.25rem;
  }

  .lp-message {
    flex-direction: row;
    align-items: flex-start;
    gap: 2.5rem;
  }

  .lp-message__photo {
    flex: 0 0 20rem;
    width: 20rem;
  }

  .lp-message__photo .lp-ph {
    min-height: 22.5rem;
  }

  .lp-company {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
  }

  .lp-company__side {
    flex: 0 0 25rem;
    width: 25rem;
  }

  .lp-done__title {
    font-size: max(2rem, 16px);
  }

  .banner--lp {
    padding: 3.5rem 1.5625rem 3rem;
  }

  .lp-feature {
    flex-direction: row;
    align-items: flex-start;
  }

  .lp-feature .lp-ph {
    flex: 1 1 26rem;
  }

  .lp-feature__body {
    flex: 1 1 20rem;
  }

  .lp-staff {
    flex-direction: row;
    align-items: flex-start;
  }

  .lp-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
}

@media screen and (min-width: 1024px) {
  .lp-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lp-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lp-grid--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lp-hero__title {
    font-size: max(2.75rem, 16px);
  }
}

/* --- 実績の数字（1つの枠に区切り線で並べる） --- */
.lp-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border: 1px solid #8e8d8d;
  border-radius: 0.3125rem;
  background-color: #fff;
}

.lp-figures__item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.25rem 0.75rem;
  text-align: center;
}

.lp-figures__item:nth-child(odd) {
  border-right: 1px solid #d9d9d9;
}

.lp-figures__item:nth-child(-n + 2) {
  border-bottom: 1px solid #d9d9d9;
}

.lp-figures dd {
  margin: 0;
}

.lp-figures__label {
  font-size: max(0.8125rem, 13px);
  line-height: 1.5;
  color: #666666;
}

.lp-figures__num {
  margin: 0;
  font-size: max(1.75rem, 16px);
  font-weight: 700;
  line-height: 1.2;
  color: #333333;
}

.lp-figures__unit {
  margin-left: 0.125em;
  font-size: max(1rem, 16px);
}

.lp-figures__note {
  font-size: max(0.75rem, 12px);
  line-height: 1.5;
  color: #666666;
}

/* --- 一文で言い切るメッセージ（中央寄せ） --- */
.lp-statement {
  margin: 2.5rem 0 1.5rem;
  font-size: max(1rem, 16px);
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
  color: #333333;
}

@media screen and (min-width: 768px) {
  .lp-figures {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lp-figures__item {
    padding: 1.75rem 1rem;
  }

  .lp-figures__item:nth-child(odd) {
    border-right: none;
  }

  .lp-figures__item:nth-child(-n + 2) {
    border-bottom: none;
  }

  .lp-figures__item:not(:last-child) {
    border-right: 1px solid #d9d9d9;
  }

  .lp-figures__num {
    font-size: max(2.25rem, 16px);
  }

  .lp-statement {
    margin-top: 3rem;
    margin-bottom: 2rem;
    font-size: max(1.375rem, 16px);
  }
}

/* --- 担当チーム（代表＋メンバー） --- */
.lp-leader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 1.5rem 1.25rem;
  border: 1px solid #8e8d8d;
  border-radius: 0.3125rem;
  background-color: #f8f8f9;
  text-align: center;
}

.lp-leader__img {
  flex: none;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  object-fit: cover;
}

.lp-team {
  margin-top: 1.25rem;
}

.lp-team__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lp-team__img {
  width: 7.5rem;
  height: 7.5rem;
  margin-bottom: 0.875rem;
  border-radius: 50%;
  object-fit: cover;
}

.lp-team__role {
  font-size: max(0.8125rem, 13px);
  line-height: 1.5;
  color: #666666;
}

.lp-team__name {
  margin-top: 0.25rem;
  font-size: max(1.125rem, 16px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #333333;
}

.lp-team__name-ja {
  display: block;
  font-size: max(0.875rem, 14px);
  font-weight: 400;
  letter-spacing: 0;
  color: #666666;
}

.lp-team__text {
  margin-top: 0.625rem;
  font-size: max(0.875rem, 14px);
  line-height: 1.8;
  text-align: left;
  color: #333333;
}

@media screen and (min-width: 768px) {
  .lp-leader {
    flex-direction: row;
    gap: 1.75rem;
    padding: 1.75rem 2rem;
    text-align: left;
  }

  .lp-leader__img {
    width: 10rem;
    height: 10rem;
  }
}

/* --- サービスページ：メインサービスの料金表示 --- */
.lp-service-price {
  padding: 1rem 1.25rem;
  border-radius: 0.3125rem;
  background-color: #f8f8f9;
  text-align: center;
}

.lp-service-price__label {
  font-size: max(0.875rem, 14px);
  font-weight: 700;
  color: #666666;
}

.lp-service-price__amount {
  margin-top: 0.25rem;
  font-size: max(3rem, 16px);
  font-weight: 700;
  line-height: 1.1;
  color: #333333;
}

.lp-service-price__prefix {
  margin-right: 0.25em;
  font-size: max(1.125rem, 16px);
}

.lp-service-price__unit {
  margin-left: 0.125em;
  font-size: max(1.5rem, 16px);
}

.lp-service-price__tax {
  font-size: max(0.875rem, 14px);
  color: #666666;
}

.lp-service-catch {
  margin-top: 0.75rem;
  font-size: max(1.375rem, 16px);
  font-weight: 700;
  line-height: 1.5;
  color: #333333;
}

@media screen and (min-width: 768px) {
  .lp-service-catch {
    font-size: max(1.75rem, 16px);
  }
}

/* トップ以外のページ：最後のセクションに下余白がないので、黒帯CTAの上に余白をとる */
.lp:not(.lp--top) .lp-cta {
  margin-top: 3.5rem;
}

/* --- スタッフ・代表の写真 --- */
.lp-staff__img {
  flex: none;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  object-fit: cover;
}

.lp-message__img {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: auto;
  border-radius: 0.3125rem;
}

.lp-history {
  margin: 0;
}

.lp-history__row {
  display: flex;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed #dfdfdf;
  font-size: max(0.875rem, 14px);
  line-height: 1.7;
}

.lp-history__row dt {
  flex: 0 0 7.5rem;
  font-weight: 700;
}

.lp-history__row dd {
  margin: 0;
}

/* styles.css の iframe { position:absolute; top:0 } を打ち消す（そのままだとページ最上部に重なる） */
.lp-map {
  position: static;
  display: block;
  width: 100%;
  height: 22rem;
  border: 0;
  border-radius: 0.3125rem;
}

/* 実績の数字：3項目版（スマホは縦1列、PCは横3列） */
.lp-figures--3 {
  grid-template-columns: minmax(0, 1fr);
}

.lp-figures--3 .lp-figures__item:nth-child(odd) {
  border-right: none;
}

.lp-figures--3 .lp-figures__item:nth-child(-n + 2) {
  border-bottom: 1px solid #d9d9d9;
}

@media screen and (min-width: 768px) {
  .lp-figures--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lp-figures--3 .lp-figures__item:nth-child(-n + 2) {
    border-bottom: none;
  }

  .lp-figures--3 .lp-figures__item:not(:last-child) {
    border-right: 1px solid #d9d9d9;
  }
}

/* --- 無料相談・お問い合わせフォーム：2列の中では「ラベルを上、入力欄を下」に並べる（入力欄の固定幅700pxが列からはみ出していたため） --- */
@media screen and (min-width: 768px) {
  .lp-form-single .form__item-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .lp-form-single .form__item,
  .lp-form-single .form__item[role="group"] {
    flex: none;
    width: 100%;
  }

  .lp-form-single .form__input,
  .lp-form-single .form__select,
  .lp-form-single .form__select-wrapper,
  .lp-form-single .form__textarea {
    width: 100% !important;
  }

  .lp-form-single .form__item-wrapper > .form__item:first-child {
    text-align: left;
  }

  .lp-form-single .form__label {
    justify-content: flex-start;
  }
}

/* よくある質問ページ（旧デザイン）の最後に置く黒帯CTA */
.faq > .lp-cta,
.download > .lp-cta {
  margin-top: 3.5rem;
}

/* サイトマップ：リンク一覧と黒帯CTAの間の余白（よくある質問ページと同じくらい） */
.sitemap__grid-content {
  margin-bottom: 3.5rem;
}

@media (min-width: 768px) {
  .sitemap__grid-content {
    margin-bottom: 5rem;
  }
}

/* 旧デザインのページ（サービス詳細3ページ・実績・お客様の声・404・資料詳細）：本文と黒帯CTAの間の余白 */
.plan-standard__inner + .lp-cta,
.web-accessibility__inner + .lp-cta,
.registered-management-consultant__inner + .lp-cta,
.works__inner + .lp-cta,
.voice-page__inner + .lp-cta,
.error__inner + .lp-cta,
.download-bottom__inner + .lp-cta {
  margin-top: 3.5rem;
}

@media (min-width: 768px) {
  .plan-standard__inner + .lp-cta,
  .web-accessibility__inner + .lp-cta,
  .registered-management-consultant__inner + .lp-cta,
  .voice-page__inner + .lp-cta,
  .error__inner + .lp-cta,
  .download-bottom__inner + .lp-cta {
    margin-top: 5rem;
  }
}

/* 上部バナー（styles.css の .banner）は width: 100vw なので、縦スクロールバーの幅だけ画面からはみ出して横スクロールが出る。
   旧デザインのページ（.faq、.sitemap など）と同じく、外枠ではみ出しを切る。clip 非対応のブラウザは hidden で代用 */
.lp {
  overflow-x: hidden;
  overflow-x: clip;
}

/* ===== SNS運用代行・SEO/MEO（/service/sns/、/service/seo-meo/）：ホームページ制作ページ（plan-standard）と同じ部品で組んだページの補足 ===== */
/* 成功事例・よくある質問の下の「すべて見る」ボタン */
.plan-standard--service .plan-standard__case-more,
.plan-standard--service .plan-standard__summary-more,
.plan-standard--service .plan-standard__faq-more {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

/* 事例カードの仮画像（写真が入るまで） */
.plan-standard--service .card__img-wrapper .lp-ph {
  aspect-ratio: 1200 / 630;
  min-height: 0;
  border-radius: 0;
}

/* 事例の詳細の「詳しく見る」ボタン */
.plan-standard--service .img-tag-text__btn {
  margin-top: 1.5rem;
}

/* 青いボタン（icon-btn）は親の幅いっぱいに広がるので、追加した枠ではボタンの幅を制作ページと同じ（スマホ300px／PC400px）にそろえる */
.plan-standard--service .plan-standard__case-more .icon-btn,
.plan-standard--service .plan-standard__summary-more .icon-btn,
.plan-standard--service .plan-standard__faq-more .icon-btn,
.plan-standard--service .img-tag-text__btn .icon-btn {
  width: 100%;
  max-width: 18.75rem;
}

@media screen and (min-width: 768px) {
  .plan-standard--service .plan-standard__case-more .icon-btn,
  .plan-standard--service .plan-standard__summary-more .icon-btn,
  .plan-standard--service .plan-standard__faq-more .icon-btn,
  .plan-standard--service .img-tag-text__btn .icon-btn {
    max-width: 25rem;
  }
}

/* ご利用の形の下の注記 */
.plan-standard--service .plan-standard__summary-note {
  margin-top: 2rem;
  font-size: max(0.875rem, 14px);
  line-height: 1.8;
  text-align: center;
}

/* よくある質問 */
.plan-standard--service .plan-standard__faq {
  margin-top: 5rem;
}

.plan-standard--service .plan-standard__faq .instagram-support-accordion {
  margin-top: 2rem;
}

/* 最後の黒帯CTAとの間（ほかの旧デザインのページと同じ余白） */
.plan-standard--service .plan-standard__inner + .lp-cta {
  margin-top: 3.5rem;
}

@media screen and (min-width: 768px) {
  .plan-standard--service .plan-standard__faq {
    margin-top: 7.5rem;
  }

  .plan-standard--service .plan-standard__inner + .lp-cta {
    margin-top: 5rem;
  }
}

/* 導入の写真が入るまでの仮表示（制作ページの写真と同じ比率） */
.plan-standard--service .title-with-img__upper .lp-ph {
  aspect-ratio: 550 / 405;
  min-height: 0;
  border-radius: 0;
}

/* 流れの見出しの下の補足 */
.plan-standard--service .plan-standard__workflow-lead {
  margin-top: 1.5rem;
  font-size: max(1rem, 16px);
  line-height: 1.8;
  text-align: center;
}

/* 無料資料のリンク一覧 */
.plan-standard--service .plan-standard__doc-list {
  display: grid;
  gap: 0.75rem;
  padding: 0;
  list-style: none;
}

.plan-standard--service .plan-standard__doc-list a {
  font-size: max(1rem, 16px);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.plan-standard--service .plan-standard__doc-list a::after {
  content: " →";
}


/* ===== トップのファーストビューの画像（スマホを持つ手）=====
   現サイト（https://www.chaco-web.com/）と同じく、画像を画面の右端にぴったり付ける。
   PC：右端から幅52%（最大660px）、上から30px。文章は左側に重ねる。
   スマホ：文章の下に、右端に付けて幅75%（最大360px）。 */
.lp--top .lp-hero {
  position: relative;
}

.lp--top .lp-hero__visual {
  width: auto;
  margin-right: -1.25rem; /* .lp-section__inner の左右の余白ぶん、右端まで出す */
}

.lp--top .lp-hero__visual picture {
  display: block;
}

.lp-hero__img {
  display: block;
  width: 75%;
  max-width: 22.5rem;
  height: auto;
  margin-left: auto;
}

@media screen and (min-width: 768px) {
  .lp--top .lp-hero {
    /* 画像の高さ（幅 min(52vw, 660px) × 縦横比 1352/1632）＋上の30px が収まる高さを確保する */
    min-height: calc(min(52vw, 41.25rem) * 0.8284 + 1.875rem);
  }

  /* 画像は .lp-hero（画面幅いっぱい）を基準に置き、文章は画像より手前に出す */
  .lp--top .lp-hero__body {
    position: relative;
    z-index: 1;
    /* 画像に少しかかってもよいので、コピーの幅は60%まで取る */
    flex: 0 1 60%;
    max-width: 60%;
  }

  .lp--top .lp-hero__visual {
    position: absolute;
    top: 1.875rem;
    right: 0;
    z-index: 0;
    width: 52%;
    max-width: 41.25rem;
    margin-right: 0;
  }

  .lp-hero__img {
    width: 100%;
    max-width: none;
  }
}

/* PC（1024px〜）：コピーを画像に重ねない。
   画像の左端（画面幅 − 画像の幅 min(52vw, 660px)）から、コピーの左端（.lp-section__inner の余白。1490px を超えると中央寄せ）と
   すき間2.5remを引いた幅までにする */
@media screen and (min-width: 1024px) {
  .lp--top .lp-hero__body {
    flex-basis: auto;
    max-width: calc(100vw - min(52vw, 41.25rem) - max(0px, (100vw - 93.125rem) / 2) - 1.25rem - 2.5rem);
  }
}

/* 768〜1200px：文章の列が細く縦に長くなるので、画像を上寄せではなくファーストビューの上下中央に置く */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .lp--top .lp-hero__visual {
    top: 50%;
    transform: translateY(-50%);
  }
}

/* スマホ（〜767px）：画像をコピーの後ろに潜り込ませる。
   画像は右下に付けて薄くし、コピーの下に白い半透明の四角を敷いて文字を読みやすくする（白地は画像が透けて見える濃さ） */
@media screen and (max-width: 767px) {
  /* ファーストビューの高さ：右下に付けた画像（高さ＝幅 min(70vw, 320px) × 縦横比 1174/780）が
     上にはみ出さず、上に7remの余白が残る高さ以上にする */
  .lp--top .lp-hero {
    min-height: calc(5.5rem + min(70vw, 20rem) * 1.5051 + 1.5rem);
  }

  .lp--top .lp-hero__body {
    position: relative;
    z-index: 1;
    padding: 1.25rem 1rem;
    border-radius: 0.375rem;
    background-color: rgba(255, 255, 255, 0.68);
  }

  .lp--top .lp-hero__visual {
    position: absolute;
    /* ファーストビューの右下に付ける */
    right: 0;
    bottom: 0;
    z-index: 0;
    width: 70%;
    max-width: 20rem;
    margin-right: 0;
    opacity: 0.6;
    pointer-events: none;
  }

  .lp-hero__img {
    width: 100%;
    max-width: none;
  }
}

/* カードのアイコン（テーマ内の画像。仮の点線枠は使わない） */
.lp-icon--img {
  width: 4.5rem;
  height: 4.5rem;
  border: 0;
  border-radius: 0;
  background: none;
}

.lp-icon--img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* カード上部の写真（トップのPROBLEMなど）。カードの枠いっぱいに出し、人物が右寄りの写真なので右側を見せる */
.lp-card--photo {
  overflow: hidden;
  padding-top: 0;
  border: 0; /* 写真付きのカードは外側の罫線なし */
}

.lp-card__photo {
  margin: 0 -1.25rem 1rem;
  aspect-ratio: 3 / 2;
  background-color: #e5e5e5;
}

.lp-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
}

.lp-card--photo .lp-card__title {
  margin-top: 0;
}

/* ALL IN ONE（考える・作る・動かす）のカード：アイコンと見出しを横に並べ、見出しを大きく・青い下線で目立たせる */
.lp-card--role {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.875rem;
}

.lp-card--role .lp-icon--img {
  width: 3.5rem;
  height: 3.5rem;
}

.lp-card--role .lp-card__title {
  justify-self: start;
  margin-top: 0;
  padding-bottom: 0.125rem;
  font-size: max(1.625rem, 16px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
}

.lp-card--role .lp-card__text {
  grid-column: 1 / -1;
  margin-top: 1rem;
}

@media screen and (min-width: 768px) {
  .lp-card--role .lp-card__title {
    font-size: max(1.875rem, 16px);
  }
}

/* 番号付きの一覧を2カラムで折り返す（トップの「御社にお願いすることは4つだけ」） */
@media screen and (min-width: 768px) {
  .lp-step-list--2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 2.5rem;
  }
}

/* 「御社にお願いすることは4つだけ」：上のカードとの間・見出しと一覧の間をあけ、各項目を白い枠で区切る */
#department .lp-h3d {
  margin-top: 3.5rem;
  margin-bottom: 1.5rem;
}

.lp-step-list--2col {
  gap: 1rem;
}

.lp-step-list--2col .lp-step {
  align-items: center;
  padding: 1.25rem;
  border-radius: 0.375rem;
  background-color: #fff;
}

.lp-step-list--2col .lp-step__title {
  font-weight: 700;
}

.lp-step-list--2col .lp-step__text {
  margin-top: 0.5rem;
  line-height: 1.8;
}

@media screen and (min-width: 768px) {
  #department .lp-h3d {
    margin-top: 4.5rem;
    margin-bottom: 2rem;
  }

  .lp-step-list--2col {
    gap: 1.5rem;
  }

  .lp-step-list--2col .lp-step {
    padding: 1.5rem 1.75rem;
  }
}

/* 比較表（トップの COMPARE）：角丸の枠・薄い罫線・チャコウェブ列を青枠で強調 */
.lp-table.lp-table--compare {
  border: 1px solid #d4d7dd;
  border-radius: 0.5rem;
  background-color: #fff;
}

.lp-table--compare th,
.lp-table--compare td {
  padding: 1rem;
  border-width: 0 1px 1px 0;
  border-style: solid;
  border-color: #e3e5e9;
  text-align: center;
  vertical-align: middle;
}

.lp-table--compare tr > :last-child {
  border-right: 0;
}

.lp-table--compare tbody tr:last-child > * {
  border-bottom: 0;
}

/* 他社の列見出しはグレー、チャコウェブは青の2色で見せる */
.lp-table--compare thead th {
  padding-top: 1.125rem;
  padding-bottom: 1.125rem;
  border-color: rgba(255, 255, 255, 0.35);
  background-color: #8e8d8d;
  color: #fff;
  font-size: max(1rem, 15px);
  line-height: 1.5;
}

.lp-table--compare th[scope="row"],
.lp-table--compare thead th:first-child {
  border-color: #e3e5e9;
  background-color: #f2f2f3;
  color: #333333;
  text-align: left;
}

.lp-table--compare thead th:first-child {
  border-top-left-radius: 0.5rem;
}

.lp-table--compare tbody tr:last-child th {
  border-bottom-left-radius: 0.5rem;
}

.lp-table--compare .lp-table__hl-head {
  border-color: #0d51d9;
  border-top-right-radius: 0.5rem;
  background-color: #0d51d9;
  color: #fff;
  font-size: max(1.125rem, 16px);
  letter-spacing: 0.06em;
}

.lp-table--compare .lp-table__hl {
  background-color: #f1f5fd;
  box-shadow: inset 2px 0 0 #0d51d9, inset -2px 0 0 #0d51d9;
}

.lp-table--compare tbody tr:last-child .lp-table__hl {
  border-bottom-right-radius: 0.5rem;
  box-shadow: inset 2px 0 0 #0d51d9, inset -2px 0 0 #0d51d9, inset 0 -2px 0 #0d51d9;
}

.lp-table--compare .lp-table__hl b {
  color: #0d51d9;
}

/* トップの事例：公開済みの事例が1件だけのときは真ん中に置く */
@media screen and (min-width: 1024px) {
  #case .lp-grid--3 > .lp-grid__item:only-child {
    grid-column: 2;
  }
}

/* --- 料金（トップの PRICE）：角丸の表と、青枠の料金ボックス --- */
.lp-price__box {
  border: 2px solid #0d51d9;
  border-radius: 0.5rem;
}

.lp-price__plan {
  align-self: center;
  margin-bottom: 0.75rem;
  padding: 0.25rem 1rem;
  border-radius: 999px;
  background-color: #0d51d9;
  color: #fff;
  font-size: max(0.875rem, 14px);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.lp-price__box .lp-num {
  color: #0d51d9;
}

.lp-price__head {
  margin-bottom: 0.75rem;
  font-size: max(1.125rem, 16px);
  font-weight: 700;
}

/* --- 項目と内容のリスト（dl）：会社概要・プラン内容・契約条件など --- */
.lp-dl {
  margin: 0;
  border: 1px solid #8e8d8d;
  border-bottom: 0;
  background-color: #fff;
  font-size: max(0.9375rem, 15px);
  line-height: 1.7;
  color: #333333;
}

.lp-dl__row {
  display: grid;
  grid-template-columns: 28% minmax(0, 1fr);
  border-bottom: 1px solid #8e8d8d;
}

.lp-dl__term {
  padding: 0.75rem 0.875rem;
  border-right: 1px solid #8e8d8d;
  background-color: #f8f8f9;
  font-weight: 700;
}

.lp-dl__desc {
  margin: 0;
  padding: 0.75rem 0.875rem;
}

/* 角丸（トップの PRICE） */
.lp-dl--round {
  border: 1px solid #d4d7dd;
  border-radius: 0.5rem;
  overflow: hidden;
}

.lp-dl--round .lp-dl__row {
  grid-template-columns: 32% minmax(0, 1fr);
  border-bottom: 1px solid #e3e5e9;
}

.lp-dl--round .lp-dl__row:last-child {
  border-bottom: 0;
}

.lp-dl--round .lp-dl__term,
.lp-dl--round .lp-dl__desc {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
}

.lp-dl--round .lp-dl__term {
  border-right: 0;
  background-color: #f2f2f3;
}

/* 含まれる項目に青いチェックを付ける */
.lp-dl--check .lp-dl__term {
  position: relative;
  padding-left: 3rem;
}

.lp-dl--check .lp-dl__term::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 1.125rem;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.625rem;
  border-radius: 50%;
  background: #0d51d9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}

/* スマホでは角丸の一覧だけ、項目名の下に内容を並べる */
@media screen and (max-width: 767px) {
  .lp-dl--round .lp-dl__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-dl--round .lp-dl__term {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .lp-dl--check .lp-dl__term::before {
    left: 1rem;
  }
}

/* --- カードの並びをリスト（ul/li）にしたぶんの調整 --- */
ul.lp-grid {
  list-style: none;
}

/* li の中にカード（事例カードの article、リンクカードなど）が入る場合も、同じ行のカードの高さをそろえる */
.lp-grid__item,
.lp-case-article {
  display: flex;
  flex-direction: column;
}

.lp-grid__item > *,
.lp-case-article > * {
  flex: 1 1 auto;
}