/* global navigation - PC
================================================ */
.g-nav-area {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 11;
  pointer-events: auto;
}

.g-nav {
  position: relative;
  padding: min(calc(10 / 1366 * 100vw), 10px) min(calc(50 / 1366 * 100vw), 50px);
}

.g-nav > ul {
  display: flex;
  gap: min(calc(50 / 1366 * 100vw), 50px);
  font-size: 14px;
  font-weight: 600;
  align-items: center;
  color: var(--color-text);
}

.g-nav-area--white .g-nav > ul {
  color: var(--color-text-lightest);
}

.g-nav li {
  white-space: nowrap;
}

.g-nav li a {
  text-shadow:
    1px 1px 0 #fff,
    -1px 1px 0 #fff,
    1px -1px 0 #fff,
    -1px -1px 0 #fff;
}

.g-nav p {
  white-space: nowrap;
}

.g-nav__service {
  cursor: pointer;
}

.g-nav__service p {
  display: flex;
  align-items: center;
  gap: 10px;
  text-shadow:
    1px 1px 0 #fff,
    -1px 1px 0 #fff,
    1px -1px 0 #fff,
    -1px -1px 0 #fff;
}

.g-nav-area--white .g-nav li a,
.g-nav-area--white .g-nav__service p,
.g-nav__contact {
  text-shadow: none !important;
}

.g-nav__service-arrow {
  width: 15px;
  height: 15px;
  background-color: var(--color-text);
  border-radius: 50%;
  position: relative;
  display: inline-block;
  transition: transform var(--transition-duration-base);
  transform: rotate(90deg);
}

.g-nav__service-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 5px;
  height: 5px;
  border-right: 2px solid var(--color-text-lightest);
  border-bottom: 2px solid var(--color-text-lightest);
}

.g-nav-area--white .g-nav__service-arrow {
  background-color: var(--color-text-lightest);
}

.g-nav-area--white .g-nav__service-arrow::after {
  border-right-color: var(--color-text);
  border-bottom-color: var(--color-text);
}

.g-nav__service.is-open .g-nav__service-arrow {
  transform: rotate(-90deg);
}

.g-nav__recruit {
  display: flex;
  align-items: center;
}

.g-nav__link-icon {
  width: 12px;
  height: 12px;
  margin-left: 10px;
}

.g-nav-area--white .g-nav__link-icon {
  filter: brightness(0) invert(1);
}

.g-nav__contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid #0f74b3;
  border-radius: 2px;
  background: linear-gradient(90deg, #0f74b3 0%, #115495 18%, #143b7e 37%, #152a6e 56%, #161f64 76%, #171c61 100%);
  color: var(--color-text-lightest);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.g-nav-area--white .g-nav__contact {
  background: var(--color-text-lightest);
  color: #152a6d;
  border-color: var(--color-text-lightest);
}

/* dropdown
================================================ */
.g-nav__drop-down {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: var(--color-text-lightest);
  padding: min(calc(30 / 1366 * 100vw), 30px) min(calc(50 / 1366 * 100vw), 50px);
  display: flex;
  gap: min(calc(20 / 1366 * 100vw), 20px);
  align-items: flex-start;
  opacity: 0;
  visibility: hidden;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  transition:
    opacity var(--transition-duration-base),
    visibility var(--transition-duration-base);
}

.g-nav__service.is-open .g-nav__drop-down {
  opacity: 1;
  visibility: visible;
}

.g-nav__drop-down-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.g-nav__drop-down-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 2px;
  color: var(--color-text-lightest);
  font-size: 14px;
  font-weight: 600;
  width: 100%;
  white-space: nowrap;
}

.g-nav__drop-down-header--rc {
  background: linear-gradient(90deg, #152a6d 50%, #f61a3c 100%);
}

.g-nav__drop-down-header--hd {
  background: linear-gradient(90deg, #0f74b3 0%, #115495 18%, #143b7e 37%, #152a6e 56%, #161f64 76%, #171c61 100%);
}

.g-nav__drop-down-header--sa {
  background: linear-gradient(90deg, #152a6d 50%, #00f2fe 100%);
}

.g-nav__drop-down ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
}

.drop-down__list {
  width: 100%;
}

.drop-down__list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-contrast-dark);
  text-decoration: none;
}

