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


  style.css


------------------------------------------------------------*/
@media (orientation: landscape), (min-width: 769px) and (orientation: portrait) {}
@media (max-width: 768px) and (orientation: portrait) {}
@media (-webkit-max-device-pixel-ratio: 1), (max-resolution: 1dppx) {}
@media (hover: hover) {}


#arrow .triangle {
  fill: #003847;
}

#arrow .line {
  fill: none;
  stroke: #003847;
  stroke-width: 1px;
}


/*============================================================
  top
============================================================*/
#top {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
}

#top .group-support {
  height: 52rem;
  position: relative;
}

#top .group-support .list-support {
  display: flex;
  flex-direction: row;
  align-items: top;
  justify-content: space-between;
  width: 72%;
  margin: 4.8rem auto 0;
}

#top .group-support .list-support > li {
  width: 4rem;
  position: relative;
  z-index: 1;
}

#top .group-support .list-support .title {
  font-size: 4rem;
  letter-spacing: 0.16em;
}

#top .group-support .list-support .illust {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

#top .group-support .list-support .illust-1 {
  width: 24.8rem;
  height: auto;
  left: -15.2rem;
  top: -4rem;
}

#top .group-support .list-support .illust-2 {
  width: 25.6rem;
  height: auto;
  left: -12.4rem;
  top: 9.6rem;
}

#top .group-support .list-support .illust-3 {
  width: 22.4rem;
  height: auto;
  left: -6.4rem;
  top: -3.6rem;
}

#top .group-support .list-support .illust-4 {
  width: 29.8rem;
  height: auto;
  left: -6.8rem;
  top: -4.4rem;
}

#top .group-support .list-support .arrow {
  width: 8rem;
  height: auto;
  position: absolute;
  margin: auto 0;
  right: -14.4rem;
  top: 0;
  bottom: 0;
}

#top .group-support .list-support .arrow .triangle {
  fill: #003847;
}

#top .group-support .list-support .arrow .line {
  fill: none;
  stroke: #003847;
  stroke-width: 1px;
}

#top .group-support .curve {
  display: block;
  width: 112rem;
  height: auto;
  fill: #003847;
  margin: 4rem auto 0;
  position: absolue;
  left: 0;
  right: 0;
  z-index: 0;
}

#top .group-catch {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 2.4rem;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8rem;
}

@media (max-width: 768px) and (orientation: portrait) {
  #top {
    aspect-ratio: 3 / 4;
  }

  #top .group-support {
    height: 24rem;
    margin-bottom: 8rem;
  }

  #top .group-support .list-support {
    width: 88%;
    margin: 2.4rem auto 0;
  }

  #top .group-support .list-support > li {
    width: 2rem;
  }

  #top .group-support .list-support .title {
    font-size: 2rem;
  }

  #top .group-support .list-support .illust-1 {
    width: calc(24.8rem * 0.44);
    left: -6.4rem;
    top: -1.4rem;
  }

  #top .group-support .list-support .illust-2 {
    width: calc(25.6rem * 0.44);
    left: -4.8rem;
    top: 4.4rem;
  }

  #top .group-support .list-support .illust-3 {
    width: calc(22.4rem * 0.44);
    left: -2.4rem;
    top: -1.4rem;
  }

  #top .group-support .list-support .illust-4 {
    width: calc(29.8rem * 0.44);
    left: -2.6rem;
    top: -1.8rem;
  }

  #top .group-support .list-support .arrow {
    width: 2.4rem;
    right: -4rem;
  }

  #top .group-support .curve {
    width: 120%;
    margin: 4rem -10% 0;
  }

  #top .group-catch {
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    text-align: center;
    bottom: 4.8rem;
  }
}


/*============================================================
  leading
============================================================*/
#leading {
  width: 100%;
  aspect-ratio: 2 / 1;
}

