/* ================================================
   合同会社connect 統合サイト — works.css
   /works/ 専用。base.css の後に読み込む。
   home.css / lp.css は読み込まないため、
   /works/ で使う見出しラベル等はここで定義している。

   Breakpoints — 960 / 768 / 480 の3段のみ（base.css 末尾のルール）
   ================================================ */

/* ===== Header（home.css 6-61行・293-302行と同値で複製）
   works は base.css + works.css しか読み込まないため、
   ヘッダーの SNS アイコン・nav 区切り・LPリンクの定義をここに持つ。
   値は home.css と1文字も変えないこと。 ===== */
.header-sns {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
}
.header-sns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
  transition: color 0.2s;
}
.header-sns a:hover { color: var(--color-accent); }
.header-sns svg { width: 20px; height: 20px; fill: currentColor; }
.header-sns .sns-note {
  width: auto;
  padding: 0 2px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ページ内アンカー群（ABOUT〜CONTACT）と別ページ群（WORKS／AIコンサルティング）の区切り
   （設計書A 2-3 提案A） */
.nav-divider {
  width: 1px;
  height: 18px;
  background: var(--border-color);
  flex-shrink: 0;
}
/* WORKS の副題はモバイル（ハンバーガー内）でのみ表示する（設計書A 2-3） */
.nav-works-sub {
  display: none;
  margin-left: var(--space-sm);
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--text-muted);
}

.nav-lp-link a {
  display: inline-block;
  padding: 8px 16px;
  border: 2px solid var(--color-accent);
  border-radius: var(--border-radius-btn);
  color: var(--color-accent);
  font-weight: 700;
  transition: background 0.2s, color 0.2s;
}
.nav-lp-link a:hover {
  background: var(--color-accent);
  color: var(--color-white);
}

@media (max-width: 768px) {
  .header-sns { display: none; }
  .nav.nav--open .nav-list .nav-lp-link a { display: inline-block; }

  /* 縦積みメニュー内では区切りを横線にする（設計書A 2-3） */
  .nav.nav--open .nav-list .nav-divider {
    width: 100%;
    height: 1px;
  }
  .nav.nav--open .nav-list .nav-works-sub { display: inline; }
}

/* ===== セクション見出し（英字ラベル・home.css と同値） ===== */
.sec-en {
  font-family: var(--font-en);
  letter-spacing: 0.14em;
}
.section-label {
  display: block;
  text-align: center;
  font-family: var(--font-en);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}
.sec-lead {
  text-align: center;
  color: var(--text-secondary);
  max-width: 42em;
  margin: calc(-1 * var(--space-lg)) auto var(--space-2xl);
}

/* ================================================
   イントロ
   ================================================ */
.works-intro { background: var(--color-white); text-align: center; }
.works-intro-title {
  font-family: var(--font-en);
  font-size: var(--text-h1);
  letter-spacing: 0.06em;
  line-height: var(--leading-tight);
}
.works-intro-lead {
  max-width: 42em;
  margin: var(--space-lg) auto 0;
  color: var(--text-secondary);
}
.works-updated {
  margin-top: var(--space-lg);
  font-size: var(--text-caption);
  color: var(--text-muted);
}

/* ================================================
   01 NOW
   ================================================ */
.works-now { background: var(--color-gray-100); }
.now-list {
  max-width: 900px;
  margin: 0 auto;
  border-top: 1px solid var(--rule-color);
}
.now-item {
  display: grid;
  grid-template-columns: 1fr 140px 140px;
  gap: var(--space-sm) var(--space-md);
  align-items: baseline;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--rule-color);
}
.now-what { font-size: var(--text-body); font-weight: 500; color: var(--text-primary); }
.now-freq {
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--color-accent);
  font-family: var(--font-en);
  letter-spacing: 0.02em;
}
.now-who { font-size: var(--text-small); color: var(--text-muted); }
.now-note {
  max-width: 900px;
  margin: var(--space-lg) auto 0;
  font-size: var(--text-small);
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .now-item { grid-template-columns: 1fr auto; }
  .now-what { grid-column: 1 / -1; }
  .now-who  { text-align: right; }
}

