/* ==========================================================================
   nodeplace — Design Tokens
   my-snow-monkey/style.css の冒頭に配置する。
   色・書体・余白の変更は、すべてこのブロック内の値だけを書き換えること。
   以降のCSSでは生の値を書かず、必ず var(--np-*) を参照する。
   ========================================================================== */

/* 書体：Zen Kaku Gothic New 500/700/900、Poppins 500 のみ。
   本文は OS 標準の和文ゴシック（--np-font-base）にしたため、Webフォントは見出し・ナビ・ボタン・英字ラベルだけで使う。
   2026-09-16 に Zen Kaku の 400 と Poppins の 600 を削除（どちらも文字を表示していなかった）。
   900 はファーストビューの見出し専用（--np-weight-black） */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=Zen+Kaku+Gothic+New:wght@500;700;900&display=swap");

:root {
  /* --- 色 -------------------------------------------------------------- */
  /* 地色 */
  --np-base:        #FBF9F5;  /* 標準の背景 */
  --np-base-alt:    #F2EDE4;  /* セクションを一段沈ませるときの背景 */
  --np-surface:     #FFFFFF;  /* カード・囲みの面 */

  /* 文字 */
  --np-ink:         #1A1A1A;  /* 見出し・本文の主色 */
  --np-ink-sub:     #3D3831;  /* 本文 */
  --np-ink-mute:    #6B6459;  /* 補足・キャプション */

  /* 罫線 */
  --np-line:        #E8E0D4;  /* セクション区切り・表の罫線。地との差は 1.31:1 で、境界を示す用途には使わない */
  --np-line-strong: #CFC5B8;  /* ボタン枠線 */
  --np-line-input:  #908778;  /* 入力欄の境界。3:1 が要るもの専用（白地 3.55:1 / --np-base 3.37:1 / --np-base-alt 3.04:1） */

  /* アクセント */
  --np-accent:      #B85C3C;  /* テラコッタ。ラベル・強調・図版 */
  --np-accent-deep: #8F4429;  /* テラコッタのホバー／濃色 */
  --np-cta:         #B85C3C;  /* 塗りボタン（白文字で 4.53:1）。--np-accent と同値だが、後で分けられるよう統合しない */
  --np-apricot:     #E58A3F;  /* アプリコット。現在未使用。配色見直しに備えて残している */
  --np-navy:        #0A2C5A;  /* 補助色。図表・グラフでのみ使用 */

  /* 反転（ダーク面を使う場合） */
  --np-ink-inv:     #F5F1EA;
  --np-base-inv:    #1C1917;

  /* --- 書体 ------------------------------------------------------------ */
  /* 見出し用。Webフォント（Zen Kaku Gothic New）。見出し・ナビ・ボタンなど「読ませる」より「見せる」文字に使う */
  --np-font-heading: "Zen Kaku Gothic New", system-ui, sans-serif;
  /* 本文用。OS 標準の和文ゴシック（Webフォントを読み込まない）。長い本文を柔らかく読ませる */
  --np-font-base: "Yu Gothic Medium", "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  /* 英字・数字。Poppins。和文が混ざる場合は本文用にフォールバックする */
  --np-font-en: "Poppins", var(--np-font-base);

  /* ウェイト */
  --np-weight-normal: 400;
  --np-weight-medium: 500;
  --np-weight-bold:   700;
  --np-weight-black:  900;  /* ファーストビューの見出しだけに使う */

  /* サイズ（clampで可変。最小=モバイル / 最大=デスクトップ） */
  --np-text-xs:   0.75rem;                          /* 12px ラベル。本文比 0.75 */
  --np-text-sm:   0.8125rem;                        /* 13px 補足。本文比 0.81 */
  --np-text-base: 1rem;                             /* 16px 本文。長い本文が読みやすい大きさに揃える（入力欄の 16px とも一致し、iOS でフォーカス時に拡大されない） */
  --np-text-lg:   clamp(1rem, 0.95rem + 0.3vw, 1.125rem);       /* 16-18px リード */
  --np-text-xl:   clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);       /* 20-24px 小見出し */
  --np-text-2xl:  clamp(1.5rem, 1.2rem + 1.4vw, 2rem);          /* 24-32px 見出し */
  --np-text-3xl:  clamp(1.75rem, 1.3rem + 2.2vw, 2.5rem);       /* 28-40px 大見出し */
  --np-text-hero: clamp(2.75rem, 1.35rem + 6.6vw, 7.25rem);     /* 44-116px ファーストビューの見出し専用 */

  /* 行間 */
  --np-leading-tight:  1.45;  /* 見出し */
  --np-leading-hero:   1.12;  /* ファーストビューの見出し専用。大きい文字なので詰める */
  --np-leading-normal: 1.8;   /* 短い本文 */
  --np-leading-loose:  2.1;   /* 長い本文。日本語はここを基本にする */

  /* 字間 */
  --np-tracking-label: 0.16em;  /* 英字ラベル */
  --np-tracking-logo:  0.06em;
  --np-tracking-body:  0.02em;

  /* --- 余白 ------------------------------------------------------------ */
  /* 意図的に飛ばした値にしている。中間値を勝手に足さないこと。 */
  --np-space-1:  0.5rem;   /*   8px */
  --np-space-2:  1rem;     /*  16px */
  --np-space-3:  1.5rem;   /*  24px */
  --np-space-4:  2.5rem;   /*  40px */
  --np-space-5:  4rem;     /*  64px */
  --np-space-6:  6rem;     /*  96px */
  --np-space-7:  8rem;     /* 128px */

  /* セクション間の垂直余白 */
  --np-section-y: clamp(var(--np-space-5), 8vw, var(--np-space-7));

  /* --- 角丸 ------------------------------------------------------------ */
  --np-radius-sm:   0.625rem;  /* 10px 小さい囲み */
  --np-radius-md:   0.875rem;  /* 14px カード */
  --np-radius-full: 62.4375rem;/* ボタン */

  /* --- 画像 ------------------------------------------------------------ */
  --np-figure-ratio: 4 / 3;    /* 事業セクションの画像比率（全幅共通） */

  /* --- 線幅 ------------------------------------------------------------ */
  --np-border: 1px;

  /* --- 幅 -------------------------------------------------------------- */
  --np-width-text:  38rem;   /* 本文カラム。日本語で約34字 */
  --np-width-wide:  72rem;   /* セクションの最大幅 */
  --np-gutter:      clamp(1.25rem, 5vw, 2.5rem);

  /* --- モーション ------------------------------------------------------ */
  --np-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --np-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);  /* 立ち上がりがやわらかいカーブ。ファーストビューの立ち上げ専用 */
  --np-duration: 240ms;
}

/* 動きを減らす設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  :root { --np-duration: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   ページ共通
   カスタムHTMLブロックのルート要素。alignfull でコンテナ幅から外に出す。
   ========================================================================== */

.np-page {
  background-color: var(--np-base);
  color: var(--np-ink);
  font-family: var(--np-font-base);
  font-size: var(--np-text-base);
  line-height: var(--np-leading-normal);
  letter-spacing: var(--np-tracking-body);
}

