@charset "UTF-8";

/* ==========================================================
   767px以下（SP）は、デザイン幅414pxを基準に vw で指定する（px ÷ 414 × 100）
   ※1pxの枠線・影は px のまま
   line-height は単位なし（行の高さ ÷ 文字サイズ）
========================================================== */

/* ==========================================================
   FV
   PC：1920×720 / SP：414×423
   PCは1232px（1200+余白32）未満で比例縮小：min(Npx, N/1232*100vw)
   SPは414px基準：N/414*100vw
========================================================== */
.p-fv {
  position: relative;
  display: flex;
  align-items: center;
  height: min(720px, 58.442vw);
  min-height: 420px;
  overflow: hidden;
  background: #231815;
}

.p-fv__bg {
  position: absolute;
  inset: 0;
}

.p-fv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-fv__camera {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(498px, 25.9375vw);
}

.p-fv__camera img {
  width: 100%;
}

.p-fv__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 1232px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ラベル「住宅業界完全特化」 */
/* .c-mask の余白（10px）ぶんを差し引いて間隔を合わせる */
.p-fv__label {
  margin-bottom: calc(min(15.5px, 1.258vw) - 10px);
}

.p-fv__label .c-mask__inner {
  position: relative;
  display: block;
  width: min(238px, 19.318vw);
  height: min(52.5px, 4.261vw);
}

.p-fv__label img {
  position: absolute;
  top: max(-1px, -.081vw);
  left: max(-1px, -.081vw);
  width: min(246px, 19.968vw);
  height: min(60.498px, 4.911vw);
  max-width: none;
}

.p-fv__label-text {
  position: absolute;
  top: min(3px, .244vw);
  left: min(27px, 2.192vw);
  font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: min(22px, 1.786vw);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .05em;
  white-space: nowrap;
}

/* リード */
.p-fv__lead {
  margin-bottom: calc(min(24px, 1.948vw) - 10px);
  color: #fff;
  font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: min(24px, 1.948vw);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .1em;
  text-shadow: 3px 3px 4px rgba(21, 13, 11, .7);
}

/* letter-spacing の em は親の文字サイズで計算されて子に継承されるため、大きい文字にも指定し直す */
.p-fv__lead .is-large {
  font-size: min(28px, 2.273vw);
  letter-spacing: .1em;
}

/* 見出し */
.p-fv__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: min(24px, 1.948vw);
  color: #fff;
  font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: min(48px, 3.896vw);
  font-weight: 600;
  line-height: 1.458;
  letter-spacing: min(5px, .406vw);
  text-shadow: 3px 3px 4px rgba(21, 13, 11, .7);
  white-space: nowrap;
}

.p-fv__title-row1 .c-mask__inner {
  display: flex;
  align-items: flex-end;
  gap: min(5px, .406vw);
}

.p-fv__youtube {
  position: relative;
  display: block;
  width: min(314px, 25.487vw);
  height: min(70px, 5.682vw);
}

.p-fv__youtube img {
  position: absolute;
  top: max(-4.87px, -.395vw);
  left: 0;
  width: min(323px, 26.218vw);
  height: min(80.358px, 6.523vw);
  max-width: none;
}

/* ゴシックと明朝が混ざり行の高さが広がる（79px）ため、デザインの行の高さ（70px）に固定（PCは上下中央そろえのため影響する） */
.p-fv__title-row2 .c-mask__inner {
  height: min(70px, 5.682vw);
}

.p-fv__title-wo {
  margin-bottom: max(-2px, -.162vw);
  line-height: 1;
}

.p-fv__title .is-gothic {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, sans-serif;
  font-size: min(56px, 4.545vw);
  font-weight: 700;
  line-height: 1.25;
}

