/* 下層ページ共通の見た目（トップ・/satellite と同じ：黒地・Saira Condensed／Zen Kaku Gothic New・上のメニュー・フッター）。
   2026-10-22 作成。文章・構造は変えず、見た目だけをこの1枚で上書きする。
   使い方：<body class="sx sx-blog|sx-case|sx-section"> と、head の最後でこのCSSを読む。
   既存ページのCSS（.col・.hero・.section 等）は残し、body.sx を頭に付けた規則で上書きする。 */
:root{
  /* 本文まわりの色（地・文字・線・箱）。パレットを変えるときは、ここと下の html.sx-c だけ触る */
  --sx-bg:#000;--sx-fg:#fff;--sx-inv:#000;--sx-text:#e6e6e6;--sx-dim:rgba(230,230,230,.72);--sx-line:rgba(255,255,255,.2);--sx-line2:rgba(255,255,255,.42);
  --sx-btn-line:rgba(255,255,255,.5);--sx-soft:rgba(255,255,255,.08);
  --sx-deep:#000;--sx-panel:#070707;--sx-inset:#070707;--sx-box-hover:#0e0e0e;--sx-code-bg:#141414;--sx-pre-bg:#0a0a0a;
  --sx-card-bg:#fff;--sx-card-text:#111;--sx-card-dim:#555;--sx-card-line:rgba(0,0,0,.18);
  /* 上のメニュー・全画面メニュー・フッターの色（c = chrome） */
  --sx-c-bg:rgba(0,0,0,.88);--sx-c-solid:#000;--sx-c-fg:#fff;--sx-c-text:#e6e6e6;--sx-c-line:rgba(255,255,255,.2);--sx-c-line2:rgba(255,255,255,.6);--sx-c-logo:brightness(0) invert(1);
  --sx-gx:clamp(20px,2.05vw,40px);--sx-nav-h:clamp(56px,4.4vw,88px);
  --sx-en:"Saira Condensed","Arial Narrow",sans-serif;
  --sx-jp:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}
html{background:var(--sx-bg)!important;scroll-behavior:smooth}
body.sx{margin:0;background:var(--sx-bg);color:var(--sx-text);font-family:var(--sx-jp);font-weight:500;line-height:1.9;letter-spacing:.02em;-webkit-font-smoothing:antialiased;
  word-break:keep-all;overflow-wrap:anywhere;line-break:strict;padding-top:var(--sx-nav-h)}
body.sx h1,body.sx h2,body.sx h3{text-wrap:balance}
body.sx a{color:inherit}
body.sx img{max-width:100%}
body.sx .side,body.sx .topbar,body.sx .sp-menu{display:none!important}
body.sx :focus-visible{outline:2px solid var(--sx-fg);outline-offset:3px}

