/* ==========================================================================
   サン美術印刷株式会社 - ペーパー・クラフト・モダン (白ベース・ざらざら質感)
   Tone: Editorial White / Fine Paper Texture / Brass & Deep Charcoal
   ========================================================================== */

:root {
  --bg-dark: #f6f5f0;           /* 温かみのある高級用紙を思わせるオフホワイト */
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #faf9f5;
  --text-primary: #1a1a1a;
  --text-secondary: #66635c;
  
  --accent-neon: #ff3c00;
  --accent-brass: #b8860b;
  /* 文字に使う金色（257-27章）。#b8860bは白・生成りの背景とのコントラスト比が約3:1で、読みやすさの基準（WCAG AA 4.5:1）に
     届かないため、文字だけ濃くした。暗い背景の区画では下の方で明るい金色（--accent-brass）に戻している */
  --accent-brass-text: #86620a;
  --accent-glow: rgba(184, 134, 11, 0.15);

  /* コーポレートカラー（C70 Y100 K50 相当）。ブラスに次ぐセカンドアクセントとして、
     認証・企業情報・サイト全体のブランド区切り線などに限定して使用する */
  --accent-corporate: #268000;
  --accent-corporate-glow: rgba(38, 128, 0, 0.15);

  --border-color: rgba(0, 0, 0, 0.08);
  --border-hover: rgba(184, 134, 11, 0.4);

  /* 制作工程セクション（.process-rail）のスマホ幅専用背景。「PAGE_ID」
     バッジ（.hero-meta-badge）と同じ色にしてほしいとの要望を受け、
     フラットな色ではなくバッジと全く同じ手法（黒3%のオーバーレイ）を
     採用し、どのページ背景の上でも確実に同じ見え方になるようにしている
     （2026-09-25） */
  --bg-process-light: rgba(0, 0, 0, 0.03);
  
  --font-sans: 'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --container-max: 1320px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-dark);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

body {
  background-color: var(--bg-dark);
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(184, 134, 11, 0.03) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.035'/%3E%3C/svg%3E");
  color: var(--text-primary);
  line-height: 1.8;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* スクロールプログレスバー */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  /* ブラス→コーポレートグリーン。サイト内で使っていないネオンオレンジではなく、
     既存の2アクセントカラーで構成する */
  background: linear-gradient(90deg, var(--accent-brass), var(--accent-corporate));
  /* 幅はJSで transform: scaleX() により変える（widthを毎回書き換えるとレイアウト再計算が走るため） */
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  z-index: 10000;
  box-shadow: 0 0 10px rgba(184, 134, 11, 0.3);
}

/* 没入型ヘッダー */
.site-header {
  position: fixed;
  top: 0; left: 0; width: 100%;
  background: rgba(246, 245, 240, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-color);
  z-index: 1000;
  transition: all 0.4s ease;
}

/* コーポレートカラーのブランドライン（ヘッダー最上部） */
.site-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%;
  height: 3px;
  background: var(--accent-corporate);
}

.header-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.25rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
  min-width: 0; /* flexアイテムのデフォルト(min-width:auto)によりコンテンツ幅で縮まなくなるのを防ぐ */
}

.header-logo-img {
  height: 38px;
  width: auto;
  vertical-align: middle;
  filter: contrast(1.1);
}

.logo-sub-tag {
  color: var(--accent-brass-text);
  font-size: 0.8rem;
  font-family: var(--font-mono);
  letter-spacing: 0.15em; /* 文字間隔を全ページで統一する値 */
  border-left: 1px solid var(--border-color);
  padding-left: 0.75rem;
}

.site-nav ul {
  display: flex;
  list-style: none;
  align-items: center;
  gap: 0.6rem;
}

.site-nav a {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.nav-num {
  color: var(--accent-brass-text);
  font-size: 0.65rem;
}

.site-nav a:hover {
  color: var(--text-primary);
  text-shadow: 0 0 10px rgba(184,134,11,0.2);
}

.nav-cta-btn {
  background: rgba(184, 134, 11, 0.08);
  border: 1px solid var(--accent-brass);
  padding: 0.5rem 1rem !important;
  color: var(--text-primary) !important;
  border-radius: 4px;
}

.nav-cta-btn:hover {
  background: var(--accent-brass) !important;
  color: #fff !important;
  box-shadow: 0 0 20px var(--accent-glow) !important;
}

/* ヒーローセクション */
.hero-cinematic {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem 2rem 4rem;
  overflow: hidden;
}

.hero-bg-canvas {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.2;
}

.orb-1 {
  width: 500px; height: 500px;
  background: var(--accent-brass);
  top: 15%; right: 10%;
  animation: floatOrb 12s ease-in-out infinite alternate;
}

.orb-2 {
  width: 450px; height: 450px;
  background: #d4a373;
  bottom: 10%; left: 10%;
  animation: floatOrb 10s ease-in-out infinite alternate-reverse;
}

.orb-3 {
  width: 320px; height: 320px;
  background: var(--accent-corporate);
  opacity: 0.14;
  top: 55%; left: 25%;
  animation: floatOrb 14s ease-in-out infinite alternate;
}

@keyframes floatOrb {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -30px) scale(1.08); }
}

.hero-content {
  max-width: var(--container-max);
  width: 100%;
  position: relative;
  z-index: 2;
  margin-top: 2rem;
}

.hero-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border-color);
  padding: 0.5rem 1rem;
  border-radius: 30px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  backdrop-filter: blur(10px);
}

.pulsing-dot {
  width: 8px; height: 8px;
  background-color: var(--accent-brass);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent-brass);
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(184, 134, 11, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(184, 134, 11, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(184, 134, 11, 0); }
}

.hero-main-title {
  /* 元はclamp(2.8rem, 5.5vw, 5rem)。TOPページの他セクションを詰めてきたのに対し
     H1だけ突出して大きく感じるとの指摘を受け、最大値を5rem(80px)→4.4rem(70.4px)に、
     下限・vw係数も同じ比率で縮小した */
  font-size: clamp(2.5rem, 4.9vw, 4.4rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 2rem;
  color: var(--text-primary);
}

.subpage .hero-main-title {
  /* 「私たちについて」「できること」等、短い単語だけのページタイトルには
     TOPページのキャッチコピーと同じ比率(0.88)追従では大きすぎるとの指摘を受け、
     独立して縮小した値に変更。あくまで一般的なページタイトルの見え方を優先する。
     見出し階層の逆転はH2（.section-heading）側を縮小して解消した */
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
}

.title-line {
  display: block;
}

/* 「守るものと、」で改行させる制御用<br>。PC・タブレット幅は1行に収まるため非表示にし、
   自動折り返しに任せると「変」だけが孤立するスマホ幅でのみ意味の区切りで改行させる */
.hero-title-break {
  display: none;
}

.highlight-gradient {
  background: linear-gradient(135deg, var(--text-primary) 30%, var(--accent-brass) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- ヒーローセクション リード文の視認性強化（シャドウなし版） --- */
.hero-lead-text {
  font-size: 1.15rem;
  line-height: 1.9;
  max-width: 850px;
  margin-bottom: 3rem;

  /* [1. 色と太さ] メインの濃いチャコールにして太さをMediumに */
  color: #3d3a36;
  font-weight: 400; /* 太さ500のフォント読み込みをやめたため400に（257-23章） */

  /* [2. スタイリッシュな背景補正] 文字の後ろだけに薄い背景色を馴染ませる */
  background: linear-gradient(
    90deg, 
    rgba(246, 245, 240, 0.4) 0%, 
    rgba(246, 245, 240, 0.2) 70%, 
    transparent 100%
  );
  padding: 1.25rem 1.5rem;
  border-left: 2px solid var(--accent-brass); /* デザインのアクセント線 */
  border-radius: 0 8px 8px 0;
  backdrop-filter: blur(8px); /* 背後の動画をほんのりぼかす */
}

.hero-action-group {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.btn-matrix {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 2.25rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-matrix-primary {
  background: var(--text-primary);
  color: #fff;
  font-weight: 700;
  border: 1px solid var(--text-primary);
}

.btn-matrix-primary:hover {
  background: var(--accent-brass);
  border-color: var(--accent-brass);
  box-shadow: 0 10px 25px rgba(184,134,11,0.25);
  transform: translateY(-3px);
}

.btn-matrix-glow {
  background: rgba(184, 134, 11, 0.1);
  color: var(--text-primary);
  border: 1px solid var(--accent-brass);
}

.btn-matrix-glow:hover {
  background: var(--accent-brass);
  color: #fff;
  box-shadow: 0 10px 25px var(--accent-glow);
  transform: translateY(-3px);
}

.btn-matrix-outline {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-matrix-outline:hover {
  border-color: var(--accent-brass);
  background: rgba(184,134,11,0.05);
  transform: translateY(-3px);
}

.hero-scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--text-secondary);
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--accent-brass), transparent);
  animation: scrollAnim 2s infinite;
}

@keyframes scrollAnim {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.1% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* メトリクス（実績セクション） */
.metrics-section {
  position: relative;
  z-index: 3;
  padding: 0 2rem 5rem;
  margin-top: -3rem;
}

/* スマホ幅では統計セクションの下paddingが直後の.main-containerの上paddingと合計され
   何もない空白として積み重なり間延びして見えるため圧縮する（.main-container側の
   対応する調整はその定義の直後に別途記載） */
@media (max-width: 600px) {
  .metrics-section {
    padding-bottom: 2rem;
  }
}

.metrics-container {
  max-width: var(--container-max);
  margin: 0 auto;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.metric-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 0;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: none;
}

.metric-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.06);
  background: var(--bg-card-hover);
}

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.metric-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--accent-brass-text);
  background: rgba(184, 134, 11, 0.08);
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
}

.metric-num-code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.metric-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}

.metric-value-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin: 0.5rem 0 1rem;
}

.metric-number {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.metric-unit {
  font-size: 1.1rem;
  color: var(--accent-brass-text);
  font-weight: 700;
}

.metric-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* スマホ幅では.metric-card（hero直下の統計3枚）もPCサイズの余白・文字サイズのまま
   縦積みになり間延びするため、.service-list-card（できることカード）と同じ考え方で圧縮する。
   カード2・3のOSAKA⇄TOKYO／一気通貫体制はインラインstyleでfont-sizeを直接指定しているため、
   ここだけ!importantで上書きする */
@media (max-width: 600px) {
  .metrics-grid {
    gap: 1.25rem;
  }

  .metric-card {
    padding: 1.75rem;
  }

  .metric-header {
    margin-bottom: 1rem;
  }

  .metric-title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }

  .metric-value-wrap {
    margin: 0.25rem 0 0.75rem !important;
    font-size: 1.75rem !important;
  }

  .metric-number {
    font-size: 2.2rem;
  }

  .metric-desc {
    font-size: 0.9rem;
    line-height: 1.6;
  }
}

/* メインコンテナ */
.main-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 4rem 2rem;
}

/* TOPページ（index.html）以外は<main>にpadding-top:2remのインラインstyleがあり常に
   優先されるため、ここを詰めてもindex.html（統計セクション直後）にしか影響しない。
   サブページ側は下の@media(max-width:768px) .subpage .main-containerで
   !important上書きしている（hero-cinematicのpadding-bottom調整と同じ
   ブレークポイントに揃えるため、あえてこの600px側には追加していない） */
@media (max-width: 600px) {
  .main-container {
    padding-top: 1.5rem;
  }
}

.section-block {
  margin-bottom: 7rem;
}

.section-heading-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1.5rem;
}

/* スマホ幅ではセクション間の余白がPCそのままだと間延びして見えるため、
   全ページ共通で縦の余白を圧縮する（見出し自体のサイズ・階層は変えない） */
@media (max-width: 600px) {
  .section-block {
    margin-bottom: 4rem;
  }

  .section-heading-wrapper {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
  }
}

.section-sub-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent-brass-text);
  letter-spacing: 0.15em;
  display: block;
  margin-bottom: 0.5rem;
}

.section-heading {
  /* 旧clamp(2rem,3.5vw,2.75rem)は本文(0.95〜1.05rem)との差が大きすぎ、
     「モノづくりに、こだわりと誇りを。」のような一文見出しで直後の本文が
     頭に入ってこないとの指摘を受けて縮小。H1（サブページ：clamp(1.75rem,
     2.8vw,2.5rem)）より常に一回り小さく、かつ本文とのギャップも詰めている */
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.cyber-link {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-brass-text);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: 0.05em;
  text-underline-offset: 0.2em;
}

.cyber-link:hover {
  color: var(--text-primary);
  gap: 0.8rem;
  text-decoration: underline;
}

/* 画像を伴わない純粋なテキストブロック（会社概要・対応範囲・プライバシーポリシー等）:
   角丸カード（.bento-card）の箱をやめ、pillar-row/history-timelineと同じ
   「罫線のみ」のエディトリアルな見た目に統一。画像とセットのブロック（ごあいさつ等）や
   フォームを含むブロック、フィーチャーグリッドのタイル（サービス一覧の5カード等）は対象外とし、
   .bento-cardのまま維持している。
   デフォルトでは罫線なし（直前の.section-heading-wrapperの下線をそのまま区切りとして使う）。
   同じセクション内で2つ目以降が続く場合や、見出しを持たない単独のCTAブロックには
   .has-ruleを追加し、上部に罫線を出す */
