span {
  display: inline-block;
}

.p-fv__title-main {
  font-size: 3.4rem;
  letter-spacing: -0.01em;
}
@media screen and (max-width: 767px) {
  .p-fv__title-main {
    font-size: min(2.5rem, 10.2vw);
  }
  /* 見出しは改行しない指定なので、SPでは中の <span>（例:「運用代行」）を次の行に送って画面幅に収める */
  .p-fv__title-main > span {
    display: block;
  }
  /* 上の小さい見出しも、狭い画面で最後の1文字だけ改行されないよう画面幅に合わせて小さくする */
  .p-fv__title--small {
    font-size: min(1.5rem, 6.4vw);
  }
}

/*
 * 見出しが長いページ用（広告コンサルティング）。
 * .p-fv__title-main は改行しない指定なので、HTML側の <br> で2行にし、
 * SPは1行（11文字）が画面幅に収まる大きさにする。
 */
@media screen and (max-width: 767px) {
  .p-fv__title-main--long {
    font-size: min(2.5rem, 7.6vw);
  }
}

.p-fv__media {
  margin-top: 2.1rem;
  padding: 0.6rem 2.5rem;
  border-radius: 0.6rem;
  background-color: #fff;
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.15);
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .p-fv__media {
    margin-top: 1.6rem;
    padding: 0.6rem 1rem;
    width: 100%;
  }
}

.p-fv__media-head {
  display: flex;
  align-items: center;
  width: 100%;
}
.p-fv__media-head::before,
.p-fv__media-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #c2c2c2;
}

.p-fv__media-label {
  border-radius: 2.5rem;
  background-color: #aeaeae;
  width: 5.4rem;
  height: 1.6rem;
  color: #fff;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6rem;
  letter-spacing: -0.01em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-fv__media-label {
    width: 4.5rem;
    height: 1.4rem;
    font-size: 0.8rem;
    line-height: 1.4rem;
    letter-spacing: -0.01em;
  }
}

.p-fv__media-list {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .p-fv__media-list {
    gap: 1.3rem;
  }
}

.p-fv__media-item:nth-child(1) {
  width: 6.1rem;
  aspect-ratio: 97/30;
}
.p-fv__media-item:nth-child(2) {
  width: 7.5rem;
  aspect-ratio: 120/30;
}
.p-fv__media-item:nth-child(3) {
  width: 8.6rem;
  aspect-ratio: 138/30;
}
@media screen and (max-width: 767px) {
  .p-fv__media-item:nth-child(1) {
    width: 4.5rem;
  }
  .p-fv__media-item:nth-child(2) {
    width: 5.6rem;
  }
  .p-fv__media-item:nth-child(3) {
    width: 6.5rem;
  }
}

.p-fv__media-img {
  display: block;
  width: 100%;
  height: 100%;
}

/*
 * 対応媒体のロゴが6つの版（広告コンサルティングのページ）。
 * 上の nth-child(1)〜(3) の幅指定はロゴ3つ用なので、ここで上書きする。
 * ロゴ画像は余白込みで同じ幅（YouTubeだけ横長）に書き出してあるので、高さは画像の比率に任せる。
 */
.p-fv__media-list--six {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.p-fv__media-list--six .p-fv__media-item {
  width: 5rem;
  aspect-ratio: auto;
}
@media screen and (max-width: 767px) {
  .p-fv__media-list--six .p-fv__media-item {
    width: 4.25rem;
  }
}

.p-fv__media-list--six .p-fv__media-item:nth-child(6) {
  width: 7.3125rem;
}
@media screen and (max-width: 767px) {
  .p-fv__media-list--six .p-fv__media-item:nth-child(6) {
    width: 6.25rem;
  }
}

.p-fv__media-list--six .p-fv__media-img {
  height: auto;
}

.p-fv__media-note {
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem;
  letter-spacing: -0.01em;
}
@media screen and (max-width: 767px) {
  .p-fv__media-note {
    font-size: 0.8rem;
    line-height: 1.3rem;
    letter-spacing: -0.01em;
    text-align: left;
  }
}

/*
 * 対応媒体の枠に入らず単独で置いた注記（例：クリエイティブ制作のページ）は、
 * 上の要素との間が空かないので余白を足す。枠の中の注記は枠の gap で空いている。
 */
.p-fv__left > .p-fv__media-note {
  margin-top: 1.25rem;
}

/* 単語の途中で改行させたくない語を囲む（例：<span class="u-nowrap">Webサイト</span>） */
.u-nowrap {
  display: inline-block;
}

.br-sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .br-sp {
    display: inline;
  }
}

@media screen and (max-width: 767px) {
  .br-pc {
    display: none;
  }
}

/* ========================================
   会社紹介（企業ロゴの下 p-intro）
   緑のグラデーションの帯に白いカードを載せる。
   背景の「＋」は飾りなので疑似要素で描き、カードの後ろに置く。
   ======================================== */

