:root {
  --kb-blue: #0056b8;
  --kb-blue2: #176fc9;
  --kb-text: #26384a;
  --kb-muted: #5f6f7e;
  --kb-border: #e5e9ee;
  --kb-bg: #f6f8fa;
  --kb-footer: #f4f4f4;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fff;
  color: var(--kb-text);
  font-family: "Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

.kbWrap {
  width: min(920px,calc(100% - 48px));
  margin: 0 auto;
}

.kbHeader {
  position: relative;
  z-index: 50;
  background: #fff;
}

.kbHeader__inner {
  height: 58px;
  width: min(1320px,calc(100% - 56px));
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.kbHeader__logo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  color: #1c426a;
}

.kbHeader__logoMain {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
}

.kbHeader__logoSub {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #7d8994;
}

.kbHeader__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 32px;
}

.kbHeader__nav a {
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: #3a4856;
}

.kbHeader__entry {
  margin-left: 28px;
  display: flex;
  width: 126px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: #1264be;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.kbHeader__menu {
  display: none;
}

.kbMobileNav {
  display: none;
}

.kbHero {
  position: relative;
  height: 620px;
  overflow: hidden;
  background: #fff;
}

.kbHero__inner {
  position: relative;
  z-index: 2;
  width: min(1120px,calc(100% - 96px));
  margin: 0 auto;
  padding-top: 198px;
}

.kbHero__brand {
  margin: 0 0 7px 3px;
  color: #000000;
  font-size: 12px;
  letter-spacing: .12em;
  font-weight: 600;
}

.kbHero__display {
  margin: 0;
  color: #353a3f;
  font-size: 84px;
  font-weight: 700;
  line-height: .88;
  letter-spacing: -.055em;
}

