@charset "UTF-8";




/*------------------------------
　　　max-width : 770px
   ------------------------------*/

@media screen and (max-width : 770px) {
  /*720px以下の場合は下記を適応*/

  header {
    height: 40px;
  }

  .wrapper-right,
  .wrapper-left {
    width: 30px;
  }

  .wrapper-bottom {
    height: 40px;
  }

  .inner {
    padding: 0 30px;
  }

  .top-bg {
    margin-top: 40px;
  }

  .top-bg-flower {
    width: 100%;
  }

  .top-bg-gray {
    width: 30%;
  }

  .top-bg-text {
    font-size: 5vw;
  }

  .top-bg-title {
    font-size: 8vw;
    position: absolute;
    top: 35%;
    left: 15%;
  }

  .card {
    width: 75%;
  }

  .card-inner {
    padding: 10px 20px;
    font-size: 2vw;
  }

  .skill-tex {
    font-size: 2vw;
  }

  .skill-tex-title {
    font-size: 3vw;
  }

  .fon-sty,
  .name {
    font-size: 2.5vw;
    margin-bottom: 10px;
  }

  .about {
    height: 1700px;
  }

  .vision-inner {
    display: block;
  }

  .vision-card {
    width: 80%;
  }

  .vision-card1 {
    margin-left: 30%;
  }

  @media screen and (-webkit-min-device-pixel-ratio:0) {
    .card3 {
      width: 80%;
      height: 100%;
      margin-top: 40px;
    }

    @supports (-ms-ime-align:auto) {
      .card3 {
        width: 80%;
        height: 80%;
        margin-top: 40px;
      }
    }

    .view {
      position: absolute;
      top: 75%;
    }

    .career-name-right,
    .slogan,
    .answer {
      font-size: 1.3vw;
    }

    .td2 span,
    .overview,
    .art-td-span,
    .answer-title {
      font-size: 1.7vw;
    }

    .overview1 {
      margin: 0 20px 20px;
      font-size: 3vw;
      line-height: 1.4;
    }

    .wrapper-left-vis {
      width: 15%;
    }
  }

  .works-card .mask {
    opacity: 1;
  }

  /*------------------------------
　　　/max-width : 770px
   ------------------------------*/







  /*------------------------------
　　　max-width : 460px
   ------------------------------*/

  @media screen and (max-width : 460px) {

    .wrapper-right,
    .wrapper-left {
      display: none;
    }

    .wrapper-left-vis h1 {
      margin: 0;
    }

    .wrapper-left-vis h1 br {
      display: none;
    }

    .vis-home {
      display: none;
    }

    .twi {
      margin-left: 30%;
    }

    .mail {
      display: none;
    }

    .mail-2 {
      margin-top: 10px;
      border-bottom: .5px solid #333;
    }

    .home-mail {
      background-color: #fff;
      color: #333;
      line-height: 40px;
    }

    .wrapper-bottom {
      display: none;
    }

    .vis-home-bottom {
      display: block;
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 40px;
      background-color: #fff;
    }

    .home-bottom {
      color: #fff;
      background-color: #333;
      line-height: 40px;
      width: 30%;
      margin: auto;
    }

    .inner {
      padding: 0;
    }

    .top-bg-text {
      display: none;
    }

    .top-bg-gray {
      width: 0%;
    }

    .top-bg-flower {
      width: 100%;
      height: 100%;
    }

    .pc_img,
    .top-parts1 {
      display: none;
    }

    .sp_img {
      display: block;
      width: 100%;
    }

    .top-bg-title {
      font-size: 17vw;
      position: absolute;
      top: 28%;
      left: 8%;
    }

    .about-title {
      font-size: 18vw;
      position: absolute;
      right: 25%;
      top: -5%;
    }

    .about-img-box,
    .works-img-box {
      display: none;
    }

    .board1,
    .board1::before,
    .board2 {
      display: none;
    }

    .top-bg {
      filter: none;
    }

    .about,
    .vision,
    .works {
      position: relative;
      padding: 80px 0 200px;
      background: #faf160;
      height: 2100px;
    }

    .about:before,
    .works:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 300%;
      height: 100%;
      margin: -40% -120% 0;
      background-image: url(../image/about.bg1.JPG);
      -webkit-transform-origin: left center;
      -ms-transform-origin: left center;
      transform-origin: left center;
      -webkit-transform: rotate(10deg);
      -ms-transform: rotate(10deg);
      transform: rotate(20deg);
      z-index: -1;
    }

    .contents_inner {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      padding: 100px 10px 120px;
    }

    .vision:before {
      background-image: url(../image/vision.bg.JPG);
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 300%;
      height: 100%;
      margin: 50% -130% 0;
      -webkit-transform-origin: left center;
      -ms-transform-origin: left center;
      transform-origin: left center;
      -webkit-transform: rotate(-15deg);
      -ms-transform: rotate(-15deg);
      transform: rotate(-15deg);
      z-index: -1;
    }

    @media screen and (-webkit-min-device-pixel-ratio:0) {
      .vision:before {
        background-image: url(../image/vision.bg.JPG);
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 300%;
        height: 100%;
        margin: 40% -150% 0;
        -webkit-transform-origin: left center;
        -ms-transform-origin: left center;
        transform-origin: left center;
        -webkit-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
        transform: rotate(-15deg);
        z-index: -1;
      }
    }


    @supports (-ms-ime-align:auto) {
      .vision:before {
        background-image: url(../image/vision.bg.JPG);
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 300%;
        height: 100%;
        margin: 40% -150% 0;
        -webkit-transform-origin: left center;
        -ms-transform-origin: left center;
        transform-origin: left center;
        -webkit-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
        transform: rotate(-15deg);
        z-index: -1;
      }
    }

    .card {
      width: 100%;
      transform: skewX(0);
    }

    @media screen and (-webkit-min-device-pixel-ratio:0) {
      .card3 {
        width: 80%;
        height: 100%;
        margin-top: 40px;
      }

      @supports (-ms-ime-align:auto) {
        .card3 {
          width: 80%;
          height: 80%;
          margin-top: 40px;
        }
      }

      .card6 {
        padding: 20px;
      }

      .card-inner,
      .answer-title {
        font-size: 4vw;
        transform: skewX(0);
      }

      .skill-tex,
      .skill-tex-title,
      .work-tex {
        font-size: 5vw;
      }

      .work-ti,
      .fon-sty,
      .name {
        font-size: 6vw;
        margin-bottom: 10px;
      }

      .fa-clipboard-list,
      .fa-users-cog {
        font-size: 9vw;
      }

      .about-bg-text,
      .vision-inner,
      .works-bg-text {
        width: 100%;
        margin: 20px
      }

      .vision-title,
      .works-title {
        font-size: 18vw;
        position: absolute;
        right: 25%;
        top: 3%;
      }

      .vision-inner {
        width: 100%;
        margin: 30px 0;
        text-align: center;
      }

      .vision-card {
        width: 100%;
      }

      .vision-card1 {
        margin: 0;
      }

      .view {
        position: absolute;
        top: 43%;
        left: 16%;
      }

      #view-more {
        width: 70vw;
        height: 20vw;
        font-size: 8vw;
      }

      .works-card {
        padding: 0;
      }

      .works {
        height: 1200px;
      }

      .works:before {
        height: 1200px;
      }

      .mask {
        font-size: 3vw;
      }

      @media screen and (-webkit-min-device-pixel-ratio:0) {
        .mask {
          font-size: 3vw;
        }
      }

      @supports (-ms-ime-align:auto) {
        .mask {
          font-size: 3vw;
        }
      }

      .footer {
        margin: 0;
        position: relative;
      }

      .introduction-img {
        width: 60%
      }

      .home {
        font-size: 7vw;
        margin-top: 10px
      }

      .introduction-tex {
        font-size: 5vw;
        margin-bottom: 20px;
      }

      .footer-contact {
        display: none;
      }

      .footer-box {
        display: block;
      }

      .return {
        position: absolute;
        top: 0;
        right: 70px;
        margin: 0;
      }

      #return-top {
        width: 80px;
        height: 80px;
      }

      .fa-angle-double-up {
        font-size: 9vw;
      }

      .wrapper-left-vis {
        display: block;
        width: 100%;
        height: 50px;
        position: fixed;
        top: 0;
        font-size: 5vw;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .vis-inner {
        padding: 70px 0;
        width: 100%;
        margin: 0;
      }

      .title {
        font-size: 8vw;
      }

      .message {
        font-size: 4vw;
        padding-right: 10px;
      }

      .tex1,
      .tex2 {
        margin-bottom: 40px;
      }

      .tex3,
      .tex4 {
        font-size: 6vw;
        margin: 0 0 0 10px;
      }

      .career-top {
        text-align: right;
      }

      .career-top h2 {
        position: absolute;
        top: 30px;
      }

      .career-top p {
        position: absolute;
        top: 20px;
        left: 80%;
        font-size: 10vw;
      }

      .career-img {
        width: 90%;
        padding: 0;
        margin: 120px 0 0 auto;
      }

      .career-name {
        display: block;
        margin: 0;
      }

      .career-name-left {
        font-size: 4vw;
        border: none;
        width: 100%;
        text-align: left;
        line-height: 1.2;
        font-family: 'Quicksand', sans-serif;
        padding: 20px;

      }

      .career-name-left-name {
        font-size: 6vw;
        font-family: "Sawarabi Gothic", 'Kosugi', 'Noto Sans JP', sans-serif;
        font-weight: bold;
      }

      .career-name-right {
        font-size: 4.4vw;
        width: 100%;
        text-align: left;
        line-height: 1;
        padding: 10px 20px;
      }

      .vision-table {
        font-size: 3.5vw;
        padding: 10px;
        margin: 10px;
        width: 100%;
      }

      th,
      td {
        display: block;
        width: 100%;
      }

      .standdown {
        font-size: 5vw;
      }

      .standup {
        display: none;
      }

      .td2,
      .conductor {
        width: 100%;
      }

      .td2 span {
        font-size: 4vw;
      }

      .portfolio h3 {
        font-size: 5vw
      }

      .port-concept {
        display: block;
        text-align: center;
      }

      .concept,
      .info-box {
        width: 80%;
        margin: 0 auto 20px;
      }

      .concept h4 {
        font-size: 4vw;
        margin-bottom: 40px;
      }

      .answer {
        font-size: 4vw;
        margin-bottom: 20px;
      }

      .idea {
        display: block;
        text-align: center;
      }

      .idea-img,
      .idea-description {
        width: 100%;
      }

      .conductor .answer {
        font-size: 2.8vw;
      }

      .idea-concept {
        padding: 30px 20px;
      }

      .concept-img3 img {
        width: 80%;
      }

      .overview {
        font-size: 4vw;
        padding: 10px;
        width: 100%;
      }

      .art-deco {
        display: none;
      }

      .info-box {
        padding: 20px;
      }

      .info-box,
      .wrap-up,
      .slogan,
      .slogan span {
        font-size: 4vw;
      }

      .wrap-up {
        width: 100%;
        margin: 0 0 20px;
      }

      .slogan,
      .slogan2,
      .slogan4 {
        position: static;
        width: 100%;
        text-align: left;
      }

      .slogan {
        margin-bottom: 20px;
      }

      .slogan0,
      .interwiew {
        margin: 30px 0;
        text-align: center;
        font-size: 3.5vw;
        font-weight: bold;
      }

      .art-table,
      .art-td-span,
      .interwiew-text {
        font-size: 3.5vw;
        margin: 0;
        padding: 0;
        width: 100%;
      }

      .art-td-span {
        margin: 30px 0;
      }

      .art-table {
        margin-bottom: 20px;
      }

    }