/* =========================================================
   ホームページ制作サービス LP — 候補A「特集記事」 web-a.css
   高級誌の特集スプレッド。墨×生成りの紙×明朝体×朱（落款・章番号のみ）。
   自己完結: 本サイト共通の styles.css / web.css には依存しない。
   全クラス wlpa- 接頭辞（無接頭辞 .nowrap は jawrap.js の契約）。
   ========================================================= */

:root {
  /* --- 紙 --- */
  --paper:  #f5f2ec; /* 地（生成りの紙） */
  --paper2: #edeae1; /* 一段深い帯 */
  --hanshi: #faf8f3; /* 半紙・カード */
  --rule:   #ddd7c9; /* 細罫・枠線 */

  /* --- 墨 --- */
  --sumi:  #221e19; /* 濃墨: 見出し・ベタ（これより濃い色は足さない） */
  --sumi2: #4b4439; /* 中墨: 本文 */
  --sumi3: #756c5d; /* 淡墨: 注記・キャプション */
  --usu:   #cfc7b6; /* 薄墨: 大きな飾り漢数字 */

  /* --- 朱（落款・章番号・小さな印のみ） --- */
  --shu: #9e352a;

  /* --- タイポ --- */
  --mincho: "Zen Old Mincho", "Hiragino Mincho ProN", serif;
  --sans:   "Zen Kaku Gothic New", system-ui, sans-serif;
  --garamond: "Cormorant Garamond", var(--mincho);

  /* --- 余白 --- */
  --gap:   clamp(80px, 11vw, 148px);
  --pad-x: clamp(20px, 5vw, 68px);
  --maxw:  1180px;
}

/* ===== リセット ===== */
* { 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-color: var(--paper);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.045'/></feComponentTransfer></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  font-family: var(--sans);
  font-weight: 400;
  color: var(--sumi2);
  line-height: 2;
  word-break: normal;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(158, 53, 42, 0.16); color: var(--sumi); }
/* jawrap.js の契約: .nowrap / .sentence は各ページCSSで定義する。
   .sentence（文単位 inline-block）は「1行に収まらない段落は、行数が
   増えないなら『。』で折り返す」ルールの実装。収まらない文だけが
   丸ごと次行へ落ち、jawrap.js が1行に収まる文へ nowrap を動的付与する */
