@charset "utf-8";

/* ============================================================
   sd-service.css  v3.9  —  サービス／業種ページ 共通デザインシステム
   ------------------------------------------------------------
   ★このファイルが最新かどうかの見分け方（3通り）
     ① ブラウザで開いて、いちばん下に「v3.9 ここまで」とあれば最新
     ② 開発者ツールのコンソールで下記を実行すると版が返る
        getComputedStyle(document.documentElement).getPropertyValue('--sd-version')
     ③ ファイルサイズが 65,000 バイト前後なら v3.8
        （v3.5 は約 52,000 / v3.6 は約 60,000 バイト）
   ------------------------------------------------------------
   v3.8 → v3.9
     ・.sd-warn__foot を追加（注意ボックスの締めの一文）
     ・業種ページから小さな注記（.sd-note）を撤去したため、
       法務まわりの但し書きはこのクラスでボックス内に入れています
   v3.7 → v3.8
     ・note運用代行ページ用に .sd-rank（AI引用ドメインのランキング）を追加
   v3.6 → v3.7
     ・資料ダウンロード一覧ページ用に .sd-doc 系を追加
       （.sd-doc / .sd-doc--3 / .sd-doc__card / __cover / __badge /
         __body / __ttl / __for / __txt / __list / __rel）
   v3.5 → v3.6
     ・サービス一覧ページ用に .sd-pick / .sd-cat / .sd-svc 系を追加
     ・.sd-svc__num（カード右上の通し番号）は後に削除
       ★このため、番号のspanが残った古いテンプレートと組み合わせると
         「01」「02」…がカード内に生テキストで表示されます。
         CSSとテンプレートは必ずセットで差し替えてください。
   ------------------------------------------------------------
   v3.4 → v3.5
     ・sns-advertisement 用コンポーネントを追加
       （.sd-loop / .sd-rsn--2 / .sd-badge / .sd-tag / .sd-strip）
   v3.3 → v3.4
     ・creative 用コンポーネントを追加
       （.sd-snsico / .sd-heroVideo / .sd-video / .sd-shots / .sd-formula /
         .sd-quote / .sd-vs / .sd-plans--5 / .sd-insta / .sd-igbtn / .sd-ig）
     ・.sd-igbtn は白文字を載せるため、Instagram純正のラジアルグラデーション
       （淡い黄 #fdf497 を含み白文字が1.06:1になる）は使わず、
       全ストップが白に対して4.5:1以上になる線形グラデーションに置き換え
   ------------------------------------------------------------
   v3.2 → v3.3（バグ修正・1行のみ）
     ・@media(max-width:900px) の1カラム化リストに .sd-res が抜けていたため、
       スマホで Results が3カラムのまま潰れ、文字が1文字ずつ折り返していた。
       .sd-res を追加して修正。
       影響ページ：.sd-res を使う全サービス詳細ページ
       （sns-operation / ec-mall / ai-search-sns ほか）
     ・他の多カラムコンポーネント（約30件）は全て1カラム化済みであることを
       機械的に検査して確認。抜けは .sd-res のみだった。
   ------------------------------------------------------------
   v2 (全面ダーク) → v3 (ライト) への変更
     ・ページ地を白に。セクションごとに 白 / 淡グレー / 淡ライム を切り替え
     ・ヒーローとCTAだけを全幅の黒面として残す（それ以外は明るい面）
     ・見出しブロック（ラベル・H2・リード）を中央揃えに
     ・ライム #c6f542 は白地だと文字が読めないため、
       文字用に --sd-accent-ink（#556e00）を新設。
       白 / 淡グレー / 淡ライム いずれの背景でもコントラスト比 5.2:1 以上
     ・ヘッダーは白版を使う（テンプレート側で $tatap_header_light = true）
   ------------------------------------------------------------
   クラス名は v2 から一切変えていません。
   HTML側の追加は section への -alt / -lime の付与のみです。
   ------------------------------------------------------------
   対象: /service/ 配下の sd- 系テンプレート
   読み込み順: style.css の後、各ページのインライン <style> の前
============================================================ */

:root{
  /* 版の識別用。開発者ツールで現在配信中のCSSの版を確認できます。 */
  --sd-version:"v3.9-20260806";

  /* 面 */
  --sd-bg:#ffffff;          /* ページ地 */
  --sd-bg-alt:#f4f5f8;      /* 淡いグレーの帯 */
  --sd-bg-lime:#f6fae8;     /* 淡いライムの帯 */
  --sd-dark:#111113;        /* ヒーロー・CTAの黒面 */
  --sd-panel:#ffffff;       /* カード地 */
  --sd-panel2:#f7f8fb;      /* カード内のサブ面 */
  --sd-line:#e5e7ee;        /* 罫線 */
  /* 文字 */
  --sd-txt:#14141a;         /* 本文 */
  --sd-sub:#5b6070;         /* 補助 */
  --sd-dim:#686e7d;         /* 薄い注記。白地で5.1:1（旧 #8b8f9e は3.2:1でAA未達だった） */
  /* アクセント */
  --sd-accent:#c6f542;      /* ライム（面・線用） */
  --sd-accent-ink:#556e00;  /* ライム（白地の文字用）。白・淡グレー・淡ライムいずれの背景でも
                               コントラスト比 5.2:1 以上を確保（WCAG AA 4.5:1 をクリア） */
  --sd-accent-soft:#eef8cf;  /* ライムの淡い面 */
  --sd-accent-line:#d4e9a0;  /* ライムの罫線 */
  --sd-violet:#6d5bd0;
  --sd-violet-soft:#f2f0ff;
  --sd-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.05);
}

.sd{background:var(--sd-bg);color:var(--sd-txt);font-size:15px;line-height:1.9;position:relative;z-index:2;}
.sd *{box-sizing:border-box;}
.sd-wrap{max-width:1080px;margin:0 auto;padding:0 28px;}

/* ---------- セクションの地色 ---------- */
.sd section{padding:96px 0;background:var(--sd-bg);}
.sd section.-alt{background:var(--sd-bg-alt);}
.sd section.-lime{background:var(--sd-bg-lime);}

/* ---------- 見出しブロック（中央揃え） ---------- */
.sd-en{font-size:12px;letter-spacing:.22em;color:var(--sd-accent-ink);text-transform:uppercase;font-weight:700;margin:0 0 12px;text-align:center;}
.sd-ttl{font-size:clamp(24px,3vw,34px);line-height:1.5;margin:0 0 16px;font-weight:700;text-align:center;letter-spacing:.01em;}
.sd-lead{color:var(--sd-sub);font-size:15px;max-width:680px;margin:0 auto 52px;text-align:center;}
.sd-note{font-size:13px;color:var(--sd-dim);margin-top:26px;text-align:center;}