.text-block-plain {
  padding-top: 0;
}

.text-block-plain.has-rule {
  border-top: 1px solid var(--border-color);
  padding-top: 2rem;
}

/* 「できること」各サービス詳細ページの「対応範囲」ブロック。ページの主要な
   訴求内容であるにも関わらず、周囲の本文と見分けがつかない地味な見た目
   だったため、左のアクセント線＋背景で視覚的に目立たせる（39章で
   .text-block-plainから一律に外した「箱」の意匠を、このブロックに限って
   部分的に復活させたもの。.text-block-plainの他の用途——about.htmlの
   ISO声明文等——には影響しない） */
.coverage-highlight {
  background: var(--bg-card);
  border-left: 4px solid var(--accent-brass);
  padding: 2rem 2.25rem;
}

@media (max-width: 600px) {
  .coverage-highlight {
    padding: 1.5rem 1.25rem;
  }
}

/* 「サン美術印刷という選択」（TOPページ限定）: カード然としたグリッドをやめ、
   雑誌の特集ページのような版組（アウトライン数字＋罫線区切りの横並び行）にして
   直後の「できること」グリッドと質感を変えている。他ページの.bento-card等には影響しない */
.pillar-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(110px, 200px) 1fr;
  align-items: start;
  gap: 2rem;
  padding: 1.85rem 0;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.3s ease;
}

.pillar-row:hover {
  background: linear-gradient(90deg, rgba(184, 134, 11, 0.045), transparent 70%);
}

.pillar-row-number {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(184, 134, 11, 0.4);
  transition: color 0.35s ease;
}

.pillar-row:hover .pillar-row-number {
  color: rgba(184, 134, 11, 0.1);
}

.pillar-row-trust .pillar-row-number {
  -webkit-text-stroke-color: rgba(38, 128, 0, 0.45);
}

.pillar-row-trust:hover .pillar-row-number {
  color: rgba(38, 128, 0, 0.12);
}

.pillar-row-trust:hover {
  background: linear-gradient(90deg, rgba(38, 128, 0, 0.045), transparent 70%);
}

.pillar-row-body h3 {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 800;
  margin-bottom: 0.9rem;
  color: var(--text-primary);
}

.pillar-row-body p {
  color: var(--text-secondary);
  max-width: 640px;
  line-height: 1.9;
  font-size: 1rem;
}

@media (max-width: 720px) {
  .pillar-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 1.5rem 0;
  }
  .pillar-row-number {
    font-size: 2.25rem;
  }
  .pillar-row-body h3 {
    margin-bottom: 0.6rem;
  }
  .pillar-row-body p {
    line-height: 1.7;
  }
}

/* 「沿革」（about.html）: TOPページの版組み表現に寄せ、素のtableをやめて
   罫線＋ドットの縦タイムラインにした。30件と件数が多いため、ピラー行のような
   巨大アウトライン数字は使わず、年号を強調したコンパクトな行に留めている */
.history-timeline {
  border-top: 1px solid var(--border-color);
}

.history-entry {
  position: relative;
  display: grid;
  grid-template-columns: 84px 20px 1fr;
  gap: 1.25rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--border-color);
}

.history-entry-date {
  font-family: var(--font-mono);
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  padding-top: 0.1rem;
}

.history-entry-year {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
}

.history-entry-month {
  font-size: 0.72rem;
  color: var(--accent-brass-text);
  letter-spacing: 0.05em;
}

.history-entry-rail {
  position: relative;
  display: flex;
  justify-content: center;
}

.history-entry-rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -1.15rem;
  left: 50%;
  width: 1px;
  background: var(--border-color);
}

.history-entry:last-child .history-entry-rail::before {
  display: none;
}

.history-entry-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-brass);
  margin-top: 0.45rem;
  position: relative;
  z-index: 1;
}

.history-entry-body {
  color: var(--text-secondary);
  line-height: 1.85;
  font-size: 0.95rem;
  padding-top: 0.1rem;
}

@media (max-width: 600px) {
  .history-entry {
    grid-template-columns: 64px 16px 1fr;
    gap: 0.85rem;
  }
  .history-entry-year { font-size: 1rem; }
}

/* 角丸＋ふわっとした影の「ありがちなSaaSカード」然とした見た目が、works.htmlのスクエア＋トンボや
   pillar-rowの罫線ベースの版組みと並ぶと浮いて見えるという指摘を受け、サイト全体で使うこの基本カードも
   スクエア角＋細い罫線のフラットな見た目に統一した（.bento-cardは会社概要・サービス詳細・
   お問い合わせ等ほぼ全ページで使用する共通クラスのため、ここを直すだけで全体に波及する） */
.bento-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 0;
  padding: 3rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: none;
}

.bento-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.06);
  background: var(--bg-card-hover);
}

.bento-number {
  font-family: var(--font-mono);
  font-size: 3rem;
  font-weight: 800;
  color: rgba(184, 134, 11, 0.15);
  line-height: 1;
  margin-bottom: 1.5rem;
}

/* 「できること」カード: サービス種別が一目でわかるようアイコンを連番と並べる */
.bento-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.bento-head .bento-number {
  margin-bottom: 0;
}

.bento-icon {
  width: 32px;
  height: 32px;
  color: var(--accent-brass-text);
  flex-shrink: 0;
}

.bento-content h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.bento-content p {
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.8;
}

/* 保有設備紹介（equipment.html）: bento-cardに機器写真スロットを追加するモディファイア。
   カード自体の見た目（角のない箱・アイコン・番号）は変更せず、上部に写真エリアを追加するのみ。
   写真確定までは他ページの img-placeholder と同じダーク＋トンボ意匠でプレースホルダー表示する。 */
.bento-card-photo {
  padding-top: 0;
}

/* スマホ幅では.bento-card-photo系（設備紹介・採用インタビュー・サンプル帳の素材カード等）と
   service-detail-card/location-card（製品紹介・アクセス）がPCサイズの余白のまま
   縦積みになり間延びするため圧縮する。.bento-photoの左右bleed量（margin）は
   .bento-card-photoの左右paddingと必ず一致させること（一致しないとabout.htmlで
   実際に発生したのと同じ「写真の端に余白が残る／はみ出す」不具合になる） */
@media (max-width: 600px) {
  .bento-card-photo {
    padding: 1.5rem;
    padding-top: 0;
  }

  .bento-photo {
    height: 160px;
    margin: 0 -1.5rem 1.25rem;
  }

  .service-detail-card,
  .location-card {
    padding: 1.75rem;
  }

  .bento-content h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }

  .bento-content p {
    font-size: 0.92rem;
    line-height: 1.7;
  }
}

.bento-photo {
  position: relative;
  height: 200px;
  margin: 0 -3rem 1.75rem;
  background: #18140f;
}

.bento-photo .img-placeholder {
  height: 100%;
  margin: 0;
  background: transparent;
  color: rgba(246, 245, 240, 0.45);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
}

.bento-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 「できることページ」一覧（services.html）: TOPページのカードと配色・意匠を揃える
   （一覧性を優先しベルト化はせず、静的グリッドのまま上部罫線の交互配色＋背景アイコンのみ適用） */
.service-list-card {
  border-top: 3px solid var(--accent-brass);
}

.service-list-card:nth-child(even) {
  border-top-color: var(--accent-corporate);
}

.service-list-card:nth-child(even):hover {
  box-shadow: 0 20px 40px var(--accent-corporate-glow);
}

.service-list-icon-bg {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 130px;
  height: 130px;
  color: rgba(184, 134, 11, 0.07);
  pointer-events: none;
}

.service-list-card:nth-child(even) .service-list-icon-bg {
  color: var(--accent-corporate-glow);
}

/* スマホ幅では.service-list-card（TOP「できること」/services.html一覧）が
   6枚フルサイズのまま縦積みになりセクションが間延びするため、余白と文字サイズを圧縮する。
   PC・タブレット（.service-square-cardのaspect-ratio適用幅）には影響しない */
@media (max-width: 600px) {
  .service-list-card.bento-card {
    padding: 1.75rem;
  }

  .service-list-card .bento-head {
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .service-list-card .bento-number {
    font-size: 1.75rem;
  }

  .service-list-card .bento-icon {
    width: 26px;
    height: 26px;
  }

  .service-list-card .bento-content h3 {
    font-size: 1.2rem;
    margin-bottom: 0.6rem;
  }

  .service-list-card .bento-content p {
    font-size: 0.92rem;
    line-height: 1.65;
  }

  .service-list-icon-bg {
    width: 90px;
    height: 90px;
  }
}

/* 制作実績グリッド */
.works-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

@media (max-width: 1024px) {
  .works-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .works-grid-3 {
    grid-template-columns: 1fr;
  }
}

.work-card-modern {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.work-card-modern:hover {
  transform: translateY(-8px);
  border-color: var(--border-hover);
  box-shadow: 0 20px 40px rgba(184, 134, 11, 0.12);
}

.work-img-container {
  position: relative;
  height: 260px;
  overflow: hidden;
  /* 合成写真（複数カットを並べたもの）はアスペクト比が画像ごとにバラバラで、
     object-fit:coverで無理に敷き詰めると撮影スタジオの背景グレーが中途半端に写り込んで見えるため、
     containで画像全体を見せ、余白は他の暗転セクション（制作実績バンド・フッターCTA等）と
     同じダークトーンで意図的に見せる */
  background: #18140f;
}

.work-image-cinematic {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
  filter: brightness(0.95);
}

/* ホバー時のズーム＋色収差（クロマティックアベレーション）風エッジ */
.work-card-modern:hover .work-image-cinematic {
  transform: scale(1.08);
  filter: brightness(1.02)
    drop-shadow(2px 0 0 rgba(255, 45, 60, 0.4))
    drop-shadow(-2px 0 0 rgba(0, 200, 255, 0.35));
}

/* 実績サムネイルのライトボックス（works.html全カード・TOPページの制作実績ピックアップで共用）:
   カードのサムネイルは合成モンタージュ画像から1点を切り抜いたクリーンな1枚（img/works/thumbs/配下）を表示し、
   クリックすると元の合成画像（複数カット併載）をモーダルで拡大表示する */
.work-img-trigger {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}

.lightbox-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
}

.lightbox-modal.is-open {
  display: flex;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 13, 10, 0.86);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.lightbox-dialog {
  position: relative;
  max-width: min(92vw, 1100px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: lightboxPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes lightboxPopIn {
  0% { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

.lightbox-img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  background: #fff;
}

.lightbox-caption {
  color: #f6f5f0;
  font-size: 0.9rem;
  margin-top: 1.25rem;
  text-align: center;
  max-width: 640px;
  line-height: 1.7;
}

.lightbox-close {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid rgba(246, 245, 240, 0.3);
  background: rgba(0, 0, 0, 0.4);
  color: #f6f5f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  z-index: 2001;
  transition: all 0.2s ease;
}

.lightbox-close:hover {
  background: var(--accent-brass);
  border-color: var(--accent-brass);
}

@media (max-width: 600px) {
  .lightbox-modal { padding: 4.5rem 1rem 2rem; }
}

/* サービス詳細ページ（services-*.html）の「関連する実績」カード:
   TOPページの制作実績タイル（スクエア角＋トンボ）と質感を揃える。
   .work-card-modern自体は他ページでも使う共通クラスのため角丸のままにし、
   この修飾クラスを重ねたときだけ角を落とす。トンボ用の.work-tile-regはTOPページと共用 */
.work-card-square,
.work-card-square .work-img-container {
  border-radius: 0;
}

.work-overlay-tag {
  position: absolute;
  top: 1rem; right: 1rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border-color);
  padding: 0.3rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--accent-brass-text);
  backdrop-filter: blur(8px);
  border-radius: 4px;
}

.work-info {
  padding: 2rem;
}

/* スマホ幅では.work-card-modern（実績一覧・コラム一覧・サンプル帳/サービス詳細の
   関連実績カード等で共通利用）の情報部がPCサイズの余白のまま並ぶため圧縮する */
@media (max-width: 600px) {
  .work-info {
    padding: 1.25rem;
  }
}

.work-info h4 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.work-info p {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* works.htmlの実績一覧カードのみ：工程（process）を単なる区切りテキストではなく
   クリック可能なタグチップにして絞り込める（news.htmlの.js-tag-filterと同じ
   汎用の仕組みを再利用。既に表示していた情報をそのままチップ化するだけなので、
   data/works.json側にtagsフィールドを新設する必要はない） */
.work-process-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.work-tag-chip {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent-brass-text);
  background: rgba(184, 134, 11, 0.08);
  border: 1px solid rgba(184, 134, 11, 0.35);
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.work-tag-chip:hover {
  color: #fff;
  background: var(--accent-brass);
  border-color: var(--accent-brass);
}
.work-tag-chip.is-active {
  color: #fff;
  background: var(--accent-brass);
  border-color: var(--accent-brass);
}

/* 制作実績（TOPページ限定）: ダーク全幅バンド + トンボ意匠
   他セクション（3本柱・できること等）と同じ白背景・角丸カードが続くと単調なため、
   このセクションだけ反転背景・スクエアな枠・印刷のトンボ風マークで質感を変えている。
   .work-card-modern / .works-grid-3 は works.html 等で共通利用しているため触れず、専用クラスで実装する。 */
.works-showcase-band {
  /* 暗い背景のため、文字の金色は明るい方（--accent-brass）に戻す（257-27章） */
  --accent-brass-text: var(--accent-brass);
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 7rem;
  margin-bottom: 7rem;
  background: #18140f;
  padding: 6rem 2rem;
}

/* スマホ幅では制作実績3枚がPCサイズの余白のまま縦積みになり間延びするため、
   「できること」「統計」カード群と同じ考え方で余白を圧縮する（横スクロール化はしない。
   実装ログ上、6枚以上の「できること」で横スクロール（ベルト形式）を2回試みて
   可視率のズレ・自動スクロール不具合が再発し撤去した経緯があり、3枚のこの枠のために
   同じ不安定さを持ち込む価値はないと判断） */
@media (max-width: 600px) {
  .works-showcase-band {
    margin-top: 4rem;
    margin-bottom: 4rem;
    padding: 3.5rem 1.25rem;
  }

  .work-tile-info {
    padding: 1.25rem 1.25rem 1.5rem;
  }

  .work-tile-info p {
    margin-bottom: 0.75rem;
  }
}

.works-showcase-inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.works-showcase-heading {
  border-bottom-color: rgba(246, 245, 240, 0.14);
}

.works-showcase-heading .section-heading {
  color: #f6f5f0;
}

.works-showcase-heading .cyber-link {
  color: var(--accent-brass-text);
}

.works-showcase-heading .cyber-link:hover {
  color: #f6f5f0;
}

.works-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(246, 245, 240, 0.12);
}

@media (max-width: 1024px) {
  .works-showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .works-showcase-grid {
    grid-template-columns: 1fr;
  }
}

.work-tile {
  background: #18140f;
}

.work-tile-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.work-tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.82) saturate(1.05);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}

