/* ══════════════════════════════════════════════════════════════
   白ベースの見た目（2026-10-07 リデザイン）
   style.css / style-sp.css / pages.css の後に読み、見た目だけを上書きする。
   構造（HTML・余白の骨格・JS）は触らない。旧デザインは _archive/deploy-2026-10-07-before/。

   方針（参考: japan-ai.co.jp）
   ・地は白一色。方眼・クリーム・グラデーションをやめる
   ・色は黒とグレーだけ。黄色はロゴの中にだけ残す
   ・角は小さく（ボタン6px／カード8px）。ピル型・円形のボタンをやめる
   ・書体は Inter（英字）＋ Noto Sans JP（和文）の2つに絞る
   ・影はほぼ使わず、1pxの罫で区切る
   ══════════════════════════════════════════════════════════════ */

:root {
  --color-base: #111111;
  --color-bg: #ffffff;
  --color-bg-lower: #f6f6f6;
  --color-primary: #111111;
  --color-primary-light: #333333;
  --color-secondary: #e6e6e6;
  --color-gray: #666666;
  --color-gray-20: rgba(17,17,17,.12);
  --color-gray-50: rgba(17,17,17,.42);
  --color-gray-light: #f2f2f2;
  --line: #e8e8e8;
  --radius-btn: 6px;
  --radius-card: 8px;
  --font-en: "Inter", "Noto Sans JP", sans-serif;
  --font-ja: "Noto Sans JP", "Inter", sans-serif;
  /* 方眼は変数ごと無効化（背景に敷いている箇所が複数あるため） */
  --grid-line: transparent;
  --grid-line-major: transparent;
  --grid-line-rev: transparent;
  --grid-line-rev-major: transparent;
}

