@charset "UTF-8";


body {
  background: rgba(245, 245, 247, .6);
}


@media screen and (max-width: 1080px) {

  #menu_lite #parallax .inner_parallax_image {
    background-size: 200%;
  }
}


/*---------------------------------------------------------------*\
$firstview
\*---------------------------------------------------------------*/

#firstview_careers {
  position: relative;
  padding: 377px 0 300px;
  gap: 72px;
}

#firstview_careers .content {
  max-width: 1440px;
  width: calc(100% - 112px);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

#firstview_careers .bg_lines {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

#firstview_careers .bg_lines .each {
  width: calc(100%/4);
  border: solid 1px #eaeaea;
  border-top: none;
}

#firstview_careers .bg_lines .each:nth-last-of-type(2) {
  border-left: none;
}

#firstview_careers .bg_lines .each:nth-last-of-type(3) {
  border-left: none;
}

#firstview_careers .bg_lines .each:last-of-type {
  border-left: none;
  border-right: none;
}

/* catch */
#firstview_careers .catch {
  gap: 18px;
}

#firstview_careers .catch .line {
  font-size: clamp(32px, 8vw, 72px);
}

#firstview_careers .catch .highlight {
  font-size: clamp(32px, 9vw, 100px);

}

#firstview_careers .description {
  font-size: 20px;
  margin: 56px 0 0 0;
}


@media screen and (max-width: 860px) {

  #firstview_careers {
    padding: 277px 0 200px;
  }
}


@media screen and (max-width: 600px) {

  #firstview_careers {
    padding: 160px 0 80px;
  }

  #firstview_careers .content {
    width: calc(100% - 56px);
  }

  #firstview_careers .catch {
    gap: 10px;
  }

  #firstview_careers .description {
    font-size: 15px;
  }

  #firstview_careers .bg_lines {
    height: calc(100% - 48px);
  }
}


/*---------------------------------------------------------------*\
$career mosaic
\*---------------------------------------------------------------*/

#cm {
  /* desktop baseline */
  --cm_design_w: 1440px;
  --cm_base_w: var(--cm_design_w);
  --cm_scale: 1;
  --cm_scaled_h: auto;

  --gap: 22px;
  --radius: 12px;
  --row: 92px;
  --pad_x: 28px;
  --pad_t: 28px;
  --pad_b: 28px;

  --right_fr: 1.75fr;
  --cols_desktop: repeat(9, minmax(0, 1fr)) repeat(3, minmax(0, var(--right_fr)));

  /* mobile ratios */
  --ar_2x2: 1 / 1;
  --ar_wide: 16 / 10;

  /* full-width cards (hero/top/team/kudos/event) <=600 (現状維持) */
  --ar_full_sm: 16 / 11;
  /* 601-860（高さを抑える）←ここ好みで調整 */
  --ar_full_md: 16 / 9;

  --ar_full: var(--ar_full_md);

  /* per-card overrides (default = common) */
  --ar_full_hero: var(--ar_full);
  --ar_full_top: var(--ar_full);
  --ar_full_team: var(--ar_full);
  --ar_full_kudos: var(--ar_full);
  --ar_full_event: var(--ar_full);

  /* visuals */
  --overlay: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, .9) 28%,
      rgba(0, 0, 0, .9) 100%);

  --hover_overlay: linear-gradient(to right,
      rgba(0, 0, 0, .75) 0%,
      rgba(0, 0, 0, .85) 100%);

  --dim_overlay: rgba(0, 0, 0, .38);

  --bg_light_blue: #E6F1FF;
  --bg_light_beige: #F8EFF3;
  --bg_light_gray: #F2F2F2;
  --bg_green: linear-gradient(to right, #a0e394 0%, #bad96b 100%);

  --bg_linear: linear-gradient(135deg,
      #f3f3f3 0%,
      #c9e9b6 25%,
      #9bf06a 50%,
      #6cf09a 75%,
      #7cf07a 100%);
}

#cm .cm_wrap {
  padding-inline: var(--pad_x);
  padding-top: var(--pad_t);
  padding-bottom: var(--pad_b);
}

#cm .cm_sizer {
  width: 100%;
  position: relative;
  height: auto;
}

#cm .cm_stage {
  width: 100%;
  position: static;
  transform: none;
  transform-origin: top left;
  will-change: transform;
}

#cm.cm_desktop .cm_sizer {
  height: var(--cm_scaled_h);
}

