@charset "utf-8";
/* ==========================================================================
   WebCraft — styles.css
   Art direction / layout / typography / components
   Motion (scroll reveal, canvas, tilt, parallax) は motion.css / motion.js の担当。
   このファイルには「初期状態 opacity:0」等のアニメーション用スタイルは書かない。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* ---- Surfaces (warm paper / 生成り) ---- */
  --wc-bg:            #fbfaf7;
  --wc-bg-alt:        #f3f0e9;
  --wc-surface:       #ffffff;
  --wc-sand:          #ece5d9;
  --wc-line:          #e3ded4;
  --wc-line-strong:   #cfc7b9;

  /* ---- Ink (墨) ---- */
  --wc-ink:           #171614;
  --wc-ink-2:         #4a453e;
  --wc-ink-3:         #736c61;
  --wc-ink-inv:       #ffffff;
  --wc-surface-ink:   #221f1b;
  --wc-line-ink:      rgba(255, 255, 255, .16);
  --wc-ink-inv-2:     rgba(255, 255, 255, .74);

  /* ---- Brand (朱 / logo vermilion) ---- */
  --wc-brand:         #c93f16;  /* 塗り・文字に使える濃度（白文字 5.1:1 / 白地 5.1:1） */
  --wc-brand-2:       #a6320f;  /* hover / pressed */
  --wc-brand-ink:     #ffffff;  /* brand 面の上の文字色 */
  --wc-brand-soft:    #fbeee9;  /* 極薄の面 */
  --wc-accent:        #e8481f;  /* ロゴそのままの朱。罫・記号・濃色面の上のみ */

  /* ---- LINE ---- */
  --wc-line-green:      #06843a;  /* 塗り（白文字 4.8:1） */
  --wc-line-green-2:    #056a2e;
  --wc-line-green-mark: #06c755;  /* アイコンの地色のみ */

  /* ---- Radius ---- */
  --wc-radius-s:  6px;
  --wc-radius-m:  10px;
  --wc-radius-l:  18px;

  /* ---- Elevation（暖色の影・低コントラスト） ---- */
  --wc-shadow-1: 0 1px 2px rgba(23, 22, 20, .04), 0 10px 24px -14px rgba(23, 22, 20, .18);
  --wc-shadow-2: 0 2px 4px rgba(23, 22, 20, .04), 0 28px 56px -24px rgba(23, 22, 20, .26);

  /* ---- Motion ---- */
  --wc-ease-out:   cubic-bezier(.16, 1, .3, 1);
  --wc-ease-inout: cubic-bezier(.65, 0, .35, 1);
  --wc-dur-s: .18s;
  --wc-dur-m: .34s;
  --wc-dur-l: .72s;

  /* ---- Layout ---- */
  --wc-container:        1080px;
  --wc-container-narrow: 760px;
  --wc-gutter:           20px;
  --wc-header-h:         58px;
  --wc-dock-h:           74px;
  --wc-section-y:        60px;

  /* ---- Type ---- */
  --wc-font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --wc-font-en: "Manrope", "Noto Sans JP", system-ui, sans-serif;

  --wc-fs-100: .75rem;      /* 12 — キャプション・注記 */
  --wc-fs-200: .8125rem;    /* 13 — ラベル */
  --wc-fs-300: .875rem;     /* 14 — 補助テキスト */
  --wc-fs-400: 1rem;        /* 16 — 本文（下限） */
  --wc-fs-500: clamp(1rem, .96rem + .2vw, 1.0625rem);          /* 16→17 本文（広い場） */
  --wc-fs-lead: clamp(1rem, .93rem + .32vw, 1.125rem);         /* 16→18 リード */
  --wc-fs-600: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);       /* 17→19 h3 */
  --wc-fs-700: clamp(1.375rem, 1.06rem + 1.5vw, 2.125rem);     /* 22→34 h2 */
  --wc-fs-800: clamp(1.625rem, 1.16rem + 2.2vw, 2.375rem);     /* 26→38 h1 */
  --wc-fs-num:  clamp(1.75rem, 1.3rem + 2.1vw, 2.625rem);      /* 大きな数字 */

  --wc-lh-tight: 1.34;
  --wc-lh-head:  1.5;   /* 和文見出しは詰めすぎない */
  --wc-lh-body:  1.85;

  color-scheme: light;
}

@media (min-width: 768px) {
  :root {
    --wc-gutter:    32px;
    --wc-header-h:  74px;
    --wc-section-y: 92px;
    --wc-lh-head:   1.42;
  }
}
@media (min-width: 1120px) {
  :root { --wc-section-y: 120px; }
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* clip は sticky を壊さない。横スクロール事故の最終防波堤。 */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--wc-bg);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100svh;
  overflow-x: clip;
  font-family: var(--wc-font-jp);
  font-size: var(--wc-fs-400);
  font-weight: 400;
  line-height: var(--wc-lh-body);
  letter-spacing: .01em;
  color: var(--wc-ink-2);
  background: var(--wc-bg);
  font-feature-settings: "palt" 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-menu-open {
  overflow: hidden;
  overscroll-behavior: contain;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--wc-ink);
  font-weight: 700;
  line-height: var(--wc-lh-head);
  letter-spacing: .005em;
  text-wrap: pretty;
}
h1 { font-size: var(--wc-fs-800); line-height: 1.42; }
h2 { font-size: var(--wc-fs-700); }
h3 { font-size: var(--wc-fs-600); line-height: 1.55; }

p, ul, ol, dl, dd, figure, blockquote, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: .22em;
}
a:where(:not([class])) {
  color: var(--wc-brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }

strong, b { font-weight: 700; color: var(--wc-ink); }

hr {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--wc-line);
}

::selection { background: var(--wc-brand); color: var(--wc-brand-ink); }

/* 見出しやアンカーが固定ヘッダーに潜らない */
:where([id]) { scroll-margin-top: calc(var(--wc-header-h) + 20px); }

/* --------------------------------------------------------------------------
   3. Focus
   -------------------------------------------------------------------------- */
:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--wc-brand);
  outline-offset: 3px;
  border-radius: 3px;
}
.wc-section--ink :focus-visible,
.wc-footer :focus-visible { outline-color: var(--wc-accent); }

.wc-skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 12px 18px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--wc-radius-s);
  background: var(--wc-ink);
  color: var(--wc-ink-inv);
  font-size: var(--wc-fs-300);
  font-weight: 700;
  transform: translateY(-160%);
}
.wc-skip:focus-visible { transform: translateY(0); }

.wc-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.wc-container {
  width: min(var(--wc-container), 100% - var(--wc-gutter) * 2);
  margin-inline: auto;
}
.wc-container--narrow { width: min(var(--wc-container-narrow), 100% - var(--wc-gutter) * 2); }

.wc-section {
  position: relative;
  padding-block: var(--wc-section-y);
}
.wc-section--tight { padding-block: calc(var(--wc-section-y) * .66); }
.wc-section--alt   { background: var(--wc-bg-alt); }
.wc-section--ink {
  background: var(--wc-ink);
  color: var(--wc-ink-inv-2);
}
.wc-section--ink h1,
.wc-section--ink h2,
.wc-section--ink h3,
.wc-section--ink strong { color: var(--wc-ink-inv); }

/* グリッド子要素が内容幅で膨らんで横溢れするのを防ぐ */
.wc-container > *,
[class*="wc-"] > * { min-width: 0; }

/* --------------------------------------------------------------------------
   5. Section heading
   -------------------------------------------------------------------------- */
.wc-sec-head { max-width: 40rem; }
.wc-sec-head + * { margin-top: 32px; }
/* grid の中に置いたときは gap が効くので、追加のマージンは消す */
.wc-problem .wc-sec-head + *,
.wc-sys .wc-sec-head + * { margin-top: 0; }

.wc-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-family: var(--wc-font-en);
  font-size: var(--wc-fs-200);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wc-ink-3);
}
.wc-eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  flex: 0 0 auto;
  background: var(--wc-accent);
}
.wc-section--ink .wc-eyebrow { color: var(--wc-ink-inv-2); }

.wc-sec-head__lead {
  margin-top: 18px;
  max-width: 34em;
  font-size: var(--wc-fs-lead);
  line-height: 1.95;
  color: var(--wc-ink-2);
}
.wc-section--ink .wc-sec-head__lead { color: var(--wc-ink-inv-2); }

.wc-lead {
  max-width: 34em;
  font-size: var(--wc-fs-lead);
  line-height: 1.95;
}
.wc-muted { color: var(--wc-ink-3); }
.wc-small { font-size: var(--wc-fs-300); line-height: 1.8; }
.wc-note-text { font-size: var(--wc-fs-100); line-height: 1.75; color: var(--wc-ink-3); }

/* 朱のアンダーライン（見出し内の強調） */
.wc-mark {
  background-image: linear-gradient(transparent 62%, rgba(232, 72, 31, .22) 62%);
  padding-inline: .04em;
}
.wc-nowrap { white-space: nowrap; }

/* 和文の任意改行：狭い幅だけ改行させる */
.wc-br-sp { display: inline; }
@media (min-width: 768px) { .wc-br-sp { display: none; } }
.wc-br-pc { display: none; }
@media (min-width: 768px) { .wc-br-pc { display: inline; } }

/* --------------------------------------------------------------------------
   6. Icons
   -------------------------------------------------------------------------- */
.wc-icon {
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wc-icon--sm { width: 1em; height: 1em; }
.wc-icon--lg { width: 1.6em; height: 1.6em; }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.wc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  min-width: 44px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--wc-radius-s);
  font-family: var(--wc-font-jp);
  font-size: var(--wc-fs-300);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--wc-ink);
  transition:
    background-color var(--wc-dur-s) var(--wc-ease-out),
    border-color var(--wc-dur-s) var(--wc-ease-out),
    color var(--wc-dur-s) var(--wc-ease-out),
    box-shadow var(--wc-dur-s) var(--wc-ease-out);
}
.wc-btn .wc-icon { transition: transform var(--wc-dur-m) var(--wc-ease-out); }
@media (hover: hover) {
  .wc-btn:hover .wc-icon--arrow { transform: translateX(3px); }
}

.wc-btn--lg    { min-height: 58px; font-size: var(--wc-fs-400); padding-inline: 26px; }
.wc-btn--block { display: flex; width: 100%; }

/* LINE（第一CTA） */
.wc-btn--line {
  background: var(--wc-line-green);
  border-color: var(--wc-line-green);
  color: #fff;
}
.wc-btn--line .wc-btn__mark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 6px;
  background: var(--wc-line-green-mark);
  color: #fff;
}
.wc-btn--line .wc-btn__mark .wc-icon { width: 14px; height: 14px; stroke-width: 1.8; }
@media (hover: hover) {
  .wc-btn--line:hover { background: var(--wc-line-green-2); border-color: var(--wc-line-green-2); }
}

/* 朱（第二CTA・強調） */
.wc-btn--primary {
  background: var(--wc-brand);
  border-color: var(--wc-brand);
  color: var(--wc-brand-ink);
}
@media (hover: hover) {
  .wc-btn--primary:hover { background: var(--wc-brand-2); border-color: var(--wc-brand-2); }
}

/* 墨ベタ */
.wc-btn--ink {
  background: var(--wc-ink);
  border-color: var(--wc-ink);
  color: var(--wc-ink-inv);
}
@media (hover: hover) {
  .wc-btn--ink:hover { background: #000; border-color: #000; }
}

/* 罫線 */
.wc-btn--ghost {
  background: var(--wc-surface);
  border-color: var(--wc-line-strong);
  color: var(--wc-ink);
}
@media (hover: hover) {
  .wc-btn--ghost:hover { border-color: var(--wc-ink); box-shadow: var(--wc-shadow-1); }
}
.wc-section--ink .wc-btn--ghost,
.wc-footer .wc-btn--ghost {
  background: transparent;
  border-color: var(--wc-line-ink);
  color: var(--wc-ink-inv);
}
@media (hover: hover) {
  .wc-section--ink .wc-btn--ghost:hover,
  .wc-footer .wc-btn--ghost:hover { border-color: var(--wc-ink-inv); }
}

/* テキストリンク型 */
.wc-btn--text {
  min-height: 44px;
  padding: 10px 2px;
  gap: 8px;
  color: var(--wc-brand);
  border-radius: 3px;
}
@media (hover: hover) {
  .wc-btn--text:hover { color: var(--wc-brand-2); text-decoration: underline; }
}

.wc-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}
@media (min-width: 560px) {
  .wc-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .wc-actions .wc-btn--block { width: auto; display: inline-flex; }
}
.wc-actions--flush { margin-top: 0; }

/* 補足（相談無料など） */
.wc-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 20px;
}
.wc-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--wc-fs-200);
  font-weight: 500;
  color: var(--wc-ink-2);
}
.wc-note .wc-icon { color: var(--wc-brand); }
.wc-section--ink .wc-note { color: var(--wc-ink-inv-2); }
.wc-section--ink .wc-note .wc-icon { color: var(--wc-accent); }

/* --------------------------------------------------------------------------
   8. Header
   -------------------------------------------------------------------------- */
.wc-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 250, 247, .92);
  border-bottom: 1px solid transparent;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  transition: border-color var(--wc-dur-m) var(--wc-ease-out),
              background-color var(--wc-dur-m) var(--wc-ease-out);
}
.wc-header.is-scrolled {
  border-bottom-color: var(--wc-line);
  background: rgba(251, 250, 247, .97);
}
.wc-header__inner {
  width: min(var(--wc-container), 100% - var(--wc-gutter) * 2);
  min-height: var(--wc-header-h);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.wc-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
  padding: 6px 2px;
}
.wc-brand__img {
  width: 126px;
  height: auto;
  aspect-ratio: 1328 / 287;
}
@media (min-width: 768px) { .wc-brand__img { width: 150px; } }

.wc-nav { display: none; }
.wc-header__cta { display: none; }

@media (min-width: 900px) {
  .wc-nav {
    display: block;
    margin-right: 8px;
  }
  .wc-nav__list {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .wc-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 44px;
    padding: 0 12px;
    font-size: var(--wc-fs-300);
    font-weight: 500;
    color: var(--wc-ink-2);
    transition: color var(--wc-dur-s) var(--wc-ease-out);
  }
  .wc-nav__link::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 8px;
    height: 1.5px;
    background: var(--wc-accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--wc-dur-m) var(--wc-ease-out);
  }
  .wc-nav__link:hover,
  .wc-nav__link[aria-current="page"] { color: var(--wc-ink); }
  .wc-nav__link:hover::after,
  .wc-nav__link:focus-visible::after,
  .wc-nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

  .wc-header__cta { display: inline-flex; min-height: 44px; padding: 10px 18px; }
}