.np-page :focus-visible {
  outline: calc(var(--np-border) * 2) solid var(--np-accent);
  outline-offset: calc(var(--np-border) * 2);
}

/* アンカー遷移時にヘッダーが被らないようにする。
   被る高さは、モバイルの追従ヘッダー 60px・デスクトップのドロップナビ 65px（実測）。
   その両方を上回る値にし、セクション上の余白がヘッダーの下に丸ごと見えるようにする */
.np-page section[id] {
  scroll-margin-top: calc(var(--np-space-5) + var(--np-space-1));
}


/* ==========================================================================
   ファーストビュー
   ========================================================================== */

.np-hero {
  padding-block: var(--np-section-y);
  padding-inline: var(--np-gutter);
}

.np-hero__inner {
  max-width: var(--np-width-wide);
  margin-inline: auto;
}

/* 見出し。2行を span で分け、2行目を階段状にずらす */
.np-hero__title {
  margin: 0;
  color: var(--np-ink);
  font-family: var(--np-font-heading);
  font-size: var(--np-text-hero);
  font-weight: var(--np-weight-black);
  line-height: var(--np-leading-hero);
  letter-spacing: calc(var(--np-tracking-body) * -1);
  font-feature-settings: "palt";
}

.np-hero__line {
  display: block;
}

.np-hero__em {
  color: var(--np-accent);
  font-style: normal;
}

.np-hero__lead {
  margin: var(--np-space-4) 0 0;
  color: var(--np-ink-sub);
  font-size: var(--np-text-lg);
  line-height: var(--np-leading-normal);
  word-break: auto-phrase;
}

/* 以前は右側に署名（Work in Life）を置いて両端に振り分けていたが、05 のラベルと重複するため削除した */
.np-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--np-space-2);
  margin-top: var(--np-space-5);
}

/* 768px 以上は2行目を階段状にずらす（ずらし幅は文字サイズ基準） */
@media (min-width: 768px) {
  .np-hero__line--step {
    padding-left: 2em;
  }
}

@media (min-width: 1024px) {
  .np-hero__line--step {
    padding-left: 2.5em;
  }
}

/* 768px 未満：デスクトップ用の改行を外し、階段のずらしもやめる */
@media (max-width: 767.98px) {
  .np-hero br {
    display: none;
  }
}

/* ファーストビューの立ち上げ。読み込み直後に1回だけ再生する（JS は使わない）。
   1行目 → 2行目 → サブコピー → ボタン の順に 300ms（--np-duration の1.25倍）ずつ遅らせ、
   1要素あたり 1440ms（同6倍）。最後のボタンが出そろうまで約2.2秒。
   イージングは立ち上がりがやわらかい --np-ease-soft。動きを減らす設定では付けない */
@media (prefers-reduced-motion: no-preference) {
  .np-hero__line,
  .np-hero__lead,
  .np-hero__actions {
    animation: np-hero-rise calc(var(--np-duration) * 6) var(--np-ease-soft) both;
  }

  .np-hero__line--step {
    animation-delay: calc(var(--np-duration) * 1.25);
  }

  .np-hero__lead {
    animation-delay: calc(var(--np-duration) * 2.5);
  }

  .np-hero__actions {
    animation-delay: calc(var(--np-duration) * 3.75);
  }
}

/* 移動距離は他セクション（--np-space-3＝24px）より大きい 48px */
@keyframes np-hero-rise {
  from {
    opacity: 0;
    translate: 0 calc(var(--np-space-4) + var(--np-space-1));
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}


/* ==========================================================================
   ボタン
   ホバーは塗りボタンを --np-accent-deep に濃くするのみ（白文字で 6.94:1）。
   ========================================================================== */

.np-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--np-space-2);
  padding-inline: var(--np-space-4);
  border: var(--np-border) solid transparent;
  border-radius: var(--np-radius-full);
  font-family: var(--np-font-heading);
  font-size: var(--np-text-base);
  font-weight: var(--np-weight-medium);
  line-height: var(--np-leading-tight);
  text-decoration: none;
}

.np-button--primary {
  border-color: var(--np-cta);
  background-color: var(--np-cta);
  color: var(--np-surface);
  transition:
    background-color var(--np-duration) var(--np-ease),
    border-color var(--np-duration) var(--np-ease);
}

.np-button--primary:hover {
  border-color: var(--np-accent-deep);
  background-color: var(--np-accent-deep);
}

.np-button--secondary {
  border-color: var(--np-line-strong);
  background-color: transparent;
  color: var(--np-ink);
}

/* 768px 未満はボタンを横並びのまま2等分する */
@media (max-width: 767.98px) {
  .np-hero__actions {
    flex-wrap: nowrap;
  }

  /* 本文が 16px になり、375px では「キャリアガーデン」（8文字）が --np-space-2 の余白では収まらないため詰める */
  .np-hero__actions .np-button {
    flex: 1 1 0;
    padding-inline: var(--np-space-1);
  }
}


/* ==========================================================================
   事業セクション（02 キャリアガーデン / 03 キャリア相談 / 04 コンテンツ制作）
   ========================================================================== */

/* ==========================================================================
   事業紹介の導入（01 と 02 のあいだ）
   ========================================================================== */

/* 上は --np-section-y の半分（ファーストビューの下余白と合わせて --np-section-y の1.5倍）、
   下は --np-space-2 だけ（あとは 02 の上余白）。01 から離し、02 に近づけて「この下に3つ並ぶ」関係を見せる。
   下を 0 にすると、375px では 02 の上余白（32px）しかなく「BUSINESS 01」と詰まって見えた */
.np-intro {
  padding-block: calc(var(--np-section-y) / 2) var(--np-space-2);
  padding-inline: var(--np-gutter);
  text-align: center;
}

.np-intro__inner {
  max-width: var(--np-width-wide);
  margin-inline: auto;
}

/* 事業名と同じ --np-text-2xl。3つを束ねる位置にあるため、各セクションより弱く見せない。
   並列に見えないことは、ラベルの BUSINESS / BUSINESS 01 の違いで足りる（2026-09-17 に --np-text-xl から拡大）。
   字間は自分の文字サイズ基準で指定する。.np-page から継承すると 16px 基準の 0.32px で固定され、
   大きい文字ほど詰まって見えるため */
.np-intro__title {
  margin: var(--np-space-1) 0 0;
  color: var(--np-ink);
  font-family: var(--np-font-heading);
  font-size: var(--np-text-2xl);
  font-weight: var(--np-weight-bold);
  line-height: var(--np-leading-tight);
  letter-spacing: var(--np-tracking-body);
  font-feature-settings: "palt";
}


/* 同じ地色のセクションが続くため、上下に半分ずつ持たせ、セクション間をちょうど --np-section-y にする */
.np-business {
  padding-block: calc(var(--np-section-y) / 2);
  padding-inline: var(--np-gutter);
}

/* 1024px 未満は「ラベル・事業名 → 画像 → 本文」の縦積み（HTML の並びと同じ） */
.np-business__inner {
  display: grid;
  grid-template-areas:
    "head"
    "media"
    "body";
  row-gap: var(--np-space-3);
  max-width: var(--np-width-wide);
  margin-inline: auto;
}