.work-tile:hover .work-tile-img {
  transform: scale(1.06);
  filter: brightness(0.95) saturate(1.1);
}

.work-tile-case {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  color: var(--accent-brass-text);
  background: rgba(24, 20, 15, 0.72);
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(184, 134, 11, 0.4);
}

.work-tile-cat {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: #f6f5f0;
}

/* トンボ（印刷のレジストレーションマーク）風の角飾り */
.work-tile-reg {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.work-tile-reg::before,
.work-tile-reg::after {
  content: "";
  position: absolute;
  background: var(--accent-brass);
}

.work-tile-reg::before {
  width: 100%;
  height: 0.5px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.work-tile-reg::after {
  height: 100%;
  width: 0.5px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.work-tile-reg.tl { top: 10px; left: 10px; }
.work-tile-reg.tr { top: 10px; right: 10px; }
.work-tile-reg.bl { bottom: 10px; left: 10px; }
.work-tile-reg.br { bottom: 10px; right: 10px; }

/* ===== 実績ページ（works.html）限定の演出（2026-09-24）
   .works-showcase-entertainment でスコープし、column.html等の他ページで
   同じ .work-card-modern / .work-tile-reg を使う箇所には影響させない。
   当初は①版ズレ→ジャストピント演出も実装していたが、「見ていると酔う」との
   指摘によりPC含めて完全に削除した（2026-09-24）。③はスマホで見ると「酔う」
   「重くなる」との指摘があったため、PC幅（769px以上）限定にしている。
   ④のFLIPアニメーションはscript/main.js側でスマホ判定して無効化。 */
@media (min-width: 769px) {
  /* ③カーソル追従の傾き＋光沢スイープ（そもそもマウスカーソル前提の演出のため
     PC限定は自然。スマホではJS側もリスナー自体を登録しない） */
  .works-showcase-entertainment .work-img-container {
    transform: perspective(900px) rotateX(var(--tilt-rx, 0deg)) rotateY(var(--tilt-ry, 0deg));
    transition: transform 0.3s ease;
    will-change: transform;
  }
  .works-showcase-entertainment .work-img-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.32) 50%, transparent 58%);
    transform: translateX(-130%);
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 2;
  }
  .works-showcase-entertainment .work-card-modern:hover .work-img-container::after {
    animation: worksGlossSweep 0.9s ease forwards;
  }
  @keyframes worksGlossSweep {
    from { transform: translateX(-130%); }
    to { transform: translateX(130%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .works-showcase-entertainment .work-img-container {
      transition: none;
    }
    .works-showcase-entertainment .work-card-modern:hover .work-img-container::after {
      animation: none;
    }
  }
}

.work-tile-info {
  padding: 1.75rem 1.5rem 2rem;
  border-top: 1px solid rgba(246, 245, 240, 0.08);
}

.work-tile-info h4 {
  color: #f6f5f0;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.work-tile-info p {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: rgba(246, 245, 240, 0.55);
  margin-bottom: 1rem;
}

.work-tile-info .cyber-link {
  color: var(--accent-brass-text);
}

.work-tile-info .cyber-link:hover {
  color: #f6f5f0;
}

/* 会社概要＆採用へのデュアル導線（TOPページ限定）: 角丸カードをやめ、
   全幅の写真ディプティック（2分割スプレッド）にする。直前の制作実績（暗転タイル）・
   直後のフッターCTA（単色の暗い帯）とも質感を変え、実際の現場動画から抜き出した
   静止画（社屋 img/phot2.jpg ／ 採用 img/recruit_hands.jpg＝sunart50th.mp4の1080p原本から切り出し）を使用している。
   footer-cta-sectionと同じく<main>の外に置かれているため、全幅ブレイクアウトのハックは不要 */
/* サービスページの「関連する実績」欄：公開中の実績が0件になった時（管理画面で最後の1件を非公開に
   した時など）は見出しごと隠す。実績が公開されれば自動で表示される（257-30章） */
.section-block:has(> .works-grid-3):not(:has(.work-card-modern)) {
  display: none;
}

.diptych-band {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
  .diptych-band {
    grid-template-columns: 1fr;
  }
}

.diptych-panel {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 320px;
  overflow: hidden;
  padding: 3rem;
}

.diptych-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.diptych-panel:hover .diptych-bg-img {
  transform: scale(1.06);
}

.diptych-tint {
  position: absolute;
  inset: 0;
}

/* 以前は下半分を暗くするグラデーション＋金色（採用は緑色）の色かぶりを重ね、画像（動画から切り出した
   ぶれ・色あせのある場面）と合わせてレトロな見え方にしていたが、「しみったれて見える。明るく清潔感の
   あるナショナル企業感を」「もっと明るく、未来・希望感を」とのユーザー指摘で、「サン美術印刷について」の
   画像を社屋の外観に差し替え、写真全体にはほぼ影をかけず（下端にうっすらだけ）、文字の部分にだけ
   半透明の紺色の板（.diptych-content の背景）を敷いて読みやすさを確保する形にした（257-25章）。
   社屋の写真は明るさ・彩度を少し上げて空の青を鮮やかに（静止画のため描画負荷はほぼ無い） */
.diptych-panel-about .diptych-tint,
.diptych-panel-recruit .diptych-tint {
  background: linear-gradient(180deg, rgba(12, 34, 70, 0) 55%, rgba(12, 34, 70, 0.18) 100%);
}
.diptych-panel-about .diptych-bg-img {
  filter: brightness(1.08) saturate(1.15);
}

/* 採用：刷り上がった印刷物を手に取って確認する手元（sunart50th.mp4 の1080p原本から切り出し。
   退職者が多いため顔で個人が分かる場面は使わない方針。257-29章）。手が画像の左側にあるため、
   文字の板は右下に寄せ、写真は左寄りで切り取る */
.diptych-panel-recruit .diptych-bg-img {
  object-position: 20% 50%;
}
@media (min-width: 721px) {
  .diptych-panel-recruit {
    justify-content: flex-end;
  }
}

.diptych-content {
  /* 紺色の板の上なので、文字の金色は明るい方に戻す（257-27章） */
  --accent-brass-text: var(--accent-brass);
  position: relative;
  z-index: 1;
  max-width: 500px;
  background: rgba(12, 34, 70, 0.62);
  padding: 2rem 2.25rem;
  border-radius: 4px;
}

.diptych-content .section-sub-tag {
  color: var(--accent-brass-text);
}

.diptych-panel-recruit .diptych-content .section-sub-tag {
  color: #8fd16f;
}

.diptych-content h3 {
  color: #f6f5f0;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 800;
  margin: 0.5rem 0 1rem;
}

.diptych-content p {
  color: rgba(246, 245, 240, 0.86);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.diptych-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: #f6f5f0;
  border: 1px solid rgba(246, 245, 240, 0.4);
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  transition: all 0.3s ease;
}

.diptych-panel:hover .diptych-cta {
  background: rgba(246, 245, 240, 0.12);
  border-color: var(--accent-brass);
}

.diptych-panel-recruit:hover .diptych-cta {
  border-color: #8fd16f;
}

@media (max-width: 720px) {
  /* スマホは文字の板が写真の大部分を覆うため、パネルを縦に伸ばし板を下に寄せて上部で写真を見せる */
  .diptych-panel {
    min-height: 560px;
    padding: 1.5rem;
  }
  .diptych-content {
    padding: 1.5rem 1.4rem;
  }
  /* 採用：縦長では手と指先が板の上（写真の上部）に来るよう、少し左寄りで切り取る */
  .diptych-panel-recruit .diptych-bg-img {
    object-position: 22% 50%;
  }
}

/* フッター */
.site-footer {
  background: #eceae1;
  border-top: 1px solid var(--border-color);
  padding: 6rem 2rem 2rem;
  position: relative;
}

/* コーポレートカラーのブランドライン（フッター最上部） */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%;
  height: 3px;
  background: var(--accent-corporate);
}

.footer-container {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 4rem;
  margin-bottom: 4rem;
}

.footer-logo-img {
  height: 38px;
  width: auto;
  margin-bottom: 1.5rem;
}

.footer-nav ul {
  list-style: none;
}

.footer-nav li {
  margin-bottom: 1rem;
}

.footer-nav a {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}

.footer-nav a:hover {
  color: var(--accent-brass-text);
  padding-left: 5px;
}

.copyright {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(0,0,0,0.06);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
  letter-spacing: 0.1em;
}

/* スマホ幅ではフッターの余白・リンク一覧がPCサイズのまま長く伸びるため圧縮する。
   footer-navには section-sub-tag でMENU/INFO/POLICYのラベルを追加済みなので、
   3グループの区切り自体は残しつつ、各グループ内のリンクを2カラムにして縦の高さを詰める */
@media (max-width: 600px) {
  .site-footer {
    padding: 3.5rem 1.25rem 1.5rem;
  }

  .footer-container {
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .footer-nav ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1rem;
  }

  .footer-nav li {
    margin-bottom: 0.6rem;
  }

  .copyright {
    padding-top: 1.5rem;
  }
}

/* Cookie利用に関する通知バナー */
.cookie-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1.2rem 2rem;
  background: var(--text-primary);
  color: #fff;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

.cookie-notice-text {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.7;
  color: #e5e5e5;
  max-width: 720px;
}

.cookie-notice-text a {
  color: #fff;
  text-decoration: underline;
}

.cookie-notice-btn {
  flex-shrink: 0;
  padding: 0.6rem 1.75rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--text-primary);
  background: var(--accent-brass);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.cookie-notice-btn:hover {
  opacity: 0.85;
}

.cookie-notice-btn-outline {
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.cookie-notice-btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
  opacity: 1;
}

@media (max-width: 600px) {
  .cookie-notice {
    justify-content: flex-start;
    padding: 1rem 1.25rem;
  }
}

/* ページ最上部に戻るフローティングボタン（全ページ共通、main.jsからDOM生成）
   他のコンテンツを邪魔しないよう基本はうっすら半透明、スクロール中はさらに薄く、
   静止中・ホバー時にはっきり見えるようにする。
   samplebook-promo-bannerの方をコーナーに一番近い主役の位置に置き、本ボタンは
   その上に積む（131-8章、PC/モバイル共通）。--promo-banner-stackはバナーの
   実測高さ+隙間からscript/main.jsが都度計算する。 */
.scroll-top-btn {
  position: fixed;
  right: 1.5rem;
  bottom: calc(1.5rem + var(--scroll-top-clearance, 0px) + var(--promo-banner-stack, 0px));
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease, bottom 0.35s ease,
    background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  z-index: 500;
}

.scroll-top-btn.is-visible {
  opacity: 0.45;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top-btn.is-visible.is-scrolling {
  opacity: 0.15;
}

.scroll-top-btn.is-visible:hover,
.scroll-top-btn.is-visible:focus-visible {
  opacity: 0.95;
  border-color: var(--accent-brass);
  color: var(--accent-brass-text);
  background: rgba(255, 255, 255, 0.92);
}

@media (max-width: 600px) {
  .scroll-top-btn {
    right: 1rem;
    bottom: calc(1rem + var(--scroll-top-clearance, 0px) + var(--promo-banner-stack, 0px));
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* 配色バリエーションのプレビュー切替パネル（社内レビュー用、script/main.jsからDOM生成）。
   本公開前に撤去する一時的なツールのため、既存UIと混同しないよう控えめな
   ダーク・モノスペースの見た目にしている（scroll-top-btnと対称の反対側=左下に配置）。 */
.theme-preview-panel {
  position: fixed;
  left: 1.5rem;
  bottom: calc(1.5rem + var(--scroll-top-clearance, 0px));
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem;
  background: rgba(26, 26, 26, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 999px;
  z-index: 500;
  transition: bottom 0.35s ease;
}

.theme-preview-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: rgba(246, 245, 240, 0.6);
  white-space: nowrap;
}

.theme-preview-swatch {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid rgba(246, 245, 240, 0.35);
  background: var(--swatch-color);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(26, 26, 26, 0.75);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.theme-preview-swatch:hover {
  transform: scale(1.12);
}

.theme-preview-swatch.is-active {
  border-color: var(--accent-brass);
}

@media (max-width: 600px) {
  .theme-preview-panel {
    left: 1rem;
    bottom: calc(1rem + var(--scroll-top-clearance, 0px));
    padding: 0.4rem 0.7rem;
  }
  .theme-preview-label {
    display: none;
  }
}

/* サンプル帳・見本帳への誘導フローティングバナー（全ページ共通、script/main.jsからDOM生成）。
   チャットウィジェットの定番配置に合わせ、右下のコーナーに一番近い「主役」の
   位置をバナーが占め、補助的なscroll-top-btnをその上に積む構成にしている
   （PC/モバイル共通、131-8章）。左下は補助的な通知向けのポジションのため、
   注目を集めたい訴求要素としては右下を優先した。 */
.samplebook-promo-banner {
  position: fixed;
  right: 1.5rem;
  bottom: calc(1.5rem + var(--scroll-top-clearance, 0px));
  z-index: 500;
  width: 300px;
  max-width: calc(100vw - 2rem);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--accent-brass);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease, bottom 0.35s ease;
}

.samplebook-promo-banner.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.samplebook-promo-banner-close {
  position: absolute;
  top: -0.55rem;
  right: -0.55rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.samplebook-promo-banner-close:hover {
  color: var(--accent-brass-text);
  border-color: var(--accent-brass);
}

.samplebook-promo-banner-link {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  color: var(--text-primary);
  text-decoration: none;
}

.samplebook-promo-banner-img {
  width: 3.4rem;
  height: 3.4rem;
  object-fit: cover;
  flex-shrink: 0;
  background: #18140f;
}

.samplebook-promo-banner-icon {
  width: 3.4rem;
  height: 3.4rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(184, 134, 11, 0.1);
  color: var(--accent-brass-text);
}

/* バイオマスインキ案件用の配色バリエーション（3-4章のコーポレートカラー方針を踏襲） */
.samplebook-promo-banner.is-corporate {
  border-top-color: var(--accent-corporate);
}

.samplebook-promo-banner.is-corporate .samplebook-promo-banner-icon {
  background: var(--accent-corporate-glow);
  color: var(--accent-corporate);
}

.samplebook-promo-banner.is-corporate .samplebook-promo-banner-eyebrow,
.samplebook-promo-banner.is-corporate .samplebook-promo-banner-arrow {
  color: var(--accent-corporate);
}

.samplebook-promo-banner.is-corporate .samplebook-promo-banner-link:hover .samplebook-promo-banner-title {
  color: var(--accent-corporate);
}

.samplebook-promo-banner-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}

.samplebook-promo-banner-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--accent-brass-text);
  font-weight: 700;
}

.samplebook-promo-banner-title {
  font-size: 0.88rem;
  line-height: 1.5;
  font-weight: 700;
  transition: color 0.2s ease;
}

.samplebook-promo-banner-arrow {
  flex-shrink: 0;
  color: var(--accent-brass-text);
  display: flex;
  transition: transform 0.25s ease;
}

.samplebook-promo-banner-link:hover .samplebook-promo-banner-title {
  color: var(--accent-brass-text);
}

.samplebook-promo-banner-link:hover .samplebook-promo-banner-arrow {
  transform: translateX(3px);
}

@media (max-width: 600px) {
  .samplebook-promo-banner {
    right: 1rem;
    bottom: calc(1rem + var(--scroll-top-clearance, 0px));
    width: calc(100vw - 2rem);
    transition: opacity 0.4s ease, transform 0.4s ease, bottom 0.35s ease, width 0.3s ease;
  }

  /* 表示から数秒後に自動で縮小する、アイコン（写真）だけの丸チップ状態
     （main.js側のscheduleCollapseで.is-collapsedを付与） */
  .samplebook-promo-banner.is-collapsed {
    width: 3.6rem;
    border-radius: 50%;
    overflow: hidden;
  }

  .samplebook-promo-banner.is-collapsed .samplebook-promo-banner-link {
    padding: 0;
  }

  .samplebook-promo-banner.is-collapsed .samplebook-promo-banner-text,
  .samplebook-promo-banner.is-collapsed .samplebook-promo-banner-arrow {
    display: none;
  }

  .samplebook-promo-banner.is-collapsed .samplebook-promo-banner-img,
  .samplebook-promo-banner.is-collapsed .samplebook-promo-banner-icon {
    width: 3.6rem;
    height: 3.6rem;
  }
}

/* スクロールで浮かび上がる演出（script/main.js「4. スクロールふわっと表示」）。
   以前は .reveal-item を最初から透明にしていたため、JSが動き出す前（ページの読み込み途中）に
   スクロールすると画面が空白に見えた（257-21章）。JSが動き出すまでは普通に表示し、
   JSがまだ画面に入っていない要素にだけ .reveal-pending を付けて透明にする方式に変えた。 */
.reveal-item {
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-item.reveal-pending {
  opacity: 0;
  transform: translateY(40px);
  transition: none; /* 透明にする瞬間は動かさない（画面外なので見えないが念のため） */
}

/* ハンバーガーボタン（スマホ・タブレット用） */
.hamburger {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 22px;
  flex-shrink: 0; /* ロゴ側が縮みきらない場合でも、ハンバーガー自体が画面外に押し出されないようにする */
  position: relative;
  z-index: 1001;
}

.hamburger span {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--text-primary);
  transition: all 0.3s ease;
}

.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger span:nth-child(3) { bottom: 0; }

.hamburger.is-active span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  background-color: var(--accent-brass);
}
.hamburger.is-active span:nth-child(2) { opacity: 0; }
.hamburger.is-active span:nth-child(3) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  background-color: var(--accent-brass);
}

