@charset "UTF-8";
/* ===== SALUTO Brand Unified Styling ===== */
.kn-page { padding-top: 64px; background: #fff; min-height: 100vh; }
.kn-page.has-bc { padding-top: 0 !important; }

/* Breadcrumbs (Pixel-perfect width alignment) */
.kn-bc { margin-top: 64px; background: #0B1120; border-bottom: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; }
.kn-bc-in { max-width: 1160px; margin: 0 auto; padding: 12px 32px; box-sizing: border-box; }
.kn-bc-in ol { list-style: none !important; display: flex !important; align-items: center; justify-content: flex-start !important; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; }
.kn-bc-in li { list-style: none !important; font-size: .8rem; color: rgba(255, 255, 255, 0.6); font-weight: 500; display: inline-flex; align-items: center; }
.kn-bc-in li + li::before { content: '/'; margin: 0 10px; color: rgba(255, 255, 255, 0.25); font-size: 0.75rem; }
.kn-bc-in a { color: rgba(255, 255, 255, 0.65); text-decoration: none; transition: color .2s; }
.kn-bc-in a:hover { color: #38BDF8; }
.kn-bc-in li[aria-current="page"] { color: #FFFFFF; font-weight: 700; }


/* Dark Gradient Heroes (SALUTO Style) */
.kn-top-hero, .kn-about-hero {
  background: linear-gradient(135deg, #080F20 0%, #0F172A 50%, #172554 100%);
  position: relative;
  overflow: hidden;
  padding: 80px 0 72px;
}
.kn-top-hero::before, .kn-about-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.kn-top-hero-in, .kn-about-hero-in {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 48px;
  box-sizing: border-box;
}

/* Category Hero */
.kn-cat-hero {
  background: linear-gradient(135deg, #F8FAFC 0%, var(--blue-light) 100%);
  border-bottom: 1.5px solid var(--border-blue);
  padding: 56px 0 48px;
}
.kn-cat-hero-in {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 48px;
  box-sizing: border-box;
}

/* Article Layout */
.kn-hero-img {
  max-width: 1160px;
  margin: 28px auto 0;
  padding: 0 48px;
  box-sizing: border-box;
}
.kn-hero-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0,0,0,.05);
  display: block;
}
.kn-layout {
  max-width: 1160px;
  margin: 0 auto;
  padding: 64px 48px 96px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 56px;
  align-items: start;
  box-sizing: border-box;
}
.kn-main { min-width: 0; }
.kn-sidebar { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 24px; }

/* Article Typography */
.kn-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.kn-meta time { font-size: .78rem; color: var(--text-muted); font-weight: 600; }
.kn-h1 {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 900;
  line-height: 1.38;
  letter-spacing: -.025em;
  color: var(--text);
  margin-bottom: 20px;
}
.kn-lead {
  font-size: 1.04rem;
  line-height: 2;
  color: var(--text-mid);
  font-weight: 500;
  margin-bottom: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--border);
}

/* Table of Contents */
.kn-toc {
  background: var(--bg-soft);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 26px 30px;
  margin-bottom: 48px;
}
.kn-toc-ttl {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--blue-dark);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.kn-toc ol { list-style: none; counter-reset: toc; display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; }
.kn-toc li { counter-increment: toc; display: flex; align-items: baseline; gap: 10px; font-size: .9rem; }
.kn-toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: 'Inter', sans-serif;
  font-size: .72rem;
  font-weight: 800;
  color: #fff;
  background: var(--grad-main);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kn-toc a { color: var(--text-mid); text-decoration: none; font-weight: 600; line-height: 1.5; transition: color .2s; }
.kn-toc a:hover { color: var(--blue); }

/* Section Headings inside Article */
.kn-article h2 {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 64px 0 24px;
  padding: 18px 24px;
  background: var(--bg-soft);
  border-left: 5px solid var(--blue);
  border-radius: 0 12px 12px 0;
}
.kn-article p { font-size: 1rem; line-height: 2.05; color: var(--text-mid); margin-bottom: 24px; }
.kn-article strong { color: var(--text); font-weight: 800; }

/* Emp Voice (SALUTO Signature Voice Box) */
.emp-voice {
  margin-top: 14px;
  padding: 12px 16px;
  background: #F1F5F9;
  border-left: 3px solid #CBD5E1;
  border-radius: 0 8px 8px 0;
  font-size: .84rem;
  color: #475569;
  line-height: 1.6;
  font-style: italic;
  font-weight: 600;
}

/* Callout */
.kn-callout {
  border-left: 4px solid var(--blue);
  background: var(--blue-light);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
  margin: 28px 0;
}
.kn-callout p { font-size: .94rem; color: var(--blue-dark); line-height: 1.9; margin: 0; font-weight: 500; }
.kn-callout strong { color: var(--text); display: block; font-size: 1rem; margin-bottom: 6px; font-weight: 800; }

/* Article CTA Banner */
.kn-cta-block {
  background: var(--grad-main);
  border-radius: 20px;
  padding: 44px 36px;
  text-align: center;
  margin: 64px 0 48px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(37,99,235,.25);
}
.kn-cta-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.kn-cta-eyebrow {
  font-size: .75rem;
  font-weight: 800;
  color: rgba(255,255,255,.8);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 12px;
  position: relative;
}
.kn-cta-block h2 {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 900;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 12px;
  position: relative;
}
.kn-cta-block p {
  font-size: .94rem;
  color: rgba(255,255,255,.9);
  line-height: 1.85;
  margin-bottom: 28px;
  position: relative;
}
.kn-cta-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  position: relative;
}

/* Related Cards Grid */
.kn-related { margin-top: 64px; padding-top: 44px; border-top: 1.5px solid var(--border); }
.kn-related-ttl { font-size: .78rem; font-weight: 800; letter-spacing: .1em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 24px; }
.kn-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kn-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
  box-shadow: var(--shadow-sm);
  transition: all .25s cubic-bezier(.4,0,.2,1);
}
.kn-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-blue);
  box-shadow: var(--shadow-lg);
}
.kn-card-thumb { width: 100%; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-soft); }
.kn-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.kn-card:hover .kn-card-thumb img { transform: scale(1.04); }
.kn-card-body { padding: 16px 18px 20px; }
.kn-card-cat { font-size: .7rem; font-weight: 800; letter-spacing: .08em; color: var(--blue-dark); text-transform: uppercase; margin-bottom: 6px; }
.kn-card-title { font-size: .92rem; font-weight: 800; color: var(--text); line-height: 1.55; }
.kn-card-date { font-size: .72rem; color: var(--text-muted); margin-top: 10px; font-weight: 500; }