.kbHero__display span {
  background: linear-gradient(90deg,#657583,#d4a6b6 25%,#9cc5d3 52%,#c6a4ce 73%,#82a6c0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kbHero h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

.kbHero__lead {
  margin: 18px 0 0;
  color: #1e2f3f;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .02em;
}

.kbHero__art {
  position: absolute;
  inset: 0;
}

.kbHero__mesh {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg,transparent,#dae1e6 18%,#ced8df 70%,transparent);
  transform-origin: left center;
}

.kbHero__mesh--1 {
  width: 860px;
  top: 74px;
  left: 150px;
  transform: rotate(7deg);
}

.kbHero__mesh--2 {
  width: 770px;
  top: 148px;
  left: 340px;
  transform: rotate(-6deg);
}

.kbHero__mesh--3 {
  width: 680px;
  top: 36px;
  right: -70px;
  transform: rotate(18deg);
}

.kbShape {
  position: absolute;
  opacity: .56;
  filter: saturate(.75);
}

.kbShape--1 {
  width: 78px;
  height: 68px;
  top: 94px;
  right: 26%;
  background: linear-gradient(135deg,#f7cabf,#a5d4d7 52%,#af9bd0);
  clip-path: polygon(50% 0,95% 24%,81% 84%,19% 100%,0 38%);
}

.kbShape--2 {
  width: 52px;
  height: 48px;
  top: 58px;
  right: 12%;
  background: linear-gradient(135deg,#e6d7a3,#c0b4e7 60%,#7cc0d3);
  clip-path: polygon(50% 0,100% 50%,56% 100%,0 67%,8% 10%);
}

.kbShape--3 {
  width: 42px;
  height: 42px;
  top: 162px;
  right: 17%;
  background: linear-gradient(135deg,#cae5e0,#efc1cb,#bba2d5);
  clip-path: polygon(50% 0,95% 36%,82% 91%,22% 100%,0 38%);
}

.kbShape--4 {
  width: 30px;
  height: 30px;
  top: 142px;
  right: 41%;
  background: linear-gradient(135deg,#e4c1ba,#95ced4);
  clip-path: polygon(50% 0,100% 40%,73% 100%,0 71%,9% 18%);
}

.kbShape--5 {
  width: 22px;
  height: 22px;
  top: 73px;
  right: 38%;
  background: linear-gradient(135deg,#f4c8a9,#b7d1e0);
  clip-path: polygon(50% 0,100% 35%,73% 100%,0 77%,5% 16%);
}

.kbSection {
  padding: 112px 0;
}

.kbSectionHead {
  margin-bottom: 64px;
}

.kbSectionHead p {
  margin: 0 0 18px;
  color: #0c61bd;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
}

.kbSectionHead h2 {
  margin: 0;
  color: #0c5eb8;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: .02em;
}

.kbFeature {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 54px;
  align-items: center;
  margin-bottom: 64px;
  text-decoration: none;
}

.kbFeature__image {
  overflow: hidden;
  border-radius: 9px;
  background: #f3f5f7;
}

.kbFeature__image img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.kbFeature__text h3 {
  margin: 0;
  color: #2e3d4a;
  font-size: 27px;
  font-weight: 600;
}

.kbFeature__text p {
  margin: 18px 0 0;
  color: #536372;
  font-size: 15px;
  line-height: 2;
}

.kbMore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 19px;
  color: #0d63be;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.kbMore i {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1466bc;
  color: #fff;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 11px;
}

.kbMore--right {
  float: right;
}

.kbCards {
  display: grid;
  gap: 36px;
}

.kbCards--3 {
  grid-template-columns: repeat(3,1fr);
}

.kbCard {
  position: relative;
  overflow: hidden;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--kb-border);
  text-decoration: none;
}

.kbCard img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.kbCard>div {
  position: relative;
  padding: 18px 18px 16px;
  min-height: 164px;
}

.kbCard h3 {
  margin: 0;
  color: #2e3d4a;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.55;
}

.kbCard p {
  margin: 10px 0 0;
  color: #596875;
  font-size: 14px;
  line-height: 1.85;
}

.kbCard .kbMore {
  margin-top: 14px;
}

.kbCircle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: #1766bc;
  color: #fff;
  font-size: 11px;
}

.kbSectionLink {
  display: flex;
  justify-content: flex-end;
  margin-top: 36px;
}

.kbSectionLink a {
  color: #0d63be;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.kbSectionLink i {
  display: inline-flex;
  margin-left: 7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: #1565bb;
  color: #fff;
  font-style: normal;
}

.kbEnvironment {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 58px;
}

.kbEnvironment__item img {
  display: block;
  width: 100%;
  aspect-ratio: 16/6.2;
  object-fit: cover;
  border-radius: 9px;
}

.kbEnvironment__item h3 {
  margin: 26px 0 0;
  color: #2e3d4a;
  font-size: 19px;
  font-weight: 600;
}

.kbEnvironment__item p {
  margin: 16px 0 0;
  color: #596875;
  font-size: 14px;
  line-height: 1.95;
}

.kbTextLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 16px;
}

.kbTextLinks a {
  color: #0e61b8;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kbSectionHead--link {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.kbSectionHead--link>a {
  margin-bottom: 4px;
  color: #0d63be;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.kbPeople {
  overflow: hidden;
  border: 1px solid var(--kb-border);
  border-radius: 9px;
  background: #fff;
  text-decoration: none;
}

.kbPeople img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.kbPeople>div {
  padding: 18px 16px 20px;
}

.kbPeople span {
  display: inline-flex;
  padding: 3px 7px;
  background: #edf4fb;
  color: #0f5fad;
  font-size: 10px;
}

.kbPeople h3 {
  margin: 12px 0 0;
  color: #2d3d4c;
  font-size: 17px;
  font-weight: 600;
}

.kbPeople p {
  margin: 12px 0 0;
  color: #5a6875;
  font-size: 13px;
  line-height: 1.75;
}

.kbPeople b {
  display: inline-flex;
  margin-top: 18px;
  padding: 5px 14px;
  border-radius: 2px;
  background: #1566bc;
  color: #fff;
  font-size: 10px;
  font-weight: 500;
}

.kbJobs {
  padding: 112px 0 96px;
}

.kbJobs h2 {
  margin: 0 0 48px;
  color: #0d5fb8;
  font-size: 30px;
  font-weight: 600;
}

.kbJobs__table {
  border-top: 1px solid #edf0f2;
}

.kbJobs__row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 32px;
  padding: 24px 0;
  border-bottom: 1px solid #edf0f2;
}

.kbJobs__row h3 {
  margin: 2px 0 0;
  color: #40505f;
  font-size: 14px;
  font-weight: 600;
}

.kbJobs__row>div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.kbJobs__row a {
  color: #536372;
  font-size: 13px;
  text-decoration: none;
}

.kbJobs__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 34px;
  padding: 18px 20px;
  border: 1px solid #e1e7ec;
  color: #0d63be;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.kbJobs__all b {
  display: flex;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: #1566bc;
  color: #fff;
  font-size: 13px;
  font-weight: 400;
}

.kbRelated {
  padding: 48px 0 60px;
  background: #f6f7f8;
}

.kbRelated__head p {
  margin: 0 0 20px;
  color: #596977;
  font-size: 12px;
  font-weight: 600;
}

.kbRelated__track {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 18px;
}

.kbRelated__track a {
  text-decoration: none;
}

.kbRelated__track img {
  display: block;
  width: 100%;
  aspect-ratio: 16/8;
  object-fit: cover;
  border: 1px solid #e4e9ed;
}

.kbRelated__track strong {
  display: block;
  margin-top: 8px;
  color: #455563;
  font-size: 12px;
  font-weight: 500;
}

.kbFooter {
  padding: 70px 0 30px;
  background: #f3f4f5;
}

.kbFooter__desktop {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 32px;
}

.kbFooter__desktop h3 {
  margin: 0 0 14px;
  color: #2f4558;
  font-size: 13px;
}

.kbFooter__desktop a {
  display: block;
  margin: 7px 0;
  color: #667481;
  font-size: 11px;
  text-decoration: none;
}

.kbFooter__mobile {
  display: none;
}

.kbFooter__bottom {
  display: grid;
  grid-template-columns: 190px 1fr auto;
  gap: 24px;
  align-items: end;
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid #dfe4e8;
}

.kbFooter__brand strong {
  display: block;
  color: #1a486f;
  font-size: 15px;
}

.kbFooter__brand span {
  display: block;
  margin-top: 4px;
  color: #7a8793;
  font-size: 10px;
}

.kbFooter__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.kbFooter__links a,
.kbFooter__bottom small {
  color: #7a8793;
  font-size: 10px;
  text-decoration: none;
}

@media screen and (max-width:1080px) {
  .kbWrap {
    width: 90%;
  }

  .kbHeader__inner {
    width: 100%;
    height: 52px;
    padding: 0 4%;
  }

  .kbHeader__logoMain {
    font-size: 4vw;
  }

  .kbHeader__logoSub {
    display: none;
  }

  .kbHeader__nav {
    display: none;
  }

  .kbHeader__entry {
    width: 21vw;
    height: 52px;
    margin-left: auto;
    font-size: 3.2vw;
  }

  .kbHeader__menu {
    display: flex;
    width: 13vw;
    height: 52px;
    padding: 0;
    border: 0;
    background: #fff;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2vw;
  }

  .kbHeader__menu span {
    display: block;
    width: 4.6vw;
    height: 1px;
    background: #4b5e70;
  }

  .kbMobileNav {
    position: fixed;
    z-index: 90;
    top: 52px;
    left: 0;
    right: 0;
    background: #fff;
    padding: 4% 7% 8%;
    border-top: 1px solid #edf0f3;
    box-shadow: 0 14px 28px rgba(30,54,78,.12);
  }

  .kbMobileNav:not([hidden]) {
    display: block;
  }

  .kbMobileNav a {
    display: block;
    padding: 3.8vw 0;
    border-bottom: 1px solid #edf0f3;
    color: #3c4d5e;
    font-size: 4vw;
    text-decoration: none;
  }

  .kbHero {
    height: 129vw;
    min-height: 129vw;
  }

  .kbHero__inner {
    width: 90%;
    padding-top: 38vw;
  }

  .kbHero__brand {
    margin-bottom: 1vw;
    font-size: 2.8vw;
  }

  .kbHero__display {
    font-size: 14.5vw;
    line-height: .91;
  }

  .kbHero__lead {
    width: 84%;
    margin-top: 4.5vw;
    font-size: 4.6vw;
    line-height: 1.65;
  }

  .kbHero__mesh--1 {
    width: 120vw;
    top: 12vw;
    left: 11vw;
  }

  .kbHero__mesh--2 {
    width: 105vw;
    top: 28vw;
    left: 30vw;
  }

  .kbHero__mesh--3 {
    width: 100vw;
    top: 2vw;
    right: -38vw;
  }

  .kbShape--1 {
    width: 16vw;
    height: 15vw;
    top: 16vw;
    right: 28vw;
  }

  .kbShape--2 {
    width: 11vw;
    height: 10vw;
    top: 8vw;
    right: 7vw;
  }

  .kbShape--3 {
    width: 9vw;
    height: 9vw;
    top: 31vw;
    right: 10vw;
  }

  .kbShape--4 {
    width: 7vw;
    height: 7vw;
    top: 26vw;
    right: 47vw;
  }

  .kbShape--5 {
    width: 5vw;
    height: 5vw;
    top: 13vw;
    right: 42vw;
  }

  .kbSection {
    padding: 13vw 0;
  }

  .kbHero + .kbSection {
    padding-top: 17vw;
  }

  .kbSectionHead {
    margin-bottom: 12vw;
  }

  .kbSectionHead p {
    margin-bottom: 2.8vw;
    font-size: 3vw;
  }

  .kbSectionHead h2 {
    font-size: 6.8vw;
  }

  .kbFeature {
    grid-template-columns: 1fr;
    gap: 8vw;
    margin-bottom: 13vw;
  }

  .kbFeature__image {
    border-radius: 2.3vw;
  }

  .kbFeature__text h3 {
    font-size: 5vw;
  }

  .kbFeature__text p {
    margin-top: 5vw;
    font-size: 4vw;
    line-height: 1.9;
  }

  .kbMore {
    margin-top: 5vw;
    font-size: 3.2vw;
  }

  .kbMore i {
    width: 5.4vw;
    height: 5.4vw;
    font-size: 2.8vw;
  }

  /* Reference-faithful mobile rule: every principal card is one full-width column. */
  .kbCards--3,
  .kbWorkCards,
  .kbPeopleCards,
  .kbEnvironment {
    grid-template-columns: 1fr;
    gap: 13vw;
  }

  .kbCard,
  .kbPeople {
    width: 100%;
    border-radius: 2.4vw;
  }

  .kbCard img,
  .kbPeople img {
    width: 100%;
    aspect-ratio: 16/8.8;
    object-fit: cover;
  }

  .kbCard>div {
    min-height: 0;
    padding: 5.2vw 4.6vw 5.8vw;
  }

  .kbCard h3 {
    font-size: 4.7vw;
  }

  .kbCard p {
    margin-top: 3.6vw;
    font-size: 3.9vw;
    line-height: 1.75;
  }

  .kbCard .kbMore {
    margin-top: 5vw;
  }

  .kbCircle {
    right: 3.3vw;
    bottom: 3.3vw;
    width: 5vw;
    height: 5vw;
    font-size: 2.8vw;
  }

  .kbSectionLink {
    justify-content: flex-end;
    margin-top: 8vw;
  }

  .kbSectionLink a {
    font-size: 3.2vw;
  }

  .kbSectionLink i {
    width: 5vw;
    height: 5vw;
    margin-left: 1.4vw;
  }

  .kbEnvironment {
    gap: 15vw;
  }

  .kbEnvironment__item img {
    aspect-ratio: 16/8;
    border-radius: 2.3vw;
  }

  .kbEnvironment__item h3 {
    margin-top: 7vw;
    font-size: 4.8vw;
  }

  .kbEnvironment__item p {
    margin-top: 4.2vw;
    font-size: 3.9vw;
    line-height: 1.85;
  }

  .kbTextLinks {
    display: block;
    margin-top: 4.5vw;
  }

  .kbTextLinks a {
    display: block;
    margin: 2.6vw 0;
    font-size: 3.5vw;
  }

  .kbMore--right {
    float: none;
    display: flex;
    justify-content: flex-end;
  }

  .kbSectionHead--link {
    align-items: flex-end;
  }

  .kbSectionHead--link>a {
    margin-bottom: 1vw;
    font-size: 3vw;
  }

  .kbPeople>div {
    padding: 5.2vw 4.6vw 5.8vw;
  }

  .kbPeople span {
    padding: 1vw 1.8vw;
    font-size: 2.7vw;
  }

  .kbPeople h3 {
    margin-top: 3.2vw;
    font-size: 4.6vw;
  }

  .kbPeople p {
    margin-top: 3.2vw;
    font-size: 3.8vw;
    line-height: 1.7;
  }

  .kbPeople b {
    margin-top: 4.5vw;
    padding: 1.4vw 4vw;
    font-size: 2.8vw;
  }

  .kbJobs {
    padding: 17vw 0 15vw;
  }

  .kbJobs h2 {
    margin-bottom: 8vw;
    font-size: 6.2vw;
  }

  .kbJobs__row {
    grid-template-columns: 1fr;
    gap: 4vw;
    padding: 7vw 0;
  }

  .kbJobs__row h3 {
    font-size: 4.2vw;
  }

  .kbJobs__row>div {
    display: block;
  }

  .kbJobs__row a {
    display: block;
    padding: 3vw 0;
    border-bottom: 1px dotted #e4e9ed;
    font-size: 3.8vw;
  }

  .kbJobs__row a:last-child {
    border-bottom: 0;
  }

  .kbJobs__all {
    margin-top: 7vw;
    padding: 5vw 4.5vw;
    font-size: 3.6vw;
  }

  .kbJobs__all b {
    width: 6vw;
    height: 6vw;
    font-size: 3.5vw;
  }

  .kbRelated {
    padding: 10vw 0 12vw;
  }

  .kbRelated__head p {
    margin-bottom: 4vw;
    font-size: 3.2vw;
  }

  .kbRelated__track {
    display: flex;
    gap: 4vw;
    overflow-x: auto;
    padding-bottom: 2vw;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .kbRelated__track a {
    flex: 0 0 76%;
    scroll-snap-align: start;
  }

  .kbRelated__track img {
    aspect-ratio: 16/8.2;
  }

  .kbRelated__track strong {
    margin-top: 2.8vw;
    font-size: 3.3vw;
  }

  .kbFooter {
    padding: 11vw 0 6vw;
  }

  .kbFooter__desktop {
    display: none;
  }

  .kbFooter__mobile {
    display: block;
    border-top: 1px solid #dde3e8;
  }

  .kbFooter__mobile details {
    border-bottom: 1px solid #dde3e8;
  }

  .kbFooter__mobile summary {
    position: relative;
    padding: 5.2vw 1vw;
    list-style: none;
    color: #34485b;
    font-size: 4vw;
    font-weight: 600;
    cursor: pointer;
  }

  .kbFooter__mobile summary::-webkit-details-marker {
    display: none;
  }

  .kbFooter__mobile summary:after {
    content: "＋";
    position: absolute;
    right: 1vw;
    top: 50%;
    transform: translateY(-50%);
    color: #46647f;
    font-size: 4vw;
    font-weight: 400;
  }

  .kbFooter__mobile details[open] summary:after {
    content: "−";
  }

  .kbFooter__mobile details>div {
    padding: 0 1vw 5vw;
  }

  .kbFooter__mobile a {
    display: block;
    padding: 2.6vw 0;
    color: #667583;
    font-size: 3.6vw;
    text-decoration: none;
  }

  .kbFooter__bottom {
    grid-template-columns: 1fr;
    gap: 5vw;
    margin-top: 10vw;
    padding-top: 6vw;
  }

  .kbFooter__brand strong {
    font-size: 4.2vw;
  }

  .kbFooter__brand span {
    font-size: 2.8vw;
  }

  .kbFooter__links {
    display: block;
  }

  .kbFooter__links a {
    display: block;
    padding: 1.2vw 0;
    font-size: 3.2vw;
  }

  .kbFooter__bottom small {
    font-size: 2.8vw;
  }
}

/* v6: image proportions / crop positions, modeled after the reference site's visual rhythm. */
.kbImg {
  object-fit: cover;
}

/* COMPANY: reference uses a calmer 3:2-ish landscape rather than shallow 16:9 tiles. */
.kbFeature__image {
  aspect-ratio: 3/2;
}

.kbFeature__image img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  background: #f6f8fa;
}

.kbCard img {
  aspect-ratio: 3/2;
  object-fit: cover;
}

/* WORKS: portraits and workplace photos keep faces/hands in the upper-middle focal band. */
.kbImg--manager {
  object-position: 50% 34%;
}

.kbImg--shopstaff {
  object-position: 34% 48%;
}

.kbImg--bilingual {
  object-position: 50% 43%;
}

.kbImg--women {
  object-position: 50% 44%;
}

.kbImg--web {
  object-position: 50% 50%;
}

.kbImg--office {
  object-position: 58% 45%;
}

/* COMPANY cards */
.kbImg--owner {
  object-position: 50% 46%;
}

.kbImg--group {
  object-position: 50% 43%;
}

.kbImg--training {
  object-position: 50% 47%;
}

/* ENVIRONMENT: reference uses broad banners, but not extremely shallow cinematic strips. */
.kbEnvironment__item img {
  aspect-ratio: 2.08/1;
  object-fit: cover;
}

.kbImg--environmentTraining {
  object-position: 50% 47%;
}

.kbImg--environmentWork {
  object-position: 50% 46%;
}

/* PEOPLE: slightly taller than 16:9 so faces remain readable; reference gives people more visual presence. */
.kbPeople img {
  aspect-ratio: 1.58/1;
  object-fit: cover;
}

.kbImg--peopleManager {
  object-position: 50% 31%;
}

.kbImg--peopleShop {
  object-position: 50% 45%;
}

.kbImg--peopleWeb {
  object-position: 50% 43%;
}

.kbImg--peopleNew {
  object-position: 50% 42%;
}

.kbImg--peopleWomen {
  object-position: 50% 38%;
}

.kbImg--peopleGlobal {
  object-position: 50% 42%;
}

/* Related content remains compact, like the small link cards in the reference footer zone. */
.kbRelated__track img {
  aspect-ratio: 1.85/1;
  object-fit: cover;
  object-position: center;
}

@media screen and (max-width:1080px) {
  /* Reference mobile keeps the same image logic instead of flattening everything into wide banners. */
  .kbFeature__image {
    aspect-ratio: 1.49/1;
  }

  .kbFeature__image img {
    height: 100%;
    object-fit: contain;
    background: #f6f8fa;
  }

  .kbCard img {
    aspect-ratio: 1.52/1;
  }

  .kbPeople img {
    aspect-ratio: 1.56/1;
  }

  .kbEnvironment__item img {
    aspect-ratio: 1.78/1;
  }

  .kbRelated__track img {
    aspect-ratio: 1.75/1;
  }

  .kbImg--manager {
    object-position: 50% 29%;
  }

  .kbImg--shopstaff {
    object-position: 31% 46%;
  }

  .kbImg--peopleManager {
    object-position: 50% 27%;
  }

  .kbImg--peopleWomen {
    object-position: 50% 34%;
  }
}

/* ==========================================================
   v7 UI fidelity: buttons, radii, borders, tonal hierarchy
   Reference principle: minimal ornament, one dominant blue,
   small circular arrows, subtle corners, hairline borders.
   ========================================================== */
:root {
  --kb-blue: #0066b3;
  --kb-blue-hover: #005395;
  --kb-blue-soft: #edf5fb;
  --kb-blue-pale: #f5f9fc;
  --kb-text: #333f49;
  --kb-text-strong: #273642;
  --kb-muted: #65717c;
  --kb-border: #dfe5ea;
  --kb-border-soft: #e9edf0;
  --kb-bg: #f7f9fa;
  --kb-footer: #f3f4f5;
}

/* Header CTA: compact capsule like the reference header action. */
.kbHeader__entry {
  border-radius: 999px;
  background: var(--kb-blue);
  transition: background-color .18s ease;
}

.kbHeader__entry:hover {
  background: var(--kb-blue-hover);
}

/* Principal image/card corners are restrained, not app-like. */
.kbFeature__image,
.kbCard,
.kbEnvironment__item img,
.kbPeople {
  border-radius: 6px;
}

.kbCard,
.kbPeople {
  border: 1px solid var(--kb-border);
  box-shadow: none;
}

/* Reference-style text action: label + small blue circle. */
.kbMore,
.kbSectionLink a,
.kbSectionHead--link>a {
  color: var(--kb-blue);
  font-weight: 600;
}

.kbMore i,
.kbSectionLink i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--kb-blue);
  color: #fff;
  line-height: 1;
  transition: background-color .18s ease,transform .18s ease;
}

