#development {
  position: relative;
  top: -16vw;
  margin-bottom: -16vw;
}
@media screen and (max-width: 767px) {
  #development {
    top: 0;
    margin-bottom: 0;
  }
}
#development #pankuzu {
  top: 16vw;
}
@media screen and (max-width: 767px) {
  #development #pankuzu {
    top: 0;
  }
}
#development.pomera #deveMain {
  position: relative;
}
#development.pomera #deveMain.active::before, #development.pomera #deveMain.active::after {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
#development.pomera #deveMain::before {
  position: absolute;
  content: "";
  background-image: url(../images/development/mainStroke02.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 21.2vw;
  height: 14.7vw;
  top: 22.6vw;
  right: 23.7vw;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition: clip-path 0.5s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  #development.pomera #deveMain::before {
    display: none;
  }
}
#development.pomera #deveMain .mainImage01 {
  top: 26vw;
  left: 36.7vw;
  z-index: 3;
  width: 44.8vw;
}
@media screen and (max-width: 767px) {
  #development.pomera #deveMain .mainImage01 {
    top: 83.5vw;
    left: 6.7vw;
    width: 65.4vw;
  }
}
#development.pomera #deveMain .mainImage02 {
  top: 18vw;
  right: 3.4vw;
  z-index: 2;
  width: 27.1vw;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition: clip-path 0.5s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
@media screen and (max-width: 767px) {
  #development.pomera #deveMain .mainImage02 {
    top: 64.4vw;
    right: 1.9vw;
    width: 52vw;
  }
}
#development.pomera #deveMain .mainImage02.active {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
#development.pomera #deveMain .mainImage03 {
  bottom: 5.3vw;
  right: 6.3vw;
  z-index: 4;
  width: 25.9vw;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition: clip-path 0.5s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
@media screen and (max-width: 767px) {
  #development.pomera #deveMain .mainImage03 {
    bottom: 8.8vw;
    right: 12vw;
    width: 37.9vw;
  }
}
#development.pomera #deveMain .mainImage03.active {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
#development.hitotoki #deveMain.active::before, #development.hitotoki #deveMain.active::after {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
#development.hitotoki #deveMain::before {
  position: absolute;
  content: "";
  background-image: url(../images/development/mainStroke03.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 21.2vw;
  height: 14.7vw;
  top: 16vw;
  right: 10.6vw;
  z-index: 2;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition: clip-path 0.5s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
@media screen and (max-width: 767px) {
  #development.hitotoki #deveMain::before {
    width: 31.5vw;
    height: 21.9vw;
    top: 58.6vw;
    right: 7.5vw;
  }
}
#development.hitotoki #deveMain::after {
  position: absolute;
  content: "";
  background-image: url(../images/development/mainStroke03.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 21.2vw;
  height: 14.7vw;
  bottom: 11vw;
  right: 25.2vw;
  z-index: 2;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition: clip-path 0.5s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
@media screen and (max-width: 767px) {
  #development.hitotoki #deveMain::after {
    width: 31.5vw;
    height: 21.9vw;
    bottom: 24vw;
    right: 31.2vw;
  }
}
#development.hitotoki #deveMain .mainImage01 {
  top: 22vw;
  left: 36.7vw;
  z-index: 3;
  width: 35.2vw;
}
@media screen and (max-width: 767px) {
  #development.hitotoki #deveMain .mainImage01 {
    top: 68vw;
    left: 6.7vw;
    width: 57.9vw;
  }
}
#development.hitotoki #deveMain .mainImage02 {
  top: 24.2vw;
  right: 12.3vw;
  z-index: 2;
  width: 17.4vw;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition: clip-path 0.5s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
@media screen and (max-width: 767px) {
  #development.hitotoki #deveMain .mainImage02 {
    top: 72vw;
    right: 10.1vw;
    width: 28.6vw;
  }
}
#development.hitotoki #deveMain .mainImage02.active {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
#development.hitotoki #deveMain .mainImage03 {
  bottom: 5vw;
  right: 10.3vw;
  z-index: 2;
  width: 27.4vw;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition: clip-path 0.5s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
