@charset "utf-8";
/* ============================================================
   SIGNCOSIGN, INC. — 静的マークアップ（WordPress子テーマ移植用）
   sc-style.css  /  すべてのクラスに sc- 接頭辞
   ------------------------------------------------------------
   1. 基準値（CSS変数）
   2. リセット / 共通
   3. ヘッダー・ドロワー
   4. ヒーロー（3D演出）
   5. 共通パーツ（見出し・ボタン・タグ・カード）
   6. トップページ各セクション
   7. WORKS一覧
   8. WORKS詳細
   9. 固定ページ（リーガル系）
   10. フッター
   11. レスポンシブ（〜768px）
   ============================================================ */

/* ============================================================
   1. 基準値 — フォント / 色 / 余白
   ============================================================ */
:root{
  /* --- フォント --- */
  --sc-font-en:'Montserrat',system-ui,sans-serif;      /* 欧文・見出し・ラベル */
  --sc-font-jp:'Noto Sans JP',system-ui,sans-serif;    /* 和文見出し */
  --sc-font-body:'Noto Sans JP',system-ui,sans-serif;  /* 本文 */

  /* --- 色（ブランドアクセントは緑のみ／線・ストローク限定） --- */
  --sc-paper:#FAF9F5;        /* 地色（温かみのあるオフホワイト） */
  --sc-surface:#FFFFFF;      /* カード面 */
  --sc-ink:#222222;          /* 墨：本文・ロゴ・暗い面 */
  --sc-ink-2:#5D5D58;        /* 副次テキスト */
  --sc-ink-3:#8D8D86;        /* キャプション */
  --sc-line:#E4E3DC;         /* ヘアライン */
  --sc-ring:#CDCCC4;         /* 円のライン */
  --sc-ring-faint:#ECE9E0;   /* 背面の円 */
  --sc-signal:#1F7A4D;       /* 共鳴の緑（明るい地） */
  --sc-signal-light:#3BA06A; /* 共鳴の緑（墨の地） */
  --sc-signal-flash:#2E9E5B; /* 正円が合った瞬間のみ（アニメーション専用） */
  --sc-on-dark:#FAF9F5;

  /* --- 余白・レイアウト（よはくとよゆう：詰めない／埋めない） --- */
  --sc-maxw:1080px;
  --sc-page-x:120px;                        /* ページ左右 */
  --sc-section-y:calc(clamp(96px,12vw,176px) + 40px); /* セクション上下 */
  --sc-phil-y:212px;                        /* PHILOSOPHY 上下 */
  --sc-head-y:152px;                        /* 下層ページ見出し上 */
  --sc-card-pad:clamp(28px,4vw,44px);
  --sc-hero-h:816px;
  --sc-hero-maxw:1440px;                    /* ヒーローの最大幅（1280px / 1600px も検証） */
  --sc-nav-h:84px;

  /* --- 字間・行間 --- */
  --sc-ls-title:.28em;
  --sc-ls-display:.08em;
  --sc-ls-body:.075em;
  --sc-ls-label:.32em;
  --sc-lh-body:2.2;

  /* --- 角丸・影・モーション --- */
  --sc-r-sm:8px;
  --sc-r-card:14px;
  --sc-r-pill:999px;
  --sc-shadow-md:0 6px 24px rgba(34,34,34,.06);
  --sc-ease:cubic-bezier(.22,.61,.36,1);
  --sc-dur-fast:.15s;
  --sc-dur-base:.25s;
  --sc-dur-slow:.44s;
}

/* --- Webフォント ---
   @font-face はサブセット化した woff2 を sc-fonts.css に分離し、
   functions.php から読み込む（このファイルには置かない）。 */

/* ============================================================
   2. リセット / 共通
   ============================================================ */

/* ---- 全ページ共通の下地：色・書体・枠だけ ----------------------
   ここには段組み(display/grid/flex)・余白(margin/padding)・
   幅の指定を書かないこと。ポリシー系の固定ページを含む全ページに
   effectするため、レイアウトを持ち込むと既存ページが崩れる。
   段組みと余白は必ず .sc- 接頭辞のクラス配下に置く。
   ------------------------------------------------------------ */
body{
  background:var(--sc-paper);
  color:var(--sc-ink);
  font-family:var(--sc-font-body);
  -webkit-font-smoothing:antialiased;
}
/* 見出しは「書体」だけ。color は指定しない。
   親テーマの WORKS 系ページは body.is-black{color:#fff} で白文字にしており、
   ここで h1-h6 に色を直接指定すると継承より強く効いて見出しが潰れる。 */
h1,h2,h3,h4,h5,h6{font-family:var(--sc-font-jp)}
hr{border:0;border-top:1px solid var(--sc-line)}
th,td{border-color:var(--sc-line)}
/* ---- 下地ここまで ---- */
html:has(body.sc-body){scroll-behavior:smooth}
body.sc-body{margin:0;background:var(--sc-paper);font-family:var(--sc-font-body);color:var(--sc-ink);-webkit-font-smoothing:antialiased}
@media (min-width:769px){body.sc-body{min-width:1280px}}
/* 素のリンク（クラス未指定）だけを対象にする。コンポーネント側の色を上書きしないため */
.sc-body a:not([class]){color:var(--sc-ink);text-decoration:none}
.sc-body a:not([class]):hover{color:var(--sc-ink-2)}
.sc-body a[class]{text-decoration:none}
.sc-body img{border:0}

