@charset "UTF-8";
/*
 * /lp/_css/solutions.css
 * GROUP SOLUTIONS（/lp/solutions/）専用。ダーク×ネオンライン。
 *
 * 【このファイルの立ち位置】
 * brand.css は白地前提で組んであるので、ここは「色の差し替え」ではなく
 * 「白地の決め打ちを全部ひっくり返す」ファイルになっている。
 * brand.css 側に #fff や var(--ink) をそのまま背景に使っている箇所があり、
 * 変数の上書きだけでは足りない。下の「brand.css の白地を打ち消す」節が本体。
 *
 * 【詳細度の注意】
 *  - brand.css の `a{color:var(--accent)}` は 0,0,1。ここは `.wu-b-solutions` を
 *    前置して 0,1,1 以上にしてあるので普通に勝てる。
 *  - ただし --accent だけは body の style 属性（インライン）で来るので、
 *    CSS 側からは上書きできない。値は _inc/brands.php で決めること。
 *  - accent(#35dfcf) の上に白文字は読めない。ボタン類の文字色は #04141c に倒す。
 */

body.wu-b-solutions{
  /* brand.css が使っている共通変数を、そのままダーク用に差し替える */
  --ink:#e8eef8;      /* 本文 */
  --muted:#93a3c0;    /* 補助テキスト。#070b14 に対して 7.7:1 */
  --line:#1e2b45;     /* 罫線 */
  --tint:#0f182a;     /* 薄い面 */
  --bg:#070b14;       /* 背景 */

  /* ここから solutions 固有 */
  --so-bg:#070b14;
  --so-panel:#0d1524;
  --so-panel2:#111c30;
  --so-edge:#1e2b45;
  --so-neon:#35dfcf;    /* シアン */
  --so-blue:#5b8cff;    /* ブルー */
  --so-violet:#a06bff;  /* パープル */
  --so-dim:#93a3c0;

  background:
    linear-gradient(to bottom, rgba(91,140,255,.07), transparent 620px),
    radial-gradient(900px 480px at 78% -140px, rgba(53,223,208,.10), transparent 70%),
    var(--so-bg);
  background-attachment:fixed;
}

/* 細いグリッド。背景に敷くと一気に「機械的」になる */
.wu-b-solutions .so-grid{
  position:relative;
  background-image:
    linear-gradient(to right, rgba(120,150,200,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120,150,200,.07) 1px, transparent 1px);
  background-size:56px 56px;
}

/* ============================================================
   brand.css の白地を打ち消す
   ここを消すと、白いカードが黒い背景の上に散らばる。
   ============================================================ */
