/*
 * theme-additions.css — Lynx Corporate v3 additions only.
 * Enqueued after assets/pages.css (see functions.php). site.css / pages.css
 * are never edited; every new rule needed by the v3 feature batch lives
 * here instead.
 */

/* --- A. Featured images inside the existing .bg-thumb / .bl-feat-thumb /
   .ar-hero tiles. Each of those already provides position, border-radius,
   aspect-ratio and overflow:hidden (site.css / pages.css) — an <img> just
   needs to fill that box. When there is no featured image nothing is
   printed here and the plain th-1〜th-5 gradient shows through, matching
   the "no photo" state. --- */
.bg-thumb img,
.bl-feat-thumb img,
.ar-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- B. Article search form (searchform.php). Sits at the right end of
   the .bl-cats category-chip row on the blog index / category archive. --- */
.bl-cats .src-form {
  margin-left: auto;
}

.src-form {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--pill);
  padding: 6px 6px 6px 22px;
  transition: 0.25s var(--ease);
}

.src-form:focus-within {
  border-color: var(--teal-lt);
}

.src-input {
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--ink);
  width: 170px;
  max-width: 100%;
}

.src-input::placeholder {
  color: var(--soft);
  opacity: 0.6;
}

.src-btn {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--teal);
  color: #fff;
  font-size: 13px;
  transition: 0.3s var(--ease);
}

.src-btn:hover {
  background: var(--teal-deep);
  transform: translateX(2px);
}

@media (max-width: 960px) {
  .bl-cats .src-form {
    margin-left: 0;
    width: 100%;
    margin-top: 10px;
  }
}

/* --- C. Search results page (search.php): 0-hit empty state text. --- */
.src-empty-t {
  font-size: 14px;
  color: var(--soft);
  letter-spacing: 0.08em;
  margin-bottom: 24px;
}

/* --- D. Contact Form 7 integration (v4). The 3 forms (お問い合わせ /
   資料請求 / LP問い合わせ) reuse the exact static markup of .cf-field /
   .cf-row2 / .cf-pills etc. CF7 wraps every text/email/tel/textarea
   form-tag in a bare <span class="wpcf7-form-control-wrap">, which is
   blockified + stretched to full width by the existing flex .cf-field
   rule (same as the plain <input>/<textarea> it replaces) — but that
   wrap span still establishes its own inline formatting context for its
   single inline-block child, and .cf-form textarea's line-height:2 (see
   pages.css) then reserves a ~9px baseline/descender gap under the
   textarea that the original markup never had (a plain <textarea> was a
   direct flex item, not a lone inline-block inside a wrapping span).
   display:block on the wrapped control removes it from that inline
   formatting context and closes the gap — verified 0px difference against
   the pre-CF7 demo markup. --- */
.cf-field .wpcf7-form-control-wrap > input,
.cf-field .wpcf7-form-control-wrap > textarea {
  display: block;
}

/* What genuinely differs from the static markup beyond that is CF7's own
   radio-group markup (nested spans instead of a flat run of <label
   class="cf-pill">) and the validation/status UI it adds (not present in
   the static demo forms at all) — those two get reproduced / minimally
   styled below. --- */

/* D-1. ご相談内容 radio pills (page-contact.php's [radio* topic ...]).
   Reproduces the exact .cf-pill / .cf-pill span / :checked look from
   pages.css on CF7's actual DOM (span.wpcf7-form-control-wrap >
   span.wpcf7-form-control.wpcf7-radio > span.wpcf7-list-item > label >
   input + span.wpcf7-list-item-label). */
.cf-pills .wpcf7-form-control-wrap {
  display: contents;
}
.cf-pills .wpcf7-form-control.wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cf-pills .wpcf7-list-item {
  display: inline-block;
  margin: 0;
}
.cf-pills .wpcf7-list-item label {
  position: relative;
  cursor: pointer;
}
.cf-pills .wpcf7-list-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cf-pills .wpcf7-list-item-label {
  display: inline-block;
  padding: 11px 21px;
  border-radius: 100px;
  background: #fff;
  border: 1.5px solid transparent;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--ink);
  transition: 0.25s var(--ease);
}
.cf-pills .wpcf7-list-item-label::before,
.cf-pills .wpcf7-list-item-label::after {
  content: none;
}
.cf-pills .wpcf7-list-item:hover .wpcf7-list-item-label {
  border-color: var(--teal-lt);
}
.cf-pills .wpcf7-list-item input:checked + .wpcf7-list-item-label {
  background: var(--teal);
  color: #fff;
}
.cf-pills .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label {
  outline: 2px solid var(--teal-deep);
  outline-offset: 2px;
}
/* CF7 appends the field's error tip as a sibling after the radio-group
   span inside the same wrap; with the wrap unwrapped via display:contents
   it becomes a flex child of .cf-pills too — force it onto its own row. */
