/* ===================== LUMIRAI デザイン v2：全ページ共通（2026-11-10）=====================
   ・トップ・AI活用支援・コラム・お知らせで、ヘッダー（LUMIRAI の文字ロゴ）・フッター・色・動きをそろえる
   ・色は白と黒（#0b0b0c）とグレー、アクセントは朱（#d9472b）1色だけ。小さな文字に朱を使うときは #c23b20（白地で4.5以上）
   ・動きは transform と opacity だけ（レイアウトを動かさない）。「動きを減らす」設定では動かさない
   ・トップページは index.html の中にも同じ基準がある（あちらが優先。値は同じ） */

@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Roboto"), local("Liberation Sans"), local("DejaVu Sans");
  ascent-override: 90.5%; descent-override: 22.6%; line-gap-override: 0%; size-adjust: 107%; }
:root {
  --v2-bg: #fff; --v2-ink: #0b0b0c; --v2-ink-2: #26262a; --v2-g1: #55555b; --v2-g2: #6e6e73; --v2-hair: #e4e4e7; --v2-soft: #f4f4f5;
  --v2-ac: #d9472b; --v2-ac-t: #c23b20;
  --v2-max: 1440px; --v2-pad: 40px; --v2-gap: 24px;
  --v2-e-expo: cubic-bezier(.16, 1, .3, 1);
  --v2-e-io: cubic-bezier(.65, 0, .35, 1);
  --v2-latin: Inter, "Inter Fallback", "Noto Sans JP", system-ui, sans-serif;
}
@media (max-width: 1023px) { :root { --v2-pad: 32px; --v2-gap: 20px; } }
@media (max-width: 639px)  { :root { --v2-pad: 20px; --v2-gap: 12px; } }
@media (max-width: 359px)  { :root { --v2-pad: 16px; } }
:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--v2-ac); outline-offset: 3px; }
::selection { background: #fbe4dd; color: var(--v2-ink); }
#scrollProgress { height: 2px !important; background: var(--v2-ac) !important; }

/* ---------- ヘッダー（全ページ同じ。文字ロゴ LUMIRAI＋by スリーシックス株式会社） ---------- */
#header { background: var(--v2-bg) !important; border-bottom: 1px solid var(--v2-ink) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.v2-hd { font-family: var(--v2-latin); max-width: var(--v2-max); margin: 0 auto; padding: 0 var(--v2-pad); height: 64px; display: flex; align-items: center; gap: 24px; }
.v2-logo { display: flex; align-items: baseline; gap: 12px; margin-right: auto; color: var(--v2-ink); }
.v2-logo .brand-wm { font: 700 23px/1 var(--v2-latin); letter-spacing: -.015em; }
.v2-logo .brand-wm span { color: var(--v2-ac); }
.v2-logo-by { font-size: 11px; line-height: 1.2; letter-spacing: .04em; color: var(--v2-g1); white-space: nowrap; }
.v2-nav { gap: 26px; font-size: 13px; color: var(--v2-g1); }
.v2-nav a { transition: color .25s; }
.v2-nav a:hover, .v2-nav a[aria-current] { color: var(--v2-ink); }
.v2-hd-cta { display: inline-flex; height: 38px; align-items: center; padding: 0 18px; border-radius: 999px; background: var(--v2-ink); color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; }
#menuBtn { color: var(--v2-ink); }
@media (min-width: 1024px) and (max-width: 1279px) { .v2-nav { gap: 18px !important; } .v2-logo-by { display: none; } }
@media (min-width: 768px) and (max-width: 1023px) { .v2-nav { gap: 14px !important; font-size: 12px; } .v2-logo-by { display: none; } }
@media (max-width: 639px) {
  .v2-hd { height: 60px; gap: 12px; }
  .v2-logo { flex-direction: column; align-items: flex-start; gap: 4px; }
  .v2-logo .brand-wm { font-size: 20px; }
  .v2-logo-by { font-size: 9.5px; letter-spacing: .03em; }
  .v2-hd-cta { height: 36px; padding: 0 14px; font-size: 13px; }
}
/* トップ以外：ヘッダーの左右を本文の幅にそろえる */
body.v2-sub .v2-hd { max-width: 72rem; padding: 0 2rem; }
@media (max-width: 639px) { body.v2-sub .v2-hd { padding: 0 1.25rem; } }
body.v2-sub .brand-wm, body.v2-sub .brand-wm * { font-family: var(--v2-latin) !important; }

/* ---------- フッター（黒・罫線だけ。光や粒子・丸いマークは使わない） ---------- */
html body footer.ns-foot { background: var(--v2-ink); color: #d4d4d8; }
html body footer.ns-foot::before { display: none; }
footer.ns-foot > div > .grid { padding-top: 40px; border-top: 1px solid #2c2c31; }
footer.ns-foot a > svg[aria-hidden="true"] { display: none; }
html body footer.ns-foot .brand-wm { font: 700 23px/1 var(--v2-latin) !important; letter-spacing: -.015em !important; color: #fff; }
html body footer.ns-foot .brand-wm span { color: var(--v2-ac) !important; }
html body footer.ns-foot .text-slate-500, html body footer.ns-foot .text-slate-600 { color: #b9b9bf; }
html body footer.ns-foot .text-slate-400 { color: #8d8d93; }
html body footer.ns-foot > div > div.mt-14 { border-color: #2c2c31; }
html body footer.ns-foot a:hover { color: #fff; }

/* ---------- 選ばれる理由（番号＋短い見出し＋1行） ---------- */
.why { margin-top: 24px; border-top: 1px solid var(--v2-ink); display: grid; grid-template-columns: minmax(0, 1fr); }
.why > li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; padding: 18px 0 20px; border-bottom: 1px solid var(--v2-hair); }
.why-n { grid-row: 1 / 3; font: 500 13px/1.9 var(--v2-latin); color: var(--v2-ac-t); letter-spacing: .01em; }
.why-t { font-size: 18px; font-weight: 700; line-height: 1.5; letter-spacing: -.02em; color: var(--v2-ink); }
.why-d { margin-top: 4px; font-size: 13.5px; line-height: 1.8; color: var(--v2-g1); }

/* ---------- 主な支援実績（数字や要点を大きく。2×2で高さをそろえる） ---------- */
.ach2 { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--v2-gap, 24px); row-gap: 0; border-top: 1px solid var(--v2-ink); }
.ach2 > li { position: relative; display: flex; flex-direction: column; padding: 16px 0 22px; border-bottom: 1px solid var(--v2-hair); }
.ach2-k { font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--v2-g1); }
.ach2-v { margin-top: 10px; font: 700 14px/1.2 var(--v2-latin); color: var(--v2-ink); letter-spacing: -.01em; }
.ach2-v b { margin-right: 3px; font-size: clamp(30px, 3.2vw, 42px); font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ach2-v-s { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.35; letter-spacing: -.03em; padding-top: 4px; }
.ach2-d { margin-top: auto; padding-top: 10px; font-size: 13px; line-height: 1.75; color: var(--v2-g1); }
@media (max-width: 359px) { .ach2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 会社概要：お問い合わせはAI受付へ ---------- */
.v2-chat-link { display: inline-flex; align-items: center; gap: 10px; padding: 0; background: none; border: 0; color: var(--v2-ink); font-weight: 700; text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--v2-ac); text-decoration-thickness: 1px; text-underline-offset: 6px; transition: color .3s; }
.v2-chat-link:hover { color: var(--v2-ac-t); }
.v2-chat-arw { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--v2-ink); color: #fff; overflow: hidden; }

/* ---------- 高さをそろえる ---------- */
.v2-fcard .feat-tags { margin-top: auto; }
.v2-fcard h3 + p { margin-bottom: 24px; }

/* =====================================================================================
   動き：マウスを乗せたとき・スクロールしたとき（なめらかに。機械的に止まらない expo-out を基本に）
   ===================================================================================== */
/* 文字リンク：下線が左から引かれ、離すと右へ抜ける */
.mo-link { position: relative; }
.mo-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s var(--v2-e-expo); }
.mo-link:hover::after, .mo-link:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }

@media (prefers-reduced-motion: no-preference) {
  /* ボタンの矢印：右へ抜けて、左から戻ってくる */
  .v2-arw, .v2-chat-arw { overflow: hidden; }
  @keyframes v2-pass { 0% { transform: translateX(0); } 45% { transform: translateX(150%); } 46% { transform: translateX(-150%); } 100% { transform: translateX(0); } }
  @keyframes v2-drop { 0% { transform: translateY(0); } 45% { transform: translateY(150%); } 46% { transform: translateY(-150%); } 100% { transform: translateY(0); } }
  .v2-btn-p .v2-arw, .v2-chat-arw { transition: transform .6s var(--v2-e-expo), background-color .4s; }
  .v2-btn-p:hover .v2-arw { transform: scale(1.08); }
  .v2-btn-p:hover .v2-arw svg, .v2-chat-link:hover .v2-chat-arw svg { animation: v2-pass .7s var(--v2-e-expo); }   /* 丸の中で矢印が抜けて戻る（丸の外に出ないよう、丸に overflow:hidden がある部品だけ） */
  .v2-btn-i:hover .v2-arw svg { animation: v2-drop .7s var(--v2-e-expo); }
  .v2-chat-link:hover .v2-chat-arw { background: var(--v2-ac-t); }

  /* 線のボタン：黒が下から満ちる（文字は白に） */
  .v2-btn-o { position: relative; overflow: hidden; isolation: isolate; transition: color .45s var(--v2-e-expo), border-color .45s; }
  .v2-btn-o::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--v2-ink); transform: translateY(101%); transition: transform .6s var(--v2-e-expo); }
  .v2-btn-o:hover { color: #fff; background: #fff; }
  .v2-btn-o:hover::before { transform: translateY(0); }
  .v2-btn-o:hover .v2-arw { border-color: rgba(255, 255, 255, .35); }

  /* ヘッダーのボタン：朱が左から満ちる */
  .v2-hd-cta { position: relative; overflow: hidden; isolation: isolate; }
  .v2-hd-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--v2-ac-t); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .55s var(--v2-e-expo); }
  .v2-hd-cta:hover::before { transform: scaleX(1); transform-origin: 0 50%; }

  /* 罫線で区切った項目：乗せると上の線が朱で左から引かれる */
  :is(.why > li, .ach2 > li, .v2-prom-i, .sv-stat, .ind-grid > li, .pln-plan, .v2-fcard, .ba-list > *, .ns-desk-b) { position: relative; }
  :is(.why > li, .ach2 > li, .v2-prom-i, .sv-stat, .ind-grid > li, .v2-fcard, .ba-list > *, .ns-desk-b)::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--v2-ac); pointer-events: none;
    transform: scaleX(0); transform-origin: 100% 50%; transition: transform .7s var(--v2-e-expo); }
  :is(.why > li, .ach2 > li, .v2-prom-i, .sv-stat, .ind-grid > li, .v2-fcard, .ba-list > *, .ns-desk-b):hover::before { transform: scaleX(1); transform-origin: 0 50%; }
  .why > li .why-t, .ach2 > li .ach2-v { transition: transform .6s var(--v2-e-expo); }
  .why > li:hover .why-t, .ach2 > li:hover .ach2-v { transform: translateX(6px); }

  /* 画面の画像：乗せるとほんの少し近づく */
  :is(.feat-shot, .lp-shot) { transition: transform 1.2s var(--v2-e-expo); }
  :is(.v2-fcard, .case-grid figure, .v2-fig):hover :is(.feat-shot, .lp-shot) { transform: scale(1.015); }

  /* よくある質問：開いたときに答えがすっと出る */
  @keyframes v2-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  details[open] > :not(summary) { animation: v2-up .6s var(--v2-e-expo); }

  /* スクロール：並んだ項目が順番に現れる（スクリプトが動くときだけ隠す） */
  html.v2-st [data-stagger] > * { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--v2-e-expo), transform .9s var(--v2-e-expo); transition-delay: calc(min(var(--i, 0), 7) * 70ms); }
  html.v2-st [data-stagger].st-in > * { opacity: 1; transform: none; }

  /* ファーストビューの大きな LUMIRAI：スクロールに合わせて LUMIR と AI がわずかに離れる */
  .v2-wm .wm-l { transform: translateX(calc(var(--wm-p, 0) * -2.5%)); }
  .v2-wm .wm-r { transform: translateX(calc(var(--wm-p, 0) * 6%)); }
}
@media (hover: none) {
  :is(.why > li, .ach2 > li, .v2-prom-i, .sv-stat, .ind-grid > li, .v2-fcard, .ba-list > *, .ns-desk-b)::before { display: none; }
}

