/* 自動生成（static/ → wordpress/build_theme.py）。このファイルは直接直さず、static/ を直して作り直す */
/* =========================================================
   UpCore HP サービス詳細ページ（いまは lp.html：LP制作）
   style.css（ヘッダー・フッター・ボタン・ラベル・よくある質問など共通の部品）の後に読む。
   Figma：30_詳細LP_1440 を基準に、1024／768／375／425／320／2560 で上書きする
   Figma の行の高さ「自動」は、Noto Sans JP で文字の大きさの1.2倍（ブラウザの normal は約1.45倍なので使わない）
   ========================================================= */

/* ---------- 改行：PCの中で 1024〜1439px（pc1）と 1440px〜（pc2）を分ける ---------- */
@media (min-width: 1024px) and (max-width: 1439px) {
  br.b-pc1 { display: inline; }
}

@media (min-width: 1440px) {
  br.b-pc2 { display: inline; }
}

/* ---------- 共通：セクションの見出し ---------- */
.dt-title {
  margin-top: 16px;
  font-size: 48px;
  font-weight: 900;
  line-height: 68px;
}

/* =========================================================
   01 ページ冒頭（PC）
   写真を背景いっぱいに敷き、真ん中が濃い白のかすみで文字を読みやすくする。中身は真ん中ぞろえ
   ========================================================= */
.dt-top {
  position: relative;
  overflow: clip;
  padding: 32px 0 96px;
  text-align: center;
}

.dt-top__bg {
  position: absolute;
  inset: 0 0 auto;
  height: 682px;
  background:
    linear-gradient(rgba(253, 252, 250, 0) calc(100% - 160px), #fdfcfa),
    radial-gradient(ellipse 71.43% 55.56% at 50% 50%, rgba(252, 252, 250, 0.95), rgba(252, 252, 250, 0.88) 60%, rgba(252, 252, 250, 0.6)),
    url("../assets/images/lp_hero.webp") 50% 50% / cover no-repeat;
}

.dt-top__inner {
  position: relative;
}

/* パンくずリスト（左上） */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  color: var(--navy-600);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  list-style: none;
  text-align: left;
}

.breadcrumb li + li::before {
  content: "　＞　";
}

.breadcrumb a {
  color: var(--blue-700);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.dt-top__label {
  margin-top: 58px;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 0.02em;
}

.dt-top__title {
  position: relative;
  z-index: 0;
  display: inline-block;
  margin-top: 14px;
  font-size: 72px;
  font-weight: 900;
  line-height: 100px;
  letter-spacing: -0.02em;
}

.dt-top__underline {
  position: absolute;
  z-index: -1;
  left: -4px;
  top: 80px;
  width: 241px;
  max-width: none;
  height: 18px;
}

.dt-top__catch {
  margin-top: 24px;
  color: var(--blue-700);
  font-size: 26px;
  font-weight: 900;
  line-height: 40px;
}

.dt-top__lead {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
}

/* 料金と制作期間のカード */
.dt-facts {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.dt-fact {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 300px;
  padding: 18px 24px;
  border: 1px solid #dbe8f5;
  border-radius: 16px;
  background: var(--bg-white);
  box-shadow: 0 4px 16px rgba(8, 18, 51, 0.06);
  text-align: left;
}

.dt-fact__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--blue-100);
}

.dt-fact__icon img {
  width: 26px;
  height: 26px;
}

.dt-fact__body {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}

.dt-fact__label {
  color: var(--navy-600);
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
}

.dt-fact__value {
  height: 48px;
  font-size: 38px;
  font-weight: 900;
  line-height: 48px;
}

/* 大きさの違う文字を並べても行の高さを48のままにする（Figmaと同じ） */
.dt-fact__value > span {
  line-height: 0;
}

.dt-fact__num {
  font-size: 38px;
}

.dt-fact__unit {
  font-size: 18px;
  font-weight: 700;
}

.dt-fact__sub {
  font-size: 22px;
}

.dt-fact:last-child .dt-fact__num {
  font-size: 44px;
}

/* 行の基準（ベースライン）は、Figmaと同じく一番大きい文字に合わせる */
.dt-fact:last-child .dt-fact__value {
  font-size: 44px;
}

.dt-top__note {
  margin-top: 12px;
  color: var(--navy-600);
  font-size: 13px;
  font-weight: 500;
  line-height: 22px;
  opacity: 0.8;
}

/* =========================================================
   02 こんな方におすすめです（PC）
   ========================================================= */
.dt-for {
  padding: 80px 0 96px;
}

.dt-for__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 24px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.dt-for__card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 32px;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  background: var(--bg-white);
  box-shadow: 0 8px 24px rgba(13, 51, 102, 0.06);
}

.dt-for__card img {
  flex: none;
  width: 40px;
  height: 40px;
}

.dt-for__card p {
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
}

.dt-for__guide {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 32px;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
}

.dt-for__guide a {
  color: var(--blue-700);
  font-weight: 700;
}

/* =========================================================
   03 含まれるもの（PC）
   ========================================================= */
.dt-inc {
  padding: 96px 0;
  background: #e9f5fb;
}

/* 青い帯：「整理」はすべての制作プランに含まれる */
.dt-band {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding: 24px 36px;
  border-radius: 20px;
  background: var(--blue-700);
  box-shadow: 0 10px 24px rgba(5, 89, 242, 0.22);
  color: #fff;
}

.dt-band__check {
  flex: none;
  width: 40px;
  height: 40px;
}

