/* ============================================================================
   editorial.css — 2026-07-27 デザイン改修レイヤー
   SEO改善プロLP v6.1〜v6.6 で確立した手法を、和のトンマナを保ったまま移植する。
   ・章立て（連番ゴースト＋キッカー＋左寄せH2＋二重飾り罫）
   ・1セクション1主役（白い面／墨の縦罫／墨バッジ／サイズ）
   ・書体の役割分担と約物詰め
   ・CTA 1色1役（緑のフラット化）
   ・下地の層（格子・和紙・セクション背景）
   ・章の区切り帯（中扉）
   tokens → base → sections → sp のあとに読み込む。既存ファイルは書き換えない。
   ========================================================================== */

:root {
  /* 欧文ラベル・章番号専用。明朝と骨格が揃うオールドスタイルのセリフ */
  --font-latin: "EB Garamond", "Zen Old Mincho", "Times New Roman", serif;
  --ghost-ink: rgba(26, 26, 26, .055);
  --rule-soft: rgba(168, 138, 76, .42);
}

/* ============================================================
   1. 章立て（secHead）
   ============================================================ */
.secHead { position: relative; margin-bottom: 56px; }
.secHead > * { position: relative; z-index: 1; }

.secHead__ghost {
  position: absolute;
  z-index: 0;
  top: -.46em;
  left: -.05em;
  color: var(--ghost-ink);
  font-family: var(--font-latin);
  font-size: clamp(6.5rem, 11.5vw, 13rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.secHead__kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  color: var(--kincha);
  font-family: var(--font-latin);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.secHead__kicker::before { content: ""; flex: none; width: 28px; height: 1px; background: var(--kincha); }
.secHead__kicker b {
  color: var(--muted);
  font-family: var(--font-mincho);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .18em;
}

.secHead h2 {
  max-width: none;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  word-break: auto-phrase;
  font-size: clamp(1.75rem, 3.05vw, 3rem);
  line-height: 1.5;
  letter-spacing: .02em;
  text-align: left;
}

.secHead__rule { position: relative; display: block; width: 96px; height: 3px; margin-top: 26px; background: var(--kincha); }
.secHead__rule::after { content: ""; position: absolute; top: 9px; left: 0; width: 46px; height: 1px; background: var(--sumi); }

.secHead__lead { max-width: 760px; margin: 26px 0 0; color: var(--muted); line-height: 1.95; }
.secHead__lead mark {
  padding: 0 .08em;
  color: inherit;
  background: linear-gradient(transparent 58%, rgba(168, 138, 76, .34) 0);
}

/* 中央寄せを保つ終端セクション用 */
.secHead--center { text-align: center; }
.secHead--center .secHead__kicker { justify-content: center; }
.secHead--center .secHead__kicker::before { display: none; }
.secHead--center h2 { text-align: center; }
.secHead--center .secHead__rule { margin-right: auto; margin-left: auto; }
.secHead--center .secHead__rule::after { left: 50%; transform: translateX(-50%); }
.secHead--center .secHead__lead { margin-right: auto; margin-left: auto; }
.secHead--center .secHead__ghost { left: 50%; transform: translateX(-50%); }

/* 見出し・リードは文節単位で折る（「と／いう方へ」のような折れを防ぐ） */
h2, h3, .secHead__lead, .mid-cta h3, .mid-cta p, .pain-conclusion, .service-conclusion,
.interlude__text, .menuTop__title, .priceMap__title, .beforeAfter__title { word-break: auto-phrase; }

/* ============================================================
   2. 約物詰め（明朝は palt が効かないため span で個別に詰める）
   .pt  読点・句点・閉じ括弧 ／ .ptL 開き括弧 ／ .ptM 中黒
   見出しの文言を変えたら span を付け直すこと。
   ============================================================ */
.pt  { margin-inline-end: -.42em; }
.ptL { margin-inline-start: -.38em; }
.ptM { margin-inline: -.2em; }

/* ============================================================
   3. 1セクション1主役
   ============================================================ */
.is-lead {
  position: relative;
  background-color: var(--white-paper) !important;
  background-image: var(--paper-noise) !important;
  box-shadow: 0 24px 46px rgba(50, 38, 17, .15), 0 3px 8px rgba(50, 38, 17, .1) !important;
}
.is-lead::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--sumi);
}
.lead-badge {
  display: inline-block;
  padding: 5px 14px;
  color: #fff;
  background: var(--sumi);
  font-family: var(--font-mincho);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  white-space: nowrap;
}

/* ============================================================
   4. CTA 1色1役（緑のフラット化）
   グラデーションと4pxのベベルを外し、和紙の上で浮かない単色にする。
   高彩度色はCTAだけに集中させ、強調は朱と墨で行う。
   ============================================================ */
.btn-primary {
  background: var(--cta);
  border: 0;
  border-bottom: 0;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 10px 22px rgba(18, 113, 62, .22);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--cta-dark);
  filter: none;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 13px 26px rgba(18, 113, 62, .28);
}
.btn-primary:active { transform: translateY(1px); box-shadow: 0 4px 10px rgba(18, 113, 62, .22); }
.btn-secondary { border-radius: 3px; box-shadow: 0 6px 14px rgba(50, 38, 17, .08); }
.btn-secondary:hover, .btn-secondary:focus-visible { box-shadow: 0 9px 18px rgba(50, 38, 17, .1); }

/* ============================================================
   5. 下地の層
   ============================================================ */
/* 組子格子の目。中央からフェードさせ、本文の下に静かに敷く */
.sec--lattice > .section-inner { position: relative; z-index: 1; }
.sec--lattice::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(168, 138, 76, .16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(168, 138, 76, .16) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000 12%, transparent 74%);
  mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000 12%, transparent 74%);
  pointer-events: none;
}