.kbMore:hover i,
.kbSectionLink a:hover i {
  background: var(--kb-blue-hover);
  transform: translateX(2px);
}

/* Small arrow at the lower-right of WORKS cards. */
.kbCircle {
  width: 20px;
  height: 20px;
  right: 14px;
  bottom: 14px;
  background: var(--kb-blue);
  border-radius: 50%;
}

.kbCard:hover .kbCircle {
  background: var(--kb-blue-hover);
}

/* PEOPLE: reference uses a compact blue capsule, not a square button. */
.kbPeople b {
  min-width: 76px;
  min-height: 22px;
  padding: 4px 14px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: var(--kb-blue);
  color: #fff;
  font-size: 10px;
  letter-spacing: .02em;
}

.kbPeople:hover b {
  background: var(--kb-blue-hover);
}

/* Tags remain quiet; they should not compete with names and portraits. */
.kbPeople span {
  border-radius: 2px;
  background: var(--kb-blue-soft);
  color: #005ba4;
}

/* Job-list master CTA: hairline box + circular plus. */
.kbJobs__all {
  border: 1px solid var(--kb-border);
  border-radius: 2px;
  background: #fff;
  color: var(--kb-blue);
  transition: border-color .18s ease,background-color .18s ease;
}

.kbJobs__all:hover {
  border-color: #cbd5dc;
  background: #fbfcfd;
}