.dt-band__title {
  font-size: 24px;
  font-weight: 900;
  line-height: 36px;
  white-space: nowrap;
}

.dt-band__key {
  color: var(--yellow-400);
}

.dt-band__note {
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
}

/* 含まれるもの：PCは2列（左に4つ、右に3つ） */
.dt-inc__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  align-items: start;
  gap: 18px 48px;
  margin: 24px 0 0;
  padding: 40px 48px;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  background: var(--bg-white);
  box-shadow: 0 8px 24px rgba(13, 51, 102, 0.06);
  list-style: none;
}

.dt-inc__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.02em;
}

.dt-inc__list li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background: url("../assets/svg/icon_check_circle.svg") center / contain no-repeat;
}

/* =========================================================
   04 料金プラン（PC）
   ========================================================= */
.dt-plan {
  padding: 96px 0 40px;
}

.dt-plan__lead {
  margin-top: 16px;
  color: var(--navy-600);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
}

.dt-plan__note {
  margin-top: 8px;
  color: var(--navy-600);
  font-size: 13px;
  font-weight: 500;
  line-height: 24px;
  opacity: 0.75;
}

/* どちらが合うか（目安） */
.dt-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding: 16px 24px 14px;
  border-radius: 20px;
  background: var(--blue-100);
}

.dt-guide__title {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.dt-guide__rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dt-guide__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-radius: 14px;
  background: var(--bg-white);
}

.dt-guide__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #dbedff;
}

.dt-guide__icon--gold {
  background: #fcf2e0;
}

.dt-guide__icon img {
  width: 22px;
  height: 22px;
}

.dt-guide__body {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.dt-guide__text {
  flex: 1;
  font-size: 16px;
  font-weight: 900;
  line-height: 26px;
}

.dt-guide__dest {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
}

.dt-guide__dest img {
  width: 20px;
  height: 14px;
}

.dt-guide__plan {
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--blue-100);
  color: var(--blue-700);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.dt-guide__foot {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
}

/* プランのカード（2枚）
   カードの中（頭・見本・比べる行3つ・ボタン）を親の6段にそろえる（subgrid）。
   どちらかのカードの行が長いと、もう1枚の同じ行も同じ高さになり、区切り線が左右でそろう */
.dt-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(6, auto);
  column-gap: 24px;
  row-gap: 0;
  margin-top: 32px;
}

.dt-pcard {
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  row-gap: 0;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  background: var(--bg-white);
  box-shadow: 0 8px 24px rgba(13, 51, 102, 0.06);
}

.dt-pcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 28px 20px 32px;
}

.dt-pcard__name {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dt-pcard__name::before {
  content: "";
  width: 32px;
  height: 4px;
  border-radius: 2px;
  background: var(--yellow-400);
}

.dt-pcard__name h3 {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.dt-pcard__name p {
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
}

.dt-pcard__price {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 24px;
  border-radius: 14px;
  background: var(--blue-100);
  white-space: nowrap;
}

.dt-pcard__price-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}

.dt-pcard__price-value {
  color: var(--blue-700);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.2;
}

.dt-pcard__price-value small {
  font-size: 16px;
}

.dt-pcard__mock {
  padding: 0 16px;
}

.dt-pcard__mock img {
  width: 100%;
  height: auto;
}

.dt-pcard__rows {
  display: contents;
}

.dt-pcard__rows > div {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-inline: 32px;
  padding: 16px 0;
  border-bottom: 1px solid #dbe5f0;
}

.dt-pcard__rows > div:first-child {
  margin-top: 12px;
}

.dt-pcard__rows > div:last-child {
  border-bottom: 0;
}

.dt-pcard__rows dt {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 112px;
  padding: 2px 10px;
  border-radius: 6px;
  background: #e9f5fb;
  color: var(--navy-600);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
}

.dt-pcard__rows dt img {
  width: 16px;
  height: 16px;
}

.dt-pcard__rows dd {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
}

/* ボタンはカードの一番下（2枚で高さをそろえる） */
.btn-outline.dt-pcard__btn {
  height: 51px;
  margin: auto 32px 28px;
  gap: 0.5em;
  line-height: 22px;
}

.dt-pcard__btn {
  flex: none;
}

/* 比較の行とボタンの間（Figmaの「余白」）：PCは8、1439px以下は16 */
.dt-pcard__rows > div:last-child {
  margin-bottom: 8px;
}

/* LP制作：見本LPを公開するまでボタンを隠している（lp.html でコメントにした）。
   そのあいだ、最後の行の下はボタンのないEC制作のカードと同じにする（PC 28・768〜1439px 12・スマホ 16） */
.page-lp .dt-pcard__rows > div:last-child {
  margin-bottom: 28px;
}

@media (min-width: 768px) and (max-width: 1439px) {
  .page-lp .dt-pcard__rows > div:last-child {
    margin-bottom: 12px;
  }
}

@media (max-width: 767px) {
  .page-lp .dt-pcard__rows > div:last-child {
    margin-bottom: 16px;
  }
}

/* オプション */
.dt-option {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 56px;
  padding: 24px 40px;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  background: var(--bg-white);
  box-shadow: 0 8px 24px rgba(13, 51, 102, 0.06);
}

.dt-option__title {
  flex: none;
  font-size: 20px;
  font-weight: 900;
  line-height: 34px;
}

.dt-option__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dt-option__tags li {
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--blue-50);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  white-space: nowrap;
}

/* =========================================================
   04-2 中間CTA（PC）
   ========================================================= */
.dt-mid {
  padding: 24px 0 96px;
}