/* ハンバーガー */
.wc-burger {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-right: -8px;
  border: 1px solid var(--wc-line-strong);
  border-radius: var(--wc-radius-s);
  background: var(--wc-surface);
  color: var(--wc-ink);
}
.wc-burger__bars { display: block; width: 20px; }
.wc-burger__bars span {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--wc-dur-m) var(--wc-ease-out),
              opacity var(--wc-dur-s) linear;
}
.wc-burger__bars span + span { margin-top: 5px; }
.wc-burger[aria-expanded="true"] .wc-burger__bars span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.wc-burger[aria-expanded="true"] .wc-burger__bars span:nth-child(2) { opacity: 0; }
.wc-burger[aria-expanded="true"] .wc-burger__bars span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (min-width: 900px) { .wc-burger { display: none; } }

/* ドロワー */
/* ヘッダー(z-index:100)より下。開いている間も閉じるボタンが押せるようにする。 */
.wc-drawer {
  position: fixed;
  inset: 0;
  z-index: 95;
  visibility: hidden;
}
.wc-drawer.is-open { visibility: visible; }

.wc-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(23, 22, 20, .42);
  opacity: 0;
  transition: opacity var(--wc-dur-m) var(--wc-ease-out);
}
.wc-drawer.is-open .wc-drawer__scrim { opacity: 1; }

.wc-drawer__panel {
  position: absolute;
  inset: 0 0 auto 0;
  max-height: 100svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--wc-header-h) + 20px) var(--wc-gutter)
           calc(28px + env(safe-area-inset-bottom, 0px));
  background: var(--wc-bg);
  border-bottom: 1px solid var(--wc-line);
  transform: translateY(-8%);
  opacity: 0;
  transition: transform var(--wc-dur-m) var(--wc-ease-out),
              opacity var(--wc-dur-s) var(--wc-ease-out);
}
.wc-drawer.is-open .wc-drawer__panel { transform: none; opacity: 1; }

.wc-drawer__list { border-top: 1px solid var(--wc-line); }
.wc-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--wc-line);
  font-size: var(--wc-fs-500);
  font-weight: 700;
  color: var(--wc-ink);
}
.wc-drawer__link .wc-icon { color: var(--wc-ink-3); }
.wc-drawer__link[aria-current="page"] { color: var(--wc-brand); }
.wc-drawer__foot { margin-top: 26px; display: grid; gap: 12px; }
.wc-drawer__contact {
  margin-top: 22px;
  display: grid;
  gap: 8px;
  font-size: var(--wc-fs-200);
  color: var(--wc-ink-3);
}
.wc-drawer__contact a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  .wc-drawer__panel,
  .wc-drawer__scrim,
  .wc-burger__bars span { transition-duration: .01ms; }
}

/* --------------------------------------------------------------------------
   9. Fixed bottom CTA（スマホのみ）
   -------------------------------------------------------------------------- */
.wc-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: 10px var(--wc-gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(251, 250, 247, .94);
  border-top: 1px solid var(--wc-line);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  transition: transform var(--wc-dur-m) var(--wc-ease-out);
}
/* motion.js がスクロール方向に応じて付け外しする */
.wc-dock.is-hidden { transform: translateY(115%); }
.wc-dock__inner { display: flex; align-items: center; gap: 10px; }
.wc-dock .wc-btn { flex: 1 1 auto; min-height: 50px; padding-inline: 14px; }
.wc-dock .wc-btn--ghost { flex: 0 0 auto; width: 50px; padding: 0; }

@media (min-width: 900px) { .wc-dock { display: none; } }
@media (prefers-reduced-motion: reduce) { .wc-dock { transition-duration: .01ms; } }

/* ドックが本文末尾を隠さないための余白 */
.wc-footer { padding-bottom: calc(var(--wc-dock-h) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { .wc-footer { padding-bottom: 0; } }

/* --------------------------------------------------------------------------
   10. Hero
   -------------------------------------------------------------------------- */
.wc-hero {
  position: relative;
  padding-block: 40px 56px;
  border-bottom: 1px solid var(--wc-line);
  overflow: clip;
}
.wc-hero__inner { position: relative; z-index: 1; }

.wc-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--wc-line-strong);
  border-radius: 999px;
  background: var(--wc-surface);
  font-size: var(--wc-fs-200);
  font-weight: 500;
  color: var(--wc-ink-2);
}
.wc-hero__eyebrow .wc-icon { color: var(--wc-brand); }

.wc-hero__title {
  margin-bottom: 20px;
  font-size: var(--wc-fs-800);
  line-height: 1.44;
  letter-spacing: 0;
}
.wc-hero__title .wc-hero__num {
  font-family: var(--wc-font-en);
  font-weight: 700;
  letter-spacing: -.01em;
}
.wc-hero__lead {
  max-width: 32em;
  font-size: var(--wc-fs-lead);
  line-height: 1.95;
  color: var(--wc-ink-2);
}

.wc-hero__stage {
  position: relative;
  margin-top: 44px;
  min-height: 300px;
  display: grid;
  place-items: center;
}
.wc-hero__canvas {
  position: absolute;
  inset: -8% -6%;
  width: auto;
  height: auto;
  max-width: none;
  pointer-events: none;
  /* 何も描画されなければ透明のまま。JS無効でも下の代替ビジュアルが見える */
}
.wc-hero__mockwrap { position: relative; z-index: 1; }

@media (min-width: 900px) {
  .wc-hero { padding-block: 64px 88px; }
  .wc-hero__inner {
    display: grid;
    /* h1「…ホームページ制作・管理・改善。」が2行に収まる幅を確保している */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 48px;
    align-items: center;
  }
  .wc-hero__stage { margin-top: 0; min-height: 420px; }
  .wc-hero__title { margin-bottom: 24px; }
}

/* --- CSS製デバイスモック（canvas が動かない場合の実質的な主役） --- */
.wc-mock {
  position: relative;
  width: min(268px, 74vw);
  filter: drop-shadow(0 30px 44px rgba(23, 22, 20, .18));
}
.wc-mock__phone {
  position: relative;
  padding: 10px;
  border: 1px solid #34302b;
  border-radius: 32px;
  background: linear-gradient(180deg, #2c2823, #1b1815);
}
.wc-mock__notch {
  position: absolute;
  top: 16px;
  left: 50%;
  translate: -50% 0;
  width: 62px;
  height: 6px;
  border-radius: 99px;
  background: #100e0c;
  z-index: 2;
}
.wc-mock__screen {
  position: relative;
  overflow: hidden;
  padding: 26px 16px 18px;
  border-radius: 24px;
  background: var(--wc-surface);
  aspect-ratio: 9 / 17;
}
.wc-mock__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--wc-line);
}
.wc-mock__logo {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: var(--wc-ink);
  clip-path: polygon(0 12%, 22% 0, 40% 62%, 50% 30%, 60% 62%, 78% 0, 100% 12%, 62% 100%, 50% 66%, 38% 100%);
}
.wc-mock__bar span:last-child {
  margin-left: auto;
  width: 34px;
  height: 10px;
  border-radius: 3px;
  background: var(--wc-brand);
}
.wc-mock__body { padding-top: 16px; display: grid; gap: 9px; }
.wc-mock__line {
  display: block;
  height: 9px;
  border-radius: 3px;
  background: #ded8ce;
}
.wc-mock__line--head { height: 13px; background: #2f2a25; }
.wc-mock__line--head:nth-of-type(2) { width: 68%; }
.wc-mock__line:nth-of-type(4) { width: 88%; }
.wc-mock__line:nth-of-type(5) { width: 62%; }
.wc-mock__cta {
  display: block;
  height: 34px;
  margin-top: 6px;
  border-radius: 6px;
  background: var(--wc-line-green);
}
.wc-mock__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.wc-mock__tiles span {
  display: block;
  height: 46px;
  border: 1px solid var(--wc-line);
  border-radius: 6px;
  background: var(--wc-bg-alt);
}
.wc-mock__tiles span:first-child { border-color: rgba(232, 72, 31, .3); background: var(--wc-brand-soft); }

.wc-mock__chip {
  position: absolute;
  right: -14%;
  bottom: 12%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-radius-m);
  background: var(--wc-surface);
  box-shadow: var(--wc-shadow-1);
  font-size: var(--wc-fs-100);
  font-weight: 700;
  color: var(--wc-ink);
  white-space: nowrap;
}
.wc-mock__chip .wc-mock__dot {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--wc-line-green-mark);
  color: #fff;
}
.wc-mock__chip .wc-icon { width: 13px; height: 13px; }

@media (min-width: 900px) {
  .wc-mock { width: min(300px, 30vw); }
}

/* --------------------------------------------------------------------------
   11. Stats bar
   -------------------------------------------------------------------------- */
.wc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--wc-line);
  border-left: 1px solid var(--wc-line);
}
.wc-stat {
  padding: 22px 16px;
  border-right: 1px solid var(--wc-line);
  border-bottom: 1px solid var(--wc-line);
}
.wc-stat__label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--wc-fs-100);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--wc-ink-3);
}
.wc-stat__value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: var(--wc-ink);
  font-family: var(--wc-font-en);
  font-size: var(--wc-fs-num);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}
.wc-stat__unit {
  font-family: var(--wc-font-jp);
  font-size: .5em;
  font-weight: 700;
  letter-spacing: 0;
}
.wc-stat__value--word {
  font-family: var(--wc-font-jp);
  font-size: clamp(1.0625rem, .9rem + .75vw, 1.375rem);
  line-height: 1.5;
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .wc-stats { grid-template-columns: repeat(4, 1fr); }
  .wc-stat { padding: 28px 22px; }
}

/* --------------------------------------------------------------------------
   12. Problem / check list
   -------------------------------------------------------------------------- */
.wc-problem { display: grid; gap: 36px; }
@media (min-width: 900px) {
  .wc-problem {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 64px;
    align-items: start;
  }
}

.wc-checks {
  border-top: 1px solid var(--wc-line-strong);
}
.wc-check {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--wc-line-strong);
  font-size: var(--wc-fs-500);
  font-weight: 500;
  line-height: 1.75;
  color: var(--wc-ink);
}
.wc-check__box {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  margin-top: .28em;
  border: 1.5px solid var(--wc-brand);
  border-radius: 4px;
  color: var(--wc-brand);
}
.wc-check__box .wc-icon { width: 15px; height: 15px; stroke-width: 2; }

/* --------------------------------------------------------------------------
   13. Pillars（つくる・守る・伸ばす）
   -------------------------------------------------------------------------- */
.wc-pillars { border-top: 1px solid var(--wc-line-strong); }
.wc-pillar {
  display: grid;
  gap: 10px;
  padding: 28px 0;
  border-bottom: 1px solid var(--wc-line);
}
.wc-pillar__head { display: flex; align-items: baseline; gap: 14px; }
.wc-pillar__idx {
  font-family: var(--wc-font-en);
  font-size: var(--wc-fs-200);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--wc-brand);
}
.wc-pillar__title {
  font-size: clamp(1.1875rem, 1rem + .9vw, 1.5rem);
  line-height: 1.4;
}
.wc-pillar__body { max-width: 30em; line-height: 1.9; }

@media (min-width: 900px) {
  .wc-pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--wc-line);
  }
  .wc-pillar {
    padding: 34px 30px 40px;
    border-bottom: 0;
    border-left: 1px solid var(--wc-line);
  }
  .wc-pillar:first-child { border-left: 0; padding-left: 0; }
  .wc-pillar:last-child { padding-right: 0; }
}

/* --------------------------------------------------------------------------
   14. Spec list（初期導入費に含まれるもの）
   -------------------------------------------------------------------------- */
.wc-spec {
  border-top: 1px solid var(--wc-ink);
  background: var(--wc-surface);
}
.wc-spec__row {
  display: grid;
  gap: 4px;
  padding: 18px 18px;
  border-bottom: 1px solid var(--wc-line);
}
.wc-spec__term {
  font-size: var(--wc-fs-400);
  font-weight: 700;
  line-height: 1.6;
  color: var(--wc-ink);
}
.wc-spec__desc {
  font-size: var(--wc-fs-300);
  line-height: 1.7;
  color: var(--wc-ink-2);
}
@media (min-width: 700px) {
  .wc-spec__row {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 24px;
    align-items: baseline;
    padding: 20px 24px;
  }
}
.wc-spec__foot {
  padding: 18px;
  border-bottom: 1px solid var(--wc-line);
  background: var(--wc-bg);
  font-size: var(--wc-fs-300);
  line-height: 1.85;
}
@media (min-width: 700px) { .wc-spec__foot { padding: 20px 24px; } }

/* --------------------------------------------------------------------------
   15. Notice / callout
   -------------------------------------------------------------------------- */
.wc-notice {
  display: flex;
  gap: 14px;
  padding: 18px 18px;
  border: 1px solid var(--wc-line-strong);
  border-left: 3px solid var(--wc-brand);
  border-radius: 0 var(--wc-radius-s) var(--wc-radius-s) 0;
  background: var(--wc-surface);
}
.wc-notice__icon { color: var(--wc-brand); margin-top: .18em; }
.wc-notice__title {
  display: block;
  margin-bottom: 6px;
  font-size: var(--wc-fs-300);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--wc-ink);
}
.wc-notice__body { font-size: var(--wc-fs-300); line-height: 1.85; }
.wc-notice__body > * + * { margin-top: 6px; }
.wc-notice__body strong { color: var(--wc-ink); }
@media (min-width: 700px) { .wc-notice { padding: 22px 24px; } }

.wc-section--ink .wc-notice {
  background: var(--wc-surface-ink);
  border-color: var(--wc-line-ink);
  border-left-color: var(--wc-accent);
}
.wc-section--ink .wc-notice__icon { color: var(--wc-accent); }

/* --------------------------------------------------------------------------
   16. Pricing
   -------------------------------------------------------------------------- */
.wc-initfee {
  display: grid;
  gap: 16px;
  padding: 24px 20px;
  border: 1px solid var(--wc-ink);
  border-radius: var(--wc-radius-m);
  background: var(--wc-surface);
}
.wc-initfee__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--wc-fs-200);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--wc-ink-3);
}
.wc-initfee__label::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--wc-accent);
}
.wc-initfee__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--wc-font-en);
  font-size: clamp(2.125rem, 1.5rem + 3vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--wc-ink);
  font-variant-numeric: tabular-nums;
}
.wc-initfee__price .wc-initfee__unit {
  font-family: var(--wc-font-jp);
  font-size: .38em;
  letter-spacing: 0;
}
.wc-initfee__desc { font-size: var(--wc-fs-300); line-height: 1.8; }
@media (min-width: 768px) {
  .wc-initfee {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 32px;
    padding: 32px 34px;
  }
  .wc-initfee__head { display: grid; gap: 12px; }
}