/* ---------- 上のメニュー ---------- */
.sx-nav,.sx-drawer{color:var(--sx-c-text)}
.sx-nav{position:fixed;inset:0 0 auto 0;z-index:30;height:var(--sx-nav-h);display:flex;align-items:center;padding-left:var(--sx-gx);background:var(--sx-c-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--sx-c-line);font-family:var(--sx-jp)}
.sx-nav-logo{display:flex;align-items:center;gap:10px;flex:0 0 auto;width:max(12.2vw,184px);text-decoration:none;color:var(--sx-c-fg)}
.sx-nav-logo img{height:17px;width:auto;filter:var(--sx-c-logo)}
.sx-nav-logo span{font-family:var(--sx-en);font-weight:700;font-size:clamp(17px,1.5vw,24px);letter-spacing:.08em;line-height:1}
.sx-nav-list{display:flex;align-items:center;gap:clamp(18px,1.95vw,40px);margin-left:clamp(0px,.5vw,12px)}
.sx-nav-list a{position:relative;padding:6px 0;font-family:var(--sx-en);font-weight:400;font-size:clamp(12px,.95vw,16px);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;text-decoration:none;color:var(--sx-c-fg)}
.sx-nav-list a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--sx-c-fg);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.sx-nav-list a:hover::after,.sx-nav-list a:focus-visible::after,.sx-nav-list a[aria-current]::after{transform:scaleX(1)}
.sx-nav-cta{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 18px;margin-right:clamp(12px,1.4vw,24px);border:1px solid var(--sx-c-line2);color:var(--sx-c-fg);font-family:var(--sx-jp);font-weight:700;font-size:13px;letter-spacing:.1em;text-decoration:none;white-space:nowrap;transition:background .3s,color .3s}
.sx-nav-cta:hover,.sx-nav-cta:focus-visible{background:var(--sx-c-fg);color:var(--sx-c-solid)}
.sx-burger{margin-left:0;flex:0 0 auto;width:calc(var(--sx-nav-h)*1.07);height:100%;border:0;border-left:1px solid var(--sx-c-line);background:none;color:var(--sx-c-fg);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0}
.sx-burger span{display:block;width:24px;height:2px;background:var(--sx-c-fg);transition:transform .3s ease,opacity .3s ease}
.sx-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.sx-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.sx-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.sx-drawer{position:fixed;inset:0;z-index:25;background:var(--sx-c-solid);padding:calc(var(--sx-nav-h) + 6vh) var(--sx-gx) 8vh;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;overflow-y:auto}
.sx-drawer>nav{margin-top:auto}
.sx-drawer[hidden]{display:none}
.sx-drawer nav{display:flex;flex-direction:column;gap:clamp(14px,3vh,28px);width:100%}
.sx-drawer a{font-family:var(--sx-en);font-weight:700;font-size:min(clamp(28px,4.4vw,56px),4vh);letter-spacing:.06em;text-transform:uppercase;line-height:1.15;border-bottom:1px solid var(--sx-c-line);padding-bottom:clamp(10px,2vh,18px);text-decoration:none;color:var(--sx-c-fg)}
.sx-drawer .sx-drawer-line{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;gap:12px;margin-top:clamp(24px,5vh,44px);margin-bottom:auto;min-height:52px;padding:0 28px;border:1px solid var(--sx-c-line2);font-family:var(--sx-jp);font-weight:700;font-size:16px;letter-spacing:.04em;text-transform:none;line-height:1.4;color:var(--sx-c-fg);transition:background .2s,color .2s}
.sx-drawer .sx-drawer-line:hover,.sx-drawer .sx-drawer-line:focus-visible{background:var(--sx-c-fg);color:var(--sx-c-solid)}
body.sx.menu-open{overflow:hidden}
@media (max-width:899px){.sx-nav-cta{padding:0 14px;height:34px;font-size:12px;margin-right:12px}.sx-nav-list{display:none}.sx-nav{--sx-nav-h:56px;padding-left:20px}.sx-nav-logo{width:auto}.sx-burger{width:56px}body.sx{--sx-nav-h:56px}}
@media (min-width:900px) and (max-width:1199px){.sx-nav-list{gap:16px}.sx-nav-list a{font-size:11px;letter-spacing:.05em}}

/* ---------- フッター ---------- */
.sx-foot{background:var(--sx-c-solid);border-top:1px solid var(--sx-c-line);padding:clamp(40px,6vh,72px) var(--sx-gx) calc(40px + env(safe-area-inset-bottom));font-family:var(--sx-jp);font-weight:500;font-size:14px;line-height:1.9;color:var(--sx-c-text)}
.sx-foot p{color:var(--sx-c-text)}
.sx-foot .name{font-weight:700;font-size:20px;margin-bottom:6px;color:var(--sx-c-fg)}
.sx-foot-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin:18px 0}
.sx-foot-links a{opacity:.85;text-decoration:underline;text-underline-offset:3px;color:var(--sx-c-fg)}
.sx-foot small{display:block;opacity:.6;margin-top:12px;font-size:12px}

/* ---------- ボタン（共通：黒地に白い線） ---------- */
body.sx .btn,body.sx .button,body.sx .head-cta,body.sx .theme-btn,body.sx a.btn-orange,body.sx a.btn-dark{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 28px;border:1px solid var(--sx-btn-line);border-radius:0;background:var(--sx-soft);color:var(--sx-fg);box-shadow:none;font-family:var(--sx-jp);font-weight:700;font-size:15px;letter-spacing:.1em;text-decoration:none;transition:background .3s,color .3s;line-height:1.4}
body.sx .btn:hover,body.sx .button:hover,body.sx .theme-btn:hover{background:var(--sx-fg);color:var(--sx-inv);transform:none}
body.sx .btn-line{background:transparent}

/* =====================================================================
   ブログ記事・一覧（.col の中に .blog-* がある作り）
   ===================================================================== */