/* レスポンシブ対応 (1250px以下でハンバーガーメニューへ安全に切り替え) */
@media (max-width: 1250px) {
  .hamburger {
    display: block;
  }
  .site-nav {
    position: fixed;
    top: 0; right: 0;
    width: 100%; height: 100vh;
    background: rgba(246, 245, 240, 0.98);
    backdrop-filter: blur(25px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
  }
  .site-nav.is-active {
    transform: translateX(0);
  }
  .site-nav ul {
    flex-direction: column;
    gap: 0;
    text-align: center;
    width: 100%;
    max-width: 320px;
  }
  /* 項目間に罫線を入れて「並べただけ」に見えないようにする。
     お問い合わせ（常に末尾のli）だけ罫線を外し、上に間隔＋点線を足して他の項目と切り離す */
  .site-nav li {
    display: flex;
    justify-content: center;
    width: 100%;
    border-bottom: 1px solid rgba(61, 58, 54, 0.12);
  }
  .site-nav li:last-child {
    border-bottom: none;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px dashed rgba(184, 134, 11, 0.35);
  }
  .site-nav a {
    font-size: 1.15rem;
    padding: 1.05rem 0;
  }
  .nav-num {
    font-size: 0.8rem;
  }
  .site-nav .nav-cta-btn {
    width: 100%;
    justify-content: center;
    padding: 1rem !important;
  }
}

/* ===== グローバルナビのサブメニュー／スマホメニュー（257-15章）=====
   HTMLは scripts/sync_nav.py の「元」から全ページ・管理画面テンプレートに書き込んでいる。
   開閉は script/main.js（.nav-sub-toggle のクリックで .nav-has-sub に .is-open）。
   PC：マウスを乗せる・キーボードでフォーカス（:focus-within）・▼のクリックのいずれでも開く。
   スマホ：▼で開閉するアコーディオン（最初から全部並べるとメニューが長くなりすぎるため）。 */

/* 固定ヘッダーの裏に、ページ内リンクの移動先の見出しが隠れないようにする */
html { scroll-padding-top: 96px; }

.site-nav .nav-has-sub {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0.25rem;
  margin-left: -0.15rem;
  color: var(--accent-brass-text);
  cursor: pointer;
  border-radius: 4px;
}
.nav-sub-toggle svg { transition: transform 0.25s ease; }
.nav-has-sub.is-open > .nav-sub-toggle svg { transform: rotate(180deg); }
.nav-sub-toggle:focus-visible { outline: 2px solid var(--accent-brass); outline-offset: 2px; }

.site-nav .nav-sub {
  display: block;
  position: absolute;
  top: calc(100% + 0.9rem);
  left: -1rem;
  min-width: 15rem;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-top: 2px solid var(--accent-brass);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  /* サイト共通の「すっと動き出して、ゆっくり止まる」動き（.reveal-item等と同じcubic-bezier）で
     ふわっと出す。閉じる時はvisibilityを最後に切り替え、フェードアウトが見えるようにする */
  transform: translateY(10px);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.35s;
  z-index: 1002;
}
/* 親項目からメニューへマウスを動かす途中の隙間で閉じないための「橋」 */
.site-nav .nav-sub::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1rem;
  height: 1rem;
}
.site-nav .nav-has-sub:hover > .nav-sub,
.site-nav .nav-has-sub:focus-within > .nav-sub,
.site-nav .nav-has-sub.is-open > .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}
/* 各項目も上から順にわずかな時間差で浮かび上がる（開く時だけ時間差を付け、閉じる時は一斉に消す） */
.site-nav .nav-sub > li {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-nav .nav-has-sub:hover > .nav-sub > li,
.site-nav .nav-has-sub:focus-within > .nav-sub > li,
.site-nav .nav-has-sub.is-open > .nav-sub > li {
  opacity: 1;
  transform: none;
}
.site-nav .nav-has-sub:hover > .nav-sub > li:nth-child(2), .site-nav .nav-has-sub:focus-within > .nav-sub > li:nth-child(2), .site-nav .nav-has-sub.is-open > .nav-sub > li:nth-child(2) { transition-delay: 0.03s; }
.site-nav .nav-has-sub:hover > .nav-sub > li:nth-child(3), .site-nav .nav-has-sub:focus-within > .nav-sub > li:nth-child(3), .site-nav .nav-has-sub.is-open > .nav-sub > li:nth-child(3) { transition-delay: 0.06s; }
.site-nav .nav-has-sub:hover > .nav-sub > li:nth-child(4), .site-nav .nav-has-sub:focus-within > .nav-sub > li:nth-child(4), .site-nav .nav-has-sub.is-open > .nav-sub > li:nth-child(4) { transition-delay: 0.09s; }
.site-nav .nav-has-sub:hover > .nav-sub > li:nth-child(5), .site-nav .nav-has-sub:focus-within > .nav-sub > li:nth-child(5), .site-nav .nav-has-sub.is-open > .nav-sub > li:nth-child(5) { transition-delay: 0.12s; }
.site-nav .nav-has-sub:hover > .nav-sub > li:nth-child(6), .site-nav .nav-has-sub:focus-within > .nav-sub > li:nth-child(6), .site-nav .nav-has-sub.is-open > .nav-sub > li:nth-child(6) { transition-delay: 0.15s; }
.site-nav .nav-has-sub:hover > .nav-sub > li:nth-child(7), .site-nav .nav-has-sub:focus-within > .nav-sub > li:nth-child(7), .site-nav .nav-has-sub.is-open > .nav-sub > li:nth-child(7) { transition-delay: 0.18s; }
.site-nav .nav-sub a {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  padding: 0.6rem 1.25rem;
  white-space: nowrap;
}
.site-nav .nav-sub a:hover,
.site-nav .nav-sub a:focus-visible {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  text-shadow: none;
}
.site-nav .nav-sub .nav-sub-extra {
  border-top: 1px dashed rgba(184, 134, 11, 0.35);
  margin-top: 0.35rem;
  padding-top: 0.35rem;
}
/* 今いるページ（ページ内の段落へのリンクは今見ている段落）の項目。script/main.js が .is-current を付ける（257-16章）。
   一気通貫（.nav-sub-extra）は上の金の破線で区切るだけで、文字はほかの項目と同じ（強調が二重になり目立ちすぎたため） */
.site-nav .nav-sub a.is-current {
  color: var(--accent-corporate);
  font-weight: 700;
}
/* 電話リンクはスマホのメニュー内だけに出す */
.site-nav .nav-tel { display: none; }

@media (max-width: 1250px) {
  html { scroll-padding-top: 76px; }
  /* 背景の透けで後ろのページの文字が見えて読みにくかったため不透明に。
     項目が増えて画面に収まらない場合に備えてメニュー内をスクロール可能にする
     （中央寄せのままだと、はみ出した上側がスクロールでも見えなくなるため上寄せ＋余白） */
  /* メニューはヘッダーの下から始める（ロゴと閉じるボタンを常に見せ、スクロールしても
     項目がロゴの下を通り抜けて重ならないように）。--site-header-h は script/main.js が
     実際のヘッダーの高さを測って設定する（画面幅でヘッダーの高さが変わるため） */
  .site-nav {
    top: var(--site-header-h, 61px);
    height: calc(100vh - var(--site-header-h, 61px));
    height: calc(100dvh - var(--site-header-h, 61px));
    background: var(--bg-dark);
    backdrop-filter: none;
    justify-content: flex-start;
    align-items: stretch;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.25rem 1.5rem 2.5rem;
    border-top: 1px solid var(--border-color);
    /* 開閉の動き（横スライド）を最初から独立した層で描画させ、動き出しの引っかかりを防ぐ */
    will-change: transform;
  }
  body.nav-open { overflow: hidden; }

  /* 中央揃えだとサブメニューの親子関係が分かりにくいため、左揃えの一覧に */
  .site-nav ul.nav-main {
    max-width: 480px;
    margin: 0 auto;
    text-align: left;
  }
  .site-nav .nav-main > li {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  .site-nav .nav-main > li:last-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
  .site-nav .nav-main > li:not(.nav-cta):not(.nav-tel) > a {
    flex: 1;
    justify-content: flex-start;
    font-size: 1.05rem;
    padding: 1rem 0;
  }
  .site-nav .nav-main > li.nav-cta {
    border-bottom: none;
    margin-top: 1.75rem;
  }
  /* ▼は指で押しやすい44px四方に。▼だけだと小さく押せる場所と分かりにくいとの指摘で、
     薄い金色の丸いボタンにして▼も大きくし、開いている間は塗りを濃くする（257-31章） */
  .nav-sub-toggle {
    width: 44px;
    height: 44px;
    margin: 0;
    border: 1px solid rgba(134, 98, 10, 0.35);
    border-radius: 50%;
    background: rgba(184, 134, 11, 0.08);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }
  .nav-sub-toggle svg { width: 20px; height: 20px; }
  .nav-has-sub.is-open > .nav-sub-toggle {
    background: var(--accent-brass-text);
    border-color: var(--accent-brass-text);
    color: #fff;
  }
  .site-nav .nav-sub {
    position: static;
    display: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--accent-brass);
    background: rgba(184, 134, 11, 0.05);
    padding: 0.25rem 0;
    margin: 0 0 0.9rem;
    text-align: left;
  }
  .site-nav .nav-sub::before { display: none; }
  .site-nav .nav-has-sub.is-open > .nav-sub { display: block; }
  /* display:none→blockは transition が効かないため、開いた時にキーフレームで同じ「ふわっと」を付ける */
  .site-nav .nav-has-sub.is-open > .nav-sub > li {
    animation: navSubIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .site-nav .nav-has-sub.is-open > .nav-sub > li:nth-child(2) { animation-delay: 0.03s; }
  .site-nav .nav-has-sub.is-open > .nav-sub > li:nth-child(3) { animation-delay: 0.06s; }
  .site-nav .nav-has-sub.is-open > .nav-sub > li:nth-child(4) { animation-delay: 0.09s; }
  .site-nav .nav-has-sub.is-open > .nav-sub > li:nth-child(5) { animation-delay: 0.12s; }
  .site-nav .nav-has-sub.is-open > .nav-sub > li:nth-child(6) { animation-delay: 0.15s; }
  .site-nav .nav-has-sub.is-open > .nav-sub > li:nth-child(7) { animation-delay: 0.18s; }
  .site-nav .nav-sub li,
  .site-nav .nav-sub li:last-child {
    display: block;
    width: auto;
    border: 0;
    margin: 0;
    padding: 0;
  }
  /* 直前の「li / li:last-child の罫線リセット」より詳細度を上げないと破線が消える */
  .site-nav .nav-sub li.nav-sub-extra {
    border-top: 1px dashed rgba(184, 134, 11, 0.35);
    margin-top: 0.25rem;
    padding-top: 0.25rem;
  }
  .site-nav .nav-sub a {
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
    white-space: normal;
  }
  .site-nav .nav-main > li.nav-tel {
    display: block;
    border-bottom: none;
    margin-top: 1rem;
  }
  .site-nav .nav-tel a {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
    font-size: 1.05rem;
    color: var(--text-primary);
    padding: 0.75rem 0;
  }
  .nav-tel-label {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text-secondary);
  }
}

@keyframes navSubIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
/* 「視差効果を減らす」設定の人には動きを付けない（表示・非表示だけ切り替える） */
@media (prefers-reduced-motion: reduce) {
  .site-nav .nav-sub,
  .site-nav .nav-sub > li {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
}

@media (max-width: 1024px) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .header-container {
    padding: 1rem 1.5rem;
  }
  /* ヘッダーはposition:fixedでヒーローの上に重なるため、padding-topが
     空いている唯一の理由は「文字がヘッダーの下に隠れないようにする」こと。
     ヘッダー実測高さは約61px（スマホ）なので、それに軽い余白を足した程度で
     十分。「なんとなく大きめに」の名残で7.5rem/8remと必要以上に空いていた
     ため大幅に詰め、他の間隔（.hero-meta-badge margin-bottom等）と揃えて
     全て32pxに統一するため61px（+.hero-content margin-top 32px−ヘッダー高
     61px＝32px）に調整した。TOPページ（このルール）とサブページ（下の
     .subpage側で!important上書き）で同じ値にしている。 */
  .hero-cinematic {
    padding-top: 61px;
  }
  /* サブページのヒーロー（PAGE_ID帯＋タイトルだけの短い帯）は、38ページ全てで
     inline style="padding: 8rem 2rem 3rem"が固定指定されており、通常の
     クラス側メディアクエリでは上書きできない（インラインstyleが常に勝つため）。
     ここだけ!importantで明示的に上書きする。全ページのHTMLを個別修正するより、
     body.subpage経由でCSS側から一括対応する方が安全。 */
  .subpage .hero-cinematic {
    padding-top: 61px !important;
    /* 直後の見出し・本文との間が空きすぎて目立つとの指摘を受け、
       inline style="padding: 8rem 2rem 3rem"のbottom(3rem=48px)も
       あわせて詰める（main-container側のpadding-topと合わせて
       H1〜本文の間隔を調整するため、下記コメント参照） */
    padding-bottom: 20px !important;
  }
  /* PAGE_IDバッジ下の余白と、ヘッダー直下からバッジまでの余白が不揃いに
     見えるとの指摘を受け、どちらも32pxに揃えた
     （padding-top:61px + .hero-content margin-top:2rem(32px) - ヘッダー実測
     高さ61px＝32px、この値と合わせている） */
  .hero-meta-badge {
    margin-bottom: 32px;
  }
  /* main-container側もinline style="padding-top: 2rem"に阻まれているため
     ここで!important上書き。hero-cinematicのpadding-bottom(20px)と
     合わせて、H1から本文までの間隔を20+12=32px程度まで圧縮する */
  .subpage .main-container {
    padding-top: 0.75rem !important;
  }
  .hero-title-break {
    display: block;
  }
  /* ロゴの"SUN ART PRINTING"サブタグ分の幅がハンバーガーボタンを画面外へ押し出していたため、
     狭い画面では非表示にしてロゴ本体のみにする */
  .logo-sub-tag {
    display: none;
  }
}

/* ロゴ画像(img/logo_main.png)は実寸983x128px(横長)のため、高さ38px指定だと
   約292px幅になる。.site-logoはflexで縮められるがimg自体には縮小の歯止めがなく、
   372px以下の画面（Androidで多い360px幅等）ではハンバーガーボタンと重なっていた。
   高さを詰めて画像自体の描画幅を縮めることで重なりを解消する（width:autoのままなので
   アスペクト比は保たれる） */
@media (max-width: 480px) {
  .header-logo-img {
    height: 28px;
  }
}

/* 「変えていくもの。」が2行目としても収まりきらない狭い画面幅（iPhone等）でのみ、
   3行になってしまわないようフォントサイズを詰める */
@media (max-width: 480px) {
  .hero-main-title {
    font-size: 2.5rem;
  }
}
/* ==========================================================================
   サイト刷新（2026） 追加コンポーネント
   ========================================================================== */

/* ヒーロー kicker（H1直上の小さなアイキャッチラベル。見出しタグにはしない） */
.hero-kicker {
  /* SEO都合でH1内の<span>に変更したため、pだった頃と同じ見た目（独立した1行、
     下に余白）を保つためdisplay:blockが必須 */
  display: block;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

/* Bento Grid 3カラム版（メッセージングピラー等） */
.bento-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 1024px) {
  .bento-grid-3col {
    grid-template-columns: 1fr;
  }
}

/* TOPページ「できること」: 正方形カード6枚（詳細説明付き）をやめたテイザー表現。
   詳細はサービス各ページ・できること一覧ページに委ねる。
   丸ピル（border-radius:999px）案はサイトの角ばった意匠と合わない、
   既存パーツの使い回しで安易、との指摘を受けて差し戻し、印刷の仕様書・
   進行表のような罫線区切りのインデックス（角丸なし・連番＋名称のみ）に
   作り直した。3列2行を罫線1本の枠で囲み、外周と重複する内側の罫線
   （各行の右端・最終行の下端）だけ消している。
   その後、連番（01〜06）は識別以上の意味を持たないとの指摘を受け、
   services.htmlの各行（.service-row-icon）と同じSVGアイコンに差し替えた
   （アイコン自体は使い回しだが、意匠自体はcapability-index独自のまま）。 */
.capability-index {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border-color);
  position: relative;
  /* DTP・印刷の版下グリッドを思わせる、ごく薄いグリッド地紋を敷く
     （罫線=var(--border-color)より薄い0.035で、テーブルの罫線を邪魔しない） */
  background-image:
    repeating-linear-gradient(0deg, rgba(184, 134, 11, 0.035) 0, rgba(184, 134, 11, 0.035) 1px, transparent 1px, transparent 24px),
    repeating-linear-gradient(90deg, rgba(184, 134, 11, 0.035) 0, rgba(184, 134, 11, 0.035) 1px, transparent 1px, transparent 24px);
}

