/* 2026-11-01: supplied company logo; background matches its #1a1a1a canvas. */
header, footer, header + div.fixed.inset-0 {
  background: #1a1a1a !important;
  color: #ededed;
  border-color: #414141 !important;
}
:is(header, footer, header + div.fixed.inset-0) :is(.text-ink-strong) { color: #fff !important; }
:is(header, footer, header + div.fixed.inset-0) :is(.text-ink, .text-ink-muted) { color: #e0e0e0 !important; }
:is(header, footer, header + div.fixed.inset-0) :is(.text-ink-sub) { color: #bdbdbd !important; }
:is(header, footer, header + div.fixed.inset-0) [class*="border-line"] { border-color: #414141 !important; }
:is(header, footer) .text-primary { color: #78dce4 !important; }
:is(header, footer) a:hover { color: #78dce4 !important; }
:is(header, footer, header + div.fixed.inset-0) :is(a, button):focus-visible { outline: 2px solid #78dce4; outline-offset: 5px; }
/* 2026-11-01 本人追加指定: 知ると、知らないを知る。の背景も黒へ。 */
.hx-statement { background: #1a1a1a !important; }

/* ロゴは縦横比を保ち、上下にも余白を設ける（本人サイズ調整）。 */
header a:has(> img[alt="株式会社 無知ノ知"]) { width: 128px; height: 50px; }
header img[alt="株式会社 無知ノ知"] { display: block; flex: none; width: 128px; height: auto; max-height: none; object-fit: contain; }
footer a:has(> img[alt="株式会社 無知ノ知"]) { width: 176px; height: 78px; }
footer img[alt="株式会社 無知ノ知"] { display: block; flex: none; width: 176px; height: auto; max-height: none; object-fit: contain; }
@media (min-width: 768px) {
  header a:has(> img[alt="株式会社 無知ノ知"]) { width: 152px; height: 66px; }
  header img[alt="株式会社 無知ノ知"] { width: 152px; }
  footer a:has(> img[alt="株式会社 無知ノ知"]) { width: 208px; height: 92px; }
  footer img[alt="株式会社 無知ノ知"] { width: 208px; }
}

/* 本人指定: トップのサービス3枚＋札幌AI研究会の白いカード面を黒へ。 */
.hs :is(.hs-card, .hs-base) {
  background: #1a1a1a;
  color: #fff;
  border-color: #414141;
}
.hs :is(.hs-card, .hs-base) .hs-body { background: #1a1a1a; }
.hs :is(.hs-card, .hs-base) .hs-body b { color: #fff; }
.hs :is(.hs-card, .hs-base) .hs-body p { color: #d1d1d1; }
.hs :is(.hs-card, .hs-base) .hs-img { border-color: #414141; }
.hs .hs-arrow { background: #333; color: #fff; border: 1px solid #666; }
.hs :is(.hs-card, .hs-base):focus-visible { outline: 2px solid #78dce4; outline-offset: 5px; }

/* 本人指定: 支援の深さのライン・矢印・ラベルも黒へ統一。 */
.hs .hs-depth { color: #1a1a1a; }
.hs .hs-depth i { background: #1a1a1a; }
.hs .hs-depth i::after { border-left-color: #1a1a1a; }

/* 本人指定: ステートメントの黄色い強調文字をサービス見出しと同じ青へ。 */
.hx-statement :is(.st-line, .st-say p) em { color: #00acc1; }

/* 本人指定: フッターのYouTube導線を赤い再生マーク付きの目立つボタンへ。 */
footer a[href*="youtube.com/"] {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 14px;
  padding: 14px 22px;
  border: 1px solid #666;
  border-radius: 12px;
  background: #2a2a2a;
  color: #fff !important;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 5px 18px #0004;
  transition: background .2s, border-color .2s;
}
footer a[href*="youtube.com/"]:hover { background: #383838; border-color: #ff3333; }
footer a[href*="youtube.com/"] .material-symbols-outlined {
  position: relative;
  display: inline-block;
  flex: none;
  width: 34px;
  height: 24px;
  border-radius: 7px;
  background: #ff0000;
  font-size: 0;
  line-height: 0;
  transform: none;
}
footer a[href*="youtube.com/"] .material-symbols-outlined::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 7px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #fff;
}
footer a[href*="youtube.com/"]::after { content: "↗"; margin-left: 6px; font-size: 18px; color: #ccc; }

/* 本人指定: 小さな日本語補足「ミッション」「ビジョン」「バリュー」を表示しない。 */
.mv-slide .mv-jp { display: none; }

/* ラジオ部分だけ、黒い動画ライブラリの世界観へ。 */
.mc-radio {
  position: relative;
  background: #101010;
  color: #fff;
  padding-top: clamp(48px, 5vw, 76px);
  padding-bottom: clamp(44px, 5vw, 68px);
  margin-top: 0;
  max-width: none;
  padding-inline: max(1rem, calc((100% - 1600px) / 2 + 1rem));
}
.mc-radio .mc-radio-heading { gap: 24px; margin-bottom: 12px; align-items: flex-end; }
.mc-radio .mc-radio-heading > div:first-child { gap: 16px; }
.mc-radio .mc-radio-heading > div:first-child > div { width: 5px; height: 34px; border-radius: 1px; background: #e50914; }
.mc-radio .mc-radio-title { color: #fff; font-size: clamp(24px, 2.6vw, 38px); font-weight: 800; letter-spacing: .06em; line-height: 1.2; }
.mc-radio .mc-radio-intro { color: #aaa; font-size: 14px; line-height: 1.8; margin: 0 0 30px 21px; letter-spacing: .05em; }
.mc-radio .mc-radio-actions { display: flex; align-items: center; gap: 18px; flex: none; }
.mc-radio .mc-radio-actions > a { color: #fff; font-size: 13px; padding: 10px 15px; border: 1px solid #4a4a4a; border-radius: 5px; background: #1c1c1c; white-space: nowrap; }
.mc-radio .mc-radio-actions > a:hover { background: #333; border-color: #888; }
.mc-radio .mc-radio-controls { display: flex; gap: 7px; }
.mc-radio .mc-radio-controls button { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #555; border-radius: 50%; background: #202020; color: #fff; font: 28px/1 Arial,sans-serif; cursor: pointer; transition: background .2s, border-color .2s; }
.mc-radio .mc-radio-controls button:hover:enabled { background: #e50914; border-color: #e50914; }
.mc-radio .mc-radio-controls button:disabled { color: #555; border-color: #303030; cursor: default; }
.mc-radio .mc-radio-track { padding-top: 12px; padding-bottom: 18px; gap: 18px; }
.mc-radio .mc-radio-card { width: 340px; background: #1b1b1b; border: 1px solid #333; border-radius: 7px; box-shadow: 0 6px 18px #0005; transition: transform .25s ease, border-color .25s, box-shadow .25s; }
.mc-radio .mc-radio-card:hover { background: #242424; border-color: #666; transform: translateY(-7px); box-shadow: 0 12px 28px #000a; }
.mc-radio .mc-radio-card > div:first-child { background: #202020; }
.mc-radio .mc-radio-card > div:last-child { min-height: 88px; padding: 15px 17px 18px; background: linear-gradient(#202020,#171717); }
.mc-radio .mc-radio-card h3 { color: #eee; font-size: 14px; font-weight: 600; line-height: 1.65; }
.mc-radio .mc-radio-card:hover h3 { color: #fff; }
.mc-radio .mc-radio-card .material-symbols-outlined { color: #fff; font-size: 48px; text-shadow: 0 2px 15px #000; }
.mc-radio .mc-radio-card > div:first-child > div { background: #0005; }
.mc-radio > div.relative > div.pointer-events-none { width: 22px; }
.mc-radio > div.relative > div.pointer-events-none.left-0 { background: linear-gradient(90deg,#101010,transparent); }
.mc-radio > div.relative > div.pointer-events-none.right-0 { background: linear-gradient(270deg,#101010,transparent); }
.mc-radio :is(a,button):focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (max-width: 767px) {
  .mc-radio .mc-radio-heading { align-items: flex-start; flex-direction: column; gap: 18px; }
  .mc-radio .mc-radio-title { font-size: 25px; }
  .mc-radio .mc-radio-actions { width: 100%; justify-content: space-between; }
  .mc-radio .mc-radio-intro { margin-left: 0; margin-top: 18px; margin-bottom: 17px; font-size: 12px; }
  .mc-radio .mc-radio-card { width: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-radio .mc-radio-card { transition: none; }
  .mc-radio .mc-radio-card:hover { transform: none; }
}

@media (min-width: 768px) { .mc-radio { padding-inline: max(2.5rem, calc((100% - 1600px) / 2 + 2.5rem)); } }
@media (min-width: 1024px) { .mc-radio { padding-inline: max(4rem, calc((100% - 1600px) / 2 + 4rem)); } }

/* 自動送りはスナップを外し、ゆっくり連続して移動する。 */
.mc-radio .mc-radio-track { scroll-snap-type: none; scroll-behavior: auto; }
.mc-radio .mc-radio-pause { font-size: 13px; font-weight: 700; }
.mc-radio .mc-radio-pause[hidden] { display: none; }

/* 本人指定: ラジオ見出しの赤い縦線をYouTubeの再生マークへ。 */
.mc-radio .mc-radio-heading > div:first-child > div {
  position: relative;
  flex: none;
  width: 46px;
  height: 32px;
  border-radius: 9px;
  background: #ff0000;
}
.mc-radio .mc-radio-heading > div:first-child > div::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 9px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #fff;
}
.mc-radio .mc-radio-intro { margin-left: 62px; }
@media (max-width: 767px) {
  .mc-radio .mc-radio-heading > div:first-child > div { width: 34px; height: 24px; border-radius: 7px; }
  .mc-radio .mc-radio-heading > div:first-child > div::after { left: 14px; top: 7px; border-top-width: 5px; border-bottom-width: 5px; border-left-width: 8px; }
  .mc-radio .mc-radio-intro { margin-left: 0; }
}

/* サービスのファーストビュー：黒い舞台と大きな白いメッセージ。 */
.sv-hero { background: #101010; color: #fff; padding: clamp(58px,7vw,92px) 0 52px; --line:#3a3a3a; --sub:#bbb; --ink:#fff; }
.sv-hero::before { opacity:.16; background-image:radial-gradient(circle,#777 1px,transparent 1.3px); }
.sv-hero .sv-wrap { max-width:1440px; }
.sv-hero .sv-hero-grid { grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:40px; }
.sv-hero .mc-service-kicker { margin:0 0 28px; color:#eee; font:700 12px/1.6 Inter,'Noto Sans JP',sans-serif; letter-spacing:.16em; border-left:4px solid #e50914; padding-left:14px; }
.sv-hero .sv-h1 { color:#fff; font-size:clamp(36px,4.4vw,70px); font-weight:800; line-height:1.35; letter-spacing:.015em; }
.sv-hero .sv-h1 .l { white-space:normal; }
.sv-hero .sv-window { width:100%; max-width:440px; margin:0 auto; border:1px solid #333; background:#101010; box-shadow:0 24px 70px #0008; }
.sv-hero .sv-index { margin-top:54px; gap:12px; border:0; }
.sv-hero .sv-index a { padding:19px 20px; border:1px solid #3d3d3d; background:#202020; border-radius:6px; color:#fff; transition:background .2s,border-color .2s,transform .2s; }
.sv-hero .sv-index a:hover { background:#2a2a2a; border-color:#888; transform:translateY(-4px); }
.sv-hero .sv-index a::before { display:none; }
.sv-hero .sv-index .sv-num { color:#b9dadd; font-size:11px; letter-spacing:.06em; }
.sv-hero .sv-index b { color:#fff; font-size:18px; }
.sv-hero .sv-index small { color:#ccc; font-size:12px; }
.sv-hero :is(a,button):focus-visible { outline:2px solid #fff; outline-offset:4px; }
/* 会社概要：既存の会社写真を背景に、黒いグラデーションで文字を読みやすくする。 */
.ab .ab-top { padding-top:0; }
.ab-top > .sv-wrap { max-width:none; padding:0; }
.mc-company-hero { position:relative; isolation:isolate; overflow:hidden; min-height:660px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:26px; padding:74px max(56px,calc((100% - 1328px)/2 + 56px)); background:#101010; color:#fff; }
.mc-company-hero > .sv-head { position:relative; z-index:2; color:#eee; --c1:#e50914; }
.mc-company-hero > .sv-head .sv-bar { width:4px; height:22px; background:#e50914; }
.mc-company-hero > .ab-h1 { position:relative; z-index:2; color:#fff; max-width:720px; width:60%; margin:0; font-size:clamp(32px,3.4vw,52px); font-weight:800; line-height:1.5; text-shadow:0 2px 20px #0006; }
.mc-company-hero .ab-h1 .l { white-space:normal; }
.mc-company-hero > .ab-photo { position:absolute; z-index:0; inset:0 0 0 auto; width:64%; height:100%; margin:0; border-radius:0; aspect-ratio:auto; opacity:1; transform:none; }
.mc-company-hero > .ab-photo img { width:100%; height:100%; object-fit:cover; object-position:52% 35%; transform:none; }
.mc-company-hero::after { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(90deg,#101010 0%,#101010 24%,#101010ee 37%,#101010a6 50%,#1010101a 76%),linear-gradient(0deg,#101010c9,transparent 30%); }
.mc-company-hero .mc-company-more { position:relative; z-index:2; display:inline-flex; padding:12px 22px; border:1px solid #777; border-radius:5px; background:#ffffff14; color:#fff; font-size:14px; text-decoration:none; }
.mc-company-hero .mc-company-more:hover { background:#fff; color:#111; }
.ab-top .ab-facts { max-width:1088px; margin:56px auto 0; width:calc(100% - 112px); scroll-margin-top:100px; }
/* 指定された理想組織の図だけ、黒いパネルと明るいラベルへ。 */
.ab-amap:not(.ab-bmap) { --line:#414141; --sub:#c3c7cd; --navy:#fff; background:#171717; border-color:#414141; }
.ab-amap:not(.ab-bmap) .am-cap { color:#fff; }
.ab-amap:not(.ab-bmap) .am-cap small,
.ab-amap:not(.ab-bmap) .am-lb .en { color:#8bd0d5; fill:#8bd0d5; }
.ab-amap:not(.ab-bmap) .am-lb { stroke:#171717; }
.ab-amap:not(.ab-bmap) :is(.am-up,.am-ask) { stroke:#e8edf4; }
.ab-amap:not(.ab-bmap) .am-up { opacity:.8; }
.ab-amap:not(.ab-bmap) .am-person circle { fill:#232323; stroke:#c5cfdd; }
.ab-amap:not(.ab-bmap) :is(.am-person .t,.am-base .t,.am-k.navy,.am-dot.navy) { fill:#f4f6f9; }
.ab-amap:not(.ab-bmap) .am-base rect { fill:#232323; stroke:#73b7bf; }
.ab-amap:not(.ab-bmap) .am-link { stroke:#7ac4cb99; }
.ab-amap:not(.ab-bmap) .am-tell { stroke:#8bd0d5; }
.ab-amap:not(.ab-bmap) .am-k.teal { fill:#8bd0d5; }
.ab-amap:not(.ab-bmap) marker[id$="-hn"] path { fill:#e8edf4; }
.ab-amap:not(.ab-bmap) marker[id$="-ht"] path { fill:#8bd0d5; }
@media (max-width:820px) {
  .sv-hero .sv-hero-grid { grid-template-columns:1fr; gap:32px; }
  .sv-hero .sv-window { max-width:320px; }
  .sv-hero .sv-h1 { font-size:clamp(35px,6.5vw,52px); }
  .sv-hero .sv-index { grid-template-columns:1fr 1fr; gap:10px; margin-top:34px; }
  .sv-hero .sv-index a:nth-child(n) { padding:16px 13px; border:1px solid #3d3d3d; margin-top:0; }
  .sv-hero .sv-index b { font-size:15px; }
  .sv-hero .sv-index small { font-size:11px; }
  .mc-company-hero { padding:320px 24px 48px; min-height:730px; gap:22px; justify-content:flex-end; }
  .mc-company-hero > .ab-photo { inset:0 0 auto; width:100%; height:470px; }
  .mc-company-hero > .ab-photo img { object-position:center 30%; }
  .mc-company-hero::after { background:linear-gradient(0deg,#101010 0%,#101010 32%,#101010bf 52%,transparent 92%); }
  .mc-company-hero > .ab-h1 { width:100%; max-width:580px; font-size:clamp(27px,5.4vw,38px); line-height:1.55; }
  .ab-top .ab-facts { width:calc(100% - 48px); margin-top:36px; }
}
@media (prefers-reduced-motion:reduce) { .sv-hero .sv-index a { transition:none; } .sv-hero .sv-index a:hover { transform:none; } }

/* 本人指定: 現状組織の図は外枠の線だけ黒へ。 */
.ab-bmap { border: 2px solid #1a1a1a; }
/* 会社概要・サービスのファーストビューの小見出しを削除。 */
.mc-company-hero > .sv-head,
.sv-hero .mc-service-kicker { display: none; }

/* 本人指定: サービスの丸いアニメーションはトップと同じ生成りと既存配色へ。 */
.sv-hero .sv-window { background: #f5f3ee; border-color: #e3e0d8; }

/* スマホでは各サービスを独立したカードにまとめる。PCの配置は維持。 */
@media (max-width:700px) {
  .sv-ch { padding:0; margin:28px 16px 0; scroll-margin-top:100px; border:1px solid #d6d2c8; border-top:4px solid var(--c1); border-radius:12px; background:#fff; overflow:hidden; }
  .sv-ch .sv-spread { padding:0; gap:0; }
  .sv-ch .sv-photo { aspect-ratio:auto; height:150px; width:100%; border-radius:0; background-color:#f5f3ee; border-bottom:1px solid #e7e3db; }
  .sv-ch .sv-photo svg { height:100%; width:100%; }
  .sv-ch .sv-spread > div:last-child { padding:24px 22px; }
  .sv-ch .sv-head { gap:9px; }
  .sv-ch .sv-bar { width:20px; }
  .sv-ch .sv-num { font-size:11px; line-height:1.7; letter-spacing:.04em; }
  .sv-ch .sv-title { margin-top:12px; font-size:27px; line-height:1.5; letter-spacing:.01em; }
  .sv-ch .sv-foot { margin-top:22px; padding-top:18px; border-top:1px solid #dedbd4; }
  .sv-ch .sv-price { width:100%; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; margin:0; font-size:12px; line-height:1.8; color:#686868; }
  .sv-ch .sv-price::before { content:'料金'; display:block; flex-basis:100%; font-size:11px; font-weight:700; letter-spacing:.12em; color:#686868; }
  .sv-ch .sv-price b { margin:0; font-size:25px; line-height:1.5; color:#1a1a1a; }
  .sv-ch:last-of-type { margin-bottom:40px; }
  .sv-hero .sv-index small { display:block; margin-top:12px; padding-top:10px; border-top:1px solid #484848; line-height:1.8; }
}

/* 最後のサービスとフッターの間に独立した余白を確保。 */
#ai-kenkyukai { margin-bottom:clamp(80px,8vw,128px); }
@media (max-width:700px) { #ai-kenkyukai { margin-bottom:64px; } }