@media screen and (max-width: 767px) {
  #development.hitotoki #deveMain .mainImage03 {
    bottom: 8.8vw;
    right: 12vw;
    width: 37.9vw;
  }
}
#development.hitotoki #deveMain .mainImage03.active {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
#development.vbt #deveMain .mainImage01 {
  top: 29.4vw;
  left: 37.2vw;
  z-index: 3;
  width: 41.7vw;
}
@media screen and (max-width: 767px) {
  #development.vbt #deveMain .mainImage01 {
    top: 86.4vw;
    left: 5.9vw;
    width: 66.7vw;
  }
}
#development.vbt #deveMain .mainImage02 {
  top: 21.9vw;
  right: 8.3vw;
  z-index: 2;
  width: 21.4vw;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition: clip-path 0.5s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
@media screen and (max-width: 767px) {
  #development.vbt #deveMain .mainImage02 {
    top: 73.4vw;
    right: 5.9vw;
    width: 34.4vw;
  }
}
#development.vbt #deveMain .mainImage02.active {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
#development.vbt #deveMain .mainImage03 {
  bottom: 5.4vw;
  right: 13.3vw;
  z-index: 2;
  width: 29.8vw;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition: clip-path 0.5s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
@media screen and (max-width: 767px) {
  #development.vbt #deveMain .mainImage03 {
    bottom: 8.5vw;
    right: 25.7vw;
    width: 47.8vw;
  }
}
#development.vbt #deveMain .mainImage03.active {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
@media screen and (max-width: 767px) {
  #development.vbt #deveMain .maiTextArea .mainTitle {
    line-height: 11.3vw;
    margin-bottom: 3vw;
  }
}
#development.potara #deveMain.active::before, #development.potara #deveMain.active::after {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
#development.potara #deveMain::before {
  position: absolute;
  content: "";
  background-image: url(../images/development/mainStroke03.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 19.1vw;
  height: 13.2vw;
  bottom: 16.6vw;
  right: 8.4vw;
  z-index: 3;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition: clip-path 0.5s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
@media screen and (max-width: 767px) {
  #development.potara #deveMain::before {
    width: 32.6vw;
    height: 22.4vw;
    bottom: 22vw;
    right: 5vw;
  }
}
#development.potara #deveMain .mainImage01 {
  top: 18.9vw;
  left: 39.8vw;
  z-index: 3;
  width: 18.2vw;
}
@media screen and (max-width: 767px) {
  #development.potara #deveMain .mainImage01 {
    top: 64.6vw;
    left: 5.9vw;
    width: 31.2vw;
  }
}
#development.potara #deveMain .mainImage02 {
  top: 19.5vw;
  right: 18vw;
  z-index: 2;
  width: 23.1vw;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition: clip-path 0.5s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
@media screen and (max-width: 767px) {
  #development.potara #deveMain .mainImage02 {
    top: 65.4vw;
    right: 21.3vw;
    width: 39.3vw;
  }
}
#development.potara #deveMain .mainImage02.active {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
#development.potara #deveMain .mainImage03 {
  bottom: 9.8vw;
  right: 9vw;
  z-index: 3;
  width: 16vw;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition: clip-path 0.5s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
@media screen and (max-width: 767px) {
  #development.potara #deveMain .mainImage03 {
    bottom: 10.8vw;
    right: 6vw;
    width: 27.2vw;
  }
}
#development.potara #deveMain .mainImage03.active {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
#development #deveMain {
  position: relative;
}
@media screen and (max-width: 767px) {
  #development #deveMain {
    padding-top: 45.4vw;
  }
}
#development #deveMain .mainStroke {
  position: relative;
  right: -20.9vw;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition: clip-path 0.5s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
