@charset "UTF-8";
/*------------------------------------------------------------


  figure.css


------------------------------------------------------------*/
/*============================================================
  figure-mission-goal
============================================================*/
#figure-mission-goal {
  height: 48vw;
  position: relative;
  z-index: 1;
}

#figure-mission-goal .group-company {
  width: 13.6vw;
  height: 13.6vw;
  text-align: center;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#figure-mission-goal .group-company .line {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(255,255,255,0.8);
  stroke-width: 0.4px;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#figure-mission-goal .group-company .dl-company {
  position: absolute;
  left: 0;
  right: 0;
  top: 1.6vw;
}

#figure-mission-goal .group-stakeholder .dl-stakeholder {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

#figure-mission-goal .group-stakeholder .dl-stakeholder > dt {
  display: block;
  width: 4em;
  height: 2.2em;
  line-height: 2.2em;
  text-align: center;
  white-space: nowrap;
  background-color: #0068D0;
}

#figure-mission-goal .group-stakeholder .dl-stakeholder > dd {
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  position: absolute;
}

#figure-mission-goal .group-stakeholder .dl-employee {
  margin-top: -10.4vw;
}

#figure-mission-goal .group-stakeholder .dl-employee > dd {
  min-width: 20vw;
  left: 50%;
  top: -12vw;
  transform: translate(-50%, 0);
}

#figure-mission-goal .group-stakeholder .dl-stockholder {
  margin-top: 10.4vw;
}

#figure-mission-goal .group-stakeholder .dl-stockholder > dd {
  min-width: 20vw;
  left: 50%;
  bottom: -12vw;
  transform: translate(-50%, 0);
}

#figure-mission-goal .group-stakeholder .dl-recruiting {
  margin-left: 11.2vw;
}

#figure-mission-goal .group-stakeholder .dl-recruiting > dd {
  margin: auto 0;
  top: 50%;
  right: -8vw;
  transform: translate(100%, -50%);
}

#figure-mission-goal .group-stakeholder .dl-customer {
  margin-left: -11.2vw;
}

#figure-mission-goal .group-stakeholder .dl-customer > dd {
  margin: auto 0;
  top: 50%;
  left: -8vw;
  transform: translate(-100%, -50%);
}

#figure-mission-goal .wave-1 {
  width: 30vw;
  height: 30vw;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#figure-mission-goal .wave-1 .line {
  fill: none;
  stroke: rgba(255,255,255,0.8);
  stroke-miterlimit: 10;
  stroke-width: 0.4px;
}

#figure-mission-goal .wave-1 .line.path-1 {
  stroke: transparent;
}

#figure-mission-goal .wave-1 .text {
  fill: #fff;
}

#figure-mission-goal .wave-2 {
  width: 33.8vw;
  height: 33.8vw;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#figure-mission-goal .wave-2 .line {
  fill: none;
  stroke: rgba(255,255,255,0.8);
  stroke-miterlimit: 10;
  stroke-width: 0.4px;
}

#figure-mission-goal .wave-2 .line.path-1 {
  stroke: transparent;
}

#figure-mission-goal .wave-2 .text {
  fill: #fff;
}