.kbJobs__all b {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--kb-blue);
}

/* Borders: unify all dividers to the same quiet gray. */
.kbJobs__table {
  border-top-color: var(--kb-border-soft);
}

.kbJobs__row {
  border-bottom-color: var(--kb-border-soft);
}

.kbRelated__track img {
  border-color: var(--kb-border);
}

.kbFooter__bottom,
.kbFooter__mobile,
.kbFooter__mobile details {
  border-color: var(--kb-border);
}

.kbMobileNav,
.kbMobileNav a {
  border-color: var(--kb-border-soft);
}

/* Tonal hierarchy: one Recruit-like blue, neutral copy, quiet surfaces. */
.kbSectionHead p,
.kbSectionHead h2,
.kbJobs h2 {
  color: var(--kb-blue);
}

.kbFeature__text h3,
.kbCard h3,
.kbEnvironment__item h3,
.kbPeople h3 {
  color: var(--kb-text-strong);
}

.kbFeature__text p,
.kbCard p,
.kbEnvironment__item p,
.kbPeople p,
.kbJobs__row a {
  color: var(--kb-muted);
}

.kbRelated {
  background: var(--kb-bg);
}

.kbFooter {
  background: var(--kb-footer);
}

.kbTextLinks a {
  color: var(--kb-blue);
}

