/* Fidelity v02: render this adopted part in the cascade of its approved HTML (browser defaults + the approved CSS below). Theme-wide rules (.hal-lp base, Astra base, older section CSS) stop at #hal-achievements-preview; every approved rule below is more specific or later and still wins. Root values = the approved visualization frame body. SVG keeps its presentation attributes. */
#hal-achievements-preview{font:430 14px/21px -apple-system,system-ui,"Segoe UI",sans-serif;color:rgb(26,28,31);letter-spacing:normal;word-spacing:normal;text-align:start;text-transform:none;text-indent:0;text-shadow:none;white-space:normal;word-break:normal;overflow-wrap:normal;line-break:auto;-webkit-font-smoothing:auto;font-feature-settings:normal;font-kerning:auto}
#hal-achievements-preview :where(*:not(svg,svg *)),#hal-achievements-preview :where(*:not(svg,svg *))::before,#hal-achievements-preview :where(*:not(svg,svg *))::after{all:revert}
/* Fidelity v02 host: element rules of the visualization host the approved frame ran in (resolved values, same low specificity as there). */
#hal-achievements-preview :where(a){color:color(srgb 0.180392 0.511373 0.824314);cursor:pointer;font-weight:500;text-decoration:none;text-underline-offset:2px}
#hal-achievements-preview :where(a:is(:hover,:focus-visible)){text-decoration-line:underline;text-decoration-style:dashed;text-decoration-thickness:.5px}
#hal-achievements-preview :where(h1,h2,h3,h4,h5,h6,p){margin-block:0}
#hal-achievements-preview :where(h1){font-size:24px;font-weight:500;line-height:1.25}
#hal-achievements-preview :where(h2){font-size:20px;font-weight:500;line-height:1.25}
#hal-achievements-preview :where(h3,h4,h5,h6){font-size:18px;font-weight:500;line-height:1.3}
#hal-achievements-preview :where(b,strong,th){font-weight:500}
#hal-achievements-preview :where(small){font-size:12px;line-height:16px}
#hal-achievements-preview :where(hr){width:100%;height:1px;margin-block:6px;border:0;background:rgba(26,28,31,.08)}
#hal-achievements-preview :where(svg){display:block;max-width:100%;height:auto}

