@charset "UTF-8";



/*
  Hamburger Button
*/
[data-component="menu-button"] {
  --size: 2rem;
  --spacing: calc( 100% / 3 );
  --bar-height: 2px;
  --bar-width: 75%;
  --speed: 0.1s;

  --bar-color: #a0a0a0;
  --button-color: #404040;

  display: inline-block;
  position: relative;
  background: var(--button-color);

  width: var(--size);
  height: var(--size);
}

[data-component="menu-button"] > i {
  display: none;
}

[data-component="menu-button"]:before,
[data-component="menu-button"]:after {
  content: '';
  display: block;
  height: var(--bar-height);
  width: var(--bar-width);
  margin: 0 calc( (100% - var(--bar-width)) / 2 );
  background: var(--bar-color);
  position: absolute;

  transform-origin: center center;
}

[data-component="menu-button"]:before {
  top: var(--spacing);
  
  transition:
    transform var(--speed) 0s,
    top var(--speed) var(--speed);
}

[data-component="menu-button"]:after {
  bottom: var(--spacing);

  transition:
    transform var(--speed) 0s,
    bottom var(--speed) var(--speed);
}

[data-component="menu-button-switch"] {
  display: none;
}

[data-component="menu-button-switch"]:checked ~ * [data-component="menu-button"]:before {
  top: calc( 50% - (var(--bar-height) / 2) );
  transform: rotate(45deg);

  transition:
    top var(--speed) 0s,
    transform var(--speed) var(--speed);
}

[data-component="menu-button-switch"]:checked ~ * [data-component="menu-button"]:after {
  bottom: calc( 50% - (var(--bar-height) / 2) );
  transform: rotate(-45deg);

  transition:
    bottom var(--speed) 0s,
    transform var(--speed) var(--speed);
}



[data-component="in-page-navigation"] {
  position: sticky;
  top: var(--presentation_global-header-height);
  background: var(--theme_color_common_blue);
  color: #ffffff;
  padding: 0.25em 0;
  margin: 0;
  z-index: 1;
}

[data-component="in-page-navigation"] nav {
  max-width: var(--presentation_width-variant_content);
  padding: 0 var(--presentation_defined-width-side-space);
  margin: auto;
}

[data-component="in-page-navigation"] ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 3em;
  justify-content: center;
}

[data-component="in-page-navigation"] ul > li {
  margin: 0;
  padding: 0;
}

[data-component="in-page-navigation"] ul > li > a {
  color: inherit;
  font-size: clamp(1em, 1.25vw, 1.25em);
  font-weight: bold;
}



[data-component="header-link-button"][data-variant="entry"] {
  color: #ffffff;
  background: var(--theme_color_common_gray_80);
}

[data-component="header-link-button"][data-variant="recruitment-inquiry"] {
  color: #ffffff;
  background: var(--theme_color_corporate);
}

[data-component="header-link-button"][data-variant="cmc-group"] {
  color: #000000;
  background: #ffffff;
}