.cf-pills .wpcf7-not-valid-tip {
  flex-basis: 100%;
}

/* D-2. Validation error text under a field (.wpcf7-not-valid-tip) and the
   form-level status box (.wpcf7-response-output) — both unstyled/absent
   in the original static demo forms. Kept minimal, in the site's own
   type/letter-spacing vocabulary (see .cf-note in pages.css) instead of
   CF7's default plugin look. */
:root {
  --cf-err: #b3433b;
}
.wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--cf-err);
}
.wpcf7 form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 14px 20px;
  border-radius: 16px;
  border: 1.5px solid var(--line);
  background: var(--panel);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--ink);
}
/* Selector specificity/order matches includes/css/styles.css (enqueued by
   CF7 itself) exactly, so these site-token colors win over its hardcoded
   blue/green/red/orange/yellow per status instead of leaking plugin
   default colors that aren't in the site's palette. */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-color: var(--cf-err);
  color: var(--cf-err);
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--teal);
  color: var(--teal-deep);
}

/* D-3. Ajax submit spinner. CF7's own inline styles already position/size
   it; only recolor to the site's teal instead of plugin-default dark gray. */
.wpcf7-spinner {
  background-color: var(--teal);
}
.wpcf7-spinner::before {
  background-color: #fff;
}

/* --- E. Document CPT (v4 addendum, §C): optional real cover photo
   ("資料のイメージ画像"). Rendered only when a featured image is actually
   set on a 資料 post — documents without one keep the exact previous
   look (no .dlc-thumb / .dld-photo element is printed at all). Reuses the
   site's existing "画像スロット" vocabulary (100% width, 16:10, 16px
   radius — see DESIGN_SYSTEM.md / .pfr-img) rather than inventing a new
   image treatment. --- */
.dlc-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
}
.dlc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dld-photo {
  margin-top: 28px;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
}
.dld-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- F. Pricing comparison modal (v6, page-service-ads.php only). Ported
   verbatim from the static reference (service-ads.html / root pages.css):
   the inline .prc-cmp comparison table becomes a "プラン比較表を見る"
   button (.prc-cmp-open) that opens a fixed-position modal (.prcm). The
   frozen theme pages.css still carries the old .prc-cmp rule and its
   mobile override — both now unused/dead since the markup no longer
   prints .prc-cmp, left untouched because pages.css is immutable. --- */
.prc-cmp-open {
  margin-top: 52px;
  text-align: center;
}
.prcm {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  visibility: hidden;
  opacity: 0;
  transition: 0.35s var(--ease);
}
.prcm.open {
  visibility: visible;
  opacity: 1;
}
.prcm-bg {
  position: absolute;
  inset: 0;
  background: rgba(32, 48, 60, 0.42);
  backdrop-filter: blur(6px);
}
.prcm-sheet {
  position: relative;
  background: #fff;
  border-radius: 24px;
  max-width: 900px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: 56px 52px 46px;
  box-shadow: 0 30px 80px rgba(32, 48, 60, 0.3);
  transform: translateY(14px);
  transition: 0.35s var(--ease);
}
.prcm.open .prcm-sheet {
  transform: none;
}
.prcm-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink);
}
.prcm-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}
.prcm-close:hover {
  border-color: var(--teal-lt);
}
.prcm-close::before,
.prcm-close::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 1.8px;
  background: var(--ink);
  border-radius: 2px;
}
.prcm-close::before {
  transform: rotate(45deg);
}
.prcm-close::after {
  transform: rotate(-45deg);
}
.prcm-cmp {
  margin-top: 30px;
  overflow-x: auto;
}
@media (max-width: 960px) {
  .prcm {
    padding: 14px;
  }
  .prcm-sheet {
    padding: 52px 22px 30px;
    border-radius: 18px;
  }
}