/* Hover behavior is restrained: no lift/shadow; only image/text/arrow feedback. */
.kbCard,
.kbPeople,
.kbFeature,
.kbEnvironment__item,
.kbRelated__track a {
  transition: border-color .18s ease,color .18s ease;
}

.kbCard:hover,
.kbPeople:hover {
  border-color: #cbd4dc;
}

.kbCard img,
.kbPeople img,
.kbFeature__image img,
.kbEnvironment__item img,
.kbRelated__track img {
  transition: transform .28s ease;
}

@media (hover:hover) {
  .kbCard:hover img,
  .kbPeople:hover img,
  .kbFeature:hover .kbFeature__image img,
  .kbEnvironment__item:hover img,
  .kbRelated__track a:hover img {
    transform: scale(1.012);
  }
}

@media screen and (max-width:1080px) {
  .kbHeader__entry {
    border-radius: 0;
  }

  .kbFeature__image,
  .kbCard,
  .kbEnvironment__item img,
  .kbPeople {
    border-radius: 1.3vw;
  }

  .kbMore i,
  .kbSectionLink i,
  .kbCircle {
    width: 5.1vw;
    height: 5.1vw;
  }

  .kbCircle {
    right: 3.5vw;
    bottom: 3.5vw;
  }

  .kbPeople span {
    border-radius: .5vw;
  }

  .kbPeople b {
    min-width: 20vw;
    min-height: 5.6vw;
    padding: 1.1vw 3.8vw;
    border-radius: 999px;
    font-size: 2.7vw;
  }

  .kbJobs__all {
    border-radius: .5vw;
    border-color: var(--kb-border);
  }

  .kbJobs__all b {
    width: 6.2vw;
    height: 6.2vw;
  }
}