/* Article List in Category / Top */
.kn-article-list { display: flex; flex-direction: column; gap: 16px; }
.kn-article-row {
  display: flex;
  align-items: center;
  gap: 24px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: all .25s;
}
.kn-article-row:hover {
  border-color: var(--border-blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.kn-row-thumb {
  width: 220px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-soft);
  border: 1px solid var(--border);
}
.kn-row-thumb img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}
.kn-latest-thumb {
  width: 88px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: var(--bg-soft);
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.kn-latest-thumb img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.kn-row-body { flex: 1; min-width: 0; }
.kn-row-cat { font-size: .7rem; font-weight: 800; letter-spacing: .08em; color: var(--blue-dark); text-transform: uppercase; margin-bottom: 6px; }
.kn-row-title { font-size: 1.05rem; font-weight: 800; color: var(--text); line-height: 1.5; margin-bottom: 8px; }
.kn-row-desc { font-size: .88rem; color: var(--text-mid); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kn-row-date { font-size: .75rem; color: var(--text-muted); margin-top: 8px; font-weight: 500; }

/* About Page Feature Grid */
.about-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Responsive */
@media (max-width: 960px) {
  .kn-layout { grid-template-columns: 1fr; padding: 48px 32px 72px; gap: 40px; }
  .kn-sidebar { position: static; }
  .kn-card-grid { grid-template-columns: repeat(2, 1fr); }
  .kn-hero-img { padding: 0 32px; }
  .about-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 768px) {
  .kn-bc-in { padding: 10px 20px; }
  .kn-layout { padding: 32px 20px 56px; }
  .kn-top-hero-in, .kn-cat-hero-in, .kn-about-hero-in { padding: 0 20px; }
  .kn-top-hero, .kn-about-hero { padding: 60px 0 52px; }
  .kn-cat-hero { padding: 36px 0 30px; }
  .kn-hero-img { padding: 0 20px; margin-top: 16px; }
  .kn-hero-img img { height: auto; border-radius: 8px; }
  .kn-card-grid { grid-template-columns: 1fr; }
  .kn-article-row { flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px; }
  .kn-row-thumb { width: 100%; aspect-ratio: 16 / 9; height: auto; }
  .kn-latest-thumb { width: 72px; aspect-ratio: 16 / 9; height: auto; }
  .about-grid-4 { grid-template-columns: 1fr; gap: 16px; }
  .about-cta-outer { padding: 48px 20px !important; }
  .kn-cta-block { padding: 32px 20px; }
  .kn-cta-btns { flex-direction: column; width: 100%; }
  .kn-cta-btns .btn { width: 100%; }
}

/* ===== SNS Share Buttons (Professional Minimal) ===== */
.kn-share-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 24px 0 32px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.kn-share-label {
  font-size: .75rem;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-right: 4px;
}
.kn-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .2s;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-mid);
  cursor: pointer;
  line-height: 1;
}
.kn-share-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.kn-share-btn.x:hover { background: #0F172A; color: #fff; border-color: #0F172A; }
.kn-share-btn.fb:hover { background: #1877F2; color: #fff; border-color: #1877F2; }
.kn-share-btn.hatebu:hover { background: #00A4DE; color: #fff; border-color: #00A4DE; }
.kn-share-btn.copy:hover { background: var(--blue-light); color: var(--blue-dark); border-color: var(--border-blue); }

/* Deep Content Boxes */
.kn-deep-box {
  background: #fff;
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--blue);
  border-radius: 12px;
  padding: 24px 28px;
  margin: 32px 0;
  box-shadow: var(--shadow-sm);
}
.kn-deep-box-ttl {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -.01em;
}
.kn-deep-box p {
  font-size: .95rem;
  line-height: 1.95;
  color: var(--text-mid);
  margin-bottom: 0;
}

/* Feature Spec Highlight Box */
.kn-spec-card {
  background: linear-gradient(135deg, #F8FAFC 0%, var(--blue-light) 100%);
  border: 1.5px solid var(--border-blue);
  border-radius: 14px;
  padding: 24px 26px;
  margin: 28px 0;
}
.kn-spec-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  color: var(--blue-dark);
  letter-spacing: .08em;
  background: #DBEAFE;
  padding: 3px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.kn-spec-ttl {
  font-size: 1.02rem;
  font-weight: 900;
  color: #1E3A8A;
  margin-bottom: 8px;
}
.kn-spec-card p {
  font-size: .92rem;
  color: #1E40AF;
  line-height: 1.85;
  margin: 0;
}