/* =========================================================
   ホームページ制作サービス LP — web.css
   デザインの正: web-design-spec.md（スケッチブック／ラフ案モチーフ）
   紙白 × 鉛筆グラファイト × 水色の方眼 × 赤鉛筆の朱（線／印のみ）
   自己完結ページ: 本サイト共通の styles.css / script.js には依存しない
   全クラス wlp- 接頭辞（chm-＝チャットと衝突しない）
   ========================================================= */

:root {
  /* --- 面 / 地 --- */
  --cover:    #e7e3d8; /* いちばん外側（机／表紙トーン） */
  --paper:    #fbfaf6; /* 画用紙（本文面・最も広い地） */
  --paper-2:  #f4f1e7; /* トーンを一段落とした帯・付箋台紙まわり */
  --grid:     rgba(64, 104, 148, 0.10); /* 水色の方眼罫（極薄・装飾） */
  --grid-2:   rgba(64, 104, 148, 0.14); /* 帯の中の方眼（少し濃いめ） */

  /* --- 鉛筆（文字・線） --- */
  --graphite: #35353b; /* 最濃：見出し・強い文字（これより濃い色は足さない） */
  --pencil:   #55555c; /* 本文 */
  --pencil-l: #6a6a72; /* 注記・キャプション・メタ（AA 4.5:1 確保） */
  --line:     #45454b; /* 手描き枠・アイコンのストローク */
  --hair:     #ddd8ca; /* 細い区切り罫（ベージュ寄り） */

  /* --- アクセント（赤鉛筆・校正の朱：線／印にのみ使用） --- */
  --mark:     #d24b37; /* 朱：丸囲み・下線・チェック・付箋の縁 */
  --mark-ink: #b0392a; /* 朱を“文字色／地”に使うとき（AA を満たす濃い朱） */
  --mark-wash: rgba(210, 75, 55, 0.12); /* マーカー／淡い塗り */

  /* --- 材質色（“もの”の色） --- */
  --sticky:   #f7e6a8; /* 付箋（黄）。文字はグラファイト */
  --sticky-b: #cfe3ef; /* 付箋（水色タブ）任意 */
  --tape:     rgba(120, 118, 110, 0.20); /* マスキングテープ（半透明グレー） */

  /* --- タイポ --- */
  /* 手書き系（Klee One / Yomogi）はユーザー指示で廃止。見出し・ラベルとも
     本文と同系のゴシックで統一し、ウェイトと字間でメリハリを付ける */
  --hand: "Zen Kaku Gothic New", system-ui, sans-serif; /* 見出し・数字 */
  --sans: "Zen Kaku Gothic New", system-ui, sans-serif; /* 本文 */
  --note: "Zen Kaku Gothic New", system-ui, sans-serif; /* 英字ラベル */

  /* --- 余白・角丸・影 --- */
  --gap:      clamp(56px, 8vw, 104px);
  --pad-x:    clamp(20px, 4vw, 56px);
  --radius:   14px;
  --shadow-s: 0 2px 10px rgba(53, 53, 59, 0.06);
  --shadow-m: 0 10px 30px rgba(53, 53, 59, 0.10);
  --shadow-note: 2px 4px 10px rgba(53, 53, 59, 0.14);

  /* 方眼（24px 基準）。surface ごとに背景色と併せて敷く */
  --grid-img:
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 24px);
  --grid-img-2:
    repeating-linear-gradient(0deg, var(--grid-2) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--grid-2) 0 1px, transparent 1px 24px);
}

/* ===== リセット ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  background: var(--cover);
  font-family: var(--sans);
  color: var(--pencil);
  line-height: 1.8;
  word-break: auto-phrase;
}
/* auto-phrase 非対応ブラウザ（Firefox/Safari）向けフォールバック */
html.jawrap-keepall body {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
::selection {
  background: var(--mark-wash);
  color: var(--graphite);
}
a {
  color: var(--mark-ink);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--mark);
}
ul,
ol {
  list-style: none;
}
button {
  font-family: inherit;
}
img,
svg {
  max-width: 100%;
}
img {
  height: auto;
  display: block;
}