.dt-mid__band {
  position: relative;
  overflow: clip;
  display: grid;
  grid-template-columns: 646px 320px;
  align-items: center;
  padding: 44px 0 40px 120px;
  border-radius: 28px;
  background: linear-gradient(90deg, #e5f2ff, #edf7ff);
}

.dt-mid__fluffy {
  position: absolute;
  max-width: none;
}

.dt-mid__fluffy--1 {
  left: -100px;
  top: -80px;
  width: 280px;
  height: 234px;
}

.dt-mid__fluffy--2 {
  right: -120px;
  bottom: -146px;
  width: 320px;
  height: 266px;
}

.dt-mid__dots {
  position: absolute;
  right: 40px;
  top: 50px;
  width: 60px;
  height: 60px;
}

.dt-mid__text,
.dt-mid__action {
  position: relative;
}

/* 吹き出し「相談だけでも大丈夫です」 */
.dt-mid__bubble {
  position: relative;
  display: inline-block;
  padding: 8px 22px;
  border: 2px solid var(--blue-700);
  border-radius: 999px;
  background: var(--bg-white);
  color: var(--blue-700);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.dt-mid__bubble::after {
  content: "";
  position: absolute;
  left: calc(50% + 0.5px);
  bottom: -15px;
  width: 20px;
  height: 15px;
  background: url("../assets/svg/bubble_tail.svg") center / contain no-repeat;
  transform: translateX(-50%);
}

.dt-mid__rays3 {
  position: absolute;
  left: -46px;
  top: -14px;
  width: 40px;
  height: 40px;
}

.dt-mid__title {
  position: relative;
  margin-top: 18px;
  font-size: 36px;
  font-weight: 900;
  line-height: 52px;
  white-space: nowrap;
}

.dt-mid__rays2 {
  position: absolute;
  left: 484px;
  top: 25px;
  width: 34px;
  height: 34px;
}

.dt-mid__body {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;
  white-space: nowrap;
}

.dt-mid__action {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* LINEボタン（丸）：Figma の部品「サイズ=中, 形=丸」 */
.btn-line--pill {
  width: 320px;
  height: 74px;
  padding: 0 24px;
  gap: 14.5px;
  border-radius: 999px;
  font-size: 18.9px;
  line-height: 26px;
  box-shadow: 0 7.3px 8.7px rgba(5, 153, 77, 0.22);
}

.btn-line--pill .btn-line__arrow {
  width: 13px;
  height: 10px;
}

.dt-mid__note {
  margin-top: 13px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: underline;
  text-align: center;
  white-space: nowrap;
}

/* =========================================================
   05 進め方（PC）
   ========================================================= */
.dt-flow {
  padding: 96px 0;
  background: rgba(208, 236, 252, 0.45);
}

.dt-steps {
  display: flex;
  justify-content: center;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.dt-step {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  width: 230px;
  text-align: center;
}

/* ステップの間の矢印（ひとつ前のステップとの間に置く） */
.dt-step {
  position: relative;
}

.dt-step + .dt-step {
  margin-left: 72px;
}

.dt-step + .dt-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 72px;
  height: 12px;
  background: url("../assets/svg/arrow_step.svg") center / 100% 100% no-repeat;
  transform: translate(-100%, 74px);
}

.dt-step__icon {
  order: 2;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--bg-white);
  box-shadow: 0 4px 16px rgba(8, 51, 128, 0.08);
}

.dt-step__icon img {
  width: 40px;
  height: 40px;
}

.dt-step__text {
  display: contents;
}

.dt-step__num {
  order: 1;
  color: #055eed;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
}

.dt-step__name {
  order: 3;
  margin-top: 20px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.dt-step__desc {
  order: 4;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

/* 公開後｜希望される方は伴走サポートへ */
.dt-after-link {
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
  margin: 40px auto 0;
  padding: 16px 28px;
  border: 1px dashed var(--blue-500);
  border-radius: 999px;
  background: var(--bg-white);
  text-decoration: none;
}

.dt-after-link__badge {
  flex: none;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--gold-500);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}

.dt-after-link__text {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}

.dt-after-link img {
  flex: none;
  width: 16px;
  height: 16px;
}

/* =========================================================
   06 伴走サポートの案内（PC）
   ========================================================= */
.dt-after {
  padding: 96px 0;
}

.dt-after__lead {
  margin-top: 16px;
  font-size: 18px;
  font-weight: 500;
  line-height: 36px;
}

.dt-bansou {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-top: 40px;
  padding: 32px 48px 32px 32px;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  background: var(--bg-white);
  box-shadow: 0 8px 24px rgba(13, 51, 102, 0.06);
}

.dt-bansou__photo {
  flex: none;
  width: 320px;
  height: 200px;
  border-radius: 12px;
  object-fit: cover;
}

.dt-bansou__body {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
  min-width: 0;
}

.dt-bansou__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.dt-bansou__name {
  font-size: 28px;
  font-weight: 900;
  line-height: 40px;
}

.dt-bansou__catch {
  color: var(--blue-700);
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}

.dt-bansou__flow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dt-bansou__flow li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--blue-100);
  line-height: 1.2;
  white-space: nowrap;
}

.dt-bansou__flow li.is-free {
  background: var(--yellow-400);
}

.dt-bansou__flow li + li {
  position: relative;
  margin-left: 24px;
}

/* 箱の間の「›」 */
.dt-bansou__flow li + li::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 50%;
  width: 14px;
  height: 14px;
  background: url("../assets/svg/chevron_right14.svg") center / contain no-repeat;
  transform: translateY(-50%);
}