#cm.cm_desktop .cm_stage {
  width: var(--cm_base_w);
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(var(--cm_scale));
}


/*---------------------------------------------------------------*\
$color
\*---------------------------------------------------------------*/

#cm .bg_linear {
  background: var(--bg_linear);
}

#cm .bg_light_gray {
  background: var(--bg_light_gray);
}

#cm .bg_light_beige {
  background: var(--bg_light_beige);
}

#cm .bg_light_blue {
  background: var(--bg_light_blue);
}

#cm .bg_green {
  background: var(--bg_green);
}


/*---------------------------------------------------------------*\
$Desktop grid (12 cols + areas) 
\*---------------------------------------------------------------*/

#cm .cm_grid {
  display: grid;
  grid-template-columns: var(--cols_desktop);
  grid-auto-rows: var(--row);
  gap: var(--gap);
  align-items: stretch;
  grid-template-areas:
    "hero  hero  hero  hero  hero  top   top   top   top   team  team  team"
    "hero  hero  hero  hero  hero  top   top   top   top   team  team  team"
    "hero  hero  hero  hero  hero  top   top   top   top   team  team  team"
    "wl    wl    wl    wk    wk    wk    cc    cc    cc    team  team  team"
    "wl    wl    wl    wk    wk    wk    cc    cc    cc    event event event"
    "wl    wl    wl    wk    wk    wk    cc    cc    cc    event event event"
    "kudos kudos kudos kudos kudos kudos lang  lang  lang  event event event"
    "kudos kudos kudos kudos kudos kudos lang  lang  lang  event event event";
}

#cm .cm_grid>[data-area="hero"] {
  grid-area: hero;
}

#cm .cm_grid>[data-area="top"] {
  grid-area: top;
}

#cm .cm_grid>[data-area="team"] {
  grid-area: team;
}

#cm .cm_grid>[data-area="wl"] {
  grid-area: wl;
}

#cm .cm_grid>[data-area="wk"] {
  grid-area: wk;
}

#cm .cm_grid>[data-area="cc"] {
  grid-area: cc;
}

#cm .cm_grid>[data-area="kudos"] {
  grid-area: kudos;
}

#cm .cm_grid>[data-area="lang"] {
  grid-area: lang;
}

#cm .cm_grid>[data-area="event"] {
  grid-area: event;
}

/* desktop safety */
#cm.cm_desktop .cm_grid>.card {
  aspect-ratio: auto;
}


/*---------------------------------------------------------------*\
$card
\*---------------------------------------------------------------*/

#cm .card {
  position: relative;
  border-radius: var(--radius);
  isolation: isolate;
  overflow: hidden;
  min-height: 0;
}

#cm .card_plus {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: 44px;
  aspect-ratio: 1/1;
  border-radius: 10px 0 0 0;
  font-size: 28px;
  user-select: none;
}

#cm .card_is_dim:after {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--dim_overlay);
  pointer-events: none;
}

#cm .card_reveal {
  position: absolute;
  background: var(--hover_overlay);
  inset: 0;
  z-index: 5;
  gap: 12px;
  padding: 22px;
  color: #fff;
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

#cm .card_media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#cm .grid_team {
  position: absolute;
  width: 85%;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

#cm .grid_illustration {
  position: absolute;
  width: 59%;
  top: 56%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  right: -5px;
}

#cm .grid_cube {
  position: absolute;
  right: -110px;
  width: 400px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

#cm .grid_kudos {
  position: absolute;
  width: 280px;
  top: 50%;
  right: 4%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

#cm .grid_languages {
  position: absolute;
  width: 240px;
  bottom: 0;
  right: 0;
}

#cm .card_body {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 22px;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: opacity .22s ease, transform .22s ease;
}

#cm .card_body .wrap {
  gap: 8px;
  margin: 0 0 0 12px;
}


/* --- mosaic interactive (hover + touch) --- */
#cm .card_is_interactive:is(:hover, :active, :focus-within):before {
  opacity: 1;
}

#cm .card_is_interactive:is(:hover, :active, :focus-within) .card_reveal {
  opacity: 1;
  pointer-events: auto;
}

#cm .card_is_interactive:is(:hover, :active, :focus-within) .card_body {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
}

#cm .card_is_interactive:focus-within::before {
  opacity: 1;
}

#cm .card_is_interactive:focus-within .card_reveal {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