#leading .photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) and (orientation: portrait) {
  #leading {
    aspect-ratio: unset;
    height: calc(100vw - 2.4rem);
  }

  #leading .photo {
    object-position: 60% 50%;
  }
}


/*============================================================
  message
============================================================*/
#message {
  background-color: #003847;
  position: relative;
}

#message .group-text {
  text-align: center;
}

#message .group-text .text-message {
  display: inline-block;
  text-align: left;
}

#message .group-image {
  width: 104rem;
  position: relative;
}

#message .group-image .group-eye,
#message .group-image .group-word {
  width: 50.8rem;
  height: 17.6rem;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 5.6rem;
  overflow: hidden
}

#message .group-image .group-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#message .group-image .group-item .eye,
#message .group-image .group-item .word {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 17.6rem;
  height: 17.6rem;
  border-radius: 50%;
  font-size: 4rem;
}

#message .group-image .group-item .illust-eye {
  width: 12rem;
  height: auto;
}

@media (max-width: 768px) and (orientation: portrait) {
  #message .group-image {
    width: 100%;
  }

  #message .group-image .group-eye,
  #message .group-image .group-word {
    width: 17.6rem;
    height: 6.4rem;
    top: 1.76rem;
  }

  #message .group-image .group-item .eye,
  #message .group-image .group-item .word {
    width: 6.4rem;
    height: 6.4rem;
    font-size: 1.6rem;
  }

  #message .group-image .group-item .illust-eye {
    width: 4rem;
  }
}

/*============================================================
  taigi
============================================================*/
#taigi {
  position: relative;
}

#taigi .group-image {
  width: 80rem;
  height: 80rem;
  position: relative;
}

#taigi .group-image .figure-taigi .ring {
  width: 100%;
  height:100%;
  stroke: #003847;
  stroke-width: 1px;
  fill: none;
}

#taigi .group-image .figure-taigi .dl-taigi {
  width: 100%;
  height:100%;
  position: absolute;
  left: 0;
  top: 0;
}

#taigi .group-image .figure-taigi .dl-taigi > dt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 24rem;
  height: 24rem;
  text-align: center;
  background-color: #ffba00;
  border-radius: 50%;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#taigi .group-image .figure-taigi .dl-taigi > dd {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: absolute;
}

#taigi .group-image .figure-taigi .dl-taigi > dd .arrow {
  width: 8rem;
  height: auto;
  position: absolute;
}

#taigi .group-image .figure-taigi .dl-taigi > dd .arrow .triangle {
  fill: #003847;
}

#taigi .group-image .figure-taigi .dl-taigi > dd .arrow .line {
  fill: none;
  stroke: #003847;
  stroke-width: 1px;
}

#taigi .group-image .figure-taigi .dl-taigi .employee {
  width: 100%;
  height: 50%;
  padding-top: 4.8rem;
  left: 0;
  top: 0;
}

#taigi .group-image .figure-taigi .dl-taigi .employee .arrow {
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 12.8rem;
  transform: rotate(-90deg);
}

#taigi .group-image .figure-taigi .dl-taigi .customer {
  justify-content: center;
  width: 50%;
  height: 100%;
  padding-right: 12.8rem;
  padding-top: 1.6rem;
  left: 0;
  top: 0;
}

#taigi .group-image .figure-taigi .dl-taigi .customer .arrow {
  margin: auto 0;
  right: 10.4rem;
  top: 0;
  bottom: 0;
  transform: rotate(-180deg);
}

#taigi .group-image .figure-taigi .dl-taigi .recruit {
  justify-content: center;
  width: 50%;
  height: 100%;
  padding-left: 12.8rem;
  padding-top: 1.6rem;
  right: 0;
  top: 0;
}

#taigi .group-image .figure-taigi .dl-taigi .recruit .arrow {
  margin: auto 0;
  left: 10.4rem;
  top: 0;
  bottom: 0;
}