/* ============================================================
 * v7 — ROI calculator / visit-cycle simulator tool bodies
 * Ported verbatim from the external tool-roi-calculator.html /
 * tool-visit-cycle.html's appended pages.css block (.roi-* / .vcs-*).
 * ============================================================ */

/* ---------- ROI calculator ---------- */
.roi-calc{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(400px,.98fr);
  overflow:hidden;border:1px solid rgba(32,48,60,.12);border-radius:20px;
  background:#fff;box-shadow:0 22px 55px rgba(32,48,60,.08)}
.roi-inputs{padding:42px 42px 36px;background:#fff}
.roi-results{position:relative;overflow:hidden;padding:42px 40px 34px;color:#fff;
  background:linear-gradient(145deg,#315964 0%,#4B8F98 58%,#71ADA7 100%)}
.roi-results::before{content:"";position:absolute;right:-90px;top:-120px;width:330px;height:330px;
  border:1px solid rgba(255,255,255,.14);border-radius:50%;box-shadow:
  0 0 0 34px rgba(255,255,255,.035),0 0 0 78px rgba(255,255,255,.025);pointer-events:none}
.roi-results>*{position:relative;z-index:1}
.roi-section-head{display:grid;grid-template-columns:auto 1fr;gap:17px;align-items:start}
.roi-step{display:inline-flex;align-items:center;justify-content:center;min-width:58px;height:26px;
  border-radius:100px;background:rgba(88,169,177,.12);font-family:"Jost",sans-serif;
  font-size:10.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-deep)}
.roi-section-head h2{font-size:17px;font-weight:700;line-height:1.5;letter-spacing:.1em;color:var(--ink)}
.roi-section-head p{margin-top:5px;font-size:11.5px;line-height:1.8;letter-spacing:.05em;color:var(--soft)}
.roi-section-head-light .roi-step{background:rgba(255,255,255,.11);color:var(--teal-lt)}
.roi-section-head-light h2{color:#fff}
.roi-section-head-light p{color:rgba(255,255,255,.58)}
.roi-form{margin-top:34px}
.roi-fieldset{border:0;padding:0;margin:0}
.roi-fieldset+.roi-fieldset{margin-top:30px;padding-top:28px;border-top:1px solid var(--line)}
.roi-fieldset legend{width:100%;margin-bottom:15px;font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--teal-deep)}
.roi-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px}
.roi-field{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:11.5px;font-weight:500;
  line-height:1.6;letter-spacing:.05em;color:var(--soft)}
.roi-input-wrap{display:flex;align-items:center;height:49px;border:1.5px solid rgba(32,48,60,.14);
  border-radius:10px;background:#F8FAFB;transition:border-color .2s,box-shadow .2s,background .2s}
.roi-input-wrap:focus-within{border-color:var(--teal);background:#fff;
  box-shadow:0 0 0 4px rgba(88,169,177,.12)}
.roi-input-wrap input{min-width:0;width:100%;height:100%;border:0;outline:0;background:transparent;
  padding:0 13px;font-family:"Jost","Noto Sans JP",sans-serif;font-size:18px;font-weight:500;
  letter-spacing:.02em;color:var(--ink);-moz-appearance:textfield}
.roi-input-wrap input::-webkit-inner-spin-button,.roi-input-wrap input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.roi-prefix,.roi-suffix{flex:none;font-family:"Jost",sans-serif;font-size:13px;font-weight:500;color:#82909A}
.roi-prefix{padding-left:14px}.roi-suffix{padding-right:14px}
.roi-form-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px}
.roi-form-actions p{font-size:10.5px;line-height:1.6;letter-spacing:.04em;color:#87949D}
.roi-form-actions p span{margin-right:6px;font-size:7px;color:var(--teal)}
.roi-reset{border:0;border-bottom:1px solid rgba(32,48,60,.28);padding:3px 0;background:none;cursor:pointer;
  font:500 11px/1.5 "Noto Sans JP",sans-serif;letter-spacing:.06em;color:var(--soft);transition:color .2s,border-color .2s}
.roi-reset:hover{color:var(--teal-deep);border-color:var(--teal)}
.roi-reset:focus-visible,.roi-copy:focus-visible{outline:3px solid rgba(167,214,209,.7);outline-offset:3px}
.roi-primary{margin-top:38px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.15)}
.roi-primary-label{display:block;font-family:"Jost",sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.2em;color:var(--teal-lt)}
.roi-primary strong{display:block;margin-top:3px;font-family:"Jost",sans-serif;font-size:clamp(58px,6vw,82px);
  font-weight:200;line-height:1;letter-spacing:-.025em;color:#fff;font-variant-numeric:tabular-nums}
.roi-primary strong span{margin-left:7px;font-size:.3em;font-weight:400;letter-spacing:.04em;color:var(--teal-lt)}
.roi-primary strong.is-empty{opacity:.55}
.roi-primary p{margin-top:14px;font-size:12.5px;font-weight:500;line-height:1.8;letter-spacing:.08em;color:#fff}
.roi-results[data-state="negative"] .roi-primary strong,.roi-results[data-state="negative"] .roi-primary p{color:#F2D6A6}
.roi-results[data-state="near"] .roi-primary strong{color:#EDE3B2}
.roi-recovery{margin-top:26px}
.roi-recovery-labels{display:flex;align-items:baseline;justify-content:space-between;font-size:11px;
  letter-spacing:.08em;color:rgba(255,255,255,.64)}
.roi-recovery-labels strong{font-family:"Jost",sans-serif;font-size:15px;font-weight:500;color:#fff}
.roi-track{position:relative;height:10px;margin-top:11px;border-radius:100px;background:rgba(255,255,255,.12)}
.roi-track-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;
  background:linear-gradient(90deg,#8FC8C4,#EDE3B2);transition:width .55s var(--ease)}
.roi-track-fill::after{content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;border-radius:50%;
  background:#fff;transform:translateY(-50%);box-shadow:0 0 0 4px rgba(255,255,255,.15)}
.roi-break-even{position:absolute;left:50%;top:-5px;width:1px;height:20px;background:rgba(255,255,255,.72)}
.roi-break-even b{position:absolute;left:50%;bottom:25px;transform:translateX(-50%);font-family:"Jost",sans-serif;
  font-size:9px;font-style:normal;font-weight:500;color:rgba(255,255,255,.65)}
.roi-track-scale{display:flex;justify-content:space-between;margin-top:8px;font-family:"Jost",sans-serif;
  font-size:9px;letter-spacing:.05em;color:rgba(255,255,255,.38)}
.roi-track-scale span:nth-child(2){transform:translateX(3px)}
.roi-metrics{display:grid;grid-template-columns:1fr 1fr;margin-top:30px;border-top:1px solid rgba(255,255,255,.14)}
.roi-metrics>div{padding:17px 0 15px;border-bottom:1px solid rgba(255,255,255,.14)}
.roi-metrics>div:nth-child(odd){padding-right:17px;border-right:1px solid rgba(255,255,255,.14)}
.roi-metrics>div:nth-child(even){padding-left:17px}
.roi-metrics dt{font-size:10px;line-height:1.5;letter-spacing:.08em;color:rgba(255,255,255,.5)}
.roi-metrics dd{margin-top:5px;font-family:"Jost","Noto Sans JP",sans-serif;font-size:17px;font-weight:400;
  line-height:1.4;letter-spacing:.02em;color:#fff;font-variant-numeric:tabular-nums}
.roi-breakdown{margin-top:19px;padding:15px 17px;border:1px solid rgba(255,255,255,.14);border-radius:10px;
  background:rgba(255,255,255,.055)}
.roi-breakdown>span{display:block;font-size:9.5px;line-height:1.5;letter-spacing:.12em;color:var(--teal-lt)}
.roi-breakdown p{margin-top:5px;font-size:11px;line-height:1.7;letter-spacing:.04em;color:rgba(255,255,255,.65)}
.roi-breakdown strong{font-family:"Jost","Noto Sans JP",sans-serif;font-size:13px;font-weight:500;color:#fff}
.roi-copy{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:18px;padding:13px 16px;
  border:1px solid rgba(255,255,255,.24);border-radius:9px;background:transparent;cursor:pointer;
  font:500 11px/1.5 "Noto Sans JP",sans-serif;letter-spacing:.08em;color:#fff;transition:background .2s,border-color .2s}
.roi-copy:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.42)}
.roi-copy i{font-family:"Jost",sans-serif;font-size:14px;font-style:normal;color:var(--teal-lt)}
.roi-copy-status{min-height:17px;margin-top:7px;text-align:right;font-size:9.5px;line-height:1.7;color:var(--teal-lt)}
@media(max-width:1180px){
  .roi-calc{grid-template-columns:1fr}
  .roi-results{padding-left:42px;padding-right:42px}
  .roi-primary strong{font-size:72px}
}
@media(max-width:640px){
  .roi-calc{border-radius:16px}
  .roi-inputs,.roi-results{padding:30px 20px 26px}
  .roi-section-head{grid-template-columns:1fr;gap:11px}
  .roi-step{justify-self:start}
  .roi-field-grid{grid-template-columns:1fr;gap:15px}
  .roi-fieldset+.roi-fieldset{margin-top:25px;padding-top:24px}
  .roi-form-actions{align-items:flex-end}
  .roi-primary{margin-top:31px}
  .roi-primary strong{font-size:60px}
  .roi-metrics dd{font-size:15px}
  .roi-results::before{right:-160px}
}
@media(prefers-reduced-motion:reduce){.roi-track-fill{transition:none}}

/* ---------- visit cycle simulator ---------- */
.vcs{display:grid;grid-template-columns:minmax(0,1fr) minmax(410px,1fr);overflow:hidden;
  border:1px solid rgba(32,48,60,.12);border-radius:20px;background:#fff;
  box-shadow:0 22px 55px rgba(32,48,60,.08)}
.vcs-inputs{padding:42px 42px 36px;background:#fff}
.vcs-results{position:relative;overflow:hidden;padding:42px 40px 34px;color:#fff;
  background:linear-gradient(145deg,#315964 0%,#4B8F98 58%,#71ADA7 100%)}
.vcs-results::before{content:"";position:absolute;right:-105px;top:-125px;width:350px;height:350px;
  border:1px solid rgba(255,255,255,.14);border-radius:50%;box-shadow:
  0 0 0 38px rgba(255,255,255,.035),0 0 0 88px rgba(255,255,255,.025);pointer-events:none}
.vcs-results>*{position:relative;z-index:1}
.vcs-head{display:grid;grid-template-columns:auto 1fr;gap:17px;align-items:start}
.vcs-tag{display:inline-flex;align-items:center;justify-content:center;min-width:58px;height:26px;border-radius:100px;
  background:rgba(88,169,177,.12);font-family:"Jost",sans-serif;font-size:10.5px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--teal-deep)}
.vcs-head h2{font-size:17px;font-weight:700;line-height:1.5;letter-spacing:.1em;color:var(--ink)}
.vcs-head p{margin-top:5px;font-size:11.5px;line-height:1.8;letter-spacing:.05em;color:var(--soft)}
.vcs-head-light .vcs-tag{background:rgba(255,255,255,.12);color:#D4ECE9}
.vcs-head-light h2{color:#fff}
.vcs-head-light p{color:rgba(255,255,255,.62)}
.vcs-form{margin-top:32px}
.vcs-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vcs-field{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:11.5px;font-weight:500;
  line-height:1.6;letter-spacing:.05em;color:var(--soft)}
.vcs-input-wrap{display:flex;align-items:center;height:49px;border:1.5px solid rgba(32,48,60,.14);
  border-radius:10px;background:#F8FAFB;transition:border-color .2s,box-shadow .2s,background .2s}
.vcs-input-wrap:focus-within,.vcs-cycle-input:focus-within,.vcs-period-control>span:focus-within{
  border-color:var(--teal);background:#fff;box-shadow:0 0 0 4px rgba(88,169,177,.12)}
.vcs-input-wrap input,.vcs-cycle-input input,.vcs-period-control>span input{min-width:0;width:100%;height:100%;
  border:0;outline:0;background:transparent;padding:0 13px;font-family:"Jost","Noto Sans JP",sans-serif;
  font-size:18px;font-weight:500;letter-spacing:.02em;color:var(--ink);-moz-appearance:textfield}
.vcs-input-wrap input::-webkit-inner-spin-button,.vcs-input-wrap input::-webkit-outer-spin-button,
.vcs-cycle-input input::-webkit-inner-spin-button,.vcs-cycle-input input::-webkit-outer-spin-button,
.vcs-period-control>span input::-webkit-inner-spin-button,.vcs-period-control>span input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.vcs-prefix,.vcs-suffix{flex:none;font-family:"Jost",sans-serif;font-size:13px;font-weight:500;color:#82909A}
.vcs-prefix{padding-left:14px}.vcs-suffix{padding-right:14px}
.vcs-cycle-fields{display:grid;grid-template-columns:1fr 34px 1fr;align-items:center;margin-top:29px;padding-top:28px;
  border-top:1px solid var(--line)}
.vcs-cycle-card{display:block;padding:17px 18px 18px;border:1.5px solid rgba(32,48,60,.13);
  border-radius:12px;background:#FAFBFC;transition:border-color .2s,background .2s}
.vcs-cycle-card:focus-within{border-color:var(--teal-lt);background:#fff}
.vcs-cycle-target{border-color:rgba(88,169,177,.38);background:rgba(88,169,177,.055)}
.vcs-cycle-kicker{display:block;font-family:"Jost",sans-serif;font-size:9.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:#9AA6AE}
.vcs-cycle-target .vcs-cycle-kicker{color:var(--teal-deep)}
.vcs-cycle-card>b{display:block;margin-top:5px;font-size:11px;font-weight:500;line-height:1.6;letter-spacing:.05em;color:var(--soft)}
.vcs-cycle-input{display:flex;align-items:baseline;height:43px;margin-top:7px;border-bottom:1px solid rgba(32,48,60,.16)}
.vcs-cycle-input input{padding:0;font-size:28px}
.vcs-cycle-input i{flex:none;font-size:11px;font-style:normal;color:var(--soft)}
.vcs-cycle-arrow{text-align:center;font-family:"Jost",sans-serif;font-size:18px;color:var(--teal)}
.vcs-period{display:block;margin-top:27px}
.vcs-period>span:first-child{display:flex;align-items:baseline;justify-content:space-between}
.vcs-period b{font-size:11.5px;font-weight:500;letter-spacing:.05em;color:var(--soft)}
.vcs-period small{font-size:9.5px;letter-spacing:.06em;color:#A0AAB1}
.vcs-period-control{display:grid;grid-template-columns:1fr 92px;gap:15px;align-items:center;margin-top:11px}
.vcs-period-control>input{width:100%;height:4px;border-radius:100px;accent-color:var(--teal);cursor:pointer}
.vcs-period-control>span{display:flex;align-items:center;height:42px;border:1.5px solid rgba(32,48,60,.14);
  border-radius:9px;background:#F8FAFB;transition:border-color .2s,box-shadow .2s,background .2s}
.vcs-period-control>span input{padding:0 5px 0 12px;font-size:16px;text-align:right}
.vcs-period-control i{padding-right:10px;white-space:nowrap;font-size:10px;font-style:normal;color:var(--soft)}
.vcs-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px}
.vcs-actions p{font-size:10.5px;line-height:1.6;letter-spacing:.04em;color:#87949D}
.vcs-actions p span{margin-right:6px;font-size:7px;color:var(--teal)}
.vcs-reset{border:0;border-bottom:1px solid rgba(32,48,60,.28);padding:3px 0;background:none;cursor:pointer;
  font:500 11px/1.5 "Noto Sans JP",sans-serif;letter-spacing:.06em;color:var(--soft);
  transition:color .2s,border-color .2s}
.vcs-reset:hover{color:var(--teal-deep);border-color:var(--teal)}
.vcs-reset:focus-visible,.vcs-copy:focus-visible{outline:3px solid rgba(212,236,233,.75);outline-offset:3px}
.vcs-rhythm{margin-top:38px;padding:26px 23px 21px;border:1px solid rgba(255,255,255,.16);
  border-radius:14px;background:rgba(25,61,67,.18)}
.vcs-rhythm-row{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center}
.vcs-rhythm-row+.vcs-rhythm-row{margin-top:23px}
.vcs-rhythm-label span{display:block;font-size:9.5px;letter-spacing:.1em;color:rgba(255,255,255,.5)}
.vcs-rhythm-label strong{display:block;margin-top:2px;font-family:"Jost","Noto Sans JP",sans-serif;
  font-size:15px;font-weight:500;color:#fff}
.vcs-rhythm-track{position:relative;height:2px;background:rgba(255,255,255,.18)}
.vcs-rhythm-track i{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;background:#BDDAD7;
  transform:translate(-50%,-50%);box-shadow:0 0 0 3px rgba(189,218,215,.1)}
.vcs-rhythm-row-target .vcs-rhythm-track{background:rgba(255,255,255,.28)}
.vcs-rhythm-row-target .vcs-rhythm-track i{width:10px;height:10px;background:#F2E7B9;
  box-shadow:0 0 0 3px rgba(242,231,185,.13)}
.vcs-rhythm-scale{display:flex;justify-content:space-between;margin:14px 0 0 86px;font-family:"Jost",sans-serif;
  font-size:9px;letter-spacing:.04em;color:rgba(255,255,255,.36)}
.vcs-uplift{margin-top:26px;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.16)}
.vcs-uplift>span{display:block;font-size:10px;letter-spacing:.13em;color:#D4ECE9}
.vcs-uplift>strong{display:block;margin-top:4px;font-family:"Jost","Noto Sans JP",sans-serif;
  font-size:clamp(34px,3.8vw,49px);font-weight:300;line-height:1.2;letter-spacing:-.02em;color:#fff;
  font-variant-numeric:tabular-nums}
.vcs-uplift>p{margin-top:10px;font-size:12px;font-weight:500;line-height:1.7;letter-spacing:.06em;color:#fff}
.vcs-uplift[data-state="negative"]>strong,.vcs-uplift[data-state="negative"]>p{color:#F2D6A6}
.vcs-uplift[data-state="neutral"]>strong{color:#DDE8E7}
.vcs-metrics{display:grid;grid-template-columns:1fr 1fr;margin-top:13px}
.vcs-metrics>div{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.vcs-metrics>div:nth-child(odd){padding-right:16px;border-right:1px solid rgba(255,255,255,.14)}
.vcs-metrics>div:nth-child(even){padding-left:16px}
.vcs-metrics dt{font-size:9.5px;line-height:1.5;letter-spacing:.07em;color:rgba(255,255,255,.5)}
.vcs-metrics dd{margin-top:5px;font-family:"Jost","Noto Sans JP",sans-serif;font-size:16px;font-weight:400;
  line-height:1.4;letter-spacing:.01em;color:#fff;font-variant-numeric:tabular-nums}
.vcs-frequency{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px;
  padding:14px 16px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(255,255,255,.055)}
.vcs-frequency>span{font-size:9.5px;line-height:1.5;letter-spacing:.07em;color:rgba(255,255,255,.55)}
.vcs-frequency p{display:flex;align-items:center;gap:10px;white-space:nowrap}
.vcs-frequency strong{font-family:"Jost","Noto Sans JP",sans-serif;font-size:14px;font-weight:500;color:#fff}
.vcs-frequency i{font-size:11px;font-style:normal;color:#F2E7B9}
.vcs-copy{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:18px;padding:13px 16px;
  border:1px solid rgba(255,255,255,.25);border-radius:9px;background:transparent;cursor:pointer;
  font:500 11px/1.5 "Noto Sans JP",sans-serif;letter-spacing:.08em;color:#fff;
  transition:background .2s,border-color .2s}
.vcs-copy:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.44)}
.vcs-copy i{font-family:"Jost",sans-serif;font-size:14px;font-style:normal;color:#D4ECE9}
.vcs-copy-status{min-height:17px;margin-top:7px;text-align:right;font-size:9.5px;line-height:1.7;color:#D4ECE9}
@media(max-width:1180px){
  .vcs{grid-template-columns:1fr}
  .vcs-results{padding-left:42px;padding-right:42px}
}
@media(max-width:640px){
  .vcs{border-radius:16px}
  .vcs-inputs,.vcs-results{padding:30px 20px 26px}
  .vcs-head{grid-template-columns:1fr;gap:11px}
  .vcs-tag{justify-self:start}
  .vcs-field-grid{grid-template-columns:1fr;gap:15px}
  .vcs-cycle-fields{grid-template-columns:1fr;gap:10px}
  .vcs-cycle-arrow{transform:rotate(90deg)}
  .vcs-period-control{grid-template-columns:1fr 88px}
  .vcs-rhythm{padding-left:17px;padding-right:17px}
  .vcs-rhythm-row{grid-template-columns:64px 1fr;gap:11px}
  .vcs-rhythm-scale{margin-left:75px}
  .vcs-uplift>strong{font-size:34px}
  .vcs-metrics dd{font-size:14px}
  .vcs-frequency{align-items:flex-start;flex-direction:column;gap:7px}
}
@media(prefers-reduced-motion:reduce){.vcs-input-wrap,.vcs-cycle-card{transition:none}}

/* ==========================================================================
   v9: 記事本文タイポグラフィ整備（.ar-body — pages.cssの同名規則を上書き）
   本文をnote相当の可読サイズへ。h2/h3再設計・h4/図版/引用/olの新規整備
   ========================================================================== */
.ar-body p{font-size:17.5px;line-height:2.05;letter-spacing:.05em;opacity:.92;margin-top:28px}
.ar-body ul li{font-size:16.5px;line-height:2.05;letter-spacing:.05em;opacity:.92}
.ar-body ul li + li{margin-top:10px}
.ar-body ul li::before{top:.85em}

.ar-body h2{font-size:24px;letter-spacing:.1em;line-height:1.8;
  margin:76px 0 28px;padding-left:22px;padding-bottom:14px;
  border-bottom:1px solid var(--line)}
.ar-body h2::before{top:.3em;bottom:calc(.3em + 14px)}

.ar-body h3{font-size:19.5px;letter-spacing:.1em;line-height:1.9;margin:56px 0 18px}
.ar-body h3::before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;
  background:var(--teal-lt);margin-right:12px;vertical-align:.12em}

.ar-body h4{font-size:17px;font-weight:700;letter-spacing:.08em;line-height:1.9;
  margin:44px 0 12px;color:var(--teal-deep)}

.ar-body figure{margin:36px 0 0}
.ar-body figure img{max-width:100%;height:auto;border-radius:14px;display:block}
.ar-body figcaption{margin-top:10px;font-size:12px;letter-spacing:.06em;color:var(--soft)}

.ar-body blockquote{margin:32px 0 0;background:var(--panel);border-radius:14px;
  padding:24px 28px}
.ar-body blockquote p{margin-top:0;font-size:15.5px;color:var(--soft)}
.ar-body blockquote p + p{margin-top:16px}

.ar-body ol{margin:28px 0 0;padding-left:1.5em}
.ar-body ol li{font-size:16.5px;line-height:2.05;letter-spacing:.05em;color:var(--ink);opacity:.92}
.ar-body ol li + li{margin-top:10px}
.ar-body ol li::marker{color:var(--teal-deep);font-weight:600}

@media(max-width:960px){
  .ar-body p{font-size:16px;line-height:2.05;margin-top:24px}
  .ar-body ul li,.ar-body ol li{font-size:15.5px}
  .ar-body h2{font-size:20px;margin:60px 0 22px;padding-left:16px;padding-bottom:12px}
  .ar-body h3{font-size:17.5px;margin:44px 0 14px}
  .ar-body h4{font-size:16px;margin:36px 0 10px}
  .ar-body figure{margin-top:28px}
  .ar-body blockquote{padding:20px 20px}
}

/* ==========================================================================
   v10: identityスラブの右下ゴースト写真（縁をマスクで溶かし、輝度ブレンドで
   グラデーションに沈める。素材: CC0ストック。差し替えは img/identity-ghost.jpg）
   ========================================================================== */
.id-photo{position:absolute;right:-90px;bottom:-95px;width:min(54%,760px);aspect-ratio:3/2;
  background:url("img/identity-ghost.jpg") center/cover no-repeat;
  opacity:.23;mix-blend-mode:luminosity;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 62% 60% at 60% 62%,#000 26%,transparent 74%);
  mask-image:radial-gradient(ellipse 62% 60% at 60% 62%,#000 26%,transparent 74%)}
.id-inner > .id-grid{position:relative;z-index:1}
@media(max-width:960px){
  .id-photo{width:88%;right:-50px;bottom:-40px;opacity:.2}
}

/* ---------- v10b: フッター右下のゴースト写真（霧の湖・CC0）。
   .ftはtotopが上にはみ出すためoverflow:hidden不可 → マスクの減衰だけで
   完結するようフッター内側に全収容する ---------- */
.ft-photo{position:absolute;right:0;bottom:0;width:min(64%,900px);aspect-ratio:3/2;
  background:url("img/footer-ghost.jpg") center/cover no-repeat;
  opacity:.17;mix-blend-mode:luminosity;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 58% 56% at 68% 70%,#000 22%,transparent 70%);
  mask-image:radial-gradient(ellipse 58% 56% at 68% 70%,#000 22%,transparent 70%)}
.ft > .container{position:relative;z-index:1}
@media(max-width:960px){
  .ft-photo{width:80%;opacity:.11}
}