/* セクション背景写真。上端／下端からフェードさせ、乗算で紙に沈める */
.secBg {
  position: absolute;
  z-index: 0;
  left: 0;
  width: 100%;
  height: 46%;
  object-fit: cover;
  opacity: .1;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.secBg--top {
  top: 0;
  -webkit-mask-image: linear-gradient(#000 8%, transparent 96%);
  mask-image: linear-gradient(#000 8%, transparent 96%);
}
.secBg--bottom {
  bottom: 0;
  -webkit-mask-image: linear-gradient(transparent 4%, #000 92%);
  mask-image: linear-gradient(transparent 4%, #000 92%);
}

/* アクセント素材と中扉・背景写真は、いずれも枠外へはみ出させない。
   FVはSPで overflow:visible を要するため対象外にする */
.sec:not(.fv), .interlude { overflow: hidden; }

/* 余白側に置くアクセント素材。矩形の縁を減衰させて貼り付け感を消す */
.accArt {
  position: absolute;
  z-index: 0;
  width: clamp(160px, 17vw, 280px);
  opacity: .5;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 34%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 34%, transparent 78%);
  pointer-events: none;
}

/* ============================================================
   6. 章の区切り帯（中扉）
   誌面の中扉。写真＋一文で「章が変わった」ことを見せる。
   素材が生成り基調のため、白抜きではなく墨文字で載せる。
   ============================================================ */
.interlude {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(220px, 26vw, 360px);
  overflow: hidden;
  background: var(--kinari);
}
.interlude__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.interlude__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(245, 240, 228, .93) 0 30%, rgba(245, 240, 228, .62) 56%, rgba(245, 240, 228, .3));
}
.interlude__body { position: relative; z-index: 2; width: min(1120px, calc(100% - 48px)); }
.interlude__label {
  margin-bottom: 12px;
  color: var(--kincha);
  font-family: var(--font-latin);
  font-size: .8rem;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.interlude__text {
  max-width: 26em;
  word-break: auto-phrase;
  margin: 0;
  color: var(--sumi);
  font-family: var(--font-mincho);
  font-size: clamp(1.25rem, 2.5vw, 2.15rem);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .04em;
}

/* ============================================================
   7. セクション個別の調整
   ============================================================ */

/* 01 課題 --------------------------------------------------- */
.pain .secHead h2 { white-space: normal; font-size: clamp(1.75rem, 3.05vw, 3rem); }
.pain-card { min-height: 0; }
.pain-card h3 { text-align: left; }
.pain-card h3::after { left: 0; width: 46px; height: 2px; background: var(--sumi); }
.pain-card .circle-kanji { margin-left: 0; }

/* 02 調査 --------------------------------------------------- */
.survey .secHead { margin-bottom: 46px; }
.survey .secHead h2 { font-size: clamp(1.8rem, 3.2vw, 3.2rem); }

/* 03 サービス ------------------------------------------------ */
.service .secHead { margin-bottom: 50px; }
.service .corner-card.is-lead { background-color: var(--white-paper) !important; }
.service .corner-card .lead-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); }

/* 04 選ばれる理由 --------------------------------------------- */
.why-card.is-lead { border-top-color: var(--sumi); }
.why-card.is-lead h3 { font-size: clamp(1.4rem, 2.05vw, 2rem); }
.why-card .lead-badge { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); }
.why-card.is-lead { padding-top: 62px; }

/* 06 比較 ---------------------------------------------------- */
/* 見出し帯の朱ベタをやめ、自社列だけを墨で主役にする（1色1役） */
.compare thead th { color: var(--muted); background: #E7E0CE; font-size: 1.05em; font-weight: 700; }
.compare thead th:first-child { color: var(--muted); background: #EFE9DA; }
.compare thead th:last-child { color: #fff; background: var(--sumi); }
.compare tbody td:last-child { color: var(--sumi); background: rgba(184, 50, 30, .05); font-weight: 700; }
.compare tbody td:last-child strong,
.compare tbody td:last-child b { color: var(--shu); }

/* 07 進め方 --------------------------------------------------- */
.flow-badge { color: #fff; background: var(--sumi); border-color: var(--sumi); }
/* 時間軸（PCのみ） */
.flow-axis {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr) 28px) minmax(0, 1fr);
  margin-bottom: 26px;
}
.flow-axis::before { content: ""; position: absolute; top: 5px; right: 4%; left: 4%; height: 1px; background: var(--rule-soft); }
.flow-axis span {
  position: relative;
  grid-column: span 2;
  padding-top: 18px;
  color: var(--muted);
  font-family: var(--font-mincho);
  font-size: .8rem;
  letter-spacing: .08em;
  text-align: center;
}
.flow-axis span:last-child { grid-column: span 1; }
.flow-axis span::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 7px;
  height: 7px;
  background: var(--kincha);
  border-radius: 50%;
  transform: translateX(-50%);
}
.flow-repeat { margin: 34px 0 0; color: var(--muted); font-family: var(--font-mincho); font-size: .94rem; text-align: center; }

/* 08 プラン --------------------------------------------------- */
.plan-card.is-lead.is-dashed {
  background-color: var(--white-paper) !important;
  border: 1px solid rgba(168, 138, 76, .2);
  border-radius: 0 0 4px 4px;
  clip-path: polygon(12% 0, 88% 0, 100% 8%, 100% 100%, 0 100%, 0 8%);
}
.plan-card .lead-badge { position: absolute; top: 54px; left: 50%; transform: translateX(-50%); }
.plan-card.is-lead h3 { margin-top: 62px; font-size: clamp(1.3rem, 1.9vw, 1.75rem); }

/* 09 お客様の声 ----------------------------------------------- */
.voices .secHead { margin-bottom: 52px; }

/* 10 AI職人 --------------------------------------------------- */
.member-card { position: relative; }
.member-index {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  padding: 6px 12px;
  color: var(--white-paper);
  background: rgba(26, 26, 26, .82);
  font-family: var(--font-latin);
  font-size: .74rem;
  letter-spacing: .22em;
}
.member-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; padding: 0; list-style: none; }
.member-tags li {
  padding: 3px 10px;
  color: #7b5c1c;
  border: 1px solid var(--rule-soft);
  font-family: var(--font-mincho);
  font-size: .76rem;
  letter-spacing: .04em;
}