.nowrap { white-space: nowrap; }
.sentence { display: inline-block; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
:focus-visible {
  outline: 2px solid var(--shu);
  outline-offset: 3px;
}

/* ===== 共有: コンテナ / セクション ===== */
.wlpa-inner { max-width: var(--maxw); margin-inline: auto; }
.wlpa-sec {
  padding: var(--gap) var(--pad-x);
  border-top: 1px solid var(--rule);
}

/* ===== 共有: ボタン / 矢印リンク ===== */
.wlpa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.95em 2em;
  background: var(--sumi);
  color: var(--hanshi);
  font-family: var(--mincho);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  border: 1px solid var(--sumi);
  border-radius: 2px;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.wlpa-btn:hover {
  background: #100e0b;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px rgba(34, 30, 25, 0.7);
}
.wlpa-btn--lg { width: 100%; padding: 1.15em 2em; font-size: 1.05rem; }

.wlpa-arrowlink {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--mincho);
  font-weight: 500;
  color: var(--sumi);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
  transition: border-color 0.2s ease, gap 0.2s ease;
}
.wlpa-arrowlink svg {
  width: 34px; height: 12px;
  fill: none; stroke: var(--sumi); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.wlpa-arrowlink:hover { border-color: var(--sumi3); gap: 0.85em; }

/* ===== 共有: 章見出し ===== */
.wlpa-chap {
  display: grid;
  grid-template-columns: min-content 1fr;
  column-gap: clamp(22px, 3.5vw, 52px);
  align-items: start;
  margin-bottom: clamp(44px, 6vw, 76px);
}
.wlpa-chap-mark {
  display: flex;
  gap: 12px;
  padding-top: 8px;
}
.wlpa-chap-no {
  writing-mode: vertical-rl;
  font-family: var(--mincho);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.34em;
  color: var(--shu);
}
.wlpa-chap-label {
  writing-mode: vertical-rl;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(0.92rem, 1.6vw, 1.08rem);
  letter-spacing: 0.36em;
  color: var(--sumi3);
  border-right: 1px solid var(--rule);
  padding-right: 12px;
}
.wlpa-h2 {
  font-family: var(--mincho);
  font-weight: 900;
  font-size: clamp(1.9rem, 4.6vw, 3.15rem);
  line-height: 1.32;
  letter-spacing: 0.02em;
  color: var(--sumi);
  text-wrap: balance;
}
.wlpa-lead {
  margin-top: 1.2em;
  max-width: 52em;
  font-size: 1.02rem;
  color: var(--sumi2);
}

/* ===== 共有: ペン画図版 =====
   画像自体をアルファ透過（墨色の線のみ）に前処理済みのため、
   blend / filter / mask は不要。どの地色にもそのまま溶け込む。 */
.wlpa-plate img {
  width: 100%;
}

/* =========================================================
   ヘッダー
   ========================================================= */
.wlpa-hd {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* 帯・下罫は全幅、中身は 1180 に中央アンカー（超横長で両端に散らばらせない） */
  padding: 14px max(var(--pad-x), calc((100% - 1180px) / 2));
  background: rgba(245, 242, 236, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.wlpa-hd-brand { display: flex; align-items: baseline; gap: 12px; }
.wlpa-hd-name {
  font-family: var(--mincho);
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: 0.08em;
  color: var(--sumi);
}
.wlpa-hd-co { font-size: 0.72rem; color: var(--sumi3); letter-spacing: 0.14em; }
.wlpa-hd-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.wlpa-hd-links { display: flex; gap: clamp(16px, 2.2vw, 30px); }
.wlpa-hd-links a {
  font-family: var(--mincho);
  font-size: 0.94rem;
  color: var(--sumi2);
  letter-spacing: 0.06em;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.wlpa-hd-links a:hover { border-color: var(--sumi3); }
.wlpa-hd-cta {
  font-family: var(--mincho);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--hanshi);
  background: var(--sumi);
  border: 1px solid var(--sumi);
  border-radius: 2px;
  padding: 0.5em 1.2em;
  transition: background 0.2s ease;
}
.wlpa-hd-cta:hover { background: #100e0b; }

/* =========================================================
   ヒーロー（特集扉）
   ========================================================= */
.wlpa-hero {
  position: relative;
  overflow: hidden;
  /* コンテンツを中央アンカー: 超横長でも重層コンポジションがコンテナ内で完結する。
     .wlpa-in（1180）と内容端を揃えるため 1180 + 左右パディング分を上限にする。 */
  max-width: 1316px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: min-content minmax(0, 1fr);
  column-gap: clamp(18px, 3vw, 44px);
  align-content: center;
  min-height: min(94vh, 900px);
  padding: clamp(70px, 11vh, 128px) var(--pad-x) clamp(44px, 7vh, 84px);
}
.wlpa-hero-tag {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  writing-mode: vertical-rl;
  font-family: var(--mincho);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  letter-spacing: 0.5em;
  color: var(--sumi);
  display: flex;
  align-items: center;
  gap: 1.4em;
}
.wlpa-hero-tag-en {
  font-family: var(--garamond);
  font-style: italic;
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  color: var(--shu);
}
.wlpa-hero-plate {
  position: absolute;
  top: 50%;
  right: clamp(-60px, -3vw, -20px);
  transform: translateY(-50%);
  width: min(58vw, 780px);
  z-index: 0;
  pointer-events: none;
}
/* ヒーローの図版は見出しの下に敷くため、左側を淡くするフェザーだけ残す
   （画像自体はアルファ透過済み。blend / filter は不要） */
.wlpa-hero-plate img {
  width: 100%;
  opacity: 0.94;
  -webkit-mask-image: radial-gradient(
    ellipse 72% 80% at 62% 48%,
    #000 40%,
    rgba(0, 0, 0, 0.5) 68%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 72% 80% at 62% 48%,
    #000 40%,
    rgba(0, 0, 0, 0.5) 68%,
    transparent 100%
  );
}
.wlpa-hero-lede { grid-column: 2; grid-row: 1; position: relative; z-index: 2; max-width: none; }
.wlpa-hero-eyebrow {
  font-family: var(--mincho);
  font-size: 0.88rem;
  letter-spacing: 0.22em;
  color: var(--sumi3);
  margin-bottom: 1.1em;
  padding-left: 2px;
}
.wlpa-hero-title {
  font-family: var(--mincho);
  font-weight: 900;
  font-size: clamp(2.6rem, 8vw, 5.7rem);
  line-height: 1.16;
  letter-spacing: 0.015em;
  color: var(--sumi);
}
.wlpa-hl { display: block; }
.wlpa-hl--accent {
  position: relative;
  display: inline-block;
  margin-top: 0.06em;
}
.wlpa-hl--accent::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: 1.1em;
  bottom: 0.12em;
  height: 0.5em;
  background: rgba(158, 53, 42, 0.14);
  z-index: -1;
}
.wlpa-hero-lead {
  margin-top: 1.7em;
  /* 各文（最長31字）が1行に収まる幅にする（文の途中で折れて
     「けます。」だけの行ができるのを防ぐ） */
  max-width: 33em;
  font-size: 1.04rem;
  color: var(--sumi2);
}
.wlpa-hero-actions {
  margin-top: 2em;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  flex-wrap: wrap;
}
.wlpa-promise {
  margin-top: 2em;
  display: flex;
  flex-wrap: wrap;
  font-family: var(--mincho);
  font-size: 0.9rem;
  color: var(--sumi2);
  letter-spacing: 0.03em;
  /* 図版に掛かる部分の可読性: 紙色の靄を敷き、縁はフェザーで溶かす */
  position: relative;
  z-index: 1;
  width: fit-content;
  background: rgba(245, 242, 236, 0.88);
  box-shadow: 0 0 16px 14px rgba(245, 242, 236, 0.88);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.wlpa-promise li {
  position: relative;
  padding: 0 1.1em;
  border-left: 1px solid var(--rule);
}
.wlpa-promise li:first-child { padding-left: 0; border-left: 0; }
.wlpa-promise li::before {
  content: "✓";
  color: var(--shu);
  margin-right: 0.4em;
  font-size: 0.82em;
}

/* 目次 */
.wlpa-toc {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  z-index: 2;
  margin-top: clamp(38px, 6vh, 64px);
  max-width: 30em;
}
.wlpa-toc-h {
  font-family: var(--mincho);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.28em;
  color: var(--sumi);
  margin-bottom: 0.7em;
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  border-bottom: 2px solid var(--sumi);
  padding-bottom: 0.5em;
}
.wlpa-toc-h-en {
  font-family: var(--garamond);
  font-style: italic;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--sumi3);
}
.wlpa-toc-list { display: flex; flex-direction: column; }
.wlpa-toc-list a {
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  padding: 0.42em 0;
  font-family: var(--mincho);
  font-size: 1rem;
  color: var(--sumi2);
  border-bottom: 1px solid var(--rule);
  transition: color 0.2s ease;
}
.wlpa-toc-list a:hover { color: var(--sumi); }
.wlpa-toc-no {
  color: var(--shu);
  font-weight: 700;
  font-size: 0.9rem;
  min-width: 1.4em;
}
.wlpa-toc-label { letter-spacing: 0.06em; }
.wlpa-toc-dots {
  flex: 1;
  border-bottom: 1px dotted var(--sumi3);
  transform: translateY(-0.28em);
  opacity: 0.6;
}

/* =========================================================
   第一章 ご相談の前に
   ========================================================= */
.wlpa-worry-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  column-gap: clamp(20px, 4vw, 56px);
  align-items: center;
}
.wlpa-plate--worry {
  grid-column: 1;
  grid-row: 1;
  margin-right: clamp(-56px, -4vw, -28px);
  position: relative;
  z-index: 0;
}
.wlpa-checklist {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 1;
}
.wlpa-checklist li {
  position: relative;
  padding: 0.85em 0 0.85em 2.2em;
  border-bottom: 1px solid var(--rule);
  font-size: 1.06rem;
  color: var(--sumi);
  font-family: var(--mincho);
  font-weight: 500;
}
.wlpa-checklist li:first-child { border-top: 1px solid var(--rule); }
.wlpa-checklist li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 1.35em;
  width: 0.9em;
  height: 0.9em;
  border: 1px solid var(--sumi3);
  border-radius: 1px;
}
.wlpa-margin-note {
  grid-column: 2;
  grid-row: 2;
  margin-top: clamp(28px, 4vw, 44px);
  padding-left: clamp(20px, 3vw, 32px);
  border-left: 2px solid var(--shu);
  max-width: 42em;
}
.wlpa-margin-h {
  font-family: var(--mincho);
  font-weight: 700;
  font-size: 1.24rem;
  color: var(--sumi);
  margin-bottom: 0.5em;
}
.wlpa-margin-p { font-size: 0.98rem; color: var(--sumi2); }

/* =========================================================
   第二章 制作の流れ（中央スパイン＋交互スプレッド）
   ========================================================= */
.wlpa-steps { position: relative; }
/* ステップ間を貫く細い縦罫（接続） */
.wlpa-steps::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--rule);
  transform: translateX(-50%);
}
.wlpa-step {
  position: relative;
  padding-block: clamp(38px, 6vh, 74px);
}
/* 巨大な薄墨漢数字を見出しの背後に敷き、交互に左右へ振る */
.wlpa-step-num {
  position: absolute;
  top: clamp(-8px, -0.5vw, 0px);
  z-index: 0;
  font-family: var(--mincho);
  font-weight: 900;
  font-size: clamp(96px, 13vw, 168px);
  line-height: 0.78;
  color: var(--usu);
  pointer-events: none;
}
.wlpa-step:nth-child(odd) .wlpa-step-num { left: -0.05em; }
.wlpa-step:nth-child(even) .wlpa-step-num { right: -0.05em; }
.wlpa-step-body {
  position: relative;
  z-index: 1;
  max-width: min(94%, 64em);
  padding-left: clamp(30px, 4vw, 66px);
}
.wlpa-step:nth-child(even) .wlpa-step-body {
  margin-left: auto;
  padding-left: 0;
  padding-right: clamp(30px, 4vw, 66px);
}
.wlpa-step-kicker {
  font-family: var(--garamond);
  font-style: italic;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.24em;
  color: var(--shu);
  margin-bottom: 0.2em;
}
.wlpa-step-t {
  font-family: var(--mincho);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  color: var(--sumi);
  line-height: 1.4;
  margin-bottom: 0.7em;
}
.wlpa-step-p { font-size: 1.02rem; color: var(--sumi2); }
.wlpa-step-note {
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px solid var(--rule);
  font-size: 0.92rem;
  color: var(--sumi3);
}
.wlpa-plate--fig {
  margin-top: 1.8em;
  position: relative;
}
/* 承認印（STEP三: 図版の書類に押印した風） */
.wlpa-stamp {
  position: absolute;
  top: 0;
  right: 4%;
  width: clamp(120px, 25%, 250px);
  color: var(--shu);
  opacity: 0.92;
  transform: rotate(-12deg);
  pointer-events: none;
}
.wlpa-stamp svg { display: block; width: 100%; height: auto; }
.wlpa-stamp text {
  font-family: var(--mincho);
  font-weight: 700;
  fill: currentColor;
}
.wlpa-fig-cap {
  margin-top: 0.4em;
  font-family: var(--mincho);
  font-size: 0.86rem;
  color: var(--sumi3);
  letter-spacing: 0.04em;
}
.wlpa-fig-no {
  color: var(--shu);
  font-weight: 700;
  margin-right: 0.7em;
}
.wlpa-callout {
  margin-top: 1.6em;
  padding: 1.2em 1.4em;
  background: var(--hanshi);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--sumi);
  border-radius: 2px;
}
.wlpa-callout-h {
  font-family: var(--mincho);
  font-weight: 700;
  color: var(--sumi);
  margin-bottom: 0.4em;
}
.wlpa-callout-p { font-size: 0.94rem; color: var(--sumi2); }
.wlpa-callout-p a {
  color: var(--sumi);
  border-bottom: 1px solid var(--sumi3);
}

