@charset "utf-8";
/* CSS Document */
:root {
  --leading-trim: calc((1em - 1lh) / 2);/* 日本語 */
  --leading-trim_en: calc((1cap - 1lh) / 2);/* 英語 */
  --half-leading: calc((1lh - 1em) / 2);/* 日本語 */
  --half-leading_en: calc((1lh - 1cap) / 2);/* 英語 */
  --theme_biz: #A21818;
  --theme_biz_sub: #FFEFEF;
  --theme_dx: #1866A2;
  --theme_dx_sub: #F2F9FF;
}

body {
  &.__biz {
    --theme_current: var(--theme_biz);
    --theme_current_sub: var(--theme_biz_sub);
  }
  &.__dx {
    --theme_current: var(--theme_dx);
    --theme_current_sub: var(--theme_dx_sub);
  }
  @media screen and (max-width: 768px) { margin-inline: auto; }
}

.main { position: relative; }
#mainContents {
  margin: 0;
  width: 100%;
}

.m_btn--pdf {
  --theme_pdfBtn: var(--theme_biz);
  transform: translateX(-5px);
  &:last-child { margin-top: 40px; }
  .m_btn__target {
    background-color: var(--theme_current);
  }
}


/* ローディング画面 */
#loading {
  width: 100%;
  height: 100%;
  transition: all 1s;
  background-color: #fff;
  position: fixed;
  inset: 0;
  z-index: 99999;
}
.spinner {
  animation: l13 1s infinite linear;
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
    radial-gradient(farthest-side,#666 94%,#0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%,#666);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
  /*margin: 200px auto 200px -100px;*/
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50px;
}

.loaded {
  opacity: 0;
  visibility: hidden;
}
/* ローディングアニメーション */
@keyframes l13{ 
  100%{transform: rotate(1turn)}
}


/*
    タブナビ
================================*/
.m_category-nav {
  [class*="__biz"] {
    --themeColor: var(--theme_biz);
    --themeColor_sub: var(--theme_biz_sub);
  }
  [class*="__dx"] {
    --themeColor: var(--theme_dx);
    --themeColor_sub: var(--theme_dx_sub);
  }
}
.m_tabContainer {}
.m_tab {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  .m_tab__item {
    background-color: var(--themeColor_sub);
    color: var(--themeColor);
    /* cursor: pointer; */
    /* display: grid; */
    display: flex;
    font-size: 18px;
    font-weight: bold;
    /* padding: 0.8em; */
    place-content: center;
    transition: background-color .3s, color .3s;
    .m_tab__link {
      color: inherit;
      display: block;
      padding: 0.8em;
      text-align: center;
      width: 100%;
    }
    &:not([class*="is_active"]) {
      border-color: var(--themeColor);
      border-width: 2px 2px 0 2px;
      border-style: solid;
      &.__biz { border-right: none; }
      &.__dx { border-left: none; }
    }
    &:is(:hover, .is_active) {
      background-color: var(--themeColor);
      color: #fff;
    }
    &.is_active {
      &:hover { position: inherit; }
      .m_tab__link { pointer-events: none; }
    }
  }
}
.m_catListContainer {
  border: 2px solid var(--themeColor);
  display: grid;
  gap: 20px;
  padding: 25px 20px;
  &.__biz {
    grid-template-areas: 
    "level-age technical-skill conceptual-skill"
    "human-skill technical-skill job-function";
  }
  &.__dx {
    grid-auto-columns: 1fr;
    grid-template-areas: 
    "dejital-age-lebel dx-general-and-gov dx-system";
  }
  @media screen and (max-width: 768px) {
    &:is(.__biz, .__dx){
      grid-template-areas: none;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
  }
  .m_catListContainer__inner {
    &.cat_level-age {
      grid-area: level-age;
      .m_catListContainer__title {
        &::before { content: "\f0c0"; }
      }
    }
    &.cat_human-skill {
      grid-area: human-skill;
      .m_catListContainer__title {
        &::before { content: "\f086"; }
      }
    }
    &.cat_technical-skill {
      grid-area: technical-skill;
      .m_catListContainer__title {
        &::before { content: "\f303"; }
      }
    }
    &.cat_conceptual-skill {
      grid-area: conceptual-skill;
      .m_catListContainer__title {
        &::before { content: "\f0eb"; }
      }
    }
    &.cat_job-function {
      grid-area: job-function;
      .m_catListContainer__title {
        &::before { content: "\f4d8"; }
      }
    }
    &.cat_dx-general-and-gov {
      grid-area: dx-general-and-gov;
      .m_catListContainer__title {
        &::before { content: "\f19c"; }
      }
    }
    &.cat_dx-system {
      grid-area: dx-system;
      .m_catListContainer__title {
        &::before { content: "\f1ad"; }
      }
    }
    &.cat_dejital-age-lebel {
      grid-area: dejital-age-lebel;
      .m_catListContainer__title {
        &::before { content: "\f5fd"; }
      }
    }
    @media screen and (max-width: 768px) {
      &:is([class*="cat_"]) { grid-area: auto; }
    }
  }
  .m_catListContainer__title {
    align-items: center;
    background-color: var(--themeColor_sub);
    color: var(--themeColor);
    display: flex;
    font-size: 14px;
    font-weight: normal;
    height: calc(1em + 1lh);
    letter-spacing: 0;
    line-height: 1;
    margin-bottom: 12px;
    &.is-firefox { letter-spacing: -0.02em; }
    &::before {
      background-color: var(--themeColor);
      color: #fff;
      content: "";
      font: bold 16px / 25px "Font Awesome 5 Free";
      height: 25px;
      margin-right: 0.5em;
      text-align: center;
      width: 25px;
    }
  }
  .m_catList {
    .m_catList__item {
      & + & { margin-top: 5px; }
      align-items: center;
      display: flex;
      &::before {
        border-top: 3px solid var(--themeColor);
        border-right: 3px solid var(--themeColor);
        content: "";
        display: block;
        height: 0.5em;
        margin-right: 0.5em;
        transform: rotate(45deg);
        width: 0.5em;
      }
    }
    .m_catList__link {
      text-decoration: underline;
      &:hover { opacity: .7; }
    }
  }
}

/* 公開ミドルのリンクがあるとき */
.m_heading--tertiary > .m_heading__ttl {
  > a {
    &:hover { opacity: .7; }
  }
}

/*
    コースマップ本文
================================*/
/* 上書き */
.m_heading__ttl { line-height: normal; }

.article-body-container {
  &.js_scrollX {
    @media screen and (max-width: 768px) {
      overflow-x: auto;
      overflow-Y: visible;
    }
  }
}

.m_scrollHint {
  display: none;
  @media screen and (max-width: 768px) {
    align-items: center;
    color: var(--theme_current, #1866A2);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-bottom: 10px;
    &::before {
      aspect-ratio: 1 / 1.464;
      background-color: var(--theme_current, #1866A2);
      content: "";
      display: block;
      mask-image: url("/resource/img/bup/course_map/icon_scroll_arw.svg");
      mask-position: center;
      mask-repeat: no-repeat;
      mask-size: contain;
      /* height: 1em; */
      width: 1.8em;
    }
  }
}

.coursemapEntry {
  /*max-width: 1020px;*/
  width: 1020px;
}

/* リクエスト受付中タブ */
.requestTab {
  line-height: inherit;
  position: relative;
  .requestTab__descr { color: #333; }
}

.m_coursemapContainer {
  & + & { margin-top: 40px; }
}
.js_fixedHeaderWrapper {
  position: relative;
}
.m_coursemapContainer__header {
  @media screen and (max-width: 768px) { overflow-x: hidden; }
  img {
    display: block;
    max-width: none;
  }
  &.is_fixed {
    background-color: #fff;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 997;
    @media screen and (max-width: 768px) {
      position: fixed;
      /* env(safe-area-inset-top) はノッチやカメラ部分を考慮したiOS/Androidの安全領域 */
      /* top: 0 の代わりに、アドレスバーによるズレがないように調整する値を指定 */
      top: env(safe-area-inset-top, 0);
    }
  }
  &.is_absolute {
    background-color: #fff;
    position: absolute;
    width: 100%;
    z-index: 997;
  }
  .js_fixed_inner {
    white-space: nowrap; /* 中身を横並びにする */
    will-change: transform; /* アニメーションのパフォーマンス最適化 */
  }
}
.m_coursemapBase {
  --theme_shinjin:#d76076;
  --theme_wakate: #1c99d7;
  --theme_chuken: #278bcb;
  --theme_veteran: #1766a2;
  --theme_elmMng: #20866e;
  --theme_midMng: #1d695c;
  --theme_seniorMng: #004e4a;
  --grid_gap: 3px;
  --grid_columns: 7;
  --gridTotal: 10;
  --single-fr-width: calc((/*970px*/1020px - (var(--grid_gap) * (var(--grid_columns) - 1))) / var(--grid_columns));/* 1frの幅を計算 */
  display: grid;
  gap: var(--grid_gap);
  grid-template-columns: repeat(var(--grid_columns), 1fr);
  grid-template-rows: repeat(var(--gridTotal), min-content);
  /* min-height: 50vh; */
  position: relative;
  width: 100%;
  /* DX人材育成（一般事業会社・官公庁） */
  &.__dx {
    --grid_columns: 6;
    .m_coursemapBase__bg {
      &.__seniorMng { grid-column: 6 / 7; }
    }
    .m_coursemapBase__item {
      &.__seniorMng { --colPos: 6; }
    }
  }
  /* DX人材育成（システム会社・システム部門） */
  &.__dxsys {
    --grid_columns: 5;
    .m_coursemapBase__bg {
      &.__veteran { grid-column: 3 / 4; }
      &.__elmMng { grid-column: 4 / 5; }
      &.__seniorMng { grid-column: 5 / 6; }
    }
    .m_coursemapBase__item {
      &.__veteran { --colPos: 3; }
      &.__elmMng { --colPos: 4; }
      &.__seniorMng { --colPos: 5; }
    }
  }
  
  .m_coursemapBase__bg {
    grid-row: 1 / -1;
    z-index: -1;
    &.__shinjin {
      background-color: #F8E1E4;
      grid-column: 1 / 2;
    }
    &.__wakate {
      background-color: #D0E8F4;
      grid-column: 2 / 3;
    }
    &.__chuken {
      background-color: #CDDEED;
      grid-column: 3 / 4;
    }
    &.__veteran {
      background-color: #C6D6E9;
      grid-column: 4 / 5;
    }
    &.__elmMng {
      background-color: #DAEDDD;
      grid-column: 5 / 6;
    }
    &.__midMng {
      background-color: #CFE6D2;
      grid-column: 6 / 7;
    }
    &.__seniorMng {
      background-color: #C5D9D0;
      grid-column: 7 / 8;
    }
  }

  .m_coursemapBase__item {
    grid-row-start: var(--rowPos);
    margin: 5px;
    position: relative;
    /* リクエストタブありで1行に収まる */
    &.js_singleLine {
      .m_coursemapBase__link {
        gap: 5px;
        grid-template-columns: auto auto;
        place-items: center;
      }
    }
    .m_coursemapBase__link {
      background-color: #fff;
      border: 1px solid #1f77be;
      color: currentColor;
      border-radius: 5px;
      display: grid;
      font-size: 12px;
      font-weight: 500;
      height: 100%;
      line-height: 1.4;
      /*padding: calc(5px - var(--half-leading)) 5px 5px;*/
      padding: 5px;
      place-content: center;
      text-wrap: pretty;

      > span:not([class]) {
        /* 2行表示＋ツールチップにするなら（ただしその場合は.m_coursemapBase__itemをdivで括ってそれにpaddingを設定する必要がある） */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      &:hover {
        border-color: #e6002d;
        color: #e6002d;
      }
    }/* m_coursemapBase__link */
    
    &.__shinjin {
      --colorArrow: var(--theme_shinjin);
      --colPos: 1;
      grid-column-start: var(--colPos);
    }
    &.__wakate {
      --colorArrow: var(--theme_wakate);
      --colPos: 2;
      grid-column-start: var(--colPos);
    }
    &.__chuken {
      --colorArrow: var(--theme_chuken);
      --colPos: 3;
      grid-column-start: var(--colPos);
    }
    &.__veteran {
      --colorArrow: var(--theme_veteran);
      --colPos: 4;
      grid-column-start: var(--colPos);
    }
    &.__elmMng {
      --colorArrow: var(--theme_elmMng);
      --colPos: 5;
      grid-column-start: var(--colPos);
    }
    &.__midMng {
      --colorArrow: var(--theme_midMng);
      --colPos: 6;
      grid-column-start: var(--colPos);
    }
    &.__seniorMng {
      --colorArrow: var(--theme_seniorMng);
      --colPos: 7;
      grid-column-start: var(--colPos);
    }
    /* &.__col1 { grid-column-end: calc(var(--colPos) +  1); } */
    &.__col2 { grid-column-end: calc(var(--colPos) +  2); }
    &.__col3 { grid-column-end: calc(var(--colPos) +  3); }
    &.__col4 { grid-column-end: calc(var(--colPos) +  4); }
    &.__col5 { grid-column-end: calc(var(--colPos) +  5); }
    &.__col6 { grid-column-end: calc(var(--colPos) +  6); }
    &.__col7 { grid-column-end: calc(var(--colPos) +  7); }
    &.__hasArrow {
      i {
        display: contents;
        &::after {
          background-color: var(--colorArrow);
          clip-path: polygon(0 0, 100% 0, 50% 100%);
          content: "";
          display: block;
          height: 8px;
          position: absolute;
          bottom: -11px;
          /* left: 50%; */
          left: calc(var(--single-fr-width) / 2);
          /* transform: translateX(-50%); */
          transform: translateX(-100%);
          width: 15px;
        }
        &.__arw_pos2::after {
          left: calc(var(--single-fr-width) + var(--grid_gap) + var(--single-fr-width) / 2);
        }
        &.__arw_pos3::after {
          left: calc((var(--single-fr-width) + var(--grid_gap)) * 2 + var(--single-fr-width) / 2);
        }
        &.__arw_pos4::after {
          left: calc((var(--single-fr-width) + var(--grid_gap)) * 3 + var(--single-fr-width) / 2);
        }
        &.__arw_pos5::after {
          left: calc((var(--single-fr-width) + var(--grid_gap)) * 4 + var(--single-fr-width) / 2);
        }
        &.__arw_pos6::after {
          left: calc((var(--single-fr-width) + var(--grid_gap)) * 5 + var(--single-fr-width) / 2);
        }
        &.__arw_pos7::after {
          left: calc((var(--single-fr-width) + var(--grid_gap)) * 6 + var(--single-fr-width) / 2);
        }

      }
    }
  }/* .m_coursemapBase__item */

}