body.sx .stage{margin-left:0!important;padding:0!important;min-height:0}
body.sx .col{max-width:none;margin:0;background:transparent;box-shadow:none;border-radius:0;overflow:visible}
body.sx-blog .container{max-width:760px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
body.sx-blog .blog-header{padding-top:clamp(40px,7vh,88px);padding-bottom:28px}
body.sx-blog .blog-eyebrow{font-family:var(--sx-en);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--sx-fg);margin-bottom:14px}
body.sx-blog .blog-eyebrow:before{content:"";display:inline-block;width:28px;height:1px;background:var(--sx-fg);margin-right:12px;vertical-align:middle}
body.sx-blog .blog-title{font-family:var(--sx-jp);font-weight:900;font-size:clamp(28px,3.4vw,44px);line-height:1.4;letter-spacing:.01em;color:var(--sx-fg)}
body.sx-blog .blog-meta{margin-top:14px;font-family:var(--sx-en);font-weight:400;font-size:15px;letter-spacing:.1em;color:var(--sx-dim)}
body.sx-blog .blog-lead{margin-top:24px;padding:4px 0 4px 18px;background:transparent;border-left:2px solid var(--sx-fg);border-radius:0;font-size:16px;line-height:1.95;color:var(--sx-text)}
body.sx-blog .blog-content{padding-bottom:24px;color:var(--sx-text)}
body.sx-blog .blog-content h2{margin:64px 0 18px;padding:0 0 14px;font-size:clamp(22px,2.2vw,28px);line-height:1.5;font-weight:900;color:var(--sx-fg);border-bottom:1px solid var(--sx-line2)}
body.sx-blog .blog-content h2:before{content:"";display:inline-block;width:14px;height:1px;background:var(--sx-fg);margin-right:12px;vertical-align:middle}
body.sx-blog .blog-content h3{margin:36px 0 12px;padding-left:14px;border-left:2px solid var(--sx-fg);font-size:19px;line-height:1.55;font-weight:700;color:var(--sx-fg)}
body.sx-blog .blog-content p{font-size:17px;line-height:1.95;margin-bottom:22px;color:var(--sx-text)}
body.sx-blog .blog-content ul,body.sx-blog .blog-content ol{list-style:none;margin:0 0 24px;padding:16px 20px;background:var(--sx-inset);border:1px solid var(--sx-line);border-radius:0;counter-reset:sxol}
body.sx-blog .blog-content li{position:relative;padding-left:24px;font-size:16px;line-height:1.9;margin-bottom:6px;color:var(--sx-text)}
body.sx-blog .blog-content li:last-child{margin-bottom:0}
body.sx-blog .blog-content ul li:before{content:"";position:absolute;left:2px;top:.85em;width:9px;height:1px;background:var(--sx-fg);border-radius:0}
body.sx-blog .blog-content ol li{counter-increment:sxol}
body.sx-blog .blog-content ol li:before{content:counter(sxol)".";position:absolute;left:0;top:0;font-family:var(--sx-en);font-weight:600;color:var(--sx-fg);background:none;width:auto;height:auto}
body.sx-blog .blog-content strong{font-weight:700;color:var(--sx-fg)}
body.sx-blog .blog-content a{color:var(--sx-fg);text-decoration:underline;text-underline-offset:4px;font-weight:700}
body.sx-blog .blog-content code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:var(--sx-code-bg);border:1px solid var(--sx-line);border-radius:3px;padding:2px 6px;color:var(--sx-fg)}
body.sx-blog .blog-content pre{background:var(--sx-pre-bg);color:var(--sx-text);border:1px solid var(--sx-line);border-radius:0;padding:18px;overflow-x:auto;margin-bottom:24px;font-size:13px;line-height:1.7}
body.sx-blog .blog-content pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
body.sx-blog .blog-content blockquote{margin:0 0 24px;padding:6px 0 6px 18px;border-left:2px solid var(--sx-line2);color:var(--sx-dim)}
body.sx-blog .blog-content table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px}
body.sx-blog .blog-content th,body.sx-blog .blog-content td{padding:10px 12px;border:1px solid var(--sx-line);text-align:left;color:var(--sx-text)}
body.sx-blog .blog-content th{background:var(--sx-inset);color:var(--sx-fg);font-weight:700}
body.sx-blog .blog-content hr{border:0;border-top:1px solid var(--sx-line);margin:40px 0}
body.sx-blog .blog-content img{border:1px solid var(--sx-line);height:auto}
body.sx-blog .blog-cta{margin:56px 0 40px;padding:28px 24px;background:var(--sx-inset);color:var(--sx-fg);border:1px solid var(--sx-line2);border-radius:0}
body.sx-blog .blog-cta h3{color:var(--sx-fg);border:0;padding:0}
body.sx-blog .blog-cta p{color:var(--sx-text);font-size:15px}
body.sx-blog .blog-content .blog-cta a.btn,body.sx-blog .blog-content .blog-cta a.btn:hover{text-decoration:none}
body.sx-blog .blog-content .blog-cta a.btn{color:var(--sx-fg)}
body.sx-blog .blog-content .blog-cta a.btn:hover{color:var(--sx-inv)}
body.sx-blog .blog-list{padding-top:4px;padding-bottom:48px;display:grid;gap:14px}
body.sx-blog .blog-card{display:block;padding:22px;background:var(--sx-panel);border:1px solid var(--sx-line);border-radius:0;transition:border-color .2s,background .2s}
body.sx-blog .blog-card:hover{border-color:var(--sx-fg);background:var(--sx-box-hover);transform:none}
body.sx-blog .blog-card-date{font-family:var(--sx-en);font-weight:600;font-size:14px;color:var(--sx-dim);letter-spacing:.1em}
body.sx-blog .blog-card-title{font-size:19px;line-height:1.55;font-weight:700;margin-top:4px;color:var(--sx-fg)}
body.sx-blog .blog-card-desc{font-size:14px;line-height:1.85;color:var(--sx-dim);margin-top:6px}
body.sx-blog .blog-empty{color:var(--sx-dim)}
body.sx-blog .mascot-on-dark{background:var(--sx-card-bg);border-radius:50%;padding:6px}
@media (max-width:759px){body.sx-blog .blog-content p{font-size:16px}}