.capability-index-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.45rem 1.5rem;
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  font-weight: 700;
  transition: background 0.25s ease;
}

.capability-index-item:nth-child(3n) {
  border-right: none;
}

.capability-index-item:nth-last-child(-n+3) {
  border-bottom: none;
}

.capability-index-item:hover {
  background: rgba(184, 134, 11, 0.06);
}

.capability-index-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--accent-brass-text);
}

.capability-index-icon svg {
  width: 22px;
  height: 22px;
}

.capability-index-label {
  font-size: 1.05rem;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .capability-index {
    grid-template-columns: 1fr;
  }
  .capability-index-item {
    border-right: none;
    padding: 1rem 1.25rem;
  }
  /* PC用の:nth-last-child(-n+3)（3列グリッドの最終行=末尾3項目から下端の
     罫線を消す）が、スマホの1列縦積みでもそのまま効いてしまい、
     4・5番目の項目からも罫線が消えて「後半3つだけ区切りがない」ように
     見える不具合があった。スマホでは本当の最後の項目だけ消せばよいため、
     nth-last-childの効果を打ち消してから、last-childで上書きする */
  .capability-index-item:nth-last-child(-n+3) {
    border-bottom: 1px solid var(--border-color);
  }
  .capability-index-item:last-child {
    border-bottom: none;
  }
}

@media (max-width: 600px) {
  .bento-grid-3col {
    gap: 1.25rem;
  }
}

/* 認証・サステナビリティバッジ */
.cert-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
}

.cert-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent-corporate-glow);
  border: 1px solid rgba(38, 128, 0, 0.25);
  padding: 0.45rem 0.9rem;
  border-radius: 30px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.cert-badge strong {
  color: var(--accent-corporate);
  font-weight: 700;
}

/* リンク付きバッジ（例：TOPページのバイオマス40インキ）は、認証情報のみの
   静的バッジ（FSC等）と見た目が同一だとクリックできることに気づかれないため、
   常時（hover前から）コーポレートカラーで文字色を変え、矢印アイコンを添えて
   クリック可能であることを示す。今後クリック可能なバッジを追加する場合も
   <a class="cert-badge">にするだけでこの見た目が自動的に適用される。 */