@media (max-width: 767px) {
  .p-fv {
    align-items: flex-start;
    height: 102.174vw;
    min-height: 0;
  }

  .p-fv__camera {
    width: 37.681vw;
  }

  .p-fv__inner {
    padding: 19.324vw 3.865vw 0;
  }

  .p-fv__label {
    margin-bottom: calc(.966vw - 2.415vw);
  }

  .p-fv__label .c-mask__inner {
    width: 33.816vw;
    height: 10.628vw;
  }

  .p-fv__label img {
    top: -1.691vw;
    left: -1.691vw;
    width: 37.681vw;
    height: 14.493vw;
  }

  .p-fv__label-text {
    top: 1.932vw;
    left: 3.14vw;
    font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
    font-size: 3.382vw;
    font-weight: 700;
    letter-spacing: .02em;
  }

  .p-fv__lead {
    margin-bottom: calc(2.415vw - 2.415vw);
    font-size: 3.382vw;
    letter-spacing: .05em;
    white-space: nowrap;
    text-shadow: 1px 1px 8px rgba(21, 13, 11, .5);
  }

  .p-fv__lead .is-large {
    font-size: 3.865vw;
    letter-spacing: .05em;
  }

  .p-fv__title {
    gap: 1.932vw;
    font-size: 5.797vw;
    line-height: 1.167;
    letter-spacing: 0;
    text-shadow: 1px 1px 8px rgba(21, 13, 11, .5);
  }

  .p-fv__title-row1 .c-mask__inner {
    gap: .483vw;
  }

  .p-fv__youtube {
    width: 31.159vw;
    height: 6.763vw;
  }

  .p-fv__youtube img {
    top: -1.486vw;
    width: 33.333vw;
    height: 10.083vw;
  }

  .p-fv__title-row2 .c-mask__inner {
    height: auto;
  }

  .p-fv__title-wo {
    margin-bottom: -.242vw;
    font-size: 5.314vw;
    letter-spacing: 1.208vw;
  }

  .p-fv__title .is-gothic {
    font-size: 6.763vw;
    line-height: 1;
  }

  .p-fv__title .is-small {
    font-size: 5.314vw;
  }
}


/* ==========================================================
   FV：カメラの登場（右下から斜めにスライドイン）
   初回読み込み時のみ html.fv-anim が付く（header.php）→ JSで .is-animated を付与して開始
========================================================== */
@media (prefers-reduced-motion: no-preference) {
  .fv-anim .p-fv__camera {
    opacity: 0;
  }

  .fv-anim .p-fv.is-animated .p-fv__camera {
    animation: fv-camera-in .8s cubic-bezier(.25, 1, .5, 1) forwards;
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .fv-anim .p-fv.is-animated .p-fv__camera {
    animation-name: fv-camera-in-sp;
  }
}

@keyframes fv-camera-in {
  0% {
    opacity: 0;
    transform: translate(180px, 30px);
  }
  20%, 100% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes fv-camera-in-sp {
  0% {
    opacity: 0;
    transform: translate(19.324vw, 3.623vw);
  }
  20%, 100% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 0);
  }
}


/* ==========================================================
   FV：テキストの表示（c-mask）の帯の色と開始のずらし
   帯（.c-mask）…帯の開始 ／ 文字の表示は帯が覆った .6s 後
   ぬるり（.c-mask--slide）…文字の表示開始
========================================================== */
@media (prefers-reduced-motion: no-preference) {
  .fv-anim .p-fv .c-mask::after {
    background: #fff;
  }

  .fv-anim .p-fv.is-animated .p-fv__label::after { animation-delay: .3s; }
  .fv-anim .p-fv.is-animated .p-fv__lead::after { animation-delay: .45s; }
  .fv-anim .p-fv.is-animated .p-fv__title-row1::after { animation-delay: .6s; }
  .fv-anim .p-fv.is-animated .p-fv__title-row2::after { animation-delay: .75s; }

  .fv-anim .p-fv.is-animated .p-fv__label:not(.c-mask--slide) .c-mask__inner { transition-delay: .9s; }
  .fv-anim .p-fv.is-animated .p-fv__lead:not(.c-mask--slide) .c-mask__inner { transition-delay: 1.05s; }
  .fv-anim .p-fv.is-animated .p-fv__title-row1:not(.c-mask--slide) .c-mask__inner { transition-delay: 1.2s; }
  .fv-anim .p-fv.is-animated .p-fv__title-row2:not(.c-mask--slide) .c-mask__inner { transition-delay: 1.35s; }

  .fv-anim .p-fv.is-animated .p-fv__label.c-mask--slide .c-mask__inner { transition-delay: .3s; }
  .fv-anim .p-fv.is-animated .p-fv__lead.c-mask--slide .c-mask__inner { transition-delay: .45s; }
  .fv-anim .p-fv.is-animated .p-fv__title-row1.c-mask--slide .c-mask__inner { transition-delay: .6s; }
  .fv-anim .p-fv.is-animated .p-fv__title-row2.c-mask--slide .c-mask__inner { transition-delay: .75s; }
}