.dt-bansou__flow span {
  font-size: 13px;
  font-weight: 500;
}

.dt-bansou__flow strong {
  font-size: 17px;
  font-weight: 900;
}

.dt-bansou__note {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}

.btn-outline.dt-bansou__btn {
  flex: none;
  width: 264px;
  height: 51px;
  margin: 0;
  gap: 0.5em;
  line-height: 22px;
}

/* =========================================================
   07 よくある質問（トップページの部品。この詳細ページの分だけ上書き）
   ========================================================= */
.faq--detail .faq__circle--left {
  top: auto;
  bottom: -76px;
}

.faq--detail .faq__circle--right {
  top: auto;
  bottom: 54px;
}

.faq--detail .faq__drop {
  top: auto;
  bottom: 18px;
}

.faq--detail .faq__title {
  margin-top: 16px;
}

/* =========================================================
   08 最終CTAとフッター（サービス紹介ページと同じ）
   ========================================================= */
.final-cta__text {
  margin-top: clamp(20px, 10.15px + 0.9615vw, 24px);
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  text-shadow:
    0 0 3px rgba(255, 255, 255, 0.95),
    0 0 6px rgba(255, 255, 255, 0.95),
    0 0 12px rgba(255, 255, 255, 0.95),
    0 0 22px rgba(255, 255, 255, 0.8),
    0 0 40px rgba(255, 255, 255, 0.8);
}

.underwater--service .btn-line--md {
  margin-top: 24px;
}

@media (min-width: 1024px) {
  .underwater--service .final-cta {
    padding-top: clamp(64px, 119.4px - 3.846vw, 80px);
  }

  .underwater--service .site-footer__hw {
    margin-top: clamp(30px, 64.6px - 2.404vw, 40px);
  }
}

/* =========================================================
   PC 1024〜1439px：Figma 1024 基準（中身944）
   ========================================================= */
@media (min-width: 1024px) and (max-width: 1439px) {
  .dt-for__card p {
    font-size: 20px;
  }

  /* 料金プラン：カードの中はスマホ・タブレットと同じ並べ方（下の「1023px以下と1024〜1439px共通」） */
  .dt-plan__lead {
    line-height: 30.6px;
  }

  .dt-plan__note {
    line-height: 22.1px;
  }

  /* 中間CTA：左右のまとまりを帯の真ん中に */
  .dt-mid__band {
    grid-template-columns: max-content 320px;
    justify-content: center;
    column-gap: 56px;
    padding: 44px 0 48px;
  }

  .dt-mid__fluffy--1 {
    left: -70px;
    top: -60px;
    width: 196px;
    height: 164px;
  }

  .dt-mid__fluffy--2 {
    right: -60px;
    bottom: -70px;
    width: 224px;
    height: 186px;
  }

  .dt-mid__dots {
    right: 48px;
    top: 32px;
    width: 48px;
    height: 48px;
  }

  .dt-mid__bubble {
    margin-left: 16px;
  }

  .dt-mid__rays3 {
    left: -26px;
    width: 28px;
    height: 28px;
  }

  .dt-mid__title {
    margin-top: 16px;
    font-size: 32px;
    line-height: 48px;
  }

  .dt-mid__rays2 {
    left: 430px;
    top: 27px;
    width: 27px;
    height: 27px;
  }

  .dt-mid__body {
    margin-top: 16px;
  }

  .dt-mid__action {
    margin-top: 28px;
  }

  .dt-mid__note {
    margin-top: 12px;
  }

  /* 進め方 */
  .dt-step {
    width: 194px;
  }

  .dt-step + .dt-step {
    margin-left: 56px;
  }

  .dt-step + .dt-step::before {
    width: 48px;
    height: 8px;
    transform: translate(calc(-100% - 4px), 76px);
  }

  /* 伴走サポート：文字とボタンを縦に、料金の流れは同じ幅の箱 */
  .dt-bansou {
    padding-right: 40px;
  }

  .dt-bansou__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .dt-bansou__text {
    align-self: stretch;
  }

  .dt-bansou__flow {
    align-self: stretch;
  }

  .dt-bansou__flow li {
    flex: 1;
  }

  /* よくある質問 */
  .faq--detail .faq__circle--left {
    bottom: 30px;
  }

  .faq--detail .faq__circle--right {
    bottom: 160px;
  }
}

/* =========================================================
   料金プランのカード：1439px以下（1024・768・スマホ）は
   名前・説明の下に横長の料金の箱、比較の行は項目の札の下に文
   ========================================================= */
@media (max-width: 1439px) {
  .dt-plan {
    padding-bottom: 48px;
  }

  .dt-pcard__head {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 28px 24px 24px;
  }

  .dt-pcard__name h3 {
    font-size: 24px;
  }

  .dt-pcard__name p {
    font-size: 14px;
  }

  .dt-pcard__price {
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    padding: 16px 18px;
  }

  .dt-pcard__price-value {
    font-size: 27px;
  }

  .dt-pcard__price-value small {
    font-size: 14px;
  }

  .dt-pcard__rows > div {
    margin-inline: 24px;
  }

  .dt-pcard__rows > div:last-child {
    margin-bottom: 16px;
  }

  .dt-pcard__rows > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .dt-pcard__rows dd {
    font-size: 15px;
  }

  .btn-outline.dt-pcard__btn {
    margin-inline: 24px;
  }

  /* どちらが合うか：行き先（→ プラン名）は文の下 */
  .dt-guide {
    gap: 16px;
    padding: 24px 24px 20px;
  }

  .dt-guide__title {
    font-size: 20px;
    line-height: 1.5;
  }

  .dt-guide__row {
    gap: 12px;
    padding: 18px 16px;
  }

  .dt-guide__icon {
    width: 40px;
    height: 40px;
  }

  .dt-guide__icon img {
    width: 20px;
    height: 20px;
  }

  .dt-guide__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .dt-guide__text {
    font-size: 15px;
  }

  .dt-guide__dest {
    gap: 8px;
  }

  .dt-guide__plan {
    padding: 6px 12px;
    font-size: 15px;
    line-height: 18px;
  }

  .dt-guide__foot {
    font-size: 13px;
  }

  .dt-option {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 32px;
    padding: 28px 24px;
  }

  .dt-option__title {
    font-size: 18px;
  }

  .dt-option__tags {
    gap: 8px;
  }

  .dt-option__tags li {
    padding: 8px 16px;
    font-size: 14px;
  }
}