#taigi .group-image .figure-taigi .dl-taigi .stockholder {
  width: 100%;
  height: 50%;
  padding-bottom: 4.8rem;
  left: 0;
  bottom: 0;
}

#taigi .group-image .figure-taigi .dl-taigi .stockholder .arrow {
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 12.8rem;
  transform: rotate(90deg);
}

#taigi .group-image .figure-taigi .illust-1 {
  width: 28.8rem;
  height: auto;
  position: absolute;
  left: 4rem;
  top: 4rem;
}

#taigi .group-image .figure-taigi .illust-2 {
  width: 32rem;
  height: auto;
  position: absolute;
  right: -26.4rem;
  top: 10.6rem;
}

#taigi .group-text {
  width: 50%;
  margin-left: auto;
}

@media (max-width: 768px) and (orientation: portrait) {
  #taigi .group-image {
    width: 108%;
    height: calc(108vw - 4.8rem);
    margin-left: -4%;
  }

  #taigi .group-image .figure-taigi .ring {
    transform: rotate(90deg);
  }

  #taigi .group-image .figure-taigi .dl-taigi > dt {
    width: 11.2rem;
    height: 11.2rem;
  }

  #taigi .group-image .figure-taigi .dl-taigi > dd .arrow {
    width: 2.4rem;
  }

  #taigi .group-image .figure-taigi .dl-taigi .employee {
    width: 100%;
    height: 50%;
    padding-top: 1.6rem;
  }

  #taigi .group-image .figure-taigi .dl-taigi .employee .arrow {
    bottom: 5.6rem;
  }

  #taigi .group-image .figure-taigi .dl-taigi .customer {
    padding-right: 5.6rem;
  }

  #taigi .group-image .figure-taigi .dl-taigi .customer .arrow {
    right: 4.8rem;
  }

  #taigi .group-image .figure-taigi .dl-taigi .recruit {
    padding-left: 5.6rem;
  }

  #taigi .group-image .figure-taigi .dl-taigi .recruit .arrow {
    left: 4.8rem;
  }

  #taigi .group-image .figure-taigi .dl-taigi .stockholder {
    padding-bottom: 1.6rem;
  }

  #taigi .group-image .figure-taigi .dl-taigi .stockholder .arrow {
    top: 5.6rem;
  }

  #taigi .group-image .figure-taigi .illust-1 {
    width: calc(28.8rem * 0.4);
    left: 4rem;
    top: 4rem;
  }

  #taigi .group-image .figure-taigi .illust-2 {
    width: calc(32rem * 0.4);
    right: -3.2rem;
    top: auto;
    bottom: -6.4rem;
  }

  #taigi .group-text {
    width: 100%;
  }
}


/*============================================================
  growth
============================================================*/
#growth {
  width: 100%;
  position: relative;
  z-index: 1;
}

#growth .list-growth {
  width: 75vw;
  height: 50vw;
}

#growth .list-growth .fig-growth {
  width: 75vw;
  height: 50vw;
}

#growth .list-growth .fig-growth .photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#growth .list-growth .fig-growth .text-caption {
  display: inline-block;
  padding: 0.2em 0.4em;
  background-color: #fff;
  position: absolute;
  left: 2.4rem;
  bottom: 2.4rem;
  z-index: 1;
}

@media (max-width: 768px) and (orientation: portrait) {
  #growth .list-growth {
    width: calc(100vw - 2.4rem);
    height: calc(100vw - 2.4rem);
  }

  #growth .list-growth .fig-growth {
    width: calc(100vw - 2.4rem);
    height: calc(100vw - 2.4rem);
  }

  #growth .list-growth .fig-growth .text-caption {
    left: 1.6rem;
    bottom: 1.6rem;
  }
}


/*============================================================
  style
============================================================*/
#style {
  background-color: #FFF4D6;
  position: relative;
}

#style .group-image {
  width: 88rem;
  position: relative;
}