@media (max-width: 768px) and (orientation: portrait) {
  #figure-mission-goal {
    height: 92vw;
  }

  #figure-mission-goal .group-company {
    width: 36vw;
    height: 36vw;
  }

  #figure-mission-goal .group-company .dl-company {
    position: absolute;
    left: 0;
    right: 0;
    top: 4vw;
  }

  #figure-mission-goal .group-stakeholder .dl-stakeholder > dt {
    border: 0.4px solid rgba(255,255,255,0.4);
  }

  #figure-mission-goal .group-stakeholder .dl-stakeholder > dd {
    display: block;
    top: 3.2em;
  }

  #figure-mission-goal .group-stakeholder .dl-employee {
    margin-top: -38vw;
  }

  #figure-mission-goal .group-stakeholder .dl-employee > dd {
    left: 50%;
    transform: translate(-50%, 0);
  }

  #figure-mission-goal .group-stakeholder .dl-stockholder {
    margin-top: 22vw;
  }

  #figure-mission-goal .group-stakeholder .dl-stockholder > dd {
    min-width: 20vw;
    left: 50%;
    bottom: -12vw;
    transform: translate(-50%, 0);
  }

  #figure-mission-goal .group-stakeholder .dl-recruiting {
    margin-left: 29.6vw;
    margin-top: -4vw;
  }

  #figure-mission-goal .group-stakeholder .dl-recruiting > dd {
    display: inline-block;
    margin: 0;
    right: 50%;
    transform: translate(50%, 0);
  }

  #figure-mission-goal .group-stakeholder .dl-customer {
    margin-left: -29.6vw;
    margin-top: -4vw;
  }

  #figure-mission-goal .group-stakeholder .dl-customer > dd {
    margin: 0;
    left: 50%;
    transform: translate(-50%, 0);
  }

  #figure-mission-goal .wave-1 {
    width: 80vw;
    height: 80vw;
  }

  #figure-mission-goal .wave-1 .line {
    stroke: rgba(255,255,255,0.4);
  }

  #figure-mission-goal .wave-2 {
    width: 90vw;
    height: 90vw;
  }

  #figure-mission-goal .wave-2 .line {
    stroke: rgba(255,255,255,0.4);
  }
}


/*============================================================
  figure-service-step1
============================================================*/
#figure-service-step1 {
  position: relative;
  z-index: 1;
}

#figure-service-step1 .list-process {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 52vw;
  padding: 8vw 0;
}

#figure-service-step1 .list-process > li {
  position: relative;
}

#figure-service-step1 .dl-process {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 13.6vw;
  height: 13.6vw;
  text-align: center;
  position: relative;
  z-index: 2;
}

#figure-service-step1 .dl-process > dt img.text {
  width: auto;
  height: 5.6vw;
}

#figure-service-step1 .dl-process > dt .text-en {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -4vw;
  transform: translateY(-100%);
}

#figure-service-step1 .list-process .wave {
  fill: none;
  stroke-miterlimit: 10;
  stroke-width: 0.4px;
  opacity: 0.4;
  margin: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#figure-service-step1 .list-process .wave.cl-blu {
  stroke: #0068D0;
}

#figure-service-step1 .list-process .wave.cl-pnk {
  stroke: #F01060;
}

#figure-service-step1 .list-process .wave-1 {
  width: 27.4vw;
  height: 27.4vw;
}

#figure-service-step1 .list-process .wave-2 {
  width: 29.6vw;
  height: 29.6vw;
}

#figure-service-step1 .list-process .wave-2 .path-1 {
  stroke: transparent;
}

#figure-service-step1 .list-process .arrow {
  height: 27.4vw;
  margin: auto 0 auto 50%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
}

#figure-service-step1 .list-process .group-process-1 .arrow {
}

#figure-service-step1 .list-process .group-process-2 .arrow {
  transform: translateX(-100%);
}

#figure-service-step1 .list-process .arrow .line {
  fill: none;
  stroke-width: 0.4px;
}

#figure-service-step1 .list-process .arrow.cl-blu .line {
  stroke: #0068D0;
}

#figure-service-step1 .list-process .arrow.cl-pnk .line {
  stroke: #F01060;
}

#figure-service-step1 .list-process .arrow.cl-blu .triangle {
  fill: #0068D0;
}

#figure-service-step1 .list-process .arrow.cl-pnk .triangle {
  fill: #F01060;
}

#figure-service-step1 .text-taigi {
  height: 19.2vw;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: -1.6vw;
  bottom: 0;
  z-index: 2;
}

#figure-service-step1 .text-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

