:root { --ux-ink:#17201d; --ux-muted:#58645e; --ux-paper:#fbfcf9; --ux-line:#dce4de; --ux-mint:#e9f3e9; --ux-accent:#e96a4a; --ux-deep:#184a3b; }
html { scroll-behavior:smooth; }
body.ux-live { margin:0; padding-bottom:76px; background:var(--ux-paper); color:var(--ux-ink); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif; line-height:1.75; overflow-x:hidden; }
body.ux-live *,body.ux-live *::before,body.ux-live *::after { box-sizing:border-box; }
body.ux-live .ux-sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
body.ux-live .ux-header { position:sticky;top:0;z-index:1000;background:rgba(251,252,249,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(220,228,222,.85);font-size:16px; }
body.ux-live .ux-header .nav { width:min(1120px,calc(100% - 40px));min-height:72px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:18px; }
body.ux-live .ux-header .brand { display:block;flex:0 0 180px;width:180px;height:40px;background:url('shopilab-logo.png') center/contain no-repeat;font-size:0;transform:translateX(-12px);text-decoration:none; }
body.ux-live .ux-header nav { display:flex;align-items:center;gap:16px;color:#31423a;font-size:16px;white-space:nowrap; }
body.ux-live .ux-header nav a { color:inherit;text-decoration:none; }
body.ux-live .ux-header nav a:hover,body.ux-live .ux-header nav a:focus-visible { color:var(--ux-deep);text-decoration:underline;text-underline-offset:5px; }
body.ux-live .ux-header .nav-dropdown { position:relative; }
body.ux-live .ux-header .nav-dropdown summary { cursor:pointer;list-style:none; }
body.ux-live .ux-header .nav-dropdown summary::-webkit-details-marker { display:none; }
body.ux-live .ux-header .nav-dropdown summary::after { content:"⌄";margin-left:5px; }
body.ux-live .ux-header .nav-dropdown__panel { position:absolute;top:calc(100% + 17px);left:-15px;z-index:1010;display:grid;gap:2px;min-width:240px;max-height:min(70vh,520px);overflow:auto;padding:10px;border:1px solid var(--ux-line);border-radius:12px;background:#fff;box-shadow:0 16px 35px rgba(24,74,59,.16); }
body.ux-live .ux-header .nav-dropdown__panel a { display:block;padding:8px 10px;border-radius:7px;white-space:normal; }
body.ux-live .ux-header .nav-dropdown__panel a:hover,body.ux-live .ux-header .nav-dropdown__panel a:focus-visible { background:var(--ux-mint); }
body.ux-live .ux-header .nav-search { min-width:150px;flex:1;max-width:250px;height:38px;padding:0 14px;border:1px solid var(--ux-line);border-radius:999px;background:#fff;color:var(--ux-ink);font:inherit;font-size:16px; }
body.ux-live .ux-header .nav-search::placeholder { color:#8c9790; }
body.ux-live .ux-header .button { display:inline-flex;align-items:center;justify-content:center;flex:none;padding:12px 19px;border-radius:999px;background:var(--ux-accent);color:#fff;font-size:15px;font-weight:700;text-decoration:none;box-shadow:0 8px 18px rgba(233,106,74,.18); }
body.ux-live .ux-menu-button { display:none; }
body.ux-live :focus-visible { outline:3px solid #bd713e;outline-offset:3px; }

/* Only the shared shell is replaced. Existing page/article contents and URLs stay intact. */
body.ux-live #header,body.ux-live .header-wr.botmenu,body.ux-live .g-searchBox,body.ux-live footer.l-footer,body.ux-live .fixed-bot,body.ux-live .cta-banner-list,body.ux-live .kumai-guide,body.ux-live .modal--banner,body.ux-live .jquery-modal.blocker--banner { display:none!important; }
body.ux-live #wrapper,body.ux-live .wrapper { max-width:none!important; }
body.ux-live main { background:var(--ux-paper); }
body.ux-live main .container { width:min(1120px,calc(100% - 40px));max-width:1120px;margin-left:auto;margin-right:auto; }
body.ux-live main.p-works .layout__col__main { flex:1 1 100%;width:100%;max-width:100%;min-width:0; }
body.ux-live main.p-works .layout__col { width:100%; }
body.ux-live main.p-works .p-works__list { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 18px;width:100%; }
body.ux-live main.p-works .p-works__list > .item { width:auto;min-width:0;margin:0; }
body.ux-live main.p-works .p-works__list > .item:not(:nth-child(4n)) { margin-right:0; }
body.ux-live main.p-download .d-cardContent { width:100%; }
body.ux-live main.p-download .d-cardList { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 18px;width:100%; }
body.ux-live main.p-download .d-cardList > .item { width:auto;min-width:0;margin:0; }
body.ux-live main.p-download .d-cardList > .item:not(:nth-child(3n)) { margin-right:0; }
body.ux-live #breadcrumb { background:#eef5ef;padding:12px max(20px,calc((100vw - 1120px)/2));color:#52645a;font-size:14px; }
body.ux-live #breadcrumb a { color:var(--ux-deep); }
body.ux-live .page-title,body.ux-live .pagettl .ttl,body.ux-live .c-pagettl .ttl { color:var(--ux-ink);font-size:clamp(2rem,4vw,3.2rem);font-weight:800;letter-spacing:-.055em;line-height:1.25; }
body.ux-live .pagettl,body.ux-live .c-pagettl { background:linear-gradient(120deg,#edf6ec,#f8f5ee); }
body.ux-live .l-content { background:var(--ux-paper); }
body.ux-live main h2,body.ux-live main h3 { color:var(--ux-ink);letter-spacing:-.035em; }
body.ux-live main p,body.ux-live main li { line-height:1.85; }
body.ux-live .single-content > p,body.ux-live .single-content > ul li,body.ux-live .single-content > ol li { font-size:17px; }
body.ux-live #ecforce-service-category .ecf-card__text,body.ux-live .ux-service-article__excerpt { font-size:16px; }
body.ux-live ._items-date,body.ux-live ._items-cat,body.ux-live .custom-text-before-h2 { font-size:15px; }
body.ux-live main img { max-width:100%;height:auto; }
body.ux-live main a { text-underline-offset:3px; }
body.ux-live .entry-content,body.ux-live .single-content { color:#334139; }
body.ux-live .entry-content h2,body.ux-live .single-content h2 { border-left:4px solid var(--ux-deep);padding-left:17px; }
body.ux-live .entry-content a,body.ux-live .single-content a { color:#166346; }
body.ux-live .p-works__list,body.ux-live .works__list { gap:18px; }
body.ux-live .p-works__list img,body.ux-live .works__list img { object-fit:contain;background:#fff; }
body.ux-live .p-works__list a,body.ux-live .works__list a { background:#fff;border:1px solid var(--ux-line);border-radius:14px;overflow:hidden; }
body.ux-live .p-works__list a:hover,body.ux-live .works__list a:hover { box-shadow:0 16px 34px rgba(24,74,59,.12); }
body.ux-live .p-download a,body.ux-live .blog a { text-underline-offset:3px; }
body.ux-live .ux-blog-categories { display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:22px 0 26px;padding:18px 20px;border:1px solid var(--ux-line);border-radius:14px;background:#eef5ef; }
body.ux-live .ux-blog-categories label { color:var(--ux-ink);font-size:16px;font-weight:700; }
body.ux-live .ux-blog-categories select { min-width:220px;max-width:100%;padding:10px 35px 10px 12px;border:1px solid #b9c8bc;border-radius:9px;background:#fff;color:var(--ux-ink);font-size:16px;cursor:pointer; }
body.ux-live .ux-service-article,
body.ux-live .c-related_list > .ux-service-article ~ a:not(.ux-service-article) { display:grid;grid-template-columns:minmax(180px,31%) minmax(0,1fr);gap:22px;align-items:center;margin:0 0 20px;padding:14px;border:1px solid var(--ux-line);border-radius:12px;background:#fff;color:var(--ux-ink);text-decoration:none; }
body.ux-live .ux-service-article:hover,
body.ux-live .c-related_list > .ux-service-article ~ a:not(.ux-service-article):hover { box-shadow:0 10px 28px rgba(24,74,59,.1); }
body.ux-live .ux-service-article__image { display:block;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:#eaf2ed; }
body.ux-live .ux-service-article__image img { display:block;width:100%;height:100%;object-fit:cover; }
body.ux-live .ux-service-article__body { display:grid;align-content:center;gap:7px;min-width:0; }
body.ux-live .ux-service-article__category { color:var(--ux-deep);font-size:14px;font-weight:700; }
body.ux-live .ux-service-article__title { color:var(--ux-ink);font-size:clamp(16px,1.7vw,20px);line-height:1.5; }
body.ux-live .ux-service-article__excerpt { color:var(--ux-muted);font-size:16px;line-height:1.7; }
body.ux-live .c-related_list > .ux-service-article ~ a:not(.ux-service-article) > .items,
body.ux-live .c-related_list > .ux-service-article ~ a:not(.ux-service-article) > .items > ._wrap { display:contents;margin:0;padding:0;border:0; }
body.ux-live .c-related_list > .ux-service-article ~ a:not(.ux-service-article) .items__left { width:100%;min-width:0;overflow:visible; }
body.ux-live .c-related_list > .ux-service-article ~ a:not(.ux-service-article) .items__left .thumb { width:100%;height:auto;aspect-ratio:16/9;border-radius:8px; }
body.ux-live .c-related_list > .ux-service-article ~ a:not(.ux-service-article) .items__right { display:grid;align-content:center;gap:7px;min-width:0;margin:0; }
body.ux-live .c-related_list > .ux-service-article ~ a:not(.ux-service-article) .items__title { margin:0;color:var(--ux-ink);font-size:clamp(16px,1.7vw,20px);line-height:1.5; }
body.ux-live .c-related_list > .ux-service-article ~ a:not(.ux-service-article) .items__inner { order:-1;margin:0;padding:0;color:var(--ux-deep); }
body.ux-live .c-related_list > .ux-service-article ~ a:not(.ux-service-article) .items-box { margin:0; }
body.ux-live .c-related_list > .ux-service-article ~ a:not(.ux-service-article) .items-box p,
body.ux-live .c-related_list > .ux-service-article ~ a:not(.ux-service-article) .items-box span { font-size:15px; }
body.ux-live .c-related_list > .ux-service-article ~ a:not(.ux-service-article) .single_tag_wrap { margin:0; }
body.ux-live .post-list a,body.ux-live .c-related_list a { border-radius:12px; }
body.ux-live input,body.ux-live textarea,body.ux-live select { max-width:100%; }
body.ux-live [data-ux-live-form] button[type=submit],body.ux-live [data-ux-live-form] input[type=submit] { cursor:not-allowed; }

body.ux-live .ux-footer { padding:56px 0 24px;background:#143e32;color:#e4eee7;font-size:16px; }
body.ux-live .ux-footer__inner { width:min(1120px,calc(100% - 40px));margin:auto; }
body.ux-live .ux-footer__grid { display:grid;grid-template-columns:1.35fr repeat(4,1fr);gap:24px; }
body.ux-live .ux-footer__grid h3 { margin:0 0 12px;color:#fff;font-size:18px;letter-spacing:normal; }
body.ux-live .ux-footer__grid p { margin:0;color:#c6d6cd;font-size:16px;line-height:1.7; }
body.ux-live .ux-footer__grid ul { margin:0;padding:0;list-style:none; }
body.ux-live .ux-footer__grid li { margin:0 0 7px;color:#c6d6cd;font-size:16px;line-height:1.7; }
body.ux-live .ux-footer__grid a:not(.ux-footer__logo) { color:inherit;text-decoration:none; }
body.ux-live .ux-footer__grid a:hover { color:#fff;text-decoration:underline;text-underline-offset:3px; }
body.ux-live .ux-footer__logo { display:grid;place-items:center;width:190px;height:52px;margin-bottom:12px;border-radius:7px;background:#fff; }
body.ux-live .ux-footer__logo img { display:block;width:170px;height:auto; }
body.ux-live .ux-footer__bottom { display:flex;justify-content:space-between;gap:16px;margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);color:#a9c3b5;font-size:14px;line-height:1.6; }
body.ux-live .ux-kumai { position:fixed;left:20px;bottom:86px;z-index:1002;width:88px; }
body.ux-live .ux-kumai__button { width:88px;height:96px;padding:0;border:0;background:transparent;cursor:pointer;overflow:hidden; }
body.ux-live .ux-kumai__button { touch-action:none;cursor:grab; }
body.ux-live .ux-kumai.is-dragging .ux-kumai__button { cursor:grabbing; }
body.ux-live .ux-kumai__button img { display:block;width:620px;max-width:none;height:auto;transform:translateX(-532px); }
body.ux-live .ux-kumai__panel { position:absolute;left:0;bottom:112px;width:225px;padding:16px;border:1px solid var(--ux-line);border-radius:14px;background:#fff;box-shadow:0 12px 36px rgba(20,55,40,.17);font-size:14px; }
body.ux-live .ux-kumai.is-at-right .ux-kumai__panel { left:auto;right:0; }
body.ux-live .ux-kumai.is-at-top .ux-kumai__panel { top:112px;bottom:auto; }
body.ux-live .ux-kumai__panel[hidden] { display:none; }
body.ux-live .ux-kumai__panel a { display:block;margin-top:8px;padding:8px 10px;border-radius:8px;background:#edf5ee;color:#1d5139;font-weight:700;text-decoration:none; }
body.ux-live .ux-bottom-cta { position:fixed;left:0;right:0;bottom:0;z-index:1001;display:flex;align-items:center;justify-content:center;gap:24px;min-height:76px;padding:10px 20px;background:rgba(0,0,0,.91);color:#fff;box-shadow:0 -6px 20px rgba(0,0,0,.16); }
body.ux-live .ux-bottom-cta__badge { display:grid;place-items:center;width:56px;height:56px;background:#ffd00d;color:#050707;font-size:17px;font-weight:900;line-height:1.05;text-align:center; }
body.ux-live .ux-bottom-cta strong { color:#ffd00d;font-size:28px;letter-spacing:-.05em; }
body.ux-live .ux-bottom-cta a { display:inline-flex;align-items:center;justify-content:center;gap:8px;width:378px;height:50px;border-radius:30px;background:linear-gradient(to right,#7dd4b5,#81f794);color:#040707;font-size:18px;font-weight:800;text-decoration:none; }
body.ux-live .ux-bottom-cta a img { width:100px;max-height:36px;object-fit:contain; }
body.ux-live .ux-live-notice { position:fixed;right:12px;bottom:80px;z-index:1000;padding:4px 9px;border-radius:7px;background:#fff;color:#52645a;font-size:12px;box-shadow:0 3px 12px rgba(0,0,0,.12); }
body.ux-live .ux-results { min-height:70vh;padding:65px 0 100px; }
body.ux-live .ux-results__inner { width:min(1120px,calc(100% - 40px));margin:auto; }
body.ux-live .ux-results h1 { font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.055em; }
body.ux-live .ux-results__form { display:flex;gap:8px;max-width:680px;margin:25px 0; }
body.ux-live .ux-results__form input { flex:1;min-width:0;padding:13px 16px;border:1px solid #b9c8bc;border-radius:10px;background:#fff;font:inherit; }
body.ux-live .ux-results__form button { padding:0 20px;border:0;border-radius:10px;background:var(--ux-deep);color:#fff;font:inherit;font-weight:700;cursor:pointer; }
body.ux-live .ux-results__summary { color:var(--ux-muted); }
body.ux-live .ux-results__grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:26px; }
body.ux-live .ux-results__card { padding:24px;border:1px solid var(--ux-line);border-radius:14px;background:#fff; }
body.ux-live .ux-results__card small { color:var(--ux-deep);font-size:14px;font-weight:800; }
body.ux-live .ux-results__card h2 { margin:9px 0;font-size:19px;line-height:1.5; }
body.ux-live .ux-results__card h2 a { color:var(--ux-ink);text-decoration:none; }
body.ux-live .ux-results__card h2 a:hover { text-decoration:underline;text-underline-offset:3px; }
body.ux-live .ux-results__card p { margin:0;color:var(--ux-muted);font-size:16px;line-height:1.7; }
@media (max-width:960px) { body.ux-live .ux-header .nav-search { display:none; } body.ux-live .ux-header nav { gap:12px;font-size:12px; } }
@media (max-width:1024px) { body.ux-live main.p-works .p-works__list,body.ux-live main.p-download .d-cardList { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) { body.ux-live .ux-header .nav { flex-wrap:wrap;gap:8px; } body.ux-live .ux-header .ux-menu-button { display:inline-grid;place-items:center;width:40px;height:40px;margin-left:auto;border:1px solid var(--ux-line);border-radius:8px;background:#fff;color:var(--ux-deep);font-size:19px;cursor:pointer; } body.ux-live .ux-header nav { display:none;order:4;flex:0 0 100%;flex-wrap:wrap;gap:4px;padding:4px 0 12px;white-space:normal; } body.ux-live .ux-header nav.is-open { display:flex; } body.ux-live .ux-header nav a { padding:9px 10px; } body.ux-live .ux-header .button { padding:9px 13px; } body.ux-live .ux-footer__grid { grid-template-columns:1fr; } body.ux-live .ux-footer__bottom { flex-direction:column; } body.ux-live main.p-works .p-works__list,body.ux-live main.p-download .d-cardList { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { body.ux-live { padding-bottom:98px; } body.ux-live .ux-header .nav,body.ux-live .ux-footer__inner,body.ux-live main .container { width:calc(100% - 32px); } body.ux-live .ux-header .brand { flex-basis:145px;width:145px;transform:translateX(-4px); } body.ux-live .ux-bottom-cta { flex-wrap:wrap;gap:4px;min-height:98px;padding:6px 12px; } body.ux-live .ux-bottom-cta__badge { width:35px;height:35px;font-size:11px; } body.ux-live .ux-bottom-cta strong { font-size:18px; } body.ux-live .ux-bottom-cta a { width:100%;height:42px;font-size:15px; } body.ux-live .ux-bottom-cta a img { width:78px;max-height:27px; } body.ux-live .ux-kumai { left:12px;bottom:108px; } body.ux-live .ux-live-notice { right:6px;bottom:102px;font-size:12px; } body.ux-live .ux-results__inner { width:calc(100% - 32px); } body.ux-live .ux-results__grid { grid-template-columns:1fr; } }
@media (max-width:480px) { body.ux-live main.p-works .p-works__list,body.ux-live main.p-download .d-cardList { grid-template-columns:1fr; } }
@media (max-width:760px) { body.ux-live .ux-header .nav-dropdown summary { padding:9px 10px; } body.ux-live .ux-header .nav-dropdown__panel { position:static;max-height:none;box-shadow:none; } }
@media (max-width:640px) { body.ux-live .ux-service-article,body.ux-live .c-related_list > .ux-service-article ~ a:not(.ux-service-article) { grid-template-columns:1fr;gap:12px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
/* Keep the shared navigation readable instead of shrinking it at tablet widths. */
@media (max-width:1100px) {
  body.ux-live .ux-header .nav { flex-wrap:wrap;gap:8px; }
  body.ux-live .ux-header .ux-menu-button { display:inline-grid;place-items:center;width:40px;height:40px;margin-left:auto;border:1px solid var(--ux-line);border-radius:8px;background:#fff;color:var(--ux-deep);font-size:20px;cursor:pointer; }
  body.ux-live .ux-header nav { display:none;order:4;flex:0 0 100%;flex-wrap:wrap;gap:4px;padding:4px 0 12px;color:#31423a;font-size:16px;white-space:normal; }
  body.ux-live .ux-header nav.is-open { display:flex; }
  body.ux-live .ux-header nav a,body.ux-live .ux-header .nav-dropdown summary { padding:9px 10px; }
  body.ux-live .ux-header .nav-dropdown__panel { position:static;max-height:none;box-shadow:none; }
  body.ux-live .ux-header .button { padding:9px 13px; }
}