/* ==========================================================
   v8 SEO internal-link refinement
   Keep the visual system intact while surfacing priority pages.
   ========================================================== */
.kbSectionLinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 14px 24px;
  margin-top: 36px;
}

.kbSectionLinks a {
  color: var(--kb-blue);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.kbSectionLinks i {
  display: inline-flex;
  width: 18px;
  height: 18px;
  margin-left: 7px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--kb-blue);
  color: #fff;
  font-style: normal;
  font-size: 11px;
}

.kbEvidenceLinks {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  margin-top: 54px;
  border-top: 1px solid var(--kb-border-soft);
  border-bottom: 1px solid var(--kb-border-soft);
}

.kbEvidenceLinks a {
  position: relative;
  min-height: 116px;
  padding: 22px 42px 22px 20px;
  border-right: 1px solid var(--kb-border-soft);
  text-decoration: none;
}

.kbEvidenceLinks a:last-child {
  border-right: 0;
}

.kbEvidenceLinks span {
  display: block;
  margin-bottom: 8px;
  color: var(--kb-blue);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
}

.kbEvidenceLinks strong {
  display: block;
  color: var(--kb-text-strong);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}

.kbEvidenceLinks i {
  position: absolute;
  right: 18px;
  top: 50%;
  display: flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  background: var(--kb-blue);
  color: #fff;
  font-style: normal;
  font-size: 11px;
}