.np-business__head {
  grid-area: head;
  max-width: var(--np-width-text);
}

.np-business__body {
  grid-area: body;
  container: np-business-body / inline-size;
  max-width: var(--np-width-text);
}

/* 画像。比率は --np-figure-ratio（全幅共通）。画像が未支給でもプレースホルダの面が同じ比率になる */
.np-business__media {
  grid-area: media;
  width: 100%;
  max-width: var(--np-width-text);
  aspect-ratio: var(--np-figure-ratio);
  overflow: hidden;
  border-radius: var(--np-radius-md);
  background-color: var(--np-base-alt);
}

.np-business__media > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--np-figure-ratio);
  object-fit: cover;
}

/* 1024px 以上は2カラム。画像は2行にまたがり、見出し＋本文のかたまりと上下中央で揃える */
@media (min-width: 1024px) {
  .np-business__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
      ".    media"
      "head media"
      "body media"
      ".    media";
    column-gap: var(--np-space-6);
    row-gap: 0;
  }

  .np-business--reverse .np-business__inner {
    grid-template-areas:
      "media ."
      "media head"
      "media body"
      "media .";
  }

  .np-business__body {
    margin-top: var(--np-space-3);
  }

  .np-business__media {
    align-self: center;
  }
}

/* 英字ラベル（BUSINESS 01 / PHILOSOPHY など。TOP と About で共通）。
   --np-accent だと 11px で 4.31:1 になり基準に届かないため --np-accent-deep（6.60:1） */
.np-label {
  margin: 0;
  color: var(--np-accent-deep);
  font-family: var(--np-font-en);
  font-size: var(--np-text-xs);
  font-weight: var(--np-weight-medium);
  line-height: var(--np-leading-tight);
  letter-spacing: var(--np-tracking-label);
}

.np-business__title {
  margin: var(--np-space-1) 0 0;
  color: var(--np-ink);
  font-family: var(--np-font-heading);
  font-size: var(--np-text-2xl);
  font-weight: var(--np-weight-bold);
  line-height: var(--np-leading-tight);
  font-feature-settings: "palt";
  /* 「職業情報サイト「キャリアガーデ / ン」」のように語の途中で折れるのを防ぐ */
  word-break: auto-phrase;
}

.np-business__text {
  color: var(--np-ink-sub);
  font-size: var(--np-text-base);
  line-height: var(--np-leading-loose);
}

.np-business__text p {
  margin: 0;
}

.np-business__text p + p {
  margin-top: var(--np-space-2);
}

.np-business__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--np-space-2);
  margin-top: var(--np-space-4);
}

/* 数値（02 のみ）。上下罫線で挟む。テキストカラムが狭いときは 2×2 */
/* 列幅は内容に合わせる。等分（1fr）にすると「14年」のように短い項目の後ろが大きく空くため */
.np-stats {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: start;
  gap: var(--np-space-3) var(--np-space-4);
  margin: var(--np-space-4) 0 0;
  padding: var(--np-space-3) 0;
  border-block: var(--np-border) solid var(--np-line);
  list-style: none;
}

@container np-business-body (min-width: 32rem) {
  .np-stats {
    grid-template-columns: repeat(4, max-content);
  }
}

.np-stats__item {
  margin: 0;
  line-height: var(--np-leading-tight);
}

.np-stats__value {
  color: var(--np-ink);
  font-family: var(--np-font-en);
  font-size: var(--np-text-xl);
  font-weight: var(--np-weight-medium);
}

.np-stats__unit {
  margin-left: calc(var(--np-space-1) / 2);
  color: var(--np-ink-sub);
  font-size: var(--np-text-sm);
}


/* ==========================================================================
   会社について（05）
   ========================================================================== */

.np-company {
  padding-block: var(--np-section-y);
  padding-inline: var(--np-gutter);
  background-color: var(--np-base-alt);
}

/* 1024px 未満は「文字 → イラスト」の縦積み（HTML の並びと同じ） */
.np-company__inner {
  display: grid;
  row-gap: var(--np-space-4);
  max-width: var(--np-width-wide);
  margin-inline: auto;
}

.np-company__body {
  max-width: var(--np-width-text);
}

/* 縦積みのときに絵が主役になりすぎないよう、事業セクションの画像と同じ上限幅にする */
.np-company__media {
  max-width: var(--np-width-text);
}

/* 透過イラスト。地色の上に直接置くので、事業セクションの画像と違い囲み（背景・角丸）は付けない */
.np-company__media > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--np-figure-ratio);
  object-fit: contain;
}

/* 1024px 以上は左に文字・右にイラスト。事業セクションと同じ列間 */
@media (min-width: 1024px) {
  .np-company__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    column-gap: var(--np-space-6);
  }
}

.np-company__title {
  margin: 0;
  color: var(--np-ink);
  font-family: var(--np-font-heading);
  font-size: var(--np-text-2xl);
  font-weight: var(--np-weight-bold);
  line-height: var(--np-leading-tight);
  font-feature-settings: "palt";
  word-break: auto-phrase;
  /* 行の長さを均等に割り、2行目が短く残らないようにする（下層ページの見出しと同じ指定） */
  text-wrap: balance;
}

.np-label + .np-company__title {
  margin-top: var(--np-space-1);
}

/* 「人生」だけ色を変える。em の斜体は使わない（ファーストビューの「適職」と同じ扱い） */
.np-company__em {
  color: var(--np-accent);
  font-style: normal;
}

.np-company__text {
  margin-top: var(--np-space-3);
  color: var(--np-ink-sub);
  font-size: var(--np-text-base);
  line-height: var(--np-leading-loose);
  word-break: auto-phrase;
}

.np-company__text p {
  margin: 0;
}

.np-company__text p + p {
  margin-top: var(--np-space-2);
}

/* 前半2段落（呼びかけ）と後半2段落（会社の立場）の切れ目。ここだけ広く取る */
.np-company__text p + .np-company__break {
  margin-top: var(--np-space-4);
}

.np-company__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--np-space-2);
  margin-top: var(--np-space-4);
}

/* 06 お問い合わせ。地色は --np-base に戻す（05 との境目で地色が変わる）。
   上下は --np-section-y の半分。囲みが内側に余白（--np-space-3〜5）を持つため、
   他のセクションと同じだけ取ると上下が空きすぎる */
.np-contact {
  padding-block: calc(var(--np-section-y) / 2);
  padding-inline: var(--np-gutter);
  background-color: var(--np-base);
}

.np-contact__inner {
  max-width: var(--np-width-wide);
  margin-inline: auto;
}

/* 罫線で囲んだ1ブロック。囲みを使うのは TOP ではここだけ（締めの1か所に絞るため） */
.np-contact__box {
  display: grid;
  row-gap: var(--np-space-3);
  /* 375px では --np-space-4 だと内側が 255px しか残らず、ボタンの「お問い合わせフォームへ」が折れるため詰める */
  padding: var(--np-space-3);
  border: var(--np-border) solid var(--np-line);
  border-radius: var(--np-radius-md);
}

/* 縦は横より1段階狭くする。囲みの中で上下が空くと、1行の本文が中央に浮いて見えるため */
@media (min-width: 768px) {
  .np-contact__box {
    padding: var(--np-space-3) var(--np-space-4);
  }
}