/* ---- 画像でガタつかせない（CLS対策） --------------------------
   1) 場所を先に取る
      枠側に aspect-ratio か固定寸法があるものは、それで確保できている:
        .sc-card-visual / .sc-work-hero / .sc-embed / .sc-map  … aspect-ratio:16/9
        .sc-service-visual … aspect-ratio:749/675
        .sc-client-cell … height:100px、.sc-member-photo … 118x118
      枠を持たない img（ロゴのSVG）は aspect-ratio を直に指定した。
      テンプレート側の img には width / height 属性も付けてある。

   2) 現れるときだけ 200ms のフェード
      「読み込み完了まで隠す」方式は取らない。1枚ずつ、届いた順に出す。
      JSが動かない環境で画像が消えたままにならないよう、透過は
      html.sc-js（head の1行で付ける）が付いているときだけ効かせる。
      sc-site.js が load / error で .sc-is-loaded を付ける。
   -------------------------------------------------------------- */
html.sc-js :is(.sc-card-img,.sc-client-logo,.sc-service-img,.sc-member-photo img,.sc-work-hero-img,.sc-embed-img,.sc-work-rich img){opacity:0;transition:opacity .2s var(--sc-ease)}
html.sc-js :is(.sc-card-img,.sc-client-logo,.sc-service-img,.sc-member-photo img,.sc-work-hero-img,.sc-embed-img,.sc-work-rich img).sc-is-loaded{opacity:1}
@media (prefers-reduced-motion:reduce){
  html.sc-js :is(.sc-card-img,.sc-client-logo,.sc-service-img,.sc-member-photo img,.sc-work-hero-img,.sc-embed-img,.sc-work-rich img){opacity:1;transition:none}
}

.sc-m0{margin:0}
.sc-mt-40{margin-top:40px}
.sc-mt-64{margin-top:64px}
.sc-measure{max-width:820px}
.sc-center{display:flex;justify-content:center;margin-top:128px}
.sc-section{padding:var(--sc-section-y) var(--sc-page-x);position:relative;z-index:1}
.sc-section--tight{padding-top:104px}

/* ============================================================
   3. ヘッダー・ドロワー
   ============================================================ */
.sc-nav{height:var(--sc-nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 72px;border-bottom:1px solid var(--sc-line);position:sticky;top:0;z-index:40;background:rgba(250,249,245,.88);backdrop-filter:blur(12px) saturate(130%);-webkit-backdrop-filter:blur(12px) saturate(130%);transform:translateY(-101%);opacity:0;transition:transform .58s var(--sc-ease),opacity var(--sc-dur-slow) var(--sc-ease)}
.sc-nav.sc-is-in{transform:translateY(0);opacity:1}
.sc-nav--static{transform:none;opacity:1}          /* 下層ページは常時表示 */
.sc-nav-logo{height:17px;aspect-ratio:1254.31/240.49;display:block}
.sc-nav-links{display:flex;align-items:center;gap:44px}
.sc-nav-link{font-family:var(--sc-font-en);font-weight:500;font-size:12px;letter-spacing:.22em;color:var(--sc-ink-3);transition:color var(--sc-dur-base) var(--sc-ease)}
.sc-nav-link:hover{color:var(--sc-ink)}
.sc-nav-link.sc-is-current{color:var(--sc-ink)}
.sc-nav-burger{display:none;flex-direction:column;justify-content:center;align-items:flex-end;gap:7px;width:44px;height:44px;background:none;border:none;cursor:pointer;padding:0}
.sc-nav-burger-bar{display:block;width:26px;height:1.5px;background:var(--sc-ink)}
.sc-drawer{position:fixed;inset:0;background:var(--sc-paper);z-index:60;display:none;flex-direction:column;padding:16px 26px 48px}
.sc-drawer.sc-is-open{display:flex}
.sc-drawer-head{display:flex;align-items:center;justify-content:space-between;height:56px}
.sc-drawer-close{width:44px;height:44px;background:none;border:none;cursor:pointer;font-size:26px;color:var(--sc-ink);line-height:1;font-family:var(--sc-font-en);padding:0;text-align:right}
.sc-drawer-links{display:flex;flex-direction:column;gap:4px;margin-top:48px}
.sc-drawer-link{font-family:var(--sc-font-en);font-weight:500;font-size:14px;letter-spacing:.28em;color:var(--sc-ink);padding:16px 0}
.sc-drawer .sc-btn{align-self:flex-start;margin-top:32px}
@media (prefers-reduced-motion:reduce){.sc-nav{transition:none}}

/* ============================================================
   4. ヒーロー（3D演出：軌道の環＋波紋＋WebGL水面）
   ============================================================ */
/* ヒーローと同じ高さにして天地中央を揃える（stickyで以降のセクションにも持ち上がる） */
.sc-bgfx{position:sticky;top:0;height:var(--sc-hero-h);margin-bottom:calc(var(--sc-hero-h) * -1);z-index:0;pointer-events:none;transition:opacity .9s var(--sc-ease)}
.sc-body.sc-is-dim .sc-bgfx{opacity:.22}
.sc-hero{position:relative;z-index:1;overflow:hidden;height:var(--sc-hero-h)}
/* ---- ヒーローの枠 ----------------------------------------------
   広い画面でロゴ（左）と演出（右）が離れすぎないよう、ここで頭打ちにして
   中央へ寄せる。.sc-bgfx と .sc-hero の両方に同じ枠を入れて重ねる。

   演出の中心は「枠の右端から390px」。.sc-orbit は right:0 / width:780px の
   ままなので、枠の中に入れるだけで基準が画面の右端から枠の右端へ移る。
   水面（.sc-hero-water）だけは枠に入れず画面いっぱいに敷いたまま、
   中心座標を sc-hero-water.js 側で同じ基準に合わせている（枠で切ると
   波紋の端が直線で途切れて見えるため）。
   ---------------------------------------------------------------- */
.sc-hero-frame{position:absolute;inset:0;width:100%;max-width:var(--sc-hero-maxw);margin:0 auto}
.sc-hero-water{position:absolute;inset:0;z-index:0}
.sc-hero-water canvas{display:block;width:100%;height:100%}
.sc-ripples{position:absolute;left:50%;top:50%;width:780px;height:780px;transform:translate(-50%,-50%);z-index:0;color:var(--sc-ink)}
.sc-ripple{transform-box:fill-box;transform-origin:center;opacity:0;animation:sc-ripple 9s ease-out infinite}
/* 負のディレイで読み込み直後から定常状態に。3本が3秒間隔で内へ収束し続ける */
.sc-ripple:nth-of-type(2){animation-delay:-3s}
.sc-ripple:nth-of-type(3){animation-delay:-6s}
@keyframes sc-ripple{0%{transform:scale(1);opacity:0}16%{opacity:.4}100%{transform:scale(.05);opacity:0}}
.sc-orbit{position:absolute;inset:0;left:auto;right:0;width:780px;z-index:1;display:flex;align-items:center;justify-content:center;perspective:1200px;pointer-events:none}
.sc-orbit-ring{width:520px;aspect-ratio:1;border-radius:50%;border:2px solid var(--sc-ink);animation:sc-orbit3d 22s linear -7.5s infinite,sc-orbit-color 22s linear -7.5s infinite}
@keyframes sc-orbit3d{from{transform:rotate3d(.5,0,.866,180deg)}to{transform:rotate3d(.5,0,.866,540deg)}}
@keyframes sc-orbit-color{0%,47%{border-color:rgba(34,34,34,.4)}50%{border-color:rgba(46,158,91,.7)}53%,100%{border-color:rgba(34,34,34,.4)}}
.sc-hero-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-left:var(--sc-page-x);width:680px;box-sizing:border-box;text-align:left}
.sc-hero-eyebrow{font-family:var(--sc-font-en);font-weight:500;font-size:12px;letter-spacing:var(--sc-ls-label);text-transform:uppercase;color:var(--sc-ink-3);display:flex;align-items:center;gap:16px;margin:0}
.sc-hero-rule{width:46px;height:1px;background:currentColor;opacity:.5}
/* aspect-ratio は SVG の viewBox（1254.31 x 240.49）と同じ比。
   読み込み前から高さが決まるので、ロゴが入った瞬間に下の行が動かない。 */