/* =========================================================
   タブレット（768〜1023px）Figma 768 基準（中身704）
   ========================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
  .dt-title {
    margin-top: 14px;
    font-size: 46px;
    line-height: 66px;
  }

  /* ページ冒頭 */
  .dt-top__bg {
    height: 665px;
  }

  .dt-top__title {
    font-size: 60px;
    line-height: 83px;
  }

  .dt-top__underline {
    left: -3px;
    top: 67px;
    width: 201px;
    height: 15px;
  }

  /* こんな方 */
  .dt-for {
    padding-bottom: 80px;
  }

  .dt-for__card {
    gap: 16px;
    padding: 24px;
  }

  .dt-for__card p {
    font-size: 18px;
  }

  /* 含まれるもの：帯は「整理（…）」を1行、その下に一言を字下げ */
  .dt-inc {
    padding: 80px 0;
  }

  .dt-band {
    display: grid;
    grid-template-columns: 40px auto;
    column-gap: 16px;
    row-gap: 8px;
    padding: 24px 32px;
  }

  .dt-band__note {
    grid-column: 2;
    margin-left: 0;
  }

  .dt-inc__list {
    gap: 18px 32px;
    padding: 32px;
  }

  .dt-inc__list li {
    font-size: 16px;
  }

  /* 料金プラン */
  .dt-plan {
    padding-top: 80px;
  }

  .dt-plan__lead {
    margin-top: 12px;
    font-size: 17px;
    line-height: 28.9px;
  }

  .dt-plan__note {
    line-height: 22.1px;
  }

  .dt-guide__title {
    font-size: 19px;
    line-height: 28.5px;
  }

  .dt-plans {
    column-gap: 24px;
  }

  /* 中間CTA：左右のまとまりを帯の真ん中に */
  .dt-mid {
    padding-bottom: 72px;
  }

  .dt-mid__band {
    grid-template-columns: max-content 260px;
    justify-content: center;
    column-gap: 40px;
    padding: 44px 0;
  }

  .dt-mid__fluffy--1 {
    left: -70px;
    top: -60px;
    width: 196px;
    height: 164px;
  }

  .dt-mid__fluffy--2 {
    right: -60px;
    bottom: -70px;
    width: 224px;
    height: 186px;
  }

  .dt-mid__dots {
    right: 40px;
    top: 28px;
    width: 48px;
    height: 48px;
  }

  .dt-mid__bubble {
    margin-left: 16px;
  }

  .dt-mid__rays3 {
    left: -26px;
    width: 28px;
    height: 28px;
  }

  .dt-mid__title {
    margin-top: 16px;
    font-size: 28px;
    line-height: 42px;
  }

  .dt-mid__rays2 {
    left: 198px;
    top: 85px;
    width: 27px;
    height: 27px;
  }

  .dt-mid__body {
    font-size: 15px;
    line-height: 26.25px;
  }

  .dt-mid__action {
    margin-top: 20px;
  }

  /* LINEボタン：スマホの部品（サイズ=スマホ, 形=丸）を幅260で */
  .btn-line--pill {
    width: 260px;
    height: 63px;
    gap: 12px;
    font-size: 17px;
    box-shadow: 0 7.3px 8.7px rgba(5, 153, 77, 0.22);
  }

  .btn-line--pill .btn-line__arrow {
    width: 12px;
    height: 9px;
  }

  .dt-mid__note {
    margin-top: 12px;
    font-size: 13px;
  }

  /* 進め方 */
  .dt-flow {
    padding: 80px 0;
  }

  .dt-steps {
    margin-top: 40px;
  }

  .dt-step {
    width: 146px;
  }

  .dt-step + .dt-step {
    margin-left: 40px;
  }

  .dt-step + .dt-step::before {
    width: 36px;
    height: 6px;
    transform: translate(calc(-100% - 2px), 69px);
  }

  .dt-step__icon {
    width: 80px;
    height: 80px;
  }

  .dt-step__icon img {
    width: 33px;
    height: 33px;
  }

  .dt-step__name {
    font-size: 19px;
  }

  .dt-step__desc {
    font-size: 14px;
    line-height: 22px;
  }

  /* 伴走サポート：写真を左（カードの高さいっぱい）、右に文字とボタン */
  .dt-after {
    padding: 80px 0;
  }

  .dt-after__lead {
    margin-top: 12px;
    font-size: 17px;
    line-height: 28.9px;
  }

  .dt-bansou {
    align-items: stretch;
    gap: 28px;
    margin-top: 32px;
    padding: 28px;
  }

  .dt-bansou__photo {
    width: 280px;
    height: auto;
  }

  .dt-bansou__body {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .dt-bansou__name {
    font-size: 26px;
    line-height: 36px;
  }

  .dt-bansou__catch {
    font-size: 16px;
    line-height: 26px;
  }

  .btn-outline.dt-bansou__btn {
    width: 100%;
  }

  /* よくある質問（PCの部品を1列） */
  .faq--detail .faq__title {
    margin-top: 14px;
    font-size: 46px;
    line-height: 66px;
  }

  .faq--detail .faq__lead {
    font-size: 17px;
    line-height: 36px;
  }

  .faq--detail .faq__list {
    margin-top: 40px;
  }

  .faq--detail .faq__circle--left {
    bottom: -30px;
    width: 180px;
    height: 180px;
  }

  .faq--detail .faq__drop {
    right: var(--edge);
    bottom: 8px;
    width: 80px;
  }

  /* 最終CTA */
  .final-cta__text {
    margin-top: 20px;
  }

  .underwater--service .btn-line--md {
    margin-top: 28px;
  }
}