body {
  font-family: "Inter", "Noto Sans JP", -apple-system, sans-serif;
  background: #fff;
  background-image: none;
  color: var(--color-base);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .c-title__secondary, .hero__title, .svc-orbit__ttl {
  font-feature-settings: "palt";
}

/* ─── Header ─── */
.l-header {
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--line);
}
.l-header__gnav__ul { gap: 34px; }
.l-header__gnav__link {
  color: var(--color-base);
  font-weight: 500;
  font-size: .9375rem;
  letter-spacing: .01em;
}
.l-header__gnav__link:hover { color: var(--color-gray); }
.l-header__contact__link {
  display: inline-block;
  padding: 11px 24px;
  border-radius: var(--radius-btn);
  background: var(--color-base);
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.l-header__contact__link:hover { background: #333; }
.hamburger {
  width: 42px; height: 42px;
  border-radius: var(--radius-btn);
  background: #fff;
  border: 1px solid var(--line);
}
.hamburger__bar { background: var(--color-base); }
.hamburger:hover { opacity: 1; border-color: var(--color-base); }

/* メガメニュー */
.l-mega { background: #fff; border-top: 1px solid var(--line); box-shadow: 0 24px 40px rgba(0,0,0,.06); }
.l-mega__link { border-radius: var(--radius-card); border-color: var(--line); }
.l-mega__link::before { width: 2px; border-radius: 0; top: 16px; bottom: 16px; }
.l-mega__link:hover { transform: none; box-shadow: none; border-color: var(--color-base); }
.l-mega__badge { border-radius: 4px; }

/* ドロワー */
.l-drawer__panel { background: #111; color: #fff; }
.l-drawer__close { border-radius: var(--radius-btn); }
.l-drawer__nav__link { color: #fff; }
.l-drawer__nav__link:hover { color: rgba(255,255,255,.6); }
.l-drawer__nav__str-en { font-family: var(--font-en); font-weight: 500; letter-spacing: -.02em; }
.l-drawer__sub__link::before { width: 2px; border-radius: 0; }
.l-drawer__sub__badge { border-radius: 4px; }
.l-drawer__contact-btn {
  border-radius: var(--radius-btn);
  background: #fff; color: #111; font-weight: 600;
}
.l-drawer__contact-btn:hover { background: #e8e8e8; }

/* ─── Hero ─── */
.hero,
.hero { background: #fff; background-image: none; }
.hero__eyebrow {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  gap: 12px;
  font-family: var(--font-ja);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--color-gray);
}
.hero__eyebrow__dot { width: 20px; height: 1px; border-radius: 0; background: var(--color-base); }
.hero__title {
  font-family: var(--font-ja);
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.3;
}
.hero__title__mark::after { display: none; }
.hero__title__sub {
  font-weight: 500;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  color: var(--color-gray);
  letter-spacing: .02em;
}
.hero__lead { color: #333; }
.hero__cta__note { color: var(--color-gray); font-weight: 500; }
.hero__btn {
  border-radius: var(--radius-btn);
  font-family: var(--font-ja);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.hero__btn:hover { transform: none; }
.hero__btn--primary { background: var(--color-base); box-shadow: none; }
.hero__btn--primary:hover { background: #333; box-shadow: none; }
.hero__btn--ghost { background: #fff; border: 1px solid #cfcfcf; }
.hero__btn--ghost:hover { background: #fff; border-color: var(--color-base); }

/* モック：茶色系のグラデーションを中立の黒に */
.hero__mock__screen {
  border-radius: 14px 14px 4px 4px;
  background: #1a1a1a;
  box-shadow: 0 30px 60px rgba(0,0,0,.12);
}
.hero__mock__base { background: linear-gradient(180deg, #d9d9d9 0%, #bdbdbd 100%); box-shadow: 0 14px 24px rgba(0,0,0,.08); }
.hero__mock__base::after { background: rgba(0,0,0,.12); }
.hero__marquee__str { color: #9a9a9a; font-weight: 400; font-size: .875rem; letter-spacing: .08em; }
.hero__marquee__str span::after { content: '/'; color: #d0d0d0; }

/* 信頼バー：黒帯＋黄色の丸 → 白地に縦罫で4分割 */
.hero-trust {
  background: #fff;
  background-image: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.hero-trust__list { gap: 0; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
.hero-trust__item {
  justify-content: center;
  padding: 26px 16px;
  color: var(--color-base);
  border-left: 1px solid var(--line);
}
.hero-trust__item:last-child { border-right: 1px solid var(--line); }
.hero-trust__item__ic { display: none; }
.hero-trust__item__txt { font-family: var(--font-ja); font-weight: 500; font-size: .875rem; letter-spacing: .04em; }

/* ─── セクション見出し ─── */
.c-title__primary { gap: 14px; }
.c-title__primary .\:ja {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-ja);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--color-gray);
}
.c-title__primary .\:ja::before { content: ""; width: 20px; height: 1px; background: var(--color-base); }
.c-title__primary .\:en {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 3.5rem;
  letter-spacing: -.035em;
}
.c-title__secondary {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: .01em;
  line-height: 1.5;
}

/* 「View more」の丸アイコン → 小さな角丸の矩形 */
.c-button__arrow { font-family: var(--font-en); font-size: .9375rem; font-weight: 500; }
.c-button__arrow__icon { width: 38px; height: 38px; border-radius: var(--radius-btn); border-color: #cfcfcf; }
.c-button__arrow__icon::after { width: 7px; height: 7px; }

/* ─── サービス（円配置図） ─── */
.svc-orbit { background: #f7f7f7; border-bottom: 1px solid var(--line); }
.svc-orbit__ttl { font-family: var(--font-ja); }
.svc-orbit__core {
  background: #111;
  box-shadow: 0 0 0 12px rgba(17,17,17,.04);
}
.svc-orbit__node {
  border: 1px solid #d6d6d6;
  box-shadow: none;
}
.svc-orbit__node::after {
  content: ""; position: absolute; top: 18%; left: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  transform: translateX(-50%);
  background: var(--svc-color);
}
.svc-orbit__node.is-active,
.svc-orbit__node:hover,
.svc-orbit__node:focus-visible {
  transform: translate(-50%, -50%) scale(1.06);
  background: #fff;
  border-color: var(--color-base);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.svc-orbit__node__name { font-family: var(--font-ja); font-weight: 700; letter-spacing: .08em; }
.svc-orbit__beam { stroke: #111; }
.svc-orbit__card {
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  border-top: 2px solid var(--svc-color, #111);
  box-shadow: none;
}
.svc-orbit__card__more,
.svc-orbit__more { border-radius: var(--radius-btn); }
.svc-orbit__card__more:hover { transform: none; background: #333; }
.svc-orbit__more { border-width: 1px; background: #fff; }
.svc-orbit__more:hover { transform: none; background: var(--color-base); color: #fff; }

/* ─── About / Recruit / Column ─── */
/* Our value 左右のイラストは人物写真なしの中央揃えレイアウト（no-people-photos.css）でだけ出す */
.top-about__illust { display: none; }
.top-about { padding-top: 140px; padding-bottom: 160px; }
.top-about__heading__img,
.top-about__content__img figure { border-radius: 6px; }
.top-about__content__body { color: #333; }

.top-recruit { padding-top: 140px; padding-bottom: 140px; background: #f7f7f7; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.top-recruit__lead { color: #333; }
.top-recruit__link { border-radius: var(--radius-card); border-color: var(--line); background: #fff; }
.top-recruit__link:hover { transform: none; border-color: var(--color-base); }
.top-recruit__type { border-radius: 4px; background: var(--color-gray-light); }
.top-recruit__job { font-family: var(--font-ja); }
.top-recruit__job-en {
  font-family: var(--font-en);
  font-style: normal;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-gray);
}

.top-news { padding-top: 140px; padding-bottom: 140px; }
.c-card__column__image { border-radius: 6px; border: 1px solid var(--line); }
.c-card__column__title { font-family: var(--font-ja); font-weight: 500; }
.c-badge__default { border-radius: 4px; border-color: var(--line); }
.c-button__default { border-radius: var(--radius-btn); }

/* ─── お問い合わせ（全ページ共通の締め） ─── */
.l-aside__contact { background: #111; background-image: none; padding: 30px; }
.l-aside__contact__l,
.l-aside__contact__r .inner-line,
.l-aside__contact__img-placeholder { border-radius: var(--radius-card); }
.l-aside__contact__heading .c-title__primary .\:en { color: #fff; }
.l-aside__contact__heading .c-title__primary .\:ja::before { background: #fff; }
.l-aside__contact .l-header__contact__link { background: #fff; color: #111; padding: 16px 36px; font-size: .9375rem; }
.l-aside__contact .l-header__contact__link:hover { background: #e8e8e8; }

/* ─── Footer：黄色の面 → 白、ピル型リンク → 文字リンク ─── */
.l-footer { background: #fff; border-top: 1px solid var(--line); }
.l-footer__top { padding: 56px 0 32px; }
.l-footer__nav__wrapper { gap: 8px 32px; }
.l-footer__nav__link {
  padding: 0;
  border: 0;
  border-radius: 0;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: .875rem;
}
.l-footer__nav__link:hover { background: none; color: var(--color-gray); }
.l-footer__details { margin-top: 36px; }
.l-footer__title { font-family: var(--font-ja); font-weight: 700; font-size: .875rem; }
.l-footer__address { opacity: 1; color: var(--color-gray); }
.l-footer__btm { border-top: 1px solid var(--line); padding: 20px 0; }
.l-footer__copy { color: #999; }
.l-footer__social__link { border-radius: var(--radius-btn); border-color: var(--line); }

/* ─── 下層ページのヒーロー：黒地＋黄色の円・ドット → 白地 ─── */
.page-hero {
  background: #fff;
  color: var(--color-base);
  border-bottom: 1px solid var(--line);
}
.page-hero__deco { display: none; }
.page-hero__label { color: var(--color-gray); font-family: var(--font-en); font-weight: 500; }
.page-hero__label::before { background: var(--color-base); width: 20px; }
.page-hero__title {
  font-family: var(--font-en);
  font-weight: 600;
  letter-spacing: -.03em;
}
.page-hero__title strong { font-weight: 600; }
.page-hero--article .page-hero__title { font-family: var(--font-ja); font-weight: 700; letter-spacing: 0; }

/* ─── 下層ページの部品（pages.css） ─── */
.top-service__points__item,
.top-service__biz__item,
.top-service__biz--compact .top-service__biz__link { border-radius: var(--radius-card); border-color: var(--line); }
.top-service__points__item { background: #fff; }
.top-service__points__item:hover { background: #fff; border-color: var(--color-base); }
.top-service__biz--compact .top-service__biz__link:hover { transform: none; border-color: var(--color-base); }
.top-service__points__num,
.top-service__biz--compact .top-service__biz__no {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: -.02em;
  color: var(--color-base);
}
.top-service__lead { font-family: var(--font-ja); font-weight: 700; }

.svc-card { border-radius: var(--radius-card); border-color: var(--line); }
.svc-card::before { width: 2px; border-radius: 0; }
.svc-card--main { background: #fff; border-color: var(--color-base); }
.svc-card__badge { border-radius: 4px; }
.svc-card__more { border-radius: var(--radius-btn); }
.svc-card__more:hover { transform: none; background: #333; }
.svc-card__more--ghost { border-width: 1px; border-color: #cfcfcf; }
.svc-card__more--ghost:hover { background: #fff; color: var(--color-base); border-color: var(--color-base); }

.column-cats__item { border-radius: var(--radius-btn); border-color: var(--line); }
.column-cats__item:hover { border-color: var(--color-base); }
.column-cats__item.is-current { color: #fff; }
.column-pagination .page-numbers { border-radius: var(--radius-btn); border-color: var(--line); }
.column-pagination .page-numbers:hover { border-color: var(--color-base); }
.column-pagination .page-numbers.current { color: #fff; }

.article-body h2 { border-left-width: 2px; }
.article-body img { border-radius: 6px; }
.article-related__tag { color: #fff; }
.article-service { border-radius: var(--radius-card); }
.privacy__box { border-radius: var(--radius-card); background: #fff; }
/* 送信ボタンはインラインstyleで「背景=primary／文字=base」。新配色では両方黒になるので文字色を白に固定する */
.privacy__submit { border-radius: var(--radius-btn) !important; color: #fff !important; font-weight: 700 !important; }
.page-body__placeholder { border-radius: var(--radius-card); }

.job__type { border-radius: 4px; color: #fff; }
.job__name { font-family: var(--font-ja); }
.job__sec__tit::before { width: 2px; border-radius: 0; }
.job__list li::before { width: 5px; height: 5px; border-radius: 0; }
.job__figure img { border-radius: var(--radius-card); }
.job__note { border-radius: var(--radius-card); }
.job__entry { border-radius: var(--radius-card); }
.job__entry__btn { border-radius: var(--radius-btn); }
.job__entry__btn:hover { transform: none; }

/* ══════════════════════════════════════════════════════════════
   SP（style-sp.css と同じ 767px 以下）
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .hamburger { width: 40px; height: 40px; }
  .hero__mock__screen { background: none; box-shadow: none; border-radius: 8px 0 0 0; }
  .hero__btn--ghost { border-color: #cfcfcf; }

  /* 右列の文言が長い。列比は style-sp.css と同じ考え方（文言を変えたら全幅で折り返しを測り直す） */
  .hero-trust__list { grid-template-columns: 1fr 1.3fr; }
  .hero-trust__item { justify-content: flex-start; padding: 15px 10px; border-left: 0; border-right: 0; }
  .hero-trust__item:nth-child(odd) { border-right: 1px solid var(--line); }
  .hero-trust__item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .hero-trust__item:last-child { border-right: 0; }
  .hero-trust__item__txt { font-size: .6875rem; letter-spacing: 0; white-space: nowrap; }
  .svc-orbit__lead { letter-spacing: 0; }

  .c-title__primary .\:en { font-size: 2.25rem; }
  .c-title__secondary { font-size: 1.3125rem; }

  .top-about { padding-top: 72px; padding-bottom: 72px; }
  .top-recruit { padding-top: 64px; padding-bottom: 64px; }
  .top-news { padding-top: 64px; padding-bottom: 64px; }
  .l-aside__contact { padding: 20px; }

  .l-footer__top { padding: 40px 0 24px; }
  .l-footer__nav__wrapper { gap: 14px 24px; }

  .page-hero__title { letter-spacing: -.02em; }
}

/* ══════════════════════════════════════════════════════════════
   トップのサービス：横スライドのカード（2026-10-07）
   template-parts/service-slider.php ＋ assets/service-slider.js。
   カード幅は --card-w 1つで決まる。トラックの左右 padding で
   先頭と末尾のカードも中央に止まるようにしている。
   上段の大カード・線画・製品画面はユーザー指示で削除済み（退避は layout-v2-before）。
   ══════════════════════════════════════════════════════════════ */
.svc-slider {
  --card-w: min(720px, calc(100vw - 240px));
  padding: 120px 0 110px;
  background: #f7f7f7;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.svc-slider__viewport { margin-top: 48px; }
.svc-slider__track {
  position: relative;
  display: flex; gap: 20px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px calc((100% - var(--card-w)) / 2) 8px;
  scrollbar-width: none;
  outline: none;
}
.svc-slider__track::-webkit-scrollbar { display: none; }

/* 枠線なし・淡い業種色の面（参考サイトと同じ） */
.svc-slide {
  position: relative;
  flex: 0 0 var(--card-w);
  scroll-snap-align: center;
  display: flex;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--svc-color) 20%, #fff);
  opacity: .45;
  cursor: pointer;
  transition: opacity .5s var(--easeOutQuart);
}
.svc-slide.is-active { opacity: 1; cursor: auto; }

.svc-slide__body {
  flex: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 44px 52px;
}
.svc-slide__top { display: flex; align-items: center; gap: 12px; min-height: 22px; }
.svc-slide__badge {
  padding: 3px 9px; border-radius: 4px;
  background: var(--color-base); color: #fff;
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
}
.svc-slide__logo { width: min(300px, 80%); height: auto; margin: 22px 0 26px; }
.svc-slide__lead {
  font-family: var(--font-ja); font-weight: 700;
  font-size: 1.375rem; line-height: 1.5; margin-bottom: 12px;
  text-wrap: balance; /* 1〜2文字だけ次の行に落ちるのを防ぐ */
}
.svc-slide__desc { font-size: .9375rem; line-height: 1.9; color: #444; margin-bottom: 28px; }
.svc-slide__more {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px;
  border-radius: var(--radius-btn);
  background: var(--color-base); color: #fff;
  font-size: .875rem; font-weight: 700; letter-spacing: .04em;
  transition: background-color .3s;
}
.svc-slide__more::after {
  content: ""; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
}
.svc-slide__more:hover { background: #333; }

/* 操作：矢印・インジケーター・枚数 */
.svc-slider__ctrl {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  margin-top: 32px;
}
.svc-slider__arrow {
  position: relative;
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--radius-btn);
  border: 1px solid #cfcfcf; background: #fff;
  cursor: pointer;
  transition: border-color .3s, opacity .3s;
}
.svc-slider__arrow::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px;
  border-top: 1.5px solid var(--color-base); border-right: 1.5px solid var(--color-base);
}
.svc-slider__arrow--prev::before { transform: translate(-35%, -50%) rotate(-135deg); }
.svc-slider__arrow--next::before { transform: translate(-65%, -50%) rotate(45deg); }
.svc-slider__arrow:hover:not(:disabled) { border-color: var(--color-base); }
.svc-slider__arrow:disabled { opacity: .3; cursor: default; }
.svc-slider__dots { display: flex; gap: 6px; list-style: none; }
.svc-slider__dot {
  display: block; width: 24px; height: 22px; padding: 10px 0;
  border: 0; background: #d0d0d0; background-clip: content-box;
  cursor: pointer;
  transition: width .4s var(--easeOutQuart), background-color .3s;
}
.svc-slider__dot.is-active { width: 44px; background-color: var(--color-base); }
.svc-slider__count {
  min-width: 64px; text-align: center;
  font-family: var(--font-en); font-size: .8125rem; font-weight: 500; color: var(--color-gray);
  font-variant-numeric: tabular-nums;
}
.svc-slider__note { margin-top: 48px; text-align: center; }

@media (max-width: 1100px) {
  .svc-slider { --card-w: min(640px, calc(100vw - 160px)); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-slide, .svc-slider__dot { transition: none; }
}
@media (max-width: 767px) {
  /* 両隣のカードが見えるよう、左右に約26pxずつ覗かせる */
  .svc-slider { --card-w: calc(100vw - 72px); padding: 64px 0 60px; }
  .svc-slider__viewport { margin-top: 28px; }
  .svc-slider__track { gap: 10px; }
  .svc-slide { opacity: .6; }
  .svc-slide__body { padding: 26px 22px 30px; }
  .svc-slide__logo { width: min(240px, 80%); margin: 16px 0 18px; }
  .svc-slide__lead { font-size: 1.125rem; }
  .svc-slide__desc { font-size: .875rem; line-height: 1.8; margin-bottom: 22px; }
  .svc-slider__ctrl { gap: 12px; margin-top: 22px; }
  .svc-slider__arrow { width: 40px; height: 40px; }
  .svc-slider__dot { width: 14px; }
  .svc-slider__dot.is-active { width: 28px; }
  .svc-slider__count { display: none; }
  .svc-slider__note { margin-top: 32px; }
}