#style .group-image .figure-style {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

#style .group-image .figure-style .group-strategy,
#style .group-image .figure-style .group-operations {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

#style .group-image .figure-style .illust-1 {
  width: 14.4rem;
  height: auto;
  margin-left: -2.4rem;
  margin-right: 1.6rem;
  margin-top: -1.6rem;
}

#style .group-image .figure-style .illust-2 {
  width: 29.6rem;
  height: auto;
  margin-right: -1.6rem;
  margin-top: -2.4rem;
}

#style .group-image .figure-style .dl-style {
  text-align: center;
}

#style .group-image .figure-style .multiply {
  width: 3rem;
  height: 3rem;
  fill: none;
  stroke: #003847;
  stroke-width: 4px;
  margin-left: 8rem;
  margin-right: 4.8rem;
}

#style .group-image .figure-style .arrow {
  width: 8rem;
  height: auto;
  margin: auto 0;
  position: absolute;
  right: -8rem;
  top: 0;
  bottom: 0;
}

#style .group-image .figure-style .arrow .triangle {
  fill: #003847;
}

#style .group-image .figure-style .arrow .line {
  fill: none;
  stroke: #003847;
  stroke-width: 1px;
}

#style .group-image .figure-style .result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 16rem;
  height: 16rem;
  text-align: center;
  background-color: #ffba00;
  border-radius: 50%;
  margin: auto 0;
  position: absolute;
  right: -28rem;
  top: 0;
  bottom: 0;
}

#style .group-text {
  width: 88rem;
  text-align: center;
  padding-top: 3.2rem;
  border-top: 1px solid #003847;
}

@media (max-width: 768px) and (orientation: portrait) {
  #style .group-image {
    width: 100%;
  }

  #style .group-image .figure-style {
    flex-direction: column;
    gap: 1.6rem;
  }

  #style .group-image .figure-style .group-strategy,
  #style .group-image .figure-style .group-operations {
    justify-content: space-between;
    width: 88%;
  }

  #style .group-image .figure-style .illust-1 {
    width: calc(14.4rem * 0.48);
    margin-left: 3.2rem;
    margin-right: 0;
    margin-top: 0;
  }

  #style .group-image .figure-style .illust-2 {
    width: calc(29.6rem * 0.48);
    margin-right: 0;
    margin-top: 0;
  }

  #style .group-image .figure-style .dl-style {
    width: 50%;
  }

  #style .group-image .figure-style .multiply {
    width: 1.6rem;
    height: 1.6rem;
    margin-left: 0;
    margin-right: 0;
  }

  #style .group-image .figure-style .arrow {
    width: 4rem;
    margin-top: 1.6rem;
    position: static;
    transform: rotate(90deg);
  }

  #style .group-image .figure-style .result {
    width: 8rem;
    height: 8rem;
    margin: 1.6rem auto 0;
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
  }

  #style .group-text {
    width: 100%;
    padding-top: 2.4rem;
  }

  #style .group-text .text-body {
    text-align: left;
  }
}


/*============================================================
  service
============================================================*/
#service {
  background-color: #ffba00;
  position: relative;
}

#service .list-step > li {
  position: relative;
}

#service .list-step .group-text {
  width: 40rem;
  position: relative;
  z-index: 1;
}

#service .list-step .group-image {
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
}

#service .list-step .step1 {
  height: 64rem;
}

#service .list-step .step1 .group-image .figure-service-flow {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 13.6rem;
  position: relative;
}

#service .list-step .step1 .group-image .figure-service-flow .group-illust {
  position: relative;
  z-index: 1;
}

#service .list-step .step1 .group-image .figure-service-flow .group-illust .arrow .triangle {
  fill: #fff;
}

#service .list-step .step1 .group-image .figure-service-flow .group-illust .arrow .line {
  fill: none;
  stroke: #fff;
  stroke-width: 1px;
}