/* ==========================================================
   悩み提起
========================================================== */
.p-problem {
  padding: 96px 16px;
}

.p-problem__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: 842px;
  margin: 0 auto;
}

.p-problem__title {
  width: 100%;
  max-width: 792px;
  padding-bottom: 6px;
  border-bottom: 1px solid #231815;
  font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: max(20px, min(28px, 2.273vw));
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.p-problem__title span {
  display: block;
}

.p-problem__title span:not(:last-child) {
  margin-bottom: 6px;
}

.p-problem__body {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

/* 842px（393 + 24 + 425）の比率で可変 */
.p-problem__img {
  flex: 0 0 calc((100% - 24px) * 393 / 818);
}

.p-problem__img img {
  width: 100%;
}

.p-problem__text {
  flex: 1;
  font-family: "Yu Gothic Medium", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
}

.p-problem__block:not(:last-child) {
  margin-bottom: 20px;
}

.p-problem__block:last-child {
  line-height: 1.75;
}

@media (max-width: 767px) {
  .p-problem {
    padding: 7.729vw 0;
  }

  .p-problem__inner {
    gap: 4.831vw;
  }

  .p-problem__title {
    width: auto;
    padding: 0 4.831vw 1.208vw;
    font-size: 4.106vw;
    line-height: 1.65;
    letter-spacing: .02em;
  }

  .p-problem__body {
    flex-direction: column;
    gap: 4.831vw;
    width: 100%;
  }

  .p-problem__img {
    flex: none;
    width: 100%;
  }

  .p-problem__text {
    width: 100%;
    padding: 0 3.865vw;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: .02em;
  }

  .p-problem__block:not(:last-child),
  .p-problem__block p:not(:last-child) {
    margin-bottom: 2.899vw;
  }


  .p-problem__title span:not(:last-child) {
    margin-bottom: 1.449vw;
  }

  .p-problem__text {
    font-size: 3.865vw;
  }
}


/* ==========================================================
   写真ループ
   写真4枚を1枚にまとめた画像を2つ並べ、各々を「自分の幅＋間隔」ぶん左へ流す
   PC：写真486×295・間隔30（1枚の画像幅2034） / SP：写真340×191・間隔12（1枚の画像幅1396）
========================================================== */
.p-gallery {
  padding: 40px 0 48px;
  overflow: hidden;
}

.p-gallery__wrap {
  display: flex;
  gap: min(30px, 2.435vw);
  width: max-content;
}

.p-gallery__slider {
  flex-shrink: 0;
  width: min(2034px, 165.097vw);
  animation: gallery-loop 60s linear infinite;
}

.p-gallery__slider img {
  width: 100%;
}

@keyframes gallery-loop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - min(30px, 2.435vw)));
  }
}

@keyframes gallery-loop-sp {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 2.899vw));
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-gallery__slider {
    animation: none;
  }
}

@media (max-width: 767px) {
  .p-gallery {
    padding: 6.28vw 0 0 3.865vw;
  }

  .p-gallery__wrap {
    gap: 2.899vw;
  }

  .p-gallery__slider {
    width: 337.198vw;
    animation-name: gallery-loop-sp;
  }
}


/* ==========================================================
   商品・サービス説明
   PC幅1200基準（1232px未満で比例縮小） / SP幅382基準
========================================================== */
.p-service {
  position: relative;
  z-index: 0;
  padding: 96px 16px;
}

.p-service__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.p-service__title {
  margin-bottom: 20px;
  font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: max(28px, min(40px, 3.247vw));
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  padding-left: 24px;
}

