@charset "UTF-8";
/* ============================================================
   SNSグロース支援サイト共通スタイル（2026-09-26 新設 / 同日 全面改稿）
   /sns-service/ /sns-works/ /sns-company/ /sns-contact/ で使う。
   トップ（/sns-top/）は page-sns-top.php にインラインで持っている。

   **デザインの言語は Web制作サイト（front-page.php）と同じにしてある。**
     ・見出し … 巨大英字 .brs-en（中を等高線が流れる／front.js headTopo）＋ 小さな和文 .brs-ja
     ・リード … 青帯に白抜き .bnd > .bnd-l > em（スクロールで帯が伸びる）
     ・区画   … 白地 ↔ 青地 ↔ 赤地 の全面ベタ。青地には赤い泡（.sec-dots）
     ・色     … 赤 --brand / 青 --blue / 白 の3色だけ
   前の版（白カード＋ベージュ帯の繰り返し）はオーナーに «資料っぽい» と却下された。
   **カードを等間隔に並べるだけの組み方に戻さないこと。**

   前提: front.css（suimil-front）の後ろに読み込まれる。
   ============================================================ */

/* ============================================================
   ヘッダーのカプセル（スクロール前でも出す）
   front.css の «ガラス板» は .hd.stuck（40px スクロール後）でしか付かない。
   ============================================================ */
body.sns-page .hd{ background:transparent; border-bottom:none; }
body.sns-page .hd .brand,
body.sns-page .hd .nav,
body.sns-page .hd .burger{
  background-color:var(--paper);
  box-shadow:0 2px 14px rgba(20,23,26,.10);
}
body.sns-page .hd .nav a{ color:var(--ink); }
body.sns-page .hd .nav a::after{ background:var(--brand); }
body.sns-page .hd .logo{ filter:none; }
body.sns-page .hd .burger span{ background:var(--ink); }