.kbEvidenceLinks a:hover strong {
  color: var(--kb-blue);
}

.kbJobs__row--areas a {
  color: #425b70;
}

@media screen and (max-width:1080px) {
  .kbSectionLinks {
    display: block;
    margin-top: 8vw;
  }

  .kbSectionLinks a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3.1vw 0;
    border-bottom: 1px solid var(--kb-border-soft);
    font-size: 3.4vw;
  }

  .kbSectionLinks i {
    width: 5vw;
    height: 5vw;
    margin-left: 2vw;
    flex: 0 0 auto;
    font-size: 2.8vw;
  }

  .kbEvidenceLinks {
    grid-template-columns: 1fr;
    margin-top: 11vw;
  }

  .kbEvidenceLinks a {
    min-height: 0;
    padding: 5vw 11vw 5vw 1vw;
    border-right: 0;
    border-bottom: 1px solid var(--kb-border-soft);
  }

  .kbEvidenceLinks a:last-child {
    border-bottom: 0;
  }

  .kbEvidenceLinks span {
    margin-bottom: 1.8vw;
    font-size: 2.6vw;
  }

  .kbEvidenceLinks strong {
    font-size: 3.9vw;
    line-height: 1.55;
  }

  .kbEvidenceLinks i {
    right: 1vw;
    width: 5vw;
    height: 5vw;
    font-size: 2.8vw;
  }
}