/* フォーカス可視化（方眼地でも見える太さ） */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--mark);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===== 折り返しユーティリティ =====
   共有スクリプト assets/jawrap.js は無接頭辞の .sentence / .nowrap を
   走査・付与する契約のため、turnip / retime と同じクラス名で定義する
   （wlp- 接頭辞にすると jawrap の動的 nowrap 付与が効かなくなる） */
.nowrap {
  white-space: nowrap;
}
.sentence {
  display: inline-block;
}

/* ===== ページ器（1冊のノート） ===== */
.wlp-page {
  max-width: 1180px;
  margin: 0 auto;
  background-color: var(--paper);
  background-image: var(--grid-img);
  box-shadow: 0 0 60px rgba(53, 53, 59, 0.13);
  overflow: hidden;
}
html.jawrap-keepall .wlp-page {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ===== 付箋（Sticky note） ===== */
.wlp-sticky {
  position: relative;
  background: var(--sticky);
  color: var(--graphite);
  padding: 30px 30px 28px;
  border-radius: 3px;
  box-shadow: var(--shadow-note);
  transform: rotate(-1.4deg);
}
.wlp-sticky::before {
  /* マスキングテープ */
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 116px;
  height: 26px;
  transform: translateX(-50%) rotate(-1.6deg);
  background: var(--tape);
  border-left: 1px dashed rgba(120, 118, 110, 0.35);
  border-right: 1px dashed rgba(120, 118, 110, 0.35);
}

/* ===== マスキングテープ付き画像枠 ===== */
.wlp-tape {
  position: relative;
  display: inline-block;
}
.wlp-tape::before,
.wlp-tape::after {
  content: "";
  position: absolute;
  width: 108px;
  height: 30px;
  background: var(--tape);
  z-index: 2;
  pointer-events: none;
}
.wlp-tape::before {
  top: -14px;
  left: -10px;
  transform: rotate(-8deg);
}
.wlp-tape::after {
  bottom: -14px;
  right: -10px;
  transform: rotate(-6deg);
}

/* ===== ボタン ===== */
.wlp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 12px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    transform 0.12s ease;
  white-space: nowrap;
}
.wlp-btn:active {
  transform: translateY(1px);
}
/* 朱の主ボタン（白文字・AA 6:1） */
.wlp-btn--mark {
  background: var(--mark-ink);
  color: #fff;
  box-shadow: var(--shadow-s);
}
.wlp-btn--mark:hover {
  background: var(--mark);
  color: #fff;
}
/* 手描き枠のゴーストボタン */
.wlp-btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--graphite);
}
.wlp-btn--ghost:hover {
  background: rgba(53, 53, 59, 0.05);
  color: var(--graphite);
}
.wlp-btn--lg {
  font-size: 17px;
  padding: 16px 40px;
  min-height: 52px;
}

/* 装飾SVGの基本（stroke は currentColor で親の color から） */
.wlp-doodle {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===== セクション見出し（共通） ===== */
.wlp-kicker {
  font-family: var(--note);
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--pencil-l);
}
.wlp-h2 {
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 40px);
  line-height: 1.5;
  color: var(--graphite);
  letter-spacing: 0.01em;
  margin-top: 8px;
}
.wlp-lead {
  font-size: 16.5px;
  line-height: 2;
  color: var(--pencil);
  margin-top: 18px;
  max-width: 680px;
}

/* =========================================================
   ヘッダー
   ========================================================= */