.p-intro {
  position: relative;
  overflow: hidden;
  padding-block: 6.25rem;
  border-radius: 2.5rem;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#35c670),
    to(#b0e481)
  );
  background: linear-gradient(90deg, #35c670 0%, #b0e481 100%);
}
@media screen and (max-width: 767px) {
  .p-intro {
    padding-block: 2.5rem;
    border-radius: 1.25rem;
  }
}

/* 「＋」の飾り（左下に2つ・右上に2つ） */
.p-intro::before,
.p-intro::after,
.p-intro__inner::before,
.p-intro__inner::after {
  content: "";
  position: absolute;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 16% no-repeat,
    linear-gradient(currentColor, currentColor) center / 16% 100% no-repeat;
  pointer-events: none;
}

.p-intro::before {
  bottom: 1.0625rem;
  left: 4.6%;
  width: 13rem;
  height: 13rem;
  color: #35c670;
}
@media screen and (max-width: 767px) {
  .p-intro::before {
    bottom: 0.5rem;
    left: 0.5rem;
    width: 5rem;
    height: 5rem;
  }
}

.p-intro::after {
  top: 18.3125rem;
  left: 2%;
  width: 5.5rem;
  height: 5.5rem;
  color: #35c670;
}
@media screen and (max-width: 767px) {
  .p-intro::after {
    display: none;
  }
}

.p-intro__inner::before {
  top: 1.75rem;
  right: 6.7%;
  width: 5.5rem;
  height: 5.5rem;
  color: #8bdb7c;
}
@media screen and (max-width: 767px) {
  .p-intro__inner::before {
    top: 0.5rem;
    right: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
  }
}

.p-intro__inner::after {
  top: 8.5rem;
  right: 4.55%;
  width: 3rem;
  height: 3rem;
  color: #8bdb7c;
}
@media screen and (max-width: 767px) {
  .p-intro__inner::after {
    top: 2.75rem;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
  }
}

.p-intro__card {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 1rem;
  max-width: 75rem;
  margin-inline: auto;
  padding: 3.125rem 2.5rem;
  border-radius: 0.625rem;
  background: #fff;
}
@media screen and (max-width: 767px) {
  .p-intro__card {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 1.25rem;
  }
}

/* 見出しはイラストの手前まで使い、本文だけ幅を絞る（デザインどおり） */
.p-intro__body {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  color: #333;
}

.p-intro__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.p-intro__title-sub {
  font-size: 2rem;
  letter-spacing: -0.02rem;
}
@media screen and (max-width: 767px) {
  .p-intro__title-sub {
    font-size: 1.125rem;
    letter-spacing: -0.01125rem;
  }
}

.p-intro__title-main {
  font-size: 2.5rem;
  letter-spacing: -0.025rem;
}
@media screen and (max-width: 767px) {
  .p-intro__title-main {
    font-size: 1.5rem;
    letter-spacing: -0.015rem;
  }
}

.p-intro__text {
  max-width: 46.4375rem;
  margin-top: 2.5rem;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.75rem; /* 175% */
  letter-spacing: -0.01rem;
}
@media screen and (max-width: 767px) {
  .p-intro__text {
    margin-top: 1rem;
    font-size: 0.875rem;
    line-height: 1.5rem; /* 171.429% */
  }
}

.p-intro__image {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 29%;
}
@media screen and (max-width: 767px) {
  .p-intro__image {
    width: 60%;
  }
}

.p-intro__img {
  display: block;
  width: 100%;
  height: auto;
}

/* ========================================
   料金プラン（p-plan）
   ======================================== */

.p-plan__title .c-title__text {
  font-size: 2.5rem;
  line-height: 4.375rem; /* 175% */
  letter-spacing: -0.025rem;
}
@media screen and (max-width: 767px) {
  .p-plan__title .c-title__text {
    font-size: 1.25rem;
    line-height: 1.75rem; /* 140% */
  }
}

.p-plan__title .c-title__text-big {
  line-height: 4.375rem; /* 116.667% */
}
@media screen and (max-width: 767px) {
  .p-plan__title .c-title__text-big {
    line-height: 2.5rem; /* 160% */
  }
}

/* 見出し・ラベルは単語の途中で改行しない（HTML側の <wbr> の位置で折り返す） */
.p-plan__sentence,
.p-plan__fee-label,
.p-plan__price-title,
.p-plan__table-head,
.p-plan__table-label,
.p-plan__work-item {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 運用代行手数料・契約期間の表 */
.p-plan__fee {
  max-width: 70rem;
  margin-inline: auto;
}

.p-plan__fee-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media screen and (max-width: 767px) {
  .p-plan__fee-row {
    grid-template-columns: 1fr;
  }
}

.p-plan__fee-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 2.1875rem 0.625rem;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#35c670),
    to(#b0e481)
  );
  background: linear-gradient(90deg, #35c670 0%, #b0e481 100%);
  color: #fff;
  font-size: 1.875rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.875rem; /* 100% */
  letter-spacing: -0.01875rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-plan__fee-label {
    padding: 0.625rem 1rem;
    font-size: 1rem;
    line-height: 1.5rem; /* 150% */
    letter-spacing: -0.01rem;
  }
}

.p-plan__fee-row:first-child .p-plan__fee-label {
  padding-block: 3.375rem;
  border-bottom: 0.0625rem solid #fff;
  border-radius: 1.25rem 0 0 0;
}
@media screen and (max-width: 767px) {
  .p-plan__fee-row:first-child .p-plan__fee-label {
    padding-block: 0.625rem;
    border-bottom: none;
    border-radius: 0.625rem 0.625rem 0 0;
  }
}

.p-plan__fee-row:last-child .p-plan__fee-label {
  border-radius: 0 0 0 1.25rem;
}
@media screen and (max-width: 767px) {
  .p-plan__fee-row:last-child .p-plan__fee-label {
    border-radius: 0;
  }
}

.p-plan__fee-label-small {
  font-size: 1.375rem;
}
@media screen and (max-width: 767px) {
  .p-plan__fee-label-small {
    font-size: 0.75rem;
  }
}

.p-plan__fee-value {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 1.25rem 4.375rem;
  border-right: 0.1875rem solid #b0e481;
  color: #313131;
}
@media screen and (max-width: 767px) {
  .p-plan__fee-value {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem;
    border-right-width: 0.125rem;
    border-left: 0.125rem solid #b0e481;
    text-align: center;
  }
}

.p-plan__fee-row:first-child .p-plan__fee-value {
  border-top: 0.1875rem solid #b0e481;
  border-bottom: 0.0625rem solid #c2c2c2;
  border-radius: 0 1.25rem 0 0;
}
@media screen and (max-width: 767px) {
  .p-plan__fee-row:first-child .p-plan__fee-value {
    border-top: none;
    border-bottom: none;
    border-radius: 0;
  }
}

.p-plan__fee-row:last-child .p-plan__fee-value {
  border-bottom: 0.1875rem solid #b0e481;
  border-radius: 0 0 1.25rem 0;
}
@media screen and (max-width: 767px) {
  .p-plan__fee-row:last-child .p-plan__fee-value {
    border-bottom-width: 0.125rem;
    border-radius: 0 0 0.625rem 0.625rem;
  }
}

.p-plan__fee-main {
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.01375rem;
}
@media screen and (max-width: 767px) {
  .p-plan__fee-main {
    font-size: 1.125rem;
  }
}

.p-plan__fee-rate {
  font-family: Montserrat;
  font-size: 1.875rem;
  letter-spacing: -0.01875rem;
}
@media screen and (max-width: 767px) {
  .p-plan__fee-rate {
    font-size: 1.5rem;
  }
}

.p-plan__fee-main-small {
  font-size: 1rem;
}
@media screen and (max-width: 767px) {
  .p-plan__fee-main-small {
    font-size: 0.75rem;
  }
}

.p-plan__fee-note {
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.01rem;
}
@media screen and (max-width: 767px) {
  .p-plan__fee-note {
    font-size: 0.75rem;
    line-height: 1.125rem; /* 150% */
  }
}

/* 表の下の注記 */
.p-plan__bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 70rem;
  margin: 1.875rem auto 0;
}

.p-plan__bottom-text {
  text-align: left;
}
@media screen and (max-width: 767px) {
  .p-plan__bottom {
    gap: 0.25rem;
    margin-top: 1rem;
  }
}

/* 見出しの丸（作業内容の見出しサイズ） */
.p-plan__price-section {
  padding-left: 2.25rem;
}
@media screen and (max-width: 767px) {
  .p-plan__price-section {
    padding-left: 1.5rem;
  }
}

.p-plan__price-section::after {
  width: 1.25rem;
  height: 1.25rem;
}
@media screen and (max-width: 767px) {
  .p-plan__price-section::after {
    top: 0.9375rem; /* 見出しが2行になっても1行目の高さに合わせる */
    width: 0.875rem;
    height: 0.875rem;
  }
}

.p-plan__price-title {
  color: #313131;
}
@media screen and (max-width: 767px) {
  .p-plan__price-title {
    font-size: 1.25rem;
    letter-spacing: -0.0125rem;
  }
}

/* シミュレーションの見出し（小さめ） */
.p-plan__price-section--small {
  padding-left: 1.75rem;
}
@media screen and (max-width: 767px) {
  .p-plan__price-section--small {
    padding-left: 1.375rem;
  }
}

.p-plan__price-section--small::after {
  width: 0.875rem;
  height: 0.875rem;
}
@media screen and (max-width: 767px) {
  .p-plan__price-section--small::after {
    top: 0.8125rem;
    width: 0.75rem;
    height: 0.75rem;
  }
}

.p-plan__price-section--small .p-plan__price-title {
  font-size: 2rem;
  letter-spacing: -0.02rem;
}
@media screen and (max-width: 767px) {
  .p-plan__price-section--small .p-plan__price-title {
    font-size: 1.125rem;
  }
}

/* シミュレーション */
.p-plan__simulation {
  max-width: 70rem;
  margin: 5.5rem auto 0;
}
@media screen and (max-width: 767px) {
  .p-plan__simulation {
    margin-top: 3rem;
  }
}

.p-plan__table-scroll {
  margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
  .p-plan__table-scroll {
    margin-top: 1.25rem;
  }
}

.p-plan__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

/* 列幅は割合で指定（固定レイアウトなので1行目の幅が列幅になる） */
.p-plan__table-blank {
  width: 21.3%;
  padding: 0;
}
@media screen and (max-width: 767px) {
  .p-plan__table-blank {
    width: 26%;
  }
}

.p-plan__table-head {
  padding: 2rem 0.625rem;
  border-radius: 1.25rem 1.25rem 0 0;
  color: #fff;
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.875rem; /* 115.385% */
  letter-spacing: -0.01625rem;
  text-align: center;
  vertical-align: middle;
}
@media screen and (max-width: 767px) {
  .p-plan__table-head {
    padding: 1rem 0.25rem;
    border-radius: 0.625rem 0.625rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.25rem; /* 142.857% */
    letter-spacing: -0.00875rem;
  }
}

.p-plan__table-head--50 {
  background: #35c670;
}

.p-plan__table-head--100 {
  background: #3da85c;
}

.p-plan__table-label {
  padding: 1.5625rem 0.625rem;
  background: #c2c2c2;
  border-bottom: 0.0625rem solid #fff;
  color: #fff;
  font-family: Montserrat, "Noto Sans JP", sans-serif;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.875rem; /* 150% */
  letter-spacing: -0.0125rem;
  text-align: center;
  vertical-align: middle;
}
@media screen and (max-width: 767px) {
  .p-plan__table-label {
    padding: 1rem 0.25rem;
    font-size: 0.75rem;
    line-height: 1.25rem; /* 142.857% */
  }
}

.p-plan__table tbody tr:first-child .p-plan__table-label {
  border-radius: 0.625rem 0 0 0;
}
@media screen and (max-width: 767px) {
  .p-plan__table tbody tr:first-child .p-plan__table-label {
    border-radius: 0.375rem 0 0 0;
  }
}

.p-plan__table tbody tr:last-child .p-plan__table-label {
  border-bottom: none;
}

.p-plan__table-label-small {
  font-size: 1rem;
}
@media screen and (max-width: 767px) {
  .p-plan__table-label-small {
    display: block;
    font-size: 0.6875rem;
  }
}

.p-plan__table-value {
  padding: 1.5625rem 0.625rem;
  background: #fff;
  border-right: 0.0625rem solid #c2c2c2;
  border-bottom: 0.0625rem solid #c2c2c2;
  color: #313131;
  font-family: Montserrat, "Noto Sans JP", sans-serif;
  font-style: normal;
  font-weight: 600;
  line-height: 1.875rem;
  text-align: center;
  vertical-align: middle;
}
@media screen and (max-width: 767px) {
  .p-plan__table-value {
    padding: 1rem 0.125rem;
    line-height: 1.25rem;
    white-space: nowrap;
  }
}

.p-plan__table-num {
  font-size: 1.75rem;
  letter-spacing: -0.0175rem;
}
@media screen and (max-width: 767px) {
  .p-plan__table-num {
    font-size: 1rem;
  }
}

.p-plan__table-num--50 {
  color: #35c670;
}

.p-plan__table-num--100 {
  color: #3da85c;
}

.p-plan__table-unit {
  font-size: 1.125rem;
}
@media screen and (max-width: 767px) {
  .p-plan__table-unit {
    font-size: 0.6875rem;
  }
}

/* 作業内容（グレーの箱） */
.p-plan__price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4.375rem;
  max-width: 75rem;
  margin: 7.5rem auto 0;
  padding: 3.75rem 2.625rem;
  border-radius: 0.625rem;
}
@media screen and (max-width: 767px) {
  .p-plan__price {
    gap: 2.5rem;
    margin-top: 3rem;
    padding: 2rem 1rem;
  }
}