/* 11 よくある質問 --------------------------------------------- */
.faq-group { margin-bottom: 46px; }
.faq-group:last-of-type { margin-bottom: 0; }
.faq-group__label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
  color: var(--kincha);
  font-family: var(--font-latin);
  font-size: .78rem;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.faq-group__label::before { content: ""; flex: none; width: 24px; height: 1px; background: var(--kincha); }
.faq-group__label b { color: var(--muted); font-family: var(--font-mincho); font-size: .92rem; font-weight: 700; letter-spacing: .14em; }

/* ============================================================
   7-b. 05 メニュー — 面積の再設計
   4画面続く点線リーダーの一覧を、
   ①調査に紐づく主役 ②価格の見取り図 ③絞り込み ④2段組の索引
   に組み替える。45件は減らさない（網羅性が強みのため）。
   ============================================================ */
.menu-inner { width: min(1240px, calc(100% - 48px)); }

/* --- 主役：調査で多かった四つの仕事 --- */
.menuTop {
  position: relative;
  margin: 0 0 56px;
  padding: 44px 46px 38px;
  background-color: var(--white-paper);
  background-image: var(--paper-noise);
  border: 1px solid rgba(168, 138, 76, .2);
}
.menuTop .lead-badge { position: absolute; top: -14px; left: 46px; }
.menuTop__label { margin-bottom: 6px; color: var(--shu); font-family: var(--font-mincho); font-size: .86rem; font-weight: 700; letter-spacing: .1em; }
.menuTop__title { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--rule-soft); font-size: clamp(1.25rem, 2vw, 1.8rem); }
.menuTop__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; padding: 0; margin: 0; list-style: none; }
.menuTop__row { display: flex; flex-direction: column; }
.menuTop__row + .menuTop__row { border-left: 1px solid var(--rule-soft); padding-left: 26px; }
.menuTop__art { display: block; width: 100%; max-width: 168px; margin: 0 auto 6px; }
.menuTop__art img { width: 100%; height: auto; mix-blend-mode: multiply; }
.menuTop__job { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--sumi); }
.menuTop__job b { font-family: var(--font-mincho); font-size: clamp(1.02rem, 1.3vw, 1.2rem); font-weight: 700; }
.menuTop__job span { flex: none; color: var(--shu); font-family: var(--font-mincho); font-size: 1.05rem; font-weight: 700; }
.menuTop__items { padding: 0; margin: 0; list-style: none; }
.menuTop__items li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 9px 0; border-bottom: 1px dotted rgba(74, 74, 68, .35); font-family: var(--font-mincho); font-size: .9rem; line-height: 1.5; }
.menuTop__items b { flex: none; font-size: .95rem; }
.menuTop__note { margin: 24px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.7; }

/* --- 価格の見取り図（紙の上に図と文字をコードで刷る） --- */
.priceMap {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 40px;
  align-items: center;
  margin: 0 0 52px;
  padding: 42px 48px;
  background: url("../assets/art/paper-wide-inner.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 3px 1px rgba(50, 38, 17, .1)) drop-shadow(0 24px 36px rgba(50, 38, 17, .13));
}
.priceMap__label { display: block; margin-bottom: 10px; color: var(--kincha); font-family: var(--font-latin); font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; }
.priceMap__title { margin: 0 0 12px; font-family: var(--font-mincho); font-size: clamp(1.15rem, 1.75vw, 1.6rem); font-weight: 700; line-height: 1.6; }
.priceMap__title b { color: var(--shu); font-size: 1.7em; font-weight: 700; letter-spacing: -.02em; }
.priceMap__note { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.7; }
.priceMap__bars { display: grid; gap: 9px; padding: 0; margin: 0; list-style: none; }
.priceMap__bars li { display: grid; grid-template-columns: 74px minmax(0, 1fr) 44px; align-items: center; gap: 12px; font-family: var(--font-mincho); }
.priceMap__price { font-size: .88rem; }
.priceMap__bar { position: relative; height: 15px; background: rgba(168, 138, 76, .14); }
.priceMap__bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--n) / 17 * 100%); background: var(--sumi); }
.priceMap__bars li:nth-child(-n+2) .priceMap__bar::after { background: var(--shu); }
.priceMap__count { font-size: .86rem; text-align: right; }

/* --- カテゴリ絞り込み --- */
.menuFilter { margin-bottom: 34px; padding-bottom: 26px; border-bottom: 1px solid var(--rule-soft); }
.menuFilter__label { margin-bottom: 12px; color: var(--muted); font-family: var(--font-mincho); font-size: .84rem; font-weight: 700; letter-spacing: .1em; }
.menuFilter__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.menuChip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-height: 40px;
  padding: 7px 15px;
  color: var(--sumi);
  background: rgba(252, 250, 244, .8);
  border: 1px solid var(--rule-soft);
  font-family: var(--font-mincho);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.menuChip b { color: var(--kincha); font-family: var(--font-latin); font-size: .82rem; font-weight: 500; }
.menuChip:hover, .menuChip:focus-visible { border-color: var(--sumi); }
.menuChip.is-active { color: var(--white-paper); background: var(--sumi); border-color: var(--sumi); }
.menuChip.is-active b { color: rgba(252, 250, 244, .62); }
.menu-category[hidden] { display: none; }