#cm .card_is_interactive:focus-within .card_body {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
}


@media (max-width: 860px) {

  #cm .grid_illustration {
    width: 64%;
    top: 70%;
    right: -20px;
  }

  #cm .grid_kudos {
    width: 52%;
  }
}


@media (max-width: 600px) {

  #cm .card_body {
    padding: 14px;
  }

  #cm [data-area="hero"] .card_body,
  #cm [data-area="kudos"] .card_body {
    justify-content: flex-start;
  }

  #cm .lucide {
    width: 24px;
  }

  #cm .grid_kudos {
    width: 70%;
    bottom: -16px;
    top: inherit;
    transform: inherit;
  }

  #cm .grid_languages {
    width: 100%;
  }
}


/* =========================================================
texts
========================================================= */

#cm .cm_number {
  width: 240px;
  position: relative;
  margin-bottom: 16px;
}

#cm .title_l {
  font-size: min(12vw, 50px);
}

#cm .cm_title {
  font-size: clamp(20px, 5vw, 32px);
}

#cm .lead {
  font-size: clamp(14px, 3.5vw, 22px);
}

#cm .lead_vertical {
  font-size: 28px;
  line-height: 1.3;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

#cm .cm_sub {
  font-size: 19px;
}

#cm .cm_revealTitle {
  font-size: 18px;
}

#cm .cm_revealText {
  font-size: 15px;
}


@media (max-width: 860px) {

  #cm .cm_number {
    width: 44%;
  }
}


@media (max-width: 600px) {

  #cm .lead_vertical {
    font-size: 19px;
  }

  #cm .cm_number {
    height: 56px;
    margin: 0 0 24px 0;
  }
}


/*---------------------------------------------------------------*\
$Mobile (flex + aspect + order) 
\*---------------------------------------------------------------*/

@media (max-width: 860px) {

  #cm:not(.cm_desktop) {
    --gap: 14px;
    --pad_x: 18px;
    --pad_t: 18px;
    --pad_b: 18px;
  }

  #cm:not(.cm_desktop) .cm_grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
  }

  #cm:not(.cm_desktop) .cm_grid>.card {
    flex: 0 0 calc((100% - var(--gap)) / 2);
    aspect-ratio: var(--ar_wide);
  }

  #cm:not(.cm_desktop) .cm_grid> :is([data-area="wl"], [data-area="wk"], [data-area="cc"], [data-area="lang"]) {
    aspect-ratio: var(--ar_2x2);
  }

  #cm:not(.cm_desktop) .cm_grid> :is([data-area="hero"], [data-area="top"], [data-area="team"], [data-area="kudos"], [data-area="event"]) {
    flex-basis: 100%;
  }

  /* per-card aspect ratios (fallback already handled in vars) */
  #cm:not(.cm_desktop) .cm_grid>[data-area="hero"] {
    aspect-ratio: var(--ar_full_hero);
  }

  #cm:not(.cm_desktop) .cm_grid>[data-area="top"] {
    aspect-ratio: var(--ar_full_top);
  }

  #cm:not(.cm_desktop) .cm_grid>[data-area="team"] {
    aspect-ratio: var(--ar_full_team);
  }

  #cm:not(.cm_desktop) .cm_grid>[data-area="kudos"] {
    aspect-ratio: var(--ar_full_kudos);
  }

  #cm:not(.cm_desktop) .cm_grid>[data-area="event"] {
    aspect-ratio: var(--ar_full_event);
  }

  #cm:not(.cm_desktop) [data-area="hero"] {
    order: 10;
  }

  #cm:not(.cm_desktop) [data-area="top"] {
    order: 20;
  }

  #cm:not(.cm_desktop) [data-area="team"] {
    order: 30;
  }

  #cm:not(.cm_desktop) [data-area="wl"] {
    order: 40;
  }

  #cm:not(.cm_desktop) [data-area="wk"] {
    order: 41;
  }

  #cm:not(.cm_desktop) [data-area="cc"] {
    order: 50;
  }

  #cm:not(.cm_desktop) [data-area="lang"] {
    order: 51;
  }

  #cm:not(.cm_desktop) [data-area="kudos"] {
    order: 60;
  }

  #cm:not(.cm_desktop) [data-area="event"] {
    order: 70;
  }

  #cm:not(.cm_desktop) {
    --ar_full_hero: 16 / 7;
    --ar_full_top: 16 / 7;
    --ar_full_team: 16 / 10;
    --ar_full_kudos: 16 / 7;
    --ar_full_event: 16 / 8;
  }
}