#service .list-step .step1 .group-image .figure-service-flow .group-illust .arrow-1 {
  width: 84rem;
  height: auto;
}

#service .list-step .step1 .group-image .figure-service-flow .group-illust .arrow-2 {
  width: 2rem;
  height: 10rem;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 1rem;
}

#service .list-step .step1 .group-image .figure-service-flow .group-illust .illust-1 {
  width: 26.4rem;
  height: auto;
  margin: 0 auto;
  position: absolute;
  left: -4rem;
  right: 0;
  bottom: 1rem;
}

#service .list-step .step1 .group-image .figure-service-flow .group-illust .illust-2 {
  width: 44rem;
  height: auto;
  margin: 0 auto;
  position: absolute;
  left: 34.8rem;
  right: 0;
  bottom: 7.2rem;
}

#service .list-step .step1 .group-image .text-outcome {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18.4rem;
  height: 12rem;
  border: 1px solid #003847;
  border-radius: 12rem;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

#service .list-step .step2 {
  height: 57.6rem;
}

#service .list-step .step2 .group-image .figure-service-flow {
  width: 88rem;
  margin-left: 13.6rem;
  margin-bottom: 16rem;
  position: relative;
}

#service .list-step .step2 .group-image .figure-service-flow .group-illust {
  width: 100%;
}

#service .list-step .step2 .group-image .figure-service-flow .group-illust .arrow {
  width: 88rem;
}

#service .list-step .step2 .group-image .figure-service-flow .group-illust .arrow .triangle {
  fill: #fff;
}

#service .list-step .step2 .group-image .figure-service-flow .group-illust .arrow .line {
  fill: none;
  stroke: #fff;
  stroke-width: 1px;
}

#service .list-step .step2 .group-image .figure-service-flow .group-illust .illust-1 {
  width: 45.6rem;
  height: auto;
  margin: 0 auto;
  position: absolute;
  left: -5.6rem;
  right: 0;
  bottom: -15.6rem;
}

#service .list-step .step2 .group-image .figure-service-flow .group-illust .illust-2 {
  width: 40rem;
  height: auto;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: -68.8rem;
  bottom: 7.2rem;
}

#service .list-step .step2 .group-image .figure-service-flow .group-illust .illust-3 {
  width: 22.4rem;
  height: auto;
  margin: 0 auto;
  position: absolute;
  left: -8.8rem;
  right: 0;
  bottom: 8rem;
}

#service .list-step .step2 .group-image .figure-service-flow .list-flow {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  position: absolute;
  left: 0;
  top: 2.4rem;
}

#service .list-step .step2 .group-image .figure-service-flow .list-flow .strategy {
  transform: translateX(-50%);
}

#service .list-step .step2 .group-image .figure-service-flow .list-flow .execution {
  transform: translateX(50%);
}

#service .list-step .step3 {
  height: 61.6rem;
}

#service .list-step .step3 .group-image .figure-service-flow {
  width: 88rem;
  margin-left: 13.6rem;
  margin-bottom: 11.2rem;
  position: relative;
}

#service .list-step .step3 .group-image .figure-service-flow .group-illust {
  width: 100%;
  position: relative;
}

#service .list-step .step3 .group-image .figure-service-flow .group-illust .arrow {
  width: 88rem;
  height: 34rem;
}

#service .list-step .step3 .group-image .figure-service-flow .group-illust .arrow .triangle {
  fill: #fff;
}

#service .list-step .step3 .group-image .figure-service-flow .group-illust .arrow .line {
  fill: none;
  stroke: #fff;
  stroke-width: 1px;
}

#service .list-step .step3 .group-image .figure-service-flow .group-illust .arrow-3 .triangle {
  fill: #003847;
}

#service .list-step .step3 .group-image .figure-service-flow .group-illust .arrow-3 .line {
  stroke: #003847;
  stroke-width: 2px;
}

