@charset "UTF-8";

:root {
  --color-text: #111;
  --color-muted: #777;
  --color-pink: #f08696;
  --color-yellow: #f9ca70;
  --color-line: #d8d8d8;
  --color-navy: #0d3061;
  --gradient-button-background: linear-gradient(159.61deg, #f9ca70 24.443%, #f08696 75.557%);
  --font-ja: "dnp-shuei-gothic-gin-std", sans-serif;
  --font-en: "gotham", sans-serif;
  --content-width: 1120px;
  --side-space: max(20px, calc((100vw - var(--content-width)) / 2));
  --responsive-section-gap: clamp(64px, 8vw, 100px);
  --fixed-header-control-right: clamp(20px, calc((100vw - 1332px) / 2), 54px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; color: var(--color-text); background: #fff; font-family: var(--font-ja); font-weight: 400; font-style: normal; line-height: 1.8; overflow-x: clip; }
h1, h2, h3, p { margin-block: 0; }
h1, h2, h3, b, strong { font-weight: 600; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
.ui-arrow {
  --ui-arrow-color: currentColor;
  --ui-arrow-width: 11.709px;
  --ui-arrow-height: 7.088px;
  display: inline-block;
  flex: 0 0 var(--ui-arrow-width);
  inline-size: var(--ui-arrow-width);
  block-size: var(--ui-arrow-height);
  background-color: var(--ui-arrow-color);
  -webkit-mask-image: url("../images/common/arrow-right.svg");
  mask-image: url("../images/common/arrow-right.svg");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: middle;
  -webkit-text-fill-color: initial;
}
.ui-arrow--medium { --ui-arrow-width: 14.02px; --ui-arrow-height: 8.487px; }
.ui-arrow-down {
  --ui-arrow-color: #111;
  display: inline-block;
  flex: 0 0 10.977px;
  inline-size: 10.977px;
  block-size: 18.132px;
  background-color: var(--ui-arrow-color);
  -webkit-mask-image: url("../images/common/arrow-down.svg");
  mask-image: url("../images/common/arrow-down.svg");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: middle;
}
:focus-visible { outline: 3px solid #3f4fff; outline-offset: 4px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 8px 16px; background: #fff; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

/* Recruitment menu overlay */
body.is-recruit-menu-open {
  overflow: hidden;
}

.recruit-menu {
  position: fixed;
  z-index: 100;
  inset: 0;
  padding: 34px;
  background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: visibility 0s linear .2s, opacity .2s ease;
}

.recruit-menu.is-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.recruit-menu__panel {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: auto;
  border-radius: 9px;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 2px 24px rgba(0, 0, 0, .04);
  opacity: 0;
  transform: translateY(-8px) scale(.995);
  transition: opacity .2s ease, transform .2s ease;
}

.recruit-menu.is-visible .recruit-menu__panel {
  opacity: 1;
  transform: none;
}

.recruit-menu__controls {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 44px 44px 0;
}

.recruit-menu__close {
  position: relative;
  display: block;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.recruit-menu__close::before,
.recruit-menu__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 46px;
  border-top: 2px solid #111;
  transform-origin: center;
}

.recruit-menu__close::before { transform: rotate(24deg); }
.recruit-menu__close::after { transform: rotate(-24deg); }

.recruit-menu.is-pointer-open .recruit-menu__close:focus {
  outline: none;
}

.recruit-menu__contact {
  --ui-arrow-color: #fff;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  gap: normal;
  width: 177px;
  height: 59px;
  padding: 0 15px 0 43px;
  border-radius: 29.5px;
  background: linear-gradient(154.658deg, #94fbff 14.163%, #3f4fff 86.821%);
  box-shadow: 0 1.873px 4.683px rgba(0, 0, 0, .15),
    inset -.937px -.937px 3.746px rgba(255, 255, 255, .45),
    inset 1.873px 1.873px 3.746px rgba(255, 255, 255, .6);
  color: #fff;
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

body.is-recruit-menu-open .lower-page-contact {
  pointer-events: none;
}

.recruit-menu__nav {
  display: flex;
  align-items: center;
  width: min(1040px, calc(100% - 80px));
  height: calc(100% - 103px);
  min-height: 0;
  margin: 0 auto;
  padding: 30px 0 70px;
}

.recruit-menu__nav > ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  gap: 48px 46px;
  width: 100%;
}

.recruit-menu__item--top { grid-area: 1 / 1; }
.recruit-menu__item--business { grid-area: 1 / 2; }
.recruit-menu__item--benefits { grid-area: 1 / 3; }
.recruit-menu__item--faq { grid-area: 1 / 4; }
.recruit-menu__item--message { grid-area: 2 / 1; }
.recruit-menu__item--environment { grid-area: 2 / 2; }
.recruit-menu__item--interview { grid-area: 2 / 3; }
.recruit-menu__item--external { grid-area: 2 / 4; }

.recruit-menu__item:not(.recruit-menu__item--external) > a {
  display: block;
  padding: 0 0 15px;
  border-bottom: 1px solid rgba(17, 17, 17, .2);
}

.recruit-menu__item small {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.recruit-menu__item a > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-ja);
  font-size: 22px;
  font-weight: 600;
  font-style: normal;
  line-height: 2;
  letter-spacing: .01em;
}

.recruit-menu__arrow {
  display: block;
  flex: 0 0 17px;
  width: 17px;
  height: 10px;
  background: url("../images/common/recruit-menu-arrow.svg") center / contain no-repeat;
  transition: transform .2s ease;
}

.recruit-menu__item--external {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-top: 2px;
}

.recruit-menu__item--external a > span {
  justify-content: flex-start;
  font-family: var(--font-ja);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .01em;
}

.recruit-menu__item--external .recruit-menu__external-link > span {
  font-family: var(--font-ja);
  font-size: 18px;
  font-weight: 600;
  font-style: normal;
  line-height: 2;
  letter-spacing: 0;
}

body .lower-page-menu {
  cursor: pointer;
}

body.is-recruit-menu-open .lower-page-menu {
  visibility: hidden;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .recruit-menu__item a:hover .recruit-menu__arrow {
    transform: translateX(5px);
  }
}

@media (max-width: 767px) {
  .recruit-menu {
    padding: 16px 8px 26px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .recruit-menu__panel {
    border-radius: 4px;
  }

  .recruit-menu__controls {
    padding: 18px 26px;
  }

  .recruit-menu__close {
    flex-basis: 30px;
    width: 30px;
    height: 38px;
  }

  .recruit-menu__close::before,
  .recruit-menu__close::after {
    width: 30px;
    border-top-width: 1.5px;
  }

  .recruit-menu__contact {
    position: relative;
  }

  .recruit-menu__nav {
    align-items: flex-start;
    width: auto;
    height: calc(100% - 57px);
    min-height: 0;
    margin: 0 38px;
    padding: 24px 0 34px;
  }

  .recruit-menu__nav > ul {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .recruit-menu__item {
    width: 100%;
  }

  .recruit-menu__item--top { order: 1; }
  .recruit-menu__item--message { order: 2; }
  .recruit-menu__item--business { order: 3; }
  .recruit-menu__item--environment { order: 4; }
  .recruit-menu__item--benefits { order: 5; }
  .recruit-menu__item--interview { order: 6; }
  .recruit-menu__item--faq { order: 7; }
  .recruit-menu__item--external { order: 8; }

  .recruit-menu__item:not(.recruit-menu__item--top) {
    margin-top: 24px;
  }

  .recruit-menu__item:not(.recruit-menu__item--external) > a {
    padding: 0 0 12px;
  }

  .recruit-menu__item small {
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1px;
  }

  .recruit-menu__item a > span {
    font-size: 18px;
    font-weight: 600;
    line-height: 2;
    letter-spacing: .02em;
  }

  .recruit-menu__item--external {
    gap: 14px;
    padding-top: 0;
  }

  .recruit-menu__item--external .recruit-menu__external-link > span {
    font-size: 16px;
    line-height: 2;
    letter-spacing: 0;
  }
}

/* Shared lower-page header and title baseline */
body .lower-page-menu {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 68px;
  width: 46px;
  height: 57.4px;
  padding: 0;
  overflow: visible;
}
body .lower-page-menu::before,
body .lower-page-menu::after {
  content: "";
  position: absolute;
  left: 0;
  width: 46px;
  border-top: 2.15px solid #000;
}
body .lower-page-menu::before {
  top: 43.6px;
}
body .lower-page-menu::after {
  top: 57.4px;
}
body .lower-page-contact {
  --ui-arrow-color: #fff;
  position: fixed;
  z-index: 50;
  top: 37px;
  right: var(--fixed-header-control-right);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: normal;
  width: 177px;
  height: 59px;
  padding: 0 15px 0 43px;
  border-radius: 29.5px;
  background: linear-gradient(154.658deg, #94fbff 14.163%, #3f4fff 86.821%);
  box-shadow: 0 1.873px 4.683px rgba(0, 0, 0, .15),
    inset -.937px -.937px 3.746px rgba(255, 255, 255, .45),
    inset 1.873px 1.873px 3.746px rgba(255, 255, 255, .6);
  color: #fff;
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}
body .lower-page-contact .ui-arrow,
.recruit-menu__contact .ui-arrow {
  position: absolute;
  top: 26px;
  left: 140px;
  width: 11.709px;
  height: 7.088px;
}
body .lower-page-menu::before,
body .lower-page-menu::after,
body .lower-page-contact,
body .lower-page-contact .ui-arrow {
  transition: width .3s ease, transform .3s ease, filter .3s ease, box-shadow .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  body .lower-page-menu:hover::before,
  body .lower-page-menu:focus-visible::before { width: 54px; }
  body .lower-page-menu:hover::after,
  body .lower-page-menu:focus-visible::after { width: 38px; }
  body .lower-page-contact:hover,
  body .lower-page-contact:focus-visible {
    filter: saturate(1.16) brightness(1.03);
    box-shadow: 0 7px 18px rgba(63, 79, 255, .24), inset -.937px -.937px 3.746px rgba(255, 255, 255, .45), inset 1.873px 1.873px 3.746px rgba(255, 255, 255, .6);
    transform: translateY(-2px);
  }
  body .lower-page-contact:hover .ui-arrow,
  body .lower-page-contact:focus-visible .ui-arrow { transform: translateX(4px); }
}
.jobs__list,
.voice-grid,
.business-people__grid { touch-action: pan-y; }
/* Shared title group: English title + gradient dot + Japanese title. */
:root {
  --shared-title-en-size: 83px;
  --shared-title-en-line-height: 100px;
  --shared-title-ja-size: 18px;
  --shared-title-ja-line-height: 36px;
  --shared-title-ja-gap: 8px;
  --shared-title-ja-indent: 25px;
  --shared-title-dot-size: 11px;
  --shared-title-dot-top: 14px;
}

body :is(.lower-page-title__en, .section-title-group__en) {
  font-family: var(--font-en) !important;
  font-size: var(--shared-title-en-size) !important;
  font-weight: 200 !important;
  font-style: normal !important;
  line-height: var(--shared-title-en-line-height) !important;
  letter-spacing: 0 !important;
}
body .section-title-group__en {
  margin-left: 0 !important;
}
.section-title-group__responsive-line {
  display: inline;
}
[data-responsive-title-break].is-responsive-title-wrapped .section-title-group__responsive-line {
  display: block;
  margin-left: 0;
}
body :is(.lower-page-title__ja, .section-title-group__ja) {
  position: relative;
  left: 7px;
  margin: var(--shared-title-ja-gap) 0 0 !important;
  padding-left: var(--shared-title-ja-indent) !important;
  font-family: var(--font-ja) !important;
  font-size: var(--shared-title-ja-size) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: var(--shared-title-ja-line-height) !important;
  letter-spacing: 0 !important;
}
body :is(.lower-page-title__ja, .section-title-group__ja)::before {
  content: "";
  position: absolute;
  top: var(--shared-title-dot-top) !important;
  left: 0;
  width: var(--shared-title-dot-size) !important;
  height: var(--shared-title-dot-size) !important;
  margin: 0;
  border-radius: 9.256px !important;
  background: linear-gradient(125.062487deg, #f9ca70 24.443%, #f08696 75.557%) !important;
  box-shadow: inset 1.029px 1.647px 3.294px rgba(255, 255, 255, .9);
}
.page-message .lower-page-title {
  top: 125px;
  left: max(20px, calc((100vw - 1120px) / 2));
  width: min(1120px, calc(100% - 40px));
}
.lower-page-title {
  transform: translate(-8px, -3px);
}
.page-business .lower-page-title {
  position: relative;
  top: 10px;
}

@media (max-width: 767px) {
  :root {
    --fixed-header-control-right: clamp(18px, calc(.51vw + 16.087px), 20px);
  }

  body .lower-page-menu {
    top: 0;
    left: clamp(25px, calc(10.97vw - 16.14px), 68px) !important;
    width: clamp(30px, calc(4.082vw + 14.694px), 46px) !important;
    height: clamp(48px, calc(2.398vw + 39.008px), 57.4px) !important;
  }
  body .lower-page-menu::before,
  body .lower-page-menu::after {
    width: clamp(30px, calc(4.082vw + 14.694px), 46px) !important;
    border-top-width: clamp(1.5px, calc(.166vw + .878px), 2.15px) !important;
  }
  body .lower-page-menu::before {
    top: clamp(39px, calc(1.173vw + 34.6px), 43.6px) !important;
  }
  body .lower-page-menu::after {
    top: clamp(48px, calc(2.398vw + 39.008px), 57.4px) !important;
  }
  body .lower-page-contact {
    top: clamp(23px, calc(3.571vw + 9.607px), 37px) !important;
    right: var(--fixed-header-control-right) !important;
  }
  body .lower-page-contact,
  .recruit-menu__contact {
    width: clamp(138px, calc(9.949vw + 100.692px), 177px) !important;
    height: clamp(41px, calc(4.592vw + 23.78px), 59px) !important;
    padding-right:clamp(6px,calc(2.189vw - 2.209px),14.58px) !important;
    padding-left:clamp(31px,calc(3.061vw + 19.52px),43px) !important;
    border-radius:clamp(20.7px,calc(2.245vw + 12.281px),29.5px) !important;
    font-size:clamp(12px,calc(.765vw + 9.13px),15px) !important;
  }
  body .lower-page-contact .ui-arrow,
  .recruit-menu__contact .ui-arrow {
    top:50% !important;
    right:clamp(15px,calc(-.201vw + 16.543px),15.789px) !important;
    left:auto !important;
    width:clamp(11.21px,calc(.127vw + 10.734px),11.709px) !important;
    height:clamp(6.787px,calc(.077vw + 6.498px),7.088px) !important;
    transform:translateY(-50%);
  }
  body .lower-page-title__en,
  body .section-title-group__en {
    font-size: 48px !important;
    line-height: 52px !important;
    letter-spacing: -2px !important;
  }
  body .lower-page-title__ja,
  body .section-title-group__ja {
    left: 5px;
    margin-top: 5px !important;
    padding-left: 15px !important;
    font-size: 13px !important;
    line-height: 26px !important;
  }
  body .lower-page-title__ja::before,
  body .section-title-group__ja::before {
    top: 9.39px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 6.732px !important;
    box-shadow: inset .749px 1.198px 2.396px rgba(255, 255, 255, .9);
  }
  .page-message .lower-page-title {
    top: 100px;
    left: 20px;
    width: calc(100% - 40px);
  }
  .lower-page-title {
    transform: translate(-5px, 7px);
  }
  .page-business .lower-page-title {
    top: 6px;
    left: -5px;
  }
}

/* Shared typography for in-page title groups (Japanese title + English label). */
body.page-message .philosophy > .message-container > h2,
body.page-message .related > .message-container > .inpage-title > h2,
body.page-business .related-simple > .inpage-title > h2,
body.page-environment .env-section > .heading > h2,
body.page-benefits .benefit-section > .heading > h2,
body.page-contact .job-section > .heading > h2,
body.page-contact .contact-form-section > .heading > h2 {
  height: auto !important;
  margin: 0 !important;
  font-family: var(--font-ja) !important;
  font-size: clamp(25px, calc(21.127px + 1.033vw), 36px) !important;
  font-weight: 500 !important;
  line-height: clamp(40px, calc(32.817px + 1.916vw), 60.4px) !important;
  letter-spacing: clamp(-1px, calc(-1.352px + .094vw), 0px) !important;
  transform: none !important;
}

body.page-message .philosophy > .message-container > .message-en-label,
body.page-message .related > .message-container > .inpage-title > .message-en-label,
body.page-business .related-simple > .inpage-title > p,
body.page-environment .env-section > .heading > p,
body.page-benefits .benefit-section > .heading > p,
body.page-contact .job-section > .heading > p,
body.page-contact .contact-form-section > .heading > p {
  height: auto !important;
  margin: clamp(13.183px, calc(11.839px + .358vw), 17px) 0 0 !important;
  color: #939393;
  font-family: var(--font-en) !important;
  font-size: clamp(16px, calc(14.592px + .376vw), 20px) !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: 1px !important;
  transform: none !important;
}

/* Business previously recreated the mobile title with a pseudo-element. */
body.page-business .related-simple > .inpage-title > h2::before {
  content: none !important;
}

@media (max-width: 340px) {
  body .lower-page-title__en {
    font-size: 38px !important;
    line-height: 44px !important;
  }
  .page-business .lower-page-title {
    left: 2px;
  }
}

/* Scroll-linked text reveal */
[data-scroll-reveal] {
  --scroll-reveal-unrevealed: rgba(17, 17, 17, .22);
  --scroll-reveal-revealed: #111;
}
.scroll-reveal-ready [data-scroll-reveal-line],
.scroll-reveal-ready .scroll-reveal-line {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  color: var(--scroll-reveal-unrevealed);
  white-space: nowrap;
}
.scroll-reveal-overlay {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  overflow: hidden;
  color: var(--scroll-reveal-revealed);
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 var(--scroll-reveal-solid, -180px), transparent var(--scroll-reveal-edge, 0));
  mask-image: linear-gradient(to right, #000 0, #000 var(--scroll-reveal-solid, -180px), transparent var(--scroll-reveal-edge, 0));
  pointer-events: none;
  user-select: none;
  will-change: mask-image;
}
/* Shared site footer */
.site-footer {
  position: relative;
  height: 538px;
  overflow: hidden;
  background: #000;
  color: #fff;
}
.site-footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  grid-template-rows: auto 1fr;
  width: min(1274px, calc(100% - 166px));
  height: 425px;
  margin: 0 auto;
  padding-top: 98px;
  padding-right: 20px;
}
.site-footer__brand {
  grid-column: 1;
  grid-row: 1;
}
.site-footer__brand img {
  width: 183px;
  max-width: none;
  height: auto;
  margin-left: 1px;
  aspect-ratio: 165.193 / 51.6249;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
}
.site-footer__brand > p {
  width: 156px;
  margin-top: 29.1875px;
  margin-left: 5px;
  font-size: 13px;
  line-height: 22px;
  letter-spacing: 0;
}
.site-footer__nav {
  grid-column: 2;
  grid-row: 1 / 3;
}
.site-footer__nav ul {
  display: grid;
  grid-template-columns: repeat(2, 194px);
  column-gap: 43px;
  row-gap: 0;
}
.site-footer__nav li:nth-child(-n + 2) { margin-bottom: 16px; }
.site-footer__nav li:nth-child(n + 3):nth-child(-n + 4) { margin-bottom: 20px; }
.site-footer__nav li:nth-child(n + 5):nth-child(-n + 6) { margin-bottom: 18px; }
.site-footer__nav a {
  --ui-arrow-color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12px;
  grid-template-rows: 10px 32px;
  align-items: center;
  width: 194px;
  height: 53px;
  min-height: 53px;
  padding-bottom: 6px;
  border-bottom: 1px solid #222;
  font-size: 16px;
  font-weight: 600;
  line-height: 32px;
}
.site-footer__nav small {
  grid-column: 1 / 3;
  color: #525252;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.site-footer__nav .ui-arrow {
  justify-self: end;
  margin-right: 4px;
  --ui-arrow-width: 11px;
  --ui-arrow-height: 6.659px;
}
.site-footer__meta {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  margin-bottom: 57px;
  font-size: 13px;
  font-weight: 400;
  line-height: 26px;
}
.site-footer__company {
  display: flex;
  gap: 27.8125px;
  font-weight: 600;
}
.site-footer__company span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.site-footer__company span:first-child { gap: 9.7734px; }
.site-footer__company span:last-child { gap: 6px; }
.site-footer__company img {
  width: 10.19px;
  height: 10.19px;
}
.site-footer__meta small {
  display: block;
  width: 287px;
  margin-top: 6px;
  font-family: var(--font-en);
  font-size: 12px;
  line-height: 24px;
}
.site-footer__slogan {
  position: absolute;
  top: 453.6846px;
  left: 17px;
  width: 1403px;
  color: rgba(255, 255, 255, .20);
  font-family: var(--font-en);
  font-size: 91px;
  font-style: normal;
  font-weight: 100;
  line-height: normal;
  letter-spacing: -3.556px;
  leading-trim: both;
  text-edge: cap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-footer__slogan::before {
  content: "";
  position: absolute;
  top: -28.6846px;
  left: 0;
  width: 1403px;
  border-top: 1px solid #222;
}

@media (min-width: 901px) and (max-width: 1439px) {
  .site-footer__inner {
    grid-template-columns: minmax(250px, 1fr) minmax(388px, 430px);
    width: calc(100% - clamp(64px, 11.53vw, 166px));
  }
}

@media (max-width: 900px) {
  body .site-footer {
    height: auto;
    min-height: 727px;
  }
  body .site-footer__inner {
    display: block;
    width: auto;
    height: auto;
    margin: 0 22px;
    padding: 55px 0 0;
  }
  body .site-footer__brand { padding-left: 2px; }
  body .site-footer__brand img { width: 165.193px; }
  body .site-footer__brand > p {
    width: auto;
    margin-top: 28px;
    margin-left: 0;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: .04em;
    white-space: nowrap;
  }
  body .site-footer__brand > p br { display: none; }
  body .site-footer .site-footer__nav { margin-top: 55px; }
  body .site-footer .site-footer__nav ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 55px;
    column-gap: 28px;
    row-gap: 20px;
  }
  body .site-footer__nav li { margin-bottom: 0; }
  body .site-footer .site-footer__nav a {
    width: 100%;
    height: 55px;
    min-height: 55px;
    font-size: 15px;
    line-height: 32px;
  }
  body .site-footer__nav small { font-size: 9px; }
  body .site-footer__meta {
    position: static;
    margin: 65px 0 0;
    padding: 0;
    font-size: 13px;
    line-height: 26px;
  }
  body .site-footer__company { gap: 24px; }
  body .site-footer__company span { gap: 8px; }
  body .site-footer__company img { width: 9.75px; height: 9.75px; }
  body .site-footer__meta small {
    margin-top: 2px;
    font-size: 13px;
    line-height: 26px;
    white-space: nowrap;
  }
  body .site-footer__slogan {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    margin: 17px 14px 0;
    padding-top: 10px;
    border-top: 1px solid #222;
    padding-bottom: 10px;
    color: rgba(255, 255, 255, .35);
    font-size: 37px;
    font-weight: 200;
    line-height: 1.02;
    letter-spacing: -1.4611px;
    text-box-trim: none;
    text-box-edge: auto;
    white-space: normal;
  }
  body .site-footer__slogan > span {
    display: block;
  }
  body .site-footer__slogan > span:first-child {
    font-size: 59px;
    font-weight: 100;
    letter-spacing: -2.3105px;
  }
  body .site-footer__slogan::before {
    display: none;
  }
}

@media (min-width: 768px) {
  body .site-footer__slogan {
    position: absolute;
    top: auto;
    bottom: clamp(8px, 1.25vw, 18px);
    left: 17px;
    width: calc(100vw - 34px);
    margin: 0;
    padding: 0;
    border: 0;
    color: rgba(255, 255, 255, .20);
    font-size: clamp(38px, 6.32vw, 91px);
    font-weight: 100;
    line-height: normal;
    letter-spacing: clamp(-3.556px, -.247vw, -1.48px);
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    white-space: nowrap;
  }

  body .site-footer__slogan > span,
  body .site-footer__slogan > span:first-child {
    display: inline;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
  }

  body .site-footer__slogan::before {
    display: block;
    top: clamp(-28.6846px, -1.993vw, -12px);
    width: 100%;
  }
}

@media (max-width: 767px) {
  body .site-footer__slogan {
    width: calc(100vw - 28px);
    margin-right: 14px;
    margin-left: 14px;
    font-size: calc((100vw - 36px) / 9.378);
  }

  body .site-footer__slogan > span {
    white-space: nowrap;
  }

  body .site-footer__slogan > span:first-child {
    font-size: calc((100vw - 36px) / 5.881);
  }
}

@media (max-width: 900px) {
  body .site-footer .site-footer__nav a {
    row-gap: 3px;
  }
}

@media (max-width: 767px) {
  body .site-footer__brand > p {
    font-size: 11.2px;
  }
}

/* Shared responsive page gutters: 20px on SP, fluid at intermediate widths. */
:root {
  --page-inline-gutter: clamp(20px, 5vw, 54px);
}

/* Opt-in container based on TOP / JOBS. Apply only where shared gutters are wanted. */
.shared-page-gutter {
  box-sizing: border-box;
  width: min(1120px, calc(100% - (2 * var(--page-inline-gutter)))) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.page-message .message-container,
.page-message .breadcrumb,
.page-environment .page-title,
.page-environment .env-section,
.page-environment .breadcrumb,
.page-job-openings .page-title,
.page-job-openings .job-openings-section,
.page-job-openings .breadcrumb,
.page-contact .page-title,
.page-contact .job-section,
.page-contact .employee-link,
.page-contact .contact-form-section,
.page-contact .breadcrumb,
.page-benefits .page-title,
.page-benefits .benefit-section,
.page-benefits .benefits-intro,
.page-benefits .breadcrumb,
.page-faq .page-title,
.page-faq .faq-intro,
.page-faq .faq-list,
.page-faq .faq-contact,
.page-faq .breadcrumb,
.page-interview-archive .page-title,
.page-interview-archive .interview-archive-intro,
.page-interview-archive .interview-archive-grid,
.page-interview-archive .breadcrumb,
.page-top .section__inner,
.page-top .business__layout,
.page-top .interview__layout {
  width: min(1120px, calc(100% - (2 * var(--page-inline-gutter)))) !important;
}

.page-top .business__layout {
  width: min(1228px, calc(100% - (2 * var(--page-inline-gutter)))) !important;
}

.page-top .interview__layout {
  width: min(1230px, calc(100% - (2 * var(--page-inline-gutter)))) !important;
}

.page-message .lower-page-title {
  left: max(var(--page-inline-gutter), calc((100vw - 1120px) / 2)) !important;
  width: min(1120px, calc(100% - (2 * var(--page-inline-gutter)))) !important;
}

.page-business .business-hero,
.page-business .business-promotion,
.page-business .business-people,
.page-business .lower-breadcrumb {
  padding-right: max(var(--page-inline-gutter), calc((100vw - 1120px) / 2)) !important;
  padding-left: max(var(--page-inline-gutter), calc((100vw - 1120px) / 2)) !important;
}

/* A shared-gutter section owns its horizontal spacing through its width. */
.page-business :is(.business-people, .related-simple).shared-page-gutter {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.page-top .contact__panel {
  width: min(1276px, calc(100vw - (2 * var(--page-inline-gutter)))) !important;
  margin-left: max(var(--page-inline-gutter), calc((100vw - 1276px) / 2)) !important;
}

@media (max-width: 360px) {
  body .site-footer__inner { margin-right: 16px; margin-left: 16px; }
  .site-footer__nav ul { column-gap: 18px; }
  .site-footer__nav a { font-size: 14px; }
  .site-footer__company { gap: 16px; font-size: 12px; }
  .site-footer__meta small { font-size: 11px; }
}

/* Shared gradient CTA appearance and internal layout. Dimensions and outer placement stay page-specific. */
@property --gradient-button-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 159.61deg;
}
@property --gradient-button-yellow-stop {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 24.443%;
}
@property --gradient-button-pink-stop {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 75.557%;
}
body .gradient-button.gradient-button {
  --gradient-button-angle: 159.61deg;
  --gradient-button-yellow-stop: 24.443%;
  --gradient-button-pink-stop: 75.557%;
  --gradient-button-padding-left: 18px;
  --gradient-button-padding-right: 15.29px;
  --gradient-button-arrow-width: 11.709px;
  --gradient-button-arrow-height: 7.088px;
  --ui-arrow-color: #fff;
  width: 207px;
  min-width: 207px;
  height: 54px;
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--gradient-button-arrow-width);
  grid-template-rows: 100%;
  align-items: center;
  justify-content: normal;
  gap: 0;
  padding-right: var(--gradient-button-padding-right);
  padding-left: var(--gradient-button-padding-left);
  border: 0;
  border-radius: 5.753px;
  background: linear-gradient(var(--gradient-button-angle), #f9ca70 var(--gradient-button-yellow-stop), #f08696 var(--gradient-button-pink-stop));
  box-shadow: 0 .827px 5.787px rgba(0,0,0,.15), inset 1.653px 1.653px 2.48px #fff, inset -.827px -.827px 1.653px rgba(255,255,255,.65);
  color: #fff;
  font-family: var(--font-ja);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  transition: --gradient-button-angle .4s ease, --gradient-button-yellow-stop .4s ease, --gradient-button-pink-stop .4s ease;
}
body .gradient-button.gradient-button .ui-arrow {
  position: static;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  width: var(--gradient-button-arrow-width);
  height: var(--gradient-button-arrow-height);
}
/* Shared SP gradient-button dimensions. */
@media (max-width: 767px) {
  body .gradient-button.gradient-button {
    width: 179px;
    min-width: 179px;
    height: 46px;
    min-height: 46px;
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  body.page-top .interview__button.gradient-button {
    width: 179px;
    min-width: 179px;
    height: 59px;
    min-height: 59px;
    line-height: 16px;
  }
}
@media (hover: hover) and (pointer: fine) {
  body .gradient-button.gradient-button:hover {
    --gradient-button-angle: 125deg;
    --gradient-button-yellow-stop: 8%;
    --gradient-button-pink-stop: 88%;
  }
  body .gradient-button.gradient-button:hover .ui-arrow {
    animation: gradient-button-arrow-slide .5s cubic-bezier(.22,1,.36,1);
  }
}
body .gradient-button.gradient-button:focus-visible {
  --gradient-button-angle: 125deg;
  --gradient-button-yellow-stop: 8%;
  --gradient-button-pink-stop: 88%;
}
body .gradient-button.gradient-button:focus-visible .ui-arrow {
  animation: gradient-button-arrow-slide .5s cubic-bezier(.22,1,.36,1);
}
@keyframes gradient-button-arrow-slide {
  0% { opacity: 1; transform: translateX(0); }
  42% { opacity: 0; transform: translateX(16px); }
  43% { opacity: 0; transform: translateX(-16px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Trigger every inline more arrow from the whole card/section hit area. */
[data-more-card]{
  cursor:pointer;
}

@media (hover: hover) and (pointer: fine) {
  main :is(article, a):has(.more-link):hover .more-link .ui-arrow {
    animation: gradient-button-arrow-slide .5s cubic-bezier(.22, 1, .36, 1);
  }
}

main :is(article, a):has(.more-link):focus-within .more-link .ui-arrow {
  animation: gradient-button-arrow-slide .5s cubic-bezier(.22, 1, .36, 1);
}
/* Shared “more” contents: use CSS spacing instead of non-breaking spaces. */
.more-link:has(> .more__label) {
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}
.more-link > .more__paren,
.more-link > .more__label {
  display:inline-flex;
  align-items:center;
  line-height:1;
}
.more-link > .more__label,
.more-link > .more__paren:last-child {
  margin-left:.75em;
}
.more-link > .more__label + .ui-arrow {
  margin-left:1em;
}

/* Shared inline “more” link color. Placement stays page-specific. */
body .more-link {
  background: var(--main, linear-gradient(180deg, #f9ca70 0%, #f08696 100%));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
body .more-link .ui-arrow {
  --ui-arrow-width: 13.957px;
  --ui-arrow-height: 8.449px;
  background: var(--main, linear-gradient(180deg, #f9ca70 0%, #f08696 100%));
}

/* Align the answer icon with the center of the answer text's first line. */
body:is(.page-top,.page-faq) .faq-answer > .faq-mark--answer{
  align-self:start;
  margin-top:0;
}

@media(max-width:767px){
  body:is(.page-top,.page-faq) .faq-answer > .faq-mark--answer{
    margin-top:0;
  }
}

/* Prose wraps naturally at the available responsive width unless HTML supplies a <br>. */
main :where(p,dd,dt,h2,h3,h4,li){
  min-width:0;
  max-width:100%;
  white-space:normal!important;
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Shared page-end breadcrumb, independent of the section that precedes it. */
body :is(nav.breadcrumb, nav.lower-breadcrumb) {
  box-sizing: border-box;
  display: flex;
  width: min(1120px, calc(100% - (2 * var(--page-inline-gutter)))) !important;
  margin: 0 auto !important;
  padding: 70px 0 26px !important;
  align-items: center;
  font-family: var(--font-ja) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 44.729px !important;
}

body.page-message nav.breadcrumb,
body.page-business nav.lower-breadcrumb,
body.page-environment nav.breadcrumb,
body.page-job-openings nav.breadcrumb,
body.page-benefits nav.breadcrumb,
body.page-contact nav.breadcrumb,
body.page-faq nav.breadcrumb,
body.page-interview-archive nav.breadcrumb {
  width: min(1120px, calc(100% - (2 * var(--page-inline-gutter)))) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

body nav.breadcrumb > ol {
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
  list-style: none;
}

body :is(nav.breadcrumb, nav.lower-breadcrumb) a {
  color: #7a7a7a !important;
  font-weight: 500 !important;
}

body :is(nav.breadcrumb, nav.lower-breadcrumb) > span,
body nav.breadcrumb > ol > li {
  font-weight: 500;
}

body nav.breadcrumb > a::after,
body nav.lower-breadcrumb > a::after,
body nav.breadcrumb > ol > li + li::before {
  content: "" !important;
  display: inline-block !important;
  width: 3.5px !important;
  height: 8.66px !important;
  margin: 0 12.5px 0 12px !important;
  border: 0 !important;
  background: #888 !important;
  clip-path: polygon(0 0, 40% 0, 100% 50%, 40% 100%, 0 100%, 60% 50%) !important;
  transform: none !important;
}

@media (max-width: 1023px) {
  body.page-message nav.breadcrumb,
  body.page-business nav.lower-breadcrumb,
  body.page-environment nav.breadcrumb,
  body.page-job-openings nav.breadcrumb,
  body.page-benefits nav.breadcrumb,
  body.page-contact nav.breadcrumb,
  body.page-faq nav.breadcrumb,
  body.page-interview-archive nav.breadcrumb,
  body.page-interview-single nav.breadcrumb {
    max-width: 1120px;
    padding-top: 40px !important;
    padding-bottom: 26px !important;
    font-size: 12px !important;
    line-height: 1.8 !important;
  }
}

main :where([data-scroll-reveal-line],.scroll-reveal-line,.scroll-reveal-overlay){
  width:auto;
  max-width:100%;
  white-space:normal!important;
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Focus the title first, then pass a soft colour band across it. */
[data-gradient-scroll],.lower-page-title__en,.is-heading-motion{position:relative}
.heading-motion-ready :is([data-gradient-scroll],.lower-page-title__en,.inpage-title__ja,.interview-page-title h1,.interview-single-hero__copy h1,.interview-related > header h2,.is-heading-motion):not(.is-gradient-revealed){opacity:.28;filter:blur(11px)}
:is([data-gradient-scroll],.lower-page-title__en,.is-heading-motion).is-gradient-revealed{animation:shared-heading-focus 1.35s cubic-bezier(.22,1,.36,1) both}
[data-gradient-scroll]::after,.lower-page-title__en::after,.is-heading-motion::after{content:attr(data-gradient-text);position:absolute;inset:0;background:var(--gradient-button-background);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:saturate(1.45) brightness(.8);white-space:pre-line;pointer-events:none;-webkit-mask-image:linear-gradient(135deg,transparent 34%,#000 43%,#000 57%,transparent 66%);mask-image:linear-gradient(135deg,transparent 34%,#000 43%,#000 57%,transparent 66%);-webkit-mask-size:300% 300%;mask-size:300% 300%;-webkit-mask-position:100% 100%;mask-position:100% 100%;opacity:0}
[data-gradient-scroll].is-gradient-revealed::after,.lower-page-title__en.is-gradient-revealed::after,.is-heading-motion.is-gradient-revealed::after{animation:shared-gradient-reveal 1.8s .35s cubic-bezier(.22,.61,.36,1) both}

/* First view rhythm: liquid gradient, title, then supporting elements. */
.kv-sequence .is-kv-title.is-gradient-revealed{animation-delay:.42s}
.kv-sequence .is-kv-title.is-gradient-revealed::after{animation-delay:.77s}
.kv-motion-ready body.page-top :is(.site-header__logo,.site-header__contact,.site-header__nav,.hero-story__headline>p),.kv-motion-ready .is-kv-other{opacity:0;filter:blur(7px)}
.kv-motion-ready .kv-sequence-started .is-kv-other{animation:kv-other-reveal .78s var(--kv-delay,1.02s) cubic-bezier(.22,1,.36,1) both}

/* Shared responsive typography for page and section title groups. */
@media (min-width: 376px) and (max-width: 767px) {
  body .lower-page-title__en,
  body .section-title-group__en {
    font-size: clamp(48px, calc(2.041vw + 40.327px), 56px) !important;
    line-height: clamp(52px, calc(3.061vw + 40.52px), 64px) !important;
  }

  body .lower-page-title__ja,
  body .section-title-group__ja {
    left: clamp(5px, calc(.255vw + 4.043px), 6px);
    margin-top: clamp(5px, calc(.255vw + 4.043px), 6px) !important;
    padding-left: clamp(15px, calc(1.276vw + 10.215px), 20px) !important;
    font-size: clamp(13px, calc(.51vw + 11.087px), 15px) !important;
    line-height: clamp(26px, calc(1.02vw + 22.173px), 30px) !important;
  }

  body .lower-page-title__ja::before,
  body .section-title-group__ja::before {
    top: clamp(9.39px, calc(.411vw + 7.849px), 11px) !important;
    width: clamp(8px, calc(.255vw + 7.043px), 9px) !important;
    height: clamp(8px, calc(.255vw + 7.043px), 9px) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body .lower-page-title__en,
  body .section-title-group__en {
    font-size: clamp(56px, calc(4.706vw + 19.86px), 68px) !important;
    line-height: clamp(64px, calc(5.49vw + 21.837px), 78px) !important;
  }

  body .lower-page-title__ja,
  body .section-title-group__ja {
    left: clamp(6px, calc(.392vw + 2.988px), 7px);
    margin-top: clamp(6px, calc(.392vw + 2.988px), 7px) !important;
    padding-left: clamp(20px, calc(.784vw + 13.979px), 22px) !important;
    font-size: clamp(15px, calc(.588vw + 10.484px), 16.5px) !important;
    line-height: clamp(30px, calc(1.176vw + 20.965px), 33px) !important;
  }

  body .lower-page-title__ja::before,
  body .section-title-group__ja::before {
    top: clamp(11px, calc(.588vw + 6.484px), 12.5px) !important;
    width: clamp(9px, calc(.392vw + 5.988px), 10px) !important;
    height: clamp(9px, calc(.392vw + 5.988px), 10px) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  body .lower-page-title__en,
  body .section-title-group__en {
    font-size: clamp(68px, calc(3.606vw + 31.075px), 83px) !important;
    line-height: clamp(78px, calc(5.289vw + 23.84px), 100px) !important;
  }

  body .lower-page-title__ja,
  body .section-title-group__ja {
    left: 7px;
    margin-top: clamp(7px, calc(.24vw + 4.54px), 8px) !important;
    padding-left: clamp(22px, calc(.721vw + 14.615px), 25px) !important;
    font-size: clamp(16.5px, calc(.361vw + 12.803px), 18px) !important;
    line-height: clamp(33px, calc(.721vw + 25.615px), 36px) !important;
  }

  body .lower-page-title__ja::before,
  body .section-title-group__ja::before {
    top: clamp(12.5px, calc(.361vw + 8.803px), 14px) !important;
    width: clamp(10px, calc(.24vw + 7.54px), 11px) !important;
    height: clamp(10px, calc(.24vw + 7.54px), 11px) !important;
  }
}

/* Shared title tracking: preserve the 375px/1440px endpoints without jumps. */
body :is(.lower-page-title__en, .section-title-group__en) {
  letter-spacing: clamp(-2px, calc(-2.704px + .188vw), 0px) !important;
}

body .lower-page-title {
  transform: translate(
    clamp(-8px, calc(-3.944px - .282vw), -5px),
    clamp(-3px, calc(10.521px - .939vw), 7px)
  );
}
@keyframes shared-heading-focus{0%{opacity:.28;filter:blur(11px)}38%{opacity:1;filter:blur(0)}100%{opacity:1;filter:blur(0)}}
@keyframes shared-gradient-reveal{0%{opacity:1;-webkit-mask-position:100% 100%;mask-position:100% 100%}100%{opacity:1;-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes kv-other-reveal{0%{opacity:0;filter:blur(7px)}100%{opacity:1;filter:blur(0)}}

/* Shared responsive typography for lower-page in-content section titles. */
body .inpage-title__ja{
  position:static!important;
  left:auto!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  font-family:var(--font-ja)!important;
  font-size:clamp(25px,calc(21.127px + 1.033vw),36px)!important;
  font-weight:500!important;
  line-height:clamp(40px,calc(32.817px + 1.916vw),60.4px)!important;
  letter-spacing:clamp(-1px,calc(-1.352px + .094vw),0px)!important;
  transform:none!important;
}
body .inpage-title__en{
  width:auto!important;
  height:auto!important;
  margin:clamp(13.183px,calc(11.838px + .359vw),17px) 0 0!important;
  color:#939393!important;
  font-family:var(--font-en)!important;
  font-size:clamp(16px,calc(14.592px + .376vw),20px)!important;
  font-weight:400!important;
  line-height:normal!important;
  letter-spacing:1px!important;
  text-transform:uppercase!important;
}

/* Optional description below an in-page title group. Omit the element when unused. */
body .inpage-title__description,
body.page-environment .numbers > .note,
body.page-environment .culture > .note,
body.page-environment .interview > .note{
  width:auto!important;
  height:auto!important;
  margin:clamp(20.5px,calc(16.975px + .94vw),30.51px) 0 0!important;
  padding:0!important;
  font-family:var(--font-ja)!important;
  font-size:clamp(14px,calc(13.648px + .094vw),15px)!important;
  font-weight:300!important;
  line-height:clamp(30px,calc(29.296px + .188vw),32px)!important;
  letter-spacing:0!important;
}

@media(max-width:900px){
  body .inpage-title__description,
  body.page-environment .numbers > .note,
  body.page-environment .culture > .note,
  body.page-environment .interview > .note{
    width:336px!important;
    max-width:100%!important;
  }
}

/*
 * Shared lower-page title placement.
 * The different page structures resolve to the same ENVIRONMENT baseline:
 * 100px container top at 375px, fluid through intermediate widths, 125px at 1440px.
 */
:root{
  --shared-lower-title-top-space:clamp(100px,calc(91.197px + 2.347vw),125px);
  --shared-business-title-offset:clamp(6px,calc(4.592px + .376vw),10px)
}

body:is(.page-environment,.page-job-openings,.page-faq,.page-benefits,.page-contact,.page-interview-archive) .page-title.lower-page-title{
  padding-top:var(--shared-lower-title-top-space)!important
}

body.page-message .lower-page-title{
  top:var(--shared-lower-title-top-space)!important
}

body.page-business .business-hero{
  padding-top:calc(var(--shared-lower-title-top-space) - var(--shared-business-title-offset))!important
}

body.page-business .lower-page-title{
  top:var(--shared-business-title-offset)!important
}

/* Shared gap from the lower-page Japanese title to the first in-page Japanese title. */
:root{
  --shared-page-title-to-inpage-gap:clamp(44.241px,calc(31.487px + 3.401vw),80.466px)
}

body:is(.page-environment,.page-job-openings,.page-benefits,.page-contact,.page-interview-archive) .page-title.lower-page-title{
  padding-bottom:0!important
}

body.page-environment .numbers,
body.page-job-openings .job-openings-content,
body.page-benefits .benefits-intro,
body.page-contact .job-section{
  margin-top:0!important;
  padding-top:var(--shared-page-title-to-inpage-gap)!important
}

/* Shared card surfaces. Kept slightly more specific to preserve the former late-loaded cascade. */
:root {
  --shared-card-background: rgba(255, 255, 255, .5);
  --shared-card-hover-background: #fff;
  --shared-card-shadow: 0 6px 22px rgba(0, 0, 0, .12);
  --shared-card-hover-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  --shared-card-radius: 20px;
}

body .shared-card-surface-children > :is(article, a, li) {
  border-radius: var(--shared-card-radius);
  background: var(--shared-card-background);
  box-shadow: var(--shared-card-shadow);
}

body .shared-card-hover-children > :is(article, a, li) {
  transition: background-color .35s ease, box-shadow .4s ease;
}

@media (hover: hover) and (pointer: fine) {
  body .shared-card-hover-children > :is(article, a, li):hover {
    background: var(--shared-card-hover-background);
    box-shadow: var(--shared-card-hover-shadow);
  }
}

body .shared-card-hover-children > :is(article, a, li):focus-visible,
body .shared-card-hover-children > :is(article, a, li):focus-within {
  background: var(--shared-card-hover-background);
  box-shadow: var(--shared-card-hover-shadow);
}

/* Shared RELATED CONTENTS component styles. */
/* Shared RELATED CONTENTS layout. Card copy remains page-specific. */
.page-message .related,
.page-environment .related {
  padding-top: 89.09px;
  padding-bottom: 0;
}

.page-message .related__grid,
.page-business .related-simple > .related-contents__grid,
.page-environment .related-grid {
  display: grid;
  grid-template-columns: repeat(3, 361px);
  justify-content: space-between;
  gap: 0;
  margin-top: 50.964px;
}

.page-message .related-card,
.page-business .related-simple > .related-contents__grid > a,
.page-environment .related-grid > a {
  position: relative;
  width: 361px;
  height: 275.134px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 20px;
}

.page-message .related-card__accent,
.page-business .related-simple > .related-contents__grid > a::before,
.page-environment .related-grid > a::before {
  top: 33.291px;
  left: 30.5px;
  width: 5px;
  height: 50px;
  border-radius: 1.5px;
}

.page-message .related-card__more,
.page-message .related-card:nth-child(n) .related-card__more,
.page-business .related-simple > .related-contents__grid > a:nth-child(n) .related-simple__more,
.page-environment .related-grid .related-more {
  right: 26px;
  bottom: 20.277px;
}

@media (max-width: 900px) {
  .page-message .related,
  .page-environment .related { padding-top: 29.35px; }

  .page-message .related__grid,
  .page-business .related-simple > .related-contents__grid,
  .page-environment .related-grid {
    grid-template-columns: minmax(0, 336px);
    justify-content: center;
    gap: 24.5px;
    margin-top: 33px;
  }

  .page-message .related-card,
  .page-business .related-simple > .related-contents__grid > a,
  .page-environment .related-grid > a {
    width: 100%;
    height: 242.5px;
    min-height: 0;
    border-radius: 20px;
  }

  .page-message .related-card__accent,
  .page-business .related-simple > .related-contents__grid > a::before,
  .page-environment .related-grid > a::before {
    top: 34.314px;
    left: 25.18px;
    width: 4px;
    height: 43.94px;
  }

  .page-message .related-card__more,
  .page-message .related-card:nth-child(n) .related-card__more,
  .page-business .related-simple > .related-contents__grid > a:nth-child(n) .related-simple__more,
  .page-environment .related-grid .related-more {
    right: 25.178px;
    bottom: 21.487px;
  }

}

/* Unified card internals, based on the environment page implementation. */
.page-message .related-card,
.page-business .related-simple > .related-contents__grid > a,
.page-environment .related-grid > a,
.page-benefits .related .related-grid > a {
  position: relative;
  width: 361px;
  height: 275.134px;
  min-height: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 20px;
}

.page-message .related-card__accent,
.page-business .related-simple > .related-contents__grid > a::before,
.page-environment .related-grid > a::before,
.page-benefits .related .related-grid > a::before {
  content: "";
  position: absolute;
  top: 33.291px !important;
  left: 30.5px !important;
  width: 5px !important;
  height: 50px !important;
  border: 0;
  border-radius: 1.5px;
  background: linear-gradient(#f9ca70, #f08696);
}

.page-message .related-card h3,
.page-business .related-simple b,
.page-environment .related-grid b,
.page-benefits .related .related-grid b {
  position: absolute;
  top: 25.157px !important;
  left: 50.625px !important;
  margin: 0;
  padding: 0;
  font-family: var(--font-ja);
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: normal !important;
  letter-spacing: 2.092px !important;
  white-space: nowrap;
}

.page-message .related-card__en,
.page-business .related-simple small,
.page-environment .related-grid small,
.page-benefits .related .related-grid small {
  position: absolute;
  top: 68.098px !important;
  left: 50.625px !important;
  margin: 0 !important;
  padding: 0;
  color: #939393;
  font-family: var(--font-en);
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
}

.page-message .related-card > p:not(.related-card__en),
.page-business .related-simple .related-simple__body,
.page-environment .related-grid .related-description,
.page-benefits .related .related-grid .related-description {
  position: absolute;
  top: 109.806px !important;
  left: 30.5px !important;
  width: 300px !important;
  margin: 0 !important;
  padding: 0;
  font-family: var(--font-ja);
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 32px !important;
  letter-spacing: 1px !important;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.page-business .related-simple .related-simple__body strong {
  font-weight: inherit;
}

.page-message .related-card__more,
.page-business .related-simple .related-simple__more,
.page-environment .related-grid .related-more,
.page-benefits .related .related-grid .related-more {
  position: absolute;
  top: auto !important;
  right: 26px !important;
  bottom: 20.277px !important;
  left: auto !important;
  display: flex;
  width: 122px !important;
  height: 35.758px;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-en);
  font-size: 17.879px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 35.758px !important;
  letter-spacing: 0;
  white-space: nowrap;
}

.page-message .related-card__more > span,
.page-business .related-simple .related-simple__more > span,
.page-environment .related-grid .related-more > span,
.page-benefits .related .related-grid .related-more > span {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: 1;
}

.page-benefits .related {
  padding-top: 89.09px !important;
  padding-bottom: 0 !important;
}

.page-benefits .related .related-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 361px) !important;
  justify-content: space-between !important;
  gap: 0 !important;
  margin-top: 50.964px !important;
}

/* Below 1024px, use the established narrow card styling. */
@media (max-width: 1023px) {
  .page-message .related__grid,
  .page-business .related-simple > .related-contents__grid,
  .page-environment .related-grid,
  .page-benefits .related .related-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 336px) !important;
    justify-content: center !important;
    gap: 24.5px !important;
    width: 100% !important;
    margin-top: 33px !important;
  }

  .page-message .related-card,
  .page-business .related-simple > .related-contents__grid > a,
  .page-environment .related-grid > a,
  .page-benefits .related .related-grid > a {
    width: 100% !important;
    height: 242.5px !important;
    min-height: 0 !important;
    border-radius: 20px;
  }

  .page-message .related-card__accent,
  .page-business .related-simple > .related-contents__grid > a::before,
  .page-environment .related-grid > a::before,
  .page-benefits .related .related-grid > a::before {
    top: 34.314px !important;
    left: 25.18px !important;
    width: 4px !important;
    height: 43.94px !important;
  }

  .page-message .related-card h3,
  .page-business .related-simple b,
  .page-environment .related-grid b,
  .page-benefits .related .related-grid b {
    top: 26.349px !important;
    left: 43.926px !important;
    font-size: 20px !important;
  }

  .page-message .related-card__en,
  .page-business .related-simple small,
  .page-environment .related-grid small,
  .page-benefits .related .related-grid small {
    top: 68.25px !important;
    left: 43.926px !important;
    font-size: 12px !important;
  }

  .page-message .related-card > p:not(.related-card__en),
  .page-business .related-simple .related-simple__body,
  .page-environment .related-grid .related-description,
  .page-benefits .related .related-grid .related-description {
    top: 101.251px !important;
    right: 25.18px;
    left: 25.18px !important;
    width: auto !important;
    font-size: 14px !important;
    line-height: 28px !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .page-message .related-card__more,
  .page-business .related-simple .related-simple__more,
  .page-environment .related-grid .related-more,
  .page-benefits .related .related-grid .related-more {
    right: 25.178px !important;
    bottom: 21.487px !important;
    width: 108px !important;
    font-size: 16px !important;
    line-height: 35.758px !important;
  }

  .page-benefits .related {
    padding-top: 29.35px !important;
  }

}

/* Align the card area to the visible left edge of each RELATED CONTENTS title. */
.page-message .related,
.page-business .related-simple,
.page-environment .related,
.page-benefits .related {
  --related-title-inline-shift: -8px;
  --related-title-inline-expand: 16px;
}

.page-message .related__grid,
.page-business .related-simple > .related-contents__grid,
.page-environment .related-grid,
.page-benefits .related .related-grid {
  width: calc(100% + var(--related-title-inline-expand)) !important;
  margin-right: 0 !important;
  margin-left: var(--related-title-inline-shift) !important;
}

.page-message .related-card > p:not(.related-card__en),
.page-business .related-simple .related-simple__body,
.page-environment .related-grid .related-description,
.page-benefits .related .related-grid .related-description {
  right: 30.5px;
  left: 30.5px !important;
  width: auto !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

@media (max-width: 1023px) {
  .page-message .related__grid,
  .page-business .related-simple > .related-contents__grid,
  .page-environment .related-grid,
  .page-benefits .related .related-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24.5px !important;
  }

  .page-message .related-card,
  .page-business .related-simple > .related-contents__grid > a,
  .page-environment .related-grid > a,
  .page-benefits .related .related-grid > a {
    width: 100% !important;
  }

  .page-message .related-card > p:not(.related-card__en),
  .page-business .related-simple .related-simple__body,
  .page-environment .related-grid .related-description,
  .page-benefits .related .related-grid .related-description {
    right: 25.18px;
    left: 25.18px !important;
  }
}

@media (max-width: 767px) {
  .page-message .related {
    --related-title-inline-shift: -1px;
    --related-title-inline-expand: 2px;
  }

  .page-environment .related,
  .page-benefits .related {
    --related-title-inline-shift: -5px;
    --related-title-inline-expand: 10px;
  }
}

@media (min-width: 1024px) {
  .page-message .related__grid,
  .page-business .related-simple > .related-contents__grid,
  .page-environment .related-grid,
  .page-benefits .related .related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: clamp(13.156px, 1.285vw, 18.5px) !important;
    row-gap: 0 !important;
  }

  .page-message .related-card,
  .page-business .related-simple > .related-contents__grid > a,
  .page-environment .related-grid > a,
  .page-benefits .related .related-grid > a {
    width: 100% !important;
  }
}

/* Authoritative shared layout for MESSAGE / BUSINESS / ENVIRONMENT. */
.page-message .related,
.page-environment .related {
  padding: 89.09px 0 0 !important;
  --related-title-inline-shift: 0;
  --related-title-inline-expand: 0;
}

.page-message .related > .message-container {
  width: 100% !important;
  max-width: none;
  margin: 0 !important;
  padding: 0;
}

/* Shared in-page small-title group: Environment sections are the source of truth. */
.page-environment :is(.numbers, .culture, .interview, .related) > .heading > h2,
.page-message .related > .message-container > .inpage-title > h2,
.page-business .related-simple > .inpage-title > h2 {
  width: auto;
  height: 61px;
  margin: 0;
  font-family: var(--font-ja);
  font-size: 36px;
  font-weight: 500;
  line-height: 60.4px;
  letter-spacing: 0;
  white-space: nowrap;
}

.page-environment :is(.numbers, .culture, .interview, .related) > .heading > p,
.page-message .related > .message-container > .inpage-title > .message-en-label,
.page-business .related-simple > .inpage-title > p {
  width: auto;
  height: 24px;
  margin: 17px 0 0;
  color: #939393;
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.page-message .related__grid,
.page-business .related-simple > .related-contents__grid,
.page-environment .related-grid {
  display: grid !important;
  width: 100% !important;
  margin: 50.964px 0 0 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: clamp(13.156px, 1.285vw, 18.5px) !important;
  row-gap: 0 !important;
}

@media (min-width: 1024px) {
  .page-business .related-contents__title-break,
  .page-environment .related > .heading > h2 br {
    display: none;
  }

  .page-message .related .section-title-group__responsive-line {
    display: inline;
  }
}

/* Use one shared breakpoint for the RELATED CONTENTS Japanese title. */
@media (min-width: 768px) {
  .related-contents .inpage-title__ja br {
    display: none !important;
  }

  .page-message .related-contents .inpage-title__ja .section-title-group__responsive-line {
    display: inline !important;
  }
}

@media (max-width: 767px) {
  .related-contents .inpage-title__ja br {
    display: block !important;
  }

  .page-message .related-contents .inpage-title__ja .section-title-group__responsive-line {
    display: block !important;
  }
}

@media (max-width: 1023px) {
  .page-message .philosophy {
    min-height: 0;
    padding-bottom: 0;
  }

  .page-message .related,
  .page-environment .related {
    padding-top: clamp(79px, calc(73.161px + 1.557vw), 89.09px) !important;
  }

  .page-message .related .section-title-group__responsive-line {
    display: block;
  }

  .page-message .related__grid,
  .page-business .related-simple > .related-contents__grid,
  .page-environment .related-grid {
    width: 100% !important;
    margin: clamp(33px, calc(22.604px + 2.772vw), 50.964px) 0 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24.5px !important;
  }

}

@media (max-width: 900px) {
  .page-environment :is(.numbers, .culture, .interview, .related) > .heading > h2,
  .page-message .related > .message-container > .inpage-title > h2,
  .page-business .related-simple > .inpage-title > h2 {
    width: auto;
    height: auto;
    font-size: 25px;
    line-height: 40px;
    letter-spacing: -1px;
    white-space: normal;
  }

  .page-environment :is(.numbers, .culture, .interview, .related) > .heading > p,
  .page-message .related > .message-container > .inpage-title > .message-en-label,
  .page-business .related-simple > .inpage-title > p {
    height: 19px;
    margin-top: 13.183px;
    font-size: 16px;
    line-height: normal;
  }
}

/* Scale card internals from the established SP size up to 1.2x at 1023px. */
@media (max-width: 1023px) {
  .page-message .related-card__accent,
  .page-business .related-simple > .related-contents__grid > a::before,
  .page-environment .related-grid > a::before {
    width: clamp(4px, calc(3.537px + .123vw), 4.8px) !important;
    height: clamp(43.94px, calc(38.855px + 1.356vw), 52.728px) !important;
  }

  .page-message .related-card h3,
  .page-business .related-simple b,
  .page-environment .related-grid b {
    font-size: clamp(20px, calc(17.685px + .617vw), 24px) !important;
  }

  .page-message .related-card__en,
  .page-business .related-simple small,
  .page-environment .related-grid small {
    font-size: clamp(12px, calc(10.611px + .37vw), 14.4px) !important;
  }

  .page-message .related-card > p:not(.related-card__en),
  .page-business .related-simple .related-simple__body,
  .page-environment .related-grid .related-description {
    font-size: clamp(14px, calc(12.38px + .432vw), 16.8px) !important;
    line-height: clamp(28px, calc(24.759px + .864vw), 33.6px) !important;
  }

  .page-message .related-card__more,
  .page-business .related-simple .related-simple__more,
  .page-environment .related-grid .related-more {
    width: clamp(108px, calc(95.5px + 3.333vw), 129.6px) !important;
    height: clamp(35.758px, calc(31.619px + 1.104vw), 42.91px);
    font-size: clamp(16px, calc(14.148px + .494vw), 19.2px) !important;
    line-height: clamp(35.758px, calc(31.619px + 1.104vw), 42.91px) !important;
  }

  .page-message .related-card__more .ui-arrow,
  .page-business .related-simple .related-simple__more .ui-arrow,
  .page-environment .related-grid .related-more .ui-arrow {
    --ui-arrow-width: clamp(13.957px, calc(12.342px + .431vw), 16.748px);
    --ui-arrow-height: clamp(8.449px, calc(7.471px + .261vw), 10.139px);
  }
}

/* Keep this after the single-column tablet fallback above. */
@media (min-width: 768px) and (max-width: 1023px) {
  .page-message .related__grid,
  .page-business .related-simple > .related-contents__grid,
  .page-environment .related-grid,
  .page-benefits .related .related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Activated only while the corresponding mobile carousel is mounted. */
body .recruit-carousel-viewport { overflow:hidden; width:100%; }
body .recruit-carousel-track { display:flex!important; flex-wrap:nowrap!important; width:100%!important; margin-inline:0!important; overflow:visible!important; touch-action:pan-y pinch-zoom; align-items:stretch!important; }
body .recruit-carousel-track > .recruit-carousel-slide:not(.is-visual-revealed) { display:block!important; flex-shrink:0!important; min-width:0; opacity:1!important; }
body .recruit-carousel-track > .recruit-carousel-slide.is-visual-revealed { display:block!important; flex-shrink:0!important; min-width:0; }
/* Let card shadows paint inside the viewport without moving the cards. */
body .recruit-carousel-viewport:not(.recruit-carousel-viewport--interview) { padding:28px; width:calc(100% + 56px); margin-inline:-28px; margin-block-start:calc(var(--carousel-margin-top, 0px) - 28px)!important; margin-block-end:calc(var(--carousel-margin-bottom, 0px) - 28px)!important; }
/* Reserve paint space without changing slide widths or the carousel's height. */
body .recruit-carousel-viewport--interview { padding-block:28px; margin-block-start:calc(var(--carousel-margin-top, 0px) - 28px)!important; margin-block-end:calc(var(--carousel-margin-bottom, 0px) - 28px)!important; }
body .recruit-carousel-track--single { gap:56px!important; }
body .recruit-carousel-track--single > .recruit-carousel-slide { flex:0 0 100%!important; width:100%!important; height:auto!important; align-self:stretch!important; }

/* Keep native paragraph wrapping underneath the per-line reveal copies. */
.scroll-reveal-ready [data-scroll-reveal-auto]{position:relative;color:var(--scroll-reveal-unrevealed)}
.scroll-reveal-ready [data-scroll-reveal-auto],
.scroll-reveal-ready [data-scroll-reveal-auto] > .scroll-reveal-overlay{white-space:normal;overflow-wrap:normal;word-break:normal}