/* 1024px 以上は左に見出し＋本文、右にボタン。ボタン側は内容の幅だけ取る。
   768px でも横並びにできるが、ボタン列に 324px 取られて本文が4行に折れるため、事業セクションと同じ境界にした */
@media (min-width: 1024px) {
  .np-contact__box {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--np-space-5);
    padding: var(--np-space-4) var(--np-space-5);
  }
}

.np-contact__title {
  margin: 0;
  color: var(--np-ink);
  font-family: var(--np-font-heading);
  font-size: var(--np-text-2xl);
  font-weight: var(--np-weight-bold);
  line-height: var(--np-leading-tight);
  font-feature-settings: "palt";
  word-break: auto-phrase;
}

.np-contact__text {
  margin-top: var(--np-space-2);
  color: var(--np-ink-sub);
  font-size: var(--np-text-base);
  line-height: var(--np-leading-loose);
  word-break: auto-phrase;
}

.np-contact__text p {
  margin: 0;
}

.np-contact__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--np-space-1);
}

/* ボタンの下の注記。返信までの目安 */
.np-contact__note {
  margin: 0;
  color: var(--np-ink-mute);
  font-size: var(--np-text-sm);
  line-height: var(--np-leading-tight);
}


/* ==========================================================================
   下層ページ共通：ページタイトル
   h1 は Snow Monkey 標準のページタイトル（.c-entry__title）のまま使う（非表示・div 化はしない）。
   各ページのリード見出し（About の PHILOSOPHY は --np-text-3xl）を主役にするため、
   明確に差がつき、本文より大きい --np-text-xl にする
   ========================================================================== */

.page .c-entry__title {
  color: var(--np-ink);
  font-family: var(--np-font-heading);
  font-size: var(--np-text-xl);
  font-weight: var(--np-weight-bold);
  line-height: var(--np-leading-tight);
  letter-spacing: var(--np-tracking-body);
  font-feature-settings: "palt";
}

/* パンくず・ページタイトルの左端を、ヘッダーのロゴ・フッターと揃える。
   テーマ既定のコンテナ（最大 1280px・左右余白 約29px）を --np-width-wide / --np-gutter に置き換える。
   テーマのコンテナ変数ごと上書きするため、alignfull（.np-page）のはみ出し量も同じ余白で計算され、画面幅いっぱいのまま */
/* パンくずは本文系。テーマ既定の書体ではなく OS 標準の和文にそろえる */
.c-breadcrumbs {
  font-family: var(--np-font-base);
}

.page:not(.home) .l-contents__container,
.error404 .l-contents__container {
  --_container-margin: var(--np-gutter);
  --wp--custom--content-width: var(--np-width-wide);
}


/* ==========================================================================
   About（/about/）
   4ブロック（PHILOSOPHY / MEDIA / AUDIENCE / NAME）、代表メッセージ、会社概要。
   ページの h1 は Snow Monkey 標準のページタイトル。各ブロックは h2
   ========================================================================== */

/* 下層ページのブロック。.np-about（About）と .np-block（コンテンツ制作など）で値を共有する。
   同じ地色が続くため、上下に半分ずつ持たせてブロック間を --np-section-y にする */
.np-about,
.np-block {
  padding-block: calc(var(--np-section-y) / 2);
  padding-inline: var(--np-gutter);
}

.np-about:last-child,
.np-block:last-child {
  padding-bottom: var(--np-section-y);
}

/* ページタイトル直後のブロック。上は --np-space-4 に詰め（--np-section-y だと最初の画面がほぼ空白になる）、下は大きめに取る */
.np-about--lead,
.np-block--lead {
  padding-block: var(--np-space-4) var(--np-section-y);
}

.np-about__inner,
.np-block__inner {
  max-width: var(--np-width-text);
  margin-inline: auto;
}

/* 行の長さを均等に割り、2行目が短く残らないようにする。
   375px の PHILOSOPHY も「仕事を選ぶ前に、 / 人生を選ぶ。」と読点で折れる（TOP 05 の .np-company__title も同じ指定） */
.np-about__title,
.np-block__title {
  margin: 0;
  color: var(--np-ink);
  font-family: var(--np-font-heading);
  font-size: var(--np-text-2xl);
  font-weight: var(--np-weight-bold);
  line-height: var(--np-leading-tight);
  font-feature-settings: "palt";
  word-break: auto-phrase;
  text-wrap: balance;
}

.np-label + .np-about__title {
  margin-top: var(--np-space-1);
}

.np-about--lead .np-about__title {
  font-size: var(--np-text-3xl);
}

.np-about__text,
.np-block__text {
  margin-top: var(--np-space-3);
  color: var(--np-ink-sub);
  font-size: var(--np-text-base);
  line-height: var(--np-leading-loose);
}

/* 先頭ブロック（WORK IN LIFE）は他のブロックと同じ左揃え・同じ本文幅（2026-09-17・よしださん判断）。
   以前は中央揃えで本文カラムだけ 0.75 倍に狭めていたが、本文が3段落から5段落に増え、
   中央揃えでは行末が不揃いになって読みにくくなったためやめた。
   見出しの大きさ（--np-text-3xl）と、本文の上の余白だけリードらしく大きいままにする */
.np-about--lead .np-about__text {
  margin-top: var(--np-space-4);
}

.np-about__text p,
.np-block__text p {
  margin: 0;
}

.np-about__text p + p,
.np-block__text p + p {
  margin-top: var(--np-space-2);
}

/* 代表メッセージ：顔写真（4:5）。未撮影のためプレースホルダ */
.np-message__photo {
  width: calc(var(--np-space-7) * 1.5);
  aspect-ratio: 4 / 5;
  margin-top: var(--np-space-4);
  overflow: hidden;
  border-radius: var(--np-radius-md);
  background-color: var(--np-base-alt);
}

.np-message__photo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.np-message__sign {
  margin: var(--np-space-3) 0 0;
  color: var(--np-ink);
  text-align: right;
}

/* 会社概要：装飾は最小限。行の区切りだけ --np-line */
.np-profile__table {
  width: 100%;
  margin-top: var(--np-space-3);
  border-collapse: collapse;
  border-top: var(--np-border) solid var(--np-line);
  font-size: var(--np-text-base);
  line-height: var(--np-leading-normal);
}

.np-profile__table th,
.np-profile__table td {
  padding: var(--np-space-2) 0;
  border-bottom: var(--np-border) solid var(--np-line);
  text-align: left;
  vertical-align: top;
}

.np-profile__table th {
  width: var(--np-space-7);
  padding-right: var(--np-space-2);
  color: var(--np-ink);
  font-weight: var(--np-weight-medium);
}

.np-profile__table td {
  color: var(--np-ink-sub);
}

.np-profile__table a {
  color: var(--np-ink);
  text-decoration: underline;
}


/* ==========================================================================
   コンテンツ制作（/production/）
   BtoB 向けで判断材料を優先するページ。英字ラベル・画像は使わず、装飾を増やさない。
   ブロックの枠組み（余白・本文カラム・見出し）は About と共通の .np-block
   ========================================================================== */