body.sns-page{ background:#fff; color:var(--ink); overflow-x:clip; }

/* ============================================================
   共通の器
   ============================================================ */
.sx-in{ width:100%; max-width:1280px; margin:0 auto; padding:0 var(--gut); position:relative; z-index:2; }
.sx-sec{ position:relative; padding:clamp(88px, 11vw, 168px) 0; overflow:hidden; }
.sx-sec.is-blue{ background:var(--blue-sec); color:#fff; }
.sx-sec.is-red{ background:var(--field); color:#fff; }
.sx-sec.is-tight{ padding-top:clamp(40px, 5vw, 72px); }

/* 巨大英字の見出し。色は区画ごとに変える（headTopo は要素の color を塗りに使う）。
   --topo-line は «文字の中を流れる線» の色。 */
.sns-page .brs-en{ color:var(--blue); --topo-line:#fff; margin:0; }
.sx-sec.is-blue .brs-en{ color:#fff; --topo-line:var(--blue-sec); }
.sx-sec.is-red  .brs-en{ color:#fff; --topo-line:var(--field); }
.sns-page .brs-ja{ margin:0; }
.sx-sec.is-blue .brs-ja,
.sx-sec.is-red  .brs-ja{ color:#fff; }

/* 青帯のリード（.bnd の帯の色は currentColor） */
.sx-lead{
  margin-top:clamp(28px, 3.4vw, 48px);
  font-family:var(--jp-disp); font-weight:400;
  font-size:clamp(22px, 2.9vw, 40px); line-height:1.55; letter-spacing:.04em;
  color:var(--blue);
}
.sx-lead .bnd-l + .bnd-l{ margin-top:.18em; }
/* 地が青・赤の区画では «白帯に色文字» へ反転する */
.sx-sec.is-blue .sx-lead,
.sx-sec.is-red  .sx-lead{ color:#fff; }
.sx-sec.is-blue .sx-lead .bnd-l > em{ color:var(--blue-sec); }
.sx-sec.is-red  .sx-lead .bnd-l > em{ color:var(--field); }

.sx-text{
  margin-top:clamp(22px, 2.6vw, 34px); max-width:36em;
  font-size:15.5px; font-weight:500; line-height:2.05; color:var(--ink-2);
}
.sx-sec.is-blue .sx-text,
.sx-sec.is-red  .sx-text{ color:rgba(255,255,255,.88); }

/* ============================================================
   ページヒーロー（下層共通）。左に見出しとリード、右に写真。
   ============================================================ */
.sx-hero{
  position:relative; overflow:hidden; background:#fff;
  padding:calc(87px + clamp(48px, 6vw, 96px)) 0 clamp(72px, 9vw, 128px);
}
.sx-hero .sec-fx{ opacity:.5; }
.sx-hero-grid{ display:grid; grid-template-columns:1fr; gap:clamp(40px, 5vw, 72px); align-items:center; }
@media (min-width:1000px){
  .sx-hero-grid.has-fig{ grid-template-columns:1.1fr .9fr; }
}
.sx-hero-fig{
  position:relative; margin:0; aspect-ratio:4/5; border-radius:clamp(14px, 1.6vw, 24px);
  overflow:hidden; background:var(--blue);
}
.sx-hero-fig img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 写真の角に貼るタグ。赤いカプセル */
.sx-hero-tag{
  position:absolute; left:clamp(14px, 1.6vw, 22px); bottom:clamp(14px, 1.6vw, 22px);
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px; border-radius:999px; background:var(--brand); color:#fff;
  font-family:var(--en); font-size:12px; letter-spacing:.12em;
}
.sx-hero-tag::before{ content:""; width:8px; height:8px; border-radius:50%; background:#fff; }

/* ============================================================
   流れる帯（マーキー）。区画と区画のあいだに1本。
   2枚並べて «1枚ぶん» 動かすと継ぎ目が出ない。
   ============================================================ */
.sx-marquee{
  position:relative; overflow:hidden; background:var(--brand); color:#fff;
  padding:clamp(14px, 1.6vw, 22px) 0; white-space:nowrap;
}
.sx-marquee.is-blue{ background:var(--blue); }
.sx-marquee-track{ display:inline-flex; animation:sxMarquee 38s linear infinite; }
.sx-marquee-track span{
  font-family:var(--en); font-size:clamp(26px, 3.4vw, 48px); line-height:1;
  letter-spacing:.04em; padding-right:.9em;
}
.sx-marquee-track span i{ font-style:normal; display:inline-block; margin:0 .5em; opacity:.6; }
@keyframes sxMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .sx-marquee-track{ animation:none; } }

/* ============================================================
   PROBLEM — FV の写真と同じ «白・赤・青» の3本の帯で課題を並べる
   ============================================================ */
.sx-issues{
  margin-top:clamp(48px, 6vw, 88px);
  display:grid; grid-template-columns:1fr; gap:0;
  border-radius:clamp(16px, 1.8vw, 26px); overflow:hidden;
  border:1.5px solid var(--blue);
}
@media (min-width:900px){ .sx-issues{ grid-template-columns:repeat(3, 1fr); } }
.sx-issue{
  position:relative; padding:clamp(36px, 4vw, 56px) clamp(28px, 3vw, 44px) clamp(40px, 4.4vw, 60px);
  min-height:clamp(320px, 34vw, 460px); display:flex; flex-direction:column;
}
.sx-issue:nth-child(1){ background:#fff; color:var(--ink); }
.sx-issue:nth-child(2){ background:var(--field); color:#fff; }
.sx-issue:nth-child(3){ background:var(--blue); color:#fff; }
.sx-issue-no{
  font-family:var(--en); font-size:13px; letter-spacing:.16em; margin:0;
  display:flex; align-items:center; gap:12px;
}
.sx-issue-no::after{ content:""; width:40px; height:1.5px; background:currentColor; opacity:.6; }
.sx-issue:nth-child(1) .sx-issue-no{ color:var(--brand); }
.sx-issue-word{
  margin:auto 0 18px; padding-top:clamp(40px, 5vw, 80px);
  font-family:var(--jp-disp); font-weight:400; line-height:1.15; letter-spacing:.02em;
  font-size:clamp(40px, 5.2vw, 76px);
}
.sx-issue:nth-child(1) .sx-issue-word{ color:var(--blue); }
.sx-issue-text{ margin:0; font-size:14.5px; line-height:1.95; font-weight:500; }
.sx-issue:nth-child(1) .sx-issue-text{ color:var(--ink-2); }
.sx-issue:nth-child(n+2) .sx-issue-text{ color:rgba(255,255,255,.9); }

/* ============================================================
   APPROACH — 青地に白い輪3つ（Web制作サイトの SERVICE の円と同じ語彙）
   ============================================================ */
.sx-rings{
  margin-top:clamp(56px, 7vw, 104px);
  display:grid; grid-template-columns:1fr; gap:clamp(20px, 3vw, 40px); justify-items:center;
}
@media (min-width:900px){ .sx-rings{ grid-template-columns:repeat(3, 1fr); } }
.sx-ring{
  width:100%; max-width:380px; aspect-ratio:1; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.6); background:rgba(255,255,255,.07);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:12%;
  transition:background .5s var(--e), color .5s var(--e), transform .5s var(--e);
}
.sx-ring:hover{ background:#fff; color:var(--blue); transform:translateY(-4px); }
.sx-ring-en{ font-family:var(--en); font-size:12px; letter-spacing:.16em; margin:0 0 12px; opacity:.8; }
.sx-ring-title{ font-family:var(--jp-disp); font-weight:400; font-size:clamp(26px, 2.6vw, 36px); margin:0 0 14px; letter-spacing:.04em; }
.sx-ring-text{ font-size:13.5px; line-height:1.9; margin:0; opacity:.92; }

/* ============================================================
   CYCLE — 5つの工程を1本の線でつなぐ
   ============================================================ */
.sx-cycle{
  margin-top:clamp(56px, 7vw, 104px); position:relative;
  display:grid; grid-template-columns:1fr; gap:36px;
}
@media (min-width:900px){
  .sx-cycle{ grid-template-columns:repeat(5, 1fr); gap:20px; }
  /* 丸と丸をつなぐ線。丸の中心の高さに通す */
  .sx-cycle::before{
    content:""; position:absolute; left:4%; right:4%;
    top:calc(clamp(72px, 7vw, 104px) / 2); height:2px;
    background:repeating-linear-gradient(90deg, var(--blue) 0 10px, transparent 10px 18px);
    z-index:0;
  }
}
.sx-step{ position:relative; z-index:1; display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start; }
@media (min-width:900px){ .sx-step{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:0; } }
.sx-step-no{
  width:clamp(72px, 7vw, 104px); aspect-ratio:1; border-radius:50%;
  background:var(--blue); color:#fff; display:grid; place-items:center;
  font-family:var(--en); font-size:clamp(22px, 2.2vw, 32px);
  box-shadow:0 0 0 8px #fff;
}
.sx-step:nth-child(5) .sx-step-no{ background:var(--brand); }
.sx-step-title{ font-family:var(--jp-disp); font-weight:400; font-size:clamp(24px, 2.2vw, 30px); margin:0 0 8px; color:var(--ink); }
@media (min-width:900px){ .sx-step-title{ margin-top:24px; } }
.sx-step-text{ font-size:13.5px; line-height:1.85; color:var(--ink-2); margin:0; }
.sx-cycle-loop{
  margin-top:clamp(36px, 4vw, 56px);
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-family:var(--en); font-size:13px; letter-spacing:.14em; color:var(--brand);
}
.sx-cycle-loop::before,
.sx-cycle-loop::after{ content:""; width:clamp(40px, 8vw, 120px); height:1.5px; background:currentColor; }

/* ============================================================
   PLAN — 画面いっぱいを赤と青で2分割
   ============================================================ */
.sx-plans{ display:grid; grid-template-columns:1fr; }
@media (min-width:1000px){ .sx-plans{ grid-template-columns:1fr 1fr; } }
.sx-plan{
  position:relative; overflow:hidden; color:#fff;
  padding:clamp(64px, 8vw, 120px) clamp(28px, 5vw, 80px) clamp(72px, 8vw, 128px);
}
.sx-plan.is-a{ background:var(--field); }
.sx-plan.is-b{ background:var(--blue); }
/* 背景に敷く巨大な A / B */
.sx-plan-mark{
  position:absolute; right:-.06em; bottom:-.28em; pointer-events:none; user-select:none;
  font-family:var(--en); font-size:clamp(260px, 30vw, 460px); line-height:1;
  color:rgba(255,255,255,.1);
}
.sx-plan > *:not(.sx-plan-mark){ position:relative; }
.sx-plan-tag{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 26px;
  padding:8px 16px; border:1.5px solid rgba(255,255,255,.7); border-radius:999px;
  font-family:var(--en); font-size:12px; letter-spacing:.14em;
}
.sx-plan-title{ font-family:var(--jp-disp); font-weight:400; font-size:clamp(34px, 3.8vw, 56px); line-height:1.3; margin:0 0 22px; letter-spacing:.03em; }
.sx-plan-text{ font-size:15px; line-height:2; margin:0 0 34px; max-width:30em; color:rgba(255,255,255,.92); }
.sx-plan-for{
  display:inline-block; margin:0 0 30px; padding:10px 18px; border-radius:10px;
  background:#fff; font-size:13.5px; font-weight:700;
}
.sx-plan.is-a .sx-plan-for{ color:var(--field); }
.sx-plan.is-b .sx-plan-for{ color:var(--blue); }
.sx-plan-list{ list-style:none; padding:0; margin:0; max-width:30em; border-top:1px solid rgba(255,255,255,.35); }
.sx-plan-list li{
  display:flex; gap:14px; align-items:baseline;
  padding:15px 0; border-bottom:1px solid rgba(255,255,255,.35);
  font-size:15px; font-weight:500; line-height:1.6;
}
.sx-plan-list li b{ font-family:var(--en); font-weight:400; font-size:12px; letter-spacing:.1em; opacity:.7; flex:none; width:2.2em; }

/* ============================================================
   SCHEDULE — 1ヶ月の線表
   ============================================================ */
.sx-track{
  margin-top:clamp(56px, 7vw, 104px); position:relative;
  display:grid; grid-template-columns:1fr; gap:0;
}
@media (min-width:1000px){ .sx-track{ grid-template-columns:repeat(6, 1fr); } }
.sx-tk{ position:relative; padding:0 0 30px 34px; border-left:2px solid var(--blue); }
.sx-tk::before{
  content:""; position:absolute; left:-9px; top:2px; width:16px; height:16px; border-radius:50%;
  background:var(--blue); box-shadow:0 0 0 5px #fff;
}
.sx-tk.is-weekly::before{ background:#fff; border:2px solid var(--blue); width:12px; height:12px; left:-9px; }
@media (min-width:1000px){
  .sx-tk{ padding:52px 16px 0 0; border-left:0; border-top:2px solid var(--blue); }
  .sx-tk::before{ left:0; top:-9px; }
  .sx-tk.is-weekly::before{ top:-9px; left:0; }
}
.sx-tk-when{ font-family:var(--en); font-size:12.5px; letter-spacing:.08em; color:var(--blue); margin:0 0 10px; }
@media (min-width:1000px){ .sx-tk-when{ position:absolute; top:-40px; left:0; margin:0; } }
.sx-tk-what{ font-family:var(--jp-disp); font-weight:400; font-size:clamp(18px, 1.5vw, 21px); line-height:1.5; margin:0 0 12px; color:var(--ink); }
.sx-who{ display:flex; gap:6px; flex-wrap:wrap; }
.sx-who span{ padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:700; line-height:1.4; }
.sx-who .us{ background:var(--brand); color:#fff; }
.sx-who .you{ background:var(--blue); color:#fff; }

/* ============================================================
   SCOPE — 数字を大きく。太い青罫で区切る
   ============================================================ */
.sx-facts{
  margin-top:clamp(56px, 7vw, 104px);
  display:grid; grid-template-columns:1fr; gap:clamp(36px, 4vw, 56px) clamp(24px, 3vw, 48px);
}
@media (min-width:700px){ .sx-facts{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1000px){ .sx-facts{ grid-template-columns:repeat(3, 1fr); } }
.sx-fact{ border-top:4px solid var(--blue); padding-top:22px; }
.sx-fact-lbl{ margin:0 0 14px; font-size:13.5px; font-weight:700; color:var(--blue); letter-spacing:.06em; }
.sx-fact-val{
  margin:0 0 14px; font-family:var(--jp-disp); font-weight:400; line-height:1.1;
  font-size:clamp(40px, 4.6vw, 64px); color:var(--ink); letter-spacing:.01em;
}
.sx-fact-val small{ font-size:.42em; margin-left:.2em; letter-spacing:.04em; color:var(--ink-2); }
.sx-fact-text{ margin:0; font-size:13.5px; line-height:1.9; color:var(--ink-2); }

/* ============================================================
   CONTACT — 赤地の締め
   ============================================================ */
.sx-end{ text-align:left; }
.sx-end-grid{ display:grid; grid-template-columns:1fr; gap:clamp(40px, 5vw, 64px); align-items:end; }
@media (min-width:1000px){ .sx-end-grid{ grid-template-columns:1.2fr .8fr; } }
.sx-opts{ margin:0; }
.sx-opts-lbl{ margin:0 0 16px; font-size:13.5px; font-weight:700; letter-spacing:.06em; color:rgba(255,255,255,.85); }
.sx-opts-list{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0 0 14px; }
.sx-opts-list li{ padding:10px 18px; border:1.5px solid rgba(255,255,255,.75); border-radius:999px; font-size:14px; font-weight:700; }
.sx-opts-note{ margin:0; font-size:12.5px; color:rgba(255,255,255,.8); }
.sx-btn{
  display:inline-flex; align-items:center; justify-content:space-between; gap:28px;
  margin-top:clamp(36px, 4vw, 52px);
  padding:14px 14px 14px 34px; border-radius:999px; background:#fff; color:var(--field);
  font-size:16px; font-weight:700; letter-spacing:.06em; text-decoration:none;
  transition:transform .4s var(--e), box-shadow .4s var(--e);
}
.sx-btn:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -16px rgba(0,0,0,.45); }
.sx-btn .ar{
  width:52px; height:52px; border-radius:50%; background:var(--field); color:#fff;
  display:grid; place-items:center; font-size:20px; transition:transform .4s var(--e);
}
.sx-btn:hover .ar{ transform:translateX(4px); }

/* ============================================================
   WORKS — 1件ずつ大きく。数字が主役
   ============================================================ */
.sx-case{ display:grid; grid-template-columns:1fr; gap:clamp(32px, 4vw, 64px); align-items:end; }
@media (min-width:1000px){ .sx-case{ grid-template-columns:1.25fr .75fr; } }
.sx-case-kicker{
  display:flex; align-items:center; gap:14px; margin:0 0 clamp(20px, 2vw, 28px);
  font-family:var(--en); font-size:13px; letter-spacing:.16em; color:var(--brand);
}
.sx-case-kicker::after{ content:""; width:56px; height:1.5px; background:currentColor; }
.sx-sec.is-blue .sx-case-kicker{ color:#fff; }
.sx-case-num{
  margin:0; font-family:var(--en); line-height:.86; letter-spacing:-.02em;
  font-size:clamp(150px, 24vw, 360px); color:var(--brand);
  display:flex; align-items:flex-end; gap:.06em;
}
.sx-case-num small{
  font-family:var(--jp-disp); font-size:.26em; line-height:1.2; letter-spacing:.04em;
  padding-bottom:.18em;
}
.sx-sec.is-blue .sx-case-num{ color:#fff; }
.sx-case-cap{ margin:clamp(18px, 2vw, 26px) 0 0; font-family:var(--jp-disp); font-size:clamp(20px, 2vw, 28px); letter-spacing:.04em; }
.sx-case-dl{ margin:0; display:grid; grid-template-columns:6.5em 1fr; border-top:1.5px solid currentColor; }
.sx-case-dl dt, .sx-case-dl dd{ margin:0; padding:16px 0; border-bottom:1px solid var(--line); font-size:14.5px; line-height:1.7; }
.sx-case-dl dt{ font-weight:700; color:var(--brand); }
.sx-sec.is-blue .sx-case-dl dt{ color:#fff; opacity:.75; }
.sx-sec.is-blue .sx-case-dl dt,
.sx-sec.is-blue .sx-case-dl dd{ border-bottom-color:rgba(255,255,255,.3); }
.sx-case-side{ color:var(--ink); }
.sx-sec.is-blue .sx-case-side{ color:#fff; }
.sx-case-note{ margin:18px 0 0; font-size:12.5px; line-height:1.8; color:var(--ink-3); }
.sx-sec.is-blue .sx-case-note{ color:rgba(255,255,255,.75); }

/* ============================================================
   本文の区画（会社情報・お問い合わせ）
   ============================================================ */
.sp-sec{ padding:clamp(24px, 3vw, 40px) 0 clamp(88px, 10vw, 140px); }
.sp-sec-in{ max-width:1280px; margin:0 auto; padding:0 var(--gut); }

.sp-table{ width:100%; max-width:960px; border-collapse:collapse; border-top:4px solid var(--blue); }
.sp-table tr{ border-bottom:1px solid var(--line); }
.sp-table th, .sp-table td{
  padding:clamp(18px, 2vw, 26px) 0; text-align:left; font-size:15.5px; line-height:1.8; vertical-align:top;
}
.sp-table th{ width:220px; font-weight:700; color:var(--blue); padding-right:24px; }
.sp-table td{ color:var(--ink); }
@media (max-width:600px){
  .sp-table th{ display:block; width:auto; padding-bottom:4px; }
  .sp-table td{ display:block; padding-top:0; padding-bottom:18px; }
}

.sp-form{ max-width:760px; }
.sp-form .sp-form-row{ margin-bottom:26px; }
.sp-form label{ display:block; font-size:14px; font-weight:700; color:var(--ink); margin-bottom:10px; }
.sp-form input[type=text],
.sp-form input[type=email],
.sp-form input[type=tel],
.sp-form select,
.sp-form textarea{
  width:100%; padding:16px 18px; font:inherit; font-size:15.5px; color:var(--ink);
  background:#F4F6FB; border:1.5px solid transparent; border-radius:12px;
  transition:border-color .2s ease, background .2s ease; box-sizing:border-box;
}
.sp-form input:focus, .sp-form select:focus, .sp-form textarea:focus{ outline:none; border-color:var(--blue); background:#fff; }
.sp-form textarea{ min-height:180px; resize:vertical; }
.sp-req{ display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px; background:var(--brand); color:#fff; font-size:11px; vertical-align:2px; }
.sp-form-note{
  max-width:760px; margin:0 0 clamp(40px, 5vw, 64px);
  padding:22px 26px; border-left:4px solid var(--blue); background:#F4F6FB;
  font-size:14.5px; line-height:1.95; color:var(--ink-2);
}
.sp-form-note a{ color:var(--blue); font-weight:700; }
.sp-submit{
  display:inline-flex; align-items:center; gap:24px;
  padding:14px 14px 14px 36px; border:0; border-radius:999px; cursor:pointer;
  background:var(--brand); color:#fff; font:inherit; font-size:16px; font-weight:700; letter-spacing:.06em;
  transition:transform .4s var(--e), box-shadow .4s var(--e);
}
.sp-submit .ar{ width:48px; height:48px; border-radius:50%; background:#fff; color:var(--brand); display:grid; place-items:center; font-size:18px; }
.sp-submit:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -16px rgba(206,36,21,.6); }

/* ============================================================
   2026-09-26 実機スクリーンショットで見つけた崩れの修正
   ============================================================ */
/* 区画の上下の余白を一段詰める（見出しと見出しの間が間延びしていた） */
.sx-sec{ padding:clamp(80px, 9vw, 140px) 0; }

/* 課題タイル: 語の長さで級数を変える。«ブランディング» が3行に割れていた。
   タイル幅に対する割合（cqi）で決めるので、画面幅が変わっても1行に収まる。 */
.sx-issue{ container-type:inline-size; }
.sx-issue-word{ font-size:min(30cqi, 88px); white-space:nowrap; }
.sx-issue-word.is-long{ font-size:min(12.6cqi, 52px); }

/* 線表: 小さな和文に Dela を当てると潰れる。時期と内容は Zen Kaku の太字にする */
.sx-tk-when{ font-family:'Zen Kaku Gothic New', sans-serif; font-weight:900; font-size:13px; letter-spacing:.06em; }
.sx-tk-what{ font-family:'Zen Kaku Gothic New', sans-serif; font-weight:900; font-size:17px; line-height:1.55; word-break:auto-phrase; }
.sx-tk-sub{ display:block; font-size:13px; font-weight:700; color:var(--ink-2); margin-top:2px; }

/* 数字の単位は Zen Kaku。Dela の «回» は小さいと «▣» に見える */
.sx-fact-val small{ font-family:'Zen Kaku Gothic New', sans-serif; font-weight:900; }

/* PLAN の2分割: 文字の左端を、上の区画の見出し（.sx-in の内側）に揃える */
@media (min-width:1000px){
  .sx-plan.is-a{ padding-left:calc(max(0px, (100vw - 1280px) / 2) + var(--gut)); }
  .sx-plan.is-b{ padding-right:calc(max(0px, (100vw - 1280px) / 2) + var(--gut)); }
}

/* ============================================================
   人物写真のヒーロー（2026-09-26 オーナー支給 女性イメージ 4.png / 1.png）
   支給写真は «白い地» なので、白いページに置くと枠の縁が消える。
   後ろに色のブロックをずらして敷き、縁をはっきりさせる（is-red / is-blue）。
   **原本は幅 540px しか無い。** 表示幅を 420px までに抑えている
   （レティナで 2倍に引き伸ばすと甘くなるため）。大きい原本が来たら差し替えて上限を外す。
   ============================================================ */
.sx-hero-fig.is-person{
  width:100%; max-width:420px; justify-self:center; overflow:visible;
  background:transparent; border-radius:0; aspect-ratio:auto;
}
.sx-hero-fig.is-person img{
  position:relative; z-index:1; width:100%; aspect-ratio:4/5; height:auto;
  border-radius:clamp(14px, 1.6vw, 24px); background:#F4F4F4;
}
.sx-hero-fig.is-person.is-tall img{ aspect-ratio:2/3; }
/* ずらして敷く色のブロック */
.sx-hero-fig.is-person::before{
  content:""; position:absolute; z-index:0; inset:0;
  transform:translate(clamp(14px, 1.6vw, 22px), clamp(14px, 1.6vw, 22px));
  border-radius:clamp(14px, 1.6vw, 24px); background:var(--blue);
}
.sx-hero-fig.is-person.is-red::before{ background:var(--brand); }
.sx-hero-fig.is-person .sx-hero-tag{ z-index:2; }
.sx-hero-fig.is-person.is-red .sx-hero-tag{ background:var(--blue); }
/* 縦長（2:3）は幅を絞って、1画面目に収める */
.sx-hero-fig.is-person.is-tall{ max-width:370px; }
@media (max-width:600px){
  .sx-hero-fig.is-person{ width:calc(100% - 10px); justify-self:start; }
  .sx-hero-fig.is-person::before{ transform:translate(10px, 10px); }
}

/* ============================================================
   改行の品質（2026-09-26 オーナー「改行おかしいところ隅々まで」）
   Web制作サイト（front.css 4563行付近）と同じ2つの指定を、SNS の本文すべてに当てる。
     word-break:auto-phrase … 文節で改行（«ター｜ゲット» のような語の途中で切らない）
     text-wrap:pretty       … 最後の行が «す。» だけになるのを避ける
   **<html lang="ja"> が前提。** functions.php の suimil_lang_ja で上書き済み。
   Safari / Firefox は未対応で «いままでどおりの折り返し» に戻るだけ。
   青帯の見出し（.bnd-l）は1行ずつ手で切っているので対象外。
   ============================================================ */
body.sns-page main :is(p, li, dd, dt, td, th, h3, label):not(.sx-lead){
  word-break:auto-phrase;
  text-wrap:pretty;
}
/* 見出し級の短い文は «行の長さを揃える» 方が見栄えが良い */
body.sns-page main :is(.sx-issue-word, .sx-ring-title, .sx-step-title, .sx-tk-what, .sx-plan-title, .sx-case-cap){
  text-wrap:balance;
}
/* 線表の横6列は 1200px 以上だけ。1000〜1199px では1列が 150px を切って «提出» だけ落ちた */
@media (min-width:1000px) and (max-width:1199px){
  .sx-track{ grid-template-columns:1fr; }
  .sx-tk{ padding:0 0 30px 34px; border-top:0; border-left:2px solid var(--blue); }
  .sx-tk::before, .sx-tk.is-weekly::before{ left:-9px; top:2px; }
  .sx-tk-when{ position:static; margin:0 0 10px; }
}

/* ============================================================
   ブラッシュアップ（2026-09-26 隅々チェック）
   ============================================================ */
/* お問い合わせ区画（#contact）の上では front.js が .over-dark を付け、
   ナビの板を暗いガラスに変える。SNS ページでは板は常に白のまま（文字が墨なので） */
body.sns-page .hd.stuck.over-dark :is(.brand, .nav, .burger){ background-color:var(--paper); }
body.sns-page .hd.stuck.over-dark .logo{ filter:none; }

/* スマホ: 課題タイルの上の空白と、輪の間延びを詰める */
@media (max-width:899px){
  .sx-issue{ min-height:0; padding:32px 26px 36px; }
  .sx-issue-word{ padding-top:28px; margin-top:0; }
  .sx-rings{ gap:16px; }
  .sx-ring{ max-width:320px; padding:13%; }
}

/* フォームの同意注記 */
.sp-agree{ max-width:760px; margin:8px 0 0; font-size:13.5px; line-height:1.9; color:var(--ink-2); }
.sp-agree a{ color:var(--blue); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
/* **#contact は Web制作サイトのお問い合わせ区画用の指定（front.css 1885行〜）を拾う。**
   付けているのは «右下CTAを引っ込める» ため（front.js が #contact を見ている）。
   見出しの色だけ SNS 側で上書きし直す。id を外すと CTA が赤い区画に重なって戻るので外さないこと。 */
#contact.sx-sec.is-red .brs-en{ color:#fff; --topo-line:var(--field); }
#contact.sx-sec.is-red .brs-ja{ color:#fff; }

/* ============================================================
   STORY — 事例の «課題 → やったこと → 結果 → 声»（Works）
   ============================================================ */
.sx-story{ padding-bottom:clamp(80px, 9vw, 140px); }
.sx-flow{
  list-style:none; padding:0; margin:clamp(48px, 6vw, 88px) 0 0;
  display:grid; grid-template-columns:1fr; gap:clamp(20px, 2vw, 28px);
}
@media (min-width:1000px){ .sx-flow{ grid-template-columns:repeat(3, 1fr); } }
.sx-flow-step{
  position:relative; padding:clamp(30px, 3vw, 44px) clamp(24px, 2.6vw, 38px) clamp(34px, 3.4vw, 48px);
  border:1.5px solid var(--blue); border-radius:clamp(16px, 1.8vw, 26px); background:#fff;
}
/* 段と段のあいだの矢印（横並びのときだけ） */
@media (min-width:1000px){
  .sx-flow-step:not(:last-child)::after{
    content:"→"; position:absolute; right:calc(-1 * clamp(20px, 2vw, 28px) / 2 - 12px); top:50%;
    transform:translateY(-50%); z-index:2;
    width:24px; height:24px; border-radius:50%; background:var(--brand); color:#fff;
    display:grid; place-items:center; font-size:13px; font-weight:700;
  }
}
.sx-flow-step.is-result{ background:var(--field); border-color:var(--field); color:#fff; }
.sx-flow-lbl{
  display:flex; align-items:center; gap:10px; margin:0 0 18px;
  font-family:var(--en); font-size:12px; letter-spacing:.16em; color:var(--blue);
}
.sx-flow-lbl b{ font-weight:400; padding:3px 8px; border-radius:999px; background:var(--blue); color:#fff; }
.sx-flow-step.is-result .sx-flow-lbl{ color:#fff; }
.sx-flow-step.is-result .sx-flow-lbl b{ background:#fff; color:var(--field); }
.sx-flow-title{ margin:0 0 16px; font-family:var(--jp-disp); font-weight:400; font-size:clamp(26px, 2.4vw, 34px); letter-spacing:.04em; }
.sx-flow-text{ margin:0 0 12px; font-size:14.5px; line-height:1.9; }
.sx-flow-big{ margin:0 0 18px; font-family:var(--jp-disp); font-size:clamp(20px, 1.8vw, 26px); line-height:1.35; letter-spacing:.04em; }
.sx-flow-big em{ font-style:normal; font-family:var(--en); font-size:2.6em; line-height:1; margin:0 .08em; vertical-align:-.12em; }

.sx-voice{
  margin:clamp(28px, 3vw, 44px) 0 0; padding:clamp(32px, 3.6vw, 52px) clamp(28px, 4vw, 64px);
  border-radius:clamp(16px, 1.8vw, 26px); background:#F4F6FB; position:relative;
}
.sx-voice::before{
  content:"“"; position:absolute; right:clamp(20px, 3vw, 44px); top:-.18em;
  font-family:var(--en); font-size:clamp(120px, 12vw, 180px); line-height:1; color:var(--blue); opacity:.18;
}
.sx-voice-lbl{ margin:0 0 14px; font-family:var(--en); font-size:12px; letter-spacing:.18em; color:var(--blue); }
.sx-voice-q{ margin:0; font-family:var(--jp-disp); font-size:clamp(18px, 1.8vw, 24px); line-height:1.7; letter-spacing:.03em; }
.sx-voice-by{ margin-top:16px; font-size:13.5px; font-weight:700; color:var(--ink-2); }

/* **要記入の枠。** 本番に出す前に全部消えていること（page-sns-works.php の注記を参照）。
   目立つように黄色の破線にしてある。見落としで公開されないための色。 */
.sx-todo{
  display:inline-block; padding:6px 12px; border:1.5px dashed #C9A200; border-radius:8px;
  background:#FFF6CC; color:#5C4A00; font-family:'Zen Kaku Gothic New', sans-serif;
  font-size:13px; font-weight:700; line-height:1.7; letter-spacing:0;
}
/* STORY の数字の並び */
.sx-story-src{ margin:18px 0 0; font-size:13.5px; font-weight:700; color:var(--ink-2); }
.sx-flow-list{ list-style:none; padding:0; margin:0 0 16px; border-top:1px solid var(--line); }
.sx-flow-list li{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; font-weight:700; }
.sx-flow-list b{ font-family:var(--en); font-weight:400; font-size:clamp(22px, 2vw, 28px); color:var(--blue); white-space:nowrap; }
.sx-flow-list b small{ font-family:'Zen Kaku Gothic New', sans-serif; font-weight:900; font-size:.5em; margin-left:.2em; color:var(--ink-2); }
.sx-flow-list.is-on-red{ border-top-color:rgba(255,255,255,.35); }
.sx-flow-list.is-on-red li{ border-bottom-color:rgba(255,255,255,.35); }
.sx-flow-list.is-on-red b, .sx-flow-list.is-on-red b small{ color:#fff; }
.sx-flow-big em{ font-size:1.9em; }
/* 桁の多い数字（95,390 など）は級数を下げて1行に収める */
.sx-case-num.is-long{ font-size:clamp(84px, 13vw, 200px); }
/* グリッドの子が中身の幅で押し広げられないように（スマホで数字がはみ出した） */
.sx-case > *{ min-width:0; }
/* 数字の単位は Zen Kaku（Dela の «回» は «▣» に見える） */
.sx-case-num small{ font-family:'Zen Kaku Gothic New', sans-serif; font-weight:900; }
/* 桁の多い数字の事例: 数字を横幅いっぱい、表はその下に横並び */
.sx-case.is-wide{ grid-template-columns:1fr; align-items:start; }
.sx-case-num.is-long{ font-size:clamp(60px, 15.5vw, 210px); }
@media (min-width:900px){
  .sx-case.is-wide .sx-case-dl{ grid-template-columns:repeat(4, auto 1fr); column-gap:18px; border-top-width:1.5px; }
  .sx-case.is-wide .sx-case-dl dt,
  .sx-case.is-wide .sx-case-dl dd{ border-bottom:0; padding:20px 0 0; }
}
/* 数字でなく言葉の値（«未開設» など） */
.sx-flow-list b.is-txt{ font-family:var(--jp-disp); font-size:clamp(16px, 1.4vw, 19px); color:var(--brand); letter-spacing:.04em; }
.sx-flow-tag{ display:inline-block; margin:0 10px 0 0; padding:2px 10px; border-radius:999px; background:var(--brand); color:#fff; font-size:12px; font-weight:700; vertical-align:2px; }

/* ============================================================
   APPROACH の PDCA（2026-09-26）
   2×2 を時計回り（P 左上 → D 右上 → C 右下 → A 左下）に並べ、中央に回る輪。
   DOM 順は P D A C（2段目は左が A・右が C）。スマホの1列では order で P D C A に戻す。
   ============================================================ */
.sx-pdca{
  position:relative; margin-top:clamp(56px, 7vw, 104px);
  display:grid; grid-template-columns:1fr; gap:16px;
}
@media (min-width:900px){ .sx-pdca{ grid-template-columns:1fr 1fr; gap:clamp(20px, 2.4vw, 32px); } }
.sx-pd{
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(30px, 3.4vw, 52px) clamp(26px, 3.4vw, 52px);
  border:1.5px solid rgba(255,255,255,.55); border-radius:clamp(18px, 2vw, 28px);
  background:rgba(255,255,255,.07);
  transition:background .5s var(--e), color .5s var(--e);
}
.sx-pd:hover{ background:#fff; color:var(--blue-sec); }
/* 背景に敷く巨大な頭文字 */
.sx-pd-mark{
  position:absolute; z-index:-1; right:-.04em; bottom:-.3em; pointer-events:none;
  font-family:var(--en); font-size:clamp(180px, 18vw, 280px); line-height:1; color:rgba(255,255,255,.08);
}
.sx-pd:hover .sx-pd-mark{ color:rgba(0,56,182,.07); }
.sx-pd-lbl{ display:flex; align-items:center; gap:12px; margin:0 0 14px; font-family:var(--en); font-size:13px; letter-spacing:.18em; }
.sx-pd-lbl b{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--brand); color:#fff; font-weight:400; font-size:20px; letter-spacing:0;
}
.sx-pd-title{ margin:0 0 16px; font-family:var(--jp-disp); font-weight:400; font-size:clamp(28px, 2.8vw, 40px); letter-spacing:.04em; }
.sx-pd-list{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.35); max-width:26em; }
.sx-pd-list li{ padding:12px 0 12px 22px; position:relative; border-bottom:1px solid rgba(255,255,255,.35); font-size:14.5px; font-weight:500; line-height:1.7; }
.sx-pd-list li::before{ content:""; position:absolute; left:0; top:1.28em; width:12px; height:2px; background:var(--brand); }
.sx-pd:hover .sx-pd-list, .sx-pd:hover .sx-pd-list li{ border-color:rgba(0,56,182,.18); }
/* 2×2 のときは、中央の輪にかからないよう文字を外側へ寄せる */
@media (min-width:900px){
  .sx-pd.is-p, .sx-pd.is-a{ padding-right:clamp(110px, 11vw, 150px); }
  .sx-pd.is-d, .sx-pd.is-c{ padding-left:clamp(110px, 11vw, 150px); }
}

/* 中央の輪（2×2 のときだけ） */
.sx-pdca-hub{ display:none; }
@media (min-width:900px){
  .sx-pdca-hub{
    display:grid; place-items:center; position:absolute; left:50%; top:50%; z-index:3;
    width:clamp(170px, 16vw, 220px); aspect-ratio:1; transform:translate(-50%, -50%);
    border-radius:50%; background:var(--blue-sec); color:#fff;
    box-shadow:0 0 0 clamp(10px, 1.2vw, 16px) var(--blue-sec);
  }
  .sx-pdca-ring{ position:absolute; inset:0; width:100%; height:100%; animation:sxSpin 18s linear infinite; }
  .sx-pdca-hub-in{
    position:relative; margin:0; width:66%; aspect-ratio:1; border-radius:50%; background:#fff; color:var(--blue-sec);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  }
  .sx-pdca-hub-in b{ font-family:var(--en); font-weight:400; font-size:clamp(22px, 2vw, 30px); letter-spacing:.02em; }
  .sx-pdca-hub-in span{ font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--brand); }
}
@keyframes sxSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .sx-pdca-ring{ animation:none; } }
/* スマホの1列は P → D → C → A の順に */
@media (max-width:899px){
  .sx-pd.is-p{ order:1; } .sx-pd.is-d{ order:2; } .sx-pd.is-c{ order:3; } .sx-pd.is-a{ order:4; }
  .sx-pd:not(.is-a)::after{
    content:"↓"; position:absolute; left:50%; bottom:-19px; transform:translateX(-50%); z-index:2;
    width:24px; height:24px; border-radius:50%; background:var(--brand); color:#fff;
    display:grid; place-items:center; font-size:12px; font-weight:700;
  }
  .sx-pd{ overflow:visible; }
  .sx-pd-mark{ display:none; }
  .sx-pdca{ gap:22px; }
}
/* スマホの1列だけ、A の下に «P へ戻る» を出す（2×2 では中央の輪がその役） */
.sx-pdca-loop{ display:none; }
@media (max-width:899px){
  .sx-pdca-loop{
    order:5; display:block; margin:4px 0 0; text-align:center;
    font-family:var(--en); font-size:13px; letter-spacing:.12em; color:#fff;
  }
}
.sx-plan-note{
  position:relative; margin:24px 0 0; max-width:30em; padding:16px 20px;
  border:1.5px dashed rgba(255,255,255,.7); border-radius:14px;
  font-size:14.5px; font-weight:700; line-height:1.85;
}

/* 自社アカウントの «プロフィール» 表示（Works CASE 02） */
.sx-prof{ display:flex; align-items:center; gap:18px; margin:0 0 26px; }
.sx-prof-ic{
  flex:none; width:clamp(72px, 7vw, 96px); height:auto; aspect-ratio:1; border-radius:50%;
  object-fit:cover; box-shadow:0 0 0 4px #fff, 0 0 0 7px var(--brand);
}
.sx-prof-name{ margin:0 0 4px; font-family:var(--jp-disp); font-size:clamp(22px, 2vw, 28px); letter-spacing:.04em; }
.sx-prof-meta{ margin:0; font-size:13px; font-weight:700; opacity:.8; }
a.sx-prof{ color:inherit; text-decoration:none; width:fit-content; }
.sx-prof-go{
  margin:8px 0 0; display:inline-block; padding:4px 12px; border-radius:999px;
  background:#fff; color:var(--blue-sec); font-size:12.5px; font-weight:700;
  transition:background .3s var(--e), color .3s var(--e);
}
a.sx-prof:hover .sx-prof-go{ background:var(--brand); color:#fff; }
a.sx-prof .sx-prof-ic{ transition:transform .4s var(--e); }
a.sx-prof:hover .sx-prof-ic{ transform:rotate(-6deg) scale(1.04); }

/* ============================================================
   TikTok の黒いカード（Works CASE 02）
   ============================================================ */
.sx-tt{
  position:relative; padding:clamp(26px, 2.8vw, 38px) clamp(24px, 2.6vw, 36px) clamp(18px, 2vw, 26px);
  border-radius:clamp(18px, 2vw, 26px); background:#000; color:#fff;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
}
.sx-tt-brand{ display:flex; align-items:center; gap:10px; margin:0 0 22px; font-family:'Schibsted Grotesk', sans-serif; font-weight:700; font-size:17px; letter-spacing:.01em; }
.sx-tt-logo{ width:28px; height:28px; flex:none; }
.sx-tt .sx-prof{ margin-bottom:22px; }
.sx-tt .sx-prof-ic{ box-shadow:0 0 0 3px #000, 0 0 0 5px #FE2C55; }
.sx-tt .sx-prof-go{ background:#fff; color:#000; }
.sx-tt a.sx-prof:hover .sx-prof-go{ background:#FE2C55; color:#fff; }
.sx-tt .sx-case-dl{ border-top:1px solid rgba(255,255,255,.28); }
.sx-tt .sx-case-dl dt{ color:rgba(255,255,255,.62); opacity:1; }
.sx-tt .sx-case-dl dt, .sx-tt .sx-case-dl dd{ border-bottom-color:rgba(255,255,255,.16); }
.sx-tt .sx-case-dl dd:last-of-type, .sx-tt .sx-case-dl dt:last-of-type{ border-bottom:0; }
/* TikTok カードの数字の行。数字を大きく */
.sx-tt .sx-case-dl dt{ display:flex; align-items:center; }
.sx-tt-num{ font-family:'Zen Kaku Gothic New', sans-serif; font-weight:900; font-size:15px; }
.sx-tt-num span{ font-family:var(--en); font-weight:400; font-size:clamp(24px, 2.2vw, 30px); margin-right:.12em; letter-spacing:.01em; }
/* TikTok カードの数字は «ラベルが上・数字が下» の縦積み（全桁表示で横に収まらないため） */
.sx-tt .sx-case-dl{ grid-template-columns:1fr; }
.sx-tt .sx-case-dl dt{ padding:14px 0 2px; border-bottom:0; font-size:12.5px; }
.sx-tt .sx-case-dl dd{ padding:0 0 14px; }
.sx-tt-num span{ font-size:clamp(24px, 2.3vw, 32px); }
.sx-tt-num.is-txt{ font-size:17px; }
/* 横に表やカードが並ぶ事例（CASE 02）で桁が多いときは、左の列に収まる級数にする */
@media (min-width:1000px){
  .sx-case:not(.is-wide) .sx-case-num.is-long{ font-size:clamp(64px, 8.2vw, 118px); }
}

/* ============================================================
   CASE 02（自社アカウント）: 数字を上、TikTok カードを下に横長で（2026-09-26）
   ============================================================ */
.sx-case.is-acc{ gap:clamp(36px, 4vw, 56px); }
.sx-tt-stats{ display:grid; grid-template-columns:1fr; }
.sx-tt-stats > div{ border-bottom:1px solid rgba(255,255,255,.16); }
.sx-tt-stats > div:last-child{ border-bottom:0; }
.sx-tt .sx-tt-stats dt, .sx-tt .sx-tt-stats dd{ border-bottom:0; }
/* 企業案件の受注は TikTok の赤で目立たせる */
.sx-tt-stats > .is-hl dd span{ color:#FE2C55; }
@media (min-width:1000px){
  /* 横長カード: 左にブランドとプロフィール、右に数字のグリッド */
  .sx-case.is-acc .sx-tt{
    display:grid; grid-template-columns:minmax(260px, .8fr) 2fr; column-gap:clamp(28px, 3vw, 48px);
    align-items:start;
  }
  .sx-case.is-acc .sx-tt-brand{ grid-column:1; }
  .sx-case.is-acc .sx-prof{ grid-column:1; flex-direction:column; align-items:flex-start; margin:0; }
  .sx-case.is-acc .sx-tt-stats{
    grid-column:2; grid-row:1 / span 2; align-self:center;
    grid-template-columns:repeat(3, 1fr); border-top:0; column-gap:0;
  }
  .sx-case.is-acc .sx-tt-stats > div{
    padding:6px clamp(14px, 1.6vw, 22px) 14px; border-bottom:0; border-left:1px solid rgba(255,255,255,.16);
  }
  .sx-case.is-acc .sx-tt-stats > div:nth-child(n+4){ border-top:1px solid rgba(255,255,255,.16); padding-top:18px; }
  /* 5項目目（企業案件）は2マスぶん使って強調 */
  .sx-case.is-acc .sx-tt-stats > .is-hl{ grid-column:span 2; }
}
/* 青地の白い波線の濃さ（Works CASE 02） */
.sx-sec.is-blue #serviceFx{ opacity:.3; }
/* 横長カードの数字: 列を等幅に固定し、数字と単位を1行に収める */
@media (min-width:1000px){
  .sx-case.is-acc .sx-tt-stats{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .sx-case.is-acc .sx-tt-num{ white-space:nowrap; }
  .sx-case.is-acc .sx-tt-num span{ font-size:clamp(20px, 1.85vw, 27px); }
}
@media (min-width:1000px){
  /* 2段目: 総再生（桁が多い）を2マス、企業案件を1マス */
  .sx-case.is-acc .sx-tt-stats > .is-long{ grid-column:span 2; }
  .sx-case.is-acc .sx-tt-stats > .is-hl{ grid-column:span 1; }
}

/* ============================================================
   静かな区画（Works MINDSET）
   ============================================================ */
.sx-quiet{ background:#F7F5F0; padding:clamp(100px, 12vw, 180px) 0; }
.sx-quiet-grid{ display:grid; grid-template-columns:1fr; gap:28px; max-width:980px; }
@media (min-width:900px){ .sx-quiet-grid{ grid-template-columns:180px 1fr; gap:56px; } }
.sx-quiet-lbl{
  margin:0; padding-top:14px; border-top:1px solid var(--ink);
  font-size:13px; font-weight:700; letter-spacing:.12em; color:var(--ink-2);
  display:flex; flex-direction:column; gap:6px; align-self:start;
}
.sx-quiet-lbl span{ font-family:'Schibsted Grotesk', sans-serif; font-size:12px; letter-spacing:.24em; color:var(--blue); }
.sx-quiet-q{
  margin:0 0 clamp(28px, 3vw, 40px);
  font-family:'Zen Old Mincho', serif; font-weight:500;
  font-size:clamp(28px, 3.6vw, 48px); line-height:1.6; letter-spacing:.06em; color:var(--ink);
}
.sx-quiet-text{
  margin:0; max-width:34em; padding-top:clamp(24px, 2.6vw, 32px); border-top:1px solid rgba(20,23,26,.18);
  font-size:15.5px; line-height:2.2; letter-spacing:.04em; color:var(--ink-2);
}

/* ============================================================
   CONTACT を読みやすく（2026-09-26 オーナー「赤と白だけでみにくい」）
   区画の地は赤のまま、中身を «白いパネル» に載せる。
   パネルの中は 青帯＋白文字 ／ 赤ボタン ／ 墨の本文 で3色の対比を作る。
   ============================================================ */
.sx-end .sx-end-grid{
  margin-top:clamp(36px, 4vw, 56px);
  padding:clamp(34px, 4.4vw, 64px) clamp(26px, 4.4vw, 64px);
  border-radius:clamp(20px, 2.2vw, 30px); background:#fff; color:var(--ink);
  box-shadow:0 40px 80px -40px rgba(80,10,4,.55);
  align-items:center;
}
.sx-end .sx-end-grid .sx-lead{ margin-top:0; color:var(--blue); }
.sx-end .sx-end-grid .sx-lead .bnd-l > em{ color:#fff; }
.sx-end .sx-btn{ background:var(--brand); color:#fff; }
.sx-end .sx-btn .ar{ background:#fff; color:var(--brand); }
.sx-end .sx-btn:hover{ box-shadow:0 18px 40px -16px rgba(206,36,21,.6); }
.sx-end .sx-opts{ padding-left:clamp(0px, 3vw, 44px); border-left:1px solid var(--line); }
@media (max-width:999px){ .sx-end .sx-opts{ padding-left:0; border-left:0; padding-top:28px; border-top:1px solid var(--line); } }
.sx-end .sx-opts-lbl{ color:var(--ink); }
.sx-end .sx-opts-list li{ border-color:var(--blue); color:var(--blue); }
.sx-end .sx-opts-note{ color:var(--ink-2); font-size:13.5px; line-height:1.9; }
/* CONTACT パネルの見出し（シンプル版）。青帯は使わない */
.sx-end-h{ margin:0; font-family:'Zen Kaku Gothic New', sans-serif; font-weight:900; font-size:clamp(22px, 2.4vw, 32px); line-height:1.5; letter-spacing:.04em; color:var(--ink); }
.sx-end-sub{ margin:10px 0 0; font-size:14.5px; font-weight:700; color:var(--ink-2); }
.sx-end .sx-btn{ margin-top:clamp(24px, 2.6vw, 34px); }

/* ============================================================
   CONTACT のカード（中央揃え・1列）2026-09-26
   ============================================================ */
.sx-cta{
  margin:clamp(40px, 4.4vw, 64px) auto 0; max-width:880px; text-align:center;
  padding:clamp(44px, 5.4vw, 80px) clamp(24px, 5vw, 80px) clamp(36px, 4vw, 56px);
  border-radius:clamp(22px, 2.4vw, 32px); background:#fff; color:var(--ink);
  box-shadow:0 40px 80px -40px rgba(80,10,4,.55);
}
.sx-cta-h{ margin:0; font-family:'Zen Kaku Gothic New', sans-serif; font-weight:900; font-size:clamp(24px, 2.8vw, 36px); line-height:1.5; letter-spacing:.04em; }
.sx-cta-sub{ margin:14px auto 0; max-width:30em; font-size:15px; font-weight:500; line-height:1.9; color:var(--ink-2); }
.sx-btn.is-lg{
  margin-top:clamp(28px, 3vw, 40px); min-width:min(100%, 360px);
  padding:16px 16px 16px 40px; font-size:17px;
  background:var(--brand); color:#fff;
}
.sx-btn.is-lg .ar{ width:56px; height:56px; background:#fff; color:var(--brand); font-size:20px; }
.sx-cta-points{
  list-style:none; margin:clamp(30px, 3.2vw, 40px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px;
  font-size:13.5px; font-weight:700; color:var(--ink);
}
.sx-cta-points li{ display:flex; align-items:center; gap:8px; }
.sx-cta-points li::before{
  content:""; flex:none; width:18px; height:18px; border-radius:50%;
  background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.4L13 6.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}
.sx-cta-points a{ color:var(--blue); }
.sx-cta-note{
  margin:clamp(28px, 3vw, 36px) 0 0; padding-top:clamp(20px, 2.2vw, 26px); border-top:1px solid var(--line);
  font-size:13px; line-height:1.9; color:var(--ink-3);
}
@media (max-width:600px){
  .sx-cta-points{ flex-direction:column; align-items:flex-start; width:fit-content; margin-inline:auto; }
  .sx-btn.is-lg{ font-size:16px; padding-left:28px; }
}
/* CONTACT の見出しもカードに合わせて中央へ */
.sx-end .brs-head{ justify-content:center; text-align:center; }
/* ボタンの文字は1行（スマホで «へ» だけ落ちた） */
.sx-btn{ white-space:nowrap; }
@media (max-width:600px){
  .sx-btn.is-lg{ gap:14px; padding:12px 12px 12px 24px; font-size:15px; }
  .sx-btn.is-lg .ar{ width:48px; height:48px; }
}

/* 成約行は見出しと数値を同じ行、期間を次の行に固定する。 */
.sx-flow-list li.sx-result-contract{ display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:baseline; gap:4px 12px; }
.sx-result-contract-label{ white-space:nowrap; }
.sx-result-contract-period{ grid-column:1 / -1; font-size:12px; line-height:1.6; white-space:nowrap; }