.sc-hero-logo{width:470px;aspect-ratio:1254.31/240.49;margin:36px 0 0}
.sc-hero-tagline{font-family:var(--sc-font-en);font-weight:500;font-size:15px;letter-spacing:.12em;color:var(--sc-ink-2);margin:48px 0 0}
.sc-scroll{position:absolute;bottom:0;left:var(--sc-page-x);z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px}
.sc-scroll-label{font-family:var(--sc-font-en);font-size:10px;letter-spacing:.3em;color:var(--sc-ink-3)}
.sc-scroll-line{width:1px;height:44px;background:var(--sc-ring)}
@media (prefers-reduced-motion:reduce){.sc-orbit-ring,.sc-ripple,.sc-ripples{animation:none!important}.sc-hero-water{display:none}}

/* ============================================================
   5. 共通パーツ
   ============================================================ */
.sc-eyebrow{font-family:var(--sc-font-en);font-weight:500;font-size:.72rem;letter-spacing:var(--sc-ls-label);text-transform:uppercase;color:var(--sc-ink-3);display:flex;align-items:center;gap:.9em;margin:0}
.sc-eyebrow-rule{height:1px;flex:1;background:var(--sc-line)}
.sc-btn{font-family:var(--sc-font-body);font-weight:600;letter-spacing:.04em;border-radius:var(--sc-r-pill);border:1px solid var(--sc-signal);color:var(--sc-signal);background:transparent;display:inline-flex;align-items:center;justify-content:center;gap:.6em;line-height:1;transition:transform var(--sc-dur-fast) var(--sc-ease);cursor:pointer;font-size:.92rem;padding:.85em 1.8em}
.sc-btn:hover{transform:translateY(-2px);color:var(--sc-signal)}
.sc-btn--sm{font-size:.82rem;padding:.6em 1.3em}
.sc-tag{font-family:var(--sc-font-body);font-size:.74rem;letter-spacing:.06em;color:var(--sc-ink-2);border:1px solid var(--sc-line);border-radius:var(--sc-r-pill);padding:.4em 1em;background:var(--sc-surface);display:inline-flex;align-items:center;line-height:1;white-space:nowrap}
/* タグはすべて該当カテゴリーのアーカイブへのリンク。
   見た目は据え置きで、押せることが分かるぶんだけ線と文字を締める。
   緑（--sc-signal 系）はここでは使わない：緑は軌道の正円とボタンの役割。 */