@media (max-width: 768px) and (orientation: portrait) {
  #figure-service-step1 .list-process {
    flex-direction: column;
    gap: 88vw;
    padding: 18.4vw 0;
  }

  #figure-service-step1 .dl-process {
    width: 32vw;
    height: 32vw;
  }

  #figure-service-step1 .dl-process > dt img.text {
    height: 12vw;
  }

  #figure-service-step1 .dl-process > dt .text-en {
    bottom: -12vw;
  }

  #figure-service-step1 .list-process .wave-1 {
    width: 64vw;
    height: 64vw;
  }

  #figure-service-step1 .list-process .wave-2 {
    width: 69.12vw;
    height: 69.12vw;
  }

  #figure-service-step1 .list-process .arrow {
    height: 64vw;
    margin: 0;
    left: 50%;
    top: 50%;
    transform-origin: left top;
    transform: rotate(90deg) translateY(-50%);
  }

  #figure-service-step1 .list-process .group-process-2 .arrow {
    transform: rotate(90deg) translate(-100%, -50%);
  }

  #figure-service-step1 .text-taigi {
    height: 40vw;
    top: 0;
  }

  #figure-service-step1 .text-caption {
    top: 0;
    bottom: auto;
  }
}


/*============================================================
  figure-service-step2
============================================================*/
#figure-service-step2 {
  position: relative;
  z-index: 1;
}

#figure-service-step2 .list-design {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32vw;
  padding: 9.6vw 0;
}

#figure-service-step2 .list-design > li {
  position: relative;
}

#figure-service-step2 .dl-design {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 13.6vw;
  height: 13.6vw;
  text-align: center;
  position: relative;
  z-index: 2;
}

#figure-service-step2 .dl-design > dt img.text {
  width: auto;
  height: 5.6vw;
}

#figure-service-step2 .dl-design > dt .text-en {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -5.6vw;
  transform: translateY(-100%);
}

#figure-service-step2 .list-design .wave {
  fill: none;
  stroke-miterlimit: 10;
  stroke-width: 0.4px;
  opacity: 0.8;
  margin: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#figure-service-step2 .list-design .wave.cl-blu {
  stroke: #0068D0;
}

#figure-service-step2 .list-design .wave.cl-pnk {
  stroke: #F01060;
}

#figure-service-step2 .list-design .wave-1 {
  width: 30vw;
  height: 30vw;
}

#figure-service-step2 .list-design .wave-2 {
  width: 32.8vw;
  height: 32.8vw;
}

#figure-service-step2 .list-design .wave-2 .path-1 {
  stroke: transparent;
}

#figure-service-step2 .list-design .text-tag {
  color: #fff;
  background-color: #000;
  border: none;
}

#figure-service-step2 .list-strategy > li {
  position: absolute;
}

#figure-service-step2 .list-strategy > li:nth-of-type(1) {
  left: -56%;
  top: 12%;
}

#figure-service-step2 .list-strategy > li:nth-of-type(2) {
  left: -72%;
  bottom: -8%;
}

#figure-service-step2 .list-strategy > li:nth-of-type(3) {
  right: -56%;
  top: -8%;
}

#figure-service-step2 .list-strategy > li:nth-of-type(4) {
  right: -82%;
  bottom: 8%;
}

#figure-service-step2 .list-creative > li {
  position: absolute;
}

#figure-service-step2 .list-creative > li:nth-of-type(1) {
  left: -40%;
  top: -4%;
}

#figure-service-step2 .list-creative > li:nth-of-type(2) {
  left: -64%;
  bottom: -4%;
}

#figure-service-step2 .list-creative > li:nth-of-type(3) {
  right: -32%;
  top: -24%;
}

#figure-service-step2 .list-creative > li:nth-of-type(4) {
  right: -88%;
  top: 32%;
}

#figure-service-step2 .list-creative > li:nth-of-type(5) {
  right: -56%;
  bottom: -20%;
}