a.cert-badge {
  color: var(--accent-corporate);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

a.cert-badge svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

a.cert-badge:hover {
  background: rgba(38, 128, 0, 0.18);
  border-color: var(--accent-corporate);
  color: var(--text-primary);
}

/* ============================================================
   サービス詳細ページ「対応範囲」直下の図解コンポーネント群
   （services-digital/publishing/corporate-print/packaging/on-demand.html）
   ------------------------------------------------------------
   角丸なし・影なし・罫線で区切るフラットな意匠（bento-card/pillar-row/
   history-timelineと同じ方針）を共通の土台にしつつ、ページごとに対応範囲の
   文面の性質が異なる（並列の領域／製品ラインナップ＋加工／継続発行という
   媒体特性／継続発行→周年記念という推移／大量⇄バリアブルという推移）ため、
   単なる「アイコンを並べるだけ」の使い回しにならないよう、5ページで中身の
   構造に変化をつけている。全ページ共通の土台は.scope-figure（外枠）＋
   .scope-figure-row（全幅を等分するアイコン列。border-leftで区切る）＋
   .scope-figure-item（アイコン+ラベルの1項目）で、「アイコン」の中身だけ
   ページごとに差し替える：line-icon（digital/publishing/packaging）、
   色分けしたリング.scope-figure-ring（corporate-print、日常→記念の3階調）、
   四角・丸・ひし形のスウォッチ.scope-variable-swatch（on-demand、
   大量→小ロット→バリアブルの3段階）。以前は二極対比・画一⇄バリアブルの
   対比を専用コンテナ（.scope-spectrum/.scope-variable）で中央寄せの
   コンパクトな図として実装していたが、「.scope-figureの並びの中で中央に
   きゅっと固まって見える」との指摘（2026-09-15）を受け、専用コンテナを
   廃止して.scope-figure-row/.scope-figure-itemに統一した。
   packaging「箔押し」「切り抜き」・publishing「立ち合い校正」は、当初どちらも
   下部に別枠（丸角チップ・破線区切りのコールアウト）として出していたが、
   「行の外に浮いて見える」との指摘（2026-09-15）を2回受け、最終的にどちらも
   同じ行の.scope-figure-itemとして統合した（packagingは5項目、publishingは
   4項目の1行になっている）。特定の項目だけアイコン色を変えたい場合は
   .scope-figure-icon-brass等の色修飾クラスを併用する。
   最初にservices-digital.htmlのページ限定<style>として作った版（.digital-scope-*）
   を、5ページで使う共通コンポーネントとしてここに昇格・改名した。 */

.scope-figure {
  margin-top: 2.5rem;
  border-bottom: 1px solid var(--border-color);
  padding: 2.75rem 0;
}

.scope-figure-row {
  display: flex;
  flex-wrap: wrap;
}

.scope-figure-item {
  position: relative;
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  padding: 0.5rem 1.5rem;
}

.scope-figure-item:not(:first-child) {
  border-left: 1px solid var(--border-color);
}

/* 項目間を罫線ではなく矢印でつなぐ行（on-demand: 大量印刷→小ロット印刷→
   バリアブル印刷という推移を表現する）。矢印を右へ行くほど大きく・濃い色に
   することで、自社の一番の強み（バリアブル印刷）に向かって視線が
   誘導されるようにしている。2026-09-15、罫線区切りだと「3つとも並列」に
   見えて自社対応内容が伝わらないという指摘への対応。 */
.scope-figure-row-connected .scope-figure-item:not(:first-child) {
  border-left: none;
}

/* 行の途中1箇所だけ罫線を外し、代わりに.scope-figure-arrow-chunk等の
   記号を挟みたい場合の個別指定（packaging：製品3種と加工2種の間に
   「×」を挟む、2026-09-15）。.scope-figure-row-connectedと違い、
   行内の特定の1項目にだけ適用する。 */
.scope-figure-row .scope-figure-item.scope-figure-item-no-divide {
  border-left: none;
}

.scope-figure-arrow-chunk {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  color: var(--accent-brass-text);
}

.scope-figure-arrow-chunk svg {
  width: 30px;
  height: 30px;
}

.scope-figure-arrow-chunk-lg {
  width: 56px;
  color: var(--accent-corporate);
}

.scope-figure-arrow-chunk-lg svg {
  width: 42px;
  height: 42px;
}

/* 中立色（製品側・加工側どちらの色にも属さない、方向性のない記号用。
   packagingの「×」など） */
.scope-figure-arrow-chunk-neutral {
  color: var(--border-hover);
}

.scope-figure-num {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent-corporate-glow);
}

.scope-figure-icon {
  width: 60px;
  height: 60px;
  color: var(--accent-corporate);
}

/* 特定の1項目だけ色を変えたい場合の修飾（publishing「立ち合い校正」：
   157章で別枠コールアウトから行内の4項目目に統合した際、元のコールアウト版で
   使っていたブラス色を維持したいとの指定を受けて追加） */
.scope-figure-icon-brass {
  color: var(--accent-brass-text);
}

.scope-figure-icon svg { width: 100%; height: 100%; }

.scope-figure-label {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-primary);
}

.scope-figure-sub {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.scope-figure-caption {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.8;
  text-align: center;
}

.scope-figure-caption strong {
  color: var(--accent-corporate);
}

@media (max-width: 700px) {
  .scope-figure-row {
    flex-direction: column;
  }
  .scope-figure-item {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 1.25rem 0.5rem;
  }
  .scope-figure-item:not(:first-child) {
    border-left: none;
    border-top: 1px solid var(--border-color);
  }
  .scope-figure-row-connected .scope-figure-item:not(:first-child) {
    border-top: none;
  }
  .scope-figure-row .scope-figure-item.scope-figure-item-no-divide {
    border-top: none;
  }
  .scope-figure-icon { width: 48px; height: 48px; }
  .scope-figure-arrow-chunk {
    width: auto;
    padding: 0.5rem 0;
    transform: rotate(90deg);
  }
}

/* 3点タイムライン（corporate-print: 「日常の発行物」→「継続発行」→「周年・記念」
   という対応範囲文中のグラデーションを、3点の年表・目盛りとして表現する）。
   画一⇄バリアブルの対比（on-demand）とあわせて、初版は.scope-spectrum/
   .scope-variableという専用コンテナで中央寄せのコンパクトな図にしていたが、
   「.scope-figureの並びの中で中央にきゅっと固まって見える／packagingと同じく
   横幅いっぱいでバランスよくしてほしい」との指摘（2026-09-15）を受け、
   専用コンテナをやめて.scope-figure/.scope-figure-row/.scope-figure-item
   （packaging等と共通の、全幅3等分＋罫線区切りの土台）をそのまま流用する形に
   作り直した。line-iconの代わりに色分けしたリング（.scope-figure-ring）や
   四角・丸・ひし形のスウォッチ（.scope-variable-swatch、以前からの流用）を
   アイコン枠に収めている。 */
.scope-figure-ring {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid var(--accent-brass);
}

.scope-figure-ring-mid { border-color: #6f8306; }
.scope-figure-ring-corporate { border-color: var(--accent-corporate); }

.scope-variable-swatches {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 60px;
}

.scope-variable-swatch {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: 2px solid var(--border-hover);
}

/* 大量印刷（対比の基準点＝一般的なあり方。あえて無彩色に近いborder-hoverの
   ままにしておき、自社の対応内容として強調している他の2項目と区別する） */

/* 小ロット印刷・バリアブル印刷は実際に自社が対応している内容のため、
   基準点（大量印刷）と区別してブラス／コーポレートカラーで強調する
   （2026-09-15、3項目を横並びにした際に基準点との区別が消えていた指摘に対応）。 */
.scope-variable-ours .scope-variable-swatch {
  border-color: var(--accent-brass);
}

.scope-variable-variable .scope-variable-swatch {
  border-color: var(--accent-corporate);
}

.scope-variable-variable .scope-variable-swatch.is-circle {
  border-radius: 50%;
}

.scope-variable-variable .scope-variable-swatch.is-diamond {
  transform: rotate(45deg);
}

@media (max-width: 700px) {
  .scope-variable-swatches {
    height: auto;
  }
}

a.cert-badge:hover svg {
  transform: translateX(3px);
}

/* フッターCTA（目的別相談導線） */
.footer-cta-section {
  /* サイト全体がベージュ×白で低コントラストなため、フッター直前に濃色の帯を一箇所挟んで締まりを出す */
  background: #17140f;
  padding: 4rem 2rem;
}

.footer-cta-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  text-align: center;
}

.footer-cta-heading {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 2rem;
  color: #f6f5f0;
}

.footer-cta-section .btn-matrix-outline {
  color: #f6f5f0;
  border: 1px solid rgba(246, 245, 240, 0.3);
}

.footer-cta-section .btn-matrix-outline:hover {
  color: #f6f5f0;
  border-color: var(--accent-brass);
  background: rgba(184, 134, 11, 0.18);
}

.footer-cta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.footer-cta-grid .btn-matrix {
  justify-content: center;
  width: 100%;
}

@media (max-width: 1024px) {
  .footer-cta-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .footer-cta-grid {
    grid-template-columns: 1fr;
  }
  .footer-cta-section {
    padding: 2.5rem 1.25rem;
  }
  .footer-cta-heading {
    font-size: 1.2rem;
    margin-bottom: 1.25rem;
  }
}

/* お問い合わせ 目的別分岐タブ */
.contact-branch-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

.contact-branch-tabs input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.contact-branch-tabs label {
  display: inline-block;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: 4px;
  color: var(--text-secondary);
  transition: all 0.3s ease;
}

.contact-branch-tabs input[type="radio"]:checked + label {
  background: var(--text-primary);
  color: #fff;
  border-color: var(--text-primary);
}

.contact-fieldset {
  display: none;
}

.contact-fieldset.is-active {
  display: block;
}

.form-error {
  color: #b83300; /* 同上（257-27章） */
  font-size: 0.8rem;
  font-family: var(--font-mono);
  margin-top: 0.4rem;
  display: none;
}

.form-error.is-visible {
  display: block;
}

/* お問い合わせ・サンプル帳請求フォーム共通パーツ
   （旧: contact.html / samplebook.html それぞれのインラインstyleに
   同一内容が重複していたため、2026-09にstyle.cssへ統合） */
.form-group {
  margin-bottom: 1.75rem;
}

.form-label {
  display: block;
  font-weight: bold;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.form-label .required {
  color: #b83300; /* --accent-neon（#ff3c00）は白地でコントラスト比3.6:1のため、文字用に濃くした（257-27章） */
  font-family: var(--font-mono);
  font-size: 0.75rem;
  margin-left: 0.5rem;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text-primary);
  border-radius: 6px;
  transition: all 0.3s ease;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--accent-brass);
  box-shadow: 0 0 10px var(--accent-glow);
}

.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* reCAPTCHAウィジェットは既定304px幅で、狭い画面ではフォームの余白を含めた
   実効幅に収まらずはみ出すことがあるため、transform:scaleで縮小し、
   レイアウト上の占有サイズもwidth/heightで縮小後のサイズに合わせておく
   （transformは見た目のみでレイアウト幅は変わらないため、明示指定が必要）。 */
@media (max-width: 420px) {
  .recaptcha-container {
    transform: scale(0.8);
    transform-origin: 0 0;
    width: 243px;
    height: 62px;
  }
}

/* フォームカードのpadding:3remはインラインstyleのため、style.cssの
   .bento-card用メディアクエリでは上書きできない。ここでスマホ用に詰める
   （padding: 3rem → 1.5remで、reCAPTCHA(304px幅)が421〜463px幅の
   スマホ（iPhone Plus/Pro Max等）で右にはみ出す不具合も合わせて解消する） */
@media (max-width: 600px) {
  .contact-form-card {
    padding: 1.5rem;
  }
}

/* ニュース・コラムのカテゴリタグ（旧: index.html「.news-list-item .news-cat」・
   news.html「.news-row .news-cat」としてそれぞれ親要素にスコープされた
   同一定義が重複していた。加えて、contents/column/biomass-ink-research-2026.html
   では.news-row/.news-list-itemの外で.news-catだけ使っており、どちらの定義にも
   一致せず完全に無スタイル（不具合）になっていたため、単独クラスとして
   style.cssへ統合した） */
.news-cat {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent-brass-text);
  background: rgba(184, 134, 11, 0.08);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  flex-shrink: 0;
}

/* 定義リスト形式のテーブル（会社概要・バイオマスインキ比較表など）。
   旧: about.htmlのインラインstyleにのみ定義されていたが、biomass-ink.htmlも
   同じ.company-tableクラスを使用しているにもかかわらずCSSが存在せず、
   罫線もpaddingも効かない素のテーブルとして表示されていた不具合があったため、
   2026-09にstyle.cssへ移設して両ページから参照できるようにした。 */
.company-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.company-table th, .company-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  text-align: left;
  font-size: 0.95rem;
  vertical-align: top;
}

.company-table th {
  width: 22%;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  background: rgba(184, 134, 11, 0.03);
}

/* スマホ幅では左列（th）が22%幅のまま圧縮され、項目名が1文字ずつ改行されて
   縦書きのように見えてしまう不具合があったため（about.htmlの会社概要・
   認証環境表で発生、2026-09-25）、table/tr/th/tdをすべてdisplay:blockにして
   「項目→内容」を上下に積む1カラムのレイアウトに切り替える。about.html・
   biomass-ink.htmlで共用の.company-tableに対する共通対応 */
@media (max-width: 768px) {
  .company-table, .company-table tbody, .company-table tr, .company-table th, .company-table td {
    display: block;
    width: 100%;
  }

  .company-table tr {
    padding-top: 0.75rem;
  }

  .company-table th {
    border-bottom: none;
    padding: 0 1.25rem 0.35rem;
  }

  .company-table td {
    padding: 0 1.25rem 1rem;
  }
}

/* 制作・製造工程の一気通貫ライン（.process-rail-* / .process-step-*）:
   印刷のレジストレーションマーク（トンボ、.work-tile-reg）を工程の「継ぎ目」に
   見立て、1本の点線でつないだ工程図。services.html「一気通貫の制作・製造工程」と
   services-samplebook.html「制作フロー」で同一内容が重複していたため、
   2026-09にstyle.cssへ統合した。.process-step-digital修飾子はデジタル工程を
   コーポレートグリーンにするservices.html専用だが、他ページでは単に使われない
   だけなので残したままにしている。 */
.process-rail-lead {
  color: var(--text-secondary);
  line-height: 1.9;
  margin-bottom: 3rem;
}