/* =========================================================
   第三章 料金（誌面スペック表）
   ========================================================= */
.wlpa-spec { width: 100%; border-collapse: collapse; }
.wlpa-spec-cap {
  text-align: left;
  font-family: var(--mincho);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.2em;
  color: var(--sumi3);
  padding-bottom: 0.8em;
  border-bottom: 2px solid var(--sumi);
}
.wlpa-spec tr { border-bottom: 1px solid var(--rule); }
.wlpa-spec th, .wlpa-spec td {
  padding: clamp(20px, 2.6vw, 30px) 0;
  vertical-align: baseline;
  text-align: left;
}
.wlpa-spec-name {
  width: 30%;
  font-weight: 400;
}
.wlpa-spec-name > .nowrap {
  display: block;
  font-family: var(--mincho);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--sumi);
  letter-spacing: 0.02em;
}
.wlpa-spec-term {
  display: block;
  margin-top: 0.5em;
  font-size: 0.8rem;
  color: var(--sumi3);
  letter-spacing: 0.04em;
}
.wlpa-spec-price { width: 27%; white-space: nowrap; padding-right: clamp(12px, 2vw, 28px); }
.wlpa-spec-num {
  font-family: var(--mincho);
  font-weight: 900;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  color: var(--sumi);
  letter-spacing: 0.01em;
}
.wlpa-spec-unit {
  font-family: var(--mincho);
  font-size: 0.92rem;
  color: var(--sumi3);
  margin-left: 0.3em;
}
.wlpa-spec-desc { font-size: 0.96rem; color: var(--sumi2); line-height: 1.85; }