.np-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--np-space-2);
  margin-top: var(--np-space-3);
}

/* 対応内容：項目名と説明の定義リスト。行の区切りだけ --np-line */
.np-service-list {
  margin: var(--np-space-3) 0 0;
  border-top: var(--np-border) solid var(--np-line);
}

.np-service-list__item {
  padding-block: var(--np-space-2);
  border-bottom: var(--np-border) solid var(--np-line);
  line-height: var(--np-leading-normal);
}

.np-service-list__name {
  color: var(--np-ink);
  font-weight: var(--np-weight-medium);
}

.np-service-list__desc {
  margin: var(--np-space-1) 0 0;
  color: var(--np-ink-sub);
}

/* 768px 以上は項目名と説明を横に並べる */
@media (min-width: 768px) {
  .np-service-list__item {
    display: grid;
    grid-template-columns: calc(var(--np-space-7) * 1.5) 1fr;
    column-gap: var(--np-space-3);
  }

  .np-service-list__desc {
    margin-top: 0;
  }
}

/* 進め方：番号付きのステップ。
   番号は大きい太字（大きい文字の基準 3:1）なので --np-accent（3章「アクセントカラーの2段階の使い分け」） */
.np-steps {
  display: grid;
  gap: var(--np-space-3);
  margin: var(--np-space-3) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: np-step;
}

.np-steps__item {
  display: grid;
  grid-template-columns: var(--np-space-5) 1fr;
  align-items: baseline;
  column-gap: var(--np-space-2);
  line-height: var(--np-leading-normal);
  counter-increment: np-step;
}

.np-steps__item::before {
  grid-row: span 2;
  color: var(--np-accent);
  font-size: var(--np-text-xl);
  font-weight: var(--np-weight-bold);
  line-height: var(--np-leading-tight);
  content: counter(np-step);
}

.np-steps__name {
  grid-column: 2;
  color: var(--np-ink);
  font-weight: var(--np-weight-medium);
}

.np-steps__desc {
  grid-column: 2;
  color: var(--np-ink-sub);
}

/* 料金：上下罫線で挟むシンプルな表。料金は折り返さず右揃え */
.np-price__tax {
  margin: var(--np-space-3) 0 0;
  color: var(--np-ink-sub);
}

.np-price__table {
  width: 100%;
  margin-top: var(--np-space-2);
  border-collapse: collapse;
  border-block: var(--np-border) solid var(--np-line);
  font-size: var(--np-text-base);
  line-height: var(--np-leading-normal);
}

.np-price__table th,
.np-price__table td {
  padding-block: var(--np-space-2);
  border-bottom: var(--np-border) solid var(--np-line);
  text-align: left;
  vertical-align: top;
}

.np-price__table thead th {
  padding-block: var(--np-space-1);
  color: var(--np-ink-mute);
  font-size: var(--np-text-sm);
  font-weight: var(--np-weight-medium);
}

.np-price__table tbody th {
  padding-right: var(--np-space-2);
  color: var(--np-ink);
  font-weight: var(--np-weight-medium);
}

.np-price__table td,
.np-price__table thead th:last-child {
  text-align: right;
  white-space: nowrap;
}

.np-price__table td {
  color: var(--np-ink-sub);
}

.np-price__note {
  margin: var(--np-space-2) 0 0;
  color: var(--np-ink-mute);
  font-size: var(--np-text-sm);
  line-height: var(--np-leading-normal);
}

.np-price__note + .np-price__note {
  margin-top: 0;
}


/* ==========================================================================
   プライバシーポリシー（/privacy-policy/）
   枠組みは下層ページ共通の .np-block。装飾は罫線と余白だけにする
   ========================================================================== */

/* 短い節が8つ続くページなので、ブロックの上下余白を他の下層ページの半分にする。
   1440px で「冒頭文 → 1. 基本方針」が 172px 空いて間延びしていたため（2026-09-16）。
   .privacy-policy は WordPress がプライバシーポリシーページに付ける body クラス、
   .np-page--policy は HTML 側のクラス。どちらでも効くようにしている */
.privacy-policy .np-block,
.np-page--policy .np-block {
  padding-block: calc(var(--np-section-y) / 4);
}

.privacy-policy .np-block--lead,
.np-page--policy .np-block--lead {
  padding-block: var(--np-space-3) calc(var(--np-section-y) / 4);
}

.privacy-policy .np-block:last-child,
.np-page--policy .np-block:last-child {
  padding-bottom: calc(var(--np-section-y) / 2);
}

/* 各項目の中の小見出し（h3）。h2（--np-text-2xl）より小さく、本文より大きい */
.np-block__subtitle {
  margin: var(--np-space-3) 0 0;
  color: var(--np-ink);
  font-family: var(--np-font-heading);
  font-size: var(--np-text-lg);
  font-weight: var(--np-weight-bold);
  line-height: var(--np-leading-tight);
  font-feature-settings: "palt";
}

/* 箇条書き。マーカーは本文より控えめな色にする */
.np-list {
  margin: var(--np-space-2) 0 0;
  padding-left: var(--np-space-3);
  color: var(--np-ink-sub);
  line-height: var(--np-leading-loose);
}

.np-list li::marker {
  color: var(--np-ink-mute);
}

.np-list + .np-block__text,
.np-list + .np-block__subtitle {
  margin-top: var(--np-space-3);
}

/* 本文・箇条書きの中のリンク。本文サイズなので --np-accent-deep（6.60:1） */
.np-block__text a,
.np-list a {
  color: var(--np-accent-deep);
  text-decoration: underline;
}

/* 末尾の制定日・社名。本文との間を罫線1本で区切る */
.np-policy__foot {
  padding-top: var(--np-space-4);
  border-top: var(--np-border) solid var(--np-line);
  line-height: var(--np-leading-normal);
}

.np-policy__dates {
  margin: 0;
  color: var(--np-ink-mute);
  font-size: var(--np-text-sm);
}

.np-policy__company {
  margin: var(--np-space-3) 0 0;
  color: var(--np-ink-sub);
}


/* ==========================================================================
   404（固定ページではなく、テーマの描画フィルターで差し込む。
   マークアップは my-snow-monkey/404.html。正本は _docs/html/404.html）
   ========================================================================== */

.np-404 {
  text-align: center;
}

/* 縦に長くなりやすいので、ブロックの上下余白を一段詰める（ボタンと「サイト内の主なページ」の間も詰まる） */
.np-block.np-404 {
  padding-block: calc(var(--np-section-y) / 4);
}

.np-block.np-404:first-child {
  padding-top: calc(var(--np-section-y) / 2);
}

.np-block.np-404:last-child {
  padding-bottom: calc(var(--np-section-y) / 2);
}

.np-404 .np-block__actions {
  justify-content: center;
}

/* 「サイト内の主なページ」は補助的な案内。h2 のままサイズを落とし、英字ラベルに近い見え方にする */
.np-404__links-title {
  margin: 0;
  color: var(--np-ink-mute);
  font-size: var(--np-text-sm);
  font-weight: var(--np-weight-medium);
  line-height: var(--np-leading-tight);
  letter-spacing: var(--np-tracking-body);
}

