/* =========================================================
 * svc-webmkt.css : 「03-1 Webマーケティング運用代行」ページ固有スタイル
 * デザイン基準: design-reference/03-1-webmkt-pc.png (1440x16318)
 * 中央コンテンツ幅 1024 / PC左右余白 208px
 * 読込順: base -> header -> footer -> cta -> svc-webmkt -> spcv
 * 共通コンポーネント（hero / breadcrumbs / par-subtitle / btn-pill / faq-item）は
 * services.css / faq.css と同値を自己完結で定義。
 * ========================================================= */

/* ----- 共通コンテナ ----- */
.wm-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
}

@media (min-width: 1025px) {
  .wm-container {
    padding-inline: 0;
  }
}

/* =========================================================
 * ヒーロー
 * ========================================================= */
.wm-hero {
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
  color: var(--color-bg-white);
}

@media (min-width: 1025px) {
  .wm-hero { height: 483px; }
}

.wm-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url("../images/services-webmkt/hero.jpg");
  background-size: cover;
  background-position: center;
}

.wm-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0.15) 100%);
}

.wm-hero__content {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

@media (min-width: 1025px) {
  .wm-hero__content {
    padding-inline: 0;
    gap: 28px;
  }
}

.wm-hero__title {
  color: var(--color-bg-white);
}

.wm-hero__lead {
  max-width: 606px;
  color: var(--color-bg-white);
}

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

.wm-hero__note {
  color: var(--color-bg-white);
}

@media (min-width: 1025px) {
  /* ボタン＋注記を中央寄せスタック */
  .wm-hero__action {
    width: 402px;
    margin-left: 65px; /* 208 + 65 = 273 */
    align-items: center;
  }
  .wm-hero__note {
    text-align: center;
  }
  .wm-hero__lead { max-width: 933px; } /* Figma箱933px（606だと1行目が<br>前に折返す） */
}

/* =========================================================
 * 共通：ピルボタン（services.css / top.css と同値）
 * ========================================================= */
.btn-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  padding: 12px 40px;
  border-radius: 50px;
  background: var(--color-accent);
  color: var(--color-bg-white);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  white-space: nowrap;
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.btn-pill:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn-pill__arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

.btn-pill--navy { background: var(--color-navy); }

/* 主要CTA「無料で相談する」（ヒーロー / ご利用の流れ）: Figma実値へ。
   色 #f9f7f2(beige) は全インスタンス共通。
   PC(1025+): fs20 / ls1px(0.05em)。 SPヒーロー: fs20 / ls0.05em。 SPフロー: fs16 / ls0(base)。
   もっと見る系 .btn-pill--navy（fs14/#fff）は対象外。 */
.btn-pill--cta { color: var(--color-bg-beige); }
.wm-hero__action .btn-pill--cta { font-size: 20px; letter-spacing: 0.05em; }
.wm-flow__cta .btn-pill--cta { font-size: 16px; }
@media (min-width: 1025px) {
  /* PCは ヒーロー / フロー ともに fs20 / ls0.05em。
     コンテナ指定(0,2,0)を打ち消すため同特異度で上書き（メディアクエリは特異度を上げない）。 */
  .wm-hero__action .btn-pill--cta,
  .wm-flow__cta .btn-pill--cta { font-size: 20px; letter-spacing: 0.05em; }
}

/* =========================================================
 * 共通：par サブタイトル（英語サブ + 紺h2）
 * ========================================================= */
.par-subtitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
}

.par-subtitle__en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 0;
  color: var(--color-accent);
}

@media (min-width: 1025px) {
  .par-subtitle__en { font-size: 16px; line-height: 28px; }
}

.par-subtitle__jp {
  color: var(--color-navy);
}

/* 中央紺見出し（セクション大見出し） */
.wm-heading {
  color: var(--color-navy);
  text-align: center;
}

.wm-heading--sub {
  color: var(--color-navy);
}

/* =========================================================
 * 導入
 * ========================================================= */
.wm-intro {
  background: var(--color-bg-white);
  padding-block: 56px;
}

@media (min-width: 1025px) {
  .wm-intro { padding-block: 88px; }
}

.wm-intro .wm-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

@media (min-width: 1025px) {
  .wm-intro .wm-container { gap: 40px; }
}

.wm-intro__title {
  color: var(--color-navy);
  text-align: center;
}

.wm-intro__photo {
  width: 100%;
  max-width: 450px;
  border-radius: 5px; /* Figma実測 */
  overflow: hidden;
}

.wm-intro__photo img {
  width: 100%;
  height: auto;
  display: block;
}

.wm-intro__text {
  color: var(--color-text-black);
  text-align: left; /* SP=左。PCは下の1025で中央 */
}