/* 料金の流れ（伴走サポート）：タブレット・スマホは縦に3行（左に小さい文字、右に大きい文字） */
@media (max-width: 1023px) {
  .dt-bansou__text {
    align-items: stretch;
  }

  .dt-bansou__flow {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }

  .dt-bansou__flow li {
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 16px;
  }

  .dt-bansou__flow li + li {
    margin-left: 0;
  }

  .dt-bansou__flow li + li::before {
    left: 50%;
    top: -18px;
    transform: translateX(-50%) rotate(90deg);
  }

  .dt-bansou__flow strong {
    font-size: 16px;
  }

  .dt-bansou__note {
    font-size: 12px;
  }

}

/* =========================================================
   スマホ（〜767px）Figma 375 基準（320・425 は下で調整）
   ========================================================= */
@media (max-width: 767px) {
  /* 見出し：1行の見出しは行の高さ68、2行の見出しは40（Figma） */
  .dt-title {
    margin-top: 12px;
    font-size: 27px;
    line-height: 68px;
  }

  .dt-title--2l {
    margin-top: 26px;
    line-height: 40px;
  }

  /* ページ冒頭 */
  .dt-top {
    padding: 16px 0 80px;
  }

  .dt-top__bg {
    height: 678px;
    background-size: auto, auto, auto 678px;
  }

  .breadcrumb ol {
    font-size: 11px;
  }

  .dt-top__label {
    margin-top: 20px;
  }

  .dt-top__title {
    margin-top: 10px;
    font-size: 52px;
    line-height: 100px;
  }

  .dt-top__underline {
    left: -3px;
    top: 78px;
    width: 174px;
    height: 13px;
  }

  .dt-top__catch {
    margin-top: 18px;
    font-size: 20px;
    line-height: 32px;
  }

  .dt-top__lead {
    margin-top: 14px;
    font-size: 14px;
    line-height: 26px;
  }

  .dt-facts {
    gap: 10px;
    margin-top: 22px;
  }

  .dt-fact {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: auto;
    min-width: 0;
    padding: 14px 12px 14px 16px;
  }

  .dt-fact__icon {
    width: 36px;
    height: 36px;
  }

  .dt-fact__icon img {
    width: 20px;
    height: 20px;
  }

  .dt-fact__label {
    font-size: 12px;
  }

  .dt-fact__value,
  .dt-fact:last-child .dt-fact__value {
    height: 38px;
    font-size: 30px;
    line-height: 38px;
  }

  .dt-fact__num,
  .dt-fact:last-child .dt-fact__num {
    font-size: 30px;
  }

  .dt-fact__unit {
    font-size: 14px;
  }

  .dt-fact__sub {
    font-size: 17px;
  }

  .dt-top__note {
    font-size: 12px;
    line-height: 20px;
  }

  /* こんな方 */
  .dt-for {
    padding: 80px 0;
  }

  .dt-for__list {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 14px;
    margin-top: 32px;
  }

  .dt-for__card {
    gap: 16px;
    padding: 22px 20px;
  }

  .dt-for__card img {
    width: 32px;
    height: 32px;
  }

  .dt-for__card p {
    font-size: 16px;
    line-height: 26px;
  }

  .dt-for__guide {
    flex-direction: column;
    gap: 4px;
    margin-top: 28px;
    font-size: 14px;
  }

  /* 含まれるもの：帯は縦に積む（「整理」を大きく、かっこの中を小さく） */
  .dt-inc {
    padding: 80px 0;
  }

  .dt-band {
    display: grid;
    grid-template-columns: 32px auto;
    column-gap: 12px;
    row-gap: 18px;
    align-items: center;
    margin-top: 32px;
    padding: 28px 24px;
  }

  .dt-band__check {
    width: 32px;
    height: 32px;
  }

  .dt-band__title {
    white-space: normal;
  }

  .dt-band__key {
    display: block;
    font-size: 24px;
    line-height: 36px;
  }

  .dt-band__sub {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
  }

  .dt-band__note {
    grid-column: 1 / -1;
    margin-left: 0;
    font-size: 14px;
    line-height: 22.4px;
  }

  .dt-inc__list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 16px;
    margin-top: 20px;
    padding: 32px 20px;
  }

  .dt-inc__list li {
    font-size: 16px;
  }

  /* 料金プラン */
  .dt-plan {
    padding: 80px 0 48px;
  }

  .dt-plan__lead {
    margin-top: 20px;
    font-size: 15px;
    line-height: 25.5px;
  }

  .dt-plan__note {
    margin-top: 10px;
    font-size: 12px;
    line-height: 20.4px;
  }

  .dt-guide {
    padding: 24px 20px 20px;
  }

  .dt-guide__title {
    font-size: 17px;
    line-height: 25.5px;
  }

  .dt-guide__rows {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .dt-guide__text {
    line-height: 26px;
  }

  /* プランのカード：2枚を横に並べて見比べる（Figma 375：幅163・間9） */
  .dt-plans {
    column-gap: 9px;
  }

  .dt-pcard__head {
    gap: 12px;
    padding: 20px 12px 16px;
  }

  .dt-pcard__name h3 {
    font-size: 18px;
    line-height: 24px;
    white-space: normal;
  }

  .dt-pcard__name p {
    font-size: 12px;
    line-height: 19px;
  }

  .dt-pcard__price {
    flex-direction: column;
    gap: 0;
    padding: 2px 8px 1px;
  }

  .dt-pcard__price-label {
    font-size: 11px;
    line-height: 13px;
  }

  .dt-pcard__price-value {
    font-size: 22px;
  }

  .dt-pcard__price-value small {
    font-size: 12px;
  }

  .dt-pcard__mock {
    padding: 0 8px;
  }

  .dt-pcard__rows > div {
    gap: 6px;
    margin-inline: 12px;
    padding: 12px 0;
  }

  .dt-pcard__rows dt {
    padding: 2px 6px;
    font-size: 12px;
    line-height: 18px;
  }

  .dt-pcard__rows dd {
    font-size: 13px;
    line-height: 20px;
  }

  .btn-outline.dt-pcard__btn {
    height: 40px;
    margin: auto 12px 16px;
    gap: 4px;
    font-size: 11px;
    line-height: 17px;
  }

  .dt-option {
    margin-top: 36px;
  }

  /* 中間CTA：縦に積む */
  .dt-mid {
    padding: 24px 0 64px;
  }

  .dt-mid__band {
    display: block;
    padding: 40px 20px;
  }

  .dt-mid__fluffy--1 {
    left: -70px;
    top: -60px;
    width: 196px;
    height: 164px;
  }

  .dt-mid__fluffy--2 {
    right: -60px;
    bottom: -70px;
    width: 224px;
    height: 186px;
  }

  .dt-mid__dots {
    right: 20px;
    top: 138px;
    width: 48px;
    height: 48px;
  }

  .dt-mid__bubble {
    margin-left: 16px;
  }

  .dt-mid__rays3 {
    left: -26px;
    width: 28px;
    height: 28px;
  }

  .dt-mid__title {
    margin-top: 16px;
    font-size: 26px;
    line-height: 37.7px;
  }

  .dt-mid__rays2 {
    left: 184px;
    top: 76px;
    width: 27px;
    height: 27px;
  }

  .dt-mid__body {
    font-size: 14px;
    /* Figma は 175%（24.5）を1行25で並べている */
    line-height: 25px;
  }

  .dt-mid__action {
    margin-top: 24px;
  }

  /* LINEボタン：部品「サイズ=スマホ, 形=丸」（帯の幅いっぱい、最大320） */
  .btn-line--pill {
    width: 100%;
    max-width: 320px;
    height: 63px;
    gap: 12px;
    font-size: 17px;
  }

  .btn-line--pill .btn-line__arrow {
    width: 12px;
    height: 9px;
  }

  .dt-mid__note {
    margin-top: 12px;
    font-size: 13px;
  }

  /* 進め方：縦に並べる（左に丸いアイコン、右に番号・名前・説明） */
  .dt-flow {
    padding: 80px 0;
  }

  .dt-steps {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 36px;
  }

  .dt-step {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: auto;
    text-align: left;
  }

  .dt-step + .dt-step {
    margin: 44px 0 0;
  }

  .dt-step + .dt-step::before {
    left: 32px;
    width: 30px;
    height: 5px;
    transform: translate(-50%, -24.5px) rotate(90deg);
  }

  .dt-step__icon {
    order: 0;
    flex: none;
    width: 64px;
    height: 64px;
    margin: 0;
  }

  .dt-step__icon img {
    width: 27px;
    height: 27px;
  }

  .dt-step__text {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 2px;
  }

  .dt-step__num {
    font-size: 14px;
  }

  .dt-step__name {
    margin-top: 0;
    font-size: 19px;
  }

  .dt-step__desc {
    margin-top: 0;
    font-size: 14px;
  }

  .dt-after-link {
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 36px;
    padding: 18px 12px;
  }

  .dt-after-link__text {
    font-size: 15px;
    white-space: nowrap;
  }

  /* 伴走サポート：カードは縦に積む */
  .dt-after {
    padding: 80px 0;
  }

  .dt-after__lead {
    margin-top: 20px;
    font-size: 15px;
    line-height: 25.5px;
  }

  .dt-bansou {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin-top: 24px;
    padding: 24px 24px 28px;
  }

  .dt-bansou__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 320 / 200;
  }

  .dt-bansou__body {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .dt-bansou__name {
    font-size: 22px;
    line-height: 32px;
  }

  .dt-bansou__catch {
    font-size: 15px;
    line-height: 24px;
  }

  .btn-outline.dt-bansou__btn {
    width: 100%;
  }

  /* よくある質問（スマホの部品） */
  .faq--detail {
    padding: 80px 0 88px;
  }

  .faq--detail .faq__title {
    margin-top: 12px;
    font-size: 27px;
    line-height: 68px;
  }

  .faq--detail .faq__lead {
    margin-top: 16px;
    font-size: 15px;
    line-height: 26px;
  }

  .faq--detail .faq__circle--top {
    top: -36px;
  }

  .faq--detail .faq__circle--left {
    bottom: -16px;
  }

  .faq--detail .faq__drop {
    right: calc(var(--edge) + 3px);
    bottom: 29px;
  }

  /* 1問目の回答は、どの幅でも手で入れた改行の位置だけで折り返す */
  .faq-item__manual {
    white-space: nowrap;
  }

  /* 最終CTA */
  .final-cta__text {
    margin-top: 16px;
    font-size: 14px;
    line-height: 26px;
  }
}