.wc-plans {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}
@media (min-width: 860px) {
  .wc-plans {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: start;
  }
}

.wc-plan {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 26px 22px;
  border: 1px solid var(--wc-line-strong);
  border-radius: var(--wc-radius-m);
  background: var(--wc-surface);
}
.wc-plan--feature {
  border-color: var(--wc-ink);
  background: var(--wc-ink);
  color: var(--wc-ink-inv-2);
  box-shadow: var(--wc-shadow-2);
}
.wc-plan--feature .wc-plan__name,
.wc-plan--feature .wc-plan__amount,
.wc-plan--feature strong { color: var(--wc-ink-inv); }
.wc-plan--feature .wc-plan__item { border-color: var(--wc-line-ink); }
.wc-plan--feature .wc-plan__item .wc-icon { color: var(--wc-accent); }

.wc-plan__tag {
  position: absolute;
  top: -11px;
  left: 22px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--wc-brand);
  color: var(--wc-brand-ink);
  font-size: var(--wc-fs-100);
  font-weight: 700;
  letter-spacing: .04em;
}
.wc-plan__name {
  font-family: var(--wc-font-en);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--wc-ink);
}
.wc-plan__for {
  margin-top: 6px;
  font-size: var(--wc-fs-300);
  line-height: 1.75;
}
.wc-plan__price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  padding-top: 16px;
  border-top: 1px solid var(--wc-line);
}
.wc-plan--feature .wc-plan__price { border-top-color: var(--wc-line-ink); }
.wc-plan__pre { font-size: var(--wc-fs-300); font-weight: 700; margin-right: 4px; }
.wc-plan__amount {
  font-family: var(--wc-font-en);
  font-size: clamp(1.875rem, 1.4rem + 2.2vw, 2.625rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--wc-ink);
  font-variant-numeric: tabular-nums;
}
.wc-plan__per { font-size: var(--wc-fs-300); font-weight: 700; }
.wc-plan__list { display: grid; }
.wc-plan__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--wc-line);
  font-size: var(--wc-fs-300);
  line-height: 1.7;
}
.wc-plan__item:last-child { border-bottom: 0; padding-bottom: 0; }
.wc-plan__item .wc-icon { color: var(--wc-brand); margin-top: .28em; width: 1.05em; height: 1.05em; }

/* --------------------------------------------------------------------------
   17. System upsell（濃色セクション）
   -------------------------------------------------------------------------- */
.wc-sys { display: grid; gap: 36px; }
@media (min-width: 960px) {
  .wc-sys { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: start; }
}
.wc-sys__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--wc-line-ink);
  border-left: 1px solid var(--wc-line-ink);
}
.wc-sys-item {
  display: grid;
  gap: 10px;
  padding: 20px 16px;
  border-right: 1px solid var(--wc-line-ink);
  border-bottom: 1px solid var(--wc-line-ink);
}
.wc-sys-item__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--wc-line-ink);
  border-radius: var(--wc-radius-s);
  color: var(--wc-accent);
}
.wc-sys-item__title { font-size: var(--wc-fs-400); font-weight: 700; line-height: 1.5; }
.wc-sys-item__desc { font-size: var(--wc-fs-100); line-height: 1.75; color: var(--wc-ink-inv-2); }
@media (min-width: 560px) { .wc-sys-item { padding: 24px 20px; } }

/* --------------------------------------------------------------------------
   18. Flow
   -------------------------------------------------------------------------- */
.wc-flow { position: relative; }
.wc-flow__track {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 17px;
  width: 1.5px;
  background: var(--wc-line-strong);
  transform-origin: top;
}
.wc-flow__list { display: grid; gap: 4px; }
.wc-step {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 0 0 30px 52px;
}
.wc-step:last-child { padding-bottom: 0; }
.wc-step__num {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border: 1.5px solid var(--wc-ink);
  border-radius: 50%;
  background: var(--wc-bg);
  font-family: var(--wc-font-en);
  font-size: var(--wc-fs-300);
  font-weight: 700;
  color: var(--wc-ink);
}
.wc-section--alt .wc-step__num { background: var(--wc-bg-alt); }
.wc-step__title { font-size: var(--wc-fs-600); line-height: 1.5; padding-top: 3px; }
.wc-step__body { font-size: var(--wc-fs-300); line-height: 1.85; max-width: 28em; }

@media (min-width: 900px) {
  .wc-flow__track {
    top: 17px;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1.5px;
    transform-origin: left;
  }
  .wc-flow__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
  }
  .wc-step { padding: 0; grid-template-rows: auto auto auto; gap: 8px; }
  .wc-step__num { position: relative; top: auto; left: auto; }
  .wc-step__title { padding-top: 8px; }
}

/* --------------------------------------------------------------------------
   19. Profile
   -------------------------------------------------------------------------- */
.wc-profile { display: grid; gap: 30px; }
.wc-profile__aside {
  display: flex;
  align-items: center;
  gap: 16px;
}
.wc-profile__avatar {
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  padding: 10px;
  border: 1px solid var(--wc-line);
  border-radius: 50%;
  background: var(--wc-surface);
}
.wc-profile__avatar img { width: 100%; height: 100%; object-fit: contain; }
.wc-profile__role {
  font-family: var(--wc-font-en);
  font-size: var(--wc-fs-100);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wc-ink-3);
}
.wc-profile__name {
  font-family: var(--wc-font-en);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.3;
}
.wc-profile__place { font-size: var(--wc-fs-200); color: var(--wc-ink-3); }
.wc-profile__copy { margin-top: 18px; line-height: 1.95; }

.wc-history {
  margin-top: 26px;
  border-top: 1px solid var(--wc-line);
}
.wc-history__item {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--wc-line);
  font-size: var(--wc-fs-300);
  line-height: 1.75;
}
.wc-history__num {
  font-family: var(--wc-font-en);
  font-size: var(--wc-fs-200);
  font-weight: 700;
  color: var(--wc-brand);
  letter-spacing: .06em;
}

@media (min-width: 900px) {
  .wc-profile {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
  .wc-profile__aside {
    position: sticky;
    top: calc(var(--wc-header-h) + 32px);
    display: grid;
    gap: 4px;
    justify-items: start;
  }
  .wc-profile__avatar { width: 88px; height: 88px; margin-bottom: 14px; }
}

/* --------------------------------------------------------------------------
   20. Demos
   -------------------------------------------------------------------------- */
.wc-examples { display: grid; gap: 18px; }
.wc-example { display: grid; gap: 12px; }
.wc-example__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--wc-line-strong);
  border-radius: var(--wc-radius-m);
  background: var(--wc-surface);
  box-shadow: var(--wc-shadow-1);
}
.wc-example__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--wc-line);
  background: var(--wc-bg-alt);
}
.wc-example__chrome span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wc-line-strong);
}
/* <picture> は WebP 差し替えのためのラッパー。inline だと余白が出るので block に。 */
.wc-example__frame picture,
.wc-brand picture,
.wc-footer__brand picture,
.wc-profile__avatar picture { display: block; }
.wc-example__frame img { width: 100%; height: auto; }
.wc-example__title { font-size: var(--wc-fs-400); font-weight: 700; color: var(--wc-ink); }
.wc-example__desc { font-size: var(--wc-fs-300); line-height: 1.75; color: var(--wc-ink-3); }

@media (min-width: 760px) {
  .wc-examples { grid-template-columns: 1fr 1fr; gap: 24px; }
  .wc-example--wide { grid-column: 1 / -1; }
}

.wc-example-caution {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  font-size: var(--wc-fs-200);
  line-height: 1.8;
  color: var(--wc-ink-3);
}
.wc-example-caution .wc-icon { margin-top: .25em; }

/* --------------------------------------------------------------------------
   21. FAQ accordion
   -------------------------------------------------------------------------- */
.wc-faq { border-top: 1px solid var(--wc-line-strong); }
.wc-faq__item { border-bottom: 1px solid var(--wc-line-strong); }
.wc-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  padding: 20px 2px;
  text-align: left;
  font-family: inherit;
  font-size: var(--wc-fs-500);
  font-weight: 700;
  line-height: 1.7;
  color: var(--wc-ink);
  transition: color var(--wc-dur-s) var(--wc-ease-out);
}
@media (hover: hover) { .wc-faq__q:hover { color: var(--wc-brand); } }
.wc-faq__qtext { display: flex; gap: 12px; }
.wc-faq__qmark {
  font-family: var(--wc-font-en);
  font-weight: 700;
  color: var(--wc-brand);
  flex: 0 0 auto;
}
.wc-faq__sign {
  position: relative;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-top: .3em;
  color: var(--wc-ink-3);
}
.wc-faq__sign::before,
.wc-faq__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  translate: -50% -50%;
  transition: transform var(--wc-dur-m) var(--wc-ease-out), opacity var(--wc-dur-s) linear;
}
.wc-faq__sign::after { rotate: 90deg; }
.wc-faq__q[aria-expanded="true"] .wc-faq__sign::after { transform: scaleX(0); opacity: 0; }

/* 初期状態は閉じ。motion.css の failsafe アニメーションにより、
   JS が 2 秒以内に起動しなかった場合だけ開いて全文が読める状態になる。
   静的HTMLの aria-expanded="true" は motion.js の初期化で false に揃えられる。 */
.wc-faq__a { overflow: hidden; }
.wc-faq__a[hidden] { display: none; }
.wc-faq__inner {
  display: flex;
  gap: 12px;
  padding: 0 2px 24px;
  font-size: var(--wc-fs-400);
  line-height: 1.9;
}
.wc-faq__amark {
  font-family: var(--wc-font-en);
  font-weight: 700;
  color: var(--wc-ink-3);
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   22. CTA band
   -------------------------------------------------------------------------- */
.wc-cta { background: var(--wc-sand); border-block: 1px solid var(--wc-line-strong); }
/* 砂色の地では ink-3 だとコントラストが 4.14:1 まで落ちるため一段濃くする */
.wc-cta .wc-eyebrow { color: var(--wc-ink-2); }
.wc-cta__inner { display: grid; gap: 24px; }
.wc-cta__title { font-size: var(--wc-fs-700); }
.wc-cta__lead { margin-top: 14px; max-width: 32em; line-height: 1.9; }
@media (min-width: 900px) {
  .wc-cta__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   23. Footer
   -------------------------------------------------------------------------- */
.wc-footer {
  background: var(--wc-ink);
  color: var(--wc-ink-inv-2);
  font-size: var(--wc-fs-300);
}
.wc-footer__top {
  display: grid;
  gap: 36px;
  padding-block: 52px 40px;
}
.wc-footer__brand { display: grid; gap: 16px; justify-items: start; }
.wc-footer__brand > a { display: inline-flex; align-items: center; min-height: 44px; }
.wc-footer__logo { width: 148px; height: auto; aspect-ratio: 1328 / 287; }
.wc-footer__about { max-width: 26em; font-size: var(--wc-fs-200); line-height: 1.85; }
.wc-footer__contact { display: grid; gap: 6px; font-size: var(--wc-fs-200); }
.wc-footer__contact a,
.wc-footer__contact span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
}
.wc-footer__cols { display: grid; gap: 28px; }
@media (min-width: 560px) { .wc-footer__cols { grid-template-columns: 1fr 1fr; } }
.wc-footer__heading {
  margin-bottom: 12px;
  font-family: var(--wc-font-en);
  font-size: var(--wc-fs-100);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wc-ink-inv);
}
.wc-footer__links { display: grid; }
.wc-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  color: var(--wc-ink-inv-2);
  transition: color var(--wc-dur-s) var(--wc-ease-out);
}
/* 外部リンクを示すアイコンは本文より一段控えめに */
.wc-footer__links a .wc-icon,
.wc-nav__link .wc-icon { opacity: .65; }
@media (hover: hover) { .wc-footer__links a:hover { color: var(--wc-ink-inv); } }

.wc-footer__social { display: flex; gap: 10px; margin-top: 6px; }
.wc-footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--wc-line-ink);
  border-radius: var(--wc-radius-s);
  color: var(--wc-ink-inv);
  transition: border-color var(--wc-dur-s) var(--wc-ease-out),
              background-color var(--wc-dur-s) var(--wc-ease-out);
}
@media (hover: hover) {
  .wc-footer__social a:hover { border-color: var(--wc-ink-inv); background: rgba(255, 255, 255, .08); }
}

.wc-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  padding-block: 22px 30px;
  border-top: 1px solid var(--wc-line-ink);
  font-size: var(--wc-fs-100);
  color: rgba(255, 255, 255, .6);
}
.wc-footer__bottom .wc-font-en { font-family: var(--wc-font-en); letter-spacing: .04em; }

@media (min-width: 900px) {
  .wc-footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    gap: 64px;
    padding-block: 72px 52px;
  }
  .wc-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   24. 静的ページ用（pricing / flow / faq / works / contact / 法務）
   -------------------------------------------------------------------------- */
.wc-page-head {
  padding-block: 34px 30px;
  border-bottom: 1px solid var(--wc-line);
  background: var(--wc-bg-alt);
}
.wc-page-head__title { margin-top: 10px; font-size: var(--wc-fs-700); }
.wc-page-head__lead { margin-top: 16px; max-width: 34em; font-size: var(--wc-fs-lead); line-height: 1.95; }
@media (min-width: 768px) { .wc-page-head { padding-block: 44px 42px; } }

.wc-breadcrumb { font-size: var(--wc-fs-100); color: var(--wc-ink-3); }
.wc-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.wc-breadcrumb__list li { display: flex; align-items: center; gap: 8px; }
.wc-breadcrumb__list li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  rotate: 45deg;
  opacity: .7;
}
.wc-breadcrumb a { display: inline-flex; align-items: center; min-height: 32px; }
@media (hover: hover) { .wc-breadcrumb a:hover { color: var(--wc-ink); text-decoration: underline; } }
.wc-breadcrumb [aria-current="page"] { color: var(--wc-ink-2); }

/* 法務・規約などの本文 */
.wc-prose { font-size: var(--wc-fs-400); line-height: 1.95; }
.wc-prose > * + * { margin-top: 1.1em; }
.wc-prose h2 {
  margin-top: 2.4em;
  padding-top: 1.4em;
  border-top: 1px solid var(--wc-line);
  font-size: clamp(1.1875rem, 1rem + .9vw, 1.5rem);
}
.wc-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.wc-prose h3 { margin-top: 1.9em; font-size: var(--wc-fs-600); }
.wc-prose ul, .wc-prose ol { padding-left: 1.3em; }
.wc-prose ul { list-style: disc; }
.wc-prose ol { list-style: decimal; }
.wc-prose li { margin-top: .5em; }
.wc-prose li::marker { color: var(--wc-ink-3); }
.wc-prose a { color: var(--wc-brand); text-decoration: underline; }
.wc-prose strong { color: var(--wc-ink); }