a.sc-tag{transition:color var(--sc-dur-base) var(--sc-ease),border-color var(--sc-dur-base) var(--sc-ease)}
a.sc-tag:hover{color:var(--sc-ink);border-color:var(--sc-ink-3)}
a.sc-tag:focus-visible{color:var(--sc-ink);border-color:var(--sc-ink-3);outline:2px solid var(--sc-ink);outline-offset:2px}
a.sc-tag:hover .sc-tag-hash,a.sc-tag:focus-visible .sc-tag-hash{opacity:.75}
.sc-tag-hash{font-style:normal;opacity:.55;margin-right:1px;transition:opacity var(--sc-dur-base) var(--sc-ease)}
.sc-tag-list{display:flex;flex-wrap:wrap;gap:14px;margin-top:88px}
.sc-statement{font-size:16px;line-height:var(--sc-lh-body);letter-spacing:var(--sc-ls-body);color:var(--sc-ink-2)}
.sc-statement-gap{margin-top:2.7em}

/* WORKSカード（一覧・ピックアップ・関連で共用）
   タグをリンクにしたので、カード全体を包む a の中には入れられない
   （a の入れ子は無効で、ブラウザが外側の a を勝手に閉じる）。
   .sc-card でくくり、リンクは画像〜タイトルまで、タグはその外に置く。 */
.sc-card{display:block}
.sc-card-link{display:block;color:inherit}
.sc-card-link:hover{color:inherit}
.sc-card-visual{aspect-ratio:16/9;border:1px solid var(--sc-line);border-radius:var(--sc-r-card);background:var(--sc-surface);position:relative;overflow:hidden}
.sc-card-visual--ph{display:flex;align-items:center;justify-content:center}
.sc-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc-ph-motif{position:absolute;width:46%;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.sc-ph-label{font-family:var(--sc-font-en);font-size:.7rem;letter-spacing:.2em;color:var(--sc-ink-3);position:relative;z-index:1}
.sc-card-body{padding:14px 2px 0}
.sc-card-client{font-family:var(--sc-font-en);font-weight:500;font-size:.72rem;letter-spacing:.14em;color:var(--sc-ink-3);text-transform:uppercase}
.sc-card-title{font-family:var(--sc-font-jp);font-weight:700;font-size:1.02rem;margin:.5em 0 0;line-height:1.45;color:var(--sc-ink)}
/* padding は .sc-card-body（14px 2px 0）の左右と揃える。
   margin-top はタイトル下の余白をそのまま引き継いだ値 */
.sc-card-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:.66em;padding:0 2px}

/* ============================================================
   6. トップページ
   ============================================================ */
.sc-philosophy{display:grid;grid-template-columns:400px 1fr;gap:112px;padding:var(--sc-phil-y) var(--sc-page-x);position:relative;z-index:1}
.sc-philosophy-heading{font-family:var(--sc-font-jp);font-weight:700;font-size:32px;line-height:1.86;letter-spacing:.12em;margin:0;color:var(--sc-ink)}
.sc-philosophy-coda{font-family:var(--sc-font-en);font-weight:500;font-size:12px;letter-spacing:.28em;color:var(--sc-ink-2);margin:72px 0 0}
.sc-embed{aspect-ratio:16/9;background:var(--sc-surface);border:1px solid var(--sc-line);border-radius:var(--sc-r-card);position:relative;overflow:hidden;width:100%;margin-top:72px}
.sc-embed-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Speaker Deck / Google Maps の iframe を枠いっぱいに敷く */
.sc-embed iframe,.sc-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ピックアップは最新事例と同じ4カラムの上に置き、1枚が2カラム分を占める。
   列gap(48px)を共有しているので、どの画面幅でもカード幅が
   「最新事例2枚ぶん」とぴったり一致する。 */
.sc-works-pickup{display:grid;grid-template-columns:repeat(4,1fr);gap:88px 48px;margin-top:104px}
.sc-works-pickup > *{grid-column:span 2}
.sc-works-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:80px 48px;margin-top:136px}

.sc-client-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:104px}
.sc-client-cell{height:100px;border:1px solid var(--sc-line);border-radius:var(--sc-r-sm);display:flex;align-items:center;justify-content:center;padding:4px;overflow:hidden;background:var(--sc-surface)}
.sc-client-logo{width:100%;height:100%;object-fit:contain;transform:scale(1.32)}

.sc-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:128px}
.sc-service-card{border:1px solid var(--sc-line);border-radius:var(--sc-r-card);padding:calc(var(--sc-card-pad) + 8px);background:var(--sc-surface)}
.sc-service-visual{position:relative;margin:calc((var(--sc-card-pad) + 8px) * -1) calc((var(--sc-card-pad) + 8px) * -1) 0;aspect-ratio:749/675;background:var(--sc-paper);border-bottom:1px solid var(--sc-line);border-radius:var(--sc-r-card) var(--sc-r-card) 0 0;overflow:hidden;display:grid;place-items:center}
.sc-service-rings{position:absolute;right:-9%;top:-13%;width:30%;overflow:visible}
.sc-service-img{position:relative;width:auto;max-width:96%;height:92%;object-fit:contain;display:block;mix-blend-mode:multiply}
.sc-service-num{font-family:var(--sc-font-en);font-weight:600;font-size:11.5px;letter-spacing:.28em;color:var(--sc-ink-3);display:flex;align-items:center;gap:14px;margin-top:30px}
.sc-service-num-line{height:1px;flex:1;background:var(--sc-line)}
.sc-service-title{font-family:var(--sc-font-jp);font-weight:700;font-size:20px;letter-spacing:.11em;line-height:1.7;margin:18px 0 0}
.sc-service-body{font-size:13.5px;line-height:var(--sc-lh-body);letter-spacing:var(--sc-ls-body);color:var(--sc-ink-2);margin:26px 0 0}