/* ================================================
   02 WORKS — 事例カード
   ================================================ */
.works-cases { background: var(--color-white); }

.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--space-lg);
  align-items: start;
  /* 3カラム時に span 2 の featured が3列目から始められず穴を残すため、
     後続の compact カードで詰める（同格のカード群なので順序入替は許容） */
  grid-auto-flow: dense;
}

.works-card {
  background: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-hover), transform var(--dur-hover);
}
.works-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }

/* 展開型（その場で開く）。base.css の summary リセットをそのまま利用する */
details.works-card > summary {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
details.works-card > summary:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--border-radius-btn);
}
details.works-card[open] > summary {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: var(--space-md);
}

/* 2段階表示 */
.works-card--featured { grid-column: span 2; }
.works-card--compact  { padding: var(--space-md) var(--space-lg); }
.works-card--compact .works-title { font-size: var(--text-body); }
/* グリッドが1カラムのときに span 2 が溢れないようにする */
@media (max-width: 768px) {
  .works-card--featured { grid-column: auto; }
}

.works-title {
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--text-primary);
}
.works-client { font-size: var(--text-small); color: var(--text-muted); }
.works-toggle { font-size: var(--text-small); align-self: flex-start; }

/* base.css 2-5 の .card-link と同じ挙動を summary に持たせる。
   hover で情報が出るのではなく、常時見えている「詳しく見る」を強めるだけ。 */
.works-toggle::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-hover) var(--ease-out-soft);
}
@media (hover: hover) and (pointer: fine) {
  details.works-card > summary:hover .works-toggle::after { transform: scaleX(1); }
}
details.works-card > summary:focus-visible .works-toggle::after { transform: scaleX(1); }
@media (hover: none) {
  .works-toggle::after { transform: scaleX(0.4); }
}
@media (prefers-reduced-motion: reduce) {
  .works-toggle::after { transition: none; }
}

.works-body { padding-top: var(--space-md); }
.works-body > * + * { margin-top: var(--space-md); }
.works-label {
  display: inline-block;
  margin-right: var(--space-sm);
  font-size: var(--text-caption);
  font-weight: 700;
  font-family: var(--font-en);
  letter-spacing: 0.08em;
  color: var(--color-accent);
}
.works-before, .works-did { font-size: var(--text-body); }
.works-result {
  padding-left: 1.4em;
  font-size: var(--text-small);
  color: var(--text-secondary);
}
.works-result > li { list-style: disc; }
.works-result > li + li { margin-top: var(--space-xs); }

/* ===== メタ情報（カテゴリタグ・ステータス・日付） ===== */
.works-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}
.works-date {
  font-family: var(--font-en);
  font-size: var(--text-caption);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.tag {
  display: inline-block;
  padding: 2px var(--space-sm);
  border: 1px solid var(--border-color);
  border-radius: 2px;
  font-size: var(--text-caption);
  color: var(--text-secondary);
  background: var(--color-white);
  white-space: nowrap;
}
.tag--accent { border-color: var(--color-accent); color: var(--color-accent); }
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-caption);
  font-weight: 700;
}
/* 点は装飾。状態は必ずテキストでも示す（WCAG 1.4.1） */
.status::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.status--running   { color: var(--color-accent); }
.status--done      { color: var(--text-muted); }
.status--tentative { color: var(--color-gray-500); }

/* ===== Before / After（lp.css と同じ見た目を works 用に持つ） ===== */
.time-compare {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.time-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--border-radius);
  min-width: 90px;
}
.time-box--before {
  background: var(--color-gray-100);
  border: 2px solid var(--color-gray-200);
}
.time-box--after {
  background: var(--color-gray-100);
  border: 2px solid var(--color-primary);
}
.time-box-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.time-box-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.time-box-arrow {
  font-size: 16px;
  color: var(--color-gray-500);
  font-weight: 700;
}
.time-box-badge {
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}
/* 率を出さない事例の注記。バッジを外しただけでは条件を満たさないため必須 */
.time-note {
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin-top: 6px;
}

