/*! This style is addtional style for Recruit site */
@charset "UTF-8";

html {
  scroll-padding-top: 50px;
}

[data-layout="careerstep"] .systemFlow {
  margin-bottom: calc(180 / 375 * 1rem);
}

[data-layout="careerstep"] #trainingSystem {
  padding-top: calc(100 / 375 * 1rem);
  margin-top: calc(-100 / 375 * 1rem);
}

[data-layout="careerstep"] .careerPath {
  margin-bottom: calc(120 / 375 * 1rem);
}
[data-layout="careerstep"] .systemFlow .block01,
[data-layout="careerstep"] .systemFlow .block02,
[data-layout="careerstep"] .systemFlow .block03 {
  display: grid;
  grid-template-columns: 0.32rem 1fr; /* 左にヘッダー、右にメイン */
  /* gap: calc(20 / 375 * 1rem);
    padding: calc(20 / 375 * 1rem);*/
  position: relative;
  margin-bottom: calc(-20 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow .header-text {
  grid-column: 1;
  padding: calc(10 / 375 * 1rem);
  position: absolute;
  top: calc(250 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow .header-text h2 {
  font-weight: 600;
}

[data-layout="careerstep"] .systemFlow .main-content {
  grid-column: 2;
}

[data-layout="careerstep"] .systemFlow .container {
  display: grid;
  grid-template-columns: 0.92rem 0.784rem 0.5466666666rem 0.5466666666rem;
  /* grid-template-columns: 345px 294px 220px 220px; 4列の幅 */
  grid-template-rows: auto 0.92rem auto auto;
  gap: calc(10 / 375 * 1rem);
  position: relative;
}

[data-layout="careerstep"] .systemFlow .block02 .container {
  grid-template-rows: auto 0.6906666667rem auto auto;
}

[data-layout="careerstep"] .systemFlow .block03 .container {
  grid-template-rows: auto 0.344rem auto auto;
}

[data-layout="careerstep"] .systemFlow .block02 .header-text {
  top: calc(120 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow .block03 .header-text {
  top: calc(48 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow .title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: bold;
  background-color: #ad0b40;
  border-radius: calc(50 / 375 * 1rem);
  color: #fff;
  width: calc(85 / 375 * 1rem);
  height: calc(85 / 375 * 1rem);
  margin: 0 auto;
}

[data-layout="careerstep"] .systemFlow .title1 {
  grid-column: 1;
  grid-row: 1;
}
[data-layout="careerstep"] .systemFlow .title2 {
  grid-column: 2;
  grid-row: 1;
}
[data-layout="careerstep"] .systemFlow .title3 {
  grid-column: 3;
  grid-row: 1;
}
[data-layout="careerstep"] .systemFlow .title4 {
  grid-column: 4;
  grid-row: 1;
}

/* 各アイテムの配置（要素1〜4） */
[data-layout="careerstep"] .systemFlow .flow1 {
  grid-column: 1;
  grid-row: 2;
}
[data-layout="careerstep"] .systemFlow .flow2 {
  grid-column: 2;
  grid-row: 2;
}
[data-layout="careerstep"] .systemFlow .flow3 {
  grid-column: 3;
  grid-row: 2;
}
[data-layout="careerstep"] .systemFlow .flow4 {
  grid-column: 4;
  grid-row: 2;
}

[data-layout="careerstep"] .systemFlow .flow {
  background-color: #ebe3e6;
  text-align: center;
  padding: calc(5 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow .item {
  font-size: var(--fz14);
  font-weight: 500;
  text-align: center;
  border: 1px solid #333;
  padding: calc(5 / 375 * 1rem);
  position: absolute;
}

[data-layout="careerstep"] .systemFlow .selected {
  font-weight: 500;
  color: #ad0b40;
}

[data-layout="careerstep"] .systemFlow .item1 {
  width: calc(123 / 375 * 1rem);
  height: calc(35 / 375 * 1rem);
  top: calc(120 / 375 * 1rem);
  left: calc(12 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow .item2 {
  width: calc(190 / 375 * 1rem);
  height: calc(35 / 375 * 1rem);
  top: calc(120 / 375 * 1rem);
  left: calc(143 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow .item3 {
  width: calc(270 / 375 * 1rem);
  top: calc(120 / 375 * 1rem);
  left: calc(367 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow .item4 {
  width: calc(181 / 375 * 1rem);
  top: calc(120 / 375 * 1rem);
  right: calc(228 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow .item5 {
  width: calc(181 / 375 * 1rem);
  top: calc(120 / 375 * 1rem);
  right: calc(13 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow .item21 {
  width: calc(396 / 375 * 1rem);
  top: calc(162 / 375 * 1rem);
  right: calc(13 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow .item6 {
  width: calc(335 / 375 * 1rem);
  top: calc(206 / 375 * 1rem);
  left: calc(165 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow .item7 {
  width: calc(472 / 375 * 1rem);
  top: calc(271 / 375 * 1rem);
  left: calc(165 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow .item8 {
  width: calc(902 / 375 * 1rem);
  top: calc(336 / 375 * 1rem);
  left: calc(165 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow .item9 {
  width: calc(902 / 375 * 1rem);
  top: calc(381 / 375 * 1rem);
  left: calc(165 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow .item10 {
  width: calc(123 / 375 * 1rem);
  top: calc(35 / 375 * 1rem);
  left: calc(12 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow .item11 {
  width: calc(355 / 375 * 1rem);
  top: calc(35 / 375 * 1rem);
  left: calc(143 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow .item12 {
  width: calc(709 / 375 * 1rem);
  top: calc(79 / 375 * 1rem);
  left: calc(143 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow .item13 {
  width: calc(924 / 375 * 1rem);
  top: calc(123 / 375 * 1rem);
  left: calc(143 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow .item14 {
  width: calc(355 / 375 * 1rem);
  top: calc(168 / 375 * 1rem);
  left: calc(143 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow .item15 {
  width: calc(320 / 375 * 1rem);
  top: calc(35 / 375 * 1rem);
  left: calc(12 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow .item16 {
  width: calc(100 / 375 * 1rem);
  top: calc(35 / 375 * 1rem);
  left: calc(367 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow .item17 {
  width: calc(160 / 375 * 1rem);
  top: calc(35 / 375 * 1rem);
  left: calc(476 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow .item18 {
  width: calc(132 / 375 * 1rem);
  top: calc(35 / 375 * 1rem);
  left: calc(671 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow .item19 {
  width: calc(183 / 375 * 1rem);
  top: calc(35 / 375 * 1rem);
  left: calc(885 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow .item20 {
  width: calc(310 / 375 * 1rem);
  top: calc(79 / 375 * 1rem);
  left: calc(671 / 375 * 1rem);
}

[data-layout="careerstep"] .systemFlow p.att {
  position: absolute;
  margin-top: calc(10 / 375 * 1rem);
  margin-left: calc(125 / 375 * 1rem);
  margin-bottom: calc(10 / 375 * 1rem);
  font-size: var(--fz15);
}

[data-layout="careerstep"] .systemFlow p.note {
  font-size: var(--fz15);
  color: #ad0b40;
  font-weight: 600;
  position: absolute;
  margin-top: calc(-50 / 375 * 1rem);
}

[data-layout="careerstep"] .training {
  position: relative;
  background: #fff;
}
[data-layout="careerstep"] .training_inner {
  position: relative;
  margin-left: auto;
}

[data-layout="careerstep"] .training .items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: calc(50 / 375 * 1rem);
}

[data-layout="careerstep"] .training .item {
  width: 48%;
  margin-bottom: 0.053333333rem;
}

[data-layout="careerstep"] .training .c-leftBorder {
  margin-bottom: calc(35 / 375 * 1rem);
}

[data-layout="careerstep"] .training .item-head {
  font-weight: bold;
  margin-bottom: 0.026666666rem;
  font-size: var(--fz20);
  color: #ad0b40;
}

[data-layout="careerstep"] .training .item-list {
  margin-bottom: 0.013333333rem;
  list-style: none;
  padding-left: 0;
  font-size: var(--fz16);
  font-weight: 500;
  padding-top: 0.013333333rem;
  list-style-type: disc;
  text-indent: 0.013333333rem;
  margin-left: 0.053333333rem;
  line-height: 1.8;
}

[data-layout="careerstep"] .training .Section_head {
  margin-bottom: 0.08rem;
}

[data-layout="careerstep"] .training .thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 0.08rem;
}

[data-layout="careerstep"] .training .thumb {
  width: 48%;
  margin-bottom: 0.053333333rem;
}

[data-layout="careerstep"] .training .thumb p {
  text-align: right;
}

[data-layout="careerstep"] .training .step {
  background: #ad0b40;
  clip-path: polygon(90% 0.5%, 100% 50%, 90% 100%, 0% 100%, 0% 0%);
  padding: calc(10 / 375 * 1rem) calc(20 / 375 * 1rem);
  margin-bottom: calc(50 / 375 * 1rem);
  color: #fff;
  font-size: var(--fz22);
  width: calc(230 / 375 * 1rem);
  font-weight: 600;
}

@media (min-width: 768px) {
  [data-layout="careerstep"] .training {
    padding-right: 0.32rem;
    margin-right: calc(50% - 1.44rem);
    margin-bottom: 0.4rem;
    margin-left: calc(50% - 50vw);
  }

  [data-layout="careerstep"] .training_inner {
    padding: 0.32rem 0 0.1866666667rem;
    width: 2.7rem;
  }

  [data-layout="careerstep"] .training .item {
    margin-bottom: calc(30 / 375 * 1rem);
  }

  [data-layout="careerstep"] .training .item p {
    margin-bottom: calc(30 / 375 * 1rem);
  }

  [data-layout="careerstep"] .training .block {
    margin-bottom: calc(50 / 375 * 1rem);
  }

  [data-layout="careerstep"] .training .item.item04 {
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  [data-layout="careerstep"] #trainingSystem {
    padding-top: calc(60 / 375 * 1rem);
    margin-top: calc(-60 / 375 * 1rem);
  }

  [data-layout="careerstep"] .Main {
    padding-bottom: calc(30 / 375 * 1rem);
  }

  [data-layout="careerstep"] .PageTitle {
    margin-bottom: 0.1066666667rem;
  }

  [data-layout="careerstep"] .systemFlow {
    margin-bottom: calc(50 / 375 * 1rem);
  }

  [data-layout="careerstep"] .graphLink a {
    font-weight: 600;
  }

  [data-layout="careerstep"] .training .item {
    width: 100%;
    order: initial;
  }

  [data-layout="careerstep"] .training .thumb {
    width: 100%;
  }

  [data-layout="careerstep"] .training {
    padding-right: 0;
    margin-right: 0;
    margin-bottom: 0.2rem;
    margin-left: calc(50% - 50vw);
  }

  [data-layout="careerstep"] .training_inner {
    padding-top: calc(60 / 375 * 1rem);
    padding-right: 0.0533333333rem;
    padding-bottom: calc(10 / 375 * 1rem);
    padding-left: 0.0533333333rem;
    width: 100%;
  }

  [data-layout="careerstep"] .training .items {
    margin-bottom: calc(30 / 375 * 1rem);
  }

  [data-layout="careerstep"] .training .item {
    margin-bottom: 0;
  }

  [data-layout="careerstep"] .training .item p {
    margin-bottom: calc(50 / 375 * 1rem);
  }

  [data-layout="careerstep"] .training .block {
    margin-bottom: 0;
  }

  [data-layout="careerstep"] .training .thumb p {
    font-size: var(--fz14);
  }

  [data-layout="careerstep"] .training .step {
    background: #ad0b40;
    clip-path: polygon(90% 0.5%, 100% 50%, 90% 100%, 0% 100%, 0% 0%);
    padding: calc(10 / 375 * 1rem) calc(20 / 375 * 1rem);
    margin-bottom: calc(50 / 375 * 1rem);
    color: #fff;
    font-size: var(--fz16);
    width: calc(180 / 375 * 1rem);
    font-weight: 600;
  }

  [data-layout="careerstep"] .training .c-headerText2 {
    font-size: var(--fz16);
    line-height: 1.8;
    margin-top: -0.0133333333rem;
    margin-bottom: -0.0133333333rem;
  }

  [data-layout="careerstep"] .training .c-leftBorder {
    margin-bottom: calc(30 / 375 * 1rem);
  }

  [data-layout="careerstep"] .training .thumbs {
    margin-top: 0;
  }

  [data-layout="careerstep"] .training .thumb {
    margin-bottom: calc(30 / 375 * 1rem);
  }

  /*------------ sp only systemFlow setting *----------------/*/

  [data-layout="careerstep"] .systemFlow p.note {
    margin-top: calc(0 / 375 * 1rem);
  }

  [data-layout="careerstep"] .systemFlow p.att {
    position: relative;
    margin-top: calc(10 / 375 * 1rem);
    margin-left: 0;
    margin-bottom: calc(10 / 375 * 1rem);
    font-size: var(--fz13);
    width: 100%;
  }

  [data-layout="careerstep"] .systemFlow .tab-container {
    width: 100%;
    max-width: calc(600 / 375 * 1rem);
    margin: 0 auto;
    padding-top: calc(50 / 375 * 1rem);
  }

  [data-layout="careerstep"] .systemFlow .tabs {
    display: flex;
    justify-content: space-around;
    margin-bottom: calc(15 / 375 * 1rem);
  }

  [data-layout="careerstep"] .systemFlow .tab {
    padding: calc(10 / 375 * 1rem) calc(22.5 / 375 * 1rem);
    background-color: #dcdcdceb;
    cursor: pointer;
    border-radius: calc(5 / 375 * 1rem);
    font-size: var(--fz15);
    font-weight: 600;
    transition: all 0.6s ease;
  }

  [data-layout="careerstep"] .systemFlow input[type="radio"] {
    display: none;
  }

  [data-layout="careerstep"] .systemFlow .svg-content {
    margin-top: calc(30 / 375 * 1rem);
  }

  [data-layout="careerstep"] .systemFlow .svg-content .svg-item {
    display: none;
    transition: all 0.6s ease;
    opacity: 0;
    visibility: hidden;
  }

  [data-layout="careerstep"]
    .systemFlow
    input#tab1:checked
    ~ .svg-content
    #svg1 {
    opacity: 1;
    visibility: visible;
    display: block;
  }

  [data-layout="careerstep"]
    .systemFlow
    input#tab2:checked
    ~ .svg-content
    #svg2 {
    opacity: 1;
    visibility: visible;
    display: block;
  }

  [data-layout="careerstep"]
    .systemFlow
    input#tab3:checked
    ~ .svg-content
    #svg3 {
    opacity: 1;
    visibility: visible;
    display: block;
  }

  [data-layout="careerstep"] .systemFlow input#tab1:checked + label,
  [data-layout="careerstep"] .systemFlow input#tab2:checked + label,
  [data-layout="careerstep"] .systemFlow input#tab3:checked + label {
    background-color: #ad0b40;
    color: white;
  }

  [data-layout="careerstep"] .systemFlow .svg-content img {
    max-width: 100%;
    height: auto;
    display: block;
    /* visibility: visible;
         opacity: 1;*/
    margin: 0 auto;
  }
  /*------------ sp only systemFlow setting END *----------------/*/
}

/* Container style with polygonal clipping and gradient background */

[data-layout="careerstep"] .text-section p {
  line-height: 1.4;
}

[data-layout="careerstep"] .text-section p span {
  color: #ad0b40;
  font-weight: 600;
}

[data-layout="careerstep"] .path_wrap {
  position: relative;
  padding: calc(10 / 375 * 1rem) calc(22 / 375 * 1rem);
  flex-grow: 1; /* Each section takes equal width */
  flex-shrink: 1;
  min-width: 0; /* Adjust for spacing */
  height: 100%;
  display: flex;
  align-items: center;
}

[data-layout="careerstep"] .path_info {
  display: flex;
  justify-content: space-between;
  margin-bottom: calc(30 / 375 * 1rem);
  align-items: center;
}

[data-layout="careerstep"] .path_info .thumb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

[data-layout="careerstep"] .path_info .thumb img {
  width: calc(111 / 375 * 1rem);
  height: calc(111 / 375 * 1rem);
}

[data-layout="careerstep"] .path_info .thumb {
  font-size: var(--fz15);
}

[data-layout="careerstep"] .path_info .txt {
  width: calc(750 / 375 * 1rem);
  font-size: var(--fz15);
  line-height: 1.6;
  font-weight: 500;
  /* margin-left: calc(50 /  375 * 1rem);*/
}

@media (min-width: 768px) {
  [data-layout="careerstep"] .path_info .thumb p {
    margin-left: calc(12 / 375 * 1rem);
  }

  [data-layout="careerstep"] .path {
    position: relative;

    width: 100%;
    height: calc(112 / 375 * 1rem); /* Adjusted for horizontal layout */
    background: linear-gradient(135deg, #fff, #ffecf2);
    clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%, 5% 50%);
    display: flex;
    flex-direction: row; /* Horizontal layout */
    justify-content: flex-start;
    color: #333;
    font-size: var(--fz16);
    font-weight: bold;
    text-align: left;
    align-items: center; /* Center vertically */
    padding-right: calc(45 / 375 * 1rem);
    padding-top: calc(10 / 375 * 1rem);
    padding-bottom: calc(10 / 375 * 1rem);
  }

  [data-layout="careerstep"] .title-section {
    flex-shrink: 0;
    padding: 0.0266666666rem 0.14rem 0.0266666666rem 0.24rem;
    font-size: var(--fz24);
    font-weight: bold;
    text-align: left;
    position: relative;
    display: flex;
    align-items: center;
  }

  [data-layout="careerstep"] .path_wrap::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: calc(4 / 375 * 1rem);
    height: calc(95 / 375 * 1rem);
    background-color: #ad0b40;
    transform: skewX(-15deg);
  }

  [data-layout="careerstep"] .path_wrap:last-child::after {
    display: none;
  }

  [data-layout="careerstep"] .text-section:last-child::after {
    display: none;
  }

  [data-layout="careerstep"] .balloon_wrap {
    position: relative;
    display: flex;
  }
  [data-layout="careerstep"] .balloon {
    display: flex;
    justify-content: center;
    position: relative;
    max-width: calc(90 / 375 * 1rem);
    margin-bottom: calc(15 / 375 * 1rem);
    padding: 0.3em 0.8em;
    background-color: #ad0b40;
    color: #ffffff;
    font-weight: 500;
  }

  [data-layout="careerstep"] .balloon::before {
    position: absolute;
    bottom: -6px;
    width: 10px;
    height: 8px;
    background-color: #ad0b40;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: "";
  }

  [data-layout="careerstep"] .balloon-001 {
    left: calc(380 / 375 * 1rem);
  }

  [data-layout="careerstep"] .balloon-002 {
    left: calc(570 / 375 * 1rem);
  }

  [data-layout="careerstep"] .balloon-003 {
    left: calc(650 / 375 * 1rem);
  }

  [data-layout="careerstep"] .balloon-004 {
    left: calc(730 / 375 * 1rem);
  }

  [data-layout="careerstep"] .block01 .balloon-001 {
    left: calc(680 / 375 * 1rem);
  }

  [data-layout="careerstep"] .block02 .balloon-001 {
    left: calc(430 / 375 * 1rem);
  }

  [data-layout="careerstep"] .block02 .balloon-002 {
    left: calc(560 / 375 * 1rem);
  }

  [data-layout="careerstep"] .block02 .balloon-003 {
    left: calc(720 / 375 * 1rem);
  }

  [data-layout="careerstep"] .block04 .balloon-001 {
    left: calc(330 / 375 * 1rem);
  }

  [data-layout="careerstep"] .block04 .balloon-002 {
    left: calc(600 / 375 * 1rem);
  }

  [data-layout="careerstep"] .block04 .balloon-003 {
    left: calc(660 / 375 * 1rem);
  }

  [data-layout="careerstep"] .block04 .balloon-004 {
    left: calc(760 / 375 * 1rem);
  }

  [data-layout="careerstep"] .block04 .title-section {
    padding-right: 0.06rem;
  }

  [data-layout="careerstep"] .path04 {
    padding-left: calc(10 / 375 * 1rem);
  }

  [data-layout="careerstep"] .block04 .text-section {
    padding-left: 0.0286667rem;
    padding-right: 0.0286667rem;
  }

  [data-layout="careerstep"] .path04 .path_wrap {
    padding-left: calc(15 / 375 * 1rem);
    padding-right: calc(10 / 375 * 1rem);
  }

  [data-layout="careerstep"] .block05 .balloon-001 {
    left: calc(380 / 375 * 1rem);
  }

  [data-layout="careerstep"] .block05 .balloon-002 {
    left: calc(400 / 375 * 1rem);
  }

  [data-layout="careerstep"] .block05 .balloon-003 {
    left: calc(420 / 375 * 1rem);
  }

  [data-layout="careerstep"] .block05 .balloon-004 {
    left: calc(470 / 375 * 1rem);
  }
  [data-layout="careerstep"] .block05 .balloon-005 {
    left: calc(550 / 375 * 1rem);
  }
  [data-layout="careerstep"] .block05 .balloon-006 {
    left: calc(620 / 375 * 1rem);
  }

  [data-layout="careerstep"] .careerPath .block {
    padding-bottom: calc(100 / 375 * 1rem);
    margin-bottom: calc(50 / 375 * 1rem);
    border-bottom: 1px solid #ccc;
  }
}

@media (max-width: 768px) {
  [data-layout="careerstep"] .Main {
    padding-bottom: calc(30 / 375 * 1rem);
  }

  [data-layout="careerstep"] .PageTitle {
    margin-bottom: 0.1066666667rem;
  }

  [data-layout="careerstep"] .path_info,
  .path_info .thumb {
    flex-direction: column;
    margin-bottom: calc(30 / 375 * 1rem);
  }

  [data-layout="careerstep"] .path_info .thumb p {
    text-align: center;
    margin-top: calc(10 / 375 * 1rem);
  }

  [data-layout="careerstep"] .path_info .txt {
    width: 100%;
    font-size: 0.0373333333rem;
    line-height: 0.0653333333rem;
  }

  [data-layout="careerstep"] .path_wrap {
    display: flex;
    /*padding-top:  calc(15 / 375 * 1rem);
  padding-bottom: calc(30 / 375 * 1rem);*/
    padding: 0;
    width: 100%;
  }

  [data-layout="careerstep"] .text-section {
    display: block;
  }

  [data-layout="careerstep"] .path {
    clip-path: none;
    background: none;
    flex-direction: column;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: calc(20 / 375 * 1rem);
  }

  [data-layout="careerstep"] .balloon {
    clip-path: polygon(50% 15%, 100% 0%, 100% 85%, 50% 100%, 0% 85%, 0% 0%);

    margin-right: calc(25 / 375 * 1rem);
    min-width: calc(80 / 375 * 1rem);
    padding-top: calc(30 / 375 * 1rem);
    padding-bottom: calc(30 / 375 * 1rem);
    background-color: rgb(173, 11, 64);
    /*color: #333;*/
    color: #fff;
    font-weight: 600;
    min-height: calc(80 / 375 * 1rem);
    text-align: center;
  }

  [data-layout="careerstep"] .path03 .balloon-001 {
    clip-path: polygon(50% 13%, 100% 0%, 100% 88%, 50% 100%, 0% 88%, 0% 0%);
    padding-top: calc(38 / 375 * 1rem);
    min-height: calc(100 / 375 * 1rem);
  }

  [data-layout="careerstep"] .path04 .balloon-001 {
    clip-path: polygon(50% 10%, 100% 0%, 100% 90%, 50% 100%, 0% 90%, 0% 0%);
    padding-top: calc(50 / 375 * 1rem);
    min-height: calc(130 / 375 * 1rem);
  }
  /*
.gradation00 {background-color: #fff;
}
.gradation01 {background-color: #FFFCFD;
}

.gradation02 {background-color:#FFF9FB;
}

.gradation03 {background-color:#FFF7F9;
}

.gradation04 {background-color:#FFF4F7;
}
.gradation05 {background-color:#FFEFF4;
}

.gradation06 {background-color:#FFECF2;
}
*/

  [data-layout="careerstep"] .careerPath .block {
    padding-bottom: calc(50 / 375 * 1rem);
    margin-bottom: calc(30 / 375 * 1rem);
    border-bottom: 1px solid #ccc;
  }

  [data-layout="careerstep"] .careerPath {
    margin-bottom: calc(30 / 375 * 1rem);
  }
}