.wlpa-maint { margin-top: clamp(44px, 6vw, 72px); }
.wlpa-maint-h {
  font-family: var(--mincho);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.14em;
  color: var(--sumi);
  margin-bottom: 0.4em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--sumi3);
}
.wlpa-maint-row {
  display: grid;
  grid-template-columns: 8em 10em 1fr;
  gap: 0.4em 1.4em;
  align-items: baseline;
  padding: 1em 0;
  border-bottom: 1px solid var(--rule);
}
.wlpa-maint-name {
  font-family: var(--mincho);
  font-weight: 700;
  color: var(--sumi);
  letter-spacing: 0.08em;
}
.wlpa-maint-price {
  font-family: var(--mincho);
  font-size: 1.08rem;
  color: var(--sumi);
  white-space: nowrap;
}
.wlpa-maint-desc { font-size: 0.92rem; color: var(--sumi2); }
.wlpa-domain {
  margin-top: 1.4em;
  font-size: 0.92rem;
  color: var(--sumi3);
}
.wlpa-domain b { color: var(--sumi2); font-weight: 700; }

.wlpa-note {
  margin-top: clamp(36px, 5vw, 56px);
  display: flex;
  gap: 1.1em;
  align-items: flex-start;
  padding: 1.3em 1.5em;
  background: var(--hanshi);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.wlpa-note-p { font-size: 0.95rem; color: var(--sumi2); }
.wlpa-note-p b { color: var(--sumi); font-weight: 700; }

.wlpa-price-actions { margin-top: clamp(40px, 5vw, 56px); }

/* =========================================================
   第四章 制作例（濃墨ベタ・全幅の反転ギャラリー）
   ========================================================= */
.wlpa-works {
  background: var(--sumi);
  color: var(--hanshi);
  padding: var(--gap) var(--pad-x);
}
.wlpa-chap--dark .wlpa-chap-no { color: #d98b7e; }
.wlpa-chap--dark .wlpa-chap-label {
  color: #b7ae9d;
  border-right-color: rgba(250, 248, 243, 0.22);
}
.wlpa-chap--dark .wlpa-h2 { color: var(--hanshi); }
.wlpa-chap--dark .wlpa-lead { color: #cfc7b9; }

.wlpa-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
}
.wlpa-demo {
  display: grid;
  grid-template-columns: min-content minmax(0, 1fr);
  column-gap: clamp(16px, 2vw, 26px);
  align-items: start;
}
.wlpa-mat {
  grid-column: 2;
  display: block;
  padding: clamp(10px, 1.4vw, 18px);
  background: var(--hanshi);
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.85);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wlpa-mat img { border: 1px solid rgba(34, 30, 25, 0.14); }
.wlpa-demo:hover .wlpa-mat {
  transform: translateY(-5px);
  box-shadow: 0 32px 60px -26px rgba(0, 0, 0, 0.9);
}
.wlpa-demo-meta {
  grid-column: 1;
  writing-mode: vertical-rl;
  display: flex;
  align-items: flex-start;
  gap: 1.1em;
  padding-top: 0.3em;
}
.wlpa-demo-cap {
  font-family: var(--mincho);
  font-weight: 700;
  font-size: clamp(0.96rem, 1.4vw, 1.14rem);
  letter-spacing: 0.16em;
  color: var(--hanshi);
  line-height: 1.7;
}
.wlpa-demo-d {
  grid-column: 2;
  margin-top: 1.1em;
  font-size: 0.94rem;
  color: #cfc7b9;
}

/* =========================================================
   第五章 問と答（角印スタイル）
   ========================================================= */
.wlpa-faq-list { border-top: 1px solid var(--rule); }
.wlpa-faq-item { padding: clamp(20px, 3vw, 30px) 0; border-bottom: 1px solid var(--rule); }
.wlpa-faq-q {
  display: flex;
  gap: 0.9em;
  align-items: flex-start;
  font-family: var(--mincho);
  font-weight: 700;
  font-size: clamp(1.06rem, 1.9vw, 1.3rem);
  color: var(--sumi);
  line-height: 1.6;
}
.wlpa-faq-a { display: flex; gap: 0.9em; align-items: flex-start; margin-top: 0.8em; }
.wlpa-qa {
  flex: none;
  width: 1.85em;
  height: 1.85em;
  display: grid;
  place-items: center;
  font-family: var(--mincho);
  font-weight: 700;
  font-size: 0.92em;
  /* 継承 line-height:2 のままだと行ボックスが箱より高く、字が下に寄る */
  line-height: 1;
  border-radius: 2px;
  background: var(--sumi);
  color: var(--hanshi);
  margin-top: 0.15em;
}
.wlpa-qa--a {
  background: transparent;
  color: var(--shu);
  border: 1.5px solid var(--shu);
}
.wlpa-faq-a-body { font-size: 1rem; color: var(--sumi2); }

/* =========================================================
   結び お問い合わせ
   ========================================================= */
.wlpa-contact { background: var(--paper2); }
/* 見出し（左）×手紙の図版（右）を上段に、フォームは下段全幅 */
.wlpa-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  column-gap: clamp(40px, 5vw, 76px);
  row-gap: clamp(28px, 4vw, 48px);
  align-items: center;
}
.wlpa-contact-grid .wlpa-panel { grid-column: 1 / -1; }
.wlpa-chap--end { margin-bottom: clamp(24px, 3vw, 36px); }
/* 結びの大見出しは左列（約半幅）に収まるサイズへ
   （「お気軽にご相談ください。」12字を1行に）。
   <br> 持ちの見出しに balance が効くと行長を揃えようと余計に折るため外す */
.wlpa-contact .wlpa-h2 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  text-wrap: wrap;
}
.wlpa-plate--letter { max-width: 400px; margin-top: 0; justify-self: center; }
.wlpa-panel {
  background: var(--hanshi);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: clamp(26px, 3.6vw, 44px);
  box-shadow: 0 30px 60px -40px rgba(34, 30, 25, 0.55);
}
/* フォームは全幅パネル内で氏名・メールを2列に（幅を活かして高さを抑える） */
.wlpa-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4em clamp(18px, 2.4vw, 28px);
}
.wlpa-form-row { margin-bottom: 0; min-width: 0; }
.wlpa-form-row--full,
.wlpa-form .wlpa-btn,
.wlpa-form-status {
  grid-column: 1 / -1;
}
.wlpa-form-label {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--mincho);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--sumi);
  letter-spacing: 0.06em;
  margin-bottom: 0.5em;
}
.wlpa-form-req {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--shu);
  border: 1px solid var(--shu);
  border-radius: 2px;
  padding: 0.1em 0.5em;
}
.wlpa-form-input, .wlpa-form-textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--sumi);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.75em 0.9em;
  line-height: 1.7;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wlpa-form-textarea { resize: vertical; min-height: 8em; }