#hal-achievements-preview { padding: 16px 0; color-scheme: light; }
#hal-achievements-preview * { box-sizing: border-box; }
#hal-achievements-preview .preview-controls { display:flex; justify-content:flex-end; gap:6px; margin:0 12px 14px; }
#hal-achievements-preview .preview-controls button { font: 400 13px system-ui,sans-serif; border:1px solid #d2d2d2; background:#fff; color:#333; padding:9px 16px; border-radius:5px; }
#hal-achievements-preview .preview-controls button[aria-pressed="true"] { background:#181818; color:#fff; border-color:#181818; }
#hal-achievements-preview .hal-surface { background:#fff; padding:38px 22px; width:100%; margin:0 auto; transition:max-width .25s ease; }
#hal-achievements-preview .hal-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
#hal-achievements-preview .hal-stat { background:#f5f5f5; color:#101010; border-radius:16px; padding:28px 12px 29px; min-height:292px; text-align:center; }
#hal-achievements-preview .hal-prefix { height:23px; margin:0 0 16px; font:400 13px/23px 'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN',sans-serif; letter-spacing:.045em; color:#505050; }
#hal-achievements-preview h3 { margin:0; font:500 17px/1.6 'Zen Old Mincho','Yu Mincho',serif; letter-spacing:.045em; color:#101010; }
#hal-achievements-preview .hal-number { margin:21px 0 19px; font:500 clamp(32px,5.4vw,57px)/1.12 'Zen Old Mincho','Yu Mincho',serif; letter-spacing:-.045em; white-space:nowrap; color:#101010; }
#hal-achievements-preview .hal-number span { font:400 17px/1.2 'Zen Old Mincho','Yu Mincho',serif; letter-spacing:0; margin-left:5px; }
#hal-achievements-preview .hal-rule { height:3px; width:36px; border-radius:3px; background:#171717; margin:0 auto 24px; transition:width .45s cubic-bezier(.22,1,.36,1); }
#hal-achievements-preview .hal-note { margin:0; font:400 11px/1.6 'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN',sans-serif; color:#606060; letter-spacing:.01em; }
#hal-achievements-preview .hal-stat h3,#hal-achievements-preview .hal-stat .hal-number,#hal-achievements-preview .hal-stat .hal-prefix,#hal-achievements-preview .hal-stat .hal-note { transition:transform .4s cubic-bezier(.22,1,.36,1),text-shadow .4s ease; }
#hal-achievements-preview .hal-source { margin:26px 0 0; text-align:center; font:400 12px/1.8 'Zen Kaku Gothic New',sans-serif; }
#hal-achievements-preview .hal-source a { color:#454545; text-decoration:underline; text-underline-offset:5px; display:inline-block; padding:10px 8px; }
#hal-achievements-preview .hal-source a span { display:inline-block; transition:transform .3s ease; }
@media(hover:hover) {
  #hal-achievements-preview .hal-stat:hover h3,#hal-achievements-preview .hal-stat:hover .hal-prefix { transform:translateY(-3px); text-shadow:0 7px 12px rgba(0,0,0,.14); }
  #hal-achievements-preview .hal-stat:hover .hal-number { transform:translateY(-6px); text-shadow:0 10px 15px rgba(0,0,0,.18); }
  #hal-achievements-preview .hal-stat:hover .hal-note { transform:translateY(-2px); }
  #hal-achievements-preview .hal-stat:hover .hal-rule { width:62px; }
  #hal-achievements-preview .hal-source a:hover span { transform:translateX(4px); }
}
/* FinalOwnerFix2 AuditFix1 (Owner 2026-10-13 11:45): mobile = the theme's mobile width (767px and below; before, only 480px and below
   was mobile and 481-767px showed three narrow columns). The .is-mobile class of the approved preview is not set by the theme (no code
   adds it), so the width decides. The three cards are small landscape cards stacked in three rows, all three on one screen with the
   source link: heading (and the non-empty prefix 「HAL探偵社の実績」) on the left, the number on the right, the note below. The fixed
   264px / 292px minimum heights and the empty prefixes' reserved height are released on mobile only. PC (768px and up) is unchanged. */