@media (max-width: 768px) and (orientation: portrait) {
  #figure-service-step2 {
    height: auto;
  }

  #figure-service-step2 .list-design {
    flex-direction: column;
    justify-content: normal;
    align-items: center;
    width: 100%;
    gap: 42vw;
    padding: 19.2vw 0;
  }

  #figure-service-step2 .dl-design {
    width: 32vw;
    height: 32vw;
  }

  #figure-service-step2 .dl-design > dt img.text {
    height: 12vw;
  }

  #figure-service-step2 .dl-design > dt .text-en {
    bottom: -12vw;
  }

  #figure-service-step2 .list-design .wave-1 {
    width: 64vw;
    height: 64vw;
  }

  #figure-service-step2 .list-design .wave-2 {
    width: 69.12vw;
    height: 69.12vw;
  }
}


/*============================================================
  figure-service-step3
============================================================*/
#figure-service-step3 {
  position: relative;
  z-index: 1;
}

#figure-service-step3 .list-flow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 24vw;
  padding: 0.8vw 0 9.6vw;
}

#figure-service-step3 .list-flow > li {
  position: relative;
}

#figure-service-step3 .dl-flow {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  width: 12vw;
  height: 5.6vw;
  position: relative;
  z-index: 2;
}

#figure-service-step3 .dl-flow > dt img.text {
  width: auto;
  height: 5.6vw;
}

#figure-service-step3 .dl-flow > dt .text-en {
  display: block;
}

#figure-service-step3 .arrow .line {
  fill: none;
  stroke-width: 0.4px;
}

#figure-service-step3 .arrow.cl-blu .line {
  stroke: #0068D0;
}

#figure-service-step3 .arrow.cl-pnk .line {
  stroke: #F01060;
}

#figure-service-step3 .arrow.cl-blu .triangle {
  fill: #0068D0;
}

#figure-service-step3 .arrow.cl-pnk .triangle {
  fill: #F01060;
}

#figure-service-step3 .arrow-1 {
  width: 24vw;
  margin: auto 0;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  transform: translateX(100%);
  z-index: 1;
}

#figure-service-step3 .arrow-2,
#figure-service-step3 .arrow-3 {
  width: 60vw;
  margin: auto 0;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  transform: translateX(-100%);
  opacity: 0.8;
}

@media (max-width: 768px) and (orientation: portrait) {
  #figure-service-step3 .list-flow {
    flex-direction: column;
    justify-content: normal;
    align-items: center;
    gap: 48vw;
    padding: 0;
  }

  #figure-service-step3 .dl-flow {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: auto;
    height: auto;
    margin-top: 0;
    gap: 8vw;
  }

  #figure-service-step3 .dl-flow > dt {
    width: 9.6vw;
  }

  #figure-service-step3 .dl-flow > dt img.text {
    height: 12vw;
  }

  #figure-service-step3 .dl-flow > dd {
    width: 24vw;
    text-align: left;
    margin-bottom: 1.6rem;
    white-space: nowrap;
  }

  #figure-service-step3 .arrow .line {
    stroke-width: 0.8px;
  }

  #figure-service-step3 .arrow-1 {
    width: 40vw;
    margin: 0;
    left: 4.8vw;
    right: auto;
    top: auto;
    bottom: -4vw;
    transform-origin: left center;
    transform: rotate(90deg);
  }

  #figure-service-step3 .arrow-2,
  #figure-service-step3 .arrow-3 {
    width: 106vw;
    margin: 0;
    left: 64%;
    right: auto;
    top: -4vw;
    bottom: auto;
    transform-origin: left top;
    transform: rotate(90deg) translate(-100%, -50%);
  }
}


/*============================================================
  figure-service-stance
============================================================*/
#figure-service-stance {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  position: relative;
  z-index: 1;
}

#figure-service-stance .list-flow {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  gap: 0.3vw;
  padding-left: 11.3vw;
  position: relative;
}

#figure-service-stance .list-flow::before {
  content: "";
  display: block;
  width: 11vw;
  height: 1px;
  background-color: #fff;
  position: absolute;
  left: 0;
  bottom: -1px;
}

#figure-service-stance .list-flow > li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 9.3vw;
  height: 4rem;
  position: relative;
}