/* adjust.css の .p-plan__price > * の幅制限・中央寄せを打ち消す */
.p-plan__work {
  max-width: none;
  margin-inline: 0;
}

.p-plan__work-text {
  margin-top: 2.5rem;
  color: #333;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.875rem; /* 150% */
  letter-spacing: -0.0125rem;
}
@media screen and (max-width: 767px) {
  .p-plan__work-text {
    margin-top: 1.25rem;
    font-size: 1rem;
    line-height: 1.5rem; /* 150% */
  }
}

.p-plan__work-list {
  display: grid;
  grid-template-columns: repeat(3, auto);
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 1.25rem 1.5rem;
  margin-top: 2.5rem;
}
@media screen and (max-width: 767px) {
  .p-plan__work-list {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-top: 1.25rem;
  }
}

.p-plan__work-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0.8125rem 2.5rem;
  border: 0.0625rem solid #3da85c;
  border-radius: 0.625rem;
  background: rgba(229, 247, 210, 0.2);
  color: #3da85c;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem; /* 140% */
  letter-spacing: -0.0125rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-plan__work-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5rem; /* 160% */
  }
}

/* ボタン上の一文 */
.p-plan__price-bottom-text {
  color: #333;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.875rem; /* 150% */
  letter-spacing: -0.0125rem;
}
@media screen and (max-width: 767px) {
  .p-plan__price-bottom-text {
    font-size: 1rem;
    line-height: 1.5rem; /* 150% */
    text-align: left;
  }
}