.wlpa-form-input:focus, .wlpa-form-textarea:focus {
  outline: none;
  border-color: var(--sumi3);
  box-shadow: 0 0 0 3px rgba(117, 108, 93, 0.16);
}
.wlpa-form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wlpa-form-status {
  font-size: 0.92rem;
  color: var(--sumi3);
  text-align: center;
}
/* 空のうちは行ごと消す（ボタン下に無意味な余白を作らない） */
.wlpa-form-status:empty { display: none; }
.wlpa-form-status.is-error { color: var(--shu); }

/* =========================================================
   フッター
   ========================================================= */
.wlpa-ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: clamp(30px, 4vw, 44px) max(var(--pad-x), calc((100% - 1180px) / 2));
  background: var(--sumi);
  color: #cfc7b9;
}
.wlpa-ft-copy { font-family: var(--garamond); font-style: italic; letter-spacing: 0.1em; }
.wlpa-ft a {
  font-family: var(--mincho);
  color: var(--hanshi);
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(250, 248, 243, 0.3);
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
}
.wlpa-ft a:hover { border-color: var(--hanshi); }

/* =========================================================
   モーション（transform / opacity のみ・reduced-motion 尊重）
   JS が html.wlpa-anim を付与したときだけ初期状態を隠す。
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  html.wlpa-anim .wlpa-reveal {
    opacity: 0;
    transform: translateY(22px);
  }
  html.wlpa-anim .wlpa-reveal.wlpa-on {
    opacity: 1;
    transform: none;
    transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  /* 図版・パネルは opacity を保ったまま transform だけでゆっくり浮かぶ
     （＝常に描画され、隣接カラムとして版面に居続ける。淡いフェードは不要） */
  html.wlpa-anim .wlpa-plate.wlpa-reveal,
  html.wlpa-anim .wlpa-hero-plate.wlpa-reveal,
  html.wlpa-anim .wlpa-panel.wlpa-reveal { opacity: 1; transform: translateY(30px); }
  html.wlpa-anim .wlpa-plate.wlpa-reveal.wlpa-on,
  html.wlpa-anim .wlpa-hero-plate.wlpa-reveal.wlpa-on,
  html.wlpa-anim .wlpa-panel.wlpa-reveal.wlpa-on {
    transform: none;
    transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  /* 承認印: 図版が現れたあと、ぽんと押される */
  html.wlpa-anim .wlpa-plate--approved .wlpa-stamp { opacity: 0; }
  html.wlpa-anim .wlpa-plate--approved.wlpa-on .wlpa-stamp {
    animation: wlpa-stamp-in 0.5s cubic-bezier(0.2, 0.85, 0.3, 1.15) 0.65s both;
  }
  @keyframes wlpa-stamp-in {
    from {
      opacity: 0;
      transform: rotate(-12deg) scale(1.7);
    }
    to {
      opacity: 0.92;
      transform: rotate(-12deg) scale(1);
    }
  }
  /* ヒーロー大見出しは行ごとに静かに立ち上がる */
  html.wlpa-anim .wlpa-hero .wlpa-hl {
    opacity: 0;
    transform: translateY(20px);
  }
  html.wlpa-anim .wlpa-hero.wlpa-on .wlpa-hl {
    opacity: 1;
    transform: none;
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  html.wlpa-anim .wlpa-hero.wlpa-on .wlpa-hl:nth-child(2) { transition-delay: 0.12s; }
  html.wlpa-anim .wlpa-hero.wlpa-on .wlpa-hl:nth-child(3) { transition-delay: 0.24s; }
  /* 見出しのマーカー帯: 行が立ち上がったあと、左からすっと引く */
  html.wlpa-anim .wlpa-hero .wlpa-hl--accent::after {
    transform: scaleX(0);
    transform-origin: left center;
  }
  html.wlpa-anim .wlpa-hero.wlpa-on .wlpa-hl--accent::after {
    animation: wlpa-marker 0.7s cubic-bezier(0.65, 0, 0.35, 1) 1s forwards;
  }
  @keyframes wlpa-marker {
    to {
      transform: scaleX(1);
    }
  }
  /* 薄墨の巨大漢数字はわずかに遅れて出る */
  html.wlpa-anim .wlpa-step .wlpa-step-num {
    opacity: 0;
    transform: translateY(26px);
  }
  html.wlpa-anim .wlpa-step.wlpa-on .wlpa-step-num {
    opacity: 1;
    transform: none;
    transition: opacity 1.2s ease 0.15s, transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s;
  }
}

/* =========================================================
   レスポンシブ ①  タブレット（≤1000px）
   ========================================================= */
@media (max-width: 1000px) {
  .wlpa-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: clamp(56px, 9vh, 96px);
  }
  .wlpa-hero-tag {
    grid-row: 1;
    grid-column: 1;
    writing-mode: horizontal-tb;
    align-self: start;
    letter-spacing: 0.3em;
    margin-bottom: 1.4em;
    gap: 1em;
  }
  .wlpa-hero-lede { grid-column: 1; grid-row: 2; max-width: none; }
  /* 単段では図版が下に回り右の隣接カラムが無くなるため、リード文を広げて版面を使う */
  .wlpa-hero-lead { max-width: 42em; }
  .wlpa-hero-plate {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: min(80%, 560px);
    margin: 2.4em auto -1em auto;
    grid-column: 1;
    grid-row: 3;
  }
  .wlpa-hero-plate img { opacity: 0.9; }
  .wlpa-toc { grid-column: 1; grid-row: 4; max-width: none; margin-top: 2.2em; }

  .wlpa-worry-grid { grid-template-columns: 1fr; }
  .wlpa-plate--worry {
    grid-column: 1; grid-row: 1;
    margin-right: 0;
    /* 単段では左に寄せず中央へ（右の空きを作らない） */
    margin-inline: auto;
    width: min(520px, 100%);
    max-width: none;
  }
  .wlpa-checklist { grid-column: 1; grid-row: 2; margin-top: 1.4em; }
  .wlpa-margin-note { grid-column: 1; grid-row: 3; }

  .wlpa-gallery { grid-template-columns: 1fr; gap: clamp(40px, 7vw, 60px); }

  .wlpa-contact-grid { grid-template-columns: 1fr; }
  /* 単段では手紙の図版も中央へ */
  .wlpa-plate--letter { max-width: 420px; margin-inline: auto; }
}