/* --- 索引（2段組） --- */
.menu-category { margin-bottom: 46px; }
.menu-category__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid var(--kincha); }
.menu-category__num { flex: none; color: var(--kincha); font-family: var(--font-latin); font-size: 1.1rem; letter-spacing: .1em; }
.menu-category h3 { flex: 1; margin: 0; padding: 0; color: #8b691e; border: 0; font-size: clamp(1.35rem, 2.2vw, 1.95rem); }
.menu-category h3::after { display: none; }
.menu-category__meta { flex: none; margin: 0; color: var(--muted); font-family: var(--font-mincho); font-size: .84rem; letter-spacing: .04em; white-space: nowrap; }
.menu-category__meta b { color: var(--sumi); font-size: 1.1rem; font-weight: 700; }
.menu-category__meta span { margin: 0 6px; color: var(--rule-soft); }
.menu-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.menu-item { padding: 11px 0; border-bottom: 1px dotted rgba(74, 74, 68, .28); }
.menu-item-head { font-size: clamp(.98rem, 1.35vw, 1.14rem); }

/* --- 導入前後の対比図（既出の事例数値を図に組み直したもの） --- */
.beforeAfter {
  margin: 60px 0 0;
  padding: 42px 48px 38px;
  background: url("../assets/art/paper-wide-inner.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 3px 1px rgba(50, 38, 17, .1)) drop-shadow(0 24px 36px rgba(50, 38, 17, .13));
}
.beforeAfter__head { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--rule-soft); }
.beforeAfter__label { display: block; margin-bottom: 8px; color: var(--kincha); font-family: var(--font-latin); font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; }
.beforeAfter__title { margin: 0 0 8px; font-family: var(--font-mincho); font-size: clamp(1.15rem, 1.75vw, 1.55rem); font-weight: 700; }
.beforeAfter__note { max-width: 60em; margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.7; text-align: left; }
/* 凡例。3つの意味（導入前／残る作業／消える分）を先に固定してから図を読ませる */
.beforeAfter__legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 22px; }
.beforeAfter__key { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .74rem; letter-spacing: .04em; }
.beforeAfter__key::before { content: ""; width: 22px; height: 10px; flex: none; }
.beforeAfter__key--before::before { background: rgba(74, 74, 68, .15); box-shadow: inset 0 0 0 1px rgba(74, 74, 68, .2); }
.beforeAfter__key--after::before { background: var(--sumi); }
.beforeAfter__key--cut::before {
  background: repeating-linear-gradient(-48deg, rgba(184, 50, 30, .30) 0 2px, transparent 2px 6px);
  box-shadow: inset 0 0 0 1px rgba(184, 50, 30, .3);
}

.beforeAfter__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 44px; padding: 0; margin: 0; list-style: none; }
.beforeAfter__list > li {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name cut" "before before" "after after";
  align-items: end;
  column-gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(168, 138, 76, .26);
}

.beforeAfter__name {
  grid-area: name;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 9px;
  font-family: var(--font-mincho);
  font-size: .95rem;
  font-weight: 700;
  text-align: left;
  word-break: auto-phrase;
}
.beforeAfter__name i {
  flex: none;
  color: var(--kincha);
  font-family: var(--font-latin);
  font-size: .82rem;
  font-style: normal;
  letter-spacing: .08em;
}

/* 削減率＝この図の主役。数字だけ一段大きくし、単位は小さく添える */
.beforeAfter__cut { grid-area: cut; margin: 0 0 7px; color: var(--sumi); font-family: var(--font-mincho); line-height: 1; white-space: nowrap; }
.beforeAfter__cut b { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; }
.beforeAfter__cut span { margin-left: 1px; font-size: .82rem; font-weight: 700; }

.beforeAfter__row { display: flex; align-items: center; gap: 10px; margin: 0; }
.beforeAfter__row--before { grid-area: before; margin-bottom: 5px; }
.beforeAfter__row--after  { grid-area: after; }

/* 値はバーの外に出す。中に入れると min-width が必要になり、比率が狂う
   （旧実装は min-width:8.5em で 8.3% のバーが 19% 相当に描かれていた） */
.beforeAfter__val {
  flex: none;
  width: 7em;
  text-align: right;
  /* 折り返すとバーの開始位置が左右カラムでズレるため、必ず1行に収める */
  white-space: nowrap;
  font-family: var(--font-mincho);
  font-size: .82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.beforeAfter__row--after .beforeAfter__val { color: var(--sumi); font-size: .92rem; font-weight: 700; }

.beforeAfter__track { position: relative; flex: 1 1 auto; height: 22px; min-width: 0; }
.beforeAfter__track i { position: absolute; top: 0; bottom: 0; left: 0; display: block; }

.beforeAfter__row--before .beforeAfter__track i { width: 100%; background: rgba(74, 74, 68, .15); }

/* 導入後の行：トラック全体に朱の斜線＝消える分。その上に墨のバー＝残る作業。
   バーの終端に朱の縦線を立て、「ここで切れる」ことを一点で示す */
.beforeAfter__row--after .beforeAfter__track {
  background: repeating-linear-gradient(-48deg, rgba(184, 50, 30, .22) 0 2px, transparent 2px 6px);
  box-shadow: inset 0 0 0 1px rgba(184, 50, 30, .16);
}
.beforeAfter__row--after .beforeAfter__track i {
  width: calc(var(--after) * 1%);
  background: var(--sumi);
  box-shadow: 1px 0 0 rgba(184, 50, 30, .85), 3px 0 7px rgba(50, 38, 17, .16);
}

/* ============================================================
   7-c. FV の安心材料（既出の事実のみ）
   ============================================================ */
.fv-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  width: fit-content;
  padding: 0;
  margin: 22px 0 0;
  list-style: none;
  border: 1px solid rgba(168, 138, 76, .45);
  background: rgba(252, 250, 244, .72);
}
.fv-proof li { display: flex; align-items: baseline; gap: 7px; padding: 11px 20px; font-family: var(--font-mincho); line-height: 1.4; }
.fv-proof li + li { border-left: 1px solid rgba(168, 138, 76, .45); }
.fv-proof b { font-size: 1.06rem; font-weight: 700; letter-spacing: .01em; }
.fv-proof span { color: var(--muted); font-size: .8rem; }

/* 11 FAQ の余白側アクセント */
.accArt--faq { top: 74px; right: 0; width: clamp(150px, 15vw, 240px); opacity: .42; }