.wlp-hd {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px var(--pad-x);
}
.wlp-hd::after {
  /* ノートの罫線（手描き破線） */
  content: "";
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: 0;
  height: 2px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--hair) 0 10px,
    transparent 10px 18px
  );
}
.wlp-hd-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.wlp-hd-name {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: 0.02em;
  color: var(--graphite);
  line-height: 1;
}
.wlp-hd-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  min-width: 0;
}
.wlp-hd-links {
  display: flex;
  gap: 22px;
}
.wlp-hd-links a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--pencil);
  letter-spacing: 0.02em;
}
.wlp-hd-links a:hover {
  color: var(--mark-ink);
}
.wlp-hd-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 20px;
  border-radius: 999px;
  border: none;
  background: var(--mark-ink);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.wlp-hd-cta:hover {
  background: var(--mark);
}

/* =========================================================
   ヒーロー
   ========================================================= */
.wlp-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
  padding: clamp(48px, 7vw, 84px) var(--pad-x) clamp(40px, 6vw, 72px);
}
.wlp-hero-tx {
  min-width: 0;
}
.wlp-hero-en {
  font-family: var(--note);
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--pencil-l);
}
.wlp-hero-title {
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--graphite);
  margin: 14px 0 20px;
}
.wlp-hero-title .wlp-circle {
  position: relative;
  white-space: nowrap;
}
.wlp-hero-title .wlp-circle > .wlp-doodle {
  position: absolute;
  left: -8px;
  right: -8px;
  top: -8px;
  bottom: -8px;
  width: auto;
  height: auto;
  color: var(--mark);
  pointer-events: none;
}
.wlp-hero-lead {
  font-size: 16.5px;
  line-height: 2.05;
  color: var(--pencil);
  max-width: 560px;
}
.wlp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}
.wlp-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.wlp-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--graphite);
  background: var(--paper-2);
  border: 1.5px solid var(--hair);
  border-radius: 999px;
  padding: 7px 15px;
  transform: rotate(-0.8deg);
}
.wlp-chip:nth-child(2) {
  transform: rotate(0.9deg);
}
.wlp-chip .wlp-doodle {
  width: 15px;
  height: 15px;
  color: var(--mark);
  flex: none;
}

/* ヒーロー右：ワイヤー → 実物 */
.wlp-hero-fig {
  min-width: 0;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.wlp-wire {
  width: 100%;
  max-width: 340px;
  color: var(--line);
}
.wlp-wire-sticky {
  font-family: var(--note);
  font-size: 13px;
  fill: var(--graphite);
  stroke: none;
}
.wlp-hero-arrow {
  width: 46px;
  height: 34px;
  color: var(--mark);
  /* デスクトップ（>1000px）は .wlp-hero-fig が縦積み → 矢印は下向き。
     横並びになる ≤1000px で rotate(0)、再び縦積みの ≤820px で rotate(90deg) に戻す */
  transform: rotate(90deg);
}
.wlp-hero-shot {
  position: relative;
  width: 100%;
  max-width: 420px;
}
.wlp-hero-shot img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-m);
  border: 1px solid var(--hair);
}
.wlp-hero-cap {
  font-family: var(--note);
  font-size: 13.5px;
  color: var(--pencil-l);
  text-align: center;
  margin-top: 14px;
}

/* ワイヤーの“描かれる”アニメ（reduced-motion では即完成） */
@media (prefers-reduced-motion: no-preference) {
  .wlp-wire path,
  .wlp-wire line,
  .wlp-wire rect,
  .wlp-wire polyline {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation: wlp-draw 1.6s ease forwards;
  }
  @keyframes wlp-draw {
    to {
      stroke-dashoffset: 0;
    }
  }
}

/* =========================================================
   帯（tinted band）— worry / price / cta
   方眼を再描画して器の方眼と連続させる
   ========================================================= */
.wlp-band {
  background-color: var(--paper-2);
  background-image: var(--grid-img-2);
}

/* =========================================================
   不安の共感
   ========================================================= */
