

:root {
  --kj-navy: #0B2239;
  --kj-navy-d: #071829;
  --kj-ink: #16283C;
  --kj-ink-2: #3A4A5C;
  --kj-gold: #B08D45;
  --kj-gold-l: #C9A961;
  --kj-gold-d: #8C6D2F;
  --kj-bg-2: #F5F7F9;
  --kj-line: #D8DEE6;
  --kj-line-2: #E2E7EC;
  --kj-wrap: 1120px;
  --kj-mincho: 'Shippori Mincho B1', 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --kj-gothic: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
}

.kj-sec {
  font-family: var(--kj-gothic);
  color: var(--kj-ink);
  background: #fff;
  font-size: 18px;
  line-height: 1.9;
  letter-spacing: .02em;
  padding-block: clamp(80px, 9vw, 128px);
}
.kj-sec--alt { background: var(--kj-bg-2); }
.kj-sec--navy { background: var(--kj-navy); color: #fff; }
.kj-wrap { max-width: var(--kj-wrap); margin: 0 auto; padding-inline: 24px; }
.kj-label {
  font-size: 13px; letter-spacing: .32em; color: var(--kj-gold-d);
  margin: 0 0 28px; font-family: var(--kj-gothic);
}
.kj-sec--navy .kj-label { color: var(--kj-gold-l); }
.kj-h2 {
  font-family: var(--kj-mincho); font-weight: 600; letter-spacing: .04em; line-height: 1.5;
  font-size: clamp(27px, 3.6vw, 38px); margin: 0 0 clamp(48px, 5vw, 72px);
}
.kj-sec--navy .kj-h2 { margin-bottom: 24px; }
.kj-lead {
  font-size: 17px; color: #C3CEDA; max-width: 40em;
  margin: 0 0 clamp(48px, 5vw, 72px);
}
.kj-sec h3 { font-family: var(--kj-mincho); font-weight: 600; letter-spacing: .04em; margin: 0; }
.kj-sec p { margin: 0; }
.kj-sec ul { margin: 0; padding: 0; list-style: none; }
.kj-sec img { display: block; max-width: 100%; }

.kj-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 20px 44px; font-size: 17px; font-weight: 500; letter-spacing: .08em;
  border: 1px solid transparent; text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.kj-btn--gold { background: var(--kj-gold); color: #fff; }
.kj-btn--gold:hover { background: var(--kj-gold-l); color: #fff; }
.kj-btn--ghost { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(6,20,36,.35); }
.kj-btn--ghost:hover { border-color: #fff; color: #fff; }
.kj-btn--navy { background: var(--kj-navy); color: #fff; }
.kj-btn--navy:hover { background: var(--kj-gold); color: #fff; }

.kj-hero {
  position: relative; min-height: clamp(520px, 74vh, 760px);
  display: flex; align-items: center; overflow: hidden;
  background: var(--kj-navy); color: #fff;
  font-family: var(--kj-gothic);
}
.kj-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kj-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6,20,36,.92) 0%, rgba(6,20,36,.82) 42%, rgba(6,20,36,.35) 72%, rgba(6,20,36,.15) 100%);
}
.kj-hero__body { position: relative; width: 100%; padding-block: clamp(88px, 10vw, 140px); }
.kj-hero__copy { max-width: 40rem; }
.kj-hero .kj-label { color: var(--kj-gold-l); margin-bottom: 36px; }
.kj-hero h1 {
  font-family: var(--kj-mincho); font-weight: 600;
  font-size: clamp(34px, 5.4vw, 62px); line-height: 1.45; letter-spacing: .05em;
  margin: 0 0 40px; text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.kj-hero__lead {
  font-size: 19px; line-height: 2; color: #EDF1F5; max-width: 30em; margin: 0;
  text-shadow: 0 1px 16px rgba(0,0,0,.5);
}
.kj-hero__actions { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 52px; }

.kj-issues { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 56px; }
.kj-issues li {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 28px 0; border-bottom: 1px solid var(--kj-line);
}
.kj-check {
  flex: none; width: 28px; height: 28px; margin-top: 6px;
  border: 1px solid var(--kj-gold); color: var(--kj-gold-d);
  display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1;
}
.kj-issues span:last-child { font-size: 18px; line-height: 1.8; }

.kj-reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(40px, 4vw, 56px); }
.kj-reason { border-top: 2px solid var(--kj-navy); padding-top: 32px; }
.kj-reason__no { font-family: var(--kj-mincho); font-size: 15px; letter-spacing: .2em; color: var(--kj-gold); margin-bottom: 20px; }
.kj-reason h3 { font-size: 25px; line-height: 1.6; margin-bottom: 20px; }
.kj-reason p { font-size: 17px; line-height: 1.95; color: var(--kj-ink-2); }

.kj-programs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }
.kj-program { border: 1px solid rgba(255,255,255,.22); padding: 44px 36px 48px; }
.kj-program__label { font-size: 13px; letter-spacing: .24em; color: var(--kj-gold-l); margin-bottom: 24px; }
.kj-program h3 { font-size: 24px; line-height: 1.6; margin-bottom: 24px; }
.kj-program p { font-size: 17px; line-height: 1.95; color: #DCE3EA; margin-bottom: 28px; }
.kj-program ul { display: grid; gap: 12px; }
.kj-program li { font-size: 16px; line-height: 1.7; padding-left: 20px; border-left: 1px solid rgba(201,169,97,.6); }

.kj-person { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(48px, 5vw, 80px); align-items: start; }
.kj-person__photo { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; background: #EEF1F4; border: 1px solid var(--kj-line); }
.kj-person h2 { font-family: var(--kj-mincho); font-weight: 600; font-size: clamp(30px, 4vw, 40px); letter-spacing: .04em; line-height: 1.5; margin: 0 0 16px; }
.kj-person__role { font-size: 17px; letter-spacing: .1em; color: var(--kj-ink-2); margin-bottom: 40px; }
.kj-rule { width: 56px; height: 1px; background: var(--kj-gold); margin-bottom: 40px; }
.kj-person__text p { font-size: 18px; line-height: 2; }
.kj-person__text p + p { margin-top: 28px; }

.kj-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }
.kj-step { background: #fff; border: 1px solid var(--kj-line); padding: 44px 36px 48px; }
.kj-step__no { font-family: var(--kj-mincho); font-size: 40px; color: var(--kj-gold); line-height: 1; margin-bottom: 28px; }
.kj-step h3 { font-size: 23px; line-height: 1.6; margin-bottom: 18px; }
.kj-step p { font-size: 17px; line-height: 1.95; color: var(--kj-ink-2); }

.kj-cta { text-align: center; padding-block: clamp(84px, 10vw, 136px); }
.kj-cta .kj-wrap { max-width: 900px; }
.kj-cta h2 { font-family: var(--kj-mincho); font-weight: 600; font-size: clamp(30px, 4.6vw, 44px); line-height: 1.55; letter-spacing: .04em; margin: 0 0 36px; }
.kj-cta p { font-size: 18px; line-height: 2; color: #DCE3EA; margin: 0 0 56px; }
.kj-cta .kj-btn { padding: 24px clamp(32px, 8vw, 64px); font-size: 19px; letter-spacing: .1em; }
.kj-cta__note { font-size: 16px; letter-spacing: .14em; color: var(--kj-gold-l); margin: 28px 0 0; }

.craft-serve[data-design="konjo"] .craft-serve-nav {
  background: #fff; border-bottom: 1px solid var(--kj-line-2);
  box-shadow: 0 2px 0 0 var(--kj-navy);
}
.craft-serve[data-design="konjo"] .craft-serve-brand {
  font-family: var(--craft-font, var(--kj-mincho));
  font-weight: 600; letter-spacing: .1em; color: var(--kj-ink); font-size: 19px;
}
.craft-serve[data-design="konjo"] .craft-serve-menu { margin-left: auto; gap: 26px; }
.craft-serve[data-design="konjo"] .craft-serve-menu a {
  font-size: 15px; letter-spacing: .06em; color: var(--kj-ink);
  padding-bottom: 4px; border-bottom: 1px solid transparent;
}
.craft-serve[data-design="konjo"] .craft-serve-menu a:hover,
.craft-serve[data-design="konjo"] .craft-serve-menu a.is-current {
  color: var(--kj-gold-d); border-bottom-color: var(--kj-gold);
}
.craft-serve[data-design="konjo"] .craft-doc-btn {
  background: var(--kj-navy); color: #fff; border-radius: 0; letter-spacing: .08em;
}
.craft-serve[data-design="konjo"] .craft-doc-btn:hover { background: var(--kj-gold); color: #fff; }

.kj-sec, .kj-hero { scroll-margin-top: 76px; }

.craft-serve[data-design="konjo"] .anav-bar {
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--kj-line-2);
  box-shadow: 0 2px 0 0 var(--kj-navy);
}
.craft-serve[data-design="konjo"] .anav-brand {
  font-family: var(--kj-mincho); color: var(--kj-ink); letter-spacing: .1em;
}
.craft-serve[data-design="konjo"] .anav-link { color: var(--kj-ink); letter-spacing: .06em; }
.craft-serve[data-design="konjo"] .anav-link:hover { color: var(--kj-gold-d); border-bottom-color: var(--kj-gold); }
.craft-serve[data-design="konjo"] .anav-cta,
.craft-serve[data-design="konjo"] .anav-fixcta a {
  background: var(--kj-navy); color: #fff; border-radius: 0; letter-spacing: .08em;
}
.craft-serve[data-design="konjo"] .anav-cta:hover { background: var(--kj-gold); opacity: 1; }

@media (max-width: 820px) {
  .kj-sec { font-size: 17px; }
  .kj-hero__actions .kj-btn { width: 100%; }
  .kj-issues { gap: 0 32px; }
}