@media (min-width: 1025px) {
  .wm-intro__text {
    text-align: center; /* PC=中央 */
  }
}

/* =========================================================
 * こんなお悩み（6カード）
 * ========================================================= */
.wm-problems {
  background: var(--color-bg-blue-gray); /* #F0F2F5 */
  padding-block: 56px;
}

@media (min-width: 1025px) {
  .wm-problems { padding-block: 90px; }
}

.wm-problems .wm-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

@media (min-width: 1025px) {
  .wm-problems .wm-container { gap: 56px; }
}

.wm-prob-cards {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px 24px;
}

@media (min-width: 600px) {
  .wm-prob-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1025px) {
  .wm-prob-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px; /* Figma: 横gap≒30(カード320×3+30×2≒1024) */
  }
}

/* Figma: 各お悩みカードは 白背景#fff/角丸16 の箱に ラベル+本文(左揃え)、
   その上に イラストが中央でカード上端に重なる構成。
   画像は通常フロー、白箱を負のmargin-topで持ち上げて重ねる（絶対配置なしで衝突回避）。 */
.wm-prob-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* イラスト（Figma: SP 100x100 / PC 196x196・中央） */
.wm-prob-card__img {
  display: block;
  width: 100px;
  height: 100px;
  position: relative;
  z-index: 1;
}

@media (min-width: 1025px) {
  .wm-prob-card__img {
    width: 196px;
    height: 196px;
  }
}

.wm-prob-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 白カード（Figma: SP 343x145 pad上40/左32 / PC 320x207 pad上72/左32・角丸16） */
.wm-prob-card__box {
  width: 100%;               /* SP: 1列いっぱい(=343) */
  margin-top: -43px;         /* SP: 画像100がカード上端を43px覆う(Figma img top1533/card top1590) */
  background: var(--color-bg-white);
  border-radius: 16px;
  padding: 43px 32px 24px;   /* 上=重なり分, 左右=Figma32, 下=余白 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

@media (min-width: 1025px) {
  .wm-prob-card__box {
    width: 100%;             /* PC: 3列セル(≒320)いっぱい */
    margin-top: -88px;       /* PC: 画像196がカード上端を88px覆う(Figma img top1593/card top1701) */
    padding: 88px 32px 24px;
  }
}

.wm-prob-card__label {
  color: #d3bf7c; /* Figma実値（accent #c0af72 と別の一点物） */
}

.wm-prob-card__text {
  max-width: 300px;
  color: var(--color-text-black);
  text-align: left;
}

@media (min-width: 1025px) {
  /* max-width:300 の中央箱だと左端がラベルと揃わないため 250 で左寄せ */
  .wm-prob-card__text {
    align-self: flex-start;
    margin-left: 33px;
    max-width: 250px;
  }
}

/* =========================================================
 * プロが整える（connect / 理由 / 4steps / できること）
 * ========================================================= */
.wm-connect {
  background: var(--color-bg-white);
  padding-block: 56px;
}

@media (min-width: 1025px) {
  .wm-connect { padding-block: 90px; }
}

.wm-connect .wm-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
}

@media (min-width: 1025px) {
  .wm-connect .wm-container { gap: 88px; }
}

/* 2カラム（テキスト左 + 画像右） */
.wm-twocol {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

@media (min-width: 1025px) {
  .wm-twocol {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
  }
}

.wm-twocol__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wm-twocol__title {
  color: var(--color-text-black);
}

.wm-twocol__text {
  color: var(--color-text-black); /* Figma #121212 */
}

.wm-twocol__figure {
  width: 100%;
  max-width: 323px;
  flex-shrink: 0;
}

.wm-twocol__figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* 理由ボックス（薄青） */
.wm-reason {
  width: 100%;
  background: #eff4f8; /* 薄青ボックス（トークン未定義） */
  border-radius: 16px;
  padding: 16px; /* Figma: 青外枠。内側に白ボックスを入れ子（外枠paddingが青縁の太さ） */
}

/* Figma: 薄青の外箱の中に白い内箱（944x506 r16・上下40/左右64）。実装は青1枚だったので白内箱を新設 */
.wm-reason__inner {
  background: var(--color-bg-white);
  border-radius: 16px;
  padding: 24px 20px;
}

@media (min-width: 1025px) {
  .wm-reason { padding: 40px; } /* Figma: 青外枠40px */
  .wm-reason__inner { padding: 40px 64px; } /* Figma: 白内箱 上下40/左右64 */
}

.wm-reason__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wm-reason__title {
  color: var(--color-text-black);
}

.wm-reason__text {
  color: var(--color-text-black); /* Figma #121212 */
}

.wm-reason__lead {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-black);
  margin-top: 4px;
}