/* 矢印ボタン（PC幅のみ表示）を.process-rail-viewportの左右に自然に並べたいため、
   幅に関わらず常にflexコンテナにしておく（スマホ幅では矢印がdisplay:noneになり
   viewportだけが残るので、flex:1で単独でも幅いっぱいに広がる）。ダーク背景・
   角丸のステージ風演出は一度試したが「PCの背景はダークやめて」「角丸もダサい」
   との指摘を受けて撤回し、PCは背景なしのシンプルな見た目に戻した
   （2026-09-25）。背景色を持つのはスマホ幅のみ（下記@media参照）。 */
.process-rail {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}

.process-rail-viewport {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

/* 上段3つ・下段3つの3列固定グリッド（以前は幅に応じたflex-wrapで
   4つ+2つに折り返っていたが、意図的に3+3で揃える） */
.process-rail-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.75rem 1.5rem;
}

.process-step-node {
  display: flex;
  align-items: center;
  height: 20px;
  margin-bottom: 1.5rem;
}

.process-step-node .work-tile-reg {
  position: relative;
  top: auto;
  left: auto;
  flex-shrink: 0;
}

.process-step-num {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: var(--accent-brass-text);
  margin: 0 0.75rem 0 0.55rem;
  white-space: nowrap;
}

/* ノードから右へ伸びる点線。各工程の幅ぶんだけ描くことで、折り返しが
   発生しても次の行に線が食い込まない（1本の絶対配置ラインだと折り返し時に
   途切れて見える問題があったための対応） */
.process-step-node::after {
  content: "";
  flex: 1 1 auto;
  min-width: 12px;
  height: 1px;
  background-image: repeating-linear-gradient(to right, var(--accent-brass) 0, var(--accent-brass) 4px, transparent 4px, transparent 9px);
  opacity: 0.55;
}

.process-step-icon {
  width: 60px;
  height: 60px;
  color: var(--accent-brass-text);
  margin-bottom: 1.5rem;
}

.process-step-icon svg { width: 100%; height: 100%; }

/* テキストエリアを吹き出し化：白背景・角丸のボックスに、上端から
   アイコンへ向けて三角のとんがりを出す。とんがりは45度回転させた
   正方形の技法（見えている2辺だけボックスと同じ枠線色にする）。 */
.process-step-bubble {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 1.75rem 1.75rem 1.5rem;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* .bento-card:hover（translateY(-4px)＋淡い影）と同じトーンで、吹き出し全体が
   ぼわっと少し迫り出すように拡大・浮き上がらせる */
.process-step-bubble:hover {
  transform: translateY(-4px) scale(1.035);
  box-shadow: 0 16px 32px rgba(0,0,0,0.12);
  border-color: var(--border-hover);
  z-index: 2;
}

.process-step-bubble::after {
  content: "";
  position: absolute;
  top: -9px;
  left: 22px;
  width: 16px;
  height: 16px;
  background: var(--bg-card);
  border-top: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
  transform: rotate(45deg);
}

/* オンマウスの淡いグロー。とんがり（::after）がボックスの外にはみ出す都合上
   overflow:hiddenを付けられないため、-50%/200%の拡大レイヤーではなく、吹き出し自体と
   同じサイズ・角丸（border-radius: inherit）のレイヤーとして重ね、
   overflow:hiddenなしでも角丸からはみ出さないようにしている。 */
.process-step-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 30%, rgba(184, 134, 11, 0.09) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.process-step-bubble:hover .process-step-glow {
  opacity: 1;
}

.process-step-digital .process-step-glow {
  background: radial-gradient(circle at 50% 30%, var(--accent-corporate-glow) 0%, transparent 70%);
}

.process-step-title {
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
}

.process-step-desc {
  color: var(--text-secondary);
  line-height: 1.85;
  font-size: 0.92rem;
}

.process-step-digital .process-step-num,
.process-step-digital .work-tile-reg::before,
.process-step-digital .work-tile-reg::after,
.process-step-digital .process-step-icon {
  color: var(--accent-corporate);
}

.process-step-digital .work-tile-reg::before,
.process-step-digital .work-tile-reg::after {
  background: var(--accent-corporate);
}

.process-step-digital .process-step-node::after {
  background-image: repeating-linear-gradient(to right, var(--accent-corporate) 0, var(--accent-corporate) 4px, transparent 4px, transparent 9px);
}

/* PC幅の矢印ナビ（.process-rail-arrow）は、無条件のdisplay:noneを必ず
   メディアクエリより前に書く（後ろに書くと記述順で負けてスマホでも
   常にnoneのままになる。CLAUDE.md記載の既知の事故パターン）。既定では
   非表示にしておき、デスクトップ専用レイアウトを適用する
   @media (min-width: 1025px)内でのみ表示に切り替える。 */
.process-rail-arrow {
  display: none;
}

/* スマホ幅専用の上下チェブロンボタン（.process-slot-nav）も同じ理由で、
   無条件のdisplay:noneを必ずメディアクエリより前に書く。
   これは工程間を移動するボタンではない（それはスワイプで既にできる）。
   工程スロットは内部で縦スクロールする「窓」になっており、最初/最後の
   工程まで来るとそこで止まるため、そのままではページの続きへ読み進める
   動線が途切れて見える。この行き止まり感を解消するため、①1件目にいる
   時だけ上矢印が現れて「前のセクション」へ、②最後の工程にいる時だけ
   下矢印が現れて「次のセクション」へ、ページ全体をなめらかにスクロール
   する（2026-09-25、ユーザー要望）。中間の工程では両方とも非表示。
   表示/非表示はscript/main.js側でhidden属性を切り替えて行うため、
   `[hidden]`セレクタでdisplay:noneに強制する指定を後述の@media内に
   別途用意している（authorスタイルのdisplay:flexが、ブラウザ既定の
   `[hidden]{display:none}`より優先されてしまい、hidden属性だけでは
   非表示にならないため）。 */
.process-slot-nav {
  display: none;
}

/* デスクトップ幅（1025px〜）：以前は3列×2行の固定グリッドだったが、
   「PCでも1行にして、右に次の工程・（送った後は）左に前の工程が少し覗く、
   矢印クリックで送れるスライダーにしてほしい」との要望（2026-09-25）を受けて
   横スクロール式のスライダーに変更した。.process-rail-steps自体は
   overflow-x:hiddenにしており、ユーザーのドラッグ・ホイール操作では動かせない
   ようにした上で、script/main.js側の矢印クリックハンドラだけが位置を
   アニメーションさせる仕様にしている（意図せずドラッグで半端な位置に
   なることを防ぐため）。矢印ボタンは.process-rail自体をflexにして自然な
   並びの一部として配置している。
   デザインは3回作り直した：①最初は窓の外に半分めり込む絶対配置の白い円形
   ボタン（「矢印も適当」との指摘）→②ダークなステージ背景に馴染む半透明の
   円形ボタン（「角丸もダサすぎ」との指摘、ステージ自体のダーク背景・角丸も
   撤回）→③円形の枠を持たず、ブラス色のシェブロンアイコンだけを配置する
   デザイン→④現在：「矢印の代わりに次の工程／前の工程というテキストにして」
   との要望を受けて、サイト内で既に使われている.cyber-link
   （テキスト＋矢印アイコンのミニマルなリンク表現）と同じ見た目のテキスト
   リンクにした（2026-09-25）。 */
@media (min-width: 1025px) {
  .process-rail-steps {
    display: flex;
    flex-wrap: nowrap;
    /* クリッピング（窓の外を隠す役目）は動かない外側の.process-rail-viewport
       側だけが担う。track自身にoverflow-x:hiddenを付けると、track自体を
       transformで動かした際にtrackの持つクリップ領域までtrack自身の
       位置ごと一緒にズレてしまい、実質track自身の幅ぶんしか子要素が
       見えなくなる不具合になる（実際に発生：3回クリックしても最後まで
       到達できず、右側に不自然な余白が残った）。 */
    gap: 1.5rem;
    will-change: transform;
  }
  .process-step {
    flex: 0 0 auto;
    /* 4列ぶんの均等幅よりわずかに狭くすることで、両端に次/前の工程が
       少し覗く「ピーク」を作っている */
    width: calc((100% - 1.5rem * 3) / 4 * 0.92);
  }
  /* 窓の縁で工程カードが唐突に切れて見えないよう、隣に覗いている工程が
     ある側だけソフトに透明へフェードさせるマスク。固定のグラデーションを
     常時かけると、先頭/末尾に到達して隣に何も無い状態でも1件目・最後の
     工程自体が縁でうっすら隠れて見えてしまう不具合があったため
     （2026-09-25、ユーザー指摘）、実際のmask-imageはscript/main.js側の
     updateEdgeMask()が先頭/末尾かどうかに応じて動的に設定する
     （このルールは指定なしの初期状態向けの保険） */
  .process-rail-viewport {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  }
  .process-rail-arrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--accent-brass-text);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.25s ease, gap 0.25s ease;
  }
  .process-rail-arrow svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
  .process-rail-arrow:hover:not(:disabled) {
    color: var(--text-primary);
    gap: 0.8rem;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  .process-rail-arrow:disabled {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
  }
}

@media (max-width: 1024px) {
  .process-rail-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  /* 以前は「スクロール位置に応じて中央の1ステップだけアコーディオンで開き、
     他は畳む」方式だったが、開閉のたびにコンテナの高さ（＝ページの高さ）が
     変わり続けるため、スクロール中ずっと画面がガクガク動く不快な挙動になって
     いた（2026-09-25、ユーザー指摘）。高さが変わり続けるアニメーションを
     やめ、「1工程ぶんの固定窓をスワイプでめくっていく」スロット形式に変更した。
     各工程は常にフル表示（開閉なし）、窓の高さだけが固定。
     なお着地位置の制御はCSSのscroll-snapではなくscript/main.js側の独自
     ロジック（スクロール停止を検知して最寄りの工程へ短時間でアニメーション
     着地させる）で行っている。scroll-snap-type/alignを併用すると、ネイティブ
     スナップの慣性処理とJS側のアニメーションが競合し、「弱いスワイプだと
     途中で止まる／着地が緩慢」という不具合になったため、意図的にscroll-snapは
     使用していない（2026-09-25）。 */
  /* ダーク背景・角丸のステージ演出は一度試したが「角丸もやめて、薄いグレーに」
     との指摘を受けて撤回した（2026-09-25）。背景は薄いグレー、角丸なしの
     フラットな区画にしている。 */
  .process-rail {
    background: var(--bg-process-light);
    padding: 1.75rem 1rem;
    border-radius: 0;
  }

  .process-rail-steps {
    display: block;
    box-sizing: border-box;
    height: min(70vh, 520px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 2026-09-25、「最後まで送った後スワイプに反応しない」への対処として
       一時的にoverscroll-behavior: containを追加したが、これ自体が原因で
       このスクロール要素へのタッチスクロールが完全に効かなくなる
       （ヘッドレスChromeのInput.dispatchTouchEventで実測：この宣言の
       有無だけでscrollTopが0のまま変化しない⇔正常に変化する、が切り替わる
       ことを確認）実害の大きい不具合を引き起こしたため撤回した。
       原因はiOS固有のスクロールチェイニングではなく、この撤回した
       宣言そのものだった（ユーザー指摘により判明）。 */
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    scrollbar-width: none;
    /* スロットマシンのドラムのように回転しているように見せるための3D視点。
     　実際の回転量はscript/main.jsがスクロール位置から毎フレーム計算して
     　各.process-stepのtransformに反映する（下記参照）。前後の工程が窓の
     　上下にわずかに覗いて見えるよう、上下のpaddingもJS側で動的に設定する
     　（工程ごとに説明文の長さが違い高さが一定でないため、CSSの%指定では
     　狙った覗き量にできず、実測してpxで設定する必要があった） */
    perspective: 1000px;
    /* 窓の上下で工程カードが唐突に切れて見えないよう、ソフトに透明へ
       フェードさせるマスク（PC版の左右フェードと同じ狙い） */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  }
  .process-rail-steps::-webkit-scrollbar {
    display: none;
  }

  .process-step {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid var(--border-color);
    will-change: transform, opacity;
  }
  .process-step-node { margin-bottom: 1rem; }
  .process-step-node::after { display: none; }
  .process-step-bubble { margin-top: 1rem; }

  /* 窓の上端・下端にオーバーレイする、前後のセクションへ抜けるための
     チェブロン。窓の外に出ない位置（ドラッグ操作の妨げにならないよう
     最小限のサイズ）に、半透明の丸背景で乗せている。1件目/最後の工程に
     いる時だけscript/main.js側でhidden属性を外して表示する。 */
  .process-slot-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.82);
    color: var(--accent-brass-text);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  }
  .process-slot-nav-up {
    top: 0.5rem;
  }
  .process-slot-nav-down {
    bottom: 0.5rem;
  }
  /* authorスタイルのdisplay:flexは、ブラウザ既定の[hidden]{display:none}より
     優先されてしまうため、hidden属性を明示的にdisplay:noneへ強制する
     （つけないとscript/main.js側でhidden=trueにしても消えない）。 */
  .process-slot-nav[hidden] {
    display: none;
  }
}