@media screen and (max-width: 767px) {
  #development #deveMain .mainStroke {
    width: 148.3vw;
    right: auto;
    left: 50%;
    transform: translate(-50%, 0);
  }
}
#development #deveMain .mainStroke.active {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
#development #deveMain .maiTextArea {
  position: absolute;
  top: 19.5vw;
  left: 11.2vw;
  z-index: 5;
}
@media screen and (max-width: 767px) {
  #development #deveMain .maiTextArea {
    top: 35px;
    left: 25px;
  }
}
#development #deveMain .maiTextArea .mainTitle {
  font-weight: 600;
  font-size: 3.3vw;
  background: linear-gradient(10deg, #186CEA, #128DEF 25%, #0CADF4 61%, #00EEFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 2.3vw;
  display: inline-block;
}
@media screen and (max-width: 767px) {
  #development #deveMain .maiTextArea .mainTitle {
    font-size: 8vw;
    line-height: 8vw;
    margin-bottom: 7vw;
  }
}
#development #deveMain .maiTextArea .mainText {
  font-size: 1.1vw;
  font-weight: 600;
  line-height: 1.7vw;
  margin-bottom: 0.8vw;
  opacity: 0;
  transition: all 0.6s;
}
@media screen and (max-width: 767px) {
  #development #deveMain .maiTextArea .mainText {
    font-size: 3.5vw;
    line-height: 5.9vw;
    margin-bottom: 2.7vw;
  }
}
#development #deveMain .maiTextArea .mainText.active {
  opacity: 1;
}
#development #deveMain .maiTextArea .mainText span {
  color: #418FDE;
}
#development #deveMain .maiTextArea .mainSubTitle .yellow {
  align-self: start;
  display: inline-block;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: 0 0;
  background-image: -webkit-linear-gradient(left, rgba(243, 255, 156, 0.9) 50%, transparent 50%);
  background-image: linear-gradient(to right, rgba(243, 255, 156, 0.9) 50%, transparent 50%);
  -webkit-transition-property: background-position;
  transition-property: background-position;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  background-position: 100% 0;
  padding: 0 15px;
}
#development #deveMain .maiTextArea .mainSubTitle .yellow.active {
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-duration: 0.7s;
  transition-duration: 0.7s;
  background-position: 0 0;
}
#development #deveMain .maiTextArea .mainSubTitle .yellow .yellowText {
  font-size: 2.7vw;
  font-weight: bold;
  line-height: 4.7vw;
  letter-spacing: 0.13rem;
  opacity: 0;
  transition: all 0.6s;
}
@media screen and (max-width: 767px) {
  #development #deveMain .maiTextArea .mainSubTitle .yellow .yellowText {
    font-size: 6.2vw;
    line-height: 10.4vw;
  }
}
#development #deveMain .maiTextArea .mainSubTitle .yellow .yellowText.active {
  opacity: 1;
}
#development #deveMain .mainImage01,
#development #deveMain .mainImage02,
#development #deveMain .mainImage03 {
  position: absolute;
}
#development #voice {
  margin: -35px 0 140px;
}
@media screen and (max-width: 767px) {
  #development #voice {
    margin: -10px 0 60px;
  }
}
#development #voice .voicecBg {
  background-color: rgba(65, 143, 222, 0.15);
  padding: 48px;
}
@media screen and (max-width: 767px) {
  #development #voice .voicecBg {
    padding: 40px 24px;
  }
}
#development #voice .voiceFlex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  #development #voice .voiceFlex {
    flex-direction: column;
  }
}
#development #voice .voiceFlex .voiceImage {
  width: 174px;
}
@media screen and (max-width: 767px) {
  #development #voice .voiceFlex .voiceImage {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 auto 10px;
  }
}
@media screen and (max-width: 767px) {
  #development #voice .voiceFlex .voiceImage .image {
    width: 100px;
  }
}
#development #voice .voiceFlex .voiceTextArea {
  width: calc(100% - 230px);
}
@media screen and (max-width: 767px) {
  #development #voice .voiceFlex .voiceTextArea {
    width: 100%;
  }
}
#development #voice .voiceFlex .voiceTitle {
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  #development #voice .voiceFlex .voiceTitle {
    width: calc(100% - 110px);
  }
}
#development #voice .voiceFlex .voiceText {
  line-height: 30px;
}
@media screen and (max-width: 767px) {
  #development #voice .voiceFlex .voiceText {
    font-size: 14px;
    line-height: 24px;
  }
}
#development .deveSection + .deveSection {
  margin-top: 165px;
}
@media screen and (max-width: 767px) {
  #development .deveSection + .deveSection {
    margin-top: 50px;
  }
}
#development .deveSection + .deveSection + .deveSection {
  margin-top: 230px;
}
@media screen and (max-width: 767px) {
  #development .deveSection + .deveSection + .deveSection {
    margin-top: 50px;
  }
}
#development .deveSection + .deveSection + .deveSection + .deveSection {
  margin-top: 80px;
}
@media screen and (max-width: 767px) {
  #development .deveSection + .deveSection + .deveSection + .deveSection {
    margin-top: 50px;
  }
}
#development .deveSection .deveFlex {
  display: flex;
  justify-content: space-between;
  max-width: 1136px;
  margin: 0 auto;
}
@media screen and (max-width: 1280px) {
  #development .deveSection .deveFlex {
    max-width: 88.75%;
  }
}
@media screen and (max-width: 767px) {
  #development .deveSection .deveFlex {
    max-width: 990px;
    margin: 0 auto;
    width: 87.2%;
  }
}
@media print {
  #development .deveSection .deveFlex {
    max-width: 97%;
  }
}
@media screen and (max-width: 1280px) {
  #development .deveSection .deveFlex.right {
    margin: 0;
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  #development .deveSection .deveFlex.right {
    margin: 0 auto;
    flex-direction: column;
  }
}
#development .deveSection .deveFlex.left {
  flex-direction: row-reverse;
}
@media screen and (max-width: 1280px) {
  #development .deveSection .deveFlex.left {
    margin: 0;
    margin-right: auto;
  }
}
@media screen and (max-width: 767px) {
  #development .deveSection .deveFlex.left {
    margin: 0 auto;
    flex-direction: column;
  }
}
#development .deveSection .deveFlex.row {
  flex-direction: row-reverse;
}
#development .deveSection .deveFlex .deveTextArea {
  width: 57.2%;
}
@media screen and (max-width: 767px) {
  #development .deveSection .deveFlex .deveTextArea {
    width: 100%;
    margin-bottom: 30px;
  }
}
#development .deveSection .deveFlex .deveTextArea .deveTitle {
  font-size: 28px;
  font-weight: 500;
  line-height: 46px;
  margin-bottom: 20px;
  position: relative;
}
@media screen and (max-width: 767px) {
  #development .deveSection .deveFlex .deveTextArea .deveTitle {
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 10px;
  }
}
#development .deveSection .deveFlex .deveTextArea .deveTitle::before {
  position: absolute;
  content: "";
  background-image: url(../images/development/titleStroke.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 360px;
  height: 250px;
  top: -85px;
  left: -230px;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  #development .deveSection .deveFlex .deveTextArea .deveTitle::before {
    top: -25px;
    left: -180px;
  }
}
#development .deveSection .deveFlex .deveTextArea .deveText {
  font-size: 16px;
  line-height: 31px;
}
@media screen and (max-width: 767px) {
  #development .deveSection .deveFlex .deveTextArea .deveText {
    font-size: 14px;
    line-height: 24px;
  }
}
#development .deveSection .deveFlex .deveTextArea .deveText + .deveTitle {
  margin-top: 40px;
}
@media screen and (max-width: 767px) {
  #development .deveSection .deveFlex .deveTextArea .deveText + .deveTitle {
    margin-top: 20px;
  }
}
#development .deveSection .deveFlex .deveImage {
  width: 40%;
}
@media screen and (max-width: 767px) {
  #development .deveSection .deveFlex .deveImage {
    width: 100%;
  }
}
#development #deveSection03 .deveFlex {
  max-width: 990px;
}
@media screen and (max-width: 767px) {
  #development #deveSection03 .deveFlex {
    flex-direction: column;
    width: 100%;
  }
}
@media print {
  #development #deveSection03 .deveFlex {
    max-width: 97%;
  }
}
#development #deveSection03 .deveFlex .deveTextArea,
#development #deveSection03 .deveFlex .deveImage {
  width: 48.5%;
}
@media screen and (max-width: 767px) {
  #development #deveSection03 .deveFlex .deveTextArea,
  #development #deveSection03 .deveFlex .deveImage {
    width: 100%;
  }
}
#development #epilogue {
  margin: 163px 0 80px;
}
@media screen and (max-width: 767px) {
  #development #epilogue {
    margin: 47px 0 87px;
  }
}
#development #epilogue .epilogueBg {
  background: linear-gradient(10deg, #00EEFF, #0CADF4 39%, #128DEF 75%, #186CEA);
  max-width: 88.75%;
  margin-right: auto;
  padding: 63px 85px 72px 144px;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 1130px) {
  #development #epilogue .epilogueBg {
    padding: 7.5vw 5.6vw 12.8vw;
  }
}
@media screen and (max-width: 767px) {
  #development #epilogue .epilogueBg {
    background: linear-gradient(45deg, #00EEFF, #0CADF4 39%, #128DEF 75%, #186CEA);
    max-width: 100%;
    padding: 48px 24px 54px;
    margin: 0;
  }
}
@media print {
  #development #epilogue .epilogueBg {
    padding: 7.5vw 5.6vw 12.8vw;
  }
}
#development #epilogue .epilogueBg::before {
  position: absolute;
  content: "";
  background-image: url(../images/development/epilogueStroke.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 671px;
  height: 464px;
  top: -41px;
  left: -128px;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  #development #epilogue .epilogueBg::before {
    width: 119.5vw;
    height: 102vw;
    top: auto;
    bottom: 0;
    left: 58%;
    transform: translate(-50%, 0);
  }
}
#development #epilogue .epilogueBg .epilogueFlex {
  display: flex;
  justify-content: space-between;
  max-width: 1136px;
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  #development #epilogue .epilogueBg .epilogueFlex {
    flex-direction: column-reverse;
  }
}
#development #epilogue .epilogueBg .epilogueFlex .epilogueImage {
  width: 24.7%;
}
@media screen and (max-width: 767px) {
  #development #epilogue .epilogueBg .epilogueFlex .epilogueImage {
    width: 49.2%;
    margin: 0 auto;
  }
}
#development #epilogue .epilogueBg .epilogueFlex .epilogueTextArea {
  color: #fff;
  width: 71.8%;
}
@media screen and (max-width: 767px) {
  #development #epilogue .epilogueBg .epilogueFlex .epilogueTextArea {
    width: 100%;
    margin-bottom: 16px;
  }
}
#development #epilogue .epilogueBg .epilogueFlex .epilogueTextArea .epilogueTop {
  font-weight: bold;
  line-height: 50px;
}
@media screen and (max-width: 767px) {
  #development #epilogue .epilogueBg .epilogueFlex .epilogueTextArea .epilogueTop {
    font-size: 14px;
    line-height: 1;
    margin-bottom: 20px;
  }
}
#development #epilogue .epilogueBg .epilogueFlex .epilogueTextArea .epilogueTitle {
  font-size: 28px;
  font-weight: 500;
  line-height: 41px;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  #development #epilogue .epilogueBg .epilogueFlex .epilogueTextArea .epilogueTitle {
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 10px;
  }
}
#development #epilogue .epilogueBg .epilogueFlex .epilogueTextArea .epilogueText {
  line-height: 33px;
}
@media screen and (max-width: 767px) {
  #development #epilogue .epilogueBg .epilogueFlex .epilogueTextArea .epilogueText {
    font-size: 14px;
    line-height: 24px;
  }
}
@media print {
  #development #other {
    padding-top: 150px;
  }
}
#development #other .otherBg {
  background: linear-gradient(-45deg, rgba(30, 180, 175, 0.15), rgba(65, 143, 222, 0.15) 54%, rgba(0, 113, 188, 0.15));
  padding: 62px 0 100px;
}
@media screen and (max-width: 767px) {
  #development #other .otherBg {
    padding: 30px 0 57px;
  }
}
#development #other .otherFlex {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  #development #other .otherFlex {
    flex-direction: column;
  }
}
#development #other .otherFlex .subTitleArea {
  width: 5.3%;
  position: relative;
  top: -92px;
}
@media screen and (max-width: 767px) {
  #development #other .otherFlex .subTitleArea {
    width: 100%;
    top: -50px;
  }
}
#development #other .otherFlex .subTitleArea .subTitle {
  font-size: 35px;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  #development #other .otherFlex .subTitleArea .subTitle {
    font-size: 23px;
  }
}
@media screen and (max-width: 767px) {
  #development #other .otherFlex .subTitleArea .subTitle {
    font-size: 30px;
  }
}
#development #other .otherFlex .subTitleArea .subTitle span {
  letter-spacing: 0.4rem;
}
@media screen and (max-width: 767px) {
  #development #other .otherFlex .subTitleArea .subTitle span {
    letter-spacing: 0.2rem;
  }
}
#development #other .otherFlex .otherRight {
  width: 91.4%;
}
@media screen and (max-width: 1024px) {
  #development #other .otherFlex .otherRight {
    width: 89%;
  }
}
@media screen and (max-width: 767px) {
  #development #other .otherFlex .otherRight {
    width: 100%;
  }
}
@media print {
  #development #other .otherFlex .otherRight {
    width: 89%;
  }
}
#development #other .otherFlex .otherRight .otherItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
#development #other .otherFlex .otherRight .otherItem + .otherItem {
  margin-top: 35px;
}
@media screen and (max-width: 767px) {
  #development #other .otherFlex .otherRight .otherItem + .otherItem {
    margin-top: 15px;
  }
}
#development #other .otherFlex .otherRight .otherItem:hover {
  opacity: 1;
}
#development #other .otherFlex .otherRight .otherItem:hover .otherImage .scale {
  transform: scale(1.1);
}
#development #other .otherFlex .otherRight .otherItem:hover .otherText::before {
  background-image: url(../images/common/arw03.svg);
  left: 5px;
}
@media screen and (max-width: 767px) {
  #development #other .otherFlex .otherRight .otherItem:hover .otherText::before {
    background-image: url(../images/common/arw02_grd_sp.svg);
    right: 5.7vw;
    left: auto;
  }
}
#development #other .otherFlex .otherRight .otherItem:hover .otherTitle {
  color: #418FDE;
}
#development #other .otherFlex .otherRight .otherItem .otherImage {
  position: relative;
  width: 53%;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  #development #other .otherFlex .otherRight .otherItem .otherImage {
    width: 100%;
  }
}
#development #other .otherFlex .otherRight .otherItem .otherImage .scale {
  transition: all 0.6s ease;
}
#development #other .otherFlex .otherRight .otherItem .otherImage .otherNumber {
  position: absolute;
  width: 295px;
  top: 0;
  left: 0;
  z-index: 1;
}
@media screen and (max-width: 1130px) {
  #development #other .otherFlex .otherRight .otherItem .otherImage .otherNumber {
    width: 26.1vw;
  }
}
@media screen and (max-width: 767px) {
  #development #other .otherFlex .otherRight .otherItem .otherImage .otherNumber {
    width: 37.6vw;
  }
}
@media print {
  #development #other .otherFlex .otherRight .otherItem .otherImage .otherNumber {
    width: 26.1vw;
  }
}
#development #other .otherFlex .otherRight .otherItem .otherText {
  width: 43.6%;
  position: relative;
  padding-bottom: 35px;
}
@media screen and (max-width: 767px) {
  #development #other .otherFlex .otherRight .otherItem .otherText {
    position: absolute;
    width: 100%;
    bottom: 3.5vw;
    left: 3.5vw;
    padding-bottom: 0;
  }
}
#development #other .otherFlex .otherRight .otherItem .otherText::before {
  position: absolute;
  content: "";
  background-image: url(../images/development/arw.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 20px;
  height: 5px;
  bottom: 0;
  left: 0;
  transition: all 0.6s ease;
}
@media screen and (max-width: 767px) {
  #development #other .otherFlex .otherRight .otherItem .otherText::before {
    background-image: url(../images/common/arw02_sp.svg);
    width: 9.6vw;
    height: 9.6vw;
    right: 5.7vw;
    left: auto;
  }
}
#development #other .otherFlex .otherRight .otherItem .otherText .otherTitle {
  font-weight: 600;
  font-size: 20px;
  line-height: 160%;
  letter-spacing: 0;
  transition: all 0.6s ease;
}
@media screen and (max-width: 767px) {
  #development #other .otherFlex .otherRight .otherItem .otherText .otherTitle {
    color: #fff;
    font-size: 4.6vw;
    line-height: 140%;
  }
}