@media (max-width: 600px) {
  #cm:not(.cm_desktop) {
    --ar_full: var(--ar_full_sm);
    --ar_full_hero: 16 / 10;
    --ar_full_top: 16 / 10;
    --ar_full_team: 16 / 12;
    --ar_full_kudos: 16 / 12;
    --ar_full_event: 16 / 10;
  }
}


/*---------------------------------------------------------------*\
$menu_lite
\*---------------------------------------------------------------*/

#menu_lite {
  background-color: #111;
  padding: 64px 0 88px;
  width: 100%;
  margin: 0 auto;
  position: sticky;
  top: 77px;
  gap: 40px;
}

/* heading */
#menu_lite .heading {
  font-size: 24px !important;
  position: relative;
  z-index: 5;
}

/* parallax */
#menu_lite #parallax {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

#menu_lite .info {
  position: relative;
  z-index: 5;
  width: 100%;
}

#menu_lite #parallax .parallax_area:after {
  opacity: .05;
}

/* content */
#menu_lite .content {
  gap: 16px;
  margin: 40px 0 0 0;
  width: calc(100% - 112px);
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

#menu_lite .each {
  width: 100%;
  height: 110px;
  cursor: pointer;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#menu_lite .subject {
  position: relative;
  z-index: 2;
}


@media screen and (max-width: 1280px) {

  #menu_lite .grid_3fr {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}


@media screen and (max-width: 600px) {

  #menu_lite {
    padding: 56px 0 72px;
  }

  #menu_lite .grid_3fr {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* heading */
  #menu_lite .heading {
    font-size: 20px !important;
  }

  /* content */
  #menu_lite .content {
    width: calc(100% - 56px);
  }

  #menu_lite .each {
    height: 80px;
  }
}


/*---------------------------------------------------------------*\
$advantage
\*---------------------------------------------------------------*/

section.wrap_advantages {
  position: relative;
}

.bg_beige {
  background-color: #797365;
}

.bg_gray {
  background-color: #55575b;
}

#advantage {
  padding: 110px 0;
  margin: 0 auto;
}

#advantage .wrap {
  max-width: 1440px;
  width: calc(100% - 112px);
  margin: 0 auto;
}


#advantage.advantage_02:after {
  display: block;
  content: '';
  width: 100%;
  height: 100px;
  background-color: #e7e7e7ff;
  position: absolute;
  bottom: -100px;
  left: 0;
  z-index: -1;
}

#advantage.advantage_02 {
  background-color: #111;
}

#advantage.advantage_02:after {
  display: block;
  content: '';
  width: 100%;
  height: 100px;
  background-color: #111;
  position: absolute;
  bottom: -100px;
  left: 0;
  z-index: -1;
}

#advantage.advantage_03 {
  background-color: #454648;
  padding: 100px 0 130px;
}

#advantage.advantage_02,
#advantage.advantage_03 {
  border-radius: 48px 48px 0 0;
}

#advantage .wrap_catch {
  position: relative;
}

#advantage .sub_catch {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

#advantage .catch {
  font-size: clamp(24px, 6vw, 50px);
  line-height: 1.3;
}

#advantage .explain {
  margin: 48px 0 0 0;
}

#advantage .content {
  margin: 90px auto 0;
  gap: 4%;
}

#advantage .subtitle {
  gap: 16px;
  flex-shrink: 0;
  color: rgba(0, 0, 0, .5);
}

#advantage .subtitle .sub_border {
  width: 100%;
  height: 1px;
}

#advantage.advantage_01 .subtitle .sub_border {
  background-color: rgba(0, 0, 0, .2);
}

#advantage.advantage_02 .subtitle .sub_border {
  background-color: rgba(255, 255, 255, .2);
}

#advantage .subtitle .sub_text {
  font-size: 11px;
  flex-shrink: 0;
}

#advantage .title {
  font-size: 32px;
  line-height: 1.3;
  margin: 32px 0 0 0;
}

#advantage .description {
  margin: 32px 0 0 0;
}

#advantage.advantage_01 .thumbnail,
#advantage.advantage_02 .thumbnail {
  width: 40%;
  flex-shrink: 0;
  aspect-ratio: 2 / 1.25;
  object-fit: cover;
}