@media (max-width:767px) {
  #hal-achievements-preview .hal-surface { padding:16px 16px; max-width:none; }
  #hal-achievements-preview .hal-cards { grid-template-columns:1fr; gap:8px; }
  #hal-achievements-preview .hal-stat { min-height:0; padding:16px 18px; text-align:left; display:grid; grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"prefix number" "title number" "rule number" "note note"; column-gap:14px; align-items:center; }
  /* short screens (e.g. a 320px phone with the browser's toolbars shown): the vertical spacing follows the small viewport height (svh =
     the height left when the toolbars are shown, fixed while scrolling, so no layout jump); from about 550px up the values above apply
     (cards about 96-108px high).
     Browsers without svh keep the values above. Type sizes never shrink. */
  #hal-achievements-preview .hal-surface { padding-block:clamp(8px,calc(10svh - 34px),16px); }
  #hal-achievements-preview .hal-cards { gap:clamp(4px,calc(5svh - 17px),8px); }
  #hal-achievements-preview .hal-stat { padding-block:clamp(7px,calc(8svh - 28px),16px); }
  #hal-achievements-preview .hal-prefix { grid-area:prefix; height:auto; margin:0 0 1px; font-size:11px; line-height:1.5; }
  #hal-achievements-preview .hal-prefix:empty { display:none; }
  #hal-achievements-preview h3 { grid-area:title; font-size:15px; line-height:1.5; }
  #hal-achievements-preview .hal-rule { grid-area:rule; justify-self:start; width:28px; height:2px; margin:6px 0 2px; }
  /* the number keeps room for the zoom: it grows from its right edge (transform-origin), 6% to the left into the 14px column gap */
  #hal-achievements-preview .hal-number { grid-area:number; justify-self:end; align-self:center; margin:0; padding:2px 0; font-size:clamp(32px,9.2vw,38px); line-height:1.1; transform-origin:100% 50%; }
  #hal-achievements-preview .hal-number span { font-size:14px; margin-left:3px; }
  #hal-achievements-preview .hal-note { grid-area:note; margin:4px 0 0; font-size:11px; line-height:1.5; }
  #hal-achievements-preview .hal-source { margin:8px 0 0; }
  #hal-achievements-preview .hal-source a { padding:5px 8px; }
  /* number zoom when the card group comes into view (achievements.js adds .is-zoom once): scale 1 -> 1.06 (400ms) -> 1 (400ms) */
  #hal-achievements-preview.is-zoom .hal-number { animation:hal-ach-zoom .8s linear 1 both; }
}
/* page zoom / large text on a phone (a CSS width under 300px): heading, number and note stacked, so the heading is not squeezed */
@media (max-width:299px) {
  #hal-achievements-preview .hal-stat { grid-template-columns:minmax(0,1fr); grid-template-areas:"prefix" "title" "number" "rule" "note"; }
  #hal-achievements-preview .hal-number { justify-self:start; transform-origin:0 50%; white-space:normal; }
}
@keyframes hal-ach-zoom {
  0% { transform:scale(1); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  50% { transform:scale(1.06); animation-timing-function:cubic-bezier(.45,0,.55,1); }
  100% { transform:scale(1); }
}
@media(prefers-reduced-motion:reduce) {
  #hal-achievements-preview.is-zoom .hal-number { animation:none; }
  #hal-achievements-preview .hal-stat *,#hal-achievements-preview .hal-rule,#hal-achievements-preview .hal-surface { transition:none !important; }
  #hal-achievements-preview .hal-stat:hover h3,#hal-achievements-preview .hal-stat:hover .hal-prefix,#hal-achievements-preview .hal-stat:hover .hal-number,#hal-achievements-preview .hal-stat:hover .hal-note { transform:none; text-shadow:none; }
}
/* Fix13 (2026-10-21, Owner-approved: 「91,242件を既存の橙で主役にし、97.3％と46支店を下段に配置する案。ただし中央揃え・背景は既存のまま」), mobile only:
   the resolved card (91,242件) is the first row across the full width, the success rate (97.3％) left and the branches (46支店) right below it (the HTML
   order is unchanged; PC keeps its three columns). Every card's prefix, title, number, unit, rule and note are centred in the card; the number 91,242
   is the site's orange (#ff5f00, the colour of its buttons) and the largest; the other numbers keep their colour. The section and card backgrounds,
   the zoom of the numbers (now from their centre) and the source link are unchanged; no count-up. The three cards, notes and the link stay one screen.
   The notes keep the site-wide Fix4 G01 rule (the text block centred at its own width, its lines left-aligned: a one-line note is centred). */
@media (max-width:767px) {
  #hal-achievements-preview .hal-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  #hal-achievements-preview .hal-stat { display:block; text-align:center; padding:14px 8px 13px; }
  #hal-achievements-preview .hal-resolved { grid-column:1 / -1; order:-1; padding:16px 12px 15px; }
  #hal-achievements-preview .hal-prefix { margin:0 0 2px; text-align:center; }
  #hal-achievements-preview h3 { text-align:center; }
  /* justify-self of the earlier mobile layout (end / start) also aligns a block box in current Chrome; reset so the number fills the card and is centred */
  #hal-achievements-preview .hal-number { display:block; justify-self:auto; width:auto; margin:6px 0 0; padding:2px 0; text-align:center; font-size:clamp(28px,8.2vw,34px); transform-origin:50% 50%; }
  #hal-achievements-preview .hal-resolved .hal-number { color:#ff5f00; font-size:clamp(44px,13.4vw,56px); margin:4px 0 0; }
  #hal-achievements-preview .hal-rule { justify-self:auto; margin:8px auto 4px; }
  #hal-achievements-preview .hal-note { text-align:center; margin:4px 0 0; }
}