.wlp-worry {
  padding: var(--gap) var(--pad-x);
}
.wlp-worry-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
  margin-top: 34px;
}
.wlp-worry-memo {
  min-width: 0;
}
.wlp-checklist {
  display: grid;
  row-gap: 16px;
}
.wlp-check {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--graphite);
}
.wlp-check .wlp-doodle {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 4px;
  color: var(--line);
}
.wlp-worry-answer {
  min-width: 0;
}
.wlp-worry-answer .wlp-sticky {
  transform: rotate(1deg);
}
.wlp-worry-answer-h {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.55;
  color: var(--graphite);
  margin-bottom: 12px;
}
.wlp-worry-answer-p {
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--graphite);
}

/* =========================================================
   制作の流れ 4ステップ（★主役）
   ========================================================= */
.wlp-flow {
  padding: var(--gap) var(--pad-x);
}
.wlp-flow-head {
  margin-bottom: 40px;
}
.wlp-steps {
  display: grid;
  row-gap: 28px;
  max-width: 860px;
  margin: 0 auto;
}
.wlp-step {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius);
  padding: 30px clamp(22px, 3.4vw, 40px) 32px;
  box-shadow: var(--shadow-s);
}
/* 手描き枠（ラフ枠） */
.wlp-step::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid var(--line);
  border-radius: 12px;
  opacity: 0.28;
  pointer-events: none;
}
/* めくって進むコネクタ（縦破線＋矢印） */
.wlp-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -28px;
  width: 2px;
  height: 28px;
  transform: translateX(-50%);
  background-image: repeating-linear-gradient(
    180deg,
    var(--hair) 0 7px,
    transparent 7px 13px
  );
}
.wlp-step-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  position: relative;
}
.wlp-step-no {
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1;
  color: var(--graphite);
  position: relative;
  flex: none;
}
/* 赤鉛筆の下線 */
.wlp-step-no::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: -6px;
  height: 4px;
  border-radius: 3px;
  background: var(--mark);
  transform: rotate(-1.2deg);
  opacity: 0.9;
}
/* h3 が番号＋タイトルを内包（SR で順序が読める）。見た目は従来どおり
   大きな手描き番号を見出し脇に置く＝h3 自体を横並び flex にする */
.wlp-step-t {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(20px, 2.8vw, 25px);
  line-height: 1.5;
  color: var(--graphite);
  letter-spacing: 0.01em;
}
.wlp-step-label {
  min-width: 0;
  padding-top: 0.15em; /* 大きな番号のベースラインへ視覚的に寄せる */
}
.wlp-step-ic {
  flex: none;
  width: 60px;
  height: 60px;
  color: var(--mark);
  margin-left: auto;
}
.wlp-step-body {
  margin-top: 18px;
}
.wlp-step-p {
  font-size: 15.5px;
  line-height: 2;
  color: var(--pencil);
  max-width: 660px;
}
.wlp-step-note {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--pencil-l);
  padding-left: 16px;
  border-left: 3px solid var(--hair);
  max-width: 640px;
}
/* STEP04 保守の任意性を強調する朱囲み */
.wlp-callout {
  margin-top: 20px;
  background: var(--mark-wash);
  border: 2px solid var(--mark);
  border-radius: 10px;
  padding: 18px 20px;
}
.wlp-callout-h {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.6;
  color: var(--graphite);
  margin-bottom: 8px;
}
.wlp-callout-p {
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--pencil);
}
.wlp-callout-p a {
  font-weight: 700;
}

/* =========================================================
   料金
   ========================================================= */