/* ========================================
   料金プラン：料金表を2つ並べる版（p-plan--wide）
   クリエイティブ制作ページ（page-web-production.php）で使う。
   表のパーツは上の p-plan__fee・p-plan__table をそのまま使い、
   違うところだけ修飾子で足す（page-listing-ads.php の見た目は変えない）。
   ======================================== */

/* 料金表・注記・シミュレーションを、作業内容の箱と同じ幅にそろえる */
.p-plan--wide .p-plan__bottom,
.p-plan--wide .p-plan__simulation {
  max-width: 75rem;
}

/* 料金表2つの並び（＋でつなぐ） */
.p-plan__fees {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 75rem;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .p-plan__fees {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    gap: 1rem;
  }
}

.p-plan__fee-group {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
}

.p-plan__fees-plus {
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -ms-flex-item-align: center;
  align-self: center;
  width: 1.5625rem;
  height: 1.5625rem;
}

.p-plan__fees-plus::before,
.p-plan__fees-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0.25rem;
  margin-top: -0.125rem;
  border-radius: 0.8125rem;
  background: #8bdb7c;
}

.p-plan__fees-plus::after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

/* 料金表の見出し（丸数字＋項目名） */
.p-plan__fee-heading {
  word-break: keep-all;
  overflow-wrap: anywhere;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.875rem;
  color: #333;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.875rem; /* 136.364% */
  letter-spacing: -0.01375rem;
}
@media screen and (max-width: 767px) {
  .p-plan__fee-heading {
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 1.125rem;
    line-height: 1.5rem; /* 133.333% */
  }
}