@media (min-width: 1025px) {
  .wm-reason__lead { font-size: 15px; }
}

.wm-reason__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wm-reason__list li {
  position: relative;
  padding-left: 1.1em;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-sub);
}

@media (min-width: 1025px) {
  .wm-reason__list li { font-size: 15px; }
}

.wm-reason__list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

/* 4ステップ */
.wm-steps {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

@media (min-width: 1025px) {
  .wm-steps { gap: 36px; }
}

.wm-steps__caption {
  color: #212529; /* Figma実値 */
  text-align: center;
  margin-top: -8px;
}

.wm-step-track {
  width: 100%;
  background: var(--color-bg-white); /* ピル内部は白 #FFFFFF（枠 #ede4d0 で分離） */
  border: 1px solid #ede4d0; /* 淡ベージュ枠（トークン未定義） */
  /* SP: Figmaは縦1列（ステップを縦積み gap20）・コンテナ radius60 / padding30 / 幅281中央。
     従来は repeat(2,1fr)+999px で 2×2の楕円になっていた（PC用レイアウトのSP流用）。2026-07-20是正。 */
  border-radius: 60px;
  padding: 30px;
  max-width: 281px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 1025px) {
  .wm-step-track {
    grid-template-columns: repeat(4, 1fr);
    padding: 36px 40px;
    gap: 24px;
    border-radius: 120px;
    max-width: none; /* PCはフル幅4列ピルに戻す */
  }
}

.wm-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.wm-step__icon {
  display: block;
  width: 120px;
  height: 87px;
}

@media (min-width: 1025px) {
  .wm-step__icon {
    width: 140px;
    height: 101px;
  }
}

.wm-step__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wm-step__label {
  color: var(--color-navy); /* Figma #00103e */
}

.wm-step__sub {
  color: var(--color-text-black); /* Figma #121212 */
}

.wm-step-detail {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wm-step-detail li {
  display: flex;
  gap: 10px;
  font-family: var(--font-jp);
  font-size: 12px; /* SP fs12 */
  line-height: 22px; /* SP lh22 */
  color: var(--color-text-sub);
}

@media (min-width: 1025px) {
  .wm-step-detail li { font-size: 16px; line-height: 28px; } /* Figma fs16/lh28 */
}

.wm-step-detail__num {
  flex-shrink: 0;
  font-family: var(--font-en);
  font-weight: 700;
  color: var(--color-accent);
}

.wm-step-detail__body b {
  color: var(--color-text-black);
  font-weight: 400; /* Figma: 段落全体が weight400（強調なし） */
}

.wm-steps__closing {
  width: 100%;
  color: #212529; /* Figma実値 */
}

@media (min-width: 1025px) {
  .wm-steps__closing { font-size: 15px; }
}

/* 今、必要な施策 + できること */
.wm-support {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

@media (min-width: 1025px) {
  .wm-support { gap: 32px; }
}

.wm-support__text {
  color: #212529; /* Figma実値 */
  text-align: left;
  max-width: 860px;
}

@media (min-width: 1025px) {
  .wm-support__text { font-size: 15px; }
}

.wm-support__label {
  color: #212529; /* Figma実値 */
  text-align: center;
}

@media (min-width: 1025px) {
  /* 本文幅いっぱいの箱に左揃え。
     親 .wm-support の align-items:center で箱が中央に縮むため stretch で戻す。 */
  .wm-support__label {
    align-self: stretch;
    text-align: left;
  }
}

.wm-can-cards {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 1025px) {
  .wm-can-cards {
    flex-direction: row;
    gap: 32px;
    align-items: stretch;
  }
}

.wm-can-card {
  flex: 0 0 auto;
  min-width: 0;
  background: var(--color-bg-white);
  border: 1px solid #e6e9ef; /* 淡グレー枠（トークン未定義） */
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

@media (min-width: 1025px) {
  .wm-can-card { flex: 1 1 0; }
}

.wm-can-card__img {
  width: 100%;
  aspect-ratio: 320 / 160;
  overflow: hidden;
}

.wm-can-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wm-can-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 26px;
}

.wm-can-card__title {
  color: #212529; /* Figma実値 */
}

.wm-can-card__text {
  color: #212529; /* Figma実値 */
}

/* =========================================================
 * サブサービス（5枚）
 * ========================================================= */
.wm-service {
  padding-block: 60px;
}

@media (min-width: 1025px) {
  .wm-service { padding-block: 104px; }
}

.wm-service--beige { background: var(--color-bg-beige); }      /* #F9F7F2 */
.wm-service--warm  { background: var(--color-bg-beige-mid); }  /* #F6F3EB */
.wm-service--blue  { background: var(--color-bg-blue-gray); }  /* #F0F2F5 */

/* ③④⑤をまとめる帯の各サブセクション間隔 */
.wm-sub-section { padding-block: 44px; }

@media (min-width: 1025px) {
  .wm-sub-section { padding-block: 76px; }
}

.wm-service--beige .par-subtitle {
  margin-bottom: 48px;
}

@media (min-width: 1025px) {
  .wm-service--beige .par-subtitle {
    margin-bottom: 64px;
  }
}

.wm-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

@media (min-width: 1025px) {
  .wm-sub { gap: 30px; }
}

.wm-sub__title {
  color: var(--color-navy);
  text-align: center;
}

.wm-sub__lead {
  color: #212529; /* Figma実値 */
  text-align: center;
}

@media (min-width: 1025px) {
  .wm-sub__lead {
    margin-top: 4px;
  }
}

.wm-sub__text {
  width: 100%;
  color: #212529; /* Figma実値 */
}

.wm-sub__text--center { text-align: left; max-width: 900px; }

/* 画像 + テキスト 2カラム（サブサービス内） */
.wm-sub__split {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

@media (min-width: 1025px) {
  .wm-sub__split {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }
}

.wm-sub__figure {
  width: 100%;
  max-width: 260px;
  flex-shrink: 0;
}

.wm-sub__figure--narrow { max-width: 150px; }

.wm-sub__figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

.wm-sub__text--split {
  flex: 1 1 0;
  min-width: 0;
  color: #333333; /* Figma実値 */
  font-weight: 500; /* Figma実値 */
  line-height: 27.2px; /* Figma実値 */
}

/* HP 縦長サンプル3枚 */
.wm-hp-samples {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 8px;
}

@media (min-width: 1025px) {
  .wm-hp-samples {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
  }
}

.wm-hp-samples img {
  width: 100%;
  max-width: 296px;
  height: auto;
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}

.wm-sub__feat-heading {
  color: #212529; /* Figma実値 */
  text-align: center;
  margin-top: 20px;
}

@media (min-width: 1025px) {
  .wm-sub__feat-heading {
    margin-top: 32px;
  }
}

.wm-sub__note {
  width: 100%;
  color: #666666; /* Figma実値 */
}

@media (min-width: 1025px) {
  .wm-sub__note { text-align: center; }
}

.wm-sub__note--center { text-align: right; color: #212529; } /* Figma実値 */

/* 特徴カード */
.wm-feat-cards {
  width: 100%;
  display: grid;
  gap: 20px;
}

.wm-feat-cards--2col { grid-template-columns: 1fr; }
.wm-feat-cards--3col { grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .wm-feat-cards--2col { grid-template-columns: repeat(2, 1fr); }
  .wm-feat-cards--3col { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1025px) {
  .wm-feat-cards--2col { gap: 24px 28px; }
  .wm-feat-cards--3col { gap: 28px; }
}

.wm-feat-card {
  background: var(--color-bg-white);
  border-radius: 16px; /* Figma実測 */
  box-shadow: var(--shadow-card);
  padding: 24px;
  display: flex;
  gap: 16px;
}

@media (min-width: 1025px) {
  .wm-feat-card { padding: 28px 28px; }
}

.wm-feat-card--stack {
  flex-direction: column;
  gap: 12px;
}

/* 縦型(③LINE/④MEO/⑤SEO)カードのアイコンは Figmaで上部中央（iconの中心=カード中心）。
   固定64/72px block は既定で左寄せなので中央化。見出し/本文は左寄せのまま。2026-07-20是正。 */
.wm-feat-card--stack .wm-feat-card__icon {
  margin-inline: auto;
}

.wm-feat-card__icon {
  flex-shrink: 0;
  display: block;
  width: 64px;
  height: 64px;
}

@media (min-width: 1025px) {
  .wm-feat-card__icon {
    width: 72px;
    height: 72px;
  }
}

.wm-feat-card__icon--sm {
  width: 56px;
  height: 56px;
}

@media (min-width: 1025px) {
  .wm-feat-card__icon--sm {
    width: 64px;
    height: 64px;
  }
}

.wm-feat-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wm-feat-card__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wm-feat-card__title {
  color: #212529; /* Figma実値 */
}

.wm-feat-card__text {
  color: #212529; /* Figma実値 */
}

@media (min-width: 1025px) {
  .wm-feat-card__text { font-size: 14px; }
}

/* =========================================================
 * お客様成功例（白背景・3カード）
 * ========================================================= */
.wm-cases {
  background: var(--color-bg-white);
  padding-block: 56px;
}

@media (min-width: 1025px) {
  .wm-cases { padding-block: 108px; }
}

.wm-cases .wm-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

@media (min-width: 1025px) {
  .wm-cases .wm-container { gap: 56px; }
}

.wm-case-cards {
  /* SP: 1枚ずつの横カルーセル（Figma SPは1枚+下に左右矢印）。従来は縦積み3枚で別物だった。2026-07-21是正 */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 16px;
  width: max-content; /* トラックはカード合計幅。ビューポートを溢れてスクロールする */
  margin-inline: auto;
}

@media (min-width: 1025px) {
  .wm-case-cards {
    gap: 33px;
  }
}

.wm-case-card {
  flex: 0 0 auto;
  width: calc(100vw - 32px); /* SP: 1枚がほぼ全幅 */
  max-width: 360px;
  scroll-snap-align: center;
  background: var(--color-bg-white);
  border: 1px solid #e0e7f1; /* ボーダー薄青（トークン未定義） */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
}

@media (min-width: 1025px) {
  .wm-case-card {
    width: 320px;
    max-width: none;
    scroll-snap-align: start;
  }
}

.wm-case-card__image {
  width: 100%;
  aspect-ratio: 318 / 167;
  overflow: hidden;
  background: #e0e7f1;
}

.wm-case-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wm-case-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  padding: 20px 18px 25px;
}

.wm-case-card__tag {
  display: inline-block;
  background: #eff2f6; /* タグ背景（トークン未定義） */
  border-radius: 8px;
  padding: 3px 8px;
  color: var(--color-text-black);
}

.wm-case-card__title {
  color: var(--color-text-black);
}

.wm-case-card__text {
  color: var(--color-text-black);
}

/* ---- 実績カルーセル（左右矢印でカード送り。SP=1枚 / PC=3枚） ---- */
.wm-cases__viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 8px 16px; /* カードの影が上下で切れないように */
  scroll-snap-type: x mandatory;
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none;      /* 旧Edge */
}
.wm-cases__viewport::-webkit-scrollbar { display: none; } /* WebKit */

@media (min-width: 1025px) {
  .wm-cases__viewport {
    /* 320px×3 + 33px×2 = 1026 が3枚。枠線/影ぶんの余白を足して3枚時は溢れさせない
       （溢れると右矢印だけ有効になり数px動く不整合が出るため）。4枚以上でだけスクロール＝矢印機能。 */
    max-width: 1060px;
    margin-inline: auto;
  }
}

.wm-cases__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100vw - 32px);
  max-width: 360px;
  margin: 16px auto 0;
}
/* JS: カードがビューポートを溢れない（スクロール不要）ときは矢印を隠す */
.wm-cases__nav[hidden] { display: none; }

@media (min-width: 1025px) {
  .wm-cases__nav {
    width: 100%;
    max-width: 1026px;
    margin-top: -16px; /* カルーセル直下に寄せる */
  }
}

/* カードが少なくて送る先が無いときだけ無効表示。端では止めずに回り込む（main.js の casesGo） */
.wm-cases__arrow:disabled { opacity: 0.3; cursor: default; }

.wm-cases__arrow {
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-navy); /* #00103E */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition-base);
}