.wlp-price {
  padding: var(--gap) var(--pad-x);
}
.wlp-price-head {
  margin-bottom: 36px;
}
.wlp-price-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 860px;
  margin: 0 auto;
}
.wlp-plan {
  position: relative;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px 30px;
  box-shadow: var(--shadow-s);
  min-width: 0;
}
.wlp-plan-name {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 21px;
  color: var(--graphite);
}
.wlp-plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 12px 0 4px;
  flex-wrap: wrap;
}
.wlp-plan-num {
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 46px);
  line-height: 1;
  color: var(--mark-ink);
  white-space: nowrap;
}
.wlp-plan-unit {
  font-size: 14px;
  color: var(--pencil-l);
}
.wlp-plan-desc {
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--pencil);
  margin-top: 12px;
}
.wlp-plan-term {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--graphite);
  background: var(--sticky);
  border-radius: 3px;
  padding: 4px 12px;
  transform: rotate(-1deg);
}

.wlp-price-sub {
  max-width: 860px;
  margin: 30px auto 0;
}
.wlp-subhead {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 19px;
  color: var(--graphite);
  margin-bottom: 14px;
}
.wlp-maint {
  display: grid;
  gap: 0;
  border: 1px solid var(--hair);
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
}
.wlp-maint-row {
  display: grid;
  grid-template-columns: 150px 130px 1fr;
  gap: 18px;
  padding: 16px 22px;
  align-items: baseline;
}
.wlp-maint-row + .wlp-maint-row {
  border-top: 1px solid var(--hair);
}
.wlp-maint-name {
  font-weight: 700;
  color: var(--graphite);
  font-size: 15px;
}
.wlp-maint-price {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 18px;
  color: var(--mark-ink);
  white-space: nowrap;
}
.wlp-maint-desc {
  font-size: 14px;
  line-height: 1.85;
  color: var(--pencil);
  min-width: 0;
}
.wlp-domain {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--pencil);
}
.wlp-domain b {
  color: var(--mark-ink);
  font-family: var(--hand);
  font-weight: 700;
  font-size: 17px;
}

.wlp-price-note {
  max-width: 860px;
  margin: 26px auto 0;
}
.wlp-price-note .wlp-sticky {
  transform: rotate(-0.8deg);
}
.wlp-price-note-p {
  font-size: 15px;
  line-height: 1.95;
  color: var(--graphite);
}
.wlp-price-actions {
  max-width: 860px;
  margin: 30px auto 0;
  display: flex;
  justify-content: center;
}

/* =========================================================
   制作例
   ========================================================= */
.wlp-works {
  padding: var(--gap) var(--pad-x);
}
.wlp-works-head {
  margin-bottom: 34px;
  text-align: center;
}
.wlp-works-head .wlp-lead {
  margin-left: auto;
  margin-right: auto;
}
.wlp-works-fig {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.wlp-works-fig .wlp-tape {
  display: inline-block;
  transform: rotate(-1deg);
}
.wlp-works-fig img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-m);
  border: 1px solid var(--hair);
}
.wlp-works-cap {
  font-family: var(--note);
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--pencil-l);
  margin-top: 26px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   FAQ
   ========================================================= */
.wlp-faq {
  padding: var(--gap) var(--pad-x);
}
.wlp-faq-head {
  margin-bottom: 34px;
  text-align: center;
}
.wlp-faq-list {
  max-width: 720px;
  margin: 0 auto;
}
.wlp-faq-item {
  padding: 24px 0;
}
.wlp-faq-item + .wlp-faq-item {
  border-top: 2px dashed var(--hair);
}
.wlp-faq-q {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.6;
  color: var(--graphite);
}
.wlp-faq-qmark {
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 18px;
  color: var(--mark-ink);
  border: 2px solid var(--mark);
  border-radius: 50%;
  transform: rotate(-3deg);
}
.wlp-faq-a {
  font-size: 15px;
  line-height: 1.95;
  color: var(--pencil);
  margin-top: 12px;
  padding-left: 44px;
  max-width: 640px;
}

/* =========================================================
   CTA
   ========================================================= */