/* 目次 */
.wc-toc {
  padding: 20px;
  border: 1px solid var(--wc-line-strong);
  border-radius: var(--wc-radius-m);
  background: var(--wc-surface);
}
.wc-toc__title {
  margin-bottom: 10px;
  font-size: var(--wc-fs-200);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--wc-ink-3);
}
.wc-toc__list { display: grid; }
.wc-toc__list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--wc-fs-300);
  color: var(--wc-ink-2);
}
@media (hover: hover) { .wc-toc__list a:hover { color: var(--wc-brand); } }

/* 定義リスト（特商法など） */
.wc-deflist { border-top: 1px solid var(--wc-ink); }
.wc-deflist__row {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--wc-line);
}
.wc-deflist__term { font-size: var(--wc-fs-300); font-weight: 700; color: var(--wc-ink); }
.wc-deflist__desc { font-size: var(--wc-fs-300); line-height: 1.85; }
@media (min-width: 700px) {
  .wc-deflist__row { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 24px; padding: 18px 0; }
}

/* 横に広い表：スマホは横スクロール＋スワイプ提示 */
.wc-swipe { position: relative; }
.wc-swipe__hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: var(--wc-fs-100);
  color: var(--wc-ink-3);
}
.wc-swipe__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.wc-swipe__scroll > * { scroll-snap-align: start; }
.wc-swipe::after {
  content: "";
  position: absolute;
  top: 26px;
  right: 0;
  bottom: 4px;
  width: 36px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(251, 250, 247, 0), var(--wc-bg));
}
.wc-section--alt .wc-swipe::after { background: linear-gradient(90deg, rgba(243, 240, 233, 0), var(--wc-bg-alt)); }
@media (min-width: 900px) {
  .wc-swipe__hint { display: none; }
  .wc-swipe::after { display: none; }
  .wc-swipe__scroll { overflow: visible; }
}

.wc-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--wc-fs-300);
  background: var(--wc-surface);
}
.wc-table th,
.wc-table td {
  padding: 14px 16px;
  border: 1px solid var(--wc-line);
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}
.wc-table thead th {
  background: var(--wc-ink);
  color: var(--wc-ink-inv);
  font-family: var(--wc-font-en);
  font-size: var(--wc-fs-200);
  font-weight: 700;
  letter-spacing: .06em;
  border-color: var(--wc-ink);
  white-space: nowrap;
}
.wc-table tbody th { background: var(--wc-bg-alt); font-weight: 700; color: var(--wc-ink); }

/* 表をスマホでカードに組み替える版 */
@media (max-width: 699px) {
  .wc-table--stack { min-width: 0; }
  .wc-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .wc-table--stack tr {
    display: grid;
    margin-bottom: 12px;
    border: 1px solid var(--wc-line-strong);
    border-radius: var(--wc-radius-s);
    overflow: hidden;
  }
  .wc-table--stack td,
  .wc-table--stack th {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 12px;
    border: 0;
    border-bottom: 1px solid var(--wc-line);
  }
  .wc-table--stack tr > *:last-child { border-bottom: 0; }
  .wc-table--stack td::before,
  .wc-table--stack tbody th::before {
    content: attr(data-label);
    font-size: var(--wc-fs-200);
    font-weight: 700;
    color: var(--wc-ink-3);
  }
}

/* カード（汎用） */
.wc-card {
  padding: 22px 20px;
  border: 1px solid var(--wc-line-strong);
  border-radius: var(--wc-radius-m);
  background: var(--wc-surface);
}
.wc-card__title { font-size: var(--wc-fs-600); margin-bottom: 8px; }
.wc-card__body { font-size: var(--wc-fs-300); line-height: 1.85; }
@media (min-width: 768px) { .wc-card { padding: 26px 26px; } }

/* タブ（pricing / works 用） */
.wc-tabs__list {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--wc-line-strong);
  overflow-x: auto;
}
.wc-tabs__tab {
  position: relative;
  min-height: 48px;
  padding: 12px 16px;
  white-space: nowrap;
  font-size: var(--wc-fs-300);
  font-weight: 700;
  color: var(--wc-ink-3);
}
.wc-tabs__tab.is-active { color: var(--wc-ink); }
.wc-tabs__tab.is-active::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 2px;
  background: var(--wc-brand);
}
.wc-tabs__panel { padding-top: 26px; }
.wc-tabs__panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   25. Utilities
   -------------------------------------------------------------------------- */
.wc-stack-8  > * + * { margin-top: 8px; }
.wc-stack-16 > * + * { margin-top: 16px; }
.wc-stack-24 > * + * { margin-top: 24px; }
.wc-stack-32 > * + * { margin-top: 32px; }
.wc-mt-16 { margin-top: 16px; }
.wc-mt-24 { margin-top: 24px; }
.wc-mt-32 { margin-top: 32px; }
.wc-mt-40 { margin-top: 40px; }
.wc-font-en { font-family: var(--wc-font-en); }

/* --------------------------------------------------------------------------
   26. Print
   -------------------------------------------------------------------------- */
@media print {
  .wc-header, .wc-dock, .wc-drawer, .wc-skip, .wc-hero__canvas { display: none !important; }
  body { background: #fff; color: #000; }
  .wc-section { padding-block: 20px; }
}

/* --------------------------------------------------------------------------
   27. Duo grid（2カラム。含まれるもの／含まれないもの 等）
   -------------------------------------------------------------------------- */
.wc-duo { display: grid; gap: 16px; }
@media (min-width: 760px) {
  .wc-duo { grid-template-columns: 1fr 1fr; gap: 20px; }
}
.wc-duo > .wc-card { height: 100%; }

/* --------------------------------------------------------------------------
   28. 業務システム向けコンポーネント
       トップページ（業務システム主役）と system.html / web.html で使う。
       既存トークン（色・余白・角丸・影）だけで組み、新しい色は増やさない。
   -------------------------------------------------------------------------- */

/* --- 28-1. ステータスバッジ（開発中／準備中 など） --- */
.wc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--wc-line-strong);
  border-radius: 999px;
  background: var(--wc-bg-alt);
  font-size: var(--wc-fs-100);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--wc-ink-3);
  white-space: nowrap;
}
.wc-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--wc-line-strong);
}
.wc-badge--dev { border-color: rgba(201, 63, 22, .32); background: var(--wc-brand-soft); color: var(--wc-brand-2); }
.wc-badge--dev::before { background: var(--wc-brand); }
.wc-section--ink .wc-badge {
  border-color: var(--wc-line-ink);
  background: rgba(255, 255, 255, .06);
  color: var(--wc-ink-inv-2);
}
.wc-section--ink .wc-badge::before { background: var(--wc-accent); }

/* --- 28-2. 注記バー（想定プラン・イメージ画面などの但し書き） --- */
.wc-flag {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px dashed var(--wc-line-strong);
  border-radius: var(--wc-radius-s);
  background: var(--wc-bg-alt);
  font-size: var(--wc-fs-100);
  line-height: 1.8;
  color: var(--wc-ink-3);
}
.wc-flag .wc-icon { flex: 0 0 auto; margin-top: .3em; color: var(--wc-ink-3); }
.wc-flag strong { color: var(--wc-ink-2); }
.wc-section--ink .wc-flag {
  border-color: var(--wc-line-ink);
  background: rgba(255, 255, 255, .05);
  color: var(--wc-ink-inv-2);
}
.wc-section--ink .wc-flag strong,
.wc-section--ink .wc-flag .wc-icon { color: var(--wc-ink-inv); }

/* --- 28-3. 管理画面風モック（ヒーロー／system.html） --- */
.wc-ui {
  position: relative;
  width: 100%;
  border: 1px solid var(--wc-line-strong);
  border-radius: var(--wc-radius-m);
  background: var(--wc-surface);
  box-shadow: var(--wc-shadow-2);
  overflow: hidden;
  font-family: var(--wc-font-jp);
  line-height: 1.5;
  letter-spacing: 0;
}
.wc-ui__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--wc-line);
  background: var(--wc-bg-alt);
}
.wc-ui__dots { display: flex; gap: 5px; }
.wc-ui__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wc-line-strong);
}
.wc-ui__url {
  flex: 1 1 auto;
  min-width: 0;
  padding: 3px 10px;
  border: 1px solid var(--wc-line);
  border-radius: 999px;
  background: var(--wc-surface);
  font-family: var(--wc-font-en);
  font-size: 10px;
  color: var(--wc-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wc-ui__body { display: grid; grid-template-columns: 78px minmax(0, 1fr); }
.wc-ui__aside {
  padding: 12px 8px;
  border-right: 1px solid var(--wc-line);
  background: var(--wc-bg-alt);
  display: grid;
  gap: 3px;
  align-content: start;
}
.wc-ui__aside b {
  display: block;
  margin-bottom: 6px;
  padding-left: 6px;
  font-family: var(--wc-font-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--wc-ink-3);
}
.wc-ui__navitem {
  display: block;
  padding: 6px 8px;
  border-radius: var(--wc-radius-s);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--wc-ink-3);
}
.wc-ui__navitem.is-on {
  background: var(--wc-ink);
  color: var(--wc-ink-inv);
  font-weight: 700;
}
.wc-ui__main { padding: 14px 14px 16px; display: grid; gap: 12px; min-width: 0; }
.wc-ui__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wc-ui__title { font-size: 12.5px; font-weight: 700; color: var(--wc-ink); }
.wc-ui__pill {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--wc-brand);
  color: var(--wc-brand-ink);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.wc-ui__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wc-ui__tile {
  padding: 9px 10px;
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-radius-s);
  background: var(--wc-bg);
}
.wc-ui__tile i {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  color: var(--wc-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wc-ui__tile b {
  display: block;
  margin-top: 2px;
  font-family: var(--wc-font-en);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--wc-ink);
  font-variant-numeric: tabular-nums;
}
.wc-ui__tile b small { font-family: var(--wc-font-jp); font-size: 9.5px; font-weight: 700; margin-left: 1px; }

/* 棒グラフ */
.wc-ui__chart {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 6px;
  height: 66px;
  padding: 10px 10px 0;
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-radius-s);
  background: var(--wc-bg);
}
.wc-ui__chart span {
  display: block;
  border-radius: 2px 2px 0 0;
  background: var(--wc-sand);
}
.wc-ui__chart span.is-hi { background: var(--wc-brand); }

/* 一覧テーブル */
.wc-ui__table {
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-radius-s);
  overflow: hidden;
}
.wc-ui__row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--wc-line);
  font-size: 10.5px;
  color: var(--wc-ink-2);
}
.wc-ui__row:last-child { border-bottom: 0; }
.wc-ui__row > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-ui__row--head {
  background: var(--wc-bg-alt);
  font-weight: 700;
  color: var(--wc-ink-3);
  font-size: 9.5px;
  letter-spacing: .02em;
}
.wc-ui__tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--wc-bg-alt);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--wc-ink-3);
}
.wc-ui__tag--ok { background: rgba(6, 132, 58, .12); color: var(--wc-line-green-2); }
.wc-ui__tag--wait { background: var(--wc-brand-soft); color: var(--wc-brand-2); }

/* ヒーローのモック配置（管理画面＋スマホ＋チップ） */
.wc-mockset { position: relative; width: 100%; padding-bottom: 34px; }
.wc-mockset .wc-ui { width: min(100%, 540px); margin-inline: auto; }
.wc-mockset__phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 116px;
  padding: 6px;
  border: 1px solid #34302b;
  border-radius: 18px;
  background: linear-gradient(180deg, #2c2823, #1b1815);
  box-shadow: var(--wc-shadow-2);
}
.wc-mockset__screen {
  border-radius: 13px;
  background: var(--wc-surface);
  padding: 9px 8px;
  display: grid;
  gap: 6px;
}
.wc-mockset__screen i {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  color: var(--wc-ink-3);
}
.wc-mockset__screen b {
  font-family: var(--wc-font-en);
  font-size: 15px;
  line-height: 1;
  color: var(--wc-ink);
  font-variant-numeric: tabular-nums;
}
.wc-mockset__btn {
  display: grid;
  place-items: center;
  height: 26px;
  border-radius: var(--wc-radius-s);
  background: var(--wc-brand);
  color: var(--wc-brand-ink);
  font-size: 10px;
  font-weight: 700;
}
.wc-mockset__btn + .wc-mockset__btn { background: var(--wc-bg-alt); color: var(--wc-ink-2); }
.wc-mockset__chip {
  position: absolute;
  left: 0;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-radius-m);
  background: var(--wc-surface);
  box-shadow: var(--wc-shadow-1);
  font-size: var(--wc-fs-100);
  font-weight: 700;
  color: var(--wc-ink);
  white-space: nowrap;
}
.wc-mockset__chip .wc-icon { width: 15px; height: 15px; color: var(--wc-brand); }

@media (max-width: 419px) {
  .wc-mockset__phone { width: 94px; }
  .wc-mockset__chip { padding: 7px 10px; gap: 6px; }
  .wc-ui__body { grid-template-columns: 64px minmax(0, 1fr); }
  .wc-ui__main { padding: 11px 10px 12px; }
  .wc-ui__row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .wc-ui__row > :nth-child(3) { display: none; }
}
@media (min-width: 900px) {
  .wc-mockset { padding-bottom: 42px; }
  .wc-mockset__phone { width: 134px; right: -6px; }
}

.wc-ui-note {
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: var(--wc-fs-100);
  line-height: 1.7;
  color: var(--wc-ink-3);
}
.wc-ui-note .wc-icon { flex: 0 0 auto; margin-top: .3em; }

/* --- 28-4. 業務システム用ヒーロー --- */
.wc-hero--sys .wc-hero__stage { min-height: 0; margin-top: 38px; }
@media (min-width: 900px) {
  .wc-hero--sys .wc-hero__inner { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 44px; }
  .wc-hero--sys .wc-hero__stage { min-height: 0; margin-top: 0; align-items: center; }
}

/* --- 28-5. 困りごとカード --- */
.wc-probs { display: grid; gap: 12px; }
@media (min-width: 560px) { .wc-probs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .wc-probs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }

.wc-prob {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 20px 18px;
  border: 1px solid var(--wc-line-strong);
  border-radius: var(--wc-radius-m);
  background: var(--wc-surface);
}
.wc-prob__head { display: flex; align-items: center; gap: 10px; }
.wc-prob__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid var(--wc-line-strong);
  border-radius: var(--wc-radius-s);
  background: var(--wc-bg-alt);
  color: var(--wc-brand);
}
.wc-prob__icon .wc-icon { width: 17px; height: 17px; }
.wc-prob__title { font-size: var(--wc-fs-400); font-weight: 700; line-height: 1.5; color: var(--wc-ink); }
.wc-prob__body { font-size: var(--wc-fs-300); line-height: 1.8; }

/* --- 28-6. バラバラ → ひとつに（情報が整理される表現） --- */
.wc-merge {
  display: grid;
  gap: 14px;
  align-items: center;
  padding: 22px 18px;
  border: 1px solid var(--wc-line-strong);
  border-radius: var(--wc-radius-m);
  background: var(--wc-surface);
}
.wc-merge__label {
  margin-bottom: 10px;
  font-size: var(--wc-fs-100);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--wc-ink-3);
}
.wc-merge__scatter { display: flex; flex-wrap: wrap; gap: 7px; }
.wc-merge__scatter li {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border: 1px solid var(--wc-line-strong);
  border-radius: var(--wc-radius-s);
  background: var(--wc-bg-alt);
  font-size: var(--wc-fs-200);
  color: var(--wc-ink-2);
}
.wc-merge__scatter li:nth-child(2n) { rotate: -1.4deg; }
.wc-merge__scatter li:nth-child(3n) { rotate: 1.6deg; }
.wc-merge__arrow { display: grid; place-items: center; color: var(--wc-brand); }
.wc-merge__arrow .wc-icon { width: 26px; height: 26px; rotate: 90deg; }
.wc-merge__one {
  padding: 16px 16px;
  border: 1.5px solid var(--wc-ink);
  border-radius: var(--wc-radius-m);
  background: var(--wc-bg);
}
.wc-merge__one p {
  font-size: var(--wc-fs-400);
  font-weight: 700;
  color: var(--wc-ink);
  line-height: 1.6;
}
.wc-merge__one ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wc-merge__one li {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--wc-brand-soft);
  border: 1px solid rgba(201, 63, 22, .22);
  font-size: var(--wc-fs-100);
  font-weight: 700;
  color: var(--wc-brand-2);
}
@media (min-width: 820px) {
  .wc-merge {
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    gap: 18px;
    padding: 26px 26px;
  }
  .wc-merge__arrow .wc-icon { rotate: none; }
}

/* --- 28-7. 業務システム一覧（モジュールカード） --- */
.wc-mods { display: grid; gap: 14px; }
@media (min-width: 620px) { .wc-mods { grid-template-columns: 1fr 1fr; } }

.wc-mod {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 24px 22px;
  border: 1px solid var(--wc-line-strong);
  border-radius: var(--wc-radius-m);
  background: var(--wc-surface);
}
.wc-mod__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wc-mod__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--wc-line-strong);
  border-radius: var(--wc-radius-s);
  background: var(--wc-bg-alt);
  color: var(--wc-brand);
}
.wc-mod__title { font-size: var(--wc-fs-600); line-height: 1.45; }
.wc-mod__body { font-size: var(--wc-fs-300); line-height: 1.85; }
.wc-mod__list { display: grid; gap: 6px; margin-top: 2px; }
.wc-mod__list li {
  position: relative;
  padding-left: 16px;
  font-size: var(--wc-fs-200);
  line-height: 1.75;
  color: var(--wc-ink-3);
}
.wc-mod__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .72em;
  width: 6px;
  height: 1.5px;
  background: var(--wc-line-strong);
}

/* カード全体を詳細ページへの導線にする。
   リンクの ::after でカードを覆い、クリック領域をカード全面に広げる（stretched link）。 */
.wc-mod { position: relative; transition: border-color .18s ease-out, background-color .18s ease-out; }
.wc-mod:has(.wc-mod__more:hover),
.wc-mod:has(.wc-mod__more:focus-visible) { border-color: var(--wc-brand); background: var(--wc-brand-soft); }

.wc-mod__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: var(--wc-fs-200);
  line-height: 1.6;
  color: var(--wc-brand-2);
  text-decoration: none;
}
.wc-mod__more::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.wc-mod__more .wc-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  transition: transform .18s ease-out;
}
.wc-mod:has(.wc-mod__more:hover) .wc-mod__more .wc-icon { transform: translateX(3px); }
.wc-mod__more:focus-visible { outline: none; }
.wc-mod:has(.wc-mod__more:focus-visible) { outline: 2px solid var(--wc-brand); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .wc-mod, .wc-mod__more .wc-icon { transition: none; }
}

/* --- 28-8. 特徴リスト --- */
.wc-feats { display: grid; border-top: 1px solid var(--wc-line-strong); }
@media (min-width: 720px) { .wc-feats { grid-template-columns: 1fr 1fr; column-gap: 34px; } }
@media (min-width: 1040px) { .wc-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.wc-feat {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 20px 2px;
  border-bottom: 1px solid var(--wc-line);
}
.wc-feat__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--wc-line-strong);
  border-radius: var(--wc-radius-s);
  color: var(--wc-brand);
}
.wc-feat__title { font-size: var(--wc-fs-400); font-weight: 700; line-height: 1.5; color: var(--wc-ink); padding-top: 4px; }
.wc-feat__body { font-size: var(--wc-fs-300); line-height: 1.8; }
.wc-section--ink .wc-feats { border-top-color: var(--wc-line-ink); }
.wc-section--ink .wc-feat { border-bottom-color: var(--wc-line-ink); }
.wc-section--ink .wc-feat__icon { border-color: var(--wc-line-ink); color: var(--wc-accent); }
.wc-section--ink .wc-feat__body { color: var(--wc-ink-inv-2); }

/* --- 28-9. 6ステップの導入フロー --- */
.wc-track { display: grid; gap: 12px; }
@media (min-width: 680px) { .wc-track { grid-template-columns: 1fr 1fr; gap: 14px; } }
@media (min-width: 1020px) { .wc-track { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.wc-track__item {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 22px 20px;
  border: 1px solid var(--wc-line-strong);
  border-radius: var(--wc-radius-m);
  background: var(--wc-surface);
}
.wc-track__num {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--wc-font-en);
  font-size: var(--wc-fs-200);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--wc-brand);
}
.wc-track__num::after {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--wc-line-strong);
}
.wc-track__title { font-size: var(--wc-fs-600); line-height: 1.5; }
.wc-track__body { font-size: var(--wc-fs-300); line-height: 1.85; }

/* --- 28-10. タグ列（対応内容など） --- */
.wc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wc-chips li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--wc-line-strong);
  border-radius: 999px;
  background: var(--wc-surface);
  font-size: var(--wc-fs-200);
  font-weight: 500;
  color: var(--wc-ink-2);
}
.wc-chips .wc-icon { width: 14px; height: 14px; color: var(--wc-brand); }
.wc-section--ink .wc-chips li {
  border-color: var(--wc-line-ink);
  background: rgba(255, 255, 255, .06);
  color: var(--wc-ink-inv-2);
}
.wc-section--ink .wc-chips .wc-icon { color: var(--wc-accent); }

/* --- 28-11. Web制作への導線ブロック --- */
.wc-webx { display: grid; gap: 28px; align-items: center; }
@media (min-width: 920px) {
  .wc-webx { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 52px; }
}
.wc-webx__visual {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--wc-line-strong);
  border-radius: var(--wc-radius-m);
  background: var(--wc-bg-alt);
}
.wc-webx__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wc-webx__card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 16px 14px;
  border: 1px solid var(--wc-line-strong);
  border-radius: var(--wc-radius-s);
  background: var(--wc-surface);
}
.wc-webx__card i {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--wc-radius-s);
  background: var(--wc-bg-alt);
  color: var(--wc-brand);
}
.wc-webx__card b { font-size: var(--wc-fs-300); color: var(--wc-ink); line-height: 1.5; }
.wc-webx__card span { font-size: var(--wc-fs-100); line-height: 1.7; color: var(--wc-ink-3); }
.wc-webx__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: var(--wc-radius-s);
  background: var(--wc-surface);
  border: 1px dashed var(--wc-line-strong);
  font-size: var(--wc-fs-100);
  font-weight: 700;
  color: var(--wc-ink-2);
  text-align: center;
  line-height: 1.6;
}
.wc-webx__link .wc-icon { flex: 0 0 auto; width: 14px; height: 14px; color: var(--wc-brand); }

/* --- 28-12. 想定プラン（3カラム） --- */
@media (min-width: 900px) {
  .wc-plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.wc-plan__note { font-size: var(--wc-fs-100); line-height: 1.7; color: var(--wc-ink-3); }
.wc-plan--feature .wc-plan__note { color: var(--wc-ink-inv-2); }
.wc-plan__amount--sm { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); }

/* --- 28-13. ヘッダーナビの微調整（項目が増えたぶんの詰め） --- */
@media (min-width: 900px) and (max-width: 1099px) {
  .wc-nav__link { padding: 0 9px; font-size: var(--wc-fs-200); }
  .wc-nav__link::after { left: 9px; right: 9px; }
  .wc-header__cta { padding: 10px 14px; font-size: var(--wc-fs-300); }
}
/* ==========================================================================
   29. Editorial layer（共通コンポーネント層の上書き）
       styles.css の末尾に追記する前提。既存の宣言は消さず、後勝ちで上書きする。
       方針: ほぼ無彩色＋朱1色 / 見出しは明朝 weight 400 / ボタンはピル /
             コンテンツカードは大きめ角丸・影なし・平坦 /
             影は「浮遊するプロダクトUI断片」だけ / セクションは静かに交互。
       ヒーロー（.wc-hero 配下）はこのレイヤーでは扱わない。
   ========================================================================== */

/* --------------------------------------------------------------------------
   29-1. Tokens（追記）
   -------------------------------------------------------------------------- */
:root {
  /* ---- 明朝（見出し専用。本文には使わない） ----
     Noto Serif JP 400 は全ページで既に読み込み済み。 */
  --wc-font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;

  /* ---- Radius（構造は「ピル」と「大きめ角丸」の2つだけ） ---- */
  --wc-radius-pill: 999px;   /* ボタン・チップ・タグ */
  --wc-radius-card: 20px;    /* コンテンツカード */
  --wc-radius-ui:  16px;    /* 浮遊するUI断片・小さい入れ子カード */

  /* ---- Elevation（浮遊するプロダクトUI断片だけに使う） ----
     黒ではなく墨（23,22,20）で暖色寄りに。既存の .wc-ui は 1px の枠を持つので
     参考元の 0 0 0 1px リングは重ねず、柔らかい2層だけにしている。 */
  --wc-shadow-float:
    0 20px 25px -5px rgba(23, 22, 20, .12),
    0 8px 10px -6px rgba(23, 22, 20, .10);

  /* ---- Surface（静かな交互バンド用） ----
     --wc-bg #fbfaf7 と --wc-bg-alt #f3f0e9 の中間。地の切り替わりを弱める。 */
  --wc-fog: #f7f5f0;

  /* ---- 余白を広げる ---- */
  --wc-section-y: 64px;
}

@media (min-width: 768px)  { :root { --wc-section-y: 96px;  } }
@media (min-width: 1120px) { :root { --wc-section-y: 120px; } }

/* --------------------------------------------------------------------------
   29-2. 見出しタイポグラフィ（h1 / h2 だけ明朝 weight 400）
       h3 以下は Noto Sans JP weight 700 のまま。本文まで明朝にはしない。
   -------------------------------------------------------------------------- */
h1,
h2,
.wc-page-head__title,
.wc-cta__title {
  font-family: var(--wc-font-serif);
  font-weight: 400;
  letter-spacing: -.01em;
  /* 明朝 400 はウエイトが軽いので、和文でも字面が締まって見える */
  font-feature-settings: "palt" 0;
}

/* 和文の明朝は行間を詰めすぎない。1.42〜1.5 の範囲に収める。 */
h1, .wc-page-head__title { line-height: 1.46; }
h2, .wc-cta__title       { line-height: 1.5; }
@media (min-width: 768px) {
  h1, .wc-page-head__title { line-height: 1.44; }
  h2, .wc-cta__title       { line-height: 1.46; }
}

/* 濃色セクションでも太らせない（既存の色指定はそのまま活かす） */
.wc-section--ink h1,
.wc-section--ink h2 { font-weight: 400; }

/* .wc-prose の h2 も同じ扱い（法務ページの節見出し） */
.wc-prose h2 { font-weight: 400; }

/* --------------------------------------------------------------------------
   29-3. Eyebrow（タグ／カテゴリラベル）
       背景なし・枠なしのまま、太さだけ一段落として静かにする。
       朱の短い罫（::before）は WebCraft の識別子なので残す。
   -------------------------------------------------------------------------- */
.wc-eyebrow { font-weight: 600; }

/* --------------------------------------------------------------------------
   29-4. Buttons（ピル化）
       塗り（--ink / --primary / --line）とゴースト（--ghost）で対を成立させる。
       影は付けない。--text はテキストリンクなのでピルにしない。
   -------------------------------------------------------------------------- */
.wc-btn {
  border-radius: var(--wc-radius-pill);
  box-shadow: none;
}
.wc-btn--lg,
.wc-btn--block,
.wc-btn--line,
.wc-btn--ink,
.wc-btn--ghost,
.wc-btn--primary { border-radius: var(--wc-radius-pill); }

/* ピルの中の丸。22px の角丸6pxのままだと外形と喧嘩するので真円にする。 */
.wc-btn--line .wc-btn__mark { border-radius: var(--wc-radius-pill); }

/* ゴースト＝1px の枠＋透明地。塗りボタンと同じ墨で線を引き、対にする。 */
.wc-btn--ghost {
  background: transparent;
  border-color: var(--wc-ink);
  color: var(--wc-ink);
}
@media (hover: hover) {
  .wc-btn--ghost:hover {
    border-color: var(--wc-ink);
    background: var(--wc-bg-alt);
    box-shadow: none;
  }
}
/* 濃色セクション／フッターの上書き（.wc-section--ink .wc-btn--ghost）は
   特異度 0,2,0 なので、上の 0,1,0 の指定に影響されず生き残る。 */

/* テキストリンク型はピルにしない（最も弱い操作要素のまま） */
.wc-btn--text { border-radius: 3px; }

/* --------------------------------------------------------------------------
   29-5. Cards（平坦化・角丸統一）
       地は --wc-surface か --wc-bg-alt。枠線はヘアラインのまま。影は付けない。
   -------------------------------------------------------------------------- */