.wm-cases__arrow:hover { opacity: 0.85; }

.wm-cases__arrow img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1); /* シェブロンを白抜きに */
}

.wm-cases__arrow--prev img { transform: rotate(180deg); } /* 左向き */

/* =========================================================
 * 料金プラン（上段2枚 + 下段3枚）
 * ========================================================= */
.wm-price {
  background: var(--color-bg-beige); /* #F9F7F2 */
  padding-block: 56px;
}

@media (min-width: 1025px) {
  .wm-price { padding-block: 104px; }
}

.wm-price .wm-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

@media (min-width: 1025px) {
  .wm-price .wm-container { gap: 48px; }
}

.wm-price-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 1025px) {
  .wm-price-row {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 32px;
  }
}

.wm-price-card {
  flex: 0 0 auto;
  min-width: 0;
  background: var(--color-bg-white);
  border: 1px solid var(--color-text-sub-light); /* 料金カード枠 #85827d */
  border-radius: 16px; /* Figma: 料金カード角丸16 */
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

@media (min-width: 1025px) {
  .wm-price-card { flex: 1 1 0; }
}

.wm-price-card__head {
  padding: 18px 24px;
  color: var(--color-bg-white);
  text-align: center;
  white-space: nowrap; /* カード見出しは1行 */
}

@media (min-width: 1025px) {
  .wm-price-card__head {
    padding: 22px 24px;
  }
}

.wm-price-card__head--gold { background: var(--color-bg-deep-beige); } /* #D3BF7C */
.wm-price-card__head--navy { background: var(--color-navy); }         /* #00103E */
/* 注: カード見出しは5枚とも中央揃え。ここを左揃えにしてはいけない。 */

.wm-price-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 26px 30px;
}