.sc-member-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:104px 28px;margin-top:136px;justify-items:center}
.sc-member{text-align:center;max-width:200px;position:relative;isolation:isolate}
.sc-member-ellipse{position:absolute;top:59px;left:50%;width:158px;height:96px;border:1px solid var(--sc-ring);border-radius:50%;transform:translate(-50%,-50%) rotate(-16deg);z-index:-1;pointer-events:none}
.sc-member-photo{width:118px;height:118px;border-radius:50%;margin:0 auto 16px;border:1px solid var(--sc-ring);background:var(--sc-surface);overflow:hidden;display:flex;align-items:center;justify-content:center}
.sc-member-photo img{width:100%;height:100%;object-fit:cover;display:block}
.sc-member-role{font-family:var(--sc-font-en);font-size:.7rem;letter-spacing:.1em;color:var(--sc-ink-3);text-transform:uppercase;min-height:34px;line-height:1.5;display:flex;align-items:flex-end;justify-content:center}
.sc-member-name-jp{font-family:var(--sc-font-jp);font-weight:700;font-size:1.05rem;margin:.5em 0 .1em;color:var(--sc-ink)}
.sc-member-name-en{font-family:var(--sc-font-en);font-size:.74rem;letter-spacing:.12em;color:var(--sc-ink-2);text-transform:uppercase}
.sc-minna{text-align:center;margin:176px 0 0}
.sc-minna-text{font-family:var(--sc-font-body);font-weight:500;font-size:12.5px;letter-spacing:.4em;margin-right:-.4em;color:var(--sc-ink-2);white-space:nowrap}

.sc-company-name{font-family:var(--sc-font-jp);font-weight:700;font-size:30px;letter-spacing:.12em;margin:52px 0 0}
.sc-company-name-en{font-family:var(--sc-font-en);font-weight:500;font-size:12px;letter-spacing:var(--sc-ls-label);color:var(--sc-ink-3);margin:20px 0 0;text-transform:uppercase}
.sc-company-cols{display:grid;grid-template-columns:1fr 460px;gap:112px;align-items:start;margin-top:96px}
.sc-company-row{display:grid;grid-template-columns:170px 1fr;gap:36px;padding:32px 0;border-bottom:1px solid var(--sc-line)}
.sc-company-row--first{border-top:1px solid var(--sc-line)}
.sc-company-key{font-size:13px;letter-spacing:var(--sc-ls-body);color:var(--sc-ink-3);line-height:var(--sc-lh-body)}
.sc-company-val{font-size:14px;letter-spacing:var(--sc-ls-body);color:var(--sc-ink);line-height:var(--sc-lh-body);margin:0}
.sc-map{aspect-ratio:4/3;border:1px solid var(--sc-line);border-radius:var(--sc-r-card);background:var(--sc-surface);position:relative;overflow:hidden}

/* ============================================================
   7. WORKS一覧
   ============================================================ */
.sc-archive-head{padding:var(--sc-head-y) var(--sc-page-x) 0}
.sc-archive-title{font-family:var(--sc-font-en);font-weight:600;font-size:44px;letter-spacing:var(--sc-ls-title);color:var(--sc-ink);margin:0}
.sc-filter{display:flex;flex-wrap:wrap;gap:20px 36px;margin-top:80px}
.sc-filter-btn{font-family:var(--sc-font-body);font-size:12.5px;letter-spacing:var(--sc-ls-body);color:var(--sc-ink-3);background:none;border:none;border-bottom:1px solid transparent;padding:0 0 6px;cursor:pointer;transition:color var(--sc-dur-base) var(--sc-ease)}
.sc-filter-btn:hover{color:var(--sc-ink)}
.sc-filter-btn.sc-is-active{color:var(--sc-ink);border-bottom-color:var(--sc-ink)}
.sc-archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:96px 48px;margin-top:8px}

/* ============================================================
   8. WORKS詳細
   ============================================================ */