.p-plan__fee-heading-num {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 2.125rem;
  height: 2.125rem;
  border: 0.0625rem solid #35c670;
  border-radius: 50%;
  color: #35c670;
  font-family: Montserrat;
  font-size: 1.375rem;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .p-plan__fee-heading-num {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 1.125rem;
  }
}

.p-plan__fee-heading-small {
  font-size: 1.125rem;
}
@media screen and (max-width: 767px) {
  .p-plan__fee-heading-small {
    font-size: 0.8125rem;
  }
}

/*
 * 項目が多い小さめの料金表（p-plan__fee--compact）。
 * 行ごとの grid だと項目名の幅が行ごとにばらつくので、表全体を1つの grid にして
 * 行（.p-plan__fee-row）は display: contents で中身だけ並べる。
 */
.p-plan__fee--compact {
  display: grid;
  grid-template-columns: auto 1fr;
  max-width: none;
  margin-inline: 0;
}
@media screen and (max-width: 767px) {
  .p-plan__fee--compact {
    grid-template-columns: 1fr;
  }
}

.p-plan__fee--compact .p-plan__fee-row {
  display: contents;
}

.p-plan__fee--compact .p-plan__fee-label {
  padding: 2rem 1.25rem;
  border-bottom: 0.0625rem solid #fff;
  font-size: 1.125rem;
  line-height: 1.875rem; /* 166.667% */
  letter-spacing: -0.01125rem;
}
@media screen and (max-width: 767px) {
  .p-plan__fee--compact .p-plan__fee-label {
    padding: 0.625rem 1rem;
    border-bottom: none;
    font-size: 1rem;
    line-height: 1.5rem; /* 150% */
  }
}

.p-plan__fee--compact .p-plan__fee-row:first-child .p-plan__fee-label {
  padding-block: 2rem;
  border-radius: 0.625rem 0 0 0;
}
@media screen and (max-width: 767px) {
  .p-plan__fee--compact .p-plan__fee-row:first-child .p-plan__fee-label {
    padding-block: 0.625rem;
    border-radius: 0.625rem 0.625rem 0 0;
  }
}

.p-plan__fee--compact .p-plan__fee-row:last-child .p-plan__fee-label {
  border-bottom: none;
  border-radius: 0 0 0 0.625rem;
}
@media screen and (max-width: 767px) {
  .p-plan__fee--compact .p-plan__fee-row:last-child .p-plan__fee-label {
    border-radius: 0;
  }
}

.p-plan__fee--compact .p-plan__fee-value {
  gap: 0.125rem;
  padding: 1rem 1.25rem;
  border-bottom: 0.0625rem solid #c2c2c2;
}
@media screen and (max-width: 767px) {
  .p-plan__fee--compact .p-plan__fee-value {
    padding: 0.75rem 1rem;
    border-bottom: none;
  }
}

.p-plan__fee--compact .p-plan__fee-row:first-child .p-plan__fee-value {
  border-radius: 0 0.625rem 0 0;
}
@media screen and (max-width: 767px) {
  .p-plan__fee--compact .p-plan__fee-row:first-child .p-plan__fee-value {
    border-radius: 0;
  }
}

.p-plan__fee--compact .p-plan__fee-row:last-child .p-plan__fee-value {
  border-radius: 0 0 0.625rem 0;
}
@media screen and (max-width: 767px) {
  .p-plan__fee--compact .p-plan__fee-row:last-child .p-plan__fee-value {
    border-radius: 0 0 0.625rem 0.625rem;
  }
}

.p-plan__fee--compact .p-plan__fee-main {
  font-family: Montserrat, "Noto Sans JP", sans-serif;
  font-size: 1.25rem;
  letter-spacing: -0.0125rem;
}
@media screen and (max-width: 767px) {
  .p-plan__fee--compact .p-plan__fee-main {
    font-size: 1rem;
  }
}

.p-plan__fee--compact .p-plan__fee-note {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: -0.0075rem;
}
@media screen and (max-width: 767px) {
  .p-plan__fee--compact .p-plan__fee-note {
    font-size: 0.6875rem;
    line-height: 1rem; /* 145.455% */
  }
}