@media (min-width: 1025px) {
  .wm-price-card__body { padding: 34px 32px 34px; }
}

.wm-price-plan {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wm-price-plan__lead {
  color: var(--color-text-sub); /* Figma #3f3b3a */
  white-space: nowrap; /* プランリードは1行 */
}

.wm-price-plan__amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

@media (min-width: 1025px) {
  /* ゴールド帯(--2列)の金額行は中央、ネイビー帯(--3列)は左揃えのまま。
     flex なので text-align ではなく justify-content。 */
  .wm-price-row--2 .wm-price-plan__amount { justify-content: center; }
}

.wm-price-plan__num {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 36px; /* SP fs36（Figma） */
  line-height: 1.2;
  letter-spacing: 0.05em; /* Figma: PC44→2.2px / 40→2px / SP36→1.8px = 0.05em */
  color: var(--color-text-black);
}

@media (min-width: 1025px) {
  .wm-price-row--2 .wm-price-plan__num { font-size: 44px; } /* ゴールド帯 */
  .wm-price-row--3 .wm-price-plan__num { font-size: 40px; } /* ネイビー帯 */
}

.wm-price-plan__tax {
  color: var(--color-text-black); /* Figma #121212 */
}

.wm-price-plan__unit {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text-black);
}

.wm-price-feat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}