/* =========================================================
   レスポンシブ ②  スマートフォン（≤820px）
   ========================================================= */
@media (max-width: 820px) {
  :root { --gap: clamp(60px, 13vw, 88px); }

  .wlpa-hd { flex-wrap: wrap; gap: 10px 18px; padding: 10px var(--pad-x); }
  .wlpa-hd-brand { flex-basis: 100%; }
  .wlpa-hd-nav { width: 100%; justify-content: space-between; }
  .wlpa-hd-links { gap: 14px; font-size: 0.86rem; flex-wrap: wrap; }
  .wlpa-hd-links a { font-size: 0.86rem; }

  /* 「ホームページも、」(8字)が1行に収まるサイズに抑える（助詞の単独行を防ぐ） */
  .wlpa-hero-title { font-size: clamp(2rem, 9.4vw, 2.75rem); }
  /* 大見出しも「お気軽にご相談ください。」(12字)が1行に収まる上限へ */
  .wlpa-h2,
  .wlpa-contact .wlpa-h2 { font-size: clamp(1.55rem, 7vw, 1.9rem); }
  /* 「。」折りルールはPC表示向け。狭い画面では文単位折りを解除して自然充填に
     （文の途中で「す。」だけの行ができるのを防ぐ） */
  .sentence { display: inline; }
  .wlpa-hero-plate { width: 100%; margin-bottom: 0; }
  .wlpa-hero-actions { gap: 16px; }
  .wlpa-btn { width: 100%; }
  .wlpa-hero-actions .wlpa-arrowlink { width: 100%; justify-content: center; }
  .wlpa-promise { flex-direction: column; gap: 0.2em; }
  .wlpa-promise li { padding: 0; border-left: 0; }

  /* 章見出し: 縦書きラベルを横書きへ */
  .wlpa-chap {
    grid-template-columns: 1fr;
    row-gap: 1.2em;
  }
  .wlpa-chap-mark {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0.9em;
    padding-top: 0;
  }
  .wlpa-chap-no, .wlpa-chap-label { writing-mode: horizontal-tb; }
  .wlpa-chap-label { border-right: 0; padding-right: 0; letter-spacing: 0.18em; }
  .wlpa-chap-no { letter-spacing: 0.2em; }

  /* 流れ: スパインを左へ、全ステップ左揃え。漢数字は左の余白に敷く */
  .wlpa-steps::before { left: 15px; }
  .wlpa-step { padding-block: clamp(28px, 8vw, 44px); }
  .wlpa-step-body,
  .wlpa-step:nth-child(even) .wlpa-step-body {
    max-width: none;
    margin-left: 0;
    padding-left: clamp(42px, 13vw, 60px);
    padding-right: 0;
  }
  .wlpa-step:nth-child(odd) .wlpa-step-num,
  .wlpa-step:nth-child(even) .wlpa-step-num {
    left: -0.06em;
    right: auto;
    top: clamp(8px, 2.4vw, 16px);
    font-size: clamp(60px, 20vw, 92px);
  }

  /* 料金表を積む */
  .wlpa-spec, .wlpa-spec tbody, .wlpa-spec tr, .wlpa-spec th, .wlpa-spec td {
    display: block;
    width: auto;
  }
  .wlpa-spec-cap { display: block; }
  .wlpa-spec tr { padding: clamp(20px, 6vw, 28px) 0; }
  .wlpa-spec th, .wlpa-spec td { padding: 0; }
  .wlpa-spec-price { margin: 0.5em 0 0.3em; }
  .wlpa-maint-row { grid-template-columns: 1fr; gap: 0.15em; padding: 0.9em 0; }
  .wlpa-maint-price { font-size: 1rem; }

  /* ギャラリー: 縦書きメタを横書きへ */
  .wlpa-demo { grid-template-columns: 1fr; row-gap: 1em; }
  .wlpa-mat { grid-column: 1; grid-row: 1; }
  .wlpa-demo-meta {
    grid-column: 1; grid-row: 2;
    writing-mode: horizontal-tb;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
  }
  .wlpa-demo-cap { line-height: 1.5; }
    .wlpa-demo-d { grid-column: 1; grid-row: 3; margin-top: 0; }

  .wlpa-form { grid-template-columns: 1fr; }

    
  .wlpa-ft { flex-direction: column; align-items: flex-start; gap: 12px; }
}