.wc-card,
.wc-prob,
.wc-mod,
.wc-track__item,
.wc-plan,
.wc-toc,
.wc-merge,
.wc-webx__visual,
.wc-initfee {
  border-radius: var(--wc-radius-card);
  box-shadow: none;
}

/* 推しプランも平坦に。濃色の面だけで十分に立つ。 */
.wc-plan--feature { box-shadow: none; }

/* プラン上端のタグはピルのまま */
.wc-plan__tag { border-radius: var(--wc-radius-pill); }

/* 入れ子の小カード。参考元の smallCards 16px に合わせる（外形20pxより一段小さく） */
.wc-merge__one,
.wc-webx__card,
.wc-webx__link { border-radius: var(--wc-radius-ui); }

/* 散らばった情報のチップはピルへ（チップ言語に統一） */
.wc-merge__scatter li { border-radius: var(--wc-radius-pill); }

/* カード内の小さいアイコン枠。角丸6pxだけ取り残されないよう一段丸める。 */
.wc-prob__icon,
.wc-mod__icon,
.wc-feat__icon,
.wc-webx__card i,
.wc-sys-item__icon { border-radius: var(--wc-radius-m); }

/* 注記ブロック。左の朱罫は残しつつ、右側だけ大きく丸める。 */
.wc-notice { border-radius: 0 var(--wc-radius-ui) var(--wc-radius-ui) 0; }
.wc-flag   { border-radius: var(--wc-radius-m); }

/* スマホでカードに組み替わる表 */
@media (max-width: 699px) {
  .wc-table--stack tr { border-radius: var(--wc-radius-ui); }
}

/* --------------------------------------------------------------------------
   29-6. Floating product artifact（影を持つのはここだけ）
   -------------------------------------------------------------------------- */
.wc-ui {
  border-radius: var(--wc-radius-ui);
  box-shadow: var(--wc-shadow-float);
}
/* 実績のブラウザモックも「浮かぶプロダクトUI断片」として同じ扱いにする */
.wc-example__frame {
  border-radius: var(--wc-radius-ui);
  box-shadow: var(--wc-shadow-float);
}

/* --------------------------------------------------------------------------
   29-7. Sections（静かな交互）
       白（--wc-bg）と極薄グレー（--wc-fog）で、コントラストを立てずに交互させる。
       .wc-section--ink は濃色のまま残す。
   -------------------------------------------------------------------------- */
.wc-section--alt { background: var(--wc-fog); }
.wc-page-head    { background: var(--wc-fog); }

/* --- --wc-bg-alt を「地に合わせる」目的で使っていた箇所の手当て --- */

/* フローの番号丸は、背後の縦罫を隠すために地と同色でなければならない */
.wc-section--alt .wc-step__num { background: var(--wc-fog); }

/* 横スクロール表の右端フェードも地に合わせる（#f7f5f0 = --wc-fog） */
.wc-section--alt .wc-swipe::after {
  background: linear-gradient(90deg, rgba(247, 245, 240, 0), var(--wc-fog));
}

/* --------------------------------------------------------------------------
   29-8. Chips / Badge
       チップはピルのまま。バッジは「バッジ」をやめて控えめなラベルに寄せる。
   -------------------------------------------------------------------------- */
.wc-chips li {
  border-radius: var(--wc-radius-pill);
  border-color: var(--wc-line);
}

.wc-badge {
  border-radius: var(--wc-radius-pill);
  border-color: transparent;
  background: var(--wc-bg-alt);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--wc-ink-3);
}
/* 開発中バッジ。枠を外し、朱の点と極薄の面だけで示す。
   （--dev は既存ファイル側が先に来るため、枠の打ち消しを明示的に再宣言する） */
.wc-badge--dev {
  border-color: transparent;
  background: var(--wc-brand-soft);
  color: var(--wc-brand-2);
}
/* 濃色セクションの .wc-badge（特異度 0,2,0）は既存指定のまま生きる */

/* --------------------------------------------------------------------------
   30. Hero v2（明朝の大見出し＋浮遊するプロダクトUI断片）
   styles.css の末尾に追記する前提。既存の汎用クラスは書き換えず、
   .wc-hero2 配下にスコープするか wc-hero2__ 接頭辞の新クラスで足す。
   --wc-font-serif / --wc-shadow-float / --wc-radius-ui は 29-1 で定義済み。
   -------------------------------------------------------------------------- */


/* --- 30-1. セクションの器 --- */
.wc-hero2 {
  padding-block: 40px 56px;
  background: var(--wc-bg);
}
.wc-hero2__inner { position: relative; z-index: 1; }

/* --- 30-2. コピー（スマホは左寄せ、広い場ではセンター寄せ） --- */
/* h1「…管理を、」が最大サイズでも1行に収まる幅 */
.wc-hero2__copy { max-width: 50rem; }

.wc-hero2 .wc-hero__eyebrow { margin-bottom: 20px; }

.wc-hero2__title {
  margin-bottom: 22px;
  font-family: var(--wc-font-serif);
  /* 明朝は太らせない。参考スタイルの signature（weight 400 のまま） */
  font-weight: 400;
  font-size: clamp(1.6875rem, 1.05rem + 2.9vw, 3.375rem);   /* 27 → 54 */
  line-height: 1.46;
  letter-spacing: -.01em;
  color: var(--wc-ink);
  font-feature-settings: "palt" 1;
}
.wc-hero2__title .wc-mark { padding-inline: .08em; }

.wc-hero2__lead {
  max-width: 32em;
  font-size: var(--wc-fs-lead);
  line-height: 1.95;
  color: var(--wc-ink-2);
}

@media (min-width: 640px) {
  .wc-hero2__copy  { margin-inline: auto; text-align: center; }
  .wc-hero2__lead  { max-width: 34em; margin-inline: auto; }
  .wc-hero2__actions,
  .wc-hero2__notes { justify-content: center; }
  .wc-hero2__title { line-height: 1.44; }
}

/* --- 30-3. ピル型ボタン（ヒーロー内だけ。.wc-btn 本体は触らない） --- */
.wc-hero2 .wc-btn { border-radius: 999px; }
.wc-hero2 .wc-btn--ghost {
  background: transparent;
  border-color: var(--wc-ink);
  color: var(--wc-ink);
}
@media (hover: hover) {
  .wc-hero2 .wc-btn--ghost:hover {
    background: var(--wc-surface);
    border-color: var(--wc-ink);
    box-shadow: none;
  }
}

/* --- 30-4. 断片カードのコラージュ --- */
.wc-hero2__stage { margin-top: 40px; }

/* スマホ〜タブレットは重ねない：管理画面 → 小断片の順に素直に積む（表を隠さないため） */
.wc-hero2__collage {
  display: grid;
  gap: 14px;
  max-width: 620px;
  margin-inline: auto;
}

.wc-hero2__side { display: grid; gap: 14px; }
.wc-hero2__side--l { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* スマホではスマホモックを出さない（管理画面の表に重ねないため） */
.wc-hero2__side--r { display: none; }

.wc-hero2__art { position: relative; min-width: 0; }

/* 管理画面ウィンドウ：影は断片カードと同じ扱いに揃える */
.wc-hero2 .wc-ui {
  border-color: var(--wc-line);
  border-radius: var(--wc-radius-ui);
  box-shadow: var(--wc-shadow-float);
}

/* 小断片カード（白い浮遊面） */
.wc-hero2__art--stat,
.wc-hero2__art--chart {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-radius-ui);
  background: var(--wc-surface);
  box-shadow: var(--wc-shadow-float);
}

/* グラフ断片は中央の行を伸ばして、隣の統計タイル断片と高さを揃える */
.wc-hero2__art--chart {
  align-content: stretch;
  grid-template-rows: auto minmax(66px, 1fr) auto;
}
.wc-hero2__art--chart .wc-ui__chart { height: auto; }

/* 統計タイルは縦積み（幅の狭い断片カードに収めるため） */
.wc-hero2__art--stat .wc-ui__tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; }

.wc-hero2__artlabel {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--wc-ink-3);
}
.wc-hero2__artfoot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--wc-ink);
}
.wc-hero2__artfoot .wc-icon { color: var(--wc-brand); }

/* スマートフォンの打刻画面 */
.wc-hero2__phone {
  padding: 6px;
  border: 1px solid #34302b;
  border-radius: 20px;
  background: linear-gradient(180deg, #2c2823, #1b1815);
  box-shadow: var(--wc-shadow-float);
}

/* サイドバーの項目は折り返さない（狭い幅で3行になって縦に伸びるのを防ぐ）。
   そのぶんメニュー幅を広げて「勤怠・シフト」が省略されないようにする。
   タイルとグラフを断片カードに出したので、本体の余白はこちらに回せる。 */
.wc-hero2 .wc-ui__body { grid-template-columns: 96px minmax(0, 1fr); }
.wc-hero2 .wc-ui__navitem,
.wc-hero2 .wc-ui__aside b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 表の「状態」列は、ヒーローでは狭い幅でも残す（タイル／グラフを外に出したぶんの余裕） */
@media (max-width: 419px) {
  .wc-hero2 .wc-ui__main { padding: 11px 10px 12px; }
  .wc-hero2 .wc-ui__row {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1.3fr);
    gap: 6px;
  }
  .wc-hero2 .wc-ui__row > :nth-child(3) { display: block; }
  .wc-hero2__art--stat,
  .wc-hero2__art--chart { padding: 10px; }
}

/* --- 30-5. 900px 以上：3カラムに開いて負のマージンで重ねる --- */
@media (min-width: 900px) {
  .wc-hero2 { padding-block: 68px 96px; }
  .wc-hero2__stage { margin-top: 56px; }

  .wc-hero2__collage {
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(420px, 50vw, 560px)) minmax(0, 1fr);
    align-items: center;
    gap: 0;
  }
  .wc-hero2__art--app { grid-column: 2; grid-row: 1; z-index: 1; }

  .wc-hero2__side {
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    position: relative;
    z-index: 2;   /* 断片は管理画面より前 */
  }
  .wc-hero2__side--l { grid-column: 1; align-items: flex-end; }
  .wc-hero2__side--r { grid-column: 3; align-items: flex-start; display: flex; }

  /* 負のマージンで管理画面の縁に食い込ませる（コラージュの要） */
  /* 管理画面の縁に軽く食い込ませる。サイドバーを潰しすぎない量に留める */
  .wc-hero2__art--stat  { width: min(100%, 178px); margin-right: -34px; }
  .wc-hero2__art--chart { width: min(100%, 206px); margin-right: -16px; margin-top: 8px; }
  /* スマホモックは表の「状態」列に被らない程度の食い込みに留める */
  .wc-hero2__art--phone { width: min(100%, 140px); margin-left: -16px; }
}

@media (min-width: 1120px) {
  .wc-hero2__art--stat  { width: min(100%, 196px); margin-right: -40px; }
  .wc-hero2__art--chart { width: min(100%, 224px); margin-right: -20px; }
  .wc-hero2__art--phone { width: min(100%, 152px); margin-left: -20px; }
}

/* --- 30-6. 注記（サンプル数値である旨。必ず残す） --- */
.wc-hero2__note { margin-top: 18px; }
@media (min-width: 640px) {
  .wc-hero2__note { max-width: 44em; margin-inline: auto; justify-content: center; }
}

/* --- 30-7. コラージュの微調整（統合時） --- */
/* 朱の下線は「蛍光ペン」に見せない。明朝の大きさだと帯が太くなるので開始位置を下げる。 */
.wc-hero2__title .wc-mark {
  background-image: linear-gradient(transparent 74%, rgba(232, 72, 31, .22) 74%);
}

@media (min-width: 900px) {
  /* 管理画面の縁に「触れる」程度に留める。サイドバーの項目名を切らない量。 */
  .wc-hero2__art--stat  { margin-right: -18px; }
  .wc-hero2__art--chart { margin-right: -10px; }
  .wc-hero2__art--phone { margin-left: -14px; }
}
@media (min-width: 1120px) {
  .wc-hero2__art--stat  { margin-right: -22px; }
  .wc-hero2__art--chart { margin-right: -12px; }
  .wc-hero2__art--phone { margin-left: -16px; }
}

/* --------------------------------------------------------------------------
   31. 統合後の調整
   -------------------------------------------------------------------------- */

/* --- 31-1. CTA帯：ボタンが2つになったので右列を縦積みにする ---
   auto のままだとボタン2つが横に並んで右列が広がり、左の明朝見出しが
   4行に折れて窮屈になっていた。右列に下限を与え、ボタンは縦に積む。 */
@media (min-width: 900px) {
  .wc-cta__inner { grid-template-columns: minmax(0, 1fr) minmax(272px, auto); }
  .wc-cta .wc-actions { flex-direction: column; align-items: stretch; }
  .wc-cta .wc-actions .wc-btn--block { width: 100%; }
}

/* --- 31-2. カードの中に置いた表は min-width を外す ---
   .wc-table の min-width:34rem は「横に広い表」を前提にした値。
   .wc-duo で2カラムに並べたカードの中では列幅を超えてしまい、
   768px 付近で表の右側が見切れていた（2列だけの表なので下限は不要）。 */
.wc-card .wc-table { min-width: 0; }

/* --- 31-3. 和文見出しの行分け ---
   text-wrap:pretty は欧文の単語孤立にしか効かず、分かち書きしない和文では
   「最終行が3文字だけ」という組みが全ページで発生していた。
   word-break:auto-phrase で文節の切れ目だけを候補にし、text-wrap:balance で
   そのなかから行長の揃う点を選ばせる。この2つは必ずセットで使う。
   未対応ブラウザは従来どおりの折り返しになるだけで壊れない。 */
h1, h2,
.wc-hero2__title,
.wc-cta__title,
.wc-page-head__title {
  /* 和文の文節（ぶんせつ）で折る。未対応ブラウザでは無視される */
  word-break: auto-phrase;
  /* そのうえで行長が揃う分割点を選ぶ。balance 単独だと語中で切れるため必ず併用する */
  text-wrap: balance;
}

/* --- 31-4. コラージュの重なりが、サイドバーの項目名に掛からないようにする ---
   断片カードは管理画面の「縁」に重ねたい。ただし重なりの下に文字があると
   事故に見えるので、ヒーローのサイドバーだけ左に逃げ代をつくる。 */
@media (min-width: 900px) {
  .wc-hero2 .wc-ui__body  { grid-template-columns: 118px minmax(0, 1fr); }
  .wc-hero2 .wc-ui__aside { padding-left: 28px; }
}