#service .list-step .step3 .group-image .figure-service-flow .group-illust .illust-1 {
  width: 29.6rem;
  height: auto;
  position: absolute;
  left: 2rem;
  bottom: -2rem;
}

#service .list-step .step3 .group-image .figure-service-flow .group-illust .illust-2 {
  width: 13.6rem;
  height: auto;
  position: absolute;
  right: 24rem;
  bottom: 6.4rem;
}

#service .list-step .step3 .group-image .figure-service-flow .group-illust .illust-3 {
  width: 33.4rem;
  height: auto;
  position: absolute;
  right: -8rem;
  bottom: 6.4rem;
}

#service .list-step .step3 .group-image .figure-service-flow .list-flow {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -4rem;
  transform: translateY(100%);
}

#service .list-step .step3 .group-image .figure-service-flow .list-flow .execution {
  transform: translateX(-50%);
}

#service .list-step .step3 .group-image .figure-service-flow .list-flow .action {
  position: absolute;
  right: 25.6rem;
  top: -40.8rem;
  transform: translateY(-100%);
}

#service .list-step .step3 .group-image .figure-service-flow .list-flow .method {
  transform: translateX(50%);
}

@media (max-width: 768px) and (orientation: portrait) {
  #service .list-step .group-text {
    width: 100%;
  }

  #service .list-step .group-image {
    width: 100%;
    position: relative;
  }

  #service .list-step > li {
    border-top: 1px solid #003847;
    padding-top: 2.4rem;
  }

  #service .list-step .step1 {
    height: auto;
  }

  #service .list-step .step1 .group-image .figure-service-flow {
    padding-bottom: 0;
    margin-top: 24.8rem;
    position: relative;
  }

  #service .list-step .step1 .group-image .figure-service-flow .group-illust {
    position: absolute;
    left: 0;
    right: 0;
    top: -1.6rem;
  }

  #service .list-step .step1 .group-image .figure-service-flow .group-illust .arrow-1 {
    width: 88%;
    height: auto;
  }

  #service .list-step .step1 .group-image .figure-service-flow .group-illust .arrow-2 {
    width: auto;
    height: 4rem;
    top: 0.5rem;
  }

  #service .list-step .step1 .group-image .figure-service-flow .group-illust .illust-1 {
    width: calc(26.4rem * 0.4);
    position: absolute;
    left: -4rem;
    bottom: 0.4rem;
  }

  #service .list-step .step1 .group-image .figure-service-flow .group-illust .illust-2 {
    width: calc(44rem * 0.4);
    left: 9.6rem;
    bottom: 4rem;
  }

  #service .list-step .step1 .group-image .text-outcome {
    width: 11.2rem;
    height: 6.4rem;
    border-radius: 12rem;
    bottom: 0;
  }

  #service .list-step .step2 {
    height: auto;
  }

  #service .list-step .step2 .group-image .figure-service-flow {
    width: 100%;
    margin-left: 0;
    margin-top: 26.4rem;
    margin-bottom: 0;
  }

  #service .list-step .step2 .group-image .figure-service-flow .group-illust {
    position: absolute;
    left: 0;
    right: 0;
    top: -0.8rem;
  }

  #service .list-step .step2 .group-image .figure-service-flow .group-illust .arrow {
    width: 88%;
  }

  #service .list-step .step2 .group-image .figure-service-flow .group-illust .illust-1 {
    width: calc(45.6rem * 0.4);
    left: -8.8rem;
    bottom: -0.8rem;
  }

  #service .list-step .step2 .group-image .figure-service-flow .group-illust .illust-2 {
    width: calc(40rem * 0.4);
    right: -20rem;
    bottom: 8rem;
  }

  #service .list-step .step2 .group-image .figure-service-flow .group-illust .illust-3 {
    width: calc(22.4rem * 0.4);
    left: -9.6rem;
    right: 0;
    bottom: 8.8rem;
  }

  #service .list-step .step2 .group-image .figure-service-flow .list-flow {
    position: relative;
    left: 0;
    top: 0;
  }

  #service .list-step .step2 .group-image .figure-service-flow .list-flow .strategy {
    transform: none;
  }

  #service .list-step .step2 .group-image .figure-service-flow .list-flow .execution {
    transform: none;
  }

  #service .list-step .step3 {
    height: auto;
  }

  #service .list-step .step3 .group-image .figure-service-flow {
    width: 100%;
    margin-left: 0;
    margin-bottom: 0;
    margin-top: 7.2rem;
    position: relative;
  }

  #service .list-step .step3 .group-image .figure-service-flow .group-illust .arrow {
    width: 88%;
    height: auto;
  }

  #service .list-step .step3 .group-image .figure-service-flow .group-illust .illust-1 {
    width: calc(29.6rem * 0.4);
    left: 1.6rem;
    bottom: 0;
  }

  #service .list-step .step3 .group-image .figure-service-flow .group-illust .illust-2 {
    width: calc(13.6rem * 0.4);
    right: 10.8rem;
    bottom: 2.4rem;
  }

  #service .list-step .step3 .group-image .figure-service-flow .group-illust .illust-3 {
    width: calc(33.4rem * 0.4);
    right: -1.6rem;
    bottom: 2rem;
  }

  #service .list-step .step3 .group-image .figure-service-flow .list-flow {
    position: relative;
    left: 0;
    bottom: 0;
    transform: none;
  }

  #service .list-step .step3 .group-image .figure-service-flow .list-flow .execution {
    transform: none;
  }

  #service .list-step .step3 .group-image .figure-service-flow .list-flow .action {
    right: 10.4rem;
    top: -13.2rem;
    transform: translateY(-100%);
  }

  #service .list-step .step3 .group-image .figure-service-flow .list-flow .method {
    transform: none;
  }
}