/* 全プラン共通 */
.p-service__common {
  position: relative;
  margin-bottom: 28px;
  padding: 28px 0;
  background: linear-gradient(to bottom, rgba(35, 24, 21, .1), rgba(35, 24, 21, .01));
}

/* 背景のロゴ形（下のプラン見出しの裏まで伸びる） */
.p-service__bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
}

.p-service__common-label {
  width: fit-content;
  margin: 0 auto 20px;
  padding: 10px 24px;
  color: #fff;
  font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  /* Figma書き出しの先頭の白（16.6%）は角に白い三角が出るため除外（プラン見出しも同様） */
  background: linear-gradient(134deg, rgba(56, 44, 47, .8) 14.285%, #382c2f 54.999%, rgba(56, 44, 47, .8) 91.67%, rgba(255, 255, 255, .8) 123.94%);
}

.p-service__fees {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 0 16px;
}

.p-service__fee {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(450px, 36.526vw);
}

.p-service__fee-head {
  width: 100%;
  margin-bottom: 6px;
  padding: 6px 14px;
  color: #fff;
  font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: .05em;
  text-align: center;
  background: #231815;
}

.p-service__fee-price {
  margin-bottom: 12px;
  font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 2;
  letter-spacing: .08em;
  white-space: nowrap;
  height: 40px;
  padding-top: 2px;
}

.p-service__fee-price .is-num {
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: .08em;
}

.p-service__fee-price .is-tax {
  font-size: 14px;
  letter-spacing: .08em;
}

.p-service__fee-text {
  width: fit-content;
  min-width: min(354px, 28.734vw);
  padding-top: 12px;
  border-top: 1px solid #231815;
  font-family: "Yu Gothic Medium", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: max(13px, min(16px, 1.299vw));
  white-space: nowrap;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .05em;
  text-align: center;
}

.p-service__fee:nth-child(2) .p-service__fee-text {
  min-width: min(311px, 25.244vw);
  line-height: 1.625;
}

.p-service__fee-text small {
  font-size: .875em;
  line-height: 1.857;
}

/* コンサルティングプラン */
.p-service__plans-head {
  margin-bottom: 48px;
  padding-left: 24px;
}

.p-service__plans-title {
  margin-bottom: 6px;
  font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.35;
}

.p-service__plans-lead {
  font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.75;
}

/* 3プランの「見出し・価格・サポート内容」の高さを行ごとにそろえる（subgrid） */
.p-service__plan-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;
  gap: 0 3px;
  background: #fff;
}

.p-plan {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

.p-plan__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: min(164px, 13.312vw);
  padding: max(24px, min(28px, 2.273vw)) max(8px, min(16px, 1.299vw)) max(19px, min(23px, 1.867vw));
  color: #fff;
  text-align: center;
  background: linear-gradient(126deg, rgba(56, 44, 47, .8) 14.285%, #382c2f 54.999%, rgba(56, 44, 47, .8) 91.67%, rgba(255, 255, 255, .8) 123.94%);
}

.p-plan__name {
  font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: max(20px, min(32px, 2.597vw));
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
}

.p-plan__name span {
  font-size: .75em;
}

.p-plan__catch {
  font-family: "Yu Gothic Medium", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: max(14px, min(16px, 1.299vw));
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .05em;
}

/* 導入実績No.1 バッジ */
.p-plan__badge {
  position: absolute;
  top: -31.8px;
  left: 50%;
  width: 208px;
  height: 50px;
  transform: translateX(-50%);
}

.p-plan__badge img {
  position: absolute;
  top: -13px;
  left: -9px;
  width: 226px;
  height: 68.7684px;
  max-width: none;
}

/* バッジの四角部分（高さ38px）の上下中央に1行で置く：行の高さ＝四角の高さ */
.p-plan__badge-text {
  position: relative;
  top: 1px; /* 字面の上下の余白をそろえる微調整 */
  display: block;
  height: 38px;
  font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 2.375;
  text-align: center;
  white-space: nowrap;
}

.p-plan__badge-text span {
  font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.583;
}

.p-plan__price,
.p-plan__support {
  border-right: 1px solid rgba(35, 24, 21, .7);
}

.p-plan__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px min(28px, 2.273vw) 19px;
  border-bottom: 1px solid rgba(35, 24, 21, .7);
}