/* --- 31-5. ボタン内の長い英字（メールアドレス）がボタンからはみ出さないように ---
   contact.html の「メール」カードは 900px 付近で列幅が狭くなり、
   分割できない英字列がボタンの外へあふれていた。
   flex の子は min-content 幅より縮まないため、break-word では効かない。
   anywhere は min-content の計算自体を変えるので、ここではこちらを使う。
   和文はもともと任意の位置で折れるため、日本語ラベルの見た目は変わらない。 */
.wc-btn { overflow-wrap: anywhere; }

/* --- 31-6. 目次は行ごとの下線をやめる ---
   .wc-toc の項目はクラスなしの <a> なので a:where(:not([class])) の下線が乗り、
   5行並ぶと罫だらけに見えていた。リンクであることは並びと hover で示す。 */
.wc-toc__list a { text-decoration: none; }
@media (hover: hover) {
  .wc-toc__list a:hover { color: var(--wc-brand); text-decoration: underline; }
}

/* --- 31-7. 管理画面モックのサイドバー（ヒーロー以外でも折り返させない） ---
   28-3 のスマホ幅（64px）では「勤怠・シフト」が1文字ずつ縦に折れていた。
   ヒーローには 30 節で対処済みだが、system.html / web.html の
   濃色セクションに置いた .wc-ui も同じ状態だったので全体に適用する。 */
.wc-ui__navitem,
.wc-ui__aside b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* サイドバーは「勤怠・シフト」が省略されない幅を最低限確保する */
.wc-ui__body { grid-template-columns: 96px minmax(0, 1fr); }
@media (max-width: 419px) {
  .wc-ui__body { grid-template-columns: 96px minmax(0, 1fr); }
}

/* 統計タイルは3列固定をやめる。2カラムのカードに入れたときや狭い画面では
   自動で2列に折れ、余裕があるときだけ3列に開く。auto-fit なので
   タイルが3つでも空トラックは潰れ、横いっぱいに伸びる。 */
.wc-ui__tiles { grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); }

/* --- 31-8. ヒーロー見出しの折り返し ---
   「紙・Excel・LINE」は中黒でつないだ製品名の並びなので、途中で折ると
   行末に中黒が残る（分離禁止文字）。マークアップ側で nowrap にしたうえで、
   狭い画面だけ字面を詰めて「紙・Excel・LINEでの／管理を、もっとシンプルに。」
   の2行に収める。min() の左項が効くのは概ね 500px 未満だけで、
   それ以上の幅では従来の clamp() のカーブがそのまま残る。 */
.wc-hero2__title {
  font-size: min(6.3vw, clamp(1.6875rem, 1.05rem + 2.9vw, 3.375rem));
}

/* --- 31-9. 320px 級の端末では、ヒーローの表から「状態」列を落とす ---
   30 節でヒーローだけ3列を残しているが、320px ではステータスタグが
   省略されてしまう。読めない列を出すより落とすほうがよい。 */
@media (max-width: 359px) {
  .wc-hero2 .wc-ui__row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .wc-hero2 .wc-ui__row > :nth-child(3) { display: none; }
}

/* --------------------------------------------------------------------------
   32. WebCraft Business 実画面
   ダミーUIではなく、操作デモから撮影したスクリーンショットを見せる。
   -------------------------------------------------------------------------- */
.wc-product-demo {
  position: relative;
  width: min(100%, 1180px);
  margin: 52px auto 0;
  padding: 0 0 52px;
}

.wc-product-demo__main,
.wc-product-demo__float,
.wc-screen__frame {
  overflow: hidden;
  border: 1px solid rgba(33, 38, 42, .16);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 55px rgba(26, 32, 35, .14);
}

.wc-product-demo__main {
  position: relative;
  z-index: 1;
  width: min(86%, 980px);
  margin-inline: auto;
}

.wc-product-demo__bar,
.wc-screen__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--wc-line);
  background: #f6f7f7;
}

.wc-product-demo__bar > span { display: flex; gap: 5px; }
.wc-product-demo__bar i,
.wc-screen__bar > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c6cbcd;
}
.wc-product-demo__bar i:first-child,
.wc-screen__bar > span:first-child { background: #c93f16; }
.wc-product-demo__bar b,
.wc-screen__bar b {
  margin-left: 5px;
  color: var(--wc-ink-3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
}

.wc-product-demo img,
.wc-screen img {
  display: block;
  width: 100%;
  height: auto;
}

.wc-product-demo__float {
  position: absolute;
  z-index: 2;
  width: min(37%, 420px);
}
.wc-product-demo__float img {
  aspect-ratio: 16 / 8.8;
  object-fit: cover;
  object-position: top left;
}
.wc-product-demo__float figcaption {
  padding: 9px 12px;
  border-top: 1px solid var(--wc-line);
  color: var(--wc-ink);
  font-size: 10px;
  font-weight: 700;
  background: #fff;
}
.wc-product-demo__float--calendar { left: 0; bottom: 16px; transform: rotate(-1.2deg); }
.wc-product-demo__float--analytics { right: 0; bottom: 0; transform: rotate(1deg); }
.wc-product-demo .wc-hero2__note {
  position: relative;
  z-index: 3;
  width: fit-content;
  margin: 74px auto 0;
}

.wc-screens { overflow: hidden; }
.wc-screens__head { max-width: 780px; }
.wc-screen { margin: 0; }
.wc-screen__frame { border-radius: 10px; box-shadow: 0 12px 38px rgba(26, 32, 35, .1); }
.wc-screen__bar { min-height: 31px; }
.wc-screen--wide { margin-top: 38px; }
.wc-screen--wide .wc-screen__frame { max-height: 690px; }
.wc-screens__grid {
  display: grid;
  gap: 24px;
  margin-top: 36px;
}
.wc-screen figcaption {
  display: grid;
  gap: 5px;
  padding: 16px 2px 0;
}
.wc-screen figcaption b { color: var(--wc-ink); font-size: var(--wc-fs-400); }
.wc-screen figcaption span { color: var(--wc-ink-3); font-size: var(--wc-fs-200); line-height: 1.75; }
.wc-screens__grid .wc-screen img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top left;
}
.wc-screens__note {
  margin-top: 26px;
  color: var(--wc-ink-3);
  font-size: var(--wc-fs-200);
  text-align: center;
}

@media (min-width: 760px) {
  .wc-screens__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 960px) {
  .wc-mods { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .wc-mods .wc-mod { grid-column: span 2; }
  .wc-mods .wc-mod:nth-last-child(-n + 2) { grid-column: span 3; }
}

@media (max-width: 759px) {
  .wc-product-demo { margin-top: 36px; padding-bottom: 0; }
  .wc-product-demo__main { width: 100%; border-radius: 8px; }
  .wc-product-demo__bar { min-height: 30px; padding: 6px 9px; }
  .wc-product-demo__float {
    position: relative;
    width: calc(50% - 5px);
    margin-top: 10px;
    transform: none;
    border-radius: 7px;
    box-shadow: 0 8px 22px rgba(26, 32, 35, .1);
  }
  .wc-product-demo__float--calendar { float: left; left: auto; bottom: auto; }
  .wc-product-demo__float--analytics { float: right; right: auto; bottom: auto; }
  .wc-product-demo__float figcaption { padding: 7px 8px; font-size: 8px; }
  .wc-product-demo .wc-hero2__note { clear: both; margin-top: 96px; }
  .wc-screen--wide { margin-top: 26px; }
  .wc-screens__grid { margin-top: 26px; }
}

/* --------------------------------------------------------------------------
   33. WebCraft Business 料金
   トップでは比較の要点、詳細ページでは契約前に確認したい範囲を見せる。
   -------------------------------------------------------------------------- */
.wc-bizprice { scroll-margin-top: 76px; }
.wc-bizprice__head { max-width: 780px; }
.wc-bizprice__setup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  margin: 34px auto 22px;
  padding: 10px 18px;
  border: 1px solid rgba(18, 89, 75, .22);
  border-radius: 999px;
  background: #fff;
  color: var(--wc-ink-2);
  font-size: var(--wc-fs-200);
}
.wc-bizprice__setup span {
  color: var(--wc-brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}
.wc-bizprice__setup strong { color: var(--wc-ink); font-size: var(--wc-fs-300); }
.wc-bizprice__plans {
  display: grid;
  gap: 18px;
  align-items: stretch;
}
.wc-bizprice__plan {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 30px;
  border: 1px solid var(--wc-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(25, 35, 37, .06);
}
.wc-bizprice__plan.is-recommended {
  border-color: var(--wc-brand);
  background: var(--wc-ink);
  color: #fff;
  box-shadow: 0 20px 48px rgba(19, 42, 39, .18);
}
.wc-bizprice__badge {
  position: absolute;
  top: 0;
  right: 22px;
  margin: 0;
  padding: 7px 14px 8px;
  border-radius: 0 0 8px 8px;
  background: var(--wc-accent);
  color: var(--wc-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}
.wc-bizprice__name {
  margin: 0;
  color: var(--wc-brand);
  font-family: var(--wc-font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}
.is-recommended .wc-bizprice__name { color: #8ed6c2; }
.wc-bizprice__catch {
  min-height: 3.5em;
  margin: 10px 0 18px;
  color: var(--wc-ink);
  font-size: var(--wc-fs-400);
  font-weight: 700;
  line-height: 1.65;
}
.is-recommended .wc-bizprice__catch { color: #fff; }
.wc-bizprice__price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 0;
  color: var(--wc-ink-2);
  white-space: nowrap;
}
.wc-bizprice__price strong {
  color: var(--wc-ink);
  font-family: var(--wc-font-en);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -.04em;
}
.wc-bizprice__price span { font-size: 13px; font-weight: 700; }
.is-recommended .wc-bizprice__price,
.is-recommended .wc-bizprice__price strong { color: #fff; }
.wc-bizprice__sets {
  width: fit-content;
  margin: 18px 0 0;
  padding: 7px 11px;
  border-radius: 6px;
  background: var(--wc-brand-soft);
  color: var(--wc-brand);
  font-size: 12px;
  font-weight: 700;
}
.is-recommended .wc-bizprice__sets { background: rgba(255,255,255,.11); color: #fff; }
.wc-bizprice__desc {
  margin: 18px 0 0;
  color: var(--wc-ink-3);
  font-size: var(--wc-fs-200);
  line-height: 1.85;
}
.is-recommended .wc-bizprice__desc { color: rgba(255,255,255,.72); }
.wc-bizprice__foot {
  display: grid;
  gap: 22px;
  justify-items: center;
  max-width: 800px;
  margin: 30px auto 0;
  text-align: center;
}
.wc-bizprice__foot p { margin: 0; color: var(--wc-ink-3); font-size: var(--wc-fs-200); line-height: 1.9; }

.wc-bizprice__plans--detail .wc-bizprice__plan { padding: 34px 30px; }
.wc-bizprice__target {
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--wc-line);
  color: var(--wc-ink-2);
  font-size: var(--wc-fs-200);
  line-height: 1.8;
}
.is-recommended .wc-bizprice__target { border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.8); }
.wc-bizprice__features {
  display: grid;
  gap: 9px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.wc-bizprice__features li {
  position: relative;
  padding-left: 20px;
  color: var(--wc-ink-2);
  font-size: var(--wc-fs-200);
  line-height: 1.7;
}
.wc-bizprice__features li::before {
  position: absolute;
  top: .12em;
  left: 0;
  color: var(--wc-brand);
  content: "✓";
  font-weight: 700;
}
.is-recommended .wc-bizprice__features li { color: rgba(255,255,255,.86); }
.is-recommended .wc-bizprice__features li::before { color: #8ed6c2; }
.wc-bizprice__example {
  margin: auto 0 0;
  padding-top: 22px;
  color: var(--wc-ink-3);
  font-size: 12px;
  line-height: 1.75;
}
.wc-bizprice__example strong { display: block; margin-bottom: 4px; color: var(--wc-ink); }
.is-recommended .wc-bizprice__example { color: rgba(255,255,255,.66); }
.is-recommended .wc-bizprice__example strong { color: #fff; }
.wc-bizprice__table { margin-top: 34px; }

.wc-set-grid {
  display: grid;
  gap: 16px;
  margin-top: 36px;
}
.wc-set {
  padding: 26px;
  border: 1px solid var(--wc-line);
  border-radius: 12px;
  background: #fff;
}
.wc-set__number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--wc-brand);
  color: #fff;
  font-family: var(--wc-font-en);
  font-size: 12px;
  font-weight: 700;
}
.wc-set h3 { margin: 0; font-size: var(--wc-fs-400); }
.wc-set ul { display: grid; gap: 7px; margin: 16px 0 0; padding: 0; list-style: none; }
.wc-set li { color: var(--wc-ink-3); font-size: var(--wc-fs-200); line-height: 1.65; }

.wc-common-grid,
.wc-scope-grid {
  display: grid;
  gap: 18px;
  margin-top: 34px;
}
.wc-scope-card {
  padding: 28px;
  border: 1px solid rgba(18, 89, 75, .2);
  border-radius: 12px;
  background: #fff;
}
.wc-scope-card--estimate { border-color: rgba(191, 83, 42, .25); background: #fffaf7; }
.wc-scope-card__label {
  width: fit-content;
  margin: 0 0 14px;
  padding: 6px 9px;
  border-radius: 5px;
  background: var(--wc-brand-soft);
  color: var(--wc-brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}
.wc-scope-card--estimate .wc-scope-card__label { background: #f8e9e1; color: #a34623; }
.wc-scope-card h3 { margin: 0; }
.wc-scope-card ul { margin: 18px 0 0; }
.wc-custom-callout {
  display: grid;
  gap: 24px;
  align-items: center;
  margin-top: 34px;
  padding: clamp(28px, 5vw, 52px);
  border-radius: 14px;
  background: var(--wc-ink);
  color: #fff;
}
.wc-custom-callout h3 { margin: 0 0 10px; color: #fff; }
.wc-custom-callout p { margin: 0; color: rgba(255,255,255,.72); line-height: 1.9; }

@media (min-width: 760px) {
  .wc-bizprice__plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wc-bizprice__plan.is-recommended { transform: translateY(-8px); }
  .wc-set-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc-set-grid .wc-set:last-child { grid-column: 1 / -1; }
  .wc-common-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc-scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc-custom-callout { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (min-width: 1040px) {
  .wc-set-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .wc-set-grid .wc-set:last-child { grid-column: auto; }
}

@media (max-width: 759px) {
  .wc-bizprice__setup { flex-wrap: wrap; }
  .wc-bizprice__plan { padding: 26px 22px; }
  .wc-bizprice__catch { min-height: 0; }
  .wc-bizprice__foot .wc-btn { width: 100%; }
  .wc-custom-callout .wc-btn { width: 100%; }
}

@media (max-width: 419px) {
  .wc-product-demo__bar b { font-size: 8px; }
  .wc-product-demo__float figcaption { display: none; }
  .wc-product-demo .wc-hero2__note { margin-top: 76px; }
}

/* ==========================================================================
   31. 業務システム詳細ページ（system-*.html）
   トップの lineup カードから1システムずつ掘り下げる販促ページ。
   既存のトーンを崩さないよう、面は生成りと白の2枚、線はヘアライン、
   有彩色は朱1色。影はプロダクト画面の断片にだけ許す。
   ========================================================================== */

/* --- 31-1. パンくず --- */
.wc-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
  font-size: var(--wc-fs-100);
  color: var(--wc-ink-3);
}
.wc-crumb a { color: var(--wc-ink-3); text-decoration: none; }
.wc-crumb a:hover { color: var(--wc-brand-2); text-decoration: underline; text-underline-offset: 3px; }
.wc-crumb span[aria-hidden] { color: var(--wc-line-strong); }
.wc-crumb [aria-current] { color: var(--wc-ink); }

/* --- 31-2. ヒーロー --- */
.wc-sysd-hero__grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1000px) {
  /* 本文側は CTA 2つが1行に収まる幅を確保する。狭めると折り返して不揃いに見える */
  .wc-sysd-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 48px; }
}

.wc-sysd-hero__eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.wc-sysd-hero__no {
  padding: 3px 10px;
  border: 1px solid var(--wc-brand);
  border-radius: var(--wc-radius-pill);
  color: var(--wc-brand-2);
  letter-spacing: .08em;
}

.wc-sysd-hero__title {
  margin-top: 18px;
  text-wrap: pretty;
  font-family: var(--wc-font-serif);
  font-weight: 400;
  font-size: var(--wc-fs-800);
  line-height: 1.44;
}
.wc-sysd-hero__lead {
  margin-top: 18px;
  max-width: 34em;
  font-size: var(--wc-fs-lead);
  line-height: 1.95;
  color: var(--wc-ink-2);
}

.wc-sysd-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.wc-sysd-hero__tags li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--wc-line-strong);
  border-radius: var(--wc-radius-pill);
  background: var(--wc-surface);
  font-size: var(--wc-fs-100);
  color: var(--wc-ink-2);
}
.wc-sysd-hero__tags .wc-icon { color: var(--wc-brand); }

.wc-sysd-hero__actions { margin-top: 28px; }
/* CTA は2つとも同じ幅で縦に積む。本文カラムの幅では横並びに収まらず、
   収まらないまま並べると幅の違う2つが折り返して不揃いに見えるため。 */
@media (min-width: 560px) {
  .wc-sysd-hero__actions { flex-direction: column; align-items: stretch; max-width: 340px; }
  .wc-sysd-hero__actions .wc-btn--block { width: 100%; display: inline-flex; }
}

/* --- 31-3. 画面の掲載 --- */
.wc-sysd-shot { margin: 0; }
.wc-sysd-shot picture { display: block; }
.wc-sysd-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--wc-line-strong);
  border-radius: var(--wc-radius-ui);
  background: var(--wc-surface);
  box-shadow: 0 18px 40px -28px rgba(23, 22, 20, .45);
}
.wc-sysd-shot__cap {
  margin-top: 12px;
  font-size: var(--wc-fs-100);
  line-height: 1.75;
  color: var(--wc-ink-3);
}

/* --- 31-4. 困りごと --- */
.wc-sysd-probs { display: grid; gap: 14px; }
@media (min-width: 780px) { .wc-sysd-probs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.wc-sysd-prob {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 24px 22px;
  border: 1px solid var(--wc-line-strong);
  border-radius: var(--wc-radius-card);
  background: var(--wc-surface);
}
.wc-sysd-prob__title {
  position: relative;
  padding-left: 20px;
  text-wrap: balance;
  font-size: var(--wc-fs-500);
  line-height: 1.6;
  color: var(--wc-ink);
}
.wc-sysd-prob__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 12px;
  height: 1.5px;
  background: var(--wc-brand);
}
.wc-sysd-prob p { font-size: var(--wc-fs-300); line-height: 1.9; color: var(--wc-ink-3); }

/* --- 31-5. できること（画面と説明の交互組み） --- */
.wc-sysd-feat {
  display: grid;
  gap: 24px;
  align-items: center;
  padding: 40px 0;
  border-top: 1px solid var(--wc-line);
}
.wc-sysd-feat:first-of-type { border-top: 0; padding-top: 8px; }

@media (min-width: 900px) {
  .wc-sysd-feat { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 44px; padding: 52px 0; }
  /* 偶数番目は画面を右に置いて、視線の折り返しをつくる */
  .wc-sysd-feat:nth-of-type(even) .wc-sysd-shot { order: 2; }
  .wc-sysd-feat:nth-of-type(even) .wc-sysd-feat__body { order: 1; }
}

.wc-sysd-feat__no {
  font-size: var(--wc-fs-100);
  letter-spacing: .14em;
  color: var(--wc-brand);
}
.wc-sysd-feat__title {
  margin-top: 8px;
  font-family: var(--wc-font-serif);
  font-weight: 400;
  font-size: var(--wc-fs-600);
  line-height: 1.55;
}
.wc-sysd-feat__lead {
  margin-top: 14px;
  font-size: var(--wc-fs-300);
  line-height: 1.95;
  color: var(--wc-ink-2);
}
.wc-sysd-feat__body .wc-mod__list { margin-top: 16px; }

/* --- 31-6. おすすめポイント --- */
.wc-sysd-points { display: grid; gap: 14px; }
@media (min-width: 780px) { .wc-sysd-points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.wc-sysd-point {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 26px 22px;
  border: 1px solid var(--wc-line-strong);
  border-radius: var(--wc-radius-card);
  background: var(--wc-surface);
}
.wc-sysd-point__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--wc-line-strong);
  border-radius: var(--wc-radius-m);
  background: var(--wc-bg-alt);
  color: var(--wc-brand);
}
.wc-sysd-point__title { font-size: var(--wc-fs-500); line-height: 1.6; }
.wc-sysd-point p { font-size: var(--wc-fs-300); line-height: 1.9; color: var(--wc-ink-3); }

.wc-sysd-legal {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--wc-line);
}
.wc-sysd-legal p {
  font-size: var(--wc-fs-100);
  line-height: 1.9;
  color: var(--wc-ink-3);
  max-width: 78ch;
}

/* --- 31-7. 制作例についての注記 --- */
.wc-sysd-notice p + p { margin-top: 10px; }

/* --- 31-8. 料金への導線 --- */
.wc-sysd-price { display: grid; gap: 14px; }
@media (min-width: 780px) { .wc-sysd-price { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.wc-sysd-price__plan {
  position: relative;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 26px 22px;
  border: 1px solid var(--wc-line-strong);
  border-radius: var(--wc-radius-card);
  background: var(--wc-surface);
}
.wc-sysd-price__plan.is-recommended { border-color: var(--wc-brand); background: var(--wc-brand-soft); }
.wc-sysd-price__badge {
  position: absolute;
  top: -11px;
  left: 22px;
  padding: 3px 12px;
  border-radius: var(--wc-radius-pill);
  background: var(--wc-brand);
  color: #fff;
  font-size: var(--wc-fs-100);
}
.wc-sysd-price__name { font-size: var(--wc-fs-200); letter-spacing: .06em; color: var(--wc-ink-3); }
.wc-sysd-price__amount { display: flex; align-items: baseline; gap: 4px; color: var(--wc-ink); }
.wc-sysd-price__amount strong {
  font-size: var(--wc-fs-num);
  font-weight: 400;
  font-family: var(--wc-font-serif);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.wc-sysd-price__amount span { font-size: var(--wc-fs-300); color: var(--wc-ink-3); }
.wc-sysd-price__sets { font-size: var(--wc-fs-300); color: var(--wc-brand-2); }
.wc-sysd-price__desc { font-size: var(--wc-fs-300); line-height: 1.85; color: var(--wc-ink-3); }

.wc-sysd-price__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--wc-line);
}
.wc-sysd-price__foot p { display: flex; align-items: baseline; gap: 10px; }
.wc-sysd-price__foot span { font-size: var(--wc-fs-100); color: var(--wc-ink-3); }
.wc-sysd-price__foot strong { font-size: var(--wc-fs-500); color: var(--wc-ink); }

/* --- 31-9. ほかのシステム --- */
.wc-sysd-others { display: grid; gap: 12px; }
@media (min-width: 680px) { .wc-sysd-others { grid-template-columns: 1fr 1fr; } }

.wc-sysd-other {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--wc-line-strong);
  border-radius: var(--wc-radius-card);
  background: var(--wc-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--wc-dur-s) var(--wc-ease-out),
              background-color var(--wc-dur-s) var(--wc-ease-out);
}
.wc-sysd-other:hover { border-color: var(--wc-brand); background: var(--wc-brand-soft); }
.wc-sysd-other:focus-visible { outline: 2px solid var(--wc-brand); outline-offset: 3px; }
.wc-sysd-other__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--wc-line-strong);
  border-radius: var(--wc-radius-m);
  background: var(--wc-bg-alt);
  color: var(--wc-brand);
}
.wc-sysd-other__body { display: grid; gap: 2px; min-width: 0; }
.wc-sysd-other__body strong { font-size: var(--wc-fs-400); line-height: 1.5; }
.wc-sysd-other__body span { font-size: var(--wc-fs-100); color: var(--wc-ink-3); }
.wc-sysd-other .wc-icon--arrow {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--wc-brand);
  transition: transform var(--wc-dur-s) var(--wc-ease-out);
}
.wc-sysd-other:hover .wc-icon--arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .wc-sysd-other,
  .wc-sysd-other .wc-icon--arrow { transition: none; }
}