/* =====================================================================
   導入事例（case.css の作り：.col の中に .hero・.section・.cta）
   ===================================================================== */
body.sx-case{--ink:var(--sx-fg);--muted:var(--sx-dim);--line:var(--sx-line);--paper:var(--sx-panel);--accent:var(--sx-fg);--blue:var(--sx-fg);font-family:var(--sx-jp)}
body.sx-case .wrap{width:auto;max-width:1120px;margin:0 auto;padding:0 var(--sx-gx)}
body.sx-case .hero{padding:clamp(48px,8vh,96px) 0 56px;background:transparent;border-bottom:1px solid var(--sx-line)}
body.sx-case .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,64px);margin-top:20px;align-items:center}
body.sx-case .kicker{color:var(--sx-fg);font-family:var(--sx-en);font-weight:600;font-size:14px;letter-spacing:.16em}
body.sx-case .kicker:before{background:var(--sx-fg);height:1px}
body.sx-case .hero h1{font-family:var(--sx-jp);font-weight:900;font-size:clamp(30px,3.6vw,52px);line-height:1.35;letter-spacing:.01em;color:var(--sx-fg)}
body.sx-case .hero-lead{color:var(--sx-text);font-size:16px}
body.sx-case .permission{color:var(--sx-text)}
body.sx-case .permission:before{background:transparent;border:1px solid var(--sx-fg);color:var(--sx-fg)}
body.sx-case .hero-media{border-radius:0;box-shadow:none;border:1px solid var(--sx-line)}
body.sx-case .facts{grid-template-columns:repeat(3,1fr);border:1px solid var(--sx-line);border-radius:0;background:var(--sx-line);margin-top:48px}
body.sx-case .fact{background:var(--sx-deep);padding:22px}
body.sx-case .fact small{color:var(--sx-dim)}
body.sx-case .fact strong{color:var(--sx-fg);font-size:17px}
body.sx-case .section{padding:clamp(56px,9vh,96px) 0;border-bottom:1px solid var(--sx-line);background:transparent}
body.sx-case .section.alt{background:var(--sx-panel)}
body.sx-case .section-head{grid-template-columns:240px minmax(0,1fr);gap:clamp(20px,4vw,54px);margin-bottom:40px}
body.sx-case .section-label{color:var(--sx-fg);font-family:var(--sx-en);font-weight:600;font-size:14px;letter-spacing:.16em}
body.sx-case .section-label:before{content:""}
body.sx-case .section h2{font-family:var(--sx-jp);font-weight:900;font-size:clamp(24px,2.8vw,38px);line-height:1.45;letter-spacing:.01em;color:var(--sx-fg)}
body.sx-case .section-intro{color:var(--sx-text);font-size:16px}
body.sx-case .flow-card,body.sx-case .panel{background:var(--sx-panel);border:1px solid var(--sx-line);border-radius:0;padding:26px}
body.sx-case .flow-num{color:var(--sx-fg);font-family:var(--sx-en);font-weight:600;font-size:15px}
body.sx-case .flow-card h3{font-size:19px;font-weight:700;color:var(--sx-fg)}
body.sx-case .flow-card p,body.sx-case .panel p{color:var(--sx-dim)}
body.sx-case .metric{background:var(--sx-panel);border:1px solid var(--sx-line2);border-radius:0;padding:36px;color:var(--sx-fg)}
body.sx-case .metric-value{font-family:var(--sx-en);font-weight:700;letter-spacing:0;color:var(--sx-fg)}
body.sx-case .metric p{color:var(--sx-dim)}
body.sx-case .note{color:var(--sx-dim)}
body.sx-case .screen{border:1px solid var(--sx-line);border-radius:0;box-shadow:none;background:var(--sx-deep)}
body.sx-case .screen figcaption{color:var(--sx-dim);border-top:1px solid var(--sx-line)}
body.sx-case .checklist li{border-bottom:1px solid var(--sx-line);color:var(--sx-text)}
body.sx-case .checklist li:before{color:var(--sx-fg)}
body.sx-case .client-logo{background:var(--sx-card-bg);border-radius:0}
body.sx-case .external{color:var(--sx-fg);text-underline-offset:4px}
body.sx-case .cta{background:var(--sx-deep);color:var(--sx-fg);border-bottom:1px solid var(--sx-line)}
body.sx-case .cta h2{font-family:var(--sx-jp);font-weight:900;color:var(--sx-fg)}
body.sx-case .cta p{color:var(--sx-dim)}
body.sx-case .col .wrap{padding:0 var(--sx-gx)}
body.sx-case .page-back{color:var(--sx-fg)!important}
@media (max-width:899px){body.sx-case .hero-grid,body.sx-case .section-head,body.sx-case .facts,body.sx-case .flow,body.sx-case .result,body.sx-case .split,body.sx-case .cta-grid{grid-template-columns:1fr}}