#figure-service-stance .list-flow > li:first-of-type {
  background-color: rgba(255,255,255,0.16);
}

#figure-service-stance .list-flow > li::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  left: 0;
  bottom: -1px;
}

#figure-service-stance .list-flow > li:last-of-type::after {
  width: 18vw;
}

#figure-service-stance .list-flow > li:last-of-type::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: 2px solid transparent;
  border-left: 0.9vw solid #fff;
  position: absolute;
  left: 18vw;
  bottom: -2.5px;
}

/* #figure-service-stance .list-flow .arrow {
  display: none;
  width: 9.3vw;
  position: absolute;
  right: -0.3vw;
  bottom: 0;
  transform: translate(100%, 50%);
}

#figure-service-stance .list-flow .arrow .line {
  fill: none;
  stroke: #fff;
  stroke-width: 1px;
}

#figure-service-stance .list-flow .arrow .triangle {
  fill: #fff;
} */

#figure-service-stance .dl-flow {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  gap: 0.3vw;
}

#figure-service-stance .dl-flow > dt {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4rem;
  width: 11vw;
  background-color: #fff;
  white-space: nowrap;
}

#figure-service-stance .list-stance {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  gap: 0.3vw;
}

#figure-service-stance .dl-stance > dd {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 9.3vw;
  height: 4rem;
  white-space: nowrap;
  padding-right: 0.8em;
  position: relative;
}

#figure-service-stance .dl-stance.bundle > dd {
  width: 18.9vw;
}

#figure-service-stance .dl-stance .box {
  width: 100%;
  height: 100%;
  fill: #fff;
  margin: auto;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

#figure-service-stance .dl-stance .box.frame {
  fill: none;
  stroke: #fff;
  stroke-width: 0.8px;
}

#figure-service-stance .dl-stance .picture {
  width: 3rem;
  height: 3rem;
  margin: auto 0;
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
}

@media (orientation: landscape), (min-width: 769px) and (orientation: portrait) {
  #figure-service-stance .dl-flow + .dl-flow {
    padding-top: 4rem;
    border-top: 0.4px solid rgba(255,255,255,0.4);
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  #figure-service-stance {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
  }

  #figure-service-stance .list-flow {
    flex-direction: column;
    gap: 1vw;
    width: 24%;
    padding-left: 0;
    padding-top: calc(6vw + 1vw);
  }

  #figure-service-stance .list-flow::before {
    width: 1px;
    height: 6vw;
    left: auto;
    right: 0;
    top: 0;
    bottom: auto;
  }

  #figure-service-stance .list-flow > li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 12vw;
  }

  #figure-service-stance .list-flow > li::after {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    left: auto;
    right: 0;
    top: 0;
    bottom: auto;
  }

  #figure-service-stance .list-flow > li:last-of-type {
    height: calc(24vw + 2vw);
  }

  #figure-service-stance .list-flow > li:last-of-type::after {
    width: 1px;
    height: 100%;
  }

  #figure-service-stance .list-flow > li:last-of-type::before {
    border: 2px solid transparent;
    border-top: 2vw solid #fff;
    left: auto;
    right: -1.5px;
    bottom: -2vw;
  }

  #figure-service-stance .dl-flow {
    flex-direction: column;
    justify-content: left;
    align-items: center;
    gap: 1vw;
    width: 36%;
  }

  #figure-service-stance .dl-flow > dt {
    width: 100%;
    height: 6vw;
  }

  #figure-service-stance .dl-flow > dd {
    width: 100%;
  }

  #figure-service-stance .list-stance {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1vw;
    width: 100%;
  }

  #figure-service-stance .list-stance > li {
    width: 100%;
  }

  #figure-service-stance .dl-stance > dd {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 12vw;
    padding-right: 0;
  }

  #figure-service-stance .dl-stance.bundle > dd {
    width: 100%;
    height: 25vw;
  }

  #figure-service-stance .dl-stance .box {
  }

  #figure-service-stance .dl-stance .picture {
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 2vw;
    bottom: auto;
  }
}