.p-plan__price-label {
  font-family: "Yu Gothic Medium", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: normal;
}

.p-plan__price-value {
  font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: max(15px, min(20px, 1.623vw));
  font-weight: 600;
  line-height: normal;
  letter-spacing: .08em;
  white-space: nowrap;
}

.p-plan__price-value .is-num {
  font-size: 1.6em;
  letter-spacing: .07em;
}

.p-plan__price-value .is-tax {
  font-size: .7em;
  letter-spacing: .08em;
}

.p-plan__support {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px min(28px, 2.273vw) 40px;
  min-height: 369px;
}

.p-plan__support-label {
  padding: 4px 12px;
  font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  background: #efefef;
}

.p-plan__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  font-family: "Yu Gothic Medium", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: max(14px, min(16px, 1.299vw));
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .05em;
}

/* プランの注意書き（※〜）は、PC（1232px以上）とSPでは1行に収める。タブレット幅は2行に折り返してOK
   文字間隔は注意書き自身の文字サイズで計算（PC .05em / SP .02em） */
.p-plan__list small {
  letter-spacing: .05em;
}

@media (min-width: 1232px) {
  .p-plan__list small {
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  .p-plan__list small {
    letter-spacing: .02em;
    white-space: nowrap;
  }
}

/* PCデザインどおり：プレミアムだけ項目の間隔14px、「アナリティクス〜」の行だけ文字間隔を詰める */
.p-plan.is-premium .p-plan__list {
  gap: 14px;
}

.p-plan__list .is-narrow {
  letter-spacing: .03em;
}

/* Figmaでもこの行は枠よりわずかに長く1行表示のため、広い画面では折り返さない */
@media (min-width: 1232px) {
  .p-plan__list .is-narrow {
    white-space: nowrap;
  }
}

.p-plan__list li::before {
  content: "■";
}

.p-plan__list small {
  display: block;
  font-size: .875em;
  line-height: 2;
}

@media (max-width: 767px) {
  .p-service {
    padding: 11.594vw 3.865vw;
  }

  .p-service__title {
    margin-bottom: 7.246vw;
    font-size: 6.763vw;
    line-height: 1.286;
    padding-left: 2.899vw;
  }

  .p-service__common {
    margin-bottom: 9.662vw;
    padding: 4.831vw 0;
  }

  .p-service__common-label {
    margin-bottom: 4.831vw;
    padding: 1.449vw 3.382vw;
    font-size: 3.865vw;
  }

  .p-service__fees {
    flex-direction: column;
    gap: 4.831vw;
    padding: 0;
  }

  .p-service__fee {
    width: 100%;
  }

  .p-service__fee-head {
    margin-bottom: 2.415vw;
    padding: .966vw 3.382vw;
    font-size: 4.348vw;
    letter-spacing: 0;
  }

  .p-service__fee-price {
    margin-bottom: 2.415vw;
    font-size: 4.348vw;
    line-height: normal;
    letter-spacing: .03em;
    height: auto;
    padding-top: 0;
  }

  .p-service__fee-price .is-num {
    line-height: normal;
    letter-spacing: .03em;
  }

  .p-service__fee-text,
  .p-service__fee:nth-child(2) .p-service__fee-text {
    width: 73.671vw;
    min-width: 0;
    font-size: 3.865vw;
    line-height: 1.75;
    letter-spacing: .02em;
    white-space: normal;
  }

  .p-service__fee:nth-child(2) .p-service__fee-text {
    width: fit-content;
    min-width: 73.671vw;
    white-space: nowrap;
  }

  .p-service__fee-text small {
    font-size: .875em;
    line-height: 1.75;
  }

  .p-service__plans-head {
    margin-bottom: 4.831vw;
    padding-left: 0;
    text-align: center;
  }

  .p-service__plans-title {
    margin-bottom: 0;
    font-size: 5.797vw;
    line-height: 1.5;
    letter-spacing: .02em;
  }

  .p-service__plans-lead {
    font-size: 3.382vw;
    letter-spacing: .02em;
    white-space: nowrap;
    line-height: 2;
  }

  .p-service__plan-list {
    display: flex;
    flex-direction: column;
    gap: 9.662vw;
    background: none;
  }

  .p-plan {
    display: flex;
    flex-direction: column;
  }

  .p-plan__head {
    gap: 0;
    background: linear-gradient(133deg, rgba(56, 44, 47, .8) 14.285%, #382c2f 54.999%, rgba(56, 44, 47, .8) 91.67%, rgba(255, 255, 255, .8) 123.94%);
    min-height: 0;
    padding: 2.899vw 3.382vw;
  }

  .p-plan__name {
    font-size: 6.763vw;
    line-height: 1.286;
    letter-spacing: .02em;
  }

  .p-plan__name span {
    font-size: .785em;
  }

  .p-plan__catch {
    font-size: 3.865vw;
    letter-spacing: .02em;
  }

  .p-plan__badge {
    top: -7.729vw;
    width: 33.816vw;
    height: 10.628vw;
  }

  .p-plan__badge img {
    top: -2.657vw;
    left: -2.174vw;
    width: 38.164vw;
    height: 15.291vw;
  }

  .p-plan__badge-text {
    top: .302vw;
    height: 8.454vw;
    font-size: 3.382vw;
    line-height: 2.5;
  }

  .p-plan__badge-text span {
    font-size: 5.314vw;
    line-height: 1.591;
  }

  /* 見出しにバッジが重なる分の余白 */
  .p-plan:has(.p-plan__badge) .p-plan__head {
    padding-top: 2.899vw;
  }

  .p-plan__price,
  .p-plan__support {
    border-right: 0;
  }

  .p-plan__price {
    gap: 1.449vw;
    padding: 4.831vw 4.831vw 4.589vw;
  }

  .p-plan__price-label {
    font-size: 2.899vw;
    letter-spacing: .02em;
  }

  .p-plan__price-value {
    font-size: 3.865vw;
    letter-spacing: .03em;
  }

  .p-plan__price-value .is-num {
    font-size: 7.246vw;
    letter-spacing: .03em;
  }

  .p-plan__price-value .is-tax {
    font-size: 3.382vw;
    letter-spacing: .03em;
  }

  .p-plan__support {
    gap: 2.899vw;
    padding: 4.831vw;
    min-height: 0;
  }

  .p-plan__support-label {
    padding: .966vw 3.382vw;
    font-size: 2.899vw;
    letter-spacing: .02em;
    line-height: 1.583;
  }

  .p-plan__list {
    gap: 2.415vw;
    width: fit-content;
    max-width: 100%;
    font-size: 3.865vw;
    letter-spacing: .02em;
  }

  .p-plan.is-premium .p-plan__list {
    gap: 2.415vw;
  }

  .p-plan__list .is-narrow {
    letter-spacing: 0;
  }

  .p-service__common-label {
    margin: 0 auto 4.831vw;
  }

  .p-service__fee-price .is-num {
    font-size: 7.729vw;
  }

  .p-service__fee-price .is-tax {
    font-size: 3.382vw;
    letter-spacing: .03em;
  }

  .p-service__fee-text {
    padding-top: 2.899vw;
  }
}


/* SPデザインどおり：撮影費の料金は動画制作費より少し小さく（1回 16px / 44,000 30px）、注意書きは本文と同じ大きさ */
@media (max-width: 767px) {
  .p-service__fee:nth-child(2) .p-service__fee-price {
    font-size: 3.865vw;
  }

  .p-service__fee:nth-child(2) .p-service__fee-price .is-num {
    font-size: 7.246vw;
  }

  .p-service__fee-text small {
    font-size: 1em;
  }
}


/* SPデザインどおりの差分（悩み提起の見出し1行目は左寄せ／スタンダード・ライトのプラン名は行の高さ45px／スタンダードの箇条書きは枠いっぱい左寄せ） */
@media (max-width: 767px) {
  .p-problem__title span:first-child {
    text-align: left;
  }

  .p-plan:not(.is-premium) .p-plan__name {
    line-height: 1.607;
  }

  .p-plan:nth-child(2) .p-plan__list {
    width: 100%;
  }
}


/* ==========================================================
   まずは無料で運用体験
========================================================== */
.p-trial {
  padding: 96px 16px;
  background: linear-gradient(180deg, #dcdddd 0, #e8e9e9 1.5%, #fff 5%, #f9f9f9 43%);
}

.p-trial__inner {
  max-width: 1240px;
  margin: 0 auto;
}

.p-trial__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-bottom: 42px;
}

/* 毎月3社限定バッジ */
.p-trial__badge {
  position: relative;
  flex-shrink: 0;
  width: 114.51px;
  height: 116.175px;
  color: #d7000f;
  text-align: center;
}

.p-trial__badge-glow {
  position: absolute;
  top: -15.8px;
  left: -16px;
  width: 148px;
  height: 148px;
  max-width: none;
}

.p-trial__badge-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.p-trial__badge-text {
  position: absolute;
  top: 27px;
  left: 0;
  width: 100%;
  font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1;
}

.p-trial__badge-month {
  display: block;
  margin-bottom: 1px;
  font-size: 18px;
}

.p-trial__badge-limit {
  display: block;
  font-size: 16px;
  letter-spacing: .05em;
}

.p-trial__badge-limit span {
  font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 36px;
  font-weight: 600;
}

.p-trial__title-text {
  font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: max(28px, min(40px, 3.247vw));
  font-weight: 400;
  line-height: 1.25;
}

/* 特典カード */
.p-trial__list {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.p-trial__item {
  position: relative;
  flex: 1;
  max-width: 608px;
  padding: 36px 24px;
  background: #dcdddd;
}

/* 上端の影 */
.p-trial__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(180deg, #dcdddd 0, #e8e9e9 2%, #f9f9f9 5%, #fff 7%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.p-trial__item-title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.p-trial__tokuten {
  position: relative;
  flex-shrink: 0;
  width: 70px;
  height: 70px;
}

.p-trial__tokuten img {
  width: 100%;
  height: 100%;
}

.p-trial__tokuten-text {
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  color: #fff;
  font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-50%);
}

.p-trial__tokuten-text span {
  font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 24px;
  font-weight: 600;
}

.p-trial__item-name {
  color: #d7000f;
  font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: max(18px, min(24px, 1.948vw));
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .05em;
}

.p-trial__item-text {
  position: relative;
  padding: 0 min(12px, .974vw) 0 min(71px, 5.763vw);
  font-family: "Yu Gothic Medium", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .05em;
}

@media (max-width: 767px) {
  .p-trial {
    padding: 11.594vw 3.865vw;
  }

  .p-trial__title {
    flex-direction: column;
    gap: 2.415vw;
    margin-bottom: 7.246vw;
  }

  .p-trial__badge {
    width: 27.66vw;
    height: 28.068vw;
  }

  .p-trial__badge-glow {
    top: -3.816vw;
    left: -3.865vw;
    width: 35.749vw;
    height: 35.749vw;
  }

  .p-trial__badge-text {
    top: 6.522vw;
  }

  .p-trial__badge-month {
    margin-bottom: .242vw;
    font-size: 4.348vw;
  }

  .p-trial__badge-limit {
    font-size: 3.865vw;
  }

  .p-trial__badge-limit span {
    font-size: 8.696vw;
  }

  .p-trial__title-text {
    font-size: 6.763vw;
    font-weight: 600;
    line-height: 1.286;
    letter-spacing: .02em;
  }

  .p-trial__list {
    flex-direction: column;
    gap: 3.865vw;
  }

  .p-trial__item {
    max-width: none;
    padding: 4.831vw;
  }

  .p-trial__item::before {
    content: none;
  }

  .p-trial__item-title {
    gap: 1.208vw;
    margin-bottom: 3.382vw;
  }

  .p-trial__tokuten {
    width: 13.527vw;
    height: 13.527vw;
  }

  .p-trial__tokuten-text {
    font-size: 3.382vw;
  }

  .p-trial__tokuten-text span {
    font-size: 5.314vw;
  }

  .p-trial__item-name {
    font-size: 4.831vw;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .p-trial__item-text {
    padding: 0;
    font-size: 3.865vw;
    letter-spacing: .02em;
  }
}