/* サイト内の主なページ。中央揃えなのでマーカーは置かない。768px 未満は縦積みで行間を詰める */
.np-404__links {
  display: grid;
  gap: var(--np-space-1);
  margin: var(--np-space-2) 0 0;
  padding: 0;
  list-style: none;
}

/* 768px 以上は横1行（入りきらなければ折り返して2行） */
@media (min-width: 768px) {
  .np-404__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--np-space-1) var(--np-space-3);
  }
}

.np-404__note {
  margin: var(--np-space-4) 0 0;
  color: var(--np-ink-mute);
  font-size: var(--np-text-sm);
  line-height: var(--np-leading-normal);
}

.np-404__links a,
.np-404__note a {
  color: var(--np-accent-deep);
  text-decoration: underline;
}


/* ==========================================================================
   お問い合わせ（/contact/）
   固定ページに「カスタムHTML」（冒頭文 .np-page）→「Snow Monkey Forms」ブロックの順に並べる。
   フォームは Snow Monkey Forms 標準のマークアップ（.snow-monkey-form）をトークンで整える
   ========================================================================== */

/* 見出しを持たないブロック（お問い合わせの冒頭文。見出しはページタイトルの h1 と同じ文言のため置かない） */
.np-block__inner > .np-block__text:first-child {
  margin-top: 0;
}

/* 直後にフォームが続く場合は、冒頭文とフォームのあいだを詰める */
.np-page:has(+ .snow-monkey-form) .np-block:last-child {
  padding-bottom: var(--np-space-4);
}

/* フォームの幅は本文カラム（--np-width-text）。ページの最後の要素なので下に --np-section-y。
   冒頭文（.np-page）とフォームは別のブロックで、隣り合うとは限らないため、本文領域の直下のフォームに直接当てる */
.c-entry__content > .snow-monkey-form {
  max-width: var(--np-width-text);
  margin: 0 auto;
  padding-bottom: var(--np-section-y);
  color: var(--np-ink);
  font-family: var(--np-font-base);
  font-size: var(--np-text-base);
  line-height: var(--np-leading-normal);
  letter-spacing: var(--np-tracking-body);
}

.snow-monkey-form .smf-form {
  display: grid;
  gap: var(--np-space-3);
}

.snow-monkey-form .smf-item {
  margin: 0;
  padding: 0;
}

/* 項目名は入力欄の上 */
.snow-monkey-form .smf-item__col--label {
  margin-bottom: var(--np-space-1);
  padding: 0;
}

.snow-monkey-form .smf-item__col--controls {
  padding: 0;
}

.snow-monkey-form .smf-item__label {
  color: var(--np-ink);
  font-weight: var(--np-weight-medium);
}

/* 項目名の中のリンク（プライバシーポリシー）。本文サイズなので --np-accent-deep */
.snow-monkey-form .smf-item__label a {
  color: var(--np-accent-deep);
  text-decoration: underline;
}

/* 必須マーク。Snow Monkey Forms は必須を表示しないため、必須の検証が付いた項目にだけ付ける。
   地を --np-accent、文字を白にする（白文字で 4.53:1。--np-accent の文字色だと小さい文字の基準に届かない） */
.snow-monkey-form .smf-item:has([data-validations~="required"]) .smf-item__label__text::after {
  display: inline-block;
  margin-left: var(--np-space-1);
  padding-inline: calc(var(--np-space-1) / 2);
  border-radius: calc(var(--np-radius-sm) / 2);
  background-color: var(--np-accent);
  color: var(--np-surface);
  font-size: var(--np-text-xs);
  font-weight: var(--np-weight-bold);
  line-height: var(--np-leading-normal);
  vertical-align: middle;
  content: "必須";
}

/* 入力欄。文字は本文と同じ --np-text-base（16px）。iOS は 16px 未満の入力欄にフォーカスすると画面を拡大するため、これ未満にしない */
.snow-monkey-form :is(.smf-text-control__control, .smf-textarea-control__control, .smf-select-control__control) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: var(--np-space-1) var(--np-space-2);
  /* 入力できる領域の境界なので、地との差が 3:1 以上ある --np-line-input を使う（--np-line では 1.31:1 で見えない） */
  border: var(--np-border) solid var(--np-line-input);
  border-radius: var(--np-radius-sm);
  background-color: var(--np-surface);
  box-shadow: none;
  color: var(--np-ink);
  font-family: var(--np-font-base);
  font-size: var(--np-text-base);
  line-height: var(--np-leading-normal);
}

.snow-monkey-form .smf-textarea-control__control {
  resize: vertical;
}

/* セレクトは右端の矢印（テーマの .smf-select-control__toggle）に文字が被らないよう右を空ける */
.snow-monkey-form .smf-select-control__control {
  padding-right: var(--np-space-5);
}

.snow-monkey-form :is(.smf-text-control__control, .smf-textarea-control__control, .smf-select-control__control):focus {
  border-color: var(--np-line-input);
  outline: calc(var(--np-border) * 2) solid var(--np-accent);
  outline-offset: 0;
  box-shadow: none;
}

.snow-monkey-form .smf-select-control__control:focus + .smf-select-control__toggle::before {
  border-color: var(--np-accent);
}

/* 同意のチェックボックス */
.snow-monkey-form .smf-checkbox-control {
  display: inline-flex;
  align-items: center;
  gap: var(--np-space-1);
}

/* テーマは appearance: none でチェックボックスを自前に描く（枠線 #CCC、チェック時は青）。
   accent-color は効かないため、枠線と選択時の色を指定する。
   テーマの指定（.smf-form .smf-checkbox-control__control）に勝つよう、セレクタを一段深くしている */
.snow-monkey-form .smf-form .smf-checkbox-control__control,
.snow-monkey-form .smf-form .smf-checkbox-control__control:hover,
.snow-monkey-form .smf-form .smf-checkbox-control__control:focus {
  border-color: var(--np-line-input);
}

.snow-monkey-form .smf-form .smf-checkbox-control__control:checked {
  border-color: var(--np-accent);
  background-color: var(--np-accent);
}

.snow-monkey-form .smf-checkbox-control__control:focus-visible {
  outline: calc(var(--np-border) * 2) solid var(--np-accent);
  outline-offset: calc(var(--np-border) * 2);
}

/* エラー。赤のトークンはないため、小さい文字でも基準を満たす --np-accent-deep（6.60:1） */
.snow-monkey-form .smf-error-messages {
  margin-top: var(--np-space-1);
  color: var(--np-accent-deep);
  font-size: var(--np-text-sm);
  line-height: var(--np-leading-normal);
}

.snow-monkey-form .smf-form [data-invalid="1"] {
  border-color: var(--np-accent-deep);
}

.snow-monkey-form .smf-form .smf-checkboxes-control__control[data-invalid="1"] {
  border-color: transparent;
}

/* 送信ボタン：塗り（.np-button--primary と同じ値）。フォームの最後の操作なので中央に置く（他ページの塗りボタンと同じ） */
.snow-monkey-form .smf-action {
  margin-top: var(--np-space-4);
  text-align: center;
}