/* シミュレーション表（行が多いので項目列を広めにする） */
.p-plan--wide .p-plan__table-blank {
  width: 26.7%;
}
@media screen and (max-width: 767px) {
  .p-plan--wide .p-plan__table-blank {
    width: 28%;
  }
}

.p-plan--wide .p-plan__table-head {
  font-size: 1.375rem;
  letter-spacing: -0.01375rem;
}
@media screen and (max-width: 767px) {
  .p-plan--wide .p-plan__table-head {
    font-size: 0.75rem;
    line-height: 1.125rem; /* 150% */
  }
}

.p-plan__table-num--accent {
  color: #35c670;
}

/* 金額の後ろの内訳（SPは金額の下に回す） */
.p-plan__table-note {
  font-size: 1.125rem;
}
@media screen and (max-width: 767px) {
  .p-plan__table-note {
    display: block;
    font-size: 0.6875rem;
  }
}

/* 作業内容のタグ：文字数が多いので、3列に収まるよう左右の余白を詰める */
.p-plan--wide .p-plan__work-item {
  padding-inline: 1.5rem;
}
@media screen and (max-width: 767px) {
  .p-plan--wide .p-plan__work-item {
    padding-inline: 0.75rem;
  }
}

/* 作業内容のタグ：文字数が多いものは3列にせず、入る分だけ横に並べる */
.p-plan__work-list--flow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  gap: 1.25rem 2.875rem;
}
@media screen and (max-width: 767px) {
  .p-plan__work-list--flow {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* ========================================
   料金プラン：作業内容の箱に足すパーツ（広告コンサルティングのページ）
   ======================================== */

/* 「含まれないもの」の見出しは、丸ではなく「！」のマークにする */
.p-plan__price-section--caution {
  padding-left: 1.625rem;
}
@media screen and (max-width: 767px) {
  .p-plan__price-section--caution {
    padding-left: 1.25rem;
  }
}

.p-plan__price-section--caution::after {
  width: 0.625rem;
  height: 2.5625rem;
  border-radius: 0;
  background: url(../images/service/ad-consulting/icon-caution.svg) no-repeat
    center / contain;
}
@media screen and (max-width: 767px) {
  .p-plan__price-section--caution::after {
    top: 50%;
    width: 0.5rem;
    height: 2rem;
  }
}

/* タグが3つで1行に収まるよう、左右の余白を少し詰める */
.p-plan__work-list--narrow .p-plan__work-item {
  padding-inline: 1.875rem;
}
@media screen and (max-width: 767px) {
  .p-plan__work-list--narrow .p-plan__work-item {
    padding-inline: 0.75rem;
  }
}

/* 他のサービスページへのリンク（矢印付き） */
.p-plan__work-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  margin-top: 1.25rem;
}
@media screen and (max-width: 767px) {
  .p-plan__work-links {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0.75rem;
  }
}

.p-plan__work-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.25rem;
  color: #3da85c;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem; /* 175% */
  letter-spacing: -0.01rem;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
@media screen and (max-width: 767px) {
  .p-plan__work-link {
    gap: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5rem; /* 171.429% */
  }
}

.p-plan__work-link::before {
  content: "";
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 2.5rem;
  height: 0.375rem;
  background: url(../images/service/ad-consulting/icon-arrow.svg) no-repeat
    center / contain;
}
@media screen and (max-width: 767px) {
  .p-plan__work-link::before {
    width: 1.75rem;
  }
}

@media (hover: hover) {
  .p-plan__work-link:hover {
    opacity: 0.7;
  }
}

/* ========================================
   料金プラン：行の高さがすべて同じ料金表（p-plan__fee--even）
   データマネジメント・解析のページで使う（3行）。
   通常の p-plan__fee は1行目だけ高く、間の行の区切り線も無いので、ここで足す。
   ======================================== */

.p-plan__fee--even .p-plan__fee-row:first-child .p-plan__fee-label {
  padding-block: 2.1875rem;
}
@media screen and (max-width: 767px) {
  .p-plan__fee--even .p-plan__fee-row:first-child .p-plan__fee-label {
    padding-block: 0.625rem;
  }
}

.p-plan__fee--even
  .p-plan__fee-row:not(:first-child):not(:last-child)
  .p-plan__fee-label {
  border-bottom: 0.0625rem solid #fff;
}
@media screen and (max-width: 767px) {
  .p-plan__fee--even
    .p-plan__fee-row:not(:first-child):not(:last-child)
    .p-plan__fee-label {
    border-bottom: none;
  }
}

.p-plan__fee--even
  .p-plan__fee-row:not(:first-child):not(:last-child)
  .p-plan__fee-value {
  border-bottom: 0.0625rem solid #c2c2c2;
}
@media screen and (max-width: 767px) {
  .p-plan__fee--even
    .p-plan__fee-row:not(:first-child):not(:last-child)
    .p-plan__fee-value {
    border-bottom: none;
  }
}

/* ========================================
   よくある質問：回答の中のリンク
   ======================================== */

.p-faq__answer-link {
  color: #00adda;
  border-bottom: 0.0625rem solid currentColor;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

@media (hover: hover) {
  .p-faq__answer-link:hover {
    opacity: 0.7;
  }
}

/* ========================================
   お問合せ（本文中のフォーム p-contact--main）
   フォーム本体はサイドバーと同じCF7。
   入力欄・同意・送信ボタンの見た目は styles.css の p-contact__* をそのまま使い、
   contact-form.css で .p-contact__aside にだけ当てている調整をここで足す。
   ======================================== */

.p-contact--main {
  padding-block: 5rem;
}
@media screen and (max-width: 767px) {
  .p-contact--main {
    /* styles.css の .p-contact（SP）の緑背景を消す */
    background-color: transparent;
    padding-block: 2.5rem;
  }
}

.p-contact--main .wpcf7 {
  max-width: 50rem;
  margin: 1.25rem auto 0;
}

.p-contact--main .p-contact__row + .p-contact__row {
  margin-top: 0.5625rem;
}

.p-contact--main .p-contact__head {
  line-height: 2.25; /* 36px */
}
@media screen and (max-width: 1024px) {
  .p-contact--main .p-contact__head {
    font-size: 1rem;
  }
}

@media screen and (max-width: 1024px) {
  .p-contact--main .p-contact__data {
    margin-top: 0;
  }
}

/* 冒頭の span { display: inline-block; } で入力欄が縮むので、CF7の包み要素は横幅いっぱいにする */
.p-contact--main .p-contact__data .wpcf7-form-control-wrap {
  display: block;
}

.p-contact--main .wpcf7-form input,
.p-contact--main .wpcf7-form select,
.p-contact--main .wpcf7-form textarea {
  max-width: 100%;
}

/* 本文中は幅に余裕があるので、Turnstileは縮小せず中央に置く */
.p-contact--main .wpcf7-turnstile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 1.25rem;
}

.p-contact--main .p-contact__submit p {
  margin: 0;
}

.p-contact--main .p-contact__submit input {
  letter-spacing: 0.055rem;
}

/* 送信中のスピナーでボタンの高さが変わらないようにする（contact-form.css と同じ理由） */
.p-contact--main .p-contact__submit .wpcf7-spinner {
  position: absolute;
  top: 50%;
  right: 2.75rem;
  margin: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.p-contact--main .wpcf7-form > p:empty,
.p-contact--main .screen-reader-response,
.p-contact--main .wpcf7-response-output:empty {
  display: none;
}

/*
 * サイドバーのフォーム（p-contact__aside）は、1024px以下では横に固定されず
 * ページの一番下に普通に並ぶ。本文中にも同じフォーム（p-contact--main）があり
 * 2つ並んでしまうので、サイドバーの方を消す。
 * ボタンのリンク先 #contact は、サービス詳細ページでは本文中のフォームに付けてある。
 */
@media screen and (max-width: 1024px) {
  .p-contact__aside {
    display: none;
  }
}

/* ========================================
   内製化のメリット（p-merit）
   広告コンサルティングのページで使う。トップページの「失敗しない広告代理店の選び方」
   （p-top-choice）と同じ形だが、トップに影響しないよう独自クラスで組む。
   Point の丸・横線・三角とドット背景の画像は、トップと同じものを使う。
   ======================================== */

.p-merit {
  padding-block: 5rem 6.25rem;
  overflow: hidden;
  border-radius: 3.125rem 3.125rem 0 0;
  background: #3da85c url(../images/common/dots-green.webp) repeat;
}
@media screen and (max-width: 767px) {
  .p-merit {
    padding-block: 2.5rem 4.375rem;
    border-radius: 1.75rem 1.75rem 0 0;
  }
}

/* 見出し（c-title を使い、白文字にする） */
.p-merit__title::after {
  content: "MERIT";
  color: rgba(229, 247, 210, 0.3);
}

.p-merit__title-text {
  color: #fff;
  font-size: 2.5rem;
  line-height: 4.375rem; /* 175% */
  letter-spacing: -0.025rem;
}
@media screen and (max-width: 767px) {
  .p-merit__title-text {
    font-size: 1.25rem;
    line-height: 1.75rem; /* 140% */
  }
}

.p-merit__title-num {
  font-family: Montserrat;
  font-size: 6.25rem;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .p-merit__title-num {
    font-size: 3.125rem;
  }
}

/* 白い箱 */
.p-merit__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 75rem;
  margin: 2.5rem auto 0;
  padding: 2.5rem;
  border-radius: 1.25rem;
  background: #fff;
  color: #333;
}
@media screen and (max-width: 767px) {
  .p-merit__list {
    gap: 1.875rem;
    margin-top: 1.875rem;
    padding: 1.875rem 1.25rem;
  }
}

/* 「MERIT 01」の丸と横線 */
.p-merit__point {
  position: relative;
  z-index: 2;
  height: 5.3125rem;
}
@media screen and (max-width: 767px) {
  .p-merit__point {
    height: 4.375rem;
  }
}

.p-merit__line {
  position: absolute;
  top: 2.5rem;
  left: 0;
  width: 100%;
  height: 1px;
}
@media screen and (max-width: 767px) {
  .p-merit__line {
    top: 2.1875rem;
  }
}

.p-merit__point-bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 5rem;
  height: 5rem;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  .p-merit__point-bg {
    width: 4.375rem;
    height: 4.375rem;
  }
}