/* 一覧ページ（works.html / news.html / column.html）共通の絞り込みUI
   （旧: 3ページのインラインstyleにほぼ同一内容が重複していたため、
   2026-09にstyle.cssへ統合。margin-bottomのみページごとに微差があったため、
   ここでは主流の値を採用し、差分がある column.html 側だけそのページの
   インラインstyleで上書きしている） */
.filter-tags {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.filter-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 0.5rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 4px;
  color: var(--text-secondary);
}

.filter-btn.active, .filter-btn:hover {
  background: var(--text-primary);
  color: #fff;
  border-color: var(--text-primary);
}

/* カテゴリ・タグ・自由入力での絞り込み結果件数（works.html/news.html/column.html共通）。
   何件表示されているか一目で分かるよう、カテゴリボタン列とカード一覧の間に表示する。
   絞り込みが無い（全件表示）ときも含め、script/main.jsのapplyCardFilters()実行のたびに
   常に更新する。中身が空の間はレイアウト上のスペースを取らないよう:emptyで隠す */
.results-count {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: -0.5rem 0 1.5rem;
}

.results-count:empty {
  display: none;
}

/* 検索窓（works.html/news.html/column.html共通）。2026-09-24付けで、タグチップを
   クリックした結果を検索input自体の値に混ぜ込む方式から、フリマアプリ等でよく見る
   「検索窓の中に、絞り込み中のタグだけ専用のチップとして表示し、隣に自由入力欄が
   続く」構成に変更した。以前は検索input.valueにタグ文字列をそのまま書き込んでいたため、
   「クリックした結果が検索窓に入っていること自体が分かりにくい」「自分で打った文字と
   見分けられない」という指摘が続いたための対応。タグ絞り込み（.js-search-tag-chip）と
   自由入力検索（.js-card-search）は完全に独立した状態を持ち、両方指定するとAND条件で
   絞り込まれる（script/main.js参照）。
   実装上は.card-search自体を1本の検索ボックスに見えるflexコンテナにし、アイコン・
   タグチップ・input・×ボタンを横並びの子要素として配置している（inputには枠線・背景を
   持たせず透明にすることで、見た目上は今まで通り「1つの入力欄」に見える） */
.card-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  max-width: 420px;
  margin-bottom: 1.5rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-surface);
  transition: border-color 0.2s ease;
}

.card-search:focus-within {
  border-color: var(--text-primary);
}

.card-search-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  pointer-events: none;
}

.card-search input {
  flex: 1;
  min-width: 60px;
  width: 100%;
  border: none;
  background: none;
  padding: 0.15rem 0;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.card-search input:focus {
  outline: none;
}

.card-search input::placeholder {
  color: rgba(102, 99, 92, 0.55);
}

.card-search input::-webkit-search-cancel-button {
  display: none;
}

/* タグ絞り込み中だけ、検索窓の中に選択したタグの数だけチップを並べる（メルカリ等の
   検索欄と同じ見せ方）。2026-09-25付けで複数タグの同時選択（OR検索）に対応した際、
   単一の固定チップ要素から「動的に生成するチップの入れ物」に変更した
   （script/main.js参照）。空のときは中身が無いのでスペースを取らない */
.search-tag-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.search-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  /* 文字や×が枠内で見切れることがないよう、幅を切り詰めない（2026-09-25）。
     以前はmax-width＋ellipsisで長いタグ名を省略していたが、親要素
     （.search-tag-chips）の幅が可変なため、チップの個数によって省略の
     タイミングが不安定になり、短いタグでも文字が欠けて見える不具合が
     あった。タグ名を省略せず全文表示する方針にし、収まりきらない分は
     .card-search側のflex-wrapで折り返す（下記参照） */
  background: var(--accent-brass);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.2rem 0.3rem 0.2rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}

.js-search-tag-chip-remove {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.js-search-tag-chip-remove svg {
  width: 9px;
  height: 9px;
  pointer-events: none;
}

.js-search-tag-chip-remove:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* タグクリック絞り込みの解除方法（もう一度同じタグをクリック）が分かりにくいとの
   指摘があったため、検索窓自体に明示的な×クリアボタンも用意している
   （2026-09-24）。押すと自由入力・タグ絞り込みの両方をまとめて解除する。
   入力値・タグ有無に応じた表示・非表示はscript/main.jsが.is-hiddenの付け外しで制御する */
.card-search-clear {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.2s ease, background 0.2s ease;
}

.card-search-clear svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.card-search-clear:hover {
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.06);
}

/* 絞り込みJS（script/main.js）は対象要素に他にどんなクラスが付いていても
   .is-hidden をtoggleするだけなので、対象クラスごとの個別定義は不要 */
.is-hidden {
  display: none !important;
}

/* 事例・記事詳細ページの本文ブロック */
.article-block {
  margin-bottom: 3rem;
}

.article-block h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.article-block h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 1.75rem 0 0.75rem;
  color: var(--text-primary);
}

/* フォントポリシー整理（2026-09）: about.html/recruit.htmlに同一のインライン
   style="font-size: 1.25rem; margin-bottom: ...rem;"が計8箇所重複していたため
   共通クラス化。margin-bottomは元々1rem/1.25remの揺れがあったが、
   視覚的な差がごく僅かなため1.25remに統一した。 */
.subsection-title {
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
}

/* products.htmlの各製品カード見出し（.card-top-text内のh3）に同一の
   インラインstyleが4箇所重複していたため、.card-top-textにスコープした
   共通ルールに統合（.card-top-textはproducts.html専用クラス） */
.card-top-text h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* products.htmlのカテゴリ見出し（「エコ対応製品」「印刷製品」）に同一の
   インラインstyleが2箇所重複していたため共通クラス化 */
.category-heading {
  font-size: 1.75rem;
  font-weight: 800;
  margin-top: 0.5rem;
}

/* works.html（51枚のカード）・column.htmlの記事カード見出し（.work-info内のh4）に
   同一のインラインstyleが多数重複しているため共通ルールに統合。
   works.html側は51箇所あるため、実績一覧の共通テンプレート改善に合わせて
   別途インラインstyleを除去する予定（このルール自体は既に両ページに効いている） */
.work-info h4 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

/* ニュース管理画面（admin/）の画像挿入モーダルで選べる表示サイズは、
   img要素のwidth属性（例: width="25%"）としてそのまま保存される
   （Quillの画像フォーマットがwidth/height/alt/styleのみHTML⇔Delta変換で
   保持する仕様のため、class属性ではなくwidth属性を使っている）。
   94-11章：「HTMLで編集」からは100%を超える値（例: 300%）も自由に
   入力できる仕様のため、ここのmax-width:100%が実質的な上限として機能する
   ——widthが指定されていてもmax-widthを超える幅にはならない、というCSSの
   仕様上、記事コンテナ（.article-block、900px幅）を超えて画像が巨大化する
   ことはない。「最大幅を超える指定は最大幅までの拡大とする」という仕様は、
   このmax-width:100%の1行だけで実現している（widthとmax-widthが競合した
   場合は常にmax-widthが優先されるため、追加のJS等は不要）。 */
.article-block img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem 0;
}

.article-block p {
  color: var(--text-secondary);
  line-height: 1.9;
  font-size: 1rem;
}

/* 管理画面の本文エディタで書いた見出し・リスト（ニュース本文の「関連情報」等、257-8章）。
   静的ページでは見出しが各.article-blockの先頭に来るため、段落・リストの後ろに続く
   見出しにだけ上余白を付ける（先頭の見出しの見た目は変えない）。
   サイト全体でul/olのpaddingをリセットしているため、本文中のリストは行頭記号が
   本文の左端からはみ出していた。コラム（.column-article）は下に専用の指定がある。 */
.article-block:not(.column-article) p + h2,
.article-block:not(.column-article) ul + h2,
.article-block:not(.column-article) ol + h2 {
  margin-top: 2.5rem;
}

.article-block:not(.column-article) ul,
.article-block:not(.column-article) ol {
  color: var(--text-secondary);
  line-height: 1.9;
  padding-left: 1.4rem;
  margin: 0.75rem 0 1.25rem;
}

/* コラム記事本文（.column-article。admin/inc/column-renderer.php が付与）の補助スタイル。
   管理画面のサニタイザー（admin/inc/sanitize-html.php）はclass属性を通さないため、
   専用クラスではなく「書き方の形」で判定している。
   - 写真2枚の横並び：width="48%" の画像を、同じ段落内に空白を挟まず2枚続けて置く
     （画像挿入モーダルの4択（25/50/75/100%）に無い値にして、通常の画像と区別する）
   - キャプション：<em>だけで書いた段落（<p><em>…</em></p>）
   - 語り手の引用：<strong>だけで書いた段落（<p><strong>「…」</strong></p>）
   CSSでは段落内に地の文があるかどうかを判定できないため、コラム本文では
   文中の強調にem/strongを「その段落で唯一の要素」として使わない運用とする
   （使うとキャプション・引用の見た目になる）。 */
.column-article img[width="48%"] {
  display: inline-block;
  vertical-align: top;
  margin: 1.5rem 0 0.75rem;
}

.column-article img[width="48%"] + img[width="48%"] {
  margin-left: 4%;
}

.column-article p:has(> img[width="48%"]) {
  font-size: 0;
  line-height: 0;
}

.column-article p > em:only-child {
  display: block;
  font-style: normal;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-secondary);
  opacity: 0.85;
  margin: -0.75rem 0 2rem;
}

.column-article p > strong:only-child {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.8;
  color: var(--text-primary);
  border-left: 3px solid var(--accent-brass);
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin: 2rem 0 1.25rem;
}

.column-article p:has(> strong:only-child) + p > em:only-child {
  margin-top: -0.5rem;
  padding-left: 1.5rem;
}

.column-article h2 {
  margin-top: 3rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.column-article ul {
  color: var(--text-secondary);
  line-height: 1.9;
  padding-left: 1.4rem;
  margin: 0.75rem 0 1.25rem;
}

@media (max-width: 600px) {
  .column-article p > strong:only-child {
    font-size: 1.05rem;
    padding-left: 1rem;
  }
  .column-article h2 {
    font-size: 1.15rem;
    margin-top: 2.25rem;
  }
}

/* ニュース記事本文中のインラインリンク（管理画面のリッチテキストエディタから保存されるリンクを想定）。
   a要素はデフォルトでcolor: inheritのため、無指定だと本文と同じ色になり見分けがつかなかった。
   「関連情報」等で使う.cyber-linkの独自の見た目（太字・ホバー時のみ下線）は変更しないよう除外する。 */
.article-block a:not(.cyber-link) {
  color: var(--accent-brass-text);
  text-decoration: underline;
  text-decoration-color: rgba(184, 134, 11, 0.4);
}

.article-block a:not(.cyber-link):hover {
  color: var(--text-primary);
  text-decoration-color: currentColor;
}

/* text-block-plain内の無地のインラインリンク（プライバシーポリシー内のGoogle関連リンク等）。
   a要素はデフォルトでcolor: inheritのため、無指定だと本文と同じ色になり見分けがつかなかった。
   独自の見た目を持つ.cyber-link・.btn-matrixボタンは対象から除外する。 */
.text-block-plain a:not(.cyber-link):not(.btn-matrix) {
  color: var(--accent-brass-text);
  text-decoration: underline;
  text-decoration-color: rgba(184, 134, 11, 0.4);
}

.text-block-plain a:not(.cyber-link):not(.btn-matrix):hover {
  color: var(--text-primary);
  text-decoration-color: currentColor;
}

/* 新しいタブで開く外部リンクには、外部サイトへ移動することが視覚的に分かるよう
   小さな矢印アイコンを付加する（現状はprivacy.html内のGoogle関連リンクが対象） */
a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.25em;
  vertical-align: -0.05em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.article-hero-image {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 2.5rem;
  display: block;
}

.category-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--accent-corporate);
  background: var(--accent-corporate-glow);
  border: 1px solid rgba(38, 128, 0, 0.25);
  padding: 0.35rem 0.85rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
}

/* 関連リンクブロック */
.related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

/* アクセシビリティ: モーション低減設定時は装飾アニメーション・トランジションを無効化 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== スマホ・タブレットのスクロール負荷軽減（257-18章）=====
   ユーザー指摘「スマホでスクロールしたときの描画がついてこない」への対応。ユーザー了承のうえ、
   タッチ端末ではアニメーション・装飾より、スクロールの軽さを優先する（PCの見た目は変えない）。
   - backdrop-filter（背後をぼかす効果）は、スクロール中に毎コマ背後を描き直してぼかし直すため、
     スマホのGPUで特に重い。固定ヘッダー・実績カードの分類ラベル（実績一覧だけで51個）・
     上に戻るボタン・TOPの見出しまわりから外し、代わりに背景の不透明度を上げて見た目を保つ。
   - スクロールで浮かび上がる演出（.reveal-item）は、動く距離と時間を短くして軽くする。 */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(246, 245, 240, 0.97);
  }
  .work-overlay-tag,
  .hero-meta-badge,
  .hero-lead-text,
  .scroll-top-btn,
  .theme-preview-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .scroll-top-btn { background: rgba(255, 255, 255, 0.94); }
  .work-overlay-tag { background: rgba(255, 255, 255, 0.96); }
  .reveal-item { transition-duration: 0.45s; }
  .reveal-item.reveal-pending { transform: translateY(16px); }
}