.snow-monkey-form .smf-action .smf-button-control__control {
  padding-block: var(--np-space-2);
  padding-inline: var(--np-space-4);
  border: var(--np-border) solid var(--np-cta);
  border-radius: var(--np-radius-full);
  background-color: var(--np-cta);
  background-image: none;
  color: var(--np-surface);
  font-family: var(--np-font-heading);
  font-size: var(--np-text-base);
  font-weight: var(--np-weight-medium);
  line-height: var(--np-leading-tight);
  letter-spacing: var(--np-tracking-body);
  transition:
    background-color var(--np-duration) var(--np-ease),
    border-color var(--np-duration) var(--np-ease);
}

.snow-monkey-form .smf-action .smf-button-control__control:hover {
  border-color: var(--np-accent-deep);
  background-color: var(--np-accent-deep);
}

.snow-monkey-form .smf-action .smf-button-control__control:focus-visible {
  outline: calc(var(--np-border) * 2) solid var(--np-accent);
  outline-offset: calc(var(--np-border) * 2);
}

/* 送信中のくるくる（テーマ既定は半透明の黒）。塗りボタンの上で見えるよう白にする */
.snow-monkey-form .smf-action .smf-sending::before {
  border-color: var(--np-surface);
  border-top-color: transparent;
}


/* ==========================================================================
   スクロールでの立ち上げ（02〜06）
   scroll-in.js が、画面に入ったセクションに .is-visible を付ける（付けたら監視をやめる）。
   .np-js は同じ JS が <html> に付けるクラス。JS が動かない環境ではこの指定ごと当たらないので、
   初期状態（透明）にならず最初から読める。「動きを減らす」設定でも同じ。
   以前は animation-timeline: view()（スクロール連動）だったが、Firefox で動かず、
   読み込み時点で画面内にある要素が一度も動かないため、時間ベースに置き換えた
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* 動かす対象：監視する単位の中身（ラベル・見出し・本文・数値・ボタン）と、画像そのもの。
     所要時間は 720ms（--np-duration の3倍）、イージングは最初速く終わりがゆっくり */
  /* 06 は囲みブロックごと立ち上げるので、中身ではなく .np-contact__box（inner の唯一の子）を動かす */
  .np-js :is(.np-intro__inner, .np-business__head, .np-business__body, .np-company__body, .np-contact__inner) > *,
  .np-js :is(.np-business__media, .np-company__media) {
    opacity: 0;
    translate: 0 var(--np-space-3);
    transition:
      opacity calc(var(--np-duration) * 3) var(--np-ease),
      translate calc(var(--np-duration) * 3) var(--np-ease);
  }

  .np-js :is(.np-intro__inner, .np-business__head, .np-business__body, .np-contact__inner).is-visible > *,
  .np-js .np-business__media.is-visible,
  .np-js .np-company__inner.is-visible :is(.np-company__body > *, .np-company__media) {
    opacity: 1;
    translate: 0 0;
  }

  /* 時間差：ラベル → 見出し → 本文 → 数値 → ボタン の順に 60ms（--np-duration の1/4）ずつ遅らせる */
  .np-js :is(.np-intro__title, .np-business__title, .np-business__media, .np-company__title, .np-company__media) {
    transition-delay: calc(var(--np-duration) / 4);
  }

  .np-js :is(.np-business__text, .np-company__text) {
    transition-delay: calc(var(--np-duration) / 2);
  }

  .np-js :is(.np-stats, .np-company__actions) {
    transition-delay: calc(var(--np-duration) / 4 * 3);
  }

  .np-js .np-business__actions {
    transition-delay: var(--np-duration);
  }
}

/* 印刷・PDF 出力では立ち上げを無効にし、すべて表示する。
   印刷時は画面に入らないまま出力される要素があり、透明のままになるため */
@media print {
  /* 演出の初期状態を無効化（最重要） */
  .np-hero__line,
  .np-hero__lead,
  .np-hero__actions,
  .np-js :is(.np-intro__inner, .np-business__head, .np-business__body, .np-company__body, .np-contact__inner) > *,
  .np-js :is(.np-business__media, .np-company__media) {
    animation: none;
    opacity: 1;
    transform: none;
    translate: none;
    transition: none;
  }

  /* 画面専用の要素を落とす */
  .l-header,
  .l-footer {
    display: none;
  }

  /* 段組みを1カラムに（HTML の並び＝ラベル・事業名 → 画像 → 本文のまま）。
     グリッドの row-gap がなくなるため、画像の上下に同じ余白を持たせる */
  .np-business__inner {
    display: block;
  }

  .np-business__media {
    margin-block: var(--np-space-3);
  }

  /* 改ページの調整。セクションは1ページより高いので、セクション単位では指定しない（空白ページになる）。
     実際に1ページに収まる小さな単位にだけ指定する */

  /* 見出しの直後で切らない（ラベル・事業名と、続く画像を離さない） */
  .np-business__head .np-label,
  .np-business__title,
  .np-business__head {
    break-after: avoid;
  }

  /* それ自体が分割されると読めなくなるもの */
  .np-business__media,
  .np-stats,
  .np-business__actions {
    break-inside: avoid;
  }

  /* 段落が1〜2行だけページをまたいで取り残されるのを防ぐ */
  .np-business__text p {
    orphans: 3;
    widows: 3;
  }
}

/* 動きを減らす設定。立ち上げは no-preference のときしか付けていないが、最終状態を明示しておく */
@media (prefers-reduced-motion: reduce) {
  .np-hero__line,
  .np-hero__lead,
  .np-hero__actions,
  :is(.np-intro__inner, .np-business__head, .np-business__body, .np-company__body, .np-contact__inner) > *,
  :is(.np-business__media, .np-company__media) {
    animation: none;
    opacity: 1;
    transform: none;
    translate: none;
    transition: none;
  }
}


/* ==========================================================================
   Snow Monkey 標準ヘッダーの調整
   ========================================================================== */

/* 地色。ヘッダーと本文のあいだに白い帯が出ないよう、ページ全体を揃える */
.l-body {
  background-color: var(--np-base);
}

.l-header {
  background-color: var(--np-base);
  font-family: var(--np-font-heading);
  letter-spacing: var(--np-tracking-body);
}

/* 追従ヘッダー（モバイル）の影。地色を揃えると線だけが浮くため消す */
.l-header--sticky-sm {
  box-shadow: none;
}

/* TOP：本文エリア上の余白を消し、ファーストビュー上部は --np-section-y だけにする */
.home .l-contents__inner {
  padding-top: 0;
}

/* スクロール時に上から出るナビ */
.p-drop-nav {
  background-color: var(--np-base);
}

/* ロゴ。カスタマイザーは幅しか指定できないため、高さで揃える */
.l-header .c-site-branding__title .custom-logo {
  width: auto;
  height: var(--np-space-4);
  object-fit: contain;
}

/* ヘッダーが1行（ロゴ＋ハンバーガー）になる幅では、横長のロゴが入りきらないため低くする */
@media (max-width: 1023.98px) {
  .l-header .c-site-branding__title .custom-logo {
    height: var(--np-space-3);
  }
}