/* ---------- ボタン ---------- */
.sd-btn{display:inline-flex;align-items:center;gap:8px;padding:15px 34px;border-radius:99px;font-size:14px;font-weight:700;text-decoration:none;border:none;cursor:pointer;font-family:inherit;transition:transform .2s,opacity .2s,background-color .2s,color .2s;}
.sd-btn:hover{transform:translateY(-2px);opacity:.92;}
.sd-btn--primary{background:var(--sd-accent);color:#1b2400;}
.sd-btn--ghost{background:transparent;border:1px solid #c9cddb;color:var(--sd-txt);}
.sd-btn--ghost:hover{border-color:var(--sd-txt);}
.sd-btns{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- ヒーロー（全幅の黒面） ----------
   .header は position:fixed のため、上部にヘッダー分の余白を確保する */
.sd-hero{background:var(--sd-dark);color:#f4f4f6;padding:132px 0 76px;}
.sd-hero .sd-wrap{max-width:1080px;}
.sd-crumb{font-size:12px;color:#8f93a1;margin:0 0 36px;}
.sd-crumb a{color:#8f93a1;text-decoration:none;}
.sd-crumb a:hover{color:#c9ccd6;}
.sd-hero__grid{display:grid;grid-template-columns:1.4fr 1fr;gap:56px;align-items:center;}
.sd-hero__studio{font-size:13px;color:var(--sd-accent);letter-spacing:.12em;margin:0 0 16px;font-weight:700;text-align:left;}
.sd-hero h1{font-size:clamp(30px,3.6vw,44px);line-height:1.45;margin:0 0 18px;font-weight:700;color:#fff;}
.sd-hero__h1sub{display:block;font-size:clamp(15px,1.65vw,20px);color:var(--sd-accent);font-weight:700;margin-top:16px;letter-spacing:.02em;line-height:1.6;}
.sd-hero__txt{color:#b9bcc7;margin:0 0 32px;max-width:520px;}
.sd-hero .sd-btn--ghost{border-color:#4c5060;color:#f4f4f6;}
.sd-hero .sd-btn--ghost:hover{border-color:#fff;}
.sd-hero__stats{display:grid;gap:14px;}
.sd-stat{background:#1c1c22;border:1px solid #2c2c34;border-radius:14px;padding:20px 26px;display:flex;align-items:baseline;gap:16px;}
.sd-stat strong{font-size:30px;color:var(--sd-accent);font-weight:800;white-space:nowrap;}
.sd-stat span{font-size:13px;color:#b9bcc7;}
.sd-switch{margin-top:28px;font-size:13px;color:#8f93a1;}
.sd-switch a{color:var(--sd-accent);text-decoration:none;}
.sd-heroChart{background:#1c1c22;border:1px solid #2c2c34;border-radius:14px;padding:18px 20px 12px;}
.sd-heroChart p{font-size:11.5px;color:#8f93a1;margin:0 0 8px;letter-spacing:.05em;}
.sd-heroChart svg{width:100%;height:auto;display:block;}

/* ---------- 導入企業ロゴ ---------- */
.sd-logos{padding:56px 0 48px;background:var(--sd-bg);}
.sd-logos__label{font-size:12px;letter-spacing:.14em;color:var(--sd-dim);text-align:center;margin:0 0 26px;}
.sd-logos__ticker{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);}
.sd-logos__track{display:flex;align-items:center;gap:48px;width:max-content;animation:sd-logo-marquee 30s linear infinite;}
.sd-logos__ticker:hover .sd-logos__track{animation-play-state:paused;}
@keyframes sd-logo-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sd-logos__track img{height:52px;width:auto;max-width:170px;object-fit:contain;display:block;opacity:.92;}

/* ---------- アイコン ---------- */
.sd-ico{width:52px;height:52px;border-radius:50%;background:var(--sd-accent-soft);border:1px solid var(--sd-accent-line);display:inline-flex;align-items:center;justify-content:center;color:var(--sd-accent-ink);flex:none;}
.sd-ico svg{width:25px;height:25px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- 課題カード ---------- */
.sd-prob{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.sd-prob__item{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:16px;padding:34px 26px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;box-shadow:var(--sd-shadow);}
.sd-prob__body{flex:1;}
.sd-prob__item b{display:block;font-size:15.5px;line-height:1.7;margin:0 0 8px;font-weight:700;}
.sd-prob__item b::before{content:none;}
.sd-prob__item p{font-size:13px;color:var(--sd-sub);margin:0;}

/* ---------- 理由カード ---------- */
.sd-rsn{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.sd-rsn__item{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:16px;padding:32px 28px;box-shadow:var(--sd-shadow);}
.sd-rsn__item em{font-style:normal;font-size:13px;font-weight:800;color:#1b2400;background:var(--sd-accent);border-radius:99px;padding:4px 15px;display:inline-block;margin:0 0 16px;}
.sd-rsn__item h3{font-size:17px;line-height:1.6;margin:0 0 10px;font-weight:700;}
.sd-rsn__item p{font-size:13.5px;color:var(--sd-sub);margin:0;}
.sd-rsn__item strong{color:var(--sd-accent-ink);font-weight:800;}

/* ---------- 業務範囲（Scope） ---------- */
.sd-scope{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.sd-scope__item{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:12px;padding:20px 24px;display:flex;gap:14px;align-items:flex-start;}
.sd-scope__item i{font-style:normal;color:var(--sd-accent-ink);font-weight:800;font-size:15px;line-height:1.6;flex:none;}
.sd-scope__item b{display:block;font-size:14.5px;margin:0 0 4px;font-weight:700;line-height:1.6;}
.sd-scope__item p{font-size:12.5px;color:var(--sd-sub);margin:0;line-height:1.75;}

/* ---------- プログラム ---------- */
.sd-prg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.sd-prg__item{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:16px;padding:30px 28px;box-shadow:var(--sd-shadow);}
.sd-prg__item em{font-style:normal;font-size:12px;color:var(--sd-accent-ink);font-weight:800;letter-spacing:.1em;display:block;margin:0 0 10px;}
.sd-prg__item b{display:block;font-size:16px;margin:0 0 8px;font-weight:700;}
.sd-prg__item p{font-size:13px;color:var(--sd-sub);margin:0;}

/* ---------- 図解 ---------- */
.sd-figure{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:18px;padding:28px 28px 18px;margin:52px 0 0;box-shadow:var(--sd-shadow);}
.sd-figureScroll{overflow-x:auto;}
.sd-figureScroll svg{width:100%;min-width:640px;height:auto;display:block;}
.sd-figure figcaption{font-size:12px;color:var(--sd-dim);margin:12px 0 0;text-align:center;}

/* ---------- 比較表 ---------- */
.sd-cmpScroll{overflow-x:auto;}
.sd-cmp{width:100%;min-width:640px;border-collapse:separate;border-spacing:0;font-size:14px;background:var(--sd-panel);}
.sd-cmp th,.sd-cmp td{padding:16px 18px;text-align:center;border-bottom:1px solid var(--sd-line);vertical-align:top;}
.sd-cmp thead th{font-size:13px;color:var(--sd-sub);font-weight:700;border-bottom:2px solid var(--sd-line);}
.sd-cmp td:first-child,.sd-cmp th:first-child{text-align:left;color:var(--sd-txt);font-size:13px;font-weight:600;}
.sd-cmp .hl{background:var(--sd-accent-soft);}
.sd-cmp thead .hl{color:var(--sd-accent-ink);font-weight:800;border-radius:12px 12px 0 0;}
.sd-cmp tbody tr:last-child .hl{border-radius:0 0 12px 12px;}
.sd-mark{display:block;font-size:17px;font-weight:800;color:var(--sd-accent-ink);}
.sd-mark.-bad{color:#c53a4d;}  /* 比較表の × 。白地で5.1:1 */
.sd-mark.-mid{color:#686e7d;}  /* 比較表の △ ○ 。白地で5.1:1 */
.sd-cmp small{color:var(--sd-dim);font-size:12px;line-height:1.5;display:block;}
.sd-cmp.-left td:not(:first-child),.sd-cmp.-left thead th:not(:first-child){text-align:left;}
.sd-cmp .-accent{color:var(--sd-accent-ink);font-weight:800;white-space:nowrap;font-size:15px;}

/* ---------- 選び方（Criteria） ---------- */
.sd-crit{display:grid;gap:14px;max-width:900px;margin:0 auto;}
.sd-crit__item{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:16px;padding:26px 30px;display:flex;gap:20px;align-items:flex-start;box-shadow:var(--sd-shadow);}
.sd-crit__no{flex:none;width:40px;height:40px;border-radius:50%;background:var(--sd-accent-soft);border:1px solid var(--sd-accent-line);color:var(--sd-accent-ink);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;}
.sd-crit__item h3{font-size:16.5px;margin:0 0 6px;font-weight:700;line-height:1.6;}
.sd-crit__item p{font-size:13.5px;color:var(--sd-sub);margin:0;}

/* ---------- 注意喚起 ---------- */
.sd-warn{margin:26px auto 0;background:#fff6f6;border:1px solid #f4cfd3;border-radius:16px;padding:26px 30px;max-width:900px;}
.sd-warn b{display:block;color:#b3303f;font-size:14.5px;margin:0 0 10px;font-weight:700;}
.sd-warn ul{margin:0;padding:0;list-style:none;font-size:13.5px;color:var(--sd-sub);}
.sd-warn li{padding:4px 0 4px 22px;position:relative;}
.sd-warn li::before{content:"×";color:#c53a4d;position:absolute;left:0;font-weight:800;}
/* 注意ボックスの締めの一文。小さな灰色の注記（.sd-note）にすると読み飛ばされるため、
   ボックスの中に本文と同じ濃さで入れる。v3.9で追加。 */
.sd-warn__foot{margin:16px 0 0;padding-top:14px;border-top:1px solid #f4cfd3;font-size:13.5px;color:var(--sd-txt);line-height:1.85;}
.sd-warn__foot b{display:inline;color:var(--sd-txt);font-size:inherit;margin:0;font-weight:700;}

/* ---------- フロー ---------- */
.sd-flow{position:relative;max-width:760px;margin:0 auto;}
.sd-flow::before{content:"";position:absolute;left:27px;top:10px;bottom:10px;width:2px;background:var(--sd-line);}
.sd-flow__item{position:relative;padding:0 0 48px 84px;}
.sd-flow__item:last-child{padding-bottom:0;}
.sd-flow__num{position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;background:var(--sd-panel);border:2px solid var(--sd-accent);color:var(--sd-accent-ink);font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;}
.sd-flow__head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 6px;}
.sd-flow__head h3{font-size:19px;margin:0;font-weight:700;}
.sd-flow__term{font-size:12px;color:#1b2400;background:var(--sd-accent);border-radius:99px;padding:3px 14px;font-weight:800;white-space:nowrap;}
.sd-flow__item > p{font-size:14px;color:var(--sd-sub);margin:0 0 12px;}
.sd-flow__item ul{list-style:none;margin:0;padding:0;font-size:13.5px;color:var(--sd-sub);}
.sd-flow__item li{padding:4px 0 4px 18px;position:relative;}
.sd-flow__item li::before{content:"・";color:var(--sd-accent-ink);position:absolute;left:0;}

/* ---------- 成果 ---------- */
.sd-res{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.sd-res__item{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:16px;padding:30px 28px;display:flex;flex-direction:column;box-shadow:var(--sd-shadow);}
.sd-res__item em{font-style:normal;font-size:12px;color:var(--sd-dim);}
.sd-res__item b{font-size:15px;margin:4px 0 16px;font-weight:700;line-height:1.6;}
.sd-kpi{background:var(--sd-violet-soft);border:1px solid #ddd8f7;border-radius:10px;padding:13px 16px;margin-bottom:8px;font-size:12.5px;color:#4b3fa5;}
.sd-kpi strong{color:var(--sd-violet);font-size:18px;font-weight:800;}
.sd-res__item q{font-size:12.5px;color:var(--sd-sub);margin-top:auto;padding-top:14px;quotes:"「" "」";display:block;}

/* ---------- 実績カード ---------- */
.sd-works{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.sd-works__item{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:16px;overflow:hidden;text-decoration:none;display:block;transition:transform .2s,border-color .2s,box-shadow .2s;box-shadow:var(--sd-shadow);}
.sd-works__item:hover{transform:translateY(-4px);border-color:var(--sd-accent-line);box-shadow:0 12px 32px rgba(16,24,40,.10);}
.sd-works__thumb{aspect-ratio:16/9;background:var(--sd-panel2);overflow:hidden;}
.sd-works__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.sd-works__thumb.-noimg{display:flex;align-items:center;justify-content:center;background:linear-gradient(140deg,var(--sd-accent-soft),#f7f8fb 70%);}
.sd-works__thumb.-noimg span{font-size:11px;letter-spacing:.2em;color:var(--sd-accent-ink);font-weight:800;}
.sd-works__body{padding:20px 22px 24px;}
.sd-works__ttl{color:var(--sd-txt);font-size:13.5px;font-weight:600;line-height:1.65;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.sd-works__tag{color:var(--sd-dim);font-size:11.5px;margin:10px 0 0;}
.sd-more{margin-top:36px;text-align:center;}

/* ---------- 料金 ---------- */
.sd-price{background:var(--sd-panel);border:1px solid var(--sd-accent-line);border-radius:20px;padding:48px;display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:center;box-shadow:var(--sd-shadow);}
.sd-price__num{font-size:clamp(26px,3.4vw,40px);color:var(--sd-txt);font-weight:800;line-height:1.3;word-break:keep-all;}
.sd-price__num small{display:block;font-size:13px;color:var(--sd-sub);font-weight:500;margin-top:10px;}
.sd-price ul{list-style:none;margin:0;padding:0;font-size:14px;color:var(--sd-sub);}
.sd-price li{padding:10px 0 10px 24px;border-bottom:1px solid var(--sd-line);position:relative;}
.sd-price li:last-child{border-bottom:none;}
.sd-price li::before{content:"●";color:var(--sd-accent-ink);font-size:9px;position:absolute;left:2px;top:15px;}
.sd-price__note{font-size:12px;color:var(--sd-dim);margin:16px 0 0;}

/* ---------- バナー ---------- */
.sd-banner{border-radius:20px;padding:38px 44px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;background:var(--sd-panel);border:1px solid var(--sd-line);box-shadow:var(--sd-shadow);}
.sd-banner--violet{background:var(--sd-violet-soft);border-color:#ddd8f7;}
.sd-banner h3{font-size:19px;margin:0 0 8px;font-weight:700;}
.sd-banner p{font-size:13.5px;color:var(--sd-sub);margin:0;max-width:560px;}
.sd-banner .sd-en{text-align:left;}
.sd-banner__left{display:flex;align-items:flex-start;gap:20px;flex:1;min-width:260px;}
.sd-banner__left .sd-ico{margin-top:4px;}

/* ---------- FAQ ---------- */
.sd-faq{display:grid;gap:12px;max-width:880px;margin:0 auto;}
.sd-faq details{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:14px;overflow:hidden;transition:border-color .2s,box-shadow .2s;}
.sd-faq details[open]{border-color:var(--sd-accent-line);box-shadow:var(--sd-shadow);}
.sd-faq summary{list-style:none;cursor:pointer;padding:20px 58px 20px 26px;font-size:15.5px;font-weight:700;position:relative;line-height:1.75;}
.sd-faq summary::-webkit-details-marker{display:none;}
.sd-faq summary::before{content:"Q.";color:var(--sd-accent-ink);font-weight:800;margin-right:10px;}
.sd-faq summary::after{content:"";position:absolute;right:26px;top:50%;width:10px;height:10px;margin-top:-8px;border-right:2px solid var(--sd-accent-ink);border-bottom:2px solid var(--sd-accent-ink);transform:rotate(45deg);transition:transform .25s,margin-top .25s;}
.sd-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px;}
.sd-faq summary:focus-visible{outline:2px solid var(--sd-accent-ink);outline-offset:-2px;}
.sd-faq__a{padding:0 26px 24px;font-size:14px;color:var(--sd-sub);}
.sd-faq__a p{margin:0 0 10px;}
.sd-faq__a p:last-child{margin:0;}
.sd-faq__a a{color:var(--sd-accent-ink);font-weight:600;}

/* ---------- 記事リンク ---------- */
.sd-kw{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.sd-kw a{display:flex;gap:11px;align-items:center;background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:10px;padding:16px 20px;text-decoration:none;color:var(--sd-txt);font-size:13.5px;line-height:1.65;transition:border-color .2s,transform .2s;}
.sd-kw a:hover{border-color:var(--sd-accent-line);transform:translateY(-2px);}
.sd-kw a::before{content:"›";color:var(--sd-accent-ink);font-weight:800;font-size:16px;flex:none;}

/* ---------- 関連サービス ---------- */
.sd-rel{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.sd-rel a{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:16px;padding:26px 28px;text-decoration:none;display:block;transition:border-color .2s,transform .2s,box-shadow .2s;box-shadow:var(--sd-shadow);}
.sd-rel a:hover{border-color:var(--sd-accent-line);transform:translateY(-3px);box-shadow:0 12px 32px rgba(16,24,40,.10);}
.sd-rel em{font-style:normal;font-size:12px;color:var(--sd-dim);display:block;margin:0 0 6px;}
.sd-rel b{color:var(--sd-txt);font-size:15px;font-weight:700;}
.sd-rel span{display:block;font-size:12px;color:var(--sd-accent-ink);margin-top:12px;font-weight:700;}

/* ---------- CTA（全幅の黒面。ヒーローと対になる） ----------
   ※ .sd section (0,1,1) が .sd-cta (0,1,0) に勝つため、
      必ず section を含めた詳細度で指定すること */
.sd section.sd-cta{background:var(--sd-dark);padding:0;}
.sd-cta .sd-wrap{max-width:1080px;padding:0 28px;}
.sd-cta__box{padding:96px 0 100px;text-align:center;}
.sd-cta__box .sd-en{color:var(--sd-accent);}
.sd-cta__box .sd-ttl{font-size:clamp(24px,3vw,32px);color:#fff;}
.sd-cta__box .sd-lead{color:#b9bcc7;margin-left:auto;margin-right:auto;}
.sd-cta__box .sd-btns{justify-content:center;}
.sd-cta__box .sd-btn--ghost{border-color:#4c5060;color:#f4f4f6;}
.sd-cta__box .sd-btn--ghost:hover{border-color:#fff;}

/* ---------- フッター周り ---------- */
.c-ftStmp,.footer{position:relative;z-index:2;}

/* ============================================================
   レスポンシブ
============================================================ */
@media(max-width:900px){
  .sd section{padding:64px 0;}
  .sd-wrap{padding:0 20px;}
  .sd-hero{padding:104px 0 52px;}
  .sd-hero__grid{grid-template-columns:1fr;gap:36px;}
  .sd-logos{padding:40px 0 32px;}
  .sd-logos__track img{height:42px;}
  .sd-prob,.sd-rsn,.sd-prg,.sd-res,.sd-works,.sd-rel,.sd-scope,.sd-kw{grid-template-columns:1fr;}
  .sd-price{grid-template-columns:1fr;padding:32px 26px;gap:24px;}
  .sd-banner{padding:28px 26px;}
  .sd-flow::before{left:21px;}
  .sd-flow__item{padding-left:66px;}
  .sd-flow__num{width:44px;height:44px;font-size:15px;}
  .sd-figure{padding:18px 16px 12px;margin-top:32px;}
  .sd-prob__item{padding:26px 22px;}
  .sd-crit__item{padding:22px;gap:14px;}
  .sd-faq summary{padding:18px 48px 18px 20px;font-size:14.5px;}
  .sd-faq__a{padding:0 20px 20px;}
  .sd-warn{padding:22px;}
  .sd-cta__box{padding:64px 0 68px;}
}

/* ============================================================
   ページ固有コンポーネント（v3.1で追加）
   sns-promotion / ec-mall / intangible-sns / system-building
   ------------------------------------------------------------
   各テンプレートのインラインCSSにあったものをライトテーマ化して集約。
   これにより4ページとも <style> ブロックを削除できます。
============================================================ */

/* ---------- アイコンのバリエーション ---------- */
.sd-ico--sm{width:40px;height:40px;border-radius:10px;}
.sd-ico--sm svg{width:20px;height:20px;}
.sd-ico--violet{color:var(--sd-violet);background:var(--sd-violet-soft);border-color:#ddd8f7;}
.sd-rsn__top,.sd-prg__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 14px;}
.sd-rsn__top em,.sd-prg__top em{margin:0;}

/* ---------- 課題カード 3列版 ---------- */
.sd-prob--3{grid-template-columns:repeat(3,1fr);}

/* ---------- 数値データカード（sns-promotion） ---------- */
.sd-data{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.sd-data__item{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:16px;padding:36px 26px;text-align:center;box-shadow:var(--sd-shadow);}
.sd-data__item strong{display:block;font-size:46px;color:var(--sd-accent-ink);font-weight:800;line-height:1.1;}
.sd-data__item strong small{font-size:22px;}
.sd-data__item b{display:block;font-size:14px;font-weight:700;margin:14px 0 6px;line-height:1.6;}
.sd-data__item p{font-size:12px;color:var(--sd-dim);margin:0;}

/* ---------- 目的と指標（sns-promotion） ---------- */
.sd-purpose{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:start;text-align:left;}
.sd-purpose__items{display:grid;gap:14px;}
.sd-purpose__item{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:14px;padding:24px 26px;display:flex;gap:18px;align-items:flex-start;box-shadow:var(--sd-shadow);}
.sd-purpose__num{width:40px;height:40px;min-width:40px;border-radius:50%;background:var(--sd-accent);color:#1b2400;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;}
.sd-purpose__item h3{font-size:16px;font-weight:700;margin:0 0 6px;line-height:1.6;}
.sd-purpose__item p{font-size:13px;color:var(--sd-sub);margin:0;}
.sd-metrics{display:grid;gap:14px;}
.sd-metrics__group{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:14px;padding:24px 26px;box-shadow:var(--sd-shadow);}
.sd-metrics__group h4{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--sd-accent-ink);text-transform:uppercase;margin:0 0 12px;}
.sd-metrics__group ul{list-style:none;margin:0;padding:0;font-size:13.5px;color:var(--sd-sub);}
.sd-metrics__group li{padding:7px 0 7px 18px;border-bottom:1px solid var(--sd-line);position:relative;}
.sd-metrics__group li:last-child{border-bottom:none;}
.sd-metrics__group li::before{content:"●";color:var(--sd-accent-ink);font-size:8px;position:absolute;left:0;top:14px;}
.sd-metrics__note{background:var(--sd-accent-soft);border:1px solid var(--sd-accent-line);border-radius:14px;padding:20px 24px;font-size:13px;color:var(--sd-sub);}
.sd-metrics__note strong{display:block;font-size:11px;color:var(--sd-accent-ink);letter-spacing:.1em;margin-bottom:8px;font-weight:800;}

/* ---------- 施策カードの補足（sns-promotion） ---------- */
.sd-rsn__item{display:flex;flex-direction:column;}
.sd-rsn__item em{align-self:flex-start;}
.sd-rsn__item p{flex:1;}
.sd-rsn__fit{margin-top:16px;padding-top:12px;border-top:1px solid var(--sd-line);font-size:12px;color:var(--sd-dim);line-height:1.7;flex:none;}
.sd-rsn__fit strong{color:var(--sd-accent-ink);font-size:11px;letter-spacing:.1em;display:block;margin-bottom:4px;font-weight:800;}
.sd-rsn__badge{display:inline-block;background:var(--sd-accent-soft);color:var(--sd-accent-ink);font-size:12px;font-weight:800;padding:5px 14px;border-radius:99px;margin-top:14px;align-self:flex-start;}

/* ---------- 料金プラン（複数カード型） ---------- */
.sd-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left;}
.sd-plan{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:18px;padding:32px 28px;display:flex;flex-direction:column;position:relative;box-shadow:var(--sd-shadow);}
.sd-plan.-hl{background:linear-gradient(165deg,var(--sd-accent-soft),#fff 62%);border-color:var(--sd-accent-line);}
.sd-plan__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-size:11.5px;font-weight:800;color:#1b2400;background:var(--sd-accent);border-radius:99px;padding:4px 16px;white-space:nowrap;}
.sd-plan em,.sd-plan__en{font-style:normal;font-size:11.5px;color:var(--sd-accent-ink);font-weight:800;letter-spacing:.14em;display:block;margin:0 0 8px;text-transform:uppercase;}
.sd-plan h3{font-size:18px;margin:0 0 6px;font-weight:700;}
.sd-plan__for{font-size:12.5px;color:var(--sd-dim);margin:0 0 18px;min-height:38px;}
.sd-plan__price,.sd-plan__num{font-size:clamp(20px,2.4vw,27px);color:var(--sd-txt);font-weight:800;line-height:1.35;word-break:keep-all;}
.sd-plan__num{padding:16px 0;border-top:1px dashed var(--sd-line);}
.sd-plan__price small,.sd-plan__num small{display:block;font-size:12.5px;color:var(--sd-sub);font-weight:500;margin-top:6px;}
.sd-plan__note{font-size:12px;color:var(--sd-dim);margin:8px 0 18px;}
.sd-plan ul{list-style:none;margin:0;padding:0;font-size:13.5px;color:var(--sd-sub);flex:1;}
.sd-plan li{padding:8px 0 8px 22px;border-bottom:1px solid var(--sd-line);position:relative;}
.sd-plan li:last-child{border-bottom:none;}
.sd-plan li::before{content:"●";color:var(--sd-accent-ink);font-size:8px;position:absolute;left:2px;top:14px;}

/* ---------- ファネル（ec-mall） ---------- */
.sd-fnl{max-width:760px;margin:0 auto;display:grid;gap:12px;text-align:left;}
.sd-fnl__step{display:flex;align-items:center;gap:18px;background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:14px;padding:18px 24px;flex-wrap:wrap;box-shadow:var(--sd-shadow);}
.sd-fnl__stage{flex:0 0 96px;font-weight:800;font-size:15px;}
.sd-fnl__what{flex:1;min-width:200px;}
.sd-fnl__what b{display:block;font-size:14.5px;font-weight:700;}
.sd-fnl__what small{display:block;font-size:12px;color:var(--sd-dim);margin-top:2px;}
.sd-fnl__role{font-size:11.5px;font-weight:800;border-radius:99px;padding:5px 14px;white-space:nowrap;}
.sd-fnl__role.-sns{color:#1b2400;background:var(--sd-accent);}
.sd-fnl__role.-mall{color:var(--sd-violet);border:1px solid #c9c2f0;background:var(--sd-violet-soft);}
.sd-fnl__arrow{text-align:center;color:var(--sd-dim);font-size:15px;line-height:1;margin:-2px 0;}

/* ---------- 提供メニュー2枚組（ec-mall） ---------- */
.sd-menu{display:grid;grid-template-columns:1fr 1fr;gap:20px;text-align:left;}
.sd-menu__col{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:16px;padding:32px 28px;box-shadow:var(--sd-shadow);}
.sd-menu__col.-hl{background:linear-gradient(165deg,var(--sd-accent-soft),#fff 62%);border-color:var(--sd-accent-line);}
.sd-menu__col em{font-style:normal;font-size:12px;color:var(--sd-accent-ink);font-weight:800;letter-spacing:.1em;display:block;margin:0 0 8px;}
.sd-menu__col h3{font-size:18px;margin:0 0 6px;font-weight:700;}
.sd-menu__col > p{font-size:13px;color:var(--sd-sub);margin:0 0 18px;}
.sd-menu__col ul{list-style:none;margin:0;padding:0;font-size:14px;color:var(--sd-sub);}
.sd-menu__col li{padding:9px 0 9px 26px;border-bottom:1px solid var(--sd-line);position:relative;}
.sd-menu__col li:last-child{border-bottom:none;}
.sd-menu__col li::before{content:"✓";color:var(--sd-accent-ink);font-weight:800;position:absolute;left:2px;}

/* ---------- 対応モール（ec-mall） ---------- */
.sd-mall{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.sd-mall__item{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:16px;padding:30px 20px;text-align:center;box-shadow:var(--sd-shadow);}
.sd-mall__item b{display:block;font-size:17px;font-weight:800;margin:0 0 10px;}
.sd-mall__item p{font-size:12.5px;color:var(--sd-sub);margin:0;}

/* ---------- 実績カード（ec-mall の em/strong/h3 形式） ---------- */
.sd-res__item em{font-style:normal;font-size:12px;color:var(--sd-dim);}
.sd-res__item.-badge em{font-weight:800;color:#1b2400;background:var(--sd-accent);border-radius:99px;padding:4px 14px;display:inline-block;margin:0 0 16px;align-self:flex-start;}
.sd-res__item > strong{display:block;font-size:clamp(20px,2.4vw,26px);color:var(--sd-accent-ink);font-weight:800;line-height:1.4;margin:0 0 10px;word-break:keep-all;}
.sd-res__item h3{font-size:14.5px;line-height:1.6;margin:0 0 8px;font-weight:700;}
.sd-res__item > p{font-size:13px;color:var(--sd-sub);margin:0;}
.sd-res__spark{width:100%;height:44px;margin:0 0 14px;display:block;}

/* ---------- 図解枠（intangible-sns） ---------- */
.sd-diagram{margin-top:52px;background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:18px;padding:40px 40px 34px;box-shadow:var(--sd-shadow);}
.sd-diagram > svg{display:block;width:100%;height:auto;}
.sd-diagram__cap{font-size:12.5px;color:var(--sd-dim);text-align:center;margin:22px auto 0;max-width:720px;line-height:1.7;}
.sd-diagram__ttl{font-size:14px;color:var(--sd-sub);text-align:center;font-weight:700;letter-spacing:.04em;margin:0 0 26px;}
.sd-diagram__ttl b{color:var(--sd-accent-ink);}
.sd-diagramScroll{overflow-x:auto;}
.sd-diagramScroll svg{display:block;width:100%;min-width:640px;height:auto;}

/* ---------- ゴール比較ミニ図（intangible-sns） ---------- */
.sd-goal{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:20px;text-align:left;}
.sd-goal__item{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:16px;padding:24px 26px;box-shadow:var(--sd-shadow);}
.sd-goal__item.-hl{border-color:var(--sd-accent-line);background:linear-gradient(165deg,var(--sd-accent-soft),#fff 70%);}
.sd-goal__item svg{display:block;width:100%;height:auto;margin:0 0 14px;}
.sd-goal__item b{display:block;font-size:14px;font-weight:700;margin:0 0 4px;}
.sd-goal__item.-mid b{color:var(--sd-dim);}
.sd-goal__item.-hl b{color:var(--sd-accent-ink);}
.sd-goal__item span{font-size:12.5px;color:var(--sd-sub);}

/* ---------- 左揃えに戻す必要がある要素 ---------- */
.sd-menu .sd-en,.sd-plan .sd-en,.sd-banner .sd-en{text-align:left;}

@media(max-width:900px){
  .sd-prob--3,.sd-data,.sd-purpose,.sd-plans,.sd-menu,.sd-goal{grid-template-columns:1fr;}
  .sd-mall{grid-template-columns:1fr 1fr;}
  .sd-fnl__stage{flex-basis:100%;}
  .sd-diagram{padding:26px 18px 22px;}
  .sd-data__item{padding:28px 22px;}
  .sd-data__item strong{font-size:40px;}
  .sd-plan{padding:26px 22px;}
  .sd-menu__col{padding:26px 22px;}
}

/* ============================================================
   ページ固有コンポーネント（v3.2で追加）
   sns-ai-training / flyer
============================================================ */

/* ---------- チップ（sns-ai-training のヒーロー内・黒地） ---------- */
.sd-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px;}
.sd-chips span{font-size:12px;font-weight:700;border:1px solid #3a3e4c;border-radius:99px;padding:5px 14px;color:#b9bcc7;}

/* ---------- 4列データ（sns-ai-training） ---------- */
.sd-data--4{grid-template-columns:repeat(4,1fr);}
.sd-data--4 .sd-data__item{padding:30px 20px;}
.sd-data--4 .sd-data__item strong{font-size:38px;word-break:keep-all;}
.sd-data--4 .sd-data__item b{font-size:13px;margin:10px 0 4px;}
.sd-data--4 .sd-data__item p{font-size:11.5px;}

/* ---------- 2カラムの層設計（sns-ai-training） ---------- */
.sd-cols2{display:grid;grid-template-columns:1fr 1fr;gap:20px;text-align:left;}
.sd-layer{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:16px;padding:32px 30px;box-shadow:var(--sd-shadow);}
.sd-layer__tag{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--sd-accent-ink);margin:0 0 8px;}
.sd-layer h3{font-size:19px;font-weight:700;margin:0 0 14px;}
.sd-layer ul{list-style:none;margin:0;padding:0;font-size:13.5px;color:var(--sd-sub);}
.sd-layer li{padding:7px 0 7px 20px;position:relative;}
.sd-layer li::before{content:"▸";color:var(--sd-accent-ink);position:absolute;left:0;font-weight:800;}
.sd-bridge{text-align:center;margin-top:26px;color:var(--sd-sub);font-size:13px;line-height:1.9;}

/* ---------- 5本柱ツール（sns-ai-training） ---------- */
.sd-tools{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.sd-tool{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:14px;padding:26px 20px;transition:border-color .25s,transform .25s,box-shadow .25s;box-shadow:var(--sd-shadow);}
.sd-tool:hover{border-color:var(--sd-accent-line);transform:translateY(-4px);box-shadow:0 12px 30px rgba(16,24,40,.1);}
.sd-tool h3{font-size:17px;font-weight:800;margin:0 0 2px;}
.sd-tool em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--sd-accent-ink);display:block;margin:0 0 10px;}
.sd-tool p{font-size:12px;color:var(--sd-sub);margin:0;}

/* ---------- Before/After（sns-ai-training） ---------- */
.sd-ba{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.sd-ba__item{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:16px;padding:28px 20px;text-align:center;box-shadow:var(--sd-shadow);}
.sd-ba__label{font-size:12.5px;font-weight:700;color:var(--sd-sub);margin:0 0 12px;}
.sd-ba__row{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;}
.sd-ba__before{font-size:17px;color:var(--sd-dim);text-decoration:line-through;}
.sd-ba__arrow{color:var(--sd-accent-ink);}
.sd-ba__after{font-size:26px;color:var(--sd-accent-ink);}
.sd-ba__item small{display:block;margin-top:8px;font-size:11px;color:var(--sd-dim);}
.sd-roi{margin-top:26px;background:var(--sd-accent-soft);border:1px solid var(--sd-accent-line);border-radius:16px;padding:26px 30px;text-align:center;font-size:14px;color:var(--sd-sub);line-height:1.9;}
.sd-roi strong{font-size:16px;color:var(--sd-txt);}

/* ---------- プラン2枚組（sns-ai-training） ---------- */
.sd-plans--2{grid-template-columns:1fr 1fr;}
.sd-plan--hot{border-color:var(--sd-accent-line);background:linear-gradient(165deg,var(--sd-accent-soft),#fff 62%);}
.sd-plan__sub{font-size:13px;color:var(--sd-sub);margin:0 0 18px;}
.sd-plan h4{font-size:12.5px;font-weight:800;color:var(--sd-accent-ink);margin:16px 0 6px;letter-spacing:.06em;}
.sd-plan__tools{font-size:12px;color:var(--sd-dim);margin:14px 0 22px;}
.sd-plan--chk li{border-bottom:none;padding:7px 0 7px 22px;}
.sd-plan--chk li::before{content:"✓";color:var(--sd-accent-ink);font-weight:800;font-size:13px;top:7px;}
.sd-plan .sd-btn{margin-top:auto;justify-content:center;}

/* ---------- 仕様表（sns-ai-training） ---------- */
.sd-spec{margin-top:26px;background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:16px;padding:26px 28px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;box-shadow:var(--sd-shadow);}
.sd-spec div{text-align:center;}
.sd-spec .k{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--sd-accent-ink);margin:0;}
.sd-spec .v{font-size:15px;font-weight:700;margin:4px 0 0;}
.sd-spec small{display:block;font-size:11px;color:var(--sd-dim);}

/* ---------- 講師（sns-ai-training） ---------- */
.sd-trainer{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:center;background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:18px;padding:40px;text-align:left;box-shadow:var(--sd-shadow);}
.sd-trainer__photo{aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:var(--sd-panel2);}
.sd-trainer__photo img{width:100%;height:100%;object-fit:cover;display:block;}
.sd-trainer h3{font-size:24px;font-weight:700;margin:0;}
.sd-trainer__en{font-size:11px;letter-spacing:.22em;color:var(--sd-accent-ink);font-weight:800;margin:2px 0 16px;}
.sd-trainer p{font-size:13.5px;color:var(--sd-sub);margin:0 0 16px;}
.sd-trainer__badges{display:flex;flex-wrap:wrap;gap:8px;}
.sd-trainer__badges span{font-size:12px;font-weight:700;border:1px solid var(--sd-line);border-radius:99px;padding:5px 14px;color:var(--sd-sub);background:var(--sd-panel2);}

/* ---------- 成果リスト（sns-ai-training） ---------- */
.sd-outcome{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:820px;margin:0 auto;text-align:left;}
.sd-outcome div{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:12px;padding:18px 22px;font-size:13.5px;font-weight:700;box-shadow:var(--sd-shadow);}
.sd-outcome div::before{content:"✓ ";color:var(--sd-accent-ink);font-weight:800;}

/* ---------- 問い合わせフォーム（Contact Form 7・黒面の中） ---------- */
.sd-form{max-width:640px;margin:44px auto 0;background:#1c1c22;border:1px solid #2c2c34;border-radius:16px;padding:40px 36px;text-align:left;}
.sd-form input,.sd-form select,.sd-form textarea{width:100%;background:#101016;border:1px solid #3a3a44;border-radius:10px;padding:13px 16px;color:#f4f4f6;font-size:14px;font-family:inherit;}
.sd-form input:focus,.sd-form select:focus,.sd-form textarea:focus{outline:none;border-color:var(--sd-accent);}
.sd-form label{display:block;font-size:13px;font-weight:700;margin-bottom:8px;color:#f4f4f6;}
.sd-form,.sd-form p,.sd-form span,.sd-form small{color:#b9bcc7;}
.sd-form a{color:var(--sd-accent);text-decoration:underline;text-underline-offset:2px;}
.sd-form .wpcf7-list-item-label{color:#b9bcc7;}
.sd-form p{margin-bottom:18px;}
.sd-form input[type="submit"],.sd-form .wpcf7-submit{background:var(--sd-accent);color:#1b2400;font-weight:800;border:none;border-radius:99px;padding:16px;cursor:pointer;font-size:15px;transition:opacity .2s;}
.sd-form input[type="submit"]:hover{opacity:.85;}
.sd-form .wpcf7-form-control-wrap{display:block;}
.sd-form .wpcf7-not-valid{border-color:#ef4444;}
.sd-form .wpcf7-not-valid-tip{display:block;color:#f87171;font-size:12px;margin-top:6px;}
.sd-form .wpcf7-spinner{display:block;margin:12px auto 0;}
.sd-form .wpcf7-response-output{margin:20px 0 0;padding:14px 18px;border:1px solid #2c2c34;border-radius:10px;font-size:13px;text-align:center;}
.sd-form .wpcf7 form.sent .wpcf7-response-output{border-color:#34d399;color:#6ee7b7;}
.sd-form .wpcf7 form.invalid .wpcf7-response-output,
.sd-form .wpcf7 form.failed .wpcf7-response-output{border-color:#ef4444;color:#f87171;}

/* ---------- 3ステップ連携図（flyer） ---------- */
.sd-link3{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:stretch;max-width:900px;margin:0 auto;}
.sd-link3__box{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:16px;padding:26px 22px;text-align:center;box-shadow:var(--sd-shadow);}
.sd-link3__box.-hl{background:linear-gradient(165deg,var(--sd-accent-soft),#fff 62%);border-color:var(--sd-accent-line);}
.sd-link3__box em{font-style:normal;display:block;font-size:12px;color:var(--sd-accent-ink);font-weight:800;letter-spacing:.1em;margin:0 0 8px;}
.sd-link3__box b{display:block;font-size:16px;font-weight:700;margin:0 0 6px;}
.sd-link3__box p{font-size:12.5px;color:var(--sd-sub);margin:0;}
.sd-link3__arrow{display:flex;align-items:center;color:var(--sd-accent-ink);font-size:20px;font-weight:800;}

/* ---------- ユースケース（flyer） ---------- */
.sd-use{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left;}
.sd-use__item{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:16px;padding:30px 28px;box-shadow:var(--sd-shadow);}
.sd-use__item em{font-style:normal;font-size:12px;color:var(--sd-accent-ink);font-weight:800;letter-spacing:.08em;display:block;margin:0 0 10px;}
.sd-use__item b{display:block;font-size:16.5px;font-weight:700;margin:0 0 10px;line-height:1.6;}
.sd-use__item p{font-size:13px;color:var(--sd-sub);margin:0 0 12px;}
.sd-use__item ul{list-style:none;margin:0;padding:0;font-size:12.5px;color:var(--sd-sub);}
.sd-use__item li{padding:3px 0 3px 16px;position:relative;}
.sd-use__item li::before{content:"・";color:var(--sd-accent-ink);position:absolute;left:0;}

@media(max-width:900px){
  .sd-cols2,.sd-outcome,.sd-plans--2{grid-template-columns:1fr;}
  .sd-data--4,.sd-ba,.sd-tools,.sd-spec{grid-template-columns:1fr 1fr;}
  .sd-trainer{grid-template-columns:1fr;padding:28px;}
  .sd-link3{grid-template-columns:1fr;}
  .sd-link3__arrow{justify-content:center;transform:rotate(90deg);}
  .sd-use{grid-template-columns:1fr;}
  .sd-form{padding:28px 22px;}
}

/* ---------- 比較表の自社列ハイライト（flyer ほか） ---------- */
.sd-cmp .hl{background:var(--sd-accent-soft);}
.sd-cmp thead .hl{color:var(--sd-accent-ink);font-weight:800;border-radius:12px 12px 0 0;}
.sd-cmp tbody tr:last-child .hl{border-radius:0 0 12px 12px;}

/* ---------- 4列のお悩みグリッド（flyer / sns-ai-training） ---------- */
.sd-prob--4{grid-template-columns:repeat(4,1fr);}
.sd-prob--4 .sd-prob__item{padding:28px 20px;}
.sd-prob--4 .sd-prob__item b{font-size:14.5px;}
@media(max-width:900px){
  .sd-prob--4{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .sd-prob--4{grid-template-columns:1fr;}
}

/* ============================================================
   ページ固有コンポーネント（v3.4で追加）
   creative（クリエイティブ制作 / TaTap Creative Studio）
============================================================ */

/* ---------- ヒーロー内のSNSアイコン（黒地） ---------- */
.sd-snsico{display:flex;gap:12px;margin:0 0 28px;}
.sd-snsico a,.sd-snsico span{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;transition:transform .2s,opacity .2s;}
.sd-snsico a:hover{transform:translateY(-2px);opacity:.88;}
.sd-snsico svg{width:20px;height:20px;}
.sd-snsico .-ig{background:#c13584;background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%);}
.sd-snsico .-bk{background:#000;}
.sd-snsico .-yt{background:#e60000;}

/* ---------- ヒーロー内の動画 ---------- */
.sd-heroVideo{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#000;box-shadow:0 24px 60px rgba(0,0,0,.45);}
.sd-heroVideo iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ---------- PV動画グリッド ---------- */
.sd-video{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.sd-video__card{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:18px;padding:16px;box-shadow:var(--sd-shadow);}
.sd-video__frame{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;}
.sd-video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.sd-video__cap{text-align:center;font-size:13px;color:var(--sd-sub);padding:12px 0 2px;font-weight:600;margin:0;}

/* ---------- 縦型の撮影カット ---------- */
.sd-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px;}
.sd-shots__item{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:18px;padding:12px;box-shadow:var(--sd-shadow);}
.sd-shots__media{aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--sd-panel2);}
.sd-shots__media img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- 掛け合わせ図（高彩度 × 高コントラスト × 立体感） ---------- */
.sd-formula{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px;}
.sd-formula__item{flex:1;min-width:96px;text-align:center;background:var(--sd-accent-soft);border:1px solid var(--sd-accent-line);border-radius:12px;padding:18px 10px;font-weight:800;font-size:14.5px;}
.sd-formula__x{font-size:18px;font-weight:900;color:var(--sd-accent-ink);}
.sd-quote{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:14px;padding:22px 26px;font-size:15px;margin:0 0 20px;box-shadow:var(--sd-shadow);}
.sd-quote strong{color:var(--sd-accent-ink);font-weight:800;}

/* ---------- 良い例／悪い例の2枚（.sd-cols2 の中で使う） ---------- */
.sd-vs{border-radius:16px;padding:32px 30px;border:1px solid var(--sd-line);background:var(--sd-panel);box-shadow:var(--sd-shadow);}
.sd-vs h3{font-size:18px;font-weight:700;margin:0 0 16px;}
.sd-vs ul{list-style:none;margin:0;padding:0;}
.sd-vs li{padding:9px 0 9px 24px;position:relative;border-bottom:1px solid var(--sd-line);font-size:13.5px;color:var(--sd-sub);}
.sd-vs li:last-child{border-bottom:none;}
.sd-vs.-bad{border-color:#ecd8dc;background:#fdf8f9;}
.sd-vs.-bad li::before{content:"×";color:#c53a4d;position:absolute;left:3px;font-weight:800;}
.sd-vs.-good{border-color:var(--sd-accent-line);background:linear-gradient(165deg,var(--sd-accent-soft),#fff 62%);}
.sd-vs.-good li::before{content:"✓";color:var(--sd-accent-ink);position:absolute;left:2px;font-weight:800;}

/* ---------- 5枚組の料金プラン ---------- */
.sd-plans--5{grid-template-columns:repeat(5,1fr);gap:14px;}
.sd-plans--5 .sd-plan{padding:26px 20px;}
.sd-plans--5 .sd-plan h3{font-size:16px;}
.sd-plans--5 .sd-plan__num{font-size:25px;padding-top:0;border-top:none;}
.sd-plans--5 .sd-plan__for{min-height:52px;}
.sd-plan__time{display:inline-block;font-size:11.5px;font-weight:700;color:var(--sd-accent-ink);background:var(--sd-accent-soft);border-radius:99px;padding:4px 12px;margin:0 0 14px;}

/* ---------- Instagram 誘導 ---------- */
.sd-insta{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center;text-align:left;}
.sd-insta__badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;border:1px solid var(--sd-line);border-radius:99px;padding:6px 16px;margin:0 0 16px;background:var(--sd-panel);}
.sd-insta__badge svg{width:16px;height:16px;color:#c13584;}
.sd-insta h2{text-align:left;}
.sd-insta .sd-lead{text-align:left;margin-left:0;}
/* 白文字を載せるボタンなので、グラデーションの全ストップを白に対して
   4.5:1 以上にしている（#d62976=4.73 / #c13584=5.11 / #962fbf=6.08 / #405de6=5.35）。
   純正のラジアルグラデーションは淡い黄色を含み、白文字が読めなくなるため使わない。 */
.sd-igbtn{display:inline-flex;align-items:center;gap:10px;background-color:#c13584;background-image:linear-gradient(95deg,#d62976 0%,#c13584 32%,#962fbf 64%,#405de6 100%);color:#fff;font-weight:800;font-size:14.5px;border-radius:99px;padding:15px 30px;text-decoration:none;transition:opacity .2s,transform .2s;margin-top:22px;}
.sd-igbtn:hover{opacity:.9;transform:translateY(-1px);}
.sd-igbtn svg{width:18px;height:18px;}

/* Instagram 投稿のモックアップ */
.sd-ig{background:#fff;color:#1d1d20;border:1px solid var(--sd-line);border-radius:18px;overflow:hidden;max-width:360px;margin:0 auto;box-shadow:0 18px 44px rgba(16,24,40,.14);display:block;text-decoration:none;transition:transform .25s,box-shadow .25s;}
.sd-ig:hover{transform:translateY(-4px);box-shadow:0 24px 56px rgba(16,24,40,.18);}
.sd-ig__head{display:flex;align-items:center;gap:10px;padding:12px 14px;}
.sd-ig__ava{width:34px;height:34px;border-radius:50%;background:#c13584;background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%);padding:2px;flex:none;}
.sd-ig__ava i{display:block;width:100%;height:100%;border-radius:50%;background:#fff;}
.sd-ig__user{flex:1;line-height:1.35;}
.sd-ig__user strong{display:block;font-size:13px;color:#1d1d20;}
.sd-ig__user span{font-size:11px;color:#63687a;}
.sd-ig__more{color:#63687a;font-weight:900;}
.sd-ig__img{aspect-ratio:1/1;overflow:hidden;background:var(--sd-panel2);}
.sd-ig__img img{width:100%;height:100%;object-fit:cover;display:block;}
.sd-ig__actions{display:flex;justify-content:space-between;padding:12px 14px 6px;}
.sd-ig__actions svg{width:22px;height:22px;color:#1d1d20;}
.sd-ig__actionsL{display:flex;gap:14px;}
.sd-ig__cap{padding:4px 14px 16px;font-size:12.5px;line-height:1.65;color:#3d4152;}
.sd-ig__cap strong{color:#1d1d20;}
.sd-ig__tag{color:#1f4fd8;}

@media(max-width:900px){
  .sd-video,.sd-insta{grid-template-columns:1fr;}
  .sd-insta{gap:36px;}
  .sd-shots{grid-template-columns:1fr 1fr;}
  .sd-plans--5{grid-template-columns:1fr 1fr;}
  .sd-formula{gap:8px;}
  .sd-formula__item{min-width:72px;padding:14px 6px;font-size:13px;}
}
@media(max-width:560px){
  .sd-shots,.sd-plans--5{grid-template-columns:1fr;}
}

/* ============================================================
   ページ固有コンポーネント（v3.5で追加）
   sns-advertisement（SNS広告運用 / TaTap AD Studio）
============================================================ */

/* ---------- 問題の掛け算図 ---------- */
.sd-loop{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:10px;align-items:stretch;max-width:960px;margin:0 auto;}
.sd-loop__box{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:14px;padding:22px 16px;text-align:center;box-shadow:var(--sd-shadow);}
.sd-loop__box.-res{border-color:#e7c9ce;background:#fdf7f8;}
.sd-loop__no{font-size:11px;font-weight:800;color:var(--sd-dim);letter-spacing:.1em;margin:0 0 8px;}
.sd-loop__box.-res .sd-loop__no{color:#c53a4d;}
.sd-loop__txt{font-size:13.5px;font-weight:700;line-height:1.6;margin:0;}
.sd-loop__op{display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:var(--sd-dim);}
.sd-loop__ans{margin:16px auto 0;padding:15px 26px;border:1px dashed var(--sd-accent-line);background:var(--sd-accent-soft);border-radius:12px;color:var(--sd-accent-ink);font-size:14px;font-weight:700;text-align:center;max-width:960px;}

/* ---------- 2列の強みカード ---------- */
.sd-rsn--2{grid-template-columns:1fr 1fr;}

/* ---------- メソッド名バッジ ---------- */
.sd-badge{display:inline-block;background:var(--sd-accent-soft);border:1px solid var(--sd-accent-line);border-radius:99px;padding:8px 24px;font-size:13px;font-weight:800;color:var(--sd-accent-ink);letter-spacing:.06em;margin:0 0 18px;}

/* ---------- 補足タグ（各ステップの担当Studio・所要時間など） ---------- */
.sd-tag{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;font-weight:700;color:var(--sd-accent-ink);background:var(--sd-accent-soft);padding:4px 14px;border-radius:99px;}

/* ---------- 帯メモ（対応媒体など） ---------- */
.sd-strip{background:var(--sd-accent-soft);border:1px solid var(--sd-accent-line);border-radius:12px;padding:16px 24px;font-size:14px;color:var(--sd-sub);line-height:1.8;margin:0 auto 8px;max-width:900px;}
.sd-strip strong{color:var(--sd-accent-ink);font-weight:800;}

@media(max-width:900px){
  .sd-loop{grid-template-columns:1fr;}
  .sd-loop__op{transform:rotate(90deg);}
  .sd-rsn--2{grid-template-columns:1fr;}
}

/* ============================================================
   v3.5 スマホ最終段（〜560px）
   ------------------------------------------------------------
   900px で 2カラムまでしか縮まないコンポーネントを1カラムにする。
   iPhone 幅（390px）だと 2カラム = カード内幅125px前後になり、
   .sd-res で起きたのと同じ「文字が1〜2文字ずつ折り返す」状態になるため。
   検査方法：全コンポーネントを 390px / 360px で実描画し、
   「幅150px未満なのに6文字以上のテキストを持つ要素」を機械抽出して確認。
============================================================ */
@media(max-width:560px){
  .sd-tools,.sd-mall,.sd-data--4,.sd-ba,.sd-spec{grid-template-columns:1fr;}
  /* 「高彩度 × 高コントラスト × 立体感」は横並びだと1語が3行に折れるため縦積みに */
  .sd-formula{flex-direction:column;}
  .sd-formula__item{width:100%;}
  .sd-formula__x{transform:rotate(90deg);}
  .sd-data--4 .sd-data__item strong{font-size:40px;}
  .sd-ba__item,.sd-spec{padding:22px 20px;}
  .sd-wrap{padding:0 16px;}
  .sd-hero h1{font-size:clamp(26px,7.2vw,34px);}
  .sd-btn{padding:14px 24px;font-size:13.5px;}
  .sd-btns{gap:10px;}
  .sd-btns .sd-btn{flex:1 1 auto;justify-content:center;}
}

/* ============================================================
   ページ固有コンポーネント（v3.6で追加）
   サービス一覧ページ（/service/）
   ------------------------------------------------------------
   ※ 一覧ページの旧インラインCSSは .sd-goal を「目的別ナビ」の意味で
     使っていましたが、当CSSでは .sd-goal は intangible-sns の
     「ゴール比較ミニ図」として既に使われています。
     名前が衝突するため、一覧ページ側は .sd-pick に改名しています。
============================================================ */

/* ---------- 目的別ナビ ---------- */
.sd-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:left;}
.sd-pick__item{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:16px;padding:26px 24px;text-decoration:none;display:block;box-shadow:var(--sd-shadow);transition:border-color .2s,transform .2s,box-shadow .2s;}
a.sd-pick__item:hover{border-color:var(--sd-accent-line);transform:translateY(-3px);box-shadow:0 12px 32px rgba(16,24,40,.10);}
.sd-pick__item em{font-style:normal;display:block;color:var(--sd-accent-ink);font-size:11px;font-weight:800;letter-spacing:.12em;margin:0 0 10px;}
.sd-pick__item b{display:block;color:var(--sd-txt);font-size:15.5px;line-height:1.6;margin:0 0 14px;font-weight:700;}
.sd-pick__item span{display:block;font-size:12.5px;color:var(--sd-accent-ink);font-weight:700;}
/* ★ .sd-pick__item span（0,1,1）の display:block に負けるため、
     ここは必ず要素セレクタ付きで書くこと。span 単体だと縦積みになりません。 */
.sd-pick__item span.sd-pick__links{display:flex;flex-direction:column;gap:7px;}
.sd-pick__links a{font-size:12.5px;color:var(--sd-accent-ink);text-decoration:none;font-weight:700;}
.sd-pick__links a:hover{text-decoration:underline;text-underline-offset:3px;}

/* ---------- カテゴリ見出し ---------- */
.sd-cat{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:64px 0 26px;padding-bottom:14px;border-bottom:1px solid var(--sd-line);text-align:left;}
.sd-cat.-first{margin-top:8px;}
.sd-cat h3{font-size:19px;font-weight:700;margin:0;}
.sd-cat span{font-size:12.5px;color:var(--sd-dim);}

/* ---------- サービスカード ---------- */
.sd-svc{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left;}
.sd-svc--2{grid-template-columns:repeat(2,1fr);}
.sd-svc__card{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:16px;text-decoration:none;display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:var(--sd-shadow);transition:border-color .2s,transform .2s,box-shadow .2s;}
.sd-svc__card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--sd-accent),transparent 70%);opacity:.7;transition:opacity .2s;}
.sd-svc__card:hover{border-color:var(--sd-accent-line);transform:translateY(-4px);box-shadow:0 12px 32px rgba(16,24,40,.10);}
.sd-svc__card:hover::before{opacity:1;}
.sd-svc__body{padding:28px 28px 26px;display:flex;flex-direction:column;flex:1;position:relative;z-index:1;}
.sd-svc__group{font-size:10.5px;color:#1b2400;background:var(--sd-accent);border-radius:99px;padding:3px 13px;font-weight:800;display:inline-block;align-self:flex-start;margin:0 0 12px;}
.sd-svc__en{font-size:11.5px;letter-spacing:.18em;color:var(--sd-accent-ink);text-transform:uppercase;font-weight:800;margin:0 0 8px;}
.sd-svc__ttl{color:var(--sd-txt);font-size:18.5px;font-weight:700;line-height:1.55;margin:0 0 8px;}
.sd-svc__for{font-size:12px;color:var(--sd-accent-ink);margin:0 0 12px;font-weight:700;line-height:1.6;}
.sd-svc__txt{font-size:13px;color:var(--sd-sub);margin:0;flex:1;}
.sd-svc__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;}
.sd-svc__tags span{font-size:11px;color:var(--sd-dim);border:1px solid var(--sd-line);border-radius:99px;padding:3px 11px;}
.sd-svc__more{font-size:12.5px;color:var(--sd-accent-ink);margin:16px 0 0;font-weight:800;}

/* ---------- 実績カードのバッジ ---------- */
.sd-works__thumb{position:relative;}
.sd-works__badge{position:absolute;top:10px;left:12px;font-size:10.5px;color:#1b2400;background:var(--sd-accent);border-radius:99px;padding:2px 12px;font-weight:800;z-index:2;}

@media(max-width:900px){
  .sd-pick{grid-template-columns:1fr 1fr;}
  .sd-svc,.sd-svc--2{grid-template-columns:1fr;}
  .sd-svc__body{padding:24px 22px;}
  .sd-cat{margin:44px 0 20px;}
}
@media(max-width:560px){
  .sd-pick{grid-template-columns:1fr;}
}

/* ============================================================
   ページ固有コンポーネント（v3.7で追加）
   資料ダウンロード一覧ページ（/download/）
   ------------------------------------------------------------
   ※ 旧インラインCSSはダークテーマ前提だったため、ライトテーマ用に
     色指定をトークン参照へ全面的に置き換えています。
   ※ 表紙画像は実測で 1707×960（16:9）。aspect-ratio:16/9 + cover なら
     トリミングが発生しません。縦長の表紙を追加する場合は
     object-fit を contain に変えてください。
============================================================ */

/* ---------- 資料カード（2列：メイン資料） ---------- */
.sd-doc{display:grid;grid-template-columns:1fr 1fr;gap:20px;text-align:left;}
.sd-doc__card{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sd-shadow);transition:border-color .2s,transform .2s,box-shadow .2s;}
.sd-doc__card:hover{border-color:var(--sd-accent-line);transform:translateY(-4px);box-shadow:0 12px 32px rgba(16,24,40,.10);}
.sd-doc__cover{aspect-ratio:16/9;background:var(--sd-panel2);overflow:hidden;position:relative;}
.sd-doc__cover img{width:100%;height:100%;object-fit:cover;display:block;}
.sd-doc__badge{position:absolute;top:12px;left:14px;font-size:10.5px;color:#1b2400;background:var(--sd-accent);border-radius:99px;padding:3px 14px;font-weight:800;z-index:2;}
.sd-doc__body{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1;}
.sd-doc__ttl{font-size:19px;font-weight:700;line-height:1.55;margin:0 0 6px;color:var(--sd-txt);}
.sd-doc__for{font-size:12.5px;color:var(--sd-accent-ink);margin:0 0 12px;font-weight:700;line-height:1.6;}
.sd-doc__txt{font-size:13.5px;color:var(--sd-sub);margin:0 0 16px;}
.sd-doc__list{list-style:none;margin:0 0 20px;padding:16px 18px;background:var(--sd-panel2);border:1px solid var(--sd-line);border-radius:12px;font-size:13px;color:var(--sd-sub);flex:1;}
.sd-doc__list li{padding:4px 0 4px 22px;position:relative;}
.sd-doc__list li::before{content:"✓";color:var(--sd-accent-ink);font-weight:800;position:absolute;left:0;}
.sd-doc__card .sd-btn{align-self:flex-start;}
/* 関連サービスへの内部リンク（1行） */
.sd-doc__rel{font-size:12px;color:var(--sd-dim);margin:14px 0 0;}
.sd-doc__rel a{color:var(--sd-accent-ink);font-weight:700;text-decoration:none;}
.sd-doc__rel a:hover{text-decoration:underline;text-underline-offset:3px;}

/* ---------- 資料カード（3列：サービス別・お役立ち） ---------- */
.sd-doc--3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left;}
.sd-doc--3 .sd-doc__card{border-radius:16px;}
.sd-doc--3 .sd-doc__body{padding:22px 22px 24px;}
.sd-doc--3 .sd-doc__ttl{font-size:16.5px;margin:0 0 8px;}
.sd-doc--3 .sd-doc__for{margin:0 0 10px;}
.sd-doc--3 .sd-doc__txt{font-size:13px;margin:0 0 16px;flex:1;}
.sd-doc--3 .sd-btn{padding:12px 24px;font-size:13px;}

/* ---------- 状態バリエーション ---------- */
.sd-doc__card.-main{border-color:var(--sd-accent-line);background:linear-gradient(160deg,var(--sd-bg-lime),var(--sd-panel) 60%);}
.sd-doc__card.-soon{opacity:.55;pointer-events:none;}
.sd-doc__card.-soon .sd-doc__badge{background:var(--sd-panel2);color:var(--sd-dim);border:1px solid var(--sd-line);}

@media(max-width:900px){
  .sd-doc{grid-template-columns:1fr;}
  .sd-doc--3{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .sd-doc--3{grid-template-columns:1fr;}
}

/* ============================================================
   ページ固有コンポーネント（v3.8で追加）
   note運用代行ページ（/service/note-studio/）
   ------------------------------------------------------------
   ※ AI引用ドメインのランキングカード。数字が主役なので
     枠線と余白だけで見せ、色はハイライト1枚にしか使いません。
   ※ 出典表記（.sd-rank__src）は必ず一緒に出すこと。
     順位は調査時点のものなので、出典と日付が無いと
     ただの主張になってしまいます。
============================================================ */
.sd-rank{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;max-width:940px;margin:0 auto;}
.sd-rank__item{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:14px;padding:20px 12px;text-align:center;box-shadow:var(--sd-shadow);}
.sd-rank__item.-hl{background:linear-gradient(165deg,var(--sd-accent-soft),#fff 62%);border-color:var(--sd-accent-line);}
.sd-rank__n{display:block;font-size:11.5px;font-weight:800;color:var(--sd-dim);letter-spacing:.12em;}
.sd-rank__item.-hl .sd-rank__n{color:var(--sd-accent-ink);}
.sd-rank__d{display:block;font-size:13.5px;font-weight:800;margin:8px 0 0;line-height:1.45;word-break:break-all;color:var(--sd-txt);}
.sd-rank__m{display:block;font-size:11.5px;color:var(--sd-dim);margin:8px 0 0;line-height:1.6;}
.sd-rank__item.-hl .sd-rank__m{color:var(--sd-accent-ink);font-weight:700;}
.sd-rank__src{font-size:12px;color:var(--sd-dim);margin:20px auto 0;max-width:940px;text-align:center;line-height:1.8;}
.sd-rank__src a{color:var(--sd-accent-ink);font-weight:700;}
@media(max-width:760px){
  .sd-rank{grid-template-columns:1fr 1fr;}
  .sd-rank__item:first-child{grid-column:span 2;}
}
@media(max-width:430px){
  /* ドメイン名は折り返すと読めなくなるので、狭い画面では1列に落とす */
  .sd-rank{grid-template-columns:1fr;}
  .sd-rank__item:first-child{grid-column:auto;}
  .sd-rank__item{display:flex;align-items:baseline;gap:12px;text-align:left;padding:14px 18px;}
  .sd-rank__d{margin:0;flex:1;}
  .sd-rank__m{margin:0;}
}

/* ============================================================
   sd-service.css v3.9 ここまで（2026-08-06）
   この行が見えていれば、配信されているCSSは最新版です。
============================================================ */