/*============================================================
  contact
============================================================*/
#contact {
  width: 100%;
  text-align: center;
  background-color: #fff;
  position: relative;
}


/*============================================================
  planning
============================================================*/
#planning {
  width: 100%;
  aspect-ratio: 16 / 6;
}

#planning .photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) and (orientation: portrait) {
  #planning {
    aspect-ratio: unset;
    height: calc(100vw - 2.4rem);
  }

  #planning .photo {
    object-position: 80% 50%;
  }
}


/*============================================================
  company
============================================================*/
#company {
  background-color: #003847;
  padding-bottom: 20.8rem;
  position: relative;
}

#company .group-profile {
  width: 50%;
  margin-left: 50%;
}

#company .group-profile .list-profile > li + li {
  margin-top: 3.2rem;
}

#company .group-profile .dl-profile {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: first-baseline;
}

#company .group-profile .dl-profile > dt {
  width: 25%;
}

#company .group-profile .dl-profile > dd {
  width: 75%;
}

#company .group-profile .dl-person {
  align-items: center;
}

#company .group-profile .dl-person img.photo {
  width: 9.6rem;
  height: 9.6rem;
  object-fit: cover;
  border-radius: 2px;
}

#company .group-profile .dl-profile .link-person {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8rem;
}

#company .group-profile .dl-person .text-link .icon {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: #fff;
  stroke-width: 1px;
  margin-left: 0.4em;
  vertical-align: middle;
}

#company .group-contact {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 50%;
  margin-left: 50%;
  border-top: 1px solid rgba(255,255,255,0.16);
  border-bottom: 1px solid rgba(255,255,255,0.16);
}

#company .logo-fsto {
  position: absolute;
  left: 12rem;
  bottom: 12rem;
}

#company .logo-fsto .logo {
  width: 44rem;
  height: auto;
  fill: #fff;
}