.drop-down__icon {
  position: relative;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-left: 20px;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.drop-down__icon--rc {
  background: linear-gradient(90deg, #152a6d 49.5%, #f61a3c 100%);
}

.drop-down__icon--hd {
  background: linear-gradient(90deg, #0f74b3 0%, #115495 18%, #143b7e 37%, #152a6e 56%, #161f64 76%, #171c61 100%);
}

.drop-down__icon--sa {
  background: linear-gradient(90deg, #152a6d 49.5%, #00f2fe 100%);
}

.drop-down__icon-arrow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.drop-down__icon-arrow:nth-child(2) {
  transform: translateX(-100%);
}

.drop-down__list a:hover .drop-down__icon-arrow:first-child {
  transform: translateX(100%);
}

.drop-down__list a:hover .drop-down__icon-arrow:nth-child(2) {
  transform: translateX(0);
}

.drop-down__list a:hover .drop-down__icon {
  transform: scale(1.3);
}

/* SP header trigger
================================================ */
.sp-header {
  position: absolute;
  top: calc(10 / 375 * 100vw);
  right: calc(20 / 375 * 100vw);
  z-index: 52;
  pointer-events: auto;
}

.sp-header__hamburger {
  width: calc(40 / 375 * 100vw);
  height: calc(40 / 375 * 100vw);
  background-color: var(--color-text-lightest);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-header__hamburger::after {
  display: block;
  width: calc(18 / 375 * 100vw);
  height: calc(14 / 375 * 100vw);
  content: "";
  background: url("../../images/common/header/nav_sp_hamburger.svg") no-repeat center / contain;
}

.sp-header__hamburger.active::after {
  width: calc(16 / 375 * 100vw);
  height: calc(17 / 375 * 100vw);
  background-image: url("../../images/common/header/nav_sp_close.svg");
}

/* SP nav logo
================================================ */
.sp-nav__logo {
  background-color: var(--color-text-lightest);
  padding: calc(10 / 375 * 100vw) calc(20 / 375 * 100vw);
  border-bottom-right-radius: 10px;
  width: fit-content;
}

.sp-nav__logo img {
  display: block;
  width: calc(60 / 375 * 100vw);
  height: calc(40 / 375 * 100vw);
}

/* SP navigation drawer
================================================ */
.sp-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #152a6d;
  color: var(--color-text-lightest);
  font-weight: 600;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-duration-base) ease;
  z-index: 51;
  pointer-events: auto;
}

.sp-nav.active {
  opacity: 1;
  visibility: visible;
}

.sp-nav__menu {
  display: flex;
  flex-direction: column;
  gap: calc(20 / 375 * 100vw);
  padding: calc(50 / 375 * 100vw) calc(20 / 375 * 100vw);
}

.sp-nav__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(10 / 375 * 100vw);
  font-size: calc(18 / 375 * 100vw);
}

.sp-nav__item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: var(--color-text-lightest);
  text-decoration: none;
}

.sp-nav__divider {
  padding-bottom: calc(20 / 375 * 100vw);
  border-bottom: 1px solid rgb(255 255 255 / 30%);
}

.sp-nav__item--right {
  justify-content: flex-end;
}

.sp-nav__service-trigger {
  cursor: pointer;
}

.sp-nav__service-arrow {
  width: calc(15 / 375 * 100vw);
  height: calc(15 / 375 * 100vw);
  transition: transform var(--transition-duration-base);
}

.sp-nav__service-trigger.is-open .sp-nav__service-arrow {
  transform: rotate(180deg);
}

.sp-nav__external-link {
  width: calc(12 / 375 * 100vw);
  height: calc(12 / 375 * 100vw);
}

/* SP service divider (after service section) */
.sp-nav__service-line {
  border-bottom: 1px solid rgb(255 255 255 / 30%);
}

/* SP service section
================================================ */
.sp-nav__service-section {
  max-height: 0;
  overflow: hidden;
  padding: 0 calc(10 / 375 * 100vw);
  transition: max-height var(--transition-duration-base) ease;
}

.sp-nav__service-section.is-open {
  max-height: 800px;
}

.sp-nav__service-header {
  display: flex;
  align-items: center;
  padding: calc(10 / 375 * 100vw);
  color: var(--color-text-lightest);
  font-size: calc(14 / 375 * 100vw);
  font-weight: 600;
  border-bottom: 2px solid var(--color-text-lightest);
  border-right: 2px solid var(--color-text-lightest);
}

.sp-nav__service-header--rc {
  background: linear-gradient(90deg, #152a6d 50%, #f61a3c 100%);
}

.sp-nav__service-header--hd {
  background: linear-gradient(90deg, #0f74b3 0%, #115495 18%, #143b7e 37%, #152a6e 56%, #161f64 76%, #171c61 100%);
}

.sp-nav__service-header--sa {
  background: linear-gradient(90deg, #152a6d 50%, #00f2fe 100%);
}

.sp-nav__service-items {
  display: flex;
  flex-direction: column;
  gap: calc(15 / 375 * 100vw);
  padding: calc(20 / 375 * 100vw) calc(10 / 375 * 100vw);
}

.sp-nav__service-items--last {
  padding-bottom: 0;
}

.sp-nav__service-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: var(--color-text-lightest);
  font-size: calc(14 / 375 * 100vw);
  font-weight: 600;
  text-decoration: none;
}

.sp-nav__item-arrow {
  width: calc(15 / 375 * 100vw);
  height: calc(15 / 375 * 100vw);
  flex-shrink: 0;
  transform: rotate(-90deg);
}

/* SP contact button
================================================ */
.sp-nav__contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(120 / 375 * 100vw) !important;
  padding: calc(10 / 375 * 100vw);
  border-radius: 2px;
  background: linear-gradient(90deg, #0f74b3 0%, #115495 18%, #143b7e 37%, #152a6e 56%, #161f64 76%, #171c61 100%);
  color: var(--color-text-lightest);
  font-size: calc(18 / 375 * 100vw);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* footer - pc
================================================ */

footer {
  background: linear-gradient(
    54.3deg,
    var(--color-hd-contrast-lightest) 0%,
    var(--color-hd-contrast-lighter) 9.2%,
    var(--color-hd-contrast-light) 18.9%,
    var(--color-hd-contrast-dark) 28.6%,
    var(--color-hd-contrast-darker) 38.8%,
    var(--color-hd-contrast-darkest) 51.1%
  );
}

footer.footer--recruitment {
  background: linear-gradient(54.3deg, var(--color-rc-contrast-dark) 74.237%, var(--color-rc-contrast-light) 100%);
}

footer.footer--sales {
  background: linear-gradient(54.3deg, var(--color-sa-contrast-dark) 74.237%, var(--color-sa-contrast-light) 100%);
}

.footer__inner {
  padding: min(calc(50 / 1366 * 100vw), 50px) 0;
}

.footer-area {
  display: flex;
  gap: clamp(0px, calc((100vw - 751px) / 615 * 250), 250px);
  padding-right: min(calc(100 / 1366 * 100vw), 100px);
}

/* Brand panel (left)
------------------------------------------------ */

.footer__brand {
  align-items: center;
  background: var(--color-contrast-white);
  border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
  display: flex;
  gap: min(calc(50 / 1366 * 100vw), 50px);
  padding: min(calc(60 / 1366 * 100vw), 60px) min(calc(100 / 1366 * 100vw), 100px);
}

.footer__tagline {
  color: var(--color-text);
  font-family: dnp-shuei-gothic-kin-std, sans-serif;
  font-size: min(calc(35 / 1366 * 100vw), 35px);
  font-weight: bold;
  line-height: 1.5;
  white-space: nowrap;
}

.footer__logos {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: min(calc(30 / 1366 * 100vw), 30px);
}

.footer__logo-main {
  width: min(calc(155 / 1366 * 100vw), 155px);
}

.footer__logos-sub {
  display: flex;
  gap: min(calc(29 / 1366 * 100vw), 29px);
}

.footer__logos-sub img {
  height: min(calc(55 / 1366 * 100vw), 55px);
  width: auto;
}

/* Navigation (right)
------------------------------------------------ */

.footer-nav {
  color: var(--color-text-lightest);
  flex: 1;
  font-size: min(calc(14 / 1366 * 100vw), 14px);
  font-weight: 600;
}

.footer-nav__list {
  display: flex;
  flex-direction: column;
  gap: min(calc(15 / 1366 * 100vw), 15px);
  list-style: none;
}

.footer-nav__item {
  border-bottom: 1px solid var(--color-text-lightest);
  padding-bottom: min(calc(15 / 1366 * 100vw), 15px);
}

.footer-nav__item a {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.footer-nav__arrow {
  height: min(calc(10 / 1366 * 100vw), 10px);
  width: min(calc(10 / 1366 * 100vw), 10px);
}

/* Service section
------------------------------------------------ */

.footer-nav__service {
  border-bottom: 1px solid var(--color-text-lightest);
  display: flex;
  gap: min(calc(15 / 1366 * 100vw), 15px);
  padding-bottom: min(calc(15 / 1366 * 100vw), 15px);
}

.footer-nav__service-label {
  flex-shrink: 0;
  width: min(calc(84 / 1366 * 100vw), 84px);
}

.footer-nav__service-groups {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: min(calc(15 / 1366 * 100vw), 15px);
}

.footer-nav__service-header {
  border-bottom: 2px solid var(--color-text-lightest);
  border-right: 2px solid var(--color-text-lightest);
  font-family: var(--font-family-primary);
  font-size: min(calc(18 / 1366 * 100vw), 18px);
  font-weight: bold;
  padding: min(calc(10 / 1366 * 100vw), 10px);
}

.footer-nav__service-header--holdings {
  background: linear-gradient(90deg, var(--color-hd-contrast-lightest), var(--color-hd-contrast-darkest));
}

.footer-nav__service-header--recruitment {
  background: linear-gradient(90deg, var(--color-rc-contrast-dark), var(--color-rc-contrast-light));
}

.footer-nav__service-header--sales {
  background: linear-gradient(90deg, var(--color-sa-contrast-dark), var(--color-sa-contrast-light));
}

.footer-nav__service-items {
  display: flex;
  flex-direction: column;
  gap: min(calc(5 / 1366 * 100vw), 5px);
  list-style: none;
  margin-top: min(calc(10 / 1366 * 100vw), 10px);
}

.footer-nav__service-items li::before {
  background: linear-gradient(
    90deg,
    var(--color-hd-contrast-lightest) 0%,
    var(--color-hd-contrast-lighter) 18%,
    var(--color-hd-contrast-light) 37%,
    var(--color-hd-contrast-dark) 56%,
    var(--color-hd-contrast-darker) 76%,
    var(--color-hd-contrast-darkest) 100%
  );
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: min(calc(10 / 1366 * 100vw), 10px);
  margin-right: min(calc(5 / 1366 * 100vw), 5px);
  vertical-align: middle;
  width: min(calc(10 / 1366 * 100vw), 10px);
}

.footer-nav__service-items--recruitment li::before {
  background: linear-gradient(90deg, var(--color-rc-contrast-dark), var(--color-rc-contrast-light));
}

.footer-nav__service-group:last-child .footer-nav__service-items li::before {
  background: linear-gradient(90deg, var(--color-sa-contrast-dark) 49.5%, var(--color-sa-contrast-light));
}

.footer-nav__service-items a {
  font-weight: 500;
  text-decoration: underline;
}

/* Buttons (recruit / contact)
------------------------------------------------ */

.footer-nav__buttons {
  display: flex;
  gap: min(calc(15 / 1366 * 100vw), 15px);
  list-style: none;
}

.footer-nav__button {
  background: var(--color-contrast-white);
  border-radius: 2px;
  color: var(--color-text);
  font-size: min(calc(14 / 1366 * 100vw), 14px);
  font-weight: bold;
  padding: min(calc(5 / 1366 * 100vw), 5px) min(calc(10 / 1366 * 100vw), 10px);
  text-decoration: none;
}

/* Copyright
------------------------------------------------ */

.footer__copyright {
  color: var(--color-text-lightest);
  font-family: var(--font-family-en);
  font-size: min(calc(14 / 1366 * 100vw), 14px);
  font-weight: bold;
  line-height: min(calc(50 / 1366 * 100vw), 50px);
  margin-top: min(calc(50 / 1366 * 100vw), 50px);
  text-align: center;
}