@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed&family=Noto+Sans+JP:wght@300&display=swap");
.loader-container {
  display: none; }

h4 {
  font-family: 'Barlow Semi Condensed', sans-serif;
  color: #9fa0a0;
  font-size: 58px;
  line-height: 1.0;
  margin-bottom: 20px;
  font-weight: normal; }

.leadCopy {
  text-align: center;
  margin: 5rem auto; }
  @media screen and (max-width: 768px) {
    .leadCopy {
      text-align: left;
      width: 90%; }
      .leadCopy .text-l {
        font-size: 0.8rem; } }

.developBox {
  max-width: 900px;
  margin: 5rem auto 0; }
  .developBox li {
    overflow: hidden;
    position: relative;
    margin-bottom: 5rem; }
    @media screen and (max-width: 768px) {
      .developBox li {
        margin-bottom: 1rem; } }
    .developBox li .pic {
      width: 63%; }
      .developBox li .pic img {
        width: 100%;
        height: auto; }
    .developBox li .txtArea {
      width: 100%;
      text-align: center;
      margin-bottom: 5%; }
      .developBox li .txtArea .text-l {
        margin-bottom: 5%; }
      .developBox li .txtArea h5 {
        font-family: 'Barlow Semi Condensed', sans-serif;
        color: #9fa0a0;
        font-size: 58px;
        line-height: 1.0;
        margin-bottom: 20px; }
    .developBox li .imgLogo {
      text-align: center;
      padding: 3rem 0 2rem; }
      .developBox li .imgLogo .note {
        padding-bottom: 1%; }
      .developBox li .imgLogo img {
        width: auto;
        height: 80px; }
    .developBox li .imgArea {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start; }
      .developBox li .imgArea div, .developBox li .imgArea li {
        min-height: 0%; }
      .developBox li .imgArea .imgBox {
        width: 33%;
        margin: 0 2%; }
    .developBox li.develop01 .imgArea .short {
      width: 35%; }
    .developBox li.develop01 .imgArea .wide {
      width: 56%; }
    .developBox li.develop02 .imgArea .wide {
      width: 46%; }
    .developBox li.develop02 .imgArea .wide {
      width: 46%; }
    .developBox li.develop03 .imgLogo .note {
      padding-bottom: 0%; }
    .developBox li.develop03 .imgArea .imgBox {
      width: 46%; }
    .developBox li.develop04 .imgLogo .note {
      padding-bottom: 0%; }
    .developBox li.develop04 .imgArea .imgBox {
      width: 100%;
      text-align: center; }
      .developBox li.develop04 .imgArea .imgBox img {
        max-width: 500px; }
  @media screen and (max-width: 768px) {
    .developBox .leadCopy {
      margin: 2rem auto; }
      .developBox .leadCopy h4 {
        font-size: 42px; }
    .developBox li {
      margin-bottom: 3rem; }
      .developBox li .txtArea {
        width: 90%;
        margin-left: 5%;
        text-align: left;
        margin-bottom: 5%; }
        .developBox li .txtArea .text-l {
          margin-bottom: 5%; }
          .developBox li .txtArea .text-l .aw {
            display: inline; }
          .developBox li .txtArea .text-l br {
            display: none; }
      .developBox li .imgLogo {
        text-align: center;
        padding: 3rem 0 1.5rem; }
        .developBox li .imgLogo img {
          width: auto;
          height: 80px; }
      .developBox li .imgArea {
        width: 100%; }
        .developBox li .imgArea .imgBox {
          width: 40%;
          margin-bottom: 2%; } }
  @media screen and (max-width: 640px) {
    .developBox li .imgLogo img {
      width: auto;
      height: 80px; } }
  @media screen and (max-width: 500px) {
    .developBox li .imgLogo img {
      width: auto;
      height: 70px; }
    .developBox li .imgArea {
      width: 90%;
      max-width: 300px;
      margin: 0 auto 0;
      font-size: 0; }
      .developBox li .imgArea .imgBox {
        width: 100%;
        margin-bottom: 2rem; }
    .developBox li.develop01 .imgArea .short {
      width: 100%; }
    .developBox li.develop01 .imgArea .wide {
      width: 100%; }
    .developBox li.develop02 .imgArea .short {
      width: 100%; }
    .developBox li.develop02 .imgArea .wide {
      width: 100%; }
    .developBox li.develop03 .imgArea .imgBox {
      width: 100%; } }
  @media screen and (max-width: 420px) {
    .developBox li .imgLogo img {
      width: auto;
      height: 60px; } }
  @media screen and (max-width: 360px) {
    .developBox li .imgLogo img {
      width: auto;
      height: 50px; } }