@charset "UTF-8";
.block_case .columns {
  --columnColumnGap:var(--space4);
  --columnRowGap:var(--space4);
  --arrowSize:8px;
}
.block_case .columns .column {
  background: #F7F7F7;
  border-radius: 20px;
  box-sizing: border-box;
  padding: var(--space2);
  display: flex;
  grid-gap: var(--space2);
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.block_case .columns .column .text {
  width: 100%;
}
.block_case .columns .column::before {
  font-size: var(--fontSize_l);
}
.block_case .columns .column.issue::before {
  content: "課題";
}
.block_case .columns .column.result {
  position: relative;
}
.block_case .columns .column.result::before {
  content: "解決後";
}
.block_case .columns .column.result::after {
  width: calc(var(--arrowSize) * 1.25);
  height: var(--arrowSize);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: var(--primaryColor);
  position: absolute;
  bottom: calc(100% + (var(--columnRowGap) - var(--arrowSize)) / 2);
  left: auto;
  right: auto;
  margin: auto;
  content: "";
}
@media (min-width: 768px) {
  .block_case .columns .column.result::after {
    width: var(--arrowSize);
    height: calc(var(--arrowSize) * 1.25);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    right: calc(100% + (var(--columnColumnGap) - var(--arrowSize)) / 2);
    bottom: 0;
    top: 0;
  }
}
@media (min-width: 1280px) {
  .block_case {
    --headWidth:300px;
    display: flex;
    flex-direction: row;
    grid-gap: var(--space5);
    align-items: center;
  }
  .block_case .head {
    width: var(--headWidth);
  }
  .block_case .body {
    width: calc(100% - (var(--headWidth) + var(--space5)));
  }
  .block_case .columns .column {
    min-height: 230px;
    padding: var(--space3);
  }
}

#voices .columns .column {
  background: #F7F7F7;
  border-radius: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  grid-gap: var(--space2);
  padding: var(--space2) var(--space2) var(--space2) var(--space1);
  box-sizing: border-box;
}
#voices .columns .column .icon_wrap {
  width: 72px;
  height: 100px;
}
#voices .columns .column .icon_wrap .icon {
  width: 100%;
  height: 100%;
  display: block;
}
#voices .columns .column .icon_wrap .icon.icon_user_1 {
  background-image: url("../images/casestudy/icon_user_01.png");
}
#voices .columns .column .icon_wrap .icon.icon_user_2 {
  background-image: url("../images/casestudy/icon_user_02.png");
}
#voices .columns .column .comment {
  width: calc(100% - (72px + var(--space2)));
}
#voices .columns .column .comment b {
  font-weight: normal;
  color: var(--primaryColor);
}