@media (max-width: 768px) and (orientation: portrait) {
  #company {
    padding-bottom: 12rem;
  }

  #company .group-profile {
    width: 100%;
    margin-left: 0;
  }

  #company .group-profile .list-profile > li + li {
    margin-top: 2.4rem;
  }

  #company .group-profile .dl-profile {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: first-baseline;
  }

  #company .group-profile .dl-profile > dt {
    width: 40%;
  }

  #company .group-profile .dl-profile > dd {
    width: 60%;
  }

  #company .group-profile .dl-person {
    align-items: center;
  }

  #company .group-profile .dl-person img.photo {
    width: 8.8rem;
    height: 8.8rem;
  }

  #company .group-profile .dl-profile .link-person {
    flex-direction: column;
    align-items: normal;
    gap: 1.6rem;
  }

  #company .group-profile .dl-person .text-link .icon {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: #fff;
    stroke-width: 1px;
    margin-left: 0.4em;
    vertical-align: middle;
  }

  #company .group-contact {
    align-items: normal;
    justify-content: center;
    width: 100%;
    text-align: center;
    margin-left: 0;
  }

  #company .logo-fsto {
    display: block;
    text-align: center;
    margin-top: 4.8rem;
    position: relative;
    left: auto;
    bottom: auto;
  }

  #company .logo-fsto .logo {
    width: 24rem;
  }
}

/*============================================================
  person
============================================================*/
#person {
  justify-content: center;
}

#person .group-person {
  width: 56%;
  max-height: calc(100% - 1.6rem);
  text-align: left;
  background-color: #fff;
  border-radius: 4px;
  position: relative;
  overflow-y: auto;
}

#person .section-person {
  display: none;
}

#person .section-person.active {
  display: block;
}

#person .section-person .group-profile {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

#person .section-person .photo {
  width: calc(50% - 5.6rem);
  height: auto;
  aspect-ratio: 3 / 4;
  border-radius: 2px;
  overflow: hidden;
  object-fit: cover;
}

#person .section-person .dl-profile {
  width: 50%;
}

#person .section-person .text-career {
  width: 100%;
}

@media (min-aspect-ratio: 2/1) {
  #person .section-person .photo {
    aspect-ratio: 1;
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  #person {
    justify-content: center;
  }

  #person .group-person {
    width: calc(100% - 4.8rem);
    max-height: calc(100% - 4.8rem);
  }

  #person .section-person .group-profile {
    flex-direction: column;
    align-items: normal;
    justify-content: normal;
    gap: 3.2rem;
  }

  #person .section-person .photo {
    width: 48%;
    aspect-ratio: 1 / 1;
  }

  #person .section-person .dl-profile {
    width: 100%;
  }

  #person .section-person .text-career {
    width: 100%;
  }
}


/*============================================================
  privacy
============================================================*/
#privacy .list-privacy > li {
  border-top: 1px solid rgba(0,56,71,0.16);
  padding: 2.4rem 0;
}

#privacy .list-privacy .dl-privacy {
  display: flex;
  flex-direction: row;
  width: 100%;
}

#privacy .list-privacy .dl-privacy > dt {
  width: calc(100% / 3);
}

#privacy .list-privacy .dl-privacy > dd {
  width: calc(100% / 3 * 2);
}

#privacy .list-privacy .dl-privacy .list-disc > li + li {
  margin-top: 0.64em;
}

@media (orientation: landscape), (min-width: 769px) and (orientation: portrait) {
  #privacy .list-privacy > li:last-of-type {
    padding-bottom: 0;
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  #privacy .list-privacy > li {
    padding: 2.4rem 0;
  }

  #privacy .list-privacy .dl-privacy {
    flex-direction: column;
    gap: 1.6rem;
  }

  #privacy .list-privacy .dl-privacy > dt {
    width: 100%;
  }

  #privacy .list-privacy .dl-privacy > dd {
    width: 100%;
  }

  #privacy .list-privacy .dl-privacy .list-disc > li + li {
    margin-top: 0.64em;
  }
}