.sc-breadcrumb{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:var(--sc-ls-body);color:var(--sc-ink-3)}
.sc-breadcrumb-link{color:var(--sc-ink-3);transition:color var(--sc-dur-base) var(--sc-ease)}
.sc-breadcrumb-link:hover{color:var(--sc-ink)}
.sc-breadcrumb-sep{color:var(--sc-ring)}
.sc-work-title{font-family:var(--sc-font-en);font-weight:600;font-size:42px;letter-spacing:.14em;color:var(--sc-ink);margin:64px 0 0}
.sc-work-lead{font-family:var(--sc-font-jp);font-weight:700;font-size:21px;letter-spacing:.12em;line-height:1.9;color:var(--sc-ink);margin:32px 0 0;max-width:900px}
.sc-work-tags{display:flex;flex-wrap:wrap;gap:12px;margin-top:44px}
.sc-work-hero{aspect-ratio:16/9;border:1px solid var(--sc-line);border-radius:var(--sc-r-card);overflow:hidden;position:relative}
.sc-work-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc-work-body{max-width:820px;margin:0 auto}
.sc-work-h2{font-family:var(--sc-font-jp);font-weight:700;font-size:23px;letter-spacing:.12em;line-height:1.8;color:var(--sc-ink);margin:136px 0 0}
.sc-work-h2--first{margin-top:112px}
.sc-work-p{font-size:14.5px;line-height:var(--sc-lh-body);letter-spacing:var(--sc-ls-body);color:var(--sc-ink-2);margin:44px 0 0}
.sc-meta-row{display:grid;grid-template-columns:240px 1fr;gap:36px;padding:32px 0;border-bottom:1px solid var(--sc-line);align-items:baseline}
.sc-meta-row--first{border-top:1px solid var(--sc-line);margin-top:120px}
.sc-meta-label{font-family:var(--sc-font-en);font-weight:500;font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--sc-ink-3)}
.sc-meta-val{font-size:14.5px;letter-spacing:var(--sc-ls-body);color:var(--sc-ink);margin:0;line-height:2}
.sc-work-output{margin-top:56px;aspect-ratio:16/9;border:1px solid var(--sc-line);border-radius:var(--sc-r-card);background:var(--sc-surface);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sc-work-output .sc-ph-motif{width:56%}
.sc-work-link{display:inline-block;font-size:13px;letter-spacing:var(--sc-ls-body);color:var(--sc-ink-2);margin:24px 0 0}
.sc-work-link:hover{color:var(--sc-ink)}
.sc-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:96px}

/* BEFORE_ / ACTION_ / AFTER_ のラベル。字面は sc-meta-label と同じ。
   余白は sc-work-h2 のリズム（136px / 初回112px）に合わせる */
.sc-work-label{font-family:var(--sc-font-en);font-weight:500;font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--sc-ink-3);margin:136px 0 0}
.sc-work-label--first{margin-top:112px}
.sc-work-label + .sc-work-h2{margin-top:18px}

/* ACFのwysiwyg（group_text / works_text）の中身。
   本文まわりは sc-work-p と同じ値を使う（字間・行間は詰めない） */
.sc-work-rich{margin:44px 0 0}
.sc-work-rich > :first-child{margin-top:0}
.sc-work-rich p{font-size:14.5px;line-height:var(--sc-lh-body);letter-spacing:var(--sc-ls-body);color:var(--sc-ink-2);margin:44px 0 0}
.sc-work-rich ul,.sc-work-rich ol{font-size:14.5px;line-height:var(--sc-lh-body);letter-spacing:var(--sc-ls-body);color:var(--sc-ink-2);margin:44px 0 0;padding-left:1.5em}
.sc-work-rich h1,.sc-work-rich h2,.sc-work-rich h3,.sc-work-rich h4{font-family:var(--sc-font-jp);font-weight:700;font-size:19px;letter-spacing:.12em;line-height:1.8;color:var(--sc-ink);margin:72px 0 0}
.sc-work-rich a{color:var(--sc-ink)}
.sc-work-rich img{max-width:100%;height:auto;display:block;border-radius:var(--sc-r-card)}
/* 本文に貼られた外部サイトの画像（note等）は寸法が分からず、読み込むまで
   高さ0のままで下の文章を押し下げていた。仮に 16/9 で場所を取っておく。
   `auto 16/9` は「本来の比が分かればそちらを使い、分からない間だけ16/9」。
   実データ49枚の比の中央値がちょうど 16/9（1.778）だったのでこの値。
   width / height の付いた画像（メディアライブラリ経由＝ほぼ全て）は
   本来の比で確保できているのでここでは触らない。 */
.sc-work-rich img:not([width]):not([height]){width:100%;aspect-ratio:auto 16/9}
.sc-work-rich iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--sc-r-card);margin:44px 0 0;display:block}

/* ============================================================
   9. 固定ページ（リーガル系）
   ------------------------------------------------------------
   /rule/ /privacy/ /mynumber/ /request/ /cookie/ /overseas/ の6枚。
   本文は投稿に直接書かれたHTMLで、旧テーマ css/page.css 前提の
   クラス（.commonPage 配下）を使っている。本文には手を入れず、
   ここで新デザインに読み替える。親の page.css は header.php の
   分岐で読み込まないようにしてあるので、旧指定は残っていない。
   ============================================================ */
.sc-page-title{font-family:var(--sc-font-jp);font-weight:700;font-size:30px;letter-spacing:.12em;line-height:1.65;color:var(--sc-ink);margin:40px 0 0}
.sc-page{max-width:820px;margin:0 auto}

/* 旧レイアウトの入れ物。幅と位置は .sc-page 側で決めるので中身を持たせない */
.sc-page .container{width:auto;max-width:none;margin:0;padding:0}
.sc-page .commonPage{position:static;font-size:inherit}
/* 右上の縦組み "PRIVACY_"。6枚とも同じ文字列でページの区別にならず、
   グローバルヘッダーに削られて見切れるため出さない（見出しは .sc-page-title） */
.sc-page .page-initial{display:none}
/* 本文に h1 が残るのは、ページタイトルと文言が違うときだけ
   （同じなら page.php 側で落としている）。その場合は本文の見出しとして出す。 */
.sc-page .sectionTop h1{font-family:var(--sc-font-jp);font-weight:700;font-size:22px;letter-spacing:.12em;line-height:1.7;color:var(--sc-ink);margin:0 0 32px}