/* 12 問い合わせ：フォーム直前に相談の3点を再掲する */
.closing .secHead__ghost { color: rgba(255, 255, 255, .06); }
.closing .secHead__kicker { color: rgba(214, 194, 148, .9); }
.closing .secHead__kicker b { color: rgba(255, 255, 255, .68); }
.closing .secHead__kicker::before { background: rgba(214, 194, 148, .6); }
.closing .secHead__rule { background: var(--kincha); }
.closing .secHead__rule::after { background: rgba(255, 255, 255, .55); }
.closing-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(900px, 100%);
  padding: 0;
  margin: 0 auto 44px;
  list-style: none;
  border-top: 1px solid rgba(252, 250, 244, .22);
  border-bottom: 1px solid rgba(252, 250, 244, .22);
}
.closing-points li { padding: 20px 24px; text-align: center; }
.closing-points li + li { border-left: 1px solid rgba(252, 250, 244, .18); }
.closing-points b { display: block; margin-bottom: 5px; color: #fff; font-family: var(--font-mincho); font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 700; }
.closing-points span { color: rgba(255, 255, 255, .68); font-size: .78rem; }

/* ============================================================
   8. SP の作り分け
   ============================================================ */
@media (max-width: 900px) {
  .secHead { margin-bottom: 38px; }
  .secHead__ghost { font-size: clamp(4.6rem, 20vw, 7.5rem); top: -.4em; }
  .secHead h2 { font-size: clamp(1.42rem, 6.2vw, 2rem); line-height: 1.6; }
  .secHead__kicker { margin-bottom: 13px; font-size: .74rem; letter-spacing: .22em; }
  .secHead__lead { margin-top: 20px; font-size: .94rem; }
  .secHead__rule { width: 76px; margin-top: 20px; }

  .flow-axis { display: none; }
  .accArt { display: none; }
  .interlude { min-height: 190px; }
  .interlude__scrim { background: linear-gradient(180deg, rgba(245, 240, 228, .9) 0 46%, rgba(245, 240, 228, .58)); }
  .interlude__text { max-width: none; }

  .is-lead::after { width: 3px; }
  .why-card.is-lead { padding-top: 56px; }

  /* 05 メニュー：主役は縦積み、索引は1段組へ戻す */
  .menuTop { padding: 34px 20px 26px; }
  .menuTop .lead-badge { left: 20px; }
  .menuTop__title { margin-bottom: 22px; padding-bottom: 16px; }
  .menuTop__list { grid-template-columns: 1fr; gap: 0; }
  .menuTop__row { display: grid; grid-template-columns: 74px 1fr; column-gap: 16px; padding: 20px 0; border-top: 1px solid var(--rule-soft); }
  .menuTop__row + .menuTop__row { padding-left: 0; border-left: 0; }
  .menuTop__art { grid-row: 1 / 3; max-width: none; margin: 0; }
  .menuTop__job { margin-bottom: 8px; }
  .menuTop__items li { font-size: .85rem; }

  .priceMap { grid-template-columns: 1fr; gap: 22px; padding: 28px 22px; background-size: 100% 100%; }
  .priceMap__br { display: none; }
  .priceMap__bars li { grid-template-columns: 66px minmax(0, 1fr) 40px; gap: 9px; }

  .menuFilter__chips { gap: 6px; }
  .menuChip { min-height: 44px; padding: 8px 12px; font-size: .82rem; }

  /* タップ対象を44px以上に揃える（FVの副ボタンが34pxだったため） */
  .fv-actions .btn-secondary { min-height: 44px; font-size: .82rem; }

  /* 縦の伸びを抑える（章立て・図版の追加で増えたぶんを回収する） */
  .section-inner, .section-inner.wide, .faq-inner, .menu-inner { padding: 60px 0; }
  .menu-category { margin-bottom: 34px; }
  .menu-item { padding: 9px 0; }
  .survey .section-inner { padding-top: 60px; padding-bottom: 60px; }
  .menu-category__head { flex-wrap: wrap; gap: 4px 12px; }
  .menu-category__meta { width: 100%; }
  .menu-list { grid-template-columns: 1fr; }
  /* 「自動／化」のような語中折れを防ぐ */
  .menu-name, .menuTop__items li span, .menu-desc { word-break: auto-phrase; }
  .menu-name { max-width: 66%; }

  .beforeAfter { margin-top: 44px; padding: 28px 22px 24px; }
  .beforeAfter__head { margin-bottom: 22px; padding-bottom: 16px; }
  .beforeAfter__legend { gap: 6px 16px; margin-bottom: 18px; }
  .beforeAfter__key { font-size: .7rem; }
  .beforeAfter__list { grid-template-columns: 1fr; gap: 20px; }
  /* 幅が狭いと見出しと削減率が接触するため、両方を1段落とす */
  .beforeAfter__list > li { column-gap: 10px; }
  .beforeAfter__name { font-size: .88rem; }
  .beforeAfter__name i { font-size: .76rem; }
  .beforeAfter__cut b { font-size: 1.3rem; }
  .beforeAfter__cut span { font-size: .76rem; }
  .beforeAfter__val { width: 6.2em; font-size: .76rem; }
  .beforeAfter__row--after .beforeAfter__val { font-size: .86rem; }
  .beforeAfter__track { height: 20px; }

  .closing-points { grid-template-columns: 1fr; gap: 0; }
  .closing-points li { padding: 14px 0; }
  .closing-points li + li { border-top: 1px solid rgba(252, 250, 244, .18); border-left: 0; padding-left: 0; }

  /* FVの安心材料は3段の帯に */
  .fv-proof { width: 100%; }
  .fv-proof li { flex: 1 1 100%; justify-content: flex-start; padding: 9px 14px; }
  .fv-proof li + li { border-top: 1px solid rgba(168, 138, 76, .38); border-left: 0; }

  /* 06 比較：横スクロール表をやめ、項目ごとの縦積みに組み替える */
  .compare .table-scroll { overflow-x: visible; }
  .compare table { min-width: 0; width: 100%; background: transparent; border-collapse: separate; border-spacing: 0; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .compare tbody tr { display: block; margin-bottom: 16px; background: rgba(255, 255, 255, .72); border: 1px solid var(--kincha); }
  .compare tbody th,
  .compare tbody td { display: block; width: auto; padding: 12px 16px; border: 0; text-align: left; }
  .compare tbody th { color: var(--white-paper); background: var(--sumi); font-size: 1rem; }
  .compare tbody td { position: relative; padding-top: 30px; border-top: 1px solid var(--rule-soft); font-size: .94rem; }
  .compare tbody td::before {
    content: attr(data-label);
    position: absolute;
    top: 9px;
    left: 16px;
    color: var(--muted);
    font-family: var(--font-mincho);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
  }
  .compare tbody td:last-child { background: rgba(184, 50, 30, .05); }
  .compare tbody td:last-child::before { color: var(--shu); }
}

/* ============================================================
   9. SPのFV（sp.css と同じ 768px 以下でのみ適用する）
   769〜900px は既存のPCレイアウトが効いているため、
   §8（900px以下）に混ぜるとFVが崩れる。必ずこのブロックに書くこと。
   ============================================================ */
@media (max-width: 768px) {
  /* --- SPでは職人画を出さない（2026-07-27 宍戸PM判断） ---------------------
     CTAの直後に390pxの装飾が挟まり、本題（01課題）の開始が1,119pxまで
     押し下げられていたため。画像に載っていた「匠の技 × 最新AI」と朱印は、
     FV末尾の1行として組み直して残す。PCは変更しない。 */
  .fv-art-wrap { display: none; }
  /* 縦書きの「匠の技 × 最新AI」はFV末尾の横1行に組み直し、
     朱印はその行の右端に置く。安心材料の帯とは重ならせない。 */
  .fv { padding-bottom: 52px; }
  .fv-artisan {
    position: static;
    z-index: auto;
    order: 3;
    width: min(100%, 240px);
    margin: 16px 0 0 16px;
    padding: 0 0 0 10px;
    writing-mode: horizontal-tb;
    border-left: 2px solid rgba(74, 59, 35, .3);
    font-size: 11.5px;
    line-height: 1.5;
    letter-spacing: .16em;
  }
  .fv-seal {
    right: 16px;
    bottom: 30px;
    width: 30px;
    height: 37px;
    font-size: 9px;
  }
  /* 安心材料の帯を圧縮して、本題までの距離をさらに詰める */
  .fv-proof { margin-top: 16px; }
  .fv-proof li { padding: 7px 13px; }
  .fv-proof b { font-size: .96rem; }
  .fv-proof span { font-size: .74rem; }
}

/* ============================================================
   10. FVの登場（2026-07-28）
   「動かす」のではなく「所作を与える」。全体1.5秒以内、移動量は10px前後。
   高彩度色は足さない／ループしない／初回1回だけ。

   🔴 筆文字（.fv-brush-headline）はLCP要素。opacity 0 から始めると
      LCPが悪化するため、要素は最初から不透明のままマスクだけ動かす。
   ============================================================ */

/* 共通：ごく浅いフェードアップ */
@keyframes fv-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* A. 筆文字が書かれていく（左上→右下の斜めワイプ）
   mask-size 260% ＋ mask-position 100%→0% で、墨の走る向きに現れる。
   画像は1枚なので行ごとの時間差は付かない（分割すれば可能）。 */
@keyframes fv-brush-write {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0 0;    mask-position: 0 0; }
}
.fv-brush-headline {
  -webkit-mask-image: linear-gradient(105deg, #000 0 38%, rgba(0, 0, 0, .45) 45%, transparent 53%);
  mask-image: linear-gradient(105deg, #000 0 38%, rgba(0, 0, 0, .45) 45%, transparent 53%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  animation: fv-brush-write .85s cubic-bezier(.25, .7, .3, 1) .1s both;
}

/* B. 登場順。eyebrow → 筆文字 → リード → 木札 → CTA → 安心材料 → 縦書き → 朱印 */
.fv-eyebrow  { animation: fv-rise .5s cubic-bezier(.2, .75, .25, 1) 0s   both; }
.fv-lead     { animation: fv-rise .5s cubic-bezier(.2, .75, .25, 1) .55s both; }
.fv-delivery { animation: fv-rise .5s cubic-bezier(.2, .75, .25, 1) .63s both; }
.fv-actions  { animation: fv-rise .5s cubic-bezier(.2, .75, .25, 1) .88s both; }
.fv-proof    { animation: fv-rise .5s cubic-bezier(.2, .75, .25, 1) .98s both; }
.fv-artisan  { animation: fv-rise .55s cubic-bezier(.2, .75, .25, 1) 1.1s both; }
/* 職人画は既存のスライドイン。単独で先頭に出ないよう頭だけ揃える */
.fv-system-art { animation-delay: .06s; }

/* D. 木札が落ちて、紐で2回だけ揺れて止まる。回転軸は紐の位置＝上端 */
@keyframes fv-tags-hang {
  from { opacity: 0; transform: translateY(-9px) rotate(-1.6deg); }
  35%  { opacity: 1; transform: translateY(0) rotate(1.1deg); }
  62%  { transform: translateY(0) rotate(-.55deg); }
  82%  { transform: translateY(0) rotate(.22deg); }
  /* 終端は none に戻す。transform が残ると合成レイヤーのまま再サンプリングされ、
     mix-blend-mode: multiply が掛かった木札がごくわずかに甘くなるため */
  to   { opacity: 1; transform: none; }
}
.fv-price-tags {
  transform-origin: 50% 6%;
  animation: fv-tags-hang .8s cubic-bezier(.25, .8, .35, 1) .72s both;
}

/* C. 朱印が押される。基底の rotate(-1deg) は全キーフレームで保持すること */
@keyframes fv-seal-press {
  from { opacity: 0; transform: rotate(-1deg) scale(1.34); }
  60%  { opacity: 1; transform: rotate(-1deg) scale(.965); }
  to   { opacity: 1; transform: rotate(-1deg) scale(1); }
}
.fv-seal {
  transform-origin: 50% 50%;
  animation: fv-seal-press .3s cubic-bezier(.2, 1.4, .4, 1) 1.25s both;
}

/* 動きを減らす設定では、すべて即座に確定状態にする。
   筆文字はマスクごと外さないと隠れたままになるので注意。 */
@media (prefers-reduced-motion: reduce) {
  .fv-eyebrow, .fv-lead, .fv-delivery, .fv-actions, .fv-proof,
  .fv-artisan, .fv-price-tags, .fv-seal, .fv-brush-headline {
    animation: none !important;
  }
  .fv-brush-headline { -webkit-mask-image: none; mask-image: none; }
}

/* SPは縦一列で、待っている間の空白がそのまま画面を占める。
   PCの時間軸（1.65秒で着地）だと間延びするため、約0.65倍に詰めて1.2秒で着地させる。
   実測：390×844で600ms時点に画面の2/3が空だった。 */
@media (max-width: 768px) {
  .fv-brush-headline { animation-duration: .7s; animation-delay: .06s; }
  .fv-system-art { animation-delay: 0s; }
  .fv-lead     { animation-delay: .38s; }
  .fv-delivery { animation-delay: .44s; }
  .fv-price-tags { animation-duration: .68s; animation-delay: .5s; }
  .fv-actions  { animation-delay: .62s; }
  .fv-proof    { animation-delay: .7s; }
  .fv-artisan  { animation-duration: .45s; animation-delay: .8s; }
  .fv-seal     { animation-delay: .92s; }
}

/* ============================================================
   11. Before / After 図の伸長（2026-07-28）
   時短感は「導入後のバーが短いところで止まる」のが見えて初めて伝わる。
   そのため導入前を先に全幅まで引き、そのあと導入後を伸ばす。
   .is-shown はスクロールで図が入ったとき main.js が1回だけ付ける。
   ============================================================ */
/* 🔴 既定は「見えている」状態にしておくこと。
   JSが読み込めない／無効な環境でバーが消えるのを防ぐため、
   畳んだ状態は main.js が .is-armed を付けたときにだけ適用する。 */
.beforeAfter__track i { transform-origin: 0 50%; }
.beforeAfter.is-armed .beforeAfter__track i { transform: scaleX(0); }
.beforeAfter.is-armed .beforeAfter__cut { opacity: 0; transform: translateY(6px); }

.beforeAfter.is-armed.is-shown .beforeAfter__row--before .beforeAfter__track i {
  transform: scaleX(1);
  transition: transform .5s cubic-bezier(.2, .75, .25, 1) calc(var(--i) * .07s);
}
.beforeAfter.is-armed.is-shown .beforeAfter__row--after .beforeAfter__track i {
  transform: scaleX(1);
  transition: transform .55s cubic-bezier(.2, .8, .25, 1) calc(.34s + var(--i) * .07s);
}
/* 削減率は、導入後のバーが止まったあとに出す */
.beforeAfter.is-armed.is-shown .beforeAfter__cut {
  opacity: 1;
  transform: none;
  transition: opacity .4s ease calc(.72s + var(--i) * .07s), transform .4s cubic-bezier(.2, .75, .25, 1) calc(.72s + var(--i) * .07s);
}

@media (prefers-reduced-motion: reduce) {
  .beforeAfter.is-armed .beforeAfter__track i { transform: scaleX(1); transition: none; }
  .beforeAfter.is-armed .beforeAfter__cut { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   12. 読み出し順の合図（2026-07-28）
   目的は装飾ではなく「どこから重点的に読むか」を示すこと。
   全部を同じように動かすと、また平坦に戻る。3段に分ける。

     第1段 章の入口 .secHead  … キッカー→見出し→飾り罫が引かれる→リード
     第2段 主役     .is-lead  … やや大きく起き上がり、墨の縦罫が上から引かれる
     第3段 従       その他     … 8pxの浅い上げ。グループ内は順送り

   🔴 既定は「見えている」状態にすること。畳むのは html.rv-on が付いたときだけ。
      このLPに no-js の仕組みは無いので、JS不達時に全面が消えるのを防ぐ。
      main.js は IntersectionObserver 非対応・prefers-reduced-motion では .rv-on を付けない。
   ============================================================ */

/* --- 第3段（既定）------------------------------------------------------- */
.rv-on .rv { opacity: 0; transform: translateY(14px); }
.rv-on .rv.rv-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .5s ease calc(var(--rv-i, 0) * 55ms),
    transform .55s cubic-bezier(.2, .75, .25, 1) calc(var(--rv-i, 0) * 55ms);
}

/* --- 第1段 章の入口 ----------------------------------------------------- */
/* 🔴 子要素へ `> *` で transform を当ててはいけない。
      .secHead--center の連番ゴーストと飾り罫は translateX(-50%) で中央に寄せており、
      一括で transform:none を掛けると位置が飛ぶ。必ず名前で指定すること。 */
/* 見出しの塊そのものは動かさず、中の4つを順番に出す */
.rv-on .secHead.rv { opacity: 1; transform: none; }
.rv-on .secHead.rv .secHead__ghost,
.rv-on .secHead.rv .secHead__kicker,
.rv-on .secHead.rv h2,
.rv-on .secHead.rv .secHead__rule,
.rv-on .secHead.rv .secHead__lead { opacity: 0; }
.rv-on .secHead.rv .secHead__kicker { transform: translateY(8px); }
.rv-on .secHead.rv h2 { transform: translateY(12px); }
.rv-on .secHead.rv .secHead__lead { transform: translateY(10px); }
/* 飾り罫は左から引く。「ここから読む」の起点になる */
.rv-on .secHead.rv .secHead__rule { transform: scaleX(0); transform-origin: 0 50%; }
.rv-on .secHead--center.rv .secHead__rule { transform-origin: 50% 50%; }

.rv-on .secHead.rv.rv-in .secHead__ghost,
.rv-on .secHead.rv.rv-in .secHead__kicker,
.rv-on .secHead.rv.rv-in h2,
.rv-on .secHead.rv.rv-in .secHead__rule,
.rv-on .secHead.rv.rv-in .secHead__lead { opacity: 1; }
.rv-on .secHead.rv.rv-in .secHead__kicker {
  transform: none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, .75, .25, 1);
}
.rv-on .secHead.rv.rv-in h2 {
  transform: none;
  transition: opacity .5s ease .08s, transform .55s cubic-bezier(.2, .75, .25, 1) .08s;
}
.rv-on .secHead.rv.rv-in .secHead__ghost { transition: opacity .8s ease .12s; }
.rv-on .secHead.rv.rv-in .secHead__rule {
  transform: scaleX(1);
  transition: transform .5s cubic-bezier(.2, .8, .25, 1) .22s, opacity .3s ease .22s;
}
.rv-on .secHead.rv.rv-in .secHead__lead {
  transform: none;
  transition: opacity .5s ease .34s, transform .5s cubic-bezier(.2, .75, .25, 1) .34s;
}

/* --- 第2段 主役 --------------------------------------------------------- */
.rv-on .is-lead.rv { transform: translateY(18px); }
.rv-on .is-lead.rv.rv-in {
  transform: none;
  transition:
    opacity .55s ease calc(var(--rv-i, 0) * 55ms),
    transform .7s cubic-bezier(.2, .78, .24, 1) calc(var(--rv-i, 0) * 55ms);
}
/* 主役の目印である墨の縦罫を、上から下へ引く */
.rv-on .is-lead.rv::after { transform: scaleY(0); transform-origin: 50% 0; }
.rv-on .is-lead.rv.rv-in::after {
  transform: scaleY(1);
  transition: transform .6s cubic-bezier(.2, .8, .25, 1) calc(.26s + var(--rv-i, 0) * 55ms);
}

/* 動きを減らす設定では main.js が .rv-on を付けないので通常は発火しない。
   読み込み後に設定を切り替えた場合の保険。ここでも `> *` は使わない
   （.lead-badge の translateX(-50%) を壊すため）。 */
@media (prefers-reduced-motion: reduce) {
  .rv-on .rv,
  .rv-on .secHead.rv .secHead__ghost,
  .rv-on .secHead.rv .secHead__kicker,
  .rv-on .secHead.rv h2,
  .rv-on .secHead.rv .secHead__lead {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .rv-on .secHead.rv .secHead__rule {
    opacity: 1 !important;
    transform: scaleX(1) !important;
    transition: none !important;
  }
  .rv-on .is-lead.rv::after { transform: scaleY(1) !important; transition: none !important; }
}

/* ============================================================
   13. PCの追尾フッター（2026-07-29）
   SEO改善プロLP v6 の .sticky を移植。構成は同じで、色だけ和に合わせる。
     ・SEO LP はオレンジが主CTA。こちらは緑（CTA 1色1役）を主、副導線は白の枠線
     ・地は墨。生成り和紙の上に置くので、白帯ではなく墨帯で締める
   SPは既存の .sp-sticky（base.css で display:none → sp.css の768px以下で表示）。
   本ブロックは769px以上でだけ出すので、両者が重なることはない。
   表示制御は main.js の configureStickyCta() が両方まとめて見る（FV内と申込枠内では出さない）。
   ============================================================ */
.pcSticky { display: none; }

@media (min-width: 769px) {
  .pcSticky {
    position: fixed;
    z-index: 90;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    padding: 13px 0 calc(13px + env(safe-area-inset-bottom));
    background: rgba(26, 26, 26, .96);
    border-top: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .16);
    transition: transform .28s cubic-bezier(.2, .75, .25, 1), opacity .24s ease;
  }
  .pcSticky.is-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }

  .pcSticky__in {
    width: min(1200px, calc(100% - clamp(24px, 5vw, 64px) * 2));
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(18px, 3vw, 44px);
  }

  .pcSticky__lead {
    margin: 0;
    color: rgba(245, 241, 232, .74);
    font-family: var(--font-mincho);
    font-size: .88rem;
    line-height: 1.7;
    word-break: auto-phrase;
  }
  .pcSticky__lead b { color: #fff; font-weight: 700; }

  .pcSticky__btns { display: flex; align-items: center; gap: 12px; flex: none; }
  .pcSticky .btn { min-width: 0; min-height: 50px; padding: 0 24px; font-size: .88rem; }

  /* 副導線は白の枠線。ここを塗ると高彩度色が2つになり、CTA 1色1役が崩れる */
  .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 3px;
    box-shadow: none;
    font-family: var(--font-mincho);
    font-weight: 700;
    white-space: nowrap;
  }
  .btn-ghost:hover, .btn-ghost:focus-visible {
    background: rgba(255, 255, 255, .1);
    border-color: #fff;
    transform: translateY(-1px);
  }
  .pcSticky__arrow { margin-left: 10px; font-size: .92em; }
}

/* 幅が足りないと説明文が折れて帯が太る。実測での折り返し点は1240px（1280pxまでは1行）。
   SEO LPと同じく、狭い幅では説明文を落としてボタンだけにする */
@media (min-width: 769px) and (max-width: 1279px) {
  .pcSticky__lead { display: none; }
  .pcSticky__in { justify-content: center; }
  .pcSticky__btns { flex: 1 1 auto; justify-content: center; }
}

/* 画面が低いとき（ノートPC等）は帯を薄くして本文の見える面積を確保する */
@media (min-width: 769px) and (max-height: 720px) {
  .pcSticky { padding: 9px 0 calc(9px + env(safe-area-inset-bottom)); }
  .pcSticky .btn { min-height: 44px; font-size: .84rem; }
  .pcSticky__lead { font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pcSticky { transition: none; }
}