.wm-price-feat li {
  position: relative;
  padding-left: 1.2em;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-text-black);
}

@media (min-width: 1025px) {
  .wm-price-feat li { font-size: 15px; }
}

.wm-price-feat li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

.wm-price-notes {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: 6px;
}

.wm-price-notes li {
  position: relative;
  padding-left: 1.1em;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.6;
  color: var(--color-text-sub);
}

@media (min-width: 1025px) {
  .wm-price-notes li { font-size: 12px; }
}

.wm-price-notes li::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
}

/* =========================================================
 * ご利用の流れ + ミニCTA（グラデーションパネル）
 * ========================================================= */
.wm-flow-section {
  background: var(--color-bg-white);
  padding-block: 56px;
}

@media (min-width: 1025px) {
  .wm-flow-section { padding-block: 96px; }
}

.wm-flow {
  width: 100%;
  background: linear-gradient(180deg, #f6f8fb 0%, #f3f1ea 100%); /* 淡グラデ（トークン未定義） */
  border-radius: 60px; /* Figma実測 */
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

@media (min-width: 1025px) {
  .wm-flow {
    padding: 64px 72px;
    gap: 44px;
  }
}

.wm-flow__title {
  color: var(--color-navy);
  text-align: center;
}

.wm-flow-steps {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 1025px) {
  .wm-flow-steps {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
  }
}

.wm-flow-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  position: relative;
}

@media (min-width: 1025px) {
  .wm-flow-step {
    padding-inline: 12px; /* Figma: テキスト箱196px（step220 - 12*2） */
  }
  /* ステップ間のシェブロン */
  .wm-flow-step:not(:first-child)::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 54px;
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--color-text-sub-light);
    border-right: 2px solid var(--color-text-sub-light);
    transform: rotate(45deg);
  }
}

.wm-flow-step__title {
  color: var(--color-text-black);
  order: 1;
}

@media (min-width: 1025px) {
  .wm-flow-step__title { font-size: 18px; }
}

.wm-flow-step__icon {
  display: block;
  width: 88px;
  height: 88px;
  order: 2;
}

@media (min-width: 1025px) {
  .wm-flow-step__icon {
    width: 100px;
    height: 100px;
  }
}

.wm-flow-step__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wm-flow-step__text {
  color: var(--color-text-black); /* Figma #121212 */
  order: 3;
  text-align: left;
}

@media (min-width: 1025px) {
  .wm-flow-step__text { font-size: 14px; }
}

.wm-flow__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.wm-flow__note {
  color: var(--color-text-black); /* Figma #121212 */
  text-align: center;
}

/* =========================================================
 * よくある質問（faq.css と同値）
 * ========================================================= */
.wm-faq {
  background: var(--color-bg-white);
  padding-top: 20px;
  padding-bottom: 90px;
}

@media (min-width: 1025px) {
  .wm-faq {
    padding-top: 24px;
    padding-bottom: 120px;
  }
}

.wm-faq__group {
  margin-top: 48px;
}

@media (min-width: 1025px) {
  .wm-faq__group { margin-top: 64px; }
}