/* ================================================
   03 NUMBERS — 枠数をCSSに書かない
   ================================================ */
.works-numbers { background: var(--color-gray-100); }
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 320px));
  justify-content: center;
  gap: var(--space-xl);
  text-align: center;
}
.numbers-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
}
.numbers-num {
  font-family: var(--font-en);
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
  order: -1;
  margin: 0;
}
.numbers-num--text { font-family: var(--font-ja); font-size: clamp(24px, 3vw, 36px); }
.numbers-unit  { font-size: 0.5em; }
/* 「（概算）」は data-count の span と別要素なので、カウントアップ中も消えない */
.numbers-approx {
  display: inline-block;
  font-family: var(--font-ja);
  font-size: 0.32em;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.numbers-label {
  font-size: var(--text-small);
  color: var(--text-muted);
  font-weight: 500;
  margin: 0;
}
.numbers-note {
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin-top: 4px;
  max-width: 32em;
}
.numbers-closing {
  margin-top: var(--space-2xl);
  font-size: var(--text-small);
  color: var(--text-secondary);
  text-align: center;
}
.numbers-closing a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ================================================
   04 NEXT
   ================================================ */
.works-next { background: var(--color-white); }
.next-block {
  max-width: 680px;
  margin: 0 auto;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--space-xl);
}
.next-title {
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
}
.next-dates > li {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--rule-color);
  font-size: var(--text-body);
}
.next-dates > li:last-child { border-bottom: none; }
.next-round {
  min-width: 4em;
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--color-accent);
}
/* 会場・主催（2026-09-03 追加）。dt/dd を横並びにする */
.next-meta {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.next-meta-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  font-size: var(--text-body);
}
.next-meta dt {
  min-width: 4em;
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--text-muted);
}
.next-meta dd { margin: 0; color: var(--text-primary); }

.next-actions {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}
.next-actions-note {
  font-size: var(--text-caption);
  color: var(--text-muted);
}

.next-note {
  margin-top: var(--space-lg);
  font-size: var(--text-caption);
  color: var(--text-muted);
}

/* ================================================
   05 ACTIVITY — 件数に依存する値を持たない
   ================================================ */
.works-activity { background: var(--color-gray-100); }
.timeline {
  position: relative;
  padding-left: var(--space-xl);
  max-width: 760px;
  margin: 0 auto;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 5px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--color-gray-200);
}
.timeline-item { position: relative; padding-bottom: var(--space-xl); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-xl) + 1px); top: 8px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-white);
}
.timeline-text { font-size: var(--text-small); margin-top: 2px; }
.timeline-text a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur-hover);
}
.timeline-text a:hover { color: var(--color-accent); }
/* 記事タイトルは個別URLを持たないためリンクにしない。
   note へは ACTIVITY 末尾のこの1本だけで導線を作る（WCAG 2.4.4） */
.activity-more {
  max-width: 760px;
  margin: var(--space-xl) auto 0;
  padding-left: var(--space-xl);
  font-size: var(--text-small);
}
.activity-more a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.activity-more a:hover { color: var(--text-primary); }

/* ================================================
   CTA
   ================================================ */
.works-cta { background: var(--color-white); text-align: center; }
.works-cta-lead {
  max-width: 42em;
  margin: 0 auto;
  color: var(--text-secondary);
}
.works-cta-actions {
  margin-top: var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
}
.works-cta-sub {
  font-size: var(--text-small);
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.works-cta-sub:hover { color: var(--text-primary); }

@media (max-width: 768px) {
  .works-cta-actions { flex-direction: column; gap: var(--space-md); }
  .works-cta-actions .btn { width: 100%; justify-content: center; }
}

/* ================================================
   Windows ハイコントラスト（強制カラーモード）
   ================================================ */
@media (forced-colors: active) {
  .time-box { border: 1px solid CanvasText; }
  .works-card { border: 1px solid CanvasText; }
}