.wlp-cta {
  padding: var(--gap) var(--pad-x);
  text-align: center;
}
.wlp-cta-inner {
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  background: var(--sticky);
  color: var(--graphite);
  border-radius: 4px;
  padding: clamp(36px, 6vw, 56px) clamp(24px, 5vw, 52px);
  box-shadow: var(--shadow-note);
  transform: rotate(-0.6deg);
}
.wlp-cta-inner::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 150px;
  height: 30px;
  transform: translateX(-50%) rotate(-1.4deg);
  background: var(--tape);
  border-left: 1px dashed rgba(120, 118, 110, 0.35);
  border-right: 1px dashed rgba(120, 118, 110, 0.35);
}
.wlp-cta-h {
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(24px, 4.2vw, 34px);
  line-height: 1.5;
  color: var(--graphite);
}
.wlp-cta-p {
  font-size: 15.5px;
  line-height: 2;
  color: var(--graphite);
  margin: 18px auto 26px;
  max-width: 520px;
}
.wlp-cta-fine {
  font-family: var(--note);
  font-size: 13.5px;
  color: var(--pencil-l);
  margin-top: 18px;
}

/* =========================================================
   フッター
   ========================================================= */
.wlp-ft {
  background: var(--cover);
  padding: 34px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.wlp-ft-copy {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--pencil-l);
}
.wlp-ft a {
  font-size: 14px;
  color: var(--graphite);
  font-weight: 500;
}
.wlp-ft a:hover {
  color: var(--mark-ink);
}

/* =========================================================
   レスポンシブ（規約: 1000px を先、820px を後）
   ========================================================= */
@media (max-width: 1000px) {
  .wlp-hd-links {
    gap: 16px;
  }
  .wlp-hd-links a {
    font-size: 14px;
  }

  /* ヒーロー: 単段（図はテキスト下） */
  .wlp-hero {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .wlp-hero-lead {
    max-width: none;
  }
  .wlp-hero-fig {
    grid-template-columns: auto auto auto;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }
  .wlp-wire {
    max-width: 240px;
  }
  .wlp-hero-arrow {
    transform: none;
  }
  .wlp-hero-shot {
    max-width: 300px;
  }

  /* 不安: 単段 */
  .wlp-worry-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* 料金: 保守表の説明列を折る余地 */
  .wlp-maint-row {
    grid-template-columns: 130px 120px 1fr;
    gap: 14px;
  }
}

@media (max-width: 820px) {
  .wlp-hd {
    padding: 16px 20px;
  }
  .wlp-hd-links {
    display: none;
  }
  .wlp-hd-name {
    font-size: 21px;
  }

  /* ヒーロー: 図は縦に、ワイヤーは簡略に写真優先 */
  .wlp-hero-title br {
    display: none;
  }
  .wlp-hero-fig {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 12px;
  }
  .wlp-wire {
    max-width: 260px;
  }
  .wlp-hero-arrow {
    width: 34px;
    height: 40px;
    transform: rotate(90deg);
  }
  .wlp-hero-shot {
    max-width: 360px;
  }

  /* ステップ: 番号を見出し行にインライン化 */
  .wlp-step {
    padding: 24px 20px 26px;
  }
  .wlp-step-head {
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }
  .wlp-step-no {
    font-size: 34px;
  }
  .wlp-step-ic {
    width: 46px;
    height: 46px;
  }
  .wlp-step-p {
    font-size: 15px;
  }

  /* 料金: 制作カード1列、保守表は縦積み */
  .wlp-price-cards {
    grid-template-columns: 1fr;
  }
  .wlp-maint-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 18px;
  }
  .wlp-maint-price {
    font-size: 20px;
  }

  /* 制作例 */
  .wlp-works-fig .wlp-tape::after {
    display: none;
  }

  /* FAQ */
  .wlp-faq-a {
    padding-left: 0;
    font-size: 14.5px;
  }

  /* CTA ボタン全幅 */
  .wlp-cta .wlp-btn {
    width: 100%;
  }

  /* フッター縦積み */
  .wlp-ft {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}