/* 字組みは WORKS詳細（.sc-work-rich）と同じ値に揃える */
.sc-page p{font-size:14.5px;line-height:var(--sc-lh-body);letter-spacing:var(--sc-ls-body);color:var(--sc-ink-2);margin:0 0 1.6em}
.sc-page p:last-child{margin-bottom:0}
.sc-page h2{font-family:var(--sc-font-jp);font-weight:700;font-size:19px;letter-spacing:.12em;line-height:1.8;color:var(--sc-ink);margin:72px 0 28px}
.sc-page .rule__body > h2:first-child,.sc-page .privacy__body > h2:first-child{margin-top:0}
.sc-page h3{font-family:var(--sc-font-jp);font-weight:700;font-size:16px;letter-spacing:.1em;line-height:1.8;color:var(--sc-ink);margin:40px 0 14px}
.sc-page a{color:var(--sc-ink);text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.sc-page a:hover{color:var(--sc-ink-2)}

/* 署名（社名・代表者）と制定日 */
.sc-page .text-right{text-align:right}
.sc-page .text-sign{margin-bottom:96px}
.sc-page .text-sign p{margin:0;line-height:2.1}
.sc-page .text-date{margin-top:64px}

/* リード文と各本文ブロックの間隔 */
.sc-page .rule-description,.sc-page .privacy-description{margin-bottom:96px}
.sc-page .rule__body,.sc-page .privacy__body{margin:0 0 72px}
.sc-page .rule__body:last-child,.sc-page .privacy__body:last-child{margin-bottom:0}

/* 相談窓口の囲み。黒ベタをやめ、SERVICEカードと同じ枠付きのカードにする */
.sc-page .text-bkBox{background:var(--sc-surface);border:1px solid var(--sc-line);border-radius:var(--sc-r-card);padding:var(--sc-card-pad);margin-top:72px;color:var(--sc-ink-2)}
.sc-page .text-bkBox h3{margin:0 0 14px;font-size:15px;color:var(--sc-ink)}
.sc-page .text-bkBox p{margin:0;font-size:13.5px;line-height:2}

/* 表 */
.sc-page .privacy-table{width:100%;border-collapse:collapse;margin:24px 0 32px;font-size:13.5px;letter-spacing:var(--sc-ls-body)}
.sc-page .privacy-table th{background:var(--sc-paper);color:var(--sc-ink);font-weight:700;text-align:center;padding:16px;border:1px solid var(--sc-line);line-height:1.7}
.sc-page .privacy-table td{padding:16px;border:1px solid var(--sc-line);color:var(--sc-ink-2);line-height:1.9;vertical-align:top}
.sc-page .privacy-table td p{margin:0}

/* （1）（2）… の連番。counter-reset を置かないのは旧 page.css と同じ。
   本文が番号を前提に書かれているので、振り直しの挙動を変えない。 */
.sc-page .list-parent{list-style:none;margin:0 0 1.6em;padding:0}
.sc-page .list-parent > li{counter-increment:cnt;position:relative;padding-left:2.9em;font-size:14.5px;line-height:var(--sc-lh-body);letter-spacing:var(--sc-ls-body);color:var(--sc-ink-2)}
.sc-page .list-parent > li:before{content:"（" counter(cnt) "）";position:absolute;left:0}
.sc-page .list-parent > li:not(:last-child){margin-bottom:.5em}
.sc-page .list-parent + h3{margin-top:2em}
/* 入れ子。マーカーは padding 側に取って枠の外に出さない（狭い幅で本文に被るため） */
.sc-page .list-nest{list-style:disc;margin:.3em 0 30px;padding-left:1.5em}
.sc-page .list-nest > li{margin-bottom:.3em}
.sc-page .list-nest .nest-att{list-style:none;margin-left:-1.5em}
.sc-page .list-normal{list-style:disc;margin:0 0 1.2em;padding-left:1.5em;font-size:14.5px;line-height:var(--sc-lh-body);letter-spacing:var(--sc-ls-body);color:var(--sc-ink-2)}

/* ============================================================
   10. フッター
   ============================================================ */
.sc-footer{background:var(--sc-ink);padding:112px var(--sc-page-x) 72px;position:relative;z-index:1}
.sc-footer-links{display:flex;flex-wrap:wrap;gap:18px 48px}
.sc-footer-link{font-size:12.5px;letter-spacing:.09em;color:rgba(250,249,245,.6)}
.sc-footer-link:hover{color:var(--sc-on-dark)}
.sc-footer-copy{font-family:var(--sc-font-en);font-size:10.5px;letter-spacing:.28em;color:rgba(250,249,245,.38);margin:96px 0 0}

/* ============================================================
   11. レスポンシブ（〜768px）
   ============================================================ */
@media (max-width:768px){
  /* ---- ヒーローの高さ ------------------------------------------
     固定の 700px をやめて画面の高さに合わせる。アプリ内ブラウザは
     上下にバーが出るぶん実際の表示領域が狭く、700px だとヒーローが
     はみ出して、天地中央にあるロゴが画面の下寄りに見えていた。
     dvh（実際に見えている高さ）を使い、vh はフォールバックとして残す。
     ここは vh、下の @supports で dvh に差し替える。
     custom property は単位を検証しないので、同じブロックに
     100vh → 100dvh と続けて書く書き方ではフォールバックにならない。
     -------------------------------------------------------------- */
  :root{--sc-page-x:26px;--sc-section-y:120px;--sc-phil-y:150px;--sc-head-y:120px;--sc-hero-h:100vh;--sc-nav-h:72px}
  /* ヘッダーはsticky＝先頭に高さ分の場所を取るため、そのままだとヒーローが
     ナビの高さぶん下にずれ、中心が画面中央から --sc-nav-h/2 だけ下がる。
     ヒーロー（.sc-bgfx と、その負のmargin-bottomで引き上がる .sc-hero）を
     ナビの下に潜り込ませて、画面の天地中央とヒーローの中心を一致させる。
     トップの最上部ではナビは透明（translateY(-101%)）なので隠れない。 */
  .sc-bgfx{margin-top:calc(var(--sc-nav-h) * -1)}
  html:has(body.sc-body),body.sc-body{overflow-x:clip}
  .sc-nav{padding:0 22px}
  .sc-nav-logo{height:14px}
  .sc-nav-links{display:none}
  .sc-nav-burger{display:flex}
  .sc-orbit{left:0;right:0;width:100%}
  .sc-orbit-ring{width:280px}
  .sc-ripples{width:420px;height:420px}
  .sc-hero-inner{padding:0 var(--sc-page-x);width:100%}
  .sc-hero-logo{width:265px}
  .sc-hero-eyebrow{font-size:10.5px;gap:12px}
  .sc-hero-tagline{font-size:13px;margin:36px 0 0}
  .sc-philosophy{grid-template-columns:1fr;gap:72px}
  .sc-philosophy-heading{font-size:26px}
  .sc-philosophy-coda{margin:56px 0 0}
  .sc-statement{font-size:14px;text-wrap:pretty}
  .sc-statement br{display:none}
  /* 1カラムなので span を戻す。付けたままだと暗黙の2列目ができて幅が溢れる */
  .sc-works-pickup{grid-template-columns:1fr;gap:72px;margin-top:80px}
  .sc-works-pickup > *{grid-column:auto}
  .sc-works-grid{grid-template-columns:1fr;gap:72px;margin-top:96px}
  .sc-client-grid{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:80px}
  .sc-client-cell{height:70px}
  .sc-service-grid{grid-template-columns:1fr;gap:36px;margin-top:96px}
  .sc-tag-list{margin-top:64px}
  .sc-member-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:72px 18px;margin-top:96px}
  .sc-member{max-width:100%}
  .sc-minna{margin:120px 0 0}
  .sc-company-name{font-size:24px}
  .sc-company-cols{grid-template-columns:1fr;gap:72px;margin-top:64px}
  .sc-company-row{grid-template-columns:1fr;gap:10px;padding:26px 0}
  .sc-center{margin-top:96px}
  .sc-footer{padding:88px var(--sc-page-x) 56px}
  .sc-footer-links{flex-direction:column;gap:20px}
  .sc-footer-copy{margin:72px 0 0;letter-spacing:.18em}
  .sc-measure{max-width:none}
  .sc-archive-title{font-size:30px}
  .sc-filter{gap:6px 26px;margin-top:56px}
  .sc-filter-btn{padding:16px 0 12px}
  .sc-archive-grid{grid-template-columns:1fr;gap:72px}
  .sc-breadcrumb{flex-wrap:wrap}
  .sc-work-title{font-size:30px;margin:48px 0 0}
  .sc-work-lead{font-size:17px}
  .sc-work-h2{font-size:19px;margin:96px 0 0}
  .sc-work-h2--first{margin-top:88px}
  .sc-work-p{font-size:14px;margin:36px 0 0}
  .sc-work-label{margin:96px 0 0}
  .sc-work-label--first{margin-top:88px}
  .sc-work-rich{margin:36px 0 0}
  .sc-work-rich p,.sc-work-rich ul,.sc-work-rich ol{font-size:14px;margin:36px 0 0}
  .sc-work-rich h1,.sc-work-rich h2,.sc-work-rich h3,.sc-work-rich h4{font-size:17px;margin:56px 0 0}
  .sc-meta-row{grid-template-columns:1fr;gap:8px;padding:24px 0}
  .sc-meta-row--first{margin-top:88px}
  .sc-related-grid{grid-template-columns:1fr;gap:64px;margin-top:72px}

  /* 固定ページ */
  .sc-page-title{font-size:22px;line-height:1.6;margin-top:32px}
  .sc-page{max-width:none}
  .sc-page p,.sc-page .list-parent > li,.sc-page .list-normal{font-size:14px}
  .sc-page h2{font-size:17px;margin:56px 0 20px}
  .sc-page h3{font-size:15px;margin:32px 0 12px}
  .sc-page .text-right{text-align:left}
  .sc-page .text-sign{margin-bottom:56px}
  .sc-page .text-date{margin-top:40px;text-align:right}
  .sc-page .rule-description,.sc-page .privacy-description{margin-bottom:56px}
  .sc-page .rule__body,.sc-page .privacy__body{margin-bottom:48px}
  .sc-page .text-bkBox{padding:24px;margin-top:48px}
  /* 表は横に長いので、ページごと横スクロールさせずに表の中だけで送る */
  .sc-page .privacy-table{display:block;overflow-x:auto;font-size:12.5px}
  .sc-page .privacy-table th,.sc-page .privacy-table td{padding:12px}
  .sc-page .list-parent > li{padding-left:2.6em}
}

/* 100dvh が使えるブラウザだけ差し替える。使えない場合は上の 100vh のまま。
   dvh はアドレスバーの出入りに追従するので、アプリ内ブラウザでも
   「いま見えている高さ」＝ヒーローの高さになる。 */
@supports (height:100dvh){
  @media (max-width:768px){
    :root{--sc-hero-h:100dvh}
  }
}