/* library */
#advantage .library {
  gap: 3%;
  margin: 64px 0 0 0;
}

#advantage .library .each_content a {
  width: 100%;
  height: 100%;
  gap: 20px;
}

#advantage .library .info {
  gap: 12px;
  width: 100%;
  gap: 12px;
  width: 100%;
}

#advantage .library .tag {
  width: fit-content;
  padding: 8px;
  border-radius: 3px;
  font-size: 13px;
}

#advantage .library .subject {
  font-size: 21px;
  line-height: 1.4;
}

#advantage .library .description {
  font-size: 15px;
}

#advantage .library .thumbnail {
  flex-shrink: 0;
}

#advantage .library .read {
  font-size: 14px;
  width: fit-content;
  gap: 8px;
}

#advantage .library .icon_link_arrow {
  margin: auto;
  width: 9px;
  height: 9px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

#advantage .library .border {
  border-bottom: solid 1px #333;
}

/* hovered */
#advantage .library .each_content:hover .read {
  color: #22d700;
}

#advantage .library .each_content:hover .icon_link_arrow {
  border-top: 2px solid #22d700;
  border-right: 2px solid #22d700;
}


@media screen and (max-width: 1280px) {

  /* content */
  #advantage.advantage_01 .thumbnail,
  #advantage.advantage_02 .thumbnail {
    aspect-ratio: 1/1;
  }
}


@media screen and (max-width: 1080px) {

  #advantage {
    padding: 80px 0;
  }

  #advantage .content {
    margin: 64px 0 0 0;
  }
}


@media (min-width: 861px) {

  #advantage.advantage_01,
  #advantage.advantage_02,
  #advantage.advantage_03 {
    position: sticky;
    top: -100vh;
  }
}


/* -------------------------------------------
   Advantage: short viewport height bailout
   - 横長（縦が低い）環境では sticky スタックを解除して
     contentが最後まで読めることを優先
------------------------------------------- */

@media (min-width: 861px) and (max-height: 740px) {

  #advantage.advantage_01,
  #advantage.advantage_02,
  #advantage.advantage_03 {
    position: relative;
    top: auto;
  }

  #advantage.advantage_02,
  #advantage.advantage_03 {
    border-radius: 0;
  }
}


@media screen and (max-width: 860px) {

  #advantage.advantage_01,
  #advantage.advantage_02,
  #advantage.advantage_03 {
    position: relative;
    top: auto;
  }

  #advantage.advantage_02,
  #advantage.advantage_03 {
    border-radius: 0;
  }
}


@media screen and (max-width: 780px) {

  /* content */
  #advantage .content {
    flex-direction: column;
    gap: 32px;
  }

  #advantage.advantage_01 .thumbnail,
  #advantage.advantage_02 .thumbnail {
    width: 100%;
    aspect-ratio: 2 / 1.25;
  }

  #advantage .library {
    flex-direction: column;
    gap: 32px;
  }
}


@media screen and (max-width: 600px) {

  #advantage.advantage_03 {
    padding: 100px 0;
  }

  #advantage .wrap {
    width: calc(100% - 56px);
  }

  #advantage .title {
    font-size: 24px;
  }

  #advantage .library .thumbnail {
    aspect-ratio: 2/1.1;
    object-fit: cover;
  }

  #advantage .library .tag {
    font-size: 11px;
  }

  #advantage .library .subject {
    font-size: 17px;
  }

  #advantage .library .read {
    font-size: 11px;
  }
}


/*---------------------------------------------------------------*\
$job_opening
\*---------------------------------------------------------------*/

.job_opening {
  position: relative;
  padding: 110px 0 150px;
  gap: 40px;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* card column */
.job_opening #card_column {
  width: calc(100% - 112px);
  max-width: 1440px;
  margin: 0 auto;
  gap: 40px;
}

.job_opening #card_column .wrap_content {
  gap: 40px;
  border-top: solid 1px rgba(255, 255, 255, .15);
  border-bottom: solid 1px rgba(255, 255, 255, .15);
  width: 100%;
  padding: 40px 0;
}

.job_opening #card_column .each_content {
  gap: 48px;
}

.job_opening #card_column .inner {
  gap: 56px;
}

.job_opening #card_column .thumbnail {
  width: 260px;
  aspect-ratio: 1.25 / 1;
  flex-shrink: 0;
  object-fit: cover;
}

.job_opening #card_column .info {
  width: 100%;
  gap: 24px;
}