/* ==========================================================
   v9 SEO copy alignment: make the main Japanese heading visible
   while preserving the reference-led visual hierarchy.
   ========================================================== */
.kbHero h1 {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  margin: 22px 0 0;
  color: #203445;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: .01em;
}

.kbHero__lead {
  width: 680px;
  max-width: 100%;
  margin: 10px 0 0;
  color: #566777;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: 0;
}

@media screen and (max-width:1080px) {
  .kbHero h1 {
    width: 92%;
    margin-top: 5vw;
    font-size: 4.2vw;
    line-height: 1.65;
  }

  .kbHero__lead {
    width: 92%;
    margin-top: 2.4vw;
    font-size: 3.6vw;
    line-height: 1.9;
  }
}

/* ==========================================================
   v11 launch-ready: dynamic recruitment information block
   Keeps /inc/information.inc without reintroducing legacy TOP CSS.
   ========================================================== */
.kbUpdates {
  padding: 0 0 26px;
  background: #fff;
}

.kbUpdates #infomation.information {
  width: 100%;
  margin: 0;
  padding: 24px 0 28px;
  border-top: 1px solid var(--kb-border-soft, #e6ebef);
  border-bottom: 1px solid var(--kb-border-soft, #e6ebef);
  background: transparent;
}

.kbUpdates #infomation.information h2 {
  margin: 0 0 16px;
  color: var(--kb-blue, #0056b8);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
}

.kbUpdates #infomation .infoWrapper {
  display: grid;
  gap: 0;
}

.kbUpdates #infomation .infoContents {
  padding: 12px 0;
  border-top: 1px solid var(--kb-border-soft, #e6ebef);
}

.kbUpdates #infomation .infoContents:first-child {
  border-top: 0;
}

.kbUpdates #infomation .infoText {
  margin: 0;
  color: var(--kb-text, #26384a);
  font-size: 13px;
  line-height: 1.8;
}

.kbUpdates #infomation .infoDate {
  display: inline-block;
  min-width: 92px;
  margin-right: 14px;
  color: var(--kb-muted, #5f6f7e);
  font-size: 12px;
  font-weight: 500;
}

.kbUpdates #infomation a {
  color: var(--kb-blue, #0056b8);
  text-decoration: none;
}

@media screen and (max-width:1080px) {
  .kbUpdates {
    padding: 0 0 6vw;
  }

  .kbUpdates #infomation.information {
    padding: 5vw 0 6vw;
  }

  .kbUpdates #infomation.information h2 {
    margin-bottom: 3vw;
    font-size: 3vw;
  }

  .kbUpdates #infomation .infoContents {
    padding: 3.2vw 0;
  }

  .kbUpdates #infomation .infoText {
    font-size: 3.5vw;
    line-height: 1.8;
  }

  .kbUpdates #infomation .infoDate {
    display: block;
    min-width: 0;
    margin: 0 0 1vw;
    font-size: 2.8vw;
  }
}