.p-merit__point-label {
  position: absolute;
  top: 1rem;
  left: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.125rem;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  color: #fff;
  font-family: Montserrat;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25rem; /* 125% */
  letter-spacing: -0.01rem;
}
@media screen and (max-width: 767px) {
  .p-merit__point-label {
    top: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.125rem;
  }
}

.p-merit__point-number {
  color: #e5f7d2;
  font-size: 1.875rem;
  line-height: 1.625rem;
  letter-spacing: -0.01875rem;
}
@media screen and (max-width: 767px) {
  .p-merit__point-number {
    font-size: 1.5rem;
    line-height: 1.5rem;
  }
}

.p-merit__pointer {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 3;
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  max-width: none;
  -webkit-transform: translateX(-50%) rotate(180deg);
  transform: translateX(-50%) rotate(180deg);
}
@media screen and (max-width: 767px) {
  .p-merit__pointer {
    bottom: -0.3125rem;
  }
}

/* 見出し＋イラスト（左）と本文（右） */
.p-merit__row {
  display: grid;
  grid-template-columns: minmax(0, 465fr) minmax(0, 655fr);
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .p-merit__row {
    grid-template-columns: 1fr;
  }
}

.p-merit__summary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem;
}
@media screen and (max-width: 767px) {
  .p-merit__summary {
    padding: 1rem 0 0;
  }
}

