/* ============================================================
   conexi.co.jp サイト全体プレビュー
   継承: ロゴ（実データのSVG）／水色 #45b9df ／サーモン ／波モチーフ ／
         Jost の英字ラベル ／各ページの構成と文体
   変更: 見出し色をAAへ ／本文16px・左揃え ／モーションの作り直し
   単一テーマ（実サイトはライトのみ）。全色を明示的に塗る。
   ============================================================ */
:root{
  /* 現行サイトのトンマナを維持したまま WCAG AA を満たす組み合わせ。
     ブランド色（#45b9df / #f18b73）は値を変えず、載せる文字色で解決する。 */
  --ink:#16293a;        /* 本文        白背景 14.87:1 */
  --deep:#1f7d9c;       /* 見出し      白背景  4.70:1（現行サイトのホバー色） */
  --mid:#17698a;        /* 小さいラベル 白背景  6.13:1 */
  --muted:#3f5666;      /* 補助文      白背景  7.68:1 */
  --brand:#45b9df;      /* ブランド水色。面・罫線・図版のみ */
  --brand-soft:#bcdbe5; --mist:#eff8fb; --mist-2:#f7fbfd;
  --cta:#f18b73;        /* ブランドのサーモンそのまま */
  --cta-on:#16293a;     /* その上の文字。6.15:1 */
  --cta-dark:#e97a5f; --salmon-soft:#fcebe7; --salmon:#f29b87;
  --line:#d7e4ea; --paper:#fff;
  --w:1120px;
  --f-jp:"Noto Sans JP","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
  --f-en:"Jost",var(--f-jp);
  --f-num:"Lato",var(--f-jp);
  --ease:cubic-bezier(.22,1,.36,1);
  --t-fast:.2s; --t-base:.55s; --t-hero:.9s;
}
*,*::before,*::after{box-sizing:border-box}body.renew{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-jp);
     font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased}:where(body.renew) img{max-width:100%;display:block}:where(body.renew) a{color:inherit}:where(body.renew) h1,:where(body.renew) h2,:where(body.renew) h3,:where(body.renew) h4{margin:0;line-height:1.45;font-weight:700;text-wrap:balance}:where(body.renew) p{margin:0}
/* 旧デザインの固定ヘッダー（高さ90px／SP60px）用に style.css が
   body{padding-top:90px} を持っているが、新ヘッダー .hdr は
   position:sticky で通常フローに乗るため、この余白がヘッダーの上に
   白い帯として残ってしまう。header.php を使うページ（renew / is-legacy）
   だけで打ち消す。旧ヘッダーの page-service1/2 は body に renew も
   is-legacy も付かないので 90px のまま影響しない。 */
body.renew,body.is-legacy{padding-top:0}

.wrap{width:min(100% - 48px,var(--w));margin-inline:auto}

/* ============ モーション基盤 ============
   初期の非表示は JS が html.js-motion を付けたときだけ効く。
   JSが落ちても内容は必ず見える。 */
.js-motion [data-reveal]{opacity:0;transform:translateY(14px)}
.js-motion [data-reveal].is-in{animation:revealIn var(--t-base) var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes revealIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.js-motion [data-underline] .ul{transform:scaleX(0);transform-origin:left}
.js-motion [data-underline].is-in .ul{animation:ulIn .5s var(--ease) .15s both}
@keyframes ulIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.js-motion .fvx h1 span,.js-motion .fvx .fv__eyebrow,.js-motion .fvx .fv__en,
.js-motion .fvx .fv__lead,.js-motion .fvx .fv__ctas{
  animation:heroIn var(--t-hero) var(--ease) both;animation-delay:var(--d,0ms);
}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* 演出の対象外にする要素（制作元の指定） */
[data-no-motion]{opacity:1!important;transform:none!important;animation:none!important}

/* prefers-reduced-motion。
   `animation:none` にはしない。終了状態を併記し忘れると内容が消えるため、
   時間をほぼ0にして終了状態だけを即座に適用する。 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-delay:0s!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    transition-delay:0s!important;
    scroll-behavior:auto!important;
  }
}



/* ============ ヘッダー ============ */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);
     backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:26px;height:76px}
.hdr__brand{display:flex;flex-direction:column;justify-content:center;gap:3px;text-decoration:none;flex:none;min-height:44px}
.cx-logo{width:170px;height:auto}
.cx-logo .cxl0{fill:#58A5BF}
.cx-logo .cxl1{fill:#F29B87}
.hdr__tag{font-size:9px;letter-spacing:.28em;color:var(--muted)}
.hdr__nav{display:flex;gap:22px;margin-left:auto;font-size:14px;font-weight:500}
.hdr__nav a,.hdr__nav button{font-family:var(--f-jp);font-size:14px;font-weight:500;color:var(--ink);
  background:none;border:0;border-bottom:2px solid transparent;padding:6px 0;cursor:pointer;
  transition:border-color var(--t-fast) ease,color var(--t-fast) ease}
.hdr__nav a:hover,.hdr__nav button:hover{border-color:var(--brand);color:var(--deep)}
.hdr__nav a[aria-current="page"],.hdr__nav button[aria-current="page"]{color:var(--deep);border-color:var(--brand)}
.newtag{font-family:var(--f-num);font-size:9px;font-weight:700;letter-spacing:.1em;
        background:var(--cta);color:var(--cta-on);border-radius:3px;padding:1px 5px;margin-left:5px;vertical-align:2px}
.hdr__cta .btn{min-height:44px;padding:0 20px;font-size:14px}

/* ============ ボタン ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;
     padding:0 30px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;
     border:2px solid transparent;cursor:pointer;font-family:var(--f-jp);
     transition:background var(--t-fast) ease,color var(--t-fast) ease,border-color var(--t-fast) ease,transform var(--t-fast) ease}
.btn--primary{background:var(--cta);color:var(--cta-on)}
.btn--primary:hover{background:var(--cta-dark);transform:translateY(-2px)}
.btn--ghost{background:#fff;color:var(--deep);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--brand);background:var(--mist-2);transform:translateY(-2px)}.btn:focus-visible,body.renew a:focus-visible,body.renew button:focus-visible{outline:3px solid var(--mid);outline-offset:3px}
.more{display:inline-flex;align-items:center;gap:14px;font-family:var(--f-en);font-size:13px;
      letter-spacing:.18em;color:var(--deep);text-decoration:none;font-weight:500;padding:10px 0;
      background:none;border:0;cursor:pointer}
.more__line{width:38px;height:1px;background:var(--brand);transition:width var(--t-fast) var(--ease)}
.more:hover .more__line{width:62px}


/* ============ 下層ページの共通ヘッダー ============ */
.phead{position:relative;background:linear-gradient(168deg,var(--mist) 0%,#e8f4f9 55%,var(--mist-2) 100%);
       color:var(--ink);padding:70px 0 92px;overflow:hidden}
.phead__crumb{font-size:12.5px;color:var(--muted);display:flex;gap:10px;align-items:center}
.phead__crumb span{opacity:.55}
.phead__en{font-family:var(--f-en);font-size:clamp(30px,4.4vw,50px);letter-spacing:.14em;margin-top:16px;color:var(--deep)}
.phead__jp{font-size:15px;color:var(--muted);margin-top:6px;letter-spacing:.06em}

/* ============ 波 ============ */
.wave{position:absolute;left:0;right:0;bottom:-1px;z-index:3;line-height:0;pointer-events:none}
.wave svg{width:200%;height:clamp(52px,7vw,96px);display:block}
.wave__path{animation:drift 26s linear infinite}
.wave__path--slow{animation-duration:40s;opacity:.55}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ FV（トップのみ） ============ */
.fvx{position:relative;min-height:min(78vh,660px);display:flex;align-items:center;overflow:hidden;background:var(--mist)}
.fvx__bg{position:absolute;inset:0}
.fvx__bg img{width:100%;height:100%;object-fit:cover}
.fvx__scrim{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.82) 34%,rgba(255,255,255,.16) 62%,rgba(255,255,255,0) 100%)}
.fvx__in{position:relative;z-index:2;padding:64px 0 118px}
.fv__eyebrow{font-family:var(--f-num);font-size:11px;font-weight:700;letter-spacing:.16em;
             text-transform:uppercase;color:var(--mid);display:flex;align-items:center;gap:10px}
.fv__eyebrow::before{content:"";width:24px;height:2px;background:var(--brand)}
.fvx h1{font-size:clamp(31px,5vw,56px);color:var(--deep);letter-spacing:.06em;margin-top:20px;line-height:1.4}
.fvx h1 span{display:block}
.fv__en{font-family:var(--f-en);font-size:clamp(12px,1.4vw,15px);letter-spacing:.2em;color:var(--mid);margin-top:18px}
.fv__lead{margin-top:24px;max-width:27em;font-size:17px;line-height:1.95}
.fv__ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* ============ セクション ============ */:where(body.renew) section{padding:104px 0;position:relative}
.sec--mist{background:var(--mist-2)}
.sec--mist2{background:var(--mist)}
.eyebrow{font-family:var(--f-num);font-size:11px;font-weight:700;letter-spacing:.16em;
         text-transform:uppercase;color:var(--mid);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--brand);flex:none}
.sec-h{font-size:clamp(24px,2.9vw,33px);color:var(--deep);margin-top:14px;display:inline-block}
.ul{display:block;height:3px;background:var(--brand);border-radius:2px;margin-top:13px}
.sec-lead{color:var(--muted);max-width:34em;margin-top:19px}
.sec-head{margin-bottom:52px}

/* ============ 汎用パーツ ============ */
.cols{display:grid;gap:24px}
.cols--2{grid-template-columns:1fr 1fr}
.cols--3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:30px 28px;
      display:flex;flex-direction:column;gap:13px;
      transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 44px -28px rgba(15,90,117,.5)}
.card__n{font-family:var(--f-num);font-weight:700;font-size:12.5px;color:var(--brand);letter-spacing:.1em}
.card__t{font-size:18.5px;color:var(--deep)}
.card__d{font-size:15px;color:var(--muted);line-height:1.9}
.shot{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;
      box-shadow:0 22px 56px -30px rgba(15,90,117,.45)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center}
.split + .split{margin-top:100px}
.split--rev .split__media{order:2}
.label{font-family:var(--f-en);font-size:12px;letter-spacing:.22em;color:var(--mid);font-weight:500}
.h3{font-size:clamp(21px,2.4vw,28px);color:var(--deep);margin-top:11px}
.body{margin-top:19px;color:var(--muted);line-height:1.95;max-width:30em}
.list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.list li{position:relative;padding-left:24px;font-size:15px;color:var(--muted);line-height:1.85}
.list li::before{content:"";position:absolute;left:0;top:.66em;width:8px;height:8px;background:var(--brand);border-radius:2px}
.cap{margin-top:13px;font-size:12.5px;color:var(--muted);text-align:center}