.job_opening #card_column .heading {
  position: relative;
  z-index: 2;
  font-size: 26px;
}

.job_opening #card_column .sub {
  font-size: 20px;
}

.job_opening #card_column .apply_button {
  width: 240px;
  height: 64px;
  flex-shrink: 0;
}


@media screen and (max-width: 1080px) {

  .job_opening #card_column .each_content {
    align-items: flex-start;
  }

  .job_opening #card_column .inner {
    flex-direction: column;
    align-items: flex-start;
  }
}


@media screen and (max-width: 780px) {

  .job_opening #card_column .thumbnail {
    aspect-ratio: 1/1;
  }
}


@media screen and (max-width: 600px) {

  .job_opening {
    padding: 80px 0;
  }

  .job_opening #card_column {
    width: calc(100% - 56px);
  }

  .job_opening #card_column .thumbnail {
    width: 100%;
  }

  .job_opening #card_column .apply_button {
    width: 100%;
    height: 48px;
  }
}


/*---------------------------------------------------------------*\
$board
\*---------------------------------------------------------------*/

#board {
  width: calc(100% - 112px);
  max-width: 1440px;
  margin: 0 auto;
  padding: 140px 0 0;
}

/* heading */
#board .wrap_heading {
  width: 320px;
  flex-shrink: 0;
}

/* content */
#board .content {
  gap: 100px;
}

#board .profile {
  gap: 48px;
}

#board .picture {
  width: 340px;
  height: auto;
  aspect-ratio: 1/1;
  flex-shrink: 0;
  background-color: #f5f5f799;
}

#board .info {
  width: 100%;
}

#board .name {
  font-size: 30px;
}

#board .name_en {
  font-size: 15px;
  margin: 8px 0 0 0;
}

#board .title {
  margin: 32px 0 0 0;
}

#board .description {
  margin: 64px 0 0 0;
}


@media screen and (max-width: 1080px) {

  #board {
    width: calc(100% - 80px);
    flex-direction: column;
    gap: 64px;
  }

  /* heading */
  #board .wrap_heading {
    width: 100%;
  }
}


@media screen and (max-width: 860px) {

  /* content */
  #board .content {
    gap: 40px;
  }

  #board .picture {
    width: 38%;
  }
}


@media screen and (max-width: 600px) {

  #board {
    width: calc(100% - 40px);
  }

  /* content */
  #board .content {
    grid-template-columns: 1fr;
  }

  #board .profile {
    flex-direction: column;
  }

  #board .picture {
    width: 100%;
  }

  #board .name {
    font-size: 24px;
  }

  #board .name_en {
    font-size: 12px;
  }

  #board .title {
    font-size: 14px;
  }
}


/*---------------------------------------------------------------*\
$internal company system
\*---------------------------------------------------------------*/

#internal_cp {
  margin: 0 auto;
  padding: 140px 0 0;
}

/* parallax */
#internal_cp .parallax {
  height: 280px;
}

#internal_cp .heading {
  line-height: 1;
  padding: 0 0 40px 0;
  position: relative;
  z-index: 10;
}

/* content */
#internal_cp .content {
  width: 100%;
  max-width: 1440px;
  margin: -56px auto 0;
  position: relative;
  z-index: 2;
  padding: 40px 40px 64px;
  gap: 28px;
  background-color: #F9F9FA;
}

#internal_cp .each {
  gap: 20px;
  padding: 16px;
}

#internal_cp .content .info {
  gap: 8px;
}

#internal_cp .content .thumbnail {
  width: 180px;
  aspect-ratio: 2/1.25;
  object-fit: cover;
  flex-shrink: 0;
}

#internal_cp .content .title {
  font-size: 18px;
}


@media screen and (max-width: 860px) {

  #internal_cp .content .thumbnail {
    width: 30%;
  }
}


@media screen and (max-width: 600px) {

  /* parallax */
  #internal_cp .parallax {
    height: 170px;
  }

  /* content */
  #internal_cp .content {
    padding: 40px 26px 64px;
    gap: 16px;
  }

  #internal_cp .content.grid_2fr {
    grid-template-columns: repeat(2, 1fr);
  }

  #internal_cp .each {
    flex-direction: column;
    padding: 12px;
    gap: 12px;
  }

  #internal_cp .content .title {
    font-size: 14px;
  }

  #internal_cp .content .thumbnail {
    width: 100%;
  }
}