/* スマホで見出しが2行になるセクション（進め方・伴走） */
@media (max-width: 767px) {
  .dt-flow .dt-title,
  .dt-after .dt-title {
    margin-top: 26px;
    line-height: 40px;
  }
}

/* =========================================================
   Figma 425（425〜767px）
   ========================================================= */
@media (min-width: 425px) and (max-width: 767px) {
  .dt-mid__action {
    align-items: center;
  }

  /* プランのカード（Figma 425：幅187・間10） */
  .dt-plans {
    column-gap: 10px;
  }

  .dt-pcard__head {
    padding-inline: 14px;
  }

  .dt-pcard__name h3 {
    font-size: 20px;
    line-height: 26px;
  }

  .dt-pcard__name p {
    font-size: 13px;
    line-height: 20px;
  }

  .dt-pcard__price {
    padding: 0 8px;
  }

  .dt-pcard__price-value {
    font-size: 24px;
  }

  .dt-pcard__price-value small {
    font-size: 13px;
  }

  .dt-pcard__rows > div {
    margin-inline: 14px;
  }

  .dt-pcard__rows dd {
    font-size: 14px;
    line-height: 21px;
  }

  .btn-outline.dt-pcard__btn {
    height: 41px;
    margin-inline: 14px;
    font-size: 12px;
    line-height: 18px;
  }

  .btn-line--pill {
    width: 320px;
  }
}