/* 週グリッド */
.week{display:flex;gap:5px;margin-top:22px;max-width:390px}
.week__c{flex:1;text-align:center;font-family:var(--f-num);font-size:10.5px;font-weight:700;color:var(--muted)}
.week__m{display:grid;place-items:center;margin-top:5px;height:32px;border-radius:7px;
         border:1px solid var(--line);background:#fff;font-size:13px}
.week__m--ok{background:#eaf7ef;border-color:#bfe3cd;color:#1c6b3d}
.week__m--few{background:#fdf5e7;border-color:#eddcb6;color:#8a5a10}
.week__m--no{background:#fbeeec;border-color:#eccdc7;color:#96311c}

/* 実績 */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
       border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:50px}
.stat{background:#fff;padding:28px 26px}
.stat__n{font-family:var(--f-num);font-weight:700;font-size:36px;color:var(--deep);line-height:1.15;font-variant-numeric:tabular-nums}
.stat__n small{font-size:15px;margin-left:3px}
.stat__l{margin-top:8px;font-size:13.5px;color:var(--muted);line-height:1.7}

/* テーブル */
.tw{overflow-x:auto;margin-top:8px;border:1px solid var(--line);border-radius:12px}:where(body.renew) table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}:where(body.renew) th,:where(body.renew) td{text-align:left;padding:17px 22px;border-bottom:1px solid var(--line);vertical-align:top}:where(body.renew) th{width:30%;background:var(--mist-2);color:var(--deep);font-weight:700;font-size:14.5px}:where(body.renew) td{color:var(--muted)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 42px 22px 32px;position:relative;
             font-size:16.5px;font-weight:700;color:var(--deep);line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";position:absolute;left:0;top:22px;font-family:var(--f-num);font-weight:700;color:var(--brand)}
.faq summary::after{content:"+";position:absolute;right:6px;top:20px;font-family:var(--f-num);font-size:21px;color:var(--mid);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq__a{padding:0 42px 24px 32px;font-size:15px;color:var(--muted);line-height:1.95}

/* お知らせ */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.news__i{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;
         text-decoration:none;display:flex;flex-direction:column;
         transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) ease}
.news__i:hover{transform:translateY(-4px);box-shadow:0 20px 44px -28px rgba(15,90,117,.5);border-color:var(--brand-soft)}
.news__thumb{aspect-ratio:16/10;background:linear-gradient(135deg,var(--mist) 0%,var(--brand-soft) 100%)}
.news__body{padding:19px 21px 23px}
.news__meta{display:flex;align-items:center;gap:11px}
.news__date{font-family:var(--f-num);font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.06em}
.news__tag{font-family:var(--f-num);font-size:10px;font-weight:700;letter-spacing:.1em;
           color:var(--mid);border:1px solid var(--brand-soft);border-radius:4px;padding:2px 8px}
.news__t{margin-top:11px;font-size:15.5px;color:var(--ink);line-height:1.7;font-weight:500}
.tabs{display:flex;gap:9px;margin-bottom:34px;flex-wrap:wrap}
.tabs a,.tabs button{font-family:var(--f-jp);font-size:13.5px;font-weight:700;color:var(--muted);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:9px 20px;cursor:pointer;transition:all var(--t-fast) ease}
.tabs a[aria-current="page"],.tabs a[aria-pressed="true"],.tabs button[aria-pressed="true"]{background:var(--deep);color:#fff;border-color:var(--deep)}

/* 併用（正直に書く節） */
.scope{background:var(--deep);color:#fff;border-radius:16px;padding:52px}
.scope h2{font-size:clamp(23px,2.6vw,30px);color:#fff}
.scope p{margin-top:17px;color:#dceef5;line-height:1.95;max-width:38em}
.scope__cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px}
.scope__card{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:24px}
.scope__card--keep{background:rgba(255,255,255,.04)}
.scope__card h4{font-size:16px;color:#fff}
.scope__card .tag{font-family:var(--f-num);font-size:10px;font-weight:700;letter-spacing:.12em;
                  text-transform:uppercase;color:#a8e0f2;display:block;margin-bottom:7px}
.scope__card ul{margin:13px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.scope__card li{font-size:14.5px;color:#e4f2f8;padding-left:21px;position:relative;line-height:1.75}
.scope__card li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.scope__card--keep li::before{background:#8fb2c1}

/* フォーム */
.form{background:#fff;border:1px solid var(--line);border-radius:14px;padding:34px;
      box-shadow:0 18px 44px -28px rgba(15,90,117,.35)}
.field{display:flex;flex-direction:column;gap:7px;margin-top:20px}
.field label{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:8px}
.req{font-family:var(--f-num);font-size:9.5px;font-weight:700;letter-spacing:.08em;background:var(--cta);color:var(--cta-on);border-radius:3px;padding:2px 6px}
.opt{font-family:var(--f-num);font-size:9.5px;font-weight:700;letter-spacing:.08em;background:#e6eef2;color:var(--muted);border-radius:3px;padding:2px 6px}
.field input,.field textarea,.field select{font-family:var(--f-jp);font-size:16px;color:var(--ink);
  border:1px solid var(--line);border-radius:8px;padding:13px 14px;background:#fff;width:100%}
.field input::placeholder,.field textarea::placeholder{color:#9db2bd}
.form .btn{width:100%;margin-top:24px}
.form__note{margin-top:14px;font-size:12px;color:var(--muted);line-height:1.7}

/* CTA */
.cta{background:linear-gradient(160deg,var(--mist) 0%,var(--salmon-soft) 100%);position:relative}
.cta h2{font-size:clamp(25px,3vw,35px);color:var(--deep)}
.cta p{margin-top:19px;max-width:30em;line-height:1.95}
.cta__b{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* フッター */
.ft{background:var(--ink);color:#c8d6de;padding:56px 0 42px;font-size:13.5px}
.ft__top{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:38px}
.ft .cx-logo{width:160px}
.ft .cx-logo .cxl0{fill:#8fc7d8}
.ft__nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.ft__nav button{font-family:var(--f-jp);font-size:13.5px;color:#c8d6de;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.ft__nav button:hover{color:#fff;text-decoration:underline}
.ft__h{font-family:var(--f-num);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7f97a5;margin-bottom:14px}
.ft__addr{line-height:1.9}
.ft__addr b{color:#fff;font-weight:700;display:block;margin-top:14px}
.ft__addr b:first-child{margin-top:0}
.ft__c{margin-top:38px;padding-top:22px;border-top:1px solid #2a3d4b;font-size:12px;color:#8fa3ae;font-family:var(--f-num)}

/* 注釈 */
.annot{background:#fffdf5;border:1px solid #e8dcae;border-left:4px solid #d9b64a;border-radius:8px;
       padding:16px 20px;font-size:13.5px;color:#5c4a12;line-height:1.85;margin-top:24px}
.annot strong{color:#3f320a}

/* ============ レスポンシブ ============ */
@media (max-width:1000px){:where(body.renew) section{padding:74px 0}
  .hdr__nav{display:none}
  .split,.cols--2,.cols--3,.news,.stats,.scope__cols,.ft__top{grid-template-columns:1fr}
  .split--rev .split__media{order:initial}
  .split + .split{margin-top:66px}
  .fvx{min-height:auto}
  .fvx__in{padding:52px 0 100px}
  .scope{padding:32px 24px}
}
@media (max-width:640px){
  .wrap{width:calc(100% - 36px)}
  .fvx__scrim{background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.88) 55%,rgba(255,255,255,.74) 100%)}
}


/* ==========================================================
   ELEVATED — Awwwards / CSSDA / FWA から「良いところだけ」
   採るもの: 大胆なタイポグラフィ、編集的な非対称グリッド、
             スクロールの振付、作り込まれたマイクロインタラクション
   採らないもの: 低コントラスト、極小文字、スクロールジャック、
             カスタムカーソル、重い演出
   （Awwwards の配点自体が Design 40% / Usability 30% なので、
     可読性を捨てる方向は基準としても減点になる）
   ========================================================== */

/* --- タイポグラフィを一段引き上げる --- */
.fvx h1{
  font-size:clamp(38px,6.6vw,88px);
  line-height:1.18;
  letter-spacing:.01em;
  font-weight:700;
}
.sec-h{font-size:clamp(27px,4vw,50px);line-height:1.28;letter-spacing:.01em}
.h3{font-size:clamp(22px,2.9vw,34px);line-height:1.35}
.fv__lead{font-size:clamp(16px,1.35vw,19px);max-width:24em}
.eyebrow{font-size:11.5px;letter-spacing:.2em}
.ul{height:4px;margin-top:18px}

/* --- セクション番号を余白に置く（編集的な装置） --- */
.sec-head{position:relative}
.sec-head[data-no]::before{
  content:attr(data-no);
  position:absolute;left:-104px;top:-6px;
  font-family:var(--f-num);font-weight:700;font-size:74px;line-height:1;
  color:var(--brand);opacity:.16;letter-spacing:-.02em;pointer-events:none;
}
@media (max-width:1340px){ .sec-head[data-no]::before{display:none} }

/* メディアの登場は通常の reveal に統一する。
   clip-path で隠す方式は、演出が始まらないと画像が完全に消えるため採用しない。 */

/* --- 本文は左から。図版は下から。方向で役割を分ける --- */
.js-motion [data-reveal].body,
.js-motion [data-reveal].sec-lead,
.js-motion [data-reveal].list{transform:translateX(-14px)}
.js-motion [data-reveal].body.is-in,
.js-motion [data-reveal].sec-lead.is-in,
.js-motion [data-reveal].list.is-in{animation:revealX var(--t-base) var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes revealX{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

/* --- ボタンの矢印が動く --- */
.btn__ar{display:inline-block;font-family:var(--f-num);font-weight:700;transition:transform var(--t-fast) var(--ease)}
.btn:hover .btn__ar{transform:translateX(5px)}

/* --- ヘッダーのスクロール進捗 --- */
.prog{position:absolute;left:0;bottom:-1px;height:2px;background:var(--brand);width:0;transition:width .1s linear}

/* ==========================================================
   署名となる仕掛け: 週グリッドが × から ○ に変わる
   このサービスの中心概念（空きが生まれる）そのものを図像にする
   ========================================================== */
.hero-week{margin-top:38px;max-width:520px}
.hero-week__lbl{font-family:var(--f-num);font-size:10.5px;font-weight:700;letter-spacing:.18em;
                text-transform:uppercase;color:var(--mid);margin-bottom:11px}
.hero-week__grid{display:flex;gap:7px}
.hw{flex:1;text-align:center}
.hw__d{font-family:var(--f-num);font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.06em}
.hw__c{
  position:relative;margin-top:6px;height:52px;border-radius:9px;display:grid;place-items:center;
  font-size:19px;font-weight:700;border:1.5px solid var(--line);background:#fff;color:var(--muted);
  transition:background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease);
}
.hw__c .on,.hw__c .off{grid-area:1/1;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.hw__c .on{opacity:0;transform:scale(.6)}
.hw__c .off{opacity:1}
/* 空きが生まれた状態 */
.hw.is-open .hw__c{background:#eaf7ef;border-color:#79c79a;color:#1c6b3d}
.hw.is-open .hw__c .on{opacity:1;transform:none}
.hw.is-open .hw__c .off{opacity:0;transform:scale(.6)}
.hero-week__cap{margin-top:14px;font-size:13.5px;color:var(--muted)}
.hero-week__cap b{color:var(--deep)}
@media (prefers-reduced-motion:reduce){
  .hw__c,.hw__c .on,.hw__c .off{transition:none!important}
}

/* ==========================================================
   実績データ（BPO）
   ========================================================== */
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
     border:1px solid var(--line);border-radius:16px;overflow:hidden}
.kpi__i{background:#fff;padding:32px 26px}
.kpi__k{font-family:var(--f-num);font-size:10px;font-weight:700;letter-spacing:.14em;
        text-transform:uppercase;color:var(--mid)}
.kpi__v{font-family:var(--f-num);font-weight:700;font-size:clamp(34px,4vw,52px);line-height:1.05;
        color:var(--deep);margin-top:12px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi__v small{font-family:var(--f-jp);font-size:15px;font-weight:400;color:var(--muted);margin-left:4px;letter-spacing:0}
.kpi__d{margin-top:11px;font-size:13.5px;color:var(--muted);line-height:1.75}

.bars{margin-top:42px;display:flex;flex-direction:column;gap:30px}
.bar2{display:grid;grid-template-columns:190px minmax(0,1fr);gap:26px;align-items:center}
.bar2__t{font-size:15px;font-weight:700;color:var(--ink);line-height:1.6}
.bar2__t small{display:block;font-weight:400;font-size:12.5px;color:var(--muted);margin-top:3px}
.bar2__rows{display:flex;flex-direction:column;gap:9px}
.bar2__row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:13px;align-items:center}
.bar2__m{font-family:var(--f-num);font-size:12px;font-weight:700;color:var(--muted)}
.bar2__track{height:26px;background:var(--mist);border-radius:6px;overflow:hidden}
.bar2__fill{height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--brand) 0%,#2e93b8 100%);
            transition:width 1.05s var(--ease)}
.bar2__row--jun .bar2__fill{background:linear-gradient(90deg,var(--salmon) 0%,var(--cta) 100%)}
.bar2__n{font-family:var(--f-num);font-size:15px;font-weight:700;color:var(--deep);
         font-variant-numeric:tabular-nums;min-width:76px;text-align:right}
@media (prefers-reduced-motion:reduce){ .bar2__fill{transition:none!important} }

.srcnote{margin-top:22px;font-size:11.5px;color:var(--muted);line-height:1.8;
         padding-left:15px;border-left:3px solid var(--brand-soft)}

@media (max-width:1000px){
  .kpi{grid-template-columns:1fr 1fr}
  .bar2{grid-template-columns:1fr;gap:12px}
  .hero-week{max-width:none}
  .hw__c{height:44px;font-size:16px}
}



/* ==========================================================
   コンテナクエリ
   プレビューの「スマホ」切替でも、実機と同じレイアウトが出るようにする。
   （メディアクエリはビューポート基準なので、親要素を狭めても発火しない）
   実機ではビューポート幅 = ステージ幅なので、下のルールがそのまま効く。
   ========================================================== */
@media screen and (max-width:1000px){:where(body.renew) section{padding:74px 0}
  .hdr__nav{display:none}
  .split,.cols--2,.cols--3,.news,.stats,.scope__cols,.ft__top,.kpi{grid-template-columns:1fr}
  .split--rev .split__media{order:initial}
  .split{gap:34px}
  .split + .split{margin-top:62px}
  .fvx{min-height:auto}
  .fvx__in{padding:48px 0 96px}
  .scope{padding:30px 22px}
  .bar2{grid-template-columns:1fr;gap:12px}
  .sec-head[data-no]::before{display:none}
}
@media screen and (max-width:640px){
  :root{--w:100%}
  .wrap{width:calc(100% - 36px)}:where(body.renew) section{padding:62px 0}

  /* ヘッダー: ロゴとCTAだけ。CTAは親指で押せる高さに */
  .hdr__in{height:64px;gap:12px}
  .cx-logo{width:132px}
  .hdr__cta .btn{min-height:44px;padding:0 16px;font-size:13.5px}

  /* FV: 写真の上に文字が乗るので、白の被せを強くする */
  .fvx__scrim{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.9) 52%,rgba(255,255,255,.76) 100%)}
  .fvx h1{font-size:clamp(30px,9vw,40px);line-height:1.28}
  .fv__lead{font-size:16px;max-width:none}
  .fv__ctas{gap:10px}
  .fv__ctas .btn{width:100%;min-height:52px}

  /* 見出し */
  .sec-h{font-size:clamp(23px,6.4vw,30px)}
  .h3{font-size:clamp(20px,5.6vw,25px)}
  .phead{padding:44px 0 68px}
  .phead__en{font-size:clamp(26px,8vw,36px)}

  /* 週グリッド: 7列だと1マスが狭いので高さを詰めて文字を保つ */
  .hero-week__grid{gap:4px}
  .hw__c{height:42px;font-size:16px}
  .hw__d{font-size:10px}
  .week__m{height:34px}

  /* 数字 */
  .kpi__v{font-size:38px}
  .stat__n{font-size:32px}

  /* 実績バー: ラベルと数値を上下に */
  .bar2__row{grid-template-columns:38px minmax(0,1fr) auto;gap:9px}
  .bar2__n{min-width:62px;font-size:14px}
  .bar2__track{height:22px}

  /* カード・フォーム */
  .card{padding:24px 20px}
  .form{padding:22px}
  .field input,.field textarea,.field select{font-size:16px}  /* iOSの自動ズーム防止 */

  /* タップ領域を 44px 以上に */
  .more{min-height:44px;padding:12px 0}
  .tabs a,.tabs button{min-height:44px;padding:0 18px}
  .ft__nav button{min-height:44px;display:block;width:100%}
  .btn{min-height:52px}

  /* 表は横スクロール */
  .tw{-webkit-overflow-scrolling:touch}:where(body.renew) table{min-width:440px}

  /* 画像の角丸を控えめに */
  .shot{border-radius:9px}
}
/* 実機（ビューポート基準）でも同じ内容を適用する */
@media (max-width:640px){
  .hdr__in{height:64px;gap:12px}
  .cx-logo{width:132px}
  .hdr__cta .btn{min-height:44px;padding:0 16px;font-size:13.5px}
  .fvx__scrim{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.9) 52%,rgba(255,255,255,.76) 100%)}
  .fvx h1{font-size:clamp(30px,9vw,40px);line-height:1.28}
  .fv__ctas .btn{width:100%;min-height:52px}
  .hw__c{height:42px;font-size:16px}
  .field input,.field textarea,.field select{font-size:16px}
  .more{min-height:44px;padding:12px 0}
  .tabs a,.tabs button{min-height:44px;padding:0 18px}
  .ft__nav button{min-height:44px;display:block;width:100%}
  .btn{min-height:52px}:where(body.renew) table{min-width:440px}
}

/* タップ領域: ヘッダーナビも 44px を確保（PCでも押しやすくなる） */
.hdr__nav a,.hdr__nav button{min-height:44px}
.tabs a,.tabs button{min-height:44px}
.more{min-height:44px}


/* nurse-gate のロゴ */
.phead__logo{margin-top:16px}
.phead__logo img{width:min(360px,72%);height:auto}
@media screen and (max-width:640px){
  .phead__logo img{width:min(280px,80%)}
}
@media (max-width:640px){
  .phead__logo img{width:min(280px,80%)}
}


/* ==========================================================
   FV は現行サイトの構成をそのまま流用する。
   写真いっぱいに、左寄りでキャッチコピー画像を重ねるだけ。
   ========================================================== */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.fvx__scrim{background:linear-gradient(100deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.28) 38%,rgba(255,255,255,0) 70%)}
.mv-copy{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.mv-copy img{height:auto;display:block}
.mv-copy__l1 img{width:clamp(200px,26vw,330px)}
.mv-copy__l2 img{width:clamp(200px,26vw,330px);margin-left:clamp(14px,3vw,44px)}
.mv-copy__en{margin-top:18px;margin-left:clamp(28px,6vw,90px)}
.mv-copy__en img{width:clamp(180px,24vw,300px)}
.js-motion .mv-copy > span{animation:heroIn var(--t-hero) var(--ease) both;animation-delay:var(--d,0ms)}
@media (prefers-reduced-motion:reduce){
  .js-motion .mv-copy > span{animation:none!important;opacity:1!important;transform:none!important}
}
@media screen and (max-width:640px){
  .mv-copy__l1 img,.mv-copy__l2 img{width:min(260px,62vw)}
  .mv-copy__en img{width:min(220px,54vw)}
  .fvx__scrim{background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.35) 55%,rgba(255,255,255,.15) 100%)}
}
@media (max-width:640px){
  .mv-copy__l1 img,.mv-copy__l2 img{width:min(260px,62vw)}
  .mv-copy__en img{width:min(220px,54vw)}
}


/* ==========================================================
   nurse-gate LP
   ========================================================== */
.lp-fv{background:linear-gradient(168deg,var(--mist) 0%,#e8f4f9 55%,var(--mist-2) 100%);padding:66px 0 78px;position:relative}
.lp-fv__in{display:grid;grid-template-columns:minmax(0,1.06fr) 380px;gap:52px;align-items:start}
.lp-fv__eyebrow{font-family:var(--f-num);font-size:11.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mid);display:flex;align-items:center;gap:10px}
.lp-fv__eyebrow::before{content:"";width:24px;height:2px;background:var(--brand)}
.lp-fv__logo{margin-top:18px}
.lp-fv__logo img{width:min(330px,72%);height:auto}
.lp-fv__h{font-size:clamp(28px,3.6vw,44px);line-height:1.34;color:var(--deep);margin-top:20px}
.lp-fv__h em{font-style:normal;background-image:linear-gradient(transparent 62%,rgba(69,185,223,.34) 62%);background-repeat:no-repeat}
.lp-fv__lead{margin-top:22px;max-width:32em;line-height:1.95;color:var(--ink)}
.lp-fv__pts{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.lp-fv__pts li{position:relative;padding-left:28px;font-size:16px;font-weight:700;color:var(--deep)}
.lp-fv__pts li::before{content:"";position:absolute;left:0;top:.42em;width:15px;height:15px;border-radius:4px;
  background:var(--brand);box-shadow:inset 0 0 0 3px #fff}
.lp-fv__note{margin-top:22px;font-size:13.5px;color:var(--muted);padding-left:14px;border-left:3px solid var(--brand-soft);line-height:1.8}

/* 資料請求フォーム */
.lp-form{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;
  box-shadow:0 20px 50px -30px rgba(15,90,117,.45)}
.lp-form__ttl{font-size:17px;font-weight:700;color:var(--deep);text-align:center}
.lp-form__sub{font-size:12px;color:var(--muted);text-align:center;margin-top:5px;line-height:1.7}
.lp-form .field{margin-top:14px;gap:5px}
.lp-form .field label{font-size:12.5px}
.lp-form .field input,.lp-form .field select{padding:11px 12px;font-size:16px}
.lp-form__agree{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:12.5px;color:var(--muted);cursor:pointer}
.lp-form__agree input{width:18px;height:18px;flex:none}
.lp-form .btn{width:100%;margin-top:16px;min-height:52px}
.lp-form__after{margin-top:13px;font-size:11.5px;color:var(--muted);line-height:1.75;text-align:center}
.lp-form--dark{background:rgba(255,255,255,.97)}

/* 増減の見せ方 */
.delta{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 28px}
.delta__k{font-family:var(--f-num);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
.delta__row{display:flex;align-items:baseline;gap:16px;margin-top:14px;font-family:var(--f-num);font-weight:700;font-variant-numeric:tabular-nums}
.delta__from{font-size:34px;color:var(--ink-3,#8fa8b6);opacity:.55}
.delta__ar{font-size:20px;color:var(--brand)}
.delta__to{font-size:clamp(40px,5vw,56px);color:var(--cta);line-height:1}
.delta__d{margin-top:10px;font-size:13.5px;color:var(--muted)}
.delta__d strong{color:var(--ink)}
.lead-strong{margin:34px auto 0;max-width:30em;text-align:center;font-size:clamp(17px,2vw,21px);font-weight:700;color:var(--deep);line-height:1.75}

/* 廃止理由 */
.reasons{display:flex;flex-direction:column;gap:11px}
.reason{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:16px 20px;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.reason__bar{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--mist);z-index:0}
.reason--hi .reason__bar{background:#dff0f7}
.reason__t{position:relative;z-index:1;font-size:16px;font-weight:700;color:var(--ink)}
.reason--hi .reason__t{color:var(--deep)}
.reason__n{position:relative;z-index:1;font-family:var(--f-num);font-weight:700;font-size:19px;color:var(--muted);font-variant-numeric:tabular-nums}
.reason--hi .reason__n{color:var(--deep)}
.callout{margin-top:26px;background:var(--deep);color:#fff;border-radius:14px;padding:32px 34px;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center}
.callout__n{font-family:var(--f-num);font-weight:700;font-size:clamp(46px,6vw,72px);line-height:1;letter-spacing:-.02em}
.callout__n span{font-size:.45em;margin-left:2px}
.callout__t{font-size:16.5px;line-height:1.8;color:#e4f2f8}
.callout__t strong{color:#fff}
.callout__d{grid-column:2;margin-top:8px;font-size:15px;color:#a8e0f2;font-weight:700}
.kpi__i--solo{border:1px solid var(--line);border-radius:14px;background:#fff}

/* ポジショニング */
.posi{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.posi__col{border:1px solid var(--line);border-radius:14px;background:#fff;padding:28px}
.posi__col--ours{background:var(--mist);border-color:var(--brand)}
.posi__hd{font-size:14px;font-weight:700;color:var(--muted);padding-bottom:14px;border-bottom:1px solid var(--line)}
.posi__col--ours .posi__hd{color:var(--deep);border-color:var(--brand-soft)}
.posi__list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:15px}
.posi__list li{display:flex;flex-direction:column;gap:3px}
.posi__list b{font-size:16px;color:var(--ink)}
.posi__col--ours .posi__list b{color:var(--deep);font-size:19px}
.posi__list span{font-size:14px;color:var(--muted);line-height:1.75}
.posi__note{margin-top:20px;padding-top:16px;border-top:1px solid var(--brand-soft);font-size:14.5px;font-weight:700;color:var(--cta)}
.card--lead{background:var(--mist);border-color:var(--brand)}
.card__badge{align-self:flex-start;font-size:11px;font-weight:700;background:var(--deep);color:#fff;border-radius:4px;padding:3px 9px}

/* 画面まわり: 枠を統一して置き方の違和感をなくす */
.feat{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:center}
.feat + .feat{margin-top:96px}
.feat--rev .feat__media{order:-1}
.browser{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;
  box-shadow:0 26px 60px -34px rgba(15,90,117,.5)}
.browser__bar{display:flex;align-items:center;gap:6px;padding:9px 13px;background:#f2f7f9;border-bottom:1px solid var(--line)}
.browser__bar i{width:9px;height:9px;border-radius:50%;background:#cfdde4;flex:none}
.browser__url{margin-left:10px;font-family:var(--f-num);font-size:11px;color:var(--muted);
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:3px 12px}
.browser img{width:100%;display:block}
.phone{margin:0;border-radius:22px;overflow:hidden;border:8px solid #1d2f3c;background:#fff;
  box-shadow:0 22px 50px -26px rgba(15,90,117,.5)}
.phone img{width:100%;display:block}
.feat__media--pair{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:18px;align-items:end}
.livelink{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}
.livelink__url{font-family:var(--f-num);font-size:12.5px;color:var(--muted)}
.fine{margin-top:14px;font-size:12.5px;color:var(--muted);line-height:1.8;padding-left:13px;border-left:2px solid var(--line)}

/* 比較表 */
.cmp table{min-width:760px}
.cmp thead th{padding:18px;font-size:14px;vertical-align:bottom;text-align:center}
.cmp thead th:first-child{width:24%;background:transparent}
.cmp thead th small{display:block;font-weight:400;font-size:11px;color:var(--muted);margin-top:4px}
.cmp tbody th{width:24%;font-size:14.5px;text-align:left;background:var(--mist-2);vertical-align:top}
.cmp tbody th small{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:4px;line-height:1.6}
.cmp td{text-align:center;font-size:14.5px;vertical-align:top}
.cmp td small{display:block;font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.6}
.cmp__ours{background:var(--mist)!important;border-left:2px solid var(--brand);border-right:2px solid var(--brand)}
.cmp thead th.cmp__ours{color:var(--deep);font-size:15px;border-top:2px solid var(--brand);border-radius:10px 10px 0 0}
.cmp tbody tr:last-child td.cmp__ours{border-bottom:2px solid var(--brand);border-radius:0 0 10px 10px}
.yes{font-weight:700;color:var(--deep)}
.no{font-weight:700;color:var(--cta)}
.unk{color:var(--muted);font-size:13.5px}

/* 流れ */
.flow4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.flow4__s{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 22px}
.flow4__n{font-family:var(--f-num);font-weight:700;font-size:13px;letter-spacing:.12em;color:var(--brand)}
.flow4__t{font-size:17.5px;font-weight:700;color:var(--deep);margin-top:10px}
.flow4__d{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.85}

/* 最終CTA */
.lp-last{background:linear-gradient(150deg,var(--deep) 0%,#2b90b2 100%);color:#fff}
.lp-last__in{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:52px;align-items:start}
.lp-last h2{font-size:clamp(26px,3.2vw,38px);color:#fff;margin-top:14px}
.lp-last > .wrap > div > p,.lp-last__in > div > p{color:#dceef5;line-height:1.95;margin-top:18px;max-width:28em}
.lp-last__pts{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.lp-last__pts li{padding-left:26px;position:relative;color:#e4f2f8;font-size:15px}
.lp-last__pts li::before{content:"✓";position:absolute;left:0;color:#a8e0f2;font-weight:700}
.lp-last__tel{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:30px;
  font-family:var(--f-num);font-weight:700;font-size:30px;color:#fff}
.lp-last__tel span{font-size:11px;letter-spacing:.14em;color:#a8e0f2}
.lp-last__tel small{font-family:var(--f-jp);font-size:12.5px;font-weight:400;color:#cfe9f3}

@media screen and (max-width:1000px){
  .lp-fv__in,.lp-last__in{grid-template-columns:1fr;gap:34px}
  .posi,.flow4{grid-template-columns:1fr}
  .feat{grid-template-columns:1fr;gap:30px}
  .feat--rev .feat__media{order:initial}
  .feat + .feat{margin-top:64px}
  .feat__media--pair{grid-template-columns:minmax(0,1fr) 120px}
  .callout{grid-template-columns:1fr;gap:12px}
  .callout__d{grid-column:1}
}
@media (max-width:1000px){
  .lp-fv__in,.lp-last__in{grid-template-columns:1fr;gap:34px}
  .posi,.flow4{grid-template-columns:1fr}
  .feat{grid-template-columns:1fr;gap:30px}
  .feat--rev .feat__media{order:initial}
  .feat__media--pair{grid-template-columns:minmax(0,1fr) 120px}
  .callout{grid-template-columns:1fr;gap:12px}
  .callout__d{grid-column:1}
}
@media screen and (max-width:640px){
  .lp-fv{padding:40px 0 54px}
  .lp-form{padding:20px}
  .feat__media--pair{grid-template-columns:1fr;gap:22px}
  .phone{max-width:200px;margin-inline:auto}
  .cmp table{min-width:620px}
  .delta__to{font-size:42px}
}


/* ==========================================================
   chokowa ページ — lp.chokowa.world のトンマナに寄せる
   ブランドブルー #3b6fe8（白文字 4.54:1 / 白背景の文字 4.54:1 どちらもAA）
   ========================================================== */
.ck{--ck:#3b6fe8;--ck-deep:#2f5ed0;--ck-soft:#eef3fe;--ck-line:#d6e1fb}
.ck-fv{position:relative;overflow:hidden;padding:64px 0 76px;
  background:linear-gradient(168deg,var(--ck-soft) 0%,#e4ecfd 55%,#f6f9ff 100%)}
.ck-blob{position:absolute;border-radius:26%;background:var(--ck);opacity:.16;pointer-events:none}
.ck-blob--1{width:120px;height:120px;left:6%;top:22%;transform:rotate(18deg);opacity:.22}
.ck-blob--2{width:76px;height:76px;left:2%;bottom:16%;opacity:.12;transform:rotate(-12deg)}
.ck-blob--3{width:150px;height:150px;right:34%;bottom:8%;transform:rotate(24deg);opacity:.1}
.ck-blob--4{width:160px;height:160px;left:-40px;top:12%;background:#fff;opacity:.12;transform:rotate(20deg)}
.ck-eyebrow{display:inline-block;font-size:13.5px;font-weight:700;color:var(--ck-deep);
  background:#fff;border:1px solid var(--ck-line);border-radius:999px;padding:6px 16px}
.ck-fv__h{font-size:clamp(26px,3.5vw,42px);line-height:1.4;color:var(--ink);margin-top:20px;font-weight:700}
.ck-fv__h em{font-style:normal;color:var(--ck-deep)}
.ck-pts{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.ck-pts li{position:relative;padding-left:28px;font-size:15.5px;color:var(--muted)}
.ck-pts li::before{content:"✓";position:absolute;left:0;color:var(--ck);font-weight:700}
.ck-illust{margin:26px 0 0}
.ck-illust img{width:min(230px,52%);height:auto}
.ck-form{border-color:var(--ck-line)}
.btn--ck{background:var(--ck);color:#fff}
.btn--ck:hover{background:var(--ck-deep);transform:translateY(-2px)}
.btn--ck-on{background:#fff;color:var(--ck-deep)}
.btn--ck-on:hover{background:var(--ck-soft);transform:translateY(-2px)}
.btn--ck-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--ck-ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}

.ck-eb{color:var(--ck-deep)}
.ck-eb::before{background:var(--ck)}
.ck-h{color:var(--ck-deep)}
.ck-ul{background:var(--ck)}
.ck-mist{background:var(--ck-soft)}
.ck-card{border-color:var(--ck-line)}
.ck-num{font-family:var(--f-num);font-weight:700;font-size:13px;color:var(--ck);letter-spacing:.1em}

/* 導入事業所ロゴ */
.ck-logos{border-top:1px solid var(--ck-line);border-bottom:1px solid var(--ck-line);background:#fff;padding:22px 0}
.ck-logos__in{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.ck-logos__t{font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.ck-logos__row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ck-logos__row img{width:44px;height:44px;border-radius:9px;object-fit:contain;background:#fff;border:1px solid var(--line)}
.ck-logos__row em{font-style:normal;font-size:12.5px;color:var(--muted)}

/* 選ばれる理由 */
.ck-points{display:flex;flex-direction:column;gap:18px}
.ck-point{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:start;
  background:#fff;border:1px solid var(--ck-line);border-radius:14px;padding:30px 32px}
.ck-point__n{font-family:var(--f-num);font-weight:700;font-size:38px;line-height:1;color:var(--ck);opacity:.35}
.ck-point__t{font-size:clamp(19px,2.2vw,25px);color:var(--ck-deep)}
.ck-point__d{margin-top:12px;font-size:15.5px;color:var(--muted);line-height:1.95}
.ck-point__d strong{color:var(--ink)}

/* サポート */
.ck-sup{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ck-sup__i{background:#fff;border:1px solid var(--ck-line);border-radius:14px;padding:28px 26px;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.ck-sup__i:hover{transform:translateY(-4px);box-shadow:0 20px 44px -28px rgba(59,111,232,.45)}
.ck-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;
  background:var(--ck-soft);color:var(--ck-deep)}
.ck-ico svg{width:24px;height:24px}
.ck-sup__t{font-size:17.5px;color:var(--ck-deep);margin-top:16px}
.ck-sup__d{font-size:14.5px;color:var(--muted);margin-top:10px;line-height:1.9}

/* 中間CTA */
.ck-band{background:linear-gradient(150deg,var(--ck) 0%,var(--ck-deep) 100%);color:#fff;padding:44px 0}
.ck-band__in{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.ck-band__t{font-size:clamp(17px,2vw,22px);font-weight:700}
.ck-band__b{display:flex;gap:12px;flex-wrap:wrap}
.ck-band__b .btn{min-height:52px;font-size:15px}

/* 流れ */
.ck-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:center}
.ck-flow__s{background:#fff;border:1px solid var(--ck-line);border-radius:14px;padding:28px 24px;text-align:center}
.ck-flow__n{font-family:var(--f-num);font-weight:700;font-size:12.5px;letter-spacing:.14em;color:var(--ck)}
.ck-flow__t{font-size:18px;font-weight:700;color:var(--ck-deep);margin-top:10px}
.ck-flow__d{font-size:14px;color:var(--muted);margin-top:9px;line-height:1.85}
.ck-flow__ar{font-family:var(--f-num);font-size:22px;color:var(--ck);opacity:.5}

/* お客様の声 */
.ck-voice{background:#fff;border:1px solid var(--ck-line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.ck-voice__ph{width:100%;aspect-ratio:16/9;object-fit:cover}
.ck-voice__b{padding:24px 26px 28px}
.ck-voice__co{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:var(--ink);flex-wrap:wrap}
.ck-voice__co img{width:30px;height:30px;border-radius:7px;object-fit:contain;border:1px solid var(--line)}
.ck-voice__co small{font-weight:400;color:var(--muted);font-size:12.5px}
.ck-voice__t{font-size:18px;color:var(--ck-deep);margin-top:12px}
.ck-voice__d{font-size:14.5px;color:var(--muted);margin-top:10px;line-height:1.9}
.ck-uv{background:#fff;border:1px solid var(--ck-line);border-radius:14px;overflow:hidden}
.ck-uv img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ck-uv > div{padding:20px 22px 24px}
.ck-uv__who{font-size:12px;font-weight:700;color:var(--ck);letter-spacing:.03em}
.ck-uv__t{font-size:15.5px;color:var(--ink);margin-top:8px;line-height:1.6}
.ck-uv__d{font-size:13.5px;color:var(--muted);margin-top:9px;line-height:1.85}

.ck-faq summary::before{color:var(--ck)}
.ck-faq summary{color:var(--ck-deep)}
.ck-faq summary::after{color:var(--ck-deep)}

/* 最終フォーム */
.ck-last{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--ck) 0%,var(--ck-deep) 100%);color:#fff}
.ck-last h2{font-size:clamp(26px,3.2vw,38px);color:#fff;margin-top:14px}
.ck-last p{color:#dbe6fd}
.ck-last .lp-last__pts li::before{color:#bcd0fb}

@media screen and (max-width:1000px){
  .ck-sup{grid-template-columns:1fr 1fr}
  .ck-flow{grid-template-columns:1fr}
  .ck-flow__ar{transform:rotate(90deg);justify-self:center}
  .ck-point{grid-template-columns:1fr;gap:10px}
  .ck-band__in{flex-direction:column;align-items:flex-start}
}
@media (max-width:1000px){
  .ck-sup{grid-template-columns:1fr 1fr}
  .ck-flow{grid-template-columns:1fr}
  .ck-flow__ar{transform:rotate(90deg);justify-self:center}
  .ck-point{grid-template-columns:1fr;gap:10px}
}
@media screen and (max-width:640px){
  .ck-sup{grid-template-columns:1fr}
  .ck-fv{padding:38px 0 52px}
  .ck-blob{display:none}
  .ck-band__b .btn{width:100%}
}


/* お知らせ一覧の追加スタイル */
.tabs__c{margin-left:7px;font-family:var(--f-num);font-size:11px;opacity:.7}
.news__thumb{position:relative;overflow:hidden;display:block}
.news__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.news__thumb--none{display:grid;place-items:center;
  background:linear-gradient(140deg,var(--mist) 0%,var(--brand-soft) 100%)}
.news__fallback{width:56%!important;height:auto!important;object-fit:contain!important;opacity:.65}
.news__ex{display:block;margin-top:9px;font-size:13.5px;color:var(--muted);line-height:1.8}
.pager{display:flex;align-items:center;gap:8px;margin-top:42px;flex-wrap:wrap}
.pager a,.pager__cur{display:grid;place-items:center;min-width:44px;min-height:44px;border-radius:9px;
  font-family:var(--f-num);font-weight:700;font-size:14px;text-decoration:none;
  border:1px solid var(--line);color:var(--muted);background:#fff}
.pager a:hover{border-color:var(--brand);color:var(--deep)}
.pager__cur{background:var(--deep);color:#fff;border-color:var(--deep)}
.pager__dots{color:var(--muted);padding:0 4px}
.pager__next{min-width:auto!important;padding:0 18px}
.news-cta{margin-top:56px;background:var(--mist);border:1px solid var(--brand-soft);border-radius:14px;
  padding:30px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.news-cta__t{font-size:17px;font-weight:700;color:var(--deep)}
.news-cta__b{display:flex;gap:10px;flex-wrap:wrap}
.news-cta__b .btn{min-height:48px;font-size:14px;padding:0 20px}
.news__tag--news{color:var(--cta);border-color:#f3c9bd}
.phead__crumb a{color:var(--mid);text-decoration:none}
.phead__crumb a:hover{text-decoration:underline}
@media screen and (max-width:640px){
  .news-cta{flex-direction:column;align-items:flex-start}
  .news-cta__b .btn{width:100%}
}


/* ==========================================================
   既存サイトの造形をそのまま流用する
   - セクション見出し: 葉っぱ → 中央揃えの英字(Lato) → 日本語
     （本番 style.css の .m-title01 と同じ構造。色だけ AA へ補正）
   - ボタン: 左右に25pxの線が飛び出す丸型（.m-btn1）
   - ドット帯の背景（.m-bg__dotted）
   ========================================================== */

/* --- セクション見出しを既存の型に置き換える --- */
.sec-head{text-align:center;max-width:none;margin-bottom:56px;display:block}
.sec-head .eyebrow{
  display:block;justify-content:center;text-align:center;
  font-family:"Lato",var(--f-jp);font-weight:400;
  font-size:clamp(26px,3.4vw,42px);letter-spacing:.14em;line-height:1;
  color:var(--deep);text-transform:uppercase;margin-bottom:14px;gap:0;
}
.sec-head .eyebrow::before{content:none}
/* 葉っぱ */
.sec-head::before{
  content:"";display:block;width:52px;height:40px;margin:0 auto 12px;
  background:url("../img/renew/leaf.png") center/contain no-repeat;
}
.sec-head .sec-h{
  display:block;text-align:center;font-size:clamp(21px,2.5vw,30px);
  letter-spacing:.075em;color:var(--deep);margin-top:0;
}
.sec-head .ul{display:none}
.sec-head .sec-lead{margin:18px auto 0;text-align:center;max-width:38em}
/* 余白の大きな番号はやめ、葉っぱに統一する。
   以前の絶対配置（left:-104px）が残ると葉が左に飛び出すため、明示的に打ち消す。 */
.sec-head[data-no]{position:static}
.sec-head[data-no]::before{
  content:"";position:static;left:auto;top:auto;
  display:block;width:52px;height:40px;margin:0 auto 12px;
  background:url("../img/renew/leaf.png") center/contain no-repeat;
  font-size:0;color:transparent;opacity:1;
}
@media (max-width:1340px){ .sec-head[data-no]::before{display:block} }

/* --- ボタンを既存の .m-btn1 に寄せる（左右に線が飛び出す） --- */
.btn--primary,.btn--ghost,.btn--ck,.btn--ck-on,.btn--ck-ghost{position:relative;overflow:visible}
.btn--primary::before,.btn--primary::after,
.btn--ghost::before,.btn--ghost::after,
.btn--ck::before,.btn--ck::after{
  content:"";position:absolute;top:50%;width:25px;height:1px;transform:translateY(-50%);
}
.btn--primary::before,.btn--ck::before{left:-1px;background:#fff;opacity:.85}
.btn--primary::after,.btn--ck::after{right:-1px;background:#fff;opacity:.85}
.btn--primary::before,.btn--primary::after{background:var(--cta-on);opacity:.5}
.btn--ghost::before{left:-1px;background:var(--brand)}
.btn--ghost::after{right:-1px;background:var(--brand)}

/* --- ドット帯の背景（既存 .m-bg__dotted と同じ見せ方） --- */
.sec--dot{
  background-image:url("../img/renew/bg_dot.png"),url("../img/renew/bg_dot2.png");
  background-repeat:repeat-x,repeat-x;
  background-position:top,bottom;
  background-size:50px auto,50px auto;
  background-color:var(--mist-2);
}

/* --- 中央揃えに合わせた微調整 --- */
.sec-head + .cols,.sec-head + .news,.sec-head + .tw,.sec-head + .faq{margin-top:0}
@media screen and (max-width:640px){
  .sec-head{margin-bottom:38px}
  .sec-head::before{width:42px;height:32px}
}


/* ==========================================================
   仕上げ — 日本語組版と余白のリズムを整える
   ========================================================== */

/* --- 1) 日本語の折り返し ---
   見出しが「スポット採用か／ら、正式採用へ」のように語中で折れていた。
   auto-phrase は文節で折る（Chrome/Edge）。非対応環境は従来どおり。 */:where(body.renew) h1,:where(body.renew) h2,:where(body.renew) h3,:where(body.renew) h4,.sec-h,.h3,.card__t,.ck-point__t,.ck-sup__t,.ck-voice__t,.ck-uv__t,.lp-fv__h,.ck-fv__h,.fvx h1,.phead__jp,.flow4__t,.ck-flow__t,.news__t,.prob__t,.who__item strong,.faq summary,.cta h2,.lp-last h2,.ck-last h2{
  word-break:auto-phrase;
  line-break:strict;
  text-wrap:balance;
}
/* 本文は行末の孤立文字を避ける */:where(body.renew) p,:where(body.renew) li,:where(body.renew) dd,:where(body.renew) td,.card__d,.body,.sec-lead,.kpi__d,.ck-sup__d,.news__ex{
  line-break:strict;
  text-wrap:pretty;
}
/* 英数字と和文が混ざる箇所で不自然に切れないように */
.lp-fv__lead,.fv__lead,.sec-lead,.body{overflow-wrap:normal}

/* --- 2) 行長をそろえる（中央揃えの見出し配下） --- */
.sec-head .sec-lead{max-width:30em}
.sec-head .sec-h{max-width:18em;margin-inline:auto}
.lp-fv__h,.ck-fv__h{max-width:15em}
.h3{max-width:16em}
.body{max-width:31em}

/* --- 3) カードの高さと内部余白をそろえる --- */
.cols--2>*,.cols--3>*{height:100%}
.cols{align-items:stretch}
.card{justify-content:flex-start}
.card__d{margin-top:auto;padding-top:2px}
.ck-sup__i{display:flex;flex-direction:column}
.ck-sup__d{margin-top:auto;padding-top:10px}

/* --- 4) 数字ブロックの体裁 --- */
.kpi__i{display:flex;flex-direction:column}
.kpi__d{margin-top:auto;padding-top:10px;max-width:22em}
.kpi__v,.stat__n,.callout__n,.delta__to,.delta__from{font-feature-settings:"tnum" 1;letter-spacing:-.015em}
.stat{display:flex;flex-direction:column}
.stat__l{margin-top:auto;padding-top:8px}

/* --- 5) セクションの余白リズムを統一 --- */:where(body.renew) section{padding:104px 0}
.sec--mist,.sec--mist2,.sec--dot,.ck-mist{padding:104px 0}
.sec-head{margin-bottom:52px}
.sec-head + .cols,.sec-head + .ck-sup,.sec-head + .ck-points,
.sec-head + .flow4,.sec-head + .ck-flow,.sec-head + .kpi{margin-top:0}
.srcnote{margin-top:28px;max-width:64em}

/* --- 6) 表の読みやすさ --- */
.cmp tbody th,.cmp td{padding:16px 18px}
.cmp tbody tr:nth-child(even) th{background:#fff}
.cmp tbody tr:nth-child(even) td:not(.cmp__ours){background:var(--mist-2)}
.tw table th,.tw table td{word-break:auto-phrase;line-break:strict}

/* --- 7) 細部 --- */
.livelink{gap:12px}
.btn{letter-spacing:.02em}
.more{letter-spacing:.14em}
.eyebrow{white-space:nowrap}
.sec-head .eyebrow{white-space:normal}
.reason__t{word-break:auto-phrase}
.posi__list b{word-break:auto-phrase}
.fine{max-width:34em}
.annot{max-width:none;line-height:1.9}

/* --- 8) FVの詰まりを解消 --- */
/* 本番の資料請求フォームは MW WP Form の出力でモックより背が高い。
   center のままだと左カラムの本文が縦中央に浮き、上下に大きな余白が
   できるため、FV だけ start（543行の指定）に戻す。
   最終CTAはフォームの方が背が低く、中央ぞろえのままで破綻しない。 */
.lp-fv__in{align-items:start}
.lp-last__in{align-items:center}
.lp-fv__pts li{line-height:1.7}
.ck-pts li{line-height:1.7}

/* --- 9) スマホでの行長 --- */
@media screen and (max-width:640px){
  .sec-head .sec-h,.sec-head .sec-lead,.lp-fv__h,.ck-fv__h,.h3,.body{max-width:none}:where(body.renew) section,.sec--mist,.sec--mist2,.sec--dot,.ck-mist{padding:62px 0}
  .sec-head{margin-bottom:34px}
}

.m-nobr{display:inline}
@media screen and (max-width:640px){.m-nobr{display:none}}

/* ==========================================================
   仕上げ 第2回 — 行末の孤立文字と空白の解消
   ========================================================== */

/* リード文が「…仕組みをつ／くる。」と1文字だけ落ちていた。
   行長を広げ、手動の改行と併用して収まりを取る。 */
.sec-head .sec-lead{max-width:36em}
.kpi__d{max-width:none}
.stat__l{max-width:none}

/* 37.6% のブロック：数字が2行分をまたぐようにして、右下の空白をなくす */
.callout{grid-template-columns:auto minmax(0,1fr);gap:10px 30px;align-items:center;
  padding:30px 34px}
.callout__n{grid-row:1 / span 2;align-self:center}
.callout__t{grid-column:2;grid-row:1;margin:0}
.callout__d{grid-column:2;grid-row:2;margin-top:0}

/* 罫線の位置をそろえる */
.reasons{margin-top:8px}
.srcnote{max-width:none}

/* 数字と単位のベースラインをそろえる */
.kpi__v,.stat__n,.delta__to,.callout__n{display:flex;align-items:baseline;gap:2px;flex-wrap:wrap}
.kpi__v small,.stat__n small,.callout__n span{margin-left:0}

/* 見出し直下のリードを少し近づける */
.sec-head .sec-lead{margin-top:16px}


/* ==========================================================
   既存の本文組版に戻す
   本番 style.css の実値： .m-text01 line-height 2.769 /
   .m-text02 line-height 2.308・中央揃え / .m-title02 24px
   ========================================================== */
.m-text01{line-height:2.35;font-size:16px;color:var(--ink);margin-top:18px}
.m-text02{line-height:2.31;text-align:center;font-size:16px;color:var(--ink);max-width:none;margin-top:8px}
.m-title02{font-size:24px;line-height:1.58;letter-spacing:.075em;color:var(--deep);margin-bottom:15px}

/* 本文まわりの行間を既存の余裕に近づける */
.body,.sec-lead,.card__d,.ck-point__d,.ck-sup__d,.who__item span,.prob__d{line-height:2.1}
.faq__a{line-height:2.1}

/* ご挨拶：画像を右に大きく、文章は左（既存の greeting--elm と同じ） */
.greeting{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center}
.greeting__img{order:1;width:58%}
.greeting__img img{width:100%;height:auto;display:block}
.greeting__text{order:0;width:42%;padding-right:26px}

/* ロゴマーク：大きなロゴを中央に */
.sec-logo{padding:100px 0}
.logo--image{text-align:center;margin-bottom:34px}
.logo--image .cx-logo{width:min(520px,74%);height:auto;margin-inline:auto}

/* 会社概要の表 */
.tbl--company table{min-width:0}
.tbl--company th{width:26%;white-space:nowrap}
.list-office__name{font-weight:700;color:var(--ink);margin-top:16px}
.list-office__name:first-child{margin-top:0}
.list-office__address{margin-top:4px}
/* 地図の iframe は width="800" の属性を持つため、上限を決めないと
   セル幅を押し広げてスマホで横スクロールになる。 */
.list-office__map{max-width:100%;border:0}
.map-note{margin-top:8px;font-size:12.5px;color:var(--muted);padding-left:12px;border-left:2px solid var(--line)}

@media screen and (max-width:1000px){
  .greeting__img,.greeting__text{width:100%;padding-right:0}
  .greeting__img{order:0;margin-bottom:24px}
  .greeting__text{order:1}
  .sec-logo{padding:62px 0}
}
@media (max-width:1000px){
  .greeting__img,.greeting__text{width:100%;padding-right:0}
  .greeting__img{order:0;margin-bottom:24px}
  .greeting__text{order:1}
}
@media screen and (max-width:640px){
  .m-text01,.m-text02{line-height:2.1}
  .m-text02{text-align:left}
  .m-title02{font-size:20px}
}



/* ==========================================================
   既存 top.css / style.css の部品をそのまま再現
   .m-title01（葉＋英字42px）/ .sec-service__elm（46%:50% と
   #eff8fb の抜き背景）/ .m-btn1（左右に25pxの線が出る丸ボタン）
   ========================================================== */
.m-title01{text-align:center;line-height:1;margin-bottom:60px}
.m-title01::before{
  content:"";display:inline-block;width:50px;height:39px;margin-bottom:15px;
  background:url("../img/renew/leaf.png") center/contain no-repeat;
}
.m-title01__en{
  display:block;color:var(--deep);font-family:"Lato",var(--f-jp);
  font-size:42px;letter-spacing:.14em;margin-bottom:15px;line-height:1;
}
.m-title01__ja{display:block;letter-spacing:.08em;font-size:16px;font-weight:700;color:var(--ink)}
.m-title01__ja-big{display:block;color:var(--deep);font-size:30px;letter-spacing:.075em;font-weight:700}
.m-title01__logo{margin-top:20px;line-height:1}
.m-title01__logo img{height:auto;width:auto;max-width:240px;display:inline-block}

.sec-service{padding-top:100px}
.sec-service--last{padding-bottom:20px}
.sec-service__elm{
  display:flex;justify-content:space-between;align-items:center;
  position:relative;padding-top:80px;padding-bottom:80px;
}
.sec-service__elm::before{
  content:"";display:block;width:200%;height:100%;background-color:#eff8fb;
  position:absolute;left:-137%;top:0;z-index:0;
}
.sec-service__elm--reverse{flex-flow:row-reverse}
.sec-service__elm--reverse::before{left:auto;right:-137%}
.sec-service__elm > *{position:relative;z-index:1}
.sec-service__image{width:46%;order:1}
.sec-service__image img{
  width:100%;height:auto;display:block;border-radius:10px;
  box-shadow:0 20px 48px -30px rgba(15,90,117,.5);
}
.sec-service__text{width:50%}
.sec-service__text .m-title02{margin-bottom:15px}

/* 既存のボタン。白文字のコントラストだけ AA を満たす濃さに寄せる */
.m-btn1{
  display:inline-block;position:relative;min-width:270px;padding:13px 15px;
  background-color:var(--deep);border:1px solid var(--deep);color:#fff;
  font-family:"Lato",var(--f-jp);font-size:15px;letter-spacing:.08em;
  text-align:center;border-radius:30px;cursor:pointer;
  transition:background-color .3s ease,color .3s ease,letter-spacing .3s ease;
}
.m-btn1::before,.m-btn1::after{
  content:"";display:inline-block;width:25px;height:1px;background-color:currentColor;
  position:absolute;top:50%;transform:translateY(-50%);
}
.m-btn1::before{left:-1px}
.m-btn1::after{right:-1px}
.m-btn1:hover,.m-btn1:focus-visible{background-color:#fff;color:var(--deep);letter-spacing:.18em}
.m-btn1--wrap{margin-top:50px;text-align:center}
.m-btn1--wrap2{margin-top:30px}

/* 既存のお知らせ一覧（3カラム・画像は 300×210） */
.m-newslist{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.m-newslist__item{display:block;color:inherit;
  /* style.css の旧レイアウト（width:30%/margin-right:5%/margin-bottom:70px）が
     残ると、グリッドの1カラム350pxに対して幅105pxまで縮んでしまう。 */
  width:auto;margin:0}
.m-newslist__item-image{
  display:block;aspect-ratio:300/210;overflow:hidden;border-radius:6px;background:#fff;
  /* 旧CSSの padding-top:70%（擬似アスペクト比）を解除する。
     残すと内容高さが0になり、中のロゴが潰れる。 */
  padding-top:0;
}
.m-newslist__item-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;
  /* 旧CSSの position:absolute;top:0;left:0 を解除。place-items:center が効かなくなるため。 */
  position:static}
.m-newslist__item:hover .m-newslist__item-image img{transform:scale(1.04)}
.m-newslist__item-image--none{display:grid;place-items:center;border:1px solid var(--line)}
.m-newslist__item-image--none img{width:62%;height:auto;object-fit:contain;opacity:.62}
.m-newslist__item-info{display:block;padding-top:14px}
.m-newslist__heading{display:flex;align-items:center;gap:12px;font-family:"Lato",var(--f-jp);
  font-size:13px;color:var(--muted);letter-spacing:.06em}
.m-newslist__text{display:block;margin-top:8px;font-size:15px;line-height:1.8;color:var(--ink)}
.m-newslist__item:hover .m-newslist__text{color:var(--deep)}

@media screen and (max-width:1000px){
  .sec-service{padding-top:70px}
  .sec-service__elm{display:block;padding-top:44px;padding-bottom:44px}
  .sec-service__image,.sec-service__text{width:100%}
  .sec-service__text{margin-top:26px}
  .m-newslist{grid-template-columns:1fr 1fr;gap:24px}
}
@media screen and (max-width:640px){
  .m-title01{margin-bottom:38px}
  .m-title01__en{font-size:30px}
  .m-title01__ja-big{font-size:22px}
  .m-title01::before{width:40px;height:31px}
  .m-newslist{grid-template-columns:1fr;gap:22px}
  .m-newslist__item{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:start}
  /* style.css の旧SP指定（画像 width:100px/height:70px、本文 width:calc(100% - 120px)）
     が残ると、画像がグリッドの列からはみ出して本文に重なり、本文の幅も
     120px 削られてしまう。列幅に従わせる。 */
  .m-newslist__item-image{width:auto;height:auto}
  .m-newslist__item-info{padding-top:0;width:auto}
  .m-btn1{min-width:0;width:100%;max-width:270px}
}


/* ==========================================================
   仕上げ：既存サイトの部品感に全ページを揃える
   ========================================================== */:where(body.renew) a{text-decoration:none;color:inherit}
.m-newslist__item,.m-newslist__item *{text-decoration:none}

/* ロゴを見出しに置くとき、descender が切れないように */
.m-title01__logo img{display:block;margin:0 auto;max-height:46px;object-fit:contain}

/* 画像未設定のサムネはロゴを薄い水色地に置いて、空欄に見えないようにする */
.m-newslist__item-image--none,
.news__thumb--none{background:#eff8fb;border:1px solid #dcecf3}
.news__fallback{opacity:.7}

/* ボタンは既存の .m-btn1 と同じ寸法・字送りに揃える
   （角丸30px・最小幅270px・Lato・左右に25pxの線） */
.btn{min-height:50px;padding:0 26px;font-size:15px;font-weight:400;
     font-family:"Lato",var(--f-jp);letter-spacing:.08em;border-radius:30px;
     min-width:270px;border-width:1px}
.btn--primary{background:var(--cta);color:var(--cta-on);border-color:var(--cta)}
.btn--primary:hover{background:#fff;color:var(--cta-dark);border-color:var(--cta-dark);
                    transform:none;letter-spacing:.16em}
.btn--ghost{background:#fff;color:var(--deep);border-color:var(--deep)}
.btn--ghost:hover{background:var(--deep);color:#fff;transform:none;letter-spacing:.16em}
.btn--ck:hover,.btn--ck-on:hover,.btn--ck-ghost:hover{transform:none;letter-spacing:.16em}
.btn__ar{display:none}

@media screen and (max-width:640px){
  .btn{min-width:0;width:100%}
}


/* 既存の .m-title02 は下に 80px の細い罫が入る */
.m-title02{position:relative}
.m-title02::after{content:"";display:block;width:80px;height:1px;background-color:var(--ink);
  margin-top:15px;opacity:.55}
/* 見出しの日本語は既存どおり太らせない */
.m-title01__ja{font-weight:400}
/* ヘッダーの CTA だけは既存どおり小ぶりのまま */
.hdr .btn,.hdr__cta{min-width:0}


/* text-wrap:balance を指定すると word-break:auto-phrase が無効になるため、
   カード見出しなど「文節で折りたい」ものは balance を外す。
   （「第25回おかや／まユニバーサル…」のような語中改行を防ぐ） */
.card__t,.ck-point__t,.ck-sup__t,.ck-voice__t,.ck-uv__t,.news__t,
.prob__t,.who__item strong,.flow4__t,.ck-flow__t,.faq summary,.m-newslist__text{
  text-wrap:wrap;word-break:auto-phrase;line-break:strict;
}
/* 中央揃えの見出しの下に置く本文は、同じ軸で中央に置く */
.sec-head{margin-inline:auto}
.body--center{max-width:44em;margin-inline:auto;text-align:left}


/* --- スマホ表示の詰め --- */
@media screen and (max-width:1000px){
  /* 抜き背景がステージの外へ出ないように、セクション内の全幅バンドにする */
  .sec-service__elm::before{left:-24px;right:-24px;width:auto}
  .sec-service__elm--reverse::before{left:-24px;right:-24px}
}
@media screen and (max-width:760px){
  /* ロゴと CTA が重ならないように、ナビは畳んで CTA を小さくする */
  .hdr__in{gap:10px}
  .hdr__nav{display:none}
  .hdr__cta{margin-left:auto}
  .hdr__cta .btn{min-height:40px;padding:0 14px;font-size:13px;letter-spacing:.02em;white-space:nowrap}
  .hdr__cta .btn::before,.hdr__cta .btn::after{display:none}
  .hdr__brand .cx-logo{max-width:132px}
}


/* ==========================================================
   v5 の調整
   ========================================================== */

/* --- 1) CTA まわりの飾り線をすべて外す（アイコンの ::before は残す） --- */
.btn:not(.btn--mail):not(.btn--dl):not(.btn--ext)::before,
.btn::after,
.m-btn1::before,.m-btn1::after{content:none}

/* --- 2) FV の強調は既存（.mg-fv__title span）と同じく行を変えて色で示す --- */
.lp-fv__h span,.ck-fv__h span,.fvx h1 span.em{
  display:block;color:var(--deep);background:none;
}
.lp-fv__h em,.ck-fv__h em{font-style:normal;background:none}

/* --- 3) 葉っぱの下の英字は、その下の日本語より控えめに --- */
.sec-head .eyebrow,
.m-title01__en{
  font-family:"Lato",var(--f-jp);font-weight:400;
  font-size:clamp(12px,1.15vw,14px);letter-spacing:.28em;
  color:var(--mid);margin-bottom:10px;line-height:1.4;
}
.sec-head .sec-h{
  font-size:clamp(23px,2.9vw,34px);letter-spacing:.06em;
  color:var(--deep);line-height:1.55;
}
.m-title01__ja-big{font-size:clamp(23px,2.9vw,34px);letter-spacing:.06em;line-height:1.55}
.m-title01__ja{font-size:clamp(20px,2.4vw,26px);font-weight:700;color:var(--deep);
  letter-spacing:.06em;line-height:1.55}
.m-title01{line-height:1.2}
.m-title01__logo{margin-top:14px}
.m-title01__logo img{max-height:52px}

/* --- 4) CTA の背景は BPO ページと同じグラデーションで統一する --- */
.cta,.lp-last,.ck-last,.lp-form,.ck-form,.sec-medicalgate--cta{
  background:linear-gradient(135deg,rgba(69,185,223,.12),rgba(241,139,115,.12));
  color:var(--ink);
}
.cta::before,.cta::after,.lp-last::before,.lp-last::after,
.ck-last::before,.ck-last::after{content:none}
.lp-last h2,.ck-last h2,.cta h2,
.lp-last p,.ck-last p,.cta p,
.lp-last li,.ck-last li,
.lp-last__tel,.lp-last__tel span,.lp-last__tel small{color:var(--ink)}
.lp-last h2,.ck-last h2,.cta h2{color:var(--deep)}
.lp-last__pts li::before,.ck-last li::before{background:var(--brand)}
/* 反転前提だったボタンを、明るい面の上で読める配色に戻す */
.lp-last .btn--ghost,.ck-last .btn--ghost,.cta .btn--ghost{
  background:#fff;color:var(--deep);border-color:var(--deep)}

/* 資料請求フォームは白いカードのまま（読みやすさ優先） */
.lp-form,.ck-form{background:#fff}

/* --- 5) フッターを既存サイトの型に（白地・中央揃え・上に波） --- */
.l-footer{position:relative;text-align:center;background:#fff;color:var(--ink);
  padding:0 0 60px;margin-top:120px}
.l-footer__wave{
  height:240px;width:100%;
  background:url("../img/renew/bg_wave.jpg") top center/100% 240px no-repeat;
}
.l-footer__logo{margin:0 auto 18px}
.l-footer__logo .cx-logo{width:226px;height:auto;margin-inline:auto}
.l-footer__navi{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  list-style:none;margin:0;padding:0}
.l-footer__navi li{padding:20px 20px 10px;position:relative}
.l-footer__navi li::after{content:"|";position:absolute;right:0;color:var(--line)}
.l-footer__navi li:last-of-type::after{content:none}
.l-footer__navi button{font-family:var(--f-jp);font-size:15px;letter-spacing:.05em;
  color:var(--ink);background:none;border:0;cursor:pointer;padding:0}
.l-footer__navi button:hover{color:var(--deep);text-decoration:underline}
.l-footer__navi2{display:flex;justify-content:center;list-style:none;margin:0;
  padding:0 0 20px}
.l-footer__navi2 li{padding:0 20px}
.l-footer__navi2 a{font-size:14px;letter-spacing:.05em;border-bottom:1px solid var(--ink)}
.l-footer__navi2 a:hover{border-bottom-color:transparent}
.l-footer__offices{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 50px;
  list-style:none;margin:0;padding:0}
.l-footer__office{line-height:1.9;font-size:14px;color:var(--muted)}
.l-footer__office-name{display:block;font-weight:700;letter-spacing:.08em;color:var(--ink)}
.l-footer__copy{padding-top:26px}
.l-footer__copy small{font-size:12px;letter-spacing:.2em;color:var(--muted)}

/* --- 6) スマホは画面下に CTA を固定する --- */
.sp-cta{display:none}
/* CTAの高さ。フッター下端の余白と、ページトップボタンの逃がし位置に使う。
   実測 88px（padding 8px ＋ .sp-cta__note 11.5px×1.5 ＋ 余白 6px
   ＋ ボタン min-height 48px ＋ padding 8px）。 */
:root{--sp-cta-h:0px}
/* sticky ではなく fixed で画面下に固定する。
   本番は luxy.js がページ本文を position:fixed の #luxy で包むため、
   body の通常フローには「ヘッダー」と「.sp-cta」しか残らない。
   スクロールする親を持てない sticky は貼り付き先が無く、通常フローの
   位置（＝ヘッダー直下）に居座って本文を 88px 押し下げてしまう。
   fixed なら通常フローから外れるので、押し下げも起きない。
   なお表示（display/padding/内部レイアウト）は後段の
   「5) スマホ固定CTA」側が持つ。ここでは位置決めだけを行う。 */
@media screen and (max-width:760px){
  :root{--sp-cta-h:calc(88px + env(safe-area-inset-bottom))}
  /* CTAを出さないページ（お問い合わせ3画面・資料請求）では余白を戻す。
     :has() 非対応の端末では余白が残るだけで、表示は崩れない。 */
  @supports selector(:has(*)){
    body:not(:has(.sp-cta)){--sp-cta-h:0px}
  }
  .sp-cta{
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
    border-top:1px solid var(--line);
  }
  /* ページトップボタンも position:fixed。CTAの上へ逃がす */
  .l-pagetop{bottom:calc(20px + var(--sp-cta-h))}
  .sp-cta__b{
    min-height:48px;border-radius:30px;font-size:14.5px;font-weight:700;
    font-family:var(--f-jp);cursor:pointer;border:1px solid transparent;
  }
  .sp-cta__b--sub{background:#fff;color:var(--deep);border-color:var(--deep)}
  .sp-cta__b--main{background:var(--cta);color:var(--cta-on);border-color:var(--cta)}
  /* CTAはフッターに重なるので、その分だけ下端に余白を足して
     コピーライトまで読めるようにする */
  .l-footer{margin-top:80px;padding-bottom:calc(24px + var(--sp-cta-h))}
  .l-footer__wave{height:150px;background-size:100% 150px}
  .l-footer__navi li{padding:12px 14px 6px}
  .l-footer__offices{gap:14px}
}

/* --- 7) nurse-gate の比較表は列幅を均等にする --- */
.cmp table{table-layout:fixed;width:100%}
.cmp thead th:first-child,.cmp tbody th{width:22%}
.cmp thead th:not(:first-child),.cmp td{width:26%}
.cmp thead th,.cmp tbody th,.cmp td{word-break:auto-phrase;line-break:strict}


/* CTA を明るいグラデーションに変えたので、白背景前提だった文字色を
   すべて指定し直す（元の指定はセレクタが強いので同じ強さで上書きする） */
.lp-last > .wrap > div > p,
.lp-last__in > div > p,
.ck-last > .wrap > div > p,
.ck-last p{color:var(--ink)}
.lp-last__pts li,.ck-last .lp-last__pts li{color:var(--ink);font-size:15px}
.lp-last__pts li::before,.ck-last .lp-last__pts li::before{
  content:"✓";background:none;color:var(--deep);font-weight:700}
.lp-last__tel{color:var(--ink)}
.lp-last__tel span{color:var(--mid)}
.lp-last__tel small{color:var(--muted)}
.lp-form--dark{background:#fff}
.lp-form,.ck-form{background:#fff;border:1px solid var(--line)}
.ck-form{border-color:var(--ck-line,var(--line))}


/* 併用パネルも既存のトンマナ（明るい面）に合わせる */
.scope{background:linear-gradient(135deg,rgba(69,185,223,.12),rgba(241,139,115,.12));
  color:var(--ink);border:1px solid var(--line)}
.scope h2{color:var(--deep)}
.scope p{color:var(--ink)}
.scope .eyebrow{color:var(--mid)}
.scope__col,.scope .card,.scope > div > div{background:rgba(255,255,255,.72)}
.scope li{color:var(--ink)}
.scope small{color:var(--muted)}


/* 併用パネルの中のカードも明るい面に合わせる */
.scope__card{background:rgba(255,255,255,.78);border:1px solid var(--line)}
.scope__card h4{color:var(--deep)}
.scope__card li{color:var(--ink)}
.scope__card .tag{color:var(--mid);background:none}


/* ==========================================================
   v6
   ========================================================== */

/* --- 1) FV のマーカー装飾を戻す --- */
.lp-fv__h em,.ck-fv__h em{
  font-style:normal;display:inline;color:inherit;
  background-image:linear-gradient(transparent 62%,rgba(69,185,223,.34) 62%);
  background-repeat:no-repeat;
}
.lp-fv__h span,.ck-fv__h span{display:inline;color:inherit;background:none}

/* --- 2) トップFV：既存サイトと同じ、下線が伸びるモーション ---
   本番 top.css の実装をそのまま移植（白4px / width 0→15vw・20vw /
   遅延 1.5s・1.8s / 0.5s linear）。 */
.mv-copy__l1,.mv-copy__l2{position:relative;overflow:hidden;padding-bottom:5px}
.mv-copy__l1::after,.mv-copy__l2::after{
  content:"";display:block;position:absolute;left:0;bottom:0;
  width:0;height:4px;background-color:#fff;
}
.mv-copy__l2::after{left:clamp(14px,3vw,44px)}
.js-motion .mv-copy__l1::after{animation:mvLine1 .5s linear 1.5s forwards}
.js-motion .mv-copy__l2::after{animation:mvLine2 .5s linear 1.8s forwards}
@keyframes mvLine1{0%{width:0}100%{width:clamp(200px,26vw,330px)}}
@keyframes mvLine2{0%{width:0}100%{width:clamp(200px,26vw,330px)}}
@media screen and (max-width:640px){
  @keyframes mvLine1{0%{width:0}100%{width:51vw}}
  @keyframes mvLine2{0%{width:0}100%{width:51vw}}
}
@media (prefers-reduced-motion:reduce){
  .mv-copy__l1::after,.mv-copy__l2::after{width:clamp(200px,26vw,330px);animation:none}
}

/* --- 3) CTA ボタンの塗りをグラデーションに ---
   BPO ページの背景と同じ 135deg・水色→サーモンの軸。
   文字は濃紺（#16293a）。水色側 6.6:1 / サーモン側 6.15:1 で AA を満たす。 */
.btn--primary,.m-btn1,.sp-cta__b--main,.btn--ck,.btn--ck-on{
  background-image:linear-gradient(135deg,#5cc2e5 0%,#f4a189 58%,#f18b73 100%);
  background-color:var(--cta);
  color:var(--cta-on);border-color:transparent;
  box-shadow:0 10px 24px -14px rgba(224,120,95,.85);
}
.btn--primary:hover,.m-btn1:hover,.sp-cta__b--main:hover,
.btn--ck:hover,.btn--ck-on:hover,
.btn--primary:focus-visible,.m-btn1:focus-visible{
  background-image:linear-gradient(135deg,#49b6de 0%,#f2926f 58%,#ea7f66 100%);
  color:var(--cta-on);box-shadow:0 14px 30px -14px rgba(224,120,95,.95);
  transform:translateY(-1px);letter-spacing:.10em;
}
.m-btn1{font-weight:700}
/* ボタン内の補足（マイクロコピー） */
.btn small,.m-btn1 small{
  display:block;font-family:var(--f-jp);font-size:11.5px;font-weight:400;
  letter-spacing:.02em;opacity:.82;margin-top:2px;line-height:1.4;
}
.btn{flex-direction:column;gap:0;line-height:1.35;padding-top:9px;padding-bottom:9px}

/* --- 4) CTA のマイクロコピー --- */
.micro-pts{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:8px 20px;justify-content:center}
.micro-pts li{position:relative;padding-left:22px;font-size:14px;color:var(--ink)}
.micro-pts li::before{content:"✓";position:absolute;left:0;top:0;color:var(--deep);font-weight:700}
.cta .micro-pts{justify-content:flex-start}
.micro-after{margin-top:16px;font-size:13px;color:var(--muted);line-height:1.9}
.micro-after span{display:inline-block}
.micro-tel{font-family:var(--f-num);font-weight:700;font-size:15px;color:var(--deep);
  border-bottom:1px solid currentColor}
.micro-proof{margin-top:20px;padding:14px 16px;border-radius:10px;
  background:rgba(255,255,255,.66);border:1px solid var(--line);
  font-size:13.5px;line-height:1.9;color:var(--ink);max-width:30em}
.micro-proof b{color:var(--deep);font-size:15px}
.micro-proof--ck{max-width:26em}

/* フォームの3ステップ（ゴール勾配：残り工程を見せて離脱を減らす） */
.lp-form__steps{display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:12px;font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.lp-form__steps span{display:inline-grid;place-items:center;width:17px;height:17px;
  border-radius:50%;background:var(--brand);color:#fff;font-family:var(--f-num);
  font-size:10.5px;font-weight:700;margin-right:3px}
.lp-form__steps i{font-style:normal;color:var(--line)}

/* --- 5) スマホ固定CTA ---
   画面下への固定（position:fixed）は前段の「6) スマホは画面下に CTA を
   固定する」が持つ。ここは中身の並びと余白だけを決める。
   padding を変えると高さが変わるので、変えたときは --sp-cta-h も直す。 */
@media screen and (max-width:760px){
  .sp-cta{display:block;padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
  .sp-cta__note{font-size:11px;color:var(--muted);text-align:center;margin-bottom:6px;
    line-height:1.5}
  .sp-cta__row{display:grid;grid-template-columns:1fr 1.35fr;gap:8px}
  .sp-cta__b--main{box-shadow:0 8px 18px -12px rgba(224,120,95,.9)}
}


/* 既存フッターの「首都岡山」バナー */
.l-footer__okayama{margin:26px auto 0}
.l-footer__okayama img{width:200px;height:auto;margin-inline:auto}
@media screen and (max-width:760px){ .l-footer__okayama{margin-top:18px} }


/* 目立つ CTA は画面にひとつだけ（フォン・レストルフ効果）。
   ヘッダーの常設ボタンは影を落とさず、本文中の CTA を主役にする。 */
.hdr__cta .btn--primary{box-shadow:none}
.hdr__cta .btn--primary:hover{transform:none;box-shadow:none}


/* ==========================================================
   v7 — CTAボタンを淡いグラデーションに／数値とバーに動きを足す
   ========================================================== */

/* --- 1) CTA ボタンの塗りを「まず、話を聞かせてください。」の面と同じ淡さに ---
   面と同じ色だと沈むので、同じ軸のまま少しだけ濃度を上げ、
   輪郭（枠線）と落ち影でボタンだと分かるようにする。 */
.btn--primary,.m-btn1,.sp-cta__b--main,.btn--ck,.btn--ck-on{
  background-image:linear-gradient(135deg,rgba(69,185,223,.24) 0%,rgba(241,139,115,.30) 100%);
  background-color:#fff;
  color:var(--ink);
  border:1px solid rgba(241,139,115,.62);
  box-shadow:0 8px 20px -14px rgba(31,125,156,.55);
}
.btn--primary:hover,.m-btn1:hover,.sp-cta__b--main:hover,
.btn--ck:hover,.btn--ck-on:hover,
.btn--primary:focus-visible,.m-btn1:focus-visible{
  background-image:linear-gradient(135deg,rgba(69,185,223,.38) 0%,rgba(241,139,115,.46) 100%);
  border-color:rgba(241,139,115,.9);
  color:var(--ink);
  box-shadow:0 12px 26px -14px rgba(31,125,156,.65);
  transform:translateY(-1px);letter-spacing:.10em;
}
.hdr__cta .btn--primary{box-shadow:none}
.hdr__cta .btn--primary:hover{transform:none;box-shadow:none}

/* --- 2) 廃止理由の内訳バーを 0 から伸ばす --- */
.reason__bar{width:var(--w)}
.js-motion [data-reveal] .reason__bar{width:0}
.js-motion [data-reveal].is-in .reason__bar{
  animation:barGrow .95s var(--ease) both;
  animation-delay:calc(var(--bd,0ms) + 120ms);
}
@keyframes barGrow{from{width:0}to{width:var(--w)}}
@media (prefers-reduced-motion:reduce){
  .reason__bar{width:var(--w)!important;animation:none!important}
}
/* 数字は tabular-nums で桁が動いても行が揺れないようにする */
.reason__n,.kpi__v,.stat__n,.delta__from,.delta__to,.callout__n{
  font-variant-numeric:tabular-nums;
}

/* --- 3) 「541 → 886」の矢印を、数字が動いたあとに伸ばす --- */
.delta__ar{display:inline-block;transform-origin:left center}
.js-motion [data-reveal] .delta__ar{opacity:0;transform:translateX(-6px)}
.js-motion [data-reveal].is-in .delta__ar{animation:arIn .5s var(--ease) .35s both}
@keyframes arIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
/* 増加した側を少し強調する */
.delta__to{position:relative}

/* --- 4) 比較表：行が上から順に入る --- */
.js-motion .cmp[data-reveal] tbody tr{opacity:0}
.js-motion .cmp[data-reveal].is-in tbody tr{animation:rowIn .5s var(--ease) both}
.js-motion .cmp[data-reveal].is-in tbody tr:nth-child(1){animation-delay:.05s}
.js-motion .cmp[data-reveal].is-in tbody tr:nth-child(2){animation-delay:.13s}
.js-motion .cmp[data-reveal].is-in tbody tr:nth-child(3){animation-delay:.21s}
.js-motion .cmp[data-reveal].is-in tbody tr:nth-child(4){animation-delay:.29s}
.js-motion .cmp[data-reveal].is-in tbody tr:nth-child(5){animation-delay:.37s}
.js-motion .cmp[data-reveal].is-in tbody tr:nth-child(6){animation-delay:.45s}
.js-motion .cmp[data-reveal].is-in tbody tr:nth-child(7){animation-delay:.53s}
.js-motion .cmp[data-reveal].is-in tbody tr:nth-child(8){animation-delay:.61s}
@keyframes rowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .cmp tbody tr{opacity:1!important;animation:none!important} }

/* --- 5) 導入の流れ：番号が順に灯る --- */
.flow4__n,.ck-flow__n{transition:none}
.js-motion .flow4__s[data-reveal] .flow4__n,
.js-motion .ck-flow__s[data-reveal] .ck-flow__n{transform:scale(.82);opacity:.35}
.js-motion .flow4__s[data-reveal].is-in .flow4__n,
.js-motion .ck-flow__s[data-reveal].is-in .ck-flow__n{
  animation:numPop .55s var(--ease) both;animation-delay:calc(var(--d,0ms) + 160ms);
}
@keyframes numPop{
  0%{transform:scale(.82);opacity:.35}
  60%{transform:scale(1.06);opacity:1}
  100%{transform:scale(1);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .flow4__n,.ck-flow__n{transform:none!important;opacity:1!important;animation:none!important}
}


/* ==========================================================
   v8 — ヘッダー／フッター
   ========================================================== */

/* --- ヘッダー --- */
.hdr__in{gap:20px}
.hdr__nav{gap:20px;align-items:flex-end}
.hdr__nav a,.hdr__nav button{display:flex;flex-direction:column;align-items:center;gap:1px;
  line-height:1.3;padding-bottom:8px}
/* サービス名の下に役割を小さく添える。3事業の違いが一目で分かるようにする */
.hdr__sub{font-size:9.5px;letter-spacing:.18em;color:var(--muted);font-weight:400}
.hdr__nav a[aria-current="page"] .hdr__sub,.hdr__nav button[aria-current="page"] .hdr__sub{color:var(--mid)}
.hdr__nav .newtag{position:absolute;top:-6px;right:-16px}
.hdr__nav a,.hdr__nav button{position:relative}

.hdr__cta{display:flex;align-items:center;gap:12px;margin-left:auto}
.hdr__tel{display:none;flex-direction:column;line-height:1.25;text-align:right;
  padding-right:12px;border-right:1px solid var(--line)}
.hdr__tel-k{font-size:9.5px;letter-spacing:.18em;color:var(--muted)}
.hdr__tel-n{font-family:var(--f-num);font-weight:700;font-size:19px;color:var(--deep);
  letter-spacing:.02em}
.hdr__tel-t{font-size:10px;color:var(--muted)}
@media screen and (min-width:1180px){ .hdr__tel{display:flex} }
.hdr__cta .btn{min-width:0;min-height:42px;padding:0 18px;font-size:13.5px}
.hdr__b2{display:none}
@media screen and (min-width:1060px){ .hdr__b2{display:inline-flex} }


/* スクロールで少しだけ薄く・低くする（存在は残しつつ本文を広く見せる） */
.hdr{transition:box-shadow .3s var(--ease)}
.hdr__in{transition:height .3s var(--ease)}
.is-scrolled .hdr{box-shadow:0 6px 20px -16px rgba(15,90,117,.55)}
.is-scrolled .hdr__in{height:62px}
.is-scrolled .hdr__brand .cx-logo{width:148px}
.hdr__brand .cx-logo{transition:width .3s var(--ease)}

@media screen and (max-width:760px){
  .hdr__tel{display:none}
  .hdr__b2{display:none}
  .hdr__cta{gap:8px}
}

/* --- フッター --- */
.l-footer__lead{margin:6px auto 0;font-size:14px;color:var(--muted);letter-spacing:.04em}
.l-footer__contact{display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:10px 18px;margin:6px 0 22px}
.l-footer__tel{display:inline-flex;align-items:baseline;gap:8px;
  font-family:var(--f-num);font-weight:700;font-size:26px;color:var(--deep);
  letter-spacing:.02em}
.l-footer__tel span{font-size:10.5px;letter-spacing:.18em;color:var(--mid)}
.l-footer__tel:hover{text-decoration:underline}
.l-footer__hours{font-size:12.5px;color:var(--muted)}
.l-footer__btn{min-width:0;min-height:46px;padding:0 26px;font-size:14px}
.l-footer__lic{margin-top:18px;font-size:11.5px;color:var(--muted);letter-spacing:.03em}
.l-footer__copy{padding-top:10px}
@media screen and (max-width:760px){
  .l-footer__lead{font-size:13px;padding:0 18px}
  .l-footer__contact{flex-direction:column;gap:6px;margin-bottom:18px}
  .l-footer__tel{font-size:24px}
  .l-footer__btn{width:min(280px,86%)}
  .l-footer__lic{padding:0 18px;line-height:1.7}
}

/* --- ボタンの主従を分ける（淡い塗りでも一次と二次が見分けられるように） --- */
.btn--ghost{background-image:none;background-color:#fff;border:1px solid var(--line);
  color:var(--deep);box-shadow:none}
.btn--ghost:hover{background-color:var(--mist-2);border-color:var(--brand);
  color:var(--deep);box-shadow:none;transform:none;letter-spacing:.10em}


/* フッターの連絡先ブロックの詰め */
.l-footer__contact{margin:14px 0 26px;gap:12px 22px}
.l-footer__btn{padding:0 30px;min-height:50px}
.l-footer__navi{margin-top:6px}
.l-footer__navi2{padding-bottom:26px}
.l-footer__offices{padding-top:4px}
.l-footer__okayama{margin-top:30px}

/* ヘッダー：ナビが詰まりすぎないように調整 */
@media screen and (max-width:1180px){ .hdr__nav{gap:15px} .hdr__nav a,.hdr__nav button{font-size:13px} }
@media screen and (max-width:1060px){ .hdr__sub{display:none} }


/* 資料請求ページ */
.doc-list{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.doc-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;
  padding:16px 18px;border:1px solid var(--line);border-radius:10px;background:#fff}
.doc-list__ttl{font-weight:700;font-size:15.5px;color:var(--ink)}
.doc-list__meta{font-family:var(--f-num);font-size:11.5px;letter-spacing:.08em;color:var(--mid);
  align-self:center;white-space:nowrap}
.doc-list__d{grid-column:1/-1;font-size:13px;line-height:1.85;color:var(--muted)}
.doc-pts{margin-top:22px;justify-content:flex-start}
.doc-pts li{font-size:13px;color:var(--muted)}
@media screen and (max-width:640px){
  .doc-list li{grid-template-columns:1fr}
  .doc-list__meta{justify-self:start}
}


/* ==========================================================
   v9 — CTA ボタンの塗り
   BtoB SaaS の主要サイト（timee / SmartHR / カイポケ 等）はいずれも
   「ブランド色の単色ベタ・ラベルは太め・面積は大きめ・影は控えめ」。
   グラデーションはやめ、既存サイトの #f18b73 をそのまま単色で使う。
   文字色は濃紺（#16293a）。#f18b73 の上で 6.15:1 で AA を満たす。
   ========================================================== */
.btn--primary,.m-btn1,.sp-cta__b--main,.btn--ck,.btn--ck-on{
  background-image:none;
  background-color:var(--cta);
  color:var(--cta-on);
  border:1px solid var(--cta);
  font-weight:700;
  box-shadow:0 6px 16px -10px rgba(200,100,75,.7);
}
.btn--primary:hover,.m-btn1:hover,.sp-cta__b--main:hover,
.btn--ck:hover,.btn--ck-on:hover,
.btn--primary:focus-visible,.m-btn1:focus-visible{
  background-image:none;
  background-color:#e5734f;      /* 濃紺文字で 4.88:1 */
  border-color:#e5734f;
  color:var(--cta-on);
  box-shadow:0 10px 22px -10px rgba(200,100,75,.8);
  transform:translateY(-1px);
  letter-spacing:.08em;
}
/* 一次CTAは面積で主役にする */
.cta .btn--primary,.lp-form .btn--primary,.form .btn--primary,
.ck-form .btn--ck,.l-footer__btn{min-height:56px}
.hdr__cta .btn--primary{min-height:42px;box-shadow:none;font-weight:700}
.hdr__cta .btn--primary:hover{transform:none;box-shadow:none}

/* 二次CTAは白ベタ＋細い枠。一次と役割が混ざらないようにする */
.btn--ghost{background:#fff;border:1px solid var(--line);color:var(--deep);
  font-weight:500;box-shadow:none}
.btn--ghost:hover{background:var(--mist-2);border-color:var(--brand);color:var(--deep);
  box-shadow:none;transform:none;letter-spacing:.08em}
.sp-cta__b--sub{background:#fff;border:1px solid var(--line);color:var(--deep)}


/* ==========================================================
   v10 — 問い合わせはメール（フォーム）を主導線にする
   電話番号は記載するが、視覚的な優先度は落とす
   ========================================================== */
.hdr__tel,.hdr__tel-k,.hdr__tel-n,.hdr__tel-t{display:none!important}
.micro-tel{font-family:inherit;font-weight:400;font-size:inherit;color:var(--muted);
  border-bottom:0}
.quiet-tel{margin-top:16px;font-size:12.5px;color:var(--muted);letter-spacing:.02em}
.reply-note{margin-top:26px;padding:12px 16px;border-left:2px solid var(--brand-soft);
  font-size:13.5px;line-height:1.9;color:var(--ink)}
.l-footer__contact{margin:16px 0 14px;gap:12px}
.l-footer__btn2{min-width:0;min-height:50px;padding:0 26px;font-size:14px}
.l-footer__tel2{font-size:12.5px;color:var(--muted);margin-bottom:24px}
@media screen and (max-width:760px){
  .l-footer__btn2{width:min(280px,86%)}
  .l-footer__tel2{padding:0 18px;line-height:1.7}
}


/* ==========================================================
   v11 — CTA を既存サイトのお問い合わせボタンに合わせる
   本番 .l-header__glnv_btn は「水色ベタ＋白文字＋封筒アイコン」。
   ただし #45b9df に白文字は 2.27:1 で AA を満たさないため、
   同じ色相の濃い方（#1f7d9c＝本番のホバー時の文字色）を使う。白文字で 4.70:1。
   ========================================================== */
.btn--primary,.m-btn1,.sp-cta__b--main,.btn--ck,.btn--ck-on{
  background-image:none;
  background-color:#1f7d9c;
  color:#fff;
  border:1px solid #1f7d9c;
  font-weight:700;
  box-shadow:0 6px 16px -10px rgba(31,125,156,.75);
}
.btn--primary:hover,.m-btn1:hover,.sp-cta__b--main:hover,
.btn--ck:hover,.btn--ck-on:hover,
.btn--primary:focus-visible,.m-btn1:focus-visible{
  background-color:#17698a;border-color:#17698a;color:#fff;
  box-shadow:0 10px 22px -10px rgba(31,125,156,.85);
  transform:translateY(-1px);letter-spacing:.08em;
}

/* アイコン付きボタン。ラベルは1行目、補足は2行目に折り返す */
.btn{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:2px 9px;line-height:1.35}
.btn small,.m-btn1 small{flex-basis:100%;text-align:center}
.btn--mail::before,.btn--dl::before,.btn--ext::before{
  content:"";flex:none;width:1.05em;height:1.05em;background-color:currentColor;
  position:static;left:auto;right:auto;top:auto;transform:none;opacity:1;
}
.sp-cta__b.btn--mail,.sp-cta__b.btn--dl{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
}
.sp-cta__b.btn--mail::before,.sp-cta__b.btn--dl::before{
  content:"";flex:none;width:1em;height:1em;background-color:currentColor;
}
.btn--mail::before,.sp-cta__b.btn--mail::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M502.3%20190.8c3.9-3.1%209.7-.2%209.7%204.7V400c0%2026.5-21.5%2048-48%2048H48c-26.5%200-48-21.5-48-48V195.6c0-5%205.7-7.8%209.7-4.7%2022.4%2017.4%2052.1%2039.5%20154.1%20113.6%2021.1%2015.4%2056.7%2047.8%2092.2%2047.6%2035.7.3%2072-32.8%2092.3-47.6102-74.1%20131.6-96.3%20154-113.7zM256%20320c23.2.4%2056.6-29.2%2073.4-41.4%20132.7-96.3%20142.8-104.7%20173.4-128.75.8-4.5%209.2-11.5%209.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5%2064%200%2085.5%200%20112v19c0%207.4%203.4%2014.4%209.2%2018.930.6%2023.9%2040.7%2032.4%20173.4%20128.7%2016.8%2012.2%2050.2%2041.8%2073.4%2041.4z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M502.3%20190.8c3.9-3.1%209.7-.2%209.7%204.7V400c0%2026.5-21.5%2048-48%2048H48c-26.5%200-48-21.5-48-48V195.6c0-5%205.7-7.8%209.7-4.7%2022.4%2017.4%2052.1%2039.5%20154.1%20113.6%2021.1%2015.4%2056.7%2047.8%2092.2%2047.6%2035.7.3%2072-32.8%2092.3-47.6102-74.1%20131.6-96.3%20154-113.7zM256%20320c23.2.4%2056.6-29.2%2073.4-41.4%20132.7-96.3%20142.8-104.7%20173.4-128.75.8-4.5%209.2-11.5%209.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5%2064%200%2085.5%200%20112v19c0%207.4%203.4%2014.4%209.2%2018.930.6%2023.9%2040.7%2032.4%20173.4%20128.7%2016.8%2012.2%2050.2%2041.8%2073.4%2041.4z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
.btn--dl::before,.sp-cta__b.btn--dl::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%203a1%201%200%200%201%201%201v8.59l2.3-2.3a1%201%200%201%201%201.4%201.42l-4%204a1%201%200%200%201-1.4%200l-4-4a1%201%200%201%201%201.4-1.42l2.3%202.3V4a1%201%200%200%201%201-1z%22%2F%3E%3Cpath%20d%3D%22M4%2015a1%201%200%200%201%201%201v2a1%201%200%200%200%201%201h12a1%201%200%200%200%201-1v-2a1%201%200%201%201%202%200v2a3%203%200%200%201-3%203H6a3%203%200%200%201-3-3v-2a1%201%200%200%201%201-1z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%203a1%201%200%200%201%201%201v8.59l2.3-2.3a1%201%200%201%201%201.4%201.42l-4%204a1%201%200%200%201-1.4%200l-4-4a1%201%200%201%201%201.4-1.42l2.3%202.3V4a1%201%200%200%201%201-1z%22%2F%3E%3Cpath%20d%3D%22M4%2015a1%201%200%200%201%201%201v2a1%201%200%200%200%201%201h12a1%201%200%200%200%201-1v-2a1%201%200%201%201%202%200v2a3%203%200%200%201-3%203H6a3%203%200%200%201-3-3v-2a1%201%200%200%201%201-1z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
.btn--ext::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M14%203a1%201%200%200%200%200%202h3.59l-8.3%208.29a1%201%200%201%200%201.42%201.42L19%206.41V10a1%201%200%201%200%202%200V4a1%201%200%200%200-1-1z%22%2F%3E%3Cpath%20d%3D%22M5%205a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-5a1%201%200%201%200-2%200v5H5V7h5a1%201%200%201%200%200-2z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M14%203a1%201%200%200%200%200%202h3.59l-8.3%208.29a1%201%200%201%200%201.42%201.42L19%206.41V10a1%201%200%201%200%202%200V4a1%201%200%200%200-1-1z%22%2F%3E%3Cpath%20d%3D%22M5%205a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-5a1%201%200%201%200-2%200v5H5V7h5a1%201%200%201%200%200-2z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}


/* CTA 面の中でも同じ青を使う（v7 でサーモン固定していた指定の打ち消し） */
.cta .btn--primary,.lp-last .btn--primary,.ck-last .btn--primary,
.lp-form .btn--primary,.form .btn--primary,.l-footer__btn.btn--primary{
  background-color:#1f7d9c;color:#fff;border-color:#1f7d9c;
}
.cta .btn--primary:hover,.lp-last .btn--primary:hover,.ck-last .btn--primary:hover,
.lp-form .btn--primary:hover,.form .btn--primary:hover,.l-footer__btn.btn--primary:hover{
  background-color:#17698a;border-color:#17698a;color:#fff;
}


/* ==========================================================
   v12 — 最終調整
   ========================================================== */

/* --- 1) ページ見出しの主従を直す ---
   これまで英字（30〜50px）が主役で、ページ名の日本語が 15px の補助だった。
   ページ名を h1 として主役にし、英字は小さな見出し語に下げる。
   セクション見出し（葉っぱの下）と同じ考え方で全ページ揃える。 */
.phead__en{
  font-family:"Lato",var(--f-jp);font-weight:400;
  font-size:clamp(12px,1.15vw,14px);letter-spacing:.28em;
  color:var(--mid);margin-top:22px;line-height:1.4;
}
.phead__jp{
  font-size:clamp(26px,3.4vw,38px);font-weight:700;color:var(--deep);
  letter-spacing:.06em;line-height:1.45;margin-top:8px;
}
@media screen and (max-width:640px){
  .phead__en{font-size:12px;letter-spacing:.24em}
  .phead__jp{font-size:24px}
}

/* --- 2) 小さすぎた文字を底上げする ---
   医療介護の現場・高齢の閲覧者を想定し、ラベル類の下限を 11px、
   数値の見出しラベルは 12px にそろえる。 */
.req,.opt{font-size:11px;padding:2px 7px}
.newtag{font-size:10.5px}
.hdr__sub{font-size:10.5px}
.news__tag{font-size:11px}
.kpi__k,.delta__k{font-size:12px;letter-spacing:.1em}
.week__c,.hw__d,.hero-week__lbl{font-size:11px}
.lp-form__steps{font-size:12px}
.lp-form__steps span{font-size:11px;width:18px;height:18px}
.cmp thead th small,.cmp td small,.cmp tbody th small{font-size:12px}
.btn small,.m-btn1 small{font-size:12px}
.sp-cta__note{font-size:11.5px}
.lp-form__after,.form__note{font-size:12px}
.doc-list__meta{font-size:12px}
.tabs__c{font-size:11.5px}
.browser__url{font-size:11.5px}
.card__badge{font-size:11.5px}
.scope__card .tag{font-size:11px}
.l-footer__lic{font-size:12px}
.fv__eyebrow,.lp-fv__eyebrow{font-size:12px}

/* --- 3) 白背景で AA を割っていた色を直す --- */
.news__tag--news{color:#bf4c2b;border-color:#f0c3b5}  /* 白背景 4.9:1 */

/* --- 4) スマホではヘッダーの資料請求を出さない（下部固定バーと重複するため） --- */
@media screen and (max-width:760px){
  .hdr__b2{display:none!important}
}


/* 中間CTA も他の CTA 面と同じ明るいグラデーションに統一する */
.ck-band{background:linear-gradient(135deg,rgba(69,185,223,.12),rgba(241,139,115,.12));
  color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ck-band__t{color:var(--deep)}
.ck-band__s{margin-top:6px;font-size:12.5px;color:var(--muted);line-height:1.8}
.btn--ck-on{background-color:#1f7d9c;color:#fff;border-color:#1f7d9c}
.btn--ck-on:hover{background-color:#17698a;border-color:#17698a;color:#fff}
.btn--ck-ghost{background:#fff;color:var(--deep);border:1px solid var(--line)}
.btn--ck-ghost:hover{background:var(--mist-2);border-color:var(--brand);color:var(--deep)}


/* ==========================================================
   v13 — CTA を既存サイトと同じ色コードに戻す
   本番 .l-header__glnv_btn の背景 #45b9df をそのまま使う。
   ただし白文字は 2.27:1 で AA を満たさないため、文字は濃紺（#16293a）。
   同じ #45b9df の上で 6.55:1 と余裕をもって読める。
   ========================================================== */
.btn--primary,.m-btn1,.sp-cta__b--main,.btn--ck,.btn--ck-on,
.cta .btn--primary,.lp-last .btn--primary,.ck-last .btn--primary,
.lp-form .btn--primary,.form .btn--primary,.l-footer__btn.btn--primary{
  background-image:none;
  background-color:#45b9df;
  color:#16293a;
  border:1px solid #45b9df;
  font-weight:700;
  box-shadow:0 6px 16px -10px rgba(69,185,223,.85);
}
.btn--primary:hover,.m-btn1:hover,.sp-cta__b--main:hover,
.btn--ck:hover,.btn--ck-on:hover,
.btn--primary:focus-visible,.m-btn1:focus-visible,
.cta .btn--primary:hover,.lp-last .btn--primary:hover,.ck-last .btn--primary:hover,
.lp-form .btn--primary:hover,.form .btn--primary:hover,.l-footer__btn.btn--primary:hover{
  background-color:#31add6;border-color:#31add6;color:#16293a;
  box-shadow:0 10px 22px -10px rgba(69,185,223,.95);
  transform:translateY(-1px);letter-spacing:.08em;
}

/* 封筒アイコンを、小さくても封筒と分かる形に */
.btn--mail::before,.sp-cta__b.btn--mail::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2%205.5A2.5%202.5%200%200%201%204.5%203h15A2.5%202.5%200%200%201%2022%205.5v13a2.5%202.5%200%200%201-2.5%202.5h-15A2.5%202.5%200%200%201%202%2018.5v-13Zm2.2-.3%207.8%205.9%207.8-5.9a.5.5%200%200%200-.3-.2h-15a.5.5%200%200%200-.3.2ZM20%207.4l-7.4%205.6a1%201%200%200%201-1.2%200L4%207.4v11.1a.5.5%200%200%200%20.5.5h15a.5.5%200%200%200%20.5-.5V7.4Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2%205.5A2.5%202.5%200%200%201%204.5%203h15A2.5%202.5%200%200%201%2022%205.5v13a2.5%202.5%200%200%201-2.5%202.5h-15A2.5%202.5%200%200%201%202%2018.5v-13Zm2.2-.3%207.8%205.9%207.8-5.9a.5.5%200%200%200-.3-.2h-15a.5.5%200%200%200-.3.2ZM20%207.4l-7.4%205.6a1%201%200%200%201-1.2%200L4%207.4v11.1a.5.5%200%200%200%20.5.5h15a.5.5%200%200%200%20.5-.5V7.4Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
.btn--mail::before,.btn--dl::before{width:1.15em;height:1.15em}

/* NEW バッジ。単色のオレンジは CTA と主役を取り合うので、
   ブランドのサーモンを薄い面にして文字で濃さを出す（#fbe1db 上 4.97:1）。 */
.newtag{
  background:#fbe1db;color:#a83f22;border:1px solid #f3c9bd;
  font-size:10px;letter-spacing:.12em;padding:1px 6px;border-radius:4px;
}


/* ==========================================================
   v14 — CTA の文字色を既存サイトと同じ白に戻す
   本番 .l-header__glnv_btn と同じ「#45b9df の上に白文字」。
   コントラストは 2.27:1 で WCAG AA（4.5:1）には届かないが、
   現行サイトと同じ見え方を優先するというご判断。
   代わりに、白文字が沈まないよう次の3点で読みやすさを補う。
     1. ラベルを 16px / bold にして字面を太くする
     2. 影ではなく1段濃い縁（#37a9d0）で輪郭を立てる
     3. ホバーで背景を濃くして（#2c9cc4）差を作る
   ========================================================== */
.btn--primary,.m-btn1,.sp-cta__b--main,.btn--ck,.btn--ck-on,
.cta .btn--primary,.lp-last .btn--primary,.ck-last .btn--primary,
.lp-form .btn--primary,.form .btn--primary,.l-footer__btn.btn--primary{
  background-color:#45b9df;
  color:#fff;
  border:1px solid #37a9d0;
  font-size:16px;
  font-weight:700;
  box-shadow:0 6px 16px -10px rgba(31,125,156,.75);
}
.btn--primary:hover,.m-btn1:hover,.sp-cta__b--main:hover,
.btn--ck:hover,.btn--ck-on:hover,
.btn--primary:focus-visible,.m-btn1:focus-visible,
.cta .btn--primary:hover,.lp-last .btn--primary:hover,.ck-last .btn--primary:hover,
.lp-form .btn--primary:hover,.form .btn--primary:hover,.l-footer__btn.btn--primary:hover{
  background-color:#2c9cc4;border-color:#2c9cc4;color:#fff;
  box-shadow:0 10px 22px -10px rgba(31,125,156,.9);
  transform:translateY(-1px);letter-spacing:.08em;
}
/* ボタン内の補足は白の 88% にして、主ラベルとの主従をつける */
.btn--primary small,.m-btn1 small,.btn--ck small,.btn--ck-on small{
  color:rgba(255,255,255,.9);font-weight:400;
}
/* ヘッダーの常設ボタンだけは小さいので 14px に留める */
.hdr__cta .btn--primary{font-size:14px}


/* ==========================================================
   v15 — VIEW MORE と「〜を見る」に矢印アイコン
   遷移する導線なので、進む向きが分かる右矢印を右側に置く。
   ホバーで少し前に出て、押せることと行き先を同時に伝える。
   ========================================================== */
.m-btn1,.btn--arrow{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
}
.m-btn1::after,.btn--arrow::after{
  content:"";flex:none;width:1.05em;height:1.05em;background-color:currentColor;
  position:static;left:auto;right:auto;top:auto;transform:none;opacity:1;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.3%204.3a1%201%200%200%201%201.4%200l6.9%206.9a1%201%200%200%201%200%201.4l-6.9%206.9a1%201%200%200%201-1.4-1.4l5.2-5.2H3.5a1%201%200%201%201%200-2h15l-5.2-5.2a1%201%200%200%201%200-1.4Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.3%204.3a1%201%200%200%201%201.4%200l6.9%206.9a1%201%200%200%201%200%201.4l-6.9%206.9a1%201%200%200%201-1.4-1.4l5.2-5.2H3.5a1%201%200%201%201%200-2h15l-5.2-5.2a1%201%200%200%201%200-1.4Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  transition:transform var(--t-fast) var(--ease);
}
.m-btn1:hover::after,.btn--arrow:hover::after{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){
  .m-btn1:hover::after,.btn--arrow:hover::after{transform:none}
}


/* ==========================================================
   v16 — 記事詳細ページ
   ========================================================== */
.ar-meta{display:flex;align-items:center;gap:12px;margin-top:12px;
  font-family:var(--f-num);font-size:13px;color:var(--muted)}
.ar-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.ar-hero{margin:0 0 30px}
.ar-hero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center 32%;
  border-radius:12px;display:block}

.ar-toc{background:var(--mist);border-radius:12px;padding:22px 26px;margin-bottom:34px}
.ar-toc__t{font-weight:700;color:var(--deep);margin-bottom:8px}
.ar-toc ol{margin:0;padding-left:1.3em;list-style:decimal;color:var(--ink)}
.ar-toc li{margin-top:6px;line-height:1.9}
.ar-toc a{color:var(--ink);border-bottom:1px solid var(--brand-soft)}
.ar-toc a:hover{color:var(--deep)}

/* 本文。news-post.sh の変換（##＝水色帯 / ###＝オレンジ枠）に合わせる */
.wp-post{font-size:16px}
.wp-post p{line-height:2.15;letter-spacing:.03em;margin-bottom:22px}
.ar-lead{font-size:17px;font-weight:500;color:var(--ink);
  padding-left:16px;border-left:3px solid var(--brand);margin-bottom:34px!important}
.wp-post h2{
  font-size:20px;font-weight:700;color:#fff;background:var(--brand);
  border-radius:6px;padding:12px 18px;margin:44px 0 18px;line-height:1.6;letter-spacing:.04em;
}
.wp-post h3{
  font-size:18px;font-weight:700;color:var(--ink);
  border:1px solid var(--cta);border-left:5px solid var(--cta);border-radius:4px;
  padding:9px 14px;margin:32px 0 14px;line-height:1.6;
}
.wp-post blockquote{margin:26px 0;padding:18px 22px;background:var(--mist-2);
  border-left:3px solid var(--brand-soft);border-radius:0 8px 8px 0;
  font-size:15.5px;line-height:2;color:var(--muted)}

.ar-share{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:44px;
  padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.ar-share__b{font-family:var(--f-jp);font-size:13px;color:var(--deep);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer}
.ar-share__b:hover{border-color:var(--brand);background:var(--mist-2)}

.ar-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;
  margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}
.ar-nav__b{font-family:var(--f-jp);font-size:14px;line-height:1.7;color:var(--ink);
  background:none;border:0;cursor:pointer;text-align:left;padding:0}
.ar-nav__b span{display:block;font-family:var(--f-num);font-size:11.5px;letter-spacing:.14em;
  color:var(--mid);margin-bottom:4px}
.ar-nav__b--next{text-align:right}
.ar-nav__b:hover{color:var(--deep)}

.ar-side{display:flex;flex-direction:column;gap:20px;position:sticky;top:150px}
.ar-side__box{border:1px solid var(--line);border-radius:12px;padding:20px}
.ar-side__t{font-weight:700;font-size:15px;color:var(--deep);margin-bottom:12px;line-height:1.6}
.ar-side__d{font-size:13.5px;line-height:1.9;color:var(--muted);margin-bottom:14px}
.ar-side__cta{background:linear-gradient(135deg,rgba(69,185,223,.12),rgba(241,139,115,.12));
  border-color:transparent}
.ar-side__cta .btn{width:100%;min-height:52px;font-size:14px}
.ar-rel{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ar-rel a,.ar-rel button{font-family:var(--f-jp);font-size:13.5px;line-height:1.75;color:var(--ink);
  background:none;border:0;padding:0;text-align:left;cursor:pointer;display:block}
.ar-rel time{display:block;font-family:var(--f-num);font-size:11.5px;color:var(--muted);margin-bottom:2px}
.ar-rel a:hover,.ar-rel button:hover{color:var(--deep)}
.ar-cats{list-style:none;margin:0;padding:0}
.ar-cats li + li{margin-top:8px}
.ar-cats button{width:100%;display:flex;justify-content:space-between;align-items:center;
  font-family:var(--f-jp);font-size:14px;color:var(--ink);background:none;border:0;
  padding:8px 0;cursor:pointer;border-bottom:1px solid var(--line)}
.ar-cats span{font-family:var(--f-num);font-size:12px;color:var(--muted)}
.ar-cats button:hover{color:var(--deep)}

/* 一覧のタブ・ページ送りを押せる見た目に */
.pager a,.pager button{font-family:var(--f-num);font-weight:700;background:none;border:0;cursor:pointer;
  color:var(--deep);padding:8px 12px;border-radius:8px;min-width:40px}
.pager a:hover,.pager button:hover{background:var(--mist)}
.pager .pager__cur{background:var(--brand);color:#fff}
.pager .pager__cur:hover{background:var(--brand)}
.pager__note{margin-top:12px;text-align:center;font-size:12px;color:var(--muted)}
.news.is-swap .news__i{animation:rowIn .45s var(--ease) both}
.news.is-swap .news__i:nth-child(2){animation-delay:.06s}
.news.is-swap .news__i:nth-child(3){animation-delay:.12s}
.news.is-swap .news__i:nth-child(4){animation-delay:.18s}
.news.is-swap .news__i:nth-child(5){animation-delay:.24s}
.news.is-swap .news__i:nth-child(6){animation-delay:.3s}

@media screen and (max-width:1000px){
  .ar-wrap{grid-template-columns:1fr;gap:40px}
  .ar-side{position:static}
}
@media screen and (max-width:640px){
  .wp-post h2{font-size:17px;padding:10px 14px}
  .wp-post h3{font-size:16px}
  .ar-nav{grid-template-columns:1fr;gap:14px}
  .ar-nav__b--next{text-align:left}
}


/* ==========================================================
   v17 — アイコンがホバーで消える問題の修正
   飾り線用に残っていた :hover::before{background:#fff} が
   アイコンのマスクを白く塗りつぶしていた。指定を削除したうえで、
   アイコンは常に文字と同じ色で塗ることを明示する。
   ========================================================== */
.btn--mail::before,.btn--dl::before,.btn--ext::before,
.btn--mail:hover::before,.btn--dl:hover::before,.btn--ext:hover::before,
.sp-cta__b.btn--mail::before,.sp-cta__b.btn--dl::before,
.m-btn1::after,.btn--arrow::after,
.m-btn1:hover::after,.btn--arrow:hover::after{
  background-color:currentColor;background-image:none;opacity:1;
}

/* 資料請求のアイコンは「書類＋下向き矢印」。何が届くのかが形で分かる */
.btn--dl::before,.sp-cta__b.btn--dl::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%202h7.2a1%201%200%200%201%20.7.3l5.8%205.8a1%201%200%200%201%20.3.7V11a1%201%200%201%201-2%200v-1h-4a2%202%200%200%201-2-2V4H6a.5.5%200%200%200-.5.5v15a.5.5%200%200%200%20.5.5h4a1%201%200%201%201%200%202H6a2.5%202.5%200%200%201-2.5-2.5v-15A2.5%202.5%200%200%201%206%202Zm8%202.9V8h3.1L14%204.9Z%22%2F%3E%3Cpath%20d%3D%22M17%2012.5a1%201%200%200%201%201%201v4.1l1.3-1.3a1%201%200%201%201%201.4%201.4l-3%203a1%201%200%200%201-1.4%200l-3-3a1%201%200%201%201%201.4-1.4l1.3%201.3v-4.1a1%201%200%200%201%201-1Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%202h7.2a1%201%200%200%201%20.7.3l5.8%205.8a1%201%200%200%201%20.3.7V11a1%201%200%201%201-2%200v-1h-4a2%202%200%200%201-2-2V4H6a.5.5%200%200%200-.5.5v15a.5.5%200%200%200%20.5.5h4a1%201%200%201%201%200%202H6a2.5%202.5%200%200%201-2.5-2.5v-15A2.5%202.5%200%200%201%206%202Zm8%202.9V8h3.1L14%204.9Z%22%2F%3E%3Cpath%20d%3D%22M17%2012.5a1%201%200%200%201%201%201v4.1l1.3-1.3a1%201%200%201%201%201.4%201.4l-3%203a1%201%200%200%201-1.4%200l-3-3a1%201%200%201%201%201.4-1.4l1.3%201.3v-4.1a1%201%200%200%201%201-1Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}


/* 資料の導線を隠したときのレイアウト */
[data-doc][hidden]{display:none!important}
.cta__b--single{justify-content:flex-start}
@media screen and (max-width:760px){
  .sp-cta--single .sp-cta__row{grid-template-columns:1fr}
}


/* ==========================================================
   v18 — 無料掲載キャンペーンとデモアカウントの訴求
   ========================================================== */
.camp-badge{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:14px;padding:8px 16px;border-radius:999px;
  background:#fbe1db;border:1px solid #f3c9bd;
  font-size:13.5px;font-weight:700;color:#a83f22;line-height:1.6;
}
.camp-badge b{
  font-family:"Lato",var(--f-jp);font-size:11px;letter-spacing:.14em;
  background:#a83f22;color:#fff;border-radius:999px;padding:3px 10px;flex:none;
}
.lp-fv__demo{margin-top:10px;font-size:13px;color:var(--muted);line-height:1.85;
  padding-left:12px;border-left:2px solid var(--brand-soft)}
.camp-ribbon{
  margin:-26px -26px 16px;padding:9px 16px;border-radius:14px 14px 0 0;
  background:#f18b73;color:#16293a;font-size:13px;font-weight:700;text-align:center;
  letter-spacing:.03em;
}

.sec--offer{background:var(--mist-2)}
.offer{display:grid;grid-template-columns:1.15fr 1fr;gap:26px;align-items:start}
.offer__i{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px}
.offer__i--main{
  border-color:#f3c9bd;
  box-shadow:0 24px 56px -34px rgba(200,100,75,.55);
  background:linear-gradient(180deg,#fff8f5 0%,#fff 42%);
}
.offer__tag{
  display:inline-block;font-family:"Lato",var(--f-jp);font-size:11.5px;font-weight:700;
  letter-spacing:.16em;background:#a83f22;color:#fff;border-radius:999px;padding:4px 13px;
}
.offer__tag--sub{background:var(--deep)}
.offer__t{font-size:clamp(19px,2.2vw,24px);color:var(--deep);margin-top:14px;line-height:1.55}
.offer__d{margin-top:14px;font-size:15px;line-height:2.05;color:var(--ink)}
.offer__pts{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.offer__pts li{position:relative;padding-left:24px;font-size:14px;line-height:1.85;color:var(--ink)}
.offer__pts li::before{content:"✓";position:absolute;left:0;top:0;color:var(--deep);font-weight:700}
.offer__b{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.offer__b .btn{min-width:0;flex:1 1 auto}
.lp-last__pts b{color:var(--deep)}

@media screen and (max-width:1000px){
  .offer{grid-template-columns:1fr}
}
@media screen and (max-width:640px){
  .offer__i{padding:24px 20px}
  .camp-ribbon{margin:-20px -20px 14px}
  .camp-badge{font-size:12.5px;padding:7px 13px}
  .offer__b .btn{flex:1 1 100%}
}


/* ==========================================================
   v19 — 送信完了（サンクス）ページ
   ========================================================== */
.tk-wrap{max-width:820px;margin-inline:auto}
.tk-steps{display:flex;list-style:none;margin:0 0 34px;padding:0;gap:8px;counter-reset:tk}
.tk-steps li{flex:1;text-align:center;font-size:13.5px;color:var(--muted);
  padding:11px 6px;border-radius:999px;background:var(--mist-2);border:1px solid var(--line)}
.tk-steps li::before{counter-increment:tk;content:counter(tk) ". "}
.tk-steps .is-now{background:var(--brand);border-color:var(--brand);color:#16293a;font-weight:700}

.tk-card{border:1px solid var(--line);border-radius:16px;padding:44px 40px;text-align:center;
  background:linear-gradient(135deg,rgba(69,185,223,.10),rgba(241,139,115,.10))}
.tk-mark{display:block;width:56px;height:56px;margin:0 auto 20px;border-radius:50%;
  background:var(--brand);position:relative}
.tk-mark::after{content:"";position:absolute;left:19px;top:15px;width:14px;height:25px;
  border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.js-motion .tk-card.is-in .tk-mark{animation:tkPop .5s var(--ease) both}
@keyframes tkPop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
.tk-t{font-size:clamp(21px,2.6vw,27px);color:var(--deep);line-height:1.6}
.tk-d{margin-top:14px;font-size:15px;line-height:2.05;color:var(--ink)}

.tk-dl{margin-top:26px;padding:22px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.tk-dl__t{font-weight:700;color:var(--deep);margin-bottom:14px}
.tk-dl .btn{min-width:0;width:min(340px,100%)}
.tk-dl__n{margin-top:12px;font-size:12.5px;color:var(--muted);line-height:1.8}

.tk-sum{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;margin:26px 0 0;
  text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tk-sum dt,.tk-sum dd{padding:11px 16px;font-size:13.5px;line-height:1.8;
  border-bottom:1px solid var(--line)}
.tk-sum dt{background:var(--mist-2);font-weight:700;color:var(--ink);white-space:nowrap}
.tk-sum dd{margin:0;color:var(--muted);word-break:auto-phrase}
.tk-sum dt:nth-last-of-type(1),.tk-sum dd:nth-last-of-type(1){border-bottom:0}
.tk-sum:empty{display:none}

.tk-next{margin-top:44px}
.tk-next__t{text-align:center;font-weight:700;color:var(--deep);margin-bottom:18px}
.tk-next__g{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tk-next__i{display:block;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:18px;cursor:pointer;font-family:var(--f-jp);
  transition:border-color var(--t-fast) ease,transform var(--t-fast) var(--ease)}
.tk-next__i:hover{border-color:var(--brand);transform:translateY(-2px)}
.tk-next__i b{display:block;font-size:14.5px;color:var(--ink);line-height:1.6}
.tk-next__i span{display:block;margin-top:6px;font-size:12.5px;color:var(--muted);line-height:1.8}
.tk-back{margin-top:34px;text-align:center}

/* フォームのエラー表示 */
.form-err{margin:0 0 14px;padding:10px 14px;border-radius:8px;background:#fdeeea;
  border:1px solid #f3c9bd;color:#a83f22;font-size:13px;line-height:1.8;font-weight:700}
.field.is-error input,.field.is-error textarea,.field.is-error select{
  border-color:#d4674a;background:#fdf6f4}
.lp-form__agree.is-error{color:#a83f22}
.lp-form__agree.is-error input{outline:2px solid #d4674a;outline-offset:2px}

@media screen and (max-width:760px){
  .tk-card{padding:32px 22px}
  .tk-next__g{grid-template-columns:1fr}
  .tk-sum{grid-template-columns:1fr}
  .tk-sum dt{border-bottom:0;padding-bottom:0;background:#fff}
  .tk-sum dd{padding-top:4px}
}


/* ==========================================================
   v20 — 掲載キャンペーン
   BtoB バナー広告の定石に合わせる：
     ・1ブロック1メッセージ1CTA
     ・数字をひとつだけ大きく置く（掲載料 0 円）
     ・CTA は「動詞＋具体性」＋無料であることをボタン内に
     ・信頼の根拠をひとつだけ添える（実際に運用中のページ）
   ========================================================== */
.camp{
  position:relative;overflow:hidden;
  background:linear-gradient(120deg,#1f7d9c 0%,#2e9dc4 52%,#45b9df 100%);
  color:#fff;padding:64px 0;
}
/* 斜めのラインで“キャンペーン帯”らしさを出す（面が単調にならないように） */
.camp::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.5) 0 1px,transparent 1px 26px);
}
.camp::after{
  content:"";position:absolute;right:-140px;top:-160px;width:520px;height:520px;
  border-radius:50%;background:rgba(255,255,255,.09);pointer-events:none;
}
.camp__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 400px;
  gap:52px;align-items:center}

.camp__eyebrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:13px;font-weight:700;letter-spacing:.06em;color:#eaf7fc}
.camp__eyebrow span{
  font-family:"Lato",var(--f-jp);font-size:11px;letter-spacing:.18em;
  background:#f18b73;color:#16293a;border-radius:999px;padding:4px 12px;flex:none;
}
.camp__num{display:flex;align-items:baseline;gap:10px;margin-top:14px;line-height:1;color:#fff}
.camp__num span{font-size:19px;font-weight:700;letter-spacing:.08em}
.camp__num b{font-family:"Lato",var(--f-jp);font-size:clamp(74px,10vw,116px);font-weight:700;
  letter-spacing:-.02em;text-shadow:0 8px 26px rgba(10,60,80,.32)}
.camp__num i{font-style:normal;font-size:clamp(26px,3.4vw,38px);font-weight:700}
.camp__h{margin-top:10px;font-size:clamp(21px,2.7vw,30px);color:#fff;line-height:1.6;
  letter-spacing:.03em}
.camp__d{margin-top:16px;font-size:15px;line-height:2.05;color:#e6f5fb;max-width:34em}
.camp__pts{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.camp__pts li{position:relative;padding-left:28px;font-size:15px;line-height:1.85;color:#fff}
.camp__pts li b{color:#fff}
.camp__pts li::before{
  content:"";position:absolute;left:0;top:.36em;width:17px;height:17px;border-radius:50%;
  background:#f18b73;
}
.camp__pts li::after{
  content:"";position:absolute;left:5px;top:.62em;width:5px;height:9px;
  border:solid #16293a;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.camp__b{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.camp__b .btn--primary{background-color:#f18b73;border-color:#f18b73;color:#16293a;
  min-height:58px;font-size:16.5px;box-shadow:0 14px 30px -14px rgba(0,0,0,.45)}
.camp__b .btn--primary:hover{background-color:#f5a18c;border-color:#f5a18c;color:#16293a}
.camp__b .btn--primary small{color:rgba(22,41,58,.75)}
.camp__b .btn--ghost{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.camp__b .btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.camp__proof{margin-top:18px;font-size:13px;color:#dcf0f8;line-height:1.9;
  padding-left:12px;border-left:2px solid rgba(255,255,255,.45)}
.camp__note{margin-top:10px;font-size:12px;color:#c8e6f2;line-height:1.8}

.camp__r{position:relative}
.camp__shot{margin:0;border-radius:12px;overflow:hidden;background:#fff;
  box-shadow:0 34px 70px -28px rgba(6,45,62,.6);transform:rotate(-1.2deg)}
.camp__bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#eef5f8;
  border-bottom:1px solid #dbe8ee}
.camp__bar i{width:8px;height:8px;border-radius:50%;background:#c9dbe4;flex:none}
.camp__bar span{margin-left:8px;font-family:"Lato",var(--f-jp);font-size:11px;color:#5d7a88;
  background:#fff;border-radius:999px;padding:3px 12px;flex:1;text-align:center}
.camp__shot img{width:100%;height:auto;display:block;aspect-ratio:4/3.4;object-fit:cover;
  object-position:top center}
.camp__seal{
  position:absolute;left:-26px;bottom:-22px;width:104px;height:104px;border-radius:50%;
  background:#f18b73;color:#16293a;display:grid;place-items:center;line-height:1;
  box-shadow:0 16px 34px -14px rgba(0,0,0,.45);transform:rotate(-9deg);
  border:3px solid #fff;
}
.camp__seal b{font-family:"Lato",var(--f-jp);font-size:44px;font-weight:700}
.camp__seal span{font-size:14px;font-weight:700;margin-top:-4px}
.camp__seal{grid-auto-flow:row}

/* デモアカウント */
.demo{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:34px 36px}
.demo__t{font-size:clamp(19px,2.2vw,24px);color:var(--deep);margin-top:14px;line-height:1.55}
.demo__d{margin-top:12px;font-size:15px;line-height:2.05;color:var(--ink)}
.demo__r .btn{margin-top:20px;width:100%}

@media screen and (max-width:1000px){
  .camp__in{grid-template-columns:1fr;gap:36px}
  .camp__r{max-width:440px;margin-inline:auto;width:100%}
  .demo{grid-template-columns:1fr;gap:22px;padding:26px 22px}
}
@media screen and (max-width:640px){
  .camp{padding:44px 0}
  .camp__num b{font-size:68px}
  .camp__seal{width:82px;height:82px;left:-10px;bottom:-14px}
  .camp__seal b{font-size:34px}
  .camp__b .btn{width:100%}
}


/* ==========================================================
   v21 — FVのキャンペーン表現を整える／CTAの文字色／相談内容の自動入力
   ========================================================== */

/* FV：ピンクのバッジをやめ、既存の箇条書きと同じリズムで2行に置く。
   「いま無料」だけを面で持たせ、あとは本文と同じ字面にして、
   広告バナーではなくサービス説明の一部として読ませる。 */
.camp-badge{display:none}
.lp-fv__free{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.lp-fv__free li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink);
  line-height:1.7}
.lp-fv__free li span{
  flex:none;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  color:#a83f22;background:#fdeee9;border:1px solid #f3c9bd;
  border-radius:5px;padding:3px 9px;
}

/* フォーム上部：ベタ塗りのリボンをやめ、上に細いアクセント＋淡い面。
   数字だけ Lato で立てて、キャンペーンだと一目で分かるようにする。 */
.camp-ribbon{
  margin:-26px -26px 18px;padding:12px 18px;border-radius:14px 14px 0 0;
  background:#fdf3f0;border-bottom:1px solid #f3d7cd;
  box-shadow:inset 0 3px 0 #f18b73;
  color:#8f3a20;font-size:13px;font-weight:700;letter-spacing:.03em;
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
}
.camp-ribbon span{
  font-family:"Lato",var(--f-jp);font-size:10px;letter-spacing:.18em;font-weight:700;
  background:#a83f22;color:#fff;border-radius:999px;padding:3px 10px;
}
.camp-ribbon b{font-family:"Lato",var(--f-jp);font-size:22px;line-height:1;
  vertical-align:-2px;margin:0 1px}

/* キャンペーンの申し込みボタンは白文字 */
.camp__b .btn--primary,.camp__cta{color:#fff}
.camp__b .btn--primary small,.camp__cta small{color:rgba(255,255,255,.9)}
.camp__b .btn--primary:hover,.camp__cta:hover{color:#fff}

/* 自動入力された相談内容が、書き換え可能だと分かるようにする */
.field.is-filled textarea{background:#f3fafd;border-color:var(--brand-soft)}
.field.is-filled::after{
  content:"ご希望に合わせて書き換えていただけます";
  display:block;margin-top:6px;font-size:11.5px;color:var(--mid);
}

@media screen and (max-width:640px){
  .camp-ribbon{margin:-20px -20px 14px;font-size:12px}
  .lp-fv__free li{font-size:13.5px}
}


.camp-ribbon em{font-style:normal;white-space:nowrap}
.camp-ribbon strong{white-space:nowrap;font-weight:700}
.camp-ribbon{gap:6px 10px}


/* ==========================================================
   v22 — キャンペーン訴求のつくり直し
   調査（BtoB・SaaSのLPデザイン事例／BtoBバナー広告ガイド）で
   一致していた指針にそろえる。
     ・避ける：カウントダウン、過剰な限定訴求、感情的な煽り
     ・効く  ：情報の網羅性と誠実さ／条件を先に開示する
     ・FV内のCTAは1種類だけ
   → 巨大な「0」と丸シールは BtoC の煽り型なのでやめ、
     「費用の条件表」として提示する形に置き換える。
     行がすべて 無料 / 0円 / なし で埋まること自体が訴求になる。
   ========================================================== */
.lp-fv__free{display:none}
.camp-ribbon{display:none}

/* --- FV：オファーを条件として明示する枠（CTAは置かない） --- */
.ng-offer{
  margin-top:18px;max-width:30em;
  background:#fff;border:1px solid #f0d9d1;border-radius:12px;
  box-shadow:0 14px 34px -26px rgba(168,63,34,.5);
  overflow:hidden;
}
.ng-offer__h{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 18px;background:#fdf3f0;border-bottom:1px solid #f3ddd5;
  font-size:13px;font-weight:700;color:#8f3a20;letter-spacing:.02em;line-height:1.6;
}
.ng-offer__h span{
  flex:none;font-size:11px;letter-spacing:.1em;
  background:#a83f22;color:#fff;border-radius:4px;padding:3px 9px;
}
.ng-offer__l{margin:0;padding:14px 18px}
.ng-offer__l > div{
  display:flex;align-items:baseline;gap:10px;padding:6px 0;
}
.ng-offer__l dt{
  flex:none;font-size:13px;color:var(--muted);letter-spacing:.02em;
}
/* 項目名 …… 値 の順に点線でつなぐ（料金表の作法。誠実さが出る） */
.ng-offer__l dd{
  margin:0;flex:1 1 auto;color:var(--ink);line-height:1;
  display:flex;align-items:baseline;justify-content:flex-end;
}
.ng-offer__l dd::before{
  content:"";flex:1 1 auto;height:0;margin-right:12px;
  border-bottom:1px dotted #dcc6be;transform:translateY(-4px);
}
.ng-offer__l b{font-family:"Lato",var(--f-jp);font-size:22px;font-weight:700;color:#a83f22}
.ng-offer__l i{font-style:normal;font-size:14px;font-weight:700;color:#a83f22;margin-left:2px}

/* --- キャンペーン帯：煽りの装飾を落とす --- */
.camp::before{
  /* 斜めストライプ → ブランドのドット。面が静かになる */
  background-image:radial-gradient(rgba(255,255,255,.55) 1px,transparent 1px);
  background-size:16px 16px;opacity:.13;
}
.camp::after{
  right:-180px;top:-200px;width:600px;height:600px;background:rgba(255,255,255,.07);
}
.camp__h{margin-top:16px}

/* 費用の条件表 */
.camp__spec{
  margin:26px 0 0;padding:20px 24px;border-radius:12px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(2px);max-width:30em;
}
.camp__spec > div{display:flex;align-items:baseline;gap:12px;padding:9px 0}
.camp__spec > div + div{border-top:1px solid rgba(255,255,255,.22)}
.camp__spec dt{flex:none;font-size:14px;color:#dcf0f8;letter-spacing:.02em}
.camp__spec dd{margin:0;flex:1 1 auto;display:flex;align-items:baseline;
  justify-content:flex-end;gap:8px;line-height:1}
.camp__spec dd::before{
  content:"";flex:1 1 auto;height:0;margin-right:4px;
  border-bottom:1px dotted rgba(255,255,255,.4);transform:translateY(-5px);
}
.camp__spec b{font-family:"Lato",var(--f-jp);font-size:26px;font-weight:700;color:#fff;
  letter-spacing:.01em}
.camp__spec i{font-style:normal;font-size:15px;font-weight:700;color:#fff}
.camp__spec small{font-size:11.5px;color:#cfe9f3;font-weight:400}
.camp__upd{margin-top:14px;font-size:13.5px;color:#e6f5fb;line-height:1.9}

/* 図版は傾けず、落ち着いて置く */
.camp__shot{transform:none}

@media screen and (max-width:640px){
  .ng-offer{max-width:none}
  .ng-offer__l b{font-size:20px}
  .camp__spec{padding:16px 18px}
  .camp__spec b{font-size:22px}
  .camp__spec dt{font-size:13px}
}


/* 募集枠。事実としての上限なので、煽らずに条件表の一行として置く。
   ただし「いま動く理由」なので、他の行より少しだけ強くする。 */
.ng-offer__limit{margin-top:2px;padding-top:10px!important;border-top:1px dashed #f0d9d1}
.ng-offer__limit dd{gap:0}
.ng-offer__limit dd b{font-size:22px}
.ng-offer__limit dd i{font-style:normal;font-size:13px;font-weight:700;color:#a83f22;margin-left:3px}
.ng-offer__limit dd em{font-style:normal;font-size:12px;color:var(--muted);margin-left:4px}

.camp__spec-limit dd b{font-size:26px}
.camp__spec-limit dd i{font-style:normal;font-size:14px;font-weight:700;color:#fff;margin-left:2px}
.camp__spec-limit dd small{margin-left:2px;font-size:13px;color:#dcf0f8;font-weight:400}
.camp__spec-limit{border-top:1px solid rgba(255,255,255,.42)!important}


/* ==========================================================
   v23 — キャンペーンの条件表示を整理
   同じ条件表を FV とセクションで2回出していて冗長だった。
   ・FV は「何が無料か」と「枠」だけの1行にする
   ・詳しい条件はキャンペーンセクションの表に一本化する
   ・数字の級数を落として、面としての主張を下げる
   ========================================================== */
.ng-offer{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:16px;padding:10px 14px;max-width:34em;
  background:#fdf3f0;border:1px solid #f0d9d1;border-radius:9px;
  box-shadow:none;
}
.ng-offer__chip{
  flex:none;font-size:11px;font-weight:700;letter-spacing:.1em;
  background:#a83f22;color:#fff;border-radius:4px;padding:3px 9px;
}
.ng-offer__txt{font-size:13.5px;line-height:1.75;color:#8f3a20;font-weight:700;letter-spacing:.02em}
.ng-offer__txt b{font-family:"Lato",var(--f-jp);font-size:16px;font-weight:700;
  color:#a83f22;margin:0 1px}

/* セクションの条件表：値を 26px → 19px に。行間も詰める */
.camp__spec{padding:16px 22px;margin-top:24px}
.camp__spec > div{padding:7px 0}
.camp__spec b{font-size:19px}
.camp__spec i{font-size:13px}
.camp__spec dt{font-size:13.5px}
.camp__spec small{font-size:11px}
.camp__spec-limit dd b{font-size:19px}
.camp__spec-limit dd i{font-size:13px}
.camp__spec-limit dd small{font-size:12px}
.camp__upd{margin-top:12px;font-size:13px}

@media screen and (max-width:640px){
  .ng-offer{max-width:none}
  .camp__spec b,.camp__spec-limit dd b{font-size:18px}
}


/* ==========================================================
   v24 — 条件表の右端をそろえる／FVのキャンペーン表示を外す
   ========================================================== */
.ng-offer{display:none}

/* 値は右端でそろえる。単位や補足があっても行がずれないように、
   値のかたまりを baseline で右詰めし、余分な注記は表の外へ出した。 */
.camp__spec dd{gap:0}
.camp__spec b{line-height:1}
.camp__spec i{font-style:normal;font-size:13px;font-weight:700;color:#fff;margin-left:3px}
.camp__spec-limit dd em{font-style:normal;font-size:13.5px;font-weight:400;color:#dcf0f8;
  margin-right:5px}
.camp__spec-limit dd i{font-size:13px;margin-left:3px}


/* ==========================================================
   v25 — 級数調整
   余白が広い箇所は文字が小さく見えるので、本文の級数を上げる。
   あわせて、結論にあたる一文を大きくしてジャンプ率を作る。
   ========================================================== */

/* --- 比較表 --- */
.cmp thead th{font-size:16px;padding:20px 18px}
.cmp thead th.cmp__ours{font-size:17.5px}
.cmp thead th small{font-size:13px;margin-top:6px;line-height:1.7}
.cmp tbody th{font-size:16px}
.cmp tbody th small{font-size:13px;line-height:1.75}
.cmp td{font-size:16px}
.cmp td small{font-size:13px;margin-top:6px;line-height:1.75}
.cmp thead th small,.cmp td small,.cmp tbody th small{font-size:13px}
.cmp tbody th,.cmp td{padding:18px 20px}
.cmp .yes,.cmp .no{font-size:16.5px;font-weight:700}

/* --- ポジショニング：結論の一文を大きくする（ジャンプ率） --- */
.posi__note{
  margin-top:22px;padding-top:18px;
  font-size:clamp(18px,2.1vw,23px);line-height:1.6;letter-spacing:.02em;
  color:var(--cta-dark);
}
.posi__note b{font-family:"Lato",var(--f-jp);font-size:1.22em;color:#d4603c}
.posi__hd{font-size:15px}
.posi__list b{font-size:17px}
.posi__col--ours .posi__list b{font-size:21px}
.posi__list span{font-size:15px;line-height:1.85}
.posi__col{padding:30px}

/* --- 余白の広い面の本文を上げる --- */
.body,.sec-lead{font-size:16.5px}
.sec-head .sec-lead{font-size:17px;line-height:2.05}
.card__d{font-size:16px;line-height:1.95}
.card__t{font-size:19.5px}
.list li{font-size:16px;line-height:1.95}
.fine{font-size:14px}
.callout__t{font-size:18px;line-height:1.85}
.callout__d{font-size:16.5px}
.kpi__d,.stat__l{font-size:14.5px;line-height:1.85}
.ck-point__d,.ck-sup__d,.who__item span,.prob__d,.faq__a{font-size:16px;line-height:2}
.faq summary{font-size:16.5px}
.offer__d,.demo__d{font-size:16px}
.offer__pts li{font-size:15.5px}
.camp__d{font-size:16.5px;line-height:2.1}
.lp-fv__lead,.fv__lead{font-size:16.5px;line-height:2.05}
.m-text01,.m-text02{font-size:16.5px}
.wp-post{font-size:17px}
.wp-post p{line-height:2.2}
.srcnote{font-size:12px;line-height:1.9}

@media screen and (max-width:640px){
  .body,.sec-lead,.sec-head .sec-lead,.card__d,.list li,
  .ck-point__d,.ck-sup__d,.prob__d,.faq__a,.camp__d,
  .lp-fv__lead,.fv__lead,.m-text01,.m-text02{font-size:15.5px}
  .wp-post{font-size:16px}
  .cmp thead th,.cmp tbody th,.cmp td{font-size:15px}
  .posi__note{font-size:18px}
}


/* ==========================================================
   v26 — 募集枠を立たせる
   費用の3行は「障壁がないこと」の提示、募集枠は「いま動く理由」。
   役割が違うので、表の最終行をサーモンの帯にして分ける。
   ========================================================== */
.camp__spec{padding-bottom:0;overflow:hidden}
.camp__spec-limit{
  margin:12px -22px 0;padding:14px 22px!important;
  background:#f18b73;border-top:0!important;
  align-items:center;
}
.camp__spec-limit dt{
  display:flex;align-items:center;gap:9px;
  color:#16293a!important;font-size:15px;font-weight:700;letter-spacing:.02em;
}
.camp__spec-limit dt span{
  font-size:11px;font-weight:700;letter-spacing:.1em;
  background:#8f3a20;color:#fff;border-radius:4px;padding:3px 8px;
}
.camp__spec-limit dd::before{border-bottom-color:rgba(22,41,58,.32)}
.camp__spec-limit dd em{font-size:15px;font-weight:700;color:#16293a;margin-right:6px}
.camp__spec-limit dd b{font-size:34px;color:#16293a;letter-spacing:-.01em}
.camp__spec-limit dd i{font-size:15px;font-weight:700;color:#16293a;margin-left:4px}

@media screen and (max-width:640px){
  .camp__spec-limit{margin:12px -18px 0;padding:12px 18px!important}
  .camp__spec-limit dd b{font-size:28px}
  .camp__spec-limit dt{font-size:14px}
}


/* ==========================================================
   v27 — 日本語の改行位置
   級数を上げたことで、本文でも「問い／合わせ」のような語中改行が
   出るようになった。本文にも文節区切り（auto-phrase）を効かせる。
   text-wrap:balance を併用すると auto-phrase が無効になるため、
   本文側では balance を使わない。
   ========================================================== */
/* 長い本文に auto-phrase を効かせると、文節が入らない行の行末が
   大きく空いて行長がそろわない。長文は通常の折り返しに戻し、
   語中で割れて困る複合語だけ .nb（nowrap）で個別に守る。 */:where(body.renew) p,:where(body.renew) li,:where(body.renew) dd,:where(body.renew) dt,:where(body.renew) td,:where(body.renew) th,:where(body.renew) figcaption,:where(body.renew) summary,.body,.sec-lead,.camp__d,.camp__upd,.camp__proof,.camp__note,.card__d,.list li,.fine,.offer__d,.demo__d,.offer__pts li,.ck-point__d,.ck-sup__d,.prob__d,.who__item span,.faq__a,.lp-fv__lead,.fv__lead,.lp-fv__note,.m-text01,.m-text02,.wp-post p,.wp-post li,.ar-lead,.micro-pts li,.micro-after,.lp-last__pts li,.doc-list__d,.tk-d,.srcnote,.news__ex,.m-newslist__text{
  word-break:normal;
  line-break:strict;
  text-wrap:wrap;
  overflow-wrap:normal;
}
/* 中央寄せの見出しだけは balance を残す（行の長さがそろうため） */
.sec-h,.phead__jp,.camp__h,.cta h2,.lp-last h2,.ck-last h2,.tk-t,.h3{
  text-wrap:balance;
}


/* 送り仮名を含む複合語は、文節解析でも語中で割れるため禁則をかける */
.nb{white-space:nowrap}
/* 幅が足りないと nowrap が溢れるため無効化していたが、420px では
   一般的なスマホ（375〜430px）がすべて対象になり、改行の禁則が
   まったく効かない状態だった。極端に狭い端末だけに限定する。
   長い語は .nb を分割して短い単位で指定すること。 */
@media screen and (max-width:339px){ .nb{white-space:normal} }

/* ==========================================================
   v28 — キャンペーンのジャンプ率だけ調整（色は変更しない）
   いちばんの問題は、募集枠の数字（34px）が見出し（30px）より
   大きく、データ行が主役になっていたこと。
   見出し > 募集枠の数字 > 条件の値 > 本文 の順に並べ直す。
   ========================================================== */

/* 1. 見出しを主役に。本文 16.5px に対して約2.4倍まで上げる */
.camp__h{
  font-size:clamp(26px,3.4vw,40px);
  line-height:1.48;
  letter-spacing:.02em;
  margin-top:14px;
}

/* 2. 導入文は見出しとの差をつけて据え置き */
.camp__d{font-size:16px;line-height:2.05;margin-top:18px}

/* 3. 条件の値。本文より上、見出しより下 */
.camp__spec dt{font-size:14px}
.camp__spec b{font-size:21px}
.camp__spec i{font-size:14px}

/* 4. 募集枠。条件の値より上、見出しより下に収める */
.camp__spec-limit dt{font-size:15px}
.camp__spec-limit dt span{font-size:11px}
.camp__spec-limit dd em{font-size:15px}
.camp__spec-limit dd b{font-size:27px}
.camp__spec-limit dd i{font-size:15px}

/* 5. 注記は本文よりはっきり小さく落として、階段をつくる */
.camp__eyebrow{font-size:13px}
.camp__upd{font-size:13.5px;line-height:1.95;margin-top:14px}
.camp__proof{font-size:13.5px;line-height:1.95}
.camp__note{font-size:12.5px}

@media screen and (max-width:640px){
  .camp__h{font-size:25px;line-height:1.55}
  .camp__d{font-size:15.5px}
  .camp__spec b{font-size:19px}
  .camp__spec-limit dd b{font-size:24px}
}


/* ==========================================================
   v29 — 募集枠の色を、サーモンの帯にする前の状態に戻す
   条件表と同じ青の面に戻し、強調はジャンプ率（27px）だけで作る。
   ========================================================== */
.camp__spec{padding-bottom:16px;overflow:visible}
.camp__spec-limit{
  margin:0;padding:9px 0!important;
  background:none;
  border-top:1px solid rgba(255,255,255,.42)!important;
  align-items:baseline;
}
.camp__spec-limit dt{
  display:flex;align-items:center;gap:9px;
  color:#dcf0f8!important;font-size:14px;font-weight:400;letter-spacing:.02em;
}
.camp__spec-limit dt span{
  font-size:11px;font-weight:700;letter-spacing:.1em;
  background:rgba(255,255,255,.92);color:#1f7d9c;border-radius:4px;padding:3px 8px;
}
.camp__spec-limit dd::before{border-bottom-color:rgba(255,255,255,.4)}
.camp__spec-limit dd em{font-size:14px;font-weight:400;color:#dcf0f8;margin-right:5px}
.camp__spec-limit dd b{font-size:27px;color:#fff;letter-spacing:.01em}
.camp__spec-limit dd i{font-size:14px;font-weight:700;color:#fff;margin-left:3px}

@media screen and (max-width:640px){
  .camp__spec-limit{margin:0;padding:8px 0!important}
  .camp__spec-limit dd b{font-size:24px}
  .camp__spec-limit dt{font-size:13px}
}


/* ==========================================================
   v30 — デスクトップの級数を一段上げる
   スマホは現状のままにしたいので、container query で
   1001px 以上のときだけ効かせる。
   ========================================================== */
@media screen and (min-width:1001px){

  /* --- 本文まわり --- */body.renew{font-size:17px}
  .body,.sec-lead{font-size:18px;line-height:2.05}
  .sec-head .sec-lead{font-size:18.5px;line-height:2.05}
  .m-text01,.m-text02{font-size:17.5px}
  .list li{font-size:17px;line-height:1.95}
  .card__d{font-size:17px;line-height:1.95}
  .fine{font-size:15px}
  .wp-post{font-size:18px}
  .ar-lead{font-size:19px}

  /* --- 見出し --- */
  .phead__jp{font-size:clamp(30px,3.8vw,42px)}
  .phead__en{font-size:clamp(13px,1.2vw,15px)}
  .sec-head .sec-h,.m-title01__ja-big{font-size:clamp(26px,3.2vw,38px)}
  .sec-head .eyebrow,.m-title01__en{font-size:clamp(13px,1.2vw,15px)}
  .m-title01__ja{font-size:clamp(21px,2.6vw,28px)}
  .h3{font-size:clamp(21px,2.6vw,29px)}
  .m-title02{font-size:26px}
  .card__t{font-size:21px}

  /* --- 表・リスト --- */
  .cmp thead th{font-size:17px}
  .cmp thead th.cmp__ours{font-size:18.5px}
  .cmp tbody th,.cmp td{font-size:17px}
  .cmp thead th small,.cmp td small,.cmp tbody th small{font-size:13.5px}
  .cmp .yes,.cmp .no{font-size:17.5px}
  .tw table th,.tw table td{font-size:16.5px}
  .posi__list b{font-size:18px}
  .posi__col--ours .posi__list b{font-size:22px}
  .posi__list span{font-size:16px}
  .posi__hd{font-size:16px}
  .posi__note{font-size:clamp(20px,2.3vw,25px)}

  /* --- FAQ・お知らせ・記事 --- */
  .faq summary{font-size:17.5px}
  .faq__a{font-size:17px;line-height:2}
  .news__t{font-size:17px}
  .news__ex{font-size:15px;line-height:1.9}
  .m-newslist__text{font-size:16.5px}
  .ar-rel a,.ar-rel button{font-size:15px}
  .ar-side__t{font-size:16.5px}
  .ar-side__d{font-size:14.5px}

  /* --- サービス各ページ --- */
  .lp-fv__h,.ck-fv__h{font-size:clamp(30px,4vw,48px)}
  .lp-fv__lead,.fv__lead{font-size:17.5px;line-height:2.05}
  .lp-fv__pts li,.ck-pts li{font-size:17px}
  .lp-fv__note,.lp-fv__demo{font-size:14.5px}
  .offer__d,.demo__d{font-size:17px}
  .offer__pts li{font-size:16.5px}
  .demo__t{font-size:clamp(21px,2.4vw,26px)}
  .ck-point__d,.ck-sup__d,.prob__d,.who__item span{font-size:17px;line-height:2}
  .ck-point__t,.ck-sup__t{font-size:20px}
  .kpi__d,.stat__l{font-size:15.5px}
  .kpi__k,.delta__k{font-size:13px}
  .callout__t{font-size:19px}
  .callout__d{font-size:17.5px}
  .flow4__t,.ck-flow__t{font-size:18px}
  .flow4__d,.ck-flow__d{font-size:15.5px;line-height:1.95}
  .reason__t{font-size:17px}
  .reason__n{font-size:20px}

  /* --- キャンペーン --- */
  .camp__d{font-size:17px;line-height:2.05}
  .camp__spec dt{font-size:15px}
  .camp__spec b{font-size:22px}
  .camp__spec-limit dt{font-size:15px}
  .camp__spec-limit dd b{font-size:28px}
  .camp__upd,.camp__proof{font-size:14.5px}
  .camp__note{font-size:13px}

  /* --- フォーム・CTA --- */
  .field label{font-size:14.5px}
  .field input,.field textarea,.field select{font-size:16.5px}
  .micro-pts li{font-size:15.5px}
  .micro-after{font-size:14.5px}
  .lp-form__ttl{font-size:19px}
  .lp-form__sub{font-size:13.5px}
  .doc-list__ttl{font-size:16.5px}
  .doc-list__d{font-size:14.5px}
  .tk-t{font-size:clamp(23px,2.8vw,30px)}
  .tk-d{font-size:16.5px}
  .tk-next__i b{font-size:15.5px}
  .tk-next__i span{font-size:13.5px}
  .tk-sum dt,.tk-sum dd{font-size:14.5px}

  /* --- ヘッダー・フッター --- */
  .hdr__nav a,.hdr__nav button{font-size:15px}
  .hdr__sub{font-size:11px}
  .hdr__cta .btn{font-size:15px}
  .l-footer__lead{font-size:15px}
  .l-footer__navi button{font-size:16px}
  .l-footer__office{font-size:15px}
  .l-footer__navi2 a{font-size:15px}
  .l-footer__lic{font-size:12.5px}

  /* --- 注記 --- */
  .srcnote{font-size:12px;line-height:1.95}
  .annot{font-size:13.5px;line-height:1.95}
}


/* ==========================================================
   v31 — 営業資料（2026-08-29 更新）の反映
   ========================================================== */

/* 画面キャプチャの但し書き。下の画像を指していることが分かる形にする */
.shot-note{
  position:relative;display:inline-block;margin:18px auto 0;
  padding:10px 20px 10px 38px;border-radius:10px;
  background:var(--mist);border:1px solid var(--brand-soft);
  font-size:14px;line-height:1.8;color:var(--ink);text-align:left;
}
.shot-note b{color:var(--deep)}
.shot-note::before{
  content:"";position:absolute;left:16px;top:50%;width:10px;height:10px;
  border:solid var(--deep);border-width:0 2px 2px 0;
  transform:translateY(-70%) rotate(45deg);
}
.shot-note::after{
  content:"";position:absolute;left:50%;bottom:-9px;width:16px;height:16px;
  background:var(--mist);border-right:1px solid var(--brand-soft);
  border-bottom:1px solid var(--brand-soft);transform:translateX(-50%) rotate(45deg);
}

/* --- 反応が見える（4ステップ） --- */
.rflow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rflow__i{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:24px 22px 26px}
.rflow__i--hi{border-color:var(--brand);box-shadow:0 20px 46px -30px rgba(31,125,156,.55)}
.rflow__n{display:inline-block;font-family:"Lato",var(--f-jp);font-size:12px;font-weight:700;
  letter-spacing:.16em;color:#fff;background:var(--deep);border-radius:999px;padding:4px 11px}
.rflow__i--hi .rflow__n{background:var(--cta);color:var(--cta-on)}
.rflow__t{display:block;margin-top:14px;font-size:19px;font-weight:700;color:var(--deep);line-height:1.5}
.rflow__d{display:block;margin-top:10px;font-size:15px;line-height:1.95;color:var(--muted)}
.rflow__d b{color:var(--ink)}
.rflow__i:not(:last-child)::after{
  content:"";position:absolute;right:-11px;top:52px;width:8px;height:8px;
  border:solid var(--brand);border-width:2px 2px 0 0;transform:rotate(45deg);
}
.rflow__key{margin:34px 0 0;text-align:center;font-size:clamp(20px,2.5vw,28px);
  font-weight:700;color:var(--deep);line-height:1.6}
.rflow__key b{
  background-image:linear-gradient(transparent 62%,rgba(69,185,223,.34) 62%);
  background-repeat:no-repeat;
}
.rflow__sub{margin:12px auto 0;max-width:44em;text-align:center;font-size:16px;
  line-height:2.05;color:var(--ink)}
.rshot{margin-top:34px}

/* --- 機会損失の試算 --- */
.calc{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1.1fr;gap:14px;align-items:center}
.calc__i{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 20px;
  text-align:center}
.calc__i--out{background:var(--mist);border-color:var(--brand-soft)}
.calc__k{font-size:13px;color:var(--muted);line-height:1.7;min-height:2.6em}
.calc__v{margin-top:8px;display:flex;align-items:baseline;justify-content:center;gap:3px;line-height:1}
.calc__v b{font-family:"Lato",var(--f-jp);font-weight:700;font-size:38px;color:var(--deep);
  letter-spacing:-.01em}
.calc__i--out .calc__v b{font-size:44px;color:var(--cta-dark)}
.calc__v i{font-style:normal;font-size:14px;font-weight:700;color:var(--muted)}
.calc__d{margin-top:8px;font-size:12px;color:var(--muted)}
.calc__op{font-family:"Lato",var(--f-jp);font-size:20px;font-weight:700;color:var(--brand);
  text-align:center}
.calc__op--eq{color:var(--cta-dark)}
.calc__note{margin-top:22px;padding:16px 20px;border-radius:10px;background:var(--mist-2);
  border-left:3px solid var(--cta);font-size:15px;line-height:2;color:var(--ink)}
.calc__note b{color:var(--cta-dark)}

/* --- 立場別の価値 --- */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.role{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 26px}
.role__k{font-family:"Lato",var(--f-jp);font-size:12px;font-weight:700;letter-spacing:.12em;
  color:var(--mid)}
.role__t{margin-top:10px;font-size:21px;font-weight:700;color:var(--deep);line-height:1.5}
.role__l{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.role__l li{position:relative;padding-left:22px;font-size:15px;line-height:1.95;color:var(--ink)}
.role__l li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:2px;background:var(--brand)}
.roles__note{margin-top:26px;text-align:center;font-size:17px;line-height:2;color:var(--ink)}
.roles__note b{color:var(--deep)}

@media screen and (min-width:1001px){
  .rflow__t{font-size:20px}
  .rflow__d{font-size:16px}
  .rflow__sub{font-size:17px}
  .role__t{font-size:22px}
  .role__l li{font-size:16px}
  .roles__note{font-size:18px}
  .calc__k{font-size:14px}
  .calc__note{font-size:16px}
  .shot-note{font-size:15px}
}
@media screen and (max-width:1000px){
  .rflow{grid-template-columns:1fr 1fr}
  .rflow__i:not(:last-child)::after{display:none}
  .roles{grid-template-columns:1fr}
  .calc{grid-template-columns:1fr;gap:10px}
  .calc__op{padding:2px 0}
  .calc__k{min-height:0}
}
@media screen and (max-width:640px){
  .rflow{grid-template-columns:1fr}
  .shot-note{padding:10px 16px 10px 34px;font-size:13.5px}
}


/* 対象が違う機能は、誰向けかを見出しの脇と本文の下で二重に示す */
.label__for{
  display:inline-block;margin-left:10px;padding:3px 10px;border-radius:999px;
  background:#fdf3f0;border:1px solid #f0d9d1;color:#8f3a20;
  font-family:var(--f-jp);font-size:11.5px;font-weight:700;letter-spacing:.02em;
  vertical-align:1px;
}
.feat__for{
  margin-top:16px;padding:14px 18px;border-radius:10px;
  background:#fdf3f0;border:1px solid #f0d9d1;
  font-size:14.5px;line-height:1.95;color:var(--ink);
}
.feat__for b{color:#8f3a20}
@media screen and (min-width:1001px){ .feat__for{font-size:15.5px} }
@media screen and (max-width:640px){
  .label__for{display:block;margin:6px 0 0;width:fit-content}
}


/* ==========================================================
   v32 — CTA下のコピーの間隔／スマホの改行
   ========================================================== */

/* CTA のボタンと補足の間を詰め、1行に「す。」だけ残らないよう行長を絞る */
.micro-after{
  margin-top:11px;max-width:32em;line-height:1.85;
}
.micro-after span{display:inline}
.cta .micro-pts{margin-top:22px}
.cta .cta__b{margin-top:20px}

/* --- スマホの改行 ---
   幅が狭いぶん、通常の折り返しだと「お見せしなが／ら」のように
   語中で割れる。SPは行長が短く文節が収まるので auto-phrase が効く。
   （デスクトップの長文では行末が空きすぎるため入れていない） */
@media screen and (max-width:640px){
  .body,.sec-lead,.sec-head .sec-lead,.card__d,.list li,.fine,
  .lp-fv__lead,.fv__lead,.lp-fv__note,.m-text01,.m-text02,
  .ck-point__d,.ck-sup__d,.prob__d,.who__item span,.faq__a,
  .offer__d,.demo__d,.offer__pts li,.role__l li,.rflow__d,
  .camp__d,.camp__upd,.camp__proof,.micro-pts li,.micro-after,
  .lp-last__pts li,.doc-list__d,.tk-d,.news__ex,.m-newslist__text,
  .flow4__d,.ck-flow__d,.wp-post p,.ar-lead,.feat__for,.calc__note{
    word-break:auto-phrase;
    text-wrap:wrap;
  }
  /* 見出しは balance のままだと auto-phrase が効かないので、
     行数の少ない見出しだけ auto-phrase に切り替える */
  .sec-h,.h3,.camp__h,.cta h2,.lp-last h2,.ck-last h2,.card__t,.role__t,.rflow__t{
    text-wrap:wrap;word-break:auto-phrase;
  }
  .micro-after{max-width:none;margin-top:10px}
}


/* ==========================================================
   v33 — 最終確認で見つけた点
   ========================================================== */
@media screen and (max-width:640px){
  /* グリッドの子は既定で min-width:auto のため、長い見出しがあると
     列が縮まずに親からわずかにはみ出していた */
  .m-newslist__item{min-width:0}
  .m-newslist__item-info,.m-newslist__item-image{min-width:0}
  .news__i,.news__body{min-width:0}
  /* サービス節の抜き背景（左右 -24px）を節の内側で止める */
  .sec-service{overflow:hidden}
}
/* 装飾の波は意図的に2倍幅。親からはみ出さないよう明示的に閉じる */
.phead,.fvx{overflow:hidden}


/* クラスの付いていない段落（共通CTAなど）にもSPの文節改行を効かせる */
@media screen and (max-width:640px){:where(body.renew) p,:where(body.renew) li,:where(body.renew) dd,:where(body.renew) dt,:where(body.renew) td,:where(body.renew) th,:where(body.renew) figcaption{word-break:auto-phrase;text-wrap:wrap}
  /* 値をそろえる表と、字送りを詰めたラベルは対象外 */
  .camp__spec dt,.camp__spec dd,.tk-sum dt,.tk-sum dd,
  .label,.eyebrow,.phead__en,.m-title01__en,.news__date,.pager,.tabs{word-break:normal}
}


/* ==========================================================
   v34 — ボタン内のラベルと補足の間隔
   row-gap 2px + margin 2px に加えて、両者の行間の余りが上下に
   乗るため、実測で 12px 空いていた。行間ごと詰める。
   ========================================================== */
.btn,.m-btn1{row-gap:0;line-height:1.3}
.btn small,.m-btn1 small{margin-top:1px;line-height:1.3}
.sp-cta__b small{margin-top:1px;line-height:1.3}


/* ==========================================================
   v35 — CTA の行間
   本文と同じ 1.95〜2.05 の行間を使っていたため、数行しかない
   CTA では行が離れて見えていた。CTA の中だけ行間を詰める。
   （margin は 19〜22px で妥当だったので触らない）
   ========================================================== */
.cta > .wrap > p{line-height:1.75}
.cta .micro-pts{gap:6px 20px}
.cta .micro-pts li{line-height:1.6}
.cta .micro-after{line-height:1.7}
.cta h2{line-height:1.4}
.cta .cta__b{margin-top:22px}

.lp-last > .wrap > div > p,.lp-last__in > div > p{line-height:1.8}
.lp-last__pts{gap:8px}
.lp-last__pts li{line-height:1.7}

@media screen and (min-width:1001px){
  .cta > .wrap > p{line-height:1.8}
  .cta .micro-after{line-height:1.75}
}
@media screen and (max-width:640px){
  .cta > .wrap > p{line-height:1.85}
  .cta .micro-pts{gap:8px 0}
  .cta .micro-after{line-height:1.8}
}


/* ==========================================================
   v36 — フッターCTA：補足をラベルの上に置く
   2行が窮屈に見えていたので、補足（入力4項目・30秒）を1行目へ。
   ラベルと封筒アイコンが下段にまとまり、視線の落ち所が下に来る。
   ========================================================== */
.l-footer__btn{
  min-height:60px;padding:9px 30px;align-content:center;row-gap:1px;
}
.l-footer__btn small{
  order:-1;flex-basis:100%;margin:0 0 1px;line-height:1.25;opacity:.9;
}
.l-footer__btn::before{order:0}


/* ==========================================================
   v37 — フッターCTAの横幅（デスクトップのみ）
   折り返す flex は、実際は2行でも「全項目を1行に並べた幅」で
   固有幅が決まる。そのため補足のぶんだけ横に余白が出ていた。
   上限幅を与えて、ラベル基準の幅に収める。
   ========================================================== */
@media screen and (min-width:1001px){
  .l-footer__btn{padding:9px 24px;max-width:216px}
  .l-footer__btn2{padding:0 24px}
  .l-footer__contact{gap:10px}
}


/* ==========================================================
   v38 — スマホのハンバーガーメニュー
   下部に固定CTAがあるため、ヘッダーは案内に徹する。
   ドロワーはスティッキーヘッダーの直下に絶対配置し、
   スクロール中も画面内に出るようにする。
   ========================================================== */
.hdr__burger{
  display:none;position:relative;flex:none;
  width:44px;height:44px;border:0;background:none;cursor:pointer;padding:0;
}
.hdr__burger span{
  position:absolute;left:11px;width:22px;height:2px;border-radius:2px;
  background:var(--deep);transition:transform .28s var(--ease),opacity .18s ease;
}
.hdr__burger span:nth-child(1){top:15px}
.hdr__burger span:nth-child(2){top:21px}
.hdr__burger span:nth-child(3){top:27px}
.hdr__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hdr__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hdr__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.navdrawer{
  position:absolute;top:100%;left:0;right:0;z-index:59;
  background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 24px 40px -28px rgba(15,90,117,.55);
  padding:8px 20px 20px;
  max-height:calc(100dvh - 170px);overflow:auto;
  animation:navIn .24s var(--ease) both;
}
@keyframes navIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.navdrawer__list{list-style:none;margin:0;padding:0}
.navdrawer__list li + li{border-top:1px solid var(--line)}
.navdrawer__list a,.navdrawer__list button{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:15px 2px;background:none;border:0;cursor:pointer;
  font-family:var(--f-jp);font-size:16px;font-weight:700;color:var(--ink);text-align:left;
}
.navdrawer__list a span,.navdrawer__list button span{font-size:11px;font-weight:400;letter-spacing:.12em;color:var(--muted)}
.navdrawer__list a .newtag,.navdrawer__list button .newtag{font-style:normal}
.navdrawer__list a::after,.navdrawer__list button::after{
  content:"";margin-left:auto;width:7px;height:7px;flex:none;
  border:solid var(--brand);border-width:2px 2px 0 0;transform:rotate(45deg);
}
.navdrawer__cta{display:grid;gap:10px;margin-top:16px}
.navdrawer__cta .btn{width:100%;min-width:0;max-width:none}

@media screen and (max-width:760px){
  .hdr__burger{display:block}
  .hdr__cta .btn{display:none}
  .hdr__cta{gap:0}
}
@media screen and (min-width:761px){
  .navdrawer{display:none}
}


/* ==========================================================
   v39 — ラベル位置のロゴ／理解を助けるアイコン
   アイコンは「並列に並ぶものを見分ける」場面にだけ入れる。
   本文中や、番号・ラベルで既に見分けがつく箇所には入れない。
   ========================================================== */
.brandlogo{display:inline-block;line-height:0}
.brandlogo img{width:auto;height:22px;display:block}
.posi__col--ours .posi__list .brandlogo img{height:26px}
.brandlogo--th{display:block;margin:0 auto 4px}
.brandlogo--th img{height:21px;margin-inline:auto}

.ci{
  display:inline-block;flex:none;width:22px;height:22px;
  background-color:var(--deep);
}
.card > .ci{width:30px;height:30px;margin-bottom:12px;background-color:var(--brand)}
.card--lead > .ci{background-color:var(--deep)}
.rflow__i > .ci{width:24px;height:24px;margin:14px 0 -4px;background-color:var(--brand)}
.rflow__i--hi > .ci{background-color:var(--cta)}
.role__k{display:flex;align-items:center;gap:8px}
.role__k .ci{width:19px;height:19px;background-color:var(--mid)}
.ci--connect{-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9.9%2014.1a1%201%200%200%201%200-1.4l2.8-2.8a1%201%200%200%201%201.4%201.4l-2.8%202.8a1%201%200%200%201-1.4%200Z%22%2F%3E%3Cpath%20d%3D%22M13.6%207.3a4.5%204.5%200%200%201%206.4%206.4l-2.1%202.1a1%201%200%200%201-1.4-1.4l2.1-2.1a2.5%202.5%200%200%200-3.6-3.6l-2.1%202.1a1%201%200%201%201-1.4-1.4l2.1-2.1Zm-3%209.4a1%201%200%200%201%200%201.4l-2.1%202.1a4.5%204.5%200%200%201-6.4-6.4l2.1-2.1a1%201%200%201%201%201.4%201.4l-2.1%202.1a2.5%202.5%200%200%200%203.6%203.6l2.1-2.1a1%201%200%200%201%201.4%200Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9.9%2014.1a1%201%200%200%201%200-1.4l2.8-2.8a1%201%200%200%201%201.4%201.4l-2.8%202.8a1%201%200%200%201-1.4%200Z%22%2F%3E%3Cpath%20d%3D%22M13.6%207.3a4.5%204.5%200%200%201%206.4%206.4l-2.1%202.1a1%201%200%200%201-1.4-1.4l2.1-2.1a2.5%202.5%200%200%200-3.6-3.6l-2.1%202.1a1%201%200%201%201-1.4-1.4l2.1-2.1Zm-3%209.4a1%201%200%200%201%200%201.4l-2.1%202.1a4.5%204.5%200%200%201-6.4-6.4l2.1-2.1a1%201%200%201%201%201.4%201.4l-2.1%202.1a2.5%202.5%200%200%200%203.6%203.6l2.1-2.1a1%201%200%200%201%201.4%200Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.ci--schedule{-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8%202a1%201%200%200%201%201%201v1h6V3a1%201%200%201%201%202%200v1h1.5A2.5%202.5%200%200%201%2021%206.5v12a2.5%202.5%200%200%201-2.5%202.5h-13A2.5%202.5%200%200%201%203%2018.5v-12A2.5%202.5%200%200%201%205.5%204H7V3a1%201%200%200%201%201-1ZM5%2010v8.5c0%20.3.2.5.5.5h13c.3%200%20.5-.2.5-.5V10H5Zm14-2V6.5c0-.3-.2-.5-.5-.5H17v1a1%201%200%201%201-2%200V6H9v1a1%201%200%200%201-2%200V6H5.5c-.3%200-.5.2-.5.5V8h14Z%22%2F%3E%3Cpath%20d%3D%22M7.5%2012.5h3v3h-3z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8%202a1%201%200%200%201%201%201v1h6V3a1%201%200%201%201%202%200v1h1.5A2.5%202.5%200%200%201%2021%206.5v12a2.5%202.5%200%200%201-2.5%202.5h-13A2.5%202.5%200%200%201%203%2018.5v-12A2.5%202.5%200%200%201%205.5%204H7V3a1%201%200%200%201%201-1ZM5%2010v8.5c0%20.3.2.5.5.5h13c.3%200%20.5-.2.5-.5V10H5Zm14-2V6.5c0-.3-.2-.5-.5-.5H17v1a1%201%200%201%201-2%200V6H9v1a1%201%200%200%201-2%200V6H5.5c-.3%200-.5.2-.5.5V8h14Z%22%2F%3E%3Cpath%20d%3D%22M7.5%2012.5h3v3h-3z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.ci--record{-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7%202h7.2a1%201%200%200%201%20.7.3l4.8%204.8a1%201%200%200%201%20.3.7V20a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2Zm0%202v16h11V9h-3.5A1.5%201.5%200%200%201%2013%207.5V4H7Zm8%20.9V7h2.1L15%204.9Z%22%2F%3E%3Cpath%20d%3D%22M9.3%2013.6a1%201%200%200%201%201.4%200l1%201%202.6-2.7a1%201%200%201%201%201.4%201.4l-3.3%203.4a1%201%200%200%201-1.4%200l-1.7-1.7a1%201%200%200%201%200-1.4Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7%202h7.2a1%201%200%200%201%20.7.3l4.8%204.8a1%201%200%200%201%20.3.7V20a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2Zm0%202v16h11V9h-3.5A1.5%201.5%200%200%201%2013%207.5V4H7Zm8%20.9V7h2.1L15%204.9Z%22%2F%3E%3Cpath%20d%3D%22M9.3%2013.6a1%201%200%200%201%201.4%200l1%201%202.6-2.7a1%201%200%201%201%201.4%201.4l-3.3%203.4a1%201%200%200%201-1.4%200l-1.7-1.7a1%201%200%200%201%200-1.4Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.ci--send{-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M21.4%202.6a1%201%200%200%201%20.2%201.1l-7%2016a1%201%200%200%201-1.8.1L9.6%2014%204%2010.2a1%201%200%200%201%20.1-1.8l16-7a1%201%200%200%201%201.3.2ZM11.2%2013.4l2%203.6%204.6-10.6-6.6%207Zm-.9-1.5%207-6.6L6.7%209.9l3.6%202Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M21.4%202.6a1%201%200%200%201%20.2%201.1l-7%2016a1%201%200%200%201-1.8.1L9.6%2014%204%2010.2a1%201%200%200%201%20.1-1.8l16-7a1%201%200%200%201%201.3.2ZM11.2%2013.4l2%203.6%204.6-10.6-6.6%207Zm-.9-1.5%207-6.6L6.7%209.9l3.6%202Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.ci--open{-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11.4%202.2a1%201%200%200%201%201.2%200l9%206.6a1%201%200%200%201%20.4.8v9.9A2.5%202.5%200%200%201%2019.5%2022h-15A2.5%202.5%200%200%201%202%2019.5V9.6a1%201%200%200%201%20.4-.8l9-6.6ZM4%2011.5v8c0%20.3.2.5.5.5h15c.3%200%20.5-.2.5-.5v-8l-7.4%205a1%201%200%200%201-1.2%200L4%2011.5Zm8%203%207.1-4.8L12%204.3%204.9%209.7%2012%2014.5Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11.4%202.2a1%201%200%200%201%201.2%200l9%206.6a1%201%200%200%201%20.4.8v9.9A2.5%202.5%200%200%201%2019.5%2022h-15A2.5%202.5%200%200%201%202%2019.5V9.6a1%201%200%200%201%20.4-.8l9-6.6ZM4%2011.5v8c0%20.3.2.5.5.5h15c.3%200%20.5-.2.5-.5v-8l-7.4%205a1%201%200%200%201-1.2%200L4%2011.5Zm8%203%207.1-4.8L12%204.3%204.9%209.7%2012%2014.5Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.ci--eye{-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%204.5c5%200%209%204%2010.6%206.7a1.6%201.6%200%200%201%200%201.6C21%2015.5%2017%2019.5%2012%2019.5S3%2015.5%201.4%2012.8a1.6%201.6%200%200%201%200-1.6C3%208.5%207%204.5%2012%204.5Zm0%202C8.2%206.5%204.9%209.5%203.4%2012c1.5%202.5%204.8%205.5%208.6%205.5s7.1-3%208.6-5.5c-1.5-2.5-4.8-5.5-8.6-5.5Z%22%2F%3E%3Cpath%20d%3D%22M12%208.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7Zm0%202a1.5%201.5%200%201%200%200%203%201.5%201.5%200%200%200%200-3Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%204.5c5%200%209%204%2010.6%206.7a1.6%201.6%200%200%201%200%201.6C21%2015.5%2017%2019.5%2012%2019.5S3%2015.5%201.4%2012.8a1.6%201.6%200%200%201%200-1.6C3%208.5%207%204.5%2012%204.5Zm0%202C8.2%206.5%204.9%209.5%203.4%2012c1.5%202.5%204.8%205.5%208.6%205.5s7.1-3%208.6-5.5c-1.5-2.5-4.8-5.5-8.6-5.5Z%22%2F%3E%3Cpath%20d%3D%22M12%208.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7Zm0%202a1.5%201.5%200%201%200%200%203%201.5%201.5%200%200%200%200-3Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.ci--chat{-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4.5%203h15A2.5%202.5%200%200%201%2022%205.5v9a2.5%202.5%200%200%201-2.5%202.5H13l-4.2%203.8A1%201%200%200%201%207%2020.1V17H4.5A2.5%202.5%200%200%201%202%2014.5v-9A2.5%202.5%200%200%201%204.5%203ZM4%205.5v9c0%20.3.2.5.5.5H8a1%201%200%200%201%201%201v1.9l2.8-2.6a1%201%200%200%201%20.7-.3h7c.3%200%20.5-.2.5-.5v-9c0-.3-.2-.5-.5-.5h-15c-.3%200-.5.2-.5.5Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4.5%203h15A2.5%202.5%200%200%201%2022%205.5v9a2.5%202.5%200%200%201-2.5%202.5H13l-4.2%203.8A1%201%200%200%201%207%2020.1V17H4.5A2.5%202.5%200%200%201%202%2014.5v-9A2.5%202.5%200%200%201%204.5%203ZM4%205.5v9c0%20.3.2.5.5.5H8a1%201%200%200%201%201%201v1.9l2.8-2.6a1%201%200%200%201%20.7-.3h7c.3%200%20.5-.2.5-.5v-9c0-.3-.2-.5-.5-.5h-15c-.3%200-.5.2-.5.5Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.ci--owner{-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%203a1%201%200%200%201%201%201v15h16a1%201%200%201%201%200%202H3.5A1.5%201.5%200%200%201%202%2019.5V4a1%201%200%200%201%201-1Z%22%2F%3E%3Cpath%20d%3D%22M20.7%206.3a1%201%200%200%201%200%201.4l-5%205a1%201%200%200%201-1.4%200l-2.6-2.6-3.9%204a1%201%200%201%201-1.4-1.4l4.6-4.7a1%201%200%200%201%201.4%200L15%2010.6l4.3-4.3a1%201%200%200%201%201.4%200Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%203a1%201%200%200%201%201%201v15h16a1%201%200%201%201%200%202H3.5A1.5%201.5%200%200%201%202%2019.5V4a1%201%200%200%201%201-1Z%22%2F%3E%3Cpath%20d%3D%22M20.7%206.3a1%201%200%200%201%200%201.4l-5%205a1%201%200%200%201-1.4%200l-2.6-2.6-3.9%204a1%201%200%201%201-1.4-1.4l4.6-4.7a1%201%200%200%201%201.4%200L15%2010.6l4.3-4.3a1%201%200%200%201%201.4%200Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.ci--staff{-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202.5a4.75%204.75%200%201%201%200%209.5%204.75%204.75%200%200%201%200-9.5Zm0%202a2.75%202.75%200%201%200%200%205.5%202.75%202.75%200%200%200%200-5.5Z%22%2F%3E%3Cpath%20d%3D%22M12%2013.5c4.4%200%208%202.6%208%205.9V21a1%201%200%200%201-1%201H5a1%201%200%200%201-1-1v-1.6c0-3.3%203.6-5.9%208-5.9Zm0%202c-3.5%200-6%202-6%203.9V20h12v-.6c0-1.9-2.5-3.9-6-3.9Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202.5a4.75%204.75%200%201%201%200%209.5%204.75%204.75%200%200%201%200-9.5Zm0%202a2.75%202.75%200%201%200%200%205.5%202.75%202.75%200%200%200%200-5.5Z%22%2F%3E%3Cpath%20d%3D%22M12%2013.5c4.4%200%208%202.6%208%205.9V21a1%201%200%200%201-1%201H5a1%201%200%200%201-1-1v-1.6c0-3.3%203.6-5.9%208-5.9Zm0%202c-3.5%200-6%202-6%203.9V20h12v-.6c0-1.9-2.5-3.9-6-3.9Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.ci--partner{-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9%202.5a4.25%204.25%200%201%201%200%208.5%204.25%204.25%200%200%201%200-8.5Zm0%202a2.25%202.25%200%201%200%200%204.5%202.25%202.25%200%200%200%200-4.5Z%22%2F%3E%3Cpath%20d%3D%22M9%2012.5c4%200%207.3%202.4%207.3%205.5V21a1%201%200%200%201-1%201h-12a1%201%200%200%201-1-1v-3c0-3.1%203.3-5.5%206.7-5.5Zm0%202c-2.6%200-4.7%201.7-4.7%203.5V20h9.3v-2c0-1.8-2-3.5-4.6-3.5Z%22%2F%3E%3Cpath%20d%3D%22M17%204.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7Zm0%202a1.5%201.5%200%201%200%200%203%201.5%201.5%200%200%200%200-3Zm.6%206.5c2.9.1%205.4%201.9%205.4%204.4V21a1%201%200%200%201-1%201h-3.2v-2H21v-1.6c0-1.2-1.4-2.3-3.4-2.4l-.6-.9Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9%202.5a4.25%204.25%200%201%201%200%208.5%204.25%204.25%200%200%201%200-8.5Zm0%202a2.25%202.25%200%201%200%200%204.5%202.25%202.25%200%200%200%200-4.5Z%22%2F%3E%3Cpath%20d%3D%22M9%2012.5c4%200%207.3%202.4%207.3%205.5V21a1%201%200%200%201-1%201h-12a1%201%200%200%201-1-1v-3c0-3.1%203.3-5.5%206.7-5.5Zm0%202c-2.6%200-4.7%201.7-4.7%203.5V20h9.3v-2c0-1.8-2-3.5-4.6-3.5Z%22%2F%3E%3Cpath%20d%3D%22M17%204.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%200%201%200-7Zm0%202a1.5%201.5%200%201%200%200%203%201.5%201.5%200%200%200%200-3Zm.6%206.5c2.9.1%205.4%201.9%205.4%204.4V21a1%201%200%200%201-1%201h-3.2v-2H21v-1.6c0-1.2-1.4-2.3-3.4-2.4l-.6-.9Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}

/* 3枚のカードでアイコンの色と位置をそろえる（主役は枠と見出しで示す） */
.card--lead > .ci{background-color:var(--brand)}
.card--lead .card__badge{margin-bottom:6px}
.card > .ci{margin-bottom:14px}


/* flex + gap だと、禁則用の span が別の項目として隙間になる。
   ラベルは通常の行として組み、アイコンだけ行内に置く。 */
.role__k{display:block}
.role__k .ci{vertical-align:-4px;margin-right:7px}


/* ==========================================================
   v40 — 余白と改行の整理（縦を詰める）
   ========================================================== */

/* アイコンは見出しラベルと同じ行に置く */
.label--ico{display:flex;align-items:center;gap:8px}
.card > .ci{display:none}
.label--ico .ci{width:20px;height:20px;background-color:var(--brand);flex:none}
.card--lead .label--ico .ci{background-color:var(--deep)}

/* カード内の説明を下端に寄せていたため、短いカードに空白が残っていた */
.card__d{margin-top:10px;padding-top:0}

/* 面のあるセクションだけ 104px と大きく、他は 62px で不揃いだった。
   全体を詰めつつ、面のあるセクションは少しだけ広く保つ。 */:where(body.renew) section{padding:56px 0}
.sec--mist,.sec--mist2,.sec--dot,.ck-mist{padding:72px 0}
.sec-head{margin-bottom:38px}
.feat + .feat{margin-top:68px}
.cta{padding:76px 0}
.camp{padding:56px 0}
.sec-service{padding-top:72px}
.sec-service__elm{padding-top:56px;padding-bottom:56px}
.sec-logo{padding:72px 0}

@media screen and (max-width:1000px){
  .feat + .feat{margin-top:48px}
}
@media screen and (max-width:640px){:where(body.renew) section,.sec--mist,.sec--mist2,.sec--dot,.ck-mist{padding:48px 0}
  .cta{padding:52px 0}
  .camp{padding:40px 0}
  .sec-head{margin-bottom:30px}
}


/* 「ここが他社にない」の帯が1行ぶん高さを足し、他の2枚に空白が残っていた。
   カードの右上に重ねて、3枚の内容の高さをそろえる。 */
.card--lead{position:relative}
.card--lead .card__badge{
  position:absolute;top:14px;right:16px;margin:0;
}
.card--lead .label--ico{padding-right:96px}
@media screen and (max-width:640px){
  .card--lead .card__badge{position:static;display:inline-block;margin-bottom:8px}
  .card--lead .label--ico{padding-right:0}
}


/* ==========================================================
   v41 — トップFVのコピーを大きく（デスクトップのみ）
   コピーは画像なので、画像幅を上げる。下線は固定 vw ではなく
   「その行の幅」に追従させて、サイズを変えてもズレないようにする。
   ========================================================== */
.mv-copy__l1{--ulw:100%}
.mv-copy__l2{--ulw:calc(100% - clamp(14px,3vw,44px))}
@keyframes mvLineIn{from{width:0}to{width:var(--ulw)}}
.js-motion .mv-copy__l1::after,
.js-motion .mv-copy__l2::after{animation:mvLineIn .5s linear forwards}
.js-motion .mv-copy__l1::after{animation-delay:1.5s}
.js-motion .mv-copy__l2::after{animation-delay:1.8s}
@media (prefers-reduced-motion:reduce){
  .mv-copy__l1::after,.mv-copy__l2::after{width:var(--ulw);animation:none}
}

@media screen and (min-width:1001px){
  .mv-copy{gap:6px}
  .mv-copy__l1 img,.mv-copy__l2 img{width:clamp(300px,31vw,430px)}
  .mv-copy__l2 img{margin-left:clamp(20px,3.4vw,56px)}
  .mv-copy__l2{--ulw:calc(100% - clamp(20px,3.4vw,56px))}
  .mv-copy__en{margin-top:24px;margin-left:clamp(40px,7vw,116px)}
  .mv-copy__en img{width:clamp(230px,27vw,380px)}
  .mv-copy__l1::after,.mv-copy__l2::after{height:5px}
  .fvx{min-height:min(82vh,720px)}
}


/* ==========================================================
   v42 — トップFVの背景を既存サイトと同じ濃さに
   実サイトは opacity:1 / filter:none / 疑似要素なしで、写真に
   白いカバーを一切かけていない。こちらは白のグラデーションを
   重ねていたため薄く見えていた。カバーを外す。
   下端の波も、SVGではなく既存と同じ bg_wave 画像にする。
   ========================================================== */
.fvx__scrim{display:none}
.fvx{background:#eef6fa}
.fvx__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.fvx__wave{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  height:clamp(90px,14vw,200px);
  background:url("../img/renew/bg_wave.jpg") bottom center/100% 100% no-repeat;
  pointer-events:none;
}
.fvx__in{position:relative;z-index:2}

/* スマホは写真の明るい部分が狭く、白コピーが読みにくくなるので
   ごく薄いカバーだけ残す（実サイトはSP専用の写真を使っている） */
@media screen and (max-width:640px){
  .fvx__scrim{
    display:block;
    background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.05) 46%,rgba(255,255,255,0) 100%);
  }
  .fvx__wave{height:64px}
}


/* JPEG に変換した波は背景が白くなり、写真を隠してしまっていた。
   FV は透過PNGを使い、写真の上に重ねる（既存サイトと同じ見え方）。 */
.fvx__wave{
  background-image:url("../img/renew/bg_wave_fv.png");
  background-size:100% 100%;
  background-position:bottom center;
  background-repeat:no-repeat;
  height:clamp(80px,11vw,168px);
}
@media screen and (max-width:640px){ .fvx__wave{height:54px} }


/* ==========================================================
   v43 — トップの SERVICE の間隔
   帯の下 56px ＋ セクション下 56px ＋ 次のセクション上 72px で
   184px 空いていた。帯の外側の余白を整理する。
   ========================================================== */
.sec-service{padding-top:52px;padding-bottom:0}
.sec-service .m-title01{margin-bottom:32px}
.sec-service__elm{padding-top:46px;padding-bottom:46px}
.sec-service--last{padding-bottom:52px}
.sec-service--last .stats{margin-top:46px}

@media screen and (max-width:1000px){
  .sec-service{padding-top:44px}
  .sec-service .m-title01{margin-bottom:26px}
  .sec-service__elm{padding-top:36px;padding-bottom:36px}
  .sec-service--last{padding-bottom:44px}
  .sec-service--last .stats{margin-top:34px}
}


/* ==========================================================
   v44 — 公開後の事業所ページ／メールの差し込み
   ========================================================== */
.shotcap{margin-top:10px;font-size:13px;line-height:1.8;color:var(--muted);text-align:center}
.mailblk{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:center;
  margin-top:34px;padding:30px 34px;background:#fff;border:1px solid var(--line);border-radius:16px;
}
.mailblk__b .h3{font-size:clamp(19px,2.2vw,25px);line-height:1.55}
.mailblk__b .list{margin-top:16px}
.mailblk__b .list li b{color:var(--deep)}
.mailblk__shot{margin:0}
.mailblk__shot img{
  width:100%;height:auto;border-radius:10px;border:1px solid var(--line);display:block;
  box-shadow:0 18px 40px -28px rgba(15,90,117,.5);
}
.mailblk__shot .shotcap{text-align:left}
@media screen and (min-width:1001px){ .shotcap{font-size:13.5px} }
@media screen and (max-width:1000px){
  .mailblk{grid-template-columns:1fr;gap:24px;padding:24px 22px}
  .mailblk__shot{max-width:340px;margin-inline:auto}
  .mailblk__shot .shotcap{text-align:center}
}

/* ---- v45: 課題→解決の対比ブロック（機能の詳細を出さない見せ方） ---- */
.d-nobr{display:inline}
.ba{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.ba__i{display:grid;grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);
  background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 18px 44px -34px rgba(15,90,117,.45)}
.ba__c{padding:26px 30px}
.ba__c--b{background:#f4f7f9}
.ba__k{font-family:var(--f-en);font-size:11.5px;letter-spacing:.2em;color:var(--muted);margin-bottom:9px}
.ba__c--a .ba__k{color:var(--deep)}
.ba__t{font-size:19px;line-height:1.65;font-weight:600;color:#6b7a83}
.ba__c--a .ba__t{color:var(--deep);font-weight:700}
.ba__d{margin-top:9px;font-size:14.5px;line-height:1.9;color:var(--muted)}
.ba__ar{position:relative;background:#f4f7f9}
.ba__ar::before{content:"";position:absolute;top:50%;left:50%;width:15px;height:15px;
  margin:-7px 0 0 -9px;background-color:var(--brand);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.3%204.3a1%201%200%200%201%201.4%200l7%207a1%201%200%200%201%200%201.4l-7%207a1%201%200%200%201-1.4-1.4l5.3-5.3H3a1%201%200%201%201%200-2h15.6l-5.3-5.3a1%201%200%200%201%200-1.4Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.3%204.3a1%201%200%200%201%201.4%200l7%207a1%201%200%200%201%200%201.4l-7%207a1%201%200%200%201-1.4-1.4l5.3-5.3H3a1%201%200%201%201%200-2h15.6l-5.3-5.3a1%201%200%200%201%200-1.4Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.feat--tight{margin-top:56px}
@media screen and (min-width:1001px){
  .ba__t{font-size:21px}
  .ba__d{font-size:15.5px}
}
@media screen and (max-width:760px){
  .d-nobr{display:none}
  .ba__i{grid-template-columns:1fr}
  .ba__c{padding:20px 22px}
  .ba__ar{height:34px}
  .ba__ar::before{transform:rotate(90deg)}
  .feat--tight{margin-top:40px}
}
/* ---- v46: 画面はラベルのみで見せる（説明テキストは置かない） ---- */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:26px 26px;margin-top:8px}
.shots__i{margin:0}
.shots__i img{width:100%;display:block;border:1px solid var(--line);border-radius:12px;
  aspect-ratio:16/10;object-fit:cover;object-position:top center;
  box-shadow:0 18px 44px -30px rgba(15,90,117,.5)}
.shots__i figcaption{margin-top:11px;font-size:15px;line-height:1.7;color:var(--deep);font-weight:600;text-align:center}
.shots__i figcaption small{display:block;font-size:12.5px;font-weight:400;color:var(--muted);margin-top:2px}
@media screen and (max-width:760px){
  .shots{grid-template-columns:1fr;gap:22px}
  .shots__i img{aspect-ratio:16/11}
  .shots__i figcaption{font-size:14px}
}
/* ---- v47: 訴求ロジック（集客・採用・効率化）とエモの一文 ---- */
.ba__cat{display:inline-block;margin-right:9px;padding:3px 9px;border-radius:99px;
  background:var(--deep);color:#fff;font-family:var(--f-jp);font-size:11px;
  letter-spacing:.06em;font-weight:700;vertical-align:1px}
.lp-fv__pts li b{display:inline-block;margin-right:10px;padding:3px 10px;border-radius:99px;
  background:var(--deep);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.06em;vertical-align:1px}
.emo{margin:56px auto 0;max-width:26em;text-align:center;color:var(--deep);
  font-size:clamp(20px,2.4vw,28px);line-height:1.6;font-weight:700}
.emo__d{margin:16px auto 0;max-width:40em;text-align:center;color:var(--muted);
  font-size:16px;line-height:2.05}
@media screen and (max-width:760px){
  .emo{margin-top:40px;font-size:20px}
  .emo__d{font-size:15px;line-height:1.95}
}
/* ---- v48: 画面訴求ブロックのラベル内チップ ---- */
.label .ba__cat{margin-right:10px;vertical-align:2px}
.feat .body{max-width:26em}
/* ---- v49: FVの3点は1行に収める ---- */
.lp-fv__pts li{white-space:nowrap}
@media screen and (max-width:400px){
  .lp-fv__pts li{font-size:14px}
  .lp-fv__pts li b{margin-right:8px;padding:2px 8px;font-size:11px}
}
/* ---- v50: セクション統合にともなう小見出し ---- */
.submid{margin:52px auto 26px;max-width:34em;text-align:center;color:var(--muted);
  font-size:clamp(16px,1.9vw,19px);line-height:1.85}
.submid b{display:block;margin-top:4px;color:var(--deep);font-size:1.12em}
@media screen and (max-width:760px){ .submid{margin:38px auto 20px;font-size:16px} }
/* ---- v51: 記事本文の写真（既存記事と同じく本文中に入る） ---- */
.wp-figure{margin:26px 0 30px}
.wp-figure img{width:100%;height:auto;display:block;border-radius:8px}
.wp-figure figcaption{margin-top:9px;font-size:13.5px;color:var(--muted);line-height:1.8}
.wp-figs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0 30px}
.wp-figs .wp-figure{margin:0}
@media screen and (max-width:640px){
  .wp-figs{grid-template-columns:1fr;gap:14px}
}
/* ---- v52: 文中のロゴ差し替え ---- */
.brandlogo--h2 img{height:.86em;vertical-align:-0.02em}
.brandlogo--inline img{height:1.05em;vertical-align:-0.14em}
.brandlogo--sm img{height:1em;vertical-align:-0.13em}
.brandlogo--h2,.brandlogo--inline,.brandlogo--sm{line-height:0}
.brandlogo--btn{line-height:0}
.brandlogo--btn img{height:1em;vertical-align:-0.13em;filter:brightness(0) invert(1)}
.wp-post ul{margin:0 0 22px;padding-left:1.3em;list-style:disc}
.wp-post ul li{line-height:2.05;margin-bottom:6px}
.ar-cats--arch{max-height:none}
.ar-side__note{margin-top:10px;font-size:12px;color:var(--muted);line-height:1.7}
/* ---- v54: POSITIONING 右カラムの余白配分とジャンプ率 ---- */
@media screen and (min-width:1001px){
  /* 左カラムは4項目、右は1項目なので、下に大きな空きが残っていた。
     結論の一文を下端に寄せて、空きを上下に配分する。 */
  .posi__col--ours{display:flex;flex-direction:column}
  .posi__col--ours .posi__list{margin-bottom:8px}
  /* ロゴと説明文が小さく、結論の一文とのあいだが空いて見えていた。
     ロゴを大きくし、説明文との間隔を詰める。 */
  .posi__col--ours .posi__hd{font-size:16px}
  .posi__col--ours .posi__list li{gap:14px}
  .posi__col--ours .posi__list .brandlogo img{height:34px}
  .posi__col--ours .posi__list span{font-size:17.5px;line-height:1.95}
  .posi__note{margin-top:auto;padding-top:26px;
    font-size:clamp(22px,2.7vw,29px);line-height:1.55;font-weight:700}
  /* 数字だけを一段大きく・太くして、文中でのジャンプ率を上げる */
  .posi__note b{font-size:1.62em;font-weight:900;letter-spacing:-.01em}
}
/* ---- v55: POSITIONING 右カラムを箇条書きにする ---- */
.posi__pts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
/* 親の .posi__list li が flex 指定のため、入れ子の li は明示的に戻す
   （そのままだと <span class="nb"> が別行に落ちる） */
.posi__pts li{display:block;position:relative;padding-left:20px;
  font-size:15px;line-height:1.75;color:var(--muted)}
.posi__pts li::before{content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;background:var(--brand);border-radius:2px}
@media screen and (min-width:1001px){
  .posi__pts{gap:12px}
  .posi__pts li{font-size:17.5px;line-height:1.8;padding-left:24px}
  .posi__pts li::before{width:9px;height:9px;top:.66em}
}
/* ---- v56: キャンペーンの「枠」を費用表から独立させる ----
   条件表の一行に置いていたため「問い合わせが月10件まで」と読まれる余地があった。
   何の上限なのかを枠の中で明示し、あわせて限定であることを見た目でも伝える。 */
.camp__specttl{margin:26px 0 10px;font-size:14.5px;font-weight:700;color:#eaf7fc;
  letter-spacing:.02em}
.camp__spec{margin-top:0}
/* 申し込みボタンの上に、限定であることを一行で置く */
.camp__b{align-items:flex-end}
.camp__b__c{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.camp__micro{display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:19px;font-weight:700;color:#fff;letter-spacing:.02em;white-space:nowrap;
  line-height:1.3}
.camp__micro b{font-family:"Lato",var(--f-jp);font-size:38px;font-weight:900;
  color:#fff;letter-spacing:-.01em}
.camp__micro::before{content:"＼"}
.camp__micro::after{content:"／"}
.camp__micro::before,.camp__micro::after{color:#fff;font-size:23px;font-weight:700}
@media screen and (max-width:640px){
  .camp__b{align-items:stretch}
  .camp__b__c{width:100%}
  .camp__micro{font-size:16.5px;gap:6px}
  .camp__micro b{font-size:31px}
  .camp__micro::before,.camp__micro::after{font-size:20px}
}
/* ---- v57: 37.6% ブロック ---- */
/* .callout__n span{font-size:.45em} が「%」だけでなく数字にも効いていて、
   親を大きくしても数字が 0.45 倍のままだった。数字は等倍に戻す。 */
.callout__n{font-size:clamp(56px,7.4vw,88px)}
.callout__n span[data-count]{font-size:1em;letter-spacing:-.02em}
.callout__n > span:last-child{font-size:.46em;margin-left:2px}
@media screen and (max-width:640px){
  /* 2カラムのままだと右側の文が細長く折り返して読みにくいので、
     スマホでは数字を上に置いて全幅で読ませる */
  .callout{grid-template-columns:1fr;gap:14px;padding:26px 22px}
  .callout__n{grid-row:auto;grid-column:1;font-size:62px;align-self:start}
  .callout__t{grid-column:1;grid-row:auto;font-size:16.5px;line-height:1.85}
  .callout__d{grid-column:1;grid-row:auto;font-size:15.5px}
}

/* ---- v58: 出典は数字のすぐ下に置き、そのあとに次への一文を置く ---- */
.submid{margin-top:46px}
@media screen and (max-width:760px){ .submid{margin-top:36px} }

/* ---- v59: 費用表を前段のリード文から離す ---- */
.camp__spec{margin-top:34px}
@media screen and (min-width:1001px){ .camp__spec{margin-top:40px} }
@media screen and (max-width:640px){ .camp__spec{margin-top:28px} }


/* ---- v61: スマホの間隔 ---- */
@media screen and (max-width:640px){
  /* カード同士が、カード内側の余白より詰まって見えていた */
  .scope__cols{gap:20px}
  .cols--2,.cols--3{gap:18px}
  .roles{gap:18px}
  /* 箇条書きの2行目が1行目にくっついて見えるので行間をそろえる */
  .role__l li,.offer__pts li,.lp-last__pts li{line-height:1.85}
}

/* ---- v62: スマホのお知らせ一覧 ----
   サムネイル104pxのぶん本文が135px程度しか残らず、
   「第26回／おかやまユニバーサル…／研究会」と3行に割れていた。
   サムネイルを小さくして本文の行長を確保する。 */
@media screen and (max-width:640px){
  .m-newslist__item{grid-template-columns:78px 1fr;gap:12px}
  .m-newslist__text{line-height:1.7}
}
@media screen and (max-width:400px){
  .m-newslist__item{grid-template-columns:68px 1fr;gap:10px}
}

/* ---- 本番移植: パンくずと選択中タブ ---- */
/* breadcrumb-navxt は <li> を出力する。phead__crumb は nav なので
   リストマーカーが出てしまうため消す。 */
body.renew .phead__crumb,body.renew .phead__crumb ul,body.renew .phead__crumb li{
  list-style:none;margin:0;padding:0;display:inline}
body.renew .phead__crumb li{display:inline}
/* conexi_breadcrumb() は <ul class="phead__crumb__l"> で <li> を包む。
   手書きパンくず（/corporate/ など）と同じ見た目にそろえる。 */
.phead__crumb__l{list-style:none;margin:0;padding:0;display:inline}
.phead__crumb .m-breadcrumb__item{display:inline;white-space:normal}
/* NavXT は項目名も <span> で包むため、区切り用の .phead__crumb span{opacity:.55}
   がリンク文字にまでかかってしまう。項目内の span は不透明に戻す。 */
.phead__crumb .m-breadcrumb__item span{opacity:1}
/* 旧 .m-breadcrumb 用の区切りは白い矢印で、明るい phead の上では見えない。
   手書き側と同じ「›」に置き換える。 */
.phead__crumb .m-breadcrumb__item:not(:first-child)::before{
  content:"›";border:0;width:auto;height:auto;transform:none;margin:0 4px;opacity:.55}
/* 現在地のタブ */
.tabs a[aria-current="page"]{background:var(--deep);color:#fff;border-color:var(--deep)}
.tabs a[aria-current="page"] .tabs__c{color:rgba(255,255,255,.8)}