/*---------------------------------------------------------------*\
$basic_system
\*---------------------------------------------------------------*/

.basic_system#tyle {
  width: 100%;
  max-width: 1440px;
  padding: 0 40px;
  margin: 0 auto;
}

/* heading */
.basic_system#tyle .wrap_heading {
  padding: 0;
}

/* content */
.basic_system#tyle .content {
  padding: 0;
}

.basic_system#tyle .wrap_icon {
  width: 40px;
}

.basic_system#tyle .wrap_icon svg {
  width: 18px;
}

.basic_system#tyle .each_panel {
  background-color: #fff;
  gap: 16px;
}

.basic_system#tyle .subject_s {
  font-size: 15px;
}


@media screen and (max-width: 860px) {

  /* content */
  .basic_system#tyle .content.grid_4fr {
    grid-template-columns: repeat(3, 1fr);
  }
}


@media screen and (max-width: 600px) {

  /* content */
  .basic_system#tyle {
    padding: 0 26px;
  }

  .basic_system#tyle .content.grid_4fr {
    grid-template-columns: repeat(2, 1fr);
  }

  .basic_system#tyle .subject_s {
    font-size: 13px;
  }
}


/*---------------------------------------------------------------*\
$company info
\*---------------------------------------------------------------*/

.company#list {
  width: calc(100% - 80px);
  max-width: 1360px;
  margin: 100px auto 0;
}

/* heading */
.company#list .wrap_heading {
  width: 500px;
  flex-shrink: 0;
  gap: 56px;
}

/* content */
.company#list .info_list {
  margin: 150px 0 0 0;
}


@media screen and (max-width: 1080px) {

  .company#list {
    padding: 0;
    flex-direction: column;
  }

  /* content */
  .company#list .info_list {
    margin: 0
  }
}


@media screen and (max-width: 600px) {

  /* heading */
  .company#list .wrap_heading {
    width: 100%;
  }

  /* content */
  .company#list {
    width: calc(100% - 56px);
  }

  .company#list .info_list * {
    font-size: 14px;
  }
}


/*---------------------------------------------------------------*\
$CTA
\*---------------------------------------------------------------*/

#cta_careers {
  gap: 56px;
  position: relative;
  padding: 24% 0 80px;
  margin: 140px 0 0 0;
  background-color: #292929;
}

#cta_careers .bg_cta {
  position: absolute;
  opacity: .85;
  top: 0;
  left: 0;
  width: 100%;
  background-position: bottom !important;
}

/* heading */
#cta_careers .wrap_heading {
  width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  gap: 16px;
}

#cta_careers .catch * {
  line-height: 1.25;
  text-shadow: #292929 0px 0 30px;
}

#cta_careers .catch .line_01 {
  font-size: clamp(18px, 6vw, 40px);
}

#cta_careers .catch .line_02 {
  font-size: clamp(24px, 6vw, 50px);
}

#cta_careers .cta_button {
  width: 280px;
  height: 64px;
  font-size: 17px;
}

/* random pics */
.random_pics#logos#logos {
  position: relative;
  z-index: 2;
}

.random_pics#logos:before {
  display: block;
  content: '';
  width: 20%;
  height: 100%;
  background: linear-gradient(90deg, #292929 0%, rgba(0, 0, 0, .0) 90%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.random_pics#logos:after {
  display: block;
  content: '';
  width: 20%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, .0) 0%, #292929 96%);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

.random_pics#logos .splide__list {
  height: auto;
}

.random_pics#logos .splide__slide {
  width: 320px !important;
  margin: 0 !important;
}


@media screen and (max-width: 1080px) {

  #cta_careers {
    padding: 32% 0 80px;
  }

  #cta_careers .bg_cta {
    background-size: 130%;
    background-position: top !important;
  }
}


@media screen and (max-width: 860px) {

  /* heading */
  #cta_careers .wrap_heading {
    width: calc(100% - 56px);
    flex-direction: column;
    gap: 20px;
  }

  #cta_careers .catch {
    text-align: center;
  }
}


@media screen and (max-width: 600px) {

  #cta_careers {
    padding: 30% 0 80px;
  }

  #cta_careers .catch {
    font-size: 26px;
  }

  #cta_careers .cta_button {
    height: 48px;
    font-size: 14px;
  }

  .random_pics#logos .splide__slide {
    width: 240px !important;
  }
}