/* =====================================================================
   会社情報など（section-pages.css の作り：.shell・.page-hero・.section）
   ===================================================================== */
body.sx-section{--ink:var(--sx-fg);--muted:var(--sx-dim);--line:var(--sx-line);--soft:var(--sx-panel);--accent:var(--sx-fg)}
body.sx-section .shell{width:min(1180px,calc(100% - 2*var(--sx-gx)));margin:auto}
body.sx-section .page-hero{padding:clamp(56px,10vh,110px) 0 46px}
body.sx-section .page-kicker{color:var(--sx-fg);font-family:var(--sx-en);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase}
body.sx-section .page-hero h1{font-family:var(--sx-jp);font-weight:900;font-size:clamp(27px,5vw,64px);line-height:1.25;letter-spacing:.01em;color:var(--sx-fg)}
body.sx-section .page-hero p{color:var(--sx-text)}
body.sx-section .company-signal strong{color:var(--sx-fg)}
body.sx-section .company-signal span{color:var(--sx-dim)}
body.sx-section .section{padding:clamp(56px,9vh,88px) 0;background:transparent;border-top:1px solid var(--sx-line)}
body.sx-section .section.soft{background:var(--sx-panel)}
body.sx-section .section-head h2{font-family:var(--sx-jp);font-weight:900;font-size:clamp(26px,3.4vw,42px);line-height:1.35;letter-spacing:.01em;color:var(--sx-fg)}
body.sx-section .section-head p{color:var(--sx-dim)}
body.sx-section .feature-card,body.sx-section .product-card{background:var(--sx-panel);border:1px solid var(--sx-line);border-radius:0}
body.sx-section .feature-card h3,body.sx-section .product-body h2,body.sx-section .product-body h3{color:var(--sx-fg);font-weight:700}
body.sx-section .feature-card p,body.sx-section .product-body p{color:var(--sx-dim)}
body.sx-section .feature-num,body.sx-section .product-body small{color:var(--sx-dim);font-family:var(--sx-en);font-weight:600;letter-spacing:.14em}
body.sx-section .company-list,body.sx-section .company-row{border-color:var(--sx-line)}
body.sx-section .company-row dt{color:var(--sx-dim)}
body.sx-section .company-row dd{color:var(--sx-text);font-weight:500}
body.sx-section .company-row a,body.sx-section a.text-link{color:var(--sx-fg);text-underline-offset:4px}
body.sx-section .cta{background:var(--sx-deep);color:var(--sx-fg);border-top:1px solid var(--sx-line)}
body.sx-section .cta h2{font-family:var(--sx-jp);font-weight:900;color:var(--sx-fg)}
body.sx-section .cta p{color:var(--sx-dim)}
body.sx-section .faq details{border-color:var(--sx-line)}
body.sx-section .faq p{color:var(--sx-dim)}
body.sx-section .price-note{background:var(--sx-panel);border:1px solid var(--sx-line2);border-radius:0}
body.sx-section .price-note p{color:var(--sx-dim)}
body.sx-section .hero-photo,body.sx-section .visual-card{border-radius:0}
body.sx-section .dark-button{background:var(--sx-soft);color:var(--sx-fg)}
body.sx-section .text-button{border-bottom-color:var(--sx-fg);color:var(--sx-fg)}
body.sx-section .hero-mascot{background:var(--sx-card-bg);border-radius:50%;padding:6px}
@media (max-width:899px){body.sx-section .company-layout,body.sx-section .feature-grid,body.sx-section .product-grid,body.sx-section .visual-grid{grid-template-columns:1fr}body.sx-section .company-heading{position:static}}
/* 画面を再現した部品（.mock）は、管理画面そのものの見た目なので明るいまま。文字色だけ黒に戻す */
body.sx-case .mock{--ink:#171717;--muted:#666;color:#171717;background:#f2f4f7}
body.sx-case .mock *{color:inherit}
body.sx-case .mock .calendar-row span:last-child,body.sx-case .mock .status-item small{color:#197342}
body.sx-case .mock-bar{color:#fff}
/* 導入事例：広い画面では、もとの case.css が想定していた段組みに戻す（旧デザインは幅680pxの1列に押し込めていた） */
@media (min-width:900px){
  body.sx-case .col .flow{grid-template-columns:repeat(3,1fr)}
  body.sx-case .col .split{grid-template-columns:1fr 1fr}
  body.sx-case .col .result{grid-template-columns:.8fr 1.2fr}
  body.sx-case .col .mock-grid{grid-template-columns:1.4fr .8fr}
  body.sx-case .col .cta-grid{grid-template-columns:1fr auto}
  body.sx-case .col .hero h1{font-size:clamp(34px,3.6vw,52px)}
  body.sx-case .col .section h2{font-size:clamp(26px,2.8vw,38px)}
  body.sx-case .col .section-head{grid-template-columns:240px minmax(0,1fr)}
  body.sx-case .col .facts{grid-template-columns:repeat(3,1fr)}
  body.sx-case .col .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  body.sx-case .col .metric-value{font-size:clamp(58px,8vw,92px)}
  body.sx-case .col .calendar-row{grid-template-columns:70px 1fr 72px;font-size:13px}
}
/* 導入事例のページ送り（「前の事例」へのリンク）。旧フッターから本文側へ移した */
body.sx-case .case-pager{border-top:1px solid var(--sx-line);padding:28px 0;font-size:14px;color:var(--sx-dim)}
body.sx-case .case-pager a{color:var(--sx-fg);text-decoration:underline;text-underline-offset:4px;font-weight:700}

/* =====================================================================
   プライバシーポリシー（body.sx-page：.panel の中に h1・h2・p・ul がある作り）
   ===================================================================== */
body.sx-page main{max-width:820px;margin:0 auto;padding:clamp(40px,7vh,88px) var(--sx-gx) clamp(56px,9vh,112px)}
body.sx-page .panel{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;color:var(--sx-text)}
body.sx-page .brand{display:none}
body.sx-page h1{font-family:var(--sx-jp);font-weight:700;font-size:clamp(28px,3.4vw,44px);line-height:1.4;margin:0 0 14px;color:var(--sx-fg)}
body.sx-page h2{font-family:var(--sx-jp);font-weight:700;font-size:clamp(17px,1.5vw,20px);line-height:1.5;margin:48px 0 12px;padding-top:24px;border-top:1px solid var(--sx-line);color:var(--sx-fg)}
body.sx-page main p,body.sx-page main li{color:var(--sx-text);font-size:16px;line-height:1.95}
body.sx-page .meta{color:var(--sx-dim);font-size:14px}
body.sx-page main ul{padding-left:1.4em}
body.sx-page main a{color:var(--sx-fg);text-decoration:underline;text-underline-offset:3px}
body.sx-page .back{display:inline-flex;margin-top:40px;color:var(--sx-fg);font-family:var(--sx-en);letter-spacing:.06em;text-decoration:none;border-bottom:1px solid var(--sx-line2);padding-bottom:4px}
@media (max-width:640px){body.sx-page main p,body.sx-page main li{font-size:15px}}

/* =====================================================================
   404（Windows 95風の画面は残し、上のメニューだけ重ねる。背景は黒）
   ===================================================================== */
body.sx-n404{padding-top:0;background:var(--sx-bg);color:#000;font-family:"MS PGothic","ＭＳ Ｐゴシック","Hiragino Kaku Gothic ProN",sans-serif;font-weight:400;line-height:normal;letter-spacing:0;overflow:hidden}
body.sx-n404 .desktop{top:var(--sx-nav-h)}
body.sx-n404 .win,body.sx-n404 .win-text,body.sx-n404 .win-text p,body.sx-n404 .btn95,body.sx-n404 .taskbar{color:#000;letter-spacing:0;line-height:1.65}
body.sx-n404 .win-title,body.sx-n404 .win-title span{color:#fff}
body.sx-n404 .win-text .path{color:#404040}
body.sx-n404 .btn95{text-decoration:none}
body.sx-n404 .dicon span{color:#fff}
body.sx-n404 .sx-nav,body.sx-n404 .sx-drawer{color:#fff;font-family:var(--sx-jp);font-weight:500;letter-spacing:.02em;line-height:1.9}
body.sx-n404 .sx-nav-cta:hover,body.sx-n404 .sx-nav-cta:focus-visible{color:#000}
body.sx-page h2::before{color:var(--sx-dim)!important}

/* ---------- ブログ枠の追加分（/fukui-ai の相談窓口カードなど） ---------- */
body.sx-blog .page-updated{display:inline-block;background:transparent;border:1px solid var(--sx-line2);border-radius:0;padding:2px 12px;font-family:var(--sx-jp);font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--sx-dim)}
body.sx-blog .madoguchi-grid{gap:16px}
body.sx-blog .madoguchi-card{background:var(--sx-inset);border:1px solid var(--sx-line);border-radius:0;padding:24px}
body.sx-blog .madoguchi-card h3{color:var(--sx-fg);font-size:18px;border:0;padding:0}
body.sx-blog .mc-tag{background:transparent;color:var(--sx-fg);border:1px solid var(--sx-line2);border-radius:0;font-weight:500}
body.sx-blog .mc-desc{color:var(--sx-text)}
body.sx-blog .mc-meta{color:var(--sx-text)}
body.sx-blog .mc-meta dt{color:var(--sx-dim)}
body.sx-blog .mc-link{color:var(--sx-fg)}
body.sx-blog .mc-note{background:transparent;color:var(--sx-text);border-left:2px solid var(--sx-fg);border-radius:0}
body.sx-blog .mc-note a{color:var(--sx-fg)}

/* ---------- 切り替えタブ（/services の業務の種類） ---------- */
body.sx .uc-tab{background:transparent;border:1px solid var(--sx-line2);border-radius:0;color:var(--sx-text);font-family:var(--sx-jp);font-weight:500;padding:8px 18px;cursor:pointer}
body.sx .uc-tab:hover{border-color:var(--sx-fg);color:var(--sx-fg)}
body.sx .uc-tab.is-active{background:var(--sx-fg);border-color:var(--sx-fg);color:var(--sx-inv)}
body.sx .uc-tab:focus-visible{outline:2px solid var(--sx-fg);outline-offset:2px}

/* =====================================================================
   ストーリー（body.sx-story：赤と水色の差し色は元の値のまま。黒地で読めるよう、薄い文字色と罫線だけ明るくする）
   ===================================================================== */
body.sx-story{--muted:rgba(230,230,230,.72);--line:rgba(255,255,255,.2)}
/* 白い箱の中の文字は、箱用の文字色で明示する（本文用の薄い文字色を受け継ぐと見えなくなる）。リンクは body.sx a の継承に負けないよう書く */
body.sx-story .direction-card h3{color:var(--sx-card-text)}
body.sx-story .direction-card p{color:var(--sx-card-dim)}
body.sx-story .direction-card p span{font-size:inherit;letter-spacing:inherit;font-weight:inherit;color:inherit}
body.sx-story a.cta-primary{color:var(--sx-card-text)}
body.sx-story a.cta-primary:hover{color:#fff}

/* ---------- 代表の発信（note一覧）：白い箱の上の文字は、箱用の文字色で明示する ---------- */
body.sx .note-list a{background:var(--sx-card-bg);color:var(--sx-card-text);border-color:var(--sx-card-line);border-radius:0}
body.sx .note-list a .note-tag{color:var(--sx-card-dim);border-color:var(--sx-card-dim);border-radius:0;font-weight:500}
@media(hover:hover){body.sx .note-list a:hover{border-color:var(--sx-card-text)}}

/* =====================================================================
   案C（2026-10-22 決裁）：地は薄いグレー、本文・カードは白い箱、文字は黒に近い濃い色。
   <html class="sx-c"> を付けると、上の変数が入れ替わる（付けなければ従来の黒）。
   上のメニュー・全画面メニュー・フッターは、既定は黒のまま（トップとつなげる）。
   <html class="sx-c sx-chrome-light"> にすると、これらも地に合わせた明るい色になる。
   ===================================================================== */
html.sx-c{
  --sx-bg:#e9e9e9;--sx-fg:#111;--sx-inv:#fff;--sx-text:#222;--sx-dim:#555;--sx-line:rgba(0,0,0,.14);--sx-line2:rgba(0,0,0,.4);
  --sx-btn-line:rgba(0,0,0,.55);--sx-soft:rgba(0,0,0,.04);
  --sx-deep:#fff;--sx-panel:#fff;--sx-inset:#f2f2f2;--sx-box-hover:#f6f6f6;--sx-code-bg:#efefef;--sx-pre-bg:#f4f4f4;
}
html.sx-c{--sx-c-bg:rgba(0,0,0,.96)}
html.sx-c.sx-chrome-light{
  --sx-c-bg:rgba(233,233,233,.92);--sx-c-solid:#e9e9e9;--sx-c-fg:#111;--sx-c-text:#222;--sx-c-line:rgba(0,0,0,.14);--sx-c-line2:rgba(0,0,0,.5);--sx-c-logo:brightness(0);
}

/* ---------- 案C：ブログの本文は白い箱の中に入れる（行間・1行の幅は今のまま） ---------- */
html.sx-c body.sx-blog article{background:var(--sx-panel);max-width:880px;margin:clamp(16px,4vh,44px) auto clamp(28px,5vh,56px);padding:clamp(8px,2vh,24px) 0 8px;border:1px solid var(--sx-line)}
@media (max-width:919px){html.sx-c body.sx-blog article{margin-left:12px;margin-right:12px}}
@media (max-width:480px){html.sx-c body.sx-blog .container{padding-left:18px;padding-right:18px}}

/* ---------- 案C：ブログ記事末の相談の箱。灰色の箱の上で白い丸の輪郭が溶けないよう、細い線を足す ---------- */
html.sx-c body.sx-blog .blog-cta-head .blog-mascot{border:1px solid var(--sx-line2)}

/* ---------- 案C：404は Windows 95 風の画面のまま。地だけ薄いグレー。アイコンの文字は濃い色にする ---------- */
html.sx-c body.sx-n404 .dicon span{color:#111}
html.sx-c body.sx-n404 .dicon.sel span{color:#fff}

/* ---------- ストーリー：白地・赤地の上の赤系の文字と面を、4.5:1以上になるまで濃くする（赤の系統は保つ） ---------- */
body.sx-story{--red-deep:#c4251f}
body.sx-story .direction-card span{color:var(--red-deep)}
body.sx-story .question-stack span:nth-child(3){background:var(--red-deep)}
body.sx-story a.cta-primary:hover{background:var(--red-deep);border-color:var(--red-deep)}
/* 案C：薄いグレーの地の上の赤い文字（章の見出し・目次の番号など）が 4.5:1 を割るので、赤を濃くする。黒い面（右の帯・最後の区切り）の中は、明るい赤のまま */
html.sx-c body.sx-story{--red:var(--red-deep)}
html.sx-c body.sx-story .hero-aside,html.sx-c body.sx-story .closing{--red:#ff4b43}

/* 写真の上に重ねた文字は、地の色にかかわらず白（リンクの文字色は body.sx a の継承に負けないよう書く） */
body.sx-section a.visual-card,body.sx-section .visual-card,body.sx-section .visual-copy h2,body.sx-section .visual-copy h3,body.sx-section .visual-link,body.sx-section .visual-link *{color:#fff}
/* 案C：ストーリーの薄い文字色・目次リンクの灰色を、薄いグレーの地に合わせて濃くする */
html.sx-c body.sx-story{--muted:#555;--line:rgba(0,0,0,.14)}
html.sx-c body.sx-story .hero-aside,html.sx-c body.sx-story .closing{--muted:rgba(230,230,230,.72);--line:rgba(255,255,255,.2)}
html.sx-c body.sx-story .story-index a{color:#555}

body.sx-section .price-note h3{color:var(--sx-fg)}