.wu-b-solutions .wu-head{
  background:rgba(7,11,20,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--so-edge);
}
.wu-b-solutions .wu-head__name{ color:var(--ink); letter-spacing:.06em; }
.wu-b-solutions .wu-head__tag{ color:var(--so-dim); }
.wu-b-solutions .wu-head__nav a{ color:#c8d4e8; }
.wu-b-solutions .wu-head__nav a:hover{ color:var(--so-neon); text-decoration:none; }
.wu-b-solutions .wu-head__cta{
  background:linear-gradient(135deg,var(--so-neon),#5ef0c8);
  color:#04141c !important; font-weight:800;
  box-shadow:0 0 0 1px rgba(53,223,208,.4), 0 6px 22px rgba(53,223,208,.22);
}

.wu-b-solutions .wu-crumbs a{ color:var(--so-dim); }
.wu-b-solutions .wu-crumbs{ color:var(--so-dim); }

.wu-b-solutions .wu-article table{ background:var(--so-panel); border-color:var(--so-edge); }
.wu-b-solutions .wu-article th,
.wu-b-solutions .wu-article td{ border-bottom-color:var(--so-edge); }
/* accent 地に白文字だと読めないので、ヘッダー行は面を暗くして文字をネオンにする */
.wu-b-solutions .wu-article thead th{
  background:var(--so-panel2); color:var(--so-neon);
  border-bottom:1px solid rgba(53,223,208,.35);
}
.wu-b-solutions .wu-article tbody th{ color:#cfdaec; font-weight:700; }
.wu-b-solutions .wu-article h2{ border-left-color:var(--so-neon); }

.wu-b-solutions .wu-lead{
  background:linear-gradient(135deg, rgba(53,223,208,.08), rgba(91,140,255,.06)) , var(--so-panel);
  border-left:3px solid var(--so-neon);
  border-top:1px solid var(--so-edge);
  border-right:1px solid var(--so-edge);
  border-bottom:1px solid var(--so-edge);
  border-radius:0 10px 10px 0;
  box-shadow:none;
}
.wu-b-solutions .wu-lead__label{ color:var(--so-neon); }

.wu-b-solutions .wu-toc,
.wu-b-solutions .wu-card{ background:var(--so-panel); border-color:var(--so-edge); }
.wu-b-solutions .wu-card--cta{ border:1px solid rgba(53,223,208,.45); box-shadow:0 0 30px rgba(53,223,208,.08) inset; }
.wu-b-solutions .wu-card__button,
.wu-b-solutions .wu-cta__button,
.wu-b-solutions .wu-ctabar__button{
  background:linear-gradient(135deg,var(--so-neon),#5ef0c8); color:#04141c !important; font-weight:800;
}
.wu-b-solutions .wu-cta{
  background:linear-gradient(160deg, rgba(91,140,255,.10), transparent 60%), var(--so-panel);
  border:1px solid rgba(53,223,208,.4);
}
.wu-b-solutions .wu-cta__sub{ border-color:rgba(53,223,208,.45); color:var(--so-neon) !important; }
.wu-b-solutions .wu-cta__sub:hover{ background:rgba(53,223,208,.08); }
.wu-b-solutions .wu-meta__cat{ background:rgba(53,223,208,.14); color:var(--so-neon); }

.wu-b-solutions .wu-foot{ background:#04070e; border-top:1px solid var(--so-edge); color:#9fb0c9; }
.wu-b-solutions .wu-foot a{ color:#9fb0c9; }
.wu-b-solutions .wu-foot__tel a{ color:#fff; }
.wu-b-solutions .wu-foot__name{ color:var(--so-neon); }
.wu-b-solutions .wu-ctabar{ background:rgba(7,11,20,.96); border-top:1px solid var(--so-edge); }
.wu-b-solutions .wu-ctabar__close{ background:var(--so-panel); border-color:var(--so-edge); color:#9fb0c9; }

/* ============================================================
   埋め込みフォーム（contact ページ）
   ============================================================
   【原因】form.css は --wuf-* を :root（html要素）で定義している。
   その中身は var(--accent) / var(--ink) / var(--tint) だが、これらは body に付く
   （--accent は body の style 属性、--ink などは body.wu-b-solutions）。
   :root で解決すると body の値が届かず、全部ブランド既定値（白地用）に落ちる。
   結果、ダークページの上に「薄いグレー地＋薄いグレー文字」のボタンが出て読めなかった。

   【対処】body 側で --wuf-* を定義し直す。form.css はそれを参照しているので、
   個々の部品に上書きを当てなくても一括で直る。 */
body.wu-b-solutions{
  --wuf-accent:#35dfcf;   /* 必須バッジ・選択中のボタン・送信ボタンの地色 */
  --wuf-fg:#e8eef8;
  --wuf-muted:#93a3c0;    /* #070b14 に対して 7.7:1 */
  --wuf-line:#1e2b45;
  --wuf-soft:#111c30;     /* 未選択のボタンの地色 */
  --wuf-bg:#0d1524;       /* 入力欄の地色 */
  --wuf-err:#ff8a7a;
}
/* --wuf-accent の上の白文字は読めない（#35dfcf に対して 1.9:1）。文字色を倒す。 */
.wu-b-solutions .wuf-req,
.wu-b-solutions .wuf-choice input:checked + span,
.wu-b-solutions .wuf-submit,
.wu-b-solutions .wuf-dl{ color:#04141c; }
.wu-b-solutions .wuf-submit{ background:linear-gradient(135deg,var(--so-neon),#5ef0c8); font-weight:800; }
.wu-b-solutions .wuf-embed input::placeholder,
.wu-b-solutions .wuf-embed textarea::placeholder{ color:#6d7d9c; }
.wu-b-solutions .wuf-choice span{ color:#cfdaec; }
.wu-b-solutions .wuf-label{ color:#dbe5f5; }

/* ============================================================
   ヒーロー
   ============================================================ */
.so-hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--so-edge); }
.so-hero::after{
  /* 上端を走るネオンライン。装飾なので読み上げには出さない */
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--so-neon), var(--so-blue), transparent);
  opacity:.65;
}
.so-hero__in{ max-width:1160px; margin:0 auto; padding:74px 20px 64px; position:relative; z-index:1; }
.so-hero__tag{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11.5px; font-weight:700; letter-spacing:.2em; color:var(--so-neon);
  border:1px solid rgba(53,223,208,.35); border-radius:999px; padding:7px 16px; margin:0 0 24px;
}
.so-hero__tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--so-neon); box-shadow:0 0 10px var(--so-neon); }
.so-hero h1{
  font-size:clamp(28px, 4.2vw, 50px); font-weight:900; line-height:1.34; letter-spacing:-.01em;
  margin:0 0 22px; color:#fff; max-width:19em;
}
.so-hero h1 em{
  font-style:normal;
  background:linear-gradient(90deg,var(--so-neon),var(--so-blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.so-hero__lead{ font-size:17px; line-height:1.95; color:#cbd6e8; margin:0 0 14px; max-width:40em; }
.so-hero__sub{ font-size:14.5px; line-height:1.9; color:var(--so-dim); margin:0 0 30px; max-width:42em; }
.so-hero__btns{ display:flex; gap:12px; flex-wrap:wrap; }
.wu-b-solutions .so-btn{
  display:inline-block; padding:16px 32px; border-radius:8px; font-weight:800; font-size:16px;
  text-decoration:none;
  background:linear-gradient(135deg,var(--so-neon),#5ef0c8); color:#04141c !important;
  box-shadow:0 0 0 1px rgba(53,223,208,.35), 0 10px 30px rgba(53,223,208,.18);
}
.wu-b-solutions .so-btn:hover{ filter:brightness(1.06); text-decoration:none; }
.wu-b-solutions .so-btn--ghost{
  background:transparent; color:#dbe5f5 !important;
  border:1px solid rgba(155,180,220,.4); box-shadow:none; font-size:15px; padding:15px 26px;
}
.wu-b-solutions .so-btn--ghost:hover{ border-color:var(--so-neon); color:var(--so-neon) !important; background:rgba(53,223,208,.06); }

/* 数字ストリップ */
.so-stats{ border-top:1px solid var(--so-edge); border-bottom:1px solid var(--so-edge); background:rgba(13,21,36,.55); }
.so-stats__in{
  max-width:1160px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:repeat(4,1fr);
}
.so-stat{ padding:22px 22px 22px 0; }
.so-stat + .so-stat{ padding-left:22px; border-left:1px solid var(--so-edge); }
.so-stat b{
  display:block; font-size:29px; font-weight:900; line-height:1.2; color:var(--so-neon);
  text-shadow:0 0 18px rgba(53,223,208,.35);
}
.so-stat b i{ font-style:normal; font-size:13px; font-weight:700; margin-left:3px; color:#bcd6ea; text-shadow:none; }
.so-stat span{ display:block; font-size:12.5px; color:var(--so-dim); margin-top:5px; line-height:1.6; }

/* ============================================================
   セクション
   ============================================================ */
.so-sec{ max-width:1160px; margin:72px auto 0; padding:0 20px; }
.so-sec__label{
  display:flex; align-items:center; gap:10px;
  font-size:11.5px; font-weight:800; letter-spacing:.18em; color:var(--so-neon); margin:0 0 10px;
}
.so-sec__label::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(53,223,208,.5), transparent); }
.wu-b-solutions .so-sec h2{
  font-size:30px; font-weight:900; line-height:1.45; color:#fff;
  margin:0 0 12px; padding:0; border:0;
}
.so-sec__lead{ font-size:15.5px; line-height:1.95; color:#b6c4dc; margin:0 0 30px; max-width:52em; }

/* 3つの入口 */
.so-entry{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.wu-b-solutions .so-entry__c{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  position:relative; overflow:hidden;
  padding:26px 26px 24px; border-radius:14px;
  background:linear-gradient(170deg, rgba(91,140,255,.08), transparent 55%), var(--so-panel);
  border:1px solid var(--so-edge);
  transition:border-color .18s, transform .18s;
}
.wu-b-solutions .so-entry__c:hover{ border-color:rgba(53,223,208,.55); transform:translateY(-3px); text-decoration:none; }
.so-entry__c::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--so-neon),var(--so-blue));
  opacity:.75;
}
.so-entry__n{ display:block; font-size:11px; font-weight:800; letter-spacing:.16em; color:var(--so-neon); margin-bottom:12px; }
.so-entry__t{ display:block; font-family:"Zen Kaku Gothic New",sans-serif; font-size:21px; font-weight:900; color:#fff; line-height:1.5; margin-bottom:10px; }
.so-entry__d{ display:block; font-size:13.5px; line-height:1.85; color:var(--so-dim); margin-bottom:14px; }
.so-entry__m{ display:block; font-size:12.5px; color:#cfdaec; }
.so-entry__m b{ color:var(--so-neon); font-weight:700; }
.so-entry__m{ margin-top:auto; }
.so-entry__go{ display:block; margin-top:14px; font-size:13px; font-weight:700; color:var(--so-neon); }

/* 事業ネットワーク */
.so-net{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.so-net__g{
  padding:20px 22px; border-radius:12px;
  background:var(--so-panel); border:1px solid var(--so-edge);
}
.so-net__g--main{ border-color:rgba(53,223,208,.45); background:linear-gradient(160deg, rgba(53,223,208,.08), transparent 60%), var(--so-panel); }
.so-net__h{ font-size:13px; font-weight:800; letter-spacing:.08em; color:var(--so-neon); margin:0 0 12px; }
.so-net__g--sub .so-net__h{ color:#8fa0bd; }
.so-net__l{ list-style:none; margin:0; padding:0; font-size:13.5px; }
.so-net__l li{ padding:7px 0; border-bottom:1px dashed rgba(120,150,200,.16); color:#cfdaec; }
.so-net__l li:last-child{ border-bottom:0; }
.so-net__l li b{ color:#fff; font-weight:700; }
.so-net__l li span{ display:block; font-size:12px; color:var(--so-dim); margin-top:2px; }

/* 組み合わせの例 */
.so-combo{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.so-combo__c{ padding:24px 24px; border-radius:12px; background:var(--so-panel); border:1px solid var(--so-edge); }
.so-combo__who{ font-size:12px; font-weight:800; letter-spacing:.1em; color:var(--so-blue); margin:0 0 10px; }
.so-combo__t{ font-family:"Zen Kaku Gothic New",sans-serif; font-size:17px; font-weight:800; color:#fff; line-height:1.6; margin:0 0 12px; }
.so-combo__chain{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; padding:0; list-style:none; }
.so-combo__chain li{
  font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:5px;
  background:rgba(53,223,208,.10); border:1px solid rgba(53,223,208,.28); color:var(--so-neon);
}
.so-combo__chain li.is-fj{ background:rgba(91,140,255,.10); border-color:rgba(91,140,255,.3); color:#9ab6ff; }
.so-combo__d{ font-size:13.5px; line-height:1.85; color:var(--so-dim); margin:0; }

/* 数字を強調する帯 */
.so-flip{
  display:grid; grid-template-columns:130px 1fr; gap:24px; align-items:center;
  padding:26px 30px; margin:24px 0 0; border-radius:12px;
  background:linear-gradient(120deg, rgba(53,223,208,.12), rgba(91,140,255,.08));
  border:1px solid rgba(53,223,208,.3);
}
.so-flip__n{ font-family:"Zen Kaku Gothic New",sans-serif; font-size:42px; font-weight:900; color:var(--so-neon); line-height:1.1; text-shadow:0 0 22px rgba(53,223,208,.4); }
.so-flip__t{ margin:0 0 6px; font-size:16px; font-weight:800; color:#fff; line-height:1.7; }
.so-flip__d{ margin:0; font-size:13px; color:#b6c4dc; line-height:1.8; }

/* 手順 */
.so-step{ display:grid; gap:12px; counter-reset:so; }
.so-step__i{
  display:grid; grid-template-columns:52px 1fr; gap:18px; align-items:start;
  padding:20px 24px; border-radius:12px; background:var(--so-panel); border:1px solid var(--so-edge);
}
.so-step__n{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:rgba(53,223,208,.12); border:1px solid rgba(53,223,208,.35);
  color:var(--so-neon); font-weight:900; font-size:15px;
}
.so-step__t{ margin:0 0 5px; font-size:16px; font-weight:800; color:#fff; }
.so-step__d{ margin:0; font-size:13.5px; line-height:1.85; color:var(--so-dim); }

/* 記事本文内で使う小さめのカード列 */
.so-tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:0 0 1.6em; }
.so-tile{ padding:18px 20px; border-radius:10px; background:var(--so-panel); border:1px solid var(--so-edge); }
.so-tile__t{ margin:0 0 6px; font-size:14.5px; font-weight:800; color:var(--so-neon); }
.so-tile__d{ margin:0; font-size:13.5px; line-height:1.85; color:#b6c4dc; }

/* 注記 */
.wu-b-solutions .wu-note{ color:var(--so-dim); font-size:12.5px; line-height:1.85; }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media(max-width:1023px){
  .so-entry, .so-net, .so-combo{ grid-template-columns:1fr 1fr; }
}
@media(max-width:900px){
  .so-hero__in{ padding:52px 20px 44px; }
  /* 2列に折り返すので、3つめは左罫を消して上罫に付け替える */
  .so-stats__in{ grid-template-columns:repeat(2,1fr); }
  .so-stat{ padding:18px 16px 18px 0; }
  .so-stat + .so-stat{ padding-left:16px; }
  .so-stats__in .so-stat:nth-child(3){ padding-left:0; border-left:0; }
  .so-stats__in .so-stat:nth-child(3),
  .so-stats__in .so-stat:nth-child(4){ border-top:1px solid var(--so-edge); }
  .so-hero__tag{ font-size:10.5px; letter-spacing:.14em; padding:6px 13px; }
  .so-sec{ margin:52px auto 0; }
  .wu-b-solutions .so-sec h2{ font-size:23px; }
  .so-entry, .so-net, .so-combo, .so-tiles{ grid-template-columns:1fr; }
  .so-flip{ grid-template-columns:1fr; gap:12px; padding:22px 20px; }
  .so-flip__n{ font-size:34px; }
  .so-step__i{ grid-template-columns:44px 1fr; gap:14px; padding:16px 16px; }
}
@media(max-width:599px){
  /* 【注意】brand.css の @media(max-width:599px) にある .wu-wrap{padding:18px 16px 48px} が、
     あとから .wu-wrap--full{padding:0} を上書きしてしまう（詳細度は同じ 0,1,0 で記述順が後のため）。
     そのままだとヒーローの帯が画面端まで届かないので打ち消す。 */
  body.wu-b-solutions .wu-wrap--full{ padding:0; }
  .so-hero__in{ padding:40px 20px 34px; }
}