/* --- 31-10. 定義リスト内のサービス見出し -----------------------------------
   ホームページ制作と業務システムで条件が異なる項目（料金・提供時期・解約など）を、
   同じ項目の中で取り違えないように、どちらの話かを小見出しで分ける。 */
.wc-deflist__svc {
  display: block;
  margin: 14px 0 4px;
  font-size: var(--wc-fs-100);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--wc-brand-2);
}
.wc-deflist__svc:first-child { margin-top: 0; }
.wc-deflist__note {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--wc-line);
  color: var(--wc-ink-3);
}

/* ==========================================================================
   32. スマートフォンでの離脱対策
   実測（375×812）にもとづく調整。数値の根拠は以下。
   - モバイル訪問者の約6割は最初の1画面から下へスクロールしない
   - スクロール到達率の中央値はモバイルで約55%
   - 見出し・補足文・CTA・安心材料までを1画面目に収めるのが基本
   したがって「1画面目にCTAと安心材料を入れる」ことと
   「総スクロール量そのものを減らす」ことの2方向で詰める。
   ========================================================================== */

@media (max-width: 767px) {

  /* --- 32-1. セクション間の余白 ---------------------------------------
     64px × 上下 × 10セクション ＝ 1,280px が余白だけで消えていた。
     48px に詰めて約640px（0.8画面分）短くする。区切りは背景色で足りる。 */
  :root { --wc-section-y: 48px; }

  /* --- 32-2. ヒーローの視覚要素 ---------------------------------------
     管理画面・統計タイル・グラフの3枚が縦に積まれ、511pxを占めていた。
     統計タイル（出勤中8名／本日の予約11件）とグラフは、
     すぐ上の管理画面の表と同じ数字を繰り返しているだけなので、
     スマホでは管理画面1枚に絞る。情報は失われない。 */
  .wc-hero2 { padding-block: 32px 40px; }
  .wc-hero2__stage { margin-top: 24px; }
  .wc-hero2__side--l { display: none; }
  .wc-hero2__collage { gap: 0; }

  /* 1画面目に収める要素を詰める。CTAと安心材料の位置を上げるのが目的。 */
  .wc-hero2__lead { margin-top: 14px; }
  .wc-hero2__actions { margin-top: 22px; }

  /* --- 32-3. スクロール中のアニメーション ------------------------------
     87個の要素が opacity:0＋20pxの移動から入る作りになっていた。
     表示は IntersectionObserver の発火待ちなので、速くスクロールすると
     「まだ何も無い」状態を見せることになり、それ自体が離脱の要因になる。
     スマホでは最初から表示しておき、監視の結果を待たない。
     動きは広い画面のための演出と割り切る。 */
  [data-reveal],
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    clip-path: none !important;
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
  }

  /* --- 32-4. カード内側の余白 -----------------------------------------
     1枚あたり上下8pxずつ詰める。カード枚数が多いページで効く。 */
  .wc-mod,
  .wc-sysd-prob,
  .wc-sysd-point,
  .wc-sysd-price__plan { padding: 20px 18px; }

  /* --- 32-5. タップ領域 -------------------------------------------------
     カード全面がリンクになっているので実害はないが、
     見た目の当たり判定も指1本分（44px）を確保する。 */
  .wc-mod__more {
    min-height: 44px;
    align-items: center;
    margin-top: 0;
  }

  /* --- 32-6. 注記の文字サイズ -----------------------------------------
     12pxは屋外・移動中の閲覧では小さい。13pxまで上げる。 */
  .wc-note-text,
  .wc-ui-note { font-size: 13px; }
}

/* 端末の設定で動きを減らしている場合は、画面幅によらず動かさない */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-stagger] > * {
    transform: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- 32-7. セクション見出しの組み ------------------------------------
   実測で「アイブロウ＋見出し＋リード」1本が211px、7本で1,477px（1.8画面）
   を占めていた。行間は本文より詰めても読みにくくならないので、
   リードの行間と各要素の間隔を落とす。 */
@media (max-width: 767px) {
  .wc-eyebrow { margin-bottom: 12px; }
  .wc-sec-head__lead { margin-top: 14px; line-height: 1.8; }
  .wc-sec-head + * { margin-top: 24px; }

  /* --- 32-8. 繰り返し部品の内側の余白 --------------------------------
     問題提起6枚・特徴6枚・導入の流れ6ステップ・料金3枚が、
     それぞれ画面1枚分を超えていた。1枚あたり数pxずつ削る。 */
  .wc-prob,
  .wc-feat,
  .wc-track__item,
  .wc-bizprice__plan { padding: 18px 16px; }

  /* カード全面がリンクなので、見た目の当たり判定は40pxで足りる */
  .wc-mod__more { min-height: 40px; }

  /* --- 32-9. 本文の行間 ------------------------------------------------
     1.85〜1.95 は誌面としては美しいが、スマホの縦幅では行数がそのまま
     スクロール量になる。1.8 に統一しても可読性は落ちない。 */
  .wc-mod__body,
  .wc-prob p,
  .wc-feat p { line-height: 1.8; }
}