/* =========================================================
   Figma 320（〜374px）
   ========================================================= */
@media (max-width: 374px) {
  .dt-for .dt-title,
  .dt-flow .dt-title {
    margin-top: 26px;
    line-height: 40px;
  }

  .dt-fact__num,
  .dt-fact:last-child .dt-fact__num,
  .dt-fact__value,
  .dt-fact:last-child .dt-fact__value {
    font-size: 26px;
  }

  .dt-fact__unit {
    font-size: 12px;
  }

  .dt-fact__sub {
    font-size: 15px;
  }

  .dt-for__card {
    gap: 14px;
    padding-inline: 16px;
  }

  .dt-for__card p {
    font-size: 15px;
  }

  .dt-band {
    padding-inline: 20px;
  }

  .dt-band__sub {
    font-size: 14px;
    line-height: 18px;
  }

  .dt-mid {
    padding-bottom: 48px;
  }

  /* 1行目「LP制作について、よくいただくご質問を」は右の余白に少しかかるが、Figma 320 と同じく折り返さない */
  .faq--detail .faq__lead {
    white-space: nowrap;
  }

  .faq--detail {
    padding-bottom: 80px;
  }

  .dt-inc__list {
    padding-inline: 16px;
  }

  .dt-inc__list li {
    font-size: 15px;
  }

  .dt-guide {
    padding-inline: 14px;
  }

  .dt-guide__row {
    gap: 10px;
    padding-inline: 14px;
  }

  .dt-guide__icon {
    width: 32px;
    height: 32px;
  }

  .dt-guide__icon img {
    width: 16px;
    height: 16px;
  }

  .dt-guide__text {
    font-size: 14px;
  }

  .dt-guide__dest {
    gap: 6px;
  }

  .dt-guide__dest img {
    width: 14px;
    height: 10px;
  }

  .dt-guide__plan {
    padding-inline: 10px;
    font-size: 14px;
  }

  /* プランのカード（Figma 320：幅136・間8。ボタンはカードの左右5まで広げる） */
  .dt-plans {
    column-gap: 8px;
  }

  .dt-pcard__head {
    padding-inline: 10px;
  }

  .dt-pcard__name p {
    font-size: 11px;
    line-height: 17px;
  }

  .dt-pcard__price-value small {
    font-size: 11px;
  }

  .dt-pcard__rows > div {
    margin-inline: 10px;
  }

  .dt-pcard__rows dt {
    font-size: 11px;
    line-height: 17px;
  }

  .dt-pcard__rows dd {
    font-size: 12px;
    line-height: 19px;
  }

  .btn-outline.dt-pcard__btn {
    height: 38px;
    margin-inline: 5px;
    font-size: 10px;
    line-height: 15px;
  }

  .dt-mid__dots {
    right: 14px;
    top: 102px;
    width: 34px;
    height: 34px;
  }

  .dt-after-link {
    padding-inline: 16px;
  }

  .dt-after-link__text {
    line-height: 22px;
  }

  .final-cta__title {
    font-size: 22px;
    line-height: 34px;
  }
}

/* 最終CTA：スマホは本文が3行（サービス紹介ページは4行）。Figmaと同じく、ボタンの下を1行ぶん空けてフッターの位置をそろえる */
@media (max-width: 767px) {
  .page-detail .underwater .btn-line--md {
    margin-bottom: 26px;
  }
}

/* 320は見出しも4低い（サービス紹介ページは72、このページは68）ので、そのぶんも足す */
@media (max-width: 374px) {
  .page-detail .underwater .btn-line--md {
    margin-bottom: 30px;
  }
}