.wm-faq__cat {
  color: #212529; /* Figma実値 */
  margin-bottom: 20px;
}

@media (min-width: 1025px) {
  .wm-faq__cat {
    margin-bottom: 24px;
  }
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 1025px) {
  .faq-list { gap: 20px; }
}

.faq-item {
  background: transparent;
}

.faq-item__q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 16px 16px 16px 20px;
  background: var(--color-bg-blue-gray); /* #F0F2F5 */
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--transition-base);
}

@media (min-width: 1025px) {
  .faq-item__q {
    min-height: 72px;
    padding: 16px 16px 16px 28px;
  }
}

.faq-item__q::-webkit-details-marker { display: none; }

.faq-item__q:hover { background: #e7eaef; }

.faq-item__q-text {
  color: #212529; /* Figma実値 */
}

@media (min-width: 1025px) {
  .faq-item__q-text { font-size: 16px; }
}

.faq-item__icon {
  flex: 0 0 auto;
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-navy); /* #00103E */
}

@media (min-width: 1025px) {
  .faq-item__icon {
    width: 40px;
    height: 40px;
  }
}

.faq-item__icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--color-bg-white);
  border-bottom: 2px solid var(--color-bg-white);
  transform: translate(-50%, -70%) rotate(45deg);
  transition: transform var(--transition-base);
}

.faq-item[open] .faq-item__icon::before {
  transform: translate(-50%, -30%) rotate(225deg);
}

.faq-item__a {
  padding: 20px 20px 4px;
  color: var(--color-text-black);
}

@media (min-width: 1025px) {
  .faq-item__a {
    padding: 22px 28px 6px;
  }
}

.faq-item__a p { margin: 0; }