.p-merit__item-title {
  color: #3da85c;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.5rem; /* 166.667% */
  letter-spacing: -0.015rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-merit__item-title {
    font-size: 1.25rem;
    line-height: 1.75rem; /* 140% */
  }
}

.p-merit__text {
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.875rem; /* 166.667% */
  letter-spacing: -0.01125rem;
}
@media screen and (max-width: 767px) {
  .p-merit__text {
    padding-top: 1.25rem;
    font-size: 1rem;
    line-height: 1.75rem; /* 175% */
  }
}

/* イラスト。高さは画像の比率で決まるので幅だけ指定する */
.p-merit__illustration {
  width: 6.25rem;
  margin: 0;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .p-merit__illustration {
    width: 7.5rem;
  }
}

.p-merit__image {
  display: block;
  width: 100%;
  height: auto;
}

/* 02 はトップと同じ画像。トップと同じマスクで切り抜く */
.p-merit__illustration--02 {
  -webkit-mask: url(../images/top/choice-02-mask.svg) center / contain no-repeat;
  mask: url(../images/top/choice-02-mask.svg) center / contain no-repeat;
}

.p-merit__illustration--03 {
  border-radius: 1.875rem;
}

/* ========================================
   プラマーケの支援事例（p-case）
   白いカードに余白をとり、その中に角丸の画像を置く（デザインどおり）。
   Meta広告LPの p-case は変えないので、サービス詳細ページだけで上書きする。
   ======================================== */

.p-case__item {
  padding: 1.25rem;
  background-color: #fff;
}
@media screen and (max-width: 767px) {
  .p-case__item {
    padding: 0.9375rem;
  }
}

.p-case__item-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1.75rem;
}
@media screen and (max-width: 767px) {
  .p-case__item-section {
    gap: 1.25rem;
  }
}

.p-case__item-img {
  border-radius: 0.625rem;
}

/* 高さは中身で決める（元の min-height は使わない） */
.p-case__item-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1.75rem;
  padding: 0;
  min-height: 0;
  background-color: transparent;
}
@media screen and (max-width: 767px) {
  .p-case__item-body {
    gap: 1rem;
    min-height: 0;
  }
}

.p-case__item-title {
  margin-top: 0;
  padding-bottom: 0.875rem;
  border-bottom: 0.0625rem solid #c2c2c2;
}
@media screen and (max-width: 767px) {
  .p-case__item-title {
    margin-top: 0;
    padding-bottom: 0.625rem;
  }
}

/* 課題／支援と成果 */
.p-case__item-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.875rem;
}
@media screen and (max-width: 767px) {
  .p-case__item-detail {
    gap: 1rem;
  }
}

.p-case__item-detail-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 0.75rem;
}
/* スマホはタグの下に本文を置く */
@media screen and (max-width: 767px) {
  .p-case__item-detail-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0.375rem;
  }
}

/* ラベルの高さは line-height と枠線で決める（本文1行目の中央にそろえる） */
.p-case__item-label {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-top: 0.0625rem;
  padding-inline: 1rem;
  border: 0.0625rem solid #c2c2c2;
  border-radius: 1.875rem;
  background-color: rgba(255, 255, 255, 0.2);
  color: #c2c2c2;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.625rem;
  letter-spacing: -0.00875rem;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .p-case__item-label {
    margin-top: 0;
    padding-inline: 0.75rem;
    font-size: 0.75rem;
    line-height: 1.375rem;
  }
}

.p-case__item-label--result {
  border-color: #3da85c;
  background-color: rgba(229, 247, 210, 0.2);
  color: #3da85c;
}

.p-case__item-text {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
}
@media screen and (max-width: 767px) {
  .p-case__item-text {
    margin-top: 0;
  }
}