/* トップの会社概要の古い指定（番号付きリストの上線・間隔）を打ち消す */
.v2-about ol.why > li { margin: 0; padding: 18px 0 20px; border-top: 0; }
.why-d, .ach2-d, .ach2-v-s { word-break: keep-all; overflow-wrap: anywhere; }

/* ヘッダー：by＋スリーシックスのロゴ（CEO 2026-11-10「文字ではなくロゴ」） */
#header .v2-logo-by { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--v2-latin); letter-spacing: .02em; color: var(--v2-g1); }
#header .v2-logo-by img { display: block; width: auto; height: 12px; }
@media (max-width: 639px) { #header .v2-logo-by { gap: 5px; font-size: 9.5px; } #header .v2-logo-by img { height: 10px; } }
@media (min-width: 768px) and (max-width: 1279px) { #header .v2-logo-by { display: none; } }

/* ---------- 文章の改行ルール（サイト共通・2026-11-10。lumirai-management/rules.md と同じ） ----------
   1. 文節の切れ目でだけ改行：<wbr> は tools/jp_wbr.py（BudouX）で自動で入れる。手で <wbr> を足さない
      main 全体を keep-all にして文節の途中では折り返さない（<wbr>・空白・句読点の後だけ）。長いURL・英語は overflow-wrap で最後の手段として折る
   2. 最後の行に短い語だけ残さない：段落は text-wrap: pretty、見出しは balance（対応していないブラウザは普通の折り返し）。PCの1文1行の文は、読点の後ろで改行する
   3. 1文1行（span.inline-block）は、PCの短い導入文（3文まで）だけ。タブレット・スマホと、4文以上の段落は文をつなげて流す
   4. 1行は本文の大きさ（16px）で全角45字まで（max-width: 45rem。導入文は今の幅＝40字前後のまま）。長すぎる行も読みにくい
   チェック：node tools/linebreak_check.js（短い最終行・行頭の禁則・文節の途中の改行を数える） */
main { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
main .dm { word-break: normal; overflow-wrap: normal; line-break: auto; }   /* 製品デモは高さ固定の絵なので、元の折り返しのまま */
main :is(p, li, dd, dt, summary, figcaption, blockquote) { text-wrap: pretty; }
main :is(h2, h3, h4) { text-wrap: balance; }
/* スマホ（639px以下）の段落は、普通の折り返しにする。iPhone（Safari）の text-wrap: pretty は段落全体の行の長さをそろえようとして、
   行の途中で早めに改行し、短い行が続いて読みにくくなるため（CEO 2026-11-10「モバイル版の改行おかしい」）。見出しの balance はそのまま */
@media (max-width: 639px) {
  main :is(p, li, dd, dt, summary, figcaption, blockquote), main .jp-pretty { text-wrap: wrap; }
}
/* 1文の塊＝class がちょうど "inline-block" の span（tools/jp_wbr.py が扱うもの）。ほかの用途の inline-block には触らない */
@media (max-width: 1023px) {
  main :is(p, li, dd, dt) span[class="inline-block"] { display: inline; }
  main .keep-lines span[class="inline-block"] { display: inline-block; }
}
/* 4文以上の段落は、PCでも文をつなげて流す（同じ段落に1文の塊が4つ以上あるとき） */
main :is(p, li, dd, dt) > span[class="inline-block"]:nth-last-of-type(n+4),
main :is(p, li, dd, dt) > span[class="inline-block"]:nth-last-of-type(n+4) ~ span[class="inline-block"] { display: inline; }
/* PCで1文1行にした文が2行以上になるときは、読点「、」の後ろ（句の切れ目＝span.jp-c）で改行する。句が1行に入らないときだけ文節で折る */
@media (min-width: 1024px) { main span[class="inline-block"] > .jp-c { display: inline-block; } }
main :is(p, li, dd, dt) > span[class="inline-block"]:nth-last-of-type(n+4) .jp-c,
main :is(p, li, dd, dt) > span[class="inline-block"]:nth-last-of-type(n+4) ~ span[class="inline-block"] .jp-c { display: inline; }
:where(main p) { max-width: 45rem; }   /* 詳細度0：個別に決めた幅（もっと狭い指定）があれば、そちらを優先する。今のカードや導入文の幅（全角40字前後）は変えず、それより長すぎる行だけを抑える */