/* WFの共通部品（ヘッダー・本文・フッター）。MVと切り替えギミックは各案のHTML側で作ります */
:root {
  --c: #2f78c8;
  --c2: #1f5fae;
  --k: #14202e;
  --line: #e3e7ec;
  --gray: #f1f2f4;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  color: #222;
  line-height: 1.8;
  background: #fff;
}
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }

.wf-hdr {
  position: relative; z-index: 30;
  height: 64px; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border-bottom: 1px solid var(--line);
}
.wf-logo { display: flex; align-items: center; gap: 8px; font: italic 800 22px/1 "Noto Sans JP", sans-serif; color: #111; letter-spacing: -0.01em; }
.wf-logo svg { width: 26px; height: 26px; fill: var(--c); }
.wf-nav { display: flex; align-items: center; gap: 22px; font-size: 12px; font-weight: 700; }
.wf-nav span { color: #222; white-space: nowrap; }
.wf-nav .btn { background: #111; color: #fff; padding: 7px 16px; border-radius: 4px; }
.wf-menu { display: none; width: 28px; height: 18px; border-top: 2px solid #111; border-bottom: 2px solid #111; position: relative; }
.wf-menu::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; border-top: 2px solid #111; }
.wf-crumb { padding: 10px 28px; font-size: 11px; color: #777; background: #fff; }
.wf-crumb b { font-weight: 400; color: #333; }

.wf-in { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.wf-sec { padding: 72px 0; }
.wf-sec.gray { background: var(--gray); }
.wf-h { font-size: 24px; font-weight: 700; line-height: 1.5; margin-bottom: 28px; }
.wf-intro .wf-in { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.wf-intro p { font-size: 14px; color: #444; margin-top: 14px; }
.wf-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wf-card { background: #fff; padding: 20px; }
.wf-card h3 { font-size: 16px; margin: 14px 0 6px; }
.wf-card p { font-size: 13px; color: #555; }
.wf-q { background: var(--gray); padding: 18px 22px; margin-bottom: 12px; }
.wf-q h3 { font-size: 15px; }
.wf-q p { font-size: 13px; color: #555; margin-top: 6px; }
.wf-cta { background: #111; color: #fff; text-align: center; padding: 64px 24px; }
.wf-cta h2 { font-size: 22px; line-height: 1.6; }
.wf-cta p { font-size: 12px; color: #bbb; margin-top: 10px; }
.wf-cta span { display: inline-block; margin-top: 22px; background: #333; padding: 12px 44px; font-size: 13px; border-radius: 2px; }
.wf-ftr { background: #111; color: #999; font-size: 11px; padding: 36px 28px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
.wf-ftr .wf-logo { color: #fff; }
.ph { display: grid; place-items: center; background: #d9d9d9; aspect-ratio: 4 / 3; }
.ph svg { opacity: 0.9; }

@media (max-width: 860px) {
  .wf-nav { display: none; }
  .wf-menu { display: block; }
  .wf-hdr, .wf-crumb { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 720px) {
  .wf-sec { padding: 48px 0; }
  .wf-intro .wf-in, .wf-cards { grid-template-columns: 1fr; }
  .wf-intro .wf-in { gap: 24px; }
  .wf-h { font-size: 20px; }
}

/* 比較用のプレースホルダー */
.wf-logo{font:700 18px/1.3 system-ui,sans-serif;letter-spacing:0}
.mobile-menu{display:none;font-size:12px}
.placeholder-content{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.placeholder-content .wf-h{margin:12px 0 18px}
.placeholder-content p{font-size:14px;color:#66717d;line-height:2}
.placeholder-no{font:12px ui-monospace,monospace;color:#778493;letter-spacing:.1em}
.ph{color:#78828d;background:#e3e7ec;font-size:14px;border:1px solid #d3d9e1}
.wf-ftr{background:#edf0f4;color:#78828d}
@media(max-width:860px){.mobile-menu{display:block}.wf-menu{display:none}}
@media(max-width:720px){.placeholder-content{grid-template-columns:1fr;gap:24px}}