/* 1024〜1199px はナビ5項目がロゴの横に収まらないため、ロゴの絵柄を 1024px 未満と同じ --np-space-3 の高さにする。
   枠の高さは --np-space-4 のまま上下の padding で絵柄だけを縮め、1200px との境目でヘッダーの高さ・ナビ・本文の位置を変えない */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .l-header .c-site-branding__title .custom-logo {
    box-sizing: border-box;
    padding-block: calc((var(--np-space-4) - var(--np-space-3)) / 2);
  }
}

/* 追従ヘッダー（ドロップナビ）のロゴ。スクロール中なので通常のヘッダーより小さくする。
   1024〜1199px 用の padding は、ここでは高さを直接指定するため打ち消す */
.l-header .p-drop-nav .c-site-branding__title .custom-logo {
  height: var(--np-space-3);
  padding-block: 0;
}

/* ロゴとナビのあいだを空ける（テーマ既定では詰まる） */
.p-drop-nav--has-site-branding .c-site-branding {
  margin-right: var(--np-space-3);
}

/* ナビのリンク。ホバー・現在地での色の変化は入れない。
   項目の途中で折り返さない（「メディア運 / 営」のように1項目が2行に割れるのを防ぐ） */
.p-global-nav .c-navbar__item > a {
  padding: var(--np-space-1) var(--np-space-2);
  color: var(--np-ink);
  font-size: var(--np-text-base);
  font-weight: var(--np-weight-medium);
  white-space: nowrap;
}

.p-global-nav .c-navbar__item > a:focus-visible {
  outline: calc(var(--np-border) * 2) solid var(--np-accent);
  outline-offset: calc(var(--np-border) * -2);
}


/* ==========================================================================
   Snow Monkey 標準ヘッダー・フッターの幅
   テーマのコンテナ（1280px）ではなく、本文と同じ --np-width-wide / --np-gutter に揃える。
   .c-container は content-box なので、max-width が中身の幅、padding が外側の余白になる。
   ========================================================================== */

.l-header .c-container,
.l-footer .c-container {
  max-width: var(--np-width-wide);
  padding-inline: var(--np-gutter);
}


/* ==========================================================================
   フッター
   Snow Monkey のフッターウィジェットエリアに「カスタムHTML」ウィジェットを1つ置く。
   コピーライトはカスタマイザーで設定する（HTML には書かない）
   ========================================================================== */

/* テーマのフッター上罫を、サイトの罫線色に揃える */
.l-footer {
  border-top-color: var(--np-line);
}

/* 本文エリア下の余白（テーマ既定 約48px）を消す。
   「最後のセクション → 罫線1本 → フッター」にし、罫線の上に意図のない帯を残さない */
.l-contents__inner:has(.np-page) {
  padding-bottom: 0;
}

/* フッターの上下余白。下は 0 にして、コピーライト行を住所と同じ行に引き上げられるようにする */
.l-footer .l-footer-widget-area {
  padding-block: var(--np-space-5) 0;
}

/* テーマはウィジェット項目に下マージン（48px）を持たせ、行側の負マージンで相殺している。
   ウィジェットが1つだけなので、この余白がそのままフッター下端の空きになる。両方 0 にする */
.l-footer .l-footer-widget-area__item,
.l-footer .l-footer-widget-area .c-row {
  margin-bottom: 0;
}

.np-footer {
  color: var(--np-ink-sub);
  font-family: var(--np-font-base);
  font-size: var(--np-text-base);
  line-height: var(--np-leading-normal);
  letter-spacing: var(--np-tracking-body);
}

.np-footer :focus-visible {
  outline: calc(var(--np-border) * 2) solid var(--np-accent);
  outline-offset: calc(var(--np-border) * 2);
}

/* 1024px 未満は縦積み。以上はブランド / 事業 / 会社 の3カラム（上揃え） */
.np-footer__main {
  display: grid;
  gap: var(--np-space-4);
}

@media (min-width: 1024px) {
  .np-footer__main {
    grid-template-columns: 1.15fr 1fr 1fr 1.15fr;
    align-items: start;
    column-gap: var(--np-space-4);
  }
}

.np-footer__logo {
  display: inline-block;
}

/* 高さは本文より少し大きい程度 */
.np-footer__logo-img {
  display: block;
  width: auto;
  height: var(--np-space-3);
}

/* 1024px の3カラムでは2〜3行に折り返す。語の途中（「つくってい / ます。」）で切れないようにする */
.np-footer__desc {
  margin: var(--np-space-2) 0 0;
  word-break: auto-phrase;
}

.np-footer__label {
  margin: 0;
  color: var(--np-ink-mute);
  font-size: var(--np-text-sm);
  font-weight: var(--np-weight-medium);
}

.np-footer__list {
  display: grid;
  gap: var(--np-space-1);
  margin: var(--np-space-2) 0 0;
  padding: 0;
  list-style: none;
}

.np-footer__link {
  color: var(--np-ink);
  text-decoration: none;
}

/* リンクの下に小さく添える補足（運営メディアの「採用担当者向け」）。
   詰めすぎると折り返しに見えるため、リンクとのあいだを空ける */
.np-footer__note {
  display: block;
  margin-top: var(--np-space-1);
  color: var(--np-ink-mute);
  font-size: var(--np-text-xs);
  line-height: var(--np-leading-tight);
}

/* 4カラムの下。横罫で区切り、会社情報を置く。
   コピーライト（テーマがウィジェット領域の外に出力）を同じ行に引き上げるため、下余白は持たせない */
.np-footer__sub {
  margin-top: var(--np-space-3);
  padding-top: var(--np-space-3);
  padding-bottom: 0;
  border-top: var(--np-border) solid var(--np-line);
}

/* 会社情報：小さめ・グレー。社名と所在地のあいだで折り返す */
.np-footer__company {
  margin: 0;
  color: var(--np-ink-mute);
  font-size: var(--np-text-sm);
}

.np-footer__company-name,
.np-footer__address {
  display: inline-block;
}

.np-footer__company-name {
  margin-right: var(--np-space-2);
}

/* コピーライト行（カスタマイザーで設定）。
   テーマ既定の濃色の帯（.c-copyright--inverse）をやめ、フッターと同じ地色・会社情報と同じ小さめのグレーにする。
   テーマ既定の中央揃えもやめ、フッター本文と同じ左端に揃える */
.l-footer .c-copyright {
  padding-block: var(--np-space-1) var(--np-space-3);
  background-color: var(--np-base);
  text-align: left;
  color: var(--np-ink-mute);
  font-family: var(--np-font-base);
  font-size: var(--np-text-sm);
  line-height: var(--np-leading-normal);
  letter-spacing: var(--np-tracking-body);
}

/* 768px 以上は、住所（ウィジェット内）とコピーライト（ウィジェット外）を同じ行に見せる。
   テーマの構造上この2つは兄弟にできないため、コピーライトを1行分だけ引き上げて右に置く。
   住所が1行に収まる幅でだけ行う（375px では2行になるため、下に重ねたまま） */
@media (min-width: 768px) {
  .l-footer .c-copyright {
    margin-top: calc(var(--np-text-sm) * var(--np-leading-normal) * -1);
    padding-top: 0;
    text-align: right;
  }
}