.wm-faq__more {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

@media (min-width: 1025px) {
  .wm-faq__more { margin-top: 56px; }
}

/* =========================================================
 * トークン外の一点物（フォント指定）
 * SP(base) → PC(@media) の順で記述。
 * ========================================================= */
/* --- 見出し系（Bold・lh1.4・ls.05em） --- */
.wm-twocol__title,.wm-reason__title,.wm-steps__caption,
.wm-support__label,.wm-prob-card__label,.wm-faq__cat,
.wm-sub__lead,.wm-sub__feat-heading,.wm-prob-card__text,
.wm-intro__text,.wm-step__label {
  font-weight: 700; line-height: 1.4; letter-spacing: 0.05em;
}
.wm-twocol__title  { font-size: 20px; }  /* → 32 (h2-bold/sp h3 bold) */
.wm-reason__title  { font-size: 20px; }  /* → 32 */
.wm-steps__caption { font-size: 20px; }  /* → 32 */
.wm-support__label { font-size: 24px; }  /* → 30 (h3-bold/sp h2 bold) */
.wm-prob-card__label { font-size: 18px; } /* → 24 (h5-bold/sp h?) */
.wm-faq__cat       { font-size: 20px; }  /* → 22 */
.wm-sub__lead      { font-size: 20px; }  /* → 22 (サービスcatch) */
.wm-sub__feat-heading { font-size: 20px; } /* → 22 */
.wm-prob-card__text { font-size: 16px; } /* → 20 (悩みカード本文Bold) */
.wm-intro__text    { font-size: 16px; }  /* → 20 (Bold) */
.wm-step__label    { font-size: 18px; }  /* → 20 */
@media (min-width: 1025px) {
  .wm-twocol__title,.wm-reason__title,.wm-steps__caption { font-size: 32px; }
  .wm-support__label { font-size: 30px; }
  .wm-prob-card__label { font-size: 24px; }
  .wm-faq__cat,.wm-sub__lead,.wm-sub__feat-heading { font-size: 22px; }
  .wm-prob-card__text,.wm-intro__text,.wm-step__label { font-size: 20px; }
}
/* --- 本文・メタ系 --- */
.wm-sub__text  { font-weight: 400; font-size: 14px; line-height: 24px; } /* → 16/lh28 */
.wm-sub__note  { font-weight: 400; font-size: 12px; line-height: 22px; } /* SP=12px/lh22 */
@media (min-width: 1025px) { .wm-sub__note { font-size: 14px; line-height: 24px; } } /* PC=14px/lh24（SPは12/22） */
.wm-step__sub  { font-weight: 400; font-size: 14px; line-height: 20px; }
.wm-case-card__tag { font-weight: 400; font-size: 12px; line-height: 22px; } /* SP lh22 → PC 14/lh1.7 */
.wm-price-plan__tax { font-weight: 700; font-size: 12px; line-height: 1.4; } /* → PC 12/lh28 (税込) */
.wm-flow__note { font-weight: 400; font-size: 10px; line-height: 22px; } /* SP fs10 */
.wm-hero__note { font-weight: 700; font-size: 12px; line-height: 22px; } /* Figma weight700 */
.wm-hero__lead { font-weight: 700; font-size: 14px; line-height: 22px; letter-spacing: 0; } /* SP fs14/lh22/ls0 */
@media (min-width: 1025px) {
  .wm-sub__text  { font-size: 16px; line-height: 25.6px; } /* Figma lh25.6 */
  .wm-case-card__tag { font-size: 14px; line-height: 1.7; } /* PC 14/lh23.8（SPの22上書き） */
  .wm-flow__note { font-size: 12px; } /* PC fs12 */
  .wm-hero__lead { font-size: 20px; line-height: 30px; letter-spacing: 1px; } /* PC fs20/ls1px */
}

/* letter-spacing / line-height 補正。step__label: SP=fw700, PC=fw600（Figma PC/SP差） */
.wm-step__label { letter-spacing: 0; font-weight: 700; line-height: 28px; } /* SP fs18/lh28/fw700/navy */
@media (min-width: 1025px) { .wm-step__label { font-weight: 600; } } /* PC fw600 */
/* steps__caption: SP=navy/ls1px, PC=#212529/ls0（Figma PC/SP差） */
.wm-steps__caption { letter-spacing: 1px; line-height: 1.5; color: #00103e; }
@media (min-width: 1025px) { .wm-steps__caption { letter-spacing: 0; color: #212529; } }

/* --- PC本文lh・見出しlh のFigma実値上書き（トークン既定と差）。
 *     base.css がページCSSより後に読み込まれるため、トークンclass付き要素は
 *     要素修飾（p./h4.）で特異度を上げないと .lg:t-* に負ける。 --- */
@media (min-width: 1025px) {
  p.wm-support__text { line-height: 25.6px; }   /* Figma lh25.6 */
  p.wm-can-card__text { line-height: 25.6px; }   /* Figma lh25.6 */
  h4.wm-can-card__title { line-height: 19.2px; }  /* Figma fs16/lh19.2 */
  .wm-prob-card__label { line-height: 40px; }   /* Figma fs24/lh40 */
  .wm-feat-cards--3col .wm-feat-card__title { font-size: 16px; line-height: 19.2px; } /* Figma fs16/lh19.2（3colのみ。2colはfs18/lh32のトークン既定） */
}
/* --- リード段落 --split/--center: 同一スタイル。SP=fw400/lh24, PC=fw500/lh27.2, 色#333 --- */
p.wm-sub__text--split, p.wm-sub__text--center { color: #333333; }
@media (min-width: 1025px) {
  p.wm-sub__text--split, p.wm-sub__text--center { font-weight: 500; line-height: 27.2px; }
}
/* --- 料金カード: 帯ごとにリード/税込の色・サイズが違う（Figma実値・PC/SP差あり） --- */
.wm-price-row--2 .wm-price-plan__lead { color: #3f3b3a; } /* ゴールド帯 */
.wm-price-row--3 .wm-price-plan__lead { color: #121212; font-size: 16px; line-height: 24px; } /* ネイビー帯: SP fs16/lh24 */
@media (min-width: 1025px) {
  .wm-price-row--3 .wm-price-plan__lead { line-height: 28px; } /* PC lh28 */
  .wm-price-row--2 .wm-price-plan__tax { font-size: 16px; line-height: 28px; } /* ゴールドPC税込 */
}
/* 税込: base(SP)=fs12/lh22/navy, ゴールド帯だけ#3f3b3a（全幅） --- */
.wm-price-plan__tax { line-height: 22px; }
.wm-price-row--2 .wm-price-plan__tax { color: #3f3b3a; }

/* --- 見出しグループ(bold・ls.05em)のSP実値: SP=ls0/各lh、PC=.05emと各lhを維持 --- */
.wm-prob-card__label { letter-spacing: 0; line-height: 28px; }  /* SP fs18/lh28 */
.wm-prob-card__text  { letter-spacing: 0; line-height: 24px; }  /* SP fs16/lh24 */
.wm-intro__text      { letter-spacing: 0; line-height: 24px; }  /* SP fs16/lh24 */
@media (min-width: 1025px) {
  .wm-prob-card__label { letter-spacing: .05em; line-height: 40px; } /* PC fs24/lh40 */
  .wm-prob-card__text  { letter-spacing: .05em; line-height: 1.4; }  /* PC */
  .wm-intro__text      { letter-spacing: .05em; line-height: 1.4; }  /* PC */
}
/* steps__closing: SP/PCともlh28（tokenのSP24を上書き） */
p.wm-steps__closing { line-height: 28px; }