@charset "utf-8";

/* ============================================================
   sd-service.css  —  サービス詳細ページ共通スタイル
   ------------------------------------------------------------
   対象: /service/ 配下の sd- 系テンプレート 7本
     sns-operation / ec-mall / intangible-sns / sns-promotion
     system-building / sns-ai-training / flyer
   ------------------------------------------------------------
   収録しているのは「7ページすべてで1文字も差が無かった38ルール」だけです。

   含めていないもの（各テンプレートのインラインCSSに残してください）:
   - :root（CSS変数の定義）… 2ページで --sd-violet が未定義のため
   - 値がページごとにズレている12ルール … 意図的な調整の可能性があるため
   - @media(max-width:900px) … 中身がページごとに異なるため
   詳細は 手順書.md「ページ間でズレているCSS」を参照してください。
   ------------------------------------------------------------
   読み込み順: style.css の後、各ページのインライン <style> の前。
   インライン側が後勝ちになるため、ページ固有の上書きはそのまま効きます。
============================================================ */

/* ---------- 基盤・レイアウト ---------- */
.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:88px 0;}
.sd section + section{border-top:1px solid #1d1d22;}

/* ---------- 見出し・リード文 ---------- */
.sd-en{font-size:12px;letter-spacing:.22em;color:var(--sd-accent);text-transform:uppercase;font-weight:600;margin:0 0 12px;}
.sd-ttl{font-size:clamp(24px,3vw,34px);line-height:1.5;margin:0 0 14px;font-weight:700;}
.sd-lead{color:var(--sd-sub);font-size:15px;max-width:640px;margin:0 0 44px;}

/* ---------- ボタン ---------- */
.sd-btn:hover{transform:translateY(-2px);opacity:.9;}
.sd-btn--primary{background:var(--sd-accent);color:#111;}
.sd-btns{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- ヒーロー ---------- */
.sd-hero{padding:132px 0 72px;}
/* 固定ヘッダー分の余白を確保 */ .sd-crumb{font-size:12px;color:var(--sd-dim);margin:0 0 36px;}
.sd-crumb a{color:var(--sd-dim);text-decoration:none;}
.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:600;}
.sd-hero h1{font-size:clamp(30px,3.6vw,44px);line-height:1.45;margin:0 0 18px;font-weight:700;}
.sd-hero__stats{display:grid;gap:14px;}
.sd-stat{background:var(--sd-panel);border:1px solid var(--sd-line);border-radius:14px;padding:20px 26px;display:flex;align-items:baseline;gap:16px;}
.sd-stat span{font-size:13px;color:var(--sd-sub);}

/* ---------- 導入企業ロゴ（マーキー） ---------- */
.sd-logos{padding:40px 0 56px;}
.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-prob{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.sd-prob__item b{display:block;font-size:16px;line-height:1.7;margin:0 0 8px;font-weight:700;}
.sd-prob__item p{font-size:13px;color:var(--sd-sub);margin:0;}

/* ---------- フロー ---------- */
.sd-flow{position:relative;max-width:760px;}
.sd-flow::before{content:"";position:absolute;left:27px;top:10px;bottom:10px;width:2px;background:var(--sd-line);}
.sd-flow__item:last-child{padding-bottom:0;}
.sd-flow__head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 6px;}
.sd-flow__term{font-size:12px;color:#111;background:var(--sd-accent);border-radius:99px;padding:2px 14px;font-weight:800;white-space:nowrap;}

/* ---------- CTA・フッター周り ---------- */
.sd-cta{text-align:center;background:radial-gradient(ellipse 55% 90% at 50% 100%,#232f11 0%,transparent 70%);}
.sd-cta .sd-lead{margin-left:auto;margin-right:auto;}
.c-ftStmp,.footer{position:relative;z-index:2;}
.c-ftStmp,.c-ftStmp a,.c-ftStmp li{color:#a0a0ab;}